@caddis/cli 0.4.44 → 0.4.46

package/bundles/antigravity-plugin/skills/flow-studio/src/rules.ts

@@ -0,0 +1,86 @@
+// View rules: which nodes and links show in which view, and in which state. Pure, no DOM.
+// A model may define views (for example "Today" and "Complete"). The first view is the baseline.
+// A model with no views has one implicit view named "all".
+
+import type { Model, NodeDef, LinkDef, Bucket } from "./model.ts";
+
+export const baselineView = (m: Model): string => m.views?.[0]?.id ?? "all";
+export const defaultView = (m: Model): string => (m.views?.find(v => v.default) ?? m.views?.[0])?.id ?? "all";
+
+/** A group that contains nodes starts folded unless it explicitly opts out. */
+export const initialCollapsed = (m: Model): Set<string> => new Set(m.nodes
+  .filter(n => n.kind === "group" && n.contains && n.collapsed !== false).map(n => n.id));
+export const columnTitle = (m: Model, n: NodeDef): string => n.col === undefined ? "" : m.columns[n.col]?.title ?? "";
+
+export function groupFor(m: Model, nodeId: string): NodeDef | undefined {
+  return m.nodes.find(n => n.kind === "group" && n.contains?.includes(nodeId));
+}
+
+export const nodeVisible = (m: Model, view: string, n: NodeDef, collapsed?: Set<string>): boolean => {
+  if (n.visibleIn && !n.visibleIn.includes(view)) return false;
+  if (!collapsed) return true;
+  if (n.kind === "group" && n.contains) return collapsed.has(n.id);
+  const owner = groupFor(m, n.id);
+  return !owner || !collapsed.has(owner.id);
+};
+export function toggleGroupState(m: Model, view: string, collapsed: Set<string>, id: string):
+  { collapsed: Set<string>; selected: string | null; expanding: boolean } | null {
+  const group = m.nodes.find(n => n.id === id && n.kind === "group" && n.contains?.length);
+  if (!group) return null;
+  const next = new Set(collapsed);
+  const expanding = next.has(id);
+  if (expanding) next.delete(id); else next.add(id);
+  const selected = expanding ? group.contains?.find(child => {
+    const n = m.nodes.find(candidate => candidate.id === child);
+    return !!n && nodeVisible(m, view, n, next);
+  }) ?? null : id;
+  return { collapsed: next, selected, expanding };
+}
+export const nodeStateId = (_m: Model, view: string, n: NodeDef): string => n.stateIn?.[view] ?? n.state;
+
+export function linkVisible(m: Model, view: string, l: LinkDef, nodes: Map<string, NodeDef>): boolean {
+  if (l.visibleIn && !l.visibleIn.includes(view)) return false;
+  const a = nodes.get(l.from);
+  const b = nodes.get(l.to);
+  return !!a && !!b && nodeVisible(m, view, a) && nodeVisible(m, view, b);
+}
+export const linkStateId = (_m: Model, view: string, l: LinkDef): string => l.stateIn?.[view] ?? l.state;
+
+/** An unknown state counts as a gap: a typo must never read as "good". */
+export const bucketOf = (m: Model, stateId: string): Bucket => m.states[stateId]?.bucket ?? "gap";
+
+/** Visible now, but not in the baseline view: the view adds this node. */
+export const isNew = (m: Model, view: string, n: NodeDef): boolean =>
+  view !== baselineView(m) && nodeVisible(m, view, n) && !nodeVisible(m, baselineView(m), n);
+
+/** A gap in the baseline view that this view has filled. */
+export const isImproved = (m: Model, view: string, n: NodeDef): boolean => {
+  const base = baselineView(m);
+  return view !== base && nodeVisible(m, base, n) && bucketOf(m, nodeStateId(m, base, n)) === "gap" && bucketOf(m, nodeStateId(m, view, n)) !== "gap";
+};
+
+/** A portal chip is an alias of the node it points at. */
+export const canonOf = (nodes: Map<string, NodeDef>, id: string): string => nodes.get(id)?.ref ?? id;
+
+/** Map hidden members to their visible group and merge parallel effective links. */
+export function effectiveLinks(m: Model, view: string, collapsed: Set<string>, nodes: Map<string, NodeDef>): LinkDef[] {
+  const byPair = new Map<string, LinkDef>();
+  const rank = { good: 0, neutral: 1, gap: 2 };
+  for (const link of m.links) {
+    if (link.visibleIn && !link.visibleIn.includes(view)) continue;
+    const a = nodes.get(link.from), b = nodes.get(link.to);
+    if (!a || !b || (a.visibleIn && !a.visibleIn.includes(view)) || (b.visibleIn && !b.visibleIn.includes(view))) continue;
+    const groupA = groupFor(m, a.id), groupB = groupFor(m, b.id);
+    const from = groupA && collapsed.has(groupA.id) ? groupA.id : a.id;
+    const to = groupB && collapsed.has(groupB.id) ? groupB.id : b.id;
+    if (from === to) continue;
+    const fromNode = nodes.get(from), toNode = nodes.get(to);
+    if (!fromNode || !toNode || !nodeVisible(m, view, fromNode, collapsed) || !nodeVisible(m, view, toNode, collapsed)) continue;
+    const state = linkStateId(m, view, link);
+    const key = JSON.stringify([from, to]);
+    const prev = byPair.get(key);
+    if (!prev) byPair.set(key, { ...link, from, to, state, stateIn: undefined });
+    else if (rank[bucketOf(m, state)] > rank[bucketOf(m, prev.state)]) prev.state = state;
+  }
+  return [...byPair.values()];
+}

package/bundles/antigravity-plugin/skills/flow-studio/src/selection.test.ts

@@ -0,0 +1,12 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { notifySelection } from "./selection.ts";
+
+test("selection callback reports changes and clears once", () => {
+  const seen: Array<string | null> = [];
+  const notify = (id: string | null) => seen.push(id);
+  notifySelection(null, "a", notify);
+  notifySelection("a", "a", notify);
+  notifySelection("a", null, notify);
+  assert.deepEqual(seen, ["a", null]);
+});

package/bundles/antigravity-plugin/skills/flow-studio/src/selection.ts

@@ -0,0 +1,4 @@
+/** Report only a real selection change. */
+export function notifySelection(previous: string | null, next: string | null, onSelect?: (id: string | null) => void): void {
+  if (previous !== next) onSelect?.(next);
+}

package/bundles/antigravity-plugin/skills/flow-studio/src/stateCss.test.ts

@@ -0,0 +1,73 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import type { Model } from "./model.ts";
+import { stateCss, toneVar } from "./stateCss.ts";
+
+const states: Model["states"] = {
+  live: { word: "LIVE", tone: "ok", border: "solid", edge: "flow", motion: "flow", bucket: "good" },
+  doc: { word: "DOC", tone: "muted", border: "dashed", edge: "dash", motion: "flow-slow", bucket: "neutral" },
+  code: { word: "CODE", tone: "muted", border: "dashed", edge: "dash-short", motion: "flow-slow", bucket: "neutral" },
+  gap: { word: "GAP", tone: "warn", border: "dotted", edge: "dot", motion: "breathe", bucket: "gap" },
+};
+
+test("toneVar maps every tone to a CSS variable", () => {
+  for (const t of ["ok", "warn", "crit", "info", "muted", "accent"] as const) assert.match(toneVar(t), /^var\(--[a-z]+\)$/);
+});
+test("each state gets a node rule, a word rule and an edge rule", () => {
+  const css = stateCss(states);
+  for (const id of Object.keys(states)) {
+    assert.ok(css.includes(`.node.st-${id}`), `node ${id}`);
+    assert.ok(css.includes(`.ev.st-${id}`), `word ${id}`);
+    assert.ok(css.includes(`path.edge.st-${id}`), `edge ${id}`);
+  }
+});
+test("gateway polygons receive each state's stroke and tint", () => {
+  const css = stateCss(states);
+  for (const id of Object.keys(states)) {
+    assert.match(css, new RegExp(`\\.node\\.st-${id}\\.gateway polygon \\{[^}]*stroke:var\\(--`));
+    assert.match(css, new RegExp(`\\.node\\.st-${id}\\.gateway polygon \\{[^}]*fill:color-mix\\(`));
+  }
+});
+test("a dotted state is a tinted card with a dotted border", () => {
+  const css = stateCss(states);
+  assert.match(css, /\.node\.st-gap\s*\{[^}]*dotted/);
+  assert.match(css, /\.node\.st-gap\s*\{[^}]*background/);
+});
+test("a solid state has a solid left border", () => assert.match(stateCss(states), /\.node\.st-live\s*\{[^}]*border-left:4px solid/));
+test("breathe adds the breathing animation only to the node", () => {
+  const css = stateCss(states);
+  assert.match(css, /\.node\.st-gap:not\(\.dim\)\s*\{[^}]*animation:breathe/);
+  assert.doesNotMatch(css, /path\.edge\.st-gap\s*\{[^}]*animation/);
+});
+test("flow speed follows the motion: fast for flow, slow for flow-slow", () => {
+  const css = stateCss(states);
+  assert.match(css, /path\.edge\.st-live\s*\{[^}]*flow 3s/);
+  assert.match(css, /path\.edge\.st-doc\s*\{[^}]*flowd 7s/);
+  assert.match(css, /path\.edge\.st-code\s*\{[^}]*flowc 7s/);
+});
+test("the dash pattern follows the edge style", () => {
+  const css = stateCss(states);
+  assert.match(css, /path\.edge\.st-live\s*\{[^}]*stroke-dasharray:5 9/);
+  assert.match(css, /path\.edge\.st-doc\s*\{[^}]*stroke-dasharray:7 6/);
+  assert.match(css, /path\.edge\.st-code\s*\{[^}]*stroke-dasharray:3 6/);
+  assert.match(css, /path\.edge\.st-gap\s*\{[^}]*stroke-dasharray:2 6/);
+});
+test("a flowing state turns solid under reduced motion", () => {
+  const css = stateCss(states);
+  assert.match(css, /@media \(prefers-reduced-motion: reduce\)[^@]*path\.edge\.st-live[^}]*stroke-dasharray:none/);
+});
+test("an unexpected edge or motion value never prints 'undefined' into the CSS", () => {
+  const css = stateCss({ odd: { word: "ODD", tone: "ok", border: "solid", edge: "wavy" as any, motion: "spin" as any, bucket: "good" } });
+  assert.doesNotMatch(css, /undefined/);
+});
+test("names from Object.prototype are not accepted as an edge style", () => {
+  for (const edge of ["constructor", "toString", "__proto__", "hasOwnProperty"]) {
+    const css = stateCss({ odd: { word: "ODD", tone: edge as any, border: "solid", edge: edge as any, motion: "flow", bucket: "good" } });
+    assert.doesNotMatch(css, /native code|function|undefined|\[object/, edge);
+  }
+});
+test("a state id with markup characters cannot break out of the selector", () => {
+  const css = stateCss({ 'x"}<script>': states.live });
+  assert.doesNotMatch(css, /<script>/);
+  assert.doesNotMatch(css, /x"\}/);
+});

package/bundles/antigravity-plugin/skills/flow-studio/src/stateCss.ts

@@ -0,0 +1,45 @@
+// CSS generated from the model's states. Each state becomes a class (st-<id>) for its card, its word
+// and its links, so the engine never assumes state names. The result goes BEFORE the static styles, so
+// the static rules for hover, select and failure win when specificity is equal.
+
+import type { Model, Tone, EdgeStyle } from "./model.ts";
+
+/** A state id used as a CSS class. The model validator also restricts ids to this alphabet. */
+export const cssId = (id: string): string => id.replace(/[^A-Za-z0-9_-]/g, "_");
+
+const TONES: Record<Tone, string> = { ok: "var(--ok)", warn: "var(--warn)", crit: "var(--crit)", info: "var(--up)", muted: "var(--muted)", accent: "var(--accent)" };
+export const toneVar = (t: Tone): string => (Object.hasOwn(TONES, t) ? TONES[t] : TONES.muted);
+
+export const DASH: Record<EdgeStyle, string> = { flow: "5 9", dash: "7 6", "dash-short": "3 6", dot: "2 6" };
+const KEYFRAMES: Record<EdgeStyle, string> = { flow: "flow", dash: "flowd", "dash-short": "flowc", dot: "" };
+
+export function stateCss(states: Model["states"]): string {
+  const out: string[] = [];
+  const reduced: string[] = [];
+  for (const [id, s] of Object.entries(states)) {
+    const c = cssId(id);
+    const T = toneVar(s.tone);
+    if (s.border === "dotted") {
+      out.push(`.node.st-${c} { border:1px dotted ${T}; background:color-mix(in srgb, ${T} 10%, var(--panel)); --breath:${T}; }`);
+      out.push(`.node.st-${c} .t { color:${T}; }`);
+    } else {
+      const glow = s.bucket === "good" ? ` box-shadow:0 0 14px -4px color-mix(in srgb, ${T} 55%, transparent), var(--shadow);` : "";
+      out.push(`.node.st-${c} { border-left:4px ${s.border} ${T};${glow} --breath:${T}; }`);
+    }
+    out.push(`.node.st-${c}.gateway polygon { stroke:${T}; fill:color-mix(in srgb, ${T} 10%, var(--panel)); }`);
+    out.push(`.ev.st-${c} { color:${T}; }`);
+    if (s.motion === "breathe") out.push(`.node.st-${c}:not(.dim) { animation:breathe 3.2s ease-in-out infinite; }`);
+
+    const edge: EdgeStyle = Object.hasOwn(DASH, s.edge) ? s.edge : "dash"; // a closed table: an unexpected value never reaches the CSS text
+    const flows = edge !== "dot" && (s.motion === "flow" || s.motion === "flow-slow");
+    let rule = `stroke:${T}; stroke-dasharray:${DASH[edge]}; opacity:${s.motion === "flow" ? ".85" : ".9"};`;
+    if (edge === "dot") rule += " stroke-linecap:round;";
+    if (flows) rule += ` animation:${KEYFRAMES[edge]} ${s.motion === "flow" ? "3s" : "7s"} linear infinite;`;
+    if (flows && s.motion === "flow") rule += ` filter:drop-shadow(0 0 3px ${T});`;
+    out.push(`path.edge.st-${c} { ${rule} }`);
+    if (s.bucket === "gap") out.push(`path.edge.hot.st-${c} { stroke:${T}; filter:drop-shadow(0 0 5px ${T}); }`);
+    if (flows) reduced.push(`path.edge.st-${c} { stroke-dasharray:none; }`);
+  }
+  if (reduced.length) out.push(`@media (prefers-reduced-motion: reduce) { ${reduced.join(" ")} }`);
+  return out.join("\n");
+}

package/bundles/antigravity-plugin/skills/flow-studio/src/styles.css

@@ -0,0 +1,190 @@
+: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);
+    --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;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
+      --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
+      --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+      --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
+    --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
+    --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+    --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
+  }
+  * { box-sizing:border-box; }
+  body { margin:0; color:var(--fg); font:14px/1.45 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
+    background:radial-gradient(900px 380px at 8% -10%, var(--glow), transparent 60%), var(--bg); }
+  .mono { font-family:var(--mono); }
+  header.top { display:flex; align-items:center; gap:16px; padding:10px 20px; border-bottom:1px solid var(--edge); background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(10px); position:sticky; top:0; z-index:70; }
+  .brand { font-weight:700; display:flex; align-items:center; gap:8px; }
+  .brand i { width:10px; height:10px; border-radius:50%; background:var(--ok); animation:beat 2.6s infinite; }
+  .crumb { color:var(--muted); } .spacer { flex:1; }
+  button, select, input { font:inherit; color:var(--fg); background:var(--panel); border:1px solid var(--edge); border-radius:6px; padding:4px 11px; }
+  button { cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s; }
+  button:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
+  button:focus-visible, input:focus-visible, .node:focus-visible, summary:focus-visible, #viewport:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+  button[aria-pressed="true"].tb, #notesBtn[aria-pressed="true"], button.seg[aria-selected="true"] { background:var(--accent-solid); border-color:var(--accent-solid); color:#fff; }
+  main { width:100%; padding:12px 14px 20px; }
+  .titlerow { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
+  h1 { margin:0 0 2px; font-size:20px; padding-bottom:5px; border-bottom:3px solid var(--accent); display:inline-block; }
+  .readline { color:var(--muted); font-size:12px; }
+  p.help { margin:0 0 8px; color:var(--muted); max-width:130ch; }
+  .summary { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:10px; margin:0 0 8px; }
+  .layerstrip { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
+  .lcell { background:var(--panel); padding:7px 9px; min-width:0; }
+  .lcell .ln { font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .lcell .lb { display:flex; height:5px; margin:5px 0 4px; background:var(--panel2); border:1px solid var(--rule); overflow:hidden; }
+  .lcell .lb i { display:block; height:100%; transition:width .9s cubic-bezier(.2,.8,.2,1); } .lb .good { background:var(--ok); } .lb .neutral { background:var(--muted); } .lb .gap { background:var(--warn); }
+  .lcell .lv { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
+  .tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
+  .tile { background:var(--panel); padding:5px 11px; text-align:left; border:0; border-radius:0; min-width:0; color:var(--fg); }
+  .tile .tn { font-size:20px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; display:block; }
+  .tile .tl { font-size:10.5px; color:var(--muted); display:block; margin-top:2px; }
+  .tile.ok .tn { color:var(--ok); } .tile.warn .tn { color:var(--warn); }
+  button.tile:hover { background:var(--panel2); } button.tile[aria-pressed="true"] { background:var(--panel2); box-shadow:inset 0 -2px 0 var(--accent); }
+  .toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 6px; }
+  .tabs { display:flex; gap:0; margin-right:6px; } .tabs button { border-radius:0; } .tabs button:first-child { border-radius:6px 0 0 6px; } .tabs button:last-child { border-radius:0 6px 6px 0; }
+  .tabs button[aria-selected="true"] { border-color:var(--accent); font-weight:600; } .tabs button:disabled { opacity:.5; cursor:default; }
+  .seggrp { display:inline-flex; border:1px solid var(--edge); border-radius:6px; overflow:hidden; } .seggrp button.seg { border:0; border-radius:0; }
+  .toolbar input[type="search"] { min-width:280px; }
+  .workspace { display:block; height:max(540px, calc(100vh - 232px)); border:1px solid var(--edge); background:var(--panel); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
+  .canvaswrap { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
+  #viewport { position:relative; flex:1; min-height:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none;
+    background:radial-gradient(760px 380px at 4% 0%, var(--glow), transparent 65%), radial-gradient(640px 320px at 98% 100%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px, var(--bg); }
+  #viewport.panning { cursor:grabbing; } #viewport.hand .node { cursor:grab; }
+  #world { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
+  #viewport.anim #world, #viewport.anim .hd, #viewport.anim .ph { transition:transform .28s cubic-bezier(.2,.8,.2,1), left .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1); }
+  #edges { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
+  .band { position:absolute; border:1px solid var(--edge); border-radius:10px; background:color-mix(in srgb, var(--panel) 55%, transparent); transition:top .35s, height .35s, opacity .35s; pointer-events:none; }
+  .band.gap { border:1px dashed var(--warn); background:repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--warn) 7%, transparent) 9px 10px); }
+  .band.off { opacity:0; }
+  .bandlabel { position:absolute; left:12px; top:7px; display:flex; gap:8px; align-items:baseline; transform-origin:0 0; transform:scale(var(--inv,1)); white-space:nowrap; pointer-events:auto; cursor:pointer; z-index:3; }
+  .bandlabel b { font-size:13px; } .bandlabel .bd { font-size:10.5px; font-weight:700; padding:0 6px; border:1px solid currentColor; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
+  .bandlabel .bd.t-ok { color:var(--ok); } .bandlabel .bd.t-warn { color:var(--warn); } .bandlabel .bn { font-size:11.5px; color:var(--muted); }
+  .node { position:absolute; background:var(--panel); border:1px solid var(--edge); border-radius:8px; padding:5px 10px 7px; box-shadow:var(--shadow); transition:opacity .35s, transform .35s, box-shadow .2s, border-color .2s; cursor:pointer; z-index:2; }
+  .node.gateway { border:0; background:transparent; box-shadow:none; padding:0; border-radius:0; display:flex; align-items:center; justify-content:center; }
+  .node.gateway svg.gw { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
+  .node.gateway polygon { stroke-width:2; vector-effect:non-scaling-stroke; }
+  .node.gateway .gw-title { position:relative; width:58%; text-align:center; font-size:11px; font-weight:600; line-height:1.2; color:var(--fg); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
+  .node.gateway:hover, .node.gateway.lit, .node.gateway.sel { filter:drop-shadow(0 0 7px var(--accent)); }
+  .node.wide { overflow:hidden; }
+  .node:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow), var(--shadow); }
+  .node .t { display:flex; gap:4px; align-items:flex-start; font-weight:600; line-height:1.25; font-size:13px; }
+  .node .t .name { overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+  .node .fold { flex:none; color:var(--accent); font-size:11px; }
+  .node .s { color:var(--muted); font-size:12px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .ev { font-size:10.5px; font-weight:700; letter-spacing:.03em; }
+  .node.wide .t { font-weight:500; } .node.wide .s { white-space:normal; }
+  .node.ref { padding:4px 9px; border-style:dashed; box-shadow:none; background:color-mix(in srgb, var(--panel) 70%, transparent); } .node.ref .t { font-size:12px; } .node.ref .t .name { display:block; min-width:0; white-space:nowrap; text-overflow:ellipsis; } .node.ref .s { font-size:11px; }
+  .node.sel { outline:2px solid var(--accent); outline-offset:2px; } .node.dim { opacity:.28; } .node.off { opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none; }
+  .node .bar { position:absolute; left:0; right:0; bottom:0; display:flex; height:4px; overflow:hidden; border-radius:0 0 7px 7px; background:var(--panel2); } .node .bar i { display:block; height:100%; } .bar .good { background:var(--ok); } .bar .neutral { background:var(--muted); } .bar .gap { background:var(--warn); }
+  .newdot { display:none; width:7px; height:7px; border-radius:50%; background:var(--accent); margin:5px 4px 0 0; flex:none; } body.alt .node.isnew .newdot { display:inline-block; }
+  body.alt .node.isnew.pulse { animation:newring 1.8s ease-out 1; }
+  .cor { position:absolute; top:5px; width:17px; height:17px; border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:700; }
+  .cor.up { right:6px; background:var(--info-bg); color:var(--accent); } .cor.meas { right:6px; background:var(--ok-bg); color:var(--ok); } .cor.up + .cor.meas { right:27px; }
+  .node.hascor .t { padding-right:24px; } .node.hascor2 .t { padding-right:44px; }
+  #viewport.lod1 .node .s, #viewport.lod1 .bandlabel .bn { display:none; } #viewport.lod2 .node .cor, #viewport.lod2 .node.ref .s { display:none; }
+  path.edge { fill:none; stroke-width:1.8; transition:opacity .35s; vector-effect:non-scaling-stroke; }
+  path.edge.hot { stroke:var(--accent); stroke-width:2.4; opacity:1; stroke-dasharray:6 8; animation:flowhot .9s linear infinite; filter:drop-shadow(0 0 5px var(--accent)); }
+  path.edge.dim { opacity:.07; filter:none; } path.edge.off { opacity:0; }
+  .elabel { position:absolute; font-size:11px; padding:0 6px; border-radius:9px; background:var(--panel); border:1px solid var(--edge); color:var(--muted); white-space:nowrap; transform:translate(-50%,-50%); opacity:0; transition:opacity .35s; z-index:4; } .elabel.show { opacity:1; } .elabel.off { display:none; }
+  #cols { position:absolute; left:0; right:0; top:0; height:44px; pointer-events:none; z-index:20; background:linear-gradient(var(--bg) 62%, transparent); }
+  #cols .ph { position:absolute; top:3px; height:16px; font-size:10px; letter-spacing:.14em; font-weight:700; color:var(--accent); text-transform:uppercase; display:flex; align-items:center; gap:6px; overflow:hidden; }
+  #cols .ph::before { content:""; height:1px; background:var(--accent); width:8px; opacity:.7; } #cols .ph::after { content:"›"; margin-left:auto; padding-right:3px; opacity:.8; flex:none; }
+  #cols .ph span { flex:none; } #cols .ph i { flex:1; height:1px; background:var(--accent); opacity:.4; }
+  #cols .hd { position:absolute; top:22px; font-size:10.5px; letter-spacing:.08em; font-weight:700; color:var(--muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #cols .hd b { color:var(--fg); }
+  #tools { position:absolute; left:10px; top:58px; z-index:30; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--edge); box-shadow:var(--shadow); }
+  #tools button { width:34px; height:32px; padding:0; border:0; border-radius:0; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:center; background:transparent; }
+  #tools button:last-child { border-bottom:0; } #tools button:hover { background:var(--panel2); color:var(--accent); box-shadow:none; } #tools button[aria-pressed="true"] { background:var(--panel2); box-shadow:inset 3px 0 0 var(--accent); color:var(--accent); }
+  #tools svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #tools .sep { height:1px; background:var(--edge); margin:0; }
+  #zoomLabel { position:absolute; left:10px; top:auto; z-index:30; font:11px var(--mono); color:var(--muted); background:var(--panel); border:1px solid var(--edge); padding:1px 6px; }
+  .keyline { display:flex; flex-wrap:wrap; align-items:center; gap:6px 15px; padding:6px 13px; border-top:1px solid var(--rule); background:var(--panel2); font-size:10.5px; color:var(--muted); } .keyline svg { vertical-align:middle; margin-right:6px; }
+  .insp { display:flex; flex-direction:column; background:var(--panel); min-height:0; min-width:0; font-family:var(--mono); position:absolute; top:0; right:0; bottom:0; width:340px; z-index:40; border-left:1px solid var(--edge); box-shadow:-14px 0 34px rgba(0,0,0,.16), -1px 0 0 var(--glow); transform:translateX(104%); visibility:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s; }
+  .insp.open { transform:none; visibility:visible; transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s; }
+  .insp-h { display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 15px; height:39px; border-bottom:1px solid var(--rule); background:var(--panel2); font-size:10.5px; color:var(--muted); letter-spacing:.02em; flex:none; }
+  .insp-h button { padding:0 8px; height:24px; font-size:11px; }
+  .counts { display:flex; border-bottom:1px solid var(--rule); flex:none; }
+  .counts .cbtn { flex:1; padding:9px 6px 8px; border:0; border-right:1px solid var(--rule); border-radius:0; text-align:center; background:transparent; }
+  .counts .cbtn:last-child { border-right:0; } .counts .cbtn:hover { background:var(--panel2); } .counts .cbtn[aria-pressed="true"] { background:var(--panel2); box-shadow:inset 0 -2px 0 var(--accent); } .counts .cbtn:disabled { opacity:.45; cursor:default; }
+  .counts .cn { font-size:20px; font-weight:600; display:block; line-height:1.1; font-variant-numeric:tabular-nums; } .cn--up { color:var(--up); } .cn--down { color:var(--down); } .counts .cl { font-size:9.5px; color:var(--muted); display:block; margin-top:3px; }
+  .insp-b { padding:14px 15px 18px; min-width:0; flex:1 1 auto; overflow:auto; min-height:0; }
+  .insp-sec { font-size:10.5px; color:var(--muted); margin:15px 0 0; padding-top:10px; border-top:1px solid var(--rule); } .insp-sec:first-child { margin-top:0; padding-top:0; border-top:0; } .insp-sec b { color:var(--fg); font-weight:600; }
+  .nname { font-size:15px; font-weight:600; line-height:1.25; word-break:break-word; margin:0 0 3px; } .nkind { font-size:10.5px; color:var(--muted); margin-bottom:9px; }
+  .pillrow { display:flex; gap:6px; margin-bottom:11px; flex-wrap:wrap; } .pill { font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border:1px solid currentColor; }
+  .pill.ok { color:var(--ok); } .pill.warn { color:var(--warn); } .pill.info { color:var(--accent); } .pill.muted { color:var(--muted); }
+  .note { margin:0 0 12px; font-size:12.5px; color:var(--muted); line-height:1.5; } .note code, .insp code { font-family:var(--mono); font-size:11.5px; background:var(--panel2); padding:1px 4px; }
+  .meta { width:100%; border-collapse:collapse; font-size:11.5px; } .meta th, .meta td { text-align:left; padding:4px 0; border-top:1px solid var(--rule); vertical-align:top; } .meta th { color:var(--muted); font-weight:400; width:42%; }
+  .drill { margin:0 -15px; } .drill .dr { display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; border:0; border-top:1px solid var(--rule); border-radius:0; background:transparent; padding:6px 15px; font:inherit; }
+  button.dr:hover { background:var(--panel2); } .drill .dbar { width:3px; align-self:stretch; flex:none; } .drill .dtx { min-width:0; flex:1; } .drill .dn { font-size:12.5px; display:block; word-break:break-word; line-height:1.3; } .drill .dk { font-size:10px; color:var(--muted); display:block; margin-top:1px; }
+  .drill-hint { font-size:10.5px; color:var(--muted); margin:10px 0 0; } .insp input[type="search"] { width:100%; margin:4px 0 6px; font-size:12px; }
+  .insp .acts { display:flex; gap:6px; margin:10px 0 0; flex-wrap:wrap; } .insp .acts button { font-size:11.5px; }
+  .ledger { margin:12px 0 0; border-top:1px solid var(--rule); padding-top:10px; } .ledger h4 { margin:0 0 6px; font-size:10.5px; color:var(--muted); font-weight:400; } .ledger p { margin:0 0 4px; font-size:12px; color:var(--muted); line-height:1.55; } .ledger p b { color:var(--fg); }
+  .marker { position:absolute; z-index:90; width:24px; height:24px; border-radius:50%; background:#8250df; color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(130,80,223,.3), var(--shadow); cursor:pointer; border:0; padding:0; } .marker:hover, .marker.on { box-shadow:0 0 0 5px rgba(130,80,223,.45); transform:scale(1.1); }
+  .anchored { outline:2px dashed #8250df; outline-offset:3px; }
+  #drawer { position:fixed; top:56px; left:0; bottom:0; width:380px; background:var(--panel); border-right:1px solid var(--edge); box-shadow:var(--shadow); z-index:80; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); overflow:auto; padding:14px 16px; } body.notes #drawer { transform:none; } main { transition:margin-left .3s cubic-bezier(.2,.8,.2,1); } body.notes main { margin-left:380px; } @media (max-width:1100px) { body.notes main { margin-left:0; } }
+  #drawer h2 { margin:0 0 8px; font-size:15px; } #drawer .ncard { border:1px solid var(--edge); padding:8px 10px; margin:8px 0; font-size:12.5px; } #drawer .ncard.on { border-color:#8250df; box-shadow:0 0 0 3px rgba(130,80,223,.25); }
+  #drawer .ncard b { display:flex; gap:8px; align-items:center; margin-bottom:2px; font-size:13px; } #drawer .ncard b span { background:#8250df; color:#fff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex:none; }
+  details.tableview, details.spec { margin:12px 0; background:var(--panel); border:1px solid var(--edge); padding:8px 14px; } details summary { cursor:pointer; color:var(--accent); font-weight:600; }
+  table.sources { width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; } table.sources th, table.sources td { text-align:left; padding:5px 10px; border-bottom:1px solid var(--rule); vertical-align:top; } table.sources th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
+  .spec h3 { margin:14px 0 4px; font-size:14px; } .spec h4 { margin:10px 0 2px; font-size:13px; } .spec ul { margin:4px 0 4px 18px; padding:0; } .spec li { margin:2px 0; } .spec .task { border:1px solid var(--edge); padding:6px 12px; margin:8px 0; }
+  .spec code { font-family:var(--mono); font-size:12px; background:var(--panel2); padding:0 4px; } .specbtns { display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
+  footer { color:var(--muted); font-size:12.5px; padding:0 14px 28px; }
+  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
+  :fullscreen.workspace { height:100vh; } .workspace.fs { position:fixed; inset:0; z-index:95; height:100vh; }
+  button.danger { background:var(--crit); border-color:var(--crit); color:#fff; font-weight:600; } button.danger:hover { box-shadow:0 0 0 3px var(--crit-bg); }
+  .layerstrip, .tiles { box-shadow:var(--shadow); } .lcell:hover { background:var(--panel2); } button.tile:hover { box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px var(--glow); position:relative; z-index:1; }
+  .bandlabel:hover b { color:var(--accent); }
+  .node:hover { transform:translateY(-2px); }
+  .node.lit { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow), 0 0 18px var(--glow), var(--shadow); }
+  .node.sel { animation:selpulse 2.4s ease-out infinite; }
+  .node.fail { border-color:var(--crit); background:var(--crit-bg); box-shadow:0 0 0 2px var(--crit-bg), 0 0 20px color-mix(in srgb, var(--crit) 45%, transparent); animation:failflash .9s ease-out 1; } .node.fail .s { color:var(--crit); font-weight:600; }
+  path.trail { fill:none; stroke:var(--accent); vector-effect:none; stroke-width:calc(3.4px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 6px var(--accent)); opacity:.95; }
+  path.ripple { fill:none; stroke:var(--crit); vector-effect:none; stroke-width:calc(3.6px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 7px var(--crit)); }
+  .intro .band { animation:fadein .6s both; } .intro .node { animation:rise .55s both; animation-delay:calc(var(--c, 0) * 60ms + 150ms); } .intro #edges { animation:fadein 1s .5s both; }
+  .intro .lcell, .intro .tile { animation:rise .5s both; animation-delay:calc(var(--i, 0) * 55ms); }
+  #viewport:focus-visible { outline-offset:-2px; }
+  @keyframes fadein { from { opacity:0; } to { opacity:1; } }
+  @keyframes flowd { to { stroke-dashoffset:-26; } } @keyframes flowc { to { stroke-dashoffset:-27; } } @keyframes flowhot { to { stroke-dashoffset:-28; } }
+  @keyframes selpulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px var(--glow); } 80%, 100% { box-shadow:0 0 0 14px transparent, 0 0 18px var(--glow); } }
+  @keyframes breathe { 0%, 100% { box-shadow:0 0 0 0 transparent, var(--shadow); } 50% { box-shadow:0 0 16px 1px color-mix(in srgb, var(--breath, var(--warn)) 40%, transparent), var(--shadow); } }
+  @keyframes failflash { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--crit) 60%, transparent); } 100% { box-shadow:0 0 0 16px transparent; } }
+  @keyframes newring { 0% { box-shadow:0 0 0 0 var(--accent); } 100% { box-shadow:0 0 0 14px transparent; } }
+  @keyframes flow { to { stroke-dashoffset:-28; } } @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes ring { to { box-shadow:0 0 0 14px transparent; } }
+  @keyframes beat { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);} 70%,100%{box-shadow:0 0 0 9px transparent;} }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } path.edge.hot { stroke-dasharray:none; } }
+  @media (max-width: 1100px) { .summary { grid-template-columns:1fr; } .workspace { height:auto; } .workspace .canvaswrap { height:75vh; } .insp { width:min(340px, 92%); } #drawer { width:100%; } .layerstrip { grid-template-columns:repeat(3,1fr) !important; } }
+  #banner:not([hidden]) { margin:0 14px 10px; padding:8px 12px; color:var(--crit); background:var(--crit-bg); border:1px solid var(--crit); font-size:12px; }
+  #playbar:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:7px 12px; border-top:1px solid var(--rule); background:var(--panel); font-size:12px; }
+  #playbar select, #playbar button { font-size:11px; }
+  #pbScrub { flex:1 1 140px; min-width:90px; }
+  #pbCaption { flex:1 1 100%; color:var(--fg); }
+  #pbCounter { font:11px var(--mono); color:var(--fg); }
+  #pbCounter.warn { color:var(--warn); } #pbCounter.breach { color:var(--crit); font-weight:700; }
+  #pbChoices { display:flex; gap:5px; flex-wrap:wrap; } #pbChoices:empty { display:none; }
+  #pbChoices .suggested { border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
+  circle.token { fill:var(--accent); stroke:var(--panel); stroke-width:2; filter:drop-shadow(0 0 5px var(--accent)); pointer-events:none; }
+  path.edge.playing { stroke:var(--accent); stroke-width:3; filter:drop-shadow(0 0 5px var(--accent)); opacity:1; }
+  path.edge.visited { stroke:var(--accent); opacity:.7; }
+  .node.playing { outline:2px solid var(--accent); outline-offset:2px; }
+  /* The pulse runs only while the player really plays; a paused step keeps the plain outline. */
+  body.playing .node.playing { animation:selpulse 1.8s ease-out infinite; }
+  .node.visited::after { content:"✓"; position:absolute; right:3px; bottom:1px; color:var(--accent); font-size:11px; }
+  .node.updated { animation:newring 1.2s ease-out 1; }
+  .node.added { animation:rise 1.2s ease-out 1; }
+  .node .t .name { min-width:0; flex:1 1 auto; }
+  .node .metric-badge { flex:none; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; padding-bottom:3px; text-align:right; font:11px var(--mono); color:var(--accent); }
+  .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.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; }
+  .metrics svg { max-width:100%; margin-top:8px; } .metric-range { display:flex; justify-content:space-between; width:300px; max-width:100%; font:10px var(--mono); color:var(--muted); }

package/bundles/antigravity-plugin/skills/flow-studio/src/trace.test.ts

@@ -0,0 +1,40 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { relatives, connected, withinHops } from "./trace.ts";
+
+const edges = [{ from: "a", to: "b" }, { from: "b", to: "c" }, { from: "x", to: "c" }, { from: "c", to: "d" }];
+const id = (s: string) => s;
+
+test("downstream follows links forward", () => assert.deepEqual([...relatives(edges, id, "b", "down")].sort(), ["b", "c", "d"]));
+test("upstream follows links backward", () => assert.deepEqual([...relatives(edges, id, "c", "up")].sort(), ["a", "b", "c", "x"]));
+test("connected is up plus down", () => assert.deepEqual([...connected(edges, id, "b")].sort(), ["a", "b", "c", "d"]));
+test("a chip is an alias of its real node", () => {
+  const canon = (s: string) => (s === "b2" ? "b" : s);
+  const e = [...edges, { from: "b2", to: "z" }];
+  assert.ok(relatives(e, canon, "b", "down").has("z"));
+});
+test("a cycle terminates", () => {
+  const cyc = [{ from: "a", to: "b" }, { from: "b", to: "a" }];
+  assert.deepEqual([...relatives(cyc, id, "a", "down")].sort(), ["a", "b"]);
+});
+test("a loop-back does not break relatives", () => {
+  const cycle = [{ from: "a", to: "b" }, { from: "b", to: "c" }, { from: "c", to: "a" }];
+  assert.deepEqual([...relatives(cycle, id, "a", "down")].sort(), ["a", "b", "c"]);
+  assert.deepEqual([...relatives(cycle, id, "c", "up")].sort(), ["a", "b", "c"]);
+});
+test("an unknown start returns only itself", () => assert.deepEqual([...relatives(edges, id, "nope", "down")], ["nope"]));
+
+test("withinHops includes starts and walks links in either direction", () => {
+  assert.deepEqual([...withinHops(edges, id, ["b"], 0)].sort(), ["b"]);
+  assert.deepEqual([...withinHops(edges, id, ["b"], 1)].sort(), ["a", "b", "c"]);
+  assert.deepEqual([...withinHops(edges, id, ["b"], 2)].sort(), ["a", "b", "c", "d", "x"]);
+});
+test("withinHops canonicalizes aliases and joins multiple starts", () => {
+  const canon = (s: string) => s === "b2" ? "b" : s;
+  assert.deepEqual([...withinHops(edges, canon, ["b2", "x"], 1)].sort(), ["a", "b", "c", "x"]);
+});
+test("withinHops terminates on cycles and treats a negative radius as zero", () => {
+  const cycle = [{ from: "a", to: "b" }, { from: "b", to: "a" }];
+  assert.deepEqual([...withinHops(cycle, id, ["a"], 9)].sort(), ["a", "b"]);
+  assert.deepEqual([...withinHops(cycle, id, ["a"], -1)], ["a"]);
+});

package/bundles/antigravity-plugin/skills/flow-studio/src/trace.ts

@@ -0,0 +1,40 @@
+// Path tracing over links. A portal chip is an alias of its real node: pass canonOf to map ids.
+
+export interface Edge { from: string; to: string }
+
+export function relatives(edges: Edge[], canonOf: (id: string) => string, start: string, dir: "up" | "down"): Set<string> {
+  const set = new Set<string>([canonOf(start)]);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const e of edges) {
+      const a = canonOf(e.from);
+      const b = canonOf(e.to);
+      if (dir === "up" && set.has(b) && !set.has(a)) { set.add(a); grew = true; }
+      if (dir === "down" && set.has(a) && !set.has(b)) { set.add(b); grew = true; }
+    }
+  }
+  return set;
+}
+
+export function connected(edges: Edge[], canonOf: (id: string) => string, start: string): Set<string> {
+  return new Set([...relatives(edges, canonOf, start, "up"), ...relatives(edges, canonOf, start, "down")]);
+}
+
+/** Undirected breadth-first radius around one or more nodes. */
+export function withinHops(edges: Edge[], canonOf: (id: string) => string, starts: string[], n: number): Set<string> {
+  const found = new Set(starts.map(canonOf));
+  const radius = Number.isFinite(n) ? Math.max(0, Math.floor(n)) : 0;
+  let frontier = [...found];
+  for (let hop = 0; hop < radius && frontier.length; hop++) {
+    const next: string[] = [];
+    const current = new Set(frontier);
+    for (const edge of edges) {
+      const a = canonOf(edge.from), b = canonOf(edge.to);
+      if (current.has(a) && !found.has(b)) { found.add(b); next.push(b); }
+      if (current.has(b) && !found.has(a)) { found.add(a); next.push(a); }
+    }
+    frontier = next;
+  }
+  return found;
+}

package/bundles/antigravity-plugin/skills/flow-studio/src/viewport.test.ts

@@ -0,0 +1,55 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { zoomAt, fitRect, fitWidth, clampPan, clampK, K_MIN, K_MAX } from "./viewport.ts";
+
+const close = (a: number, b: number, e = 1e-6) => assert.ok(Math.abs(a - b) < e, `${a} vs ${b}`);
+
+test("zoomAt keeps the point under the cursor fixed", () => {
+  const v = { x: 40, y: -20, k: 0.8 }, cx = 300, cy = 200;
+  const w = { x: (cx - v.x) / v.k, y: (cy - v.y) / v.k };
+  const z = zoomAt(v, 1.7, cx, cy);
+  close(z.x + w.x * z.k, cx);
+  close(z.y + w.y * z.k, cy);
+});
+test("zoom is clamped to 0.25 and 2.5", () => {
+  assert.equal(zoomAt({ x: 0, y: 0, k: 2.4 }, 10, 0, 0).k, K_MAX);
+  assert.equal(zoomAt({ x: 0, y: 0, k: 0.3 }, 0.01, 0, 0).k, K_MIN);
+  assert.ok(Number.isFinite(clampK(NaN)));
+});
+test("zoomAt returns finite numbers even from a bad scale", () => {
+  for (const k of [0, NaN, -1]) {
+    const z = zoomAt({ x: 5, y: 5, k }, 1.2, 100, 100);
+    assert.ok([z.x, z.y, z.k].every(Number.isFinite), `k=${k}`);
+  }
+});
+test("fitRect centres, never enlarges above 1 and never goes below 0.25", () => {
+  const v = fitRect({ x: 0, y: 0, w: 100, h: 50 }, { w: 1000, h: 800 }, 28, 52);
+  assert.equal(v.k, 1);
+  const w = fitRect({ x: 0, y: 0, w: 100000, h: 50 }, { w: 1000, h: 800 }, 28, 52);
+  assert.equal(w.k, K_MIN);
+});
+test("fitRect gives finite numbers for a zero-size container (review focus 5)", () => {
+  const v = fitRect({ x: 0, y: 0, w: 500, h: 400 }, { w: 0, h: 0 }, 28, 52);
+  assert.ok([v.x, v.y, v.k].every(Number.isFinite));
+});
+test("fitRect gives finite numbers for an empty rectangle (review focus 2)", () => {
+  const v = fitRect({ x: 0, y: 0, w: 0, h: 0 }, { w: 1000, h: 800 }, 28, 52);
+  assert.ok([v.x, v.y, v.k].every(Number.isFinite));
+});
+test("fitWidth fits the width and starts at the top", () => {
+  const v = fitWidth({ x: 10, y: 20, w: 2000, h: 5000 }, { w: 1056, h: 600 }, 28, 52);
+  close(v.k, 1000 / 2000);
+  close(v.x, 28 - 10 * v.k);
+  close(v.y, 52 - 20 * v.k);
+});
+test("fitWidth is finite for an empty rectangle and a zero width", () => {
+  const a = fitWidth({ x: 0, y: 0, w: 0, h: 0 }, { w: 800, h: 600 }, 28, 52);
+  const b = fitWidth({ x: 0, y: 0, w: 900, h: 400 }, { w: 0, h: 0 }, 28, 52);
+  assert.ok([a.x, a.y, a.k, b.x, b.y, b.k].every(Number.isFinite));
+});
+test("clampPan keeps 80 px of the graph visible", () => {
+  const b = { x: 0, y: 0, w: 1000, h: 800 }, size = { w: 1000, h: 700 };
+  const far = clampPan({ x: -99999, y: 99999, k: 1 }, b, size);
+  assert.equal(far.x, 80 - 1000);
+  assert.equal(far.y, 700 - 80);
+});

package/bundles/antigravity-plugin/skills/flow-studio/src/viewport.ts

@@ -0,0 +1,45 @@
+// View maths for the pan and zoom canvas. Pure functions, no DOM. The world is moved with
+// transform: translate(x, y) scale(k); a world point (wx, wy) is at screen (x + wx * k, y + wy * k).
+
+export interface View { x: number; y: number; k: number }
+export interface Rect { x: number; y: number; w: number; h: number }
+export interface Size { w: number; h: number }
+
+export const K_MIN = 0.25;
+export const K_MAX = 2.5;
+
+export const clampK = (k: number): number => (Number.isFinite(k) ? Math.min(K_MAX, Math.max(K_MIN, k)) : 1);
+
+/** Zoom by a factor and keep the world point under (cx, cy) fixed. */
+export function zoomAt(v: View, factor: number, cx: number, cy: number): View {
+  const base = Number.isFinite(v.k) && v.k > 0 ? v.k : 1;
+  const k = clampK(base * factor);
+  const r = k / base;
+  return { k, x: cx - (cx - v.x) * r, y: cy - (cy - v.y) * r };
+}
+
+/** Fit a world rectangle into the viewport. Never enlarges above 1. `top` reserves room for pinned headers. */
+export function fitRect(rect: Rect, size: Size, pad: number, top: number): View {
+  if (!(rect.w > 0 && rect.h > 0)) return { x: 0, y: 0, k: 1 };
+  const aw = Math.max(1, size.w - 2 * pad);
+  const ah = Math.max(1, size.h - 2 * pad - top);
+  const k = Math.min(1, clampK(Math.min(aw / rect.w, ah / rect.h)));
+  return { k, x: pad + (aw - rect.w * k) / 2 - rect.x * k, y: pad + top + (ah - rect.h * k) / 2 - rect.y * k };
+}
+
+/** Fit the width and start at the top: the readable first view. */
+export function fitWidth(rect: Rect, size: Size, pad: number, top: number): View {
+  if (!(rect.w > 0)) return { x: 0, y: 0, k: 1 };
+  const k = Math.min(1, clampK((Math.max(1, size.w) - 2 * pad) / rect.w));
+  return { k, x: pad - rect.x * k, y: top - rect.y * k };
+}
+
+/** Keep at least 80 px of the graph on screen so the reader cannot lose it. */
+export function clampPan(v: View, bounds: Rect, size: Size): View {
+  const keep = 80;
+  const minX = keep - (bounds.x + bounds.w) * v.k;
+  const maxX = size.w - keep - bounds.x * v.k;
+  const minY = keep - (bounds.y + bounds.h) * v.k;
+  const maxY = size.h - keep - bounds.y * v.k;
+  return { k: v.k, x: Math.min(maxX, Math.max(minX, v.x)), y: Math.min(maxY, Math.max(minY, v.y)) };
+}