@tangle-network/sandbox-ui 0.44.0 → 0.46.0

package/dist/{chunk-KCWIC3SJ.js → chunk-PZ62T5PM.js}

@@ -147,8 +147,8 @@ function RailTooltip({ label, children, disabled, className }) {
         "aria-hidden": "true",
         className: cn(
           "pointer-events-none absolute left-full top-1/2 z-50 ml-2 -translate-y-1/2 translate-x-1 whitespace-nowrap",
-          "rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground",
-          "opacity-0 shadow-[var(--shadow-dropdown)] transition-[opacity,transform] duration-150 ease-out",
+          "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-highest px-2 py-1 text-xs font-medium text-popover-foreground",
+          "opacity-0 shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14] transition-[opacity,transform] duration-150 ease-out",
           "group-hover/tip:translate-x-0 group-hover/tip:opacity-100 group-hover/tip:delay-300",
           "group-focus-within/tip:translate-x-0 group-focus-within/tip:opacity-100"
         ),
@@ -267,7 +267,7 @@ function Sidebar({ children, className, style }) {
     {
       "data-sidebar": "true",
       className: cn(
-        "fixed inset-y-0 left-0 z-40 flex bg-card border-r border-border transition-[transform,width] duration-200 ease-in-out",
+        "fixed inset-y-0 left-0 z-40 flex bg-surface-container-low border-r border-[var(--md3-outline-variant)] transition-[transform,width] duration-200 ease-in-out",
         hidden && "-translate-x-full",
         className
       ),
@@ -292,7 +292,7 @@ function SidebarRail({ children, className, wide = false }) {
   );
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx3("div", { className: cn("flex h-14 shrink-0 items-center justify-center border-b border-border", className), children });
+  return /* @__PURE__ */ jsx3("div", { className: cn("flex h-14 shrink-0 items-center justify-center border-b border-[var(--md3-outline-variant)]", className), children });
 }
 function SidebarRailNav({ children, className }) {
   return /* @__PURE__ */ jsx3("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1 min-h-0 overflow-y-auto", className), children });
@@ -402,7 +402,7 @@ function RailFlyout({
           if (el.closest("a,button")) setOpen(false);
         },
         className: cn(
-          "absolute top-0 z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1.5 shadow-[var(--shadow-dropdown)]",
+          "absolute top-0 z-50 min-w-[12rem] rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1.5 shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
           showLabel ? "left-full ml-2" : "left-full ml-2"
         ),
         children: [
@@ -440,7 +440,7 @@ function SidebarPanel({ children, className }) {
     "div",
     {
       className: cn(
-        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-border bg-card",
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-[var(--md3-outline-variant)] bg-surface-container-low",
         panelOpen ? "w-[268px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
@@ -449,7 +449,7 @@ function SidebarPanel({ children, className }) {
   );
 }
 function SidebarPanelHeader({ children, title, className }) {
-  return /* @__PURE__ */ jsx3("div", { className: cn("flex h-14 items-center px-4 border-b border-border shrink-0", className), children: children ?? /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold text-foreground", children: title }) });
+  return /* @__PURE__ */ jsx3("div", { className: cn("flex h-14 items-center px-4 border-b border-[var(--md3-outline-variant)] shrink-0", className), children: children ?? /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold text-foreground", children: title }) });
 }
 function SidebarPanelContent({ children, className }) {
   return /* @__PURE__ */ jsx3("div", { className: cn("flex-1 overflow-y-auto px-2 py-2", className), children });
@@ -554,7 +554,7 @@ function CreditBalance({
     "div",
     {
       className: cn(
-        "bg-card p-5 rounded-xl flex flex-col justify-between border border-border",
+        "bg-surface-container p-5 rounded-xl flex flex-col justify-between border border-[var(--md3-outline-variant)]",
         className
       ),
       children: [
@@ -567,7 +567,7 @@ function CreditBalance({
           /* @__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-card border border-border p-1 rounded-lg flex items-center", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "bg-surface-container-low border border-[var(--md3-outline-variant)] p-1 rounded-lg flex items-center", children: [
             /* @__PURE__ */ jsx4(
               "input",
               {
@@ -577,7 +577,7 @@ function CreditBalance({
                   const raw = e.target.value.replace(/[^0-9.]/g, "");
                   setTopUpValue(raw.match(/^(\d*\.?\d{0,2})/)?.[1] ?? "");
                 },
-                className: "bg-transparent border-none text-foreground font-mono text-lg w-full focus:ring-0 px-4 outline-none"
+                className: "bg-transparent border-none text-foreground font-mono text-lg min-w-0 flex-1 focus:ring-0 px-4 outline-none"
               }
             ),
             /* @__PURE__ */ jsx4(
@@ -589,7 +589,7 @@ function CreditBalance({
                   if (!Number.isFinite(parsed) || parsed <= 0) return;
                   onTopUp(parsed);
                 },
-                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)]",
+                className: "shrink-0 whitespace-nowrap bg-[var(--accent-surface-soft)] border border-[var(--md3-outline-variant)] text-[var(--accent-text)] px-5 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"
               }
             )
@@ -603,10 +603,10 @@ function CreditBalance({
                 setTopUpValue(qa.toFixed(2));
                 onTopUp(rounded);
               },
-              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",
+              className: "flex-1 py-2 text-center text-xs font-mono tabular-nums text-muted-foreground border border-[var(--md3-outline-variant)] rounded-md hover:bg-surface-container-high hover:text-foreground transition-colors uppercase",
               children: [
                 "+$",
-                qa
+                qa.toLocaleString("en-US")
               ]
             },
             qa
@@ -653,7 +653,7 @@ function OutOfCreditsModal({
         "div",
         {
           className: cn(
-            "bg-card border border-border rounded-xl p-6 max-w-md w-full shadow-[var(--shadow-dropdown)]",
+            "bg-surface-container-highest border border-[var(--md3-outline-variant)] rounded-xl p-6 max-w-md w-full shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
             className
           ),
           onClick: (e) => e.stopPropagation(),
@@ -679,25 +679,29 @@ function OutOfCreditsModal({
 }
 
 // src/dashboard/cluster-status-bar.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ClusterStatusBar({ items, latency, className }) {
   if (!items?.length) return null;
-  return /* @__PURE__ */ jsx6("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__ */ jsxs5("div", { className: "overflow-hidden rounded-full border border-border bg-card px-6 py-3 flex flex-wrap sm:flex-nowrap items-center justify-between gap-8 shadow-sm", children: [
-    /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-6", children: items.map((item, i) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx6("span", { className: "text-[var(--md3-primary)] [&_svg]:h-[18px] [&_svg]:w-[18px]", children: item.icon }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx6("span", { className: "text-[10px] text-[var(--md3-on-surface-variant)] uppercase tracking-wider font-bold", children: item.label }),
-        /* @__PURE__ */ jsx6("span", { className: cn("text-xs font-bold text-foreground", item.valueClass), children: item.value })
+  return /* @__PURE__ */ jsx6("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__ */ jsxs5("div", { className: "flex items-center gap-4 overflow-x-auto rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-5 py-2.5 shadow-sm", children: [
+    items.map((item, i) => /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
+      i > 0 && /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "h-5 w-px shrink-0 bg-border" }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2", children: [
+        item.icon ? /* @__PURE__ */ jsx6("span", { className: "flex shrink-0 items-center text-[var(--md3-primary)] [&_svg]:h-[18px] [&_svg]:w-[18px]", children: item.icon }) : null,
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-col leading-tight", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-[10px] font-bold uppercase tracking-wider text-[var(--md3-on-surface-variant)]", children: item.label }),
+          /* @__PURE__ */ jsx6("span", { className: cn("text-sm font-bold tabular-nums text-foreground", item.valueClass), children: item.value })
+        ] })
       ] })
-    ] }, i)) }),
-    latency && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx6("div", { className: "h-6 w-px bg-border" }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "relative flex h-2.5 w-2.5 items-center justify-center", children: [
+    ] }, i)),
+    latency && /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "h-5 w-px shrink-0 bg-border" }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxs5("span", { className: "relative flex h-2.5 w-2.5 items-center justify-center", children: [
           /* @__PURE__ */ jsx6("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" }),
           /* @__PURE__ */ jsx6("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" })
         ] }),
-        /* @__PURE__ */ jsx6("span", { className: "text-xs font-mono text-green-400 font-bold", children: latency })
+        /* @__PURE__ */ jsx6("span", { className: "font-mono text-xs font-bold text-green-400", children: latency })
       ] })
     ] })
   ] }) });
@@ -715,18 +719,18 @@ function ResourceMeter({ label, value, max = 100, unit, valueLabel, icon, classN
   const barColor = getBarColor(percent);
   const readout = valueLabel ?? (unit ? `${value}${unit}/${max}${unit}` : `${Math.round(percent)}%`);
   return /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-3", className), children: [
-    /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1 text-[10px] font-mono text-muted-foreground uppercase tracking-wide", children: [
-      icon,
-      label
+    /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1.5 text-xs font-mono text-muted-foreground uppercase tracking-wide", children: [
+      icon ? /* @__PURE__ */ jsx7("span", { className: "flex shrink-0 items-center [&_svg]:h-3.5 [&_svg]:w-3.5", children: icon }) : null,
+      /* @__PURE__ */ jsx7("span", { children: label })
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "h-1.5 min-w-0 flex-1 bg-card rounded-full overflow-hidden", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx7("div", { className: "h-1.5 min-w-0 flex-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx7(
       "div",
       {
         className: cn("h-full rounded-full transition-all duration-500", barColor),
         style: { width: `${percent}%` }
       }
     ) }),
-    /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-[10px] font-mono tabular-nums text-muted-foreground", children: readout })
+    /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-xs font-mono tabular-nums text-muted-foreground", children: readout })
   ] });
 }
 
@@ -746,7 +750,7 @@ function ResourceSnapshot({
     "div",
     {
       className: cn(
-        "flex flex-col rounded-lg border border-border bg-card p-6",
+        "flex flex-col rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6",
         className
       ),
       children: [
@@ -772,7 +776,7 @@ function ResourceSnapshot({
 }
 
 // src/dashboard/activity-feed.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { Skeleton as Skeleton3 } from "@tangle-network/ui/primitives";
 import { timeAgo } from "@tangle-network/ui/utils";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -785,7 +789,7 @@ function ActivityFeed({
   emptyLabel = "No recent activity",
   className
 }) {
-  const sorted = React4.useMemo(
+  const sorted = React5.useMemo(
     () => [...items].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0)).slice(0, maxItems),
     [items, maxItems]
   );
@@ -793,7 +797,7 @@ function ActivityFeed({
     "div",
     {
       className: cn(
-        "flex flex-col rounded-lg border border-border bg-card p-6",
+        "flex flex-col rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6",
         className
       ),
       children: [
@@ -831,18 +835,36 @@ import {
   Activity,
   BarChart2,
   Trash2,
-  Terminal,
-  Code2,
   Network,
   Play,
   Plus,
-  Users
+  Users,
+  Cpu,
+  MemoryStick,
+  HardDrive,
+  Box
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function canAdminSandbox(sandbox) {
   if (!sandbox.team) return true;
   return sandbox.team.role === "owner" || sandbox.team.role === "admin";
 }
+var STATUS_META = {
+  running: { label: "Running", color: "var(--status-running)" },
+  hibernating: { label: "Hibernating", color: "var(--status-warm)" },
+  provisioning: { label: "Provisioning", color: "var(--status-creating)" },
+  creating: { label: "Creating", color: "var(--status-creating)" },
+  stopped: { label: "Stopped", color: "var(--status-stopped)" },
+  failed: { label: "Failed", color: "var(--status-error)" },
+  archived: { label: "Archived", color: "var(--status-deleted)" }
+};
+function Spec({ icon, value, unit }) {
+  return /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx10("span", { className: "font-mono text-xs tabular-nums text-foreground", children: value }),
+    /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-muted-foreground", children: unit })
+  ] });
+}
 function SandboxCard({
   sandbox,
   onOpenIDE,
@@ -862,29 +884,35 @@ function SandboxCard({
   const isTransitioning = sandbox.status === "provisioning" || sandbox.status === "creating";
   const isStopped = !isRunning && !isTransitioning;
   const isHibernating = sandbox.status === "hibernating";
-  const resolveResumeHandler = (status) => {
+  const resolveResumeHandler = (status2) => {
     if (onResume) return onResume;
-    if (status === "hibernating") return onWake;
+    if (status2 === "hibernating") return onWake;
     return void 0;
   };
   const resumeLabel = isHibernating ? "Wake Sandbox" : "Resume Sandbox";
   const resumeHandler = isStopped ? resolveResumeHandler(sandbox.status) : void 0;
+  const status = STATUS_META[sandbox.status];
+  const isArchived = sandbox.status === "archived";
+  const cpuPercent = sandbox.cpuPercent ?? 0;
+  const ramUsed = sandbox.ramUsed ?? 0;
+  const ramTotal = sandbox.ramTotal ?? 0;
+  const diskUsed = sandbox.diskUsed;
+  const diskTotal = sandbox.diskTotal;
+  const specs = [
+    sandbox.vcpu != null && { key: "vcpu", icon: /* @__PURE__ */ jsx10(Cpu, { className: "h-3.5 w-3.5" }), value: sandbox.vcpu, unit: "vCPU" },
+    ramTotal > 0 && { key: "ram", icon: /* @__PURE__ */ jsx10(MemoryStick, { className: "h-3.5 w-3.5" }), value: ramTotal, unit: "GB RAM" },
+    diskTotal != null && { key: "disk", icon: /* @__PURE__ */ jsx10(HardDrive, { className: "h-3.5 w-3.5" }), value: diskTotal, unit: "GB SSD" }
+  ].filter(Boolean);
   return /* @__PURE__ */ jsxs9("div", { className: cn(
-    "group relative flex flex-col justify-between overflow-hidden rounded-lg border bg-card p-5 transition-colors",
-    isRunning ? "border-[var(--status-running)]/30" : "border-border",
+    "group relative flex flex-col justify-between overflow-hidden rounded-lg border bg-surface-container p-5 transition-colors",
+    isRunning ? "border-[var(--status-running)]/30" : "border-[var(--md3-outline-variant)]",
     "hover:border-foreground/15",
     className
   ), children: [
     /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxs9("div", { children: [
         /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs9("h3", { className: "flex items-center gap-2 text-sm font-bold text-foreground", children: [
-            sandbox.name,
-            isRunning && /* @__PURE__ */ jsxs9("span", { className: "relative flex h-2 w-2", children: [
-              /* @__PURE__ */ jsx10("span", { className: "absolute inline-flex h-full w-full animate-pulse rounded-full bg-[var(--status-running)] opacity-75" }),
-              /* @__PURE__ */ jsx10("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-[var(--status-running)]" })
-            ] })
-          ] }),
+          /* @__PURE__ */ jsx10("h3", { className: "truncate text-sm font-bold text-foreground", children: sandbox.name }),
           sandbox.team && /* @__PURE__ */ jsxs9(
             "span",
             {
@@ -910,13 +938,13 @@ function SandboxCard({
           "button",
           {
             type: "button",
-            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground outline-none",
+            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground outline-none",
             "aria-label": "Sandbox options",
             children: /* @__PURE__ */ jsx10(MoreVertical, { className: "h-4 w-4" })
           }
         ) }),
         /* @__PURE__ */ jsxs9(DropdownMenuContent2, { align: "end", className: "min-w-[180px]", children: [
-          isRunning && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          isRunning && /* @__PURE__ */ jsxs9(Fragment5, { children: [
             onStop && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onStop(sandbox.id), children: [
               /* @__PURE__ */ jsx10(PowerOff, { className: "mr-2 h-4 w-4" }),
               " Stop Sandbox"
@@ -935,7 +963,7 @@ function SandboxCard({
               " Health Check"
             ] }),
             (onUsage || onHealth) && /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {}),
-            onFork && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            onFork && /* @__PURE__ */ jsxs9(Fragment5, { children: [
               /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onFork(sandbox.id), children: [
                 /* @__PURE__ */ jsx10(Copy, { className: "mr-2 h-4 w-4" }),
                 " Fork Sandbox"
@@ -943,7 +971,7 @@ function SandboxCard({
               /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {})
             ] })
           ] }),
-          isStopped && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          isStopped && /* @__PURE__ */ jsxs9(Fragment5, { children: [
             resumeHandler && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => resumeHandler(sandbox.id), children: [
               /* @__PURE__ */ jsx10(Power, { className: "mr-2 h-4 w-4" }),
               " ",
@@ -962,32 +990,71 @@ function SandboxCard({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "my-4", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 rounded-md border border-border bg-muted/30 p-3", children: [
-        /* @__PURE__ */ jsx10("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-md", isRunning ? "bg-[var(--surface-success-bg)]" : "bg-muted"), children: sandbox.imageIcon ? sandbox.imageIcon : sandbox.image?.includes("node") ? /* @__PURE__ */ jsx10(Code2, { className: cn("h-5 w-5", isRunning ? "text-[var(--surface-success-text)]" : "text-muted-foreground") }) : /* @__PURE__ */ jsx10(Terminal, { className: cn("h-5 w-5", isRunning ? "text-[var(--surface-success-text)]" : "text-muted-foreground") }) }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-muted-foreground uppercase tracking-widest font-bold", children: "Environment" }),
-          /* @__PURE__ */ jsx10("span", { className: "text-xs font-medium text-foreground font-mono mt-0.5", children: sandbox.image || "Universal" })
+    /* @__PURE__ */ jsxs9("div", { className: "my-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1.5 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container-high px-2 py-0.5 text-[11px] font-medium text-foreground", children: [
+          /* @__PURE__ */ jsxs9("span", { className: "relative flex h-1.5 w-1.5", children: [
+            isRunning && /* @__PURE__ */ jsx10(
+              "span",
+              {
+                className: "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+                style: { backgroundColor: status.color }
+              }
+            ),
+            /* @__PURE__ */ jsx10("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full", style: { backgroundColor: status.color } })
+          ] }),
+          status.label
+        ] }),
+        isRunning && sandbox.uptime && /* @__PURE__ */ jsxs9("span", { className: "font-mono text-[10px] tabular-nums text-muted-foreground", children: [
+          "up ",
+          sandbox.uptime
         ] })
       ] }),
-      isTransitioning && /* @__PURE__ */ jsxs9("div", { className: "mt-3", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-xs text-muted-foreground font-medium mb-1", children: [
-          /* @__PURE__ */ jsx10("span", { children: sandbox.provisioningMessage || "Starting..." }),
-          /* @__PURE__ */ jsxs9("span", { children: [
-            sandbox.provisioningPercent || 0,
+      isRunning ? /* @__PURE__ */ jsxs9("div", { className: "space-y-2 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-high p-3", children: [
+        /* @__PURE__ */ jsx10(ResourceMeter, { label: "CPU", value: cpuPercent, max: 100, icon: /* @__PURE__ */ jsx10(Cpu, { className: "h-3 w-3" }) }),
+        ramTotal > 0 && /* @__PURE__ */ jsx10(
+          ResourceMeter,
+          {
+            label: "MEM",
+            value: ramUsed,
+            max: ramTotal,
+            valueLabel: `${ramUsed} / ${ramTotal} GB`,
+            icon: /* @__PURE__ */ jsx10(MemoryStick, { className: "h-3 w-3" })
+          }
+        ),
+        diskUsed != null && diskTotal != null && diskTotal > 0 && /* @__PURE__ */ jsx10(
+          ResourceMeter,
+          {
+            label: "DISK",
+            value: diskUsed,
+            max: diskTotal,
+            valueLabel: `${diskUsed} / ${diskTotal} GB`,
+            icon: /* @__PURE__ */ jsx10(HardDrive, { className: "h-3 w-3" })
+          }
+        )
+      ] }) : isTransitioning ? /* @__PURE__ */ jsxs9("div", { className: "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-high p-3", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "mb-1.5 flex justify-between text-[11px] font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsx10("span", { children: sandbox.provisioningMessage || "Starting\u2026" }),
+          /* @__PURE__ */ jsxs9("span", { className: "font-mono tabular-nums", children: [
+            sandbox.provisioningPercent ?? 0,
             "%"
           ] })
         ] }),
         /* @__PURE__ */ jsx10("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx10(
           "div",
           {
-            className: "h-full bg-primary transition-all duration-500 rounded-full",
+            className: "h-full rounded-full bg-primary transition-all duration-500",
             style: { width: `${sandbox.provisioningPercent || 5}%` }
           }
         ) })
+      ] }) : isArchived && sandbox.archivedAt ? /* @__PURE__ */ jsx10("p", { className: "font-mono text-[11px] text-muted-foreground", children: sandbox.archivedAt }) : null,
+      specs.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-4 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: specs.map((s) => /* @__PURE__ */ jsx10(Spec, { icon: s.icon, value: s.value, unit: s.unit }, s.key)) }),
+      sandbox.customImage && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5 truncate font-mono text-[10px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx10(Box, { className: "h-3 w-3 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx10("span", { className: "truncate", title: sandbox.customImage, children: sandbox.customImage })
       ] })
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "border-t border-border pt-3", children: isRunning ? /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx10("div", { className: "border-t border-[var(--md3-outline-variant)] pt-3", children: isRunning ? /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -1006,7 +1073,7 @@ function SandboxCard({
         disabled: isTransitioning || !resumeHandler,
         className: cn(
           "flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition-colors border",
-          isTransitioning || !resumeHandler ? "bg-muted text-muted-foreground cursor-not-allowed border-border" : "bg-card text-foreground hover:bg-muted border-border active:scale-[0.97]"
+          isTransitioning || !resumeHandler ? "bg-muted text-muted-foreground cursor-not-allowed border-[var(--md3-outline-variant)]" : "bg-surface-container-high text-foreground hover:bg-surface-container-highest border-[var(--md3-outline-variant)] active:scale-[0.97]"
         ),
         children: [
           /* @__PURE__ */ jsx10(Play, { className: "h-4 w-4" }),
@@ -1023,27 +1090,27 @@ function NewSandboxCard({ onClick, className }) {
       type: "button",
       onClick,
       className: cn(
-        "border-2 border-dashed border-border rounded-lg p-5 flex flex-col items-center justify-center text-center cursor-pointer hover:border-foreground/20 hover:bg-muted/30 transition-colors w-full min-h-[160px]",
+        "border-2 border-dashed border-[var(--md3-outline-variant)] rounded-lg p-5 flex flex-col items-center justify-center text-center cursor-pointer hover:border-foreground/20 hover:bg-surface-container-high transition-colors w-full min-h-[160px]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx10("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx10(Plus, { className: "h-6 w-6" }) }),
+        /* @__PURE__ */ jsx10("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-surface-container-high text-muted-foreground", children: /* @__PURE__ */ jsx10(Plus, { className: "h-6 w-6" }) }),
         /* @__PURE__ */ jsx10("span", { className: "mt-4 text-sm font-semibold text-foreground", children: "New Sandbox" }),
-        /* @__PURE__ */ jsx10("span", { className: "mt-1 text-xs text-muted-foreground", children: "Deploy a new isolated environment" })
+        /* @__PURE__ */ jsx10("span", { className: "mt-1 text-xs text-muted-foreground", children: "Spin up an isolated sandbox" })
       ]
     }
   );
 }
 
 // src/dashboard/sandbox-table.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import {
   Activity as Activity2,
   BarChart2 as BarChart22,
   ChevronLeft,
   ChevronRight,
   Clock as Clock2,
-  Code2 as Code22,
+  Code2,
   Copy as Copy2,
   ExternalLink,
   Key,
@@ -1051,7 +1118,7 @@ import {
   Play as Play2,
   PowerOff as PowerOff2,
   RefreshCw,
-  Terminal as Terminal2,
+  Terminal,
   Trash2 as Trash22,
   User,
   Users as Users2
@@ -1063,7 +1130,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator3,
   DropdownMenuTrigger as DropdownMenuTrigger3
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var statusColors = {
   running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
   hibernating: { dot: "bg-muted-foreground", text: "text-muted-foreground", bar: "bg-muted-foreground" },
@@ -1085,7 +1152,7 @@ function MiniMeter({ label, percent, className }) {
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "h-1.5 w-full bg-background rounded-full overflow-hidden", children: /* @__PURE__ */ jsx11("div", { className: "h-full bg-primary rounded-full", style: { width: `${percent}%` } }) })
+    /* @__PURE__ */ jsx11("div", { className: "h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx11("div", { className: "h-full bg-primary rounded-full", style: { width: `${percent}%` } }) })
   ] });
 }
 function SandboxTable({
@@ -1125,8 +1192,8 @@ function SandboxTable({
     return handler ? () => handler(sb.id) : void 0;
   };
   return /* @__PURE__ */ jsxs10("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "w-full bg-card rounded-2xl overflow-hidden border border-border", children: /* @__PURE__ */ jsx11("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs10("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs10("tr", { className: "bg-background border-b border-border", children: [
+    /* @__PURE__ */ jsx11("div", { className: "w-full bg-surface-container rounded-2xl overflow-hidden border border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsx11("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs10("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs10("tr", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: [
         /* @__PURE__ */ jsx11("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Status" }),
         /* @__PURE__ */ jsx11("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Sandbox Name" }),
         hasTeamSandboxes && /* @__PURE__ */ jsx11("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Scope" }),
@@ -1161,7 +1228,7 @@ function SandboxTable({
             {
               className: cn(
                 "group relative transition-colors",
-                onRowClick ? "cursor-pointer hover:bg-muted/50" : "hover:bg-muted/30"
+                onRowClick ? "cursor-pointer hover:bg-surface-container-high" : "hover:bg-surface-container-high"
               ),
               onClick: onRowClick,
               children: [
@@ -1190,7 +1257,7 @@ function SandboxTable({
                 ) : /* @__PURE__ */ jsxs10(
                   "div",
                   {
-                    className: "inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
+                    className: "inline-flex items-center gap-1.5 rounded-full bg-surface-container-high px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
                     title: "Personal sandbox",
                     children: [
                       /* @__PURE__ */ jsx11(User, { className: "h-3 w-3", "aria-hidden": "true" }),
@@ -1199,7 +1266,7 @@ function SandboxTable({
                   }
                 ) }),
                 /* @__PURE__ */ jsx11("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3", children: [
-                  sb.imageIcon && /* @__PURE__ */ jsx11("div", { className: "w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center", children: sb.imageIcon }),
+                  sb.imageIcon && /* @__PURE__ */ jsx11("div", { className: "w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center", children: sb.imageIcon }),
                   sb.image && /* @__PURE__ */ jsx11("span", { className: "text-xs font-bold text-foreground", children: sb.image })
                 ] }) }),
                 /* @__PURE__ */ jsx11("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs10("div", { className: "space-y-3 w-48", children: [
@@ -1213,19 +1280,19 @@ function SandboxTable({
                   /* @__PURE__ */ jsx11(MiniMeter, { label: "RAM", percent: 0 })
                 ] }) : null }),
                 /* @__PURE__ */ jsx11("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-1", children: [
-                  isActive && /* @__PURE__ */ jsxs10(Fragment6, { children: [
+                  isActive && /* @__PURE__ */ jsxs10(Fragment7, { children: [
                     /* @__PURE__ */ jsx11("button", { type: "button", onClick: (e) => {
                       stopRowClick(e);
                       onOpenIDE?.(sb.id);
-                    }, className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx11(Code22, { className: "h-4 w-4" }) }),
+                    }, className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx11(Code2, { className: "h-4 w-4" }) }),
                     /* @__PURE__ */ jsx11("button", { type: "button", onClick: (e) => {
                       stopRowClick(e);
                       onOpenTerminal?.(sb.id);
-                    }, className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx11(Terminal2, { className: "h-4 w-4" }) }),
+                    }, className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx11(Terminal, { className: "h-4 w-4" }) }),
                     /* @__PURE__ */ jsx11("button", { type: "button", onClick: (e) => {
                       stopRowClick(e);
                       onSSH?.(sb.id);
-                    }, className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx11(Key, { className: "h-4 w-4" }) })
+                    }, className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx11(Key, { className: "h-4 w-4" }) })
                   ] }),
                   resumeHandler && /* @__PURE__ */ jsxs10(
                     "button",
@@ -1235,7 +1302,7 @@ function SandboxTable({
                         stopRowClick(e);
                         resumeHandler(sb.id);
                       },
-                      className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all",
+                      className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--md3-outline-variant)] text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all",
                       title: resumeLabel,
                       children: [
                         /* @__PURE__ */ jsx11(Play2, { className: "h-3 w-3" }),
@@ -1305,13 +1372,13 @@ function SandboxTable({
                         {
                           type: "button",
                           onClick: stopRowClick,
-                          className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90 outline-none",
+                          className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 outline-none",
                           "aria-label": "More actions",
                           title: "More actions",
                           children: /* @__PURE__ */ jsx11(MoreVertical2, { className: "h-4 w-4" })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx11(DropdownMenuContent3, { align: "end", className: "min-w-[180px]", children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs10(React5.Fragment, { children: [
+                      /* @__PURE__ */ jsx11(DropdownMenuContent3, { align: "end", className: "min-w-[180px]", children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs10(React6.Fragment, { children: [
                         sectionIdx > 0 && /* @__PURE__ */ jsx11(DropdownMenuSeparator3, {}),
                         section
                       ] }, sectionIdx)) })
@@ -1338,7 +1405,7 @@ function SandboxTable({
         " active sandboxes"
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx11("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__ */ jsx11(ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx11(ChevronLeft, { className: "h-4 w-4" }) }),
         Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx11(
           "button",
           {
@@ -1346,13 +1413,13 @@ function SandboxTable({
             onClick: () => onPageChange?.(p),
             className: cn(
               "px-3 py-1 rounded-lg transition-colors",
-              p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-border" : "hover:bg-muted/50"
+              p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-[var(--md3-outline)]" : "hover:bg-surface-container-high"
             ),
             children: p
           },
           p
         )),
-        /* @__PURE__ */ jsx11("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__ */ jsx11(ChevronRight, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx11(ChevronRight, { className: "h-4 w-4" }) })
       ] })
     ] })
   ] });
@@ -1362,7 +1429,7 @@ function SandboxTable({
 import { Download, FileText } from "lucide-react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var statusStyle = {
-  paid: "bg-[var(--accent-surface-soft)] text-primary border border-border",
+  paid: "bg-[var(--accent-surface-soft)] text-primary border border-[var(--md3-outline-variant)]",
   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)]"
 };
@@ -1375,15 +1442,15 @@ function InvoiceTable({ invoices, onExportAll, onLoadMore, onViewInvoice, hasMor
         "Export All"
       ] })
     ] }),
-    /* @__PURE__ */ jsx12("div", { className: "bg-card rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ jsxs11("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs11("tr", { className: "bg-background border-b border-border", children: [
+    /* @__PURE__ */ jsx12("div", { className: "bg-surface-container rounded-xl overflow-hidden border border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs11("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs11("tr", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: [
         /* @__PURE__ */ jsx12("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Invoice ID" }),
         /* @__PURE__ */ jsx12("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Date" }),
         /* @__PURE__ */ jsx12("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Amount" }),
         /* @__PURE__ */ jsx12("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Status" }),
         /* @__PURE__ */ jsx12("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest text-right", children: "Action" })
       ] }) }),
-      /* @__PURE__ */ jsx12("tbody", { className: "divide-y divide-border", children: invoices.map((inv) => /* @__PURE__ */ jsxs11("tr", { className: "hover:bg-muted/50 transition-colors", children: [
+      /* @__PURE__ */ jsx12("tbody", { className: "divide-y divide-border", children: invoices.map((inv) => /* @__PURE__ */ jsxs11("tr", { className: "hover:bg-surface-container-high transition-colors", children: [
         /* @__PURE__ */ jsx12("td", { className: "px-6 py-5 font-mono text-xs text-foreground", children: inv.id }),
         /* @__PURE__ */ jsx12("td", { className: "px-6 py-5 text-sm text-foreground", children: inv.date }),
         /* @__PURE__ */ jsxs11("td", { className: "px-6 py-5 text-sm font-bold text-foreground", children: [
@@ -1394,7 +1461,7 @@ function InvoiceTable({ invoices, onExportAll, onLoadMore, onViewInvoice, hasMor
         /* @__PURE__ */ jsx12("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => onViewInvoice?.(inv.id), className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx12(FileText, { className: "h-4 w-4" }) }) })
       ] }, inv.id)) })
     ] }) }),
-    hasMore && onLoadMore && /* @__PURE__ */ jsx12("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx12("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" }) })
+    hasMore && onLoadMore && /* @__PURE__ */ jsx12("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx12("button", { type: "button", onClick: onLoadMore, className: "px-8 py-2 text-[10px] font-mono text-muted-foreground border border-[var(--md3-outline-variant)] rounded-full hover:bg-surface-container-high transition-colors uppercase tracking-widest", children: "Load More History" }) })
   ] });
 }
 
@@ -1409,10 +1476,10 @@ function PlanCards({ plans, className }) {
       {
         className: cn(
           "p-5 rounded-xl transition-all relative overflow-hidden border",
-          plan.popular ? "bg-muted/50 border-border" : "bg-card border-border hover:bg-muted/50 hover:border-primary/20"
+          plan.popular ? "bg-surface-container-high border-[var(--md3-outline-variant)]" : "bg-surface-container border-[var(--md3-outline-variant)] hover:bg-surface-container-high hover:border-primary/20"
         ),
         children: [
-          plan.popular && /* @__PURE__ */ jsx13("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" }),
+          plan.popular && /* @__PURE__ */ jsx13("div", { className: "absolute top-0 right-0 bg-[var(--accent-surface-soft)] border-l border-b border-[var(--md3-outline-variant)] px-4 py-1 text-[10px] font-bold text-[var(--accent-text)] uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
           /* @__PURE__ */ jsxs12("div", { className: "mb-4", children: [
             /* @__PURE__ */ jsx13("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-primary" : "text-muted-foreground"), children: plan.name }),
             /* @__PURE__ */ jsxs12("div", { className: "text-3xl font-bold text-foreground", children: [
@@ -1435,7 +1502,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-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"
+                plan.current ? "border-[var(--md3-outline-variant)] text-muted-foreground hover:border-primary/20 hover:text-foreground" : plan.popular ? "bg-[var(--accent-surface-soft)] border-[var(--md3-outline-variant)] text-[var(--accent-text)] hover:bg-[var(--accent-surface-strong)] active:scale-95 transition-transform" : "border-[var(--md3-outline-variant)] text-foreground hover:border-primary/20 hover:text-primary"
               ),
               children: plan.ctaLabel ?? (plan.current ? "Current Plan" : "Upgrade Now")
             }
@@ -1448,9 +1515,9 @@ function PlanCards({ plans, className }) {
 }
 
 // src/dashboard/dashboard-layout.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { Plus as Plus2, Bell } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function SettingsIconSmall({ className }) {
   return /* @__PURE__ */ jsxs13("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__ */ jsx14("title", { children: "Settings" }),
@@ -1515,10 +1582,10 @@ function DashboardLayoutInner({
   notifications: notifData
 }) {
   const Link = LinkComponent;
-  const [mobileMenuOpen, setMobileMenuOpen] = React6.useState(false);
-  const [notificationsOpen, setNotificationsOpen] = React6.useState(false);
-  const notifRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const [mobileMenuOpen, setMobileMenuOpen] = React7.useState(false);
+  const [notificationsOpen, setNotificationsOpen] = React7.useState(false);
+  const notifRef = React7.useRef(null);
+  React7.useEffect(() => {
     if (!notificationsOpen) return;
     const handler = (e) => {
       if (notifRef.current && !notifRef.current.contains(e.target)) {
@@ -1536,14 +1603,14 @@ function DashboardLayoutInner({
     };
   }, [notificationsOpen]);
   const { contentMargin, hidden, mode, hasPanels, panelOpen, toggleRail, railCollapsed } = useSidebar();
-  const modeSet = React6.useMemo(() => new Set(modeItems), [modeItems]);
-  const sidebarUser = React6.useMemo(
+  const modeSet = React7.useMemo(() => new Set(modeItems), [modeItems]);
+  const sidebarUser = React7.useMemo(
     () => user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0,
     [user?.email, user?.name, user?.tier, user?.avatarUrl]
   );
   const activePanel = panels.find((p) => p.mode === mode);
-  const buildSidebarContent = React6.useCallback(
-    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs13(Fragment8, { children: [
+  const buildSidebarContent = React7.useCallback(
+    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs13(Fragment9, { children: [
       /* @__PURE__ */ jsxs13(SidebarRail, { wide: showLabels, children: [
         /* @__PURE__ */ jsx14(SidebarRailHeader, { className: cn(showLabels && "justify-start px-3"), children: onLogoClick ? /* @__PURE__ */ jsx14(
           "button",
@@ -1551,7 +1618,7 @@ function DashboardLayoutInner({
             type: "button",
             onClick: onLogoClick,
             "aria-label": logoAriaLabel,
-            className: "p-1 rounded-md transition-colors hover:bg-muted/50",
+            className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
         ) : labeledRail ? /* @__PURE__ */ jsx14(
@@ -1561,7 +1628,7 @@ function DashboardLayoutInner({
             onClick: toggleRail,
             "aria-label": railCollapsed ? "Expand navigation" : "Collapse navigation",
             "aria-expanded": !railCollapsed,
-            className: "p-1 rounded-md transition-colors hover:bg-muted/50",
+            className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
         ) : /* @__PURE__ */ jsx14(
@@ -1569,7 +1636,7 @@ function DashboardLayoutInner({
           {
             href: logoHref,
             to: logoHref,
-            className: "p-1 rounded-md transition-colors hover:bg-muted/50",
+            className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
         ) }),
@@ -1577,7 +1644,7 @@ function DashboardLayoutInner({
           const isMode = modeSet.has(item.id);
           const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
           const showSep = i > 0 && isMode && !prevIsMode;
-          return /* @__PURE__ */ jsxs13(React6.Fragment, { children: [
+          return /* @__PURE__ */ jsxs13(React7.Fragment, { children: [
             showSep && /* @__PURE__ */ jsx14(
               RailSeparator,
               {
@@ -1664,23 +1731,23 @@ function DashboardLayoutInner({
       mode
     ]
   );
-  const sidebarContent = React6.useMemo(
+  const sidebarContent = React7.useMemo(
     () => buildSidebarContent(labeledRail && !railCollapsed, labeledRail),
     [buildSidebarContent, labeledRail, railCollapsed]
   );
-  const mobileSidebarContent = React6.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
-  return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
+  const mobileSidebarContent = React7.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
+  return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-surface text-foreground", className), children: [
     /* @__PURE__ */ jsxs13(
       "nav",
       {
-        className: "fixed top-0 z-50 bg-card 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",
+        className: "fixed top-0 z-50 bg-surface-container-low border-b border-[var(--md3-outline-variant)] flex justify-between items-center px-8 h-14 font-sans text-[13px] tracking-tight transition-[left,width] duration-200 ease-in-out",
         style: {
           left: hidden ? 0 : contentMargin,
           width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
         },
         children: [
           /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-8", children: [
-            /* @__PURE__ */ jsx14(Link, { href: logoHref, to: logoHref, className: "lg:hidden flex items-center p-1 rounded-md hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }) }),
+            /* @__PURE__ */ jsx14(Link, { href: logoHref, to: logoHref, className: "lg:hidden flex items-center p-1 rounded-md hover:bg-surface-container-high transition-colors", children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }) }),
             topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx14(
               Link,
               {
@@ -1688,7 +1755,7 @@ function DashboardLayoutInner({
                 to: link.href,
                 className: cn(
                   "transition-all duration-300 px-2 py-1 rounded",
-                  activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+                  activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-surface-container-high"
                 ),
                 children: link.label
               },
@@ -1713,7 +1780,7 @@ function DashboardLayoutInner({
                 "button",
                 {
                   type: "button",
-                  className: "relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted/50",
+                  className: "relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-surface-container-high",
                   onClick: () => setNotificationsOpen(!notificationsOpen),
                   "aria-label": "Notifications",
                   "aria-expanded": notificationsOpen,
@@ -1723,8 +1790,8 @@ function DashboardLayoutInner({
                   ]
                 }
               ),
-              notificationsOpen && /* @__PURE__ */ jsxs13("div", { className: "absolute right-0 top-full mt-2 w-80 rounded-lg border border-border bg-card shadow-[var(--shadow-dropdown)] z-50", children: [
-                /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+              notificationsOpen && /* @__PURE__ */ jsxs13("div", { className: "absolute right-0 top-full mt-2 w-80 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14] z-50", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] px-4 py-3", children: [
                   /* @__PURE__ */ jsx14("p", { className: "font-bold text-foreground text-sm", children: "Notifications" }),
                   (notifData?.unreadCount ?? 0) > 0 && notifData?.onMarkAllRead && /* @__PURE__ */ jsx14(
                     "button",
@@ -1747,8 +1814,8 @@ function DashboardLayoutInner({
                   {
                     type: "button",
                     className: cn(
-                      "w-full text-left px-4 py-3 border-b border-border last:border-0 transition-colors",
-                      n.read ? "cursor-default" : "bg-primary/5 hover:bg-muted/50"
+                      "w-full text-left px-4 py-3 border-b border-[var(--md3-outline-variant)] last:border-0 transition-colors",
+                      n.read ? "cursor-default" : "bg-primary/5 hover:bg-white/5"
                     ),
                     onClick: () => {
                       if (!n.read) notifData.onMarkRead?.(n.id);
@@ -1769,7 +1836,7 @@ function DashboardLayoutInner({
             {
               type: "button",
               onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-              className: "rounded-md p-2 hover:bg-muted/50 lg:hidden",
+              className: "rounded-md p-2 hover:bg-surface-container-high lg:hidden",
               "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
               "aria-expanded": mobileMenuOpen,
               children: mobileMenuOpen ? /* @__PURE__ */ jsx14(XIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx14(MenuIcon, { className: "h-6 w-6" })
@@ -1783,7 +1850,7 @@ function DashboardLayoutInner({
       "aside",
       {
         className: cn(
-          "fixed top-14 bottom-0 left-0 z-30 flex bg-background transition-transform duration-200 lg:hidden",
+          "fixed top-14 bottom-0 left-0 z-30 flex bg-surface-container-low transition-transform duration-200 lg:hidden",
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
         ),
         style: {
@@ -1793,7 +1860,7 @@ function DashboardLayoutInner({
       }
     ),
     /* @__PURE__ */ jsx14(Sidebar, { className: cn("hidden lg:flex", sidebarClassName), children: sidebarContent }),
-    /* @__PURE__ */ jsx14(SidebarContent, { className: cn("pt-16 px-6 pb-8 lg:px-8 bg-background", contentClassName), children }),
+    /* @__PURE__ */ jsx14(SidebarContent, { className: cn("pt-16 px-6 pb-8 lg:px-8 bg-surface", contentClassName), children }),
     footer
   ] });
 }
@@ -1845,7 +1912,7 @@ function SidebarLayoutInner({
   const handleNavClick = closePanelOnNavigate && panelOpen ? () => setPanelOpen(false) : void 0;
   const hasProfile = user !== void 0 || onLogout !== void 0 || onSettingsClick !== void 0;
   const showLabels = railLabels && !railCollapsed;
-  return /* @__PURE__ */ jsxs14("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: cn("min-h-screen bg-surface text-foreground", className), children: [
     /* @__PURE__ */ jsx15("div", { className: cn(hideBelow && HIDE_BELOW_CLASS[hideBelow]), children: /* @__PURE__ */ jsxs14(Sidebar, { className: sidebarClassName, children: [
       /* @__PURE__ */ jsxs14(SidebarRail, { children: [
         (railHeaderContent !== void 0 || logo !== void 0) && /* @__PURE__ */ jsx15(SidebarRailHeader, { className: cn(showLabels && (railHeaderContent !== void 0 ? "px-2" : "justify-start px-4")), children: railHeaderContent !== void 0 ? railHeaderContent : /* @__PURE__ */ jsx15(
@@ -1853,7 +1920,7 @@ function SidebarLayoutInner({
           {
             href: logoHref,
             to: logoHref,
-            className: "flex items-center justify-center rounded-lg p-1 transition-colors hover:bg-muted/50",
+            className: "flex items-center justify-center rounded-lg p-1 transition-colors hover:bg-surface-container-high",
             children: logo
           }
         ) }),
@@ -1915,7 +1982,7 @@ function SidebarLayoutInner({
             }
           ) }, item.id);
         }) }),
-        (railLabels || railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs14(SidebarRailFooter, { className: cn("border-t border-border pt-2", showLabels && "items-stretch px-2"), children: [
+        (railLabels || railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs14(SidebarRailFooter, { className: cn("border-t border-[var(--md3-outline-variant)] pt-2", showLabels && "items-stretch px-2"), children: [
           railLabels && /* @__PURE__ */ jsx15(RailCollapseToggle, { collapsed: railCollapsed, showLabel: showLabels, onToggle: toggleRail }),
           railFooter,
           hasProfile && (() => {
@@ -1985,7 +2052,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator4,
   DropdownMenuTrigger as DropdownMenuTrigger4
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -2019,7 +2086,7 @@ function ProfileSelector({
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment10, { children: [
           /* @__PURE__ */ jsx16(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx16(DropdownMenuLabel2, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs15(
@@ -2044,7 +2111,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment10, { children: [
           /* @__PURE__ */ jsx16(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx16(DropdownMenuLabel2, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs15(
@@ -2081,7 +2148,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs15(Fragment10, { children: [
           /* @__PURE__ */ jsx16(DropdownMenuSeparator4, {}),
           onCreateClick && /* @__PURE__ */ jsxs15(
             DropdownMenuItem4,
@@ -2126,7 +2193,7 @@ function ProfileComparison({
   const fastestProfile = profilesWithMetrics.reduce(
     (best, p) => (p.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) < (best.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) ? p : best
   );
-  return /* @__PURE__ */ jsxs15("div", { className: `rounded-lg border border-border p-4 ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs15("div", { className: `rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-4 ${className ?? ""}`, children: [
     /* @__PURE__ */ jsx16("h4", { className: "mb-3 font-medium text-sm", children: "Profile Performance" }),
     /* @__PURE__ */ jsx16("div", { className: "space-y-3", children: profilesWithMetrics.map((profile) => {
       const isBestSuccess = profile.id === bestSuccess.id;
@@ -2176,7 +2243,7 @@ function ProfileComparison({
 }
 
 // src/dashboard/metric-area-chart.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var TONE_VARS = {
   primary: "var(--brand-primary, hsl(var(--primary)))",
@@ -2223,7 +2290,7 @@ function MetricAreaChart({
   emptyState,
   className
 }) {
-  const gradientId = React7.useId();
+  const gradientId = React8.useId();
   const width = 400;
   const values = points.map((p) => p.value).filter((v) => v !== null);
   const latest = values.length > 0 ? values[values.length - 1] : null;
@@ -2235,7 +2302,7 @@ function MetricAreaChart({
     "div",
     {
       className: cn(
-        "rounded-lg border border-border bg-card p-4 shadow-sm",
+        "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-4 shadow-sm",
         className
       ),
       "data-testid": `metric-chart-${label.toLowerCase().replace(/\s+/g, "-")}`,
@@ -2283,7 +2350,7 @@ function MetricAreaChart({
                 /* @__PURE__ */ jsx17("stop", { offset: "0%", stopColor: color, stopOpacity: 0.28 }),
                 /* @__PURE__ */ jsx17("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })
               ] }) }),
-              segments.map((segment) => /* @__PURE__ */ jsxs16(React7.Fragment, { children: [
+              segments.map((segment) => /* @__PURE__ */ jsxs16(React8.Fragment, { children: [
                 /* @__PURE__ */ jsx17("path", { d: segment.area, fill: `url(#${gradientId})` }),
                 /* @__PURE__ */ jsx17(
                   "path",
@@ -2323,7 +2390,7 @@ import {
 } from "lucide-react";
 import { Button as Button3 } from "@tangle-network/ui/primitives";
 import { Badge as Badge2 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment11, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
     icon: Clock3,
@@ -2337,7 +2404,7 @@ var statusConfig = {
     icon: Loader2,
     color: "text-primary",
     bg: "bg-[var(--accent-surface-soft)]",
-    border: "border-border",
+    border: "border-[var(--md3-outline-variant)]",
     label: "Running",
     animate: true
   },
@@ -2414,7 +2481,7 @@ function VariantList({
     return /* @__PURE__ */ jsxs17(
       "div",
       {
-        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"}`,
+        className: `cursor-pointer rounded-lg border px-3 py-2.5 transition-colors ${isSelected ? "border-primary/30 bg-[var(--accent-surface-soft)]" : "border-[var(--md3-outline-variant)] bg-surface-container hover:border-primary/20 hover:bg-surface-container-high"}`,
         onClick: () => onSelect?.(variant.id),
         children: [
           /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
@@ -2446,7 +2513,7 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs17(Fragment11, { children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs17(Fragment12, { children: [
                 /* @__PURE__ */ jsxs17(
                   Button3,
                   {
@@ -2507,7 +2574,7 @@ function VariantList({
 }
 
 // src/dashboard/system-logs.tsx
-import { Terminal as Terminal3 } from "lucide-react";
+import { Terminal as Terminal2 } from "lucide-react";
 import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
 import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function SystemLogsViewer({ apiUrl, token, className }) {
@@ -2562,10 +2629,10 @@ function SystemLogsViewer({ apiUrl, token, className }) {
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 20;
     setIsFollowing((prev) => prev === isAtBottom ? prev : isAtBottom);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col h-full bg-background text-foreground font-mono text-sm leading-relaxed overflow-hidden rounded-lg border border-border", className), children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex-none flex items-center justify-between border-b border-border bg-muted/50 backdrop-blur-md px-4 py-2", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col h-full bg-surface-dim text-foreground font-mono text-sm leading-relaxed overflow-hidden rounded-lg border border-[var(--md3-outline-variant)]", className), children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex-none flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-high backdrop-blur-md px-4 py-2", children: [
       /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx19(Terminal3, { className: "h-4 w-4 text-primary animate-pulse" }),
+        /* @__PURE__ */ jsx19(Terminal2, { className: "h-4 w-4 text-primary animate-pulse" }),
         /* @__PURE__ */ jsx19("span", { className: "font-bold text-xs uppercase tracking-widest text-muted-foreground", children: "System Traces" })
       ] }),
       /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
@@ -2582,7 +2649,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
                 scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
               }
             },
-            className: cn("px-3 py-1 text-[10px] font-bold uppercase rounded-md transition-colors", isFollowing ? "bg-primary/20 text-primary border border-primary/20" : "bg-muted text-muted-foreground border border-border hover:bg-accent hover:text-foreground"),
+            className: cn("px-3 py-1 text-[10px] font-bold uppercase rounded-md transition-colors", isFollowing ? "bg-primary/20 text-primary border border-primary/20" : "bg-surface-container-high text-muted-foreground border border-[var(--md3-outline-variant)] hover:bg-accent hover:text-foreground"),
             children: isFollowing ? "Auto-Scroll ON" : "Auto-Scroll OFF"
           }
         )
@@ -2678,11 +2745,11 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
     return /* @__PURE__ */ jsxs20(
       "div",
       {
-        className: cn("rounded-lg border border-border bg-card overflow-hidden", className),
+        className: cn("rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", className),
         "aria-busy": "true",
         children: [
           /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Loading git info\u2026" }),
-          /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-between border-b border-border bg-muted/30 px-4 py-3", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-4 py-3", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx21(GitBranch, { className: "h-4 w-4 text-muted-foreground" }),
             /* @__PURE__ */ jsx21("div", { className: "h-3.5 w-24 animate-pulse rounded bg-muted" })
           ] }) }),
@@ -2698,14 +2765,14 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
     );
   }
   if (!status) {
-    return /* @__PURE__ */ jsx21("div", { className: cn("rounded-lg border border-border bg-card p-5", className), children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    return /* @__PURE__ */ jsx21("div", { className: cn("rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5", className), children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx21(GitBranch, { className: "h-4 w-4" }),
       "No git repository detected"
     ] }) });
   }
   const changedCount = status.staged.length + status.modified.length + status.untracked.length;
-  return /* @__PURE__ */ jsxs20("div", { className: cn("rounded-lg border border-border bg-card overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between border-b border-border bg-muted/30 px-4 py-3", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: cn("rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-4 py-3", children: [
       /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx21(GitBranch, { className: "h-4 w-4 text-primary" }),
         /* @__PURE__ */ jsx21("span", { className: "text-sm font-bold text-foreground", children: status.branch }),
@@ -2717,7 +2784,7 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
       ] }),
       onRefresh && /* @__PURE__ */ jsx21("button", { type: "button", onClick: onRefresh, className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: "Refresh" })
     ] }),
-    changedCount > 0 && /* @__PURE__ */ jsx21("div", { className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxs20("div", { className: "space-y-1.5", children: [
+    changedCount > 0 && /* @__PURE__ */ jsx21("div", { className: "border-b border-[var(--md3-outline-variant)] px-4 py-3", children: /* @__PURE__ */ jsxs20("div", { className: "space-y-1.5", children: [
       status.staged.map((f) => /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-xs", children: [
         /* @__PURE__ */ jsx21(FilePlus, { className: "h-3 w-3 text-[var(--surface-success-text)]" }),
         /* @__PURE__ */ jsx21("span", { className: "font-mono text-foreground truncate", children: f }),
@@ -2742,7 +2809,7 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
         ] })
       ] }, commit.shortSha)) })
     ] }),
-    (status.ahead > 0 || status.behind > 0) && /* @__PURE__ */ jsxs20("div", { className: "border-t border-border px-4 py-2 flex items-center gap-3 text-xs text-muted-foreground", children: [
+    (status.ahead > 0 || status.behind > 0) && /* @__PURE__ */ jsxs20("div", { className: "border-t border-[var(--md3-outline-variant)] px-4 py-2 flex items-center gap-3 text-xs text-muted-foreground", children: [
       status.ahead > 0 && /* @__PURE__ */ jsxs20("span", { children: [
         "\u2191 ",
         status.ahead,
@@ -2758,14 +2825,14 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
 }
 
 // src/dashboard/ports-list.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { Copy as Copy3, Check as Check4, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
-  const [newPort, setNewPort] = React9.useState("");
-  const [copiedPort, setCopiedPort] = React9.useState(null);
-  const copyTimerRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const [newPort, setNewPort] = React10.useState("");
+  const [copiedPort, setCopiedPort] = React10.useState(null);
+  const copyTimerRef = React10.useRef(null);
+  React10.useEffect(() => {
     return () => {
       if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
     };
@@ -2788,8 +2855,8 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
     }
   };
   return /* @__PURE__ */ jsxs21("div", { className: cn("space-y-4", className), children: [
-    ports.length > 0 ? /* @__PURE__ */ jsx22("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs21("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx22("thead", { className: "bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxs21("tr", { children: [
+    ports.length > 0 ? /* @__PURE__ */ jsx22("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsxs21("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx22("thead", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs21("tr", { children: [
         /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Port" }),
         /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Public URL" }),
         /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
@@ -2823,7 +2890,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
           }
         ) })
       ] }, p.port)) })
-    ] }) }) : /* @__PURE__ */ jsxs21("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+    ] }) }) : /* @__PURE__ */ jsxs21("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
       /* @__PURE__ */ jsx22(Globe, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
       /* @__PURE__ */ jsx22("p", { className: "text-sm text-muted-foreground", children: "No ports exposed yet" })
     ] }),
@@ -2838,7 +2905,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
           value: newPort,
           onChange: (e) => setNewPort(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleExpose(),
-          className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         }
       ),
       /* @__PURE__ */ jsxs21(
@@ -2859,8 +2926,8 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
 }
 
 // src/dashboard/process-list.tsx
-import * as React10 from "react";
-import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal4 } from "lucide-react";
+import * as React11 from "react";
+import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal3 } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function formatUptime(startedAt) {
   if (!startedAt) return "-";
@@ -2871,7 +2938,7 @@ function formatUptime(startedAt) {
   return `${Math.floor(ms / 36e5)}h ${Math.floor(ms % 36e5 / 6e4)}m`;
 }
 function ProcessList({ processes, onSpawn, onKill, loading = false, className }) {
-  const [newCommand, setNewCommand] = React10.useState("");
+  const [newCommand, setNewCommand] = React11.useState("");
   const handleSpawn = () => {
     const cmd = newCommand.trim();
     if (cmd) {
@@ -2880,11 +2947,11 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
     }
   };
   return /* @__PURE__ */ jsxs22("div", { className: cn("space-y-4", className), children: [
-    loading ? /* @__PURE__ */ jsxs22("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+    loading ? /* @__PURE__ */ jsxs22("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
       /* @__PURE__ */ jsx23(Activity3, { className: "mx-auto h-6 w-6 text-muted-foreground animate-spin mb-2" }),
       /* @__PURE__ */ jsx23("p", { className: "text-sm text-muted-foreground", children: "Loading processes..." })
-    ] }) : processes.length > 0 ? /* @__PURE__ */ jsx23("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs22("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx23("thead", { className: "bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxs22("tr", { children: [
+    ] }) : processes.length > 0 ? /* @__PURE__ */ jsx23("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsxs22("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx23("thead", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs22("tr", { children: [
         /* @__PURE__ */ jsx23("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "PID" }),
         /* @__PURE__ */ jsx23("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Command" }),
         /* @__PURE__ */ jsx23("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
@@ -2896,7 +2963,7 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
         /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 font-mono text-xs text-foreground truncate max-w-[250px]", children: p.command }),
         /* @__PURE__ */ jsx23("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx23("span", { className: cn(
           "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
-          p.running ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-muted text-muted-foreground"
+          p.running ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-surface-container-high text-muted-foreground"
         ), children: p.running ? "running" : `exited (${p.exitCode ?? "?"})` }) }),
         /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 font-mono text-xs text-muted-foreground", children: formatUptime(p.startedAt) }),
         /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-right", children: p.running && /* @__PURE__ */ jsx23(
@@ -2910,8 +2977,8 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
           }
         ) })
       ] }, `${p.pid}-${p.startedAt ?? p.command}`)) })
-    ] }) }) : /* @__PURE__ */ jsxs22("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
-      /* @__PURE__ */ jsx23(Terminal4, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
+    ] }) }) : /* @__PURE__ */ jsxs22("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
+      /* @__PURE__ */ jsx23(Terminal3, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
       /* @__PURE__ */ jsx23("p", { className: "text-sm text-muted-foreground", children: "No processes running" })
     ] }),
     /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
@@ -2923,7 +2990,7 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
           value: newCommand,
           onChange: (e) => setNewCommand(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleSpawn(),
-          className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         }
       ),
       /* @__PURE__ */ jsxs22(
@@ -2944,11 +3011,11 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
 }
 
 // src/dashboard/network-config.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function NetworkConfig({ config, onUpdate, loading = false, className }) {
-  const [newCidr, setNewCidr] = React11.useState("");
+  const [newCidr, setNewCidr] = React12.useState("");
   const isValidCidr = (value) => {
     const match = value.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\/(\d{1,2})$/);
     if (!match) return false;
@@ -2969,13 +3036,13 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
     }
   };
   if (loading || !config) {
-    return /* @__PURE__ */ jsxs23("div", { className: cn("rounded-lg border border-border bg-muted/20 p-6 text-center", className), children: [
+    return /* @__PURE__ */ jsxs23("div", { className: cn("rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", className), children: [
       /* @__PURE__ */ jsx24(Network2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
       /* @__PURE__ */ jsx24("p", { className: "text-sm text-muted-foreground", children: "Loading network configuration..." })
     ] });
   }
   return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between rounded-lg border border-border bg-card px-4 py-3", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-3", children: [
       /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx24(ShieldAlert, { className: "h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsxs23("div", { children: [
@@ -2993,7 +3060,7 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
           onClick: () => onUpdate({ blockOutbound: !config.blockOutbound }),
           className: cn(
             "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
-            config.blockOutbound ? "bg-destructive" : "bg-muted"
+            config.blockOutbound ? "bg-destructive" : "bg-surface-container-high"
           ),
           children: /* @__PURE__ */ jsx24(
             "span",
@@ -3009,7 +3076,7 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
     ] }),
     /* @__PURE__ */ jsxs23("div", { children: [
       /* @__PURE__ */ jsx24("h4", { className: "text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider", children: "Allowlist (CIDR)" }),
-      config.allowList.length > 0 ? /* @__PURE__ */ jsx24("div", { className: "space-y-1.5 mb-3", children: config.allowList.map((cidr) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between rounded border border-border bg-muted/20 px-3 py-2", children: [
+      config.allowList.length > 0 ? /* @__PURE__ */ jsx24("div", { className: "space-y-1.5 mb-3", children: config.allowList.map((cidr) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between rounded border border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: [
         /* @__PURE__ */ jsx24("span", { className: "font-mono text-xs text-foreground", children: cidr }),
         /* @__PURE__ */ jsx24(
           "button",
@@ -3030,7 +3097,7 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
             value: newCidr,
             onChange: (e) => setNewCidr(e.target.value),
             onKeyDown: (e) => e.key === "Enter" && handleAddCidr(),
-            className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         /* @__PURE__ */ jsxs23(
@@ -3052,9 +3119,9 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
 }
 
 // src/dashboard/backend-config.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { Bot, Plus as Plus7, RefreshCw as RefreshCw2, Trash2 as Trash25, Server, Wrench } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function BackendConfig({
   status,
   mcpServers,
@@ -3064,10 +3131,10 @@ function BackendConfig({
   loading = false,
   className
 }) {
-  const [showAddMcp, setShowAddMcp] = React12.useState(false);
-  const [mcpName, setMcpName] = React12.useState("");
-  const [mcpCommand, setMcpCommand] = React12.useState("");
-  const [mcpArgs, setMcpArgs] = React12.useState("");
+  const [showAddMcp, setShowAddMcp] = React13.useState(false);
+  const [mcpName, setMcpName] = React13.useState("");
+  const [mcpCommand, setMcpCommand] = React13.useState("");
+  const [mcpArgs, setMcpArgs] = React13.useState("");
   const handleAddMcp = () => {
     const name = mcpName.trim();
     const command = mcpCommand.trim();
@@ -3084,21 +3151,21 @@ function BackendConfig({
     }
   };
   if (loading || !status) {
-    return /* @__PURE__ */ jsxs24("div", { className: cn("rounded-lg border border-border bg-muted/20 p-6 text-center", className), children: [
+    return /* @__PURE__ */ jsxs24("div", { className: cn("rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", className), children: [
       /* @__PURE__ */ jsx25(Bot, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
       /* @__PURE__ */ jsx25("p", { className: "text-sm text-muted-foreground", children: "Loading backend status..." })
     ] });
   }
   return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs24("div", { className: "rounded-lg border border-border bg-card overflow-hidden", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b border-border bg-muted/30 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b border-[var(--md3-outline-variant)] bg-surface-container-high flex items-center justify-between", children: [
         /* @__PURE__ */ jsx25("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Agent Status" }),
         /* @__PURE__ */ jsxs24(
           "button",
           {
             type: "button",
             onClick: onRestart,
-            className: "inline-flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted/80 transition-colors border border-border",
+            className: "inline-flex items-center gap-1.5 rounded-md bg-surface-container-high px-2.5 py-1 text-xs font-medium text-foreground hover:bg-surface-container-highest transition-colors border border-[var(--md3-outline-variant)]",
             children: [
               /* @__PURE__ */ jsx25(RefreshCw2, { className: "h-3 w-3" }),
               "Restart"
@@ -3114,14 +3181,14 @@ function BackendConfig({
         ), children: status.running ? "Running" : "Stopped" }) }),
         /* @__PURE__ */ jsx25("dt", { className: "text-muted-foreground", children: "Model" }),
         /* @__PURE__ */ jsx25("dd", { className: "font-mono text-xs", children: status.model ?? "Default" }),
-        status.provider && /* @__PURE__ */ jsxs24(Fragment12, { children: [
+        status.provider && /* @__PURE__ */ jsxs24(Fragment13, { children: [
           /* @__PURE__ */ jsx25("dt", { className: "text-muted-foreground", children: "Provider" }),
           /* @__PURE__ */ jsx25("dd", { className: "font-mono text-xs", children: status.provider })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs24("div", { className: "rounded-lg border border-border bg-card overflow-hidden", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b border-border bg-muted/30 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b border-[var(--md3-outline-variant)] bg-surface-container-high flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs24("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-2", children: [
           /* @__PURE__ */ jsx25(Wrench, { className: "h-3.5 w-3.5" }),
           "MCP Servers"
@@ -3154,7 +3221,7 @@ function BackendConfig({
         /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 shrink-0", children: [
           s.status && /* @__PURE__ */ jsx25("span", { className: cn(
             "inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase",
-            s.status === "running" ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : s.status === "error" ? "bg-destructive/10 text-destructive" : "bg-muted text-muted-foreground"
+            s.status === "running" ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : s.status === "error" ? "bg-destructive/10 text-destructive" : "bg-surface-container-high text-muted-foreground"
           ), children: s.status }),
           /* @__PURE__ */ jsx25(
             "button",
@@ -3167,7 +3234,7 @@ function BackendConfig({
           )
         ] })
       ] }, s.name)) }) : /* @__PURE__ */ jsx25("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: "No MCP servers configured" }) }),
-      showAddMcp && /* @__PURE__ */ jsxs24("div", { className: "p-4 border-t border-border bg-muted/10 space-y-2", children: [
+      showAddMcp && /* @__PURE__ */ jsxs24("div", { className: "p-4 border-t border-[var(--md3-outline-variant)] bg-surface-container-high space-y-2", children: [
         /* @__PURE__ */ jsx25(
           "input",
           {
@@ -3175,7 +3242,7 @@ function BackendConfig({
             placeholder: "Server name",
             value: mcpName,
             onChange: (e) => setMcpName(e.target.value),
-            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         /* @__PURE__ */ jsx25(
@@ -3185,7 +3252,7 @@ function BackendConfig({
             placeholder: "Command (e.g. npx @server/mcp)",
             value: mcpCommand,
             onChange: (e) => setMcpCommand(e.target.value),
-            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         /* @__PURE__ */ jsx25(
@@ -3195,7 +3262,7 @@ function BackendConfig({
             placeholder: "Arguments (space-separated, optional)",
             value: mcpArgs,
             onChange: (e) => setMcpArgs(e.target.value),
-            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         /* @__PURE__ */ jsxs24("div", { className: "flex justify-end gap-2 pt-1", children: [
@@ -3225,8 +3292,8 @@ function BackendConfig({
 }
 
 // src/dashboard/snapshot-list.tsx
-import * as React13 from "react";
-import { Camera, Clock as Clock5, HardDrive, Plus as Plus8, RotateCcw } from "lucide-react";
+import * as React14 from "react";
+import { Camera, Clock as Clock5, HardDrive as HardDrive2, Plus as Plus8, RotateCcw } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (bytes == null || bytes < 0) return "-";
@@ -3242,8 +3309,8 @@ function formatDate(dateStr) {
   return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
 function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading = false, className }) {
-  const [showCreate, setShowCreate] = React13.useState(false);
-  const [tags, setTags] = React13.useState("");
+  const [showCreate, setShowCreate] = React14.useState(false);
+  const [tags, setTags] = React14.useState("");
   const handleCreate = () => {
     const tagList = tags.trim() ? tags.trim().split(",").map((t) => t.trim()).filter(Boolean) : void 0;
     onCreate(tagList);
@@ -3276,7 +3343,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
           value: tags,
           onChange: (e) => setTags(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleCreate(),
-          className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         }
       ),
       /* @__PURE__ */ jsxs25("div", { className: "flex justify-end gap-2", children: [
@@ -3303,11 +3370,11 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
         )
       ] })
     ] }),
-    loading ? /* @__PURE__ */ jsxs25("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+    loading ? /* @__PURE__ */ jsxs25("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
       /* @__PURE__ */ jsx26(Camera, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
       /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "Loading snapshots..." })
-    ] }) : snapshots.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs25("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx26("thead", { className: "bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxs25("tr", { children: [
+    ] }) : snapshots.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsxs25("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx26("thead", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs25("tr", { children: [
         /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "ID" }),
         /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Created" }),
         /* @__PURE__ */ jsx26("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Size" }),
@@ -3321,17 +3388,17 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
           formatDate(s.createdAt)
         ] }) }),
         /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs25("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx26(HardDrive, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx26(HardDrive2, { className: "h-3 w-3" }),
           formatBytes(s.sizeBytes)
         ] }) }),
-        /* @__PURE__ */ jsx26("td", { className: "px-4 py-3", children: s.tags?.length ? /* @__PURE__ */ jsx26("div", { className: "flex items-center gap-1 flex-wrap", children: s.tags.map((tag) => /* @__PURE__ */ jsx26("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground border border-border", children: tag }, tag)) }) : /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground", children: "-" }) }),
+        /* @__PURE__ */ jsx26("td", { className: "px-4 py-3", children: s.tags?.length ? /* @__PURE__ */ jsx26("div", { className: "flex items-center gap-1 flex-wrap", children: s.tags.map((tag) => /* @__PURE__ */ jsx26("span", { className: "rounded-full bg-surface-container-high px-2 py-0.5 text-[10px] font-medium text-muted-foreground border border-[var(--md3-outline-variant)]", children: tag }, tag)) }) : /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground", children: "-" }) }),
         /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-end gap-2", children: [
           /* @__PURE__ */ jsxs25(
             "button",
             {
               type: "button",
               onClick: () => onRestore(s.id),
-              className: "inline-flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted/80 transition-colors border border-border",
+              className: "inline-flex items-center gap-1.5 rounded-md bg-surface-container-high px-2.5 py-1 text-xs font-medium text-foreground hover:bg-surface-container-highest transition-colors border border-[var(--md3-outline-variant)]",
               title: "Restore to new sandbox",
               children: [
                 /* @__PURE__ */ jsx26(RotateCcw, { className: "h-3 w-3" }),
@@ -3351,7 +3418,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
           )
         ] }) })
       ] }, s.id)) })
-    ] }) }) : /* @__PURE__ */ jsxs25("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+    ] }) }) : /* @__PURE__ */ jsxs25("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
       /* @__PURE__ */ jsx26(Camera, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
       /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "No snapshots yet" }),
       /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground mt-1", children: "Create a snapshot to save the current state of your sandbox." })
@@ -3360,7 +3427,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
 }
 
 // src/dashboard/promo-banner.tsx
-import { Fragment as Fragment13, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 function PromoBanner({
   title,
   description,
@@ -3375,7 +3442,7 @@ function PromoBanner({
     "mt-6 inline-flex items-center gap-2 rounded-md border border-white/20 bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-medium text-[var(--btn-primary-text)] transition-colors",
     disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--btn-primary-hover)]"
   );
-  const buttonContent = /* @__PURE__ */ jsxs26(Fragment13, { children: [
+  const buttonContent = /* @__PURE__ */ jsxs26(Fragment14, { children: [
     buttonLabel,
     /* @__PURE__ */ jsxs26("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [
       /* @__PURE__ */ jsx27("path", { d: "M5 12h14" }),