static-fire 0.0.0-stage → 0.54.1

package/web/encoding.tsx

@@ -0,0 +1,55 @@
+// One visual encoding for every chart and table (Offset dataviz tokens, web/brand/offset-tokens.css):
+//   shape  = harness        (circle Claude Code, square Codex, diamond Antigravity, triangle Pi, star by hand)
+//   colour = model family   (fixed slot per family, so a colour never moves between views; ink = a person)
+//   fill   = apkit Profile  (filled = with Profile, hollow = none; a person is always filled)
+// Every mark keeps Offset's 2px ink outline; text is always ink, never the series colour.
+import type { ConfigSummary, Harness } from "../src/core/types";
+export { HARNESS_NAME } from "../src/core/label";
+export const HARNESS_ORDER: Harness[] = ["claude", "codex", "agy", "pi", "human"];
+
+const FAMILY_SLOT: Record<string, number> = {
+  "claude-opus": 3, "claude-sonnet": 4, "claude-haiku": 5,
+  "gpt-sol": 7, "gpt-luna": 6, "gemini-argon": 2, "gemini-flash": 1,
+};
+const FAMILY_NAME: Record<string, string> = {
+  "claude-opus": "Opus", "claude-sonnet": "Sonnet", "claude-haiku": "Haiku",
+  "gpt-sol": "GPT Sol", "gpt-luna": "GPT Luna", "gemini-argon": "Gemini Argon", "gemini-flash": "Gemini Flash", human: "Person",
+};
+export const familyName = (f: string) => FAMILY_NAME[f] ?? f;
+export const familySlot = (f: string) => FAMILY_SLOT[f] ?? 1;
+export const fill = (f: string) => (f === "human" ? "var(--color-ink)" : `var(--dataviz-${familySlot(f)})`);
+export const strong = (f: string) => (f === "human" ? "var(--color-ink)" : `var(--dataviz-${familySlot(f)}-strong)`);
+
+/** SVG path for a marker centred on (0,0) with radius r. */
+export function shapePath(h: Harness, r: number) {
+  switch (h) {
+    case "codex": { const s = r * 0.9; return `M${-s},${-s}H${s}V${s}H${-s}Z`; }
+    case "agy": { const s = r * 1.2; return `M0,${-s}L${s},0L0,${s}L${-s},0Z`; }
+    case "pi": { const s = r * 1.15; return `M0,${-s}L${s},${s * 0.8}L${-s},${s * 0.8}Z`; }
+    case "human": {
+      const R = r * 1.3, ri = R * 0.45;
+      const pts = Array.from({ length: 10 }, (_, i) => { const a = -Math.PI / 2 + (i * Math.PI) / 5, d = i % 2 ? ri : R; return `${(d * Math.cos(a)).toFixed(2)},${(d * Math.sin(a)).toFixed(2)}`; });
+      return `M${pts.join("L")}Z`;
+    }
+    default: return `M${r},0A${r},${r} 0 1,1 ${-r},0A${r},${r} 0 1,1 ${r},0Z`;
+  }
+}
+
+type MarkerLike = Pick<ConfigSummary, "harness" | "profile" | "family">;
+
+export function markerProps(s: MarkerLike) {
+  const filled = s.profile || s.harness === "human";
+  return { fill: filled ? fill(s.family) : "var(--color-white)", stroke: "var(--outline)", strokeWidth: 2 };
+}
+
+/** A standalone marker for legends, tables and lists. `neutral` shows the shape (or hollowness) only. */
+export function Marker({ s, size = 14, neutral }: { s: MarkerLike; size?: number; neutral?: boolean }) {
+  const r = size / 2 - 2;
+  const dot = neutral ? "var(--fg-3)" : fill(s.family);
+  return (
+    <svg width={size} height={size} viewBox={`${-size / 2} ${-size / 2} ${size} ${size}`} aria-hidden className="marker">
+      <path d={shapePath(s.harness, r)} {...markerProps(s)} {...(neutral && s.profile ? { fill: "var(--color-cream)" } : {})} />
+      {!s.profile && s.harness !== "human" && <path d={shapePath(s.harness, r * 0.45)} fill={dot} stroke="none" />}
+    </svg>
+  );
+}

package/web/filter-menu.ts

@@ -0,0 +1,195 @@
+// The Results page's Filter menu and filter tags (#26), as plain data: which sections and values the menu lists,
+// what picking a value sets in the view query, what the search lists and which tags show. The page only draws it.
+// A config facet (Harness, Model, Effort, Profile) takes several values (#31): a pick adds or removes one value and
+// each picked value is its own tag. Task, Judge, Grading version and Date range take one value: a pick replaces it.
+// Task (#81) is the task view: a task is picked here, not by a button on the page.
+import type { Facets, FacetValue } from "../src/core/facets";
+import { HARNESS_NAME } from "../src/core/label";
+import { CONFIG_FACETS, valueSet } from "../src/core/view-query";
+import type { ConfigFacet, ViewQuery } from "../src/core/view-query";
+
+export type SectionId = "task" | "harness" | "model" | "effort" | "profile" | "judge" | "grading" | "dates";
+export const SECTION_NAMES: Record<SectionId, string> = {
+  task: "Task", harness: "Harness", model: "Model", effort: "Effort", profile: "Profile", judge: "Judge", grading: "Grading version", dates: "Date range",
+};
+export const EFFORT_NONE = "No effort setting", PROFILE_NONE = "No Profile (user setup only)";
+
+type Patch = Partial<ViewQuery>;
+
+/**
+ * One value the menu lists. Picking it sets `set`; picking it again when it is picked sets `clear`. In a config
+ * section, `set` adds the value to the picked ones and `clear` removes only it.
+ */
+export interface MenuValue {
+  section: SectionId; sectionName: string; key: string; label: string;
+  /** A second line: a grading version's date, judge and current mark. */
+  detail?: string;
+  /** The task a grading version belongs to, when more than one task is in scope. */
+  group?: string;
+  /** A title for the value, for example a grading version's full hash. */
+  title?: string;
+  count: number; picked: boolean; current?: boolean;
+  set: Patch; clear: Patch;
+}
+
+export interface MenuSection {
+  id: SectionId; name: string;
+  /** The picked value, "N picked" when there are more, or how many values there are. */
+  summary: string;
+  picked: boolean;
+  values: MenuValue[];
+  /** What removing this section's filter sets. */
+  remove: Patch;
+}
+
+export interface MenuContext {
+  facets: Facets | null; query: ViewQuery;
+  /** The view's judge: set by the judge filter, or by a picked grading version. */
+  judge: { id: string; label: string };
+  /** The title of every task in the project, in the project's order: the Task section lists them all. */
+  titles: Record<string, string>;
+}
+
+export const CLEAR_ALL: Patch = { judge: undefined, grading: undefined, harness: undefined, model: undefined, effort: undefined, profile: undefined, since: undefined, until: undefined };
+
+/** What Clear all sets: every filter, and a picked task (back to the index). A suite pick is not a filter: it stays. */
+export const clearAll = (q: ViewQuery): Patch => (q.scope?.kind === "task" ? { ...CLEAR_ALL, scope: undefined } : CLEAR_ALL);
+
+const plural = (n: number, one: string) => `${n} ${one}${n === 1 ? "" : "s"}`;
+const short = (hash: string) => hash.slice(0, 8);
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+/** "2026-11-06" (a date filter, a calendar day) as "Nov 6, 2026", with no time zone shift. */
+const dayText = (day: string) => {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(day);
+  return m ? `${MONTHS[Number(m[2]) - 1]} ${Number(m[3])}, ${m[1]}` : day;
+};
+const shortDate = (iso: string) => new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+
+/** The date range filter in words, or null when it is not set. */
+export function dateRangeText(since?: string, until?: string): string | null {
+  if (since && until) return `${dayText(since)} to ${dayText(until)}`;
+  if (since) return `from ${dayText(since)}`;
+  if (until) return `until ${dayText(until)}`;
+  return null;
+}
+
+const NAMES: Partial<Record<SectionId, (v: string) => string>> = {
+  harness: (v) => HARNESS_NAME[v as keyof typeof HARNESS_NAME] ?? v,
+  effort: (v) => (v === "none" ? EFFORT_NONE : v),
+  profile: (v) => (v === "none" ? PROFILE_NONE : v),
+};
+
+function section(id: SectionId, values: MenuValue[], remove: Patch): MenuSection {
+  const on = values.filter((v) => v.picked);
+  const summary = on.length > 1 ? `${on.length} picked` : on[0]?.label ?? plural(values.length, "value");
+  return { id, name: SECTION_NAMES[id], summary, picked: on.length > 0, values, remove };
+}
+
+/** A config facet: its values with counts, and each URL value no trial has, listed with no trials. */
+function facetSection(id: ConfigFacet, listed: FacetValue[], picked: string[]): MenuSection {
+  const all: FacetValue[] = [...listed, ...picked.filter((p) => !listed.some((v) => v.value === p)).map((value) => ({ value, count: 0 }))];
+  const name = NAMES[id] ?? ((v: string) => v);
+  const to = (values: string[]): Patch => { const v = valueSet(values); return { [id]: v.length ? v : undefined }; };
+  const values = all.map((v): MenuValue => ({
+    section: id, sectionName: SECTION_NAMES[id], key: v.value, label: v.label ?? name(v.value), count: v.count, picked: picked.includes(v.value),
+    set: to([...picked, v.value]), clear: to(picked.filter((p) => p !== v.value)),
+  }));
+  return section(id, values, { [id]: undefined });
+}
+
+/** Every section of the menu, in order, for the facets and the query in view. */
+export function menuSections({ facets, query, judge, titles }: MenuContext): MenuSection[] {
+  const f = facets;
+  // Task: every task in the project. Picking one opens its task view; picking it again goes back to the index.
+  const taskPicked = query.scope?.kind === "task" ? query.scope.id : undefined;
+  const taskCounts = new Map((f?.scope.tasks ?? []).map((t) => [t.value, t.count]));
+  const taskIds = Object.keys(titles);
+  if (taskPicked && !taskIds.includes(taskPicked)) taskIds.push(taskPicked);   // a URL task the project does not list
+  const taskSection = section("task", taskIds.map((id): MenuValue => ({
+    section: "task", sectionName: SECTION_NAMES.task, key: id, label: titles[id] ?? id, count: taskCounts.get(id) ?? 0, picked: id === taskPicked,
+    set: { scope: { kind: "task", id }, suites: undefined }, clear: { scope: undefined },
+  })), { scope: undefined });
+  const config = CONFIG_FACETS.map((k) => facetSection(k, f?.[k] ?? [], query[k] ?? []));
+
+  // Judge: a picked grading version sets the view's judge, so that judge shows as picked.
+  const judgePicked = query.judge ?? (query.grading ? judge.id : undefined);
+  const judges = f?.judge ?? [];
+  const listedJudges = judges.some((j) => j.value === judge.id) ? judges : [...judges, { value: judge.id, label: judge.label, count: 0 }];
+  const judgeValues = listedJudges.map((j): MenuValue => ({
+    section: "judge", sectionName: SECTION_NAMES.judge, key: j.value, label: j.label ?? j.value, count: j.count, picked: j.value === judgePicked,
+    set: { judge: j.value, grading: undefined }, clear: { judge: undefined, grading: undefined },
+  }));
+  const judgeSection = section("judge", judgeValues, { judge: undefined, grading: undefined });
+
+  // Grading version: per task, its versions by name. Each judge's current version is marked. A current one clears
+  // the filter and sets its own judge: the judge in view (which may come only from the picked hash, so the pick
+  // keeps it), or another judge, whose current version that is.
+  // Read from the query, not the loaded view, so a tag goes the moment its filter does. A URL may hold a hash prefix.
+  const isPicked = (hash: string) => !!query.grading && hash.startsWith(query.grading);
+  const groups = f?.grading ?? [];
+  const gradingValues = groups.flatMap((g) => {
+    const judges = new Set(g.setups.map((s) => s.judgeLabel)).size > 1;
+    return g.setups.map((s): MenuValue => ({
+      section: "grading", sectionName: SECTION_NAMES.grading, key: s.hash, label: s.name,
+      detail: [shortDate(s.firstSeen), judges ? `judge ${s.judgeLabel}` : "", s.current ? "current" : ""].filter(Boolean).join(" · "),
+      group: groups.length > 1 ? titles[g.taskId] ?? g.taskId : undefined,
+      title: `Grading hash ${s.hash}`,
+      count: s.count, picked: isPicked(s.hash), current: s.current,
+      set: s.current ? { grading: undefined, judge: s.judgeId === judge.id ? judgePicked : s.judgeId ?? undefined } : { grading: s.hash, judge: undefined },
+      clear: { grading: undefined },
+    }));
+  });
+  if (query.grading && !gradingValues.some((v) => v.picked))   // a URL hash no listed version has
+    gradingValues.push({ section: "grading", sectionName: SECTION_NAMES.grading, key: query.grading, label: short(query.grading), title: `Grading hash ${query.grading}`, count: 0, picked: true, set: {}, clear: { grading: undefined } });
+  const gradingSection = section("grading", gradingValues, { grading: undefined });
+
+  // Date range: a pair of dates, not a list of values.
+  const range = dateRangeText(query.since, query.until);
+  const dates: MenuSection = { id: "dates", name: SECTION_NAMES.dates, summary: range ?? "Any date", picked: !!range, values: [], remove: { since: undefined, until: undefined } };
+
+  return [taskSection, ...config, judgeSection, gradingSection, dates];
+}
+
+/** What picking `v` sets: the value, or without it when it is already picked. */
+export const pick = (v: MenuValue): Patch => (v.picked ? v.clear : v.set);
+
+/**
+ * The query after the page sets a grading pick (#80, DEC-019). The default set of suites has no exception for a
+ * picked grading version, and a new grading can change which configs have completed a suite, so on the index the
+ * pick also becomes an explicit suite pick: the suites in view (or the picked ones), and the first suite of the
+ * version's task when none of them has it. A view of one task needs no suite. `taskId` comes from the facets.
+ */
+export function withGradingPick(q: ViewQuery, taskId: string | undefined, suitesInView: string[], suites: { id: string; tasks: string[] }[]): ViewQuery {
+  if (!q.grading || q.scope?.kind === "task" || !taskId) return q;
+  const ids = new Set(q.suites?.length ? q.suites : suitesInView);
+  if (!suites.some((s) => ids.has(s.id) && s.tasks.includes(taskId))) {
+    const home = suites.find((s) => s.tasks.includes(taskId));
+    if (home) ids.add(home.id);
+  }
+  const picked = suites.filter((s) => ids.has(s.id)).map((s) => s.id);   // catalog order
+  return picked.length ? { ...q, scope: { kind: "index" }, suites: picked } : q;
+}
+
+/**
+ * The search: every value of every section whose section name, name, task or detail line (a grading version's
+ * judge) matches the text (case ignored), as one flat list; and whether the date range matches, so it shows as one entry.
+ */
+export function searchMenu(sections: MenuSection[], text: string): { values: MenuValue[]; dates: boolean } {
+  const q = text.trim().toLowerCase();
+  if (!q) return { values: [], dates: false };
+  const values = sections.flatMap((s) => s.values).filter((v) => `${v.sectionName} ${v.label} ${v.group ?? ""} ${v.detail ?? ""}`.toLowerCase().includes(q));
+  return { values, dates: SECTION_NAMES.dates.toLowerCase().includes(q) };
+}
+
+export interface FilterTag { section: SectionId; /** Unique among the tags. */ key: string; name: string; value: string; text: string; remove: Patch }
+
+const CONFIG_SECTIONS = new Set<SectionId>(CONFIG_FACETS);
+
+/**
+ * One tag per active filter, reading "<section>: <value>": one per picked value of a config section, whose
+ * remove control removes only that value, and one for each other section with a pick.
+ */
+export const filterTags = (sections: MenuSection[]): FilterTag[] =>
+  sections.filter((s) => s.picked).flatMap((s): FilterTag[] => CONFIG_SECTIONS.has(s.id)
+    ? s.values.filter((v) => v.picked).map((v) => ({ section: s.id, key: `${s.id}:${v.key}`, name: s.name, value: v.label, text: `${s.name}: ${v.label}`, remove: v.clear }))
+    : [{ section: s.id, key: s.id, name: s.name, value: s.summary, text: `${s.name}: ${s.summary}`, remove: s.remove }]);

package/web/how-it-works.tsx

@@ -0,0 +1,92 @@
+// The How it works page (#79): a short explanation of how Static Fire gets from a trial to a number, in the terms
+// of CONTEXT.md. Static text. Its sections and their order are HOW_IT_WORKS_SECTIONS (web/pages.ts), so another
+// page can link to one section, for example /how-it-works#left-out.
+import { useEffect, type ReactNode } from "react";
+import { HOW_IT_WORKS_SECTIONS, pathOf, type HowItWorksSection } from "./pages";
+
+const BODY: Record<HowItWorksSection, ReactNode> = {
+  trial: <>
+    <p>A <b>trial</b> is one run of one agent config on one task. The agent works in a new folder of its own, with
+      the task's prompt, its input files and its project files, and with your own setup, as it would in real work.
+      It writes its output to the path the task names. Then the output is graded.</p>
+    <p>A trial that could not run (the harness did not start, a login expired, it timed out) is <i>failed</i>. It
+      shows as a failure and is not in any mean.</p>
+  </>,
+  score: <>
+    <ul>
+      <li><b>Gates</b> are yes or no questions that every output must pass, for example "The output file exists". If
+        a gate fails, the task score is 0.</li>
+      <li>A <b>measure</b> is a group of criteria. Its score is the percent of its criteria that passed.</li>
+      <li>The <b>task score</b> is the mean of the measure scores, with each measure's weight (equal by default),
+        from 0 to 100.</li>
+      <li>The <b>Suite Index</b> is the mean task score over the tasks of a suite. A config gets one only when it
+        has a valid score on every task of the suite. Otherwise it is <i>partial</i>.</li>
+      <li>The <b>Agent Performance Index</b> is the mean Suite Index over the suites in view. It also needs a valid
+        score on every task of every suite in view.</li>
+    </ul>
+    <p>A point on a chart is the mean over every valid trial of that config in the view, from any batch, with a 95%
+      confidence interval.</p>
+  </>,
+  graders: <>
+    <p>Each criterion has one grader:</p>
+    <ul>
+      <li>A <b>check</b> is code. It gives the same answer every time: a pattern match, a word count, a field in the
+        file's front matter, or a command.</li>
+      <li>A <b>judge</b> is a model that reads the output and answers the question. The judge configuration in{" "}
+        <code>judges.yaml</code> sets which model it is. A judge does not use your own setup.</li>
+    </ul>
+    <p>A judge answers each question several times (3 by default). Each answer is a <b>vote</b>, with a pass or fail
+      and a reason. The criterion's score is the share of votes that passed, so 2 of 3 votes give 0.67.</p>
+    <p>When a grader cannot decide, its verdict is an error. That trial is left out of the means until a regrade
+      grades it again.</p>
+  </>,
+  levels: <>
+    <p>Each criterion has a level. It tells you how hard the criterion is meant to be:</p>
+    <ul>
+      <li><span className="tag floor">Floor</span> Most configurations should pass.</li>
+      <li><span className="tag strong">Strong</span> Good configurations pass.</li>
+      <li><span className="tag ceiling">Ceiling</span> Only the best configurations pass.</li>
+    </ul>
+    <p>The level does not change the score. A config that fails floor criteria is not ready for the work. Ceiling
+      criteria show which configs are the best.</p>
+  </>,
+  "left-out": <>
+    <p>A chart compares only trials that did the same job and were graded the same way. The Results page counts the
+      trials it leaves out, by reason:</p>
+    <ul>
+      <li><b>Another grading version.</b> The criteria, the references or the grading code changed after the trial
+        was graded. <i>What to do:</i> regrade, which uses judge calls only and runs no agent. Or pick the earlier
+        grading version in the Filter menu to see those trials as they were graded.</li>
+      <li><b>Another task version.</b> The prompt, the output path or the files the agent gets changed, so the
+        trial did a different job. A regrade cannot bring it in. <i>What to do:</i> switch to that version to see
+        its trials, or run new trials on the current one.</li>
+      <li><b>Another judge.</b> The trial was graded by a different judge, and the scores of two judges are never
+        mixed. <i>What to do:</i> pick that judge in the Filter menu, or regrade with the judge in view.</li>
+      <li><b>Not graded yet.</b> The trial has no finished grading. <i>What to do:</i> if its batch is still running,
+        wait. If not, regrade.</li>
+    </ul>
+  </>,
+};
+
+export function HowItWorksPage() {
+  // A link to one section opens the page there.
+  useEffect(() => { if (location.hash) document.getElementById(decodeURIComponent(location.hash.slice(1)))?.scrollIntoView(); }, []);
+  return (
+    <>
+      <section className="hero">
+        <div className="kicker">How it works</div>
+        <h1>From a trial to a number</h1>
+        <p className="page-sub">What each number on the Results page means. Each task's own questions are on the{" "}
+          <a href={pathOf("tasks")}>Tasks</a> page.</p>
+      </section>
+      <section className="card how-it-works">
+        {HOW_IT_WORKS_SECTIONS.map((s) => (
+          <section key={s.id} id={s.id} className="how-section">
+            <h2>{s.title}</h2>
+            {BODY[s.id]}
+          </section>
+        ))}
+      </section>
+    </>
+  );
+}

package/web/index-switches.ts

@@ -0,0 +1,29 @@
+// The index buttons of the Results page (#80): the suites in view are switches, and the title follows them.
+// Kept apart from app.tsx so the rules are tested without a browser.
+import type { Suite } from "../src/core/types";
+import type { Scope } from "../src/core/view-query";
+import { suiteHref, taskHref } from "./pages";
+
+/**
+ * The title of a view: the task's on a task view, the suite's when one suite is in view, else
+ * "Agent Performance Index". It never lists the suites, so it does not grow with them.
+ */
+export const viewTitle = (sel: Scope, suiteIds: string[], suites: Map<string, Suite>, taskTitle: (id: string) => string) =>
+  sel.kind === "task" ? taskTitle(sel.id) : suiteIds.length === 1 ? suites.get(suiteIds[0]!)?.title ?? suiteIds[0]! : "Agent Performance Index";
+
+/**
+ * The suites in view after a click on a suite's switch. On a task view it opens the index on that suite alone.
+ * Otherwise it turns the suite off when it is in view, else on. Null when the click would leave no suite in view.
+ */
+export function toggleSuite(sel: Scope, inView: string[], id: string, catalog: Suite[]): string[] | null {
+  if (sel.kind === "task") return [id];
+  const next = inView.includes(id) ? inView.filter((x) => x !== id) : [...inView, id];
+  return next.length ? catalog.map((s) => s.id).filter((x) => next.includes(x)) : null;
+}
+
+/**
+ * Where the title links (#81): a task view's title to the task's entry on the Tasks page, one suite's to the
+ * suite's entry. The Agent Performance Index over several suites is not a name, so it has no link.
+ */
+export const titleHref = (sel: Scope, suiteIds: string[]): string | null =>
+  sel.kind === "task" ? taskHref(sel.id) : suiteIds.length === 1 ? suiteHref(suiteIds[0]!) : null;

package/web/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Static Fire</title>
+    <link rel="icon" href="data:," />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./app.tsx"></script>
+  </body>
+</html>

package/web/levels.tsx

@@ -0,0 +1,15 @@
+// A criterion's level where the dashboard shows one (#68), with the engine's names (DEC-014 of #71): a tag whose
+// tooltip says what it means, and a one-line legend next to a list of tags.
+
+const LEVEL_TEXT: Record<string, string> = { floor: "Floor", strong: "Strong", ceiling: "Ceiling" };
+/** What each level means. */
+export const LEVEL_MEANING: Record<string, string> = { floor: "most configurations should pass", strong: "good ones pass", ceiling: "only the best pass" };
+
+export const LevelTag = ({ level }: { level: string }) => (
+  <span className={`tag ${level}`} title={`${LEVEL_TEXT[level] ?? level}: ${LEVEL_MEANING[level] ?? ""}`}>{LEVEL_TEXT[level] ?? level}</span>
+);
+
+/** One line that says what the levels mean, next to where they are shown. */
+export const LevelLegend = () => (
+  <p className="level-legend"><span className="k">Levels</span>{Object.keys(LEVEL_TEXT).map((l) => <span key={l}><LevelTag level={l} /> {LEVEL_MEANING[l]}</span>)}</p>
+);

package/web/notices.ts

@@ -0,0 +1,74 @@
+// The words of the Results page's one alert and its details (#82, DEC-023): what a view does not show, why, and
+// what to do. Display only: which trials a view leaves out comes from the view (src/core/view.ts LeftOut), and
+// the regrade is the server's. The How it works page's #left-out section says the same in full.
+
+/** A count of trials not shown and of the configs they belong to. */
+export interface Counted { trials: number; configs: number }
+
+/** One item of the details: what is not shown and why, then what to do. */
+export interface NoticeItem { what: string; todo: string }
+
+const plural = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
+/** The alert's short count, for example "3 trials and 2 configs not shown". Null when nothing is left out. */
+export function alertText(trials: number, configs: number): string | null {
+  const parts = [trials ? plural(trials, "trial") : "", configs ? plural(configs, "config") : ""].filter(Boolean);
+  return parts.length ? `${parts.join(" and ")} not shown` : null;
+}
+
+const fromConfigs = (c: Counted) => `${plural(c.trials, "trial")} from ${plural(c.configs, "config")}`;
+
+/**
+ * Trials graded only under another grading version. `current`: every task in view is on its current version, so
+ * the view offers Regrade. `ungraded`: how many trials not graded yet the same Regrade button covers.
+ */
+export function gradingItem(c: Counted, { current, ungraded }: { current: boolean; ungraded: number }): NoticeItem {
+  const them = c.trials === 1 ? "it" : "them", their = c.trials === 1 ? "its" : "their";
+  return {
+    what: `${fromConfigs(c)} ${c.trials === 1 ? "was" : "were"} graded under ${current ? "earlier" : "other"} criteria or by another judge.`,
+    todo: current
+      ? `Regrade ${them} with the button below${ungraded ? " (it also grades the trials not graded yet)" : ""}, or pick ${their} grading version in the Filter menu.`
+      : `Pick ${their} grading version in the Filter menu.`,
+  };
+}
+
+/** Trials with no finished grading. `otherGrading`: how many trials of the other item the same button covers. */
+export function ungradedItem(c: Counted, { current, otherGrading }: { current: boolean; otherGrading: number }): NoticeItem {
+  const one = c.trials === 1;
+  const wait = `If ${one ? "its" : "their"} batch is still running, wait.`;
+  return {
+    what: `${fromConfigs(c)} ${one ? "is" : "are"} not graded yet.`,
+    todo: current
+      ? `${wait} If not, regrade ${one ? "it" : "them"} with the ${otherGrading ? "same button below: one regrade covers both lists" : "button below"}.`
+      : wait,
+  };
+}
+
+/** Under the Regrade button: what it does, and no more (#80: with nothing picked, it covers the suites in view only). */
+export function regradeNote(trials: number, suitesLeftOut: boolean): string {
+  return `Judge calls only. It grades the ${plural(trials, "trial")} above again and runs no agent.${suitesLeftOut ? " Suites left out of the index are not regraded." : ""}`;
+}
+
+/** A config the chart cannot plot: the suites in view it has not completed, and its score (null: no valid score). */
+export interface NotPlotted { label: string; partial: { suite: string; have: number; of: number }[]; score: number | null }
+
+/** The configs the chart cannot plot, under one reason. */
+export interface NotPlottedGroup { why: string; configs: string[]; todo: string }
+
+/**
+ * The configs the chart cannot plot, grouped by reason: one group per suite they have not completed (in the order
+ * met), then no valid score, then no cost data (a score but no cost). A config partial in two suites is in both.
+ */
+export function notPlottedGroups(list: NotPlotted[]): NotPlottedGroup[] {
+  const suites = new Map<string, string[]>();
+  const noScore: string[] = [], noCost: string[] = [];
+  for (const c of list) {
+    if (c.partial.length) for (const p of c.partial) suites.set(p.suite, [...(suites.get(p.suite) ?? []), `${c.label} (${p.have} of ${p.of} tasks)`]);
+    else (c.score == null ? noScore : noCost).push(c.label);
+  }
+  return [
+    ...[...suites].map(([suite, configs]) => ({ why: `No score on every task of ${suite}`, configs, todo: "Run the tasks they miss." })),
+    ...(noScore.length ? [{ why: "No valid score", configs: noScore, todo: "Open their trials to see why." }] : []),
+    ...(noCost.length ? [{ why: "No cost data", configs: noCost, todo: "Check the costs in pricing.yaml." }] : []),
+  ];
+}

package/web/output-view.ts

@@ -0,0 +1,61 @@
+// How the trial drawer shows a trial's output (#68). An output is agent output and is not trusted (DEC-012 of #71):
+// it never goes into the dashboard's own page. An HTML page runs in a sandboxed frame that may run the page's own
+// scripts but has an opaque origin, so it cannot read or change the dashboard or run code on its origin. Markdown and
+// other text are rendered into a frame that runs no code at all. The API refuses changes from such a frame
+// (src/api.ts), since a sandboxed page can still send a request.
+
+export type OutputKind = "image" | "html" | "markdown" | "text";
+
+/**
+ * How to show an output: by the server's media type for an image, else by the extension of the task's output path.
+ * Text that is neither HTML nor Markdown is shown as Markdown, as before, but named "text" so its second view is "Source".
+ */
+export function outputKind(outputPath: string, contentType: string | null): OutputKind {
+  if (contentType?.startsWith("image/")) return "image";
+  const ext = /\.([^./\\]+)$/.exec(outputPath)?.[1]?.toLowerCase();
+  return ext === "html" || ext === "htm" ? "html" : ext === "md" || ext === "markdown" ? "markdown" : "text";
+}
+
+/** The name of the second view, which shows the output's text as it is. */
+export const sourceLabel = (kind: OutputKind) => (kind === "markdown" ? "Markdown" : "Source");
+
+/** The HTML frame may run the page's own scripts. No allow-same-origin, forms, popups, modals or top navigation. */
+export const HTML_SANDBOX = "allow-scripts";
+/** The Markdown and text frame runs no code. */
+export const PROSE_SANDBOX = "";
+
+/** The rendered Markdown's frame loads only its styles and the dashboard's fonts: no script, image, frame or request. */
+const PROSE_POLICY = "default-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com";
+const FONTS = "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap";
+
+/** The dashboard's tokens the prose styles use; their values are read from the dashboard's page (web/brand). */
+export const PROSE_TOKENS = [
+  "--fg", "--fg-2", "--outline", "--color-sky", "--surface", "--line", "--accent", "--outline-width", "--radius-xs", "--spacing-12", "--spacing-16", "--spacing-24",
+  "--font-text", "--font-heading", "--font-mono", "--weight-heading-card", "--leading-text", "--text-sm",
+] as const;
+
+const PROSE_CSS = `
+html, body { margin: 0; background: transparent; color: var(--fg); font-family: var(--font-text); font-size: 15px; line-height: var(--leading-text); -webkit-font-smoothing: antialiased; }
+.prose { line-height: 1.65; max-width: 680px; padding: var(--spacing-16) var(--spacing-16) var(--spacing-24); }
+.prose h1, .prose h2, .prose h3 { font-family: var(--font-heading); font-weight: var(--weight-heading-card); letter-spacing: -0.02em; line-height: 1.15; }
+.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 1px 5px; border-radius: 6px; }
+.prose pre { background: var(--surface); border: var(--outline-width) solid var(--line); padding: var(--spacing-12); border-radius: var(--radius-xs); overflow-x: auto; }
+.prose pre code { background: none; padding: 0; }
+.prose blockquote { border-left: 4px solid var(--accent); margin: 0; padding-left: var(--spacing-16); color: var(--fg-2); }
+.prose img { display: none; }
+.prose table { font-size: var(--text-sm); border-collapse: collapse; }
+.prose td, .prose th { border: 1px solid var(--line); padding: 4px 8px; }
+.img-ph { display: inline-block; background: var(--color-sky); border: var(--outline-width) dashed var(--outline); border-radius: var(--radius-xs); padding: 2px 8px; font-size: var(--text-sm); }
+`;
+
+/**
+ * The document for the Markdown and text frame: its policy first, so the output cannot loosen it, then the prose
+ * styles with the dashboard's token values, then the rendered output. A token value that could end the style
+ * element is left out.
+ */
+export function proseDoc(html: string, tokens: Record<string, string>): string {
+  const vars = Object.entries(tokens).filter(([, v]) => !/[<>{};]/.test(v)).map(([k, v]) => `${k}: ${v};`).join(" ");
+  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${PROSE_POLICY}">`
+    + `<link rel="stylesheet" href="${FONTS}"><style>:root { ${vars} }${PROSE_CSS}</style></head>`
+    + `<body><div class="prose">${html}</div></body></html>`;
+}

package/web/pages.ts

@@ -0,0 +1,42 @@
+// The dashboard's pages: client-side routes of the one page the server serves (DEC-006 of #21). The server
+// serves index.html on each path; the page picks what to show from the path. A new page is one entry here
+// and its render branch in app.tsx. The URL query belongs to the Results page (its filters), never to another.
+export const PAGES = [
+  { id: "results", path: "/", title: "Results" },
+  { id: "runs", path: "/runs", title: "Runs" },
+  { id: "compare", path: "/compare", title: "Compare" },
+  { id: "tasks", path: "/tasks", title: "Tasks" },
+  { id: "how", path: "/how-it-works", title: "How it works" },
+] as const;
+
+export type PageId = (typeof PAGES)[number]["id"];
+
+/** The page a path shows. A trailing slash is ignored; the server serves only the paths above. */
+export const pageOf = (pathname: string): PageId =>
+  PAGES.find((p) => p.path === (pathname.replace(/\/+$/, "") || "/"))?.id ?? "results";
+
+export const pathOf = (id: PageId): string => PAGES.find((p) => p.id === id)!.path;
+
+// Addresses inside a page, so another page can link to one entry (#79). An entry's element id is its fragment.
+/** The element id of a suite on the Tasks page. */
+export const suiteAnchor = (id: string) => `suite-${id}`;
+/** The element id of a task on the Tasks page. */
+export const taskAnchor = (id: string) => `task-${id}`;
+/** The address of a suite on the Tasks page: `/tasks#suite-<id>`. */
+export const suiteHref = (id: string) => `${pathOf("tasks")}#${encodeURIComponent(suiteAnchor(id))}`;
+/** The address of a task on the Tasks page: `/tasks#task-<id>`. */
+export const taskHref = (id: string) => `${pathOf("tasks")}#${encodeURIComponent(taskAnchor(id))}`;
+
+/** The sections of the How it works page, in reading order. A section's address is `/how-it-works#<id>`. */
+export const HOW_IT_WORKS_SECTIONS = [
+  { id: "trial", title: "A trial" },
+  { id: "score", title: "How a score is made" },
+  { id: "graders", title: "Checks and judges" },
+  { id: "levels", title: "Levels" },
+  { id: "left-out", title: "Why trials are left out of a chart" },
+] as const;
+
+export type HowItWorksSection = (typeof HOW_IT_WORKS_SECTIONS)[number]["id"];
+
+/** The address of a section of the How it works page, for example `/how-it-works#left-out`. */
+export const howItWorksHref = (section: HowItWorksSection) => `${pathOf("how")}#${section}`;