@tangle-network/sandbox-ui 0.6.1 → 0.9.0

package/dist/{chunk-W4LM3QYZ.js → chunk-HB5Y37YU.js}

@@ -23,16 +23,16 @@ function ArtifactPane({
     "section",
     {
       className: cn(
-        "flex h-full min-h-0 flex-col overflow-hidden rounded-[var(--radius-xl)] bg-[linear-gradient(180deg,rgba(255,255,255,0.02),transparent_18%),var(--bg-dark)] text-[var(--text-primary)]",
+        "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "border-b border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(98,114,243,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent)]", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("header", { className: "border-b border-border bg-muted/10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1 inline-flex max-w-full items-center rounded-full border border-[var(--border-accent)] bg-[var(--brand-cool)]/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--brand-cool)]", children: eyebrow }),
-              /* @__PURE__ */ jsx("div", { className: "min-w-0 text-[15px] font-semibold text-[var(--text-primary)]", children: title }),
-              (subtitle || meta) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-[var(--text-muted)]", children: [
+              eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 text-[13px] font-medium text-foreground", children: title }),
+              (subtitle || meta) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground", children: [
                 subtitle && /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle }),
                 meta && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: meta })
               ] })
@@ -40,10 +40,10 @@ function ArtifactPane({
             headerActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: headerActions })
           ] }),
           tabs,
-          toolbar && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] px-3 py-2", children: toolbar })
+          toolbar && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-2", children: toolbar })
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-auto", contentClassName), children: hasContent ? children : emptyState ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", children: emptyState }) : null }),
-        footer && /* @__PURE__ */ jsx("footer", { className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-card)] px-3 py-2", children: footer })
+        footer && /* @__PURE__ */ jsx("footer", { className: "shrink-0 border-t border-border bg-card px-3 py-2", children: footer })
       ]
     }
   );

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

@@ -2,24 +2,24 @@ import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-CNWVHQFY.js";
+} from "./chunk-54SQQMMM.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-ZMWWE5RF.js";
+} from "./chunk-EXSOPXIY.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-MJUDMVRU.js";
+} from "./chunk-MT5FJ3ZT.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-BX6AQMUS.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-OVNLOE3Y.js";
+} from "./chunk-PLTZB5BC.js";
 import {
   Markdown
-} from "./chunk-3HW53XTH.js";
+} from "./chunk-T7HMZEVO.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -31,11 +31,11 @@ var UserMessage = memo(({ message, parts, actions }) => {
   const textContent = parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
   if (!textContent.trim()) return null;
   return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[82%] flex-col items-end gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[var(--radius-xl)] rounded-br-[var(--radius-sm)] border border-[var(--border-accent)] bg-[var(--depth-3)] px-4 py-3.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--brand-cool)]", children: "You" }),
-      /* @__PURE__ */ jsx("div", { className: "text-[15px] leading-7 text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(Markdown, { className: "tangle-prose", children: textContent }) })
+    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[var(--radius-xl)] rounded-br-[var(--radius-sm)] border border-border bg-muted/50 px-4 py-3.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-primary", children: "You" }),
+      /* @__PURE__ */ jsx("div", { className: "text-[15px] leading-7 text-foreground", children: /* @__PURE__ */ jsx(Markdown, { className: "tangle-prose", children: textContent }) })
     ] }),
-    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-[var(--text-muted)]", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
   ] }) });
 });
 UserMessage.displayName = "UserMessage";
@@ -98,11 +98,11 @@ function ThinkingIndicator({ className }) {
   }, []);
   return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center gap-2 px-3 py-1.5", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex gap-[3px]", children: [
-      /* @__PURE__ */ jsx3("span", { className: "h-1 w-1 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-1 w-1 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-1 w-1 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
+      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
+      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
+      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
     ] }),
-    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[11px] tabular-nums text-[var(--text-dim)]", children: [
+    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-[var(--text-dim)]", children: [
       elapsed,
       "s"
     ] })
@@ -121,8 +121,8 @@ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var TONE_STYLES = {
   default: {
     dot: "bg-[var(--border-hover)]",
-    card: "border-[var(--border-subtle)] bg-[var(--bg-card)]",
-    text: "text-[var(--text-secondary)]",
+    card: "border-border bg-card",
+    text: "text-foreground",
     icon: CircleDot
   },
   info: {
@@ -156,25 +156,25 @@ function formatTime(date) {
 function AgentTimelineRow({ isLast, accentClassName, children }) {
   return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4", children: [
     /* @__PURE__ */ jsxs3("div", { className: "relative flex justify-center", children: [
-      !isLast && /* @__PURE__ */ jsx4("span", { className: "absolute top-4 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-[var(--border-subtle)]" }),
-      /* @__PURE__ */ jsx4("span", { className: cn("relative mt-2 h-2.5 w-2.5 rounded-full ring-4 ring-[var(--bg-root)]", accentClassName) })
+      !isLast && /* @__PURE__ */ jsx4("span", { className: "absolute top-4 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-border" }),
+      /* @__PURE__ */ jsx4("span", { className: cn("relative mt-2 h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", accentClassName) })
     ] }),
     /* @__PURE__ */ jsx4("div", { className: "min-w-0 pb-3", children })
   ] });
 }
 function UserMessage2({ item }) {
-  return /* @__PURE__ */ jsx4("div", { className: "mb-3 flex justify-end", children: /* @__PURE__ */ jsx4("div", { className: "max-w-[72%]", children: /* @__PURE__ */ jsxs3("div", { className: "rounded-2xl border border-[var(--border-accent)] bg-[var(--depth-3)] px-4 py-3", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-1.5 text-right text-[11px] text-[var(--text-muted)]", children: formatTime(item.timestamp) }),
-    /* @__PURE__ */ jsx4("div", { className: "whitespace-pre-wrap text-[15px] leading-7 text-[var(--text-primary)]", children: item.content })
+  return /* @__PURE__ */ jsx4("div", { className: "mb-3 flex justify-end", children: /* @__PURE__ */ jsx4("div", { className: "max-w-[72%]", children: /* @__PURE__ */ jsxs3("div", { className: "rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
+    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
+    /* @__PURE__ */ jsx4("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: item.content })
   ] }) }) });
 }
 function AssistantMessage({ item }) {
   return /* @__PURE__ */ jsxs3("div", { className: "-mt-0.5", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[11px] text-[var(--text-muted)]", children: formatTime(item.timestamp) }),
-    item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[15px] leading-7", children: item.content }),
-    item.isStreaming && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" }),
+    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
+    item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: item.content }),
+    item.isStreaming && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-primary align-text-bottom" }),
     item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-3", children: item.toolCalls }),
-    item.after && /* @__PURE__ */ jsx4("div", { className: "mt-3 border-t border-[var(--border-subtle)] pt-3", children: item.after })
+    item.after && /* @__PURE__ */ jsx4("div", { className: "mt-3 border-t border-border pt-3", children: item.after })
   ] });
 }
 function StatusCard({ item }) {
@@ -184,18 +184,18 @@ function StatusCard({ item }) {
     /* @__PURE__ */ jsx4(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", tone.text) }),
     /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsx4("div", { className: cn("text-sm font-medium", tone.text), children: item.label }),
-      item.detail && /* @__PURE__ */ jsx4("div", { className: "mt-0.5 text-sm text-[var(--text-muted)]", children: item.detail })
+      item.detail && /* @__PURE__ */ jsx4("div", { className: "mt-0.5 text-sm text-muted-foreground", children: item.detail })
     ] })
   ] }) });
 }
 function ArtifactCard({ item }) {
   const tone = TONE_STYLES[item.tone ?? "default"];
   const content = /* @__PURE__ */ jsx4("div", { className: cn("rounded-[var(--radius-lg)] border px-4 py-3", tone.card), children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx4("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--bg-elevated)] text-[var(--text-secondary)]", children: item.icon ?? /* @__PURE__ */ jsx4(FileText, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx4("div", { className: "mt-0.5 flex h-[var(--avatar-size)] w-[var(--avatar-size)] shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-muted/50 text-foreground", children: item.icon ?? /* @__PURE__ */ jsx4(FileText, { className: "h-4 w-4" }) }),
     /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx4("div", { className: "text-sm font-medium text-[var(--text-primary)]", children: item.title }),
-      item.description && /* @__PURE__ */ jsx4("div", { className: "mt-1 text-sm text-[var(--text-muted)]", children: item.description }),
-      item.meta && /* @__PURE__ */ jsx4("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: item.meta })
+      /* @__PURE__ */ jsx4("div", { className: "text-sm font-medium text-foreground", children: item.title }),
+      item.description && /* @__PURE__ */ jsx4("div", { className: "mt-1 text-sm text-muted-foreground", children: item.description }),
+      item.meta && /* @__PURE__ */ jsx4("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: item.meta })
     ] }),
     item.action && /* @__PURE__ */ jsx4("div", { className: "shrink-0", children: item.action })
   ] }) });
@@ -212,7 +212,7 @@ function ArtifactCard({ item }) {
           item.onClick?.();
         }
       },
-      className: "block w-full text-left transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+      className: "block w-full text-left transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
       children: content
     }
   );
@@ -309,7 +309,11 @@ function ChatInput({
   accept,
   dropTitle = "Drop files to add context",
   dropDescription = "Files will be attached to your next message.",
-  className
+  className,
+  inputLabel = "Agent Command Deck",
+  idleStatus = "Ready for next instruction",
+  streamingStatus = "Streaming response",
+  hideShortcutHint
 }) {
   const [value, setValue] = useState2("");
   const [dragOver, setDragOver] = useState2(false);
@@ -398,10 +402,10 @@ function ChatInput({
       onDragOver: onAttach ? handleDragOver : void 0,
       onDrop: onAttach ? handleDrop : void 0,
       children: [
-        dragOver && /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-[var(--radius-xl)] border-2 border-dashed border-[var(--border-accent)] bg-[var(--depth-2)] pointer-events-none", children: /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx5("div", { className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--accent-surface-soft)]", children: /* @__PURE__ */ jsx5(Upload, { className: "h-6 w-6 text-[var(--brand-cool)]" }) }),
-          /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-[var(--text-primary)]", children: dropTitle }),
-          /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-[var(--text-muted)]", children: dropDescription })
+        dragOver && /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-[var(--radius-xl)] border-2 border-dashed border-border bg-card pointer-events-none", children: /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx5("div", { className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--accent-surface-soft)]", children: /* @__PURE__ */ jsx5(Upload, { className: "h-6 w-6 text-primary" }) }),
+          /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-foreground", children: dropTitle }),
+          /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-muted-foreground", children: dropDescription })
         ] }) }),
         pendingFiles.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "mb-3 flex flex-wrap gap-2", children: [
           folderChips.map((f) => /* @__PURE__ */ jsxs4(
@@ -409,26 +413,26 @@ function ChatInput({
             {
               className: cn(
                 "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs",
-                "border-[var(--border-subtle)] bg-[var(--depth-3)]",
+                "border-border bg-muted/50",
                 f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
-                f.status !== "error" && "text-[var(--text-secondary)]"
+                f.status !== "error" && "text-foreground"
               ),
               children: [
                 /* @__PURE__ */ jsx5(FolderUp, { className: "h-3 w-3 shrink-0" }),
                 /* @__PURE__ */ jsx5("span", { className: "truncate max-w-[150px]", children: f.name }),
-                f.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-[var(--text-muted)]", children: [
+                f.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
                   "(",
                   f.fileCount,
                   ")"
                 ] }),
-                f.status === "uploading" && /* @__PURE__ */ jsx5("span", { className: "w-3 h-3 border-2 border-[var(--brand-cool)] border-t-transparent rounded-full animate-spin" }),
+                f.status === "uploading" && /* @__PURE__ */ jsx5("span", { className: "w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
                 onRemoveFile && /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
                     "aria-label": `Remove ${f.name}`,
                     onClick: () => onRemoveFile(f.id),
-                    className: "rounded p-0.5 transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                    className: "rounded p-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
                     children: /* @__PURE__ */ jsx5(X, { className: "h-3 w-3" })
                   }
                 )
@@ -441,21 +445,21 @@ function ChatInput({
             {
               className: cn(
                 "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs",
-                "border-[var(--border-subtle)] bg-[var(--depth-3)]",
+                "border-border bg-muted/50",
                 f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
-                f.status !== "error" && "text-[var(--text-secondary)]"
+                f.status !== "error" && "text-foreground"
               ),
               children: [
                 /* @__PURE__ */ jsx5(Paperclip, { className: "h-3 w-3 shrink-0" }),
                 /* @__PURE__ */ jsx5("span", { className: "truncate max-w-[150px]", children: f.name }),
-                f.status === "uploading" && /* @__PURE__ */ jsx5("span", { className: "w-3 h-3 border-2 border-[var(--brand-cool)] border-t-transparent rounded-full animate-spin" }),
+                f.status === "uploading" && /* @__PURE__ */ jsx5("span", { className: "w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
                 onRemoveFile && /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
                     "aria-label": `Remove ${f.name}`,
                     onClick: () => onRemoveFile(f.id),
-                    className: "rounded p-0.5 transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                    className: "rounded p-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
                     children: /* @__PURE__ */ jsx5(X, { className: "h-3 w-3" })
                   }
                 )
@@ -464,10 +468,10 @@ function ChatInput({
             f.id
           ))
         ] }),
-        /* @__PURE__ */ jsx5("div", { className: "rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--depth-2)] shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-[var(--radius-xl)] px-3 py-[var(--chat-input-py)] transition-colors focus-within:border-[var(--border-accent)]", children: [
-          /* @__PURE__ */ jsxs4("div", { className: "mb-1.5 flex items-center justify-between gap-3 px-1", children: [
-            /* @__PURE__ */ jsx5("div", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Agent Command Deck" }),
-            /* @__PURE__ */ jsx5("div", { className: "text-[11px] text-[var(--text-muted)]", children: isStreaming ? "Streaming response" : "Ready for next instruction" })
+        /* @__PURE__ */ jsx5("div", { className: "rounded-[var(--radius-xl)] border border-[var(--chat-input-border,var(--border-default))] [background:var(--chat-input-bg,var(--depth-2))] shadow-[var(--chat-input-shadow,var(--shadow-card))] transition-all focus-within:border-[var(--chat-input-focus-border,var(--border-accent))] focus-within:shadow-[var(--chat-input-focus-shadow,var(--shadow-card))]", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-[var(--radius-xl)] px-3 py-[var(--chat-input-py)]", children: [
+          (inputLabel !== null || idleStatus !== null || streamingStatus !== null) && /* @__PURE__ */ jsxs4("div", { className: "mb-1.5 flex items-center justify-between gap-3 px-1", children: [
+            inputLabel !== null && /* @__PURE__ */ jsx5("div", { className: "text-[var(--chat-label-size,11px)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.16em)] text-[var(--text-muted)]", children: inputLabel }),
+            (idleStatus !== null || streamingStatus !== null) && /* @__PURE__ */ jsx5("div", { className: "text-[var(--chat-label-size,11px)] text-[var(--text-muted)]", children: isStreaming ? streamingStatus ?? "" : idleStatus ?? "" })
           ] }),
           /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
             onAttach && /* @__PURE__ */ jsxs4(Fragment, { children: [
@@ -479,7 +483,7 @@ function ChatInput({
                   disabled: isStreaming,
                   "aria-label": "Attach files",
                   title: "Attach files",
-                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-[var(--text-muted)] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
                   children: /* @__PURE__ */ jsx5(Paperclip, { className: "h-4 w-4" })
                 }
               ),
@@ -504,7 +508,7 @@ function ChatInput({
                   disabled: isStreaming,
                   "aria-label": "Attach folder",
                   title: "Attach folder",
-                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-[var(--text-muted)] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
                   children: /* @__PURE__ */ jsx5(FolderUp, { className: "h-4 w-4" })
                 }
               ),
@@ -531,7 +535,7 @@ function ChatInput({
                 disabled: isStreaming || disabled,
                 rows: 1,
                 "aria-label": "Message input",
-                className: "min-h-[32px] max-h-[120px] flex-1 resize-none bg-transparent text-[14px] leading-6 text-[var(--text-primary)] placeholder:text-[var(--text-muted)] disabled:opacity-50 focus-visible:outline-none"
+                className: "min-h-[32px] max-h-[120px] flex-1 resize-none bg-transparent text-[14px] leading-6 text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus-visible:outline-none"
               }
             ),
             isStreaming ? /* @__PURE__ */ jsx5(
@@ -550,29 +554,29 @@ function ChatInput({
                 onClick: handleSend,
                 disabled: !value.trim() || disabled,
                 "aria-label": "Send message",
-                className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] p-2.5 text-[var(--accent-text)] transition-colors hover:translate-y-[-1px] hover:bg-[var(--accent-surface-strong)] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-accent)]",
+                className: "mb-0.5 shrink-0 rounded-[var(--chat-send-radius,var(--radius-lg))] border border-[var(--chat-send-border,var(--border-accent))] [background:var(--chat-send-bg,var(--accent-surface-soft))] p-2.5 text-[var(--chat-send-color,var(--accent-text))] shadow-[var(--chat-send-shadow,none)] transition-all hover:translate-y-[-1px] hover:[background:var(--chat-send-hover-bg,var(--accent-surface-strong))] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chat-send-ring,var(--border-accent))]",
                 children: /* @__PURE__ */ jsx5(Send, { className: "h-4 w-4" })
               }
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxs4("div", { className: "mt-2 flex items-center justify-between px-1", children: [
+        (modelLabel || !hideShortcutHint) && /* @__PURE__ */ jsxs4("div", { className: "mt-2 flex items-center justify-between px-1", children: [
           /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-2", children: modelLabel && /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
               onClick: onModelClick,
               "aria-label": `Select model, current model ${modelLabel}`,
-              className: "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-1 text-xs text-[var(--text-muted)] transition-colors hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+              className: "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border border-border bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/20 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
               children: [
                 /* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--code-success)]" }),
                 modelLabel
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs4("span", { className: "text-xs text-[var(--text-muted)]", children: [
-            /* @__PURE__ */ jsx5("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px]", children: "Cmd" }),
-            /* @__PURE__ */ jsx5("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px] ml-0.5", children: "L" }),
+          !hideShortcutHint && /* @__PURE__ */ jsxs4("span", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx5("kbd", { className: "px-1 py-0.5 bg-background rounded border border-border text-[10px]", children: "Cmd" }),
+            /* @__PURE__ */ jsx5("kbd", { className: "px-1 py-0.5 bg-background rounded border border-border text-[10px] ml-0.5", children: "L" }),
             /* @__PURE__ */ jsx5("span", { className: "ml-1", children: "to focus" })
           ] })
         ] })
@@ -739,7 +743,7 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
           items.push({
             id: `${message.id}-openui-${part.id}`,
             kind: "custom",
-            content: /* @__PURE__ */ jsx6("div", { className: "my-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx6(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
+            content: /* @__PURE__ */ jsx6("div", { className: "my-2 rounded-[var(--radius-lg)] border border-border bg-card p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx6(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
           });
         }
       }
@@ -771,7 +775,7 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
               items.push({
                 id: `${itemId}-openui`,
                 kind: "custom",
-                content: /* @__PURE__ */ jsx6("div", { className: "my-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx6(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
+                content: /* @__PURE__ */ jsx6("div", { className: "my-2 rounded-[var(--radius-lg)] border border-border bg-card p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx6(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
               });
               const afterJson = part.text.slice(part.text.lastIndexOf("```") + 3).trim();
               if (afterJson) {
@@ -863,9 +867,9 @@ var ChatContainer = memo3(
         {
           ref: scrollRef,
           className: "flex-1 overflow-y-auto px-4 py-2 [scrollbar-gutter:stable]",
-          children: messages.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { className: "max-w-md rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-5 py-5 text-center shadow-[var(--shadow-card)]", children: [
-            /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Start the filing workflow" }),
-            /* @__PURE__ */ jsx6("div", { className: "mt-2 text-sm leading-relaxed text-[var(--text-muted)]", children: "Ask the agent to analyze documents, generate forms, explain a calculation, or review the current filing package." })
+          children: messages.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { className: "max-w-md rounded-[var(--radius-xl)] border border-border bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-5 py-5 text-center shadow-[var(--shadow-card)]", children: [
+            /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-foreground", children: "Start the filing workflow" }),
+            /* @__PURE__ */ jsx6("div", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: "Ask the agent to analyze documents, generate forms, explain a calculation, or review the current filing package." })
           ] }) }) : presentation === "timeline" ? /* @__PURE__ */ jsx6(AgentTimeline, { items: timeline.items, isThinking: timeline.showThinking }) : /* @__PURE__ */ jsx6("div", { className: "mx-auto flex w-full max-w-5xl flex-col gap-3", children: /* @__PURE__ */ jsx6(
             MessageList,
             {
@@ -888,9 +892,9 @@ var ChatContainer = memo3(
           onClick: scrollToBottom,
           className: cn(
             "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
-            "border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-[var(--shadow-card)]",
-            "text-xs text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)]",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60"
+            "border border-border bg-card shadow-[var(--shadow-card)]",
+            "text-xs text-foreground transition-colors hover:bg-accent",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
           ),
           children: [
             /* @__PURE__ */ jsx6(ArrowDown, { className: "w-3 h-3" }),
@@ -911,7 +915,7 @@ var ChatContainer = memo3(
           onRemoveFile,
           onAttach,
           disabled,
-          className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)]"
+          className: "shrink-0 border-t border-border bg-background"
         }
       )
     ] });

package/dist/{chunk-BRBTD7RH.js → chunk-MA7YKRUP.js}

@@ -4,28 +4,38 @@ import {
 
 // src/primitives/input.tsx
 import * as React from "react";
+import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
+var inputVariants = cva(
+  "flex w-full rounded-lg border bg-card px-4 py-2 text-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+  {
+    variants: {
+      variant: {
+        default: "border-input focus:ring-ring",
+        sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]",
+        error: "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]"
+      },
+      size: {
+        default: "h-11",
+        sm: "h-9 px-3",
+        lg: "h-12 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
 var Input = React.forwardRef(
-  ({ className, type, variant = "default", label, error, hint, id, ...props }, ref) => {
+  ({ className, type, variant, size, label, error, hint, id, ...props }, ref) => {
     const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
-    const variants = {
-      default: "border-input focus:ring-ring",
-      sandbox: "border-[var(--border-accent)] focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
-    };
     const input = /* @__PURE__ */ jsx(
       "input",
       {
         type,
         id: inputId,
-        className: cn(
-          "flex h-11 w-full rounded-lg border bg-[var(--depth-2)] px-4 py-2 text-sm transition-all duration-200",
-          "placeholder:text-muted-foreground",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "file:border-0 file:bg-transparent file:font-medium file:text-sm",
-          error ? "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]" : variants[variant],
-          className
-        ),
+        className: cn(inputVariants({ variant: error ? "error" : variant, size, className })),
         ref,
         ...props
       }
@@ -36,12 +46,12 @@ var Input = React.forwardRef(
         "label",
         {
           htmlFor: inputId,
-          className: "block font-medium text-muted-foreground text-sm",
+          className: "block font-medium text-foreground text-sm",
           children: label
         }
       ),
       input,
-      error && /* @__PURE__ */ jsx("p", { className: "text-[var(--surface-danger-text)] text-sm", children: error }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-[var(--surface-danger-text)] text-sm font-medium", children: error }),
       hint && !error && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-sm", children: hint })
     ] });
   }
@@ -52,14 +62,14 @@ var Textarea = React.forwardRef(
     const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
     const variants = {
       default: "border-input focus:ring-ring",
-      sandbox: "border-[var(--border-accent)] focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
+      sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
     };
     const textarea = /* @__PURE__ */ jsx(
       "textarea",
       {
         id: textareaId,
         className: cn(
-          "flex min-h-[120px] w-full resize-y rounded-lg border bg-[var(--depth-2)] px-4 py-3 text-sm transition-all duration-200",
+          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm transition-all duration-200",
           "placeholder:text-muted-foreground",
           "focus:outline-none focus:ring-2 focus:ring-offset-0",
           "disabled:cursor-not-allowed disabled:opacity-50",

package/dist/{chunk-TSE423UF.js → chunk-MKTSMWVD.js}

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