@vertesia/ui 1.5.0-dev.20260725.083715Z → 1.5.0-dev.20260806.125520Z

package/lib/features/agent/chat/ModernAgentConversation.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AgentMessageType, FileProcessingStatus, normalizeAgentToolApprovalMode, } from '@vertesia/common';
 import { FusionFragmentProvider } from '@vertesia/fusion-ux';
 import { Button, cn, insertNewlineAtCursor, MessageBox, Modal, ModalBody, ModalFooter, ModalTitle, Spinner, Textarea, useToast, } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { AgentResourceResolverProvider, isArtifactRefreshEvent, } from '@vertesia/ui/widgets';
-import { ArrowUpIcon, Bot, CheckCircle, Cpu, FileTextIcon, UploadIcon, XIcon } from 'lucide-react';
+import { ArrowUpIcon, Bot, CheckCircle, ChevronDown, Cpu, FileTextIcon, UploadIcon, XIcon } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { McpConnectionsActionMenu } from '../../oauth/McpConnectionsButton.js';
 import { AgentApprovalModeSelector } from './AgentApprovalModeSelector';
@@ -21,9 +21,10 @@ import { useFileProcessing } from './hooks/useFileProcessing.js';
 import { ImageLightboxProvider } from './ImageLightbox';
 import { ActiveWorkstreamsSummary } from './ModernAgentOutput/ActiveWorkstreamsSummary';
 import AllMessagesMixed from './ModernAgentOutput/AllMessagesMixed';
+import { collectDeliveredArtifactRefs } from './ModernAgentOutput/AttachmentPreview';
 import Header from './ModernAgentOutput/Header';
 import MessageInput from './ModernAgentOutput/MessageInput';
-import { getPendingRequestInputMessage } from './ModernAgentOutput/requestInputMessages';
+import { clearRequestInputIdAnsweredForSession, getPendingRequestInputMessage, getRequestInputResolutionKey, getRequestInputResponseIdFromMetadata, isRequestInputAnsweredForSession, markRequestInputIdAnsweredForSession, } from './ModernAgentOutput/requestInputMessages';
 import { debugAgentChat, filterMessagesForActiveWorkstream, getConversationUrl, getWorkstreamId, isInProgress, isPassiveArtifactUpdate, } from './ModernAgentOutput/utils';
 import { createPlaybackState, getPlaybackCursorIndex, isAgentChatPlaybackAvailable, isAgentChatPlaybackEnabled, } from './playback';
 import { SkillWidgetProvider } from './SkillWidgetProvider';
@@ -32,6 +33,7 @@ import { VegaLiteChart } from './VegaLiteChart';
 import { ThinkingMessages } from './WaitingMessages';
 import { getWorkstreamDisplayName, getWorkstreamLaunchDetails, getWorkstreamLifecycleStatus, isWorkstreamInternalResultMessage, } from './workstreams.js';
 const EMPTY_STREAMING_MESSAGES = new Map();
+const COLLAPSED_STAGED_FILE_COUNT = 3;
 function getTimestampMs(timestamp) {
     if (typeof timestamp === 'number')
         return timestamp;
@@ -55,7 +57,12 @@ function toContextWindowUsage(messages) {
         if (!details)
             continue;
         const tokenUsage = details.token_usage;
-        const usedTokens = getNumberDetail(tokenUsage?.total);
+        // Mirror the server's checkpoint trigger (getContextPressureTokens):
+        // the last call's prompt size is the actual context; `total` includes
+        // reasoning output that never re-enters context and would overstate
+        // pressure on reasoning models. Fall back to total when no breakdown.
+        const promptTokens = getNumberDetail(tokenUsage?.prompt);
+        const usedTokens = promptTokens && promptTokens > 0 ? promptTokens : getNumberDetail(tokenUsage?.total);
         const checkpointTokens = getNumberDetail(details.checkpoint_threshold) ?? getNumberDetail(details.checkpoint_at);
         if (typeof usedTokens !== 'number' || typeof checkpointTokens !== 'number' || checkpointTokens <= 0) {
             continue;
@@ -108,6 +115,14 @@ function isWorkstreamActivityFailureMessage(message) {
         return false;
     if (details.workstream_event)
         return false;
+    const workstreamId = typeof message.workstream_id === 'string' && message.workstream_id.trim()
+        ? message.workstream_id.trim()
+        : typeof details.workstream_id === 'string'
+            ? details.workstream_id.trim()
+            : '';
+    const normalizedWorkstreamId = workstreamId.toLowerCase();
+    if (!workstreamId || normalizedWorkstreamId === 'main' || normalizedWorkstreamId === 'all')
+        return false;
     return !(details.tool ||
         details.tool_status ||
         details.tool_run_id ||
@@ -397,6 +412,9 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
     const fileInputRef = useRef(null);
     // Staged files - stored locally until workflow starts
     const [stagedFiles, setStagedFiles] = useState([]);
+    const [areStagedFilesExpanded, setAreStagedFilesExpanded] = useState(false);
+    const visibleStagedFiles = areStagedFilesExpanded ? stagedFiles : stagedFiles.slice(0, COLLAPSED_STAGED_FILE_COUNT);
+    const hiddenStagedFileCount = stagedFiles.length - COLLAPSED_STAGED_FILE_COUNT;
     useEffect(() => {
         onAgentWorkingChange?.(isSending);
     }, [isSending, onAgentWorkingChange]);
@@ -470,6 +488,11 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
     const removeStagedFile = useCallback((index) => {
         setStagedFiles((prev) => prev.filter((_, i) => i !== index));
     }, []);
+    useEffect(() => {
+        if (stagedFiles.length <= COLLAPSED_STAGED_FILE_COUNT) {
+            setAreStagedFilesExpanded(false);
+        }
+    }, [stagedFiles.length]);
     useEffect(() => {
         // Focus the input field when component mounts
         if (inputRef.current) {
@@ -632,7 +655,7 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
             allowWorkflowControl,
             onAgentWorkingChange, agentRunId: startedAgentRunId, title: title, pendingStartMessage: pendingStartMessage ?? undefined, pendingStartTimestamp: pendingStartTimestamp ?? undefined, initialToolApprovalMode: toolApprovalMode }));
     }
-    return (_jsx("div", { className: cn('flex flex-col items-center bg-background', isCompactStartView && !isExpandedStartComposer ? '' : 'h-full', className), children: _jsxs("div", { className: cn('relative flex w-full flex-col overflow-hidden border-0', isCompactStartView && !isExpandedStartComposer ? '' : 'h-full', fullWidth ? '' : 'max-w-4xl'), onDragEnter: canStageFiles ? handleDragEnter : undefined, onDragOver: canStageFiles ? handleDragOver : undefined, onDragLeave: canStageFiles ? handleDragLeave : undefined, onDrop: canStageFiles ? handleDrop : undefined, children: [canStageFiles && isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-info font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to stage for upload"] }) })), canStageFiles && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" })), !hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 bg-background px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedTitle })] }), onClose && !isModal && (_jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, title: t('agent.close'), className: "text-muted hover:text-foreground", children: _jsx(XIcon, { className: "size-4" }) }))] })), _jsx("div", { className: cn('flex flex-col items-center justify-end bg-background px-4', isCompactStartView ? 'shrink-0 pt-3' : 'flex-1 overflow-y-auto'), children: pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx("div", { className: cn('mx-auto flex w-full max-w-3xl flex-col justify-end', isCompactStartView ? '' : 'min-h-full py-8'), children: initialMessage && (_jsx("div", { className: "text-[15px] leading-relaxed text-foreground/80", children: initialMessage })) })) }), _jsx("div", { className: cn('bg-background px-4 pb-safe-area-4 pt-2', isExpandedStartComposer ? 'flex min-h-0 flex-1 flex-col' : 'shrink-0'), children: _jsxs("div", { className: cn('mx-auto flex max-w-3xl flex-col gap-3 rounded-2xl border border-border/70 bg-mixer-muted/15 p-3 shadow-lg shadow-black/5', isExpandedStartComposer && 'min-h-0 w-full flex-1', inputContainerClassName), children: [canStageFiles && stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention", title: t('agent.fileStagedTooltip'), children: [_jsx(FileTextIcon, { className: "size-3.5" }), _jsx("span", { className: "max-w-[120px] truncate", children: file.name }), _jsx("span", { className: "text-xs opacity-70", children: t('agent.staged') }), _jsx(Button, { variant: "unstyled", "aria-label": `Remove staged file ${file.name}`, onClick: () => removeStagedFile(index), className: "ms-1 rounded p-0.5 hover:bg-attention/20", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${file.size}-${file.lastModified}`))) })), _jsx(Textarea, { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: resolvedPlaceholder, disabled: isSending, rows: 2, className: cn('min-h-[72px] resize-none overflow-hidden border-0 bg-transparent px-0 py-0 text-sm leading-6 shadow-none focus-visible:ring-0', isExpandedStartComposer && 'min-h-0 flex-1', inputClassName), style: isExpandedStartComposer
+    return (_jsx("div", { className: cn('flex flex-col items-center bg-background', isCompactStartView && !isExpandedStartComposer ? '' : 'h-full', className), children: _jsxs("div", { className: cn('relative flex w-full flex-col overflow-hidden border-0', isCompactStartView && !isExpandedStartComposer ? '' : 'h-full', fullWidth ? '' : 'max-w-4xl'), onDragEnter: canStageFiles ? handleDragEnter : undefined, onDragOver: canStageFiles ? handleDragOver : undefined, onDragLeave: canStageFiles ? handleDragLeave : undefined, onDrop: canStageFiles ? handleDrop : undefined, children: [canStageFiles && isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-info font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to stage for upload"] }) })), canStageFiles && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" })), !hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 bg-background px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedTitle })] }), onClose && !isModal && (_jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, title: t('agent.close'), className: "text-muted hover:text-foreground", children: _jsx(XIcon, { className: "size-4" }) }))] })), _jsx("div", { className: cn('flex flex-col items-center justify-end bg-background px-4', isCompactStartView ? 'shrink-0 pt-3' : 'flex-1 overflow-y-auto'), children: pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx("div", { className: cn('mx-auto flex w-full max-w-3xl flex-col justify-end', isCompactStartView ? '' : 'min-h-full py-8'), children: initialMessage && (_jsx("div", { className: "text-[15px] leading-relaxed text-foreground/80", children: initialMessage })) })) }), _jsx("div", { className: cn('bg-background px-4 pb-safe-area-4 pt-2', isExpandedStartComposer ? 'flex min-h-0 flex-1 flex-col' : 'shrink-0'), children: _jsxs("div", { className: cn('mx-auto flex max-w-3xl flex-col gap-3 rounded-2xl border border-border/70 bg-mixer-muted/15 p-3 shadow-lg shadow-black/5', isExpandedStartComposer && 'min-h-0 w-full flex-1', inputContainerClassName), children: [canStageFiles && stagedFiles.length > 0 && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [visibleStagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention", title: t('agent.fileStagedTooltip'), children: [_jsx(FileTextIcon, { className: "size-3.5" }), _jsx("span", { className: "max-w-[120px] truncate", children: file.name }), _jsx("span", { className: "text-xs opacity-70", children: t('agent.staged') }), _jsx(Button, { variant: "unstyled", "aria-label": `Remove staged file ${file.name}`, onClick: () => removeStagedFile(index), className: "ms-1 rounded p-0.5 hover:bg-attention/20", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${file.size}-${file.lastModified}`))), stagedFiles.length > COLLAPSED_STAGED_FILE_COUNT && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-expanded": areStagedFilesExpanded, onClick: () => setAreStagedFilesExpanded((expanded) => !expanded), className: "h-8 shrink-0 gap-1 rounded-xl px-2.5 text-xs text-muted", children: [!areStagedFilesExpanded && _jsxs("span", { children: ["+", hiddenStagedFileCount] }), areStagedFilesExpanded ? t('agent.showLess') : t('agent.showMore'), _jsx(ChevronDown, { className: cn('size-3.5 transition-transform', areStagedFilesExpanded && 'rotate-180'), "aria-hidden": "true" })] }))] })), _jsx(Textarea, { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: resolvedPlaceholder, disabled: isSending, rows: 2, className: cn('min-h-[72px] resize-none overflow-hidden border-0 bg-transparent px-0 py-0 text-sm leading-6 shadow-none focus-visible:ring-0', isExpandedStartComposer && 'min-h-0 flex-1', inputClassName), style: isExpandedStartComposer
                                     ? { minHeight: '72px', maxHeight: 'none' }
                                     : { minHeight: '72px', maxHeight: '200px' } }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [canStageFiles && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, "aria-label": t('agent.upload'), className: "rounded-full text-muted", title: t('agent.upload'), children: _jsx(UploadIcon, { className: "size-4" }) })), interactive && (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: setToolApprovalMode, disabled: isSending }))] }), _jsx(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, variant: "ghost", size: "icon", className: cn('size-9 rounded-full border border-border/60 bg-foreground text-background shadow-sm', 'hover:bg-foreground/90 hover:text-background', 'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100'), title: resolvedStartButtonText, children: isSending ? _jsx(Spinner, { size: "sm" }) : _jsx(ArrowUpIcon, { className: "size-4" }) })] })] }) })] }) }));
 }
@@ -673,7 +696,7 @@ streamingMessageClassNames,
 // BatchProgressPanel className overrides
 batchProgressPanelClassNames, 
 // AllMessagesMixed className overrides
-workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, initialRequestData, initialRequestSchema, initialRequestTitle, initialRequestTemplate, payloadContent, conversationContent, conversationTab = false, pendingStartMessage, pendingStartTimestamp, initialToolApprovalMode, enablePlayback, showPlaybackToggle = true, }) {
+workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, initialRequestData, initialRequestSchema, initialRequestTitle, initialRequestTemplate, payloadContent, conversationContent, conversationTab = false, pendingStartMessage, pendingStartTimestamp, initialToolApprovalMode, enablePlayback, showPlaybackToggle = true, messageFilter, }) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
     const toast = useToast();
@@ -683,7 +706,8 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     const { messages, streamingMessages, isCompleted, initialHistoryStatus, debugChunkFlash, addOptimisticMessage, updateOptimisticMessageStatus, reconnect: reconnectStream, agentRunStatus, workflowRunId, serverFileUpdates, } = useAgentStream(client, agentRunId, onMessage);
     const { plans, activePlanIndex, setActivePlanIndex, workstreamStatusMap, showInput, showSlidingPanel, setShowSlidingPanel, } = useAgentPlans(messages, interactive, isModal);
     const { openDocuments, activeDocumentId, isDocPanelOpen, docRefreshKey, closeDocPanel: handleCloseDocPanel, closeDocument: handleCloseDocument, selectDocument, openDocInPanel, updateDocumentTitle, } = useDocumentPanel(messages);
-    const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile, clearProcessingFiles } = useFileProcessing(client, agentRunId, serverFileUpdates, toast);
+    const deliveredArtifactRefs = useMemo(() => collectDeliveredArtifactRefs(messages), [messages]);
+    const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile, clearProcessingFiles } = useFileProcessing(client, agentRunId, serverFileUpdates, toast, deliveredArtifactRefs);
     const canUploadFiles = interactive && !hideFileUpload;
     const handleRemoveProcessingFile = useCallback((fileId) => {
         void removeProcessingFile(fileId);
@@ -768,6 +792,19 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     // loading race (status fetch vs. message stream, where `showInput` defaults to `true`)
     // can't transiently re-show the composer once we know the run failed.
     const isFailed = useMemo(() => effectiveWorkflowStatus?.toUpperCase() === 'FAILED' || agentRunStatus?.toUpperCase() === 'FAILED', [effectiveWorkflowStatus, agentRunStatus]);
+    const workflowFailureReason = useMemo(() => {
+        for (let index = messages.length - 1; index >= 0; index--) {
+            const message = messages[index];
+            if (message.type !== AgentMessageType.ERROR)
+                continue;
+            if (getWorkstreamId(message) !== 'main')
+                continue;
+            const text = typeof message.message === 'string' ? message.message.trim() : '';
+            if (text)
+                return text;
+        }
+        return undefined;
+    }, [messages]);
     // Read inside handleSendMessage (a stable callback) without widening its deps.
     const isWorkflowTerminalRef = useRef(isWorkflowTerminal);
     isWorkflowTerminalRef.current = isWorkflowTerminal;
@@ -825,16 +862,20 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     }, [activeWorkstreamDisplayName, placeholder, t]);
     const canShowPlaybackToggle = showPlaybackToggle && enablePlayback === undefined && isAgentChatPlaybackAvailable();
     const isPlaybackEnabled = enablePlayback ?? (isAgentChatPlaybackEnabled() || isPlaybackToggleEnabled);
-    const playbackSourceMessages = useMemo(() => {
+    const transcriptSourceMessages = useMemo(() => {
         // Passive artifact autosaves are surfaced by the editor's own save indicator, not the chat.
-        const visibleMessages = messages.filter((message) => !isPassiveArtifactUpdate(message) && !(hiddenMessageTypes?.includes(message.type) ?? false));
-        return filterMessagesForActiveWorkstream(visibleMessages, activeWorkstream);
-    }, [activeWorkstream, hiddenMessageTypes, messages]);
+        return messages.filter((message) => !isPassiveArtifactUpdate(message) && !(hiddenMessageTypes?.includes(message.type) ?? false));
+    }, [hiddenMessageTypes, messages]);
+    const playbackSourceMessages = useMemo(() => filterMessagesForActiveWorkstream(transcriptSourceMessages, activeWorkstream), [activeWorkstream, transcriptSourceMessages]);
     const playbackState = useMemo(() => createPlaybackState(playbackSourceMessages, playbackCursor, isPlaybackEnabled), [isPlaybackEnabled, playbackCursor, playbackSourceMessages]);
     const clampedPlaybackCursor = playbackState.cursor;
     const isPlaybackLive = playbackState.isLive;
     const isPlaybackAtLatest = isPlaybackEnabled && !isPlaybackLive && playbackState.cursorIndex === playbackSourceMessages.length - 1;
     const displayedMessages = playbackState.displayedMessages;
+    const renderedMessages = useMemo(() => (messageFilter ? displayedMessages.filter((message) => messageFilter(message)) : displayedMessages), [displayedMessages, messageFilter]);
+    const renderedWorkstreamSourceMessages = useMemo(() => messageFilter
+        ? transcriptSourceMessages.filter((message) => messageFilter(message))
+        : transcriptSourceMessages, [messageFilter, transcriptSourceMessages]);
     const displayedStreamingMessages = isPlaybackLive ? streamingMessages : EMPTY_STREAMING_MESSAGES;
     const playbackDerivedWorkstreams = useMemo(() => deriveWorkstreamsFromMessages(displayedMessages), [displayedMessages]);
     const playbackActiveWorkstreams = useMemo(() => playbackDerivedWorkstreams.filter((ws) => isActiveWorkstreamStatus(ws.status)), [playbackDerivedWorkstreams]);
@@ -844,7 +885,15 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     useEffect(() => {
         onAgentWorkingChange?.(isAgentWorking);
     }, [isAgentWorking, onAgentWorkingChange]);
-    const pendingRequestInputMessage = useMemo(() => getPendingRequestInputMessage(displayedMessages), [displayedMessages]);
+    const pendingRequestInputMessage = useMemo(() => {
+        const answeredRequestInputKeys = new Set();
+        for (const message of displayedMessages) {
+            if (isRequestInputAnsweredForSession(agentRunId, message)) {
+                answeredRequestInputKeys.add(getRequestInputResolutionKey(message));
+            }
+        }
+        return getPendingRequestInputMessage(displayedMessages, 'main', answeredRequestInputKeys);
+    }, [agentRunId, displayedMessages]);
     // A terminal run silently drops user input unless it can be continued (see the guard in
     // handleSendMessage), so never surface an actionable question overlay in that state —
     // the terminal status box renders instead.
@@ -860,7 +909,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             agentRunId,
             messageCount: messages.length,
             playbackMessageCount: playbackSourceMessages.length,
-            displayedMessageCount: displayedMessages.length,
+            displayedMessageCount: renderedMessages.length,
             streamingCount: streamingMessages.size,
             displayedStreamingCount: displayedStreamingMessages.size,
             initialHistoryStatus,
@@ -884,7 +933,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         agentRunStatus,
         clampedPlaybackCursor,
         displayedIsCompleted,
-        displayedMessages.length,
+        renderedMessages.length,
         displayedStreamingMessages.size,
         effectiveIsCompleted,
         effectiveWorkflowStatus,
@@ -1209,6 +1258,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             });
             return;
         }
+        const requestInputId = getRequestInputResponseIdFromMetadata(inputMetadata);
         setIsSending(true);
         const attachedDocs = getAttachedDocs?.() || [];
         const contextMetadata = getMessageContext?.() || {};
@@ -1246,6 +1296,9 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
                 _messageId: messageId,
                 _deliveryStatus: 'sending',
                 ...(inputMetadata?.editing_action ? { editing_action: inputMetadata.editing_action } : {}),
+                ...(inputMetadata?.request_input_response
+                    ? { request_input_response: inputMetadata.request_input_response }
+                    : {}),
             },
         };
         addOptimisticMessage(optimisticMessage);
@@ -1271,6 +1324,9 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         // buffers the signal until the new run is ready to receive it. We reconnect
         // the stream in place (rather than remounting via onRestart) so the existing
         // timeline is preserved and the new exchange appends seamlessly at the bottom.
+        if (requestInputId) {
+            markRequestInputIdAnsweredForSession(agentRunId, requestInputId);
+        }
         const deliver = (async () => {
             await waitForPendingToolApprovalModeChange();
             if (isWorkflowTerminalRef.current) {
@@ -1282,6 +1338,9 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         })();
         deliver
             .catch((err) => {
+            if (requestInputId) {
+                clearRequestInputIdAnsweredForSession(agentRunId, requestInputId);
+            }
             updateOptimisticMessageStatus(messageId, 'failed');
             toast({
                 status: 'error',
@@ -1318,7 +1377,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     // After the user connects an MCP server requested via request_mcp_connection, flag the
     // conversation for tool re-discovery and resume it with a confirmation message so the agent
     // continues automatically with the newly-available tools.
-    const handleMcpConnected = useCallback(async (cfg) => {
+    const handleMcpConnected = useCallback(async (cfg, metadata) => {
         // Await the dirty-flag signal BEFORE sending the follow-up message so Temporal records
         // McpConfigChanged ahead of the UserInput. Otherwise the resume turn could run before
         // the flag is set and use the stale tool catalog. An omitted disabled list preserves
@@ -1329,7 +1388,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         catch (err) {
             console.error('Failed to signal MCP config change', err);
         }
-        handleSendMessage(t('agent.mcpConnectedMessage', { name: cfg.name }));
+        handleSendMessage(t('agent.mcpConnectedMessage', { name: cfg.name }), metadata);
     }, [client, agentRunId, handleSendMessage, t]);
     // Per-conversation MCP deactivation set, seeded from the run and updated live via the
     // MCP action menu in the composer toolbar. Changes are pushed to the running workflow
@@ -1636,19 +1695,19 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     }, new Map()), [getActivePlan.plan]);
     const renderConversationHeader = (variant) => (_jsx(Header, { title: actualTitle, variant: variant, isCompleted: effectiveIsCompleted, isTerminal: isWorkflowTerminal, onClose: onClose, isModal: isModal, agentRunId: agentRunId, workflowRunId: workflowRunId || '', viewMode: viewMode, onViewModeChange: handleViewModeChange, showPlanPanel: isRightPanelVisible, hasPlan: showRightPanelProp && plans.length > 0, showPlanButton: showRightPanelProp && !conversationTab, onTogglePlanPanel: handleTogglePlanPanel, showPlaybackButton: canShowPlaybackToggle, isPlaybackEnabled: isPlaybackEnabled, onTogglePlayback: handleTogglePlayback, onDownload: downloadConversation, onExportFixture: exportReplayFixture, resetWorkflow: resetWorkflow, onClone: onClone, onShowDetails: onShowDetails, allowWorkflowControl: allowWorkflowControl, onExportPdf: exportConversationPdf, isReceivingChunks: debugChunkFlash }));
     // Conversation area inner content — shared between main layout and conversationTab mode
-    const conversationAreaJsx = (_jsxs("div", { ref: conversationRef, "data-agent-playback-enabled": isPlaybackEnabled || undefined, "data-agent-playback-cursor": isPlaybackEnabled ? clampedPlaybackCursor : undefined, "data-agent-live-message-count": messages.length, "data-agent-rendered-message-count": displayedMessages.length, className: cn('flex flex-col min-h-0 min-w-0 border-0', conversationTab
+    const conversationAreaJsx = (_jsxs("div", { ref: conversationRef, "data-agent-playback-enabled": isPlaybackEnabled || undefined, "data-agent-playback-cursor": isPlaybackEnabled ? clampedPlaybackCursor : undefined, "data-agent-live-message-count": messages.length, "data-agent-rendered-message-count": renderedMessages.length, className: cn('flex flex-col min-h-0 min-w-0 border-0', conversationTab
             ? 'flex-1 h-full'
             : isRightPanelVisible
                 ? 'w-full flex-1 min-h-[50vh]'
                 : fullWidth
                     ? 'flex-1 w-full'
-                    : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`), children: [!hideHeader && headerVariant === 'compact' && (_jsx("div", { className: "flex flex-shrink-0 justify-end border-b border-border/60 px-2 py-1 lg:hidden", children: renderConversationHeader('compact') })), !hideHeader && headerVariant !== 'compact' && (_jsx("div", { className: "flex-shrink-0", children: renderConversationHeader(headerVariant) })), isPlaybackEnabled && (_jsx("div", { className: "flex flex-shrink-0 justify-end px-2 py-1.5", children: _jsx(AgentChatPlaybackControls, { cursor: clampedPlaybackCursor, messages: playbackSourceMessages, onChangeCursor: handleChangePlaybackCursor }) })), messages.length === 0 && !effectiveIsCompleted && pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx(AllMessagesMixed, { messages: displayedMessages, workstreamSourceMessages: messages, bottomRef: bottomRef, isCompleted: displayedIsCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showRightPanelProp && showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: displayedStreamingMessages, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onOpenArtifact: showArtifacts ? handleOpenArtifact : undefined, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, toolCallGroupClassNames: toolCallGroupClassNames, hideToolCallsInViewMode: hideToolCallsInViewMode, streamingMessageClassNames: streamingMessageClassNames, batchProgressPanelClassNames: batchProgressPanelClassNames, artifactRunId: agentRunId, viewMode: viewMode, hideWorkstreamTabs: hideWorkstreamTabs, workingIndicatorClassName: workingIndicatorClassName, messageListClassName: messageListClassName, StoreLinkComponent: effectiveStoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent, prependFriendlyMessage: prependFriendlyMessage, initialRequestData: initialRequestData, initialRequestSchema: initialRequestSchema, initialRequestTitle: initialRequestTitle, initialRequestTemplate: initialRequestTemplate, showInitialRequest: initialHistoryStatus === 'empty' && messages.length === 0, hiddenMessageTypes: hiddenMessageTypes, disableAutoScroll: !isPlaybackLive, renderRequestInputControls: !shouldShowRequestInputOverlay, activeWorkstream: activeWorkstream, onActiveWorkstreamChange: setActiveWorkstream })), shouldShowRequestInputOverlay ? (_jsx(AgentRequestInputOverlay, { message: pendingRequestInputMessage, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onMcpConnected: isPlaybackLive ? handleMcpConnected : undefined, disabled: isUploading || !isPlaybackLive, isLoading: isSending || isUploading })) : isViewingPlaybackHistory && playbackActiveWorkstreams.length > 0 ? (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: _jsx(ActiveWorkstreamsSummary, { activeWorkstreams: playbackActiveWorkstreams }) })) : (shouldRenderLiveMessageInputArea && (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: isFailed ? (
+                    : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`), children: [!hideHeader && headerVariant === 'compact' && (_jsx("div", { className: "flex flex-shrink-0 justify-end border-b border-border/60 px-2 py-1 lg:hidden", children: renderConversationHeader('compact') })), !hideHeader && headerVariant !== 'compact' && (_jsx("div", { className: "flex-shrink-0", children: renderConversationHeader(headerVariant) })), isPlaybackEnabled && (_jsx("div", { className: "flex flex-shrink-0 justify-end px-2 py-1.5", children: _jsx(AgentChatPlaybackControls, { cursor: clampedPlaybackCursor, messages: playbackSourceMessages, onChangeCursor: handleChangePlaybackCursor }) })), messages.length === 0 && !effectiveIsCompleted && pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx(AllMessagesMixed, { messages: renderedMessages, workstreamSourceMessages: renderedWorkstreamSourceMessages, bottomRef: bottomRef, isCompleted: displayedIsCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showRightPanelProp && showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: displayedStreamingMessages, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onOpenArtifact: showArtifacts ? handleOpenArtifact : undefined, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, toolCallGroupClassNames: toolCallGroupClassNames, hideToolCallsInViewMode: hideToolCallsInViewMode, streamingMessageClassNames: streamingMessageClassNames, batchProgressPanelClassNames: batchProgressPanelClassNames, artifactRunId: agentRunId, viewMode: viewMode, hideWorkstreamTabs: hideWorkstreamTabs, workingIndicatorClassName: workingIndicatorClassName, messageListClassName: messageListClassName, StoreLinkComponent: effectiveStoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent, prependFriendlyMessage: prependFriendlyMessage, initialRequestData: initialRequestData, initialRequestSchema: initialRequestSchema, initialRequestTitle: initialRequestTitle, initialRequestTemplate: initialRequestTemplate, showInitialRequest: initialHistoryStatus === 'empty' && messages.length === 0, hiddenMessageTypes: hiddenMessageTypes, disableAutoScroll: !isPlaybackLive, renderRequestInputControls: !shouldShowRequestInputOverlay, activeWorkstream: activeWorkstream, onActiveWorkstreamChange: setActiveWorkstream })), shouldShowRequestInputOverlay ? (_jsx(AgentRequestInputOverlay, { message: pendingRequestInputMessage, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onMcpConnected: isPlaybackLive ? handleMcpConnected : undefined, disabled: isUploading || !isPlaybackLive, isLoading: isSending || isUploading })) : isViewingPlaybackHistory && playbackActiveWorkstreams.length > 0 ? (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: _jsx(ActiveWorkstreamsSummary, { activeWorkstreams: playbackActiveWorkstreams, onSelectWorkstream: setActiveWorkstream }) })) : (shouldRenderLiveMessageInputArea && (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: isFailed ? (
                 // FAILED takes priority over every other branch so the composer can
                 // never render for a failed run. Use the caller's action when provided,
                 // otherwise fall back to the default failed message box.
-                (failedAction ?? (_jsx(MessageBox, { status: "error", icon: null, className: "m-2", children: "This Workflow is FAILED" })))) : effectiveWorkflowStatus &&
+                (failedAction ?? (_jsx(MessageBox, { status: "error", title: t('agent.failed'), className: "m-2", children: workflowFailureReason ?? t('agent.error') })))) : effectiveWorkflowStatus &&
                     effectiveWorkflowStatus !== 'RUNNING' &&
-                    !canContinueConversation ? (viewMode === 'sliding' && effectiveWorkflowStatus === 'COMPLETED' ? (_jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-3 text-sm text-muted", children: _jsxs("div", { className: "flex items-center gap-2 border-t border-success/25 pt-3 text-success", children: [_jsx(CheckCircle, { className: "size-4" }), _jsx("span", { className: "font-medium", children: "Workflow completed" })] }) })) : (_jsxs(MessageBox, { status: effectiveWorkflowStatus === 'COMPLETED' ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] }))) : ((showInput || canContinueConversation) && (_jsxs(_Fragment, { children: [composerContext, _jsx(MessageInput, { onSend: handleSendMessage, onStop: allowWorkflowControl ? handleStopWorkflow : undefined, approvalModeSlot: interactive && toolApprovalMode ? (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: handleToolApprovalModeChange, disabled: !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl })) : undefined, mcpSlot: _jsx(McpConnectionsActionMenu, { disabledCollections: mcpDisabled, onChange: handleMcpDisabledChange, onConnectionChange: handleMcpConnectionChange }), disabled: isUploading || !isPlaybackLive, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !effectiveIsCompleted, isCompleted: effectiveIsCompleted, contextWindowUsage: canCompactContext ? contextWindowUsage : undefined, onCompactContext: canCompactContext ? handleCompactContext : undefined, isCompactingContext: isCompactingContext, activeTaskCount: activeTaskCount, activeWorkstreams: composerActiveWorkstreams, placeholder: composerPlaceholder, onFilesSelected: canUploadFiles ? handleFileUpload : undefined, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, onRemoveProcessingFile: handleRemoveProcessingFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles, processingFiles: processingFiles, artifactRunId: agentRunId, hasProcessingFiles: hasProcessingFiles, renderDocumentSearch: renderDocumentSearch, selectedDocuments: selectedDocuments, onRemoveDocument: onRemoveDocument, hideObjectLinking: hideObjectLinking, hideFileUpload: !canUploadFiles, disableDropZone: canUploadFiles, className: inputContainerClassName, inputClassName: inputClassName })] }))) })))] }));
+                    !canContinueConversation ? (viewMode === 'sliding' && effectiveWorkflowStatus === 'COMPLETED' ? (_jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-3 text-sm text-muted", children: _jsxs("div", { className: "flex items-center gap-2 border-t border-success/25 pt-3 text-success", children: [_jsx(CheckCircle, { className: "size-4" }), _jsx("span", { className: "font-medium", children: "Workflow completed" })] }) })) : (_jsxs(MessageBox, { status: effectiveWorkflowStatus === 'COMPLETED' ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] }))) : ((showInput || canContinueConversation) && (_jsxs(_Fragment, { children: [composerContext, _jsx(MessageInput, { onSend: handleSendMessage, onStop: allowWorkflowControl ? handleStopWorkflow : undefined, approvalModeSlot: interactive && toolApprovalMode ? (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: handleToolApprovalModeChange, disabled: !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl })) : undefined, mcpSlot: _jsx(McpConnectionsActionMenu, { disabledCollections: mcpDisabled, onChange: handleMcpDisabledChange, onConnectionChange: handleMcpConnectionChange }), disabled: isUploading || !isPlaybackLive, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !effectiveIsCompleted, isCompleted: effectiveIsCompleted, contextWindowUsage: canCompactContext ? contextWindowUsage : undefined, onCompactContext: canCompactContext ? handleCompactContext : undefined, isCompactingContext: isCompactingContext, activeTaskCount: activeTaskCount, activeWorkstreams: composerActiveWorkstreams, onSelectWorkstream: setActiveWorkstream, placeholder: composerPlaceholder, onFilesSelected: canUploadFiles ? handleFileUpload : undefined, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, onRemoveProcessingFile: handleRemoveProcessingFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles, processingFiles: processingFiles, artifactRunId: agentRunId, hasProcessingFiles: hasProcessingFiles, renderDocumentSearch: renderDocumentSearch, selectedDocuments: selectedDocuments, onRemoveDocument: onRemoveDocument, hideObjectLinking: hideObjectLinking, hideFileUpload: !canUploadFiles, disableDropZone: canUploadFiles, className: inputContainerClassName, inputClassName: inputClassName })] }))) })))] }));
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
     const mainContent = (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("div", { ref: conversationLayoutRef, className: cn('flex flex-col lg:flex-row gap-2 w-full h-full relative overflow-hidden', canUploadFiles && isDragOver && 'ring-2 ring-blue-400 ring-inset', className), onDragEnter: canUploadFiles ? handleDragEnter : undefined, onDragOver: canUploadFiles ? handleDragOver : undefined, onDragLeave: canUploadFiles ? handleDragLeave : undefined, onDrop: canUploadFiles ? handleDrop : undefined, children: [canUploadFiles && isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to upload"] }) })), !conversationTab && conversationAreaJsx, !conversationTab && headerVariant === 'compact' && !hideHeader && (_jsx("div", { className: "hidden h-full w-12 shrink-0 items-start justify-center px-1 pt-2 lg:flex", children: renderConversationHeader('compact') })), isRightPanelVisible && (_jsxs(_Fragment, { children: [!conversationTab && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize right panel", "aria-valuenow": Math.round(rightPanelWidth), "aria-valuemin": 300, "aria-valuetext": `${Math.round(rightPanelWidth)} pixels`, tabIndex: 0, className: "hidden lg:block lg:w-1 lg:shrink-0 cursor-col-resize bg-border/70 hover:bg-border transition-colors", onMouseDown: () => setIsRightPanelResizing(true), onKeyDown: (event) => {
                                     if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')