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/investigation-summary-panel.jsx
+6 -6
View File
@@ -62,10 +62,10 @@ function InvestigationSummaryPanel({ graph, selectedQuestion, result, updateStat
}
const statusColors = {
idle: { border: "border-gray-200", bg: "bg-gray-50", text: "text-gray-600" },
investigating: { border: "border-blue-200", bg: "bg-blue-50", text: "text-blue-700" },
complete: { border: "border-green-200", bg: "bg-green-50", text: "text-green-700" },
limit: { border: "border-gray-300", bg: "bg-gray-100", text: "text-gray-500" },
idle: { border: "border-gray-200/60", bg: "bg-gray-50/40", text: "text-gray-400" },
investigating: { border: "border-blue-200/60", bg: "bg-blue-50/30", text: "text-blue-600" },
complete: { border: "border-green-200/60", bg: "bg-green-50/30", text: "text-green-600" },
limit: { border: "border-gray-200", bg: "bg-gray-50/40", text: "text-gray-400" },
};
const colors = statusColors[currentStatus.level] || statusColors.idle;
@@ -125,10 +125,10 @@ function InvestigationSummaryPanel({ graph, selectedQuestion, result, updateStat
{/* Current understanding */}
{currentUnderstanding && (
<div>
<h3 className="mb-1 text-xs font-bold uppercase tracking-wider text-gray-400">
<h3 className="mb-1 text-[11px] font-medium tracking-widest uppercase text-gray-400/70">
What we understand so far
</h3>
<p className="text-sm leading-relaxed text-gray-700">{currentUnderstanding}</p>
<p className="text-sm leading-relaxed text-gray-600">{currentUnderstanding}</p>
</div>
)}