static-fire 0.0.0-stage → 0.44.0

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,164 @@
+// 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. Judge, Grading version and Date range take one value: a pick replaces it.
+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 = "harness" | "model" | "effort" | "profile" | "judge" | "grading" | "dates";
+export const SECTION_NAMES: Record<SectionId, string> = {
+  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 };
+  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 };
+
+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;
+  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 [...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 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/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/pages.ts

@@ -0,0 +1,16 @@
+// 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" },
+] 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;

package/web/run-status.ts

@@ -0,0 +1,51 @@
+// The run status indicator in the top bar (US-005 of #21): what GET /api/batches says, in one line. It uses the
+// server's batch state (src/core/batch-state.ts) as the Runs page does, so a batch that is not ended and may have
+// stopped ("stalled") is never counted as running. Reads only the batch route (DEC-008).
+
+/**
+ * How often the dashboard reads the batch route again with no database change. A running batch of another process
+ * reads as stalled once 25 minutes pass with no trial movement, which writes nothing, so no event announces it.
+ */
+export const STATUS_REFRESH_MS = 60_000;
+
+/** The fields of a GET /api/batches row that the indicator reads. */
+export interface StatusBatch {
+  batch: { endedAt: string | null };
+  counts: Record<"queued" | "running" | "done" | "failed" | "invalid", number>;
+  total: number;
+  state: "running" | "stalled" | "ended";
+}
+
+export type RunStatus =
+  | { kind: "none" }
+  /** Nothing running. lastEndedAt is null when no batch has ended. */
+  | { kind: "idle"; lastEndedAt: string | null; stalled: number }
+  /** runs: running batches. ended / total: their trials that ended (done, failed or invalid) of those asked for. */
+  | { kind: "running"; runs: number; ended: number; total: number; stalled: number }
+  /** The batch route failed; error is its message. */
+  | { kind: "unavailable"; error: string };
+
+export function runStatus(rows: StatusBatch[]): RunStatus {
+  if (!rows.length) return { kind: "none" };
+  const stalled = rows.filter((r) => r.state === "stalled").length;
+  const running = rows.filter((r) => r.state === "running");
+  if (running.length) {
+    let ended = 0, total = 0;
+    for (const r of running) { ended += r.counts.done + r.counts.failed + r.counts.invalid; total += r.total; }
+    return { kind: "running", runs: running.length, ended, total, stalled };
+  }
+  let lastEndedAt: string | null = null;
+  for (const r of rows) if (r.state === "ended" && r.batch.endedAt && (!lastEndedAt || r.batch.endedAt > lastEndedAt)) lastEndedAt = r.batch.endedAt;
+  return { kind: "idle", lastEndedAt, stalled };
+}
+
+const runs = (n: number) => `${n} run${n === 1 ? "" : "s"}`;
+
+/** The indicator's words. The progress figure of a running state ("2 of 6") is drawn apart, next to its bar. */
+export function statusText(s: RunStatus, at: (iso: string) => string): string {
+  if (s.kind === "none") return "No runs yet";
+  if (s.kind === "unavailable") return `Run status unavailable: ${s.error}`;
+  if (s.kind === "running") return `${runs(s.runs)} in progress${s.stalled ? ` · ${runs(s.stalled)} may have stopped` : ""}`;
+  return ["No runs in progress", s.lastEndedAt ? `last ended ${at(s.lastEndedAt)}` : "", s.stalled ? `${runs(s.stalled)} not ended, may have stopped` : ""]
+    .filter(Boolean).join(" · ");
+}