per-pass GPU trace ?bench=trace: name the non-weight overhead

index.html

@@ -220,6 +220,36 @@ async function runPerfBench() {
   log.innerHTML = tbl; st.textContent = "live decode profile · done"; console.log("[perfbench]", runs);
 }
 
+// ── PER-PASS GPU TRACE (?bench=trace) ── where does a token's ~40ms go? Runs a profiled forward through the
+// step() path (window.__profile → timestamp-query'd ns per pass) and dumps the breakdown sorted by cost, so the
+// 83% non-weight overhead is named exactly (attention / argmax / lm_head / norms / dispatch count) — no guessing.
+async function runTraceBench() {
+  log.innerHTML = ""; input.disabled = send.disabled = true;
+  const rep = m.rep ?? 1.3, gpu = engine._gpu;
+  if (!gpu || !gpu.generate) { st.textContent = "trace unavailable (no raw handle)"; bubble("a", "engine._gpu.generate missing"); return; }
+  const ids = engine.tokenize(engine.frameTurn("Write a detailed paragraph about how mountains form over geological time.", false));
+  globalThis.__spec = false;
+  st.textContent = "warming up (boosting clock)…";
+  gpu.reset(); await gpu.generate(ids.slice(), 40, rep);       // warm → boost clock; __profileData will hold the LAST token's passes
+  st.textContent = "tracing a token…";
+  window.__profile = 1; gpu.reset(); await gpu.generate(ids.slice(), 24, rep); window.__profile = 0;
+  const pd = window.__profileData;
+  if (!pd || !pd.passes) { st.textContent = "no profile data (timestamp-query unsupported?)"; bubble("a", "window.__profileData empty — this GPU/browser may lack the timestamp-query feature."); return; }
+  const items = Object.entries(pd.passes).map(([tag, v]) => ({ tag, ms: v.ms, n: v.n })).sort((a, b) => b.ms - a.ms);
+  const tot = pd.passSumMs || items.reduce((s, x) => s + x.ms, 0);
+  const bar = (x) => Math.round(280 * x / (items[0].ms || 1));
+  const tbl = `<div style="font-family:ui-monospace,monospace;font-size:13px;max-width:820px;margin:0 auto;padding:8px">
+    <div style="font-size:18px;font-weight:700;margin-bottom:4px">Per-pass GPU trace — one token</div>
+    <div style="color:var(--dim);margin-bottom:12px">BitNet-2B · warmed · ${pd.nPasses} dispatches · GPU pass-sum ${tot.toFixed(1)} ms · wall-span ${(pd.gpuSpanMs||0).toFixed(1)} ms</div>
+    <table style="width:100%;border-collapse:collapse">
+      <tr style="color:var(--dim);text-align:left"><th style="padding:5px 8px">pass</th><th style="padding:5px 8px;text-align:right">GPU ms</th><th style="padding:5px 8px;text-align:right">% tok</th><th style="padding:5px 8px;text-align:right">count</th><th></th></tr>
+      ${items.map(x => `<tr style="border-top:1px solid var(--line)"><td style="padding:5px 8px">${x.tag}</td><td style="padding:5px 8px;text-align:right">${x.ms.toFixed(2)}</td><td style="padding:5px 8px;text-align:right">${(100*x.ms/tot).toFixed(0)}%</td><td style="padding:5px 8px;text-align:right">${x.n}</td><td style="padding:5px 8px"><span style="display:inline-block;height:9px;border-radius:2px;background:var(--q);width:${bar(x.ms)}px"></span></td></tr>`).join("")}
+    </table>
+    <div style="margin-top:12px;color:var(--dim)">The top rows are the lever. Weight-matmul passes that dominate ⇒ we're near bandwidth (little to win). Attention / argmax / lm_head / norms dominating ⇒ that's the non-weight overhead to cut (fuse passes, cheaper argmax, fewer dispatches).</div>
+  </div>`;
+  log.innerHTML = tbl; st.textContent = "per-pass trace · done"; console.log("[trace]", pd);
+}
+
 try {
   if (!navigator.gpu) throw new Error("This browser has no WebGPU — open in Chrome, Edge, or a recent mobile browser.");
   st.textContent = `loading ${m.name} (${m.size})…`;
@@ -234,6 +264,7 @@ try {
   input.placeholder = "Message Q…";
   if (params.get("bench") === "spec") { globalThis.__spec = false; await runSpecBench(); }
   else if (params.get("bench") === "perf") { await runPerfBench(); }
+  else if (params.get("bench") === "trace") { await runTraceBench(); }
   else if (pending) { const w = [...log.querySelectorAll(".a")].reverse().find((x) => x.dataset.pending); if (w) w.remove(); const p = pending; pending = null; generate(p, true); }
   else await proactiveGreeting();
 } catch (e) { st.textContent = "⚠ " + e.message; bubble("a", "Could not start: " + e.message); }