2sagaco48 1.0.0

package/src/components/SagaOsPanel.tsx

@@ -0,0 +1,605 @@
+/**
+ * SAGA-OS STUDIO — usability-first rework of the v1–v8 panel (P15).
+ * ---------------------------------------------------------------------------
+ * Organised by the v3 §2.2 pipeline (what a writer DOES), not by version tag:
+ *   Compose → Catalog → Names → Evolve → Realize → Score → Screen → Release
+ * Every tab drives a real deterministic computation over the SAME unified roll
+ * the fiction prompt is compiled from, so nothing shown here is decorative.
+ * The v1–v8 canonical tables and the v2 lab are preserved under "Reference".
+ */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { rollSage } from '@/lib/sage/engine.ts';
+import { GENRE_HELM } from '@/lib/sage/saga-os-v2.ts';
+import { unifiedRoll, type UnifiedRoll } from "@/lib/sage/unified-roll";
+import { loadRealityLevel } from "@/lib/sage/reality-grounding";
+import {
+  compileCatalog, GENRE_PROFILES, resolveGenreKey, loadBuildRequest, saveBuildRequest, defaultBuildRequest,
+  NAME_PROFILES, generateNameSet, hybridProfile, generateName, createNameRegistry, GenomeRng, sha256Hex,
+  runMorphogenesis, auditCastConfusionV3, SLOT_CLASS_LIST,
+  type BuildRequest, type CompiledElement, type NameClass, type LengthMode, type GeneratedName,
+} from "@/lib/sage/saga-os-v3-core";
+import {
+  auditManuscript, evaluateKallosV3, adaptToScreen, toFountain, runScreenAudits, screenplayPromptPack,
+  runProductionTests, runReleaseGates, loadLiveStore, saveLiveStore, updateAudienceProfile, profileKeyFor,
+  SAGA_V3_COMPETITOR_MATRIX, KALLOS_V3_LABELS,
+  type AdaptationMode, type AudienceObservation, type AudienceProfile, type ManuscriptAudit,
+} from "@/lib/sage/saga-os-v3-release";
+import { SLOT_CLASS_META, type SlotClassId } from "@/lib/sage/saga-os-v2-engines";
+import { KALLOS_DIMENSIONS } from '@/lib/sage/saga-os-v2.ts';
+import { SagaStyleTab } from "./SagaStyleTab";
+import { SagaOsReference } from "./SagaOsReference";
+import { SagaOsV2Panel } from "./SagaOsV2Panel";
+
+// ── fiction-mode detection (same key the packaged runner uses) ────────────
+function useFictionActive(): boolean {
+  const [active, setActive] = useState<boolean>(() => {
+    try { return localStorage.getItem("veritas.sage.pipeline.mode.v2") === "fiction"; } catch { return false; }
+  });
+  useEffect(() => {
+    const check = () => { try { setActive(localStorage.getItem("veritas.sage.pipeline.mode.v2") === "fiction"); } catch { /* ignore */ } };
+    check();
+    const id = window.setInterval(check, 800);
+    window.addEventListener("storage", check);
+    const obs = new MutationObserver(check);
+    try { obs.observe(document.body, { childList: true, subtree: true }); } catch { /* ignore */ }
+    return () => { window.clearInterval(id); window.removeEventListener("storage", check); obs.disconnect(); };
+  }, []);
+  return active;
+}
+
+// ── atoms (same typography as Style Persona / SAGE panels) ──────────────────
+const T: Record<string, string> = {
+  zinc: "bg-zinc-100 text-zinc-700 border-zinc-200", indigo: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  violet: "bg-violet-50 text-violet-700 border-violet-200", emerald: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  amber: "bg-amber-50 text-amber-800 border-amber-200", rose: "bg-rose-50 text-rose-700 border-rose-200",
+  sky: "bg-sky-50 text-sky-700 border-sky-200", teal: "bg-teal-50 text-teal-700 border-teal-200",
+};
+const Pill = ({ children, tone = "zinc", title }: { children: React.ReactNode; tone?: string; title?: string }) =>
+  <span title={title} className={`inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-semibold ${T[tone] ?? T.zinc}`}>{children}</span>;
+const Head = ({ icon, title, right }: { icon: string; title: string; right?: React.ReactNode }) => (
+  <div className="flex items-center gap-2 border-b border-zinc-100 pb-1">
+    <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>
+);
+const Card = ({ children, tone = "white" }: { children: React.ReactNode; tone?: "white" | "violet" | "emerald" | "amber" | "rose" }) => (
+  <div className={`rounded-lg border p-2.5 ${tone === "white" ? "border-zinc-200 bg-white" : tone === "violet" ? "border-violet-200 bg-violet-50/40" : tone === "emerald" ? "border-emerald-200 bg-emerald-50/50" : tone === "amber" ? "border-amber-200 bg-amber-50/60" : "border-rose-200 bg-rose-50/60"}`}>{children}</div>
+);
+const KV = ({ k, v }: { k: string; v: React.ReactNode }) => (
+  <div className="flex items-baseline gap-1.5 border-b border-zinc-50 py-0.5 last:border-0">
+    <span className="w-32 shrink-0 text-[10px] font-bold uppercase tracking-wider text-zinc-400">{k}</span><span className="text-[11px] text-zinc-800">{v}</span>
+  </div>
+);
+const Bar = ({ v, label, note }: { v: number; label: string; note?: string }) => (
+  <div>
+    <div className="flex items-center gap-1.5">
+      <span className="w-[150px] 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: `${Math.round(v * 100)}%`, backgroundColor: `hsl(${Math.round(v * 120)},55%,50%)` }} /></div>
+      <span className="w-9 shrink-0 text-right font-mono text-[10px] text-zinc-600">{(v * 100).toFixed(0)}%</span>
+    </div>
+    {note && <div className="ml-[158px] text-[9px] leading-tight text-zinc-400">{note}</div>}
+  </div>
+);
+const Btn = ({ onClick, children, tone = "indigo", disabled }: { onClick: () => void; children: React.ReactNode; tone?: "indigo" | "ghost" | "emerald" | "rose"; disabled?: boolean }) => (
+  <button onClick={onClick} disabled={disabled} className={`rounded px-2.5 py-1 text-[11px] font-bold disabled:opacity-40 ${tone === "indigo" ? "bg-indigo-600 text-white hover:bg-indigo-700" : tone === "emerald" ? "bg-emerald-600 text-white hover:bg-emerald-700" : tone === "rose" ? "bg-rose-600 text-white hover:bg-rose-700" : "border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-50"}`}>{children}</button>
+);
+const Sel = ({ value, onChange, options }: { value: string; onChange: (v: string) => void; options: readonly string[] | { v: string; l: string }[] }) => (
+  <select value={value} onChange={(e) => onChange(e.target.value)} className="rounded border border-zinc-200 bg-white px-1.5 py-1 text-[11px]">
+    {(options as (string | { v: string; l: string })[]).map((o) => typeof o === "string" ? <option key={o} value={o}>{o}</option> : <option key={o.v} value={o.v}>{o.l}</option>)}
+  </select>
+);
+function liveSeed(): number | null { try { const n = Number(localStorage.getItem("veritas.sage.previewSeed.v1")); return Number.isFinite(n) && n > 0 ? n : null; } catch { return null; } }
+function ls(k: string, d: string) { try { return localStorage.getItem(k) ?? d; } catch { return d; } }
+
+type Tab = "compose" | "catalog" | "names" | "evolve" | "realize" | "style" | "score" | "screen" | "release" | "reference";
+const TABS: { id: Tab; icon: string; label: string; stage: string }[] = [
+  { id: "compose", icon: "🎭", label: "Compose", stage: "Genre + audience" },
+  { id: "catalog", icon: "🗂", label: "Catalog", stage: "Compile 947 rows" },
+  { id: "names", icon: "📛", label: "Names", stage: "ONOMASTRATA" },
+  { id: "evolve", icon: "🧬", label: "Evolve", stage: "Morphogenesis" },
+  { id: "realize", icon: "📝", label: "Realize", stage: "Obligations + audit" },
+  { id: "style", icon: "✒", label: "Style", stage: "AUREATE-SCRIBE v4" },
+  { id: "score", icon: "✨", label: "Score", stage: "KALLOS v3 + LIVE" },
+  { id: "screen", icon: "🎬", label: "Screen", stage: "Adapt + Fountain" },
+  { id: "release", icon: "🚦", label: "Release", stage: "Gates + TEST-025" },
+  { id: "reference", icon: "📚", label: "Reference", stage: "v1–v8 tables · v2 lab" },
+];
+
+// ═══ COMPOSE ═════════════════════════════════════════════════════════════════
+export function ComposeTab({ roll, onApplied }: { roll: UnifiedRoll; onApplied: () => void }) {
+  const [req, setReq] = useState<BuildRequest>(() => loadBuildRequest() ?? roll.request);
+  const genreKeys = Object.keys(GENRE_PROFILES);
+  const set = (fn: (r: BuildRequest) => BuildRequest) => setReq((r) => fn(structuredClone(r)));
+  const weights = req.creative.mixWeights ?? req.creative.genres.map((_, i) => Math.max(0.15, 1 / (i + 1)));
+  const wsum = weights.reduce((a, b) => a + b, 0) || 1;
+  const subOptions = [...new Set(req.creative.genres.flatMap((g) => GENRE_HELM[GENRE_PROFILES[resolveGenreKey(g) ?? "literary"]?.family ?? "LITERARY"] ?? []))];
+  return (
+    <div className="space-y-2">
+      <Card tone="violet">
+        <Head icon="🎭" title="Genre Helm v3 — build request" right={roll.requestSource === "studio" ? "ACTIVE: studio contract drives the prompt" : "prompt currently uses the derived contract"} />
+        <div className="mt-1 text-[10px] text-zinc-600">Compose the human-readable request (v3 §7.1). <b>Apply</b> writes it to the fiction pipeline: the archetype set, the KALLOS weights, the lattice's target ending, and the prompt's GENRE CONTRACT block all change. Structure (POV, cast, setting) stays seed-driven.</div>
+      </Card>
+      <Card>
+        <Head icon="🎚" title="Genres & mix" right="Σ weights normalised to 1" />
+        {req.creative.genres.map((g, i) => (
+          <div key={i} className="mt-1 flex flex-wrap items-center gap-1.5">
+            <Sel value={resolveGenreKey(g) ?? "literary"} onChange={(v) => set((r) => { r.creative.genres[i] = v; return r; })} options={genreKeys} />
+            <input type="range" min={5} max={100} value={Math.round((weights[i] / wsum) * 100)} onChange={(e) => set((r) => { const w = [...weights]; w[i] = Number(e.target.value) / 100; r.creative.mixWeights = w; return r; })} className="w-40 accent-indigo-600" />
+            <span className="w-10 font-mono text-[10px] text-zinc-600">{Math.round((weights[i] / wsum) * 100)}%</span>
+            {i === 0 ? <Pill tone="indigo">dominant contract</Pill> : <Pill tone="zinc">secondary pleasures</Pill>}
+            {req.creative.genres.length > 1 && <button onClick={() => set((r) => { r.creative.genres.splice(i, 1); r.creative.mixWeights = weights.filter((_, j) => j !== i); return r; })} className="text-[10px] text-rose-600">remove</button>}
+          </div>
+        ))}
+        {req.creative.genres.length < 3 && <button onClick={() => set((r) => { r.creative.genres.push("mystery"); r.creative.mixWeights = [...weights, 0.3]; return r; })} className="mt-1 text-[10px] font-semibold text-indigo-600">+ add genre</button>}
+        <div className="mt-2 text-[10px] font-bold uppercase tracking-wider text-zinc-400">Subgenres</div>
+        <div className="mt-0.5 flex flex-wrap gap-1">
+          {subOptions.map((sg) => { const on = req.creative.subgenres.includes(sg); return <button key={sg} onClick={() => set((r) => { r.creative.subgenres = on ? r.creative.subgenres.filter((x) => x !== sg) : [...r.creative.subgenres, sg]; return r; })} className={`rounded px-1.5 py-0.5 text-[10px] ${on ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-600"}`}>{sg}</button>; })}
+        </div>
+      </Card>
+      <div className="grid gap-2 sm:grid-cols-2">
+        <Card>
+          <Head icon="👥" title="Audience" />
+          <div className="mt-1 grid grid-cols-2 gap-1">
+            <label className="text-[10px] text-zinc-500">age band<br /><Sel value={req.creative.audience.ageBand} onChange={(v) => set((r) => { r.creative.audience.ageBand = v as BuildRequest["creative"]["audience"]["ageBand"]; return r; })} options={["children", "middle_grade", "ya", "adult"]} /></label>
+            <label className="text-[10px] text-zinc-500">reading<br /><Sel value={req.creative.audience.readingComplexity} onChange={(v) => set((r) => { r.creative.audience.readingComplexity = v as BuildRequest["creative"]["audience"]["readingComplexity"]; return r; })} options={["accessible", "accessible_literary", "literary", "dense"]} /></label>
+            <label className="text-[10px] text-zinc-500">heat<br /><Sel value={req.creative.audience.heatLevel} onChange={(v) => set((r) => { r.creative.audience.heatLevel = v as BuildRequest["creative"]["audience"]["heatLevel"]; return r; })} options={["none", "low", "moderate", "high"]} /></label>
+            <label className="text-[10px] text-zinc-500">violence<br /><Sel value={req.creative.audience.violenceLevel} onChange={(v) => set((r) => { r.creative.audience.violenceLevel = v as BuildRequest["creative"]["audience"]["violenceLevel"]; return r; })} options={["none", "low", "moderate", "high"]} /></label>
+          </div>
+        </Card>
+        <Card>
+          <Head icon="🌡" title="Tone trajectory" />
+          <div className="mt-1 grid grid-cols-3 gap-1">
+            <label className="text-[10px] text-zinc-500">opening<br /><Sel value={req.creative.tone.opening} onChange={(v) => set((r) => { r.creative.tone.opening = v as BuildRequest["creative"]["tone"]["opening"]; return r; })} options={["intimate", "cool", "warm", "dread", "wry", "plain", "charged", "wonder"]} /></label>
+            <label className="text-[10px] text-zinc-500">trajectory<br /><Sel value={req.creative.tone.trajectory} onChange={(v) => set((r) => { r.creative.tone.trajectory = v as BuildRequest["creative"]["tone"]["trajectory"]; return r; })} options={["darkening", "lightening", "steady", "oscillating", "collapsing", "converging"]} /></label>
+            <label className="text-[10px] text-zinc-500">ending<br /><Sel value={req.creative.tone.ending} onChange={(v) => set((r) => { r.creative.tone.ending = v as BuildRequest["creative"]["tone"]["ending"]; return r; })} options={["bittersweet", "earned", "tragic", "open", "custodial", "triumphant", "quiet"]} /></label>
+          </div>
+          <div className="mt-1 grid grid-cols-2 gap-1">
+            <label className="text-[10px] text-zinc-500">volumes<br /><input type="number" min={1} max={13} value={req.project.length.volumes} onChange={(e) => set((r) => { r.project.length.volumes = Math.max(1, Math.min(13, Number(e.target.value) || 1)); return r; })} className="w-16 rounded border border-zinc-200 px-1.5 py-1 font-mono text-[11px]" /></label>
+            <label className="text-[10px] text-zinc-500">words / volume<br /><input type="number" min={1000} step={5000} value={req.project.length.wordsPerVolume} onChange={(e) => set((r) => { r.project.length.wordsPerVolume = Math.max(1000, Number(e.target.value) || 1000); return r; })} className="w-24 rounded border border-zinc-200 px-1.5 py-1 font-mono text-[11px]" /></label>
+          </div>
+        </Card>
+      </div>
+      <Card>
+        <Head icon="✍" title="Requests (free text, carried into the contract)" />
+        <div className="mt-1 grid gap-1 sm:grid-cols-3">
+          {(["protagonist", "setting", "relationship"] as const).map((k) => (
+            <input key={k} placeholder={k} value={req.creative.requests[k] ?? ""} onChange={(e) => set((r) => { r.creative.requests[k] = e.target.value; return r; })} className="rounded border border-zinc-200 px-2 py-1 text-[11px]" />
+          ))}
+        </div>
+      </Card>
+      <div className="flex flex-wrap items-center gap-2">
+        <Btn onClick={() => { saveBuildRequest(req); onApplied(); }}>Apply to fiction pipeline</Btn>
+        <Btn tone="ghost" onClick={() => { saveBuildRequest(null); setReq(defaultBuildRequest(roll.seed, roll.spec.family)); onApplied(); }}>Reset to derived</Btn>
+        <span className="text-[10px] text-zinc-400">contract preview: <b>{roll.contract.mix.map((m) => `${m.key} ${Math.round(m.weight * 100)}%`).join(" + ")}</b> · audience {roll.contract.audienceSegment}</span>
+      </div>
+      <Card>
+        <Head icon="📜" title="Resulting genre contract (what the prompt receives)" />
+        <KV k="Reader question" v={roll.contract.dominantReaderQuestion} />
+        <KV k="Mandatory payoffs" v={<ul className="ml-3 list-disc">{roll.contract.mandatoryPayoffs.map((x) => <li key={x}>{x}</li>)}</ul>} />
+        <KV k="Forbidden failures" v={<ul className="ml-3 list-disc">{roll.contract.forbiddenFailures.map((x) => <li key={x}>{x}</li>)}</ul>} />
+        <KV k="Ending families" v={roll.contract.defaultEndingFamilies.join(" · ")} />
+        <KV k="Tone contract" v={roll.contract.toneContract.join(" · ")} />
+        <KV k="Audience constraints" v={roll.contract.audienceConstraints.join(" · ")} />
+        <KV k="KALLOS base weights" v={<span className="font-mono text-[10px]">{KALLOS_DIMENSIONS.map((d, i) => `${d} ${roll.contract.kallosBaseWeights[i]}`).join(" · ")}</span>} />
+        {roll.contract.unresolved.length > 0 && <div className="mt-1 text-[10px] text-amber-700">Unresolved genre keys (declared, not dropped): {roll.contract.unresolved.join(", ")}</div>}
+      </Card>
+    </div>
+  );
+}
+
+// ═══ CATALOG ═════════════════════════════════════════════════════════════════
+export function CatalogTab() {
+  const m = useMemo(() => compileCatalog(), []);
+  const [q, setQ] = useState(""); const [slot, setSlot] = useState<SlotClassId | "">(""); const [sel, setSel] = useState<CompiledElement | null>(null);
+  const rows = useMemo(() => m.elements.filter((e) => (!slot || e.primarySlot === slot) && (!q || `${e.id} ${e.name} ${e.desc} ${e.semanticDomain.join(" ")}`.toLowerCase().includes(q.toLowerCase()))).slice(0, 120), [m, q, slot]);
+  const perSlot = useMemo(() => { const c: Record<string, number> = {}; for (const e of m.elements) c[e.primarySlot] = (c[e.primarySlot] ?? 0) + 1; return c; }, [m]);
+  return (
+    <div className="space-y-2">
+      <Card tone={m.releaseOk ? "emerald" : "rose"}>
+        <Head icon="🗂" title="CATALOG-COMPILER — coverage gate" right={`manifest ${m.manifestHash.slice(0, 16)}…`} />
+        <div className="mt-1 flex flex-wrap gap-1">
+          <Pill tone={m.coverage === 1 ? "emerald" : "rose"}>WIRE-COVERAGE {(m.coverage * 100).toFixed(4)}% ({m.compiledRows}/{m.canonicalRows})</Pill>
+          <Pill tone={m.duplicateIdCount === 0 ? "emerald" : "rose"}>duplicate ids {m.duplicateIdCount}</Pill>
+          <Pill tone={m.unresolvedSlotCount === 0 ? "emerald" : "rose"}>unresolved slots {m.unresolvedSlotCount}</Pill>
+          <Pill tone={m.missingRealizationFrameCount === 0 ? "emerald" : "rose"}>missing frames {m.missingRealizationFrameCount}</Pill>
+          <Pill tone={m.releaseOk ? "emerald" : "rose"}>{m.releaseOk ? "RELEASE OK" : "RELEASE BLOCKED"}</Pill>
+        </div>
+        <div className="mt-1 text-[10px] text-zinc-600">Every row is materialised as a CompiledElement with a row hash (§6.3). Rows that cannot resolve a mandatory field FAIL CLOSED and are listed — there is no "covered by default". The catalog shipped in this package is <b>{m.canonicalRows} rows</b>; that number is stated, not rounded up.</div>
+        {m.failedClosed.length > 0 && <ul className="ml-3 mt-1 list-disc text-[10px] text-rose-700">{m.failedClosed.map((f) => <li key={f.id}>{f.id}: {f.reason}</li>)}</ul>}
+      </Card>
+      <div className="flex flex-wrap gap-1">
+        <button onClick={() => setSlot("")} className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${slot === "" ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-700"}`}>all</button>
+        {SLOT_CLASS_LIST.map((s) => <button key={s} onClick={() => setSlot(s)} className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${slot === s ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-700"}`} title={SLOT_CLASS_META[s].note}>{SLOT_CLASS_META[s].name} · {perSlot[s] ?? 0}</button>)}
+      </div>
+      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="search id / name / mechanism / domain…" className="w-full rounded border border-zinc-200 px-2 py-1 text-[11px]" />
+      <div className="grid gap-2 lg:grid-cols-[1fr_1fr]">
+        <Card>
+          <div className="max-h-[420px] overflow-y-auto">
+            <table className="w-full text-[10px]"><tbody>
+              {rows.map((e) => <tr key={e.id} onClick={() => setSel(e)} className={`cursor-pointer border-b border-zinc-50 hover:bg-indigo-50 ${sel?.id === e.id ? "bg-indigo-50" : ""}`}>
+                <td className="w-20 py-0.5 font-mono text-zinc-500">{e.id}</td><td className="py-0.5 font-semibold text-zinc-800">{e.name}</td>
+                <td className="w-14 py-0.5 font-mono text-[9px] text-amber-700">{e.stakesAxes[0]}</td><td className="w-10 py-0.5 text-right font-mono text-[9px] text-zinc-400">{e.noveltyPrior.toFixed(2)}</td>
+              </tr>)}
+            </tbody></table>
+          </div>
+          <div className="mt-1 text-[9px] text-zinc-400">showing {rows.length}{rows.length === 120 ? " (first 120)" : ""} · click a row for its compiled record</div>
+        </Card>
+        <Card>
+          {sel ? (<>
+            <Head icon="🧾" title={sel.name} right={<span className="font-mono">{sel.id} · row {sel.rowHash}</span>} />
+            <div className="mt-1 text-[10px] text-zinc-600">{sel.desc}</div>
+            <div className="mt-1.5 space-y-0.5">
+              <KV k="slot" v={<>{SLOT_CLASS_META[sel.primarySlot].name} <span className="text-zinc-400">+ {sel.secondarySlots.join(", ")}</span></>} />
+              <KV k="domains" v={sel.semanticDomain.join(", ") || "—"} />
+              <KV k="world layers" v={sel.worldLayers.join(" ")} />
+              <KV k="preconditions" v={sel.preconditions.join(" · ")} />
+              <KV k="effects" v={sel.effects.join(" · ")} />
+              <KV k="conflicts (≠)" v={sel.conflictsWith.join(", ") || "—"} />
+              <KV k="enables" v={sel.enables.join(", ")} />
+              <KV k="cost / stakes" v={`${sel.costAxes.join("/")} · ${sel.stakesAxes.join("/")}`} />
+              <KV k="scene grammars" v={sel.sceneGrammars.join(", ")} />
+              <KV k="realization frames" v={sel.realizationFrames.join(", ")} />
+              <KV k="screen channels" v={sel.screenplayChannels.join(", ")} />
+              <KV k="names required" v={sel.nameRequirements.join(", ") || "—"} />
+              <KV k="genre affinity" v={<span className="font-mono text-[9px]">{Object.entries(sel.genreAffinity).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([k, v]) => `${k} ${v}`).join(" · ")}</span>} />
+              <KV k="audience" v={<span className="font-mono text-[9px]">{Object.entries(sel.audienceAffinity).map(([k, v]) => `${k} ${v.toFixed(2)}`).join(" · ")}</span>} />
+              <KV k="provenance" v={<><Pill tone={sel.provenanceStatus === "attested-clean" ? "emerald" : sel.provenanceStatus === "uncertain" ? "amber" : "zinc"}>{sel.provenanceStatus}</Pill> {sel.harnessRequired && <Pill tone="rose">HARNESS REQUIRED</Pill>}</>} />
+            </div>
+          </>) : <div className="text-[11px] text-zinc-400">Select a row to inspect its compiled record.</div>}
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+// ═══ NAMES ═══════════════════════════════════════════════════════════════════
+export function NamesTab({ roll }: { roll: UnifiedRoll }) {
+  const [profile, setProfile] = useState(roll.nameProfile);
+  const [hybridB, setHybridB] = useState("");
+  const [contact, setContact] = useState("");
+  const [counts, setCounts] = useState<Partial<Record<NameClass, number>>>({ PERSON: 6, PLACE: 4, INSTITUTION: 2, OFFICE: 1, LAW: 1, DOCUMENT: 1, ARTIFACT: 1 });
+  const [out, setOut] = useState<ReturnType<typeof generateNameSet> | null>(null);
+  const [err, setErr] = useState("");
+  const gen = useCallback(() => {
+    try {
+      setErr("");
+      if (hybridB) {
+        const hp = hybridProfile(profile, hybridB, contact);
+        const rng = new GenomeRng(sha256Hex(`onoma|${roll.morph.genome}|${hp.profileId}`)); const reg = createNameRegistry(); const names: GeneratedName[] = [];
+        for (const [cls, n] of Object.entries(counts) as [NameClass, number][]) for (let i = 0; i < (n ?? 0); i++) { const g = generateName(rng, hp, cls, reg); if (g) names.push(g); }
+        setOut({ names, registry: reg, audit: auditCastConfusionV3(names.filter((n) => n.nameClass === "PERSON"), hp) });
+      } else setOut(generateNameSet(roll.morph.genome, profile, counts));
+    } catch (e) { setErr(e instanceof Error ? e.message : String(e)); setOut(null); }
+  }, [profile, hybridB, contact, counts, roll.morph.genome]);
+  const P = NAME_PROFILES[profile];
+  return (
+    <div className="space-y-2">
+      <Card tone="violet">
+        <Head icon="📛" title="ONOMASTRATA v3 — live set for this build" right={`profile ${roll.nameProfile} · genome ${roll.morph.genome.slice(0, 10)}…`} />
+        <div className="mt-1 flex flex-wrap gap-1">{roll.nameSet.map((n) => <Pill key={n.full} tone={n.nameClass === "PERSON" ? "indigo" : n.nameClass === "PLACE" ? "teal" : "amber"} title={`${n.nameClass} · formal ${n.formal} · nickname ${n.nickname} · payload ${n.semanticPayload}`}>{n.full}</Pill>)}</div>
+        <div className="mt-1 text-[10px] text-zinc-600">These are the names in the prompt's archetype set (overlaid on the cast graph). Hover for forms. Generated by the 12-step pipeline (§10.3) and audited by all six §10.4 rules.</div>
+      </Card>
+      <Card>
+        <Head icon="🧪" title="Name lab" right="deterministic from this build's genome" />
+        <div className="mt-1 flex flex-wrap items-center gap-1.5">
+          <label className="text-[10px] text-zinc-500">profile <Sel value={profile} onChange={setProfile} options={Object.keys(NAME_PROFILES)} /></label>
+          <label className="text-[10px] text-zinc-500">hybrid with <Sel value={hybridB} onChange={setHybridB} options={[{ v: "", l: "— none —" }, ...Object.keys(NAME_PROFILES).filter((k) => k !== profile).map((k) => ({ v: k, l: k }))]} /></label>
+          {hybridB && <input value={contact} onChange={(e) => setContact(e.target.value)} placeholder="declared historical contact event (mandatory, §10.5)" className="w-72 rounded border border-amber-300 px-2 py-1 text-[11px]" />}
+          <Btn onClick={gen}>Generate</Btn>
+        </div>
+        <div className="mt-1 flex flex-wrap gap-1">{(Object.keys(counts) as NameClass[]).map((c) => <label key={c} className="text-[10px] text-zinc-500">{c} <input type="number" min={0} max={12} value={counts[c]} onChange={(e) => setCounts({ ...counts, [c]: Number(e.target.value) || 0 })} className="w-11 rounded border border-zinc-200 px-1 py-0.5 font-mono text-[10px]" /></label>)}</div>
+        {err && <div className="mt-1 rounded border border-rose-200 bg-rose-50 p-1.5 text-[10px] text-rose-700">{err}</div>}
+        {P && <div className="mt-1 text-[9px] text-zinc-400">{P.profileId}: order {P.nameOrder} · stress {P.stress} · lineage {P.lineage} "{P.lineageAffix}" · harmony {P.vowelHarmony ? "yes" : "no"} · taboo {P.tabooSequences.join(",")} · templates {P.syllableTemplates.map(([t]) => t).join("/")}</div>}
+      </Card>
+      {out && (<>
+        <Card>
+          <Head icon="🧾" title="Generated" right={`${out.names.length} reserved · ${out.registry.rejections.length} rejected`} />
+          <table className="mt-1 w-full text-[10px]"><thead><tr className="text-left text-[9px] uppercase text-zinc-400"><th>class</th><th>full (CLDR order)</th><th>formal</th><th>nickname</th><th>syl:stress</th><th>skeleton</th><th>phonetic</th><th>payload</th></tr></thead><tbody>
+            {out.names.map((n) => <tr key={n.full} className="border-b border-zinc-50"><td className="py-0.5 font-mono text-zinc-400">{n.nameClass}</td><td className="py-0.5 font-semibold text-zinc-800">{n.full}</td><td className="py-0.5">{n.formal}</td><td className="py-0.5">{n.nickname}</td><td className="py-0.5 font-mono">{n.syllables}:{n.stressOn}</td><td className="py-0.5 font-mono text-zinc-400">{n.skeleton}</td><td className="py-0.5 font-mono text-zinc-400">{n.phonetic}</td><td className="py-0.5 text-zinc-500">{n.semanticPayload}</td></tr>)}
+          </tbody></table>
+        </Card>
+        <div className="grid gap-2 sm:grid-cols-2">
+          <Card tone={out.audit.length ? "amber" : "emerald"}>
+            <Head icon="🔍" title="§10.4 cast-confusion audit" right={out.audit.length ? `${out.audit.length} finding(s)` : "clean"} />
+            {out.audit.length ? <ul className="ml-3 mt-1 list-disc text-[10px] text-amber-800">{out.audit.map((f, i) => <li key={i}><b>{f.rule}</b>: {f.a} ↔ {f.b} — {f.detail}</li>)}</ul> : <div className="mt-1 text-[10px] text-emerald-800">first-letter ≤2 · edit distance ≥0.35 · phonetic · syllable+stress ≤3 · skeleton · nickname — all pass.</div>}
+          </Card>
+          <Card>
+            <Head icon="🗑" title="Registry rejections (why candidates were refused)" right={`${out.registry.rejections.length}`} />
+            <div className="mt-1 max-h-32 overflow-y-auto text-[10px] text-zinc-500">{out.registry.rejections.slice(0, 40).map((r, i) => <div key={i}><span className="font-mono text-zinc-400">{r.candidate}</span> — {r.reason}</div>)}</div>
+          </Card>
+        </div>
+      </>)}
+    </div>
+  );
+}
+
+// ═══ EVOLVE ══════════════════════════════════════════════════════════════════
+export function EvolveTab({ roll }: { roll: UnifiedRoll }) {
+  const [mode, setMode] = useState<LengthMode>(roll.morph.lengthMode);
+  const [budget, setBudget] = useState(roll.morph.budgetTicks);
+  const [lab, setLab] = useState<UnifiedRoll["morph"] | null>(null);
+  const run = lab ?? roll.morph;
+  const isLive = !lab;
+  const byLattice = useMemo(() => { const c: Record<string, number> = {}; for (const d of run.deltas) c[`${d.from}→${d.to}`] = (c[`${d.from}→${d.to}`] ?? 0) + 1; return c; }, [run]);
+  return (
+    <div className="space-y-2">
+      <Card tone={isLive ? "emerald" : "amber"}>
+        <Head icon="🧬" title="MORPHOGENESIS-LATTICE v2" right={isLive ? "● LIVE — this run is in the prompt" : "○ LAB — not sent to the model"} />
+        <div className="mt-1 flex flex-wrap items-center gap-1.5">
+          <label className="text-[10px] text-zinc-500">length mode <Sel value={mode} onChange={(v) => setMode(v as LengthMode)} options={["flash", "short", "novel", "saga", "serial"]} /></label>
+          <label className="text-[10px] text-zinc-500">tick budget <input type="number" min={6} max={120} value={budget} onChange={(e) => setBudget(Math.max(6, Math.min(120, Number(e.target.value) || 6)))} className="w-16 rounded border border-zinc-200 px-1.5 py-1 font-mono text-[11px]" /></label>
+          <Btn onClick={() => setLab(runMorphogenesis({ userSeed: roll.seed, contract: roll.contract, spec: roll.spec, lengthMode: mode, budget }))}>Evolve (lab)</Btn>
+          {lab && <Btn tone="ghost" onClick={() => setLab(null)}>back to live run</Btn>}
+        </div>
+        <div className="mt-1.5 flex flex-wrap gap-1">
+          <Pill tone="violet">{run.attractor}</Pill><Pill tone={run.attractorInTarget ? "emerald" : "amber"}>{run.attractorInTarget ? "in contract target" : `outside target [${run.targetAttractors.join(",")}]`}</Pill>
+          <Pill tone="indigo">→ {run.endingFamily}</Pill><Pill tone="zinc">{run.ticks.length} ticks</Pill><Pill tone="zinc">{run.volumes.length} vol</Pill><Pill tone="zinc">{run.promises.length} promises</Pill>
+        </div>
+        <div className="mt-0.5 font-mono text-[9px] text-zinc-400">genome {run.genome}</div>
+        {run.compressionAdvice.length > 0 && <ul className="ml-3 mt-1 list-disc text-[10px] text-amber-800">{run.compressionAdvice.map((a) => <li key={a}>{a}</li>)}</ul>}
+      </Card>
+      <Card>
+        <Head icon="📈" title="Population · intensity per tick" right={`births ${run.stats.births} · deaths ${run.stats.deaths} · distinct elements ${run.stats.distinctElements} · slots ${run.stats.slotsExercised}/14`} />
+        <div className="mt-1 flex items-end gap-[2px]" style={{ height: 48 }}>
+          {run.ticks.map((t) => { const mx = Math.max(...run.ticks.map((x) => x.population), 1); return <div key={t.t} className="flex-1 rounded-t" title={`t=${t.t} live ${t.activeCount} · +${t.births.length}/−${t.deaths.length} · intensity ${t.intensity} · checkpoint ${run.checkpoints[t.t]?.hash}`} style={{ height: Math.max(2, Math.round((t.activeCount / mx) * 44)), backgroundColor: `hsl(${Math.round((t.intensity / 100) * 120)},60%,55%)` }} />; })}
+        </div>
+        <div className="mt-1 flex flex-wrap gap-1">{run.chapters.map((c) => <Pill key={c.index} tone="zinc">{c.volume > 1 ? `v${c.volume}·` : ""}{c.index}:{c.dominantStakes ?? "—"}</Pill>)}</div>
+      </Card>
+      <div className="grid gap-2 sm:grid-cols-2">
+        <Card>
+          <Head icon="🔀" title="Typed deltas between lattices" right={`${run.deltas.length}`} />
+          <div className="mt-1 space-y-0.5">{Object.entries(byLattice).sort((a, b) => b[1] - a[1]).map(([k, n]) => <Bar key={k} v={n / Math.max(1, run.deltas.length)} label={k} note={`${n} deltas`} />)}</div>
+          <div className="mt-1 max-h-28 overflow-y-auto text-[9.5px] text-zinc-500">{run.deltas.slice(0, 40).map((d, i) => <div key={i}><span className="font-mono text-zinc-400">t{d.tick}</span> {d.from}→{d.to} <b>{d.kind}</b> {d.detail}</div>)}</div>
+        </Card>
+        <Card>
+          <Head icon="🎯" title="Promises · volumes · masks" />
+          <div className="mt-1 flex flex-wrap gap-1">{run.promises.map((p) => <Pill key={p.id} tone={p.state === "PAID" ? "emerald" : p.state === "RESIDUALIZED" ? "violet" : p.state === "EXPIRED" ? "rose" : p.state === "TRANSFERRED" ? "sky" : "amber"} title={`${p.scope} · opened t${p.openedTick}${p.closedTick != null ? ` · closed t${p.closedTick}` : ""}`}>{p.id} {p.state}</Pill>)}</div>
+          <div className="mt-1.5 space-y-0.5">{run.volumes.map((v) => <div key={v.index} className="text-[10px] text-zinc-600">vol {v.index}: t{v.startTick}–t{v.endTick} · local closure {v.localClosure ? "✓" : "✗"} · {v.seriesDelta}</div>)}</div>
+          <div className="mt-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400">Audit masks (births zeroed before they happened)</div>
+          <div className="text-[10px] text-zinc-500">{run.masked.length ? Object.entries(run.masked.reduce<Record<string, number>>((a, x) => { a[x.rule] = (a[x.rule] ?? 0) + 1; return a; }, {})).map(([r, n]) => `${r} ×${n}`).join(" · ") : "none needed on this run"}</div>
+        </Card>
+      </div>
+      <Card>
+        <Head icon="🧾" title="Checkpoints (content-addressed, TEST-021)" right={`${run.checkpoints.length}`} />
+        <div className="mt-1 flex flex-wrap gap-1 font-mono text-[9px] text-zinc-400">{run.checkpoints.map((c) => <span key={c.tick} title={`t${c.tick} pop ${c.population} open ${c.promisesOpen}`}>{c.hash}</span>)}</div>
+      </Card>
+    </div>
+  );
+}
+
+// ═══ REALIZE ═════════════════════════════════════════════════════════════════
+export function RealizeTab({ roll }: { roll: UnifiedRoll }) {
+  const [text, setText] = useState(""); const [audit, setAudit] = useState<ManuscriptAudit | null>(null);
+  const budget = roll.blueprint.chapters.reduce((a, c) => a + c.targetWords, 0);
+  const req = roll.obligations.filter((o) => o.required);
+  return (
+    <div className="space-y-2">
+      <Card tone="violet">
+        <Head icon="📝" title="PROSE-COMPILER — honest scope" />
+        <div className="mt-1 text-[10px] text-zinc-600"><b>CONTROLLED_MODE</b> is implemented: a feature-unification grammar that guarantees agreement, articles and tense <i>within its restricted grammar</i> (v3 §12.5). <b>LITERARY_MODE</b> is delegated to the host LLM via the unified prompt and is <i>not</i> claimed as deterministic. The <b>realization obligation ledger</b> and the §12.3 release counters are real and run against any manuscript you paste.</div>
+      </Card>
+      <Card>
+        <Head icon="🧱" title="Controlled-mode skeleton (certified by construction)" />
+        <div className="mt-1 rounded bg-zinc-50 p-2 font-mono text-[10px] text-zinc-700">{roll.controlledSample}</div>
+      </Card>
+      <Card>
+        <Head icon="📋" title="Realization obligations" right={`${roll.obligations.length} total · ${req.length} required`} />
+        <div className="mt-1 max-h-48 overflow-y-auto"><table className="w-full text-[10px]"><tbody>
+          {roll.obligations.slice(0, 80).map((o) => <tr key={o.propositionId} className="border-b border-zinc-50"><td className="w-20 py-0.5 font-mono text-zinc-400">{o.propositionId}</td><td className="w-16 py-0.5"><Pill tone={o.required ? "rose" : "zinc"}>{o.required ? "required" : "optional"}</Pill></td><td className="py-0.5 text-zinc-700">{o.text}</td><td className="w-40 py-0.5 font-mono text-[9px] text-zinc-400">{o.detectors.slice(0, 3).join(" ")}</td></tr>)}
+        </tbody></table></div>
+      </Card>
+      <Card>
+        <Head icon="🔬" title="Audit a manuscript against this plan" right={`word budget ${budget.toLocaleString()}`} />
+        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={5} placeholder="Paste the generated manuscript (## chapter headings expected)…" className="mt-1 w-full rounded border border-zinc-200 p-2 font-mono text-[10px]" />
+        <div className="mt-1 flex gap-2"><Btn onClick={() => setAudit(auditManuscript(text, roll.morph, roll.obligations, budget))} disabled={!text.trim()}>Run §12.3 audit</Btn></div>
+        {audit && (<div className="mt-2">
+          <div className="flex flex-wrap gap-1">
+            {([["required_unrealized", audit.requiredUnrealized], ["template_tokens", audit.unresolvedTemplateToken], ["placeholders", audit.placeholderToken], ["truncated", audit.truncatedSentence], ["unclosed_quote", audit.unclosedQuote], ["dup_paragraph", audit.duplicateParagraphHash], ["missing_chapter", audit.missingChapter], ["budget_shortfall", audit.wordBudgetShortfall]] as const).map(([k, v]) => <Pill key={k} tone={v === 0 ? "emerald" : "rose"}>{k} = {v}</Pill>)}
+            <Pill tone={audit.releaseOk ? "emerald" : "rose"}>{audit.releaseOk ? "RELEASE OK" : "RELEASE BLOCKED"}</Pill>
+          </div>
+          <div className="mt-1 text-[10px] text-zinc-500">{audit.wordCount.toLocaleString()} words · {audit.chapterHeadingsFound}/{audit.chapterHeadingsExpected} chapter headings · optional unrealized {audit.optionalUnrealized}</div>
+          {audit.remedies.length > 0 && <><div className="mt-1 text-[10px] font-bold uppercase tracking-wider text-zinc-400">§12.4 remedies (no padding)</div><ul className="ml-3 list-disc text-[10px] text-zinc-600">{audit.remedies.map((r) => <li key={r}>{r}</li>)}</ul></>}
+          <div className="mt-1 max-h-40 overflow-y-auto text-[9.5px]">{audit.obligations.filter((o) => o.status === "UNREALIZED" && o.required).slice(0, 30).map((o) => <div key={o.propositionId} className="text-rose-700">✗ {o.propositionId} {o.text}</div>)}{audit.obligations.filter((o) => o.status === "EMITTED").slice(0, 10).map((o) => <div key={o.propositionId} className="text-emerald-700">✓ {o.propositionId} — "…{o.emittedSpan}…"</div>)}</div>
+        </div>)}
+      </Card>
+    </div>
+  );
+}
+
+// ═══ SCORE ═══════════════════════════════════════════════════════════════════
+export function ScoreTab({ roll }: { roll: UnifiedRoll }) {
+  const k = roll.kallosV3;
+  const [text, setText] = useState(""); const [kt, setKt] = useState<typeof k | null>(null);
+  const K = kt ?? k;
+  const [store, setStore] = useState(() => loadLiveStore());
+  const key = profileKeyFor({ genre: roll.contract.dominant.key, ageBand: roll.request.creative.audience.ageBand });
+  const prof: AudienceProfile = store.profiles[key] ?? { profileKey: key, weights: [], observations: 0, holdoutError: null, lastUpdate: null, history: [] };
+  const [obs, setObs] = useState<Omit<AudienceObservation, "featureScores" | "timestamp" | "audienceSegment" | "genre" | "workId">>({ explicitRating: 0.7, completionFraction: 0.8, chapterReturnRate: 0.6, rereadRate: 0.2, recommendationRate: 0.5, endingSatisfaction: 0.7, emotionalResonance: 0.7 });
+  const [report, setReport] = useState<string[]>([]);
+  const mine = store.observations.filter((o) => o.genre === roll.contract.dominant.key);
+  const addObs = () => { const o: AudienceObservation = { ...obs, featureScores: K.dims.map((d) => d.score), timestamp: Date.now(), audienceSegment: roll.contract.audienceSegment, genre: roll.contract.dominant.key, workId: roll.buildId.slice(0, 12) }; const s = { ...store, observations: [...store.observations, o] }; saveLiveStore(s); setStore(s); };
+  const runUpdate = () => { const r = updateAudienceProfile(prof, roll.contract.kallosBaseWeights, mine); const s = { ...store, profiles: { ...store.profiles, [key]: r.profile } }; saveLiveStore(s); setStore(s); setReport(r.report); };
+  return (
+    <div className="space-y-2">
+      <Card tone={K.release === "OK" ? "emerald" : "rose"}>
+        <Head icon="✨" title={`KALLOS v3 — ${K.scale} ${kt ? "(manuscript)" : "(plan-level)"}`} right={`profile ${roll.contract.dominant.kallosKey}`} />
+        <div className="mt-1 flex items-baseline gap-2"><span className="text-2xl font-bold text-zinc-900">{K.composite.toFixed(1)}</span><span className="text-[10px] text-zinc-500">/100 · raw {K.compositeRaw} · regularizers {K.regularizerDelta >= 0 ? "+" : ""}{K.regularizerDelta} (cap ±3)</span><Pill tone={K.release === "OK" ? "emerald" : "rose"}>RELEASE {K.release}</Pill></div>
+        <div className="mt-1 flex flex-wrap gap-1">{K.gates.map((g) => <Pill key={g.id} tone={g.pass ? "emerald" : "rose"} title={g.detail}>{g.id} {g.pass ? "pass" : "FAIL"}</Pill>)}</div>
+        <div className="mt-1 text-[10px] text-zinc-500">Hard gates: any failure ⇒ KALLOS = 0 and release BLOCKED (§9.3). Weakest measurable dimension: <b>{K.weakest?.label}</b> ({K.weakest?.score}).</div>
+      </Card>
+      <Card>
+        <Head icon="📊" title="12 dimensions" right="basis: measured · proxy · unavailable" />
+        <div className="mt-1 space-y-1">{K.dims.map((d) => <Bar key={d.key} v={d.score} label={`${d.key} · ${d.label}`} note={`w ${d.weight} · ${d.basis.toUpperCase()} · ${d.detail}`} />)}</div>
+        <div className="mt-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400">§9.5 regularizers (capped)</div>
+        <div className="flex flex-wrap gap-1">{K.regularizers.map((r) => <Pill key={r.name} tone="zinc" title={r.cap}>{r.name} {r.applied >= 0 ? "+" : ""}{r.applied}</Pill>)}</div>
+        <div className="mt-1 text-[9px] italic text-zinc-400">{K.caveat}</div>
+      </Card>
+      <Card>
+        <Head icon="📄" title="Score a manuscript (K3)" />
+        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} placeholder="Paste manuscript text (≥200 words) to switch TRN/EMO/PRO from proxy to measured…" className="mt-1 w-full rounded border border-zinc-200 p-2 font-mono text-[10px]" />
+        <div className="mt-1 flex gap-2"><Btn onClick={() => setKt(evaluateKallosV3({ run: roll.morph, contract: roll.contract, text, controlledSample: roll.controlledSample, scale: "K3" }))} disabled={text.trim().split(/\s+/).length < 200}>Evaluate K3</Btn>{kt && <Btn tone="ghost" onClick={() => setKt(null)}>back to plan-level</Btn>}</div>
+      </Card>
+      <Card tone="violet">
+        <Head icon="📡" title="KALLOS-LIVE — local audience calibration" right={`profile ${key}`} />
+        <div className="mt-1 text-[10px] text-zinc-600">Observations are stored locally only. Adaptation needs ≥50 observations, moves any weight ≤0.02 per update, keeps hard human dimensions ≥0.03, caps any weight at 0.35, and is promoted only if holdout error improves (§9.7). No demographic inference — segment is the declared age band.</div>
+        <div className="mt-1.5 grid gap-1 sm:grid-cols-4">
+          {(Object.keys(obs) as (keyof typeof obs)[]).map((kk) => <label key={kk} className="text-[9.5px] text-zinc-500">{kk}<input type="range" min={0} max={1} step={0.05} value={obs[kk] ?? 0} onChange={(e) => setObs({ ...obs, [kk]: Number(e.target.value) })} className="w-full accent-violet-600" /><span className="font-mono">{(obs[kk] ?? 0).toFixed(2)}</span></label>)}
+        </div>
+        <div className="mt-1 flex flex-wrap items-center gap-2"><Btn onClick={addObs}>Record observation for this build</Btn><Btn tone="emerald" onClick={runUpdate} disabled={mine.length === 0}>Run profile update</Btn><span className="text-[10px] text-zinc-500">{mine.length} observation(s) for {roll.contract.dominant.key} · profile has {prof.observations} · last {prof.lastUpdate ? new Date(prof.lastUpdate).toISOString().slice(0, 10) : "never"}</span></div>
+        {report.length > 0 && <div className="mt-1 rounded bg-white p-1.5 font-mono text-[10px] text-zinc-700">{report.join("\n")}</div>}
+        {prof.weights.length > 0 && <div className="mt-1 flex flex-wrap gap-1">{KALLOS_DIMENSIONS.map((d, i) => <Pill key={d} tone="violet" title={KALLOS_V3_LABELS[d]}>{d} {(prof.weights[i] * 100).toFixed(1)}%</Pill>)}</div>}
+      </Card>
+    </div>
+  );
+}
+
+// ═══ SCREEN ══════════════════════════════════════════════════════════════════
+export function ScreenTab({ roll }: { roll: UnifiedRoll }) {
+  const [mode, setMode] = useState<AdaptationMode>("FAITHFUL");
+  const [sel, setSel] = useState(0);
+  const scenes = useMemo(() => adaptToScreen(roll.morph, roll.nameSet, mode), [roll, mode]);
+  const fountain = useMemo(() => toFountain(scenes, roll.blueprint.titleHint), [scenes, roll.blueprint.titleHint]);
+  const audits = useMemo(() => runScreenAudits(scenes, fountain, roll.morph, mode), [scenes, fountain, roll.morph, mode]);
+  const s = scenes[Math.min(sel, scenes.length - 1)];
+  return (
+    <div className="space-y-2">
+      <Card tone="amber">
+        <Head icon="○" title="Downstream artifact — does NOT affect the chapter prompt" />
+        <div className="mt-1 text-[10px] text-amber-900">
+          SAGA-SCREEN adapts a <b>finished</b> plan into a screenplay. It is deliberately <b>not</b> part of the
+          fiction prompt: the model is writing prose, not a script. Everything below is real and executable
+          (Fountain export + SCR-001..010 audits all run), but changing it will not change the story the
+          model writes. It is listed as <b>inactive</b> in the pipeline contributions for that reason.
+        </div>
+      </Card>
+      <Card tone="violet">
+        <Head icon="🎬" title="SAGA-SCREEN — adaptation" right={`${scenes.length} scenes · ${new Set(scenes.map((x) => x.episode)).size} episode(s)`} />
+        <div className="mt-1 flex flex-wrap items-center gap-1">{(["FAITHFUL", "CINEMATIC", "LIMITED_SERIES", "FEATURE", "ANIMATION"] as AdaptationMode[]).map((m) => <button key={m} onClick={() => { setMode(m); setSel(0); }} className={`rounded px-2 py-1 text-[11px] font-semibold ${mode === m ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-600"}`}>{m}</button>)}</div>
+        <div className="mt-1 flex flex-wrap gap-1">{audits.map((a) => <Pill key={a.id} tone={a.pass ? "emerald" : "rose"} title={a.detail}>{a.id} {a.name}</Pill>)}</div>
+      </Card>
+      <div className="grid gap-2 lg:grid-cols-[1fr_1.2fr]">
+        <Card>
+          <Head icon="🎞" title="Scenes" />
+          <div className="mt-1 max-h-[380px] overflow-y-auto">{scenes.map((x, i) => <button key={x.sceneId} onClick={() => setSel(i)} className={`block w-full border-b border-zinc-50 px-1 py-0.5 text-left text-[10px] hover:bg-indigo-50 ${i === sel ? "bg-indigo-50" : ""}`}><span className="font-mono text-zinc-400">{x.sceneId}</span> <b>{x.slugline}</b><div className="text-zinc-500">{x.purpose}</div></button>)}</div>
+        </Card>
+        <div className="space-y-2">
+          {s && <Card>
+            <Head icon="🧾" title={s.sceneId} right={s.slugline} />
+            <KV k="purpose" v={s.purpose} /><KV k="visible goal" v={s.visibleGoal} /><KV k="opposition" v={s.visibleOpposition} /><KV k="blocking" v={s.blocking.join(" · ")} />
+            <KV k="interiority →" v={s.interiorityMap.length ? s.interiorityMap.map((m) => `${m.proposition} ⇒ ${m.channel}`).join(" · ") : "none in this scene"} />
+            <KV k="props / wardrobe" v={`${s.props.join(", ")} · ${s.wardrobeContinuity.join(", ")}`} /><KV k="source deltas" v={s.sourceStateDeltas.join(" · ") || "—"} />
+            {s.adaptationLoss.length > 0 && <KV k="approved loss" v={s.adaptationLoss.map((l) => `${l.proposition} (${l.approvedReason})`).join(" · ")} />}
+            <details className="mt-1"><summary className="cursor-pointer text-[10px] font-semibold text-indigo-600">§13.5 production prompt pack (never in the spec script)</summary><pre className="mt-1 max-h-48 overflow-auto rounded bg-zinc-50 p-1.5 font-mono text-[9px] text-zinc-700">{JSON.stringify(screenplayPromptPack(s), null, 2)}</pre></details>
+          </Card>}
+          <Card>
+            <Head icon="📜" title="Fountain spec script" right={`${fountain.length.toLocaleString()} chars`} />
+            <pre className="mt-1 max-h-64 overflow-auto whitespace-pre-wrap rounded bg-zinc-50 p-2 font-mono text-[9.5px] text-zinc-800">{fountain.slice(0, 6000)}{fountain.length > 6000 ? "\n…" : ""}</pre>
+            <Btn tone="ghost" onClick={() => { try { navigator.clipboard.writeText(fountain); } catch { /* clipboard optional */ } }}>Copy .fountain</Btn>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ═══ RELEASE ═════════════════════════════════════════════════════════════════
+export function ReleaseTab({ roll }: { roll: UnifiedRoll }) {
+  const [withScreen, setWithScreen] = useState(true);
+  const result = useMemo(() => {
+    const screen = withScreen ? (() => { const scenes = adaptToScreen(roll.morph, roll.nameSet, "FAITHFUL"); const fountain = toFountain(scenes, roll.blueprint.titleHint); return { mode: "FAITHFUL" as AdaptationMode, scenes, fountain, audits: runScreenAudits(scenes, fountain, roll.morph, "FAITHFUL") }; })() : undefined;
+    const partial = { buildId: roll.buildId, seedGenome: roll.morph.genome, catalogManifestHash: compileCatalog().manifestHash, rulesVersion: "", genreProfileHash: "", audienceProfileHash: "", grammarPackHash: "", request: roll.request, contract: roll.contract, morph: roll.morph, names: roll.nameSet, kallos: roll.kallosV3, screen, obligations: roll.obligations, controlledSample: roll.controlledSample };
+    const tests = runProductionTests(partial, () => runMorphogenesis({ userSeed: roll.seed, contract: roll.contract, spec: roll.spec, lengthMode: roll.morph.lengthMode, budget: roll.morph.budgetTicks, targetWords: roll.blueprint.chapters.reduce((a, c) => a + c.targetWords, 0) }), roll.contract.audienceSegment);
+    const gates = runReleaseGates({ ...partial, tests });
+    return { tests, ...gates };
+  }, [roll, withScreen]);
+  const counts = result.tests.reduce<Record<string, number>>((a, t) => { a[t.status] = (a[t.status] ?? 0) + 1; return a; }, {});
+  return (
+    <div className="space-y-2">
+      <Card tone={result.releaseOk ? "emerald" : "amber"}>
+        <Head icon="🚦" title="BUILD-KERNEL — release" right={<label className="flex items-center gap-1"><input type="checkbox" checked={withScreen} onChange={(e) => setWithScreen(e.target.checked)} />include screen audits</label>} />
+        <div className="mt-1 font-mono text-[10px] text-zinc-600">BuildID <b>{roll.buildId}</b></div>
+        <div className="mt-0.5 font-mono text-[9px] text-zinc-400">SeedGenome {roll.morph.genome} · catalog manifest {compileCatalog().manifestHash.slice(0, 16)}…</div>
+        <div className="mt-1 flex flex-wrap gap-1">{result.gates.map((g) => <Pill key={g.id} tone={g.pass ? "emerald" : "rose"} title={g.detail}>{g.pass ? "✓" : "✗"} {g.id}</Pill>)}</div>
+        <div className="mt-1 text-[11px] font-bold">{result.releaseOk ? "RELEASE OK — all admissibility gates pass (§2.1)" : "RELEASE BLOCKED — see failing gate(s)"}</div>
+      </Card>
+      <Card>
+        <Head icon="🧪" title="TEST-001 … TEST-025" right={Object.entries(counts).map(([k, v]) => `${k} ${v}`).join(" · ")} />
+        <table className="mt-1 w-full text-[10px]"><tbody>{result.tests.map((t) => <tr key={t.id} className="border-b border-zinc-50 align-top"><td className="w-16 py-0.5 font-mono text-zinc-400">{t.id}</td><td className="w-16 py-0.5"><Pill tone={t.status === "PASS" ? "emerald" : t.status === "FAIL" ? "rose" : "zinc"}>{t.status === "NOT_EXECUTABLE" ? "N/E" : t.status}</Pill></td><td className="w-40 py-0.5 font-semibold text-zinc-700">{t.name}</td><td className="py-0.5 text-zinc-500">{t.detail}</td></tr>)}</tbody></table>
+        <div className="mt-1 text-[9px] italic text-zinc-400">N/E = not executable in this environment; the blocker is stated, never hidden.</div>
+      </Card>
+      <Card>
+        <Head icon="⚖" title="§14 competitor matrix (honest)" />
+        <table className="mt-1 w-full text-[10px]"><tbody>{SAGA_V3_COMPETITOR_MATRIX.map((c) => <tr key={c.system} className="border-b border-zinc-50 align-top"><td className="w-32 py-0.5 font-semibold text-zinc-800">{c.system}</td><td className="py-0.5 text-emerald-800">{c.advantages}</td><td className="py-0.5 text-zinc-500">{c.limitations}</td></tr>)}</tbody></table>
+      </Card>
+    </div>
+  );
+}
+
+// ═══ STUDIO ══════════════════════════════════════════════════════════════════
+export function SagaOsPanel() {
+  const fictionActive = useFictionActive();
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState<Tab>("compose");
+  const [tick, setTick] = useState(0);
+  const [labSeed, setLabSeed] = useState<number | null>(null);
+  useEffect(() => { const t = window.setInterval(() => setTick((n) => n + 1), 1500); return () => window.clearInterval(t); }, []);
+  const live = liveSeed();
+  const seed = labSeed ?? live ?? 12345;
+  const roll = useMemo(() => {
+    try {
+      const bp = rollSage({ seed, cadenceSeed: Number(ls("veritas.sage.cadenceSeed.v1", "")) || seed, lengthId: ls("veritas.sage.scale.v2", "novel") as never, chapters: Number(ls("veritas.sage.chapters.v2", "")) || undefined, wordsPerChapter: Number(ls("veritas.sage.wordsPerChapter.v2", "")) || undefined, forceMacroId: ls("veritas.sage.macro.v2", "") || undefined });
+      return unifiedRoll({ seed, blueprint: bp, realityLevel: loadRealityLevel() });
+    } catch { return null; }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [seed, tick]);
+  const stages = roll ? [
+    { id: "compose" as Tab, ok: true, label: `${roll.contract.dominant.key}${roll.contract.secondary.length ? "+" : ""}` },
+    { id: "catalog" as Tab, ok: compileCatalog().releaseOk, label: `${compileCatalog().compiledRows} rows` },
+    { id: "names" as Tab, ok: roll.nameSet.length > 0, label: `${roll.nameSet.length} names` },
+    { id: "evolve" as Tab, ok: roll.morph.attractor !== "BUDGET-TRUNCATED", label: roll.morph.attractor },
+    { id: "realize" as Tab, ok: roll.obligations.length > 0, label: `${roll.obligations.length} obligations` },
+    { id: "style" as Tab, ok: true, label: roll.styleGenome.proseMode },
+    { id: "score" as Tab, ok: roll.kallosV3.release === "OK", label: `KALLOS ${roll.kallosV3.composite}` },
+    { id: "screen" as Tab, ok: false, label: "not in prompt" },
+    { id: "release" as Tab, ok: roll.kallosV3.release === "OK" && compileCatalog().releaseOk, label: roll.buildId.slice(0, 8) },
+  ] : [];
+  return (
+    <section className={`rounded-xl border ${fictionActive ? "border-zinc-200 bg-zinc-50/80" : "border-zinc-200 bg-zinc-100 opacity-60"} transition-colors`}>
+      <button onClick={() => setOpen(!open)} className="flex w-full items-center justify-between px-4 py-2.5 text-left">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-base">🏛</span><span className="text-xs font-bold uppercase tracking-wider text-zinc-700">SAGA-OS Studio</span>
+          <span className="rounded bg-amber-100 px-1.5 py-0.5 font-mono text-[10px] text-amber-800">v3 · SYSTEM v14</span>
+          {!fictionActive && <span className="rounded bg-zinc-300 px-1.5 py-0.5 font-mono text-[10px] text-zinc-600">○ INACTIVE — switch to Fiction Engine to activate</span>}
+          {roll && fictionActive && <><Pill tone={labSeed == null && live != null ? "emerald" : "amber"}>{labSeed == null && live != null ? "● LIVE" : "○ LAB"} seed {seed}</Pill><Pill tone={roll.kallosV3.release === "OK" ? "emerald" : "rose"}>KALLOS {roll.kallosV3.composite} · {roll.kallosV3.release}</Pill><Pill tone="zinc">{roll.morph.attractor} → {roll.morph.endingFamily}</Pill></>}
+        </div>
+        <span className="text-zinc-400">{open ? "▾" : "▸"}</span>
+      </button>
+      {open && (
+        <div className={`border-t border-zinc-200 px-4 py-3 ${fictionActive ? "" : "pointer-events-none opacity-60"}`}>
+          {!fictionActive && (
+            <div className="mb-2 rounded border border-zinc-300 bg-white p-2 text-[11px] text-zinc-600">
+              This studio configures the fiction pipeline. It is <b>inactive</b> while Live Research is selected — its genre contract, lattice verdict, names and KALLOS gates do not affect the prompt. Toggle to <b>📖 Fiction Engine</b> in the header to activate it. All controls below are disabled in this state.
+            </div>
+          )}
+          {roll ? (<>
+            <div className="mb-2 flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-white p-1.5">
+              {stages.map((s, i) => <button key={s.id} onClick={() => setTab(s.id)} className={`flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] ${tab === s.id ? "bg-indigo-600 text-white" : "hover:bg-zinc-100"}`}><span className={tab === s.id ? "" : s.ok ? "text-emerald-600" : "text-amber-600"}>{s.ok ? "●" : "!"}</span><span className="font-semibold">{TABS[i].label}</span><span className={tab === s.id ? "opacity-80" : "text-zinc-400"}>{s.label}</span>{i < stages.length - 1 && <span className="ml-1 text-zinc-300">→</span>}</button>)}
+              <span className="ml-auto flex items-center gap-1 text-[10px] text-zinc-400">lab seed <input type="number" value={labSeed ?? ""} placeholder={String(live ?? "")} onChange={(e) => setLabSeed(e.target.value ? Number(e.target.value) : null)} className="w-24 rounded border border-zinc-200 px-1 py-0.5 font-mono text-[10px]" />{labSeed != null && <button onClick={() => setLabSeed(null)} className="text-indigo-600">sync live</button>}</span>
+            </div>
+            <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"}`} title={t.stage}>{t.icon} {t.label}</button>)}</div>
+            {tab === "compose" && <ComposeTab roll={roll} onApplied={() => setTick((n) => n + 1)} />}
+            {tab === "catalog" && <CatalogTab />}
+            {tab === "names" && <NamesTab roll={roll} />}
+            {tab === "evolve" && <EvolveTab roll={roll} />}
+            {tab === "realize" && <RealizeTab roll={roll} />}
+            {tab === "style" && <SagaStyleTab roll={roll} />}
+            {tab === "score" && <ScoreTab roll={roll} />}
+            {tab === "screen" && <ScreenTab roll={roll} />}
+            {tab === "release" && <ReleaseTab roll={roll} />}
+            {tab === "reference" && <div className="space-y-2"><SagaOsReference /><SagaOsV2Panel /></div>}
+          </>) : <div className="text-[11px] text-amber-700">Unified roll unavailable for seed {seed}.</div>}
+        </div>
+      )}
+    </section>
+  );
+}