@tangle-network/sandbox-ui 0.4.0 → 0.5.0

package/dist/{chunk-72UEKFZ2.js → chunk-WC7QTWPN.js}

@@ -11,7 +11,7 @@ import {
   CodeBlock,
   CopyButton,
   Markdown
-} from "./chunk-LTFK464G.js";
+} from "./chunk-H5XYSFYE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -43,7 +43,7 @@ function PreviewCard({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 border-b border-[var(--border-subtle)] bg-[var(--bg-elevated)]/70 px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 border-b border-[var(--border-subtle)] bg-[var(--depth-1)] px-4 py-3", children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-[var(--border-accent)] bg-[var(--bg-section)] text-[var(--brand-cool)]", children: icon }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }),
@@ -64,7 +64,7 @@ function PreviewEmpty({
     "div",
     {
       className: cn(
-        "rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)]/60 px-3 py-4 text-sm text-[var(--text-muted)]",
+        "rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-4 text-sm text-[var(--text-muted)]",
         className
       ),
       children: label
@@ -72,10 +72,10 @@ function PreviewEmpty({
   );
 }
 function PreviewError({ error }) {
-  return /* @__PURE__ */ jsx("div", { className: "rounded-[var(--radius-md)] border border-red-500/30 bg-red-500/8 px-3 py-3 text-sm text-red-200", children: error });
+  return /* @__PURE__ */ jsx("div", { className: "rounded-[var(--radius-md)] border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-3 text-sm text-[var(--surface-danger-text)]", children: error });
 }
 function PreviewLoading({ label = "Running\u2026" }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)]/60 px-3 py-3 text-sm text-[var(--text-muted)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-3 text-sm text-[var(--text-muted)]", children: [
     /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-[var(--brand-cool)]" }),
     /* @__PURE__ */ jsx("span", { children: label })
   ] });
@@ -115,7 +115,7 @@ var CommandPreview = memo(({ part }) => {
         {
           className: cn(
             "inline-flex items-center rounded-full border px-2 py-0.5 font-[var(--font-mono)]",
-            isError ? "border-red-500/30 bg-red-500/10 text-red-200" : "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
+            isError ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]" : "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"
           ),
           children: [
             "exit ",
@@ -128,7 +128,7 @@ var CommandPreview = memo(({ part }) => {
           "button",
           {
             onClick: () => setExpanded((value) => !value),
-            className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)]/60 px-3 py-2 text-left transition-colors hover:border-[var(--border-accent-hover)] hover:bg-[var(--bg-hover)]/45",
+            className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-2 text-left transition-colors hover:border-[var(--border-accent-hover)] hover:bg-[var(--bg-hover)]/45",
             children: [
               /* @__PURE__ */ jsx2("code", { className: "min-w-0 flex-1 truncate text-xs font-[var(--font-mono)] text-[var(--text-secondary)]", children: command }),
               lineCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: [
@@ -142,7 +142,7 @@ var CommandPreview = memo(({ part }) => {
         ),
         part.state.status === "running" ? /* @__PURE__ */ jsx2(PreviewLoading, {}) : null,
         errorText ? /* @__PURE__ */ jsx2(PreviewError, { error: errorText }) : null,
-        expanded && output ? /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)]/55", children: [
+        expanded && output ? /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)]", children: [
           output.stdout ? /* @__PURE__ */ jsx2("pre", { className: "max-h-80 overflow-auto px-3 py-3 text-xs font-[var(--font-mono)] whitespace-pre-wrap break-all text-[var(--text-secondary)]", children: output.stdout }) : null,
           output.stderr ? /* @__PURE__ */ jsx2("pre", { className: "max-h-80 overflow-auto border-t border-[var(--border-subtle)] px-3 py-3 text-xs font-[var(--font-mono)] whitespace-pre-wrap break-all text-red-200", children: output.stderr }) : null
         ] }) : null
@@ -539,7 +539,7 @@ var QuestionPreview = memo6(({ part }) => {
         questions.map((question, index) => /* @__PURE__ */ jsxs7(
           "div",
           {
-            className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)]/55 px-3 py-3",
+            className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-3",
             children: [
               /* @__PURE__ */ jsxs7("div", { className: "text-xs font-semibold uppercase tracking-[0.08em] text-[var(--text-muted)]", children: [
                 "Question ",
@@ -623,6 +623,35 @@ import {
   FileText as FileText2
 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var EXT_LANG = {
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  rs: "rust",
+  py: "python",
+  go: "go",
+  rb: "ruby",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  md: "markdown",
+  css: "css",
+  scss: "scss",
+  html: "html",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  sql: "sql",
+  sol: "solidity",
+  proto: "protobuf"
+};
+function langFromPath(path) {
+  if (!path) return void 0;
+  const ext = path.split(".").pop()?.toLowerCase();
+  return ext ? EXT_LANG[ext] : void 0;
+}
 function formatOutput(value) {
   if (value == null) return "";
   if (typeof value === "string") return value;
@@ -658,7 +687,7 @@ var ExpandedToolDetail = memo8(({ part }) => {
   }
   if (meta.displayVariant === "read-file") {
     return /* @__PURE__ */ jsxs9("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-[var(--shadow-card)]", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 border-b border-[var(--border-subtle)] bg-[var(--bg-elevated)]/70 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 border-b border-[var(--border-subtle)] bg-[var(--depth-1)] px-4 py-3", children: [
         /* @__PURE__ */ jsx9("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-[var(--border-accent)] bg-[var(--bg-section)] text-[var(--brand-cool)]", children: /* @__PURE__ */ jsx9(FileText2, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx9("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Read file" }),
@@ -666,8 +695,8 @@ var ExpandedToolDetail = memo8(({ part }) => {
         ] })
       ] }),
       /* @__PURE__ */ jsxs9("div", { className: "space-y-3 px-4 py-4", children: [
-        typeof output === "string" ? /* @__PURE__ */ jsx9(CodeBlock, { code: output, language: "text", className: "rounded-[var(--radius-md)]" }) : /* @__PURE__ */ jsx9("div", { className: "rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)]/60 px-3 py-4 text-sm text-[var(--text-muted)]", children: "No readable file content was returned." }),
-        error ? /* @__PURE__ */ jsx9("div", { className: "rounded-[var(--radius-md)] border border-red-500/30 bg-red-500/8 px-3 py-3 text-sm text-red-200", children: error }) : null
+        typeof output === "string" ? /* @__PURE__ */ jsx9(CodeBlock, { code: output, language: langFromPath(meta.targetPath) ?? "text", className: "rounded-[var(--radius-md)]" }) : /* @__PURE__ */ jsx9("div", { className: "rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-4 text-sm text-[var(--text-muted)]", children: "No readable file content was returned." }),
+        error ? /* @__PURE__ */ jsx9("div", { className: "rounded-[var(--radius-md)] border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-3 text-sm text-[var(--surface-danger-text)]", children: error }) : null
       ] })
     ] });
   }
@@ -675,14 +704,14 @@ var ExpandedToolDetail = memo8(({ part }) => {
   const outputStr = formatOutput(output);
   return /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
     inputStr && /* @__PURE__ */ jsxs9("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-elevated)]/70 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--depth-1)] px-3 py-2", children: [
         /* @__PURE__ */ jsx9(ArrowRight, { className: "h-3 w-3 text-[var(--brand-cool)]" }),
         /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium uppercase tracking-[0.08em] text-[var(--text-muted)]", children: "Input" })
       ] }),
       /* @__PURE__ */ jsx9(CodeBlock, { code: inputStr, language: "json", className: "rounded-none border-0" })
     ] }),
     status === "completed" && outputStr && /* @__PURE__ */ jsxs9("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-elevated)]/70 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--depth-1)] px-3 py-2", children: [
         /* @__PURE__ */ jsx9(ArrowLeft, { className: "h-3 w-3 text-[var(--brand-cool)]" }),
         /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium uppercase tracking-[0.08em] text-[var(--text-muted)]", children: "Output" })
       ] }),
@@ -695,14 +724,14 @@ var ExpandedToolDetail = memo8(({ part }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsxs9("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-red-500/30", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-red-500/20 bg-red-500/10 px-3 py-2", children: [
-        /* @__PURE__ */ jsx9(AlertCircle, { className: "h-3 w-3 text-red-300" }),
-        /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium uppercase tracking-[0.08em] text-red-200", children: "Error" })
+    error && /* @__PURE__ */ jsxs9("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2", children: [
+        /* @__PURE__ */ jsx9(AlertCircle, { className: "h-3 w-3 text-[var(--surface-danger-text)]" }),
+        /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]", children: "Error" })
       ] }),
-      /* @__PURE__ */ jsx9("pre", { className: "bg-red-500/6 p-3 text-xs font-[var(--font-mono)] whitespace-pre-wrap break-all text-red-100", children: error })
+      /* @__PURE__ */ jsx9("pre", { className: "bg-[var(--surface-danger-bg)] p-3 text-xs font-[var(--font-mono)] whitespace-pre-wrap break-all text-[var(--surface-danger-text)]", children: error })
     ] }),
-    (status === "pending" || status === "running") && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)]/60 px-3 py-3 text-xs text-[var(--text-muted)]", children: [
+    (status === "pending" || status === "running") && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-3 text-xs text-[var(--text-muted)]", children: [
       /* @__PURE__ */ jsx9(Loader23, { className: cn("h-3 w-3 animate-spin text-[var(--brand-cool)]") }),
       "Running\u2026"
     ] })
@@ -793,24 +822,18 @@ var InlineToolItem = memo9(
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-3", children: [
-                /* @__PURE__ */ jsx11(
-                  "div",
-                  {
-                    className: cn(
-                      "flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
-                      isRunning && "border-[var(--border-accent)] bg-[var(--brand-cool)]/12 text-[var(--brand-cool)]",
-                      isComplete && "border-emerald-500/30 bg-emerald-500/12 text-emerald-200",
-                      isError && "border-red-500/30 bg-red-500/10 text-red-200",
-                      !isRunning && !isComplete && !isError && "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-muted)]"
-                    ),
-                    children: isRunning ? /* @__PURE__ */ jsx11(Loader24, { className: "h-4 w-4 animate-spin" }) : isComplete ? /* @__PURE__ */ jsx11(CheckCircle2, { className: "h-4 w-4" }) : isError ? /* @__PURE__ */ jsx11(AlertCircle2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(DefaultIcon, { className: "h-4 w-4" })
-                  }
-                ),
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2.5 px-3 py-2", children: [
+                /* @__PURE__ */ jsx11("div", { className: cn(
+                  "shrink-0",
+                  isRunning && "text-[var(--brand-cool)]",
+                  isComplete && "text-[var(--surface-success-text)]",
+                  isError && "text-[var(--surface-danger-text)]",
+                  !isRunning && !isComplete && !isError && "text-[var(--text-muted)]"
+                ), children: isRunning ? /* @__PURE__ */ jsx11(Loader24, { className: "h-3.5 w-3.5 animate-spin" }) : isComplete ? /* @__PURE__ */ jsx11(CheckCircle2, { className: "h-3.5 w-3.5" }) : isError ? /* @__PURE__ */ jsx11(AlertCircle2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx11(DefaultIcon, { className: "h-3.5 w-3.5" }) }),
                 /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx11("span", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: meta.title }),
-                    isError ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-red-200", children: "Failed" }) : null,
+                    isError ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--surface-danger-text)]", children: "Failed" }) : null,
                     isRunning ? /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--brand-cool)]/10 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--brand-cool)]", children: "Running" }) : null
                   ] }),
                   meta.description ? /* @__PURE__ */ jsx11("div", { className: "mt-1 truncate text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: meta.description }) : null
@@ -944,8 +967,8 @@ import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_BRANDING = {
   label: "Agent",
   accentClass: "text-[var(--brand-cool)]",
-  bgClass: "bg-[var(--brand-cool)]/8",
-  containerBgClass: "bg-[var(--bg-section)]/60",
+  bgClass: "bg-[var(--accent-surface-soft)]",
+  containerBgClass: "bg-[var(--bg-section)]",
   borderClass: "border-[var(--border-accent)]",
   iconClass: "",
   textClass: "text-[var(--brand-cool)]"
@@ -1054,8 +1077,8 @@ var RunGroup = memo11(
           "button",
           {
             className: cn(
-              "w-full rounded-[calc(var(--radius-xl)+2px)] border px-4 py-3.5 text-left transition-colors shadow-[var(--shadow-card)] backdrop-blur-sm",
-              "bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.03),transparent_30%),var(--bg-card)] hover:bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.16),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent_30%),var(--bg-card)]",
+              "w-full rounded-[var(--radius-xl)] border px-4 py-3.5 text-left transition-colors",
+              "bg-[var(--depth-2)] hover:bg-[var(--depth-3)]",
               collapsed ? branding.borderClass : "border-[var(--border-subtle)]",
               branding.bgClass
             ),
@@ -1064,7 +1087,7 @@ var RunGroup = memo11(
                 "div",
                 {
                   className: cn(
-                    "flex h-11 w-11 shrink-0 items-center justify-center rounded-[calc(var(--radius-lg)+2px)] border bg-[linear-gradient(135deg,rgba(82,164,255,0.22),rgba(82,164,255,0.06))] shadow-[var(--shadow-accent)]",
+                    "flex h-11 w-11 shrink-0 items-center justify-center rounded-[calc(var(--radius-lg)+2px)] border bg-[var(--accent-surface-soft)] shadow-[var(--shadow-accent)]",
                     branding.borderClass
                   ),
                   children: /* @__PURE__ */ jsx13(Bot2, { className: cn("h-4 w-4", branding.accentClass) })
@@ -1073,7 +1096,7 @@ var RunGroup = memo11(
               /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2", children: [
                   /* @__PURE__ */ jsx13("span", { className: cn("text-sm font-semibold tracking-[0.01em]", branding.textClass), children: branding.label }),
-                  isStreaming ? /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(82,164,255,0.22),rgba(82,164,255,0.08))] px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--brand-cool)]", children: [
+                  isStreaming ? /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--accent-text)]", children: [
                     /* @__PURE__ */ jsx13(Loader25, { className: "h-3 w-3 animate-spin" }),
                     "Running"
                   ] }) : /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-muted)]", children: [
@@ -1133,7 +1156,7 @@ var RunGroup = memo11(
               return /* @__PURE__ */ jsx13(
                 "div",
                 {
-                  className: "rounded-[calc(var(--radius-lg)+2px)] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.08),transparent_36%),linear-gradient(180deg,rgba(255,255,255,0.03),transparent_30%),var(--bg-card)] px-4 py-4",
+                  className: "rounded-[calc(var(--radius-lg)+2px)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-4",
                   children: /* @__PURE__ */ jsx13(Markdown, { children: part.text })
                 },
                 key

package/dist/{chunk-HYLTXGOI.js → chunk-WQH233GF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-LTFK464G.js";
+} from "./chunk-H5XYSFYE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -260,7 +260,7 @@ function CodePreview({ content, filename }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx2("table", { className: "w-full", children: /* @__PURE__ */ jsx2("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-[var(--bg-hover)]/50", children: [
+    /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx2("table", { className: "w-full", children: /* @__PURE__ */ jsx2("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-[var(--bg-hover)]", children: [
       /* @__PURE__ */ jsx2("td", { className: "text-right pr-4 pl-4 py-0 select-none text-[var(--text-muted)] text-xs font-[var(--font-mono)] w-10 align-top leading-[1.55]", children: i + 1 }),
       /* @__PURE__ */ jsx2("td", { className: "pr-4 py-0 font-[var(--font-mono)] text-[13px] text-[var(--text-secondary)] leading-[1.55] whitespace-pre", children: line || " " })
     ] }, i)) }) }) })
@@ -308,7 +308,7 @@ function CsvPreview({ content }) {
       },
       i
     )) }) }),
-    /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-[var(--border-subtle)] hover:bg-[var(--bg-hover)]/50", children: row.map((cell, j) => /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-[var(--border-subtle)] hover:bg-[var(--bg-hover)]", children: row.map((cell, j) => /* @__PURE__ */ jsx2(
       "td",
       {
         className: "px-3 py-1.5 text-[var(--text-secondary)] font-[var(--font-mono)] text-xs whitespace-nowrap",
@@ -484,7 +484,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-5TN2VWGZ.js");
+  const module = await import("./document-editor-pane-JNXPANWM.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({
@@ -556,7 +556,7 @@ function FileArtifactPane({
             className,
             tabs: paneTabs,
             headerActions,
-            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[20rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-card)]/40 text-sm text-[var(--text-muted)]", children: "Loading editor\u2026" })
+            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[20rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] text-sm text-[var(--text-muted)]", children: "Loading editor\u2026" })
           }
         ),
         children: /* @__PURE__ */ jsx4(

package/dist/{chunk-CCKNIAS7.js → chunk-XBR3IP7B.js}

@@ -1,10 +1,10 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-CJ2RYVZH.js";
+} from "./chunk-NTSRY4GW.js";
 import {
   Markdown
-} from "./chunk-LTFK464G.js";
+} from "./chunk-H5XYSFYE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-OHMO7NUX.js → chunk-XTPAWK7L.js}

@@ -8,10 +8,10 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunk-IW2JZCOC.js";
+} from "./chunk-WBQ7VULC.js";
 import {
   Button
-} from "./chunk-HWLX5NME.js";
+} from "./chunk-TSE423UF.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -122,7 +122,7 @@ function UserMenu({
         DropdownMenuItem,
         {
           onClick: handleLogout,
-          className: "text-red-500 focus:text-red-500",
+          className: "text-[var(--surface-danger-text)] focus:text-[var(--surface-danger-text)]",
           children: "Sign out"
         }
       )
@@ -165,10 +165,8 @@ function AuthHeader({
 }
 
 // src/auth/login-layout.tsx
+import { BookOpen, HelpCircle, Terminal } from "lucide-react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function MaterialIcon({ name, className }) {
-  return /* @__PURE__ */ jsx2("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
-}
 function LoginLayout({
   brandName = "Tangle Sandbox",
   tagline,
@@ -185,48 +183,39 @@ function LoginLayout({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("bg-surface text-on-surface font-sans overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "fixed inset-0 z-0 overflow-hidden", children: [
-      /* @__PURE__ */ jsx2("div", { className: "absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-md3-primary/10 rounded-full blur-[120px]" }),
-      /* @__PURE__ */ jsx2("div", { className: "absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary-container/10 rounded-full blur-[100px]" }),
-      /* @__PURE__ */ jsx2("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full opacity-20 pointer-events-none", style: { backgroundImage: "radial-gradient(#4a4455 1px, transparent 1px)", backgroundSize: "40px 40px" } })
-    ] }),
+  return /* @__PURE__ */ jsxs2("div", { className: cn("bg-[var(--depth-1)] text-[var(--text-primary)] font-sans overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-0 overflow-hidden pointer-events-none", children: /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 opacity-[0.04]", style: { backgroundImage: "radial-gradient(var(--brand-cool) 1px, transparent 1px)", backgroundSize: "40px 40px" } }) }),
     /* @__PURE__ */ jsxs2("main", { className: "relative z-10 flex flex-col md:flex-row h-screen", children: [
       /* @__PURE__ */ jsxs2("section", { className: "hidden md:flex flex-col justify-between p-12 lg:p-20 w-1/2 h-full", children: [
         /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 bg-gradient-to-br from-md3-primary to-primary-container rounded-lg flex items-center justify-center shadow-lg shadow-md3-primary/20", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "terminal", className: "text-on-primary text-2xl" }) }),
-          /* @__PURE__ */ jsx2("span", { className: "text-2xl font-extrabold tracking-tighter bg-gradient-to-br from-violet-300 to-violet-600 bg-clip-text text-transparent", children: brandName })
+          /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx2(Terminal, { className: "h-5 w-5 text-[var(--brand-cool)]" }) }),
+          /* @__PURE__ */ jsx2("span", { className: "text-2xl font-extrabold tracking-tighter text-[var(--text-primary)]", children: brandName })
         ] }) }),
         /* @__PURE__ */ jsxs2("div", { className: "max-w-lg space-y-6", children: [
-          tagline ? /* @__PURE__ */ jsx2("div", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none text-white", children: tagline }) : /* @__PURE__ */ jsxs2("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none text-white", children: [
+          tagline ? /* @__PURE__ */ jsx2("div", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none text-[var(--text-primary)]", children: tagline }) : /* @__PURE__ */ jsxs2("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none", children: [
             "Orchestrate ",
             /* @__PURE__ */ jsx2("br", {}),
-            /* @__PURE__ */ jsx2("span", { className: "text-primary-fixed-dim", children: "Agents" }),
+            /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "Agents" }),
             " in Flow."
           ] }),
-          /* @__PURE__ */ jsx2("p", { className: "text-on-surface-variant text-lg leading-relaxed font-light", children: subtitle }),
-          /* @__PURE__ */ jsxs2("div", { className: "mt-12 bg-surface-container-lowest rounded-xl border border-outline-variant/10 overflow-hidden shadow-2xl", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "bg-surface-container-high px-4 py-2 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-md3-error/40" }),
-              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-md3-primary/40" }),
-              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-md3-secondary/40" }),
-              /* @__PURE__ */ jsx2("span", { className: "ml-4 font-mono text-xs text-on-surface-variant/60", children: "tangle --init-node" })
-            ] }),
+          /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-muted)] text-lg leading-relaxed font-light", children: subtitle }),
+          /* @__PURE__ */ jsxs2("div", { className: "mt-12 bg-[var(--depth-2)] rounded-xl border border-[var(--border-subtle)] overflow-hidden", children: [
+            /* @__PURE__ */ jsx2("div", { className: "bg-[var(--depth-1)] border-b border-[var(--border-subtle)] px-4 py-2 flex items-center gap-2", children: /* @__PURE__ */ jsx2("span", { className: "font-mono text-xs text-[var(--text-muted)]", children: "tangle --init-node" }) }),
             /* @__PURE__ */ jsx2("div", { className: "p-6 font-mono text-xs space-y-2", children: terminalLines.map((line, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-md3-primary/60", children: String(i + 1).padStart(2, "0") }),
+              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)] opacity-60", children: String(i + 1).padStart(2, "0") }),
               line.startsWith("DONE") ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                /* @__PURE__ */ jsx2("span", { className: "text-primary-fixed-dim", children: "DONE" }),
-                /* @__PURE__ */ jsx2("span", { className: "text-on-surface", children: line.replace("DONE  ", "") })
-              ] }) : /* @__PURE__ */ jsx2("span", { className: "text-on-surface", children: line })
+                /* @__PURE__ */ jsx2("span", { className: "text-[var(--code-success)]", children: "DONE" }),
+                /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-primary)]", children: line.replace("DONE  ", "") })
+              ] }) : /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-secondary)]", children: line })
             ] }, i)) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx2("nav", { className: "flex gap-8 text-sm font-medium text-on-surface-variant", children: footerLinks.map((link) => /* @__PURE__ */ jsxs2("a", { href: link.href, className: "hover:text-md3-primary transition-colors flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx2(MaterialIcon, { name: link.label === "Documentation" ? "menu_book" : "contact_support", className: "text-lg" }),
+        /* @__PURE__ */ jsx2("nav", { className: "flex gap-8 text-sm font-medium text-[var(--text-muted)]", children: footerLinks.map((link) => /* @__PURE__ */ jsxs2("a", { href: link.href, className: "hover:text-[var(--brand-cool)] transition-colors flex items-center gap-2", children: [
+          link.label === "Documentation" ? /* @__PURE__ */ jsx2(BookOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(HelpCircle, { className: "h-4 w-4" }),
           link.label
         ] }, link.href)) })
       ] }),
-      /* @__PURE__ */ jsx2("section", { className: "w-full md:w-1/2 flex items-center justify-center p-6 lg:p-24 relative", children: /* @__PURE__ */ jsx2("div", { className: "w-full max-w-md bg-surface-container/60 backdrop-blur-[20px] rounded-[2rem] p-8 lg:p-12 shadow-2xl border border-white/5", children }) })
+      /* @__PURE__ */ jsx2("section", { className: "w-full md:w-1/2 flex items-center justify-center p-6 lg:p-24 relative", children: /* @__PURE__ */ jsx2("div", { className: "w-full max-w-md bg-[var(--depth-2)] rounded-[2rem] p-8 lg:p-12 shadow-2xl border border-[var(--border-subtle)]", children }) })
     ] })
   ] });
 }

package/dist/{chunk-SULQQJPB.js → chunk-YS66Q3RC.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/85",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className

package/dist/{chunk-FRGMMANX.js → chunk-YYGECNZZ.js}

@@ -52,7 +52,7 @@ function Skeleton({
   return /* @__PURE__ */ jsx2(
     "div",
     {
-      className: cn("animate-pulse rounded-lg bg-muted", className),
+      className: cn("animate-pulse rounded-lg bg-[var(--depth-3)]", className),
       ...props
     }
   );
@@ -62,7 +62,7 @@ function SkeletonCard({ className }) {
     "div",
     {
       className: cn(
-        "space-y-4 rounded-xl border border-border bg-card p-6",
+        "space-y-4 rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-card)] p-6",
         className
       ),
       children: [
@@ -79,7 +79,7 @@ function SkeletonCard({ className }) {
 }
 function SkeletonTable({ rows = 5 }) {
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-border border-b pb-2", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-[var(--border-subtle)] border-b pb-2", children: [
       /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
       /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
       /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),