@tangle-network/sandbox-ui 0.138.1 → 0.139.0

package/dist/reveal-in-scroller-CzKwuqCG.js

@@ -0,0 +1,25 @@
+// src/lib/reveal-in-scroller.ts
+/**
+* Scrolls an element into view inside its nearest scrolling ancestor only. Element.scrollIntoView moves every scrolling
+* ancestor, the window included, so a pane that reveals its selection on load would jump the whole page.
+*/
+function revealInScroller(element, block = "nearest") {
+	let scroller = parentOf(element);
+	while (scroller && !scrolls(scroller)) scroller = parentOf(scroller);
+	if (!scroller || scroller === document.scrollingElement || scroller === document.body) return;
+	const box = scroller.getBoundingClientRect();
+	const target = element.getBoundingClientRect();
+	const above = target.top - box.top;
+	const below = target.bottom - box.top - scroller.clientHeight;
+	if (block === "center") scroller.scrollTop += above - (scroller.clientHeight - target.height) / 2;
+	else if (above < 0) scroller.scrollTop += above;
+	else if (below > 0) scroller.scrollTop += Math.min(below, above);
+}
+function parentOf(node) {
+	return node.parentElement ?? node.getRootNode().host ?? null;
+}
+function scrolls(node) {
+	const { overflowY } = getComputedStyle(node);
+	return (overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight;
+}
+export { revealInScroller as t };

package/dist/{run-CliTxkfw.js → run-CC-DESx8.js}

@@ -1,6 +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 { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { X } from "lucide-react";
@@ -219,6 +220,36 @@ function useAgentStream(url) {
 function agentOf(span, byId) {
 	for (let cursor = span; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return cursor;
 }
+/** The trace's agents as a spawn tree at the cursor: an agent not started by then is left out, one that ends after it is
+*  still running, so the Graph and the Timeline always show the same moment. */
+function agentGraphAt(spans, byId, at, epoch, cards) {
+	const nodes = [];
+	const edges = [];
+	for (const span of spans) {
+		if (span.kind !== "pipeline" || !span.id || at !== null && span.startMs > at) continue;
+		const running = at === null ? span.status === "running" : span.endMs > at || span.status === "running";
+		nodes.push({
+			id: span.id,
+			label: span.name,
+			model: span.detail,
+			costUsd: span.costUsd,
+			status: running ? "running" : span.status === "failed" ? "failed" : "succeeded",
+			startedAt: epoch === void 0 ? void 0 : epoch + span.startMs,
+			...cards?.[span.id]
+		});
+		const parent = span.parentId ? byId.get(span.parentId) : void 0;
+		const spawner = parent && agentOf(parent, byId);
+		if (spawner?.id) edges.push({
+			from: spawner.id,
+			to: span.id,
+			kind: "spawn"
+		});
+	}
+	return {
+		nodes,
+		edges
+	};
+}
 function timelineItems(entries, streaming) {
 	return entries.map((entry, index) => {
 		if (entry.kind === "message") return {
@@ -258,7 +289,7 @@ function NotTimeIndexed({ label }) {
 * streaming in a right-hand drawer, and the page's code workspace and scoreboard following the time cursor. Scrubbing is time travel:
 * every panel shows what was true at the cursor, and the conversation shows what had been said by then.
 */
-function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scoreboard, selectedAgentId, onSelectAgent, className, ...waterfall }) {
+function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scoreboard, selectedAgentId, onSelectAgent, agentCards, className, ...waterfall }) {
 	const byId = useMemo(() => new Map(trace.spans.flatMap((span) => span.id ? [[span.id, span]] : [])), [trace]);
 	const [ownSelection, setOwnSelection] = useState();
 	const selected = selectedAgentId ?? ownSelection;
@@ -278,6 +309,15 @@ function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scorebo
 		agent,
 		stream.entries
 	]);
+	const [view, setView] = useState("timeline");
+	const graph = useMemo(() => view === "graph" ? agentGraphAt(trace.spans, byId, cursor, waterfall.startedAt, agentCards) : void 0, [
+		view,
+		trace,
+		byId,
+		cursor,
+		waterfall.startedAt,
+		agentCards
+	]);
 	const shown = cursor === null || origin === void 0 ? stream.entries : stream.entries.filter((entry) => entry.at - origin <= cursor);
 	const items = useMemo(() => timelineItems(shown, cursor === null && stream.alive), [
 		shown,
@@ -300,20 +340,44 @@ function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scorebo
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("sandbox-trace-workspace flex min-h-0 flex-col gap-3", className),
 		children: [
-			/* @__PURE__ */ jsx(TraceWaterfall, {
-				...waterfall,
-				trace,
-				markers: events,
-				selectedId: agent?.id,
-				onDeselect: () => select(void 0),
-				onSelect: (span) => {
-					const owner = agentOf(span, byId);
-					if (owner?.id) select(owner.id);
-				},
-				onTimeChange: (t) => {
-					setCursor(t);
-					onTimeChange?.(t);
-				}
+			/* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": "Run view",
+				className: "flex gap-1 self-end rounded-lg border border-border bg-card p-0.5 text-sm",
+				children: ["timeline", "graph"].map((option) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-pressed": view === option,
+					onClick: () => setView(option),
+					className: "rounded-md px-3 py-1 capitalize text-muted-foreground aria-pressed:bg-muted aria-pressed:text-foreground",
+					children: option
+				}, option))
+			}),
+			graph && /* @__PURE__ */ jsx(AgentGraph, {
+				nodes: graph.nodes,
+				edges: graph.edges,
+				selectedId: agent?.id ?? null,
+				onSelect: select,
+				live: cursor === null && graph.nodes.some((node) => node.status === "running"),
+				now: cursor !== null && waterfall.startedAt !== void 0 ? waterfall.startedAt + cursor : void 0,
+				className: "h-[60vh] min-h-[480px] rounded-xl border border-border bg-card"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				hidden: view === "graph",
+				children: /* @__PURE__ */ jsx(TraceWaterfall, {
+					...waterfall,
+					trace,
+					markers: events,
+					selectedId: agent?.id,
+					onDeselect: () => select(void 0),
+					onSelect: (span) => {
+						const owner = agentOf(span, byId);
+						if (owner?.id) select(owner.id);
+					},
+					onTimeChange: (t) => {
+						setCursor(t);
+						onTimeChange?.(t);
+					}
+				})
 			}),
 			/* @__PURE__ */ jsx("section", {
 				"aria-label": "Code 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-C5h5T0nb.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";
 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-CliTxkfw.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-CC-DESx8.js";

package/dist/styles.css

@@ -835,6 +835,9 @@
     width: 100%;
     height: 100%;
   }
+  .\!h-1 {
+    height: var(--spacing) !important;
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -961,6 +964,9 @@
   .h-\[36rem\] {
     height: 36rem;
   }
+  .h-\[60vh\] {
+    height: 60vh;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -1201,12 +1207,18 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-\[480px\] {
+    min-height: 480px;
+  }
   .min-h-full {
     min-height: 100%;
   }
   .min-h-screen {
     min-height: 100vh;
   }
+  .\!w-1 {
+    width: var(--spacing) !important;
+  }
   .\!w-2 {
     width: calc(var(--spacing) * 2) !important;
   }
@@ -1729,6 +1741,9 @@
   .flex-none {
     flex: none;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -2112,6 +2127,9 @@
   .self-center {
     align-self: center;
   }
+  .self-end {
+    align-self: flex-end;
+  }
   .self-start {
     align-self: flex-start;
   }
@@ -3634,6 +3652,10 @@
     --tw-leading: 15px;
     line-height: 15px;
   }
+  .leading-\[18px\] {
+    --tw-leading: 18px;
+    line-height: 18px;
+  }
   .leading-\[inherit\] {
     --tw-leading: inherit;
     line-height: inherit;
@@ -3686,6 +3708,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[-0\.01em\] {
+    --tw-tracking: -0.01em;
+    letter-spacing: -0.01em;
+  }
   .tracking-\[0\.1em\] {
     --tw-tracking: 0.1em;
     letter-spacing: 0.1em;
@@ -4416,6 +4442,10 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .\!outline-none {
+    --tw-outline-style: none !important;
+    outline-style: none !important;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -4430,6 +4460,9 @@
   .\[-webkit-mask-image\:linear-gradient\(to_right\,transparent\,black_16px\,black_calc\(100\%-16px\)\,transparent\)\] {
     -webkit-mask-image: linear-gradient(to right,transparent,black 16px,black calc(100% - 16px),transparent);
   }
+  .\[animation-duration\:1\.6s\] {
+    animation-duration: 1.6s;
+  }
   .\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\] {
     transition: color var(--motion-control),background-color var(--motion-control),border-color var(--motion-control),box-shadow var(--motion-control),transform var(--motion-control),scale var(--motion-control),opacity var(--motion-control);
   }
@@ -4507,6 +4540,16 @@
       background-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent);
     }
   }
+  .group-focus-visible\/agent\:outline-2:is(:where(.group\/agent):focus-visible *) {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+  .group-focus-visible\/agent\:outline-offset-4:is(:where(.group\/agent):focus-visible *) {
+    outline-offset: 4px;
+  }
+  .group-focus-visible\/agent\:outline-ring:is(:where(.group\/agent):focus-visible *) {
+    outline-color: hsl(var(--ring));
+  }
   .group-data-\[state\=indeterminate\]\/checkbox\:block:is(:where(.group\/checkbox)[data-state="indeterminate"] *) {
     display: block;
   }
@@ -4559,10 +4602,18 @@
     --tw-content: '';
     content: var(--tw-content);
   }
+  .after\:pointer-events-none::after {
+    content: var(--tw-content);
+    pointer-events: none;
+  }
   .after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
   }
+  .after\:inset-0::after {
+    content: var(--tw-content);
+    inset: 0px;
+  }
   .after\:top-0::after {
     content: var(--tw-content);
     top: 0px;
@@ -4579,10 +4630,39 @@
     content: var(--tw-content);
     height: 2px;
   }
+  .after\:rounded-xl::after {
+    content: var(--tw-content);
+    border-radius: var(--radius-xl);
+  }
   .after\:bg-primary::after {
     content: var(--tw-content);
     background-color: hsl(var(--primary));
   }
+  .after\:opacity-0::after {
+    content: var(--tw-content);
+    opacity: 0%;
+  }
+  .after\:shadow-\[0_10px_28px_-10px_hsl\(var\(--foreground\)\/0\.45\)\]::after {
+    content: var(--tw-content);
+    --tw-shadow: 0 10px 28px -10px var(--tw-shadow-color, hsl(var(--foreground)/0.45));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .after\:transition-opacity::after {
+    content: var(--tw-content);
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .after\:duration-150::after {
+    content: var(--tw-content);
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
+  .after\:ease-out::after {
+    content: var(--tw-content);
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .first\:pt-0:first-child {
     padding-top: 0px;
   }
@@ -4608,6 +4688,10 @@
       --tw-translate-y: calc(var(--spacing) * -0.5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
+    .hover\:-translate-y-px:hover {
+      --tw-translate-y: -1px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
     .hover\:border-\[var\(--border-accent\)\]:hover {
       border-color: var(--border-accent);
     }
@@ -5041,6 +5125,10 @@
       --tw-brightness: brightness(110%);
       filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     }
+    .hover\:after\:opacity-100:hover::after {
+      content: var(--tw-content);
+      opacity: 100%;
+    }
   }
   .focus\:border-\[var\(--focus-border\)\]:focus {
     border-color: var(--focus-border);
@@ -5297,9 +5385,15 @@
   .aria-pressed\:bg-\[var\(--ix-sel-bg\)\][aria-pressed="true"] {
     background-color: var(--ix-sel-bg);
   }
+  .aria-pressed\:bg-muted[aria-pressed="true"] {
+    background-color: hsl(var(--muted));
+  }
   .aria-pressed\:text-\[var\(--accent-text\)\][aria-pressed="true"] {
     color: var(--accent-text);
   }
+  .aria-pressed\:text-foreground[aria-pressed="true"] {
+    color: hsl(var(--foreground));
+  }
   .aria-pressed\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][aria-pressed="true"] {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5574,6 +5668,11 @@
       }
     }
   }
+  @media (prefers-reduced-motion: no-preference) {
+    .motion-safe\:animate-spin {
+      animation: var(--animate-spin);
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .motion-reduce\:not-sr-only {
       position: static;
@@ -5594,6 +5693,16 @@
     .motion-reduce\:transition-none {
       transition-property: none;
     }
+    .motion-reduce\:after\:transition-none::after {
+      content: var(--tw-content);
+      transition-property: none;
+    }
+    @media (hover: hover) {
+      .motion-reduce\:hover\:translate-y-0:hover {
+        --tw-translate-y: 0px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
     .motion-reduce\:active\:scale-100:active {
       --tw-scale-x: 100%;
       --tw-scale-y: 100%;
@@ -6384,11 +6493,6 @@
   .tangle-prose .\[\.tangle-prose_\&\]\:no-underline\! {
     text-decoration-line: none !important;
   }
-  @media (hover:hover) {
-    .\[\@media\(hover\:hover\)\]\:opacity-0 {
-      opacity: 0%;
-    }
-  }
   @media (pointer:coarse) {
     .\[\@media\(pointer\:coarse\)\]\:min-h-10 {
       min-height: calc(var(--spacing) * 10);

package/dist/{tree-data-YXtcK6Ld.js → tree-data-Dmiu8aMf.js}

@@ -1,3 +1,4 @@
+import { t as revealInScroller } from "./reveal-in-scroller-CzKwuqCG.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ChevronRight, File, FileCode, FileImage, FileJson, FileSpreadsheet, FileText, Folder, FolderOpen } from "lucide-react";
@@ -202,7 +203,8 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 		const reveal = pendingRevealRef.current;
 		if (reveal && rowRefs.current.has(reveal)) {
 			pendingRevealRef.current = null;
-			rowRefs.current.get(reveal)?.scrollIntoView?.({ block: "nearest" });
+			const row = rowRefs.current.get(reveal);
+			if (row) revealInScroller(row);
 		}
 		const focus = pendingFocusRef.current;
 		if (focus && rowRefs.current.has(focus)) {

package/dist/vault-tree.js

@@ -1 +1 @@
-export { r as VAULT_TREE_CHILD_PAGE, i as VaultTree, t as fileTreeFromPaths, n as filterFileNodes } from "./tree-data-YXtcK6Ld.js";
+export { r as VAULT_TREE_CHILD_PAGE, i as VaultTree, t as fileTreeFromPaths, n as filterFileNodes } from "./tree-data-Dmiu8aMf.js";

package/dist/workbench/diff.js

@@ -1 +1 @@
-export { t as DiffView } from "../diff-view-A0O0Z_SR.js";
+export { t as DiffView } from "../diff-view-B9mNeTLF.js";

package/dist/{workbench-B3JL1qbt.js → workbench-DOgYO3Zg.js}

@@ -2,7 +2,7 @@ import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { a as PortsList } from "./dashboard-ClKA3opr.js";
 import { n as TerminalView } from "./terminal-nUCznZRj.js";
 import { RichFileTree } from "./files.js";
-import { a as CodeSurface, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-A0O0Z_SR.js";
+import { a as CodeSurface, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-B9mNeTLF.js";
 import { n as PreviewView } from "./embedded-app-view-DXsoPale.js";
 import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/workbench.js

@@ -1,4 +1,4 @@
-import { a as DiffStatsBadge, c as PillTabs, i as FileBreadcrumb, n as SandboxArtifactPane, o as GitStatusBadge, r as CodeView, s as PanelHeader, t as ChangesPane } from "./workbench-B3JL1qbt.js";
-import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-A0O0Z_SR.js";
+import { a as DiffStatsBadge, c as PillTabs, i as FileBreadcrumb, n as SandboxArtifactPane, o as GitStatusBadge, r as CodeView, s as PanelHeader, t as ChangesPane } from "./workbench-DOgYO3Zg.js";
+import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-B9mNeTLF.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
 export { CODE_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats };

package/dist/workflows.d.ts

@@ -1,6 +1,7 @@
 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 { StatusTone } from "@tangle-network/ui/primitives";
-import { ReactElement } from "react";
+import { Component, ReactElement, ReactNode } from "react";
 import { LucideIcon } from "lucide-react";
 import "@xyflow/react";
 import "@xyflow/react/dist/style.css";
@@ -670,4 +671,4 @@ export declare function NodeOutputBody({ shape, rows, tone }: {
   rows?: number | "none";
   tone?: "default" | "error";
 }): ReactElement | null;
-export { type ActionPathParts, type BuildWorkflowGraphOptions, type LeadCase, type ModelBrandIdentity, ModelBrandStack, StatusPill as NodeStatusPill, type OutputShape, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, type WfProblem, type WfProblemSeverity, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, modelBrandFor };
+export { type ActionPathParts, AgentGraph, type AgentGraphActivity, type AgentGraphCall, type AgentGraphCallKind, type AgentGraphDirection, type AgentGraphEdge, type AgentGraphEdgeKind, type AgentGraphEvent, type AgentGraphNode, type AgentGraphProps, type AgentGraphStatus, type AgentGraphTool, type BuildWorkflowGraphOptions, type LeadCase, type ModelBrandIdentity, ModelBrandStack, StatusPill as NodeStatusPill, type OutputShape, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, type WfProblem, type WfProblemSeverity, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, modelBrandFor };

package/dist/workflows.js

@@ -1,83 +1,4 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
-import { A as triggerNodeIndex, D as buildWorkflowGraph, E as branchNodeId, F as parseActionPath, I as shortModel, N as actionPathLabel, P as humanizeIdentifier, T as actionNodeId, a as NodeMark, d as STATUS_LABEL, f as STATUS_PILL, h as StatusPill, i as KIND_ICON, k as triggerNodeId, n as classifyOutput, p as STATUS_TONE, r as condenseText, t as NodeOutputBody, u as STATUS_COLOR, w as TRIGGER_NODE_ID } from "./node-output-udnwhShN.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Component, Suspense, lazy, useMemo, useState } from "react";
-// src/workflows/WorkflowGraphLazy.tsx
-/**
-* Lazy + error-isolated boundary for {@link WorkflowGraph}. React Flow (~50KB)
-* is only needed on the workflow detail page and on workflow proposal cards, so
-* it's code-split out of the always-loaded app shell. The Suspense fallback
-* keeps the caller's height so layout doesn't jump; the error boundary degrades
-* to the raw YAML if the chunk fails
-* to load (offline) or React Flow throws, instead of crashing the panel tree.
-*
-* The chunk import auto-retries a transient failure (a flaky network or an
-* HMR/cache miss) before degrading, and the fallback offers a manual retry that
-* re-attempts the import — so a recoverable failure isn't permanently pinned to
-* the YAML view. A chunk that is gone for good (e.g. an old hash after a deploy)
-* still degrades to the fully-legible YAML; the host can recover those globally
-* via a Vite `vite:preloadError` reload guard.
-*/
-/** Re-run `factory` up to `retries` times with a short backoff before giving up.
-*  Covers a transient dynamic-import rejection (network blip, a chunk briefly
-*  unavailable behind a CDN) without bothering the user. Exported for tests. */
-function retryImport(factory, retries = 2, delayMs = 350) {
-	return factory().catch((err) => {
-		if (retries <= 0) throw err;
-		return new Promise((resolve, reject) => {
-			setTimeout(() => retryImport(factory, retries - 1, delayMs).then(resolve, reject), delayMs);
-		});
-	});
-}
-function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-DXuWXMw9.js").then((m) => ({ default: m.WorkflowGraph }))));
-}
-var GraphErrorBoundary = class extends Component {
-	state = { hasError: false };
-	static getDerivedStateFromError() {
-		return { hasError: true };
-	}
-	render() {
-		return this.state.hasError ? this.props.fallback : this.props.children;
-	}
-};
-/** Graceful degradation when the graph can't render: the workflow is still
-*  fully legible as YAML, with a retry for a recoverable load failure. */
-function GraphFallback({ yaml, className, onRetry }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: `overflow-auto rounded-lg border border-border bg-background p-2 ${className ?? ""}`,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "mb-1 flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-xs",
-				children: "Couldn't render the graph — showing the definition."
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onRetry,
-				className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-muted-foreground text-xs transition hover:text-foreground",
-				children: "Retry"
-			})]
-		}), /* @__PURE__ */ jsx("pre", {
-			className: "text-foreground text-xs",
-			children: /* @__PURE__ */ jsx("code", { children: yaml })
-		})]
-	});
-}
-function WorkflowGraph(props) {
-	const [attempt, setAttempt] = useState(0);
-	const Impl = useMemo(() => lazyWorkflowGraph(), [attempt]);
-	return /* @__PURE__ */ jsx(GraphErrorBoundary, {
-		fallback: /* @__PURE__ */ jsx(GraphFallback, {
-			...props,
-			onRetry: () => setAttempt((a) => a + 1)
-		}),
-		children: /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx("div", {
-				className: `flex items-center justify-center rounded-lg border border-border border-dashed text-text-muted text-xs ${props.className ?? ""}`,
-				children: "Loading graph…"
-			}),
-			children: /* @__PURE__ */ jsx(Impl, { ...props })
-		})
-	}, `${props.yaml}::${attempt}`);
-}
-export { 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 };
+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 { 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/dist/{workspace-DRhi6S3o.js → workspace-C9TH6A2O.js}

@@ -1,7 +1,7 @@
 import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { r as ShellHeader } from "./shell-header-CwqDzC4I.js";
 import { t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
-import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-YXtcK6Ld.js";
+import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-Dmiu8aMf.js";
 import { ArtifactPane, ArtifactPane as ArtifactPane$1, Button, EmptyState, Input, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Markdown } from "@tangle-network/ui/markdown";

package/dist/workspace.js

@@ -1,3 +1,3 @@
 import { i as WorkspacePaneHeader, n as SHELL_INSET_GUTTER, r as ShellHeader, t as SHELL_HEADER_HEIGHT } from "./shell-header-CwqDzC4I.js";
-import { C as WorkspaceSurfaceTitle, S as WorkspaceSurfaceFrame, _ as StatusBar, a as TaskBoard, b as WorkspaceLayout, c as createShellShouldRevalidate, d as SESSION_CREATED_EVENT, f as dispatchSessionCreated, g as TerminalPanel, h as RuntimePane, i as CalendarView, l as shellShouldRevalidate, m as formatRelativeAge, n as WorkspaceFilesPane, o as SandboxWorkbench, p as useOptimisticSessionItems, r as ApprovalQueue, s as WorkspaceArtifactView, t as ArtifactPane, u as SessionSidebar, v as StatusBanner, x as WorkspaceSurface, y as DirectoryPane } from "./workspace-DRhi6S3o.js";
+import { C as WorkspaceSurfaceTitle, S as WorkspaceSurfaceFrame, _ as StatusBar, a as TaskBoard, b as WorkspaceLayout, c as createShellShouldRevalidate, d as SESSION_CREATED_EVENT, f as dispatchSessionCreated, g as TerminalPanel, h as RuntimePane, i as CalendarView, l as shellShouldRevalidate, m as formatRelativeAge, n as WorkspaceFilesPane, o as SandboxWorkbench, p as useOptimisticSessionItems, r as ApprovalQueue, s as WorkspaceArtifactView, t as ArtifactPane, u as SessionSidebar, v as StatusBanner, x as WorkspaceSurface, y as DirectoryPane } from "./workspace-C9TH6A2O.js";
 export { ApprovalQueue, ArtifactPane, CalendarView, DirectoryPane, RuntimePane, SESSION_CREATED_EVENT, SHELL_HEADER_HEIGHT, SHELL_INSET_GUTTER, SandboxWorkbench, SessionSidebar, ShellHeader, StatusBanner, StatusBar, TaskBoard, TerminalPanel, WorkspaceArtifactView, WorkspaceFilesPane, WorkspaceLayout, WorkspacePaneHeader, WorkspaceSurface, WorkspaceSurfaceFrame, WorkspaceSurfaceTitle, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/package.json

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