@agent-native/core 0.152.0 → 0.153.0

package/dist/client/AgentPanel.js

@@ -53,6 +53,7 @@ import { RealtimeVoiceModeProvider } from "./composer/index.js";
 import { getFramePostMessageTargetOrigin, isTrustedFrameMessage, } from "./frame.js";
 import { useT } from "./i18n.js";
 import { isFirstRunOnboardingEnabled } from "./onboarding/first-run-enabled.js";
+import { useFirstRunOnboardingGateOwnsSurface } from "./onboarding/first-run-startup-gate.js";
 import { useOnboardingPreviewMode } from "./onboarding/use-preview-mode.js";
 import { recoverFromStaleChunkError } from "./route-chunk-recovery.js";
 import { withBuilderConnectTrackingParams } from "./settings/useBuilderStatus.js";
@@ -145,6 +146,17 @@ const AGENT_PANEL_CONTROL_STYLE = {
     lineHeight: 1,
 };
 const ACTIVATE_KEYS = new Set(["Enter", " "]);
+export function deferAgentPanelOverlayOpen(event, closeMenu, openOverlay) {
+    event.preventDefault();
+    closeMenu();
+    if (typeof window !== "undefined" &&
+        typeof window.requestAnimationFrame === "function") {
+        window.requestAnimationFrame(() => openOverlay());
+    }
+    else {
+        setTimeout(openOverlay, 0);
+    }
+}
 function useAvailableClis() {
     const [clis, setClis] = useState([]);
     useEffect(() => {
@@ -246,6 +258,15 @@ export function shouldShowAgentPanelFullViewAction(agentPageHref, mode, isSideba
         currentPath !== agentPageHref &&
         (isSidebar || mode === "resources" || mode === "settings"));
 }
+export function resolveAgentPanelFullViewAction(agentPageHref, onFullViewRequest, mode, isSidebar = false, currentPath) {
+    if (!agentPageHref ||
+        !shouldShowAgentPanelFullViewAction(agentPageHref, mode, isSidebar, currentPath)) {
+        return null;
+    }
+    return onFullViewRequest
+        ? { kind: "callback" }
+        : { kind: "link", href: agentPageHref };
+}
 export function getAgentPanelShortcutHints(isMac) {
     return {
         closeTab: isMac ? "⌃W" : "⌥W",
@@ -398,13 +419,15 @@ function CodeAccessUnavailablePanel({ title, description, ctaLabel, ctaHref, sec
                             });
                         }, className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: secondaryCtaLabel })] })] }));
 }
-function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, onSnapTo75Percent, isWideDrawer, onExitWideDrawer, devAppUrl, storageKey, restoreActiveThread = true, scope, showScopeBadge, browserTabId, threadUrlSync, chatNotice, showTabBar = true, showPageNewChatButton = false, allowSettingsMode = true, chatOnly = false, agentPageHref, codeAccess, ...assistantChatProps }) {
+function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, onFullViewRequest, onSnapTo75Percent, isWideDrawer, onExitWideDrawer, devAppUrl, storageKey, restoreActiveThread = true, scope, showScopeBadge, browserTabId, threadUrlSync, chatNotice, showTabBar = true, showPageNewChatButton = false, allowSettingsMode = true, chatOnly = false, agentPageHref, codeAccess, ...assistantChatProps }) {
     const t = useT();
     const navigate = useNavigate();
     const location = useLocation();
     const mounted = useClientOnly();
     const onboardingPreviewMode = useOnboardingPreviewMode();
-    const showFirstRunOnboarding = SHOW_FIRST_RUN_ONBOARDING || onboardingPreviewMode;
+    const firstRunOnboardingGateOwnsSurface = useFirstRunOnboardingGateOwnsSurface();
+    const showFirstRunOnboarding = !firstRunOnboardingGateOwnsSurface &&
+        (SHOW_FIRST_RUN_ONBOARDING || onboardingPreviewMode);
     const insideAgentSidebar = React.useContext(AgentSidebarOnboardingContext);
     const isFirstRunOnboardingSurface = showFirstRunOnboarding && !insideAgentSidebar;
     const feedbackEnabled = resolveFeedbackUrl(undefined, mounted ? undefined : null) !== null;
@@ -657,8 +680,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
     }, [threadUrlSync]);
     const wideDrawerAction = isWideDrawer ? onExitWideDrawer : onSnapTo75Percent;
     const wideDrawerLabel = t(isWideDrawer ? "agentPanel.returnChatToLayout" : "agentPanel.widenChat");
-    const showFullViewAction = Boolean(agentPageHref &&
-        shouldShowAgentPanelFullViewAction(agentPageHref, mode, chatOnly, location.pathname));
+    const fullViewAction = resolveAgentPanelFullViewAction(agentPageHref, onFullViewRequest, mode, chatOnly, location.pathname);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (!(event.metaKey || event.ctrlKey) ||
@@ -687,10 +709,10 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                         (activeTabMessageCount <= 0 && activeTab.status === "idle")) {
                         return null;
                     }
-                    return (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "icon", triggerClassName: "h-7 w-7" }));
+                    return (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, allowedRoles: ["viewer", "editor", "admin"], resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "icon", triggerClassName: "h-7 w-7" }));
                 })(), feedbackEnabled ? (_jsx(FeedbackButton, { variant: "icon", side: "bottom", align: "end", chatSessionId: activeChatSessionId, chatStorageKey: storageKey, open: feedbackOpen, onOpenChange: setFeedbackOpen, trigger: _jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute end-0 top-full h-px w-px opacity-0" }) })) : null, mode === "chat" && (_jsx(IconTooltip, { content: t("agentPanel.newChat"), children: _jsx("button", { onClick: addTab, "aria-label": t("agentPanel.newChat"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), !onCollapse && mode === "cli" && canUseCodeTools && (_jsx(IconTooltip, { content: t("agentPanel.newTerminal"), children: _jsx("button", { onClick: addCliTab, "aria-label": t("agentPanel.newTerminal"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), _jsxs(DropdownMenu, { open: headerMenuOpen, onOpenChange: setHeaderMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", (headerMenuOpen || mode === "settings") &&
-                                "bg-accent text-foreground"), "aria-label": t("agentPanel.panelOptions"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-48", children: [onCollapse && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: onCollapse, children: [_jsx(IconLayoutSidebarRightCollapse, { size: 14, className: "shrink-0" }), t("agentPanel.collapseSidebar"), _jsx(DropdownMenuShortcut, { children: toggleSidebarHint })] }), _jsx(DropdownMenuSeparator, {})] })), onCollapse && mode === "chat" && wideDrawerAction ? (_jsxs(DropdownMenuItem, { onSelect: wideDrawerAction, children: [_jsx(IconArrowsHorizontal, { size: 14, className: "shrink-0" }), wideDrawerLabel, _jsx(DropdownMenuShortcut, { children: widenChatHint })] })) : null, showFullViewAction && agentPageHref ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(Link, { to: agentPageHref, "aria-label": t("agentPanel.openFullView"), children: [_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" }), t("agentPanel.openFullView")] }) })) : null, (onCollapse && mode === "chat" && wideDrawerAction) ||
-                                showFullViewAction ? (_jsx(DropdownMenuSeparator, {})) : null, onCollapse && mode === "chat" && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: addTab, children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), t("agentPanel.newChat")] }), (() => {
+                                "bg-accent text-foreground"), "aria-label": t("agentPanel.panelOptions"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-48", children: [onCollapse && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: onCollapse, children: [_jsx(IconLayoutSidebarRightCollapse, { size: 14, className: "shrink-0" }), t("agentPanel.collapseSidebar"), _jsx(DropdownMenuShortcut, { children: toggleSidebarHint })] }), _jsx(DropdownMenuSeparator, {})] })), onCollapse && mode === "chat" && wideDrawerAction ? (_jsxs(DropdownMenuItem, { onSelect: wideDrawerAction, children: [_jsx(IconArrowsHorizontal, { size: 14, className: "shrink-0" }), wideDrawerLabel, _jsx(DropdownMenuShortcut, { children: widenChatHint })] })) : null, fullViewAction?.kind === "callback" && onFullViewRequest ? (_jsxs(DropdownMenuItem, { onSelect: onFullViewRequest, "aria-label": t("agentPanel.openFullView"), children: [_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" }), t("agentPanel.openFullView")] })) : fullViewAction?.kind === "link" ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(Link, { to: fullViewAction.href, "aria-label": t("agentPanel.openFullView"), children: [_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" }), t("agentPanel.openFullView")] }) })) : null, (onCollapse && mode === "chat" && wideDrawerAction) ||
+                                fullViewAction ? (_jsx(DropdownMenuSeparator, {})) : null, onCollapse && mode === "chat" && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: addTab, children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), t("agentPanel.newChat")] }), (() => {
                                         const activeTab = activeChatSessionId
                                             ? tabs.find((tab) => tab.id === activeChatSessionId)
                                             : undefined;
@@ -698,21 +720,12 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                                             (activeTabMessageCount <= 0 && activeTab.status === "idle")) {
                                             return null;
                                         }
-                                        return (_jsx("div", { className: "p-1", children: _jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "label-icon", triggerClassName: "w-full justify-start" }) }));
-                                    })()] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: () => {
-                                    // Let the menu finish restoring focus before mounting the
-                                    // history popover; otherwise Radix dismisses the new overlay.
-                                    setTimeout(() => toggleHistory(), 0);
-                                }, children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
+                                        return (_jsx("div", { className: "p-1", children: _jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, allowedRoles: ["viewer", "editor", "admin"], resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "label-icon", triggerClassName: "w-full justify-start" }) }));
+                                    })()] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, () => setHeaderMenuOpen(false), toggleHistory), children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
                                         ? 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: () => {
-                                    // Defer past the closing DropdownMenu's focus-restore/dismiss-layer
-                                    // teardown, otherwise it can immediately dismiss the Popover we're
-                                    // opening in the same tick (Radix nested-overlay race).
-                                    setTimeout(() => setFeedbackOpen(true), 0);
-                                }, 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, {})] })), 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, () => setHeaderMenuOpen(false), () => 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,
@@ -731,7 +744,9 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         isWideDrawer,
         mode,
         agentPageHref,
+        fullViewAction,
         onCollapse,
+        onFullViewRequest,
         onExitWideDrawer,
         onSnapTo75Percent,
         openRunThread,
@@ -743,7 +758,6 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         wideDrawerAction,
         wideDrawerLabel,
         widenChatHint,
-        showFullViewAction,
     ]);
     const renderPageChatOverlay = useCallback(({ activeTabId, activeTabMessageCount, addTab, tabs, }) => {
         if (!shouldShowAgentPanelPageNewChatButton(tabs, activeTabId, activeTabMessageCount)) {
@@ -753,7 +767,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
             ? tabs.find((tab) => tab.id === activeTabId)
             : undefined;
         const canShareActiveTab = activeTab && (activeTabMessageCount > 0 || activeTab.status !== "idle");
-        return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", "data-agent-page-chat-fade": "", className: "pointer-events-none absolute inset-x-0 top-0 z-50 h-16 bg-gradient-to-b from-background via-background/90 to-transparent opacity-0 transition-opacity duration-150" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-[60] flex justify-end px-3 sm:top-4 sm:px-4", children: _jsxs("div", { className: "pointer-events-auto flex items-center gap-1", children: [canShareActiveTab ? (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "icon", triggerClassName: "h-8 w-8 border border-border bg-background/95 shadow-sm backdrop-blur hover:bg-accent" })) : null, _jsxs("button", { type: "button", "data-agent-page-new-chat": "", "aria-label": t("agentPanel.newChat"), onClick: () => {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", "data-agent-page-chat-fade": "", className: "pointer-events-none absolute inset-x-0 top-0 z-50 h-16 bg-gradient-to-b from-background via-background/90 to-transparent opacity-0 transition-opacity duration-150" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-[60] flex justify-end px-3 sm:top-4 sm:px-4", children: _jsxs("div", { className: "pointer-events-auto flex items-center gap-1", children: [canShareActiveTab ? (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, allowedRoles: ["viewer", "editor", "admin"], resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "icon", triggerClassName: "h-8 w-8 border border-border bg-background/95 shadow-sm backdrop-blur hover:bg-accent" })) : null, _jsxs("button", { type: "button", "data-agent-page-new-chat": "", "aria-label": t("agentPanel.newChat"), onClick: () => {
                                     addTab();
                                 }, className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background/95 px-2.5 text-xs font-medium text-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(IconPlus, { size: 14 }), _jsx("span", { children: t("agentPanel.newChat") })] })] }) })] }));
     }, [getChatThreadShareUrl, t]);
@@ -1373,9 +1387,11 @@ 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, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openOnChatRunning = false, scope, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, }) {
+export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openOnChatRunning = false, onFullscreenRequest, scope, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, }) {
     const onboardingPreviewMode = useOnboardingPreviewMode();
-    const showFirstRunOnboarding = !suppressFirstRunOnboarding &&
+    const firstRunOnboardingGateOwnsSurface = useFirstRunOnboardingGateOwnsSurface();
+    const showFirstRunOnboarding = !firstRunOnboardingGateOwnsSurface &&
+        !suppressFirstRunOnboarding &&
         (SHOW_FIRST_RUN_ONBOARDING || onboardingPreviewMode);
     const initialWidth = defaultSidebarWidth ?? sidebarWidth ?? 380;
     const [open, setOpen] = useState(() => openOnChatRunning || getInitialAgentSidebarOpen(defaultOpen, storageKey));
@@ -1888,7 +1904,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
                             ? "desktop"
                             : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": position, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "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, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, 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, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, onFullViewRequest: onFullscreenRequest, storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, 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": position, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [isMobile &&
                             !presentationMode &&

package/dist/client/AssistantChat.js

@@ -5,7 +5,7 @@ import { PastedTextChip } from "@agent-native/toolkit/composer/PastedTextChip";
 import { appendRealtimeVoiceTranscriptToRepository, realtimeVoiceTranscriptRegistry, } from "@agent-native/toolkit/composer/realtime-voice-transcript";
 import { AssistantRuntimeProvider, useLocalRuntime, useThreadRuntime, useThread, useAui, useComposer, useComposerRuntime, useMessageRuntime, ThreadPrimitive, } from "@assistant-ui/react";
 import { CompositeAttachmentAdapter } from "@assistant-ui/react";
-import { IconArrowUp, IconClock, IconMessage, IconX, IconPlayerStopFilled, IconTerminal, IconAlertTriangle, IconChevronDown, IconRefresh, } from "@tabler/icons-react";
+import { IconArrowUp, IconClock, IconMessage, IconX, IconPlayerStopFilled, IconTerminal, IconAlertTriangle, IconRefresh, } from "@tabler/icons-react";
 import { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, forwardRef, useImperativeHandle, } from "react";
 import { createPollEngine } from "../shared/poll-engine.js";
 import { clearPendingTurnIfMatches, clearActiveRunIfMatches, getPendingTurn, getActiveRunActivityTool, getActiveRun, hasRecentActiveRunProgress, resolveReconnectAfterSeq, setActiveRun, updateActiveRunActivity, updateActiveRunSeq, } from "./active-run-state.js";
@@ -26,11 +26,10 @@ import { createAgentChatRuntimeAdapter, } from "./chat/runtime.js";
 import { ChatRunningContext, ChatRunningRunIdContext, ChatRunningTurnIdContext, ChatRunDurationContext, SuppressInlineOpenAppContext, ApprovalContext, ReconnectStreamMessage, } from "./chat/tool-call-display.js";
 import { useAgentChatLifecycleTracking } from "./chat/use-agent-chat-lifecycle-tracking.js";
 import { useReconnectReaderOwner } from "./chat/use-reconnect-reader-owner.js";
-import { MessageScroller, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, } from "./components/ui/message-scroller.js";
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, } from "./components/ui/message-scroller.js";
 import { Popover, PopoverContent, PopoverTrigger, } from "./components/ui/popover.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./components/ui/tooltip.js";
 import { AgentComposerFrame, TiptapComposer, } from "./composer/index.js";
-import { useNearBottomAutoscroll } from "./conversation/index.js";
 import { useAgentDynamicSuggestionsResult, } from "./dynamic-suggestions.js";
 import { GuidedQuestionFlow, useGuidedQuestionFlow, } from "./guided-questions.js";
 import { buildSignInReturnHref } from "./require-session.js";
@@ -406,60 +405,6 @@ function getMessageText(message) {
     }
     return typeof content === "string" ? displayableUserMessageText(content) : "";
 }
-function contentPartFollowKey(part) {
-    if (!part || typeof part !== "object")
-        return "unknown";
-    const candidate = part;
-    const type = typeof candidate.type === "string" ? candidate.type : "unknown";
-    if (type === "text" || type === "reasoning") {
-        return `${type}:${String(candidate.text ?? "").length}`;
-    }
-    if (type === "tool-call") {
-        return [
-            type,
-            candidate.toolCallId ?? "",
-            candidate.toolName ?? "",
-            candidate.status?.type ?? "",
-            String(candidate.argsText ?? "").length,
-            String(candidate.result ?? "").length,
-        ].join(":");
-    }
-    if (type === "image")
-        return `image:${String(candidate.image ?? "").length}`;
-    return `${type}:${String(candidate.text ?? candidate.result ?? "").length}`;
-}
-function contentFollowKey(content) {
-    if (typeof content === "string")
-        return `text:${content.length}`;
-    if (!Array.isArray(content))
-        return "";
-    return content.map(contentPartFollowKey).join("|");
-}
-function messageFollowKey(message) {
-    const candidate = (message?.message ??
-        message);
-    return [
-        candidate.id ?? "",
-        candidate.role ?? "",
-        candidate.status?.type ?? "",
-        candidate.status?.reason ?? "",
-        contentFollowKey(candidate.content),
-    ].join(",");
-}
-function queuedMessageFollowKey(message) {
-    return [
-        message.id,
-        message.text.length,
-        message.images?.length ?? 0,
-        message.attachments?.length ?? 0,
-        message.references?.length ?? 0,
-        message.requestMode ?? "",
-        message.recoveryAction ?? "",
-    ].join(":");
-}
-function reconnectContentFollowKey(content) {
-    return content.map(contentPartFollowKey).join("|");
-}
 export function reconnectActivityFallbackContent(toolName) {
     const tool = toolName?.trim();
     if (!tool || tool === "call-agent")
@@ -1130,6 +1075,18 @@ function AssistantChatAssistantMessageItem() {
     const message = messageRuntime.getState();
     return (_jsx(MessageScrollerItem, { messageId: message.id, children: _jsx(AssistantMessage, {}) }));
 }
+function AssistantChatScrollerControls({ resumeFollowingRef, }) {
+    const { scrollToEnd } = useMessageScroller();
+    useBrowserLayoutEffect(() => {
+        resumeFollowingRef.current = () => {
+            scrollToEnd({ behavior: "auto" });
+        };
+        return () => {
+            resumeFollowingRef.current = () => { };
+        };
+    }, [resumeFollowingRef, scrollToEnd]);
+    return null;
+}
 export const CHAT_STORAGE_PREFIX = "agent-chat:";
 const THREAD_SNAPSHOT_CACHE_PREFIX = `${CHAT_STORAGE_PREFIX}thread-snapshot:`;
 function threadSnapshotCacheKey(apiUrl, threadId) {
@@ -1395,7 +1352,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         scope: contextScope,
         enabled: messages.length === 0,
     });
-    const messageListResetKey = assistantUiMessageListStructureKey(messages);
+    const messageListResetKey = useMemo(() => assistantUiMessageListStructureKey(messages), [messages]);
     // Chat-wide drag-and-drop: users expect to drop a file anywhere on the agent
     // sidebar (thread, header, composer) and have it attach — same as ChatGPT,
     // Claude.ai, Linear, Slack, etc. Tiptap's own `handleDrop` only fires inside
@@ -3882,7 +3839,12 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // live assistant message content in place while streaming, and the reconnect
     // overlay must hide as soon as that live message has caught up.
     const visibleReconnectContent = dedupeReconnectContentAgainstMessages(reconnectContent, messages, {
-        suppressToolRepeats: adapterHandoffPending,
+        // While the reconnect stack is mounted, the live assistant message is
+        // already the canonical visual owner for any tool it contains. Keeping
+        // an ahead-of-the-thread reconnect copy visible creates the familiar
+        // two-card stack while the adapter catches up, so prefer one row and
+        // let the live message advance in place.
+        suppressToolRepeats: adapterHandoffPending || isReconnecting || reconnectFrozen,
         trimTailTextOverlap: adapterHandoffPending || reconnectTailOnlyRef.current,
     });
     const latestMessage = messages[messages.length - 1];
@@ -3898,56 +3860,6 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         latestMessage,
         reconnectContent: reconnectStatusContent,
     });
-    const autoscrollFollowKey = [
-        messages.map(messageFollowKey).join(";"),
-        `q:${queuedMessages.map(queuedMessageFollowKey).join("|")}`,
-        `r:${reconnectContentFollowKey(visibleReconnectContent)}`,
-        `status:${assistantChatAutoscrollStatusKey({
-            showGlobalRunningStatus,
-            runningStatusLabel,
-        })}`,
-    ].join(";;");
-    const { scrollRef, isNearBottomRef, showScrollToBottom, scrollToBottom, scrollToBottomAfterPaint, resumeFollowing, } = useNearBottomAutoscroll({
-        followKey: autoscrollFollowKey,
-        streaming: textStreaming,
-    });
-    resumeFollowingRef.current = resumeFollowing;
-    const scrollToBottomWhileLayoutSettles = useCallback(() => {
-        scrollToBottomAfterPaint();
-        const element = scrollRef.current;
-        if (!element || typeof ResizeObserver === "undefined")
-            return undefined;
-        let stopped = false;
-        const observer = new ResizeObserver(() => {
-            if (!stopped && isNearBottomRef.current)
-                scrollToBottom();
-        });
-        observer.observe(element);
-        const timeout = window.setTimeout(() => {
-            stopped = true;
-            observer.disconnect();
-            if (isNearBottomRef.current)
-                scrollToBottom();
-        }, 1600);
-        return () => {
-            stopped = true;
-            window.clearTimeout(timeout);
-            observer.disconnect();
-        };
-    }, [isNearBottomRef, scrollRef, scrollToBottom, scrollToBottomAfterPaint]);
-    const wasRestoringRef = useRef(isRestoring);
-    useEffect(() => {
-        const wasRestoring = wasRestoringRef.current;
-        wasRestoringRef.current = isRestoring;
-        if (wasRestoring && !isRestoring) {
-            return scrollToBottomWhileLayoutSettles();
-        }
-    }, [isRestoring, scrollToBottomWhileLayoutSettles]);
-    useEffect(() => {
-        if (!textStreaming && isNearBottomRef.current) {
-            scrollToBottomAfterPaint();
-        }
-    }, [isNearBottomRef, scrollToBottomAfterPaint, textStreaming]);
     const chatScrollResetKey = `${tabId ?? ""}:${threadId ?? ""}`;
     const { isDevMode: cpDevMode } = useDevMode(apiUrl);
     const [checkpointRunIds, setCheckpointRunIds] = useState(() => new Set());
@@ -4083,17 +3995,18 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // GuidedQuestionPayload to application_state under "guided-questions". The
     // hook polls that key, and on submit/skip composes the answer as a normal
     // user turn (via the shared sendToAgentChat) and clears the persisted key so
-    // the question does not reappear.
+    // the question does not reappear. The key is per browser tab, so `threadId`
+    // is what keeps a pending question in the chat that asked it.
     const { questions: guidedQuestions, title: guidedQuestionsTitle, description: guidedQuestionsDescription, skipLabel: guidedQuestionsSkipLabel, submitLabel: guidedQuestionsSubmitLabel, handleSubmit: handleGuidedQuestionsSubmit, handleSkip: handleGuidedQuestionsSkip, } = useGuidedQuestionFlow({
         stateKey: "guided-questions",
         queryKey: ["guided-questions"],
         ...(browserTabId ? { browserTabId } : {}),
+        ...(threadId ? { threadId } : {}),
     });
     const hasComposerAccessoryAboveStack = Boolean(composerError ||
         showComposerSlot ||
         showCenteredEmptyThreadFooterSlot ||
         (guidedQuestions && guidedQuestions.length > 0) ||
-        showScrollToBottom ||
         composerContextItems.length > 0 ||
         showPlanModeCallout ||
         showInlineMissingKeySetup);
@@ -4155,80 +4068,77 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                     ? "centered"
                                                     : compactMissingKeyEmptyState
                                                         ? "compact-setup"
-                                                        : undefined, className: cn("relative flex flex-1 flex-col h-full min-h-0 text-foreground", className), onDragEnter: handleChatDragEnter, onDragOver: handleChatDragOver, onDragLeave: handleChatDragLeave, onDropCapture: handleChatDropCapture, onDrop: handleChatDrop, children: [dropActive && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-md border-2 border-dashed border-primary/70 bg-primary/5 backdrop-blur-[1px]", children: _jsx("span", { className: "rounded-md bg-background/90 px-3 py-1.5 text-xs font-medium text-foreground shadow-sm", children: "Drop to attach" }) })), showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: onSwitchToCli, "aria-label": "Switch to CLI", className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] }) }), _jsx(TooltipContent, { children: "Switch to CLI" })] }) })) })] })), _jsx(MessageScrollerProvider, { autoScroll: false, children: _jsxs(MessageScroller, { className: "agent-chat-scroll", children: [_jsx(MessageScrollerViewport, { ref: scrollRef, children: authError ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: authSessionAvailable ? (_jsx(IconRefresh, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "text-center max-w-[280px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: authSessionAvailable
-                                                                                            ? "Chat session needs refresh"
-                                                                                            : authError.sessionExpired
-                                                                                                ? "Session expired"
-                                                                                                : "Authentication required" }), _jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: authSessionAvailable
-                                                                                            ? "You're signed in, but this chat connection needs to reconnect."
-                                                                                            : authError.sessionExpired
-                                                                                                ? "Your session may have expired. Log out and log back in to reconnect."
-                                                                                                : "You need to log in to use the agent." })] }), _jsxs("div", { className: "flex gap-2", children: [!authError.sessionExpired &&
-                                                                                        !authSessionAvailable && (_jsx("button", { onClick: () => {
-                                                                                            window.location.href =
-                                                                                                buildSignInReturnHref();
-                                                                                        }, className: "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md", children: "Log in" })), authError.sessionExpired &&
-                                                                                        !authSessionAvailable && (_jsx("button", { onClick: async () => {
-                                                                                            try {
-                                                                                                await fetch(agentNativePath("/_agent-native/auth/logout"), {
-                                                                                                    method: "POST",
-                                                                                                });
+                                                        : undefined, className: cn("relative flex flex-1 flex-col h-full min-h-0 text-foreground", className), onDragEnter: handleChatDragEnter, onDragOver: handleChatDragOver, onDragLeave: handleChatDragLeave, onDropCapture: handleChatDropCapture, onDrop: handleChatDrop, children: [dropActive && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-md border-2 border-dashed border-primary/70 bg-primary/5 backdrop-blur-[1px]", children: _jsx("span", { className: "rounded-md bg-background/90 px-3 py-1.5 text-xs font-medium text-foreground shadow-sm", children: "Drop to attach" }) })), showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: onSwitchToCli, "aria-label": "Switch to CLI", className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] }) }), _jsx(TooltipContent, { children: "Switch to CLI" })] }) })) })] })), _jsxs(MessageScrollerProvider, { autoScroll: true, children: [_jsx(AssistantChatScrollerControls, { resumeFollowingRef: resumeFollowingRef }), _jsxs(MessageScroller, { className: "agent-chat-scroll", children: [_jsx(MessageScrollerViewport, { children: authError ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: authSessionAvailable ? (_jsx(IconRefresh, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "text-center max-w-[280px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: authSessionAvailable
+                                                                                                ? "Chat session needs refresh"
+                                                                                                : authError.sessionExpired
+                                                                                                    ? "Session expired"
+                                                                                                    : "Authentication required" }), _jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: authSessionAvailable
+                                                                                                ? "You're signed in, but this chat connection needs to reconnect."
+                                                                                                : authError.sessionExpired
+                                                                                                    ? "Your session may have expired. Log out and log back in to reconnect."
+                                                                                                    : "You need to log in to use the agent." })] }), _jsxs("div", { className: "flex gap-2", children: [!authError.sessionExpired &&
+                                                                                            !authSessionAvailable && (_jsx("button", { onClick: () => {
+                                                                                                window.location.href =
+                                                                                                    buildSignInReturnHref();
+                                                                                            }, className: "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md", children: "Log in" })), authError.sessionExpired &&
+                                                                                            !authSessionAvailable && (_jsx("button", { onClick: async () => {
+                                                                                                try {
+                                                                                                    await fetch(agentNativePath("/_agent-native/auth/logout"), {
+                                                                                                        method: "POST",
+                                                                                                    });
+                                                                                                }
+                                                                                                catch (error) {
+                                                                                                    console.error("Failed to log out before reloading the chat", error);
+                                                                                                }
+                                                                                                window.location.reload();
+                                                                                            }, className: "text-xs text-destructive hover:text-destructive/80 px-3 py-1.5 rounded-md border border-destructive/30 hover:bg-destructive/10", children: "Log out" })), _jsx("button", { onClick: () => {
+                                                                                                setAuthError(null);
+                                                                                                window.location.reload();
+                                                                                            }, className: authSessionAvailable
+                                                                                                ? "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md"
+                                                                                                : "text-xs text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-accent", children: "Refresh chat" })] })] })) : isRestoring && centeredRestoringState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
+                                                                                ? "sr-only"
+                                                                                : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), "aria-busy": "true", children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "Loading chat..." })] })) : isRestoring ? (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "h-8 w-32 rounded-lg bg-muted animate-pulse" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "h-4 w-48 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-64 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-40 rounded bg-muted animate-pulse" })] })] })) : showEmptyState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
+                                                                                ? "sr-only"
+                                                                                : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "How can I help you?" }), emptyStateAddon, resolvedSuggestions &&
+                                                                                    resolvedSuggestions.length > 0 ? (_jsx("div", { className: "flex w-full max-w-[280px] flex-col gap-1", children: resolvedSuggestions.map((suggestion) => (_jsx("button", { onClick: () => {
+                                                                                            if (engineSetupRequired) {
+                                                                                                requestMissingKeySetup();
+                                                                                                return;
                                                                                             }
-                                                                                            catch (error) {
-                                                                                                console.error("Failed to log out before reloading the chat", error);
+                                                                                            void addToQueue(suggestion);
+                                                                                        }, className: "w-full px-2 py-1 text-center text-[13px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: suggestion }, suggestion))) })) : null, showInlineEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--empty", children: resolvedThreadFooterSlot })) : null] })) : (_jsxs(MessageScrollerContent, { className: "agent-thread-content gap-4 px-4 py-4", children: [_jsx(AssistantMessageListErrorBoundary, { resetKey: messageListResetKey, children: _jsx(UserStoppedRunContext.Provider, { value: wasRecentlyStoppedRun, children: _jsx(ThreadPrimitive.Messages
+                                                                                        // assistant-ui indexes message parts through tap resources.
+                                                                                        // Keep this key tied to that shape so clear/add transitions remount stale
+                                                                                        // lookups without remounting on every streamed text update.
+                                                                                        , { components: {
+                                                                                                UserMessage: AssistantChatUserMessageItem,
+                                                                                                AssistantMessage: AssistantChatAssistantMessageItem,
+                                                                                            } }, messageListResetKey) }) }), visibleLoopLimit && !showRunningInUI && (_jsx(MessageScrollerItem, { children: _jsx(LoopLimitContinueCard, { info: visibleLoopLimit, onContinue: () => {
+                                                                                            setShowContinue(false);
+                                                                                            setLoopLimitInfo(null);
+                                                                                            addToQueue("Continue from where you left off.", undefined, undefined, undefined, undefined, "queued", "continue");
+                                                                                        } }) })), shouldShowRunError && visibleRunError && (_jsx(MessageScrollerItem, { children: _jsx(RunErrorRecoveryCard, { info: visibleRunError, onContinue: () => {
+                                                                                            setRunErrorInfo(null);
+                                                                                            addToQueue(RECONNECT_NO_PROGRESS_CONTINUE_MESSAGE, undefined, undefined, undefined, undefined, "queued", "continue");
+                                                                                        }, onRetry: retryAfterRunError, onFork: onForkChat, onProviderConnected: handleBuilderConnected, onDismiss: () => {
+                                                                                            if (visibleRunErrorKey) {
+                                                                                                setDismissedRunErrorKey(visibleRunErrorKey);
                                                                                             }
-                                                                                            window.location.reload();
-                                                                                        }, className: "text-xs text-destructive hover:text-destructive/80 px-3 py-1.5 rounded-md border border-destructive/30 hover:bg-destructive/10", children: "Log out" })), _jsx("button", { onClick: () => {
-                                                                                            setAuthError(null);
-                                                                                            window.location.reload();
-                                                                                        }, className: authSessionAvailable
-                                                                                            ? "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md"
-                                                                                            : "text-xs text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-accent", children: "Refresh chat" })] })] })) : isRestoring && centeredRestoringState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
-                                                                            ? "sr-only"
-                                                                            : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), "aria-busy": "true", children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "Loading chat..." })] })) : isRestoring ? (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "h-8 w-32 rounded-lg bg-muted animate-pulse" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "h-4 w-48 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-64 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-40 rounded bg-muted animate-pulse" })] })] })) : showEmptyState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
-                                                                            ? "sr-only"
-                                                                            : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "How can I help you?" }), emptyStateAddon, resolvedSuggestions &&
-                                                                                resolvedSuggestions.length > 0 ? (_jsx("div", { className: "flex w-full max-w-[280px] flex-col gap-1", children: resolvedSuggestions.map((suggestion) => (_jsx("button", { onClick: () => {
-                                                                                        if (engineSetupRequired) {
-                                                                                            requestMissingKeySetup();
-                                                                                            return;
-                                                                                        }
-                                                                                        void addToQueue(suggestion);
-                                                                                    }, className: "w-full px-2 py-1 text-center text-[13px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: suggestion }, suggestion))) })) : null, showInlineEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--empty", children: resolvedThreadFooterSlot })) : null] })) : (_jsxs(MessageScrollerContent, { className: "agent-thread-content gap-4 px-4 py-4", children: [_jsx(AssistantMessageListErrorBoundary, { resetKey: messageListResetKey, children: _jsx(UserStoppedRunContext.Provider, { value: wasRecentlyStoppedRun, children: _jsx(ThreadPrimitive.Messages
-                                                                                    // assistant-ui indexes message parts through tap resources.
-                                                                                    // Keep this key tied to that shape so clear/add transitions remount stale
-                                                                                    // lookups without remounting on every streamed text update.
-                                                                                    , { components: {
-                                                                                            UserMessage: AssistantChatUserMessageItem,
-                                                                                            AssistantMessage: AssistantChatAssistantMessageItem,
-                                                                                        } }, messageListResetKey) }) }), visibleLoopLimit && !showRunningInUI && (_jsx(MessageScrollerItem, { children: _jsx(LoopLimitContinueCard, { info: visibleLoopLimit, onContinue: () => {
-                                                                                        setShowContinue(false);
-                                                                                        setLoopLimitInfo(null);
-                                                                                        addToQueue("Continue from where you left off.", undefined, undefined, undefined, undefined, "queued", "continue");
-                                                                                    } }) })), shouldShowRunError && visibleRunError && (_jsx(MessageScrollerItem, { children: _jsx(RunErrorRecoveryCard, { info: visibleRunError, onContinue: () => {
-                                                                                        setRunErrorInfo(null);
-                                                                                        addToQueue(RECONNECT_NO_PROGRESS_CONTINUE_MESSAGE, undefined, undefined, undefined, undefined, "queued", "continue");
-                                                                                    }, onRetry: retryAfterRunError, onFork: onForkChat, onProviderConnected: handleBuilderConnected, onDismiss: () => {
-                                                                                        if (visibleRunErrorKey) {
-                                                                                            setDismissedRunErrorKey(visibleRunErrorKey);
-                                                                                        }
-                                                                                        setRunErrorInfo(null);
-                                                                                    } }) })), (isReconnecting ||
-                                                                                reconnectFrozen ||
-                                                                                adapterHandoffPending) &&
-                                                                                visibleReconnectContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: visibleReconnectContent, allowActivitySpinner: !reconnectFrozen }) })), (isReconnecting ||
-                                                                                reconnectFrozen ||
-                                                                                adapterHandoffPending) &&
-                                                                                visibleReconnectContent.length === 0 &&
-                                                                                reconnectContent.length === 0 &&
-                                                                                reconnectActivityContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: reconnectActivityContent, allowActivitySpinner: !reconnectFrozen }) })), showGlobalRunningStatus && (_jsx(MessageScrollerItem, { children: _jsx(RunningActivityStatus, { label: runningStatusLabel }) })), visibleQueuedMessages.length > 0 && (_jsx(MessageScrollerItem, { children: _jsxs("div", { className: "flex items-center justify-end gap-1.5 pr-0.5 text-xs text-muted-foreground", children: [_jsx(IconClock, { className: "h-3 w-3" }), _jsxs("span", { children: [visibleQueuedMessages.length, " ", "queued"] })] }) })), visibleQueuedMessages.map((msg) => {
-                                                                                const displayText = displayableUserMessageText(msg.text);
-                                                                                const imageSources = queuedMessageImageSources(msg);
-                                                                                return (_jsx(MessageScrollerItem, { messageId: msg.id, children: _jsxs("div", { className: "group flex items-start justify-end gap-1.5", children: [isRunning && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => sendQueuedMessageNow(msg.id), "aria-label": "Send now", className: "mt-1.5 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(IconArrowUp, { className: "h-3 w-3" }) }) }), _jsx(TooltipContent, { children: "Send now (stops the current response)" })] })), _jsx("button", { type: "button", onClick: () => applyLocalQueuedMessages((prev) => prev.filter((m) => m.id !== msg.id)), "aria-label": "Remove from queue", className: "mt-1.5 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) }), _jsxs("div", { className: "max-w-[85%] rounded-lg bg-accent/50 px-3 py-2 text-sm leading-relaxed text-foreground/60 whitespace-pre-wrap break-words", children: [displayText, imageSources.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5", children: imageSources.map((img, j) => (_jsx("img", { src: img, alt: "", className: "h-12 w-12 rounded object-cover border border-border/50" }, j))) }))] })] }) }, msg.id));
-                                                                            }), resolvedThreadFooterSlot ? (_jsx(MessageScrollerItem, { children: _jsx("div", { className: "agent-thread-footer-slot", children: resolvedThreadFooterSlot }) })) : null] })) }), !authError &&
-                                                                    !isRestoring &&
-                                                                    !showEmptyState &&
-                                                                    showScrollToBottom ? (_jsx("div", { className: "shrink-0 flex justify-center -mb-1", children: _jsx("button", { type: "button", onClick: scrollToBottom, className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent", "aria-label": "Scroll to bottom", children: _jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) }) })) : null] }) }, chatScrollResetKey), showComposerSlot ? composerSlot : null, isActiveComposer && (_jsx(McpConnectionSuggestion, { text: composerText })), showCenteredEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--centered-empty", children: resolvedThreadFooterSlot })) : null, guidedQuestions && guidedQuestions.length > 0 && (_jsx("div", { className: "shrink-0 px-3 pb-2", children: _jsx(GuidedQuestionFlow, { questions: guidedQuestions, onSubmit: handleGuidedQuestionsSubmit, onSkip: handleGuidedQuestionsSkip, ...(guidedQuestionsTitle
+                                                                                            setRunErrorInfo(null);
+                                                                                        } }) })), (isReconnecting ||
+                                                                                    reconnectFrozen ||
+                                                                                    adapterHandoffPending) &&
+                                                                                    visibleReconnectContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: visibleReconnectContent, allowActivitySpinner: !reconnectFrozen }) })), (isReconnecting ||
+                                                                                    reconnectFrozen ||
+                                                                                    adapterHandoffPending) &&
+                                                                                    visibleReconnectContent.length === 0 &&
+                                                                                    reconnectContent.length === 0 &&
+                                                                                    reconnectActivityContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: reconnectActivityContent, allowActivitySpinner: !reconnectFrozen }) })), showGlobalRunningStatus && (_jsx(MessageScrollerItem, { children: _jsx(RunningActivityStatus, { label: runningStatusLabel }) })), visibleQueuedMessages.length > 0 && (_jsx(MessageScrollerItem, { children: _jsxs("div", { className: "flex items-center justify-end gap-1.5 pr-0.5 text-xs text-muted-foreground", children: [_jsx(IconClock, { className: "h-3 w-3" }), _jsxs("span", { children: [visibleQueuedMessages.length, " ", "queued"] })] }) })), visibleQueuedMessages.map((msg) => {
+                                                                                    const displayText = displayableUserMessageText(msg.text);
+                                                                                    const imageSources = queuedMessageImageSources(msg);
+                                                                                    return (_jsx(MessageScrollerItem, { messageId: msg.id, children: _jsxs("div", { className: "group flex items-start justify-end gap-1.5", children: [isRunning && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => sendQueuedMessageNow(msg.id), "aria-label": "Send now", className: "mt-1.5 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(IconArrowUp, { className: "h-3 w-3" }) }) }), _jsx(TooltipContent, { children: "Send now (stops the current response)" })] })), _jsx("button", { type: "button", onClick: () => applyLocalQueuedMessages((prev) => prev.filter((m) => m.id !== msg.id)), "aria-label": "Remove from queue", className: "mt-1.5 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) }), _jsxs("div", { className: "max-w-[85%] rounded-lg bg-accent/50 px-3 py-2 text-sm leading-relaxed text-foreground/60 whitespace-pre-wrap break-words", children: [displayText, imageSources.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5", children: imageSources.map((img, j) => (_jsx("img", { src: img, alt: "", className: "h-12 w-12 rounded object-cover border border-border/50" }, j))) }))] })] }) }, msg.id));
+                                                                                }), resolvedThreadFooterSlot ? (_jsx(MessageScrollerItem, { children: _jsx("div", { className: "agent-thread-footer-slot", children: resolvedThreadFooterSlot }) })) : null] })) }), !authError && !isRestoring && !showEmptyState ? (_jsx(MessageScrollerButton, {})) : null] })] }, chatScrollResetKey), showComposerSlot ? composerSlot : null, isActiveComposer && (_jsx(McpConnectionSuggestion, { text: composerText })), showCenteredEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--centered-empty", children: resolvedThreadFooterSlot })) : null, guidedQuestions && guidedQuestions.length > 0 && (_jsx("div", { className: "shrink-0 px-3 pb-2", children: _jsx(GuidedQuestionFlow, { questions: guidedQuestions, onSubmit: handleGuidedQuestionsSubmit, onSkip: handleGuidedQuestionsSkip, ...(guidedQuestionsTitle
                                                                 ? { title: guidedQuestionsTitle }
                                                                 : {}), ...(guidedQuestionsDescription
                                                                 ? { description: guidedQuestionsDescription }