@tangle-network/sandbox-ui 2.0.0 → 2.0.1

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

@@ -1247,7 +1247,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-BcGSF2W_.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };
@@ -1307,7 +1307,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-BwFppclI.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-BwFppclI.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-P7V_oEOv.js";
+import { t as LatestEvents } from "./latest-events-MXv4SYzc.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-C1WEjoGO.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-BcGSF2W_.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-P7V_oEOv.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-C1WEjoGO.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.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-ByG1psJn.js";
+import { t as LatestEvents } from "./latest-events-MXv4SYzc.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-MXv4SYzc.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-P7V_oEOv.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-C1WEjoGO.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-P7V_oEOv.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-ByG1psJn.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-P7V_oEOv.js";
+import { t as LatestEvents } from "./latest-events-MXv4SYzc.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.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-ByG1psJn.js";
+import { t as LatestEvents } from "./latest-events-MXv4SYzc.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.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-P7V_oEOv.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-C1WEjoGO.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.1",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {