@tangle-network/sandbox-ui 0.41.0 → 0.43.0

package/dist/assistant.d.ts

@@ -38,6 +38,9 @@ interface ReasoningEventData {
 interface ToolCallEventData {
     callId: string;
     name: string;
+    /** The parsed arguments the agent invoked the tool with. Lets a renderer show
+     *  exactly what was called. Omitted by servers predating the field. */
+    args?: Record<string, unknown>;
 }
 interface ToolResultEventData {
     callId: string;
@@ -84,6 +87,9 @@ interface UsageEventData {
     completionTokens: number | null;
     costUsd: number | null;
     balanceUsd: number | null;
+    /** Wall-clock duration of the turn in milliseconds, when the server measures
+     *  it. Drives the renderer's tokens/sec figure. Omitted by older servers. */
+    durationMs?: number | null;
     /** True when a completed turn was replayed from storage (no charge). */
     replayed?: boolean;
 }
@@ -151,11 +157,12 @@ interface ChatMessage {
     id: string;
     role: ChatRole;
     text: string;
-    /** Present only on `tool` messages — the activity's tool name, state, and (once
-     *  finished) its outcome. */
+    /** Present only on `tool` messages — the activity's tool name, the arguments it
+     *  was called with, its state, and (once finished) its outcome. */
     tool?: {
         name: string;
         status: ToolActivityStatus;
+        args?: Record<string, unknown>;
         outcome?: ToolOutcome;
     };
 }
@@ -176,6 +183,13 @@ interface PendingProposal {
 interface UsageInfo {
     costUsd: number | null;
     balanceUsd: number | null;
+    /** Token counts + wall-clock duration for the settled turn, when the server
+     *  reports them — drive per-message tokens/sec + cost in a renderer. Optional
+     *  so a consumer constructing this on the prior `{ costUsd, balanceUsd,
+     *  replayed }` shape stays valid; a renderer treats a missing value as null. */
+    promptTokens?: number | null;
+    completionTokens?: number | null;
+    durationMs?: number | null;
     replayed: boolean;
 }
 /**
@@ -202,6 +216,10 @@ interface AssistantTranscriptView {
      *  (drives a "thinking" affordance). */
     isThinking: boolean;
     pendingProposals: PendingProposal[];
+    /** Cost/tokens/duration for the most recently settled turn, or null before any
+     *  turn settles. Optional so a host predating the field stays a valid consumer;
+     *  a renderer treats a missing value the same as null. */
+    usage?: UsageInfo | null;
     /** The panel's bound proposal card for a pending proposal — render it where the
      *  confirm/cancel UI should appear. */
     renderProposal: (proposal: PendingProposal) => ReactNode;
@@ -303,6 +321,13 @@ interface AssistantClient {
     fetchThreadHistory(threadId: string, signal?: AbortSignal): Promise<ThreadHistoryResult>;
     streamChat(req: ChatRequest, onEvent: (event: AssistantStreamEvent) => void, signal: AbortSignal): Promise<void>;
     confirmProposal(proposalId: string): Promise<ConfirmResult>;
+    /** Delete a thread and its server-side turns/proposals. Resolves `{ ok }`; a
+     *  404 (already gone) is treated as success so a double-delete is harmless.
+     *  Optional so a host with no delete endpoint stays a valid client — the panel
+     *  hides the delete affordance when it's absent (see `useAssistantThreads`). */
+    deleteThread?(threadId: string): Promise<{
+        ok: boolean;
+    }>;
 }
 /**
  * Build an assistant client bound to one host's transport. The returned methods
@@ -450,6 +475,15 @@ interface AssistantThreads {
     /** Load (or reload) the thread list. Must be called to populate `threads` —
      *  the hook never fetches on mount (the panel calls this when history opens). */
     refresh: () => void;
+    /** Delete a thread. Optimistically drops it from the list (within the current
+     *  owner scope); on failure the list is reloaded to restore the true state. A
+     *  no-op resolving `{ ok: false }` when the client has no `deleteThread`. */
+    remove: (threadId: string) => Promise<{
+        ok: boolean;
+    }>;
+    /** Whether the configured client supports deletion — drives whether a host
+     *  shows the delete affordance. */
+    canRemove: boolean;
 }
 declare function useAssistantThreads(userId: string | null): AssistantThreads;
 

package/dist/assistant.js

@@ -443,6 +443,18 @@ function createAssistantClient(config) {
         ok: false,
         error: body?.error?.message ?? "The action could not be completed"
       };
+    },
+    async deleteThread(threadId) {
+      try {
+        const res = await fetch(url(`/threads/${encodeURIComponent(threadId)}`), {
+          method: "DELETE",
+          headers: authHeaders(),
+          credentials
+        });
+        return { ok: res.ok || res.status === 404 };
+      } catch {
+        return { ok: false };
+      }
     }
   };
 }
@@ -845,7 +857,11 @@ function applyStreamEvent(state, event) {
         id: chipId,
         role: "tool",
         text: "",
-        tool: { name: event.data.name, status: "running" }
+        tool: {
+          name: event.data.name,
+          status: "running",
+          args: event.data.args
+        }
       };
       return {
         ...state,
@@ -865,7 +881,14 @@ function applyStreamEvent(state, event) {
             (m) => m.id === chipId ? {
               ...m,
               text: errText,
-              tool: { name: event.data.name, status, outcome }
+              // Preserve the args the matching tool_call recorded — the
+              // result event doesn't carry them.
+              tool: {
+                name: event.data.name,
+                status,
+                args: m.tool?.args,
+                outcome
+              }
             } : m
           )
         };
@@ -893,6 +916,9 @@ function applyStreamEvent(state, event) {
         usage: {
           costUsd: event.data.costUsd,
           balanceUsd: event.data.balanceUsd,
+          promptTokens: event.data.promptTokens,
+          completionTokens: event.data.completionTokens,
+          durationMs: event.data.durationMs ?? null,
           replayed: event.data.replayed ?? false
         }
       };
@@ -1406,6 +1432,7 @@ function useAssistantThreads(userId) {
   const clientRef = useRef2(client);
   clientRef.current = client;
   const abortRef = useRef2(null);
+  const pendingDeletesRef = useRef2(/* @__PURE__ */ new Set());
   const [state, setState] = useState2(() => ({
     threads: [],
     loading: false,
@@ -1440,7 +1467,11 @@ function useAssistantThreads(userId) {
       if (!isCurrent()) return;
       setState((s) => ({
         // null = transient failure: keep the prior list, just drop the spinner.
-        threads: result ?? s.threads,
+        // Drop any in-flight/finished deletions so a stale fetch can't resurrect
+        // a row we already removed.
+        threads: (result ?? s.threads).filter(
+          (t) => !pendingDeletesRef.current.has(t.id)
+        ),
         loading: false,
         loaded: true,
         ownerUserId: requestedUserId,
@@ -1452,13 +1483,45 @@ function useAssistantThreads(userId) {
       }
     });
   }, []);
-  useEffect3(() => () => abortRef.current?.abort(), [userId, client]);
+  const remove = useCallback2(
+    async (threadId) => {
+      const requestedClient = clientRef.current;
+      const requestedUserId = userRef.current;
+      if (!requestedClient.deleteThread) return { ok: false };
+      pendingDeletesRef.current.add(threadId);
+      setState(
+        (s) => s.ownerClient === requestedClient && s.ownerUserId === requestedUserId ? { ...s, threads: s.threads.filter((t) => t.id !== threadId) } : s
+      );
+      let res;
+      try {
+        res = await requestedClient.deleteThread(threadId);
+      } catch {
+        res = { ok: false };
+      }
+      if (!res.ok) {
+        pendingDeletesRef.current.delete(threadId);
+        if (userRef.current === requestedUserId && clientRef.current === requestedClient) {
+          refresh();
+        }
+      }
+      return res;
+    },
+    [refresh]
+  );
+  useEffect3(() => {
+    return () => abortRef.current?.abort();
+  }, [userId, client]);
+  useEffect3(() => {
+    return () => pendingDeletesRef.current.clear();
+  }, []);
   const stale = state.ownerUserId !== userId || state.ownerClient !== client;
   return {
     threads: stale ? [] : state.threads,
     loading: stale ? false : state.loading,
     loaded: stale ? false : state.loaded,
-    refresh
+    refresh,
+    remove,
+    canRemove: typeof client.deleteThread === "function"
   };
 }
 
@@ -1466,13 +1529,13 @@ function useAssistantThreads(userId) {
 import { MessageSquare } from "lucide-react";
 import {
   useEffect as useEffect5,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 
 // src/assistant/AssistantPanel.tsx
 import { AgentTimeline, ChatInput } from "@tangle-network/ui/chat";
-import { History, Minus, Plus, RotateCcw, X } from "lucide-react";
-import { useState as useState5 } from "react";
+import { History, Minus, Plus, RotateCcw, Trash2, X } from "lucide-react";
+import { useRef as useRef4, useState as useState5 } from "react";
 
 // src/assistant/build-timeline.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -1841,6 +1904,8 @@ function AssistantPanel({
   const font = useFontScale();
   const [historyOpen, setHistoryOpen] = useState5(false);
   const { state } = chat;
+  const chatRef = useRef4(chat);
+  chatRef.current = chat;
   const effectiveBalance = state.usage?.balanceUsd ?? balanceUsd;
   const errorView = state.error ? presentError(state.error.code, state.error.message) : null;
   const low = isLowBalance(effectiveBalance) && !errorView;
@@ -1864,6 +1929,18 @@ function AssistantPanel({
       return next;
     });
   };
+  const deleteThread = async (threadId) => {
+    const pre = chatRef.current.state;
+    if (pre.threadId === threadId && pre.status !== "idle") return;
+    if (!window.confirm("Delete this conversation? This can't be undone.")) {
+      return;
+    }
+    const res = await threads.remove(threadId);
+    const live = chatRef.current.state;
+    if (res.ok && live.threadId === threadId && live.status === "idle") {
+      chatRef.current.reset();
+    }
+  };
   return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col bg-background", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-border border-b px-4 py-3", children: [
       /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
@@ -1958,18 +2035,35 @@ function AssistantPanel({
         }
       )
     ] }),
-    historyOpen && /* @__PURE__ */ jsx4("div", { className: "max-h-48 overflow-y-auto border-border border-b", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-4 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { children: threads.threads.map((t) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          chat.switchThread(t.id);
-          setHistoryOpen(false);
-        },
-        className: "block w-full truncate px-4 py-2 text-left text-foreground text-xs hover:bg-muted/50",
-        children: t.title ?? "Untitled conversation"
-      }
-    ) }, t.id)) }) }),
+    historyOpen && /* @__PURE__ */ jsx4("div", { className: "max-h-48 overflow-y-auto border-border border-b", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-4 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { children: threads.threads.map((t) => {
+      const busyActive = state.threadId === t.id && state.status !== "idle";
+      return /* @__PURE__ */ jsxs2("li", { className: "group flex items-center hover:bg-muted/50", children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              chat.switchThread(t.id);
+              setHistoryOpen(false);
+            },
+            className: "min-w-0 flex-1 truncate px-4 py-2 text-left text-foreground text-xs",
+            children: t.title ?? "Untitled conversation"
+          }
+        ),
+        threads.canRemove && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => void deleteThread(t.id),
+            disabled: busyActive,
+            "aria-label": "Delete conversation",
+            title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
+            className: "shrink-0 p-2 text-muted-foreground opacity-0 transition hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
+            children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }, t.id);
+    }) }) }),
     /* @__PURE__ */ jsx4(
       "div",
       {
@@ -1986,6 +2080,7 @@ function AssistantPanel({
           isStreaming: streaming,
           isThinking,
           pendingProposals: state.pendingProposals,
+          usage: state.usage,
           renderProposal
         }) : /* @__PURE__ */ jsx4(
           AgentTimeline,
@@ -2092,7 +2187,7 @@ function useAssistantLauncher() {
 }
 
 // src/assistant/ResizeHandle.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function ResizeHandle({
   width,
@@ -2101,7 +2196,7 @@ function ResizeHandle({
   onCommit,
   onNudge
 }) {
-  const dragRef = useRef4(null);
+  const dragRef = useRef5(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     e.preventDefault();
@@ -2190,10 +2285,10 @@ function AssistantDock({
   const chat = useAssistantChat(userId, { onWorkflowMutation });
   const isDesktop = useIsDesktop();
   const { width, maxWidth, setWidth, previewWidth, nudgeWidth } = usePanelWidth();
-  const launcherRef = useRef5(null);
-  const dialogRef = useRef5(null);
-  const returnFocusRef = useRef5(null);
-  const wasOpenRef = useRef5(false);
+  const launcherRef = useRef6(null);
+  const dialogRef = useRef6(null);
+  const returnFocusRef = useRef6(null);
+  const wasOpenRef = useRef6(false);
   useEffect5(() => {
     if (!open) return;
     const onKeyDown = (e) => {

package/dist/{chunk-6UDHPI2R.js → chunk-KCWIC3SJ.js}

@@ -1543,9 +1543,9 @@ function DashboardLayoutInner({
   );
   const activePanel = panels.find((p) => p.mode === mode);
   const buildSidebarContent = React6.useCallback(
-    (showLabels) => /* @__PURE__ */ jsxs13(Fragment8, { children: [
+    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs13(Fragment8, { children: [
       /* @__PURE__ */ jsxs13(SidebarRail, { wide: showLabels, children: [
-        /* @__PURE__ */ jsx14(SidebarRailHeader, { children: onLogoClick ? /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx14(SidebarRailHeader, { className: cn(showLabels && "justify-start px-3"), children: onLogoClick ? /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -1573,12 +1573,17 @@ function DashboardLayoutInner({
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
         ) }),
-        /* @__PURE__ */ jsx14(SidebarRailNav, { children: navItems.map((item, i) => {
+        /* @__PURE__ */ jsx14(SidebarRailNav, { className: showLabels ? "px-2" : void 0, children: navItems.map((item, i) => {
           const isMode = modeSet.has(item.id);
           const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
           const showSep = i > 0 && isMode && !prevIsMode;
           return /* @__PURE__ */ jsxs13(React6.Fragment, { children: [
-            showSep && /* @__PURE__ */ jsx14(RailSeparator, {}),
+            showSep && /* @__PURE__ */ jsx14(
+              RailSeparator,
+              {
+                className: showLabels ? "w-full" : void 0
+              }
+            ),
             isMode ? /* @__PURE__ */ jsx14(
               RailModeButton,
               {
@@ -1601,10 +1606,18 @@ function DashboardLayoutInner({
             )
           ] }, item.id);
         }) }),
-        /* @__PURE__ */ jsxs13(SidebarRailFooter, { children: [
+        /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn(showLabels && "items-stretch px-2"), children: [
+          allowCollapse && /* @__PURE__ */ jsx14(
+            RailCollapseToggle,
+            {
+              collapsed: railCollapsed,
+              showLabel: showLabels,
+              onToggle: toggleRail
+            }
+          ),
           onSettingsClick ? /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick, showLabel: showLabels }) : /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", showLabel: showLabels, asChild: true, children: /* @__PURE__ */ jsx14(Link, { href: settingsHref, to: settingsHref }) }),
           railFooter,
-          /* @__PURE__ */ jsx14(RailSeparator, {}),
+          /* @__PURE__ */ jsx14(RailSeparator, { className: showLabels ? "w-full" : void 0 }),
           /* @__PURE__ */ jsx14(
             ProfileAvatar,
             {
@@ -1613,6 +1626,7 @@ function DashboardLayoutInner({
               onLogout,
               onSettingsClick,
               settingsHref,
+              showDetails: showLabels,
               LinkComponent,
               children: profileMenuItems
             }
@@ -1651,10 +1665,10 @@ function DashboardLayoutInner({
     ]
   );
   const sidebarContent = React6.useMemo(
-    () => buildSidebarContent(labeledRail && !railCollapsed),
+    () => buildSidebarContent(labeledRail && !railCollapsed, labeledRail),
     [buildSidebarContent, labeledRail, railCollapsed]
   );
-  const mobileSidebarContent = React6.useMemo(() => buildSidebarContent(true), [buildSidebarContent]);
+  const mobileSidebarContent = React6.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
   return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsxs13(
       "nav",
@@ -1783,8 +1797,8 @@ function DashboardLayoutInner({
     footer
   ] });
 }
-function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, ...props }) {
-  return /* @__PURE__ */ jsx14(SidebarProvider, { defaultPanelOpen, defaultMode, labeledRail, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx14(DashboardLayoutInner, { defaultPanelOpen, defaultMode, labeledRail, ...props }) });
+function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRailCollapsed, ...props }) {
+  return /* @__PURE__ */ jsx14(SidebarProvider, { defaultPanelOpen, defaultMode, labeledRail, defaultRailCollapsed, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx14(DashboardLayoutInner, { defaultPanelOpen, defaultMode, labeledRail, ...props }) });
 }
 
 // src/dashboard/sidebar-layout.tsx

package/dist/dashboard.d.ts

@@ -681,6 +681,12 @@ interface DashboardLayoutProps {
      * toggles between icon-only and labeled instead of navigating.
      */
     labeledRail?: boolean;
+    /**
+     * Initial rail-collapsed state when `labeledRail` is set and the rail is
+     * uncontrolled. Defaults to expanded (`false`). Pass `true` to start on the
+     * compact icon rail — the user's choice then persists to localStorage.
+     */
+    defaultRailCollapsed?: boolean;
     footer?: React.ReactNode;
     defaultPanelOpen?: boolean;
     defaultMode?: string;
@@ -702,7 +708,7 @@ interface DashboardLayoutProps {
         onMarkAllRead?: () => void;
     };
 }
-declare function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+declare function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRailCollapsed, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
 /** A sub-destination revealed inside a nav item's right-flyout. */
 interface SidebarLayoutFlyoutItem {

package/dist/dashboard.js

@@ -52,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-6UDHPI2R.js";
+} from "./chunk-KCWIC3SJ.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/index.js

@@ -138,7 +138,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-6UDHPI2R.js";
+} from "./chunk-KCWIC3SJ.js";
 import {
   usePtySession
 } from "./chunk-77WVVJA4.js";

package/package.json

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