omkit 0.8.17 → 0.8.18

package/dist/output/writers/report/report.css

@@ -164,7 +164,8 @@ button { font: inherit; color: inherit; }
 
 .chart { position: relative; min-width: 0; }
 .chart svg { display: block; overflow: hidden; }
-.chart .bar-label { font-size: 12px; fill: var(--bar-text); font-weight: 500; cursor: pointer; }
+/* the row's hit target already spans the label — letting it through keeps the marks under it hoverable */
+.chart .bar-label { font-size: 12px; fill: var(--bar-text); font-weight: 500; pointer-events: none; }
 .chart .hit { fill: transparent; cursor: pointer; }
 .chart .hit:hover + .bar { filter: brightness(1.15); }
 .chart .bar-label.outside { fill: var(--text); }
@@ -190,7 +191,7 @@ button { font: inherit; color: inherit; }
 .flow-seq.parallel { stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 2; opacity: 0.8; }
 .flow-arrowhead { fill: var(--text-3); }
 .flow-par { fill: var(--text-3); font-size: 10px; font-style: italic; }
-.flow-shot-t { fill: var(--text-3); font-size: 10.5px; pointer-events: none; }
+.flow-shot-t { fill: var(--text-3); font-size: 10.5px; pointer-events: none; stroke: var(--panel); stroke-width: 4px; paint-order: stroke; }
 .flow-card text.sub { fill: var(--text-3); font-size: 11px; }
 .flow-card .tchip text { fill: var(--text); font-size: 10.5px; }
 .flow-card .tchip.more text { fill: var(--text-3); }
@@ -224,12 +225,12 @@ button { font: inherit; color: inherit; }
 .acc-b > .params { margin-bottom: 8px; }
 .acc-b .section-title:first-child { margin-top: 0; }
 .acc-file { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-2); }
-.shots { display: grid; gap: 6px; }
-.shot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
-.shot:hover { border-color: var(--accent); background: var(--accent-soft); }
-.shot .thumb { width: 64px; }
-.shot .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.shot .t { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
+.dshots { display: grid; gap: 6px; }
+.dshot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
+.dshot:hover { border-color: var(--accent); background: var(--accent-soft); }
+.dshot .thumb { width: 64px; }
+.dshot .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshot .t { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
 .kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; margin: 2px 0 12px; }
 .kv .k { color: var(--text-2); }
 .kv .v { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@@ -472,18 +473,13 @@ a.icon-btn { text-decoration: none; }
 #app.hl-on .flow-card.err-path rect.box { stroke: var(--fail); stroke-width: 1.2; stroke-dasharray: 4 3; }
 #app.hl-on .tree .row.err { background: rgba(239, 68, 68, 0.1); }
 .chart g.r, .flow-card, .tree .row { transition: opacity 0.15s; }
-/* cross-node links: waits (dashed), ref calls (solid), connectors between rows / cards */
-.xl-span { stroke-width: 3; stroke-linecap: round; cursor: pointer; }
-.xl-span.once { stroke-width: 2.5; stroke-dasharray: 4 3; stroke-linecap: butt; }
-.xl-wire { fill: none; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.85; cursor: pointer; }
-.xl-span:hover { stroke-width: 4.5; }
-.xl-hit { fill: none; stroke: transparent; stroke-width: 10; cursor: pointer; }
-#xl-arrow path { fill: var(--text-2); }
-.flow-xlink { cursor: pointer; }
-.flow-xlink path { fill: none; stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.8; }
-.flow-xlink path.hit { stroke: transparent; stroke-width: 12; stroke-dasharray: none; }
-.flow-xlink:hover path:not(.hit) { stroke-width: 2.6; opacity: 1; }
-.flow-xlink text { font-size: 10.5px; fill: var(--text-2); stroke: var(--panel); stroke-width: 3px; paint-order: stroke; }
+/* cross-node links: hollow points on the caller's row, chips in the flow */
+.chart circle.mark.link { stroke-width: 2; }
+.xwire { stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.55; pointer-events: none; }
+.xwire.hot { stroke-width: 2; opacity: 1; }
+.fwire { fill: none; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.5; pointer-events: none; }
+.fwire.hot { stroke-width: 2; opacity: 1; }
+.flow-shots .shot rect[stroke] { stroke-width: 1.5; }
 
 @media (max-width: 1100px) {
   .bottom { grid-template-columns: minmax(0, 1fr); }

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

@@ -195,6 +195,12 @@
       if (!from) continue;
       links.push({ item: it, op: l.op, from, to: it.node, t: it.t, t0: it.t - (l.ms || 0), key: l.key || "", ms: l.ms, outcome: l.outcome || "", site: l.site || "" });
     }
+    // …drawn as a point on the row of the action that made it: what it did, when it did it
+    for (const l of links) {
+      l.label = linkLabel(l);
+      l.from.marks.push({ idx: l.item.idx, e: l.item.e, kind: "link", t: l.t, label: l.label, node: l.from, link: l });
+    }
+    for (const l of links) l.from.marks.sort((a, b) => a.t - b.t);
 
     const asserts = items.filter((i) => i.kind === "pass" || i.kind === "fail");
     const errors = collectErrors(items, nodes, run, tEnd - t0);
@@ -277,6 +283,12 @@
     out.forEach((e, i) => (e.idx = i));
     return out;
   }
+  /** A link's short label, as its point or chip shows it. */
+  function linkLabel(l) {
+    if (l.op === "once") return `waited ${l.key}`;
+    if (l.op === "cancel") return `cancel ${displayName(l.to)}`;
+    return `${displayName(l.to)}.${l.key}()`;
+  }
   function firstLine(s) {
     return String(s).split("\n")[0];
   }
@@ -515,21 +527,8 @@
         .on("mouseleave", () => moveCursor(null));
       chartSvg.append("g").attr("class", "grid");
       chartSvg.append("g").attr("class", "links");
-      chartSvg
-        .append("defs")
-        .append("marker")
-        .attr("id", "xl-arrow")
-        .attr("viewBox", "0 0 10 10")
-        .attr("refX", 9)
-        .attr("refY", 5)
-        .attr("markerWidth", 6)
-        .attr("markerHeight", 6)
-        .attr("orient", "auto")
-        .append("path")
-        .attr("d", "M0,1 L10,5 L0,9 z");
+      chartSvg.append("g").attr("class", "xwires");
       chartSvg.append("g").attr("class", "rows");
-      // over the rows: their hover targets would otherwise swallow the link strips
-      chartSvg.append("g").attr("class", "xlinks");
       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);
@@ -645,74 +644,15 @@
       g.select("g.marks").each(function (n) {
         drawMarks(d3.select(this), n, x);
       });
-      drawLinks(x, index);
+      rowIndex = index;
+      drawWires(x);
 
       chartSvg.select("line.pin").attr("x1", state.pin != null ? x(state.pin) : -10).attr("x2", state.pin != null ? x(state.pin) : -10);
       if (app.classList.contains("hl-on") || state.errHl) applyHl();
     }
 
-    /** The visible row standing in for `n`: its own, or its nearest expanded ancestor's. */
-    function rowIndexOf(n, index) {
-      for (let p = n; p; p = p.parent) if (index.has(p.id)) return index.get(p.id);
-      return -1;
-    }
-    /**
-     * Cross-node links on the timeline. A strip under the caller's bar holds its waits
-     * (`once`, dashed) and its calls on another action's ref (solid), in the target's colour;
-     * a dashed connector joins the two rows where a wait ended (target → waiter) and where a
-     * cancel landed (canceller → target).
-     */
-    function drawLinks(x, index) {
-      const STRIP_Y = BAR_Y + BAR_H + 3;
-      const spans = [];
-      const wires = [];
-      for (const l of model.links) {
-        const fi = rowIndexOf(l.from, index);
-        const ti = rowIndexOf(l.to, index);
-        if (fi < 0) continue;
-        if (l.op !== "cancel") spans.push({ l, fi });
-        if (l.op !== "ref" && ti >= 0 && ti !== fi) wires.push({ l, fi, ti });
-      }
-      const layer = chartSvg.select(".xlinks");
-      layer
-        .selectAll("line.xl-span")
-        .data(spans)
-        .join("line")
-        .attr("class", (d) => `xl-span ${d.l.op}`)
-        .attr("x1", (d) => x(d.l.t0))
-        .attr("x2", (d) => Math.max(x(d.l.t), x(d.l.t0) + 2))
-        .attr("y1", (d) => d.fi * ROW_H + STRIP_Y)
-        .attr("y2", (d) => d.fi * ROW_H + STRIP_Y)
-        .attr("stroke", (d) => colorOf(d.l.to))
-        .call(bindLink);
-      const wirePath = (d) => {
-        const px = x(d.l.t);
-        const fy = d.fi * ROW_H + STRIP_Y;
-        const ty = d.ti * ROW_H + BAR_Y + BAR_H / 2;
-        const [y1, y2] = d.l.op === "once" ? [ty, fy] : [fy, ty];
-        return `M${px},${y1} C${px + 10},${(2 * y1 + y2) / 3} ${px + 10},${(y1 + 2 * y2) / 3} ${px},${y2}`;
-      };
-      layer
-        .selectAll("path.xl-wire")
-        .data(wires)
-        .join("path")
-        .attr("class", (d) => `xl-wire ${d.l.op}`)
-        .attr("d", wirePath)
-        .attr("stroke", (d) => (d.l.op === "cancel" ? css("--cancel") : colorOf(d.l.to)))
-        .attr("marker-end", "url(#xl-arrow)");
-      // a wide transparent twin over each wire, so a 1px dashed line is easy to hover
-      layer.selectAll("path.xl-hit").data(wires).join("path").attr("class", "xl-hit").attr("d", wirePath).call(bindLink);
-    }
-    function bindLink(sel) {
-      sel
-        .on("click", (ev, d) => {
-          ev.stopPropagation();
-          setPin(d.l.t);
-          select(d.l.from.id, "links");
-        })
-        .on("mouseenter", (ev, d) => showTip(ev, linkTip(d.l), true))
-        .on("mousemove", (ev) => moveTip(ev))
-        .on("mouseleave", hideTip);
+    function linkColor(l) {
+      return l.op === "cancel" ? css("--cancel") : colorOf(l.to);
     }
     /** A link in words: who did what to whom, how it ended, and the line that did it. */
     function linkTip(l, count) {
@@ -737,6 +677,40 @@
         ${l.site ? `<div class="mono small" style="margin-top:6px">${esc(relOf(l.site))}${line ? ":" + line : ""}</div>` : ""}`;
     }
 
+    let rowIndex = new Map();
+    /** The visible row standing in for `n`: its own, or its nearest expanded ancestor's. */
+    function rowOf(n) {
+      for (let p = n; p; p = p.parent) if (rowIndex.has(p.id)) return rowIndex.get(p.id);
+      return -1;
+    }
+    /**
+     * A link's wire: straight down (or up) the timeline at the moment it happened, from the
+     * caller's point to the target's row — both ends share the instant, so the line reads as
+     * "this, then, to that". Waits and cancels always have one; a ref call's shows on hover only,
+     * since a chatty handle would otherwise hatch the chart.
+     */
+    function wireOf(l, x) {
+      const a = rowOf(l.from);
+      const b = rowOf(l.to);
+      if (a < 0 || b < 0 || a === b) return null;
+      const cy = BAR_Y + BAR_H / 2;
+      return { l, x: x(l.t), y1: a * ROW_H + cy, y2: b * ROW_H + cy };
+    }
+    function drawWires(x, extra) {
+      const shown = model.links.filter((l) => l.op !== "ref" || l === extra);
+      chartSvg
+        .select(".xwires")
+        .selectAll("line")
+        .data(shown.map((l) => wireOf(l, x)).filter(Boolean))
+        .join("line")
+        .attr("class", (w) => `xwire ${w.l.op}${w.l === extra ? " hot" : ""}`)
+        .attr("x1", (w) => w.x)
+        .attr("x2", (w) => w.x)
+        .attr("y1", (w) => w.y1)
+        .attr("y2", (w) => w.y2)
+        .attr("stroke", (w) => linkColor(w.l));
+    }
+
     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
@@ -754,18 +728,27 @@
       g.selectAll("circle.mark")
         .data(marks)
         .join("circle")
-        .attr("class", "mark")
+        .attr("class", (d) => `mark ${worst(d)}`)
         .attr("cx", (d) => d.px)
         .attr("cy", cy)
         .attr("r", (d) => (d.more.length ? 6 : 5))
         .attr("fill", (d) => css(MARK[worst(d)].color))
+        // a link is a ring in its target's colour — set as styles, over the `.mark` stroke rule
+        .style("fill", (d) => (worst(d) === "link" ? "var(--panel)" : null))
+        .style("stroke", (d) => (worst(d) === "link" ? linkColor(d.m.link) : null))
         .on("click", (ev, d) => {
           ev.stopPropagation();
           openItem(d.m);
         })
-        .on("mouseenter", (ev, d) => showTip(ev, markTip(d)))
+        .on("mouseenter", (ev, d) => {
+          showTip(ev, markTip(d), d.m.kind === "link");
+          if (d.m.kind === "link") drawWires(xz(), d.m.link);
+        })
         .on("mousemove", (ev) => moveTip(ev))
-        .on("mouseleave", hideTip);
+        .on("mouseleave", (ev, d) => {
+          hideTip();
+          if (d.m.kind === "link") drawWires(xz());
+        });
       // labels under the bar, skipped where they would collide
       const labels = [];
       let edge = -Infinity;
@@ -852,6 +835,18 @@
         .attr("stroke", color ? alpha(color, 0.45) : css("--line"));
       return { g, w };
     }
+    /** A link chip's text: what kind of interaction, at a glance. */
+    function linkGlyph(x2) {
+      if (x2.l.op === "once") return "wait";
+      if (x2.l.op === "cancel") return "stop";
+      return x2.n > 1 ? `()×${x2.n}` : "()";
+    }
+    /** "3 snapshots", "2 links", or "4 items" for a mix. */
+    function chipCount(shots) {
+      const links = shots.filter((x2) => x2.type === "link").length;
+      if (!links) return `${shots.length} snapshots`;
+      return links === shots.length ? `${links} links` : `${shots.length} items`;
+    }
     function renderFlow() {
       d3.select(el.flow).selectAll("svg").remove();
       const svg = d3.select(el.flow).append("svg");
@@ -879,6 +874,16 @@
         if (!shotsBy.has(g.node)) shotsBy.set(g.node, []);
         shotsBy.get(g.node).push(g);
       }
+      // a node's links sit with its snapshots, in time order; a run of identical ref calls is one chip
+      for (const l of model.links) {
+        const list = shotsBy.get(l.from) || shotsBy.set(l.from, []).get(l.from);
+        const prev = list[list.length - 1];
+        if (l.op === "ref" && prev && prev.type === "link" && prev.l.op === "ref" && prev.l.to === l.to && prev.l.key === l.key) {
+          prev.n++;
+          continue;
+        }
+        list.push({ type: "link", l, n: 1, t: l.t, name: l.label });
+      }
       const byTime = (a, b) => (a.t ?? Infinity) - (b.t ?? Infinity);
       const pos = new Map();
       const lanes = [];
@@ -965,70 +970,6 @@
       }
 
       const nodes = [...pos.keys()].map((id) => model.byId.get(id));
-      // cross-node links: one curve per (caller, target, kind), arcing out past the cards' right
-      // edges; drawn first so the cards sit on top of their ends
-      const agg = new Map();
-      for (const l of model.links) {
-        if (!pos.has(l.from.id) || !pos.has(l.to.id) || l.from === l.to) continue;
-        const k = `${l.from.id}\0${l.to.id}\0${l.op}`;
-        if (!agg.has(k)) agg.set(k, { op: l.op, from: l.from, to: l.to, list: [] });
-        agg.get(k).list.push(l);
-      }
-      const xl = flowG.append("g").attr("class", "flow-xlinks");
-      const fan = new Map(); // edges between the same two cards fan out instead of overlapping
-      for (const a of agg.values()) {
-        const f = pos.get(a.from.id);
-        const t = pos.get(a.to.id);
-        const [s, e] = a.op === "once" ? [t, f] : [f, t];
-        const pair = [a.from.id, a.to.id].sort().join("");
-        const k = fan.get(pair) || 0;
-        fan.set(pair, k + 1);
-        const off = (k % 2 ? 1 : -1) * Math.ceil(k / 2) * 10;
-        let x1, y1, x2, y2, path, lx, ly;
-        if (Math.abs(s.x - e.x) < CW) {
-          // same column: arc out past the right edges
-          x1 = s.x + CW;
-          x2 = e.x + CW;
-          y1 = s.y + CH / 2 + off;
-          y2 = e.y + CH / 2 + off;
-          const bulge = 36 + Math.min(140, Math.abs(y2 - y1) * 0.2) + Math.abs(off);
-          path = `M${x1},${y1} C${x1 + bulge},${y1} ${x2 + bulge},${y2} ${x2 + 2},${y2}`;
-          lx = (x1 + x2) / 2 + bulge * 0.75 + 4;
-          ly = (y1 + y2) / 2 + 4;
-        } else {
-          // different columns: facing sides, an S-curve between them, below the tree's own links
-          const rightward = e.x > s.x;
-          x1 = rightward ? s.x + CW : s.x;
-          x2 = rightward ? e.x : e.x + CW;
-          y1 = s.y + CH * 0.72 + off;
-          y2 = e.y + CH * 0.72 + off;
-          const mx = (x1 + x2) / 2;
-          path = `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2 + (rightward ? -2 : 2)},${y2}`;
-          lx = mx + 4;
-          ly = (y1 + y2) / 2 - 4;
-        }
-        const keys = [...new Set(a.list.map((l) => l.key))];
-        const label =
-          a.op === "cancel" ? "cancel" : a.op === "once" ? `once ${keys.join(", ")}` : keys.length === 1 ? `${keys[0]}() ×${a.list.length}` : `ref ×${a.list.length}`;
-        const g = xl
-          .append("g")
-          .attr("class", `flow-xlink ${a.op}`)
-          .on("click", (ev) => {
-            ev.stopPropagation();
-            select(a.from.id, "links");
-          })
-          .on("mouseenter", (ev) => showTip(ev, linkTip(a.list[a.list.length - 1], a.list.length), true))
-          .on("mousemove", (ev) => moveTip(ev))
-          .on("mouseleave", hideTip);
-        g.append("path")
-          .attr("d", path)
-          .attr("stroke", a.op === "cancel" ? css("--cancel") : colorOf(a.to))
-          .attr("marker-end", "url(#flow-arrow)");
-        g.append("path").attr("class", "hit").attr("d", path);
-        // between neighbouring columns there is no room for words — the tooltip carries them
-        if (Math.abs(x2 - x1) >= 90) g.append("text").attr("x", lx).attr("y", ly).text(truncate(label, 28));
-      }
-
       const card = flowG
         .append("g")
         .selectAll("g.flow-card")
@@ -1118,6 +1059,31 @@
 
       // snapshot chips — on lane arrows, and in strips under leaf cards
       const chipLayer = flowG.append("g").attr("class", "flow-shots");
+      // A link chip's wire, drawn under everything else: out of the chip to a gutter right of the
+      // column, along it, and into the target card's right edge — so it never runs behind the cards
+      // between. Waits and cancels always have one; a ref call's shows while hovered.
+      const wireLayer = flowG.insert("g", ":first-child").attr("class", "flow-wires");
+      const linkChips = [];
+      const drawFlowWires = (hot) => {
+        const wires = [];
+        for (const c of linkChips) {
+          const p = pos.get(c.x2.l.to.id);
+          if (!p || (c.x2.l.op === "ref" && c.x2 !== hot)) continue;
+          wires.push({ c, p });
+        }
+        wireLayer
+          .selectAll("path")
+          .data(wires)
+          .join("path")
+          .attr("class", (w) => `fwire ${w.c.x2.l.op}${w.c.x2 === hot ? " hot" : ""}`)
+          .attr("d", (w, i) => {
+            const tx = w.p.x + CW;
+            const ty = w.p.y + CH / 2;
+            const gx = Math.max(tx, w.c.cx + TW / 2) + 12 + (i % 6) * 6; // staggered within the column gap
+            return `M${w.c.cx + TW / 2},${w.c.cy} H${gx} V${ty} H${tx}`;
+          })
+          .attr("stroke", (w) => linkColor(w.c.x2.l));
+      };
       const drawChips = (x, y, shots, max, owner) => {
         const shown = shots.length > max ? shots.slice(0, max - 1) : shots;
         const g = chipLayer.append("g").attr("transform", `translate(${x},${y})`);
@@ -1129,12 +1095,28 @@
           .attr("transform", (_x, i) => `translate(${i * (TW + 4)},0)`)
           .on("click", (ev, x2) => {
             ev.stopPropagation();
-            openGallery(x2);
+            if (x2.type !== "link") return openGallery(x2);
+            setPin(x2.t);
+            select(x2.l.from.id, "links");
+          })
+          .on("mouseenter", (ev, x2) => {
+            showTip(ev, x2.type === "link" ? linkTip(x2.l, x2.n) : galleryTip(x2), x2.type === "link");
+            if (x2.type === "link") drawFlowWires(x2);
           })
-          .on("mouseenter", (ev, x2) => showTip(ev, galleryTip(x2)))
           .on("mousemove", (ev) => moveTip(ev))
-          .on("mouseleave", hideTip);
-        cell.append("rect").attr("width", TW).attr("height", TH).attr("rx", 5);
+          .on("mouseleave", (ev, x2) => {
+            hideTip();
+            if (x2.type === "link") drawFlowWires(null);
+          });
+        shown.forEach((x2, i) => {
+          if (x2.type === "link") linkChips.push({ x2, cx: x + i * (TW + 4) + TW / 2, cy: y + TH / 2 });
+        });
+        cell
+          .append("rect")
+          .attr("width", TW)
+          .attr("height", TH)
+          .attr("rx", 5)
+          .attr("stroke", (x2) => (x2.type === "link" ? linkColor(x2.l) : null));
         cell
           .filter((x2) => x2.image)
           .append("image")
@@ -1150,7 +1132,7 @@
           .attr("x", TW / 2)
           .attr("y", TH / 2 + 3.5)
           .attr("text-anchor", "middle")
-          .text((x2) => (x2.type === "snapshot" ? "{ }" : "file"));
+          .text((x2) => (x2.type === "link" ? linkGlyph(x2) : x2.type === "snapshot" ? "{ }" : "file"));
         let end = shown.length * (TW + 4);
         if (shots.length > shown.length) {
           const more = g
@@ -1176,7 +1158,7 @@
             .attr("class", "flow-shot-t")
             .attr("x", end + 2)
             .attr("y", TH / 2 + 4)
-            .text(`${fmtRel(t)} · ${shots.length > 1 ? `${shots.length} snapshots` : esc(truncate(shots[0].name, 22))}`);
+            .text(`${fmtRel(t)} · ${shots.length > 1 ? chipCount(shots) : truncate(shots[0].name, 22)}`);
         }
       };
       for (const r of chipRows) {
@@ -1184,6 +1166,7 @@
         drawChips(r.x, r.y, r.shots, 6, owner);
       }
       for (const s of strips) drawChips(s.x, s.y, s.shots, Math.floor((CW - 12) / (TW + 4)), s.n);
+      drawFlowWires(null);
 
       flowPos = new Map([...pos].map(([id, p]) => [id, { x: p.x + CW / 2, y: p.y + CH / 2 }]));
       svg.call(flowZoom).on("dblclick.zoom", null);
@@ -1446,7 +1429,7 @@
           title: "Snapshots & files",
           count: shots.length,
           empty: !shots.length,
-          body: () => `<div class="shots">${shots.map((g) => shotHtml(g, n)).join("")}</div>`,
+          body: () => `<div class="dshots">${shots.map((g) => shotHtml(g, n)).join("")}</div>`,
         },
         {
           key: "events",
@@ -1527,7 +1510,7 @@
     /** 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)}">
+      return `<div class="dshot" 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>` : ""}
@@ -1569,7 +1552,8 @@
     function openItem(item) {
       if (!item) return;
       setPin(item.t);
-      if (item.node && item.node.id !== state.selected) select(item.node.id, "events");
+      if (item.kind === "link") select(item.node.id, "links");
+      else if (item.node && item.node.id !== state.selected) select(item.node.id, "events");
       if (item.gallery) openGallery(item.gallery);
     }
     function setPin(t) {
@@ -1929,6 +1913,9 @@
     }
     function markTip(d) {
       const m = d.m;
+      if (m.kind === "link") {
+        return linkTip(m.link) + (d.more.length ? `<div class="ts" style="margin-top:4px">+${d.more.length} more within a few ms</div>` : "");
+      }
       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>` : "";
@@ -2321,8 +2308,7 @@
             ${legendItem("--fail", "Failure / error", "dot")}
             ${legendItem("--cancel", "Cancelled", "dash")}
             ${legendItem("--accent", "Pinned time", "line")}
-            ${legendItem("--text-2", "Waits for an event", "dash")}
-            ${legendItem("--text-2", "Call on a ref", "tick")}
+            ${legendItem("--text-2", "Wait · cancel · ref call", "ring")}
           </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>
@@ -2339,8 +2325,8 @@
     const sw =
       shape === "bar"
         ? `<span style="width:16px;height:9px;border-radius:3px;background:${c}"></span>`
-        : shape === "tick"
-          ? `<span style="width:16px;height:3px;border-radius:2px;background:${c}"></span>`
+        : shape === "ring"
+          ? `<span class="dot" style="width:11px;height:11px;background:var(--panel);box-shadow:inset 0 0 0 2px ${c}"></span>`
           : shape === "dash"
           ? `<span style="width:16px;height:0;border-top:2px dashed ${c}"></span>`
           : shape === "line"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omkit",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "description": "A tiny runtime for developer workflows: typed actions that pass runtime capabilities and emit typed events, under one run and one shared log. The operational/runtime layer to tskb's knowledge layer.",
   "type": "module",
   "main": "./dist/index.js",