agent-regression-lab 0.3.0 → 0.5.0

package/dist/ui-assets/client.js

@@ -17481,13 +17481,13 @@ var require_react_dom_client_development = __commonJS({
       function getHoistableRoot(container2) {
         return "function" === typeof container2.getRootNode ? container2.getRootNode() : 9 === container2.nodeType ? container2 : container2.ownerDocument;
       }
-      function preconnectAs(rel, href, crossOrigin) {
+      function preconnectAs(rel2, href, crossOrigin) {
         var ownerDocument = globalDocument;
         if (ownerDocument && "string" === typeof href && href) {
           var limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-          limitedEscapedHref = 'link[rel="' + rel + '"][href="' + limitedEscapedHref + '"]';
+          limitedEscapedHref = 'link[rel="' + rel2 + '"][href="' + limitedEscapedHref + '"]';
           "string" === typeof crossOrigin && (limitedEscapedHref += '[crossorigin="' + crossOrigin + '"]');
-          preconnectsSet.has(limitedEscapedHref) || (preconnectsSet.add(limitedEscapedHref), rel = { rel, crossOrigin, href }, null === ownerDocument.querySelector(limitedEscapedHref) && (href = ownerDocument.createElement("link"), setInitialProperties(href, "link", rel), markNodeAsHoistable(href), ownerDocument.head.appendChild(href)));
+          preconnectsSet.has(limitedEscapedHref) || (preconnectsSet.add(limitedEscapedHref), rel2 = { rel: rel2, crossOrigin, href }, null === ownerDocument.querySelector(limitedEscapedHref) && (href = ownerDocument.createElement("link"), setInitialProperties(href, "link", rel2), markNodeAsHoistable(href), ownerDocument.head.appendChild(href)));
         }
       }
       function getResource(type, currentProps, pendingProps, currentResource) {
@@ -21724,479 +21724,916 @@ var import_client = __toESM(require_client(), 1);
 // src/ui/App.tsx
 var import_react = __toESM(require_react(), 1);
 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
+function getRoute() {
+  const url = new URL(window.location.href);
+  if (url.pathname.startsWith("/runs/")) {
+    return { type: "detail", runId: decodeURIComponent(url.pathname.slice("/runs/".length)) };
+  }
+  if (url.pathname === "/compare-suite") {
+    return {
+      type: "compare-suite",
+      baselineBatch: url.searchParams.get("baselineBatch") ?? void 0,
+      candidateBatch: url.searchParams.get("candidateBatch") ?? void 0
+    };
+  }
+  if (url.pathname === "/compare") {
+    return {
+      type: "compare",
+      baseline: url.searchParams.get("baseline") ?? void 0,
+      candidate: url.searchParams.get("candidate") ?? void 0
+    };
+  }
+  return { type: "list" };
+}
+function sc(status) {
+  if (status === "pass") return "p";
+  if (status === "fail") return "f";
+  return "w";
+}
+function scColor(status) {
+  if (status === "pass") return "var(--pass)";
+  if (status === "fail") return "var(--fail)";
+  return "var(--warn)";
+}
+function dur(ms) {
+  if (ms >= 1e4) return `${(ms / 1e3).toFixed(0)}s`;
+  if (ms >= 1e3) return `${(ms / 1e3).toFixed(1)}s`;
+  return `${ms}ms`;
+}
+function rel(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const m = Math.floor(diff / 6e4);
+  if (m < 1) return "just now";
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+function avgScore(runs) {
+  if (runs.length === 0) return "\u2014";
+  return (runs.reduce((s, r) => s + r.score, 0) / runs.length).toFixed(2);
+}
+function riskClass(risk) {
+  if (risk === "high") return "miss";
+  if (risk === "medium") return "extra";
+  return "match";
+}
+function getEventKind(type) {
+  if (type === "tool_call" || type === "tool_result") return "tool";
+  if (type.startsWith("assistant")) return "asst";
+  if (type.startsWith("eval")) return "eval";
+  return "user";
+}
+function getEventLabel(type) {
+  const map = {
+    tool_call: "Tool",
+    tool_result: "Result",
+    assistant_turn: "Assistant",
+    user_turn: "User",
+    evaluator_result: "Eval",
+    evaluator_results: "Eval"
+  };
+  return map[type] ?? type.replace(/_/g, " ");
+}
+function getEventTitle(event) {
+  const p = event.payload;
+  if (event.type === "tool_call") {
+    return String(p.tool_name ?? p.toolName ?? p.name ?? "tool call");
+  }
+  if (event.type === "tool_result") {
+    return `${String(p.tool_name ?? p.toolName ?? "tool")} \u2192 ${String(p.status ?? "ok")}`;
+  }
+  if (event.type === "assistant_turn") {
+    const content = String(p.content ?? p.text ?? "");
+    return content.slice(0, 80) || "assistant response";
+  }
+  if (event.type === "user_turn") {
+    const content = String(p.content ?? p.text ?? "");
+    return content.slice(0, 80) || "user message";
+  }
+  return event.type.replace(/_/g, " ");
+}
+function getEventBody(event) {
+  const p = event.payload;
+  if (Object.keys(p).length === 0) return null;
+  if (event.type === "assistant_turn" || event.type === "user_turn") {
+    const content = String(p.content ?? p.text ?? "");
+    if (content.length > 80) return content;
+    const other = Object.fromEntries(
+      Object.entries(p).filter(([k]) => k !== "content" && k !== "text")
+    );
+    return Object.keys(other).length > 0 ? JSON.stringify(other, null, 2) : null;
+  }
+  return JSON.stringify(p, null, 2);
+}
 function App() {
   const route = getRoute();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "shell", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "topbar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "brand", href: "/", children: "Agent Regression Lab Alpha" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "page", children: [
-      route.type === "list" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunListPage, {}) : null,
-      route.type === "detail" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunDetailPage, { runId: route.runId }) : null,
-      route.type === "compare" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComparePage, { baseline: route.baseline, candidate: route.candidate }) : null,
-      route.type === "compare-suite" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuiteComparePage, { baselineBatch: route.baselineBatch, candidateBatch: route.candidateBatch }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Chrome, { route }),
+    route.type === "list" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunsView, {}) : null,
+    route.type === "detail" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DetailView, { runId: route.runId }) : null,
+    route.type === "compare" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompareView, { baseline: route.baseline, candidate: route.candidate }) : null,
+    route.type === "compare-suite" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SuiteCompareView,
+      {
+        baselineBatch: route.baselineBatch,
+        candidateBatch: route.candidateBatch
+      }
+    ) : null
+  ] });
+}
+function Chrome({ route }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "chrome", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "brand", href: "/", children: "ARL" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "brand-meta", children: "agentlab v0.4.0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", { className: "nav", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: `nv-btn${route.type === "list" ? " on" : ""}`, href: "/", children: "Runs" }),
+      route.type === "detail" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nv-btn on", children: "Detail" }) : null,
+      route.type === "compare" || route.type === "compare-suite" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nv-btn on", children: "Compare" }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "live", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "live-dot" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "LIVE" })
     ] })
   ] });
 }
-function RunListPage() {
+function RunsView() {
   const [runs, setRuns] = (0, import_react.useState)([]);
-  const [suite, setSuite] = (0, import_react.useState)("");
-  const [status, setStatus] = (0, import_react.useState)("");
-  const [provider, setProvider] = (0, import_react.useState)("");
+  const [filter, setFilter] = (0, import_react.useState)("");
+  const inputRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
-    const url = new URL("/api/runs", window.location.origin);
-    if (suite) url.searchParams.set("suite", suite);
-    if (status) url.searchParams.set("status", status);
-    if (provider) url.searchParams.set("provider", provider);
-    void fetch(url).then((response) => response.json()).then((data) => setRuns(Array.isArray(data.runs) ? data.runs : []));
-  }, [suite, status, provider]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Runs" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Inspect local alpha runs, filter failures, and compare behavior changes." })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "filters", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { value: suite, onChange: (event) => setSuite(event.target.value), placeholder: "Suite" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: status, onChange: (event) => setStatus(event.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "All statuses" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "pass", children: "Pass" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "fail", children: "Fail" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "error", children: "Error" })
+    void fetch("/api/runs").then((r) => r.json()).then((data) => setRuns(Array.isArray(data.runs) ? data.runs : []));
+  }, []);
+  const filtered = filter ? runs.filter(
+    (r) => r.scenarioId.toLowerCase().includes(filter.toLowerCase()) || r.suite.toLowerCase().includes(filter.toLowerCase())
+  ) : runs;
+  const stats = summarizeRuns(runs);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "view-body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sb-kicker", children: "Session" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-title", children: [
+          "Agent ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { children: "Regression" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+          "Lab"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tally", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-v${stats.pass > 0 ? " p" : ""}`, children: stats.pass }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Pass" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-v${stats.fail > 0 ? " f" : ""}`, children: stats.fail }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Fail" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-v${stats.error > 0 ? " w" : ""}`, children: stats.error }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Error" })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: provider, onChange: (event) => setProvider(event.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "All providers" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "mock", children: "Mock" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "openai", children: "OpenAI" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "external_process", children: "External process" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sb-filter", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "filt", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "filt-i", children: "/" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            className: "filt-in",
+            placeholder: "filter scenarios\u2026",
+            value: filter,
+            onChange: (e) => setFilter(e.target.value)
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-list", children: [
+        filtered.length === 0 && runs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "run-list-empty", children: "No runs yet. Run a scenario from the CLI." }) : null,
+        filtered.map((run, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: `run ${sc(run.status)}`, href: `/runs/${run.id}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-name", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `run-dot ${sc(run.status)}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "run-name-text", children: run.scenarioId })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `run-score ${sc(run.status)}`, children: run.score.toFixed(1) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-meta", children: [
+            run.suite,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--ink-lo)", margin: "0 3px" }, children: "\xB7" }),
+            dur(run.durationMs),
+            i > 0 && filtered[i - 1].scenarioId === run.scenarioId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginLeft: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "a",
+              {
+                href: `/compare?baseline=${filtered[i - 1].id}&candidate=${run.id}`,
+                style: { color: "var(--accent)", fontSize: ".65rem" },
+                onClick: (e) => e.stopPropagation(),
+                children: "compare prev"
+              }
+            ) }) : null
+          ] })
+        ] }, run.id))
       ] })
     ] }),
-    runs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: "No runs yet", description: "Run a scenario from the CLI to populate the lab." }) : null,
-    runs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Run" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Scenario" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Provider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Status" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Score" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Runtime" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Steps" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Started" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: runs.map((run, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/runs/${run.id}`, children: run.id }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: run.scenarioId }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
-          run.provider ?? "-",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted", children: run.modelId ?? run.agentLabel ?? "" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-p", children: "$" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmd-t", children: [
+          "agentlab ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w", children: "list" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-caret" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${run.status}`, children: run.status }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: run.score }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
-          run.durationMs,
-          "ms"
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd-r", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "\u21B5" }),
+            "open"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "c" }),
+            "compare"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "/" }),
+            "filter"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scroll", children: runs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyIdle, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ov-hero", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "oh-eyebrow", children: "Session overview" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "oh-num", children: [
+            stats.total,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "unit", children: "runs" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "oh-sub", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "hi", children: [
+              stats.pass,
+              " passed"
+            ] }),
+            ", ",
+            stats.fail,
+            " failed,",
+            " ",
+            stats.error,
+            " ",
+            stats.error === 1 ? "error" : "errors",
+            ". Average score",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hi", children: avgScore(runs) }),
+            "."
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: run.totalSteps }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
-          new Date(run.startedAt).toLocaleString(),
-          index > 0 && runs[index - 1].scenarioId === run.scenarioId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/compare?baseline=${runs[index - 1].id}&candidate=${run.id}`, children: "compare previous" }) }) : null,
-          index > 0 && runs[index - 1].suite === run.suite && runs[index - 1].suiteBatchId && run.suiteBatchId && runs[index - 1].suiteBatchId !== run.suiteBatchId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/compare-suite?baselineBatch=${runs[index - 1].suiteBatchId}&candidateBatch=${run.suiteBatchId}`, children: "compare suite batch" }) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "chart-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "chart-h", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Score over time" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "chart-h-r", children: [
+              runs.length,
+              " samples"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScoreChart, { runs })
         ] })
-      ] }, run.id)) })
-    ] }) : null
+      ] }) })
+    ] })
   ] });
 }
-function RunDetailPage(props) {
+function DetailView({ runId }) {
   const [detail, setDetail] = (0, import_react.useState)(null);
+  const [siblings, setSiblings] = (0, import_react.useState)([]);
   (0, import_react.useEffect)(() => {
-    void fetch(`/api/runs/${props.runId}`).then((response) => response.json()).then((data) => setDetail(data));
-  }, [props.runId]);
-  if (!detail) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: "Loading run", description: "Fetching run detail from the local lab." });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: detail.run.id }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: detail.run.scenarioId })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FailureSummaryPanel, { detail }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Status", value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${detail.run.status}`, children: detail.run.status }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Score", value: detail.run.score }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Runtime", value: `${detail.run.durationMs}ms` }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Steps", value: detail.run.totalSteps })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "panel-grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Summary" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Provider:" }),
-          " ",
-          detail.agentVersion?.provider ?? "-"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Model:" }),
-          " ",
-          detail.agentVersion?.modelId ?? "-"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunIdentitySummary, { detail }),
-        detail.agentVersion?.command ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Command:" }),
-          " ",
-          detail.agentVersion.command,
-          " ",
-          (detail.agentVersion.args ?? []).join(" ")
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Termination:" }),
-          " ",
-          detail.run.terminationReason
+    void fetch(`/api/runs/${runId}`).then((r) => r.json()).then((data) => {
+      setDetail(data);
+      return fetch("/api/runs").then((r) => r.json()).then((all) => {
+        const items = Array.isArray(all.runs) ? all.runs : [];
+        setSiblings(items.filter((r) => r.scenarioId === data.run.scenarioId));
+      });
+    });
+  }, [runId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "view-body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-kicker", children: [
+          "Run \xB7 ",
+          runId.slice(0, 8)
         ] }),
-        detail.errorDetail ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Error:" }),
-          " ",
-          detail.errorDetail
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Final output:" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: detail.run.finalOutput || "(none)" })
+        detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-title", children: [
+            detail.run.scenarioId.split("-")[0],
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("em", { children: [
+              "\u2014",
+              detail.run.scenarioId.split("-").slice(1).join("-")
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tally", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-v ${sc(detail.run.status)}`, children: detail.run.score.toFixed(1) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Score" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-v", children: detail.run.totalSteps }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Steps" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-v", children: dur(detail.run.durationMs) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Time" })
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sb-title", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { children: "Loading\u2026" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Evaluators" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: detail.evaluatorResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${result.status}`, children: result.status }),
-          " ",
-          result.evaluatorId,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted", children: result.message })
-        ] }, result.evaluatorId)) })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Tool Calls" }),
-      detail.toolCalls.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No tool calls recorded." }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: detail.toolCalls.map((call) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: call.toolName }),
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${call.status}`, children: call.status }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify({ input: call.input, output: call.output }, null, 2) })
-      ] }, call.id)) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "run-list", children: siblings.map((run) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "a",
+        {
+          className: `run ${sc(run.status)}${run.id === runId ? " on" : ""}`,
+          href: `/runs/${run.id}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-name", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `run-dot ${sc(run.status)}` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "run-name-text", children: run.id.slice(0, 12) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `run-score ${sc(run.status)}`, children: run.score.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "run-meta", children: run.id === runId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--accent)" }, children: "current" }) : rel(run.startedAt) })
+          ]
+        },
+        run.id
+      )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Trace" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "timeline", children: detail.traceEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
-            event.stepIndex,
-            ". ",
-            event.type
-          ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-p", children: "$" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmd-t", children: [
+          "agentlab ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w", children: "show" }),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "muted", children: event.source })
+          runId,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-caret" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(event.payload, null, 2) })
-      ] }, event.eventId)) })
-    ] })
-  ] });
-}
-function FailureSummaryPanel(props) {
-  const failureItems = getFailureSummaryItems(props.detail);
-  if (failureItems.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Failures First" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Status:" }),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${props.detail.run.status}`, children: props.detail.run.status })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Termination:" }),
-      " ",
-      props.detail.run.terminationReason
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: failureItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: item }, item)) })
-  ] });
-}
-function RunIdentitySummary(props) {
-  const run = props.detail.run;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Variant set:" }),
-      " ",
-      run.variantSetName ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Variant:" }),
-      " ",
-      run.variantLabel ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Prompt version:" }),
-      " ",
-      run.promptVersion ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Model version:" }),
-      " ",
-      run.modelVersion ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Tool schema version:" }),
-      " ",
-      run.toolSchemaVersion ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Config label:" }),
-      " ",
-      run.configLabel ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Runtime profile:" }),
-      " ",
-      run.runtimeProfileName ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Suite definition:" }),
-      " ",
-      run.suiteDefinitionName ?? "-"
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd-r", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "\u2190" }),
+            "back"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "c" }),
+            "compare"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scroll", children: !detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "em-title", children: "Loading\u2026" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dh", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `dh-score ${sc(detail.run.status)}`, children: detail.run.score.toFixed(1) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dh-meta", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dh-kicker", children: detail.agentVersion?.provider ?? "agent" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dh-title", children: detail.run.scenarioId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dh-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "d", children: "model" }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "v", children: detail.agentVersion?.modelId ?? "\u2014" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "d", children: "runtime" }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "v", children: dur(detail.run.durationMs) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "d", children: "evals" }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "v", children: [
+                  detail.evaluatorResults.filter((e) => e.status === "pass").length,
+                  " /",
+                  " ",
+                  detail.evaluatorResults.length
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }),
+        detail.run.status !== "pass" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FailureBlock, { detail }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "trace-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ts-head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ts-title", children: [
+              "Trace",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: `ts-badge ts-badge-${detail.run.status === "pass" ? "complete" : "fail"}`,
+                  children: detail.run.status === "pass" ? "complete" : "failed"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ts-stats", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "v", children: detail.traceEvents.length }),
+              " steps \xB7",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "v", children: dur(detail.run.durationMs) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TraceTimeline, { events: detail.traceEvents })
+        ] })
+      ] }) })
     ] })
   ] });
 }
-function ComparePage(props) {
+function CompareView({
+  baseline,
+  candidate
+}) {
   const [data, setData] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
-    if (!props.baseline || !props.candidate) {
-      setData(null);
-      return;
-    }
+    if (!baseline || !candidate) return;
     const url = new URL("/api/compare", window.location.origin);
-    url.searchParams.set("baseline", props.baseline);
-    url.searchParams.set("candidate", props.candidate);
-    void fetch(url).then((response) => response.json()).then((payload) => setData(payload));
-  }, [props.baseline, props.candidate]);
-  if (!props.baseline || !props.candidate) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: "No comparison selected", description: "Open the compare page with baseline and candidate run ids." });
-  }
-  if (!data) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: "Loading comparison", description: "Fetching both runs and computing deltas." });
+    url.searchParams.set("baseline", baseline);
+    url.searchParams.set("candidate", candidate);
+    void fetch(url).then((r) => r.json()).then((p) => setData(p));
+  }, [baseline, candidate]);
+  if (!baseline || !candidate) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "view-body", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "main", style: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-p", children: "$" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmd-t", style: { color: "var(--ink-lo)" }, children: [
+          "agentlab compare \u2026",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-caret" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyIdle, {})
+    ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Compare" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: data.baseline.run.scenarioId })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Classification", value: data.classification }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Score delta", value: signed(data.deltas.score) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Runtime delta", value: `${signed(data.deltas.runtimeMs)}ms` }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Step delta", value: signed(data.deltas.steps) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Notes" }),
-      data.notes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No material differences recorded." }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: data.notes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: note }, note)) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "panel-grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Evaluator diffs" }),
-        data.evaluatorDiffs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No evaluator changes." }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: data.evaluatorDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-          diff.note,
-          diff.hardGate ? " (hard gate)" : ""
-        ] }, diff.evaluatorId)) })
+  const tone = data ? data.classification.includes("regress") ? "fail" : data.classification.includes("improv") ? "pass" : "neutral" : "neutral";
+  const toneColor = tone === "fail" ? "var(--fail)" : tone === "pass" ? "var(--pass)" : "var(--ink-mid)";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "view-body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sb-kicker", style: { color: toneColor }, children: data?.classification ?? "Comparing\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-title", style: { color: tone === "neutral" ? "var(--ink)" : toneColor }, children: [
+          data ? (data.deltas.score >= 0 ? "+" : "") + data.deltas.score.toFixed(2) : "\u2014",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { style: { color: toneColor }, children: "delta" })
+        ] }),
+        data ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tally", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-v p", children: data.baseline.run.score.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Base" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-v ${sc(data.candidate.run.status)}`, children: data.candidate.run.score.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Cand" })
+          ] })
+        ] }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Tool diffs" }),
-        data.toolDiffs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No tool usage changes." }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: data.toolDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: diff.note }, diff.toolName)) })
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "run-list", children: data ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "run p", href: `/runs/${data.baseline.run.id}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-name", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "run-dot p" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "run-name-text", children: [
+              data.baseline.run.id.slice(0, 12),
+              " \xB7 base"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "run-score p", children: data.baseline.run.score.toFixed(1) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-meta", children: [
+            data.baseline.run.totalSteps,
+            " steps"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "a",
+          {
+            className: `run on ${sc(data.candidate.run.status)}`,
+            href: `/runs/${data.candidate.run.id}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-name", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `run-dot ${sc(data.candidate.run.status)}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "run-name-text", children: [
+                  data.candidate.run.id.slice(0, 12),
+                  " \xB7 cand"
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `run-score ${sc(data.candidate.run.status)}`, children: data.candidate.run.score.toFixed(1) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-meta", children: [
+                data.candidate.run.totalSteps,
+                " steps"
+              ] })
+            ]
+          }
+        )
+      ] }) : null })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "compare-grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunSide, { title: "Baseline", detail: data.baseline }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunSide, { title: "Candidate", detail: data.candidate })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-p", children: "$" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmd-t", children: [
+          "agentlab ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w", children: "compare" }),
+          " ",
+          baseline.slice(0, 8),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w", children: "\u2192" }),
+          " ",
+          candidate.slice(0, 8),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-caret" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmd-r", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "\u2190" }),
+          "back"
+        ] }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scroll", children: !data ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "em-title", children: "Loading comparison\u2026" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-hero", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-eyebrow", style: { color: toneColor }, children: [
+            tone === "fail" ? "Regression detected" : tone === "pass" ? "Improvement" : data.classification,
+            " ",
+            "\xB7 ",
+            data.baseline.run.scenarioId
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-grid", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-side", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-side-label", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "v", children: "baseline" }),
+                " \xB7 ",
+                baseline.slice(0, 6)
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmp-side-score", style: { color: "var(--pass)" }, children: data.baseline.run.score.toFixed(1) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmp-arrow", style: { color: toneColor }, children: "\u2192" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-delta", style: { color: toneColor }, children: [
+                data.deltas.score >= 0 ? "+" : "",
+                data.deltas.score.toFixed(2)
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-side r", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmp-side-label", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "v", children: "candidate" }),
+                " \xB7 ",
+                candidate.slice(0, 6)
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "cmp-side-score",
+                  style: { color: scColor(data.candidate.run.status) },
+                  children: data.candidate.run.score.toFixed(1)
+                }
+              )
+            ] })
+          ] }),
+          data.notes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmp-verdict", children: data.notes[0] }),
+            data.notes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmp-verdict-sub", children: data.notes.slice(1).join(" \xB7 ") }) : null
+          ] }) : null
+        ] }),
+        data.toolDiffs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diverge", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dv-h", children: "Tool-call timeline" }),
+          data.toolDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dv-track", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dv-label", children: diff.toolName }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dv-steps", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dv-step ${riskClass(diff.risk)}`, children: [
+                "base: ",
+                diff.baselineCount
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dv-step ${riskClass(diff.risk)}`, children: [
+                "cand: ",
+                diff.candidateCount
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `dv-step ${riskClass(diff.risk)}`, style: { flex: 4 }, children: diff.note })
+            ] })
+          ] }, diff.toolName))
+        ] }) : null,
+        data.evaluatorDiffs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diffs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "diffs-h", children: "Evaluator changes" }),
+          data.evaluatorDiffs.map((diff) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-label", children: diff.evaluatorId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-cell base", children: diff.baselineStatus ?? "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-arrow", children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-cell cand", children: diff.candidateStatus ?? "\u2014" })
+          ] }, diff.evaluatorId))
+        ] }) : null,
+        data.outputChanged ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diffs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "diffs-h", children: "Output diff" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-label", children: "Final output" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-cell base", children: data.baseline.run.finalOutput || "(none)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-arrow", children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-cell cand", children: data.candidate.run.finalOutput || "(none)" })
+          ] })
+        ] }) : null
+      ] }) })
     ] })
   ] });
 }
-function RunSide(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: props.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Run:" }),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/runs/${props.detail.run.id}`, children: props.detail.run.id })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Status:" }),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pill ${props.detail.run.status}`, children: props.detail.run.status })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Score:" }),
-      " ",
-      props.detail.run.score
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Runtime:" }),
-      " ",
-      props.detail.run.durationMs,
-      "ms"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Termination:" }),
-      " ",
-      props.detail.run.terminationReason
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Agent:" }),
-      " ",
-      props.detail.agentVersion?.label ?? "-"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Provider:" }),
-      " ",
-      props.detail.agentVersion?.provider ?? "-"
-    ] }),
-    props.detail.agentVersion?.modelId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Model:" }),
-      " ",
-      props.detail.agentVersion.modelId
-    ] }) : null,
-    props.detail.agentVersion?.command ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Command:" }),
-      " ",
-      props.detail.agentVersion.command,
-      " ",
-      (props.detail.agentVersion.args ?? []).join(" ")
-    ] }) : null,
-    props.detail.errorDetail ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Error:" }),
-      " ",
-      props.detail.errorDetail
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Final output:" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: props.detail.run.finalOutput || "(none)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Trace" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "timeline compact", children: props.detail.traceEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
-      event.stepIndex,
-      ". ",
-      event.type
-    ] }) }, event.eventId)) })
-  ] });
-}
-function SuiteComparePage(props) {
+function SuiteCompareView({
+  baselineBatch,
+  candidateBatch
+}) {
   const [data, setData] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
-    if (!props.baselineBatch || !props.candidateBatch) {
-      setData(null);
-      return;
-    }
+    if (!baselineBatch || !candidateBatch) return;
     const url = new URL("/api/compare-suite", window.location.origin);
-    url.searchParams.set("baselineBatch", props.baselineBatch);
-    url.searchParams.set("candidateBatch", props.candidateBatch);
-    void fetch(url).then((response) => response.json()).then((payload) => setData(payload));
-  }, [props.baselineBatch, props.candidateBatch]);
-  if (!props.baselineBatch || !props.candidateBatch) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: "No suite comparison selected", description: "Open the suite compare page with baseline and candidate batch ids." });
-  }
-  if (!data) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: "Loading suite comparison", description: "Fetching suite batches and computing regressions." });
+    url.searchParams.set("baselineBatch", baselineBatch);
+    url.searchParams.set("candidateBatch", candidateBatch);
+    void fetch(url).then((r) => r.json()).then((p) => setData(p));
+  }, [baselineBatch, candidateBatch]);
+  if (!baselineBatch || !candidateBatch) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "view-body", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "main", style: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-p", children: "$" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmd-t", style: { color: "var(--ink-lo)" }, children: [
+          "agentlab compare --suite \u2026",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-caret" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyIdle, {})
+    ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Suite Compare" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: data.suite })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Classification", value: data.classification }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Pass delta", value: signed(data.deltas.pass) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Fail delta", value: signed(data.deltas.fail) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Score delta", value: signed(data.deltas.averageScore) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Runtime delta", value: `${signed(data.deltas.averageRuntimeMs)}ms` }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { label: "Step delta", value: signed(data.deltas.averageSteps) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Notes" }),
-      data.notes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "No suite-level notes recorded." }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: data.notes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: note }, note)) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "panel-grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScenarioList, { title: "Regressions", items: data.regressions }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScenarioList, { title: "Improvements", items: data.improvements })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "view-body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sb-kicker", children: "Suite Compare" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sb-title", children: [
+          data?.suite ?? "Loading\u2026",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { children: data?.classification ?? "" })
+        ] }),
+        data ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tally", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-v${data.regressions.length > 0 ? " f" : ""}`, children: data.regressions.length }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Regress" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-v${data.improvements.length > 0 ? " p" : ""}`, children: data.improvements.length }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Improve" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-cell", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-v", children: data.unchanged.length }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-l", children: "Same" })
+          ] })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "run-list", children: data ? [
+        ...data.regressions.map((item) => ({
+          ...item,
+          kind: "fail"
+        })),
+        ...data.improvements.map((item) => ({
+          ...item,
+          kind: "pass"
+        }))
+      ].map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "a",
+        {
+          className: `run ${item.kind}`,
+          href: `/compare?baseline=${item.comparison.baseline.run.id}&candidate=${item.comparison.candidate.run.id}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "run-name", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `run-dot ${item.kind}` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "run-name-text", children: item.scenarioId })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `run-score ${item.kind}`, children: item.comparison.candidate.run.score.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "run-meta", children: item.comparison.classification })
+          ]
+        },
+        item.scenarioId
+      )) : null })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Missing scenarios" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Missing from candidate:" }),
-        " ",
-        data.missingFromCandidate.join(", ") || "None"
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-p", children: "$" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmd-t", children: [
+          "agentlab ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w", children: "compare" }),
+          " --suite ",
+          baselineBatch.slice(0, 8),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w", children: "\u2192" }),
+          " ",
+          candidateBatch.slice(0, 8),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmd-caret" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmd-r", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "\u2190" }),
+          "back"
+        ] }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Missing from baseline:" }),
-        " ",
-        data.missingFromBaseline.join(", ") || "None"
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scroll", children: !data ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "em-title", children: "Loading suite comparison\u2026" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ov-hero", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "oh-eyebrow", children: [
+            "Suite \xB7 ",
+            data.suite
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "oh-num", children: [
+            data.regressions.length + data.improvements.length + data.unchanged.length,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "unit", children: "scenarios" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "oh-sub", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "hi", children: [
+              data.improvements.length,
+              " improved"
+            ] }),
+            ",",
+            " ",
+            data.regressions.length,
+            " regressed, ",
+            data.unchanged.length,
+            " unchanged. Score delta",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "hi", children: [
+              data.deltas.averageScore >= 0 ? "+" : "",
+              data.deltas.averageScore.toFixed(2)
+            ] }),
+            "."
+          ] })
+        ] }),
+        data.regressions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diffs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "diffs-h", children: "Regressions" }),
+          data.regressions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-label", children: item.scenarioId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-cell base", children: item.comparison.baseline.run.score.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-arrow", children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-cell cand", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "a",
+              {
+                href: `/compare?baseline=${item.comparison.baseline.run.id}&candidate=${item.comparison.candidate.run.id}`,
+                style: { color: "var(--fail)" },
+                children: [
+                  item.comparison.candidate.run.score.toFixed(1),
+                  " \u2014 view"
+                ]
+              }
+            ) })
+          ] }, item.scenarioId))
+        ] }) : null,
+        data.improvements.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diffs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "diffs-h", children: "Improvements" }),
+          data.improvements.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-label", children: item.scenarioId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-cell base", children: item.comparison.baseline.run.score.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-arrow", children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "df-cell",
+                style: {
+                  background: "color-mix(in srgb, var(--pass) 8%, transparent)",
+                  border: "1px solid color-mix(in srgb, var(--pass) 25%, transparent)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "a",
+                  {
+                    href: `/compare?baseline=${item.comparison.baseline.run.id}&candidate=${item.comparison.candidate.run.id}`,
+                    style: { color: "var(--pass)" },
+                    children: [
+                      item.comparison.candidate.run.score.toFixed(1),
+                      " \u2014 view"
+                    ]
+                  }
+                )
+              }
+            )
+          ] }, item.scenarioId))
+        ] }) : null,
+        data.missingFromCandidate.length > 0 || data.missingFromBaseline.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diffs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "diffs-h", children: "Missing scenarios" }),
+          data.missingFromCandidate.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-label", children: "From candidate" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "df-cell cand",
+                style: { gridColumn: "2 / 5" },
+                children: data.missingFromCandidate.join(", ")
+              }
+            )
+          ] }) : null,
+          data.missingFromBaseline.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "diff-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "df-label", children: "From baseline" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "df-cell base",
+                style: { gridColumn: "2 / 5" },
+                children: data.missingFromBaseline.join(", ")
+              }
+            )
+          ] }) : null
+        ] }) : null
+      ] }) })
     ] })
   ] });
 }
-function ScenarioList(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: props.title }),
-    props.items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "None." }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "stack", children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: item.scenarioId }),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "muted", children: item.comparison.classification }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/compare?baseline=${item.comparison.baseline.run.id}&candidate=${item.comparison.candidate.run.id}`, children: "open run compare" }) })
-    ] }, item.scenarioId)) })
+function ScoreChart({ runs }) {
+  const sorted = [...runs].sort(
+    (a, b) => new Date(a.startedAt).getTime() - new Date(b.startedAt).getTime()
+  );
+  if (sorted.length < 2) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  const points = sorted.map((run, i) => ({
+    x: 30 + i / (sorted.length - 1) * 900,
+    y: 20 + (1 - run.score) * 100,
+    status: run.status,
+    id: run.id
+  }));
+  let linePath = `M${points[0].x},${points[0].y}`;
+  for (let i = 1; i < points.length; i++) {
+    const p = points[i - 1];
+    const c = points[i];
+    const cpx = (p.x + c.x) / 2;
+    linePath += ` C${cpx},${p.y} ${cpx},${c.y} ${c.x},${c.y}`;
+  }
+  const last = points[points.length - 1];
+  const first = points[0];
+  const fillPath = `${linePath} L${last.x},140 L${first.x},140 Z`;
+  const failPoints = points.filter((p) => p.status !== "pass");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 960 140", style: { width: "100%", display: "block" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "hz-fill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "var(--accent)", stopOpacity: ".18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: "var(--accent)", stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "0", y1: "20", x2: "960", y2: "20", stroke: "var(--line)", strokeDasharray: "2 4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "0", y1: "70", x2: "960", y2: "70", stroke: "var(--line)", strokeDasharray: "2 4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "0", y1: "120", x2: "960", y2: "120", stroke: "var(--line)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: fillPath, fill: "url(#hz-fill)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: linePath,
+        fill: "none",
+        stroke: "var(--accent)",
+        strokeWidth: "1.4",
+        strokeLinecap: "round",
+        style: {
+          filter: "drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 50%, transparent))"
+        }
+      }
+    ),
+    failPoints.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "circle",
+      {
+        cx: p.x,
+        cy: p.y,
+        r: "4",
+        fill: "var(--bg)",
+        stroke: "var(--fail)",
+        strokeWidth: "1.5"
+      },
+      p.id
+    ))
   ] });
 }
-function Stat(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stat", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted", children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stat-value", children: props.value })
-  ] });
+function TraceTimeline({
+  events
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace", children: events.map((event, i) => {
+    const kind = getEventKind(event.type);
+    const label = getEventLabel(event.type);
+    const title = getEventTitle(event);
+    const body = getEventBody(event);
+    const isLast = i === events.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: "t-step",
+        style: { animationDelay: `${i * 55}ms` },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `t-node${isLast ? " p" : " active"}`, children: i + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "t-head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `t-kind ${kind}`, children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "t-title", children: title })
+          ] }),
+          body ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "t-body", children: body }) : null
+        ]
+      },
+      event.eventId
+    );
+  }) });
 }
-function EmptyState(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "empty", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: props.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.description })
+function FailureBlock({ detail }) {
+  const failed = detail.evaluatorResults.filter((e) => e.status === "fail");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "failure-panel-block", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fp-label", children: "Failure" }),
+    detail.errorDetail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fp-item", children: detail.errorDetail }) : null,
+    failed.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fp-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fp-x", children: "\u2717" }),
+      " ",
+      e.evaluatorId,
+      ": ",
+      e.message
+    ] }, e.evaluatorId)),
+    !detail.errorDetail && failed.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fp-item", children: "Run did not pass. Inspect the trace for the first divergence." }) : null
   ] });
 }
-function getFailureSummaryItems(detail) {
-  const items = [];
-  if (detail.errorDetail) {
-    items.push(`Error: ${detail.errorDetail}`);
-  }
-  for (const result of detail.evaluatorResults) {
-    if (result.status === "fail") {
-      items.push(`Evaluator ${result.evaluatorId}: ${result.message}`);
-    }
-  }
-  if (detail.run.status !== "pass" && items.length === 0) {
-    items.push("Run did not pass. Inspect evaluator results and trace for the first divergence.");
-  }
-  return items;
-}
-function signed(value) {
-  return value > 0 ? `+${value}` : `${value}`;
+function EmptyIdle() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "em-mark", children: "ARL" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "em-title", children: "Awaiting signal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "em-sub", children: "Run a scenario from the CLI and traces will appear here in real time." }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "em-cmd", children: "agentlab run --scenario refund-flow" })
+  ] });
 }
-function getRoute() {
-  const url = new URL(window.location.href);
-  if (url.pathname.startsWith("/runs/")) {
-    return { type: "detail", runId: decodeURIComponent(url.pathname.slice("/runs/".length)) };
-  }
-  if (url.pathname === "/compare-suite") {
-    return {
-      type: "compare-suite",
-      baselineBatch: url.searchParams.get("baselineBatch") ?? void 0,
-      candidateBatch: url.searchParams.get("candidateBatch") ?? void 0
-    };
-  }
-  if (url.pathname === "/compare") {
-    return {
-      type: "compare",
-      baseline: url.searchParams.get("baseline") ?? void 0,
-      candidate: url.searchParams.get("candidate") ?? void 0
-    };
-  }
-  return { type: "list" };
+function summarizeRuns(runs) {
+  return {
+    total: runs.length,
+    pass: runs.filter((r) => r.status === "pass").length,
+    fail: runs.filter((r) => r.status === "fail").length,
+    error: runs.filter((r) => r.status === "error").length,
+    latestSuite: runs[0]?.suite ?? "-",
+    latestProvider: runs[0]?.provider ?? "-"
+  };
 }
 
 // src/ui/client.tsx