@agent-native/core 0.76.6 → 0.76.8

package/dist/client/AgentPanel.js

@@ -49,6 +49,7 @@ import { shouldParentFrameOwnAgentPanel } from "./builder-frame.js";
 import { consumeAgentSidebarUrlOpenOverride, dispatchAgentSidebarStateChange, getInitialAgentSidebarOpen, SIDEBAR_OPEN_KEY, subscribeAgentSidebarUrlChanges, } from "./agent-sidebar-state.js";
 import { AgentNativeRouteWarmup } from "./route-warmup.js";
 import { AGENT_CHAT_VIEW_TRANSITION_CLASS, getAgentChatViewTransitionStyle, } from "./chat-view-transition.js";
+import { useT } from "./i18n.js";
 // Lazy-load AgentTerminal to avoid bundling xterm.js when not needed
 const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ default: m.AgentTerminal })));
 const AGENT_PANEL_PREPARE_EVENT = "agent-panel:prepare";
@@ -298,6 +299,7 @@ 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, _jsx(IconExternalLink, { className: "h-3 w-3" })] })] })] }));
 }
 function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, restoreActiveThread = true, scope, browserTabId, threadUrlSync, chatNotice, showTabBar = true, codeAccess, ...assistantChatProps }) {
+    const t = useT();
     const mounted = useClientOnly();
     const keyPrefix = storageKey ? `:${storageKey}` : "";
     const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
@@ -471,12 +473,12 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
     const isDevFrameChatSurface = assistantChatProps.agentChatSurface === "dev-frame";
     const inferredCodeAccessEnabled = !isDevMode || isDevFrameChatSurface;
     const codeAccessEnabled = codeAccess?.enabled ?? inferredCodeAccessEnabled;
-    const codeUnavailableTitle = codeAccess?.unavailableTitle ?? "Open Desktop to edit code";
+    const codeUnavailableTitle = codeAccess?.unavailableTitle ?? t("agentPanel.openDesktopToEditCode");
     const codeUnavailableDescription = codeAccess?.unavailableDescription ??
-        "Source-code changes and CLI access are available in the Agent Native Desktop app.";
-    const codeUnavailableCtaLabel = codeAccess?.unavailableCtaLabel ?? "Download Desktop";
+        t("agentPanel.codeUnavailableDescription");
+    const codeUnavailableCtaLabel = codeAccess?.unavailableCtaLabel ?? t("agentPanel.downloadDesktop");
     const codeUnavailableCtaHref = codeAccess?.unavailableCtaHref ?? "https://www.agent-native.com/download";
-    const codeUnavailableSecondaryCtaLabel = codeAccess?.unavailableSecondaryCtaLabel ?? "Use Builder";
+    const codeUnavailableSecondaryCtaLabel = codeAccess?.unavailableSecondaryCtaLabel ?? t("agentPanel.useBuilder");
     const codeUnavailableSecondaryCtaHref = codeAccess?.unavailableSecondaryCtaHref;
     const canUseCodeTools = isDevMode && codeAccessEnabled && isDevFrameChatSurface;
     // Hide the CLI tab when embedded in the Builder.io frame — code editing
@@ -509,22 +511,26 @@ 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: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("chat"), "aria-label": "Chat mode", 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 }), "Chat"] }) }), _jsx(TooltipContent, { children: "Chat mode" })] }), showCliMode && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("cli"), "aria-label": "CLI terminal mode", className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "cli"
+                                    : "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 }), "CLI"] }) }), _jsx(TooltipContent, { className: "max-w-[260px]", children: codeAccessEnabled
-                                ? "CLI terminal mode"
-                                : codeUnavailableDescription })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": "Workspace files, agents, skills, and tasks", className: cn("agent-sidebar-hover-reveal flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
+                                    : "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"
                                     ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), "Workspace"] }) }), _jsx(TooltipContent, { children: "Workspace files, agents, skills, and tasks" })] })] }) })), [codeAccessEnabled, codeUnavailableDescription, showCliMode]);
+                                    : "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: "New chat", children: _jsx("button", { onClick: addTab, "aria-label": "New chat", 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: "New terminal", children: _jsx("button", { onClick: addCliTab, "aria-label": "New terminal", 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") &&
-                                "bg-accent text-foreground"), "aria-label": "Agent panel options", 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" }), "Collapse sidebar"] }), _jsx(DropdownMenuSeparator, {})] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: toggleHistory, children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory ? "Hide chats" : "All chats"] })), 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
+    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") &&
+                                "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(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
                                             ? "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, {})] })), _jsxs(DropdownMenuItem, { onSelect: () => switchMode("settings"), className: cn(mode === "settings" ? "font-medium" : "text-muted-foreground"), children: [_jsx(IconSettings, { size: 14, className: "shrink-0" }), "Settings"] }), _jsxs(DropdownMenuItem, { onSelect: () => setFeedbackOpen(true), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), "Feedback"] }), onToggleFullscreen && (_jsxs(DropdownMenuItem, { onSelect: onToggleFullscreen, children: [isFullscreen ? (_jsx(IconArrowsMinimize, { size: 14, className: "shrink-0" })) : (_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" })), isFullscreen ? "Exit fullscreen" : "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" }), "Close Tab", _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherTabs(activeTabId), children: "Close Other Tabs" }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllTabs(), children: ["Close All Tabs", _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] })) : (_jsxs(DropdownMenuItem, { onSelect: clearActiveTab, children: [_jsx(IconX, { size: 14, className: "shrink-0" }), "Clear chat"] }))) : (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeCliTab(activeCliTab), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), "Close Tab", _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherCliTabs(activeCliTab), children: "Close Other Tabs" }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllCliTabs(), children: ["Close All Tabs", _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] }))] }))] })] })] })), [
+                                            : "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, {})] })), _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 })] })] }))] }))] })] })] })), [
         activeCliTab,
         addCliTab,
         availableClis,
@@ -545,6 +551,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         selectedCli,
         storageKey,
         switchMode,
+        t,
     ]);
     // Ref callback: scroll the active tab into view in the overflow container.
     // Uses getBoundingClientRect for reliable positioning regardless of offsetParent.
@@ -671,9 +678,9 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                             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: "Loading terminal..." }), 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
-                            ? "CLI requires dev mode"
+                            ? t("agentPanel.cliRequiresDevMode")
                             : codeUnavailableTitle, description: codeAccessEnabled
-                            ? "Run this app locally with pnpm dev or use Builder.io to access the CLI terminal."
+                            ? t("agentPanel.cliRequiresDevModeDescription")
                             : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) }) })), mode === "settings" && (_jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" })] }), children: _jsx(SettingsPanel, { isDevMode: isDevMode, onToggleDevMode: () => setDevMode(!isDevMode), showDevToggle: showDevToggle, devAppUrl: devAppUrl, initialSection: settingsSection.section, sectionRequestKey: settingsSection.requestKey }) }) }))] }));
 }
 // ─── Resize handle ──────────────────────────────────────────────────────────
@@ -681,6 +688,7 @@ const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
 const SIDEBAR_FULLSCREEN_KEY = "agent-native-sidebar-fullscreen";
 const SIDEBAR_MIN = 280;
 const SIDEBAR_MAX = 700;
+const SIDEBAR_ANIMATION_MS = 260;
 const SIDEBAR_OVERLAY_Z_INDEX = 70;
 const SIDEBAR_FULLSCREEN_Z_INDEX = 90;
 /** Max width of the centered chat column in fullscreen mode (Claude-style). */
@@ -1047,7 +1055,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, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = false, chatViewTransition = false, storageKey, openOnChatRunning = false, onFullscreenRequest, scope, browserTabId, threadUrlSync, }) {
+export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, storageKey, openOnChatRunning = false, onFullscreenRequest, scope, browserTabId, threadUrlSync, }) {
     const initialWidth = defaultSidebarWidth ?? sidebarWidth ?? 380;
     const [open, setOpen] = useState(() => getInitialAgentSidebarOpen(defaultOpen));
     const [presentationMode, setPresentationMode] = useState(false);
@@ -1368,9 +1376,37 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     // already viewport-covering, so the maximize button is hidden and the
     // mounted state ignores any persisted value.
     const effectiveFullscreen = !onFullscreenRequest && fullscreen && !isMobile;
+    const mobileAnimationEnabled = !presentationMode && !effectiveFullscreen && isMobile && animateMobile;
+    const desktopAnimationEnabled = !presentationMode && !effectiveFullscreen && !isMobile && animateDesktop;
+    const sidebarAnimationEnabled = mobileAnimationEnabled || desktopAnimationEnabled;
+    const [renderAnimatedPanel, setRenderAnimatedPanel] = useState(shouldMountPanel);
+    useEffect(() => {
+        if (!sidebarAnimationEnabled) {
+            setRenderAnimatedPanel(shouldMountPanel);
+            return;
+        }
+        let unmountTimer;
+        if (shouldMountPanel) {
+            setRenderAnimatedPanel(true);
+        }
+        else {
+            unmountTimer = window.setTimeout(() => {
+                setRenderAnimatedPanel(false);
+            }, SIDEBAR_ANIMATION_MS);
+        }
+        return () => {
+            if (unmountTimer !== undefined) {
+                window.clearTimeout(unmountTimer);
+            }
+        };
+    }, [shouldMountPanel, sidebarAnimationEnabled]);
+    const shouldRenderPanel = sidebarAnimationEnabled
+        ? renderAnimatedPanel
+        : shouldMountPanel;
+    const panelOpen = open && shouldMountPanel;
     // On desktop the resize handle is also the visual divider. Avoid painting a
     // second panel border next to it.
-    const showResizeHandle = !isMobile && !effectiveFullscreen && open;
+    const showResizeHandle = !isMobile && !effectiveFullscreen && panelOpen;
     // On mobile the sidebar floats as a fixed overlay so the content below isn't
     // squashed. On desktop it participates in the flex layout as before, except
     // in fullscreen mode where it overlays the entire viewport (Claude-style).
@@ -1389,14 +1425,9 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             background: "hsl(var(--background))",
             borderLeft: isLeft ? "none" : "1px solid hsl(var(--border))",
             borderRight: isLeft ? "1px solid hsl(var(--border))" : "none",
-            display: animateMobile || open ? "flex" : "none",
-            transform: animateMobile
-                ? open
-                    ? "translateX(0)"
-                    : `translateX(${isLeft ? "-" : ""}calc(100% + 1px))`
-                : undefined,
-            pointerEvents: animateMobile && !open ? "none" : undefined,
-            willChange: animateMobile ? "transform" : undefined,
+            display: mobileAnimationEnabled || panelOpen ? "flex" : "none",
+            "--agent-sidebar-closed-transform": `translateX(${isLeft ? "-" : ""}calc(100% + 1px))`,
+            pointerEvents: mobileAnimationEnabled && !panelOpen ? "none" : undefined,
         };
     }
     else if (effectiveFullscreen) {
@@ -1414,22 +1445,32 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     else {
         panelStyle = {
             ...AGENT_PANEL_ROOT_STYLE,
-            width,
+            "--agent-sidebar-width": `${width}px`,
+            width: desktopAnimationEnabled ? undefined : width,
             maxHeight: "100vh",
-            borderLeft: isLeft || showResizeHandle ? "none" : "1px solid hsl(var(--border))",
-            borderRight: !isLeft || showResizeHandle ? "none" : "1px solid hsl(var(--border))",
-            display: open ? "flex" : "none",
+            borderLeft: !panelOpen || isLeft || showResizeHandle
+                ? "none"
+                : "1px solid hsl(var(--border))",
+            borderRight: !panelOpen || !isLeft || showResizeHandle
+                ? "none"
+                : "1px solid hsl(var(--border))",
+            display: desktopAnimationEnabled || panelOpen ? "flex" : "none",
+            minWidth: desktopAnimationEnabled ? 0 : undefined,
+            pointerEvents: desktopAnimationEnabled && !panelOpen ? "none" : undefined,
         };
     }
     // Mount the live chat surface only while visible or actively needed. Keeping
     // it mounted while closed starts app-state polling on every public page view.
-    const sidebar = shouldMountPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag })), _jsx("div", { className: cn("agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, animateMobile &&
-                    isMobile &&
-                    "shadow-2xl transition-transform duration-[260ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none"), style: chatViewTransition
+    const sidebar = shouldRenderPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag })), _jsx("div", { className: cn("agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, mobileAnimationEnabled && "shadow-2xl"), "data-agent-sidebar-animation": mobileAnimationEnabled
+                    ? "mobile"
+                    : desktopAnimationEnabled
+                        ? "desktop"
+                        : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", style: chatViewTransition
                     ? getAgentChatViewTransitionStyle(panelStyle)
-                    : panelStyle, inert: isMobile && !open ? true : undefined, "aria-hidden": isMobile && !open ? true : undefined, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : (onFullscreenRequest ?? toggleFullscreen), storageKey: storageKey, scope: scope, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] })) : null;
-    return (_jsxs("div", { className: "flex min-w-0 flex-1 h-screen overflow-hidden", children: [_jsx(AgentNativeRouteWarmup, {}), isMobile && !presentationMode && (animateMobile || open) && (_jsx("div", { className: cn("fixed inset-0 bg-black/40", animateMobile &&
-                    "transition-opacity duration-200 motion-reduce:transition-none", animateMobile && !open && "pointer-events-none opacity-0", animateMobile && open && "opacity-100"), style: { zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }, onClick: () => setOpenPersisted(false) })), shouldMountPanel ? _jsx(URLSync, { browserTabId: browserTabId }) : null, isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "flex flex-1 flex-col overflow-auto min-w-0", children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? sidebar : null] }));
+                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : (onFullscreenRequest ?? toggleFullscreen), storageKey: storageKey, scope: scope, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] })) : null;
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 h-screen overflow-hidden", 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: "flex flex-1 flex-col overflow-auto min-w-0", children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? sidebar : null] }));
 }
 /**
  * Focus the agent chat composer input.