@tangle-network/sandbox-ui 0.91.5 → 0.92.0

package/dist/chat.js

@@ -19,7 +19,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-QMY3XVH3.js";
+} from "./chunk-GUULFESL.js";
 import "./chunk-TK46XFLM.js";
 import {
   MENTION_PILL_CLASS

package/dist/{chunk-QMY3XVH3.js → chunk-GUULFESL.js}

@@ -1561,17 +1561,19 @@ function AgentComposer({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx4("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: controls ?? /* @__PURE__ */ jsx4(
-              AgentSessionControls,
-              {
-                context,
-                harness,
-                profile,
-                model,
-                reasoning
-              }
-            ) }),
-            trailing && /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 items-center gap-2", children: trailing }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+              controls ?? /* @__PURE__ */ jsx4(
+                AgentSessionControls,
+                {
+                  context,
+                  harness,
+                  profile,
+                  model,
+                  reasoning
+                }
+              ),
+              trailing && /* @__PURE__ */ jsx4("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: trailing })
+            ] }),
             busy && onCancel ? /* @__PURE__ */ jsx4(
               "button",
               {

package/dist/{chunk-H237JF3H.js → chunk-UB3V2YAZ.js}

@@ -2323,11 +2323,22 @@ function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRa
 }
 
 // src/dashboard/sidebar-layout.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { Fragment as Fragment10, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var HIDE_BELOW_CLASS = {
   md: "max-md:hidden",
   lg: "max-lg:hidden"
 };
+var SHOW_BELOW_CLASS = {
+  md: "md:hidden",
+  lg: "lg:hidden"
+};
+function MenuIcon2({ className }) {
+  return /* @__PURE__ */ jsx15("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M3 6h18M3 12h18M3 18h18" }) });
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsx15("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M18 6 6 18M6 6l12 12" }) });
+}
 function DefaultLink3({
   href,
   to,
@@ -2370,6 +2381,94 @@ function SidebarLayoutInner({
   } : void 0;
   const hasProfile = user !== void 0 || onLogout !== void 0 || onSettingsClick !== void 0;
   const showLabels = railLabels && !railCollapsed;
+  const [mobileNavOpen, setMobileNavOpen] = React10.useState(false);
+  const closeMobileNav = React10.useCallback(() => setMobileNavOpen(false), []);
+  function renderNavItems({
+    showLabels: showLabels2,
+    onNavigate
+  }) {
+    return navItems.map((item) => {
+      if (item.expandable) {
+        return /* @__PURE__ */ jsx15(
+          RailExpandable,
+          {
+            icon: item.icon,
+            label: item.label,
+            href: item.href,
+            isActive: activeId === item.id,
+            showLabel: showLabels2,
+            subItems: item.subItems,
+            loadSubItems: item.loadSubItems,
+            activeSubIds: item.subActiveIds,
+            emptyLabel: item.emptyLabel,
+            defaultOpen: item.defaultOpen,
+            onNavigate,
+            LinkComponent
+          },
+          item.id
+        );
+      }
+      if (item.flyoutItems && item.flyoutItems.length > 0) {
+        const activeSet = new Set(item.flyoutActiveIds ?? []);
+        return /* @__PURE__ */ jsx15(
+          RailFlyout,
+          {
+            icon: item.icon,
+            label: item.label,
+            title: item.label,
+            showLabel: showLabels2,
+            isActive: activeId === item.id || item.flyoutItems.some((f) => activeSet.has(f.id)),
+            children: item.flyoutItems.map((f) => {
+              const FIcon = f.icon;
+              const active = activeSet.has(f.id);
+              return /* @__PURE__ */ jsxs14(
+                Link,
+                {
+                  href: f.href,
+                  to: f.href,
+                  onClick: onNavigate,
+                  ...f.prefetch !== void 0 ? { prefetch: f.prefetch } : {},
+                  className: cn(
+                    "flex h-9 items-center gap-2.5 rounded-lg px-2.5 text-sm transition-colors",
+                    active ? "bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx15(FIcon, { className: "h-4 w-4 shrink-0" }),
+                    /* @__PURE__ */ jsx15("span", { className: "truncate", children: f.label })
+                  ]
+                },
+                f.id
+              );
+            })
+          },
+          item.id
+        );
+      }
+      return item.togglesPanel ? /* @__PURE__ */ jsx15(
+        RailButton,
+        {
+          icon: item.icon,
+          label: item.label,
+          badge: item.badge,
+          isActive: panelOpen,
+          onClick: () => {
+            togglePanel();
+            onNavigate?.();
+          },
+          showLabel: showLabels2
+        },
+        item.id
+      ) : /* @__PURE__ */ jsx15(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: showLabels2, variant: item.variant, asChild: true, children: /* @__PURE__ */ jsx15(
+        Link,
+        {
+          href: item.href,
+          to: item.href,
+          onClick: onNavigate,
+          ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {}
+        }
+      ) }, item.id);
+    });
+  }
   return /* @__PURE__ */ jsxs14("div", { className: cn("min-h-screen bg-surface text-foreground", className), children: [
     /* @__PURE__ */ jsx15("div", { className: cn(hideBelow && HIDE_BELOW_CLASS[hideBelow]), children: /* @__PURE__ */ jsxs14(Sidebar, { className: sidebarClassName, children: [
       /* @__PURE__ */ jsxs14(SidebarRail, { children: [
@@ -2385,84 +2484,7 @@ function SidebarLayoutInner({
             children: railHeaderContent
           }
         ),
-        /* @__PURE__ */ jsx15(SidebarRailNav, { className: cn(showLabels ? "px-2" : void 0, expandOnEmptyClick && "cursor-pointer"), onClick: expandOnEmptyClick, children: navItems.map((item) => {
-          if (item.expandable) {
-            return /* @__PURE__ */ jsx15(
-              RailExpandable,
-              {
-                icon: item.icon,
-                label: item.label,
-                href: item.href,
-                isActive: activeId === item.id,
-                showLabel: showLabels,
-                subItems: item.subItems,
-                loadSubItems: item.loadSubItems,
-                activeSubIds: item.subActiveIds,
-                emptyLabel: item.emptyLabel,
-                defaultOpen: item.defaultOpen,
-                onNavigate: handleNavClick,
-                LinkComponent
-              },
-              item.id
-            );
-          }
-          if (item.flyoutItems && item.flyoutItems.length > 0) {
-            const activeSet = new Set(item.flyoutActiveIds ?? []);
-            return /* @__PURE__ */ jsx15(
-              RailFlyout,
-              {
-                icon: item.icon,
-                label: item.label,
-                title: item.label,
-                showLabel: showLabels,
-                isActive: activeId === item.id || item.flyoutItems.some((f) => activeSet.has(f.id)),
-                children: item.flyoutItems.map((f) => {
-                  const FIcon = f.icon;
-                  const active = activeSet.has(f.id);
-                  return /* @__PURE__ */ jsxs14(
-                    Link,
-                    {
-                      href: f.href,
-                      to: f.href,
-                      onClick: handleNavClick,
-                      ...f.prefetch !== void 0 ? { prefetch: f.prefetch } : {},
-                      className: cn(
-                        "flex h-9 items-center gap-2.5 rounded-lg px-2.5 text-sm transition-colors",
-                        active ? "bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx15(FIcon, { className: "h-4 w-4 shrink-0" }),
-                        /* @__PURE__ */ jsx15("span", { className: "truncate", children: f.label })
-                      ]
-                    },
-                    f.id
-                  );
-                })
-              },
-              item.id
-            );
-          }
-          return item.togglesPanel ? /* @__PURE__ */ jsx15(
-            RailButton,
-            {
-              icon: item.icon,
-              label: item.label,
-              badge: item.badge,
-              isActive: panelOpen,
-              onClick: togglePanel,
-              showLabel: showLabels
-            },
-            item.id
-          ) : /* @__PURE__ */ jsx15(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: showLabels, variant: item.variant, asChild: true, children: /* @__PURE__ */ jsx15(
-            Link,
-            {
-              href: item.href,
-              to: item.href,
-              onClick: handleNavClick,
-              ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {}
-            }
-          ) }, item.id);
-        }) }),
+        /* @__PURE__ */ jsx15(SidebarRailNav, { className: cn(showLabels ? "px-2" : void 0, expandOnEmptyClick && "cursor-pointer"), onClick: expandOnEmptyClick, children: renderNavItems({ showLabels, onNavigate: handleNavClick }) }),
         (railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs14(SidebarRailFooter, { className: cn("border-t border-[var(--md3-outline-variant)] pt-2", showLabels && "items-stretch px-2"), children: [
           railFooter,
           hasProfile && /* @__PURE__ */ jsx15(
@@ -2483,7 +2505,171 @@ function SidebarLayoutInner({
       ] }),
       panel != null && /* @__PURE__ */ jsx15(SidebarPanel, { children: panel })
     ] }) }),
-    /* @__PURE__ */ jsx15(SidebarContent, { className: contentClassName, children })
+    /* @__PURE__ */ jsxs14(SidebarContent, { className: contentClassName, children: [
+      hideBelow && /* @__PURE__ */ jsxs14(
+        "header",
+        {
+          className: cn(
+            "flex h-14 shrink-0 items-center gap-1 border-b border-[var(--md3-outline-variant)] bg-surface px-2",
+            SHOW_BELOW_CLASS[hideBelow]
+          ),
+          children: [
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Open navigation",
+                "aria-expanded": mobileNavOpen,
+                "aria-controls": "sidebar-mobile-nav",
+                "aria-haspopup": "dialog",
+                onClick: () => setMobileNavOpen(true),
+                className: "flex size-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+                children: /* @__PURE__ */ jsx15(MenuIcon2, { className: "size-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx15("div", { className: "flex min-w-0 flex-1 items-center", children: railHeaderContent ?? (logo !== void 0 ? /* @__PURE__ */ jsx15(Link, { href: logoHref, to: logoHref, className: "flex min-w-0 items-center", children: logo }) : null) }),
+            hasProfile && /* @__PURE__ */ jsx15(
+              ProfileAvatar,
+              {
+                user: user ?? void 0,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                appearance,
+                LinkComponent: Link,
+                children: profileMenuItems
+              }
+            )
+          ]
+        }
+      ),
+      children
+    ] }),
+    hideBelow && mobileNavOpen && /* @__PURE__ */ jsx15(
+      MobileNavDrawer,
+      {
+        breakpoint: hideBelow,
+        onClose: closeMobileNav,
+        header: railHeaderContent ?? logo,
+        footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs14(Fragment10, { children: [
+          railFooter,
+          hasProfile && /* @__PURE__ */ jsx15(
+            ProfileAvatar,
+            {
+              user: user ?? void 0,
+              isLoading,
+              onLogout,
+              onSettingsClick,
+              settingsHref,
+              showDetails: true,
+              appearance,
+              LinkComponent: Link,
+              children: profileMenuItems
+            }
+          )
+        ] }) : null,
+        panel,
+        children: renderNavItems({
+          showLabels: true,
+          onNavigate: () => {
+            handleNavClick?.();
+            closeMobileNav();
+          }
+        })
+      }
+    )
+  ] });
+}
+function MobileNavDrawer({
+  breakpoint,
+  onClose,
+  header,
+  footer,
+  panel,
+  children
+}) {
+  const panelRef = React10.useRef(null);
+  React10.useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const root = panelRef.current;
+      if (!root) return;
+      const focusable = root.querySelectorAll(
+        'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [onClose]);
+  React10.useEffect(() => {
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, []);
+  React10.useEffect(() => {
+    panelRef.current?.querySelector("button,a[href]")?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs14("div", { className: cn("fixed inset-0 z-50", SHOW_BELOW_CLASS[breakpoint]), children: [
+    /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close navigation",
+        tabIndex: -1,
+        onClick: onClose,
+        className: "absolute inset-0 bg-black/50"
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        ref: panelRef,
+        id: "sidebar-mobile-nav",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Navigation",
+        style: { width: SIDEBAR_MOBILE_WIDTH },
+        className: "absolute inset-y-0 left-0 flex max-w-[85vw] flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex h-14 shrink-0 items-center gap-1 border-b border-[var(--md3-outline-variant)] px-2", children: [
+            /* @__PURE__ */ jsx15("div", { className: "flex min-w-0 flex-1 items-center", children: header }),
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close navigation",
+                onClick: onClose,
+                className: "flex size-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+                children: /* @__PURE__ */ jsx15(CloseIcon, { className: "size-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs14("nav", { "aria-label": "Sections", className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2", children: [
+            children,
+            panel != null && /* @__PURE__ */ jsx15("div", { className: "mt-2 border-t border-[var(--md3-outline-variant)] pt-2", children: panel })
+          ] }),
+          footer != null && /* @__PURE__ */ jsx15("div", { className: "shrink-0 border-t border-[var(--md3-outline-variant)] px-2 py-2", children: footer })
+        ]
+      }
+    )
   ] });
 }
 function SidebarLayout({
@@ -2523,7 +2709,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator4,
   DropdownMenuTrigger as DropdownMenuTrigger4
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -2557,7 +2743,7 @@ function ProfileSelector({
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment10, { children: [
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment11, { children: [
           /* @__PURE__ */ jsx16(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx16(DropdownMenuLabel2, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs15(
@@ -2582,7 +2768,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment10, { children: [
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs15(Fragment11, { children: [
           /* @__PURE__ */ jsx16(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx16(DropdownMenuLabel2, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs15(
@@ -2619,7 +2805,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs15(Fragment10, { children: [
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs15(Fragment11, { children: [
           /* @__PURE__ */ jsx16(DropdownMenuSeparator4, {}),
           onCreateClick && /* @__PURE__ */ jsxs15(
             DropdownMenuItem4,
@@ -2714,7 +2900,7 @@ function ProfileComparison({
 }
 
 // src/dashboard/metric-area-chart.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var TONE_VARS = {
   primary: "var(--brand-primary, hsl(var(--primary)))",
@@ -2761,7 +2947,7 @@ function MetricAreaChart({
   emptyState,
   className
 }) {
-  const gradientId = React10.useId();
+  const gradientId = React11.useId();
   const width = 400;
   const values = points.map((p) => p.value).filter((v) => v !== null);
   const latest = values.length > 0 ? values[values.length - 1] : null;
@@ -2821,7 +3007,7 @@ function MetricAreaChart({
                 /* @__PURE__ */ jsx17("stop", { offset: "0%", stopColor: color, stopOpacity: 0.28 }),
                 /* @__PURE__ */ jsx17("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })
               ] }) }),
-              segments.map((segment) => /* @__PURE__ */ jsxs16(React10.Fragment, { children: [
+              segments.map((segment) => /* @__PURE__ */ jsxs16(React11.Fragment, { children: [
                 /* @__PURE__ */ jsx17("path", { d: segment.area, fill: `url(#${gradientId})` }),
                 /* @__PURE__ */ jsx17(
                   "path",
@@ -2861,7 +3047,7 @@ import {
 } from "lucide-react";
 import { Button as Button3 } from "@tangle-network/ui/primitives";
 import { Badge as Badge2 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment12, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
     icon: Clock3,
@@ -2984,7 +3170,7 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs17(Fragment12, { children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs17(Fragment13, { children: [
                 /* @__PURE__ */ jsxs17(
                   Button3,
                   {
@@ -3046,14 +3232,14 @@ function VariantList({
 
 // src/dashboard/system-logs.tsx
 import { Terminal as Terminal2 } from "lucide-react";
-import { useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
 import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function SystemLogsViewer({ apiUrl, token, className }) {
-  const [logs, setLogs] = useState6([]);
-  const [error, setError] = useState6(null);
-  const [isFollowing, setIsFollowing] = useState6(true);
-  const scrollRef = useRef4(null);
-  useEffect5(() => {
+  const [logs, setLogs] = useState7([]);
+  const [error, setError] = useState7(null);
+  const [isFollowing, setIsFollowing] = useState7(true);
+  const scrollRef = useRef5(null);
+  useEffect6(() => {
     let timeoutId;
     let backoff = 2e3;
     const controller = new AbortController();
@@ -3089,7 +3275,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
       clearTimeout(timeoutId);
     };
   }, [apiUrl, token]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isFollowing && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -3296,14 +3482,14 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
 }
 
 // src/dashboard/ports-list.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { Copy as Copy3, Check as Check5, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
-  const [newPort, setNewPort] = React12.useState("");
-  const [copiedPort, setCopiedPort] = React12.useState(null);
-  const copyTimerRef = React12.useRef(null);
-  React12.useEffect(() => {
+  const [newPort, setNewPort] = React13.useState("");
+  const [copiedPort, setCopiedPort] = React13.useState(null);
+  const copyTimerRef = React13.useRef(null);
+  React13.useEffect(() => {
     return () => {
       if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
     };
@@ -3397,7 +3583,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
 }
 
 // src/dashboard/process-list.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal3 } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function formatUptime(startedAt) {
@@ -3409,7 +3595,7 @@ function formatUptime(startedAt) {
   return `${Math.floor(ms / 36e5)}h ${Math.floor(ms % 36e5 / 6e4)}m`;
 }
 function ProcessList({ processes, onSpawn, onKill, loading = false, className }) {
-  const [newCommand, setNewCommand] = React13.useState("");
+  const [newCommand, setNewCommand] = React14.useState("");
   const handleSpawn = () => {
     const cmd = newCommand.trim();
     if (cmd) {
@@ -3482,11 +3668,11 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
 }
 
 // src/dashboard/network-config.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function NetworkConfig({ config, onUpdate, loading = false, className }) {
-  const [newCidr, setNewCidr] = React14.useState("");
+  const [newCidr, setNewCidr] = React15.useState("");
   const isValidCidr = (value) => {
     const match = value.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\/(\d{1,2})$/);
     if (!match) return false;
@@ -3590,9 +3776,9 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
 }
 
 // src/dashboard/backend-config.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { Bot, Plus as Plus7, RefreshCw as RefreshCw2, Trash2 as Trash25, Server, Wrench } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function BackendConfig({
   status,
   mcpServers,
@@ -3602,10 +3788,10 @@ function BackendConfig({
   loading = false,
   className
 }) {
-  const [showAddMcp, setShowAddMcp] = React15.useState(false);
-  const [mcpName, setMcpName] = React15.useState("");
-  const [mcpCommand, setMcpCommand] = React15.useState("");
-  const [mcpArgs, setMcpArgs] = React15.useState("");
+  const [showAddMcp, setShowAddMcp] = React16.useState(false);
+  const [mcpName, setMcpName] = React16.useState("");
+  const [mcpCommand, setMcpCommand] = React16.useState("");
+  const [mcpArgs, setMcpArgs] = React16.useState("");
   const handleAddMcp = () => {
     const name = mcpName.trim();
     const command = mcpCommand.trim();
@@ -3652,7 +3838,7 @@ function BackendConfig({
         ), children: status.running ? "Running" : "Stopped" }) }),
         /* @__PURE__ */ jsx25("dt", { className: "text-muted-foreground", children: "Model" }),
         /* @__PURE__ */ jsx25("dd", { className: "font-mono text-xs", children: status.model ?? "Default" }),
-        status.provider && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+        status.provider && /* @__PURE__ */ jsxs24(Fragment14, { children: [
           /* @__PURE__ */ jsx25("dt", { className: "text-muted-foreground", children: "Provider" }),
           /* @__PURE__ */ jsx25("dd", { className: "font-mono text-xs", children: status.provider })
         ] })
@@ -3763,7 +3949,7 @@ function BackendConfig({
 }
 
 // src/dashboard/snapshot-list.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { Camera, Clock as Clock5, HardDrive as HardDrive2, Plus as Plus8, RotateCcw } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatBytes(bytes) {
@@ -3780,8 +3966,8 @@ function formatDate(dateStr) {
   return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
 function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading = false, className }) {
-  const [showCreate, setShowCreate] = React16.useState(false);
-  const [tags, setTags] = React16.useState("");
+  const [showCreate, setShowCreate] = React17.useState(false);
+  const [tags, setTags] = React17.useState("");
   const handleCreate = () => {
     const tagList = tags.trim() ? tags.trim().split(",").map((t) => t.trim()).filter(Boolean) : void 0;
     onCreate(tagList);
@@ -3898,7 +4084,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
 }
 
 // src/dashboard/promo-banner.tsx
-import { Fragment as Fragment14, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 function PromoBanner({
   title,
   description,
@@ -3913,7 +4099,7 @@ function PromoBanner({
     "mt-6 inline-flex items-center gap-2 rounded-md border border-white/20 bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-medium text-[var(--btn-primary-text)] transition-colors",
     disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--btn-primary-hover)]"
   );
-  const buttonContent = /* @__PURE__ */ jsxs26(Fragment14, { children: [
+  const buttonContent = /* @__PURE__ */ jsxs26(Fragment15, { children: [
     buttonLabel,
     /* @__PURE__ */ jsxs26("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [
       /* @__PURE__ */ jsx27("path", { d: "M5 12h14" }),

package/dist/{chunk-S6J6JIIP.js → chunk-UKQOHN73.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-H237JF3H.js";
+} from "./chunk-UB3V2YAZ.js";
 import {
   TerminalView
 } from "./chunk-WYMAC3T3.js";

package/dist/dashboard.js

@@ -54,7 +54,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-H237JF3H.js";
+} from "./chunk-UB3V2YAZ.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -707,6 +707,10 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
   .size-11 {
     width: calc(var(--spacing) * 11);
     height: calc(var(--spacing) * 11);
@@ -1221,6 +1225,9 @@
   .max-w-\[85\%\] {
     max-width: 85%;
   }
+  .max-w-\[85vw\] {
+    max-width: 85vw;
+  }
   .max-w-\[90vw\] {
     max-width: 90vw;
   }
@@ -1445,6 +1452,9 @@
   .resize-y {
     resize: vertical;
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .\[scrollbar-gutter\:stable\] {
     scrollbar-gutter: stable;
   }
@@ -1685,6 +1695,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overscroll-x-contain {
+    overscroll-behavior-x: contain;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -3476,6 +3489,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3654,6 +3671,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[-ms-overflow-style\:none\] {
+    -ms-overflow-style: none;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -4569,6 +4589,9 @@
     .md\:flex {
       display: flex;
     }
+    .md\:hidden {
+      display: none;
+    }
     .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4687,6 +4710,9 @@
   .\[\&\:\:-moz-range-track\]\:bg-border::-moz-range-track {
     background-color: var(--color-border);
   }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+    display: none;
+  }
   .\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5::-webkit-slider-runnable-track {
     height: calc(var(--spacing) * 1.5);
   }

package/dist/index.js

@@ -91,7 +91,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-QMY3XVH3.js";
+} from "./chunk-GUULFESL.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -152,7 +152,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-S6J6JIIP.js";
+} from "./chunk-UKQOHN73.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -217,7 +217,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-H237JF3H.js";
+} from "./chunk-UB3V2YAZ.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/styles.css

@@ -707,6 +707,10 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
   .size-11 {
     width: calc(var(--spacing) * 11);
     height: calc(var(--spacing) * 11);
@@ -1221,6 +1225,9 @@
   .max-w-\[85\%\] {
     max-width: 85%;
   }
+  .max-w-\[85vw\] {
+    max-width: 85vw;
+  }
   .max-w-\[90vw\] {
     max-width: 90vw;
   }
@@ -1445,6 +1452,9 @@
   .resize-y {
     resize: vertical;
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .\[scrollbar-gutter\:stable\] {
     scrollbar-gutter: stable;
   }
@@ -1685,6 +1695,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overscroll-x-contain {
+    overscroll-behavior-x: contain;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -3476,6 +3489,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3654,6 +3671,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[-ms-overflow-style\:none\] {
+    -ms-overflow-style: none;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -4569,6 +4589,9 @@
     .md\:flex {
       display: flex;
     }
+    .md\:hidden {
+      display: none;
+    }
     .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4687,6 +4710,9 @@
   .\[\&\:\:-moz-range-track\]\:bg-border::-moz-range-track {
     background-color: var(--color-border);
   }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+    display: none;
+  }
   .\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5::-webkit-slider-runnable-track {
     height: calc(var(--spacing) * 1.5);
   }

package/dist/workbench.js

@@ -12,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-S6J6JIIP.js";
+} from "./chunk-UKQOHN73.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-H237JF3H.js";
+import "./chunk-UB3V2YAZ.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-WYMAC3T3.js";
 import "./chunk-KEYPUGS3.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.91.5",
+  "version": "0.92.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",