@tangle-network/sandbox-ui 2.0.11 → 2.0.13

package/dist/{node-ui-D8dbX86X.js → AgentGraph-CqLe8WCH.js}

@@ -1,9 +1,10 @@
 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-CFlI9qta.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 { AlertTriangle, Bell, Bot, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Wrench, Zap } from "lucide-react";
+import { RESTING_BORDER, RESTING_BORDER as RESTING_BORDER$1, RESTING_SHADOW, RESTING_SHADOW as RESTING_SHADOW$1, actionPathLabel, clampPreview, edgeColor, fmtCost, fmtDuration, fmtTokens, humanizeIdentifier, parseActionPath, shortModel } from "@tangle-network/charts/react/agent-graph/presentation";
 import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";
+import { AgentGraph } from "@tangle-network/charts/react/agent-graph";
 import { parse } from "yaml";
 // src/workflows/cron.ts
 /**
@@ -125,121 +126,6 @@ function describeCron(expression) {
 	if (day !== null && day >= 1 && day <= 31) return `Monthly on the ${ordinal(day)} at ${time}`;
 	return raw;
 }
-// src/workflows/naming.ts
-/**
-* Human-facing naming for workflow nodes. A definition addresses things by
-* machine identifier — an action kind (`agent.run`), a hub action path
-* (`github.pulls.reviews.create`), a profile slug (`pr-reviewer`) — and showing
-* those verbatim on a node makes the graph read like a config file. These turn
-* an identifier into the label a person would say out loud.
-*
-* Pure and dependency-free so the naming rules are unit-testable without the
-* YAML parser or a render.
-*/
-/** Identifier fragments that read as an initialism, so they are upper-cased
-*  whole rather than sentence-cased into "Pr" / "Api". */
-const ACRONYMS = /* @__PURE__ */ new Set([
-	"ai",
-	"api",
-	"cd",
-	"ci",
-	"cli",
-	"cpu",
-	"css",
-	"csv",
-	"db",
-	"dns",
-	"gpu",
-	"html",
-	"http",
-	"https",
-	"id",
-	"io",
-	"ip",
-	"json",
-	"llm",
-	"mcp",
-	"ml",
-	"pr",
-	"qa",
-	"sdk",
-	"sla",
-	"sql",
-	"ssh",
-	"ui",
-	"url",
-	"uuid",
-	"vm",
-	"yaml"
-]);
-/** Split a machine identifier into its words, on separators and camelCase humps. */
-function words(id) {
-	return id.replace(/[._\-/]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").trim().split(/\s+/).filter(Boolean);
-}
-/**
-* Humanize a machine identifier: `pr-reviewer` → "PR reviewer", `sandbox.spawn`
-* → "Sandbox spawn", `postMessage` → "Post message". Known initialisms are
-* upper-cased wherever they appear; `lead` picks the case of the rest.
-*
-*  - `sentence` (default): "Create issue comment" — a label or a title.
-*  - `lower`: "create issue comment" — a fragment that sits INSIDE a phrase
-*    ("On pull request"), where a capital would read as a new sentence. An
-*    initialism still wins: `ci_run_completed` → "CI run completed", never
-*    "cI run completed".
-*  - `title`: "Google Sheets" — a brand/proper name.
-*
-* An identifier that carries no word characters is returned verbatim rather than
-* blanked.
-*/
-function humanizeIdentifier(id, lead = "sentence") {
-	const parts = words(id);
-	if (parts.length === 0) return id;
-	return parts.map((word, i) => {
-		const lower = word.toLowerCase();
-		if (ACRONYMS.has(lower)) return lower.toUpperCase();
-		const capitalized = lower.charAt(0).toUpperCase() + lower.slice(1);
-		if (lead === "title") return capitalized;
-		if (i > 0) return lower;
-		return lead === "lower" ? lower : capitalized;
-	}).join(" ");
-}
-/** A model slug without its provider prefix (`anthropic/claude-sonnet-5` →
-*  `claude-sonnet-5`) — the vendor is noise on a card whose width is the scarce
-*  resource, and the full slug stays in the node's config for the detail view. */
-function shortModel(model) {
-	const slash = model.lastIndexOf("/");
-	return slash === -1 ? model : model.slice(slash + 1);
-}
-/** The charset a hub action path is made of (mirrors the server's path schema:
-*  `<provider>.<action…>`, letters/digits/`_`/`-` per segment). A value that
-*  isn't one — most importantly a `${…}` mapping expression, which also contains
-*  dots — must not be split into a bogus provider (whose brand logo we'd then go
-*  and fetch). */
-const ACTION_PATH = /^[a-z0-9_-]+(\.[a-z0-9_-]+)+$/i;
-/** Split a hub action path into provider / resource / operation. Null when the
-*  value isn't a dotted path (a `${…}` expression, or a bare word), so callers
-*  fall back to showing it verbatim instead of inventing structure. */
-function parseActionPath(path) {
-	if (!ACTION_PATH.test(path.trim())) return null;
-	const [provider, ...rest] = path.trim().split(".");
-	return {
-		provider,
-		operation: rest[rest.length - 1],
-		resource: rest.length > 1 ? rest.slice(0, -1).join(".") : void 0
-	};
-}
-/**
-* The operation label for an action path, in n8n's `operation: resource` shape:
-* `github.pulls.reviews.create` → "create: pulls.reviews", `slack.postMessage`
-* → "post message". The provider names the node itself (its title + logo), so
-* it is deliberately absent here. A path we can't split is shown verbatim.
-*/
-function actionPathLabel(path) {
-	const parts = parseActionPath(path);
-	if (!parts) return path;
-	const operation = humanizeIdentifier(parts.operation, "lower");
-	return parts.resource ? `${operation}: ${parts.resource}` : operation;
-}
 // src/workflows/provider-label.ts
 /**
 * Display label for a connector slug ("github" → "GitHub"). Separate from
@@ -1288,10 +1174,8 @@ function kindAccent(tone, kind) {
 	return (kind !== void 0 ? KIND_ACCENT[kind] : void 0) ?? TONE_ACCENT[tone];
 }
 /** Brand shadow channels stay black in dark mode. */
-const RESTING_SHADOW = "inset 0 1px 0 hsl(var(--foreground) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.08)";
 /** The resting card border: visible against the canvas in BOTH themes —
 *  `--border` vanished on dark. */
-const RESTING_BORDER = "hsl(var(--foreground) / 0.14)";
 /** Workflow waiting means human approval; peer waiting remains neutral in agent views. */
 const workflowStatus = (status) => status === "waiting" ? "needs-you" : status === "skipped" ? "stopped" : status;
 const workflowMeta = (status) => statusMeta(workflowStatus(status));
@@ -1312,9 +1196,6 @@ const STATUS_PILL = Object.fromEntries(workflowStatuses.map((status) => [status,
 	background: "transparent",
 	borderColor: "hsl(var(--border))"
 }]));
-function edgeColor(status) {
-	return status === "failed" || status === "waiting" ? STATUS_COLOR[status] : "color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent)";
-}
 function statusBorder(status) {
 	return {
 		borderColor: status === "failed" || status === "waiting" ? STATUS_COLOR[status] : RESTING_BORDER,
@@ -1583,4 +1464,43 @@ function NodeMark({ kind, provider, model, accent, tile }) {
 		})
 	});
 }
-export { worstSeverity as A, actionNodeId as C, triggerNodeId as D, isStructuralKind as E, humanizeIdentifier as M, parseActionPath as N, triggerNodeIndex as O, shortModel as P, TRIGGER_NODE_ID as S, buildWorkflowGraph as T, problemBorder as _, ProblemMessages as a, statusBorder as b, STATUS_COLOR as c, STATUS_TONE as d, StatusFooter as f, kindAccent as g, emptySlotLabel as h, ProblemMarker as i, actionPathLabel as j, wfEdgeId as k, STATUS_LABEL as l, edgeColor as m, KIND_ICON as n, RESTING_BORDER as o, StatusPill as p, NodeMark as r, RESTING_SHADOW as s, KIND_ACCENT as t, STATUS_PILL as u, problemSurface as v, branchNodeId as w, COMPACT_NODE_SIZE as x, problemTitle as y };
+// src/workflows/AgentGraph.tsx
+/** Sandbox identity around the canonical Charts multi-agent topology. */
+function agentMark(agent, layout, size) {
+	if (layout === "tree") return /* @__PURE__ */ jsx(NodeMark, {
+		kind: "agent.run",
+		model: agent.model ?? void 0,
+		accent: KIND_ACCENT["agent.run"],
+		tile: size
+	});
+	const brand = agent.model ? modelBrandFor(agent.model) : null;
+	return brand ? /* @__PURE__ */ jsx("span", {
+		className: "ag-model-mark",
+		children: /* @__PURE__ */ jsx(ModelBrandStack, {
+			identity: brand,
+			size: "sm"
+		})
+	}) : /* @__PURE__ */ jsx(Bot, {
+		size: 16,
+		"aria-hidden": true
+	});
+}
+function toolMark(tool, label, size) {
+	return tool?.provider ? /* @__PURE__ */ jsx(ProviderIcon, {
+		id: tool.provider,
+		displayName: label,
+		size: Math.round(size * .46),
+		className: "ag-model-mark"
+	}) : /* @__PURE__ */ jsx(Wrench, {
+		size: size * .4,
+		"aria-hidden": true
+	});
+}
+function AgentGraph$1(props) {
+	return /* @__PURE__ */ jsx(AgentGraph, {
+		renderAgentMark: agentMark,
+		renderToolMark: toolMark,
+		...props
+	});
+}
+export { worstSeverity as A, actionNodeId as C, triggerNodeId as D, isStructuralKind as E, clampPreview as F, fmtCost as I, fmtDuration as L, humanizeIdentifier as M, parseActionPath as N, triggerNodeIndex as O, shortModel as P, fmtTokens as R, TRIGGER_NODE_ID as S, buildWorkflowGraph as T, problemBorder as _, ProblemMessages as a, statusBorder as b, STATUS_COLOR as c, STATUS_TONE as d, StatusFooter as f, kindAccent as g, emptySlotLabel as h, ProblemMarker as i, actionPathLabel as j, wfEdgeId as k, STATUS_LABEL as l, edgeColor as m, KIND_ICON as n, RESTING_BORDER$1 as o, StatusPill as p, NodeMark as r, RESTING_SHADOW$1 as s, AgentGraph$1 as t, STATUS_PILL as u, problemSurface as v, branchNodeId as w, COMPACT_NODE_SIZE as x, problemTitle as y };

package/dist/AgentGraph-P7l-jZwo.d.ts

@@ -0,0 +1,4 @@
+import { AgentGraphActivity, AgentGraphCall, AgentGraphCallKind, AgentGraphDirection, AgentGraphEdge, AgentGraphEdgeKind, AgentGraphEvent, AgentGraphNode, AgentGraphProps, AgentGraphStatus, AgentGraphTool } from "@tangle-network/charts/react/agent-graph";
+interface AgentGraphProps$1 extends AgentGraphProps {}
+declare function AgentGraph$1(props: AgentGraphProps$1): import("react").JSX.Element;
+export { AgentGraphDirection as a, AgentGraphEvent as c, AgentGraphStatus as d, AgentGraphTool as f, AgentGraphCallKind as i, AgentGraphNode as l, AgentGraphActivity as n, AgentGraphEdge as o, AgentGraphCall as r, AgentGraphEdgeKind as s, AgentGraph$1 as t, AgentGraphProps$1 as u };

package/dist/{WorkflowGraph-BtJnA5iY.js → WorkflowGraph-s3RZ-ANZ.js}

@@ -1,10 +1,9 @@
-import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-CFlI9qta.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-D8dbX86X.js";
+import { A as worstSeverity, E as isStructuralKind, F as clampPreview, I as fmtCost, L as fmtDuration, O as triggerNodeIndex, P as shortModel, R as fmtTokens, 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$1, p as StatusPill, r as NodeMark, s as RESTING_SHADOW$1, v as problemSurface, x as COMPACT_NODE_SIZE, y as problemTitle } from "./AgentGraph-CqLe8WCH.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-aqWjGbfu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Expand, Maximize2, Minimize2, Plus, Shrink, X } from "lucide-react";
+import { SELECTION_OUTLINE, loadElk, motionAllowed, useColorMode } from "@tangle-network/charts/react/agent-graph/presentation";
 import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Panel, Position, ReactFlow, ViewportPortal, getSmoothStepPath, getViewportForBounds, useEdgesState, useNodesState, useStore } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 // src/workflows/flow-graph.ts
@@ -1190,8 +1189,8 @@ function WorkflowNode({ id, data, sourcePosition, targetPosition }) {
 					width: 76,
 					height: 76,
 					...state ? statusBorder(state.status) : problemSeverity ? problemBorder(problemSeverity) : {
-						borderColor: RESTING_BORDER,
-						boxShadow: RESTING_SHADOW
+						borderColor: RESTING_BORDER$1,
+						boxShadow: RESTING_SHADOW$1
 					},
 					...selected ? SELECTION_OUTLINE : {}
 				},
@@ -1260,8 +1259,8 @@ function WorkflowNode({ id, data, sourcePosition, targetPosition }) {
 		className: "relative flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors",
 		style: {
 			...runStatus ? statusBorder(runStatus) : problemSeverity ? problemBorder(problemSeverity) : {
-				borderColor: RESTING_BORDER,
-				boxShadow: RESTING_SHADOW
+				borderColor: RESTING_BORDER$1,
+				boxShadow: RESTING_SHADOW$1
 			},
 			...selected ? SELECTION_OUTLINE : {}
 		},

package/dist/{dashboard-FMrtIe9S.js → dashboard-D3JhmRhe.js}

@@ -1,7 +1,7 @@
-import { D as Button$1, zr as Logo } from "./primitives-CCdx5Hh_.js";
+import { D as Button$1, zr as Logo } from "./primitives-znfPK9NP.js";
 import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { r as ShellHeader } from "./shell-header-CwqDzC4I.js";
-import { n as MOTION_SURFACE, t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
+import { n as MOTION_SURFACE, t as MOTION_CONTROL } from "./motion-2Ine0j_s.js";
 import { a as moonshot_default } from "./model-brand-bTcMjQtB.js";
 import "./page-layout-CuOpvZys.js";
 import { Avatar, AvatarFallback, AvatarImage, Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger, Skeleton, StatCard, StatusPill } from "@tangle-network/ui/primitives";
@@ -555,7 +555,7 @@ function RailFlyout({ icon: Icon, label, description, isActive, showLabel, title
 						className: "text-sm font-medium",
 						children: label
 					}),
-					showLabel && /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn$1("ml-auto h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform", "[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)] motion-reduce:transition-none", open && "rotate-180") })
+					showLabel && /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn$1("ml-auto h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform", MOTION_CONTROL, open && "rotate-180") })
 				]
 			})
 		}), open && /* @__PURE__ */ jsxs("div", {
@@ -3039,7 +3039,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 									"aria-expanded": mobileNavOpen,
 									"aria-controls": "sidebar-mobile-nav",
 									"aria-haspopup": "dialog",
-									className: cn$1("flex size-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", "[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)] motion-reduce:transition-none"),
+									className: cn$1("flex size-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", MOTION_CONTROL),
 									children: /* @__PURE__ */ jsx(MenuIcon, { className: "size-5" })
 								})
 							}),

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-import { $ as useSidebar, A as parseInsufficientBalance, B as SidebarPanel, C as SandboxStatusPill, D as ResourceMeter, E as ResourceSnapshot, F as RailHeader, G as SidebarRailNav, H as SidebarPanelHeader, I as RailModeButton, J as SIDEBAR_PANEL_WIDTH, K as RailTooltip, L as RailSeparator, M as RailButton, N as RailExpandable, O as INSUFFICIENT_BALANCE_CODE, P as RailFlyout, Q as SidebarProvider, R as Sidebar, S as SANDBOX_STATUS, T as ActivityFeed, U as SidebarRail, V as SidebarPanelContent, W as SidebarRailFooter, X as SIDEBAR_RAIL_WIDTH, Y as SIDEBAR_RAIL_LABELED_WIDTH, Z as SIDEBAR_TOTAL_WIDTH, _ as BackendSelector, a as PortsList, b as SandboxCard, c as SystemLogsViewer, d as DashboardLayout, f as HARNESS_OPTIONS, g as HarnessLogo, h as HARNESS_BRAND, i as TemplateCard, j as ProfileAvatar, k as OutOfCreditsModal, l as MetricAreaChart, m as chatCapableHarnesses, n as SnapshotList, o as GitPanel, p as HarnessPicker, q as SIDEBAR_MOBILE_WIDTH, r as ProcessList, s as UsageSummary, t as PromoBanner, u as SidebarLayout, v as SandboxTable, w as sandboxStatus, x as canAdminSandbox, y as NewSandboxCard, z as SidebarContent } from "./dashboard-FMrtIe9S.js";
+import { $ as useSidebar, A as parseInsufficientBalance, B as SidebarPanel, C as SandboxStatusPill, D as ResourceMeter, E as ResourceSnapshot, F as RailHeader, G as SidebarRailNav, H as SidebarPanelHeader, I as RailModeButton, J as SIDEBAR_PANEL_WIDTH, K as RailTooltip, L as RailSeparator, M as RailButton, N as RailExpandable, O as INSUFFICIENT_BALANCE_CODE, P as RailFlyout, Q as SidebarProvider, R as Sidebar, S as SANDBOX_STATUS, T as ActivityFeed, U as SidebarRail, V as SidebarPanelContent, W as SidebarRailFooter, X as SIDEBAR_RAIL_WIDTH, Y as SIDEBAR_RAIL_LABELED_WIDTH, Z as SIDEBAR_TOTAL_WIDTH, _ as BackendSelector, a as PortsList, b as SandboxCard, c as SystemLogsViewer, d as DashboardLayout, f as HARNESS_OPTIONS, g as HarnessLogo, h as HARNESS_BRAND, i as TemplateCard, j as ProfileAvatar, k as OutOfCreditsModal, l as MetricAreaChart, m as chatCapableHarnesses, n as SnapshotList, o as GitPanel, p as HarnessPicker, q as SIDEBAR_MOBILE_WIDTH, r as ProcessList, s as UsageSummary, t as PromoBanner, u as SidebarLayout, v as SandboxTable, w as sandboxStatus, x as canAdminSandbox, y as NewSandboxCard, z as SidebarContent } from "./dashboard-D3JhmRhe.js";
 import { i as modelBrandFor, n as ProviderMark, r as canonicalModelId, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
 import { a as formatPrice, i as PricingPage, n as SandboxPageShell, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-CuOpvZys.js";
 export { ActivityFeed, BackendSelector, BillingDashboard, DashboardLayout, DashboardPageHeader, GitPanel, HARNESS_BRAND, HARNESS_OPTIONS, HarnessLogo, HarnessPicker, INSUFFICIENT_BALANCE_CODE, MetricAreaChart, ModelBrandStack, NewSandboxCard, OutOfCreditsModal, PortsList, PricingPage, ProcessList, ProfileAvatar, PromoBanner, ProviderMark, RailButton, RailExpandable, RailFlyout, RailHeader, RailModeButton, RailSeparator, RailTooltip, ResourceMeter, ResourceSnapshot, SANDBOX_STATUS, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxPageShell, SandboxStatusPill, SandboxTable, Sidebar, SidebarContent, SidebarLayout, SidebarPanel, SidebarPanelContent, SidebarPanelHeader, SidebarProvider, SidebarRail, SidebarRailFooter, SidebarRailNav, SnapshotList, SystemLogsViewer, TemplateCard, UsageChart, UsageSummary, canAdminSandbox, canonicalModelId, chatCapableHarnesses, formatPrice, modelBrandFor, parseInsufficientBalance, sandboxStatus, useSidebar };