@tangle-network/sandbox-ui 0.16.0 → 0.16.1

package/dist/{chunk-HLZTKSGT.js → chunk-X3UATIZH.js}

@@ -666,7 +666,7 @@ 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 { 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";
 var statusColors = {
   running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
@@ -677,6 +677,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,6 +701,7 @@ function SandboxTable({
   onOpenIDE,
   onOpenTerminal,
   onSSH,
+  onResume,
   onWake,
   onMore,
   onDelete,
@@ -706,6 +710,19 @@ function SandboxTable({
   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 +738,124 @@ 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",
+        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-[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",
+              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(Fragment4, { 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
+                      ]
+                    }
+                  ),
+                  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" }) }),
+                  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: [

package/dist/dashboard.d.ts

@@ -231,12 +231,28 @@ 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;
     onDelete?: (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, 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-X3UATIZH.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-X3UATIZH.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.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",