feat: add one-turn situation graph update UI

components/diagnostics-view.jsx

@@ -55,11 +55,21 @@ export default function DiagnosticsView({ result }) {
     },
     {
       label: "Node count",
-      value: diagnostics.nodeCount != null ? diagnostics.nodeCount : "?",
+      value:
+        diagnostics.nodeCount != null
+          ? diagnostics.nodeCount
+          : diagnostics.graphNodeCount != null
+            ? diagnostics.graphNodeCount
+            : "?",
     },
     {
       label: "Edge count",
-      value: diagnostics.edgeCount != null ? diagnostics.edgeCount : "?",
+      value:
+        diagnostics.edgeCount != null
+          ? diagnostics.edgeCount
+          : diagnostics.graphEdgeCount != null
+            ? diagnostics.graphEdgeCount
+            : "?",
     },
     {
       label: "Graph references",
@@ -75,6 +85,9 @@ export default function DiagnosticsView({ result }) {
   const errors = [
     ...(result.errors || []),
     ...(result.validationErrors || []),
+    ...(result.graphValidationErrors || []),
+    ...(result.proposalErrors || []),
+    ...(result.providerErrors || []),
     ...(result.analysisErrors || []),
   ];
 

components/graph-update-view.jsx

@@ -0,0 +1,169 @@
+import React from "react";
+
+function ListSection({ title, items, renderItem = (item) => item }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="rounded-lg border border-gray-200 bg-white p-4">
+      <h3 className="mb-2 text-sm font-semibold text-gray-800">{title}</h3>
+      <ul className="space-y-1 text-sm text-gray-700">
+        {items.map((item, index) => (
+          <li key={`${title}-${index}`}>{renderItem(item)}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default function GraphUpdateView({ updateResult }) {
+  if (!updateResult?.proposal) return null;
+
+  const {
+    resolvedUnknownNodeIds,
+    affectedNodeIds,
+    previousActiveUnknownNodeId,
+    newActiveUnknownNodeId,
+    changesApplied,
+    proposal,
+    previousSituationGraph,
+    updatedSituationGraph,
+  } = updateResult;
+
+  const previousNodesById = new Map(
+    (previousSituationGraph?.nodes || []).map((node) => [node.id, node]),
+  );
+  const updatedNodesById = new Map(
+    (updatedSituationGraph?.nodes || []).map((node) => [node.id, node]),
+  );
+  const proposalUpdatesByNodeId = new Map(
+    (proposal.updatedNodes || []).map((update) => [update.nodeId, update]),
+  );
+
+  function resolveNodePresentation(nodeId) {
+    const previousNode = previousNodesById.get(nodeId) || null;
+    const updatedNode = updatedNodesById.get(nodeId) || null;
+    const node = updatedNode || previousNode;
+    const update = proposalUpdatesByNodeId.get(nodeId) || null;
+
+    if (!node) {
+      return (
+        <div className="space-y-1">
+          <div className="font-medium text-gray-900">Unknown node (ID: {nodeId})</div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-1">
+        <div className="font-medium text-gray-900">{node.label}</div>
+        <div className="text-xs text-gray-600">
+          {node.kind} · {node.confidence}
+        </div>
+        {(update?.previousStatus || update?.newStatus || node.status) && (
+          <div className="text-xs text-gray-700">
+            {update?.previousStatus ? `Previous status: ${update.previousStatus}` : null}
+            {update?.previousStatus && update?.newStatus ? " → " : null}
+            {update?.newStatus
+              ? `New status: ${update.newStatus}`
+              : !update?.previousStatus
+                ? `Status: ${node.status}`
+                : null}
+          </div>
+        )}
+        {update?.reason && <div className="text-xs text-gray-700">{update.reason}</div>}
+      </div>
+    );
+  }
+
+  function resolveActiveUnknown(nodeId) {
+    if (!nodeId) return null;
+
+    const node = updatedNodesById.get(nodeId) || previousNodesById.get(nodeId);
+    if (!node) {
+      return `Unknown node (ID: ${nodeId})`;
+    }
+
+    return `${node.label} · ${node.status} · ${node.confidence}`;
+  }
+
+  const changeItems = [
+    changesApplied?.addedNodeCount
+      ? `${changesApplied.addedNodeCount} node(s) added`
+      : null,
+    changesApplied?.updatedNodeCount
+      ? `${changesApplied.updatedNodeCount} node(s) updated`
+      : null,
+    changesApplied?.addedEdgeCount
+      ? `${changesApplied.addedEdgeCount} edge(s) added`
+      : null,
+    changesApplied?.removedEdgeCount
+      ? `${changesApplied.removedEdgeCount} edge(s) removed`
+      : null,
+    changesApplied?.resolvedUnknownCount
+      ? `${changesApplied.resolvedUnknownCount} unknown(s) resolved`
+      : null,
+  ].filter(Boolean);
+
+  return (
+    <div className="space-y-4">
+      <section className="rounded-lg border border-blue-200 bg-blue-50 p-4">
+        <h2 className="mb-2 text-base font-semibold text-blue-900">
+          Graph update applied
+        </h2>
+        <div className="grid gap-2 text-sm text-blue-950 sm:grid-cols-2">
+          {previousActiveUnknownNodeId && (
+            <div>
+              <span className="font-medium">Previous active unknown:</span>{" "}
+              {resolveActiveUnknown(previousActiveUnknownNodeId)}
+            </div>
+          )}
+          {newActiveUnknownNodeId && (
+            <div>
+              <span className="font-medium">New active unknown:</span>{" "}
+              {resolveActiveUnknown(newActiveUnknownNodeId)}
+            </div>
+          )}
+          {!newActiveUnknownNodeId && previousActiveUnknownNodeId && (
+            <div>
+              <span className="font-medium">Next question status:</span> No next
+              question selected yet.
+            </div>
+          )}
+        </div>
+      </section>
+
+      <ListSection
+        title="Resolved unknowns"
+        items={resolvedUnknownNodeIds}
+        renderItem={resolveNodePresentation}
+      />
+      <ListSection
+        title="Affected nodes"
+        items={affectedNodeIds}
+        renderItem={resolveNodePresentation}
+      />
+      <ListSection title="Applied changes" items={changeItems} />
+
+      <details className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+        <summary className="cursor-pointer text-sm font-medium text-gray-700 underline">
+          Proposal details
+        </summary>
+        <pre className="mt-3 overflow-auto rounded bg-gray-900 p-3 text-xs text-green-400">
+          {JSON.stringify(proposal, null, 2)}
+        </pre>
+        <pre className="mt-3 overflow-auto rounded bg-gray-900 p-3 text-xs text-green-400">
+          {JSON.stringify(
+            {
+              previousActiveUnknownNodeId,
+              newActiveUnknownNodeId,
+              resolvedUnknownNodeIds,
+              affectedNodeIds,
+            },
+            null,
+            2,
+          )}
+        </pre>
+      </details>
+    </div>
+  );
+}

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>

components/situation-graph-view.jsx

@@ -55,6 +55,11 @@ export default function SituationGraphView({
 }) {
   if (!situationGraph) return null;
 
+  const selectedQuestionText =
+    typeof selectedQuestion === "string"
+      ? selectedQuestion
+      : selectedQuestion?.question ?? null;
+
   const activeUnknown = situationGraph.activeUnknownNodeId
     ? situationGraph.nodes.find((node) => node.id === situationGraph.activeUnknownNodeId)
     : null;
@@ -67,10 +72,10 @@ export default function SituationGraphView({
 
   return (
     <div className="space-y-4">
-      {selectedQuestion?.question && (
+      {selectedQuestionText && (
         <section className="rounded-lg border-2 border-green-300 bg-green-50 p-5">
           <h2 className="mb-2 text-base font-bold text-green-800">Selected Question</h2>
-          <p className="text-base font-medium text-gray-900">{selectedQuestion.question}</p>
+          <p className="text-base font-medium text-gray-900">{selectedQuestionText}</p>
         </section>
       )}