@tangle-network/sandbox-ui 0.8.4 → 0.10.0

package/README.md

@@ -133,16 +133,15 @@ There is a built-in Tangle default theme, but consumers can restyle the library
 
 `WorkspaceLayout` and `SandboxWorkbench` support:
 
-- `theme="operator"`
-- `theme="builder"`
-- `theme="consumer"`
+- `theme="vault"` — light theme with solid surfaces
+- No theme prop — default dark theme
 
 They also support `density="comfortable"` and `density="compact"`.
 
 ```tsx
 <SandboxWorkbench
   layout={{
-    theme: "consumer",
+    theme: "vault",
     density: "comfortable",
   }}
   session={{ ... }}
@@ -152,7 +151,7 @@ They also support `density="comfortable"` and `density="compact"`.
 If you are not using `SandboxWorkbench`, you can set the same attributes yourself:
 
 ```tsx
-<div data-sandbox-ui data-sandbox-theme="consumer" data-density="compact">
+<div data-sandbox-ui data-sandbox-theme="vault" data-density="compact">
   <YourSandboxApp />
 </div>
 ```
@@ -257,7 +256,7 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 - [Tailwind CSS](https://tailwindcss.com/) v4
 - [Lucide](https://lucide.dev/) icons
 - [CVA](https://cva.style/) for variant management
-- Shared semantic tokens for `operator`, `builder`, and `consumer` sandbox themes
+- Shared semantic tokens for default dark and `vault` light sandbox themes
 - ESM-only, tree-shakeable, fully typed
 
 ## License

package/dist/auth.js

@@ -3,9 +3,9 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-VOUV7GGB.js";
+} from "./chunk-DI3NZ5ZX.js";
 import "./chunk-34A66VBG.js";
-import "./chunk-2QZ6G7NM.js";
+import "./chunk-MKTSMWVD.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AuthHeader,

package/dist/chat.js

@@ -8,17 +8,17 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-BUOQTBTO.js";
+} from "./chunk-JLKYXLFN.js";
 import "./chunk-54SQQMMM.js";
 import "./chunk-EXSOPXIY.js";
 import "./chunk-HRMUF35V.js";
 import "./chunk-MT5FJ3ZT.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-WXK43R62.js";
+import "./chunk-PLTZB5BC.js";
 import "./chunk-34I7UFSX.js";
 import "./chunk-T7HMZEVO.js";
 import "./chunk-ZMNSRDMH.js";
-import "./chunk-2QZ6G7NM.js";
+import "./chunk-MKTSMWVD.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,

package/dist/{chunk-XXDFEF72.js → chunk-2XCOGNZP.js}

@@ -20,7 +20,7 @@ import {
 } from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-2QZ6G7NM.js";
+} from "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -157,7 +157,7 @@ function Sidebar({ children, className, style }) {
     {
       "data-sidebar": "true",
       className: cn(
-        "fixed inset-y-0 left-0 z-40 flex bg-card/80 backdrop-blur-3xl border-r border-border transition-[transform,width] duration-200 ease-in-out shadow-sm",
+        "fixed inset-y-0 left-0 z-40 flex bg-card border-r border-border transition-[transform,width] duration-200 ease-in-out",
         hidden && "-translate-x-full",
         className
       ),
@@ -193,7 +193,7 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className })
         "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
         "active:scale-95",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-        isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] shadow-[0_0_12px_-2px_rgba(130,99,255,0.3)]",
+        isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]",
         !isActive && "text-muted-foreground",
         className
       ),
@@ -224,7 +224,7 @@ function SidebarPanel({ children, className }) {
     "div",
     {
       className: cn(
-        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-border bg-card/50 backdrop-blur-xl",
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-border bg-card",
         panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
@@ -319,7 +319,7 @@ function ProfileAvatar({
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ClusterStatusBar({ items, latency, className }) {
   if (!items?.length) return null;
-  return /* @__PURE__ */ jsx3("div", { className: cn("fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-max max-w-[90vw] animate-in slide-in-from-bottom flex justify-center", className), children: /* @__PURE__ */ jsxs2("div", { className: "glass-panel-heavy overflow-hidden rounded-full px-6 py-3 flex flex-wrap sm:flex-nowrap items-center justify-between gap-8 border-primary/20 shadow-sm backdrop-blur-2xl", children: [
+  return /* @__PURE__ */ jsx3("div", { className: cn("fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-max max-w-[90vw] animate-in slide-in-from-bottom flex justify-center", className), children: /* @__PURE__ */ jsxs2("div", { className: "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__ */ jsx3("div", { className: "flex items-center gap-6", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx3("span", { className: "text-[var(--md3-primary)] [&_svg]:h-[18px] [&_svg]:w-[18px]", children: item.icon }),
       /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
@@ -516,6 +516,10 @@ function XIcon({ className }) {
     /* @__PURE__ */ jsx7("path", { d: "m6 6 12 12" })
   ] });
 }
+function formatNotifDate(raw) {
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? raw : d.toLocaleString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
 function DefaultLink2({
   href,
   to,
@@ -546,10 +550,30 @@ function DashboardLayoutInner({
   LinkComponent = DefaultLink2,
   footer,
   railFooter,
-  profileMenuItems
+  profileMenuItems,
+  notifications: notifData
 }) {
   const Link = LinkComponent;
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
+  const [notificationsOpen, setNotificationsOpen] = React3.useState(false);
+  const notifRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!notificationsOpen) return;
+    const handler = (e) => {
+      if (notifRef.current && !notifRef.current.contains(e.target)) {
+        setNotificationsOpen(false);
+      }
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape") setNotificationsOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [notificationsOpen]);
   const { contentMargin, hidden, mode, hasPanels, panelOpen } = useSidebar();
   const modeSet = React3.useMemo(() => new Set(modeItems), [modeItems]);
   const sidebarUser = user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0;
@@ -608,7 +632,7 @@ function DashboardLayoutInner({
     /* @__PURE__ */ jsxs6(
       "nav",
       {
-        className: "fixed top-0 z-50 bg-card/80 backdrop-blur-3xl border-b border-border flex justify-between items-center px-8 h-14 font-sans text-[13px] tracking-tight transition-[left,width] duration-200 ease-in-out shadow-sm",
+        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",
         style: {
           left: hidden ? 0 : contentMargin,
           width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
@@ -633,14 +657,68 @@ function DashboardLayoutInner({
               {
                 type: "button",
                 onClick: onNewSandbox,
-                className: "hidden md:flex items-center gap-2 bg-[var(--accent-surface-soft)] border border-border text-[var(--accent-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--accent-surface-strong)] transition-all active:scale-95 text-xs",
+                className: "hidden md:flex items-center gap-2 bg-[var(--btn-primary-bg)] border border-[var(--border-accent)] text-[var(--btn-primary-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--btn-primary-hover)] transition-all active:scale-95 text-xs",
                 children: [
                   /* @__PURE__ */ jsx7(Plus, { className: "h-3.5 w-3.5" }),
                   "New Sandbox"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx7("button", { type: "button", className: "text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted/50", children: /* @__PURE__ */ jsx7(Bell, { className: "h-4 w-4" }) })
+            /* @__PURE__ */ jsxs6("div", { className: "relative", ref: notifRef, children: [
+              /* @__PURE__ */ jsxs6(
+                "button",
+                {
+                  type: "button",
+                  className: "relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted/50",
+                  onClick: () => setNotificationsOpen(!notificationsOpen),
+                  "aria-label": "Notifications",
+                  "aria-expanded": notificationsOpen,
+                  children: [
+                    /* @__PURE__ */ jsx7(Bell, { className: "h-4 w-4" }),
+                    (notifData?.unreadCount ?? 0) > 0 && /* @__PURE__ */ jsx7("span", { className: "absolute top-1 right-1 h-2 w-2 rounded-full bg-destructive" })
+                  ]
+                }
+              ),
+              notificationsOpen && /* @__PURE__ */ jsxs6("div", { className: "absolute right-0 top-full mt-2 w-80 rounded-lg border border-border bg-card shadow-lg z-50", children: [
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+                  /* @__PURE__ */ jsx7("p", { className: "font-bold text-foreground text-sm", children: "Notifications" }),
+                  (notifData?.unreadCount ?? 0) > 0 && notifData?.onMarkAllRead && /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        notifData.onMarkAllRead?.();
+                      },
+                      className: "text-primary text-xs font-medium hover:underline",
+                      children: "Mark all read"
+                    }
+                  )
+                ] }),
+                !notifData?.items || notifData.items.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center", children: [
+                  /* @__PURE__ */ jsx7(Bell, { className: "h-8 w-8 text-muted-foreground/40 mb-2" }),
+                  /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground text-sm", children: "No notifications yet" }),
+                  /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground/60 text-xs mt-1", children: "We'll notify you about important updates" })
+                ] }) : /* @__PURE__ */ jsx7("div", { className: "max-h-80 overflow-y-auto", children: notifData.items.map((n) => /* @__PURE__ */ jsxs6(
+                  "button",
+                  {
+                    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"
+                    ),
+                    onClick: () => {
+                      if (!n.read) notifData.onMarkRead?.(n.id);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx7("p", { className: cn("text-sm", !n.read ? "font-semibold text-foreground" : "text-muted-foreground"), children: n.title }),
+                      /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: n.message }),
+                      /* @__PURE__ */ jsx7("p", { className: "text-[10px] text-muted-foreground/50 mt-1", children: formatNotifDate(n.createdAt) })
+                    ]
+                  },
+                  n.id
+                )) })
+              ] })
+            ] })
           ] }),
           /* @__PURE__ */ jsx7(
             "button",
@@ -669,8 +747,8 @@ function DashboardLayoutInner({
       }
     ),
     /* @__PURE__ */ jsx7(Sidebar, { className: cn("hidden lg:flex", sidebarClassName), children: sidebarContent }),
-    /* @__PURE__ */ jsx7(SidebarContent, { className: cn("pt-16 px-6 pb-8 hidden lg:block", contentClassName), children }),
-    /* @__PURE__ */ jsx7("main", { className: cn("pt-16 px-6 pb-8 min-h-screen lg:hidden", contentClassName), children }),
+    /* @__PURE__ */ jsx7(SidebarContent, { className: cn("pt-16 px-8 pb-8 hidden lg:block bg-background", contentClassName), children }),
+    /* @__PURE__ */ jsx7("main", { className: cn("pt-16 px-6 pb-8 min-h-screen lg:hidden bg-background", contentClassName), children }),
     footer
   ] });
 }
@@ -740,33 +818,33 @@ function SandboxCard({
   const isTransitioning = sandbox.status === "provisioning" || sandbox.status === "creating";
   const isStopped = !isRunning && !isTransitioning;
   return /* @__PURE__ */ jsxs8("div", { className: cn(
-    "group relative glass-panel flex flex-col justify-between overflow-hidden rounded-3xl p-6 transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-[var(--md3-primary)]/10",
-    isRunning ? "border-[var(--md3-primary)]/30 glow-primary" : "border-border",
+    "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",
+    "hover:border-foreground/15",
     className
   ), children: [
-    isRunning && /* @__PURE__ */ jsx9("div", { className: "absolute -top-20 -right-20 h-40 w-40 rounded-full bg-[var(--md3-primary)]/20 blur-[60px] pointer-events-none" }),
-    /* @__PURE__ */ jsxs8("div", { className: "relative z-10 flex items-start justify-between", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsxs8("h3", { className: "flex items-center gap-2 font-headline text-xl font-bold tracking-tight text-foreground", children: [
+        /* @__PURE__ */ jsxs8("h3", { className: "flex items-center gap-2 text-sm font-bold text-foreground", children: [
           sandbox.name,
-          isRunning && /* @__PURE__ */ jsxs8("span", { className: "relative flex h-2.5 w-2.5", children: [
-            /* @__PURE__ */ jsx9("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" }),
-            /* @__PURE__ */ jsx9("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" })
+          isRunning && /* @__PURE__ */ jsxs8("span", { className: "relative flex h-2 w-2", children: [
+            /* @__PURE__ */ jsx9("span", { className: "absolute inline-flex h-full w-full animate-pulse rounded-full bg-[var(--status-running)] opacity-75" }),
+            /* @__PURE__ */ jsx9("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-[var(--status-running)]" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx9("p", { className: "font-mono text-[10px] tracking-wider text-[var(--md3-on-surface-variant)] mt-1 uppercase font-bold", children: sandbox.nodeId || "Unknown Node" })
+        /* @__PURE__ */ jsx9("p", { className: "mt-0.5 font-mono text-[10px] tracking-wider text-muted-foreground uppercase", children: sandbox.nodeId || "Unknown Node" })
       ] }),
-      /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-1 z-50", children: /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
         /* @__PURE__ */ jsx9(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
-            className: "rounded-full flex items-center justify-center p-2 text-[var(--md3-on-surface-variant)] transition-colors hover:bg-muted hover:text-foreground shrink-0 outline-none",
+            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground outline-none",
             "aria-label": "Sandbox options",
-            children: /* @__PURE__ */ jsx9(MoreVertical, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ jsx9(MoreVertical, { className: "h-4 w-4" })
           }
         ) }),
-        /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", className: "glass-panel-heavy border-[var(--md3-outline-variant)] min-w-[180px]", children: [
+        /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", className: "min-w-[180px]", children: [
           isRunning && /* @__PURE__ */ jsxs8(Fragment5, { children: [
             onStop && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onStop(sandbox.id), children: [
               /* @__PURE__ */ jsx9(PowerOff, { className: "mr-2 h-4 w-4" }),
@@ -776,7 +854,7 @@ function SandboxCard({
               /* @__PURE__ */ jsx9(Clock, { className: "mr-2 h-4 w-4" }),
               " Keep Alive"
             ] }),
-            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" }),
+            (onStop || onKeepAlive) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
             onUsage && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onUsage(sandbox.id), children: [
               /* @__PURE__ */ jsx9(BarChart2, { className: "mr-2 h-4 w-4" }),
               " View Usage"
@@ -785,12 +863,14 @@ function SandboxCard({
               /* @__PURE__ */ jsx9(Activity, { className: "mr-2 h-4 w-4" }),
               " Health Check"
             ] }),
-            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" }),
-            onFork && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onFork(sandbox.id), children: [
-              /* @__PURE__ */ jsx9(Copy, { className: "mr-2 h-4 w-4" }),
-              " Fork Sandbox"
-            ] }),
-            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" })
+            (onUsage || onHealth) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+            onFork && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+              /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onFork(sandbox.id), children: [
+                /* @__PURE__ */ jsx9(Copy, { className: "mr-2 h-4 w-4" }),
+                " Fork Sandbox"
+              ] }),
+              /* @__PURE__ */ jsx9(DropdownMenuSeparator, {})
+            ] })
           ] }),
           isStopped && /* @__PURE__ */ jsxs8(Fragment5, { children: [
             onResume && /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onResume(sandbox.id), children: [
@@ -801,46 +881,46 @@ function SandboxCard({
               /* @__PURE__ */ jsx9(Copy, { className: "mr-2 h-4 w-4" }),
               " Fork Sandbox"
             ] }),
-            /* @__PURE__ */ jsx9(DropdownMenuSeparator, { className: "bg-[var(--md3-outline-variant)]" })
+            (onResume || onFork) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {})
           ] }),
-          onDelete && /* @__PURE__ */ jsxs8(DropdownMenuItem, { className: "text-red-400 focus:bg-red-500/10 focus:text-red-300", onClick: () => onDelete(sandbox.id), children: [
+          onDelete && /* @__PURE__ */ jsxs8(DropdownMenuItem, { className: "text-destructive focus:bg-destructive/10 focus:text-destructive", onClick: () => onDelete(sandbox.id), children: [
             /* @__PURE__ */ jsx9(Trash2, { className: "mr-2 h-4 w-4" }),
             " Delete Sandbox"
           ] })
         ] })
-      ] }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "relative z-10 my-8", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 bg-muted/50 border border-border rounded-2xl p-4", children: [
-        /* @__PURE__ */ jsx9("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-xl", isRunning ? "bg-[var(--md3-primary)]/20" : "bg-white/5"), children: sandbox.imageIcon ? sandbox.imageIcon : sandbox.image?.includes("node") ? /* @__PURE__ */ jsx9(Code2, { className: cn("h-6 w-6", isRunning ? "text-[var(--md3-primary)]" : "text-[var(--md3-on-surface-variant)]") }) : /* @__PURE__ */ jsx9(Terminal, { className: cn("h-6 w-6", isRunning ? "text-[var(--md3-primary)]" : "text-[var(--md3-on-surface-variant)]") }) }),
+    /* @__PURE__ */ jsxs8("div", { className: "my-4", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 rounded-md border border-border bg-muted/30 p-3", children: [
+        /* @__PURE__ */ jsx9("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__ */ jsx9(Code2, { className: cn("h-5 w-5", isRunning ? "text-[var(--surface-success-text)]" : "text-muted-foreground") }) : /* @__PURE__ */ jsx9(Terminal, { className: cn("h-5 w-5", isRunning ? "text-[var(--surface-success-text)]" : "text-muted-foreground") }) }),
         /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-[var(--md3-on-surface-variant)] uppercase tracking-widest font-bold", children: "Environment" }),
-          /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-foreground font-mono mt-0.5", children: sandbox.image || "Universal" })
+          /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-muted-foreground uppercase tracking-widest font-bold", children: "Environment" }),
+          /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-foreground font-mono mt-0.5", children: sandbox.image || "Universal" })
         ] })
       ] }),
-      isTransitioning && /* @__PURE__ */ jsxs8("div", { className: "mt-4 animate-in", children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex justify-between text-xs text-[var(--md3-primary)] font-medium mb-1", children: [
+      isTransitioning && /* @__PURE__ */ jsxs8("div", { className: "mt-3", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex justify-between text-xs text-muted-foreground font-medium mb-1", children: [
           /* @__PURE__ */ jsx9("span", { children: sandbox.provisioningMessage || "Starting..." }),
           /* @__PURE__ */ jsxs8("span", { children: [
             sandbox.provisioningPercent || 0,
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-white/10", children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx9("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx9(
           "div",
           {
-            className: "h-full bg-gradient-to-r from-[var(--md3-primary)] to-[#ada3ff] transition-all duration-500 rounded-full",
+            className: "h-full bg-primary transition-all duration-500 rounded-full",
             style: { width: `${sandbox.provisioningPercent || 5}%` }
           }
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "relative z-10 flex items-center gap-3 border-t border-[var(--md3-outline-variant)] pt-4", children: isRunning ? /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx9("div", { className: "border-t border-border pt-3", children: isRunning ? /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
         onClick: () => onOpenIDE?.(sandbox.id),
-        className: "flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--md3-primary)]/20 px-4 py-2.5 font-bold text-sm text-[var(--md3-primary)] shadow-[0_0_15px_rgba(173,163,255,0.1)] transition-all hover:bg-[var(--md3-primary)] hover:text-primary-foreground hover:shadow-[var(--shadow-glow)] active:scale-95 border border-[var(--md3-primary)]/30",
+        className: "flex w-full items-center justify-center gap-2 rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] transition-colors hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]",
         children: [
           /* @__PURE__ */ jsx9(Network, { className: "h-4 w-4" }),
           "Connect Session"
@@ -853,8 +933,8 @@ function SandboxCard({
         onClick: () => onWake?.(sandbox.id),
         disabled: isTransitioning,
         className: cn(
-          "flex flex-1 items-center justify-center gap-2 rounded-xl px-4 py-2.5 font-bold text-sm transition-all border",
-          isTransitioning ? "bg-muted/30 text-[var(--md3-on-surface-variant)] cursor-not-allowed border-border" : "bg-[var(--md3-primary)]/10 text-[var(--md3-primary)] hover:bg-[var(--md3-primary)] hover:text-foreground shadow-[0_0_15px_rgba(173,163,255,0.1)] hover:shadow-[0_0_20px_rgba(173,163,255,0.4)] active:scale-95 border-[var(--md3-primary)]/30"
+          "flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition-colors border",
+          isTransitioning ? "bg-muted text-muted-foreground cursor-not-allowed border-border" : "bg-card text-foreground hover:bg-muted border-border active:scale-[0.97]"
         ),
         children: [
           /* @__PURE__ */ jsx9(Play, { className: "h-4 w-4" }),
@@ -871,14 +951,13 @@ function NewSandboxCard({ onClick, className }) {
       type: "button",
       onClick,
       className: cn(
-        "relative border-2 border-dashed border-border rounded-xl p-5 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] transition-all duration-300 w-full min-h-[160px]",
+        "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]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(155,140,255,0.1)_0,transparent_100%)] opacity-0 transition-opacity duration-300 group-hover:opacity-100" }),
-        /* @__PURE__ */ jsx9("div", { className: "flex h-16 w-16 items-center justify-center rounded-3xl bg-[var(--md3-primary)]/20 text-[var(--md3-primary)] shadow-[0_0_20px_rgba(155,140,255,0.2)] transition-transform duration-300 group-hover:scale-110 group-hover:shadow-[0_0_30px_rgba(155,140,255,0.4)]", children: /* @__PURE__ */ jsx9(Plus2, { className: "h-8 w-8" }) }),
-        /* @__PURE__ */ jsx9("span", { className: "mt-6 font-headline text-xl font-bold text-foreground tracking-tight", children: "New Sandbox" }),
-        /* @__PURE__ */ jsx9("span", { className: "mt-2 text-sm text-[var(--md3-primary)] font-medium", children: "Deploy a new isolated environment" })
+        /* @__PURE__ */ jsx9("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx9(Plus2, { className: "h-6 w-6" }) }),
+        /* @__PURE__ */ jsx9("span", { className: "mt-4 text-sm font-semibold text-foreground", children: "New Sandbox" }),
+        /* @__PURE__ */ jsx9("span", { className: "mt-1 text-xs text-muted-foreground", children: "Deploy a new isolated environment" })
       ]
     }
   );

package/dist/{chunk-VOUV7GGB.js → chunk-DI3NZ5ZX.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-34A66VBG.js";
 import {
   Button
-} from "./chunk-2QZ6G7NM.js";
+} from "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -174,28 +174,14 @@ function LoginLayout({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("relative flex min-h-screen items-center justify-center bg-[var(--md3-background)] overflow-hidden antialiased font-sans flex-col", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "pointer-events-none absolute inset-0 z-0 overflow-hidden", children: [
-      /* @__PURE__ */ jsx2("div", { className: "absolute top-1/4 -right-1/4 h-[800px] w-[800px] rounded-full bg-[var(--md3-primary)] opacity-10 blur-[150px] mix-blend-screen" }),
-      /* @__PURE__ */ jsx2("div", { className: "absolute -bottom-1/4 -left-1/4 h-[800px] w-[800px] rounded-full bg-[var(--md3-primary-dim)] opacity-20 blur-[150px] mix-blend-screen" }),
-      /* @__PURE__ */ jsx2("div", { className: "absolute left-1/2 top-1/2 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_100%)] blur-[50px]" }),
-      /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIwIDB2MjBIMFYweiIgZmlsbD0ibm9uZSIvPPHBhdGggZD0iTTE5LjUgMEwxOS41IDIwTTIwIC41TDAgLjVIMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsIDI1NSLCAyNTUsIDAuMDMpIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=')] opacity-30", style: { maskImage: "radial-gradient(circle at center, black, transparent)", WebkitMaskImage: "radial-gradient(circle at center, black 40%, transparent 100%)" } })
+  return /* @__PURE__ */ jsx2("div", { className: cn("relative flex min-h-screen items-center justify-center bg-background overflow-hidden antialiased font-sans flex-col", className), children: /* @__PURE__ */ jsxs2("div", { className: "z-10 w-full max-w-md px-6 animate-in flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-10 text-center flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx2("div", { className: "inline-flex h-14 w-14 mb-4 items-center justify-center rounded-lg bg-muted border border-border", children: brandIcon || /* @__PURE__ */ jsx2(Terminal, { className: "h-7 w-7 text-foreground" }) }),
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-bold tracking-tight text-foreground font-display", children: title }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "z-10 w-full max-w-md px-6 animate-in flex flex-col items-center", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "mb-10 text-center flex flex-col items-center", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "inline-flex h-16 w-16 mb-4 items-center justify-center rounded-2xl glass-panel shadow-[0_0_30px_rgba(173,163,255,0.15)] glow-primary relative", children: [
-          /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.1)_0,transparent_100%)] pointer-events-none rounded-2xl" }),
-          brandIcon || /* @__PURE__ */ jsx2(Terminal, { className: "h-8 w-8 text-[var(--md3-primary)]" })
-        ] }),
-        /* @__PURE__ */ jsx2("h1", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
-        /* @__PURE__ */ jsx2("p", { className: "mt-2 text-[var(--md3-on-surface-variant)]", children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "w-full glass-panel-heavy p-8 border border-border shadow-sm relative overflow-hidden backdrop-blur-3xl rounded-[32px]", children: [
-        /* @__PURE__ */ jsx2("div", { className: "absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-[var(--md3-primary)] to-transparent opacity-50" }),
-        children
-      ] })
-    ] })
-  ] });
+    /* @__PURE__ */ jsx2("div", { className: "w-full bg-card p-8 border border-border rounded-lg", children })
+  ] }) });
 }
 
 export {

package/dist/{chunk-BUOQTBTO.js → chunk-JLKYXLFN.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk-BX6AQMUS.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-WXK43R62.js";
+} from "./chunk-PLTZB5BC.js";
 import {
   Markdown
 } from "./chunk-T7HMZEVO.js";

package/dist/{chunk-2QZ6G7NM.js → chunk-MKTSMWVD.js}

@@ -12,13 +12,13 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary/20 border border-primary/30 text-primary hover:text-primary-foreground shadow-[var(--shadow-accent)] hover:bg-primary hover:shadow-[var(--shadow-glow)] active:scale-[0.97] duration-[var(--transition-fast)]",
-        destructive: "bg-destructive/10 border border-destructive/30 text-destructive hover:text-destructive-foreground hover:bg-destructive/80 active:scale-[0.97] duration-[var(--transition-fast)]",
-        outline: "border border-border bg-card/50 backdrop-blur-xl hover:bg-muted hover:border-primary/20 active:scale-[0.97] duration-[var(--transition-fast)] text-foreground shadow-sm",
-        secondary: "bg-muted/50 border border-border text-foreground backdrop-blur-xl hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] shadow-sm",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+        outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
+        secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
         ghost: "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
         link: "text-primary underline-offset-4 hover:underline",
-        sandbox: "bg-[image:var(--accent-gradient-strong)] text-white shadow-[var(--shadow-accent)] backdrop-blur-2xl border border-[var(--border-accent)] hover:brightness-110 active:scale-[0.97] duration-[var(--transition-fast)]"
+        sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]"
       },
       size: {
         default: "h-[var(--control-height)] px-4 py-2",

package/dist/{chunk-UXQMIR3D.js → chunk-OHPW55EV.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-2QZ6G7NM.js";
+} from "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-WXK43R62.js → chunk-PLTZB5BC.js}

@@ -20,7 +20,7 @@ import {
 } from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-2QZ6G7NM.js";
+} from "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-HFMAXUHV.js → chunk-QC4BJEG6.js}

@@ -10,10 +10,10 @@ import {
 } from "./chunk-MA7YKRUP.js";
 import {
   ChatContainer
-} from "./chunk-BUOQTBTO.js";
+} from "./chunk-JLKYXLFN.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-WXK43R62.js";
+} from "./chunk-PLTZB5BC.js";
 import {
   FileArtifactPane,
   FileTree,

package/dist/{chunk-3CJ2SOEI.js → chunk-US6JKJKH.js}

@@ -16,7 +16,7 @@ var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
+      "fixed inset-0 z-50 bg-black/40",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
@@ -38,7 +38,7 @@ var DialogContent = React.forwardRef(({ className, children, variant = "default"
         ref,
         className: cn(
           "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
-          "gap-4 rounded-2xl border bg-card/95 backdrop-blur-xl p-6 shadow-2xl duration-200",
+          "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200",
           "data-[state=closed]:animate-out data-[state=open]:animate-in",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

package/dist/{chunk-7U2Z23NE.js → chunk-VX3XOUEB.js}

@@ -44,6 +44,20 @@ function TemplateCard({ template, onUseTemplate, className }) {
   );
 }
 
+// src/dashboard/info-panel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function InfoPanel({ label, title, description, className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx2("p", { className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]", children: label }),
+      /* @__PURE__ */ jsx2("h3", { className: "mt-1 text-lg font-bold", children: title }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]", children: description })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "absolute right-0 top-0 h-full w-1/3 bg-white/5 -skew-x-12 translate-x-12 pointer-events-none" })
+  ] });
+}
+
 export {
-  TemplateCard
+  TemplateCard,
+  InfoPanel
 };