@tangle-network/sandbox-ui 1.1.10 → 2.0.1

package/dist/{AgentGraph-DJEQrKTs.js → node-ui-C1WEjoGO.js}

@@ -1,302 +1,10 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
-import { StatusPill } from "@tangle-network/ui/primitives";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Component, Suspense, lazy, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { AlertTriangle, Bell, Bot, Box, Cable, Camera, Check, Circle, Clock, Clock3, Code, GitBranch, LoaderCircle, Repeat, ScanSearch, Sparkles, User, UserCheck, Webhook, Wrench, X, Zap } from "lucide-react";
+import { r as clampPreview } from "./AgentGraph-P7V_oEOv.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";
+import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";
 import { parse } from "yaml";
-// src/workflows/agent-hub-css.ts
-/**
-* The hub layout's styles, scoped under `.ag-root` and shipped with the component
-* so a host without the package's Tailwind build still draws it. Colours are the
-* package's theme tokens, so light, dark and named themes follow the host.
-* Four type sizes (11, 12, 13, 14 px); spacing on a 4 px grid.
-*/
-const AGENT_HUB_CSS = `
-.ag-root { --ag-surface: hsl(var(--card)); --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-border: hsl(var(--border));
-  --ag-line: color-mix(in oklab, var(--ag-fg) 14%, transparent); --ag-accent: hsl(var(--primary));
-  color: var(--ag-fg); font-size: 13px; line-height: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
-.ag-root * { box-sizing: border-box; }
-.ag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 24px; }
-.ag-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
-.ag-title-mark { width: 14px; height: 14px; border-radius: 4px; background: conic-gradient(from 45deg, var(--ag-accent), color-mix(in oklab, var(--ag-accent) 40%, transparent), var(--ag-accent)); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 2.5px, #000 3px); mask: radial-gradient(circle at 50% 50%, transparent 2.5px, #000 3px); }
-.ag-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
-.ag-chip-needs-you { color: var(--agent-graph-needs-you, hsl(38 92% 42%)); background: color-mix(in oklab, var(--agent-graph-needs-you, hsl(38 92% 50%)) 14%, transparent); }
-.ag-chip-failed { color: var(--agent-graph-failed, hsl(0 72% 50%)); background: color-mix(in oklab, var(--agent-graph-failed, hsl(0 84% 60%)) 13%, transparent); }
-.ag-stats { margin-left: auto; display: inline-flex; gap: 16px; color: var(--ag-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
-.ag-stats b { color: var(--ag-fg); font-weight: 500; }
-.ag-canvas-wrap { position: relative; border: 1px solid var(--ag-border); border-radius: 12px; background: var(--ag-surface); overflow: hidden; }
-.ag-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
-.ag-edges { position: absolute; inset: 0; overflow: visible; }
-.ag-edge { fill: none; stroke: var(--ag-line); stroke-width: 1.25; }
-.ag-edge-live { fill: none; stroke-width: 1.75; stroke-linecap: round; }
-.ag-flow { stroke-dasharray: 28 var(--ag-len); animation: ag-travel 1.15s cubic-bezier(.4,0,.2,1) infinite; }
-@keyframes ag-travel { from { stroke-dashoffset: 28px; } to { stroke-dashoffset: calc(-1 * var(--ag-len)); } }
-.ag-root g, .ag-node { transition: opacity 180ms cubic-bezier(.2,.8,.2,1); }
-.ag-dimmed { opacity: .22; }
-.ag-node { position: absolute; display: flex; flex-direction: column; align-items: center; width: 132px; margin-left: -66px; margin-top: calc(var(--ag-tile) / -2);
-  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; outline: none; }
-.ag-tile { position: relative; display: grid; place-items: center; width: var(--ag-tile); height: var(--ag-tile); border-radius: calc(var(--ag-tile) * .26);
-  background: var(--ag-surface); border: 1px solid var(--ag-border); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px -6px rgb(0 0 0 / .18);
-  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms; }
-.ag-node:hover .ag-tile { transform: translateY(-1px); box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 8px 18px -8px rgb(0 0 0 / .28); }
-.ag-node:focus-visible .ag-tile, .ag-selected .ag-tile { outline: 2px solid var(--ag-accent); outline-offset: 2px; }
-.ag-node[style*="--ag-tone"] .ag-tile { border-color: color-mix(in oklab, var(--ag-tone) 55%, var(--ag-border)); background: color-mix(in oklab, var(--ag-tone) 9%, var(--ag-surface)); }
-.ag-node-hub .ag-tile::before { content: ""; position: absolute; inset: -28px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--ag-accent) 22%, transparent), transparent); }
-.ag-node-you .ag-tile { background: var(--ag-fg); color: var(--ag-surface); border-color: transparent; }
-.ag-name { margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 16px; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ag-node-tool .ag-name { font-weight: 400; color: var(--ag-muted); }
-.ag-sub { font-size: 11px; line-height: 14px; color: var(--ag-muted); max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ag-badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 0 0 2px var(--ag-surface); }
-.ag-badge-running { background: var(--ag-surface); color: var(--ag-accent); box-shadow: 0 0 0 1px var(--ag-border); }
-.ag-badge-running svg, .ag-spin { animation: ag-spin .9s linear infinite; }
-@keyframes ag-spin { to { transform: rotate(360deg); } }
-.ag-legend { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 20px; color: var(--ag-muted); font-size: 12px; }
-.ag-legend li { display: inline-flex; align-items: center; gap: 6px; }
-.ag-legend-line { width: 14px; height: 2px; border-radius: 1px; }
-.ag-popover { position: absolute; z-index: 5; width: 280px; padding: 12px; border-radius: 12px; background: hsl(var(--popover, var(--card))); color: var(--ag-fg);
-  border: 1px solid var(--ag-border); box-shadow: 0 16px 40px -12px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .08); animation: ag-arrive 150ms cubic-bezier(.2,.8,.2,1); }
-@keyframes ag-arrive { from { opacity: 0; transform: translateY(4px); } }
-.ag-pop-head { display: flex; align-items: center; gap: 8px; }
-.ag-tile-mini { border-radius: 8px; box-shadow: none; flex-shrink: 0; }
-.ag-tile-micro { border-radius: 4px; box-shadow: none; flex-shrink: 0; border: 0; background: none; }
-.ag-pop-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
-.ag-pop-name { font-size: 14px; font-weight: 600; line-height: 18px; }
-.ag-pop-sub { font-size: 12px; color: var(--ag-muted); line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ag-pill { height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; line-height: 20px; font-weight: 500; color: var(--ag-muted); background: color-mix(in oklab, var(--ag-fg) 7%, transparent); }
-.ag-pill-failed { color: var(--agent-graph-failed, hsl(0 72% 50%)); background: color-mix(in oklab, var(--agent-graph-failed, hsl(0 84% 60%)) 13%, transparent); }
-.ag-pill-needs-you { color: var(--agent-graph-needs-you, hsl(38 92% 42%)); background: color-mix(in oklab, var(--agent-graph-needs-you, hsl(38 92% 50%)) 14%, transparent); }
-.ag-pill-running { color: var(--ag-accent); background: color-mix(in oklab, var(--ag-accent) 12%, transparent); }
-.ag-pill-succeeded { color: var(--agent-graph-answer, hsl(152 60% 38%)); background: color-mix(in oklab, var(--agent-graph-answer, hsl(152 60% 45%)) 13%, transparent); }
-.ag-close { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -4px; border: 0; border-radius: 6px; background: none; color: var(--ag-muted); cursor: pointer; }
-.ag-close:hover { background: color-mix(in oklab, var(--ag-fg) 7%, transparent); color: var(--ag-fg); }
-.ag-close:focus-visible { outline: 2px solid var(--ag-accent); }
-.ag-pop-summary { margin: 8px 0 0; font-size: 13px; line-height: 18px; }
-.ag-pop-calls { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--ag-border); display: grid; gap: 6px; }
-.ag-pop-calls li { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; min-width: 0; }
-.ag-pop-dir { color: var(--ag-muted); width: 12px; flex-shrink: 0; }
-.ag-pop-call { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ag-muted); }
-.ag-pop-call b { color: var(--ag-fg); font-weight: 500; }
-.ag-pop-time { flex-shrink: 0; color: var(--ag-muted); font-variant-numeric: tabular-nums; display: inline-flex; }
-.ag-pop-foot { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--ag-border); font-size: 12px; color: var(--ag-muted); display: flex; gap: 6px; }
-.ag-pop-foot b { color: var(--ag-fg); font-weight: 600; }
-@media (prefers-reduced-motion: reduce) {
-  .ag-root *, .ag-root *::before { animation: none !important; transition: none !important; }
-}
-`;
-const HUB_METRICS = {
-	cellX: 184,
-	cellY: 140,
-	tile: 48,
-	hubTile: 60,
-	label: 34
-};
-const HUB_METRICS_COMPACT = {
-	cellX: 112,
-	cellY: 112,
-	tile: 40,
-	hubTile: 48,
-	label: 30
-};
-const key = (col, row) => `${col},${row}`;
-/** Ring cells around the hub, nearest first: the diagonals, then the sides, then ring two by angle. */
-function ringCells(count) {
-	const cells = [
-		[-1, -1],
-		[1, -1],
-		[-1, 1],
-		[1, 1],
-		[-1, 0],
-		[1, 0],
-		[0, 1],
-		[0, -1]
-	];
-	for (let ring = 2; cells.length < count; ring++) {
-		const outer = [];
-		for (let c = -ring; c <= ring; c++) for (let r = -ring; r <= ring; r++) if (Math.max(Math.abs(c), Math.abs(r)) === ring) outer.push([c, r]);
-		outer.sort((a, b) => Math.atan2(a[1], a[0]) - Math.atan2(b[1], b[0]));
-		cells.push(...outer);
-	}
-	return cells.slice(0, count);
-}
-/** The orchestrator: the agent nobody spawned, else the first. */
-function hubAgentId(nodes, edges) {
-	const spawned = new Set(edges.filter((e) => e.kind === "spawn").map((e) => e.to));
-	return (nodes.find((n) => !spawned.has(n.id)) ?? nodes[0])?.id;
-}
-/**
-* Place every node on the grid. Agents take ring cells in order; each tool takes
-* the first free cell outward from the first agent that called it (beside, then
-* above or below, then diagonal), so it sits next to its user.
-*/
-function layoutHub(input) {
-	const { nodes, edges, tools, calls, you } = input;
-	const hub = hubAgentId(nodes, edges);
-	const placements = [];
-	const taken = /* @__PURE__ */ new Set();
-	const place = (id, kind, col, row) => {
-		placements.push({
-			id,
-			kind,
-			col,
-			row
-		});
-		taken.add(key(col, row));
-	};
-	if (hub) place(hub, "hub", 0, 0);
-	const agents = nodes.filter((n) => n.id !== hub);
-	ringCells(agents.length).forEach(([c, r], i) => place(agents[i].id, "agent", c, r));
-	const ring = Math.max(1, ...placements.map((p) => Math.max(Math.abs(p.col), Math.abs(p.row))));
-	if (you) {
-		const col = -Math.min(ring, 1);
-		let row = -ring - 1;
-		while (taken.has(key(col, row))) row--;
-		place("you", "you", col, row);
-	}
-	const cell = new Map(placements.map((p) => [p.id, p]));
-	const userOf = /* @__PURE__ */ new Map();
-	for (const call of calls) {
-		const toolId = tools.some((t) => t.id === call.to) ? call.to : tools.some((t) => t.id === call.from) ? call.from : void 0;
-		const agentId = toolId === call.to ? call.from : call.to;
-		if (toolId && cell.has(agentId) && !userOf.has(toolId)) userOf.set(toolId, agentId);
-	}
-	for (const tool of tools) {
-		const owner = cell.get(userOf.get(tool.id) ?? hub ?? "");
-		const ac = owner?.col ?? 0, ar = owner?.row ?? 0;
-		const sx = Math.sign(ac) || 1, sy = Math.sign(ar) || 1;
-		const options = ac === 0 ? [
-			[0, sy],
-			[sx, sy],
-			[-sx, sy],
-			[sx, 0]
-		] : ar === 0 ? [
-			[sx, 0],
-			[sx, -1],
-			[sx, 1],
-			[0, -1]
-		] : [
-			[sx, 0],
-			[0, sy],
-			[sx, sy],
-			[-sx, sy],
-			[sx, -sy]
-		];
-		let spot;
-		for (let step = 1; !spot && step < 6; step++) for (const [dx, dy] of options) {
-			const c = ac + dx * step, r = ar + dy * step;
-			if (!taken.has(key(c, r))) {
-				spot = [c, r];
-				break;
-			}
-		}
-		place(tool.id, "tool", spot[0], spot[1]);
-	}
-	const links = [];
-	const seen = /* @__PURE__ */ new Set();
-	const link = (from, to) => {
-		const k = [from, to].sort().join("|");
-		if (from === to || seen.has(k) || !taken.size) return;
-		seen.add(k);
-		links.push({
-			from,
-			to
-		});
-	};
-	if (you && hub) link("you", hub);
-	for (const agent of agents) {
-		const parent = edges.find((e) => e.kind === "spawn" && e.to === agent.id)?.from;
-		link(parent && cell.has(parent) ? parent : hub, agent.id);
-	}
-	for (const call of calls) if (cell.has(call.from) && cell.has(call.to)) link(call.from, call.to);
-	return {
-		placements,
-		links,
-		minCol: Math.min(...placements.map((p) => p.col)),
-		maxCol: Math.max(...placements.map((p) => p.col)),
-		minRow: Math.min(...placements.map((p) => p.row)),
-		maxRow: Math.max(...placements.map((p) => p.row))
-	};
-}
-/**
-* An orthogonal path between two tile centres with rounded elbows. Leaving the
-* hub, and between nodes in one column, it goes vertical first; otherwise
-* horizontal first. `lane` shifts a shared run sideways so parallel edges stay
-* apart. Returns the SVG path and its length (for the travelling pulse).
-*/
-function orthogonalPath(a, b, verticalFirst, lane = 0, radius = 10) {
-	const dx = b.x - a.x, dy = b.y - a.y;
-	if (Math.abs(dx) < 1 || Math.abs(dy) < 1) return {
-		d: `M${a.x},${a.y} L${b.x},${b.y}`,
-		length: Math.hypot(dx, dy)
-	};
-	const r = Math.min(radius, Math.abs(dx) / 2, Math.abs(dy) / 2);
-	const sx = Math.sign(dx), sy = Math.sign(dy);
-	if (verticalFirst) {
-		const x = a.x + lane;
-		return {
-			d: `M${x},${a.y} L${x},${b.y - sy * r} Q${x},${b.y} ${x + sx * r},${b.y} L${b.x},${b.y}`,
-			length: Math.abs(dy) + Math.abs(b.x - x) - 2 * r + Math.PI * r / 2
-		};
-	}
-	const y = a.y + lane;
-	return {
-		d: `M${a.x},${y} L${b.x - sx * r},${y} Q${b.x},${y} ${b.x},${y + sy * r} L${b.x},${b.y}`,
-		length: Math.abs(dx) + Math.abs(b.y - y) - 2 * r + Math.PI * r / 2
-	};
-}
-// src/workflows/format.ts
-/**
-* Display formatters for the workflow graph's live run-state chips. Pure and
-* dependency-free so they can be unit-tested without rendering the graph.
-*/
-/** Human-readable duration: `850ms`, `4.2s`, `1m30s`. Undefined for an absent,
-*  non-finite, or negative input (e.g. clock skew) so the caller renders no
-*  chip rather than a confusing `-5ms`. */
-function fmtDuration(ms) {
-	if (ms === void 0 || !Number.isFinite(ms) || ms < 0) return void 0;
-	if (ms < 1e3) return `${Math.round(ms)}ms`;
-	const s = ms / 1e3;
-	if (s < 60) return `${s.toFixed(1)}s`;
-	const totalSeconds = Math.round(s);
-	return `${Math.floor(totalSeconds / 60)}m${totalSeconds % 60}s`;
-}
-/** Human-readable USD cost: `$0`, `$0.0032` (sub-cent, 4dp), `$1.20`. Undefined
-*  for an absent, non-finite, or negative input — a cost is a billing amount, so
-*  a negative value is bad data, not a refund to render. */
-function fmtCost(usd) {
-	if (usd === void 0 || !Number.isFinite(usd) || usd < 0) return void 0;
-	if (usd === 0) return "$0";
-	return usd < .01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`;
-}
-/** Bound host-supplied preview/error text to a fixed length (with an ellipsis)
-*  before it reaches the DOM, so an oversized payload can't bloat the node tree —
-*  the card only ever shows a short preview, and CSS clamping is visual only.
-*  Truncation is code-point aware: it never slices through a surrogate pair (which
-*  would leave a lone surrogate that renders as the replacement character). */
-function clampPreview(text, max = 200) {
-	if (text.length <= max) return text;
-	const lastCode = text.charCodeAt(max - 1);
-	const end = lastCode >= 55296 && lastCode <= 56319 ? max - 1 : max;
-	return `${text.slice(0, end)}…`;
-}
-/** Human-readable token usage: `1200/340 tok`. Undefined when neither side is a
-*  finite, non-negative count, so the caller renders no chip; an invalid side
-*  (negative / NaN / absent) shows as 0 rather than leaking `-5/NaN tok`. */
-function fmtTokens(input, output) {
-	const valid = (n) => n !== void 0 && Number.isFinite(n) && n >= 0 ? n : void 0;
-	const i = valid(input);
-	const o = valid(output);
-	if (i === void 0 && o === void 0) return void 0;
-	return `${i ?? 0}/${o ?? 0} tok`;
-}
-/** A token total in a few characters: `840 tok`, `12.4k tok`, `1.2M tok`.
-*  Undefined for an absent, non-finite or negative count. */
-function fmtTokenTotal(tokens) {
-	if (tokens == null || !Number.isFinite(tokens) || tokens < 0) return void 0;
-	if (tokens < 1e3) return `${Math.round(tokens)} tok`;
-	if (tokens < 1e6) return `${(tokens / 1e3).toFixed(tokens < 1e4 ? 1 : 0)}k tok`;
-	return `${(tokens / 1e6).toFixed(1)}M tok`;
-}
 // src/workflows/cron.ts
 /**
 * Cron → English for a schedule trigger's node label. A raw `0 9 * * 1-5` tells
@@ -1556,34 +1264,9 @@ function buildWorkflowGraph(yaml, options) {
 	};
 }
 // src/workflows/node-ui.tsx
-/**
-* Shared presentational atoms for a workflow graph node — the type glyph, the
-* status color/label/badge maps, and the edge coloring. One source of truth so
-* the node card and the edges that point at it read as one system.
-*
-* Colors resolve to the SEMANTIC surface tokens (`--surface-success-text`,
-* `--surface-danger-text`, …), which carry a light AND a dark value tuned for
-* contrast against the card. A literal palette hex (`#22c55e`) or a stock
-* Tailwind shade (`text-red-400`) carries ONE value, so it can only ever hold its
-* contrast in one of the two themes — never use one for a status color.
-*
-* Inline `style` colors here use the RAW brand tokens (`hsl(var(--primary))`,
-* `var(--surface-…)`) — NOT the `--color-*` @theme aliases, which are undefined
-* in a consumer that only imports `tokens.css` (e.g. platform-web), where a
-* `var(--color-*)` would silently resolve to nothing. See the edge-color test.
-*/
 /** Track color behind a progress bar — a faint wash of the muted token. */
 const MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
-/** Per-KIND accents — the QUIET identity channel. The 2026-10-09 canvas
-*  critique's first blocker: kind and state shared the same channel and hue
-*  family (sandbox-kind was green like DONE; structural-kind amber like
-*  WAITING; agent-kind indigo like RUNNING). The split:
-*    KIND  = the glyph-tile tint + a 2px top rule. Hues chosen to NEVER
-*           collide with the state family (green/amber/red are reserved
-*           for state alone).
-*    STATE = the border, ring, glow and fill (see statusBorder).
-* Kind hue duplicates are deliberate: shape + glyph carry identity; the
-* tint is a hint, not the signal. */
+/** Glyph accents identify the node kind; ui's status metadata owns run state. */
 const KIND_ACCENT = {
 	"agent.run": "hsl(var(--primary))",
 	"script.run": "var(--surface-info-text)",
@@ -1593,8 +1276,7 @@ const KIND_ACCENT = {
 	"line.send": "var(--surface-info-text)",
 	notify: "var(--surface-info-text)"
 };
-/** Structural kinds (parallel/foreach/decision) rest SLATE — amber is
-*  reserved for `waiting`, full stop. */
+/** Structural nodes stay neutral; approval status owns warning ink. */
 const TONE_ACCENT = {
 	trigger: "hsl(var(--primary))",
 	structural: "hsl(var(--muted-foreground))",
@@ -1605,120 +1287,39 @@ const TONE_ACCENT = {
 function kindAccent(tone, kind) {
 	return (kind !== void 0 ? KIND_ACCENT[kind] : void 0) ?? TONE_ACCENT[tone];
 }
-/** Resting elevation — the 2026-10-09 critique's depth finding: the card
-*  sat FLAT on the canvas (three near-identical greys, borders invisible).
-*  The card must sit ON the canvas, not in it: a real two-layer shadow plus a
-*  1px inner top highlight, foreground-token based so both themes get depth
-*  without a dark-mode black box. */
-const RESTING_SHADOW = "inset 0 1px 0 hsl(var(--foreground) / 0.07), 0 1px 2px hsl(var(--foreground) / 0.10), 0 12px 32px -14px hsl(var(--foreground) / 0.40)";
+/** Brand shadow channels stay black in dark mode. */
+const RESTING_SHADOW = "inset 0 1px 0 hsl(var(--foreground) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.08)";
 /** The resting card border: visible against the canvas in BOTH themes —
 *  `--border` vanished on dark. */
 const RESTING_BORDER = "hsl(var(--foreground) / 0.14)";
-const STATUS_QUEUED = "hsl(var(--muted-foreground))";
-const STATUS_DONE = "var(--surface-success-text)";
-const STATUS_FAILED = "var(--surface-danger-text)";
-const STATUS_RUNNING = "hsl(var(--primary))";
-/** A run blocked on a human borrows the warning surface — the same amber the
-*  design system uses for "needs attention". It must never read as the primary
-*  "running" accent: the workflow is not working, it is waiting on the viewer. */
-const STATUS_WAITING = "var(--surface-warning-text)";
-const STATUS_COLOR = {
-	queued: STATUS_QUEUED,
-	running: STATUS_RUNNING,
-	waiting: STATUS_WAITING,
-	succeeded: STATUS_DONE,
-	failed: STATUS_FAILED,
-	skipped: STATUS_QUEUED
-};
-/** An edge reads by the status of the node it points AT — with the 2026-10-09
-*  fix: SETTLED edges go quiet. A succeeded run used to paint every edge green
-*  ("the green wall"); now only the live front carries color: running keeps
-*  primary, waiting amber, failed danger, and succeeded/queued sit at a quiet
-*  neutral so the eye finds the front, not the history. */
+/** Workflow waiting means human approval; peer waiting remains neutral in agent views. */
+const workflowStatus = (status) => status === "waiting" ? "needs-you" : status === "skipped" ? "stopped" : status;
+const workflowMeta = (status) => statusMeta(workflowStatus(status));
+const workflowStatuses = [
+	"queued",
+	"running",
+	"waiting",
+	"succeeded",
+	"failed",
+	"skipped"
+];
+`${statusMeta("running").token}`;
+const STATUS_COLOR = Object.fromEntries(workflowStatuses.map((status) => [status, `var(${workflowMeta(status).token})`]));
+const STATUS_LABEL = Object.fromEntries(workflowStatuses.map((status) => [status, workflowMeta(status).label]));
+/** Retained public styling contract, derived from the owner's status metadata. */
+const STATUS_PILL = Object.fromEntries(workflowStatuses.map((status) => [status, {
+	color: STATUS_COLOR[status],
+	background: "transparent",
+	borderColor: "hsl(var(--border))"
+}]));
 function edgeColor(status) {
-	if (status === "running") return STATUS_RUNNING;
-	if (status === "waiting") return STATUS_WAITING;
-	if (status === "failed") return STATUS_FAILED;
-	return "color-mix(in srgb, hsl(var(--muted-foreground)) 38%, transparent)";
+	return status === "failed" || status === "waiting" ? STATUS_COLOR[status] : "color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent)";
 }
-const STATUS_LABEL = {
-	queued: "Queued",
-	running: "Running",
-	waiting: "Waiting on you",
-	succeeded: "Done",
-	failed: "Failed",
-	skipped: "Not taken"
-};
-/** @deprecated `StatusPill` now renders ui's StatusPill from `STATUS_TONE`;
-*  kept for consumers that styled their own pill from it.
-*  Status pill styling — a tinted well in the status color. Built from the
-*  semantic surface trio (bg/border/text) so the pill keeps its contrast in both
-*  themes rather than washing out in one of them. */
-const STATUS_PILL = {
-	queued: {
-		background: "color-mix(in srgb, hsl(var(--muted-foreground)) 12%, transparent)",
-		color: "hsl(var(--muted-foreground))",
-		borderColor: "color-mix(in srgb, hsl(var(--muted-foreground)) 28%, transparent)"
-	},
-	running: {
-		background: "color-mix(in srgb, hsl(var(--primary)) 14%, transparent)",
-		color: "hsl(var(--primary))",
-		borderColor: "color-mix(in srgb, hsl(var(--primary)) 40%, transparent)"
-	},
-	waiting: {
-		background: "var(--surface-warning-bg)",
-		color: "var(--surface-warning-text)",
-		borderColor: "var(--surface-warning-border)"
-	},
-	succeeded: {
-		background: "var(--surface-success-bg)",
-		color: "var(--surface-success-text)",
-		borderColor: "var(--surface-success-border)"
-	},
-	failed: {
-		background: "var(--surface-danger-bg)",
-		color: "var(--surface-danger-text)",
-		borderColor: "var(--surface-danger-border)"
-	},
-	skipped: {
-		background: "transparent",
-		color: "hsl(var(--muted-foreground))",
-		borderColor: "color-mix(in srgb, hsl(var(--muted-foreground)) 28%, transparent)"
-	}
-};
-/** The card's border + ring once a node has live run state. The emphasis
-*  law (the critique's second blocker, inverted): the EXCEPTION is the
-*  loudest thing on the canvas —
-*    failed   saturated danger + a halo wider than running's
-*    waiting  amber + glow (the node the viewer must act on)
-*    running  primary + glow (the live front)
-*    succeeded QUIET: a neutral border, no ring, no glow — done is the
-*             resting state of a healthy run and must not shout */
 function statusBorder(status) {
-	switch (status) {
-		case "failed": return {
-			borderColor: STATUS_FAILED,
-			boxShadow: `0 0 0 2px color-mix(in srgb, ${STATUS_FAILED} 55%, transparent), 0 0 32px -4px color-mix(in srgb, ${STATUS_FAILED} 70%, transparent), inset 0 1px 0 hsl(var(--foreground) / 0.07), 0 1px 2px hsl(var(--foreground) / 0.10), 0 12px 32px -14px hsl(var(--foreground) / 0.40)`
-		};
-		case "running":
-		case "waiting": {
-			const color = STATUS_COLOR[status];
-			return {
-				borderColor: color,
-				boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 45%, transparent), 0 0 24px -6px ${color}`
-			};
-		}
-		case "queued": return { borderColor: "hsl(var(--border))" };
-		case "skipped": return {
-			borderColor: "hsl(var(--muted-foreground) / 0.45)",
-			borderStyle: "dashed",
-			opacity: .5
-		};
-		case "succeeded": return {
-			borderColor: RESTING_BORDER,
-			boxShadow: RESTING_SHADOW
-		};
-	}
+	return {
+		borderColor: status === "failed" || status === "waiting" ? STATUS_COLOR[status] : RESTING_BORDER,
+		boxShadow: RESTING_SHADOW
+	};
 }
 /** Determinate progress fraction for a node's status: queued reads near-empty,
 *  running and waiting a partial (the run reached this node but has not finished
@@ -1879,25 +1480,15 @@ const STATUS_TONE = {
 *  tone and label as every other status in the product. `shrink-0` because the
 *  longest label is two words ("Waiting on you") and the pill is often nested a
 *  level below the flex row it sits in. */
-function StatusPill$1({ status }) {
-	if (status === "succeeded") return /* @__PURE__ */ jsxs("span", {
-		className: "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium leading-4",
-		style: {
-			background: "color-mix(in srgb, hsl(var(--muted-foreground)) 10%, transparent)",
-			color: "hsl(var(--muted-foreground))",
-			borderColor: "color-mix(in srgb, hsl(var(--muted-foreground)) 26%, transparent)"
-		},
-		children: [/* @__PURE__ */ jsx(Check, {
-			className: "size-2.5",
-			strokeWidth: 3,
+function StatusPill({ status }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs",
+		style: { color: STATUS_COLOR[status] },
+		children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+			status: workflowStatus(status),
 			"aria-hidden": true
 		}), STATUS_LABEL[status]]
 	});
-	return /* @__PURE__ */ jsx(StatusPill, {
-		tone: STATUS_TONE[status],
-		className: "shrink-0",
-		children: STATUS_LABEL[status]
-	});
 }
 /**
 * The run status FOOTER: a progress bar (queued = near-empty, running = pulsing
@@ -1992,749 +1583,4 @@ function NodeMark({ kind, provider, model, accent, tile }) {
 		})
 	});
 }
-// src/workflows/agent-hub-parts.tsx
-/**
-* What the `AgentGraph` hub layout draws: a node (a brand-marked tile with its
-* name and model under it), the status badge on its corner, and the popover of
-* its recent calls. Status reads as a glyph and a word as well as a colour.
-*/
-/** One colour per call kind, shared by edges, the legend and popover rows. */
-const CALL_COLOR = {
-	call: "var(--agent-graph-call, hsl(217 91% 60%))",
-	answer: `var(--agent-graph-answer, ${STATUS_COLOR.succeeded})`,
-	"needs-you": `var(--agent-graph-needs-you, ${STATUS_COLOR.waiting})`,
-	failed: `var(--agent-graph-failed, ${STATUS_COLOR.failed})`
-};
-const CALL_LABEL = {
-	call: "Call",
-	answer: "Answer",
-	"needs-you": "Needs you",
-	failed: "Failed"
-};
-function NodeIcon({ entity, size }) {
-	if (entity.kind === "you") return /* @__PURE__ */ jsx(User, {
-		size: size * .42,
-		strokeWidth: 2.2,
-		"aria-hidden": true
-	});
-	if (entity.kind === "tool") {
-		const provider = entity.tool?.provider;
-		if (!provider) return /* @__PURE__ */ jsx(Wrench, {
-			size: size * .4,
-			"aria-hidden": true
-		});
-		return /* @__PURE__ */ jsx(ProviderIcon, {
-			id: provider,
-			displayName: entity.label,
-			size: Math.round(size * .46),
-			className: "rounded-[4px]"
-		});
-	}
-	const brand = entity.agent?.model ? modelBrandFor(entity.agent.model) : null;
-	return brand ? /* @__PURE__ */ jsx(ModelBrandStack, {
-		identity: brand,
-		size: "sm"
-	}) : /* @__PURE__ */ jsx(Bot, {
-		size: size * .44,
-		"aria-hidden": true
-	});
-}
-/** The corner badge: done, needs you, failed or running, each with its own glyph. */
-function StatusBadge({ status }) {
-	if (status === "succeeded") return /* @__PURE__ */ jsx("span", {
-		className: "ag-badge",
-		style: { background: STATUS_COLOR.succeeded },
-		children: /* @__PURE__ */ jsx(Check, {
-			size: 9,
-			strokeWidth: 3
-		})
-	});
-	if (status === "needs-you") return /* @__PURE__ */ jsx("span", {
-		className: "ag-badge",
-		style: { background: STATUS_COLOR.waiting },
-		children: /* @__PURE__ */ jsx(Clock3, {
-			size: 9,
-			strokeWidth: 3
-		})
-	});
-	if (status === "failed") return /* @__PURE__ */ jsx("span", {
-		className: "ag-badge",
-		style: { background: STATUS_COLOR.failed },
-		children: "!"
-	});
-	if (status === "running") return /* @__PURE__ */ jsx("span", {
-		className: "ag-badge ag-badge-running",
-		children: /* @__PURE__ */ jsx(LoaderCircle, {
-			size: 11,
-			strokeWidth: 2.5
-		})
-	});
-	return null;
-}
-function HubNode({ entity, x, y, tile, dimmed, selected, buttonRef, onOpen, onHover, onKeyDown }) {
-	const tone = entity.status === "needs-you" ? STATUS_COLOR.waiting : entity.status === "failed" ? STATUS_COLOR.failed : void 0;
-	const subTone = entity.status === "needs-you" ? STATUS_COLOR.waiting : entity.status === "failed" ? STATUS_COLOR.failed : void 0;
-	const sub = entity.status === "needs-you" ? "Needs you" : entity.status === "failed" ? "Error" : entity.sub;
-	return /* @__PURE__ */ jsxs("button", {
-		ref: buttonRef,
-		type: "button",
-		"data-agent-graph-node": entity.id,
-		"data-kind": entity.kind,
-		"aria-label": `${entity.label}${entity.sub ? `, ${entity.sub}` : ""}${entity.status ? `, ${entity.status === "needs-you" ? "needs you" : entity.status}` : ""}`,
-		"aria-expanded": selected,
-		className: `ag-node ag-node-${entity.kind}${dimmed ? " ag-dimmed" : ""}${selected ? " ag-selected" : ""}`,
-		style: {
-			left: x,
-			top: y,
-			"--ag-tile": `${tile}px`,
-			...tone ? { "--ag-tone": tone } : {}
-		},
-		onClick: onOpen,
-		onPointerEnter: () => onHover(true),
-		onPointerLeave: () => onHover(false),
-		onFocus: () => onHover(true),
-		onBlur: () => onHover(false),
-		onKeyDown,
-		children: [
-			/* @__PURE__ */ jsxs("span", {
-				className: "ag-tile",
-				children: [/* @__PURE__ */ jsx(NodeIcon, {
-					entity,
-					size: tile
-				}), /* @__PURE__ */ jsx(StatusBadge, { status: entity.status })]
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "ag-name",
-				children: entity.label
-			}),
-			sub && /* @__PURE__ */ jsx("span", {
-				className: "ag-sub",
-				style: subTone ? { color: subTone } : void 0,
-				children: sub
-			})
-		]
-	});
-}
-const fmtMs = (ms) => ms < 1e3 ? `${Math.round(ms / 100) * 100 || Math.round(ms)}ms` : `${(ms / 1e3).toFixed(ms < 1e4 ? 1 : 0)}s`;
-/** A node's recent calls: who it called or was called by, what for, how long, and what failed. */
-function HubPopover({ entity, entities, calls, now, left, top, summary, closeRef, onClose }) {
-	const mine = calls.filter((c) => (c.from === entity.id || c.to === entity.id) && c.startedAt <= now).sort((a, b) => b.startedAt - a.startedAt);
-	const recent = mine.slice(0, 5);
-	const lastMinute = mine.filter((c) => now - c.startedAt <= 6e4).length;
-	const status = entity.status === "needs-you" ? "Needs you" : entity.status === "failed" ? "Error" : entity.status === "running" ? "Running" : entity.status === "succeeded" ? "Done" : void 0;
-	const cost = entity.agent?.costUsd;
-	return /* @__PURE__ */ jsxs("div", {
-		role: "dialog",
-		"aria-label": `${entity.label} calls`,
-		className: "ag-popover",
-		style: {
-			left,
-			top
-		},
-		onKeyDown: (event) => {
-			if (event.key === "Escape") {
-				event.stopPropagation();
-				onClose();
-			}
-		},
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "ag-pop-head",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "ag-tile ag-tile-mini",
-						style: { "--ag-tile": "28px" },
-						children: /* @__PURE__ */ jsx(NodeIcon, {
-							entity,
-							size: 28
-						})
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						className: "ag-pop-title",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "ag-pop-name",
-							children: entity.label
-						}), (entity.sub || entity.tool?.detail) && /* @__PURE__ */ jsx("span", {
-							className: "ag-pop-sub",
-							children: entity.tool?.detail ?? entity.sub
-						})]
-					}),
-					status && /* @__PURE__ */ jsx("span", {
-						className: `ag-pill ag-pill-${entity.status}`,
-						children: status
-					}),
-					/* @__PURE__ */ jsx("button", {
-						ref: closeRef,
-						type: "button",
-						className: "ag-close",
-						"aria-label": "Close",
-						onClick: onClose,
-						children: /* @__PURE__ */ jsx(X, { size: 14 })
-					})
-				]
-			}),
-			summary && /* @__PURE__ */ jsx("p", {
-				className: "ag-pop-summary",
-				children: summary
-			}),
-			recent.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "ag-pop-calls",
-				children: recent.map((c) => {
-					const outgoing = c.from === entity.id;
-					const other = entities.get(outgoing ? c.to : c.from);
-					const running = c.durationMs == null;
-					return /* @__PURE__ */ jsxs("li", { children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "ag-pop-dir",
-							"aria-label": outgoing ? "to" : "from",
-							children: outgoing ? "→" : "←"
-						}),
-						other && /* @__PURE__ */ jsx("span", {
-							className: "ag-tile ag-tile-micro",
-							style: { "--ag-tile": "16px" },
-							children: /* @__PURE__ */ jsx(NodeIcon, {
-								entity: other,
-								size: 16
-							})
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							className: "ag-pop-call",
-							children: [/* @__PURE__ */ jsx("b", { children: other?.label ?? (outgoing ? c.to : c.from) }), c.label ? ` · ${c.label}` : ""]
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "ag-pop-time",
-							style: c.kind === "failed" ? { color: CALL_COLOR.failed } : void 0,
-							children: c.kind === "failed" ? "Failed" : running ? /* @__PURE__ */ jsx(LoaderCircle, {
-								size: 12,
-								className: "ag-spin",
-								"aria-label": "running"
-							}) : fmtMs(c.durationMs)
-						})
-					] }, c.id);
-				})
-			}),
-			/* @__PURE__ */ jsxs("p", {
-				className: "ag-pop-foot",
-				children: [
-					cost != null && /* @__PURE__ */ jsx("b", { children: fmtCost(cost) }),
-					lastMinute,
-					" ",
-					lastMinute === 1 ? "call" : "calls",
-					" in the last minute"
-				]
-			})
-		]
-	});
-}
-// src/workflows/canvas-theme.ts
-/** Motion is opt-OUT, so it is only used where the reader's preference can be
-*  read and says nothing against it. Somewhere without `matchMedia` cannot say
-*  a reader tolerates movement, so it gets none. */
-function motionAllowed() {
-	return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === false;
-}
-/** React Flow adds its own .light/.dark class below the graph wrapper. Read
-* that wrapper's inherited scheme so a nested WorkspaceLayout theme wins over
-* the page root without React Flow's class influencing the answer. */
-function currentColorMode(anchor) {
-	if (typeof document === "undefined" || typeof window === "undefined") return "light";
-	const scheme = window.getComputedStyle(anchor ?? document.documentElement).colorScheme;
-	if (scheme.startsWith("dark")) return "dark";
-	if (scheme.startsWith("light")) return "light";
-	return (anchor ?? document.documentElement).closest(".dark") ? "dark" : "light";
-}
-function useColorMode(wrapperRef, hasGraph) {
-	const [mode, setMode] = useState(() => currentColorMode(null));
-	useLayoutEffect(() => {
-		const anchor = hasGraph ? wrapperRef.current : null;
-		const update = () => setMode(currentColorMode(anchor));
-		update();
-		const observer = new MutationObserver(update);
-		for (let el = anchor ?? document.documentElement; el; el = el.parentElement) observer.observe(el, {
-			attributes: true,
-			attributeFilter: [
-				"class",
-				"data-theme",
-				"data-sandbox-theme",
-				"style"
-			]
-		});
-		return () => observer.disconnect();
-	}, [wrapperRef, hasGraph]);
-	return mode;
-}
-/** The selected node's ring. An `outline` rather than a border or a box-shadow
-*  because both of those are already spoken for — the border carries tone and
-*  run status, the shadow carries the running/waiting glow — and an outline
-*  composes with both without disturbing the laid-out box. */
-const SELECTION_OUTLINE = {
-	outline: "2px solid hsl(var(--primary))",
-	outlineOffset: 2
-};
-// src/workflows/AgentHubCanvas.tsx
-/**
-* The hub layout of `AgentGraph`: who asked (You), the orchestrator, the agents
-* it runs and the tools they call, with each call travelling along its edge in
-* its kind's colour. Plain DOM and SVG on a fixed grid, so it renders on the
-* server, scales to its container, and costs no graph library.
-*/
-/** A call shows on its edge while it runs and for this long after it ends. */
-const ACTIVE_MS = 2600;
-const PAD_X = 84;
-const PAD_Y = 36;
-function useWidth(ref) {
-	const [width, setWidth] = useState(0);
-	useLayoutEffect(() => {
-		const el = ref.current;
-		if (!el) return;
-		setWidth(el.clientWidth);
-		const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, [ref]);
-	return width;
-}
-function useNow(now) {
-	const [tick, setTick] = useState(() => Date.now());
-	useEffect(() => {
-		if (now !== void 0) return;
-		const timer = setInterval(() => setTick(Date.now()), 500);
-		return () => clearInterval(timer);
-	}, [now]);
-	return now ?? tick;
-}
-function AgentHubCanvas({ nodes, edges, tools = [], calls = [], you, now: nowProp, title = "Agent graph", selectedId, onSelect, className }) {
-	const wrap = useRef(null);
-	const width = useWidth(wrap);
-	const now = useNow(nowProp);
-	const [hover, setHover] = useState(null);
-	const [open, setOpen] = useState(selectedId ?? null);
-	const buttons = useRef(/* @__PURE__ */ new Map());
-	const closeRef = useRef(null);
-	const animate = useMemo(() => motionAllowed(), []);
-	const visibleCalls = useMemo(() => calls.filter((c) => c.startedAt <= now), [calls, now]);
-	const layout = useMemo(() => layoutHub({
-		nodes,
-		edges,
-		tools,
-		calls,
-		you: Boolean(you)
-	}), [
-		nodes,
-		edges,
-		tools,
-		calls,
-		you
-	]);
-	const span = (m) => ({
-		w: (layout.maxCol - layout.minCol) * m.cellX + 168,
-		h: (layout.maxRow - layout.minRow) * m.cellY + 72 + m.hubTile + m.label
-	});
-	const metrics = width && width / span(HUB_METRICS).w < .75 ? HUB_METRICS_COMPACT : HUB_METRICS;
-	const { w, h } = span(metrics);
-	const scale = width ? Math.min(1, width / w) : 1;
-	const entities = useMemo(() => {
-		const map = /* @__PURE__ */ new Map();
-		for (const p of layout.placements) if (p.kind === "you") map.set(p.id, {
-			id: p.id,
-			kind: "you",
-			label: typeof you === "object" && you.label ? you.label : "You"
-		});
-		else if (p.kind === "tool") {
-			const tool = tools.find((t) => t.id === p.id);
-			map.set(p.id, {
-				id: p.id,
-				kind: "tool",
-				label: tool.label,
-				tool
-			});
-		} else {
-			const agent = nodes.find((n) => n.id === p.id);
-			map.set(p.id, {
-				id: p.id,
-				kind: p.kind,
-				label: agent.label,
-				sub: agent.model ? shortModel(agent.model) : void 0,
-				status: agent.status,
-				agent
-			});
-		}
-		return map;
-	}, [
-		layout,
-		nodes,
-		tools,
-		you
-	]);
-	const at = (id) => {
-		const p = layout.placements.find((q) => q.id === id);
-		return {
-			x: (p.col - layout.minCol) * metrics.cellX + PAD_X,
-			y: (p.row - layout.minRow) * metrics.cellY + PAD_Y + metrics.hubTile / 2
-		};
-	};
-	const edgeState = (from, to) => {
-		let latest;
-		for (const c of visibleCalls) if (c.from === from && c.to === to || c.from === to && c.to === from) {
-			if (!latest || c.startedAt > latest.startedAt) latest = c;
-		}
-		if (!latest) return void 0;
-		const end = latest.durationMs == null ? Infinity : latest.startedAt + latest.durationMs;
-		return now - end <= ACTIVE_MS ? latest : void 0;
-	};
-	const focus = hover ?? open;
-	const related = useMemo(() => {
-		if (!focus) return null;
-		const set = /* @__PURE__ */ new Set([focus]);
-		for (const l of layout.links) {
-			if (l.from === focus) set.add(l.to);
-			if (l.to === focus) set.add(l.from);
-		}
-		return set;
-	}, [focus, layout]);
-	const agents = nodes.length;
-	const lastMinute = visibleCalls.filter((c) => now - c.startedAt <= 6e4).length;
-	const costs = nodes.map((n) => n.costUsd);
-	const cost = costs.every((c) => c != null) ? costs.reduce((s, c) => s + (c ?? 0), 0) : void 0;
-	const chips = nodes.filter((n) => n.status === "needs-you" || n.status === "failed");
-	const openNode = (id) => {
-		const next = open === id ? null : id;
-		setOpen(next);
-		if (next) onSelect?.(next);
-	};
-	useEffect(() => {
-		if (open) closeRef.current?.focus({ preventScroll: true });
-	}, [open]);
-	const keydown = (id) => (event) => {
-		const dir = {
-			ArrowLeft: [-1, 0],
-			ArrowRight: [1, 0],
-			ArrowUp: [0, -1],
-			ArrowDown: [0, 1]
-		}[event.key];
-		if (event.key === "Escape") {
-			setOpen(null);
-			return;
-		}
-		if (!dir) return;
-		event.preventDefault();
-		const from = at(id);
-		let best, bestScore = Infinity;
-		for (const p of layout.placements) {
-			if (p.id === id) continue;
-			const to = at(p.id);
-			const dx = to.x - from.x, dy = to.y - from.y;
-			const along = dx * dir[0] + dy * dir[1];
-			if (along <= 0) continue;
-			const score = along + Math.abs(dx * dir[1] - dy * dir[0]) * 2;
-			if (score < bestScore) {
-				bestScore = score;
-				best = p.id;
-			}
-		}
-		if (best) buttons.current.get(best)?.focus();
-	};
-	const openEntity = open ? entities.get(open) : void 0;
-	const popover = openEntity && (() => {
-		const p = at(openEntity.id);
-		const left = (p.x + 140 + 280) * scale < (width || w) ? (p.x + 40) * scale : Math.max(8, (p.x - 40) * scale - 280);
-		const top = Math.max(8, (p.y - metrics.hubTile / 2 - 8) * scale);
-		const summary = openEntity.kind === "you" ? typeof you === "object" ? you.summary : void 0 : openEntity.agent?.turn ?? void 0;
-		return /* @__PURE__ */ jsx(HubPopover, {
-			entity: openEntity,
-			entities,
-			calls: visibleCalls,
-			now,
-			left,
-			top,
-			summary,
-			closeRef,
-			onClose: () => {
-				const id = open;
-				setOpen(null);
-				buttons.current.get(id)?.focus();
-			}
-		});
-	})();
-	const lanes = /* @__PURE__ */ new Map();
-	const laneOf = (node) => {
-		const n = lanes.get(node) ?? 0;
-		lanes.set(node, n + 1);
-		return (n % 2 ? 1 : -1) * Math.ceil(n / 2) * 6;
-	};
-	return /* @__PURE__ */ jsxs("section", {
-		className: `ag-root ${className ?? ""}`,
-		"aria-label": typeof title === "string" ? title : "Agent graph",
-		children: [
-			/* @__PURE__ */ jsx("style", { children: AGENT_HUB_CSS }),
-			/* @__PURE__ */ jsxs("header", {
-				className: "ag-head",
-				children: [
-					/* @__PURE__ */ jsxs("span", {
-						className: "ag-title",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "ag-title-mark",
-							"aria-hidden": true
-						}), title]
-					}),
-					chips.map((n) => /* @__PURE__ */ jsxs("span", {
-						className: `ag-chip ag-chip-${n.status}`,
-						children: [
-							n.status === "failed" ? "!" : "◷",
-							" ",
-							n.label,
-							" ",
-							n.status === "failed" ? "failed" : "needs you"
-						]
-					}, n.id)),
-					/* @__PURE__ */ jsxs("span", {
-						className: "ag-stats",
-						children: [
-							/* @__PURE__ */ jsxs("span", { children: [
-								/* @__PURE__ */ jsx("b", { children: agents }),
-								" ",
-								agents === 1 ? "agent" : "agents"
-							] }),
-							/* @__PURE__ */ jsxs("span", { children: [
-								/* @__PURE__ */ jsx("b", { children: tools.length }),
-								" ",
-								tools.length === 1 ? "tool" : "tools"
-							] }),
-							/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("b", { children: lastMinute }), " calls/min"] }),
-							/* @__PURE__ */ jsxs("span", {
-								title: cost === void 0 ? "Not every agent recorded its cost" : void 0,
-								children: [/* @__PURE__ */ jsx("b", { children: cost === void 0 ? "Unknown" : fmtCost(cost) }), cost === void 0 ? " cost" : ""]
-							})
-						]
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				ref: wrap,
-				className: "ag-canvas-wrap",
-				style: { height: h * scale },
-				onKeyDown: (e) => {
-					if (e.key === "Escape") setOpen(null);
-				},
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "ag-canvas",
-					style: {
-						width: w,
-						height: h,
-						transform: `scale(${scale})`
-					},
-					children: [/* @__PURE__ */ jsx("svg", {
-						className: "ag-edges",
-						width: w,
-						height: h,
-						"aria-hidden": true,
-						children: layout.links.map((l) => {
-							const a = at(l.from), b = at(l.to);
-							const fromHub = layout.placements.find((p) => p.id === l.from)?.kind === "hub";
-							const sameCol = Math.abs(a.x - b.x) < 1;
-							const { d, length } = orthogonalPath(a, b, l.from !== "you" && (fromHub || sameCol), fromHub ? laneOf(l.from) : 0);
-							const live = edgeState(l.from, l.to);
-							const touches = !related || related.has(l.from) && related.has(l.to);
-							const forward = live ? live.from === l.from : true;
-							return /* @__PURE__ */ jsxs("g", {
-								className: touches ? void 0 : "ag-dimmed",
-								children: [/* @__PURE__ */ jsx("path", {
-									d,
-									className: "ag-edge"
-								}), live && /* @__PURE__ */ jsx("path", {
-									d,
-									className: `ag-edge-live${animate && live.kind !== "failed" ? " ag-flow" : ""}`,
-									style: {
-										stroke: CALL_COLOR[live.kind],
-										"--ag-len": `${length}px`,
-										animationDirection: forward ? "normal" : "reverse"
-									}
-								})]
-							}, `${l.from}-${l.to}`);
-						})
-					}), layout.placements.map((p) => {
-						const entity = entities.get(p.id);
-						const { x, y } = at(p.id);
-						const tile = p.kind === "hub" ? metrics.hubTile : p.kind === "you" ? metrics.tile - 8 : metrics.tile;
-						return /* @__PURE__ */ jsx(HubNode, {
-							entity,
-							x,
-							y,
-							tile,
-							dimmed: Boolean(related && !related.has(p.id)),
-							selected: open === p.id,
-							buttonRef: (el) => {
-								if (el) buttons.current.set(p.id, el);
-								else buttons.current.delete(p.id);
-							},
-							onOpen: () => openNode(p.id),
-							onHover: (on) => setHover((prev) => on ? p.id : prev === p.id ? null : prev),
-							onKeyDown: keydown(p.id)
-						}, p.id);
-					})]
-				}), popover]
-			}),
-			/* @__PURE__ */ jsx("ul", {
-				className: "ag-legend",
-				"aria-label": "Edge colours",
-				children: [
-					"call",
-					"answer",
-					"needs-you",
-					"failed"
-				].map((k) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
-					className: "ag-legend-line",
-					style: { background: CALL_COLOR[k] }
-				}), CALL_LABEL[k]] }, k))
-			})
-		]
-	});
-}
-// src/workflows/WorkflowGraphLazy.tsx
-/**
-* Lazy + error-isolated boundary for {@link WorkflowGraph}. React Flow (~50KB)
-* is only needed on the workflow detail page and on workflow proposal cards, so
-* it's code-split out of the always-loaded app shell. The Suspense fallback
-* keeps the caller's height so layout doesn't jump; the error boundary degrades
-* to the raw YAML if the chunk fails
-* to load (offline) or React Flow throws, instead of crashing the panel tree.
-*
-* The chunk import auto-retries a transient failure (a flaky network or an
-* HMR/cache miss) before degrading, and the fallback offers a manual retry that
-* re-attempts the import — so a recoverable failure isn't permanently pinned to
-* the YAML view. A chunk that is gone for good (e.g. an old hash after a deploy)
-* still degrades to the fully-legible YAML; the host can recover those globally
-* via a Vite `vite:preloadError` reload guard.
-*/
-/** Re-run `factory` up to `retries` times with a short backoff before giving up.
-*  Covers a transient dynamic-import rejection (network blip, a chunk briefly
-*  unavailable behind a CDN) without bothering the user. Exported for tests. */
-function retryImport(factory, retries = 2, delayMs = 350) {
-	return factory().catch((err) => {
-		if (retries <= 0) throw err;
-		return new Promise((resolve, reject) => {
-			setTimeout(() => retryImport(factory, retries - 1, delayMs).then(resolve, reject), delayMs);
-		});
-	});
-}
-function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-DZ3xejKE.js").then((m) => ({ default: m.WorkflowGraph }))));
-}
-var GraphErrorBoundary = class extends Component {
-	state = { hasError: false };
-	static getDerivedStateFromError() {
-		return { hasError: true };
-	}
-	render() {
-		return this.state.hasError ? this.props.fallback : this.props.children;
-	}
-};
-/** Graceful degradation when the graph can't render: the workflow is still
-*  fully legible as YAML, with a retry for a recoverable load failure. */
-function GraphFallback({ yaml, className, onRetry }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: `overflow-auto rounded-lg border border-border bg-background p-2 ${className ?? ""}`,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "mb-1 flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-xs",
-				children: "Couldn't render the graph — showing the definition."
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onRetry,
-				className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-muted-foreground text-xs transition hover:text-foreground",
-				children: "Retry"
-			})]
-		}), /* @__PURE__ */ jsx("pre", {
-			className: "text-foreground text-xs",
-			children: /* @__PURE__ */ jsx("code", { children: yaml })
-		})]
-	});
-}
-function WorkflowGraph(props) {
-	const [attempt, setAttempt] = useState(0);
-	const Impl = useMemo(() => lazyWorkflowGraph(), [attempt]);
-	return /* @__PURE__ */ jsx(GraphErrorBoundary, {
-		fallback: /* @__PURE__ */ jsx(GraphFallback, {
-			...props,
-			onRetry: () => setAttempt((a) => a + 1)
-		}),
-		children: /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx("div", {
-				className: `flex items-center justify-center rounded-lg border border-border border-dashed text-text-muted text-xs ${props.className ?? ""}`,
-				children: "Loading graph…"
-			}),
-			children: /* @__PURE__ */ jsx(Impl, { ...props })
-		})
-	}, `${props.yaml}::${attempt}`);
-}
-// src/workflows/AgentGraph.tsx
-/**
-* `AgentGraph` — the topology of a multi-agent run, for a run page's side pane.
-*
-* Lazy and error-isolated like `WorkflowGraph`: React Flow and ELK load on
-* first render, a transient chunk failure retries, and a graph that cannot
-* render degrades to a plain list of the agents (still selectable) instead of
-* taking the pane down.
-*/
-function lazyCanvas() {
-	return lazy(() => retryImport(() => import("./AgentGraphCanvas-CMdOlSlh.js").then((m) => ({ default: m.AgentGraphCanvas }))));
-}
-/** The agents as a list, for when the canvas cannot load. */
-function AgentListFallback({ nodes, selectedId, onSelect, className, onRetry }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: `overflow-auto rounded-lg border border-border bg-background p-2 ${className ?? ""}`,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "mb-1 flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-xs",
-				children: "Couldn't draw the graph — showing the agents."
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onRetry,
-				className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-muted-foreground text-xs transition hover:text-foreground",
-				children: "Retry"
-			})]
-		}), /* @__PURE__ */ jsx("ul", {
-			className: "space-y-0.5",
-			children: nodes.map((n) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-pressed": selectedId === n.id,
-				onClick: () => onSelect?.(n.id),
-				className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-foreground text-xs hover:bg-muted aria-pressed:bg-muted",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: n.label
-				}), /* @__PURE__ */ jsx("span", {
-					className: "shrink-0 text-muted-foreground",
-					children: n.status
-				})]
-			}) }, n.id))
-		})]
-	});
-}
-function AgentGraph(props) {
-	if (props.layout === "hub") {
-		if (props.nodes.length === 0 && props.emptyState) return /* @__PURE__ */ jsx(Fragment, { children: props.emptyState });
-		return /* @__PURE__ */ jsx(AgentHubCanvas, { ...props });
-	}
-	return /* @__PURE__ */ jsx(AgentGraphTree, { ...props });
-}
-function AgentGraphTree(props) {
-	const [attempt, setAttempt] = useState(0);
-	const Canvas = useMemo(() => lazyCanvas(), [attempt]);
-	return /* @__PURE__ */ jsx(GraphErrorBoundary, {
-		fallback: /* @__PURE__ */ jsx(AgentListFallback, {
-			...props,
-			onRetry: () => setAttempt((a) => a + 1)
-		}),
-		children: /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx("div", {
-				className: `flex items-center justify-center rounded-lg border border-border border-dashed text-muted-foreground text-xs ${props.className ?? ""}`,
-				children: "Loading graph…"
-			}),
-			children: /* @__PURE__ */ jsx(Canvas, { ...props })
-		})
-	}, attempt);
-}
-export { buildWorkflowGraph as A, clampPreview as B, problemSurface as C, TRIGGER_NODE_ID as D, COMPACT_NODE_SIZE as E, worstSeverity as F, fmtDuration as H, actionPathLabel as I, humanizeIdentifier as L, triggerNodeId as M, triggerNodeIndex as N, actionNodeId as O, wfEdgeId as P, parseActionPath as R, problemBorder as S, statusBorder as T, fmtTokenTotal as U, fmtCost as V, fmtTokens as W, StatusFooter as _, useColorMode as a, emptySlotLabel as b, NodeMark as c, RESTING_BORDER as d, RESTING_SHADOW as f, STATUS_TONE as g, STATUS_PILL as h, motionAllowed as i, isStructuralKind as j, branchNodeId as k, ProblemMarker as l, STATUS_LABEL as m, WorkflowGraph as n, KIND_ACCENT as o, STATUS_COLOR as p, SELECTION_OUTLINE as r, KIND_ICON as s, AgentGraph as t, ProblemMessages as u, StatusPill$1 as v, problemTitle as w, kindAccent as x, edgeColor as y, shortModel as z };
+export { worstSeverity as A, actionNodeId as C, triggerNodeId as D, isStructuralKind as E, humanizeIdentifier as M, parseActionPath as N, triggerNodeIndex as O, shortModel as P, TRIGGER_NODE_ID as S, buildWorkflowGraph as T, problemBorder as _, ProblemMessages as a, statusBorder as b, STATUS_COLOR as c, STATUS_TONE as d, StatusFooter as f, kindAccent as g, emptySlotLabel as h, ProblemMarker as i, actionPathLabel as j, wfEdgeId as k, STATUS_LABEL as l, edgeColor as m, KIND_ICON as n, RESTING_BORDER as o, StatusPill as p, NodeMark as r, RESTING_SHADOW as s, KIND_ACCENT as t, STATUS_PILL as u, problemSurface as v, branchNodeId as w, COMPACT_NODE_SIZE as x, problemTitle as y };