@tangle-network/sandbox-ui 2.0.4 → 2.0.6

package/dist/{AgentGraph-DA5lyE06.js → AgentGraph-CFlI9qta.js}

@@ -1258,7 +1258,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-CQyy5SBb.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-BtJnA5iY.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };
@@ -1318,7 +1318,7 @@ function WorkflowGraph(props) {
 * taking the pane down.
 */
 function lazyCanvas() {
-	return lazy(() => retryImport(() => import("./AgentGraphCanvas-BQwSxnaH.js").then((m) => ({ default: m.AgentGraphCanvas }))));
+	return lazy(() => retryImport(() => import("./AgentGraphCanvas-CmxReSqa.js").then((m) => ({ default: m.AgentGraphCanvas }))));
 }
 /** The agents as a list, for when the canvas cannot load. */
 function AgentListFallback({ nodes, selectedId, onSelect, className, onRetry }) {

package/dist/{AgentGraph-K7OCgKcC.d.ts → AgentGraph-DzdpPFEI.d.ts}

@@ -23,6 +23,11 @@ interface AgentGraphNode {
   turn?: string | null;
   costUsd?: number | null;
   tokens?: number | null;
+  /** Recorded metrics with units; retained in pointer and keyboard detail cards. */
+  facts?: readonly {
+    label: string;
+    value: string;
+  }[];
   /** Live cards: what it is doing now, from its real state; the card carries it as `data-activity` for hosts to style. */
   activity?: AgentGraphActivity | null;
   /** Live cards: its latest tool calls or events, oldest first; the card shows the last three. */

package/dist/{AgentGraphCanvas-BQwSxnaH.js → AgentGraphCanvas-CmxReSqa.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-DA5lyE06.js";
-import { t as LatestEvents } from "./latest-events-C_G-ekNg.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-DJo7yr4o.js";
+import { d as quietActivity, f as syncAmbient, g as useRunNow, h as useMotionAllowed, i as fmtCost, m as useAttention, o as fmtEventTime, p as tokenMilliseconds, s as fmtTokenTotal, u as ambientStyle } from "./AgentGraph-CFlI9qta.js";
+import { t as LatestEvents } from "./latest-events-v_vXRyd7.js";
+import { P as shortModel, m as edgeColor, o as RESTING_BORDER, r as NodeMark, s as RESTING_SHADOW, t as KIND_ACCENT } from "./node-ui-D8dbX86X.js";
 import { i as loadElk, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-aqWjGbfu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { 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";
@@ -22,7 +23,6 @@ const LIVE_AGENT_CARD = {
 };
 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,7 +71,11 @@ 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 {
@@ -80,7 +84,7 @@ function gridSize(members, columns, card) {
 	};
 }
 /** 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 = [];
 	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({
@@ -90,7 +94,7 @@ function layoutUnits(topology, columns, card) {
 	});
 	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) ?? ownerGroup.get(id) ?? id;
 	const seen = /* @__PURE__ */ new Set();
@@ -191,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 = [];
@@ -213,16 +217,19 @@ 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, {
@@ -239,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
@@ -423,9 +402,20 @@ function AgentFrameBox({ data }) {
 			background: "color-mix(in srgb, hsl(var(--muted-foreground)) 7%, transparent)",
 			borderColor: "hsl(var(--foreground) / 0.08)"
 		},
-		children: [/* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("span", {
-			className: "sr-only",
-			children: [frame.group.memberIds.length, " workers"]
+		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 })]
 		})]
 	});
 }
@@ -689,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);
@@ -718,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 = current.zoom;
 	const x = Math.max(FIT_PADDING - position.x * zoom, Math.min(box.width - FIT_PADDING - (position.x + width) * zoom, current.x));
 	const y = Math.max(FIT_PADDING - position.y * zoom, Math.min(box.height - FIT_PADDING - (position.y + height) * zoom, current.y));
 	if (x !== current.x || y !== current.y || zoom !== current.zoom) inst.setViewport({
@@ -731,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);
@@ -740,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(() => {
@@ -791,7 +804,16 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			draggable: false,
 			data: {
 				frame,
-				direction
+				direction,
+				label: byId.get(frame.group.parentId)?.label ?? "Agent",
+				onToggle: () => {
+					if (!frame.collapsed && selectedId && frame.group.memberIds.includes(selectedId)) onSelect?.(frame.group.parentId);
+					setCollapsed((current) => {
+						const next = new Set(current);
+						next.has(frame.group.id) ? next.delete(frame.group.id) : next.add(frame.group.id);
+						return next;
+					});
+				}
 			}
 		}));
 		const cards = [];
@@ -799,9 +821,8 @@ 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 owned = layout.frames.find((frame) => frame.group.parentId === id);
-			const width = owned ? owned.width - 24 : card.width, height = owned ? 64 : card.height;
+			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,
@@ -814,7 +835,10 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 				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,
@@ -836,7 +860,8 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		card,
 		clock,
 		onSelect,
-		renderEventIcon
+		renderEventIcon,
+		hovered
 	]);
 	const flowEdges = useMemo(() => {
 		if (!layout) return [];
@@ -862,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);
@@ -904,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);
@@ -922,24 +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 if (live) inst.setViewport({
-				x: FIT_PADDING,
-				y: FIT_PADDING / 2,
-				zoom: 1
-			}, { duration: animate ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0 });
-			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);
@@ -949,7 +971,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		canvas,
 		minZoom,
 		animateMotion,
-		live
+		selectedId
 	]);
 	const select = useCallback((id) => {
 		if (byId.has(id)) {
@@ -987,11 +1009,11 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		event.preventDefault();
 		event.stopPropagation();
 		const position = layout?.positions.get(target), size = rfRef.current?.getInternalNode(target)?.measured;
-		wrapperRef.current?.querySelector(`.react-flow__node[data-id="${CSS.escape(target)}"]`)?.focus();
-		if (position) rfRef.current?.setCenter(position.x + (size?.width ?? card.width) / 2, position.y + (size?.height ?? card.height) / 2, {
-			zoom: rfRef.current.getZoom(),
-			duration: animateMotion ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0
-		});
+		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,
@@ -1001,9 +1023,6 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		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 readingOrder = useRef([]);
-	const 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 parentOf = new Map(edges.filter((e) => e.kind === "spawn").map((e) => [e.to, e.from]));
 	const depthOf = (id) => {
 		const seen = /* @__PURE__ */ new Set([id]);
@@ -1015,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",
@@ -1074,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: [
@@ -1086,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: readingOrder.current.map((id) => byId.get(id)).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",
@@ -1121,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 },
@@ -1135,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,
@@ -1163,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",
@@ -1184,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 };

package/dist/{WorkflowGraph-CQyy5SBb.js → WorkflowGraph-BtJnA5iY.js}

@@ -1,5 +1,5 @@
-import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-DA5lyE06.js";
-import { A as worstSeverity, E as isStructuralKind, O as triggerNodeIndex, P as shortModel, T as buildWorkflowGraph, _ as problemBorder, a as ProblemMessages, b as statusBorder, c as STATUS_COLOR, f as StatusFooter, g as kindAccent, h as emptySlotLabel, i as ProblemMarker, k as wfEdgeId, l as STATUS_LABEL, m as edgeColor, o as RESTING_BORDER, p as StatusPill, r as NodeMark, s as RESTING_SHADOW, v as problemSurface, x as COMPACT_NODE_SIZE, y as problemTitle } from "./node-ui-DJo7yr4o.js";
+import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-CFlI9qta.js";
+import { A as worstSeverity, E as isStructuralKind, O as triggerNodeIndex, P as shortModel, T as buildWorkflowGraph, _ as problemBorder, a as ProblemMessages, b as statusBorder, c as STATUS_COLOR, f as StatusFooter, g as kindAccent, h as emptySlotLabel, i as ProblemMarker, k as wfEdgeId, l as STATUS_LABEL, m as edgeColor, o as RESTING_BORDER, p as StatusPill, r as NodeMark, s as RESTING_SHADOW, v as problemSurface, x as COMPACT_NODE_SIZE, y as problemTitle } from "./node-ui-D8dbX86X.js";
 import { n as classifyOutput, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
 import { i as loadElk, n as motionAllowed, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-aqWjGbfu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/globals.css

@@ -383,6 +383,9 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -1520,6 +1523,9 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-72 {
     max-width: calc(var(--spacing) * 72);
   }
@@ -1844,6 +1850,9 @@
   .scale-\[1\.02\] {
     scale: 1.02;
   }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -2122,6 +2131,9 @@
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
+  .gap-x-5 {
+    column-gap: calc(var(--spacing) * 5);
+  }
   .gap-x-6 {
     column-gap: calc(var(--spacing) * 6);
   }
@@ -2136,6 +2148,9 @@
   .gap-y-1 {
     row-gap: var(--spacing);
   }
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
@@ -5310,6 +5325,10 @@
   .focus-visible\:ring-ring:focus-visible {
     --tw-ring-color: hsl(var(--ring));
   }
+  .focus-visible\:outline:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .focus-visible\:outline-1:focus-visible {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -9189,6 +9208,10 @@
   grid-row: 3;
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 .ag-live-pill {
   grid-column: 3;
@@ -9396,12 +9419,6 @@
     height: 80px;
   }
 }
-.ag-live-accounting {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
 .ag-live-chip-status {
   grid-column: 3;
   grid-row: 1;
@@ -9576,7 +9593,7 @@
   .ag-latest ol {
     grid-template-columns: 1fr;
     margin-left: 0;
-    height: calc(var(--ag-latest-rows) * 64px);
+    height: 64px;
   }
 }
 @media (pointer: coarse) {

package/dist/{index-DMX2q0_h.d.ts → index-DFNf9mJ2.d.ts}

@@ -1,4 +1,4 @@
-import { d as AgentGraphNode, n as AgentGraphProps } from "./AgentGraph-K7OCgKcC.js";
+import { d as AgentGraphNode, n as AgentGraphProps } from "./AgentGraph-DzdpPFEI.js";
 import { ReactNode } from "react";
 import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep, ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem as InlineThinkingItem$1, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunPhase, RunPhaseList, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, RunStatus, RunStatusIcon as RunStatusIcon$1, RunStatusIconProps, StatusMeta, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData, ToolCallData as ToolCallData$1, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent, runStatus as runStatus$1, showsTaskPriority, statusMeta as statusMeta$1, taskProgress, taskStatus } from "@tangle-network/ui/run";
 import { FlowWaterfallProps } from "@tangle-network/charts/react";

package/dist/index.d.ts

@@ -16,7 +16,7 @@ import { C as ChangedFile, D as SandboxArtifactTerminal, E as SandboxArtifactPan
 import { n as DiffViewProps, t as DiffView } from "./diff-view-DDHWtR6X.js";
 import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-Ta5GI4hx.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISchemaIssue, OpenUISchemaValidation, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
-import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-DMX2q0_h.js";
+import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-DFNf9mJ2.js";
 import { n as filterFileNodes, t as fileTreeFromPaths } from "./index-CrN4d8gd.js";
 import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, ChatSession, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, addMessage, addParts, bumpActiveSessionActivity, clearChat, connectSession, disconnectSession, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, partMapAtom, registerActiveSession, resetActiveSessions, sessionAtom, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores.js";
 import { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from "./types.js";

package/dist/index.js

@@ -12,8 +12,8 @@ import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as compute
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
 import { S as ReasoningLevelPicker, _ as modelProvider, a as ChatMessage, b as DEFAULT_REASONING_LEVEL_OPTIONS, c as SpeakerHeader, d as UserMessage, f as agentTimelineStepKind, g as ArtifactAgentDock, h as partitionBySpeaker, i as ChatContainer, l as TRANSCRIPT_TEXT, m as isViewerMessage, n as AgentTimelineColumn, o as MessageAuthor, p as foldSummary, r as AgentTimelineStep, s as MessageList, t as AgentTimeline, u as ThinkingIndicator, v as snapHarnessToModel, x as HARNESS_REASONING_OPTIONS, y as AgentProfilePicker } from "./chat-BrlLa4rg.js";
-import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-X00BQO6i.js";
-import { t as LatestEvents } from "./latest-events-C_G-ekNg.js";
+import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-D996hHtq.js";
+import { t as LatestEvents } from "./latest-events-v_vXRyd7.js";
 import "./vault-tree.js";
 import { a as TangleLoginButton, i as UserMenu, n as GitHubLoginButton, r as LoginLayout, t as AuthHeader } from "./auth-BDpoZ_2f.js";
 import { t as AgentMessagingConnection } from "./connections-DymjzHe_.js";

package/dist/{latest-events-C_G-ekNg.js → latest-events-v_vXRyd7.js}

@@ -1,4 +1,4 @@
-import { g as useRunNow, o as fmtEventTime, p as tokenMilliseconds } from "./AgentGraph-DA5lyE06.js";
+import { g as useRunNow, o as fmtEventTime, p as tokenMilliseconds } from "./AgentGraph-CFlI9qta.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";
@@ -145,7 +145,6 @@ function LatestEvents({ agents, n = 5, now, live = now === void 0, selectedId, o
 			/* @__PURE__ */ jsx("ol", {
 				tabIndex: 0,
 				"aria-label": "Recorded activity events",
-				style: { "--ag-latest-rows": Math.min(limit, 3) },
 				children: visible.length ? visible.map((entry) => /* @__PURE__ */ jsx(EventRow, {
 					entry,
 					now: clock,

package/dist/{node-ui-DJo7yr4o.js → node-ui-D8dbX86X.js}

@@ -1,6 +1,6 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
-import { r as clampPreview } from "./AgentGraph-DA5lyE06.js";
+import { r as clampPreview } from "./AgentGraph-CFlI9qta.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";
 import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";

package/dist/{run-X00BQO6i.js → run-D996hHtq.js}

@@ -1,8 +1,8 @@
 import { t as cn } from "./utils-BER_bdgE.js";
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
-import { f as syncAmbient, l as activityTiming, t as AgentGraph, u as ambientStyle } from "./AgentGraph-DA5lyE06.js";
-import { t as LatestEvents } from "./latest-events-C_G-ekNg.js";
+import { f as syncAmbient, l as activityTiming, t as AgentGraph, u as ambientStyle } from "./AgentGraph-CFlI9qta.js";
+import { t as LatestEvents } from "./latest-events-v_vXRyd7.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { X } from "lucide-react";

package/dist/run.d.ts

@@ -1,2 +1,2 @@
-import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-DMX2q0_h.js";
+import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-DFNf9mJ2.js";
 export { type AgentStreamRow, type AgentStreamState, type AgentTranscriptEntry, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LatestEvents, type LatestEventsProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, type TraceEvent, TraceWaterfall, type TraceWaterfallProps, TraceWorkspace, type TraceWorkspaceProps, foldAgentRows, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream };

package/dist/run.js

@@ -1,3 +1,3 @@
-import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-X00BQO6i.js";
-import { t as LatestEvents } from "./latest-events-C_G-ekNg.js";
+import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-D996hHtq.js";
+import { t as LatestEvents } from "./latest-events-v_vXRyd7.js";
 export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LatestEvents, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, TraceWaterfall, TraceWorkspace, foldAgentRows, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream };

package/dist/styles.css

@@ -383,6 +383,9 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -1520,6 +1523,9 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-72 {
     max-width: calc(var(--spacing) * 72);
   }
@@ -1844,6 +1850,9 @@
   .scale-\[1\.02\] {
     scale: 1.02;
   }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -2122,6 +2131,9 @@
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
+  .gap-x-5 {
+    column-gap: calc(var(--spacing) * 5);
+  }
   .gap-x-6 {
     column-gap: calc(var(--spacing) * 6);
   }
@@ -2136,6 +2148,9 @@
   .gap-y-1 {
     row-gap: var(--spacing);
   }
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
@@ -5310,6 +5325,10 @@
   .focus-visible\:ring-ring:focus-visible {
     --tw-ring-color: hsl(var(--ring));
   }
+  .focus-visible\:outline:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .focus-visible\:outline-1:focus-visible {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -9189,6 +9208,10 @@
   grid-row: 3;
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 .ag-live-pill {
   grid-column: 3;
@@ -9396,12 +9419,6 @@
     height: 80px;
   }
 }
-.ag-live-accounting {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
 .ag-live-chip-status {
   grid-column: 3;
   grid-row: 1;
@@ -9576,7 +9593,7 @@
   .ag-latest ol {
     grid-template-columns: 1fr;
     margin-left: 0;
-    height: calc(var(--ag-latest-rows) * 64px);
+    height: 64px;
   }
 }
 @media (pointer: coarse) {

package/dist/tailwind.css

@@ -893,7 +893,7 @@
 .ag-live-name { grid-column: 2; grid-row: 1; font-size: var(--font-size-sm); line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ag-live-meta, .ag-live-stats { font-size: var(--font-size-xs); line-height: 16px; color: var(--ag-muted); }
 .ag-live-meta { grid-column: 2 / -1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ag-live-accounting { grid-column: 2 / -1; grid-row: 3; font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
+.ag-live-accounting { grid-column: 2 / -1; grid-row: 3; font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
 .ag-live-pill { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--ag-status); }
 .ag-running-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-info-text); }
 [data-activity="quiet"] .ag-running-dot { background: var(--surface-warning-text); animation: none !important; }
@@ -931,7 +931,6 @@
   .ag-status-button { flex: 0 0 auto; }
   .ag-live-card.ag-live-chip { min-height: 80px; height: 80px; }
 }
-.ag-live-accounting { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
 .ag-live-chip-status { grid-column: 3; grid-row: 1; font-size: var(--font-size-xs); color: var(--ag-status); }
 .ag-live-chip-cost { grid-column: 4; grid-row: 1; font-size: var(--font-size-xs); color: var(--ag-muted); font-variant-numeric: tabular-nums; }
 .ag-parent-label { color: var(--ag-muted); font-size: var(--font-size-xs); font-weight: 400; }
@@ -961,7 +960,7 @@
 .ag-frame-owner .ag-agent-card { flex-direction: row; align-items: center; gap: 16px; }
 @container (width < 600px) {
   .ag-latest header { float: none; width: auto; height: 24px; flex-direction: row; align-items: center; justify-content: start; gap: 8px; } .ag-latest header > button { margin-left: auto; }
-  .ag-latest ol { grid-template-columns: 1fr; margin-left: 0; height: calc(var(--ag-latest-rows) * 64px); }
+  .ag-latest ol { grid-template-columns: 1fr; margin-left: 0; height: 64px; }
 }
 @media (pointer: coarse) { .ag-live-respond { min-height: 44px; min-width: 44px; } }
 

package/dist/workflows.d.ts

@@ -1,5 +1,5 @@
 import { n as ModelBrandStack, o as modelBrandFor, t as ModelBrandIdentity } from "./model-brand-ZwVS49Fq.js";
-import { a as AgentGraphTool, c as AgentGraphEdge, d as AgentGraphNode, f as AgentGraphStatus, i as AgentGraphCallKind, l as AgentGraphEdgeKind, n as AgentGraphProps, o as AgentGraphActivity, r as AgentGraphCall, s as AgentGraphDirection, t as AgentGraph, u as AgentGraphEvent } from "./AgentGraph-K7OCgKcC.js";
+import { a as AgentGraphTool, c as AgentGraphEdge, d as AgentGraphNode, f as AgentGraphStatus, i as AgentGraphCallKind, l as AgentGraphEdgeKind, n as AgentGraphProps, o as AgentGraphActivity, r as AgentGraphCall, s as AgentGraphDirection, t as AgentGraph, u as AgentGraphEvent } from "./AgentGraph-DzdpPFEI.js";
 import { StatusTone } from "@tangle-network/ui/primitives";
 import { Component, ReactElement, ReactNode } from "react";
 import { LucideIcon } from "lucide-react";

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
-import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-DA5lyE06.js";
-import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-DJo7yr4o.js";
+import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-CFlI9qta.js";
+import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-D8dbX86X.js";
 import { n as classifyOutput, r as condenseText, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
 export { AgentGraph, KIND_ICON, ModelBrandStack, NodeMark, NodeOutputBody, StatusPill as NodeStatusPill, STATUS_COLOR, STATUS_LABEL, STATUS_PILL, STATUS_TONE, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, actionPathLabel, branchNodeId, buildWorkflowGraph, classifyOutput, condenseText, humanizeIdentifier, modelBrandFor, parseActionPath, shortModel, triggerNodeId, triggerNodeIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -138,7 +138,7 @@
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^5.2.0",
     "@tangle-network/brand": "^1.31.1",
-    "@tangle-network/charts": "^2.0.5",
+    "@tangle-network/charts": "^2.0.9",
     "@tangle-network/ui": "^11.51.1",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
@@ -237,7 +237,7 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "5.10.2",
     "@tangle-network/brand": "^1.31.1",
-    "@tangle-network/charts": "^2.0.5",
+    "@tangle-network/charts": "^2.0.9",
     "@tanstack/react-query": "^5.104.5",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",