@tangle-network/sandbox-ui 0.6.1 → 0.8.4

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

@@ -7,27 +7,27 @@ import {
 import {
   EmptyState,
   Input
-} from "./chunk-BRBTD7RH.js";
+} from "./chunk-MA7YKRUP.js";
 import {
   ChatContainer
-} from "./chunk-RKXIRRKQ.js";
+} from "./chunk-BUOQTBTO.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-OVNLOE3Y.js";
+} from "./chunk-WXK43R62.js";
 import {
   FileArtifactPane,
   FileTree,
   filterFileTree
-} from "./chunk-KH5UDAJ2.js";
+} from "./chunk-QDH5GEGY.js";
 import {
   ArtifactPane
-} from "./chunk-W4LM3QYZ.js";
+} from "./chunk-HB5Y37YU.js";
 import {
   Markdown
-} from "./chunk-3HW53XTH.js";
+} from "./chunk-T7HMZEVO.js";
 import {
   Badge
-} from "./chunk-TDYQBLL5.js";
+} from "./chunk-ZMNSRDMH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -108,12 +108,12 @@ function ResizeHandle({ label, onDragStart, onStep, className }) {
       className: cn(
         "relative hidden w-3 shrink-0 cursor-col-resize lg:flex",
         "items-stretch justify-center bg-transparent touch-none",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[var(--border-subtle)] transition-colors" }),
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-[3px] -translate-x-1/2 rounded-full bg-transparent hover:bg-[var(--brand-cool)]/30 focus-visible:bg-[var(--brand-cool)]/40" })
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border transition-colors" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-[3px] -translate-x-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })
       ]
     }
   );
@@ -145,12 +145,12 @@ function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
       className: cn(
         "relative hidden h-3 shrink-0 cursor-row-resize lg:flex",
         "items-center justify-center bg-transparent touch-none w-full",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-[var(--border-subtle)] transition-colors" }),
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-[3px] -translate-y-1/2 rounded-full bg-transparent hover:bg-[var(--brand-cool)]/30 focus-visible:bg-[var(--brand-cool)]/40" })
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border transition-colors" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-[3px] -translate-y-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })
       ]
     }
   );
@@ -163,26 +163,26 @@ function MobileDrawer({ side, title, header, onClose, children }) {
         type: "button",
         "aria-label": `Close ${title}`,
         onClick: onClose,
-        className: "absolute inset-0 bg-black/70"
+        className: "absolute inset-0 bg-black/80 backdrop-blur-sm"
       }
     ),
     /* @__PURE__ */ jsxs(
       "aside",
       {
         className: cn(
-          "relative flex h-full w-[min(88vw,24rem)] flex-col border-[var(--border-default)] bg-[var(--bg-dark)] shadow-[var(--shadow-dropdown)]",
+          "relative flex h-full w-[min(88vw,24rem)] flex-col border-border bg-background shadow-[var(--shadow-dropdown)]",
           side === "left" ? "border-r" : "ml-auto border-l"
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header ?? /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-foreground", children: title }) }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 "aria-label": `Close ${title}`,
                 onClick: onClose,
-                className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                 children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
               }
             )
@@ -217,7 +217,7 @@ function WorkspaceLayout({
   maxBottomHeight = 500,
   persistenceKey,
   resizable = true,
-  theme = "operator",
+  theme,
   density = "comfortable",
   leftLabel = "Left workspace panel",
   rightLabel = "Right workspace panel",
@@ -314,11 +314,10 @@ function WorkspaceLayout({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-sandbox-ui": "true",
-      "data-sandbox-theme": theme,
+      ...theme ? { "data-sandbox-ui": "true", "data-sandbox-theme": theme } : {},
       "data-density": density,
       className: cn(
-        "flex h-screen flex-col overflow-hidden bg-[var(--bg-root)] text-[var(--text-primary)] font-[var(--font-sans)]",
+        "flex h-screen flex-col overflow-hidden bg-[var(--bg-root)] text-foreground font-sans",
         className
       ),
       children: [
@@ -329,9 +328,9 @@ function WorkspaceLayout({
               {
                 "aria-label": leftLabel,
                 style: leftStyle,
-                className: "hidden shrink-0 border-r border-[var(--border-subtle)] bg-[var(--bg-dark)] lg:flex lg:flex-col",
+                className: "hidden shrink-0 border-r border-border bg-background lg:flex lg:flex-col",
                 children: [
-                  leftHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
+                  leftHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5 bg-muted/20", children: [
                     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: leftHeader }),
                     /* @__PURE__ */ jsx(
                       "button",
@@ -339,7 +338,7 @@ function WorkspaceLayout({
                         type: "button",
                         "aria-label": "Collapse left panel",
                         onClick: () => setLeftOpen(false),
-                        className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                        className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                         children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
                       }
                     )
@@ -358,14 +357,14 @@ function WorkspaceLayout({
             )
           ] }),
           /* @__PURE__ */ jsxs("main", { className: "flex min-w-0 flex-1 flex-col", children: [
-            (centerHeader || left || right || bottom) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-dark)] px-3 py-2", children: [
+            (centerHeader || left || right || bottom) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5", children: [
               left && !leftOpen && /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   "aria-label": "Open left panel",
                   onClick: () => setLeftOpen(true),
-                  className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                  className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                   children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
                 }
               ),
@@ -376,7 +375,7 @@ function WorkspaceLayout({
                   type: "button",
                   "aria-label": "Open bottom panel",
                   onClick: () => setBottomOpen(true),
-                  className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                  className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                   children: /* @__PURE__ */ jsx(PanelBottomOpen, { className: "h-4 w-4" })
                 }
               ),
@@ -386,7 +385,7 @@ function WorkspaceLayout({
                   type: "button",
                   "aria-label": "Open right panel",
                   onClick: () => setRightOpen(true),
-                  className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                  className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                   children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
                 }
               )
@@ -405,18 +404,18 @@ function WorkspaceLayout({
                 "section",
                 {
                   "aria-label": bottomLabel,
-                  className: "border-t border-[var(--border-subtle)] bg-[var(--bg-card)] shrink-0",
+                  className: "border-t border-border bg-card shrink-0",
                   style: { height: `${bottomHeight}px` },
                   children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2 shrink-0", children: [
-                      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: bottomHeader ?? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: "Runtime" }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5 bg-muted/20 shrink-0", children: [
+                      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: bottomHeader ?? /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Runtime" }) }),
                       /* @__PURE__ */ jsx(
                         "button",
                         {
                           type: "button",
                           "aria-label": "Collapse bottom panel",
                           onClick: () => setBottomOpen(false),
-                          className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                          className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                           children: /* @__PURE__ */ jsx(PanelBottomClose, { className: "h-4 w-4" })
                         }
                       )
@@ -426,7 +425,7 @@ function WorkspaceLayout({
                 }
               )
             ] }),
-            centerFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)]", children: centerFooter })
+            centerFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border bg-background", children: centerFooter })
           ] }),
           desktop && right && rightOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
             resizable && /* @__PURE__ */ jsx(
@@ -442,17 +441,17 @@ function WorkspaceLayout({
               {
                 "aria-label": rightLabel,
                 style: rightStyle,
-                className: "hidden shrink-0 border-l border-[var(--border-subtle)] bg-[var(--bg-dark)] lg:flex lg:flex-col",
+                className: "hidden shrink-0 border-l border-border bg-background lg:flex lg:flex-col",
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
-                    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: rightHeader ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Artifacts" }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5 bg-muted/20", children: [
+                    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: rightHeader ?? /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-foreground", children: "Artifacts" }) }),
                     /* @__PURE__ */ jsx(
                       "button",
                       {
                         type: "button",
                         "aria-label": "Collapse right panel",
                         onClick: () => setRightOpen(false),
-                        className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                        className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                         children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
                       }
                     )
@@ -557,7 +556,7 @@ function DirectoryPane({
             value: query,
             onChange: (event) => setQuery(event.target.value),
             placeholder: searchPlaceholder,
-            className: "h-9"
+            className: "h-7 text-xs rounded-[2px]"
           }
         ) }),
         onRefresh && /* @__PURE__ */ jsx2(
@@ -566,7 +565,7 @@ function DirectoryPane({
             type: "button",
             "aria-label": "Refresh directory",
             onClick: onRefresh,
-            className: "rounded-[var(--radius-sm)] p-2 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+            className: "rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
             children: /* @__PURE__ */ jsx2(RefreshCw, { className: "h-4 w-4" })
           }
         ),
@@ -576,12 +575,12 @@ function DirectoryPane({
             type: "button",
             "aria-label": "Upload files",
             onClick: onUpload,
-            className: "rounded-[var(--radius-sm)] p-2 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+            className: "rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
             children: /* @__PURE__ */ jsx2(Upload, { className: "h-4 w-4" })
           }
         )
       ] }),
-      footer: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-xs text-[var(--text-muted)]", children: [
+      footer: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsxs2("span", { children: [
           counts.files,
           " files"
@@ -599,7 +598,7 @@ function DirectoryPane({
           description: "Try a different search or clear the current filter."
         }
       ),
-      children: filteredRoot ? /* @__PURE__ */ jsx2("div", { className: "p-3", children: /* @__PURE__ */ jsx2(
+      children: filteredRoot ? /* @__PURE__ */ jsx2("div", { className: "py-2", children: /* @__PURE__ */ jsx2(
         FileTree,
         {
           root: filteredRoot,
@@ -617,11 +616,11 @@ function DirectoryPane({
 import { Loader2, AlertCircle, CheckCircle, Wifi } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var BANNER_STYLES = {
-  provisioning: { bg: "bg-[var(--brand-cool)]/5", border: "border-[var(--brand-cool)]/20", icon: Loader2 },
+  provisioning: { bg: "bg-primary/5", border: "border-primary/20", icon: Loader2 },
   connecting: { bg: "bg-[var(--code-number)]/5", border: "border-[var(--code-number)]/20", icon: Wifi },
   error: { bg: "bg-[var(--code-error)]/5", border: "border-[var(--code-error)]/20", icon: AlertCircle },
   success: { bg: "bg-[var(--code-success)]/5", border: "border-[var(--code-success)]/20", icon: CheckCircle },
-  info: { bg: "bg-[var(--bg-elevated)]", border: "border-[var(--border-default)]", icon: AlertCircle }
+  info: { bg: "bg-muted/50", border: "border-border", icon: AlertCircle }
 };
 function StatusBanner({ type, message, detail, onDismiss, className }) {
   const style = BANNER_STYLES[type];
@@ -629,9 +628,9 @@ function StatusBanner({ type, message, detail, onDismiss, className }) {
   const isAnimated = type === "provisioning" || type === "connecting";
   return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-3 px-4 py-2 border-b text-sm", style.bg, style.border, className), children: [
     /* @__PURE__ */ jsx3(Icon, { className: cn("h-4 w-4 shrink-0", isAnimated && "animate-spin") }),
-    /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-secondary)]", children: message }),
-    detail && /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-muted)] text-xs", children: detail }),
-    onDismiss && /* @__PURE__ */ jsx3("button", { onClick: onDismiss, className: "ml-auto text-[var(--text-muted)] hover:text-[var(--text-secondary)] text-xs", children: "Dismiss" })
+    /* @__PURE__ */ jsx3("span", { className: "text-foreground", children: message }),
+    detail && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground text-xs", children: detail }),
+    onDismiss && /* @__PURE__ */ jsx3("button", { onClick: onDismiss, className: "ml-auto text-muted-foreground hover:text-foreground text-xs", children: "Dismiss" })
   ] });
 }
 
@@ -658,7 +657,7 @@ function StatusBar({
     "div",
     {
       className: cn(
-        "flex items-center gap-3 px-4 py-1.5 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)] text-xs",
+        "flex items-center gap-3 px-3 py-1 border-t border-border bg-muted/20 text-[12px]",
         className
       ),
       children: [
@@ -666,27 +665,27 @@ function StatusBar({
           "button",
           {
             onClick: onModelClick,
-            className: "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] text-[var(--text-muted)] hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] transition-colors",
+            className: "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[2px] border border-border text-muted-foreground hover:border-primary/20 hover:text-foreground transition-colors",
             children: [
               /* @__PURE__ */ jsx4("span", { className: cn("w-1.5 h-1.5 rounded-full", statusInfo.color) }),
               modelLabel
             ]
           }
         ),
-        statusInfo.label && /* @__PURE__ */ jsx4("span", { className: "text-[var(--text-muted)]", children: statusInfo.label }),
+        statusInfo.label && /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: statusInfo.label }),
         contextBadges.map((badge) => /* @__PURE__ */ jsxs4(
           "span",
           {
-            className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[var(--radius-full)] border border-[var(--border-accent)] text-[var(--text-secondary)] bg-[var(--border-accent)]/5",
+            className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[2px] border border-border text-foreground bg-[var(--border-accent)]/5",
             children: [
               /* @__PURE__ */ jsx4(FileText, { className: "h-3 w-3" }),
               badge.label,
-              badge.count !== void 0 && /* @__PURE__ */ jsx4("span", { className: "text-[var(--text-muted)]", children: badge.count }),
+              badge.count !== void 0 && /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: badge.count }),
               onRemoveBadge && /* @__PURE__ */ jsx4(
                 "button",
                 {
                   onClick: () => onRemoveBadge(badge.id),
-                  className: "hover:text-[var(--text-primary)] transition-colors",
+                  className: "hover:text-foreground transition-colors",
                   children: /* @__PURE__ */ jsx4(X2, { className: "h-2.5 w-2.5" })
                 }
               )
@@ -695,7 +694,7 @@ function StatusBar({
           badge.id
         )),
         /* @__PURE__ */ jsx4("div", { className: "flex-1" }),
-        credits !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1 text-[var(--text-muted)]", children: [
+        credits !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1 text-muted-foreground", children: [
           /* @__PURE__ */ jsx4(Zap, { className: "h-3 w-3" }),
           credits.toLocaleString(),
           " credits"
@@ -711,9 +710,9 @@ import { Terminal as TerminalIcon, ChevronDown, ChevronUp, X as X3 } from "lucid
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var LINE_COLORS = {
   command: "text-[var(--code-function)]",
-  stdout: "text-[var(--text-secondary)]",
+  stdout: "text-foreground",
   stderr: "text-[var(--code-error)]",
-  system: "text-[var(--text-muted)]"
+  system: "text-muted-foreground"
 };
 var LINE_PREFIXES = {
   command: "$ ",
@@ -736,18 +735,18 @@ function TerminalPanel({
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [lines, isCollapsed]);
-  return /* @__PURE__ */ jsxs5("div", { className: cn("border-t border-[var(--border-subtle)] bg-[var(--bg-card)]", className), children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("border-t border-border bg-card", className), children: [
     /* @__PURE__ */ jsxs5(
       "button",
       {
         onClick: onToggle,
-        className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+        className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors",
         children: [
           /* @__PURE__ */ jsx5(TerminalIcon, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx5("span", { className: "font-medium", children: title }),
-          lines.length > 0 && /* @__PURE__ */ jsx5("span", { className: "px-1.5 py-0.5 rounded-[var(--radius-full)] bg-[var(--bg-input)] text-[10px] tabular-nums", children: lines.length }),
+          lines.length > 0 && /* @__PURE__ */ jsx5("span", { className: "px-1.5 py-0.5 rounded-full bg-muted text-[10px] tabular-nums", children: lines.length }),
           /* @__PURE__ */ jsx5("div", { className: "flex-1" }),
-          onClose && /* @__PURE__ */ jsx5(X3, { className: "h-3 w-3 hover:text-[var(--text-primary)]", onClick: (e) => {
+          onClose && /* @__PURE__ */ jsx5(X3, { className: "h-3 w-3 hover:text-foreground", onClick: (e) => {
             e.stopPropagation();
             onClose();
           } }),
@@ -759,14 +758,14 @@ function TerminalPanel({
       "div",
       {
         ref: scrollRef,
-        className: "overflow-auto px-3 pb-2 font-[var(--font-mono)] text-xs leading-[1.6]",
+        className: "overflow-auto px-3 pb-2 font-mono text-xs leading-[1.6]",
         style: { maxHeight },
         children: [
           lines.map((line) => /* @__PURE__ */ jsxs5("div", { className: cn("whitespace-pre-wrap", LINE_COLORS[line.type]), children: [
-            /* @__PURE__ */ jsx5("span", { className: "text-[var(--text-muted)] select-none", children: LINE_PREFIXES[line.type] }),
+            /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground select-none", children: LINE_PREFIXES[line.type] }),
             line.text
           ] }, line.id)),
-          lines.length === 0 && /* @__PURE__ */ jsx5("div", { className: "text-[var(--text-muted)] py-2", children: "No output yet" })
+          lines.length === 0 && /* @__PURE__ */ jsx5("div", { className: "text-muted-foreground py-2", children: "No output yet" })
         ]
       }
     )
@@ -792,47 +791,47 @@ function RuntimePane({
     "section",
     {
       className: cn(
-        "flex h-full min-h-0 flex-col overflow-hidden bg-[var(--bg-dark)] text-[var(--text-primary)]",
+        "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs6("header", { className: "border-b border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-4 py-3", children: [
-          /* @__PURE__ */ jsx6("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Sandbox" }),
-          /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }),
-          /* @__PURE__ */ jsx6("div", { className: "mt-1 text-xs text-[var(--text-muted)]", children: subtitle })
+        /* @__PURE__ */ jsxs6("header", { className: "border-b border-border bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-4 py-3", children: [
+          /* @__PURE__ */ jsx6("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: "Sandbox" }),
+          /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx6("div", { className: "mt-1 text-xs text-muted-foreground", children: subtitle })
         ] }),
         statusBanner && /* @__PURE__ */ jsx6(StatusBanner, { ...statusBanner }),
         statusBar && /* @__PURE__ */ jsx6(StatusBar, { ...statusBar }),
-        content ? /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-hidden", children: content }) : /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-[var(--border-subtle)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
-          /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: terminal ? /* @__PURE__ */ jsx6(
+        content ? /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-hidden", children: content }) : /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-border lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
+          /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-card", children: terminal ? /* @__PURE__ */ jsx6(
             TerminalPanel,
             {
               ...terminal,
               className: cn("border-t-0 bg-transparent", terminal.className)
             }
-          ) : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+          ) : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx6(TerminalSquare, { className: "h-4 w-4" }),
             "No terminal activity yet"
           ] }) }) }),
-          /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 gap-px bg-[var(--border-subtle)]", children: [
-            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: audit ? audit : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 gap-px bg-border", children: [
+            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-card", children: audit ? audit : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx6(ShieldCheck, { className: "h-4 w-4" }),
               "No audit data available"
             ] }) }) }),
-            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: inspector ? inspector : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-card", children: inspector ? inspector : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx6(Binary, { className: "h-4 w-4" }),
               "No runtime inspector attached"
             ] }) }) })
           ] })
         ] }),
-        footer && /* @__PURE__ */ jsx6("footer", { className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-card)] px-3 py-2", children: footer })
+        footer && /* @__PURE__ */ jsx6("footer", { className: "shrink-0 border-t border-border bg-card px-3 py-2", children: footer })
       ]
     }
   );
 }
 
 // src/workspace/session-sidebar.tsx
-import { useCallback, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { ArrowLeft, FolderTree, MessageSquareText, Plus, Search as Search2, Settings, Sparkles } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function statusDot(status) {
@@ -890,13 +889,13 @@ function sortItems(items, sessionStatusById) {
 function badgeTone(tone = "neutral") {
   switch (tone) {
     case "accent":
-      return "border-primary/30 bg-primary/10 text-primary";
+      return "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary";
     case "success":
-      return "border-success/30 bg-success/10 text-success";
+      return "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]";
     case "warning":
-      return "border-warning/30 bg-warning/10 text-warning";
+      return "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]";
     case "danger":
-      return "border-destructive/30 bg-destructive/10 text-destructive";
+      return "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]";
     default:
       return "border-border bg-muted text-muted-foreground";
   }
@@ -906,7 +905,7 @@ function navigateToHref(href) {
   window.location.assign(href);
 }
 function useResizable(defaultWidth, min, max, onChange) {
-  const [width, setWidth] = useState4(defaultWidth);
+  const [width, setWidth] = useState3(defaultWidth);
   const dragging = useRef3(false);
   const startX = useRef3(0);
   const startW = useRef3(0);
@@ -953,8 +952,8 @@ function SessionSidebar({
   onWidthChange,
   renderItemActions
 }) {
-  const [query, setQuery] = useState4("");
-  const [activeFilterId, setActiveFilterId] = useState4(defaultFilterId ?? filters[0]?.id ?? "all");
+  const [query, setQuery] = useState3("");
+  const [activeFilterId, setActiveFilterId] = useState3(defaultFilterId ?? filters[0]?.id ?? "all");
   const activeSessions = useNavbarSessions(projectId);
   const sessionsById = useMemo3(
     () => new Map(activeSessions.map((session) => [session.sessionId, session])),
@@ -996,21 +995,21 @@ function SessionSidebar({
         /* @__PURE__ */ jsxs7("div", { className: "border-b border-border px-3 py-2.5", children: [
           /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx7("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3 w-3" }) }),
+              /* @__PURE__ */ jsx7("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3 w-3" }) }),
               /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx7("div", { className: "truncate text-xs font-semibold text-foreground", children: title }),
                 subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-[10px] text-muted-foreground", children: subtitle })
               ] })
             ] }),
             /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-              runningCount > 0 && /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-primary/10 px-1.5 py-px text-[10px] font-medium text-primary", children: runningCount }),
+              runningCount > 0 && /* @__PURE__ */ jsx7("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-1.5 py-px text-[10px] font-medium text-primary", children: runningCount }),
               onCreate && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
                   onClick: onCreate,
                   title: createLabel,
-                  className: "flex h-6 w-6 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+                  className: "flex h-6 w-6 items-center justify-center rounded-[var(--radius-sm)] border border-border text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
                   children: /* @__PURE__ */ jsx7(Plus, { className: "h-3 w-3" })
                 }
               )
@@ -1025,7 +1024,7 @@ function SessionSidebar({
                 onChange: (event) => setQuery(event.target.value),
                 placeholder: searchPlaceholder,
                 "aria-label": searchPlaceholder,
-                className: "h-7 w-full rounded-md border border-border bg-background pl-7 pr-2 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                className: "h-7 w-full rounded-[var(--radius-sm)] border border-border bg-muted pl-7 pr-2 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
               }
             )
           ] }),
@@ -1038,7 +1037,7 @@ function SessionSidebar({
                 onClick: () => setActiveFilterId(filter.id),
                 className: cn(
                   "inline-flex items-center gap-1 rounded-full border px-2 py-px text-[10px] font-medium transition-colors",
-                  isSelected ? "border-primary/30 bg-primary/10 text-primary" : "border-border text-muted-foreground hover:text-foreground"
+                  isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-border text-muted-foreground hover:text-foreground"
                 ),
                 children: [
                   /* @__PURE__ */ jsx7("span", { children: filter.label }),
@@ -1049,7 +1048,7 @@ function SessionSidebar({
             );
           }) })
         ] }),
-        /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-1.5 py-1.5", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-px", children: visibleItems.map((item) => {
+        /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-1.5 py-1.5", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-[var(--radius-lg)] border border-dashed border-border px-3 py-3 text-xs text-muted-foreground", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-px", children: visibleItems.map((item) => {
           const session = sessionsById.get(item.id) ?? null;
           const isActive = currentItemId === item.id;
           const status = session?.status ?? item.status;
@@ -1061,8 +1060,8 @@ function SessionSidebar({
             "div",
             {
               className: cn(
-                "group relative flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors",
-                isActive ? "bg-accent text-accent-foreground shadow-[inset_2px_0_0_hsl(var(--primary))]" : "text-foreground hover:bg-accent/50"
+                "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 transition-colors",
+                isActive ? "bg-[var(--accent-surface-soft)] text-foreground shadow-[inset_2px_0_0_hsl(var(--primary))]" : "text-muted-foreground hover:bg-muted"
               ),
               children: [
                 /* @__PURE__ */ jsxs7(
@@ -1083,7 +1082,7 @@ function SessionSidebar({
                       /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
                         /* @__PURE__ */ jsx7("div", { className: cn(
                           "truncate text-xs",
-                          isActive ? "font-semibold" : "font-medium"
+                          isActive ? "font-semibold text-foreground" : "font-medium"
                         ), children: item.title }),
                         item.subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-[10px] leading-tight text-muted-foreground", children: item.subtitle })
                       ] })
@@ -1130,7 +1129,7 @@ function SessionSidebar({
                 }
                 navigateToHref(link.href);
               },
-              className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+              className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
               children: [
                 /* @__PURE__ */ jsx7(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
                 /* @__PURE__ */ jsx7("span", { className: "truncate", children: link.label })
@@ -1142,7 +1141,7 @@ function SessionSidebar({
         resizable && /* @__PURE__ */ jsx7(
           "div",
           {
-            className: "absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors",
+            className: "absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-[var(--accent-surface-soft)] active:bg-[var(--border-accent)] transition-colors",
             onPointerDown: resize.onPointerDown,
             onPointerMove: resize.onPointerMove,
             onPointerUp: resize.onPointerUp,
@@ -1159,13 +1158,13 @@ import { Activity, AlertCircle as AlertCircle2, LoaderCircle, MessageSquareText
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function SessionStatusDot({ session }) {
   if (session.status === "error") {
-    return /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-3 w-3 text-destructive" });
+    return /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-3 w-3 text-[var(--surface-danger-text)]" });
   }
   if (session.status === "running") {
     return /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-3 w-3 animate-spin text-primary" });
   }
   if (session.status === "attention-needed") {
-    return /* @__PURE__ */ jsx8(Activity, { className: "h-3 w-3 text-warning" });
+    return /* @__PURE__ */ jsx8(Activity, { className: "h-3 w-3 text-[var(--surface-warning-text)]" });
   }
   return /* @__PURE__ */ jsx8("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/40" });
 }
@@ -1187,7 +1186,7 @@ function SessionActivityMonitor({
   const sessionLookup = Object.keys(sessionsById).length > 0 ? sessionsById : Object.fromEntries(trackedSessions.map((session) => [session.sessionId, session]));
   if (projectActivity.length === 0) {
     if (compact) return null;
-    return /* @__PURE__ */ jsx8("div", { className: cn("rounded-md border border-dashed border-border bg-muted px-3 py-2.5 text-xs text-muted-foreground", className), children: emptyMessage });
+    return /* @__PURE__ */ jsx8("div", { className: cn("rounded-[var(--radius-lg)] border border-border bg-muted px-3 py-2.5 text-xs text-muted-foreground", className), children: emptyMessage });
   }
   return /* @__PURE__ */ jsxs8("div", { className: cn("space-y-1.5", className), children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
@@ -1195,14 +1194,14 @@ function SessionActivityMonitor({
         /* @__PURE__ */ jsx8(Activity, { className: "h-3 w-3" }),
         "Active"
       ] }),
-      totalRunning > 0 && /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-primary/10 px-1.5 py-px text-[10px] font-medium text-primary", children: totalRunning })
+      totalRunning > 0 && /* @__PURE__ */ jsx8("span", { className: "rounded-full border border-primary/30 bg-[var(--accent-surface-soft)] px-1.5 py-px text-[10px] font-medium text-primary", children: totalRunning })
     ] }),
     /* @__PURE__ */ jsx8("div", { className: "space-y-1", children: projectActivity.map((project) => {
       const label = resolveProjectLabel?.(project.projectId, project.projectLabel) ?? project.projectLabel ?? String(project.projectId);
       return /* @__PURE__ */ jsxs8(
         "div",
         {
-          className: "rounded-md border border-border bg-muted",
+          className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card",
           children: [
             /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-2 px-2.5 py-1.5", children: [
               /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
@@ -1218,7 +1217,7 @@ function SessionActivityMonitor({
                 " live"
               ] })
             ] }),
-            !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx8("div", { className: "border-t border-border px-1 py-0.5", children: project.runningSessionIds.map((sessionId) => {
+            !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx8("div", { className: "border-t border-border bg-muted px-1 py-0.5", children: project.runningSessionIds.map((sessionId) => {
               const session = sessionLookup[sessionId];
               if (!session) return null;
               return /* @__PURE__ */ jsxs8(
@@ -1232,10 +1231,10 @@ function SessionActivityMonitor({
                     }
                     navigateToSession(session);
                   },
-                  className: "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left transition-colors hover:bg-accent",
+                  className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 text-left transition-colors hover:bg-[var(--accent-surface-soft)]",
                   children: [
                     /* @__PURE__ */ jsx8(SessionStatusDot, { session }),
-                    /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate text-xs text-foreground", children: session.title ?? "Untitled" }),
+                    /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate text-xs text-muted-foreground", children: session.title ?? "Untitled" }),
                     /* @__PURE__ */ jsx8(MessageSquareText2, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" })
                   ]
                 },
@@ -1251,7 +1250,7 @@ function SessionActivityMonitor({
 }
 
 // src/workspace/sandbox-workbench.tsx
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
 import {
   Bot,
   Boxes,
@@ -1286,15 +1285,15 @@ function ArtifactTabs({
   onClose
 }) {
   if (artifacts.length === 0) return null;
-  return /* @__PURE__ */ jsx9("div", { className: "flex items-center overflow-x-auto border-b border-[var(--border-subtle)] bg-[var(--bg-dark)]", children: artifacts.map((artifact) => {
+  return /* @__PURE__ */ jsx9("div", { className: "flex items-center overflow-x-auto border-b border-border bg-muted/20", children: artifacts.map((artifact) => {
     const Icon = getArtifactTabIcon(artifact.kind);
     const isActive = artifact.id === activeArtifactId;
     return /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn(
-          "group flex shrink-0 items-center border-r border-[var(--border-subtle)]",
-          isActive ? "border-b-2 border-b-[var(--brand-cool)] bg-[var(--bg-card)] text-[var(--text-primary)]" : "text-[var(--text-muted)] hover:bg-[var(--bg-elevated)]"
+          "group flex shrink-0 items-center border-r border-border bg-background relative",
+          isActive ? "text-foreground after:absolute after:top-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary" : "text-muted-foreground hover:bg-muted/50 cursor-pointer"
         ),
         children: [
           /* @__PURE__ */ jsxs9(
@@ -1302,7 +1301,7 @@ function ArtifactTabs({
             {
               type: "button",
               onClick: () => onSelect(artifact.id),
-              className: "flex min-w-0 items-center gap-2 px-3 py-2 text-xs transition-colors hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand-cool)]/60",
+              className: "flex min-w-0 items-center gap-2 px-3 py-2 text-[12px] uppercase tracking-wider font-medium transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/60",
               children: [
                 /* @__PURE__ */ jsx9(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
                 /* @__PURE__ */ jsx9("span", { className: "max-w-[14rem] truncate", children: artifactTabLabel(artifact) })
@@ -1315,7 +1314,7 @@ function ArtifactTabs({
               type: "button",
               "aria-label": `Close ${artifactTabLabel(artifact)}`,
               onClick: () => onClose(artifact.id),
-              className: "mr-1 rounded p-1 opacity-0 transition-opacity hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60 group-hover:opacity-100",
+              className: "mr-1 rounded-[2px] p-1 opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60 group-hover:opacity-100",
               children: /* @__PURE__ */ jsx9(X4, { className: "h-3 w-3" })
             }
           )
@@ -1397,17 +1396,17 @@ function regionHeader(sections, fallback) {
   }
   switch (sections[0]?.key) {
     case "directory":
-      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
         /* @__PURE__ */ jsx9(FolderTree2, { className: "h-3.5 w-3.5" }),
         "Directory"
       ] });
     case "artifacts":
-      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
         /* @__PURE__ */ jsx9(LayoutPanelTop, { className: "h-3.5 w-3.5" }),
         "Artifacts"
       ] });
     case "runtime":
-      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
         /* @__PURE__ */ jsx9(Bot, { className: "h-3.5 w-3.5" }),
         "Runtime"
       ] });
@@ -1444,7 +1443,7 @@ function SandboxWorkbench({
   emptyArtifactState,
   className
 }) {
-  const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState5(
+  const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState4(
     activeArtifactId ?? artifacts[0]?.id
   );
   useEffect3(() => {
@@ -1466,11 +1465,11 @@ function SandboxWorkbench({
     }
     onArtifactChange?.(artifactId);
   };
-  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[var(--depth-3)] px-4 py-3.5", children: [
+  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-border bg-muted/50 px-4 py-3.5", children: [
     /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx9("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--brand-cool)]", children: "Tangle Sandbox" }),
-      /* @__PURE__ */ jsx9("div", { className: "truncate text-[17px] font-semibold tracking-[0.01em] text-[var(--text-primary)]", children: title }),
-      subtitle && /* @__PURE__ */ jsx9("div", { className: "truncate text-sm text-[var(--text-muted)]", children: subtitle })
+      /* @__PURE__ */ jsx9("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-primary", children: "Tangle Sandbox" }),
+      /* @__PURE__ */ jsx9("div", { className: "truncate text-[17px] font-semibold tracking-[0.01em] text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsx9("div", { className: "truncate text-sm text-muted-foreground", children: subtitle })
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2", children: [
       status,
@@ -1489,7 +1488,7 @@ function SandboxWorkbench({
       meta: session.meta,
       headerActions: session.headerActions,
       className: "h-full",
-      contentClassName: "bg-[var(--bg-dark)]",
+      contentClassName: "bg-background",
       children: /* @__PURE__ */ jsx9(
         ChatContainer,
         {
@@ -1500,7 +1499,7 @@ function SandboxWorkbench({
       )
     }
   );
-  const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-[var(--bg-dark)]", children: [
+  const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-background", children: [
     /* @__PURE__ */ jsx9(
       ArtifactTabs,
       {
@@ -1510,7 +1509,7 @@ function SandboxWorkbench({
         onClose: onArtifactClose
       }
     ),
-    /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto bg-[var(--bg-dark)]", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto bg-background", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
       EmptyState,
       {
         icon: /* @__PURE__ */ jsx9(Boxes, { className: "h-8 w-8" }),
@@ -1548,7 +1547,7 @@ function SandboxWorkbench({
   const left = renderRegion(regionSections.left, "left");
   const right = renderRegion(regionSections.right, "right");
   const bottom = renderRegion(regionSections.bottom, "bottom");
-  const genericPanelsHeader = /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: "Workspace Panels" });
+  const genericPanelsHeader = /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: "Workspace Panels" });
   return /* @__PURE__ */ jsx9(
     WorkspaceLayout,
     {
@@ -1560,7 +1559,7 @@ function SandboxWorkbench({
       rightHeader: right ? regionHeader(regionSections.right, genericPanelsHeader) : void 0,
       bottom,
       bottomHeader: bottom ? regionHeader(regionSections.bottom, genericPanelsHeader) : void 0,
-      theme: layout?.theme ?? "operator",
+      theme: layout?.theme,
       density: layout?.density ?? "comfortable",
       persistenceKey: layout?.persistenceKey,
       defaultLeftOpen: layout?.defaultLeftOpen ?? Boolean(left),
@@ -1586,7 +1585,7 @@ function AgentWorkbench(props) {
         ...props.session,
         eyebrow: props.session.eyebrow ?? "Agent Session",
         title: props.session.title ?? /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx9(Bot, { className: "h-4 w-4 text-[var(--brand-cool)]" }),
+          /* @__PURE__ */ jsx9(Bot, { className: "h-4 w-4 text-primary" }),
           "Execution timeline"
         ] })
       }
@@ -1595,23 +1594,23 @@ function AgentWorkbench(props) {
 }
 
 // src/workspace/audit-results.tsx
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "react";
 import { CheckCircle as CheckCircle2, XCircle, ChevronRight, Shield } from "lucide-react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function AuditResults({ forms, crossFormChecks = [], overallScore, className }) {
   const totalPassed = forms.reduce((s, f) => s + f.passed, 0);
   const totalChecks = forms.reduce((s, f) => s + f.passed + f.failed, 0);
   return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-3 p-3", className), children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--bg-input)] border border-[var(--border-subtle)]", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] bg-background border border-border", children: [
       /* @__PURE__ */ jsx10(Shield, { className: cn("h-5 w-5", totalChecks === totalPassed ? "text-[var(--code-success)]" : "text-[var(--code-number)]") }),
       /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsxs10("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "text-sm font-semibold text-foreground", children: [
           totalPassed,
           "/",
           totalChecks,
           " checks passed"
         ] }),
-        overallScore !== void 0 && /* @__PURE__ */ jsxs10("div", { className: "text-xs text-[var(--text-muted)]", children: [
+        overallScore !== void 0 && /* @__PURE__ */ jsxs10("div", { className: "text-xs text-muted-foreground", children: [
           "Score: ",
           overallScore,
           "/100"
@@ -1620,40 +1619,40 @@ function AuditResults({ forms, crossFormChecks = [], overallScore, className })
     ] }),
     forms.map((form) => /* @__PURE__ */ jsx10(FormAuditCard, { form }, form.formId)),
     crossFormChecks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
-      /* @__PURE__ */ jsx10("div", { className: "text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-1", children: "Cross-Form Checks" }),
+      /* @__PURE__ */ jsx10("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1", children: "Cross-Form Checks" }),
       crossFormChecks.map((check, i) => /* @__PURE__ */ jsx10(CheckRow, { check }, i))
     ] })
   ] });
 }
 function FormAuditCard({ form }) {
-  const [expanded, setExpanded] = useState6(form.failed > 0);
+  const [expanded, setExpanded] = useState5(form.failed > 0);
   const allPassed = form.failed === 0 && form.found;
-  return /* @__PURE__ */ jsxs10("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "rounded-[var(--radius-md)] border border-border overflow-hidden", children: [
     /* @__PURE__ */ jsxs10(
       "button",
       {
         onClick: () => setExpanded(!expanded),
-        className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--bg-hover)] transition-colors",
+        className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-accent transition-colors",
         children: [
           allPassed ? /* @__PURE__ */ jsx10(CheckCircle2, { className: "h-4 w-4 text-[var(--code-success)] shrink-0" }) : !form.found ? /* @__PURE__ */ jsx10(XCircle, { className: "h-4 w-4 text-[var(--code-error)] shrink-0" }) : /* @__PURE__ */ jsx10(XCircle, { className: "h-4 w-4 text-[var(--code-number)] shrink-0" }),
-          /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium text-[var(--text-primary)] flex-1", children: form.formName || form.formId }),
-          /* @__PURE__ */ jsxs10("span", { className: cn("text-xs tabular-nums", allPassed ? "text-[var(--code-success)]" : "text-[var(--text-muted)]"), children: [
+          /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium text-foreground flex-1", children: form.formName || form.formId }),
+          /* @__PURE__ */ jsxs10("span", { className: cn("text-xs tabular-nums", allPassed ? "text-[var(--code-success)]" : "text-muted-foreground"), children: [
             form.passed,
             "/",
             form.passed + form.failed
           ] }),
-          /* @__PURE__ */ jsx10(ChevronRight, { className: cn("h-3 w-3 text-[var(--text-muted)] transition-transform", expanded && "rotate-90") })
+          /* @__PURE__ */ jsx10(ChevronRight, { className: cn("h-3 w-3 text-muted-foreground transition-transform", expanded && "rotate-90") })
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsx10("div", { className: "border-t border-[var(--border-subtle)] px-3 py-1.5 space-y-0.5", children: form.checks.map((check, i) => /* @__PURE__ */ jsx10(CheckRow, { check }, i)) })
+    expanded && /* @__PURE__ */ jsx10("div", { className: "border-t border-border px-3 py-1.5 space-y-0.5", children: form.checks.map((check, i) => /* @__PURE__ */ jsx10(CheckRow, { check }, i)) })
   ] });
 }
 function CheckRow({ check }) {
   return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
     check.passed ? /* @__PURE__ */ jsx10(CheckCircle2, { className: "h-3 w-3 text-[var(--code-success)] shrink-0" }) : /* @__PURE__ */ jsx10(XCircle, { className: "h-3 w-3 text-[var(--code-error)] shrink-0" }),
-    /* @__PURE__ */ jsx10("span", { className: "text-[var(--text-secondary)] flex-1 truncate", children: check.label }),
-    /* @__PURE__ */ jsx10("span", { className: "text-[var(--text-muted)] tabular-nums shrink-0", children: check.passed ? String(check.actual ?? check.expected) : `${check.actual ?? "missing"} \u2260 ${check.expected}` })
+    /* @__PURE__ */ jsx10("span", { className: "text-foreground flex-1 truncate", children: check.label }),
+    /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground tabular-nums shrink-0", children: check.passed ? String(check.actual ?? check.expected) : `${check.actual ?? "missing"} \u2260 ${check.expected}` })
   ] });
 }