@agent-native/core 0.172.10 → 0.173.0

package/dist/client/AgentPanel.js

@@ -22,16 +22,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *   <AgentChatSurface mode="page" className="h-screen" />
  */
 import { Tooltip as DesignSystemTooltip } from "@agent-native/toolkit/design-system";
-import { IconMessageCircle, IconMessageDots, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsHorizontal, IconArrowsMaximize, IconExternalLink, IconShare3, } from "@tabler/icons-react";
+import { IconMessageCircle, IconMessageDots, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsHorizontal, IconArrowsMaximize, IconExternalLink, IconShare3, IconBulb, } from "@tabler/icons-react";
 import React, { useState, useEffect, useRef, useCallback, useMemo, lazy, Suspense, startTransition, } from "react";
 import { flushSync } from "react-dom";
 import { hostedHarnessAgentOption, isHostedHarnessConfigured, isHostedHarnessRuntime, normalizeHostedHarnessRuntimes, } from "../agent/harness/hosted.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "./components/ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./components/ui/dropdown-menu.js";
 import { normalizeTooltipText } from "./components/ui/tooltip.js";
 import { ErrorReportActions } from "./ErrorReportActions.js";
 import { FeedbackButton, resolveFeedbackUrl } from "./FeedbackButton.js";
 import { RunsTrayMenuItem } from "./progress/RunsTray.js";
 import { ShareButton } from "./sharing/ShareButton.js";
+import { ThinkingDisplayProvider, useThinkingDisplayControl, } from "./thinking-display.js";
 // Lazy-load the full assistant-ui chat stack (tiptap composer + react-markdown +
 // assistant-ui + zod block schemas) so it is NOT in the static import closure of
 // every page. The header/tab chrome renders immediately; chat streams in once the
@@ -184,6 +185,26 @@ export function consumeAgentPanelOverlayFocusRestore(pendingOverlayRef, event) {
     pendingOverlayRef.current = false;
     event.preventDefault();
 }
+/**
+ * Reasoning visibility for this browser. Absent when a host pinned the mode
+ * through `thinkingDisplay`, so the menu never offers a control that cannot
+ * change anything.
+ */
+function ThinkingDisplayMenuItem() {
+    const t = useT();
+    const { mode, setMode, pinned } = useThinkingDisplayControl();
+    if (pinned)
+        return null;
+    return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(IconBulb, { size: 14, className: "shrink-0" }), t("agentChat.thinking.display")] }), _jsx(DropdownMenuSubContent, { children: _jsxs(DropdownMenuRadioGroup, { value: mode, onValueChange: (next) => {
+                        // The radio group hands back a bare string; anything that is not a
+                        // known mode would silently persist and read back as the default.
+                        if (next === "expanded" ||
+                            next === "collapsed" ||
+                            next === "hidden") {
+                            setMode(next);
+                        }
+                    }, children: [_jsx(DropdownMenuRadioItem, { value: "expanded", children: t("agentChat.thinking.expanded") }), _jsx(DropdownMenuRadioItem, { value: "collapsed", children: t("agentChat.thinking.collapsed") }), _jsx(DropdownMenuRadioItem, { value: "hidden", children: t("agentChat.thinking.hidden") })] }) })] }));
+}
 function useAvailableClis() {
     const [clis, setClis] = useState([]);
     useEffect(() => {
@@ -763,7 +784,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                                         ? t("agentPanel.hideChats")
                                         : t("agentPanel.allChats")] })), mode === "chat" && (_jsx(RunsTrayMenuItem, { pollMs: 0, limit: 12, showRecent: true, onOpenThread: openRunThread })), mode === "chat" && _jsx(DropdownMenuSeparator, {}), mode === "cli" && availableClis.length > 0 && (_jsxs(_Fragment, { children: [availableClis.map((cli) => (_jsxs(DropdownMenuItem, { onSelect: () => selectCli(cli.command), className: cn(cli.command === selectedCli
                                             ? "font-medium"
-                                            : "text-muted-foreground"), children: [cli.command === selectedCli ? (_jsx(IconCheck, { size: 12, className: "shrink-0" })) : (_jsx("span", { className: "w-3" })), cli.label] }, cli.command))), _jsx(DropdownMenuSeparator, {})] })), allowSettingsMode && (_jsxs(DropdownMenuItem, { onSelect: () => switchMode("settings"), className: cn(mode === "settings" ? "font-medium" : "text-muted-foreground"), children: [_jsx(IconSettings, { size: 14, className: "shrink-0" }), t("agentPanel.settings")] })), feedbackEnabled ? (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, () => setFeedbackOpen(true)), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), t("agentPanel.feedback")] })) : null, ((mode === "chat" && activeTabId) ||
+                                            : "text-muted-foreground"), children: [cli.command === selectedCli ? (_jsx(IconCheck, { size: 12, className: "shrink-0" })) : (_jsx("span", { className: "w-3" })), cli.label] }, cli.command))), _jsx(DropdownMenuSeparator, {})] })), mode === "chat" && _jsx(ThinkingDisplayMenuItem, {}), allowSettingsMode && (_jsxs(DropdownMenuItem, { onSelect: () => switchMode("settings"), className: cn(mode === "settings" ? "font-medium" : "text-muted-foreground"), children: [_jsx(IconSettings, { size: 14, className: "shrink-0" }), t("agentPanel.settings")] })), feedbackEnabled ? (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, () => setFeedbackOpen(true)), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), t("agentPanel.feedback")] })) : null, ((mode === "chat" && activeTabId) ||
                                 (mode === "cli" && canUseCodeTools && activeCliTab)) && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), mode === "chat" ? (shouldShowAgentPanelChatTabBar(tabs, activeTabId) ? (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeTab(activeTabId), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.closeTab"), _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherTabs(activeTabId), children: t("agentPanel.closeOtherTabs") }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllTabs(), children: [t("agentPanel.closeAllTabs"), _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] })) : (_jsxs(DropdownMenuItem, { onSelect: clearActiveTab, children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.clearChat")] }))) : (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeCliTab(activeCliTab), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.closeTab"), _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherCliTabs(activeCliTab), children: t("agentPanel.closeOtherTabs") }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllCliTabs(), children: [t("agentPanel.closeAllTabs"), _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] }))] }))] })] }), onCollapse && (_jsx(IconTooltip, { content: t("agentPanel.collapseSidebar"), children: _jsx("button", { type: "button", onClick: onCollapse, "aria-label": t("agentPanel.collapseSidebar"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconX, { size: 14 }) }) }))] })), [
         activeCliTab,
         addCliTab,
@@ -961,47 +982,47 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         closeCliTab,
         t,
     ]);
-    return (_jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: {
-            ...AGENT_PANEL_ROOT_STYLE,
-            ...style,
-            // The chat view-transition container otherwise traps fixed onboarding
-            // chrome below the app's own header instead of the viewport edge.
-            ...(isFirstRunOnboardingSurface ? { contain: "none" } : {}),
-        }, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
-                    __html: "@media (hover:hover) and (pointer:fine){" +
-                        ".agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:0;pointer-events:none;transition:opacity 150ms ease-out;}" +
-                        ".agent-panel-root:hover .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-panel-root:focus-within .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-sidebar-chat-header[data-agent-sidebar-chat-header][data-agent-sidebar-chat-header-active]{opacity:1;pointer-events:auto;}" +
-                        ".agent-sidebar-panel[data-agent-sidebar-per-app-chat='true'] .agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:1;pointer-events:auto;transition:none;}" +
-                        "}" +
-                        ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
-                        ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
-                        ".agent-tabs-scroll::-webkit-scrollbar{display:none;}" +
-                        `[data-agent-fullscreen='true'] .agent-thread-content,` +
-                        `[data-agent-fullscreen='true'] .agent-running-activity{` +
-                        `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
-                        `margin-left:auto;margin-right:auto;width:100%;}` +
-                        `[data-agent-fullscreen='true'] .agent-composer-area,` +
-                        `[data-agent-fullscreen='true'] .agent-plan-mode-callout{` +
-                        `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
-                        `margin-left:auto;margin-right:auto;width:100%;}` +
-                        `[data-agent-fullscreen='true'] .agent-composer-area:not(.agent-composer-area--compact){` +
-                        `padding-left:0;padding-right:0;}` +
-                        `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion--composer,` +
-                        `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion-error--composer{` +
-                        `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
-                        `margin-left:auto;margin-right:auto;width:100%;}`,
-                } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), showFirstRunOnboarding && mounted && !insideAgentSidebar && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(Suspense, { fallback: _jsx(ChatLoadingSkeleton, { renderHeader: showHeader ? renderChatHeader : undefined, centerComposerWhenEmpty: assistantChatProps.centerComposerWhenEmpty, composerSlot: assistantChatProps.composerSlot, composerAreaClassName: assistantChatProps.composerAreaClassName, composerLayoutVariant: assistantChatProps.composerLayoutVariant }), children: _jsx(MultiTabAssistantChatLazy, { ...assistantChatProps, agentChatSurface: effectiveAgentChatSurface, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageNewChatButton && !showHeader
-                            ? renderPageChatOverlay
-                            : undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, emptyStateAddon: emptyStateAddon, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) })) }), canUseCodeTools
-                ? mode === "cli" &&
-                    cliTabs.map((id) => (_jsx("div", { className: "min-h-0 relative flex-1", style: {
-                            display: id === activeCliTab ? undefined : "none",
-                        }, children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: t("agentPanel.loadingTerminal") }), children: _jsx(AgentTerminal, { command: selectedCli, hideInFrame: false, className: "h-full", style: { background: "transparent" } }) }) }, id)))
-                : mode === "cli" && (_jsx("div", { className: "flex flex-1 flex-col items-center justify-center min-h-0 px-6 gap-3", children: _jsx(CodeAccessUnavailablePanel, { title: codeAccessEnabled
-                            ? t("agentPanel.cliRequiresDevMode")
-                            : codeUnavailableTitle, description: codeAccessEnabled
-                            ? t("agentPanel.cliRequiresDevModeDescription")
-                            : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex flex-1 flex-col min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) }) })), mode === "settings" && (_jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" })] }), children: _jsx(SettingsPanel, { isDevMode: isDevMode, onToggleDevMode: () => setDevMode(!isDevMode), showDevToggle: showDevToggle, devAppUrl: devAppUrl, initialSection: settingsSection.section, sectionRequestKey: settingsSection.requestKey }) }) }))] }));
+    return (_jsx(ThinkingDisplayProvider, { value: assistantChatProps.thinkingDisplay, children: _jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: {
+                ...AGENT_PANEL_ROOT_STYLE,
+                ...style,
+                // The chat view-transition container otherwise traps fixed onboarding
+                // chrome below the app's own header instead of the viewport edge.
+                ...(isFirstRunOnboardingSurface ? { contain: "none" } : {}),
+            }, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                        __html: "@media (hover:hover) and (pointer:fine){" +
+                            ".agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:0;pointer-events:none;transition:opacity 150ms ease-out;}" +
+                            ".agent-panel-root:hover .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-panel-root:focus-within .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-sidebar-chat-header[data-agent-sidebar-chat-header][data-agent-sidebar-chat-header-active]{opacity:1;pointer-events:auto;}" +
+                            ".agent-sidebar-panel[data-agent-sidebar-per-app-chat='true'] .agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:1;pointer-events:auto;transition:none;}" +
+                            "}" +
+                            ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
+                            ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
+                            ".agent-tabs-scroll::-webkit-scrollbar{display:none;}" +
+                            `[data-agent-fullscreen='true'] .agent-thread-content,` +
+                            `[data-agent-fullscreen='true'] .agent-running-activity{` +
+                            `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
+                            `margin-left:auto;margin-right:auto;width:100%;}` +
+                            `[data-agent-fullscreen='true'] .agent-composer-area,` +
+                            `[data-agent-fullscreen='true'] .agent-plan-mode-callout{` +
+                            `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
+                            `margin-left:auto;margin-right:auto;width:100%;}` +
+                            `[data-agent-fullscreen='true'] .agent-composer-area:not(.agent-composer-area--compact){` +
+                            `padding-left:0;padding-right:0;}` +
+                            `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion--composer,` +
+                            `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion-error--composer{` +
+                            `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
+                            `margin-left:auto;margin-right:auto;width:100%;}`,
+                    } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), showFirstRunOnboarding && mounted && !insideAgentSidebar && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(Suspense, { fallback: _jsx(ChatLoadingSkeleton, { renderHeader: showHeader ? renderChatHeader : undefined, centerComposerWhenEmpty: assistantChatProps.centerComposerWhenEmpty, composerSlot: assistantChatProps.composerSlot, composerAreaClassName: assistantChatProps.composerAreaClassName, composerLayoutVariant: assistantChatProps.composerLayoutVariant }), children: _jsx(MultiTabAssistantChatLazy, { ...assistantChatProps, agentChatSurface: effectiveAgentChatSurface, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageNewChatButton && !showHeader
+                                ? renderPageChatOverlay
+                                : undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, emptyStateAddon: emptyStateAddon, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) })) }), canUseCodeTools
+                    ? mode === "cli" &&
+                        cliTabs.map((id) => (_jsx("div", { className: "min-h-0 relative flex-1", style: {
+                                display: id === activeCliTab ? undefined : "none",
+                            }, children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: t("agentPanel.loadingTerminal") }), children: _jsx(AgentTerminal, { command: selectedCli, hideInFrame: false, className: "h-full", style: { background: "transparent" } }) }) }, id)))
+                    : mode === "cli" && (_jsx("div", { className: "flex flex-1 flex-col items-center justify-center min-h-0 px-6 gap-3", children: _jsx(CodeAccessUnavailablePanel, { title: codeAccessEnabled
+                                ? t("agentPanel.cliRequiresDevMode")
+                                : codeUnavailableTitle, description: codeAccessEnabled
+                                ? t("agentPanel.cliRequiresDevModeDescription")
+                                : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex flex-1 flex-col min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) }) })), mode === "settings" && (_jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" })] }), children: _jsx(SettingsPanel, { isDevMode: isDevMode, onToggleDevMode: () => setDevMode(!isDevMode), showDevToggle: showDevToggle, devAppUrl: devAppUrl, initialSection: settingsSection.section, sectionRequestKey: settingsSection.requestKey }) }) }))] }) }));
 }
 // ─── Resize handle ──────────────────────────────────────────────────────────
 const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
@@ -1429,7 +1450,7 @@ export function AgentChatSurface({ mode = "panel", className, defaultMode = "cha
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
  */
-export function AgentSidebar({ children, enabled = true, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, availableAgents, availableModels, modelListLoading, selectedAgent, onAgentChange, onConnectLocalRuntime, onConnectProvider, runtime, adapterReloadKey, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openStorageKey, restoreActiveThread = true, apiUrl, agentChatSurface, desktopIdentityUnauthenticated, desktopIdentityAuthenticated, showTabBar = true, suppressInlineOpenApp, composerPlaceholder, openOnChatRunning = false, onFullscreenRequest, scope, toggleScopeId, isolateHistoryByScope = false, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, }) {
+export function AgentSidebar({ children, enabled = true, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, availableAgents, availableModels, modelListLoading, selectedAgent, onAgentChange, onConnectLocalRuntime, onConnectProvider, runtime, adapterReloadKey, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openStorageKey, restoreActiveThread = true, apiUrl, agentChatSurface, desktopIdentityUnauthenticated, desktopIdentityAuthenticated, showTabBar = true, suppressInlineOpenApp, composerPlaceholder, openOnChatRunning = false, onFullscreenRequest, scope, toggleScopeId, isolateHistoryByScope = false, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, thinkingDisplay, }) {
     const staticHostedHarnessEnabled = isHostedHarnessConfigured(injectedAgentNativeConfig().harness);
     const hostedHarnessQuery = useActionQuery("get-hosted-harness-config", undefined, { enabled: staticHostedHarnessEnabled });
     const hostedHarnessStatus = hostedHarnessQuery.data;
@@ -2075,7 +2096,7 @@ export function AgentSidebar({ children, enabled = true, emptyStateText = "How c
                             ? "desktop"
                             : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": effectivePosition, "data-agent-native-hosted-harness-ui": hostedHarnessUi ? "desktop" : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-per-app-chat": isPerAppChatSidebar ? "true" : undefined, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
                     ? getAgentChatViewTransitionStyle(panelStyle)
-                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, availableAgents: effectiveAvailableAgents, availableModels: availableModels, modelListLoading: modelListLoading, selectedAgent: effectiveSelectedAgent, onAgentChange: effectiveOnAgentChange, hostedHarness: hostedHarnessEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, runtime: runtime, adapterReloadKey: adapterReloadKey, threadFooterSlot: threadFooterSlot, apiUrl: apiUrl, agentChatSurface: agentChatSurface, desktopIdentityUnauthenticated: desktopIdentityUnauthenticated, desktopIdentityAuthenticated: desktopIdentityAuthenticated, showTabBar: effectiveShowTabBar, suppressInlineOpenApp: suppressInlineOpenApp, composerPlaceholder: composerPlaceholder, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, onFullViewRequest: onFullscreenRequest, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: effectivePosition, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
+                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, availableAgents: effectiveAvailableAgents, availableModels: availableModels, modelListLoading: modelListLoading, selectedAgent: effectiveSelectedAgent, onAgentChange: effectiveOnAgentChange, hostedHarness: hostedHarnessEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, runtime: runtime, adapterReloadKey: adapterReloadKey, threadFooterSlot: threadFooterSlot, apiUrl: apiUrl, agentChatSurface: agentChatSurface, desktopIdentityUnauthenticated: desktopIdentityUnauthenticated, desktopIdentityAuthenticated: desktopIdentityAuthenticated, showTabBar: effectiveShowTabBar, suppressInlineOpenApp: suppressInlineOpenApp, composerPlaceholder: composerPlaceholder, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, onFullViewRequest: onFullscreenRequest, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, thinkingDisplay: thinkingDisplay, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: effectivePosition, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
     const drawerPlaceholder = wideDrawerEnabled && !presentationMode && panelOpen ? (_jsx("div", { "aria-hidden": "true", className: "agent-sidebar-drawer-placeholder shrink-0", "data-agent-sidebar-placeholder": "true", style: { width: drawerPlaceholderWidth + 1 } })) : null;
     return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [showFirstRunOnboarding && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": effectivePosition, "data-agent-native-hosted-harness-ui": hostedHarnessUi ? "desktop" : undefined, "data-agent-native-hosted-chat": isPerAppChatHosted ? "true" : undefined, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [isMobile &&
                             !isPerAppChatHosted &&

package/dist/client/AssistantChat.d.ts

@@ -2,6 +2,7 @@ import type { ComposerAgentOption, ComposerImageModelMenu } from "@agent-native/
 import type { ChatModelAdapter, ExportedMessageRepository } from "@assistant-ui/react";
 import React from "react";
 import type { ReasoningEffort } from "../shared/reasoning-effort.js";
+import type { ThinkingDisplay } from "../shared/thinking-display.js";
 import { type AgentChatSurfaceKind } from "./agent-chat-adapter.js";
 import { type AgentChatContextItem } from "./agent-chat.js";
 import { type QueuedAttachment } from "./chat/attachment-adapters.js";
@@ -447,6 +448,13 @@ export interface AssistantChatProps {
         onAlwaysAllow?: (approvalKey: string, toolName: string) => void | Promise<void>;
         alwaysAllowScope?: "action" | "exact-command";
     };
+    /**
+     * Pin how much model reasoning this chat shows: "expanded" opens the live
+     * cell, "collapsed" keeps it one click away, "hidden" renders none. Omit to
+     * let the reader's own preference apply, which is what surfaces the in-chat
+     * control — a pinned mode hides it rather than leaving a dead menu item.
+     */
+    thinkingDisplay?: ThinkingDisplay;
 }
 export declare function shouldShowAssistantChatModelSelector(showModelSelector: boolean | undefined): boolean;
 export declare const CHAT_STORAGE_PREFIX = "agent-chat:";

package/dist/client/AssistantChat.js

@@ -38,6 +38,7 @@ import { addMcpConnectionCompleteListener, consumeMcpConnectionResume, } from ".
 import { McpConnectionSuggestion } from "./resources/McpConnectionSuggestion.js";
 import { claimRunStream, createRunStreamToken, ownsRunStream, releaseRunStream, } from "./run-stream-ownership.js";
 import { AgentAutoContinueSignal, readSSEStreamRaw, settleInterruptedToolCalls, } from "./sse-event-processor.js";
+import { ThinkingDisplayProvider } from "./thinking-display.js";
 import { callAction } from "./use-action.js";
 import { useAgentEngineConfigured } from "./use-agent-engine-configured.js";
 import { appendChatThreadScopeParams, } from "./use-chat-threads.js";
@@ -4519,5 +4520,5 @@ export const AssistantChat = forwardRef(function AssistantChat({ apiUrl = agentN
     const runtime = useLocalRuntime(adapter, {
         adapters: { attachments: attachmentAdapter },
     });
-    return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(TooltipProvider, { delayDuration: 200, children: _jsx(ThreadPrimitive.Root, { className: "flex flex-1 flex-col h-full min-h-0 overflow-x-hidden", children: _jsx(AssistantUiStaleIndexErrorBoundary, { resetKey: `${tabId ?? ""}:${threadId ?? ""}`, componentName: "AssistantChat", children: _jsx(AssistantChatInner, { ref: ref, ...props, browserTabId: browserTabId, contextScope: contextScope, contextNamespace: contextNamespace, isActiveComposer: isActiveComposer, apiUrl: apiUrl, tabId: tabId, threadId: threadId }) }) }) }) }));
+    return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(ThinkingDisplayProvider, { value: props.thinkingDisplay, children: _jsx(TooltipProvider, { delayDuration: 200, children: _jsx(ThreadPrimitive.Root, { className: "flex flex-1 flex-col h-full min-h-0 overflow-x-hidden", children: _jsx(AssistantUiStaleIndexErrorBoundary, { resetKey: `${tabId ?? ""}:${threadId ?? ""}`, componentName: "AssistantChat", children: _jsx(AssistantChatInner, { ref: ref, ...props, browserTabId: browserTabId, contextScope: contextScope, contextNamespace: contextNamespace, isActiveComposer: isActiveComposer, apiUrl: apiUrl, tabId: tabId, threadId: threadId }) }) }) }) }) }));
 });

package/dist/client/agent-chat/index.d.ts

@@ -42,3 +42,5 @@ export { clearReservedToolRenderersForTests, clearToolRenderersForTests, registe
 export * from "../chat/connectors.js";
 export * from "../chat/runtime.js";
 export { CHAT_FIRST_APP_LAYOUT_STORAGE_KEY, CHAT_FIRST_DEFAULT_APP_IDS, CHAT_FIRST_SURFACE_TABS_STORAGE_KEY, CHAT_FIRST_SURFACE_PANEL_STORAGE_KEY, CHAT_FIRST_SURFACE_WIDTH_DEFAULT, CHAT_FIRST_SURFACE_WIDTH_MIN, clampChatFirstSurfaceWidth, CHAT_FIRST_MODE_STORAGE_KEY, CHAT_FIRST_MODE_CHANGED_EVENT, CHAT_FIRST_OPEN_APP_EVENT, CHAT_FIRST_OPEN_BROWSER_EVENT, CHAT_FIRST_WATCH_SESSION_EVENT, CHAT_FIRST_SURFACE_CATALOG, chatFirstSurfaceTabId, closeChatFirstSessionWatch, emitChatFirstOpenApp, emitChatFirstOpenBrowser, emitChatFirstSessionWatch, getChatFirstSessionWatchStore, getChatFirstSurfaceTabsStore, getChatFirstSurfacePanelStore, orderChatFirstAppIds, readChatFirstAppLayout, resolveChatFirstAppTarget, resolveChatFirstBrowserTarget, resolveChatFirstSessionId, normalizeChatFirstSessionReference, readChatFirstMode, readChatFirstModeState, readChatFirstSurfaceWidth, subscribeChatFirstOpenApp, subscribeChatFirstOpenBrowser, subscribeChatFirstSessionWatch, useChatFirstSessionWatch, useChatFirstSurfaceResize, useChatFirstSurfacePanel, useChatFirstSurfaceTabs, writeChatFirstAppLayout, writeChatFirstMode, writeChatFirstSurfaceWidth, type ChatFirstAppLayoutPreference, type ChatFirstModeReadResult, type ChatFirstAppRegistration, type ChatFirstAppResolution, type ChatFirstAppTarget, type ChatFirstAppSurfacePlacement, type ChatFirstAgentActivity, type ChatFirstAgentActivityStatus, type ChatFirstOpenAppDelivery, type ChatFirstOpenAppDetail, type ChatFirstOpenBrowserDetail, type ChatFirstBrowserResolution, type ChatFirstSessionKind, type ChatFirstSessionReference, type ChatFirstSessionWatchDelivery, type ChatFirstSessionWatchState, type ChatFirstSessionWatchStore, type ChatFirstSurfaceKind, type ChatFirstSurfaceTab, type ChatFirstSurfacePanelState, type ChatFirstSurfacePanelStore, type ChatFirstSurfaceTabsState, type ChatFirstSurfaceTabsStore, } from "../chat-first.js";
+export { ThinkingDisplayProvider, getBrowserThinkingDisplay, setBrowserThinkingDisplay, subscribeToBrowserThinkingDisplay, useThinkingDisplay, useThinkingDisplayControl, } from "../thinking-display.js";
+export { DEFAULT_THINKING_DISPLAY, THINKING_DISPLAY_MODES, isThinkingDisplay, type ThinkingDisplay, } from "../../shared/thinking-display.js";

package/dist/client/agent-chat/index.js

@@ -41,3 +41,5 @@ export { clearReservedToolRenderersForTests, clearToolRenderersForTests, registe
 export * from "../chat/connectors.js";
 export * from "../chat/runtime.js";
 export { CHAT_FIRST_APP_LAYOUT_STORAGE_KEY, CHAT_FIRST_DEFAULT_APP_IDS, CHAT_FIRST_SURFACE_TABS_STORAGE_KEY, CHAT_FIRST_SURFACE_PANEL_STORAGE_KEY, CHAT_FIRST_SURFACE_WIDTH_DEFAULT, CHAT_FIRST_SURFACE_WIDTH_MIN, clampChatFirstSurfaceWidth, CHAT_FIRST_MODE_STORAGE_KEY, CHAT_FIRST_MODE_CHANGED_EVENT, CHAT_FIRST_OPEN_APP_EVENT, CHAT_FIRST_OPEN_BROWSER_EVENT, CHAT_FIRST_WATCH_SESSION_EVENT, CHAT_FIRST_SURFACE_CATALOG, chatFirstSurfaceTabId, closeChatFirstSessionWatch, emitChatFirstOpenApp, emitChatFirstOpenBrowser, emitChatFirstSessionWatch, getChatFirstSessionWatchStore, getChatFirstSurfaceTabsStore, getChatFirstSurfacePanelStore, orderChatFirstAppIds, readChatFirstAppLayout, resolveChatFirstAppTarget, resolveChatFirstBrowserTarget, resolveChatFirstSessionId, normalizeChatFirstSessionReference, readChatFirstMode, readChatFirstModeState, readChatFirstSurfaceWidth, subscribeChatFirstOpenApp, subscribeChatFirstOpenBrowser, subscribeChatFirstSessionWatch, useChatFirstSessionWatch, useChatFirstSurfaceResize, useChatFirstSurfacePanel, useChatFirstSurfaceTabs, writeChatFirstAppLayout, writeChatFirstMode, writeChatFirstSurfaceWidth, } from "../chat-first.js";
+export { ThinkingDisplayProvider, getBrowserThinkingDisplay, setBrowserThinkingDisplay, subscribeToBrowserThinkingDisplay, useThinkingDisplay, useThinkingDisplayControl, } from "../thinking-display.js";
+export { DEFAULT_THINKING_DISPLAY, THINKING_DISPLAY_MODES, isThinkingDisplay, } from "../../shared/thinking-display.js";

package/dist/client/chat/index.d.ts

@@ -20,3 +20,5 @@ export { useChatModels, type UseChatModelsResult, type EngineModelGroup, } from
 export { useChatThreads, type ChatThreadScope, type ChatThreadSnapshot, type ChatThreadSummary, type ChatThreadData, type ChatThreadShareLink, type ChatThreadShareState, type UseChatThreadsOptions, } from "../use-chat-threads.js";
 export { ChatHistoryList, type ChatHistoryItem, type ChatHistorySection, type ChatHistoryListProps, } from "./ChatHistoryList.js";
 export * from "../conversation/index.js";
+export { ThinkingDisplayProvider, getBrowserThinkingDisplay, setBrowserThinkingDisplay, subscribeToBrowserThinkingDisplay, useThinkingDisplay, useThinkingDisplayControl, } from "../thinking-display.js";
+export { DEFAULT_THINKING_DISPLAY, THINKING_DISPLAY_MODES, isThinkingDisplay, type ThinkingDisplay, } from "../../shared/thinking-display.js";

package/dist/client/chat/index.js

@@ -20,3 +20,5 @@ export { useChatModels, } from "../use-chat-models.js";
 export { useChatThreads, } from "../use-chat-threads.js";
 export { ChatHistoryList, } from "./ChatHistoryList.js";
 export * from "../conversation/index.js";
+export { ThinkingDisplayProvider, getBrowserThinkingDisplay, setBrowserThinkingDisplay, subscribeToBrowserThinkingDisplay, useThinkingDisplay, useThinkingDisplayControl, } from "../thinking-display.js";
+export { DEFAULT_THINKING_DISPLAY, THINKING_DISPLAY_MODES, isThinkingDisplay, } from "../../shared/thinking-display.js";

package/dist/client/chat/message-components.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { type ThinkingDisplay } from "../../shared/thinking-display.js";
 import type { ContentPart } from "../sse-event-processor.js";
 import { type RunErrorInfo } from "./run-recovery.js";
 import { toolCallHasPendingApproval } from "./tool-call-display.js";
@@ -145,7 +146,7 @@ export declare function isCollapsibleAssistantWorkPart(part: {
         approvalKey?: string;
         dismissed?: boolean;
     };
-}): boolean;
+}, thinkingDisplay?: ThinkingDisplay): boolean;
 export declare function getAssistantToolSummaryInfo(parts: readonly {
     type?: string;
     toolCallId?: string;
@@ -161,18 +162,7 @@ export declare function getAssistantToolSummaryInfo(parts: readonly {
     startIndex: number;
     hiddenToolCount: number;
 };
-export declare function groupAssistantWorkParts(part: {
-    type?: string;
-    toolCallId?: string;
-    toolName?: string;
-    args?: Record<string, unknown>;
-    chatUI?: unknown;
-    mcpApp?: unknown;
-    approval?: {
-        approvalKey?: string;
-        dismissed?: boolean;
-    };
-}, index: number, parts: readonly {
+export interface AssistantWorkPart {
     type?: string;
     toolCallId?: string;
     toolName?: string;
@@ -183,7 +173,8 @@ export declare function groupAssistantWorkParts(part: {
         approvalKey?: string;
         dismissed?: boolean;
     };
-}[]): ["group-work"] | null;
+}
+export declare function groupAssistantWorkParts(part: AssistantWorkPart, index: number, parts: readonly AssistantWorkPart[], thinkingDisplay?: ThinkingDisplay): ["group-work"] | null;
 export declare function shouldShowInlineRunError({ runError, bannerRunErrorKey, }: {
     runError: RunErrorInfo | null;
     bannerRunErrorKey: string | null | undefined;

package/dist/client/chat/message-components.js

@@ -8,6 +8,7 @@ import { PastedTextChip } from "@agent-native/toolkit/composer/PastedTextChip";
 import { useThreadRuntime, useMessageRuntime, useComposer, MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ComposerPrimitive, useMessagePartReasoning, useMessagePartRuntime, useAuiState, } from "@assistant-ui/react";
 import { IconX, IconCheck, IconCopy, IconChevronDown, IconChevronLeft, IconChevronRight, IconDots, IconGitFork, IconId, IconQuote, IconRefresh, IconArrowBackUp, IconFile, IconFolder, IconFileText, IconCheckbox, IconMail, IconUser, IconPresentation, IconStack2, IconMessageChatbot, IconPencil, IconAlertTriangle, IconLoader2, } from "@tabler/icons-react";
 import React, { useState, useEffect, useCallback, useRef } from "react";
+import { DEFAULT_THINKING_DISPLAY, } from "../../shared/thinking-display.js";
 import { getActiveRun } from "../active-run-state.js";
 import { agentNativePath } from "../api-path.js";
 import { writeClipboardText } from "../clipboard.js";
@@ -18,6 +19,7 @@ import { localizeKnownChatErrorText } from "../error-format.js";
 import { DEFAULT_LOCALE, useFormatters, useOptionalLocale, useT, } from "../i18n.js";
 import { ThumbsFeedback } from "../observability/ThumbsFeedback.js";
 import { McpConnectionSuggestion } from "../resources/McpConnectionSuggestion.js";
+import { useThinkingDisplay } from "../thinking-display.js";
 import { isCallAgentToolCallShadowed, isToolCallActive, shadowedCallAgentToolCallIds, } from "../tool-display.js";
 import { cn } from "../utils.js";
 import { MarkdownText, renderMarkdownToClipboardHtml, SmoothMarkdownText, } from "./markdown-renderer.js";
@@ -795,9 +797,11 @@ export function isAlwaysVisibleAssistantTool(part) {
         typeof part.toolName === "string" &&
         ALWAYS_VISIBLE_ASSISTANT_TOOLS.has(part.toolName));
 }
-export function isCollapsibleAssistantWorkPart(part) {
+export function isCollapsibleAssistantWorkPart(part, thinkingDisplay = DEFAULT_THINKING_DISPLAY) {
+    // Hidden reasoning renders nothing, so counting it as work would wrap a
+    // reasoning-only turn in an empty "Worked for…" disclosure.
     if (part.type === "reasoning")
-        return true;
+        return thinkingDisplay !== "hidden";
     return (part.type === "tool-call" &&
         !isAlwaysVisibleAssistantTool(part) &&
         part.chatUI === undefined &&
@@ -825,16 +829,17 @@ export function getAssistantToolSummaryInfo(parts) {
         hiddenToolCount: toolCallIndices.length - ASSISTANT_VISIBLE_TOOL_CALL_LIMIT,
     };
 }
-export function groupAssistantWorkParts(part, index, parts) {
+export function groupAssistantWorkParts(part, index, parts, thinkingDisplay = DEFAULT_THINKING_DISPLAY) {
     if (isCallAgentToolCallShadowed(parts, index)) {
         const previousPart = parts[index - 1];
         const previousPartIsInWorkGroup = previousPart != null &&
-            (isCollapsibleAssistantWorkPart(previousPart) ||
+            (isCollapsibleAssistantWorkPart(previousPart, thinkingDisplay) ||
                 isCallAgentToolCallShadowed(parts, index - 1));
         return previousPartIsInWorkGroup ? ["group-work"] : null;
     }
-    if (isCollapsibleAssistantWorkPart(part))
+    if (isCollapsibleAssistantWorkPart(part, thinkingDisplay)) {
         return ["group-work"];
+    }
     return null;
 }
 export function shouldShowInlineRunError({ runError, bannerRunErrorKey, }) {
@@ -882,6 +887,8 @@ export function AssistantMessage() {
     const messageTurnId = assistantMessageTurnId(msg);
     const userStoppedRun = React.useContext(UserStoppedRunContext);
     const isUserStoppedRun = assistantMessageWasUserStopped(msg) || userStoppedRun(messageRunId);
+    const thinkingDisplay = useThinkingDisplay();
+    const groupWorkParts = useCallback((part, index, parts) => groupAssistantWorkParts(part, index, parts, thinkingDisplay), [thinkingDisplay]);
     const hasRenderableContent = assistantMessageHasRenderableContent(msg);
     const hasUnresolvedTool = assistantMessageHasUnresolvedTool(msg.content);
     const hasActiveTool = assistantMessageHasActiveTool(msg.content);
@@ -1066,11 +1073,11 @@ export function AssistantMessage() {
     const hasCollapsibleWork = Array.isArray(msgContent) &&
         msgContent.some((p, index) => !isCallAgentToolCallShadowed(msgContent, index) &&
             (p.type !== "tool-call" || p.activity !== true) &&
-            isCollapsibleAssistantWorkPart(p));
+            isCollapsibleAssistantWorkPart(p, thinkingDisplay));
     const firstWorkPartIndex = Array.isArray(msgContent)
         ? msgContent.findIndex((p, index) => !isCallAgentToolCallShadowed(msgContent, index) &&
             (p.type !== "tool-call" || p.activity !== true) &&
-            isCollapsibleAssistantWorkPart(p))
+            isCollapsibleAssistantWorkPart(p, thinkingDisplay))
         : -1;
     const shadowedToolCallIds = Array.isArray(msgContent)
         ? shadowedCallAgentToolCallIds(msgContent)
@@ -1081,7 +1088,7 @@ export function AssistantMessage() {
     });
     if (!hasRenderableContent || isMissingCredential)
         return null;
-    return (_jsxs("div", { className: "group relative", style: { contentVisibility: isComplete ? "auto" : "visible" }, children: [_jsxs("div", { className: "w-full max-w-[95%] text-sm leading-relaxed text-foreground", children: [isComplete && (_jsx(McpConnectionSuggestion, { text: responseConnectionText, contextText: responseConnectionContext, variant: "response" })), _jsx(ToolCallStackMotion, { children: _jsx(MessagePrimitive.GroupedParts, { groupBy: groupAssistantWorkParts, children: ({ part, children }) => {
+    return (_jsxs("div", { className: "group relative", style: { contentVisibility: isComplete ? "auto" : "visible" }, children: [_jsxs("div", { className: "w-full max-w-[95%] text-sm leading-relaxed text-foreground", children: [isComplete && (_jsx(McpConnectionSuggestion, { text: responseConnectionText, contextText: responseConnectionContext, variant: "response" })), _jsx(ToolCallStackMotion, { children: _jsx(MessagePrimitive.GroupedParts, { groupBy: groupWorkParts, children: ({ part, children }) => {
                                 switch (part.type) {
                                     case "group-work": {
                                         const showSummary = shouldShowAssistantWorkSummary({

package/dist/client/chat/tool-call-display.js

@@ -12,6 +12,7 @@ import { useOptionalLocale, useT } from "../i18n.js";
 import { McpAppRenderer } from "../mcp-apps/McpAppRenderer.js";
 import { findMcpIntegrationForToolName } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
+import { useThinkingDisplay } from "../thinking-display.js";
 import { BashCell, EditCell, WriteCell, FilesChangedSummary, } from "../tool-cells/index.js";
 import { humanizeToolName, isCallAgentToolCallShadowed, isToolCallActive, } from "../tool-display.js";
 import { useAgentChatContext } from "../use-agent-chat-context.js";
@@ -644,22 +645,26 @@ function isReconnectToolSummaryPart(content, index, startIndex) {
 // ─── Reasoning / Thinking cell ────────────────────────────────────────────────
 /**
  * Completed reasoning and tool calls share one outer "Worked for…"
- * disclosure. Reasoning cells inside it render their prose directly so
- * opening that summary never reveals a redundant second disclosure.
+ * disclosure. Inside it a reasoning cell keeps its own disclosure — the tool
+ * calls it sits between are collapsible there, and reasoning that could not be
+ * collapsed was the longest thing in an opened summary by far.
  */
 const WorkSummaryContentContext = React.createContext(false);
 export function ReasoningCell({ text, isStreaming = false, defaultOpen, autoCollapse = false, collapseWhenReplaced = false, durationMs, }) {
     const t = useT();
     const formatDuration = useLocalizedWorkedDuration();
+    const display = useThinkingDisplay();
     const embeddedInWorkSummary = React.useContext(WorkSummaryContentContext);
-    const [open, setOpen] = useState(defaultOpen ?? true);
+    // Only "expanded" honours a caller's request to start open. "collapsed"
+    // keeps every cell shut until the reader asks for it, which is the point of
+    // the mode — a live cell that opens itself is what pushes the answer off
+    // screen mid-turn.
+    const startOpen = display === "expanded" ? (defaultOpen ?? true) : false;
+    const [open, setOpen] = useState(startOpen);
     const wasStreamingRef = useRef(isStreaming);
     const wasReplacedRef = useRef(collapseWhenReplaced);
+    const previousDisplayRef = useRef(display);
     const trimmed = text.trim();
-    // Reasoning is already a compact live status surface. Rendering the latest
-    // chunk directly avoids a second character-level queue that can lag behind
-    // the model and make the surrounding chat look like it is jumping.
-    const visibleText = trimmed;
     useEffect(() => {
         if (autoCollapse && wasStreamingRef.current && !isStreaming) {
             setOpen(false);
@@ -672,11 +677,19 @@ export function ReasoningCell({ text, isStreaming = false, defaultOpen, autoColl
         }
         wasReplacedRef.current = collapseWhenReplaced;
     }, [collapseWhenReplaced]);
+    // Switching the preference re-applies it to cells already on screen, so the
+    // change is visible on the turn the reader is looking at rather than only on
+    // the next one.
+    useEffect(() => {
+        if (previousDisplayRef.current === display)
+            return;
+        previousDisplayRef.current = display;
+        setOpen(startOpen);
+    }, [display, startOpen]);
+    if (display === "hidden")
+        return null;
     if (!trimmed && !isStreaming)
         return null;
-    if (embeddedInWorkSummary) {
-        return (_jsx("div", { className: "pb-1 pl-5 text-[13px] leading-relaxed text-muted-foreground whitespace-pre-wrap", children: visibleText || (isStreaming ? "…" : "") }));
-    }
     const label = isStreaming
         ? t("agentChat.status.thinking")
         : durationMs != null
@@ -687,7 +700,7 @@ export function ReasoningCell({ text, isStreaming = false, defaultOpen, autoColl
     // Only clamp to a scroll-free "tail" view while actively streaming and
     // expanded — once the run finishes the full text is shown, unclamped.
     const showTail = isStreaming && open;
-    return (_jsxs("div", { className: "my-0.5 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") }), isStreaming ? (_jsx("span", { className: "agent-thinking-indicator__text", children: label })) : (_jsx("span", { children: label }))] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: cn("pl-5 pb-1", showTail && "reasoning-cell-tail"), children: _jsx("div", { className: "text-[13px] leading-relaxed text-muted-foreground whitespace-pre-wrap", children: visibleText || (isStreaming ? "…" : "") }) }) })] }));
+    return (_jsxs("div", { className: cn("w-full", embeddedInWorkSummary ? "my-0" : "my-0.5"), children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") }), isStreaming ? (_jsx("span", { className: "agent-thinking-indicator__text", children: label })) : (_jsx("span", { children: label }))] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: cn("ps-5 pb-1", showTail && "reasoning-cell-tail"), children: trimmed ? (_jsx("div", { className: "agent-reasoning-markdown text-[13px] leading-relaxed text-muted-foreground", children: _jsx(SmoothMarkdownText, { text: trimmed, streaming: isStreaming, animateStreaming: false, resetKey: "reasoning", statusType: isStreaming ? "running" : "complete" }) })) : (_jsx("div", { className: "text-[13px] leading-relaxed text-muted-foreground", children: isStreaming ? "…" : "" })) }) })] }));
 }
 // ─── Worked-for duration helpers ──────────────────────────────────────────────
 export function formatWorkedDuration(ms, options = {}) {

package/dist/client/thinking-display.d.ts

@@ -0,0 +1,23 @@
+/** Browser-local reasoning-visibility preference for the chat surface.
+ *
+ * Presentation only, and deliberately device-local: it must not reach the
+ * agent, application state, or the engine's reasoning-effort request.
+ */
+import type { ReactNode } from "react";
+import { type ThinkingDisplay } from "../shared/thinking-display.js";
+export declare const THINKING_DISPLAY_STORAGE_KEY = "agent-native:thinking-display";
+export declare function getBrowserThinkingDisplay(): ThinkingDisplay;
+export declare function setBrowserThinkingDisplay(mode: ThinkingDisplay): void;
+export declare function subscribeToBrowserThinkingDisplay(callback: () => void): () => void;
+export declare function ThinkingDisplayProvider({ value, children, }: {
+    value?: ThinkingDisplay;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useThinkingDisplay(): ThinkingDisplay;
+/** Reads and writes the preference for the in-chat control. */
+export declare function useThinkingDisplayControl(): {
+    mode: ThinkingDisplay;
+    setMode: (mode: ThinkingDisplay) => void;
+    /** True when a host prop pins the mode, so no control should be offered. */
+    pinned: boolean;
+};

package/dist/client/thinking-display.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Browser-local reasoning-visibility preference for the chat surface.
+ *
+ * Presentation only, and deliberately device-local: it must not reach the
+ * agent, application state, or the engine's reasoning-effort request.
+ */
+import { createContext, useCallback, useContext, useSyncExternalStore, } from "react";
+import { DEFAULT_THINKING_DISPLAY, parseThinkingDisplay, } from "../shared/thinking-display.js";
+export const THINKING_DISPLAY_STORAGE_KEY = "agent-native:thinking-display";
+const THINKING_DISPLAY_CHANGE_EVENT = "agent-native:thinking-display-change";
+export function getBrowserThinkingDisplay() {
+    if (typeof window === "undefined")
+        return DEFAULT_THINKING_DISPLAY;
+    try {
+        return (parseThinkingDisplay(window.localStorage.getItem(THINKING_DISPLAY_STORAGE_KEY)) ?? DEFAULT_THINKING_DISPLAY);
+        // A blocked or unavailable localStorage means "no stored preference",
+        // which is exactly the default. Nothing downstream can act on the
+        // difference, and throwing would break the whole chat header.
+        // coercion-ok: absent and unreadable are the same answer for this key.
+    }
+    catch {
+        return DEFAULT_THINKING_DISPLAY;
+    }
+}
+export function setBrowserThinkingDisplay(mode) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        if (mode === DEFAULT_THINKING_DISPLAY) {
+            window.localStorage.removeItem(THINKING_DISPLAY_STORAGE_KEY);
+        }
+        else {
+            window.localStorage.setItem(THINKING_DISPLAY_STORAGE_KEY, mode);
+        }
+        // A failed write leaves the in-memory listeners correct for this tab,
+        // which is the whole visible effect of the change.
+        // coercion-ok: an unwritable localStorage is not a preference failure.
+    }
+    catch {
+        // Intentionally empty: the change event below still updates this tab.
+    }
+    window.dispatchEvent(new Event(THINKING_DISPLAY_CHANGE_EVENT));
+}
+export function subscribeToBrowserThinkingDisplay(callback) {
+    if (typeof window === "undefined")
+        return () => undefined;
+    const onStorage = (event) => {
+        if (event.key === THINKING_DISPLAY_STORAGE_KEY || event.key === null) {
+            callback();
+        }
+    };
+    const onChange = () => callback();
+    window.addEventListener("storage", onStorage);
+    window.addEventListener(THINKING_DISPLAY_CHANGE_EVENT, onChange);
+    return () => {
+        window.removeEventListener("storage", onStorage);
+        window.removeEventListener(THINKING_DISPLAY_CHANGE_EVENT, onChange);
+    };
+}
+/**
+ * A host-supplied mode. When set it wins over the stored preference and the
+ * in-chat control disappears, so a host that pins the mode does not leave a
+ * menu item that silently does nothing.
+ */
+const ThinkingDisplayContext = createContext(undefined);
+export function ThinkingDisplayProvider({ value, children, }) {
+    // Inherit rather than clear: a chat surface nested inside a host that pinned
+    // the mode renders this provider too, and passing its own absent prop
+    // straight through would silently un-pin the host's choice.
+    const inherited = useContext(ThinkingDisplayContext);
+    return (_jsx(ThinkingDisplayContext.Provider, { value: value ?? inherited, children: children }));
+}
+export function useThinkingDisplay() {
+    const pinned = useContext(ThinkingDisplayContext);
+    const stored = useSyncExternalStore(subscribeToBrowserThinkingDisplay, getBrowserThinkingDisplay, () => DEFAULT_THINKING_DISPLAY);
+    return pinned ?? stored;
+}
+/** Reads and writes the preference for the in-chat control. */
+export function useThinkingDisplayControl() {
+    const pinned = useContext(ThinkingDisplayContext);
+    const mode = useThinkingDisplay();
+    const setMode = useCallback((next) => {
+        setBrowserThinkingDisplay(next);
+    }, []);
+    return { mode, setMode, pinned: pinned !== undefined };
+}