@vertesia/ui 1.4.0 → 1.5.0-dev.20260713.151751Z

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

@@ -104,6 +104,8 @@ const VARIANT_ICONS = {
     success: CheckCircle,
 };
 
+const SCROLLABLE_PROMPT_CLASS = 'max-h-80 overflow-y-auto overscroll-contain pe-2';
+
 /**
  * AskUserWidget - A styled component for displaying agent prompts/questions to users
  *
@@ -197,10 +199,14 @@ export function AskUserWidget({
         if (answered) {
             return (
                 <div className={cn('my-1.5 font-sans', className)}>
-                    {compactQuestion}
-                    {description && (
-                        <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>{description}</p>
-                    )}
+                    <div className={SCROLLABLE_PROMPT_CLASS}>
+                        {compactQuestion}
+                        {description && (
+                            <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>
+                                {description}
+                            </p>
+                        )}
+                    </div>
                 </div>
             );
         }
@@ -214,12 +220,14 @@ export function AskUserWidget({
                                 <div className={cn('mt-1 flex-shrink-0 text-attention', iconClassName)}>{iconNode}</div>
                             )}
                             <div className="min-w-0 flex-1">
-                                {compactQuestion}
-                                {description && (
-                                    <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>
-                                        {description}
-                                    </p>
-                                )}
+                                <div className={SCROLLABLE_PROMPT_CLASS}>
+                                    {compactQuestion}
+                                    {description && (
+                                        <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>
+                                            {description}
+                                        </p>
+                                    )}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -355,19 +363,21 @@ export function AskUserWidget({
                                 {icon || <DefaultIcon className="size-5" />}
                             </div>
                         )}
-                        <div className="flex-1 min-w-0">
-                            <div
-                                className={`prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 ${questionClassName || ''}`}
-                            >
-                                <MarkdownRenderer>{question}</MarkdownRenderer>
-                            </div>
-                            {description && (
-                                <p
-                                    className={`mt-1 text-sm text-gray-600 dark:text-gray-400 ${descriptionClassName || ''}`}
+                        <div className="min-w-0 flex-1">
+                            <div className={SCROLLABLE_PROMPT_CLASS}>
+                                <div
+                                    className={`agent-ask-question prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 ${questionClassName || ''}`}
                                 >
-                                    {description}
-                                </p>
-                            )}
+                                    <MarkdownRenderer>{question}</MarkdownRenderer>
+                                </div>
+                                {description && (
+                                    <p
+                                        className={`mt-1 text-sm text-gray-600 dark:text-gray-400 ${descriptionClassName || ''}`}
+                                    >
+                                        {description}
+                                    </p>
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>

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

@@ -1,5 +1,5 @@
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
-import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { type AgentMessage, AgentMessageType, type ConversationFile, FileProcessingStatus } from '@vertesia/common';
 import type React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderWithProviders } from '../../../__tests__/test-utils.js';
@@ -245,6 +245,7 @@ describe('ModernAgentConversation send handling', () => {
             hasProcessingFiles: false,
             handleFileUpload: vi.fn(),
             removeProcessingFile: vi.fn(),
+            clearProcessingFiles: vi.fn(),
         });
     });
 
@@ -285,6 +286,53 @@ describe('ModernAgentConversation send handling', () => {
         expect(mocks.updateOptimisticMessageStatus).toHaveBeenCalledWith(expect.any(String), 'received');
     });
 
+    it('binds ready uploaded files into the sent message and clears them after send', async () => {
+        const clearProcessingFiles = vi.fn();
+        const readyFile: ConversationFile = {
+            id: 'file-1',
+            name: 'report.pdf',
+            content_type: 'application/pdf',
+            size: 10,
+            status: FileProcessingStatus.READY,
+            artifact_path: 'files/report.pdf',
+            reference: 'artifact:files/report.pdf',
+            started_at: 1_000,
+        };
+        mocks.useFileProcessing.mockReturnValue({
+            processingFiles: new Map([[readyFile.id, readyFile]]),
+            hasProcessingFiles: false,
+            handleFileUpload: vi.fn(),
+            removeProcessingFile: vi.fn(),
+            clearProcessingFiles,
+        });
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.COMPLETE, 'done')],
+            agentRunStatus: 'COMPLETED',
+        });
+
+        renderConversation({ onRestart: vi.fn() });
+
+        fireEvent.click(screen.getByRole('button', { name: 'inline send' }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith(
+                'agent-run-1',
+                'UserInput',
+                expect.objectContaining({
+                    message: expect.stringContaining('Uploaded artifacts:'),
+                }),
+            );
+        });
+
+        const userInputCall = mocks.sendSignal.mock.calls.find((call) => call[1] === 'UserInput');
+        expect((userInputCall?.[2] as { message: string }).message).toContain(
+            '[report.pdf](artifact:files/report.pdf)',
+        );
+        await waitFor(() => {
+            expect(clearProcessingFiles).toHaveBeenCalledTimes(1);
+        });
+    });
+
     it('does not restart or send from a terminal run that cannot continue', () => {
         mockStreamState({
             messages: [createMessage(AgentMessageType.COMPLETE, 'done')],
@@ -425,6 +473,155 @@ describe('ModernAgentConversation send handling', () => {
         expect(screen.queryByText('Switch to full control?')).toBeNull();
     });
 
+    it('orders a follow-up user message after an in-flight approval mode change', async () => {
+        let resolveModeSignal: (() => void) | undefined;
+        mocks.retrieve.mockResolvedValue({
+            tool_approval_mode: 'ask',
+            interactive: true,
+            disabled_mcp_collections: undefined,
+        });
+        mocks.sendSignal.mockImplementation((_runId: string, signalName: string) => {
+            if (signalName === 'ToolApprovalModeChanged') {
+                return new Promise<void>((resolve) => {
+                    resolveModeSignal = resolve;
+                });
+            }
+            return Promise.resolve({});
+        });
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.REQUEST_INPUT, 'What should I do next?')],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({ hideMessageInput: false, interactive: true, allowWorkflowControl: true });
+
+        const selector = await screen.findByRole('button', { name: 'Agent approval mode' });
+        fireEvent.pointerDown(selector, {
+            button: 0,
+            ctrlKey: false,
+        });
+        fireEvent.click(await screen.findByRole('menuitemradio', { name: /Full control/ }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith('agent-run-1', 'ToolApprovalModeChanged', {
+                mode: 'full_control',
+            });
+            expect(resolveModeSignal).toBeDefined();
+        });
+
+        fireEvent.click(screen.getByRole('button', { name: 'composer send' }));
+
+        expect(mocks.sendSignal.mock.calls.some((call) => call[1] === 'UserInput')).toBe(false);
+
+        await act(async () => {
+            resolveModeSignal?.();
+        });
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith(
+                'agent-run-1',
+                'UserInput',
+                expect.objectContaining({ message: 'follow up' }),
+            );
+        });
+
+        const modeCallIndex = mocks.sendSignal.mock.calls.findIndex((call) => call[1] === 'ToolApprovalModeChanged');
+        const userInputCallIndex = mocks.sendSignal.mock.calls.findIndex((call) => call[1] === 'UserInput');
+        expect(modeCallIndex).toBeGreaterThanOrEqual(0);
+        expect(userInputCallIndex).toBeGreaterThan(modeCallIndex);
+    });
+
+    it('keeps a local approval mode change when stale run metadata loads later', async () => {
+        let resolveRetrieve: (run: {
+            tool_approval_mode: 'ask';
+            interactive: true;
+            disabled_mcp_collections: undefined;
+        }) => void = () => {};
+        mocks.retrieve.mockReturnValue(
+            new Promise((resolve) => {
+                resolveRetrieve = resolve;
+            }),
+        );
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ANSWER, 'still running')],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({
+            hideMessageInput: false,
+            interactive: true,
+            allowWorkflowControl: true,
+            initialToolApprovalMode: 'ask',
+        });
+
+        expect(await screen.findByText('Ask for approval')).not.toBeNull();
+        fireEvent.pointerDown(screen.getByRole('button', { name: 'Agent approval mode' }), {
+            button: 0,
+            ctrlKey: false,
+        });
+        fireEvent.click(await screen.findByRole('menuitemradio', { name: /Full control/ }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith('agent-run-1', 'ToolApprovalModeChanged', {
+                mode: 'full_control',
+            });
+        });
+
+        resolveRetrieve({
+            tool_approval_mode: 'ask',
+            interactive: true,
+            disabled_mcp_collections: undefined,
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Full control')).not.toBeNull();
+        });
+    });
+
+    it('reverts the local approval mode when the change signal fails', async () => {
+        let rejectSignal: (error: Error) => void = () => {};
+        mocks.retrieve.mockResolvedValue({
+            tool_approval_mode: 'ask',
+            interactive: true,
+            disabled_mcp_collections: undefined,
+        });
+        mocks.sendSignal.mockReturnValueOnce(
+            new Promise((_resolve, reject) => {
+                rejectSignal = reject;
+            }),
+        );
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ANSWER, 'still running')],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({ hideMessageInput: false, interactive: true, allowWorkflowControl: true });
+
+        const selector = await screen.findByRole('button', { name: 'Agent approval mode' });
+        expect(selector.textContent).toContain('Ask for approval');
+        fireEvent.pointerDown(selector, {
+            button: 0,
+            ctrlKey: false,
+        });
+        fireEvent.click(await screen.findByRole('menuitemradio', { name: /Full control/ }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith('agent-run-1', 'ToolApprovalModeChanged', {
+                mode: 'full_control',
+            });
+            expect(selector.textContent).toContain('Full control');
+        });
+
+        rejectSignal(new Error('Signal failed'));
+
+        await waitFor(() => {
+            expect(selector.textContent).toContain('Ask for approval');
+        });
+    });
+
     it('does not show a full-control fallback before active run mode metadata loads', () => {
         mocks.retrieve.mockReturnValue(new Promise(() => {}));
         mockStreamState({

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

@@ -7,6 +7,7 @@ import {
     type CompletedWorkstreamEntry,
     type ConversationFile,
     type ConversationFileRef,
+    FileProcessingStatus,
     type McpConnectUxConfig,
     normalizeAgentToolApprovalMode,
     type Plan,
@@ -1359,12 +1360,8 @@ function ModernAgentConversationInner({
         updateDocumentTitle,
     } = useDocumentPanel(messages);
 
-    const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile } = useFileProcessing(
-        client,
-        agentRunId,
-        serverFileUpdates,
-        toast,
-    );
+    const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile, clearProcessingFiles } =
+        useFileProcessing(client, agentRunId, serverFileUpdates, toast);
     const canUploadFiles = interactive && !hideFileUpload;
 
     const handleRemoveProcessingFile = useCallback(
@@ -1416,6 +1413,8 @@ function ModernAgentConversationInner({
     const workstreamFetchFailedRef = useRef(false);
     const dragCounterRef = useRef(0);
     const pendingPlaybackScrollRef = useRef(false);
+    const toolApprovalModeChangeVersionRef = useRef(0);
+    const pendingToolApprovalModeChangeRef = useRef<Promise<void> | null>(null);
 
     useEffect(() => {
         setToolApprovalMode(initialResolvedToolApprovalMode);
@@ -1426,6 +1425,8 @@ function ModernAgentConversationInner({
     isSendingRef.current = isSending;
     const hasProcessingFilesRef = useRef(hasProcessingFiles);
     hasProcessingFilesRef.current = hasProcessingFiles;
+    const processingFilesRef = useRef(processingFiles);
+    processingFilesRef.current = processingFiles;
 
     const lastMainMessage = useMemo(() => {
         const mainMessages = messages.filter((m) => (m.workstream_id || 'main') === 'main');
@@ -1909,6 +1910,13 @@ function ModernAgentConversationInner({
     // Handlers
     // ────────────────────────────────────────────
 
+    const waitForPendingToolApprovalModeChange = useCallback(async () => {
+        const pendingChange = pendingToolApprovalModeChangeRef.current;
+        if (pendingChange) {
+            await pendingChange;
+        }
+    }, []);
+
     // Send a message to the agent
     const handleSendMessage = useCallback(
         (message: string, inputMetadata?: Record<string, unknown>) => {
@@ -1942,6 +1950,24 @@ function ModernAgentConversationInner({
                 messageContent = [trimmed, '', 'Attachments:', ...lines].join('\n');
             }
 
+            // Bind ready uploaded files to this message: embed them as an "Uploaded artifacts:"
+            // markdown block so they render underneath the sent bubble (parsed by
+            // parseUserMessageAttachments) and get cleared from the composer on send.
+            const uploadedArtifactLines = Array.from(processingFilesRef.current.values())
+                .filter((file) => file.status === FileProcessingStatus.READY)
+                .map((file) => {
+                    const href = file.reference?.startsWith('artifact:')
+                        ? file.reference
+                        : file.artifact_path
+                          ? `artifact:${file.artifact_path}`
+                          : undefined;
+                    return href ? `[${file.name}](${href})` : undefined;
+                })
+                .filter((line): line is string => Boolean(line));
+            if (uploadedArtifactLines.length > 0) {
+                messageContent = [messageContent, '', 'Uploaded artifacts:', ...uploadedArtifactLines].join('\n');
+            }
+
             const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
             const optimisticMessage: AgentMessage = {
@@ -1973,6 +1999,7 @@ function ModernAgentConversationInner({
             const markReceived = () => {
                 updateOptimisticMessageStatus(messageId, 'received');
                 onAttachmentsSent?.();
+                clearProcessingFiles();
             };
 
             // When the workflow has already completed, restart it first so it resumes
@@ -1980,12 +2007,15 @@ 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.
-            const deliver = isWorkflowTerminalRef.current
-                ? client.agents.restart(agentRunId).then(() => {
-                      reconnectStream();
-                      return sendUserInput().then(markReceived);
-                  })
-                : sendUserInput().then(markReceived);
+            const deliver = (async () => {
+                await waitForPendingToolApprovalModeChange();
+                if (isWorkflowTerminalRef.current) {
+                    await client.agents.restart(agentRunId);
+                    reconnectStream();
+                }
+                await sendUserInput();
+                markReceived();
+            })();
 
             deliver
                 .catch((err) => {
@@ -2008,10 +2038,12 @@ function ModernAgentConversationInner({
             getAttachedDocs,
             getMessageContext,
             onAttachmentsSent,
+            clearProcessingFiles,
             reconnectStream,
             addOptimisticMessage,
             updateOptimisticMessageStatus,
             t,
+            waitForPendingToolApprovalModeChange,
         ],
     );
 
@@ -2040,12 +2072,16 @@ function ModernAgentConversationInner({
     const [mcpDisabled, setMcpDisabled] = useState<string[] | undefined>(undefined);
     useEffect(() => {
         let cancelled = false;
+        const requestVersion = toolApprovalModeChangeVersionRef.current;
         client.agents
             .retrieve(agentRunId)
             .then((run) => {
                 if (!cancelled) {
                     setMcpDisabled(run.disabled_mcp_collections);
-                    if (run.tool_approval_mode !== undefined || run.interactive !== undefined) {
+                    if (
+                        toolApprovalModeChangeVersionRef.current === requestVersion &&
+                        (run.tool_approval_mode !== undefined || run.interactive !== undefined)
+                    ) {
                         setToolApprovalMode(normalizeAgentToolApprovalMode(run.tool_approval_mode, run.interactive));
                     }
                 }
@@ -2081,10 +2117,14 @@ function ModernAgentConversationInner({
     const handleToolApprovalModeChange = useCallback(
         (mode: AgentToolApprovalMode) => {
             const nextMode = normalizeAgentToolApprovalMode(mode, interactive);
+            const previousMode = toolApprovalMode;
+            toolApprovalModeChangeVersionRef.current += 1;
             setToolApprovalMode(nextMode);
-            client.agents
+            const signalPromise = client.agents
                 .sendSignal(agentRunId, 'ToolApprovalModeChanged', { mode: nextMode })
+                .then(() => undefined)
                 .catch((err: unknown) => {
+                    setToolApprovalMode((currentMode) => (currentMode === nextMode ? previousMode : currentMode));
                     toast({
                         status: 'error',
                         title: t('agent.approvalMode.changeFailed'),
@@ -2092,8 +2132,14 @@ function ModernAgentConversationInner({
                         duration: 3000,
                     });
                 });
+            pendingToolApprovalModeChangeRef.current = signalPromise;
+            void signalPromise.finally(() => {
+                if (pendingToolApprovalModeChangeRef.current === signalPromise) {
+                    pendingToolApprovalModeChangeRef.current = null;
+                }
+            });
         },
-        [agentRunId, client, interactive, t, toast],
+        [agentRunId, client, interactive, t, toast, toolApprovalMode],
     );
 
     // Drag and drop handlers for full-panel file upload
@@ -2418,6 +2464,7 @@ function ModernAgentConversationInner({
             ) : (
                 <AllMessagesMixed
                     messages={displayedMessages}
+                    workstreamSourceMessages={messages}
                     bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
                     isCompleted={displayedIsCompleted}
                     plan={getActivePlan.plan}

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -2328,8 +2328,43 @@ class MessageErrorBoundary extends Component<{ children: ReactNode }, { hasError
     }
 }
 
+// Sort chronologically, drop document-panel events + hidden types, and dedupe adjacent
+// identical messages. Shared by the rendered transcript and the workstream tab derivation.
+function sortAndDedupeMessages(messages: AgentMessage[], hiddenMessageTypes?: AgentMessageType[]): AgentMessage[] {
+    const filtered = messages.filter(
+        (message) => !isDocumentPanelEventMessage(message) && !hiddenMessageTypes?.includes(message.type),
+    );
+
+    const sorted = [...filtered].sort((a, b) => {
+        const timeA = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+        const timeB = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+        return timeA - timeB;
+    });
+
+    const deduped: AgentMessage[] = [];
+    for (const msg of sorted) {
+        const previous = deduped[deduped.length - 1];
+        if (previous && shouldCollapseAdjacentRenderedMessage(previous, msg)) {
+            continue;
+        }
+
+        if (previous && shouldDedupeAdjacentCompletedToolMessage(previous, msg)) {
+            continue;
+        }
+        deduped.push(msg);
+    }
+    return deduped;
+}
+
 interface AllMessagesMixedProps {
     messages: AgentMessage[];
+    /**
+     * Full, workstream-unfiltered message set used to derive the workstream tab list, per-tab
+     * counts, and completion status. Falls back to `messages` when omitted. The parent filters
+     * `messages` down to the active workstream, so deriving the tab list from `messages` alone
+     * makes the tabs collapse (and vanish once `main` is selected) as you navigate between them.
+     */
+    workstreamSourceMessages?: AgentMessage[];
     bottomRef: React.RefObject<HTMLDivElement>;
     viewMode?: 'stacked' | 'sliding';
     isCompleted?: boolean;
@@ -2397,6 +2432,7 @@ const SCROLL_THROTTLE_MS = 100; // Max 10 scrolls per second
 
 function AllMessagesMixedComponent({
     messages,
+    workstreamSourceMessages,
     bottomRef,
     viewMode = 'stacked',
     isCompleted = false,
@@ -2536,36 +2572,26 @@ function AllMessagesMixedComponent({
 
     // Sort all messages chronologically and dedupe adjacent identical messages
     // Low-signal messages are suppressed at the source (server-side) via shouldSuppressLowSignalMessage
-    const sortedMessages = React.useMemo(() => {
-        const filtered = messages.filter(
-            (message) => !isDocumentPanelEventMessage(message) && !hiddenMessageTypes?.includes(message.type),
-        );
-
-        const sorted = [...filtered].sort((a, b) => {
-            const timeA = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
-            const timeB = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
-            return timeA - timeB;
-        });
-
-        const deduped: AgentMessage[] = [];
-        for (const msg of sorted) {
-            const previous = deduped[deduped.length - 1];
-            if (previous && shouldCollapseAdjacentRenderedMessage(previous, msg)) {
-                continue;
-            }
+    const sortedMessages = React.useMemo(
+        () => sortAndDedupeMessages(messages, hiddenMessageTypes),
+        [messages, hiddenMessageTypes],
+    );
 
-            if (previous && shouldDedupeAdjacentCompletedToolMessage(previous, msg)) {
-                continue;
-            }
-            deduped.push(msg);
-        }
-        return deduped;
-    }, [messages, hiddenMessageTypes]);
+    // The workstream tabs are navigation over the WHOLE conversation, so derive them from the
+    // unfiltered source rather than `messages` (which the parent filters to the active workstream).
+    // Falling back to `sortedMessages` keeps callers that don't pass the source working unchanged.
+    const workstreamSourceSorted = React.useMemo(
+        () =>
+            workstreamSourceMessages
+                ? sortAndDedupeMessages(workstreamSourceMessages, hiddenMessageTypes)
+                : sortedMessages,
+        [workstreamSourceMessages, hiddenMessageTypes, sortedMessages],
+    );
 
     const workstreams = React.useMemo(() => {
-        const extractedWorkstreams = extractWorkstreams(sortedMessages);
+        const extractedWorkstreams = extractWorkstreams(workstreamSourceSorted);
 
-        sortedMessages.forEach((message) => {
+        workstreamSourceSorted.forEach((message) => {
             const details = getWorkstreamLaunchDetails(message) ?? getWorkstreamActivityDetails(message);
             if (!details) return;
             extractedWorkstreams.set(
@@ -2575,7 +2601,7 @@ function AllMessagesMixedComponent({
         });
 
         return extractedWorkstreams;
-    }, [sortedMessages]);
+    }, [workstreamSourceSorted]);
 
     const activeWorkstreamName = React.useMemo(() => {
         if (activeWorkstream === 'all') return undefined;
@@ -2616,17 +2642,17 @@ function AllMessagesMixedComponent({
         }
     }, [activeWorkstream, workstreams, setActiveWorkstream]);
 
-    // Count messages per workstream
+    // Count messages per workstream (from the full source so counts don't shrink to the active tab)
     const workstreamCounts = React.useMemo(() => {
         const counts = new Map<string, number>();
-        counts.set('all', sortedMessages.length);
+        counts.set('all', workstreamSourceSorted.length);
 
         // Count main messages
-        const mainMessages = filterMessagesByWorkstream(sortedMessages, 'main');
+        const mainMessages = filterMessagesByWorkstream(workstreamSourceSorted, 'main');
         counts.set('main', mainMessages.length);
 
         // Count other workstreams
-        sortedMessages.forEach((msg) => {
+        workstreamSourceSorted.forEach((msg) => {
             const workstreamId = getWorkstreamId(msg);
             if (workstreamId !== 'main') {
                 counts.set(workstreamId, (counts.get(workstreamId) || 0) + 1);
@@ -2634,7 +2660,7 @@ function AllMessagesMixedComponent({
         });
 
         return counts;
-    }, [sortedMessages]);
+    }, [workstreamSourceSorted]);
 
     // Filter messages based on active workstream
     const displayMessages = React.useMemo(() => {
@@ -2869,7 +2895,7 @@ function AllMessagesMixedComponent({
         // Group messages by workstream
         const workstreamMessages = new Map<string, AgentMessage[]>();
 
-        sortedMessages.forEach((message) => {
+        workstreamSourceSorted.forEach((message) => {
             const workstreamId = getWorkstreamId(message);
             if (!workstreamMessages.has(workstreamId)) {
                 workstreamMessages.set(workstreamId, []);
@@ -2905,7 +2931,7 @@ function AllMessagesMixedComponent({
         }
 
         return statusMap;
-    }, [sortedMessages]);
+    }, [workstreamSourceSorted]);
 
     return (
         <div

package/src/features/agent/chat/ModernAgentOutput/InlineSlidingPlanPanel.tsx

@@ -127,9 +127,9 @@ function InlineSlidingPlanPanelComponent({
                             : `task-${taskGoal}-${task.status || 'pending'}`;
 
                         let status: 'pending' | 'in_progress' | 'completed' | 'skipped' = task.status || 'pending';
-                        if (workstreamStatus.has(taskId)) {
-                            // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-                            status = workstreamStatus.get(taskId)!;
+                        const wsStatus = workstreamStatus.get(taskId);
+                        if (wsStatus !== undefined) {
+                            status = wsStatus;
                         }
 
                         let StatusIcon = Circle;