omkit 0.8.20 → 0.8.21

package/dist/output/writers/report/report.js

@@ -34,14 +34,16 @@
     root: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v3M12 19v3M2 12h3M19 12h3",
     chat: "M4 5h16v11H9l-5 4z",
     flask: "M9 3h6M10 3v6l-5 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V3",
-    braces: "M8 4c-2 0-3 1-3 3v2c0 1-1 2-2 3 1 1 2 2 2 3v2c0 2 1 3 3 3M16 4c2 0 3 1 3 3v2c0 1 1 2 2 3-1 1-2 2-2 3v2c0 2-1 3-3 3",
+    braces:
+      "M8 4c-2 0-3 1-3 3v2c0 1-1 2-2 3 1 1 2 2 2 3v2c0 2 1 3 3 3M16 4c2 0 3 1 3 3v2c0 1 1 2 2 3-1 1-2 2-2 3v2c0 2-1 3-3 3",
     image: "M4 5h16v14H4zM4 16l5-5 4 4 2-2 5 5M15 9h.01",
     sun: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4",
     download: "M12 4v11M7 10l5 5 5-5M5 20h14",
     copy: "M9 9h11v11H9zM5 15V4h11",
     stop: "M6 6h12v12H6z",
     info: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v5M12 8h.01",
-    locate: "M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM12 2v3M12 19v3M2 12h3M19 12h3M12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z",
+    locate:
+      "M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM12 2v3M12 19v3M2 12h3M19 12h3M12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z",
     code: "M8 7l-5 5 5 5M16 7l5 5-5 5",
     external: "M14 4h6v6M20 4l-9 9M18 14v6H4V6h6",
   };
@@ -83,7 +85,11 @@
     return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
   };
   const fmtSize = (b) =>
-    b < 1024 ? `${b} B` : b < 1048576 ? `${Math.round(b / 1024)} KB` : `${(b / 1048576).toFixed(1)} MB`;
+    b < 1024
+      ? `${b} B`
+      : b < 1048576
+        ? `${Math.round(b / 1024)} KB`
+        : `${(b / 1048576).toFixed(1)} MB`;
   const fmtTick = (ms) => {
     if (ms === 0) return "0s";
     const a = Math.abs(ms);
@@ -92,9 +98,20 @@
     return `${Math.floor(ms / 60000)}m${pad2(Math.round((ms % 60000) / 1000))}s`;
   };
   const esc = (s) =>
-    String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+    String(s).replace(
+      /[&<>"']/g,
+      (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
+    );
   const basename = (p) => String(p).split(/[\\/]/).pop();
-  const fileUrl = (p) => "file:///" + String(p).replace(/\\/g, "/").replace(/^\/+/, "").split("/").map(encodeURIComponent).join("/").replace(/^([A-Za-z])%3A/, "$1:");
+  const fileUrl = (p) =>
+    "file:///" +
+    String(p)
+      .replace(/\\/g, "/")
+      .replace(/^\/+/, "")
+      .split("/")
+      .map(encodeURIComponent)
+      .join("/")
+      .replace(/^([A-Za-z])%3A/, "$1:");
   const editorUrl = (site) => {
     const m = /^(.*):(\d+)$/.exec(site);
     const file = (m ? m[1] : site).replace(/\\/g, "/");
@@ -127,7 +144,11 @@
         depth,
         branch: depth === 0 ? -1 : b,
         children: [],
-        status: ["ok", "failed", "cancelled"].includes(v.status) ? v.status : v.endedAt ? v.status : "running",
+        status: ["ok", "failed", "cancelled"].includes(v.status)
+          ? v.status
+          : v.endedAt
+            ? v.status
+            : "running",
         startAbs: v.startedAt || t0,
         endAbs: v.endedAt || 0,
         entries: [],
@@ -153,7 +174,14 @@
     for (const e of data.entries) {
       if (e.level === "child" || e.level === "tag") continue;
       const kind = kindOf(e);
-      const item = { idx: items.length, e, kind, t: e.ts - t0, label: labelOf(e, kind), node: byId.get(e.nodeId) || null };
+      const item = {
+        idx: items.length,
+        e,
+        kind,
+        t: e.ts - t0,
+        label: labelOf(e, kind),
+        node: byId.get(e.nodeId) || null,
+      };
       items.push(item);
       if (item.node) {
         item.node.entries.push(item);
@@ -174,12 +202,20 @@
       });
     }
     for (const s of data.snapshots) {
-      gallery.push({ type: "snapshot", s, name: s.name, t: s.ts - t0, node: byId.get(s.nodeId) || null, image: false });
+      gallery.push({
+        type: "snapshot",
+        s,
+        name: s.name,
+        t: s.ts - t0,
+        node: byId.get(s.nodeId) || null,
+        image: false,
+      });
     }
     gallery.sort((a, b) => (a.t ?? Infinity) - (b.t ?? Infinity));
     // Let a mark find its gallery item (snapshot by file, artifact by file).
     const galleryByFile = new Map();
-    for (const g of gallery) galleryByFile.set(String(g.type === "file" ? g.f.file : g.s.file).toLowerCase(), g);
+    for (const g of gallery)
+      galleryByFile.set(String(g.type === "file" ? g.f.file : g.s.file).toLowerCase(), g);
     for (const it of items) {
       if (it.kind === "snapshot" || it.kind === "artifact") {
         const i = it.e.message.lastIndexOf(" → ");
@@ -193,12 +229,31 @@
       const l = it.kind === "link" && it.node && it.e.link;
       const from = l && byId.get(l.from);
       if (!from) continue;
-      links.push({ item: it, op: l.op, from, to: it.node, t: it.t, t0: it.t - (l.ms || 0), key: l.key || "", ms: l.ms, outcome: l.outcome || "", site: l.site || "" });
+      links.push({
+        item: it,
+        op: l.op,
+        from,
+        to: it.node,
+        t: it.t,
+        t0: it.t - (l.ms || 0),
+        key: l.key || "",
+        ms: l.ms,
+        outcome: l.outcome || "",
+        site: l.site || "",
+      });
     }
     // …drawn as a point on the row of the action that made it: what it did, when it did it
     for (const l of links) {
       l.label = linkLabel(l);
-      l.from.marks.push({ idx: l.item.idx, e: l.item.e, kind: "link", t: l.t, label: l.label, node: l.from, link: l });
+      l.from.marks.push({
+        idx: l.item.idx,
+        e: l.item.e,
+        kind: "link",
+        t: l.t,
+        label: l.label,
+        node: l.from,
+        link: l,
+      });
     }
     for (const l of links) l.from.marks.sort((a, b) => a.t - b.t);
 
@@ -253,9 +308,23 @@
     const open = new Map(); // `${nodeId}\0${source}` → the output block still accepting lines
     for (const it of items) {
       if (it.kind === "fail") {
-        out.push({ type: "assert", node: it.node, t: it.t, title: it.label, text: it.e.message, items: [it] });
+        out.push({
+          type: "assert",
+          node: it.node,
+          t: it.t,
+          title: it.label,
+          text: it.e.message,
+          items: [it],
+        });
       } else if (it.kind === "error" && it.e.source === "error") {
-        out.push({ type: "failure", node: it.node, t: it.t, title: firstLine(it.e.message), text: it.e.message, items: [it] });
+        out.push({
+          type: "failure",
+          node: it.node,
+          t: it.t,
+          title: firstLine(it.e.message),
+          text: it.e.message,
+          items: [it],
+        });
       } else if (it.kind === "error") {
         const key = `${it.e.nodeId}\0${it.e.source}`;
         const block = open.get(key);
@@ -266,18 +335,38 @@
           block.text = block.lines.join("\n");
           continue;
         }
-        const fresh = { type: "output", node: it.node, t: it.t, tEnd: it.t, source: it.e.source, title: firstLine(it.e.message), lines: [it.e.message], text: it.e.message, items: [it] };
+        const fresh = {
+          type: "output",
+          node: it.node,
+          t: it.t,
+          tEnd: it.t,
+          source: it.e.source,
+          title: firstLine(it.e.message),
+          lines: [it.e.message],
+          text: it.e.message,
+          items: [it],
+        };
         open.set(key, fresh);
         out.push(fresh);
       }
     }
     // a failure the verdict holds but no node logged (e.g. the body threw outside any action)
     for (const f of run.failures || []) {
-      const n = nodes.find((x) => x.v.path === f.action || x.id === f.action || x.name === f.action) || null;
+      const n =
+        nodes.find((x) => x.v.path === f.action || x.id === f.action || x.name === f.action) ||
+        null;
       if (out.some((e) => e.type === "failure" && e.node === n)) continue;
       // a failed assert is already its own entry; the verdict just lists it again as a fault
-      if (out.some((e) => e.type === "assert" && e.node === n && String(f.error).includes(e.title))) continue;
-      out.push({ type: "failure", node: n, t: n ? n.end : span, title: firstLine(f.error), text: f.error, items: [] });
+      if (out.some((e) => e.type === "assert" && e.node === n && String(f.error).includes(e.title)))
+        continue;
+      out.push({
+        type: "failure",
+        node: n,
+        t: n ? n.end : span,
+        title: firstLine(f.error),
+        text: f.error,
+        items: [],
+      });
     }
     out.sort((a, b) => a.t - b.t);
     out.forEach((e, i) => (e.idx = i));
@@ -340,7 +429,8 @@
       details: true,
     };
     // Deep, wide runs start collapsed below the second level so the first screen stays readable.
-    if (model.nodes.length > 60) for (const n of model.nodes) if (n.depth >= 2 && n.children.length) state.collapsed.add(n.id);
+    if (model.nodes.length > 60)
+      for (const n of model.nodes) if (n.depth >= 2 && n.children.length) state.collapsed.add(n.id);
 
     app.innerHTML = shellHtml(model);
     const el = {
@@ -368,9 +458,9 @@
     const xz = () => state.zoom.rescaleX(baseX);
 
     // ── header controls ──
-    app.querySelectorAll("[data-view]").forEach((b) =>
-      b.addEventListener("click", () => setView(b.dataset.view))
-    );
+    app
+      .querySelectorAll("[data-view]")
+      .forEach((b) => b.addEventListener("click", () => setView(b.dataset.view)));
     app.querySelector("#zin").addEventListener("click", () => zoomBy(1.6));
     app.querySelector("#zout").addEventListener("click", () => zoomBy(1 / 1.6));
     app.querySelector("#fit").addEventListener("click", fit);
@@ -397,17 +487,26 @@
     };
     legendBtn.addEventListener("click", () => toggleLegend(legend.hidden));
     document.addEventListener("mousedown", (e) => {
-      if (!legend.hidden && !legend.contains(e.target) && !legendBtn.contains(e.target)) toggleLegend(false);
+      if (!legend.hidden && !legend.contains(e.target) && !legendBtn.contains(e.target))
+        toggleLegend(false);
     });
-    document.addEventListener("keydown", (e) => e.key === "Escape" && !legend.hidden && toggleLegend(false));
+    document.addEventListener(
+      "keydown",
+      (e) => e.key === "Escape" && !legend.hidden && toggleLegend(false)
+    );
 
     // ── zoom behaviours ──
     const chartZoom = d3
       .zoom()
       .scaleExtent([1, 5000])
-      .filter((e) => (e.type === "wheel" ? e.ctrlKey || e.metaKey : !e.button && e.type !== "dblclick"))
+      .filter((e) =>
+        e.type === "wheel" ? e.ctrlKey || e.metaKey : !e.button && e.type !== "dblclick"
+      )
       .on("zoom", (e) => onZoom(e.transform));
-    const flowZoom = d3.zoom().scaleExtent([0.1, 4]).on("zoom", (e) => flowG && flowG.attr("transform", e.transform));
+    const flowZoom = d3
+      .zoom()
+      .scaleExtent([0.1, 4])
+      .on("zoom", (e) => flowG && flowG.attr("transform", e.transform));
 
     function activeZoom() {
       return { z: chartZoom, sel: d3.select(el.chart).select("svg") };
@@ -417,7 +516,13 @@
       redrawX();
     }
     function zoomBy(k) {
-      if (state.view === "flow") return d3.select(el.flow).select("svg").transition().duration(200).call(flowZoom.scaleBy, k);
+      if (state.view === "flow")
+        return d3
+          .select(el.flow)
+          .select("svg")
+          .transition()
+          .duration(200)
+          .call(flowZoom.scaleBy, k);
       const { z, sel } = activeZoom();
       const [cx] = state.pin != null ? [xz()(state.pin)] : [W / 2];
       sel.transition().duration(200).call(z.scaleBy, k, [cx, 0]);
@@ -443,13 +548,26 @@
       el.head.style.paddingRight = `${sb}px`;
       W = Math.max(200, el.chart.clientWidth);
       const span = model.span;
-      baseX = d3.scaleLinear().domain([-span * 0.01, span * 1.015]).range([0, W]);
-      chartZoom.translateExtent([[0, -1e6], [W, 1e6]]).extent([[0, 0], [W, 1]]);
+      baseX = d3
+        .scaleLinear()
+        .domain([-span * 0.01, span * 1.015])
+        .range([0, W]);
+      chartZoom
+        .translateExtent([
+          [0, -1e6],
+          [W, 1e6],
+        ])
+        .extent([
+          [0, 0],
+          [W, 1],
+        ]);
     }
 
     function setView(v) {
       state.view = v;
-      app.querySelectorAll("[data-view]").forEach((b) => b.classList.toggle("active", b.dataset.view === v));
+      app
+        .querySelectorAll("[data-view]")
+        .forEach((b) => b.classList.toggle("active", b.dataset.view === v));
       el.body.hidden = v !== "timeline";
       el.head.hidden = v === "flow";
       el.timeline.classList.toggle("is-flow", v === "flow");
@@ -498,7 +616,9 @@
           <span class="icon" style="color:${color};background:${alpha(color, 0.16)}">${svgIcon(iconOf(n))}</span>
           <span class="lines">
             <span class="l1"><span class="label">${labelHtml(n)}</span>${
-              model.errorsBy.get(n) ? `<span class="errbadge" title="${model.errorsBy.get(n)} error${model.errorsBy.get(n) > 1 ? "s" : ""}">${model.errorsBy.get(n)}</span>` : ""
+              model.errorsBy.get(n)
+                ? `<span class="errbadge" title="${model.errorsBy.get(n)} error${model.errorsBy.get(n) > 1 ? "s" : ""}">${model.errorsBy.get(n)}</span>`
+                : ""
             }</span>
             <span class="l2">${tags}<span class="meta"><span class="st"><span class="dot ${n.status}"></span>${esc(n.status)}</span><span class="sep">·</span><span class="du">${fmtDur(n.duration)}</span></span></span>
           </span>
@@ -529,8 +649,19 @@
       chartSvg.append("g").attr("class", "links");
       chartSvg.append("g").attr("class", "xwires");
       chartSvg.append("g").attr("class", "rows");
-      chartSvg.append("line").attr("class", "pin").attr("stroke", css("--accent")).attr("stroke-width", 1.5).attr("y1", 0).attr("y2", H);
-      chartSvg.append("line").attr("class", "cursor").attr("y1", 0).attr("y2", H).attr("visibility", "hidden");
+      chartSvg
+        .append("line")
+        .attr("class", "pin")
+        .attr("stroke", css("--accent"))
+        .attr("stroke-width", 1.5)
+        .attr("y1", 0)
+        .attr("y2", H);
+      chartSvg
+        .append("line")
+        .attr("class", "cursor")
+        .attr("y1", 0)
+        .attr("y2", H)
+        .attr("visibility", "hidden");
       chartSvg.call(chartZoom).call(chartZoom.transform, state.zoom);
       redrawX();
     }
@@ -581,9 +712,18 @@
         .join((enter) => {
           const r = enter.append("g").attr("class", "r");
           // A transparent target spanning the bar *and* its label, so a 2px bar is still hoverable.
-          r.append("rect").attr("class", "hit").attr("y", BAR_Y - 4).attr("height", BAR_H + 8);
-          r.append("rect").attr("class", "bar").attr("rx", 5).attr("y", BAR_Y).attr("height", BAR_H);
-          r.append("text").attr("class", "bar-label").attr("y", BAR_Y + BAR_H / 2 + 4);
+          r.append("rect")
+            .attr("class", "hit")
+            .attr("y", BAR_Y - 4)
+            .attr("height", BAR_H + 8);
+          r.append("rect")
+            .attr("class", "bar")
+            .attr("rx", 5)
+            .attr("y", BAR_Y)
+            .attr("height", BAR_H);
+          r.append("text")
+            .attr("class", "bar-label")
+            .attr("y", BAR_Y + BAR_H / 2 + 4);
           r.append("g").attr("class", "marks");
           const cb = r.append("g").attr("class", "code-btn src");
           cb.append("circle").attr("r", 9);
@@ -617,16 +757,30 @@
         const tw = shown.length * 6.6;
         // an outside label that would run off the chart hangs left of its bar instead
         const flip = outside && x0 + Math.max(w, 3) + 6 + tw > W;
-        const lx = flip ? x0 - 6 : outside ? x0 + Math.max(w, 3) + 6 : Math.min(clipX + 8, x0 + w - 20);
-        t.text(shown).classed("outside", outside).attr("x", lx).attr("text-anchor", flip ? "end" : "start");
+        const lx = flip
+          ? x0 - 6
+          : outside
+            ? x0 + Math.max(w, 3) + 6
+            : Math.min(clipX + 8, x0 + w - 20);
+        t.text(shown)
+          .classed("outside", outside)
+          .attr("x", lx)
+          .attr("text-anchor", flip ? "end" : "start");
         // the hit target covers bar + label, padded so a sliver of a bar is still easy to reach
         const left = Math.min(x0, flip ? lx - tw : lx) - 6;
         const right = Math.max(x0 + Math.max(w, 3), flip ? x0 : lx + tw) + 6;
-        d3.select(this.parentNode).select("rect.hit").attr("x", left).attr("width", Math.max(16, right - left));
+        d3.select(this.parentNode)
+          .select("rect.hit")
+          .attr("x", left)
+          .attr("width", Math.max(16, right - left));
         // the <> sits just past the block (or just before it, when that would leave the chart)
         // …and, for a block spanning the chart, inside it right after its label
         const cx =
-          right + 8 <= W - 10 ? right + 8 : left - 8 >= 10 ? left - 8 : Math.min(W - 12, (flip ? x0 : lx + tw) + 14);
+          right + 8 <= W - 10
+            ? right + 8
+            : left - 8 >= 10
+              ? left - 8
+              : Math.min(W - 12, (flip ? x0 : lx + tw) + 14);
         d3.select(this.parentNode)
           .select("g.code-btn.src")
           .style("display", hasPopup(n) ? null : "none")
@@ -647,7 +801,10 @@
       rowIndex = index;
       drawWires(x);
 
-      chartSvg.select("line.pin").attr("x1", state.pin != null ? x(state.pin) : -10).attr("x2", state.pin != null ? x(state.pin) : -10);
+      chartSvg
+        .select("line.pin")
+        .attr("x1", state.pin != null ? x(state.pin) : -10)
+        .attr("x2", state.pin != null ? x(state.pin) : -10);
       if (app.classList.contains("hl-on") || state.errHl) applyHl();
     }
 
@@ -658,7 +815,12 @@
     function linkTip(l, count) {
       const from = esc(displayName(l.from));
       const to = esc(displayName(l.to));
-      const title = l.op === "once" ? `once · ${esc(l.key)}` : l.op === "cancel" ? "cancel" : `ref · ${esc(l.key)}()`;
+      const title =
+        l.op === "once"
+          ? `once · ${esc(l.key)}`
+          : l.op === "cancel"
+            ? "cancel"
+            : `ref · ${esc(l.key)}()`;
       const what =
         l.op === "once"
           ? `<b>${from}</b> waited for <b>${esc(l.key)}</b> on <b>${to}</b>`
@@ -779,7 +941,8 @@
     }
     function worst(d) {
       const all = [d.m, ...d.more].map((m) => m.kind);
-      for (const k of ["fail", "error", "cancel", "snapshot", "artifact", "pass", "event"]) if (all.includes(k)) return k;
+      for (const k of ["fail", "error", "cancel", "snapshot", "artifact", "pass", "event"])
+        if (all.includes(k)) return k;
       return all[0];
     }
 
@@ -789,14 +952,36 @@
       if (state.view === "flow") return;
       const w = el.chart.clientWidth || W;
       svg.attr("viewBox", null);
-      const g = svg.selectAll("g.axis").data([0]).join("g").attr("class", "axis").attr("transform", "translate(0,33)");
-      g.call(d3.axisTop(x).ticks(Math.max(2, Math.floor(w / 90))).tickFormat(fmtTick).tickSizeOuter(0));
+      const g = svg
+        .selectAll("g.axis")
+        .data([0])
+        .join("g")
+        .attr("class", "axis")
+        .attr("transform", "translate(0,33)");
+      g.call(
+        d3
+          .axisTop(x)
+          .ticks(Math.max(2, Math.floor(w / 90)))
+          .tickFormat(fmtTick)
+          .tickSizeOuter(0)
+      );
       g.selectAll(".tick text").attr("dy", "-0.5em");
-      svg.selectAll("text.cursor-t").data([0]).join("text").attr("class", "cursor-t").attr("y", 12).attr("fill", css("--accent")).attr("font-size", 11);
+      svg
+        .selectAll("text.cursor-t")
+        .data([0])
+        .join("text")
+        .attr("class", "cursor-t")
+        .attr("y", 12)
+        .attr("fill", css("--accent"))
+        .attr("font-size", 11);
     }
     function moveCursor(px) {
       if (chartSvg) {
-        chartSvg.select("line.cursor").attr("visibility", px == null ? "hidden" : "visible").attr("x1", px).attr("x2", px);
+        chartSvg
+          .select("line.cursor")
+          .attr("visibility", px == null ? "hidden" : "visible")
+          .attr("x1", px)
+          .attr("x2", px);
       }
       const label = d3.select(el.axis).select("text.cursor-t");
       if (px == null) label.text("");
@@ -878,13 +1063,25 @@
       for (const l of model.links) {
         const list = shotsBy.get(l.from) || shotsBy.set(l.from, []).get(l.from);
         const prev = list[list.length - 1];
-        if (l.op === "ref" && prev && prev.type === "link" && prev.l.op === "ref" && prev.l.to === l.to && prev.l.key === l.key) {
+        if (
+          l.op === "ref" &&
+          prev &&
+          prev.type === "link" &&
+          prev.l.op === "ref" &&
+          prev.l.to === l.to &&
+          prev.l.key === l.key
+        ) {
           prev.n++;
           continue;
         }
-        list.push({ type: "link", l, n: 1, t: l.t, name: l.label });
+        // Placed by when the wait / call began, and never before its target started. By its end, a
+        // wait ties with the next step's start (the target ends, the next step launches); by its
+        // start alone, it ties with its target's. Clamping to the target, with ties sorting after
+        // a card, puts it right under what it waited on.
+        list.push({ type: "link", l, n: 1, t: l.t, at: Math.max(l.t0, l.to.start), name: l.label });
       }
-      const byTime = (a, b) => (a.t ?? Infinity) - (b.t ?? Infinity);
+      const at = (x) => x.at ?? x.t ?? Infinity; // where a chip sits in its lane
+      const byTime = (a, b) => at(a) - at(b);
       const pos = new Map();
       const lanes = [];
       const chipRows = [];
@@ -906,7 +1103,7 @@
         let si = 0;
         for (const k of kids) {
           const before = [];
-          while (si < shots.length && (shots[si].t ?? Infinity) < k.start) before.push(shots[si++]);
+          while (si < shots.length && at(shots[si]) < k.start) before.push(shots[si++]);
           if (before.length) seq.push({ shots: before });
           seq.push({ node: k });
         }
@@ -1002,7 +1199,10 @@
         .attr("class", "flow-icon")
         .attr("transform", "translate(15,15) scale(0.58)")
         .attr("color", (n) => colorOf(n))
-        .html((n) => `<path d="${ICON[iconOf(n)]}" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>`);
+        .html(
+          (n) =>
+            `<path d="${ICON[iconOf(n)]}" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>`
+        );
       card.each(function (n) {
         const lines = wrapName(boxLabel(n), 31);
         const t = d3.select(this);
@@ -1021,7 +1221,10 @@
           .text(`${nodeKind(n)} · ${n.status} · ${fmtDur(n.duration)} · +${fmtTick(n.start)}`);
         const tags = n.v.tags || [];
         if (!tags.length) return;
-        const row = t.append("g").attr("class", "tchips").attr("transform", `translate(42,${lines.length > 1 ? 56 : 51})`);
+        const row = t
+          .append("g")
+          .attr("class", "tchips")
+          .attr("transform", `translate(42,${lines.length > 1 ? 56 : 51})`);
         const room = CW - 42 - 10;
         let x = 0;
         for (let i = 0; i < tags.length; i++) {
@@ -1100,7 +1303,11 @@
             select(x2.l.from.id, "links");
           })
           .on("mouseenter", (ev, x2) => {
-            showTip(ev, x2.type === "link" ? linkTip(x2.l, x2.n) : galleryTip(x2), x2.type === "link");
+            showTip(
+              ev,
+              x2.type === "link" ? linkTip(x2.l, x2.n) : galleryTip(x2),
+              x2.type === "link"
+            );
             if (x2.type === "link") drawFlowWires(x2);
           })
           .on("mousemove", (ev) => moveTip(ev))
@@ -1109,7 +1316,8 @@
             if (x2.type === "link") drawFlowWires(null);
           });
         shown.forEach((x2, i) => {
-          if (x2.type === "link") linkChips.push({ x2, cx: x + i * (TW + 4) + TW / 2, cy: y + TH / 2 });
+          if (x2.type === "link")
+            linkChips.push({ x2, cx: x + i * (TW + 4) + TW / 2, cy: y + TH / 2 });
         });
         cell
           .append("rect")
@@ -1132,7 +1340,9 @@
           .attr("x", TW / 2)
           .attr("y", TH / 2 + 3.5)
           .attr("text-anchor", "middle")
-          .text((x2) => (x2.type === "link" ? linkGlyph(x2) : x2.type === "snapshot" ? "{ }" : "file"));
+          .text((x2) =>
+            x2.type === "link" ? linkGlyph(x2) : x2.type === "snapshot" ? "{ }" : "file"
+          );
         let end = shown.length * (TW + 4);
         if (shots.length > shown.length) {
           const more = g
@@ -1158,7 +1368,9 @@
             .attr("class", "flow-shot-t")
             .attr("x", end + 2)
             .attr("y", TH / 2 + 4)
-            .text(`${fmtRel(t)} · ${shots.length > 1 ? chipCount(shots) : truncate(shots[0].name, 22)}`);
+            .text(
+              `${fmtRel(t)} · ${shots.length > 1 ? chipCount(shots) : truncate(shots[0].name, 22)}`
+            );
         }
       };
       for (const r of chipRows) {
@@ -1187,7 +1399,9 @@
       const k = mode === "start" ? Math.max(0.62, Math.min(1, fitK)) : Math.min(1.2, fitK);
       const fits = (b.x1 - b.x0) * k <= w && (b.y1 - b.y0) * k <= h;
       const t = fits
-        ? d3.zoomIdentity.translate(w / 2 - (k * (b.x0 + b.x1)) / 2, h / 2 - (k * (b.y0 + b.y1)) / 2).scale(k)
+        ? d3.zoomIdentity
+            .translate(w / 2 - (k * (b.x0 + b.x1)) / 2, h / 2 - (k * (b.y0 + b.y1)) / 2)
+            .scale(k)
         : d3.zoomIdentity.translate(-k * b.x0, -k * b.y0).scale(k);
       (instant ? svg : svg.transition().duration(250)).call(flowZoom.transform, t);
     }
@@ -1216,7 +1430,10 @@
         .attr("fill", (n) => colorOf(n));
       ovBrush = d3
         .brushX()
-        .extent([[0, 0], [w, h]])
+        .extent([
+          [0, 0],
+          [w, h],
+        ])
         .on("start", (ev) => {
           if (ev.sourceEvent) brushing = true;
         })
@@ -1243,12 +1460,16 @@
       if (tab) state.detailOpen.add(tab);
       state.details = true;
       el.main.classList.remove("no-details");
-      el.tree.querySelectorAll(".row").forEach((r) => r.classList.toggle("selected", r.dataset.id === id));
+      el.tree
+        .querySelectorAll(".row")
+        .forEach((r) => r.classList.toggle("selected", r.dataset.id === id));
       if (chartSvg) {
         chartSvg.selectAll("rect.bar").classed("selected", (n) => n.id === id);
         chartSvg.selectAll("g.r").classed("sel", (n) => n.id === id);
       }
-      d3.select(el.flow).selectAll("g.flow-card").classed("selected", (n) => n.id === id);
+      d3.select(el.flow)
+        .selectAll("g.flow-card")
+        .classed("selected", (n) => n.id === id);
       renderDetails();
     }
     function focusNode(n) {
@@ -1315,7 +1536,9 @@
       const p = flowPos.get(n.id);
       if (svg.empty() || !p) return;
       const k = Math.max(0.8, d3.zoomTransform(svg.node()).k);
-      const t = d3.zoomIdentity.translate(el.flow.clientWidth / 2 - k * p.x, el.flow.clientHeight / 2 - k * p.y).scale(k);
+      const t = d3.zoomIdentity
+        .translate(el.flow.clientWidth / 2 - k * p.x, el.flow.clientHeight / 2 - k * p.y)
+        .scale(k);
       svg.transition().duration(300).call(flowZoom.transform, t);
     }
 
@@ -1338,12 +1561,16 @@
             ${n.v.tags.length ? `<div class="k">Tags</div><div class="v">${chipsHtml(n.v.tags, Infinity, 40)}</div>` : ""}
             ${n.v.mcp ? `<div class="k">MCP</div><div class="v"><span class="badge-inline">${esc(n.v.mcp.mode)}</span></div>` : ""}
             <div class="k">Id</div><div class="v mono-sm">${esc(n.id)}</div>
-            ${userSite(n) ? `<div class="k">${siteLabel(n)}</div><div class="v defined">
+            ${
+              userSite(n)
+                ? `<div class="k">${siteLabel(n)}</div><div class="v defined">
               <button class="icon-btn" data-copy-source aria-label="Copy relative path">${svgIcon("copy")}</button>
               ${hasPopup(n) ? `<button class="icon-btn" data-show-code aria-label="Show source">${svgIcon("code")}</button>` : ""}
               <a class="icon-btn" href="${esc(editorUrl(userSite(n)))}" aria-label="Open in VS Code" data-tip-text="Open in VS Code">${svgIcon("external")}</a>
               <span class="defined-name" >${esc(basename(sourceOf(n)))}</span>
-            </div>` : ""}
+            </div>`
+                : ""
+            }
           </div>
           <div class="acc">${detailSections(n)
             .map((sec) =>
@@ -1360,7 +1587,10 @@
       if (copySrc) {
         copySrc.addEventListener("click", () => copySource(n));
         copySrc.addEventListener("mouseenter", (ev) =>
-          showTip(ev, `<div class="mono">${esc(sourceOf(n))}</div><div class="hint">Click (or press <kbd>C</kbd>) to copy</div>`)
+          showTip(
+            ev,
+            `<div class="mono">${esc(sourceOf(n))}</div><div class="hint">Click (or press <kbd>C</kbd>) to copy</div>`
+          )
         );
         copySrc.addEventListener("mousemove", (ev) => moveTip(ev));
         copySrc.addEventListener("mouseleave", hideTip);
@@ -1421,9 +1651,16 @@
           empty: !hasArgs(n) && !params.length,
           body: () =>
             (params.length ? `<div class="params">${params.map(paramHtml).join("")}</div>` : "") +
-            (hasArgs(n) ? `<div class="code-box">${argsHtml(n)}</div>` : '<div class="muted">No arguments.</div>'),
+            (hasArgs(n)
+              ? `<div class="code-box">${argsHtml(n)}</div>`
+              : '<div class="muted">No arguments.</div>'),
+        },
+        {
+          key: "value",
+          title: "Returned",
+          empty: !hasValue(n),
+          body: () => `<div class="code-box">${valueHtml(n)}</div>`,
         },
-        { key: "value", title: "Returned", empty: !hasValue(n), body: () => `<div class="code-box">${valueHtml(n)}</div>` },
         {
           key: "snapshots",
           title: "Snapshots & files",
@@ -1529,7 +1766,8 @@
 
     function thumbHtml(g) {
       const i = model.gallery.indexOf(g);
-      if (g.image) return `<div class="thumb" data-gallery="${i}" title="${esc(g.name)}"><img alt="${esc(g.name)}" data-asset="${esc(g.f.asset)}"></div>`;
+      if (g.image)
+        return `<div class="thumb" data-gallery="${i}" title="${esc(g.name)}"><img alt="${esc(g.name)}" data-asset="${esc(g.f.asset)}"></div>`;
       const label = g.type === "snapshot" ? "{ }" : g.f.mime.split("/")[1] || "file";
       return `<div class="thumb" data-gallery="${i}" title="${esc(g.name)}"><span class="json-ico">${esc(label)}</span></div>`;
     }
@@ -1538,15 +1776,17 @@
       root.querySelectorAll("img[data-asset]").forEach((img) => {
         if (!img.src) img.src = model.asset(img.dataset.asset);
       });
-      root.querySelectorAll("[data-gallery]").forEach((t) =>
-        t.addEventListener("click", () => openGallery(model.gallery[+t.dataset.gallery]))
-      );
-      root.querySelectorAll("[data-link]").forEach((t) =>
-        t.addEventListener("click", () => setPin(model.links[+t.dataset.link].t))
-      );
-      root.querySelectorAll("[data-item]").forEach((t) =>
-        t.addEventListener("click", () => openItem(model.items[+t.dataset.item]))
-      );
+      root
+        .querySelectorAll("[data-gallery]")
+        .forEach((t) =>
+          t.addEventListener("click", () => openGallery(model.gallery[+t.dataset.gallery]))
+        );
+      root
+        .querySelectorAll("[data-link]")
+        .forEach((t) => t.addEventListener("click", () => setPin(model.links[+t.dataset.link].t)));
+      root
+        .querySelectorAll("[data-item]")
+        .forEach((t) => t.addEventListener("click", () => openItem(model.items[+t.dataset.item])));
     }
 
     function openItem(item) {
@@ -1561,7 +1801,6 @@
       redrawX();
     }
 
-
     // ── errors: the tab, and highlighting them in the graphs ──
     const ERR_TYPES = [
       ["failure", "Failures", "x"],
@@ -1580,11 +1819,15 @@
       );
     }
     function errorsHtml() {
-      if (!model.errors.length) return '<div class="muted">No errors: nothing failed, no assertion failed, and nothing wrote error output.</div>';
+      if (!model.errors.length)
+        return '<div class="muted">No errors: nothing failed, no assertion failed, and nothing wrote error output.</div>';
       const count = (t) => model.errors.filter((e) => t === "all" || e.type === t).length;
       const seg = [["all", "All"], ...ERR_TYPES.map(([k, l]) => [k, l])]
         .filter(([k]) => k === "all" || count(k))
-        .map(([k, l]) => `<button class="seg ${state.errFilter === k ? "active" : ""}" data-err-filter="${k}">${l} <span class="muted">${count(k)}</span></button>`)
+        .map(
+          ([k, l]) =>
+            `<button class="seg ${state.errFilter === k ? "active" : ""}" data-err-filter="${k}">${l} <span class="muted">${count(k)}</span></button>`
+        )
         .join("");
       const shown = errorsShown();
       const sections = ERR_TYPES.map(([type, label, icon]) => {
@@ -1599,8 +1842,14 @@
     function errEntryHtml(e) {
       const open = state.errOpen.has(e.idx);
       const who = e.node ? displayName(e.node) : "run";
-      const extra = e.type === "output" && e.lines.length > 1 ? `<span class="err-n">${e.lines.length} lines</span>` : "";
-      const src = e.type === "output" && e.source ? `<span class="err-src">${esc(truncate(e.source, 40))}</span>` : "";
+      const extra =
+        e.type === "output" && e.lines.length > 1
+          ? `<span class="err-n">${e.lines.length} lines</span>`
+          : "";
+      const src =
+        e.type === "output" && e.source
+          ? `<span class="err-src">${esc(truncate(e.source, 40))}</span>`
+          : "";
       return `<div class="err-entry ${e.type}${open ? " open" : ""}" data-err="${e.idx}">
         <div class="err-row">
           <span class="twist ${open ? "open" : ""}">${svgIcon("chevron")}</span>
@@ -1642,9 +1891,13 @@
         b.addEventListener("mouseenter", (ev) => showTip(ev, "Show in graph"));
         b.addEventListener("mouseleave", hideTip);
       });
-      body.querySelectorAll("[data-err-copy]").forEach((b) =>
-        b.addEventListener("click", () => copy(model.errors[+b.dataset.errCopy].text, "Copied the error"))
-      );
+      body
+        .querySelectorAll("[data-err-copy]")
+        .forEach((b) =>
+          b.addEventListener("click", () =>
+            copy(model.errors[+b.dataset.errCopy].text, "Copied the error")
+          )
+        );
     }
     function refreshErrors() {
       if (state.lowerTab !== "errors") return;
@@ -1683,7 +1936,9 @@
       const path = only ? pathOf(only) : model.errPath;
       app.classList.toggle("hl-on", !!set);
       const mark = (sel, idOf) =>
-        sel.classed("err", (d) => !!set && set.has(idOf(d))).classed("err-path", (d) => !!set && path.has(idOf(d)));
+        sel
+          .classed("err", (d) => !!set && set.has(idOf(d)))
+          .classed("err-path", (d) => !!set && path.has(idOf(d)));
       if (chartSvg) mark(chartSvg.selectAll("g.r"), (n) => n.id);
       mark(d3.select(el.flow).selectAll("g.flow-card"), (n) => n.id);
       el.tree.querySelectorAll(".row").forEach((r) => {
@@ -1702,14 +1957,22 @@
     function renderLower() {
       const tabs = [
         ["snapshots", `Snapshots (${model.gallery.length})`],
-        ["errors", `Errors <span class="tab-count${seriousCount() ? " bad" : model.errors.length ? " warn" : ""}">${model.errors.length}</span>`],
+        [
+          "errors",
+          `Errors <span class="tab-count${seriousCount() ? " bad" : model.errors.length ? " warn" : ""}">${model.errors.length}</span>`,
+        ],
         ["logs", "Logs"],
         ["asserts", `Assertions (${model.asserts.length})`],
         ["events", "Timeline events"],
       ];
       el.lower.innerHTML = `<div class="tabs">${tabs
-        .map(([k, l]) => `<button class="tab ${state.lowerTab === k ? "active" : ""}" data-tab="${k}">${l}</button>`)
-        .join("")}<span class="spacer"></span><input class="filter" placeholder="Filter…" value="${esc(state.filter)}"></div>
+        .map(
+          ([k, l]) =>
+            `<button class="tab ${state.lowerTab === k ? "active" : ""}" data-tab="${k}">${l}</button>`
+        )
+        .join(
+          ""
+        )}<span class="spacer"></span><input class="filter" placeholder="Filter…" value="${esc(state.filter)}"></div>
         <div class="body">${lowerBodyHtml()}</div>`;
       el.lower.querySelectorAll(".tab").forEach((b) =>
         b.addEventListener("click", () => {
@@ -1729,32 +1992,50 @@
       const body = el.lower.querySelector(".body");
       if (state.lowerTab === "errors") wireErrors(body);
       wireItems(body);
-      body.querySelectorAll("tr[data-row]").forEach((tr) =>
-        tr.addEventListener("click", () => openItem(model.items[+tr.dataset.row]))
-      );
+      body
+        .querySelectorAll("tr[data-row]")
+        .forEach((tr) =>
+          tr.addEventListener("click", () => openItem(model.items[+tr.dataset.row]))
+        );
       body.querySelectorAll("[data-locate]").forEach((b) => {
         b.addEventListener("click", (ev) => {
           ev.stopPropagation();
           locate(model.gallery[+b.dataset.locate]);
         });
-        b.addEventListener("mouseenter", (ev) => showTip(ev, `Show in the ${state.view === "flow" ? "flow" : "graph"}`));
+        b.addEventListener("mouseenter", (ev) =>
+          showTip(ev, `Show in the ${state.view === "flow" ? "flow" : "graph"}`)
+        );
         b.addEventListener("mouseleave", hideTip);
       });
     }
     function matches(...parts) {
       const q = state.filter.trim().toLowerCase();
-      return !q || parts.some((p) => String(p || "").toLowerCase().includes(q));
+      return (
+        !q ||
+        parts.some((p) =>
+          String(p || "")
+            .toLowerCase()
+            .includes(q)
+        )
+      );
     }
     function lowerBodyHtml() {
       const tab = state.lowerTab;
       if (tab === "errors") return errorsHtml();
       if (tab === "snapshots") {
         const g = model.gallery.filter((x) => matches(x.name, x.node && x.node.v.path));
-        if (!g.length) return '<div class="muted">No snapshots, artifacts, or images in this run.</div>';
+        if (!g.length)
+          return '<div class="muted">No snapshots, artifacts, or images in this run.</div>';
         return `<div class="gallery">${g
           .map((x) => {
-            const sub = x.type === "snapshot" ? `snapshot · ${x.node ? esc(displayName(x.node)) : ""}` : `${esc(x.f.mime)} · ${fmtSize(x.f.size)}${x.f.omitted ? " · not embedded" : ""}`;
-            const at = x.t != null || x.node ? `<button class="icon-btn locate" data-locate="${model.gallery.indexOf(x)}" aria-label="Show in graph">${svgIcon("locate")}</button>` : "";
+            const sub =
+              x.type === "snapshot"
+                ? `snapshot · ${x.node ? esc(displayName(x.node)) : ""}`
+                : `${esc(x.f.mime)} · ${fmtSize(x.f.size)}${x.f.omitted ? " · not embedded" : ""}`;
+            const at =
+              x.t != null || x.node
+                ? `<button class="icon-btn locate" data-locate="${model.gallery.indexOf(x)}" aria-label="Show in graph">${svgIcon("locate")}</button>`
+                : "";
             return `<div class="gal-item">${thumbHtml(x)}<div class="cap"><span class="t">${x.t == null ? "–" : fmtTick(x.t)}</span><span class="n" title="${esc(x.name)}">${esc(x.name)}</span>${at}</div><div class="sz">${sub}</div></div>`;
           })
           .join("")}</div>`;
@@ -1773,7 +2054,8 @@
         rows.push({ i, idx });
         if (rows.length >= 3000) break;
       }
-      if (!rows.length) return `<div class="muted">${tab === "asserts" ? "No assertions in this run." : "Nothing matches."}</div>`;
+      if (!rows.length)
+        return `<div class="muted">${tab === "asserts" ? "No assertions in this run." : "Nothing matches."}</div>`;
       return `<table class="list"><tbody>${rows
         .map(({ i, idx }) => {
           const mk = MARK[i.kind];
@@ -1782,7 +2064,9 @@
             : "";
           return `<tr data-row="${idx}" class="${i.kind === "error" || i.kind === "fail" ? "err" : ""}"><td class="t">${fmtTick(i.t)}</td><td>${ico}</td><td class="p" title="${esc(i.e.path)}">${esc(i.node ? displayName(i.node) : i.e.path)}</td><td class="m">${esc(i.e.message)}</td></tr>`;
         })
-        .join("")}</tbody></table>${rows.length >= 3000 ? '<div class="muted">First 3000 rows — narrow with the filter.</div>' : ""}`;
+        .join(
+          ""
+        )}</tbody></table>${rows.length >= 3000 ? '<div class="muted">First 3000 rows — narrow with the filter.</div>' : ""}`;
     }
 
     // ── modal ──
@@ -1797,11 +2081,18 @@
         body = `<img alt="${esc(g.name)}" src="${src}">`;
         actions = `<a class="btn solo" download="${esc(basename(g.f.file))}" href="${src}">${svgIcon("download")}Download</a>`;
       } else if (g.type === "file") {
-        body = g.f.text != null ? `<pre class="code">${esc(g.f.text)}</pre>` : `<div class="muted">Not embedded (${esc(g.f.omitted || "binary")}). Open it from the run folder.</div>`;
+        body =
+          g.f.text != null
+            ? `<pre class="code">${esc(g.f.text)}</pre>`
+            : `<div class="muted">Not embedded (${esc(g.f.omitted || "binary")}). Open it from the run folder.</div>`;
       } else {
         body = `<pre class="code">${esc(g.s.value !== undefined ? json(g.s.value) : g.s.text)}</pre>${g.s.truncated ? '<div class="muted">Truncated — the snapshot file holds the rest.</div>' : ""}`;
       }
-      const sub = [g.t != null ? fmtRel(g.t) : null, g.node ? g.node.v.path : null, g.type === "file" ? fmtSize(g.f.size) : "snapshot"]
+      const sub = [
+        g.t != null ? fmtRel(g.t) : null,
+        g.node ? g.node.v.path : null,
+        g.type === "file" ? fmtSize(g.f.size) : "snapshot",
+      ]
         .filter(Boolean)
         .join(" · ");
       const m = document.createElement("div");
@@ -1850,14 +2141,20 @@
           renderDetails();
           renderLower();
         }
-        if (a === "data") download(`${model.data.name}-run.json`, JSON.stringify(model.data, null, 2), "application/json");
+        if (a === "data")
+          download(
+            `${model.data.name}-run.json`,
+            JSON.stringify(model.data, null, 2),
+            "application/json"
+          );
         if (a === "folder") copy(model.data.folder);
         if (a === "expand") {
           state.collapsed.clear();
           renderAll();
         }
         if (a === "collapse") {
-          for (const n of model.nodes) if (n.depth >= 1 && n.children.length) state.collapsed.add(n.id);
+          for (const n of model.nodes)
+            if (n.depth >= 1 && n.children.length) state.collapsed.add(n.id);
           renderAll();
         }
       });
@@ -1892,7 +2189,9 @@
         n.depth === 0 ? "om" : v.kind === "step" ? "step" : "",
         v.mcp ? `<span class="mcp">MCP · ${esc(v.mcp.mode)}</span>` : "",
       ].filter(Boolean);
-      const fails = model.run.failures.filter((f) => f.action === n.id || f.action === n.name || f.action === v.path);
+      const fails = model.run.failures.filter(
+        (f) => f.action === n.id || f.action === n.name || f.action === v.path
+      );
       return `<div class="tt">${esc(shown)}</div>
         ${call ? `<div class="tcall">${callHtml(n, call)}</div>` : ""}
         <div class="tmeta">${meta.join('<span class="sep">·</span>')}</div>
@@ -1902,9 +2201,10 @@
     }
     function galleryTip(x) {
       const img = x.image ? `<img src="${model.asset(x.f.asset)}" alt="">` : "";
-      const body = x.type === "snapshot"
-        ? `<div class="mono small">${esc(truncate(x.s.value !== undefined ? oneLine(x.s.value) : x.s.text || "", 200))}</div>`
-        : `<div class="ts">${esc(x.f.mime)} · ${fmtSize(x.f.size)}</div>`;
+      const body =
+        x.type === "snapshot"
+          ? `<div class="mono small">${esc(truncate(x.s.value !== undefined ? oneLine(x.s.value) : x.s.text || "", 200))}</div>`
+          : `<div class="ts">${esc(x.f.mime)} · ${fmtSize(x.f.size)}</div>`;
       return `<div class="tt">${esc(x.name)}${x.t != null ? ` · ${fmtRel(x.t)}` : ""}</div>${img}${body}`;
     }
     /** The om itself: its node tooltip, plus where the run's record lives. */
@@ -1914,12 +2214,23 @@
     function markTip(d) {
       const m = d.m;
       if (m.kind === "link") {
-        return linkTip(m.link) + (d.more.length ? `<div class="ts" style="margin-top:4px">+${d.more.length} more within a few ms</div>` : "");
+        return (
+          linkTip(m.link) +
+          (d.more.length
+            ? `<div class="ts" style="margin-top:4px">+${d.more.length} more within a few ms</div>`
+            : "")
+        );
       }
       const mk = MARK[m.kind] || MARK.event;
-      const img = m.gallery && m.gallery.image ? `<img src="${model.asset(m.gallery.f.asset)}" alt="">` : "";
-      const more = d.more.length ? `<div class="ts">+${d.more.length} more within a few ms</div>` : "";
-      const extra = m.gallery && m.gallery.image ? `<div class="ts">${esc(m.gallery.f.rel)} · ${fmtSize(m.gallery.f.size)}</div>` : "";
+      const img =
+        m.gallery && m.gallery.image ? `<img src="${model.asset(m.gallery.f.asset)}" alt="">` : "";
+      const more = d.more.length
+        ? `<div class="ts">+${d.more.length} more within a few ms</div>`
+        : "";
+      const extra =
+        m.gallery && m.gallery.image
+          ? `<div class="ts">${esc(m.gallery.f.rel)} · ${fmtSize(m.gallery.f.size)}</div>`
+          : "";
       return `<div class="tt">${esc(mk.label)} · ${fmtRel(m.t)}</div>${img}<div>${esc(truncate(m.kind === "snapshot" || m.kind === "artifact" ? m.label : m.e.message, 260))}</div>${extra}${more}`;
     }
     // ── source popover (the <> buttons) — click-toggled, like the tskb explorer's ──
@@ -1964,7 +2275,9 @@
       const line = lines[at - c.start];
       if (line == null) return null;
       let call = null;
-      for (const m of line.matchAll(/(?:^|[^\w$.])([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)\s*\(/g)) {
+      for (const m of line.matchAll(
+        /(?:^|[^\w$.])([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)\s*\(/g
+      )) {
         if (!/^(if|for|while|switch|return|catch|function|await|typeof|new|async)$/.test(m[1])) {
           call = { callee: m[1], index: m.index };
           break;
@@ -1977,7 +2290,9 @@
       const m =
         DECL.exec(prefix) ||
         /^\s*([\w$.]+)\s*=(?!=)/.exec(prefix) ||
-        (/^\s*(?:await\s+)?$/.test(prefix) && /=\s*(?:await\s*)?$/.test(prev) ? DECL.exec(prev) : null);
+        (/^\s*(?:await\s+)?$/.test(prefix) && /=\s*(?:await\s*)?$/.test(prev)
+          ? DECL.exec(prev)
+          : null);
       return { callee: call.callee, bind: m ? m[1].replace(/\s+/g, " ") : "" };
     }
     /** The popover's tabs for `n`: what it is (prompt, source), then what went in and came out. */
@@ -1985,9 +2300,19 @@
       const tabs = [];
       if (promptOf(n)) tabs.push({ key: "prompt", label: "Prompt" });
       const mine = userSite(n);
-      if (codeOf(mine)) tabs.push({ key: "user", label: siteLabel(n) === "Called at" ? "Call site" : "Source", site: mine });
+      if (codeOf(mine))
+        tabs.push({
+          key: "user",
+          label: siteLabel(n) === "Called at" ? "Call site" : "Source",
+          site: mine,
+        });
       const def = n.v.definedAt;
-      if (def && def !== mine && codeOf(def)) tabs.push({ key: "def", label: isLib(def) ? "Definition (omkit)" : "Definition", site: def });
+      if (def && def !== mine && codeOf(def))
+        tabs.push({
+          key: "def",
+          label: isLib(def) ? "Definition (omkit)" : "Definition",
+          site: def,
+        });
       if (hasArgs(n)) tabs.push({ key: "args", label: "Args" });
       if (hasValue(n)) tabs.push({ key: "value", label: "Returned" });
       return tabs;
@@ -2015,7 +2340,8 @@
     function labelHtml(n) {
       const c = callOf(n);
       if (!c) return esc(displayName(n));
-      const name = c.callee === displayName(n) ? "" : `<span class="sep"> · </span>${esc(displayName(n))}`;
+      const name =
+        c.callee === displayName(n) ? "" : `<span class="sep"> · </span>${esc(displayName(n))}`;
       return `<span class="tcall">${callHtml(n, c)}</span>${name}`;
     }
     /** `page = chromePage(…)`, from {@link callExpr}. */
@@ -2026,7 +2352,9 @@
       return codeTabs(n).length > 0;
     }
     function popupTip(n) {
-      return codeTabs(n).map((t) => esc(t.label)).join(" · ");
+      return codeTabs(n)
+        .map((t) => esc(t.label))
+        .join(" · ");
     }
     function hasArgs(n) {
       return !!(n.v.args && n.v.args.length);
@@ -2035,7 +2363,9 @@
       return n.v.args.length === 1 ? n.v.args[0] : n.v.args;
     }
     function relOf(site) {
-      return (model.data.sources && model.data.sources[site]) || String(site).replace(/:\d+(:\d+)?$/, "");
+      return (
+        (model.data.sources && model.data.sources[site]) || String(site).replace(/:\d+(:\d+)?$/, "")
+      );
     }
     function hasValue(n) {
       return n.v.value !== undefined || !!n.v.valueNote;
@@ -2044,11 +2374,20 @@
     function jsonHtml(value, what) {
       const text = json(value);
       const lines = highlight(text);
-      const kind = Array.isArray(value) ? `array · ${value.length} items` : value === null ? "null" : typeof value === "object" ? `object · ${Object.keys(value).length} keys` : typeof value;
+      const kind = Array.isArray(value)
+        ? `array · ${value.length} items`
+        : value === null
+          ? "null"
+          : typeof value === "object"
+            ? `object · ${Object.keys(value).length} keys`
+            : typeof value;
       return `<div class="cp-tools"><span class="muted">${esc(kind)} · ${lines.length} line${lines.length > 1 ? "s" : ""} · ${fmtSize(text.length)}</span>
           <button class="btn solo small" data-a="copy-json" data-what="${what}">${svgIcon("copy")}Copy JSON</button></div>
         <div class="cp-code">${lines
-          .map((html, i) => `<div class="cl"><span class="ln">${i + 1}</span><span class="lc">${html || " "}</span></div>`)
+          .map(
+            (html, i) =>
+              `<div class="cl"><span class="ln">${i + 1}</span><span class="lc">${html || " "}</span></div>`
+          )
           .join("")}</div>`;
     }
     function valueHtml(n) {
@@ -2058,34 +2397,42 @@
       return jsonHtml(n.v.value, "value");
     }
     function argsHtml(n) {
-      return hasArgs(n) ? jsonHtml(argsOf(n), "args") : '<div class="pp"><div class="muted">No arguments.</div></div>';
+      return hasArgs(n)
+        ? jsonHtml(argsOf(n), "args")
+        : '<div class="pp"><div class="muted">No arguments.</div></div>';
     }
     function wireValue(root, n) {
-      root.querySelectorAll('[data-a="copy-json"]').forEach((b) =>
-        b.addEventListener("click", () =>
-          b.dataset.what === "args" ? copy(json(argsOf(n)), "Copied the args") : copy(json(n.v.value), "Copied the returned value")
-        )
-      );
+      root
+        .querySelectorAll('[data-a="copy-json"]')
+        .forEach((b) =>
+          b.addEventListener("click", () =>
+            b.dataset.what === "args"
+              ? copy(json(argsOf(n)), "Copied the args")
+              : copy(json(n.v.value), "Copied the returned value")
+          )
+        );
     }
     function codeHtml(site) {
       const c = codeOf(site);
       const line = Number((/:(\d+)(?::\d+)?$/.exec(site) || [])[1]);
       const lines = highlight(c.text).map(
-        (html, i) => `<div class="cl${c.start + i === line ? " at" : ""}"><span class="ln">${c.start + i}</span><span class="lc">${html || " "}</span></div>`
+        (html, i) =>
+          `<div class="cl${c.start + i === line ? " at" : ""}"><span class="ln">${c.start + i}</span><span class="lc">${html || " "}</span></div>`
       );
       return `<div class="cp-code">${lines.join("")}</div>${c.truncated ? '<div class="muted cp-more">Cut short — open the file for the rest.</div>' : ""}`;
     }
     function promptHtml(p) {
-      const choices = p.choices && p.choices.length
-        ? `<div class="pp-k">Choices</div><div class="pp-v"><ol class="pp-choices">${p.choices
-            .map((c) => {
-              const value = typeof c === "string" ? c : c.value;
-              const label = typeof c === "string" ? c : c.label;
-              const picked = p.answer && p.answer.value === value;
-              return `<li class="${picked ? "picked" : ""}">${esc(label)}${label !== value ? ` <span class="muted">(${esc(value)})</span>` : ""}</li>`;
-            })
-            .join("")}</ol></div>`
-        : "";
+      const choices =
+        p.choices && p.choices.length
+          ? `<div class="pp-k">Choices</div><div class="pp-v"><ol class="pp-choices">${p.choices
+              .map((c) => {
+                const value = typeof c === "string" ? c : c.value;
+                const label = typeof c === "string" ? c : c.label;
+                const picked = p.answer && p.answer.value === value;
+                return `<li class="${picked ? "picked" : ""}">${esc(label)}${label !== value ? ` <span class="muted">(${esc(value)})</span>` : ""}</li>`;
+              })
+              .join("")}</ol></div>`
+          : "";
       const answer = p.answer
         ? `<div class="pp-answer"><span class="pp-k">Answer</span><pre class="code">${esc(typeof p.answer.value === "string" ? p.answer.value : json(p.answer.value))}</pre>${
             p.answer.via ? `<span class="badge-inline">via ${esc(p.answer.via)}</span>` : ""
@@ -2108,7 +2455,10 @@
       if (codeFor === n.id && (!want || (toggle && codeTab === want))) return closeCode();
       const tabs = codeTabs(n);
       if (!tabs.length) return;
-      const tab = tabs.find((t) => t.key === want) || tabs.find((t) => t.key !== "value" && t.key !== "args") || tabs[0];
+      const tab =
+        tabs.find((t) => t.key === want) ||
+        tabs.find((t) => t.key !== "value" && t.key !== "args") ||
+        tabs[0];
       codeTab = tab.key;
       hideTip();
       const reopen = codeFor !== n.id;
@@ -2117,21 +2467,33 @@
       const rel = site ? relOf(site) : "";
       const line = site ? (/:(\d+)(?::\d+)?$/.exec(site) || [])[1] : "";
       codeEl.innerHTML = `<div class="cp-head">
-          ${site ? `<span class="cp-path" title="${esc(site)}">${esc(rel)}<span class="muted">${line ? ":" + line : ""}</span></span>
+          ${
+            site
+              ? `<span class="cp-path" title="${esc(site)}">${esc(rel)}<span class="muted">${line ? ":" + line : ""}</span></span>
           <button class="icon-btn" data-a="copy" aria-label="Copy path">${svgIcon("copy")}</button>
-          <a class="icon-btn" href="${esc(editorUrl(site))}" aria-label="Open in VS Code">${svgIcon("external")}</a>` : ""}
+          <a class="icon-btn" href="${esc(editorUrl(site))}" aria-label="Open in VS Code">${svgIcon("external")}</a>`
+              : ""
+          }
           <span class="cp-name">${esc(displayName(n))}</span>
           <button class="icon-btn" data-a="close" aria-label="Close">${svgIcon("close")}</button>
         </div>
         ${tabs.length > 1 ? `<div class="cp-tabs">${tabs.map((t) => `<button class="tab ${t === tab ? "active" : ""}" data-tab="${t.key}">${esc(t.label)}</button>`).join("")}</div>` : ""}
         <div class="cp-body">${
-          tab.key === "prompt" ? promptHtml(promptOf(n)) : tab.key === "value" ? valueHtml(n) : tab.key === "args" ? argsHtml(n) : codeHtml(site)
+          tab.key === "prompt"
+            ? promptHtml(promptOf(n))
+            : tab.key === "value"
+              ? valueHtml(n)
+              : tab.key === "args"
+                ? argsHtml(n)
+                : codeHtml(site)
         }</div>`;
       wireValue(codeEl, n);
       const cp = codeEl.querySelector('[data-a="copy"]');
       if (cp) cp.addEventListener("click", () => copy(rel, `Copied ${rel}`));
       codeEl.querySelector('[data-a="close"]').addEventListener("click", closeCode);
-      codeEl.querySelectorAll(".cp-tabs .tab").forEach((b) => b.addEventListener("click", () => toggleCode(n, null, b.dataset.tab)));
+      codeEl
+        .querySelectorAll(".cp-tabs .tab")
+        .forEach((b) => b.addEventListener("click", () => toggleCode(n, null, b.dataset.tab)));
       codeEl.hidden = false;
       if (reopen) {
         const x = ev && ev.clientX != null ? ev.clientX : window.innerWidth / 2;
@@ -2147,7 +2509,8 @@
       if (at) at.scrollIntoView({ block: "center" });
       if (codeAway) document.removeEventListener("mousedown", codeAway, true);
       codeAway = (e) => {
-        if (!codeEl.contains(e.target) && !e.target.closest(".code-btn, [data-show-code]")) closeCode();
+        if (!codeEl.contains(e.target) && !e.target.closest(".code-btn, [data-show-code]"))
+          closeCode();
       };
       setTimeout(() => codeAway && document.addEventListener("mousedown", codeAway, true), 0);
     }
@@ -2225,11 +2588,11 @@
       else if (e.key === "0") fit();
       else if ((e.key === "c" || e.key === "C") && !e.ctrlKey && !e.metaKey && !e.altKey) {
         copySource(hovered || model.byId.get(state.selected));
-      }
-      else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         const rows = visible();
         const i = rows.findIndex((n) => n.id === state.selected);
-        const next = rows[Math.max(0, Math.min(rows.length - 1, i + (e.key === "ArrowDown" ? 1 : -1)))];
+        const next =
+          rows[Math.max(0, Math.min(rows.length - 1, i + (e.key === "ArrowDown" ? 1 : -1)))];
         if (next) {
           e.preventDefault();
           select(next.id);
@@ -2259,7 +2622,9 @@
     const fails = parts.length
       ? `<span class="sep">•</span><button class="linkish ${serious ? "bad" : "warn"}" id="go-errors" title="Open the Errors tab and highlight them in the graphs">${parts.join(" · ")}</button>`
       : "";
-    const windows = [0, 100, 500, 1000, 5000, 10000, 30000, 60000, 300000].filter((w) => w === 0 || w < model.span);
+    const windows = [0, 100, 500, 1000, 5000, 10000, 30000, 60000, 300000].filter(
+      (w) => w === 0 || w < model.span
+    );
     return `
       <header class="top">
         <div class="titles">
@@ -2328,10 +2693,10 @@
         : shape === "ring"
           ? `<span class="dot" style="width:11px;height:11px;background:var(--panel);box-shadow:inset 0 0 0 2px ${c}"></span>`
           : shape === "dash"
-          ? `<span style="width:16px;height:0;border-top:2px dashed ${c}"></span>`
-          : shape === "line"
-            ? `<span style="width:2px;height:14px;background:${c};margin:0 7px"></span>`
-            : `<span class="dot" style="background:${c};width:11px;height:11px"></span>`;
+            ? `<span style="width:16px;height:0;border-top:2px dashed ${c}"></span>`
+            : shape === "line"
+              ? `<span style="width:2px;height:14px;background:${c};margin:0 7px"></span>`
+              : `<span class="dot" style="background:${c};width:11px;height:11px"></span>`;
     return `<div class="li">${sw}${esc(label)}</div>`;
   }
 
@@ -2340,7 +2705,13 @@
     return n.branch < 0 ? css("--c1") : css(PALETTE[n.branch]);
   }
   function statusVar(s) {
-    return s === "ok" ? "--ok" : s === "failed" ? "--fail" : s === "cancelled" ? "--cancel" : "--running";
+    return s === "ok"
+      ? "--ok"
+      : s === "failed"
+        ? "--fail"
+        : s === "cancelled"
+          ? "--cancel"
+          : "--running";
   }
   function alpha(color, a) {
     const c = d3.color(color);
@@ -2349,7 +2720,9 @@
     return c.formatRgb();
   }
   const KEYWORDS = new Set(
-    "abstract as async await break case catch class const continue default delete do else enum export extends false finally for from function get if implements import in instanceof interface keyof let new null of private protected public readonly return satisfies set static super switch this throw true try type typeof undefined var void while yield".split(" ")
+    "abstract as async await break case catch class const continue default delete do else enum export extends false finally for from function get if implements import in instanceof interface keyof let new null of private protected public readonly return satisfies set static super switch this throw true try type typeof undefined var void while yield".split(
+      " "
+    )
   );
   const TOKEN =
     /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|(`(?:\\[\s\S]|[^`\\])*`|"(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*')|(\b\d[\d_]*(?:\.\d+)?(?:[eE][+-]?\d+)?n?\b)|([A-Za-z_$][\w$]*)/g;
@@ -2363,7 +2736,8 @@
       if (m.index > last) parts.push([null, text.slice(last, m.index)]);
       let cls = null;
       if (m[1]) cls = "tk-c";
-      else if (m[2]) cls = /^\s*:/.test(text.slice(TOKEN.lastIndex, TOKEN.lastIndex + 8)) ? "tk-p" : "tk-s";
+      else if (m[2])
+        cls = /^\s*:/.test(text.slice(TOKEN.lastIndex, TOKEN.lastIndex + 8)) ? "tk-p" : "tk-s";
       else if (m[3]) cls = "tk-n";
       else if (m[4]) {
         if (KEYWORDS.has(m[4])) cls = "tk-k";
@@ -2378,7 +2752,8 @@
     for (const [cls, chunk] of parts) {
       chunk.split("\n").forEach((piece, i) => {
         if (i > 0) lines.push("");
-        if (piece) lines[lines.length - 1] += cls ? `<span class="${cls}">${esc(piece)}</span>` : esc(piece);
+        if (piece)
+          lines[lines.length - 1] += cls ? `<span class="${cls}">${esc(piece)}</span>` : esc(piece);
       });
     }
     return lines;
@@ -2425,7 +2800,8 @@
     if (n._prompt !== undefined) return n._prompt;
     n._prompt = null;
     if (n.name !== "prompt" || n.depth === 0) return null;
-    const opts = (n.v.args && n.v.args[0] && typeof n.v.args[0] === "object" ? n.v.args[0] : {}) || {};
+    const opts =
+      (n.v.args && n.v.args[0] && typeof n.v.args[0] === "object" ? n.v.args[0] : {}) || {};
     let message = opts.message;
     let answer = null;
     for (const it of n.entries) {
@@ -2483,8 +2859,14 @@
   /** Up to `limit` tag chips, then a "+N" chip holding the rest. */
   function chipsHtml(tags, limit, max) {
     if (!tags || !tags.length) return "";
-    const more = tags.length > limit ? `<span class="chip more" title="${esc(tags.slice(limit).join(", "))}">+${tags.length - limit}</span>` : "";
-    return `<span class="chips">${tags.slice(0, limit).map((t) => chipHtml(t, max)).join("")}${more}</span>`;
+    const more =
+      tags.length > limit
+        ? `<span class="chip more" title="${esc(tags.slice(limit).join(", "))}">+${tags.length - limit}</span>`
+        : "";
+    return `<span class="chips">${tags
+      .slice(0, limit)
+      .map((t) => chipHtml(t, max))
+      .join("")}${more}</span>`;
   }
   function displayName(n) {
     if (n.depth === 0) return "main";
@@ -2498,7 +2880,8 @@
   function iconOf(n) {
     if (n.depth === 0) return "root";
     const s = `${n.name} ${(n.v.tags || []).join(" ")}`.toLowerCase();
-    if (/^(npm|npx|node|pnpm|yarn|tsc|git|bun)\b/.test(n.name) || /command|shell|exec/.test(s)) return "terminal";
+    if (/^(npm|npx|node|pnpm|yarn|tsc|git|bun)\b/.test(n.name) || /command|shell|exec/.test(s))
+      return "terminal";
     if (/chromepage|page:|tab/.test(s)) return "window";
     if (/browser|chrome/.test(s)) return "globe";
     if (/health|ready|gate|wait|port/.test(s)) return "pulse";
@@ -2511,7 +2894,8 @@
   }
   function copy(text, message) {
     const done = () => toast(message || "Copied");
-    if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(text).then(done, () => fallbackCopy(text, message));
+    if (navigator.clipboard && window.isSecureContext)
+      navigator.clipboard.writeText(text).then(done, () => fallbackCopy(text, message));
     else fallbackCopy(text, message);
   }
   function fallbackCopy(text, message) {
@@ -2543,7 +2927,9 @@
   }
   function toggleTheme() {
     const root = document.documentElement;
-    const dark = root.dataset.theme ? root.dataset.theme === "dark" : !matchMedia("(prefers-color-scheme: light)").matches;
+    const dark = root.dataset.theme
+      ? root.dataset.theme === "dark"
+      : !matchMedia("(prefers-color-scheme: light)").matches;
     root.dataset.theme = dark ? "light" : "dark";
     try {
       localStorage.setItem("omkit-report-theme", root.dataset.theme);