experiment: separate conversation from workspace

This commit is contained in:
2026-08-05 12:03:08 +01:00
parent 1cb79cb36b
commit 742bd09ddc
2 changed files with 135 additions and 93 deletions
+65 -88
View File
@@ -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}