feat: add one-turn situation graph update UI

components/scenario-form.jsx

@@ -3,6 +3,7 @@
 import React from "react";
 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";
 
 const MAX_LENGTH = 10000;
@@ -15,6 +16,45 @@ export async function submitScenarioForStartCase(fetchImpl, scenario) {
   });
 }
 
+export async function submitAnswerForUpdateCase(
+  fetchImpl,
+  { situationGraph, previousQuestion, answer },
+) {
+  if (!answer?.trim()) {
+    return {
+      ok: false,
+      skipped: true,
+      data: {
+        success: false,
+        stage: "request_validation",
+        error: "Please enter an answer before updating.",
+      },
+    };
+  }
+
+  const response = await fetchImpl("/api/cases/update", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ situationGraph, previousQuestion, answer }),
+  });
+
+  return {
+    ok: response.ok,
+    skipped: false,
+    data: await response.json(),
+  };
+}
+
+function normaliseStartResult(data) {
+  return {
+    ...data,
+    selectedQuestion:
+      typeof data?.selectedQuestion === "string"
+        ? data.selectedQuestion
+        : data?.selectedQuestion?.question ?? null,
+  };
+}
+
 export function ScenarioResultPanels({ status, result }) {
   if (!result) return null;
 
@@ -51,16 +91,58 @@ export function ScenarioResultPanels({ status, result }) {
   );
 }
 
+export function UpdateErrorPanel({ updateError }) {
+  if (!updateError) return null;
+
+  const errors = [
+    ...(updateError.errors || []),
+    ...(updateError.validationErrors || []),
+    ...(updateError.graphValidationErrors || []),
+    ...(updateError.proposalErrors || []),
+    ...(updateError.providerErrors || []),
+  ];
+
+  return (
+    <div className="space-y-3">
+      <div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
+        Update error: {updateError.error}
+      </div>
+      {errors.length > 0 && (
+        <details className="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
+          <summary className="cursor-pointer text-sm font-medium text-red-700 underline">
+            Update details ({errors.length})
+          </summary>
+          <ul className="mt-2 space-y-1 text-sm text-red-700">
+            {errors.map((item, index) => (
+              <li key={index}>
+                {typeof item === "string" ? item : item?.message || JSON.stringify(item)}
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
+    </div>
+  );
+}
+
 export default function ScenarioForm() {
   const [scenario, setScenario] = useState("");
   const [status, setStatus] = useState("idle"); // idle | loading | error | success
   const [result, setResult] = useState(null);
+  const [answer, setAnswer] = useState("");
+  const [updateStatus, setUpdateStatus] = useState("idle"); // idle | loading | error | success
+  const [updateError, setUpdateError] = useState(null);
+  const [updateResult, setUpdateResult] = useState(null);
   const textareaRef = useRef(null);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     setStatus("loading");
     setResult(null);
+    setAnswer("");
+    setUpdateStatus("idle");
+    setUpdateError(null);
+    setUpdateResult(null);
 
     try {
       const res = await submitScenarioForStartCase(fetch, scenario);
@@ -69,10 +151,10 @@ export default function ScenarioForm() {
 
       if (res.ok && data.success) {
         setStatus("success");
-        setResult(data);
+        setResult(normaliseStartResult(data));
       } else {
         setStatus("error");
-        setResult(data);
+        setResult(normaliseStartResult(data));
       }
     } catch (err) {
       setStatus("error");
@@ -80,6 +162,55 @@ export default function ScenarioForm() {
     }
   };
 
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+
+    const submission = await submitAnswerForUpdateCase(fetch, {
+      situationGraph: result?.situationGraph,
+      previousQuestion: result?.selectedQuestion,
+      answer,
+    });
+
+    if (submission.skipped) {
+      setUpdateStatus("error");
+      setUpdateError(submission.data);
+      return;
+    }
+
+    setUpdateStatus("loading");
+    setUpdateError(null);
+
+    try {
+      const outcome = submission.data;
+
+      if (submission.ok && outcome.success) {
+        setUpdateStatus("success");
+        setUpdateResult({
+          ...outcome,
+          previousSituationGraph: result?.situationGraph ?? null,
+        });
+        setResult((current) => ({
+          ...current,
+          situationGraph: outcome.updatedSituationGraph,
+          selectedQuestion: null,
+          diagnostics: outcome.diagnostics,
+        }));
+        setAnswer("");
+      } else {
+        setUpdateStatus("error");
+        setUpdateError(outcome);
+      }
+    } catch (err) {
+      setUpdateStatus("error");
+      setUpdateError({ error: err.message || "Network request failed" });
+    }
+  };
+
+  const canRenderAnswerForm =
+    status === "success" &&
+    Boolean(result?.situationGraph) &&
+    Boolean(result?.selectedQuestion);
+
   return (
     <div className="space-y-6">
       <form onSubmit={handleSubmit} className="space-y-4">
@@ -105,9 +236,56 @@ 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">
+            No next question selected yet.
+          </div>
+          <GraphUpdateView updateResult={updateResult} />
+        </>
+      )}
+
       <ScenarioResultPanels status={status} result={result} />
 
-      {status === "loading" && (
+      {(status === "loading" || updateStatus === "loading") && (
         <div className="py-12 text-center text-sm text-gray-400">
           Waiting for model response...
         </div>