2sagaco48 1.0.0

package/src/components/TestPanel.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { runTests, type TestResult } from "../lib/gbse/tests";
+
+export function TestPanel() {
+  const [results, setResults] = useState<TestResult[] | null>(null);
+  const [running, setRunning] = useState(false);
+  const passed = results?.filter(r => r.pass).length ?? 0;
+  const total = results?.length ?? 0;
+
+  async function run() {
+    setRunning(true);
+    await new Promise(r => setTimeout(r, 0));
+    setResults(runTests());
+    setRunning(false);
+  }
+
+  const score = total > 0 ? Math.round((passed / total) * 100) : 0;
+
+  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">Engine self-tests</span>
+        <button onClick={run} disabled={running}
+          className="rounded-lg bg-zinc-900 px-3 py-1 text-xs font-bold text-white hover:bg-zinc-700 disabled:opacity-40">
+          {running ? "Running…" : "Run all"}
+        </button>
+      </div>
+      {results === null ? (
+        <div className="p-4 text-sm text-zinc-400">
+          Click <em>Run all</em> to verify log-odds additivity, SPRT semantics, posterior normalization, signed PPR cancellation, and the min-sources guard.
+        </div>
+      ) : (
+        <>
+          <div className="flex items-center gap-3 border-b border-zinc-100 px-4 py-2">
+            <div className={`text-xs font-mono font-bold ${passed === total ? "text-emerald-700" : "text-amber-700"}`}>
+              {passed}/{total} passed
+            </div>
+            <div className="flex-1 h-1.5 overflow-hidden rounded-full bg-zinc-100">
+              <div className={`h-full rounded-full ${passed === total ? "bg-emerald-500" : "bg-amber-500"}`}
+                style={{ width: `${score}%` }} />
+            </div>
+            <div className="text-xs text-zinc-400">{score}%</div>
+          </div>
+          <ul className="divide-y divide-zinc-50 max-h-64 overflow-y-auto">
+            {results.map((r, i) => (
+              <li key={i} className="px-4 py-2.5">
+                <div className="flex items-start gap-2">
+                  <span className={`text-sm font-bold shrink-0 ${r.pass ? "text-emerald-600" : "text-rose-600"}`}>
+                    {r.pass ? "✓" : "✗"}
+                  </span>
+                  <div>
+                    <div className="text-sm text-zinc-900">{r.name}</div>
+                    {r.detail && <div className="font-mono text-[10px] text-zinc-500 mt-0.5">{r.detail}</div>}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/TraceLog.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from "react";
+import type { TraceEvt } from "../lib/orchestrator";
+import { useAppState } from "../lib/app-state";
+
+const COLORS: Record<TraceEvt["level"], string> = {
+  info: "text-zinc-700",
+  ok: "text-emerald-700",
+  warn: "text-amber-700",
+  error: "text-rose-700",
+};
+
+const PHASE_ICONS: Record<string, string> = {
+  tier: "🎯", hypotheses: "🧠", state: "📦", search: "🔍",
+  rerank: "🎚", evidence: "📊", score: "⚖", commit: "🔒",
+  synthesis: "✍", tier0: "⚡", error: "🔴",
+};
+
+interface Props {
+  events: TraceEvt[];
+  title?: string;
+}
+
+export function TraceLog({ events, title = "Reasoning trace" }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [filter, setFilter] = useState<TraceEvt["level"] | "all">("all");
+  const { debugEvents, settings } = useAppState();
+
+  useEffect(() => {
+    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
+  }, [events.length, debugEvents.length]);
+
+  const shown = filter === "all" ? events : events.filter(e => e.level === filter);
+
+  return (
+    <div className="flex h-full flex-col 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">
+        <span className="text-sm font-semibold text-zinc-900">{title}</span>
+        <div className="flex items-center gap-1">
+          {(["all", "ok", "warn", "error"] as const).map(f => (
+            <button key={f} onClick={() => setFilter(f)}
+              className={`rounded px-2 py-0.5 text-[10px] font-bold uppercase ${filter === f ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"}`}>
+              {f}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div ref={ref} className="flex-1 overflow-y-auto p-3 font-mono text-[11px] leading-relaxed">
+        {shown.length === 0 && debugEvents.length === 0 ? (
+          <div className="py-6 text-center text-zinc-400">
+            No trace events yet. Run a query in the GBSE dashboard to see the Bayesian engine trace here.
+          </div>
+        ) : (
+          <>
+            {shown.map((e, i) => (
+              <div key={i} className="mb-0.5 flex gap-2 border-b border-zinc-50 pb-0.5">
+                <span className="shrink-0 text-zinc-400">{new Date(e.ts).toLocaleTimeString()}</span>
+                <span className="shrink-0">{PHASE_ICONS[e.phase] ?? "•"}</span>
+                <span className="shrink-0 text-zinc-500">[{e.phase}]</span>
+                <span className={`${COLORS[e.level]} break-words min-w-0`}>{e.message}</span>
+              </div>
+            ))}
+            {/* If debug mode on, also show chat debug events */}
+            {settings.showDebugTrace && debugEvents.length > 0 && (
+              <>
+                <div className="mt-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-emerald-600 border-t border-zinc-100 pt-2">Chat pipeline debug</div>
+                {debugEvents.map((e, i) => (
+                  <div key={`d${i}`} className="mb-0.5 text-emerald-700">{e}</div>
+                ))}
+              </>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Live count */}
+      <div className="border-t border-zinc-100 px-4 py-1.5 text-[10px] text-zinc-400 flex items-center justify-between">
+        <span>{shown.length} events{filter !== "all" ? ` (${filter} only)` : ""}</span>
+        {events.length > 0 && (
+          <span>
+            {events.filter(e => e.level === "ok").length} ok ·{" "}
+            {events.filter(e => e.level === "warn").length} warn ·{" "}
+            {events.filter(e => e.level === "error").length} err
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}