@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/dist/client/AgentPanel.js

@@ -22,7 +22,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *   <AgentChatSurface mode="page" className="h-screen" />
  */
 import { Tooltip as DesignSystemTooltip } from "@agent-native/toolkit/design-system";
-import { IconMessageCircle, IconMessageDots, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsHorizontal, IconArrowsMaximize, IconExternalLink, IconShare3, IconBulb, } from "@tabler/icons-react";
+import { IconMessageCircle, IconMessageDots, IconTerminal2, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsHorizontal, IconArrowsMaximize, IconExternalLink, IconShare3, IconBulb, } from "@tabler/icons-react";
 import React, { useState, useEffect, useRef, useCallback, useMemo, lazy, Suspense, startTransition, } from "react";
 import { flushSync } from "react-dom";
 import { hostedHarnessAgentOption, isHostedHarnessConfigured, isHostedHarnessRuntime, normalizeHostedHarnessRuntimes, } from "../agent/harness/hosted.js";
@@ -87,32 +87,80 @@ function postPerAppChatSidebarStateToEmbeddedFrames(open) {
         frame.contentWindow?.postMessage(message, "*");
     }
 }
-function settingsRouteHashForSection(section) {
-    const normalized = section?.replace(/^#/, "").toLowerCase() ?? "";
+export function settingsRouteHashForSection(section, currentHash) {
+    const raw = section?.replace(/^#/, "").trim() ?? "";
+    const normalized = raw.toLowerCase();
+    if ([
+        "llm",
+        "app-models",
+        "limits",
+        "demo-mode",
+        "hosting",
+        "database",
+        "uploads",
+        "auth",
+        "email",
+        "browser",
+        "background",
+        "usage",
+    ].includes(normalized)) {
+        return `#${normalized}`;
+    }
     if (normalized === "voice")
         return "#voice";
+    if (normalized === "a2a")
+        return "#agent:agents";
+    if (normalized.startsWith("secrets:")) {
+        return `#secrets:${raw.slice("secrets:".length)}`;
+    }
+    if (normalized === "secrets") {
+        const existing = currentHash?.replace(/^#/, "").trim() ?? "";
+        if (existing.toLowerCase().startsWith("secrets:") && existing.length > 8) {
+            return `#secrets:${existing.slice("secrets:".length)}`;
+        }
+    }
+    if (normalized === "automations")
+        return "#agent:automations";
     if (normalized.startsWith("secrets") ||
         normalized.includes("api") ||
         normalized === "integrations" ||
-        normalized === "connections" ||
-        normalized === "email" ||
-        normalized === "browser") {
+        normalized === "connections") {
         return "#integrations";
     }
     if (normalized === "account" ||
         normalized === "workspace" ||
         normalized === "workspace-settings" ||
         normalized === "organization" ||
-        normalized === "org" ||
-        normalized === "hosting" ||
-        normalized === "database" ||
-        normalized === "uploads" ||
-        normalized === "auth" ||
-        normalized === "demo-mode") {
+        normalized === "org") {
         return "#workspace";
     }
     return "#agent";
 }
+export function AgentPanelSettingsNavigation({ onOpenSettings, } = {}) {
+    const navigate = useNavigate();
+    useEffect(() => {
+        function handleOpenSettings(event) {
+            const section = event.detail
+                ?.section;
+            if (onOpenSettings) {
+                onOpenSettings(section);
+                return;
+            }
+            const navigation = navigate({
+                pathname: appPath("/settings"),
+                hash: settingsRouteHashForSection(section, window.location.hash),
+            });
+            const notifyLocationChange = () => {
+                window.dispatchEvent(new Event("popstate"));
+                window.dispatchEvent(new Event("hashchange"));
+            };
+            void Promise.resolve(navigation).then(notifyLocationChange, () => undefined);
+        }
+        window.addEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
+        return () => window.removeEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
+    }, [navigate, onOpenSettings]);
+    return null;
+}
 const AGENT_CHAT_RUNNING_EVENT = "agentNative.chatRunning";
 function parentFrameTargetOrigin() {
     return getFramePostMessageTargetOrigin() ?? window.location.origin;
@@ -121,10 +169,6 @@ function parentFrameTargetOrigin() {
 const ResourcesPanel = lazy(() => import("./resources/ResourcesPanel.js").then((m) => ({
     default: m.ResourcesPanel,
 })));
-// Lazy-load SettingsPanel to avoid bundling when not needed
-const SettingsPanel = lazy(() => import("./settings/index.js").then((m) => ({
-    default: m.SettingsPanel,
-})));
 // Lazy-load OnboardingPanel — only pulled in when onboarding is active.
 const OnboardingPanel = lazy(() => import("./onboarding/OnboardingPanel.js").then((m) => ({
     default: m.OnboardingPanel,
@@ -139,18 +183,18 @@ const SetupButton = lazy(() => import("./onboarding/SetupButton.js").then((m) =>
 })));
 // The setup/onboarding checklist that used to appear above chat is disabled
 // for every app — setup (AI engine, image/video gen, asset storage, email,
-// GitHub, etc.) is surfaced in better places (the settings panel and the
-// per-feature setup affordances). Keep this off; do not re-enable globally.
+// GitHub, etc.) is surfaced in the settings pages and per-feature setup
+// affordances. Keep this off; do not re-enable globally.
 const SHOW_ONBOARDING = false;
 const SHOW_FIRST_RUN_ONBOARDING = isFirstRunOnboardingEnabled();
 const AgentSidebarOnboardingContext = React.createContext(false);
 const CLI_STORAGE_KEY = "agent-native-cli-command";
 const CLI_DEFAULT = "claude";
 const EXEC_MODE_KEY = "agent-native-exec-mode";
-export function normalizeAgentPanelModeForSurface(mode, allowSettingsMode, chatOnly = false) {
+export function normalizeAgentPanelModeForSurface(mode, chatOnly = false) {
     if (chatOnly)
         return "chat";
-    return mode === "settings" && !allowSettingsMode ? "chat" : mode;
+    return mode === "cli" || mode === "resources" ? mode : "chat";
 }
 const AGENT_PANEL_FONT_FAMILY = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
 const AGENT_PANEL_ROOT_STYLE = {
@@ -305,7 +349,7 @@ export function shouldShowAgentPanelModeButtons(isSidebar) {
 export function shouldShowAgentPanelFullViewAction(agentPageHref, mode, isSidebar = false, currentPath) {
     return (Boolean(agentPageHref) &&
         currentPath !== agentPageHref &&
-        (isSidebar || mode === "resources" || mode === "settings"));
+        (isSidebar || mode === "resources"));
 }
 export function resolveAgentPanelFullViewAction(agentPageHref, onFullViewRequest, mode, isSidebar = false, currentPath) {
     if (!agentPageHref ||
@@ -468,9 +512,8 @@ 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, onFullViewRequest, onSnapTo75Percent, isWideDrawer, onExitWideDrawer, devAppUrl, storageKey, restoreActiveThread = true, scope, isolateHistoryByScope = false, 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, onOpenSettings, onNewCliTab, onNewUiTab, newTabMode = "ui", newCliTabLabel, newUiTabLabel, storageKey, restoreActiveThread = true, scope, isolateHistoryByScope = false, showScopeBadge, browserTabId, threadUrlSync, chatNotice, showTabBar = true, showPageNewChatButton = false, chatOnly = false, agentPageHref, codeAccess, ...assistantChatProps }) {
     const t = useT();
-    const navigate = useNavigate();
     const location = useLocation();
     const mounted = useClientOnly();
     const onboardingPreviewMode = useOnboardingPreviewMode();
@@ -508,14 +551,10 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
     const [mode, setMode] = useState(() => {
         try {
             const saved = localStorage.getItem(panelModeKey);
-            if (saved === "chat" ||
-                saved === "cli" ||
-                saved === "resources" ||
-                saved === "settings")
-                return normalizeAgentPanelModeForSurface(saved, allowSettingsMode, chatOnly);
+            return normalizeAgentPanelModeForSurface(saved ?? defaultMode, chatOnly);
         }
         catch { }
-        return normalizeAgentPanelModeForSurface(defaultMode, allowSettingsMode, chatOnly);
+        return normalizeAgentPanelModeForSurface(defaultMode, chatOnly);
     });
     useEffect(() => {
         try {
@@ -523,15 +562,14 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         }
         catch { }
     }, [mode, panelModeKey]);
-    const [settingsSection, setSettingsSection] = useState({ section: null, requestKey: 0 });
     const switchMode = useCallback((m) => {
-        startTransition(() => setMode(normalizeAgentPanelModeForSurface(m, allowSettingsMode, chatOnly)));
-    }, [allowSettingsMode, chatOnly]);
+        startTransition(() => setMode(normalizeAgentPanelModeForSurface(m, chatOnly)));
+    }, [chatOnly]);
     useEffect(() => {
-        const nextMode = normalizeAgentPanelModeForSurface(mode, allowSettingsMode, chatOnly);
+        const nextMode = normalizeAgentPanelModeForSurface(mode, chatOnly);
         if (nextMode !== mode)
             switchMode(nextMode);
-    }, [mode, allowSettingsMode, chatOnly, switchMode]);
+    }, [mode, chatOnly, switchMode]);
     const openRunThread = useCallback((threadId, run) => {
         switchMode("chat");
         const metadata = run?.metadata ?? {};
@@ -565,35 +603,16 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
     // Listen for mode changes from the frame parent (via AgentSidebar)
     useEffect(() => {
         function handler(e) {
-            const detail = e.detail;
-            if (detail?.mode)
-                switchMode(detail.mode);
+            const requestedMode = e.detail?.mode;
+            if (requestedMode === "chat" ||
+                requestedMode === "cli" ||
+                requestedMode === "resources") {
+                switchMode(requestedMode);
+            }
         }
         window.addEventListener(AGENT_PANEL_SET_MODE_EVENT, handler);
         return () => window.removeEventListener(AGENT_PANEL_SET_MODE_EVENT, handler);
     }, [switchMode]);
-    // Open settings tab when requested (replaces the old popover open event)
-    useEffect(() => {
-        function handleOpenSettings(event) {
-            const section = event.detail
-                ?.section;
-            setSettingsSection((prev) => ({
-                section: section ?? null,
-                requestKey: prev.requestKey + 1,
-            }));
-            if (!allowSettingsMode) {
-                void navigate({
-                    pathname: "/settings",
-                    hash: settingsRouteHashForSection(section),
-                });
-                switchMode("chat");
-                return;
-            }
-            switchMode("settings");
-        }
-        window.addEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
-        return () => window.removeEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
-    }, [allowSettingsMode, navigate, switchMode]);
     // CLI terminal tabs (ephemeral — not persisted to SQL)
     const [cliTabs, setCliTabs] = useState(["cli-1"]);
     const [activeCliTab, setActiveCliTab] = useState("cli-1");
@@ -660,7 +679,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
     }, [mode, activeCliTab, closeCliTab, closeAllCliTabs, isMac]);
     const availableClis = useAvailableClis();
     const [selectedCli, selectCli] = useCliSelection(keyPrefix);
-    const { isDevMode, canToggle, setDevMode } = useDevMode(apiUrl);
+    const { isDevMode } = useDevMode(apiUrl);
     const effectiveAgentChatSurface = resolveAgentPanelChatSurface(assistantChatProps.agentChatSurface, isDesktopCodeSurfaceRequested());
     const isDevFrameChatSurface = effectiveAgentChatSurface === "dev-frame";
     const isCodeEditingChatSurface = isDevFrameChatSurface || effectiveAgentChatSurface === "desktop";
@@ -698,12 +717,6 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
             }
         }
     }, [isDevMode]);
-    const isLocalhost = mounted &&
-        typeof window !== "undefined" &&
-        (window.location.hostname === "localhost" ||
-            window.location.hostname === "127.0.0.1" ||
-            window.location.hostname === "::1");
-    const showDevToggle = canToggle && isLocalhost && isCodeEditingChatSurface;
     const renderModeButtons = useCallback((activeMode) => (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(DesignSystemTooltip, { trigger: _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")] }), content: t("agentPanel.chatMode"), delayMs: 200 }), showCliMode && (_jsx(DesignSystemTooltip, { trigger: _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"
@@ -765,13 +778,18 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                         return null;
                     }
                     return (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, allowedRoles: ["viewer", "editor", "admin"], resourceTitle: activeTab.label || t("agentPanel.chat"), shareUrl: getChatThreadShareUrl(activeTab.id), triggerClassName: "h-7 px-2", defaultOpen: onCollapse && shareFromMenuOpen, onOpenChange: onCollapse ? setShareFromMenuOpen : undefined }));
-                })(), 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", onCloseAutoFocus: (event) => {
+                })(), 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: newTabMode === "cli" && newCliTabLabel
+                    ? newCliTabLabel
+                    : t("agentPanel.newChat"), children: _jsx("button", { onClick: newTabMode === "cli" && onNewCliTab ? onNewCliTab : addTab, "aria-label": newTabMode === "cli" && newCliTabLabel
+                        ? newCliTabLabel
+                        : 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 && "bg-accent text-foreground"), "aria-label": t("agentPanel.panelOptions"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-48", onCloseAutoFocus: (event) => {
                             // A sibling overlay owns focus next; restoring it to the menu
                             // trigger would dismiss that overlay as an outside interaction.
                             consumeAgentPanelOverlayFocusRestore(preventHeaderMenuFocusRestoreRef, event);
                         }, 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")] }), (() => {
+                                fullViewAction ? (_jsx(DropdownMenuSeparator, {})) : null, onCollapse && mode === "chat" && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: newTabMode === "cli" && onNewUiTab ? onNewUiTab : addTab, children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), newTabMode === "cli"
+                                                ? (newUiTabLabel ?? t("agentPanel.newChat"))
+                                                : t("agentPanel.newChat")] }), (() => {
                                         const activeTab = activeChatSessionId
                                             ? tabs.find((tab) => tab.id === activeChatSessionId)
                                             : undefined;
@@ -780,15 +798,17 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                                             return null;
                                         }
                                         return (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, () => setShareFromMenuOpen(true)), children: [_jsx(IconShare3, { size: 14, className: "shrink-0" }), "Share"] }));
-                                    })()] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, toggleHistory), children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
+                                    })()] })), mode === "chat" &&
+                                newTabMode !== "cli" &&
+                                onNewCliTab &&
+                                newCliTabLabel ? (_jsxs(DropdownMenuItem, { onSelect: onNewCliTab, children: [_jsx(IconTerminal2, { size: 14, className: "shrink-0" }), newCliTabLabel] })) : null, mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, 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, {})] })), mode === "chat" && _jsx(ThinkingDisplayMenuItem, {}), allowSettingsMode && (_jsxs(DropdownMenuItem, { onSelect: () => switchMode("settings"), className: cn(mode === "settings" ? "font-medium" : "text-muted-foreground"), children: [_jsx(IconSettings, { size: 14, className: "shrink-0" }), t("agentPanel.settings")] })), feedbackEnabled ? (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, () => setFeedbackOpen(true)), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), t("agentPanel.feedback")] })) : null, ((mode === "chat" && activeTabId) ||
+                                            : "text-muted-foreground"), children: [cli.command === selectedCli ? (_jsx(IconCheck, { size: 12, className: "shrink-0" })) : (_jsx("span", { className: "w-3" })), cli.label] }, cli.command))), _jsx(DropdownMenuSeparator, {})] })), mode === "chat" && _jsx(ThinkingDisplayMenuItem, {}), feedbackEnabled ? (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, () => setFeedbackOpen(true)), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), t("agentPanel.feedback")] })) : null, ((mode === "chat" && activeTabId) ||
                                 (mode === "cli" && canUseCodeTools && activeCliTab)) && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), mode === "chat" ? (shouldShowAgentPanelChatTabBar(tabs, activeTabId) ? (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeTab(activeTabId), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.closeTab"), _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherTabs(activeTabId), children: t("agentPanel.closeOtherTabs") }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllTabs(), children: [t("agentPanel.closeAllTabs"), _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] })) : (_jsxs(DropdownMenuItem, { onSelect: clearActiveTab, children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.clearChat")] }))) : (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeCliTab(activeCliTab), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.closeTab"), _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherCliTabs(activeCliTab), children: t("agentPanel.closeOtherTabs") }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllCliTabs(), children: [t("agentPanel.closeAllTabs"), _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] }))] }))] })] }), onCollapse && (_jsx(IconTooltip, { content: t("agentPanel.collapseSidebar"), children: _jsx("button", { type: "button", onClick: onCollapse, "aria-label": t("agentPanel.collapseSidebar"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconX, { size: 14 }) }) }))] })), [
         activeCliTab,
         addCliTab,
-        allowSettingsMode,
         availableClis,
         canUseCodeTools,
         closeHeaderMenuForOverlay,
@@ -982,47 +1002,47 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         closeCliTab,
         t,
     ]);
-    return (_jsx(ThinkingDisplayProvider, { value: assistantChatProps.thinkingDisplay, children: _jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: {
-                ...AGENT_PANEL_ROOT_STYLE,
-                ...style,
-                // The chat view-transition container otherwise traps fixed onboarding
-                // chrome below the app's own header instead of the viewport edge.
-                ...(isFirstRunOnboardingSurface ? { contain: "none" } : {}),
-            }, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
-                        __html: "@media (hover:hover) and (pointer:fine){" +
-                            ".agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:0;pointer-events:none;transition:opacity 150ms ease-out;}" +
-                            ".agent-panel-root:hover .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-panel-root:focus-within .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-sidebar-chat-header[data-agent-sidebar-chat-header][data-agent-sidebar-chat-header-active]{opacity:1;pointer-events:auto;}" +
-                            ".agent-sidebar-panel[data-agent-sidebar-per-app-chat='true'] .agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:1;pointer-events:auto;transition:none;}" +
-                            "}" +
-                            ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
-                            ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
-                            ".agent-tabs-scroll::-webkit-scrollbar{display:none;}" +
-                            `[data-agent-fullscreen='true'] .agent-thread-content,` +
-                            `[data-agent-fullscreen='true'] .agent-running-activity{` +
-                            `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
-                            `margin-left:auto;margin-right:auto;width:100%;}` +
-                            `[data-agent-fullscreen='true'] .agent-composer-area,` +
-                            `[data-agent-fullscreen='true'] .agent-plan-mode-callout{` +
-                            `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
-                            `margin-left:auto;margin-right:auto;width:100%;}` +
-                            `[data-agent-fullscreen='true'] .agent-composer-area:not(.agent-composer-area--compact){` +
-                            `padding-left:0;padding-right:0;}` +
-                            `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion--composer,` +
-                            `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion-error--composer{` +
-                            `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
-                            `margin-left:auto;margin-right:auto;width:100%;}`,
-                    } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), showFirstRunOnboarding && mounted && !insideAgentSidebar && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(Suspense, { fallback: _jsx(ChatLoadingSkeleton, { renderHeader: showHeader ? renderChatHeader : undefined, centerComposerWhenEmpty: assistantChatProps.centerComposerWhenEmpty, composerSlot: assistantChatProps.composerSlot, composerAreaClassName: assistantChatProps.composerAreaClassName, composerLayoutVariant: assistantChatProps.composerLayoutVariant }), children: _jsx(MultiTabAssistantChatLazy, { ...assistantChatProps, agentChatSurface: effectiveAgentChatSurface, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageNewChatButton && !showHeader
-                                ? renderPageChatOverlay
-                                : undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, emptyStateAddon: emptyStateAddon, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) })) }), canUseCodeTools
-                    ? mode === "cli" &&
-                        cliTabs.map((id) => (_jsx("div", { className: "min-h-0 relative flex-1", style: {
-                                display: id === activeCliTab ? undefined : "none",
-                            }, children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: t("agentPanel.loadingTerminal") }), children: _jsx(AgentTerminal, { command: selectedCli, hideInFrame: false, className: "h-full", style: { background: "transparent" } }) }) }, id)))
-                    : mode === "cli" && (_jsx("div", { className: "flex flex-1 flex-col items-center justify-center min-h-0 px-6 gap-3", children: _jsx(CodeAccessUnavailablePanel, { title: codeAccessEnabled
-                                ? t("agentPanel.cliRequiresDevMode")
-                                : codeUnavailableTitle, description: codeAccessEnabled
-                                ? t("agentPanel.cliRequiresDevModeDescription")
-                                : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex flex-1 flex-col min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) }) })), mode === "settings" && (_jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" })] }), children: _jsx(SettingsPanel, { isDevMode: isDevMode, onToggleDevMode: () => setDevMode(!isDevMode), showDevToggle: showDevToggle, devAppUrl: devAppUrl, initialSection: settingsSection.section, sectionRequestKey: settingsSection.requestKey }) }) }))] }) }));
+    return (_jsxs(ThinkingDisplayProvider, { value: assistantChatProps.thinkingDisplay, children: [_jsx(AgentPanelSettingsNavigation, { onOpenSettings: onOpenSettings }), _jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: {
+                    ...AGENT_PANEL_ROOT_STYLE,
+                    ...style,
+                    // The chat view-transition container otherwise traps fixed onboarding
+                    // chrome below the app's own header instead of the viewport edge.
+                    ...(isFirstRunOnboardingSurface ? { contain: "none" } : {}),
+                }, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                            __html: "@media (hover:hover) and (pointer:fine){" +
+                                ".agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:0;pointer-events:none;transition:opacity 150ms ease-out;}" +
+                                ".agent-panel-root:hover .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-panel-root:focus-within .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-sidebar-chat-header[data-agent-sidebar-chat-header][data-agent-sidebar-chat-header-active]{opacity:1;pointer-events:auto;}" +
+                                ".agent-sidebar-panel[data-agent-sidebar-per-app-chat='true'] .agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:1;pointer-events:auto;transition:none;}" +
+                                "}" +
+                                ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
+                                ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
+                                ".agent-tabs-scroll::-webkit-scrollbar{display:none;}" +
+                                `[data-agent-fullscreen='true'] .agent-thread-content,` +
+                                `[data-agent-fullscreen='true'] .agent-running-activity{` +
+                                `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
+                                `margin-left:auto;margin-right:auto;width:100%;}` +
+                                `[data-agent-fullscreen='true'] .agent-composer-area,` +
+                                `[data-agent-fullscreen='true'] .agent-plan-mode-callout{` +
+                                `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
+                                `margin-left:auto;margin-right:auto;width:100%;}` +
+                                `[data-agent-fullscreen='true'] .agent-composer-area:not(.agent-composer-area--compact){` +
+                                `padding-left:0;padding-right:0;}` +
+                                `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion--composer,` +
+                                `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion-error--composer{` +
+                                `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
+                                `margin-left:auto;margin-right:auto;width:100%;}`,
+                        } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), showFirstRunOnboarding && mounted && !insideAgentSidebar && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(Suspense, { fallback: _jsx(ChatLoadingSkeleton, { renderHeader: showHeader ? renderChatHeader : undefined, centerComposerWhenEmpty: assistantChatProps.centerComposerWhenEmpty, composerSlot: assistantChatProps.composerSlot, composerAreaClassName: assistantChatProps.composerAreaClassName, composerLayoutVariant: assistantChatProps.composerLayoutVariant }), children: _jsx(MultiTabAssistantChatLazy, { ...assistantChatProps, agentChatSurface: effectiveAgentChatSurface, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageNewChatButton && !showHeader
+                                    ? renderPageChatOverlay
+                                    : undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, emptyStateAddon: emptyStateAddon, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) })) }), canUseCodeTools
+                        ? mode === "cli" &&
+                            cliTabs.map((id) => (_jsx("div", { className: "min-h-0 relative flex-1", style: {
+                                    display: id === activeCliTab ? undefined : "none",
+                                }, children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: t("agentPanel.loadingTerminal") }), children: _jsx(AgentTerminal, { command: selectedCli, hideInFrame: false, className: "h-full", style: { background: "transparent" } }) }) }, id)))
+                        : mode === "cli" && (_jsx("div", { className: "flex flex-1 flex-col items-center justify-center min-h-0 px-6 gap-3", children: _jsx(CodeAccessUnavailablePanel, { title: codeAccessEnabled
+                                    ? t("agentPanel.cliRequiresDevMode")
+                                    : codeUnavailableTitle, description: codeAccessEnabled
+                                    ? t("agentPanel.cliRequiresDevModeDescription")
+                                    : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex flex-1 flex-col min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) }) }))] })] }));
 }
 // ─── Resize handle ──────────────────────────────────────────────────────────
 const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
@@ -1428,9 +1448,6 @@ export function AgentPanel(props) {
 export function shouldDefaultAgentChatSurfacePageNewChatButton(mode, _showTabBar) {
     return mode === "page";
 }
-export function shouldAllowAgentChatSurfaceSettingsMode(mode, allowSettingsMode) {
-    return allowSettingsMode ?? mode !== "page";
-}
 /**
  * Reusable chat surface backed by AgentPanel internals.
  *
@@ -1441,7 +1458,7 @@ export function shouldAllowAgentChatSurfaceSettingsMode(mode, allowSettingsMode)
 export function AgentChatSurface({ mode = "panel", className, defaultMode = "chat", showHeader = false, showTabBar = false, isFullscreen, style, chatViewTransition = false, showPageNewChatButton, ...props }) {
     const pageMode = mode === "page";
     const defaultShowPageNewChatButton = shouldDefaultAgentChatSurfacePageNewChatButton(mode, showTabBar);
-    const panel = (_jsx(AgentPanel, { ...props, defaultMode: defaultMode, showHeader: showHeader, showTabBar: showTabBar, isFullscreen: isFullscreen ?? pageMode, allowSettingsMode: shouldAllowAgentChatSurfaceSettingsMode(mode, props.allowSettingsMode), showPageNewChatButton: showPageNewChatButton ?? defaultShowPageNewChatButton, className: cn(pageMode && "h-full min-h-0 w-full overflow-hidden bg-background", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, className), style: chatViewTransition ? getAgentChatViewTransitionStyle(style) : style }));
+    const panel = (_jsx(AgentPanel, { ...props, defaultMode: defaultMode, showHeader: showHeader, showTabBar: showTabBar, isFullscreen: isFullscreen ?? pageMode, showPageNewChatButton: showPageNewChatButton ?? defaultShowPageNewChatButton, className: cn(pageMode && "h-full min-h-0 w-full overflow-hidden bg-background", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, className), style: chatViewTransition ? getAgentChatViewTransitionStyle(style) : style }));
     if (!pageMode)
         return panel;
     return (_jsxs(_Fragment, { children: [_jsx(URLSync, { browserTabId: props.browserTabId }), panel] }));
@@ -1450,7 +1467,7 @@ export function AgentChatSurface({ mode = "panel", className, defaultMode = "cha
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
  */
-export function AgentSidebar({ children, enabled = true, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, availableAgents, availableModels, modelListLoading, selectedAgent, onAgentChange, onConnectLocalRuntime, onConnectProvider, runtime, adapterReloadKey, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openStorageKey, restoreActiveThread = true, apiUrl, agentChatSurface, desktopIdentityUnauthenticated, desktopIdentityAuthenticated, showTabBar = true, suppressInlineOpenApp, composerPlaceholder, openOnChatRunning = false, onFullscreenRequest, scope, toggleScopeId, isolateHistoryByScope = false, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, thinkingDisplay, }) {
+export function AgentSidebar({ children, enabled = true, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, availableAgents, availableModels, modelListLoading, selectedAgent, onAgentChange, onConnectLocalRuntime, onConnectProvider, runtime, adapterReloadKey, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openStorageKey, restoreActiveThread = true, apiUrl, agentChatSurface, desktopIdentityUnauthenticated, desktopIdentityAuthenticated, showTabBar = true, suppressInlineOpenApp, composerPlaceholder, openOnChatRunning = false, onFullscreenRequest, onOpenSettings, onNewCliTab, onNewUiTab, newTabMode = "ui", newCliTabLabel, newUiTabLabel, scope, chatHistory, toggleScopeId, isolateHistoryByScope = false, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, thinkingDisplay, }) {
     const staticHostedHarnessEnabled = isHostedHarnessConfigured(injectedAgentNativeConfig().harness);
     const hostedHarnessQuery = useActionQuery("get-hosted-harness-config", undefined, { enabled: staticHostedHarnessEnabled });
     const hostedHarnessStatus = hostedHarnessQuery.data;
@@ -2096,7 +2113,7 @@ export function AgentSidebar({ children, enabled = true, emptyStateText = "How c
                             ? "desktop"
                             : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": effectivePosition, "data-agent-native-hosted-harness-ui": hostedHarnessUi ? "desktop" : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-per-app-chat": isPerAppChatSidebar ? "true" : undefined, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
                     ? getAgentChatViewTransitionStyle(panelStyle)
-                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, availableAgents: effectiveAvailableAgents, availableModels: availableModels, modelListLoading: modelListLoading, selectedAgent: effectiveSelectedAgent, onAgentChange: effectiveOnAgentChange, hostedHarness: hostedHarnessEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, runtime: runtime, adapterReloadKey: adapterReloadKey, threadFooterSlot: threadFooterSlot, apiUrl: apiUrl, agentChatSurface: agentChatSurface, desktopIdentityUnauthenticated: desktopIdentityUnauthenticated, desktopIdentityAuthenticated: desktopIdentityAuthenticated, showTabBar: effectiveShowTabBar, suppressInlineOpenApp: suppressInlineOpenApp, composerPlaceholder: composerPlaceholder, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, onFullViewRequest: onFullscreenRequest, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, thinkingDisplay: thinkingDisplay, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: effectivePosition, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
+                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, availableAgents: effectiveAvailableAgents, availableModels: availableModels, modelListLoading: modelListLoading, selectedAgent: effectiveSelectedAgent, onAgentChange: effectiveOnAgentChange, hostedHarness: hostedHarnessEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, runtime: runtime, adapterReloadKey: adapterReloadKey, threadFooterSlot: threadFooterSlot, apiUrl: apiUrl, agentChatSurface: agentChatSurface, desktopIdentityUnauthenticated: desktopIdentityUnauthenticated, desktopIdentityAuthenticated: desktopIdentityAuthenticated, showTabBar: effectiveShowTabBar, suppressInlineOpenApp: suppressInlineOpenApp, composerPlaceholder: composerPlaceholder, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, onFullViewRequest: onFullscreenRequest, onOpenSettings: onOpenSettings, onNewCliTab: onNewCliTab, onNewUiTab: onNewUiTab, newTabMode: newTabMode, newCliTabLabel: newCliTabLabel, newUiTabLabel: newUiTabLabel, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, chatHistory: chatHistory, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, thinkingDisplay: thinkingDisplay, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: effectivePosition, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
     const drawerPlaceholder = wideDrawerEnabled && !presentationMode && panelOpen ? (_jsx("div", { "aria-hidden": "true", className: "agent-sidebar-drawer-placeholder shrink-0", "data-agent-sidebar-placeholder": "true", style: { width: drawerPlaceholderWidth + 1 } })) : null;
     return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [showFirstRunOnboarding && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": effectivePosition, "data-agent-native-hosted-harness-ui": hostedHarnessUi ? "desktop" : undefined, "data-agent-native-hosted-chat": isPerAppChatHosted ? "true" : undefined, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [isMobile &&
                             !isPerAppChatHosted &&

package/dist/client/AssistantChat.d.ts

@@ -7,7 +7,7 @@ import type { ThinkingDisplay } from "../shared/thinking-display.js";
 import { type AgentChatSurfaceKind } from "./agent-chat-adapter.js";
 import { type AgentChatContextItem } from "./agent-chat.js";
 import { type QueuedAttachment } from "./chat/attachment-adapters.js";
-import { assistantMessageRunId } from "./chat/message-components.js";
+import { type AssistantChatHistoryConfig, assistantMessageRunId } from "./chat/message-components.js";
 import { type BuilderSetupCardLayout } from "./chat/run-recovery.js";
 import { type AgentChatRuntime } from "./chat/runtime.js";
 import { type AgentComposerLayoutVariant, type ComposerSubmitIntent, type Reference } from "./composer/index.js";
@@ -33,12 +33,14 @@ export interface AssistantChatSendOptions {
     attachments?: AgentChatAttachment[];
     /** Correlates with `AGENT_CHAT_SUBMIT_RESULT_EVENT` — see agent-chat.ts. */
     submitMessageId?: string;
+    /** See `AgentChatMessage.usageLabel`. */
+    usageLabel?: string;
 }
 export declare function createUserMessageRunConfig(references?: Reference[], requestMode?: AgentRequestMode, recoveryAction?: AgentRecoveryAction, trackInRunsTray?: boolean, approvedToolCalls?: string[], queuedMessageId?: string, hideUserMessage?: boolean, modelSnapshot?: {
     model?: string;
     engine?: string;
     effort?: ReasoningEffort;
-}, turnId?: string): {
+}, turnId?: string, usageLabel?: string): {
     runConfig?: {
         custom: {
             references?: Reference[];
@@ -50,6 +52,7 @@ export declare function createUserMessageRunConfig(references?: Reference[], req
             engine?: string;
             effort?: ReasoningEffort;
             turnId?: string;
+            usageLabel?: string;
         };
     };
     metadata?: {
@@ -186,6 +189,8 @@ type QueuedMessage = {
     approvedToolCalls?: string[];
     /** Preserve the logical turn when a hidden reconnect recovery is re-issued. */
     turnId?: string;
+    /** See `AgentChatMessage.usageLabel`. */
+    usageLabel?: string;
     /**
      * Model/engine/effort snapshotted at enqueue time, for the same reason
      * `requestMode` is: the picker is global and live, so a queue that flushes
@@ -283,6 +288,8 @@ export interface AssistantChatProps {
     threadId?: string;
     /** Resource scope to include with chat requests for server-side context. */
     contextScope?: ChatThreadScope | null;
+    /** Optional host-owned resource history used for chat-side reverts. */
+    chatHistory?: AssistantChatHistoryConfig<any, any>;
     /** Restrict server-side thread restores to the supplied app scope. */
     isolateHistoryByScope?: boolean;
     /** Namespace used to hide ambient composer context from other host surfaces. */