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

package/src/features/agent/chat/AgentRequestInputOverlay.tsx

@@ -7,15 +7,17 @@ import { RemoteMcpConnectionButton } from '../../oauth/RemoteMcpConnectionButton
 import { AskUserWidget } from './AskUserWidget';
 import {
     getRequestInputDisplayText,
+    getRequestInputResponseMetadata,
     getToolApprovalResponseMetadata,
     type RequestInputMessageWithUx,
+    sendRequestInputResponse,
 } from './ModernAgentOutput/requestInputMessages';
 
 export interface AgentRequestInputOverlayProps {
     message?: RequestInputMessageWithUx;
     onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
     /** Called after the user connects the MCP server requested by request_mcp_connection. */
-    onMcpConnected?: (cfg: McpConnectUxConfig) => void;
+    onMcpConnected?: (cfg: McpConnectUxConfig, metadata?: Record<string, unknown>) => void;
     isLoading?: boolean;
     disabled?: boolean;
     className?: string;
@@ -81,11 +83,7 @@ export function AgentRequestInputOverlay({
     const displayText = getRequestInputDisplayText(message);
     const send = (value: string, metadata?: Record<string, unknown>) => {
         if (isDisabled) return;
-        if (metadata) {
-            onSendMessage?.(value, metadata);
-        } else {
-            onSendMessage?.(value);
-        }
+        sendRequestInputResponse(onSendMessage, message, value, metadata);
     };
 
     const wrapperClassName = cn(
@@ -102,7 +100,7 @@ export function AgentRequestInputOverlay({
                     <div className="min-w-0 text-sm leading-6 text-foreground/85">{displayText}</div>
                     <McpRequestInputControls
                         mcpConnect={mcpConnect}
-                        onMcpConnected={onMcpConnected}
+                        onMcpConnected={(cfg) => onMcpConnected?.(cfg, getRequestInputResponseMetadata(message))}
                         onDecline={() => send(t('agent.mcpDeclinedMessage', { name: mcpConnect.name }))}
                         disabled={isDisabled}
                     />

package/src/features/agent/chat/ModernAgentConversation.test.tsx

@@ -60,6 +60,7 @@ vi.mock('./ModernAgentOutput/MessageInput', () => ({
         onSend: (message: string) => void;
         activeTaskCount?: number;
         activeWorkstreams?: Array<{ workstream_id: string; status: string }>;
+        onSelectWorkstream?: (workstreamId: string) => void;
         isCompleted?: boolean;
         isStreaming?: boolean;
         placeholder?: string;
@@ -90,6 +91,7 @@ vi.mock('./ModernAgentOutput/AllMessagesMixed', async () => {
     return {
         default: ({
             messages,
+            workstreamSourceMessages,
             streamingMessages,
             isCompleted,
             bottomRef,
@@ -101,6 +103,7 @@ vi.mock('./ModernAgentOutput/AllMessagesMixed', async () => {
             onActiveWorkstreamChange,
         }: {
             messages: AgentMessage[];
+            workstreamSourceMessages?: AgentMessage[];
             streamingMessages: Map<string, unknown>;
             isCompleted?: boolean;
             bottomRef: React.RefObject<HTMLDivElement>;
@@ -118,6 +121,7 @@ vi.mock('./ModernAgentOutput/AllMessagesMixed', async () => {
             );
             mocks.allMessagesMixedProps({
                 messages,
+                workstreamSourceMessages,
                 streamingMessages,
                 isCompleted,
                 onSendMessage,
@@ -230,6 +234,7 @@ function latestAllMessagesMixedProps() {
     return calls[calls.length - 1]?.[0] as
         | {
               messages: AgentMessage[];
+              workstreamSourceMessages?: AgentMessage[];
               streamingMessages: Map<string, unknown>;
               isCompleted?: boolean;
               showInitialRequest?: boolean;
@@ -253,6 +258,7 @@ function latestRightPanelProps() {
 describe('ModernAgentConversation send handling', () => {
     beforeEach(() => {
         vi.clearAllMocks();
+        window.sessionStorage.clear();
         mocks.restart.mockResolvedValue({ id: 'agent-run-1' });
         mocks.sendSignal.mockResolvedValue({});
         mocks.getActiveWorkstreams.mockResolvedValue({ running: [] });
@@ -561,6 +567,37 @@ describe('ModernAgentConversation send handling', () => {
         });
     });
 
+    it('collapses staged files in the start composer', () => {
+        const { container } = renderWithProviders(
+            <ModernAgentConversation startWorkflow={vi.fn()} hideHeader initialMessage="" />,
+        );
+        const input = container.querySelector('input[type="file"]');
+        const files = ['alpha.txt', 'beta.txt', 'gamma.txt', 'delta.txt', 'epsilon.txt'].map(
+            (name) => new File([name], name, { type: 'text/plain' }),
+        );
+
+        if (!input) {
+            throw new Error('Expected hidden file input to be rendered');
+        }
+
+        fireEvent.change(input, {
+            target: {
+                files,
+            },
+        });
+
+        expect(screen.getByText('alpha.txt')).not.toBeNull();
+        expect(screen.getByText('gamma.txt')).not.toBeNull();
+        expect(screen.queryByText('delta.txt')).toBeNull();
+        expect(screen.getByText('+2')).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /show more/i }));
+
+        expect(screen.getByText('delta.txt')).not.toBeNull();
+        expect(screen.getByText('epsilon.txt')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /show less/i })).not.toBeNull();
+    });
+
     it('signals approval mode changes for an active interactive run', async () => {
         mocks.retrieve.mockResolvedValue({
             tool_approval_mode: 'ask',
@@ -916,11 +953,13 @@ describe('ModernAgentConversation send handling', () => {
             onCompactContext?: () => void | Promise<void>;
         };
 
+        // Prompt-based, matching the server's checkpoint trigger: `total`
+        // includes reasoning/result tokens that never re-enter context.
         expect(latestMessageInputProps.contextWindowUsage).toEqual({
-            usedTokens: 50_000,
+            usedTokens: 40_000,
             checkpointTokens: 100_000,
-            usedPercent: 50,
-            remainingPercent: 50,
+            usedPercent: 40,
+            remainingPercent: 60,
         });
 
         act(() => {
@@ -1059,6 +1098,7 @@ describe('ModernAgentConversation send handling', () => {
         const latestMessageInputProps = mocks.messageInputProps.mock.lastCall?.[0] as {
             activeTaskCount?: number;
             activeWorkstreams?: Array<{ workstream_id: string; status: string }>;
+            onSelectWorkstream?: (workstreamId: string) => void;
         };
 
         expect(latestRightPanelProps.activeWorkstreams).toEqual([
@@ -1072,6 +1112,12 @@ describe('ModernAgentConversation send handling', () => {
             expect.objectContaining({ workstream_id: 'alpha', status: 'running' }),
             expect.objectContaining({ workstream_id: 'beta', status: 'running' }),
         ]);
+
+        act(() => {
+            latestMessageInputProps.onSelectWorkstream?.('beta');
+        });
+
+        expect(latestAllMessagesMixedProps()?.activeWorkstream).toBe('beta');
     });
 
     it('shows completed workstream lifecycle messages in the panel without counting them as active', async () => {
@@ -1488,6 +1534,80 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('does not resurrect an answered request overlay after remounting before the persisted echo arrives', async () => {
+        const requestMessage = {
+            ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),
+            details: {
+                request_id: 'ask-user-1',
+                ux: {
+                    options: [
+                        { id: 'red', label: 'Red' },
+                        { id: 'blue', label: 'Blue' },
+                    ],
+                },
+            },
+        };
+        mockStreamState({
+            messages: [requestMessage],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        const firstView = renderConversation();
+        fireEvent.click(screen.getByRole('button', { name: /Blue/ }));
+
+        await waitFor(() => expect(mocks.sendSignal).toHaveBeenCalledTimes(1));
+        expect(mocks.sendSignal).toHaveBeenCalledWith(
+            'agent-run-1',
+            'UserInput',
+            expect.objectContaining({
+                metadata: expect.objectContaining({
+                    request_input_response: { request_id: 'ask-user-1' },
+                }),
+            }),
+        );
+
+        firstView.unmount();
+        renderConversation();
+
+        expect(screen.queryByText('What is your favorite color?')).toBeNull();
+        expect(screen.queryByRole('button', { name: /Blue/ })).toBeNull();
+    });
+
+    it('restores a request overlay after its response fails to send', async () => {
+        mocks.sendSignal.mockRejectedValueOnce(new Error('offline'));
+        const requestMessage = {
+            ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),
+            details: {
+                request_id: 'ask-user-1',
+                ux: {
+                    options: [
+                        { id: 'red', label: 'Red' },
+                        { id: 'blue', label: 'Blue' },
+                    ],
+                },
+            },
+        };
+        mockStreamState({
+            messages: [requestMessage],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        const firstView = renderConversation();
+        fireEvent.click(screen.getByRole('button', { name: /Blue/ }));
+
+        await waitFor(() => {
+            expect(mocks.updateOptimisticMessageStatus).toHaveBeenCalledWith(expect.any(String), 'failed');
+        });
+
+        firstView.unmount();
+        renderConversation();
+
+        expect(screen.getByText('What is your favorite color?')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /Blue/ })).not.toBeNull();
+    });
+
     it('hides a stale request overlay when a terminal run cannot continue', () => {
         mockStreamState({
             messages: [
@@ -2213,6 +2333,78 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('hides the debug button when the playback toggle is disabled', () => {
+        mockStreamState({
+            messages: [
+                createMessage(AgentMessageType.QUESTION, 'first question'),
+                createMessage(AgentMessageType.ANSWER, 'first answer'),
+            ],
+        });
+
+        renderConversation({ hideHeader: false, showPlaybackToggle: false });
+
+        expect(mocks.headerProps).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                showPlaybackButton: false,
+            }),
+        );
+    });
+
+    it('filters transcript messages as conversation history updates', () => {
+        const question = createMessage(AgentMessageType.QUESTION, 'Summarize the launch plan.');
+        const internalUpdate = createMessage(AgentMessageType.UPDATE, 'Inspecting internal records.');
+        const answer = createMessage(AgentMessageType.ANSWER, 'The launch plan is ready.');
+        const messageFilter = (message: AgentMessage) => message.type !== AgentMessageType.UPDATE;
+
+        mockStreamState({ messages: [question, internalUpdate] });
+        const view = renderConversation({ messageFilter });
+
+        expect(latestAllMessagesMixedProps()?.messages).toEqual([question]);
+        expect(latestAllMessagesMixedProps()?.workstreamSourceMessages).toEqual([question]);
+
+        mockStreamState({ messages: [question, internalUpdate, answer] });
+        view.rerender(
+            <ModernAgentConversation
+                agentRunId="agent-run-1"
+                title="Agent"
+                hideHeader
+                hideMessageInput
+                showRightPanel={false}
+                messageFilter={messageFilter}
+            />,
+        );
+
+        expect(latestAllMessagesMixedProps()?.messages).toEqual([question, answer]);
+        expect(latestAllMessagesMixedProps()?.workstreamSourceMessages).toEqual([question, answer]);
+        expect(document.querySelector('[data-agent-live-message-count="3"]')).not.toBeNull();
+        expect(document.querySelector('[data-agent-rendered-message-count="2"]')).not.toBeNull();
+    });
+
+    it('keeps pending request input actionable when its transcript row is filtered out', () => {
+        const requestMessage = {
+            ...createMessage(AgentMessageType.REQUEST_INPUT, 'Choose a deployment region.'),
+            details: {
+                ux: {
+                    options: [
+                        { id: 'us', label: 'United States' },
+                        { id: 'eu', label: 'Europe' },
+                    ],
+                },
+            },
+        };
+        mockStreamState({
+            messages: [requestMessage],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({ messageFilter: () => false });
+
+        expect(latestAllMessagesMixedProps()?.messages).toEqual([]);
+        expect(screen.getByText('Choose a deployment region.')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /Europe/ })).not.toBeNull();
+    });
+
     it('keeps the replay fixture export action available while messages are empty', () => {
         mockStreamState({
             messages: [],

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -35,7 +35,7 @@ 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 type React from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { McpConnectionsActionMenu } from '../../oauth/McpConnectionsButton.js';
@@ -65,7 +65,14 @@ import MessageInput, {
     type UploadedFile,
 } from './ModernAgentOutput/MessageInput';
 import type { MessageItemClassNames } from './ModernAgentOutput/MessageItem';
-import { getPendingRequestInputMessage } from './ModernAgentOutput/requestInputMessages';
+import {
+    clearRequestInputIdAnsweredForSession,
+    getPendingRequestInputMessage,
+    getRequestInputResolutionKey,
+    getRequestInputResponseIdFromMetadata,
+    isRequestInputAnsweredForSession,
+    markRequestInputIdAnsweredForSession,
+} from './ModernAgentOutput/requestInputMessages';
 import type { StreamingMessageClassNames } from './ModernAgentOutput/StreamingMessage';
 import type { ToolCallGroupClassNames } from './ModernAgentOutput/ToolCallGroup';
 import {
@@ -98,6 +105,9 @@ export interface StartWorkflowOptions {
     tool_approval_mode?: AgentToolApprovalMode;
 }
 
+/** Controls whether a persisted message is included in the rendered conversation transcript. */
+export type AgentMessageFilter = (message: AgentMessage) => boolean;
+
 export type StartWorkflowFn = (
     initialMessage?: string,
     options?: StartWorkflowOptions,
@@ -106,6 +116,7 @@ export type StartWorkflowFn = (
 export type SendAgentMessageFn = (message: string, inputMetadata?: Record<string, unknown>) => void;
 
 const EMPTY_STREAMING_MESSAGES = new Map<string, never>();
+const COLLAPSED_STAGED_FILE_COUNT = 3;
 
 function getTimestampMs(timestamp: number | string | undefined): number {
     if (typeof timestamp === 'number') return timestamp;
@@ -137,8 +148,13 @@ function toContextWindowUsage(messages: AgentMessage[]): ContextWindowUsage | un
         const details = messages[index].details;
         if (!details) continue;
 
-        const tokenUsage = details.token_usage as { total?: unknown } | undefined;
-        const usedTokens = getNumberDetail(tokenUsage?.total);
+        const tokenUsage = details.token_usage as { prompt?: unknown; total?: unknown } | undefined;
+        // 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);
 
@@ -648,6 +664,11 @@ export interface ModernAgentConversationProps {
     hideDocumentPanel?: boolean;
     /** Message types to exclude from the conversation view */
     hiddenMessageTypes?: AgentMessageType[];
+    /**
+     * Optional presentation-only predicate for transcript messages. Returning false hides the message without
+     * changing the underlying conversation stream, workflow state, plans, or pending input.
+     */
+    messageFilter?: AgentMessageFilter;
 
     // Callback to get attached documents when sending messages
     // Returns array of { id, name } to include in message metadata and display
@@ -727,7 +748,7 @@ export interface ModernAgentConversationProps {
     initialToolApprovalMode?: AgentToolApprovalMode;
     /** Force display playback controls on or off. When omitted, local playback can be toggled from the header. */
     enablePlayback?: boolean;
-    /** Show a local toggle for display playback controls in the conversation action rail. */
+    /** Show the Debug button for local playback controls. Defaults to true; set to false to hide it. */
     showPlaybackToggle?: boolean;
 }
 
@@ -817,6 +838,9 @@ function StartWorkflowView({
 
     // Staged files - stored locally until workflow starts
     const [stagedFiles, setStagedFiles] = useState<File[]>([]);
+    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);
@@ -914,6 +938,12 @@ function StartWorkflowView({
         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) {
@@ -1208,7 +1238,7 @@ function StartWorkflowView({
                         {/* Staged files display */}
                         {canStageFiles && stagedFiles.length > 0 && (
                             <div className="flex flex-wrap gap-2">
-                                {stagedFiles.map((file, index) => (
+                                {visibleStagedFiles.map((file, index) => (
                                     <div
                                         key={`${file.name}-${file.size}-${file.lastModified}`}
                                         className="flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention"
@@ -1227,6 +1257,26 @@ function StartWorkflowView({
                                         </Button>
                                     </div>
                                 ))}
+                                {stagedFiles.length > COLLAPSED_STAGED_FILE_COUNT && (
+                                    <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"
+                                    >
+                                        {!areStagedFilesExpanded && <span>+{hiddenStagedFileCount}</span>}
+                                        {areStagedFilesExpanded ? t('agent.showLess') : t('agent.showMore')}
+                                        <ChevronDown
+                                            className={cn(
+                                                'size-3.5 transition-transform',
+                                                areStagedFilesExpanded && 'rotate-180',
+                                            )}
+                                            aria-hidden="true"
+                                        />
+                                    </Button>
+                                )}
                             </div>
                         )}
 
@@ -1392,6 +1442,7 @@ function ModernAgentConversationInner({
     initialToolApprovalMode,
     enablePlayback,
     showPlaybackToggle = true,
+    messageFilter,
 }: ModernAgentConversationProps & { agentRunId: string }) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
@@ -1621,13 +1672,16 @@ function ModernAgentConversationInner({
 
     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(
+        return messages.filter(
             (message) => !isPassiveArtifactUpdate(message) && !(hiddenMessageTypes?.includes(message.type) ?? false),
         );
-        return filterMessagesForActiveWorkstream(visibleMessages, activeWorkstream);
-    }, [activeWorkstream, hiddenMessageTypes, messages]);
+    }, [hiddenMessageTypes, messages]);
+    const playbackSourceMessages = useMemo(
+        () => filterMessagesForActiveWorkstream(transcriptSourceMessages, activeWorkstream),
+        [activeWorkstream, transcriptSourceMessages],
+    );
     const playbackState = useMemo(
         () => createPlaybackState(playbackSourceMessages, playbackCursor, isPlaybackEnabled),
         [isPlaybackEnabled, playbackCursor, playbackSourceMessages],
@@ -1637,6 +1691,17 @@ function ModernAgentConversationInner({
     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),
@@ -1653,10 +1718,15 @@ function ModernAgentConversationInner({
     useEffect(() => {
         onAgentWorkingChange?.(isAgentWorking);
     }, [isAgentWorking, onAgentWorkingChange]);
-    const pendingRequestInputMessage = useMemo(
-        () => getPendingRequestInputMessage(displayedMessages),
-        [displayedMessages],
-    );
+    const pendingRequestInputMessage = useMemo(() => {
+        const answeredRequestInputKeys = new Set<string>();
+        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.
@@ -1675,7 +1745,7 @@ function ModernAgentConversationInner({
             agentRunId,
             messageCount: messages.length,
             playbackMessageCount: playbackSourceMessages.length,
-            displayedMessageCount: displayedMessages.length,
+            displayedMessageCount: renderedMessages.length,
             streamingCount: streamingMessages.size,
             displayedStreamingCount: displayedStreamingMessages.size,
             initialHistoryStatus,
@@ -1699,7 +1769,7 @@ function ModernAgentConversationInner({
         agentRunStatus,
         clampedPlaybackCursor,
         displayedIsCompleted,
-        displayedMessages.length,
+        renderedMessages.length,
         displayedStreamingMessages.size,
         effectiveIsCompleted,
         effectiveWorkflowStatus,
@@ -2078,6 +2148,7 @@ function ModernAgentConversationInner({
                 return;
             }
 
+            const requestInputId = getRequestInputResponseIdFromMetadata(inputMetadata);
             setIsSending(true);
 
             const attachedDocs = getAttachedDocs?.() || [];
@@ -2120,6 +2191,9 @@ function ModernAgentConversationInner({
                     _messageId: messageId,
                     _deliveryStatus: 'sending',
                     ...(inputMetadata?.editing_action ? { editing_action: inputMetadata.editing_action } : {}),
+                    ...(inputMetadata?.request_input_response
+                        ? { request_input_response: inputMetadata.request_input_response }
+                        : {}),
                 },
             };
 
@@ -2151,6 +2225,9 @@ function ModernAgentConversationInner({
             // 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) {
@@ -2163,6 +2240,9 @@ function ModernAgentConversationInner({
 
             deliver
                 .catch((err) => {
+                    if (requestInputId) {
+                        clearRequestInputIdAnsweredForSession(agentRunId, requestInputId);
+                    }
                     updateOptimisticMessageStatus(messageId, 'failed');
                     toast({
                         status: 'error',
@@ -2202,7 +2282,7 @@ function ModernAgentConversationInner({
     // 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: McpConnectUxConfig) => {
+        async (cfg: McpConnectUxConfig, metadata?: Record<string, unknown>) => {
             // 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
@@ -2212,7 +2292,7 @@ function ModernAgentConversationInner({
             } catch (err: unknown) {
                 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],
     );
@@ -2594,7 +2674,7 @@ function ModernAgentConversationInner({
             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}
+            data-agent-rendered-message-count={renderedMessages.length}
             className={cn(
                 'flex flex-col min-h-0 min-w-0 border-0',
                 conversationTab
@@ -2629,8 +2709,8 @@ function ModernAgentConversationInner({
                 <PendingStartConversation message={pendingStartMessage} startedAt={pendingStartTimestamp} />
             ) : (
                 <AllMessagesMixed
-                    messages={displayedMessages}
-                    workstreamSourceMessages={messages}
+                    messages={renderedMessages}
+                    workstreamSourceMessages={renderedWorkstreamSourceMessages}
                     bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
                     isCompleted={displayedIsCompleted}
                     plan={getActivePlan.plan}
@@ -2681,7 +2761,10 @@ function ModernAgentConversationInner({
                 />
             ) : isViewingPlaybackHistory && playbackActiveWorkstreams.length > 0 ? (
                 <div className="flex-shrink-0 pb-safe-area">
-                    <ActiveWorkstreamsSummary activeWorkstreams={playbackActiveWorkstreams} />
+                    <ActiveWorkstreamsSummary
+                        activeWorkstreams={playbackActiveWorkstreams}
+                        onSelectWorkstream={setActiveWorkstream}
+                    />
                 </div>
             ) : (
                 shouldRenderLiveMessageInputArea && (
@@ -2749,6 +2832,7 @@ function ModernAgentConversationInner({
                                         isCompactingContext={isCompactingContext}
                                         activeTaskCount={activeTaskCount}
                                         activeWorkstreams={composerActiveWorkstreams}
+                                        onSelectWorkstream={setActiveWorkstream}
                                         placeholder={composerPlaceholder}
                                         onFilesSelected={canUploadFiles ? handleFileUpload : undefined}
                                         uploadedFiles={uploadedFiles}