@agent-native/core 0.145.4 → 0.145.6

package/corpus/templates/tasks/.agents/skills/turn-into-app/references/fresh-project.md

@@ -0,0 +1,64 @@
+# Fresh Project source guide
+
+Use this guide when `/turn-into-app` is invoked in a new Claude or ChatGPT
+Project rather than after a completed thread.
+
+## What the host can provide
+
+The source is whatever the host put in the model's current context:
+
+- Project instructions: the job, audience, constraints, quality bar, and
+  approved tools or integrations.
+- Knowledge files and attachments: reference material, templates, examples,
+  and links that the app should use.
+- Past runs: only conversations or outputs the host actually supplied. They
+  are examples and evaluation material, not an automatic import of every
+  private Project conversation.
+- The current request: the app boundary, target workspace, name, and explicit
+  corrections.
+
+Do not infer hidden system prompts, account settings, private history, API keys,
+or credentials. The Dispatch MCP connector can start a workspace app creation,
+but it cannot unlock or scrape private Project content.
+
+## Source brief
+
+Write a compact brief before starting the app:
+
+```text
+Source: host-provided Claude/ChatGPT Project context
+Provenance: project instructions, selected knowledge files, and visible runs
+Project goal:
+Configuration and constraints:
+Knowledge sources:
+Repeatable workflow:
+Inputs and outputs:
+Judgment and review points:
+Representative runs: none, or 1-3 selected examples
+Integrations and permissions:
+Unknowns and follow-up:
+```
+
+Keep source references bounded. Prefer a file name, URL, resource ID, or short
+summary over a large pasted document. Do not put secrets or raw customer data
+in the brief.
+
+## Fresh-box setup
+
+Install the exported `turn-into-app` skill in the host when the host supports
+skills. For a ChatGPT Project or any host that exposes only the MCP connector,
+also place the skill instructions or this reference in the Project
+instructions/knowledge files. Then add and authenticate the Dispatch MCP
+connector from the packaged `adapters/chatgpt-mcp/connector.json`.
+
+In a new Project chat, say:
+
+```text
+Turn this project into an app. Use the visible Project instructions,
+knowledge files, and any selected successful runs as the source. Create the
+app in the connected Agent-Native workspace, keep the source brief bounded,
+and report the real path and verification result.
+```
+
+If the host does not show the Project instructions or files to the model, stop
+and request an export or attachment. Do not claim that the Project was read.

package/corpus/templates/tasks/.env.example

@@ -2,4 +2,7 @@
 PING_MESSAGE=pong
 
 # Skip login/signup (local dev / preview only)
+# Auth is enabled when AUTH_DISABLED is unset. Standalone production deploys
+# need a stable BETTER_AUTH_SECRET; BETTER_AUTH_URL is inferred automatically.
+# BETTER_AUTH_SECRET=
 # AUTH_DISABLED=true

package/dist/agent/production-agent.js

@@ -646,6 +646,13 @@ const TOOL_INPUT_ACTIVITY_INTERVAL_MS = 1500;
 const ACTION_PREPARATION_NO_PROGRESS_TIMEOUT_MS = 90_000;
 const ACTION_PREPARATION_ZERO_BYTE_RESTART_LIMIT = 2;
 const MODEL_STREAM_NO_PROGRESS_TIMEOUT_MS = 90_000;
+/**
+ * How long an attempt must have run before its retry is worth narrating.
+ *
+ * Below this, the retry is invisible: the clear-and-retry completes faster
+ * than a person can register the blank. Above it, silence reads as a freeze.
+ */
+const VISIBLE_RETRY_THRESHOLD_MS = 10_000;
 /**
  * FIX 2 (durable-background incident): tighter no-progress deadline for ONLY
  * the FIRST engine-stream event of a model call, and ONLY on the clamped
@@ -3125,6 +3132,7 @@ export async function runAgentLoop(opts) {
             }
         }
         for (let retry = 0;; retry++) {
+            const attemptStartedAt = Date.now();
             assistantContent = undefined;
             streamedAssistantText = "";
             streamedAssistantToolCalls.length = 0;
@@ -3543,9 +3551,22 @@ export async function runAgentLoop(opts) {
                     isRetryableError(err) &&
                     hasBudgetForEngineRetry(budgetStartedAt, retry)) {
                     // Clear partial text from the failed attempt so the retry
-                    // doesn't produce garbled duplicate output. Keep the retry itself
-                    // silent so transient provider/backend failures do not leak into
-                    // the assistant's final answer.
+                    // doesn't produce garbled duplicate output. A fast provider blip
+                    // stays silent — it must not leak into the assistant's answer.
+                    //
+                    // A retry the user WAITED THROUGH is a different event. A 90s model
+                    // stall retried three times wiped the visible output at 92s, 182s,
+                    // and 272s with no explanation; the screen simply went blank and
+                    // stayed blank for four and a half minutes, which is what people
+                    // report as "the chat froze". Say what is happening, but only once
+                    // the silence is long enough that someone noticed it.
+                    const stalledMs = Date.now() - attemptStartedAt;
+                    if (stalledMs >= VISIBLE_RETRY_THRESHOLD_MS) {
+                        send({
+                            type: "activity",
+                            label: `Model did not respond — retrying (${retry + 2}/${maxRetriesForError(err) + 1})`,
+                        });
+                    }
                     send({ type: "clear" });
                     await retryDelay(retry, signal);
                     continue;

package/dist/client/AgentPanel.d.ts

@@ -70,6 +70,12 @@ export interface AgentPanelProps extends Omit<AssistantChatProps, "onSwitchToCli
     isFullscreen?: boolean;
     /** Called when the user clicks the maximize/minimize button. If provided, the button appears next to the collapse button. */
     onToggleFullscreen?: () => void;
+    /** Called when the user asks the sidebar to use the wide chat width preset. */
+    onSnapTo75Percent?: () => void;
+    /** Whether the sidebar is currently using the wide fixed drawer presentation. */
+    isWideDrawer?: boolean;
+    /** Called when the user returns the wide drawer to the normal layout. */
+    onExitWideDrawer?: () => void;
     /** URL of the app being developed (shown as "Open app in new tab" in settings). Set by frame. */
     devAppUrl?: string;
     /** Namespace for localStorage keys — used to isolate chat state per app in the frame. */

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;