@tangle-network/sandbox-ui 0.117.3 → 0.119.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-CnGK2S3A.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-BQGtwZX3.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,9 +7,9 @@ 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 { focusField, focusFieldWithin, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
 import * as Select$1 from "@radix-ui/react-select";
 //#region src/dashboard/sidebar-context.tsx
 const PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";

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-CnGK2S3A.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 };