static-fire 0.44.0 → 0.54.1

package/web/app.tsx

@@ -5,17 +5,24 @@ import type { AgentConfig, Criterion, JudgeConfig, Suite, Trial } from "../src/c
 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 { coverageLine } from "../src/core/coverage";
+import { titleHref, toggleSuite, viewTitle } from "./index-switches";
+import { shownTask } from "./task-card";
 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 { howItWorksHref, 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 { HowItWorksPage } from "./how-it-works";
+import { TasksPage } from "./tasks";
+import { clearAll, filterTags, menuSections, pick, searchMenu, SECTION_NAMES, withGradingPick, type MenuValue, type SectionId } from "./filter-menu";
 import { runStatus, STATUS_REFRESH_MS, statusText, type RunStatus } from "./run-status";
+import { LevelLegend, LevelTag } from "./levels";
+import { alertText, gradingItem, notPlottedGroups, regradeNote, ungradedItem, type NotPlotted } from "./notices";
+import { HTML_SANDBOX, outputKind, PROSE_SANDBOX, PROSE_TOKENS, proseDoc, sourceLabel, type OutputKind } from "./output-view";
 
 /** 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[] }
@@ -57,7 +64,12 @@ function App() {
   }, []);
   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 }))
+      .then(([suites, tasks, configs]) => {
+        // The titles in the project's order: each suite's tasks in turn, then the tasks in no suite (the Filter menu's Task section).
+        const order = [...new Set([...suites.flatMap((s) => s.tasks), ...tasks.map((t) => t.id)])];
+        const title = new Map(tasks.map((t) => [t.id, t.title]));
+        setCatalog({ suites, titles: Object.fromEntries(order.filter((id) => title.has(id)).map((id) => [id, title.get(id)!])), 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.
@@ -133,6 +145,12 @@ function App() {
     setPage(to);
     window.scrollTo(0, 0);
   };
+  /** Opens an address inside the dashboard, such as an entry of the Tasks page, as a history entry. */
+  const goHref = (href: string) => {
+    history.pushState(null, "", href);
+    setPage(pageOf(new URL(href, location.href).pathname));
+    window.scrollTo(0, 0);
+  };
   const hrefOf = (to: PageId) => (to === "results" ? `${pathOf(to)}${search ? `?${search}` : ""}` : pathOf(to));
 
   const view = loaded?.view;
@@ -153,30 +171,44 @@ function App() {
 
       {page === "runs" ? <RunsPage batches={batches} tick={tick} onNew={() => setNewOpen(true)} />
         : page === "compare" ? <ComparePage tick={tick} titles={catalog?.titles ?? {}} />
+        : page === "tasks" ? <TasksPage />
+        : page === "how" ? <HowItWorksPage />
         : 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 }))} />} />}
+        : <Dashboard loaded={loaded} catalog={catalog} onScope={(scope, suites) => setQuery((q) => withScope(q, scope, suites, catalog, facets))} onTrial={setTrialId} onNew={() => go("runs")} onLink={goHref}
+            bar={<FilterBar query={query} view={loaded.view} facets={facets} titles={catalog.titles}
+              onChange={(patch) => setQuery((q) => ("scope" in patch ? withScope({ ...q, ...patch }, patch.scope ?? { kind: "index" }, patch.suites, catalog, facets)
+                : patch.grading ? gradingPicked({ ...q, ...patch }, loaded.view, catalog, facets) : { ...q, ...patch }))} />}
+            notice={(notPlotted) => <NoticeAlert view={loaded.view} scope={loaded.scope} titles={catalog.titles} search={search} regrade={regrade} error={regradeError}
+              notPlotted={notPlotted} onRegrade={startRegrade} onVersion={(grading) => setQuery((q) => gradingPicked({ ...q, grading, judge: undefined }, loaded.view, catalog, facets))} onLink={goHref} />} />}
       {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 after the page sets a grading pick: on the index, the suites become an explicit pick (web/filter-menu.ts withGradingPick). */
+function gradingPicked(q: ViewQuery, view: View, catalog: Catalog, facets: Facets | null): ViewQuery {
+  const taskId = facets?.grading.find((g) => g.setups.some((s) => s.hash.startsWith(q.grading!)))?.taskId;
+  return withGradingPick(q, taskId, view.filters.suiteIds ?? [], catalog.suites);
+}
+
 /**
- * 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.
+ * The query with a new scope and suite pick (`suites` undefined: nothing picked, the default set). 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. Back on the index with no suite picked, the kept grading pick picks the
+ * suite of its task, since the default set has no exception for it (withGradingPick).
  */
-function withScope(q: ViewQuery, scope: Scope, catalog: Catalog, facets: Facets | null): ViewQuery {
-  if (!q.grading) return { ...q, scope };
+function withScope(q: ViewQuery, scope: Scope, suites: string[] | undefined, catalog: Catalog, facets: Facets | null): ViewQuery {
+  const next: ViewQuery = { ...q, scope, suites: scope.kind === "index" && suites?.length ? suites : undefined };
+  if (!q.grading) return next;
   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 };
+    : catalog.suites.filter((s) => !next.suites || next.suites.includes(s.id)).flatMap((s) => s.tasks);
+  if (!taskId || !covered.includes(taskId)) return { ...next, grading: undefined };
+  return scope.kind === "index" && !next.suites ? withGradingPick(next, taskId, [], catalog.suites) : next;
 }
 
 /**
@@ -270,22 +302,21 @@ function FilterBar({ query, view, facets, titles, onChange }: {
           <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>}
+      {tags.length > 0 && <button type="button" className="btn clear-all" onClick={() => onChange(clearAll(query))}>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);
+const tasksOf = (view: View, sel: Scope) => (sel.kind === "task" ? [sel.id] : 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;
+function rowFor(view: View, s: ViewConfigSummary, sel: Scope): Row {
+  const tasks = tasksOf(view, sel);
+  const stat = sel.kind === "index" ? s.index : 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);
@@ -302,38 +333,52 @@ function rowFor(view: View, s: ViewConfigSummary, sel: Scope, suites: Map<string
 }
 
 /** 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);
+function pointFor(view: View, s: ViewConfigSummary, sel: Scope): Point | null {
+  const r = rowFor(view, s, sel);
   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. */
+/** Why a config with trials in view has no point: a suite in view 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 ids = 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 p ? [`${ids.length > 1 ? `${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));
+/** A config the chart cannot plot, for the alert's details: the suites in view it has not completed, and its score. */
+function notPlotted(view: View, s: ViewConfigSummary, sel: Scope, suites: Map<string, Suite>): NotPlotted {
+  const partial = sel.kind === "index"
+    ? Object.entries(s.partial).flatMap(([id, p]) => p ? [{ suite: suites.get(id)?.title ?? id, have: p.have, of: p.of }] : [])
+    : [];
+  return { label: s.label, partial, score: rowFor(view, s, sel).score };
+}
 
-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 }) {
+function Dashboard({ loaded, catalog, onScope, onTrial, onNew, onLink, bar, notice }: {
+  loaded: Loaded; catalog: Catalog; onScope: (s: Scope, suites?: string[]) => void; onTrial: (id: string) => void; onNew: () => void;
+  /** Opens an address inside the dashboard: the title's entry on the Tasks page. */
+  onLink: (href: string) => void; bar?: ReactNode;
+  /** The one alert (#82), given the configs the chart cannot plot (none in the Table, which lists them with a reason). */
+  notice?: (notPlotted: NotPlotted[]) => 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 inView = sel.kind === "index" ? view.filters.suiteIds : [];
+  const title = viewTitle(sel, inView, suites, taskTitle);
+  const titleLink = titleHref(sel, inView);
+  const coverage = sel.kind === "index" ? coverageLine(view.coverage, view.filters.judge.label) : null;
   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 points = agents.map((s) => pointFor(view, s, sel)).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;
+    const stat = sel.kind === "index" ? s.index : 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.
@@ -350,30 +395,35 @@ function Dashboard({ loaded, catalog, onScope, onTrial, onNew, bar, notice }: {
   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))]
+    ...[...points, ...summary.configs.filter((s) => humans.some((h) => h.s.configId === s.configId)).map((s) => rowFor(view, s, sel))]
       .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") }; }),
+    ...unplotted.map((s) => { const r = rowFor(view, s, sel); 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>
+        <h1>{titleLink ? <a className="title-link" href={titleLink} title={`Read about ${title} on the Tasks page`}
+          onClick={(e) => { if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; e.preventDefault(); onLink(titleLink); }}>{title}</a> : title}</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 className="chips" role="group" aria-label="Score shown">
+        <button className={`chip ${sel.kind === "index" && !view.coverage?.picked ? "on" : ""}`} aria-pressed={sel.kind === "index" && !view.coverage?.picked}
+          title="The best set of suites the data supports" onClick={() => onScope({ kind: "index" })}>Agent Performance Index</button>
+        {catalog.suites.map((s) => {
+          const on = inView.includes(s.id), next = toggleSuite(sel, inView, s.id, catalog.suites);
+          return <button key={s.id} className={`chip ${on ? "on" : ""}`} aria-pressed={on} disabled={!next}
+            title={next ? `${on ? "Leave out" : "Add"} ${s.title}` : "At least one suite stays in view"} onClick={() => next && onScope({ kind: "index" }, next)}>{s.title}</button>;
+        })}
       </div>
+      {coverage && <p className="note coverage">{coverage}</p>}
       {bar}
 
       {trials.length === 0 ? (
@@ -382,7 +432,7 @@ function Dashboard({ loaded, catalog, onScope, onTrial, onNew, bar, notice }: {
           <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}
+          {notice?.([])}
         </div>
       ) : <>
         <section className="card">
@@ -409,8 +459,7 @@ function Dashboard({ loaded, catalog, onScope, onTrial, onNew, bar, notice }: {
           </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>}
+          {notice?.(shown === "chart" ? unplotted.map((s) => notPlotted(view, s, sel, suites)) : [])}
           <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>
 
@@ -418,22 +467,22 @@ function Dashboard({ loaded, catalog, onScope, onTrial, onNew, bar, notice }: {
           <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)} />
+            <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)?.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 />
+            <BarList rows={agents.map((s) => ({ s, v: pointFor(view, s, sel)?.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 />
+            <BarList rows={agents.map((s) => ({ s, v: pointFor(view, s, sel)?.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} />)}
+        <TaskBreakdown view={view} configs={catalog.configs} />
         <TrialsCard view={view} onTrial={onTrial} />
       </>}
     </>
@@ -447,17 +496,33 @@ 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.
+ * The one alert in the chart card (#82, DEC-023): a button with a short count of what the view does not show, and
+ * a click that opens the details under it. The details float over the page (like the Filter menu), so the card
+ * is one line high whatever the number of notices. Each item says what is not shown and why, then what to do:
+ * - trials graded under another grading hash, or never graded: they come back with a regrade (judge calls only;
+ *   POST /api/regrade with the view's query). One Regrade button covers both.
+ * - 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.
+ * - configs the chart cannot plot, grouped by reason.
+ * Escape or a click outside closes the details. Renders nothing when there is nothing to report.
  */
-function LeftOutNotice({ view, scope, titles, search, regrade, error, onRegrade, onVersion }: {
+function NoticeAlert({ view, scope, titles, search, regrade, error, notPlotted, onRegrade, onVersion, onLink }: {
   view: View; scope: Scope; titles: Record<string, string>; search: string; regrade: RegradeStatus; error: string;
-  onRegrade: () => void; onVersion: (gradingHash: string) => void;
+  notPlotted: NotPlotted[]; onRegrade: () => void; onVersion: (gradingHash: string) => void; onLink: (href: string) => void;
 }) {
-  const { otherGrading, ungraded, otherTask } = view.leftOut;
-  if (!otherGrading.trials && !ungraded.trials && !otherTask.trials) return null;
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null), button = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    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]);
+  const { otherGrading, ungraded, otherTask, gradable } = view.leftOut;
+  const text = alertText(otherGrading.trials + ungraded.trials + otherTask.trials, notPlotted.length);
+  if (!text) 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 : "";
@@ -465,31 +530,58 @@ function LeftOutNotice({ view, scope, titles, search, regrade, error, onRegrade,
   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>
+  const groups = notPlottedGroups(notPlotted);
+  const grading = otherGrading.trials > 0 && gradingItem(otherGrading, { current, ungraded: ungraded.trials });
+  const notGraded = ungraded.trials > 0 && ungradedItem(ungraded, { current, otherGrading: otherGrading.trials });
+  const regradeBlock = current && (grading || notGraded) && (
+    <li className="notice-action">
+      <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"}
+      </button>
+      <p className="note">{regradeNote(gradable.length, !!view.coverage?.leftOut.length)}</p>
+      {(error || lastError) && <p className="error">The regrade did not finish: {error || lastError}</p>}
+    </li>
   );
+  const how = howItWorksHref("left-out");
   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 className="notice pop" ref={root}>
+      {/* A live region holds only the count, so a change is announced and opening the details is not. */}
+      <div role="status"><button ref={button} type="button" className={`notice-btn${open ? " on" : ""}`} aria-expanded={open} aria-controls="notice-details" onClick={() => setOpen(!open)}>
+        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 15 14H1z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" /><path d="M8 6v4M8 11.8v.4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
+        <span>{text}</span>
+        <span className="notice-more">{open ? "Hide details" : "Details"}</span>
+      </button></div>
+      {open && (
+        <div className="notice-details" id="notice-details" role="region" aria-label="What is not shown">
+          <ul>
+            {grading && <li><b>{grading.what}</b> {grading.todo}</li>}
+            {notGraded && <li><b>{notGraded.what}</b> {notGraded.todo}</li>}
+            {regradeBlock}
+            {[...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 (
+                <li key={taskId}>
+                  <b>{n} trial{n === 1 ? "" : "s"} ran on {which} version of {what}.</b> {n === 1 ? "It" : "They"} did a different job, so a regrade cannot bring {n === 1 ? "it" : "them"} in.{" "}
+                  {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 ? " · " : "Switch to: "}<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>)}
+                </li>
+              );
+            })}
+            {groups.length > 0 && (
+              <li>
+                <b>{notPlotted.length} config{notPlotted.length === 1 ? " is" : "s are"} not on the chart.</b> A point needs a valid score on every task in view and a cost.
+                <ul className="notice-groups">{groups.map((g) => <li key={g.why}>{g.why}: {g.configs.join(", ")}. <span className="muted">{g.todo}</span></li>)}</ul>
+                The Table lists {notPlotted.length === 1 ? "it" : "them"} with the reason.
+              </li>
+            )}
+          </ul>
+          <a className="notice-how" href={how} onClick={(e) => { if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; e.preventDefault(); onLink(how); }}>Why trials are left out (How it works)</a>
+        </div>
+      )}
     </div>
   );
 }
@@ -510,11 +602,11 @@ function Heatmap({ view, suites }: { view: View; suites: Map<string, Suite> }) {
   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>
+      <p className="sub">Score per task, Suite Index and Agent Performance 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>
+          <th className="strong">Agent Performance 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>
@@ -533,21 +625,38 @@ function Heatmap({ view, suites }: { view: View; suites: Map<string, Suite> }) {
 
 type OtherVersion = View["leftOut"]["otherTask"]["versions"][number];
 
-const LEVEL_TEXT: Record<string, string> = { floor: "Floor", strong: "Strong", ceiling: "Ceiling" };
+/**
+ * A menu of the tasks in view, for a per-task card (#81): the card shows one task at a time. With one task in
+ * view it has that one task.
+ */
+function TaskMenu({ view, value, onPick }: { view: View; value: string; onPick: (id: string) => void }) {
+  return (
+    <select className="task-menu" aria-label="Task" value={value} onChange={(e) => onPick(e.target.value)}>
+      {Object.keys(view.tasks).map((id) => <option key={id} value={id}>{view.tasks[id]!.def.title}</option>)}
+    </select>
+  );
+}
 
-function TaskBreakdown({ view, taskId, configs }: { view: View; taskId: string; configs: AgentConfig[] }) {
-  const vt = view.tasks[taskId];
-  const task = vt.def;
+/** "Where the points come from": one card with a menu of the tasks in view, opening on the first (DEC-022). */
+function TaskBreakdown({ view, configs }: { view: View; configs: AgentConfig[] }) {
+  const [picked, setPicked] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
+  const taskId = shownTask(Object.keys(view.tasks), picked);
+  if (!taskId) return null;
+  const vt = view.tasks[taskId]!;
+  const task = vt.def;
   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>
+    <section className="card points-card">
+      <div className="card-head">
+        <h2>Where the points come from</h2>
+        <TaskMenu view={view} value={taskId} onPick={setPicked} />
+      </div>
+      <div className="kicker"><VersionLabel label={vt.label} hash={vt.taskHash} /></div>
       <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>
@@ -577,7 +686,7 @@ function TaskBreakdown({ view, taskId, configs }: { view: View; taskId: string;
               ...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><LevelTag level={c.level} /></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>
@@ -586,22 +695,27 @@ function TaskBreakdown({ view, taskId, configs }: { view: View; taskId: string;
           </tbody>
         </table></div>
       )}
+      {open && <LevelLegend />}
     </section>
   );
 }
 
 const STATUS_TEXT: Record<Trial["status"], string> = { queued: "Queued", running: "Working…", grading: "Grading…", done: "", invalid: "Invalid", failed: "Failed" };
 
+/** "Trials": one card with a menu of the tasks in view, opening on the first (DEC-022). */
 function TrialsCard({ view, onTrial }: { view: View; onTrial: (id: string) => void }) {
   const { trials } = view;
-  const taskIds = Object.keys(view.tasks);
+  const [picked, setPicked] = useState<string | null>(null);
+  const tid = shownTask(Object.keys(view.tasks), picked);
   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>}
+    <section className="card trials-card">
+      <div className="card-head">
+        <h2>Trials</h2>
+        {tid && <TaskMenu view={view} value={tid} onPick={setPicked} />}
+      </div>
+      <p className="sub">Every trial of this task in the 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>
+      {tid && (
+        <div className="trial-task">
           <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}>
@@ -619,7 +733,7 @@ function TrialsCard({ view, onTrial }: { view: View; onTrial: (id: string) => vo
             ))}
           </div>
         </div>
-      ))}
+      )}
     </section>
   );
 }
@@ -680,32 +794,52 @@ function GradingList({ gradings, counted }: { gradings: TrialDetail["gradings"];
   );
 }
 
+type DrawerTab = "output" | "verdicts" | "run";
+const DRAWER_TABS: { id: DrawerTab; label: string }[] = [{ id: "output", label: "Output" }, { id: "verdicts", label: "Verdicts" }, { id: "run", label: "Run details" }];
+
+/** The dashboard's token values the Markdown frame's styles use (web/output-view.ts), read from this page. */
+const proseTokens = () => {
+  const css = getComputedStyle(document.documentElement);
+  return Object.fromEntries(PROSE_TOKENS.map((k) => [k, css.getPropertyValue(k).trim()]));
+};
+
 function TrialDrawer({ view, trial, tick, onClose }: { view: View; trial: ViewTrial; tick: number; onClose: () => void }) {
-  const [md, setMd] = useState("");
+  const s = view.summary.configs.find((x) => x.configId === trial.configId)!;
+  const config = s;
+  const task = view.tasks[trial.taskId].def;
+  const [text, setText] = useState("");
+  const [kind, setKind] = useState<OutputKind | null>(null);   // null until the output has loaded
+  const [missing, setMissing] = useState("");   // why there is no output to show
   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.
+  const [tab, setTab] = useState<DrawerTab>("output");
+  const [view2, setView2] = useState<"rendered" | "source">("rendered");
+  // The output never changes once the trial has ended: loaded once per trial. How it shows comes from the server's
+  // media type (an image) and the output path it sends (web/output-view.ts). It never goes into this page itself.
   useEffect(() => {
     let live = true, objectUrl: string | null = null;
-    setMd("");
+    setText("");
     setImage(null);
+    setKind(null);
+    setMissing("");
     fetch(`/api/trials/${encodeURIComponent(trial.id)}/output`)
       .then(async (r) => {
-        if (!r.ok) return;
-        if (r.headers.get("content-type")?.startsWith("image/")) {
+        if (!r.ok) { const why = await r.text(); if (live) setMissing(why); return; }
+        const k = outputKind(decodeURIComponent(r.headers.get("x-output-path") ?? ""), r.headers.get("content-type"));
+        if (k === "image") {
           const blob = await r.blob();
-          if (live) { objectUrl = URL.createObjectURL(blob); setImage(objectUrl); }
+          if (live) { objectUrl = URL.createObjectURL(blob); setImage(objectUrl); setKind(k); }
         } else {
           const t = await r.text();
-          if (live) setMd(t);
+          if (live) { setText(t); setKind(k); }
         }
       })
       .catch(() => {});
     return () => { live = false; if (objectUrl) URL.revokeObjectURL(objectUrl); };
   }, [trial.id]);
-  useEffect(() => { setDetail(null); setDetailError(""); }, [trial.id]);
+  // Another trial opens on its output, rendered.
+  useEffect(() => { setDetail(null); setDetailError(""); setTab("output"); setView2("rendered"); }, [trial.id]);
   // Its gradings do change (a regrade adds one): loaded again on each database event.
   useEffect(() => {
     let live = true;
@@ -714,24 +848,26 @@ function TrialDrawer({ view, trial, tick, onClose }: { view: View; trial: ViewTr
       .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 m = text.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]);
+    return { fields: { title: field("title"), description: field("description") }, body: m ? text.slice(m[0].length) : text };
+  }, [text]);
+  // Markdown and other text: rendered into a frame that runs no code. Image placeholders (often `![…](TODO)`) are
+  // shown as labels, not loaded.
+  const doc = useMemo(() => {
+    if (kind !== "markdown" && kind !== "text") return "";
+    const html = marked.parse(body.replace(/!\[([^\]]*)\]\([^)]*\)/g, (_, alt) => `<span class="img-ph">Image: ${alt || "untitled"}</span>`), { async: false }) as string;
+    return proseDoc(html, proseTokens());
+  }, [body, kind]);
   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];
+  const frameTitle = `Output of ${s.label} for ${task.title}, trial ${trial.index}`;
 
   return (
     <>
@@ -752,27 +888,30 @@ function TrialDrawer({ view, trial, tick, onClose }: { view: View; trial: ViewTr
           </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="drawer-tabs" role="tablist" aria-label="Trial detail">
+          {DRAWER_TABS.map((t) => (
+            <button key={t.id} role="tab" id={`drawer-tab-${t.id}`} aria-controls="drawer-panel" aria-selected={tab === t.id} className={`drawer-tab ${tab === t.id ? "on" : ""}`} onClick={() => setTab(t.id)}>{t.label}</button>
+          ))}
+        </div>
+        <div className={`drawer-panel ${tab}`} id="drawer-panel" role="tabpanel" aria-labelledby={`drawer-tab-${tab}`}>
+          {tab === "output" && <>
+            {trial.error && <p className="error">{trial.error}</p>}
+            {kind === null ? <p className="muted">{missing || "Loading…"}</p>
+              : kind === "image" ? (image && <img className="output-image" src={image} alt={frameTitle} />) : <>
               <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>
+                <button className={`tab ${view2 === "rendered" ? "on" : ""}`} aria-pressed={view2 === "rendered"} onClick={() => setView2("rendered")}>Rendered</button>
+                <button className={`tab ${view2 === "source" ? "on" : ""}`} aria-pressed={view2 === "source"} onClick={() => setView2("source")}>{sourceLabel(kind)}</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>}
+              {view2 === "source" ? <pre className="raw">{text}</pre>
+                : kind === "html" ? <iframe className="output-frame page" title={frameTitle} sandbox={HTML_SANDBOX} referrerPolicy="no-referrer" srcDoc={text} />
+                : <>
+                  {(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>}
+                  <iframe className="output-frame prose-frame" title={frameTitle} sandbox={PROSE_SANDBOX} referrerPolicy="no-referrer" srcDoc={doc} />
+                </>}
             </>}
-          </div>
-          <div>
-            {detailError && <p className="error">{detailError}</p>}
-            {detail && <><RunConditions trial={detail.trial} /><GradingList gradings={detail.gradings} counted={trial.gradingId} /></>}
-            <h3>Verdicts</h3>
+          </>}
+          {tab === "verdicts" && <>
+            <LevelLegend />
             {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>
@@ -785,7 +924,7 @@ function TrialDrawer({ view, trial, tick, onClose }: { view: View; trial: ViewTr
                         <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>
+                      <div className="crit-meta"><LevelTag level={c.level} /><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>
@@ -793,7 +932,11 @@ function TrialDrawer({ view, trial, tick, onClose }: { view: View; trial: ViewTr
                 })}
               </div>
             ))}
-          </div>
+          </>}
+          {tab === "run" && <>
+            {detailError && <p className="error">{detailError}</p>}
+            {detail ? <><RunConditions trial={detail.trial} /><GradingList gradings={detail.gradings} counted={trial.gradingId} /></> : !detailError && <p className="muted">Loading…</p>}
+          </>}
         </div>
       </div>
     </>