@tangle-network/sandbox-ui 2.0.10 → 2.0.12

package/dist/AgentGraphCanvas-CmxReSqa.js

@@ -1,1403 +0,0 @@
-import { t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
-import { d as quietActivity, f as syncAmbient, g as useRunNow, h as useMotionAllowed, i as fmtCost, m as useAttention, o as fmtEventTime, p as tokenMilliseconds, s as fmtTokenTotal, u as ambientStyle } from "./AgentGraph-CFlI9qta.js";
-import { t as LatestEvents } from "./latest-events-v_vXRyd7.js";
-import { P as shortModel, m as edgeColor, o as RESTING_BORDER, r as NodeMark, s as RESTING_SHADOW, t as KIND_ACCENT } from "./node-ui-D8dbX86X.js";
-import { i as loadElk, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-aqWjGbfu.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 { ChevronDown, Wrench } from "lucide-react";
-import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";
-import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Position, ReactFlow, useInternalNode } from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-// src/workflows/agent-graph-layout.ts
-/** Every agent card's size. Fixed, so a status or turn update never moves a card. */
-const AGENT_CARD = {
-	width: 240,
-	height: 88
-};
-/** A live card: room for the header, a two-line thinking line and the last three events. Fixed for the same reason. */
-const LIVE_AGENT_CARD = {
-	width: 296,
-	height: 164
-};
-const GRID_GAP = 10;
-const FRAME_PAD = 12;
-const LAYER_GAP = 56;
-const SIBLING_GAP = 24;
-function buildAgentTopology(nodes, edges) {
-	const ids = /* @__PURE__ */ new Set();
-	const agentIds = [];
-	for (const n of nodes) {
-		if (ids.has(n.id)) continue;
-		ids.add(n.id);
-		agentIds.push(n.id);
-	}
-	const seen = /* @__PURE__ */ new Set();
-	const spawns = [];
-	const children = /* @__PURE__ */ new Map();
-	const parentCount = /* @__PURE__ */ new Map();
-	for (const e of edges) {
-		if (e.kind !== "spawn" || e.from === e.to) continue;
-		if (!ids.has(e.from) || !ids.has(e.to)) continue;
-		const key = `${e.from}\u0000${e.to}`;
-		if (seen.has(key)) continue;
-		seen.add(key);
-		spawns.push({
-			from: e.from,
-			to: e.to
-		});
-		children.set(e.from, [...children.get(e.from) ?? [], e.to]);
-		parentCount.set(e.to, (parentCount.get(e.to) ?? 0) + 1);
-	}
-	const groups = [];
-	const groupOf = /* @__PURE__ */ new Map();
-	for (const parentId of agentIds) {
-		const leaves = (children.get(parentId) ?? []).filter((c) => !children.has(c) && parentCount.get(c) === 1);
-		if (leaves.length < 4) continue;
-		const id = `agent-group:${parentId}`;
-		groups.push({
-			id,
-			parentId,
-			memberIds: leaves
-		});
-		for (const leaf of leaves) groupOf.set(leaf, id);
-	}
-	return {
-		key: JSON.stringify([agentIds, spawns.map((s) => [s.from, s.to])]),
-		agentIds,
-		spawns,
-		groups,
-		groupOf
-	};
-}
-function gridSize(members, columns, card, collapsed = false) {
-	if (collapsed) return {
-		width: card.width + 24,
-		height: 80
-	};
-	const cols = Math.max(1, Math.min(columns, members));
-	const rows = Math.ceil(members / cols);
-	return {
-		width: cols * card.width + (cols - 1) * GRID_GAP + 24,
-		height: 80 + rows * card.height + (rows - 1) * GRID_GAP + FRAME_PAD
-	};
-}
-/** The boxes the layouter places: each ungrouped agent, and each grid as one block. */
-function layoutUnits(topology, columns, card, collapsed) {
-	const units = [];
-	const ownerGroup = new Map(topology.groups.map((group) => [group.parentId, group.id]));
-	for (const id of topology.agentIds) if (!topology.groupOf.has(id) && !ownerGroup.has(id)) units.push({
-		id,
-		width: card.width,
-		height: card.height
-	});
-	for (const g of topology.groups) units.push({
-		id: g.id,
-		...gridSize(g.memberIds.length, columns, card, collapsed.has(g.id))
-	});
-	const unitOf = (id) => topology.groupOf.get(id) ?? ownerGroup.get(id) ?? id;
-	const seen = /* @__PURE__ */ new Set();
-	const links = [];
-	for (const s of topology.spawns) {
-		const from = unitOf(s.from);
-		const to = unitOf(s.to);
-		const key = `${from}\u0000${to}`;
-		if (from === to || seen.has(key)) continue;
-		seen.add(key);
-		links.push({
-			from,
-			to
-		});
-	}
-	return {
-		units,
-		links
-	};
-}
-async function placeWithElk(units, links, direction) {
-	const elk = await loadElk();
-	if (!elk) return null;
-	const graph = {
-		id: "root",
-		layoutOptions: {
-			"elk.algorithm": "layered",
-			"elk.direction": direction === "LR" ? "RIGHT" : "DOWN",
-			"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
-			"elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
-			"elk.layered.nodePlacement.bk.fixedAlignment": "BALANCED",
-			"elk.layered.spacing.nodeNodeBetweenLayers": String(LAYER_GAP),
-			"elk.spacing.nodeNode": String(SIBLING_GAP),
-			"elk.spacing.componentComponent": String(48),
-			"elk.separateConnectedComponents": "true",
-			"elk.padding": "[top=0,left=0,bottom=0,right=0]"
-		},
-		children: units.map((u) => ({
-			id: u.id,
-			width: u.width,
-			height: u.height
-		})),
-		edges: links.map((l, i) => ({
-			id: `e${i}`,
-			sources: [l.from],
-			targets: [l.to]
-		}))
-	};
-	try {
-		const out = await elk.layout(graph);
-		const at = /* @__PURE__ */ new Map();
-		for (const c of out.children ?? []) at.set(c.id, {
-			x: c.x ?? 0,
-			y: c.y ?? 0
-		});
-		return at;
-	} catch {
-		return null;
-	}
-}
-/** Without ELK: one row (TB) or column (LR) per spawn depth, each centred. */
-function placeByDepth(units, links, direction) {
-	const parents = /* @__PURE__ */ new Map();
-	for (const l of links) parents.set(l.to, [...parents.get(l.to) ?? [], l.from]);
-	const depth = /* @__PURE__ */ new Map();
-	const depthOf = (id, path) => {
-		const known = depth.get(id);
-		if (known !== void 0) return known;
-		if (path.has(id)) return 0;
-		path.add(id);
-		const d = Math.max(-1, ...(parents.get(id) ?? []).map((p) => depthOf(p, path))) + 1;
-		path.delete(id);
-		depth.set(id, d);
-		return d;
-	};
-	const layers = [];
-	for (const u of units) (layers[depthOf(u.id, /* @__PURE__ */ new Set())] ??= []).push(u);
-	const along = (u) => direction === "TB" ? u.width : u.height;
-	const across = (u) => direction === "TB" ? u.height : u.width;
-	const extents = layers.map((l) => l.reduce((sum, u) => sum + along(u), 0) + (l.length - 1) * SIBLING_GAP);
-	const widest = Math.max(...extents);
-	const at = /* @__PURE__ */ new Map();
-	let offset = 0;
-	layers.forEach((layer, i) => {
-		let cursor = (widest - extents[i]) / 2;
-		for (const u of layer) {
-			at.set(u.id, direction === "TB" ? {
-				x: cursor,
-				y: offset
-			} : {
-				x: offset,
-				y: cursor
-			});
-			cursor += along(u) + SIBLING_GAP;
-		}
-		offset += Math.max(...layer.map(across)) + LAYER_GAP;
-	});
-	return at;
-}
-/** Lay the run out with every grid `columns` wide. */
-async function layoutAgents(topology, direction, columns, card = AGENT_CARD, collapsed = /* @__PURE__ */ new Set()) {
-	const { units, links } = layoutUnits(topology, columns, card, collapsed);
-	const placed = await placeWithElk(units, links, direction) ?? placeByDepth(units, links, direction);
-	const positions = /* @__PURE__ */ new Map();
-	const frames = [];
-	let width = 0;
-	let height = 0;
-	for (const u of units) {
-		const p = placed.get(u.id) ?? {
-			x: 0,
-			y: 0
-		};
-		width = Math.max(width, p.x + u.width);
-		height = Math.max(height, p.y + u.height);
-		positions.set(u.id, p);
-	}
-	for (const g of topology.groups) {
-		const origin = positions.get(g.id) ?? {
-			x: 0,
-			y: 0
-		};
-		positions.delete(g.id);
-		const closed = collapsed.has(g.id);
-		const size = gridSize(g.memberIds.length, columns, card, closed);
-		frames.push({
-			group: g,
-			...origin,
-			...size,
-			collapsed: closed
-		});
-		positions.set(g.parentId, {
-			x: origin.x + FRAME_PAD,
-			y: origin.y + 8
-		});
-		if (closed) continue;
-		const cols = Math.max(1, Math.min(columns, g.memberIds.length));
-		g.memberIds.forEach((id, i) => {
-			positions.set(id, {
-				x: origin.x + FRAME_PAD + i % cols * (card.width + GRID_GAP),
-				y: origin.y + 80 + Math.floor(i / cols) * (card.height + GRID_GAP)
-			});
-		});
-	}
-	return {
-		columns,
-		positions,
-		frames,
-		width,
-		height
-	};
-}
-// src/workflows/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 agentSummary(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 = quietActivity(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: agentSummary(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(NodeMark, {
-							kind: "agent.run",
-							model: agent.model ?? void 0,
-							accent: KIND_ACCENT["agent.run"],
-							tile: 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]
-	}) })] });
-}
-// src/workflows/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 = quietActivity(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: agentSummary(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(NodeMark, {
-								kind: "agent.run",
-								model: agent.model ?? void 0,
-								accent: KIND_ACCENT["agent.run"],
-								tile: 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
-	});
-}
-// src/workflows/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: agentSummary(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 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 !== layoutIdentity;
-		const preserveView = !relayout;
-		if (preserveView && !selection.current) return;
-		const animate = framed.current !== null && relayout && animateMotion;
-		framed.current = layoutIdentity;
-		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,
-		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 : quietActivity(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" ? quietActivity(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: `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": agentSummary(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);
-}
-export { AgentGraphCanvas };