@tangle-network/sandbox-ui 2.0.4 → 2.0.5

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/{AgentGraph-DA5lyE06.js → AgentGraph-YuBa5O8m.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-DkdcJ8wb.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-DYAMCkhv.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/{AgentGraphCanvas-BQwSxnaH.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-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-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, 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 = 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({
@@ -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-DkdcJ8wb.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-YuBa5O8m.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-Dst2R2M5.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;

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-wUKH3Qh6.js";
+import { t as LatestEvents } from "./latest-events-CWvZr8Ut.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-CWvZr8Ut.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-YuBa5O8m.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";

package/dist/{node-ui-DJo7yr4o.js → node-ui-Dst2R2M5.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-YuBa5O8m.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-wUKH3Qh6.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-YuBa5O8m.js";
+import { t as LatestEvents } from "./latest-events-CWvZr8Ut.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-wUKH3Qh6.js";
+import { t as LatestEvents } from "./latest-events-CWvZr8Ut.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;

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; }

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-YuBa5O8m.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-Dst2R2M5.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.5",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {