feat: add user-focused reasoning workspace

components/scenario-form.jsx

@@ -5,6 +5,7 @@ import { useState, useRef } from "react";
 import DiagnosticsView from "@/components/diagnostics-view";
 import GraphUpdateView from "@/components/graph-update-view";
 import SituationGraphView from "@/components/situation-graph-view";
+import ReasoningWorkspace from "@/components/reasoning-workspace";
 
 const MAX_LENGTH = 10000;
 
@@ -150,6 +151,7 @@ export default function ScenarioForm() {
     setAnswer("");
     setUpdateStatus("idle");
     setUpdateError(null);
+    setResult(null);
     setUpdateResult(null);
 
     try {
@@ -219,16 +221,6 @@ export default function ScenarioForm() {
     }
   };
 
-  const canRenderAnswerForm =
-    status === "success" &&
-    updateStatus === "idle" &&
-    Boolean(result?.situationGraph) &&
-    Boolean(result?.selectedQuestion);
-
-  const canRenderDisabledFollowUpForm =
-    updateStatus === "success" &&
-    Boolean(updateResult?.selectedQuestion?.question || result?.selectedQuestion);
-
   return (
     <div className="space-y-6">
       <form onSubmit={handleSubmit} className="space-y-4">
@@ -254,95 +246,23 @@ export default function ScenarioForm() {
         </div>
       </form>
 
-      {canRenderAnswerForm && (
-        <form onSubmit={handleUpdate} className="space-y-4 rounded-lg border border-gray-200 bg-white p-4">
-          <div>
-            <h2 className="text-base font-semibold text-gray-900">Selected Question</h2>
-            <p className="mt-1 text-sm text-gray-700">{result.selectedQuestion}</p>
-          </div>
-          <div>
-            <label htmlFor="answer-textarea" className="mb-2 block text-sm font-medium text-gray-700">
-              Your answer
-            </label>
-            <textarea
-              id="answer-textarea"
-              value={answer}
-              onChange={(e) => setAnswer(e.target.value)}
-              rows={4}
-              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"
-              placeholder="Enter the answer to the selected question..."
-            />
-          </div>
-          <div className="flex items-center justify-between gap-4">
-            <p className="text-xs text-gray-500">
-              {updateStatus === "loading"
-                ? "Applying validated graph update..."
-                : "One update turn only in this prototype."}
-            </p>
-            <button
-              type="submit"
-              disabled={updateStatus === "loading"}
-              className="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
-            >
-              {updateStatus === "loading" ? "Updating..." : "Update situation"}
-            </button>
-          </div>
-        </form>
-      )}
-
-      <UpdateErrorPanel updateError={updateError} />
-
-      {updateStatus === "success" && updateResult && (
-        <>
-          <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
-            {updateResult.selectedQuestion?.question
-              ? updateResult.selectedQuestion.question
-              : "No next question selected yet."}
-          </div>
-          {canRenderDisabledFollowUpForm && (
-            <form className="space-y-4 rounded-lg border border-gray-200 bg-white p-4 opacity-70">
-              <div>
-                <h2 className="text-base font-semibold text-gray-900">Selected Question</h2>
-                <p className="mt-1 text-sm text-gray-700">
-                  {updateResult.selectedQuestion?.question || result?.selectedQuestion}
-                </p>
-              </div>
-              <div>
-                <label htmlFor="follow-up-disabled-textarea" className="mb-2 block text-sm font-medium text-gray-700">
-                  Your answer
-                </label>
-                <textarea
-                  id="follow-up-disabled-textarea"
-                  rows={4}
-                  disabled
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm opacity-70"
-                  placeholder="Additional submission is disabled in this one-update prototype."
-                />
-              </div>
-              <div className="flex items-center justify-between gap-4">
-                <p className="text-xs text-gray-500">
-                  Additional submission is disabled in this one-update prototype.
-                </p>
-                <button
-                  type="button"
-                  disabled
-                  className="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-40"
-                >
-                  Update situation
-                </button>
-              </div>
-            </form>
-          )}
-          <GraphUpdateView updateResult={updateResult} />
-        </>
-      )}
-
-      <ScenarioResultPanels status={status} result={result} />
-
-      {(status === "loading" || updateStatus === "loading") && (
-        <div className="py-12 text-center text-sm text-gray-400">
-          Waiting for model response...
-        </div>
+      {/* ── Main result workspace ─────────────────────── */}
+      {(status === "success" || status === "error" || updateStatus === "success") && (
+        <ReasoningWorkspace
+          status={status}
+          updateStatus={updateStatus}
+          result={{
+            ...(result || {}),
+            situationGraph: updateResult?.updatedSituationGraph ?? result?.situationGraph,
+            selectedQuestion: updateResult?.selectedQuestion ?? result?.selectedQuestion,
+            newlySurfacedNodeIds: result?.newlySurfacedNodeIds || [],
+            diagnostics: result?.diagnostics || null,
+            updateError,
+          }}
+          answer={answer}
+          setAnswer={setAnswer}
+          onAnswerSubmit={handleUpdate}
+        />
       )}
 
       {/* Empty state */}