@tangle-network/sandbox-ui 0.132.1 → 0.132.3

package/dist/{WorkflowGraph-Cx6SkrNJ.js → WorkflowGraph-m2uy9TDl.js}

@@ -1,4 +1,4 @@
-import { A as wfEdgeId, D as isStructuralKind, E as buildWorkflowGraph, F as shortModel, I as clampPreview, L as fmtCost, R as fmtDuration, S as COMPACT_NODE_SIZE, _ as kindAccent, a as NodeMark, b as problemTitle, c as RESTING_SHADOW, g as emptySlotLabel, h as edgeColor, j as worstSeverity, k as triggerNodeIndex, l as STATUS_COLOR, m as StatusPill, n as classifyOutput, o as ProblemMarker, p as StatusFooter, s as ProblemMessages, t as NodeOutputBody, u as STATUS_LABEL, v as problemBorder, x as statusBorder, y as problemSurface, z as fmtTokens } from "./node-output-BdfG5lt4.js";
+import { A as triggerNodeIndex, B as fmtTokens, C as COMPACT_NODE_SIZE, D as buildWorkflowGraph, I as shortModel, L as clampPreview, M as worstSeverity, O as isStructuralKind, R as fmtCost, S as statusBorder, _ as emptySlotLabel, a as NodeMark, b as problemSurface, c as RESTING_BORDER, d as STATUS_LABEL, g as edgeColor, h as StatusPill, j as wfEdgeId, l as RESTING_SHADOW, m as StatusFooter, n as classifyOutput, o as ProblemMarker, s as ProblemMessages, t as NodeOutputBody, u as STATUS_COLOR, v as kindAccent, x as problemTitle, y as problemBorder, z as fmtDuration } from "./node-output-BC5ZQ8R6.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Maximize2, Minimize2, Plus, X } from "lucide-react";
@@ -668,7 +668,7 @@ function WorkflowNode({ id, data, sourcePosition, targetPosition }) {
 					width: 76,
 					height: 76,
 					...state ? statusBorder(state.status) : problemSeverity ? problemBorder(problemSeverity) : {
-						borderColor: `color-mix(in srgb, ${accent} 45%, hsl(var(--border)))`,
+						borderColor: RESTING_BORDER,
 						boxShadow: RESTING_SHADOW
 					},
 					...selected ? SELECTION_OUTLINE : {}
@@ -733,12 +733,20 @@ 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: `color-mix(in srgb, ${accent} 45%, hsl(var(--border)))`,
+				borderColor: RESTING_BORDER,
 				boxShadow: RESTING_SHADOW
 			},
 			...selected ? SELECTION_OUTLINE : {}
 		},
-		children: [handles, children]
+		children: [
+			handles,
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-x-0 top-0 h-0.5",
+				style: { background: `color-mix(in srgb, ${accent} 70%, transparent)` }
+			}),
+			children
+		]
 	});
 	const identityRow = /* @__PURE__ */ jsxs("div", {
 		className: "flex shrink-0 items-center gap-2.5",

package/dist/{dashboard-BQDUxrn5.js → dashboard-CGtJ8Q_h.js}

@@ -539,7 +539,7 @@ function RailFlyout({ icon: Icon, label, isActive, showLabel, title, children, c
 			},
 			className: cn$1("absolute left-full top-0 z-50 ml-2 min-w-[12rem] p-1.5", "agent-pop-in", "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]"),
 			children: [/* @__PURE__ */ jsx("p", {
-				className: "px-2 pb-1 pt-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70 select-none",
+				className: "px-2 pb-1 pt-1 text-sm font-semibold uppercase tracking-wider text-muted-foreground/70 select-none",
 				children: title ?? label
 			}), children]
 		})]
@@ -677,7 +677,7 @@ function RailExpandable({ icon: Icon, label, href, isActive, showLabel, subItems
 		}, item.id);
 	};
 	const list = loading ? /* @__PURE__ */ jsx(SubItemsSkeleton, {}) : items && items.length > 0 ? items.map(subLink) : /* @__PURE__ */ jsx("p", {
-		className: "px-2.5 py-1.5 text-xs text-muted-foreground",
+		className: "px-2.5 py-1.5 text-sm text-muted-foreground",
 		children: emptyLabel
 	});
 	if (!showLabel) {
@@ -757,7 +757,7 @@ function RailExpandable({ icon: Icon, label, href, isActive, showLabel, subItems
 				},
 				className: cn$1("agent-pop-in z-[70] flex w-60 flex-col overflow-hidden p-1.5", "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]"),
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "shrink-0 px-2 pb-1 pt-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70 select-none",
+					className: "shrink-0 px-2 pb-1 pt-1 text-sm font-semibold uppercase tracking-wider text-muted-foreground/70 select-none",
 					children: label
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto",
@@ -911,7 +911,7 @@ function AppearanceMenuSection({ appearance, divider = true }) {
 	}), /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 flex-col leading-tight",
 		children: [/* @__PURE__ */ jsx("span", { children: "Appearance" }), /* @__PURE__ */ jsx("span", {
-			className: "text-xs text-muted-foreground",
+			className: "text-sm text-muted-foreground",
 			children: caption
 		})]
 	})] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
@@ -960,7 +960,7 @@ function ProfileAvatar({ user, isLoading = false, onLogout, onSettingsClick, set
 					src: user.avatarUrl,
 					alt: ""
 				}), /* @__PURE__ */ jsx(AvatarFallback, {
-					className: "text-xs font-medium bg-[var(--accent-surface-strong)] text-[var(--accent-text)]",
+					className: "text-sm font-medium bg-[var(--accent-surface-strong)] text-[var(--accent-text)]",
 					children: getInitials(user?.name, user?.email)
 				})]
 			}), showDetails && /* @__PURE__ */ jsx("div", {
@@ -998,11 +998,11 @@ function ProfileAvatar({ user, isLoading = false, onLogout, onSettingsClick, set
 								children: user?.name ?? user?.email ?? "Not logged in"
 							}),
 							user?.email && user?.name && /* @__PURE__ */ jsx("p", {
-								className: "text-xs text-muted-foreground truncate",
+								className: "text-sm text-muted-foreground truncate",
 								children: user.email
 							}),
 							user?.tier && /* @__PURE__ */ jsxs("p", {
-								className: "text-xs text-muted-foreground capitalize",
+								className: "text-sm text-muted-foreground capitalize",
 								children: [user.tier, " Plan"]
 							})
 						] })
@@ -2761,6 +2761,26 @@ const HIDE_BELOW_CLASS = {
 	md: "max-md:hidden",
 	lg: "max-lg:hidden"
 };
+/** The width at which each `hideBelow` breakpoint shows the rail again. */
+const DESKTOP_QUERY = {
+	md: "(min-width: 48rem)",
+	lg: "(min-width: 64rem)"
+};
+/**
+* Whether the rail is showing. A host without matchMedia (jsdom, an old
+* embedded webview) and the server both count as desktop.
+*/
+function useRailVisible(hideBelow) {
+	const query = hideBelow ? DESKTOP_QUERY[hideBelow] : void 0;
+	const subscribe = React$1.useCallback((onChange) => {
+		if (!query || typeof window.matchMedia !== "function") return () => {};
+		const media = window.matchMedia(query);
+		media.addEventListener("change", onChange);
+		return () => media.removeEventListener("change", onChange);
+	}, [query]);
+	const read = () => !query || typeof window.matchMedia !== "function" || window.matchMedia(query).matches;
+	return React$1.useSyncExternalStore(subscribe, read, () => true);
+}
 /** Inverse of {@link HIDE_BELOW_CLASS} — the mobile surfaces that stand in for
 *  the hidden rail show exactly where the rail does not. */
 const SHOW_BELOW_CLASS = {
@@ -2818,7 +2838,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 			return;
 		}
 		if (typeof window.matchMedia !== "function") return;
-		const desktop = window.matchMedia(hideBelow === "md" ? "(min-width: 48rem)" : "(min-width: 64rem)");
+		const desktop = window.matchMedia(DESKTOP_QUERY[hideBelow]);
 		const closeOnDesktop = () => {
 			if (desktop.matches) setMobileNavOpen(false);
 		};
@@ -2826,6 +2846,8 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 		desktop.addEventListener("change", closeOnDesktop);
 		return () => desktop.removeEventListener("change", closeOnDesktop);
 	}, [hideBelow, mobileNavOpen]);
+	const railVisible = useRailVisible(hideBelow);
+	const headerSlot = mobileNavOpen ? "drawer" : railVisible ? "rail" : "bar";
 	/**
 	* One nav list, rendered twice — once in the desktop rail, once in the mobile
 	* drawer. Sharing the renderer is the point: a product adds a destination to
@@ -2933,7 +2955,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 								onToggle: toggleRail,
 								collapsible: railLabels,
 								LinkComponent,
-								children: railHeaderContent
+								children: headerSlot === "rail" ? railHeaderContent : void 0
 							}),
 							/* @__PURE__ */ jsx(SidebarRailNav, {
 								className: cn$1(showLabels ? "px-2" : void 0, expandOnEmptyClick && "cursor-pointer"),
@@ -2979,7 +3001,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "flex min-w-0 flex-1 items-center",
-								children: railHeaderContent ?? (logo !== void 0 ? /* @__PURE__ */ jsx(Link, {
+								children: (headerSlot === "bar" ? railHeaderContent : void 0) ?? (logo !== void 0 ? /* @__PURE__ */ jsx(Link, {
 									href: logoHref,
 									to: logoHref,
 									className: "flex min-w-0 items-center",

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-BQDUxrn5.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-CGtJ8Q_h.js";
 import { n as canonicalModelId, r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
 import { a as formatPrice, i as PricingPage, n as SandboxPageShell, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-2IRtfx51.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, 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 };

package/dist/globals.css

@@ -731,6 +731,10 @@
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
   }
+  .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -797,6 +801,9 @@
   .\!h-2\.5 {
     height: calc(var(--spacing) * 2.5) !important;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1 {
     height: var(--spacing);
   }

package/dist/index.js

@@ -1,9 +1,9 @@
-import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-Bk52r7Th.js";
+import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-C6h_DkVv.js";
 import { $ as DialogClose, $n as formatCalendarDate, $t as SelectSeparator, A as Chip, An as Tabs, At as Input, B as ContextMenuLabel, Bn as Textarea, Bt as PopoverContent, C as Card, Cn as TableBody, Ct as DropdownMenuTrigger, D as CardHeader, Dn as TableHead, Dt as HelpText, E as CardFooter, En as TableFooter, Et as Heading, F as ContextMenu, Ft as PageShell, G as ContextMenuShortcut, Gn as Toolbar, Gt as SegmentedControl, H as ContextMenuRadioGroup, Hn as TimeSelect, Ht as Progress, I as ContextMenuCheckboxItem, In as TerminalDisplay, It as Pagination, J as ContextMenuSubTrigger, Jn as TooltipProvider, Jt as SelectGroup, K as ContextMenuSub, Kn as Tooltip, Kt as Select, L as ContextMenuContent, Lt as Popover, M as Collapsible, Mn as TabsList, Mt as Metric, N as CollapsibleContent, Nn as TabsTrigger, Nt as MetricStrip, O as CardTitle, On as TableHeader, Ot as IconTile, P as CollapsibleTrigger, Pn as Tag, Pt as PageHeader, Q as Dialog, Qn as buttonVariants, Qt as SelectScrollUpButton, R as ContextMenuGroup, Rt as PopoverAnchor, S as Calendar, Sn as Table, St as DropdownMenuSubTrigger, T as CardDescription, Tn as TableCell, Tt as FilterField, U as ContextMenuRadioItem, Un as ToastContainer, Ut as RadioGroup, V as ContextMenuPortal, Vn as ThemeToggle, Vt as PopoverTrigger, W as ContextMenuSeparator, Wn as ToastProvider, Wt as RadioGroupItem, X as CopyButton, Xn as UploadProgress, Xt as SelectLabel, Y as ContextMenuTrigger, Yn as TooltipTrigger, Yt as SelectItem, Z as DatePicker, Zn as badgeVariants, Zt as SelectScrollDownButton, _ as AvatarFallback, _n as Slider, _t as DropdownMenuRadioItem, a as AlertDialogCancel, an as SheetContent, ar as useToast, at as DialogPortal, b as Button, bn as Switch, bt as DropdownMenuSub, c as AlertDialogFooter, cn as SheetHeader, cr as TangleKnot, ct as DropZone, d as AlertDialogPortal, dn as SheetTitle, dt as DropdownMenuContent, en as SelectTrigger, er as initialsOf, et as DialogContent, f as AlertDialogTitle, fn as SheetTrigger, ft as DropdownMenuGroup, g as Avatar, gn as SkeletonTable, gt as DropdownMenuRadioGroup, hn as SkeletonCard, ht as DropdownMenuPortal, i as AlertDialogAction, in as SheetClose, ir as useTheme, it as DialogOverlay, j as CodeBlock, jn as TabsContent, jt as Label, k as Checkbox, kn as TableRow, kt as InlineCode, l as AlertDialogHeader, ln as SheetOverlay, lt as DropdownMenu, m as AlertTitle, mn as Skeleton, mt as DropdownMenuLabel, n as AlertDescription, nn as Separator, nr as parseCalendarDate, nt as DialogFooter, o as AlertDialogContent, on as SheetDescription, or as SectionTitle, ot as DialogTitle, p as AlertDialogTrigger, pn as SidebarDropZone, pt as DropdownMenuItem, q as ContextMenuSubContent, qn as TooltipContent, qt as SelectContent, r as AlertDialog, rn as Sheet, rr as toneFor, rt as DialogHeader, s as AlertDialogDescription, sn as SheetFooter, sr as Logo, st as DialogTrigger, t as Alert, tn as SelectValue, tr as localToday, tt as DialogDescription, u as AlertDialogOverlay, un as SheetPortal, ut as DropdownMenuCheckboxItem, v as AvatarImage, vn as StatCard, vt as DropdownMenuSeparator, w as CardContent, wn as TableCaption, wt as EmptyState, x as CATEGORY_TONES, xn as TONE_CLASSES, xt as DropdownMenuSubContent, y as Badge, yn as StatusPill, yt as DropdownMenuShortcut, z as ContextMenuItem, zn as TextShimmer, zt as PopoverClose } from "./primitives-KFAPbGBD.js";
 import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
 import { _ 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, y as DirectoryPane } from "./workspace-DLlilck6.js";
 import { i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as fileTreeFromPaths } from "./tree-data-DtoCNNBJ.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-BQDUxrn5.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-CGtJ8Q_h.js";
 import { n as canonicalModelId, r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
 import { a as formatPrice, i as PricingPage, n as SandboxPageShell, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-2IRtfx51.js";
 import { t as usePtySession } from "./use-pty-session-Bf4hBLXJ.js";

package/dist/{node-output-BdfG5lt4.js → node-output-BC5ZQ8R6.js}

@@ -2,7 +2,7 @@ import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB
 import { t as ProviderIcon } from "./provider-logo-X9PkbMIX.js";
 import { StatusPill } from "@tangle-network/ui/primitives";
 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, Box, Cable, Camera, Check, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";
 import { parse } from "yaml";
 //#region src/workflows/cron.ts
 /**
@@ -1275,53 +1275,71 @@ function buildWorkflowGraph(yaml, options) {
 */
 /** Track color behind a progress bar — a faint wash of the muted token. */
 const MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
-const TONE_ACCENT = {
-	trigger: "hsl(var(--primary))",
-	structural: "var(--surface-warning-text)",
-	action: "hsl(var(--muted-foreground))"
-};
-/** Per-KIND resting accents. A tone is layout vocabulary; a kind is identity:
-*  without this map every action node rests in the same neutral gray, and a
-*  pipeline of agent steps reads as one flat field against the canvas. Each
-*  accent is a semantic token (theme-reactive, defined by the host app), never
-*  a palette literal:
-*    agent.run          primary indigo — the workhorse carries the brand
-*    script.run         info           — code/compute
-*    sandbox.*          success        — provisioned infrastructure
-*    integration/notify info           — the outside world
-*  Run state still wins when a run is live: statusBorder recolors the border
-*  and the glow, so the resting identity never competes with the run's front. */
+/** Per-KIND accents — the QUIET identity channel. The 2026-10-09 canvas
+*  critique's first blocker: kind and state shared the same channel and hue
+*  family (sandbox-kind was green like DONE; structural-kind amber like
+*  WAITING; agent-kind indigo like RUNNING). The split:
+*    KIND  = the glyph-tile tint + a 2px top rule. Hues chosen to NEVER
+*           collide with the state family (green/amber/red are reserved
+*           for state alone).
+*    STATE = the border, ring, glow and fill (see statusBorder).
+* Kind hue duplicates are deliberate: shape + glyph carry identity; the
+* tint is a hint, not the signal. */
 const KIND_ACCENT = {
 	"agent.run": "hsl(var(--primary))",
 	"script.run": "var(--surface-info-text)",
-	"sandbox.spawn": "var(--surface-success-text)",
-	"sandbox.snapshot": "var(--surface-success-text)",
+	"sandbox.spawn": "hsl(var(--muted-foreground))",
+	"sandbox.snapshot": "hsl(var(--muted-foreground))",
 	"integration.invoke": "var(--surface-info-text)",
 	"line.send": "var(--surface-info-text)",
 	notify: "var(--surface-info-text)"
 };
+/** Structural kinds (parallel/foreach/decision) rest SLATE — amber is
+*  reserved for `waiting`, full stop. */
+const TONE_ACCENT = {
+	trigger: "hsl(var(--primary))",
+	structural: "hsl(var(--muted-foreground))",
+	action: "hsl(var(--muted-foreground))"
+};
 /** The accent a node presents at rest: its kind's identity when it has one,
 *  its tone otherwise (trigger/structural keep their tone-driven accents). */
 function kindAccent(tone, kind) {
 	return (kind !== void 0 ? KIND_ACCENT[kind] : void 0) ?? TONE_ACCENT[tone];
 }
-/** Resting elevation: the quiet card still sits ON the canvas rather than in
-*  it. Foreground-token shadows so both themes get depth without a dark-mode
-*  black box. */
-const RESTING_SHADOW = "0 1px 2px hsl(var(--foreground) / 0.08), 0 10px 28px -16px hsl(var(--foreground) / 0.28)";
+/** Resting elevation — the 2026-10-09 critique's depth finding: the card
+*  sat FLAT on the canvas (three near-identical greys, borders invisible).
+*  The card must sit ON the canvas, not in it: a real two-layer shadow plus a
+*  1px inner top highlight, foreground-token based so both themes get depth
+*  without a dark-mode black box. */
+const RESTING_SHADOW = "inset 0 1px 0 hsl(var(--foreground) / 0.07), 0 1px 2px hsl(var(--foreground) / 0.10), 0 12px 32px -14px hsl(var(--foreground) / 0.40)";
+/** The resting card border: visible against the canvas in BOTH themes —
+*  `--border` vanished on dark. */
+const RESTING_BORDER = "hsl(var(--foreground) / 0.14)";
 const STATUS_QUEUED = "hsl(var(--muted-foreground))";
+const STATUS_DONE = "var(--surface-success-text)";
+const STATUS_FAILED = "var(--surface-danger-text)";
+const STATUS_RUNNING = "hsl(var(--primary))";
+/** A run blocked on a human borrows the warning surface — the same amber the
+*  design system uses for "needs attention". It must never read as the primary
+*  "running" accent: the workflow is not working, it is waiting on the viewer. */
+const STATUS_WAITING = "var(--surface-warning-text)";
 const STATUS_COLOR = {
 	queued: STATUS_QUEUED,
-	running: "hsl(var(--primary))",
-	waiting: "var(--surface-warning-text)",
-	succeeded: "var(--surface-success-text)",
-	failed: "var(--surface-danger-text)"
+	running: STATUS_RUNNING,
+	waiting: STATUS_WAITING,
+	succeeded: STATUS_DONE,
+	failed: STATUS_FAILED
 };
-/** An edge is colored by the status of the node it points AT, so the run's
-*  "front" lights up. Neutral for a not-yet-reached (queued) target or the
-*  static definition view (`undefined`). */
+/** An edge reads by the status of the node it points AT — with the 2026-10-09
+*  fix: SETTLED edges go quiet. A succeeded run used to paint every edge green
+*  ("the green wall"); now only the live front carries color: running keeps
+*  primary, waiting amber, failed danger, and succeeded/queued sit at a quiet
+*  neutral so the eye finds the front, not the history. */
 function edgeColor(status) {
-	return status ? STATUS_COLOR[status] : STATUS_QUEUED;
+	if (status === "running") return STATUS_RUNNING;
+	if (status === "waiting") return STATUS_WAITING;
+	if (status === "failed") return STATUS_FAILED;
+	return "color-mix(in srgb, hsl(var(--muted-foreground)) 38%, transparent)";
 }
 const STATUS_LABEL = {
 	queued: "Queued",
@@ -1362,21 +1380,32 @@ const STATUS_PILL = {
 		borderColor: "var(--surface-danger-border)"
 	}
 };
-/** The card's border + ring once a node has live run state, so the running node
-*  and the terminal ones read at a glance. Returned as inline style (not classes)
-*  because the status colors are semantic tokens, not palette shades. */
+/** The card's border + ring once a node has live run state. The emphasis
+*  law (the critique's second blocker, inverted): the EXCEPTION is the
+*  loudest thing on the canvas —
+*    failed   saturated danger + a halo wider than running's
+*    waiting  amber + glow (the node the viewer must act on)
+*    running  primary + glow (the live front)
+*    succeeded QUIET: a neutral border, no ring, no glow — done is the
+*             resting state of a healthy run and must not shout */
 function statusBorder(status) {
-	const color = STATUS_COLOR[status];
 	switch (status) {
-		case "running":
-		case "waiting": return {
-			borderColor: color,
-			boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 45%, transparent), 0 0 24px -6px ${color}`
+		case "failed": return {
+			borderColor: STATUS_FAILED,
+			boxShadow: `0 0 0 2px color-mix(in srgb, ${STATUS_FAILED} 55%, transparent), 0 0 32px -4px color-mix(in srgb, ${STATUS_FAILED} 70%, transparent), inset 0 1px 0 hsl(var(--foreground) / 0.07), 0 1px 2px hsl(var(--foreground) / 0.10), 0 12px 32px -14px hsl(var(--foreground) / 0.40)`
 		};
+		case "running":
+		case "waiting": {
+			const color = STATUS_COLOR[status];
+			return {
+				borderColor: color,
+				boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 45%, transparent), 0 0 24px -6px ${color}`
+			};
+		}
 		case "queued": return { borderColor: "hsl(var(--border))" };
-		default: return {
-			borderColor: color,
-			boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 35%, transparent)`
+		case "succeeded": return {
+			borderColor: RESTING_BORDER,
+			boxShadow: RESTING_SHADOW
 		};
 	}
 }
@@ -1530,7 +1559,7 @@ const STATUS_TONE = {
 	queued: "neutral",
 	running: "running",
 	waiting: "warning",
-	succeeded: "success",
+	succeeded: "neutral",
 	failed: "danger"
 };
 /** The status pill in a card's header — the one place the run state is spelled
@@ -1539,6 +1568,19 @@ const STATUS_TONE = {
 *  longest label is two words ("Waiting on you") and the pill is often nested a
 *  level below the flex row it sits in. */
 function StatusPill$1({ status }) {
+	if (status === "succeeded") return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium leading-4",
+		style: {
+			background: "color-mix(in srgb, hsl(var(--muted-foreground)) 10%, transparent)",
+			color: "hsl(var(--muted-foreground))",
+			borderColor: "color-mix(in srgb, hsl(var(--muted-foreground)) 26%, transparent)"
+		},
+		children: [/* @__PURE__ */ jsx(Check, {
+			className: "size-2.5",
+			strokeWidth: 3,
+			"aria-hidden": true
+		}), STATUS_LABEL[status]]
+	});
 	return /* @__PURE__ */ jsx(StatusPill, {
 		tone: STATUS_TONE[status],
 		className: "shrink-0",
@@ -1572,7 +1614,7 @@ function StatusFooter({ status, rounds, cost, tokens, elapsed }) {
 				...status === "running" ? { "data-motion": "essential" } : {},
 				style: {
 					width: progressFill(status),
-					background: STATUS_COLOR[status]
+					background: status === "succeeded" ? "color-mix(in srgb, hsl(var(--muted-foreground)) 26%, transparent)" : STATUS_COLOR[status]
 				}
 			})
 		}), /* @__PURE__ */ jsxs("div", {
@@ -1815,4 +1857,4 @@ function NodeOutputBody({ shape, rows = 2, tone = "default" }) {
 	});
 }
 //#endregion
-export { wfEdgeId as A, TRIGGER_NODE_ID as C, isStructuralKind as D, buildWorkflowGraph as E, shortModel as F, clampPreview as I, fmtCost as L, actionPathLabel as M, humanizeIdentifier as N, triggerNodeId as O, parseActionPath as P, fmtDuration as R, COMPACT_NODE_SIZE as S, branchNodeId as T, kindAccent as _, NodeMark as a, problemTitle as b, RESTING_SHADOW as c, STATUS_PILL as d, STATUS_TONE as f, emptySlotLabel as g, edgeColor as h, KIND_ICON as i, worstSeverity as j, triggerNodeIndex as k, STATUS_COLOR as l, StatusPill$1 as m, classifyOutput as n, ProblemMarker as o, StatusFooter as p, condenseText as r, ProblemMessages as s, NodeOutputBody as t, STATUS_LABEL as u, problemBorder as v, actionNodeId as w, statusBorder as x, problemSurface as y, fmtTokens as z };
+export { triggerNodeIndex as A, fmtTokens as B, COMPACT_NODE_SIZE as C, buildWorkflowGraph as D, branchNodeId as E, parseActionPath as F, shortModel as I, clampPreview as L, worstSeverity as M, actionPathLabel as N, isStructuralKind as O, humanizeIdentifier as P, fmtCost as R, statusBorder as S, actionNodeId as T, emptySlotLabel as _, NodeMark as a, problemSurface as b, RESTING_BORDER as c, STATUS_LABEL as d, STATUS_PILL as f, edgeColor as g, StatusPill$1 as h, KIND_ICON as i, wfEdgeId as j, triggerNodeId as k, RESTING_SHADOW as l, StatusFooter as m, classifyOutput as n, ProblemMarker as o, STATUS_TONE as p, condenseText as r, ProblemMessages as s, NodeOutputBody as t, STATUS_COLOR as u, kindAccent as v, TRIGGER_NODE_ID as w, problemTitle as x, problemBorder as y, fmtDuration as z };

package/dist/styles.css

@@ -731,6 +731,10 @@
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
   }
+  .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -797,6 +801,9 @@
   .\!h-2\.5 {
     height: calc(var(--spacing) * 2.5) !important;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1 {
     height: var(--spacing);
   }

package/dist/{workbench-Bk52r7Th.js → workbench-C6h_DkVv.js}

@@ -1,5 +1,5 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { a as PortsList } from "./dashboard-BQDUxrn5.js";
+import { a as PortsList } from "./dashboard-CGtJ8Q_h.js";
 import { n as TerminalView } from "./terminal-DmSUfGha.js";
 import { RichFileTree } from "./files.js";
 import { n as PreviewView } from "./embedded-app-view-CMRPEvon.js";

package/dist/workbench.js

@@ -1,3 +1,3 @@
-import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-Bk52r7Th.js";
+import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-C6h_DkVv.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CMRPEvon.js";
 export { BRAND_PRISM_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats, resolveLanguage };

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
-import { C as TRIGGER_NODE_ID, E as buildWorkflowGraph, F as shortModel, M as actionPathLabel, N as humanizeIdentifier, O as triggerNodeId, P as parseActionPath, T as branchNodeId, a as NodeMark, d as STATUS_PILL, f as STATUS_TONE, i as KIND_ICON, k as triggerNodeIndex, l as STATUS_COLOR, m as StatusPill, n as classifyOutput, r as condenseText, t as NodeOutputBody, u as STATUS_LABEL, w as actionNodeId } from "./node-output-BdfG5lt4.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-BC5ZQ8R6.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Component, Suspense, lazy, useMemo, useState } from "react";
 //#region src/workflows/WorkflowGraphLazy.tsx
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-Cx6SkrNJ.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-m2uy9TDl.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.132.1",
+  "version": "0.132.3",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {