@tangle-network/sandbox-ui 0.5.1 → 0.6.0

package/dist/chat.js

@@ -1,6 +1,6 @@
 import {
   ChatMessage
-} from "./chunk-5CEMHKBP.js";
+} from "./chunk-GW4GRAWJ.js";
 import {
   AgentTimeline,
   ChatContainer,
@@ -8,15 +8,15 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-R3IU37AW.js";
+} from "./chunk-5F3VOGCT.js";
 import "./chunk-CNWVHQFY.js";
-import "./chunk-WC7QTWPN.js";
+import "./chunk-LY32SP6X.js";
 import "./chunk-HRMUF35V.js";
-import "./chunk-NTSRY4GW.js";
+import "./chunk-MJUDMVRU.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-VBWY44UU.js";
+import "./chunk-OVNLOE3Y.js";
 import "./chunk-JP725R4W.js";
-import "./chunk-H5XYSFYE.js";
+import "./chunk-3HW53XTH.js";
 import "./chunk-TDYQBLL5.js";
 import "./chunk-TSE423UF.js";
 import "./chunk-RQHJBTEU.js";

package/dist/{chunk-XBR3IP7B.js → chunk-33W2TLUL.js}

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

package/dist/{chunk-H5XYSFYE.js → chunk-3HW53XTH.js}

@@ -116,8 +116,8 @@ var CodeBlock = memo(
         className: cn("group relative overflow-hidden rounded-lg border font-mono", bg, className),
         ...props,
         children: [
-          language && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between border-b px-4 py-1.5", headerBg), children: [
-            /* @__PURE__ */ jsx("span", { className: cn("text-[11px] font-mono font-medium uppercase tracking-widest", langColor), children: language }),
+          language && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between border-b px-3 py-1", headerBg), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-[10px] font-mono font-medium uppercase tracking-widest", langColor), children: language }),
             children
           ] }),
           !language && children && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100", children }),
@@ -134,10 +134,10 @@ var CodeBlock = memo(
               },
               customStyle: {
                 margin: 0,
-                padding: "1rem",
+                padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
                 background: "transparent",
-                fontSize: "0.8125rem",
-                lineHeight: "1.65",
+                fontSize: "var(--code-font-size, 0.8125rem)",
+                lineHeight: "var(--code-line-height, 1.5)",
                 overflowX: "auto"
               },
               codeTagProps: { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } },
@@ -165,7 +165,7 @@ var CopyButton = memo(({ text }) => {
     "button",
     {
       onClick: handleCopy,
-      className: "flex items-center justify-center w-7 h-7 rounded-md bg-[var(--bg-section)] border border-[var(--border-subtle)] hover:border-[var(--border-default)] transition-colors",
+      className: "flex items-center justify-center w-6 h-6 rounded-md bg-[var(--bg-section)] border border-[var(--border-subtle)] hover:border-[var(--border-default)] transition-colors",
       title: "Copy to clipboard",
       children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-[var(--brand-emerald)]" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-[var(--text-muted)]" })
     }

package/dist/{chunk-R3IU37AW.js → chunk-5F3VOGCT.js}

@@ -6,20 +6,20 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-WC7QTWPN.js";
+} from "./chunk-LY32SP6X.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-NTSRY4GW.js";
+} from "./chunk-MJUDMVRU.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-BX6AQMUS.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-VBWY44UU.js";
+} from "./chunk-OVNLOE3Y.js";
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -96,18 +96,15 @@ function ThinkingIndicator({ className }) {
     const interval = window.setInterval(() => setElapsed((current) => current + 1), 1e3);
     return () => window.clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex gap-3 px-4 py-3", className), children: [
-    /* @__PURE__ */ jsx3("div", { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-glow)]/15 text-[var(--brand-glow)]", children: /* @__PURE__ */ jsxs2("div", { className: "flex gap-0.5", children: [
-      /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-current", style: { animationDelay: "0ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-current", style: { animationDelay: "150ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-current", style: { animationDelay: "300ms" } })
-    ] }) }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx3("span", { className: "text-sm text-[var(--text-muted)]", children: elapsed < 10 ? "Thinking..." : elapsed < 60 ? "Thinking deeply..." : "Still working..." }),
-      elapsed > 5 && /* @__PURE__ */ jsxs2("span", { className: "text-xs tabular-nums text-[var(--text-muted)]", children: [
-        elapsed,
-        "s"
-      ] })
+  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" } })
+    ] }),
+    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[11px] tabular-nums text-[var(--text-dim)]", children: [
+      elapsed,
+      "s"
     ] })
   ] });
 }
@@ -227,7 +224,7 @@ function AgentTimeline({
   className
 }) {
   if (items.length === 0 && !isThinking) {
-    return emptyState ? /* @__PURE__ */ jsx4("div", { className: cn("flex h-full items-center justify-center p-8", className), children: emptyState }) : null;
+    return emptyState ? /* @__PURE__ */ jsx4("div", { className: cn("flex h-full items-center justify-center p-4", className), children: emptyState }) : null;
   }
   const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }] : items;
   const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
@@ -467,8 +464,8 @@ 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-3.5 transition-colors focus-within:border-[var(--border-accent)]", children: [
-          /* @__PURE__ */ jsxs4("div", { className: "mb-2 flex items-center justify-between gap-3 px-1", children: [
+        /* @__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" })
           ] }),
@@ -534,7 +531,7 @@ function ChatInput({
                 disabled: isStreaming || disabled,
                 rows: 1,
                 "aria-label": "Message input",
-                className: "min-h-[36px] max-h-[160px] flex-1 resize-none bg-transparent text-[15px] leading-7 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-[var(--text-primary)] placeholder:text-[var(--text-muted)] disabled:opacity-50 focus-visible:outline-none"
               }
             ),
             isStreaming ? /* @__PURE__ */ jsx5(
@@ -865,8 +862,8 @@ var ChatContainer = memo3(
         "div",
         {
           ref: scrollRef,
-          className: "flex-1 overflow-y-auto px-4 py-4 [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-6 py-8 text-center shadow-[var(--shadow-card)]", children: [
+          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." })
           ] }) }) : 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(

package/dist/{chunk-7DVFZEVW.js → chunk-6V4XVKFY.js}

@@ -158,7 +158,7 @@ function Sidebar({ children, className }) {
     {
       "data-sidebar": "true",
       className: cn(
-        "fixed inset-y-0 left-0 z-40 flex bg-sidebar border-r border-sidebar-border transition-[transform,width] duration-200 ease-in-out",
+        "fixed inset-y-0 left-0 z-40 flex bg-[var(--depth-1)] border-r border-[var(--border-subtle)] transition-[transform,width] duration-200 ease-in-out",
         hidden && "-translate-x-full",
         className
       ),
@@ -168,10 +168,10 @@ function Sidebar({ children, className }) {
   );
 }
 function SidebarRail({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0 bg-[var(--depth-2)]", className), children });
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-sidebar-border", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-[var(--border-subtle)]", className), children });
 }
 function SidebarRailNav({ children, className }) {
   return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1", className), children });
@@ -180,7 +180,7 @@ function SidebarRailFooter({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
 }
 function RailSeparator({ className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-sidebar-border", className) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--border-subtle)]", className) });
 }
 function RailButton({ icon: Icon2, label, isActive, badge, onClick, className }) {
   return /* @__PURE__ */ jsxs(
@@ -190,17 +190,21 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className })
       onClick,
       title: label,
       className: cn(
-        "relative flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150",
-        "hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground",
+        "group relative flex flex-col items-center justify-center gap-0.5 w-12 h-12 rounded-lg transition-all duration-150",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
         "active:scale-95",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
-        !isActive && "text-sidebar-foreground/70",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
+        isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] shadow-[0_0_12px_-2px_rgba(130,99,255,0.3)]",
+        !isActive && "text-[var(--text-muted)]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2(Icon2, { className: "h-5 w-5" }),
-        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-sidebar-primary text-[10px] font-medium text-white px-1", children: badge > 99 ? "99+" : badge })
+        /* @__PURE__ */ jsx2(Icon2, { className: "h-[18px] w-[18px]" }),
+        /* @__PURE__ */ jsx2("span", { className: cn(
+          "text-[9px] leading-none font-medium tracking-tight truncate max-w-[44px]",
+          isActive ? "text-[var(--accent-text)]" : "text-[var(--text-dim)] group-hover:text-[var(--accent-text)]"
+        ), children: label }),
+        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-0.5 -right-0.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-[var(--brand-primary)] text-[8px] font-medium text-white px-0.5", children: badge > 99 ? "99+" : badge })
       ]
     }
   );
@@ -225,7 +229,7 @@ function SidebarPanel({ children, className }) {
     "div",
     {
       className: cn(
-        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-sidebar-border",
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-[var(--border-subtle)] bg-[var(--depth-1)]",
         panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
@@ -234,7 +238,7 @@ function SidebarPanel({ children, className }) {
   );
 }
 function SidebarPanelHeader({ children, title, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-sidebar-border shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-sidebar-foreground", children: title }) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-[var(--border-subtle)] shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }) });
 }
 function SidebarPanelContent({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex-1 overflow-y-auto px-2 py-2", className), children });
@@ -267,8 +271,8 @@ function ProfileAvatar({
       {
         type: "button",
         className: cn(
-          "flex items-center justify-center w-10 h-10 rounded-lg transition-colors hover:bg-sidebar-accent",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          "flex items-center justify-center w-12 h-12 rounded-lg transition-colors hover:bg-[var(--accent-surface-soft)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
           className
         ),
         "aria-label": "User menu",
@@ -366,16 +370,16 @@ function CreditBalance({
   className
 }) {
   const [topUpValue, setTopUpValue] = React2.useState("50.00");
-  return /* @__PURE__ */ jsxs3("div", { className: cn("bg-[var(--depth-2)] p-8 rounded-xl flex flex-col justify-between border border-[var(--border-subtle)]", className), children: [
+  return /* @__PURE__ */ jsxs3("div", { className: cn("bg-[var(--depth-2)] p-5 rounded-xl flex flex-col justify-between border border-[var(--border-subtle)]", className), children: [
     /* @__PURE__ */ jsxs3("div", { children: [
       /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-[var(--text-muted)] uppercase tracking-widest mb-2", children: "Available Credits" }),
-      /* @__PURE__ */ jsxs3("div", { className: "text-5xl font-extrabold text-[var(--brand-cool)] tracking-tighter mb-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "text-4xl font-extrabold text-[var(--brand-cool)] tracking-tighter mb-2", children: [
         "$",
         amount.toFixed(2)
       ] }),
       /* @__PURE__ */ jsx4("p", { className: "text-sm text-[var(--text-muted)] leading-relaxed", children: description })
     ] }),
-    onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-3 mt-8", children: [
+    onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 mt-5", children: [
       /* @__PURE__ */ jsxs3("div", { className: "bg-[var(--depth-1)] border border-[var(--border-subtle)] p-1 rounded-lg flex items-center", children: [
         /* @__PURE__ */ jsx4(
           "input",
@@ -461,17 +465,17 @@ import { Check } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function PlanCards({ plans, className }) {
   return /* @__PURE__ */ jsxs5("section", { className, children: [
-    /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-8 px-2", children: "Subscription Plans" }),
+    /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-5 px-2", children: "Subscription Plans" }),
     /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs5(
       "div",
       {
         className: cn(
-          "p-8 rounded-xl transition-all relative overflow-hidden border",
+          "p-5 rounded-xl transition-all relative overflow-hidden border",
           plan.popular ? "bg-[var(--depth-3)] border-[var(--border-accent)]" : "bg-[var(--depth-2)] border-[var(--border-subtle)] hover:bg-[var(--depth-3)] hover:border-[var(--border-default)]"
         ),
         children: [
           plan.popular && /* @__PURE__ */ jsx6("div", { className: "absolute top-0 right-0 bg-[var(--accent-surface-soft)] border-l border-b border-[var(--border-accent)] px-4 py-1 text-[10px] font-bold text-[var(--accent-text)] uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
-          /* @__PURE__ */ jsxs5("div", { className: "mb-6", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "mb-4", children: [
             /* @__PURE__ */ jsx6("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-[var(--brand-cool)]" : "text-[var(--text-muted)]"), children: plan.name }),
             /* @__PURE__ */ jsxs5("div", { className: "text-3xl font-bold text-[var(--text-primary)]", children: [
               "$",
@@ -482,7 +486,7 @@ function PlanCards({ plans, className }) {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx6("ul", { className: "space-y-3 mb-8 text-sm text-[var(--text-muted)]", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx6("ul", { className: "space-y-2 mb-5 text-sm text-[var(--text-muted)]", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx6(Check, { className: "h-3.5 w-3.5 text-[var(--brand-cool)] shrink-0" }),
             f.text
           ] }, i)) }),
@@ -684,8 +688,8 @@ function DashboardLayoutInner({
       }
     ),
     /* @__PURE__ */ jsx7(Sidebar, { className: cn("hidden lg:flex", sidebarClassName), children: sidebarContent }),
-    /* @__PURE__ */ jsx7(SidebarContent, { className: cn("pt-20 px-8 pb-12 hidden lg:block", contentClassName), children }),
-    /* @__PURE__ */ jsx7("main", { className: cn("pt-20 px-8 pb-12 min-h-screen lg:hidden", contentClassName), children }),
+    /* @__PURE__ */ jsx7(SidebarContent, { className: cn("pt-16 px-6 pb-8 hidden lg:block", contentClassName), children }),
+    /* @__PURE__ */ jsx7("main", { className: cn("pt-16 px-6 pb-8 min-h-screen lg:hidden", contentClassName), children }),
     footer
   ] });
 }
@@ -703,21 +707,19 @@ function getBarColor(percent) {
 function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
   const percent = max > 0 ? Math.min(value / max * 100, 100) : 0;
   const barColor = getBarColor(percent);
-  return /* @__PURE__ */ jsxs7("div", { className: cn("space-y-1.5", className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-[10px] font-mono text-[var(--text-muted)] uppercase tracking-wide", children: [
-      /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-1 text-[var(--text-secondary)]", children: [
-        icon,
-        label
-      ] }),
-      /* @__PURE__ */ jsx8("span", { className: "tabular-nums", children: unit ? `${value}${unit} / ${max}${unit}` : `${Math.round(percent)}%` })
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ jsxs7("span", { className: "flex shrink-0 items-center gap-1 text-[10px] font-mono text-[var(--text-secondary)] uppercase tracking-wide", children: [
+      icon,
+      label
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "h-1.5 w-full bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8("div", { className: "h-1.5 min-w-0 flex-1 bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn("h-full rounded-full transition-all duration-500", barColor),
         style: { width: `${percent}%` }
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[10px] font-mono tabular-nums text-[var(--text-muted)]", children: unit ? `${value}${unit}/${max}${unit}` : `${Math.round(percent)}%` })
   ] });
 }
 
@@ -866,7 +868,7 @@ function NewSandboxCard({ onClick, className }) {
       type: "button",
       onClick,
       className: cn(
-        "border-2 border-dashed border-[var(--border-subtle)] rounded-xl p-6 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] transition-all duration-300 w-full min-h-[200px]",
+        "border-2 border-dashed border-[var(--border-subtle)] rounded-xl p-5 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] transition-all duration-300 w-full min-h-[160px]",
         className
       ),
       children: [
@@ -1274,7 +1276,7 @@ import {
   X,
   XCircle
 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var statusConfig2 = {
   pending: {
     icon: Clock,
@@ -1358,40 +1360,38 @@ function VariantList({
   isActioning,
   className
 }) {
-  return /* @__PURE__ */ jsx13("div", { className: `space-y-3 ${className || ""}`, children: variants.map((variant) => {
+  return /* @__PURE__ */ jsx13("div", { className: `space-y-2 ${className || ""}`, children: variants.map((variant) => {
     const status = statusConfig2[variant.status];
     const StatusIcon = status.icon;
     const isSelected = variant.id === selectedId;
     return /* @__PURE__ */ jsxs12(
       "div",
       {
-        className: `cursor-pointer rounded-lg border p-4 transition-colors ${isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)] hover:border-[var(--border-default)] hover:bg-[var(--depth-3)]"}`,
+        className: `cursor-pointer rounded-lg border px-3 py-2.5 transition-colors ${isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)] hover:border-[var(--border-default)] hover:bg-[var(--depth-3)]"}`,
         onClick: () => onSelect?.(variant.id),
         children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsxs12(Badge, { className: `${status.bg} ${status.border} ${status.color}`, children: [
-                /* @__PURE__ */ jsx13(
-                  StatusIcon,
-                  {
-                    className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`
-                  }
-                ),
-                status.label
-              ] }),
-              /* @__PURE__ */ jsx13("span", { className: "font-medium text-[var(--text-primary)]", children: variant.label }),
-              variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "text-sm text-[var(--text-muted)]", children: [
-                "(",
-                variant.sublabel,
-                ")"
-              ] }),
-              variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1 text-sm text-[var(--text-muted)]", children: [
-                /* @__PURE__ */ jsx13(Timer, { className: "h-3 w-3" }),
-                (variant.durationMs / 1e3).toFixed(2),
-                "s"
-              ] })
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs12(Badge, { className: `shrink-0 ${status.bg} ${status.border} ${status.color}`, children: [
+              /* @__PURE__ */ jsx13(
+                StatusIcon,
+                {
+                  className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`
+                }
+              ),
+              status.label
+            ] }),
+            /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: variant.label }),
+            variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: [
+              "(",
+              variant.sublabel,
+              ")"
+            ] }),
+            variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex shrink-0 items-center gap-1 text-xs text-[var(--text-muted)]", children: [
+              /* @__PURE__ */ jsx13(Timer, { className: "h-3 w-3" }),
+              (variant.durationMs / 1e3).toFixed(1),
+              "s"
             ] }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
               variant.outcome && /* @__PURE__ */ jsx13(
                 Badge,
                 {
@@ -1399,20 +1399,20 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12(Fragment6, { children: [
                 /* @__PURE__ */ jsxs12(
                   Button,
                   {
                     variant: "outline",
                     size: "sm",
-                    className: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] hover:bg-[var(--surface-success-border)]",
+                    className: "h-7 border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] px-2 text-xs text-[var(--surface-success-text)] hover:bg-[var(--surface-success-border)]",
                     onClick: (e) => {
                       e.stopPropagation();
                       onAccept(variant.id);
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx13(Check3, { className: "mr-1 h-4 w-4" }),
+                      /* @__PURE__ */ jsx13(Check3, { className: "mr-1 h-3 w-3" }),
                       "Accept"
                     ]
                   }
@@ -1422,14 +1422,14 @@ function VariantList({
                   {
                     variant: "outline",
                     size: "sm",
-                    className: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] hover:bg-[var(--surface-danger-border)]",
+                    className: "h-7 border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-2 text-xs text-[var(--surface-danger-text)] hover:bg-[var(--surface-danger-border)]",
                     onClick: (e) => {
                       e.stopPropagation();
                       onReject(variant.id);
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx13(X, { className: "mr-1 h-4 w-4" }),
+                      /* @__PURE__ */ jsx13(X, { className: "mr-1 h-3 w-3" }),
                       "Reject"
                     ]
                   }
@@ -1440,18 +1440,18 @@ function VariantList({
                 {
                   variant: "ghost",
                   size: "sm",
-                  className: "text-[var(--text-muted)] hover:text-[var(--text-primary)]",
+                  className: "h-7 w-7 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]",
                   onClick: (e) => {
                     e.stopPropagation();
                     window.open(variant.detailsUrl, "_blank");
                   },
-                  children: /* @__PURE__ */ jsx13(ExternalLink2, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx13(ExternalLink2, { className: "h-3.5 w-3.5" })
                 }
               )
             ] })
           ] }),
-          variant.error && /* @__PURE__ */ jsx13("p", { className: "mt-2 text-sm text-[var(--surface-danger-text)]", children: variant.error }),
-          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--text-muted)]", children: variant.summary })
+          variant.error && /* @__PURE__ */ jsx13("p", { className: "mt-1.5 text-xs text-[var(--surface-danger-text)]", children: variant.error }),
+          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-1.5 line-clamp-2 text-xs text-[var(--text-muted)]", children: variant.summary })
         ]
       },
       variant.id

package/dist/{chunk-FFOXUHOF.js → chunk-FNYJFCGU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -933,7 +933,7 @@ function MarkdownDocumentEditor({
     "div",
     {
       className: cn(
-        "flex min-h-[24rem] w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)]",
+        "flex min-h-[14rem] w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)]",
         className
       ),
       children: [
@@ -1213,7 +1213,7 @@ function CollaborativeDocumentSurface({
         placeholder,
         autoFocus,
         readOnly,
-        className: cn("h-full min-h-[28rem]", className),
+        className: cn("h-full min-h-[16rem]", className),
         onUpdate: (editor) => {
           onChange?.(normalizeMarkdown(htmlToMarkdown(editor.getHTML())));
         }

package/dist/{chunk-5CEMHKBP.js → chunk-GW4GRAWJ.js}

@@ -1,6 +1,6 @@
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -40,7 +40,8 @@ function ChatMessage({
           "div",
           {
             className: cn(
-              "min-w-0 max-w-[85%] space-y-1.5 rounded-[var(--radius-xl)] border px-4 py-3",
+              "min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border",
+              "px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
               isUser ? "border-[var(--border-accent)] bg-[var(--depth-3)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)]"
             ),
             children: [

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -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-JNXPANWM.js");
+  const module = await import("./document-editor-pane-DWWUTTTZ.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-section)] text-sm text-[var(--text-muted)]", children: "Loading editor\u2026" })
+            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[12rem] 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(