static-fire 0.0.0-stage → 0.44.0

package/web/app.tsx

@@ -0,0 +1,1019 @@
+import { marked } from "marked";
+import { Fragment, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import type { AgentConfig, Criterion, JudgeConfig, Suite, Trial } from "../src/core/types";
+import type { TrialDetail } from "../src/core/trial-detail";
+import type { View, ViewConfigSummary, ViewTrial } from "../src/core/view";
+import { parseViewQuery, viewQueryParams, type Scope, type ViewQuery } from "../src/core/view-query";
+import { suiteNotes } from "./suite-notes";
+import type { Facets } from "../src/core/facets";
+import { configLabel } from "../src/core/label";
+import type { RegradeEnded, RegradeRun } from "../src/api";
+import { BarList, ConfigTable, dateRange, FrontierChart, money, secs, type HumanLine, type Point, type Row } from "./charts";
+import { familyName, familySlot, HARNESS_NAME, HARNESS_ORDER, Marker } from "./encoding";
+import { PAGES, pageOf, pathOf, type PageId } from "./pages";
+import { api } from "./api";
+import { ComparePage } from "./compare";
+import { CLEAR_ALL, filterTags, menuSections, pick, searchMenu, SECTION_NAMES, type MenuValue, type SectionId } from "./filter-menu";
+import { runStatus, STATUS_REFRESH_MS, statusText, type RunStatus } from "./run-status";
+
+/** The authored definitions the page lists: every suite and task (for the scope selector) and the config files. */
+interface Catalog { suites: Suite[]; titles: Record<string, string>; configs: AgentConfig[] }
+/** A loaded view and the scope it was asked for. */
+interface Loaded { view: View; scope: Scope }
+
+const pct = (v: number | null | undefined, d = 0) => (v == null ? "—" : v.toFixed(d));
+const short = (hash: string) => hash.slice(0, 8);
+const viewUrl = (q: ViewQuery) => { const p = viewQueryParams(q).toString(); return `/api/view${p ? `?${p}` : ""}`; };
+/** The page's URL query is the view query: a copied URL opens the same view. A URL the page cannot read is an error. */
+const readUrl = (): { query: ViewQuery; error: string } => {
+  try { return { query: parseViewQuery(new URLSearchParams(location.search)), error: "" }; } catch (e) { return { query: {}, error: (e as Error).message }; }
+};
+
+function App() {
+  // What the page asks for. The scope selector sets `scope`; the filter bar (#10) adds the other fields.
+  // Which page the path names (web/pages.ts). Only the Results page reads its query: another page's URL has none.
+  const [page, setPage] = useState<PageId>(() => pageOf(location.pathname));
+  const [start] = useState(() => (pageOf(location.pathname) === "results" ? readUrl() : { query: {}, error: "" }));
+  const [query, setQuery] = useState<ViewQuery>(start.query);
+  const [urlError, setUrlError] = useState(start.error);
+  const [facets, setFacets] = useState<Facets | null>(null);
+  const [loaded, setLoaded] = useState<Loaded | null>(null);
+  const [catalog, setCatalog] = useState<Catalog | null>(null);
+  const [tick, setTick] = useState(0);
+  const batches = useBatches(tick);
+  const [trialId, setTrialId] = useState<string | null>(null);
+  const [newOpen, setNewOpen] = useState(false);
+  const [loadError, setLoadError] = useState("");   // the view's request
+  const [catalogError, setCatalogError] = useState("");   // the suites, tasks and configs requests: loaded once, so kept
+  const [regrade, setRegrade] = useState<RegradeStatus>({ running: null, last: null });
+  const [regradeError, setRegradeError] = useState("");
+  const wasRegrading = useRef(false);
+
+  useEffect(() => {
+    const es = new EventSource("/api/events");
+    es.onmessage = () => setTick((t) => t + 1);
+    return () => es.close();
+  }, []);
+  useEffect(() => {
+    Promise.all([api<Suite[]>("/api/suites"), api<{ id: string; title: string }[]>("/api/tasks"), api<AgentConfig[]>("/api/configs")])
+      .then(([suites, tasks, configs]) => setCatalog({ suites, titles: Object.fromEntries(tasks.map((t) => [t.id, t.title])), configs }))
+      .catch((e: Error) => setCatalogError(e.message));
+  }, []);
+  // Every change to the query is a history entry; Back and Forward set the query from the URL again.
+  const search = viewQueryParams(query).toString();
+  useEffect(() => {
+    if (urlError || page !== "results") return;   // the query is the Results page's URL, not another page's
+    const here = new URLSearchParams(location.search).toString();
+    if (here === search) return;
+    let same = false;
+    try { same = viewQueryParams(parseViewQuery(new URLSearchParams(location.search))).toString() === search; } catch { /* a bad URL is replaced */ }
+    const next = `${location.pathname}${search ? `?${search}` : ""}`;
+    if (same) history.replaceState(null, "", next); else history.pushState(null, "", next);
+  }, [search, urlError, page]);
+  useEffect(() => {
+    // Back and Forward to another page leave the Results query as it was, so coming back keeps the filters.
+    const back = () => {
+      const p = pageOf(location.pathname);
+      setPage(p);
+      if (p === "results") { const r = readUrl(); setQuery(r.query); setUrlError(r.error); }
+    };
+    window.addEventListener("popstate", back);
+    return () => window.removeEventListener("popstate", back);
+  }, []);
+  useEffect(() => {
+    if (page !== "results") return;   // loaded again on the way back to Results
+    let live = true;
+    api<Facets>(`/api/facets${search ? `?${search}` : ""}`)
+      .then((f) => { if (live) setFacets(f); })
+      .catch(() => { if (live) setFacets(null); });   // the view's own request reports a bad filter
+    return () => { live = false; };
+  }, [search, tick, page]);
+  // The server's regrade (one at a time, in its process), so a reload and a second tab see it. Read on each
+  // event, and every second while one runs: its end must show even when the last write came before it cleared.
+  useEffect(() => {
+    let live = true;
+    const read = () => api<RegradeStatus>("/api/regrade").then((r) => {
+      if (!live) return;
+      setRegrade(r);
+      if (wasRegrading.current && !r.running) setTick((t) => t + 1);   // it ended: load the view again
+      wasRegrading.current = !!r.running;
+    }).catch(() => {});
+    read();
+    const timer = regrade.running ? setInterval(read, 1000) : undefined;
+    return () => { live = false; clearInterval(timer); };
+  }, [tick, !!regrade.running]);
+  useEffect(() => setRegradeError(""), [search]);
+  const startRegrade = () => {
+    setRegradeError("");
+    fetch(`/api/regrade${search ? `?${search}` : ""}`, { method: "POST" })
+      .then(async (r) => {
+        const body = await r.json().catch(() => null);
+        if (r.status === 409 && body?.running) setRegrade((was) => ({ ...was, running: body.running }));
+        else if (!r.ok) setRegradeError(body?.error ?? `${r.status} ${r.statusText}`);
+        setTick((t) => t + 1);
+      })
+      .catch((e: Error) => setRegradeError(e.message));
+  };
+  const url = viewUrl(query);
+  useEffect(() => {
+    if (page !== "results") return;   // loaded again on the way back to Results, with the trials of any batch that ran meanwhile
+    let live = true;   // a response for an earlier query must not replace the current one
+    const scope = query.scope ?? { kind: "index" as const };
+    api<View>(url)
+      .then((view) => { if (live) { setLoaded({ view, scope }); setLoadError(""); } })
+      .catch((e: Error) => { if (live) { setLoaded(null); setLoadError(e.message); } });
+    return () => { live = false; };
+  }, [url, tick, page]);
+  /** Opens another page as a history entry. Results gets its query back, so its filters survive the trip. */
+  const go = (to: PageId) => {
+    if (to === page) return;
+    history.pushState(null, "", hrefOf(to));
+    if (to === "results") setUrlError("");   // the pushed URL holds the query in state, not the unreadable one
+    setPage(to);
+    window.scrollTo(0, 0);
+  };
+  const hrefOf = (to: PageId) => (to === "results" ? `${pathOf(to)}${search ? `?${search}` : ""}` : pathOf(to));
+
+  const view = loaded?.view;
+  const trial = view?.trials.find((t) => t.id === trialId) ?? null;
+  return (
+    <div className="app">
+      <header className="topbar">
+        <div className="brand">Static Fire</div>
+        <nav className="nav" aria-label="Pages">
+          {PAGES.map((p) => (
+            <a key={p.id} href={hrefOf(p.id)} className={p.id === page ? "on" : undefined} aria-current={p.id === page ? "page" : undefined}
+              onClick={(e) => { if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; e.preventDefault(); go(p.id); }}>{p.title}</a>
+          ))}
+        </nav>
+        <div className="spacer" />
+        <RunStatusButton batches={batches} onOpen={() => go("runs")} />
+      </header>
+
+      {page === "runs" ? <RunsPage batches={batches} tick={tick} onNew={() => setNewOpen(true)} />
+        : page === "compare" ? <ComparePage tick={tick} titles={catalog?.titles ?? {}} />
+        : urlError ? <div className="empty card"><div className="kicker">This link has a filter the dashboard cannot read</div><p className="error" style={{ whiteSpace: "pre-wrap" }}>{urlError}</p><a className="btn" href={location.pathname}>Reset filters</a></div>
+        : catalogError ? <div className="empty card"><div className="kicker">Could not load the suites, tasks and configs</div><p className="error" style={{ whiteSpace: "pre-wrap" }}>{catalogError}</p><a className="btn" href={location.href}>Reload</a></div>
+        : loadError ? <div className="empty card"><div className="kicker">Could not load the view</div><p className="error" style={{ whiteSpace: "pre-wrap" }}>{loadError}</p></div>
+        : !loaded || !catalog ? <div className="empty card"><div className="kicker">Static Fire</div><h1>Loading…</h1></div>
+        : <Dashboard loaded={loaded} catalog={catalog} onScope={(scope) => setQuery((q) => withScope(q, scope, catalog, facets))} onTrial={setTrialId} onNew={() => go("runs")}
+            bar={<FilterBar query={query} view={loaded.view} facets={facets} titles={catalog.titles} onChange={(patch) => setQuery((q) => ({ ...q, ...patch }))} />}
+            notice={<LeftOutNotice view={loaded.view} scope={loaded.scope} titles={catalog.titles} search={search} regrade={regrade} error={regradeError}
+              onRegrade={startRegrade} onVersion={(grading) => setQuery((q) => ({ ...q, grading, judge: undefined }))} />} />}
+      {page === "results" && trial && view && <TrialDrawer view={view} trial={trial} tick={tick} onClose={() => setTrialId(null)} />}
+      {page === "runs" && newOpen && <NewRun onClose={() => setNewOpen(false)} onStarted={() => { setNewOpen(false); setTick((t) => t + 1); }} />}
+    </div>
+  );
+}
+
+/**
+ * The query with a new scope. A picked grading version belongs to one task: it is kept only when the new scope
+ * still covers that task, because the view refuses a grading version outside its scope.
+ */
+function withScope(q: ViewQuery, scope: Scope, catalog: Catalog, facets: Facets | null): ViewQuery {
+  if (!q.grading) return { ...q, scope };
+  const taskId = facets?.grading.find((g) => g.setups.some((s) => s.hash.startsWith(q.grading!)))?.taskId;
+  const covered = scope.kind === "task" ? [scope.id]
+    : catalog.suites.filter((s) => scope.kind === "index" || s.id === scope.id).flatMap((s) => s.tasks);
+  return taskId && covered.includes(taskId) ? { ...q, scope } : { ...q, scope, grading: undefined };
+}
+
+/**
+ * The filters besides scope (the chips): one Filter button that opens a searchable menu of collapsed sections,
+ * and a tag per active filter, one per picked value of a config facet (the data is web/filter-menu.ts). Each value shows how many trials the view would
+ * list with it. Every filter is a field of the query, so of the URL.
+ */
+function FilterBar({ query, view, facets, titles, onChange }: {
+  query: ViewQuery; view: View; facets: Facets | null; titles: Record<string, string>; onChange: (patch: Partial<ViewQuery>) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState("");
+  const [expanded, setExpanded] = useState<Set<SectionId>>(new Set());
+  const root = useRef<HTMLDivElement>(null), button = useRef<HTMLButtonElement>(null), searchBox = useRef<HTMLInputElement>(null);
+  const sections = menuSections({ facets, query, judge: view.filters.judge, titles });
+  const tags = filterTags(sections);
+  const found = text.trim() ? searchMenu(sections, text) : null;
+  // Open: the search box takes focus. A click outside the menu or Escape closes it.
+  useEffect(() => {
+    if (!open) return;
+    searchBox.current?.focus();
+    const away = (e: MouseEvent) => { if (!root.current?.contains(e.target as Node)) setOpen(false); };
+    const esc = (e: KeyboardEvent) => { if (e.key === "Escape") { setOpen(false); button.current?.focus(); } };
+    document.addEventListener("mousedown", away);
+    document.addEventListener("keydown", esc);
+    return () => { document.removeEventListener("mousedown", away); document.removeEventListener("keydown", esc); };
+  }, [open]);
+  // Each opening starts with no search text and every section collapsed.
+  const toggleMenu = () => { if (!open) { setText(""); setExpanded(new Set()); } setOpen(!open); };
+  const toggleSection = (id: SectionId) => setExpanded((was) => { const next = new Set(was); if (!next.delete(id)) next.add(id); return next; });
+
+  const option = (v: MenuValue, labelled: boolean) => {
+    const detail = [labelled ? v.group : undefined, v.detail].filter(Boolean).join(" · ");
+    return (
+      <button key={`${v.section}:${v.key}`} type="button" className={`opt${v.picked ? " on" : ""}`} aria-pressed={v.picked} title={v.title} onClick={() => onChange(pick(v))}>
+        <span>{labelled && <em>{v.sectionName}: </em>}{v.label}{v.picked && " ✓"}{detail && <small>{detail}</small>}</span>
+        <span className="opt-count" title={`${v.count} trial${v.count === 1 ? "" : "s"}`}>{v.count}</span>
+      </button>
+    );
+  };
+  // An open section's values; a grading version under its task's heading when more than one task is in scope.
+  const values = (list: MenuValue[]) => list.map((v, i) => (
+    <Fragment key={`${v.section}:${v.key}`}>
+      {v.group && v.group !== list[i - 1]?.group && <div className="grp">{v.group}</div>}
+      {option(v, false)}
+    </Fragment>
+  ));
+  const day = (iso: string | null) => iso?.slice(0, 10);
+  const dates = (
+    <div className="menu-dates">
+      <label>From<input type="date" aria-label="From" value={(query.since ?? "").slice(0, 10)} min={day(facets?.dates.first ?? null)} max={day(facets?.dates.last ?? null)} onChange={(e) => onChange({ since: e.target.value || undefined })} /></label>
+      <label>To<input type="date" aria-label="To" value={(query.until ?? "").slice(0, 10)} min={day(facets?.dates.first ?? null)} max={day(facets?.dates.last ?? null)} onChange={(e) => onChange({ until: e.target.value || undefined })} /></label>
+    </div>
+  );
+  return (
+    <div className="filter-bar" aria-label="Filters">
+      <div className="pop" ref={root}>
+        <button ref={button} type="button" className={`btn filter-btn${open ? " on" : ""}`} aria-expanded={open} aria-haspopup="dialog" onClick={toggleMenu}>
+          <svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 3h14M4 8h8M6.5 13h3" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" fill="none" /></svg>
+          Filter
+        </button>
+        {open && (
+          <div className="menu" role="dialog" aria-label="Filter">
+            <input ref={searchBox} type="search" aria-label="Search filters" placeholder="Search all filters, for example opus" value={text} onChange={(e) => setText(e.target.value)} />
+            <div className="menu-list">
+              {found ? (
+                <>
+                  {found.values.map((v) => option(v, true))}
+                  {found.dates && <div className="menu-flat-dates"><em>{SECTION_NAMES.dates}</em>{dates}</div>}
+                  {found.values.length === 0 && !found.dates && <p className="muted menu-none">No filter matches.</p>}
+                </>
+              ) : sections.map((s) => {
+                const on = expanded.has(s.id);
+                return (
+                  <div key={s.id} className="menu-sec">
+                    <button type="button" className="sec" aria-expanded={on} onClick={() => toggleSection(s.id)}>
+                      <span><i aria-hidden="true">{on ? "▾" : "▸"}</i>{s.name}</span>
+                      <span className={s.picked ? "sec-on" : undefined}>{s.summary}</span>
+                    </button>
+                    {on && <div className="in">{s.id === "dates" ? dates : values(s.values)}</div>}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+      {tags.map((t) => (
+        <span key={t.key} className={`tag${t.section === "grading" ? " grading" : ""}`}>
+          <em>{t.name}:</em> {t.value}
+          <button type="button" aria-label={`Remove filter ${t.text}`} title="Remove this filter" onClick={() => onChange(t.remove)}>×</button>
+        </span>
+      ))}
+      {tags.length > 0 && <button type="button" className="btn clear-all" onClick={() => onChange(CLEAR_ALL)}>Clear all</button>}
+    </div>
+  );
+}
+
+/** The task ids a scope covers in this view. */
+const tasksOf = (view: View, sel: Scope, suites: Map<string, Suite>) =>
+  sel.kind === "task" ? [sel.id] : sel.kind === "suite" ? suites.get(sel.id)?.tasks ?? [] : Object.keys(view.tasks);
+
+/**
+ * What the selected scope says about one config: a table row. Score and cost are null when the scope has
+ * none. The chart point is this same row (pointFor), so the chart and the table never disagree.
+ */
+function rowFor(view: View, s: ViewConfigSummary, sel: Scope, suites: Map<string, Suite>): Row {
+  const tasks = tasksOf(view, sel, suites);
+  const stat = sel.kind === "index" ? s.index : sel.kind === "suite" ? s.suites[sel.id] : s.tasks[sel.id]?.score;
+  const per = tasks.map((t) => s.tasks[t]).filter((t) => t && t.valid > 0);
+  const costs = per.map((t) => t.costUsd).filter((c): c is number => c != null);
+  const times = per.map((t) => t.durationMs).filter((x): x is number => x != null);
+  const pooled = tasks.map((t) => s.pooled[t]).filter((p) => p && p.n > 0);
+  return {
+    s, score: stat?.mean ?? null, ci: stat?.ci ?? null,
+    cost: costs.length ? costs.reduce((a, b) => a + b, 0) / costs.length : null,
+    n: pooled.reduce((a, p) => a + p.n, 0),
+    from: pooled.map((p) => p.from!).sort()[0] ?? null,
+    to: pooled.map((p) => p.to!).sort().at(-1) ?? null,
+    costSource: per.some((t) => t.costSource === "estimated") ? "estimated" : "reported",
+    durationMs: times.length ? times.reduce((a, b) => a + b, 0) / times.length : null,
+  };
+}
+
+/** The chart point of one config: its row, when it has both a score and a cost. */
+function pointFor(view: View, s: ViewConfigSummary, sel: Scope, suites: Map<string, Suite>): Point | null {
+  const r = rowFor(view, s, sel, suites);
+  return r.score == null || r.cost == null ? null : { ...r, score: r.score, cost: r.cost };
+}
+
+/** Why a config with trials in view has no point: a suite it does not cover in full. */
+function partialText(s: ViewConfigSummary, sel: Scope, suites: Map<string, Suite>): string | null {
+  const ids = sel.kind === "suite" ? [sel.id] : sel.kind === "index" ? Object.keys(s.partial) : [];
+  const parts = ids.flatMap((id) => {
+    const p = s.partial[id];
+    return p ? [`${sel.kind === "index" ? `${suites.get(id)?.title ?? id} ` : ""}partial (${p.have} of ${p.of} tasks)`] : [];
+  });
+  return parts.length ? parts.join(", ") : null;
+}
+
+const sameScope = (a: Scope, b: Scope) => a.kind === b.kind && (a.kind === "index" || (b.kind !== "index" && a.id === b.id));
+
+function Dashboard({ loaded, catalog, onScope, onTrial, onNew, bar, notice }: { loaded: Loaded; catalog: Catalog; onScope: (s: Scope) => void; onTrial: (id: string) => void; onNew: () => void; bar?: ReactNode; notice?: ReactNode }) {
+  const { view, scope: sel } = loaded;
+  const { trials, summary } = view;
+  const suites = new Map(catalog.suites.map((s) => [s.id, s]));
+  const taskIds = Object.keys(view.tasks);
+  const allTasks = [...new Set(catalog.suites.flatMap((s) => s.tasks))];
+  const taskTitle = (id: string) => view.tasks[id]?.def.title ?? catalog.titles[id] ?? id;
+  const valid = trials.filter((t) => t.status === "done" && t.grades);
+  const starts = valid.map((t) => t.startedAt).filter((x): x is string => !!x).sort();
+
+  const title = sel.kind === "index" ? "Workflow Index" : sel.kind === "suite" ? `${suites.get(sel.id)?.title ?? sel.id} Index` : taskTitle(sel.id);
+  const agents = summary.configs.filter((s) => s.harness !== "human");
+  const points = agents.map((s) => pointFor(view, s, sel, suites)).filter((p): p is Point => p != null);
+  const humans: HumanLine[] = summary.configs.filter((s) => s.harness === "human").flatMap((s) => {
+    const stat = sel.kind === "index" ? s.index : sel.kind === "suite" ? s.suites[sel.id] : s.tasks[sel.id]?.score;
+    return stat?.mean != null ? [{ s, score: stat.mean }] : [];
+  });
+  // Every config in view the chart draws neither as a point nor as a human line, agents and humans alike.
+  const unplotted = summary.configs.filter((s) => !points.some((p) => p.s.configId === s.configId) && !humans.some((h) => h.s.configId === s.configId));
+
+  const pickConfig = (configId: string) => {
+    const t = trials.filter((t) => t.configId === configId && t.status === "done" && (sel.kind !== "task" || t.taskId === sel.id))
+      .sort((a, b) => (b.grades?.score ?? 0) - (a.grades?.score ?? 0))[0];
+    if (t) onTrial(t.id);
+  };
+  const harnesses = HARNESS_ORDER.filter((h) => h !== "human" && agents.some((s) => s.harness === h));
+  const families = [...new Set(agents.map((s) => s.family))].sort((a, b) => familySlot(a) - familySlot(b));
+  const one = sel.kind === "task" ? view.tasks[sel.id] : null;
+  const [shown, setShown] = useState<"chart" | "table">("chart");
+  // The table: every config the chart draws (points and human lines, by score), then the ones it cannot draw.
+  const tableRows: Row[] = [
+    ...[...points, ...summary.configs.filter((s) => humans.some((h) => h.s.configId === s.configId)).map((s) => rowFor(view, s, sel, suites))]
+      .sort((a, b) => b.score! - a.score!),
+    ...unplotted.map((s) => { const r = rowFor(view, s, sel, suites); return { ...r, reason: partialText(s, sel, suites) ?? (r.score == null ? "no valid score" : "no cost data") }; }),
+  ];
+
+  return (
+    <>
+      <section className="hero">
+        <div className="kicker">View</div>
+        <h1>{sel.kind === "task" ? taskTitle(sel.id) : view.filters.suiteIds.map((s) => suites.get(s)?.title ?? s).join(" + ")}</h1>
+        <div className="meta">
+          <span><b>{taskIds.length}</b> task{taskIds.length === 1 ? "" : "s"} × <b>{summary.configs.length}</b> config{summary.configs.length === 1 ? "" : "s"} · <b>{valid.length}</b> valid trial{valid.length === 1 ? "" : "s"}</span>
+          <span>Judge <b>{view.filters.judge.label}</b></span>
+          {starts.length > 0 && <span>Ran {dateRange(starts[0]!, starts.at(-1)!)}</span>}
+          {one && <span><VersionLabel label={one.label} hash={one.taskHash} /></span>}
+        </div>
+        {suiteNotes(sel, view.filters.suiteIds, suites).map((n) => <p key={n.title} className="note">{sel.kind !== "suite" && <b>{n.title}: </b>}{n.description}</p>)}
+      </section>
+
+      <div className="chips" role="tablist" aria-label="Score shown">
+        <button className={`chip ${sel.kind === "index" ? "on" : ""}`} onClick={() => onScope({ kind: "index" })}>Workflow Index</button>
+        {catalog.suites.map((s) => <button key={s.id} className={`chip ${sameScope(sel, { kind: "suite", id: s.id }) ? "on" : ""}`} onClick={() => onScope({ kind: "suite", id: s.id })}>{s.title} Index</button>)}
+        {allTasks.map((id) => <button key={id} className={`chip ${sameScope(sel, { kind: "task", id }) ? "on" : ""}`} onClick={() => onScope({ kind: "task", id })}>{taskTitle(id)}</button>)}
+      </div>
+      {bar}
+
+      {trials.length === 0 ? (
+        <div className="empty card">
+          <div className="kicker">{title}</div>
+          <h1>No trials in this view</h1>
+          <p>Run agent configs on these tasks and each trial shows here as soon as it is graded.</p>
+          <button className="btn btn-primary" onClick={onNew}>New run</button>
+          {notice}
+        </div>
+      ) : <>
+        <section className="card">
+          <div className="card-head">
+            <h2>{title} vs. cost per task</h2>
+            <div className="view-toggle" role="group" aria-label="Show as">
+              <button className={shown === "chart" ? "on" : ""} aria-pressed={shown === "chart"} onClick={() => setShown("chart")}>Chart</button>
+              <button className={shown === "table" ? "on" : ""} aria-pressed={shown === "table"} onClick={() => setShown("table")}>Table</button>
+            </div>
+          </div>
+          <p className="sub">{shown === "chart"
+            ? "Each point is one agent config: its mean over every comparable valid trial, with a 95% confidence interval. Click a point to read its best output."
+            : "One row per config in the view, pooled over every comparable valid trial. The chart and the table show the same configs."}</p>
+          {shown === "chart" ? <>
+          <div className="legend">
+            {harnesses.map((h) => <span key={h}><Marker s={{ harness: h, profile: "x", family: "_" }} neutral />{HARNESS_NAME[h]}</span>)}
+            <span className="sep" />
+            {families.map((f) => <span key={f}><span className="swatch" style={{ background: `var(--dataviz-${familySlot(f)})` }} />{familyName(f)}</span>)}
+            <span className="sep" />
+            <span><Marker s={{ harness: "claude", profile: undefined, family: "_" }} neutral />no Profile (user setup only)</span>
+            <span><span className="quad-key" />Most attractive quadrant</span>
+            <span><span className="pareto-key" />Pareto frontier</span>
+            {humans.length > 0 && <span><span className="human-key" />User (by hand): your score, no agent cost</span>}
+          </div>
+          <FrontierChart points={points} yTitle={title} humans={humans} onPick={pickConfig} />
+          </> : <ConfigTable rows={tableRows} onPick={pickConfig} />}
+          {notice}
+          {shown === "chart" && unplotted.length > 0 && <p className="note">Not plotted (no valid score for every task in this view, or no cost data): {unplotted.map((s) => { const why = partialText(s, sel, suites); return why ? `${s.label}: ${why}` : s.label; }).join("; ")}.</p>}
+          <p className="note">Costs are API-equivalent. Claude Code and Pi report their own; Codex and Antigravity are estimated from tokens × <code>pricing.yaml</code>. On a flat subscription you pay in usage limits, not dollars.</p>
+        </section>
+
+        <div className="grid3">
+          <section className="card">
+            <h3>{title}</h3>
+            <p className="sub">Mean of valid trials · higher is better</p>
+            <BarList rows={summary.configs.map((s) => ({ s, v: s.harness === "human" ? humans.find((h) => h.s.configId === s.configId)?.score ?? null : pointFor(view, s, sel, suites)?.score ?? null }))} fmt={(v) => v.toFixed(1)} />
+          </section>
+          <section className="card">
+            <h3>Cost per task</h3>
+            <p className="sub">API-equivalent USD · lower is better</p>
+            <BarList rows={agents.map((s) => ({ s, v: pointFor(view, s, sel, suites)?.cost ?? null }))} fmt={money} lowerIsBetter />
+          </section>
+          <section className="card">
+            <h3>Time per task</h3>
+            <p className="sub">Agent wall-clock · lower is better</p>
+            <BarList rows={agents.map((s) => ({ s, v: pointFor(view, s, sel, suites)?.durationMs ?? null }))} fmt={secs} lowerIsBetter />
+          </section>
+        </div>
+
+        {taskIds.length > 1 && <Heatmap view={view} suites={suites} />}
+        {(sel.kind === "task" ? [sel.id] : taskIds).map((t) => <TaskBreakdown key={t} view={view} taskId={t} configs={catalog.configs} />)}
+        <TrialsCard view={view} onTrial={onTrial} />
+      </>}
+    </>
+  );
+}
+
+/** GET /api/regrade: the regrade the server is running, and the last one that ended there. */
+interface RegradeStatus { running: RegradeRun | null; last: RegradeEnded | null }
+
+const trialsFrom = (c: { trials: number; configs: number }) =>
+  `${c.trials} trial${c.trials === 1 ? "" : "s"} from ${c.configs} config${c.configs === 1 ? "" : "s"}`;
+
+/**
+ * Under the chart: the trials in scope the view left out, and the way to bring them in. Trials graded under
+ * another grading hash, or never graded, come back with a regrade (judge calls only; POST /api/regrade with the
+ * view's query). Trials on another task hash did another job: the link switches the view to their version by
+ * setting the grading version filter, and reads by that grading version's name. Renders nothing when no trial was left out.
+ */
+function LeftOutNotice({ view, scope, titles, search, regrade, error, onRegrade, onVersion }: {
+  view: View; scope: Scope; titles: Record<string, string>; search: string; regrade: RegradeStatus; error: string;
+  onRegrade: () => void; onVersion: (gradingHash: string) => void;
+}) {
+  const { otherGrading, ungraded, otherTask } = view.leftOut;
+  if (!otherGrading.trials && !ungraded.trials && !otherTask.trials) return null;
+  const current = Object.values(view.tasks).every((t) => t.current);
+  const mine = regrade.running?.query === search;
+  const lastError = !regrade.running && regrade.last?.error && regrade.last.query === search ? regrade.last.error : "";
+  // The grading version each task version's link opens: picked by the view (linkTarget).
+  const setupFor = (v: OtherVersion) => v.gradingSetups.find((g) => g.hash === v.link);
+  const byTask = new Map<string, typeof otherTask.versions>();
+  for (const v of otherTask.versions) byTask.set(v.taskId, [...(byTask.get(v.taskId) ?? []), v]);
+  const regradeButton = current && (otherGrading.trials > 0 || ungraded.trials > 0) && (
+    <button className="btn btn-quiet" disabled={!!regrade.running} onClick={onRegrade}>
+      {mine ? `Regrading… ${regrade.running!.graded} of ${regrade.running!.total}` : regrade.running ? "Another regrade is running" : "Regrade (judge calls only)"}
+    </button>
+  );
+  return (
+    <div className="left-out" role="status">
+      {otherGrading.trials > 0 && <p className="note">{trialsFrom(otherGrading)} {otherGrading.trials === 1 ? "was" : "were"} graded under {current ? "earlier" : "other"} criteria.</p>}
+      {ungraded.trials > 0 && <p className="note">{trialsFrom(ungraded)} {ungraded.trials === 1 ? "has" : "have"} no grading.</p>}
+      {regradeButton}
+      {(error || lastError) && <p className="error">The regrade did not finish: {error || lastError}</p>}
+      {[...byTask].map(([taskId, versions]) => {
+        const n = versions.reduce((a, v) => a + v.trials, 0);
+        const which = view.tasks[taskId]?.current ? "an earlier" : "another";
+        const what = scope.kind === "task" ? "this task" : titles[taskId] ?? taskId;
+        const links = versions.flatMap((v) => { const g = setupFor(v); return g ? [{ v, g }] : []; });
+        const tip = (v: OtherVersion, hash: string) => `Task hash ${v.taskHash} · grading hash ${hash}`;
+        return (
+          <p className="note" key={taskId}>
+            {n} trial{n === 1 ? "" : "s"} ran on {which} version of {what}.{" "}
+            {links.length === 1 ? <button className="linkish" title={tip(links[0]!.v, links[0]!.g.hash)} onClick={() => onVersion(links[0]!.g.hash)}>Switch to that version: {links[0]!.g.name}</button>
+              : links.map(({ v, g }, i) => <span key={v.taskHash}>{i > 0 && " · "}<button className="linkish" title={tip(v, g.hash)} onClick={() => onVersion(g.hash)}>{g.name} · {v.label != null ? `v${v.label}` : `task ${short(v.taskHash)}`} ({v.trials} trial{v.trials === 1 ? "" : "s"})</button></span>)}
+          </p>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * A task version: its readable label next to its short task hash (the hash is what decides comparability). A task
+ * file with no `version` has no label: its short task hash stands alone.
+ */
+const VersionLabel = ({ label, hash }: { label: number | null; hash: string }) =>
+  <span className="version" title={`Task hash ${hash}`}>{label != null && <>v{label} · </>}task <code>{short(hash)}</code></span>;
+
+const heat = (v?: number | null) => (v == null ? {} : { background: `color-mix(in srgb, var(--dataviz-7) ${Math.round(6 + (v / 100) ** 1.5 * 64)}%, var(--color-white))` });
+const sortedConfigs = (view: View, key: (s: ViewConfigSummary) => number | null) => [...view.summary.configs].sort((a, b) => (key(b) ?? -1) - (key(a) ?? -1));
+
+function Heatmap({ view, suites }: { view: View; suites: Map<string, Suite> }) {
+  const suiteIds = view.filters.suiteIds.filter((id) => suites.has(id));
+  const title = (t: string) => view.tasks[t]?.def.title ?? t;
+  return (
+    <section className="card">
+      <h2>Where each config is strong</h2>
+      <p className="sub">Score per task, Suite Index and Workflow Index (0–100). A blank cell means no valid trials; a config without a score on every task of a suite is partial there.</p>
+      <div className="table-wrap"><table>
+        <thead><tr><th>Configuration</th>
+          {suiteIds.flatMap((sid) => [...suites.get(sid)!.tasks.map((t) => <th key={`${sid}-${t}`}>{title(t)}</th>), <th key={sid} className="strong">{suites.get(sid)!.title} Index</th>])}
+          <th className="strong">Workflow Index</th></tr></thead>
+        <tbody>{sortedConfigs(view, (s) => s.index.mean).map((s) => (
+          <tr key={s.configId}>
+            <td className="cfg"><Marker s={s} />{s.label}<ConditionsNote c={s.conditions} /></td>
+            {suiteIds.flatMap((sid) => {
+              const p = s.partial[sid];
+              return [...suites.get(sid)!.tasks.map((t) => <td key={`${sid}-${t}`} style={heat(s.tasks[t]?.score.mean)}>{pct(s.tasks[t]?.score.mean)}</td>),
+                <td key={sid} className={`strong${p ? " muted" : ""}`} style={heat(s.suites[sid]?.mean)}>{p ? `partial (${p.have} of ${p.of} tasks)` : pct(s.suites[sid]?.mean)}</td>];
+            })}
+            <td className="strong" style={heat(s.index.mean)}>{pct(s.index.mean, 1)}</td>
+          </tr>
+        ))}</tbody>
+      </table></div>
+    </section>
+  );
+}
+
+type OtherVersion = View["leftOut"]["otherTask"]["versions"][number];
+
+const LEVEL_TEXT: Record<string, string> = { floor: "Floor", strong: "Strong", ceiling: "Ceiling" };
+
+function TaskBreakdown({ view, taskId, configs }: { view: View; taskId: string; configs: AgentConfig[] }) {
+  const vt = view.tasks[taskId];
+  const task = vt.def;
+  const [open, setOpen] = useState(false);
+  const inView = new Set(view.summary.configs.map((s) => s.configKey));
+  // A human config's note on its file, from the config file (its config key is human:<id>).
+  const notes = configs.flatMap((c) => (c.harness === "human" && inView.has(`human:${c.id}`) && c.outputs?.[taskId]?.note ? [{ id: c.id, label: configLabel(c), note: c.outputs[taskId].note! }] : []));
+  const rows = sortedConfigs(view, (s) => s.tasks[taskId]?.score.mean ?? null).filter((s) => s.tasks[taskId]?.valid > 0);
+  const dead = new Set(view.summary.deadCriteria[taskId] ?? []);
+  return (
+    <section className="card">
+      <div className="kicker">{task.title} · <VersionLabel label={vt.label} hash={vt.taskHash} /></div>
+      <h2>Where the points come from</h2>
+      <p className="sub">Measure score = % of its criteria passed (judge criteria count their share of passing votes). The task score is the mean of the measures.</p>
+      <div className="table-wrap"><table>
+        <thead><tr><th>Configuration</th>{task.measures.map((m) => <th key={m.id}>{m.label}</th>)}<th className="strong">Task score</th><th>Valid</th></tr></thead>
+        <tbody>
+          {rows.map((s) => {
+            const t = s.tasks[taskId];
+            return (
+              <tr key={s.configId}>
+                <td className="cfg"><Marker s={s} />{s.label}</td>
+                {task.measures.map((m) => <td key={m.id} style={heat(t.measures[m.id])}>{pct(t.measures[m.id])}</td>)}
+                <td className="strong">{pct(t.score.mean, 1)}{t.score.ci != null && <span className="ci"> ±{t.score.ci.toFixed(0)}</span>}</td>
+                <td className="muted">{t.valid}/{t.total}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table></div>
+      {notes.map((n) => <p key={n.id} className="note">{n.label}: {n.note}</p>)}
+
+      <button className="btn btn-quiet" onClick={() => setOpen((o) => !o)} aria-expanded={open}>{open ? "Hide" : "Show"} every criterion</button>
+      {open && (
+        <div className="table-wrap"><table className="criteria">
+          <thead><tr><th>Criterion</th><th>Level</th><th>Grader</th>{rows.map((s) => <th key={s.configId} title={s.label}><Marker s={s} size={12} /></th>)}</tr></thead>
+          <tbody>
+            {[{ id: "gates", label: "Gates", criteria: task.gates }, ...task.measures].filter((m) => m.criteria.length).map((m) => [
+              <tr key={m.id} className="group"><td colSpan={3 + rows.length}>{m.label}</td></tr>,
+              ...m.criteria.map((c) => (
+                <tr key={c.id}>
+                  <td className="q" title={c.question}>{c.id}{dead.has(c.id) && <span className="tag warn" title="Every config passed or every config failed: no signal">dead</span>}</td>
+                  <td><span className={`tag ${c.level}`}>{LEVEL_TEXT[c.level]}</span></td>
+                  <td className="muted">{c.grader}</td>
+                  {rows.map((s) => { const r = s.tasks[taskId].criteria[c.id]; return <td key={s.configId} style={heat(r == null ? null : r * 100)}>{r == null ? "—" : Math.round(r * 100)}</td>; })}
+                </tr>
+              )),
+            ])}
+          </tbody>
+        </table></div>
+      )}
+    </section>
+  );
+}
+
+const STATUS_TEXT: Record<Trial["status"], string> = { queued: "Queued", running: "Working…", grading: "Grading…", done: "", invalid: "Invalid", failed: "Failed" };
+
+function TrialsCard({ view, onTrial }: { view: View; onTrial: (id: string) => void }) {
+  const { trials } = view;
+  const taskIds = Object.keys(view.tasks);
+  return (
+    <section className="card">
+      <h2>Trials</h2>
+      <p className="sub">Every trial in this view, from every batch. Click a finished trial to read each criterion's verdict. Invalid = a grader error (re-grade it); failed = the harness could not run.</p>
+      {taskIds.map((tid) => (
+        <div key={tid} className="trial-task">
+          {taskIds.length > 1 && <div className="kicker">{view.tasks[tid].def.title}</div>}
+          <div className="trial-rows">
+            {view.summary.configs.filter((s) => trials.some((t) => t.configKey === s.configKey && t.taskId === tid)).map((s) => (
+              <div className="trial-row" key={s.configKey}>
+                <div className="cfg"><Marker s={s} />{s.label}<ConditionsNote c={s.pooled[tid]} /></div>
+                <div className="trial-cells">
+                  {trials.filter((t) => t.configKey === s.configKey && t.taskId === tid).map((t) => (
+                    <button key={t.id} className={`cell ${t.status}`} onClick={() => onTrial(t.id)} title={t.error ?? `Batch ${t.batchId}`}>
+                      <span className="k">Trial {t.index}</span>
+                      <span className="v">{t.status === "done" ? t.grades!.score.toFixed(1) : STATUS_TEXT[t.status]}</span>
+                      {t.status === "done" && <span className="k">{s.harness === "human" ? "by hand" : <>{money(t.result?.costUsd)} · {secs(t.durationMs)}</>}</span>}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+/**
+ * When a config's pooled trials ran under more than one user setup or Profile version, e.g. "2 setups, 2 Profile
+ * versions". Information, not a warning: run conditions never decide comparability (DEC-3).
+ */
+function conditionsText(c: { setups: number; profiles: number } | undefined): string | null {
+  if (!c) return null;
+  const parts = [c.setups > 1 && `${c.setups} setups`, c.profiles > 1 && `${c.profiles} Profile versions`].filter(Boolean);
+  return parts.length ? parts.join(", ") : null;
+}
+const ConditionsNote = ({ c }: { c: { setups: number; profiles: number } | undefined }) => {
+  const text = conditionsText(c);
+  return text ? <span className="conditions" title="Its pooled trials ran under these run conditions. Shown for information; they do not affect comparability.">{text}</span> : null;
+};
+
+const when = (iso: string | null | undefined) => (iso ? new Date(iso).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }) : "—");
+const GRADING_STATUS: Record<string, string> = { grading: "Grading…", done: "Done", invalid: "Invalid" };
+
+/** The trial's run conditions: shown, never part of comparability. */
+function RunConditions({ trial }: { trial: TrialDetail["trial"] }) {
+  const hash = (h: string | null) => (h ? <code title={h}>{short(h)}</code> : <span className="muted">none recorded</span>);
+  return (
+    <div className="conditions-list">
+      <h3>Run conditions</h3>
+      <dl>
+        <dt>User setup</dt><dd>{hash(trial.setupHash)}</dd>
+        <dt>Profile</dt><dd>{hash(trial.profileHash)}</dd>
+        <dt>Blocked tools</dt><dd>{trial.blockedTools == null ? <span className="muted">none recorded</span> : trial.blockedTools.length ? trial.blockedTools.join(", ") : "none"}</dd>
+        <dt>Harness version</dt><dd>{trial.harnessVersion ?? <span className="muted">none recorded</span>}</dd>
+        <dt>Started</dt><dd>{when(trial.startedAt)}</dd>
+      </dl>
+    </div>
+  );
+}
+
+/** Every grading of the trial, oldest first; the one the current view counts is marked. */
+function GradingList({ gradings, counted }: { gradings: TrialDetail["gradings"]; counted: number | null }) {
+  return (
+    <div className="gradings">
+      <h3>Gradings</h3>
+      {gradings.length === 0 ? <p className="muted">Not graded yet.</p> : (
+        <ul>{gradings.map((g) => (
+          <li key={g.id} className={g.id === counted ? "counted" : undefined}>
+            <span className="g-name">{g.setup?.name ?? "Unknown grading version"}</span>
+            <span>{g.setup?.judgeLabel ?? "Unknown judge"}</span>
+            <span className="muted">{when(g.gradedAt)}</span>
+            <span className="g-score">{g.status === "done" && g.score != null ? g.score.toFixed(1) : "—"}</span>
+            <span className={`g-status ${g.status}`}>{GRADING_STATUS[g.status] ?? g.status}</span>
+            <code title={`Grading hash ${g.gradingHash}`}>{short(g.gradingHash)}</code>
+            {g.id === counted && <span className="g-counted">Counts in this view</span>}
+          </li>
+        ))}</ul>
+      )}
+    </div>
+  );
+}
+
+function TrialDrawer({ view, trial, tick, onClose }: { view: View; trial: ViewTrial; tick: number; onClose: () => void }) {
+  const [md, setMd] = useState("");
+  const [image, setImage] = useState<string | null>(null);   // an object URL when the output is an image
+  const [detail, setDetail] = useState<TrialDetail | null>(null);
+  const [detailError, setDetailError] = useState("");
+  // The output never changes once the trial has ended: loaded once per trial. An image output (the server sends
+  // its media type) is shown as an image, any other output as Markdown text.
+  useEffect(() => {
+    let live = true, objectUrl: string | null = null;
+    setMd("");
+    setImage(null);
+    fetch(`/api/trials/${encodeURIComponent(trial.id)}/output`)
+      .then(async (r) => {
+        if (!r.ok) return;
+        if (r.headers.get("content-type")?.startsWith("image/")) {
+          const blob = await r.blob();
+          if (live) { objectUrl = URL.createObjectURL(blob); setImage(objectUrl); }
+        } else {
+          const t = await r.text();
+          if (live) setMd(t);
+        }
+      })
+      .catch(() => {});
+    return () => { live = false; if (objectUrl) URL.revokeObjectURL(objectUrl); };
+  }, [trial.id]);
+  useEffect(() => { setDetail(null); setDetailError(""); }, [trial.id]);
+  // Its gradings do change (a regrade adds one): loaded again on each database event.
+  useEffect(() => {
+    let live = true;
+    api<TrialDetail>(`/api/trials/${encodeURIComponent(trial.id)}`)
+      .then((d) => { if (live) { setDetail(d); setDetailError(""); } })
+      .catch((e: Error) => { if (live) setDetailError(e.message); });
+    return () => { live = false; };
+  }, [trial.id, tick]);
+  const [tab, setTab] = useState<"rendered" | "raw">("rendered");
+  const s = view.summary.configs.find((x) => x.configId === trial.configId)!;
+  const config = s;
+  const task = view.tasks[trial.taskId].def;
+  useEffect(() => {
+    const k = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", k);
+    return () => window.removeEventListener("keydown", k);
+  }, []);
+  const { fields, body } = useMemo(() => {
+    const m = md.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+    const field = (k: string) => m?.[1].match(new RegExp(`^${k}:\\s*["']?(.*?)["']?\\s*$`, "m"))?.[1];
+    return { fields: { title: field("title"), description: field("description") }, body: m ? md.slice(m[0].length) : md };
+  }, [md]);
+  // Image placeholders (often `![…](TODO)`) are shown as labels, not loaded.
+  const html = useMemo(() => marked.parse(body.replace(/!\[([^\]]*)\]\([^)]*\)/g, (_, alt) => `<span class="img-ph">Image: ${alt || "untitled"}</span>`), { async: false }) as string, [body]);
+  const g = trial.grades;
+  const groups = [{ id: "gates", label: "Gates", criteria: [{ id: "output-exists", question: "Did the agent write the output file?", level: "floor", grader: "check" } as Criterion, ...task.gates] }, ...task.measures];
+
+  return (
+    <>
+      <div className="scrim" onClick={onClose} />
+      <div className="drawer" role="dialog" aria-label="Trial detail">
+        <div className="drawer-head">
+          <div>
+            <div className="kicker"><Marker s={s} /> {task.title} · trial {trial.index} · batch {trial.batchId}</div>
+            <h2>{s.label}</h2>
+            <div className="stats">
+              <Stat k="Score" v={g ? g.score.toFixed(1) : "—"} />
+              <Stat k="Cost" v={money(trial.result?.costUsd) + (trial.result?.costSource === "estimated" ? " est." : "")} />
+              <Stat k="Time" v={secs(trial.durationMs)} />
+              <Stat k="Turns" v={String(trial.result?.turns ?? "—")} />
+              <Stat k="Model · effort" v={config.harness === "human" ? "by hand" : `${config.model} · ${config.effort ?? "default"}`} />
+              <Stat k="Profile" v={config.profile ?? "none"} />
+            </div>
+          </div>
+          <button className="close" onClick={onClose} aria-label="Close">×</button>
+        </div>
+        <div className="drawer-body">
+          <div>
+            {image ? <>
+              {trial.error && <p className="error">{trial.error}</p>}
+              <img className="output-image" src={image} alt={`Output of ${s.label} for ${task.title}, trial ${trial.index}`} />
+            </> : <>
+              <div className="tabs">
+                <button className={`tab ${tab === "rendered" ? "on" : ""}`} onClick={() => setTab("rendered")}>Rendered</button>
+                <button className={`tab ${tab === "raw" ? "on" : ""}`} onClick={() => setTab("raw")}>Markdown</button>
+              </div>
+              {trial.error && <p className="error">{trial.error}</p>}
+              {tab === "rendered" ? <>
+                {(fields.title || fields.description) && <div className="envelope"><div className="k">Subject</div><div className="subject">{fields.title ?? "—"}</div><div className="k">Preview</div><div>{fields.description ?? "—"}</div></div>}
+                <div className="prose" dangerouslySetInnerHTML={{ __html: html }} />
+              </> : <pre className="raw">{md}</pre>}
+            </>}
+          </div>
+          <div>
+            {detailError && <p className="error">{detailError}</p>}
+            {detail && <><RunConditions trial={detail.trial} /><GradingList gradings={detail.gradings} counted={trial.gradingId} /></>}
+            <h3>Verdicts</h3>
+            {groups.map((m) => (
+              <div key={m.id} className="verdict-group">
+                <div className="crit-head"><b>{m.label}</b>{m.id !== "gates" && g && <span className="crit-score">{pct(g.measures[m.id])}</span>}</div>
+                {m.criteria.map((c) => {
+                  const v = g?.verdicts[c.id];
+                  const state = v?.score == null ? "err" : v.score === 1 ? "pass" : v.score === 0 ? "fail" : "split";
+                  return (
+                    <div className={`crit ${state}`} key={c.id}>
+                      <div className="crit-top">
+                        <span className={`badge ${state}`}>{state === "err" ? "Error" : state === "split" ? `${v!.votes.filter((x) => x.pass).length}/${v!.votes.length}` : state === "pass" ? "Pass" : "Fail"}</span>
+                        <span className="q">{c.question}</span>
+                      </div>
+                      <div className="crit-meta"><span className={`tag ${c.level}`}>{LEVEL_TEXT[c.level]}</span><span className="muted">{c.grader}</span></div>
+                      {v?.error && <p className="error">{v.error}</p>}
+                      {v?.votes.map((x, i) => <p key={i} className="reason"><b>{x.pass ? "Yes" : "No"}.</b> {x.reason}</p>)}
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const Stat = ({ k, v }: { k: string; v: string }) => <div className="stat"><div className="k">{k}</div><div className="v">{v}</div></div>;
+
+/** What GET /api/batches returns for each batch (src/core/batches.ts and src/core/batch-state.ts). */
+interface BatchRow {
+  batch: { id: string; startedAt: string; endedAt: string | null };
+  request: { tasks?: string[]; suites?: string[]; configs?: string[]; trials?: number; judge?: string; votes?: number; taskIds?: string[] };
+  counts: Record<"queued" | "running" | "done" | "failed" | "invalid", number>;
+  total: number;
+  lastMoveAt: string;
+  state: "running" | "stalled" | "ended";
+}
+interface BatchTrialRow { id: string; taskId: string; configId: string; n: number; status: string; error: string | null }
+const STATUSES = ["done", "failed", "invalid", "running", "queued"] as const;
+const STATE_TEXT = { running: "Running", stalled: "Not ended", ended: "Ended" } as const;
+
+/** The last read of GET /api/batches: rows is null until the first read; error is the last read's failure, if any. */
+interface Batches { rows: BatchRow[] | null; error: string }
+
+/**
+ * The one reader of GET /api/batches, for the indicator and the Runs page both, so they show the same state. It reads
+ * on each /api/events tick, and on a timer, since a batch turns stalled by the clock alone, with no database change
+ * and so no event.
+ */
+function useBatches(tick: number): Batches {
+  const [batches, setBatches] = useState<Batches>({ rows: null, error: "" });
+  const [beat, setBeat] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setBeat((n) => n + 1), STATUS_REFRESH_MS);
+    return () => clearInterval(id);
+  }, []);
+  useEffect(() => {
+    let live = true;
+    api<BatchRow[]>("/api/batches")
+      .then((rows) => live && setBatches({ rows, error: "" }))
+      .catch((e: Error) => live && setBatches((b) => ({ ...b, error: e.message })));
+    return () => { live = false; };
+  }, [tick, beat]);
+  return batches;
+}
+
+/** The run status indicator in the top bar (US-005). A failed read shows as unavailable. A click opens Runs. */
+function RunStatusButton({ batches, onOpen }: { batches: Batches; onOpen: () => void }) {
+  const status: RunStatus | null = batches.error ? { kind: "unavailable", error: batches.error } : batches.rows && runStatus(batches.rows);
+  if (!status) return null;
+  const dot = status.kind === "running" ? "run" : status.kind === "idle" && status.stalled ? "stalled" : status.kind;
+  return (
+    <button className="run-status" title="Open the Runs page" aria-label={`${statusText(status, when)}. Open the Runs page`} onClick={onOpen}>
+      <span className={`dot ${dot}`} aria-hidden="true" />
+      <span className="run-status-text">{statusText(status, when)}</span>
+      {status.kind === "running" && <>
+        <span className="mini" aria-hidden="true"><b style={{ width: `${status.total ? (status.ended / status.total) * 100 : 0}%` }} /></span>
+        <span className="run-status-count">{status.ended} of {status.total}</span>
+      </>}
+    </button>
+  );
+}
+
+/** The Runs page: New run, and every batch with its progress. */
+function RunsPage({ batches, tick, onNew }: { batches: Batches; tick: number; onNew: () => void }) {
+  return (
+    <>
+      <section className="hero page-head">
+        <div>
+          <div className="kicker">Runs</div>
+          <h1>Runs</h1>
+          <p className="sub">Start a run and watch its progress here. Each trial shows on the Results page as soon as it is graded.</p>
+        </div>
+        <button className="btn btn-primary" onClick={onNew}>New run</button>
+      </section>
+      <BatchesPanel batches={batches} tick={tick} onNew={onNew} />
+    </>
+  );
+}
+
+/** Every batch: running and not-ended ones first, then the ended ones, newest first. The rows come from useBatches. */
+function BatchesPanel({ batches: { rows, error }, tick, onNew }: { batches: Batches; tick: number; onNew: () => void }) {
+  const [open, setOpen] = useState<string | null>(null);
+  if (error) return <section className="card batches"><h2>Batches</h2><p className="error">{error}</p></section>;
+  if (!rows) return <section className="card batches"><h2>Batches</h2><p className="muted">Loading…</p></section>;
+  if (!rows.length) return (
+    <div className="empty card batches"><div className="kicker">Batches</div><h1>No runs yet</h1><p>Start one and its progress shows here.</p><button className="btn btn-primary" onClick={onNew}>New run</button></div>
+  );
+  // The route lists newest first; the order holds within each group.
+  const shown = [...rows.filter((b) => b.state !== "ended"), ...rows.filter((b) => b.state === "ended")];
+  return (
+    <section className="card batches" aria-label="Batches">
+      <h2>Batches</h2>
+      <p className="sub">Running and not-ended batches first, then the ones that ended, newest first. Click a batch for each trial's status.</p>
+      <div className="batch-cols" aria-hidden="true"><span>Batch</span><span>Asked for</span><span>Progress</span><span>State</span></div>
+      <ul className="batch-list">
+        {shown.map((b) => <BatchItem key={b.batch.id} b={b} open={open === b.batch.id} onToggle={() => setOpen(open === b.batch.id ? null : b.batch.id)} tick={tick} />)}
+      </ul>
+    </section>
+  );
+}
+
+function BatchItem({ b, open, onToggle, tick }: { b: BatchRow; open: boolean; onToggle: () => void; tick: number }) {
+  const [trials, setTrials] = useState<BatchTrialRow[] | null>(null);
+  useEffect(() => {
+    if (!open) return;
+    let live = true;
+    api<{ trials: BatchTrialRow[] }>(`/api/batches/${encodeURIComponent(b.batch.id)}`).then((d) => live && setTrials(d.trials)).catch(() => live && setTrials(null));
+    return () => { live = false; };
+  }, [open, tick, b.batch.id]);
+  const r = b.request;
+  const asked = r.suites?.length ? `Suite${r.suites.length === 1 ? "" : "s"} ${r.suites.join(", ")}` : `Task${(r.tasks?.length ?? 0) === 1 ? "" : "s"} ${(r.tasks ?? r.taskIds ?? []).join(", ")}`;
+  const parts = [`${b.counts.done} of ${b.total} done`, ...STATUSES.filter((s) => s !== "done" && b.counts[s] > 0).map((s) => `${b.counts[s]} ${s}`)];
+  return (
+    <li className={`batch ${b.state}`}>
+      <button className="batch-head" aria-expanded={open} onClick={onToggle}>
+        <span className="batch-id"><b>{when(b.batch.startedAt)}</b><code>{b.batch.id}</code></span>
+        <span className="batch-asked">{asked} · {r.configs?.length ?? 0} config{r.configs?.length === 1 ? "" : "s"} · {b.total} trial{b.total === 1 ? "" : "s"}</span>
+        <span className="batch-progress">
+          <span className="batch-bar" role="img" aria-label={parts.join(", ")}>
+            {STATUSES.map((s) => b.counts[s] > 0 && <span key={s} className={`seg ${s}`} style={{ flexGrow: b.counts[s] }} title={`${b.counts[s]} ${s}`} />)}
+          </span>
+          <span className="batch-line">{parts.join(" · ")}</span>
+        </span>
+        <span className={`batch-state ${b.state}`}>{STATE_TEXT[b.state]}</span>
+      </button>
+      {b.state === "stalled" && <p className="note warn">Not ended. No trial has moved since {when(b.lastMoveAt)}; its process may have stopped.</p>}
+      {open && (trials ? (
+        <table className="batch-trials">
+          <thead><tr><th>Task</th><th>Config</th><th>#</th><th>Status</th></tr></thead>
+          <tbody>{trials.map((t) => <tr key={t.id}><td>{t.taskId}</td><td>{t.configId}</td><td>{t.n}</td><td><span className={`status ${t.status}`}>{t.status}</span>{t.error && <span className="muted" title={t.error}> · {t.error.slice(0, 80)}</span>}</td></tr>)}</tbody>
+        </table>
+      ) : <p className="muted">Loading…</p>)}
+    </li>
+  );
+}
+
+/** The New run dialog: tasks or suites, configs, trials, judge and votes. Start sends POST /api/runs. */
+function NewRun({ onClose, onStarted }: { onClose: () => void; onStarted: (id: string) => void }) {
+  const [configs, setConfigs] = useState<AgentConfig[]>([]);
+  const [suites, setSuites] = useState<Suite[]>([]);
+  const [tasks, setTasks] = useState<{ id: string; title: string }[]>([]);
+  const [judges, setJudges] = useState<JudgeConfig[]>([]);
+  const [by, setBy] = useState<"suites" | "tasks">("suites");
+  const [pickedSuites, setPickedSuites] = useState<Set<string>>(new Set());
+  const [pickedTasks, setPickedTasks] = useState<Set<string>>(new Set());
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [judgeId, setJudgeId] = useState("");
+  const [trials, setTrials] = useState(3);
+  const [votes, setVotes] = useState(3);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    api<AgentConfig[]>("/api/configs").then((c) => { setConfigs(c); setPicked(new Set(c.filter((x) => x.harness !== "pi").map((x) => x.id))); }).catch((e: Error) => setError(e.message));
+    api<Suite[]>("/api/suites").then((s) => { setSuites(s); setPickedSuites(new Set(s.map((x) => x.id))); }).catch((e: Error) => setError(e.message));
+    api<{ id: string; title: string }[]>("/api/tasks").then(setTasks).catch((e: Error) => setError(e.message));
+    api<JudgeConfig[]>("/api/judges").then((j) => { setJudges(j); setJudgeId(j[0]?.id ?? ""); }).catch((e: Error) => setError(e.message));
+  }, []);
+  const toggle = (set: Set<string>, fn: (s: Set<string>) => void, id: string) => { const n = new Set(set); n.has(id) ? n.delete(id) : n.add(id); fn(n); };
+  const taskIds = by === "suites" ? new Set(suites.filter((s) => pickedSuites.has(s.id)).flatMap((s) => s.tasks)) : pickedTasks;
+  const pickedConfigs = configs.filter((c) => picked.has(c.id));
+  const agentConfigs = pickedConfigs.filter((c) => c.harness !== "human").length;
+  const runs = taskIds.size * agentConfigs * trials;
+  const handOutputs = pickedConfigs.filter((c) => c.harness === "human").reduce((n, c) => n + Object.keys(c.outputs ?? {}).filter((t) => taskIds.has(t)).length, 0);
+  const start = async () => {
+    setBusy(true); setError("");
+    const scope = by === "suites" ? { suites: [...pickedSuites] } : { tasks: [...pickedTasks] };
+    try {
+      const r = await fetch("/api/runs", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...scope, configs: [...picked], trials, judge: judgeId, votes }) });
+      const body = await r.json().catch(() => ({ error: `${r.status} ${r.statusText}` }));
+      if (!r.ok) { setError(body.error); setBusy(false); return; }
+      onStarted(body.id);
+    } catch (e) { setError(e instanceof Error ? e.message : String(e)); setBusy(false); }
+  };
+  const markerOf = (c: AgentConfig) => ({ harness: c.harness, profile: c.profile, family: c.family ?? familyOf(c.model) });
+  const scopePicked = by === "suites" ? pickedSuites.size : pickedTasks.size;
+  return (
+    <>
+      <div className="scrim" onClick={onClose} />
+      <div className="modal" role="dialog" aria-label="New run">
+        <h2>New run</h2>
+        <div className="chips" role="tablist" aria-label="Run by">
+          <button role="tab" aria-selected={by === "suites"} className={`chip ${by === "suites" ? "on" : ""}`} onClick={() => setBy("suites")}>Suites</button>
+          <button role="tab" aria-selected={by === "tasks"} className={`chip ${by === "tasks" ? "on" : ""}`} onClick={() => setBy("tasks")}>Tasks</button>
+        </div>
+        {by === "suites" ? (
+          <fieldset><legend>Suites</legend>
+            {suites.map((s) => <label className="opt" key={s.id}><input type="checkbox" checked={pickedSuites.has(s.id)} onChange={() => toggle(pickedSuites, setPickedSuites, s.id)} />{s.title}<span className="muted">{s.tasks.length} task{s.tasks.length > 1 ? "s" : ""}</span></label>)}
+          </fieldset>
+        ) : (
+          <fieldset><legend>Tasks</legend>
+            {tasks.map((t) => <label className="opt" key={t.id}><input type="checkbox" checked={pickedTasks.has(t.id)} onChange={() => toggle(pickedTasks, setPickedTasks, t.id)} />{t.title}<span className="muted">{t.id}</span></label>)}
+          </fieldset>
+        )}
+        <fieldset><legend>Configs</legend>
+          {configs.map((c) => <label className="opt" key={c.id}><input type="checkbox" checked={picked.has(c.id)} onChange={() => toggle(picked, setPicked, c.id)} /><Marker s={markerOf(c)} />{configLabel(c)}</label>)}
+        </fieldset>
+        <fieldset><legend>Judge</legend>
+          <select value={judgeId} onChange={(e) => setJudgeId(e.target.value)} aria-label="Judge">
+            {judges.map((j) => <option key={j.id} value={j.id}>{j.label}</option>)}
+          </select>
+          <p className="note">Runs every judge criterion. Scores from different judges are not comparable.</p>
+        </fieldset>
+        <div className="row">
+          <label>Trials per config <input type="number" min={1} max={10} value={trials} onChange={(e) => setTrials(Number(e.target.value))} /></label>
+          <label>Votes per judge criterion <input type="number" min={1} max={7} value={votes} onChange={(e) => setVotes(Number(e.target.value))} /></label>
+        </div>
+        <p className="note">{runs} agent runs ({taskIds.size} task{taskIds.size === 1 ? "" : "s"} × {agentConfigs} agent configs × {trials} trials){handOutputs > 0 && <> + {handOutputs} file{handOutputs > 1 ? "s" : ""} written by hand</>}, each graded with up to {votes} judge vote{votes > 1 ? "s" : ""} per measure (the last ones run only when the first disagree).</p>
+        {error && <p className="error" role="alert">{error}</p>}
+        <div className="row end">
+          <button className="btn" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" disabled={!picked.size || !scopePicked || busy} onClick={start}>Start</button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+// Same rule as the server's familyOf (src/core/score.ts), for configs not yet in a summary.
+const EFFORT = new Set(["low", "medium", "high", "xhigh", "max", "minimal"]);
+const familyOf = (model: string) => model.toLowerCase().split(/[-_/:]/).filter((p) => p && !/\d/.test(p) && !EFFORT.has(p)).slice(0, 2).join("-") || model;
+
+createRoot(document.getElementById("root")!).render(<App />);