@agent-native/core 0.145.5 → 0.145.7

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, IconArrowsMaximize, IconArrowsMinimize, IconExternalLink, } from "@tabler/icons-react";
+import { IconMessageCircle, IconMessageDots, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsHorizontal, IconArrowsMaximize, IconArrowsMinimize, IconExternalLink, } from "@tabler/icons-react";
 import React, { useState, useEffect, useRef, useCallback, useMemo, lazy, Suspense, startTransition, } from "react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "./components/ui/dropdown-menu.js";
 import { normalizeTooltipText } from "./components/ui/tooltip.js";
@@ -40,13 +40,13 @@ const MultiTabAssistantChatLazy = lazy(() => import("./MultiTabAssistantChat.js"
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link, useLocation, useNavigate } from "react-router";
 import { withBuilderUtmTrackingParams } from "../shared/builder-link-tracking.js";
-import { consumeAgentSidebarUrlOpenOverride, dispatchAgentSidebarStateChange, getInitialAgentSidebarOpen, setAgentSidebarOpenPreference, subscribeAgentSidebarUrlChanges, SIDEBAR_STATE_CHANGE_EVENT, } from "./agent-sidebar-state.js";
+import { AGENT_SIDEBAR_MIN_WIDTH, consumeAgentSidebarUrlOpenOverride, clampAgentSidebarWidth, dispatchAgentSidebarStateChange, getAgentSidebarMaxWidth, getInitialAgentSidebarOpen, getAgentSidebarWideWidth, setAgentSidebarOpenPreference, subscribeAgentSidebarUrlChanges, SIDEBAR_STATE_CHANGE_EVENT, } from "./agent-sidebar-state.js";
 import { trackEvent } from "./analytics.js";
 import { agentNativePath, appPath, isWorkspaceAppPath } from "./api-path.js";
 import { readClientAppState } from "./application-state.js";
 import { assistantUiRecoverableRenderErrorKind } from "./assistant-ui-recovery.js";
 import { shouldParentFrameOwnAgentPanel } from "./builder-frame.js";
-import { AGENT_CHAT_VIEW_TRANSITION_CLASS, getAgentChatViewTransitionStyle, } from "./chat-view-transition.js";
+import { AGENT_CHAT_VIEW_TRANSITION_CLASS, getAgentChatViewTransitionStyle, startAgentChatViewTransition, } from "./chat-view-transition.js";
 import { fetchBuilderStatus } from "./client-status-requests.js";
 import { RealtimeVoiceModeProvider } from "./composer/index.js";
 import { getFramePostMessageTargetOrigin, isTrustedFrameMessage, } from "./frame.js";
@@ -388,7 +388,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 })] })] }));
 }
-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, chatOnly = false, agentPageHref, codeAccess, ...assistantChatProps }) {
+function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, onSnapTo75Percent, isWideDrawer, onExitWideDrawer, devAppUrl, storageKey, restoreActiveThread = true, scope, showScopeBadge, browserTabId, threadUrlSync, chatNotice, showTabBar = true, showPageNewChatButton = false, allowSettingsMode = true, chatOnly = false, agentPageHref, codeAccess, ...assistantChatProps }) {
     const t = useT();
     const navigate = useNavigate();
     const mounted = useClientOnly();
@@ -405,6 +405,8 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
     const closeTabHint = isMac ? "\u2303W" : "Alt+W";
     const closeAllTabsHint = isMac ? "\u2303\u2325W" : "Ctrl+Alt+W";
     const toggleSidebarHint = isMac ? "\u2318\\" : "Ctrl+\\";
+    const widenChatHint = isMac ? "\u2318\u21e7\\" : "Ctrl+Shift+\\";
+    const fullscreenHint = isMac ? "\u2318\u21e7F" : "Ctrl+Shift+F";
     const [execMode, setExecMode] = useState(() => {
         try {
             const saved = localStorage.getItem(execModeKey);
@@ -646,6 +648,33 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         url.searchParams.set("thread", threadId);
         return url.toString();
     }, [threadUrlSync]);
+    const wideDrawerAction = isWideDrawer ? onExitWideDrawer : onSnapTo75Percent;
+    const wideDrawerLabel = t(isWideDrawer ? "agentPanel.returnChatToLayout" : "agentPanel.widenChat");
+    const showFullViewAction = Boolean(agentPageHref &&
+        shouldShowAgentPanelFullViewAction(agentPageHref, mode, chatOnly));
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!(event.metaKey || event.ctrlKey) ||
+                !event.shiftKey ||
+                event.altKey) {
+                return;
+            }
+            if (event.code === "Backslash" &&
+                onCollapse &&
+                mode === "chat" &&
+                wideDrawerAction) {
+                event.preventDefault();
+                wideDrawerAction();
+                return;
+            }
+            if (event.code === "KeyF" && onToggleFullscreen) {
+                event.preventDefault();
+                onToggleFullscreen();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [mode, onCollapse, onToggleFullscreen, wideDrawerAction]);
     const renderHeaderActions = useCallback(({ activeChatSessionId, activeTabId, activeTabMessageCount, addTab, clearActiveTab, closeAllTabs, closeOtherTabs, closeTab, showHistory, tabs, toggleHistory, }) => (_jsxs("div", { className: "relative flex shrink-0 items-center gap-0.5", children: [!onCollapse && SHOW_ONBOARDING && (_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) })), !onCollapse &&
                 (() => {
                     const activeTab = mode === "chat" && activeChatSessionId
@@ -656,9 +685,12 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                         return null;
                     }
                     return (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "icon", triggerClassName: "h-7 w-7" }));
-                })(), 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 }) }) })), agentPageHref &&
-                shouldShowAgentPanelFullViewAction(agentPageHref, mode, chatOnly) && (_jsx(IconTooltip, { content: t("agentPanel.openFullView"), children: _jsx(Link, { to: agentPageHref, "aria-label": t("agentPanel.openFullView"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground", children: _jsx(IconArrowsMaximize, { size: 14 }) }) })), _jsxs(DropdownMenu, { open: headerMenuOpen, onOpenChange: setHeaderMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", (headerMenuOpen || mode === "settings") &&
-                                "bg-accent text-foreground"), "aria-label": t("agentPanel.panelOptions"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-48", children: [onCollapse && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: onCollapse, children: [_jsx(IconLayoutSidebarRightCollapse, { size: 14, className: "shrink-0" }), t("agentPanel.collapseSidebar"), _jsx(DropdownMenuShortcut, { children: toggleSidebarHint })] }), _jsx(DropdownMenuSeparator, {})] })), onCollapse && mode === "chat" && (_jsxs(DropdownMenuItem, { onSelect: addTab, children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), t("agentPanel.newChat")] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: toggleHistory, children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
+                })(), feedbackEnabled ? (_jsx(FeedbackButton, { variant: "icon", side: "bottom", align: "end", chatSessionId: activeChatSessionId, chatStorageKey: storageKey, open: feedbackOpen, onOpenChange: setFeedbackOpen, trigger: _jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute end-0 top-full h-px w-px opacity-0" }) })) : null, mode === "chat" && (_jsx(IconTooltip, { content: t("agentPanel.newChat"), children: _jsx("button", { onClick: addTab, "aria-label": t("agentPanel.newChat"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), !onCollapse && mode === "cli" && canUseCodeTools && (_jsx(IconTooltip, { content: t("agentPanel.newTerminal"), children: _jsx("button", { onClick: addCliTab, "aria-label": t("agentPanel.newTerminal"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), _jsxs(DropdownMenu, { open: headerMenuOpen, onOpenChange: setHeaderMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", (headerMenuOpen || mode === "settings") &&
+                                "bg-accent text-foreground"), "aria-label": t("agentPanel.panelOptions"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-48", children: [onCollapse && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: onCollapse, children: [_jsx(IconLayoutSidebarRightCollapse, { size: 14, className: "shrink-0" }), t("agentPanel.collapseSidebar"), _jsx(DropdownMenuShortcut, { children: toggleSidebarHint })] }), _jsx(DropdownMenuSeparator, {})] })), onCollapse && mode === "chat" && wideDrawerAction ? (_jsxs(DropdownMenuItem, { onSelect: wideDrawerAction, children: [_jsx(IconArrowsHorizontal, { size: 14, className: "shrink-0" }), wideDrawerLabel, _jsx(DropdownMenuShortcut, { children: widenChatHint })] })) : null, showFullViewAction && agentPageHref ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(Link, { to: agentPageHref, "aria-label": t("agentPanel.openFullView"), children: [_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" }), t("agentPanel.openFullView")] }) })) : null, 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"), _jsx(DropdownMenuShortcut, { children: fullscreenHint })] })), (onCollapse && mode === "chat" && wideDrawerAction) ||
+                                showFullViewAction ||
+                                onToggleFullscreen ? (_jsx(DropdownMenuSeparator, {})) : null, onCollapse && mode === "chat" && (_jsxs(DropdownMenuItem, { onSelect: addTab, children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), t("agentPanel.newChat")] })), 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: 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"
@@ -667,9 +699,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                                     // teardown, otherwise it can immediately dismiss the Popover we're
                                     // opening in the same tick (Radix nested-overlay race).
                                     setTimeout(() => setFeedbackOpen(true), 0);
-                                }, children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), t("agentPanel.feedback")] })) : null, 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) ||
+                                }, 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,
@@ -686,9 +716,12 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         getChatThreadShareUrl,
         headerMenuOpen,
         isFullscreen,
+        isWideDrawer,
         mode,
         agentPageHref,
         onCollapse,
+        onExitWideDrawer,
+        onSnapTo75Percent,
         onToggleFullscreen,
         openRunThread,
         selectCli,
@@ -696,6 +729,11 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
         storageKey,
         switchMode,
         t,
+        wideDrawerAction,
+        wideDrawerLabel,
+        widenChatHint,
+        fullscreenHint,
+        showFullViewAction,
     ]);
     const renderPageChatOverlay = useCallback(({ activeTabId, activeTabMessageCount, addTab, tabs, }) => {
         if (!shouldShowAgentPanelPageNewChatButton(tabs, activeTabId, activeTabMessageCount)) {
@@ -902,11 +940,13 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
 // ─── Resize handle ──────────────────────────────────────────────────────────
 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_DRAWER_KEY = "agent-native-sidebar-wide-drawer";
+const SIDEBAR_DRAWER_PLACEHOLDER_KEY = "agent-native-sidebar-drawer-placeholder-width";
 const SIDEBAR_ANIMATION_MS = 260;
 const SIDEBAR_OVERLAY_Z_INDEX = 70;
+const SIDEBAR_DRAWER_Z_INDEX = 80;
 const SIDEBAR_FULLSCREEN_Z_INDEX = 90;
+const SIDEBAR_DRAWER_VIEW_TRANSITION_NAME = "agent-native-sidebar-drawer";
 /** Shared max width of the centered fullscreen chat column and composer. */
 const FULLSCREEN_CHAT_COLUMN_MAX_PX = 684;
 export function getActiveTabScrollDelta(containerRect, tabRect, margin = 24) {
@@ -1333,6 +1373,31 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     const [open, setOpen] = useState(() => openOnChatRunning || getInitialAgentSidebarOpen(defaultOpen, storageKey));
     const [presentationMode, setPresentationMode] = useState(false);
     const [width, setWidth] = useState(initialWidth);
+    const [isWideDrawer, setIsWideDrawer] = useState(() => {
+        if (typeof window === "undefined")
+            return false;
+        try {
+            return localStorage.getItem(SIDEBAR_DRAWER_KEY) === "true";
+        }
+        catch {
+            // coercion-ok: the drawer defaults to the normal inline presentation when storage is unavailable.
+            return false;
+        }
+    });
+    const [drawerPlaceholderWidth, setDrawerPlaceholderWidth] = useState(() => {
+        const fallback = Number.isFinite(initialWidth) ? initialWidth : 380;
+        try {
+            const saved = localStorage.getItem(SIDEBAR_DRAWER_PLACEHOLDER_KEY);
+            const parsed = saved ? Number.parseInt(saved, 10) : Number.NaN;
+            if (Number.isFinite(parsed))
+                return clampAgentSidebarWidth(parsed);
+        }
+        catch {
+            // coercion-ok: the normal sidebar width is a safe placeholder fallback.
+        }
+        return clampAgentSidebarWidth(fallback);
+    });
+    const drawerExitTimerRef = useRef(null);
     const [isResizing, setIsResizing] = useState(false);
     const [fullscreen, setFullscreen] = useState(() => {
         // Force-disable on mobile: a Claude-style centered column makes no sense
@@ -1361,13 +1426,18 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         try {
             const saved = localStorage.getItem(SIDEBAR_STORAGE_KEY);
             if (saved) {
-                const n = parseInt(saved, 10);
-                if (n >= SIDEBAR_MIN && n <= SIDEBAR_MAX)
-                    setWidth(n);
+                const n = Number.parseInt(saved, 10);
+                if (Number.isFinite(n))
+                    setWidth(clampAgentSidebarWidth(n));
             }
         }
         catch { }
     }, []);
+    useEffect(() => () => {
+        if (drawerExitTimerRef.current !== null) {
+            clearTimeout(drawerExitTimerRef.current);
+        }
+    }, []);
     const setOpenPersisted = useCallback((next) => {
         setOpen((prev) => {
             const value = typeof next === "function" ? next(prev) : next;
@@ -1553,7 +1623,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
                 return;
             if (event.source !== window.parent || !isTrustedFrameMessage(event))
                 return;
-            const { mode, appMode, width: frameWidth, open: frameOpen, } = event.data.data || {};
+            const { mode, appMode, width: frameWidth, open: frameOpen, wide: frameWide, placeholderWidth: framePlaceholderWidth, } = event.data.data || {};
             if (mode === "code") {
                 // Frame is showing its own sidebar — hide the app's
                 setFrameCodeMode(true);
@@ -1567,11 +1637,21 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
                 setFrameSidebarOpen(false);
                 setHasFrameSidebarState(true);
                 setOpenPersisted(frameOpen !== false);
-                if (frameWidth &&
-                    frameWidth >= SIDEBAR_MIN &&
-                    frameWidth <= SIDEBAR_MAX) {
+                if (typeof frameWidth === "number" &&
+                    Number.isFinite(frameWidth) &&
+                    frameWidth >= AGENT_SIDEBAR_MIN_WIDTH &&
+                    frameWidth <= getAgentSidebarMaxWidth()) {
                     setWidth(frameWidth);
                 }
+                if (frameWide === true || frameWide === false) {
+                    setIsWideDrawer(frameWide);
+                    if (typeof framePlaceholderWidth === "number" &&
+                        Number.isFinite(framePlaceholderWidth) &&
+                        framePlaceholderWidth >= AGENT_SIDEBAR_MIN_WIDTH &&
+                        framePlaceholderWidth <= getAgentSidebarMaxWidth()) {
+                        setDrawerPlaceholderWidth(framePlaceholderWidth);
+                    }
+                }
                 // Sync the panel mode from frame tab selection
                 if (appMode === "cli" ||
                     appMode === "resources" ||
@@ -1638,7 +1718,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     }, []);
     const handleDrag = useCallback((delta) => {
         setWidth((prev) => {
-            const next = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, prev + delta));
+            const next = clampAgentSidebarWidth(prev + delta);
             try {
                 localStorage.setItem(SIDEBAR_STORAGE_KEY, String(next));
             }
@@ -1646,6 +1726,46 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             return next;
         });
     }, []);
+    const snapTo75Percent = useCallback(() => {
+        if (drawerExitTimerRef.current !== null) {
+            clearTimeout(drawerExitTimerRef.current);
+            drawerExitTimerRef.current = null;
+        }
+        const next = getAgentSidebarWideWidth();
+        const placeholder = isWideDrawer ? drawerPlaceholderWidth : width;
+        const apply = () => {
+            setDrawerPlaceholderWidth(placeholder);
+            setIsWideDrawer(true);
+            setWidth(next);
+            try {
+                localStorage.setItem(SIDEBAR_STORAGE_KEY, String(next));
+                localStorage.setItem(SIDEBAR_DRAWER_KEY, "true");
+                localStorage.setItem(SIDEBAR_DRAWER_PLACEHOLDER_KEY, String(placeholder));
+                // coercion-ok: the drawer remains applied in memory when storage is unavailable.
+            }
+            catch { }
+        };
+        startAgentChatViewTransition(apply);
+    }, [drawerPlaceholderWidth, isWideDrawer, width]);
+    const exitWideDrawer = useCallback(() => {
+        if (!isWideDrawer || drawerExitTimerRef.current !== null)
+            return;
+        const next = drawerPlaceholderWidth;
+        const apply = () => {
+            setWidth(next);
+            try {
+                localStorage.setItem(SIDEBAR_STORAGE_KEY, String(next));
+                localStorage.setItem(SIDEBAR_DRAWER_KEY, "false");
+                // coercion-ok: the normal sidebar remains applied in memory when storage is unavailable.
+            }
+            catch { }
+            drawerExitTimerRef.current = setTimeout(() => {
+                drawerExitTimerRef.current = null;
+                setIsWideDrawer(false);
+            }, SIDEBAR_ANIMATION_MS + 32);
+        };
+        startAgentChatViewTransition(apply);
+    }, [drawerPlaceholderWidth, isWideDrawer]);
     const handleResizeStart = useCallback(() => setIsResizing(true), []);
     const handleResizeEnd = useCallback(() => setIsResizing(false), []);
     const isLeft = position === "left";
@@ -1653,6 +1773,7 @@ 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 wideDrawerEnabled = isWideDrawer && !isMobile && !effectiveFullscreen;
     const mobileAnimationEnabled = !presentationMode && !effectiveFullscreen && isMobile && animateMobile;
     const desktopAnimationEnabled = !presentationMode && !effectiveFullscreen && !isMobile && animateDesktop;
     const sidebarAnimationEnabled = mobileAnimationEnabled || desktopAnimationEnabled;
@@ -1685,10 +1806,12 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         ? "mobile"
         : effectiveFullscreen
             ? "fullscreen"
-            : "desktop";
+            : wideDrawerEnabled
+                ? "drawer"
+                : "desktop";
     // On desktop the resize handle is also the visual divider. Avoid painting a
     // second panel border next to it.
-    const showResizeHandle = !isMobile && !effectiveFullscreen && panelOpen;
+    const showResizeHandle = !isMobile && !effectiveFullscreen && !wideDrawerEnabled && 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).
@@ -1725,6 +1848,25 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             display: open ? "flex" : "none",
         };
     }
+    else if (wideDrawerEnabled) {
+        panelStyle = {
+            ...AGENT_PANEL_ROOT_STYLE,
+            position: "fixed",
+            top: 0,
+            [isLeft ? "left" : "right"]: 0,
+            height: "100%",
+            width,
+            maxWidth: "100vw",
+            maxHeight: "var(--agent-native-viewport-height, 100vh)",
+            zIndex: SIDEBAR_DRAWER_Z_INDEX,
+            "--agent-sidebar-background": "var(--agent-native-lower-surface, hsl(var(--background)))",
+            background: "var(--agent-sidebar-background)",
+            borderLeft: isLeft ? "none" : "1px solid hsl(var(--border))",
+            borderRight: isLeft ? "1px solid hsl(var(--border))" : "none",
+            display: "flex",
+            viewTransitionName: SIDEBAR_DRAWER_VIEW_TRANSITION_NAME,
+        };
+    }
     else {
         panelStyle = {
             ...AGENT_PANEL_ROOT_STYLE,
@@ -1743,25 +1885,29 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             display: desktopAnimationEnabled || panelOpen ? "flex" : "none",
             minWidth: desktopAnimationEnabled ? 0 : undefined,
             pointerEvents: desktopAnimationEnabled && !panelOpen ? "none" : undefined,
+            viewTransitionName: SIDEBAR_DRAWER_VIEW_TRANSITION_NAME,
         };
     }
     // 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 = shouldRenderPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd })), _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-layout": panelLayout, "data-agent-sidebar-position": position, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
+    const sidebar = shouldRenderPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd })), _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": wideDrawerEnabled
+                    ? "drawer"
+                    : mobileAnimationEnabled
+                        ? "mobile"
+                        : desktopAnimationEnabled
+                            ? "desktop"
+                            : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": position, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
                     ? getAgentChatViewTransitionStyle(panelStyle)
-                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : (onFullscreenRequest ?? toggleFullscreen), storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
+                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : (onFullscreenRequest ?? toggleFullscreen), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
+    const drawerPlaceholder = wideDrawerEnabled && !presentationMode && shouldRenderPanel ? (_jsx("div", { "aria-hidden": "true", className: "agent-sidebar-drawer-placeholder shrink-0", "data-agent-sidebar-placeholder": "true", style: { width: drawerPlaceholderWidth + 1 } })) : null;
     return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [showFirstRunOnboarding && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": position, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [isMobile &&
                             !presentationMode &&
-                            (mobileAnimationEnabled ? shouldRenderPanel : open) && (_jsx("div", { className: cn("agent-sidebar-backdrop fixed inset-0 bg-foreground/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 &&
+                            (mobileAnimationEnabled ? shouldRenderPanel : open) && (_jsx("div", { className: cn("agent-sidebar-backdrop fixed inset-0 bg-foreground/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, isLeft && !presentationMode ? drawerPlaceholder : 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
                                 ? "open"
-                                : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? sidebar : null] })] }) }));
+                                : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? drawerPlaceholder : null, !isLeft && !presentationMode ? sidebar : null] })] }) }));
 }
 /**
  * Focus the agent chat composer input.

package/dist/client/AssistantChat.d.ts

@@ -288,6 +288,8 @@ export interface AssistantChatProps {
     composerDisabledPlaceholder?: string;
     /** When true, skip the restore skeleton (used for freshly created threads with no messages) */
     isNewThread?: boolean;
+    /** Defer restore until the owning thread list has reconciled the active id. */
+    isThreadStateLoading?: boolean;
     /** Called when a slash command (e.g. /clear, /help) is executed */
     onSlashCommand?: (command: string) => void;
     /** Current execution mode (build/plan) */

package/dist/client/AssistantChat.js

@@ -1346,7 +1346,7 @@ export function useAutoResumeStatus(tabId, forceStopped) {
     }, [clearAutoResume, forceStopped]);
     return { isAutoResuming, clearAutoResume };
 }
-const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, dynamicSuggestions, threadFooterSlot, emptyStateAddon, showHeader = true, onSwitchToCli, className, apiUrl, tabId, browserTabId, threadId, contextScope, isActiveComposer = true, onMessageCountChange, onSaveThread, onGenerateTitle, composerSlot, onComposerTextChange, composerAreaClassName, composerPlaceholder, missingApiKeySetupLayout = "default", composerLayoutVariant = "default", centerComposerWhenEmpty = false, emptyStateDisplay = "default", composerToolbarSlot, composerExtraActionButton, composerDisabled = false, composerDisabledPlaceholder, isNewThread, onSlashCommand, execMode, onExecModeChange, approvalActions, planModeDisabled, planModeDisabledReason, selectedModel, defaultModel, selectedEngine, selectedEffort, availableModels, modelListLoading, onModelChange, onEffortChange, imageModelMenu, onForkChat, onConnectProvider, onConnectLocalRuntime, plusMenuMode = "full", providerStatusChecksEnabled = true, loadHistoryRepository, historyReloadKey, externalStreaming = false, agentChatSurface = "app", }, ref) {
+const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, dynamicSuggestions, threadFooterSlot, emptyStateAddon, showHeader = true, onSwitchToCli, className, apiUrl, tabId, browserTabId, threadId, contextScope, isActiveComposer = true, onMessageCountChange, onSaveThread, onGenerateTitle, composerSlot, onComposerTextChange, composerAreaClassName, composerPlaceholder, missingApiKeySetupLayout = "default", composerLayoutVariant = "default", centerComposerWhenEmpty = false, emptyStateDisplay = "default", composerToolbarSlot, composerExtraActionButton, composerDisabled = false, composerDisabledPlaceholder, isNewThread, isThreadStateLoading, onSlashCommand, execMode, onExecModeChange, approvalActions, planModeDisabled, planModeDisabledReason, selectedModel, defaultModel, selectedEngine, selectedEffort, availableModels, modelListLoading, onModelChange, onEffortChange, imageModelMenu, onForkChat, onConnectProvider, onConnectLocalRuntime, plusMenuMode = "full", providerStatusChecksEnabled = true, loadHistoryRepository, historyReloadKey, externalStreaming = false, agentChatSurface = "app", }, ref) {
     const thread = useThread();
     const threadRuntime = useThreadRuntime();
     const composerRuntime = useComposerRuntime();
@@ -2494,6 +2494,8 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // first, so what the user sees in the chat panel always matches what the
     // history list (and the agent) sees on disk.
     useEffect(() => {
+        if (isThreadStateLoading)
+            return;
         if (hasRestoredRef.current)
             return;
         hasRestoredRef.current = true;
@@ -2613,6 +2615,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         reconnectActiveRunForThread,
         loadHistoryRepository,
         isNewThread,
+        isThreadStateLoading,
     ]);
     useEffect(() => {
         if (!loadHistoryRepository ||

package/dist/client/ConnectBuilderCard.js

@@ -31,19 +31,14 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
         popupUrl: initialConnectUrl,
         trackingSource: "connect_builder_card",
     });
-    // Only use the server-rendered props until the hook's first status
-    // fetch returns. After that, the hook is authoritative — including for
-    // the disconnect case (where `flow.configured` flips back to `false`
-    // even though `initialConfigured` was `true` at render time).
-    const configured = flow.hasFetchedStatus
-        ? flow.configured
-        : initialConfigured;
-    const builderEnabled = flow.hasFetchedStatus
+    // Keep the server-rendered handoff state until a successful status response
+    // arrives. A transient status failure must not replace a valid Send CTA with
+    // the hook's initial disconnected defaults.
+    const configured = flow.statusResolved ? flow.configured : initialConfigured;
+    const builderEnabled = flow.statusResolved
         ? flow.builderEnabled
         : initialBuilderEnabled;
-    const orgName = flow.hasFetchedStatus
-        ? flow.orgName
-        : (initialOrgName ?? null);
+    const orgName = flow.statusResolved ? flow.orgName : (initialOrgName ?? null);
     const connecting = flow.connecting;
     const [waitlistJoined, setWaitlistJoined] = useState(false);
     const [joiningWaitlist, setJoiningWaitlist] = useState(false);

package/dist/client/MultiTabAssistantChat.js

@@ -1780,7 +1780,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
                                         else {
                                             chatRefs.current.delete(tabId);
                                         }
-                                    }, threadId: tabId, tabId: tabId, browserTabId: browserTabId, isActiveComposer: tabId === activeThreadId, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId) || isNewThread(tabId), onMessageCountChange: (count) => setMessageCounts((prev) => prev[tabId] === count
+                                    }, threadId: tabId, tabId: tabId, browserTabId: browserTabId, isActiveComposer: tabId === activeThreadId, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId) || isNewThread(tabId), isThreadStateLoading: isLoading, onMessageCountChange: (count) => setMessageCounts((prev) => prev[tabId] === count
                                         ? prev
                                         : { ...prev, [tabId]: count }), onSaveThread: handleSaveThread, onGenerateTitle: handleGenerateTitle, onSlashCommand: handleSlashCommand, selectedModel: modelSelection?.model, selectedEngine: modelSelection?.engine, selectedEffort: modelSelection?.effort ?? DEFAULT_REASONING_EFFORT, composerSlot: props.composerSlot, defaultModel: defaultModel, availableModels: availableModels, modelListLoading: modelListLoading, onModelChange: handleModelChange, onEffortChange: handleEffortChange, onForkChat: () => handleForkChat(tabId), 
                                     // Sub-agent tabs are read-only: sending a new message from the

package/dist/client/RuntimeConfigNotice.d.ts

@@ -0,0 +1 @@
+export declare function RuntimeConfigNotice(): import("react").JSX.Element | null;

package/dist/client/RuntimeConfigNotice.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconAlertCircle, IconAlertTriangle, IconCheck, IconChevronDown, IconChevronUp, IconCopy, } from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+import { parseRuntimeConfigReport, } from "../shared/runtime-config.js";
+import { agentNativePath } from "./api-path.js";
+import { writeClipboardText } from "./clipboard.js";
+import { useT } from "./i18n.js";
+function injectedAppConfig() {
+    return typeof __AGENT_NATIVE_APP_CONFIG__ === "undefined"
+        ? {}
+        : __AGENT_NATIVE_APP_CONFIG__;
+}
+function configurationUrl(config) {
+    const params = new URLSearchParams({ configuration: "1" });
+    const requiredEnv = config.runtime?.environment?.required ?? [];
+    if (requiredEnv.length > 0)
+        params.set("requiredEnv", requiredEnv.join(","));
+    if (config.runtime?.auth?.enabled === false)
+        params.set("auth", "0");
+    if (config.runtime?.database?.required === false) {
+        params.set("database", "0");
+    }
+    return agentNativePath("/_agent-native/ping") + "?" + params.toString();
+}
+export function RuntimeConfigNotice() {
+    const t = useT();
+    const [report, setReport] = useState(null);
+    const [expanded, setExpanded] = useState(false);
+    const [copyState, setCopyState] = useState("idle");
+    const config = useMemo(injectedAppConfig, []);
+    useEffect(() => {
+        if (typeof window.fetch !== "function")
+            return;
+        const controller = new AbortController();
+        let active = true;
+        const timeout = window.setTimeout(() => controller.abort(), 5000);
+        window
+            .fetch(configurationUrl(config), {
+            headers: { accept: "application/json" },
+            signal: controller.signal,
+        })
+            .then(async (response) => {
+            if (!response.ok) {
+                throw new Error("configuration probe: " + response.status);
+            }
+            return (await response.json());
+        })
+            .then((body) => {
+            if (!active)
+                return;
+            const next = parseRuntimeConfigReport(body.configuration);
+            if (next && !next.ok)
+                setReport(next);
+        })
+            .catch(() => {
+            // The notice is an enhancement. A missing optional probe must not
+            // become a false "configuration is healthy" result.
+        })
+            .finally(() => window.clearTimeout(timeout));
+        return () => {
+            active = false;
+            controller.abort();
+            window.clearTimeout(timeout);
+        };
+    }, [config]);
+    if (!report)
+        return null;
+    const currentReport = report;
+    const isError = currentReport.status === "error";
+    const Icon = isError ? IconAlertCircle : IconAlertTriangle;
+    const issueCount = t("runtimeConfig.issue", {
+        count: currentReport.issues.length,
+    });
+    const tone = isError
+        ? "border-destructive/40 bg-destructive/10 text-destructive"
+        : "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300";
+    async function copyPrompt() {
+        const copied = await writeClipboardText(currentReport.prompt);
+        setCopyState(copied ? "copied" : "failed");
+        window.setTimeout(() => setCopyState("idle"), 2500);
+    }
+    return (_jsxs("aside", { "aria-label": isError
+            ? t("runtimeConfig.errorTitle")
+            : t("runtimeConfig.warningTitle"), className: "fixed bottom-4 right-4 z-[1000] w-[min(calc(100vw-2rem),26rem)] rounded-lg border shadow-lg backdrop-blur " +
+            tone, "data-testid": "runtime-config-notice", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0" }), _jsxs("button", { type: "button", className: "min-w-0 flex-1 truncate text-left text-xs font-medium", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [isError
+                                ? t("runtimeConfig.errorTitle")
+                                : t("runtimeConfig.warningTitle"), _jsxs("span", { className: "ms-1 font-normal opacity-80", children: ["(", issueCount, ")"] })] }), _jsx("button", { type: "button", className: "inline-flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-black/5 dark:hover:bg-white/10", "aria-label": expanded
+                            ? t("runtimeConfig.hideDetails")
+                            : t("runtimeConfig.showDetails"), onClick: () => setExpanded((value) => !value), children: expanded ? (_jsx(IconChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(IconChevronDown, { "aria-hidden": "true", className: "size-4" })) })] }), expanded ? (_jsxs("div", { className: "space-y-2 border-t border-current/15 px-3 py-3 text-xs", children: [_jsx("ul", { className: "space-y-2", children: currentReport.issues.map((issue) => (_jsxs("li", { children: [_jsx("p", { className: "font-medium", children: issue.title }), _jsx("p", { className: "mt-0.5 opacity-85", children: issue.message }), issue.envKeys.length > 0 ? (_jsx("p", { className: "mt-1 font-mono text-[10px] opacity-75", children: issue.envKeys.join(", ") })) : null] }, issue.code + ":" + issue.envKeys.join(",")))) }), _jsxs("button", { type: "button", className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-current/25 bg-background/70 px-2.5 font-medium text-foreground transition hover:bg-background", onClick: () => void copyPrompt(), children: [copyState === "copied" ? (_jsx(IconCheck, { "aria-hidden": "true", className: "size-3.5" })) : (_jsx(IconCopy, { "aria-hidden": "true", className: "size-3.5" })), copyState === "copied"
+                                ? t("runtimeConfig.copied")
+                                : copyState === "failed"
+                                    ? t("runtimeConfig.copyFailed")
+                                    : t("runtimeConfig.copyPrompt")] })] })) : null] }));
+}

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

@@ -33,7 +33,7 @@ export { AgentTabsPage, type AgentPageExtraTabContext, type AgentPageExtraTabFac
 export type { AgentPageScope, AgentPageTabProps } from "../agent-page/types.js";
 export { AGENT_CHAT_HOME_HANDOFF_TTL_MS, AGENT_CHAT_VIEW_TRANSITION_CLASS, AGENT_CHAT_VIEW_TRANSITION_NAME, consumeAgentChatHomeHandoff, getAgentChatViewTransitionStyle, isAgentChatHomeHandoffActive, markAgentChatHomeHandoff, navigateWithAgentChatViewTransition, startAgentChatViewTransition, supportsAgentChatViewTransition, type AgentChatHomeHandoffOptions, type AgentChatViewTransition, type AgentChatViewTransitionOptions, } from "../chat-view-transition.js";
 export { useAgentChatHomeHandoff, useAgentChatHomeHandoffLinks, type UseAgentChatHomeHandoffLinksOptions, type UseAgentChatHomeHandoffOptions, } from "../use-agent-chat-home-handoff.js";
-export { requestAgentSidebarOpen, SIDEBAR_STATE_CHANGE_EVENT, setAgentSidebarOpenPreference, type AgentSidebarStateChangeDetail, type AgentSidebarStateMode, type AgentSidebarStateSource, } from "../agent-sidebar-state.js";
+export { AGENT_SIDEBAR_DEFAULT_MAX_WIDTH, AGENT_SIDEBAR_MIN_WIDTH, AGENT_SIDEBAR_WIDE_WIDTH_RATIO, clampAgentSidebarWidth, getAgentSidebarMaxWidth, getAgentSidebarWideWidth, requestAgentSidebarOpen, SIDEBAR_STATE_CHANGE_EVENT, setAgentSidebarOpenPreference, type AgentSidebarStateChangeDetail, type AgentSidebarStateMode, type AgentSidebarStateSource, } from "../agent-sidebar-state.js";
 export { clearReservedToolRenderersForTests, clearToolRenderersForTests, registerActionChatRenderer, registerFallbackToolRenderer, registerReservedActionChatRenderer, registerReservedFallbackToolRenderer, registerReservedToolRenderer, registerToolRenderer, resolveToolRenderer, type ActionChatRendererRegistration, type ToolRendererComponent, type ToolRendererContext, type ToolRendererMatch, type ToolRendererProps, type ToolRendererRegistration, } from "../chat/tool-render-registry.js";
 export * from "../chat/connectors.js";
 export * from "../chat/runtime.js";

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

@@ -32,7 +32,7 @@ export { AgentChatSurface, AgentPanel, AgentSidebar, AgentToggleButton, focusAge
 export { AgentTabsPage, } from "../agent-page/AgentTabsPage.js";
 export { AGENT_CHAT_HOME_HANDOFF_TTL_MS, AGENT_CHAT_VIEW_TRANSITION_CLASS, AGENT_CHAT_VIEW_TRANSITION_NAME, consumeAgentChatHomeHandoff, getAgentChatViewTransitionStyle, isAgentChatHomeHandoffActive, markAgentChatHomeHandoff, navigateWithAgentChatViewTransition, startAgentChatViewTransition, supportsAgentChatViewTransition, } from "../chat-view-transition.js";
 export { useAgentChatHomeHandoff, useAgentChatHomeHandoffLinks, } from "../use-agent-chat-home-handoff.js";
-export { requestAgentSidebarOpen, SIDEBAR_STATE_CHANGE_EVENT, setAgentSidebarOpenPreference, } from "../agent-sidebar-state.js";
+export { AGENT_SIDEBAR_DEFAULT_MAX_WIDTH, AGENT_SIDEBAR_MIN_WIDTH, AGENT_SIDEBAR_WIDE_WIDTH_RATIO, clampAgentSidebarWidth, getAgentSidebarMaxWidth, getAgentSidebarWideWidth, requestAgentSidebarOpen, SIDEBAR_STATE_CHANGE_EVENT, setAgentSidebarOpenPreference, } from "../agent-sidebar-state.js";
 export { clearReservedToolRenderersForTests, clearToolRenderersForTests, registerActionChatRenderer, registerFallbackToolRenderer, registerReservedActionChatRenderer, registerReservedFallbackToolRenderer, registerReservedToolRenderer, registerToolRenderer, resolveToolRenderer, } from "../chat/tool-render-registry.js";
 export * from "../chat/connectors.js";
 export * from "../chat/runtime.js";