@tangle-network/sandbox-ui 0.138.1 → 0.139.0

package/dist/{node-output-udnwhShN.js → AgentGraph-Beld8p6x.js}

@@ -1,9 +1,302 @@
 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 { jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle, Bell, Box, Cable, Camera, Check, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";
+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 { 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
@@ -124,51 +417,6 @@ function describeCron(expression) {
 	if (day !== null && day >= 1 && day <= 31) return `Monthly on the ${ordinal(day)} at ${time}`;
 	return raw;
 }
-// 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`;
-}
 // src/workflows/naming.ts
 /**
 * Human-facing naming for workflow nodes. A definition addresses things by
@@ -1744,180 +1992,749 @@ function NodeMark({ kind, provider, model, accent, tile }) {
 		})
 	});
 }
-// src/workflows/node-output.tsx
-/** Failure text, in the semantic danger token — which carries a light AND a dark
-*  value. A palette shade (`text-red-400`) only ever reads well in one theme. */
-const ERROR_TEXT = { color: "var(--surface-danger-text)" };
-/** Max key/value pairs a shallow-object output renders before it reports
-*  `truncated` — the card only has room for a couple rows anyway. */
-const MAX_JSON_ENTRIES = 6;
+// src/workflows/agent-hub-parts.tsx
 /**
-* A line that is pure structure — a code fence (with or without a language tag), a
-* table's rule row, a thematic break — and so carries no words to keep.
-*
-* Every test is a SINGLE quantified character class: unambiguous, and linear in the
-* length of the line. Written as one pattern (`[\s|:-]+\|[\s|:-]*`) the two
-* quantifiers would compete for the same `|`, which is the shape that backtracks.
-* Recognize the charset in one pass instead, then ask the cheap questions — is
-* there a pipe? a dash? — with plain string checks.
+* 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.
 */
-function isStructureOnly(line) {
-	if (/^(```|~~~)/.test(line)) return true;
-	const isBreak = /^([-*_])\1{2,}$/.test(line);
-	if (/^[\s|:-]+$/.test(line) && line.includes("|")) return line.includes("-");
-	return isBreak;
+/** 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
+	});
 }
-/**
-* Flatten an agent's markdown answer into the sentence a person would read out
-* of it. On a two-line card preview the syntax IS the noise: a `## Heading` mid
-* paragraph, a `**bold**` run and a bullet's `-` all survive the clamp while the
-* words that carry the meaning get pushed past it. Stripping the markup (never
-* the words) is what turns the preview back into prose — the full text, markup
-* and all, is still rendered by the node's detail view.
-*
-* Structure-only lines (a fence, a table rule) are dropped; everything else keeps
-* its text and is joined into one flowing line.
-*/
-function condenseText(text) {
-	const isListItem = (line) => /^\s*([-*+]\s|\d+[.)]\s)/.test(line);
-	return text.split("\n").map((line) => ({
-		item: isListItem(line),
-		text: line.replace(/^\s{0,3}#{1,6}\s+/, "").replace(/^\s{0,3}>\s?/, "").replace(/^\s*[-*+]\s+(\[[ xX]\]\s+)?/, "").replace(/^\s*\d+[.)]\s+/, "").trim()
-	})).filter(({ text: line }) => line !== "" && !isStructureOnly(line)).map(({ item, text: line }, i) => i > 0 && item ? `· ${line}` : line).join(" ").replace(/(?<=^|\s)(\*\*|~~)(?!\s)(.+?)(?<!\s)\1(?=[\s.,:;!?)\]}"']|$)/g, "$2").replace(/(?<![\w*])\*(?!\s)([^*]+?)(?<!\s)\*(?![\w*])/g, "$1").replace(/`([^`]+)`/g, "$1").replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\s+/g, " ").trim();
-}
-/** A single JSON value as a compact one-line string for the key/value render.
-*  Scalars render verbatim; a nested object/array collapses to a shape marker so
-*  one row never balloons into a wall of text. */
-function scalar(value) {
-	if (value === null) return "null";
-	if (typeof value === "string") return value;
-	if (typeof value === "number" || typeof value === "boolean") return String(value);
-	if (Array.isArray(value)) return `[${value.length} item${value.length === 1 ? "" : "s"}]`;
-	if (typeof value === "object") return "{…}";
-	return "";
+/** 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
 /**
-* Recover the shape of an output preview string. Only text that *begins* like
-* JSON (`{`/`[`) is parse-attempted, so ordinary prose starting with a brace-free
-* sentence is never mis-parsed. A begins-like-JSON string that fails to parse
-* (the host clamped it mid-value) still renders as `code`, not prose, so it keeps
-* its monospace/data affordance.
-*
-* `condenseMarkdown` says the prose IS markdown and may be flattened for the
-* preview ({@link condenseText}). It is OFF by default, and the caller must only
-* turn it on for text an agent actually authored as markdown. Applied to anything
-* else it does not merely look wrong — it silently REWRITES the text: a stack
-* trace's `__init__.py` loses its underscores, and a shell glob `src/**` pairs
-* with a later `**` and both vanish. An error message is the one string a person
-* reads to find out what broke; it must reach them exactly as it was thrown.
+* 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.
 */
-function classifyOutput(preview, condenseMarkdown = false) {
-	let trimmed = preview?.trim() ?? "";
-	trimmed = trimmed.replace(/[\uD800-\uDBFF](?![\uDC00-\uDFFF])/g, "").replace(/(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g, "").trimEnd();
-	if (trimmed === "") return { kind: "empty" };
-	if (trimmed.startsWith("{") || trimmed.startsWith("[")) try {
-		const parsed = JSON.parse(trimmed);
-		if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
-			const all = Object.entries(parsed);
-			const entries = all.slice(0, MAX_JSON_ENTRIES).map(([k, v]) => [k, scalar(v)]);
-			if (entries.length > 0) return {
-				kind: "json",
-				entries,
-				truncated: all.length > entries.length
-			};
+/** 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 {
-			kind: "code",
-			text: trimmed
-		};
-	} catch {
-		return {
-			kind: "code",
-			text: trimmed
+			x: (p.col - layout.minCol) * metrics.cellX + PAD_X,
+			y: (p.row - layout.minRow) * metrics.cellY + PAD_Y + metrics.hubTile / 2
 		};
-	}
-	if (!condenseMarkdown) return {
-		kind: "text",
-		text: trimmed
 	};
-	const condensed = condenseText(trimmed);
-	return condensed === "" ? { kind: "empty" } : {
-		kind: "text",
-		text: condensed
+	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))
+			})
+		]
+	});
 }
-/** Line-clamp utility per row budget, so `code`/`text` shapes honor `rows` the
-*  same way the JSON branch does (rather than always clamping to two). Covers the
-*  full range a card can reserve; an unsupported count falls back to the two-line
-*  clamp, which renders FEWER lines than the caller asked for — so a card whose
-*  reservation outgrows this map shows a short body inside a tall well rather
-*  than erroring. Extend the map when a design reserves more.
-*  Class names are literal so the Tailwind scanner emits each utility. */
-const CLAMP_BY_ROWS = {
-	1: "truncate",
-	2: "line-clamp-2",
-	3: "line-clamp-3",
-	4: "line-clamp-4",
-	5: "line-clamp-5",
-	6: "line-clamp-6"
-};
+// src/workflows/WorkflowGraphLazy.tsx
 /**
-* Render a classified output preview's CONTENT (no surrounding frame — each node
-* design supplies its own container/label). `rows` caps the visible lines so the
-* body stays within a card's reserved output space; `tone="error"` colors it for
-* a failure message.
+* 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.
 *
-* `rows="none"` renders the body UNCLAMPED, for a container that scrolls or is
-* sized by its content — a drawer, a detail panel, a selection overlay. It is a
-* word rather than a large number because there is no number that means "do not
-* clamp": a count outside {@link CLAMP_BY_ROWS} falls back to two lines, so
-* `rows={99}` asks for everything and silently shows the least.
+* 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.
 */
-function NodeOutputBody({ shape, rows = 2, tone = "default" }) {
-	const unclamped = rows === "none";
-	const clampClass = unclamped ? "" : CLAMP_BY_ROWS[rows] ?? "line-clamp-2";
-	const codeWrap = rows === 1 ? "" : "whitespace-pre-wrap break-all";
-	if (shape.kind === "empty") return null;
-	if (shape.kind === "json") {
-		const overflow = unclamped ? shape.truncated : shape.truncated || shape.entries.length > rows;
-		const visible = unclamped ? shape.entries : shape.entries.slice(0, overflow ? Math.max(0, rows - 1) : rows);
-		const isError = tone === "error";
-		const keyStyle = isError ? ERROR_TEXT : void 0;
-		const keyClass = isError ? "" : "text-muted-foreground";
-		const valueClass = isError ? "" : "text-foreground";
-		return /* @__PURE__ */ jsxs("dl", {
-			className: "space-y-0.5 font-mono text-[10.5px] leading-snug",
-			children: [visible.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
-				className: "flex gap-1.5",
-				children: [/* @__PURE__ */ jsx("dt", {
-					className: `max-w-[45%] shrink-0 truncate ${keyClass}`,
-					style: keyStyle,
-					title: key,
-					children: key
-				}), /* @__PURE__ */ jsx("dd", {
-					className: `min-w-0 flex-1 truncate ${valueClass}`,
-					style: isError ? ERROR_TEXT : void 0,
-					title: value,
-					children: value
-				})]
-			}, key)), overflow && /* @__PURE__ */ jsx("div", {
-				className: `text-[10px] ${keyClass}`,
-				style: keyStyle,
-				children: "…"
-			})]
+/** 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-CbIFufIK.js").then((m) => ({ default: m.WorkflowGraph }))));
+}
+var GraphErrorBoundary = class extends Component {
+	state = { hasError: false };
+	static getDerivedStateFromError() {
+		return { hasError: true };
 	}
-	if (shape.kind === "code") return /* @__PURE__ */ jsx("pre", {
-		className: `${clampClass} ${codeWrap} font-mono text-[10.5px] leading-snug ${tone === "error" ? "" : "text-foreground"}`,
-		style: tone === "error" ? ERROR_TEXT : void 0,
-		title: shape.text,
-		children: shape.text
+	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 })
+		})]
 	});
-	return /* @__PURE__ */ jsx("p", {
-		className: `${clampClass} text-[11px] leading-snug ${tone === "error" ? "" : "text-foreground"}`,
-		style: tone === "error" ? ERROR_TEXT : void 0,
-		title: shape.text,
-		children: shape.text
+}
+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-BHihTTsl.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))
+		})]
 	});
 }
-export { triggerNodeIndex as A, fmtTokens as B, COMPACT_NODE_SIZE as C, buildWorkflowGraph as D, branchNodeId as E, parseActionPath as F, shortModel as I, clampPreview as L, worstSeverity as M, actionPathLabel as N, isStructuralKind as O, humanizeIdentifier as P, fmtCost as R, statusBorder as S, actionNodeId as T, emptySlotLabel as _, NodeMark as a, problemSurface as b, RESTING_BORDER as c, STATUS_LABEL as d, STATUS_PILL as f, edgeColor as g, StatusPill$1 as h, KIND_ICON as i, wfEdgeId as j, triggerNodeId as k, RESTING_SHADOW as l, StatusFooter as m, classifyOutput as n, ProblemMarker as o, STATUS_TONE as p, condenseText as r, ProblemMessages as s, NodeOutputBody as t, STATUS_COLOR as u, kindAccent as v, TRIGGER_NODE_ID as w, problemTitle as x, problemBorder as y, fmtDuration as z };
+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 };