@agent-native/core 0.87.0 → 0.90.1

package/dist/client/AgentPanel.js

@@ -56,6 +56,29 @@ const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ de
 const AGENT_PANEL_PREPARE_EVENT = "agent-panel:prepare";
 const AGENT_PANEL_SET_MODE_EVENT = "agent-panel:set-mode";
 const AGENT_PANEL_OPEN_SETTINGS_EVENT = "agent-panel:open-settings";
+function settingsRouteHashForSection(section) {
+    const normalized = section?.replace(/^#/, "").toLowerCase() ?? "";
+    if (normalized.startsWith("secrets") ||
+        normalized.includes("api") ||
+        normalized === "integrations" ||
+        normalized === "email" ||
+        normalized === "browser") {
+        return "#connections";
+    }
+    if (normalized === "account" ||
+        normalized === "workspace" ||
+        normalized === "workspace-settings" ||
+        normalized === "organization" ||
+        normalized === "org" ||
+        normalized === "hosting" ||
+        normalized === "database" ||
+        normalized === "uploads" ||
+        normalized === "auth" ||
+        normalized === "demo-mode") {
+        return "#workspace";
+    }
+    return "#agent";
+}
 const AGENT_CHAT_RUNNING_EVENT = "agentNative.chatRunning";
 function parentFrameTargetOrigin() {
     return getFramePostMessageTargetOrigin() ?? window.location.origin;
@@ -312,6 +335,7 @@ function CodeAccessUnavailablePanel({ title, description, ctaLabel, ctaHref, sec
 }
 function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, restoreActiveThread = true, scope, showScopeBadge, browserTabId, threadUrlSync, chatNotice, showTabBar = true, showPageNewChatButton = false, allowSettingsMode = true, codeAccess, ...assistantChatProps }) {
     const t = useT();
+    const navigate = useNavigate();
     const mounted = useClientOnly();
     const keyPrefix = storageKey ? `:${storageKey}` : "";
     const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
@@ -417,6 +441,10 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                 requestKey: prev.requestKey + 1,
             }));
             if (!allowSettingsMode) {
+                navigate({
+                    pathname: "/settings",
+                    hash: settingsRouteHashForSection(section),
+                });
                 switchMode("chat");
                 return;
             }
@@ -424,7 +452,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         }
         window.addEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
         return () => window.removeEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
-    }, [allowSettingsMode, switchMode]);
+    }, [allowSettingsMode, navigate, switchMode]);
     // CLI terminal tabs (ephemeral — not persisted to SQL)
     const [cliTabs, setCliTabs] = useState(["cli-1"]);
     const [activeCliTab, setActiveCliTab] = useState("cli-1");
@@ -533,18 +561,18 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
             window.location.hostname === "127.0.0.1" ||
             window.location.hostname === "::1");
     const showDevToggle = canToggle && isLocalhost && isDevFrameChatSurface;
-    const renderModeButtons = useCallback((activeMode) => (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [onCollapse && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, 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:bg-accent/50 hover:text-foreground", style: AGENT_PANEL_CONTROL_STYLE, children: _jsx(IconX, { size: 16 }) }) }), _jsx(TooltipContent, { children: t("agentPanel.collapseSidebar") })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("chat"), "aria-label": t("agentPanel.chatMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "chat"
+    const renderModeButtons = useCallback((activeMode) => (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("chat"), "aria-label": t("agentPanel.chatMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "chat"
                                     ? "bg-accent text-foreground"
                                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconMessageCircle, { size: 14 }), t("agentPanel.chat")] }) }), _jsx(TooltipContent, { children: t("agentPanel.chatMode") })] }), showCliMode && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("cli"), "aria-label": t("agentPanel.cliTerminalMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "cli"
                                     ? "bg-accent text-foreground"
                                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconTerminal2, { size: 14 }), t("agentPanel.cli")] }) }), _jsx(TooltipContent, { className: "max-w-[260px]", children: codeAccessEnabled
                                 ? t("agentPanel.cliTerminalMode")
-                                : codeUnavailableDescription })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": t("agentPanel.workspaceMode"), className: cn("agent-sidebar-hover-reveal flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
+                                : codeUnavailableDescription })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": t("agentPanel.workspaceMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
                                     ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), t("agentPanel.workspace")] }) }), _jsx(TooltipContent, { children: t("agentPanel.workspaceMode") })] })] }) })), [codeAccessEnabled, codeUnavailableDescription, onCollapse, showCliMode, t]);
+                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), t("agentPanel.workspace")] }) }), _jsx(TooltipContent, { children: t("agentPanel.workspaceMode") })] })] }) })), [codeAccessEnabled, codeUnavailableDescription, showCliMode, t]);
     const [headerMenuOpen, setHeaderMenuOpen] = useState(false);
     const [feedbackOpen, setFeedbackOpen] = useState(false);
-    const renderHeaderActions = useCallback(({ activeChatSessionId, activeTabId, addTab, clearActiveTab, closeAllTabs, closeOtherTabs, closeTab, showHistory, tabs, toggleHistory, }) => (_jsxs("div", { className: "relative flex shrink-0 items-center gap-0.5", children: [SHOW_ONBOARDING && (_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) })), _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" }) }), mode === "chat" && (_jsx(IconTooltip, { content: t("agentPanel.newChat"), children: _jsx("button", { onClick: addTab, "aria-label": t("agentPanel.newChat"), className: "agent-sidebar-hover-reveal 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 }) }) })), mode === "cli" && canUseCodeTools && (_jsx(IconTooltip, { content: t("agentPanel.newTerminal"), children: _jsx("button", { onClick: addCliTab, "aria-label": t("agentPanel.newTerminal"), className: "agent-sidebar-hover-reveal 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") &&
+    const renderHeaderActions = useCallback(({ activeChatSessionId, activeTabId, addTab, clearActiveTab, closeAllTabs, closeOtherTabs, closeTab, showHistory, tabs, toggleHistory, }) => (_jsxs("div", { className: "relative flex shrink-0 items-center gap-0.5", children: [SHOW_ONBOARDING && (_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) })), _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" }) }), 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 }) }) })), 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, {})] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: toggleHistory, children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
                                         ? t("agentPanel.hideChats")
                                         : t("agentPanel.allChats")] })), mode === "chat" && (_jsx(RunsTrayMenuItem, { pollMs: 2000, 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
@@ -552,7 +580,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                                             : "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")] })), _jsxs(DropdownMenuItem, { onSelect: () => setFeedbackOpen(true), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), t("agentPanel.feedback")] }), onToggleFullscreen && (_jsxs(DropdownMenuItem, { onSelect: onToggleFullscreen, children: [isFullscreen ? (_jsx(IconArrowsMinimize, { size: 14, className: "shrink-0" })) : (_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" })), isFullscreen
                                         ? t("agentPanel.exitFullscreen")
                                         : t("agentPanel.fullscreen")] })), ((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 })] })] }))] }))] })] })] })), [
+                                (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,
         allowSettingsMode,
@@ -604,7 +632,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
             }
         });
     }, []);
-    const renderChatHeader = useCallback(({ tabs, activeTabId, setActiveTabId, addTab, clearActiveTab, closeTab, closeOtherTabs, closeAllTabs, showHistory, toggleHistory, }) => (_jsxs("div", { className: "flex flex-col shrink-0", children: [_jsxs("div", { className: AGENT_PANEL_HEADER_CLASS, style: AGENT_PANEL_HEADER_STYLE, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: renderModeButtons(mode) }), _jsx("div", { className: "flex items-center gap-0.5", children: renderHeaderActions({
+    const renderChatHeader = useCallback(({ tabs, activeTabId, setActiveTabId, addTab, clearActiveTab, closeTab, closeOtherTabs, closeAllTabs, showHistory, toggleHistory, }) => (_jsxs("div", { className: "agent-sidebar-chat-header flex flex-col shrink-0", "data-agent-sidebar-chat-header": onCollapse ? "" : undefined, "data-agent-sidebar-chat-header-active": headerMenuOpen || feedbackOpen ? "" : undefined, children: [_jsxs("div", { className: AGENT_PANEL_HEADER_CLASS, style: AGENT_PANEL_HEADER_STYLE, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: renderModeButtons(mode) }), _jsx("div", { className: "flex items-center gap-0.5", children: renderHeaderActions({
                             activeChatSessionId: activeTabId,
                             activeTabId,
                             addTab,
@@ -685,6 +713,9 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         renderModeButtons,
         chatNotice,
         canUseCodeTools,
+        feedbackOpen,
+        headerMenuOpen,
+        onCollapse,
         showTabBar,
         cliTabs,
         activeCliTab,
@@ -693,14 +724,17 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         closeCliTab,
     ]);
     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 }, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
-                    __html: ".agent-sidebar-hover-reveal{opacity:0;pointer-events:none;transition:opacity 150ms ease-out;}" +
-                        ".agent-panel-root:hover .agent-sidebar-hover-reveal,.agent-panel-root:focus-within .agent-sidebar-hover-reveal{opacity:1;pointer-events:auto;}" +
+                    __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-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,` +
-                        `[data-agent-fullscreen='true'] .agent-composer-area{` +
+                        `[data-agent-fullscreen='true'] .agent-composer-area,` +
+                        `[data-agent-fullscreen='true'] .agent-plan-mode-callout{` +
                         `max-width:${FULLSCREEN_CONTENT_MAX_PX}px;` +
                         `margin-left:auto;margin-right:auto;width:100%;}`,
                 } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), _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, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageNewChatButton && !showHeader
@@ -771,22 +805,37 @@ function ResizeHandle({ position, onDrag, }) {
                 document.body.style.cursor = "";
             }
         }
-        function onMouseUp() {
+        function endDrag() {
             if (!dragging.current)
                 return;
             dragging.current = false;
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
         }
+        // mouseup covers the normal release-inside-the-page case; window blur
+        // covers releasing the button outside the browser window/iframe (e.g.
+        // dragging the sidebar wide and letting go over the OS chrome), which
+        // never delivers a mouseup to this document. Without both, a drag that
+        // ends abnormally — or this effect re-running/unmounting mid-drag —
+        // could leave `document.body.style.userSelect` stuck at "none",
+        // silently breaking text selection/copy everywhere in the app.
         document.addEventListener("mousedown", onMouseDown);
         document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("mouseup", endDrag);
+        window.addEventListener("blur", endDrag);
         return () => {
             document.removeEventListener("mousedown", onMouseDown);
             document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("mouseup", onMouseUp);
+            document.removeEventListener("mouseup", endDrag);
+            window.removeEventListener("blur", endDrag);
             if (cursorActive)
                 document.body.style.cursor = "";
+            // Always clear regardless of `dragging`/`cursorActive` state — this
+            // effect can unmount or re-run (position change, sidebar layout
+            // change) while a drag is in flight, and a stuck "none" here disables
+            // selection app-wide until reload.
+            document.body.style.userSelect = "";
+            dragging.current = false;
         };
     }, [position]);
     return (_jsx("div", { ref: ref, className: cn("agent-sidebar-resize-handle relative z-20 w-px shrink-0 touch-none select-none bg-transparent transition-colors hover:bg-border active:bg-border"), style: { cursor: "col-resize" } }));
@@ -1466,7 +1515,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             height: "100%",
             width,
             maxWidth: "85vw",
-            maxHeight: "100vh",
+            maxHeight: "var(--agent-native-viewport-height, 100vh)",
             zIndex: SIDEBAR_OVERLAY_Z_INDEX,
             "--agent-sidebar-background": "var(--agent-native-lower-surface, hsl(var(--background)))",
             background: "var(--agent-sidebar-background)",
@@ -1483,7 +1532,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             position: "fixed",
             inset: 0,
             width: "100%",
-            maxHeight: "100vh",
+            maxHeight: "var(--agent-native-viewport-height, 100vh)",
             zIndex: SIDEBAR_FULLSCREEN_Z_INDEX,
             background: "hsl(var(--background))",
             display: open ? "flex" : "none",
@@ -1497,7 +1546,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             "--agent-sidebar-background": "var(--agent-native-lower-surface, hsl(var(--background)))",
             background: "var(--agent-sidebar-background)",
             width: desktopAnimationEnabled ? undefined : width,
-            maxHeight: "100vh",
+            maxHeight: "var(--agent-native-viewport-height, 100vh)",
             borderLeft: !panelOpen || isLeft || showResizeHandle
                 ? "none"
                 : "1px solid hsl(var(--border))",
@@ -1517,7 +1566,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", 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, imageModelMenu: imageModelMenu, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : (onFullscreenRequest ?? toggleFullscreen), storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] })) : 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, imageModelMenu: imageModelMenu, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : (onFullscreenRequest ?? toggleFullscreen), storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, allowSettingsMode: false }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] })) : null;
     return (_jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": position, children: [_jsx(AgentNativeRouteWarmup, {}), isMobile &&
                 !presentationMode &&
                 (mobileAnimationEnabled ? shouldRenderPanel : open) && (_jsx("div", { className: cn("agent-sidebar-backdrop fixed inset-0 bg-black/40", mobileAnimationEnabled && !panelOpen && "pointer-events-none"), "data-agent-sidebar-animation": mobileAnimationEnabled ? "mobile" : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", style: { zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }, onClick: () => setOpenPersisted(false) })), shouldMountPanel ? _jsx(URLSync, { browserTabId: browserTabId }) : null, isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "agent-sidebar-main-surface flex flex-1 flex-col overflow-auto min-w-0", "data-agent-sidebar-main-position": position, "data-agent-sidebar-main-state": !isMobile && !effectiveFullscreen && !presentationMode && panelOpen