@tangle-network/sandbox-ui 0.16.1 → 0.16.2

package/dist/{chunk-X3UATIZH.js → chunk-5I363RL7.js}

@@ -666,8 +666,34 @@ function NewSandboxCard({ onClick, className }) {
 }
 
 // src/dashboard/sandbox-table.tsx
-import { Terminal as Terminal2, Code2 as Code22, Key, Trash2 as Trash22, RefreshCw, ChevronLeft, ChevronRight, Users as Users2, User, Play as Play2 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import * as React3 from "react";
+import {
+  Activity as Activity2,
+  BarChart2 as BarChart22,
+  ChevronLeft,
+  ChevronRight,
+  Clock as Clock2,
+  Code2 as Code22,
+  Copy as Copy2,
+  ExternalLink,
+  Key,
+  MoreVertical as MoreVertical2,
+  Play as Play2,
+  PowerOff as PowerOff2,
+  RefreshCw,
+  Terminal as Terminal2,
+  Trash2 as Trash22,
+  User,
+  Users as Users2
+} from "lucide-react";
+import {
+  DropdownMenu as DropdownMenu3,
+  DropdownMenuContent as DropdownMenuContent3,
+  DropdownMenuItem as DropdownMenuItem3,
+  DropdownMenuSeparator as DropdownMenuSeparator3,
+  DropdownMenuTrigger as DropdownMenuTrigger3
+} from "@tangle-network/ui/primitives";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var statusColors = {
   running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
   hibernating: { dot: "bg-muted-foreground", text: "text-muted-foreground", bar: "bg-muted-foreground" },
@@ -705,6 +731,11 @@ function SandboxTable({
   onWake,
   onMore,
   onDelete,
+  onStop,
+  onKeepAlive,
+  onUsage,
+  onHealth,
+  onFork,
   className
 }) {
   const totalCount = total ?? sandboxes.length;
@@ -812,7 +843,7 @@ function SandboxTable({
                   /* @__PURE__ */ jsx7(MiniMeter, { label: "RAM", percent: 0 })
                 ] }) : null }),
                 /* @__PURE__ */ jsx7("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-1", children: [
-                  isActive && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+                  isActive && /* @__PURE__ */ jsxs6(Fragment5, { children: [
                     /* @__PURE__ */ jsx7("button", { type: "button", onClick: (e) => {
                       stopRowClick(e);
                       onOpenIDE?.(sb.id);
@@ -842,10 +873,80 @@ function SandboxTable({
                       ]
                     }
                   ),
-                  onMore && /* @__PURE__ */ jsx7("button", { type: "button", onClick: (e) => {
-                    stopRowClick(e);
-                    onMore(sb.id);
-                  }, className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", children: /* @__PURE__ */ jsx7(Code22, { className: "h-4 w-4" }) }),
+                  (() => {
+                    const runItem = (handler) => (e) => {
+                      e.stopPropagation();
+                      handler(sb.id);
+                    };
+                    const overflowSections = [];
+                    if (isActive) {
+                      const lifecycle = [];
+                      if (onStop) lifecycle.push(
+                        /* @__PURE__ */ jsxs6(DropdownMenuItem3, { onClick: runItem(onStop), children: [
+                          /* @__PURE__ */ jsx7(PowerOff2, { className: "mr-2 h-4 w-4" }),
+                          " Stop Sandbox"
+                        ] }, "stop")
+                      );
+                      if (onKeepAlive) lifecycle.push(
+                        /* @__PURE__ */ jsxs6(DropdownMenuItem3, { onClick: runItem(onKeepAlive), children: [
+                          /* @__PURE__ */ jsx7(Clock2, { className: "mr-2 h-4 w-4" }),
+                          " Keep Alive"
+                        ] }, "keep-alive")
+                      );
+                      if (lifecycle.length) overflowSections.push(lifecycle);
+                      const observability = [];
+                      if (onUsage) observability.push(
+                        /* @__PURE__ */ jsxs6(DropdownMenuItem3, { onClick: runItem(onUsage), children: [
+                          /* @__PURE__ */ jsx7(BarChart22, { className: "mr-2 h-4 w-4" }),
+                          " View Usage"
+                        ] }, "usage")
+                      );
+                      if (onHealth) observability.push(
+                        /* @__PURE__ */ jsxs6(DropdownMenuItem3, { onClick: runItem(onHealth), children: [
+                          /* @__PURE__ */ jsx7(Activity2, { className: "mr-2 h-4 w-4" }),
+                          " Health Check"
+                        ] }, "health")
+                      );
+                      if (observability.length) overflowSections.push(observability);
+                      if (onFork) overflowSections.push([
+                        /* @__PURE__ */ jsxs6(DropdownMenuItem3, { onClick: runItem(onFork), children: [
+                          /* @__PURE__ */ jsx7(Copy2, { className: "mr-2 h-4 w-4" }),
+                          " Fork Sandbox"
+                        ] }, "fork")
+                      ]);
+                    } else if (isResumable(sb.status)) {
+                      if (onFork) overflowSections.push([
+                        /* @__PURE__ */ jsxs6(DropdownMenuItem3, { onClick: runItem(onFork), children: [
+                          /* @__PURE__ */ jsx7(Copy2, { className: "mr-2 h-4 w-4" }),
+                          " Fork Sandbox"
+                        ] }, "fork")
+                      ]);
+                    }
+                    if (onMore) overflowSections.push([
+                      /* @__PURE__ */ jsxs6(DropdownMenuItem3, { onClick: runItem(onMore), children: [
+                        /* @__PURE__ */ jsx7(ExternalLink, { className: "mr-2 h-4 w-4" }),
+                        " View Details"
+                      ] }, "view-details")
+                    ]);
+                    if (overflowSections.length === 0) return null;
+                    return /* @__PURE__ */ jsxs6(DropdownMenu3, { children: [
+                      /* @__PURE__ */ jsx7(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx7(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: stopRowClick,
+                          className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90 outline-none",
+                          "aria-label": "More actions",
+                          title: "More actions",
+                          children: /* @__PURE__ */ jsx7(MoreVertical2, { className: "h-4 w-4" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx7(DropdownMenuContent3, { align: "end", className: "min-w-[180px]", children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs6(React3.Fragment, { children: [
+                        sectionIdx > 0 && /* @__PURE__ */ jsx7(DropdownMenuSeparator3, {}),
+                        section
+                      ] }, sectionIdx)) })
+                    ] });
+                  })(),
                   onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx7("button", { type: "button", onClick: (e) => {
                     stopRowClick(e);
                     onDelete(sb.id);
@@ -1115,9 +1216,9 @@ function HarnessPicker({
 }
 
 // src/dashboard/dashboard-layout.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { Plus as Plus2, Bell } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function SettingsIconSmall({ className }) {
   return /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
     /* @__PURE__ */ jsx12("title", { children: "Settings" }),
@@ -1178,10 +1279,10 @@ function DashboardLayoutInner({
   notifications: notifData
 }) {
   const Link = LinkComponent;
-  const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
-  const [notificationsOpen, setNotificationsOpen] = React3.useState(false);
-  const notifRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [mobileMenuOpen, setMobileMenuOpen] = React4.useState(false);
+  const [notificationsOpen, setNotificationsOpen] = React4.useState(false);
+  const notifRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!notificationsOpen) return;
     const handler = (e) => {
       if (notifRef.current && !notifRef.current.contains(e.target)) {
@@ -1199,21 +1300,21 @@ function DashboardLayoutInner({
     };
   }, [notificationsOpen]);
   const { contentMargin, hidden, mode, hasPanels, panelOpen } = useSidebar();
-  const modeSet = React3.useMemo(() => new Set(modeItems), [modeItems]);
-  const sidebarUser = React3.useMemo(
+  const modeSet = React4.useMemo(() => new Set(modeItems), [modeItems]);
+  const sidebarUser = React4.useMemo(
     () => user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0,
     [user?.email, user?.name, user?.tier, user?.avatarUrl]
   );
   const activePanel = panels.find((p) => p.mode === mode);
-  const buildSidebarContent = React3.useCallback(
-    (showLabels) => /* @__PURE__ */ jsxs10(Fragment6, { children: [
+  const buildSidebarContent = React4.useCallback(
+    (showLabels) => /* @__PURE__ */ jsxs10(Fragment7, { children: [
       /* @__PURE__ */ jsxs10(SidebarRail, { wide: showLabels, children: [
         /* @__PURE__ */ jsx12(SidebarRailHeader, { children: /* @__PURE__ */ jsx12(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-muted/50", children: /* @__PURE__ */ jsx12(Logo, { variant, size: "sm", iconOnly: true }) }) }),
         /* @__PURE__ */ jsx12(SidebarRailNav, { children: navItems.map((item, i) => {
           const isMode = modeSet.has(item.id);
           const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
           const showSep = i > 0 && isMode && !prevIsMode;
-          return /* @__PURE__ */ jsxs10(React3.Fragment, { children: [
+          return /* @__PURE__ */ jsxs10(React4.Fragment, { children: [
             showSep && /* @__PURE__ */ jsx12(RailSeparator, {}),
             isMode ? /* @__PURE__ */ jsx12(
               RailModeButton,
@@ -1278,8 +1379,8 @@ function DashboardLayoutInner({
       mode
     ]
   );
-  const sidebarContent = React3.useMemo(() => buildSidebarContent(false), [buildSidebarContent]);
-  const mobileSidebarContent = React3.useMemo(() => buildSidebarContent(true), [buildSidebarContent]);
+  const sidebarContent = React4.useMemo(() => buildSidebarContent(false), [buildSidebarContent]);
+  const mobileSidebarContent = React4.useMemo(() => buildSidebarContent(true), [buildSidebarContent]);
   return /* @__PURE__ */ jsxs10("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsxs10(
       "nav",
@@ -1417,14 +1518,14 @@ import { Check as Check2, ChevronDown as ChevronDown2, Plus as Plus3, Settings }
 import { Button } from "@tangle-network/ui/primitives";
 import { Badge } from "@tangle-network/ui/primitives";
 import {
-  DropdownMenu as DropdownMenu3,
-  DropdownMenuContent as DropdownMenuContent3,
-  DropdownMenuItem as DropdownMenuItem3,
+  DropdownMenu as DropdownMenu4,
+  DropdownMenuContent as DropdownMenuContent4,
+  DropdownMenuItem as DropdownMenuItem4,
   DropdownMenuLabel as DropdownMenuLabel2,
-  DropdownMenuSeparator as DropdownMenuSeparator3,
-  DropdownMenuTrigger as DropdownMenuTrigger3
+  DropdownMenuSeparator as DropdownMenuSeparator4,
+  DropdownMenuTrigger as DropdownMenuTrigger4
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -1441,14 +1542,14 @@ function ProfileSelector({
   const customProfiles = profiles.filter((p) => !p.is_builtin);
   return /* @__PURE__ */ jsxs11("div", { className, children: [
     label && /* @__PURE__ */ jsx13("label", { className: "mb-2 block font-medium text-sm", children: label }),
-    /* @__PURE__ */ jsxs11(DropdownMenu3, { children: [
-      /* @__PURE__ */ jsx13(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "w-full justify-between", children: [
+    /* @__PURE__ */ jsxs11(DropdownMenu4, { children: [
+      /* @__PURE__ */ jsx13(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "w-full justify-between", children: [
         /* @__PURE__ */ jsx13("span", { className: "truncate", children: selected ? selected.name : placeholder }),
         /* @__PURE__ */ jsx13(ChevronDown2, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
       ] }) }),
-      /* @__PURE__ */ jsxs11(DropdownMenuContent3, { className: "w-[300px]", align: "start", children: [
+      /* @__PURE__ */ jsxs11(DropdownMenuContent4, { className: "w-[300px]", align: "start", children: [
         /* @__PURE__ */ jsxs11(
-          DropdownMenuItem3,
+          DropdownMenuItem4,
           {
             onClick: () => onSelect(null),
             className: "flex items-center justify-between",
@@ -1458,11 +1559,11 @@ function ProfileSelector({
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
-          /* @__PURE__ */ jsx13(DropdownMenuSeparator3, {}),
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment8, { children: [
+          /* @__PURE__ */ jsx13(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx13(DropdownMenuLabel2, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs11(
-            DropdownMenuItem3,
+            DropdownMenuItem4,
             {
               onClick: () => onSelect(profile),
               className: "flex flex-col items-start gap-1",
@@ -1483,11 +1584,11 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
-          /* @__PURE__ */ jsx13(DropdownMenuSeparator3, {}),
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment8, { children: [
+          /* @__PURE__ */ jsx13(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx13(DropdownMenuLabel2, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs11(
-            DropdownMenuItem3,
+            DropdownMenuItem4,
             {
               onClick: () => onSelect(profile),
               className: "flex flex-col items-start gap-1",
@@ -1520,10 +1621,10 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment7, { children: [
-          /* @__PURE__ */ jsx13(DropdownMenuSeparator3, {}),
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment8, { children: [
+          /* @__PURE__ */ jsx13(DropdownMenuSeparator4, {}),
           onCreateClick && /* @__PURE__ */ jsxs11(
-            DropdownMenuItem3,
+            DropdownMenuItem4,
             {
               onClick: onCreateClick,
               className: "text-[var(--surface-info-text)]",
@@ -1534,7 +1635,7 @@ function ProfileSelector({
             }
           ),
           onManageClick && /* @__PURE__ */ jsxs11(
-            DropdownMenuItem3,
+            DropdownMenuItem4,
             {
               onClick: onManageClick,
               className: "text-muted-foreground",
@@ -1618,8 +1719,8 @@ function ProfileComparison({
 import {
   Check as Check3,
   CheckCircle2,
-  Clock as Clock2,
-  ExternalLink,
+  Clock as Clock3,
+  ExternalLink as ExternalLink2,
   Loader2,
   Timer,
   X,
@@ -1627,10 +1728,10 @@ import {
 } from "lucide-react";
 import { Button as Button2 } from "@tangle-network/ui/primitives";
 import { Badge as Badge2 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
-    icon: Clock2,
+    icon: Clock3,
     color: "text-[var(--surface-warning-text)]",
     bg: "bg-[var(--surface-warning-bg)]",
     border: "border-[var(--surface-warning-border)]",
@@ -1750,7 +1851,7 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12(Fragment9, { children: [
                 /* @__PURE__ */ jsxs12(
                   Button2,
                   {
@@ -1796,7 +1897,7 @@ function VariantList({
                     e.stopPropagation();
                     window.open(variant.detailsUrl, "_blank");
                   },
-                  children: /* @__PURE__ */ jsx14(ExternalLink, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ jsx14(ExternalLink2, { className: "h-3.5 w-3.5" })
                 }
               )
             ] })
@@ -1922,7 +2023,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
 }
 
 // src/dashboard/usage-summary.tsx
-import { Clock as Clock3, Layers, MessageSquare, DollarSign } from "lucide-react";
+import { Clock as Clock4, Layers, MessageSquare, DollarSign } from "lucide-react";
 import { StatCard } from "@tangle-network/ui/primitives";
 import { Skeleton as Skeleton2 } from "@tangle-network/ui/primitives";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -1938,7 +2039,7 @@ function UsageSummary({ data, loading = false, className }) {
         title: "Compute Hours",
         value: data.computeHours.toFixed(1),
         subtitle: "This billing period",
-        icon: /* @__PURE__ */ jsx16(Clock3, { className: "h-5 w-5" })
+        icon: /* @__PURE__ */ jsx16(Clock4, { className: "h-5 w-5" })
       }
     ),
     /* @__PURE__ */ jsx16(
@@ -2045,14 +2146,14 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
 }
 
 // src/dashboard/ports-list.tsx
-import * as React5 from "react";
-import { Copy as Copy2, Check as Check4, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
+import * as React6 from "react";
+import { Copy as Copy3, Check as Check4, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
-  const [newPort, setNewPort] = React5.useState("");
-  const [copiedPort, setCopiedPort] = React5.useState(null);
-  const copyTimerRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const [newPort, setNewPort] = React6.useState("");
+  const [copiedPort, setCopiedPort] = React6.useState(null);
+  const copyTimerRef = React6.useRef(null);
+  React6.useEffect(() => {
     return () => {
       if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
     };
@@ -2092,7 +2193,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
             className: "flex items-center gap-2 font-mono text-xs text-primary hover:underline cursor-pointer group",
             children: [
               /* @__PURE__ */ jsx18("span", { className: "truncate max-w-[300px]", children: p.url }),
-              copiedPort === p.port ? /* @__PURE__ */ jsx18(Check4, { className: "h-3 w-3 text-[var(--surface-success-text)] shrink-0" }) : /* @__PURE__ */ jsx18(Copy2, { className: "h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" })
+              copiedPort === p.port ? /* @__PURE__ */ jsx18(Check4, { className: "h-3 w-3 text-[var(--surface-success-text)] shrink-0" }) : /* @__PURE__ */ jsx18(Copy3, { className: "h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" })
             ]
           }
         ) }),
@@ -2146,8 +2247,8 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
 }
 
 // src/dashboard/process-list.tsx
-import * as React6 from "react";
-import { Activity as Activity2, Plus as Plus5, Skull, Terminal as Terminal4 } from "lucide-react";
+import * as React7 from "react";
+import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal4 } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function formatUptime(startedAt) {
   if (!startedAt) return "-";
@@ -2158,7 +2259,7 @@ function formatUptime(startedAt) {
   return `${Math.floor(ms / 36e5)}h ${Math.floor(ms % 36e5 / 6e4)}m`;
 }
 function ProcessList({ processes, onSpawn, onKill, loading = false, className }) {
-  const [newCommand, setNewCommand] = React6.useState("");
+  const [newCommand, setNewCommand] = React7.useState("");
   const handleSpawn = () => {
     const cmd = newCommand.trim();
     if (cmd) {
@@ -2168,7 +2269,7 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
   };
   return /* @__PURE__ */ jsxs17("div", { className: cn("space-y-4", className), children: [
     loading ? /* @__PURE__ */ jsxs17("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
-      /* @__PURE__ */ jsx19(Activity2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-spin mb-2" }),
+      /* @__PURE__ */ jsx19(Activity3, { className: "mx-auto h-6 w-6 text-muted-foreground animate-spin mb-2" }),
       /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground", children: "Loading processes..." })
     ] }) : processes.length > 0 ? /* @__PURE__ */ jsx19("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs17("table", { className: "w-full text-sm", children: [
       /* @__PURE__ */ jsx19("thead", { className: "bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxs17("tr", { children: [
@@ -2231,11 +2332,11 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
 }
 
 // src/dashboard/network-config.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function NetworkConfig({ config, onUpdate, loading = false, className }) {
-  const [newCidr, setNewCidr] = React7.useState("");
+  const [newCidr, setNewCidr] = React8.useState("");
   const isValidCidr = (value) => {
     const match = value.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\/(\d{1,2})$/);
     if (!match) return false;
@@ -2339,9 +2440,9 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
 }
 
 // src/dashboard/backend-config.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { Bot, Plus as Plus7, RefreshCw as RefreshCw2, Trash2 as Trash25, Server, Wrench } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function BackendConfig({
   status,
   mcpServers,
@@ -2351,10 +2452,10 @@ function BackendConfig({
   loading = false,
   className
 }) {
-  const [showAddMcp, setShowAddMcp] = React8.useState(false);
-  const [mcpName, setMcpName] = React8.useState("");
-  const [mcpCommand, setMcpCommand] = React8.useState("");
-  const [mcpArgs, setMcpArgs] = React8.useState("");
+  const [showAddMcp, setShowAddMcp] = React9.useState(false);
+  const [mcpName, setMcpName] = React9.useState("");
+  const [mcpCommand, setMcpCommand] = React9.useState("");
+  const [mcpArgs, setMcpArgs] = React9.useState("");
   const handleAddMcp = () => {
     const name = mcpName.trim();
     const command = mcpCommand.trim();
@@ -2401,7 +2502,7 @@ function BackendConfig({
         ), children: status.running ? "Running" : "Stopped" }) }),
         /* @__PURE__ */ jsx21("dt", { className: "text-muted-foreground", children: "Model" }),
         /* @__PURE__ */ jsx21("dd", { className: "font-mono text-xs", children: status.model ?? "Default" }),
-        status.provider && /* @__PURE__ */ jsxs19(Fragment9, { children: [
+        status.provider && /* @__PURE__ */ jsxs19(Fragment10, { children: [
           /* @__PURE__ */ jsx21("dt", { className: "text-muted-foreground", children: "Provider" }),
           /* @__PURE__ */ jsx21("dd", { className: "font-mono text-xs", children: status.provider })
         ] })
@@ -2512,8 +2613,8 @@ function BackendConfig({
 }
 
 // src/dashboard/snapshot-list.tsx
-import * as React9 from "react";
-import { Camera, Clock as Clock4, HardDrive, Plus as Plus8, RotateCcw } from "lucide-react";
+import * as React10 from "react";
+import { Camera, Clock as Clock5, HardDrive, Plus as Plus8, RotateCcw } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (bytes == null || bytes < 0) return "-";
@@ -2529,8 +2630,8 @@ function formatDate(dateStr) {
   return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
 function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading = false, className }) {
-  const [showCreate, setShowCreate] = React9.useState(false);
-  const [tags, setTags] = React9.useState("");
+  const [showCreate, setShowCreate] = React10.useState(false);
+  const [tags, setTags] = React10.useState("");
   const handleCreate = () => {
     const tagList = tags.trim() ? tags.trim().split(",").map((t) => t.trim()).filter(Boolean) : void 0;
     onCreate(tagList);
@@ -2604,7 +2705,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
       /* @__PURE__ */ jsx22("tbody", { className: "divide-y divide-border", children: snapshots.map((s) => /* @__PURE__ */ jsxs20("tr", { children: [
         /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 font-mono text-xs text-foreground", children: s.id.slice(0, 12) }),
         /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs20("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx22(Clock4, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx22(Clock5, { className: "h-3 w-3" }),
           formatDate(s.createdAt)
         ] }) }),
         /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs20("span", { className: "inline-flex items-center gap-1.5", children: [
@@ -2647,7 +2748,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
 }
 
 // src/dashboard/promo-banner.tsx
-import { Fragment as Fragment10, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function PromoBanner({
   title,
   description,
@@ -2662,7 +2763,7 @@ function PromoBanner({
     "mt-6 inline-flex items-center gap-2 rounded-md border border-white/20 bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-medium text-[var(--btn-primary-text)] transition-colors",
     disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--btn-primary-hover)]"
   );
-  const buttonContent = /* @__PURE__ */ jsxs21(Fragment10, { children: [
+  const buttonContent = /* @__PURE__ */ jsxs21(Fragment11, { children: [
     buttonLabel,
     /* @__PURE__ */ jsxs21("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [
       /* @__PURE__ */ jsx23("path", { d: "M5 12h14" }),

package/dist/dashboard.d.ts

@@ -249,10 +249,16 @@ interface SandboxTableProps {
      */
     onWake?: (id: string) => void;
     onMore?: (id: string) => void;
+    /** Fired on the user's first click; the caller owns the confirmation step. */
     onDelete?: (id: string) => void;
+    onStop?: (id: string) => void;
+    onKeepAlive?: (id: string) => void;
+    onUsage?: (id: string) => void;
+    onHealth?: (id: string) => void;
+    onFork?: (id: string) => void;
     className?: string;
 }
-declare function SandboxTable({ sandboxes, page, pageSize, total, onPageChange, onOpenIDE, onOpenTerminal, onSSH, onResume, onWake, onMore, onDelete, className, }: SandboxTableProps): react_jsx_runtime.JSX.Element;
+declare function SandboxTable({ sandboxes, page, pageSize, total, onPageChange, onOpenIDE, onOpenTerminal, onSSH, onResume, onWake, onMore, onDelete, onStop, onKeepAlive, onUsage, onHealth, onFork, className, }: SandboxTableProps): react_jsx_runtime.JSX.Element;
 
 interface Invoice {
     id: string;

package/dist/dashboard.js

@@ -43,7 +43,7 @@ import {
   VariantList,
   canAdminSandbox,
   useSidebar
-} from "./chunk-X3UATIZH.js";
+} from "./chunk-5I363RL7.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/index.js

@@ -174,7 +174,7 @@ import {
   VariantList,
   canAdminSandbox,
   useSidebar
-} from "./chunk-X3UATIZH.js";
+} from "./chunk-5I363RL7.js";
 import {
   BillingDashboard,
   InfoPanel,

package/package.json

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