@tangle-network/sandbox-ui 2.0.0 → 2.0.2

package/dist/{AgentGraph-B4uWLXlD.d.ts → AgentGraph-BqLPrigw.d.ts}

@@ -99,9 +99,9 @@ interface AgentGraphProps {
    * each call travelling along its edge in its kind's colour.
    */
   layout?: "tree" | "hub";
-  /** Hub layout: the tools and services agents call, drawn as outer nodes. */
+  /** Hub tools/services. Omit unreported inventory; [] records no tools. */
   tools?: readonly AgentGraphTool[];
-  /** Hub layout: recorded calls between nodes, newest last. They colour and animate edges and fill popovers. */
+  /** Hub calls, newest last. Omit unreported history; [] records no calls. They colour edges and fill popovers. */
   calls?: readonly AgentGraphCall[];
   /** Hub layout: draw the person who asked as "You". */
   you?: {

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

@@ -112,7 +112,7 @@ const AGENT_HUB_CSS = `
 .ag-pill-succeeded { color: var(--surface-success-text); }
 .ag-stats { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
 .ag-stats b, .ag-pop-call b, .ag-pop-foot b { color: var(--ag-fg); font-weight: 500; }
-.ag-canvas-wrap { position: relative; border: 1px solid var(--ag-border); border-radius: var(--radius-container); background: var(--bg-root); overflow: hidden; }
+.ag-canvas-wrap { position: relative; min-height: 0; border: 1px solid var(--ag-border); border-radius: var(--radius-container); background: var(--bg-root); overflow: auto; }
 .ag-canvas { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; }
 .ag-edges { position: absolute; inset: 0; overflow: visible; }
 .ag-edge { fill: none; stroke: color-mix(in srgb, var(--ag-muted) 80%, transparent); stroke-width: 1.25; }
@@ -613,8 +613,8 @@ function HubPopover({ entity, entities, calls, now, left, top, summary, closeRef
 				left,
 				top
 			} : {
-				left: Math.max(8, Math.min(left, container.clientWidth - dialog.offsetWidth - 8)),
-				top: Math.max(8, Math.min(top, container.clientHeight - height - 8)),
+				left: Math.max(container.scrollLeft + 8, Math.min(left, container.scrollLeft + container.clientWidth - dialog.offsetWidth - 8)),
+				top: Math.max(container.scrollTop + 8, Math.min(top, container.scrollTop + container.clientHeight - height - 8)),
 				maxHeight
 			};
 			setFitted((previous) => previous.left === next.left && previous.top === next.top && previous.maxHeight === next.maxHeight ? previous : next);
@@ -625,7 +625,7 @@ function HubPopover({ entity, entities, calls, now, left, top, summary, closeRef
 		observer.observe(container);
 		return () => observer.disconnect();
 	}, [left, top]);
-	const mine = calls.filter((c) => (c.from === entity.id || c.to === entity.id) && c.startedAt <= now).sort((a, b) => b.startedAt - a.startedAt);
+	const mine = (calls ?? []).filter((c) => (c.from === entity.id || c.to === entity.id) && c.startedAt <= now).sort((a, b) => b.startedAt - a.startedAt);
 	const recent = mine.slice(0, 5);
 	const lastMinute = mine.filter((c) => now - c.startedAt <= 6e4).length;
 	const status = entity.status ? statusMeta(entity.status).label : void 0;
@@ -730,13 +730,15 @@ function HubPopover({ entity, entities, calls, now, left, top, summary, closeRef
 			}),
 			/* @__PURE__ */ jsxs("p", {
 				className: "ag-pop-foot",
-				children: [
-					cost != null && /* @__PURE__ */ jsx("b", { children: fmtCost(cost) }),
-					lastMinute,
-					" ",
-					lastMinute === 1 ? "call" : "calls",
-					" in the last minute"
-				]
+				children: [cost != null && /* @__PURE__ */ jsx("b", { children: fmtCost(cost) }), /* @__PURE__ */ jsxs("span", {
+					title: calls === void 0 ? "Call history not reported" : void 0,
+					children: [
+						calls === void 0 ? "—" : lastMinute,
+						" ",
+						lastMinute === 1 ? "call" : "calls",
+						" in the last minute"
+					]
+				})]
 			})
 		]
 	});
@@ -841,7 +843,8 @@ function CallStroke({ call, d, length, now, forward, animate }) {
 		]
 	});
 }
-function AgentHubCanvas({ nodes, edges, tools = [], calls = [], you, now: nowProp, title = "Agent graph", selectedId, onSelect, className }) {
+function AgentHubCanvas(props) {
+	const { nodes, edges, tools = [], calls = [], you, now: nowProp, title = "Agent graph", selectedId, onSelect, className } = props;
 	const wrap = useRef(null);
 	const width = useWidth(wrap);
 	const now = useRunNow(nowProp);
@@ -984,7 +987,6 @@ function AgentHubCanvas({ nodes, edges, tools = [], calls = [], you, now: nowPro
 		return set;
 	}, [focus, layout]);
 	const availableTools = tools.filter((tool) => !visibleCalls.some((call) => call.from === tool.id || call.to === tool.id));
-	const agents = nodes.length;
 	const lastMinute = visibleCalls.filter((c) => now - c.startedAt <= 6e4).length;
 	const costs = nodes.map((n) => n.costUsd);
 	const cost = costs.every((c) => c != null && Number.isFinite(c) && c >= 0) ? costs.reduce((s, c) => s + (c ?? 0), 0) : void 0;
@@ -995,7 +997,10 @@ function AgentHubCanvas({ nodes, edges, tools = [], calls = [], you, now: nowPro
 		if (next) onSelect?.(next);
 	};
 	useEffect(() => {
-		if (open) closeRef.current?.focus({ preventScroll: true });
+		if (open) {
+			closeRef.current?.closest("[role=\"dialog\"]")?.scrollIntoView({ block: "nearest" });
+			closeRef.current?.focus({ preventScroll: true });
+		}
 	}, [open]);
 	const keydown = (id) => (event) => {
 		const dir = {
@@ -1041,7 +1046,7 @@ function AgentHubCanvas({ nodes, edges, tools = [], calls = [], you, now: nowPro
 		return /* @__PURE__ */ jsx(HubPopover, {
 			entity: openEntity,
 			entities,
-			calls: visibleCalls,
+			calls: props.calls === void 0 ? void 0 : visibleCalls,
 			now,
 			left,
 			top,
@@ -1087,16 +1092,22 @@ function AgentHubCanvas({ nodes, edges, tools = [], calls = [], you, now: nowPro
 						className: "ag-stats",
 						children: [
 							/* @__PURE__ */ jsxs("span", { children: [
-								/* @__PURE__ */ jsx("b", { children: agents }),
+								/* @__PURE__ */ jsx("b", { children: nodes.length }),
 								" ",
-								agents === 1 ? "agent" : "agents"
+								nodes.length === 1 ? "agent" : "agents"
 							] }),
-							/* @__PURE__ */ jsxs("span", { children: [
-								/* @__PURE__ */ jsx("b", { children: tools.length }),
-								" ",
-								tools.length === 1 ? "tool" : "tools"
-							] }),
-							/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("b", { children: lastMinute }), " calls/min"] }),
+							/* @__PURE__ */ jsxs("span", {
+								title: props.tools === void 0 ? "Tool history not reported" : void 0,
+								children: [
+									/* @__PURE__ */ jsx("b", { children: props.tools?.length ?? "—" }),
+									" ",
+									tools.length === 1 ? "tool" : "tools"
+								]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								title: props.calls === void 0 ? "Call history not reported" : void 0,
+								children: [/* @__PURE__ */ jsx("b", { children: props.calls === void 0 ? "—" : lastMinute }), " calls/min"]
+							}),
 							/* @__PURE__ */ jsxs("span", {
 								title: cost === void 0 ? "Not every agent recorded its cost" : "Total recorded agent cost",
 								children: [/* @__PURE__ */ jsx("b", { children: cost === void 0 ? "—" : fmtCost(cost) }), " cost"]
@@ -1247,7 +1258,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-BDjc7V_U.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-BV5TDDxF.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };
@@ -1307,7 +1318,7 @@ function WorkflowGraph(props) {
 * taking the pane down.
 */
 function lazyCanvas() {
-	return lazy(() => retryImport(() => import("./AgentGraphCanvas-Bcxq-e6E.js").then((m) => ({ default: m.AgentGraphCanvas }))));
+	return lazy(() => retryImport(() => import("./AgentGraphCanvas-CrNBjtIF.js").then((m) => ({ default: m.AgentGraphCanvas }))));
 }
 /** The agents as a list, for when the canvas cannot load. */
 function AgentListFallback({ nodes, selectedId, onSelect, className, onRetry }) {

package/dist/{AgentGraphCanvas-Bcxq-e6E.js → AgentGraphCanvas-CrNBjtIF.js}

@@ -1,7 +1,7 @@
 import { t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
-import { d as quietActivity, f as syncAmbient, g as useRunNow, h as useMotionAllowed, i as fmtCost, m as useAttention, o as fmtEventTime, p as tokenMilliseconds, s as fmtTokenTotal, u as ambientStyle } from "./AgentGraph-C1DsA-Rd.js";
-import { t as LatestEvents } from "./latest-events-B34ElSTE.js";
-import { P as shortModel, m as edgeColor, o as RESTING_BORDER, r as NodeMark, s as RESTING_SHADOW, t as KIND_ACCENT } from "./node-ui-Bfnh08U3.js";
+import { d as quietActivity, f as syncAmbient, g as useRunNow, h as useMotionAllowed, i as fmtCost, m as useAttention, o as fmtEventTime, p as tokenMilliseconds, s as fmtTokenTotal, u as ambientStyle } from "./AgentGraph-Du-GwOAI.js";
+import { t as LatestEvents } from "./latest-events-BzDy3Bdg.js";
+import { P as shortModel, m as edgeColor, o as RESTING_BORDER, r as NodeMark, s as RESTING_SHADOW, t as KIND_ACCENT } from "./node-ui-Cmi5ejnw.js";
 import { i as loadElk, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-DGd0fm1H.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -1093,9 +1093,12 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		};
 	});
 	const caption = /* @__PURE__ */ jsxs("div", {
-		className: "flex h-10 shrink-0 items-center gap-3 px-3 text-xs text-muted-foreground",
+		className: "flex min-h-10 shrink-0 flex-wrap items-center gap-x-3 gap-y-1 px-3 py-1 text-xs text-muted-foreground",
 		"aria-label": "Run status",
-		children: [/* @__PURE__ */ jsxs("span", { children: [nodes.length, " agents"] }), counts.filter((group) => group.matches.length).map((group) => /* @__PURE__ */ jsxs("button", {
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "shrink-0 whitespace-nowrap",
+			children: [nodes.length, " agents"]
+		}), counts.filter((group) => group.matches.length).map((group) => /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "ag-status-button rounded-full border border-border px-2 py-1",
 			style: { color: group.status === "quiet" ? "var(--surface-warning-text)" : agentStatus(group.status).color },

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

@@ -1,5 +1,5 @@
-import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-C1DsA-Rd.js";
-import { A as worstSeverity, E as isStructuralKind, O as triggerNodeIndex, P as shortModel, T as buildWorkflowGraph, _ as problemBorder, a as ProblemMessages, b as statusBorder, c as STATUS_COLOR, f as StatusFooter, g as kindAccent, h as emptySlotLabel, i as ProblemMarker, k as wfEdgeId, l as STATUS_LABEL, m as edgeColor, o as RESTING_BORDER, p as StatusPill, r as NodeMark, s as RESTING_SHADOW, v as problemSurface, x as COMPACT_NODE_SIZE, y as problemTitle } from "./node-ui-Bfnh08U3.js";
+import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-Du-GwOAI.js";
+import { A as worstSeverity, E as isStructuralKind, O as triggerNodeIndex, P as shortModel, T as buildWorkflowGraph, _ as problemBorder, a as ProblemMessages, b as statusBorder, c as STATUS_COLOR, f as StatusFooter, g as kindAccent, h as emptySlotLabel, i as ProblemMarker, k as wfEdgeId, l as STATUS_LABEL, m as edgeColor, o as RESTING_BORDER, p as StatusPill, r as NodeMark, s as RESTING_SHADOW, v as problemSurface, x as COMPACT_NODE_SIZE, y as problemTitle } from "./node-ui-Cmi5ejnw.js";
 import { n as classifyOutput, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
 import { i as loadElk, n as motionAllowed, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-DGd0fm1H.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/globals.css

@@ -9365,6 +9365,22 @@
     transition: opacity var(--duration-fast);
   }
 }
+.ag-status-button {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: max-content;
+  flex: 1 1 0%;
+  gap: 6px;
+}
+.ag-caption-target {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
 @container (width < 600px) {
   .ag-live-card {
     height: auto;
@@ -9380,6 +9396,9 @@
   .ag-caption-target {
     display: none;
   }
+  .ag-status-button {
+    flex: 0 0 auto;
+  }
   .ag-live-card.ag-live-chip {
     min-height: 40px;
     height: 40px;
@@ -9410,18 +9429,6 @@
 .ag-agent-card[data-status="needs-you"] p {
   -webkit-line-clamp: 1;
 }
-.ag-status-button {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  gap: 6px;
-}
-.ag-caption-target {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 600;
-}
 .ag-latest {
   flex: none;
   min-width: 0;

package/dist/{index-D9-IiEpQ.d.ts → index-CjGeAD3E.d.ts}

@@ -1,4 +1,4 @@
-import { d as AgentGraphNode, n as AgentGraphProps } from "./AgentGraph-B4uWLXlD.js";
+import { d as AgentGraphNode, n as AgentGraphProps } from "./AgentGraph-BqLPrigw.js";
 import { ReactNode } from "react";
 import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep, ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem as InlineThinkingItem$1, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunPhase, RunPhaseList, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, RunStatus, RunStatusIcon as RunStatusIcon$1, RunStatusIconProps, StatusMeta, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData, ToolCallData as ToolCallData$1, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent, runStatus as runStatus$1, showsTaskPriority, statusMeta as statusMeta$1, taskProgress, taskStatus } from "@tangle-network/ui/run";
 import { FlowWaterfallProps } from "@tangle-network/charts/react";

package/dist/index.d.ts

@@ -16,7 +16,7 @@ import { C as ChangedFile, D as SandboxArtifactTerminal, E as SandboxArtifactPan
 import { n as DiffViewProps, t as DiffView } from "./diff-view-DDHWtR6X.js";
 import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-Ta5GI4hx.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISchemaIssue, OpenUISchemaValidation, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
-import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-D9-IiEpQ.js";
+import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-CjGeAD3E.js";
 import { n as filterFileNodes, t as fileTreeFromPaths } from "./index-CrN4d8gd.js";
 import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, ChatSession, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, addMessage, addParts, bumpActiveSessionActivity, clearChat, connectSession, disconnectSession, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, partMapAtom, registerActiveSession, resetActiveSessions, sessionAtom, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores.js";
 import { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from "./types.js";

package/dist/index.js

@@ -12,8 +12,8 @@ import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as compute
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
 import { S as ReasoningLevelPicker, _ as modelProvider, a as ChatMessage, b as DEFAULT_REASONING_LEVEL_OPTIONS, c as SpeakerHeader, d as UserMessage, f as agentTimelineStepKind, g as ArtifactAgentDock, h as partitionBySpeaker, i as ChatContainer, l as TRANSCRIPT_TEXT, m as isViewerMessage, n as AgentTimelineColumn, o as MessageAuthor, p as foldSummary, r as AgentTimelineStep, s as MessageList, t as AgentTimeline, u as ThinkingIndicator, v as snapHarnessToModel, x as HARNESS_REASONING_OPTIONS, y as AgentProfilePicker } from "./chat-BrlLa4rg.js";
-import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-BqpdpP1K.js";
-import { t as LatestEvents } from "./latest-events-B34ElSTE.js";
+import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-BuSDqKNB.js";
+import { t as LatestEvents } from "./latest-events-BzDy3Bdg.js";
 import "./vault-tree.js";
 import { a as TangleLoginButton, i as UserMenu, n as GitHubLoginButton, r as LoginLayout, t as AuthHeader } from "./auth-BDpoZ_2f.js";
 import { t as AgentMessagingConnection } from "./connections-DymjzHe_.js";

package/dist/{latest-events-B34ElSTE.js → latest-events-BzDy3Bdg.js}

@@ -1,4 +1,4 @@
-import { g as useRunNow, h as useMotionAllowed, o as fmtEventTime, p as tokenMilliseconds } from "./AgentGraph-C1DsA-Rd.js";
+import { g as useRunNow, h as useMotionAllowed, o as fmtEventTime, p as tokenMilliseconds } from "./AgentGraph-Du-GwOAI.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";

package/dist/{node-ui-Bfnh08U3.js → node-ui-Cmi5ejnw.js}

@@ -1,6 +1,6 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
-import { r as clampPreview } from "./AgentGraph-C1DsA-Rd.js";
+import { r as clampPreview } from "./AgentGraph-Du-GwOAI.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";
 import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";

package/dist/{run-BqpdpP1K.js → run-BuSDqKNB.js}

@@ -1,8 +1,8 @@
 import { t as cn } from "./utils-BER_bdgE.js";
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
-import { f as syncAmbient, l as activityTiming, t as AgentGraph, u as ambientStyle } from "./AgentGraph-C1DsA-Rd.js";
-import { t as LatestEvents } from "./latest-events-B34ElSTE.js";
+import { f as syncAmbient, l as activityTiming, t as AgentGraph, u as ambientStyle } from "./AgentGraph-Du-GwOAI.js";
+import { t as LatestEvents } from "./latest-events-BzDy3Bdg.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { X } from "lucide-react";

package/dist/run.d.ts

@@ -1,2 +1,2 @@
-import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-D9-IiEpQ.js";
+import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-CjGeAD3E.js";
 export { type AgentStreamRow, type AgentStreamState, type AgentTranscriptEntry, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LatestEvents, type LatestEventsProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, type TraceEvent, TraceWaterfall, type TraceWaterfallProps, TraceWorkspace, type TraceWorkspaceProps, foldAgentRows, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream };

package/dist/run.js

@@ -1,3 +1,3 @@
-import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-BqpdpP1K.js";
-import { t as LatestEvents } from "./latest-events-B34ElSTE.js";
+import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-BuSDqKNB.js";
+import { t as LatestEvents } from "./latest-events-BzDy3Bdg.js";
 export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LatestEvents, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, TraceWaterfall, TraceWorkspace, foldAgentRows, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream };

package/dist/styles.css

@@ -9365,6 +9365,22 @@
     transition: opacity var(--duration-fast);
   }
 }
+.ag-status-button {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: max-content;
+  flex: 1 1 0%;
+  gap: 6px;
+}
+.ag-caption-target {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
 @container (width < 600px) {
   .ag-live-card {
     height: auto;
@@ -9380,6 +9396,9 @@
   .ag-caption-target {
     display: none;
   }
+  .ag-status-button {
+    flex: 0 0 auto;
+  }
   .ag-live-card.ag-live-chip {
     min-height: 40px;
     height: 40px;
@@ -9410,18 +9429,6 @@
 .ag-agent-card[data-status="needs-you"] p {
   -webkit-line-clamp: 1;
 }
-.ag-status-button {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  gap: 6px;
-}
-.ag-caption-target {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 600;
-}
 .ag-latest {
   flex: none;
   min-width: 0;

package/dist/tailwind.css

@@ -921,11 +921,14 @@
 .ag-phone-select { width: 100%; height: 100%; text-align: left; background: transparent; padding: 0; border: 0; color: inherit; cursor: pointer; }
 .agent-graph .react-flow__node-liveAgent:focus-visible .ag-live-card, .agent-graph .react-flow__node-agent:focus-visible > div, .ag-phone-select:focus-visible { outline: 2px solid hsl(var(--foreground) / .7); outline-offset: 2px; }
 @media (prefers-reduced-motion: reduce) { .ag-live-card { animation: none; transition: opacity var(--duration-fast); } }
+.ag-status-button { display: inline-flex; align-items: center; min-width: 0; max-width: max-content; flex: 1 1 0%; gap: 6px; }
+.ag-caption-target { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
 @container (width < 600px) {
   .ag-live-card { height: auto; min-height: 164px; }
   .ag-live-card[data-sparse="true"] { min-height: 88px; }
   .ag-phone-select .ag-agent-card { height: auto; min-height: 88px; }
   .ag-caption-target { display: none; }
+  .ag-status-button { flex: 0 0 auto; }
   .ag-live-card.ag-live-chip { min-height: 40px; height: 40px; }
 }
 .ag-live-accounting { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@@ -933,8 +936,6 @@
 .ag-live-chip-cost { flex: none; font-size: 12px; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
 .ag-parent-label { color: var(--ag-muted); font-size: 12px; font-weight: 400; }
 .ag-agent-card[data-status="needs-you"] p { -webkit-line-clamp: 1; }
-.ag-status-button { display: inline-flex; align-items: center; min-width: 0; gap: 6px; }
-.ag-caption-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
 .ag-latest { flex: none; min-width: 0; border-bottom: 1px solid hsl(var(--border)); padding: 8px 12px; color: hsl(var(--foreground)); font-size: 12px; line-height: 16px; }
 .ag-latest header { display: flex; align-items: center; min-height: 24px; gap: 8px; }
 .ag-latest header > span { color: hsl(var(--muted-foreground)); }

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

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
-import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-C1DsA-Rd.js";
-import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-Bfnh08U3.js";
+import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-Du-GwOAI.js";
+import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-Cmi5ejnw.js";
 import { n as classifyOutput, r as condenseText, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
 export { AgentGraph, KIND_ICON, ModelBrandStack, NodeMark, NodeOutputBody, StatusPill as NodeStatusPill, STATUS_COLOR, STATUS_LABEL, STATUS_PILL, STATUS_TONE, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, actionPathLabel, branchNodeId, buildWorkflowGraph, classifyOutput, condenseText, humanizeIdentifier, modelBrandFor, parseActionPath, shortModel, triggerNodeId, triggerNodeIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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.31.1",
-    "@tangle-network/charts": "^2.0.2",
+    "@tangle-network/charts": "^2.0.3",
     "@tangle-network/ui": "^11.51.1",
     "@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.10.2",
     "@tangle-network/brand": "^1.31.1",
-    "@tangle-network/charts": "^2.0.2",
+    "@tangle-network/charts": "^2.0.3",
     "@tanstack/react-query": "^5.104.5",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",