2sagaco48 1.0.0

package/src/components/SagaOsV2Panel.tsx

@@ -0,0 +1,594 @@
+/**
+ * Type C — SagaOsV2Panel: real UI over the four SAGA-OS v2 engines.
+ * Every control drives an actual deterministic computation from
+ * `src/lib/sage/saga-os-v2-engines.ts`. No feature theatre.
+ */
+import { useCallback, useMemo, useState } from "react";
+import {
+  compileGenreSpec, runGenesisGrid, computeKallos, auditWireCoverage, wireCatalog,
+  modalShortcutTest, buildSagaOsV2DirectiveBlock, generateOnoma, buildWorldMap,
+  buildCastGraph, caRuleTable, SLOT_CLASS_META, SLOT_CLASS_IDS,
+  ONOMA_GENERATABLE_CLASSES, type SlotClassId, type GenreSpec, type GridRun, type KallosReport,
+  type WireCoverageReport, type ModalShortcutReport, type WorldMapPlace,
+} from "@/lib/sage/saga-os-v2-engines";
+import { auditCastNameConfusion } from '@/lib/sage/index.ts';
+
+// ── shared atoms (match Style Persona / SAGE panel typography) ──────────────
+function Sec({ icon, title, right }: { icon: string; title: string; right?: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2 border-b border-zinc-100 pb-1.5">
+      <span className="text-sm">{icon}</span>
+      <span className="text-[11px] font-bold uppercase tracking-wider text-zinc-700">{title}</span>
+      {right != null && <span className="ml-auto text-[10px] text-zinc-400">{right}</span>}
+    </div>
+  );
+}
+function Pill({ children, tone = "zinc" }: { children: React.ReactNode; tone?: string }) {
+  const t: Record<string, string> = {
+    zinc: "bg-zinc-100 text-zinc-700", indigo: "bg-indigo-50 text-indigo-700",
+    violet: "bg-violet-50 text-violet-700", emerald: "bg-emerald-50 text-emerald-700",
+    amber: "bg-amber-50 text-amber-800", rose: "bg-rose-50 text-rose-700",
+    sky: "bg-sky-50 text-sky-700", teal: "bg-teal-50 text-teal-700",
+  };
+  return <span className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${t[tone] ?? t.zinc}`}>{children}</span>;
+}
+function KV({ k, v }: { k: string; v: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline gap-1.5 border-b border-zinc-50 py-0.5 last:border-0">
+      <span className="w-28 shrink-0 text-[10px] font-bold uppercase tracking-wider text-zinc-400">{k}</span>
+      <span className="text-[11px] text-zinc-800">{v}</span>
+    </div>
+  );
+}
+function Bar({ v, label }: { v: number; label: string }) {
+  const pct = Math.round(v * 100);
+  const hue = Math.round(v * 120);
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="w-[124px] shrink-0 truncate text-right text-[10px] text-zinc-500" title={label}>{label}</span>
+      <div className="h-1.5 flex-1 rounded-full bg-zinc-100">
+        <div className="h-full rounded-full" style={{ width: `${pct}%`, backgroundColor: `hsl(${hue},55%,50%)` }} />
+      </div>
+      <span className="w-9 shrink-0 text-right font-mono text-[10px] text-zinc-600">{pct}%</span>
+    </div>
+  );
+}
+function AuditRow({ id, pass, detail }: { id: string; pass: boolean; detail: string }) {
+  return (
+    <div className="flex items-start gap-1.5 border-b border-zinc-50 py-0.5 last:border-0">
+      <span className={`shrink-0 font-mono text-[10px] ${pass ? "text-emerald-600" : "text-amber-600"}`}>
+        {pass ? "✓" : "!"}
+      </span>
+      <span className="w-16 shrink-0 font-mono text-[10px] text-zinc-500">{id}</span>
+      <span className="text-[10px] text-zinc-600">{detail}</span>
+    </div>
+  );
+}
+
+type Tab = "helm" | "grid" | "world" | "cast" | "kallos" | "wire" | "names";
+const TABS: { id: Tab; icon: string; label: string }[] = [
+  { id: "helm", icon: "🎭", label: "Genre Helm" },
+  { id: "grid", icon: "🧬", label: "Genesis Grid" },
+  { id: "world", icon: "🗺", label: "World Map" },
+  { id: "cast", icon: "🕸", label: "Cast & Relations" },
+  { id: "kallos", icon: "✨", label: "KALLOS" },
+  { id: "wire", icon: "🔌", label: "SAGA-WIRE" },
+  { id: "names", icon: "📛", label: "Names" },
+];
+
+// ── 1. GENRE HELM ───────────────────────────────────────────────────────────
+function HelmPanel({ spec, onCompile }: { spec: GenreSpec | null; onCompile: (s: GenreSpec) => void }) {
+  const [text, setText] = useState("a scary quiet literary thriller, 3 book series");
+  return (
+    <div className="space-y-3">
+      <Sec icon="🎭" title="Genre Helm — request → GenreSpec" right="offline rule-based compiler" />
+      <div className="flex gap-1">
+        <input
+          value={text} onChange={(e) => setText(e.target.value)}
+          className="flex-1 rounded border border-zinc-200 px-2 py-1 text-[11px]"
+          placeholder="e.g. scary thriller · romance novel · like Lemony Snicket · hard sf first contact"
+        />
+        <button onClick={() => onCompile(compileGenreSpec(text))}
+          className="rounded bg-indigo-600 px-3 py-1 text-[11px] font-bold text-white hover:bg-indigo-700">
+          Compile
+        </button>
+      </div>
+      {spec && (
+        <div className="space-y-2">
+          <div className="rounded-lg border border-indigo-100 bg-white p-2">
+            <div className="mb-1 flex flex-wrap items-center gap-1">
+              <Pill tone="indigo">{spec.family}</Pill>
+              <span className="text-[10px] text-zinc-400">/</span>
+              <Pill tone="violet">{spec.leaf}</Pill>
+              <Pill tone="zinc">V={spec.V}</Pill>
+              <Pill tone="teal">{spec.geometry}</Pill>
+              <Pill tone="zinc">{spec.container}</Pill>
+            </div>
+            <KV k="Pace" v={spec.paceProfile} />
+            <KV k="Tone gradient" v={spec.toneGradient} />
+            <KV k="CA rule table" v={`${spec.caRuleTableId} · B={${caRuleTable(spec.caRuleTableId).B.join(",")}} · S={${caRuleTable(spec.caRuleTableId).S.join(",")}}`} />
+            <KV k="KALLOS profile" v={spec.kallosProfile} />
+            <KV k="Stakes rotation" v={spec.stakesRotation.join(" → ")} />
+            <KV k="Ending weights" v={
+              <span className="flex flex-wrap gap-1">
+                {Object.entries(spec.endingFamilyWeights).sort((a, b) => b[1] - a[1]).slice(0, 6)
+                  .map(([k, v]) => <Pill key={k} tone={v >= 0.7 ? "emerald" : "zinc"}>{k} {v.toFixed(2)}</Pill>)}
+              </span>
+            } />
+            <KV k="Slot weights" v={
+              <span className="flex flex-wrap gap-1">
+                {Object.entries(spec.bandWeights).filter(([, v]) => v > 1)
+                  .map(([k, v]) => <Pill key={k} tone="amber">{SLOT_CLASS_META[k as SlotClassId]?.name ?? k} ×{v}</Pill>)}
+              </span>
+            } />
+          </div>
+          {spec.ambiguities.length > 0 && (
+            <div className="rounded border border-amber-100 bg-amber-50/70 p-2">
+              <div className="text-[10px] font-bold uppercase tracking-wider text-amber-800">Ambiguities (declared, not silently defaulted)</div>
+              <ul className="ml-4 list-disc text-[10px] text-amber-800">
+                {spec.ambiguities.map((a) => <li key={a}>{a}</li>)}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 2. GENESIS GRID ─────────────────────────────────────────────────────────
+/** The seed the fiction runner is currently previewing. */
+function liveFictionSeed(): number | null {
+  try {
+    const raw = localStorage.getItem("veritas.sage.previewSeed.v1");
+    const n = Number(raw);
+    return Number.isFinite(n) && n > 0 ? n : null;
+  } catch { return null; }
+}
+
+function GridPanel({ run, onRun, ms, directive }: {
+  run: GridRun | null; onRun: (seed: number, budget: number) => void;
+  ms: ModalShortcutReport | null; directive: string;
+}) {
+  const live = liveFictionSeed();
+  const [seed, setSeed] = useState(() => liveFictionSeed() ?? 12345);
+  const isLive = live != null && seed === live;
+  const [budget, setBudget] = useState(48);
+  return (
+    <div className="space-y-3">
+      <Sec icon="🧬" title="Genesis Grid — typed-lattice CA" right="deterministic · relational neighbourhood" />
+      <div className={`rounded border p-2 text-[10px] ${isLive ? "border-emerald-200 bg-emerald-50 text-emerald-800" : "border-amber-200 bg-amber-50 text-amber-800"}`}>
+        {isLive
+          ? <>● <b>LIVE</b> — this seed matches the fiction engine\u2019s current blueprint, so what you see here is what the model receives.</>
+          : <>○ <b>LAB</b> — exploring seed {seed}
+              {live != null && <> while the fiction engine is on seed <b>{live}</b></>}.
+              Results below are <b>not</b> sent to the model.
+              {live != null && <button onClick={() => { setSeed(live); onRun(live, budget); }} className="ml-1 rounded bg-amber-600 px-1.5 py-0.5 font-semibold text-white">sync to live seed</button>}
+            </>}
+      </div>
+      <div className="flex flex-wrap items-center gap-1">
+        <label className="flex items-center gap-1 text-[10px] text-zinc-500">
+          seed
+          <input type="number" value={seed} onChange={(e) => setSeed(Number(e.target.value) || 0)}
+            className="w-24 rounded border border-zinc-200 px-1.5 py-1 font-mono text-[11px]" />
+        </label>
+        <label className="flex items-center gap-1 text-[10px] text-zinc-500">
+          budget
+          <input type="number" min={4} max={96} value={budget}
+            onChange={(e) => setBudget(Math.max(4, Math.min(96, Number(e.target.value) || 4)))}
+            className="w-16 rounded border border-zinc-200 px-1.5 py-1 font-mono text-[11px]" />
+        </label>
+        <button onClick={() => onRun(seed, budget)}
+          className="rounded bg-indigo-600 px-3 py-1 text-[11px] font-bold text-white hover:bg-indigo-700">Evolve</button>
+        <button onClick={() => { const s = (Math.random() * 2 ** 31) >>> 0; setSeed(s); onRun(s, budget); }}
+          className="rounded border border-indigo-200 px-2 py-1 text-[11px] font-semibold text-indigo-700 hover:bg-indigo-50">🎲 Random seed</button>
+      </div>
+
+      {run && (
+        <>
+          <div className="rounded-lg border border-violet-100 bg-white p-2">
+            <div className="mb-1 flex flex-wrap items-center gap-1">
+              <Pill tone="violet">{run.pattern}</Pill>
+              <Pill tone="emerald">→ {run.endingFamily}</Pill>
+              <Pill tone="zinc">{run.ruleTable.id}</Pill>
+              <Pill tone="zinc">B={run.ruleTable.B.join(",")} S={run.ruleTable.S.join(",")}</Pill>
+            </div>
+            <KV k="Pattern detail" v={run.patternDetail} />
+            <KV k="Lattice" v={`${run.rows.length} rows (${run.rows.filter(r=>r.kind==="agent").length} agent · ${run.rows.filter(r=>r.kind==="institution").length} inst · ${run.rows.filter(r=>r.kind==="setting").length} setting · ${run.rows.filter(r=>r.kind==="strand").length} strand)`} />
+            <KV k="Ticks / stop" v={`${run.ticks.length} ticks · stopped t=${run.stopTick}`} />
+            <KV k="Compiled plan" v={`${run.plan.chapters.length} chapters · ${run.plan.totalScenes} scenes · ${run.plan.promiseOps.length} promise ops`} />
+            <KV k="Distinct elements" v={String(new Set(run.plan.scenes.map(s=>s.element?.id).filter(Boolean)).size)} />
+          </div>
+
+          {/* population + intensity sparkline */}
+          <div className="rounded-lg border border-zinc-100 bg-white p-2">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Population & intensity per tick</div>
+            <div className="mt-1 flex items-end gap-[2px]" style={{ height: 48 }}>
+              {run.ticks.map((t) => {
+                const maxPop = Math.max(...run.ticks.map((x) => x.population), 1);
+                const h = Math.round((t.activeCount / maxPop) * 44);
+                const inten = t.intensity / 100;
+                return (
+                  <div key={t.t} className="flex-1" title={`t=${t.t}: ${t.activeCount}/${t.population} live · births ${t.births.length} · deaths ${t.deaths.length} · intensity ${t.intensity}`}>
+                    <div className="rounded-t" style={{ height: Math.max(2, h), backgroundColor: `hsl(${Math.round(inten * 120)},60%,55%)` }} />
+                  </div>
+                );
+              })}
+            </div>
+            <div className="mt-0.5 flex justify-between font-mono text-[9px] text-zinc-400">
+              <span>t=0</span><span>{run.plan.chapters.length} chapters compiled</span><span>t={run.stopTick}</span>
+            </div>
+          </div>
+
+          {/* chapter stakes rotation */}
+          <div className="rounded-lg border border-zinc-100 bg-white p-2">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Stakes rotation by chapter</div>
+            <div className="mt-1 flex flex-wrap gap-1">
+              {run.plan.chapters.map((c) => (
+                <Pill key={c.index} tone={c.dominantStakes === "physical" ? "rose" : c.dominantStakes === "moral" ? "amber" : c.dominantStakes === "relational" ? "violet" : c.dominantStakes === "institutional" ? "sky" : "zinc"}>
+                  {c.index}:{c.dominantStakes ?? "—"}
+                </Pill>
+              ))}
+            </div>
+          </div>
+
+          {/* GEN audits */}
+          <div className="rounded-lg border border-zinc-100 bg-white p-2">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">GEN-001…009 audits</div>
+            <div className="mt-1">{run.audits.map((a) => <AuditRow key={a.id} {...a} />)}</div>
+          </div>
+
+          {/* modal shortcut */}
+          {ms && (
+            <div className={`rounded-lg border p-2 ${ms.collapsesToTemplatePlusDice ? "border-rose-200 bg-rose-50/70" : "border-emerald-200 bg-emerald-50/70"}`}>
+              <div className={`text-[10px] font-bold uppercase tracking-wider ${ms.collapsesToTemplatePlusDice ? "text-rose-700" : "text-emerald-700"}`}>
+                Modal-shortcut test (v2 §7)
+              </div>
+              <div className={`text-[11px] font-semibold ${ms.collapsesToTemplatePlusDice ? "text-rose-800" : "text-emerald-800"}`}>{ms.verdict}</div>
+              <ul className="ml-4 mt-0.5 list-disc text-[10px] text-zinc-600">
+                {ms.reasons.map((r) => <li key={r}>{r}</li>)}
+              </ul>
+            </div>
+          )}
+
+          {/* seed doc + directive */}
+          <div className="rounded-lg border border-zinc-100 bg-white p-2">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Seed document (replay proof)</div>
+            <pre className="mt-1 overflow-x-auto whitespace-pre-wrap font-mono text-[10px] text-zinc-600">{run.seedDoc}</pre>
+          </div>
+          {directive && (
+            <div className="rounded-lg border border-violet-100 bg-violet-50/50 p-2">
+              <div className="text-[10px] font-bold uppercase tracking-wider text-violet-700">
+                v2 directive block — appended to the chapter prompt
+              </div>
+              <pre className="mt-1 max-h-52 overflow-auto whitespace-pre-wrap font-mono text-[10px] text-violet-900">{directive}</pre>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── 3. WORLD MAP ────────────────────────────────────────────────────────────
+function WorldPanel({ places }: { places: WorldMapPlace[] }) {
+  if (!places.length) return <div className="text-[11px] text-zinc-400">Run the grid first.</div>;
+  return (
+    <div className="space-y-3">
+      <Sec icon="🗺" title="World Map — settings as contiguous local places" right={`${places.length} places`} />
+      <div className="grid gap-1.5 sm:grid-cols-2">
+        {places.map((p, i) => {
+          const liveN = p.residents.filter((r) => r.live).length;
+          return (
+            <div key={p.settingId} className="rounded-lg border border-zinc-200 bg-white p-2">
+              <div className="flex items-center justify-between">
+                <div className="text-[11px] font-bold text-zinc-900">{p.label}</div>
+                <Pill tone={liveN > 0 ? "emerald" : "zinc"}>{liveN}/{p.residents.length} live</Pill>
+              </div>
+              <div className="font-mono text-[9px] text-zinc-400">{p.settingId} · place {i + 1}</div>
+              <div className="mt-1 flex flex-wrap gap-1">
+                {p.residents.map((r) => (
+                  <span key={r.id} className={`rounded px-1 py-0.5 text-[9px] ${r.live ? "bg-emerald-50 text-emerald-800" : "bg-zinc-50 text-zinc-400"}`}>
+                    {r.kind === "agent" ? "👤" : r.kind === "institution" ? "🏛" : "🧵"} {r.id}
+                  </span>
+                ))}
+              </div>
+              <div className="mt-1 text-[9px] text-zinc-400">
+                borders: {p.adjacentSettings.join(", ") || "—"}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── 4. CAST & RELATIONS ─────────────────────────────────────────────────────
+function CastPanel({ run, cast, edges }: { run: GridRun | null; cast: ReturnType<typeof buildCastGraph>["cast"]; edges: ReturnType<typeof buildCastGraph>["edges"] }) {
+  const conf = useMemo(() => auditCastNameConfusion(cast.map((c) => c.name)), [cast]);
+  if (!cast.length) return <div className="text-[11px] text-zinc-400">Run the grid first.</div>;
+  const ids = cast.map((c) => c.id);
+  const adj = new Map<string, Set<string>>();
+  for (const e of edges) {
+    if (!adj.has(e.a)) adj.set(e.a, new Set());
+    if (!adj.has(e.b)) adj.set(e.b, new Set());
+    adj.get(e.a)!.add(e.b); adj.get(e.b)!.add(e.a);
+  }
+  return (
+    <div className="space-y-3">
+      <Sec icon="🕸" title="Cast & relationship graph" right={`${cast.length} cast · ${edges.length} edges`} />
+      <div className="grid gap-1.5 sm:grid-cols-2">
+        {cast.map((c) => (
+          <div key={c.id} className={`rounded-lg border p-2 ${c.live ? "border-emerald-200 bg-white" : "border-zinc-200 bg-zinc-50/60"}`}>
+            <div className="flex items-center justify-between gap-1">
+              <div className="min-w-0">
+                <div className="truncate text-[11px] font-bold text-zinc-900">{c.name}</div>
+                <div className="font-mono text-[9px] text-zinc-400">{c.id} · {c.kind} · deg {c.degree}</div>
+              </div>
+              <Pill tone={c.live ? "emerald" : "zinc"}>{c.live ? "live" : "cold"}</Pill>
+            </div>
+            {adj.get(c.id) && (
+              <div className="mt-1 flex flex-wrap gap-1">
+                {[...adj.get(c.id)!].map((n) => {
+                  const other = cast.find((x) => x.id === n);
+                  return <Pill key={n} tone="sky">{other?.name ?? n}</Pill>;
+                })}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* adjacency matrix */}
+      <div className="rounded-lg border border-zinc-100 bg-white p-2">
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Adjacency matrix</div>
+        <div className="mt-1 overflow-x-auto">
+          <table className="text-[9px]">
+            <thead>
+              <tr>
+                <th />
+                {ids.map((i) => <th key={i} className="px-1 font-mono text-zinc-400">{i}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {ids.map((r) => (
+                <tr key={r}>
+                  <td className="pr-1 font-mono text-zinc-500">{r}</td>
+                  {ids.map((c) => {
+                    const on = adj.get(r)?.has(c) ?? false;
+                    return (
+                      <td key={c} className={`px-1 text-center ${on ? (r === c ? "text-zinc-300" : "bg-indigo-100 text-indigo-700") : "text-zinc-200"}`}>
+                        {r === c ? "·" : on ? "●" : "·"}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className={`rounded-lg border p-2 ${conf.length ? "border-amber-200 bg-amber-50/70" : "border-emerald-200 bg-emerald-50/70"}`}>
+        <div className={`text-[10px] font-bold uppercase tracking-wider ${conf.length ? "text-amber-800" : "text-emerald-700"}`}>
+          ONOMASTRATA cast-name confusion audit
+        </div>
+        {conf.length === 0
+          ? <div className="text-[10px] text-emerald-800">No confusable name pairs detected.</div>
+          : <ul className="ml-4 list-disc text-[10px] text-amber-800">{conf.map((f) => <li key={f.a + f.b}>{f.a} ↔ {f.b}: {f.issue}</li>)}</ul>}
+      </div>
+      {run && (
+        <div className="text-[9px] italic text-zinc-400">
+          SAGA_CAST_LOAD window ≤15: current live cast {cast.filter((c) => c.live).length}.
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 5. KALLOS ───────────────────────────────────────────────────────────────
+function KallosPanel({ k }: { k: KallosReport | null }) {
+  if (!k) return <div className="text-[11px] text-zinc-400">Run the grid first.</div>;
+  return (
+    <div className="space-y-3">
+      <Sec icon="✨" title="KALLOS — deterministic beauty proxy" right={k.profile} />
+      <div className="rounded-lg border border-violet-100 bg-white p-2">
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold text-violet-800">{k.composite.toFixed(1)}</span>
+          <span className="text-[10px] text-zinc-400">/ 100 weighted geometric mean</span>
+        </div>
+        <div className="text-[10px] text-zinc-500">
+          weakest pillar: <b>{k.weakest?.label}</b> = {k.weakest?.score.toFixed(3)} — write to strengthen this specifically.
+        </div>
+        {k.alphaFit != null && (
+          <div className="mt-0.5 text-[10px] text-zinc-500">
+            spectral exponent α = <b>{k.alphaFit.toFixed(3)}</b> (1.0 = pink optimum; 0 = white, 2 = brown)
+            {k.lowN && <span className="ml-1 text-amber-700">· LOW-N window</span>}
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-1 rounded-lg border border-zinc-100 bg-white p-2">
+        {k.pillars.map((p) => (
+          <div key={p.key}>
+            <Bar v={p.score} label={`${p.key} · ${p.label}`} />
+            <div className="ml-[132px] text-[9px] leading-tight text-zinc-400">
+              w={p.weight.toFixed(3)}{!p.measured && " · UNMEASURED (excluded, weights renormalized)"}{p.capped && " · ANTI-GAMING CAP"}
+              {p.measured && ` · ${p.detail}`}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {k.antiGaming.length > 0 && (
+        <div className="rounded border border-amber-100 bg-amber-50/70 p-2">
+          <div className="text-[10px] font-bold uppercase tracking-wider text-amber-800">Anti-gaming / LOW-N notes</div>
+          <ul className="ml-4 list-disc text-[10px] text-amber-800">{k.antiGaming.map((a) => <li key={a}>{a}</li>)}</ul>
+        </div>
+      )}
+
+      <div className="rounded-lg border border-zinc-100 bg-white p-2">
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">K-AUD-001…006</div>
+        <div className="mt-1">{k.passes.map((p) => <AuditRow key={p.id} {...p} />)}</div>
+      </div>
+
+      <div className="rounded border border-rose-100 bg-rose-50/50 p-2 text-[10px] italic text-rose-800">{k.caveat}</div>
+    </div>
+  );
+}
+
+// ── 6. SAGA-WIRE ────────────────────────────────────────────────────────────
+function WirePanel({ cov }: { cov: WireCoverageReport }) {
+  const [sel, setSel] = useState<SlotClassId | null>(null);
+  const rows = useMemo(() => (sel ? wireCatalog().filter((r) => r.slotClass === sel) : []), [sel]);
+  return (
+    <div className="space-y-3">
+      <Sec icon="🔌" title="SAGA-WIRE — total catalog binding" right={`${cov.wired}/${cov.totalRows} rows · 0 orphans`} />
+      <div className="flex flex-wrap gap-1">
+        {SLOT_CLASS_IDS.map((s) => (
+          <button key={s} onClick={() => setSel(sel === s ? null : s)}
+            className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${sel === s ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-700 hover:bg-zinc-200"}`}>
+            {s} · {cov.perSlot[s]}
+          </button>
+        ))}
+      </div>
+      <div className="rounded-lg border border-zinc-100 bg-white p-2">
+        <div className="flex flex-wrap gap-2">
+          <Pill tone={cov.passes.WIRE001 ? "emerald" : "rose"}>WIRE-001 no orphans {cov.passes.WIRE001 ? "PASS" : "FAIL"}</Pill>
+          <Pill tone={cov.passes.WIRE002 ? "emerald" : "amber"}>WIRE-002 ≥20/slot {cov.passes.WIRE002 ? "PASS" : "THIN"}</Pill>
+          <Pill tone={cov.passes.WIRE003 ? "emerald" : "rose"}>WIRE-003 LAW harness {cov.passes.WIRE003 ? "PASS" : "FAIL"}</Pill>
+        </div>
+        {!cov.passes.WIRE002 && (
+          <div className="mt-1 text-[10px] text-amber-700">
+            THIN slots (honest gap, not a defect in wiring): {" "}
+            {SLOT_CLASS_IDS.filter((s) => cov.perSlot[s] < 20).map((s) => `${s}=${cov.perSlot[s]}`).join(", ")}.
+            The catalog itself has few ENDING / TWIST / DOCUMENT rows.
+          </div>
+        )}
+      </div>
+      {sel && (
+        <div className="rounded-lg border border-indigo-100 bg-white p-2">
+          <div className="text-[10px] font-bold uppercase tracking-wider text-indigo-700">
+            {sel} · {SLOT_CLASS_META[sel as SlotClassId].name} — {SLOT_CLASS_META[sel as SlotClassId].note} ({cov.perSlot[sel]} rows)
+          </div>
+          <div className="mt-1 max-h-64 overflow-y-auto">
+            <table className="w-full text-[10px]">
+              <tbody>
+                {rows.slice(0, 200).map((r) => (
+                  <tr key={r.id} className="border-b border-zinc-50 last:border-0">
+                    <td className="w-20 px-1 py-0.5 font-mono text-zinc-500">{r.id}</td>
+                    <td className="px-1 py-0.5 font-semibold text-zinc-800">{r.name}</td>
+                    <td className="w-14 px-1 py-0.5 font-mono text-[9px] text-amber-700">{r.stakesAxis}</td>
+                    <td className="w-16 px-1 py-0.5 font-mono text-[9px] text-teal-700">{r.costAxis}</td>
+                    <td className="w-12 px-1 py-0.5 text-right font-mono text-[9px] text-zinc-400">{r.rarity.toFixed(2)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-1 font-mono text-[9px] text-zinc-400">
+            columns: id · name · stakes axis · cost axis · rarity percentile
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 7. NAMES ────────────────────────────────────────────────────────────────
+function NamesPanel({ seed }: { seed: number }) {
+  const [cls, setCls] = useState("PERSON");
+  const [n, setN] = useState(8);
+  const names = useMemo(() => generateOnoma(seed, cls, n), [seed, cls, n]);
+  const conf = useMemo(() => auditCastNameConfusion(names.map((x) => x.name)), [names]);
+  return (
+    <div className="space-y-3">
+      <Sec icon="📛" title="ONOMASTRATA name generator" right={`seed ${seed} · deterministic`} />
+      <div className="flex flex-wrap items-center gap-1">
+        <select value={cls} onChange={(e) => setCls(e.target.value)}
+          className="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px]">
+          {ONOMA_GENERATABLE_CLASSES.map((c) => <option key={c} value={c}>{c}</option>)}
+        </select>
+        <label className="flex items-center gap-1 text-[10px] text-zinc-500">
+          count
+          <input type="number" min={1} max={40} value={n} onChange={(e) => setN(Math.max(1, Math.min(40, Number(e.target.value) || 1)))}
+            className="w-14 rounded border border-zinc-200 px-1.5 py-1 font-mono text-[11px]" />
+        </label>
+      </div>
+      <div className="rounded-lg border border-zinc-100 bg-white p-2">
+        <div className="flex flex-wrap gap-1">
+          {names.map((x) => <Pill key={x.name} tone="indigo">{x.name}</Pill>)}
+        </div>
+        {conf.length > 0 && (
+          <div className="mt-1 text-[10px] text-amber-700">
+            ⚠ confusable pairs: {conf.map((f) => `${f.a} ↔ ${f.b}`).join("; ")}
+          </div>
+        )}
+        <div className="mt-1 font-mono text-[9px] text-zinc-400">
+          same (seed, class) always yields the same names — no corpus, no network.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── main ────────────────────────────────────────────────────────────────────
+export function SagaOsV2Panel() {
+  const [open, setOpen] = useState(true);
+  const [tab, setTab] = useState<Tab>("helm");
+  const [spec, setSpec] = useState<GenreSpec | null>(null);
+  const [run, setRun] = useState<GridRun | null>(null);
+  const [kallos, setKallos] = useState<KallosReport | null>(null);
+  const [ms, setMs] = useState<ModalShortcutReport | null>(null);
+  const [directive, setDirective] = useState("");
+
+  const cov = useMemo(() => auditWireCoverage(), []);
+  const places = useMemo(() => (run ? buildWorldMap(run) : []), [run]);
+  const castGraph = useMemo(() => (run ? buildCastGraph(run) : { cast: [], edges: [] }), [run]);
+
+  const onRun = useCallback((seed: number, budget: number) => {
+    const s = spec ?? compileGenreSpec("a scary quiet literary thriller, 3 book series");
+    if (!spec) setSpec(s);
+    const r = runGenesisGrid({ seed, spec: s, budget });
+    const k = computeKallos({ run: r, profile: s.kallosProfile });
+    const block = buildSagaOsV2DirectiveBlock(r, k);
+    setRun(r); setKallos(k); setMs(modalShortcutTest(r));
+    setDirective(block);
+  }, [spec]);
+
+  return (
+    <section className="rounded-xl border border-zinc-200 bg-zinc-50/80">
+      <button onClick={() => setOpen(!open)} className="flex w-full items-center justify-between px-4 py-2.5 text-left">
+        <div className="flex items-center gap-2">
+          <span className="text-base">🧬</span>
+          <span className="text-xs font-bold uppercase tracking-wider text-zinc-700">SAGA-OS v2 Engines</span>
+          <span className="rounded bg-violet-100 px-1.5 py-0.5 font-mono text-[10px] text-violet-700">
+            SAGA-WIRE · GENRE HELM · GENESIS-GRID · KALLOS
+          </span>
+          {run && <span className="font-mono text-[10px] text-zinc-400">{run.pattern} → {run.endingFamily}</span>}
+        </div>
+        <span className="text-zinc-400">{open ? "▾" : "▸"}</span>
+      </button>
+      {open && (
+        <div className="border-t border-zinc-200 px-4 py-3">
+          <div className="mb-3 flex flex-wrap gap-1">
+            {TABS.map((t) => (
+              <button key={t.id} onClick={() => setTab(t.id)}
+                className={`rounded-md px-2 py-1 text-[11px] font-semibold ${tab === t.id ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"}`}>
+                {t.icon} {t.label}
+              </button>
+            ))}
+          </div>
+          {tab === "helm" && <HelmPanel spec={spec} onCompile={setSpec} />}
+          {tab === "grid" && <GridPanel run={run} onRun={onRun} ms={ms} directive={directive} />}
+          {tab === "world" && <WorldPanel places={places} />}
+          {tab === "cast" && <CastPanel run={run} cast={castGraph.cast} edges={castGraph.edges} />}
+          {tab === "kallos" && <KallosPanel k={kallos} />}
+          {tab === "wire" && <WirePanel cov={cov} />}
+          {tab === "names" && <NamesPanel seed={run?.seed ?? 12345} />}
+        </div>
+      )}
+    </section>
+  );
+}