2sagaco48 1.0.0

package/src/components/CreativeTreeOfLifePanel.tsx

@@ -0,0 +1,149 @@
+import { useMemo, useState } from "react";
+import {
+  CreativeStudio,
+  V10CreativeStore,
+  buildV10DiscoveryContext,
+  type CreativeBrief,
+  type CreativeMode,
+  type IdeaCard,
+} from "@/lib/innovation-genome-v10";
+
+const MODES: CreativeMode[] = ["idea", "theory", "product", "code", "research", "story"];
+const stageColor: Record<string, string> = {
+  seed: "bg-amber-700", sprout: "bg-lime-400", branch: "bg-emerald-500",
+  bloom: "bg-pink-400", fruit: "bg-amber-400", compost: "bg-stone-500",
+};
+
+export function CreativeTreeOfLifePanel() {
+  const [expanded, setExpanded] = useState(false);
+  const [challenge, setChallenge] = useState("Find a high-value opportunity hidden by current assumptions");
+  const [mode, setMode] = useState<CreativeMode>("research");
+  const [seed, setSeed] = useState(42);
+  const [studio, setStudio] = useState<CreativeStudio | null>(null);
+  const [workspaceId, setWorkspaceId] = useState("");
+  const [version, setVersion] = useState(0);
+  const [selected, setSelected] = useState<string[]>([]);
+  const [directive, setDirective] = useState<ReturnType<typeof buildV10DiscoveryContext> | null>(null);
+
+  const nodes = useMemo(() => studio && workspaceId ? studio.workspaceNodes(workspaceId) : [], [studio, workspaceId, version]);
+  const ranking = useMemo(() => studio && workspaceId ? studio.rankIdeas(workspaceId) : [], [studio, workspaceId, version]);
+  const health = useMemo(() => studio && workspaceId ? studio.treeHealth(workspaceId) : null, [studio, workspaceId, version]);
+
+  const grow = () => {
+    const next = new CreativeStudio(new V10CreativeStore());
+    const profile = next.bootstrapLocal("Creator");
+    const brief: CreativeBrief = {
+      challenge, mode,
+      audience: ["person most affected by challenge"],
+      desiredOutcomes: ["useful, testable progress"],
+      constraints: ["preserve uncertainty; do not invent facts"],
+      resources: ["existing knowledge, evidence, relationships, tools"],
+      inspirationDomains: ["ecology", "distributed systems", "craft", "scientific instrumentation"],
+      avoid: ["generic repetition", "unsupported global novelty claims"],
+      axes: { evidence: ["primary sources", "counter-evidence", "implementation evidence"] },
+    };
+    const ws = next.createWorkspace(profile, challenge.slice(0, 64), brief, seed);
+    next.creativeExplosion(ws, 8, 16);
+    const context = buildV10DiscoveryContext(challenge, mode, seed);
+    setStudio(next); setWorkspaceId(ws); setDirective(context); setSelected([]); setVersion(v => v + 1);
+    try {
+      localStorage.setItem("veritas.v10.discoveryDirective", context.directive);
+      localStorage.setItem("veritas.v10.searchAngles", JSON.stringify(context.searchAngles));
+    } catch { /* storage optional */ }
+    window.dispatchEvent(new CustomEvent("veritas:v10-discovery", { detail: context }));
+  };
+
+  const confirm = (nodeId: string, verdict: "confirm" | "reject") => {
+    if (!studio) return;
+    studio.confirm(nodeId, "overall", verdict, 5, verdict === "confirm" ? "Human-selected branch" : "Human-rejected branch; preserve as compost");
+    setVersion(v => v + 1);
+  };
+
+  const cross = () => {
+    if (!studio || selected.length !== 2) return;
+    studio.crossPollinate(selected[0], selected[1]);
+    setSelected([]); setVersion(v => v + 1);
+  };
+
+  const toggle = (id: string) => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : s.length < 2 ? [...s, id] : [s[1], id]);
+
+  return (
+    <section className="rounded-2xl border border-lime-200 bg-white shadow-sm">
+      <button onClick={() => setExpanded(!expanded)} className="flex w-full items-center justify-between px-5 py-3 text-left">
+        <div className="flex items-center gap-3">
+          <div className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-lime-100 to-emerald-100 text-lg">🌳</div>
+          <div>
+            <div className="text-sm font-bold text-zinc-900">Creative Tree of Life <span className="text-lime-700">V10</span></div>
+            <div className="text-xs text-zinc-500">Offline discovery studio · unverified branches · human-governed selection</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {health && <span className="rounded bg-lime-50 px-2 py-1 font-mono text-[10px] text-lime-800">{health.nodeCount} nodes</span>}
+          <span className="text-zinc-400">{expanded ? "−" : "+"}</span>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-zinc-100 px-5 py-4">
+          <div className="grid gap-2 md:grid-cols-[1fr_auto_auto_auto]">
+            <input value={challenge} onChange={e => setChallenge(e.target.value)} className="rounded-lg border border-zinc-300 px-3 py-2 text-xs" aria-label="Creative challenge" />
+            <select value={mode} onChange={e => setMode(e.target.value as CreativeMode)} className="rounded-lg border border-zinc-300 bg-white px-2 py-2 text-xs">
+              {MODES.map(m => <option key={m}>{m}</option>)}
+            </select>
+            <input type="number" value={seed} onChange={e => setSeed(Number(e.target.value) >>> 0)} className="w-28 rounded-lg border border-zinc-300 px-2 py-2 font-mono text-xs" aria-label="Creative seed" />
+            <button onClick={grow} className="rounded-lg bg-lime-700 px-4 py-2 text-xs font-bold text-white hover:bg-lime-800">Grow tree</button>
+          </div>
+
+          {health && (
+            <div className="mt-3 grid grid-cols-3 gap-2 md:grid-cols-6">
+              {[["nodes",health.nodeCount],["branches",health.branchCount],["families",health.operatorFamilyCount],["novelty",health.meanLocalNovelty.toFixed(2)],["cohesion",health.meanCohesion.toFixed(2)],["human touch",`${Math.round(health.humanTouchRate*100)}%`]].map(([k,v]) => (
+                <div key={String(k)} className="rounded-lg border border-zinc-100 bg-zinc-50 p-2 text-center"><div className="text-[9px] uppercase text-zinc-400">{k}</div><div className="font-mono text-xs font-bold text-zinc-800">{v}</div></div>
+              ))}
+            </div>
+          )}
+
+          {nodes.length > 0 && (
+            <div className="mt-4 grid gap-4 lg:grid-cols-[minmax(260px,0.8fr)_1.2fr]">
+              <div className="rounded-xl border border-zinc-200 bg-zinc-950 p-3 text-zinc-100">
+                <div className="mb-2 flex items-center justify-between text-[10px] font-bold uppercase tracking-wider text-lime-300"><span>Tree paths</span><span>{selected.length}/2 selected</span></div>
+                <div className="max-h-[430px] space-y-1 overflow-y-auto">
+                  {nodes.map(n => (
+                    <button key={n.nodeId} onClick={() => (n.nodeKind === "idea" || n.nodeKind === "synthesis") && toggle(n.nodeId)} className={`flex w-full items-center gap-2 rounded px-2 py-1 text-left text-[10px] ${selected.includes(n.nodeId) ? "bg-lime-900 ring-1 ring-lime-400" : "hover:bg-zinc-900"}`} style={{ paddingLeft: `${8 + n.depth * 14}px` }}>
+                      <span className={`h-2 w-2 shrink-0 rounded-full ${stageColor[n.lifeStage]}`} />
+                      <span className="truncate">{n.title}</span><span className="ml-auto text-[8px] text-zinc-500">{n.lifeStage}</span>
+                    </button>
+                  ))}
+                </div>
+                <button onClick={cross} disabled={selected.length !== 2} className="mt-3 w-full rounded bg-fuchsia-700 px-2 py-1.5 text-[10px] font-bold text-white disabled:opacity-30">Cross-pollinate selected branches</button>
+              </div>
+
+              <div className="max-h-[520px] space-y-2 overflow-y-auto pr-1">
+                {ranking.slice(0, 12).map((item, index) => {
+                  const card = item.node.body as IdeaCard;
+                  return (
+                    <article key={item.node.nodeId} className={`rounded-xl border p-3 ${item.node.status === "rejected" ? "border-stone-300 bg-stone-50 opacity-70" : item.node.status === "favorite" ? "border-lime-400 bg-lime-50" : "border-zinc-200 bg-white"}`}>
+                      <div className="flex items-start justify-between gap-2"><div><span className="mr-2 text-[9px] font-bold text-zinc-400">#{index+1}</span><span className="text-xs font-bold text-zinc-900">{card.title}</span></div><span className="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-[9px]">{item.score.toFixed(2)}</span></div>
+                      <p className="mt-1 text-[10px] leading-relaxed text-zinc-600">{card.thesis}</p>
+                      <div className="mt-2 rounded bg-zinc-50 p-2 text-[9px] text-zinc-600"><b>Mechanism:</b> {card.mechanism}</div>
+                      <div className="mt-2 flex flex-wrap gap-1 text-[8px] text-zinc-500"><span>novelty {item.noveltyScore.toFixed(2)}</span><span>· cohesion {item.cohesionScore.toFixed(2)}</span><span>· {card.operatorFamily}</span><span>· {card.epistemicStatus}</span></div>
+                      <div className="mt-2 flex gap-1"><button onClick={() => confirm(item.node.nodeId,"confirm")} className="rounded bg-lime-600 px-2 py-1 text-[9px] font-bold text-white">Confirm</button><button onClick={() => confirm(item.node.nodeId,"reject")} className="rounded bg-stone-600 px-2 py-1 text-[9px] font-bold text-white">Compost</button><button onClick={() => toggle(item.node.nodeId)} className="rounded border border-zinc-200 px-2 py-1 text-[9px]">Select</button></div>
+                    </article>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {directive && (
+            <div className="mt-4 grid gap-3 md:grid-cols-2">
+              <div className="rounded-xl border border-sky-200 bg-sky-50 p-3"><div className="text-[10px] font-bold uppercase text-sky-800">Scraper search angles</div><ol className="mt-2 list-decimal space-y-1 pl-4 text-[10px] text-sky-900">{directive.searchAngles.map((a,i)=><li key={i}>{a}</li>)}</ol></div>
+              <div className="rounded-xl border border-amber-200 bg-amber-50 p-3"><div className="text-[10px] font-bold uppercase text-amber-800">Next logic moves</div><ol className="mt-2 list-decimal space-y-1 pl-4 text-[10px] text-amber-900">{directive.nextMoves.map((a,i)=><li key={i}>{a}</li>)}</ol></div>
+              <details className="md:col-span-2"><summary className="cursor-pointer text-xs font-bold text-zinc-600">Pipeline discovery directive</summary><pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap rounded-xl bg-zinc-950 p-3 text-[9px] text-lime-300">{directive.directive}</pre></details>
+              <div className="md:col-span-2 flex gap-2"><button onClick={() => navigator.clipboard.writeText(directive.directive)} className="rounded-lg border border-zinc-200 px-3 py-1.5 text-xs font-bold">Copy directive</button><button onClick={() => studio && navigator.clipboard.writeText(studio.exportJson(workspaceId))} className="rounded-lg border border-zinc-200 px-3 py-1.5 text-xs font-bold">Export JSON</button><button onClick={() => studio && navigator.clipboard.writeText(studio.exportTerminal(workspaceId))} className="rounded-lg border border-zinc-200 px-3 py-1.5 text-xs font-bold">Export tree</button></div>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/DebugTracePanel.tsx

@@ -0,0 +1,137 @@
+/**
+ * Debug/Reasoning Trace Panel
+ * Shows detailed pipeline execution trace for debugging.
+ */
+
+import { useMemo } from "react";
+import type { PipelineTrace } from "../lib/pipeline";
+import { getCacheStats } from "../lib/precache";
+
+interface Props {
+  trace: PipelineTrace[];
+  telemetry?: {
+    tokensIn: number;
+    tokensOut: number;
+    toolCalls: number;
+    hypotheses: number;
+    sources: number;
+    claimsTotal: number;
+    claimsVerified: number;
+    elapsedMs: number;
+  };
+}
+
+export function DebugTracePanel({ trace, telemetry }: Props) {
+  const cacheStats = useMemo(() => getCacheStats(), []);
+
+  const phaseIcons: Record<string, string> = {
+    "1": "🎯",
+    "1.5": "📦",
+    "2": "🧠",
+    "2.5": "🔢",
+    "3": "✍️",
+    "4": "🧹",
+    "5": "🔒",
+    "6": "📜",
+    "7": "🔐",
+  };
+
+  const phaseColors: Record<string, string> = {
+    "1": "text-indigo-600",
+    "1.5": "text-sky-600",
+    "2": "text-indigo-700",
+    "2.5": "text-violet-700",
+    "3": "text-emerald-700",
+    "4": "text-amber-700",
+    "5": "text-indigo-800",
+    "6": "text-violet-800",
+    "7": "text-emerald-800",
+  };
+
+  return (
+    <div className="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
+      <div className="border-b border-zinc-200 px-4 py-2.5 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-bold text-zinc-900">Debug / Reasoning Trace</span>
+          <span className="text-xs font-mono text-zinc-500">{trace.length} steps</span>
+        </div>
+        <div className="text-xs font-mono text-zinc-500">
+          Cache: {Object.entries(cacheStats).map(([k, v]) => `${k}:${v.size}/${v.totalHits}`).join(" ")}
+        </div>
+      </div>
+
+      <div className="p-4">
+        {/* Pipeline Progress */}
+        <div className="mb-4">
+          <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-2">Pipeline Execution Trace</div>
+          <div className="flex items-center gap-1">
+            {Array.from({ length: 7 }).map((_, i) => {
+              const stageNum = (i + 1).toString();
+              const stageTrace = trace.find(t => t.stage.toString().startsWith(stageNum));
+              return (
+                <div key={i} className="flex-1">
+                  <div className={`h-2 rounded-full ${stageTrace ? "bg-emerald-500" : "bg-zinc-200"}`} />
+                </div>
+              );
+            })}
+          </div>
+          <div className="flex justify-between text-[9px] text-zinc-400 mt-1">
+            <span>Stage 1</span>
+            <span>Stage 7</span>
+          </div>
+        </div>
+
+        {/* Detailed Trace */}
+        <div className="space-y-2">
+          {trace.length === 0 ? (
+            <div className="text-center text-zinc-400 py-8">
+              No trace available. Run a query to see pipeline execution.
+            </div>
+          ) : (
+            trace.map((t, i) => (
+              <div
+                key={i}
+                className={`rounded-lg border p-3 ${t.ok ? "border-emerald-200 bg-emerald-50/30" : "border-rose-200 bg-rose-50/30"}`}
+              >
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-lg">{phaseIcons[t.stage.toString()] || "•"}</span>
+                  <span className={`text-xs font-bold ${phaseColors[t.stage.toString()] || "text-zinc-600"}`}>
+                    Stage {t.stage}
+                  </span>
+                  <span className={`text-xs font-mono ${t.ok ? "text-emerald-600" : "text-rose-600"}`}>
+                    {t.ok ? "✓" : "✗"}
+                  </span>
+                  <span className="text-[10px] text-zinc-400 ml-auto">
+                    {new Date(t.ts).toLocaleTimeString()}
+                  </span>
+                </div>
+                <div className="text-sm text-zinc-800">{t.label}</div>
+                {(() => {
+                  if (!t.data) return null;
+                  const content = typeof t.data === "string" ? t.data : JSON.stringify(t.data);
+                  return <pre className="mt-1 text-[10px] font-mono text-zinc-500 overflow-x-auto whitespace-pre-wrap">{content.slice(0, 200)}</pre>;
+                })()}
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Telemetry Summary */}
+        {telemetry && (
+          <div className="mt-4 rounded-xl border border-zinc-200 bg-zinc-50 p-3">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-2">Telemetry Summary</div>
+            <div className="grid grid-cols-3 gap-2 text-xs">
+              <div><span className="text-zinc-500">Tokens In:</span> <span className="font-mono font-bold">{telemetry.tokensIn.toLocaleString()}</span></div>
+              <div><span className="text-zinc-500">Tokens Out:</span> <span className="font-mono font-bold">{telemetry.tokensOut.toLocaleString()}</span></div>
+              <div><span className="text-zinc-500">Tool Calls:</span> <span className="font-mono font-bold">{telemetry.toolCalls}</span></div>
+              <div><span className="text-zinc-500">Hypotheses:</span> <span className="font-mono font-bold">{telemetry.hypotheses}</span></div>
+              <div><span className="text-zinc-500">Sources:</span> <span className="font-mono font-bold">{telemetry.sources}</span></div>
+              <div><span className="text-zinc-500">Claims:</span> <span className="font-mono font-bold">{telemetry.claimsVerified}/{telemetry.claimsTotal}</span></div>
+              <div><span className="text-zinc-500">Elapsed:</span> <span className="font-mono font-bold">{(telemetry.elapsedMs / 1000).toFixed(1)}s</span></div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/DeepReasoningTrace.tsx

@@ -0,0 +1,48 @@
+import { useAppState } from "../lib/app-state";
+
+/**
+ * Deep Reasoning Trace — Hierarchical ledger of the cognitive process.
+ * Surfaced in the advanced workspace to debug silent pipeline failures.
+ */
+export function DeepReasoningTrace() {
+  const { reasoningTrace } = useAppState();
+
+  if (reasoningTrace.length === 0) {
+    return (
+      <div className="rounded-2xl border border-dashed border-zinc-200 bg-white p-12 text-center text-sm text-zinc-400">
+        No reasoning trace captured. Run a 4-stage pipeline to populate the cognitive ledger.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between border-b border-zinc-100 pb-2">
+        <h3 className="text-sm font-bold text-zinc-900 uppercase tracking-widest">Cognitive Ledger — Reasoning Trace</h3>
+        <span className="font-mono text-[10px] text-zinc-400">{reasoningTrace.length} entries</span>
+      </div>
+      
+      <div className="space-y-2">
+        {reasoningTrace.map((entry, i) => (
+          <div key={i} className="rounded-xl border border-zinc-100 bg-white p-3 shadow-sm">
+            <div className="flex items-center gap-2 mb-1.5">
+              <span className="font-mono text-[10px] text-zinc-400">[{new Date(entry.ts).toLocaleTimeString()}]</span>
+              <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold uppercase ${
+                entry.ok ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
+              }`}>
+                {entry.phase || "trace"}
+              </span>
+              <span className="text-xs font-bold text-zinc-800">{entry.label}</span>
+            </div>
+            {entry.detail && <p className="text-xs text-zinc-600 leading-relaxed pl-1">{entry.detail}</p>}
+            {entry.data && (
+              <pre className="mt-2 overflow-auto rounded-lg bg-zinc-950 p-2 font-mono text-[10px] text-emerald-400 max-h-40">
+                {JSON.stringify(entry.data, null, 2)}
+              </pre>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/EntitySheetPanel.tsx

@@ -0,0 +1,51 @@
+import type { EntitySheet } from "../lib/entity-resolver";
+
+/** Compact inline display of the verified entity sheet attached to a chat answer. */
+export function EntitySheetInline({ sheet }: { sheet: EntitySheet }) {
+  if (!sheet || sheet.entities.length === 0) return null;
+  return (
+    <details className="mb-3">
+      <summary className="cursor-pointer text-xs font-semibold text-sky-700 hover:text-sky-900">
+        Verified entity sheet ({sheet.entities.length} resolved, {sheet.weakEntities.length} weak)
+      </summary>
+      <div className="mt-2 rounded-xl border border-sky-100 bg-sky-50/60 overflow-hidden">
+        <table className="w-full text-[11px]">
+          <thead className="bg-sky-100/80">
+            <tr>
+              <th className="px-2 py-1.5 text-left font-bold text-sky-800">Ticker</th>
+              <th className="px-2 py-1.5 text-left font-bold text-sky-800">Company</th>
+              <th className="px-2 py-1.5 text-left font-bold text-sky-800">Facts</th>
+              <th className="px-2 py-1.5 text-left font-bold text-sky-800">Sources</th>
+              <th className="px-2 py-1.5 text-left font-bold text-sky-800">Catalyst</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-sky-100">
+            {sheet.entities.map((e) => (
+              <tr key={e.ticker} className="hover:bg-sky-50">
+                <td className="px-2 py-1.5 font-mono font-bold text-sky-900">{e.ticker}</td>
+                <td className="px-2 py-1.5 text-zinc-900">{e.name}</td>
+                <td className="px-2 py-1.5">
+                  <div className="flex flex-wrap gap-1">
+                    {Object.entries(e.facts).map(([k, v]) => (
+                      <span key={k} className="inline-flex rounded bg-white px-1.5 py-0.5 text-[10px] font-mono text-zinc-700 shadow-sm">
+                        {k}: <span className="ml-0.5 font-bold text-zinc-900">{v}</span>
+                      </span>
+                    ))}
+                    {Object.keys(e.facts).length === 0 && <span className="text-zinc-400 italic">no metrics found</span>}
+                  </div>
+                </td>
+                <td className="px-2 py-1.5 font-mono text-[10px] text-zinc-500">{e.sourceIndices.map((i) => `S${i}`).join(", ")}</td>
+                <td className="px-2 py-1.5 text-[10px] text-zinc-600">{e.catalystRaw?.slice(0, 60) ?? "—"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {sheet.weakEntities.length > 0 && (
+          <div className="border-t border-sky-100 px-3 py-1.5 text-[10px] text-amber-800">
+            Weak / unresolved: {sheet.weakEntities.join(", ")} — insufficient grounding to recommend
+          </div>
+        )}
+      </div>
+    </details>
+  );
+}

package/src/components/FailureModesPanel.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { FAILURE_MODES, SUPERCLASS_SUMMARY } from "../lib/failure-modes";
+import { KERNEL_DEFENSES, TOTAL_DEFENSES } from "../lib/defense-registry";
+
+export function FailureModesPanel() {
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState<"modes" | "kernel">("modes");
+  const [filter, setFilter] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+
+  const filteredModes = FAILURE_MODES.filter(fm =>
+    (filter ? fm.superclass === filter : true) &&
+    (search ? (fm.name + fm.solution + fm.id).toLowerCase().includes(search.toLowerCase()) : true)
+  );
+  const filteredKernel = KERNEL_DEFENSES.filter(k =>
+    search ? (k.name + k.group + k.id + k.wiredIn).toLowerCase().includes(search.toLowerCase()) : true
+  );
+
+  return (
+    <div className="rounded-2xl border border-zinc-200 bg-white shadow-sm">
+      <button onClick={() => setOpen(!open)} className="flex w-full items-center justify-between px-4 py-3 text-left">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-bold text-zinc-900">{TOTAL_DEFENSES} Anti-Hallucination Defenses</span>
+          <span className="rounded-full bg-indigo-100 px-2 py-0.5 text-[10px] font-bold text-indigo-800">{FAILURE_MODES.length} modes + {KERNEL_DEFENSES.length} kernel</span>
+        </div>
+        <span className="text-zinc-400 text-sm">{open ? "−" : "+"}</span>
+      </button>
+      {open && (
+        <div className="border-t border-zinc-200 p-3">
+          <div className="mb-3 flex items-center gap-2">
+            <div className="flex rounded-lg border border-zinc-200 bg-zinc-50 p-0.5">
+              <button onClick={() => setTab("modes")} className={`rounded-md px-3 py-1 text-xs font-semibold ${tab === "modes" ? "bg-zinc-900 text-white" : "text-zinc-600"}`}>Failure modes ({FAILURE_MODES.length})</button>
+              <button onClick={() => setTab("kernel")} className={`rounded-md px-3 py-1 text-xs font-semibold ${tab === "kernel" ? "bg-zinc-900 text-white" : "text-zinc-600"}`}>Kernel defenses ({KERNEL_DEFENSES.length})</button>
+            </div>
+            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search…"
+              className="ml-auto rounded-lg border border-zinc-300 px-3 py-1 text-xs outline-none focus:border-indigo-500 w-40" />
+          </div>
+
+          {tab === "modes" && (
+            <>
+              <div className="mb-3 flex flex-wrap gap-1.5">
+                <button onClick={() => setFilter(null)} className={`rounded px-2 py-1 text-xs font-medium ${!filter ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-700 hover:bg-zinc-200"}`}>All ({FAILURE_MODES.length})</button>
+                {Object.entries(SUPERCLASS_SUMMARY).map(([k, v]) => (
+                  <button key={k} onClick={() => setFilter(filter === k ? null : k)}
+                    className={`rounded px-2 py-1 text-xs font-medium ${filter === k ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-700 hover:bg-zinc-200"}`}>
+                    {k}: {v.name}
+                  </button>
+                ))}
+              </div>
+              <div className="max-h-72 overflow-y-auto rounded-xl border border-zinc-200">
+                <table className="w-full text-xs">
+                  <thead className="sticky top-0 bg-zinc-50">
+                    <tr className="border-b border-zinc-200">
+                      <th className="px-3 py-2 text-left font-semibold text-zinc-500 w-12">ID</th>
+                      <th className="px-3 py-2 text-left font-semibold text-zinc-500">Mode</th>
+                      <th className="px-3 py-2 text-left font-semibold text-zinc-500">Solution</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-zinc-100">
+                    {filteredModes.map(fm => (
+                      <tr key={fm.id} className="hover:bg-zinc-50">
+                        <td className="whitespace-nowrap px-3 py-2 font-mono font-bold text-indigo-700">{fm.id}</td>
+                        <td className="px-3 py-2 font-medium text-zinc-900">{fm.name}</td>
+                        <td className="px-3 py-2 text-zinc-600">{fm.solution}</td>
+                      </tr>
+                    ))}
+                    {filteredModes.length === 0 && <tr><td colSpan={3} className="px-3 py-4 text-center text-zinc-400">No matches</td></tr>}
+                  </tbody>
+                </table>
+              </div>
+              <div className="mt-2 text-[10px] text-zinc-400">Showing {filteredModes.length}/{FAILURE_MODES.length} failure modes</div>
+            </>
+          )}
+
+          {tab === "kernel" && (
+            <div className="max-h-72 overflow-y-auto rounded-xl border border-zinc-200">
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-zinc-50">
+                  <tr className="border-b border-zinc-200">
+                    <th className="px-3 py-2 text-left font-semibold text-zinc-500 w-12">ID</th>
+                    <th className="px-3 py-2 text-left font-semibold text-zinc-500">Kernel defense</th>
+                    <th className="px-3 py-2 text-left font-semibold text-zinc-500">Group</th>
+                    <th className="px-3 py-2 text-left font-semibold text-zinc-500">Wired in (real code)</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-zinc-100">
+                  {filteredKernel.map(k => (
+                    <tr key={k.id} className="hover:bg-zinc-50">
+                      <td className="whitespace-nowrap px-3 py-2 font-mono font-bold text-emerald-700">{k.id}</td>
+                      <td className="px-3 py-2 font-medium text-zinc-900">{k.name}</td>
+                      <td className="px-3 py-2"><span className="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] text-zinc-700">{k.group}</span></td>
+                      <td className="px-3 py-2 font-mono text-[10px] text-zinc-500">{k.wiredIn}</td>
+                    </tr>
+                  ))}
+                  {filteredKernel.length === 0 && <tr><td colSpan={4} className="px-3 py-4 text-center text-zinc-400">No matches</td></tr>}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}