experiment: organise workspace into cognitive zones

components/reasoning-workspace.jsx

@@ -656,36 +656,27 @@ export default function ReasoningWorkspace({
         </div>
       ) : (
         <>
-          {/* ── Investigation summary card — always full-width ─────────── */}
+          {/* ═══════════════ ZONE 1 — Active work ═══════════════ */}
-          <InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
+          <div className="space-y-6">
 
-          {/* Active workspace — primary focus, full-width column ─────── */}
+            {/* Investigation status & context — desktop: two-column; mobile: stacked */}
-          {hasSelectedQuestion && (
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-            <>
+              <InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
-              <CurrentInvestigationCard selectedQuestion={selectedQ} graph={graph} />
+              <div className="md:col-span-2">
-            </>
+                {hasSelectedQuestion && (
-          )}
+                  <>
+                    <CurrentInvestigationCard selectedQuestion={selectedQ} graph={graph} />
+                  </>
+                )}
+              </div>
+            </div>
 
-          {/* Post-update acknowledgement — only after success, never during loading */}
+            {/* Post-update acknowledgement */}
-          {updateStatus === "success" && !isUpdating && <UpdateAcknowledgement updateResult={result} />}
+            {updateStatus === "success" && !isUpdating && <UpdateAcknowledgement updateResult={result} />}
 
-          {/* ══════════════════════════════════════════════════════════
+            {/* Active workspace (Question + Response) — full-width column */}
-              FACILITATED INVESTIGATION WORKSPACE — PHASE 4 EXPLORATION
+            {hasSelectedQuestion ? (
-              ══════════════════════════════════════════════════════════
-
-              Layout metaphor: a workshop desk, not a document.
-
-              Desktop: wide work surfaces organised by cognitive activity.
-              Tablet: simplified two-zone layout.
-              Mobile: naturally stacked.
-              ══════════════════════════════════════════════════════════ */}
-
-          {hasSelectedQuestion ? (
-
-            <>
-              {/* ── Active workspace zone (Question + Response) ───────── */}
               <div className="space-y-6">
-
                 {isUpdating && (
                   <LoadingOverlay
                     isLoading={true}
@@ -725,54 +716,45 @@ export default function ReasoningWorkspace({
                     </div>
                   </form>
                 )}
+              </div>
+            ) : status === "success" ? (
+              <>
+                {/* Terminal state */}
+                {genuineCompletion && (
+                  <CompletionCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
+                )}
+                {!genuineCompletion && (
+                  <EvidenceLimitCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
+                )}
+              </>
+            ) : null}
 
+          {/* ═══════════════ ZONE 2 — Shared understanding ═══════════════ */}
+          {hasSelectedQuestion && hasCurrentSummaryCondition && (
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+              <div className="lg:col-span-2">
+                <CurrentUnderstandingCard currentSummary={graph?.currentSummary || result?.updatedSituationGraph?.currentSummary} plainLanguage={propUnderstanding || null} />
               </div>
 
-              {/* ── Supporting workspace (Understanding, Map, Situation) ─ */}
+              <div className="lg:col-span-1">
-              <div className="grid grid-cols-1 gap-6 lg:grid-cols-5">
+                <InvestigationMap turnCount={investigationHistory.length} />
-
-                {/* Understanding — wider surface (2 cols) */}
-                {hasCurrentSummaryCondition && (
-                  <div className="lg:col-span-2">
-                    <CurrentUnderstandingCard currentSummary={graph?.currentSummary || result?.updatedSituationGraph?.currentSummary} plainLanguage={propUnderstanding || null} />
-                  </div>
-                )}
-
-                {/* Investigation Map — workspace artefact (1.5 cols) */}
-                {hasSelectedQuestion && (
-                  <div className="lg:col-span-1">
-                    <InvestigationMap turnCount={investigationHistory.length} />
-                  </div>
-                )}
-
               </div>
+            </div>
+          )}
 
-            </>
+          {/* ═══════════════ ZONE 3 — Reference and record ═══════════════ */}
-
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-          ) : status === "success" ? (
+            <div className="md:col-span-1">
-
+              <OriginalSituation scenario={scenario} centralStatement={graph?.centralStatement} />
-            <>
+            </div>
-              {/* Terminal state */}
-              {genuineCompletion && (
-                <CompletionCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
-              )}
-              {!genuineCompletion && (
-                <EvidenceLimitCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
-              )}
-            </>
-
-          ) : null}
-
-
-          {/* ── Reference row — Situation + History side-by-side on desktop ─ */}
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-            <OriginalSituation scenario={scenario} centralStatement={graph?.centralStatement} />
             {investigationHistory.length > 0 && (
-              <InvestigationHistory turns={investigationHistory} />
+              <div className="md:col-span-2">
+                <InvestigationHistory turns={investigationHistory} />
+              </div>
             )}
           </div>
 
-          {/* ── Developer details (collapsed by default, always below) ── */}
+          {/* Developer details — full-width beneath reference row */}
           {(status === "success" || status === "error") && graph && (
             <DeveloperDetails
               graph={graph}

docs/design-evolution-log.md

@@ -105,6 +105,33 @@ The document-like feeling is caused partly by the narrow outer container.
 Change:
 Increase the available desktop workspace width without rearranging any components.
 
+Result:
+Confirmed.
+
+Learning:
+Increasing the outer workspace width reduced the narrow-document feeling and made better use of large displays.
+
+Unexpected learning:
+Width alone did not create a workshop. The wider canvas exposed that the interface still behaves as a collection of independent cards, with supporting artefacts unsure how to use the available space.
+
+Decision:
+Keep the wider desktop canvas.
+
+Next question:
+Can grouping the interface into cognitive work zones make the wider canvas feel like a coherent investigation surface?
+
+### Experiment 02 — Cognitive work zones
+
+Hypothesis:
+A workspace organised around what the investigator is doing will feel more coherent than one organised around equal cards or equal columns.
+
+Change:
+Arrange existing components into three visibly related zones:
+
+1. Active work
+2. Shared understanding
+3. Reference and record
+
 Evaluation:
 Pending visual review.