@tangle-network/sandbox-ui 2.0.3 → 2.0.5

package/dist/{AgentGraphCanvas-CIGQjYtw.js → AgentGraphCanvas-DYAMCkhv.js}

@@ -1,11 +1,12 @@
 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-Dd1EBlhu.js";
-import { t as LatestEvents } from "./latest-events-D1i5Ny3N.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-DWv_oLvy.js";
-import { i as loadElk, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-DGd0fm1H.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-YuBa5O8m.js";
+import { t as LatestEvents } from "./latest-events-CWvZr8Ut.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-Dst2R2M5.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, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Users, Wrench } from "lucide-react";
+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";
@@ -17,12 +18,11 @@ const AGENT_CARD = {
 };
 /** 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,
+	width: 296,
 	height: 164
 };
 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) {
@@ -71,27 +71,32 @@ function buildAgentTopology(nodes, edges) {
 		groupOf
 	};
 }
-function gridSize(members, columns, card) {
+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: 26 + rows * card.height + (rows - 1) * GRID_GAP + FRAME_PAD
+		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) {
+function layoutUnits(topology, columns, card, collapsed) {
 	const units = [];
-	for (const id of topology.agentIds) if (!topology.groupOf.has(id)) units.push({
+	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)
+		...gridSize(g.memberIds.length, columns, card, collapsed.has(g.id))
 	});
-	const unitOf = (id) => topology.groupOf.get(id) ?? 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) {
@@ -190,8 +195,8 @@ function placeByDepth(units, links, direction) {
 	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);
+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 = [];
@@ -212,17 +217,24 @@ async function layoutAgents(topology, direction, columns, card = AGENT_CARD) {
 			y: 0
 		};
 		positions.delete(g.id);
-		const size = gridSize(g.memberIds.length, columns, card);
+		const closed = collapsed.has(g.id);
+		const size = gridSize(g.memberIds.length, columns, card, closed);
 		frames.push({
 			group: g,
 			...origin,
-			...size
+			...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 + 26 + Math.floor(i / cols) * (card.height + GRID_GAP)
+				y: origin.y + 80 + Math.floor(i / cols) * (card.height + GRID_GAP)
 			});
 		});
 	}
@@ -234,34 +246,6 @@ async function layoutAgents(topology, direction, columns, card = AGENT_CARD) {
 		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
@@ -364,7 +348,7 @@ function AgentCardView({ agent, selected, direction, now: fixed, onOpen, parentL
 						})
 					}),
 					/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0 flex-1 truncate text-[13px] font-semibold leading-[18px]",
+						className: "min-w-0 flex-1 truncate text-sm font-semibold leading-[18px]",
 						children: [parentLabel && /* @__PURE__ */ jsxs("span", {
 							className: "ag-parent-label",
 							children: [parentLabel, " / "]
@@ -410,62 +394,28 @@ function AgentCard({ data }) {
 		handles: true
 	});
 }
-/** The statuses a grid caption counts: the ones a reader looks for. */
-const CAPTION_STATUSES = [
-	"needs-you",
-	"failed",
-	"quiet",
-	"waiting",
-	"running"
-];
 function AgentFrameBox({ data }) {
-	const { frame, statuses, direction } = data;
-	const counts = CAPTION_STATUSES.map((status) => ({
-		status,
-		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} ${c.status === "quiet" ? "quiet" : agentStatus(c.status).label.toLowerCase()}`)].join(", ");
+	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,
-			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: [
-						c.status !== "quiet" && /* @__PURE__ */ jsx(StatusGlyph, {
-							status: c.status,
-							size: 11
-						}),
-						c.n,
-						c.status === "quiet" ? " quiet" : ""
-					]
-				}, c.status))
-			]
+		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 })]
 		})]
 	});
 }
@@ -574,48 +524,13 @@ function LiveAgentCardView({ agent, selected, direction = "TB", now: fixed, hand
 	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, setEvents] = useState(() => (agent.events ?? []).slice(-4));
+	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(" · ") || "—";
-	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",
 		children: [handles && /* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("div", {
@@ -722,7 +637,6 @@ function LiveAgentCardView({ agent, selected, direction = "TB", now: fixed, hand
 				}), 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", {
@@ -765,7 +679,7 @@ const NODE_TYPES = {
 const EDGE_TYPES = { agentMessage: AgentMessageEdgeView };
 /** The fit's margin, in screen pixels. */
 const FIT_PADDING = 16;
-const MINIMAP_MIN_NODES = 40;
+const PHONE_PAGE = 24;
 /** The canvas's size, once it has one. */
 function useCanvasSize() {
 	const [size, setSize] = useState(null);
@@ -794,7 +708,7 @@ function revealSelection(inst, wrapper, id) {
 	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 zoom = Math.max(.02, Math.min(1, (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({
@@ -807,7 +721,23 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	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);
@@ -816,37 +746,44 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	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}`;
+	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 live = true;
-		Promise.all(candidateColumns(topology).map((c) => layoutAgents(topology, direction, c, card))).then((all) => {
-			if (live) setLayouts({
+		let active = true;
+		layoutAgents(topology, direction, columns, card, collapsed).then((layout) => {
+			if (active) setPlaced({
 				key: layoutKey,
-				all
+				layout
 			});
 		});
 		return () => {
-			live = false;
+			active = false;
 		};
-	}, [
-		topology,
-		direction,
-		layoutKey,
-		card,
-		narrow
-	]);
-	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,
-		selectedId
-	]);
+	}, [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(() => {
@@ -868,8 +805,15 @@ 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")
+				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 = [];
@@ -877,19 +821,24 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			const agent = byId.get(id);
 			const position = layout.positions.get(id);
 			if (!agent || !position) continue;
-			const selected = selectedId === id;
+			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: card.width,
-				height: card.height,
-				measured: rfRef.current?.getInternalNode(id)?.measured,
-				className: AGENT_NODE_CLASS,
+				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 },
+				domAttributes: {
+					"aria-pressed": selected,
+					"aria-describedby": hovered?.id === id ? detailsId : void 0
+				},
 				data: {
 					agent,
 					selected,
@@ -911,20 +860,22 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		card,
 		clock,
 		onSelect,
-		renderEventIcon
+		renderEventIcon,
+		hovered
 	]);
 	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}`;
+			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: s.from,
+				source,
 				target,
 				type: "smoothstep",
 				pathOptions: { borderRadius: 14 },
@@ -936,11 +887,11 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 				}
 			});
 		}
-		const ids = new Set(topology.agentIds);
+		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].some((id) => id === e.from || id === 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);
@@ -978,7 +929,6 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	]);
 	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);
@@ -996,19 +946,22 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		const inst = rfRef.current;
 		if (!ready || !inst || !layoutIdentity || !canvas) return;
 		const relayout = framed.current !== layoutIdentity;
-		const preserveView = !relayout && readerMoved.current;
+		const preserveView = !relayout;
 		if (preserveView && !selection.current) return;
 		const animate = framed.current !== null && relayout && animateMotion;
 		framed.current = layoutIdentity;
-		readerMoved.current = preserveView;
 		const frame = requestAnimationFrame(() => {
 			if (preserveView) revealSelection(inst, wrapperRef.current, selection.current);
-			else inst.fitView({
-				padding: `${FIT_PADDING}px`,
-				maxZoom: 1,
-				minZoom,
-				duration: animate ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0
-			});
+			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);
@@ -1017,7 +970,8 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		layoutIdentity,
 		canvas,
 		minZoom,
-		animateMotion
+		animateMotion,
+		selectedId
 	]);
 	const select = useCallback((id) => {
 		if (byId.has(id)) {
@@ -1054,12 +1008,12 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		if (!target) return;
 		event.preventDefault();
 		event.stopPropagation();
-		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
-		});
+		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,
@@ -1080,6 +1034,23 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		}
 		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",
@@ -1106,8 +1077,8 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 				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, {
+				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
 				});
@@ -1139,7 +1110,35 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		},
 		className: `agent-graph ag-live relative flex flex-col ${className ?? ""}`,
 		tabIndex: -1,
-		onKeyDownCapture: handleKeyDown,
+		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: [
@@ -1151,10 +1150,10 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 				selectedId,
 				onSelect: onSelect ? select : void 0
 			}),
-			narrow ? /* @__PURE__ */ jsx("ul", {
+			narrow ? /* @__PURE__ */ jsxs("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", {
+				children: [phoneNodes.slice(first, first + PHONE_PAGE).map((agent) => /* @__PURE__ */ jsx("li", {
 					style: { ["--depth"]: depthOf(agent.id) },
 					children: /* @__PURE__ */ jsx("div", {
 						role: "button",
@@ -1186,7 +1185,39 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 							onOpen: onSelect ? () => select(agent.id) : void 0
 						})
 					})
-				}, agent.id))
+				}, 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 },
@@ -1200,13 +1231,18 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 						rfRef.current = inst;
 						setReady(true);
 					},
-					onMoveStart: (event) => {
-						if (event) readerMoved.current = true;
-					},
 					onNodeClick: handleNodeClick,
-					onNodeMouseEnter: (_, node) => setHovered(node.id),
-					onNodeMouseLeave: () => setHovered(null),
+					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,
@@ -1228,7 +1264,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 							size: 1,
 							color: "hsl(var(--foreground) / 0.06)"
 						}),
-						nodes.length > MINIMAP_MIN_NODES && /* @__PURE__ */ jsx(MiniMap, {
+						layout && canvas && (layout.width > canvas.width || layout.height > canvas.height) && /* @__PURE__ */ jsx(MiniMap, {
 							pannable: true,
 							zoomable: true,
 							position: "bottom-left",
@@ -1249,8 +1285,119 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 						})
 					]
 				})
+			}),
+			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 };