@agent-native/core 0.107.2 → 0.109.0

package/dist/client/AssistantChat.js

@@ -3,7 +3,7 @@ import { AssistantRuntimeProvider, useLocalRuntime, useThreadRuntime, useThread,
 import { CompositeAttachmentAdapter } from "@assistant-ui/react";
 import { IconMessage, IconX, IconPlayerStopFilled, IconTerminal, IconAlertTriangle, IconChevronDown, IconRefresh, } from "@tabler/icons-react";
 import { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, forwardRef, useImperativeHandle, } from "react";
-import { ACTIVE_RUN_STATE_EVENT, clearPendingTurnIfMatches, clearActiveRunIfMatches, getPendingTurn, getActiveRunActivityTool, getActiveRun, resolveReconnectAfterSeq, setActiveRun, updateActiveRunActivity, updateActiveRunSeq, } from "./active-run-state.js";
+import { clearPendingTurnIfMatches, clearActiveRunIfMatches, getPendingTurn, getActiveRunActivityTool, getActiveRun, resolveReconnectAfterSeq, setActiveRun, updateActiveRunActivity, updateActiveRunSeq, } from "./active-run-state.js";
 import { createAgentChatAdapter, } from "./agent-chat-adapter.js";
 import { appendAgentChatContextToMessage, formatAgentChatContextItemsForPrompt, getAgentChatContextState, isAgentChatSubmitCancelled, normalizeAgentChatContextItem, publishAgentChatContextItems, refreshAgentChatContext, reportAgentChatSubmitResult, subscribeAgentChatContext, } from "./agent-chat.js";
 import { captureError } from "./analytics.js";
@@ -17,7 +17,8 @@ import { CheckpointContext, MessageActionsContext, UserMessage, AssistantMessage
 import { repoHasAssistantMessage, getRepoMessages, getRepoMessage, shouldImportServerThreadData, dedupeRepoMessagesById, dropEmptyAssistantMessages, } from "./chat/repo-helpers.js";
 import { BuilderSetupContent, LoopLimitContinueCard, RunErrorRecoveryCard, PlanModeCallout, getLoopLimitMetadata, getRunErrorMetadata, getRequestModeMetadata, } from "./chat/run-recovery.js";
 import { createAgentChatRuntimeAdapter, } from "./chat/runtime.js";
-import { ChatRunningContext, ApprovalContext, ReconnectStreamMessage, } from "./chat/tool-call-display.js";
+import { ChatRunningContext, ChatRunDurationContext, ApprovalContext, ReconnectStreamMessage, } from "./chat/tool-call-display.js";
+import { useAgentChatLifecycleTracking } from "./chat/use-agent-chat-lifecycle-tracking.js";
 import { useReconnectReaderOwner } from "./chat/use-reconnect-reader-owner.js";
 import { MessageScroller, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, } from "./components/ui/message-scroller.js";
 import { Popover, PopoverContent, PopoverTrigger, } from "./components/ui/popover.js";
@@ -1022,6 +1023,20 @@ export function shouldShowGlobalRunningStatus({ showRunningInUI, runningActivity
         return true;
     return (!latestMessageHasReasoning && !contentHasVisibleReasoning(reconnectContent));
 }
+export function queuedMessageImageSources(message) {
+    const sources = (message.attachments ?? []).flatMap((attachment) => attachment.content.flatMap((part) => part.type === "image" &&
+        "image" in part &&
+        typeof part.image === "string" &&
+        part.image.trim().length > 0
+        ? [part.image]
+        : []));
+    for (const image of message.images ?? []) {
+        if (image.trim().length > 0 && !sources.includes(image)) {
+            sources.push(image);
+        }
+    }
+    return sources;
+}
 function AssistantChatUserMessageItem() {
     const messageRuntime = useMessageRuntime();
     const message = messageRuntime.getState();
@@ -1266,7 +1281,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, selectedEffort, availableModels, modelListLoading, onModelChange, onEffortChange, imageModelMenu, onForkChat, onConnectProvider, onConnectLocalRuntime, plusMenuMode = "full", providerStatusChecksEnabled = true, loadHistoryRepository, historyReloadKey, externalStreaming = false, }, 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, onSlashCommand, execMode, onExecModeChange, approvalActions, planModeDisabled, planModeDisabledReason, selectedModel, defaultModel, 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 t = useT();
@@ -1589,24 +1604,12 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     const isAutoResumingRef = useRef(isAutoResuming);
     isAutoResumingRef.current = isAutoResuming;
     const [hasActiveServerRun, setHasActiveServerRun] = useState(() => activeRunMatchesThread(getActiveRun(), threadId));
-    useEffect(() => {
-        const syncActiveRun = (state = getActiveRun()) => {
-            setHasActiveServerRun(activeRunMatchesThread(state, threadId));
-        };
-        syncActiveRun();
-        const handler = (event) => {
-            const state = event
-                .detail?.state;
-            syncActiveRun(state ?? null);
-        };
-        const storageHandler = () => syncActiveRun();
-        window.addEventListener(ACTIVE_RUN_STATE_EVENT, handler);
-        window.addEventListener("storage", storageHandler);
-        return () => {
-            window.removeEventListener(ACTIVE_RUN_STATE_EVENT, handler);
-            window.removeEventListener("storage", storageHandler);
-        };
-    }, [threadId]);
+    const trackStoppedRun = useAgentChatLifecycleTracking({
+        surface: agentChatSurface,
+        threadId,
+        tabId,
+        onActiveRunChange: setHasActiveServerRun,
+    });
     // Real running state drives submission/queue gating; UI running also covers
     // short auto-continuation gaps so the latest assistant message does not flash
     // into a done state while the agent is still working.
@@ -1619,6 +1622,21 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         hasActiveServerRun,
     });
     const textStreaming = showRunningInUI || externalStreaming;
+    const chatRunStartedAtRef = useRef(null);
+    const [lastChatRunDurationMs, setLastChatRunDurationMs] = useState(null);
+    useEffect(() => {
+        if (showRunningInUI) {
+            if (chatRunStartedAtRef.current == null) {
+                chatRunStartedAtRef.current = Date.now();
+                setLastChatRunDurationMs(null);
+            }
+            return;
+        }
+        if (chatRunStartedAtRef.current != null) {
+            setLastChatRunDurationMs(Math.max(0, Date.now() - chatRunStartedAtRef.current));
+            chatRunStartedAtRef.current = null;
+        }
+    }, [showRunningInUI]);
     // A revealed activity label wins; otherwise keep recovery states calm and
     // product-facing. Reconnect is transport machinery, so normal replay reads as
     // ongoing work instead of exposing "Reconnecting" mid-chat.
@@ -3169,6 +3187,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
             at: Date.now(),
             ...(runIdToAbort ? { runId: runIdToAbort } : {}),
         };
+        trackStoppedRun(runIdToAbort);
         setRunErrorInfo(null);
         setDismissedRunErrorKey(null);
         if (runIdToAbort) {
@@ -3228,6 +3247,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         tabId,
         threadId,
         threadRuntime,
+        trackStoppedRun,
     ]);
     // Keep the ref current so addToQueue can call it without a stale closure.
     stopActiveRunRef.current = stopActiveRun;
@@ -3717,122 +3737,124 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
             ? { onAlwaysAllow: approvalActions.onAlwaysAllow }
             : {}),
     }), [appendThreadMessage, execMode, markOptimisticRunning, approvalActions]);
-    return (_jsx(CheckpointContext.Provider, { value: checkpointCtx, children: _jsx(MessageActionsContext.Provider, { value: messageActionsCtx, children: _jsx(ApprovalContext.Provider, { value: approvalCtx, children: _jsx(ChatRunningContext.Provider, { value: showRunningInUI, children: _jsx(TextStreamingContext.Provider, { value: textStreaming, children: _jsxs("div", { "data-agent-empty-state": centeredEmptyState
-                                ? "centered"
-                                : compactMissingKeyEmptyState
-                                    ? "compact-setup"
-                                    : undefined, className: cn("relative flex flex-1 flex-col h-full min-h-0 text-foreground", className), onDragEnter: handleChatDragEnter, onDragOver: handleChatDragOver, onDragLeave: handleChatDragLeave, onDropCapture: handleChatDropCapture, onDrop: handleChatDrop, children: [dropActive && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-md border-2 border-dashed border-primary/70 bg-primary/5 backdrop-blur-[1px]", children: _jsx("span", { className: "rounded-md bg-background/90 px-3 py-1.5 text-xs font-medium text-foreground shadow-sm", children: "Drop to attach" }) })), showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: onSwitchToCli, "aria-label": "Switch to CLI", className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] }) }), _jsx(TooltipContent, { children: "Switch to CLI" })] }) })) })] })), _jsx(MessageScrollerProvider, { autoScroll: false, children: _jsxs(MessageScroller, { className: "agent-chat-scroll", children: [_jsx(MessageScrollerViewport, { ref: scrollRef, children: authError ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: authSessionAvailable ? (_jsx(IconRefresh, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "text-center max-w-[280px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: authSessionAvailable
-                                                                        ? "Chat session needs refresh"
-                                                                        : authError.sessionExpired
-                                                                            ? "Session expired"
-                                                                            : "Authentication required" }), _jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: authSessionAvailable
-                                                                        ? "You're signed in, but this chat connection needs to reconnect."
-                                                                        : authError.sessionExpired
-                                                                            ? "Your session may have expired. Log out and log back in to reconnect."
-                                                                            : "You need to log in to use the agent." })] }), _jsxs("div", { className: "flex gap-2", children: [!authError.sessionExpired &&
-                                                                    !authSessionAvailable && (_jsx("button", { onClick: () => {
-                                                                        const ret = window.location.pathname +
-                                                                            window.location.search;
-                                                                        window.location.href =
-                                                                            agentNativePath("/_agent-native/sign-in") + `?return=${encodeURIComponent(ret)}`;
-                                                                    }, className: "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md", children: "Log in" })), authError.sessionExpired &&
-                                                                    !authSessionAvailable && (_jsx("button", { onClick: async () => {
-                                                                        try {
-                                                                            await fetch(agentNativePath("/_agent-native/auth/logout"), {
-                                                                                method: "POST",
-                                                                            });
+    return (_jsx(CheckpointContext.Provider, { value: checkpointCtx, children: _jsx(MessageActionsContext.Provider, { value: messageActionsCtx, children: _jsx(ApprovalContext.Provider, { value: approvalCtx, children: _jsx(ChatRunDurationContext.Provider, { value: lastChatRunDurationMs, children: _jsx(ChatRunningContext.Provider, { value: showRunningInUI, children: _jsx(TextStreamingContext.Provider, { value: textStreaming, children: _jsxs("div", { "data-agent-empty-state": centeredEmptyState
+                                    ? "centered"
+                                    : compactMissingKeyEmptyState
+                                        ? "compact-setup"
+                                        : undefined, className: cn("relative flex flex-1 flex-col h-full min-h-0 text-foreground", className), onDragEnter: handleChatDragEnter, onDragOver: handleChatDragOver, onDragLeave: handleChatDragLeave, onDropCapture: handleChatDropCapture, onDrop: handleChatDrop, children: [dropActive && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-md border-2 border-dashed border-primary/70 bg-primary/5 backdrop-blur-[1px]", children: _jsx("span", { className: "rounded-md bg-background/90 px-3 py-1.5 text-xs font-medium text-foreground shadow-sm", children: "Drop to attach" }) })), showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: onSwitchToCli, "aria-label": "Switch to CLI", className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] }) }), _jsx(TooltipContent, { children: "Switch to CLI" })] }) })) })] })), _jsx(MessageScrollerProvider, { autoScroll: false, children: _jsxs(MessageScroller, { className: "agent-chat-scroll", children: [_jsx(MessageScrollerViewport, { ref: scrollRef, children: authError ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: authSessionAvailable ? (_jsx(IconRefresh, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "text-center max-w-[280px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: authSessionAvailable
+                                                                            ? "Chat session needs refresh"
+                                                                            : authError.sessionExpired
+                                                                                ? "Session expired"
+                                                                                : "Authentication required" }), _jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: authSessionAvailable
+                                                                            ? "You're signed in, but this chat connection needs to reconnect."
+                                                                            : authError.sessionExpired
+                                                                                ? "Your session may have expired. Log out and log back in to reconnect."
+                                                                                : "You need to log in to use the agent." })] }), _jsxs("div", { className: "flex gap-2", children: [!authError.sessionExpired &&
+                                                                        !authSessionAvailable && (_jsx("button", { onClick: () => {
+                                                                            const ret = window.location.pathname +
+                                                                                window.location.search;
+                                                                            window.location.href =
+                                                                                agentNativePath("/_agent-native/sign-in") +
+                                                                                    `?return=${encodeURIComponent(ret)}`;
+                                                                        }, className: "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md", children: "Log in" })), authError.sessionExpired &&
+                                                                        !authSessionAvailable && (_jsx("button", { onClick: async () => {
+                                                                            try {
+                                                                                await fetch(agentNativePath("/_agent-native/auth/logout"), {
+                                                                                    method: "POST",
+                                                                                });
+                                                                            }
+                                                                            catch { }
+                                                                            window.location.reload();
+                                                                        }, className: "text-xs text-destructive hover:text-destructive/80 px-3 py-1.5 rounded-md border border-destructive/30 hover:bg-destructive/10", children: "Log out" })), _jsx("button", { onClick: () => {
+                                                                            setAuthError(null);
+                                                                            window.location.reload();
+                                                                        }, className: authSessionAvailable
+                                                                            ? "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md"
+                                                                            : "text-xs text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-accent", children: "Refresh chat" })] })] })) : isRestoring && centeredRestoringState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
+                                                            ? "sr-only"
+                                                            : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), "aria-busy": "true", children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "Loading chat..." })] })) : isRestoring ? (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "h-8 w-32 rounded-lg bg-muted animate-pulse" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "h-4 w-48 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-64 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-40 rounded bg-muted animate-pulse" })] })] })) : showEmptyState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
+                                                            ? "sr-only"
+                                                            : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "How can I help you?" }), emptyStateAddon, resolvedSuggestions &&
+                                                                resolvedSuggestions.length > 0 ? (_jsx("div", { className: "flex w-full max-w-[280px] flex-col gap-1", children: resolvedSuggestions.map((suggestion) => (_jsx("button", { onClick: () => {
+                                                                        if (missingApiKey) {
+                                                                            requestMissingKeySetup();
+                                                                            return;
+                                                                        }
+                                                                        void addToQueue(suggestion);
+                                                                    }, className: "w-full px-2 py-1 text-center text-[13px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: suggestion }, suggestion))) })) : null, showInlineEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--empty", children: resolvedThreadFooterSlot })) : null] })) : (_jsxs(MessageScrollerContent, { className: "agent-thread-content gap-4 px-4 py-4", children: [_jsx(AssistantMessageListErrorBoundary, { resetKey: messageListResetKey, children: _jsx(ThreadPrimitive.Messages, { components: {
+                                                                        UserMessage: AssistantChatUserMessageItem,
+                                                                        AssistantMessage: AssistantChatAssistantMessageItem,
+                                                                    } }) }), visibleLoopLimit && !showRunningInUI && (_jsx(MessageScrollerItem, { children: _jsx(LoopLimitContinueCard, { info: visibleLoopLimit, onContinue: () => {
+                                                                        setShowContinue(false);
+                                                                        setLoopLimitInfo(null);
+                                                                        addToQueue("Continue from where you left off.", undefined, undefined, undefined, undefined, "queued", "continue");
+                                                                    } }) })), shouldShowRunError && visibleRunError && (_jsx(MessageScrollerItem, { children: _jsx(RunErrorRecoveryCard, { info: visibleRunError, onContinue: () => {
+                                                                        setRunErrorInfo(null);
+                                                                        addToQueue(RECONNECT_NO_PROGRESS_CONTINUE_MESSAGE, undefined, undefined, undefined, undefined, "queued", "continue");
+                                                                    }, onRetry: () => {
+                                                                        setRunErrorInfo(null);
+                                                                        addToQueue(lastUserText
+                                                                            ? `Retry the previous request from a clean approach. Do not rerun the exact same failed tool input unless the failure was transient or the user explicitly asked for an exact rerun. If a provider query failed because of schema, syntax, or type mismatch, diagnose the error and adjust the query first.\n\nOriginal request:\n\n${lastUserText}`
+                                                                            : "Retry the previous request from a clean approach. Do not rerun the exact same failed tool input unless the failure was transient or the user explicitly asked for an exact rerun. If a provider query failed because of schema, syntax, or type mismatch, diagnose the error and adjust the query first.", undefined, undefined, undefined, undefined, "queued", "retry");
+                                                                    }, onFork: onForkChat, onDismiss: () => {
+                                                                        if (visibleRunErrorKey) {
+                                                                            setDismissedRunErrorKey(visibleRunErrorKey);
                                                                         }
-                                                                        catch { }
-                                                                        window.location.reload();
-                                                                    }, className: "text-xs text-destructive hover:text-destructive/80 px-3 py-1.5 rounded-md border border-destructive/30 hover:bg-destructive/10", children: "Log out" })), _jsx("button", { onClick: () => {
-                                                                        setAuthError(null);
-                                                                        window.location.reload();
-                                                                    }, className: authSessionAvailable
-                                                                        ? "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md"
-                                                                        : "text-xs text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-accent", children: "Refresh chat" })] })] })) : isRestoring && centeredRestoringState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
-                                                        ? "sr-only"
-                                                        : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), "aria-busy": "true", children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "Loading chat..." })] })) : isRestoring ? (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "h-8 w-32 rounded-lg bg-muted animate-pulse" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "h-4 w-48 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-64 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-40 rounded bg-muted animate-pulse" })] })] })) : showEmptyState ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
-                                                        ? "sr-only"
-                                                        : "flex h-full flex-col items-center justify-center gap-3 px-4 py-16"), children: [_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground/60" }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "How can I help you?" }), emptyStateAddon, resolvedSuggestions &&
-                                                            resolvedSuggestions.length > 0 ? (_jsx("div", { className: "flex w-full max-w-[280px] flex-col gap-1", children: resolvedSuggestions.map((suggestion) => (_jsx("button", { onClick: () => {
-                                                                    if (missingApiKey) {
-                                                                        requestMissingKeySetup();
-                                                                        return;
-                                                                    }
-                                                                    void addToQueue(suggestion);
-                                                                }, className: "w-full px-2 py-1 text-center text-[13px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: suggestion }, suggestion))) })) : null, showInlineEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--empty", children: resolvedThreadFooterSlot })) : null] })) : (_jsxs(MessageScrollerContent, { className: "agent-thread-content gap-4 px-4 py-4", children: [_jsx(AssistantMessageListErrorBoundary, { resetKey: messageListResetKey, children: _jsx(ThreadPrimitive.Messages, { components: {
-                                                                    UserMessage: AssistantChatUserMessageItem,
-                                                                    AssistantMessage: AssistantChatAssistantMessageItem,
-                                                                } }) }), visibleLoopLimit && !showRunningInUI && (_jsx(MessageScrollerItem, { children: _jsx(LoopLimitContinueCard, { info: visibleLoopLimit, onContinue: () => {
-                                                                    setShowContinue(false);
-                                                                    setLoopLimitInfo(null);
-                                                                    addToQueue("Continue from where you left off.", undefined, undefined, undefined, undefined, "queued", "continue");
-                                                                } }) })), shouldShowRunError && visibleRunError && (_jsx(MessageScrollerItem, { children: _jsx(RunErrorRecoveryCard, { info: visibleRunError, onContinue: () => {
-                                                                    setRunErrorInfo(null);
-                                                                    addToQueue(RECONNECT_NO_PROGRESS_CONTINUE_MESSAGE, undefined, undefined, undefined, undefined, "queued", "continue");
-                                                                }, onRetry: () => {
-                                                                    setRunErrorInfo(null);
-                                                                    addToQueue(lastUserText
-                                                                        ? `Retry the previous request from a clean approach. Do not rerun the exact same failed tool input unless the failure was transient or the user explicitly asked for an exact rerun. If a provider query failed because of schema, syntax, or type mismatch, diagnose the error and adjust the query first.\n\nOriginal request:\n\n${lastUserText}`
-                                                                        : "Retry the previous request from a clean approach. Do not rerun the exact same failed tool input unless the failure was transient or the user explicitly asked for an exact rerun. If a provider query failed because of schema, syntax, or type mismatch, diagnose the error and adjust the query first.", undefined, undefined, undefined, undefined, "queued", "retry");
-                                                                }, onFork: onForkChat, onDismiss: () => {
-                                                                    if (visibleRunErrorKey) {
-                                                                        setDismissedRunErrorKey(visibleRunErrorKey);
-                                                                    }
-                                                                    setRunErrorInfo(null);
-                                                                } }) })), (isReconnecting ||
-                                                            reconnectFrozen ||
-                                                            adapterHandoffPending) &&
-                                                            visibleReconnectContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: visibleReconnectContent }) })), (isReconnecting ||
-                                                            reconnectFrozen ||
-                                                            adapterHandoffPending) &&
-                                                            visibleReconnectContent.length === 0 &&
-                                                            reconnectContent.length === 0 &&
-                                                            reconnectActivityContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: reconnectActivityContent }) })), showGlobalRunningStatus && (_jsx(MessageScrollerItem, { children: _jsx(RunningActivityStatus, { label: runningStatusLabel }) })), queuedMessages
-                                                            .filter((msg) => !msg.hideUserMessage)
-                                                            .map((msg) => {
-                                                            const displayText = displayableUserMessageText(msg.text);
-                                                            return (_jsx(MessageScrollerItem, { messageId: msg.id, children: _jsxs("div", { className: "group flex items-start justify-end gap-1.5", children: [_jsx("button", { type: "button", onClick: () => applyLocalQueuedMessages((prev) => prev.filter((m) => m.id !== msg.id)), "aria-label": "Remove from queue", className: "mt-1.5 flex h-5 w-5 items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) }), _jsxs("div", { className: "max-w-[85%] rounded-lg bg-accent/50 px-3 py-2 text-sm leading-relaxed text-foreground/60 whitespace-pre-wrap break-words", children: [displayText, msg.images && msg.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5", children: msg.images.map((img, j) => (_jsx("img", { src: img, alt: "", className: "h-12 w-12 rounded object-cover border border-border/50" }, j))) }))] })] }) }, msg.id));
-                                                        }), resolvedThreadFooterSlot ? (_jsx(MessageScrollerItem, { children: _jsx("div", { className: "agent-thread-footer-slot", children: resolvedThreadFooterSlot }) })) : null] })) }), !authError &&
-                                                !isRestoring &&
-                                                !showEmptyState &&
-                                                showScrollToBottom ? (_jsx("div", { className: "shrink-0 flex justify-center -mb-1", children: _jsx("button", { type: "button", onClick: scrollToBottom, className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent", "aria-label": "Scroll to bottom", children: _jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) }) })) : null] }) }, chatScrollResetKey), showComposerSlot ? composerSlot : null, isActiveComposer && (_jsx(McpConnectionSuggestion, { text: composerText })), showCenteredEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--centered-empty", children: resolvedThreadFooterSlot })) : null, guidedQuestions && guidedQuestions.length > 0 && (_jsx("div", { className: "shrink-0 px-3 pb-2", children: _jsx(GuidedQuestionFlow, { questions: guidedQuestions, onSubmit: handleGuidedQuestionsSubmit, onSkip: handleGuidedQuestionsSkip, ...(guidedQuestionsTitle
-                                            ? { title: guidedQuestionsTitle }
-                                            : {}), ...(guidedQuestionsDescription
-                                            ? { description: guidedQuestionsDescription }
-                                            : {}), ...(guidedQuestionsSkipLabel
-                                            ? { skipLabel: guidedQuestionsSkipLabel }
-                                            : {}), ...(guidedQuestionsSubmitLabel
-                                            ? { submitLabel: guidedQuestionsSubmitLabel }
-                                            : {}), className: "h-auto items-stretch justify-stretch bg-transparent" }) })), composerError && (_jsxs("div", { role: "alert", className: "shrink-0 mx-3 mb-1.5 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [_jsx(IconAlertTriangle, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsx("span", { className: "flex-1 leading-snug", children: composerError }), _jsx("button", { type: "button", "aria-label": "Dismiss error", onClick: () => setComposerError(null), className: "shrink-0 opacity-70 hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) })] })), _jsxs("div", { className: "agent-composer-stack", "data-agent-composer-adjacent-ui": hasComposerAccessoryAboveStack ? "true" : undefined, children: [_jsx(SelectionAttachedPill, {}), showPlanModeCallout && (_jsx(PlanModeCallout, { canImplementPlan: canImplementPlan, onImplementPlan: handleImplementPlan, onSwitchToAct: handleSwitchToAct })), _jsxs(Popover, { open: showMissingKeySetup && missingKeySetupOpen, onOpenChange: setMissingKeySetupOpen, children: [_jsx(AgentComposerFrame, { layoutVariant: composerLayoutVariant, className: cn(composerAreaClassName, isComposerDisabled &&
-                                                        !showMissingKeySetup &&
-                                                        "opacity-70"), rootClassName: cn(showMissingKeySetup &&
-                                                        "agent-composer-root--missing-key"), children: showMissingKeySetup ? (_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "agent-composer-missing-key-trigger", "aria-label": "Connect AI to start chatting", children: _jsxs("span", { className: "agent-composer-missing-key-copy", children: [_jsx("span", { className: "agent-composer-missing-key-title", children: missingApiKeySetupLayout === "sidebar"
-                                                                            ? "Connect AI to chat"
-                                                                            : "Connect AI to start chatting" }), missingApiKeySetupLayout !== "sidebar" ? (_jsx("span", { className: "agent-composer-missing-key-description", children: "Builder.io includes free credits, or use your own API key." })) : null] }) }) })) : (_jsxs(_Fragment, { children: [_jsx(ComposerAttachmentPreviewStrip, {}), _jsx(TiptapComposer, { focusRef: tiptapRef, onTextChange: isActiveComposer
-                                                                    ? handleComposerTextChange
-                                                                    : undefined, disabled: isComposerDisabled, placeholder: missingApiKey
-                                                                    ? "Connect AI to start chatting..."
-                                                                    : isProviderStatusChecking
-                                                                        ? t("agentPanel.checkingAiConnection")
-                                                                        : composerDisabled
-                                                                            ? (composerDisabledPlaceholder ??
-                                                                                "Open Desktop to use this chat.")
-                                                                            : isRunning
-                                                                                ? queuedMessages.length > 0
-                                                                                    ? `${queuedMessages.length} queued — send a follow-up...`
-                                                                                    : "Send a follow-up..."
-                                                                                : composerPlaceholder, onSubmit: isRunning || composerContextItems.length > 0
-                                                                    ? (text, references, attachments, options) => void addToQueue(text, undefined, references.length > 0
-                                                                        ? references
-                                                                        : undefined, attachments, undefined, resolveAssistantChatSubmitIntent({
-                                                                        isRunning,
-                                                                        requestedIntent: options?.intent,
-                                                                    }), undefined, true)
-                                                                    : undefined, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason, selectedModel: selectedModel ?? defaultModel, selectedEffort: selectedEffort, availableModels: availableModels, modelListLoading: modelListLoading, onModelChange: onModelChange, onEffortChange: onEffortChange, imageModelMenu: imageModelMenu, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, toolbarSlot: composerToolbarSlot, contextItems: composerContextItems, onRemoveContextItem: removeComposerContextItem, plusMenuMode: plusMenuMode, layoutVariant: composerLayoutVariant, providerConnectStatusEnabled: providerStatusChecksEnabled, voiceEnabled: true, draftScope: threadId || tabId, interceptBuildRequestsForBuilder: true, onAttachmentError: setComposerError, extraActionButton: contextXRayEnabled ||
-                                                                    composerExtraActionButton ? (_jsxs(_Fragment, { children: [contextXRayEnabled && (_jsx(ContextMeter, { threadId: threadId })), composerExtraActionButton] })) : undefined, stopButton: showRunningInUI ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => stopActiveRun(), "aria-label": "Stop response", "data-agent-composer-slot": "stop-button", className: "shrink-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(IconPlayerStopFilled, { className: "h-3 w-3" }) }) }), _jsx(TooltipContent, { children: "Stop response" })] })) : undefined })] })) }), showMissingKeySetup ? (_jsx(PopoverContent, { side: missingApiKeySetupLayout === "sidebar"
-                                                        ? "top"
-                                                        : "bottom", align: "center", sideOffset: 8, collisionPadding: 12, "data-agent-native-composer-popover": "true", className: "z-[260] box-border w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,26rem),26rem)] rounded-lg border-border p-3 shadow-lg", children: _jsx(BuilderSetupContent, { onConnected: handleBuilderConnected, layout: missingApiKeySetupLayout }) })) : null] })] })] }) }) }) }) }) }));
+                                                                        setRunErrorInfo(null);
+                                                                    } }) })), (isReconnecting ||
+                                                                reconnectFrozen ||
+                                                                adapterHandoffPending) &&
+                                                                visibleReconnectContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: visibleReconnectContent }) })), (isReconnecting ||
+                                                                reconnectFrozen ||
+                                                                adapterHandoffPending) &&
+                                                                visibleReconnectContent.length === 0 &&
+                                                                reconnectContent.length === 0 &&
+                                                                reconnectActivityContent.length > 0 && (_jsx(MessageScrollerItem, { children: _jsx(ReconnectStreamMessage, { content: reconnectActivityContent }) })), showGlobalRunningStatus && (_jsx(MessageScrollerItem, { children: _jsx(RunningActivityStatus, { label: runningStatusLabel }) })), queuedMessages
+                                                                .filter((msg) => !msg.hideUserMessage)
+                                                                .map((msg) => {
+                                                                const displayText = displayableUserMessageText(msg.text);
+                                                                const imageSources = queuedMessageImageSources(msg);
+                                                                return (_jsx(MessageScrollerItem, { messageId: msg.id, children: _jsxs("div", { className: "group flex items-start justify-end gap-1.5", children: [_jsx("button", { type: "button", onClick: () => applyLocalQueuedMessages((prev) => prev.filter((m) => m.id !== msg.id)), "aria-label": "Remove from queue", className: "mt-1.5 flex h-5 w-5 items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) }), _jsxs("div", { className: "max-w-[85%] rounded-lg bg-accent/50 px-3 py-2 text-sm leading-relaxed text-foreground/60 whitespace-pre-wrap break-words", children: [displayText, imageSources.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5", children: imageSources.map((img, j) => (_jsx("img", { src: img, alt: "", className: "h-12 w-12 rounded object-cover border border-border/50" }, j))) }))] })] }) }, msg.id));
+                                                            }), resolvedThreadFooterSlot ? (_jsx(MessageScrollerItem, { children: _jsx("div", { className: "agent-thread-footer-slot", children: resolvedThreadFooterSlot }) })) : null] })) }), !authError &&
+                                                    !isRestoring &&
+                                                    !showEmptyState &&
+                                                    showScrollToBottom ? (_jsx("div", { className: "shrink-0 flex justify-center -mb-1", children: _jsx("button", { type: "button", onClick: scrollToBottom, className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent", "aria-label": "Scroll to bottom", children: _jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) }) })) : null] }) }, chatScrollResetKey), showComposerSlot ? composerSlot : null, isActiveComposer && (_jsx(McpConnectionSuggestion, { text: composerText })), showCenteredEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--centered-empty", children: resolvedThreadFooterSlot })) : null, guidedQuestions && guidedQuestions.length > 0 && (_jsx("div", { className: "shrink-0 px-3 pb-2", children: _jsx(GuidedQuestionFlow, { questions: guidedQuestions, onSubmit: handleGuidedQuestionsSubmit, onSkip: handleGuidedQuestionsSkip, ...(guidedQuestionsTitle
+                                                ? { title: guidedQuestionsTitle }
+                                                : {}), ...(guidedQuestionsDescription
+                                                ? { description: guidedQuestionsDescription }
+                                                : {}), ...(guidedQuestionsSkipLabel
+                                                ? { skipLabel: guidedQuestionsSkipLabel }
+                                                : {}), ...(guidedQuestionsSubmitLabel
+                                                ? { submitLabel: guidedQuestionsSubmitLabel }
+                                                : {}), className: "h-auto items-stretch justify-stretch bg-transparent" }) })), composerError && (_jsxs("div", { role: "alert", className: "shrink-0 mx-3 mb-1.5 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [_jsx(IconAlertTriangle, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsx("span", { className: "flex-1 leading-snug", children: composerError }), _jsx("button", { type: "button", "aria-label": "Dismiss error", onClick: () => setComposerError(null), className: "shrink-0 opacity-70 hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) })] })), _jsxs("div", { className: "agent-composer-stack", "data-agent-composer-adjacent-ui": hasComposerAccessoryAboveStack ? "true" : undefined, children: [_jsx(SelectionAttachedPill, {}), showPlanModeCallout && (_jsx(PlanModeCallout, { canImplementPlan: canImplementPlan, onImplementPlan: handleImplementPlan, onSwitchToAct: handleSwitchToAct })), _jsxs(Popover, { open: showMissingKeySetup && missingKeySetupOpen, onOpenChange: setMissingKeySetupOpen, children: [_jsx(AgentComposerFrame, { layoutVariant: composerLayoutVariant, className: cn(composerAreaClassName, isComposerDisabled &&
+                                                            !showMissingKeySetup &&
+                                                            "opacity-70"), rootClassName: cn(showMissingKeySetup &&
+                                                            "agent-composer-root--missing-key"), children: showMissingKeySetup ? (_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "agent-composer-missing-key-trigger", "aria-label": "Connect AI to start chatting", children: _jsxs("span", { className: "agent-composer-missing-key-copy", children: [_jsx("span", { className: "agent-composer-missing-key-title", children: missingApiKeySetupLayout === "sidebar"
+                                                                                ? "Connect AI to chat"
+                                                                                : "Connect AI to start chatting" }), missingApiKeySetupLayout !== "sidebar" ? (_jsx("span", { className: "agent-composer-missing-key-description", children: "Builder.io includes free credits, or use your own API key." })) : null] }) }) })) : (_jsxs(_Fragment, { children: [_jsx(ComposerAttachmentPreviewStrip, {}), _jsx(TiptapComposer, { focusRef: tiptapRef, onTextChange: isActiveComposer
+                                                                        ? handleComposerTextChange
+                                                                        : undefined, disabled: isComposerDisabled, placeholder: missingApiKey
+                                                                        ? "Connect AI to start chatting..."
+                                                                        : isProviderStatusChecking
+                                                                            ? t("agentPanel.checkingAiConnection")
+                                                                            : composerDisabled
+                                                                                ? (composerDisabledPlaceholder ??
+                                                                                    "Open Desktop to use this chat.")
+                                                                                : isRunning
+                                                                                    ? queuedMessages.length > 0
+                                                                                        ? `${queuedMessages.length} queued — send a follow-up...`
+                                                                                        : "Send a follow-up..."
+                                                                                    : composerPlaceholder, onSubmit: isRunning || composerContextItems.length > 0
+                                                                        ? (text, references, attachments, options) => void addToQueue(text, undefined, references.length > 0
+                                                                            ? references
+                                                                            : undefined, attachments, undefined, resolveAssistantChatSubmitIntent({
+                                                                            isRunning,
+                                                                            requestedIntent: options?.intent,
+                                                                        }), undefined, true)
+                                                                        : undefined, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason, selectedModel: selectedModel ?? defaultModel, selectedEffort: selectedEffort, availableModels: availableModels, modelListLoading: modelListLoading, onModelChange: onModelChange, onEffortChange: onEffortChange, imageModelMenu: imageModelMenu, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, toolbarSlot: composerToolbarSlot, contextItems: composerContextItems, onRemoveContextItem: removeComposerContextItem, plusMenuMode: plusMenuMode, layoutVariant: composerLayoutVariant, providerConnectStatusEnabled: providerStatusChecksEnabled, voiceEnabled: true, draftScope: threadId || tabId, interceptBuildRequestsForBuilder: true, onAttachmentError: setComposerError, extraActionButton: contextXRayEnabled ||
+                                                                        composerExtraActionButton ? (_jsxs(_Fragment, { children: [contextXRayEnabled && (_jsx(ContextMeter, { threadId: threadId })), composerExtraActionButton] })) : undefined, stopButton: showRunningInUI ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => stopActiveRun(), "aria-label": "Stop response", "data-agent-composer-slot": "stop-button", className: "shrink-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(IconPlayerStopFilled, { className: "h-3 w-3" }) }) }), _jsx(TooltipContent, { children: "Stop response" })] })) : undefined })] })) }), showMissingKeySetup ? (_jsx(PopoverContent, { side: missingApiKeySetupLayout === "sidebar"
+                                                            ? "top"
+                                                            : "bottom", align: "center", sideOffset: 8, collisionPadding: 12, "data-agent-native-composer-popover": "true", className: "z-[260] box-border w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,26rem),26rem)] rounded-lg border-border p-3 shadow-lg", children: _jsx(BuilderSetupContent, { onConnected: handleBuilderConnected, layout: missingApiKeySetupLayout }) })) : null] })] })] }) }) }) }) }) }) }));
 });
 export const AssistantChat = forwardRef(function AssistantChat({ apiUrl = agentNativePath("/_agent-native/agent-chat"), tabId, browserTabId, threadId, contextScope, isActiveComposer, ...props }, ref) {
     const modelRef = useRef(props.selectedModel);