@caddis/cli 0.4.47 → 0.4.49

package/bundles/antigravity-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "caddis",
-  "version": "1.3.133",
+  "version": "1.3.135",
   "description": "caddis — agent-agnostic dev harness as an Antigravity (agy) plugin: TDD skills + commands, single-sourced with the Claude Code plugin."
 }

package/bundles/antigravity-plugin/skills/flow-studio/SKILL.md

@@ -70,13 +70,13 @@ 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
 
 ```
 version 1, meta {title, help, asOf, source, labels?}, layout "columns-lanes" | "free" | "auto"
-columns [{id, title, short?, width, phase?}]              stages, left to right
+columns [{id, title, short?, width, phase?, continues?}]              stages, left to right
 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?,

package/bundles/antigravity-plugin/skills/flow-studio/model.schema.json

@@ -26,7 +26,7 @@
         "type": "object", "required": ["id", "title", "width"], "additionalProperties": false,
         "properties": {
           "id": { "type": "string" }, "title": { "type": "string" }, "short": { "type": "string" },
-          "width": { "type": "number", "minimum": 60 }, "phase": { "type": "string" }
+          "width": { "type": "number", "minimum": 60 }, "phase": { "type": "string" }, "continues": { "type": "boolean" }
         }
       }
     },

package/bundles/antigravity-plugin/skills/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/antigravity-plugin/skills/flow-studio/references/model-schema.md

@@ -48,6 +48,7 @@ Columns provide vertical partitioning for time, stages, or architecture tiers.
 | `short` | `string` | Optional | - | Compact abbreviated title for tight viewports. |
 | `width` | `number` | Required | - | Column width in pixels (minimum 60). |
 | `phase` | `string` | Optional | - | Super-category phase grouping shown in top banner. |
+| `continues` | `boolean` | Optional | `false` | This column is a wrapped continuation of the column before it (for example one long list laid out in three side-by-side columns). It shows no header label and no strip cell of its own: its nodes count into the cell of the column it continues. Not allowed on the first column. |
 
 ---
 

package/bundles/antigravity-plugin/skills/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", () => {

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

@@ -4,7 +4,7 @@
 import { el, on, type Ctx } from "./ctx.ts";
 import { esc } from "./model.ts";
 import { DASH, toneVar, cssId } from "./stateCss.ts";
-import { bucketOf, columnTitle, effectiveLinks, nodeStateId, nodeVisible } from "./rules.ts";
+import { bucketOf, columnTitle, effectiveLinks, nodeStateId, nodeVisible, stripHeads } from "./rules.ts";
 import { matches } from "./interact.ts";
 
 const DEFAULT_LABELS: Record<string, string> = {
@@ -34,16 +34,19 @@ export function install(ctx: Ctx): void {
 
   function buildStrip(): void {
     const box = els.strip;
+    // One cell per head column: a column that `continues` another counts into the cell before it.
+    const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
     box.style.display = model.columns.length ? "" : "none";
-    box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+    box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
     if (!box.firstChild) {
-      box.innerHTML = model.columns.map(c => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+      box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
     }
-    box.querySelectorAll<HTMLElement>(".lcell").forEach((cell, i) => {
-      cell.style.setProperty("--i", String(i));
+    box.querySelectorAll<HTMLElement>(".lcell").forEach((cell, cellIndex) => {
+      const i = cells[cellIndex]?.i ?? cellIndex;
+      cell.style.setProperty("--i", String(cellIndex));
       let tot = 0, good = 0, neutral = 0, gap = 0;
       for (const n of model.nodes) {
-        if (n.col !== i || n.kind === "chip") continue;
+        if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
         if (!visible(n.id)) continue;
         const w = Math.max(1, n.weight ?? 1);
         tot += w;

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

@@ -71,7 +71,7 @@ export function install(ctx: Ctx): void {
     const cols = els.cols;
     cols.style.display = model.columns.length ? "" : "none";
     if (!cols.firstChild) {
-      model.columns.forEach((c, i) => { const h = el("div", "hd"); h.textContent = (c.short ?? c.title).toUpperCase(); h.title = c.title; h.dataset.i = String(i); cols.appendChild(h); });
+      model.columns.forEach((c, i) => { const h = el("div", "hd"); h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase(); h.title = c.title; h.dataset.i = String(i); cols.appendChild(h); });
       let i = 0;
       while (i < model.columns.length) {
         const name = model.columns[i]?.phase;

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

@@ -165,3 +165,11 @@ test("group containment validates ids, ownership, self-reference, and skips grou
   assert.ok(found.includes("contains-undefined"));
   assert.ok(found.includes("contains-duplicate"));
 });
+test("a column may continue the one before it", () => {
+  const m = base(); m.columns.push({ id: "c2", title: "B", width: 150, continues: true });
+  assert.deepEqual(codes(m), []);
+});
+test("the first column cannot continue a column that does not exist", () => {
+  const m = base(); m.columns[0]!.continues = true;
+  assert.ok(codes(m).includes("column-continues-first"));
+});

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

@@ -16,7 +16,7 @@ export interface StateDef {
   motion: Motion;
   bucket: Bucket;
 }
-export interface ColumnDef { id: string; title: string; short?: string; width: number; phase?: string }
+export interface ColumnDef { id: string; title: string; short?: string; width: number; phase?: string; continues?: boolean }
 export interface LaneDef { id: string; title: string; badge?: string; badgeTone?: "ok" | "warn" | "muted"; note?: string; gap?: boolean }
 export interface NodeDef {
   id: string;
@@ -111,6 +111,7 @@ export function validateModel(input: unknown): Issue[] {
   if (!Array.isArray(m.lanes) || (m.layout !== "auto" && m.lanes.length === 0)) add("error", "lanes-missing", "lanes", "At least one lane is required.");
   if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
   const columns = Array.isArray(m.columns) ? m.columns : [];
+  if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
   const lanes = Array.isArray(m.lanes) ? m.lanes : [];
   const states = m.states && typeof m.states === "object" ? m.states : {};
   if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");

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

@@ -70,7 +70,7 @@ export function install(ctx: Ctx): void {
   const markdown = (): string => {
     const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
     for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-    out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+    out.push("", "## Columns", ...model.columns.filter(c => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
     out.push("", "## Lanes", ...model.lanes.map(l => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
     out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
     if (notes.length) out.push("", "## Notes", ...notes.map(n => `${n.id}. **${n.title}**: ${n.text}`));

package/bundles/antigravity-plugin/skills/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/antigravity-plugin/skills/flow-studio/src/rules.test.ts

@@ -1,7 +1,7 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import type { Model } from "./model.ts";
-import { baselineView, defaultView, nodeVisible, nodeStateId, linkVisible, linkStateId, isNew, isImproved, bucketOf, canonOf, effectiveLinks, initialCollapsed, columnTitle, toggleGroupState } from "./rules.ts";
+import { baselineView, defaultView, nodeVisible, nodeStateId, linkVisible, linkStateId, isNew, isImproved, bucketOf, canonOf, effectiveLinks, initialCollapsed, columnTitle, toggleGroupState, stripHeads } from "./rules.ts";
 
 const m = (): Model => ({
   version: 1,
@@ -133,3 +133,12 @@ test("toggleGroup selects a visible child on expansion and its group on collapse
   assert.equal(folded.collapsed.has("group"), true);
   assert.equal(toggleGroupState(mm, "full", starting, "missing"), null);
 });
+
+test("stripHeads: a continuing column joins the one before it", () => {
+  const mm = m();
+  mm.columns = [{ id: "a", title: "A", width: 100 }, { id: "p", title: "P", width: 100 }, { id: "p2", title: "P", width: 100, continues: true }, { id: "p3", title: "P", width: 100, continues: true }, { id: "z", title: "Z", width: 100 }];
+  assert.deepEqual(stripHeads(mm), [0, 1, 1, 1, 4]);
+});
+test("stripHeads: with no continuing column every column is its own head", () => {
+  assert.deepEqual(stripHeads(m()), [0, 1]);
+});

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

@@ -10,6 +10,12 @@ export const defaultView = (m: Model): string => (m.views?.find(v => v.default)
 /** 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));
+/** For each column, the index of the column whose header and strip cell it shares: itself, or (when it
+ *  `continues` another) the nearest earlier column that does not. */
+export const stripHeads = (m: Model): number[] => {
+  let head = 0;
+  return m.columns.map((c, i) => { if (!c.continues || i === 0) head = i; return head; });
+};
 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 {

package/bundles/antigravity-plugin/skills/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;
   }

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;
   }
@@ -229,7 +229,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>
@@ -286,6 +286,7 @@
     if (!Array.isArray(m.lanes) || m.layout !== "auto" && m.lanes.length === 0) add("error", "lanes-missing", "lanes", "At least one lane is required.");
     if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
     const columns = Array.isArray(m.columns) ? m.columns : [];
+    if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
     const lanes = Array.isArray(m.lanes) ? m.lanes : [];
     const states = m.states && typeof m.states === "object" ? m.states : {};
     if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");
@@ -591,6 +592,13 @@
   var baselineView = (m) => m.views?.[0]?.id ?? "all";
   var defaultView = (m) => (m.views?.find((v) => v.default) ?? m.views?.[0])?.id ?? "all";
   var initialCollapsed = (m) => new Set(m.nodes.filter((n) => n.kind === "group" && n.contains && n.collapsed !== false).map((n) => n.id));
+  var stripHeads = (m) => {
+    let head = 0;
+    return m.columns.map((c, i) => {
+      if (!c.continues || i === 0) head = i;
+      return head;
+    });
+  };
   var columnTitle = (m, n) => n.col === void 0 ? "" : m.columns[n.col]?.title ?? "";
   function groupFor(m, nodeId) {
     return m.nodes.find((n) => n.kind === "group" && n.contains?.includes(nodeId));
@@ -1415,7 +1423,7 @@
       if (!cols.firstChild) {
         model.columns.forEach((c, i2) => {
           const h = el("div", "hd");
-          h.textContent = (c.short ?? c.title).toUpperCase();
+          h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase();
           h.title = c.title;
           h.dataset.i = String(i2);
           cols.appendChild(h);
@@ -1801,16 +1809,18 @@
     }
     function buildStrip() {
       const box = els.strip;
+      const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
       box.style.display = model.columns.length ? "" : "none";
-      box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+      box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
       if (!box.firstChild) {
-        box.innerHTML = model.columns.map((c) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+        box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
       }
-      box.querySelectorAll(".lcell").forEach((cell, i) => {
-        cell.style.setProperty("--i", String(i));
+      box.querySelectorAll(".lcell").forEach((cell, cellIndex) => {
+        const i = cells[cellIndex]?.i ?? cellIndex;
+        cell.style.setProperty("--i", String(cellIndex));
         let tot = 0, good = 0, neutral = 0, gap = 0;
         for (const n of model.nodes) {
-          if (n.col !== i || n.kind === "chip") continue;
+          if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
           if (!visible(n.id)) continue;
           const w = Math.max(1, n.weight ?? 1);
           tot += w;
@@ -2029,7 +2039,7 @@
     const markdown = () => {
       const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
       for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-      out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+      out.push("", "## Columns", ...model.columns.filter((c) => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
       out.push("", "## Lanes", ...model.lanes.map((l) => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
       out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
       if (notes.length) out.push("", "## Notes", ...notes.map((n) => `${n.id}. **${n.title}**: ${n.text}`));
@@ -2173,7 +2183,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);

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;
   }

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

@@ -29,6 +29,7 @@ function validateModel(input) {
   if (!Array.isArray(m.lanes) || m.layout !== "auto" && m.lanes.length === 0) add("error", "lanes-missing", "lanes", "At least one lane is required.");
   if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
   const columns = Array.isArray(m.columns) ? m.columns : [];
+  if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
   const lanes = Array.isArray(m.lanes) ? m.lanes : [];
   const states = m.states && typeof m.states === "object" ? m.states : {};
   if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");
@@ -347,11 +348,19 @@ __export(rules_exports, {
   linkVisible: () => linkVisible,
   nodeStateId: () => nodeStateId,
   nodeVisible: () => nodeVisible,
+  stripHeads: () => stripHeads,
   toggleGroupState: () => toggleGroupState
 });
 var baselineView = (m) => m.views?.[0]?.id ?? "all";
 var defaultView = (m) => (m.views?.find((v) => v.default) ?? m.views?.[0])?.id ?? "all";
 var initialCollapsed = (m) => new Set(m.nodes.filter((n) => n.kind === "group" && n.contains && n.collapsed !== false).map((n) => n.id));
+var stripHeads = (m) => {
+  let head = 0;
+  return m.columns.map((c, i) => {
+    if (!c.continues || i === 0) head = i;
+    return head;
+  });
+};
 var columnTitle = (m, n) => n.col === void 0 ? "" : m.columns[n.col]?.title ?? "";
 function groupFor(m, nodeId) {
   return m.nodes.find((n) => n.kind === "group" && n.contains?.includes(nodeId));
@@ -1203,7 +1212,7 @@ function install3(ctx) {
     if (!cols.firstChild) {
       model.columns.forEach((c, i2) => {
         const h = el("div", "hd");
-        h.textContent = (c.short ?? c.title).toUpperCase();
+        h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase();
         h.title = c.title;
         h.dataset.i = String(i2);
         cols.appendChild(h);
@@ -1589,16 +1598,18 @@ function install5(ctx) {
   }
   function buildStrip() {
     const box = els.strip;
+    const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
     box.style.display = model.columns.length ? "" : "none";
-    box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+    box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
     if (!box.firstChild) {
-      box.innerHTML = model.columns.map((c) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+      box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
     }
-    box.querySelectorAll(".lcell").forEach((cell, i) => {
-      cell.style.setProperty("--i", String(i));
+    box.querySelectorAll(".lcell").forEach((cell, cellIndex) => {
+      const i = cells[cellIndex]?.i ?? cellIndex;
+      cell.style.setProperty("--i", String(cellIndex));
       let tot = 0, good = 0, neutral = 0, gap = 0;
       for (const n of model.nodes) {
-        if (n.col !== i || n.kind === "chip") continue;
+        if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
         if (!visible(n.id)) continue;
         const w = Math.max(1, n.weight ?? 1);
         tot += w;
@@ -1817,7 +1828,7 @@ function install6(ctx) {
   const markdown = () => {
     const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
     for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-    out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+    out.push("", "## Columns", ...model.columns.filter((c) => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
     out.push("", "## Lanes", ...model.lanes.map((l) => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
     out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
     if (notes.length) out.push("", "## Notes", ...notes.map((n) => `${n.id}. **${n.title}**: ${n.text}`));
@@ -1972,7 +1983,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);
@@ -2437,7 +2448,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,
@@ -2482,6 +2493,7 @@ export {
   rules_exports as rules,
   slaState,
   stateCss,
+  stripHeads,
   suggestedExit,
   toggleGroupState,
   trace_exports as trace,

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,13 +70,13 @@ 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
 
 ```
 version 1, meta {title, help, asOf, source, labels?}, layout "columns-lanes" | "free" | "auto"
-columns [{id, title, short?, width, phase?}]              stages, left to right
+columns [{id, title, short?, width, phase?, continues?}]              stages, left to right
 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?,

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

@@ -26,7 +26,7 @@
         "type": "object", "required": ["id", "title", "width"], "additionalProperties": false,
         "properties": {
           "id": { "type": "string" }, "title": { "type": "string" }, "short": { "type": "string" },
-          "width": { "type": "number", "minimum": 60 }, "phase": { "type": "string" }
+          "width": { "type": "number", "minimum": 60 }, "phase": { "type": "string" }, "continues": { "type": "boolean" }
         }
       }
     },

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

@@ -48,6 +48,7 @@ Columns provide vertical partitioning for time, stages, or architecture tiers.
 | `short` | `string` | Optional | - | Compact abbreviated title for tight viewports. |
 | `width` | `number` | Required | - | Column width in pixels (minimum 60). |
 | `phase` | `string` | Optional | - | Super-category phase grouping shown in top banner. |
+| `continues` | `boolean` | Optional | `false` | This column is a wrapped continuation of the column before it (for example one long list laid out in three side-by-side columns). It shows no header label and no strip cell of its own: its nodes count into the cell of the column it continues. Not allowed on the first column. |
 
 ---
 

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", () => {

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

@@ -4,7 +4,7 @@
 import { el, on, type Ctx } from "./ctx.ts";
 import { esc } from "./model.ts";
 import { DASH, toneVar, cssId } from "./stateCss.ts";
-import { bucketOf, columnTitle, effectiveLinks, nodeStateId, nodeVisible } from "./rules.ts";
+import { bucketOf, columnTitle, effectiveLinks, nodeStateId, nodeVisible, stripHeads } from "./rules.ts";
 import { matches } from "./interact.ts";
 
 const DEFAULT_LABELS: Record<string, string> = {
@@ -34,16 +34,19 @@ export function install(ctx: Ctx): void {
 
   function buildStrip(): void {
     const box = els.strip;
+    // One cell per head column: a column that `continues` another counts into the cell before it.
+    const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
     box.style.display = model.columns.length ? "" : "none";
-    box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+    box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
     if (!box.firstChild) {
-      box.innerHTML = model.columns.map(c => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+      box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
     }
-    box.querySelectorAll<HTMLElement>(".lcell").forEach((cell, i) => {
-      cell.style.setProperty("--i", String(i));
+    box.querySelectorAll<HTMLElement>(".lcell").forEach((cell, cellIndex) => {
+      const i = cells[cellIndex]?.i ?? cellIndex;
+      cell.style.setProperty("--i", String(cellIndex));
       let tot = 0, good = 0, neutral = 0, gap = 0;
       for (const n of model.nodes) {
-        if (n.col !== i || n.kind === "chip") continue;
+        if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
         if (!visible(n.id)) continue;
         const w = Math.max(1, n.weight ?? 1);
         tot += w;

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

@@ -71,7 +71,7 @@ export function install(ctx: Ctx): void {
     const cols = els.cols;
     cols.style.display = model.columns.length ? "" : "none";
     if (!cols.firstChild) {
-      model.columns.forEach((c, i) => { const h = el("div", "hd"); h.textContent = (c.short ?? c.title).toUpperCase(); h.title = c.title; h.dataset.i = String(i); cols.appendChild(h); });
+      model.columns.forEach((c, i) => { const h = el("div", "hd"); h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase(); h.title = c.title; h.dataset.i = String(i); cols.appendChild(h); });
       let i = 0;
       while (i < model.columns.length) {
         const name = model.columns[i]?.phase;

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

@@ -165,3 +165,11 @@ test("group containment validates ids, ownership, self-reference, and skips grou
   assert.ok(found.includes("contains-undefined"));
   assert.ok(found.includes("contains-duplicate"));
 });
+test("a column may continue the one before it", () => {
+  const m = base(); m.columns.push({ id: "c2", title: "B", width: 150, continues: true });
+  assert.deepEqual(codes(m), []);
+});
+test("the first column cannot continue a column that does not exist", () => {
+  const m = base(); m.columns[0]!.continues = true;
+  assert.ok(codes(m).includes("column-continues-first"));
+});

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

@@ -16,7 +16,7 @@ export interface StateDef {
   motion: Motion;
   bucket: Bucket;
 }
-export interface ColumnDef { id: string; title: string; short?: string; width: number; phase?: string }
+export interface ColumnDef { id: string; title: string; short?: string; width: number; phase?: string; continues?: boolean }
 export interface LaneDef { id: string; title: string; badge?: string; badgeTone?: "ok" | "warn" | "muted"; note?: string; gap?: boolean }
 export interface NodeDef {
   id: string;
@@ -111,6 +111,7 @@ export function validateModel(input: unknown): Issue[] {
   if (!Array.isArray(m.lanes) || (m.layout !== "auto" && m.lanes.length === 0)) add("error", "lanes-missing", "lanes", "At least one lane is required.");
   if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
   const columns = Array.isArray(m.columns) ? m.columns : [];
+  if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
   const lanes = Array.isArray(m.lanes) ? m.lanes : [];
   const states = m.states && typeof m.states === "object" ? m.states : {};
   if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");

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

@@ -70,7 +70,7 @@ export function install(ctx: Ctx): void {
   const markdown = (): string => {
     const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
     for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-    out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+    out.push("", "## Columns", ...model.columns.filter(c => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
     out.push("", "## Lanes", ...model.lanes.map(l => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
     out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
     if (notes.length) out.push("", "## Notes", ...notes.map(n => `${n.id}. **${n.title}**: ${n.text}`));

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/rules.test.ts

@@ -1,7 +1,7 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import type { Model } from "./model.ts";
-import { baselineView, defaultView, nodeVisible, nodeStateId, linkVisible, linkStateId, isNew, isImproved, bucketOf, canonOf, effectiveLinks, initialCollapsed, columnTitle, toggleGroupState } from "./rules.ts";
+import { baselineView, defaultView, nodeVisible, nodeStateId, linkVisible, linkStateId, isNew, isImproved, bucketOf, canonOf, effectiveLinks, initialCollapsed, columnTitle, toggleGroupState, stripHeads } from "./rules.ts";
 
 const m = (): Model => ({
   version: 1,
@@ -133,3 +133,12 @@ test("toggleGroup selects a visible child on expansion and its group on collapse
   assert.equal(folded.collapsed.has("group"), true);
   assert.equal(toggleGroupState(mm, "full", starting, "missing"), null);
 });
+
+test("stripHeads: a continuing column joins the one before it", () => {
+  const mm = m();
+  mm.columns = [{ id: "a", title: "A", width: 100 }, { id: "p", title: "P", width: 100 }, { id: "p2", title: "P", width: 100, continues: true }, { id: "p3", title: "P", width: 100, continues: true }, { id: "z", title: "Z", width: 100 }];
+  assert.deepEqual(stripHeads(mm), [0, 1, 1, 1, 4]);
+});
+test("stripHeads: with no continuing column every column is its own head", () => {
+  assert.deepEqual(stripHeads(m()), [0, 1]);
+});

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

@@ -10,6 +10,12 @@ export const defaultView = (m: Model): string => (m.views?.find(v => v.default)
 /** 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));
+/** For each column, the index of the column whose header and strip cell it shares: itself, or (when it
+ *  `continues` another) the nearest earlier column that does not. */
+export const stripHeads = (m: Model): number[] => {
+  let head = 0;
+  return m.columns.map((c, i) => { if (!c.continues || i === 0) head = i; return head; });
+};
 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 {

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;
   }

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;
   }
@@ -229,7 +229,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>
@@ -286,6 +286,7 @@
     if (!Array.isArray(m.lanes) || m.layout !== "auto" && m.lanes.length === 0) add("error", "lanes-missing", "lanes", "At least one lane is required.");
     if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
     const columns = Array.isArray(m.columns) ? m.columns : [];
+    if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
     const lanes = Array.isArray(m.lanes) ? m.lanes : [];
     const states = m.states && typeof m.states === "object" ? m.states : {};
     if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");
@@ -591,6 +592,13 @@
   var baselineView = (m) => m.views?.[0]?.id ?? "all";
   var defaultView = (m) => (m.views?.find((v) => v.default) ?? m.views?.[0])?.id ?? "all";
   var initialCollapsed = (m) => new Set(m.nodes.filter((n) => n.kind === "group" && n.contains && n.collapsed !== false).map((n) => n.id));
+  var stripHeads = (m) => {
+    let head = 0;
+    return m.columns.map((c, i) => {
+      if (!c.continues || i === 0) head = i;
+      return head;
+    });
+  };
   var columnTitle = (m, n) => n.col === void 0 ? "" : m.columns[n.col]?.title ?? "";
   function groupFor(m, nodeId) {
     return m.nodes.find((n) => n.kind === "group" && n.contains?.includes(nodeId));
@@ -1415,7 +1423,7 @@
       if (!cols.firstChild) {
         model.columns.forEach((c, i2) => {
           const h = el("div", "hd");
-          h.textContent = (c.short ?? c.title).toUpperCase();
+          h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase();
           h.title = c.title;
           h.dataset.i = String(i2);
           cols.appendChild(h);
@@ -1801,16 +1809,18 @@
     }
     function buildStrip() {
       const box = els.strip;
+      const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
       box.style.display = model.columns.length ? "" : "none";
-      box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+      box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
       if (!box.firstChild) {
-        box.innerHTML = model.columns.map((c) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+        box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
       }
-      box.querySelectorAll(".lcell").forEach((cell, i) => {
-        cell.style.setProperty("--i", String(i));
+      box.querySelectorAll(".lcell").forEach((cell, cellIndex) => {
+        const i = cells[cellIndex]?.i ?? cellIndex;
+        cell.style.setProperty("--i", String(cellIndex));
         let tot = 0, good = 0, neutral = 0, gap = 0;
         for (const n of model.nodes) {
-          if (n.col !== i || n.kind === "chip") continue;
+          if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
           if (!visible(n.id)) continue;
           const w = Math.max(1, n.weight ?? 1);
           tot += w;
@@ -2029,7 +2039,7 @@
     const markdown = () => {
       const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
       for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-      out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+      out.push("", "## Columns", ...model.columns.filter((c) => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
       out.push("", "## Lanes", ...model.lanes.map((l) => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
       out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
       if (notes.length) out.push("", "## Notes", ...notes.map((n) => `${n.id}. **${n.title}**: ${n.text}`));
@@ -2173,7 +2183,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);

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;
   }

package/bundles/codex/.codex/skills/frontend/flow-studio/templates/flow-studio.lib.mjs

@@ -29,6 +29,7 @@ function validateModel(input) {
   if (!Array.isArray(m.lanes) || m.layout !== "auto" && m.lanes.length === 0) add("error", "lanes-missing", "lanes", "At least one lane is required.");
   if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
   const columns = Array.isArray(m.columns) ? m.columns : [];
+  if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
   const lanes = Array.isArray(m.lanes) ? m.lanes : [];
   const states = m.states && typeof m.states === "object" ? m.states : {};
   if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");
@@ -347,11 +348,19 @@ __export(rules_exports, {
   linkVisible: () => linkVisible,
   nodeStateId: () => nodeStateId,
   nodeVisible: () => nodeVisible,
+  stripHeads: () => stripHeads,
   toggleGroupState: () => toggleGroupState
 });
 var baselineView = (m) => m.views?.[0]?.id ?? "all";
 var defaultView = (m) => (m.views?.find((v) => v.default) ?? m.views?.[0])?.id ?? "all";
 var initialCollapsed = (m) => new Set(m.nodes.filter((n) => n.kind === "group" && n.contains && n.collapsed !== false).map((n) => n.id));
+var stripHeads = (m) => {
+  let head = 0;
+  return m.columns.map((c, i) => {
+    if (!c.continues || i === 0) head = i;
+    return head;
+  });
+};
 var columnTitle = (m, n) => n.col === void 0 ? "" : m.columns[n.col]?.title ?? "";
 function groupFor(m, nodeId) {
   return m.nodes.find((n) => n.kind === "group" && n.contains?.includes(nodeId));
@@ -1203,7 +1212,7 @@ function install3(ctx) {
     if (!cols.firstChild) {
       model.columns.forEach((c, i2) => {
         const h = el("div", "hd");
-        h.textContent = (c.short ?? c.title).toUpperCase();
+        h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase();
         h.title = c.title;
         h.dataset.i = String(i2);
         cols.appendChild(h);
@@ -1589,16 +1598,18 @@ function install5(ctx) {
   }
   function buildStrip() {
     const box = els.strip;
+    const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
     box.style.display = model.columns.length ? "" : "none";
-    box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+    box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
     if (!box.firstChild) {
-      box.innerHTML = model.columns.map((c) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+      box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
     }
-    box.querySelectorAll(".lcell").forEach((cell, i) => {
-      cell.style.setProperty("--i", String(i));
+    box.querySelectorAll(".lcell").forEach((cell, cellIndex) => {
+      const i = cells[cellIndex]?.i ?? cellIndex;
+      cell.style.setProperty("--i", String(cellIndex));
       let tot = 0, good = 0, neutral = 0, gap = 0;
       for (const n of model.nodes) {
-        if (n.col !== i || n.kind === "chip") continue;
+        if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
         if (!visible(n.id)) continue;
         const w = Math.max(1, n.weight ?? 1);
         tot += w;
@@ -1817,7 +1828,7 @@ function install6(ctx) {
   const markdown = () => {
     const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
     for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-    out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+    out.push("", "## Columns", ...model.columns.filter((c) => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
     out.push("", "## Lanes", ...model.lanes.map((l) => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
     out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
     if (notes.length) out.push("", "## Notes", ...notes.map((n) => `${n.id}. **${n.title}**: ${n.text}`));
@@ -1972,7 +1983,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);
@@ -2437,7 +2448,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,
@@ -2482,6 +2493,7 @@ export {
   rules_exports as rules,
   slaState,
   stateCss,
+  stripHeads,
   suggestedExit,
   toggleGroupState,
   trace_exports as trace,

package/bundles/codex/.codex/skills/frontend/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/manifest.json

@@ -1,7 +1,7 @@
 {
-  "poolVersion": "1.3.133",
+  "poolVersion": "1.3.135",
   "bundles": {
-    "antigravity-plugin": "1.3.133",
+    "antigravity-plugin": "1.3.135",
     "antigravity-plugin-extras": "1.3.41",
     "codex": "unknown"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caddis/cli",
-  "version": "0.4.47",
+  "version": "0.4.49",
   "description": "Install, update and diagnose the caddis dev harness across every coding agent you use (Claude Code, agy/Antigravity, and more).",
   "keywords": [
     "caddis",