@tangle-network/sandbox-ui 1.1.10 → 2.0.1

package/dist/AgentGraph-P7V_oEOv.js

@@ -0,0 +1,1369 @@
+import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
+import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Component, Suspense, lazy, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Bot, User, Wrench, X } from "lucide-react";
+import { RunStatusIcon, runStatus, statusMeta } from "@tangle-network/ui/run";
+// src/workflows/run-ui-state.ts
+const listeners = /* @__PURE__ */ new Set();
+let clock = Date.now();
+let timer;
+function tick() {
+	clock = Date.now();
+	for (const listener of listeners) listener();
+	timer = setTimeout(tick, 1e3 - Date.now() % 1e3);
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	if (listeners.size === 1) tick();
+	return () => {
+		listeners.delete(listener);
+		if (!listeners.size) clearTimeout(timer);
+	};
+}
+const noSubscribe = () => () => {};
+function useRunNow(fixed) {
+	const now = useSyncExternalStore(fixed === void 0 ? subscribe : noSubscribe, () => fixed ?? clock, () => fixed ?? 0);
+	return fixed ?? now;
+}
+const motionQuery = () => typeof matchMedia === "undefined" ? null : matchMedia("(prefers-reduced-motion: reduce)");
+const subscribeMotion = (listener) => {
+	const query = motionQuery();
+	query?.addEventListener("change", listener);
+	return () => query?.removeEventListener("change", listener);
+};
+function useMotionAllowed() {
+	return useSyncExternalStore(subscribeMotion, () => motionQuery()?.matches === false, () => false);
+}
+function tokenMilliseconds(token, element) {
+	if (typeof document === "undefined") return 0;
+	const value = getComputedStyle(element ?? document.documentElement).getPropertyValue(token).trim();
+	return (parseFloat(value) || 0) * (value.endsWith("ms") ? 1 : 1e3);
+}
+const ambientStyle = { animation: "tangle-breathe var(--motion-ambient) infinite" };
+/** The document timeline is the page's epoch, including marks mounted later. */
+function syncAmbient(event) {
+	for (const animation of event.currentTarget.getAnimations()) if (animation.animationName === "tangle-breathe") animation.startTime = 0;
+}
+function activityTiming(agent) {
+	const times = Number.isFinite(agent.lastActivityAt) && Number.isFinite(agent.medianEventGapMs) && agent.medianEventGapMs >= 0 ? [] : (agent.events ?? []).flatMap((e) => e.at != null && Number.isFinite(e.at) ? [e.at] : []).sort((a, b) => a - b);
+	const last = Number.isFinite(agent.lastActivityAt) ? agent.lastActivityAt : times.at(-1);
+	const gaps = times.slice(1).map((time, i) => time - times[i]).sort((a, b) => a - b);
+	const middle = Math.floor(gaps.length / 2);
+	return {
+		lastActivityAt: last,
+		medianEventGapMs: Number.isFinite(agent.medianEventGapMs) && agent.medianEventGapMs >= 0 ? agent.medianEventGapMs : gaps.length ? gaps.length % 2 ? gaps[middle] : (gaps[middle - 1] + gaps[middle]) / 2 : 0
+	};
+}
+function quietActivity(agent, now) {
+	if (agent.status !== "running") return null;
+	const { lastActivityAt, medianEventGapMs } = activityTiming(agent);
+	if (lastActivityAt == null || !Number.isFinite(lastActivityAt)) return null;
+	const quietMs = Math.max(0, now - lastActivityAt);
+	return quietMs > Math.max(3e5, 3 * medianEventGapMs) ? {
+		quietMs,
+		label: `Quiet ${Math.floor(quietMs / 6e4)}m`
+	} : null;
+}
+/** Attention is finite and state changes work without animation completion. */
+function useAttention(ref, status) {
+	const allowed = useMotionAllowed();
+	useEffect(() => {
+		const element = ref.current;
+		if (!element || !allowed || status !== "needs-you" && status !== "failed") return;
+		const token = statusMeta(status).token;
+		const duration = tokenMilliseconds("--duration-ambient", element) * (status === "needs-you" ? .45 : .3);
+		element.dataset.attn = status;
+		const shadow = getComputedStyle(element).boxShadow;
+		const resting = shadow === "none" ? "" : `, ${shadow}`;
+		const animation = element.animate([{ boxShadow: `0 0 0 0 color-mix(in srgb, var(${token}) 40%, transparent)${resting}` }, { boxShadow: `0 0 0 6px transparent${resting}` }], {
+			duration,
+			iterations: status === "needs-you" ? 2 : 1,
+			easing: getComputedStyle(element).getPropertyValue("--ease-exit").trim() || "ease-out"
+		});
+		const end = setTimeout(() => {
+			delete element.dataset.attn;
+		}, duration * (status === "needs-you" ? 2 : 1));
+		return () => {
+			animation.cancel();
+			clearTimeout(end);
+			delete element.dataset.attn;
+		};
+	}, [
+		ref,
+		status,
+		allowed
+	]);
+}
+// src/workflows/agent-hub-css.ts
+/** Hub styles consume Brand's status, elevation, radius and motion roles. */
+const AGENT_HUB_CSS = `
+.ag-root { --ag-surface: var(--bg-card); --ag-fg: var(--text-primary); --ag-muted: var(--text-muted); --ag-border: var(--border-default); --ag-accent: var(--brand-primary);
+  color: var(--ag-fg); font-size: 12px; line-height: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.ag-root * { box-sizing: border-box; }
+.ag-head, .ag-title, .ag-chip, .ag-legend li, .ag-pop-head, .ag-pop-foot { display: flex; align-items: center; gap: 8px; }
+.ag-head { flex-wrap: wrap; min-height: 40px; }
+.ag-title, .ag-pop-name { font-weight: 600; font-size: 14px; line-height: 20px; }
+.ag-title-mark { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ag-accent); }
+.ag-chip, .ag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--ag-border); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; min-height: 24px; background: transparent; color: var(--ag-muted); }
+.ag-chip { cursor: pointer; }
+.ag-chip-needs-you, .ag-pill-needs-you { color: var(--surface-warning-text); }
+.ag-chip-failed, .ag-pill-failed { color: var(--surface-danger-text); }
+.ag-pill-succeeded { color: var(--surface-success-text); }
+.ag-stats { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
+.ag-stats b, .ag-pop-call b, .ag-pop-foot b { color: var(--ag-fg); font-weight: 500; }
+.ag-canvas-wrap { position: relative; border: 1px solid var(--ag-border); border-radius: var(--radius-container); background: var(--bg-root); overflow: hidden; }
+.ag-canvas { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; }
+.ag-edges { position: absolute; inset: 0; overflow: visible; }
+.ag-edge { fill: none; stroke: color-mix(in srgb, var(--ag-muted) 80%, transparent); stroke-width: 1.25; }
+.ag-edge-live, .ag-flow { fill: none; stroke-linecap: round; }
+.ag-edge-live { stroke-width: 1.25; }
+.ag-flow { stroke-width: 2; }
+.ag-root g, .ag-node { transition: opacity var(--motion-control); }
+.ag-dimmed .ag-tile { opacity: .45; } .ag-edges .ag-dimmed { opacity: .32; }
+.ag-node { position: absolute; display: flex; flex-direction: column; align-items: center; width: 176px; margin-left: -88px; 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); flex-shrink: 0; border-radius: var(--radius-card); background: var(--ag-surface); border: 1px solid var(--ag-border); box-shadow: var(--shadow-card); transition: box-shadow var(--motion-control); }
+.ag-node:hover .ag-tile { box-shadow: var(--shadow-dropdown); }
+.ag-model-mark { display: grid; place-items: center; width: 20px; height: 20px; filter: grayscale(1) var(--tw-invert,); color: var(--ag-muted); } .ag-model-mark img, .ag-model-mark svg { max-width: 20px; max-height: 20px; } .ag-node:hover .ag-model-mark { filter: var(--tw-invert, none); } .ag-node:not(:hover) .ag-model-mark svg path { fill: currentColor; }
+.ag-node:focus-visible, .ag-selected .ag-tile, .ag-close:focus-visible, .ag-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--ag-fg) 70%, transparent); outline-offset: 2px; }
+.ag-node[style*="--ag-tone"] .ag-tile { border: 1.5px solid var(--ag-tone); }
+.ag-node-you .ag-tile { background: var(--ag-fg); color: var(--ag-surface); }
+.ag-name, .ag-sub { max-width: 176px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ag-name { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 20px; }
+.ag-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
+.ag-node-tool .ag-name { max-width: 132px; }
+.ag-sub, .ag-node-tool .ag-name { font-size: 12px; font-weight: 400; color: var(--ag-muted); } .ag-canvas .ag-sub { font-size: 13px; line-height: 17px; }
+.ag-badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; background: var(--ag-surface); border-radius: var(--radius-pill); box-shadow: 0 0 0 2px var(--ag-surface); }
+.ag-root [data-activity="quiet"] .ag-running-dot { animation: none !important; }
+.ag-running-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-info-text); animation: tangle-breathe var(--motion-ambient) infinite; }
+.ag-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; color: var(--ag-muted); }
+.ag-legend-line { width: 14px; height: 2px; border-radius: var(--radius-pill); }
+.ag-popover { overflow: auto; position: absolute; z-index: 5; width: min(280px, calc(100% - 16px)); padding: 12px; border-radius: var(--radius-card); background: var(--bg-elevated); color: var(--ag-fg); border: 1px solid var(--ag-border); box-shadow: var(--shadow-overlay); animation: agent-arrive var(--motion-arrive); }
+.ag-tile-mini { border-radius: var(--radius-control); box-shadow: none; }
+.ag-tile-micro { border: 0; border-radius: var(--radius-tag); background: none; box-shadow: none; }
+.ag-pop-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.ag-pop-sub, .ag-pop-call { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ag-muted); }
+.ag-close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-control); background: none; color: var(--ag-muted); cursor: pointer; }
+.ag-close:hover { background: var(--bg-hover); color: var(--ag-fg); }
+.ag-pop-summary { overflow-wrap: anywhere; margin: 8px 0 0; font-size: 14px; line-height: 20px; }
+.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; min-width: 0; }
+.ag-pop-dir, .ag-pop-time { color: var(--ag-muted); flex-shrink: 0; }
+.ag-pop-call { flex: 1; min-width: 0; }
+.ag-pop-time { 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); color: var(--ag-muted); }
+.ag-mobile { list-style: none; margin: 0; padding: 8px; display: grid; gap: 12px; }
+.ag-mobile .ag-node { position: relative; left: auto !important; top: auto !important; margin: 0; width: 100%; min-height: 48px; display: grid; grid-template-columns: 32px minmax(0,1fr); text-align: left; column-gap: 12px; }
+.ag-mobile .ag-tile { grid-row: span 2; }
+.ag-mobile .ag-name, .ag-mobile .ag-sub { max-width: 100%; width: 100%; margin: 0; }
+.ag-mobile .ag-sub { display: block; white-space: nowrap; }
+.ag-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 44px; }
+.ag-tools button { color: var(--ag-muted); background: transparent; border: 1px solid var(--ag-border); border-radius: var(--radius-pill); min-height: 28px; padding: 0 8px; font: inherit; cursor: pointer; }
+.ag-available { padding: 8px; border-top: 1px solid var(--ag-border); color: var(--ag-muted); } .ag-available .ag-tools { margin: 8px 0 0; }
+.ag-list-mode .ag-popover { overflow: auto; position: relative; left: auto !important; top: auto !important; width: auto; margin: 8px; }
+@media (prefers-reduced-motion: reduce) { .ag-root *, .ag-root *::before { animation: none !important; transition: opacity var(--duration-fast) !important; } .ag-root .ag-running-dot { animation: tangle-breathe var(--motion-ambient) infinite !important; } }
+`;
+const HUB_METRICS = {
+	cellX: 184,
+	cellY: 140,
+	tile: 48,
+	hubTile: 60,
+	label: 34
+};
+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]);
+		cell.set(tool.id, placements.at(-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))
+	};
+}
+/**
+* A short rounded Manhattan route around tile and label bounds. Departure lanes
+* separate parallel calls; the path length keeps finite trips at a consistent speed.
+*/
+function orthogonalPath(a, b, verticalFirst, lane = 0, radius = 10, obstacles = []) {
+	const clear = (p, q) => obstacles.every((rect) => p.x === q.x ? p.x <= rect.left || p.x >= rect.right || Math.max(p.y, q.y) <= rect.top || Math.min(p.y, q.y) >= rect.bottom : p.y <= rect.top || p.y >= rect.bottom || Math.max(p.x, q.x) <= rect.left || Math.min(p.x, q.x) >= rect.right);
+	const xs = [.../* @__PURE__ */ new Set([
+		a.x + lane,
+		(a.x + b.x) / 2,
+		...obstacles.flatMap((rect) => [rect.left - 8, rect.right + 8])
+	])];
+	const ys = [.../* @__PURE__ */ new Set([
+		a.y + lane,
+		(a.y + b.y) / 2,
+		...obstacles.flatMap((rect) => [rect.top - 8, rect.bottom + 8])
+	])];
+	const candidates = [[
+		a,
+		{
+			x: a.x,
+			y: b.y
+		},
+		b
+	], [
+		a,
+		{
+			x: b.x,
+			y: a.y
+		},
+		b
+	]];
+	for (const x of xs) candidates.push([
+		a,
+		{
+			x,
+			y: a.y
+		},
+		{
+			x,
+			y: b.y
+		},
+		b
+	]);
+	for (const y of ys) candidates.push([
+		a,
+		{
+			x: a.x,
+			y
+		},
+		{
+			x: b.x,
+			y
+		},
+		b
+	]);
+	for (const x of xs) for (const y of ys) candidates.push([
+		a,
+		{
+			x: a.x,
+			y
+		},
+		{
+			x,
+			y
+		},
+		{
+			x,
+			y: b.y
+		},
+		b
+	], [
+		a,
+		{
+			x,
+			y: a.y
+		},
+		{
+			x,
+			y
+		},
+		{
+			x: b.x,
+			y
+		},
+		b
+	]);
+	let points = candidates[verticalFirst ? 0 : 1], best = Infinity;
+	for (const candidate of candidates) {
+		const path = candidate.filter((p, i) => !i || p.x !== candidate[i - 1].x || p.y !== candidate[i - 1].y);
+		if (!path.slice(1).every((point, i) => clear(path[i], point))) continue;
+		const distance = path.slice(1).reduce((sum, point, i) => sum + Math.abs(point.x - path[i].x) + Math.abs(point.y - path[i].y), 0);
+		const trunk = path.find((point, i) => i && point.y !== path[i - 1].y)?.x ?? a.x;
+		const score = distance + path.length + (lane ? Math.abs(trunk - a.x - lane) : 0);
+		if (score < best) {
+			best = score;
+			points = path;
+		}
+	}
+	points = points.filter((point, i) => !i || i === points.length - 1 || !(points[i - 1].x === point.x && point.x === points[i + 1].x || points[i - 1].y === point.y && point.y === points[i + 1].y));
+	let d = `M${a.x},${a.y}`, length = 0;
+	for (let i = 1; i < points.length; i++) {
+		const previous = points[i - 1], point = points[i], next = points[i + 1];
+		const incoming = Math.hypot(point.x - previous.x, point.y - previous.y);
+		length += incoming;
+		if (!next) {
+			d += ` L${point.x},${point.y}`;
+			continue;
+		}
+		const outgoing = Math.hypot(next.x - point.x, next.y - point.y), r = Math.min(radius, incoming / 2, outgoing / 2);
+		d += ` L${point.x - Math.sign(point.x - previous.x) * r},${point.y - Math.sign(point.y - previous.y) * r} Q${point.x},${point.y} ${point.x + Math.sign(next.x - point.x) * r},${point.y + Math.sign(next.y - point.y) * r}`;
+		length -= 2 * r - Math.PI * r / 2;
+	}
+	return {
+		d,
+		length
+	};
+}
+// 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`;
+}
+function fmtEventTime(at, now, frozen = false) {
+	if (at == null || !Number.isFinite(at)) return "—";
+	if (frozen) return new Date(at).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	});
+	const seconds = Math.max(0, Math.floor((now - at) / 1e3));
+	return seconds < 5 ? "now" : seconds < 60 ? `${seconds}s` : seconds < 3600 ? `${Math.floor(seconds / 60)}m` : `${Math.floor(seconds / 3600)}h`;
+}
+// src/workflows/agent-hub-parts.tsx
+/** Hub nodes and call details share the run status vocabulary. */
+/** One colour per call kind, shared by edges, the legend and popover rows. */
+const CALL_COLOR = {
+	call: "var(--brand-primary)",
+	answer: `var(${statusMeta("done").token})`,
+	"needs-you": `var(${statusMeta("needs-you").token})`,
+	failed: `var(${statusMeta("failed").token})`
+};
+const CALL_LABEL = {
+	call: "Call",
+	answer: "Answer",
+	"needs-you": statusMeta("needs-you").label,
+	failed: statusMeta("failed").label
+};
+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: "ag-model-mark"
+		});
+	}
+	const brand = entity.agent?.model ? modelBrandFor(entity.agent.model) : null;
+	return brand ? /* @__PURE__ */ jsx("span", {
+		className: "ag-model-mark",
+		children: /* @__PURE__ */ jsx(ModelBrandStack, {
+			identity: brand,
+			size: "sm"
+		})
+	}) : /* @__PURE__ */ jsx(Bot, {
+		size: 16,
+		"aria-hidden": true
+	});
+}
+/** Running has one quiet opacity signal; all other states use the shared glyph. */
+function StatusBadge({ status, quiet }) {
+	if (!status) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "ag-badge",
+		children: runStatus(status) === "running" ? /* @__PURE__ */ jsx("span", {
+			className: "ag-running-dot",
+			"data-motion": "essential",
+			"aria-label": "Running",
+			style: quiet ? {
+				animation: "none",
+				background: "var(--ag-muted)"
+			} : ambientStyle,
+			onAnimationStart: syncAmbient
+		}) : /* @__PURE__ */ jsx(RunStatusIcon, { status })
+	});
+}
+function HubNode({ entity, x, y, tile, dimmed, selected, buttonRef, onOpen, onHover, onKeyDown }) {
+	const attentionRef = useRef(null);
+	useAttention(attentionRef, entity.status ?? "unknown");
+	const tone = entity.status === "needs-you" || entity.status === "failed" ? `var(${statusMeta(entity.status).token})` : void 0;
+	const sub = entity.quiet ?? (entity.status === "needs-you" ? "Needs you · Respond" : entity.status === "waiting" ? entity.agent?.turn || "Waiting on peer" : entity.status === "failed" ? entity.agent?.result ?? entity.agent?.turn ?? "Failure cause not recorded" : entity.sub ? `${statusMeta(entity.status ?? "unknown").label} · ${entity.sub}` : entity.status ? statusMeta(entity.status).label : void 0);
+	return /* @__PURE__ */ jsxs("button", {
+		ref: (el) => {
+			attentionRef.current = el;
+			if (typeof buttonRef === "function") buttonRef(el);
+			else if (buttonRef) buttonRef.current = el;
+		},
+		type: "button",
+		"data-agent-graph-node": entity.id,
+		"data-kind": entity.kind,
+		"data-status": entity.status,
+		"data-activity": entity.quiet ? "quiet" : void 0,
+		"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,
+					quiet: entity.quiet
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ag-name",
+				children: entity.label
+			}),
+			sub && /* @__PURE__ */ jsx("span", {
+				className: "ag-sub",
+				style: tone ? { color: tone } : void 0,
+				children: entity.quiet ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					statusMeta(entity.status ?? "running").label,
+					" · ",
+					/* @__PURE__ */ jsx("span", {
+						style: { color: "var(--surface-warning-text)" },
+						children: sub
+					})
+				] }) : 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 element = useRef(null);
+	const [fitted, setFitted] = useState({
+		left,
+		top
+	});
+	useLayoutEffect(() => {
+		const dialog = element.current, container = dialog?.parentElement;
+		if (!dialog || !container) return;
+		const fit = () => {
+			const relative = getComputedStyle(dialog).position !== "absolute";
+			const maxHeight = Math.max(0, container.clientHeight - 16);
+			const height = Math.min(dialog.scrollHeight + dialog.offsetHeight - dialog.clientHeight, maxHeight);
+			const next = relative ? {
+				left,
+				top
+			} : {
+				left: Math.max(8, Math.min(left, container.clientWidth - dialog.offsetWidth - 8)),
+				top: Math.max(8, Math.min(top, container.clientHeight - height - 8)),
+				maxHeight
+			};
+			setFitted((previous) => previous.left === next.left && previous.top === next.top && previous.maxHeight === next.maxHeight ? previous : next);
+		};
+		fit();
+		const observer = new ResizeObserver(fit);
+		observer.observe(dialog);
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [left, top]);
+	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 ? statusMeta(entity.status).label : void 0;
+	const cost = entity.agent?.costUsd;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: element,
+		role: "dialog",
+		"aria-label": `${entity.label} calls`,
+		className: "ag-popover",
+		style: fitted,
+		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.agent?.model || entity.sub || entity.tool?.detail) && /* @__PURE__ */ jsx("span", {
+							className: "ag-pop-sub",
+							children: entity.agent?.model ?? entity.tool?.detail ?? entity.sub
+						})]
+					}),
+					status && /* @__PURE__ */ jsxs("span", {
+						className: `ag-pill ag-pill-${entity.status}`,
+						children: [entity.status === "running" && !entity.quiet ? /* @__PURE__ */ jsx("span", {
+							className: "ag-running-dot",
+							"data-motion": "essential",
+							style: ambientStyle,
+							onAnimationStart: syncAmbient
+						}) : /* @__PURE__ */ jsx(RunStatusIcon, {
+							status: entity.quiet ? "waiting" : entity.status,
+							"aria-hidden": true
+						}), entity.quiet ?? 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("span", {
+								className: "ag-running-dot",
+								"data-motion": "essential",
+								"aria-label": "Running",
+								style: ambientStyle,
+								onAnimationStart: syncAmbient
+							}) : 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/AgentHubCanvas.tsx
+/** The hub presents agent and tool calls on a stable canvas or a readable list. */
+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 CallStroke({ call, d, length, now, forward, animate }) {
+	const ref = useRef(null);
+	const routeRef = useRef(null);
+	const [chevron, setChevron] = useState();
+	const end = call.durationMs == null ? Infinity : call.startedAt + call.durationMs;
+	const returning = now >= end;
+	useLayoutEffect(() => {
+		const path = routeRef.current;
+		if (!path) return;
+		const middle = path.getTotalLength() / 2, point = path.getPointAtLength(middle), before = path.getPointAtLength(middle - 1), after = path.getPointAtLength(middle + 1);
+		const ambient = tokenMilliseconds("--duration-ambient", path);
+		setChevron({
+			x: point.x,
+			y: point.y,
+			angle: Math.atan2(after.y - before.y, after.x - before.x) * 180 / Math.PI + (forward === returning ? 180 : 0),
+			travel: Math.min(ambient * .9, Math.max(ambient * .3, length / 320 * 1e3)),
+			decay: ambient * 4
+		});
+	}, [
+		d,
+		length,
+		forward,
+		returning
+	]);
+	useEffect(() => {
+		const el = ref.current;
+		const duration = chevron?.travel;
+		if (!el || !animate || call.kind === "failed" || !duration) return;
+		const age = now - (returning ? end : call.startedAt);
+		if (age > duration) return;
+		const reverse = forward === returning;
+		const animation = el.animate([{
+			strokeDashoffset: reverse ? -length : 24,
+			opacity: .35
+		}, {
+			strokeDashoffset: reverse ? 24 : -length,
+			opacity: .35
+		}], {
+			duration,
+			easing: "linear"
+		});
+		animation.currentTime = Math.max(0, age);
+		return () => animation.cancel();
+	}, [
+		call.id,
+		returning,
+		animate,
+		length,
+		forward,
+		chevron?.travel
+	]);
+	const age = Math.max(0, now - end);
+	const tint = returning ? Math.max(0, .55 * (1 - age / (chevron?.decay || 1))) : .55;
+	return /* @__PURE__ */ jsxs("g", {
+		"data-call-id": call.id,
+		"data-direction": forward !== returning ? "forward" : "return",
+		style: { stroke: CALL_COLOR[call.kind] },
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				ref: routeRef,
+				d,
+				className: "ag-edge-live",
+				opacity: tint
+			}),
+			chevron && /* @__PURE__ */ jsx("path", {
+				"data-call-arrow": true,
+				opacity: returning ? tint / .55 : 1,
+				d: "M-3,-3 L1,0 L-3,3",
+				fill: "none",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				transform: `translate(${chevron.x},${chevron.y}) rotate(${chevron.angle})`
+			}),
+			animate && /* @__PURE__ */ jsx("path", {
+				ref,
+				d,
+				className: "ag-flow",
+				strokeDasharray: `24 ${length}`,
+				opacity: 0
+			})
+		]
+	});
+}
+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 = useRunNow(nowProp);
+	const [hover, setHover] = useState(null);
+	const [open, setOpen] = useState(selectedId ?? null);
+	const buttons = useRef(/* @__PURE__ */ new Map());
+	const closeRef = useRef(null);
+	const animate = useMotionAllowed();
+	const visibleCalls = useMemo(() => calls.filter((c) => c.startedAt <= now), [calls, now]);
+	const nextLayout = useMemo(() => layoutHub({
+		nodes,
+		edges,
+		tools,
+		calls,
+		you: Boolean(you)
+	}), [
+		nodes,
+		edges,
+		tools,
+		calls,
+		you
+	]);
+	const layoutKey = JSON.stringify(nextLayout);
+	const layoutRef = useRef({
+		key: layoutKey,
+		layout: nextLayout
+	});
+	if (layoutRef.current.key !== layoutKey) layoutRef.current = {
+		key: layoutKey,
+		layout: nextLayout
+	};
+	const layout = layoutRef.current.layout;
+	const callSummaries = useMemo(() => {
+		const summaries = {
+			call: /* @__PURE__ */ new Map(),
+			answer: /* @__PURE__ */ new Map(),
+			"needs-you": /* @__PURE__ */ new Map()
+		};
+		for (const call of visibleCalls) if (call.kind !== "failed") {
+			const bucket = summaries[call.kind], id = call.kind === "call" ? call.to : call.from;
+			if (!bucket.has(id) || bucket.get(id).startedAt < call.startedAt) bucket.set(id, call);
+		}
+		return summaries;
+	}, [visibleCalls]);
+	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 = HUB_METRICS;
+	const { w, h } = span(metrics);
+	const list = width > 0 && (width < 600 || width / w < .85);
+	const scale = width ? Math.max(.85, 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.status === "succeeded" ? agent.result ?? callSummaries.answer.get(agent.id)?.label : void 0) ?? agent.turn ?? (agent.status === "needs-you" ? callSummaries["needs-you"].get(agent.id)?.label : void 0) ?? callSummaries.call.get(agent.id)?.label ?? void 0,
+				status: agent.status,
+				quiet: quietActivity(agent, now)?.label,
+				agent
+			});
+		}
+		return map;
+	}, [
+		layout,
+		nodes,
+		tools,
+		you,
+		now,
+		callSummaries
+	]);
+	const { positions, routes } = useMemo(() => {
+		const positions = new Map(layout.placements.map((p) => [p.id, {
+			x: (p.col - layout.minCol) * metrics.cellX + PAD_X,
+			y: (p.row - layout.minRow) * metrics.cellY + PAD_Y + metrics.hubTile / 2,
+			tile: p.kind === "hub" ? metrics.hubTile : p.kind === "you" ? metrics.tile - 8 : metrics.tile
+		}]));
+		const bounds = layout.placements.map((p) => {
+			const { x, y, tile } = positions.get(p.id);
+			return {
+				id: p.id,
+				tile: {
+					left: x - tile / 2 - 4,
+					right: x + tile / 2 + 4,
+					top: y - tile / 2 - 4,
+					bottom: y + tile / 2 + 4
+				},
+				label: {
+					left: x - (p.kind === "tool" || p.kind === "you" ? 70 : 92),
+					right: x + (p.kind === "tool" || p.kind === "you" ? 70 : 92),
+					top: y + tile / 2 + 4,
+					bottom: y + tile / 2 + (p.kind === "tool" || p.kind === "you" ? 30 : 64)
+				}
+			};
+		});
+		let lanes = 0;
+		return {
+			positions,
+			routes: new Map(layout.links.map((link) => {
+				const a = positions.get(link.from), b = positions.get(link.to);
+				const lane = layout.placements.find((p) => p.id === link.from)?.kind === "hub" ? (++lanes % 2 ? -1 : 1) * Math.ceil(lanes / 2) * 12 : 0;
+				return [`${link.from}|${link.to}`, orthogonalPath(a, b, b.y < a.y, lane, 10, bounds.flatMap((rect) => [...rect.id === link.from || rect.id === link.to ? [] : [rect.tile], rect.label]))];
+			}))
+		};
+	}, [layout, metrics]);
+	const at = (id) => positions.get(id);
+	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;
+		return latest;
+	};
+	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 availableTools = tools.filter((tool) => !visibleCalls.some((call) => call.from === tool.id || call.to === tool.id));
+	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 && Number.isFinite(c) && c >= 0) ? costs.reduce((s, c) => s + (c ?? 0), 0) : void 0;
+	const chips = nodes.filter((n) => n.status === "needs-you" || n.status === "failed" || quietActivity(n, now));
+	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);
+			buttons.current.get(id)?.focus();
+			return;
+		}
+		if (event.key === "Home") {
+			event.preventDefault();
+			nodes[0] && buttons.current.get(nodes[0].id)?.focus();
+			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 = list ? 8 : 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 ?? openEntity.sub ?? 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();
+			}
+		});
+	})();
+	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("button", {
+						type: "button",
+						className: `ag-chip ag-chip-${n.status}`,
+						onClick: () => openNode(n.id),
+						children: [
+							/* @__PURE__ */ jsx(RunStatusIcon, {
+								status: quietActivity(n, now) ? "waiting" : n.status,
+								"aria-hidden": true
+							}),
+							n.label,
+							" ",
+							quietActivity(n, now)?.label ?? statusMeta(n.status).label
+						]
+					}, 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" : "Total recorded agent cost",
+								children: [/* @__PURE__ */ jsx("b", { children: cost === void 0 ? "—" : fmtCost(cost) }), " cost"]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: wrap,
+				className: `ag-canvas-wrap${list ? " ag-list-mode" : ""}`,
+				style: list ? void 0 : { height: h * scale },
+				onKeyDown: (e) => {
+					if (e.key === "Escape") setOpen(null);
+				},
+				children: [list ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ul", {
+					className: "ag-mobile",
+					children: [...entities.values()].filter((e) => e.agent).sort((a, b) => {
+						const rank = (e) => e.status === "needs-you" ? 0 : e.status === "failed" ? 1 : e.quiet ? 2 : e.status === "waiting" ? 3 : e.status === "running" ? 4 : 5;
+						return rank(a) - rank(b);
+					}).map((entity) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(HubNode, {
+						entity,
+						x: 0,
+						y: 0,
+						tile: 32,
+						dimmed: false,
+						selected: open === entity.id,
+						buttonRef: (el) => {
+							if (el) buttons.current.set(entity.id, el);
+							else buttons.current.delete(entity.id);
+						},
+						onOpen: () => openNode(entity.id),
+						onHover: () => {},
+						onKeyDown: keydown(entity.id)
+					}), /* @__PURE__ */ jsx("div", {
+						className: "ag-tools",
+						children: tools.filter((t) => visibleCalls.some((c) => c.from === entity.id && c.to === t.id || c.to === entity.id && c.from === t.id)).map((t) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => openNode(t.id),
+							children: t.label
+						}, t.id))
+					})] }, entity.id))
+				}), availableTools.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "ag-available",
+					children: [/* @__PURE__ */ jsx("span", { children: "Available tools" }), /* @__PURE__ */ jsx("div", {
+						className: "ag-tools",
+						children: availableTools.map((tool) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => openNode(tool.id),
+							children: tool.label
+						}, tool.id))
+					})]
+				})] }) : /* @__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 { d, length } = routes.get(`${l.from}|${l.to}`);
+							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(CallStroke, {
+									call: live,
+									d,
+									length,
+									now,
+									forward,
+									animate
+								})]
+							}, `${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]
+			}),
+			!list && /* @__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-BcGSF2W_.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-BwFppclI.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 { fmtDuration as a, fmtTokens as c, quietActivity as d, syncAmbient as f, useRunNow as g, useMotionAllowed as h, fmtCost as i, activityTiming as l, useAttention as m, WorkflowGraph as n, fmtEventTime as o, tokenMilliseconds as p, clampPreview as r, fmtTokenTotal as s, AgentGraph as t, ambientStyle as u };