2sagaco48 1.0.0

package/src/components/ChatApp.tsx

@@ -0,0 +1,95 @@
+/**
+ * Type B — ChatApp wrapper.
+ * ---------------------------------------------------------------------------
+ * Renders the packaged ChatApp unchanged and mounts the granular
+ * SageBlueprintPanel inside the fiction-engine controls.
+ *
+ * PROMPT INJECTION LIVES ELSEWHERE — see `src/lib/sage.ts`.
+ * A previous turn shipped a capture-phase `submit` listener here that appended
+ * the v2 directive to the textarea and gated on `getV15Enabled()`. It was
+ * removed because it did not work:
+ *   1. `getV15Enabled()` is the V15 calibration toggle, NOT Fiction mode
+ *      (Fiction mode is localStorage "veritas.sage.pipeline.mode.v2").
+ *   2. The fiction runner never re-reads the textarea — it compiles from the
+ *      frozen `blueprint` memo — so mutating the textarea changed nothing.
+ * The replacement overrides `compileCompactChapterPrompt` in the `@/lib/sage`
+ * shim, which is the function the packaged runner actually calls.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { ChatApp as OriginalChatApp } from "./ChatApp.orig1.tsx";
+import { SageBlueprintPanel } from "./SageBlueprintPanel";
+
+export * from "./ChatApp.orig1.tsx";
+
+const ANCHOR_ID = "veritas-sage-blueprint-detail-anchor";
+
+function findFictionPanel(): HTMLElement | null {
+  const candidates = Array.from(document.querySelectorAll("div.rounded-xl"));
+  return (candidates.find((el) =>
+    el.classList.contains("border-rose-200") ||
+    (typeof el.className === "string" &&
+      el.className.includes("rose-50") &&
+      /Fiction Engine active/i.test(el.textContent || "")),
+  ) as HTMLElement) ?? null;
+}
+
+function ensureAnchor(): HTMLElement | null {
+  const host = findFictionPanel();
+  if (!host) return null;
+  let anchor = document.getElementById(ANCHOR_ID);
+  if (anchor && host.contains(anchor)) return anchor;
+  if (!anchor) {
+    anchor = document.createElement("div");
+    anchor.id = ANCHOR_ID;
+    anchor.className = "mt-3";
+  }
+  host.appendChild(anchor);
+  return anchor;
+}
+
+function BlueprintPortal() {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [seed, setSeed] = useState<number | null>(null);
+
+  useEffect(() => {
+    const sync = () => {
+      setAnchor((prev) => {
+        const next = ensureAnchor();
+        return prev === next ? prev : next;
+      });
+      const panel = findFictionPanel();
+      if (panel) {
+        const seedBtn = Array.from(panel.querySelectorAll("button"))
+          .find((b) => /seed\s+\d+/i.test(b.textContent || ""));
+        const m = seedBtn?.textContent?.match(/seed\s+(\d+)/i);
+        if (m) {
+          const s = Number(m[1]);
+          setSeed((prev) => (prev === s ? prev : s));
+        }
+      }
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.body, { childList: true, subtree: true });
+    const interval = window.setInterval(sync, 800);
+    return () => {
+      observer.disconnect();
+      window.clearInterval(interval);
+      document.getElementById(ANCHOR_ID)?.remove();
+    };
+  }, []);
+
+  const view = useMemo(() => (seed == null ? null : { seed }), [seed]);
+  if (!anchor || !view) return null;
+  return createPortal(<SageBlueprintPanel seed={view.seed} />, anchor);
+}
+
+export function ChatApp(props: { onSubmitFromShared?: number } = {}) {
+  return (
+    <>
+      <OriginalChatApp {...props} />
+      <BlueprintPortal />
+    </>
+  );
+}

package/src/components/ChatAugmentPanels.tsx

@@ -0,0 +1,73 @@
+/**
+ * Type B — Chat augment portal (workspace durable).
+ * Mirrors package ChatAugmentPanels and mounts the workspace SAGA-OS Studio
+ * (v3 pipeline + v2 lab + v1–v8 reference, all inside one panel) below Style Persona.
+ */
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { InnovationPersonaPanel } from '@/components/InnovationPersonaPanel.tsx';
+import { CitationLedgerPanel } from '@/components/CitationLedgerPanel.tsx';
+import { CreativeTreeOfLifePanel } from '@/components/CreativeTreeOfLifePanel.tsx';
+import { SagaOsPanel } from "./SagaOsPanel";
+
+const ANCHOR_ID = "veritas-augment-persona-anchor";
+
+function findStylePersonaSection(): HTMLElement | null {
+  const sections = Array.from(document.querySelectorAll("section"));
+  for (const section of sections) {
+    if (section.textContent?.includes("Style Persona:")) return section as HTMLElement;
+  }
+  return null;
+}
+
+function ensureAnchor(): HTMLElement | null {
+  const host = findStylePersonaSection();
+  if (!host || !host.parentElement) return null;
+
+  let anchor = document.getElementById(ANCHOR_ID);
+  if (anchor && anchor.previousElementSibling === host) return anchor;
+
+  if (!anchor) {
+    anchor = document.createElement("div");
+    anchor.id = ANCHOR_ID;
+    anchor.className = "mt-3 space-y-3";
+  }
+  host.insertAdjacentElement("afterend", anchor);
+  return anchor;
+}
+
+export function ChatAugmentPanels() {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const sync = () => {
+      const next = ensureAnchor();
+      setAnchor((prev) => (prev === next ? prev : next));
+    };
+
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.body, { childList: true, subtree: true });
+    const interval = window.setInterval(sync, 1000);
+
+    return () => {
+      observer.disconnect();
+      window.clearInterval(interval);
+      document.getElementById(ANCHOR_ID)?.remove();
+    };
+  }, []);
+
+  if (!anchor) return null;
+
+  return createPortal(
+    <>
+      <InnovationPersonaPanel />
+      <CreativeTreeOfLifePanel />
+      <SagaOsPanel />
+      <CitationLedgerPanel />
+    </>,
+    anchor,
+  );
+}

package/src/components/CitationLedgerPanel.tsx

@@ -0,0 +1,313 @@
+/**
+ * CitationLedgerPanel — design-identical sibling of `StylePersonaPanel`.
+ * ============================================================================
+ * Same section chrome, same expand affordance, same control row, same
+ * quantitative card grid with filled bars and numeric readouts.
+ *
+ * Data source: `@/lib/citation-ledger-store`, populated exclusively by sources
+ * that the grounding fleet ACTUALLY fetched. If nothing has been retrieved the
+ * panel says so explicitly — it never invents rows to look populated.
+ *
+ * Columns required by the audit contract:
+ *   - scraped site (hostname)
+ *   - title
+ *   - usage: the pipeline stage at which the source was FIRST integrated
+ * ============================================================================ */
+import { useEffect, useMemo, useState } from "react";
+import {
+  subscribeCitationLedger,
+  clearCitationLedger,
+  buildQuotationContract,
+  getCitationStyle,
+  formatReferenceEntry,
+  type CitationLedgerSnapshotLive,
+  type CitationStage,
+} from "@/lib/citation-ledger-store";
+
+const STAGE_STYLE: Record<CitationStage, string> = {
+  initial: "bg-zinc-100 text-zinc-700",
+  grounding: "bg-sky-100 text-sky-800",
+  hdig: "bg-indigo-100 text-indigo-800",
+  cove: "bg-emerald-100 text-emerald-800",
+  "n-deep": "bg-violet-100 text-violet-800",
+  adversarial: "bg-rose-100 text-rose-800",
+  synthesis: "bg-amber-100 text-amber-800",
+};
+
+const EMPTY: CitationLedgerSnapshotLive = {
+  records: [],
+  siteCount: 0,
+  lastQuestion: "",
+  updatedAt: 0,
+};
+
+export function CitationLedgerPanel() {
+  const [expanded, setExpanded] = useState(false);
+  const [snapshot, setSnapshot] = useState<CitationLedgerSnapshotLive>(EMPTY);
+
+  useEffect(() => subscribeCitationLedger(setSnapshot), []);
+
+  const stageCounts = useMemo(() => {
+    const counts = new Map<CitationStage, number>();
+    for (const record of snapshot.records) {
+      counts.set(record.stage, (counts.get(record.stage) ?? 0) + 1);
+    }
+    return counts;
+  }, [snapshot.records]);
+
+  const siteCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const record of snapshot.records) {
+      counts.set(record.site, (counts.get(record.site) ?? 0) + 1);
+    }
+    return Array.from(counts.entries()).sort((a, b) => b[1] - a[1]);
+  }, [snapshot.records]);
+
+  const withSnippet = snapshot.records.filter((r) => r.snippet.length > 0).length;
+  const total = snapshot.records.length;
+  const quotableRatio = total > 0 ? withSnippet / total : 0;
+  const maxSiteHits = siteCounts.length > 0 ? siteCounts[0][1] : 1;
+
+  const citationStyle = useMemo(() => getCitationStyle(), [snapshot.updatedAt]);
+  
+  const contract = useMemo(
+    () => buildQuotationContract(snapshot.records),
+    [snapshot.records, citationStyle],
+  );
+
+  const referencesFormatted = useMemo(
+    () => snapshot.records.map(r => formatReferenceEntry(r, citationStyle)),
+    [snapshot.records, citationStyle]
+  );
+
+  return (
+    <section className="rounded-2xl border border-zinc-200 bg-white shadow-sm">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center justify-between px-5 py-3 text-left"
+      >
+        <div className="flex items-center gap-3">
+          <div className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-sky-100 to-emerald-100 text-lg">📚</div>
+          <div>
+            <div className="flex items-center gap-2">
+              <div className="text-sm font-bold text-zinc-900">
+                Citation Ledger: <span className="text-sky-700">{total} source{total === 1 ? "" : "s"}</span>
+              </div>
+              <span
+                className={`rounded px-1.5 py-0.5 text-[10px] font-bold ${
+                  total === 0
+                    ? "bg-zinc-100 text-zinc-600"
+                    : quotableRatio === 1
+                      ? "bg-emerald-100 text-emerald-800"
+                      : "bg-amber-100 text-amber-800"
+                }`}
+              >
+                {total === 0 ? "Empty" : `${withSnippet}/${total} quotable`}
+              </span>
+            </div>
+            <div className="text-xs text-zinc-500">
+              Verified-retrieved provenance · site, title, and first-use stage per [S#]
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="rounded bg-zinc-100 px-2 py-1 font-mono text-[10px] text-zinc-600">
+            {snapshot.siteCount} site{snapshot.siteCount === 1 ? "" : "s"}
+          </span>
+          <span className="text-zinc-400">{expanded ? "−" : "+"}</span>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-zinc-100 px-5 py-4">
+          <div className="mb-4 flex flex-wrap items-center gap-2">
+            <button
+              onClick={() => navigator.clipboard.writeText(
+                snapshot.records
+                  .map((r) => `[S${r.id}] ${r.title} — ${r.url} (site ${r.site}; first used at ${r.stage}; fingerprint ${r.fingerprint})`)
+                  .join("\n"),
+              )}
+              disabled={total === 0}
+              className="rounded-lg bg-sky-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-sky-700 disabled:opacity-40"
+            >
+              Copy References
+            </button>
+            <button
+              onClick={() => navigator.clipboard.writeText(contract)}
+              disabled={total === 0}
+              className="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs font-bold text-zinc-700 hover:bg-zinc-50 disabled:opacity-40"
+              title="Copy the source-first quotation contract injected into every grounded prompt"
+            >
+              Copy Contract
+            </button>
+            <button
+              onClick={() => navigator.clipboard.writeText(JSON.stringify(snapshot.records, null, 2))}
+              disabled={total === 0}
+              className="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs font-bold text-zinc-700 hover:bg-zinc-50 disabled:opacity-40"
+            >
+              Export JSON
+            </button>
+            <button
+              onClick={clearCitationLedger}
+              disabled={total === 0}
+              className="rounded-lg border border-rose-200 bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-700 hover:bg-rose-100 disabled:opacity-40"
+            >
+              Clear
+            </button>
+          </div>
+
+          <div className="mb-4">
+            <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-400">Provenance metrics</div>
+          </div>
+
+          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="rounded-xl border border-zinc-100 bg-zinc-50 p-3">
+              <div className="flex items-center justify-between">
+                <div className="text-xs font-bold text-zinc-900">Quotable coverage</div>
+                <div className="rounded bg-sky-50 px-1.5 py-0.5 font-mono text-[9px] text-sky-700">verbatim</div>
+              </div>
+              <div className="mt-2 flex items-center gap-2">
+                <span className="w-16 text-right text-[9px] leading-tight text-zinc-500">no text</span>
+                <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-zinc-200">
+                  <div className="absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-sky-500 to-emerald-500" style={{ width: `${quotableRatio * 100}%` }} />
+                  <div className="absolute top-[-2px] h-3 w-1 rounded-full bg-zinc-900" style={{ left: `calc(${quotableRatio * 100}% - 2px)` }} />
+                </div>
+                <span className="w-16 text-[9px] leading-tight text-zinc-500">full text</span>
+              </div>
+              <div className="mt-1 text-right font-mono text-[10px] text-zinc-400">{quotableRatio.toFixed(2)}</div>
+            </div>
+
+            <div className="rounded-xl border border-zinc-100 bg-zinc-50 p-3">
+              <div className="flex items-center justify-between">
+                <div className="text-xs font-bold text-zinc-900">Source diversity</div>
+                <div className="rounded bg-emerald-50 px-1.5 py-0.5 font-mono text-[9px] text-emerald-700">hosts</div>
+              </div>
+              <div className="mt-2 flex items-center gap-2">
+                <span className="w-16 text-right text-[9px] leading-tight text-zinc-500">single host</span>
+                <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-zinc-200">
+                  <div
+                    className="absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-emerald-500 to-sky-500"
+                    style={{ width: `${total > 0 ? (snapshot.siteCount / total) * 100 : 0}%` }}
+                  />
+                </div>
+                <span className="w-16 text-[9px] leading-tight text-zinc-500">all distinct</span>
+              </div>
+              <div className="mt-1 text-right font-mono text-[10px] text-zinc-400">
+                {total > 0 ? (snapshot.siteCount / total).toFixed(2) : "0.00"}
+              </div>
+            </div>
+
+            <div className="rounded-xl border border-zinc-100 bg-zinc-50 p-3">
+              <div className="flex items-center justify-between">
+                <div className="text-xs font-bold text-zinc-900">Stage spread</div>
+                <div className="rounded bg-violet-50 px-1.5 py-0.5 font-mono text-[9px] text-violet-700">usage</div>
+              </div>
+              <div className="mt-2 space-y-1">
+                {stageCounts.size === 0 && <div className="text-[10px] text-zinc-400">No stages recorded yet.</div>}
+                {Array.from(stageCounts.entries()).map(([stage, count]) => (
+                  <div key={stage} className="flex items-center justify-between text-[10px]">
+                    <span className={`rounded px-1.5 py-0.5 font-bold ${STAGE_STYLE[stage]}`}>{stage}</span>
+                    <span className="font-mono text-zinc-500">{count}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {siteCounts.length > 0 && (
+            <>
+              <div className="mb-2 mt-4 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-400">
+                Per-site retrieval count
+              </div>
+              <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                {siteCounts.map(([site, count]) => (
+                  <div key={site} className="rounded-xl border border-zinc-100 bg-zinc-50 p-3">
+                    <div className="flex items-center justify-between">
+                      <div className="truncate text-xs font-bold text-zinc-900" title={site}>{site}</div>
+                      <div className="font-mono text-[10px] text-zinc-500">{count}</div>
+                    </div>
+                    <div className="mt-2 h-2 overflow-hidden rounded-full bg-zinc-200">
+                      <div
+                        className="h-full rounded-full bg-gradient-to-r from-sky-500 to-indigo-500"
+                        style={{ width: `${(count / maxSiteHits) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+
+          <div className="mb-2 mt-4 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-400">
+            Ledger entries
+          </div>
+          <div className="mb-2 text-[10px] leading-tight text-zinc-500">
+            <b>grounding</b> = fetched by a retrieval lane, not yet confirmed in the draft.
+            All other stages come from the pipeline&apos;s own ledger and mark the point at
+            which the source was <b>first integrated into the draft</b>.
+          </div>
+
+          {total === 0 ? (
+            <div className="rounded-xl border border-dashed border-zinc-200 bg-zinc-50 p-4 text-center text-xs text-zinc-500">
+              No sources retrieved yet. Run a grounded query — every fetched document is recorded here
+              automatically with its site, title, and the stage at which it first entered the draft.
+            </div>
+          ) : (
+            <div className="overflow-x-auto rounded-xl border border-zinc-200">
+              <table className="w-full text-left text-[11px]">
+                <thead className="bg-zinc-50 font-bold text-zinc-600">
+                  <tr>
+                    <th className="px-3 py-2">Tag</th>
+                    <th className="px-3 py-2">Site</th>
+                    <th className="px-3 py-2">Title</th>
+                    <th className="px-3 py-2">Usage (first draft stage)</th>
+                    <th className="px-3 py-2">Lane</th>
+                    <th className="px-3 py-2">Fingerprint</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-zinc-100">
+                  {snapshot.records.map((record) => (
+                    <tr key={record.id} className="align-top">
+                      <td className="whitespace-nowrap px-3 py-2 font-mono font-bold text-zinc-800">[S{record.id}]</td>
+                      <td className="px-3 py-2">
+                        <a href={record.url} target="_blank" rel="noreferrer" className="text-blue-600 hover:underline">
+                          {record.site}
+                        </a>
+                      </td>
+                      <td className="max-w-[280px] px-3 py-2 text-zinc-800" title={record.title}>{record.title}</td>
+                      <td className="px-3 py-2">
+                        <span className={`rounded px-1.5 py-0.5 text-[10px] font-bold ${STAGE_STYLE[record.stage]}`}>
+                          {record.stage}
+                        </span>
+                      </td>
+                      <td className="px-3 py-2 font-mono text-[10px] text-zinc-500">{record.lane}</td>
+                      <td className="px-3 py-2 font-mono text-[10px] text-zinc-400">{record.fingerprint}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          <details className="mt-4">
+            <summary className="cursor-pointer text-xs font-bold text-zinc-600 hover:text-zinc-900">
+              View References formatted as {citationStyle.toUpperCase()} (from Cite dropdown)
+            </summary>
+            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap rounded-xl border border-zinc-200 bg-white p-4 font-mono text-xs leading-relaxed text-zinc-800">
+              {referencesFormatted.length > 0 ? referencesFormatted.join("\n\n") : "(no sources yet — references appear here once ledger is populated)"}
+            </pre>
+          </details>
+
+          <details className="mt-2">
+            <summary className="cursor-pointer text-xs font-bold text-zinc-600 hover:text-zinc-900">
+              View source-first quotation contract (injected into every grounded prompt, {citationStyle.toUpperCase()} style)
+            </summary>
+            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap rounded-xl border border-zinc-200 bg-white p-4 font-mono text-xs leading-relaxed text-zinc-800">
+              {contract || "(no sources yet — contract is injected once the ledger is populated)"}
+            </pre>
+          </details>
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/ComputeSandboxPanel.tsx

@@ -0,0 +1,130 @@
+import { useMemo, useState } from "react";
+import { COMPUTE_REGISTRY, runComputeCall, type ComputeRecord } from "../lib/compute-sandbox";
+
+// Interactive front-end for the SAME deterministic sandbox the reasoning
+// pipeline calls. Whatever you run here is byte-for-byte what the AI invokes
+// during Stage 2.5 — no separate code path, no simulation.
+export function ComputeSandboxPanel() {
+  const groups = useMemo(() => {
+    const m = new Map<string, typeof COMPUTE_REGISTRY>();
+    for (const s of COMPUTE_REGISTRY) { const g = m.get(s.group) ?? []; g.push(s); m.set(s.group, g); }
+    return [...m.entries()];
+  }, []);
+
+  const [activeId, setActiveId] = useState(COMPUTE_REGISTRY[0].id);
+  const spec = COMPUTE_REGISTRY.find((s) => s.id === activeId)!;
+  const [args, setArgs] = useState<Record<string, string>>(() =>
+    Object.fromEntries(spec.params.map((p) => [p.name, String(p.default)]))
+  );
+  const [record, setRecord] = useState<ComputeRecord | null>(null);
+
+  function selectFn(id: string) {
+    setActiveId(id);
+    const s = COMPUTE_REGISTRY.find((x) => x.id === id)!;
+    setArgs(Object.fromEntries(s.params.map((p) => [p.name, String(p.default)])));
+    setRecord(null);
+  }
+
+  function run() {
+    const parsed: Record<string, number | number[]> = {};
+    for (const p of spec.params) {
+      const raw = args[p.name] ?? "";
+      parsed[p.name] = p.kind === "number[]"
+        ? raw.split(/[,\s]+/).map(Number).filter((x) => isFinite(x))
+        : Number(raw);
+    }
+    setRecord(runComputeCall({ id: spec.id, args: parsed }));
+  }
+
+  return (
+    <div className="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-zinc-200 px-4 py-2.5">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-bold text-zinc-900">Deterministic Compute Sandbox</span>
+          <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-bold text-emerald-700">{COMPUTE_REGISTRY.length} whitelisted functions</span>
+        </div>
+        <span className="text-[10px] text-zinc-400">same path the reasoning chain calls · no eval · pure functions</span>
+      </div>
+
+      <div className="grid gap-4 p-4 lg:grid-cols-[260px_1fr]">
+        {/* Function list */}
+        <div className="max-h-80 space-y-3 overflow-y-auto pr-1">
+          {groups.map(([group, specs]) => (
+            <div key={group}>
+              <div className="mb-1 text-[10px] font-bold uppercase tracking-wider text-zinc-400">{group}</div>
+              <div className="space-y-0.5">
+                {specs.map((s) => (
+                  <button key={s.id} onClick={() => selectFn(s.id)}
+                    className={`block w-full rounded-lg px-2.5 py-1.5 text-left text-xs ${activeId === s.id ? "bg-zinc-900 text-white" : "text-zinc-700 hover:bg-zinc-100"}`}>
+                    {s.label}
+                    <span className={`ml-1 font-mono text-[10px] ${activeId === s.id ? "text-zinc-400" : "text-zinc-400"}`}>{s.id}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Inputs + run + output */}
+        <div className="space-y-3">
+          <div className="rounded-xl border border-zinc-100 bg-zinc-50 p-3">
+            <div className="text-xs font-bold text-zinc-900">{spec.label}</div>
+            <div className="font-mono text-[11px] text-zinc-500">{spec.id} — {spec.formula}</div>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            {spec.params.map((p) => (
+              <label key={p.name} className="block text-[11px] font-semibold text-zinc-600">
+                {p.name} <span className="font-mono text-zinc-400">{p.kind}</span>
+                <input value={args[p.name] ?? ""} onChange={(e) => setArgs({ ...args, [p.name]: e.target.value })}
+                  placeholder={p.kind === "number[]" ? "comma-separated" : "number"}
+                  className="mt-0.5 w-full rounded-lg border border-zinc-300 px-2 py-1 text-xs font-mono" />
+              </label>
+            ))}
+          </div>
+          <button onClick={run} className="rounded-lg bg-indigo-600 px-4 py-1.5 text-xs font-bold text-white hover:bg-indigo-700">Run calculation</button>
+
+          {record && (
+            <div className={`rounded-xl border p-3 ${record.ok ? "border-emerald-200 bg-emerald-50" : "border-rose-200 bg-rose-50"}`}>
+              <div className="flex items-center justify-between">
+                <span className={`text-xs font-bold ${record.ok ? "text-emerald-800" : "text-rose-800"}`}>{record.ok ? "Verified output" : "Compute failed"}</span>
+                <span className="font-mono text-[10px] text-zinc-500">{record.ms.toFixed(2)} ms</span>
+              </div>
+              {record.result ? (
+                <div className="mt-2 space-y-1">
+                  {Object.entries(record.result).map(([k, v]) => (
+                    <div key={k} className="flex items-center justify-between font-mono text-xs">
+                      <span className="text-zinc-600">{k}</span>
+                      <span className={`font-bold ${isFinite(v) ? "text-zinc-900" : "text-rose-700"}`}>{isFinite(v) ? v.toLocaleString(undefined, { maximumFractionDigits: 4 }) : "NaN — check inputs"}</span>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="mt-1 text-xs text-rose-700">{record.error}</div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Compact read-only renderer for compute records attached to a chat answer. */
+export function ComputeRecordsInline({ records }: { records: ComputeRecord[] }) {
+  if (!records.length) return null;
+  return (
+    <details className="mb-3">
+      <summary className="cursor-pointer text-xs font-semibold text-emerald-700 hover:text-emerald-900">
+        Deterministic calculations ({records.filter((r) => r.ok).length}/{records.length} verified)
+      </summary>
+      <div className="mt-2 space-y-1 rounded-lg border border-emerald-100 bg-emerald-50/60 p-3 font-mono text-[11px]">
+        {records.map((r, i) => (
+          <div key={i} className={r.ok ? "text-emerald-800" : "text-rose-700"}>
+            {r.label}: {r.result ? Object.entries(r.result).map(([k, v]) => `${k}=${isFinite(v) ? v.toLocaleString(undefined, { maximumFractionDigits: 3 }) : "NaN"}`).join(", ") : (r.error ?? "failed")}
+            <span className="ml-1 text-zinc-400">[{r.formula}]</span>
+          </div>
+        ))}
+      </div>
+    </details>
+  );
+}