feat: connect UI to situation graph start flow

2026-08-02 07:21:40 +01:00
parent 84858107b7
commit 575b8fd971
6 changed files with 450 additions and 101 deletions
@@ -0,0 +1,121 @@
+"use client";
+
+import React from "react";
+
+function NodeBadge({ children, tone = "gray" }) {
+  const tones = {
+    gray: "border-gray-200 bg-gray-50 text-gray-700",
+    blue: "border-blue-200 bg-blue-50 text-blue-700",
+    green: "border-green-200 bg-green-50 text-green-700",
+    yellow: "border-yellow-200 bg-yellow-50 text-yellow-700",
+  };
+
+  return (
+    <span className={`rounded-full border px-2 py-0.5 text-xs ${tones[tone] || tones.gray}`}>
+      {children}
+    </span>
+  );
+}
+
+function NodeGroup({ title, nodes }) {
+  if (!nodes?.length) return null;
+
+  return (
+    <section className="rounded-lg border border-gray-200 bg-white p-4">
+      <h3 className="mb-3 text-sm font-semibold text-gray-700">
+        {title} ({nodes.length})
+      </h3>
+      <ul className="space-y-3">
+        {nodes.map((node) => (
+          <li key={node.id} className="rounded border border-gray-100 bg-gray-50 p-3 text-sm">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="font-medium text-gray-900">{node.label}</span>
+              <NodeBadge tone="blue">{node.status}</NodeBadge>
+              <NodeBadge tone="green">{node.confidence}</NodeBadge>
+              {node.value != null && (
+                <NodeBadge tone="yellow">
+                  {node.value}
+                  {node.unit ? ` ${node.unit}` : ""}
+                </NodeBadge>
+              )}
+            </div>
+            {node.description && node.description !== node.label && (
+              <p className="mt-1 text-gray-600">{node.description}</p>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default function SituationGraphView({
+  situationGraph,
+  selectedQuestion,
+}) {
+  if (!situationGraph) return null;
+
+  const activeUnknown = situationGraph.activeUnknownNodeId
+    ? situationGraph.nodes.find((node) => node.id === situationGraph.activeUnknownNodeId)
+    : null;
+
+  const nodesByKind = situationGraph.nodes.reduce((acc, node) => {
+    if (!acc[node.kind]) acc[node.kind] = [];
+    acc[node.kind].push(node);
+    return acc;
+  }, {});
+
+  return (
+    <div className="space-y-4">
+      {selectedQuestion?.question && (
+        <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>
+        </section>
+      )}
+
+      <section className="rounded-lg border border-gray-200 bg-white p-4">
+        <h2 className="mb-2 text-base font-semibold text-gray-900">Situation Graph</h2>
+        <dl className="space-y-2 text-sm">
+          <div>
+            <dt className="text-gray-500">Central statement</dt>
+            <dd className="font-medium text-gray-900">{situationGraph.centralStatement}</dd>
+          </div>
+          {situationGraph.currentSummary && (
+            <div>
+              <dt className="text-gray-500">Current summary</dt>
+              <dd className="text-gray-800">{situationGraph.currentSummary}</dd>
+            </div>
+          )}
+          {activeUnknown && (
+            <div>
+              <dt className="text-gray-500">Active unknown</dt>
+              <dd className="text-gray-900">{activeUnknown.label}</dd>
+            </div>
+          )}
+          <div>
+            <dt className="text-gray-500">Edge count</dt>
+            <dd className="text-gray-900">{situationGraph.edges.length}</dd>
+          </div>
+        </dl>
+      </section>
+
+      {Object.entries(nodesByKind).map(([kind, nodes]) => (
+        <NodeGroup
+          key={kind}
+          title={kind.replace(/_/g, " ")}
+          nodes={nodes}
+        />
+      ))}
+
+      <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">
+          Raw graph JSON
+        </summary>
+        <pre className="mt-3 overflow-auto rounded bg-gray-900 p-3 text-xs text-green-400">
+          {JSON.stringify(situationGraph, null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
+}