@tangle-network/sandbox-ui 0.117.3 → 0.118.0

package/dist/{WorkflowGraph-CzWs8P7y.js → WorkflowGraph-E2Gqe8sl.js}

@@ -2,7 +2,7 @@ import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB
 import { a as buildWorkflowGraph, c as triggerNodeIndex, d as providerLabel, f as shortModel, g as fmtTokens, h as fmtDuration, l as wfEdgeId, m as fmtCost, o as isStructuralKind, p as clampPreview, t as COMPACT_NODE_SIZE, u as worstSeverity } from "./model-I-NIxeM-.js";
 import { t as ProviderIcon } from "./provider-logo-BiuiO_c2.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Maximize2, Minimize2, Plus, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, X, Zap } from "lucide-react";
 import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, Panel, Position, ReactFlow, getSmoothStepPath, getViewportForBounds, useEdgesState, useNodesState } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
@@ -949,21 +949,34 @@ const lerp = (a, b, t) => a + (b - a) * t;
 /** The layout tween's easing — gentle into and out of the motion, so neither
 *  end of the morph reads as a snap. */
 const easeInOutCubic = (t) => t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-/** Tracks the app's dark/light class so React Flow's chrome (edges, controls,
-*  background) themes with the rest of the app. */
-function useColorMode() {
-	const [mode, setMode] = useState(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light");
-	useEffect(() => {
-		const el = document.documentElement;
-		const update = () => setMode(el.classList.contains("dark") ? "dark" : "light");
+/** React Flow adds its own .light/.dark class below the graph wrapper. Read
+* that wrapper's inherited scheme so a nested WorkspaceLayout theme wins over
+* the page root without React Flow's class influencing the answer. */
+function currentColorMode(anchor) {
+	if (typeof document === "undefined" || typeof window === "undefined") return "light";
+	const scheme = window.getComputedStyle(anchor ?? document.documentElement).colorScheme;
+	if (scheme.startsWith("dark")) return "dark";
+	if (scheme.startsWith("light")) return "light";
+	return (anchor ?? document.documentElement).closest(".dark") ? "dark" : "light";
+}
+function useColorMode(wrapperRef, hasGraph) {
+	const [mode, setMode] = useState(() => currentColorMode(null));
+	useLayoutEffect(() => {
+		const anchor = hasGraph ? wrapperRef.current : null;
+		const update = () => setMode(currentColorMode(anchor));
 		update();
 		const observer = new MutationObserver(update);
-		observer.observe(el, {
+		for (let el = anchor ?? document.documentElement; el; el = el.parentElement) observer.observe(el, {
 			attributes: true,
-			attributeFilter: ["class"]
+			attributeFilter: [
+				"class",
+				"data-theme",
+				"data-sandbox-theme",
+				"style"
+			]
 		});
 		return () => observer.disconnect();
-	}, []);
+	}, [wrapperRef, hasGraph]);
 	return mode;
 }
 /** Flow direction for the current graph, so the node component can place its
@@ -1608,7 +1621,6 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 	const insertAtNode = editable ? onNodeInsert : void 0;
 	const addTrigger = editable ? onTriggerAdd : void 0;
 	const deleteTrigger = editable ? onTriggerDelete : void 0;
-	const colorMode = useColorMode();
 	const isPreview = variant === "preview";
 	const [userCompact, setUserCompact] = useState(defaultCompact ?? nodeState === void 0);
 	/**
@@ -1646,6 +1658,7 @@ function WorkflowGraph({ yaml, variant = "full", direction = "LR", defaultCompac
 		insertArmed,
 		declaredEdges
 	]);
+	const colorMode = useColorMode(wrapperRef, !structural.error && structural.nodes.length > 0);
 	const nodeBoxes = useMemo(() => structural.nodes.map((node) => ({
 		x: node.position.x,
 		y: node.position.y,

package/dist/chat.js

@@ -1,2 +1,2 @@
-import { a as ThinkingIndicator, c as createFetchTransport, d as AgentProfilePicker, f as DEFAULT_REASONING_LEVEL_OPTIONS, i as MessageList, l as modelProvider, m as ReasoningLevelPicker, n as ChatContainer, o as UserMessage, p as HARNESS_REASONING_OPTIONS, r as ChatMessage, s as ArtifactAgentDock, t as AgentTimeline, u as snapHarnessToModel } from "./chat-Ci6Xi1rd.js";
+import { a as ThinkingIndicator, c as createFetchTransport, d as AgentProfilePicker, f as DEFAULT_REASONING_LEVEL_OPTIONS, i as MessageList, l as modelProvider, m as ReasoningLevelPicker, n as ChatContainer, o as UserMessage, p as HARNESS_REASONING_OPTIONS, r as ChatMessage, s as ArtifactAgentDock, t as AgentTimeline, u as snapHarnessToModel } from "./chat-Xqhcoxmw.js";
 export { AgentProfilePicker, AgentTimeline, ArtifactAgentDock, ChatContainer, ChatMessage, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MessageList, ReasoningLevelPicker, ThinkingIndicator, UserMessage, createFetchTransport, modelProvider, snapHarnessToModel };

package/dist/connections.js

@@ -1,2 +1,2 @@
-import { t as AgentMessagingConnection } from "./connections-DDRGYDvF.js";
+import { t as AgentMessagingConnection } from "./connections-C5DxYxvz.js";
 export { AgentMessagingConnection };

package/dist/connectors.js

@@ -2,8 +2,8 @@ import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { Badge, Button, EmptyState, Input } from "@tangle-network/ui/primitives";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { focusField } from "@tangle-network/ui/utils";
 import { Blocks, Check, ChevronDown, ChevronRight, Copy, Search } from "lucide-react";
+import { focusField } from "@tangle-network/ui/utils";
 //#region src/connectors/integration-step-yaml.ts
 function asSchemaObject(value) {
 	return typeof value === "object" && value !== null ? value : null;

package/dist/{dashboard-DdUTq0so.js → dashboard-D4un5GtD.js}

@@ -1,4 +1,4 @@
-import { Wt as Logo, o as Button$1 } from "./primitives-BnVvXgcl.js";
+import { Wt as Logo, o as Button$1 } from "./primitives-N-59i3-7.js";
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { n as MOTION_SURFACE, r as MOTION_TRAVEL, t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
 import { i as moonshot_default } from "./model-brand-hMyDTUqB.js";
@@ -7,10 +7,10 @@ import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, Dropd
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { useEffect, useRef, useState } from "react";
-import { focusField, focusFieldWithin, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
 import { createPortal } from "react-dom";
 import { Activity, BarChart2, Bell, Bot, Box, Camera, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Code2, Copy, Cpu, DollarSign, Download, ExternalLink, File, FileEdit, FilePlus, FileText, GitBranch, GitCommit, Globe, HardDrive, Key, Layers, Loader2, MemoryStick, MessageSquare, Monitor, MoreHorizontal, MoreVertical, Network, PanelLeft, Play, Plug, Plus, Power, PowerOff, RefreshCw, RotateCcw, Server, Settings, ShieldAlert, Skull, Terminal, Timer, Trash2, User, Users, Wrench, X, XCircle } from "lucide-react";
-import * as Select$1 from "@radix-ui/react-select";
+import { focusField, focusFieldWithin, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
+import * as Select from "@radix-ui/react-select";
 //#region src/dashboard/sidebar-context.tsx
 const PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";
 const RAIL_COLLAPSED_KEY = "sandbox-sidebar-rail-collapsed";
@@ -2415,7 +2415,7 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 	const current = backends.find((b) => b.type === selected);
 	const triggerText = current?.label ?? placeholder;
 	const ariaLabel = label ? `${label}: ${triggerText}` : triggerText;
-	const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(Select$1.Trigger, {
+	const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(Select.Trigger, {
 		"aria-label": ariaLabel,
 		className: cn$1("inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container", "px-2.5 text-xs font-medium text-foreground shadow-sm", "transition-colors duration-[var(--transition-fast)]", "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high", focusRing, "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high", "disabled:opacity-50 disabled:cursor-not-allowed", triggerClassName),
 		children: [
@@ -2428,12 +2428,12 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 				className: "sr-only",
 				children: current.description
 			}),
-			/* @__PURE__ */ jsx(Select$1.Icon, {
+			/* @__PURE__ */ jsx(Select.Icon, {
 				asChild: true,
 				children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" })
 			})
 		]
-	}) : /* @__PURE__ */ jsxs(Select$1.Trigger, {
+	}) : /* @__PURE__ */ jsxs(Select.Trigger, {
 		"aria-label": ariaLabel,
 		className: cn$1("flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]", "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left", "transition-colors duration-[var(--transition-fast)]", "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high", focusRing, "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high", "disabled:opacity-50 disabled:cursor-not-allowed", triggerClassName),
 		children: [/* @__PURE__ */ jsxs("span", {
@@ -2449,7 +2449,7 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 					children: current.description
 				})
 			]
-		}), /* @__PURE__ */ jsx(Select$1.Icon, {
+		}), /* @__PURE__ */ jsx(Select.Icon, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" })
 		})]
@@ -2459,16 +2459,16 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 		children: [variant === "field" && label && /* @__PURE__ */ jsx("label", {
 			className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]",
 			children: label
-		}), /* @__PURE__ */ jsxs(Select$1.Root, {
+		}), /* @__PURE__ */ jsxs(Select.Root, {
 			value: selected,
 			onValueChange: onChange,
-			children: [trigger, /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Content, {
+			children: [trigger, /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Content, {
 				position: "popper",
 				sideOffset: 4,
 				className: cn$1("z-50 max-h-[var(--radix-select-content-available-height)] overflow-hidden", variant === "pill" ? "min-w-[240px] max-w-[320px]" : "w-[var(--radix-select-trigger-width)]", "rounded-[var(--radius-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]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-1"),
-				children: /* @__PURE__ */ jsx(Select$1.Viewport, {
+				children: /* @__PURE__ */ jsx(Select.Viewport, {
 					className: "max-h-[min(24rem,calc(var(--radix-select-content-available-height)-2px))] overflow-y-auto overscroll-contain p-1",
-					children: backends.map((backend) => /* @__PURE__ */ jsxs(Select$1.Item, {
+					children: backends.map((backend) => /* @__PURE__ */ jsxs(Select.Item, {
 						value: backend.type,
 						className: cn$1("relative flex cursor-pointer select-none items-start gap-2.5 rounded-[var(--radius-sm)]", "px-3 py-2 text-sm outline-none", "transition-colors duration-[var(--transition-fast)]", "hover:bg-accent/50 focus:bg-accent/50", "data-[state=checked]:bg-[var(--accent-surface-soft)] data-[state=checked]:text-[var(--brand-primary)]"),
 						children: [backend.icon && /* @__PURE__ */ jsx("span", {
@@ -2476,7 +2476,7 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 							children: backend.icon
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "flex min-w-0 flex-col",
-							children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: /* @__PURE__ */ jsx("span", {
+							children: [/* @__PURE__ */ jsx(Select.ItemText, { children: /* @__PURE__ */ jsx("span", {
 								className: "font-medium",
 								children: backend.label
 							}) }), backend.description && /* @__PURE__ */ jsx("span", {

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-import { $ as SidebarRailNav, A as ResourceMeter, B as RailFlyout, C as InvoiceTable, D as canAdminSandbox, E as SandboxCard, F as CreditBalance, G as Sidebar, H as RailModeButton, I as ProfileAvatar, J as SidebarPanelContent, K as SidebarContent, L as RailButton, M as INSUFFICIENT_BALANCE_CODE, N as OutOfCreditsModal, O as ActivityFeed, P as parseInsufficientBalance, Q as SidebarRailHeader, R as RailCollapseToggle, S as PlanCards, T as NewSandboxCard, U as RailSeparator, V as RailHeader, W as RailThemeToggle, X as SidebarRail, Y as SidebarPanelHeader, Z as SidebarRailFooter, _ as HarnessPicker, a as ProcessList, at as SIDEBAR_TOTAL_WIDTH, b as HarnessLogo, c as UsageSummary, d as MetricAreaChart, et as RailTooltip, f as ProfileComparison, g as HARNESS_OPTIONS, h as DashboardLayout, i as NetworkConfig, it as SIDEBAR_RAIL_WIDTH, j as ClusterStatusBar, k as ResourceSnapshot, l as SystemLogsViewer, m as SidebarLayout, n as SnapshotList, nt as SIDEBAR_PANEL_WIDTH, o as PortsList, ot as SidebarProvider, p as ProfileSelector, q as SidebarPanel, r as BackendConfig, rt as SIDEBAR_RAIL_LABELED_WIDTH, s as GitPanel, st as useSidebar, t as PromoBanner, tt as SIDEBAR_MOBILE_WIDTH, u as VariantList, v as chatCapableHarnesses, w as SandboxTable, x as BackendSelector, y as HARNESS_BRAND, z as RailExpandable } from "./dashboard-DdUTq0so.js";
+import { $ as SidebarRailNav, A as ResourceMeter, B as RailFlyout, C as InvoiceTable, D as canAdminSandbox, E as SandboxCard, F as CreditBalance, G as Sidebar, H as RailModeButton, I as ProfileAvatar, J as SidebarPanelContent, K as SidebarContent, L as RailButton, M as INSUFFICIENT_BALANCE_CODE, N as OutOfCreditsModal, O as ActivityFeed, P as parseInsufficientBalance, Q as SidebarRailHeader, R as RailCollapseToggle, S as PlanCards, T as NewSandboxCard, U as RailSeparator, V as RailHeader, W as RailThemeToggle, X as SidebarRail, Y as SidebarPanelHeader, Z as SidebarRailFooter, _ as HarnessPicker, a as ProcessList, at as SIDEBAR_TOTAL_WIDTH, b as HarnessLogo, c as UsageSummary, d as MetricAreaChart, et as RailTooltip, f as ProfileComparison, g as HARNESS_OPTIONS, h as DashboardLayout, i as NetworkConfig, it as SIDEBAR_RAIL_WIDTH, j as ClusterStatusBar, k as ResourceSnapshot, l as SystemLogsViewer, m as SidebarLayout, n as SnapshotList, nt as SIDEBAR_PANEL_WIDTH, o as PortsList, ot as SidebarProvider, p as ProfileSelector, q as SidebarPanel, r as BackendConfig, rt as SIDEBAR_RAIL_LABELED_WIDTH, s as GitPanel, st as useSidebar, t as PromoBanner, tt as SIDEBAR_MOBILE_WIDTH, u as VariantList, v as chatCapableHarnesses, w as SandboxTable, x as BackendSelector, y as HARNESS_BRAND, z as RailExpandable } from "./dashboard-D4un5GtD.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 TemplateCard, o as BillingDashboard, r as UsageChart, t as InfoPanel } from "./info-panel-C9cqDzOL.js";
 export { ActivityFeed, BackendConfig, BackendSelector, BillingDashboard, ClusterStatusBar, CreditBalance, DashboardLayout, GitPanel, HARNESS_BRAND, HARNESS_OPTIONS, HarnessLogo, HarnessPicker, INSUFFICIENT_BALANCE_CODE, InfoPanel, InvoiceTable, MetricAreaChart, ModelBrandStack, NetworkConfig, NewSandboxCard, OutOfCreditsModal, PlanCards, PortsList, PricingPage, ProcessList, ProfileAvatar, ProfileComparison, ProfileSelector, PromoBanner, RailButton, RailCollapseToggle, RailExpandable, RailFlyout, RailHeader, RailModeButton, RailSeparator, RailThemeToggle, RailTooltip, ResourceMeter, ResourceSnapshot, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxTable, Sidebar, SidebarContent, SidebarLayout, SidebarPanel, SidebarPanelContent, SidebarPanelHeader, SidebarProvider, SidebarRail, SidebarRailFooter, SidebarRailHeader, SidebarRailNav, SnapshotList, SystemLogsViewer, TemplateCard, UsageChart, UsageSummary, VariantList, canAdminSandbox, canonicalModelId, chatCapableHarnesses, formatPrice, modelBrandFor, parseInsufficientBalance, useSidebar };