@tangle-network/sandbox-ui 0.8.4 → 0.9.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-7YWFOGKQ.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: [
@@ -608,7 +608,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,7 +633,7 @@ 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"
@@ -669,8 +669,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 +740,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 +776,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 +785,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 +803,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 +855,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 +873,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
 };

package/dist/dashboard.d.ts

@@ -1,8 +1,8 @@
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, P as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as PlanFeature, q as ProductVariant, r as ProfileAvatar, s as ProfileAvatarProps, t as ProfileComparison, u as ProfileComparisonProps, v as ProfileSelector, w as ProfileSelectorProps, R as RailButton, x as RailButtonProps, y as RailModeButton, z as RailModeButtonProps, A as RailSeparator, E as RailSeparatorProps, F as ResourceMeter, G as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, ad as Variant, ae as VariantList, af as VariantListProps, ag as VariantOutcome, ah as VariantStatus, ai as useSidebar } from './variant-list-C8wx2TqF.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ag as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ah as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ai as Variant, ad as VariantList, ae as VariantListProps, aj as VariantOutcome, ak as VariantStatus, af as useSidebar } from './variant-list-CsS6ydgm.js';
 export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-SSiOgeQI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { a as TemplateCard, T as TemplateCardData, b as TemplateCardProps } from './template-card-BAtvcAkU.js';
-import 'react';
+import * as React from 'react';
 
 interface SystemLogsViewerProps {
     apiUrl: string;
@@ -133,4 +133,24 @@ interface SnapshotListProps {
 }
 declare function SnapshotList({ snapshots, onCreate, onRestore, loading, className }: SnapshotListProps): react_jsx_runtime.JSX.Element;
 
-export { BackendConfig, type BackendConfigProps, type BackendStatusData, type SnapshotInfo as DashboardSnapshotInfo, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, type McpServer, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, UsageSummary, type UsageSummaryData, type UsageSummaryProps };
+interface PromoBannerProps {
+    title: string;
+    description: string;
+    buttonLabel: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+declare function PromoBanner({ title, description, buttonLabel, href, onClick, icon, disabled, className, }: PromoBannerProps): react_jsx_runtime.JSX.Element;
+
+interface InfoPanelProps {
+    label: string;
+    title: string;
+    description: string;
+    className?: string;
+}
+declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
+
+export { BackendConfig, type BackendConfigProps, type BackendStatusData, type SnapshotInfo as DashboardSnapshotInfo, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, InfoPanel, type InfoPanelProps, type McpServer, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, PromoBanner, type PromoBannerProps, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, UsageSummary, type UsageSummaryData, type UsageSummaryProps };

package/dist/dashboard.js

@@ -1,6 +1,7 @@
 import {
+  InfoPanel,
   TemplateCard
-} from "./chunk-7U2Z23NE.js";
+} from "./chunk-VX3XOUEB.js";
 import {
   BackendSelector,
   ClusterStatusBar,
@@ -33,12 +34,12 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-XXDFEF72.js";
+} from "./chunk-7YWFOGKQ.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-UXQMIR3D.js";
+} from "./chunk-OHPW55EV.js";
 import {
   StatCard
 } from "./chunk-OKLQVY3Y.js";
@@ -47,7 +48,7 @@ import {
   Skeleton
 } from "./chunk-66EZOYZR.js";
 import "./chunk-ZMNSRDMH.js";
-import "./chunk-2QZ6G7NM.js";
+import "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -873,6 +874,40 @@ function SnapshotList({ snapshots, onCreate, onRestore, loading = false, classNa
     ] })
   ] });
 }
+
+// src/dashboard/promo-banner.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function PromoBanner({
+  title,
+  description,
+  buttonLabel,
+  href,
+  onClick,
+  icon,
+  disabled = false,
+  className
+}) {
+  const buttonClasses = cn(
+    "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__ */ jsxs9(Fragment2, { children: [
+    buttonLabel,
+    /* @__PURE__ */ jsxs9("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__ */ jsx9("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx9("path", { d: "m12 5 7 7-7 7" })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs9("div", { className: cn("relative overflow-hidden rounded-xl bg-[var(--brand-strong)] p-8 md:flex md:items-center md:justify-between", className), children: [
+    /* @__PURE__ */ jsxs9("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx9("h3", { className: "text-xl font-bold text-[var(--brand-strong-text)]", children: title }),
+      /* @__PURE__ */ jsx9("p", { className: "mt-2 max-w-md text-sm text-[var(--brand-strong-text-muted)]", children: description }),
+      href && !disabled ? /* @__PURE__ */ jsx9("a", { href, target: "_blank", rel: "noopener noreferrer", onClick, className: buttonClasses, children: buttonContent }) : /* @__PURE__ */ jsx9("button", { type: "button", onClick, disabled, className: buttonClasses, children: buttonContent })
+    ] }),
+    icon && /* @__PURE__ */ jsx9("div", { className: "relative z-10 mt-6 flex items-center md:mt-0", children: /* @__PURE__ */ jsx9("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 bg-white/10", children: icon }) }),
+    /* @__PURE__ */ jsx9("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white/5 to-transparent" })
+  ] });
+}
 export {
   BackendConfig,
   BackendSelector,
@@ -881,6 +916,7 @@ export {
   CreditBalance,
   DashboardLayout,
   GitPanel,
+  InfoPanel,
   InvoiceTable,
   NetworkConfig,
   NewSandboxCard,
@@ -891,6 +927,7 @@ export {
   ProfileAvatar,
   ProfileComparison,
   ProfileSelector,
+  PromoBanner,
   RailButton,
   RailModeButton,
   RailSeparator,