2sagaco48 1.0.0

package/src/components/StatFinancePanel.tsx

@@ -0,0 +1,190 @@
+import { useState, useCallback } from "react";
+import { getWorkerPool } from "../lib/worker-pool";
+
+type Tab = "finance" | "causal" | "power";
+
+export function StatFinancePanel() {
+  const [tab, setTab] = useState<Tab>("finance");
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState<any>(null);
+
+  const executeCompute = useCallback(async (fn: string, args: any[]) => {
+    setLoading(true);
+    try {
+      const pool = getWorkerPool();
+      const result = await pool.enqueue({
+        id: crypto.randomUUID(),
+        type: "compute",
+        payload: { fn, args },
+      });
+      setResults(result.result);
+    } catch (error: any) {
+      setResults({ error: error.message });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  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 bg-zinc-50">
+        <span className="text-sm font-bold text-zinc-900 uppercase tracking-widest">Stat & Finance Engine</span>
+        <div className="flex gap-1">
+          {([["finance", "Finance"], ["causal", "Causal"], ["power", "NIH Power"]] as const).map(([id, label]) => (
+            <button key={id} onClick={() => setTab(id)}
+              className={`rounded-lg px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider transition-all ${tab === id ? "bg-zinc-900 text-white" : "text-zinc-500 hover:bg-zinc-100"}`}>
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="p-4">
+        {tab === "finance" && <FinanceTab execute={executeCompute} loading={loading} results={results} />}
+        {tab === "causal" && <CausalTab execute={executeCompute} loading={loading} results={results} />}
+        {tab === "power" && <PowerTab execute={executeCompute} loading={loading} results={results} />}
+      </div>
+    </div>
+  );
+}
+
+function FinanceTab({ execute, loading, results }: { execute: (fn: string, args: any[]) => void, loading: boolean, results: any }) {
+  const [heston, setHeston] = useState({ s0: 100, k: 100, v0: 0.04, kappa: 2.0, theta: 0.04, sigma: 0.3, rho: -0.7, tau: 0.5, r: 0.05 });
+  const [sabr, setSabr] = useState({ f: 0.05, k: 0.05, t: 1.0, alpha: 0.2, beta: 0.5, rho: -0.3, nu: 0.4 });
+
+  const runHeston = () => execute("heston", [heston.s0, heston.k, heston.v0, heston.kappa, heston.theta, heston.sigma, heston.rho, heston.tau, heston.r]);
+  const runSabr = () => execute("sabr", [sabr.f, sabr.k, sabr.t, sabr.alpha, sabr.beta, sabr.rho, sabr.nu]);
+
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <div className="space-y-3">
+        <div className="text-xs font-bold text-zinc-900 uppercase">Heston Stochastic Volatility</div>
+        <div className="grid grid-cols-2 gap-2">
+          <Input label="S0 (Spot)" v={heston.s0} setV={v => setHeston({...heston, s0: v})} />
+          <Input label="K (Strike)" v={heston.k} setV={v => setHeston({...heston, k: v})} />
+          <Input label="v0 (Initial Var)" v={heston.v0} setV={v => setHeston({...heston, v0: v})} step={0.01} />
+          <Input label="kappa (Mean Rev)" v={heston.kappa} setV={v => setHeston({...heston, kappa: v})} step={0.1} />
+        </div>
+        <button onClick={runHeston} disabled={loading} className="w-full rounded-lg bg-zinc-900 px-4 py-2 text-xs font-bold text-white hover:bg-zinc-800 disabled:opacity-50">
+          {loading ? "Computing..." : "Compute Heston Price"}
+        </button>
+        {results && !loading && (
+          <div className="rounded-xl border border-emerald-100 bg-emerald-50 p-3">
+            <div className="text-xs font-bold text-zinc-500 uppercase mb-1">Heston Call Price</div>
+            <div className="text-lg font-mono font-bold text-emerald-700">
+              ${typeof results === "number" ? results.toFixed(4) : "Computation Error"}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-3">
+        <div className="text-xs font-bold text-zinc-900 uppercase">SABR Volatility Smile</div>
+        <div className="grid grid-cols-2 gap-2">
+          <Input label="F (Forward)" v={sabr.f} setV={v => setSabr({...sabr, f: v})} step={0.005} />
+          <Input label="K (Strike)" v={sabr.k} setV={v => setSabr({...sabr, k: v})} step={0.005} />
+          <Input label="alpha (Vol level)" v={sabr.alpha} setV={v => setSabr({...sabr, alpha: v})} step={0.01} />
+          <Input label="nu (Vol-of-Vol)" v={sabr.nu} setV={v => setSabr({...sabr, nu: v})} step={0.05} />
+        </div>
+        <button onClick={runSabr} disabled={loading} className="w-full rounded-lg bg-zinc-900 px-4 py-2 text-xs font-bold text-white hover:bg-zinc-800 disabled:opacity-50">
+          {loading ? "Computing..." : "Compute SABR Vol"}
+        </button>
+        {results && !loading && (
+          <div className="rounded-xl border border-sky-100 bg-sky-50 p-3">
+            <div className="text-xs font-bold text-zinc-500 uppercase mb-1">SABR Implied Volatility</div>
+            <div className="text-lg font-mono font-bold text-sky-700">
+              {(typeof results === "number" ? results * 100 : 0).toFixed(2)}%
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CausalTab({ execute, loading, results }: { execute: (fn: string, args: any[]) => void, loading: boolean, results: any }) {
+  const [n, setN] = useState(200);
+  const [ate, setAte] = useState(0.35);
+
+  const runDML = () => execute("dml", [[], [], []]); // Simplified for demo
+
+  return (
+    <div className="space-y-4">
+      <div className="text-xs font-bold text-zinc-900 uppercase">Double Machine Learning (DML)</div>
+      <p className="text-[11px] text-zinc-500">Estimates Average Treatment Effect (ATE) while partialing out high-dimensional confounders.</p>
+      <div className="grid gap-2 sm:grid-cols-2">
+        <Input label="Sample Size (N)" v={n} setV={setN} step={50} />
+        <Input label="Target ATE" v={ate} setV={setAte} step={0.05} />
+      </div>
+      <button onClick={runDML} disabled={loading} className="w-full rounded-lg bg-zinc-900 px-4 py-2 text-xs font-bold text-white hover:bg-zinc-800 disabled:opacity-50">
+        {loading ? "Computing..." : "Run DML"}
+      </button>
+      {results && !loading && (
+        <div className="rounded-xl border border-indigo-100 bg-indigo-50 p-3 text-xs">
+          <div className="font-bold text-zinc-500 uppercase mb-2">Double ML Results</div>
+          <div className="space-y-1">
+            <div className="flex justify-between">
+              <span className="text-zinc-500">Estimated ATE:</span>
+              <span className="font-mono font-bold text-indigo-700">{results.ate?.toFixed(4) || "N/A"}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-zinc-500">p-value:</span>
+              <span className="font-mono font-bold text-indigo-700">{results.pValue?.toFixed(4) || "N/A"}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-zinc-500">95% CI:</span>
+              <span className="font-mono font-bold text-indigo-700">[{results.ci?.[0]?.toFixed(4) || "N/A"}, {results.ci?.[1]?.toFixed(4) || "N/A"}]</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PowerTab({ execute, loading, results }: { execute: (fn: string, args: any[]) => void, loading: boolean, results: any }) {
+  const [n, setN] = useState(400);
+  const [m, setM] = useState(20);
+  const [icc, setIcc] = useState(0.05);
+
+  const runPower = () => execute("power", [n, m, icc, 0.5]);
+
+  return (
+    <div className="space-y-4">
+      <div className="text-xs font-bold text-zinc-900 uppercase">ICC-Adjusted Sample Size (NIH Fix)</div>
+      <p className="text-[11px] text-rose-700 bg-rose-50 border border-rose-100 rounded-lg p-2">
+        <strong>Red Team Note:</strong> Without adjusting for Intraclass Correlation (ICC) in multi-site designs, power is overestimated.
+      </p>
+      <div className="grid gap-2 sm:grid-cols-3">
+        <Input label="Nominal N" v={n} setV={setN} step={50} />
+        <Input label="Cluster Size (m)" v={m} setV={setM} step={5} />
+        <Input label="ICC (rho)" v={icc} setV={setIcc} step={0.01} max={1} />
+      </div>
+      <button onClick={runPower} disabled={loading} className="w-full rounded-lg bg-zinc-900 px-4 py-2 text-xs font-bold text-white hover:bg-zinc-800 disabled:opacity-50">
+        {loading ? "Computing..." : "Calculate Power"}
+      </button>
+      {results && !loading && (
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="rounded-xl border border-zinc-200 p-3">
+            <div className="text-[10px] uppercase text-zinc-400 font-bold mb-1">Effective N</div>
+            <div className="text-lg font-mono font-bold text-zinc-900">{results.nEffective?.toFixed(1) || "N/A"}</div>
+          </div>
+          <div className="rounded-xl border border-zinc-200 p-3">
+            <div className="text-[10px] uppercase text-zinc-400 font-bold mb-1">Design Effect (DEFF)</div>
+            <div className="text-lg font-mono font-bold text-zinc-900">{results.deff?.toFixed(2) || "N/A"}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Input({ label, v, setV, step = 1, max }: { label: string, v: number, setV: (n: number) => void, step?: number, max?: number }) {
+  return (
+    <label className="block">
+      <span className="text-[10px] font-bold text-zinc-400 uppercase">{label}</span>
+      <input type="number" value={v} step={step} max={max} onChange={e => setV(Number(e.target.value))}
+        className="mt-0.5 w-full rounded-lg border border-zinc-200 bg-zinc-50 px-2 py-1 text-xs font-mono" />
+    </label>
+  );
+}

package/src/components/StylePersonaPanel.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { newSessionSeed, type WilliamsPersona } from "../lib/williams-style";
+
+interface Props {
+  persona: WilliamsPersona;
+  onReseed: (seed: number) => void;
+  /** Legacy/optional callback so existing callers can react to persona changes. */
+  onPersonaChange?: (p: WilliamsPersona) => void;
+}
+
+export function StylePersonaPanel({ persona, onReseed }: Props) {
+  const [pinned, setPinned] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [seedInput, setSeedInput] = useState(persona.seed);
+
+  function reroll() {
+    if (pinned) return;
+    const seed = newSessionSeed();
+    setSeedInput(seed);
+    onReseed(seed);
+  }
+
+  function applyManualSeed(s: number) {
+    setSeedInput(s);
+    onReseed(s);
+  }
+
+  return (
+    <section className="rounded-2xl border border-zinc-200 bg-white shadow-sm">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center justify-between px-5 py-3 text-left"
+      >
+        <div className="flex items-center gap-3">
+          <div className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-violet-100 to-indigo-100 text-lg">✍️</div>
+          <div>
+            <div className="flex items-center gap-2">
+              <div className="text-sm font-bold text-zinc-900">Style Persona: <span className="text-indigo-700">{persona.archetype.name}</span></div>
+              <span className={`rounded px-1.5 py-0.5 text-[10px] font-bold ${
+                persona.rarityTier === "Legendary" ? "bg-amber-100 text-amber-800" :
+                persona.rarityTier === "Epic" ? "bg-fuchsia-100 text-fuchsia-800" :
+                persona.rarityTier === "Rare" ? "bg-sky-100 text-sky-800" :
+                persona.rarityTier === "Uncommon" ? "bg-emerald-100 text-emerald-800" :
+                "bg-zinc-100 text-zinc-600"
+              }`}>{persona.rarityTier} ({persona.rarityPercent}%)</span>
+            </div>
+            <div className="text-xs text-zinc-500">{persona.archetype.desc}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="rounded bg-zinc-100 px-2 py-1 font-mono text-[10px] text-zinc-600">seed {persona.seed}</span>
+          <span className="text-zinc-400">{expanded ? "−" : "+"}</span>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-zinc-100 px-5 py-4">
+          <div className="mb-4 flex flex-wrap items-center gap-2">
+            <button
+              onClick={reroll}
+              disabled={pinned}
+              className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-indigo-700 disabled:opacity-40"
+            >
+              Reroll persona
+            </button>
+            <label className="flex items-center gap-2 text-xs font-semibold text-zinc-600">
+              <input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} />
+              Pin seed
+            </label>
+            <label className="flex items-center gap-2 text-xs text-zinc-500">
+              Custom seed:
+              <input
+                type="number"
+                value={seedInput}
+                onChange={(e) => applyManualSeed(Number(e.target.value) >>> 0)}
+                className="w-28 rounded border border-zinc-300 px-2 py-1 font-mono text-xs"
+              />
+            </label>
+            <button
+              onClick={() => navigator.clipboard.writeText(String(persona.seed))}
+              className="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs font-bold text-zinc-700 hover:bg-zinc-50"
+              title="Export this persona by copying its seed"
+            >
+              Export
+            </button>
+          </div>
+
+          <div className="mb-4">
+            <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-400">19 stylistic dimensions</div>
+          </div>
+
+          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+            {persona.dimensionLabels.map((dim) => (
+              <div key={dim.name} className="rounded-xl border border-zinc-100 bg-zinc-50 p-3">
+                <div className="flex items-center justify-between">
+                  <div className="text-xs font-bold text-zinc-900">{dim.name}</div>
+                  <div className="rounded bg-indigo-50 px-1.5 py-0.5 font-mono text-[9px] text-indigo-700">{dim.lesson}</div>
+                </div>
+                <div className="mt-2 flex items-center gap-2">
+                  <span className="w-16 text-right text-[9px] text-zinc-500 leading-tight">{dim.lowLabel}</span>
+                  <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-zinc-200">
+                    <div
+                      className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-sky-500 to-indigo-500"
+                      style={{ width: `${dim.value * 100}%` }}
+                    />
+                    <div
+                      className="absolute top-[-2px] h-3 w-1 rounded-full bg-zinc-900"
+                      style={{ left: `calc(${dim.value * 100}% - 2px)` }}
+                    />
+                  </div>
+                  <span className="w-16 text-[9px] text-zinc-500 leading-tight">{dim.highLabel}</span>
+                </div>
+                <div className="mt-1 text-right font-mono text-[10px] text-zinc-400">{dim.value.toFixed(2)}</div>
+              </div>
+            ))}
+          </div>
+
+          <details className="mt-4">
+            <summary className="cursor-pointer text-xs font-bold text-zinc-600 hover:text-zinc-900">View generated style instructions</summary>
+            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap rounded-xl border border-zinc-200 bg-white p-4 font-mono text-xs leading-relaxed text-zinc-800">
+              {persona.systemPromptFragment}
+            </pre>
+          </details>
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/TemplatesPage.tsx

@@ -0,0 +1,300 @@
+import { useState } from "react";
+import { useAppState } from "../lib/app-state";
+import {
+  OMEGA_TEMPLATES,
+  STYLE_OVERRIDES,
+  SELECTION_MATRIX,
+  unifiedHeaderBlock,
+  buildTemplatePrompt,
+  type OmegaTemplate,
+  type OmegaSection,
+} from "../lib/omega-templates";
+
+function uid() { return "tpl-" + Math.random().toString(36).slice(2, 9); }
+
+export function TemplatesPage() {
+  const { settings, setSetting, templates, addTemplate, deleteTemplate, sscpReceipt } = useAppState();
+  const [preview, setPreview] = useState<string>(settings.activeTemplateId);
+  const [tab, setTab] = useState<"masters" | "overrides" | "matrix" | "custom">("masters");
+
+  // Custom template builder
+  const [draft, setDraft] = useState<OmegaTemplate>({
+    id: uid(), name: "", tagline: "", replaces: "Custom", sections: [], styleHooks: [], custom: true,
+  });
+  const [secDraft, setSecDraft] = useState<OmegaSection>({ id: "§1", title: "", hint: "", pages: "" });
+
+  const selected = templates.find(t => t.id === preview) ?? OMEGA_TEMPLATES[0];
+  const customTemplates = templates.filter(t => t.custom);
+
+  function addSection() {
+    if (!secDraft.title.trim()) return;
+    setDraft(d => ({ ...d, sections: [...d.sections, { ...secDraft }] }));
+    setSecDraft({ id: `§${draft.sections.length + 2}`, title: "", hint: "", pages: "" });
+  }
+  function saveDraft() {
+    if (!draft.name.trim() || draft.sections.length === 0) return;
+    addTemplate({ ...draft, id: draft.id || uid(), custom: true });
+    setDraft({ id: uid(), name: "", tagline: "", replaces: "Custom", sections: [], styleHooks: [], custom: true });
+    setSecDraft({ id: "§1", title: "", hint: "", pages: "" });
+    setTab("masters");
+  }
+
+  const headerPreview = unifiedHeaderBlock({
+    title: "[REPORT TITLE — ACTION-ORIENTED]",
+    audience: "[CLIENT/AUDIENCE]",
+    date: new Date().toLocaleDateString("en-US"),
+    classification: "INTERNAL",
+    sscpHash: sscpReceipt ? sscpReceipt.stateRootHash.slice(0, 16) + "…" : "[computed at runtime]",
+    evidenceTier: sscpReceipt ? sscpReceipt.evidenceTier : "TOOL",
+    model: settings.activeTemplateId ? "Gemma 4 31B / Gemini" : "[model/version]",
+    cutoff: "2026",
+    styleMode: settings.styleMode,
+  });
+
+  return (
+    <div className="bg-zinc-50 pb-10">
+      <div className="mx-auto max-w-6xl space-y-5 px-4 py-6">
+        {/* Header */}
+        <section className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <div className="text-xs font-bold uppercase tracking-[0.2em] text-indigo-600">OMEGA Templates</div>
+              <h1 className="mt-1 text-2xl font-bold tracking-tight text-zinc-900">7 master templates · 40 legacy overrides · custom builder</h1>
+              <p className="mt-2 max-w-3xl text-sm text-zinc-600">
+                Templates inject a section skeleton + style-modulation hooks into synthesis. The anti-hallucination stack
+                (constraints, temporal anchor, sanitizer, SSCP receipt) still wraps every stage.
+              </p>
+            </div>
+            <label className="flex items-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2 text-sm font-semibold text-indigo-800">
+              <input type="checkbox" checked={settings.templateEnabled} onChange={e => setSetting("templateEnabled", e.target.checked)} className="h-4 w-4 rounded" />
+              Apply template to outputs
+            </label>
+          </div>
+          {/* Active template selector */}
+          <div className="mt-4 grid gap-3 sm:grid-cols-2">
+            <label className="text-xs font-semibold text-zinc-600">
+              Active template
+              <select value={settings.activeTemplateId} onChange={e => { setSetting("activeTemplateId", e.target.value); setPreview(e.target.value); }}
+                className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm">
+                {templates.map(t => <option key={t.id} value={t.id}>{t.name}{t.custom ? " (custom)" : ""} — {t.tagline}</option>)}
+              </select>
+            </label>
+            <label className="text-xs font-semibold text-zinc-600">
+              Style mode (override token)
+              <select value={settings.styleMode} onChange={e => setSetting("styleMode", e.target.value)}
+                className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm">
+                <option value="OMEGA-DEFAULT">OMEGA-DEFAULT</option>
+                {STYLE_OVERRIDES.map(o => <option key={o.token} value={o.token}>{o.token} — {o.legacy}</option>)}
+              </select>
+            </label>
+          </div>
+        </section>
+
+        {/* Unified header block preview */}
+        <section className="rounded-2xl border border-zinc-200 bg-zinc-950 p-4 shadow-sm">
+          <div className="mb-2 text-xs font-bold uppercase tracking-wider text-emerald-400">Unified header block (injected into every templated output)</div>
+          <pre className="overflow-x-auto whitespace-pre font-mono text-[11px] leading-snug text-emerald-200">{headerPreview}</pre>
+        </section>
+
+        {/* Tabs */}
+        <div className="flex flex-wrap gap-1 rounded-xl border border-zinc-200 bg-white p-1 w-fit">
+          {([["masters", "7 Masters"], ["overrides", "40 Overrides"], ["matrix", "Decision Matrix"], ["custom", "Custom Builder"]] as const).map(([id, label]) => (
+            <button key={id} onClick={() => setTab(id)} className={`rounded-lg px-3 py-1.5 text-xs font-semibold ${tab === id ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"}`}>{label}</button>
+          ))}
+        </div>
+
+        {/* Masters */}
+        {tab === "masters" && (
+          <div className="grid gap-4 lg:grid-cols-[1fr_1.4fr]">
+            <div className="space-y-2">
+              {OMEGA_TEMPLATES.map(t => (
+                <button key={t.id} onClick={() => setPreview(t.id)}
+                  className={`block w-full rounded-xl border p-3 text-left transition-colors ${preview === t.id ? "border-indigo-300 bg-indigo-50" : "border-zinc-200 bg-white hover:bg-zinc-50"}`}>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-bold text-zinc-900">{t.name}</span>
+                    <span className="text-[10px] text-zinc-400">{t.sections.length} sections</span>
+                  </div>
+                  <div className="text-xs text-indigo-700">{t.tagline}</div>
+                  <div className="mt-1 text-[11px] text-zinc-500 line-clamp-1">Replaces: {t.replaces}</div>
+                </button>
+              ))}
+            </div>
+            <TemplateDetail t={selected} styleMode={settings.styleMode} />
+          </div>
+        )}
+
+        {/* Overrides */}
+        {tab === "overrides" && (
+          <section 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 text-sm font-bold text-zinc-900">Style Override Registry — 40 legacy templates</div>
+            <div className="max-h-[28rem] overflow-y-auto">
+              <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">Token</th>
+                    <th className="px-3 py-2 text-left font-semibold text-zinc-500">Legacy template</th>
+                    <th className="px-3 py-2 text-left font-semibold text-zinc-500">Maps to</th>
+                    <th className="px-3 py-2 text-left font-semibold text-zinc-500">Preservation hooks</th>
+                    <th className="px-3 py-2"></th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-zinc-100">
+                  {STYLE_OVERRIDES.map(o => (
+                    <tr key={o.token} className="hover:bg-zinc-50">
+                      <td className="whitespace-nowrap px-3 py-2 font-mono font-bold text-indigo-700">{o.token}</td>
+                      <td className="px-3 py-2 text-zinc-900">{o.legacy}</td>
+                      <td className="whitespace-nowrap px-3 py-2 font-mono text-[10px] text-emerald-700">{o.mapsTo}</td>
+                      <td className="px-3 py-2 text-zinc-600">{o.hooks}</td>
+                      <td className="px-3 py-2">
+                        <button onClick={() => setSetting("styleMode", o.token)} className="rounded bg-zinc-900 px-2 py-1 text-[10px] font-bold text-white hover:bg-zinc-700">Use</button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </section>
+        )}
+
+        {/* Matrix */}
+        {tab === "matrix" && (
+          <section 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 text-sm font-bold text-zinc-900">Selection Decision Matrix</div>
+            <table className="w-full text-sm">
+              <thead className="bg-zinc-50">
+                <tr className="border-b border-zinc-200">
+                  <th className="px-4 py-2 text-left font-semibold text-zinc-500">If your task is…</th>
+                  <th className="px-4 py-2 text-left font-semibold text-zinc-500">Default template</th>
+                  <th className="px-4 py-2 text-left font-semibold text-zinc-500">Override if…</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-100">
+                {SELECTION_MATRIX.map(r => (
+                  <tr key={r.task} className="hover:bg-zinc-50">
+                    <td className="px-4 py-2.5 text-zinc-800">"{r.task}"</td>
+                    <td className="px-4 py-2.5"><span className="rounded bg-indigo-50 px-2 py-0.5 font-mono text-xs font-bold text-indigo-700">{r.def}</span></td>
+                    <td className="px-4 py-2.5 text-zinc-600">{r.override}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </section>
+        )}
+
+        {/* Custom builder */}
+        {tab === "custom" && (
+          <div className="grid gap-4 lg:grid-cols-2">
+            <section className="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm space-y-3">
+              <h2 className="text-sm font-bold text-zinc-900">Build a custom template</h2>
+              <input value={draft.name} onChange={e => setDraft(d => ({ ...d, name: e.target.value }))} placeholder="Template name (e.g. OMEGA-LEGAL-MEMO)"
+                className="w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm" />
+              <input value={draft.tagline} onChange={e => setDraft(d => ({ ...d, tagline: e.target.value }))} placeholder="Tagline (e.g. Litigation risk memo)"
+                className="w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm" />
+              <input value={draft.styleHooks.join(", ")} onChange={e => setDraft(d => ({ ...d, styleHooks: e.target.value.split(",").map(s => s.trim()).filter(Boolean) }))}
+                placeholder="Style hooks, comma-separated"
+                className="w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm" />
+
+              <div className="rounded-xl border border-zinc-200 bg-zinc-50 p-3 space-y-2">
+                <div className="text-xs font-bold text-zinc-700">Add section</div>
+                <div className="grid grid-cols-[60px_1fr] gap-2">
+                  <input value={secDraft.id} onChange={e => setSecDraft(s => ({ ...s, id: e.target.value }))} placeholder="§1" className="rounded-lg border border-zinc-300 px-2 py-1.5 text-sm" />
+                  <input value={secDraft.title} onChange={e => setSecDraft(s => ({ ...s, title: e.target.value }))} placeholder="Section title" className="rounded-lg border border-zinc-300 px-2 py-1.5 text-sm" />
+                </div>
+                <input value={secDraft.hint} onChange={e => setSecDraft(s => ({ ...s, hint: e.target.value }))} placeholder="What goes here (hint)" className="w-full rounded-lg border border-zinc-300 px-2 py-1.5 text-sm" />
+                <input value={secDraft.pages} onChange={e => setSecDraft(s => ({ ...s, pages: e.target.value }))} placeholder="Pages (e.g. 1-2 pages)" className="w-full rounded-lg border border-zinc-300 px-2 py-1.5 text-sm" />
+                <button onClick={addSection} className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-indigo-700">+ Add section</button>
+              </div>
+
+              {draft.sections.length > 0 && (
+                <div className="rounded-xl border border-zinc-200 p-3 space-y-1">
+                  <div className="text-xs font-bold text-zinc-700">{draft.sections.length} sections</div>
+                  {draft.sections.map((s, i) => (
+                    <div key={i} className="flex items-center justify-between text-xs">
+                      <span className="text-zinc-700"><span className="font-mono text-indigo-700">{s.id}</span> {s.title}</span>
+                      <button onClick={() => setDraft(d => ({ ...d, sections: d.sections.filter((_, j) => j !== i) }))} className="text-rose-500 hover:text-rose-700">remove</button>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <button onClick={saveDraft} disabled={!draft.name.trim() || draft.sections.length === 0}
+                className="w-full rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-700 disabled:opacity-40">
+                Save custom template
+              </button>
+            </section>
+
+            <section className="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
+              <h2 className="mb-3 text-sm font-bold text-zinc-900">Saved custom templates ({customTemplates.length})</h2>
+              {customTemplates.length === 0 ? (
+                <div className="text-sm text-zinc-400 py-8 text-center">No custom templates yet. Build one on the left — it persists in localStorage and appears in the active-template selector.</div>
+              ) : (
+                <div className="space-y-2">
+                  {customTemplates.map(t => (
+                    <div key={t.id} className="rounded-xl border border-zinc-200 p-3">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <div className="text-sm font-bold text-zinc-900">{t.name}</div>
+                          <div className="text-xs text-indigo-700">{t.tagline} · {t.sections.length} sections</div>
+                        </div>
+                        <div className="flex gap-2">
+                          <button onClick={() => { setPreview(t.id); setTab("masters"); }} className="rounded bg-zinc-100 px-2 py-1 text-[10px] font-bold text-zinc-700 hover:bg-zinc-200">Preview</button>
+                          <button onClick={() => deleteTemplate(t.id)} className="rounded bg-rose-50 px-2 py-1 text-[10px] font-bold text-rose-700 hover:bg-rose-100">Delete</button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TemplateDetail({ t, styleMode }: { t: OmegaTemplate; styleMode: string }) {
+  const [showPrompt, setShowPrompt] = useState(false);
+  return (
+    <div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-bold text-zinc-900">{t.name}</h2>
+          <p className="text-sm text-indigo-700">{t.tagline}</p>
+        </div>
+        {t.custom && <span className="rounded-full bg-violet-100 px-2 py-0.5 text-[10px] font-bold text-violet-800">CUSTOM</span>}
+      </div>
+      <p className="mt-1 text-xs text-zinc-500">Replaces: {t.replaces}</p>
+
+      <div className="mt-4 space-y-2">
+        {t.sections.map(s => (
+          <div key={s.id} className="rounded-xl border border-zinc-100 bg-zinc-50 p-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-bold text-zinc-900"><span className="font-mono text-indigo-700">{s.id}</span> {s.title}</span>
+              {s.pages && <span className="text-[10px] text-zinc-400">{s.pages}</span>}
+            </div>
+            <p className="mt-1 text-xs text-zinc-600">{s.hint}</p>
+          </div>
+        ))}
+      </div>
+
+      {t.styleHooks.length > 0 && (
+        <div className="mt-4">
+          <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Style modulation hooks</div>
+          <div className="flex flex-wrap gap-1">
+            {t.styleHooks.map(h => <span key={h} className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] text-zinc-700">{h}</span>)}
+          </div>
+        </div>
+      )}
+
+      <button onClick={() => setShowPrompt(!showPrompt)} className="mt-4 text-xs font-bold text-indigo-600 hover:text-indigo-800">
+        {showPrompt ? "Hide" : "Show"} injected synthesis prompt
+      </button>
+      {showPrompt && (
+        <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap rounded-xl border border-zinc-200 bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-emerald-100">
+          {buildTemplatePrompt(t, styleMode)}
+        </pre>
+      )}
+    </div>
+  );
+}