@tangle-network/sandbox-ui 0.40.0 → 0.42.0

package/dist/assistant.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * Wire + UI types for the in-app assistant panel. The wire shapes mirror the
@@ -7,6 +7,7 @@ import { ReactNode } from 'react';
  * `routes/assistant.ts`). Drift here only mis-renders the client; the server
  * is the source of truth for what it accepts and emits.
  */
+
 /** Request body for `POST /api/v1/assistant/chat`. */
 interface ChatRequest {
     message: string;
@@ -132,14 +133,30 @@ type AssistantStreamEvent = {
 type ChatRole = "user" | "assistant" | "status" | "tool";
 /** Live status of a tool-activity chip. */
 type ToolActivityStatus = "running" | "ok" | "failed";
+/** The outcome of a finished read-only tool, retained on the chip so a renderer
+ *  can show the result body (not just the name + status). Mirrors the
+ *  `tool_result` event: a success carries the tool's `result`; a failure carries
+ *  the error. Absent while the tool is still running. */
+type ToolOutcome = {
+    ok: true;
+    result?: unknown;
+} | {
+    ok: false;
+    error?: {
+        code: string;
+        message: string;
+    };
+};
 interface ChatMessage {
     id: string;
     role: ChatRole;
     text: string;
-    /** Present only on `tool` messages — the activity's tool name and state. */
+    /** Present only on `tool` messages — the activity's tool name, state, and (once
+     *  finished) its outcome. */
     tool?: {
         name: string;
         status: ToolActivityStatus;
+        outcome?: ToolOutcome;
     };
 }
 /** A mutating action the assistant proposed, awaiting the user's confirmation. */
@@ -161,6 +178,34 @@ interface UsageInfo {
     balanceUsd: number | null;
     replayed: boolean;
 }
+/**
+ * The transcript slice handed to a host-supplied `renderTranscript` (see
+ * {@link AssistantPanelProps}). It lets a host swap ONLY the conversation
+ * rendering — to use its own message renderer — while the panel keeps owning the
+ * dock chrome, composer, model picker, history, transport, and proposal
+ * orchestration. The bound `renderProposal` returns the panel's own proposal
+ * card so the host can place it (e.g. inline after the proposing turn) without
+ * re-implementing the confirm/cancel flow.
+ */
+interface AssistantTranscriptView {
+    messages: ChatMessage[];
+    /** The current turn's reasoning/thinking text, if any (streamed before the
+     *  answer for reasoning models). */
+    reasoning: string | null;
+    /** Id of the assistant message currently accumulating deltas, if any. */
+    streamingId: string | null;
+    /** Model slug the current/most-recent turn ran against, or null. */
+    model: string | null;
+    /** True while a turn is streaming. */
+    isStreaming: boolean;
+    /** True while the agent is working but has produced no visible output yet
+     *  (drives a "thinking" affordance). */
+    isThinking: boolean;
+    pendingProposals: PendingProposal[];
+    /** The panel's bound proposal card for a pending proposal — render it where the
+     *  confirm/cancel UI should appear. */
+    renderProposal: (proposal: PendingProposal) => ReactNode;
+}
 
 /**
  * Configurable network client for the assistant panel: the chat SSE stream, the
@@ -419,8 +464,12 @@ interface AssistantDockProps {
     renderGraph?: (yaml: string) => ReactNode;
     /** Called after a workflow-mutating tool is confirmed (host re-fetches its list). */
     onWorkflowMutation?: () => void;
+    /** Swap the conversation rendering for a host-supplied renderer (see
+     *  {@link AssistantPanelProps.renderTranscript}); the dock chrome, composer,
+     *  transport, and proposal flow stay owned by the panel. */
+    renderTranscript?: (view: AssistantTranscriptView) => ReactNode;
 }
-declare function AssistantDock({ userId, navigate, balanceUsd, formatMoney, renderGraph, onWorkflowMutation, }: AssistantDockProps): react_jsx_runtime.JSX.Element;
+declare function AssistantDock({ userId, navigate, balanceUsd, formatMoney, renderGraph, onWorkflowMutation, renderTranscript, }: AssistantDockProps): react_jsx_runtime.JSX.Element;
 
 interface AssistantPanelProps {
     chat: AssistantChat;
@@ -435,8 +484,14 @@ interface AssistantPanelProps {
     /** Render workflow YAML as a node graph in a proposal card (the `./workflows`
      *  WorkflowGraph). When absent, proposals show YAML as text. */
     renderGraph?: (yaml: string) => ReactNode;
+    /** Swap ONLY the conversation rendering for a host-supplied renderer (e.g. a
+     *  different chat-message component), while the panel keeps owning the header,
+     *  composer, model picker, history, transport, and proposal orchestration.
+     *  Receives the transcript slice plus a bound proposal card to place. When
+     *  absent, the built-in `AgentTimeline` renders the conversation. */
+    renderTranscript?: (view: AssistantTranscriptView) => ReactNode;
 }
-declare function AssistantPanel({ chat, userId, onClose, navigate, balanceUsd, formatMoney, renderGraph, }: AssistantPanelProps): react_jsx_runtime.JSX.Element;
+declare function AssistantPanel({ chat, userId, onClose, navigate, balanceUsd, formatMoney, renderGraph, renderTranscript, }: AssistantPanelProps): react_jsx_runtime.JSX.Element;
 
 interface ProposalCardProps {
     proposal: PendingProposal;
@@ -468,4 +523,4 @@ declare function AssistantLauncherProvider({ children, }: {
 }): react_jsx_runtime.JSX.Element;
 declare function useAssistantLauncher(): AssistantLauncher;
 
-export { type AssistantChat, type AssistantClient, type AssistantClientConfig, AssistantClientProvider, AssistantDock, type AssistantDockProps, type AssistantLauncher, AssistantLauncherProvider, type AssistantModelOption, type AssistantModels, type AssistantModelsResult, AssistantPanel, type AssistantPanelProps, type AssistantStreamEvent, type AssistantThreadSummary, type AssistantThreads, type ChatMessage, type ChatRequest, type ChatRole, type ConfirmResult, type ConnectionRequirement, type ConnectionRequirementKind, type DeltaEventData, type DoneEventData, type ErrorEventData, type PendingProposal, ProposalCard, type ProposalCardProps, type ReasoningEventData, type ThreadEventData, type ThreadHistoryResult, type ToolActivityStatus, type ToolCallEventData, type ToolProposalEventData, type ToolResultEventData, type UsageEventData, type UsageInfo, type UseAssistantChatOptions, createAssistantClient, useAssistantChat, useAssistantClient, useAssistantLauncher, useAssistantModels, useAssistantThreads };
+export { type AssistantChat, type AssistantClient, type AssistantClientConfig, AssistantClientProvider, AssistantDock, type AssistantDockProps, type AssistantLauncher, AssistantLauncherProvider, type AssistantModelOption, type AssistantModels, type AssistantModelsResult, AssistantPanel, type AssistantPanelProps, type AssistantStreamEvent, type AssistantThreadSummary, type AssistantThreads, type AssistantTranscriptView, type ChatMessage, type ChatRequest, type ChatRole, type ConfirmResult, type ConnectionRequirement, type ConnectionRequirementKind, type DeltaEventData, type DoneEventData, type ErrorEventData, type PendingProposal, ProposalCard, type ProposalCardProps, type ReasoningEventData, type ThreadEventData, type ThreadHistoryResult, type ToolActivityStatus, type ToolCallEventData, type ToolOutcome, type ToolProposalEventData, type ToolResultEventData, type UsageEventData, type UsageInfo, type UseAssistantChatOptions, createAssistantClient, useAssistantChat, useAssistantClient, useAssistantLauncher, useAssistantModels, useAssistantThreads };

package/dist/assistant.js

@@ -857,11 +857,16 @@ function applyStreamEvent(state, event) {
       const chipId = `tool-${event.data.callId}`;
       const status = event.data.ok ? "ok" : "failed";
       const errText = event.data.ok ? "" : event.data.error?.message ?? "unknown error";
+      const outcome = event.data.ok ? { ok: true, result: event.data.output } : { ok: false, error: event.data.error };
       if (state.messages.some((m) => m.id === chipId)) {
         return {
           ...state,
           messages: state.messages.map(
-            (m) => m.id === chipId ? { ...m, text: errText, tool: { name: event.data.name, status } } : m
+            (m) => m.id === chipId ? {
+              ...m,
+              text: errText,
+              tool: { name: event.data.name, status, outcome }
+            } : m
           )
         };
       }
@@ -869,7 +874,7 @@ function applyStreamEvent(state, event) {
         id: chipId,
         role: "tool",
         text: errText,
-        tool: { name: event.data.name, status }
+        tool: { name: event.data.name, status, outcome }
       };
       return { ...state, messages: capMessages([...state.messages, chip]) };
     }
@@ -1828,7 +1833,8 @@ function AssistantPanel({
   navigate,
   balanceUsd = null,
   formatMoney = defaultFormatMoney,
-  renderGraph
+  renderGraph,
+  renderTranscript
 }) {
   const models = useAssistantModels();
   const threads = useAssistantThreads(userId);
@@ -1850,7 +1856,7 @@ function AssistantPanel({
       renderGraph
     }
   );
-  const items = buildAssistantTimeline(state, renderProposal);
+  const isThinking = assistantIsThinking(state);
   const openHistory = () => {
     setHistoryOpen((v) => {
       const next = !v;
@@ -1972,11 +1978,20 @@ function AssistantPanel({
         "aria-live": "polite",
         className: "min-h-0 flex-1 overflow-y-auto px-2 py-3",
         style: { fontSize: `${font.scale}rem` },
-        children: /* @__PURE__ */ jsx4(
+        children: renderTranscript ? renderTranscript({
+          messages: state.messages,
+          reasoning: state.reasoning,
+          streamingId: state.streamingId,
+          model: state.model,
+          isStreaming: streaming,
+          isThinking,
+          pendingProposals: state.pendingProposals,
+          renderProposal
+        }) : /* @__PURE__ */ jsx4(
           AgentTimeline,
           {
-            items,
-            isThinking: assistantIsThinking(state),
+            items: buildAssistantTimeline(state, renderProposal),
+            isThinking,
             emptyState: /* @__PURE__ */ jsx4("p", { className: "px-4 py-8 text-center text-muted-foreground text-sm", children: EMPTY_STATE })
           }
         )
@@ -2168,7 +2183,8 @@ function AssistantDock({
   balanceUsd = null,
   formatMoney,
   renderGraph,
-  onWorkflowMutation
+  onWorkflowMutation,
+  renderTranscript
 }) {
   const { open, openAssistant, closeAssistant } = useAssistantLauncher();
   const chat = useAssistantChat(userId, { onWorkflowMutation });
@@ -2272,7 +2288,8 @@ function AssistantDock({
               navigate,
               balanceUsd,
               formatMoney,
-              renderGraph
+              renderGraph,
+              renderTranscript
             },
             userId ?? "anon"
           ),

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/dist/integrations.d.ts

@@ -10,7 +10,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface IntegrationConnection {
     id: string;
     providerId: string;
-    connectorId: string;
+    connectorId?: string;
     status: "connected" | "pending" | "revoked" | "expired" | (string & {});
     grantedScopes?: string[];
     account?: {

package/dist/integrations.js

@@ -215,7 +215,7 @@ function buildConnectionIndex(connections) {
   const index = /* @__PURE__ */ new Map();
   for (const conn of connections) {
     if (conn.status === "revoked") continue;
-    index.set(`${conn.providerId}:${conn.connectorId}`, conn);
+    index.set(`${conn.providerId}:${conn.connectorId ?? conn.providerId}`, conn);
   }
   return index;
 }

package/package.json

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