diff --git a/.github/workflows/bench-publish-gh-pages.yaml b/.github/workflows/bench-publish-gh-pages.yaml
deleted file mode 100644
index 730cb676..00000000
--- a/.github/workflows/bench-publish-gh-pages.yaml
+++ /dev/null
@@ -1,115 +0,0 @@
-name: Publish Bench JSON to gh-pages
-
-on:
-  workflow_run:
-    workflows: ["Benchmark Pull Requests"]
-    types: [completed]
-  workflow_dispatch: # just for now, for debug
-
-concurrency:
-  group: gh-pages-bench-publish
-  cancel-in-progress: false
-
-permissions:
-  actions: read
-  contents: write
-
-jobs:
-  publish:
-    if: ${{ github.event.workflow_run.conclusion == 'success' }} # for now, only publish if the benchmark workflow succeeded. In the future, we might want to publish even on failure to track regressions.
-    #      ${{ github.event.workflow_run.conclusion == 'success' &&
-    #      github.event.workflow_run.event == 'pull_request' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Debug list run artifacts
-        env:
-          GH_TOKEN: ${{ github.token }}
-          REPO: ${{ github.repository }}
-          RUN_ID: ${{ github.event.workflow_run.id }}
-        run: |
-          set -euo pipefail
-          echo "Listing artifacts for $REPO run_id=$RUN_ID"
-          gh api "/repos/$REPO/actions/runs/$RUN_ID/artifacts" \
-            --jq '.artifacts[] | {name, expired, size_in_bytes, updated_at}'
-
-      - name: Download benchmark artifact
-        uses: actions/download-artifact@v4
-        with:
-          github-token: ${{ github.token }}
-          repository: ${{ github.repository }}
-          run-id: ${{ github.event.workflow_run.id }}
-          name: bench-current
-          path: ./artifact
-
-      - name: Checkout gh-pages
-        uses: actions/checkout@v6
-        with:
-          ref: gh-pages
-
-      - name: Update benchmark JSON file
-        run: |
-          set -euo pipefail
-          mkdir -p dev/bench
-          node <<'NODE'
-          const fs = require('fs');
-          const path = require('path');
-
-          const incomingPath = path.join('artifact', 'bench-current.json');
-          const destPath = path.join('dev', 'bench', 'pr-benchmarks.json');
-
-          const incoming = JSON.parse(fs.readFileSync(incomingPath, 'utf8'));
-          const headSha = incoming?.head?.sha;
-          const prNumber = incoming?.pr_number;
-
-          let existingRaw = null;
-          let existingWasArray = false;
-          let items = [];
-          if (fs.existsSync(destPath)) {
-            try {
-              existingRaw = JSON.parse(fs.readFileSync(destPath, 'utf8'));
-            } catch {
-              existingRaw = null;
-            }
-          }
-
-          if (Array.isArray(existingRaw)) {
-            existingWasArray = true;
-            items = existingRaw;
-          } else if (existingRaw && typeof existingRaw === 'object') {
-            if (Array.isArray(existingRaw.items)) items = existingRaw.items;
-            else if (Array.isArray(existingRaw.entries)) items = existingRaw.entries;
-            else items = [];
-          }
-
-          const isSameEntry = (e) => e && e.head && e.head.sha === headSha && e.pr_number === prNumber;
-          const filtered = items.filter((e) => !isSameEntry(e));
-          filtered.push(incoming);
-
-          // Keep file from growing without bound: keep newest 200 entries
-          const trimmed = filtered.slice(-200);
-
-          if (existingWasArray) {
-            fs.writeFileSync(destPath, JSON.stringify(trimmed, null, 2));
-          } else {
-            const out = (existingRaw && typeof existingRaw === 'object' && !Array.isArray(existingRaw))
-              ? { ...existingRaw }
-              : { version: 1 };
-            out.last_update = new Date().toISOString();
-            out.items = trimmed;
-            fs.writeFileSync(destPath, JSON.stringify(out, null, 2));
-          }
-          console.log(`Updated ${destPath} with sha=${headSha} pr=${prNumber}`);
-          NODE
-
-      - name: Commit and push
-        run: |
-          set -euo pipefail
-          if git diff --quiet; then
-            echo "No changes to publish"
-            exit 0
-          fi
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add dev/bench/pr-benchmarks.json
-          git commit -m "bench: update PR benchmarks"
-          git push origin gh-pages
diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
deleted file mode 100644
index 1ad7aead..00000000
--- a/.github/workflows/docs.yaml
+++ /dev/null
@@ -1,56 +0,0 @@
-# Derived from: https://github.com/actions/starter-workflows/blob/main/pages/mdbook.yml
-#
-name: Deploy doc to Pages
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: main
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - name: Setup environment
-        uses: ./.github/actions/setup-env
-
-      - name: Build docs
-        run: mise run docs
-
-      - name: Setup Pages
-        id: pages
-        uses: actions/configure-pages@v5
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v4
-        with:
-          path: ./website
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
diff --git a/scripts/index.html b/scripts/index.html
new file mode 100644
index 00000000..c220773e
--- /dev/null
+++ b/scripts/index.html
@@ -0,0 +1,663 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>IXA Bench History</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        margin: 0;
+        font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
+          Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+      }
+
+      header {
+        padding: 16px 20px;
+        border-bottom: 1px solid rgba(127, 127, 127, 0.25);
+      }
+
+      header h1 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 650;
+      }
+
+      header .meta {
+        margin-top: 6px;
+        opacity: 0.85;
+        font-size: 12px;
+      }
+
+      main {
+        padding: 16px 20px 24px;
+        max-width: 1200px;
+      }
+
+      .row {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        align-items: end;
+        margin-bottom: 16px;
+      }
+
+      label {
+        display: grid;
+        gap: 6px;
+        font-size: 12px;
+        opacity: 0.9;
+      }
+
+      select,
+      button {
+        font: inherit;
+        padding: 8px 10px;
+        border-radius: 8px;
+        border: 1px solid rgba(127, 127, 127, 0.35);
+        background: transparent;
+        min-width: 260px;
+      }
+
+      button {
+        min-width: auto;
+        cursor: pointer;
+      }
+
+      .checkbox {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 10px;
+        border: 1px solid rgba(127, 127, 127, 0.35);
+        border-radius: 8px;
+        user-select: none;
+      }
+
+      .checkbox input {
+        transform: translateY(1px);
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 18px;
+      }
+
+      .card {
+        border: 1px solid rgba(127, 127, 127, 0.25);
+        border-radius: 12px;
+        padding: 12px;
+      }
+
+      .card h2 {
+        margin: 0 0 10px;
+        font-size: 13px;
+        opacity: 0.9;
+        font-weight: 650;
+      }
+
+      .canvasWrap {
+        position: relative;
+        height: 420px;
+      }
+
+      .error {
+        color: #b00020;
+        white-space: pre-wrap;
+        margin-top: 12px;
+      }
+
+      .hint {
+        margin-top: 10px;
+        opacity: 0.8;
+        font-size: 12px;
+      }
+
+      @media (min-width: 1000px) {
+        .grid {
+          grid-template-columns: 1.5fr 1fr;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <h1>IXA benchmark history</h1>
+      <div class="meta" id="meta">Loading…</div>
+    </header>
+
+    <main>
+      <div class="row">
+        <label>
+          Suite
+          <select id="suite">
+            <option value="criterion">criterion</option>
+            <option value="hyperfine">hyperfine</option>
+          </select>
+        </label>
+
+        <label>
+          Benchmark
+          <select id="benchmark"></select>
+        </label>
+
+        <label>
+          Metric
+          <select id="metric"></select>
+        </label>
+
+        <label class="checkbox" title="Show an uncertainty band when available">
+          <input id="showBand" type="checkbox" checked />
+          Show band
+        </label>
+
+        <button id="reload" type="button">Reload</button>
+      </div>
+
+      <div class="grid">
+        <section class="card">
+          <h2>Time series</h2>
+          <div class="canvasWrap"><canvas id="ts"></canvas></div>
+          <div class="hint" id="tsHint"></div>
+        </section>
+
+        <section class="card">
+          <h2>Latest vs previous (percent change)</h2>
+          <div class="canvasWrap"><canvas id="delta"></canvas></div>
+          <div class="hint" id="deltaHint"></div>
+        </section>
+      </div>
+
+      <div class="error" id="error" hidden></div>
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+    <script>
+      const HISTORY_URL =
+        "https://raw.githubusercontent.com/cdc-as81/ixa/refs/heads/gh-pages/bench-history.json";
+
+      /**
+       * Expected JSON shape (schema v1):
+       * { schema: 1, runs: [ { run_at, branch, base, head, criterion: [], hyperfine: [] } ] }
+       */
+
+      /** @type {Chart | null} */
+      let tsChart = null;
+      /** @type {Chart | null} */
+      let deltaChart = null;
+
+      const $ = (id) => document.getElementById(id);
+
+      function setError(message) {
+        const el = $("error");
+        if (!message) {
+          el.hidden = true;
+          el.textContent = "";
+          return;
+        }
+        el.hidden = false;
+        el.textContent = message;
+      }
+
+      function formatDate(iso) {
+        const d = new Date(iso);
+        if (Number.isNaN(d.getTime())) return String(iso);
+        return d.toISOString().slice(0, 19).replace("T", " ") + "Z";
+      }
+
+      function bestUnit(seconds) {
+        const s = Math.abs(seconds);
+        if (s === 0) return { scale: 1, unit: "s" };
+        if (s >= 1) return { scale: 1, unit: "s" };
+        if (s >= 1e-3) return { scale: 1e3, unit: "ms" };
+        if (s >= 1e-6) return { scale: 1e6, unit: "µs" };
+        return { scale: 1e9, unit: "ns" };
+      }
+
+      function fmtSeconds(seconds, forcedUnit) {
+        const { scale, unit } = forcedUnit ?? bestUnit(seconds);
+        const v = seconds * scale;
+        const abs = Math.abs(v);
+        const digits = abs >= 100 ? 0 : abs >= 10 ? 1 : 2;
+        return `${v.toFixed(digits)} ${unit}`;
+      }
+
+      function safeSha(sha) {
+        if (!sha) return "";
+        return String(sha).slice(0, 7);
+      }
+
+      function destroyCharts() {
+        if (tsChart) {
+          tsChart.destroy();
+          tsChart = null;
+        }
+        if (deltaChart) {
+          deltaChart.destroy();
+          deltaChart = null;
+        }
+      }
+
+      function getSuiteRuns(history, suite) {
+        const runs = Array.isArray(history?.runs) ? history.runs.slice() : [];
+        runs.sort((a, b) => new Date(a.run_at) - new Date(b.run_at));
+        return runs.map((r) => ({
+          run_at: r.run_at,
+          branch: r.branch,
+          pr_number: r.pr_number,
+          base: r.base,
+          head: r.head,
+          entries: Array.isArray(r?.[suite]) ? r[suite] : [],
+        }));
+      }
+
+      function indexByName(entries) {
+        /** @type {Map<string, any>} */
+        const map = new Map();
+        for (const e of entries) {
+          if (e && typeof e.name === "string") map.set(e.name, e);
+        }
+        return map;
+      }
+
+      function listBenchmarks(suiteRuns) {
+        const set = new Set();
+        for (const r of suiteRuns) {
+          for (const e of r.entries) {
+            if (e && typeof e.name === "string") set.add(e.name);
+          }
+        }
+        return [...set].sort((a, b) => a.localeCompare(b));
+      }
+
+      function listMetricsForSuite(suite) {
+        if (suite === "criterion") {
+          return [
+            { value: "estimate", label: "estimate" },
+            { value: "lower", label: "lower" },
+            { value: "upper", label: "upper" },
+          ];
+        }
+        return [
+          { value: "mean_sec", label: "mean" },
+          { value: "min_sec", label: "min" },
+          { value: "max_sec", label: "max" },
+          { value: "stddev_sec", label: "stddev" },
+        ];
+      }
+
+      function readValueSeconds(suite, entry, metric) {
+        if (!entry) return null;
+
+        if (suite === "criterion") {
+          const arr = entry.time_sec;
+          if (!Array.isArray(arr) || arr.length < 3) return null;
+          const lower = Number(arr[0]);
+          const est = Number(arr[1]);
+          const upper = Number(arr[2]);
+          if ([lower, est, upper].some((x) => !Number.isFinite(x))) return null;
+
+          if (metric === "lower") return lower;
+          if (metric === "upper") return upper;
+          return est;
+        }
+
+        const v = Number(entry[metric]);
+        if (!Number.isFinite(v)) return null;
+        return v;
+      }
+
+      function readBandSeconds(suite, entry) {
+        if (!entry) return null;
+        if (suite === "criterion") {
+          const arr = entry.time_sec;
+          if (!Array.isArray(arr) || arr.length < 3) return null;
+          const lower = Number(arr[0]);
+          const upper = Number(arr[2]);
+          if (!Number.isFinite(lower) || !Number.isFinite(upper)) return null;
+          return { lower, upper };
+        }
+
+        const mean = Number(entry.mean_sec);
+        const sd = Number(entry.stddev_sec);
+        if (!Number.isFinite(mean) || !Number.isFinite(sd)) return null;
+        const lower = Math.max(0, mean - sd);
+        const upper = mean + sd;
+        return { lower, upper };
+      }
+
+      function makeLabels(suiteRuns) {
+        return suiteRuns.map((r) => {
+          const sha = safeSha(r?.head?.sha);
+          const pr = r.pr_number ? `PR #${r.pr_number}` : r.branch ? r.branch : "";
+          const left = formatDate(r.run_at);
+          const right = [sha, pr].filter(Boolean).join(" · ");
+          return right ? `${left} — ${right}` : left;
+        });
+      }
+
+      function pickDefaultBenchmark(benchmarks) {
+        if (!benchmarks.length) return "";
+        // Prefer a common-looking benchmark when available
+        const preferredPrefix = ["large_sir::ixa", "large_sir::baseline", "counts/"];
+        for (const p of preferredPrefix) {
+          const found = benchmarks.find((b) => b.startsWith(p));
+          if (found) return found;
+        }
+        return benchmarks[0];
+      }
+
+      function renderTimeSeries({ suiteRuns, suite, benchmarkName, metric, showBand }) {
+        if (typeof Chart === "undefined") {
+          throw new Error(
+            "Chart.js failed to load (Chart is undefined). Check network access or CDN availability."
+          );
+        }
+
+        const labels = makeLabels(suiteRuns);
+        const allPoints = [];
+        const lowerBand = [];
+        const upperBand = [];
+
+        for (const r of suiteRuns) {
+          const byName = indexByName(r.entries);
+          const entry = byName.get(benchmarkName);
+          allPoints.push(readValueSeconds(suite, entry, metric));
+          const band = showBand ? readBandSeconds(suite, entry) : null;
+          lowerBand.push(band ? band.lower : null);
+          upperBand.push(band ? band.upper : null);
+        }
+
+        // Determine a stable unit from the median non-null point
+        const vals = allPoints.filter((x) => Number.isFinite(x));
+        const unit = vals.length
+          ? bestUnit(vals.slice().sort((a, b) => a - b)[Math.floor(vals.length / 2)])
+          : { scale: 1, unit: "s" };
+
+        const ctx = $("ts");
+        const datasets = [];
+
+        if (showBand) {
+          datasets.push({
+            label: "lower",
+            data: lowerBand.map((s) => (s == null ? null : s * unit.scale)),
+            borderColor: "rgba(0,0,0,0)",
+            pointRadius: 0,
+            borderWidth: 0,
+            tension: 0.15,
+            spanGaps: true,
+          });
+          datasets.push({
+            label: "upper",
+            data: upperBand.map((s) => (s == null ? null : s * unit.scale)),
+            borderColor: "rgba(0,0,0,0)",
+            pointRadius: 0,
+            borderWidth: 0,
+            backgroundColor: "rgba(80, 120, 255, 0.15)",
+            fill: "-1",
+            tension: 0.15,
+            spanGaps: true,
+          });
+        }
+
+        datasets.push({
+          label: `${benchmarkName} (${metric})`,
+          data: allPoints.map((s) => (s == null ? null : s * unit.scale)),
+          borderColor: "rgba(80, 120, 255, 0.95)",
+          backgroundColor: "rgba(80, 120, 255, 0.25)",
+          pointRadius: 2,
+          borderWidth: 2,
+          tension: 0.15,
+          spanGaps: true,
+        });
+
+        if (tsChart) tsChart.destroy();
+        tsChart = new Chart(ctx, {
+          type: "line",
+          data: { labels, datasets },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            interaction: { mode: "index", intersect: false },
+            plugins: {
+              legend: { display: false },
+              tooltip: {
+                callbacks: {
+                  label: (item) => {
+                    const scaled = item.parsed.y;
+                    if (scaled == null) return "(missing)";
+                    return `${item.dataset.label}: ${fmtSeconds(
+                      scaled / unit.scale,
+                      unit
+                    )}`;
+                  },
+                },
+              },
+            },
+            scales: {
+              y: {
+                title: { display: true, text: `Time (${unit.unit})` },
+                ticks: {
+                  callback: (v) => `${v} ${unit.unit}`,
+                },
+              },
+              x: {
+                ticks: {
+                  maxRotation: 0,
+                  autoSkip: true,
+                  maxTicksLimit: 6,
+                },
+              },
+            },
+          },
+        });
+
+        const lastIdx = suiteRuns.length - 1;
+        const last = lastIdx >= 0 ? suiteRuns[lastIdx] : null;
+        const hintParts = [];
+        if (suiteRuns.length) hintParts.push(`${suiteRuns.length} run(s)`);
+        if (last?.head?.sha) hintParts.push(`latest head: ${safeSha(last.head.sha)}`);
+        $("tsHint").textContent = hintParts.join(" · ");
+      }
+
+      function renderLatestDelta({ suiteRuns, suite, metric }) {
+        if (typeof Chart === "undefined") {
+          throw new Error(
+            "Chart.js failed to load (Chart is undefined). Check network access or CDN availability."
+          );
+        }
+
+        if (suiteRuns.length < 2) {
+          if (deltaChart) {
+            deltaChart.destroy();
+            deltaChart = null;
+          }
+          $("deltaHint").textContent = "Need at least 2 runs.";
+          return;
+        }
+
+        const prev = suiteRuns[suiteRuns.length - 2];
+        const next = suiteRuns[suiteRuns.length - 1];
+        const prevMap = indexByName(prev.entries);
+        const nextMap = indexByName(next.entries);
+
+        /** @type {{name: string, pct: number}[]} */
+        const changes = [];
+        for (const [name, nextEntry] of nextMap.entries()) {
+          const prevEntry = prevMap.get(name);
+          const a = readValueSeconds(suite, prevEntry, metric);
+          const b = readValueSeconds(suite, nextEntry, metric);
+          if (a == null || b == null) continue;
+          if (a === 0) continue;
+          const pct = ((b - a) / a) * 100;
+          if (!Number.isFinite(pct)) continue;
+          changes.push({ name, pct });
+        }
+
+        changes.sort((x, y) => y.pct - x.pct);
+        const MAX = 25;
+        const trimmed = changes.slice(0, MAX);
+
+        const labels = trimmed.map((c) => c.name);
+        const data = trimmed.map((c) => c.pct);
+
+        const ctx = $("delta");
+        if (deltaChart) deltaChart.destroy();
+        deltaChart = new Chart(ctx, {
+          type: "bar",
+          data: {
+            labels,
+            datasets: [
+              {
+                label: "% change (latest vs previous)",
+                data,
+                backgroundColor: data.map((v) =>
+                  v >= 0 ? "rgba(220, 70, 70, 0.65)" : "rgba(70, 180, 120, 0.65)"
+                ),
+                borderColor: data.map((v) =>
+                  v >= 0 ? "rgba(220, 70, 70, 0.95)" : "rgba(70, 180, 120, 0.95)"
+                ),
+                borderWidth: 1,
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: { display: false },
+              tooltip: {
+                callbacks: {
+                  label: (item) => `${item.parsed.y.toFixed(2)}%`,
+                },
+              },
+            },
+            scales: {
+              y: {
+                title: { display: true, text: "% change (time; lower is better)" },
+                ticks: {
+                  callback: (v) => `${v}%`,
+                },
+              },
+              x: {
+                ticks: {
+                  autoSkip: false,
+                  maxRotation: 80,
+                  minRotation: 40,
+                },
+              },
+            },
+          },
+        });
+
+        const prevSha = safeSha(prev?.head?.sha);
+        const nextSha = safeSha(next?.head?.sha);
+        $("deltaHint").textContent =
+          `Comparing ${formatDate(prev.run_at)} (${prevSha}) → ${formatDate(next.run_at)} (${nextSha}). ` +
+          `Showing top ${Math.min(MAX, changes.length)} regressions by %.`;
+      }
+
+      function populateSelect(selectEl, options, value) {
+        selectEl.innerHTML = "";
+        for (const opt of options) {
+          const o = document.createElement("option");
+          o.value = opt.value ?? opt;
+          o.textContent = opt.label ?? opt;
+          selectEl.appendChild(o);
+        }
+        if (value) selectEl.value = value;
+      }
+
+      async function fetchHistory() {
+        const res = await fetch(HISTORY_URL, {
+          cache: "no-store",
+          headers: { Accept: "application/json" },
+        });
+        if (!res.ok) {
+          throw new Error(`Fetch failed: ${res.status} ${res.statusText}`);
+        }
+        return await res.json();
+      }
+
+      function updateMeta(history) {
+        const runs = Array.isArray(history?.runs) ? history.runs : [];
+        const last = runs.length ? runs.slice().sort((a, b) => new Date(a.run_at) - new Date(b.run_at))[runs.length - 1] : null;
+        const lastTxt = last?.run_at ? formatDate(last.run_at) : "(unknown)";
+        $("meta").innerHTML =
+          `Source: <a href="${HISTORY_URL}">${HISTORY_URL}</a> · Runs: ${runs.length} · Latest: ${lastTxt}`;
+      }
+
+      async function main() {
+        setError("");
+        destroyCharts();
+        $("meta").textContent = "Loading…";
+
+        const history = await fetchHistory();
+        updateMeta(history);
+
+        const suiteEl = $("suite");
+        const benchEl = $("benchmark");
+        const metricEl = $("metric");
+        const showBandEl = $("showBand");
+
+        function rerender() {
+          const suite = suiteEl.value;
+          const suiteRuns = getSuiteRuns(history, suite);
+          const bench = benchEl.value;
+          const metric = metricEl.value;
+          const showBand = showBandEl.checked;
+
+          renderTimeSeries({ suiteRuns, suite, benchmarkName: bench, metric, showBand });
+          renderLatestDelta({ suiteRuns, suite, metric });
+        }
+
+        function onSuiteChange() {
+          const suite = suiteEl.value;
+          const suiteRuns = getSuiteRuns(history, suite);
+          const benchmarks = listBenchmarks(suiteRuns);
+          const defaultBench = pickDefaultBenchmark(benchmarks);
+
+          populateSelect(
+            benchEl,
+            benchmarks.map((b) => ({ value: b, label: b })),
+            defaultBench
+          );
+
+          const metrics = listMetricsForSuite(suite);
+          const defaultMetric = suite === "criterion" ? "estimate" : "mean_sec";
+          populateSelect(metricEl, metrics, defaultMetric);
+
+          rerender();
+        }
+
+        suiteEl.addEventListener("change", onSuiteChange);
+        benchEl.addEventListener("change", rerender);
+        metricEl.addEventListener("change", rerender);
+        showBandEl.addEventListener("change", rerender);
+
+        $("reload").addEventListener("click", async () => {
+          try {
+            await main();
+          } catch (e) {
+            setError(String(e?.stack ?? e));
+          }
+        });
+
+        onSuiteChange();
+      }
+
+      main().catch((e) => {
+        setError(
+          `Failed to load or render bench history.\n\n${String(e?.stack ?? e)}\n\n` +
+            `If this is opened from a file:// URL, your browser may block some requests depending on settings. ` +
+            `Try a different browser, or run a local server like: python3 -m http.server -d scripts 8000`
+        );
+      });
+    </script>
+  </body>
+</html>