@tangle-network/sandbox-ui 0.3.11 → 0.3.13

package/dist/{chunk-DMYYQXPN.js → chunk-SMBF6HB5.js}

@@ -2,13 +2,16 @@ import {
   Logo
 } from "./chunk-OKCIKTXQ.js";
 import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunk-MCGKDCOR.js";
+} from "./chunk-IW2JZCOC.js";
 import {
   Skeleton
 } from "./chunk-FRGMMANX.js";
@@ -22,18 +25,103 @@ import {
   cn
 } from "./chunk-RQHJBTEU.js";
 
-// src/dashboard/app-sidebar.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function MaterialIcon({ name, className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("material-symbols-outlined", className),
-      style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" },
-      children: name
-    }
+// src/dashboard/sidebar-context.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";
+var SIDEBAR_MODE_KEY = "sandbox-sidebar-mode";
+var SIDEBAR_RAIL_WIDTH = 64;
+var SIDEBAR_PANEL_WIDTH = 260;
+var SIDEBAR_TOTAL_WIDTH = SIDEBAR_RAIL_WIDTH + SIDEBAR_PANEL_WIDTH;
+var SidebarContext = React.createContext(null);
+function readStorage(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  try {
+    return localStorage.getItem(key) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+function SidebarProvider({
+  defaultPanelOpen = true,
+  defaultMode = "projects",
+  children
+}) {
+  const [panelOpen, setPanelOpenState] = React.useState(
+    () => readStorage(PANEL_OPEN_KEY, String(defaultPanelOpen)) === "true"
+  );
+  const [mode, setModeState] = React.useState(
+    () => readStorage(SIDEBAR_MODE_KEY, defaultMode)
   );
+  const [hidden, setHidden] = React.useState(false);
+  const setPanelOpen = React.useCallback((open) => {
+    setPanelOpenState(open);
+    localStorage.setItem(PANEL_OPEN_KEY, String(open));
+  }, []);
+  const togglePanel = React.useCallback(() => {
+    setPanelOpenState((prev) => {
+      const next = !prev;
+      localStorage.setItem(PANEL_OPEN_KEY, String(next));
+      return next;
+    });
+  }, []);
+  const setMode = React.useCallback((m) => {
+    setModeState(m);
+    localStorage.setItem(SIDEBAR_MODE_KEY, m);
+  }, []);
+  const switchMode = React.useCallback((m) => {
+    setPanelOpenState((prevOpen) => {
+      setModeState((prevMode) => {
+        if (prevOpen && prevMode === m) {
+          localStorage.setItem(PANEL_OPEN_KEY, "false");
+          return prevMode;
+        }
+        localStorage.setItem(PANEL_OPEN_KEY, "true");
+        localStorage.setItem(SIDEBAR_MODE_KEY, m);
+        return m;
+      });
+      return void 0;
+    });
+  }, []);
+  const switchModeStable = React.useCallback((m) => {
+    setModeState((prevMode) => {
+      setPanelOpenState((prevOpen) => {
+        if (prevOpen && prevMode === m) {
+          localStorage.setItem(PANEL_OPEN_KEY, "false");
+          return false;
+        }
+        localStorage.setItem(PANEL_OPEN_KEY, "true");
+        return true;
+      });
+      localStorage.setItem(SIDEBAR_MODE_KEY, m);
+      return m;
+    });
+  }, []);
+  const contentMargin = hidden ? 0 : panelOpen ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH;
+  const value = React.useMemo(
+    () => ({
+      panelOpen,
+      setPanelOpen,
+      togglePanel,
+      mode,
+      setMode,
+      switchMode: switchModeStable,
+      hidden,
+      setHidden,
+      contentMargin
+    }),
+    [panelOpen, setPanelOpen, togglePanel, mode, setMode, switchModeStable, hidden, setHidden, contentMargin]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+function useSidebar() {
+  const ctx = React.useContext(SidebarContext);
+  if (!ctx) throw new Error("useSidebar must be used within a SidebarProvider");
+  return ctx;
 }
+
+// src/dashboard/app-sidebar.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function DefaultLink({
   href,
   to,
@@ -41,102 +129,197 @@ function DefaultLink({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx("a", { href: href ?? to, className, ...rest, children });
+  return /* @__PURE__ */ jsx2("a", { href: href ?? to, className, ...rest, children });
 }
-function AppSidebar({
-  navItems,
-  activeNavId,
-  sandboxes = [],
-  activeSandboxId,
-  onSandboxChange,
-  onNewAgent,
-  className,
-  LinkComponent = DefaultLink
-}) {
-  const Link = LinkComponent;
-  const activeSandbox = sandboxes.find((s) => s.id === activeSandboxId) ?? sandboxes[0];
+function getInitials(name, email) {
+  if (name) return name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+  if (email) return email[0].toUpperCase();
+  return "?";
+}
+function SettingsIcon({ className }) {
+  return /* @__PURE__ */ jsxs("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__ */ jsx2("title", { children: "Settings icon" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function LogOutIcon({ className }) {
+  return /* @__PURE__ */ jsxs("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__ */ jsx2("title", { children: "Log out icon" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx2("polyline", { points: "16,17 21,12 16,7" }),
+    /* @__PURE__ */ jsx2("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
+  ] });
+}
+function Sidebar({ children, className }) {
+  const { panelOpen, hidden } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-sidebar": "true",
+      className: cn(
+        "fixed inset-y-0 left-0 z-40 flex bg-sidebar border-r border-sidebar-border transition-[transform,width] duration-200 ease-in-out",
+        hidden && "-translate-x-full",
+        className
+      ),
+      style: { width: panelOpen ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH },
+      children
+    }
+  );
+}
+function SidebarRail({ children, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0", className), children });
+}
+function SidebarRailHeader({ children, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-sidebar-border", className), children });
+}
+function SidebarRailNav({ children, className }) {
+  return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1", className), children });
+}
+function SidebarRailFooter({ children, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
+}
+function RailSeparator({ className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-sidebar-border", className) });
+}
+function RailButton({ icon: Icon, label, isActive, badge, onClick, className }) {
   return /* @__PURE__ */ jsxs(
-    "aside",
+    "button",
     {
+      type: "button",
+      onClick,
+      title: label,
       className: cn(
-        "h-screen w-64 fixed left-0 top-0 flex flex-col py-6 bg-slate-800/40 z-40 pt-20",
+        "relative flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150",
+        "hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground",
+        "active:scale-95",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
+        !isActive && "text-sidebar-foreground/70",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "px-6 mb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-xl bg-surface-container-low", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-primary-container flex items-center justify-center", children: /* @__PURE__ */ jsx(MaterialIcon, { name: "terminal", className: "text-on-primary-container text-sm" }) }),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0", children: activeSandbox ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "font-mono text-xs text-white font-bold tracking-tight truncate", children: activeSandbox.name }),
-            activeSandbox.label && /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] text-slate-500 truncate", children: activeSandbox.label })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "font-mono text-xs text-slate-500", children: "No sandbox selected" }) })
-        ] }) }),
-        /* @__PURE__ */ jsx("nav", { className: "flex-1 px-4 space-y-1", children: navItems.map((item) => {
-          const isActive = activeNavId === item.id;
-          return /* @__PURE__ */ jsxs(
-            Link,
-            {
-              href: item.href,
-              to: item.href,
-              className: cn(
-                "flex items-center gap-3 px-4 py-3 rounded-lg font-mono text-xs transition-colors",
-                isActive ? "bg-violet-500/10 text-violet-300 border-r-4 border-violet-500" : "text-slate-500 hover:bg-slate-800 hover:text-slate-300"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(MaterialIcon, { name: item.icon, className: "text-lg" }),
-                /* @__PURE__ */ jsx("span", { children: item.label }),
-                item.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto px-2 py-0.5 rounded-full bg-primary-container text-on-primary text-[9px] font-bold", children: item.badge })
-              ]
-            },
-            item.id
-          );
-        }) }),
-        /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 mt-auto space-y-1 border-t border-outline-variant/10", children: [
-          onNewAgent && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: onNewAgent,
-              className: "w-full flex items-center justify-center gap-2 bg-gradient-to-r from-md3-primary to-primary-container text-on-primary font-bold py-2.5 rounded-lg mb-4 text-xs active:scale-95 duration-200 transition-transform",
-              children: [
-                /* @__PURE__ */ jsx(MaterialIcon, { name: "add", className: "text-sm" }),
-                "New Agent"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Link,
-            {
-              href: "/docs",
-              to: "/docs",
-              className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
-              children: [
-                /* @__PURE__ */ jsx(MaterialIcon, { name: "menu_book", className: "text-sm" }),
-                "Documentation"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Link,
-            {
-              href: "/support",
-              to: "/support",
-              className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
-              children: [
-                /* @__PURE__ */ jsx(MaterialIcon, { name: "contact_support", className: "text-sm" }),
-                "Support"
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx2(Icon, { className: "h-5 w-5" }),
+        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-sidebar-primary text-[10px] font-medium text-white px-1", children: badge > 99 ? "99+" : badge })
       ]
     }
   );
 }
+function RailModeButton({ mode, icon, label, badge, className }) {
+  const { panelOpen, mode: currentMode, switchMode } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    RailButton,
+    {
+      icon,
+      label,
+      badge,
+      isActive: panelOpen && currentMode === mode,
+      onClick: () => switchMode(mode),
+      className
+    }
+  );
+}
+function SidebarPanel({ children, className }) {
+  const { panelOpen } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-sidebar-border",
+        panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col h-full w-[260px]", children })
+    }
+  );
+}
+function SidebarPanelHeader({ children, title, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-sidebar-border shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-sidebar-foreground", children: title }) });
+}
+function SidebarPanelContent({ children, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex-1 overflow-y-auto px-2 py-2", className), children });
+}
+function SidebarContent({ children, className }) {
+  const { contentMargin } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "main",
+    {
+      className: cn("min-h-screen transition-[margin-left] duration-200 ease-in-out", className),
+      style: { marginLeft: contentMargin },
+      children
+    }
+  );
+}
+function ProfileAvatar({
+  user,
+  isLoading = false,
+  onLogout,
+  onSettingsClick,
+  settingsHref = "/dashboard/settings",
+  children,
+  className,
+  LinkComponent
+}) {
+  const Link = LinkComponent ?? DefaultLink;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex items-center justify-center w-10 h-10 rounded-lg transition-colors hover:bg-sidebar-accent",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          className
+        ),
+        "aria-label": "User menu",
+        children: isLoading ? /* @__PURE__ */ jsx2(Skeleton, { className: "h-7 w-7 rounded-full" }) : /* @__PURE__ */ jsxs(Avatar, { className: "h-7 w-7", children: [
+          user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
+          /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-[10px] bg-violet-500/20 text-violet-300", children: getInitials(user?.name, user?.email) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "right", align: "end", sideOffset: 8, className: "w-72", children: [
+      /* @__PURE__ */ jsx2(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 py-3", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-12 w-12 shrink-0", children: [
+          user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
+          /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-sm bg-violet-500/20 text-violet-300", children: getInitials(user?.name, user?.email) })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-24 mb-1" }),
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-32" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2("p", { className: "text-sm font-semibold truncate", children: user?.name ?? user?.email ?? "Not logged in" }),
+          user?.email && user?.name && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground truncate", children: user.email }),
+          user?.tier && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground capitalize", children: [
+            user.tier,
+            " Plan"
+          ] })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
+      children,
+      onSettingsClick ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onSettingsClick, children: [
+        /* @__PURE__ */ jsx2(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+        "Settings"
+      ] }) : /* @__PURE__ */ jsx2(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: settingsHref, to: settingsHref, className: "flex items-center", children: [
+        /* @__PURE__ */ jsx2(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+        "Settings"
+      ] }) }),
+      onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-red-400", onClick: onLogout, children: [
+          /* @__PURE__ */ jsx2(LogOutIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+          "Sign Out"
+        ] })
+      ] })
+    ] })
+  ] });
+}
 
 // src/dashboard/cluster-status-bar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function MaterialIcon2({ name, className }) {
-  return /* @__PURE__ */ jsx2("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function MaterialIcon({ name, className }) {
+  return /* @__PURE__ */ jsx3("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
 }
 function ClusterStatusBar({ items, latency, className }) {
   return /* @__PURE__ */ jsxs2(
@@ -147,25 +330,25 @@ function ClusterStatusBar({ items, latency, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-6 overflow-x-auto whitespace-nowrap", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx2(MaterialIcon2, { name: item.icon, className: "text-[14px] text-md3-primary" }),
+        /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-6 overflow-x-auto whitespace-nowrap", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3(MaterialIcon, { name: item.icon, className: "text-[14px] text-md3-primary" }),
           /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-on-surface-variant", children: [
             item.label,
             ": ",
-            /* @__PURE__ */ jsx2("span", { className: cn("text-white", item.valueClass), children: item.value })
+            /* @__PURE__ */ jsx3("span", { className: cn("text-white", item.valueClass), children: item.value })
           ] })
         ] }, i)) }),
         latency && /* @__PURE__ */ jsxs2("div", { className: "hidden sm:flex items-center gap-2", children: [
           /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-on-surface-variant", children: [
             "System Latency: ",
-            /* @__PURE__ */ jsx2("span", { className: "text-white", children: latency })
+            /* @__PURE__ */ jsx3("span", { className: "text-white", children: latency })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "flex gap-0.5 h-3 items-end", children: [
-            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-1 bg-md3-primary" }),
-            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-2 bg-md3-primary" }),
-            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-1.5 bg-md3-primary" }),
-            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-3 bg-md3-primary" }),
-            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-2.5 bg-md3-primary" })
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1 bg-md3-primary" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2 bg-md3-primary" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1.5 bg-md3-primary" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-3 bg-md3-primary" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2.5 bg-md3-primary" })
           ] })
         ] })
       ]
@@ -174,8 +357,8 @@ function ClusterStatusBar({ items, latency, className }) {
 }
 
 // src/dashboard/credit-balance.tsx
-import * as React from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import * as React2 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function CreditBalance({
   amount,
   description = "Credits are automatically deducted based on hourly Sandbox usage and Agent operations.",
@@ -183,19 +366,19 @@ function CreditBalance({
   quickAmounts = [10, 25, 100],
   className
 }) {
-  const [topUpValue, setTopUpValue] = React.useState("50.00");
+  const [topUpValue, setTopUpValue] = React2.useState("50.00");
   return /* @__PURE__ */ jsxs3("div", { className: cn("bg-gradient-to-br from-surface-container to-surface-container-high p-8 rounded-xl flex flex-col justify-between border border-md3-primary/10", className), children: [
     /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx3("h3", { className: "text-lg font-bold text-white tracking-tight mb-1", children: "Available Credits" }),
+      /* @__PURE__ */ jsx4("h3", { className: "text-lg font-bold text-white tracking-tight mb-1", children: "Available Credits" }),
       /* @__PURE__ */ jsxs3("div", { className: "text-5xl font-extrabold text-md3-primary tracking-tighter mb-4", children: [
         "$",
         amount.toFixed(2)
       ] }),
-      /* @__PURE__ */ jsx3("p", { className: "text-sm text-on-surface-variant leading-relaxed", children: description })
+      /* @__PURE__ */ jsx4("p", { className: "text-sm text-on-surface-variant leading-relaxed", children: description })
     ] }),
     onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-4 mt-8", children: [
       /* @__PURE__ */ jsxs3("div", { className: "bg-surface-container-lowest p-1 rounded-lg flex items-center", children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "text",
@@ -204,7 +387,7 @@ function CreditBalance({
             className: "bg-transparent border-none text-white font-mono text-lg w-full focus:ring-0 px-4"
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -214,7 +397,7 @@ function CreditBalance({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx3("div", { className: "flex justify-between gap-2", children: quickAmounts.map((qa) => /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsx4("div", { className: "flex justify-between gap-2", children: quickAmounts.map((qa) => /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -235,9 +418,9 @@ function CreditBalance({
 }
 
 // src/dashboard/invoice-table.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function MaterialIcon3({ name, className }) {
-  return /* @__PURE__ */ jsx4("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function MaterialIcon2({ name, className }) {
+  return /* @__PURE__ */ jsx5("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
 }
 var statusStyle = {
   paid: "bg-md3-primary/10 text-md3-primary",
@@ -247,44 +430,44 @@ var statusStyle = {
 function InvoiceTable({ invoices, onExportAll, onLoadMore, onViewInvoice, hasMore, className }) {
   return /* @__PURE__ */ jsxs4("section", { className, children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center mb-6 px-2", children: [
-      /* @__PURE__ */ jsx4("h2", { className: "text-2xl font-bold text-white tracking-tight", children: "Invoice History" }),
+      /* @__PURE__ */ jsx5("h2", { className: "text-2xl font-bold text-white tracking-tight", children: "Invoice History" }),
       onExportAll && /* @__PURE__ */ jsxs4("button", { type: "button", onClick: onExportAll, className: "text-[10px] font-mono text-md3-primary uppercase tracking-widest flex items-center gap-2 hover:underline", children: [
-        /* @__PURE__ */ jsx4(MaterialIcon3, { name: "download", className: "text-sm" }),
+        /* @__PURE__ */ jsx5(MaterialIcon2, { name: "download", className: "text-sm" }),
         "Export All"
       ] })
     ] }),
-    /* @__PURE__ */ jsx4("div", { className: "bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10", children: /* @__PURE__ */ jsxs4("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "bg-surface-container-high", children: [
-        /* @__PURE__ */ jsx4("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Invoice ID" }),
-        /* @__PURE__ */ jsx4("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Date" }),
-        /* @__PURE__ */ jsx4("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Amount" }),
-        /* @__PURE__ */ jsx4("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Status" }),
-        /* @__PURE__ */ jsx4("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest text-right", children: "Action" })
+    /* @__PURE__ */ jsx5("div", { className: "bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10", children: /* @__PURE__ */ jsxs4("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "bg-surface-container-high", children: [
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Invoice ID" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Date" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Amount" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Status" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest text-right", children: "Action" })
       ] }) }),
-      /* @__PURE__ */ jsx4("tbody", { className: "divide-y divide-outline-variant/5", children: invoices.map((inv) => /* @__PURE__ */ jsxs4("tr", { className: "hover:bg-surface-container-low/50 transition-colors", children: [
-        /* @__PURE__ */ jsx4("td", { className: "px-6 py-5 font-mono text-xs text-white", children: inv.id }),
-        /* @__PURE__ */ jsx4("td", { className: "px-6 py-5 text-sm text-on-surface-variant", children: inv.date }),
+      /* @__PURE__ */ jsx5("tbody", { className: "divide-y divide-outline-variant/5", children: invoices.map((inv) => /* @__PURE__ */ jsxs4("tr", { className: "hover:bg-surface-container-low/50 transition-colors", children: [
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 font-mono text-xs text-white", children: inv.id }),
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-sm text-on-surface-variant", children: inv.date }),
         /* @__PURE__ */ jsxs4("td", { className: "px-6 py-5 text-sm font-bold text-white", children: [
           "$",
           inv.amount.toFixed(2)
         ] }),
-        /* @__PURE__ */ jsx4("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsx4("span", { className: cn("px-2 py-1 text-[10px] font-mono rounded uppercase", statusStyle[inv.status] ?? statusStyle.paid), children: inv.status }) }),
-        /* @__PURE__ */ jsx4("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => onViewInvoice?.(inv.id), className: "text-on-surface-variant hover:text-white transition-colors", children: /* @__PURE__ */ jsx4(MaterialIcon3, { name: "description" }) }) })
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsx5("span", { className: cn("px-2 py-1 text-[10px] font-mono rounded uppercase", statusStyle[inv.status] ?? statusStyle.paid), children: inv.status }) }),
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => onViewInvoice?.(inv.id), className: "text-on-surface-variant hover:text-white transition-colors", children: /* @__PURE__ */ jsx5(MaterialIcon2, { name: "description" }) }) })
       ] }, inv.id)) })
     ] }) }),
-    hasMore && onLoadMore && /* @__PURE__ */ jsx4("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx4("button", { type: "button", onClick: onLoadMore, className: "px-8 py-2 text-[10px] font-mono text-on-surface-variant border border-outline-variant/30 rounded-full hover:bg-surface-container transition-colors uppercase tracking-widest", children: "Load More History" }) })
+    hasMore && onLoadMore && /* @__PURE__ */ jsx5("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: onLoadMore, className: "px-8 py-2 text-[10px] font-mono text-on-surface-variant border border-outline-variant/30 rounded-full hover:bg-surface-container transition-colors uppercase tracking-widest", children: "Load More History" }) })
   ] });
 }
 
 // src/dashboard/plan-cards.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function MaterialIcon4({ name, className }) {
-  return /* @__PURE__ */ jsx5("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function MaterialIcon3({ name, className }) {
+  return /* @__PURE__ */ jsx6("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
 }
 function PlanCards({ plans, className }) {
   return /* @__PURE__ */ jsxs5("section", { className, children: [
-    /* @__PURE__ */ jsx5("h2", { className: "text-2xl font-bold text-white tracking-tight mb-8 px-2", children: "Subscription Plans" }),
-    /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-white tracking-tight mb-8 px-2", children: "Subscription Plans" }),
+    /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs5(
       "div",
       {
         className: cn(
@@ -292,9 +475,9 @@ function PlanCards({ plans, className }) {
           plan.popular ? "bg-surface-container-highest border-2 border-md3-primary/30 relative overflow-hidden" : "bg-surface-container-low group hover:bg-surface-container"
         ),
         children: [
-          plan.popular && /* @__PURE__ */ jsx5("div", { className: "absolute top-0 right-0 bg-md3-primary px-4 py-1 text-[10px] font-bold text-on-primary uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
+          plan.popular && /* @__PURE__ */ jsx6("div", { className: "absolute top-0 right-0 bg-md3-primary px-4 py-1 text-[10px] font-bold text-on-primary uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
           /* @__PURE__ */ jsxs5("div", { className: "mb-6", children: [
-            /* @__PURE__ */ jsx5("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-md3-primary" : "text-on-surface-variant"), children: plan.name }),
+            /* @__PURE__ */ jsx6("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-md3-primary" : "text-on-surface-variant"), children: plan.name }),
             /* @__PURE__ */ jsxs5("div", { className: "text-3xl font-bold text-white", children: [
               "$",
               plan.price,
@@ -304,11 +487,11 @@ function PlanCards({ plans, className }) {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx5("ul", { className: "space-y-3 mb-8 text-sm text-on-surface-variant", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx5(MaterialIcon4, { name: "check", className: "text-sm text-md3-primary" }),
+          /* @__PURE__ */ jsx6("ul", { className: "space-y-3 mb-8 text-sm text-on-surface-variant", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6(MaterialIcon3, { name: "check", className: "text-sm text-md3-primary" }),
             f.text
           ] }, i)) }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -328,47 +511,10 @@ function PlanCards({ plans, className }) {
 }
 
 // src/dashboard/dashboard-layout.tsx
-import * as React2 from "react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var variantStyles = {
-  sandbox: {
-    activeNav: "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
-    userGradient: "bg-[image:var(--accent-gradient-strong)]"
-  }
-};
-function DefaultLink2({
-  href,
-  to,
-  className,
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx6("a", { href: href ?? to, className, ...rest, children });
-}
-function UserIcon({ className }) {
-  return /* @__PURE__ */ jsxs6("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__ */ jsx6("title", { children: "User icon" }),
-    /* @__PURE__ */ jsx6("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "7", r: "4" })
-  ] });
-}
-function SettingsIcon({ className }) {
-  return /* @__PURE__ */ jsxs6("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__ */ jsx6("title", { children: "Settings icon" }),
-    /* @__PURE__ */ jsx6("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
-    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "3" })
-  ] });
-}
-function LogOutIcon({ className }) {
-  return /* @__PURE__ */ jsxs6("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__ */ jsx6("title", { children: "Log out icon" }),
-    /* @__PURE__ */ jsx6("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-    /* @__PURE__ */ jsx6("polyline", { points: "16,17 21,12 16,7" }),
-    /* @__PURE__ */ jsx6("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
-  ] });
-}
-function MaterialIcon5({ name, className }) {
-  return /* @__PURE__ */ jsx6(
+import * as React3 from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function MaterialIcon4({ name, className }) {
+  return /* @__PURE__ */ jsx7(
     "span",
     {
       className: cn("material-symbols-outlined", className),
@@ -377,25 +523,43 @@ function MaterialIcon5({ name, className }) {
     }
   );
 }
+function SettingsIconSmall({ className }) {
+  return /* @__PURE__ */ jsxs6("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__ */ jsx7("title", { children: "Settings" }),
+    /* @__PURE__ */ jsx7("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
 function MenuIcon({ className }) {
   return /* @__PURE__ */ jsxs6("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__ */ jsx6("title", { children: "Menu icon" }),
-    /* @__PURE__ */ jsx6("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
-    /* @__PURE__ */ jsx6("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
-    /* @__PURE__ */ jsx6("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+    /* @__PURE__ */ jsx7("title", { children: "Menu icon" }),
+    /* @__PURE__ */ jsx7("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+    /* @__PURE__ */ jsx7("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+    /* @__PURE__ */ jsx7("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
   ] });
 }
 function XIcon({ className }) {
   return /* @__PURE__ */ jsxs6("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__ */ jsx6("title", { children: "Close icon" }),
-    /* @__PURE__ */ jsx6("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx6("path", { d: "m6 6 12 12" })
+    /* @__PURE__ */ jsx7("title", { children: "Close icon" }),
+    /* @__PURE__ */ jsx7("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx7("path", { d: "m6 6 12 12" })
   ] });
 }
-function DashboardLayout({
+function DefaultLink2({
+  href,
+  to,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx7("a", { href: href ?? to, className, ...rest, children });
+}
+function DashboardLayoutInner({
   children,
   variant = "sandbox",
   navItems,
+  modeItems = [],
+  panels = [],
   activeNavId,
   user,
   isLoading = false,
@@ -408,192 +572,151 @@ function DashboardLayout({
   contentClassName,
   topNavLinks,
   activeTopNavHref,
-  sandboxName,
-  sandboxLabel,
   LinkComponent = DefaultLink2,
-  footer
+  footer,
+  railFooter,
+  profileMenuItems
 }) {
-  const styles = variantStyles[variant];
   const Link = LinkComponent;
-  const [mobileMenuOpen, setMobileMenuOpen] = React2.useState(false);
-  const handleNavClick = () => {
-    setMobileMenuOpen(false);
-  };
-  const SidebarContent = () => /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx6("div", { className: "px-6 mb-8", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 p-3 rounded-xl bg-surface-container-low", children: [
-      /* @__PURE__ */ jsx6("div", { className: "w-10 h-10 rounded-lg bg-primary-container flex items-center justify-center", children: /* @__PURE__ */ jsx6(MaterialIcon5, { name: "terminal", className: "text-on-primary-container text-sm" }) }),
-      /* @__PURE__ */ jsx6("div", { className: "min-w-0", children: sandboxName ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx6("div", { className: "font-mono text-xs text-white font-bold tracking-tight truncate", children: sandboxName }),
-        sandboxLabel && /* @__PURE__ */ jsx6("div", { className: "font-mono text-[10px] text-slate-500 truncate", children: sandboxLabel })
-      ] }) : /* @__PURE__ */ jsx6("div", { className: "font-mono text-xs text-slate-500", children: "No sandbox selected" }) })
-    ] }) }),
-    /* @__PURE__ */ jsx6("nav", { className: "flex-1 px-4 space-y-1", "aria-label": "Main navigation", children: navItems.map((item) => {
-      const isActive = activeNavId === item.id;
-      return /* @__PURE__ */ jsxs6(
-        Link,
-        {
-          href: item.href,
-          to: item.href,
-          onClick: handleNavClick,
-          "aria-current": isActive ? "page" : void 0,
-          className: cn(
-            "flex items-center gap-3 px-4 py-3 rounded-lg font-mono text-xs transition-colors",
-            isActive ? "bg-violet-500/10 text-violet-300 border-r-4 border-violet-500" : "text-slate-500 hover:bg-slate-800 hover:text-slate-300"
-          ),
-          children: [
-            item.materialIcon ? /* @__PURE__ */ jsx6(MaterialIcon5, { name: item.materialIcon, className: "text-lg" }) : /* @__PURE__ */ jsx6(item.icon, { className: "h-5 w-5", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx6("span", { children: item.label })
-          ]
-        },
-        item.id
-      );
-    }) }),
-    /* @__PURE__ */ jsxs6("div", { className: "px-4 py-4 mt-auto space-y-1 border-t border-outline-variant/10", children: [
-      /* @__PURE__ */ jsxs6(
-        "button",
-        {
-          type: "button",
-          onClick: onNewSandbox,
-          className: "w-full flex items-center justify-center gap-2 bg-gradient-to-r from-md3-primary to-primary-container text-on-primary font-bold py-2.5 rounded-lg mb-4 text-xs active:scale-95 duration-200 transition-transform",
-          children: [
-            /* @__PURE__ */ jsx6(MaterialIcon5, { name: "add", className: "text-sm" }),
-            "New Agent"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs6(
-        Link,
-        {
-          href: "/docs",
-          to: "/docs",
-          className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
-          children: [
-            /* @__PURE__ */ jsx6(MaterialIcon5, { name: "menu_book", className: "text-sm" }),
-            "Documentation"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs6(
-        Link,
-        {
-          href: "/support",
-          to: "/support",
-          className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
-          children: [
-            /* @__PURE__ */ jsx6(MaterialIcon5, { name: "contact_support", className: "text-sm" }),
-            "Support"
-          ]
-        }
-      )
-    ] })
-  ] });
-  return /* @__PURE__ */ jsxs6("div", { className: cn("min-h-screen bg-surface text-on-surface", className), children: [
-    /* @__PURE__ */ jsxs6("nav", { className: "fixed top-0 w-full z-50 bg-slate-950/60 backdrop-blur-xl flex justify-between items-center px-8 h-16 font-sans text-sm tracking-tight", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-8", children: [
-        /* @__PURE__ */ jsx6(Logo, { variant, size: "md", className: "hidden md:block" }),
-        topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx6("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx6(
-          Link,
-          {
-            href: link.href,
-            to: link.href,
-            className: cn(
-              "transition-all duration-300 px-2 py-1 rounded",
-              activeTopNavHref === link.href ? "text-white border-b-2 border-violet-500 pb-1" : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
-            ),
-            children: link.label
-          },
-          link.href
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-4", children: [
-        onNewSandbox && /* @__PURE__ */ jsxs6(
-          "button",
+  const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
+  const { contentMargin, hidden, mode } = useSidebar();
+  const modeSet = React3.useMemo(() => new Set(modeItems), [modeItems]);
+  const sidebarUser = user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0;
+  const activePanel = panels.find((p) => p.mode === mode);
+  const sidebarContent = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(SidebarRail, { children: [
+      /* @__PURE__ */ jsx7(SidebarRailHeader, { children: /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-sidebar-accent/80", children: /* @__PURE__ */ jsx7(Logo, { variant, size: "sm", iconOnly: true }) }) }),
+      /* @__PURE__ */ jsx7(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__ */ jsxs6(React3.Fragment, { children: [
+          showSep && /* @__PURE__ */ jsx7(RailSeparator, {}),
+          isMode ? /* @__PURE__ */ jsx7(
+            RailModeButton,
+            {
+              mode: item.id,
+              icon: item.icon,
+              label: item.label,
+              badge: item.badge
+            }
+          ) : /* @__PURE__ */ jsx7(Link, { href: item.href, to: item.href, children: /* @__PURE__ */ jsx7(
+            RailButton,
+            {
+              icon: item.icon,
+              label: item.label,
+              isActive: activeNavId === item.id
+            }
+          ) })
+        ] }, item.id);
+      }) }),
+      /* @__PURE__ */ jsxs6(SidebarRailFooter, { children: [
+        onSettingsClick ? /* @__PURE__ */ jsx7(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick }) : /* @__PURE__ */ jsx7(Link, { href: settingsHref, to: settingsHref, children: /* @__PURE__ */ jsx7(RailButton, { icon: SettingsIconSmall, label: "Settings" }) }),
+        railFooter,
+        /* @__PURE__ */ jsx7(RailSeparator, {}),
+        /* @__PURE__ */ jsx7(
+          ProfileAvatar,
           {
-            type: "button",
-            onClick: onNewSandbox,
-            className: "hidden md:flex items-center gap-2 bg-md3-primary text-on-primary px-4 py-2 rounded-lg font-bold hover:shadow-[0_0_15px_rgba(209,188,255,0.4)] transition-all active:scale-95 text-xs",
-            children: [
-              /* @__PURE__ */ jsx6(MaterialIcon5, { name: "add", className: "text-sm" }),
-              "New Sandbox"
-            ]
+            user: sidebarUser,
+            isLoading,
+            onLogout,
+            onSettingsClick,
+            settingsHref,
+            LinkComponent,
+            children: profileMenuItems
           }
-        ),
-        /* @__PURE__ */ jsx6("button", { type: "button", className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx6(MaterialIcon5, { name: "notifications" }) }),
-        onSettingsClick ? /* @__PURE__ */ jsx6("button", { type: "button", onClick: onSettingsClick, className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx6(MaterialIcon5, { name: "settings" }) }) : /* @__PURE__ */ jsx6(Link, { href: settingsHref, to: settingsHref, className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx6(MaterialIcon5, { name: "settings" }) }),
-        /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx6("button", { type: "button", className: "w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20 overflow-hidden", "aria-label": "User menu", children: user?.avatarUrl ? /* @__PURE__ */ jsx6("img", { src: user.avatarUrl, alt: "", className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx6(UserIcon, { className: "h-4 w-4 text-on-surface-variant" }) }) }),
-          /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "end", className: "w-56", children: [
-            /* @__PURE__ */ jsx6(DropdownMenuLabel, { children: isLoading ? /* @__PURE__ */ jsx6(Skeleton, { className: "h-4 w-24" }) : /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx6("p", { className: "truncate text-sm", children: user?.email ?? "Not logged in" }),
-              /* @__PURE__ */ jsxs6("p", { className: "text-muted-foreground text-xs capitalize", children: [
-                user?.tier ?? "Free",
-                " Plan"
-              ] })
-            ] }) }),
-            /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}),
-            onSettingsClick ? /* @__PURE__ */ jsxs6(DropdownMenuItem, { onClick: onSettingsClick, children: [
-              /* @__PURE__ */ jsx6(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
-              "Settings"
-            ] }) : /* @__PURE__ */ jsx6(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs6(Link, { href: settingsHref, to: settingsHref, className: "flex items-center", children: [
-              /* @__PURE__ */ jsx6(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
-              "Settings"
-            ] }) }),
-            onLogout && /* @__PURE__ */ jsxs6(DropdownMenuItem, { className: "text-red-400", onClick: onLogout, children: [
-              /* @__PURE__ */ jsx6(LogOutIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
-              "Sign Out"
-            ] })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx6(
-        "button",
-        {
-          type: "button",
-          onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-          className: "rounded-md p-2 hover:bg-white/5 md:hidden",
-          "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
-          "aria-expanded": mobileMenuOpen,
-          children: mobileMenuOpen ? /* @__PURE__ */ jsx6(XIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx6(MenuIcon, { className: "h-6 w-6" })
-        }
-      )
+        )
+      ] })
     ] }),
-    mobileMenuOpen && /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-30 bg-black/50 md:hidden", onClick: () => setMobileMenuOpen(false), "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx6(
-      "aside",
+    panels.length > 0 && /* @__PURE__ */ jsxs6(SidebarPanel, { children: [
+      /* @__PURE__ */ jsx7(SidebarPanelHeader, { title: activePanel?.title ?? mode }),
+      /* @__PURE__ */ jsx7(SidebarPanelContent, { children: activePanel?.content })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs6("div", { className: cn("min-h-screen bg-surface text-on-surface", className), children: [
+    /* @__PURE__ */ jsxs6(
+      "nav",
       {
-        className: cn(
-          "fixed top-16 bottom-0 left-0 z-30 flex w-64 flex-col bg-slate-900/95 backdrop-blur-xl transition-transform duration-200 lg:hidden",
-          sidebarClassName,
-          mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
-        ),
-        children: /* @__PURE__ */ jsx6(SidebarContent, {})
+        className: "fixed top-0 z-50 bg-slate-950/60 backdrop-blur-xl flex justify-between items-center px-8 h-14 font-sans text-sm tracking-tight transition-[left,width] duration-200 ease-in-out",
+        style: {
+          left: hidden ? 0 : contentMargin,
+          width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
+        },
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-8", children: topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx7("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx7(
+            Link,
+            {
+              href: link.href,
+              to: link.href,
+              className: cn(
+                "transition-all duration-300 px-2 py-1 rounded",
+                activeTopNavHref === link.href ? "text-white border-b-2 border-violet-500 pb-1" : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
+              ),
+              children: link.label
+            },
+            link.href
+          )) }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-4", children: [
+            onNewSandbox && /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                type: "button",
+                onClick: onNewSandbox,
+                className: "hidden md:flex items-center gap-2 bg-md3-primary text-on-primary px-4 py-2 rounded-lg font-bold hover:shadow-[0_0_15px_rgba(209,188,255,0.4)] transition-all active:scale-95 text-xs",
+                children: [
+                  /* @__PURE__ */ jsx7(MaterialIcon4, { name: "add", className: "text-sm" }),
+                  "New Sandbox"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx7("button", { type: "button", className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx7(MaterialIcon4, { name: "notifications" }) })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              className: "rounded-md p-2 hover:bg-white/5 lg:hidden",
+              "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
+              "aria-expanded": mobileMenuOpen,
+              children: mobileMenuOpen ? /* @__PURE__ */ jsx7(XIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx7(MenuIcon, { className: "h-6 w-6" })
+            }
+          )
+        ]
       }
     ),
-    /* @__PURE__ */ jsx6(
+    mobileMenuOpen && /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-30 bg-black/50 lg:hidden", onClick: () => setMobileMenuOpen(false), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx7(
       "aside",
       {
         className: cn(
-          "hidden lg:flex h-screen w-64 fixed left-0 top-0 flex-col py-6 bg-slate-800/40 z-40 pt-20",
-          sidebarClassName
+          "fixed top-14 bottom-0 left-0 z-30 flex bg-sidebar backdrop-blur-xl transition-transform duration-200 lg:hidden",
+          mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
         ),
-        children: /* @__PURE__ */ jsx6(SidebarContent, {})
+        style: { width: SIDEBAR_TOTAL_WIDTH },
+        children: sidebarContent
       }
     ),
-    /* @__PURE__ */ jsx6("main", { className: cn("lg:ml-64 pt-24 px-8 pb-12 min-h-screen", contentClassName), children }),
+    /* @__PURE__ */ jsx7(Sidebar, { className: cn("hidden lg:flex", sidebarClassName), children: sidebarContent }),
+    /* @__PURE__ */ jsx7(SidebarContent, { className: cn("pt-20 px-8 pb-12 hidden lg:block", contentClassName), children }),
+    /* @__PURE__ */ jsx7("main", { className: cn("pt-20 px-8 pb-12 min-h-screen lg:hidden", contentClassName), children }),
     footer
   ] });
 }
+function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }) {
+  return /* @__PURE__ */ jsx7(SidebarProvider, { defaultPanelOpen, defaultMode, children: /* @__PURE__ */ jsx7(DashboardLayoutInner, { ...props }) });
+}
 
 // src/dashboard/resource-meter.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function getColorByUsage(percent) {
   if (percent >= 90) return "from-red-500 to-red-300";
   if (percent >= 70) return "from-yellow-500 to-yellow-300";
   if (percent >= 40) return "from-blue-500 to-blue-300";
   return "from-green-500 to-green-300";
 }
-function MaterialIcon6({ name, className }) {
-  return /* @__PURE__ */ jsx7("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+function MaterialIcon5({ name, className }) {
+  return /* @__PURE__ */ jsx8("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
 }
 function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
   const percent = max > 0 ? Math.min(value / max * 100, 100) : 0;
@@ -601,12 +724,12 @@ function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
   return /* @__PURE__ */ jsxs7("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-[11px] font-bold font-mono text-on-surface uppercase tracking-tight", children: [
       /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-1", children: [
-        icon && /* @__PURE__ */ jsx7(MaterialIcon6, { name: icon, className: "text-xs" }),
+        icon && /* @__PURE__ */ jsx8(MaterialIcon5, { name: icon, className: "text-xs" }),
         label
       ] }),
-      /* @__PURE__ */ jsx7("span", { className: "text-primary-fixed-dim", children: unit ? `${value}${unit} / ${max}${unit}` : `${Math.round(percent)}%` })
+      /* @__PURE__ */ jsx8("span", { className: "text-primary-fixed-dim", children: unit ? `${value}${unit} / ${max}${unit}` : `${Math.round(percent)}%` })
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn("h-full bg-gradient-to-r rounded-full transition-all duration-500", gradient),
@@ -617,9 +740,9 @@ function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
 }
 
 // src/dashboard/sandbox-card.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function MaterialIcon7({ name, className }) {
-  return /* @__PURE__ */ jsx8("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function MaterialIcon6({ name, className }) {
+  return /* @__PURE__ */ jsx9("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
 }
 var statusConfig = {
   running: { color: "text-green-400", bgColor: "bg-green-500/10", borderColor: "border-green-500/20", dotClass: "bg-green-400 animate-pulse", label: "Running" },
@@ -642,13 +765,15 @@ function getGlow(image) {
   }
   return "";
 }
-function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, className }) {
+function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, onDelete, onSSH, className }) {
   const status = statusConfig[sandbox.status] ?? statusConfig.stopped;
   const glow = getGlow(sandbox.image);
   const isActive = sandbox.status === "running";
   const isHibernating = sandbox.status === "hibernating";
+  const isStopped = sandbox.status === "stopped";
   const isProvisioning = sandbox.status === "provisioning";
   const isArchived = sandbox.status === "archived";
+  const isWakeable = isHibernating || isStopped;
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -659,20 +784,43 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
         className
       ),
       children: [
-        /* @__PURE__ */ jsx8("div", { className: "absolute top-0 right-0 p-4", children: /* @__PURE__ */ jsxs8("span", { className: cn("flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase border", status.bgColor, status.color, status.borderColor), children: [
-          /* @__PURE__ */ jsx8("span", { className: cn("w-2 h-2 rounded-full", status.dotClass) }),
-          status.label
-        ] }) }),
-        /* @__PURE__ */ jsx8("div", { className: "mb-6", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mb-2", children: [
-          sandbox.imageIcon && /* @__PURE__ */ jsx8("div", { className: "w-10 h-10 rounded-lg flex items-center justify-center bg-surface-container-high", children: sandbox.imageIcon }),
+        /* @__PURE__ */ jsxs8("div", { className: "absolute top-0 right-0 p-4 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs8("span", { className: cn("flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase border", status.bgColor, status.color, status.borderColor), children: [
+            /* @__PURE__ */ jsx9("span", { className: cn("w-2 h-2 rounded-full", status.dotClass) }),
+            status.label
+          ] }),
+          !isProvisioning && (onSSH || onDelete) && /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx9(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                className: "p-1 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all opacity-0 group-hover:opacity-100",
+                children: /* @__PURE__ */ jsx9(MaterialIcon6, { name: "more_vert", className: "text-lg" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+              isActive && onSSH && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onSSH(sandbox.id), children: [
+                /* @__PURE__ */ jsx9(MaterialIcon6, { name: "vpn_key", className: "text-base mr-2" }),
+                "SSH Info"
+              ] }),
+              isActive && onSSH && onDelete && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+              onDelete && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onDelete(sandbox.id), className: "text-red-400 focus:text-red-400", children: [
+                /* @__PURE__ */ jsx9(MaterialIcon6, { name: "delete", className: "text-base mr-2" }),
+                "Delete"
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "mb-6", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mb-2", children: [
+          sandbox.imageIcon && /* @__PURE__ */ jsx9("div", { className: "w-10 h-10 rounded-lg flex items-center justify-center bg-surface-container-high", children: sandbox.imageIcon }),
           /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx8("h3", { className: "text-xl font-bold text-white group-hover:text-md3-primary transition-colors truncate", children: sandbox.name }),
-            sandbox.nodeId && /* @__PURE__ */ jsx8("p", { className: "text-on-surface-variant font-mono text-xs truncate", children: sandbox.nodeId })
+            /* @__PURE__ */ jsx9("h3", { className: "text-xl font-bold text-white group-hover:text-md3-primary transition-colors truncate", children: sandbox.name }),
+            sandbox.nodeId && /* @__PURE__ */ jsx9("p", { className: "text-on-surface-variant font-mono text-xs truncate", children: sandbox.nodeId })
           ] })
         ] }) }),
         isProvisioning ? /* @__PURE__ */ jsxs8("div", { className: "mb-8 mt-10", children: [
-          /* @__PURE__ */ jsx8("p", { className: "text-[10px] font-bold font-mono text-orange-400 mb-3 uppercase text-center animate-pulse tracking-widest", children: sandbox.provisioningMessage ?? "Initializing..." }),
-          /* @__PURE__ */ jsx8("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-bold font-mono text-orange-400 mb-3 uppercase text-center animate-pulse tracking-widest", children: sandbox.provisioningMessage ?? "Initializing..." }),
+          /* @__PURE__ */ jsx9("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx9(
             "div",
             {
               className: "h-full bg-gradient-to-r from-orange-600 via-orange-400 to-orange-300 transition-all duration-500",
@@ -680,8 +828,8 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
             }
           ) })
         ] }) : !isArchived ? /* @__PURE__ */ jsxs8("div", { className: cn("space-y-5 mb-8", !isActive && "opacity-40"), children: [
-          /* @__PURE__ */ jsx8(ResourceMeter, { label: "CPU Usage", icon: "memory", value: sandbox.cpuPercent ?? 0 }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(ResourceMeter, { label: "CPU Usage", icon: "memory", value: sandbox.cpuPercent ?? 0 }),
+          /* @__PURE__ */ jsx9(
             ResourceMeter,
             {
               label: "RAM Usage",
@@ -691,7 +839,7 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
               unit: "GB"
             }
           )
-        ] }) : /* @__PURE__ */ jsx8("div", { className: "mb-6", children: sandbox.archivedAt && /* @__PURE__ */ jsx8("p", { className: "text-slate-500 font-mono text-[10px]", children: sandbox.archivedAt }) }),
+        ] }) : /* @__PURE__ */ jsx9("div", { className: "mb-6", children: sandbox.archivedAt && /* @__PURE__ */ jsx9("p", { className: "text-slate-500 font-mono text-[10px]", children: sandbox.archivedAt }) }),
         isActive && /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-2 gap-3", children: [
           /* @__PURE__ */ jsxs8(
             "button",
@@ -700,7 +848,7 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
               onClick: () => onOpenIDE?.(sandbox.id),
               className: "flex items-center justify-center gap-2 py-2.5 bg-surface-container-high hover:bg-md3-primary hover:text-on-primary rounded-lg transition-all duration-300 text-xs font-bold shadow-sm",
               children: [
-                /* @__PURE__ */ jsx8(MaterialIcon7, { name: "open_in_new", className: "text-sm" }),
+                /* @__PURE__ */ jsx9(MaterialIcon6, { name: "open_in_new", className: "text-sm" }),
                 "Open IDE"
               ]
             }
@@ -712,25 +860,25 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
               onClick: () => onOpenTerminal?.(sandbox.id),
               className: "flex items-center justify-center gap-2 py-2.5 bg-surface-container-high hover:bg-slate-700 rounded-lg transition-all text-xs font-bold border border-outline-variant/10",
               children: [
-                /* @__PURE__ */ jsx8(MaterialIcon7, { name: "terminal", className: "text-sm" }),
+                /* @__PURE__ */ jsx9(MaterialIcon6, { name: "terminal", className: "text-sm" }),
                 "Terminal"
               ]
             }
           )
         ] }),
-        isHibernating && /* @__PURE__ */ jsxs8(
+        isWakeable && /* @__PURE__ */ jsxs8(
           "button",
           {
             type: "button",
             onClick: () => onWake?.(sandbox.id),
             className: "w-full flex items-center justify-center gap-2 py-3 bg-md3-primary/10 text-md3-primary hover:bg-md3-primary hover:text-on-primary rounded-lg transition-all duration-300 text-xs font-black",
             children: [
-              /* @__PURE__ */ jsx8(MaterialIcon7, { name: "power_settings_new", className: "text-sm" }),
+              /* @__PURE__ */ jsx9(MaterialIcon6, { name: "power_settings_new", className: "text-sm" }),
               "Wake Sandbox"
             ]
           }
         ),
-        isProvisioning && /* @__PURE__ */ jsx8(
+        isProvisioning && /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -739,7 +887,7 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
             children: "Please Wait..."
           }
         ),
-        isArchived && /* @__PURE__ */ jsx8(
+        isArchived && /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -763,18 +911,18 @@ function NewSandboxCard({ onClick, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx8("div", { className: "w-14 h-14 rounded-full bg-surface-container flex items-center justify-center mb-4 group-hover:bg-md3-primary/20 group-hover:text-md3-primary transition-all group-active:scale-90", children: /* @__PURE__ */ jsx8(MaterialIcon7, { name: "add_box", className: "text-3xl" }) }),
-        /* @__PURE__ */ jsx8("h4", { className: "font-bold text-slate-400 group-hover:text-white mb-1", children: "New Environment" }),
-        /* @__PURE__ */ jsx8("p", { className: "text-xs text-slate-600", children: "Instantiate a fresh compute node" })
+        /* @__PURE__ */ jsx9("div", { className: "w-14 h-14 rounded-full bg-surface-container flex items-center justify-center mb-4 group-hover:bg-md3-primary/20 group-hover:text-md3-primary transition-all group-active:scale-90", children: /* @__PURE__ */ jsx9(MaterialIcon6, { name: "add_box", className: "text-3xl" }) }),
+        /* @__PURE__ */ jsx9("h4", { className: "font-bold text-slate-400 group-hover:text-white mb-1", children: "New Environment" }),
+        /* @__PURE__ */ jsx9("p", { className: "text-xs text-slate-600", children: "Instantiate a fresh compute node" })
       ]
     }
   );
 }
 
 // src/dashboard/sandbox-table.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-function MaterialIcon8({ name, className }) {
-  return /* @__PURE__ */ jsx9("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function MaterialIcon7({ name, className }) {
+  return /* @__PURE__ */ jsx10("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
 }
 var statusColors = {
   running: { dot: "bg-green-400 animate-pulse", text: "text-green-400", bar: "bg-green-400" },
@@ -787,13 +935,13 @@ var statusColors = {
 function MiniMeter({ label, percent, className }) {
   return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-1", className), children: [
     /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-[10px] font-mono text-on-surface-variant", children: [
-      /* @__PURE__ */ jsx9("span", { className: "font-bold", children: label }),
+      /* @__PURE__ */ jsx10("span", { className: "font-bold", children: label }),
       /* @__PURE__ */ jsxs9("span", { className: "text-primary-fixed", children: [
         percent,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: "h-full bg-md3-primary rounded-full", style: { width: `${percent}%` } }) })
+    /* @__PURE__ */ jsx10("div", { className: "h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "h-full bg-md3-primary rounded-full", style: { width: `${percent}%` } }) })
   ] });
 }
 function SandboxTable({
@@ -806,56 +954,72 @@ function SandboxTable({
   onOpenTerminal,
   onSSH,
   onWake,
+  onDelete,
   onMore,
   className
 }) {
+  const handleDelete = onDelete ?? onMore;
   const totalCount = total ?? sandboxes.length;
   const totalPages = Math.ceil(totalCount / pageSize);
   return /* @__PURE__ */ jsxs9("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx9("div", { className: "w-full bg-surface-container-low rounded-2xl overflow-hidden shadow-2xl border border-outline-variant/10", children: /* @__PURE__ */ jsx9("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs9("tr", { className: "bg-surface-container-high/50 border-b border-outline-variant/10", children: [
-        /* @__PURE__ */ jsx9("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Status" }),
-        /* @__PURE__ */ jsx9("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Sandbox Name" }),
-        /* @__PURE__ */ jsx9("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Environment" }),
-        /* @__PURE__ */ jsx9("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Resources" }),
-        /* @__PURE__ */ jsx9("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider text-right", children: "Actions" })
+    /* @__PURE__ */ jsx10("div", { className: "w-full bg-surface-container-low rounded-2xl overflow-hidden shadow-2xl border border-outline-variant/10", children: /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs9("tr", { className: "bg-surface-container-high/50 border-b border-outline-variant/10", children: [
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Sandbox Name" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Environment" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Resources" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider text-right", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ jsx9("tbody", { className: "divide-y divide-outline-variant/5", children: sandboxes.map((sb) => {
+      /* @__PURE__ */ jsx10("tbody", { className: "divide-y divide-outline-variant/5", children: sandboxes.map((sb) => {
         const sc = statusColors[sb.status] ?? statusColors.stopped;
         const isActive = sb.status === "running";
         const isHibernating = sb.status === "hibernating";
+        const isStopped = sb.status === "stopped";
         const isProvisioning = sb.status === "provisioning";
+        const isWakeable = isHibernating || isStopped;
         return /* @__PURE__ */ jsxs9("tr", { className: "hover:bg-surface-container-highest/20 transition-colors group relative", children: [
-          /* @__PURE__ */ jsx9("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx9("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
-            /* @__PURE__ */ jsx9("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
+          /* @__PURE__ */ jsx10("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx10("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
+            /* @__PURE__ */ jsx10("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
           ] }) }),
-          /* @__PURE__ */ jsx9("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx9("span", { className: "text-sm font-bold text-white group-hover:text-md3-primary transition-colors", children: sb.name }),
-            sb.nodeId && /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-mono text-on-surface-variant", children: sb.nodeId })
+          /* @__PURE__ */ jsx10("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx10("span", { className: "text-sm font-bold text-white group-hover:text-md3-primary transition-colors", children: sb.name }),
+            sb.nodeId && /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-mono text-on-surface-variant", children: sb.nodeId })
           ] }) }),
-          /* @__PURE__ */ jsx9("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
-            sb.imageIcon && /* @__PURE__ */ jsx9("div", { className: "w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center", children: sb.imageIcon }),
-            sb.image && /* @__PURE__ */ jsx9("span", { className: "text-xs font-bold text-white", children: sb.image })
+          /* @__PURE__ */ jsx10("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+            sb.imageIcon && /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center", children: sb.imageIcon }),
+            sb.image && /* @__PURE__ */ jsx10("span", { className: "text-xs font-bold text-white", children: sb.image })
           ] }) }),
-          /* @__PURE__ */ jsx9("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs9("div", { className: "space-y-3 w-48", children: [
-            /* @__PURE__ */ jsx9(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
-            /* @__PURE__ */ jsx9(MiniMeter, { label: "RAM", percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0 })
+          /* @__PURE__ */ jsx10("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs9("div", { className: "space-y-3 w-48", children: [
+            /* @__PURE__ */ jsx10(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
+            /* @__PURE__ */ jsx10(MiniMeter, { label: "RAM", percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0 })
           ] }) : isProvisioning ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-md3-primary/80 italic text-[10px] font-bold", children: [
-            /* @__PURE__ */ jsx9(MaterialIcon8, { name: "refresh", className: "text-[14px] animate-spin" }),
+            /* @__PURE__ */ jsx10(MaterialIcon7, { name: "refresh", className: "text-[14px] animate-spin" }),
             sb.provisioningMessage ?? "Allocating nodes..."
-          ] }) : isHibernating ? /* @__PURE__ */ jsxs9("div", { className: "space-y-3 w-48 opacity-30", children: [
-            /* @__PURE__ */ jsx9(MiniMeter, { label: "CPU", percent: 0 }),
-            /* @__PURE__ */ jsx9(MiniMeter, { label: "RAM", percent: 0 })
+          ] }) : isHibernating || isStopped ? /* @__PURE__ */ jsxs9("div", { className: "space-y-3 w-48 opacity-30", children: [
+            /* @__PURE__ */ jsx10(MiniMeter, { label: "CPU", percent: 0 }),
+            /* @__PURE__ */ jsx10(MiniMeter, { label: "RAM", percent: 0 })
           ] }) : null }),
-          /* @__PURE__ */ jsx9("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-end gap-1", children: [
-            isActive && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-              /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx9(MaterialIcon8, { name: "terminal", className: "text-[20px]" }) }),
-              /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx9(MaterialIcon8, { name: "tab", className: "text-[20px]" }) }),
-              /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx9(MaterialIcon8, { name: "vpn_key", className: "text-[20px]" }) })
+          /* @__PURE__ */ jsx10("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-end gap-1", children: [
+            isActive && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "code", className: "text-[20px]" }) }),
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "terminal", className: "text-[20px]" }) })
             ] }),
-            isHibernating && /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-md3-primary/30 text-md3-primary text-[10px] font-bold uppercase tracking-wider hover:bg-md3-primary/10 active:scale-95 transition-all", children: "Wake Up" }),
-            /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onMore?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", children: /* @__PURE__ */ jsx9(MaterialIcon8, { name: "more_vert", className: "text-[20px]" }) })
+            isWakeable && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-md3-primary/30 text-md3-primary text-[10px] font-bold uppercase tracking-wider hover:bg-md3-primary/10 active:scale-95 transition-all", children: "Wake Up" }),
+            (onSSH || handleDelete) && /* @__PURE__ */ jsxs9(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx10("button", { type: "button", className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "more_vert", className: "text-[20px]" }) }) }),
+              /* @__PURE__ */ jsxs9(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+                isActive && onSSH && /* @__PURE__ */ jsxs9(DropdownMenuItem, { onClick: () => onSSH(sb.id), children: [
+                  /* @__PURE__ */ jsx10(MaterialIcon7, { name: "vpn_key", className: "text-base mr-2" }),
+                  "SSH Info"
+                ] }),
+                isActive && onSSH && handleDelete && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
+                handleDelete && /* @__PURE__ */ jsxs9(DropdownMenuItem, { onClick: () => handleDelete(sb.id), className: "text-red-400 focus:text-red-400", children: [
+                  /* @__PURE__ */ jsx10(MaterialIcon7, { name: "delete", className: "text-base mr-2" }),
+                  "Delete"
+                ] })
+              ] })
+            ] })
           ] }) })
         ] }, sb.id);
       }) })
@@ -869,8 +1033,8 @@ function SandboxTable({
         " active sandboxes"
       ] }),
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx9(MaterialIcon8, { name: "chevron_left", className: "text-[18px]" }) }),
-        Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "chevron_left", className: "text-[18px]" }) }),
+        Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx10(
           "button",
           {
             type: "button",
@@ -883,14 +1047,14 @@ function SandboxTable({
           },
           p
         )),
-        /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx9(MaterialIcon8, { name: "chevron_right", className: "text-[18px]" }) })
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "chevron_right", className: "text-[18px]" }) })
       ] })
     ] })
   ] });
 }
 
 // src/dashboard/backend-selector.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function BackendSelector({
   backends,
   selected,
@@ -912,11 +1076,11 @@ function BackendSelector({
   return /* @__PURE__ */ jsxs10("div", { className, children: [
     /* @__PURE__ */ jsxs10("label", { className: "mb-2 block font-medium text-sm", children: [
       label,
-      multiSelect && /* @__PURE__ */ jsx10("span", { className: "ml-2 font-normal text-muted-foreground", children: "(select multiple to compare)" })
+      multiSelect && /* @__PURE__ */ jsx11("span", { className: "ml-2 font-normal text-muted-foreground", children: "(select multiple to compare)" })
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-2", children: backends.map((backend) => {
+    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-2", children: backends.map((backend) => {
       const isSelected = selected.includes(backend.type);
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -928,13 +1092,13 @@ function BackendSelector({
         backend.type
       );
     }) }),
-    multiSelect && selected.length > 1 && /* @__PURE__ */ jsx10("p", { className: "mt-2 text-muted-foreground text-xs", children: hint || `Will run on ${selected.length} variants in parallel for comparison` })
+    multiSelect && selected.length > 1 && /* @__PURE__ */ jsx11("p", { className: "mt-2 text-muted-foreground text-xs", children: hint || `Will run on ${selected.length} variants in parallel for comparison` })
   ] });
 }
 
 // src/dashboard/profile-selector.tsx
 import { Check, ChevronDown, Plus, Settings } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -950,11 +1114,11 @@ function ProfileSelector({
   const builtinProfiles = profiles.filter((p) => p.is_builtin);
   const customProfiles = profiles.filter((p) => !p.is_builtin);
   return /* @__PURE__ */ jsxs11("div", { className, children: [
-    label && /* @__PURE__ */ jsx11("label", { className: "mb-2 block font-medium text-sm", children: label }),
+    label && /* @__PURE__ */ jsx12("label", { className: "mb-2 block font-medium text-sm", children: label }),
     /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "w-full justify-between", children: [
-        /* @__PURE__ */ jsx11("span", { className: "truncate", children: selected ? selected.name : placeholder }),
-        /* @__PURE__ */ jsx11(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+      /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "w-full justify-between", children: [
+        /* @__PURE__ */ jsx12("span", { className: "truncate", children: selected ? selected.name : placeholder }),
+        /* @__PURE__ */ jsx12(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
       ] }) }),
       /* @__PURE__ */ jsxs11(DropdownMenuContent, { className: "w-[300px]", align: "start", children: [
         /* @__PURE__ */ jsxs11(
@@ -963,14 +1127,14 @@ function ProfileSelector({
             onClick: () => onSelect(null),
             className: "flex items-center justify-between",
             children: [
-              /* @__PURE__ */ jsx11("span", { children: placeholder }),
-              !selectedId && /* @__PURE__ */ jsx11(Check, { className: "h-4 w-4 text-green-400" })
+              /* @__PURE__ */ jsx12("span", { children: placeholder }),
+              !selectedId && /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4 text-green-400" })
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-          /* @__PURE__ */ jsx11(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsx11(DropdownMenuLabel, { children: "Built-in Profiles" }),
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx12(DropdownMenuLabel, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs11(
             DropdownMenuItem,
             {
@@ -979,23 +1143,23 @@ function ProfileSelector({
               children: [
                 /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx11("span", { className: "font-medium", children: profile.name }),
+                    /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
                     profile.extends && /* @__PURE__ */ jsxs11(Badge, { variant: "secondary", className: "border-0 text-xs", children: [
                       "extends ",
                       profile.extends
                     ] })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx11(Check, { className: "h-4 w-4 text-green-400" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4 text-green-400" })
                 ] }),
-                profile.description && /* @__PURE__ */ jsx11("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
+                profile.description && /* @__PURE__ */ jsx12("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
               ]
             },
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-          /* @__PURE__ */ jsx11(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsx11(DropdownMenuLabel, { children: "Custom Profiles" }),
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx12(DropdownMenuLabel, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs11(
             DropdownMenuItem,
             {
@@ -1004,12 +1168,12 @@ function ProfileSelector({
               children: [
                 /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx11("span", { className: "font-medium", children: profile.name }),
-                    profile.model && /* @__PURE__ */ jsx11(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
+                    /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
+                    profile.model && /* @__PURE__ */ jsx12(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx11(Check, { className: "h-4 w-4 text-green-400" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4 text-green-400" })
                 ] }),
-                profile.description && /* @__PURE__ */ jsx11("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
+                profile.description && /* @__PURE__ */ jsx12("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
                 showMetrics && profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex gap-3 text-muted-foreground text-xs", children: [
                   /* @__PURE__ */ jsxs11("span", { children: [
                     profile.metrics.total_runs,
@@ -1030,15 +1194,15 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-          /* @__PURE__ */ jsx11(DropdownMenuSeparator, {}),
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
           onCreateClick && /* @__PURE__ */ jsxs11(
             DropdownMenuItem,
             {
               onClick: onCreateClick,
               className: "text-blue-400",
               children: [
-                /* @__PURE__ */ jsx11(Plus, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx12(Plus, { className: "mr-2 h-4 w-4" }),
                 "Create New Profile"
               ]
             }
@@ -1049,7 +1213,7 @@ function ProfileSelector({
               onClick: onManageClick,
               className: "text-muted-foreground",
               children: [
-                /* @__PURE__ */ jsx11(Settings, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx12(Settings, { className: "mr-2 h-4 w-4" }),
                 "Manage Profiles"
               ]
             }
@@ -1076,8 +1240,8 @@ function ProfileComparison({
     (best, p) => (p.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) < (best.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) ? p : best
   );
   return /* @__PURE__ */ jsxs11("div", { className: `rounded-lg border border-border p-4 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx11("h4", { className: "mb-3 font-medium text-sm", children: "Profile Performance" }),
-    /* @__PURE__ */ jsx11("div", { className: "space-y-3", children: profilesWithMetrics.map((profile) => {
+    /* @__PURE__ */ jsx12("h4", { className: "mb-3 font-medium text-sm", children: "Profile Performance" }),
+    /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: profilesWithMetrics.map((profile) => {
       const isBestSuccess = profile.id === bestSuccess.id;
       const isFastest = profile.id === fastestProfile.id;
       return /* @__PURE__ */ jsxs11(
@@ -1086,13 +1250,13 @@ function ProfileComparison({
           className: "flex items-center justify-between gap-4",
           children: [
             /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx11("span", { className: "font-medium", children: profile.name }),
-              isBestSuccess && /* @__PURE__ */ jsx11(Badge, { className: "border-0 bg-green-500/10 text-green-400 text-xs", children: "Best Success" }),
-              isFastest && !isBestSuccess && /* @__PURE__ */ jsx11(Badge, { className: "border-0 bg-blue-500/10 text-blue-400 text-xs", children: "Fastest" })
+              /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
+              isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border-0 bg-green-500/10 text-green-400 text-xs", children: "Best Success" }),
+              isFastest && !isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border-0 bg-blue-500/10 text-blue-400 text-xs", children: "Fastest" })
             ] }),
             /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4 text-sm", children: [
               /* @__PURE__ */ jsxs11("span", { children: [
-                /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground", children: "Success:" }),
+                /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground", children: "Success:" }),
                 " ",
                 /* @__PURE__ */ jsxs11(
                   "span",
@@ -1106,7 +1270,7 @@ function ProfileComparison({
                 )
               ] }),
               /* @__PURE__ */ jsxs11("span", { children: [
-                /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground", children: "Avg:" }),
+                /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground", children: "Avg:" }),
                 " ",
                 ((profile.metrics?.avg_duration_ms ?? 0) / 1e3).toFixed(1),
                 "s"
@@ -1135,7 +1299,7 @@ import {
   X,
   XCircle
 } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var statusConfig2 = {
   pending: {
     icon: Clock,
@@ -1209,7 +1373,7 @@ function VariantList({
   isActioning,
   className
 }) {
-  return /* @__PURE__ */ jsx12("div", { className: `space-y-3 ${className || ""}`, children: variants.map((variant) => {
+  return /* @__PURE__ */ jsx13("div", { className: `space-y-3 ${className || ""}`, children: variants.map((variant) => {
     const status = statusConfig2[variant.status];
     const StatusIcon = status.icon;
     const isSelected = variant.id === selectedId;
@@ -1222,7 +1386,7 @@ function VariantList({
           /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsxs12(Badge, { className: `${status.bg} ${status.color} border-0`, children: [
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   StatusIcon,
                   {
                     className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`
@@ -1230,20 +1394,20 @@ function VariantList({
                 ),
                 status.label
               ] }),
-              /* @__PURE__ */ jsx12("span", { className: "font-medium", children: variant.label }),
+              /* @__PURE__ */ jsx13("span", { className: "font-medium", children: variant.label }),
               variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground text-sm", children: [
                 "(",
                 variant.sublabel,
                 ")"
               ] }),
               variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1 text-muted-foreground text-sm", children: [
-                /* @__PURE__ */ jsx12(Timer, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx13(Timer, { className: "h-3 w-3" }),
                 (variant.durationMs / 1e3).toFixed(2),
                 "s"
               ] })
             ] }),
             /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-              variant.outcome && /* @__PURE__ */ jsx12(
+              variant.outcome && /* @__PURE__ */ jsx13(
                 Badge,
                 {
                   className: `${outcomeConfig[variant.outcome].bg} ${outcomeConfig[variant.outcome].color} border-0`,
@@ -1263,7 +1427,7 @@ function VariantList({
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx12(Check2, { className: "mr-1 h-4 w-4" }),
+                      /* @__PURE__ */ jsx13(Check2, { className: "mr-1 h-4 w-4" }),
                       "Accept"
                     ]
                   }
@@ -1280,13 +1444,13 @@ function VariantList({
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx12(X, { className: "mr-1 h-4 w-4" }),
+                      /* @__PURE__ */ jsx13(X, { className: "mr-1 h-4 w-4" }),
                       "Reject"
                     ]
                   }
                 )
               ] }),
-              variant.detailsUrl && /* @__PURE__ */ jsx12(
+              variant.detailsUrl && /* @__PURE__ */ jsx13(
                 Button,
                 {
                   variant: "ghost",
@@ -1296,13 +1460,13 @@ function VariantList({
                     e.stopPropagation();
                     window.open(variant.detailsUrl, "_blank");
                   },
-                  children: /* @__PURE__ */ jsx12(ExternalLink, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx13(ExternalLink, { className: "h-4 w-4" })
                 }
               )
             ] })
           ] }),
-          variant.error && /* @__PURE__ */ jsx12("p", { className: "mt-2 text-red-400 text-sm", children: variant.error }),
-          variant.summary && /* @__PURE__ */ jsx12("p", { className: "mt-2 line-clamp-2 text-muted-foreground text-sm", children: variant.summary })
+          variant.error && /* @__PURE__ */ jsx13("p", { className: "mt-2 text-red-400 text-sm", children: variant.error }),
+          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-2 line-clamp-2 text-muted-foreground text-sm", children: variant.summary })
         ]
       },
       variant.id
@@ -1311,7 +1475,24 @@ function VariantList({
 }
 
 export {
-  AppSidebar,
+  SIDEBAR_RAIL_WIDTH,
+  SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_TOTAL_WIDTH,
+  SidebarProvider,
+  useSidebar,
+  Sidebar,
+  SidebarRail,
+  SidebarRailHeader,
+  SidebarRailNav,
+  SidebarRailFooter,
+  RailSeparator,
+  RailButton,
+  RailModeButton,
+  SidebarPanel,
+  SidebarPanelHeader,
+  SidebarPanelContent,
+  SidebarContent,
+  ProfileAvatar,
   ClusterStatusBar,
   CreditBalance,
   InvoiceTable,