@tangle-network/sandbox-ui 0.4.0 → 0.5.0

package/dist/{chunk-DQYODCBN.js → chunk-P24K22CV.js}

@@ -7,30 +7,27 @@ import {
 import {
   EmptyState,
   Input
-} from "./chunk-MUOL44AE.js";
+} from "./chunk-BRBTD7RH.js";
 import {
   ChatContainer
-} from "./chunk-GVUW4VDD.js";
+} from "./chunk-R3IU37AW.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-YDBXQQLC.js";
+} from "./chunk-VBWY44UU.js";
 import {
   FileArtifactPane,
   FileTree,
   filterFileTree
-} from "./chunk-HYLTXGOI.js";
+} from "./chunk-WQH233GF.js";
 import {
   ArtifactPane
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-LTFK464G.js";
+} from "./chunk-H5XYSFYE.js";
 import {
   Badge
-} from "./chunk-MXCSSOGH.js";
-import {
-  Button
-} from "./chunk-HWLX5NME.js";
+} from "./chunk-TDYQBLL5.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -166,7 +163,7 @@ function MobileDrawer({ side, title, header, onClose, children }) {
         type: "button",
         "aria-label": `Close ${title}`,
         onClick: onClose,
-        className: "absolute inset-0 bg-black/55 backdrop-blur-[2px]"
+        className: "absolute inset-0 bg-black/70"
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -784,6 +781,7 @@ function RuntimePane({
   subtitle = "Session state, execution output, and inspection surfaces",
   statusBanner,
   statusBar,
+  content,
   terminal,
   audit,
   inspector,
@@ -805,7 +803,7 @@ function RuntimePane({
         ] }),
         statusBanner && /* @__PURE__ */ jsx6(StatusBanner, { ...statusBanner }),
         statusBar && /* @__PURE__ */ jsx6(StatusBar, { ...statusBar }),
-        /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-[var(--border-subtle)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
+        content ? /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-hidden", children: content }) : /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-[var(--border-subtle)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
           /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: terminal ? /* @__PURE__ */ jsx6(
             TerminalPanel,
             {
@@ -894,11 +892,11 @@ function badgeClasses(tone = "neutral") {
     case "accent":
       return "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]";
     case "success":
-      return "border-emerald-500/30 bg-emerald-500/10 text-emerald-200";
+      return "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]";
     case "warning":
-      return "border-amber-500/30 bg-amber-500/10 text-amber-100";
+      return "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]";
     case "danger":
-      return "border-red-500/30 bg-red-500/10 text-red-200";
+      return "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]";
     default:
       return "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-secondary)]";
   }
@@ -960,39 +958,32 @@ function SessionSidebar({
       isActive: currentItemId === item.id
     })).length
   ])), [currentItemId, filters, orderedItems, sessionsById]);
-  return /* @__PURE__ */ jsxs7("aside", { className: cn("flex w-72 shrink-0 flex-col border-r border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.12),transparent_26%),var(--bg-card)]/94 backdrop-blur-xl", className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "border-b border-[var(--border-subtle)] px-4 py-4", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-subtle)] bg-[linear-gradient(135deg,rgba(82,164,255,0.22),rgba(82,164,255,0.08))] text-[var(--accent-text)] shadow-[var(--shadow-accent)]", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-semibold tracking-[0.01em] text-[var(--text-primary)]", children: title }),
-          subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-xs text-[var(--text-muted)]", children: subtitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "mt-4 grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-3 py-2", children: [
-          /* @__PURE__ */ jsx7("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Tracked" }),
-          /* @__PURE__ */ jsx7("div", { className: "mt-1 text-sm font-semibold text-[var(--text-primary)]", children: items.length })
+  return /* @__PURE__ */ jsxs7("aside", { className: cn("flex w-64 shrink-0 flex-col border-r border-[var(--border-subtle)] bg-[var(--depth-2)]", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "border-b border-[var(--border-subtle)] px-3 py-3", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 min-w-0", children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-[var(--border-accent)]/50 bg-[var(--accent-surface-soft)] text-[var(--accent-text)]", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-semibold tracking-[0.01em] text-[var(--text-primary)]", children: title }),
+            subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-[11px] text-[var(--text-muted)]", children: subtitle })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-3 py-2", children: [
-          /* @__PURE__ */ jsx7("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Running" }),
-          /* @__PURE__ */ jsx7("div", { className: "mt-1 text-sm font-semibold text-[var(--text-primary)]", children: runningCount })
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 shrink-0", children: [
+          runningCount > 0 && /* @__PURE__ */ jsx7("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--accent-text)]", children: runningCount }),
+          onCreate && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              onClick: onCreate,
+              title: createLabel,
+              className: "flex h-6 w-6 items-center justify-center rounded-md border border-[var(--border-default)] bg-[var(--bg-section)] text-[var(--text-muted)] transition-colors hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+              children: /* @__PURE__ */ jsx7(Plus, { className: "h-3.5 w-3.5" })
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7(
-        Button,
-        {
-          type: "button",
-          onClick: onCreate,
-          className: "mt-4 w-full justify-center gap-2 rounded-xl bg-[linear-gradient(135deg,var(--brand-cool),var(--brand-glow))] text-white shadow-[var(--shadow-accent)] hover:translate-y-[-1px] hover:brightness-105",
-          children: [
-            /* @__PURE__ */ jsx7(Plus, { className: "h-4 w-4" }),
-            createLabel
-          ]
-        }
-      ),
-      enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative mt-3", children: [
-        /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-dim)]" }),
+      enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative mt-2.5", children: [
+        /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--text-dim)]" }),
         /* @__PURE__ */ jsx7(
           "input",
           {
@@ -1000,11 +991,11 @@ function SessionSidebar({
             onChange: (event) => setQuery(event.target.value),
             placeholder: searchPlaceholder,
             "aria-label": searchPlaceholder,
-            className: "h-10 w-full rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] pl-9 pr-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-dim)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/45"
+            className: "h-8 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] pl-8 pr-3 text-xs text-[var(--text-primary)] placeholder:text-[var(--text-dim)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
           }
         )
       ] }),
-      filters.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-3 flex flex-wrap gap-2", children: filters.map((filter) => {
+      filters.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-wrap gap-1", children: filters.map((filter) => {
         const isSelected = activeFilterId === filter.id;
         return /* @__PURE__ */ jsxs7(
           "button",
@@ -1012,19 +1003,19 @@ function SessionSidebar({
             type: "button",
             onClick: () => setActiveFilterId(filter.id),
             className: cn(
-              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors",
-              isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors",
+              isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
             ),
             children: [
               /* @__PURE__ */ jsx7("span", { children: filter.label }),
-              /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-[var(--bg-card)] px-1.5 py-0.5 text-[10px] text-[var(--text-secondary)]", children: filterCounts[filter.id] ?? 0 })
+              /* @__PURE__ */ jsx7("span", { className: "text-[9px] opacity-70", children: filterCounts[filter.id] ?? 0 })
             ]
           },
           filter.id
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-3 py-3", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] px-4 py-5 text-sm text-[var(--text-muted)]", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-1.5", children: visibleItems.map((item) => {
+    /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-2 py-2", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-4 text-xs text-[var(--text-muted)]", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-1", children: visibleItems.map((item) => {
       const session = sessionsById.get(item.id) ?? null;
       const isActive = currentItemId === item.id;
       const status = session?.status ?? item.status;
@@ -1036,8 +1027,8 @@ function SessionSidebar({
         "div",
         {
           className: cn(
-            "group flex items-start gap-2 rounded-[calc(var(--radius-lg)+2px)] border px-2 py-2 transition-colors backdrop-blur-sm",
-            isActive ? "border-[var(--border-accent)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.16),transparent_40%),var(--accent-surface-soft)] shadow-[var(--shadow-card)]" : "border-transparent bg-transparent hover:border-[var(--border-subtle)] hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)]"
+            "group flex items-start gap-2 rounded-[var(--radius-md)] border px-2 py-2 transition-colors",
+            isActive ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] shadow-[var(--shadow-card)]" : "border-[var(--border-subtle)] bg-transparent hover:border-[var(--border-default)] hover:bg-[var(--bg-section)]"
           ),
           children: [
             /* @__PURE__ */ jsxs7(
@@ -1052,17 +1043,17 @@ function SessionSidebar({
                   navigateToHref(item.href);
                 },
                 "aria-current": isActive ? "page" : void 0,
-                className: "min-w-0 flex flex-1 items-start gap-3 rounded-[var(--radius-lg)] px-1 py-1 text-left",
+                className: "min-w-0 flex flex-1 items-start gap-2.5 text-left",
                 children: [
-                  /* @__PURE__ */ jsx7("span", { className: cn("mt-1 h-2.5 w-2.5 shrink-0 rounded-full", statusClasses(status)) }),
+                  /* @__PURE__ */ jsx7("span", { className: cn("mt-[5px] h-2 w-2 shrink-0 rounded-full", statusClasses(status)) }),
                   /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: item.title }),
-                    item.subtitle && /* @__PURE__ */ jsx7("div", { className: "mt-0.5 truncate text-xs text-[var(--text-muted)]", children: item.subtitle }),
-                    visibleBadges.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: visibleBadges.map((badge) => /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx7("div", { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: item.title }),
+                    item.subtitle && /* @__PURE__ */ jsx7("div", { className: "mt-0.5 truncate text-[11px] leading-tight text-[var(--text-muted)]", children: item.subtitle }),
+                    visibleBadges.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: visibleBadges.map((badge) => /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: cn(
-                          "inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em]",
+                          "inline-flex items-center rounded-full border px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.06em]",
                           badgeClasses(badge.tone)
                         ),
                         children: badge.label
@@ -1091,8 +1082,8 @@ function SessionSidebar({
         }
       ) }, item.id);
     }) }) }),
-    activityMonitor && /* @__PURE__ */ jsx7("div", { className: "border-t border-[var(--border-subtle)] px-3 py-3", children: activityMonitor }),
-    links.length > 0 && /* @__PURE__ */ jsx7("nav", { "aria-label": "Workspace sections", className: "border-t border-[var(--border-subtle)] px-3 py-3", children: /* @__PURE__ */ jsx7("div", { className: "space-y-1", children: links.map((link) => {
+    activityMonitor && /* @__PURE__ */ jsx7("div", { className: "border-t border-[var(--border-subtle)] px-2 py-2", children: activityMonitor }),
+    links.length > 0 && /* @__PURE__ */ jsx7("nav", { "aria-label": "Workspace sections", className: "border-t border-[var(--border-subtle)] px-2 py-2", children: /* @__PURE__ */ jsx7("div", { className: "space-y-0.5", children: links.map((link) => {
       const Icon = iconForLink(link.icon);
       return /* @__PURE__ */ jsxs7(
         "button",
@@ -1105,9 +1096,9 @@ function SessionSidebar({
             }
             navigateToHref(link.href);
           },
-          className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] px-3 py-2 text-left text-sm text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-section)] hover:text-[var(--text-primary)]",
+          className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-left text-xs text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-section)] hover:text-[var(--text-primary)]",
           children: [
-            /* @__PURE__ */ jsx7(Icon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx7(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
             /* @__PURE__ */ jsx7("span", { className: "truncate", children: link.label })
           ]
         },
@@ -1168,7 +1159,7 @@ function SessionActivityMonitor({
       return /* @__PURE__ */ jsxs8(
         "div",
         {
-          className: "rounded-[calc(var(--radius-lg)+2px)] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent),var(--bg-card)]/96 p-3 shadow-[var(--shadow-card)]",
+          className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] p-3 shadow-[var(--shadow-card)]",
           children: [
             /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3", children: [
               /* @__PURE__ */ jsxs8("div", { children: [
@@ -1437,7 +1428,7 @@ function SandboxWorkbench({
     }
     onArtifactChange?.(artifactId);
   };
-  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[calc(var(--radius-xl)+2px)] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.16),transparent_34%),linear-gradient(135deg,rgba(98,114,243,0.14),rgba(255,255,255,0.03)_42%,transparent_76%)] px-4 py-3.5 shadow-[var(--shadow-accent)] backdrop-blur-sm", children: [
+  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[var(--depth-3)] px-4 py-3.5", children: [
     /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsx9("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--brand-cool)]", children: "Tangle Sandbox" }),
       /* @__PURE__ */ jsx9("div", { className: "truncate text-[17px] font-semibold tracking-[0.01em] text-[var(--text-primary)]", children: title }),
@@ -1460,7 +1451,7 @@ function SandboxWorkbench({
       meta: session.meta,
       headerActions: session.headerActions,
       className: "h-full",
-      contentClassName: "bg-[radial-gradient(circle_at_top,rgba(82,164,255,0.1),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.02),transparent_22%)]",
+      contentClassName: "bg-[var(--bg-dark)]",
       children: /* @__PURE__ */ jsx9(
         ChatContainer,
         {
@@ -1481,7 +1472,7 @@ function SandboxWorkbench({
         onClose: onArtifactClose
       }
     ),
-    /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto bg-[linear-gradient(180deg,rgba(255,255,255,0.02),transparent)]", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto bg-[var(--bg-dark)]", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
       EmptyState,
       {
         icon: /* @__PURE__ */ jsx9(Boxes, { className: "h-8 w-8" }),