sync from abhijitramesh/webgpu-bench@9730846cc0

README.md

@@ -29,4 +29,4 @@ Per-variant: prefill tokens/sec, decode tokens/sec, wall clock, optional CPU-vs-
 - **Bonsai-1.7B Q1_0** needs `Q1_0` quantization support. The base (non-Q1_0) variant loads regardless.
 
 ## Privacy
-No data is sent anywhere unless you click **Submit to leaderboard dataset**, which pushes to the dataset configured in `bench-config.js`. Models and logs stay in your browser.
+No data is sent anywhere unless you click **Submit to leaderboard dataset**, which pushes to the dataset configured in `site/js/run/config.js` (`js/run/config.js` on the Space). Models and logs stay in your browser.

bench.css

@@ -1,217 +0,0 @@
-:root {
-  color-scheme: dark;
-  --bg: #0f1115;
-  --bg-raised: #161922;
-  --fg: #e6e8ec;
-  --muted: #8892a0;
-  --border: #252a33;
-  --border-strong: #3a414d;
-  --accent: #5eead4;
-  --accent-fg: #0a0b0e;
-  --warn: #f5a524;
-  --err: #ef4444;
-  --ok: #22c55e;
-}
-
-* { box-sizing: border-box; }
-
-body {
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  background: var(--bg);
-  color: var(--fg);
-  margin: 0;
-  padding: 24px;
-  max-width: 1200px;
-  margin-inline: auto;
-  font-size: 14px;
-  line-height: 1.45;
-}
-
-h1 { font-size: 20px; margin: 0; font-weight: 600; }
-h2 { font-size: 14px; margin: 16px 0 8px; font-weight: 600; }
-.muted { color: var(--muted); font-size: 13px; }
-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-raised); padding: 1px 4px; border-radius: 3px; }
-
-header {
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-}
-.title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
-#device-line, #budget-line { font-size: 12px; }
-
-.mode-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border: 1px solid var(--border-strong);
-  border-radius: 4px;
-  font-size: 11px;
-  text-transform: uppercase;
-  color: var(--accent);
-  letter-spacing: 0.04em;
-}
-
-.filters {
-  display: flex;
-  gap: 14px;
-  align-items: center;
-  margin: 12px 0;
-  font-size: 12px;
-  color: var(--muted);
-  flex-wrap: wrap;
-}
-.filters label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
-.filter-label { font-weight: 600; }
-.filter-hint { font-size: 11px; opacity: 0.7; }
-
-details.family {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  margin-bottom: 8px;
-  padding: 8px 12px;
-  background: var(--bg-raised);
-}
-details.family > summary {
-  font-weight: 600;
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-details.family > summary::marker { display: none; }
-details.family > summary::before { content: "▸ "; color: var(--muted); font-weight: 400; }
-details.family[open] > summary::before { content: "▾ "; }
-.family-stats { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 4px; }
-.family-warnings { color: var(--warn); font-size: 11px; margin-left: auto; }
-
-.variant-row {
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) 70px auto;
-  gap: 10px;
-  align-items: center;
-  padding: 4px 4px;
-  font-size: 13px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.variant-row:hover { background: rgba(94, 234, 212, 0.04); }
-.variant-row.non-fit { opacity: 0.4; }
-.variant-row .variant-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.variant-row .size { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
-.variant-row .badges { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
-
-.cache-badge {
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 3px;
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--ok);
-  font-weight: 500;
-}
-.warn-badge {
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 3px;
-  background: rgba(245, 165, 36, 0.12);
-  color: var(--warn);
-  font-weight: 500;
-}
-
-.controls {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 20px 0;
-  flex-wrap: wrap;
-}
-
-.iterations-control {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--muted);
-  margin-right: 4px;
-}
-.iterations-control input[type="number"] {
-  width: 56px;
-  background: var(--bg-raised);
-  color: var(--fg);
-  border: 1px solid var(--border-strong);
-  border-radius: 4px;
-  padding: 4px 6px;
-  font-family: inherit;
-  font-size: 13px;
-}
-
-button {
-  background: var(--accent);
-  color: var(--accent-fg);
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-weight: 600;
-  font-size: 13px;
-  cursor: pointer;
-  font-family: inherit;
-}
-button:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
-button:hover:not(:disabled) { filter: brightness(1.08); }
-button.secondary {
-  background: transparent;
-  color: var(--fg);
-  border: 1px solid var(--border-strong);
-}
-button.danger { background: var(--err); color: white; }
-#queue-status { font-size: 12px; }
-
-#progress-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-#progress-table th, #progress-table td {
-  text-align: left;
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--border);
-}
-#progress-table th.num, #progress-table td.num { text-align: right; }
-#progress-table tr.row-queued { color: var(--muted); }
-#progress-table tr.row-running { background: rgba(94, 234, 212, 0.06); }
-#progress-table tr.row-ok { color: var(--fg); }
-#progress-table tr.row-error { color: var(--err); }
-
-#output-panel { margin-top: 24px; }
-.output-actions { margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-#output-textarea {
-  width: 100%;
-  height: 320px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  background: var(--bg-raised);
-  color: var(--fg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 10px;
-  resize: vertical;
-}
-.output-buttons { margin-top: 8px; display: flex; gap: 8px; }
-
-#log-panel {
-  margin-top: 24px;
-  border-top: 1px solid var(--border);
-  padding-top: 12px;
-}
-#log-panel summary { cursor: pointer; color: var(--muted); font-size: 12px; }
-#log-output {
-  max-height: 280px;
-  overflow-y: auto;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  color: var(--muted);
-  margin: 8px 0 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-}

bench.html

@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebGPU Benchmark — One Click</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bench.css">
-  <!-- Import map so `@huggingface/hub` resolves in the browser via esm.sh.
-       Must appear before any <script type="module">. -->
-  <script type="importmap">
-    {
-      "imports": {
-        "@huggingface/hub": "https://esm.sh/@huggingface/hub"
-      }
-    }
-  </script>
-</head>
-<body>
-  <header>
-    <div class="title-row">
-      <h1>WebGPU Benchmark <span class="muted">— One Click</span></h1>
-      <span class="mode-badge" id="mode-badge" title="Detection source">…</span>
-    </div>
-    <div id="device-line" class="muted">Detecting device…</div>
-    <div id="budget-line" class="muted"></div>
-  </header>
-
-  <section class="filters" aria-label="Variant visibility filters">
-    <span class="filter-label">Hide:</span>
-    <label><input type="checkbox" id="hide-ud"> UD</label>
-    <label><input type="checkbox" id="hide-iq"> IQ</label>
-    <label><input type="checkbox" id="hide-hifp"> BF16/F16</label>
-    <span class="filter-hint">(visual only, does not uncheck)</span>
-  </section>
-
-  <section id="models-panel" aria-label="Models">
-    <p id="models-loading" class="muted">Loading models…</p>
-  </section>
-
-  <section id="hub-section" class="output-actions" hidden aria-label="Hugging Face dataset">
-    <button id="btn-signin" class="secondary">Sign in with Hugging Face</button>
-    <button id="btn-submit" disabled>Submit to leaderboard dataset</button>
-    <span id="hf-user" class="muted"></span>
-  </section>
-
-  <section class="controls">
-    <label class="iterations-control">
-      Iterations per variant:
-      <input type="number" id="iterations-input" value="5" min="1" max="50" step="1">
-      <span class="filter-hint">min 5 to submit</span>
-    </label>
-    <button id="btn-download" disabled>Download selected</button>
-    <button id="btn-run" disabled>Run benchmarks</button>
-    <button id="btn-abort" class="danger" disabled>Abort</button>
-    <button id="btn-purge" class="secondary" hidden>Purge OPFS cache</button>
-    <span id="queue-status" class="muted"></span>
-  </section>
-
-  <section id="progress-panel" hidden aria-label="Run progress">
-    <h2>Progress</h2>
-    <table id="progress-table">
-      <thead>
-        <tr>
-          <th>Model</th>
-          <th>Variant</th>
-          <th>Status</th>
-          <th class="num">Prefill tok/s</th>
-          <th class="num">Decode tok/s</th>
-          <th class="num">Wall s</th>
-          <th>Error</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-
-  <section id="output-panel" hidden aria-label="Output">
-    <h2>Output</h2>
-    <div id="output-actions-local" class="output-actions">
-      <label>
-        <input type="checkbox" id="save-local" checked>
-        Save to <code>results/results.json</code> on this server
-      </label>
-    </div>
-    <textarea id="output-textarea" readonly spellcheck="false"></textarea>
-    <div class="output-buttons">
-      <button id="btn-copy" class="secondary">Copy</button>
-      <button id="btn-download-json" class="secondary">Download JSON</button>
-    </div>
-  </section>
-
-  <details id="log-panel">
-    <summary>Run log</summary>
-    <pre id="log-output"></pre>
-  </details>
-
-  <script type="module" src="bench-app.js"></script>
-</body>
-</html>

css/style.css

@@ -0,0 +1,1242 @@
+/* =============================================================
+   WebGPU Bench Dashboard
+   Design: Precision Dark (shadcn-inspired)
+   ============================================================= */
+
+/* === RESET === */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* === DESIGN TOKENS === */
+:root {
+  /* Light theme (default) */
+  color-scheme: light;
+
+  --background: #ffffff;
+  --surface-0: #f4f4f5;
+  --surface-1: #fafafa;
+  --surface-2: #f0f0f1;
+  --surface-3: #e4e4e7;
+
+  --border: #e4e4e7;
+  --border-hover: #d4d4d8;
+  --ring: #a1a1aa;
+
+  --foreground: #09090b;
+  --foreground-secondary: #3f3f46;
+  --foreground-muted: #71717a;
+  --foreground-subtle: #a1a1aa;
+
+  --success: #16a34a;
+  --success-bg: rgba(22, 163, 74, 0.1);
+  --error: #dc2626;
+  --error-bg: rgba(220, 38, 38, 0.1);
+  --warning: #d97706;
+  --info: #2563eb;
+
+  /* Accent colors (theme-aware) */
+  --accent-blue: #2563eb;
+  --accent-blue-bg: rgba(37, 99, 235, 0.1);
+  --accent-purple: #7c3aed;
+  --accent-purple-bg: rgba(124, 58, 237, 0.1);
+  --accent-amber: #d97706;
+  --accent-amber-bg: rgba(217, 119, 6, 0.1);
+  --accent-violet: #6d28d9;
+  --accent-violet-bg: rgba(109, 40, 217, 0.1);
+
+  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* Non-color tokens (same in both themes) */
+  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --background: #09090b;
+  --surface-0: #0f0f12;
+  --surface-1: #18181b;
+  --surface-2: #1c1c20;
+  --surface-3: #27272a;
+
+  --border: #27272a;
+  --border-hover: #3f3f46;
+  --ring: #52525b;
+
+  --foreground: #fafafa;
+  --foreground-secondary: #d4d4d8;
+  --foreground-muted: #a1a1aa;
+  --foreground-subtle: #71717a;
+
+  --success: #22c55e;
+  --success-bg: rgba(34, 197, 94, 0.12);
+  --error: #ef4444;
+  --error-bg: rgba(239, 68, 68, 0.12);
+  --warning: #eab308;
+  --info: #3b82f6;
+
+  --accent-blue: #60a5fa;
+  --accent-blue-bg: rgba(59, 130, 246, 0.12);
+  --accent-purple: #a78bfa;
+  --accent-purple-bg: rgba(139, 92, 246, 0.12);
+  --accent-amber: #fbbf24;
+  --accent-amber-bg: rgba(245, 158, 11, 0.12);
+  --accent-violet: #c084fc;
+  --accent-violet-bg: rgba(168, 85, 247, 0.12);
+
+  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* === GLOBAL === */
+html { scroll-behavior: smooth; }
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--info);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+a:hover { color: #60a5fa; }
+
+/* === SCROLLBAR === */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--ring); }
+
+/* =============================================================
+   HEADER
+   ============================================================= */
+.header {
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
+  position: relative;
+  z-index: 50;
+}
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px;
+  height: 56px;
+}
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--foreground);
+  text-decoration: none;
+}
+.header-brand:hover { color: var(--foreground); text-decoration: none; }
+.header-logo { color: var(--foreground-muted); flex-shrink: 0; }
+.header-title {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.header-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--foreground-muted);
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+.header-link:hover {
+  color: var(--foreground);
+  background: var(--surface-2);
+  text-decoration: none;
+}
+
+/* =============================================================
+   LOADING STATE
+   ============================================================= */
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+}
+.loading-content { text-align: center; }
+.loading-spinner {
+  width: 28px;
+  height: 28px;
+  margin: 0 auto 16px;
+  border: 2.5px solid var(--surface-3);
+  border-top-color: var(--foreground);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.loading-state p {
+  color: var(--foreground-muted);
+  font-size: 14px;
+}
+.loading-error {
+  color: var(--error);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.loading-hint {
+  color: var(--foreground-muted);
+  font-size: 13px;
+}
+.loading-hint code {
+  background: var(--surface-2);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+/* =============================================================
+   FILTER BAR
+   ============================================================= */
+.filter-bar {
+  background: var(--surface-0);
+  border-bottom: 1px solid var(--border);
+  padding: 16px 32px;
+  position: relative;
+  z-index: 45;
+}
+.filter-bar-inner {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.filter-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--foreground-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.filter-select {
+  appearance: none;
+  background: var(--surface-1);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--foreground);
+  padding: 0 32px 0 12px;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  height: 36px;
+  min-width: 150px;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.filter-select:hover { border-color: var(--border-hover); }
+.filter-select:focus {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
+}
+.filter-select option {
+  background: var(--surface-1);
+  color: var(--foreground);
+}
+
+[data-theme="dark"] .filter-select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* Theme toggle button */
+.theme-toggle-btn { padding: 6px 10px; }
+.icon-sun { display: none; }
+.icon-moon { display: block; }
+[data-theme="dark"] .icon-sun { display: block; }
+[data-theme="dark"] .icon-moon { display: none; }
+
+.filter-actions { display: flex; align-items: flex-end; }
+.filter-reset-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--foreground-muted);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+.filter-reset-btn:hover {
+  background: var(--surface-2);
+  color: var(--foreground);
+  border-color: var(--border-hover);
+}
+
+/* =============================================================
+   QUANT MULTI-SELECT DROPDOWN
+   ============================================================= */
+.quant-dropdown { position: relative; }
+.quant-dropdown-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 36px;
+  min-width: 150px;
+  padding: 0 12px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.quant-dropdown-btn:hover { border-color: var(--border-hover); }
+.quant-dropdown-btn:focus {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
+}
+.quant-dropdown-btn svg {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.quant-dropdown-list {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 100;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-dropdown);
+  max-height: 320px;
+  overflow-y: auto;
+  min-width: 180px;
+  padding: 4px;
+  animation: dropdownIn 0.15s ease-out;
+}
+@keyframes dropdownIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.quant-dropdown.open .quant-dropdown-list { display: block; }
+
+.quant-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+  color: var(--foreground-secondary);
+}
+.quant-option:hover { background: var(--surface-2); }
+.quant-option.select-all {
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+  padding-bottom: 8px;
+  border-radius: 0;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+/* Custom checkbox */
+.quant-option input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--ring);
+  border-radius: 4px;
+  background: var(--surface-0);
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+  transition: all var(--transition-fast);
+}
+.quant-option input[type="checkbox"]:checked {
+  background: var(--foreground);
+  border-color: var(--foreground);
+}
+.quant-option input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 4.5px;
+  width: 4.5px;
+  height: 8px;
+  border: solid var(--background);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.quant-option input[type="checkbox"]:indeterminate {
+  background: var(--foreground);
+  border-color: var(--foreground);
+}
+.quant-option input[type="checkbox"]:indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 5.5px;
+  left: 3px;
+  width: 8px;
+  height: 2px;
+  background: var(--background);
+  border-radius: 1px;
+}
+
+/* =============================================================
+   SECTION NAVIGATION (Sticky Tabs)
+   ============================================================= */
+.section-nav {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+}
+.section-nav-track {
+  display: flex;
+  padding: 0 32px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+.section-nav-track::-webkit-scrollbar { display: none; }
+
+.section-nav-item {
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--foreground-muted);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--transition-fast), border-color var(--transition-fast);
+}
+.section-nav-item:hover { color: var(--foreground); }
+.section-nav-item.active {
+  color: var(--foreground);
+  border-bottom-color: var(--foreground);
+}
+
+/* =============================================================
+   SECTIONS & LAYOUT
+   ============================================================= */
+.container { padding: 0 32px; }
+
+.dash-section { padding: 32px 0; }
+.dash-section + .dash-section { border-top: 1px solid var(--border); }
+
+.section-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.section-header h2 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+}
+.results-count {
+  font-size: 13px;
+  color: var(--foreground-muted);
+  font-weight: 500;
+  font-family: var(--font-mono);
+}
+
+/* =============================================================
+   SUMMARY / STAT CARDS
+   ============================================================= */
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.stat-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px 24px;
+  transition: border-color var(--transition-base);
+}
+.stat-card:hover { border-color: var(--border-hover); }
+
+.stat-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+}
+.stat-card-icon--machines { background: var(--accent-blue-bg); color: var(--accent-blue); }
+.stat-card-icon--benchmarks { background: var(--accent-violet-bg); color: var(--accent-violet); }
+.stat-card-icon--pass { background: var(--success-bg); color: var(--success); }
+
+.stat-card-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--foreground-muted);
+  margin-bottom: 2px;
+}
+.stat-card-value {
+  display: block;
+  font-size: 28px;
+  font-weight: 800;
+  font-family: var(--font-mono);
+  color: var(--foreground);
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+/* =============================================================
+   TABLES (Results + Error)
+   ============================================================= */
+.table-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.results-wrapper {
+  overflow: auto;
+  max-height: 600px;
+}
+
+.results-table,
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 13px;
+}
+
+/* Table headers */
+.results-table thead th,
+.data-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--surface-1);
+  text-align: left;
+  padding: 10px 12px;
+  color: var(--foreground-muted);
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border);
+  user-select: none;
+}
+
+/* Sortable headers (results table only) */
+.results-table thead th {
+  cursor: pointer;
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+.results-table thead th:hover {
+  color: var(--foreground);
+  background: var(--surface-2);
+}
+.results-table thead th.sorted {
+  color: var(--foreground);
+}
+
+/* Table cells */
+.results-table td,
+.data-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  color: var(--foreground-secondary);
+}
+.results-table tbody tr {
+  transition: background var(--transition-fast);
+}
+.results-table tbody tr:hover,
+.data-table tbody tr:hover {
+  background: var(--surface-2);
+}
+.results-table tbody tr:last-child td,
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Row status indicator */
+.row-pass td:first-child { box-shadow: inset 3px 0 0 var(--success); }
+.row-fail td:first-child { box-shadow: inset 3px 0 0 var(--error); }
+
+/* =============================================================
+   BADGES
+   ============================================================= */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+.badge--pass { background: var(--success-bg); color: var(--success); }
+.badge--fail { background: var(--error-bg); color: var(--error); }
+.badge--yes { background: var(--accent-blue-bg); color: var(--accent-blue); }
+.badge--no { background: var(--surface-3); color: var(--foreground-subtle); }
+.badge--webgpu { background: var(--accent-purple-bg); color: var(--accent-purple); }
+.badge--cpu { background: var(--accent-amber-bg); color: var(--accent-amber); }
+
+/* =============================================================
+   ERROR CELLS & CATEGORIES
+   ============================================================= */
+.error-cell {
+  color: var(--error);
+  font-size: 12px;
+}
+.error-cat {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--error-bg);
+  color: var(--error);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+/* =============================================================
+   CHARTS
+   ============================================================= */
+.charts-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.chart-box {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  position: relative;
+  height: 340px;
+  transition: border-color var(--transition-base);
+}
+.chart-box:hover { border-color: var(--border-hover); }
+
+.subsection-title { font-size: 16px; font-weight: 600; color: var(--foreground); margin: 0; }
+.metric-selector { display: flex; align-items: center; gap: 8px; }
+.metric-selector-label { font-size: 13px; color: var(--foreground-subtle); }
+.col-sublabel { font-size: 10px; font-weight: 400; color: var(--foreground-subtle); }
+.th-group { text-align: center; font-weight: 700; color: var(--foreground); background: var(--surface-2); }
+.th-sub { font-size: 11px; font-weight: 500; color: var(--foreground-subtle); white-space: nowrap; }
+.th-group-border { border-right: 1px solid var(--border-hover); }
+.results-table td:has(+ .th-group-border) { border-right: 1px solid var(--border-hover); }
+
+.chart-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--foreground-subtle);
+  font-size: 13px;
+}
+
+/* =============================================================
+   MACHINE CARDS
+   ============================================================= */
+.machine-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+.machine-card {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px 24px;
+  transition: border-color var(--transition-base);
+}
+.machine-card:hover { border-color: var(--border-hover); }
+
+.machine-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.machine-card-header h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--foreground);
+  line-height: 1.3;
+}
+.machine-card-icon { color: var(--foreground-muted); flex-shrink: 0; }
+
+.machine-card-specs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.spec-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+}
+.spec-label { color: var(--foreground-muted); }
+.spec-value { color: var(--foreground-secondary); font-weight: 500; font-family: var(--font-mono); font-size: 12px; }
+
+/* =============================================================
+   EMPTY STATES
+   ============================================================= */
+.empty-state {
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--foreground-subtle);
+  font-size: 14px;
+}
+
+/* =============================================================
+   UTILITY CLASSES
+   ============================================================= */
+.mono { font-family: var(--font-mono); font-size: 12px; }
+.text-success { color: var(--success); }
+.text-error { color: var(--error); }
+.text-muted { color: var(--foreground-subtle); }
+
+/* =============================================================
+   ENTRANCE ANIMATIONS
+   ============================================================= */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+#dashboard.animate-in .filter-bar { animation: fadeInUp 0.35s ease-out both; }
+#dashboard.animate-in .section-nav { animation: fadeInUp 0.35s ease-out 0.04s both; }
+#dashboard.animate-in .dash-section:nth-of-type(1) { animation: fadeInUp 0.4s ease-out 0.08s both; }
+#dashboard.animate-in .dash-section:nth-of-type(2) { animation: fadeInUp 0.4s ease-out 0.14s both; }
+#dashboard.animate-in .dash-section:nth-of-type(3) { animation: fadeInUp 0.4s ease-out 0.20s both; }
+#dashboard.animate-in .dash-section:nth-of-type(4) { animation: fadeInUp 0.4s ease-out 0.26s both; }
+#dashboard.animate-in .dash-section:nth-of-type(5) { animation: fadeInUp 0.4s ease-out 0.32s both; }
+
+/* =============================================================
+   RESPONSIVE
+   ============================================================= */
+@media (max-width: 1024px) {
+  .charts-grid { grid-template-columns: 1fr; }
+  .summary-grid { grid-template-columns: 1fr 1fr; }
+}
+
+@media (max-width: 768px) {
+  .header-inner { padding: 0 16px; height: 48px; }
+  .header-title { font-size: 14px; }
+
+  .filter-bar { padding: 16px; }
+  .filter-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; }
+  .filter-select { width: 100%; min-width: auto; }
+  .quant-dropdown-btn { width: 100%; }
+  .filter-actions { justify-content: flex-start; }
+
+  .section-nav-track { padding: 0 16px; }
+
+  .container { padding: 0 16px; }
+  .section-header { margin-bottom: 16px; }
+  .table-card { border-radius: var(--radius-md); }
+  .results-wrapper { max-height: 450px; }
+
+  .summary-grid { grid-template-columns: 1fr; gap: 12px; }
+  .stat-card { padding: 16px 20px; }
+  .stat-card-value { font-size: 24px; }
+
+  .charts-grid { gap: 12px; }
+  .chart-box { height: 280px; padding: 16px; }
+
+  .machine-grid { grid-template-columns: 1fr; }
+
+  .dash-section { padding: 24px 0; }
+}
+
+@media (max-width: 480px) {
+  .stat-card { flex-direction: column; gap: 10px; }
+  .stat-card-icon { width: 32px; height: 32px; }
+  .stat-card-icon svg { width: 16px; height: 16px; }
+}
+
+/* =============================================================
+   METHODOLOGY PAGE
+   ============================================================= */
+.methodology-content {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 40px 32px 80px;
+}
+.methodology-content .back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 32px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--foreground-muted);
+  transition: color var(--transition-fast);
+}
+.methodology-content .back-link:hover { color: var(--foreground); text-decoration: none; }
+
+.methodology-content h2 {
+  margin-top: 48px;
+  margin-bottom: 16px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+}
+.methodology-content h2:first-of-type { margin-top: 0; }
+
+.methodology-content h3 {
+  margin-top: 28px;
+  margin-bottom: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--foreground-muted);
+}
+.methodology-content p,
+.methodology-content li {
+  line-height: 1.8;
+  margin-bottom: 8px;
+  color: var(--foreground-secondary);
+  font-size: 14px;
+}
+.methodology-content ol,
+.methodology-content ul {
+  padding-left: 24px;
+}
+.methodology-content strong {
+  color: var(--foreground);
+  font-weight: 600;
+}
+.methodology-content code {
+  background: var(--surface-2);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--foreground-secondary);
+}
+.methodology-content table {
+  width: 100%;
+  margin: 16px 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.methodology-content th {
+  text-align: left;
+  padding: 10px 16px;
+  background: var(--surface-1);
+  color: var(--foreground-muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border);
+}
+.methodology-content td {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--foreground-secondary);
+}
+.methodology-content tbody tr:last-child td { border-bottom: none; }
+.methodology-content tbody tr:hover { background: var(--surface-2); }
+
+/* =============================================================
+   RUN TAB (one-click benchmark)
+   ============================================================= */
+/* Global [hidden] override — the attribute's UA default (display:none) loses
+   to any component rule that sets display explicitly (e.g. .btn → inline-flex,
+   .run-pages-banner → flex). Restore the invariant with one rule. */
+[hidden] { display: none !important; }
+
+.card {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 16px 20px;
+}
+
+/* Shared button primitives. Stay consistent with .filter-reset-btn height. */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
+  white-space: nowrap;
+}
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary {
+  background: var(--foreground);
+  color: var(--background);
+}
+.btn-primary:hover:not(:disabled) { background: var(--foreground-secondary); }
+
+.btn-secondary {
+  background: transparent;
+  color: var(--foreground-secondary);
+  border-color: var(--border);
+}
+.btn-secondary:hover:not(:disabled) {
+  background: var(--surface-2);
+  color: var(--foreground);
+  border-color: var(--border-hover);
+}
+
+.btn-danger {
+  background: var(--error-bg);
+  color: var(--error);
+  border-color: var(--error);
+}
+.btn-danger:hover:not(:disabled) { background: var(--error); color: var(--background); }
+
+/* Run-mode badge colored by surface. */
+.run-mode-badge {
+  text-transform: lowercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+}
+.run-mode-localhost { background: var(--accent-blue-bg); color: var(--accent-blue); }
+.run-mode-space { background: var(--accent-purple-bg); color: var(--accent-purple); }
+.run-mode-pages { background: var(--surface-3); color: var(--foreground-subtle); }
+.run-mode-file { background: var(--accent-amber-bg); color: var(--accent-amber); }
+
+/* Pages-mode read-only banner. */
+.run-pages-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 12px 16px;
+  background: var(--accent-blue-bg);
+  color: var(--foreground-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+}
+.run-pages-banner a { font-weight: 600; }
+
+/* HF hub sign-in/submit row (space surface only). */
+.hub-row { margin-bottom: 20px; }
+.hub-row-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.hub-row-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--foreground-muted);
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+.hub-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* Device / budget stat cards (reuses .summary-grid + .stat-card shells). */
+.run-device-grid {
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  margin-bottom: 24px;
+}
+.run-device-card { flex-direction: column; align-items: stretch; gap: 10px; }
+.run-device-card .stat-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
+.run-device-rows { display: flex; flex-direction: column; gap: 4px; }
+.run-device-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+.run-device-row-label { color: var(--foreground-muted); }
+.run-device-row-value { color: var(--foreground); font-weight: 600; }
+.run-device-note { font-size: 11px; color: var(--foreground-subtle); margin-top: 2px; }
+
+/* Hide filters + iterations + action buttons — stacks with .filter-bar tokens. */
+.run-filters { align-items: center; }
+.run-filters-checks {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.run-hide-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--foreground-secondary);
+  cursor: pointer;
+}
+.run-hide-label input[type="checkbox"] { accent-color: var(--foreground); }
+.run-iter-input {
+  width: 72px;
+  min-width: 0;
+  padding: 0 10px;
+  background: var(--surface-1);
+  background-image: none;
+}
+.run-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+#queue-status { font-size: 12px; color: var(--foreground-muted); font-family: var(--font-mono); }
+
+/* Family cards + variant rows. */
+.run-models-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.run-family { padding: 0; overflow: hidden; }
+.run-family > summary {
+  list-style: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--surface-1);
+  border-bottom: 1px solid transparent;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+.run-family[open] > summary {
+  border-bottom-color: var(--border);
+  background: var(--surface-2);
+}
+.run-family > summary::-webkit-details-marker { display: none; }
+.run-family-chevron {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-right: 1.5px solid var(--foreground-muted);
+  border-bottom: 1.5px solid var(--foreground-muted);
+  transform: rotate(-45deg);
+  transition: transform var(--transition-fast);
+  flex-shrink: 0;
+}
+.run-family[open] > summary .run-family-chevron { transform: rotate(45deg); }
+.run-family-select-all { margin: 0; accent-color: var(--foreground); cursor: pointer; }
+.run-family-name { font-size: 14px; font-weight: 700; color: var(--foreground); }
+.run-family-stats {
+  color: var(--foreground-muted);
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+.run-family-warning {
+  margin-left: auto;
+  color: var(--accent-amber);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.run-variant-list {
+  display: flex;
+  flex-direction: column;
+}
+.run-variant-row {
+  display: grid;
+  grid-template-columns: 20px minmax(60px, max-content) minmax(0, 1fr) 80px auto;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+  transition: background var(--transition-fast);
+}
+.run-variant-row:last-child { border-bottom: none; }
+.run-variant-row:hover { background: var(--surface-2); }
+.run-variant-row.is-non-fit { opacity: 0.45; }
+.run-variant-select { margin: 0; accent-color: var(--foreground); cursor: pointer; }
+.run-variant-quant {
+  font-weight: 700;
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.run-variant-file {
+  background: transparent;
+  padding: 0;
+  font-size: 12px;
+  color: var(--foreground-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.run-variant-size {
+  color: var(--foreground-muted);
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-align: right;
+}
+.run-variant-badges {
+  display: inline-flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.badge--cached { background: var(--success-bg); color: var(--success); }
+.badge--warn { background: var(--accent-amber-bg); color: var(--accent-amber); }
+
+/* Progress table — piggybacks on .results-table styling. */
+.run-progress-table { font-variant-numeric: tabular-nums; }
+.run-progress-table th.num,
+.run-progress-table td.num { text-align: right; }
+.run-row-queued { color: var(--foreground-subtle); }
+.run-row-running td { background: var(--accent-blue-bg); }
+.run-row-ok { color: var(--foreground-secondary); }
+.run-row-error td { color: var(--error); }
+.run-row-error td.err { font-family: var(--font-mono); font-size: 12px; }
+
+/* Output block. */
+.run-output { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
+.run-output-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--foreground-secondary);
+  cursor: pointer;
+}
+.run-output-toggle input[type="checkbox"] { accent-color: var(--foreground); }
+.run-output-textarea {
+  width: 100%;
+  min-height: 320px;
+  padding: 12px;
+  background: var(--surface-0);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  resize: vertical;
+}
+.run-output-textarea:focus {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
+}
+.run-output-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* Log panel — collapsible details inside a .card. */
+.run-log { padding: 0; }
+.run-log > summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 12px 16px;
+  color: var(--foreground-muted);
+  font-size: 13px;
+  font-weight: 500;
+  transition: color var(--transition-fast);
+}
+.run-log > summary::-webkit-details-marker { display: none; }
+.run-log > summary:hover { color: var(--foreground); }
+.run-log[open] > summary { border-bottom: 1px solid var(--border); }
+.run-log-pre {
+  max-height: 300px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 12px 16px;
+  background: var(--surface-0);
+  color: var(--foreground-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+@media (max-width: 768px) {
+  .run-actions { margin-left: 0; width: 100%; }
+  .run-variant-row {
+    grid-template-columns: 20px minmax(50px, max-content) minmax(0, 1fr);
+    row-gap: 4px;
+  }
+  .run-variant-size { grid-column: 2; text-align: left; }
+  .run-variant-badges { grid-column: 3; justify-content: flex-start; }
+  .hub-row-inner { flex-direction: column; align-items: stretch; }
+  .hub-row-actions { justify-content: flex-start; }
+}

harness.js

@@ -1,9 +1,9 @@
 // Thin adapter: reads URL params, calls runBenchmarkCore(), writes to
 // window.__BENCH so runner.js (Playwright) can poll. Inference logic lives
-// in bench-core.js, shared with the interactive bench-app.js page.
+// in site/js/run/core.js, shared with the interactive Run-tab controller.
 
-import { runBenchmarkCore } from './bench-core.js';
-import { localSource } from './bench-source.js';
+import { runBenchmarkCore } from './js/run/core.js';
+import { localSource } from './js/run/source.js';
 
 // Global error handlers — catch Emscripten abort() which may not throw.
 window.addEventListener('error', (e) => {

index.html

@@ -1,99 +1,202 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
-  <meta charset="utf-8">
-  <title>WebGPU Benchmark — One Click</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bench.css">
-  <!-- Import map so `@huggingface/hub` resolves in the browser via esm.sh.
-       Must appear before any <script type="module">. -->
-  <script type="importmap">
-    {
-      "imports": {
-        "@huggingface/hub": "https://esm.sh/@huggingface/hub"
-      }
-    }
-  </script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
+  <script>(function(){var t=localStorage.getItem('theme')||'light';document.documentElement.setAttribute('data-theme',t);})();</script>
+  <title>WebGPU Bench</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 </head>
 <body>
-  <header>
-    <div class="title-row">
-      <h1>WebGPU Benchmark <span class="muted">— One Click</span></h1>
-      <span class="mode-badge" id="mode-badge" title="Detection source">…</span>
+  <header class="header">
+    <div class="header-inner">
+      <a href="/" class="header-brand">
+        <svg class="header-logo" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
+        <span class="header-title">WebGPU Bench</span>
+      </a>
+      <nav class="header-nav">
+        <a href="run/" class="header-link">Run</a>
+        <a href="methodology.html" class="header-link">Methodology</a>
+        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme">
+          <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        </button>
+        <a href="https://github.com/abhijitramesh/webgpu-bench" target="_blank" rel="noopener" class="header-link">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6.02 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.82.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>
+          GitHub
+        </a>
+      </nav>
     </div>
-    <div id="device-line" class="muted">Detecting device…</div>
-    <div id="budget-line" class="muted"></div>
   </header>
 
-  <section class="filters" aria-label="Variant visibility filters">
-    <span class="filter-label">Hide:</span>
-    <label><input type="checkbox" id="hide-ud"> UD</label>
-    <label><input type="checkbox" id="hide-iq"> IQ</label>
-    <label><input type="checkbox" id="hide-hifp"> BF16/F16</label>
-    <span class="filter-hint">(visual only, does not uncheck)</span>
-  </section>
+  <main>
+    <div id="loading" class="loading-state">
+      <div class="loading-content">
+        <div class="loading-spinner"></div>
+        <p>Loading benchmark data...</p>
+      </div>
+    </div>
 
-  <section id="models-panel" aria-label="Models">
-    <p id="models-loading" class="muted">Loading models…</p>
-  </section>
+    <div id="dashboard" style="display: none;">
+      <!-- Filter Bar -->
+      <div class="filter-bar">
+        <div class="filter-bar-inner">
+          <div class="filter-group">
+            <label class="filter-label" for="filter-machine">Machine</label>
+            <select id="filter-machine" class="filter-select"></select>
+          </div>
+          <div class="filter-group">
+            <label class="filter-label" for="filter-browser">Browser</label>
+            <select id="filter-browser" class="filter-select"></select>
+          </div>
+          <div class="filter-group">
+            <label class="filter-label" for="filter-model">Model</label>
+            <select id="filter-model" class="filter-select"></select>
+          </div>
+          <div class="filter-group">
+            <label class="filter-label" for="filter-backend">Backend</label>
+            <select id="filter-backend" class="filter-select"></select>
+          </div>
+          <div class="filter-group">
+            <label class="filter-label" for="filter-status">Status</label>
+            <select id="filter-status" class="filter-select"></select>
+          </div>
+          <div class="filter-group">
+            <label class="filter-label">Quantization</label>
+            <div class="quant-dropdown" id="quant-dropdown">
+              <button class="quant-dropdown-btn" id="quant-dropdown-btn" type="button">
+                <span id="quant-dropdown-text">All Quants</span>
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </button>
+              <div class="quant-dropdown-list" id="quant-options"></div>
+            </div>
+          </div>
+          <div class="filter-actions">
+            <button class="filter-reset-btn" id="filter-reset" type="button" style="display: none;" title="Reset all filters">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
 
-  <section id="hub-section" class="output-actions" hidden aria-label="Hugging Face dataset">
-    <button id="btn-signin" class="secondary">Sign in with Hugging Face</button>
-    <button id="btn-submit" disabled>Submit to leaderboard dataset</button>
-    <span id="hf-user" class="muted"></span>
-  </section>
+      <!-- Section Navigation -->
+      <nav class="section-nav" id="section-nav">
+        <div class="section-nav-track">
+          <button class="section-nav-item active" data-section="overview">Overview</button>
+          <button class="section-nav-item" data-section="results-section">Results</button>
+          <button class="section-nav-item" data-section="performance-section">Performance</button>
+          <button class="section-nav-item" data-section="errors-section">Errors</button>
+          <button class="section-nav-item" data-section="machines-section">Machines</button>
+        </div>
+      </nav>
 
-  <section class="controls">
-    <label class="iterations-control">
-      Iterations per variant:
-      <input type="number" id="iterations-input" value="5" min="1" max="50" step="1">
-      <span class="filter-hint">min 5 to submit</span>
-    </label>
-    <button id="btn-download" disabled>Download selected</button>
-    <button id="btn-run" disabled>Run benchmarks</button>
-    <button id="btn-abort" class="danger" disabled>Abort</button>
-    <button id="btn-purge" class="secondary" hidden>Purge OPFS cache</button>
-    <span id="queue-status" class="muted"></span>
-  </section>
+      <!-- Overview -->
+      <section id="overview" class="dash-section">
+        <div class="container">
+          <div class="summary-grid">
+            <div class="stat-card">
+              <div class="stat-card-icon stat-card-icon--machines">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
+              </div>
+              <div class="stat-card-content">
+                <span class="stat-card-label">Machines Tested</span>
+                <span class="stat-card-value" id="stat-machines">0</span>
+              </div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-card-icon stat-card-icon--benchmarks">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+              </div>
+              <div class="stat-card-content">
+                <span class="stat-card-label">Benchmarks</span>
+                <span class="stat-card-value" id="stat-benchmarks">0</span>
+              </div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-card-icon stat-card-icon--pass">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+              </div>
+              <div class="stat-card-content">
+                <span class="stat-card-label">Pass Rate</span>
+                <span class="stat-card-value" id="stat-pass-rate">0%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-  <section id="progress-panel" hidden aria-label="Run progress">
-    <h2>Progress</h2>
-    <table id="progress-table">
-      <thead>
-        <tr>
-          <th>Model</th>
-          <th>Variant</th>
-          <th>Status</th>
-          <th class="num">Prefill tok/s</th>
-          <th class="num">Decode tok/s</th>
-          <th class="num">Wall s</th>
-          <th>Error</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
+      <!-- Results -->
+      <section id="results-section" class="dash-section">
+        <div class="container">
+          <div class="section-header">
+            <h2>Results</h2>
+            <span class="results-count" id="results-count"></span>
+          </div>
+          <div class="table-card">
+            <div class="results-wrapper" id="results-table"></div>
+          </div>
+        </div>
+      </section>
 
-  <section id="output-panel" hidden aria-label="Output">
-    <h2>Output</h2>
-    <div id="output-actions-local" class="output-actions">
-      <label>
-        <input type="checkbox" id="save-local" checked>
-        Save to <code>results/results.json</code> on this server
-      </label>
-    </div>
-    <textarea id="output-textarea" readonly spellcheck="false"></textarea>
-    <div class="output-buttons">
-      <button id="btn-copy" class="secondary">Copy</button>
-      <button id="btn-download-json" class="secondary">Download JSON</button>
-    </div>
-  </section>
+      <!-- Performance Charts -->
+      <section id="performance-section" class="dash-section">
+        <div class="container">
+          <div class="section-header">
+            <h2>Performance</h2>
+          </div>
+          <div class="charts-grid">
+            <div class="chart-box"><canvas id="chart-decode"></canvas></div>
+            <div class="chart-box"><canvas id="chart-prefill"></canvas></div>
+            <div class="chart-box"><canvas id="chart-size"></canvas></div>
+            <div class="chart-box" id="machine-chart-section"><canvas id="chart-machine"></canvas></div>
+          </div>
 
-  <details id="log-panel">
-    <summary>Run log</summary>
-    <pre id="log-output"></pre>
-  </details>
+          <div class="section-header" style="margin-top: 32px;">
+            <h3 class="subsection-title">CPU vs WebGPU</h3>
+            <div class="metric-selector">
+              <span class="metric-selector-label">Metric</span>
+              <select id="cpu-gpu-metric" class="filter-select">
+                <option value="decode_tok_s">Decode tok/s</option>
+                <option value="prefill_tok_s">Prefill tok/s</option>
+              </select>
+            </div>
+          </div>
+          <div class="charts-grid">
+            <div class="chart-box"><canvas id="chart-cpu-gpu"></canvas></div>
+            <div class="chart-box"><canvas id="chart-speedup"></canvas></div>
+          </div>
+          <div id="cpu-gpu-table" style="margin-top: 16px;"></div>
+        </div>
+      </section>
+
+      <!-- Error Analysis -->
+      <section id="errors-section" class="dash-section">
+        <div class="container">
+          <div class="section-header">
+            <h2>Error Analysis</h2>
+          </div>
+          <div id="error-table"></div>
+        </div>
+      </section>
+
+      <!-- Machines -->
+      <section id="machines-section" class="dash-section">
+        <div class="container">
+          <div class="section-header">
+            <h2>Machines</h2>
+          </div>
+          <div id="machine-info"></div>
+        </div>
+      </section>
+    </div>
+  </main>
 
-  <script type="module" src="bench-app.js"></script>
+  <script type="module" src="js/app.js"></script>
 </body>
 </html>

js/app.js

@@ -0,0 +1,159 @@
+import { loadData, filterResults } from './data.js';
+import { initFilters, populateQuantOptions, getFilters, resetFilters } from './filters.js';
+import { renderDecodeChart, renderPrefillChart, renderSizeChart, renderMachineChart, renderCpuGpuChart, renderSpeedupChart } from './charts.js';
+import { renderResultsTable, renderErrorTable, renderMachineInfo, renderCpuGpuTable } from './tables.js';
+
+let appData = null;
+
+async function init() {
+  try {
+    appData = await loadData();
+  } catch (e) {
+    document.getElementById('loading').innerHTML = `
+      <div class="loading-content">
+        <p class="loading-error">Failed to load data</p>
+        <p class="loading-hint">Run: <code>node scripts/build-site.js</code></p>
+      </div>
+    `;
+    return;
+  }
+
+  // Hide loading, show dashboard with entrance animation
+  const loading = document.getElementById('loading');
+  const dashboard = document.getElementById('dashboard');
+  loading.style.display = 'none';
+  dashboard.style.display = '';
+  requestAnimationFrame(() => dashboard.classList.add('animate-in'));
+
+  // Populate quant options from actual data
+  populateQuantOptions(appData.results);
+
+  // Init filter dropdowns
+  initFilters(appData.meta, () => render());
+
+  // Wire theme toggle
+  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+    const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+    if (appData) render();
+  });
+
+  // Wire reset button
+  const resetBtn = document.getElementById('filter-reset');
+  if (resetBtn) {
+    resetBtn.addEventListener('click', () => {
+      resetFilters();
+      render();
+    });
+  }
+
+  // Wire metric selector for CPU vs GPU section
+  const metricSelect = document.getElementById('cpu-gpu-metric');
+  if (metricSelect) {
+    metricSelect.addEventListener('change', () => render());
+  }
+
+  // Init section navigation
+  initSectionNav();
+
+  // Initial render
+  render();
+}
+
+function render() {
+  // Sync Chart.js defaults with current theme
+  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+  Chart.defaults.color = isDark ? '#a1a1aa' : '#71717a';
+  Chart.defaults.plugins.tooltip.backgroundColor = isDark ? 'rgba(15,15,18,0.95)' : 'rgba(255,255,255,0.95)';
+  Chart.defaults.plugins.tooltip.borderColor = isDark ? '#27272a' : '#e4e4e7';
+  Chart.defaults.plugins.tooltip.titleColor = isDark ? '#e4e4e7' : '#09090b';
+  Chart.defaults.plugins.tooltip.bodyColor = isDark ? '#a1a1aa' : '#71717a';
+
+  const filters = getFilters();
+  const filtered = filterResults(appData.results, filters);
+
+  // Summary cards
+  const passed = filtered.filter(r => r.status === 'done');
+  document.getElementById('stat-machines').textContent = appData.meta.machines.length;
+  document.getElementById('stat-benchmarks').textContent = filtered.length;
+  const passRate = filtered.length > 0 ? ((passed.length / filtered.length) * 100).toFixed(0) : '0';
+  document.getElementById('stat-pass-rate').textContent = `${passRate}%`;
+
+  // Results count
+  const countEl = document.getElementById('results-count');
+  if (countEl) {
+    const total = appData.results.length;
+    countEl.textContent = filtered.length === total
+      ? `${total} total`
+      : `${filtered.length} of ${total}`;
+  }
+
+  // Reset button visibility
+  const resetBtn = document.getElementById('filter-reset');
+  if (resetBtn) {
+    const active = filters.machine !== 'all' || filters.browser !== 'all' ||
+      filters.model !== 'all' || filters.backend !== 'all' ||
+      filters.status !== 'all' || filters.quants.size > 0;
+    resetBtn.style.display = active ? '' : 'none';
+  }
+
+  // Tables
+  renderResultsTable(filtered);
+  renderErrorTable(filtered);
+  renderMachineInfo(appData.meta.machines);
+
+  // Charts
+  renderDecodeChart(filtered);
+  renderPrefillChart(filtered);
+  renderSizeChart(filtered);
+  renderMachineChart(filtered, appData.meta.machines);
+
+  // CPU vs GPU comparison
+  const metric = document.getElementById('cpu-gpu-metric')?.value || 'decode_tok_s';
+  renderCpuGpuChart(filtered, metric);
+  renderSpeedupChart(filtered, metric);
+  renderCpuGpuTable(filtered);
+}
+
+function initSectionNav() {
+  const nav = document.getElementById('section-nav');
+  if (!nav) return;
+
+  const buttons = nav.querySelectorAll('.section-nav-item');
+  const sections = [];
+
+  buttons.forEach(btn => {
+    const sectionId = btn.dataset.section;
+    const section = document.getElementById(sectionId);
+    if (section) sections.push({ btn, section });
+
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      if (section) {
+        const navHeight = nav.offsetHeight;
+        const top = section.getBoundingClientRect().top + window.scrollY - navHeight;
+        window.scrollTo({ top, behavior: 'smooth' });
+      }
+    });
+  });
+
+  // Scroll spy with IntersectionObserver
+  if (sections.length === 0) return;
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const id = entry.target.id;
+          buttons.forEach(b => b.classList.toggle('active', b.dataset.section === id));
+        }
+      }
+    },
+    { rootMargin: '-20% 0px -60% 0px' }
+  );
+
+  sections.forEach(({ section }) => observer.observe(section));
+}
+
+init();

js/charts.js

@@ -0,0 +1,440 @@
+import { BROWSER_COLORS, quantSortKey, groupBy, formatTokS } from './utils.js';
+
+// Global Chart.js theme
+Chart.defaults.font.family = "'Manrope', system-ui, -apple-system, sans-serif";
+Chart.defaults.color = '#a1a1aa';
+Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 15, 18, 0.95)';
+Chart.defaults.plugins.tooltip.borderColor = '#27272a';
+Chart.defaults.plugins.tooltip.borderWidth = 1;
+Chart.defaults.plugins.tooltip.cornerRadius = 8;
+Chart.defaults.plugins.tooltip.padding = { top: 8, bottom: 8, left: 12, right: 12 };
+Chart.defaults.plugins.tooltip.titleFont = { weight: '600', size: 13 };
+Chart.defaults.plugins.tooltip.bodyFont = { family: "'JetBrains Mono', monospace", size: 12 };
+Chart.defaults.plugins.legend.labels.boxWidth = 12;
+Chart.defaults.plugins.legend.labels.boxHeight = 12;
+Chart.defaults.plugins.legend.labels.padding = 16;
+
+const chartInstances = new Map();
+
+function destroyChart(id) {
+  if (chartInstances.has(id)) {
+    chartInstances.get(id).destroy();
+    chartInstances.delete(id);
+  }
+}
+
+function themeColors() {
+  const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+  return {
+    grid:  dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',
+    text:  dark ? '#a1a1aa' : '#71717a',
+    title: dark ? '#e4e4e7' : '#09090b',
+  };
+}
+
+function darkScales(xTitle, yTitle) {
+  const c = themeColors();
+  return {
+    x: {
+      ticks: { color: c.text },
+      grid: { color: c.grid },
+      title: xTitle ? { display: true, text: xTitle, color: c.text } : undefined,
+    },
+    y: {
+      ticks: { color: c.text },
+      grid: { color: c.grid },
+      title: yTitle ? { display: true, text: yTitle, color: c.text } : undefined,
+      beginAtZero: true,
+    },
+  };
+}
+
+function darkLegend() {
+  const c = themeColors();
+  return { labels: { color: c.text, usePointStyle: true, pointStyle: 'circle' } };
+}
+
+function titleConfig(text) {
+  const c = themeColors();
+  return { display: true, text, color: c.title, font: { size: 14, weight: '600' } };
+}
+
+export function renderDecodeChart(results) {
+  const canvasId = 'chart-decode';
+  destroyChart(canvasId);
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return;
+
+  const passed = results.filter(r => r.status === 'done' && r.decode_tok_s != null);
+  if (passed.length === 0) {
+    canvas.parentElement.querySelector('.chart-empty')?.remove();
+    const msg = document.createElement('div');
+    msg.className = 'chart-empty';
+    msg.textContent = 'No data';
+    canvas.parentElement.appendChild(msg);
+    return;
+  }
+  canvas.parentElement.querySelector('.chart-empty')?.remove();
+
+  const byBrowser = groupBy(passed, 'browser');
+  const allQuants = [...new Set(passed.map(r => r.variant))].sort((a, b) => quantSortKey(a) - quantSortKey(b));
+
+  const datasets = Object.entries(byBrowser).map(([browser, items]) => {
+    const byQuant = groupBy(items, 'variant');
+    return {
+      label: browser,
+      backgroundColor: BROWSER_COLORS[browser] || '#888',
+      data: allQuants.map(q => {
+        const group = byQuant[q];
+        if (!group) return null;
+        const vals = group.map(r => r.decode_tok_s).filter(v => v != null);
+        return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+      }),
+    };
+  });
+
+  chartInstances.set(canvasId, new Chart(canvas, {
+    type: 'bar',
+    data: { labels: allQuants, datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: titleConfig('Decode Throughput by Quantization'),
+        legend: darkLegend(),
+        tooltip: {
+          callbacks: { label: ctx => `${ctx.dataset.label}: ${formatTokS(ctx.raw)} tok/s` },
+        },
+      },
+      scales: darkScales('Quantization', 'Decode tok/s'),
+    },
+  }));
+}
+
+export function renderPrefillChart(results) {
+  const canvasId = 'chart-prefill';
+  destroyChart(canvasId);
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return;
+
+  const passed = results.filter(r => r.status === 'done' && r.prefill_tok_s != null);
+  if (passed.length === 0) {
+    canvas.parentElement.querySelector('.chart-empty')?.remove();
+    const msg = document.createElement('div');
+    msg.className = 'chart-empty';
+    msg.textContent = 'No data';
+    canvas.parentElement.appendChild(msg);
+    return;
+  }
+  canvas.parentElement.querySelector('.chart-empty')?.remove();
+
+  const byBrowser = groupBy(passed, 'browser');
+  const allQuants = [...new Set(passed.map(r => r.variant))].sort((a, b) => quantSortKey(a) - quantSortKey(b));
+
+  const datasets = Object.entries(byBrowser).map(([browser, items]) => {
+    const byQuant = groupBy(items, 'variant');
+    return {
+      label: browser,
+      backgroundColor: BROWSER_COLORS[browser] || '#888',
+      data: allQuants.map(q => {
+        const group = byQuant[q];
+        if (!group) return null;
+        const vals = group.map(r => r.prefill_tok_s).filter(v => v != null);
+        return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+      }),
+    };
+  });
+
+  chartInstances.set(canvasId, new Chart(canvas, {
+    type: 'bar',
+    data: { labels: allQuants, datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: titleConfig('Prefill Throughput by Quantization'),
+        legend: darkLegend(),
+        tooltip: {
+          callbacks: { label: ctx => `${ctx.dataset.label}: ${formatTokS(ctx.raw)} tok/s` },
+        },
+      },
+      scales: darkScales('Quantization', 'Prefill tok/s'),
+    },
+  }));
+}
+
+export function renderSizeChart(results) {
+  const canvasId = 'chart-size';
+  destroyChart(canvasId);
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return;
+
+  const passed = results.filter(r => r.status === 'done' && r.decode_tok_s != null && r.sizeMB);
+  if (passed.length === 0) {
+    canvas.parentElement.querySelector('.chart-empty')?.remove();
+    const msg = document.createElement('div');
+    msg.className = 'chart-empty';
+    msg.textContent = 'No data';
+    canvas.parentElement.appendChild(msg);
+    return;
+  }
+  canvas.parentElement.querySelector('.chart-empty')?.remove();
+
+  const byBrowser = groupBy(passed, 'browser');
+
+  const datasets = Object.entries(byBrowser).map(([browser, items]) => {
+    const sorted = [...items].sort((a, b) => a.sizeMB - b.sizeMB);
+    return {
+      label: browser,
+      borderColor: BROWSER_COLORS[browser] || '#888',
+      backgroundColor: BROWSER_COLORS[browser] || '#888',
+      data: sorted.map(r => ({ x: r.sizeMB, y: r.decode_tok_s })),
+      showLine: true,
+      pointRadius: 4,
+      tension: 0.2,
+    };
+  });
+
+  chartInstances.set(canvasId, new Chart(canvas, {
+    type: 'scatter',
+    data: { datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: titleConfig('Throughput vs Model Size'),
+        legend: darkLegend(),
+        tooltip: {
+          callbacks: {
+            label: ctx => `${ctx.dataset.label}: ${ctx.parsed.x}MB \u2192 ${formatTokS(ctx.parsed.y)} tok/s`,
+          },
+        },
+      },
+      scales: darkScales('Model Size (MB)', 'Decode tok/s'),
+    },
+  }));
+}
+
+const CPU_COLOR = 'rgba(245, 158, 11, 0.75)';
+
+function showEmptyState(canvas, msg) {
+  canvas.parentElement.querySelector('.chart-empty')?.remove();
+  const el = document.createElement('div');
+  el.className = 'chart-empty';
+  el.textContent = msg || 'No data';
+  canvas.parentElement.appendChild(el);
+}
+
+function clearEmptyState(canvas) {
+  canvas.parentElement.querySelector('.chart-empty')?.remove();
+}
+
+const METRIC_LABELS = {
+  decode_tok_s: 'Decode tok/s',
+  prefill_tok_s: 'Prefill tok/s',
+};
+
+function avgBy(items, field) {
+  const vals = items.map(r => r[field]).filter(v => v != null);
+  return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+}
+
+export function renderCpuGpuChart(results, metric = 'decode_tok_s') {
+  const canvasId = 'chart-cpu-gpu';
+  destroyChart(canvasId);
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return;
+
+  const passed = results.filter(r => r.status === 'done' && r[metric] != null);
+  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
+  const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
+
+  if (cpuResults.length === 0 || gpuResults.length === 0) {
+    showEmptyState(canvas, cpuResults.length === 0 ? 'No CPU baseline data in current filter' : 'No GPU data in current filter');
+    return;
+  }
+  clearEmptyState(canvas);
+
+  const cpuVariants = new Set(cpuResults.map(r => r.variant));
+  const allQuants = [...new Set(gpuResults.map(r => r.variant))]
+    .filter(q => cpuVariants.has(q))
+    .sort((a, b) => quantSortKey(a) - quantSortKey(b));
+
+  if (allQuants.length === 0) {
+    showEmptyState(canvas, 'No overlapping variants between CPU and GPU');
+    return;
+  }
+
+  const cpuByVariant = groupBy(cpuResults, 'variant');
+  const cpuData = allQuants.map(q => avgBy(cpuByVariant[q] || [], metric));
+
+  const gpuByBrowser = groupBy(gpuResults, 'browser');
+  const gpuDatasets = Object.entries(gpuByBrowser).map(([browser, items]) => {
+    const byVariant = groupBy(items, 'variant');
+    return {
+      label: browser,
+      backgroundColor: BROWSER_COLORS[browser] || '#888',
+      data: allQuants.map(q => avgBy(byVariant[q] || [], metric)),
+    };
+  });
+
+  const metricLabel = METRIC_LABELS[metric] || metric;
+  chartInstances.set(canvasId, new Chart(canvas, {
+    type: 'bar',
+    data: { labels: allQuants, datasets: [{ label: 'CPU', backgroundColor: CPU_COLOR, data: cpuData }, ...gpuDatasets] },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: titleConfig(`CPU vs WebGPU: ${metricLabel}`),
+        legend: darkLegend(),
+        tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${formatTokS(ctx.raw)} tok/s` } },
+      },
+      scales: darkScales('Quantization', metricLabel),
+    },
+  }));
+}
+
+export function renderSpeedupChart(results, metric = 'decode_tok_s') {
+  const canvasId = 'chart-speedup';
+  destroyChart(canvasId);
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return;
+
+  const passed = results.filter(r => r.status === 'done' && r[metric] != null);
+  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
+  const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
+
+  if (cpuResults.length === 0 || gpuResults.length === 0) {
+    showEmptyState(canvas, cpuResults.length === 0 ? 'No CPU baseline data in current filter' : 'No GPU data in current filter');
+    return;
+  }
+  clearEmptyState(canvas);
+
+  const cpuAvgByVariant = {};
+  for (const [q, items] of Object.entries(groupBy(cpuResults, 'variant'))) {
+    cpuAvgByVariant[q] = avgBy(items, metric);
+  }
+
+  const allQuants = [...new Set(gpuResults.map(r => r.variant))]
+    .filter(q => cpuAvgByVariant[q] != null)
+    .sort((a, b) => quantSortKey(a) - quantSortKey(b));
+
+  if (allQuants.length === 0) {
+    showEmptyState(canvas, 'No overlapping variants between CPU and GPU');
+    return;
+  }
+
+  const gpuByBrowser = groupBy(gpuResults, 'browser');
+  const barDatasets = Object.entries(gpuByBrowser).map(([browser, items]) => {
+    const byVariant = groupBy(items, 'variant');
+    return {
+      label: browser,
+      backgroundColor: BROWSER_COLORS[browser] || '#888',
+      data: allQuants.map(q => {
+        const cpuAvg = cpuAvgByVariant[q];
+        const gpuAvg = avgBy(byVariant[q] || [], metric);
+        return cpuAvg && gpuAvg ? gpuAvg / cpuAvg : null;
+      }),
+    };
+  });
+
+  const refLine = {
+    label: '1\u00d7',
+    type: 'line',
+    data: allQuants.map(() => 1),
+    borderColor: 'rgba(255,255,255,0.3)',
+    borderDash: [4, 4],
+    borderWidth: 1.5,
+    pointRadius: 0,
+    fill: false,
+    order: -1,
+  };
+
+  const metricLabel = METRIC_LABELS[metric] || metric;
+  chartInstances.set(canvasId, new Chart(canvas, {
+    type: 'bar',
+    data: { labels: allQuants, datasets: [...barDatasets, refLine] },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: titleConfig(`WebGPU Speedup over CPU (${metricLabel})`),
+        legend: {
+          ...darkLegend(),
+          labels: { ...darkLegend().labels, filter: item => item.text !== '1\u00d7' },
+        },
+        tooltip: {
+          filter: item => item.dataset.label !== '1\u00d7',
+          callbacks: { label: ctx => `${ctx.dataset.label}: ${ctx.raw != null ? ctx.raw.toFixed(2) + '\u00d7' : '\u2014'}` },
+        },
+      },
+      scales: {
+        x: { ticks: { color: themeColors().text }, grid: { color: themeColors().grid }, title: { display: true, text: 'Quantization', color: themeColors().text } },
+        y: {
+          ticks: { color: themeColors().text, callback: v => `${v.toFixed(1)}\u00d7` },
+          grid: { color: themeColors().grid },
+          title: { display: true, text: 'Speedup (\u00d7)', color: themeColors().text },
+          beginAtZero: true,
+        },
+      },
+    },
+  }));
+}
+
+export function renderMachineChart(results, machines) {
+  const canvasId = 'chart-machine';
+  destroyChart(canvasId);
+  const canvas = document.getElementById(canvasId);
+  const container = document.getElementById('machine-chart-section');
+  if (!canvas || !container) return;
+
+  if (machines.length <= 1) {
+    container.style.display = 'none';
+    return;
+  }
+  container.style.display = '';
+
+  const passed = results.filter(r => r.status === 'done' && r.decode_tok_s != null);
+  const quantCounts = {};
+  for (const r of passed) quantCounts[r.variant] = (quantCounts[r.variant] || 0) + 1;
+  const targetQuant = quantCounts['Q4_K_M'] ? 'Q4_K_M' : Object.keys(quantCounts).sort((a, b) => quantCounts[b] - quantCounts[a])[0];
+
+  if (!targetQuant) {
+    container.style.display = 'none';
+    return;
+  }
+
+  const forQuant = passed.filter(r => r.variant === targetQuant);
+  const byMachine = groupBy(forQuant, 'machineSlug');
+  const machineLabels = Object.keys(byMachine);
+  const browsers = [...new Set(forQuant.map(r => r.browser))].sort();
+
+  const datasets = browsers.map(browser => ({
+    label: browser,
+    backgroundColor: BROWSER_COLORS[browser] || '#888',
+    data: machineLabels.map(slug => {
+      const items = byMachine[slug].filter(r => r.browser === browser);
+      if (!items.length) return null;
+      return items.reduce((s, r) => s + r.decode_tok_s, 0) / items.length;
+    }),
+  }));
+
+  chartInstances.set(canvasId, new Chart(canvas, {
+    type: 'bar',
+    data: { labels: machineLabels, datasets },
+    options: {
+      indexAxis: 'y',
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: titleConfig(`Machine Comparison (${targetQuant})`),
+        legend: darkLegend(),
+        tooltip: {
+          callbacks: { label: ctx => `${ctx.dataset.label}: ${formatTokS(ctx.raw)} tok/s` },
+        },
+      },
+      scales: darkScales('Decode tok/s', 'Machine'),
+    },
+  }));
+}

js/data.js

@@ -0,0 +1,26 @@
+let cachedData = null;
+
+export async function loadData() {
+  if (cachedData) return cachedData;
+  const resp = await fetch('data/combined.json');
+  cachedData = await resp.json();
+  return cachedData;
+}
+
+export function filterResults(results, filters) {
+  return results.filter(r => {
+    if (filters.machine && filters.machine !== 'all' && r.machineSlug !== filters.machine) return false;
+    if (filters.browser && filters.browser !== 'all' && r.browser !== filters.browser) return false;
+    if (filters.model && filters.model !== 'all' && r.model !== filters.model) return false;
+    if (filters.backend && filters.backend !== 'all') {
+      if (filters.backend === 'cpu' && r.nGpuLayers !== 0) return false;
+      if (filters.backend === 'webgpu' && r.nGpuLayers === 0) return false;
+    }
+    if (filters.status && filters.status !== 'all') {
+      if (filters.status === 'pass' && r.status !== 'done') return false;
+      if (filters.status === 'fail' && r.status === 'done') return false;
+    }
+    if (filters.quants && filters.quants.size > 0 && !filters.quants.has(r.variant)) return false;
+    return true;
+  });
+}

js/filters.js

@@ -0,0 +1,209 @@
+import { QUANT_ORDER, quantSortKey } from './utils.js';
+
+let selectedQuants = new Set();
+let onChange = null;
+
+export function initFilters(meta, onChangeCallback) {
+  onChange = onChangeCallback;
+
+  // Machine select
+  const machineSelect = document.getElementById('filter-machine');
+  machineSelect.innerHTML = '<option value="all">All Machines</option>';
+  for (const m of meta.machines) {
+    const opt = document.createElement('option');
+    opt.value = m.slug;
+    opt.textContent = `${m.cpus} (${m.totalMemoryGB}GB)`;
+    machineSelect.appendChild(opt);
+  }
+
+  // Browser select
+  const browserSelect = document.getElementById('filter-browser');
+  browserSelect.innerHTML = '<option value="all">All Browsers</option>';
+  for (const b of meta.browsers) {
+    const opt = document.createElement('option');
+    opt.value = b;
+    opt.textContent = b.charAt(0).toUpperCase() + b.slice(1);
+    browserSelect.appendChild(opt);
+  }
+
+  // Model select
+  const modelSelect = document.getElementById('filter-model');
+  modelSelect.innerHTML = '<option value="all">All Models</option>';
+  for (const m of meta.models) {
+    const opt = document.createElement('option');
+    opt.value = m;
+    opt.textContent = m;
+    modelSelect.appendChild(opt);
+  }
+
+  // Backend select
+  const backendSelect = document.getElementById('filter-backend');
+  backendSelect.innerHTML = `
+    <option value="all">All Backends</option>
+    <option value="webgpu">WebGPU</option>
+    <option value="cpu">CPU</option>
+  `;
+
+  // Status select
+  const statusSelect = document.getElementById('filter-status');
+  statusSelect.innerHTML = `
+    <option value="all">All Status</option>
+    <option value="pass">Pass</option>
+    <option value="fail">Fail</option>
+  `;
+
+  // Quant multi-select
+  initQuantMultiSelect(meta);
+
+  // Wire up change events for single selects
+  for (const sel of [machineSelect, browserSelect, modelSelect, backendSelect, statusSelect]) {
+    sel.addEventListener('change', fireChange);
+  }
+}
+
+function initQuantMultiSelect(meta) {
+  const btn = document.getElementById('quant-dropdown-btn');
+  const dropdown = document.getElementById('quant-dropdown');
+
+  // Toggle dropdown
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    dropdown.classList.toggle('open');
+  });
+
+  // Close on outside click
+  document.addEventListener('click', (e) => {
+    if (!dropdown.contains(e.target) && e.target !== btn) {
+      dropdown.classList.remove('open');
+    }
+  });
+}
+
+export function populateQuantOptions(results) {
+  const quantsInData = new Set(results.map(r => r.variant));
+  const sorted = [...quantsInData].sort((a, b) => quantSortKey(a) - quantSortKey(b));
+
+  const list = document.getElementById('quant-options');
+  list.innerHTML = '';
+
+  // Select All
+  const selectAllLabel = document.createElement('label');
+  selectAllLabel.className = 'quant-option select-all';
+  const selectAllCb = document.createElement('input');
+  selectAllCb.type = 'checkbox';
+  selectAllCb.checked = true;
+  selectAllCb.id = 'quant-select-all';
+  selectAllLabel.appendChild(selectAllCb);
+  selectAllLabel.appendChild(document.createTextNode(' Select All'));
+  list.appendChild(selectAllLabel);
+
+  const checkboxes = [];
+
+  for (const q of sorted) {
+    const label = document.createElement('label');
+    label.className = 'quant-option';
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.checked = true;
+    cb.value = q;
+    cb.className = 'quant-cb';
+    label.appendChild(cb);
+    label.appendChild(document.createTextNode(` ${q}`));
+    list.appendChild(label);
+    checkboxes.push(cb);
+
+    cb.addEventListener('change', () => {
+      updateQuantSelection(checkboxes, selectAllCb);
+      fireChange();
+    });
+  }
+
+  selectAllCb.addEventListener('change', () => {
+    const checked = selectAllCb.checked;
+    for (const cb of checkboxes) cb.checked = checked;
+    updateQuantSelection(checkboxes, selectAllCb);
+    fireChange();
+  });
+
+  // Update button text
+  updateQuantButtonText(sorted.length, sorted.length);
+}
+
+function updateQuantSelection(checkboxes, selectAllCb) {
+  selectedQuants = new Set();
+  let checkedCount = 0;
+  for (const cb of checkboxes) {
+    if (cb.checked) {
+      checkedCount++;
+    }
+  }
+
+  if (checkedCount === checkboxes.length) {
+    selectedQuants = new Set();
+    selectAllCb.checked = true;
+    selectAllCb.indeterminate = false;
+  } else if (checkedCount === 0) {
+    selectedQuants = new Set(['__none__']);
+    selectAllCb.checked = false;
+    selectAllCb.indeterminate = false;
+  } else {
+    selectedQuants = new Set();
+    for (const cb of checkboxes) {
+      if (cb.checked) selectedQuants.add(cb.value);
+    }
+    selectAllCb.checked = false;
+    selectAllCb.indeterminate = true;
+  }
+
+  updateQuantButtonText(checkedCount, checkboxes.length);
+}
+
+function updateQuantButtonText(checked, total) {
+  const textEl = document.getElementById('quant-dropdown-text');
+  if (!textEl) return;
+  if (checked === total) {
+    textEl.textContent = 'All Quants';
+  } else if (checked === 0) {
+    textEl.textContent = 'No Quants';
+  } else {
+    textEl.textContent = `${checked}/${total} Quants`;
+  }
+}
+
+function fireChange() {
+  if (onChange) onChange(getFilters());
+}
+
+export function resetFilters() {
+  // Reset all select dropdowns
+  document.getElementById('filter-machine').value = 'all';
+  document.getElementById('filter-browser').value = 'all';
+  document.getElementById('filter-model').value = 'all';
+  document.getElementById('filter-backend').value = 'all';
+  document.getElementById('filter-status').value = 'all';
+
+  // Reset quant checkboxes
+  const selectAllCb = document.getElementById('quant-select-all');
+  const checkboxes = [...document.querySelectorAll('#quant-options .quant-cb')];
+
+  if (selectAllCb) {
+    selectAllCb.checked = true;
+    selectAllCb.indeterminate = false;
+  }
+  for (const cb of checkboxes) cb.checked = true;
+
+  // Reset internal state
+  selectedQuants = new Set();
+  updateQuantButtonText(checkboxes.length, checkboxes.length);
+}
+
+export function getFilters() {
+  return {
+    machine: document.getElementById('filter-machine').value,
+    browser: document.getElementById('filter-browser').value,
+    model: document.getElementById('filter-model').value,
+    backend: document.getElementById('filter-backend').value,
+    status: document.getElementById('filter-status').value,
+    quants: selectedQuants,
+  };
+}

bench-app.js → js/run/controller.js

@@ -1,16 +1,15 @@
-// Interactive benchmark page controller.
-// Mode detection (local vs hosted), model list rendering with device-fit
-// check + filter chips, Download / Run / Abort orchestration, results output.
-// Inference logic lives in bench-core.js — this file drives the UI and
-// sequences one runBenchmarkCore() call per selected variant.
-
-import { runBenchmarkCore } from './bench-core.js';
-import { localSource, hostedSource, inventoryOpfs, purgeOpfs } from './bench-source.js';
-import { getDeviceBudgetMB, variantFits, describeDevice } from './bench-device.js';
+// Run-tab controller. Mounts into the existing #run-section subtree and
+// drives the one-click benchmark UI using the dashboard's design-system
+// classes. Detects `surface` (localhost / space / pages) to gate the
+// server save checkbox and the HF hub sign-in/submit row.
+
+import { runBenchmarkCore } from './core.js';
+import { localSource, hostedSource, inventoryOpfs, purgeOpfs } from './source.js';
+import { getDeviceBudgetMB, variantFits, describeDevice } from './device.js';
 import {
   resumeHFSession, beginHFSignIn, signOutHF, submitResultsToDataset,
-} from './bench-hub.js';
-import { isHubConfigured, HF_DATASET_REPO } from './bench-config.js';
+} from './hub.js';
+import { isHubConfigured, HF_DATASET_REPO } from './config.js';
 
 const OVERHEAD = 1.5;
 const DEFAULT_PROMPT =
@@ -25,42 +24,69 @@ const DEFAULT_ITERATIONS = 5;
 const MIN_ITERATIONS_FOR_SUBMIT = 5;
 
 const state = {
-  mode: 'local',        // 'local' | 'hosted'
-  source: null,         // localSource() | hostedSource()
-  models: null,         // parsed models.json
-  budget: null,         // { budgetMB, memGB, quotaMB, source }
-  device: null,         // describeDevice() output
-  cacheStatus: {},      // { 'repo/file': { cachedBytes } }
-  variants: [],         // flat variant rows with metadata
+  surface: 'pages',    // 'localhost' | 'space' | 'pages' | 'file'
+  source: null,        // localSource() | hostedSource()
+  models: null,        // parsed models.json
+  budget: null,        // { budgetMB, memGB, quotaMB, source }
+  device: null,        // describeDevice() output
+  cacheStatus: {},     // { 'repo/file': { cachedBytes } }
+  variants: [],        // flat variant rows with metadata
   running: false,
   aborted: false,
-  results: [],          // result records from the current session
-  hfSession: null,      // { accessToken, expiresAt, userName } when signed in
+  results: [],         // result records from the current session
+  hfSession: null,     // { accessToken, expiresAt, userName } when signed in
   iterations: DEFAULT_ITERATIONS,
+  mounted: false,
 };
 
-// ──────────────── mode / data loading ────────────────
+// ──────────────── surface detection ────────────────
 
-async function detectMode() {
+async function detectSurface() {
   const params = new URLSearchParams(location.search);
-  if (params.get('mode') === 'hosted') return 'hosted';
-  if (params.get('mode') === 'local') return 'local';
-  try {
-    const r = await fetch('/api/models', { method: 'HEAD' });
-    if (r.ok) return 'local';
-  } catch { /* fall through */ }
-  return 'hosted';
+  if (params.get('mode') === 'local') return 'localhost';
+  if (params.get('mode') === 'hosted') return 'space';
+  if (/\.static\.hf\.space$/.test(location.hostname)) return 'space';
+  if (/\.github\.io$/.test(location.hostname)) return 'pages';
+  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
+    try {
+      const r = await fetch('/api/models', { method: 'HEAD' });
+      if (r.ok) return 'localhost';
+    } catch { /* no backend */ }
+  }
+  if (location.protocol === 'file:') return 'file';
+  return 'pages';
+}
+
+function canSubmit() {
+  return state.surface === 'localhost'
+    || (state.surface === 'space' && isHubConfigured());
 }
 
+// ──────────────── data loading ────────────────
+
 async function loadModels() {
-  const url = state.mode === 'local' ? '/api/models' : './models.json';
-  const r = await fetch(url);
-  if (!r.ok) throw new Error(`${url} ${r.status}`);
-  return r.json();
+  // Candidates in order — the Run page lives at /site/run/ locally but may be
+  // flattened to Space root. Relative `../models.json` catches the local case;
+  // `./models.json` catches the flattened case; absolute `/models.json` catches
+  // Space root too; `/api/models` is the Express backend.
+  const candidates = state.surface === 'localhost'
+    ? ['/api/models', '../models.json', './models.json', '/models.json']
+    : ['./models.json', '../models.json', '/models.json', './data/models.json'];
+  let lastErr = null;
+  for (const url of candidates) {
+    try {
+      const r = await fetch(url);
+      if (r.ok) return await r.json();
+      lastErr = new Error(`${url} → ${r.status}`);
+    } catch (err) {
+      lastErr = err;
+    }
+  }
+  throw lastErr || new Error('Could not load models.json');
 }
 
 async function loadCacheStatus() {
-  if (state.mode === 'local') {
+  if (state.surface === 'localhost') {
     try {
       const r = await fetch('/api/cache-status');
       if (r.ok) return r.json();
@@ -124,31 +150,54 @@ function $(id) { return document.getElementById(id); }
 function renderHeader() {
   const d = state.device;
   const b = state.budget;
-  $('mode-badge').textContent = state.mode;
+
+  const badge = $('run-mode-badge');
+  if (badge) {
+    badge.textContent = state.surface;
+    badge.className = `badge run-mode-badge run-mode-${state.surface}`;
+  }
 
   const uaShort = d.userAgent.match(/(Firefox|Chrome|CriOS|Edg|Safari)\/[\d.]+/)?.[0] || 'browser';
   const gpuStr = d.gpu
     ? [d.gpu.vendor, d.gpu.architecture, d.gpu.device].filter(Boolean).join(' ').trim()
-    : 'no WebGPU';
-  $('device-line').textContent = `${uaShort} · ${d.platform || 'unknown'} · ${gpuStr || 'WebGPU info unavailable'}`;
+    : '';
+
+  $('device-browser').textContent = uaShort;
+  $('device-platform').textContent = d.platform || 'unknown';
+  $('device-gpu').textContent = gpuStr || (d.webgpu ? 'WebGPU (no info)' : 'no WebGPU');
+
+  const memStr = b.memGB !== null ? `${b.memGB} GB` : '—';
+  $('device-memory').textContent = memStr;
 
-  const pieces = [];
-  if (b.memGB !== null) pieces.push(`deviceMemory ${b.memGB} GB`);
-  if (b.quotaMB !== null) pieces.push(`storage quota ${(b.quotaMB / 1024).toFixed(1)} GB`);
   const budgetGB = (b.budgetMB / 1024).toFixed(1);
-  $('budget-line').textContent =
-    `Model budget: ~${budgetGB} GB · ${pieces.join(' · ') || 'using default'} · source: ${b.source}`;
+  $('device-budget').textContent = `${budgetGB} GB`;
+  $('device-budget-source').textContent = `source: ${b.source}`;
+
+  const webgpuCell = $('device-webgpu');
+  if (webgpuCell) {
+    webgpuCell.textContent = d.webgpu ? 'yes' : 'no';
+    webgpuCell.classList.toggle('text-success', d.webgpu);
+    webgpuCell.classList.toggle('text-error', !d.webgpu);
+  }
+
+  // Surface-dependent UI gating.
+  const hubRow = $('hub-row');
+  if (hubRow) hubRow.hidden = state.surface !== 'space';
+
+  const saveLocalRow = $('save-local-row');
+  if (saveLocalRow) saveLocalRow.hidden = state.surface !== 'localhost';
+
+  const pagesBanner = $('run-pages-banner');
+  if (pagesBanner) pagesBanner.hidden = state.surface !== 'pages';
 
-  $('output-actions-local').hidden = state.mode !== 'local';
-  const hubSection = $('hub-section');
-  if (hubSection) hubSection.hidden = state.mode !== 'hosted';
   const purgeBtn = $('btn-purge');
-  if (purgeBtn) purgeBtn.hidden = state.mode !== 'hosted';
+  if (purgeBtn) purgeBtn.hidden = state.surface === 'localhost';
+
   renderHfSection();
 }
 
 function renderHfSection() {
-  if (state.mode !== 'hosted') return;
+  if (state.surface !== 'space') return;
   const signinBtn = $('btn-signin');
   const submitBtn = $('btn-submit');
   const userEl = $('hf-user');
@@ -157,7 +206,7 @@ function renderHfSection() {
   if (!isHubConfigured()) {
     signinBtn.disabled = true;
     signinBtn.textContent = 'HF hub not configured';
-    signinBtn.title = 'Set HF_DATASET_REPO in bench-config.js';
+    signinBtn.title = 'Set HF_DATASET_REPO in site/js/run/config.js';
     submitBtn.hidden = true;
     userEl.textContent = '';
     return;
@@ -186,7 +235,7 @@ function renderHfSection() {
 }
 
 function renderModels() {
-  const panel = $('models-panel');
+  const panel = $('run-models');
   panel.innerHTML = '';
 
   const groups = groupByFamily(state.variants);
@@ -195,71 +244,81 @@ function renderModels() {
     const allFit = fitsCount === variants.length;
 
     const familyEl = document.createElement('details');
-    familyEl.className = 'family';
+    familyEl.className = 'run-family card';
     familyEl.dataset.family = family;
     familyEl.open = true;
 
     const summary = document.createElement('summary');
+    summary.className = 'run-family-summary';
     summary.innerHTML = `
-      <input type="checkbox" class="family-select-all" data-family="${escapeAttr(family)}"${allFit ? ' checked' : ''}>
-      <span class="family-name">${escapeText(family)}</span>
-      <span class="family-stats">(${variants.length} variants, ${fitsCount} fit)</span>
+      <span class="run-family-chevron" aria-hidden="true"></span>
+      <input type="checkbox" class="run-family-select-all" data-family="${escapeAttr(family)}"${allFit ? ' checked' : ''}>
+      <span class="run-family-name">${escapeText(family)}</span>
+      <span class="run-family-stats">${variants.length} variants · ${fitsCount} fit</span>
     `;
     if (/^granite-4/i.test(family)) {
       const w = document.createElement('span');
-      w.className = 'family-warnings';
+      w.className = 'run-family-warning';
       w.textContent = '⚠ needs SSM_SCAN in llama.cpp';
       summary.appendChild(w);
     }
     familyEl.appendChild(summary);
 
+    const list = document.createElement('div');
+    list.className = 'run-variant-list';
+
     for (const v of variants) {
       const row = document.createElement('label');
-      row.className = 'variant-row';
-      if (!variantFitsDevice(v)) row.classList.add('non-fit');
+      row.className = 'run-variant-row';
+      if (!variantFitsDevice(v)) row.classList.add('is-non-fit');
       row.dataset.key = cacheKey(v);
 
       const cb = document.createElement('input');
       cb.type = 'checkbox';
-      cb.className = 'variant-select';
+      cb.className = 'run-variant-select';
       cb.dataset.key = cacheKey(v);
       cb.checked = variantFitsDevice(v);
 
-      const label = document.createElement('span');
-      label.className = 'variant-label';
-      label.innerHTML = `<b>${escapeText(v.quant)}</b> · <code>${escapeText(v.filename)}</code>`;
+      const quant = document.createElement('span');
+      quant.className = 'run-variant-quant';
+      quant.textContent = v.quant;
+
+      const filename = document.createElement('code');
+      filename.className = 'run-variant-file';
+      filename.textContent = v.filename;
 
       const size = document.createElement('span');
-      size.className = 'size';
+      size.className = 'run-variant-size';
       size.textContent = v.sizeMB > 0 ? formatSize(v.sizeMB) : '?';
 
       const badges = document.createElement('span');
-      badges.className = 'badges';
+      badges.className = 'run-variant-badges';
       updateBadgesForVariant(badges, v);
 
-      row.append(cb, label, size, badges);
-      familyEl.appendChild(row);
+      row.append(cb, quant, filename, size, badges);
+      list.appendChild(row);
     }
+    familyEl.appendChild(list);
     panel.appendChild(familyEl);
   }
 }
 
 function updateBadgesForVariant(badgesEl, v) {
   badgesEl.innerHTML = '';
-  if (isCached(v)) badgesEl.appendChild(makeBadge('cached', 'cache-badge'));
-  for (const w of v.warnings) badgesEl.appendChild(makeBadge(w, 'warn-badge'));
+  if (isCached(v)) badgesEl.appendChild(makeBadge('cached', 'badge--cached'));
+  for (const w of v.warnings) badgesEl.appendChild(makeBadge(w, 'badge--warn'));
 }
 
 function refreshCacheBadge(v) {
-  const row = document.querySelector(`.variant-row[data-key="${cssEscape(cacheKey(v))}"]`);
+  const row = document.querySelector(`.run-variant-row[data-key="${cssEscape(cacheKey(v))}"]`);
   if (!row) return;
-  const badges = row.querySelector('.badges');
+  const badges = row.querySelector('.run-variant-badges');
   if (badges) updateBadgesForVariant(badges, v);
 }
 
 function makeBadge(text, cls) {
   const el = document.createElement('span');
-  el.className = cls;
+  el.className = `badge ${cls}`;
   el.textContent = text;
   return el;
 }
@@ -281,25 +340,32 @@ function cssEscape(s) {
 // ──────────────── selection / filters ────────────────
 
 function wireSelectionHandlers() {
-  document.querySelectorAll('.family-select-all').forEach(el => {
-    el.addEventListener('change', () => {
-      const family = el.dataset.family;
-      const rows = document.querySelectorAll(
-        `details.family[data-family="${cssEscape(family)}"] .variant-select`,
+  const panel = $('run-models');
+  panel.addEventListener('change', (e) => {
+    const t = e.target;
+    if (t.classList?.contains('run-family-select-all')) {
+      const family = t.dataset.family;
+      const rows = panel.querySelectorAll(
+        `details.run-family[data-family="${cssEscape(family)}"] .run-variant-select`,
       );
-      rows.forEach(cb => { cb.checked = el.checked; });
+      rows.forEach(cb => { cb.checked = t.checked; });
       updateButtons();
-    });
-    el.addEventListener('click', e => e.stopPropagation());
+    } else if (t.classList?.contains('run-variant-select')) {
+      updateButtons();
+    }
   });
-  document.querySelectorAll('.variant-select').forEach(el => {
-    el.addEventListener('change', updateButtons);
+  // Prevent the select-all toggling expand/collapse.
+  panel.addEventListener('click', (e) => {
+    if (e.target.classList?.contains('run-family-select-all')) {
+      e.stopPropagation();
+    }
   });
 }
 
 function wireFilters() {
   ['hide-ud', 'hide-iq', 'hide-hifp'].forEach(id => {
-    $(id).addEventListener('change', applyFilters);
+    const el = $(id);
+    if (el) el.addEventListener('change', applyFilters);
   });
 }
 
@@ -321,10 +387,10 @@ function submittableResults() {
 }
 
 function applyFilters() {
-  const hideUd = $('hide-ud').checked;
-  const hideIq = $('hide-iq').checked;
-  const hideHifp = $('hide-hifp').checked;
-  document.querySelectorAll('.variant-row').forEach(row => {
+  const hideUd = $('hide-ud')?.checked;
+  const hideIq = $('hide-iq')?.checked;
+  const hideHifp = $('hide-hifp')?.checked;
+  document.querySelectorAll('.run-variant-row').forEach(row => {
     const v = state.variants.find(x => cacheKey(x) === row.dataset.key);
     if (!v) return;
     const isUd = v.quant.startsWith('UD-');
@@ -336,7 +402,7 @@ function applyFilters() {
 }
 
 function getCheckedVariants() {
-  return Array.from(document.querySelectorAll('.variant-select:checked'))
+  return Array.from(document.querySelectorAll('.run-variant-select:checked'))
     .map(cb => state.variants.find(v => cacheKey(v) === cb.dataset.key))
     .filter(Boolean);
 }
@@ -344,26 +410,54 @@ function getCheckedVariants() {
 function updateButtons() {
   const checked = getCheckedVariants();
   const cachedChecked = checked.filter(isCached);
-  $('btn-download').disabled = state.running || checked.length === 0;
-  $('btn-run').disabled = state.running || cachedChecked.length === 0;
-  $('btn-abort').disabled = !state.running;
-  $('queue-status').textContent = checked.length
-    ? `${checked.length} selected · ${cachedChecked.length} cached`
-    : '';
+  const dl = $('btn-download'); if (dl) dl.disabled = state.running || checked.length === 0;
+  const rn = $('btn-run'); if (rn) rn.disabled = state.running || cachedChecked.length === 0;
+  const ab = $('btn-abort'); if (ab) { ab.disabled = !state.running; ab.hidden = !state.running; }
+  const status = $('queue-status');
+  if (status) {
+    status.textContent = checked.length
+      ? `${checked.length} selected · ${cachedChecked.length} cached`
+      : '';
+  }
 }
 
 // ──────────────── progress table ────────────────
 
-function showProgressPanel() { $('progress-panel').hidden = false; }
+function ensureProgressTable() {
+  const wrap = $('run-progress-wrapper');
+  if (!wrap) return null;
+  let table = wrap.querySelector('table');
+  if (!table) {
+    table = document.createElement('table');
+    table.className = 'results-table run-progress-table';
+    table.innerHTML = `
+      <thead>
+        <tr>
+          <th>Model</th>
+          <th>Variant</th>
+          <th>Status</th>
+          <th class="num">Prefill tok/s</th>
+          <th class="num">Decode tok/s</th>
+          <th class="num">Wall s</th>
+          <th>Error</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    `;
+    wrap.appendChild(table);
+  }
+  return table;
+}
 
 function progressRowFor(v) {
   const key = cacheKey(v);
-  const tbody = $('progress-table').querySelector('tbody');
+  const table = ensureProgressTable();
+  const tbody = table.querySelector('tbody');
   let tr = tbody.querySelector(`tr[data-key="${cssEscape(key)}"]`);
   if (!tr) {
     tr = document.createElement('tr');
     tr.dataset.key = key;
-    tr.className = 'row-queued';
+    tr.className = 'run-row-queued';
     tr.innerHTML = `
       <td>${escapeText(v.modelName)}</td>
       <td>${escapeText(v.quant)}</td>
@@ -377,7 +471,7 @@ function progressRowFor(v) {
   }
   return {
     setStatus(status, msg) {
-      tr.className = `row-${rowClassFor(status)}`;
+      tr.className = `run-row-${rowClassFor(status)}`;
       tr.querySelector('.status').textContent = msg ? `${status} — ${msg}` : status;
     },
     setProgress(fraction, downloaded, total) {
@@ -388,7 +482,7 @@ function progressRowFor(v) {
       tr.querySelector('.status').textContent = detail ? `downloading ${detail}` : 'downloading';
     },
     fillFromRecord(record) {
-      tr.className = `row-${record.status === 'done' ? 'ok' : 'error'}`;
+      tr.className = `run-row-${record.status === 'done' ? 'ok' : 'error'}`;
       tr.querySelector('.status').textContent = record.status;
       tr.querySelector('.prefill').textContent = record.metrics?.prefill_tok_s ?? '—';
       tr.querySelector('.decode').textContent = record.metrics?.decode_tok_s ?? '—';
@@ -480,7 +574,6 @@ async function onDownloadClick() {
   state.running = true;
   state.aborted = false;
   updateButtons();
-  showProgressPanel();
 
   for (const v of variants) {
     if (state.aborted) break;
@@ -508,9 +601,9 @@ async function onDownloadClick() {
     }
   }
 
-  // Refresh cache inventory from server to reconcile any partial downloads.
+  // Refresh cache inventory to reconcile any partial downloads.
   state.cacheStatus = await loadCacheStatus();
-  document.querySelectorAll('.variant-row').forEach(row => {
+  document.querySelectorAll('.run-variant-row').forEach(row => {
     const v = state.variants.find(x => cacheKey(x) === row.dataset.key);
     if (v) refreshCacheBadge(v);
   });
@@ -529,7 +622,6 @@ async function onRunClick() {
   state.aborted = false;
   state.results = [];
   updateButtons();
-  showProgressPanel();
 
   const machine = await machineInfo();
   const browser = browserInfo();
@@ -551,7 +643,7 @@ async function onRunClick() {
       localStorage.setItem('webgpu-bench:lastRun', JSON.stringify(state.results));
     } catch { /* quota */ }
 
-    if (state.mode === 'local' && $('save-local')?.checked) {
+    if (state.surface === 'localhost' && $('save-local')?.checked) {
       fetch('/api/results', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -627,9 +719,6 @@ async function runVariantWithIterations(v, row) {
         nPredict: DEFAULT_N_PREDICT,
         nCtx: DEFAULT_N_CTX,
         nGpuLayers: DEFAULT_N_GPU_LAYERS,
-        // Only the first iteration runs the consistency check — the result
-        // is deterministic with greedy decoding, so subsequent iterations
-        // would just repeat the same check.
         refTokenIds: i === 0 ? (refTokenIds || null) : null,
         onStatus: (s, m) => row.setStatus(`gpu${i + 1}/${s}`, m),
         onProgress: (fr, d, t) => row.setProgress(fr, d, t),
@@ -699,7 +788,6 @@ function makeRecord(v, vr, machine, browser, wallTimeMs) {
     prefill_samples: vr.gpuSamples.map(s => round2(s.prefill_tok_s)),
     decode_samples: vr.gpuSamples.map(s => round2(s.decode_tok_s)),
     iterations: vr.iterations,
-    // Retain first-iteration detail for backward-compat with dashboard tables.
     n_p_eval: first.n_p_eval,
     n_eval: first.n_eval,
     t_p_eval_ms: first.t_p_eval_ms,
@@ -733,7 +821,7 @@ function makeRecord(v, vr, machine, browser, wallTimeMs) {
     cpu_baseline: cpuBaseline,
     output: vr.gpuCore?.output || '',
     machine,
-    source: 'bench.html',
+    source: `webgpu-bench/site (${state.surface})`,
   };
 }
 
@@ -742,8 +830,8 @@ function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
 // ──────────────── Output ────────────────
 
 function renderOutput() {
-  $('output-textarea').value = generateMarkdown(state.results);
-  $('output-panel').hidden = false;
+  const ta = $('output-textarea');
+  if (ta) ta.value = generateMarkdown(state.results);
 }
 
 function generateMarkdown(results) {
@@ -791,7 +879,7 @@ function generateMarkdown(results) {
 }
 
 function wireOutputHandlers() {
-  $('btn-copy').addEventListener('click', async () => {
+  $('btn-copy')?.addEventListener('click', async () => {
     const text = $('output-textarea').value;
     try {
       await navigator.clipboard.writeText(text);
@@ -802,7 +890,7 @@ function wireOutputHandlers() {
     }
   });
 
-  $('btn-download-json').addEventListener('click', () => {
+  $('btn-download-json')?.addEventListener('click', () => {
     if (state.results.length === 0) return;
     const blob = new Blob([JSON.stringify(state.results, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
@@ -821,12 +909,13 @@ function flashButton(el, msg) {
   setTimeout(() => { el.textContent = original; }, 1200);
 }
 
-// ──────────────── Abort ────────────────
+// ──────────────── Abort / Purge / Hub ────────────────
 
 function wireAbortHandler() {
-  $('btn-abort').addEventListener('click', () => {
+  $('btn-abort')?.addEventListener('click', () => {
     state.aborted = true;
-    $('btn-abort').disabled = true;
+    const ab = $('btn-abort');
+    if (ab) ab.disabled = true;
     logLine('Abort requested — will stop between variants.');
   });
 }
@@ -835,12 +924,12 @@ function wirePurgeHandler() {
   const btn = $('btn-purge');
   if (!btn) return;
   btn.addEventListener('click', async () => {
-    if (state.mode !== 'hosted') return;
+    if (state.surface === 'localhost') return;
     if (!confirm('Delete all cached GGUF files from OPFS? This frees browser storage but re-downloads will be needed.')) return;
     try {
       await purgeOpfs();
       state.cacheStatus = {};
-      document.querySelectorAll('.variant-row').forEach(row => {
+      document.querySelectorAll('.run-variant-row').forEach(row => {
         const v = state.variants.find(x => cacheKey(x) === row.dataset.key);
         if (v) refreshCacheBadge(v);
       });
@@ -902,23 +991,34 @@ function wireHubHandlers() {
 }
 
 function wireRunHandlers() {
-  $('btn-download').addEventListener('click', onDownloadClick);
-  $('btn-run').addEventListener('click', onRunClick);
+  $('btn-download')?.addEventListener('click', onDownloadClick);
+  $('btn-run')?.addEventListener('click', onRunClick);
 }
 
-// ──────────────── Init ────────────────
+// ──────────────── Public API ────────────────
+
+export async function mountRunSection() {
+  if (state.mounted) return;
+  state.mounted = true;
 
-async function init() {
-  state.mode = await detectMode();
-  state.source = state.mode === 'local' ? localSource() : hostedSource();
+  state.surface = await detectSurface();
+  state.source = state.surface === 'localhost' ? localSource() : hostedSource();
   state.budget = await getDeviceBudgetMB();
   state.device = await describeDevice();
-  state.models = await loadModels();
+
+  try {
+    state.models = await loadModels();
+  } catch (err) {
+    const panel = $('run-models');
+    if (panel) panel.innerHTML = `<div class="empty-state">Could not load models.json — ${escapeText(err.message)}</div>`;
+    console.error(err);
+    return;
+  }
+
   state.cacheStatus = await loadCacheStatus();
   state.variants = flattenVariants(state.models);
 
-  // Resume any existing HF OAuth session / complete redirect flow.
-  if (state.mode === 'hosted') {
+  if (state.surface === 'space') {
     try { state.hfSession = await resumeHFSession(); } catch { /* ignore */ }
   }
 
@@ -935,8 +1035,8 @@ async function init() {
   updateButtons();
 }
 
-init().catch(err => {
-  const el = $('models-loading');
-  if (el) el.textContent = `Error loading models: ${err.message}`;
-  console.error(err);
-});
+export function teardownRunSection() {
+  // Placeholder — no explicit teardown today. Future: abort in-flight runs,
+  // detach listeners. For now the Run tab just sits idle.
+  state.aborted = true;
+}

bench-core.js → js/run/core.js

@@ -1,6 +1,6 @@
 // Benchmark core: load GGUF via a source adapter, init llama.cpp WASM,
 // run inference, collect metrics. Used by harness.js (URL-param driven, for
-// runner.js) and by bench-app.js (UI driven).
+// runner.js) and by the Run-tab controller (UI driven).
 
 const DEFAULT_PROMPT = 'Hello, how are you?';
 
@@ -31,7 +31,7 @@ export async function runBenchmarkCore({
   onProgress = () => {},
   onLog = () => {},
 }) {
-  if (!source) throw new Error('No source provided (see bench-source.js).');
+  if (!source) throw new Error('No source provided (see run/source.js).');
   if (!modelFile) throw new Error('No model file specified.');
   if (!hfRepo) throw new Error('No hfRepo specified.');
 

bench-hub.js → js/run/hub.js

@@ -1,8 +1,8 @@
 // Hugging Face OAuth + dataset push for the bench page (hosted mode).
 //
 // Flow:
-//   1. On page load, bench-app.js calls `resumeHFSession()` to handle the
-//      OAuth redirect (if the URL has the expected query params) and to
+//   1. On page load, the run controller calls `resumeHFSession()` to handle
+//      the OAuth redirect (if the URL has the expected query params) and to
 //      reuse any previously-stored access token.
 //   2. Clicking [Sign in] calls `beginHFSignIn()` which redirects the
 //      browser to HF; after consent, HF redirects back to the page with
@@ -24,7 +24,7 @@ import {
   HF_OAUTH_SCOPES,
   HF_DATASET_REPO,
   isHubConfigured,
-} from './bench-config.js';
+} from './config.js';
 
 const TOKEN_STORAGE_KEY = 'webgpu-bench:hfOauth';
 
@@ -73,7 +73,7 @@ function readStoredSession() {
 
 export async function beginHFSignIn() {
   if (!isHubConfigured()) {
-    throw new Error('HF hub is not configured. Set HF_DATASET_REPO in bench-config.js.');
+    throw new Error('HF hub is not configured. Set HF_DATASET_REPO in run/config.js.');
   }
   // When served from an HF Space with `hf_oauth: true`, HF injects
   // `window.huggingface.variables` with OAUTH_CLIENT_ID + OAUTH_SCOPES.

js/tables.js

@@ -0,0 +1,332 @@
+import { formatTokS, formatMs, categorizeError, groupBy, quantSortKey } from './utils.js';
+
+let lastResults = [];
+let sortState = { key: null, dir: 'asc' };
+
+const NUM_KEYS = new Set([
+  'sizeMB', 'decode_tok_s', 'prefill_tok_s', 'n_eval', 't_eval_ms',
+  'n_p_eval', 't_p_eval_ms', 'wallTimeMs', 'consistency_rate', 'nGpuLayers',
+]);
+
+function sortResults(results, key, dir) {
+  const isNum = NUM_KEYS.has(key);
+  return [...results].sort((a, b) => {
+    let va = a[key], vb = b[key];
+    if (va == null && vb == null) return 0;
+    if (va == null) return 1;
+    if (vb == null) return -1;
+
+    let cmp;
+    if (isNum) {
+      cmp = Number(va) - Number(vb);
+    } else if (key === 'webgpuAvailable') {
+      cmp = (va === vb) ? 0 : va ? -1 : 1;
+    } else {
+      cmp = String(va).localeCompare(String(vb));
+    }
+    return dir === 'desc' ? -cmp : cmp;
+  });
+}
+
+function handleSort(key) {
+  if (sortState.key === key) {
+    sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc';
+  } else {
+    sortState.key = key;
+    // Default to descending for performance metrics
+    sortState.dir = NUM_KEYS.has(key) ? 'desc' : 'asc';
+  }
+  renderResultsTable(lastResults);
+}
+
+export function renderResultsTable(results) {
+  lastResults = results;
+  const container = document.getElementById('results-table');
+  if (!container) return;
+
+  if (results.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No results match the current filters.</p></div>';
+    return;
+  }
+
+  const sorted = sortState.key ? sortResults(results, sortState.key, sortState.dir) : results;
+
+  const cols = [
+    { key: 'machineSlug', label: 'Machine' },
+    { key: 'model', label: 'Model' },
+    { key: 'variant', label: 'Quant' },
+    { key: 'sizeMB', label: 'Size (MB)' },
+    { key: 'browser', label: 'Browser' },
+    { key: 'nGpuLayers', label: 'Backend' },
+    { key: 'status', label: 'Status' },
+    { key: 'buildType', label: 'Build' },
+    { key: 'webgpuAvailable', label: 'WebGPU' },
+    { key: 'decode_tok_s', label: 'Decode tok/s' },
+    { key: 'prefill_tok_s', label: 'Prefill tok/s' },
+    { key: 'n_eval', label: 'n_eval' },
+    { key: 't_eval_ms', label: 't_eval (ms)' },
+    { key: 'n_p_eval', label: 'n_p_eval' },
+    { key: 't_p_eval_ms', label: 't_p_eval (ms)' },
+    { key: 'wallTimeMs', label: 'Wall (s)' },
+    { key: 'consistency_rate', label: 'CPU Match' },
+    { key: 'llamaCppCommit', label: 'llama.cpp' },
+    { key: 'error', label: 'Error' },
+  ];
+
+  let html = '<table class="results-table"><thead><tr>';
+  for (const col of cols) {
+    const isActive = sortState.key === col.key;
+    const arrow = isActive ? (sortState.dir === 'asc' ? ' \u2191' : ' \u2193') : '';
+    const cls = isActive ? ' class="sorted"' : '';
+    html += `<th data-key="${col.key}"${cls}>${col.label}${arrow}</th>`;
+  }
+  html += '</tr></thead><tbody>';
+
+  for (const r of sorted) {
+    const rowClass = r.status === 'done' ? 'row-pass' : 'row-fail';
+    html += `<tr class="${rowClass}">`;
+    for (const col of cols) {
+      html += '<td>';
+      switch (col.key) {
+        case 'status':
+          html += r.status === 'done'
+            ? '<span class="badge badge--pass">PASS</span>'
+            : '<span class="badge badge--fail">FAIL</span>';
+          break;
+        case 'nGpuLayers':
+          if (r.nGpuLayers != null) {
+            const isCpu = r.nGpuLayers === 0;
+            html += `<span class="badge ${isCpu ? 'badge--cpu' : 'badge--webgpu'}">${isCpu ? 'CPU' : 'WebGPU'}</span>`;
+          } else {
+            html += '<span class="text-muted">\u2014</span>';
+          }
+          break;
+        case 'webgpuAvailable':
+          html += r.webgpuAvailable
+            ? '<span class="badge badge--yes">Yes</span>'
+            : '<span class="badge badge--no">No</span>';
+          break;
+        case 'decode_tok_s':
+        case 'prefill_tok_s':
+          html += `<span class="mono">${formatTokS(r[col.key])}</span>`;
+          break;
+        case 't_eval_ms':
+        case 't_p_eval_ms':
+          html += `<span class="mono">${formatMs(r[col.key])}</span>`;
+          break;
+        case 'wallTimeMs':
+          html += `<span class="mono">${r.wallTimeMs != null ? (r.wallTimeMs / 1000).toFixed(1) : '\u2014'}</span>`;
+          break;
+        case 'consistency_rate':
+          if (r.consistency_rate != null) {
+            const pct = (r.consistency_rate * 100).toFixed(1);
+            const cls = r.consistency_rate >= 0.95 ? 'text-success' : r.consistency_rate >= 0.90 ? '' : 'text-error';
+            const diverge = r.consistency_first_disagree >= 0 ? ` (diverge@${r.consistency_first_disagree})` : '';
+            html += `<span class="mono ${cls}">${pct}%${diverge}</span>`;
+          } else {
+            html += '<span class="text-muted">\u2014</span>';
+          }
+          break;
+        case 'llamaCppCommit':
+          if (r.llamaCppCommit) {
+            const short = r.llamaCppCommit.slice(0, 10);
+            html += `<a class="mono" href="https://github.com/ggml-org/llama.cpp/commit/${r.llamaCppCommit}" target="_blank" rel="noopener">${short}</a>`;
+          } else {
+            html += '<span class="text-muted">\u2014</span>';
+          }
+          break;
+        case 'error':
+          if (r.error) {
+            const cat = categorizeError(r.error);
+            const short = r.error.length > 60 ? r.error.slice(0, 60) + '\u2026' : r.error;
+            html += `<span class="error-cell" title="${escapeHtml(r.error)}"><span class="error-cat">${cat}</span>${escapeHtml(short)}</span>`;
+          } else {
+            html += '<span class="text-muted">\u2014</span>';
+          }
+          break;
+        case 'sizeMB':
+        case 'n_eval':
+        case 'n_p_eval':
+          html += `<span class="mono">${r[col.key] != null ? r[col.key] : '\u2014'}</span>`;
+          break;
+        default:
+          html += escapeHtml(String(r[col.key] ?? '\u2014'));
+      }
+      html += '</td>';
+    }
+    html += '</tr>';
+  }
+
+  html += '</tbody></table>';
+  container.innerHTML = html;
+
+  // Wire sort click handlers
+  container.querySelectorAll('th[data-key]').forEach(th => {
+    th.addEventListener('click', () => handleSort(th.dataset.key));
+  });
+}
+
+export function renderErrorTable(results) {
+  const container = document.getElementById('error-table');
+  if (!container) return;
+
+  const errors = results.filter(r => r.status !== 'done' && r.error);
+  if (errors.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No errors found.</p></div>';
+    return;
+  }
+
+  const grouped = groupBy(errors, r => categorizeError(r.error));
+
+  let html = '<div class="table-card"><table class="data-table"><thead><tr><th>Category</th><th>Count</th><th>Variants</th><th>Browsers</th></tr></thead><tbody>';
+  for (const [cat, items] of Object.entries(grouped).sort((a, b) => b[1].length - a[1].length)) {
+    const variants = [...new Set(items.map(i => i.variant))].join(', ');
+    const browsers = [...new Set(items.map(i => i.browser))].join(', ');
+    html += `<tr><td><span class="error-cat">${cat}</span></td><td><span class="mono">${items.length}</span></td><td>${variants}</td><td>${browsers}</td></tr>`;
+  }
+  html += '</tbody></table></div>';
+  container.innerHTML = html;
+}
+
+export function renderMachineInfo(machines) {
+  const container = document.getElementById('machine-info');
+  if (!container) return;
+
+  if (machines.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No machine data.</p></div>';
+    return;
+  }
+
+  let html = '<div class="machine-grid">';
+  for (const m of machines) {
+    const failCount = m.resultCount - m.passCount;
+    html += `
+      <div class="machine-card">
+        <div class="machine-card-header">
+          <svg class="machine-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
+          <h3>${escapeHtml(m.cpus)}</h3>
+        </div>
+        <div class="machine-card-specs">
+          <div class="spec-row"><span class="spec-label">Platform</span><span class="spec-value">${m.platform}</span></div>
+          <div class="spec-row"><span class="spec-label">Arch</span><span class="spec-value">${m.arch}</span></div>
+          <div class="spec-row"><span class="spec-label">RAM</span><span class="spec-value">${m.totalMemoryGB} GB</span></div>
+          <div class="spec-row"><span class="spec-label">Results</span><span class="spec-value">${m.resultCount}</span></div>
+          <div class="spec-row"><span class="spec-label">Passed</span><span class="spec-value text-success">${m.passCount}</span></div>
+          <div class="spec-row"><span class="spec-label">Failed</span><span class="spec-value text-error">${failCount}</span></div>
+          ${m.llamaCppCommit ? `<div class="spec-row"><span class="spec-label">llama.cpp</span><span class="spec-value"><a href="https://github.com/ggml-org/llama.cpp/commit/${m.llamaCppCommit}" target="_blank" rel="noopener">${m.llamaCppCommit.slice(0, 10)}</a></span></div>` : ''}
+        </div>
+      </div>`;
+  }
+  html += '</div>';
+  container.innerHTML = html;
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+export function renderCpuGpuTable(results) {
+  const container = document.getElementById('cpu-gpu-table');
+  if (!container) return;
+
+  const METRICS = [
+    { field: 'decode_tok_s', label: 'Decode tok/s' },
+    { field: 'prefill_tok_s', label: 'Prefill tok/s' },
+  ];
+
+  const passed = results.filter(r => r.status === 'done');
+  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
+  const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
+
+  if (cpuResults.length === 0 || gpuResults.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>Select "All Backends" to see CPU vs GPU comparison.</p></div>';
+    return;
+  }
+
+  function avg(items, field) {
+    const vals = items.map(r => r[field]).filter(v => v != null);
+    return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+  }
+
+  const gpuBrowsers = [...new Set(gpuResults.map(r => r.browser))].sort();
+
+  const cpuByModelVariant = groupBy(cpuResults, r => `${r.model}::${r.variant}`);
+  const gpuByModelVariant = groupBy(gpuResults, r => `${r.model}::${r.variant}`);
+
+  const keys = [...new Set([...Object.keys(cpuByModelVariant), ...Object.keys(gpuByModelVariant)])]
+    .filter(k => cpuByModelVariant[k] && gpuByModelVariant[k]);
+
+  if (keys.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No matching model+variant pairs between CPU and GPU results.</p></div>';
+    return;
+  }
+
+  keys.sort((a, b) => {
+    const [aModel, aVar] = a.split('::');
+    const [bModel, bVar] = b.split('::');
+    if (aModel !== bModel) return aModel.localeCompare(bModel);
+    return quantSortKey(aVar) - quantSortKey(bVar);
+  });
+
+  // Two-row grouped header: row1 = group labels (CPU, Chromium, …), row2 = metric sub-labels
+  // CPU gets colspan = METRICS.length, each GPU browser gets colspan = METRICS.length * 2 (value + speedup per metric)
+  const gpuColspan = METRICS.length * 2;
+  let html = '<div class="table-card"><div class="results-wrapper"><table class="results-table"><thead>';
+
+  // Row 1: group headers
+  html += '<tr>';
+  html += '<th rowspan="2" class="th-group-border">Model</th><th rowspan="2" class="th-group-border">Quant</th>';
+  html += `<th colspan="${METRICS.length}" class="th-group th-group-border">CPU</th>`;
+  for (const b of gpuBrowsers) {
+    html += `<th colspan="${gpuColspan}" class="th-group th-group-border">${escapeHtml(b.charAt(0).toUpperCase() + b.slice(1))}</th>`;
+  }
+  html += '</tr>';
+
+  // Row 2: metric sub-headers
+  html += '<tr>';
+  for (const m of METRICS) {
+    html += `<th class="th-sub">${m.label}</th>`;
+  }
+  for (const b of gpuBrowsers) {
+    for (const m of METRICS) {
+      html += `<th class="th-sub">${m.label}</th><th class="th-sub">Speedup</th>`;
+    }
+  }
+  html += '</tr></thead><tbody>';
+
+  for (const key of keys) {
+    const [model, variant] = key.split('::');
+    const cpuItems = cpuByModelVariant[key] || [];
+    const gpuByBrowser = groupBy(gpuByModelVariant[key] || [], 'browser');
+
+    html += '<tr>';
+    html += `<td>${escapeHtml(model)}</td>`;
+    html += `<td><span class="mono">${escapeHtml(variant)}</span></td>`;
+
+    // CPU columns
+    for (const m of METRICS) {
+      const val = avg(cpuItems, m.field);
+      html += `<td><span class="mono">${formatTokS(val)}</span></td>`;
+    }
+
+    // GPU columns per browser
+    for (const b of gpuBrowsers) {
+      const gpuItems = gpuByBrowser[b] || [];
+      for (const m of METRICS) {
+        const cpuVal = avg(cpuItems, m.field);
+        const gpuVal = avg(gpuItems, m.field);
+        const speedup = cpuVal && gpuVal ? gpuVal / cpuVal : null;
+        const cls = speedup == null ? '' : speedup >= 3 ? 'text-success' : speedup >= 1.5 ? '' : speedup >= 1 ? 'text-muted' : 'text-error';
+        html += `<td><span class="mono">${formatTokS(gpuVal)}</span></td>`;
+        html += `<td><span class="mono ${cls}">${speedup != null ? speedup.toFixed(2) + '\u00d7' : '\u2014'}</span></td>`;
+      }
+    }
+
+    html += '</tr>';
+  }
+
+  html += '</tbody></table></div></div>';
+  container.innerHTML = html;
+}

js/utils.js

@@ -0,0 +1,54 @@
+export const BROWSER_COLORS = {
+  chromium: '#60a5fa',
+  firefox: '#fb923c',
+  webkit: '#a78bfa',
+};
+
+// Quantization types sorted by approximate bit-width (low -> high)
+export const QUANT_ORDER = [
+  'IQ1_S', 'IQ1_M',
+  'IQ2_XXS', 'IQ2_XS', 'IQ2_S', 'IQ2_M', 'Q2_K', 'Q2_K_S',
+  'IQ3_XXS', 'IQ3_XS', 'IQ3_S', 'Q3_K_S', 'Q3_K_M', 'Q3_K_L',
+  'IQ4_NL', 'IQ4_XS', 'Q4_0', 'Q4_K_S', 'Q4_K_M',
+  'Q5_0', 'Q5_K_S', 'Q5_K_M',
+  'Q6_K',
+  'Q8_0',
+  'F16',
+  'F32',
+  'BF16',
+];
+
+export function quantSortKey(q) {
+  const idx = QUANT_ORDER.indexOf(q);
+  return idx >= 0 ? idx : QUANT_ORDER.length;
+}
+
+export function formatTokS(v) {
+  if (v == null || isNaN(v)) return '\u2014';
+  return v.toFixed(1);
+}
+
+export function formatMs(v) {
+  if (v == null || isNaN(v)) return '\u2014';
+  return v.toFixed(1);
+}
+
+export function categorizeError(err) {
+  if (!err) return null;
+  const e = err.toLowerCase();
+  if (e.includes('out of memory') || e.includes('oom') || e.includes('memory allocation')) return 'OOM';
+  if (e.includes('wasm') || e.includes('abort') || e.includes('unreachable')) return 'WASM Abort';
+  if (e.includes('timeout') || e.includes('timed out')) return 'Timeout';
+  if (e.includes('download') || e.includes('fetch') || e.includes('404') || e.includes('network')) return 'Download Failed';
+  return 'Other';
+}
+
+export function groupBy(arr, keyFn) {
+  const map = {};
+  for (const item of arr) {
+    const key = typeof keyFn === 'function' ? keyFn(item) : item[keyFn];
+    if (!map[key]) map[key] = [];
+    map[key].push(item);
+  }
+  return map;
+}

methodology.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="dark">
+  <title>Methodology — WebGPU Bench</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <header class="header">
+    <div class="header-inner">
+      <a href="index.html" class="header-brand">
+        <svg class="header-logo" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
+        <span class="header-title">WebGPU Bench</span>
+      </a>
+      <nav class="header-nav">
+        <a href="index.html" class="header-link">Dashboard</a>
+        <a href="run/" class="header-link">Run</a>
+      </nav>
+    </div>
+  </header>
+
+  <div class="methodology-content">
+    <a href="index.html" class="back-link">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+      Back to Dashboard
+    </a>
+
+    <h2>How Benchmarks Work</h2>
+    <ol>
+      <li><code>build.sh</code> compiles llama.cpp to WebAssembly with WebGPU support via Emscripten + emdawnwebgpu, producing two WASM variants: JSPI (Chrome) and Asyncify (Firefox, Safari).</li>
+      <li><code>runner.js</code> launches Playwright browsers and navigates to <code>harness.html</code>.</li>
+      <li><code>harness.js</code> detects JSPI support and loads the correct WASM variant.</li>
+      <li>The GGUF model is downloaded from HuggingFace directly in the browser.</li>
+      <li>Inference runs via WebGPU (or CPU fallback) using llama.cpp's C API with greedy sampling for deterministic output.</li>
+      <li>Performance metrics are collected via <code>llama_perf_context()</code> and returned to Playwright.</li>
+      <li>A fresh browser instance is launched for each variant to prevent WASM memory accumulation (OOM fix).</li>
+    </ol>
+
+    <h2>Dashboard Columns</h2>
+    <table>
+      <thead>
+        <tr><th>Column</th><th>Description</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Machine</td><td>Machine slug identifying the hardware (e.g. <code>apple-m3-16gb-darwin</code>)</td></tr>
+        <tr><td>Model</td><td>Model name (e.g. Llama-3.2-1B-Instruct)</td></tr>
+        <tr><td>Quant</td><td>Quantization variant (e.g. Q4_K_M, Q8_0)</td></tr>
+        <tr><td>Size (MB)</td><td>Model file size in megabytes</td></tr>
+        <tr><td>Browser</td><td>Browser used for the benchmark (chromium, firefox, webkit)</td></tr>
+        <tr><td>Status</td><td>PASS if inference completed successfully, FAIL otherwise</td></tr>
+        <tr><td>Build</td><td><code>jspi</code> or <code>asyncify</code> — which WASM variant was used. Chrome supports JSPI; Firefox and Safari use Asyncify.</td></tr>
+        <tr><td>WebGPU</td><td>Whether WebGPU was available in the browser. If not, inference falls back to CPU.</td></tr>
+        <tr><td>Decode tok/s</td><td>Token generation speed (tokens/sec) — main performance metric</td></tr>
+        <tr><td>Prefill tok/s</td><td>Prompt processing speed (tokens/sec)</td></tr>
+        <tr><td>n_eval</td><td>Number of tokens generated during decode</td></tr>
+        <tr><td>t_eval (ms)</td><td>Total decode time in milliseconds</td></tr>
+        <tr><td>n_p_eval</td><td>Number of prompt tokens processed during prefill</td></tr>
+        <tr><td>t_p_eval (ms)</td><td>Total prefill time in milliseconds</td></tr>
+        <tr><td>Wall (s)</td><td>Total wall-clock time for the benchmark run in seconds (includes model download, load, and inference)</td></tr>
+        <tr><td>CPU Match</td><td>Consistency with CPU baseline — percentage of token positions where WebGPU and CPU agree on the top-1 token. Only present when benchmarks are run with <code>--consistency</code>. See Consistency Measurement below.</td></tr>
+        <tr><td>Error</td><td>Error message and category (OOM, WASM Abort, Timeout, etc.) when status is FAIL</td></tr>
+      </tbody>
+    </table>
+
+    <h2>Error Categories</h2>
+    <table>
+      <thead>
+        <tr><th>Category</th><th>Pattern</th><th>Typical Cause</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>OOM</td><td>out of memory, memory allocation</td><td>Model too large for available WASM memory</td></tr>
+        <tr><td>WASM Abort</td><td>wasm, abort, unreachable</td><td>WASM execution error, often from unsupported operations</td></tr>
+        <tr><td>Timeout</td><td>timeout, timed out</td><td>Benchmark exceeded time limit (model download or inference)</td></tr>
+        <tr><td>Download Failed</td><td>download, fetch, 404, network</td><td>Model file not found or network error</td></tr>
+        <tr><td>Other</td><td>everything else</td><td>Uncategorized errors</td></tr>
+      </tbody>
+    </table>
+
+    <h2>Consistency Measurement</h2>
+    <p>The <code>--consistency</code> flag measures how faithfully the WebGPU backend reproduces the CPU computation for each quantization type.</p>
+
+    <h3>How it works</h3>
+    <p>For each variant, two runs are performed:</p>
+    <ol>
+      <li><strong>CPU baseline</strong> (<code>n_gpu_layers=0</code>): greedy-decodes 128 tokens and records the token ID sequence. Cached to <code>results/cpu_baselines.json</code>. When testing multiple browsers, the baseline is collected once on the first browser and shared across all browsers (CPU output is identical regardless of JSPI vs Asyncify). When testing a single browser, the baseline runs in that same browser.</li>
+      <li><strong>WebGPU run</strong> (<code>n_gpu_layers=999</code>): performs a forced-decoding pass — feeds the CPU's token sequence one token at a time and checks whether the WebGPU backend independently predicts the same top-1 token at each position.</li>
+    </ol>
+
+    <h3>Why forced decoding</h3>
+    <p>Naively comparing generated text suffers from cascading divergence: a single token difference changes the KV cache context for all subsequent tokens. Forced decoding evaluates each position independently, giving a clean per-token accuracy signal.</p>
+
+    <h3>Interpreting CPU Match</h3>
+    <table>
+      <thead>
+        <tr><th>CPU Match</th><th>Interpretation</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>100.0%</code></td><td>Numerically identical to CPU — no precision issues</td></tr>
+        <tr><td><code>95–99%</code></td><td>A few tokens differ due to near-equal logits — expected for lower-precision quants</td></tr>
+        <tr><td><code>&lt; 90%</code></td><td>Systematic precision issues — GPU kernel may need investigation</td></tr>
+        <tr><td><code>0.0%</code></td><td>First token wrong — quantization kernel likely broken</td></tr>
+        <tr><td><code>—</code></td><td>No consistency data — benchmarks were run without <code>--consistency</code></td></tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+</html>

run/index.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
+  <script>(function(){var t=localStorage.getItem('theme')||'light';document.documentElement.setAttribute('data-theme',t);})();</script>
+  <title>Run — WebGPU Bench</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../css/style.css">
+  <!-- Import map so `@huggingface/hub` resolves in the browser via esm.sh.
+       Must appear before any <script type="module">. -->
+  <script type="importmap">
+    {
+      "imports": {
+        "@huggingface/hub": "https://esm.sh/@huggingface/hub"
+      }
+    }
+  </script>
+</head>
+<body>
+  <header class="header">
+    <div class="header-inner">
+      <a href="../index.html" class="header-brand">
+        <svg class="header-logo" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
+        <span class="header-title">WebGPU Bench</span>
+      </a>
+      <nav class="header-nav">
+        <a href="../index.html" class="header-link">Dashboard</a>
+        <a href="../methodology.html" class="header-link">Methodology</a>
+        <button id="theme-toggle" class="header-link theme-toggle-btn" type="button" title="Toggle theme">
+          <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        </button>
+        <a href="https://github.com/abhijitramesh/webgpu-bench" target="_blank" rel="noopener" class="header-link">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6.02 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.82.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>
+          GitHub
+        </a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section id="run-section" class="dash-section">
+      <div class="container">
+        <div class="section-header">
+          <h2>Run a benchmark</h2>
+          <span id="run-mode-badge" class="badge run-mode-badge">…</span>
+        </div>
+
+        <!-- Read-only banner (shown on GH Pages — no backend, no OAuth) -->
+        <div id="run-pages-banner" class="run-pages-banner" hidden>
+          <span>Read-only mode — run benchmarks locally but submit via the <a href="https://abhijitramesh-webgpu-bench.static.hf.space/run/" target="_blank" rel="noopener">HF Space</a>.</span>
+        </div>
+
+        <!-- HF sign-in + submit (space surface only) -->
+        <div id="hub-row" class="card hub-row" hidden>
+          <div class="hub-row-inner">
+            <div class="hub-row-info">
+              <span id="hf-user"></span>
+            </div>
+            <div class="hub-row-actions">
+              <button id="btn-signin" class="btn btn-secondary" type="button">Sign in with Hugging Face</button>
+              <button id="btn-submit" class="btn btn-primary" type="button" disabled hidden>Submit to leaderboard</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Device & budget -->
+        <div class="summary-grid run-device-grid">
+          <div class="stat-card run-device-card">
+            <span class="stat-card-label">Device</span>
+            <div class="run-device-rows">
+              <div class="run-device-row"><span class="run-device-row-label">Browser</span><span class="run-device-row-value" id="device-browser">—</span></div>
+              <div class="run-device-row"><span class="run-device-row-label">Platform</span><span class="run-device-row-value" id="device-platform">—</span></div>
+              <div class="run-device-row"><span class="run-device-row-label">GPU</span><span class="run-device-row-value" id="device-gpu">—</span></div>
+            </div>
+          </div>
+          <div class="stat-card run-device-card">
+            <span class="stat-card-label">Capability</span>
+            <div class="run-device-rows">
+              <div class="run-device-row"><span class="run-device-row-label">deviceMemory</span><span class="run-device-row-value" id="device-memory">—</span></div>
+              <div class="run-device-row"><span class="run-device-row-label">WebGPU</span><span class="run-device-row-value" id="device-webgpu">—</span></div>
+            </div>
+          </div>
+          <div class="stat-card run-device-card">
+            <span class="stat-card-label">Model budget</span>
+            <div class="run-device-rows">
+              <div class="run-device-row"><span class="run-device-row-label">Max size</span><span class="run-device-row-value" id="device-budget">—</span></div>
+              <div class="run-device-note" id="device-budget-source"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Hide filters, iterations, actions -->
+        <div class="filter-bar">
+          <div class="filter-bar-inner run-filters">
+            <div class="filter-group">
+              <span class="filter-label">Hide</span>
+              <div class="run-filters-checks">
+                <label class="run-hide-label"><input type="checkbox" id="hide-ud"> UD</label>
+                <label class="run-hide-label"><input type="checkbox" id="hide-iq"> IQ</label>
+                <label class="run-hide-label"><input type="checkbox" id="hide-hifp"> BF16/F16</label>
+              </div>
+            </div>
+            <div class="filter-group">
+              <label class="filter-label" for="iterations-input">Iterations</label>
+              <input type="number" id="iterations-input" class="filter-select run-iter-input" value="5" min="1" max="50" step="1">
+            </div>
+            <div class="run-actions">
+              <span id="queue-status"></span>
+              <button class="btn btn-secondary" id="btn-download" type="button" disabled>Download selected</button>
+              <button class="btn btn-primary" id="btn-run" type="button" disabled>Run benchmarks</button>
+              <button class="btn btn-danger" id="btn-abort" type="button" hidden>Abort</button>
+              <button class="btn btn-secondary" id="btn-purge" type="button" hidden>Purge OPFS cache</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Family / variant list -->
+        <div id="run-models" class="run-models-stack">
+          <div class="empty-state">Loading models…</div>
+        </div>
+
+        <!-- Progress -->
+        <div class="section-header">
+          <h3 class="subsection-title">Progress</h3>
+        </div>
+        <div class="table-card">
+          <div id="run-progress-wrapper" class="results-wrapper"></div>
+        </div>
+
+        <!-- Output -->
+        <div class="section-header" style="margin-top: 32px;">
+          <h3 class="subsection-title">Output</h3>
+        </div>
+        <div class="card run-output">
+          <label id="save-local-row" class="run-output-toggle" hidden>
+            <input type="checkbox" id="save-local" checked>
+            Save to <code>results/results.json</code> on this server
+          </label>
+          <textarea id="output-textarea" class="run-output-textarea" readonly spellcheck="false"></textarea>
+          <div class="run-output-buttons">
+            <button class="btn btn-secondary" id="btn-copy" type="button">Copy</button>
+            <button class="btn btn-secondary" id="btn-download-json" type="button">Download JSON</button>
+          </div>
+        </div>
+
+        <!-- Log -->
+        <details id="run-log" class="card run-log" style="margin-top: 16px;">
+          <summary>Run log</summary>
+          <pre id="log-output" class="run-log-pre"></pre>
+        </details>
+      </div>
+    </section>
+  </main>
+
+  <script type="module">
+    import { mountRunSection } from '../js/run/controller.js';
+    // Theme toggle wiring (kept here since app.js no longer runs on this page).
+    document.getElementById('theme-toggle')?.addEventListener('click', () => {
+      const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+    });
+    mountRunSection();
+  </script>
+</body>
+</html>