From 742bd09ddcdbee2279305c3892242b1eae41a42b Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Wed, 5 Aug 2026 12:03:08 +0100
Subject: [PATCH] experiment: separate conversation from workspace

---
 components/reasoning-workspace.jsx | 153 ++++++++++++-----------------
 docs/design-evolution-log.md       |  75 +++++++++++++-
 2 files changed, 135 insertions(+), 93 deletions(-)

diff --git a/components/reasoning-workspace.jsx b/components/reasoning-workspace.jsx
index 4413c25..bb1c708 100644
--- a/components/reasoning-workspace.jsx
+++ b/components/reasoning-workspace.jsx
@@ -656,108 +656,85 @@ export default function ReasoningWorkspace({
         </div>
       ) : (
         <>
-          {/* ═══════════════ ZONE 1 — Active work ═══════════════ */}
-          <div className="space-y-6">
+          {/* ═══════════════ CONVERSATION — vertical flow ═══════════════ */}
+
+          {hasSelectedQuestion && (
+            <div className="space-y-6">
+
+              {/* Current Investigation — primary focus, full width */}
+              <CurrentInvestigationCard selectedQuestion={selectedQ} graph={graph} />
+
+              {/* Post-update acknowledgement */}
+              {updateStatus === "success" && !isUpdating && <UpdateAcknowledgement updateResult={result} />}
+
+              {/* Response — directly beneath the question */}
+              {!isUpdating && canAnswer && (
+                <form onSubmit={handleUpdateCaptureAndSubmit} className="space-y-4 rounded-lg border border-gray-200 bg-white p-5">
+                  <div>
+                    <label htmlFor="rw-answer" className="mb-2 block text-sm font-medium text-gray-700">
+                      Response
+                    </label>
+                    <textarea
+                      id="rw-answer"
+                      value={answer}
+                      onChange={(e) => setAnswer(e.target.value)}
+                      rows={4}
+                      disabled={updateStatus === "loading"}
+                      className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-60"
+                      placeholder="Enter the answer to the selected question..."
+                    />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <p className="text-xs text-gray-400">
+                      One update turn only in this prototype.
+                    </p>
+                    <button
+                      type="submit"
+                      disabled={!answer.trim()}
+                      className="rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      Update
+                    </button>
+                  </div>
+                </form>
+              )}
+
+              {/* Terminal state — when no active question */}
+              {status === "success" && !hasSelectedQuestion && (
+                <>
+                  {genuineCompletion && (
+                    <CompletionCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
+                  )}
+                  {!genuineCompletion && (
+                    <EvidenceLimitCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
+                  )}
+                </>
+              )}
 
-            {/* Investigation status & context — desktop: two-column; mobile: stacked */}
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-              <InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
-              <div className="md:col-span-2">
-                {hasSelectedQuestion && (
-                  <>
-                    <CurrentInvestigationCard selectedQuestion={selectedQ} graph={graph} />
-                  </>
-                )}
-              </div>
             </div>
+          )}
 
-            {/* Post-update acknowledgement */}
-            {updateStatus === "success" && !isUpdating && <UpdateAcknowledgement updateResult={result} />}
+          {/* History — growing naturally from Response */}
+          {investigationHistory.length > 0 && (
+            <InvestigationHistory turns={investigationHistory} />
+          )}
 
-            {/* Active workspace (Question + Response) — full-width column */}
-            {hasSelectedQuestion && (
-              <div className="space-y-6">
-                {isUpdating && (
-                  <LoadingOverlay
-                    isLoading={true}
-                    elapsed={updateElapsed}
-                    currentMessage={updateMsg}
-                    variant="update"
-                  />
-                )}
-
-                {!isUpdating && canAnswer && (
-                  <form onSubmit={handleUpdateCaptureAndSubmit} className="space-y-4 rounded-lg border border-gray-200 bg-white p-5">
-                    <div>
-                      <label htmlFor="rw-answer" className="mb-2 block text-sm font-medium text-gray-700">
-                        Response
-                      </label>
-                      <textarea
-                        id="rw-answer"
-                        value={answer}
-                        onChange={(e) => setAnswer(e.target.value)}
-                        rows={4}
-                        disabled={updateStatus === "loading"}
-                        className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-60"
-                        placeholder="Enter the answer to the selected question..."
-                      />
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <p className="text-xs text-gray-400">
-                        One update turn only in this prototype.
-                      </p>
-                      <button
-                        type="submit"
-                        disabled={!answer.trim()}
-                        className="rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
-                      >
-                        Update
-                      </button>
-                    </div>
-                  </form>
-                )}
-              </div>
-            )}
-
-            {/* Terminal state — when no active question */}
-            {status === "success" && !hasSelectedQuestion && (
-              <>
-                {genuineCompletion && (
-                  <CompletionCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
-                )}
-                {!genuineCompletion && (
-                  <EvidenceLimitCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
-                )}
-              </>
-            )}
-
-          </div>
-          {/* ═══════════════ ZONE 2 — Shared understanding ═══════════════ */}
+          {/* ═══════════════ WORKSPACE — supporting context ═══════════════ */}
           {hasSelectedQuestion && hasCurrentSummaryCondition && (
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-              <div className="lg:col-span-2">
+              <div className="space-y-6 lg:col-span-2">
                 <CurrentUnderstandingCard currentSummary={graph?.currentSummary || result?.updatedSituationGraph?.currentSummary} plainLanguage={propUnderstanding || null} />
+                <InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
               </div>
 
-              <div className="lg:col-span-1">
+              <div className="space-y-6 lg:col-span-1">
+                <OriginalSituation scenario={scenario} centralStatement={graph?.centralStatement} />
                 <InvestigationMap turnCount={investigationHistory.length} />
               </div>
             </div>
           )}
 
-          {/* ═══════════════ ZONE 3 — Reference and record ═══════════════ */}
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-            <div className="md:col-span-1">
-              <OriginalSituation scenario={scenario} centralStatement={graph?.centralStatement} />
-            </div>
-            {investigationHistory.length > 0 && (
-              <div className="md:col-span-2">
-                <InvestigationHistory turns={investigationHistory} />
-              </div>
-            )}
-          </div>
-
-          {/* Developer details — full-width beneath reference row */}
+          {/* Developer details — full-width beneath workspace */}
           {(status === "success" || status === "error") && graph && (
             <DeveloperDetails
               graph={graph}
diff --git a/docs/design-evolution-log.md b/docs/design-evolution-log.md
index 589131d..a91af5e 100644
--- a/docs/design-evolution-log.md
+++ b/docs/design-evolution-log.md
@@ -125,12 +125,77 @@ Can grouping the interface into cognitive work zones make the wider canvas feel
 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:
+Result:
+Partially confirmed.
 
-1. Active work
-2. Shared understanding
-3. Reference and record
+Learning:
+
+The workspace feels more coherent when organised into cognitive work zones rather than a simple document stack.
+
+However, another distinction emerged that is more important than the zones themselves.
+
+The interface naturally separates into two different modes:
+
+• the active conversation between investigator and facilitator
+
+and
+
+• the shared workspace describing the current understanding.
+
+Unexpected learning:
+
+History feels incorrect when treated as reference information.
+
+History is actually the continuation of the investigator's conversation.
+
+Every response immediately becomes history.
+
+The notebook should therefore grow naturally from the Response area.
+
+The Investigation Status card currently competes with the Current Investigation card.
+
+The current question is the primary focus.
+
+Status is supporting context.
+
+Decision:
+
+Keep the cognitive-zone concept.
+
+Refine the zones around conversational flow instead of card grouping.
+
+Next question:
+Can the workspace clearly separate conversation from shared understanding?
+
+### Experiment 03 — Conversation versus Workspace
+
+Hypothesis
+
+Investigators think in two simultaneous modes.
+
+Mode 1:
+The conversation.
+
+Question
+↓
+
+Response
+↓
+
+History
+
+Mode 2:
+The shared workspace.
+
+Status
+
+Understanding
+
+Situation
+
+Map
+
+Separating these should make the interface feel more like a facilitated investigation than a collection of cards.
 
 Evaluation:
 Pending visual review.