@tangle-network/charts 2.0.13 → 2.0.14

package/dist/react/agent-graph/index.js

@@ -0,0 +1,1191 @@
+import { D as statusMeta, E as runStatus, O as createLucideIcon, T as RunStatusIcon } from "../../flow-waterfall-model-DvrgPLGS.js";
+import { a as LIVE_AGENT_CARD, c as AgentMark, i as GRID_MIN_LEAVES, l as GraphMarksProvider, n as AGENT_CARD, o as buildAgentTopology, r as FRAME_CAPTION, s as layoutAgents, t as LatestEvents, u as ToolMark } from "../../latest-events-iiWwpIck.js";
+import { C as fmtCost, D as fmtTokens, E as fmtTokenTotal, S as clampPreview, T as fmtEventTime, _ as syncAmbient, a as motionAllowed, b as useMotionAllowed, c as humanizeIdentifier, d as loadElk, f as GraphErrorBoundary, g as ambientStyle, h as agentQuietActivity, i as SELECTION_OUTLINE, l as parseActionPath, m as activityTiming, n as RESTING_SHADOW, o as useColorMode, p as retryImport, r as edgeColor, s as actionPathLabel, t as RESTING_BORDER, u as shortModel, v as tokenMilliseconds, w as fmtDuration, x as useRunNow, y as useAttention } from "../../graph-style-fealnLLn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+//#region node_modules/lucide-react/dist/esm/icons/user.mjs
+/**
+* @license lucide-react v1.63.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$1 = {
+	name: "user",
+	size: 24,
+	node: [["path", {
+		d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",
+		key: "975kel"
+	}], ["circle", {
+		cx: "12",
+		cy: "7",
+		r: "4",
+		key: "17ys0d"
+	}]]
+};
+__iconData$1.node;
+const User = createLucideIcon(__iconData$1);
+//#endregion
+//#region node_modules/lucide-react/dist/esm/icons/x.mjs
+/**
+* @license lucide-react v1.63.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData = {
+	name: "x",
+	size: 24,
+	node: [["path", {
+		d: "M18 6 6 18",
+		key: "1bl5f8"
+	}], ["path", {
+		d: "m6 6 12 12",
+		key: "d8bk6v"
+	}]]
+};
+__iconData.node;
+const X = createLucideIcon(__iconData);
+//#endregion
+//#region src/react/agent-graph/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; flex-shrink: 0; 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; min-height: 0; border: 1px solid var(--ag-border); border-radius: var(--radius-container); background: var(--bg-root); overflow: auto; }
+.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: tangle-intro-enter 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; } }
+`;
+//#endregion
+//#region src/react/agent-graph/agent-hub-layout.ts
+/** The id the "You" node takes in `calls`. */
+const YOU_ID = "you";
+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
+	};
+}
+//#endregion
+//#region src/react/agent-graph/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") return /* @__PURE__ */ jsx(ToolMark, {
+		tool: entity.tool,
+		label: entity.label,
+		size
+	});
+	return /* @__PURE__ */ jsx(AgentMark, {
+		agent: entity.agent,
+		layout: "hub",
+		size
+	});
+}
+/** 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(container.scrollLeft + 8, Math.min(left, container.scrollLeft + container.clientWidth - dialog.offsetWidth - 8)),
+				top: Math.max(container.scrollTop + 8, Math.min(top, container.scrollTop + 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) }), /* @__PURE__ */ jsxs("span", {
+					title: calls === void 0 ? "Call history not reported" : void 0,
+					children: [
+						calls === void 0 ? "—" : lastMinute,
+						" ",
+						lastMinute === 1 ? "call" : "calls",
+						" in the last minute"
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/agent-graph/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(props) {
+	const { nodes, edges, tools = [], calls = [], you, now: nowProp, title = "Agent graph", selectedId, onSelect, className } = props;
+	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: agentQuietActivity(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 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" || agentQuietActivity(n, now));
+	const openNode = (id) => {
+		const next = open === id ? null : id;
+		setOpen(next);
+		if (next) onSelect?.(next);
+	};
+	useEffect(() => {
+		if (open) {
+			closeRef.current?.closest("[role=\"dialog\"]")?.scrollIntoView({ block: "nearest" });
+			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: props.calls === void 0 ? void 0 : 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: agentQuietActivity(n, now) ? "waiting" : n.status,
+								"aria-hidden": true
+							}),
+							n.label,
+							" ",
+							agentQuietActivity(n, now)?.label ?? statusMeta(n.status).label
+						]
+					}, n.id)),
+					/* @__PURE__ */ jsxs("span", {
+						className: "ag-stats",
+						children: [
+							/* @__PURE__ */ jsxs("span", { children: [
+								/* @__PURE__ */ jsx("b", { children: nodes.length }),
+								" ",
+								nodes.length === 1 ? "agent" : "agents"
+							] }),
+							/* @__PURE__ */ jsxs("span", {
+								title: props.tools === void 0 ? "Tool history not reported" : void 0,
+								children: [
+									/* @__PURE__ */ jsx("b", { children: props.tools?.length ?? "—" }),
+									" ",
+									tools.length === 1 ? "tool" : "tools"
+								]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								title: props.calls === void 0 ? "Call history not reported" : void 0,
+								children: [/* @__PURE__ */ jsx("b", { children: props.calls === void 0 ? "—" : 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))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/agent-graph/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-B74GN1o6.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: `agent-graph 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 AgentGraphBody(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: `agent-graph 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);
+}
+function AgentGraph(props) {
+	return /* @__PURE__ */ jsx(GraphMarksProvider, {
+		value: props,
+		children: /* @__PURE__ */ jsx(AgentGraphBody, { ...props })
+	});
+}
+//#endregion
+export { AGENT_CARD, AgentGraph, FRAME_CAPTION, GRID_MIN_LEAVES, GraphErrorBoundary, HUB_METRICS, LIVE_AGENT_CARD, LatestEvents, RESTING_BORDER, RESTING_SHADOW, SELECTION_OUTLINE, YOU_ID, actionPathLabel, activityTiming, agentQuietActivity, ambientStyle, buildAgentTopology, clampPreview, edgeColor, fmtCost, fmtDuration, fmtEventTime, fmtTokenTotal, fmtTokens, hubAgentId, humanizeIdentifier, layoutAgents, layoutHub, loadElk, motionAllowed, orthogonalPath, parseActionPath, retryImport, shortModel, syncAmbient, tokenMilliseconds, useAttention, useColorMode, useMotionAllowed, useRunNow };