@tangle-network/sandbox-ui 0.5.2 → 0.6.1

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-RKXIRRKQ.js";
 import "./chunk-CNWVHQFY.js";
-import "./chunk-WC7QTWPN.js";
+import "./chunk-ZMWWE5RF.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-STHB4N22.js → chunk-6V4XVKFY.js}

@@ -370,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",
@@ -465,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: [
               "$",
@@ -486,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)) }),
@@ -688,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
   ] });
 }
@@ -707,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)}%` })
   ] });
 }
 
@@ -870,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: [
@@ -1278,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,
@@ -1362,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,
                 {
@@ -1403,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"
                     ]
                   }
@@ -1426,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"
                     ]
                   }
@@ -1444,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