@tangle-network/sandbox-ui 1.1.0 → 1.1.2

package/dist/{AgentGraph-Beld8p6x.js → AgentGraph-CWW3Zx1N.js}

@@ -2618,7 +2618,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-CbIFufIK.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-DYsP_Kcg.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };
@@ -2678,7 +2678,7 @@ function WorkflowGraph(props) {
 * taking the pane down.
 */
 function lazyCanvas() {
-	return lazy(() => retryImport(() => import("./AgentGraphCanvas-BHihTTsl.js").then((m) => ({ default: m.AgentGraphCanvas }))));
+	return lazy(() => retryImport(() => import("./AgentGraphCanvas-D7jjAE6i.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-DL-QLjkw.d.ts → AgentGraph-DxAeQQch.d.ts}

@@ -36,7 +36,7 @@ interface AgentGraphNode {
   turn?: string | null;
   costUsd?: number | null;
   tokens?: number | null;
-  /** Live cards: what it is doing now, from its real state; loops the card's figure. */
+  /** 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. */
   events?: readonly AgentGraphEvent[] | null;
@@ -122,8 +122,8 @@ interface AgentGraphProps {
   /** Hub layout: the header title. Default "Agent graph". */
   title?: ReactNode;
   /**
-   * Tree layout: live cards for a running run. Each card loops a small figure of the agent's `activity`, shows its
-   * thinking line (`turn`) and last three `events` as they arrive, its model, effort, time alive and commits; a settled
+   * 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.
    */
   live?: boolean;

package/dist/{AgentGraphCanvas-BHihTTsl.js → AgentGraphCanvas-D7jjAE6i.js}

@@ -1,9 +1,9 @@
 import { t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
-import { T as statusBorder, U as fmtTokenTotal, V as fmtCost, a as useColorMode, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, o as KIND_ACCENT, p as STATUS_COLOR, r as SELECTION_OUTLINE, y as edgeColor } from "./AgentGraph-Beld8p6x.js";
+import { T as statusBorder, U as fmtTokenTotal, V as fmtCost, a as useColorMode, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, o as KIND_ACCENT, p as STATUS_COLOR, r as SELECTION_OUTLINE, y as edgeColor } from "./AgentGraph-CWW3Zx1N.js";
 import { t as loadElk } from "./elk-loader-Dl9S7jQk.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { CircleCheck, CirclePause, CircleQuestionMark, CircleStop, CircleX, Hand, Hourglass, LoaderCircle, Users } from "lucide-react";
+import { CircleCheck, CirclePause, CircleQuestionMark, CircleStop, CircleX, FileText, GitBranch, Globe, Hand, Hourglass, LoaderCircle, Pencil, Search, Sparkles, Terminal, Users } from "lucide-react";
 import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Position, ReactFlow, useInternalNode } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 // src/workflows/agent-graph-layout.ts
@@ -12,9 +12,9 @@ const AGENT_CARD = {
 	width: 200,
 	height: 78
 };
-/** A live card: room for the figure, the thinking line and the last three events. Fixed for the same reason. */
+/** 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: 272,
+	width: 304,
 	height: 152
 };
 const GRID_GAP = 10;
@@ -336,7 +336,10 @@ function StatusGlyph({ status, size }) {
 		style: { color: s.color }
 	});
 }
+/** Only states that ask for a reader colour a card's border; running and done cards stay on the resting hairline and
+*  say their state by glyph and word, so a busy run never reads as a wall of glowing outlines. */
 function cardBorder(status) {
+	if (status === "running" || status === "succeeded") return { borderColor: RESTING_BORDER };
 	if (status === "unknown") return {
 		borderColor: "hsl(var(--muted-foreground) / 0.45)",
 		borderStyle: "dashed"
@@ -598,181 +601,23 @@ const SETTLED = /* @__PURE__ */ new Set([
 	"failed",
 	"stopped"
 ]);
-const FIGURES = {
-	thinking: [
-		[
-			"  o    ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o .  ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o .. ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o ...",
-			" /|\\   ",
-			" / \\   "
-		]
-	],
-	reading: [
-		[
-			"  o    ",
-			" /|\\[-]",
-			" / \\   "
-		],
-		[
-			"  o    ",
-			" /|\\[=]",
-			" / \\   "
-		],
-		[
-			"  o    ",
-			" /|\\[#]",
-			" / \\   "
-		],
-		[
-			"  o    ",
-			" /|\\[=]",
-			" / \\   "
-		]
-	],
-	building: [
-		[
-			"  o  T ",
-			" /|\\/  ",
-			" / \\## "
-		],
-		[
-			"  o    ",
-			" /|\\-T ",
-			" / \\## "
-		],
-		[
-			"  o  T ",
-			" /|\\/  ",
-			" / \\###"
-		],
-		[
-			"  o    ",
-			" /|\\-T ",
-			" / \\###"
-		]
-	],
-	proving: [
-		[
-			"  o |- ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o |= ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o |=-",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o QED",
-			" /|\\   ",
-			" / \\   "
-		]
-	],
-	writing: [
-		[
-			"  o    ",
-			" /|\\_/ ",
-			" / \\.  "
-		],
-		[
-			"  o    ",
-			" /|\\_/ ",
-			" / \\.. "
-		],
-		[
-			"  o    ",
-			" /|\\_/ ",
-			" / \\..."
-		],
-		[
-			"  o    ",
-			" /|\\_/ ",
-			" / \\   "
-		]
-	],
-	waiting: [
-		[
-			"  o  z ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o  zZ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o zZz",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o    ",
-			" /|\\   ",
-			" / \\   "
-		]
-	],
-	restarting: [
-		[
-			"  o  | ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o  / ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o  - ",
-			" /|\\   ",
-			" / \\   "
-		],
-		[
-			"  o  \\ ",
-			" /|\\   ",
-			" / \\   "
-		]
-	]
-};
-/** The activity a status implies when the host sends none. */
-function activityOf(agent) {
-	if (agent.activity && FIGURES[agent.activity]) return agent.activity;
-	if (agent.status === "waiting" || agent.status === "needs-you" || agent.status === "idle") return "waiting";
-	return "thinking";
-}
-/** Every frame is stacked in one block and a stepped animation slides it: no timer per card, and reduced motion keeps
-*  the first frame. */
-function Figure({ activity }) {
-	const frames = FIGURES[activity];
-	return /* @__PURE__ */ jsx("div", {
-		className: "ag-live-figure",
-		"aria-hidden": true,
-		"data-activity": activity,
-		children: /* @__PURE__ */ jsx("pre", {
-			style: { ["--ag-frames"]: frames.length },
-			children: frames.map((frame) => frame.join("\n")).join("\n")
-		})
-	});
+const EVENT_GLYPHS = [
+	[/^(bash|sh|run|exec|cargo|npm|pnpm|make)\b/, Terminal],
+	[/^(edit|write|patch|apply)\b/, Pencil],
+	[/^(read|cat|open|view|ls|glob)\b/, FileText],
+	[/^(grep|search|find|rg)\b/, Search],
+	[/^(web|fetch|http|browse)\b/, Globe],
+	[/^(spawn|steer|release|merge|commit|git)\b/, GitBranch],
+	[/^(wait|sleep|queue)\b/, Hourglass]
+];
+const eventGlyph = (label) => EVENT_GLYPHS.find(([match]) => match.test(label.toLowerCase()))?.[1] ?? Sparkles;
+function ago(at, now) {
+	if (at == null || !Number.isFinite(at)) return void 0;
+	const s = Math.max(0, Math.round((now - at) / 1e3));
+	if (s < 5) return "now";
+	if (s < 60) return `${s}s`;
+	const m = Math.floor(s / 60);
+	return m < 60 ? `${m}m` : `${Math.floor(m / 60)}h`;
 }
 function aliveFor(startedAt, now) {
 	if (startedAt == null || !Number.isFinite(startedAt)) return void 0;
@@ -822,17 +667,19 @@ function LiveAgentCard({ data }) {
 			]
 		})]
 	});
-	const meta = [agent.model, agent.effort].filter(Boolean).join(" · ");
+	const meta = [agent.model?.replace(/^[\w-]+\//, ""), agent.effort].filter(Boolean).join(" · ");
 	const events = (agent.events ?? []).slice(-3);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "ag-live-card",
 		"data-status": agent.status,
+		"data-activity": agent.activity ?? void 0,
 		"data-selected": selected || void 0,
 		title: agentSummary(agent),
 		style: {
 			boxShadow: RESTING_SHADOW,
 			...cardBorder(agent.status),
-			...selected ? SELECTION_OUTLINE : {}
+			...selected ? SELECTION_OUTLINE : {},
+			["--ag-status"]: s.color
 		},
 		children: [
 			/* @__PURE__ */ jsx(Handles, { direction }),
@@ -843,7 +690,7 @@ function LiveAgentCard({ data }) {
 						kind: "agent.run",
 						model: agent.model ?? void 0,
 						accent: KIND_ACCENT["agent.run"],
-						tile: 24
+						tile: 28
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "ag-live-names",
@@ -857,36 +704,56 @@ function LiveAgentCard({ data }) {
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "ag-live-stats",
-						children: [alive && /* @__PURE__ */ jsx("span", {
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "ag-live-pill",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "ag-live-dot",
+								"aria-hidden": true
+							}), s.label]
+						}), /* @__PURE__ */ jsxs("span", { children: [alive && /* @__PURE__ */ jsx("span", {
 							title: "Time alive",
 							children: alive
 						}), agent.commits != null && /* @__PURE__ */ jsxs("span", {
 							title: "Commits shipped",
 							children: [
+								alive ? " · " : "",
 								agent.commits,
 								" ",
 								agent.commits === 1 ? "commit" : "commits"
 							]
-						})]
+						})] })]
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "ag-live-body",
-				children: [/* @__PURE__ */ jsx(Figure, { activity: activityOf(agent) }), /* @__PURE__ */ jsxs("div", {
-					className: "ag-live-text",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "ag-live-thinking",
-						children: agent.turn || /* @__PURE__ */ jsx("span", {
-							className: "ag-live-quiet",
-							children: s.label
+			/* @__PURE__ */ jsx("p", {
+				className: "ag-live-thinking",
+				children: agent.turn || /* @__PURE__ */ jsx("span", {
+					className: "ag-live-quiet",
+					children: s.label
+				})
+			}, agent.turn ?? ""),
+			/* @__PURE__ */ jsx("ol", {
+				className: "ag-live-events",
+				"aria-label": "Latest events",
+				children: events.map((event) => {
+					const Glyph = eventGlyph(event.label);
+					const when = ago(event.at, now);
+					return /* @__PURE__ */ jsxs("li", { children: [
+						/* @__PURE__ */ jsx(Glyph, {
+							"aria-hidden": true,
+							size: 12,
+							strokeWidth: 2
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "ag-live-event-label",
+							children: event.label
+						}),
+						when && /* @__PURE__ */ jsx("time", {
+							className: "ag-live-event-at",
+							children: when
 						})
-					}, agent.turn ?? ""), /* @__PURE__ */ jsx("ol", {
-						className: "ag-live-events",
-						"aria-label": "Latest events",
-						children: events.map((event) => /* @__PURE__ */ jsx("li", { children: event.label }, event.id))
-					})]
-				})]
+					] }, event.id);
+				})
 			})
 		]
 	});
@@ -1092,6 +959,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	const readerMoved = useRef(false);
 	const framed = useRef(null);
 	const layoutIdentity = layout ? `${layoutKey}:${layout.columns}` : null;
+	const minZoom = layout && canvas ? Math.max(.02, Math.min(.2, (canvas.width - 32) / layout.width, (canvas.height - 32) / layout.height)) : .2;
 	useEffect(() => {
 		const inst = rfRef.current;
 		if (!ready || !inst || !layoutIdentity || !canvas) return;
@@ -1104,7 +972,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			inst.fitView({
 				padding: `${FIT_PADDING}px`,
 				maxZoom: 1,
-				minZoom: .2,
+				minZoom,
 				duration: animate ? 220 : 0
 			});
 			setShown(true);
@@ -1113,7 +981,8 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	}, [
 		ready,
 		layoutIdentity,
-		canvas
+		canvas,
+		minZoom
 	]);
 	const select = useCallback((id) => {
 		if (byId.has(id)) onSelect?.(id);
@@ -1141,7 +1010,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		className: `agent-graph${live ? " ag-live" : ""} relative transition-opacity duration-150 ease-out motion-reduce:transition-none ${layout && shown ? "opacity-100" : "opacity-0"} ${className ?? ""}`,
 		"data-layout": layout && shown ? "ready" : "pending",
 		"data-columns": layout?.columns,
-		children: [live && /* @__PURE__ */ jsx("style", { children: "\n.ag-live { --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-surface: hsl(var(--card)); --ag-border: hsl(var(--border)); }\n.ag-live .ag-live-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 12px; border: 1px solid var(--ag-border);\n  border-radius: 12px; background: var(--ag-surface); color: var(--ag-fg); cursor: pointer; overflow: hidden; animation: ag-live-grow 360ms cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 0; }\n.ag-live .ag-live-head { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ag-live .ag-live-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }\n.ag-live .ag-live-name { font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-meta, .ag-live .ag-live-stats { font-size: 11px; line-height: 16px; color: var(--ag-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-stats { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; flex: none; }\n.ag-live .ag-live-body { display: flex; gap: 8px; min-height: 0; flex: 1; }\n.ag-live .ag-live-figure { flex: none; width: 60px; height: 48px; overflow: hidden; border-radius: 8px; background: color-mix(in oklab, var(--ag-fg) 5%, transparent); }\n.ag-live .ag-live-figure pre { margin: 0; padding: 0 4px; font: 11px/16px var(--font-mono, ui-monospace, monospace); color: var(--ag-fg); white-space: pre;\n  animation: ag-live-frames calc(var(--ag-frames) * 280ms) steps(var(--ag-frames)) infinite; }\n.ag-live .ag-live-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }\n.ag-live .ag-live-thinking { margin: 0; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ag-live-in 220ms ease-out both; }\n.ag-live .ag-live-quiet { color: var(--ag-muted); }\n.ag-live .ag-live-events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }\n.ag-live .ag-live-events li { font: 11px/16px var(--font-mono, ui-monospace, monospace); color: var(--ag-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ag-live-in 220ms ease-out both; }\n.ag-live .ag-live-events li:last-child { color: var(--ag-fg); }\n.ag-live .ag-live-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }\n.ag-live .ag-live-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--ag-border); border-radius: 16px;\n  background: var(--ag-surface); color: var(--ag-muted); font-size: 12px; opacity: .72; cursor: pointer; animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both; }\n.ag-live .ag-live-chip-name { color: var(--ag-fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-chip-result { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n@keyframes ag-live-frames { to { transform: translateY(calc(var(--ag-frames) * -48px)); } }\n@keyframes ag-live-grow { from { opacity: 0; transform: scale(.7) translateY(-12px); } }\n@keyframes ag-live-in { from { opacity: 0; transform: translateY(4px); } }\n@keyframes ag-live-settle { from { opacity: 1; transform: scale(1.12); } }\n@media (prefers-reduced-motion: reduce) { .ag-live * { animation: none !important; } }\n" }), /* @__PURE__ */ jsxs(ReactFlow, {
+		children: [live && /* @__PURE__ */ jsx("style", { children: "\n.ag-live { --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-surface: hsl(var(--card)); --ag-border: hsl(var(--border)); }\n.ag-live .ag-live-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 12px; border: 1px solid var(--ag-border);\n  border-radius: 14px; background: var(--ag-surface); color: var(--ag-fg); cursor: pointer; overflow: hidden; animation: ag-live-grow 420ms cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 0;\n  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1); }\n.ag-live .ag-live-card:hover { transform: translateY(-1px); }\n/* A running agent's card carries a thin travelling sheen along its top edge: work in progress without a glowing border. */\n.ag-live .ag-live-card[data-status=\"running\"]::before { content: \"\"; position: absolute; inset: 0 0 auto; height: 2px;\n  background: linear-gradient(90deg, transparent, var(--ag-status), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ag-live-sheen 2.4s ease-in-out infinite; }\n.ag-live .ag-live-head { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ag-live .ag-live-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }\n.ag-live .ag-live-name { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-meta, .ag-live .ag-live-stats { font-size: 11px; line-height: 14px; color: var(--ag-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; flex: none; }\n.ag-live .ag-live-pill { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 6px; border-radius: 8px; font-weight: 600; color: var(--ag-status);\n  background: color-mix(in oklab, var(--ag-status) 14%, transparent); }\n.ag-live .ag-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-status); }\n.ag-live [data-status=\"running\"] .ag-live-dot { animation: ag-live-breathe 1.6s ease-in-out infinite; }\n.ag-live .ag-live-thinking { flex: none; margin: 0; font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; animation: ag-live-in 260ms ease-out both; }\n.ag-live .ag-live-quiet { color: var(--ag-muted); }\n.ag-live .ag-live-events { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }\n.ag-live .ag-live-events li { display: flex; align-items: center; gap: 6px; height: 16px; font: 11px/16px var(--font-mono, ui-monospace, monospace); color: var(--ag-muted);\n  animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both; }\n.ag-live .ag-live-events li svg { flex: none; opacity: .8; }\n/* Older lines fade back so the newest reads first, as a log tail does. */\n.ag-live .ag-live-events li:nth-last-child(3) { opacity: .55; }\n.ag-live .ag-live-events li:nth-last-child(2) { opacity: .8; }\n.ag-live .ag-live-events li:last-child { color: var(--ag-fg); animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both, ag-live-flash 1.2s ease-out both; }\n.ag-live .ag-live-event-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-event-at { flex: none; font-family: inherit; color: var(--ag-muted); font-variant-numeric: tabular-nums; }\n.ag-live .ag-live-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }\n.ag-live .ag-live-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--ag-border); border-radius: 16px;\n  background: var(--ag-surface); color: var(--ag-muted); font-size: 12px; opacity: .72; cursor: pointer; animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both; }\n.ag-live .ag-live-chip-name { color: var(--ag-fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ag-live .ag-live-chip-result { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n@keyframes ag-live-sheen { from { background-position: -40% 0; } to { background-position: 140% 0; } }\n@keyframes ag-live-breathe { 50% { opacity: .35; transform: scale(.8); } }\n@keyframes ag-live-flash { from { background: color-mix(in oklab, var(--ag-status) 16%, transparent); } to { background: transparent; } }\n@keyframes ag-live-grow { from { opacity: 0; transform: scale(.92) translateY(-8px); } }\n@keyframes ag-live-in { from { opacity: 0; transform: translateY(6px); } }\n@keyframes ag-live-settle { from { opacity: 1; transform: scale(1.08); } }\n@media (prefers-reduced-motion: reduce) { .ag-live *, .ag-live *::before { animation: none !important; } .ag-live .ag-live-card:hover { transform: none; } }\n" }), /* @__PURE__ */ jsxs(ReactFlow, {
 			nodes: flowNodes,
 			edges: flowEdges,
 			nodeTypes: NODE_TYPES,
@@ -1168,7 +1037,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			zoomOnPinch: true,
 			zoomOnDoubleClick: false,
 			panOnDrag: true,
-			minZoom: .2,
+			minZoom,
 			maxZoom: 1.75,
 			"aria-label": "Agent topology",
 			children: [

package/dist/{WorkflowGraph-CbIFufIK.js → WorkflowGraph-DYsP_Kcg.js}

@@ -1,4 +1,4 @@
-import { A as buildWorkflowGraph, B as clampPreview, C as problemSurface, E as COMPACT_NODE_SIZE, F as worstSeverity, H as fmtDuration, N as triggerNodeIndex, P as wfEdgeId, S as problemBorder, T as statusBorder, V as fmtCost, W as fmtTokens, _ as StatusFooter, a as useColorMode, b as emptySlotLabel, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, j as isStructuralKind, l as ProblemMarker, m as STATUS_LABEL, p as STATUS_COLOR, r as SELECTION_OUTLINE, u as ProblemMessages, v as StatusPill, w as problemTitle, x as kindAccent, y as edgeColor, z as shortModel } from "./AgentGraph-Beld8p6x.js";
+import { A as buildWorkflowGraph, B as clampPreview, C as problemSurface, E as COMPACT_NODE_SIZE, F as worstSeverity, H as fmtDuration, N as triggerNodeIndex, P as wfEdgeId, S as problemBorder, T as statusBorder, V as fmtCost, W as fmtTokens, _ as StatusFooter, a as useColorMode, b as emptySlotLabel, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, j as isStructuralKind, l as ProblemMarker, m as STATUS_LABEL, p as STATUS_COLOR, r as SELECTION_OUTLINE, u as ProblemMessages, v as StatusPill, w as problemTitle, x as kindAccent, y as edgeColor, z as shortModel } from "./AgentGraph-CWW3Zx1N.js";
 import { n as classifyOutput, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
 import { t as loadElk } from "./elk-loader-Dl9S7jQk.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/globals.css

@@ -78,6 +78,7 @@
     --radius-xl: 12px;
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -4489,6 +4490,10 @@
     --tw-duration: var(--transition-fast);
     transition-duration: var(--transition-fast);
   }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);

package/dist/{index-D6gtWRHq.d.ts → index-UCV03IrH.d.ts}

@@ -1,4 +1,4 @@
-import { d as AgentGraphNode } from "./AgentGraph-DL-QLjkw.js";
+import { d as AgentGraphNode } from "./AgentGraph-DxAeQQch.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, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData, ToolCallData as ToolCallData$1, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent, showsTaskPriority, 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 { A as ToolCallType, B as TraceEvent, C as TaskListItem, D as ToolCallFeed, E as ToolCallData, F as AgentStreamRow, G as traceSpanMark, H as TraceWorkspaceProps, I as AgentStreamState, L as AgentTranscriptEntry, M as showsTaskPriority, N as taskProgress, O as ToolCallFeedProps, P as taskStatus, R as foldAgentRows, S as TaskList, T as TaskStatus, U as TraceWaterfall, V as TraceWorkspace, W as TraceWaterfallProps, _ 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 parseToolEvent, k as ToolCallStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as TaskListProps, x as RunRowStatusDot, y as RunRowShellProps, z as useAgentStream } from "./index-D6gtWRHq.js";
+import { A as ToolCallType, B as TraceEvent, C as TaskListItem, D as ToolCallFeed, E as ToolCallData, F as AgentStreamRow, G as traceSpanMark, H as TraceWorkspaceProps, I as AgentStreamState, L as AgentTranscriptEntry, M as showsTaskPriority, N as taskProgress, O as ToolCallFeedProps, P as taskStatus, R as foldAgentRows, S as TaskList, T as TaskStatus, U as TraceWaterfall, V as TraceWorkspace, W as TraceWaterfallProps, _ 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 parseToolEvent, k as ToolCallStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as TaskListProps, x as RunRowStatusDot, y as RunRowShellProps, z as useAgentStream } from "./index-UCV03IrH.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

@@ -13,7 +13,7 @@ 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 { a as MessageList, c as UserMessage, d as modelProvider, f as snapHarnessToModel, g as ReasoningLevelPicker, h as HARNESS_REASONING_OPTIONS, i as MessageAuthor, l as isViewerMessage, m as DEFAULT_REASONING_LEVEL_OPTIONS, n as ChatContainer, o as TRANSCRIPT_TEXT, p as AgentProfilePicker, r as ChatMessage, s as ThinkingIndicator, t as AgentTimeline, u as ArtifactAgentDock } from "./chat-4OZD23RA.js";
-import { _ as TraceWorkspace, a as InlineToolItem, b as TraceWaterfall, c as RunPhaseList, d as TaskList, f as ToolCallFeed, g as taskStatus, h as taskProgress, i as InlineThinkingItem, l as RunRowShell, m as showsTaskPriority, n as ApprovalDiffSummary, o as LiveDuration, p as parseToolEvent, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as foldAgentRows, x as traceSpanMark, y as useAgentStream } from "./run-CC-DESx8.js";
+import { _ as TraceWorkspace, a as InlineToolItem, b as TraceWaterfall, c as RunPhaseList, d as TaskList, f as ToolCallFeed, g as taskStatus, h as taskProgress, i as InlineThinkingItem, l as RunRowShell, m as showsTaskPriority, n as ApprovalDiffSummary, o as LiveDuration, p as parseToolEvent, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as foldAgentRows, x as traceSpanMark, y as useAgentStream } from "./run-C91XKDrv.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/{run-CC-DESx8.js → run-C91XKDrv.js}

@@ -1,7 +1,7 @@
 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 { t as AgentGraph } from "./AgentGraph-Beld8p6x.js";
+import { t as AgentGraph } from "./AgentGraph-CWW3Zx1N.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { X } from "lucide-react";
@@ -225,8 +225,11 @@ function agentOf(span, byId) {
 function agentGraphAt(spans, byId, at, epoch, cards) {
 	const nodes = [];
 	const edges = [];
+	const seen = /* @__PURE__ */ new Set();
 	for (const span of spans) {
 		if (span.kind !== "pipeline" || !span.id || at !== null && span.startMs > at) continue;
+		if (seen.has(span.id)) continue;
+		seen.add(span.id);
 		const running = at === null ? span.status === "running" : span.endMs > at || span.status === "running";
 		nodes.push({
 			id: span.id,
@@ -379,10 +382,10 @@ function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scorebo
 					}
 				})
 			}),
-			/* @__PURE__ */ jsx("section", {
+			files && /* @__PURE__ */ jsx("section", {
 				"aria-label": "Code at the cursor",
 				className: "flex min-h-[70vh] flex-col overflow-hidden rounded-xl border border-border bg-card",
-				children: files ?? /* @__PURE__ */ jsx(NotTimeIndexed, { label: "Files" })
+				children: files
 			}),
 			scoreboard && /* @__PURE__ */ jsx("section", {
 				"aria-label": "Scoreboard at the cursor",

package/dist/run.d.ts

@@ -1,2 +1,2 @@
-import { A as ToolCallType, B as TraceEvent, C as TaskListItem, D as ToolCallFeed, E as ToolCallData, F as AgentStreamRow, G as traceSpanMark, H as TraceWorkspaceProps, I as AgentStreamState, L as AgentTranscriptEntry, M as showsTaskPriority, N as taskProgress, O as ToolCallFeedProps, P as taskStatus, R as foldAgentRows, S as TaskList, T as TaskStatus, U as TraceWaterfall, V as TraceWorkspace, W as TraceWaterfallProps, _ 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 parseToolEvent, k as ToolCallStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as TaskListProps, x as RunRowStatusDot, y as RunRowShellProps, z as useAgentStream } from "./index-D6gtWRHq.js";
+import { A as ToolCallType, B as TraceEvent, C as TaskListItem, D as ToolCallFeed, E as ToolCallData, F as AgentStreamRow, G as traceSpanMark, H as TraceWorkspaceProps, I as AgentStreamState, L as AgentTranscriptEntry, M as showsTaskPriority, N as taskProgress, O as ToolCallFeedProps, P as taskStatus, R as foldAgentRows, S as TaskList, T as TaskStatus, U as TraceWaterfall, V as TraceWorkspace, W as TraceWaterfallProps, _ 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 parseToolEvent, k as ToolCallStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as TaskListProps, x as RunRowStatusDot, y as RunRowShellProps, z as useAgentStream } from "./index-UCV03IrH.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, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, 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, showsTaskPriority, taskProgress, taskStatus, traceSpanMark, useAgentStream };

package/dist/run.js

@@ -1 +1 @@
-export { t as ApprovalCard, n as ApprovalDiffSummary, r as ExpandedToolDetail, i as InlineThinkingItem, a as InlineToolItem, o as LiveDuration, s as RunGroup, c as RunPhaseList, l as RunRowShell, u as RunRowStatusDot, d as TaskList, f as ToolCallFeed, b as TraceWaterfall, _ as TraceWorkspace, v as foldAgentRows, p as parseToolEvent, m as showsTaskPriority, h as taskProgress, g as taskStatus, x as traceSpanMark, y as useAgentStream } from "./run-CC-DESx8.js";
+export { t as ApprovalCard, n as ApprovalDiffSummary, r as ExpandedToolDetail, i as InlineThinkingItem, a as InlineToolItem, o as LiveDuration, s as RunGroup, c as RunPhaseList, l as RunRowShell, u as RunRowStatusDot, d as TaskList, f as ToolCallFeed, b as TraceWaterfall, _ as TraceWorkspace, v as foldAgentRows, p as parseToolEvent, m as showsTaskPriority, h as taskProgress, g as taskStatus, x as traceSpanMark, y as useAgentStream } from "./run-C91XKDrv.js";

package/dist/styles.css

@@ -78,6 +78,7 @@
     --radius-xl: 12px;
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -4489,6 +4490,10 @@
     --tw-duration: var(--transition-fast);
     transition-duration: var(--transition-fast);
   }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);

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-DL-QLjkw.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-DxAeQQch.js";
 import { StatusTone } from "@tangle-network/ui/primitives";
 import { Component, ReactElement, ReactNode } from "react";
 import { LucideIcon } from "lucide-react";

package/dist/workflows.js

@@ -1,4 +1,4 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
-import { A as buildWorkflowGraph, D as TRIGGER_NODE_ID, I as actionPathLabel, L as humanizeIdentifier, M as triggerNodeId, N as triggerNodeIndex, O as actionNodeId, R as parseActionPath, c as NodeMark, g as STATUS_TONE, h as STATUS_PILL, k as branchNodeId, m as STATUS_LABEL, n as WorkflowGraph, p as STATUS_COLOR, s as KIND_ICON, t as AgentGraph, v as StatusPill, z as shortModel } from "./AgentGraph-Beld8p6x.js";
+import { A as buildWorkflowGraph, D as TRIGGER_NODE_ID, I as actionPathLabel, L as humanizeIdentifier, M as triggerNodeId, N as triggerNodeIndex, O as actionNodeId, R as parseActionPath, c as NodeMark, g as STATUS_TONE, h as STATUS_PILL, k as branchNodeId, m as STATUS_LABEL, n as WorkflowGraph, p as STATUS_COLOR, s as KIND_ICON, t as AgentGraph, v as StatusPill, z as shortModel } from "./AgentGraph-CWW3Zx1N.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": "1.1.0",
+  "version": "1.1.2",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {