@tangle-network/sandbox-ui 2.0.2 → 2.0.4

package/dist/{AgentGraph-Du-GwOAI.js → AgentGraph-DA5lyE06.js}

@@ -102,7 +102,7 @@ const AGENT_HUB_CSS = `
   color: var(--ag-fg); font-size: 12px; line-height: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
 .ag-root * { box-sizing: border-box; }
 .ag-head, .ag-title, .ag-chip, .ag-legend li, .ag-pop-head, .ag-pop-foot { display: flex; align-items: center; gap: 8px; }
-.ag-head { flex-wrap: wrap; min-height: 40px; }
+.ag-head { flex-wrap: wrap; flex-shrink: 0; min-height: 40px; }
 .ag-title, .ag-pop-name { font-weight: 600; font-size: 14px; line-height: 20px; }
 .ag-title-mark { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ag-accent); }
 .ag-chip, .ag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--ag-border); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; min-height: 24px; background: transparent; color: var(--ag-muted); }
@@ -1258,7 +1258,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-BV5TDDxF.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-CQyy5SBb.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-CrNBjtIF.js").then((m) => ({ default: m.AgentGraphCanvas }))));
+	return lazy(() => retryImport(() => import("./AgentGraphCanvas-BQwSxnaH.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-BqLPrigw.d.ts → AgentGraph-K7OCgKcC.d.ts}

@@ -37,7 +37,7 @@ interface AgentGraphNode {
   startedAt?: number | null;
   /** Live cards: commits it shipped. */
   commits?: number | null;
-  /** Live cards: a settled agent's result, shown on its chip, e.g. "rc2 · 14 commits". */
+  /** Live cards: a settled agent's result in its compact row, e.g. "rc2 · 14 commits". */
   result?: string | null;
 }
 type AgentGraphActivity = "thinking" | "reading" | "building" | "proving" | "writing" | "waiting" | "restarting";
@@ -113,9 +113,9 @@ interface AgentGraphProps {
   /** Hub layout: the header title. Default "Agent graph". */
   title?: ReactNode;
   /**
-   * Tree layout: live cards for a running run. Each card shows a status pill that breathes while it runs, its thinking
-   * line (`turn`) and last three `events` streaming in with how long ago each ran (`at`), its model, effort, time alive and commits; a settled
-   * agent shrinks to a chip with its `result`, and a new spawn grows in. Cards keep a fixed size, so updates never move one.
+   * Tree layout: readable task summaries, the latest three events and model/accounting details. Desktop slots stay
+   * fixed through status updates; completed results compact while failures retain their evidence. Phones preserve
+   * their initial attention order. Only the running dot breathes; commands update without routine sliding.
    */
   live?: boolean;
   /** Host tool identity, such as charts' toolGlyph(event.label). Core graphs need no charts dependency. */

package/dist/{AgentGraphCanvas-CrNBjtIF.js → AgentGraphCanvas-BQwSxnaH.js}

@@ -1,11 +1,11 @@
 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-Du-GwOAI.js";
-import { t as LatestEvents } from "./latest-events-BzDy3Bdg.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-Cmi5ejnw.js";
-import { i as loadElk, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-DGd0fm1H.js";
+import { d as quietActivity, f as syncAmbient, g as useRunNow, h as useMotionAllowed, i as fmtCost, m as useAttention, o as fmtEventTime, p as tokenMilliseconds, s as fmtTokenTotal, u as ambientStyle } from "./AgentGraph-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 { i as loadElk, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-aqWjGbfu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Users, Wrench } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Wrench } from "lucide-react";
 import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";
 import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Position, ReactFlow, useInternalNode } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
@@ -17,7 +17,7 @@ const AGENT_CARD = {
 };
 /** A live card: room for the header, a two-line thinking line and the last three events. Fixed for the same reason. */
 const LIVE_AGENT_CARD = {
-	width: 304,
+	width: 296,
 	height: 164
 };
 const GRID_GAP = 10;
@@ -76,13 +76,14 @@ function gridSize(members, columns, card) {
 	const rows = Math.ceil(members / cols);
 	return {
 		width: cols * card.width + (cols - 1) * GRID_GAP + 24,
-		height: 26 + rows * card.height + (rows - 1) * GRID_GAP + FRAME_PAD
+		height: 80 + rows * card.height + (rows - 1) * GRID_GAP + FRAME_PAD
 	};
 }
 /** The boxes the layouter places: each ungrouped agent, and each grid as one block. */
 function layoutUnits(topology, columns, card) {
 	const units = [];
-	for (const id of topology.agentIds) if (!topology.groupOf.has(id)) units.push({
+	const ownerGroup = new Map(topology.groups.map((group) => [group.parentId, group.id]));
+	for (const id of topology.agentIds) if (!topology.groupOf.has(id) && !ownerGroup.has(id)) units.push({
 		id,
 		width: card.width,
 		height: card.height
@@ -91,7 +92,7 @@ function layoutUnits(topology, columns, card) {
 		id: g.id,
 		...gridSize(g.memberIds.length, columns, card)
 	});
-	const unitOf = (id) => topology.groupOf.get(id) ?? id;
+	const unitOf = (id) => topology.groupOf.get(id) ?? ownerGroup.get(id) ?? id;
 	const seen = /* @__PURE__ */ new Set();
 	const links = [];
 	for (const s of topology.spawns) {
@@ -218,11 +219,15 @@ async function layoutAgents(topology, direction, columns, card = AGENT_CARD) {
 			...origin,
 			...size
 		});
+		positions.set(g.parentId, {
+			x: origin.x + FRAME_PAD,
+			y: origin.y + 8
+		});
 		const cols = Math.max(1, Math.min(columns, g.memberIds.length));
 		g.memberIds.forEach((id, i) => {
 			positions.set(id, {
 				x: origin.x + FRAME_PAD + i % cols * (card.width + GRID_GAP),
-				y: origin.y + 26 + Math.floor(i / cols) * (card.height + GRID_GAP)
+				y: origin.y + 80 + Math.floor(i / cols) * (card.height + GRID_GAP)
 			});
 		});
 	}
@@ -364,7 +369,7 @@ function AgentCardView({ agent, selected, direction, now: fixed, onOpen, parentL
 						})
 					}),
 					/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0 flex-1 truncate text-[13px] font-semibold leading-[18px]",
+						className: "min-w-0 flex-1 truncate text-sm font-semibold leading-[18px]",
 						children: [parentLabel && /* @__PURE__ */ jsxs("span", {
 							className: "ag-parent-label",
 							children: [parentLabel, " / "]
@@ -410,62 +415,17 @@ function AgentCard({ data }) {
 		handles: true
 	});
 }
-/** The statuses a grid caption counts: the ones a reader looks for. */
-const CAPTION_STATUSES = [
-	"needs-you",
-	"failed",
-	"quiet",
-	"waiting",
-	"running"
-];
 function AgentFrameBox({ data }) {
-	const { frame, statuses, direction } = data;
-	const counts = CAPTION_STATUSES.map((status) => ({
-		status,
-		n: status === "quiet" ? data.quietCount ?? 0 : statuses.filter((s) => s === status).length
-	})).filter((c) => c.n > 0);
-	const words = [`${frame.group.memberIds.length} agents`, ...counts.map((c) => `${c.n} ${c.status === "quiet" ? "quiet" : agentStatus(c.status).label.toLowerCase()}`)].join(", ");
+	const { frame, direction } = data;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-full w-full rounded-2xl border",
 		style: {
 			background: "color-mix(in srgb, hsl(var(--muted-foreground)) 7%, transparent)",
 			borderColor: "hsl(var(--foreground) / 0.08)"
 		},
-		children: [/* @__PURE__ */ jsx(Handles, {
-			direction,
-			source: false
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex h-[26px] items-center gap-2.5 px-3 text-[11px] text-muted-foreground leading-4",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: words
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					"aria-hidden": true,
-					className: "flex items-center gap-1.5 font-medium",
-					children: [
-						/* @__PURE__ */ jsx(Users, {
-							size: 12,
-							strokeWidth: 2
-						}),
-						frame.group.memberIds.length,
-						" agents"
-					]
-				}),
-				counts.map((c) => /* @__PURE__ */ jsxs("span", {
-					"aria-hidden": true,
-					className: "flex items-center gap-1 tabular-nums",
-					children: [
-						c.status !== "quiet" && /* @__PURE__ */ jsx(StatusGlyph, {
-							status: c.status,
-							size: 11
-						}),
-						c.n,
-						c.status === "quiet" ? " quiet" : ""
-					]
-				}, c.status))
-			]
+		children: [/* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [frame.group.memberIds.length, " workers"]
 		})]
 	});
 }
@@ -574,48 +534,13 @@ function LiveAgentCardView({ agent, selected, direction = "TB", now: fixed, hand
 	const quiet = quietActivity(agent, now);
 	const s = agentStatus(agent.status);
 	const meta = [agent.model ? shortModel(agent.model) : void 0, agent.effort].filter(Boolean).join(" · ");
-	const [events, setEvents] = useState(() => (agent.events ?? []).slice(-4));
+	const events = (agent.events ?? []).slice(-3);
 	const cost = Number.isFinite(agent.costUsd) ? fmtCost(agent.costUsd) : void 0;
 	const metrics = [
 		cost,
 		!failed && agent.startedAt != null ? `${fmtEventTime(agent.startedAt, now, false)} elapsed` : void 0,
 		Number.isFinite(agent.commits) ? `${agent.commits} ${agent.commits === 1 ? "commit" : "commits"}` : void 0
 	].filter(Boolean).join(" · ") || "—";
-	const tail = useRef(null);
-	const motion = useMotionAllowed();
-	const previous = useRef(events.at(-1)?.id);
-	const pending = useRef(void 0);
-	const latest = useRef(agent.events);
-	latest.current = agent.events;
-	useEffect(() => {
-		if (pending.current !== void 0) return;
-		pending.current = setTimeout(() => {
-			setEvents((latest.current ?? []).slice(-4));
-			pending.current = void 0;
-		}, tokenMilliseconds("--duration-ambient", ref.current) * .15);
-	}, [agent.events]);
-	useEffect(() => () => clearTimeout(pending.current), []);
-	const tailAnimation = useRef(null);
-	useEffect(() => () => tailAnimation.current?.cancel(), []);
-	useLayoutEffect(() => {
-		const last = events.at(-1)?.id;
-		const old = previous.current;
-		previous.current = last;
-		const element = tail.current;
-		if (!motion) {
-			tailAnimation.current?.cancel();
-			return;
-		}
-		if (!element || !old || old === last) return;
-		const queued = events.findIndex((event) => event.id === old);
-		const offset = new DOMMatrix(getComputedStyle(element).transform).m42 + 16;
-		tailAnimation.current?.cancel();
-		const frames = queued < 0 ? [{ opacity: 0 }, { opacity: 1 }] : [{ transform: `translateY(${offset}px)` }, { transform: "translateY(-16px)" }];
-		tailAnimation.current = element.animate(frames, {
-			duration: tokenMilliseconds("--duration-stream", element),
-			easing: getComputedStyle(element).getPropertyValue("--ease-standard").trim()
-		});
-	}, [events, motion]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "ag-live-slot",
 		children: [handles && /* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("div", {
@@ -722,7 +647,6 @@ function LiveAgentCardView({ agent, selected, direction = "TB", now: fixed, hand
 				}), events.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "ag-live-events-clip",
 					children: /* @__PURE__ */ jsx("ol", {
-						ref: tail,
 						className: "ag-live-events",
 						"aria-label": "Latest events",
 						children: events.map((event) => /* @__PURE__ */ jsxs("li", {
@@ -867,9 +791,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			draggable: false,
 			data: {
 				frame,
-				direction,
-				quietCount: frame.group.memberIds.filter((id) => byId.get(id) && quietActivity(byId.get(id), clock)).length,
-				statuses: frame.group.memberIds.map((id) => byId.get(id)?.status ?? "unknown")
+				direction
 			}
 		}));
 		const cards = [];
@@ -878,14 +800,17 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			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 measured = rfRef.current?.getInternalNode(id)?.measured;
 			cards.push({
 				id,
 				type: live ? "liveAgent" : "agent",
 				position,
-				width: card.width,
-				height: card.height,
-				measured: rfRef.current?.getInternalNode(id)?.measured,
-				className: AGENT_NODE_CLASS,
+				width,
+				height,
+				measured: measured?.width === width && measured.height === height ? measured : void 0,
+				className: `${AGENT_NODE_CLASS}${owned ? " ag-frame-owner" : ""}`,
 				draggable: false,
 				ariaRole: "button",
 				ariaLabel: agentSummary(agent),
@@ -918,13 +843,14 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		const out = [];
 		const seen = /* @__PURE__ */ new Set();
 		for (const s of topology.spawns) {
-			const target = topology.groupOf.get(s.to) ?? s.to;
-			const id = `spawn:${s.from}:${target}`;
+			const source = topology.groups.find((group) => group.parentId === s.from)?.id ?? s.from, target = topology.groupOf.get(s.to) ?? s.to;
+			if (source === target) continue;
+			const id = `spawn:${source}:${target}`;
 			if (seen.has(id)) continue;
 			seen.add(id);
 			out.push({
 				id,
-				source: s.from,
+				source,
 				target,
 				type: "smoothstep",
 				pathOptions: { borderRadius: 14 },
@@ -1003,6 +929,11 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		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,
@@ -1017,7 +948,8 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		layoutIdentity,
 		canvas,
 		minZoom,
-		animateMotion
+		animateMotion,
+		live
 	]);
 	const select = useCallback((id) => {
 		if (byId.has(id)) {
@@ -1054,9 +986,9 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		if (!target) return;
 		event.preventDefault();
 		event.stopPropagation();
-		const position = layout?.positions.get(target);
+		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 + card.width / 2, position.y + card.height / 2, {
+		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
 		});
@@ -1069,6 +1001,9 @@ 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]);
@@ -1106,8 +1041,8 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 				const index = group.matches.findIndex((agent) => agent.id === selectedId);
 				const next = group.matches[(index + 1) % group.matches.length];
 				select(next.id);
-				const p = layout?.positions.get(next.id);
-				if (p) rfRef.current?.setCenter(p.x + card.width / 2, p.y + card.height / 2, {
+				const p = layout?.positions.get(next.id), size = rfRef.current?.getInternalNode(next.id)?.measured;
+				if (p) rfRef.current?.setCenter(p.x + (size?.width ?? card.width) / 2, p.y + (size?.height ?? card.height) / 2, {
 					zoom: 1,
 					duration: animateMotion ? tokenMilliseconds("--duration-base", wrapperRef.current) : 0
 				});
@@ -1154,7 +1089,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			narrow ? /* @__PURE__ */ jsx("ul", {
 				className: "ag-graph-viewport ag-phone-list overflow-auto",
 				"aria-label": "Agents by attention",
-				children: [...nodes].sort((a, b) => activityRank(a) - activityRank(b)).map((agent) => /* @__PURE__ */ jsx("li", {
+				children: readingOrder.current.map((id) => byId.get(id)).map((agent) => /* @__PURE__ */ jsx("li", {
 					style: { ["--depth"]: depthOf(agent.id) },
 					children: /* @__PURE__ */ jsx("div", {
 						role: "button",

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

@@ -1,7 +1,7 @@
-import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-Du-GwOAI.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-Cmi5ejnw.js";
+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 { 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-DGd0fm1H.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";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Expand, Maximize2, Minimize2, Plus, Shrink, X } from "lucide-react";

package/dist/{canvas-theme-DGd0fm1H.js → canvas-theme-aqWjGbfu.js}

@@ -47,12 +47,9 @@ function useColorMode(wrapperRef, hasGraph) {
 	}, [wrapperRef, hasGraph]);
 	return mode;
 }
-/** The selected node's ring. An `outline` rather than a border or a box-shadow
-*  because both of those are already spoken for — the border carries tone and
-*  run status, the shadow carries the running/waiting glow — and an outline
-*  composes with both without disturbing the laid-out box. */
+/** Selection preserves the status border and stays quieter than failure or a response request. */
 const SELECTION_OUTLINE = {
-	outline: "2px solid hsl(var(--foreground) / .7)",
+	outline: "1px solid hsl(var(--foreground) / .45)",
 	outlineOffset: 2
 };
 export { loadElk as i, motionAllowed as n, useColorMode as r, SELECTION_OUTLINE as t };