@caddis/cli 0.4.48 → 0.4.50

package/bundles/antigravity-plugin/skills/flow-studio/templates/engine.html

@@ -15,7 +15,7 @@
 <style>:root {
     --bg:#f6f8fa; --panel:#ffffff; --panel2:#f6f8fa; --edge:#d0d7de; --rule:#d8dee4; --fg:#1f2328; --muted:#59636e;
     --accent:#0969da; --accent-solid:#0969da; --ok:#1a7f37; --warn:#9a6700; --crit:#cf222e; --glow:rgba(9,105,218,.22);
-    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035); --dot:rgba(31,35,40,.18); --dot-size:1.2px; --dot-gap:24px; --edge-w:1.1px; --edge-w-hot:1.5px; --edge-w-play:1.6px; --trail-w:1.8px; --ripple-w:2px;
+    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035); --dot:rgba(31,35,40,.18); --dot-size:1.2px; --dot-gap:24px; --edge-w:0.8px; --edge-w-hot:1px; --edge-w-play:1.2px; --trail-w:1.3px; --ripple-w:1.5px;
     --warn-bg:rgba(154,103,0,.10); --ok-bg:rgba(26,127,55,.10); --crit-bg:rgba(207,34,46,.08); --info-bg:rgba(9,105,218,.10);
     --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
   }
@@ -198,6 +198,11 @@
   .node .metric-badge i { display:block; height:2px; position:absolute; bottom:0; left:0; background:var(--accent); }
   .node .s.has-spark { padding-right:60px; }
   .node .spark { position:absolute; right:6px; bottom:4px; overflow:visible; }
+  .node svg.bars { position:absolute; left:10px; right:10px; bottom:6px; width:calc(100% - 20px); height:22px; overflow:visible; }
+  .node svg.bars rect { fill:var(--muted); opacity:.6; }
+  .node svg.bars rect.last { fill:var(--accent); opacity:1; }
+  .node svg.bars rect.low, .node svg.bars rect.miss { fill:var(--crit); opacity:1; }
+  .node svg.bars rect[data-hl="true"] { stroke:var(--fg); stroke-width:1.5px; vector-effect:non-scaling-stroke; opacity:1; }
   .node.gateway .metric-badge { position:absolute; right:9px; top:18px; }
   .node.gateway:has(.metric-badge) .gw-title, .node.gateway.has-metrics .gw-title { width:45%; margin-right:42px; }
   .node .spark polyline, .metrics polyline { fill:none; stroke:var(--accent); stroke-width:1.5; }
@@ -229,7 +234,7 @@
   <div class="workspace" id="workspace">
     <section class="canvaswrap">
       <div id="viewport" tabindex="0" role="application" aria-label="Flow canvas. Scroll to zoom, drag to pan. Keys: V select, H hand, plus and minus zoom, 0 fit, 1 actual size, F zoom to selection, arrows pan.">
-        <div id="world"><svg id="edges" aria-hidden="true"><defs><marker id="arr" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 0 L8 4 L0 8 z" fill="context-stroke"/></marker></defs><g id="edgeLayer"></g></svg></div>
+        <div id="world"><svg id="edges" aria-hidden="true"><defs><marker id="arr" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 0 L8 4 L0 8 z" fill="context-stroke"/></marker></defs><g id="edgeLayer"></g></svg></div>
         <div id="cols" aria-hidden="true"></div>
         <div id="tools" role="toolbar" aria-label="Canvas controls" aria-orientation="vertical"></div>
         <div id="zoomLabel" aria-hidden="true">100%</div>
@@ -326,6 +331,8 @@
       const metric = n.metrics;
       const invalidSeries = metric?.series !== void 0 && (!Array.isArray(metric.series) || metric.series.length > 60 || metric.series.some((v) => !Number.isFinite(v)));
       if (metric !== void 0 && (!metric || !Number.isFinite(metric.value) || metric.max != null && !Number.isFinite(metric.max) || invalidSeries)) add("error", "metric-invalid", w, "Metrics need finite values and at most 60 finite series points.");
+      const badBars = n.bars !== void 0 && (!Array.isArray(n.bars) || n.bars.length > 120 || n.bars.some((b) => !b || typeof b.key !== "string" || b.value !== null && (typeof b.value !== "number" || !Number.isFinite(b.value) || b.value < 0)));
+      if (badBars) add("error", "bars-invalid", w, "Bars need a list of at most 120 items, each with a string key and a finite, non-negative value or null.");
       if (n.sla !== void 0 && (!Number.isFinite(n.sla) || n.sla <= 0)) add("error", "sla-invalid", w, "SLA must be a positive finite number of seconds.");
     }
     for (const n of nodes) {
@@ -975,6 +982,7 @@
 
   // src/layout.ts
   var DEFAULTS = { pitch: 62, top: 64, gap: 34, padX: 24, visible: () => true };
+  var BARS_EXTRA = 26;
   var LANE_PAD_TOP = 38;
   var LANE_PAD_BOTTOM = 14;
   function computeGeometry(m, opt = {}) {
@@ -988,7 +996,7 @@
     const world = { w: Math.max(1, x - o.gap + o.padX), h: 1 };
     const nodes = {};
     for (const n of m.nodes) {
-      const h = NODE_HEIGHT[n.kind] ?? 54;
+      const h = (NODE_HEIGHT[n.kind] ?? 54) + (n.bars?.length ? BARS_EXTRA : 0);
       if (m.layout === "free") {
         nodes[n.id] = { id: n.id, x: n.x ?? 0, y: n.y ?? 0, w: n.w ?? 190, h: n.h ?? h };
         continue;
@@ -1105,6 +1113,47 @@
     return `<svg class="spark" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true"><polyline points="${points}"/></svg>`;
   }
 
+  // src/bars.ts
+  var BAR_UNIT = 4;
+  function barsHtml(bars, height = 22) {
+    if (!bars || bars.length === 0) return "";
+    const width = bars.length * BAR_UNIT;
+    const max = Math.max(1, ...bars.map((b) => b.value ?? 0));
+    const lastWithData = bars.map((b) => b.value !== null).lastIndexOf(true);
+    const rects = bars.map((b, i) => {
+      const x = i * BAR_UNIT;
+      const w = BAR_UNIT - 1;
+      const label = esc(b.label ?? (b.value === null ? `${b.key}: no data` : `${b.key}: ${b.value}`));
+      if (b.value === null) {
+        return `<rect class="miss" data-key="${esc(b.key)}" x="${x}" y="${height - 4}" width="${w}" height="4"><title>${label}</title></rect>`;
+      }
+      const h = Math.max(1, b.value / max * (height - 5));
+      const cls = b.kind === "low" ? "low" : i === lastWithData ? "last" : "";
+      return `<rect${cls ? ` class="${cls}"` : ""} data-key="${esc(b.key)}" x="${x}" y="${height - h}" width="${w}" height="${h}"><title>${label}</title></rect>`;
+    });
+    const first = esc(bars[0].key), last = esc(bars[bars.length - 1].key);
+    return `<svg class="bars" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" role="img" aria-label="Bars, ${first} to ${last}">${rects.join("")}</svg>`;
+  }
+  function markKey(root, key) {
+    for (const r of Array.from(root.querySelectorAll("rect[data-key]"))) {
+      if (key !== null && r.getAttribute("data-key") === key) r.setAttribute("data-hl", "true");
+      else r.removeAttribute("data-hl");
+    }
+  }
+  function installBars(ctx) {
+    const set = (key) => {
+      if (ctx.hoverKey === key) return;
+      ctx.hoverKey = key;
+      markKey(ctx.els.world, key);
+      ctx.onHoverKey?.(key);
+    };
+    on(ctx, ctx.els.world, "mouseover", (e) => {
+      const bar = e.target?.closest?.("rect[data-key]");
+      set(bar ? bar.getAttribute("data-key") : null);
+    });
+    on(ctx, ctx.els.world, "mouseleave", () => set(null));
+  }
+
   // src/render.ts
   function loopRoute(ctx, fromId, toId, from, to, channel) {
     const detourFor = (end, other) => {
@@ -1141,7 +1190,7 @@
     const arrow = n.kind === "chip" ? '<span aria-hidden="true">\u2191 </span>' : "";
     const lead = showWord ? `<b class="ev st-${cssId(sid)}">${esc(word)}</b> \xB7 ` : "";
     const fold = n.kind === "group" && n.contains?.length ? `<span class="fold">\u25B8 ${n.contains.length}</span>` : "";
-    return `<div class="t"><span class="newdot" title="Added in this view"></span><span class="name">${arrow}${esc(n.title)}</span>${fold}${badge}</div><div class="s${spark ? " has-spark" : ""}" title="${esc(sub)}">${lead}${esc(sub)}</div>${spark}${bar}${improved}${upgrade}`;
+    return `<div class="t"><span class="newdot" title="Added in this view"></span><span class="name">${arrow}${esc(n.title)}</span>${fold}${badge}</div><div class="s${spark ? " has-spark" : ""}" title="${esc(sub)}">${lead}${esc(sub)}</div>${spark}${barsHtml(n.bars)}${bar}${improved}${upgrade}`;
   }
   function build(ctx) {
     const { model, els } = ctx;
@@ -1176,7 +1225,7 @@
     for (const n of model.nodes) {
       const p = ctx.geom.nodes[n.id];
       if (!p) continue;
-      const d = el("div", "node" + (n.kind === "chip" ? " ref" : "") + ((n.colSpan ?? 1) > 1 ? " wide" : ""));
+      const d = el("div", "node" + (n.kind === "chip" ? " ref" : "") + ((n.colSpan ?? 1) > 1 ? " wide" : "") + (n.bars?.length ? " has-bars" : ""));
       d.id = "n_" + n.id;
       d.tabIndex = 0;
       d.setAttribute("role", "button");
@@ -1311,6 +1360,7 @@
         d.style.height = r.h + "px";
       }
     }
+    markKey(ctx.els.world, ctx.hoverKey);
     ctx.fn.buildChrome();
     ctx.fn.trace(ctx.selected);
     ctx.fn.renderInspector();
@@ -2183,7 +2233,7 @@
     let t = 0, idx = -1, playing = false, frame = 0, timer = 0, stamp = 0, choicesKey = "";
     let markedEdges = [];
     let markedNodes = [];
-    const token = sv("circle", { id: "token", class: "token", r: "6" });
+    const token = sv("circle", { id: "token", class: "token", r: "4" });
     e.layer.appendChild(token);
     const pathOf = (link) => ctx.edgeEls[ctx.links.findIndex((l) => l.id === link)];
     const nodeOf = (id) => ctx.nodeEls.get(id);
@@ -2506,6 +2556,8 @@
       root,
       els,
       onSelect: opts.onSelect,
+      onHoverKey: opts.onHoverKey,
+      hoverKey: null,
       notes: opts.notes && opts.notes.length ? opts.notes : model.notes ?? [],
       nodes: new Map(model.nodes.map((n) => [n.id, n])),
       links: model.links,
@@ -2548,6 +2600,7 @@
     style.textContent = stateCss(model.states);
     install(ctx);
     install2(ctx);
+    installBars(ctx);
     install3(ctx);
     install4(ctx);
     install5(ctx);
@@ -2594,6 +2647,10 @@
         ctx.fn.fit(animate);
       },
       select: (id) => ctx.fn.select(id),
+      highlightKey: (key) => {
+        ctx.hoverKey = key;
+        markKey(ctx.els.world, key);
+      },
       selected: () => ctx.selected,
       mode: () => ctx.mode,
       setMode: (id) => ctx.fn.setMode(id),
@@ -2619,7 +2676,7 @@
         const changes = diffModels(ctx.model, prepared);
         const saved = { view: { ...ctx.view }, mode: ctx.mode, selected: ctx.selected, inspectorOpen: els.inspector.classList.contains("open"), query: ctx.query, hops: ctx.hops, filter: ctx.filter, collapsed: new Set(ctx.collapsed), knownGroups: new Set(ctx.model.nodes.filter((n) => n.kind === "group").map((n) => n.id)), playback: playback.playback() };
         api.destroy();
-        const replacement = mount(root, prepared, { notes: opts.notes, onSelect: opts.onSelect, restore: saved });
+        const replacement = mount(root, prepared, { notes: opts.notes, onSelect: opts.onSelect, onHoverKey: opts.onHoverKey, restore: saved });
         notifySelection(saved.selected, replacement.selected(), opts.onSelect);
         Object.assign(api, replacement);
         window.FlowStudio = api;

package/bundles/antigravity-plugin/skills/flow-studio/templates/flow-studio.css

@@ -1,7 +1,7 @@
 :root {
     --bg:#f6f8fa; --panel:#ffffff; --panel2:#f6f8fa; --edge:#d0d7de; --rule:#d8dee4; --fg:#1f2328; --muted:#59636e;
     --accent:#0969da; --accent-solid:#0969da; --ok:#1a7f37; --warn:#9a6700; --crit:#cf222e; --glow:rgba(9,105,218,.22);
-    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035); --dot:rgba(31,35,40,.18); --dot-size:1.2px; --dot-gap:24px; --edge-w:1.1px; --edge-w-hot:1.5px; --edge-w-play:1.6px; --trail-w:1.8px; --ripple-w:2px;
+    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035); --dot:rgba(31,35,40,.18); --dot-size:1.2px; --dot-gap:24px; --edge-w:0.8px; --edge-w-hot:1px; --edge-w-play:1.2px; --trail-w:1.3px; --ripple-w:1.5px;
     --warn-bg:rgba(154,103,0,.10); --ok-bg:rgba(26,127,55,.10); --crit-bg:rgba(207,34,46,.08); --info-bg:rgba(9,105,218,.10);
     --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
   }
@@ -184,6 +184,11 @@
   .node .metric-badge i { display:block; height:2px; position:absolute; bottom:0; left:0; background:var(--accent); }
   .node .s.has-spark { padding-right:60px; }
   .node .spark { position:absolute; right:6px; bottom:4px; overflow:visible; }
+  .node svg.bars { position:absolute; left:10px; right:10px; bottom:6px; width:calc(100% - 20px); height:22px; overflow:visible; }
+  .node svg.bars rect { fill:var(--muted); opacity:.6; }
+  .node svg.bars rect.last { fill:var(--accent); opacity:1; }
+  .node svg.bars rect.low, .node svg.bars rect.miss { fill:var(--crit); opacity:1; }
+  .node svg.bars rect[data-hl="true"] { stroke:var(--fg); stroke-width:1.5px; vector-effect:non-scaling-stroke; opacity:1; }
   .node.gateway .metric-badge { position:absolute; right:9px; top:18px; }
   .node.gateway:has(.metric-badge) .gw-title, .node.gateway.has-metrics .gw-title { width:45%; margin-right:42px; }
   .node .spark polyline, .metrics polyline { fill:none; stroke:var(--accent); stroke-width:1.5; }

package/bundles/antigravity-plugin/skills/flow-studio/templates/flow-studio.lib.mjs

@@ -69,6 +69,8 @@ function validateModel(input) {
     const metric = n.metrics;
     const invalidSeries = metric?.series !== void 0 && (!Array.isArray(metric.series) || metric.series.length > 60 || metric.series.some((v) => !Number.isFinite(v)));
     if (metric !== void 0 && (!metric || !Number.isFinite(metric.value) || metric.max != null && !Number.isFinite(metric.max) || invalidSeries)) add("error", "metric-invalid", w, "Metrics need finite values and at most 60 finite series points.");
+    const badBars = n.bars !== void 0 && (!Array.isArray(n.bars) || n.bars.length > 120 || n.bars.some((b) => !b || typeof b.key !== "string" || b.value !== null && (typeof b.value !== "number" || !Number.isFinite(b.value) || b.value < 0)));
+    if (badBars) add("error", "bars-invalid", w, "Bars need a list of at most 120 items, each with a string key and a finite, non-negative value or null.");
     if (n.sla !== void 0 && (!Number.isFinite(n.sla) || n.sla <= 0)) add("error", "sla-invalid", w, "SLA must be a positive finite number of seconds.");
   }
   for (const n of nodes) {
@@ -749,6 +751,7 @@ function on(ctx, target, type, fn, opts) {
 
 // src/layout.ts
 var DEFAULTS = { pitch: 62, top: 64, gap: 34, padX: 24, visible: () => true };
+var BARS_EXTRA = 26;
 var LANE_PAD_TOP = 38;
 var LANE_PAD_BOTTOM = 14;
 function computeGeometry(m, opt = {}) {
@@ -762,7 +765,7 @@ function computeGeometry(m, opt = {}) {
   const world = { w: Math.max(1, x - o.gap + o.padX), h: 1 };
   const nodes = {};
   for (const n of m.nodes) {
-    const h = NODE_HEIGHT[n.kind] ?? 54;
+    const h = (NODE_HEIGHT[n.kind] ?? 54) + (n.bars?.length ? BARS_EXTRA : 0);
     if (m.layout === "free") {
       nodes[n.id] = { id: n.id, x: n.x ?? 0, y: n.y ?? 0, w: n.w ?? 190, h: n.h ?? h };
       continue;
@@ -884,6 +887,47 @@ function sparkline(metric, width = 56, height = 12) {
   return `<svg class="spark" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true"><polyline points="${points}"/></svg>`;
 }
 
+// src/bars.ts
+var BAR_UNIT = 4;
+function barsHtml(bars, height = 22) {
+  if (!bars || bars.length === 0) return "";
+  const width = bars.length * BAR_UNIT;
+  const max = Math.max(1, ...bars.map((b) => b.value ?? 0));
+  const lastWithData = bars.map((b) => b.value !== null).lastIndexOf(true);
+  const rects = bars.map((b, i) => {
+    const x = i * BAR_UNIT;
+    const w = BAR_UNIT - 1;
+    const label = esc(b.label ?? (b.value === null ? `${b.key}: no data` : `${b.key}: ${b.value}`));
+    if (b.value === null) {
+      return `<rect class="miss" data-key="${esc(b.key)}" x="${x}" y="${height - 4}" width="${w}" height="4"><title>${label}</title></rect>`;
+    }
+    const h = Math.max(1, b.value / max * (height - 5));
+    const cls = b.kind === "low" ? "low" : i === lastWithData ? "last" : "";
+    return `<rect${cls ? ` class="${cls}"` : ""} data-key="${esc(b.key)}" x="${x}" y="${height - h}" width="${w}" height="${h}"><title>${label}</title></rect>`;
+  });
+  const first = esc(bars[0].key), last = esc(bars[bars.length - 1].key);
+  return `<svg class="bars" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" role="img" aria-label="Bars, ${first} to ${last}">${rects.join("")}</svg>`;
+}
+function markKey(root, key) {
+  for (const r of Array.from(root.querySelectorAll("rect[data-key]"))) {
+    if (key !== null && r.getAttribute("data-key") === key) r.setAttribute("data-hl", "true");
+    else r.removeAttribute("data-hl");
+  }
+}
+function installBars(ctx) {
+  const set = (key) => {
+    if (ctx.hoverKey === key) return;
+    ctx.hoverKey = key;
+    markKey(ctx.els.world, key);
+    ctx.onHoverKey?.(key);
+  };
+  on(ctx, ctx.els.world, "mouseover", (e) => {
+    const bar = e.target?.closest?.("rect[data-key]");
+    set(bar ? bar.getAttribute("data-key") : null);
+  });
+  on(ctx, ctx.els.world, "mouseleave", () => set(null));
+}
+
 // src/render.ts
 function loopRoute(ctx, fromId, toId, from, to, channel) {
   const detourFor = (end, other) => {
@@ -920,7 +964,7 @@ function nodeHtml(ctx, n) {
   const arrow = n.kind === "chip" ? '<span aria-hidden="true">\u2191 </span>' : "";
   const lead = showWord ? `<b class="ev st-${cssId(sid)}">${esc(word)}</b> \xB7 ` : "";
   const fold = n.kind === "group" && n.contains?.length ? `<span class="fold">\u25B8 ${n.contains.length}</span>` : "";
-  return `<div class="t"><span class="newdot" title="Added in this view"></span><span class="name">${arrow}${esc(n.title)}</span>${fold}${badge}</div><div class="s${spark ? " has-spark" : ""}" title="${esc(sub)}">${lead}${esc(sub)}</div>${spark}${bar}${improved}${upgrade}`;
+  return `<div class="t"><span class="newdot" title="Added in this view"></span><span class="name">${arrow}${esc(n.title)}</span>${fold}${badge}</div><div class="s${spark ? " has-spark" : ""}" title="${esc(sub)}">${lead}${esc(sub)}</div>${spark}${barsHtml(n.bars)}${bar}${improved}${upgrade}`;
 }
 function build(ctx) {
   const { model, els } = ctx;
@@ -955,7 +999,7 @@ function build(ctx) {
   for (const n of model.nodes) {
     const p = ctx.geom.nodes[n.id];
     if (!p) continue;
-    const d = el("div", "node" + (n.kind === "chip" ? " ref" : "") + ((n.colSpan ?? 1) > 1 ? " wide" : ""));
+    const d = el("div", "node" + (n.kind === "chip" ? " ref" : "") + ((n.colSpan ?? 1) > 1 ? " wide" : "") + (n.bars?.length ? " has-bars" : ""));
     d.id = "n_" + n.id;
     d.tabIndex = 0;
     d.setAttribute("role", "button");
@@ -1090,6 +1134,7 @@ function paint(ctx, fromSwitch = false) {
       d.style.height = r.h + "px";
     }
   }
+  markKey(ctx.els.world, ctx.hoverKey);
   ctx.fn.buildChrome();
   ctx.fn.trace(ctx.selected);
   ctx.fn.renderInspector();
@@ -1983,7 +2028,7 @@ function install7(ctx) {
   let t = 0, idx = -1, playing = false, frame = 0, timer = 0, stamp = 0, choicesKey = "";
   let markedEdges = [];
   let markedNodes = [];
-  const token = sv("circle", { id: "token", class: "token", r: "6" });
+  const token = sv("circle", { id: "token", class: "token", r: "4" });
   e.layer.appendChild(token);
   const pathOf = (link) => ctx.edgeEls[ctx.links.findIndex((l) => l.id === link)];
   const nodeOf = (id) => ctx.nodeEls.get(id);
@@ -2310,6 +2355,8 @@ function mount(root, model, opts = {}) {
     root,
     els,
     onSelect: opts.onSelect,
+    onHoverKey: opts.onHoverKey,
+    hoverKey: null,
     notes: opts.notes && opts.notes.length ? opts.notes : model.notes ?? [],
     nodes: new Map(model.nodes.map((n) => [n.id, n])),
     links: model.links,
@@ -2352,6 +2399,7 @@ function mount(root, model, opts = {}) {
   style.textContent = stateCss(model.states);
   install(ctx);
   install2(ctx);
+  installBars(ctx);
   install3(ctx);
   install4(ctx);
   install5(ctx);
@@ -2398,6 +2446,10 @@ function mount(root, model, opts = {}) {
       ctx.fn.fit(animate);
     },
     select: (id) => ctx.fn.select(id),
+    highlightKey: (key) => {
+      ctx.hoverKey = key;
+      markKey(ctx.els.world, key);
+    },
     selected: () => ctx.selected,
     mode: () => ctx.mode,
     setMode: (id) => ctx.fn.setMode(id),
@@ -2423,7 +2475,7 @@ function mount(root, model, opts = {}) {
       const changes = diffModels(ctx.model, prepared);
       const saved = { view: { ...ctx.view }, mode: ctx.mode, selected: ctx.selected, inspectorOpen: els.inspector.classList.contains("open"), query: ctx.query, hops: ctx.hops, filter: ctx.filter, collapsed: new Set(ctx.collapsed), knownGroups: new Set(ctx.model.nodes.filter((n) => n.kind === "group").map((n) => n.id)), playback: playback.playback() };
       api.destroy();
-      const replacement = mount(root, prepared, { notes: opts.notes, onSelect: opts.onSelect, restore: saved });
+      const replacement = mount(root, prepared, { notes: opts.notes, onSelect: opts.onSelect, onHoverKey: opts.onHoverKey, restore: saved });
       notifySelection(saved.selected, replacement.selected(), opts.onSelect);
       Object.assign(api, replacement);
       window.FlowStudio = api;
@@ -2448,7 +2500,7 @@ function mount(root, model, opts = {}) {
 }
 
 // src/lib.ts
-var SHELL_BODY_HTML = "<header class=\"top\">\r\n  <span class=\"brand\"><i></i>flow-studio</span>\r\n  <span class=\"spacer\"></span>\r\n  <button id=\"notesBtn\" type=\"button\" aria-pressed=\"false\">Implementation notes (N)</button>\r\n  <button id=\"theme\" type=\"button\" aria-label=\"Toggle light and dark\">☀ / ☾</button>\r\n</header>\r\n<main>\r\n  <div class=\"titlerow\"><h1 id=\"title\"></h1><span class=\"readline\" id=\"readat\"></span></div>\r\n  <p class=\"help\" id=\"help\"></p>\r\n  <div id=\"banner\" role=\"alert\" hidden></div>\r\n\r\n  <section class=\"summary\"><div class=\"layerstrip\" id=\"layerstrip\" aria-label=\"Completeness by column\"></div><div class=\"tiles\" id=\"kpis\" aria-label=\"Summary\"></div></section>\r\n\r\n  <div class=\"toolbar\">\r\n    <div class=\"seggrp\" role=\"tablist\" aria-label=\"View\" id=\"modeSwitch\"></div>\r\n    <input id=\"q\" type=\"search\" placeholder=\"Find a group or member…  ( / )\" aria-label=\"Find a group or member\">\r\n    <select id=\"hops\" aria-label=\"Search radius\"><option value=\"0\">This group</option><option value=\"1\">+1 hop</option><option value=\"2\">+2 hops</option><option value=\"3\">+3 hops</option></select>\r\n    <span id=\"matchinfo\" class=\"note\" style=\"margin:0\"></span>\r\n  </div>\r\n\r\n  <div class=\"workspace\" id=\"workspace\">\r\n    <section class=\"canvaswrap\">\r\n      <div id=\"viewport\" tabindex=\"0\" role=\"application\" aria-label=\"Flow canvas. Scroll to zoom, drag to pan. Keys: V select, H hand, plus and minus zoom, 0 fit, 1 actual size, F zoom to selection, arrows pan.\">\r\n        <div id=\"world\"><svg id=\"edges\" aria-hidden=\"true\"><defs><marker id=\"arr\" viewBox=\"0 0 8 8\" refX=\"7\" refY=\"4\" markerWidth=\"9\" markerHeight=\"9\" markerUnits=\"userSpaceOnUse\" orient=\"auto\"><path d=\"M0 0 L8 4 L0 8 z\" fill=\"context-stroke\"/></marker></defs><g id=\"edgeLayer\"></g></svg></div>\r\n        <div id=\"cols\" aria-hidden=\"true\"></div>\r\n        <div id=\"tools\" role=\"toolbar\" aria-label=\"Canvas controls\" aria-orientation=\"vertical\"></div>\r\n        <div id=\"zoomLabel\" aria-hidden=\"true\">100%</div>\r\n      </div>\r\n      <div id=\"playbar\" hidden aria-label=\"Scenario playback\">\r\n        <select id=\"pbScenario\" aria-label=\"Scenario\"></select>\r\n        <button id=\"pbPlay\" type=\"button\" aria-label=\"Play\">▶</button>\r\n        <button id=\"pbStep\" type=\"button\" aria-label=\"Step\">Step</button>\r\n        <button id=\"pbReset\" type=\"button\" aria-label=\"Reset\">Reset</button>\r\n        <select id=\"pbSpeed\" aria-label=\"Speed\"><option value=\"0.5\">0.5x</option><option value=\"1\" selected>1x</option><option value=\"2\">2x</option></select>\r\n        <input id=\"pbScrub\" type=\"range\" min=\"0\" max=\"1000\" value=\"0\" aria-label=\"Playback position\" aria-valuetext=\"Step 1 of 1\">\r\n        <span id=\"pbCaption\"></span><span id=\"pbCounter\"></span><span id=\"pbChoices\"></span>\r\n      </div>\r\n      <div class=\"keyline\" id=\"legend\" aria-label=\"Legend\"></div>\r\n      <aside class=\"insp\" id=\"inspector\" aria-label=\"Inspector\" aria-hidden=\"true\"></aside>\r\n    </section>\r\n  </div>\r\n  <div id=\"live\" class=\"sr\" role=\"status\" aria-live=\"polite\"></div>\r\n\r\n  <div class=\"ledger\" id=\"ledger\"></div>\r\n  <details class=\"tableview\"><summary>Table view</summary><table class=\"sources\" id=\"tbl\"></table></details>\r\n  <details class=\"spec\" id=\"spec\"><summary>Model reference (for the person or agent who builds this)</summary><div id=\"specbody\"></div></details>\r\n</main>\r\n<footer id=\"footer\"></footer>\r\n<aside id=\"drawer\" aria-label=\"Implementation notes\"><h2>Implementation notes</h2><p class=\"note\">Numbered markers on the page match these cards. Hover a card to find its place; click a marker to jump to its card.</p><div id=\"notelist\"></div></aside>\r\n\r\n";
+var SHELL_BODY_HTML = "<header class=\"top\">\r\n  <span class=\"brand\"><i></i>flow-studio</span>\r\n  <span class=\"spacer\"></span>\r\n  <button id=\"notesBtn\" type=\"button\" aria-pressed=\"false\">Implementation notes (N)</button>\r\n  <button id=\"theme\" type=\"button\" aria-label=\"Toggle light and dark\">☀ / ☾</button>\r\n</header>\r\n<main>\r\n  <div class=\"titlerow\"><h1 id=\"title\"></h1><span class=\"readline\" id=\"readat\"></span></div>\r\n  <p class=\"help\" id=\"help\"></p>\r\n  <div id=\"banner\" role=\"alert\" hidden></div>\r\n\r\n  <section class=\"summary\"><div class=\"layerstrip\" id=\"layerstrip\" aria-label=\"Completeness by column\"></div><div class=\"tiles\" id=\"kpis\" aria-label=\"Summary\"></div></section>\r\n\r\n  <div class=\"toolbar\">\r\n    <div class=\"seggrp\" role=\"tablist\" aria-label=\"View\" id=\"modeSwitch\"></div>\r\n    <input id=\"q\" type=\"search\" placeholder=\"Find a group or member…  ( / )\" aria-label=\"Find a group or member\">\r\n    <select id=\"hops\" aria-label=\"Search radius\"><option value=\"0\">This group</option><option value=\"1\">+1 hop</option><option value=\"2\">+2 hops</option><option value=\"3\">+3 hops</option></select>\r\n    <span id=\"matchinfo\" class=\"note\" style=\"margin:0\"></span>\r\n  </div>\r\n\r\n  <div class=\"workspace\" id=\"workspace\">\r\n    <section class=\"canvaswrap\">\r\n      <div id=\"viewport\" tabindex=\"0\" role=\"application\" aria-label=\"Flow canvas. Scroll to zoom, drag to pan. Keys: V select, H hand, plus and minus zoom, 0 fit, 1 actual size, F zoom to selection, arrows pan.\">\r\n        <div id=\"world\"><svg id=\"edges\" aria-hidden=\"true\"><defs><marker id=\"arr\" viewBox=\"0 0 8 8\" refX=\"7\" refY=\"4\" markerWidth=\"6\" markerHeight=\"6\" markerUnits=\"userSpaceOnUse\" orient=\"auto\"><path d=\"M0 0 L8 4 L0 8 z\" fill=\"context-stroke\"/></marker></defs><g id=\"edgeLayer\"></g></svg></div>\r\n        <div id=\"cols\" aria-hidden=\"true\"></div>\r\n        <div id=\"tools\" role=\"toolbar\" aria-label=\"Canvas controls\" aria-orientation=\"vertical\"></div>\r\n        <div id=\"zoomLabel\" aria-hidden=\"true\">100%</div>\r\n      </div>\r\n      <div id=\"playbar\" hidden aria-label=\"Scenario playback\">\r\n        <select id=\"pbScenario\" aria-label=\"Scenario\"></select>\r\n        <button id=\"pbPlay\" type=\"button\" aria-label=\"Play\">▶</button>\r\n        <button id=\"pbStep\" type=\"button\" aria-label=\"Step\">Step</button>\r\n        <button id=\"pbReset\" type=\"button\" aria-label=\"Reset\">Reset</button>\r\n        <select id=\"pbSpeed\" aria-label=\"Speed\"><option value=\"0.5\">0.5x</option><option value=\"1\" selected>1x</option><option value=\"2\">2x</option></select>\r\n        <input id=\"pbScrub\" type=\"range\" min=\"0\" max=\"1000\" value=\"0\" aria-label=\"Playback position\" aria-valuetext=\"Step 1 of 1\">\r\n        <span id=\"pbCaption\"></span><span id=\"pbCounter\"></span><span id=\"pbChoices\"></span>\r\n      </div>\r\n      <div class=\"keyline\" id=\"legend\" aria-label=\"Legend\"></div>\r\n      <aside class=\"insp\" id=\"inspector\" aria-label=\"Inspector\" aria-hidden=\"true\"></aside>\r\n    </section>\r\n  </div>\r\n  <div id=\"live\" class=\"sr\" role=\"status\" aria-live=\"polite\"></div>\r\n\r\n  <div class=\"ledger\" id=\"ledger\"></div>\r\n  <details class=\"tableview\"><summary>Table view</summary><table class=\"sources\" id=\"tbl\"></table></details>\r\n  <details class=\"spec\" id=\"spec\"><summary>Model reference (for the person or agent who builds this)</summary><div id=\"specbody\"></div></details>\r\n</main>\r\n<footer id=\"footer\"></footer>\r\n<aside id=\"drawer\" aria-label=\"Implementation notes\"><h2>Implementation notes</h2><p class=\"note\">Numbered markers on the page match these cards. Hover a card to find its place; click a marker to jump to its card.</p><div id=\"notelist\"></div></aside>\r\n\r\n";
 export {
   K_MAX,
   K_MIN,

package/bundles/antigravity-plugin/skills/flow-studio/templates/shell-body.html

@@ -21,7 +21,7 @@
   <div class="workspace" id="workspace">
     <section class="canvaswrap">
       <div id="viewport" tabindex="0" role="application" aria-label="Flow canvas. Scroll to zoom, drag to pan. Keys: V select, H hand, plus and minus zoom, 0 fit, 1 actual size, F zoom to selection, arrows pan.">
-        <div id="world"><svg id="edges" aria-hidden="true"><defs><marker id="arr" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 0 L8 4 L0 8 z" fill="context-stroke"/></marker></defs><g id="edgeLayer"></g></svg></div>
+        <div id="world"><svg id="edges" aria-hidden="true"><defs><marker id="arr" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" markerUnits="userSpaceOnUse" orient="auto"><path d="M0 0 L8 4 L0 8 z" fill="context-stroke"/></marker></defs><g id="edgeLayer"></g></svg></div>
         <div id="cols" aria-hidden="true"></div>
         <div id="tools" role="toolbar" aria-label="Canvas controls" aria-orientation="vertical"></div>
         <div id="zoomLabel" aria-hidden="true">100%</div>

package/bundles/codex/.codex/skills/frontend/flow-studio/SKILL.md

@@ -70,7 +70,7 @@ In either route, derive node and link IDs from immutable business keys. Preserve
 8. **Short titles**: titles fit one line at column width. Long descriptions belong in subtitles or member lists.
 9. **Fixed node dimensions**: node kinds use fixed box sizes so font rendering does not shift layout.
 10. **Reduced motion**: removes all animations while preserving static borders and status glows.
-11. **Thin links, dotted canvas**: links are hairlines (about 1.1 px) and the canvas background is faint dots, not a grid. Both come from tokens (`--edge-w`, `--dot`, ...), so an app can change them with one CSS line; see `references/design-language.md`.
+11. **Thin links, dotted canvas**: links are hairlines (about 0.8 px, with a 6 px arrowhead) and the canvas background is faint dots, not a grid. Both come from tokens (`--edge-w`, `--dot`, ...), so an app can change them with one CSS line; see `references/design-language.md`.
 
 ## Model summary
 
@@ -80,7 +80,7 @@ columns [{id, title, short?, width, phase?, continues?}]              stages, le
 lanes   [{id, title, badge?, badgeTone?, note?, gap?}]    rows; gap true = dashed amber lane
 states  {id: {word, tone, border, edge, motion, bucket}}  tone: ok|warn|crit|info|muted|accent; bucket: good|neutral|gap
 nodes   [{id, kind, lane?, col?, colSpan?, row?, x?, y?, w?, h?, state, title, subtitle?, members?, weight?,
-          ref?, upgrade?, contains?, collapsed?, stateIn?, visibleIn?, sla?, metrics?}]
+          ref?, upgrade?, contains?, collapsed?, stateIn?, visibleIn?, sla?, metrics?, bars?}]
 links   [{id, from, to, state, kind?, label?, stateIn?, visibleIn?}]   kind: forward | loop-back
 views   [{id, label, default?}]                           first view serves as baseline
 inspector {relations [up to 3], actions [{id, label, dir, staleText}]}

package/bundles/codex/.codex/skills/frontend/flow-studio/model.schema.json

@@ -75,7 +75,10 @@
           "sla": { "type": "number", "exclusiveMinimum": 0, "description": "Target service level agreement in seconds" },
           "metrics": { "type": "object", "required": ["value"], "additionalProperties": false,
             "properties": { "value": { "type": "number" }, "max": { "type": ["number", "null"], "description": "Upper bound for the badge fill bar; null means there is no maximum" }, "unit": { "type": "string" }, "label": { "type": "string" },
-              "series": { "type": "array", "maxItems": 60, "items": { "type": "number" } } } }
+              "series": { "type": "array", "maxItems": 60, "items": { "type": "number" } } } },
+          "bars": { "type": "array", "maxItems": 120, "description": "A small bar chart on the node, one bar per key. A null value is a missing key (a red tick, never zero). Hovering a bar marks the same key on every chart.",
+            "items": { "type": "object", "required": ["key", "value"], "additionalProperties": false,
+              "properties": { "key": { "type": "string" }, "value": { "type": ["number", "null"], "minimum": 0 }, "kind": { "enum": ["low"] }, "label": { "type": "string" } } } }
         }
       }
     },

package/bundles/codex/.codex/skills/frontend/flow-studio/react/FlowStudioView.test.tsx

@@ -7,15 +7,17 @@ const lifecycle = vi.hoisted(() => ({
   alive: 0, updates: [] as Model[], mounts: 0, listenerCount: 0,
   notes: [] as (NoteDef[] | undefined)[],
   onSelect: undefined as ((id: string | null) => void) | undefined,
+  onHoverKey: undefined as ((key: string | null) => void) | undefined,
 }));
 vi.mock('../templates/flow-studio.lib.mjs', () => ({
   SHELL_BODY_HTML: '<div id="viewport"></div>',
-  mount: (_root: ParentNode, _model: Model, options: { notes?: NoteDef[]; onSelect?: (id: string | null) => void }) => {
+  mount: (_root: ParentNode, _model: Model, options: { notes?: NoteDef[]; onSelect?: (id: string | null) => void; onHoverKey?: (key: string | null) => void }) => {
     lifecycle.mounts++;
     lifecycle.alive++;
     lifecycle.listenerCount++;
     lifecycle.notes.push(options.notes);
     lifecycle.onSelect = options.onSelect;
+    lifecycle.onHoverKey = options.onHoverKey;
     return {
       update: (model: Model) => { lifecycle.updates.push(model); return { ok: true, issues: [] }; },
       destroy: () => { lifecycle.alive--; lifecycle.listenerCount--; },
@@ -56,6 +58,21 @@ describe('FlowStudioView', () => {
     expect(globals.flowStudioMount).toBe(previousMount);
   });
 
+  it('forwards the hovered bar key to the latest onHoverKey, without remounting', () => {
+    lifecycle.mounts = 0;
+    const first = vi.fn();
+    const second = vi.fn();
+    const rendered = render(<FlowStudioView model={model} onHoverKey={first} />);
+    lifecycle.onHoverKey?.('2026-09-02');
+    expect(first).toHaveBeenCalledWith('2026-09-02');
+    rendered.rerender(<FlowStudioView model={model} onHoverKey={second} />);
+    expect(lifecycle.mounts).toBe(1);
+    lifecycle.onHoverKey?.(null);
+    expect(second).toHaveBeenCalledWith(null);
+    expect(first).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+  });
+
   it('passes notes at mount and ignores later notes-only changes', () => {
     lifecycle.updates = [];
     lifecycle.notes = [];

package/bundles/codex/.codex/skills/frontend/flow-studio/react/FlowStudioView.tsx

@@ -7,6 +7,8 @@ export interface FlowStudioViewProps {
   /** Read once at mount; later changes to this prop are ignored. For notes that change with the data, put them on `model.notes` — `update` forwards them. */
   notes?: NoteDef[];
   onSelect?: (id: string | null) => void;
+  /** The bar key under the pointer (a node's `bars`), or null when it leaves. The latest function is always called. */
+  onHoverKey?: (key: string | null) => void;
   className?: string;
 }
 
@@ -17,16 +19,18 @@ let mountedViews = 0;
 let previousGlobalMount: typeof mount | undefined;
 
 /** Mounts the finished engine in React. The shell stays outside React's child tree. */
-export function FlowStudioView({ model, notes, onSelect, className }: FlowStudioViewProps) {
+export function FlowStudioView({ model, notes, onSelect, onHoverKey, className }: FlowStudioViewProps) {
   const root = useRef<HTMLDivElement>(null);
   const api = useRef<FlowStudio | null>(null);
   const currentModel = useRef(model);
   const currentNotes = useRef(notes);
   const currentSelect = useRef(onSelect);
+  const currentHoverKey = useRef(onHoverKey);
   const lastModel = useRef<string | null>(null);
   currentModel.current = model;
   currentNotes.current = notes;
   currentSelect.current = onSelect;
+  currentHoverKey.current = onHoverKey;
   const modelJson = JSON.stringify(model);
 
   useEffect(() => {
@@ -36,6 +40,7 @@ export function FlowStudioView({ model, notes, onSelect, className }: FlowStudio
     const instance = mount(container, currentModel.current, {
       notes: currentNotes.current,
       onSelect: id => currentSelect.current?.(id),
+      onHoverKey: key => currentHoverKey.current?.(key),
     });
     if (mountedViews === 0) {
       previousGlobalMount = window.flowStudioMount;

package/bundles/codex/.codex/skills/frontend/flow-studio/react/README.md

@@ -22,7 +22,7 @@ function FlowPage({ state, onRetry, onSelect }: { state: State; onRetry: () => v
 }
 ```
 
-`FlowStudioView` takes a required `model` and optional `notes`, `onSelect`, and `className`. `notes` is read once at mount; later changes to the prop are ignored. For notes that change with the data, put them on the model (`model.notes`) — `update` forwards them. `onSelect` receives a stable node id or `null` when selection clears. The component mounts the engine once, sends changed models to `update`, and destroys its listeners on unmount. React StrictMode's development mount cycle is supported. Several views may be mounted at once; the engine's global mount helper stays available until the last one unmounts.
+`FlowStudioView` takes a required `model` and optional `notes`, `onSelect`, `onHoverKey`, and `className`. `notes` is read once at mount; later changes to the prop are ignored. For notes that change with the data, put them on the model (`model.notes`) — `update` forwards them. `onSelect` receives a stable node id or `null` when selection clears. `onHoverKey` receives the key of the bar under the pointer (see `bars` on a node) or `null`; call `window.FlowStudio?.highlightKey(key)` to mark a key from outside. The component mounts the engine once, sends changed models to `update`, and destroys its listeners on unmount. React StrictMode's development mount cycle is supported. Several views may be mounted at once; the engine's global mount helper stays available until the last one unmounts.
 
 ## Live data contract
 

package/bundles/codex/.codex/skills/frontend/flow-studio/references/design-language.md

@@ -28,11 +28,11 @@ Tokens are defined on `:root` and adapted for dark mode via `@media (prefers-col
 | `--dot` | `rgba(31,35,40,.18)` | `rgba(255,255,255,.16)` | Colour of the canvas background dots |
 | `--dot-size` | `1.2px` | Same | Radius of a background dot |
 | `--dot-gap` | `24px` | Same | Spacing of the background dots |
-| `--edge-w` | `1.1px` | Same | Width of a normal link (thin, like a hairline; motion carries the state) |
-| `--edge-w-hot` | `1.5px` | Same | Width of a traced or selected link |
-| `--edge-w-play` | `1.6px` | Same | Width of a link while playback runs along it |
-| `--trail-w` | `1.8px` | Same | Width of the draw-in trail on a selected path (divided by the zoom) |
-| `--ripple-w` | `2px` | Same | Width of the what-if ripple (divided by the zoom) |
+| `--edge-w` | `0.8px` | Same | Width of a normal link (thin, like a hairline; motion carries the state) |
+| `--edge-w-hot` | `1px` | Same | Width of a traced or selected link |
+| `--edge-w-play` | `1.2px` | Same | Width of a link while playback runs along it |
+| `--trail-w` | `1.3px` | Same | Width of the draw-in trail on a selected path (divided by the zoom) |
+| `--ripple-w` | `1.5px` | Same | Width of the what-if ripple (divided by the zoom) |
 | `--ok-bg` | `rgba(26,127,55,.10)` | `rgba(63,185,80,.12)` | Subtle tinted background for healthy states |
 | `--warn-bg` | `rgba(154,103,0,.10)` | `rgba(210,153,34,.14)` | Subtle tinted background for warning states |
 | `--crit-bg` | `rgba(207,34,46,.08)` | `rgba(248,81,73,.12)` | Subtle tinted background for critical states |

package/bundles/codex/.codex/skills/frontend/flow-studio/references/model-schema.md

@@ -112,6 +112,7 @@ Nodes represent processing units, cards, gateways, groups, and milestones.
 | `collapsed` | `boolean` | Optional | `true` | When true, group starts collapsed hiding child nodes. |
 | `sla` | `number` | Optional | - | Target service level agreement threshold in seconds. |
 | `metrics` | `object` | Optional | - | Telemetry payload (see metrics table). |
+| `bars` | `array` | Optional | - | A small bar chart on the node, one bar per `key` (see bars table). |
 
 ---
 
@@ -129,6 +130,21 @@ Provides numerical telemetry, health bars, and sparklines.
 
 ---
 
+### `bars` items (under `nodes`)
+
+A bar chart drawn inside the node, for example rows per day. Hovering a bar marks the bars with the same `key` on
+every node, so a reader can ask "was this day bad everywhere?". The host page can follow the hover with the
+`onHoverKey` mount option and drive it with `highlightKey(key)`. At most 120 bars.
+
+| Property | Type | Required? | Default | Description |
+|---|---|---|---|---|
+| `key` | `string` | Required | - | Opaque id of the bar (a date or a step). Equal keys are linked across charts. |
+| `value` | `number` or `null` | Required | - | Bar size (finite, not negative). `null` means no data for that key: a short red tick, never a zero bar. |
+| `kind` | `string` | Optional | - | `"low"` draws the bar in the critical colour. The last bar with data is drawn in the accent colour, unless it is `low`. |
+| `label` | `string` | Optional | - | Tooltip text; defaults to `key: value`. |
+
+---
+
 ## 8. `links` array items
 
 Links represent directional data transit, dependencies, or workflow transitions.

package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/styles.test.mjs

@@ -22,14 +22,23 @@ test("dots are set by tokens: size, spacing and a colour for light and dark", ()
 });
 
 test("links are thin by default and every width comes from a token", () => {
-  assert.match(css, /--edge-w:\s*1\.1px/);
+  assert.match(css, /--edge-w:\s*0\.8px/);
   assert.match(css, /path\.edge \{ fill:none; stroke-width:var\(--edge-w\)/);
   assert.match(css, /path\.edge\.hot \{[^}]*stroke-width:var\(--edge-w-hot\)/);
   assert.match(css, /path\.trail \{[^}]*stroke-width:calc\(var\(--trail-w\)/);
   assert.match(css, /path\.ripple \{[^}]*stroke-width:calc\(var\(--ripple-w\)/);
-  // Thin means at most 1.5 px for a plain link and 2 px for the highlighted one.
-  const w = (name) => Number(css.match(new RegExp(`${name}:\s*([0-9.]+)px`))[1]);
-  assert.ok(w("--edge-w") <= 1.5 && w("--edge-w-hot") <= 2 && w("--ripple-w") <= 2.5 && w("--trail-w") <= 2.5);
+  // Thin means a hairline: at most 1 px for a plain link, 1.2 px for a highlighted or playing one.
+  const w = (name) => Number(css.match(new RegExp(`${name}: *([0-9.]+)px`))[1]);
+  assert.ok(w("--edge-w") <= 1 && w("--edge-w-hot") <= 1.2 && w("--edge-w-play") <= 1.2 && w("--ripple-w") <= 1.5 && w("--trail-w") <= 1.5);
+});
+
+test("the arrowhead is small: at most 7 px, and the playback dot at most 5 px in radius", () => {
+  const shell = readFileSync(join(root, "templates/shell-body.html"), "utf8");
+  const marker = shell.match(/<marker id="arr"[^>]*markerWidth="(\d+)" markerHeight="(\d+)"/);
+  assert.ok(marker, "the arrow marker exists");
+  assert.ok(Number(marker[1]) <= 7 && Number(marker[2]) <= 7, `arrowhead is ${marker[1]} x ${marker[2]}`);
+  const playback = readFileSync(join(root, "src/playbackui.ts"), "utf8");
+  assert.ok(Number(playback.match(/class: "token", r: "(\d+(?:\.\d+)?)"/)[1]) <= 5);
 });
 
 test("forced-colours mode drops the dot pattern", () => {