@tangle-network/sandbox-ui 0.16.0 → 0.16.2

package/dist/{chunk-HLZTKSGT.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 } 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" },
@@ -677,6 +703,9 @@ var statusColors = {
   failed: { dot: "bg-[var(--code-error)]", text: "text-[var(--code-error)]", bar: "bg-[var(--code-error)]" },
   archived: { dot: "bg-border", text: "text-muted-foreground", bar: "bg-border" }
 };
+function isResumable(status) {
+  return status !== "running" && status !== "provisioning" && status !== "creating";
+}
 function MiniMeter({ label, percent, className }) {
   return /* @__PURE__ */ jsxs6("div", { className: cn("space-y-1", className), children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground", children: [
@@ -698,14 +727,33 @@ function SandboxTable({
   onOpenIDE,
   onOpenTerminal,
   onSSH,
+  onResume,
   onWake,
   onMore,
   onDelete,
+  onStop,
+  onKeepAlive,
+  onUsage,
+  onHealth,
+  onFork,
   className
 }) {
   const totalCount = total ?? sandboxes.length;
   const totalPages = Math.ceil(totalCount / pageSize);
   const hasTeamSandboxes = sandboxes.some((sb) => sb.team !== void 0);
+  const resolveResumeHandler = (status) => {
+    if (onResume) return onResume;
+    if (status === "hibernating") return onWake;
+    return void 0;
+  };
+  const resolveRowClick = (sb) => {
+    if (sb.status === "running") {
+      return onOpenIDE ? () => onOpenIDE(sb.id) : void 0;
+    }
+    if (!isResumable(sb.status)) return void 0;
+    const handler = resolveResumeHandler(sb.status);
+    return handler ? () => handler(sb.id) : void 0;
+  };
   return /* @__PURE__ */ jsxs6("div", { className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx7("div", { className: "w-full bg-card rounded-2xl overflow-hidden border border-border", children: /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs6("table", { className: "w-full text-left border-collapse", children: [
       /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs6("tr", { className: "bg-background border-b border-border", children: [
@@ -721,65 +769,194 @@ function SandboxTable({
         const isActive = sb.status === "running";
         const isHibernating = sb.status === "hibernating";
         const isProvisioning = sb.status === "provisioning";
-        return /* @__PURE__ */ jsxs6("tr", { className: "hover:bg-muted/50 transition-colors group relative", children: [
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx7("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
-            /* @__PURE__ */ jsx7("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
-          ] }) }),
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx7("span", { className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors", children: sb.name }),
-            sb.nodeId && /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-mono text-muted-foreground", children: sb.nodeId })
-          ] }) }),
-          hasTeamSandboxes && /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: sb.team ? /* @__PURE__ */ jsxs6(
-            "div",
-            {
-              className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--accent-text)]",
-              title: `Shared with ${sb.team.name ?? "Team"} \xB7 ${sb.team.role}`,
-              children: [
-                /* @__PURE__ */ jsx7(Users2, { className: "h-3 w-3", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx7("span", { children: sb.team.name ?? "Team" }),
-                /* @__PURE__ */ jsxs6("span", { className: "font-normal text-muted-foreground", children: [
-                  "\xB7 ",
-                  sb.team.role
-                ] })
-              ]
-            }
-          ) : /* @__PURE__ */ jsxs6(
-            "div",
+        const resumeHandler = isResumable(sb.status) ? resolveResumeHandler(sb.status) : void 0;
+        const onRowClick = resolveRowClick(sb);
+        const resumeLabel = isHibernating ? "Wake Up" : "Resume";
+        const stopRowClick = (e) => e.stopPropagation();
+        return (
+          // onClick is a sighted-user convenience only. We
+          // deliberately do NOT add role="button" / tabIndex /
+          // an onKeyDown handler to the row — overriding a
+          // <tr>'s implicit row role with "button" collapses
+          // the per-cell announcements (Status, Environment,
+          // Resources…) that screen-reader users navigate
+          // through. Keyboard and assistive-tech users reach
+          // the same actions through the real <button>
+          // elements inside the actions cell (Resume, Open
+          // IDE, Delete, …), which keep their native
+          // semantics. Mouse users get the click-anywhere
+          // affordance; nobody loses access.
+          /* @__PURE__ */ jsxs6(
+            "tr",
             {
-              className: "inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
-              title: "Personal sandbox",
+              className: cn(
+                "group relative transition-colors",
+                onRowClick ? "cursor-pointer hover:bg-muted/50" : "hover:bg-muted/30"
+              ),
+              onClick: onRowClick,
               children: [
-                /* @__PURE__ */ jsx7(User, { className: "h-3 w-3", "aria-hidden": "true" }),
-                "Personal"
+                /* @__PURE__ */ jsx7("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx7("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
+                  /* @__PURE__ */ jsx7("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
+                ] }) }),
+                /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx7("span", { className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors", children: sb.name }),
+                  sb.nodeId && /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-mono text-muted-foreground", children: sb.nodeId })
+                ] }) }),
+                hasTeamSandboxes && /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: sb.team ? /* @__PURE__ */ jsxs6(
+                  "div",
+                  {
+                    className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--accent-text)]",
+                    title: `Shared with ${sb.team.name ?? "Team"} \xB7 ${sb.team.role}`,
+                    children: [
+                      /* @__PURE__ */ jsx7(Users2, { className: "h-3 w-3", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx7("span", { children: sb.team.name ?? "Team" }),
+                      /* @__PURE__ */ jsxs6("span", { className: "font-normal text-muted-foreground", children: [
+                        "\xB7 ",
+                        sb.team.role
+                      ] })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs6(
+                  "div",
+                  {
+                    className: "inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
+                    title: "Personal sandbox",
+                    children: [
+                      /* @__PURE__ */ jsx7(User, { className: "h-3 w-3", "aria-hidden": "true" }),
+                      "Personal"
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+                  sb.imageIcon && /* @__PURE__ */ jsx7("div", { className: "w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center", children: sb.imageIcon }),
+                  sb.image && /* @__PURE__ */ jsx7("span", { className: "text-xs font-bold text-foreground", children: sb.image })
+                ] }) }),
+                /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48", children: [
+                  /* @__PURE__ */ jsx7(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
+                  /* @__PURE__ */ jsx7(MiniMeter, { label: "RAM", percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0 })
+                ] }) : isProvisioning ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 text-primary italic text-[10px] font-bold", children: [
+                  /* @__PURE__ */ jsx7(RefreshCw, { className: "h-3.5 w-3.5 animate-spin" }),
+                  sb.provisioningMessage ?? "Allocating nodes..."
+                ] }) : isHibernating ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48 opacity-30", children: [
+                  /* @__PURE__ */ jsx7(MiniMeter, { label: "CPU", percent: 0 }),
+                  /* @__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(Fragment5, { children: [
+                    /* @__PURE__ */ jsx7("button", { type: "button", onClick: (e) => {
+                      stopRowClick(e);
+                      onOpenIDE?.(sb.id);
+                    }, className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx7(Code22, { className: "h-4 w-4" }) }),
+                    /* @__PURE__ */ jsx7("button", { type: "button", onClick: (e) => {
+                      stopRowClick(e);
+                      onOpenTerminal?.(sb.id);
+                    }, className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx7(Terminal2, { className: "h-4 w-4" }) }),
+                    /* @__PURE__ */ jsx7("button", { type: "button", onClick: (e) => {
+                      stopRowClick(e);
+                      onSSH?.(sb.id);
+                    }, className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx7(Key, { className: "h-4 w-4" }) })
+                  ] }),
+                  resumeHandler && /* @__PURE__ */ jsxs6(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        stopRowClick(e);
+                        resumeHandler(sb.id);
+                      },
+                      className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all",
+                      title: resumeLabel,
+                      children: [
+                        /* @__PURE__ */ jsx7(Play2, { className: "h-3 w-3" }),
+                        resumeLabel
+                      ]
+                    }
+                  ),
+                  (() => {
+                    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);
+                  }, className: "p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90", title: "Delete", children: /* @__PURE__ */ jsx7(Trash22, { className: "h-4 w-4" }) })
+                ] }) })
               ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
-            sb.imageIcon && /* @__PURE__ */ jsx7("div", { className: "w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center", children: sb.imageIcon }),
-            sb.image && /* @__PURE__ */ jsx7("span", { className: "text-xs font-bold text-foreground", children: sb.image })
-          ] }) }),
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48", children: [
-            /* @__PURE__ */ jsx7(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
-            /* @__PURE__ */ jsx7(MiniMeter, { label: "RAM", percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0 })
-          ] }) : isProvisioning ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 text-primary italic text-[10px] font-bold", children: [
-            /* @__PURE__ */ jsx7(RefreshCw, { className: "h-3.5 w-3.5 animate-spin" }),
-            sb.provisioningMessage ?? "Allocating nodes..."
-          ] }) : isHibernating ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48 opacity-30", children: [
-            /* @__PURE__ */ jsx7(MiniMeter, { label: "CPU", percent: 0 }),
-            /* @__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: [
-              /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx7(Code22, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx7(Terminal2, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx7(Key, { className: "h-4 w-4" }) })
-            ] }),
-            isHibernating && /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-border text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", children: "Wake Up" }),
-            onMore && /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => 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" }) }),
-            onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onDelete(sb.id), className: "p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90", title: "Delete", children: /* @__PURE__ */ jsx7(Trash22, { className: "h-4 w-4" }) })
-          ] }) })
-        ] }, sb.id);
+            },
+            sb.id
+          )
+        );
       }) })
     ] }) }) }),
     totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "mt-6 flex flex-col md:flex-row justify-between items-center text-muted-foreground text-xs font-medium gap-4", children: [
@@ -1039,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" }),
@@ -1102,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)) {
@@ -1123,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,
@@ -1202,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",
@@ -1341,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,
@@ -1365,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",
@@ -1382,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",
@@ -1407,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",
@@ -1444,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)]",
@@ -1458,7 +1635,7 @@ function ProfileSelector({
             }
           ),
           onManageClick && /* @__PURE__ */ jsxs11(
-            DropdownMenuItem3,
+            DropdownMenuItem4,
             {
               onClick: onManageClick,
               className: "text-muted-foreground",
@@ -1542,8 +1719,8 @@ function ProfileComparison({
 import {
   Check as Check3,
   CheckCircle2,
-  Clock as Clock2,
-  ExternalLink,
+  Clock as Clock3,
+  ExternalLink as ExternalLink2,
   Loader2,
   Timer,
   X,
@@ -1551,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)]",
@@ -1674,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,
                   {
@@ -1720,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" })
                 }
               )
             ] })
@@ -1846,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";
@@ -1862,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(
@@ -1969,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);
     };
@@ -2016,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" })
             ]
           }
         ) }),
@@ -2070,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 "-";
@@ -2082,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) {
@@ -2092,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: [
@@ -2155,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;
@@ -2263,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,
@@ -2275,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();
@@ -2325,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 })
         ] })
@@ -2436,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 "-";
@@ -2453,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);
@@ -2528,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: [
@@ -2571,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,
@@ -2586,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

@@ -231,12 +231,34 @@ interface SandboxTableProps {
     onOpenIDE?: (id: string) => void;
     onOpenTerminal?: (id: string) => void;
     onSSH?: (id: string) => void;
+    /**
+     * Resume a stopped / failed / archived sandbox, or wake a hibernating
+     * one. Surfaces an explicit "Resume" (or "Wake Up" for `hibernating`)
+     * button in the actions cell and makes the row body clickable for any
+     * status this prop covers. Preferred over `onWake` for new code — the
+     * two are kept as separate props only so existing consumers that
+     * wired up `onWake` for hibernating continue to work.
+     */
+    onResume?: (id: string) => void;
+    /**
+     * @deprecated Use `onResume` instead. Retained for back-compat:
+     * when `onResume` is not provided but `onWake` is, hibernating rows
+     * will still surface a Wake action. New consumers should pass
+     * `onResume` so stopped / failed / archived rows also get a start
+     * affordance.
+     */
     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, 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-HLZTKSGT.js";
+} from "./chunk-5I363RL7.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -232,6 +232,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }

package/dist/index.js

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

package/dist/styles.css

@@ -232,6 +232,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }

package/package.json

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