omkit 0.8.9 → 0.8.10

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

@@ -0,0 +1,1385 @@
+/* omkit run report — the viewer. Runs in the browser against the JSON block the writer
+ * inlined (`#omkit-data`) and the global `d3`. Plain script, no build step: the writer
+ * reads this file and pastes it into report.html as-is. */
+(function () {
+  "use strict";
+
+  const ROW_H = 42;
+  const BAR_Y = 6;
+  const BAR_H = 20;
+  const FLAME_ROW = 26;
+
+  // ── icons (24×24, stroked) ───────────────────────────────
+  const ICON = {
+    timeline: "M3 17l5-5 4 4 8-8M3 21h18",
+    flame: "M12 3c1 4 6 6 6 11a6 6 0 0 1-12 0c0-3 2-4 2-7 2 1 3 3 3 5 1-2 1-6 1-9z",
+    flow: "M4 4h7v6H4zM13 14h7v6h-7zM7.5 10v4h9v0M16.5 14v-1",
+    zoomIn: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4M11 8v6M8 11h6",
+    zoomOut: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4M8 11h6",
+    more: "M5 12h.01M12 12h.01M19 12h.01",
+    close: "M6 6l12 12M18 6L6 18",
+    chevron: "M9 6l6 6-6 6",
+    play: "M8 5v14l11-7z",
+    terminal: "M4 5h16v14H4zM7 9l3 3-3 3M12 15h5",
+    globe: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18",
+    window: "M3 5h18v14H3zM3 9h18M6 7h.01M9 7h.01",
+    pulse: "M3 12h4l2-5 4 10 2-5h6",
+    cursor: "M5 3l14 7-6 2-2 6z",
+    box: "M12 3l8 4.5v9L12 21l-8-4.5v-9zM4 7.5l8 4.5 8-4.5M12 12v9",
+    camera: "M4 8h3l2-3h6l2 3h3v11H4zM12 10a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z",
+    file: "M6 3h8l4 4v14H6zM14 3v4h4",
+    check: "M5 12l4 4 10-10",
+    x: "M6 6l12 12M18 6L6 18",
+    alert: "M12 4l9 16H3zM12 10v4M12 17h.01",
+    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",
+    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",
+  };
+  const svgIcon = (name, extra) =>
+    `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${
+      extra || ""
+    }><path d="${ICON[name]}"/></svg>`;
+
+  const PALETTE = ["--c1", "--c2", "--c3", "--c4", "--c5", "--c6", "--c7", "--c8"];
+  const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
+
+  const MARK = {
+    event: { color: "--c3", icon: "check", label: "Process event" },
+    snapshot: { color: "--c2", icon: "camera", label: "Snapshot" },
+    artifact: { color: "--c6", icon: "file", label: "Artifact" },
+    pass: { color: "--ok", icon: "check", label: "Assertion passed" },
+    fail: { color: "--fail", icon: "alert", label: "Assertion failed" },
+    error: { color: "--fail", icon: "x", label: "Error" },
+    cancel: { color: "--cancel", icon: "stop", label: "Cancelled" },
+    lifecycle: { color: "--c1", icon: "play", label: "Lifecycle" },
+    run: { color: "--text-3", icon: "root", label: "Run" },
+  };
+
+  // ── formatting ───────────────────────────────────────────
+  const fmtDur = (ms) => {
+    if (!isFinite(ms)) return "–";
+    if (ms < 1000) return `${Math.round(ms)}ms`;
+    if (ms < 10000) return `${(ms / 1000).toFixed(1)}s`;
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+    const m = Math.floor(ms / 60000);
+    const s = Math.round((ms % 60000) / 1000);
+    return `${m}m ${String(s).padStart(2, "0")}s`;
+  };
+  const fmtRel = (ms) => `+${fmtDur(Math.max(0, ms)).replace(/^0ms$/, "0ms")}`;
+  const pad2 = (n) => String(n).padStart(2, "0");
+  const fmtClock = (ts) => {
+    const d = new Date(ts);
+    return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}.${String(d.getMilliseconds()).padStart(3, "0")}`;
+  };
+  const fmtDate = (ts) => {
+    const d = new Date(ts);
+    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`;
+  const fmtTick = (ms) => {
+    if (ms === 0) return "0s";
+    const a = Math.abs(ms);
+    if (a < 1000) return `${Math.round(ms)}ms`;
+    if (a < 60000) return `${+(ms / 1000).toFixed(a < 10000 ? 2 : 1)}s`;
+    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]);
+  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 editorUrl = (site) => {
+    const m = /^(.*):(\d+)$/.exec(site);
+    const file = (m ? m[1] : site).replace(/\\/g, "/");
+    return `vscode://file/${file.replace(/^\/+/, "")}${m ? ":" + m[2] : ""}`;
+  };
+  const json = (v) => {
+    try {
+      return JSON.stringify(v, null, 2);
+    } catch {
+      return String(v);
+    }
+  };
+
+  // ── model ────────────────────────────────────────────────
+  function buildModel(data) {
+    const run = data.run;
+    const t0 = run.startedAt;
+    const nodes = [];
+    const byId = new Map();
+    let tEnd = run.endedAt || t0;
+    let topIndex = 0;
+    (function walk(v, parent, depth, branch) {
+      const isTop = depth === 1;
+      const b = depth === 0 ? 0 : isTop ? topIndex++ % PALETTE.length : branch;
+      const n = {
+        v,
+        id: v.id,
+        name: v.name,
+        parent,
+        depth,
+        branch: depth === 0 ? -1 : b,
+        children: [],
+        status: ["ok", "failed", "cancelled"].includes(v.status) ? v.status : v.endedAt ? v.status : "running",
+        startAbs: v.startedAt || t0,
+        endAbs: v.endedAt || 0,
+        entries: [],
+        marks: [],
+      };
+      nodes.push(n);
+      byId.set(n.id, n);
+      if (parent) parent.children.push(n);
+      if (n.endAbs > tEnd) tEnd = n.endAbs;
+      for (const c of v.children || []) walk(c, n, depth + 1, b);
+    })(run.root, null, 0, 0);
+
+    for (const e of data.entries) if (e.ts > tEnd) tEnd = e.ts;
+    for (const n of nodes) {
+      if (!n.endAbs) n.endAbs = tEnd;
+      n.start = n.startAbs - t0;
+      n.end = Math.max(n.start, n.endAbs - t0);
+      n.duration = n.v.duration || n.end - n.start;
+    }
+
+    const items = [];
+    const runEntries = [];
+    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 };
+      items.push(item);
+      if (item.node) {
+        item.node.entries.push(item);
+        if (kind !== "info" && kind !== "lifecycle") item.node.marks.push(item);
+      } else runEntries.push(item);
+    }
+
+    const assets = new Map();
+    const gallery = [];
+    for (const f of data.files) {
+      gallery.push({
+        type: "file",
+        f,
+        name: f.name,
+        t: f.ts ? f.ts - t0 : null,
+        node: f.nodeId ? byId.get(f.nodeId) || null : null,
+        image: f.mime.startsWith("image/") && !!f.asset,
+      });
+    }
+    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.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 it of items) {
+      if (it.kind === "snapshot" || it.kind === "artifact") {
+        const i = it.e.message.lastIndexOf(" → ");
+        if (i >= 0) it.gallery = galleryByFile.get(it.e.message.slice(i + 3).toLowerCase()) || null;
+      }
+    }
+
+    const asserts = items.filter((i) => i.kind === "pass" || i.kind === "fail");
+    return {
+      data,
+      run,
+      t0,
+      span: Math.max(1, tEnd - t0),
+      nodes,
+      byId,
+      root: nodes[0],
+      items,
+      runEntries,
+      gallery,
+      asserts,
+      assets,
+      asset(id) {
+        if (!assets.has(id)) {
+          const el = document.getElementById(id);
+          assets.set(id, el ? `data:${el.dataset.mime};base64,${el.textContent.trim()}` : "");
+        }
+        return assets.get(id);
+      },
+    };
+  }
+
+  function kindOf(e) {
+    if (e.level === "assert") return e.message.startsWith("⊭") ? "fail" : "pass";
+    if (e.level === "snapshot") return "snapshot";
+    if (e.level === "artifact") return "artifact";
+    if (e.level === "error") return "error";
+    if (e.level === "run") return "run";
+    if (e.level === "event" && e.source === "cancel") return "cancel";
+    if (e.level === "event" && e.source === "lifecycle") return "lifecycle";
+    if (e.level === "event") return "event";
+    return "info";
+  }
+
+  function labelOf(e, kind) {
+    const m = e.message;
+    if (kind === "snapshot" || kind === "artifact") {
+      const i = m.lastIndexOf(" → ");
+      return i >= 0 ? m.slice(0, i) : m;
+    }
+    if (kind === "pass" || kind === "fail") return m.replace(/^[⊨⊭]\s*(pass|FAIL)\s*·\s*/, "");
+    if (kind === "error") return m.split("\n")[0];
+    if (kind === "event") {
+      // Command events repeat their source as a prefix — drop it.
+      let s = m.startsWith(e.source + " · ") ? m.slice(e.source.length + 3) : m;
+      s = s.split(" · ")[0];
+      return s;
+    }
+    return m;
+  }
+
+  // ── app ──────────────────────────────────────────────────
+  function App(model) {
+    const app = document.getElementById("app");
+    const state = {
+      view: "timeline",
+      selected: model.root.id,
+      collapsed: new Set(),
+      zoom: d3.zoomIdentity,
+      detailTab: "overview",
+      lowerTab: "snapshots",
+      filter: "",
+      pin: null,
+      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);
+
+    app.innerHTML = shellHtml(model);
+    const el = {
+      main: app.querySelector(".main"),
+      timeline: app.querySelector(".timeline"),
+      head: app.querySelector(".tl-head"),
+      axis: app.querySelector(".tl-head svg"),
+      body: app.querySelector(".tl-body"),
+      tree: app.querySelector(".tree"),
+      chart: app.querySelector(".chart"),
+      flame: app.querySelector(".flame-view"),
+      flow: app.querySelector(".flow-view"),
+      details: app.querySelector(".details"),
+      lower: app.querySelector(".lower"),
+      overview: app.querySelector(".overview svg"),
+      range: app.querySelector(".overview .range"),
+      windowSel: app.querySelector("#window"),
+    };
+    const tip = document.createElement("div");
+    tip.className = "tip";
+    tip.hidden = true;
+    document.body.appendChild(tip);
+
+    let W = 600; // chart pixel width (timeline + flame share the x mapping)
+    let baseX = d3.scaleLinear();
+    const xz = () => state.zoom.rescaleX(baseX);
+    let syncing = false;
+
+    // ── header controls ──
+    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);
+    el.windowSel.addEventListener("change", () => {
+      const ms = +el.windowSel.value;
+      if (!ms) return fit();
+      const [d0] = xz().domain();
+      zoomToDomain(Math.max(0, d0), Math.max(0, d0) + ms);
+    });
+    app.querySelector("#more").addEventListener("click", (ev) => openMenu(ev.currentTarget));
+
+    // ── zoom behaviours ──
+    const chartZoom = d3
+      .zoom()
+      .scaleExtent([1, 5000])
+      .filter((e) => (e.type === "wheel" ? e.ctrlKey || e.metaKey : !e.button && e.type !== "dblclick"))
+      .on("zoom", (e) => onZoom(e.transform));
+    const flameZoom = d3
+      .zoom()
+      .scaleExtent([1, 5000])
+      .filter((e) => !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));
+
+    function activeZoom() {
+      return state.view === "flame"
+        ? { z: flameZoom, sel: d3.select(el.flame).select("svg") }
+        : { z: chartZoom, sel: d3.select(el.chart).select("svg") };
+    }
+    function onZoom(t) {
+      state.zoom = t;
+      if (!syncing) {
+        syncing = true;
+        // keep the other x-view's internal transform in step
+        const other = state.view === "flame" ? d3.select(el.chart).select("svg") : d3.select(el.flame).select("svg");
+        const oz = state.view === "flame" ? chartZoom : flameZoom;
+        if (!other.empty()) other.call(oz.transform, t);
+        syncing = false;
+      }
+      redrawX();
+    }
+    function zoomBy(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]);
+    }
+    function fit() {
+      if (state.view === "flow") return fitFlow();
+      const { z, sel } = activeZoom();
+      sel.transition().duration(250).call(z.transform, d3.zoomIdentity);
+    }
+    function zoomToDomain(a, b) {
+      const x0 = baseX(a);
+      const x1 = baseX(b);
+      if (!(x1 > x0)) return;
+      const k = Math.max(1, W / (x1 - x0));
+      const t = d3.zoomIdentity.scale(k).translate(-x0, 0);
+      const { z, sel } = activeZoom();
+      sel.call(z.transform, t);
+    }
+
+    // ── layout ──
+    function measure() {
+      const sb = el.body.offsetWidth - el.body.clientWidth;
+      el.head.style.paddingRight = `${sb}px`;
+      W = Math.max(200, state.view === "flame" ? el.flame.clientWidth : el.chart.clientWidth);
+      const span = model.span;
+      baseX = d3.scaleLinear().domain([-span * 0.01, span * 1.015]).range([0, W]);
+      for (const z of [chartZoom, flameZoom]) z.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));
+      el.timeline.classList.toggle("no-tree", v === "flame");
+      el.body.hidden = v !== "timeline";
+      el.head.hidden = v === "flow";
+      el.flame.hidden = v !== "flame";
+      el.flow.hidden = v !== "flow";
+      el.windowSel.disabled = v === "flow";
+      renderAll();
+    }
+
+    // ── tree + timeline ──
+    function visible() {
+      const out = [];
+      (function walk(n) {
+        out.push(n);
+        if (!state.collapsed.has(n.id)) n.children.forEach(walk);
+      })(model.root);
+      return out;
+    }
+
+    function renderTree(rows) {
+      el.tree.innerHTML = rows.map((n) => treeRowHtml(n)).join("");
+      el.tree.querySelectorAll(".row").forEach((r) => {
+        const n = model.byId.get(r.dataset.id);
+        r.addEventListener("click", (ev) => {
+          if (ev.target.closest(".twist")) {
+            toggle(n);
+            return;
+          }
+          select(n.id);
+        });
+        r.addEventListener("dblclick", () => focusNode(n));
+      });
+    }
+    function treeRowHtml(n) {
+      const guides = Array.from({ length: n.depth }, () => '<span class="guide"></span>').join("");
+      const open = !state.collapsed.has(n.id);
+      const twist = n.children.length
+        ? `<button class="twist ${open ? "open" : ""}" title="${open ? "Collapse" : "Expand"}">${svgIcon("chevron")}</button>`
+        : '<span class="twist"></span>';
+      const color = colorOf(n);
+      const rest = (n.v.tags || []).filter((t) => t !== displayName(n));
+      const tags = rest.length ? `<span class="tagchip">${esc(rest.join(" · "))}</span>` : "";
+      return `<div class="row ${state.selected === n.id ? "selected" : ""}" data-id="${esc(n.id)}" title="${esc(n.v.path)}">
+        <div class="name" style="padding-left:${n.depth ? 4 : 10}px">${guides}${twist}
+          <span class="icon" style="color:${color};background:${alpha(color, 0.16)}">${svgIcon(iconOf(n))}</span>
+          <span class="label">${esc(displayName(n))}</span>${tags}
+        </div>
+        <div class="status"><span class="dot ${n.status}"></span>${esc(n.status)}</div>
+        <div class="dur">${fmtDur(n.duration)}</div>
+      </div>`;
+    }
+    function toggle(n) {
+      if (state.collapsed.has(n.id)) state.collapsed.delete(n.id);
+      else state.collapsed.add(n.id);
+      renderTimeline();
+    }
+
+    let chartSvg = null;
+    let rowsNow = [];
+    function renderTimeline() {
+      rowsNow = visible();
+      renderTree(rowsNow);
+      const H = rowsNow.length * ROW_H + 8;
+      d3.select(el.chart).selectAll("svg").remove();
+      chartSvg = d3
+        .select(el.chart)
+        .append("svg")
+        .attr("width", W)
+        .attr("height", H)
+        .on("mousemove", (ev) => moveCursor(d3.pointer(ev)[0]))
+        .on("mouseleave", () => moveCursor(null));
+      chartSvg.append("g").attr("class", "grid");
+      chartSvg.append("g").attr("class", "links");
+      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.call(chartZoom).call(chartZoom.transform, state.zoom);
+      redrawX();
+    }
+
+    function redrawX() {
+      const x = xz();
+      updateAxis(x);
+      updateWindowLabel(x);
+      updateOverviewBrush(x);
+      if (state.view === "timeline" && chartSvg) drawRows(x);
+      if (state.view === "flame") drawFlame(x);
+    }
+
+    function drawRows(x) {
+      const H = rowsNow.length * ROW_H + 8;
+      const ticks = x.ticks(Math.max(2, Math.floor(W / 90)));
+      chartSvg
+        .select(".grid")
+        .selectAll("line")
+        .data(ticks)
+        .join("line")
+        .attr("x1", (d) => x(d))
+        .attr("x2", (d) => x(d))
+        .attr("y1", 0)
+        .attr("y2", H);
+      const index = new Map(rowsNow.map((n, i) => [n.id, i]));
+      // parent → child elbows
+      const links = rowsNow.filter((n) => n.parent && index.has(n.parent.id));
+      chartSvg
+        .select(".links")
+        .selectAll("path")
+        .data(links, (n) => n.id)
+        .join("path")
+        .attr("class", "link")
+        .attr("d", (n) => {
+          const pi = index.get(n.parent.id);
+          const ci = index.get(n.id);
+          const cx = x(n.start);
+          const px = Math.max(x(n.parent.start) + 6, cx - 12);
+          const py = pi * ROW_H + BAR_Y + BAR_H;
+          const cy = ci * ROW_H + BAR_Y + BAR_H / 2;
+          return `M${px},${py}V${cy - 4}Q${px},${cy} ${px + 4},${cy}H${cx}`;
+        });
+
+      const g = chartSvg
+        .select(".rows")
+        .selectAll("g.r")
+        .data(rowsNow, (n) => n.id)
+        .join((enter) => {
+          const r = enter.append("g").attr("class", "r");
+          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");
+          return r;
+        })
+        .attr("transform", (_n, i) => `translate(0,${i * ROW_H})`);
+
+      g.select("rect.bar")
+        .attr("x", (n) => x(n.start))
+        .attr("width", (n) => Math.max(3, x(n.end) - x(n.start)))
+        .attr("fill", (n) => colorOf(n))
+        .attr("fill-opacity", (n) => (n.status === "cancelled" ? 0.55 : 0.92))
+        .attr("stroke", (n) => (n.status === "failed" ? css("--fail") : null))
+        .attr("stroke-width", (n) => (n.status === "failed" ? 2 : null))
+        .attr("stroke-dasharray", (n) => (n.status === "cancelled" ? "4 3" : null))
+        .classed("selected", (n) => n.id === state.selected)
+        .on("click", (ev, n) => {
+          ev.stopPropagation();
+          select(n.id);
+        })
+        .on("dblclick", (ev, n) => {
+          ev.stopPropagation();
+          focusNode(n);
+        })
+        .on("mouseenter", (ev, n) => showTip(ev, nodeTip(n)))
+        .on("mousemove", (ev) => moveTip(ev))
+        .on("mouseleave", hideTip);
+
+      g.select("text.bar-label").each(function (n) {
+        const t = d3.select(this);
+        const x0 = x(n.start);
+        const w = x(n.end) - x0;
+        const text = `${displayName(n)} (${fmtDur(n.duration)})`;
+        const need = text.length * 6.6 + 14;
+        const inside = w >= need;
+        const clipX = Math.max(x0, 0);
+        t.text(inside ? text : w > 60 ? truncate(text, (w - 14) / 6.6) : text)
+          .classed("outside", !inside && w <= 60)
+          .attr("x", !inside && w <= 60 ? x0 + Math.max(w, 3) + 6 : Math.min(clipX + 8, x0 + w - 20));
+      });
+
+      g.select("g.marks").each(function (n) {
+        drawMarks(d3.select(this), n, x);
+      });
+
+      chartSvg.select("line.pin").attr("x1", state.pin != null ? x(state.pin) : -10).attr("x2", state.pin != null ? x(state.pin) : -10);
+    }
+
+    function drawMarks(g, n, x) {
+      const cy = BAR_Y + BAR_H / 2;
+      // cluster marks closer than 4px so a chatty node draws a readable line of dots
+      const marks = [];
+      let last = -Infinity;
+      for (const m of n.marks) {
+        const px = x(m.t);
+        if (px - last < 4 && marks.length) {
+          marks[marks.length - 1].more.push(m);
+          continue;
+        }
+        marks.push({ m, px, more: [] });
+        last = px;
+      }
+      g.selectAll("circle.mark")
+        .data(marks)
+        .join("circle")
+        .attr("class", "mark")
+        .attr("cx", (d) => d.px)
+        .attr("cy", cy)
+        .attr("r", (d) => (d.more.length ? 6 : 5))
+        .attr("fill", (d) => css(MARK[worst(d)].color))
+        .on("click", (ev, d) => {
+          ev.stopPropagation();
+          openItem(d.m);
+        })
+        .on("mouseenter", (ev, d) => showTip(ev, markTip(d)))
+        .on("mousemove", (ev) => moveTip(ev))
+        .on("mouseleave", hideTip);
+      // labels under the bar, skipped where they would collide
+      const labels = [];
+      let edge = -Infinity;
+      for (const d of marks) {
+        const text = truncate(d.more.length ? `${d.m.label} +${d.more.length}` : d.m.label, 22);
+        const w = text.length * 6 + 8;
+        if (d.px - 6 < edge) continue;
+        labels.push({ d, text });
+        edge = d.px + w;
+      }
+      // a label that would run off the right edge hangs left of its mark instead
+      const flip = (l) => l.d.px - 4 + l.text.length * 6 > W;
+      g.selectAll("text.mark-label")
+        .data(labels)
+        .join("text")
+        .attr("class", "mark-label")
+        .attr("x", (l) => (flip(l) ? l.d.px + 4 : l.d.px - 4))
+        .attr("text-anchor", (l) => (flip(l) ? "end" : "start"))
+        .attr("y", BAR_Y + BAR_H + 13)
+        .text((l) => l.text);
+    }
+    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;
+      return all[0];
+    }
+
+    // ── axis + cursor ──
+    function updateAxis(x) {
+      const svg = d3.select(el.axis);
+      if (state.view === "flow") return;
+      const w = state.view === "flame" ? 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));
+      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);
+    }
+    function moveCursor(px) {
+      const svgs = [chartSvg, flameSvg].filter(Boolean);
+      for (const s of svgs) {
+        s.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("");
+      else {
+        const t = xz().invert(px);
+        label.attr("x", px + 4).text(fmtTick(Math.max(0, t)));
+      }
+    }
+    function updateWindowLabel(x) {
+      const [a, b] = x.domain();
+      const span = b - a;
+      const opt = el.windowSel.querySelector("option[value='0']");
+      opt.textContent = `${fmtTick(span)} window`;
+      el.windowSel.value = "0";
+    }
+
+    // ── flame view ──
+    let flameSvg = null;
+    function renderFlame() {
+      d3.select(el.flame).selectAll("svg").remove();
+      flameSvg = d3
+        .select(el.flame)
+        .append("svg")
+        .on("mousemove", (ev) => moveCursor(d3.pointer(ev)[0]))
+        .on("mouseleave", () => moveCursor(null));
+      flameSvg.append("g").attr("class", "grid");
+      flameSvg.append("g").attr("class", "cells");
+      flameSvg.append("line").attr("class", "cursor").attr("y1", 0).attr("y2", 4000).attr("visibility", "hidden");
+      flameSvg.call(flameZoom).call(flameZoom.transform, state.zoom);
+      redrawX();
+    }
+    function drawFlame(x) {
+      if (!flameSvg) return;
+      const H = el.flame.clientHeight;
+      const ticks = x.ticks(Math.max(2, Math.floor(W / 90)));
+      flameSvg
+        .select(".grid")
+        .selectAll("line")
+        .data(ticks)
+        .join("line")
+        .attr("x1", (d) => x(d))
+        .attr("x2", (d) => x(d))
+        .attr("y1", 0)
+        .attr("y2", H);
+      const cells = flameSvg
+        .select(".cells")
+        .selectAll("g.cell")
+        .data(model.nodes, (n) => n.id)
+        .join((enter) => {
+          const g = enter.append("g").attr("class", "cell");
+          g.append("rect").attr("class", "flame-rect").attr("rx", 3).attr("height", FLAME_ROW - 2);
+          g.append("text").attr("class", "flame-text").attr("y", FLAME_ROW / 2 + 3);
+          return g;
+        })
+        .attr("transform", (n) => `translate(0,${8 + n.depth * FLAME_ROW})`);
+      cells
+        .select("rect")
+        .attr("x", (n) => x(n.start))
+        .attr("width", (n) => Math.max(1, x(n.end) - x(n.start)))
+        .attr("fill", (n) => colorOf(n))
+        .attr("fill-opacity", (n) => (n.status === "cancelled" ? 0.55 : 0.92))
+        .classed("selected", (n) => n.id === state.selected)
+        .on("click", (ev, n) => select(n.id))
+        .on("dblclick", (ev, n) => {
+          ev.stopPropagation();
+          focusNode(n);
+        })
+        .on("mouseenter", (ev, n) => showTip(ev, nodeTip(n)))
+        .on("mousemove", (ev) => moveTip(ev))
+        .on("mouseleave", hideTip);
+      cells
+        .select("text")
+        .attr("x", (n) => Math.max(x(n.start), 0) + 5)
+        .text((n) => {
+          const w = x(n.end) - Math.max(x(n.start), 0);
+          return w < 34 ? "" : truncate(`${displayName(n)} ${fmtDur(n.duration)}`, (w - 10) / 6.2);
+        });
+    }
+
+    // ── flow view ──
+    let flowG = null;
+    let flowBounds = null;
+    function renderFlow() {
+      d3.select(el.flow).selectAll("svg").remove();
+      const svg = d3.select(el.flow).append("svg");
+      flowG = svg.append("g");
+      const h = d3.hierarchy(model.root, (n) => n.children);
+      const CW = 210;
+      const CH = 46;
+      d3.tree().nodeSize([CH + 18, CW + 70])(h);
+      let minX = Infinity;
+      let maxX = -Infinity;
+      let maxY = 0;
+      h.each((d) => {
+        minX = Math.min(minX, d.x);
+        maxX = Math.max(maxX, d.x);
+        maxY = Math.max(maxY, d.y);
+      });
+      flowBounds = { x0: -20, y0: minX - CH, x1: maxY + CW + 20, y1: maxX + CH };
+      flowG
+        .append("g")
+        .selectAll("path")
+        .data(h.links())
+        .join("path")
+        .attr("class", "flow-link")
+        .attr("d", (l) => {
+          const sx = l.source.y + CW;
+          const sy = l.source.x;
+          const tx = l.target.y;
+          const ty = l.target.x;
+          const mx = (sx + tx) / 2;
+          return `M${sx},${sy}C${mx},${sy} ${mx},${ty} ${tx},${ty}`;
+        });
+      const card = flowG
+        .append("g")
+        .selectAll("g")
+        .data(h.descendants())
+        .join("g")
+        .attr("class", (d) => `flow-card ${d.data.id === state.selected ? "selected" : ""}`)
+        .attr("transform", (d) => `translate(${d.y},${d.x - CH / 2})`)
+        .style("cursor", "pointer")
+        .on("click", (ev, d) => select(d.data.id))
+        .on("mouseenter", (ev, d) => showTip(ev, nodeTip(d.data)))
+        .on("mousemove", (ev) => moveTip(ev))
+        .on("mouseleave", hideTip);
+      card.append("rect").attr("class", "box").attr("width", CW).attr("height", CH).attr("rx", 8);
+      card.append("rect").attr("width", 5).attr("height", CH - 12).attr("x", 6).attr("y", 6).attr("rx", 2).attr("fill", (d) => colorOf(d.data));
+      card.append("text").attr("x", 20).attr("y", 19).text((d) => truncate(displayName(d.data), 27));
+      card
+        .append("text")
+        .attr("class", "sub")
+        .attr("x", 20)
+        .attr("y", 35)
+        .text((d) => `${d.data.status} · ${fmtDur(d.data.duration)} · +${fmtTick(d.data.start)}`);
+      card
+        .append("circle")
+        .attr("cx", CW - 14)
+        .attr("cy", 14)
+        .attr("r", 4)
+        .attr("fill", (d) => css(statusVar(d.data.status)));
+      svg.call(flowZoom);
+      fitFlow(true);
+    }
+    function fitFlow(instant) {
+      const svg = d3.select(el.flow).select("svg");
+      if (svg.empty() || !flowBounds) return;
+      const w = el.flow.clientWidth;
+      const h = el.flow.clientHeight;
+      const b = flowBounds;
+      const k = Math.min(1.2, Math.min(w / (b.x1 - b.x0), h / (b.y1 - b.y0)) * 0.95);
+      const t = d3.zoomIdentity
+        .translate(w / 2 - (k * (b.x0 + b.x1)) / 2, h / 2 - (k * (b.y0 + b.y1)) / 2)
+        .scale(k);
+      (instant ? svg : svg.transition().duration(250)).call(flowZoom.transform, t);
+    }
+
+    // ── overview minimap ──
+    let ovBrush = null;
+    let ovX = null;
+    let brushing = false;
+    function renderOverview() {
+      const svg = d3.select(el.overview);
+      svg.selectAll("*").remove();
+      const w = el.overview.clientWidth || 220;
+      const h = el.overview.clientHeight || 120;
+      ovX = d3.scaleLinear().domain(baseX.domain()).range([0, w]);
+      const rowH = Math.max(1.5, Math.min(7, (h - 6) / model.nodes.length));
+      svg
+        .append("g")
+        .selectAll("rect")
+        .data(model.nodes)
+        .join("rect")
+        .attr("x", (n) => ovX(n.start))
+        .attr("width", (n) => Math.max(1, ovX(n.end) - ovX(n.start)))
+        .attr("y", (_n, i) => 3 + i * rowH)
+        .attr("height", Math.max(1, rowH - 1))
+        .attr("rx", Math.min(2, rowH / 2))
+        .attr("fill", (n) => colorOf(n));
+      ovBrush = d3
+        .brushX()
+        .extent([[0, 0], [w, h]])
+        .on("start", (ev) => {
+          if (ev.sourceEvent) brushing = true;
+        })
+        .on("brush end", (ev) => {
+          if (ev.type === "end") brushing = false;
+          if (!ev.sourceEvent || !ev.selection) return;
+          const [a, b] = ev.selection.map(ovX.invert);
+          zoomToDomain(a, b);
+        });
+      svg.append("g").attr("class", "brush").call(ovBrush);
+      el.range.textContent = `0s – ${fmtTick(model.span)} (${fmtDur(model.root.duration)} body)`;
+      updateOverviewBrush(xz());
+    }
+    function updateOverviewBrush(x) {
+      if (!ovBrush || !ovX || brushing) return;
+      const [a, b] = x.domain();
+      const s = [Math.max(0, ovX(a)), Math.min(ovX.range()[1], ovX(b))];
+      d3.select(el.overview).select("g.brush").call(ovBrush.move, s);
+    }
+
+    // ── selection + details ──
+    function select(id, tab) {
+      state.selected = id;
+      if (tab) state.detailTab = tab;
+      state.details = true;
+      el.main.classList.remove("no-details");
+      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);
+      if (flameSvg) flameSvg.selectAll("rect.flame-rect").classed("selected", (n) => n.id === id);
+      d3.select(el.flow).selectAll("g.flow-card").classed("selected", (d) => d.data.id === id);
+      renderDetails();
+    }
+    function focusNode(n) {
+      const pad = Math.max(n.end - n.start, 50) * 0.08;
+      zoomToDomain(n.start - pad, n.end + pad);
+    }
+    function revealRow(n) {
+      let p = n.parent;
+      let changed = false;
+      while (p) {
+        if (state.collapsed.delete(p.id)) changed = true;
+        p = p.parent;
+      }
+      if (changed && state.view === "timeline") renderTimeline();
+      const row = el.tree.querySelector(`.row[data-id="${CSS.escape(n.id)}"]`);
+      if (row) row.scrollIntoView({ block: "nearest" });
+    }
+
+    function renderDetails() {
+      const n = model.byId.get(state.selected) || model.root;
+      const color = colorOf(n);
+      const tabs = [
+        ["overview", "Overview"],
+        ["args", "Args"],
+        ["events", `Events`],
+        ["logs", "Logs"],
+        ["snapshots", "Snapshots"],
+      ];
+      el.details.innerHTML = `
+        <div class="dh">Action details <button class="x" title="Close">${svgIcon("close", ' width="16" height="16"')}</button></div>
+        <div class="who">
+          <span class="icon" style="color:${color};background:${alpha(color, 0.16)}">${svgIcon(iconOf(n))}</span>
+          <span class="nm" title="${esc(n.name)}">${esc(displayName(n))}</span>
+          <span class="pill"><span class="dot ${n.status}"></span>${esc(n.status)}</span>
+        </div>
+        <div class="scroll">
+          <div class="kv">
+            <div class="k">Duration</div><div class="v">${fmtDur(n.duration)}</div>
+            <div class="k">Start</div><div class="v">${fmtRel(n.start)} (${fmtClock(n.startAbs)})</div>
+            <div class="k">End</div><div class="v">${fmtRel(n.end)} (${fmtClock(n.endAbs)})</div>
+            <div class="k">Path</div><div class="v">${esc(n.v.path)}</div>
+            ${n.v.definedAt ? `<div class="k">Defined at</div><div class="v"><a href="${esc(editorUrl(n.v.definedAt))}" title="${esc(n.v.definedAt)}">${esc(basename(n.v.definedAt))}</a></div>` : ""}
+          </div>
+          <div class="tabs">${tabs
+            .map(([k, l]) => `<button class="tab ${state.detailTab === k ? "active" : ""}" data-tab="${k}">${l}</button>`)
+            .join("")}</div>
+          <div class="tabbody">${detailTabHtml(n)}</div>
+        </div>`;
+      el.details.querySelector(".x").addEventListener("click", () => {
+        state.details = false;
+        el.main.classList.add("no-details");
+        relayout();
+      });
+      el.details.querySelectorAll(".tab").forEach((b) =>
+        b.addEventListener("click", () => {
+          state.detailTab = b.dataset.tab;
+          renderDetails();
+        })
+      );
+      wireItems(el.details);
+    }
+
+    function detailTabHtml(n) {
+      const tab = state.detailTab;
+      if (tab === "args") {
+        return n.v.args && n.v.args.length ? `<pre class="code">${esc(json(n.v.args.length === 1 ? n.v.args[0] : n.v.args))}</pre>` : '<div class="muted">No arguments.</div>';
+      }
+      if (tab === "events") {
+        const evs = n.entries.filter((i) => i.kind !== "info");
+        return evs.length ? `<ul class="ev-list">${evs.map((i) => evLi(i, n)).join("")}</ul>` : '<div class="muted">No events.</div>';
+      }
+      if (tab === "logs") {
+        const logs = n.entries.filter((i) => i.kind === "info" || i.kind === "error");
+        return logs.length
+          ? `<pre class="code">${logs.map((i) => `<span class="muted">${esc(fmtRel(i.t - n.start).padEnd(8))}</span>${esc(i.e.message)}`).join("\n")}</pre>`
+          : '<div class="muted">No log output.</div>';
+      }
+      if (tab === "snapshots") {
+        const g = model.gallery.filter((x) => x.node === n);
+        return g.length ? `<div class="thumbs">${g.map(thumbHtml).join("")}</div>` : '<div class="muted">No snapshots or files.</div>';
+      }
+      // overview
+      const fails = model.run.failures.filter((f) => f.action === n.id || f.action === n.name || f.action === n.v.path);
+      const asserts = n.entries.filter((i) => i.kind === "pass" || i.kind === "fail");
+      const g = model.gallery.filter((x) => x.node === n);
+      return `
+        <div class="kv">
+          <div class="k">Id</div><div class="v">${esc(n.id)}</div>
+          ${n.name !== displayName(n) ? `<div class="k">Name</div><div class="v">${esc(n.name)}</div>` : ""}
+          <div class="k">Tags</div><div class="v">${n.v.tags.length ? esc(n.v.tags.join(", ")) : '<span class="muted">none</span>'}</div>
+          <div class="k">Children</div><div class="v">${n.children.length}</div>
+          <div class="k">Events</div><div class="v">${n.marks.length}</div>
+        </div>
+        ${fails.length ? `<div class="section-title" style="color:var(--fail)">Failures (${fails.length})</div>${fails.map((f) => `<pre class="code">${esc(f.error)}</pre>`).join("")}` : ""}
+        ${g.length ? `<div class="section-title">Snapshots (${g.length})</div><div class="thumbs">${g.slice(0, 6).map(thumbHtml).join("")}</div>` : ""}
+        <div class="section-title">Related logs</div>
+        <div class="kv"><div class="k">${svgIcon("file", ' width="14" height="14"')}</div><div class="v"><a href="${esc(fileUrl(n.v.logFile))}" title="${esc(n.v.logFile)}">${esc(basename(n.v.logFile))}</a></div></div>
+        <div class="section-title">Assertions (${asserts.length})</div>
+        ${asserts.length ? `<ul class="ev-list">${asserts.map((i) => evLi(i, n)).join("")}</ul>` : '<div class="muted">No assertions in this action.</div>'}`;
+    }
+
+    function evLi(i, n) {
+      const mk = MARK[i.kind] || MARK.event;
+      const color = css(mk.color);
+      const text = i.kind === "lifecycle" ? i.e.message : i.label;
+      return `<li data-item="${i.idx}" style="cursor:pointer">
+        <span class="t">${fmtRel(i.t - (n ? n.start : 0))}</span>
+        <span class="ev-ico" style="background:${alpha(color, 0.2)};color:${color}">${svgIcon(mk.icon)}</span>
+        <span class="m" title="${esc(i.e.message)}">${esc(truncate(text, 140))}</span></li>`;
+    }
+
+    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>`;
+      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>`;
+    }
+
+    function wireItems(root) {
+      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-item]").forEach((t) =>
+        t.addEventListener("click", () => openItem(model.items[+t.dataset.item]))
+      );
+    }
+
+    function openItem(item) {
+      if (!item) return;
+      setPin(item.t);
+      if (item.node && item.node.id !== state.selected) select(item.node.id, "events");
+      if (item.gallery) openGallery(item.gallery);
+    }
+    function setPin(t) {
+      state.pin = t;
+      redrawX();
+    }
+
+    // ── lower panel ──
+    function renderLower() {
+      const tabs = [
+        ["snapshots", `Snapshots (${model.gallery.length})`],
+        ["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>
+        <div class="body">${lowerBodyHtml()}</div>`;
+      el.lower.querySelectorAll(".tab").forEach((b) =>
+        b.addEventListener("click", () => {
+          state.lowerTab = b.dataset.tab;
+          renderLower();
+        })
+      );
+      const input = el.lower.querySelector(".filter");
+      input.addEventListener("input", () => {
+        state.filter = input.value;
+        el.lower.querySelector(".body").innerHTML = lowerBodyHtml();
+        wireLower();
+      });
+      wireLower();
+    }
+    function wireLower() {
+      const body = el.lower.querySelector(".body");
+      wireItems(body);
+      body.querySelectorAll("tr[data-row]").forEach((tr) =>
+        tr.addEventListener("click", () => openItem(model.items[+tr.dataset.row]))
+      );
+    }
+    function matches(...parts) {
+      const q = state.filter.trim().toLowerCase();
+      return !q || parts.some((p) => String(p || "").toLowerCase().includes(q));
+    }
+    function lowerBodyHtml() {
+      const tab = state.lowerTab;
+      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>';
+        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" : ""}`;
+            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></div><div class="sz">${sub}</div></div>`;
+          })
+          .join("")}</div>`;
+      }
+      const pick =
+        tab === "logs"
+          ? (i) => i.kind === "info" || i.kind === "error"
+          : tab === "asserts"
+            ? (i) => i.kind === "pass" || i.kind === "fail"
+            : (i) => i.kind !== "info";
+      const rows = [];
+      for (let idx = 0; idx < model.items.length; idx++) {
+        const i = model.items[idx];
+        if (!pick(i)) continue;
+        if (!matches(i.e.message, i.e.path, i.e.source)) continue;
+        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>`;
+      return `<table class="list"><tbody>${rows
+        .map(({ i, idx }) => {
+          const mk = MARK[i.kind];
+          const ico = mk
+            ? `<span class="ev-ico" style="background:${alpha(css(mk.color), 0.2)};color:${css(mk.color)}">${svgIcon(mk.icon)}</span>`
+            : "";
+          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>' : ""}`;
+    }
+
+    // ── modal ──
+    function openGallery(g) {
+      if (!g) return;
+      if (g.t != null) setPin(g.t);
+      let body;
+      let actions = "";
+      const pathOf = g.type === "file" ? g.f.file : g.s.file;
+      if (g.type === "file" && g.image) {
+        const src = model.asset(g.f.asset);
+        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>`;
+      } 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"]
+        .filter(Boolean)
+        .join(" · ");
+      const m = document.createElement("div");
+      m.className = "modal";
+      m.innerHTML = `<div class="box"><div class="mh"><span class="nm">${esc(g.name)} <span class="muted" style="font-weight:400">${esc(sub)}</span></span>
+        ${actions}
+        <a class="btn solo" href="${esc(fileUrl(pathOf))}">${svgIcon("file")}Open</a>
+        <button class="btn solo" data-copy>${svgIcon("copy")}Copy path</button>
+        <button class="btn solo" data-close title="Close">${svgIcon("close")}</button></div>
+        <div class="mb">${body}</div></div>`;
+      const close = () => {
+        m.remove();
+        document.removeEventListener("keydown", onKey);
+      };
+      const onKey = (e) => e.key === "Escape" && close();
+      m.addEventListener("click", (e) => e.target === m && close());
+      m.querySelector("[data-close]").addEventListener("click", close);
+      m.querySelector("[data-copy]").addEventListener("click", () => copy(pathOf));
+      document.addEventListener("keydown", onKey);
+      document.body.appendChild(m);
+      if (g.node && g.node.id !== state.selected) select(g.node.id);
+    }
+
+    function openMenu(anchor) {
+      const r = anchor.getBoundingClientRect();
+      const m = document.createElement("div");
+      m.className = "menu";
+      m.style.top = `${r.bottom + 6}px`;
+      m.style.right = `${window.innerWidth - r.right}px`;
+      m.innerHTML = `<button data-a="theme">${svgIcon("sun", ' width="14" height="14"')} Toggle light / dark</button>
+        <button data-a="data">${svgIcon("download", ' width="14" height="14"')} Download run data (JSON)</button>
+        <button data-a="folder">${svgIcon("copy", ' width="14" height="14"')} Copy run folder path</button>
+        <button data-a="expand">Expand all</button>
+        <button data-a="collapse">Collapse all</button>`;
+      const close = () => {
+        m.remove();
+        document.removeEventListener("mousedown", away, true);
+      };
+      const away = (e) => !m.contains(e.target) && close();
+      m.addEventListener("click", (e) => {
+        const a = e.target.closest("button")?.dataset.a;
+        close();
+        if (a === "theme") {
+          toggleTheme();
+          renderAll();
+          renderDetails();
+          renderLower();
+        }
+        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);
+          renderAll();
+        }
+      });
+      document.addEventListener("mousedown", away, true);
+      document.body.appendChild(m);
+    }
+
+    // ── tooltips ──
+    function nodeTip(n) {
+      return `<div class="tt">${esc(n.name)}</div>
+        <div class="ts"><span class="dot ${n.status}"></span> ${esc(n.status)} · ${fmtDur(n.duration)}</div>
+        <div class="ts">${fmtRel(n.start)} → ${fmtRel(n.end)}</div>
+        ${n.v.tags.length ? `<div class="ts">${esc(n.v.tags.join(" · "))}</div>` : ""}`;
+    }
+    function markTip(d) {
+      const m = d.m;
+      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>` : "";
+      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}`;
+    }
+    function showTip(ev, html) {
+      tip.innerHTML = html;
+      tip.hidden = false;
+      moveTip(ev);
+    }
+    function moveTip(ev) {
+      const pad = 14;
+      const r = tip.getBoundingClientRect();
+      let x = ev.clientX + pad;
+      let y = ev.clientY + pad;
+      if (x + r.width > window.innerWidth - 8) x = ev.clientX - r.width - pad;
+      if (y + r.height > window.innerHeight - 8) y = ev.clientY - r.height - pad;
+      tip.style.left = `${x}px`;
+      tip.style.top = `${y}px`;
+    }
+    function hideTip() {
+      tip.hidden = true;
+    }
+
+    // ── render orchestration ──
+    function renderAll() {
+      measure();
+      if (state.view === "timeline") renderTimeline();
+      if (state.view === "flame") renderFlame();
+      if (state.view === "flow") renderFlow();
+      renderOverview();
+    }
+    function relayout() {
+      const keep = state.zoom;
+      measure();
+      state.zoom = keep;
+      renderAll();
+    }
+    let resizeTimer = 0;
+    window.addEventListener("resize", () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(relayout, 120);
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.target.closest && e.target.closest("input")) return;
+      if (e.key === "+" || e.key === "=") zoomBy(1.6);
+      else if (e.key === "-") zoomBy(1 / 1.6);
+      else if (e.key === "0") fit();
+      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)))];
+        if (next) {
+          e.preventDefault();
+          select(next.id);
+          revealRow(next);
+        }
+      }
+    });
+
+    setView("timeline");
+    renderDetails();
+    renderLower();
+  }
+
+  // ── shell markup ─────────────────────────────────────────
+  function shellHtml(model) {
+    const run = model.run;
+    const ok = run.ok;
+    const a = run.assertions;
+    const total = a.passed + a.failed;
+    const assertText = total ? `${a.passed} / ${total} assertions passed` : "no assertions";
+    const fails = run.failures.length ? `<span class="sep">•</span><span style="color:var(--fail)">${run.failures.length} failure${run.failures.length > 1 ? "s" : ""}</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">
+          <h1 title="${esc(model.data.folder)}">Run: ${esc(model.data.name)}</h1>
+          <div class="meta"><span class="dot ${ok ? "ok" : "failed"}"></span><span>${ok ? "passed" : "failed"}</span>
+            <span class="sep">•</span><span>${fmtDate(run.startedAt)}</span>
+            <span class="sep">•</span><span title="body ${fmtDur(run.duration)} · record ${fmtDur(model.span)}">${fmtDur(run.duration)}</span>
+            <span class="sep">•</span><span>${model.nodes.length} action${model.nodes.length > 1 ? "s" : ""}</span>
+            <span class="sep">•</span><span>${assertText}</span>${fails}
+          </div>
+        </div>
+        <div class="btn-group">
+          <button class="btn active" data-view="timeline">${svgIcon("timeline")}Timeline + Graph</button>
+          <button class="btn" data-view="flame">${svgIcon("flame")}Flame Graph</button>
+          <button class="btn" data-view="flow">${svgIcon("flow")}Flow</button>
+        </div>
+        <div class="btn-group">
+          <button class="btn" id="zout" title="Zoom out (-)">${svgIcon("zoomOut")}</button>
+          <button class="btn" id="zin" title="Zoom in (+)">${svgIcon("zoomIn")}</button>
+          <button class="btn" id="fit" title="Fit (0)">Fit</button>
+        </div>
+        <select id="window" class="btn solo" title="Visible window">
+          ${windows.map((w) => `<option value="${w}">${w ? fmtTick(w) : "window"}</option>`).join("")}
+        </select>
+        <button class="btn solo" id="more" title="More">${svgIcon("more")}</button>
+      </header>
+      <div class="main">
+        <section class="card timeline" style="--tree-w:420px;--row-h:${ROW_H}px;position:relative">
+          <div class="tl-head">
+            <div class="cols"><div>Action / Event</div><div>Status</div><div>Duration</div></div>
+            <svg></svg>
+          </div>
+          <div class="tl-body"><div class="tree"></div><div class="chart"></div></div>
+          <div class="flame-view" hidden style="top:34px"></div>
+          <div class="flow-view" hidden></div>
+        </section>
+        <aside class="card details"></aside>
+      </div>
+      <div class="bottom">
+        <section class="card lower"></section>
+        <section class="card legend">
+          <h3>Legend</h3>
+          <div class="grid2">
+            ${legendItem("--c1", "Action run", "bar")}
+            ${legendItem("--c2", "Snapshot", "dot")}
+            ${legendItem("--c3", "Process event", "dot")}
+            ${legendItem("--c6", "Artifact", "dot")}
+            ${legendItem("--ok", "Assert passed", "dot")}
+            ${legendItem("--fail", "Failure / error", "dot")}
+            ${legendItem("--cancel", "Cancelled", "dash")}
+            ${legendItem("--accent", "Pinned time", "line")}
+          </div>
+          <div class="muted" style="margin-top:12px;font-size:11px">Ctrl + wheel to zoom · drag to pan · double-click a bar to focus · ↑/↓ to step</div>
+        </section>
+        <section class="card overview"><h3>Overview</h3><div class="range"></div><svg></svg></section>
+      </div>`;
+  }
+  function legendItem(color, label, shape) {
+    const c = `var(${color})`;
+    const sw =
+      shape === "bar"
+        ? `<span style="width:16px;height:9px;border-radius:3px;background:${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>`;
+    return `<div class="li">${sw}${esc(label)}</div>`;
+  }
+
+  // ── helpers ──────────────────────────────────────────────
+  function colorOf(n) {
+    return n.branch < 0 ? css("--c1") : css(PALETTE[n.branch]);
+  }
+  function statusVar(s) {
+    return s === "ok" ? "--ok" : s === "failed" ? "--fail" : s === "cancelled" ? "--cancel" : "--running";
+  }
+  function alpha(color, a) {
+    const c = d3.color(color);
+    if (!c) return color;
+    c.opacity = a;
+    return c.formatRgb();
+  }
+  function truncate(s, n) {
+    n = Math.max(1, Math.floor(n));
+    return s.length > n ? `${s.slice(0, Math.max(1, n - 1))}…` : s;
+  }
+  function displayName(n) {
+    if (n.depth === 0) return "main";
+    const tag = n.v.tags && n.v.tags[0];
+    // Battery steps are named after their kind (`command`, `chromePage`); their first tag
+    // is what the om called them, which is the more useful label.
+    return tag && tag !== n.name && n.name.length > 28 ? tag : n.name;
+  }
+  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 (/chromepage|page:|tab/.test(s)) return "window";
+    if (/browser|chrome/.test(s)) return "globe";
+    if (/health|ready|gate|wait|port/.test(s)) return "pulse";
+    if (/drive|inspect|click/.test(s)) return "cursor";
+    if (/test|assert|validate/.test(s)) return "flask";
+    if (/snapshot|screenshot/.test(s)) return "camera";
+    if (/prompt|ask/.test(s)) return "chat";
+    if (/build|compile|bundle/.test(s)) return "box";
+    return "play";
+  }
+  function copy(text) {
+    const done = () => toast("Copied");
+    if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(text).then(done, () => fallbackCopy(text));
+    else fallbackCopy(text);
+  }
+  function fallbackCopy(text) {
+    const t = document.createElement("textarea");
+    t.value = text;
+    document.body.appendChild(t);
+    t.select();
+    try {
+      document.execCommand("copy");
+      toast("Copied");
+    } catch {
+      toast(text);
+    }
+    t.remove();
+  }
+  function toast(text) {
+    const t = document.createElement("div");
+    t.className = "toast";
+    t.textContent = text;
+    document.body.appendChild(t);
+    setTimeout(() => t.remove(), 1400);
+  }
+  function download(name, text, mime) {
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(new Blob([text], { type: mime }));
+    a.download = name;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  }
+  function toggleTheme() {
+    const root = document.documentElement;
+    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);
+    } catch {
+      /* storage may be unavailable on file:// */
+    }
+  }
+
+  // ── boot ─────────────────────────────────────────────────
+  const frame = () => new Promise((r) => requestAnimationFrame(() => setTimeout(r, 0)));
+  const step = (t) => {
+    const s = document.getElementById("loader-step");
+    if (s) s.textContent = t;
+  };
+  async function boot() {
+    try {
+      const saved = localStorage.getItem("omkit-report-theme");
+      if (saved) document.documentElement.dataset.theme = saved;
+    } catch {
+      /* ignore */
+    }
+    await frame();
+    step("Parsing the run record…");
+    await frame();
+    const data = JSON.parse(document.getElementById("omkit-data").textContent);
+    step(`Building ${data.run ? "the timeline" : "the view"}…`);
+    await frame();
+    const model = buildModel(data);
+    const app = document.getElementById("app");
+    app.hidden = false;
+    App(model);
+    await frame();
+    const loader = document.getElementById("loader");
+    loader.style.transition = "opacity 0.2s";
+    loader.style.opacity = "0";
+    setTimeout(() => loader.remove(), 220);
+  }
+  boot().catch((err) => {
+    step(`Could not render this run: ${err && err.message ? err.message : err}`);
+    console.error(err);
+  });
+})();