@tangle-network/sandbox-ui 0.62.0 → 0.64.0

package/dist/chat.d.ts

@@ -124,8 +124,21 @@ interface AgentSessionHarnessControl {
      * switch harness.
      */
     locked?: boolean;
-    /** Tooltip shown on the locked trigger. */
+    /** Tooltip shown on the locked trigger when no `onNewChat` is provided. */
     lockReason?: string;
+    /**
+     * Fork action for a locked harness. When provided, the locked trigger turns
+     * into an informative chip: hover or tap opens a small popover explaining the
+     * lock and offering a button that calls this to start a fresh session. When
+     * omitted, the locked trigger stays a plain inert button with `lockReason`.
+     */
+    onNewChat?: () => void;
+    /** Popover heading. Defaults to `Agent fixed to {harness} for this conversation.` */
+    lockTitle?: React.ReactNode;
+    /** Popover sub-line. Defaults to "Conversations stay on one agent." */
+    lockBody?: React.ReactNode;
+    /** Fork button label. Defaults to "New chat to switch agent". */
+    newChatLabel?: string;
 }
 interface AgentSessionModelControl {
     /** Canonical model id (provider-prefixed, e.g. "anthropic/claude-opus-4-8"). */

package/dist/chat.js

@@ -17,7 +17,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-R72QYE2U.js";
+} from "./chunk-2E3FJM56.js";
 import "./chunk-HU4B2M4K.js";
 import "./chunk-SF6LPMMN.js";
 import "./chunk-EI44GEQ5.js";

package/dist/{chunk-R72QYE2U.js → chunk-2E3FJM56.js}

@@ -156,7 +156,24 @@ import {
   reasoningEffortsFor
 } from "@tangle-network/agent-interface";
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import { ChevronDown as ChevronDown3, Lock, SlidersHorizontal } from "lucide-react";
+import { ChevronDown as ChevronDown3, Lock, Plus as Plus2, SlidersHorizontal } from "lucide-react";
+import * as React3 from "react";
+
+// src/lib/use-click-outside.ts
+import * as React from "react";
+function useClickOutside(onOutside) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    function handler(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onOutside();
+      }
+    }
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onOutside]);
+  return ref;
+}
 
 // src/chat/harness-model-compat.ts
 import {
@@ -173,21 +190,8 @@ function snapModelToHarness(harness, modelId, models) {
 
 // src/chat/agent-profile-picker.tsx
 import { Bot, Check, ChevronDown as ChevronDown2, Pencil, Plus, Trash2 } from "lucide-react";
-import * as React from "react";
+import * as React2 from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function useClickOutside(onOutside) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    function handler(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onOutside();
-      }
-    }
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [onOutside]);
-  return ref;
-}
 function profileSubtitle(profile) {
   if (profile.description) return profile.description;
   const count = profile.capabilities?.length ?? 0;
@@ -205,8 +209,8 @@ function AgentProfilePicker({
   className,
   side = "top"
 }) {
-  const [open, setOpen] = React.useState(false);
-  const [composing, setComposing] = React.useState(
+  const [open, setOpen] = React2.useState(false);
+  const [composing, setComposing] = React2.useState(
     null
   );
   const ref = useClickOutside(() => {
@@ -373,11 +377,11 @@ function ProfileForm({
   onCancel,
   onSave
 }) {
-  const [name, setName] = React.useState(initial?.name ?? "");
-  const [caps, setCaps] = React.useState(
+  const [name, setName] = React2.useState(initial?.name ?? "");
+  const [caps, setCaps] = React2.useState(
     initial?.capabilities ? [...initial.capabilities] : capabilities.map((c) => c.id)
   );
-  const [instructions, setInstructions] = React.useState(initial?.instructions ?? "");
+  const [instructions, setInstructions] = React2.useState(initial?.instructions ?? "");
   const toggle = (id) => setCaps(
     (prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
   );
@@ -466,6 +470,102 @@ function selectorIgnoreNote(harness) {
   if (ignoresEffort) return "Ignores reasoning effort";
   return null;
 }
+function InformativeLock({
+  label,
+  lockTitle,
+  lockBody,
+  newChatLabel,
+  onNewChat
+}) {
+  const [open, setOpen] = React3.useState(false);
+  const closeTimer = React3.useRef(null);
+  const ref = useClickOutside(() => setOpen(false));
+  const cancelClose = React3.useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const scheduleClose = React3.useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 150);
+  }, [cancelClose]);
+  React3.useEffect(() => cancelClose, [cancelClose]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref,
+      className: "relative inline-flex",
+      onMouseEnter: () => {
+        cancelClose();
+        setOpen(true);
+      },
+      onMouseLeave: scheduleClose,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen(true),
+            "data-state": open ? "open" : "closed",
+            "aria-label": "Agent harness (locked)",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            className: cn(
+              "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
+              "text-xs font-medium text-foreground shadow-sm transition-colors",
+              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(Lock, { className: "h-3 w-3 text-muted-foreground" }),
+              /* @__PURE__ */ jsx3("span", { children: label })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            role: "dialog",
+            className: cn(
+              "absolute bottom-full left-0 z-50 mb-2 w-72 rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-3",
+              "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs3("p", { className: "flex items-start gap-2 text-sm font-medium text-foreground", children: [
+                /* @__PURE__ */ jsx3(Lock, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx3("span", { children: lockTitle ?? `Agent fixed to ${label} for this conversation.` })
+              ] }),
+              /* @__PURE__ */ jsx3("p", { className: "mt-1.5 text-xs text-muted-foreground", children: lockBody ?? "Conversations stay on one agent." }),
+              /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    onNewChat();
+                  },
+                  className: cn(
+                    "mt-3 flex w-full items-center justify-center gap-1.5 rounded-md px-2.5 py-2 text-sm font-medium text-foreground",
+                    "bg-primary/10 ring-1 ring-inset ring-primary/25 transition-colors",
+                    "hover:bg-primary/15 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx3(Plus2, { className: "h-4 w-4" }),
+                    newChatLabel ?? "New chat to switch agent"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function HarnessDropdown({
   value,
   onChange,
@@ -473,6 +573,10 @@ function HarnessDropdown({
   disabled,
   locked,
   lockReason,
+  onNewChat,
+  lockTitle,
+  lockBody,
+  newChatLabel,
   side = "bottom",
   align = "start",
   avoidCollisions
@@ -482,6 +586,18 @@ function HarnessDropdown({
   );
   const options = HARNESS_OPTIONS.filter((h) => allowed.has(h.type));
   const selected = options.find((option) => option.type === value);
+  if (locked && onNewChat) {
+    return /* @__PURE__ */ jsx3(
+      InformativeLock,
+      {
+        label: selected?.label ?? value,
+        lockTitle,
+        lockBody,
+        newChatLabel,
+        onNewChat
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
     /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
       "button",
@@ -785,7 +901,7 @@ import {
   Upload,
   X
 } from "lucide-react";
-import * as React2 from "react";
+import * as React4 from "react";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function AgentComposer({
   value,
@@ -816,22 +932,22 @@ function AgentComposer({
   sendLabel = "Send",
   autoFocus
 }) {
-  const textareaRef = React2.useRef(null);
-  const fileInputRef = React2.useRef(null);
-  const folderInputRef = React2.useRef(null);
-  const [dragOver, setDragOver] = React2.useState(false);
-  const dragDepth = React2.useRef(0);
-  const resize = React2.useCallback(
+  const textareaRef = React4.useRef(null);
+  const fileInputRef = React4.useRef(null);
+  const folderInputRef = React4.useRef(null);
+  const [dragOver, setDragOver] = React4.useState(false);
+  const dragDepth = React4.useRef(0);
+  const resize = React4.useCallback(
     (el) => {
       el.style.height = "auto";
       el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
     },
     [maxHeight]
   );
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (textareaRef.current) resize(textareaRef.current);
   }, [value, resize]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!focusShortcut || disabled) return;
     function onKeyDown(event) {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "l") {
@@ -1070,7 +1186,7 @@ function AgentComposer({
 }
 
 // src/chat/artifact-agent-dock.tsx
-import * as React3 from "react";
+import * as React5 from "react";
 import { Sparkles as Sparkles2, Send, Square as Square2, X as X2 } from "lucide-react";
 import { ChatMessage } from "@tangle-network/ui/chat";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1119,23 +1235,23 @@ function ArtifactAgentDock({
   onError,
   className
 }) {
-  const [threadId, setThreadId] = React3.useState(null);
-  const [messages, setMessages] = React3.useState([]);
-  const [composer, setComposer] = React3.useState(defaultPrompt ?? "");
-  const [streamContent, setStreamContent] = React3.useState("");
-  const [sending, setSending] = React3.useState(false);
-  const [loading, setLoading] = React3.useState(false);
-  const abortRef = React3.useRef(null);
-  const scrollRef = React3.useRef(null);
-  const scopeTokenRef = React3.useRef(0);
-  const reportError = React3.useCallback(
+  const [threadId, setThreadId] = React5.useState(null);
+  const [messages, setMessages] = React5.useState([]);
+  const [composer, setComposer] = React5.useState(defaultPrompt ?? "");
+  const [streamContent, setStreamContent] = React5.useState("");
+  const [sending, setSending] = React5.useState(false);
+  const [loading, setLoading] = React5.useState(false);
+  const abortRef = React5.useRef(null);
+  const scrollRef = React5.useRef(null);
+  const scopeTokenRef = React5.useRef(0);
+  const reportError = React5.useCallback(
     (message) => {
       if (onError) onError(message);
       else if (typeof console !== "undefined") console.error("[ArtifactAgentDock]", message);
     },
     [onError]
   );
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!open) return;
     scopeTokenRef.current += 1;
     abortRef.current?.abort();
@@ -1171,11 +1287,11 @@ function ArtifactAgentDock({
       cancelled = true;
     };
   }, [open, scope.kind, scope.key, transport, reportError]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!scrollRef.current) return;
     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
   }, [messages.length, streamContent]);
-  const send = React3.useCallback(async () => {
+  const send = React5.useCallback(async () => {
     const text = composer.trim();
     if (!text || !threadId || sending) return;
     const token = scopeTokenRef.current;
@@ -1225,7 +1341,7 @@ function ArtifactAgentDock({
       if (abortRef.current === controller) abortRef.current = null;
     }
   }, [composer, threadId, sending, transport, reportError]);
-  const cancel = React3.useCallback(() => {
+  const cancel = React5.useCallback(() => {
     if (threadId && transport.cancel) {
       try {
         void Promise.resolve(transport.cancel({ threadId })).catch(() => {

package/dist/{chunk-J36F6LD2.js → chunk-G4YJYSFA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-OQZQFSWM.js";
+} from "./chunk-QSCCNGXZ.js";
 import {
   TerminalView
 } from "./chunk-VIREDUBF.js";

package/dist/{chunk-OQZQFSWM.js → chunk-QSCCNGXZ.js}

@@ -22,7 +22,7 @@ import {
   DropdownMenuTrigger
 } from "@tangle-network/ui/primitives";
 import { Skeleton, useTheme } from "@tangle-network/ui/primitives";
-import { Check, Monitor, PanelLeft } from "lucide-react";
+import { Check, Monitor, MoreHorizontal, PanelLeft } from "lucide-react";
 
 // src/dashboard/sidebar-context.tsx
 import * as React from "react";
@@ -564,13 +564,17 @@ function RailExpandable({
   loadSubItems,
   activeSubIds,
   emptyLabel = "Nothing here yet",
+  defaultOpen,
   onNavigate,
   LinkComponent,
   className
 }) {
   const Link = LinkComponent ?? DefaultLink;
-  const [open, setOpen] = React3.useState(false);
+  const [open, setOpen] = React3.useState(defaultOpen ?? false);
   const { items, loading, ensureLoaded } = useExpandableItems(subItems, loadSubItems);
+  React3.useEffect(() => {
+    if (defaultOpen) ensureLoaded();
+  }, [defaultOpen, ensureLoaded]);
   const activeSet = React3.useMemo(() => new Set(activeSubIds ?? []), [activeSubIds]);
   const triggerRef = React3.useRef(null);
   const closeTimer = React3.useRef(null);
@@ -581,7 +585,7 @@ function RailExpandable({
   const subLink = (item) => {
     const FIcon = item.icon;
     const active = activeSet.has(item.id);
-    return /* @__PURE__ */ jsxs2(
+    const link = /* @__PURE__ */ jsxs2(
       Link,
       {
         href: item.href,
@@ -589,8 +593,8 @@ function RailExpandable({
         onClick: onNavigate,
         ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {},
         className: cn(
-          "flex h-8 min-w-0 items-center gap-2 rounded-md px-2.5 text-[12px] 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-foreground"
+          "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
+          active ? "h-7 bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : item.emphasis ? "py-2 font-medium text-[var(--accent-text)] hover:underline" : "h-7 text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground"
         ),
         children: [
           FIcon ? /* @__PURE__ */ jsx3(FIcon, { className: "h-4 w-4 shrink-0" }) : null,
@@ -601,16 +605,41 @@ function RailExpandable({
               ...item.isLoading ? { role: "status", "aria-label": "Agent responding" } : {},
               children: item.label
             }
-          ),
-          item.isLoading ? /* @__PURE__ */ jsxs2("span", { className: "responding-ellipsis", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx3("span", {}),
-            /* @__PURE__ */ jsx3("span", {}),
-            /* @__PURE__ */ jsx3("span", {})
-          ] }) : null
+          )
         ]
       },
       item.id
     );
+    if (!showLabel || !item.actions?.length) return link;
+    return /* @__PURE__ */ jsxs2("div", { className: "group/sub relative flex items-center", children: [
+      link,
+      /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Chat actions",
+            className: "absolute right-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--accent-surface-soft)] text-muted-foreground opacity-0 transition hover:text-foreground focus-visible:opacity-100 group-hover/sub:opacity-100 data-[state=open]:bg-[var(--accent-surface-strong)] data-[state=open]:opacity-100",
+            children: /* @__PURE__ */ jsx3(MoreHorizontal, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(DropdownMenuContent, { align: "end", className: "w-40", children: item.actions.map((action) => /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onSelect: action.onSelect,
+            className: cn(
+              "gap-2",
+              action.destructive && "text-destructive focus:text-destructive"
+            ),
+            children: [
+              action.icon ? /* @__PURE__ */ jsx3(action.icon, { className: "h-3.5 w-3.5" }) : null,
+              action.label
+            ]
+          },
+          action.id
+        )) })
+      ] })
+    ] }, item.id);
   };
   const list = loading ? /* @__PURE__ */ jsx3(SubItemsSkeleton, {}) : items && items.length > 0 ? items.map(subLink) : /* @__PURE__ */ jsx3("p", { className: "px-2.5 py-1.5 text-xs text-muted-foreground", children: emptyLabel });
   if (!showLabel) {
@@ -719,18 +748,15 @@ function RailExpandable({
                 /* @__PURE__ */ jsx3(
                   Icon,
                   {
-                    className: cn(
-                      "h-[17px] w-[17px] shrink-0 transition-opacity duration-150",
-                      open ? "opacity-0" : "opacity-100 group-hover/exp:opacity-0"
-                    )
+                    className: "h-[17px] w-[17px] shrink-0 opacity-100 transition-opacity duration-150 group-hover/exp:opacity-0"
                   }
                 ),
                 /* @__PURE__ */ jsx3(
                   ChevronRightIcon,
                   {
                     className: cn(
-                      "absolute h-4 w-4 transition-all duration-150",
-                      open ? "rotate-90 opacity-100" : "opacity-0 group-hover/exp:opacity-100"
+                      "absolute h-4 w-4 opacity-0 transition-all duration-150 group-hover/exp:opacity-100",
+                      open && "rotate-90"
                     )
                   }
                 )
@@ -2368,6 +2394,7 @@ function SidebarLayoutInner({
                 loadSubItems: item.loadSubItems,
                 activeSubIds: item.subActiveIds,
                 emptyLabel: item.emptyLabel,
+                defaultOpen: item.defaultOpen,
                 onNavigate: handleNavClick,
                 LinkComponent
               },

package/dist/dashboard.d.ts

@@ -174,6 +174,17 @@ interface RailFlyoutProps {
  * related destinations without permanently spending rail height on them.
  */
 declare function RailFlyout({ icon: Icon, label, isActive, showLabel, title, children, className, }: RailFlyoutProps): react_jsx_runtime.JSX.Element;
+/** A single entry in a sub-item's hover actions menu (kebab). */
+interface RailSubItemAction {
+    id: string;
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Style the item as a destructive action (e.g. delete). */
+    destructive?: boolean;
+    onSelect: () => void;
+}
 /** A sub-destination revealed by a {@link RailExpandable} item. */
 interface RailExpandableSubItem {
     id: string;
@@ -185,6 +196,12 @@ interface RailExpandableSubItem {
     prefetch?: "none" | "intent" | "render" | "viewport";
     /** Show a live working indicator on the row while the item is busy. */
     isLoading?: boolean;
+    /** Render the row emphasized (bold + accent) so it stands out — e.g. a
+     *  trailing "view all" action below a capped list. */
+    emphasis?: boolean;
+    /** Hover-revealed kebab actions (e.g. rename/delete). Rendered on the
+     *  labeled rail only; ignored in the collapsed-rail flyout. */
+    actions?: RailSubItemAction[];
 }
 interface RailExpandableProps {
     icon: React.ComponentType<{
@@ -201,6 +218,8 @@ interface RailExpandableProps {
     subItems?: RailExpandableSubItem[];
     /** Lazy sub-items — called once on first open; the result is cached. */
     loadSubItems?: () => Promise<RailExpandableSubItem[]>;
+    /** Start expanded on mount (labeled rail). Defaults to collapsed. */
+    defaultOpen?: boolean;
     /** Ids of sub-items whose route is active (drives sub-item highlight). */
     activeSubIds?: string[];
     /** Shown when the resolved sub-item list is empty. */
@@ -218,7 +237,7 @@ interface RailExpandableProps {
  * Sub-items can be fixed (`subItems`) or lazy (`loadSubItems`, with a loading
  * skeleton). Used for e.g. a "History" entry fronting recent sessions.
  */
-declare function RailExpandable({ icon: Icon, label, href, isActive, showLabel, subItems, loadSubItems, activeSubIds, emptyLabel, onNavigate, LinkComponent, className, }: RailExpandableProps): react_jsx_runtime.JSX.Element;
+declare function RailExpandable({ icon: Icon, label, href, isActive, showLabel, subItems, loadSubItems, activeSubIds, emptyLabel, defaultOpen, onNavigate, LinkComponent, className, }: RailExpandableProps): react_jsx_runtime.JSX.Element;
 interface RailModeButtonProps {
     mode: string;
     icon: React.ComponentType<{
@@ -913,6 +932,8 @@ interface SidebarLayoutNavItem {
     subActiveIds?: string[];
     /** Empty-state text for an `expandable` item that resolves to no sub-items. */
     emptyLabel?: string;
+    /** Start an `expandable` item expanded on mount (labeled rail). */
+    defaultOpen?: boolean;
     badge?: number;
     /**
      * React Router prefetch behavior for this link, forwarded to the underlying

package/dist/dashboard.js

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

package/dist/globals.css

@@ -3782,6 +3782,13 @@
       }
     }
   }
+  .group-hover\/sub\:opacity-100 {
+    &:is(:where(.group\/sub):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -4984,6 +4991,11 @@
       border-color: var(--md3-outline-variant);
     }
   }
+  .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\] {
+    &[data-state="open"] {
+      background-color: var(--accent-surface-strong);
+    }
+  }
   .data-\[state\=open\]\:bg-accent {
     &[data-state="open"] {
       background-color: var(--color-accent);
@@ -5007,6 +5019,11 @@
       color: var(--color-muted-foreground);
     }
   }
+  .data-\[state\=open\]\:opacity-100 {
+    &[data-state="open"] {
+      opacity: 100%;
+    }
+  }
   .data-\[state\=selected\]\:bg-muted\/50 {
     &[data-state="selected"] {
       background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
@@ -6014,53 +6031,23 @@
   .shimmer-text {
     background-image: linear-gradient(
       90deg,
-      hsl(var(--muted-foreground)) 0%,
-      hsl(var(--muted-foreground)) 28%,
-      var(--accent-text) 50%,
-      hsl(var(--muted-foreground)) 72%,
-      hsl(var(--muted-foreground)) 100%
+      hsl(var(--muted-foreground) / 0.5) 0%,
+      hsl(var(--muted-foreground) / 0.5) 40%,
+      hsl(var(--primary)) 50%,
+      hsl(var(--muted-foreground) / 0.5) 60%,
+      hsl(var(--muted-foreground) / 0.5) 100%
     );
     background-size: 200% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    animation: shimmer 1.3s linear infinite;
+    animation: shimmer 1.1s linear infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     .shimmer-text {
       animation: none;
     }
   }
-  .responding-ellipsis {
-    display: inline-flex;
-    width: 1.25rem;
-    margin-left: auto;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    gap: 0.1875rem;
-    color: hsl(var(--primary));
-  }
-  .responding-ellipsis > span {
-    width: 0.25rem;
-    height: 0.25rem;
-    border-radius: 9999px;
-    background: currentColor;
-    opacity: 0.6;
-    animation: responding-ellipsis 0.8s ease-in-out infinite;
-  }
-  .responding-ellipsis > span:nth-child(2) {
-    animation-delay: 0.15s;
-  }
-  .responding-ellipsis > span:nth-child(3) {
-    animation-delay: 0.3s;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .responding-ellipsis > span {
-      animation: none;
-      opacity: 0.8;
-    }
-  }
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
@@ -6095,16 +6082,6 @@
       background-position: 200% 0;
     }
   }
-  @keyframes responding-ellipsis {
-    0%, 80%, 100% {
-      opacity: 0.6;
-      transform: translateY(0);
-    }
-    40% {
-      opacity: 1;
-      transform: translateY(-1.5px);
-    }
-  }
   @keyframes fade-in {
     from {
       opacity: 0;

package/dist/index.js

@@ -102,7 +102,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-R72QYE2U.js";
+} from "./chunk-2E3FJM56.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -146,7 +146,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-J36F6LD2.js";
+} from "./chunk-G4YJYSFA.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -211,7 +211,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-OQZQFSWM.js";
+} from "./chunk-QSCCNGXZ.js";
 import "./chunk-VIREDUBF.js";
 import {
   usePtySession

package/dist/styles.css

@@ -3782,6 +3782,13 @@
       }
     }
   }
+  .group-hover\/sub\:opacity-100 {
+    &:is(:where(.group\/sub):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -4984,6 +4991,11 @@
       border-color: var(--md3-outline-variant);
     }
   }
+  .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\] {
+    &[data-state="open"] {
+      background-color: var(--accent-surface-strong);
+    }
+  }
   .data-\[state\=open\]\:bg-accent {
     &[data-state="open"] {
       background-color: var(--color-accent);
@@ -5007,6 +5019,11 @@
       color: var(--color-muted-foreground);
     }
   }
+  .data-\[state\=open\]\:opacity-100 {
+    &[data-state="open"] {
+      opacity: 100%;
+    }
+  }
   .data-\[state\=selected\]\:bg-muted\/50 {
     &[data-state="selected"] {
       background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
@@ -6014,53 +6031,23 @@
   .shimmer-text {
     background-image: linear-gradient(
       90deg,
-      hsl(var(--muted-foreground)) 0%,
-      hsl(var(--muted-foreground)) 28%,
-      var(--accent-text) 50%,
-      hsl(var(--muted-foreground)) 72%,
-      hsl(var(--muted-foreground)) 100%
+      hsl(var(--muted-foreground) / 0.5) 0%,
+      hsl(var(--muted-foreground) / 0.5) 40%,
+      hsl(var(--primary)) 50%,
+      hsl(var(--muted-foreground) / 0.5) 60%,
+      hsl(var(--muted-foreground) / 0.5) 100%
     );
     background-size: 200% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    animation: shimmer 1.3s linear infinite;
+    animation: shimmer 1.1s linear infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     .shimmer-text {
       animation: none;
     }
   }
-  .responding-ellipsis {
-    display: inline-flex;
-    width: 1.25rem;
-    margin-left: auto;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    gap: 0.1875rem;
-    color: hsl(var(--primary));
-  }
-  .responding-ellipsis > span {
-    width: 0.25rem;
-    height: 0.25rem;
-    border-radius: 9999px;
-    background: currentColor;
-    opacity: 0.6;
-    animation: responding-ellipsis 0.8s ease-in-out infinite;
-  }
-  .responding-ellipsis > span:nth-child(2) {
-    animation-delay: 0.15s;
-  }
-  .responding-ellipsis > span:nth-child(3) {
-    animation-delay: 0.3s;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .responding-ellipsis > span {
-      animation: none;
-      opacity: 0.8;
-    }
-  }
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
@@ -6095,16 +6082,6 @@
       background-position: 200% 0;
     }
   }
-  @keyframes responding-ellipsis {
-    0%, 80%, 100% {
-      opacity: 0.6;
-      transform: translateY(0);
-    }
-    40% {
-      opacity: 1;
-      transform: translateY(-1.5px);
-    }
-  }
   @keyframes fade-in {
     from {
       opacity: 0;

package/dist/workbench.js

@@ -12,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-J36F6LD2.js";
+} from "./chunk-G4YJYSFA.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-OQZQFSWM.js";
+import "./chunk-QSCCNGXZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";
 import "./chunk-OMUIPJQZ.js";

package/package.json

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