@tangle-network/sandbox-ui 0.59.0 → 0.61.0

package/dist/chat.d.ts

@@ -225,6 +225,16 @@ interface AgentSessionControlsProps {
  */
 declare function AgentSessionControls({ harness, profile, model, reasoning, trailing, className, context, layout, menuPlacement, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
 
+/** A staged attachment shown as a chip above the input. */
+interface ComposerFile {
+    id: string;
+    name: string;
+    size?: number;
+    kind: "file" | "folder";
+    /** File count for a folder chip. */
+    fileCount?: number;
+    status: "pending" | "uploading" | "ready" | "error";
+}
 interface AgentComposerProps {
     /** Composer text (controlled). */
     value: string;
@@ -232,10 +242,15 @@ interface AgentComposerProps {
     /** Fired on Enter (without Shift) or the send button. */
     onSubmit: () => void;
     placeholder?: string;
-    /** Disables typing and sending — e.g. while a turn is streaming. */
+    /** Disables typing and sending — e.g. while restoring. */
     disabled?: boolean;
-    /** Spins the send button and blocks submit, without disabling the textarea. */
+    /**
+     * A turn is in flight. Spins the send button; paired with `onCancel` it
+     * becomes a Stop button instead, so the user can interrupt the stream.
+     */
     busy?: boolean;
+    /** Stop the in-flight turn. With `busy`, replaces send with a Stop button. */
+    onCancel?: () => void;
     /**
      * Agent backend. Present → sandbox-backed (the harness pill shows and snaps
      * with the model); omitted → router-backed (no harness, just model/effort).
@@ -247,8 +262,29 @@ interface AgentComposerProps {
     reasoning?: AgentSessionReasoningControl;
     /** Forwarded to the control strip (chat hides shell-only harnesses). */
     context?: "chat" | "all";
+    /**
+     * Override the built-in control strip with custom controls. When set, the
+     * `harness`/`profile`/`model`/`reasoning` props are ignored and this node is
+     * rendered in the control row instead — for apps that compose their own
+     * pickers. Omit to use the canonical strip.
+     */
+    controls?: React.ReactNode;
     /** Extra content left of the send button (token meter, cost, status). */
     trailing?: React.ReactNode;
+    /**
+     * Attachments are opt-in: pass `onAttach` to show the attach button, accept
+     * drag-and-drop onto the composer, and render `attachments` as chips.
+     */
+    onAttach?: (files: FileList) => void;
+    /** Show a folder-attach button; falls back to `onAttach` if unset. */
+    onAttachFolder?: (files: FileList) => void;
+    attachments?: ReadonlyArray<ComposerFile>;
+    onRemoveFile?: (id: string) => void;
+    accept?: string;
+    dropTitle?: string;
+    dropDescription?: string;
+    /** Cmd/Ctrl+L focuses the input and shows a hint. Default false. */
+    focusShortcut?: boolean;
     /** Minimum textarea rows before it grows. Default 2. */
     minRows?: number;
     /** Max pixel height before the textarea scrolls. Default 200. */
@@ -264,8 +300,13 @@ interface AgentComposerProps {
  * snap the harness↔model pair automatically; which controls appear is driven
  * purely by which control objects are passed, so the same component is the
  * router-backed composer (no harness) and the sandbox-backed one (with harness).
+ *
+ * Opt-in extras make it the superset of every app's hand-rolled composer:
+ * file/folder attachments with drag-and-drop + chips, a streaming Stop button
+ * (`busy` + `onCancel`), a `controls` override slot for bespoke picker rows, and
+ * a Cmd/Ctrl+L focus shortcut.
  */
-declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, harness, profile, model, reasoning, context, trailing, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
+declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, harness, profile, model, reasoning, context, controls, trailing, onAttach, onAttachFolder, attachments, onRemoveFile, accept, dropTitle, dropDescription, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Whether `harness` can run `modelId`. Router-backed harnesses, and provider-less
@@ -379,4 +420,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentComposer, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness };
+export { AgentComposer, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, DEFAULT_REASONING_LEVEL_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness };

package/dist/chat.js

@@ -17,7 +17,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-4XOZGMJC.js";
+} from "./chunk-V5JZOO3W.js";
 import "./chunk-HU4B2M4K.js";
 import "./chunk-SF6LPMMN.js";
 import "./chunk-EI44GEQ5.js";

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

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

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

@@ -589,12 +589,24 @@ function RailExpandable({
         onClick: onNavigate,
         ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {},
         className: cn(
-          "flex h-8 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
+          "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"
         ),
         children: [
           FIcon ? /* @__PURE__ */ jsx3(FIcon, { className: "h-4 w-4 shrink-0" }) : null,
-          /* @__PURE__ */ jsx3("span", { className: "truncate", children: item.label })
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: cn("min-w-0 flex-1 truncate", item.isLoading && "shimmer-text"),
+              ...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

package/dist/{chunk-4XOZGMJC.js → chunk-V5JZOO3W.js}

@@ -730,9 +730,17 @@ function GearSection({
 }
 
 // src/chat/agent-composer.tsx
-import { ArrowUp, Loader2 } from "lucide-react";
+import {
+  ArrowUp,
+  Folder,
+  Loader2,
+  Paperclip,
+  Square,
+  Upload,
+  X
+} from "lucide-react";
 import * as React2 from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function AgentComposer({
   value,
   onChange,
@@ -740,12 +748,22 @@ function AgentComposer({
   placeholder = "Send a message\u2026",
   disabled,
   busy,
+  onCancel,
   harness,
   profile,
   model,
   reasoning,
   context = "chat",
+  controls,
   trailing,
+  onAttach,
+  onAttachFolder,
+  attachments = [],
+  onRemoveFile,
+  accept,
+  dropTitle = "Drop files to add context",
+  dropDescription = "They attach to your next message.",
+  focusShortcut = false,
   minRows = 2,
   maxHeight = 200,
   className,
@@ -753,6 +771,10 @@ function AgentComposer({
   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(
     (el) => {
       el.style.height = "auto";
@@ -763,81 +785,247 @@ function AgentComposer({
   React2.useEffect(() => {
     if (textareaRef.current) resize(textareaRef.current);
   }, [value, resize]);
+  React2.useEffect(() => {
+    if (!focusShortcut || disabled) return;
+    function onKeyDown(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "l") {
+        event.preventDefault();
+        textareaRef.current?.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [focusShortcut, disabled]);
   const canSend = !disabled && !busy && value.trim().length > 0;
   const submit = () => {
     if (!canSend) return;
     onSubmit();
   };
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      "data-testid": "agent-composer",
-      className: cn(
-        "flex flex-col gap-2 rounded-2xl border border-[var(--md3-outline-variant)] bg-surface-container-high p-2.5 shadow-sm transition-colors",
-        "focus-within:border-primary/60",
-        disabled && "opacity-60",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx4(
-          "textarea",
-          {
-            ref: textareaRef,
-            rows: minRows,
-            value,
-            disabled,
-            autoFocus,
-            onChange: (event) => onChange(event.target.value),
-            onInput: (event) => resize(event.currentTarget),
-            onKeyDown: (event) => {
-              if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) {
-                event.preventDefault();
-                submit();
-              }
-            },
-            placeholder,
-            className: cn(
-              "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
-              "placeholder:text-muted-foreground"
-            )
-          }
+  const dropEnabled = Boolean(onAttach);
+  const handleDragEnter = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current++;
+    if (event.dataTransfer?.types.includes("Files")) setDragOver(true);
+  };
+  const handleDragLeave = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current--;
+    if (dragDepth.current <= 0) {
+      dragDepth.current = 0;
+      setDragOver(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+  };
+  const handleDrop = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current = 0;
+    setDragOver(false);
+    const files = event.dataTransfer?.files;
+    if (files?.length) onAttach?.(files);
+  };
+  const folderChips = attachments.filter((file) => file.kind === "folder");
+  const fileChips = attachments.filter((file) => file.kind !== "folder");
+  const attachButtonClass = cn(
+    "flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+    "hover:bg-surface-container-highest hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: cn("relative", className), children: [
+    dragOver && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-surface-container-high/95", children: /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx4("span", { className: "mx-auto mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx4(Upload, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx4("p", { className: "font-semibold text-foreground text-sm", children: dropTitle }),
+      /* @__PURE__ */ jsx4("p", { className: "mt-0.5 text-muted-foreground text-xs", children: dropDescription })
+    ] }) }),
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        "data-testid": "agent-composer",
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        className: cn(
+          "flex flex-col gap-2 rounded-2xl border border-[var(--md3-outline-variant)] bg-surface-container-high p-2.5 shadow-sm transition-colors",
+          "focus-within:border-primary/60",
+          disabled && "opacity-60"
         ),
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
-          /* @__PURE__ */ jsx4(
-            AgentSessionControls,
+        children: [
+          attachments.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((file) => /* @__PURE__ */ jsxs4(
+            "span",
             {
-              className: "min-w-0 flex-1",
-              context,
-              harness,
-              profile,
-              model,
-              reasoning
-            }
-          ),
-          trailing && /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 items-center gap-2", children: trailing }),
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
+                file.status === "error" ? "border-[var(--status-error,#ff4d6d)]/40 text-[var(--status-error,#ff4d6d)]" : "border-[var(--md3-outline-variant)] bg-surface-container text-foreground"
+              ),
+              children: [
+                file.kind === "folder" ? /* @__PURE__ */ jsx4(Folder, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx4(Paperclip, { className: "size-3 shrink-0" }),
+                /* @__PURE__ */ jsx4("span", { className: "max-w-[150px] truncate", children: file.name }),
+                file.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
+                  "(",
+                  file.fileCount,
+                  ")"
+                ] }),
+                file.status === "uploading" && /* @__PURE__ */ jsx4(Loader2, { className: "size-3 animate-spin" }),
+                onRemoveFile && /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${file.name}`,
+                    onClick: () => onRemoveFile(file.id),
+                    className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx4(X, { className: "size-3" })
+                  }
+                )
+              ]
+            },
+            file.id
+          )) }),
           /* @__PURE__ */ jsx4(
-            "button",
+            "textarea",
             {
-              type: "button",
-              onClick: submit,
-              disabled: !canSend,
-              "aria-label": sendLabel,
+              ref: textareaRef,
+              rows: minRows,
+              value,
+              disabled,
+              autoFocus,
+              onChange: (event) => onChange(event.target.value),
+              onInput: (event) => resize(event.currentTarget),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) {
+                  event.preventDefault();
+                  submit();
+                }
+              },
+              placeholder,
+              "aria-label": "Message input",
               className: cn(
-                "ml-auto flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
-                "transition-opacity hover:opacity-90 disabled:opacity-40"
-              ),
-              children: busy ? /* @__PURE__ */ jsx4(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx4(ArrowUp, { className: "size-4" })
+                "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
+                "placeholder:text-muted-foreground"
+              )
             }
-          )
-        ] })
-      ]
-    }
-  );
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
+            /* @__PURE__ */ jsx4("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: controls ?? /* @__PURE__ */ jsx4(
+              AgentSessionControls,
+              {
+                context,
+                harness,
+                profile,
+                model,
+                reasoning
+              }
+            ) }),
+            onAttach && /* @__PURE__ */ jsxs4(Fragment, { children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => fileInputRef.current?.click(),
+                  disabled,
+                  "aria-label": "Attach files",
+                  title: "Attach files",
+                  className: attachButtonClass,
+                  children: /* @__PURE__ */ jsx4(Paperclip, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  accept,
+                  onChange: (event) => {
+                    if (event.target.files?.length) onAttach(event.target.files);
+                    event.target.value = "";
+                  }
+                }
+              )
+            ] }),
+            onAttachFolder && /* @__PURE__ */ jsxs4(Fragment, { children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => folderInputRef.current?.click(),
+                  disabled,
+                  "aria-label": "Attach folder",
+                  title: "Attach folder",
+                  className: attachButtonClass,
+                  children: /* @__PURE__ */ jsx4(Folder, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  ref: folderInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  onChange: (event) => {
+                    if (event.target.files?.length)
+                      (onAttachFolder ?? onAttach)?.(event.target.files);
+                    event.target.value = "";
+                  },
+                  ...{ webkitdirectory: "" }
+                }
+              )
+            ] }),
+            trailing && /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 items-center gap-2", children: trailing }),
+            busy && onCancel ? /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                "aria-label": "Stop response",
+                className: cn(
+                  "flex size-9 shrink-0 items-center justify-center rounded-full",
+                  "bg-[var(--status-error,#ff4d6d)]/15 text-[var(--status-error,#ff4d6d)] transition-colors",
+                  "hover:bg-[var(--status-error,#ff4d6d)]/25"
+                ),
+                children: /* @__PURE__ */ jsx4(Square, { className: "size-3.5 fill-current" })
+              }
+            ) : /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: submit,
+                disabled: !canSend,
+                "aria-label": sendLabel,
+                className: cn(
+                  "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
+                  "transition-opacity hover:opacity-90 disabled:opacity-40"
+                ),
+                children: busy ? /* @__PURE__ */ jsx4(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx4(ArrowUp, { className: "size-4" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    focusShortcut && /* @__PURE__ */ jsx4("div", { className: "mt-1.5 flex justify-end px-1", children: /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsx4("kbd", { className: "rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "Cmd" }),
+      /* @__PURE__ */ jsx4("kbd", { className: "ml-0.5 rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "L" }),
+      /* @__PURE__ */ jsx4("span", { className: "ml-1", children: "to focus" })
+    ] }) })
+  ] });
 }
 
 // src/chat/artifact-agent-dock.tsx
 import * as React3 from "react";
-import { Sparkles as Sparkles2, Send, Square, X } from "lucide-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";
 function defaultScopeLabel(scope) {
@@ -1029,7 +1217,7 @@ function ArtifactAgentDock({
               onClick: () => onOpenChange(false),
               "aria-label": "Close artifact chat",
               className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
-              children: /* @__PURE__ */ jsx5(X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx5(X2, { className: "h-4 w-4" })
             }
           )
         ] }),
@@ -1078,7 +1266,7 @@ function ArtifactAgentDock({
                   onClick: cancel,
                   "aria-label": "Cancel",
                   className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
-                  children: /* @__PURE__ */ jsx5(Square, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx5(Square2, { className: "h-4 w-4" })
                 }
               ) : /* @__PURE__ */ jsx5(
                 "button",

package/dist/dashboard.d.ts

@@ -183,6 +183,8 @@ interface RailExpandableSubItem {
     }>;
     href: string;
     prefetch?: "none" | "intent" | "render" | "viewport";
+    /** Show a live working indicator on the row while the item is busy. */
+    isLoading?: boolean;
 }
 interface RailExpandableProps {
     icon: React.ComponentType<{

package/dist/dashboard.js

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

package/dist/globals.css

@@ -663,14 +663,30 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -1878,6 +1894,12 @@
   .border-\[var\(--md3-outline-variant\)\] {
     border-color: var(--md3-outline-variant);
   }
+  .border-\[var\(--status-error\,\#ff4d6d\)\]\/40 {
+    border-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--status-error,#ff4d6d) 40%, transparent);
+    }
+  }
   .border-\[var\(--status-running\)\]\/30 {
     border-color: var(--status-running);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2010,6 +2032,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
     }
   }
+  .border-primary\/50 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    }
+  }
   .border-primary\/60 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2175,6 +2203,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
+    background-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 15%, transparent);
+    }
+  }
   .bg-\[var\(--status-running\)\] {
     background-color: var(--status-running);
   }
@@ -2469,6 +2503,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/95 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 95%, transparent);
+    }
+  }
   .bg-surface-container-highest {
     background-color: var(--color-surface-container-highest);
   }
@@ -3189,6 +3229,9 @@
   .text-\[var\(--md3-primary\)\] {
     color: var(--md3-primary);
   }
+  .text-\[var\(--status-error\,\#ff4d6d\)\] {
+    color: var(--status-error,#ff4d6d);
+  }
   .text-\[var\(--surface-danger-text\)\] {
     color: var(--surface-danger-text);
   }
@@ -4072,6 +4115,16 @@
       }
     }
   }
+  .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--status-error,#ff4d6d);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 25%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[var\(--surface-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
@@ -6004,6 +6057,56 @@
     background-size: 200% 100%;
     animation: shimmer 2s infinite;
   }
+  .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%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 1.3s 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;
   }
@@ -6038,6 +6141,16 @@
       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.d.ts

@@ -5,7 +5,7 @@ export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, Ap
 export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
-export { AgentComposer, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness } from './chat.js';
+export { AgentComposer, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';

package/dist/index.js

@@ -92,7 +92,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-4XOZGMJC.js";
+} from "./chunk-V5JZOO3W.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -149,7 +149,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-MKX3F55O.js";
+} from "./chunk-J36F6LD2.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -214,7 +214,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-D7JJLG4L.js";
+} from "./chunk-OQZQFSWM.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/styles.css

@@ -663,14 +663,30 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -1878,6 +1894,12 @@
   .border-\[var\(--md3-outline-variant\)\] {
     border-color: var(--md3-outline-variant);
   }
+  .border-\[var\(--status-error\,\#ff4d6d\)\]\/40 {
+    border-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--status-error,#ff4d6d) 40%, transparent);
+    }
+  }
   .border-\[var\(--status-running\)\]\/30 {
     border-color: var(--status-running);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2010,6 +2032,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
     }
   }
+  .border-primary\/50 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    }
+  }
   .border-primary\/60 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2175,6 +2203,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
+    background-color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 15%, transparent);
+    }
+  }
   .bg-\[var\(--status-running\)\] {
     background-color: var(--status-running);
   }
@@ -2469,6 +2503,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/95 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 95%, transparent);
+    }
+  }
   .bg-surface-container-highest {
     background-color: var(--color-surface-container-highest);
   }
@@ -3189,6 +3229,9 @@
   .text-\[var\(--md3-primary\)\] {
     color: var(--md3-primary);
   }
+  .text-\[var\(--status-error\,\#ff4d6d\)\] {
+    color: var(--status-error,#ff4d6d);
+  }
   .text-\[var\(--surface-danger-text\)\] {
     color: var(--surface-danger-text);
   }
@@ -4072,6 +4115,16 @@
       }
     }
   }
+  .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--status-error,#ff4d6d);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--status-error,#ff4d6d) 25%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[var\(--surface-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
@@ -6004,6 +6057,56 @@
     background-size: 200% 100%;
     animation: shimmer 2s infinite;
   }
+  .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%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 1.3s 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;
   }
@@ -6038,6 +6141,16 @@
       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-MKX3F55O.js";
+} from "./chunk-J36F6LD2.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-D7JJLG4L.js";
+import "./chunk-OQZQFSWM.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";

package/package.json

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