@caddis/cli 0.4.48 → 0.4.50

package/bundles/codex/.codex/skills/frontend/flow-studio/src/bars.test.ts

@@ -0,0 +1,90 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { barsHtml, markKey } from "./bars.ts";
+import { validateModel, type Model, type NodeBar } from "./model.ts";
+
+const bars: NodeBar[] = [
+  { key: "2026-09-01", value: 10 },
+  { key: "2026-09-02", value: null },
+  { key: "2026-09-03", value: 4, kind: "low" },
+  { key: "2026-09-04", value: 20 },
+];
+
+test("no bars, no chart", () => {
+  assert.equal(barsHtml(undefined), "");
+  assert.equal(barsHtml([]), "");
+});
+
+test("one rect per bar, each carrying its key; a missing day is a short red tick, never a zero bar", () => {
+  const html = barsHtml(bars);
+  assert.equal((html.match(/<rect /g) ?? []).length, 4);
+  for (const b of bars) assert.match(html, new RegExp(`data-key="${b.key}"`));
+  assert.match(html, /<rect class="miss" data-key="2026-09-02"/);
+  assert.match(html, /<rect class="low" data-key="2026-09-03"/);
+  // The last bar with data is the accent one.
+  assert.match(html, /<rect class="last" data-key="2026-09-04"/);
+});
+
+test("bar height follows the value against the largest, and the largest fills the chart", () => {
+  const html = barsHtml([{ key: "a", value: 5 }, { key: "b", value: 10 }], 20);
+  const heights = [...html.matchAll(/height="([0-9.]+)"/g)].map(m => Number(m[1])).filter(h => h < 20);
+  assert.equal(heights.length, 2);
+  assert.ok(Math.abs(heights[1]! - 15) < 0.01, "the largest bar is height - 5");
+  assert.ok(Math.abs(heights[0]! - 7.5) < 0.01, "half the value is half the height");
+});
+
+test("keys and labels are escaped, so a hostile key cannot become markup", () => {
+  const html = barsHtml([{ key: '"><script>x</script>', value: 1, label: "<b>" }]);
+  assert.doesNotMatch(html, /<script>/);
+  assert.doesNotMatch(html, /<b>/);
+  assert.match(html, /&lt;b&gt;/);
+});
+
+test("the chart is described for a screen reader", () => {
+  assert.match(barsHtml(bars), /role="img" aria-label="[^"]+"/);
+});
+
+interface FakeRect { key: string; attrs: Map<string, string>; getAttribute(n: string): string | null; setAttribute(n: string, v: string): void; removeAttribute(n: string): void }
+const fakeRect = (key: string): FakeRect => {
+  const attrs = new Map<string, string>([["data-key", key]]);
+  return { key, attrs, getAttribute: n => attrs.get(n) ?? null, setAttribute: (n, v) => void attrs.set(n, v), removeAttribute: n => void attrs.delete(n) };
+};
+
+test("markKey marks every bar with that key, on every chart, and clears the others", () => {
+  const rects = [fakeRect("a"), fakeRect("b"), fakeRect("a")];
+  const root = { querySelectorAll: () => rects } as unknown as ParentNode;
+  markKey(root, "a");
+  assert.deepEqual(rects.map(r => r.attrs.get("data-hl")), ["true", undefined, "true"]);
+  markKey(root, "b");
+  assert.deepEqual(rects.map(r => r.attrs.get("data-hl")), [undefined, "true", undefined]);
+  markKey(root, null);
+  assert.deepEqual(rects.map(r => r.attrs.get("data-hl")), [undefined, undefined, undefined]);
+});
+
+const base = (): Model => ({
+  version: 1,
+  meta: { title: "T", help: "h", asOf: "2026-01-01", source: "s" },
+  layout: "columns-lanes",
+  columns: [{ id: "c0", title: "A", width: 150 }],
+  lanes: [{ id: "l1", title: "Lane 1" }],
+  states: { ok: { word: "OK", tone: "ok", border: "solid", edge: "flow", motion: "flow", bucket: "good" } },
+  nodes: [{ id: "a", kind: "card", lane: "l1", col: 0, row: 0, state: "ok", title: "A", allowIsolated: true, bars }],
+  links: [],
+});
+const codes = (m: unknown) => validateModel(m).filter(i => i.level === "error").map(i => i.code);
+
+test("a node may carry bars", () => assert.deepEqual(codes(base()), []));
+test("bars must be a list", () => {
+  const m = base(); (m.nodes[0] as unknown as { bars: unknown }).bars = "nope";
+  assert.ok(codes(m).includes("bars-invalid"));
+});
+test("each bar needs a string key and a finite, non-negative value or null", () => {
+  for (const bad of [{ key: 1, value: 1 }, { key: "k", value: -1 }, { key: "k", value: Number.NaN }, { key: "k", value: "3" }, null]) {
+    const m = base(); (m.nodes[0] as unknown as { bars: unknown[] }).bars = [bad];
+    assert.ok(codes(m).includes("bars-invalid"), JSON.stringify(bad));
+  }
+});
+test("at most 120 bars", () => {
+  const m = base(); m.nodes[0]!.bars = Array.from({ length: 121 }, (_, i) => ({ key: String(i), value: 1 }));
+  assert.ok(codes(m).includes("bars-invalid"));
+});

package/bundles/codex/.codex/skills/frontend/flow-studio/src/bars.ts

@@ -0,0 +1,53 @@
+// Small bar charts on a node, one bar per key (a day, a step). Hovering a bar marks the same key on
+// every chart on the canvas, so a reader can ask "was this day bad everywhere?". The key is opaque:
+// the model decides what it means. Pure string rendering plus one tiny DOM helper, no layout maths.
+
+import type { Ctx } from "./ctx.ts";
+import { on } from "./ctx.ts";
+import { esc, type NodeBar } from "./model.ts";
+
+const BAR_UNIT = 4; // viewBox units per bar; the chart is stretched to the node's width by CSS
+
+/** The chart as an SVG string, or "" when the node has no bars. A null value is a missing key: a red tick, never a zero bar. */
+export function barsHtml(bars: NodeBar[] | undefined, height = 22): string {
+  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>`;
+}
+
+/** Mark every bar with this key, on every chart under root, and clear the rest. null clears all. */
+export function markKey(root: ParentNode, key: string | null): void {
+  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");
+  }
+}
+
+/** Hovering a bar marks its key everywhere and tells the host page; leaving the canvas clears it. */
+export function installBars(ctx: Ctx): void {
+  const set = (key: string | null): void => {
+    if (ctx.hoverKey === key) return;
+    ctx.hoverKey = key;
+    markKey(ctx.els.world, key);
+    ctx.onHoverKey?.(key);
+  };
+  on(ctx, ctx.els.world, "mouseover", (e: MouseEvent) => {
+    const bar = (e.target as Element | null)?.closest?.("rect[data-key]");
+    set(bar ? bar.getAttribute("data-key") : null);
+  });
+  on(ctx, ctx.els.world, "mouseleave", () => set(null));
+}

package/bundles/codex/.codex/skills/frontend/flow-studio/src/ctx.ts

@@ -92,6 +92,9 @@ export interface Ctx {
   collapsed: Set<string>;
   selected: string | null;
   hl: string | null;
+  /** The bar key under the pointer (see bars.ts), or null. */
+  hoverKey: string | null;
+  onHoverKey?: (key: string | null) => void;
   query: string;
   hops: number;
   filter: Filter;

package/bundles/codex/.codex/skills/frontend/flow-studio/src/engine.ts

@@ -17,6 +17,7 @@ import { install as installNotes } from "./notes.ts";
 import { install as installPlayback, type PlaybackController } from "./playbackui.ts";
 import { diffModels } from "./diff.ts";
 import { notifySelection } from "./selection.ts";
+import { installBars, markKey } from "./bars.ts";
 import type { Issue } from "./model.ts";
 
 export interface FlowStudio {
@@ -26,6 +27,8 @@ export interface FlowStudio {
   setView(v: View, animate?: boolean): void;
   fit(animate?: boolean): void;
   select(id: string | null): void;
+  /** Mark one bar key on every chart, as if the pointer were over it. Does not call onHoverKey. */
+  highlightKey(key: string | null): void;
   selected(): string | null;
   mode(): string;
   setMode(id: string): void;
@@ -65,7 +68,7 @@ function findEls(root: ParentNode): Els {
 }
 
 interface SavedState { view: View; mode: string; selected: string | null; inspectorOpen: boolean; query: string; hops: number; filter: Ctx["filter"]; collapsed: Set<string>; knownGroups: Set<string>; playback: ReturnType<PlaybackController["playback"]> }
-export function mount(root: ParentNode, model: Model, opts: { notes?: NoteDef[]; onSelect?: (id: string | null) => void; restore?: SavedState } = {}): FlowStudio {
+export function mount(root: ParentNode, model: Model, opts: { notes?: NoteDef[]; onSelect?: (id: string | null) => void; onHoverKey?: (key: string | null) => void; restore?: SavedState } = {}): FlowStudio {
   if (!model || !Array.isArray(model.columns) || !Array.isArray(model.lanes) || !Array.isArray(model.nodes) || !Array.isArray(model.links) || !model.states) {
     throw new Error("flow-studio: the model needs columns, lanes, states, nodes and links");
   }
@@ -78,7 +81,7 @@ export function mount(root: ParentNode, model: Model, opts: { notes?: NoteDef[];
 
   const rm = matchMedia("(prefers-reduced-motion: reduce)");
   const ctx: Ctx = {
-    model, root, els, onSelect: opts.onSelect,
+    model, 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,
@@ -103,6 +106,7 @@ export function mount(root: ParentNode, model: Model, opts: { notes?: NoteDef[];
 
   installInteract(ctx);
   installRender(ctx);
+  installBars(ctx);
   installControls(ctx);
   installInspector(ctx);
   installChrome(ctx);
@@ -145,6 +149,7 @@ export function mount(root: ParentNode, model: Model, opts: { notes?: NoteDef[];
     setView: (v, animate) => ctx.fn.setView(v, animate),
     fit: animate => { ctx.userMoved = false; 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),
@@ -167,7 +172,7 @@ export function mount(root: ParentNode, model: Model, opts: { notes?: NoteDef[];
       const changes = diffModels(ctx.model, prepared);
       const saved: SavedState = { 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);
       // Refresh this api in place: callers keep their reference and window.FlowStudio stays this
       // instance, so an update can never overwrite a different mounted engine.

package/bundles/codex/.codex/skills/frontend/flow-studio/src/layout.test.ts

@@ -142,3 +142,20 @@ test("free layout preserves finite negative node coordinates", () => {
   assert.equal(g.nodes.a!.y, -40);
   assert.ok([g.bounds.x, g.bounds.y, g.bounds.w, g.bounds.h, g.world.w, g.world.h].every(Number.isFinite));
 });
+
+test("a node with bars is taller by default, so the chart does not sit on its text; an explicit height wins", () => {
+  const model = m();
+  model.nodes[0]!.bars = [{ key: "a", value: 1 }];
+  const g = computeGeometry(model);
+  assert.equal(g.nodes.a!.h, 54 + 26);
+  assert.equal(g.nodes.b!.h, 54);
+  const free = m();
+  free.layout = "free";
+  free.nodes = [
+    { id: "x", kind: "card", lane: "l1", x: 0, y: 0, state: "ok", title: "X", bars: [{ key: "a", value: 1 }] },
+    { id: "y", kind: "card", lane: "l1", x: 0, y: 200, h: 100, state: "ok", title: "Y", bars: [{ key: "a", value: 1 }] },
+  ];
+  const gf = computeGeometry(free);
+  assert.equal(gf.nodes.x!.h, 54 + 26);
+  assert.equal(gf.nodes.y!.h, 100);
+});

package/bundles/codex/.codex/skills/frontend/flow-studio/src/layout.ts

@@ -17,6 +17,7 @@ export interface LayoutOptions { pitch: number; top: number; gap: number; padX:
 
 export const DEFAULTS: LayoutOptions = { pitch: 62, top: 64, gap: 34, padX: 24, visible: () => true };
 
+const BARS_EXTRA = 26; // room for the bar chart under a node's text
 const LANE_PAD_TOP = 38; // room for the lane title
 const LANE_PAD_BOTTOM = 14;
 
@@ -29,7 +30,7 @@ export function computeGeometry(m: Model, opt: Partial<LayoutOptions> = {}): Geo
 
   const nodes: Record<string, Placed> = {};
   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;

package/bundles/codex/.codex/skills/frontend/flow-studio/src/model.ts

@@ -43,6 +43,7 @@ export interface NodeDef {
   collapsed?: boolean;
   sla?: number;
   metrics?: NodeMetric;
+  bars?: NodeBar[];
 }
 export interface NodeMetric {
   value: number;
@@ -52,6 +53,14 @@ export interface NodeMetric {
   label?: string;
   series?: number[];
 }
+/** One bar of a node's chart. `key` is opaque (a date, a step) and links the same key across charts;
+ *  a null `value` means no data for that key and is drawn as a short red tick, never as zero. */
+export interface NodeBar {
+  key: string;
+  value: number | null;
+  kind?: "low";
+  label?: string;
+}
 export interface LinkDef {
   id: string;
   from: string;
@@ -153,6 +162,8 @@ export function validateModel(input: unknown): Issue[] {
     const metric = n.metrics;
     const invalidSeries = metric?.series !== undefined && (!Array.isArray(metric.series) || metric.series.length > 60 || metric.series.some(v => !Number.isFinite(v)));
     if (metric !== undefined && (!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 !== undefined && (!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 !== undefined && (!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) {

package/bundles/codex/.codex/skills/frontend/flow-studio/src/playbackui.ts

@@ -23,7 +23,7 @@ export function install(ctx: Ctx): PlaybackController {
   // Only the elements marked in the last draw are cleared again, so a frame does not walk the whole graph.
   let markedEdges: SVGPathElement[] = [];
   let markedNodes: HTMLElement[] = [];
-  const token = sv("circle", { id: "token", class: "token", r: "6" }) as SVGCircleElement;
+  const token = sv("circle", { id: "token", class: "token", r: "4" }) as SVGCircleElement;
   e.layer.appendChild(token);
   const pathOf = (link: string): SVGPathElement | undefined => ctx.edgeEls[ctx.links.findIndex(l => l.id === link)];
   const nodeOf = (id: string) => ctx.nodeEls.get(id);

package/bundles/codex/.codex/skills/frontend/flow-studio/src/render.ts

@@ -9,6 +9,7 @@ import { elbow, loopBack } from "./routing.ts";
 import { cssId } from "./stateCss.ts";
 import { baselineView, bucketOf, canonOf, effectiveLinks, isImproved, isNew, linkStateId, nodeStateId, nodeVisible } from "./rules.ts";
 import { metricBadge, sparkline } from "./metrics.ts";
+import { barsHtml, markKey } from "./bars.ts";
 
 function loopRoute(ctx: Ctx, fromId: string, toId: string, from: Placed, to: Placed, channel: number): string {
   const detourFor = (end: Placed, other: Placed) => {
@@ -45,7 +46,7 @@ function nodeHtml(ctx: Ctx, n: NodeDef): string {
   const lead = showWord ? `<b class="ev st-${cssId(sid)}">${esc(word)}</b> · ` : "";
   const fold = n.kind === "group" && n.contains?.length ? `<span class="fold">▸ ${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}`;
+    + `<div class="s${spark ? " has-spark" : ""}" title="${esc(sub)}">${lead}${esc(sub)}</div>${spark}${barsHtml(n.bars)}${bar}${improved}${upgrade}`;
 }
 
 function build(ctx: Ctx): void {
@@ -75,7 +76,7 @@ function build(ctx: Ctx): void {
   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");
@@ -190,6 +191,7 @@ function paint(ctx: Ctx, fromSwitch = false): void {
     if (r) { d.style.left = r.x + "px"; d.style.top = r.y + "px"; d.style.width = r.w + "px"; d.style.height = r.h + "px"; }
   }
 
+  markKey(ctx.els.world, ctx.hoverKey);
   ctx.fn.buildChrome();
   ctx.fn.trace(ctx.selected);
   ctx.fn.renderInspector();

package/bundles/codex/.codex/skills/frontend/flow-studio/src/styles.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/codex/.codex/skills/frontend/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/codex/.codex/skills/frontend/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; }