experiment: facilitator view from reasoning graph

2026-08-05 15:00:42 +01:00
parent a7b7dda91f
commit 1998b84ae1
6 changed files with 794 additions and 12 deletions
@@ -0,0 +1,172 @@
+/**
+ * InvestigationSummaryPanelV3 — Phase 4, Experiment 12
+ * A user-facing facilitator view that translates the reasoning graph into
+ * a concise, human-meaningful presentation.
+ *
+ * Design principles:
+ *   - The panel shows up to four sections: what we know, still investigating,
+ *     possible explanations, and a quiet summary.
+ *   - All content is grounded in existing graph fields. No invented facts.
+ *   - Epistemic labels are explicit (structural), not colour-dependent.
+ *   - The same panel remains useful during early, active and terminal states.
+ */
+
+import { buildFacilitatorViewModel } from "@/lib/presentation/facilitator-view-adapter";
+
+/* ── Item rendering ─────────────────────────────────────────────── */
+
+/**
+ * Render a single item with its structural label where applicable.
+ */
+function renderItem(item, isExplanation) {
+  if (isExplanation && typeof item === "object") {
+    return (
+      <li key={item.text} className="flex items-start gap-2">
+        <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/50" />
+        <span className="text-sm text-gray-700">{item.text}</span>
+        <span className="ml-auto mt-[-2px] shrink-0 whitespace-nowrap text-[10px] font-medium tracking-wide text-gray-400">
+          {item.label}
+        </span>
+      </li>
+    );
+  }
+
+  return (
+    <li key={item} className="flex items-start gap-2">
+      <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/50" />
+      <span className="text-sm text-gray-700">{item}</span>
+    </li>
+  );
+}
+
+/* ── Section components ──────────────────────────────────────────── */
+
+function KnownSection({ title, items }) {
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div>
+      <h3 className="mb-2 text-[11px] font-medium tracking-widest uppercase text-gray-400">
+        {title}
+      </h3>
+      <ul className="space-y-1.5">
+        {items.map((item, i) => (
+          <li key={i} className="flex items-start gap-2">
+            <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-500" />
+            <span className="text-sm text-gray-700">{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function InvestigatingSection({ title, items }) {
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div>
+      <h3 className="mb-2 text-[11px] font-medium tracking-widest uppercase text-gray-400">
+        {title}
+      </h3>
+      <ul className="space-y-1.5">
+        {items.map((item, i) => (
+          <li key={i} className="flex items-start gap-2">
+            <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/60" />
+            <span className="text-sm text-gray-700">{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function ExplanationSection({ items }) {
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div>
+      <h3 className="mb-2 text-[11px] font-medium tracking-widest uppercase text-gray-400">
+        Possible explanations
+      </h3>
+      <ul className="space-y-1.5">
+        {items.map((item, i) => renderItem(item, true))}
+      </ul>
+    </div>
+  );
+}
+
+function QuietSummary({ text }) {
+  if (!text) return null;
+
+  return (
+    <div className="pt-2 border-t border-gray-200/40">
+      <p className="text-[10px] font-medium tracking-widest uppercase text-gray-300 mb-1.5">
+        Investigation state
+      </p>
+      <p className="text-xs text-gray-400">{text}</p>
+    </div>
+  );
+}
+
+/* ── Empty-state fallback ──────────────────────────────────────── */
+
+function EmptyState() {
+  return (
+    <div className="space-y-3">
+      <KnownSection title="What we know" items={[]} />
+      <InvestigatingSection title="Still investigating" items={[]} />
+      {/* Intentionally no Possible explanations section when empty */}
+      <QuietSummary text={null} />
+      <div className="flex items-start gap-2">
+        <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/50" />
+        <p className="text-sm text-gray-500 italic">We are still establishing the basic facts.</p>
+      </div>
+    </div>
+  );
+}
+
+/* ── Main component ────────────────────────────────────────────── */
+
+function InvestigationSummaryPanelV3({ graph, selectedQuestion, result }) {
+  // Build the view model from the adapter
+  const resolvedIds = new Set(graph?.resolvedNodeIds || []);
+
+  const viewModel = buildFacilitatorViewModel({
+    nodes: graph?.nodes || [],
+    resolvedIds,
+    activeUnknownNodeId: graph?.activeUnknownNodeId || null,
+    edges: graph?.edges || [],
+    selectedQuestion,
+  });
+
+  // Early state fallback
+  if (!viewModel.known.hasItems && !viewModel.investigating.hasItems) {
+    return <EmptyState />;
+  }
+
+  return (
+    <div className="rounded-lg border border-gray-200/60 bg-gray-50/40 p-5 space-y-4">
+      {/* What we know */}
+      <KnownSection title={viewModel.known.title} items={viewModel.known.items} />
+
+      {/* Still investigating — or "Remaining cautions" in terminal state */}
+      {!viewModel.investigating.shouldOmit && (
+        <InvestigatingSection
+          title={viewModel.investigating.title}
+          items={viewModel.investigating.items}
+        />
+      )}
+
+      {/* Possible explanations */}
+      {viewModel.explanations.hasItems && (
+        <ExplanationSection items={viewModel.explanations.items} />
+      )}
+
+      {/* Quiet reasoning summary */}
+      <QuietSummary text={viewModel.summary.text} />
+    </div>
+  );
+}
+
+export default InvestigationSummaryPanelV3;