@tangle-network/charts 2.0.12 → 2.0.14

package/dist/AgentGraphCanvas-B74GN1o6.js

@@ -0,0 +1,1184 @@
+import { D as statusMeta, O as createLucideIcon, T as RunStatusIcon } from "./flow-waterfall-model-DvrgPLGS.js";
+import { a as LIVE_AGENT_CARD, c as AgentMark, d as Wrench, n as AGENT_CARD, o as buildAgentTopology, s as layoutAgents, t as LatestEvents } from "./latest-events-iiWwpIck.js";
+import { C as fmtCost, E as fmtTokenTotal, T as fmtEventTime, _ as syncAmbient, b as useMotionAllowed, g as ambientStyle, h as agentQuietActivity, i as SELECTION_OUTLINE, n as RESTING_SHADOW, o as useColorMode, r as edgeColor, t as RESTING_BORDER, u as shortModel, v as tokenMilliseconds, x as useRunNow, y as useAttention } from "./graph-style-fealnLLn.js";
+import { t as MOTION_CONTROL } from "./motion-DILryczn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Position, ReactFlow, useInternalNode } from "@xyflow/react";
+//#region node_modules/lucide-react/dist/esm/icons/chevron-down.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: "chevron-down",
+	size: 24,
+	node: [["path", {
+		d: "m6 9 6 6 6-6",
+		key: "qrunsl"
+	}]]
+};
+__iconData.node;
+const ChevronDown = createLucideIcon(__iconData);
+//#endregion
+//#region src/react/agent-graph/agent-graph-parts.tsx
+/**
+* What `AgentGraph` draws: an agent's card, the frame around a grid of leaf
+* workers, and the curved edge a message or delegation travels along.
+*
+* The visual vocabulary is the workflow graph's own (`node-ui.tsx`): the same
+* model brand mark, status colours, resting elevation and selection ring, so an
+* agent run and a workflow run read as one system.
+*/
+/** Workflow state adaptation stays at its boundary; agent states use ui directly. */
+function agentStatus(status) {
+	const meta = statusMeta(status);
+	const flow = status === "needs-you" ? "waiting" : status === "waiting" || status === "idle" || status === "unknown" ? "queued" : status === "stopped" ? "succeeded" : status;
+	return {
+		...meta,
+		color: `var(${meta.token})`,
+		flow
+	};
+}
+function StatusGlyph({ status, size }) {
+	return status === "running" ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-motion": "essential",
+		className: "ag-running-dot",
+		style: ambientStyle,
+		onAnimationStart: syncAmbient
+	}) : /* @__PURE__ */ jsx(RunStatusIcon, {
+		status,
+		size,
+		"aria-hidden": true
+	});
+}
+function cardBorder(status) {
+	if (status === "needs-you" || status === "failed") return {
+		borderColor: agentStatus(status).color,
+		borderWidth: status === "needs-you" ? 1.5 : 1
+	};
+	return { borderColor: RESTING_BORDER };
+}
+/** The words a reader without the picture receives for one agent. */
+function agentDescription(agent) {
+	const cost = fmtCost(agent.costUsd ?? void 0);
+	const tokens = fmtTokenTotal(agent.tokens);
+	return [
+		agent.label,
+		agent.role,
+		agent.harness,
+		agent.model,
+		agentStatus(agent.status).label,
+		agent.turn,
+		agent.result,
+		cost,
+		tokens
+	].filter(Boolean).join(", ");
+}
+/** Set on each card's React Flow wrapper — the element that takes keyboard
+*  focus — so the card inside can draw the focus ring. */
+const AGENT_NODE_CLASS = "group/agent !outline-none";
+const HANDLE_CLASS = "!h-1 !w-1 !min-w-0 !border-0 !bg-transparent opacity-0";
+function Handles({ direction, source = true }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		position: direction === "LR" ? Position.Left : Position.Top,
+		isConnectable: false,
+		className: HANDLE_CLASS
+	}), source && /* @__PURE__ */ jsx(Handle, {
+		type: "source",
+		position: direction === "LR" ? Position.Right : Position.Bottom,
+		isConnectable: false,
+		className: HANDLE_CLASS
+	})] });
+}
+function AgentCardView({ agent, selected, direction, now: fixed, onOpen, parentLabel, handles = false }) {
+	const now = useRunNow(fixed);
+	const quiet = agentQuietActivity(agent, now);
+	const s = agentStatus(agent.status);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-status": agent.status,
+		"data-activity": quiet ? "quiet" : void 0,
+		"data-selected": selected || void 0,
+		title: agentDescription(agent),
+		className: `ag-agent-card relative flex h-full w-full flex-col gap-0.5 rounded-[var(--radius-card)] border bg-card px-3 py-2 text-left ${MOTION_CONTROL}`,
+		style: {
+			boxShadow: RESTING_SHADOW,
+			...cardBorder(agent.status),
+			...selected ? SELECTION_OUTLINE : {}
+		},
+		children: [
+			handles && /* @__PURE__ */ jsx(Handles, { direction }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "grayscale hover:grayscale-0",
+						children: /* @__PURE__ */ jsx(AgentMark, {
+							agent,
+							layout: "tree",
+							size: 18
+						})
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1 truncate text-sm font-semibold leading-[18px]",
+						children: [parentLabel && /* @__PURE__ */ jsxs("span", {
+							className: "ag-parent-label",
+							children: [parentLabel, " / "]
+						}), agent.label]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground tabular-nums",
+						title: agent.costUsd == null ? "Cost not reported" : "Cost",
+						children: fmtCost(agent.costUsd ?? void 0) ?? "—"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "m-0 line-clamp-2 min-h-4 text-xs text-foreground leading-4",
+				children: (agent.status === "failed" ? agent.result ?? agent.turn : agent.turn) || "—"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-auto flex items-center justify-between gap-1 text-xs",
+				style: { color: quiet ? "var(--surface-warning-text)" : s.color },
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx(StatusGlyph, {
+						status: agent.status,
+						size: 16
+					}), quiet?.label ?? s.label]
+				}), agent.status === "needs-you" && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "ag-live-respond nodrag nopan",
+					disabled: !onOpen,
+					onClick: (event) => {
+						event.stopPropagation();
+						onOpen?.();
+					},
+					children: "Respond"
+				})]
+			})
+		]
+	});
+}
+function AgentCard({ data }) {
+	return /* @__PURE__ */ jsx(AgentCardView, {
+		...data,
+		handles: true
+	});
+}
+function AgentFrameBox({ data }) {
+	const { frame, direction } = data;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative h-full w-full rounded-2xl border",
+		style: {
+			background: "color-mix(in srgb, hsl(var(--muted-foreground)) 7%, transparent)",
+			borderColor: "hsl(var(--foreground) / 0.08)"
+		},
+		children: [/* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "nodrag nopan absolute right-3 top-2 flex h-16 w-8 flex-col items-center justify-center gap-1 rounded text-sm text-muted-foreground hover:bg-muted focus-visible:outline",
+			"aria-label": `${frame.collapsed ? "Expand" : "Collapse"} ${data.label} team`,
+			"aria-expanded": !frame.collapsed,
+			title: `${data.label} · ${frame.group.memberIds.length} agents`,
+			onClick: (event) => {
+				event.stopPropagation();
+				data.onToggle();
+			},
+			children: [/* @__PURE__ */ jsx(ChevronDown, {
+				size: 16,
+				className: frame.collapsed ? "-rotate-90" : void 0
+			}), /* @__PURE__ */ jsx("span", { children: frame.group.memberIds.length })]
+		})]
+	});
+}
+/** Resting message and delegation edges stay neutral. */
+const MESSAGE_EDGE_COLOR = {
+	message: "color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent)",
+	delegation: "color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent)"
+};
+function boxOf(node) {
+	return {
+		x: node.internals.positionAbsolute.x,
+		y: node.internals.positionAbsolute.y,
+		w: node.measured.width ?? node.width ?? 0,
+		h: node.measured.height ?? node.height ?? 0
+	};
+}
+/** Where the line from a box's centre toward `toward` leaves the box, `gap`px out. */
+function exitPoint(b, toward, gap) {
+	const cx = b.x + b.w / 2;
+	const cy = b.y + b.h / 2;
+	const dx = toward.x - cx;
+	const dy = toward.y - cy;
+	const len = Math.hypot(dx, dy);
+	if (len === 0) return {
+		x: cx,
+		y: cy
+	};
+	const scale = Math.min(dx === 0 ? Number.POSITIVE_INFINITY : b.w / 2 / Math.abs(dx), dy === 0 ? Number.POSITIVE_INFINITY : b.h / 2 / Math.abs(dy));
+	return {
+		x: cx + dx * scale + dx / len * gap,
+		y: cy + dy * scale + dy / len * gap
+	};
+}
+/**
+* A curve from one card's border to another's, bowed to the right of its
+* direction of travel: two agents messaging each other both ways draw two
+* separate arcs instead of one line over another, and a curve never hides
+* under the straight spawn edges of the tree.
+*/
+function messageCurve(a, b) {
+	const ac = {
+		x: a.x + a.w / 2,
+		y: a.y + a.h / 2
+	};
+	const bc = {
+		x: b.x + b.w / 2,
+		y: b.y + b.h / 2
+	};
+	const dx = bc.x - ac.x;
+	const dy = bc.y - ac.y;
+	const len = Math.hypot(dx, dy) || 1;
+	const bend = Math.min(90, Math.max(24, len * .22));
+	const control = {
+		x: (ac.x + bc.x) / 2 - dy / len * bend,
+		y: (ac.y + bc.y) / 2 + dx / len * bend
+	};
+	const start = exitPoint(a, control, 2);
+	const end = exitPoint(b, control, 4);
+	return {
+		path: `M${start.x},${start.y} Q${control.x},${control.y} ${end.x},${end.y}`,
+		mid: {
+			x: .25 * start.x + .5 * control.x + .25 * end.x,
+			y: .25 * start.y + .5 * control.y + .25 * end.y
+		}
+	};
+}
+function AgentMessageEdgeView({ id, source, target, data, markerEnd }) {
+	const from = useInternalNode(source);
+	const to = useInternalNode(target);
+	if (!from || !to || !data) return null;
+	const { path, mid } = messageCurve(boxOf(from), boxOf(to));
+	const color = MESSAGE_EDGE_COLOR[data.kind] ?? MESSAGE_EDGE_COLOR.message;
+	const count = data.count ?? 1;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BaseEdge, {
+		id,
+		path,
+		markerEnd,
+		interactionWidth: 10,
+		style: {
+			stroke: color,
+			strokeWidth: 1.25,
+			fill: "none"
+		}
+	}), count > 1 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs("div", {
+		title: data.label ? `${data.label} ×${count}` : `${count} ${data.kind}s`,
+		className: "nodrag nopan pointer-events-auto absolute rounded-full border bg-card px-1.5 font-medium text-[10px] text-muted-foreground tabular-nums leading-4 shadow-sm",
+		style: {
+			transform: `translate(-50%, -50%) translate(${mid.x}px, ${mid.y}px)`,
+			borderColor: color
+		},
+		children: ["×", count]
+	}) })] });
+}
+//#endregion
+//#region src/react/agent-graph/agent-live-card.tsx
+const SETTLED = /* @__PURE__ */ new Set(["succeeded", "stopped"]);
+function middleLabel(label) {
+	return label.length <= 52 ? label : `${label.slice(0, 32)} … ${label.slice(-17)}`;
+}
+/** One shell survives settling. A failure retains its evidence and absolute event times. */
+function LiveAgentCardView({ agent, selected, direction = "TB", now: fixed, handles = false, onOpen, parentLabel, renderEventIcon }) {
+	const now = useRunNow(fixed);
+	const ref = useRef(null);
+	useAttention(ref, agent.status);
+	const settled = SETTLED.has(agent.status);
+	const failed = agent.status === "failed";
+	const quiet = agentQuietActivity(agent, now);
+	const s = agentStatus(agent.status);
+	const meta = [agent.model ? shortModel(agent.model) : void 0, agent.effort].filter(Boolean).join(" · ");
+	const events = (agent.events ?? []).slice(-3);
+	const cost = Number.isFinite(agent.costUsd) ? fmtCost(agent.costUsd) : void 0;
+	const metrics = [
+		cost,
+		!failed && agent.startedAt != null ? `${fmtEventTime(agent.startedAt, now, false)} elapsed` : void 0,
+		Number.isFinite(agent.commits) ? `${agent.commits} ${agent.commits === 1 ? "commit" : "commits"}` : void 0
+	].filter(Boolean).join(" · ") || "—";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ag-live-slot",
+		children: [handles && /* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: `ag-live-card${settled ? " ag-live-chip" : ""}`,
+			"data-status": agent.status,
+			"data-sparse": events.length === 0 || void 0,
+			"data-activity": quiet ? "quiet" : agent.activity ?? void 0,
+			"data-selected": selected || void 0,
+			title: agentDescription(agent),
+			style: {
+				boxShadow: RESTING_SHADOW,
+				...cardBorder(agent.status),
+				...selected ? SELECTION_OUTLINE : {},
+				["--ag-status"]: s.color
+			},
+			children: [
+				settled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StatusGlyph, {
+					status: agent.status,
+					size: 16
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ag-live-chip-status",
+					children: s.label
+				})] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ag-live-head",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "grayscale hover:grayscale-0",
+							children: /* @__PURE__ */ jsx(AgentMark, {
+								agent,
+								layout: "tree",
+								size: 18
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "ag-live-names",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "ag-live-name",
+								children: [parentLabel && /* @__PURE__ */ jsxs("span", {
+									className: "ag-parent-label",
+									children: [parentLabel, " / "]
+								}), agent.label]
+							}), !settled && meta && /* @__PURE__ */ jsx("span", {
+								className: "ag-live-meta",
+								children: meta
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "ag-live-stats",
+							children: [failed && onOpen ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "ag-live-pill ag-live-inspect nodrag nopan",
+								onClick: (event) => {
+									event.stopPropagation();
+									onOpen();
+								},
+								children: [
+									/* @__PURE__ */ jsx(StatusGlyph, {
+										status: agent.status,
+										size: 16
+									}),
+									s.label,
+									/* @__PURE__ */ jsx("span", { children: "Inspect" })
+								]
+							}) : /* @__PURE__ */ jsxs("span", {
+								className: `ag-live-pill${quiet ? " ag-live-quiet" : ""}`,
+								children: [/* @__PURE__ */ jsx(StatusGlyph, {
+									status: agent.status,
+									size: 16
+								}), quiet?.label ?? s.label]
+							}), !settled && /* @__PURE__ */ jsx("span", {
+								className: "ag-live-accounting",
+								title: metrics,
+								children: metrics
+							})]
+						})
+					]
+				}),
+				settled ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "ag-live-chip-result",
+					children: agent.result ?? agent.turn ?? s.label
+				}), cost && /* @__PURE__ */ jsx("span", {
+					className: "ag-live-chip-cost",
+					title: "Cost",
+					children: cost
+				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+					className: "ag-live-thinking-row",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: `ag-live-thinking${failed ? " ag-live-failure" : ""}`,
+						children: failed ? agent.result ?? events.at(-1)?.label ?? agent.turn ?? s.label : agent.turn || "—"
+					}), agent.status === "needs-you" && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ag-live-respond nodrag nopan",
+						disabled: !onOpen,
+						title: onOpen ? void 0 : "Responses unavailable in this view",
+						onClick: (event) => {
+							event.stopPropagation();
+							onOpen?.();
+						},
+						children: "Respond"
+					})]
+				}), events.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "ag-live-events-clip",
+					children: /* @__PURE__ */ jsx("ol", {
+						className: "ag-live-events",
+						"aria-label": "Latest events",
+						children: events.map((event) => /* @__PURE__ */ jsxs("li", {
+							title: event.label,
+							children: [
+								renderEventIcon?.(event) ?? /* @__PURE__ */ jsx(Wrench, {
+									size: 12,
+									strokeWidth: 1.75,
+									"aria-hidden": true
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "ag-live-event-label",
+									children: middleLabel(event.label)
+								}),
+								/* @__PURE__ */ jsxs("time", {
+									className: "ag-live-event-at",
+									dateTime: Number.isFinite(event.at) ? new Date(event.at).toISOString() : void 0,
+									children: [failed && event.at != null ? "at " : "", fmtEventTime(event.at, now, failed)]
+								})
+							]
+						}, event.id))
+					})
+				})] })
+			]
+		})]
+	});
+}
+function LiveAgentCard({ data }) {
+	return /* @__PURE__ */ jsx(LiveAgentCardView, {
+		...data,
+		handles: true
+	});
+}
+//#endregion
+//#region src/react/agent-graph/AgentGraphCanvas.tsx
+const NODE_TYPES = {
+	agent: AgentCard,
+	liveAgent: LiveAgentCard,
+	agentFrame: AgentFrameBox
+};
+const EDGE_TYPES = { agentMessage: AgentMessageEdgeView };
+/** The fit's margin, in screen pixels. */
+const FIT_PADDING = 16;
+const PHONE_PAGE = 24;
+/** The canvas's size, once it has one. */
+function useCanvasSize() {
+	const [size, setSize] = useState(null);
+	const observer = useRef(null);
+	return [size, useCallback((el) => {
+		observer.current?.disconnect();
+		observer.current = null;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const viewport = el.querySelector(".ag-graph-viewport") ?? el;
+		const read = () => {
+			const r = viewport.getBoundingClientRect();
+			if (r.width === 0 || r.height === 0) return;
+			setSize((prev) => prev && Math.abs(prev.width - r.width) < 1 && Math.abs(prev.height - r.height) < 1 ? prev : {
+				width: r.width,
+				height: r.height
+			});
+		};
+		observer.current = new ResizeObserver(read);
+		observer.current.observe(viewport);
+		read();
+	}, [])];
+}
+/** Keep the selected card inside the actual viewport without resetting the reader's camera. */
+function revealSelection(inst, wrapper, id) {
+	const node = inst.getInternalNode(id), box = wrapper?.querySelector(".ag-graph-viewport")?.getBoundingClientRect();
+	const width = node?.measured.width ?? node?.width, height = node?.measured.height ?? node?.height;
+	if (!node || !box || !width || !height) return;
+	const current = inst.getViewport(), position = node.internals.positionAbsolute;
+	const zoom = current.zoom;
+	const x = Math.max(FIT_PADDING - position.x * zoom, Math.min(box.width - FIT_PADDING - (position.x + width) * zoom, current.x));
+	const y = Math.max(FIT_PADDING - position.y * zoom, Math.min(box.height - FIT_PADDING - (position.y + height) * zoom, current.y));
+	if (x !== current.x || y !== current.y || zoom !== current.zoom) inst.setViewport({
+		x,
+		y,
+		zoom
+	});
+}
+function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB", className, emptyState, live = false, renderEventIcon, showLatestEvents = true, now }) {
+	const card = live ? LIVE_AGENT_CARD : AGENT_CARD;
+	const clock = useRunNow(now);
+	const animateMotion = useMotionAllowed();
+	const detailsId = useId();
+	const hoverTimer = useRef(void 0);
+	const hoverTarget = useRef(null);
+	const returningFocus = useRef(false);
+	const keepDetails = () => clearTimeout(hoverTimer.current);
+	const hideDetails = () => {
+		keepDetails();
+		setHovered(null);
+	};
+	const leaveDetails = () => {
+		keepDetails();
+		hoverTimer.current = setTimeout(() => setHovered(null), tokenMilliseconds("--duration-fast", wrapperRef.current));
+	};
+	useEffect(() => () => clearTimeout(hoverTimer.current), []);
+	const [hovered, setHovered] = useState(null);
+	const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+	const [phonePage, setPhonePage] = useState(0);
+	const wrapperRef = useRef(null);
+	const [canvas, measureCanvas] = useCanvasSize();
+	const colorMode = useColorMode(wrapperRef, nodes.length > 0);
+	const narrow = canvas !== null && canvas.width < 600;
+	const nextTopology = buildAgentTopology(nodes, edges);
+	const topologyRef = useRef(nextTopology);
+	if (topologyRef.current.key !== nextTopology.key) topologyRef.current = nextTopology;
+	const topology = topologyRef.current;
+	const columnKey = `${direction}:${live}:${topology.key}`;
+	const columnRef = useRef(null);
+	if (canvas && !narrow && columnRef.current?.key !== columnKey) columnRef.current = {
+		key: columnKey,
+		columns: Math.max(1, Math.min(6, Math.floor((canvas.width - 32) / (card.width + 10))))
+	};
+	const columns = columnRef.current?.columns ?? 1;
+	const layoutKey = JSON.stringify([
+		direction,
+		live,
+		topology.key,
+		columns,
+		[...collapsed]
+	]);
+	const [placed, setPlaced] = useState(null);
+	useEffect(() => {
+		if (narrow) return;
+		let active = true;
+		layoutAgents(topology, direction, columns, card, collapsed).then((layout) => {
+			if (active) setPlaced({
+				key: layoutKey,
+				layout
+			});
+		});
+		return () => {
+			active = false;
+		};
+	}, [layoutKey, narrow]);
+	const layout = placed?.key === layoutKey ? placed.layout : null;
+	useEffect(() => {
+		const group = selectedId && topology.groupOf.get(selectedId);
+		if (group) setCollapsed((current) => {
+			if (!current.has(group)) return current;
+			const next = new Set(current);
+			next.delete(group);
+			return next;
+		});
+	}, [selectedId, topology.key]);
+	const byId = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+	const rfRef = useRef(null);
+	const flowNodes = useMemo(() => {
+		if (!layout) return [];
+		const frames = layout.frames.map((frame) => ({
+			id: frame.group.id,
+			type: "agentFrame",
+			position: {
+				x: frame.x,
+				y: frame.y
+			},
+			width: frame.width,
+			height: frame.height,
+			measured: rfRef.current?.getInternalNode(frame.group.id)?.measured,
+			zIndex: -1,
+			selectable: false,
+			focusable: false,
+			draggable: false,
+			data: {
+				frame,
+				direction,
+				label: byId.get(frame.group.parentId)?.label ?? "Agent",
+				onToggle: () => {
+					if (!frame.collapsed && selectedId && frame.group.memberIds.includes(selectedId)) onSelect?.(frame.group.parentId);
+					setCollapsed((current) => {
+						const next = new Set(current);
+						next.has(frame.group.id) ? next.delete(frame.group.id) : next.add(frame.group.id);
+						return next;
+					});
+				}
+			}
+		}));
+		const cards = [];
+		for (const id of topology.agentIds) {
+			const agent = byId.get(id);
+			const position = layout.positions.get(id);
+			if (!agent || !position) continue;
+			const selected = selectedId === id, owned = layout.frames.find((frame) => frame.group.parentId === id);
+			const width = owned ? owned.width - 64 : card.width, height = owned ? 64 : card.height;
+			const measured = rfRef.current?.getInternalNode(id)?.measured;
+			cards.push({
+				id,
+				type: live ? "liveAgent" : "agent",
+				position,
+				width,
+				height,
+				measured: measured?.width === width && measured.height === height ? measured : void 0,
+				className: `${AGENT_NODE_CLASS}${owned ? " ag-frame-owner" : ""}`,
+				draggable: false,
+				ariaRole: "button",
+				ariaLabel: agentDescription(agent),
+				domAttributes: {
+					"aria-pressed": selected,
+					"aria-describedby": hovered?.id === id ? detailsId : void 0
+				},
+				data: {
+					agent,
+					selected,
+					direction,
+					now: clock,
+					onOpen: onSelect ? () => onSelect(agent.id) : void 0,
+					renderEventIcon
+				}
+			});
+		}
+		return [...frames, ...cards];
+	}, [
+		layout,
+		topology,
+		byId,
+		selectedId,
+		direction,
+		live,
+		card,
+		clock,
+		onSelect,
+		renderEventIcon,
+		hovered
+	]);
+	const flowEdges = useMemo(() => {
+		if (!layout) return [];
+		const out = [];
+		const seen = /* @__PURE__ */ new Set();
+		for (const s of topology.spawns) {
+			const source = topology.groups.find((group) => group.parentId === s.from)?.id ?? s.from, target = topology.groupOf.get(s.to) ?? s.to;
+			if (source === target) continue;
+			const id = `spawn:${source}:${target}`;
+			if (seen.has(id)) continue;
+			seen.add(id);
+			out.push({
+				id,
+				source,
+				target,
+				type: "smoothstep",
+				pathOptions: { borderRadius: 14 },
+				selectable: false,
+				focusable: false,
+				style: {
+					stroke: edgeColor(void 0),
+					strokeWidth: 1.5
+				}
+			});
+		}
+		const ids = new Set(layout.positions.keys());
+		const messages = /* @__PURE__ */ new Map();
+		for (const e of edges) {
+			if (e.kind === "spawn" || e.from === e.to || !ids.has(e.from) || !ids.has(e.to)) continue;
+			if (![selectedId, hovered?.id].some((id) => id === e.from || id === e.to)) continue;
+			const id = `${e.kind}:${e.from}:${e.to}`;
+			const prior = messages.get(id);
+			const count = (prior?.data?.count ?? 0) + Math.max(1, e.count ?? 1);
+			const color = MESSAGE_EDGE_COLOR[e.kind] ?? MESSAGE_EDGE_COLOR.message;
+			messages.set(id, {
+				id,
+				source: e.from,
+				target: e.to,
+				type: "agentMessage",
+				selectable: false,
+				focusable: false,
+				zIndex: 0,
+				markerEnd: {
+					type: MarkerType.ArrowClosed,
+					width: 12,
+					height: 12,
+					color
+				},
+				ariaLabel: `${e.kind === "delegation" ? "Delegation" : "Message"} from ${byId.get(e.from)?.label ?? e.from} to ${byId.get(e.to)?.label ?? e.to}${count > 1 ? `, ${count} times` : ""}`,
+				data: {
+					kind: e.kind,
+					count,
+					label: e.label ?? prior?.data?.label
+				}
+			});
+		}
+		return [...out, ...messages.values()];
+	}, [
+		layout,
+		topology,
+		edges,
+		byId,
+		selectedId,
+		hovered
+	]);
+	const [ready, setReady] = useState(false);
+	const [shown, setShown] = useState(false);
+	const selection = useRef(selectedId);
+	selection.current = selectedId;
+	const framed = useRef(null);
+	useEffect(() => {
+		if (narrow) {
+			rfRef.current = null;
+			setReady(false);
+			setShown(false);
+			framed.current = null;
+		}
+	}, [narrow]);
+	const layoutIdentity = layout ? `${layoutKey}:${layout.columns}` : null;
+	const cameraKey = `${direction}:${topology.key}`;
+	const minZoom = layout && canvas ? Math.max(.02, Math.min(.2, (canvas.width - 32) / layout.width, (canvas.height - 32) / layout.height)) : .2;
+	useEffect(() => {
+		const inst = rfRef.current;
+		if (!ready || !inst || !layoutIdentity || !canvas) return;
+		const relayout = framed.current !== cameraKey;
+		const preserveView = !relayout;
+		if (preserveView && !selection.current) return;
+		const animate = framed.current !== null && relayout && animateMotion;
+		framed.current = cameraKey;
+		const frame = requestAnimationFrame(() => {
+			if (preserveView) revealSelection(inst, wrapperRef.current, selection.current);
+			else {
+				const id = selection.current ?? topology.agentIds[0], position = layout?.positions.get(id), width = inst.getInternalNode(id)?.width ?? card.width;
+				const x = layout.width + 32 <= canvas.width ? (canvas.width - layout.width) / 2 : position ? Math.max(FIT_PADDING - position.x, canvas.width / 2 - position.x - width / 2) : FIT_PADDING;
+				const y = layout.height + 32 <= canvas.height ? FIT_PADDING : FIT_PADDING - (position?.y ?? 0);
+				inst.setViewport({
+					x,
+					y,
+					zoom: 1
+				}, { duration: animate ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0 });
+			}
+			setShown(true);
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		ready,
+		layoutIdentity,
+		cameraKey,
+		canvas,
+		minZoom,
+		animateMotion,
+		selectedId
+	]);
+	const select = useCallback((id) => {
+		if (byId.has(id)) {
+			onSelect?.(id);
+			wrapperRef.current?.querySelector(`[data-agent-id="${CSS.escape(id)}"]`)?.scrollIntoView({ block: "nearest" });
+		}
+	}, [byId, onSelect]);
+	const handleNodeClick = useCallback((_event, node) => select(node.id), [select]);
+	const handleKeyDown = useCallback((event) => {
+		if (!(event.target instanceof HTMLElement)) return;
+		const id = event.target.closest(".react-flow__node")?.getAttribute("data-id");
+		if (!id || !byId.has(id)) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			wrapperRef.current?.focus();
+			return;
+		}
+		if (!event.target.classList.contains("react-flow__node")) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			select(id);
+			return;
+		}
+		const origin = layout?.positions.get(id);
+		const vector = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1],
+			ArrowDown: [0, 1]
+		}[event.key];
+		const target = event.key === "Home" ? topology.agentIds[0] : origin && vector ? [...layout?.positions ?? []].filter(([key, p]) => byId.has(key) && key !== id && (p.x - origin.x) * vector[0] + (p.y - origin.y) * vector[1] > 0).sort((a, b) => Math.hypot(a[1].x - origin.x, a[1].y - origin.y) - Math.hypot(b[1].x - origin.x, b[1].y - origin.y))[0]?.[0] : null;
+		if (!target) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const position = layout?.positions.get(target), size = rfRef.current?.getInternalNode(target)?.measured;
+		if (position) rfRef.current?.setCenter(position.x + (size?.width ?? card.width) / 2, position.y + (size?.height ?? card.height) / 2, { zoom: 1 });
+		const focus = () => wrapperRef.current?.querySelector(`.react-flow__node[data-id="${CSS.escape(target)}"]`);
+		const visible = focus();
+		if (visible) visible.focus();
+		else requestAnimationFrame(() => requestAnimationFrame(() => focus()?.focus()));
+	}, [
+		byId,
+		select,
+		layout,
+		topology,
+		card,
+		animateMotion
+	]);
+	const activityRank = (agent) => agent.status === "needs-you" ? 0 : agent.status === "failed" ? 1 : agentQuietActivity(agent, clock) ? 2 : agent.status === "waiting" ? 3 : agent.status === "running" ? 4 : 5;
+	const parentOf = new Map(edges.filter((e) => e.kind === "spawn").map((e) => [e.to, e.from]));
+	const depthOf = (id) => {
+		const seen = /* @__PURE__ */ new Set([id]);
+		let depth = 0;
+		while (parentOf.has(id) && !seen.has(parentOf.get(id))) {
+			id = parentOf.get(id);
+			seen.add(id);
+			depth++;
+		}
+		return depth;
+	};
+	const readingOrder = useRef([]), known = new Set(readingOrder.current);
+	readingOrder.current = [...readingOrder.current.filter((id) => byId.has(id)), ...nodes.filter((agent) => !known.has(agent.id)).sort((a, b) => activityRank(a) - activityRank(b)).map((agent) => agent.id)];
+	const phoneNodes = readingOrder.current.map((id) => byId.get(id));
+	useEffect(() => {
+		const at = phoneNodes.findIndex((node) => node.id === selectedId);
+		if (at >= 0) setPhonePage(Math.floor(at / PHONE_PAGE));
+	}, [selectedId]);
+	useEffect(() => {
+		if (!narrow || !selectedId) return;
+		const frame = requestAnimationFrame(() => wrapperRef.current?.querySelector(`[data-agent-id="${CSS.escape(selectedId)}"]`)?.scrollIntoView({ block: "nearest" }));
+		return () => cancelAnimationFrame(frame);
+	}, [
+		selectedId,
+		phonePage,
+		narrow
+	]);
+	const first = Math.min(phonePage * PHONE_PAGE, Math.max(0, Math.ceil(nodes.length / PHONE_PAGE) - 1) * PHONE_PAGE);
+	const counts = [
+		"needs-you",
+		"failed",
+		"quiet"
+	].map((status) => {
+		const matches = nodes.filter((agent) => status === "quiet" ? agentQuietActivity(agent, clock) : agent.status === status);
+		return {
+			status,
+			matches,
+			current: matches.find((agent) => agent.id === selectedId) ?? matches[0]
+		};
+	});
+	const caption = /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-10 shrink-0 flex-wrap items-center gap-x-3 gap-y-1 px-3 py-1 text-xs text-muted-foreground",
+		"aria-label": "Run status",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "shrink-0 whitespace-nowrap",
+			children: [nodes.length, " agents"]
+		}), counts.filter((group) => group.matches.length).map((group) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "ag-status-button rounded-full border border-border px-2 py-1",
+			style: { color: group.status === "quiet" ? "var(--surface-warning-text)" : agentStatus(group.status).color },
+			onClick: () => {
+				const index = group.matches.findIndex((agent) => agent.id === selectedId);
+				const next = group.matches[(index + 1) % group.matches.length];
+				select(next.id);
+				const p = layout?.positions.get(next.id), size = rfRef.current?.getInternalNode(next.id)?.measured;
+				if (p) rfRef.current?.setCenter(p.x + (size?.width ?? card.width) / 2, p.y + (size?.height ?? card.height) / 2, {
+					zoom: 1,
+					duration: animateMotion ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0
+				});
+			},
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "shrink-0",
+				children: [
+					group.matches.length,
+					" ",
+					group.status === "needs-you" ? "needs you" : group.status
+				]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "ag-caption-target",
+				children: [group.current.label, group.status === "failed" && /* @__PURE__ */ jsxs("span", {
+					className: "font-normal",
+					children: [" · ", group.current.result ?? group.current.turn ?? "Failure cause not recorded"]
+				})]
+			})]
+		}, group.status))]
+	});
+	if (nodes.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: `agent-graph flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-muted-foreground text-xs ${className ?? ""}`,
+		children: emptyState ?? "No agents yet"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (el) => {
+			wrapperRef.current = el;
+			measureCanvas(el);
+		},
+		className: `agent-graph ag-live relative flex flex-col ${className ?? ""}`,
+		tabIndex: -1,
+		onKeyDownCapture: (event) => {
+			if (event.target instanceof HTMLElement && event.target.closest("[data-agent-metrics]")) return;
+			if (event.key === "Tab" && !event.shiftKey && hovered) {
+				event.preventDefault();
+				document.getElementById(detailsId)?.focus();
+				return;
+			}
+			if (event.key === "Escape") hideDetails();
+			handleKeyDown(event);
+		},
+		onFocusCapture: (event) => {
+			if (!(event.target instanceof HTMLElement) || returningFocus.current) return;
+			keepDetails();
+			if (event.target.closest("[data-agent-metrics]")) return;
+			if (!event.target.matches(":focus-visible")) {
+				hideDetails();
+				return;
+			}
+			const node = event.target.closest(".react-flow__node, [data-agent-id]");
+			const id = node?.dataset.id ?? node?.dataset.agentId;
+			hoverTarget.current = node ?? null;
+			setHovered(id && byId.has(id) ? {
+				id,
+				rect: node.getBoundingClientRect()
+			} : null);
+		},
+		onBlurCapture: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget) && event.relatedTarget?.id !== detailsId) hideDetails();
+		},
+		"data-layout": narrow ? "list" : layout && shown ? "ready" : "pending",
+		"data-columns": layout?.columns,
+		children: [
+			caption,
+			showLatestEvents && live && /* @__PURE__ */ jsx(LatestEvents, {
+				agents: nodes,
+				now,
+				live,
+				selectedId,
+				onSelect: onSelect ? select : void 0
+			}),
+			narrow ? /* @__PURE__ */ jsxs("ul", {
+				className: "ag-graph-viewport ag-phone-list overflow-auto",
+				"aria-label": "Agents by attention",
+				children: [phoneNodes.slice(first, first + PHONE_PAGE).map((agent) => /* @__PURE__ */ jsx("li", {
+					style: { ["--depth"]: depthOf(agent.id) },
+					children: /* @__PURE__ */ jsx("div", {
+						role: "button",
+						tabIndex: 0,
+						"aria-pressed": selectedId === agent.id,
+						"aria-label": agentDescription(agent),
+						"data-agent-id": agent.id,
+						className: "ag-phone-select",
+						onClick: () => select(agent.id),
+						onKeyDown: (e) => {
+							if ((e.key === "Enter" || e.key === " ") && e.target === e.currentTarget) {
+								e.preventDefault();
+								select(agent.id);
+							}
+						},
+						children: live || agent.status === "succeeded" || agent.status === "stopped" ? /* @__PURE__ */ jsx(LiveAgentCardView, {
+							agent,
+							parentLabel: byId.get(parentOf.get(agent.id) ?? "")?.label,
+							selected: selectedId === agent.id,
+							now: clock,
+							renderEventIcon,
+							onOpen: onSelect ? () => select(agent.id) : void 0
+						}) : /* @__PURE__ */ jsx(AgentCardView, {
+							agent,
+							parentLabel: byId.get(parentOf.get(agent.id) ?? "")?.label,
+							selected: selectedId === agent.id,
+							now: clock,
+							direction,
+							onOpen: onSelect ? () => select(agent.id) : void 0
+						})
+					})
+				}, agent.id)), nodes.length > PHONE_PAGE && /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center justify-between gap-2 border-t border-border pt-3 text-sm",
+					"aria-label": "Agent pages",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "rounded px-2 py-1 hover:bg-muted disabled:opacity-40 focus-visible:outline",
+							disabled: !first,
+							onClick: () => {
+								setPhonePage((page) => page - 1);
+								wrapperRef.current?.querySelector(".ag-phone-list")?.scrollTo({ top: 0 });
+							},
+							children: "Previous"
+						}),
+						/* @__PURE__ */ jsxs("span", { children: [
+							first + 1,
+							"–",
+							Math.min(nodes.length, first + PHONE_PAGE),
+							" of ",
+							nodes.length
+						] }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "rounded px-2 py-1 hover:bg-muted disabled:opacity-40 focus-visible:outline",
+							disabled: first + PHONE_PAGE >= nodes.length,
+							onClick: () => {
+								setPhonePage((page) => page + 1);
+								wrapperRef.current?.querySelector(".ag-phone-list")?.scrollTo({ top: 0 });
+							},
+							children: "Next"
+						})
+					]
+				})]
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "ag-graph-viewport min-h-0 flex-1",
+				style: { opacity: shown ? 1 : 0 },
+				children: /* @__PURE__ */ jsxs(ReactFlow, {
+					nodes: flowNodes,
+					edges: flowEdges,
+					nodeTypes: NODE_TYPES,
+					edgeTypes: EDGE_TYPES,
+					colorMode,
+					onInit: (inst) => {
+						rfRef.current = inst;
+						setReady(true);
+					},
+					onNodeClick: handleNodeClick,
+					onNodeMouseEnter: (event, node) => {
+						keepDetails();
+						hoverTarget.current = event.target.closest(".react-flow__node");
+						if (hoverTarget.current) setHovered({
+							id: node.id,
+							rect: hoverTarget.current.getBoundingClientRect()
+						});
+					},
+					onNodeMouseLeave: leaveDetails,
+					proOptions: { hideAttribution: true },
+					onlyRenderVisibleElements: true,
+					nodesDraggable: false,
+					nodesConnectable: false,
+					elementsSelectable: false,
+					nodesFocusable: true,
+					edgesFocusable: false,
+					deleteKeyCode: null,
+					panOnScroll: true,
+					zoomOnScroll: false,
+					zoomOnPinch: true,
+					zoomOnDoubleClick: false,
+					panOnDrag: true,
+					minZoom,
+					maxZoom: 1.75,
+					"aria-label": "Agent topology",
+					children: [
+						/* @__PURE__ */ jsx(Background, {
+							bgColor: "var(--bg-root)",
+							gap: 16,
+							size: 1,
+							color: "hsl(var(--foreground) / 0.06)"
+						}),
+						layout && canvas && (layout.width > canvas.width || layout.height > canvas.height) && /* @__PURE__ */ jsx(MiniMap, {
+							pannable: true,
+							zoomable: true,
+							position: "bottom-left",
+							style: {
+								width: 168,
+								height: 104
+							},
+							className: "!hidden sm:!block",
+							ariaLabel: "Agent topology overview"
+						}),
+						/* @__PURE__ */ jsx(Controls, {
+							showInteractive: false,
+							position: "bottom-right",
+							fitViewOptions: {
+								padding: `${FIT_PADDING}px`,
+								maxZoom: 1
+							}
+						})
+					]
+				})
+			}),
+			hovered && byId.has(hovered.id) && /* @__PURE__ */ jsx(AgentMetrics, {
+				anchor: wrapperRef.current,
+				mode: colorMode,
+				id: detailsId,
+				agent: byId.get(hovered.id),
+				rect: hovered.rect,
+				onEnter: keepDetails,
+				onLeave: leaveDetails,
+				onClose: () => {
+					hideDetails();
+					returningFocus.current = true;
+					hoverTarget.current?.focus({ preventScroll: true });
+					returningFocus.current = false;
+				}
+			})
+		]
+	});
+}
+/** Metrics stay at reading size outside the zoomed canvas and its clipping container. */
+function AgentMetrics({ anchor, mode, id, agent, rect, onEnter, onLeave, onClose }) {
+	const [theme, setTheme] = useState({});
+	useLayoutEffect(() => {
+		if (!anchor) return;
+		const read = () => {
+			const css = getComputedStyle(anchor);
+			setTheme(Object.fromEntries(Array.from(css).filter((name) => name.startsWith("--") && !name.startsWith("--tw-")).map((name) => [name, css.getPropertyValue(name)])));
+		};
+		read();
+		const observer = new MutationObserver(read);
+		for (let el = anchor; el; el = el.parentElement) observer.observe(el, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"data-theme",
+				"data-sandbox-theme"
+			]
+		});
+		return () => observer.disconnect();
+	}, [anchor]);
+	const facts = new Map([
+		{
+			label: "Tokens",
+			value: fmtTokenTotal(agent.tokens) ?? "Not recorded"
+		},
+		{
+			label: "Cost",
+			value: fmtCost(agent.costUsd ?? void 0) ?? "Not recorded"
+		},
+		...agent.facts ?? []
+	].map((fact) => [fact.label.toLowerCase(), fact]));
+	const width = Math.min(420, window.innerWidth - 24), height = Math.min(560, window.innerHeight - 24);
+	const left = Math.max(12, Math.min(rect.right + 12 + width <= window.innerWidth ? rect.right + 12 : rect.left - width - 12, window.innerWidth - width - 12));
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		id,
+		"data-agent-metrics": true,
+		"data-theme": anchor?.closest("[data-theme]")?.getAttribute("data-theme") ?? mode,
+		role: "tooltip",
+		tabIndex: 0,
+		onMouseEnter: onEnter,
+		onMouseLeave: onLeave,
+		onWheel: (event) => event.stopPropagation(),
+		onBlur: onLeave,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+			}
+		},
+		className: `${mode} rounded-xl border border-border bg-card p-4 text-sm text-foreground shadow-xl`,
+		style: {
+			...theme,
+			colorScheme: mode,
+			position: "fixed",
+			zIndex: 1e3,
+			width,
+			maxHeight: height,
+			overflow: "auto",
+			left,
+			top: Math.max(12, Math.min(rect.top, window.innerHeight - height - 12))
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("strong", { children: agent.label }), /* @__PURE__ */ jsx("span", { children: agentStatus(agent.status).label })]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-3 text-muted-foreground",
+				children: [
+					agent.model,
+					agent.harness,
+					agent.role
+				].filter(Boolean).join(" · ")
+			}),
+			/* @__PURE__ */ jsx("dl", {
+				className: "grid grid-cols-[minmax(0,1fr)_auto] gap-x-5 gap-y-1.5",
+				children: [...facts.values()].map((fact) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "min-w-0 break-words text-muted-foreground",
+						children: fact.label
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "m-0 min-w-0 max-w-64 whitespace-normal break-words text-right tabular-nums",
+						children: fact.value
+					})]
+				}, fact.label))
+			}),
+			agent.status === "failed" && /* @__PURE__ */ jsx("p", {
+				className: "mt-3 whitespace-pre-wrap break-words text-[var(--surface-danger-text)]",
+				children: agent.result ?? agent.turn ?? "Failure cause not recorded"
+			})
+		]
+	}), document.body);
+}
+//#endregion
+export { AgentGraphCanvas };