@tangle-network/sandbox-ui 1.1.0 → 1.1.1

package/dist/{AgentGraph-Beld8p6x.js → AgentGraph-CiaKH13k.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-CmPjsJA6.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-FT8XUEC6.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-FT8XUEC6.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-CiaKH13k.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);
+				})
 			})
 		]
 	});
@@ -1141,7 +1008,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,

package/dist/{WorkflowGraph-CbIFufIK.js → WorkflowGraph-CmPjsJA6.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-CiaKH13k.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-CUcmbRvq.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-CUcmbRvq.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-CiaKH13k.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 { 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-CUcmbRvq.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-CiaKH13k.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.1",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {