@tangle-network/sandbox-ui 0.138.2 → 0.139.0

package/dist/AgentGraphCanvas-BHihTTsl.js

@@ -0,0 +1,1203 @@
+import { t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
+import { T as statusBorder, U as fmtTokenTotal, V as fmtCost, a as useColorMode, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, o as KIND_ACCENT, p as STATUS_COLOR, r as SELECTION_OUTLINE, y as edgeColor } from "./AgentGraph-Beld8p6x.js";
+import { t as loadElk } from "./elk-loader-Dl9S7jQk.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CircleCheck, CirclePause, CircleQuestionMark, CircleStop, CircleX, Hand, Hourglass, LoaderCircle, Users } from "lucide-react";
+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: 200,
+	height: 78
+};
+/** A live card: room for the figure, the thinking line and the last three events. Fixed for the same reason. */
+const LIVE_AGENT_CARD = {
+	width: 272,
+	height: 152
+};
+const GRID_GAP = 10;
+const FRAME_PAD = 12;
+const MAX_GRID_COLUMNS = 6;
+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) {
+	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: 26 + 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) {
+	const units = [];
+	for (const id of topology.agentIds) if (!topology.groupOf.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)
+	});
+	const unitOf = (id) => topology.groupOf.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) {
+	const { units, links } = layoutUnits(topology, columns, card);
+	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 size = gridSize(g.memberIds.length, columns, card);
+		frames.push({
+			group: g,
+			...origin,
+			...size
+		});
+		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 + 26 + Math.floor(i / cols) * (card.height + GRID_GAP)
+			});
+		});
+	}
+	return {
+		columns,
+		positions,
+		frames,
+		width,
+		height
+	};
+}
+/** The grid widths worth trying for this run: one per column count a grid can use. */
+function candidateColumns(topology) {
+	const largest = Math.max(0, ...topology.groups.map((g) => g.memberIds.length));
+	const top = Math.min(MAX_GRID_COLUMNS, largest);
+	return top <= 1 ? [1] : Array.from({ length: top }, (_, i) => i + 1);
+}
+/**
+* The layout that shows the run largest in this canvas: the highest zoom at
+* which it fits whole, capped at the cards' designed size. Layouts that all
+* reach that cap tie, and the tie goes to the one whose shape is closest to the
+* canvas's, so a wide canvas gets a wide grid and a phone a tall one.
+*/
+function pickAgentLayout(layouts, canvas, padding) {
+	let best = null;
+	let bestZoom = -1;
+	let bestShape = Number.POSITIVE_INFINITY;
+	const aspect = canvas.width / Math.max(1, canvas.height);
+	for (const l of layouts) {
+		const zoom = Math.min(1, (canvas.width - 2 * padding) / Math.max(1, l.width), (canvas.height - 2 * padding) / Math.max(1, l.height));
+		const shape = Math.abs(Math.log(l.width / Math.max(1, l.height) / aspect));
+		if (zoom > bestZoom + .02 || Math.abs(zoom - bestZoom) <= .02 && shape < bestShape) {
+			best = l;
+			bestZoom = zoom;
+			bestShape = shape;
+		}
+	}
+	return best;
+}
+// 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.
+*/
+const MUTED = "hsl(var(--muted-foreground))";
+/** One word, one glyph and one colour per agent status — never colour alone.
+*  `flow` is the workflow status whose border, glow and edge colour it shares. */
+const AGENT_STATUS = {
+	running: {
+		label: "Running",
+		icon: LoaderCircle,
+		color: STATUS_COLOR.running,
+		flow: "running"
+	},
+	waiting: {
+		label: "Waiting",
+		icon: Hourglass,
+		color: STATUS_COLOR.waiting,
+		flow: "waiting"
+	},
+	"needs-you": {
+		label: "Needs you",
+		icon: Hand,
+		color: STATUS_COLOR.waiting,
+		flow: "waiting"
+	},
+	succeeded: {
+		label: "Done",
+		icon: CircleCheck,
+		color: STATUS_COLOR.succeeded,
+		flow: "succeeded"
+	},
+	failed: {
+		label: "Failed",
+		icon: CircleX,
+		color: STATUS_COLOR.failed,
+		flow: "failed"
+	},
+	stopped: {
+		label: "Stopped",
+		icon: CircleStop,
+		color: MUTED,
+		flow: "succeeded"
+	},
+	idle: {
+		label: "Idle",
+		icon: CirclePause,
+		color: MUTED,
+		flow: "queued"
+	},
+	unknown: {
+		label: "Unknown",
+		icon: CircleQuestionMark,
+		color: MUTED,
+		flow: "queued"
+	}
+};
+/** A status this table has no entry for (a newer host) reads as unknown, not as a crash. */
+function agentStatus(status) {
+	return AGENT_STATUS[status] ?? AGENT_STATUS.unknown;
+}
+function StatusGlyph({ status, size }) {
+	const s = agentStatus(status);
+	const Icon = s.icon;
+	return /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		size,
+		strokeWidth: 2.25,
+		className: status === "running" ? "shrink-0 motion-safe:animate-spin [animation-duration:1.6s]" : "shrink-0",
+		style: { color: s.color }
+	});
+}
+function cardBorder(status) {
+	if (status === "unknown") return {
+		borderColor: "hsl(var(--muted-foreground) / 0.45)",
+		borderStyle: "dashed"
+	};
+	if (status === "idle") return { borderColor: "hsl(var(--border))" };
+	if (status === "stopped") return {
+		borderColor: RESTING_BORDER,
+		boxShadow: RESTING_SHADOW
+	};
+	return statusBorder(agentStatus(status).flow);
+}
+/** 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,
+		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 AgentCard({ data }) {
+	const { agent, selected, direction } = data;
+	const s = agentStatus(agent.status);
+	const meta = [agent.role, agent.harness].filter(Boolean).join(" · ");
+	const cost = fmtCost(agent.costUsd ?? void 0);
+	const tokens = fmtTokenTotal(agent.tokens);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-status": agent.status,
+		"data-selected": selected || void 0,
+		title: agentSummary(agent),
+		className: `relative flex h-full w-full cursor-pointer flex-col justify-between rounded-xl border bg-card px-3 pt-2.5 pb-2 text-left hover:-translate-y-px motion-reduce:hover:translate-y-0 after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:opacity-0 after:shadow-[0_10px_28px_-10px_hsl(var(--foreground)/0.45)] after:transition-opacity after:duration-150 after:ease-out hover:after:opacity-100 motion-reduce:after:transition-none group-focus-visible/agent:outline-2 group-focus-visible/agent:outline-offset-4 group-focus-visible/agent:outline-ring ${MOTION_CONTROL}`,
+		style: {
+			boxShadow: RESTING_SHADOW,
+			...cardBorder(agent.status),
+			...selected ? SELECTION_OUTLINE : {}
+		},
+		children: [
+			/* @__PURE__ */ jsx(Handles, { direction }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2.5",
+				children: [
+					/* @__PURE__ */ jsx(NodeMark, {
+						kind: "agent.run",
+						model: agent.model ?? void 0,
+						accent: KIND_ACCENT["agent.run"],
+						tile: 30
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "truncate font-semibold text-[13px] text-foreground leading-[18px] tracking-[-0.01em]",
+							children: agent.label
+						}), /* @__PURE__ */ jsx("div", {
+							className: "truncate text-[11px] text-muted-foreground leading-4",
+							children: meta || "\xA0"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 flex-col items-end gap-0.5 self-start",
+						children: /* @__PURE__ */ jsx(StatusGlyph, {
+							status: agent.status,
+							size: 15
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-1.5 text-[11px] leading-4",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 font-medium",
+						style: { color: s.color === MUTED ? void 0 : s.color },
+						children: s.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-muted-foreground",
+						children: agent.turn ? agent.turn : ""
+					}),
+					(cost ?? tokens) && /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-muted-foreground tabular-nums",
+						children: cost ?? tokens
+					})
+				]
+			})
+		]
+	});
+}
+/** The statuses a grid caption counts: the ones a reader looks for. */
+const CAPTION_STATUSES = [
+	"running",
+	"waiting",
+	"failed"
+];
+function AgentFrameBox({ data }) {
+	const { frame, statuses, direction } = data;
+	const counts = CAPTION_STATUSES.map((status) => ({
+		status,
+		n: statuses.filter((s) => s === status).length
+	})).filter((c) => c.n > 0);
+	const words = [`${frame.group.memberIds.length} agents`, ...counts.map((c) => `${c.n} ${agentStatus(c.status).label.toLowerCase()}`)].join(", ");
+	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,
+			source: false
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex h-[26px] items-center gap-2.5 px-3 text-[11px] text-muted-foreground leading-4",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: words
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					"aria-hidden": true,
+					className: "flex items-center gap-1.5 font-medium",
+					children: [
+						/* @__PURE__ */ jsx(Users, {
+							size: 12,
+							strokeWidth: 2
+						}),
+						frame.group.memberIds.length,
+						" agents"
+					]
+				}),
+				counts.map((c) => /* @__PURE__ */ jsxs("span", {
+					"aria-hidden": true,
+					className: "flex items-center gap-1 tabular-nums",
+					children: [/* @__PURE__ */ jsx(StatusGlyph, {
+						status: c.status,
+						size: 11
+					}), c.n]
+				}, c.status))
+			]
+		})]
+	});
+}
+/** The secondary edges' colours: a message is quiet, a delegation is the
+*  primary accent's wash. Both stay well under a spawn edge's weight. */
+const MESSAGE_EDGE_COLOR = {
+	message: "color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent)",
+	delegation: "color-mix(in srgb, hsl(var(--primary)) 75%, 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,
+			strokeDasharray: "4 4",
+			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",
+	"failed",
+	"stopped"
+]);
+const FIGURES = {
+	thinking: [
+		[
+			"  o    ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o .  ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o .. ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o ...",
+			" /|\\   ",
+			" / \\   "
+		]
+	],
+	reading: [
+		[
+			"  o    ",
+			" /|\\[-]",
+			" / \\   "
+		],
+		[
+			"  o    ",
+			" /|\\[=]",
+			" / \\   "
+		],
+		[
+			"  o    ",
+			" /|\\[#]",
+			" / \\   "
+		],
+		[
+			"  o    ",
+			" /|\\[=]",
+			" / \\   "
+		]
+	],
+	building: [
+		[
+			"  o  T ",
+			" /|\\/  ",
+			" / \\## "
+		],
+		[
+			"  o    ",
+			" /|\\-T ",
+			" / \\## "
+		],
+		[
+			"  o  T ",
+			" /|\\/  ",
+			" / \\###"
+		],
+		[
+			"  o    ",
+			" /|\\-T ",
+			" / \\###"
+		]
+	],
+	proving: [
+		[
+			"  o |- ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o |= ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o |=-",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o QED",
+			" /|\\   ",
+			" / \\   "
+		]
+	],
+	writing: [
+		[
+			"  o    ",
+			" /|\\_/ ",
+			" / \\.  "
+		],
+		[
+			"  o    ",
+			" /|\\_/ ",
+			" / \\.. "
+		],
+		[
+			"  o    ",
+			" /|\\_/ ",
+			" / \\..."
+		],
+		[
+			"  o    ",
+			" /|\\_/ ",
+			" / \\   "
+		]
+	],
+	waiting: [
+		[
+			"  o  z ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o  zZ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o zZz",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o    ",
+			" /|\\   ",
+			" / \\   "
+		]
+	],
+	restarting: [
+		[
+			"  o  | ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o  / ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o  - ",
+			" /|\\   ",
+			" / \\   "
+		],
+		[
+			"  o  \\ ",
+			" /|\\   ",
+			" / \\   "
+		]
+	]
+};
+/** The activity a status implies when the host sends none. */
+function activityOf(agent) {
+	if (agent.activity && FIGURES[agent.activity]) return agent.activity;
+	if (agent.status === "waiting" || agent.status === "needs-you" || agent.status === "idle") return "waiting";
+	return "thinking";
+}
+/** Every frame is stacked in one block and a stepped animation slides it: no timer per card, and reduced motion keeps
+*  the first frame. */
+function Figure({ activity }) {
+	const frames = FIGURES[activity];
+	return /* @__PURE__ */ jsx("div", {
+		className: "ag-live-figure",
+		"aria-hidden": true,
+		"data-activity": activity,
+		children: /* @__PURE__ */ jsx("pre", {
+			style: { ["--ag-frames"]: frames.length },
+			children: frames.map((frame) => frame.join("\n")).join("\n")
+		})
+	});
+}
+function aliveFor(startedAt, now) {
+	if (startedAt == null || !Number.isFinite(startedAt)) return void 0;
+	const s = Math.max(0, Math.round((now - startedAt) / 1e3));
+	if (s < 60) return `${s}s`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m`;
+	return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+/** Time alive ticks once a second while the host follows now; a replay passes its own clock. */
+function useNow(fixed, live) {
+	const [now, setNow] = useState(() => fixed ?? Date.now());
+	useEffect(() => {
+		if (fixed !== void 0 || !live) return;
+		const timer = setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(timer);
+	}, [fixed, live]);
+	return fixed ?? now;
+}
+function LiveAgentCard({ data }) {
+	const { agent, selected, direction } = data;
+	const settled = SETTLED.has(agent.status);
+	const now = useNow(data.now, !settled);
+	const s = agentStatus(agent.status);
+	const alive = aliveFor(agent.startedAt, now);
+	if (settled) return /* @__PURE__ */ jsxs("div", {
+		className: "ag-live-slot",
+		"data-status": agent.status,
+		title: agentSummary(agent),
+		children: [/* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("div", {
+			className: "ag-live-chip",
+			"data-selected": selected || void 0,
+			style: selected ? SELECTION_OUTLINE : void 0,
+			children: [
+				/* @__PURE__ */ jsx(StatusGlyph, {
+					status: agent.status,
+					size: 13
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ag-live-chip-name",
+					children: agent.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ag-live-chip-result",
+					children: agent.result ?? s.label
+				})
+			]
+		})]
+	});
+	const meta = [agent.model, agent.effort].filter(Boolean).join(" · ");
+	const events = (agent.events ?? []).slice(-3);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ag-live-card",
+		"data-status": agent.status,
+		"data-selected": selected || void 0,
+		title: agentSummary(agent),
+		style: {
+			boxShadow: RESTING_SHADOW,
+			...cardBorder(agent.status),
+			...selected ? SELECTION_OUTLINE : {}
+		},
+		children: [
+			/* @__PURE__ */ jsx(Handles, { direction }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ag-live-head",
+				children: [
+					/* @__PURE__ */ jsx(NodeMark, {
+						kind: "agent.run",
+						model: agent.model ?? void 0,
+						accent: KIND_ACCENT["agent.run"],
+						tile: 24
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ag-live-names",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "ag-live-name",
+							children: agent.label
+						}), meta && /* @__PURE__ */ jsx("span", {
+							className: "ag-live-meta",
+							children: meta
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ag-live-stats",
+						children: [alive && /* @__PURE__ */ jsx("span", {
+							title: "Time alive",
+							children: alive
+						}), agent.commits != null && /* @__PURE__ */ jsxs("span", {
+							title: "Commits shipped",
+							children: [
+								agent.commits,
+								" ",
+								agent.commits === 1 ? "commit" : "commits"
+							]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ag-live-body",
+				children: [/* @__PURE__ */ jsx(Figure, { activity: activityOf(agent) }), /* @__PURE__ */ jsxs("div", {
+					className: "ag-live-text",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "ag-live-thinking",
+						children: agent.turn || /* @__PURE__ */ jsx("span", {
+							className: "ag-live-quiet",
+							children: s.label
+						})
+					}, agent.turn ?? ""), /* @__PURE__ */ jsx("ol", {
+						className: "ag-live-events",
+						"aria-label": "Latest events",
+						children: events.map((event) => /* @__PURE__ */ jsx("li", { children: event.label }, event.id))
+					})]
+				})]
+			})
+		]
+	});
+}
+// src/workflows/AgentGraphCanvas.tsx
+/**
+* The topology of a multi-agent run: who spawned whom as a tree, and who
+* messaged or delegated to whom as curved secondary edges over it. Reached
+* through the lazy `AgentGraph` wrapper, which defers `@xyflow/react` (and
+* `elkjs`) to render time.
+*/
+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 MINIMAP_MIN_NODES = 40;
+/** 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 read = () => {
+			const r = el.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(el);
+		read();
+	}, [])];
+}
+function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB", className, emptyState, live = false, now }) {
+	const card = live ? LIVE_AGENT_CARD : AGENT_CARD;
+	const wrapperRef = useRef(null);
+	const [canvas, measureCanvas] = useCanvasSize();
+	const colorMode = useColorMode(wrapperRef, nodes.length > 0);
+	const nextTopology = buildAgentTopology(nodes, edges);
+	const topologyRef = useRef(nextTopology);
+	if (topologyRef.current.key !== nextTopology.key) topologyRef.current = nextTopology;
+	const topology = topologyRef.current;
+	const [layouts, setLayouts] = useState(null);
+	const layoutKey = `${direction}:${live ? "live" : "cards"}:${topology.key}`;
+	useEffect(() => {
+		let live = true;
+		Promise.all(candidateColumns(topology).map((c) => layoutAgents(topology, direction, c, card))).then((all) => {
+			if (live) setLayouts({
+				key: layoutKey,
+				all
+			});
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		topology,
+		direction,
+		layoutKey,
+		card
+	]);
+	const layout = useMemo(() => layouts && layouts.key === layoutKey && canvas ? pickAgentLayout(layouts.all, canvas, FIT_PADDING) : null, [
+		layouts,
+		layoutKey,
+		canvas
+	]);
+	const byId = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+	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,
+			zIndex: -1,
+			selectable: false,
+			focusable: false,
+			draggable: false,
+			data: {
+				frame,
+				direction,
+				statuses: frame.group.memberIds.map((id) => byId.get(id)?.status ?? "unknown")
+			}
+		}));
+		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;
+			cards.push({
+				id,
+				type: live ? "liveAgent" : "agent",
+				position,
+				width: card.width,
+				height: card.height,
+				className: AGENT_NODE_CLASS,
+				draggable: false,
+				ariaRole: "button",
+				ariaLabel: agentSummary(agent),
+				domAttributes: { "aria-pressed": selected },
+				data: {
+					agent,
+					selected,
+					direction,
+					now
+				}
+			});
+		}
+		return [...frames, ...cards];
+	}, [
+		layout,
+		topology,
+		byId,
+		selectedId,
+		direction,
+		live,
+		card,
+		now
+	]);
+	const flowEdges = useMemo(() => {
+		if (!layout) return [];
+		const out = [];
+		const seen = /* @__PURE__ */ new Set();
+		for (const s of topology.spawns) {
+			const target = topology.groupOf.get(s.to) ?? s.to;
+			const id = `spawn:${s.from}:${target}`;
+			if (seen.has(id)) continue;
+			seen.add(id);
+			const group = topology.groups.find((g) => g.id === target);
+			const statuses = group ? group.memberIds.map((m) => byId.get(m)?.status) : [byId.get(s.to)?.status];
+			const flow = [
+				"failed",
+				"waiting",
+				"running"
+			].find((st) => statuses.includes(st)) ?? agentStatus(statuses[0] ?? "unknown").flow;
+			out.push({
+				id,
+				source: s.from,
+				target,
+				type: "smoothstep",
+				pathOptions: { borderRadius: 14 },
+				selectable: false,
+				focusable: false,
+				style: {
+					stroke: edgeColor(flow),
+					strokeWidth: 1.5
+				}
+			});
+		}
+		const ids = new Set(topology.agentIds);
+		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;
+			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
+	]);
+	const rfRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	const [shown, setShown] = useState(false);
+	const readerMoved = useRef(false);
+	const framed = useRef(null);
+	const layoutIdentity = layout ? `${layoutKey}:${layout.columns}` : null;
+	useEffect(() => {
+		const inst = rfRef.current;
+		if (!ready || !inst || !layoutIdentity || !canvas) return;
+		const relayout = framed.current !== layoutIdentity;
+		if (!relayout && readerMoved.current) return;
+		const animate = framed.current !== null && relayout && motionAllowed();
+		framed.current = layoutIdentity;
+		readerMoved.current = false;
+		const frame = requestAnimationFrame(() => {
+			inst.fitView({
+				padding: `${FIT_PADDING}px`,
+				maxZoom: 1,
+				minZoom: .2,
+				duration: animate ? 220 : 0
+			});
+			setShown(true);
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		ready,
+		layoutIdentity,
+		canvas
+	]);
+	const select = useCallback((id) => {
+		if (byId.has(id)) onSelect?.(id);
+	}, [byId, onSelect]);
+	const handleNodeClick = useCallback((_event, node) => select(node.id), [select]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		if (!(event.target instanceof HTMLElement)) return;
+		if (!event.target.classList.contains("react-flow__node")) return;
+		const id = event.target.getAttribute("data-id");
+		if (!id || !byId.has(id)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		select(id);
+	}, [byId, select]);
+	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${live ? " ag-live" : ""} relative transition-opacity duration-150 ease-out motion-reduce:transition-none ${layout && shown ? "opacity-100" : "opacity-0"} ${className ?? ""}`,
+		"data-layout": layout && shown ? "ready" : "pending",
+		"data-columns": layout?.columns,
+		children: [live && /* @__PURE__ */ jsx("style", { children: "\n.ag-live { --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-surface: hsl(var(--card)); --ag-border: hsl(var(--border)); }\n.ag-live .ag-live-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 12px; border: 1px solid var(--ag-border);\n  border-radius: 12px; background: var(--ag-surface); color: var(--ag-fg); cursor: pointer; overflow: hidden; animation: ag-live-grow 360ms cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 0; }\n.ag-live .ag-live-head { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ag-live .ag-live-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }\n.ag-live .ag-live-name { font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-meta, .ag-live .ag-live-stats { font-size: 11px; line-height: 16px; color: var(--ag-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-stats { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; flex: none; }\n.ag-live .ag-live-body { display: flex; gap: 8px; min-height: 0; flex: 1; }\n.ag-live .ag-live-figure { flex: none; width: 60px; height: 48px; overflow: hidden; border-radius: 8px; background: color-mix(in oklab, var(--ag-fg) 5%, transparent); }\n.ag-live .ag-live-figure pre { margin: 0; padding: 0 4px; font: 11px/16px var(--font-mono, ui-monospace, monospace); color: var(--ag-fg); white-space: pre;\n  animation: ag-live-frames calc(var(--ag-frames) * 280ms) steps(var(--ag-frames)) infinite; }\n.ag-live .ag-live-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }\n.ag-live .ag-live-thinking { margin: 0; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ag-live-in 220ms ease-out both; }\n.ag-live .ag-live-quiet { color: var(--ag-muted); }\n.ag-live .ag-live-events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }\n.ag-live .ag-live-events li { font: 11px/16px var(--font-mono, ui-monospace, monospace); color: var(--ag-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ag-live-in 220ms ease-out both; }\n.ag-live .ag-live-events li:last-child { color: var(--ag-fg); }\n.ag-live .ag-live-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }\n.ag-live .ag-live-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--ag-border); border-radius: 16px;\n  background: var(--ag-surface); color: var(--ag-muted); font-size: 12px; opacity: .72; cursor: pointer; animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both; }\n.ag-live .ag-live-chip-name { color: var(--ag-fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-chip-result { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n@keyframes ag-live-frames { to { transform: translateY(calc(var(--ag-frames) * -48px)); } }\n@keyframes ag-live-grow { from { opacity: 0; transform: scale(.7) translateY(-12px); } }\n@keyframes ag-live-in { from { opacity: 0; transform: translateY(4px); } }\n@keyframes ag-live-settle { from { opacity: 1; transform: scale(1.12); } }\n@media (prefers-reduced-motion: reduce) { .ag-live * { animation: none !important; } }\n" }), /* @__PURE__ */ jsxs(ReactFlow, {
+			nodes: flowNodes,
+			edges: flowEdges,
+			nodeTypes: NODE_TYPES,
+			edgeTypes: EDGE_TYPES,
+			colorMode,
+			onInit: (inst) => {
+				rfRef.current = inst;
+				setReady(true);
+			},
+			onMoveStart: (event) => {
+				if (event) readerMoved.current = true;
+			},
+			onNodeClick: handleNodeClick,
+			onKeyDown: handleKeyDown,
+			proOptions: { hideAttribution: true },
+			nodesDraggable: false,
+			nodesConnectable: false,
+			elementsSelectable: false,
+			nodesFocusable: true,
+			edgesFocusable: false,
+			deleteKeyCode: null,
+			panOnScroll: true,
+			zoomOnScroll: false,
+			zoomOnPinch: true,
+			zoomOnDoubleClick: false,
+			panOnDrag: true,
+			minZoom: .2,
+			maxZoom: 1.75,
+			"aria-label": "Agent topology",
+			children: [
+				/* @__PURE__ */ jsx(Background, {
+					gap: 18,
+					size: 1.4,
+					color: "hsl(var(--muted-foreground) / 0.38)"
+				}),
+				nodes.length > MINIMAP_MIN_NODES && /* @__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
+					}
+				})
+			]
+		})]
+	});
+}
+export { AgentGraphCanvas };