@tangle-network/sandbox-ui 1.1.10 → 2.0.0

package/dist/{AgentGraphCanvas-CMdOlSlh.js → AgentGraphCanvas-Bcxq-e6E.js}

@@ -1,21 +1,24 @@
 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-DJEQrKTs.js";
-import { t as loadElk } from "./elk-loader-Dl9S7jQk.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-C1DsA-Rd.js";
+import { t as LatestEvents } from "./latest-events-B34ElSTE.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-Bfnh08U3.js";
+import { i as loadElk, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-DGd0fm1H.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { CircleCheck, CirclePause, CircleQuestionMark, CircleStop, CircleX, FileText, GitBranch, Globe, Hand, Hourglass, LoaderCircle, Pencil, Search, Sparkles, Terminal, Users } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Users, 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: 200,
-	height: 78
+	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: 304,
-	height: 152
+	height: 164
 };
 const GRID_GAP = 10;
 const FRAME_PAD = 12;
@@ -268,88 +271,35 @@ function pickAgentLayout(layouts, canvas, padding) {
 * 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. */
+/** Workflow state adaptation stays at its boundary; agent states use ui directly. */
 function agentStatus(status) {
-	return AGENT_STATUS[status] ?? AGENT_STATUS.unknown;
+	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 }) {
-	const s = agentStatus(status);
-	const Icon = s.icon;
-	return /* @__PURE__ */ jsx(Icon, {
+	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,
-		strokeWidth: 2.25,
-		className: status === "running" ? "shrink-0 motion-safe:animate-spin [animation-duration:1.6s]" : "shrink-0",
-		style: { color: s.color }
+		"aria-hidden": true
 	});
 }
-/** Only states that ask for a reader colour a card's border; running and done cards stay on the resting hairline and
-*  say their state by glyph and word, so a busy run never reads as a wall of glowing outlines. */
 function cardBorder(status) {
-	if (status === "running" || status === "succeeded") return { borderColor: RESTING_BORDER };
-	if (status === "unknown") return {
-		borderColor: "hsl(var(--muted-foreground) / 0.45)",
-		borderStyle: "dashed"
+	if (status === "needs-you" || status === "failed") return {
+		borderColor: agentStatus(status).color,
+		borderWidth: status === "needs-you" ? 1.5 : 1
 	};
-	if (status === "idle") return { borderColor: "hsl(var(--border))" };
-	if (status === "stopped") return {
-		borderColor: RESTING_BORDER,
-		boxShadow: RESTING_SHADOW
-	};
-	return statusBorder(agentStatus(status).flow);
+	return { borderColor: RESTING_BORDER };
 }
 /** The words a reader without the picture receives for one agent. */
 function agentSummary(agent) {
@@ -362,6 +312,7 @@ function agentSummary(agent) {
 		agent.model,
 		agentStatus(agent.status).label,
 		agent.turn,
+		agent.result,
 		cost,
 		tokens
 	].filter(Boolean).join(", ");
@@ -383,86 +334,97 @@ function Handles({ direction, source = true }) {
 		className: HANDLE_CLASS
 	})] });
 }
-function AgentCard({ data }) {
-	const { agent, selected, direction } = data;
+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);
-	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-activity": quiet ? "quiet" : void 0,
 		"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}`,
+		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: [
-			/* @__PURE__ */ jsx(Handles, { direction }),
+			handles && /* @__PURE__ */ jsx(Handles, { direction }),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-2.5",
+				className: "flex min-w-0 items-center gap-2",
 				children: [
-					/* @__PURE__ */ jsx(NodeMark, {
-						kind: "agent.run",
-						model: agent.model ?? void 0,
-						accent: KIND_ACCENT["agent.run"],
-						tile: 30
+					/* @__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: "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__ */ jsxs("span", {
+						className: "min-w-0 flex-1 truncate text-[13px] font-semibold leading-[18px]",
+						children: [parentLabel && /* @__PURE__ */ jsxs("span", {
+							className: "ag-parent-label",
+							children: [parentLabel, " / "]
+						}), agent.label]
 					}),
-					/* @__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__ */ 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: "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
-					})
-				]
+				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
+	});
+}
 /** The statuses a grid caption counts: the ones a reader looks for. */
 const CAPTION_STATUSES = [
-	"running",
+	"needs-you",
+	"failed",
+	"quiet",
 	"waiting",
-	"failed"
+	"running"
 ];
 function AgentFrameBox({ data }) {
 	const { frame, statuses, direction } = data;
 	const counts = CAPTION_STATUSES.map((status) => ({
 		status,
-		n: statuses.filter((s) => s === status).length
+		n: status === "quiet" ? data.quietCount ?? 0 : 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(", ");
+	const words = [`${frame.group.memberIds.length} agents`, ...counts.map((c) => `${c.n} ${c.status === "quiet" ? "quiet" : agentStatus(c.status).label.toLowerCase()}`)].join(", ");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-full w-full rounded-2xl border",
 		style: {
@@ -494,20 +456,23 @@ function AgentFrameBox({ data }) {
 				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]
+					children: [
+						c.status !== "quiet" && /* @__PURE__ */ jsx(StatusGlyph, {
+							status: c.status,
+							size: 11
+						}),
+						c.n,
+						c.status === "quiet" ? " quiet" : ""
+					]
 				}, 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. */
+/** 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(--primary)) 75%, transparent)"
+	delegation: "color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent)"
 };
 function boxOf(node) {
 	return {
@@ -582,7 +547,6 @@ function AgentMessageEdgeView({ id, source, target, data, markerEnd }) {
 		style: {
 			stroke: color,
 			strokeWidth: 1.25,
-			strokeDasharray: "4 4",
 			fill: "none"
 		}
 	}), count > 1 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs("div", {
@@ -597,181 +561,202 @@ function AgentMessageEdgeView({ id, source, target, data, markerEnd }) {
 }
 // src/workflows/agent-live-card.tsx
 const SETTLED = /* @__PURE__ */ new Set(["succeeded", "stopped"]);
-const EVENT_GLYPHS = [
-	[/^(bash|sh|run|exec|cargo|npm|pnpm|make)\b/, Terminal],
-	[/^(edit|write|patch|apply)\b/, Pencil],
-	[/^(read|cat|open|view|ls|glob)\b/, FileText],
-	[/^(grep|search|find|rg)\b/, Search],
-	[/^(web|fetch|http|browse)\b/, Globe],
-	[/^(spawn|steer|release|merge|commit|git)\b/, GitBranch],
-	[/^(wait|sleep|queue)\b/, Hourglass]
-];
-const eventGlyph = (label) => EVENT_GLYPHS.find(([match]) => match.test(label.toLowerCase()))?.[1] ?? Sparkles;
-function clockTime(at) {
-	return at == null || !Number.isFinite(at) ? void 0 : new Date(at).toLocaleTimeString([], {
-		hour: "2-digit",
-		minute: "2-digit",
-		hourCycle: "h23"
-	});
-}
-function ago(at, now) {
-	if (at == null || !Number.isFinite(at)) return void 0;
-	const s = Math.max(0, Math.round((now - at) / 1e3));
-	if (s < 5) return "now";
-	if (s < 60) return `${s}s`;
-	const m = Math.floor(s / 60);
-	return m < 60 ? `${m}m` : `${Math.floor(m / 60)}h`;
-}
-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 middleLabel(label) {
+	return label.length <= 52 ? label : `${label.slice(0, 32)} … ${label.slice(-17)}`;
 }
-function LiveAgentCard({ data }) {
-	const { agent, selected, direction } = data;
+/** 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 now = useNow(data.now, !settled && !failed);
+	const quiet = quietActivity(agent, now);
 	const s = agentStatus(agent.status);
-	const alive = aliveFor(agent.startedAt, now);
-	if (settled) return /* @__PURE__ */ jsxs("div", {
+	const meta = [agent.model ? shortModel(agent.model) : void 0, agent.effort].filter(Boolean).join(" · ");
+	const [events, setEvents] = useState(() => (agent.events ?? []).slice(-4));
+	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(" · ") || "—";
+	const tail = useRef(null);
+	const motion = useMotionAllowed();
+	const previous = useRef(events.at(-1)?.id);
+	const pending = useRef(void 0);
+	const latest = useRef(agent.events);
+	latest.current = agent.events;
+	useEffect(() => {
+		if (pending.current !== void 0) return;
+		pending.current = setTimeout(() => {
+			setEvents((latest.current ?? []).slice(-4));
+			pending.current = void 0;
+		}, tokenMilliseconds("--duration-ambient", ref.current) * .15);
+	}, [agent.events]);
+	useEffect(() => () => clearTimeout(pending.current), []);
+	const tailAnimation = useRef(null);
+	useEffect(() => () => tailAnimation.current?.cancel(), []);
+	useLayoutEffect(() => {
+		const last = events.at(-1)?.id;
+		const old = previous.current;
+		previous.current = last;
+		const element = tail.current;
+		if (!motion) {
+			tailAnimation.current?.cancel();
+			return;
+		}
+		if (!element || !old || old === last) return;
+		const queued = events.findIndex((event) => event.id === old);
+		const offset = new DOMMatrix(getComputedStyle(element).transform).m42 + 16;
+		tailAnimation.current?.cancel();
+		const frames = queued < 0 ? [{ opacity: 0 }, { opacity: 1 }] : [{ transform: `translateY(${offset}px)` }, { transform: "translateY(-16px)" }];
+		tailAnimation.current = element.animate(frames, {
+			duration: tokenMilliseconds("--duration-stream", element),
+			easing: getComputedStyle(element).getPropertyValue("--ease-standard").trim()
+		});
+	}, [events, motion]);
+	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",
+		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,
-			style: selected ? SELECTION_OUTLINE : void 0,
+			title: agentSummary(agent),
+			style: {
+				boxShadow: RESTING_SHADOW,
+				...cardBorder(agent.status),
+				...selected ? SELECTION_OUTLINE : {},
+				["--ag-status"]: s.color
+			},
 			children: [
-				/* @__PURE__ */ jsx(StatusGlyph, {
+				settled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StatusGlyph, {
 					status: agent.status,
-					size: 13
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "ag-live-chip-name",
-					children: agent.label
+					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
+							})]
+						})
+					]
 				}),
-				/* @__PURE__ */ jsx("span", {
+				settled ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 					className: "ag-live-chip-result",
-					children: agent.result ?? s.label
-				})
-			]
-		})]
-	});
-	const meta = [agent.model?.replace(/^[\w-]+\//, ""), agent.effort].filter(Boolean).join(" · ");
-	const events = (agent.events ?? []).slice(-3);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "ag-live-card",
-		"data-status": agent.status,
-		"data-activity": 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: [
-			/* @__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: 28
-					}),
-					/* @__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: [/* @__PURE__ */ jsxs("span", {
-							className: "ag-live-pill",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "ag-live-dot",
-								"aria-hidden": true
-							}), s.label]
-						}), /* @__PURE__ */ jsxs("span", { children: [alive && /* @__PURE__ */ jsx("span", {
-							title: "Time alive",
-							children: alive
-						}), agent.commits != null && /* @__PURE__ */ jsxs("span", {
-							title: "Commits shipped",
+					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", {
+						ref: tail,
+						className: "ag-live-events",
+						"aria-label": "Latest events",
+						children: events.map((event) => /* @__PURE__ */ jsxs("li", {
+							title: event.label,
 							children: [
-								alive ? " · " : "",
-								agent.commits,
-								" ",
-								agent.commits === 1 ? "commit" : "commits"
+								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))
 					})
-				]
-			}),
-			failed ? /* @__PURE__ */ jsx("p", {
-				className: "ag-live-thinking ag-live-failure",
-				children: agent.result ?? events.at(-1)?.label ?? s.label
-			}) : /* @__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) => {
-					const Glyph = eventGlyph(event.label);
-					const when = failed ? clockTime(event.at) : ago(event.at, now);
-					return /* @__PURE__ */ jsxs("li", { children: [
-						/* @__PURE__ */ jsx(Glyph, {
-							"aria-hidden": true,
-							size: 12,
-							strokeWidth: 2
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "ag-live-event-label",
-							children: event.label
-						}),
-						when && /* @__PURE__ */ jsx("time", {
-							className: "ag-live-event-at",
-							children: when
-						})
-					] }, event.id);
-				})
-			})
-		]
+				})] })
+			]
+		})]
+	});
+}
+function LiveAgentCard({ data }) {
+	return /* @__PURE__ */ jsx(LiveAgentCardView, {
+		...data,
+		handles: true
 	});
 }
 // 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,
@@ -789,8 +774,9 @@ function useCanvasSize() {
 		observer.current?.disconnect();
 		observer.current = null;
 		if (!el || typeof ResizeObserver === "undefined") return;
+		const viewport = el.querySelector(".ag-graph-viewport") ?? el;
 		const read = () => {
-			const r = el.getBoundingClientRect();
+			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,
@@ -798,15 +784,34 @@ function useCanvasSize() {
 			});
 		};
 		observer.current = new ResizeObserver(read);
-		observer.current.observe(el);
+		observer.current.observe(viewport);
 		read();
 	}, [])];
 }
-function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB", className, emptyState, live = false, now }) {
+/** 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 = Math.max(.02, Math.min(current.zoom, (box.width - 32) / width, (box.height - 32) / height));
+	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 [hovered, setHovered] = useState(null);
 	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;
@@ -814,6 +819,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	const [layouts, setLayouts] = useState(null);
 	const layoutKey = `${direction}:${live ? "live" : "cards"}:${topology.key}`;
 	useEffect(() => {
+		if (narrow) return;
 		let live = true;
 		Promise.all(candidateColumns(topology).map((c) => layoutAgents(topology, direction, c, card))).then((all) => {
 			if (live) setLayouts({
@@ -828,14 +834,21 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		topology,
 		direction,
 		layoutKey,
-		card
+		card,
+		narrow
 	]);
-	const layout = useMemo(() => layouts && layouts.key === layoutKey && canvas ? pickAgentLayout(layouts.all, canvas, FIT_PADDING) : null, [
+	const priorLayout = useRef(null);
+	const layout = useMemo(() => {
+		if (!layouts || layouts.key !== layoutKey || !canvas) return null;
+		return priorLayout.current = selectedId && priorLayout.current && layouts.all.includes(priorLayout.current) ? priorLayout.current : pickAgentLayout(layouts.all, canvas, FIT_PADDING);
+	}, [
 		layouts,
 		layoutKey,
-		canvas
+		canvas,
+		selectedId
 	]);
 	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) => ({
@@ -847,6 +860,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			},
 			width: frame.width,
 			height: frame.height,
+			measured: rfRef.current?.getInternalNode(frame.group.id)?.measured,
 			zIndex: -1,
 			selectable: false,
 			focusable: false,
@@ -854,6 +868,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			data: {
 				frame,
 				direction,
+				quietCount: frame.group.memberIds.filter((id) => byId.get(id) && quietActivity(byId.get(id), clock)).length,
 				statuses: frame.group.memberIds.map((id) => byId.get(id)?.status ?? "unknown")
 			}
 		}));
@@ -869,6 +884,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 				position,
 				width: card.width,
 				height: card.height,
+				measured: rfRef.current?.getInternalNode(id)?.measured,
 				className: AGENT_NODE_CLASS,
 				draggable: false,
 				ariaRole: "button",
@@ -878,7 +894,9 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 					agent,
 					selected,
 					direction,
-					now
+					now: clock,
+					onOpen: onSelect ? () => onSelect(agent.id) : void 0,
+					renderEventIcon
 				}
 			});
 		}
@@ -891,7 +909,9 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		direction,
 		live,
 		card,
-		now
+		clock,
+		onSelect,
+		renderEventIcon
 	]);
 	const flowEdges = useMemo(() => {
 		if (!layout) return [];
@@ -902,13 +922,6 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			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,
@@ -918,7 +931,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 				selectable: false,
 				focusable: false,
 				style: {
-					stroke: edgeColor(flow),
+					stroke: edgeColor(void 0),
 					strokeWidth: 1.5
 				}
 			});
@@ -927,6 +940,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		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].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);
@@ -958,29 +972,42 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		layout,
 		topology,
 		edges,
-		byId
+		byId,
+		selectedId,
+		hovered
 	]);
-	const rfRef = useRef(null);
 	const [ready, setReady] = useState(false);
 	const [shown, setShown] = useState(false);
 	const readerMoved = useRef(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;
-		if (!relayout && readerMoved.current) return;
-		const animate = framed.current !== null && relayout && motionAllowed();
+		const preserveView = !relayout && readerMoved.current;
+		if (preserveView && !selection.current) return;
+		const animate = framed.current !== null && relayout && animateMotion;
 		framed.current = layoutIdentity;
-		readerMoved.current = false;
+		readerMoved.current = preserveView;
 		const frame = requestAnimationFrame(() => {
-			inst.fitView({
+			if (preserveView) revealSelection(inst, wrapperRef.current, selection.current);
+			else inst.fitView({
 				padding: `${FIT_PADDING}px`,
 				maxZoom: 1,
 				minZoom,
-				duration: animate ? 220 : 0
+				duration: animate ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0
 			});
 			setShown(true);
 		});
@@ -989,91 +1016,238 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		ready,
 		layoutIdentity,
 		canvas,
-		minZoom
+		minZoom,
+		animateMotion
 	]);
 	const select = useCallback((id) => {
-		if (byId.has(id)) onSelect?.(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.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");
+		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();
-		select(id);
-	}, [byId, select]);
+		const position = layout?.positions.get(target);
+		wrapperRef.current?.querySelector(`.react-flow__node[data-id="${CSS.escape(target)}"]`)?.focus();
+		if (position) rfRef.current?.setCenter(position.x + card.width / 2, position.y + card.height / 2, {
+			zoom: rfRef.current.getZoom(),
+			duration: animateMotion ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0
+		});
+	}, [
+		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 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 h-10 shrink-0 items-center gap-3 px-3 text-xs text-muted-foreground",
+		"aria-label": "Run status",
+		children: [/* @__PURE__ */ jsxs("span", { 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);
+				if (p) rfRef.current?.setCenter(p.x + card.width / 2, p.y + 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__ */ jsx("div", {
+	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",
+		className: `agent-graph ag-live relative flex flex-col ${className ?? ""}`,
+		tabIndex: -1,
+		onKeyDownCapture: handleKeyDown,
+		"data-layout": narrow ? "list" : layout && shown ? "ready" : "pending",
 		"data-columns": layout?.columns,
-		children: /* @__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,
-			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
+		children: [
+			caption,
+			showLatestEvents && live && /* @__PURE__ */ jsx(LatestEvents, {
+				agents: nodes,
+				now,
+				live,
+				selectedId,
+				onSelect: onSelect ? select : void 0
+			}),
+			narrow ? /* @__PURE__ */ jsx("ul", {
+				className: "ag-graph-viewport ag-phone-list overflow-auto",
+				"aria-label": "Agents by attention",
+				children: [...nodes].sort((a, b) => activityRank(a) - activityRank(b)).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))
+			}) : /* @__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);
 					},
-					className: "!hidden sm:!block",
-					ariaLabel: "Agent topology overview"
-				}),
-				/* @__PURE__ */ jsx(Controls, {
-					showInteractive: false,
-					position: "bottom-right",
-					fitViewOptions: {
-						padding: `${FIT_PADDING}px`,
-						maxZoom: 1
-					}
+					onMoveStart: (event) => {
+						if (event) readerMoved.current = true;
+					},
+					onNodeClick: handleNodeClick,
+					onNodeMouseEnter: (_, node) => setHovered(node.id),
+					onNodeMouseLeave: () => setHovered(null),
+					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,
+					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)"
+						}),
+						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 };