@tangle-network/sandbox-ui 0.6.1 → 0.8.4

package/dist/{chunk-6V4XVKFY.js → chunk-XXDFEF72.js}

@@ -1,6 +1,6 @@
 import {
   Logo
-} from "./chunk-OKCIKTXQ.js";
+} from "./chunk-OKLQVY3Y.js";
 import {
   Avatar,
   AvatarFallback,
@@ -11,16 +11,16 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunk-WBQ7VULC.js";
+} from "./chunk-34A66VBG.js";
 import {
   Skeleton
-} from "./chunk-YYGECNZZ.js";
+} from "./chunk-66EZOYZR.js";
 import {
   Badge
-} from "./chunk-TDYQBLL5.js";
+} from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-TSE423UF.js";
+} from "./chunk-2QZ6G7NM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -42,9 +42,17 @@ function readStorage(key, fallback) {
     return fallback;
   }
 }
+function writeStorage(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+}
 function SidebarProvider({
   defaultPanelOpen = true,
   defaultMode = "projects",
+  hasPanels = true,
   children
 }) {
   const [panelOpen, setPanelOpenState] = React.useState(
@@ -56,48 +64,38 @@ function SidebarProvider({
   const [hidden, setHidden] = React.useState(false);
   const setPanelOpen = React.useCallback((open) => {
     setPanelOpenState(open);
-    localStorage.setItem(PANEL_OPEN_KEY, String(open));
+    writeStorage(PANEL_OPEN_KEY, String(open));
   }, []);
   const togglePanel = React.useCallback(() => {
     setPanelOpenState((prev) => {
       const next = !prev;
-      localStorage.setItem(PANEL_OPEN_KEY, String(next));
+      writeStorage(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;
-    });
+    writeStorage(SIDEBAR_MODE_KEY, m);
   }, []);
   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");
+      if (prevMode === m) {
+        setPanelOpenState((prevOpen) => {
+          const next = !prevOpen;
+          writeStorage(PANEL_OPEN_KEY, String(next));
+          return next;
+        });
+        return prevMode;
+      }
+      setPanelOpenState(() => {
+        writeStorage(PANEL_OPEN_KEY, "true");
         return true;
       });
-      localStorage.setItem(SIDEBAR_MODE_KEY, m);
+      writeStorage(SIDEBAR_MODE_KEY, m);
       return m;
     });
   }, []);
-  const contentMargin = hidden ? 0 : panelOpen ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH;
+  const contentMargin = hidden ? 0 : panelOpen && hasPanels ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH;
   const value = React.useMemo(
     () => ({
       panelOpen,
@@ -108,9 +106,10 @@ function SidebarProvider({
       switchMode: switchModeStable,
       hidden,
       setHidden,
-      contentMargin
+      contentMargin,
+      hasPanels
     }),
-    [panelOpen, setPanelOpen, togglePanel, mode, setMode, switchModeStable, hidden, setHidden, contentMargin]
+    [panelOpen, setPanelOpen, togglePanel, mode, setMode, switchModeStable, hidden, setHidden, contentMargin, hasPanels]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
 }
@@ -151,27 +150,27 @@ function LogOutIcon({ className }) {
     /* @__PURE__ */ jsx2("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
   ] });
 }
-function Sidebar({ children, className }) {
-  const { panelOpen, hidden } = useSidebar();
+function Sidebar({ children, className, style }) {
+  const { panelOpen, hidden, hasPanels } = useSidebar();
   return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-sidebar": "true",
       className: cn(
-        "fixed inset-y-0 left-0 z-40 flex bg-[var(--depth-1)] border-r border-[var(--border-subtle)] transition-[transform,width] duration-200 ease-in-out",
+        "fixed inset-y-0 left-0 z-40 flex bg-card/80 backdrop-blur-3xl border-r border-border transition-[transform,width] duration-200 ease-in-out shadow-sm",
         hidden && "-translate-x-full",
         className
       ),
-      style: { width: panelOpen ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH },
+      style: { width: panelOpen && hasPanels ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH, ...style },
       children
     }
   );
 }
 function SidebarRail({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0 bg-[var(--depth-2)]", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0 bg-transparent", className), children });
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-[var(--border-subtle)]", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-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 });
@@ -180,7 +179,7 @@ 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-[var(--border-subtle)]", className) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--md3-outline-variant)]", className) });
 }
 function RailButton({ icon: Icon2, label, isActive, badge, onClick, className }) {
   return /* @__PURE__ */ jsxs(
@@ -190,21 +189,17 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className })
       onClick,
       title: label,
       className: cn(
-        "group relative flex flex-col items-center justify-center gap-0.5 w-12 h-12 rounded-lg transition-all duration-150",
+        "group relative flex items-center justify-center w-11 h-11 rounded-xl transition-all duration-200",
         "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
         "active:scale-95",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] shadow-[0_0_12px_-2px_rgba(130,99,255,0.3)]",
-        !isActive && "text-[var(--text-muted)]",
+        !isActive && "text-muted-foreground",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2(Icon2, { className: "h-[18px] w-[18px]" }),
-        /* @__PURE__ */ jsx2("span", { className: cn(
-          "text-[9px] leading-none font-medium tracking-tight truncate max-w-[44px]",
-          isActive ? "text-[var(--accent-text)]" : "text-[var(--text-dim)] group-hover:text-[var(--accent-text)]"
-        ), children: label }),
-        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-0.5 -right-0.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-[var(--brand-primary)] text-[8px] font-medium text-white px-0.5", children: badge > 99 ? "99+" : badge })
+        /* @__PURE__ */ jsx2(Icon2, { 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-primary text-[9px] font-bold text-[var(--md3-on-primary)] px-1 shadow-sm", children: badge > 99 ? "99+" : badge })
       ]
     }
   );
@@ -229,7 +224,7 @@ function SidebarPanel({ children, className }) {
     "div",
     {
       className: cn(
-        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-[var(--border-subtle)] bg-[var(--depth-1)]",
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-border bg-card/50 backdrop-blur-xl",
         panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
@@ -238,7 +233,7 @@ function SidebarPanel({ children, className }) {
   );
 }
 function SidebarPanelHeader({ children, title, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-[var(--border-subtle)] shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-border shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-foreground", children: title }) });
 }
 function SidebarPanelContent({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex-1 overflow-y-auto px-2 py-2", className), children });
@@ -272,7 +267,7 @@ function ProfileAvatar({
         type: "button",
         className: cn(
           "flex items-center justify-center w-12 h-12 rounded-lg transition-colors hover:bg-[var(--accent-surface-soft)]",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
           className
         ),
         "aria-label": "User menu",
@@ -321,42 +316,28 @@ function ProfileAvatar({
 }
 
 // src/dashboard/cluster-status-bar.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ClusterStatusBar({ items, latency, className }) {
-  return /* @__PURE__ */ jsxs2(
-    "footer",
-    {
-      className: cn(
-        "fixed bottom-0 left-0 lg:left-64 right-0 h-9 bg-[var(--depth-1)] border-t border-[var(--border-subtle)] flex items-center justify-between px-6 z-30",
-        className
-      ),
-      children: [
-        /* @__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-1.5", children: [
-          item.icon && /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-muted)] [&_svg]:h-3 [&_svg]:w-3", children: item.icon }),
-          /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-[var(--text-muted)]", children: [
-            item.label,
-            ":",
-            " ",
-            /* @__PURE__ */ jsx3("span", { className: cn("text-[var(--text-secondary)]", 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-[var(--text-muted)]", children: [
-            "Latency:",
-            " ",
-            /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-secondary)]", children: latency })
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex gap-0.5 h-3 items-end", children: [
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1 bg-[var(--brand-cool)]" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2 bg-[var(--brand-cool)]" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1.5 bg-[var(--brand-cool)]" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-3 bg-[var(--brand-cool)]" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2.5 bg-[var(--brand-cool)]" })
-          ] })
-        ] })
-      ]
-    }
-  );
+  if (!items?.length) return null;
+  return /* @__PURE__ */ jsx3("div", { className: cn("fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-max max-w-[90vw] animate-in slide-in-from-bottom flex justify-center", className), children: /* @__PURE__ */ jsxs2("div", { className: "glass-panel-heavy overflow-hidden rounded-full px-6 py-3 flex flex-wrap sm:flex-nowrap items-center justify-between gap-8 border-primary/20 shadow-sm backdrop-blur-2xl", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-6", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx3("span", { className: "text-[var(--md3-primary)] [&_svg]:h-[18px] [&_svg]:w-[18px]", children: item.icon }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-[var(--md3-on-surface-variant)] uppercase tracking-wider font-bold", children: item.label }),
+        /* @__PURE__ */ jsx3("span", { className: cn("text-xs font-bold text-foreground", item.valueClass), children: item.value })
+      ] })
+    ] }, i)) }),
+    latency && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3("div", { className: "h-6 w-px bg-border" }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "relative flex h-2.5 w-2.5 items-center justify-center", children: [
+          /* @__PURE__ */ jsx3("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" }),
+          /* @__PURE__ */ jsx3("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" })
+        ] }),
+        /* @__PURE__ */ jsx3("span", { className: "text-xs font-mono text-green-400 font-bold", children: latency })
+      ] })
+    ] })
+  ] }) });
 }
 
 // src/dashboard/credit-balance.tsx
@@ -370,24 +351,24 @@ function CreditBalance({
   className
 }) {
   const [topUpValue, setTopUpValue] = React2.useState("50.00");
-  return /* @__PURE__ */ jsxs3("div", { className: cn("bg-[var(--depth-2)] p-5 rounded-xl flex flex-col justify-between border border-[var(--border-subtle)]", className), children: [
+  return /* @__PURE__ */ jsxs3("div", { className: cn("bg-card p-5 rounded-xl flex flex-col justify-between border border-border", className), children: [
     /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-[var(--text-muted)] uppercase tracking-widest mb-2", children: "Available Credits" }),
-      /* @__PURE__ */ jsxs3("div", { className: "text-4xl font-extrabold text-[var(--brand-cool)] tracking-tighter mb-2", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: "Available Credits" }),
+      /* @__PURE__ */ jsxs3("div", { className: "text-4xl font-extrabold text-primary tracking-tighter mb-2", children: [
         "$",
         amount.toFixed(2)
       ] }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-[var(--text-muted)] leading-relaxed", children: description })
+      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description })
     ] }),
     onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 mt-5", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "bg-[var(--depth-1)] border border-[var(--border-subtle)] p-1 rounded-lg flex items-center", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "bg-card border border-border p-1 rounded-lg flex items-center", children: [
         /* @__PURE__ */ jsx4(
           "input",
           {
             type: "text",
             value: `$${topUpValue}`,
             onChange: (e) => setTopUpValue(e.target.value.replace(/[^0-9.]/g, "")),
-            className: "bg-transparent border-none text-[var(--text-primary)] font-mono text-lg w-full focus:ring-0 px-4 outline-none"
+            className: "bg-transparent border-none text-foreground font-mono text-lg w-full focus:ring-0 px-4 outline-none"
           }
         ),
         /* @__PURE__ */ jsx4(
@@ -395,7 +376,7 @@ function CreditBalance({
           {
             type: "button",
             onClick: () => onTopUp(Number.parseFloat(topUpValue)),
-            className: "bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--accent-text)] px-6 py-3 rounded-md font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform hover:bg-[var(--accent-surface-strong)]",
+            className: "bg-[var(--accent-surface-soft)] border border-border text-[var(--accent-text)] px-6 py-3 rounded-md font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform hover:bg-[var(--accent-surface-strong)]",
             children: "Top Up"
           }
         )
@@ -408,7 +389,7 @@ function CreditBalance({
             setTopUpValue(String(qa));
             onTopUp(qa);
           },
-          className: "flex-1 py-2 text-[10px] font-mono text-[var(--text-muted)] border border-[var(--border-subtle)] rounded-md hover:bg-[var(--depth-3)] hover:text-[var(--text-secondary)] transition-colors uppercase",
+          className: "flex-1 py-2 text-[10px] font-mono text-muted-foreground border border-border rounded-md hover:bg-muted/50 hover:text-foreground transition-colors uppercase",
           children: [
             "+$",
             qa
@@ -424,39 +405,39 @@ function CreditBalance({
 import { Download, FileText } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var statusStyle = {
-  paid: "bg-[var(--accent-surface-soft)] text-[var(--brand-cool)] border border-[var(--border-accent)]",
+  paid: "bg-[var(--accent-surface-soft)] text-primary border border-border",
   pending: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)] border border-[var(--surface-warning-border)]",
   failed: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] border border-[var(--surface-danger-border)]"
 };
 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__ */ jsx5("h2", { className: "text-2xl font-bold text-[var(--text-primary)] tracking-tight", children: "Invoice History" }),
-      onExportAll && /* @__PURE__ */ jsxs4("button", { type: "button", onClick: onExportAll, className: "text-[10px] font-mono text-[var(--brand-cool)] uppercase tracking-widest flex items-center gap-2 hover:underline", children: [
+      /* @__PURE__ */ jsx5("h2", { className: "text-2xl font-bold text-foreground tracking-tight", children: "Invoice History" }),
+      onExportAll && /* @__PURE__ */ jsxs4("button", { type: "button", onClick: onExportAll, className: "text-[10px] font-mono text-primary uppercase tracking-widest flex items-center gap-2 hover:underline", children: [
         /* @__PURE__ */ jsx5(Download, { className: "h-3.5 w-3.5" }),
         "Export All"
       ] })
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "bg-[var(--depth-2)] rounded-xl overflow-hidden border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsxs4("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "bg-[var(--depth-1)] border-b border-[var(--border-subtle)]", children: [
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Invoice ID" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Date" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Amount" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Status" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest text-right", children: "Action" })
+    /* @__PURE__ */ jsx5("div", { className: "bg-card rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ jsxs4("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "bg-background border-b border-border", children: [
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Invoice ID" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Date" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Amount" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Status" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest text-right", children: "Action" })
       ] }) }),
-      /* @__PURE__ */ jsx5("tbody", { className: "divide-y divide-[var(--border-subtle)]", children: invoices.map((inv) => /* @__PURE__ */ jsxs4("tr", { className: "hover:bg-[var(--depth-3)] transition-colors", children: [
-        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 font-mono text-xs text-[var(--text-primary)]", children: inv.id }),
-        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-sm text-[var(--text-secondary)]", children: inv.date }),
-        /* @__PURE__ */ jsxs4("td", { className: "px-6 py-5 text-sm font-bold text-[var(--text-primary)]", children: [
+      /* @__PURE__ */ jsx5("tbody", { className: "divide-y divide-border", children: invoices.map((inv) => /* @__PURE__ */ jsxs4("tr", { className: "hover:bg-muted/50 transition-colors", children: [
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 font-mono text-xs text-foreground", children: inv.id }),
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-sm text-foreground", children: inv.date }),
+        /* @__PURE__ */ jsxs4("td", { className: "px-6 py-5 text-sm font-bold text-foreground", children: [
           "$",
           inv.amount.toFixed(2)
         ] }),
         /* @__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-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors", children: /* @__PURE__ */ jsx5(FileText, { className: "h-4 w-4" }) }) })
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => onViewInvoice?.(inv.id), className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx5(FileText, { className: "h-4 w-4" }) }) })
       ] }, inv.id)) })
     ] }) }),
-    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-[var(--text-muted)] border border-[var(--border-subtle)] rounded-full hover:bg-[var(--depth-3)] 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-muted-foreground border border-border rounded-full hover:bg-muted/50 transition-colors uppercase tracking-widest", children: "Load More History" }) })
   ] });
 }
 
@@ -465,29 +446,29 @@ import { Check } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function PlanCards({ plans, className }) {
   return /* @__PURE__ */ jsxs5("section", { className, children: [
-    /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-5 px-2", children: "Subscription Plans" }),
+    /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-foreground tracking-tight mb-5 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(
           "p-5 rounded-xl transition-all relative overflow-hidden border",
-          plan.popular ? "bg-[var(--depth-3)] border-[var(--border-accent)]" : "bg-[var(--depth-2)] border-[var(--border-subtle)] hover:bg-[var(--depth-3)] hover:border-[var(--border-default)]"
+          plan.popular ? "bg-muted/50 border-border" : "bg-card border-border hover:bg-muted/50 hover:border-primary/20"
         ),
         children: [
-          plan.popular && /* @__PURE__ */ jsx6("div", { className: "absolute top-0 right-0 bg-[var(--accent-surface-soft)] border-l border-b border-[var(--border-accent)] px-4 py-1 text-[10px] font-bold text-[var(--accent-text)] uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
+          plan.popular && /* @__PURE__ */ jsx6("div", { className: "absolute top-0 right-0 bg-[var(--accent-surface-soft)] border-l border-b border-border px-4 py-1 text-[10px] font-bold text-[var(--accent-text)] uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
           /* @__PURE__ */ jsxs5("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx6("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-[var(--brand-cool)]" : "text-[var(--text-muted)]"), children: plan.name }),
-            /* @__PURE__ */ jsxs5("div", { className: "text-3xl font-bold text-[var(--text-primary)]", children: [
+            /* @__PURE__ */ jsx6("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-primary" : "text-muted-foreground"), children: plan.name }),
+            /* @__PURE__ */ jsxs5("div", { className: "text-3xl font-bold text-foreground", children: [
               "$",
               plan.price,
-              /* @__PURE__ */ jsxs5("span", { className: "text-sm font-normal text-[var(--text-muted)] tracking-normal", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "text-sm font-normal text-muted-foreground tracking-normal", children: [
                 "/",
                 plan.period ?? "mo"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx6("ul", { className: "space-y-2 mb-5 text-sm text-[var(--text-muted)]", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx6(Check, { className: "h-3.5 w-3.5 text-[var(--brand-cool)] shrink-0" }),
+          /* @__PURE__ */ jsx6("ul", { className: "space-y-2 mb-5 text-sm text-muted-foreground", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6(Check, { className: "h-3.5 w-3.5 text-primary shrink-0" }),
             f.text
           ] }, i)) }),
           /* @__PURE__ */ jsx6(
@@ -497,7 +478,7 @@ function PlanCards({ plans, className }) {
               onClick: () => plan.onSelect?.(plan.id),
               className: cn(
                 "w-full py-3 rounded-lg text-xs font-bold uppercase tracking-widest transition-all border",
-                plan.current ? "border-[var(--border-subtle)] text-[var(--text-muted)] hover:border-[var(--border-default)] hover:text-[var(--text-secondary)]" : plan.popular ? "bg-[var(--accent-surface-soft)] border-[var(--border-accent)] text-[var(--accent-text)] hover:bg-[var(--accent-surface-strong)] active:scale-95 transition-transform" : "border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--border-accent)] hover:text-[var(--brand-cool)]"
+                plan.current ? "border-border text-muted-foreground hover:border-primary/20 hover:text-foreground" : plan.popular ? "bg-[var(--accent-surface-soft)] border-border text-[var(--accent-text)] hover:bg-[var(--accent-surface-strong)] active:scale-95 transition-transform" : "border-border text-foreground hover:border-primary/20 hover:text-primary"
               ),
               children: plan.ctaLabel ?? (plan.current ? "Current Plan" : "Upgrade Now")
             }
@@ -512,7 +493,7 @@ function PlanCards({ plans, className }) {
 // src/dashboard/dashboard-layout.tsx
 import * as React3 from "react";
 import { Plus, Bell } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 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" }),
@@ -569,13 +550,13 @@ function DashboardLayoutInner({
 }) {
   const Link = LinkComponent;
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
-  const { contentMargin, hidden, mode } = useSidebar();
+  const { contentMargin, hidden, mode, hasPanels, panelOpen } = 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: [
+  const sidebarContent = /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsxs6(SidebarRail, { children: [
-      /* @__PURE__ */ jsx7(SidebarRailHeader, { children: /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-[var(--depth-3)]", children: /* @__PURE__ */ jsx7(Logo, { variant, size: "sm", iconOnly: true }) }) }),
+      /* @__PURE__ */ jsx7(SidebarRailHeader, { children: /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-muted/50", 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);
@@ -623,11 +604,11 @@ function DashboardLayoutInner({
       /* @__PURE__ */ jsx7(SidebarPanelContent, { children: activePanel?.content })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs6("div", { className: cn("min-h-screen bg-[var(--depth-1)] text-[var(--text-primary)]", className), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsxs6(
       "nav",
       {
-        className: "fixed top-0 z-50 bg-[var(--depth-2)] border-b border-[var(--border-subtle)] flex justify-between items-center px-8 h-14 font-sans text-sm tracking-tight transition-[left,width] duration-200 ease-in-out",
+        className: "fixed top-0 z-50 bg-card/80 backdrop-blur-3xl border-b border-border flex justify-between items-center px-8 h-14 font-sans text-[13px] tracking-tight transition-[left,width] duration-200 ease-in-out shadow-sm",
         style: {
           left: hidden ? 0 : contentMargin,
           width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
@@ -640,7 +621,7 @@ function DashboardLayoutInner({
               to: link.href,
               className: cn(
                 "transition-all duration-300 px-2 py-1 rounded",
-                activeTopNavHref === link.href ? "text-[var(--text-primary)] border-b-2 border-[var(--brand-cool)] pb-1" : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--depth-3)]"
+                activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
               ),
               children: link.label
             },
@@ -652,21 +633,21 @@ function DashboardLayoutInner({
               {
                 type: "button",
                 onClick: onNewSandbox,
-                className: "hidden md:flex items-center gap-2 bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--accent-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--accent-surface-strong)] transition-all active:scale-95 text-xs",
+                className: "hidden md:flex items-center gap-2 bg-[var(--accent-surface-soft)] border border-border text-[var(--accent-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--accent-surface-strong)] transition-all active:scale-95 text-xs",
                 children: [
                   /* @__PURE__ */ jsx7(Plus, { className: "h-3.5 w-3.5" }),
                   "New Sandbox"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx7("button", { type: "button", className: "text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors p-2 rounded-lg hover:bg-[var(--depth-3)]", children: /* @__PURE__ */ jsx7(Bell, { className: "h-4 w-4" }) })
+            /* @__PURE__ */ jsx7("button", { type: "button", className: "text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted/50", children: /* @__PURE__ */ jsx7(Bell, { className: "h-4 w-4" }) })
           ] }),
           /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
               onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-              className: "rounded-md p-2 hover:bg-[var(--depth-3)] lg:hidden",
+              className: "rounded-md p-2 hover:bg-muted/50 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" })
@@ -680,10 +661,10 @@ function DashboardLayoutInner({
       "aside",
       {
         className: cn(
-          "fixed top-14 bottom-0 left-0 z-30 flex bg-[var(--depth-1)] transition-transform duration-200 lg:hidden",
+          "fixed top-14 bottom-0 left-0 z-30 flex bg-background transition-transform duration-200 lg:hidden",
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
         ),
-        style: { width: SIDEBAR_TOTAL_WIDTH },
+        style: { width: panelOpen && hasPanels ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH },
         children: sidebarContent
       }
     ),
@@ -694,7 +675,7 @@ function DashboardLayoutInner({
   ] });
 }
 function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }) {
-  return /* @__PURE__ */ jsx7(SidebarProvider, { defaultPanelOpen, defaultMode, children: /* @__PURE__ */ jsx7(DashboardLayoutInner, { ...props }) });
+  return /* @__PURE__ */ jsx7(SidebarProvider, { defaultPanelOpen, defaultMode, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx7(DashboardLayoutInner, { defaultPanelOpen, defaultMode, ...props }) });
 }
 
 // src/dashboard/resource-meter.tsx
@@ -702,164 +683,186 @@ import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function getBarColor(percent) {
   if (percent >= 90) return "bg-[var(--code-error)]";
   if (percent >= 70) return "bg-[var(--surface-warning-text)]";
-  return "bg-[var(--brand-cool)]";
+  return "bg-primary";
 }
 function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
   const percent = max > 0 ? Math.min(value / max * 100, 100) : 0;
   const barColor = getBarColor(percent);
   return /* @__PURE__ */ jsxs7("div", { className: cn("flex items-center gap-3", className), children: [
-    /* @__PURE__ */ jsxs7("span", { className: "flex shrink-0 items-center gap-1 text-[10px] font-mono text-[var(--text-secondary)] uppercase tracking-wide", children: [
+    /* @__PURE__ */ jsxs7("span", { className: "flex shrink-0 items-center gap-1 text-[10px] font-mono text-muted-foreground uppercase tracking-wide", children: [
       icon,
       label
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "h-1.5 min-w-0 flex-1 bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8("div", { className: "h-1.5 min-w-0 flex-1 bg-card rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn("h-full rounded-full transition-all duration-500", barColor),
         style: { width: `${percent}%` }
       }
     ) }),
-    /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[10px] font-mono tabular-nums text-[var(--text-muted)]", children: unit ? `${value}${unit}/${max}${unit}` : `${Math.round(percent)}%` })
+    /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[10px] font-mono tabular-nums text-muted-foreground", children: unit ? `${value}${unit}/${max}${unit}` : `${Math.round(percent)}%` })
   ] });
 }
 
 // src/dashboard/sandbox-card.tsx
-import { Cpu, Database, Plus as Plus2, Terminal, Power, ExternalLink, RefreshCw, Trash2 } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var statusConfig = {
-  running: { color: "text-[var(--surface-success-text)]", bg: "bg-[var(--surface-success-bg)]", border: "border-[var(--surface-success-border)]", dotClass: "bg-[var(--surface-success-text)] animate-pulse", label: "Running" },
-  hibernating: { color: "text-[var(--text-muted)]", bg: "bg-[var(--depth-3)]", border: "border-[var(--border-subtle)]", dotClass: "bg-[var(--text-muted)]", label: "Hibernating" },
-  provisioning: { color: "text-[var(--brand-cool)]", bg: "bg-[var(--accent-surface-soft)]", border: "border-[var(--border-accent)]", dotClass: "bg-[var(--brand-cool)] animate-pulse", label: "Provisioning" },
-  stopped: { color: "text-[var(--text-muted)]", bg: "bg-[var(--depth-3)]", border: "border-[var(--border-subtle)]", dotClass: "bg-[var(--text-muted)]", label: "Stopped" },
-  failed: { color: "text-[var(--surface-danger-text)]", bg: "bg-[var(--surface-danger-bg)]", border: "border-[var(--surface-danger-border)]", dotClass: "bg-[var(--surface-danger-text)]", label: "Failed" },
-  archived: { color: "text-[var(--text-muted)]", bg: "bg-[var(--depth-3)]", border: "border-[var(--border-subtle)]", dotClass: "bg-[var(--border-default)]", label: "Archived" }
-};
-function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, onDelete, className }) {
-  const status = statusConfig[sandbox.status] ?? statusConfig.stopped;
-  const isActive = sandbox.status === "running";
-  const isHibernating = sandbox.status === "hibernating";
-  const isProvisioning = sandbox.status === "provisioning";
-  const isArchived = sandbox.status === "archived";
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      className: cn(
-        "bg-[var(--depth-2)] rounded-xl p-5 relative overflow-hidden group hover:bg-[var(--depth-3)] transition-all duration-300 border border-[var(--border-subtle)] hover:border-[var(--border-default)]",
-        isActive && "border-[var(--border-accent)]",
-        isArchived && "opacity-60 hover:opacity-100",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx9("div", { className: "absolute top-0 right-0 p-4", children: /* @__PURE__ */ jsxs8("span", { className: cn(
-          "flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold tracking-wider uppercase border",
-          status.bg,
-          status.color,
-          status.border
-        ), children: [
-          /* @__PURE__ */ jsx9("span", { className: cn("w-1.5 h-1.5 rounded-full", status.dotClass) }),
-          status.label
-        ] }) }),
-        /* @__PURE__ */ jsx9("div", { className: "mb-5 pr-24", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mb-1", children: [
-          sandbox.imageIcon && /* @__PURE__ */ jsx9("div", { className: "w-9 h-9 rounded-lg flex items-center justify-center bg-[var(--depth-3)] border border-[var(--border-subtle)] shrink-0", children: sandbox.imageIcon }),
-          /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx9("h3", { className: "text-base font-bold text-[var(--text-primary)] group-hover:text-[var(--brand-cool)] transition-colors truncate leading-tight", children: sandbox.name }),
-            sandbox.nodeId && /* @__PURE__ */ jsx9("p", { className: "text-[var(--text-muted)] font-mono text-[10px] truncate mt-0.5", children: sandbox.nodeId })
+import {
+  MoreVertical,
+  PowerOff,
+  Power,
+  Copy,
+  Clock,
+  Activity,
+  BarChart2,
+  Trash2,
+  Terminal,
+  Code2,
+  Network,
+  Play,
+  Plus as Plus2
+} from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function SandboxCard({
+  sandbox,
+  onOpenIDE,
+  onOpenTerminal,
+  onWake,
+  onRestore,
+  onDelete,
+  onStop,
+  onResume,
+  onFork,
+  onKeepAlive,
+  onUsage,
+  onHealth,
+  className
+}) {
+  const isRunning = sandbox.status === "running";
+  const isTransitioning = sandbox.status === "provisioning" || sandbox.status === "creating";
+  const isStopped = !isRunning && !isTransitioning;
+  return /* @__PURE__ */ jsxs8("div", { className: cn(
+    "group relative glass-panel flex flex-col justify-between overflow-hidden rounded-3xl p-6 transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-[var(--md3-primary)]/10",
+    isRunning ? "border-[var(--md3-primary)]/30 glow-primary" : "border-border",
+    className
+  ), children: [
+    isRunning && /* @__PURE__ */ jsx9("div", { className: "absolute -top-20 -right-20 h-40 w-40 rounded-full bg-[var(--md3-primary)]/20 blur-[60px] pointer-events-none" }),
+    /* @__PURE__ */ jsxs8("div", { className: "relative z-10 flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsxs8("h3", { className: "flex items-center gap-2 font-headline text-xl font-bold tracking-tight text-foreground", children: [
+          sandbox.name,
+          isRunning && /* @__PURE__ */ jsxs8("span", { className: "relative flex h-2.5 w-2.5", children: [
+            /* @__PURE__ */ jsx9("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" }),
+            /* @__PURE__ */ jsx9("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" })
           ] })
-        ] }) }),
-        isProvisioning ? /* @__PURE__ */ jsxs8("div", { className: "mb-5 mt-2", children: [
-          /* @__PURE__ */ jsxs8("p", { className: "text-[10px] font-bold font-mono text-[var(--brand-cool)] mb-2 uppercase tracking-widest flex items-center gap-2 animate-pulse", children: [
-            /* @__PURE__ */ jsx9(RefreshCw, { className: "h-3 w-3 animate-spin" }),
-            sandbox.provisioningMessage ?? "Initializing..."
-          ] }),
-          /* @__PURE__ */ jsx9("div", { className: "h-1.5 w-full bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx9(
-            "div",
-            {
-              className: "h-full bg-[var(--brand-cool)] transition-all duration-500",
-              style: { width: `${sandbox.provisioningPercent ?? 50}%` }
-            }
-          ) })
-        ] }) : !isArchived ? /* @__PURE__ */ jsxs8("div", { className: cn("space-y-4 mb-5", !isActive && "opacity-35"), children: [
-          /* @__PURE__ */ jsx9(ResourceMeter, { label: "CPU", icon: /* @__PURE__ */ jsx9(Cpu, { className: "h-3 w-3" }), value: sandbox.cpuPercent ?? 0 }),
-          /* @__PURE__ */ jsx9(
-            ResourceMeter,
-            {
-              label: "RAM",
-              icon: /* @__PURE__ */ jsx9(Database, { className: "h-3 w-3" }),
-              value: sandbox.ramUsed ?? 0,
-              max: sandbox.ramTotal ?? 1,
-              unit: "GB"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx9("div", { className: "mb-4", children: sandbox.archivedAt && /* @__PURE__ */ jsx9("p", { className: "text-[var(--text-muted)] font-mono text-[10px]", children: sandbox.archivedAt }) }),
-        isActive && /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-2 gap-2", children: [
-          /* @__PURE__ */ jsxs8(
-            "button",
-            {
-              type: "button",
-              onClick: () => onOpenIDE?.(sandbox.id),
-              className: "flex items-center justify-center gap-2 py-2 bg-[var(--accent-surface-soft)] hover:bg-[var(--accent-surface-strong)] text-[var(--accent-text)] rounded-lg transition-all text-xs font-semibold border border-[var(--border-accent)]",
-              children: [
-                /* @__PURE__ */ jsx9(ExternalLink, { className: "h-3.5 w-3.5" }),
-                "Open IDE"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs8(
-            "button",
-            {
-              type: "button",
-              onClick: () => onOpenTerminal?.(sandbox.id),
-              className: "flex items-center justify-center gap-2 py-2 bg-[var(--depth-3)] hover:bg-[var(--depth-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg transition-all text-xs font-semibold border border-[var(--border-subtle)]",
-              children: [
-                /* @__PURE__ */ jsx9(Terminal, { className: "h-3.5 w-3.5" }),
-                "Terminal"
-              ]
-            }
-          )
         ] }),
-        isHibernating && /* @__PURE__ */ jsxs8(
-          "button",
-          {
-            type: "button",
-            onClick: () => onWake?.(sandbox.id),
-            className: "w-full flex items-center justify-center gap-2 py-2.5 bg-[var(--accent-surface-soft)] text-[var(--brand-cool)] hover:bg-[var(--accent-surface-strong)] rounded-lg transition-all text-xs font-bold border border-[var(--border-accent)]",
-            children: [
-              /* @__PURE__ */ jsx9(Power, { className: "h-3.5 w-3.5" }),
-              "Wake Sandbox"
-            ]
-          }
-        ),
-        isProvisioning && /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx9("p", { className: "font-mono text-[10px] tracking-wider text-[var(--md3-on-surface-variant)] mt-1 uppercase font-bold", children: sandbox.nodeId || "Unknown Node" })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-1 z-50", children: /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx9(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
-            disabled: true,
-            className: "w-full flex items-center justify-center gap-2 py-2.5 bg-[var(--depth-3)] text-[var(--text-muted)] cursor-not-allowed rounded-lg text-xs font-semibold border border-[var(--border-subtle)]",
-            children: "Please Wait..."
+            className: "rounded-full flex items-center justify-center p-2 text-[var(--md3-on-surface-variant)] transition-colors hover:bg-muted hover:text-foreground shrink-0 outline-none",
+            "aria-label": "Sandbox options",
+            children: /* @__PURE__ */ jsx9(MoreVertical, { className: "h-5 w-5" })
           }
-        ),
-        isArchived && /* @__PURE__ */ jsx9(
-          "button",
+        ) }),
+        /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", className: "glass-panel-heavy border-[var(--md3-outline-variant)] min-w-[180px]", children: [
+          isRunning && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+            onStop && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onStop(sandbox.id), children: [
+              /* @__PURE__ */ jsx9(PowerOff, { className: "mr-2 h-4 w-4" }),
+              " Stop Sandbox"
+            ] }),
+            onKeepAlive && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onKeepAlive(sandbox.id), children: [
+              /* @__PURE__ */ jsx9(Clock, { className: "mr-2 h-4 w-4" }),
+              " Keep Alive"
+            ] }),
+            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" }),
+            onUsage && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onUsage(sandbox.id), children: [
+              /* @__PURE__ */ jsx9(BarChart2, { className: "mr-2 h-4 w-4" }),
+              " View Usage"
+            ] }),
+            onHealth && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onHealth(sandbox.id), children: [
+              /* @__PURE__ */ jsx9(Activity, { className: "mr-2 h-4 w-4" }),
+              " Health Check"
+            ] }),
+            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" }),
+            onFork && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onFork(sandbox.id), children: [
+              /* @__PURE__ */ jsx9(Copy, { className: "mr-2 h-4 w-4" }),
+              " Fork Sandbox"
+            ] }),
+            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" })
+          ] }),
+          isStopped && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+            onResume && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onResume(sandbox.id), children: [
+              /* @__PURE__ */ jsx9(Power, { className: "mr-2 h-4 w-4" }),
+              " Resume Sandbox"
+            ] }),
+            onFork && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onFork(sandbox.id), children: [
+              /* @__PURE__ */ jsx9(Copy, { className: "mr-2 h-4 w-4" }),
+              " Fork Sandbox"
+            ] }),
+            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" })
+          ] }),
+          onDelete && /* @__PURE__ */ jsxs8(DropdownMenuItem, { className: "text-red-400 focus:bg-red-500/10 focus:text-red-300", onClick: () => onDelete(sandbox.id), children: [
+            /* @__PURE__ */ jsx9(Trash2, { className: "mr-2 h-4 w-4" }),
+            " Delete Sandbox"
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "relative z-10 my-8", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 bg-muted/50 border border-border rounded-2xl p-4", children: [
+        /* @__PURE__ */ jsx9("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-xl", isRunning ? "bg-[var(--md3-primary)]/20" : "bg-white/5"), children: sandbox.imageIcon ? sandbox.imageIcon : sandbox.image?.includes("node") ? /* @__PURE__ */ jsx9(Code2, { className: cn("h-6 w-6", isRunning ? "text-[var(--md3-primary)]" : "text-[var(--md3-on-surface-variant)]") }) : /* @__PURE__ */ jsx9(Terminal, { className: cn("h-6 w-6", isRunning ? "text-[var(--md3-primary)]" : "text-[var(--md3-on-surface-variant)]") }) }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-[var(--md3-on-surface-variant)] uppercase tracking-widest font-bold", children: "Environment" }),
+          /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-foreground font-mono mt-0.5", children: sandbox.image || "Universal" })
+        ] })
+      ] }),
+      isTransitioning && /* @__PURE__ */ jsxs8("div", { className: "mt-4 animate-in", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex justify-between text-xs text-[var(--md3-primary)] font-medium mb-1", children: [
+          /* @__PURE__ */ jsx9("span", { children: sandbox.provisioningMessage || "Starting..." }),
+          /* @__PURE__ */ jsxs8("span", { children: [
+            sandbox.provisioningPercent || 0,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-white/10", children: /* @__PURE__ */ jsx9(
+          "div",
           {
-            type: "button",
-            onClick: () => onRestore?.(sandbox.id),
-            className: "w-full py-2 bg-[var(--depth-3)] hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all text-xs font-semibold border border-[var(--border-subtle)]",
-            children: "Restore Sandbox"
+            className: "h-full bg-gradient-to-r from-[var(--md3-primary)] to-[#ada3ff] transition-all duration-500 rounded-full",
+            style: { width: `${sandbox.provisioningPercent || 5}%` }
           }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "relative z-10 flex items-center gap-3 border-t border-[var(--md3-outline-variant)] pt-4", children: isRunning ? /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        onClick: () => onOpenIDE?.(sandbox.id),
+        className: "flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--md3-primary)]/20 px-4 py-2.5 font-bold text-sm text-[var(--md3-primary)] shadow-[0_0_15px_rgba(173,163,255,0.1)] transition-all hover:bg-[var(--md3-primary)] hover:text-primary-foreground hover:shadow-[var(--shadow-glow)] active:scale-95 border border-[var(--md3-primary)]/30",
+        children: [
+          /* @__PURE__ */ jsx9(Network, { className: "h-4 w-4" }),
+          "Connect Session"
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        onClick: () => onWake?.(sandbox.id),
+        disabled: isTransitioning,
+        className: cn(
+          "flex flex-1 items-center justify-center gap-2 rounded-xl px-4 py-2.5 font-bold text-sm transition-all border",
+          isTransitioning ? "bg-muted/30 text-[var(--md3-on-surface-variant)] cursor-not-allowed border-border" : "bg-[var(--md3-primary)]/10 text-[var(--md3-primary)] hover:bg-[var(--md3-primary)] hover:text-foreground shadow-[0_0_15px_rgba(173,163,255,0.1)] hover:shadow-[0_0_20px_rgba(173,163,255,0.4)] active:scale-95 border-[var(--md3-primary)]/30"
         ),
-        onDelete && !isProvisioning && /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            onClick: () => onDelete(sandbox.id),
-            className: "absolute bottom-4 right-4 p-1.5 rounded-md text-[var(--text-muted)] hover:text-[var(--surface-danger-text)] hover:bg-[var(--surface-danger-bg)] transition-all opacity-0 group-hover:opacity-100",
-            title: "Delete sandbox",
-            children: /* @__PURE__ */ jsx9(Trash2, { className: "h-3.5 w-3.5" })
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          /* @__PURE__ */ jsx9(Play, { className: "h-4 w-4" }),
+          isTransitioning ? "Starting..." : "Wake Sandbox"
+        ]
+      }
+    ) })
+  ] });
 }
 function NewSandboxCard({ onClick, className }) {
   return /* @__PURE__ */ jsxs8(
@@ -868,39 +871,41 @@ function NewSandboxCard({ onClick, className }) {
       type: "button",
       onClick,
       className: cn(
-        "border-2 border-dashed border-[var(--border-subtle)] rounded-xl p-5 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] transition-all duration-300 w-full min-h-[160px]",
+        "relative border-2 border-dashed border-border rounded-xl p-5 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] transition-all duration-300 w-full min-h-[160px]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9("div", { className: "w-12 h-12 rounded-full bg-[var(--depth-3)] border border-[var(--border-subtle)] flex items-center justify-center mb-4 group-hover:bg-[var(--accent-surface-strong)] group-hover:border-[var(--border-accent)] group-hover:text-[var(--accent-text)] text-[var(--text-muted)] transition-all group-active:scale-90", children: /* @__PURE__ */ jsx9(Plus2, { className: "h-6 w-6" }) }),
-        /* @__PURE__ */ jsx9("h4", { className: "font-bold text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] mb-1 text-sm transition-colors", children: "New Environment" }),
-        /* @__PURE__ */ jsx9("p", { className: "text-xs text-[var(--text-muted)]", children: "Instantiate a fresh compute node" })
+        /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(155,140,255,0.1)_0,transparent_100%)] opacity-0 transition-opacity duration-300 group-hover:opacity-100" }),
+        /* @__PURE__ */ jsx9("div", { className: "flex h-16 w-16 items-center justify-center rounded-3xl bg-[var(--md3-primary)]/20 text-[var(--md3-primary)] shadow-[0_0_20px_rgba(155,140,255,0.2)] transition-transform duration-300 group-hover:scale-110 group-hover:shadow-[0_0_30px_rgba(155,140,255,0.4)]", children: /* @__PURE__ */ jsx9(Plus2, { className: "h-8 w-8" }) }),
+        /* @__PURE__ */ jsx9("span", { className: "mt-6 font-headline text-xl font-bold text-foreground tracking-tight", children: "New Sandbox" }),
+        /* @__PURE__ */ jsx9("span", { className: "mt-2 text-sm text-[var(--md3-primary)] font-medium", children: "Deploy a new isolated environment" })
       ]
     }
   );
 }
 
 // src/dashboard/sandbox-table.tsx
-import { Terminal as Terminal2, Code2, Key, Trash2 as Trash22, RefreshCw as RefreshCw2, ChevronLeft, ChevronRight } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Terminal as Terminal2, Code2 as Code22, Key, Trash2 as Trash22, RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var statusColors = {
   running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
-  hibernating: { dot: "bg-[var(--text-muted)]", text: "text-[var(--text-muted)]", bar: "bg-[var(--text-muted)]" },
-  provisioning: { dot: "bg-[var(--brand-cool)] animate-pulse", text: "text-[var(--brand-cool)]", bar: "bg-[var(--brand-cool)]" },
-  stopped: { dot: "bg-[var(--text-muted)]", text: "text-[var(--text-secondary)]", bar: "bg-[var(--text-muted)]" },
+  hibernating: { dot: "bg-muted-foreground", text: "text-muted-foreground", bar: "bg-muted-foreground" },
+  provisioning: { dot: "bg-primary animate-pulse", text: "text-primary", bar: "bg-primary" },
+  creating: { dot: "bg-primary animate-pulse", text: "text-primary", bar: "bg-primary" },
+  stopped: { dot: "bg-muted-foreground", text: "text-foreground", bar: "bg-muted-foreground" },
   failed: { dot: "bg-[var(--code-error)]", text: "text-[var(--code-error)]", bar: "bg-[var(--code-error)]" },
-  archived: { dot: "bg-[var(--border-default)]", text: "text-[var(--text-muted)]", bar: "bg-[var(--border-default)]" }
+  archived: { dot: "bg-border", text: "text-muted-foreground", bar: "bg-border" }
 };
 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-[var(--text-muted)]", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground", children: [
       /* @__PURE__ */ jsx10("span", { className: "font-bold", children: label }),
-      /* @__PURE__ */ jsxs9("span", { className: "text-[var(--brand-cool)]", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "text-primary", children: [
         percent,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "h-1.5 w-full bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "h-full bg-[var(--brand-cool)] rounded-full", style: { width: `${percent}%` } }) })
+    /* @__PURE__ */ jsx10("div", { className: "h-1.5 w-full bg-background rounded-full overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "h-full bg-primary rounded-full", style: { width: `${percent}%` } }) })
   ] });
 }
 function SandboxTable({
@@ -920,56 +925,56 @@ function SandboxTable({
   const totalCount = total ?? sandboxes.length;
   const totalPages = Math.ceil(totalCount / pageSize);
   return /* @__PURE__ */ jsxs9("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx10("div", { className: "w-full bg-[var(--depth-2)] rounded-2xl overflow-hidden border border-[var(--border-subtle)]", 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-[var(--depth-1)] border-b border-[var(--border-subtle)]", children: [
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Status" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Sandbox Name" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Environment" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Resources" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider text-right", children: "Actions" })
+    /* @__PURE__ */ jsx10("div", { className: "w-full bg-card rounded-2xl overflow-hidden border border-border", 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-background border-b border-border", children: [
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Sandbox Name" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Environment" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Resources" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider text-right", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ jsx10("tbody", { className: "divide-y divide-[var(--border-subtle)]", children: sandboxes.map((sb) => {
+      /* @__PURE__ */ jsx10("tbody", { className: "divide-y divide-border", children: sandboxes.map((sb) => {
         const sc = statusColors[sb.status] ?? statusColors.stopped;
         const isActive = sb.status === "running";
         const isHibernating = sb.status === "hibernating";
         const isProvisioning = sb.status === "provisioning";
-        return /* @__PURE__ */ jsxs9("tr", { className: "hover:bg-[var(--depth-3)] transition-colors group relative", children: [
+        return /* @__PURE__ */ jsxs9("tr", { className: "hover:bg-muted/50 transition-colors group relative", children: [
           /* @__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__ */ 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-[var(--text-primary)] group-hover:text-[var(--brand-cool)] transition-colors", children: sb.name }),
-            sb.nodeId && /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-mono text-[var(--text-muted)]", children: sb.nodeId })
+            /* @__PURE__ */ jsx10("span", { className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors", children: sb.name }),
+            sb.nodeId && /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-mono text-muted-foreground", children: sb.nodeId })
           ] }) }),
           /* @__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-[var(--depth-3)] flex items-center justify-center", children: sb.imageIcon }),
-            sb.image && /* @__PURE__ */ jsx10("span", { className: "text-xs font-bold text-[var(--text-primary)]", children: sb.image })
+            sb.imageIcon && /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center", children: sb.imageIcon }),
+            sb.image && /* @__PURE__ */ jsx10("span", { className: "text-xs font-bold text-foreground", children: sb.image })
           ] }) }),
           /* @__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-[var(--brand-cool)] italic text-[10px] font-bold", children: [
-            /* @__PURE__ */ jsx10(RefreshCw2, { className: "h-3.5 w-3.5 animate-spin" }),
+          ] }) : isProvisioning ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-primary italic text-[10px] font-bold", children: [
+            /* @__PURE__ */ jsx10(RefreshCw, { className: "h-3.5 w-3.5 animate-spin" }),
             sb.provisioningMessage ?? "Allocating nodes..."
           ] }) : isHibernating ? /* @__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__ */ 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-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx10(Code2, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx10(Terminal2, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx10(Key, { className: "h-4 w-4" }) })
+            isActive && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx10(Code22, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx10(Terminal2, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx10(Key, { className: "h-4 w-4" }) })
             ] }),
-            isHibernating && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-[var(--border-accent)] text-[var(--brand-cool)] text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", children: "Wake Up" }),
-            onMore && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onMore(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", children: /* @__PURE__ */ jsx10(Code2, { className: "h-4 w-4" }) }),
-            onDelete && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onDelete(sb.id), className: "p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-[var(--text-muted)] hover:text-[var(--surface-danger-text)] transition-all active:scale-90", title: "Delete", children: /* @__PURE__ */ jsx10(Trash22, { className: "h-4 w-4" }) })
+            isHibernating && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-border text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", children: "Wake Up" }),
+            onMore && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onMore(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", children: /* @__PURE__ */ jsx10(Code22, { className: "h-4 w-4" }) }),
+            onDelete && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onDelete(sb.id), className: "p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90", title: "Delete", children: /* @__PURE__ */ jsx10(Trash22, { className: "h-4 w-4" }) })
           ] }) })
         ] }, sb.id);
       }) })
     ] }) }) }),
-    totalPages > 1 && /* @__PURE__ */ jsxs9("div", { className: "mt-6 flex flex-col md:flex-row justify-between items-center text-[var(--text-muted)] text-xs font-medium gap-4", children: [
+    totalPages > 1 && /* @__PURE__ */ jsxs9("div", { className: "mt-6 flex flex-col md:flex-row justify-between items-center text-muted-foreground text-xs font-medium gap-4", children: [
       /* @__PURE__ */ jsxs9("p", { children: [
         "Showing ",
         sandboxes.length,
@@ -978,7 +983,7 @@ function SandboxTable({
         " active sandboxes"
       ] }),
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-[var(--border-subtle)] hover:bg-[var(--depth-3)] transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-border hover:bg-muted/50 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "h-4 w-4" }) }),
         Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx10(
           "button",
           {
@@ -986,13 +991,13 @@ function SandboxTable({
             onClick: () => onPageChange?.(p),
             className: cn(
               "px-3 py-1 rounded-lg transition-colors",
-              p === page ? "bg-[var(--accent-surface-soft)] text-[var(--brand-cool)] border border-[var(--border-accent)]" : "hover:bg-[var(--depth-3)]"
+              p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-border" : "hover:bg-muted/50"
             ),
             children: p
           },
           p
         )),
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-[var(--border-subtle)] hover:bg-[var(--depth-3)] transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(ChevronRight, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-border hover:bg-muted/50 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(ChevronRight, { className: "h-4 w-4" }) })
       ] })
     ] })
   ] });
@@ -1012,26 +1017,26 @@ function BackendSelector({
 }) {
   const current = backends.find((b) => b.type === selected);
   return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ jsx11("label", { className: "block text-xs font-medium text-[var(--text-muted)] uppercase tracking-[0.06em]", children: label }),
+    label && /* @__PURE__ */ jsx11("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
     /* @__PURE__ */ jsxs10(Select.Root, { value: selected, onValueChange: onChange, children: [
       /* @__PURE__ */ jsxs10(
         Select.Trigger,
         {
           className: cn(
             "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
-            "border border-[var(--border-default)] bg-[var(--bg-card)]",
+            "border border-border bg-card",
             "px-3 py-2.5 text-sm text-left",
             "transition-colors duration-[var(--transition-fast)]",
-            "hover:border-[var(--border-hover)] hover:bg-[var(--bg-hover)]/30",
-            "focus:outline-none focus:border-[var(--border-accent)]",
-            "data-[state=open]:border-[var(--border-accent)] data-[state=open]:bg-[var(--bg-hover)]/30"
+            "hover:border-primary/20 hover:bg-accent/30",
+            "focus:outline-none focus:border-primary/30",
+            "data-[state=open]:border-primary/30 data-[state=open]:bg-accent/30"
           ),
           children: [
             /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: current ? /* @__PURE__ */ jsxs10("div", { children: [
-              /* @__PURE__ */ jsx11("span", { className: "font-medium text-[var(--text-primary)]", children: current.label }),
-              current.description && /* @__PURE__ */ jsx11("span", { className: "ml-2 text-xs text-[var(--text-muted)]", children: current.description })
-            ] }) : /* @__PURE__ */ jsx11("span", { className: "text-[var(--text-muted)]", children: placeholder }) }),
-            /* @__PURE__ */ jsx11(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(ChevronDown, { className: "h-4 w-4 shrink-0 text-[var(--text-muted)] transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" }) })
+              /* @__PURE__ */ jsx11("span", { className: "font-medium text-foreground", children: current.label }),
+              current.description && /* @__PURE__ */ jsx11("span", { className: "ml-2 text-xs text-muted-foreground", children: current.description })
+            ] }) : /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground", children: placeholder }) }),
+            /* @__PURE__ */ jsx11(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" }) })
           ]
         }
       ),
@@ -1042,8 +1047,8 @@ function BackendSelector({
           sideOffset: 4,
           className: cn(
             "z-50 w-[var(--radix-select-trigger-width)] overflow-hidden",
-            "rounded-[var(--radius-md)] border border-[var(--border-default)]",
-            "bg-[var(--bg-card)] shadow-[var(--shadow-dropdown)]",
+            "rounded-[var(--radius-md)] border border-border",
+            "bg-card shadow-[var(--shadow-dropdown)]",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1057,12 +1062,12 @@ function BackendSelector({
                 "relative flex cursor-pointer select-none flex-col rounded-[var(--radius-sm)]",
                 "px-3 py-2.5 text-sm outline-none",
                 "transition-colors duration-[var(--transition-fast)]",
-                "hover:bg-[var(--bg-hover)]/50 focus:bg-[var(--bg-hover)]/50",
+                "hover:bg-accent/50 focus:bg-accent/50",
                 "data-[state=checked]:bg-[var(--accent-surface-soft)] data-[state=checked]:text-[var(--brand-primary)]"
               ),
               children: [
                 /* @__PURE__ */ jsx11(Select.ItemText, { children: /* @__PURE__ */ jsx11("span", { className: "font-medium", children: backend.label }) }),
-                backend.description && /* @__PURE__ */ jsx11("span", { className: "mt-0.5 text-xs text-[var(--text-muted)] data-[state=checked]:text-[var(--accent-text)]", children: backend.description })
+                backend.description && /* @__PURE__ */ jsx11("span", { className: "mt-0.5 text-xs text-muted-foreground data-[state=checked]:text-[var(--accent-text)]", children: backend.description })
               ]
             },
             backend.type
@@ -1075,7 +1080,7 @@ function BackendSelector({
 
 // src/dashboard/profile-selector.tsx
 import { Check as Check2, ChevronDown as ChevronDown2, Plus as Plus3, Settings } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -1109,7 +1114,7 @@ function ProfileSelector({
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
           /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsx12(DropdownMenuLabel, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs11(
@@ -1134,7 +1139,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
           /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsx12(DropdownMenuLabel, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs11(
@@ -1171,7 +1176,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment7, { children: [
           /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
           onCreateClick && /* @__PURE__ */ jsxs11(
             DropdownMenuItem,
@@ -1269,17 +1274,17 @@ function ProfileComparison({
 import {
   Check as Check3,
   CheckCircle2,
-  Clock,
-  ExternalLink as ExternalLink2,
+  Clock as Clock2,
+  ExternalLink,
   Loader2,
   Timer,
   X,
   XCircle
 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-var statusConfig2 = {
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var statusConfig = {
   pending: {
-    icon: Clock,
+    icon: Clock2,
     color: "text-[var(--surface-warning-text)]",
     bg: "bg-[var(--surface-warning-bg)]",
     border: "border-[var(--surface-warning-border)]",
@@ -1288,9 +1293,9 @@ var statusConfig2 = {
   },
   running: {
     icon: Loader2,
-    color: "text-[var(--brand-cool)]",
+    color: "text-primary",
     bg: "bg-[var(--accent-surface-soft)]",
-    border: "border-[var(--border-accent)]",
+    border: "border-border",
     label: "Running",
     animate: true
   },
@@ -1361,13 +1366,13 @@ function VariantList({
   className
 }) {
   return /* @__PURE__ */ jsx13("div", { className: `space-y-2 ${className || ""}`, children: variants.map((variant) => {
-    const status = statusConfig2[variant.status];
+    const status = statusConfig[variant.status];
     const StatusIcon = status.icon;
     const isSelected = variant.id === selectedId;
     return /* @__PURE__ */ jsxs12(
       "div",
       {
-        className: `cursor-pointer rounded-lg border px-3 py-2.5 transition-colors ${isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)] hover:border-[var(--border-default)] hover:bg-[var(--depth-3)]"}`,
+        className: `cursor-pointer rounded-lg border px-3 py-2.5 transition-colors ${isSelected ? "border-primary/30 bg-[var(--accent-surface-soft)]" : "border-border bg-card hover:border-primary/20 hover:bg-muted/50"}`,
         onClick: () => onSelect?.(variant.id),
         children: [
           /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
@@ -1380,13 +1385,13 @@ function VariantList({
               ),
               status.label
             ] }),
-            /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: variant.label }),
-            variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: [
+            /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-medium text-foreground", children: variant.label }),
+            variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
               "(",
               variant.sublabel,
               ")"
             ] }),
-            variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex shrink-0 items-center gap-1 text-xs text-[var(--text-muted)]", children: [
+            variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground", children: [
               /* @__PURE__ */ jsx13(Timer, { className: "h-3 w-3" }),
               (variant.durationMs / 1e3).toFixed(1),
               "s"
@@ -1399,7 +1404,7 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12(Fragment6, { children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12(Fragment8, { children: [
                 /* @__PURE__ */ jsxs12(
                   Button,
                   {
@@ -1440,18 +1445,18 @@ function VariantList({
                 {
                   variant: "ghost",
                   size: "sm",
-                  className: "h-7 w-7 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]",
+                  className: "h-7 w-7 p-0 text-muted-foreground hover:text-foreground",
                   onClick: (e) => {
                     e.stopPropagation();
                     window.open(variant.detailsUrl, "_blank");
                   },
-                  children: /* @__PURE__ */ jsx13(ExternalLink2, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ jsx13(ExternalLink, { className: "h-3.5 w-3.5" })
                 }
               )
             ] })
           ] }),
           variant.error && /* @__PURE__ */ jsx13("p", { className: "mt-1.5 text-xs text-[var(--surface-danger-text)]", children: variant.error }),
-          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-1.5 line-clamp-2 text-xs text-[var(--text-muted)]", children: variant.summary })
+          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-1.5 line-clamp-2 text-xs text-muted-foreground", children: variant.summary })
         ]
       },
       variant.id