experiment: separate conversation from workspace
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user