2sagaco48 1.0.0

package/src/components/SagaStyleTab.tsx

@@ -0,0 +1,382 @@
+/**
+ * SAGA-OS v4 — Studio "Style" tab (AUREATE-SCRIBE).
+ * ---------------------------------------------------------------------------
+ * Type C net-new. Every control drives a real computation from
+ * `src/lib/sage/saga-os-v4-aureate.ts` over the SAME unified roll the fiction
+ * prompt is compiled from. Style pack selection writes to localStorage, which
+ * `unifiedRoll` reads, which changes the AUREATE block in the actual prompt.
+ * Nothing here is decorative.
+ */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { UnifiedRoll } from "@/lib/sage/unified-roll";
+import { getStyleAudits } from "@/lib/sage";
+import {
+  STYLE_PACK_DELTAS, STYLE_GENOME_KEYS, loadStylePack, saveStylePack,
+  buildAureateDirective, evaluateKallosS, runStyleTests, runStyleCgol,
+  analyzeSentences, analyzeParagraphs, extractImageChains, extractDialogue,
+  idiolectVector, idiolectDistance, computeSoundVariables, detectRhythmProfile,
+  analyzeArguments, SYNTAX_FORM_NAMES, PARAGRAPH_TYPE_NAMES, RHYTHM_PROFILE_NAMES,
+  V4_HONESTY, type StylePackId, type StyleGenome, type AureateContext,
+} from "@/lib/sage/saga-os-v4-aureate";
+
+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 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"; 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" : "border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-50"}`}>{children}</button>
+);
+
+const SAMPLE = `Mara opened the sluice gate at four in the morning. The gate stuck, and she braced her shoulder against the iron until it gave.
+Water moved into the lower field. It carried silt from the upper channel, and the silt settled in a grey fan across the barley.
+
+She counted the fan at twelve paces. Twelve paces meant the pump had run all night, and nobody had signed the shutdown form.
+"Who held the key?" she asked.
+"I did," Elias said. "I was going to tell you after the count."
+She did not answer. The rust on the hinge had spread since winter.`;
+
+type Sub = "genome" | "analyze" | "audits" | "live" | "cgol" | "tests";
+
+export function SagaStyleTab({ roll }: { roll: UnifiedRoll }) {
+  const [sub, setSub] = useState<Sub>("genome");
+  const [pack, setPack] = useState<StylePackId | null>(() => loadStylePack());
+  const [text, setText] = useState(SAMPLE);
+  const [tick, setTick] = useState(0);
+  useEffect(() => { const t = window.setInterval(() => setTick((n) => n + 1), 1500); return () => window.clearInterval(t); }, []);
+
+  const g: StyleGenome = roll.styleGenome;
+  const ctx: AureateContext = useMemo(() => ({
+    genome: g,
+    castNames: roll.cast.cast.map((c) => c.name),
+    focalCharacter: roll.cast.cast.find((c) => c.kind === "agent")?.name ?? null,
+    genreKey: roll.contract.dominant.key,
+  }), [g, roll]);
+
+  const onPack = useCallback((p: StylePackId | null) => { setPack(p); saveStylePack(p); }, []);
+
+  const kallos = useMemo(() => (text.trim().length > 40 ? evaluateKallosS(text, ctx) : null), [text, ctx]);
+  const tests = useMemo(() => (text.trim().length > 40 ? runStyleTests(text, ctx) : []), [text, ctx]);
+  const cgol = useMemo(() => (text.trim().length > 40 ? runStyleCgol(text, g) : null), [text, g]);
+  const sents = useMemo(() => analyzeSentences(text), [text]);
+  const paras = useMemo(() => analyzeParagraphs(text), [text]);
+  const chains = useMemo(() => extractImageChains(text), [text]);
+  const turns = useMemo(() => extractDialogue(text), [text]);
+  const sv = useMemo(() => computeSoundVariables(text), [text]);
+  const rhythm = useMemo(() => detectRhythmProfile(sv, sents), [sv, sents]);
+  const args = useMemo(() => analyzeArguments(paras), [paras]);
+  const live = useMemo(() => getStyleAudits(), [tick]);
+  const directive = useMemo(() => buildAureateDirective(g, pack, { chapterWords: Math.round(roll.blueprint.chapters.reduce((a, c) => a + c.targetWords, 0) / Math.max(1, roll.blueprint.chapters.length)) }), [g, pack, roll]);
+
+  const speakers = useMemo(() => {
+    const by = new Map<string, string[]>();
+    for (const t of turns) if (t.speaker) by.set(t.speaker, [...(by.get(t.speaker) ?? []), t.line]);
+    return [...by.entries()].map(([k, v]) => ({ name: k, vec: idiolectVector(v), lines: v.length }));
+  }, [turns]);
+
+  const SUBS: { id: Sub; icon: string; label: string }[] = [
+    { id: "genome", icon: "🧬", label: "Genome & pack" },
+    { id: "analyze", icon: "🔍", label: "Analyze prose" },
+    { id: "audits", icon: "📋", label: "Revision stack" },
+    { id: "live", icon: "📡", label: "Live chapters" },
+    { id: "cgol", icon: "♟", label: "STYLE-CGOL" },
+    { id: "tests", icon: "🧪", label: "STYLE-TESTs" },
+  ];
+
+  return (
+    <div className="space-y-2">
+      <Card tone="violet">
+        <Head icon="✒" title="AUREATE-SCRIBE (v4 · SYSTEM v15)" right={`prose mode ${g.proseMode} · focal ${g.focalDistance}`} />
+        <div className="mt-1 text-[10px] text-zinc-600">
+          The style genotype is derived from the SAME genre contract as the rest of the build, so style, structure and reality describe one book.
+          The <b>style pack</b> below is a user control (like the reality level) and is deliberately not seeded — changing it rewrites the
+          AUREATE block in the actual chapter prompt.
+        </div>
+      </Card>
+
+      <div className="flex flex-wrap gap-1">
+        {SUBS.map((s) => (
+          <button key={s.id} onClick={() => setSub(s.id)}
+            className={`rounded-md px-2 py-1 text-[11px] font-semibold ${sub === s.id ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"}`}>
+            {s.icon} {s.label}
+          </button>
+        ))}
+      </div>
+
+      {sub === "genome" && (
+        <div className="space-y-2">
+          <Card>
+            <Head icon="📦" title="§17 Production style packs" right={pack ? `active: ${pack}` : "genre defaults (no pack)"} />
+            <div className="mt-1 flex flex-wrap gap-1">
+              <button onClick={() => onPack(null)} className={`rounded px-2 py-1 text-[10px] font-semibold ${pack === null ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-600"}`}>none (genre defaults)</button>
+              {(Object.keys(STYLE_PACK_DELTAS) as StylePackId[]).map((p) => (
+                <button key={p} onClick={() => onPack(p)} title={STYLE_PACK_DELTAS[p].note}
+                  className={`rounded px-2 py-1 text-[10px] font-semibold ${pack === p ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"}`}>
+                  {p.replace("STYLEPACK-", "")}
+                </button>
+              ))}
+            </div>
+            {pack && <div className="mt-1 text-[10px] text-zinc-600">{STYLE_PACK_DELTAS[pack].note}</div>}
+          </Card>
+          <Card>
+            <Head icon="🧬" title="§5 STYLE-GENOME" right={`${roll.contract.dominant.key} defaults${pack ? " + pack overlay" : ""}`} />
+            <div className="mt-1 space-y-0.5">
+              {STYLE_GENOME_KEYS.map((k) => (
+                <Bar key={k} v={g[k] as number} label={String(k).replace(/([A-Z])/g, " $1").toLowerCase()} />
+              ))}
+            </div>
+            <div className="mt-1.5 flex flex-wrap gap-1">
+              <Pill tone="violet">prose mode: {g.proseMode}</Pill>
+              <Pill tone="teal">focal distance: {g.focalDistance}</Pill>
+            </div>
+          </Card>
+          <Card tone="violet">
+            <Head icon="📤" title="AUREATE block appended to every chapter prompt" right={`${directive.length} chars`} />
+            <pre className="mt-1 max-h-72 overflow-auto whitespace-pre-wrap font-mono text-[9.5px] leading-snug text-violet-950">{directive}</pre>
+          </Card>
+        </div>
+      )}
+
+      {sub !== "genome" && (
+        <Card>
+          <Head icon="📝" title="Prose under analysis" right={`${sents.length} sentences · ${paras.length} discourse units`} />
+          <textarea value={text} onChange={(e) => setText(e.target.value)} rows={6}
+            className="mt-1 w-full rounded border border-zinc-200 p-2 font-mono text-[10px]" placeholder="Paste a generated chapter…" />
+          <div className="mt-1 flex gap-2"><Btn tone="ghost" onClick={() => setText(SAMPLE)}>reset sample</Btn><Btn tone="ghost" onClick={() => setText("")}>clear</Btn></div>
+        </Card>
+      )}
+
+      {sub === "analyze" && (
+        <div className="space-y-2">
+          <Card>
+            <Head icon="✏" title="§6 Sentence engine" right={`${new Set(sents.map((s) => s.syntaxForm)).size} distinct syntax forms`} />
+            <div className="mt-1 max-h-56 overflow-y-auto">
+              <table className="w-full text-[10px]"><tbody>
+                {sents.map((s) => (
+                  <tr key={s.index} className="border-b border-zinc-50 align-top">
+                    <td className="w-6 py-0.5 font-mono text-zinc-400">{s.index + 1}</td>
+                    <td className="w-24 py-0.5"><Pill tone="sky" title={SYNTAX_FORM_NAMES[s.syntaxForm]}>{s.syntaxForm}</Pill></td>
+                    <td className="w-10 py-0.5 font-mono text-zinc-500">{s.wordCount}w</td>
+                    <td className="w-8 py-0.5">{s.subjectIsCharacter ? <span className="text-emerald-600" title="character is grammatical subject">S✓</span> : <span className="text-rose-600" title="subject is not the main character">S✗</span>}</td>
+                    <td className="w-8 py-0.5">{s.actionIsVerb ? <span className="text-emerald-600" title="action is a finite verb">V✓</span> : <span className="text-rose-600" title={`nominalized: ${s.nominalizations.join(", ")}`}>V✗</span>}</td>
+                    <td className="w-8 py-0.5">{s.emphaticEnd ? <span className="text-emerald-600" title="ends on a content word">E✓</span> : <span className="text-amber-600" title="ends on a function word">E✗</span>}</td>
+                    <td className="py-0.5 text-zinc-600">{s.text.slice(0, 76)}{s.text.length > 76 ? "…" : ""}</td>
+                  </tr>
+                ))}
+              </tbody></table>
+            </div>
+          </Card>
+          <div className="grid gap-2 sm:grid-cols-2">
+            <Card>
+              <Head icon="¶" title="§7 Paragraph engine" />
+              <div className="mt-1 space-y-0.5">
+                {paras.map((p) => (
+                  <div key={p.index} className="border-b border-zinc-50 py-0.5 text-[10px] last:border-0">
+                    <Pill tone="indigo" title={PARAGRAPH_TYPE_NAMES[p.type]}>{p.type}</Pill>
+                    <span className="ml-1 text-zinc-500">
+                      anchor {p.hasAnchor ? "✓" : "✗"} · old→new {(p.oldNewChainRatio * 100).toFixed(0)}% · stress {p.finalSentenceStress ? "✓" : "✗"} · abstraction anchored {p.abstractionAnchored ? "✓" : "✗"}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </Card>
+            <Card>
+              <Head icon="🖼" title="§8 Image chains" right={`${chains.length} famil${chains.length === 1 ? "y" : "ies"}`} />
+              <div className="mt-1 space-y-0.5">
+                {chains.length === 0 && <div className="text-[10px] text-zinc-400">no image family detected</div>}
+                {chains.map((c) => (
+                  <div key={c.motifId} className="text-[10px]">
+                    <Pill tone={c.transformed ? "emerald" : c.occurrences.length >= 2 ? "amber" : "zinc"}>{c.sourceDomain}</Pill>
+                    <span className="ml-1 text-zinc-500">
+                      ×{c.occurrences.length} · {c.sensoryChannel} · {c.transformed ? "recurs in changed context ✓" : c.occurrences.length >= 2 ? "repeats without change (IMG-002) ✗" : "single use"}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </div>
+          <div className="grid gap-2 sm:grid-cols-2">
+            <Card>
+              <Head icon="🔊" title="§9 Sound & rhythm" right={`${rhythm} ${RHYTHM_PROFILE_NAMES[rhythm]}`} />
+              <div className="mt-1 space-y-0.5">
+                {(Object.entries(sv) as [string, number][]).map(([k, v]) => (
+                  <Bar key={k} v={v} label={k.replace(/([A-Z])/g, " $1").toLowerCase()} />
+                ))}
+              </div>
+            </Card>
+            <Card>
+              <Head icon="💬" title="§11 Dialogue" right={`${turns.length} turn(s) · ${speakers.length} attributed`} />
+              <div className="mt-1 space-y-0.5">
+                {turns.slice(0, 8).map((t) => (
+                  <div key={t.index} className="text-[10px]">
+                    <Pill tone="teal">{t.speechAct}</Pill>
+                    {t.speaker && <Pill tone="zinc">{t.speaker}</Pill>}
+                    {t.hasSubtext && <Pill tone="violet">subtext</Pill>}
+                    <span className="ml-1 text-zinc-500">{t.line.slice(0, 52)}</span>
+                  </div>
+                ))}
+              </div>
+              {speakers.length >= 2 && (
+                <div className="mt-1 text-[10px] text-zinc-600">
+                  min idiolect distance{" "}
+                  <b>{Math.min(...speakers.flatMap((a, i) => speakers.slice(i + 1).map((b) => idiolectDistance(a.vec, b.vec)))).toFixed(3)}</b>
+                  {" "}(DIA-AUD-002 floor 0.18)
+                </div>
+              )}
+            </Card>
+          </div>
+          <Card>
+            <Head icon="⚖" title="§12 Argument / warrant" right="lyrical & perceptual passages are exempt (§12.1)" />
+            <div className="mt-1 space-y-0.5">
+              {args.map((a) => (
+                <div key={a.paragraph} className="text-[10px]">
+                  <Pill tone={a.passageClass === "ARGUMENTATIVE" ? (a.complete ? "emerald" : "rose") : "zinc"}>{a.passageClass}</Pill>
+                  <span className="ml-1 text-zinc-500">
+                    {a.passageClass === "ARGUMENTATIVE"
+                      ? `claim ${a.claim ? "✓" : "✗"} · reason ${a.reason ? "✓" : "✗"} · evidence ${a.evidence ? "✓" : "✗"}`
+                      : "exempt from warranting"}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {sub === "audits" && kallos && (
+        <div className="space-y-2">
+          <Card tone={kallos.gatesPass ? "emerald" : "rose"}>
+            <Head icon="✨" title="§14 KALLOS-S" right={`weakest: ${kallos.weakest?.label}`} />
+            <div className="mt-1 flex items-baseline gap-2">
+              <span className="text-2xl font-bold text-zinc-900">{kallos.composite.toFixed(1)}</span>
+              <span className="text-[10px] text-zinc-500">/100</span>
+              <Pill tone={kallos.gatesPass ? "emerald" : "rose"}>{kallos.gatesPass ? "GATES PASS" : "HARD GATE FAILED ⇒ 0"}</Pill>
+            </div>
+            <div className="mt-1 flex flex-wrap gap-1">
+              {kallos.gates.map((x) => <Pill key={x.id} tone={x.pass ? "emerald" : "rose"} title={x.detail}>{x.id} {x.pass ? "✓" : "✗"}</Pill>)}
+            </div>
+            <div className="mt-1.5 space-y-0.5">
+              {kallos.dims.map((d) => <Bar key={d.key} v={d.score} label={`${d.label} (w ${d.weight})`} note={d.detail} />)}
+            </div>
+          </Card>
+          <Card>
+            <Head icon="📋" title="§13 AUREATE revision stack — PASS-001..015" />
+            <div className="mt-1 space-y-0.5">
+              {kallos.passes.map((p) => (
+                <div key={p.id} className={`border-b border-zinc-50 py-0.5 last:border-0 ${p.executable ? "" : "opacity-60"}`}>
+                  <div className="flex items-start gap-1.5">
+                    <span className={`shrink-0 font-mono text-[10px] ${p.severity === "pass" ? "text-emerald-600" : p.severity === "warn" ? "text-amber-600" : "text-rose-600"}`}>
+                      {p.executable ? (p.severity === "pass" ? "✓" : p.severity === "warn" ? "!" : "✗") : "○"}
+                    </span>
+                    <span className="w-20 shrink-0 font-mono text-[10px] text-zinc-500">{p.id}</span>
+                    <span className="w-52 shrink-0 text-[10px] font-semibold text-zinc-700">{p.name}</span>
+                    <span className="text-[10px] text-zinc-500">{p.detail}</span>
+                  </div>
+                  {p.findings.length > 0 && (
+                    <ul className="ml-[100px] list-disc text-[9.5px] text-zinc-400">{p.findings.map((f, i) => <li key={i}>{f}</li>)}</ul>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="mt-1 text-[9px] italic text-zinc-400">{kallos.method}</div>
+          </Card>
+        </div>
+      )}
+
+      {sub === "live" && (
+        <Card>
+          <Head icon="📡" title="Style audit of generated chapters" right={live.length ? `${live.length} chapter(s)` : "no chapters generated yet"} />
+          {live.length === 0 ? (
+            <div className="mt-1 text-[10px] text-zinc-500">
+              Runs automatically on every chapter the fiction engine produces (same seam as the reality audit).
+              Results appear here after a run.
+            </div>
+          ) : (
+            <div className="mt-1 space-y-1">
+              {live.slice(-10).map((a) => (
+                <div key={a.chapter}>
+                  <div className="flex items-center gap-1.5">
+                    <span className="w-14 shrink-0 text-[10px] text-zinc-500">ch{a.chapter}</span>
+                    <div className="h-1.5 flex-1 rounded-full bg-zinc-100">
+                      <div className="h-full rounded-full" style={{ width: `${a.report.composite}%`, backgroundColor: `hsl(${Math.round(a.report.composite * 1.2)},55%,50%)` }} />
+                    </div>
+                    <span className="w-10 text-right font-mono text-[10px] text-zinc-600">{a.report.composite.toFixed(0)}</span>
+                    {!a.report.gatesPass && <Pill tone="rose">gate fail</Pill>}
+                  </div>
+                  <div className="ml-16 text-[9px] text-zinc-400">
+                    weakest {a.report.weakest?.label} · {RHYTHM_PROFILE_NAMES[a.report.rhythmProfile]} ·{" "}
+                    {a.report.passes.filter((p) => p.severity === "fail").map((p) => p.id).join(", ") || "no failing pass"}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </Card>
+      )}
+
+      {sub === "cgol" && cgol && (
+        <Card>
+          <Head icon="♟" title="§15 STYLE-CGOL" right={`${cgol.pattern} · ${cgol.detail}`} />
+          <div className="mt-1 flex flex-wrap gap-1">
+            {cgol.cells.map((c) => (
+              <Pill key={c.index} tone={c.event === "OVERPOPULATION" ? "rose" : c.event === "UNDERPOPULATION" ? "amber" : c.event === "SURVIVAL" ? "emerald" : "zinc"} title={c.note}>
+                {c.index + 1}:{c.state}
+              </Pill>
+            ))}
+          </div>
+          {cgol.advice.length > 0 && (
+            <ul className="ml-3 mt-1 list-disc text-[10px] text-amber-800">{cgol.advice.map((a) => <li key={a}>{a}</li>)}</ul>
+          )}
+          <div className="mt-1 text-[9px] italic text-zinc-400">
+            Style states evolve over discourse units; BIRTH/SURVIVAL/DEATH follow support from scene force and genre contract (§15.2).
+            Falls back to sentence scale when the paragraph lattice is too small to carry a pattern.
+          </div>
+        </Card>
+      )}
+
+      {sub === "tests" && (
+        <Card>
+          <Head icon="🧪" title="§19 STYLE-TEST-001..015" right={`${tests.filter((t) => t.status === "PASS").length} PASS · ${tests.filter((t) => t.status === "FAIL").length} FAIL · ${tests.filter((t) => t.status === "NOT_EXECUTABLE").length} N/E`} />
+          <table className="mt-1 w-full text-[10px]"><tbody>
+            {tests.map((t) => (
+              <tr key={t.id} className="border-b border-zinc-50 align-top">
+                <td className="w-24 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-48 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 tone="amber">
+        <Head icon="⚠" title="v4 §0 honesty boundary" />
+        <ul className="ml-3 mt-1 list-disc text-[10px] text-amber-900">{V4_HONESTY.map((h) => <li key={h}>{h}</li>)}</ul>
+      </Card>
+    </div>
+  );
+}