omkit 0.8.15 → 0.8.16

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

@@ -4,15 +4,15 @@
 (function () {
   "use strict";
 
+  const TIP_TAGS = 6; // tag chips a hover tooltip shows before "+N"
+  const TREE_TAGS = 4; // …and a timeline tree row
   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",
@@ -43,7 +43,6 @@
     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",
     code: "M8 7l-5 5 5 5M16 7l5 5-5 5",
-    ret: "M9 10l-4 4 4 4M5 14h11a4 4 0 0 0 4-4V5",
     external: "M14 4h6v6M20 4l-9 9M18 14v6H4V6h6",
   };
   const svgIcon = (name, extra) =>
@@ -78,10 +77,6 @@
   };
   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())}`;
@@ -311,7 +306,7 @@
       selected: model.root.id,
       collapsed: new Set(),
       zoom: d3.zoomIdentity,
-      detailTab: "overview",
+      detailOpen: new Set(["errors"]), // details-panel sections left open
       errFilter: "all",
       errHl: false,
       errOpen: new Set(),
@@ -332,7 +327,6 @@
       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"),
@@ -345,10 +339,9 @@
     tip.hidden = true;
     document.body.appendChild(tip);
 
-    let W = 600; // chart pixel width (timeline + flame share the x mapping)
+    let W = 600; // chart pixel width
     let baseX = d3.scaleLinear();
     const xz = () => state.zoom.rescaleX(baseX);
-    let syncing = false;
 
     // ── header controls ──
     app.querySelectorAll("[data-view]").forEach((b) =>
@@ -371,6 +364,18 @@
     info.addEventListener("mousemove", (ev) => moveTip(ev));
     info.addEventListener("mouseleave", hideTip);
     info.addEventListener("click", () => select(model.root.id));
+    const legendBtn = app.querySelector("#legend-btn");
+    const legend = app.querySelector("#legend");
+    const toggleLegend = (open) => {
+      legend.hidden = !open;
+      legendBtn.setAttribute("aria-expanded", String(open));
+      legendBtn.classList.toggle("active", open);
+    };
+    legendBtn.addEventListener("click", () => toggleLegend(legend.hidden));
+    document.addEventListener("mousedown", (e) => {
+      if (!legend.hidden && !legend.contains(e.target) && !legendBtn.contains(e.target)) toggleLegend(false);
+    });
+    document.addEventListener("keydown", (e) => e.key === "Escape" && !legend.hidden && toggleLegend(false));
 
     // ── zoom behaviours ──
     const chartZoom = d3
@@ -378,28 +383,13 @@
       .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.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));
 
     function activeZoom() {
-      return state.view === "flame"
-        ? { z: flameZoom, sel: d3.select(el.flame).select("svg") }
-        : { z: chartZoom, sel: d3.select(el.chart).select("svg") };
+      return { 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) {
@@ -427,19 +417,18 @@
     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);
+      W = Math.max(200, 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]]);
+      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));
-      el.timeline.classList.toggle("no-tree", v === "flame");
       el.body.hidden = v !== "timeline";
       el.head.hidden = v === "flow";
-      el.flame.hidden = v !== "flame";
+      el.timeline.classList.toggle("is-flow", v === "flow");
       el.flow.hidden = v !== "flow";
       el.windowSel.disabled = v === "flow";
       renderAll();
@@ -479,17 +468,17 @@
         ? `<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>` : "";
+      const tags = chipsHtml(n.v.tags, TREE_TAGS, 18);
       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}${
-            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 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>` : ""
+            }</span>
+            <span class="l2"><span class="st"><span class="dot ${n.status}"></span>${esc(n.status)}</span><span class="sep">·</span><span class="du">${fmtDur(n.duration)}</span>${tags}</span>
+          </span>
         </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) {
@@ -527,7 +516,6 @@
       updateWindowLabel(x);
       updateOverviewBrush(x);
       if (state.view === "timeline" && chartSvg) drawRows(x);
-      if (state.view === "flame") drawFlame(x);
     }
 
     function drawRows(x) {
@@ -575,9 +563,6 @@
           const cb = r.append("g").attr("class", "code-btn src");
           cb.append("circle").attr("r", 9);
           cb.append("text").attr("text-anchor", "middle").attr("y", 3.5).text("<>");
-          const rb = r.append("g").attr("class", "code-btn ret");
-          rb.append("circle").attr("r", 9);
-          rb.append("path").attr("d", ICON.ret).attr("transform", "translate(-6,-6) scale(0.5)");
           return r;
         })
         .attr("transform", (_n, i) => `translate(0,${i * ROW_H})`)
@@ -598,7 +583,7 @@
         const t = d3.select(this);
         const x0 = x(n.start);
         const w = x(n.end) - x0;
-        const text = `${displayName(n)} (${fmtDur(n.duration)})`;
+        const text = `${boxLabel(n)} (${fmtDur(n.duration)})`;
         const need = text.length * 6.6 + 14;
         const inside = w >= need;
         const clipX = Math.max(x0, 0);
@@ -617,32 +602,17 @@
         // …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);
-        // buttons stack away from the block: rightward when they sit after it, leftward before it
-        const dir = right + 8 <= W - 10 || left - 8 < 10 ? 1 : -1;
-        const src = hasCode(n);
-        const row = d3.select(this.parentNode);
-        row
+        d3.select(this.parentNode)
           .select("g.code-btn.src")
-          .style("display", src ? null : "none")
+          .style("display", hasPopup(n) ? null : "none")
           .attr("transform", `translate(${cx},${BAR_Y + BAR_H / 2})`);
-        row
-          .select("g.code-btn.ret")
-          .style("display", hasValue(n) ? null : "none")
-          .attr("transform", `translate(${src ? cx + dir * 21 : cx},${BAR_Y + BAR_H / 2})`);
       });
       g.select("g.code-btn.src")
         .on("click", (ev, n) => {
           ev.stopPropagation();
           toggleCode(n, ev);
         })
-        .on("mouseenter", (ev) => showTip(ev, "Show source"))
-        .on("mouseleave", hideTip);
-      g.select("g.code-btn.ret")
-        .on("click", (ev, n) => {
-          ev.stopPropagation();
-          toggleCode(n, ev, "value", true);
-        })
-        .on("mouseenter", (ev, n) => showTip(ev, `Returned: <span class="mono">${esc(valuePreview(n, 80))}</span>`))
+        .on("mouseenter", (ev, n) => showTip(ev, popupTip(n)))
         .on("mouseleave", hideTip);
       g.selectAll("rect.hit, text.bar-label").call(bindNode);
 
@@ -721,7 +691,7 @@
     function updateAxis(x) {
       const svg = d3.select(el.axis);
       if (state.view === "flow") return;
-      const w = state.view === "flame" ? W : el.chart.clientWidth || W;
+      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));
@@ -729,9 +699,8 @@
       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);
+      if (chartSvg) {
+        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("");
@@ -748,91 +717,6 @@
       el.windowSel.value = "0";
     }
 
-    // ── flame view ──
-    let flameSvg = null;
-    /**
-     * A row per node, packed: a node goes on the first row below its parent's that nothing
-     * already placed there overlaps in time. Plain depth rows hid every step that ran beside a
-     * long-lived sibling (a daemon, a server) — they shared a row and were drawn over.
-     */
-    let flameRows = null;
-    function packFlame() {
-      const rows = []; // rows[r] = [[start, end], …] already taken
-      const out = new Map();
-      const free = (r, a, b) => !(rows[r] || []).some(([s, e]) => a < e && s < b);
-      (function place(n, parentRow) {
-        let r = parentRow + 1;
-        // a zero-length node still needs a sliver of time to claim, or it would stack on anything
-        const a = n.start;
-        const b = Math.max(n.end, n.start + model.span / 2000);
-        while (!free(r, a, b)) r++;
-        (rows[r] = rows[r] || []).push([a, b]);
-        out.set(n.id, r);
-        [...n.children].sort((p, q) => p.start - q.start).forEach((c) => place(c, r));
-      })(model.root, -1);
-      return { rowOf: out, count: rows.length };
-    }
-    function renderFlame() {
-      d3.select(el.flame).selectAll("svg").remove();
-      flameRows = flameRows || packFlame();
-      flameSvg = d3
-        .select(el.flame)
-        .append("svg")
-        .style("height", `${Math.max(el.flame.clientHeight, 16 + flameRows.count * FLAME_ROW)}px`)
-        .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", "pin").attr("stroke", css("--accent")).attr("stroke-width", 1.5).attr("y1", 0).attr("y2", 4000);
-      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 px = state.pin != null ? x(state.pin) : -10;
-      queueMicrotask(() => (app.classList.contains("hl-on") || state.errHl) && applyHl());
-      flameSvg.select("line.pin").attr("x1", px).attr("x2", px);
-      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 + flameRows.rowOf.get(n.id) * 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)
-        .call(bindNode);
-      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);
-        })
-        .call(bindNode);
-    }
-
     // ── flow view ──
     //
     // Each node's children form one *lane*: a column to its right, in start order, joined by
@@ -842,7 +726,19 @@
     let flowG = null;
     let flowPos = new Map();
     let flowBounds = null;
-    const FLOW = { CW: 250, CH: 58, GX: 64, GY: 26, LANE_DX: 22, TW: 46, TH: 28 };
+    const FLOW = { CW: 250, CH: 58, TAGS_H: 18, GX: 64, GY: 26, LANE_DX: 22, TW: 46, TH: 28 };
+    /** A tag chip in SVG, matching the HTML `.chip`; returns its group and width. */
+    function svgChip(parent, x, label, color) {
+      const g = parent.append("g").attr("class", "tchip").attr("transform", `translate(${x},0)`);
+      const rect = g.append("rect").attr("height", 16).attr("rx", 4);
+      const text = g.append("text").attr("x", 6).attr("y", 11.5).text(label);
+      const w = (text.node().getComputedTextLength() || label.length * 6) + 12;
+      rect
+        .attr("width", w)
+        .attr("fill", color ? alpha(color, 0.14) : "none")
+        .attr("stroke", color ? alpha(color, 0.45) : css("--line"));
+      return { g, w };
+    }
     function renderFlow() {
       d3.select(el.flow).selectAll("svg").remove();
       const svg = d3.select(el.flow).append("svg");
@@ -860,7 +756,9 @@
         .attr("class", "flow-arrowhead")
         .attr("d", "M0,1 L10,5 L0,9 z");
       flowG = svg.append("g");
-      const { CW, CH, GX, GY, LANE_DX, TW, TH } = FLOW;
+      const { CW, GX, GY, LANE_DX, TW, TH } = FLOW;
+      // every card gets the tag row when any is tagged, so lanes stay on one rhythm
+      const CH = FLOW.CH + (model.nodes.some((n) => n.v.tags && n.v.tags.length) ? FLOW.TAGS_H : 0);
 
       const shotsBy = new Map();
       for (const g of model.gallery) {
@@ -988,7 +886,7 @@
         .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"/>`);
       card.each(function (n) {
-        const lines = wrapName(displayName(n), 31);
+        const lines = wrapName(boxLabel(n), 31);
         const t = d3.select(this);
         lines.forEach((line, i) =>
           t
@@ -1003,6 +901,21 @@
           .attr("x", 42)
           .attr("y", lines.length > 1 ? 49 : 41)
           .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 room = CW - 42 - 10;
+        let x = 0;
+        for (let i = 0; i < tags.length; i++) {
+          const c = svgChip(row, x, truncate(tags[i], 22), tagColor(tags[i]));
+          // keep room for a "+N" after it, unless it is the last
+          if (i > 0 && x + c.w > room - (i < tags.length - 1 ? 30 : 0)) {
+            c.g.remove();
+            svgChip(row, x, `+${tags.length - i}`, null).g.classed("more", true);
+            break;
+          }
+          x += c.w + 4;
+        }
       });
       card
         .append("circle")
@@ -1011,7 +924,7 @@
         .attr("r", 4)
         .attr("fill", (n) => css(statusVar(n.status)));
       const fcb = card
-        .filter((n) => hasCode(n))
+        .filter((n) => hasPopup(n))
         .append("g")
         .attr("class", "code-btn")
         .attr("transform", `translate(${CW / 2},0)`)
@@ -1019,27 +932,12 @@
           ev.stopPropagation();
           toggleCode(n, ev);
         })
-        .on("mouseenter", (ev) => {
+        .on("mouseenter", (ev, n) => {
           ev.stopPropagation();
-          showTip(ev, "Show source");
+          showTip(ev, popupTip(n));
         });
       fcb.append("circle").attr("r", 9);
       fcb.append("text").attr("text-anchor", "middle").attr("y", 3.5).text("<>");
-      const frb = card
-        .filter((n) => hasValue(n))
-        .append("g")
-        .attr("class", "code-btn ret")
-        .attr("transform", (n) => `translate(${CW / 2 + (hasCode(n) ? 22 : 0)},0)`)
-        .on("click", (ev, n) => {
-          ev.stopPropagation();
-          toggleCode(n, ev, "value", true);
-        })
-        .on("mouseenter", (ev, n) => {
-          ev.stopPropagation();
-          showTip(ev, `Returned: <span class="mono">${esc(valuePreview(n, 80))}</span>`);
-        });
-      frb.append("circle").attr("r", 9);
-      frb.append("path").attr("d", ICON.ret).attr("transform", "translate(-6,-6) scale(0.5)");
 
       // snapshot chips — on lane arrows, and in strips under leaf cards
       const chipLayer = flowG.append("g").attr("class", "flow-shots");
@@ -1182,7 +1080,7 @@
     // ── selection + details ──
     function select(id, tab) {
       state.selected = id;
-      if (tab) state.detailTab = tab;
+      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));
@@ -1190,7 +1088,6 @@
         chartSvg.selectAll("rect.bar").classed("selected", (n) => n.id === id);
         chartSvg.selectAll("g.r").classed("sel", (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", (n) => n.id === id);
       renderDetails();
     }
@@ -1240,10 +1137,9 @@
       flash(matchMark);
     }
     function flash(matchMark) {
-      const svgs = [chartSvg, flameSvg].filter(Boolean);
-      for (const s of svgs) {
-        s.selectAll("line.pin").classed("flash", false).node()?.getBoundingClientRect();
-        s.selectAll("line.pin").classed("flash", true);
+      if (chartSvg) {
+        chartSvg.selectAll("line.pin").classed("flash", false).node()?.getBoundingClientRect();
+        chartSvg.selectAll("line.pin").classed("flash", true);
       }
       if (chartSvg) {
         const hit = chartSvg
@@ -1266,15 +1162,7 @@
     function renderDetails() {
       const n = model.byId.get(state.selected) || model.root;
       const color = colorOf(n);
-      const tabs = [
-        ["overview", "Overview"],
-        ["args", "Args"],
-        ...(hasValue(n) ? [["value", "Return"]] : []),
-        ...(model.errorsBy.get(n) ? [["errors", `Errors (${model.errorsBy.get(n)})`]] : []),
-        ["events", `Events`],
-        ["logs", "Logs"],
-        ["snapshots", "Snapshots"],
-      ];
+      const call = callOf(n);
       el.details.innerHTML = `
         <div class="dh">Action details <button class="x" title="Close">${svgIcon("close", ' width="16" height="16"')}</button></div>
         <div class="who">
@@ -1283,25 +1171,30 @@
           <span class="pill"><span class="dot ${n.status}"></span>${esc(n.status)}</span>
         </div>
         <div class="scroll">
+          ${call ? `<div class="tcall who-call">${callHtml(n, call)}</div>` : ""}
           <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>
             ${n.v.description ? `<div class="k">Summary</div><div class="v">${esc(n.v.description.summary)}</div>` : ""}
+            ${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">Path</div><div class="v">${esc(n.v.path)}</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">
               <button class="icon-btn" data-copy-source aria-label="Copy relative path">${svgIcon("copy")}</button>
-              ${hasCode(n) ? `<button class="icon-btn" data-show-code aria-label="Show source">${svgIcon("code")}</button>` : ""}
-              ${hasValue(n) ? `<button class="icon-btn" data-show-value aria-label="Show returned value">${svgIcon("ret")}</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 class="tabs">${tabs
-            .map(([k, l]) => `<button class="tab ${state.detailTab === k ? "active" : ""}" data-tab="${k}">${l}</button>`)
+          <div class="acc">${detailSections(n)
+            .map((sec) =>
+              sec.empty
+                ? `<div class="acc-sec empty"><div class="acc-h">${svgIcon("chevron")}<span>${esc(sec.title)}</span><span class="acc-n">0</span></div></div>`
+                : `<details class="acc-sec ${sec.key}" data-sec="${sec.key}" ${state.detailOpen.has(sec.key) ? "open" : ""}>
+                    <summary class="acc-h">${svgIcon("chevron")}<span>${esc(sec.title)}</span>${sec.count != null ? `<span class="acc-n">${sec.count}</span>` : ""}</summary>
+                    <div class="acc-b">${sec.body()}</div>
+                  </details>`
+            )
             .join("")}</div>
-          <div class="tabbody">${detailTabHtml(n)}</div>
         </div>`;
       const copySrc = el.details.querySelector("[data-copy-source]");
       if (copySrc) {
@@ -1312,17 +1205,11 @@
         copySrc.addEventListener("mousemove", (ev) => moveTip(ev));
         copySrc.addEventListener("mouseleave", hideTip);
       }
-      const showValue = el.details.querySelector("[data-show-value]");
-      if (showValue) {
-        showValue.addEventListener("click", (ev) => toggleCode(n, ev, "value", true));
-        showValue.addEventListener("mouseenter", (ev) => showTip(ev, `Returned: <span class="mono">${esc(valuePreview(n, 80))}</span>`));
-        showValue.addEventListener("mouseleave", hideTip);
-      }
       wireValue(el.details, n);
       const showCode = el.details.querySelector("[data-show-code]");
       if (showCode) {
         showCode.addEventListener("click", (ev) => toggleCode(n, ev));
-        showCode.addEventListener("mouseenter", (ev) => showTip(ev, "Show source"));
+        showCode.addEventListener("mouseenter", (ev) => showTip(ev, popupTip(n)));
         showCode.addEventListener("mouseleave", hideTip);
       }
       el.details.querySelectorAll("[data-tip-text]").forEach((a) => {
@@ -1334,67 +1221,88 @@
         el.main.classList.add("no-details");
         relayout();
       });
-      el.details.querySelectorAll(".tab").forEach((b) =>
-        b.addEventListener("click", () => {
-          state.detailTab = b.dataset.tab;
-          renderDetails();
+      // which sections are open is a preference: it carries over from action to action
+      el.details.querySelectorAll("details[data-sec]").forEach((d) =>
+        d.addEventListener("toggle", () => {
+          if (d.open) state.detailOpen.add(d.dataset.sec);
+          else state.detailOpen.delete(d.dataset.sec);
         })
       );
       wireItems(el.details);
     }
 
-    function detailTabHtml(n) {
-      const tab = state.detailTab;
-      if (tab === "errors") {
-        const list = model.errors.filter((e) => e.node === n);
-        if (!list.length) return '<div class="muted">No errors.</div>';
-        return list
-          .map((e) => {
-            const kind = ERR_TYPES.find(([k]) => k === e.type)[1];
-            return `<div class="section-title err-kind ${e.type}">${esc(kind)} <span class="muted">${fmtRel(e.t - n.start)}</span></div><pre class="code err-text">${esc(e.text)}</pre>`;
-          })
-          .join("");
-      }
-      if (tab === "value") {
-        return hasValue(n) ? `<div class="code-box">${valueHtml(n)}</div>` : '<div class="muted">Returned nothing.</div>';
-      }
-      if (tab === "args") {
-        const params = schemaFields(n.v.inputSchema);
-        const schema = params.length ? `<div class="section-title">Schema</div><div class="params">${params.map(paramHtml).join("")}</div><div class="section-title">Values</div>` : "";
-        return schema + (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);
+    /** The details panel's accordion: one section per facet of `n`, empty ones shown but shut. */
+    function detailSections(n) {
+      const errs = model.errors.filter((e) => e.node === n);
+      const params = schemaFields(n.v.inputSchema);
+      const evs = n.entries.filter((i) => i.kind !== "info");
+      const logs = n.entries.filter((i) => i.kind === "info" || i.kind === "error");
+      const shots = model.gallery.filter((x) => x.node === n);
       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>'}`;
+      const logLink = `<div class="acc-file">${svgIcon("file", ' width="14" height="14"')}<a href="${esc(fileUrl(n.v.logFile))}" title="${esc(n.v.logFile)}">${esc(basename(n.v.logFile))}</a></div>`;
+      return [
+        {
+          key: "errors",
+          title: "Errors",
+          count: errs.length,
+          empty: !errs.length,
+          body: () =>
+            errs
+              .map((e) => {
+                const kind = ERR_TYPES.find(([k]) => k === e.type)[1];
+                return `<div class="section-title err-kind ${e.type}">${esc(kind)} <span class="muted">${fmtRel(e.t - n.start)}</span></div><pre class="code err-text">${esc(e.text)}</pre>`;
+              })
+              .join(""),
+        },
+        {
+          key: "args",
+          title: "Args",
+          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>'),
+        },
+        { key: "value", title: "Returned", empty: !hasValue(n), body: () => `<div class="code-box">${valueHtml(n)}</div>` },
+        {
+          key: "snapshots",
+          title: "Snapshots & files",
+          count: shots.length,
+          empty: !shots.length,
+          body: () => `<div class="shots">${shots.map((g) => shotHtml(g, n)).join("")}</div>`,
+        },
+        {
+          key: "events",
+          title: "Events",
+          count: evs.length,
+          empty: !evs.length,
+          body: () => `<ul class="ev-list">${evs.map((i) => evLi(i, n)).join("")}</ul>`,
+        },
+        {
+          key: "logs",
+          title: "Logs",
+          count: logs.length,
+          empty: !logs.length,
+          body: () =>
+            `${logLink}<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>`,
+        },
+        {
+          key: "assertions",
+          title: "Assertions",
+          count: asserts.length,
+          empty: !asserts.length,
+          body: () => `<ul class="ev-list">${asserts.map((i) => evLi(i, n)).join("")}</ul>`,
+        },
+      ];
+    }
+
+    /** A snapshot or file in the details panel: a small thumb with its name and when it landed. */
+    function shotHtml(g, n) {
+      const i = model.gallery.indexOf(g);
+      return `<div class="shot" data-gallery="${i}" title="${esc(g.name)}">
+          ${thumbHtml(g)}
+          <span class="nm">${esc(g.name)}</span>
+          ${g.t != null ? `<span class="t">${fmtRel(g.t - n.start)}</span>` : ""}
+        </div>`;
     }
 
     function evLi(i, n) {
@@ -1561,7 +1469,6 @@
       const mark = (sel, idOf) =>
         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);
-      if (flameSvg) mark(flameSvg.selectAll("g.cell"), (n) => n.id);
       mark(d3.select(el.flow).selectAll("g.flow-card"), (n) => n.id);
       el.tree.querySelectorAll(".row").forEach((r) => {
         r.classList.toggle("err", !!set && set.has(r.dataset.id));
@@ -1762,40 +1669,20 @@
       hovered = n; // the node `C` copies while its tooltip is up
       const v = n.v;
       const shown = n.depth === 0 ? model.data.name : displayName(n);
-      const badges = [
-        `<span class="badge"><span class="dot ${n.status}"></span>${esc(n.status)}</span>`,
-        v.mcp ? `<span class="badge mcp" title="Exposed over MCP">MCP · ${esc(v.mcp.mode)}</span>` : "",
-        n.depth === 0 ? '<span class="badge">om</span>' : "",
-        n.v.kind === "step" ? '<span class="badge" title="An inline step(…), not a reusable action">step</span>' : "",
-      ].join("");
-      const rows = [
-        ["Duration", fmtDur(n.duration)],
-        ["When", `${fmtRel(n.start)} → ${fmtRel(n.end)}`],
-        v.tags.length ? ["Tags", esc(v.tags.join(" · "))] : null,
-        userSite(n) ? [siteLabel(n) === "Called at" ? "Called" : "Defined", `<span class="mono">${esc(sourceOf(n))}</span>`] : null,
-        hasValue(n) ? ["Returns", `<span class="mono">${esc(valuePreview(n, 90))}</span>`] : null,
-        n.children.length ? ["Children", String(n.children.length)] : null,
-        n.marks.length ? ["Events", String(n.marks.length)] : null,
+      const call = callOf(n);
+      const meta = [
+        `<span class="dot ${n.status}"></span>${esc(n.status)}`,
+        esc(fmtDur(n.duration)),
+        n.depth === 0 ? "om" : v.kind === "step" ? "step" : "",
+        v.mcp ? `<span class="mcp">MCP · ${esc(v.mcp.mode)}</span>` : "",
       ].filter(Boolean);
-      const args = !promptOf(n) && v.args && v.args.length ? truncate(oneLine(v.args.length === 1 ? v.args[0] : v.args), 220) : "";
-      const params = schemaFields(v.inputSchema);
-      const pr = promptOf(n);
-      const promptRows = pr
-        ? `<div class="sec">Prompt</div><div class="tprompt">${esc(truncate(pr.message || "", 200))}</div>${
-            pr.answer ? `<div class="tkv"><span class="k">Answer</span><span class="mono">${esc(truncate(typeof pr.answer.value === "string" ? pr.answer.value : oneLine(pr.answer.value), 120))}</span>${pr.answer.via ? `<span class="k">Via</span><span>${esc(pr.answer.via)}</span>` : ""}</div>` : ""
-          }`
-        : "";
       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>
-        ${shown !== n.name ? `<div class="ts mono">${esc(truncate(n.name, 140))}</div>` : ""}
-        <div class="badges">${badges}</div>
-        ${v.description ? `<div class="summary">${esc(v.description.summary)}</div>` : '<div class="summary muted">No description.</div>'}
-        <div class="tkv">${rows.map(([k, val]) => `<span class="k">${k}</span><span>${val}</span>`).join("")}</div>
-        ${promptRows}
-        ${params.length ? `<div class="sec">Args schema</div><div class="params">${params.map(paramHtml).join("")}</div>` : ""}
-        ${args ? `<div class="sec">Args</div><div class="mono small">${esc(args)}</div>` : ""}
-        ${v.definedAt ? '<div class="hint">Press <kbd>C</kbd> to copy the path</div>' : ""}
-        ${fails.length ? `<div class="sec fail">Failed</div><div class="mono small">${esc(truncate(String(fails[0].error).split(String.fromCharCode(10))[0], 200))}</div>` : ""}`;
+        ${call ? `<div class="tcall">${callHtml(n, call)}</div>` : ""}
+        <div class="tmeta">${meta.join('<span class="sep">·</span>')}</div>
+        ${v.description ? `<div class="summary">${esc(truncate(v.description.summary, 240))}</div>` : ""}
+        ${chipsHtml(v.tags, TIP_TAGS, 28)}
+        ${fails.length ? `<div class="tfail">${esc(truncate(String(fails[0].error).split(String.fromCharCode(10))[0], 160))}</div>` : ""}`;
     }
     function galleryTip(x) {
       const img = x.image ? `<img src="${model.asset(x.f.asset)}" alt="">` : "";
@@ -1844,19 +1731,89 @@
     function codeOf(site) {
       return site && model.data.code ? model.data.code[site] : undefined;
     }
-    /** The popover's tabs for `n`, most useful first. */
+    /**
+     * How the user's code launched `n`, read off the source at its call site: the variable it
+     * was bound to and the callee — `page = chromePage(…)`. Sites carry a line but no column,
+     * so this takes the first call on that line; null when the site is library source.
+     */
+    function callExpr(n) {
+      const site = n.v.calledAt;
+      const c = site && !isLib(site) && codeOf(site);
+      if (!c) return null;
+      const at = Number((/:(\d+)$/.exec(site) || [])[1]);
+      const lines = c.text.split("\n");
+      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)) {
+        if (!/^(if|for|while|switch|return|catch|function|await|typeof|new|async)$/.test(m[1])) {
+          call = { callee: m[1], index: m.index };
+          break;
+        }
+      }
+      if (!call) return null;
+      const DECL = /\b(?:const|let|var)\s+([\w$]+|\{[^}]*\}|\[[^\]]*\])/;
+      const prefix = line.slice(0, call.index);
+      const prev = lines[at - c.start - 1] || "";
+      const m =
+        DECL.exec(prefix) ||
+        /^\s*([\w$.]+)\s*=(?!=)/.exec(prefix) ||
+        (/^\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. */
     function codeTabs(n) {
       const tabs = [];
       if (promptOf(n)) tabs.push({ key: "prompt", label: "Prompt" });
-      if (hasValue(n)) tabs.push({ key: "value", label: "Returned" });
       const mine = userSite(n);
       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 (hasArgs(n)) tabs.push({ key: "args", label: "Args" });
+      if (hasValue(n)) tabs.push({ key: "value", label: "Returned" });
       return tabs;
     }
     function hasCode(n) {
-      return codeTabs(n).some((t) => t.key !== "value");
+      return codeTabs(n).some((t) => t.key !== "value" && t.key !== "args");
+    }
+    const callMemo = new Map();
+    /** {@link callExpr}, once per node — bar labels ask on every redraw. */
+    function callOf(n) {
+      if (!callMemo.has(n.id)) callMemo.set(n.id, n.depth === 0 ? null : callExpr(n));
+      return callMemo.get(n.id);
+    }
+    /**
+     * An action box's label: the call that launched it, as the tooltip shows it —
+     * `watchBuildDirectory = watchDir(…)` — then omkit's name when the callee does not already
+     * say it (`command(…) · npm run dev`). Just the name when the call is unknown.
+     */
+    function boxLabel(n) {
+      const c = callOf(n);
+      if (!c) return displayName(n);
+      const call = `${c.bind ? `${c.bind} = ` : ""}${c.callee}(${hasArgs(n) ? "…" : ""})`;
+      return c.callee === displayName(n) ? call : `${call} · ${displayName(n)}`;
+    }
+    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))}`;
+      return `<span class="tcall">${callHtml(n, c)}</span>${name}`;
+    }
+    /** `page = chromePage(…)`, from {@link callExpr}. */
+    function callHtml(n, call) {
+      return `${call.bind ? `<span class="b">${esc(call.bind)}</span> = ` : ""}<span class="f">${esc(call.callee)}</span>(${hasArgs(n) ? "…" : ""})`;
+    }
+    function hasPopup(n) {
+      return codeTabs(n).length > 0;
+    }
+    function popupTip(n) {
+      return codeTabs(n).map((t) => esc(t.label)).join(" · ");
+    }
+    function hasArgs(n) {
+      return !!(n.v.args && n.v.args.length);
+    }
+    function argsOf(n) {
+      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+)?$/, "");
@@ -1864,27 +1821,32 @@
     function hasValue(n) {
       return n.v.value !== undefined || !!n.v.valueNote;
     }
-    function valuePreview(n, max) {
-      if (n.v.value === undefined) return n.v.valueNote || "";
-      return truncate(oneLine(n.v.value), max);
-    }
-    /** The returned value in the code view: pretty JSON, highlighted, numbered, copyable. */
-    function valueHtml(n) {
-      if (n.v.value === undefined) {
-        return `<div class="pp"><div class="muted">${esc(n.v.valueNote || "Returned nothing.")}</div></div>`;
-      }
-      const text = json(n.v.value);
+    /** A value in the code view: pretty JSON, highlighted, numbered, copyable. */
+    function jsonHtml(value, what) {
+      const text = json(value);
       const lines = highlight(text);
-      const kind = Array.isArray(n.v.value) ? `array · ${n.v.value.length} items` : n.v.value === null ? "null" : typeof n.v.value === "object" ? `object · ${Object.keys(n.v.value).length} keys` : typeof n.v.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">${svgIcon("copy")}Copy JSON</button></div>
+          <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>`)
           .join("")}</div>`;
     }
+    function valueHtml(n) {
+      if (n.v.value === undefined) {
+        return `<div class="pp"><div class="muted">${esc(n.v.valueNote || "Returned nothing.")}</div></div>`;
+      }
+      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>';
+    }
     function wireValue(root, n) {
-      const b = root.querySelector('[data-a="copy-json"]');
-      if (b) b.addEventListener("click", () => 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);
@@ -1927,7 +1889,7 @@
       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") || 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;
@@ -1943,7 +1905,9 @@
           <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) : codeHtml(site)}</div>`;
+        <div class="cp-body">${
+          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}`));
@@ -1964,7 +1928,7 @@
       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], [data-show-value]")) closeCode();
+        if (!codeEl.contains(e.target) && !e.target.closest(".code-btn, [data-show-code]")) closeCode();
       };
       setTimeout(() => codeAway && document.addEventListener("mousedown", codeAway, true), 0);
     }
@@ -2020,7 +1984,6 @@
     function renderAll() {
       measure();
       if (state.view === "timeline") renderTimeline();
-      if (state.view === "flame") renderFlame();
       if (state.view === "flow") renderFlow();
       renderOverview();
     }
@@ -2094,7 +2057,6 @@
         </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">
@@ -2108,20 +2070,15 @@
         <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">
+        <section class="card timeline" style="--tree-w:360px;--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>
+            <div class="cols"><div>Action / Event</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">
+          <button class="info-btn legend-btn" id="legend-btn" aria-label="Legend" aria-expanded="false" title="Legend">${svgIcon("info")}</button>
+          <div class="legend legend-pop" id="legend" hidden>
           <h3>Legend</h3>
           <div class="grid2">
             ${legendItem("--c1", "Action run", "bar")}
@@ -2134,7 +2091,12 @@
             ${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>
+          </div>
         </section>
+        <aside class="card details"></aside>
+      </div>
+      <div class="bottom">
+        <section class="card lower"></section>
         <section class="card overview"><h3>Overview</h3><div class="range"></div><svg></svg></section>
       </div>`;
   }
@@ -2285,6 +2247,23 @@
     n = Math.max(1, Math.floor(n));
     return s.length > n ? `${s.slice(0, Math.max(1, n - 1))}…` : s;
   }
+  /** A tag's colour: hashed from its text, so a tag reads the same in every view. */
+  function tagColor(t) {
+    let h = 0;
+    for (let i = 0; i < t.length; i++) h = (h * 31 + t.charCodeAt(i)) | 0;
+    return css(PALETTE[Math.abs(h) % PALETTE.length]);
+  }
+  /** One tag as a chip — the tree, tooltips and details share it; the flow draws the same in SVG. */
+  function chipHtml(t, max) {
+    const c = tagColor(t);
+    return `<span class="chip" style="background:${alpha(c, 0.14)};border-color:${alpha(c, 0.45)}" title="${esc(t)}">${esc(truncate(t, max))}</span>`;
+  }
+  /** 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>`;
+  }
   function displayName(n) {
     if (n.depth === 0) return "main";
     const p = promptOf(n);