2sagaco48 1.0.0

package/src/components/ConfigPanel.tsx

@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { GEMINI_MODELS, type GeminiModel } from "../lib/connectors/gemini";
+import type { SearchProvider } from "../lib/orchestrator";
+import { useAppState } from "../lib/app-state";
+
+interface Props {
+  hypothesisModel: GeminiModel;
+  setHypothesisModel: (m: GeminiModel) => void;
+  scoringModel: GeminiModel;
+  setScoringModel: (m: GeminiModel) => void;
+  searchProvider: SearchProvider;
+  setSearchProvider: (p: SearchProvider) => void;
+  useJinaRerank: boolean;
+  setUseJinaRerank: (b: boolean) => void;
+  tier: number | "auto";
+  setTier: (t: number | "auto") => void;
+}
+
+export function ConfigPanel(props: Props) {
+  const [open, setOpen] = useState(false);
+  const { keys, setKeys } = useAppState();
+  const [show, setShow] = useState<Record<string, boolean>>({});
+
+  function updateKey(k: "gemini" | "jina" | "serpapi" | "serpapiProxy" | "marketData", v: string) {
+    setKeys(prev => ({ ...prev, [k]: v }));
+  }
+
+  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">
+        <span className="text-sm font-bold text-zinc-900">Dashboard configuration</span>
+        <span className="text-zinc-400">{open ? "−" : "+"}</span>
+      </button>
+      {open && (
+        <div className="space-y-4 border-t border-zinc-200 p-4">
+          <div className="grid gap-3 sm:grid-cols-2">
+            {([
+              { k: "gemini", label: "Gemini / Gemma API key", ph: "AIza…" },
+              { k: "jina", label: "Jina API key", ph: "jina_…" },
+              { k: "serpapi", label: "SerpAPI key (optional)", ph: "(optional)" },
+              { k: "serpapiProxy", label: "SerpAPI CORS proxy", ph: "https://proxy/?url=" },
+              { k: "marketData", label: "Market data key (Alpha Vantage)", ph: "optional" },
+            ] as { k: "gemini" | "jina" | "serpapi" | "serpapiProxy" | "marketData"; label: string; ph: string }[]).map(({ k, label, ph }) => (
+              <div key={k} className="space-y-1">
+                <label className="text-xs font-semibold text-zinc-600">{label}</label>
+                <div className="relative">
+                  <input
+                    type={show[k] ? "text" : "password"}
+                    value={(keys[k] as string) ?? ""}
+                    onChange={e => updateKey(k, e.target.value)}
+                    placeholder={ph}
+                    className="w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm font-mono text-zinc-900 outline-none focus:border-indigo-500"
+                  />
+                  <button type="button" onClick={() => setShow(s => ({ ...s, [k]: !s[k] }))}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-zinc-400 hover:text-zinc-700">{show[k] ? "hide" : "show"}</button>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div>
+              <label className="text-xs font-semibold text-zinc-600">Hypothesis generator</label>
+              <select value={props.hypothesisModel} onChange={e => props.setHypothesisModel(e.target.value as GeminiModel)}
+                className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm">
+                {GEMINI_MODELS.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="text-xs font-semibold text-zinc-600">Judge / synthesizer</label>
+              <select value={props.scoringModel} onChange={e => props.setScoringModel(e.target.value as GeminiModel)}
+                className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm">
+                {GEMINI_MODELS.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
+              </select>
+            </div>
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div>
+              <label className="text-xs font-semibold text-zinc-600">Search provider</label>
+              <select value={props.searchProvider} onChange={e => props.setSearchProvider(e.target.value as SearchProvider)}
+                className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm">
+                <option value="jina">Jina Search (s.jina.ai)</option>
+                <option value="serpapi">SerpAPI</option>
+              </select>
+            </div>
+            <div>
+              <label className="text-xs font-semibold text-zinc-600">Tier</label>
+              <select value={props.tier} onChange={e => props.setTier(e.target.value === "auto" ? "auto" : Number(e.target.value))}
+                className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm">
+                <option value="auto">Auto (adaptive)</option>
+                {[0,1,2,3,4,5].map(n => <option key={n} value={n}>T{n}</option>)}
+              </select>
+            </div>
+            <div className="flex flex-col pt-5">
+              <label className="inline-flex items-center gap-2 text-sm text-zinc-700 cursor-pointer">
+                <input type="checkbox" checked={props.useJinaRerank} onChange={e => props.setUseJinaRerank(e.target.checked)} className="h-4 w-4 rounded" />
+                Jina rerank
+              </label>
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-amber-100 bg-amber-50 p-3 text-xs text-amber-900">
+            Keys here are shared with the Chat tab (same localStorage). SerpAPI typically blocks browser CORS — use Jina or supply a proxy.
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ControlPlanePage.tsx

@@ -0,0 +1,195 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { AnchorBaselinePanel } from "./AnchorBaselinePanel";
+import { useAppState } from "../lib/app-state";
+import { extractConstraints, summarizeConstraints } from "../lib/constraints";
+import { StylePersonaPanel } from "./StylePersonaPanel";
+import { MemoryStressPanel } from "./MemoryStressPanel";
+import { PrismaFetchTracePanel } from "./PrismaFetchTracePanel";
+
+type Section = "depth" | "tools" | "verification" | "output" | "runtime" | "governance";
+
+export function ControlPlanePage() {
+  const { input, lastRun, persona, reseedPersona, keys, model, settings, setSetting, debugEvents } = useAppState();
+  const constraints = input.trim() ? extractConstraints(input) : null;
+
+  const [config, setConfig] = useState({
+    research_tier: "AUTO",
+    reasoning_budget: "AUTO",
+    council_width: 5,
+    worker_depth: 9,
+    web_access: "on",
+    anchor_mode: "preferred",
+    verifier_alpha: 25,
+    entailment_threshold: 80,
+    require_verbatim: true,
+    falsification_gate: true,
+    output_format: "report",
+    citation_density: "every-claim",
+    driver_model: model,
+    token_ceiling: 300000,
+    time_ceiling: 1200,
+    audit_receipt: true,
+    cors_proxy: "",
+  });
+  const [active, setActive] = useState<Section>("depth");
+  const serialized = useMemo(() => JSON.stringify(config, null, 2), [config]);
+  const set = (key: keyof typeof config, value: string | number | boolean) =>
+    setConfig(p => ({ ...p, [key]: value }));
+
+  const keysConfigured = Object.entries(keys).filter(([, v]) => !!v).map(([k]) => k);
+
+  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="text-xs font-bold uppercase tracking-[0.2em] text-indigo-600">ATLAS-DR Control Plane</div>
+          <h1 className="mt-1 text-2xl font-bold tracking-tight text-zinc-900">Power-user dials for tiered research</h1>
+          <p className="mt-2 max-w-3xl text-sm text-zinc-600">
+            These controls map to the chat and GBSE strategy. All values here are advisory — enable them then run a query.
+          </p>
+        </section>
+
+        {/* Live shared state mirror — proves cross-page state */}
+        <section className="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 shadow-sm">
+          <div className="mb-2 text-[10px] font-bold uppercase tracking-[0.2em] text-emerald-700">Live shared state mirror (proves all pages share the same context)</div>
+          <div className="grid gap-2 text-xs sm:grid-cols-2 lg:grid-cols-4">
+            <div><span className="font-bold text-emerald-700">Current input:</span><div className="mt-0.5 font-mono text-zinc-800 truncate">{input || "(empty)"}</div></div>
+            <div><span className="font-bold text-emerald-700">Constraints:</span><div className="mt-0.5 font-mono text-zinc-800">{constraints ? summarizeConstraints(constraints) : "none"}</div></div>
+            <div><span className="font-bold text-emerald-700">Persona:</span><div className="mt-0.5 font-mono text-zinc-800">{persona.archetype.name} (seed {persona.seed})</div></div>
+            <div><span className="font-bold text-emerald-700">Keys configured:</span><div className="mt-0.5 font-mono text-zinc-800">{keysConfigured.join(", ") || "none"}</div></div>
+            {lastRun && (
+              <div className="sm:col-span-2 lg:col-span-4">
+                <span className="font-bold text-emerald-700">Last run:</span>
+                <div className="mt-0.5 font-mono text-zinc-800">
+                  "{lastRun.query.slice(0, 80)}…" → {lastRun.totalClaims} claims · {lastRun.sources} sources · {(lastRun.elapsedMs / 1000).toFixed(1)}s
+                </div>
+              </div>
+            )}
+          </div>
+        </section>
+
+        {/* App-level settings */}
+        <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">App-level toggles</h2>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            <Toggle label="4-Stage pipeline" sub="Logic Engine + Copywriter pass" checked={settings.deepResearch} onChange={v => setSetting("deepResearch", v)} accent />
+            <Toggle label="Show debug trace" sub="Debug events appear on all pages" checked={settings.showDebugTrace} onChange={v => setSetting("showDebugTrace", v)} />
+            <Toggle label="Auto-audit connectors" sub="Ping keys on page load" checked={settings.autoAuditConnectors} onChange={v => setSetting("autoAuditConnectors", v)} />
+          </div>
+        </section>
+
+        {/* Main config panels */}
+        <div className="grid gap-5 lg:grid-cols-[240px_1fr]">
+          <aside className="rounded-2xl border border-zinc-200 bg-white p-3 shadow-sm h-fit">
+            {(["depth", "tools", "verification", "output", "runtime", "governance"] as Section[]).map(s => (
+              <button key={s} onClick={() => setActive(s)}
+                className={`mb-1 block w-full rounded-xl px-3 py-2 text-left text-sm font-semibold capitalize transition-colors ${active === s ? "bg-zinc-900 text-white" : "text-zinc-700 hover:bg-zinc-100"}`}>
+                {s}
+              </button>
+            ))}
+          </aside>
+
+          <section className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
+            {active === "depth" && <Panel title="Depth">
+              <Select label="Research tier" value={config.research_tier} options={["AUTO","0","1","2","3","4","5"]} onChange={v => set("research_tier", v)} />
+              <Select label="Reasoning budget" value={config.reasoning_budget} options={["AUTO","low","medium","high","exhaustive"]} onChange={v => set("reasoning_budget", v)} />
+              <NumberInput label="Council width" value={config.council_width} min={1} max={32} onChange={v => set("council_width", v)} />
+              <NumberInput label="Worker depth" value={config.worker_depth} min={1} max={32} onChange={v => set("worker_depth", v)} />
+            </Panel>}
+            {active === "tools" && <Panel title="Tool scope">
+              <Select label="Web access" value={config.web_access} options={["on","trusted","off"]} onChange={v => set("web_access", v)} />
+              <Select label="Anchor mode" value={config.anchor_mode} options={["required","preferred","off"]} onChange={v => set("anchor_mode", v)} />
+              <label className="block text-xs font-semibold text-zinc-600 mt-2">
+                Custom CORS Proxy
+                <input 
+                  value={(config as any).cors_proxy ?? ""} 
+                  placeholder="https://cors-anywhere.herokuapp.com/" 
+                  onChange={e => set("cors_proxy", e.target.value)} 
+                  className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm" 
+                />
+              </label>
+              <Hint text="If direct browser fetch fails due to CORS, the app will rotate through public proxies. Use a custom one for higher reliability." />
+            </Panel>}
+            {active === "verification" && <Panel title="Verification">
+              <RangeInput label="Verifier alpha" value={config.verifier_alpha} min={10} max={40} suffix="%" onChange={v => set("verifier_alpha", v)} />
+              <RangeInput label="Entailment threshold" value={config.entailment_threshold} min={60} max={95} suffix="%" onChange={v => set("entailment_threshold", v)} />
+              <Toggle label="Require verbatim quote spans" checked={config.require_verbatim} onChange={v => set("require_verbatim", v)} />
+              <Toggle label="Falsification gate (construct ¬H)" checked={config.falsification_gate} onChange={v => set("falsification_gate", v)} />
+            </Panel>}
+            {active === "output" && <Panel title="Output">
+              <Select label="Format" value={config.output_format} options={["report","compact","json","slides","docs"]} onChange={v => set("output_format", v)} />
+              <Select label="Citation density" value={config.citation_density} options={["every-claim","load-bearing-only"]} onChange={v => set("citation_density", v)} />
+            </Panel>}
+            {active === "runtime" && <Panel title="Runtime">
+              <Select label="Driver model" value={config.driver_model} options={["frontier","gemma4-31b","qwen3.6","gemma4-e4b","apple-ondevice","bonsai-8b"]} onChange={v => set("driver_model", v)} />
+              <NumberInput label="Token ceiling" value={config.token_ceiling} min={2000} max={3000000} onChange={v => set("token_ceiling", v)} />
+              <NumberInput label="Time ceiling (seconds)" value={config.time_ceiling} min={15} max={5400} onChange={v => set("time_ceiling", v)} />
+              <div className="col-span-2 pt-2">
+                <MemoryStressPanel />
+                <div className="mt-3"><PrismaFetchTracePanel /></div>
+              </div>
+            </Panel>}
+            {active === "governance" && <Panel title="Governance">
+              <Toggle label="Audit receipt (SSCP/Merkle ledger)" checked={config.audit_receipt} onChange={v => set("audit_receipt", v)} />
+              <Hint text="Safety kernel, data-only context rule, injection defenses, and the 126 failure-mode guards remain active regardless of these settings." />
+            </Panel>}
+
+            <div className="mt-5 rounded-2xl border border-zinc-200 bg-zinc-950 p-4">
+              <div className="mb-2 text-xs font-bold uppercase tracking-[0.18em] text-emerald-300">atlas.config.json (portable)</div>
+              <pre className="max-h-64 overflow-auto text-xs leading-relaxed text-emerald-100">{serialized}</pre>
+            </div>
+          </section>
+        </div>
+
+        {/* Williams style persona panel */}
+        <StylePersonaPanel persona={persona} onReseed={seed => reseedPersona(seed)} />
+
+        {/* Anchor baseline panel */}
+        <AnchorBaselinePanel />
+
+        {/* Debug events (cross-page) */}
+        {settings.showDebugTrace && (
+          <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">Cross-page debug events (all pages)</div>
+            <div className="max-h-48 overflow-y-auto font-mono text-[11px] space-y-0.5">
+              {debugEvents.length === 0
+                ? <div className="text-zinc-500 py-2">No events yet. Run a query in Chat or Dashboard.</div>
+                : debugEvents.slice(-60).map((e, i) => <div key={i} className="text-emerald-200">{e}</div>)
+              }
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Panel({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div>
+      <h2 className="mb-4 text-lg font-bold text-zinc-900">{title}</h2>
+      <div className="grid gap-4 sm:grid-cols-2">{children}</div>
+    </div>
+  );
+}
+function Select({ label, value, options, onChange }: { label: string; value: string; options: string[]; onChange: (v: string) => void }) {
+  return <label className="block text-xs font-semibold text-zinc-600">{label}<select value={value} onChange={e => onChange(e.target.value)} className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm">{options.map(o => <option key={o} value={o}>{o}</option>)}</select></label>;
+}
+function NumberInput({ label, value, min, max, onChange }: { label: string; value: number; min: number; max: number; onChange: (v: number) => void }) {
+  return <label className="block text-xs font-semibold text-zinc-600">{label}<input type="number" min={min} max={max} value={value} onChange={e => onChange(Number(e.target.value))} className="mt-1 w-full rounded-xl border border-zinc-300 px-3 py-2 text-sm" /></label>;
+}
+function RangeInput({ label, value, min, max, suffix, onChange }: { label: string; value: number; min: number; max: number; suffix: string; onChange: (v: number) => void }) {
+  return <label className="block text-xs font-semibold text-zinc-600">{label} {value}{suffix}<input type="range" min={min} max={max} value={value} onChange={e => onChange(Number(e.target.value))} className="mt-2 w-full" /></label>;
+}
+function Toggle({ label, sub, checked, onChange, accent }: { label: string; sub?: string; checked: boolean; onChange: (v: boolean) => void; accent?: boolean }) {
+  return (
+    <label className={`flex items-start justify-between rounded-xl border px-3 py-2.5 cursor-pointer ${accent && checked ? "border-indigo-300 bg-indigo-50" : "border-zinc-200"}`}>
+      <div><div className="text-sm font-semibold text-zinc-700">{label}</div>{sub && <div className="text-[10px] text-zinc-500 mt-0.5">{sub}</div>}</div>
+      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} className="h-4 w-4 rounded mt-0.5 shrink-0" />
+    </label>
+  );
+}
+function Hint({ text }: { text: string }) {
+  return <div className="rounded-xl border border-indigo-100 bg-indigo-50 p-3 text-xs leading-relaxed text-indigo-900">{text}</div>;
+}

package/src/components/CreativeTreeLifePage.tsx

@@ -0,0 +1,234 @@
+/** V10 Creative Tree of Life — independent animated 3D discovery studio. */
+import { useEffect, useMemo, useState } from "react";
+import {
+  CreativeStudio, V10CreativeStore, buildV10DiscoveryContext,
+  type CreativeBrief, type CreativeMode, type LifeStage, type NodeRecord, type IdeaCard,
+} from "@/lib/innovation-genome-v10";
+
+interface Props { initialDomain?: string; onClose?: () => void; onDirectiveChange?: (d: string) => void; }
+const DOMAINS = ["mathematics","algorithms","software","medicine","legal","physics","chemistry","ml","general"];
+const COLORS: Record<LifeStage, string> = { seed:"#a87945", sprout:"#8bd17c", branch:"#4fbd73", bloom:"#f29ac4", fruit:"#ffd166", compost:"#8d6e63" };
+
+function TreeCanvas({ nodes, edges, active, select }: { nodes: NodeRecord[]; edges: Array<{ source_node_id: string; target_node_id: string; relation: string }>; active: string | null; select: (n: NodeRecord) => void }) {
+  const positions = useMemo(() => {
+    const layers = new Map<number, NodeRecord[]>();
+    nodes.forEach(n => layers.set(n.depth, [...(layers.get(n.depth) || []), n]));
+    const out = new Map<string, { x: number; y: number; z: number }>();
+    for (const [depth, layer] of layers) {
+      layer.forEach((n, i) => {
+        const spread = Math.max(130, Math.min(680, layer.length * 92));
+        const offset = layer.length === 1 ? 0 : i / (layer.length - 1) - 0.5;
+        out.set(n.nodeId, { x: 380 + offset * spread, y: 360 - depth * 56 - Math.abs(offset) * 25, z: Math.min(1, depth / 5) });
+      });
+    }
+    return out;
+  }, [nodes]);
+
+  return (
+    <svg viewBox="0 0 760 430" className="h-full w-full" role="img" aria-label="Animated 3D Creative Tree of Life">
+      <defs>
+        <radialGradient id="v10-ground"><stop offset="0" stopColor="#1b3a2e" /><stop offset="1" stopColor="#07100e" /></radialGradient>
+        <linearGradient id="v10-trunk" x1="0" y1="1" x2="0" y2="0"><stop stopColor="#a8784b" /><stop offset=".5" stopColor="#61412c" /><stop offset="1" stopColor="#2b201b" /></linearGradient>
+        <filter id="v10-glow"><feGaussianBlur stdDeviation="3" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
+      </defs>
+      <ellipse cx="380" cy="382" rx="230" ry="28" fill="url(#v10-ground)" />
+      <path d="M380 374 C365 320 395 270 380 215" fill="none" stroke="url(#v10-trunk)" strokeWidth="20" strokeLinecap="round" />
+      {edges.map((e, i) => {
+        const a = positions.get(e.source_node_id), b = positions.get(e.target_node_id);
+        if (!a || !b) return null;
+        const d = `M ${a.x} ${a.y} Q ${(a.x + b.x) / 2} ${Math.min(a.y, b.y) - 28} ${b.x} ${b.y}`;
+        return (
+          <g key={`${e.source_node_id}-${e.target_node_id}-${i}`}>
+            <path d={d} fill="none" stroke="#315b4b" strokeWidth="7" strokeLinecap="round" opacity=".75" />
+            <circle r="4" fill="#f4c86b" filter="url(#v10-glow)">
+              <animateMotion dur={`${3 + i % 3}s`} path={d} repeatCount="indefinite" />
+            </circle>
+          </g>
+        );
+      })}
+      {nodes.map(n => {
+        const p = positions.get(n.nodeId) || { x: 380, y: 350, z: 0 };
+        const selected = active === n.nodeId;
+        const r = n.lifeStage === "seed" ? 18 : n.lifeStage === "fruit" ? 15 : 10 + (1 - p.z) * 3;
+        return (
+          <g key={n.nodeId} transform={`translate(${p.x} ${p.y})`} onClick={() => select(n)} className="cursor-pointer">
+            <ellipse rx={r * 1.6} ry={r * 0.48} cy={r * 0.95} fill="#020504" opacity=".4" />
+            <circle r={r + (selected ? 5 : 0)} fill={selected ? "#fff3bc" : COLORS[n.lifeStage]} stroke={selected ? "#fff" : "#10241c"} strokeWidth={selected ? 3 : 2}>
+              <animate attributeName="r" values={`${r};${r + 2};${r}`} dur="3s" repeatCount="indefinite" />
+            </circle>
+            <text y={r + 18} textAnchor="middle" fill="#d7e6df" fontSize="9">{n.title.slice(0, 22)}</text>
+            <text y={r + 30} textAnchor="middle" fill="#77968a" fontSize="8">{n.lifeStage}</text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+export function CreativeTreeLifePage({ initialDomain = "general", onClose, onDirectiveChange }: Props) {
+  const [studio] = useState(() => new CreativeStudio(new V10CreativeStore()));
+  const [workspaceId, setWorkspaceId] = useState<string | null>(null);
+  const [ver, setVer] = useState(0);
+  const [domain, setDomain] = useState(initialDomain);
+  const [active, setActive] = useState<NodeRecord | null>(null);
+  const [directive, setDirective] = useState("");
+  const [angles, setAngles] = useState<string[]>([]);
+  const [notice, setNotice] = useState("");
+
+  const nodes = useMemo(() => workspaceId ? studio.nodes(workspaceId) : [], [workspaceId, ver]);
+  const ranking = useMemo(() => workspaceId ? studio.rankIdeas(workspaceId) : [], [workspaceId, ver]);
+  const edges = useMemo(() => workspaceId ? studio.edgesFor(workspaceId) : [], [workspaceId, ver]);
+  const workspaces = useMemo(() => studio.listWorkspaces(), [ver]);
+
+  const publish = () => {
+    if (!workspaceId) return;
+    try {
+      const w = studio.workspace(workspaceId);
+      const c = buildV10DiscoveryContext((w.brief as CreativeBrief).challenge, (w.brief as CreativeBrief).mode, w.seed as number);
+      setDirective(c.directive); setAngles(c.searchAngles);
+      (window as any)._VERITAS_V10_DISCOVERY_CONTEXT = c;
+      window.dispatchEvent(new CustomEvent("veritas:v10-discovery-context", { detail: c }));
+      onDirectiveChange?.(c.directive);
+    } catch { /* workspace may not exist yet */ }
+  };
+  useEffect(publish, [workspaceId, ver]);
+
+  const mutate = (fn: () => unknown, msg: string) => { try { fn(); setVer(v => v + 1); setNotice(msg); } catch (e) { setNotice(e instanceof Error ? e.message : String(e)); } };
+
+  const create = () => {
+    const brief: CreativeBrief = {
+      challenge: `Discover feasible, high-impact directions in ${domain}`,
+      mode: "research" as CreativeMode,
+      audience: ["independent researcher", "product builder"],
+      desiredOutcomes: ["evidence-bound next step", "specific search angle"],
+      constraints: ["preserve uncertainty", "locally inspectable"],
+      resources: ["retrieved evidence", "scraper results", "human judgment"],
+      inspirationDomains: [domain, "scientific instrumentation", "ecology"],
+      avoid: ["generic repetition", "unsupported novelty claims"],
+      axes: { evidence_strategy: ["primary sources", "counter-evidence", "implementation evidence", "failure evidence"] },
+    };
+    const id = studio.createWorkspaceSimple("Live Discovery Tree", brief, Date.now());
+    setWorkspaceId(id);
+    studio.sprout(id, 6);
+    studio.burst(id, { count: 10, candidateMultiplier: 4, maximumSimilarity: 0.82, minimumOperatorFamilies: 6 });
+    setVer(v => v + 1);
+    setNotice("Tree seeded: 6 sprouts + 10 branches");
+  };
+
+  return (
+    <div className="fixed inset-0 z-[10003] overflow-y-auto bg-[#07100e] p-4 text-zinc-100 sm:p-8">
+      <div className="mx-auto min-h-full max-w-[1500px] rounded-[28px] border border-emerald-950 bg-[#0a1714] p-5 shadow-2xl sm:p-7" onClick={e => e.stopPropagation()}>
+        {/* Header */}
+        <header className="flex flex-wrap items-start justify-between gap-4 border-b border-emerald-950 pb-5">
+          <div>
+            <div className="text-[10px] uppercase tracking-[.3em] text-emerald-400">V10 · offline discovery plane</div>
+            <h2 className="mt-1 text-2xl font-black">Creative Tree of Life</h2>
+            <p className="mt-1 max-w-2xl text-xs text-emerald-100/60">Animated local graph. Generated branches remain unverified proposals; human judgment controls promotion.</p>
+          </div>
+          <div className="flex gap-2">
+            <button onClick={create} className="rounded-lg bg-emerald-500 px-3 py-2 text-xs font-bold text-emerald-950">New tree</button>
+            {onClose && <button onClick={onClose} className="rounded-lg border border-emerald-900 px-3 py-2 text-xs font-bold">Close</button>}
+          </div>
+        </header>
+
+        {/* Controls bar */}
+        <div className="mt-4 flex flex-wrap items-center gap-3 border-b border-emerald-950 pb-4 text-xs">
+          <label className="flex items-center gap-2 text-emerald-100/70">Domain
+            <select value={domain} onChange={e => setDomain(e.target.value)} className="rounded-md border border-emerald-800 bg-[#0e211c] px-2 py-1">
+              {DOMAINS.map(d => <option key={d}>{d}</option>)}
+            </select>
+          </label>
+          <label className="flex items-center gap-2 text-emerald-100/70">Workspace
+            <select value={workspaceId || ""} onChange={e => { setWorkspaceId(e.target.value); setVer(v => v + 1); }} className="max-w-[250px] rounded-md border border-emerald-800 bg-[#0e211c] px-2 py-1">
+              <option value="">choose tree</option>
+              {workspaces.map((w: any) => <option key={w.workspace_id} value={w.workspace_id}>{w.title}</option>)}
+            </select>
+          </label>
+          {notice && <span className="text-amber-300">{notice}</span>}
+        </div>
+
+        {!workspaceId ? (
+          <div className="grid min-h-[500px] place-items-center text-emerald-100/50">Create new tree to begin offline discovery.</div>
+        ) : (
+          <>
+            {/* Main: 3D graph + growth controls */}
+            <div className="mt-5 grid gap-5 xl:grid-cols-[1.6fr_.9fr]">
+              <section className="rounded-2xl border border-emerald-950 bg-[#08120f] p-3">
+                <div className="mb-2 flex justify-between px-2 text-[10px] uppercase tracking-[.22em] text-emerald-400">
+                  <span>3D living graph · animated flow</span><span>{nodes.length} nodes</span>
+                </div>
+                <div className="aspect-[16/9]">
+                  <TreeCanvas nodes={nodes} edges={edges} active={active?.nodeId || null} select={setActive} />
+                </div>
+              </section>
+
+              <section className="space-y-4">
+                <div className="rounded-2xl border border-emerald-950 bg-[#0d211b] p-4">
+                  <div className="text-[10px] uppercase tracking-[.22em] text-emerald-400">Growth controls</div>
+                  <div className="mt-3 grid grid-cols-2 gap-2">
+                    <button onClick={() => mutate(() => studio.sprout(workspaceId, 6), "6 sprouts added")} className="rounded-lg bg-sky-600 px-3 py-2 text-xs font-bold">Sprout</button>
+                    <button onClick={() => mutate(() => studio.burst(workspaceId, { count: 8, candidateMultiplier: 4, maximumSimilarity: 0.82, minimumOperatorFamilies: 6 }), "8 branches grown")} className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-bold">Burst</button>
+                    <button disabled={!active} onClick={() => active && mutate(() => studio.expand(active.nodeId, "resolve bottleneck", 5), "Fractal expansion added")} className="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-bold disabled:opacity-30">Expand</button>
+                    <button disabled={!active} onClick={() => active && mutate(() => studio.fractalZoom(active.nodeId, 4), "Fractal zoom added")} className="rounded-lg bg-violet-600 px-3 py-2 text-xs font-bold disabled:opacity-30">Zoom</button>
+                  </div>
+                </div>
+
+                <div className="rounded-2xl border border-emerald-950 bg-[#0d211b] p-4">
+                  <div className="text-[10px] uppercase tracking-[.22em] text-emerald-400">Logic + search modifier</div>
+                  <pre className="mt-3 max-h-44 overflow-auto whitespace-pre-wrap text-[10px] leading-relaxed text-emerald-100/80">{directive || "Create tree to compile directive."}</pre>
+                  <div className="mt-3 space-y-1">
+                    {angles.slice(0, 4).map((q, i) => (
+                      <div key={i} className="rounded-md border border-emerald-900 bg-[#08120f] px-2 py-1 text-[10px] text-amber-200">S{i + 1} · {q}</div>
+                    ))}
+                  </div>
+                </div>
+              </section>
+            </div>
+
+            {/* Bottom: selected branch + ranking */}
+            <div className="mt-5 grid gap-5 xl:grid-cols-[.9fr_1.1fr]">
+              <section className="rounded-2xl border border-emerald-950 bg-[#0d211b] p-4">
+                <div className="text-[10px] uppercase tracking-[.22em] text-emerald-400">Selected branch</div>
+                {active ? (
+                  <>
+                    <h3 className="mt-2 text-lg font-bold">{active.title}</h3>
+                    <div className="mt-1 text-[10px] text-emerald-100/50">
+                      {active.lifeStage} · {active.status} · novelty {active.localNovelty.toFixed(2)} · cohesion {active.cohesion.toFixed(2)}
+                    </div>
+                    <p className="mt-3 text-xs leading-relaxed text-emerald-100/80">
+                      {(active.body as IdeaCard).thesis || (active.body as Record<string, unknown>).text as string || "Open tree node."}
+                    </p>
+                    <div className="mt-4 flex flex-wrap gap-2">
+                      <button onClick={() => mutate(() => studio.confirm(active.nodeId, "overall", "confirm", 5, "human V10 review"), "Confirmed")} className="rounded-md bg-emerald-600 px-2 py-1 text-[10px] font-bold">Confirm</button>
+                      <button onClick={() => mutate(() => studio.confirm(active.nodeId, "overall", "reject", 5, "human V10 rejection"), "Rejected and preserved")} className="rounded-md bg-rose-700 px-2 py-1 text-[10px] font-bold">Reject</button>
+                      <button onClick={() => mutate(() => studio.compost(active.nodeId, "human preserved failure reason"), "Moved to compost")} className="rounded-md bg-stone-600 px-2 py-1 text-[10px] font-bold">Compost</button>
+                    </div>
+                  </>
+                ) : (
+                  <p className="mt-3 text-xs text-emerald-100/50">Select glowing node in graph.</p>
+                )}
+              </section>
+
+              <section className="rounded-2xl border border-emerald-950 bg-[#0d211b] p-4">
+                <div className="text-[10px] uppercase tracking-[.22em] text-emerald-400">Advisory ranking + exports</div>
+                <div className="mt-3 max-h-52 space-y-1 overflow-auto">
+                  {ranking.slice(0, 8).map(r => (
+                    <button key={r.node.nodeId} onClick={() => setActive(r.node)} className="flex w-full items-center justify-between rounded-md border border-emerald-950 bg-[#08120f] px-2 py-1.5 text-left text-[10px] hover:border-emerald-500">
+                      <span className="truncate">{r.node.title}</span>
+                      <span className="ml-2 text-amber-300">{r.score.toFixed(2)}</span>
+                    </button>
+                  ))}
+                </div>
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {(["json", "markdown", "mermaid", "terminal"] as const).map(format => (
+                    <button key={format} onClick={() => workspaceId && navigator.clipboard.writeText(studio.exportWorkspace(workspaceId, format))} className="rounded-md border border-emerald-800 px-2 py-1 text-[10px]">Copy {format}</button>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}