robbond/confidence-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

exp(06): focused investigation — visual hierarchy without layout changes

Browse Source 
Emphasise the active investigation card through stronger elevation,
clearer borders, and improved spacing. Quiet supporting panels by
reducing border opacity, softening heading weight, and lowering
text contrast — making them available without competing for attention.

Facilitator card receives a warm surface tint to read as a briefing
card rather than a generic panel.

Documentation: close experiment 05 with findings, add experiment 06
to the design evolution log, add Attention Hierarchy to UX guidelines,
defer dark mode to a future Investigation Mode experiment.

Presentation changes only — no reasoning, prompts, graph, API, or
backend modifications.
This commit is contained in:
robbond
2026-08-05 12:41:13 +01:00
parent f46c419168
commit 46f2d12726
6 changed files with 102 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/scenario-form.jsx
+11 -11
View File
@@ -395,18 +395,18 @@ export default function ScenarioForm() {
{/* Left panel — Facilitator (1/3 on desktop) */}
{!hideFacilitatorOnLanding && (
<div className="md:col-span-1">
<div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6 sticky top-6">
<h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Before we begin</h2>
<p className="text-sm leading-relaxed text-gray-700 mb-4">
<div className="rounded-lg border border-amber-200/60 bg-gradient-to-b from-amber-50/60 to-white px-8 pt-7 pb-7 sticky top-6 shadow-sm">
<h2 className="mb-4 text-xs font-bold tracking-widest uppercase text-amber-600/60">Before we begin</h2>
<p className="text-sm leading-relaxed text-amber-900/80 mb-5">
The Confidence Engine helps build confidence by understanding situations before deciding what to do.
</p>
<p className="text-sm leading-relaxed text-gray-700 mb-3">
<p className="text-sm leading-relaxed text-amber-900/70 mb-4">
You do not need to know exactly what the problem is.
</p>
<p className="text-sm leading-relaxed text-gray-700 mb-6">
<p className="text-sm leading-relaxed text-amber-900/70 mb-7">
Simply describe what you have observed. We will work through it together, one question at a time.
</p>
<div className="flex items-center gap-2 pt-4 border-t border-gray-200">
<div className="flex items-center gap-2 pt-5 border-t border-amber-100/60">
<input
type="checkbox"
id="dismiss-facilitator"
@@ -428,7 +428,7 @@ export default function ScenarioForm() {
{/* Right panel — Workspace (2/3 on desktop) */}
<div className={hideFacilitatorOnLanding ? "md:col-span-3" : "md:col-span-2"}>
<h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Tell me what's happening</h2>
<h2 className="mb-4 text-xs font-bold tracking-widest uppercase text-gray-400">Tell me what's happening</h2>
<textarea
ref={textareaRef}
value={scenario}
@@ -458,8 +458,8 @@ export default function ScenarioForm() {
)}
{status === "idle" && MOCK_ENABLED && (
<details className="rounded-lg border border-gray-200 bg-gray-50">
<summary className="cursor-pointer px-4 py-2 text-sm font-medium text-gray-600">Developer details</summary>
<details className="rounded-lg border border-gray-200/60 bg-gray-50/30">
<summary className="cursor-pointer px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-600">Developer details</summary>
<div className="space-y-3 px-4 pb-4">
<div>
<label htmlFor="mock-scenario" className="block text-xs font-medium text-gray-500 mb-1">Mock scenario</label>
@@ -483,7 +483,7 @@ export default function ScenarioForm() {
type="button"
onClick={() => handleScenarioFill(s.key)}
disabled={!scenario.trim() && scenario !== s.centralStatement}
className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-100 disabled:opacity-30"
className="rounded-md border border-gray-200/60 bg-white/80 px-3 py-1.5 text-xs text-gray-500 hover:bg-gray-50 disabled:opacity-30"
>
{s.label} ({s.turnCount} turns)
</button>
@@ -558,7 +558,7 @@ export default function ScenarioForm() {
setCurrentUnderstanding(null);
setUpdateError(null);
}}
className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-50"
className="rounded-lg border border-gray-200/60 px-4 py-2 text-sm font-medium text-gray-500 transition hover:bg-gray-50/80"
>
Start new investigation
</button>