2sagaco48 1.0.0

package/src/components/GBSDashboard.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useRef, useState } from "react";
+import { ConfigPanel } from "./ConfigPanel";
+import { HypothesisPanel } from "./HypothesisPanel";
+import { TraceLog } from "./TraceLog";
+import { HUD } from "./HUD";
+import { GraphView } from "./GraphView";
+import { AnswerPanel } from "./AnswerPanel";
+import { TestPanel } from "./TestPanel";
+import { FailureModesPanel } from "./FailureModesPanel";
+import { ReportOSPanel } from "./ReportOSPanel";
+import { LiveResourceHUD } from "./LiveResourceHUD";
+import type { GeminiModel } from "../lib/connectors/gemini";
+import { runResearch, type ApiKeys as OrchKeys, type SearchProvider, type TraceEvt } from "../lib/orchestrator";
+import type { BeliefState } from "../lib/gbse/types";
+import type { RelevanceGraph } from "../lib/gbse/graph";
+import { useAppState } from "../lib/app-state";
+import { extractConstraints, summarizeConstraints } from "../lib/constraints";
+import { TIERS } from "../lib/gbse/tiers";
+
+const EXAMPLES = [
+  "Is a heat pump lower-carbon than a gas furnace in a cold climate?",
+  "Does intermittent fasting cause meaningful weight loss in healthy adults?",
+  "Is Rust faster than Go for I/O-bound network services?",
+  "What are the key failure modes of lithium-ion battery packs at scale?",
+];
+
+export function GBSDashboard() {
+  const app = useAppState();
+  const keys = app.keys;
+
+  const [hypothesisModel, setHypothesisModel] = useState<GeminiModel>("gemini-2.5-flash");
+  const [scoringModel, setScoringModel] = useState<GeminiModel>("gemini-2.5-flash-lite");
+  const [searchProvider, setSearchProvider] = useState<SearchProvider>("jina");
+  const [useJinaRerank, setUseJinaRerank] = useState(true);
+  const [tier, setTier] = useState<number | "auto">("auto");
+
+  const orchKeys: OrchKeys = {
+    gemini: keys.gemini,
+    jina: keys.jina,
+    serpapi: keys.serpapi,
+    serpapiProxy: keys.serpapiProxy,
+  };
+
+  const [running, setRunning] = useState(false);
+  const [events, setEvents] = useState<TraceEvt[]>([]);
+  const [state, setState] = useState<BeliefState | null>(null);
+  const [graph, setGraph] = useState<RelevanceGraph | null>(null);
+  const [answer, setAnswer] = useState("");
+  const [totalTokens, setTotalTokens] = useState(0);
+  const [actualTier, setActualTier] = useState<number | null>(null);
+  const [startMs, setStartMs] = useState(0);
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!running) return;
+    const id = window.setInterval(() => setElapsedMs(Date.now() - startMs), 200);
+    return () => window.clearInterval(id);
+  }, [running, startMs]);
+
+  const constraints = app.input.trim() ? extractConstraints(app.input) : null;
+  const tierSpec = actualTier !== null ? TIERS[actualTier] : null;
+
+  // Prefer this page's own run; otherwise show the shared belief state/graph
+  // produced by the legacy Bayesian engine on the LAST chat input (real data).
+  const liveState = state ?? app.beliefState;
+  const liveGraph = graph ?? app.relevanceGraph;
+
+  async function handleRun() {
+    if (!keys.gemini) { setError("Gemini API key required (set in Chat → Keys)."); return; }
+    if (!app.input.trim()) { setError("Enter a query in the shared input above."); return; }
+    setError(null); setEvents([]); setState(null); setGraph(null);
+    setAnswer(""); setTotalTokens(0); setActualTier(null);
+    setRunning(true); setStartMs(Date.now()); setElapsedMs(0);
+    app.pushDebugEvent("GBSE dashboard run started");
+    const controller = new AbortController();
+    abortRef.current = controller;
+    try {
+      const result = await runResearch({
+        query: app.input, keys: orchKeys, hypothesisModel, scoringModel,
+        searchProvider, useJinaRerank,
+        tierOverride: tier === "auto" ? undefined : tier,
+        signal: controller.signal,
+        onEvent: (e) => {
+          setEvents(prev => [...prev, e]);
+          app.pushDebugEvent(`[GBSE] [${e.phase}] ${e.message}`);
+          if (e.phase === "tier" && e.data && typeof e.data === "object" && "tier" in e.data) {
+            setActualTier((e.data as { tier: number }).tier);
+          }
+        },
+        onState: (s, g, toks) => {
+          setState({ ...s, hyps: { ...s.hyps } });
+          setGraph(g);
+          setTotalTokens(toks);
+        },
+      });
+      setState(result.state); setGraph(result.graph);
+      setAnswer(result.finalAnswer); setTotalTokens(result.totalTokens);
+      setActualTier(result.tier);
+      app.setLastRun({
+        query: app.input, model: hypothesisModel as unknown as import("../lib/models").ModelId,
+        finalAnswer: result.finalAnswer, totalTokens: result.totalTokens,
+        elapsedMs: Date.now() - startMs, sources: result.graph?.nodes.size ?? 0,
+        verifiedClaims: 0, totalClaims: Object.keys(result.state.hyps).length,
+        constraints: constraints ?? undefined, startedAt: startMs, finishedAt: Date.now(),
+      });
+      app.pushDebugEvent(`GBSE run complete — ${Object.keys(result.state.hyps).length} hypotheses`);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setError(msg);
+      setEvents(prev => [...prev, { ts: Date.now(), phase: "error", level: "error", message: msg }]);
+    } finally { setRunning(false); }
+  }
+
+  return (
+    <div className="bg-zinc-50 pb-10">
+      <div className="mx-auto max-w-7xl space-y-4 px-4 py-5">
+        {/* Header */}
+        <div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <div className="text-xs font-bold uppercase tracking-[0.2em] text-indigo-600">Advanced Dashboard</div>
+              <h1 className="mt-0.5 text-xl font-bold text-zinc-900">GBSE — Bayesian Belief Search Engine</h1>
+              <p className="mt-1 text-sm text-zinc-500">Log-odds · Wald SPRT · Signed Personalized PageRank · Hypothesis pruning</p>
+            </div>
+            {tierSpec && (
+              <div className="rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-2 text-center">
+                <div className="text-[10px] font-bold uppercase tracking-wider text-indigo-500">Active tier</div>
+                <div className="font-mono text-lg font-bold text-indigo-900">{tierSpec.name}</div>
+                <div className="text-[10px] text-indigo-600">{(tierSpec.forecastCoverage * 100).toFixed(0)}% coverage · {(tierSpec.maxTokens / 1000).toFixed(0)}K tokens</div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <ConfigPanel
+          hypothesisModel={hypothesisModel} setHypothesisModel={setHypothesisModel}
+          scoringModel={scoringModel} setScoringModel={setScoringModel}
+          searchProvider={searchProvider} setSearchProvider={setSearchProvider}
+          useJinaRerank={useJinaRerank} setUseJinaRerank={setUseJinaRerank}
+          tier={tier} setTier={setTier}
+        />
+
+        {/* Shared query input */}
+        <div className="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
+          <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
+            <label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Research query (shared across all pages)</label>
+            {constraints && (
+              <span className="rounded-full border border-indigo-100 bg-indigo-50 px-2 py-0.5 font-mono text-[10px] text-indigo-800">
+                constraints: {summarizeConstraints(constraints)}
+              </span>
+            )}
+          </div>
+          <textarea
+            value={app.input}
+            onChange={e => app.setInput(e.target.value)}
+            rows={2}
+            className="w-full resize-none rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm text-zinc-900 outline-none focus:border-indigo-500"
+            placeholder="Query is shared with Chat tab. Edits here appear there and vice versa."
+          />
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            <button onClick={handleRun} disabled={running || !app.input.trim()}
+              className="rounded-xl bg-emerald-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed">
+              {running ? "Running…" : "Run Bayesian Search"}
+            </button>
+            {running && (
+              <button onClick={() => { abortRef.current?.abort(); setRunning(false); }}
+                className="rounded-xl border border-zinc-300 px-4 py-2.5 text-sm text-zinc-700 hover:bg-zinc-100">
+                Stop
+              </button>
+            )}
+            <div className="flex flex-wrap gap-1">
+              {EXAMPLES.map(q => (
+                <button key={q} onClick={() => app.setInput(q)} disabled={running}
+                  className="rounded-lg border border-zinc-200 px-2 py-1 text-[11px] text-zinc-600 hover:bg-zinc-100 disabled:opacity-40">
+                  {q.slice(0, 38)}…
+                </button>
+              ))}
+            </div>
+          </div>
+          {error && <div className="mt-2 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-800">{error}</div>}
+        </div>
+
+        {/* Live Resource HUD */}
+        <LiveResourceHUD />
+
+        {/* AEGIS-PHI HUD */}
+        <div className="grid md:grid-cols-2 gap-4">
+          <HUD state={liveState} tier={actualTier} totalTokens={totalTokens}
+            graphNodes={liveGraph?.nodes.size ?? 0} graphEdges={liveGraph?.edges.length ?? 0}
+            elapsedMs={elapsedMs} running={running} />
+          <LiveResourceHUD />
+        </div>
+
+        {/* Coverage bar */}
+        {tierSpec && (
+          <div className="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm font-bold text-zinc-900">Forecast coverage</span>
+              <span className="font-mono text-sm font-bold text-indigo-700">{(tierSpec.forecastCoverage * 100).toFixed(0)}%</span>
+            </div>
+            <div className="h-3 w-full overflow-hidden rounded-full bg-zinc-100">
+              <div className="h-full bg-gradient-to-r from-sky-400 to-indigo-500 rounded-full transition-all duration-1000"
+                style={{ width: `${tierSpec.forecastCoverage * 100}%` }} />
+            </div>
+            <div className="mt-1 flex justify-between text-[10px] text-zinc-400">
+              <span>0% (no coverage)</span>
+              <span>Residual: ~{(100 - tierSpec.forecastCoverage * 100).toFixed(0)}% (paywalled/post-cutoff)</span>
+              <span>100%</span>
+            </div>
+          </div>
+        )}
+
+        {/* Hypotheses + Trace */}
+        <div className="grid gap-4 lg:grid-cols-2">
+          <HypothesisPanel state={liveState} />
+          <div className="flex flex-col" style={{ minHeight: 420 }}>
+            <TraceLog events={events} title="GBSE reasoning trace" />
+          </div>
+        </div>
+
+        {/* Graph */}
+        <GraphView graph={liveGraph} />
+
+        {/* ReportOS v3 calculation engines + verification gates */}
+        <ReportOSPanel />
+
+        {/* Answer + Tests */}
+        <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
+          <AnswerPanel answer={answer || (app.beliefState ? app.lastRun?.finalAnswer ?? "" : "")} state={liveState} />
+          <TestPanel />
+        </div>
+
+        <FailureModesPanel />
+      </div>
+    </div>
+  );
+}

package/src/components/GraphView.tsx

@@ -0,0 +1,116 @@
+import { useMemo, useState, useEffect } from "react";
+import * as Comlink from "comlink";
+import type { RelevanceGraph } from "../lib/gbse/graph";
+
+interface Pos { x: number; y: number; }
+
+export function GraphView({ graph, queryNid = "__query__" }: { graph: RelevanceGraph | null; queryNid?: string }) {
+  const [ranked, setRanked] = useState<Array<{ nid: string; label: string; score: number }>>([]);
+
+  useEffect(() => {
+    if (!graph || graph.nodes.size === 0) return;
+    const worker = new Worker(new URL("../lib/gbse/graph.worker.ts", import.meta.url));
+    const api = Comlink.wrap<any>(worker);
+    
+    const nodes = Array.from(graph.nodes.values());
+    const edges = graph.edges;
+    
+    api.calculateRelevance(nodes, edges, graph.cfg, queryNid).then((r: any) => {
+      setRanked(r);
+      worker.terminate();
+    });
+  }, [graph, queryNid]);
+
+  const layout = useMemo(() => {
+    if (!ranked || ranked.length === 0) return null;
+    const scoreMap = new Map(ranked.map((r) => [r.nid, r.score]));
+    const W = 720, H = 360, cx = W / 2, cy = H / 2;
+    const positions = new Map<string, Pos>();
+    positions.set(queryNid, { x: cx, y: cy });
+    
+    const others = ranked.filter((r) => r.nid !== queryNid);
+    const hyps = others.filter((r) => r.nid.startsWith("H"));
+    const entities = others.filter((r) => r.nid.startsWith("E:"));
+    const sources = others.filter((r) => r.nid.startsWith("S:"));
+    const misc = others.filter(r => !r.nid.startsWith("H") && !r.nid.startsWith("E:") && !r.nid.startsWith("S:") && r.nid !== queryNid);
+
+    function ring(items: typeof ranked, radius: number, phase = 0) {
+      items.forEach((it, i) => {
+        const a = phase + (2 * Math.PI * i) / Math.max(items.length, 1);
+        positions.set(it.nid, { x: cx + radius * Math.cos(a), y: cy + radius * Math.sin(a) });
+      });
+    }
+    ring(hyps, 95);
+    ring(entities, 138, Math.PI / 7);
+    ring(sources, 168, Math.PI / 4);
+    ring(misc, 178, Math.PI / 3);
+    return { positions, scoreMap, W, H };
+  }, [ranked, queryNid]);
+
+  if (!graph || !layout) {
+    return (
+      <div className="flex h-56 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-sm text-zinc-400 shadow-sm">
+        Signed Personalized PageRank graph appears once hypotheses are seeded.
+      </div>
+    );
+  }
+
+  const { positions, scoreMap, W, H } = layout;
+  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">
+        <span className="text-sm font-bold text-zinc-900">Signed PPR — relevance graph</span>
+        <span className="text-[11px] text-zinc-500">{graph.nodes.size} nodes · {graph.edges.length} edges</span>
+      </div>
+      <div className="overflow-x-auto bg-zinc-50/50 p-2">
+        <svg viewBox={`0 0 ${W} ${H}`} className="h-[360px] w-full">
+          <defs>
+            <marker id="ap" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
+              <path d="M0,0 L10,5 L0,10 z" fill="#10b981" />
+            </marker>
+            <marker id="an" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
+              <path d="M0,0 L10,5 L0,10 z" fill="#f43f5e" />
+            </marker>
+          </defs>
+          {graph.edges.map((e, i) => {
+            const a = positions.get(e.src);
+            const b = positions.get(e.dst);
+            if (!a || !b) return null;
+            const pos = e.signedWeight >= 0;
+            const w = Math.max(0.5, Math.min(3, Math.abs(e.signedWeight) * 2.5));
+            return (
+              <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
+                stroke={pos ? "#10b981" : "#f43f5e"} strokeOpacity={0.45} strokeWidth={w}
+                markerEnd={pos ? "url(#ap)" : "url(#an)"} />
+            );
+          })}
+          {[...positions.entries()].map(([nid, p]) => {
+            const score = scoreMap.get(nid) ?? 0;
+            const node = graph.nodes.get(nid);
+            const isQ = nid === queryNid;
+            const isH = nid.startsWith("H");
+            const isE = nid.startsWith("E:");
+            const r = isQ ? 20 : 7 + 11 * score;
+            const fill = isQ ? "#6366f1" : isH ? "#0ea5e9" : isE ? "#a78bfa" : "#94a3b8";
+            return (
+              <g key={nid}>
+                <circle cx={p.x} cy={p.y} r={r} fill={fill} fillOpacity={0.88} stroke="#fff" strokeWidth={1.5} />
+                <text x={p.x} y={p.y + r + 10} textAnchor="middle" fill="#374151" fontSize={9} fontFamily="ui-monospace,monospace">
+                  {(node?.label ?? nid).slice(0, 24)}
+                </text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+      <div className="flex flex-wrap gap-4 border-t border-zinc-100 px-4 py-2 text-[11px] text-zinc-500">
+        <span><span className="inline-block h-2 w-2 rounded-full bg-indigo-500 mr-1" />query</span>
+        <span><span className="inline-block h-2 w-2 rounded-full bg-sky-500 mr-1" />hypothesis</span>
+        <span><span className="inline-block h-2 w-2 rounded-full bg-violet-400 mr-1" />entity</span>
+        <span><span className="inline-block h-2 w-2 rounded-full bg-slate-400 mr-1" />source</span>
+        <span><span className="inline-block h-0.5 w-4 bg-emerald-400 align-middle mr-1" />support</span>
+        <span><span className="inline-block h-0.5 w-4 bg-rose-400 align-middle mr-1" />refute</span>
+      </div>
+    </div>
+  );
+}

package/src/components/HUD.tsx

@@ -0,0 +1,125 @@
+import { useAppState } from "../lib/app-state";
+import { TIERS } from "../lib/gbse/tiers";
+import { shortHash } from "../lib/sscp";
+import { posterior as calcPosterior } from "../lib/gbse/engine";
+import type { BeliefState } from "../lib/gbse/types";
+
+interface Props {
+  state?: BeliefState | null;
+  tier?: number | null;
+  totalTokens?: number;
+  graphNodes?: number;
+  graphEdges?: number;
+  elapsedMs?: number;
+  running?: boolean;
+  className?: string;
+}
+
+/**
+ * AEGIS-PHI Engine HUD
+ * Fully wired to REAL live telemetry from the shared app state.
+ * No mock data. Values update in real-time as pipeline stages advance.
+ */
+export function HUD(props: Props) {
+  const { telemetry: t, sscpReceipt, lastRun } = useAppState();
+
+  // Bayesian metrics from local state if provided (Dashboard), else from telemetry
+  const state = props.state ?? null;
+  const post = state ? calcPosterior(state) : {};
+  const ranked = Object.entries(post).sort((a, b) => b[1] - a[1]);
+  const leaderP = ranked[0]?.[1] ?? 0;
+
+  const tier = props.tier ?? lastRun?.tier ?? t.tier;
+  const spec = tier !== null && tier !== undefined ? TIERS[tier] : null;
+  
+  // Real measured values
+  const elapsed = props.elapsedMs ?? t.elapsedMs;
+  const totalTokens = props.totalTokens ?? (t.tokensIn + t.tokensOut);
+  const tools = t.toolCalls;
+  const sources = t.sources;
+  
+  // Progress & Status
+  const running = props.running ?? t.running;
+  const status = running ? "RUNNING" : (t.phase === "complete" ? "SEALED" : "IDLE");
+  const statusColor = running 
+    ? "text-sky-700 bg-sky-50 border-sky-200" 
+    : (t.phase === "complete" ? "text-emerald-700 bg-emerald-50 border-emerald-200" : "text-zinc-500 bg-zinc-50 border-zinc-200");
+
+  const progress = Math.min(100, (t.pipelineStage / 7) * 100);
+
+  function Stat({ label, value, sub, accent }: { label: string; value: string; sub?: string; accent?: boolean }) {
+    return (
+      <div className="rounded-xl border border-zinc-200 bg-white px-3 py-2 shadow-sm transition-all duration-300">
+        <div className="text-[10px] font-bold uppercase tracking-[0.1em] text-zinc-400">{label}</div>
+        <div className={`mt-0.5 font-mono text-base font-bold ${accent ? "text-indigo-700" : "text-zinc-900"}`}>{value}</div>
+        {sub && <div className="mt-0.5 text-[10px] text-zinc-500 truncate" title={sub}>{sub}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`rounded-2xl border border-zinc-200 bg-zinc-50/80 p-4 shadow-sm backdrop-blur-sm ${props.className ?? ""}`}>
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="grid h-5 w-5 place-items-center rounded bg-zinc-900 font-bold text-[10px] text-white">Φ</div>
+          <span className="text-sm font-bold text-zinc-900 tracking-tight">AEGIS-PHI Engine HUD</span>
+        </div>
+        <span className={`rounded-full border px-2.5 py-0.5 text-[10px] font-bold ${statusColor}`}>{status}</span>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-8">
+        <Stat label="Time" value={`${(elapsed / 1000).toFixed(1)}s`} sub={spec ? `cap ${spec.maxSeconds}s` : "real-time"} accent={running} />
+        <Stat label="Tokens" value={fmtNum(totalTokens)} sub={`${fmtNum(t.tokensIn)} in / ${fmtNum(t.tokensOut)} out`} />
+        <Stat label="Tools" value={String(tools)} sub={`${t.searchCalls} search · ${t.modelCalls} model`} />
+        <Stat label="Sources" value={String(sources)} sub="verified docs" />
+        <Stat label="Hypotheses" value={String(state ? Object.keys(state.hyps).length : t.hypotheses)} sub="active paths" />
+        <Stat label={state ? "Leader P" : "Claims"} value={state ? leaderP.toFixed(3) : `${t.claimsVerified}/${t.claimsTotal}`} sub={state ? "posterior" : "grounded"} accent={state ? leaderP > 0.7 : t.claimsVerified > 0} />
+        <Stat label="Coverage" value={t.measuredCoverage === null ? "—" : `${(t.measuredCoverage * 100).toFixed(0)}%`} sub={t.measuredCoverage === null ? "not measured" : `${t.coverageNumerator}/${t.coverageDenominator} facets`} accent={t.measuredCoverage !== null && t.measuredCoverage > 0.7} />
+        <Stat label="SSCP Seal" value={sscpReceipt ? shortHash(sscpReceipt.stateRootHash) : "—"} sub={sscpReceipt ? "SHA-256 Merkle" : "pending seal"} accent={!!sscpReceipt} />
+      </div>
+
+      <div className="mt-4 flex items-center gap-4">
+        <div className="flex-1">
+          <div className="mb-1 flex items-center justify-between text-[10px] font-bold uppercase tracking-wider text-zinc-400">
+            <span>Pipeline Execution Trace</span>
+            <span>Stage {t.pipelineStage}/7 ({progress.toFixed(0)}%)</span>
+          </div>
+          <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-200">
+            <div 
+              className={`h-full transition-all duration-700 ease-out ${running ? "bg-indigo-600 shadow-[0_0_8px_rgba(79,70,229,0.4)]" : "bg-emerald-500"}`}
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+        <div className="hidden shrink-0 items-center gap-3 border-l border-zinc-200 pl-4 sm:flex">
+          <Indicator label="Injection" ok={t.injectionsBlocked === 0} warn={t.injectionsBlocked > 0} />
+          <Indicator label="Sanitizer" ok={t.sanitizerStrips === 0} warn={t.sanitizerStrips > 0} />
+          <Indicator label="Anchor" ok={t.anchorCoverage !== null && t.anchorCoverage > 0.5} warn={t.anchorCoverage !== null && t.anchorCoverage <= 0.5} off={t.anchorCoverage === null} />
+        </div>
+      </div>
+      
+      {running && (
+        <div className="mt-3 flex items-center gap-2 border-t border-zinc-200/50 pt-2 text-[11px] text-zinc-600 italic">
+          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-sky-500" />
+          Active Reasoning Trace: {t.phase}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Indicator({ label, warn, off }: { label: string; ok: boolean; warn?: boolean; off?: boolean }) {
+  const color = off ? "bg-zinc-300" : warn ? "bg-amber-400" : "bg-emerald-500";
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className={`h-1.5 w-1.5 rounded-full ${color}`} />
+      <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">{label}</span>
+    </div>
+  );
+}
+
+function fmtNum(n: number): string {
+  if (n >= 1000000) return (n/1000000).toFixed(1) + "M";
+  if (n >= 1000) return (n/1000).toFixed(1) + "K";
+  return String(n);
+}

package/src/components/HypothesisPanel.tsx

@@ -0,0 +1,67 @@
+import type { BeliefState } from "../lib/gbse/types";
+import { entropy, posterior, countSupportingSources } from "../lib/gbse/engine";
+
+export function HypothesisPanel({ state }: { state: BeliefState | null }) {
+  if (!state) {
+    return (
+      <div className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm text-center text-sm text-zinc-400">
+        No belief state yet. Run a Bayesian search to see hypothesis tracking.
+      </div>
+    );
+  }
+  const post = posterior(state);
+  const sorted = Object.entries(post).sort((a, b) => b[1] - a[1]);
+  const ent = entropy(state);
+
+  return (
+    <div className="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
+      <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-2.5">
+        <span className="text-sm font-bold text-zinc-900">Hypotheses (posterior)</span>
+        <div className="flex items-center gap-3 text-[11px] text-zinc-500">
+          <span>entropy <span className="font-mono font-bold text-zinc-800">{ent.toFixed(3)}</span></span>
+          <span>{sorted.length} living</span>
+        </div>
+      </div>
+      <div className="divide-y divide-zinc-100 max-h-96 overflow-y-auto">
+        {sorted.map(([hid, p]) => {
+          const h = state.hyps[hid];
+          const isWinner = state.committed === hid;
+          const supportCount = countSupportingSources(h);
+          const refuteCount = h.evidence.filter(e => e.verdict === "refute").length;
+          const silentCount = h.evidence.filter(e => e.verdict === "silent").length;
+          return (
+            <div key={hid} className={`p-3 ${isWinner ? "bg-emerald-50/70" : ""}`}>
+              <div className="mb-1.5 flex items-center justify-between gap-2">
+                <div className="flex items-center gap-1.5">
+                  {isWinner && <span className="text-emerald-600 font-bold">✓</span>}
+                  <span className="font-mono text-[10px] text-zinc-400">{hid}</span>
+                  {!h.alive && !isWinner && <span className="rounded bg-zinc-100 px-1 text-[9px] text-zinc-500">PRUNED</span>}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-xs font-bold text-zinc-700">{(p * 100).toFixed(1)}%</span>
+                  <span className="font-mono text-[10px] text-zinc-400">logw={h.logw.toFixed(2)}</span>
+                </div>
+              </div>
+              <div className={`text-sm mb-2 ${h.alive ? "text-zinc-900" : "text-zinc-400 line-through"}`}>{h.text}</div>
+              <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-100">
+                <div
+                  className={`h-full rounded-full transition-all duration-700 ${isWinner ? "bg-emerald-500" : "bg-sky-500"}`}
+                  style={{ width: `${Math.max(2, p * 100)}%` }}
+                />
+              </div>
+              <div className="mt-2 flex flex-wrap gap-3 text-[10px] text-zinc-500">
+                <span title="distinct supporting sources" className="text-emerald-700 font-semibold">↑ {supportCount} support</span>
+                <span className="text-rose-700">↓ {refuteCount} refute</span>
+                {silentCount > 0 && <span>· {silentCount} silent</span>}
+                <span className="font-mono">{h.spentTokens.toLocaleString()} tok</span>
+                <span className={`font-mono ${h.anchorVerdict === "support" ? "text-emerald-600" : h.anchorVerdict === "refute" ? "text-rose-600" : "text-zinc-400"}`}>
+                  anchor:{h.anchorVerdict}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}