@vibecook/ice 0.11.0 → 0.14.0

package/dist/devtools.js

@@ -14,8 +14,8 @@ import {
   WheelPan,
   WheelZoom,
   Wire
-} from "./chunk-VGVDJZSP.js";
-import "./chunk-OR5FNVUE.js";
+} from "./chunk-DYK6KNLG.js";
+import "./chunk-JS6PG6YD.js";
 
 // ../devtools/src/attach.ts
 import {
@@ -29,7 +29,7 @@ var LS_KEY = "ice-dock:layout";
 var STYLE_ID = "ice-dock-style";
 var MARGIN = 8;
 var KEEP = 90;
-var SLOT_ORDER = ["profiler", "gl", "observer"];
+var SLOT_ORDER = ["profiler", "gpu", "observer"];
 function loadLayout() {
   try {
     return JSON.parse(localStorage.getItem(LS_KEY) ?? "{}");
@@ -64,12 +64,13 @@ var CSS = `
 .ice-dock-slot:empty { display: none; }
 
 /* De-window the hosted tools \u2014 the dock is the window now. */
-.ice-dock .strata-obs, .ice-dock .strata-prof, .ice-dock .ice-gl {
+.ice-dock .strata-obs, .ice-dock .strata-prof {
   position: static !important; width: auto !important; min-width: 0 !important;
   border: none !important; border-radius: 0 !important; box-shadow: none !important; }
 .ice-dock .strata-obs { resize: vertical !important; }
 .ice-dock .strata-obs-head { cursor: default; }
-.ice-dock .strata-prof-body, .ice-dock .ice-gl-body { min-width: 0; }
+.ice-dock .strata-prof-body { min-width: 0; }
+.ice-dock .ice-gpu { border: none; border-radius: 0; box-shadow: none; }
 `;
 function injectStyle(doc) {
   if (doc.getElementById(STYLE_ID) !== null) return;
@@ -193,46 +194,37 @@ function createDock(opts = {}) {
   };
 }
 
-// ../devtools/src/gl-panel.ts
-var STYLE_ID2 = "ice-gl-style";
+// ../devtools/src/gpu-panel.ts
+var STYLE_ID2 = "ice-gpu-style";
 var CSS2 = `
-.ice-gl { position: fixed; z-index: 99998; background: rgba(13,17,23,.96);
-  border: 1px solid #30363d; border-radius: 10px; color: #e6edf3;
-  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-  box-shadow: 0 6px 22px rgba(0,0,0,.45); user-select: none; }
-.ice-gl * { box-sizing: border-box; }
-.ice-gl.tl { top: 10px; left: 10px; } .ice-gl.tr { top: 10px; right: 10px; }
-.ice-gl.bl { bottom: 10px; left: 10px; } .ice-gl.br { bottom: 10px; right: 10px; }
-.ice-gl-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; }
-.ice-gl-name { font-weight: 700; color: #56d4dd; }
-.ice-gl-fps { font-weight: 700; color: #a371f7; min-width: 46px; }
-.ice-gl-gpu { color: #8b949e; min-width: 74px; }
-.ice-gl-caret { color: #8b949e; margin-left: auto; }
-.ice-gl-body { display: none; border-top: 1px solid #21262d; padding: 7px 9px 8px; min-width: 300px; }
-.ice-gl.open .ice-gl-body { display: block; }
-.ice-gl-sect { color: #8b949e; font-weight: 700; padding: 5px 0 2px; }
-.ice-gl-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; white-space: nowrap; }
-.ice-gl-name2 { min-width: 64px; color: #8b949e; }
-.ice-gl-bar { flex: 1; height: 5px; border-radius: 3px; background: #21262d; overflow: hidden; }
-.ice-gl-bar > i { display: block; height: 100%; background: #58a6ff; border-radius: 3px; }
-.ice-gl-stat { color: #e6edf3; margin-left: auto; }
-.ice-gl-dim { color: #8b949e; }
-.ice-gl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 10px; padding: 2px 0; }
-.ice-gl-cell b { display: block; color: #e6edf3; font-weight: 700; }
-.ice-gl-cell span { color: #8b949e; }
-.ice-gl-seg { display: flex; height: 7px; border-radius: 3px; overflow: hidden; background: #21262d; margin: 3px 0 2px; }
-.ice-gl-seg > i { display: block; height: 100%; }
-.ice-gl-legend { color: #8b949e; padding-bottom: 2px; }
+.ice-gpu { background: rgba(13,17,23,.96); color: #e6edf3; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; user-select: none; }
+.ice-gpu * { box-sizing: border-box; }
+.ice-gpu-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; }
+.ice-gpu-name { font-weight: 700; color: #56d4dd; }
+.ice-gpu-span { font-weight: 700; color: #a371f7; min-width: 64px; }
+.ice-gpu-tail { color: #8b949e; min-width: 118px; }
+.ice-gpu-caret { color: #8b949e; margin-left: auto; }
+.ice-gpu-body { display: none; border-top: 1px solid #21262d; padding: 5px 9px 8px; }
+.ice-gpu.open .ice-gpu-body { display: block; }
+.ice-gpu-warn { display: none; color: #ffa657; padding: 4px 0 2px; white-space: normal; }
+.ice-gpu-warn.on { display: block; }
+.ice-gpu-sect { color: #8b949e; font-weight: 700; padding: 5px 0 2px; }
+.ice-gpu-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; white-space: nowrap; }
+.ice-gpu-label { min-width: 84px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: #8b949e; }
+.ice-gpu-bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #21262d; overflow: hidden; }
+.ice-gpu-bar > i { position: absolute; top: 0; bottom: 0; left: 0; display: block; background: #58a6ff; border-radius: 3px; }
+.ice-gpu-stat { color: #e6edf3; margin-left: auto; min-width: 64px; text-align: right; }
+.ice-gpu-dim { color: #8b949e; }
+.ice-gpu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 10px; padding: 2px 0; }
+.ice-gpu-cell b { display: block; color: #e6edf3; font-weight: 700; }
+.ice-gpu-cell span { color: #8b949e; }
+.ice-gpu-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; color: #8b949e; }
+.ice-gpu-btn { background: #21262d; border: 1px solid #30363d; border-radius: 6px; color: #e6edf3; cursor: pointer; font: inherit; padding: 2px 8px; }
+.ice-gpu-btn:hover { border-color: #58a6ff; }
+.ice-gpu-btn:disabled { color: #8b949e; cursor: default; }
 `;
-var PHASE_COLORS = {
-  hot: "#ff7b72",
-  waking: "#58a6ff",
-  warm: "#3fb950",
-  cold: "#8b949e",
-  dormant: "#484f58"
-};
-var SPARK_W = 132;
-var SPARK_H = 26;
+var SPARK_W = 120;
+var SPARK_H = 22;
 var SPARK_SAMPLES = SPARK_W / 2;
 function injectStyle2(doc) {
   if (doc.getElementById(STYLE_ID2) !== null) return;
@@ -241,114 +233,132 @@ function injectStyle2(doc) {
   el.textContent = CSS2;
   doc.head.appendChild(el);
 }
-var fmtInt = (n) => n.toLocaleString();
-var fmtK = (n) => n >= 1e6 ? `${(n / 1e6).toFixed(2)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
-var fmtMs = (ms) => `${ms.toFixed(2)}ms`;
-var fmtMB = (b) => `${(b / 1048576).toFixed(0)}MB`;
-function createGlPanel(opts = {}) {
+var fmtMs = (ms) => ms === null || ms === void 0 ? "\u2013" : ms >= 10 ? `${ms.toFixed(1)} ms` : `${ms.toFixed(2)} ms`;
+var fmtBytes = (b) => b >= 1048576 ? `${(b / 1048576).toFixed(1)} MB` : b >= 1024 ? `${(b / 1024).toFixed(1)} KB` : `${b} B`;
+var fmtK = (n) => n >= 1e6 ? `${(n / 1e6).toFixed(2)}M` : n >= 1e4 ? `${(n / 1e3).toFixed(1)}k` : String(n);
+function createGpuPanel(opts = {}) {
   const container = opts.container ?? document.body;
   const doc = container.ownerDocument;
   const budgetMs = opts.budgetMs ?? 16.7;
   injectStyle2(doc);
   const root = doc.createElement("div");
-  root.className = `ice-gl ${opts.corner ?? "bl"}${opts.expanded === true ? " open" : ""}`;
-  const head = doc.createElement("div");
-  head.className = "ice-gl-head";
-  const name = doc.createElement("span");
-  name.className = "ice-gl-name";
-  name.textContent = "ice gl";
-  const fpsEl = doc.createElement("span");
-  fpsEl.className = "ice-gl-fps";
-  const gpuEl = doc.createElement("span");
-  gpuEl.className = "ice-gl-gpu";
+  root.className = `ice-gpu${opts.expanded === false ? "" : " open"}`;
+  const make = (tag, cls, text) => {
+    const el = doc.createElement(tag);
+    el.className = cls;
+    if (text !== void 0) el.textContent = text;
+    return el;
+  };
+  const head = make("div", "ice-gpu-head");
+  const spanEl = make("span", "ice-gpu-span", "\u2013");
+  const tailEl = make("span", "ice-gpu-tail", "no frame yet");
   const spark = doc.createElement("canvas");
   spark.width = SPARK_W;
   spark.height = SPARK_H;
   spark.style.display = "block";
-  const caret = doc.createElement("span");
-  caret.className = "ice-gl-caret";
-  caret.textContent = "\u25BE";
-  head.append(name, fpsEl, gpuEl, spark, caret);
+  head.append(make("span", "ice-gpu-name", "gpu"), spanEl, tailEl, spark, make("span", "ice-gpu-caret", "\u25BE"));
   head.addEventListener("click", () => root.classList.toggle("open"));
-  const body = doc.createElement("div");
-  body.className = "ice-gl-body";
-  root.append(head, body);
-  container.appendChild(root);
+  const body = make("div", "ice-gpu-body");
+  const hint = make("div", "ice-gpu-row ice-gpu-dim", "waiting for a frame \u2014 at rest the desk draws nothing (idle-zero); move the camera");
+  const warn = make("div", "ice-gpu-warn");
+  body.append(hint, warn);
   const sect = (label) => {
-    const s = doc.createElement("div");
-    s.className = "ice-gl-sect";
-    s.textContent = label;
+    const s = make("div", "ice-gpu-sect", label);
     body.appendChild(s);
+    return s;
   };
-  const bar = (label) => {
-    const row = doc.createElement("div");
-    row.className = "ice-gl-row";
-    const n = doc.createElement("span");
-    n.className = "ice-gl-name2";
-    n.textContent = label;
-    const b = doc.createElement("div");
-    b.className = "ice-gl-bar";
+  const bar = (label, into = body) => {
+    const row = make("div", "ice-gpu-row");
+    const l = make("span", "ice-gpu-label", label);
+    const b = make("div", "ice-gpu-bar");
     const fill = doc.createElement("i");
     b.appendChild(fill);
-    const stat = doc.createElement("span");
-    stat.className = "ice-gl-stat";
-    row.append(n, b, stat);
-    body.appendChild(row);
-    return { fill, stat };
+    const stat = make("span", "ice-gpu-stat");
+    row.append(l, b, stat);
+    into.appendChild(row);
+    return { fill, stat, label: l };
   };
-  const textRow = () => {
-    const row = doc.createElement("div");
-    row.className = "ice-gl-row";
-    body.appendChild(row);
-    return row;
+  const list = () => {
+    const el = doc.createElement("div");
+    body.appendChild(el);
+    return el;
   };
   sect("frame");
-  const cpuBar = bar("cpu");
-  const gpuBar = bar("gpu");
-  sect("render");
-  const grid = doc.createElement("div");
-  grid.className = "ice-gl-grid";
+  const spanBar = bar("gpu span");
+  const busyBar = bar("gpu busy");
+  const encodeBar = bar("encode");
+  const flushBar = bar("desk flush");
+  const passesHead = sect("passes");
+  const passesEl = list();
+  sect("calls");
+  const grid = make("div", "ice-gpu-grid");
   body.appendChild(grid);
   const cell = (label) => {
-    const c = doc.createElement("div");
-    c.className = "ice-gl-cell";
+    const c = make("div", "ice-gpu-cell");
     const v = doc.createElement("b");
-    const l = doc.createElement("span");
-    l.textContent = label;
-    c.append(v, l);
+    c.append(v, make("span", "", label));
     grid.appendChild(c);
     return v;
   };
-  const callsEl = cell("calls");
-  const trisEl = cell("triangles");
-  const ptsEl = cell("pts+lines");
-  const progsEl = cell("programs");
-  const geosEl = cell("geometries");
-  const texsEl = cell("textures");
-  sect("virtual textures");
-  const rtRow = textRow();
-  const fboBar = bar("fbo mem");
-  const seg = doc.createElement("div");
-  seg.className = "ice-gl-seg";
-  body.appendChild(seg);
-  const legend = doc.createElement("div");
-  legend.className = "ice-gl-legend";
-  body.appendChild(legend);
-  const paintRow = textRow();
-  sect("lod");
-  const lodRow = textRow();
-  const bandsRow = textRow();
-  sect("widgets");
-  const cullBar = bar("visible");
+  const cells = {
+    draws: cell("draws"),
+    instances: cell("instances"),
+    pipelines: cell("pipelines"),
+    bindGroups: cell("bind groups"),
+    passes: cell("passes"),
+    submits: cell("submits"),
+    writes: cell("writes"),
+    uploadBytes: cell("uploaded")
+  };
+  sect("by kind");
+  const kindsEl = list();
+  sect("uploads");
+  const uploadsEl = list();
+  const memoryHead = sect("memory");
+  const memoryEl = list();
+  const foot = make("div", "ice-gpu-foot");
+  const footText = make("span", "ice-gpu-dim");
+  foot.appendChild(footText);
+  body.appendChild(foot);
+  if (opts.capture !== void 0) {
+    const n = opts.captureFrames ?? 120;
+    const capture = opts.capture;
+    const btn = make("button", "ice-gpu-btn", `capture ${n} frames`);
+    btn.type = "button";
+    btn.addEventListener("click", () => {
+      btn.disabled = true;
+      btn.textContent = "capturing\u2026";
+      capture(n).then(
+        (trace) => {
+          save(doc, trace);
+          btn.textContent = `saved \u2014 capture ${n} frames`;
+        },
+        (e) => {
+          btn.textContent = `capture failed: ${e instanceof Error ? e.message : String(e)}`;
+        }
+      ).finally(() => {
+        btn.disabled = false;
+      });
+    });
+    foot.prepend(btn);
+  }
+  root.append(head, body);
+  container.appendChild(root);
   const samples = [];
   let latest;
-  let maxCpu = 0;
-  let maxGpu = 0;
-  let evictedTotal = 0;
-  let lastRender = 0;
+  let timed;
+  let stats;
+  let lastRender = Number.NEGATIVE_INFINITY;
+  let trailing;
   let disposed = false;
+  const setBar = (b, ms, text, over = budgetMs) => {
+    b.fill.style.width = `${ms === null || ms === void 0 ? 0 : Math.min(100, ms / budgetMs * 100)}%`;
+    b.fill.style.background = ms !== null && ms !== void 0 && ms > over ? "#ff7b72" : "#58a6ff";
+    b.stat.textContent = text;
+  };
+  const rolling = (r) => r === null || r === void 0 ? "\u2013" : `${fmtMs(r.p50)} \xB7 p95 ${fmtMs(r.p95)} \xB7 max ${fmtMs(r.max)}`;
   const drawSpark = () => {
-    const ctx = spark.getContext("2d");
+    const ctx = spark.getContext?.("2d") ?? null;
     if (ctx === null) return;
     ctx.clearRect(0, 0, SPARK_W, SPARK_H);
     const top = budgetMs * 2;
@@ -361,78 +371,108 @@ function createGlPanel(opts = {}) {
     ctx.fillStyle = "rgba(139,148,158,.55)";
     ctx.fillRect(0, SPARK_H / 2, SPARK_W, 1);
   };
+  const rows = (into, items) => {
+    into.textContent = "";
+    for (const [label, text, share] of items) {
+      const b = bar(label, into);
+      b.fill.style.width = `${Math.max(0, Math.min(100, share * 100))}%`;
+      b.stat.textContent = text;
+      b.label.title = label;
+    }
+    if (items.length === 0) into.appendChild(make("div", "ice-gpu-row ice-gpu-dim", "none"));
+  };
   const render = () => {
-    const s = latest;
-    if (s === void 0) return;
-    fpsEl.textContent = s.fps > 0 ? `${Math.round(s.fps)} fps` : "\u2013 fps";
-    gpuEl.textContent = s.gpuMs > 0 ? `gpu ${fmtMs(s.gpuMs)}` : "gpu \u2013";
+    const f = latest;
+    if (f === void 0) return;
+    hint.remove();
+    const st = stats;
+    spanEl.textContent = st?.span ? fmtMs(st.span.p50) : fmtMs(f.span);
+    tailEl.textContent = st?.span ? `p95 ${fmtMs(st.span.p95)} \xB7 max ${fmtMs(st.span.max)}` : f.span === null ? "untimed" : "";
     drawSpark();
+    const q = st?.quantised ?? f.quantised;
+    warn.classList.toggle("on", q === true);
+    warn.textContent = q === true ? `\u26A0 timestamps quantised to 100 \xB5s \u2014 launch Chrome with ${st?.unquantise ?? "--disable-dawn-features=timestamp_quantization"}` : "";
     if (!root.classList.contains("open")) return;
-    cpuBar.fill.style.width = `${Math.min(100, s.cpuMs / budgetMs * 100)}%`;
-    cpuBar.stat.textContent = `${fmtMs(s.cpuMs)} \xB7 max ${fmtMs(maxCpu)}`;
-    gpuBar.fill.style.width = `${Math.min(100, s.gpuMs / budgetMs * 100)}%`;
-    gpuBar.fill.style.background = s.gpuMs > budgetMs ? "#ff7b72" : "#58a6ff";
-    gpuBar.stat.textContent = `${fmtMs(s.gpuMs)} \xB7 max ${fmtMs(maxGpu)}`;
-    callsEl.textContent = fmtInt(s.drawCalls);
-    trisEl.textContent = fmtK(s.triangles);
-    ptsEl.textContent = fmtK(s.points + s.lines);
-    progsEl.textContent = fmtInt(s.programs);
-    geosEl.textContent = fmtInt(s.geometries);
-    texsEl.textContent = fmtInt(s.textures);
-    rtRow.textContent = `${s.renderTargets} targets \xB7 ${s.renderMegaPixels.toFixed(1)} MP total`;
-    fboBar.fill.style.width = `${Math.min(100, s.fboBytes / s.fboBudgetBytes * 100)}%`;
-    fboBar.fill.style.background = s.fboBytes > s.fboBudgetBytes * 0.85 ? "#ffa657" : "#58a6ff";
-    fboBar.stat.textContent = `${fmtMB(s.fboBytes)} / ${fmtMB(s.fboBudgetBytes)}`;
-    seg.textContent = "";
-    const phases = [
-      ["hot", s.islands.hot],
-      ["waking", s.islands.waking],
-      ["warm", s.islands.warm],
-      ["cold", s.islands.cold],
-      ["dormant", s.islands.dormant]
-    ];
-    const denom = Math.max(1, s.islands.total);
-    const legendParts = [];
-    for (const [phase, count] of phases) {
-      if (count === 0) continue;
-      const i = doc.createElement("i");
-      i.style.width = `${count / denom * 100}%`;
-      i.style.background = PHASE_COLORS[phase] ?? "#8b949e";
-      seg.appendChild(i);
-      legendParts.push(`${count} ${phase}`);
+    setBar(spanBar, st?.span?.p50 ?? f.span, rolling(st?.span));
+    setBar(busyBar, st?.busy?.p50 ?? f.busy, rolling(st?.busy));
+    setBar(encodeBar, st?.encode?.p50 ?? f.cpu.encode, rolling(st?.encode));
+    setBar(flushBar, st?.flush?.p50 ?? f.cpu.flush, rolling(st?.flush));
+    const t = timed;
+    const span = t?.span ?? null;
+    passesHead.textContent = t === void 0 || span === null ? "passes \u2014 untimed (no timestamp-query, or the readback ring was full)" : `passes \xB7 frame ${t.frame} \xB7 span ${fmtMs(span)} \xB7 busy ${fmtMs(t.busy)} \xB7 sum ${fmtMs(t.sum)}`;
+    passesEl.textContent = "";
+    if (t !== void 0 && span !== null && span > 0) {
+      for (const p of t.passes) {
+        const b = bar(p.label, passesEl);
+        b.fill.style.left = `${p.begin / span * 100}%`;
+        b.fill.style.width = `${Math.max(0.5, (p.end - p.begin) / span * 100)}%`;
+        b.stat.textContent = fmtMs(p.end - p.begin);
+        b.label.title = `${p.label}: ${p.begin.toFixed(3)} \u2192 ${p.end.toFixed(3)} ms`;
+      }
     }
-    legend.textContent = legendParts.length > 0 ? legendParts.join(" \xB7 ") : "no islands";
-    paintRow.textContent = `repainted ${s.repainted}/frame \xB7 pending ${s.pendingPaints} \xB7 evicted \u03A3${evictedTotal}`;
-    lodRow.textContent = `zoom ${(s.zoom * 100).toFixed(0)}% \u2192 band \xD7${s.band} \u2192 paint dpr ${s.effectiveDpr.toFixed(2)}`;
-    const bands = Object.entries(s.bandHistogram).sort((a, b) => a[0].localeCompare(b[0]));
-    bandsRow.textContent = bands.length > 0 ? `targets by band: ${bands.map(([k, v]) => `${k}: ${v}`).join(" \xB7 ")}` : "no live targets";
-    const pop = Math.max(1, s.visibleWidgets + s.culledWidgets);
-    cullBar.fill.style.width = `${s.visibleWidgets / pop * 100}%`;
-    cullBar.fill.style.background = "#3fb950";
-    cullBar.stat.textContent = `${s.visibleWidgets} visible \xB7 ${s.culledWidgets} culled`;
+    const c = f.counts;
+    cells.draws.textContent = fmtK(c.draws);
+    cells.instances.textContent = fmtK(c.instances);
+    cells.pipelines.textContent = fmtK(c.pipelines);
+    cells.bindGroups.textContent = fmtK(c.bindGroups);
+    cells.passes.textContent = fmtK(c.passes);
+    cells.submits.textContent = fmtK(c.submits);
+    cells.writes.textContent = fmtK(c.writes);
+    cells.uploadBytes.textContent = fmtBytes(c.uploadBytes);
+    const kinds = Object.entries(f.byKind).sort((a, b) => b[1].draws - a[1].draws);
+    const most = Math.max(1, ...kinds.map(([, k]) => k.draws));
+    rows(kindsEl, kinds.map(([name, k]) => [name, `${k.draws} draw${k.draws === 1 ? "" : "s"} \xB7 ${fmtK(k.instances)} inst`, k.draws / most]));
+    const ups = Object.entries(f.uploads).sort((a, b) => b[1].bytes - a[1].bytes).slice(0, 6);
+    const upTotal = Math.max(1, c.uploadBytes);
+    rows(uploadsEl, ups.map(([name, u]) => [name, `${fmtBytes(u.bytes)} \xB7 ${u.writes}\xD7`, u.bytes / upTotal]));
+    const m = f.memory;
+    memoryHead.textContent = m === null ? "memory \u2014 no ledger (the host keeps none)" : `memory \xB7 ${fmtBytes(m.total)} live \xB7 textures ${fmtBytes(m.textures)} \xB7 buffers ${fmtBytes(m.buffers)}`;
+    rows(memoryEl, m === null ? [] : Object.entries(m.byLabel).sort((a, b) => b[1].bytes - a[1].bytes).slice(0, 8).map(([name, r]) => [name, fmtBytes(r.bytes), r.bytes / Math.max(1, m.total)]));
+    footText.textContent = `${st?.frames ?? 1} frames in the window${st !== void 0 && st.dropped > 0 ? ` \xB7 ${st.dropped} dropped (the readback ring was full)` : ""}`;
   };
   return {
-    push(s) {
+    el: root,
+    push(frame, s) {
       if (disposed) return;
-      latest = s;
-      maxCpu = Math.max(maxCpu, s.cpuMs);
-      maxGpu = Math.max(maxGpu, s.gpuMs);
-      evictedTotal += s.evicted;
-      samples.push(s.gpuMs > 0 ? s.gpuMs : s.cpuMs);
-      if (samples.length > SPARK_SAMPLES) samples.splice(0, samples.length - SPARK_SAMPLES);
+      latest = frame;
+      if (frame.span !== null) {
+        timed = frame;
+        samples.push(frame.span);
+        if (samples.length > SPARK_SAMPLES) samples.splice(0, samples.length - SPARK_SAMPLES);
+      }
+      if (s !== void 0) stats = s;
       const now = performance.now();
       if (now - lastRender >= 120) {
         lastRender = now;
         render();
+      } else if (trailing === void 0) {
+        trailing = setTimeout(() => {
+          trailing = void 0;
+          lastRender = performance.now();
+          if (!disposed) render();
+        }, 120 - (now - lastRender));
       }
     },
     dispose() {
       if (disposed) return;
       disposed = true;
+      if (trailing !== void 0) clearTimeout(trailing);
       root.remove();
     }
   };
 }
+function save(doc, trace) {
+  const view = doc.defaultView;
+  if (view === null || typeof view.URL?.createObjectURL !== "function") return;
+  const url = view.URL.createObjectURL(new view.Blob([JSON.stringify(trace)], { type: "application/json" }));
+  const a = doc.createElement("a");
+  a.href = url;
+  a.download = `desk-gpu-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.json`;
+  doc.body.appendChild(a);
+  a.click();
+  a.remove();
+  view.setTimeout(() => view.URL.revokeObjectURL(url), 1e3);
+}
 
 // ../devtools/src/attach.ts
 var COLOR = {
@@ -512,23 +552,25 @@ function attachDevtools(engine, opts = {}) {
       }
     });
   }
-  let glPanel = null;
   let detached = false;
+  let gpu = null;
+  const mountGpu = () => {
+    gpu ??= createGpuPanel({ ...typeof opts.gpu === "object" ? opts.gpu : {}, ...mountIn("gpu") });
+    return gpu;
+  };
+  if (typeof opts.gpu === "object") mountGpu();
   return {
     observer,
     profiler,
     lane(name, ms) {
       profiler?.lane(name, ms);
     },
-    glStats(stats) {
-      if (detached || opts.glPanel === false) return;
-      if (glPanel === null) {
-        glPanel = createGlPanel({
-          ...typeof opts.glPanel === "object" ? opts.glPanel : {},
-          ...mountIn("gl")
-        });
-      }
-      glPanel.push(stats);
+    gpuFrame(frame, stats) {
+      if (detached || opts.gpu === false) return;
+      mountGpu().push(frame, stats);
+      if (frame.cpu.flush !== null) profiler?.lane("desk flush", frame.cpu.flush);
+      profiler?.lane("encode", frame.cpu.encode);
+      if (frame.span !== null) profiler?.lane("gpu", frame.span);
     },
     detach() {
       if (detached) return;
@@ -536,8 +578,8 @@ function attachDevtools(engine, opts = {}) {
       removePublish?.();
       observer?.dispose();
       profiler?.dispose();
-      glPanel?.dispose();
-      glPanel = null;
+      gpu?.dispose();
+      gpu = null;
       dock?.dispose();
       dock = null;
     }
@@ -550,7 +592,9 @@ export {
   DEVTOOLS_VERSION,
   attachDevtools,
   createDock,
-  createGlPanel,
-  engineDescribe
+  createGpuPanel,
+  engineDescribe,
+  fmtBytes,
+  fmtMs
 };
 //# sourceMappingURL=devtools.js.map