@tangle-network/sandbox-ui 0.16.1 → 0.16.3

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/globals.css

@@ -591,6 +591,9 @@
   .h-\[500px\] {
     height: 500px;
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -615,6 +618,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-24 {
+    min-height: calc(var(--spacing) * 24);
+  }
   .min-h-\[2px\] {
     min-height: 2px;
   }

package/dist/index.js

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

package/dist/pages.d.ts

@@ -59,6 +59,19 @@ interface PlanTierInfo {
     ramMaxGB: number;
     storageMaxGB: number;
 }
+interface SshKeyOption {
+    id: string;
+    name: string;
+    fingerprint: string;
+    keyType: string;
+}
+interface SshAccessConfig {
+    keys?: SshKeyOption[];
+    selectedKeyIds: string[];
+    inlinePublicKeys: string;
+    onSelectedKeyIdsChange: (keyIds: string[]) => void;
+    onInlinePublicKeysChange: (publicKeys: string) => void;
+}
 interface ProvisioningWizardProps {
     environments?: EnvironmentOption[];
     onLoadEnvironments?: () => Promise<EnvironmentEntry[]>;
@@ -107,6 +120,7 @@ interface ProvisioningWizardProps {
      * persistence (e.g. localStorage, account settings API).
      */
     onSetDefault?: (modelId: string) => void;
+    sshAccess?: SshAccessConfig;
     /** Real pricing rates from the API for accurate cost calculation */
     pricingRates?: PricingRates;
     /**
@@ -141,7 +155,7 @@ interface ProvisioningConfig {
     startupScriptIds?: string[];
 }
 declare function resolveEnvironment(env: EnvironmentEntry): EnvironmentOption;
-declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, models, popular, defaultModel, onSetDefault, pricingRates, planTiers, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
+declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, models, popular, defaultModel, onSetDefault, sshAccess, pricingRates, planTiers, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
 
 type ProductVariant = "sandbox";
 interface StandalonePricingPageProps {
@@ -307,4 +321,4 @@ type TemplateCategory = "blockchain" | "ai-ml" | "frontend" | "infrastructure" |
 type TemplatePreset = Omit<ProvisioningConfig, "name" | "gitUrl" | "envVars" | "driver" | "startupScriptIds" | "modelTier">;
 declare function getPresetForTemplate(id: string): TemplatePreset;
 
-export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, ModelInfo, type PlanTierInfo, type PricingRates, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };
+export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, ModelInfo, type PlanTierInfo, type PricingRates, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, type SshAccessConfig, type SshKeyOption, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };

package/dist/pages.js

@@ -7,6 +7,11 @@ import {
   UsageChart,
   canonicalModelId
 } from "./chunk-27X3DWMO.js";
+import {
+  Badge,
+  Button,
+  Textarea
+} from "./chunk-7ZA5SEK3.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -439,6 +444,59 @@ function computeHourlyCost(cpu, ram, storage, rates) {
     total: Math.max(floor, lineSum)
   };
 }
+function SshAccessStep({ config }) {
+  const keys = config.keys ?? [];
+  const inlineKeyCount = config.inlinePublicKeys.split(/\r?\n/).map((key) => key.trim()).filter(Boolean).length;
+  const totalKeyCount = config.selectedKeyIds.length + inlineKeyCount;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("p", { className: "font-medium text-foreground text-sm", children: "SSH Access" }),
+        /* @__PURE__ */ jsx2("p", { className: "mt-1 text-muted-foreground text-xs", children: "Select stored keys or paste public keys for authorized_keys." })
+      ] }),
+      /* @__PURE__ */ jsxs2(Badge, { variant: "outline", children: [
+        totalKeyCount,
+        " key",
+        totalKeyCount === 1 ? "" : "s"
+      ] })
+    ] }),
+    keys.length > 0 && /* @__PURE__ */ jsx2("div", { className: "grid gap-2 sm:grid-cols-2", children: keys.map((key) => {
+      const selected = config.selectedKeyIds.includes(key.id);
+      return /* @__PURE__ */ jsx2(
+        Button,
+        {
+          type: "button",
+          variant: selected ? "sandbox" : "outline",
+          className: "h-auto justify-start p-3 text-left",
+          "aria-pressed": selected,
+          onClick: () => {
+            config.onSelectedKeyIdsChange(
+              selected ? config.selectedKeyIds.filter((id) => id !== key.id) : [...config.selectedKeyIds, key.id]
+            );
+          },
+          children: /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx2("span", { className: "block font-medium text-foreground", children: key.name }),
+            /* @__PURE__ */ jsxs2("span", { className: "block truncate font-mono text-muted-foreground text-xs", children: [
+              key.keyType,
+              " \xB7 ",
+              key.fingerprint
+            ] })
+          ] })
+        },
+        key.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx2(
+      Textarea,
+      {
+        className: "min-h-24 font-mono text-xs",
+        placeholder: "Paste one public key per line",
+        value: config.inlinePublicKeys,
+        onChange: (event) => config.onInlinePublicKeysChange(event.target.value)
+      }
+    )
+  ] });
+}
 function ProvisioningWizard({
   environments: environmentsProp,
   onLoadEnvironments,
@@ -455,6 +513,7 @@ function ProvisioningWizard({
   popular,
   defaultModel,
   onSetDefault,
+  sshAccess,
   pricingRates,
   planTiers
 }) {
@@ -585,8 +644,10 @@ function ProvisioningWizard({
     };
   }, []);
   const isMultistep = variant === "multistep";
+  const stepLabels = sshAccess ? ["Environment", "Resources", "AI Agent", "Access"] : ["Environment", "Resources", "AI Agent"];
+  const finalStep = stepLabels.length;
   const [currentStep, setCurrentStep] = React2.useState(
-    skipToReview && dc && isMultistep ? 3 : 1
+    skipToReview && dc && isMultistep ? finalStep : 1
   );
   const [isDeploying, setIsDeploying] = React2.useState(false);
   const [deployError, setDeployError] = React2.useState(null);
@@ -700,41 +761,40 @@ function ProvisioningWizard({
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-6 flex-1 min-h-0", children: [
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 flex flex-col min-h-0", children: [
-        isMultistep && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mb-4 bg-card border border-border p-3 rounded-2xl mx-auto max-w-2xl justify-between shrink-0", children: [1, 2, 3].map((s) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx2(
-            "div",
-            {
-              className: cn(
-                "w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-200",
-                currentStep === s ? "bg-primary text-primary-foreground ring-2 ring-primary/30 ring-offset-2 ring-offset-card shadow-sm" : currentStep > s ? "bg-primary text-primary-foreground" : "bg-muted border border-border text-muted-foreground"
-              ),
-              children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) : s
-            }
-          ),
-          /* @__PURE__ */ jsxs2(
-            "span",
-            {
-              className: cn(
-                "ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200",
-                currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"
-              ),
-              children: [
-                s === 1 && "Environment",
-                s === 2 && "Resources",
-                s === 3 && "AI Agent"
-              ]
-            }
-          ),
-          s < 3 && /* @__PURE__ */ jsx2(
-            "div",
-            {
-              className: cn(
-                "w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300",
-                currentStep > s ? "bg-primary" : "bg-border"
-              )
-            }
-          )
-        ] }, s)) }),
+        isMultistep && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mb-4 bg-card border border-border p-3 rounded-2xl mx-auto max-w-2xl justify-between shrink-0", children: stepLabels.map((label, index) => {
+          const s = index + 1;
+          return /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: cn(
+                  "w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-200",
+                  currentStep === s ? "bg-primary text-primary-foreground ring-2 ring-primary/30 ring-offset-2 ring-offset-card shadow-sm" : currentStep > s ? "bg-primary text-primary-foreground" : "bg-muted border border-border text-muted-foreground"
+                ),
+                children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) : s
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: cn(
+                  "ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200",
+                  currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"
+                ),
+                children: label
+              }
+            ),
+            s < finalStep && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: cn(
+                  "w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300",
+                  currentStep > s ? "bg-primary" : "bg-border"
+                )
+              }
+            )
+          ] }, s);
+        }) }),
         dc && isMultistep && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between bg-card border border-border rounded-2xl px-4 py-3 shrink-0", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm", children: [
             /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-primary shrink-0" }),
@@ -1206,6 +1266,13 @@ function ProvisioningWizard({
                 ] })
               ] })
             ] })
+          ] }) }),
+          sshAccess && (!isMultistep || currentStep === 4) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "bg-card border border-border rounded-[24px] p-6 shadow-2xl relative overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 mb-5", children: [
+              /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 border border-primary/20 text-primary", children: /* @__PURE__ */ jsx2(Settings, { className: "h-5 w-5" }) }),
+              /* @__PURE__ */ jsx2("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "Access Configuration" })
+            ] }),
+            /* @__PURE__ */ jsx2(SshAccessStep, { config: sshAccess })
           ] }) })
         ] })
       ] }),
@@ -1310,16 +1377,15 @@ function ProvisioningWizard({
           /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium text-destructive", children: deployError })
         ] }),
         /* @__PURE__ */ jsx2("div", { className: "space-y-3", children: isMultistep ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          currentStep < 3 ? /* @__PURE__ */ jsxs2(
+          currentStep < finalStep ? /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
               onClick: () => setCurrentStep((s) => s + 1),
               className: "w-full relative overflow-hidden h-12 bg-primary text-primary-foreground font-extrabold text-sm rounded-2xl hover:brightness-110 transition-all active:scale-[0.98] shadow-md",
               children: [
-                "Continue to",
-                " ",
-                currentStep === 1 ? "Resources" : "Agent Config"
+                "Continue to ",
+                stepLabels[currentStep]
               ]
             }
           ) : /* @__PURE__ */ jsx2(
@@ -1544,8 +1610,8 @@ import {
   Trash2 as Trash22
 } from "lucide-react";
 import * as React4 from "react";
-import { Button } from "@tangle-network/ui/primitives";
-import { Badge } from "@tangle-network/ui/primitives";
+import { Button as Button2 } from "@tangle-network/ui/primitives";
+import { Badge as Badge2 } from "@tangle-network/ui/primitives";
 import { Card } from "@tangle-network/ui/primitives";
 import {
   Dialog,
@@ -1618,7 +1684,7 @@ function ProfilesPage({
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
         onCompareClick && customProfiles.length >= 2 && /* @__PURE__ */ jsx4(
-          Button,
+          Button2,
           {
             variant: "outline",
             onClick: () => onCompareClick(customProfiles),
@@ -1626,7 +1692,7 @@ function ProfilesPage({
           }
         ),
         /* @__PURE__ */ jsxs4(
-          Button,
+          Button2,
           {
             onClick: () => setCreateDialogOpen(true),
             disabled: !canCreateMore,
@@ -1661,7 +1727,7 @@ function ProfilesPage({
     error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] p-3 text-[var(--surface-danger-text)] text-sm", children: [
       /* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx4("span", { children: error }),
-      /* @__PURE__ */ jsx4(Button, { variant: "ghost", size: "sm", onClick: loadProfiles, children: "Retry" })
+      /* @__PURE__ */ jsx4(Button2, { variant: "ghost", size: "sm", onClick: loadProfiles, children: "Retry" })
     ] }),
     loading && /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx4(Loader22, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }),
     !loading && /* @__PURE__ */ jsxs4("div", { className: "space-y-8", children: [
@@ -1679,7 +1745,7 @@ function ProfilesPage({
             icon: /* @__PURE__ */ jsx4(Settings2, { className: "h-8 w-8" }),
             title: "No custom profiles yet",
             description: "Create a profile to customize agent behavior",
-            action: canCreateMore ? /* @__PURE__ */ jsxs4(Button, { onClick: () => setCreateDialogOpen(true), children: [
+            action: canCreateMore ? /* @__PURE__ */ jsxs4(Button2, { onClick: () => setCreateDialogOpen(true), children: [
               /* @__PURE__ */ jsx4(Plus2, { className: "mr-2 h-4 w-4" }),
               "Create Profile"
             ] }) : void 0
@@ -1781,14 +1847,14 @@ function ProfileCard({
           /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx4("h3", { className: "font-medium", children: profile.name }),
-              isBuiltin && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", className: "border-0 text-xs", children: "Built-in" }),
-              profile.is_public && !isBuiltin && /* @__PURE__ */ jsx4(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] text-xs", children: "Public" })
+              isBuiltin && /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", className: "border-0 text-xs", children: "Built-in" }),
+              profile.is_public && !isBuiltin && /* @__PURE__ */ jsx4(Badge2, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] text-xs", children: "Public" })
             ] }),
             profile.description && /* @__PURE__ */ jsx4("p", { className: "mt-1 line-clamp-2 text-muted-foreground text-sm", children: profile.description })
           ] }),
           !isBuiltin && /* @__PURE__ */ jsxs4("div", { className: "flex gap-1", onClick: (e) => e.stopPropagation(), children: [
             onEdit && /* @__PURE__ */ jsx4(
-              Button,
+              Button2,
               {
                 variant: "ghost",
                 size: "icon",
@@ -1798,7 +1864,7 @@ function ProfileCard({
               }
             ),
             onDelete && /* @__PURE__ */ jsx4(
-              Button,
+              Button2,
               {
                 variant: "ghost",
                 size: "icon",
@@ -1810,11 +1876,11 @@ function ProfileCard({
           ] })
         ] }),
         /* @__PURE__ */ jsxs4("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-          profile.extends && /* @__PURE__ */ jsxs4(Badge, { variant: "outline", className: "text-xs", children: [
+          profile.extends && /* @__PURE__ */ jsxs4(Badge2, { variant: "outline", className: "text-xs", children: [
             "extends ",
             profile.extends
           ] }),
-          profile.model && /* @__PURE__ */ jsx4(Badge, { variant: "outline", className: "text-xs", children: profile.model.split("/").pop() })
+          profile.model && /* @__PURE__ */ jsx4(Badge2, { variant: "outline", className: "text-xs", children: profile.model.split("/").pop() })
         ] }),
         profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs4("div", { className: "mt-3 flex gap-4 border-border border-t pt-3 text-muted-foreground text-xs", children: [
           /* @__PURE__ */ jsxs4("span", { children: [
@@ -2020,8 +2086,8 @@ function ProfileFormDialog({
         /* @__PURE__ */ jsx4("label", { htmlFor: "is_public", className: "text-sm", children: "Make this profile public (visible to other users)" })
       ] }),
       /* @__PURE__ */ jsxs4(DialogFooter, { children: [
-        /* @__PURE__ */ jsx4(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsxs4(Button, { type: "submit", disabled: saving || !formData.name, children: [
+        /* @__PURE__ */ jsx4(Button2, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsxs4(Button2, { type: "submit", disabled: saving || !formData.name, children: [
           saving && /* @__PURE__ */ jsx4(Loader22, { className: "mr-2 h-4 w-4 animate-spin" }),
           isEditing ? "Save Changes" : "Create Profile"
         ] })
@@ -2069,9 +2135,9 @@ function DeleteProfileDialog({
       " recorded runs. Deleting it will lose all performance metrics."
     ] }),
     /* @__PURE__ */ jsxs4(DialogFooter, { children: [
-      /* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx4(Button2, { variant: "outline", onClick: onClose, children: "Cancel" }),
       /* @__PURE__ */ jsxs4(
-        Button,
+        Button2,
         {
           variant: "destructive",
           onClick: handleDelete,
@@ -2096,8 +2162,8 @@ function ProfileDetailDialog({
     /* @__PURE__ */ jsxs4(DialogHeader, { children: [
       /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx4(DialogTitle, { children: profile.name }),
-        profile.is_builtin && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", className: "border-0", children: "Built-in" }),
-        profile.is_public && !profile.is_builtin && /* @__PURE__ */ jsx4(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]", children: "Public" })
+        profile.is_builtin && /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", className: "border-0", children: "Built-in" }),
+        profile.is_public && !profile.is_builtin && /* @__PURE__ */ jsx4(Badge2, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]", children: "Public" })
       ] }),
       profile.description && /* @__PURE__ */ jsx4(DialogDescription, { children: profile.description })
     ] }),
@@ -2114,14 +2180,14 @@ function ProfileDetailDialog({
       ] }),
       profile.tags && profile.tags.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
         /* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "Tags" }),
-        /* @__PURE__ */ jsx4("div", { className: "mt-1 flex flex-wrap gap-1", children: profile.tags.map((tag) => /* @__PURE__ */ jsx4(Badge, { variant: "outline", className: "text-xs", children: tag }, tag)) })
+        /* @__PURE__ */ jsx4("div", { className: "mt-1 flex flex-wrap gap-1", children: profile.tags.map((tag) => /* @__PURE__ */ jsx4(Badge2, { variant: "outline", className: "text-xs", children: tag }, tag)) })
       ] }),
       profile.system_prompt && /* @__PURE__ */ jsxs4("div", { children: [
         /* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "System Prompt" }),
         /* @__PURE__ */ jsxs4("div", { className: "relative mt-1", children: [
           /* @__PURE__ */ jsx4("pre", { className: "max-h-48 overflow-auto rounded-lg bg-muted p-3 font-mono text-sm", children: profile.system_prompt }),
           /* @__PURE__ */ jsx4(
-            Button,
+            Button2,
             {
               variant: "ghost",
               size: "icon",
@@ -2169,12 +2235,12 @@ function ProfileDetailDialog({
       ] })
     ] }),
     /* @__PURE__ */ jsxs4(DialogFooter, { children: [
-      /* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: onClose, children: "Close" }),
-      onDuplicate && /* @__PURE__ */ jsxs4(Button, { variant: "outline", onClick: onDuplicate, children: [
+      /* @__PURE__ */ jsx4(Button2, { variant: "outline", onClick: onClose, children: "Close" }),
+      onDuplicate && /* @__PURE__ */ jsxs4(Button2, { variant: "outline", onClick: onDuplicate, children: [
         /* @__PURE__ */ jsx4(Copy, { className: "mr-2 h-4 w-4" }),
         "Duplicate"
       ] }),
-      onEdit && /* @__PURE__ */ jsxs4(Button, { onClick: onEdit, children: [
+      onEdit && /* @__PURE__ */ jsxs4(Button2, { onClick: onEdit, children: [
         /* @__PURE__ */ jsx4(Edit2, { className: "mr-2 h-4 w-4" }),
         "Edit"
       ] })

package/dist/styles.css

@@ -591,6 +591,9 @@
   .h-\[500px\] {
     height: 500px;
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -615,6 +618,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-24 {
+    min-height: calc(var(--spacing) * 24);
+  }
   .min-h-\[2px\] {
     min-height: 2px;
   }

package/package.json

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