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

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

@@ -1,7 +1,7 @@
-import { cn } from '@vertesia/ui/core';
+import { Button, cn } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
-import { Bot } from 'lucide-react';
-import { useMemo } from 'react';
+import { Bot, ChevronDown, ChevronRight } from 'lucide-react';
+import { useEffect, useId, useMemo, useState } from 'react';
 import {
     formatWorkstreamName,
     getWorkstreamDisplayName,
@@ -11,17 +11,35 @@ import {
 
 interface ActiveWorkstreamsSummaryProps {
     activeWorkstreams: WorkstreamInfo[];
+    onSelectWorkstream?: (workstreamId: string) => void;
     className?: string;
 }
 
-export function ActiveWorkstreamsSummary({ activeWorkstreams, className }: ActiveWorkstreamsSummaryProps) {
+const COLLAPSED_WORKSTREAM_COUNT = 3;
+
+export function ActiveWorkstreamsSummary({
+    activeWorkstreams,
+    onSelectWorkstream,
+    className,
+}: ActiveWorkstreamsSummaryProps) {
     const { t } = useUITranslation();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const listId = useId();
     const runningWorkstreams = useMemo(
         () => activeWorkstreams.filter((ws) => ws.status === 'running' || ws.status === 'canceling'),
         [activeWorkstreams],
     );
-    const visibleRunningWorkstreams = runningWorkstreams.slice(0, 3);
+    const visibleRunningWorkstreams = isExpanded
+        ? runningWorkstreams
+        : runningWorkstreams.slice(0, COLLAPSED_WORKSTREAM_COUNT);
     const hiddenRunningWorkstreamCount = Math.max(0, runningWorkstreams.length - visibleRunningWorkstreams.length);
+    const canExpand = runningWorkstreams.length > COLLAPSED_WORKSTREAM_COUNT;
+
+    useEffect(() => {
+        if (!canExpand) {
+            setIsExpanded(false);
+        }
+    }, [canExpand]);
 
     if (runningWorkstreams.length === 0) return null;
 
@@ -31,23 +49,20 @@ export function ActiveWorkstreamsSummary({ activeWorkstreams, className }: Activ
                 className="flex flex-col gap-1.5 rounded-2xl border border-border/70 bg-background/95 p-2 text-xs text-muted shadow-lg shadow-black/5"
                 aria-live="polite"
             >
-                <div className="flex items-center gap-2 px-1 font-medium">
-                    <Bot className="size-3.5 text-muted" aria-hidden="true" />
-                    <span>{t('agent.activeWorkstreams', { count: runningWorkstreams.length })}</span>
+                <div className="flex min-w-0 items-center gap-2 px-1 font-medium">
+                    <Bot className="size-3.5 shrink-0 text-muted" aria-hidden="true" />
+                    <span className="truncate">
+                        {t('agent.activeWorkstreams', { count: runningWorkstreams.length })}
+                    </span>
                 </div>
-                <div className="flex flex-col gap-0.5">
+                <div id={listId} className="flex flex-col gap-0.5">
                     {visibleRunningWorkstreams.map((workstream) => {
                         const workstreamName = getWorkstreamDisplayName(
                             workstream.workstream_id,
                             workstream.interaction,
                         );
-
-                        return (
-                            <span
-                                key={workstream.launch_id || workstream.workstream_id}
-                                className="flex min-w-0 items-center gap-2 rounded-lg px-1 py-1 text-sm text-foreground/80"
-                                title={workstreamName}
-                            >
+                        const content = (
+                            <>
                                 <span
                                     className={cn(
                                         'size-1.5 shrink-0 rounded-full',
@@ -61,13 +76,53 @@ export function ActiveWorkstreamsSummary({ activeWorkstreams, className }: Activ
                                         {formatWorkstreamName(workstream.phase)}
                                     </span>
                                 )}
-                            </span>
+                            </>
+                        );
+
+                        return onSelectWorkstream ? (
+                            <Button
+                                key={workstream.launch_id || workstream.workstream_id}
+                                type="button"
+                                variant="ghost"
+                                className="h-auto min-w-0 justify-start gap-2 rounded-lg px-1 py-1 text-sm text-foreground/80"
+                                title={workstreamName}
+                                onClick={() => {
+                                    setIsExpanded(false);
+                                    onSelectWorkstream(workstream.workstream_id);
+                                }}
+                            >
+                                {content}
+                                <ChevronRight className="ms-auto size-3.5 shrink-0 rtl:rotate-180" aria-hidden="true" />
+                            </Button>
+                        ) : (
+                            <div
+                                key={workstream.launch_id || workstream.workstream_id}
+                                className="flex min-w-0 items-center gap-2 rounded-lg px-1 py-1 text-sm text-foreground/80"
+                                title={workstreamName}
+                            >
+                                {content}
+                            </div>
                         );
                     })}
-                    {hiddenRunningWorkstreamCount > 0 && (
-                        <span className="px-1 py-1 text-xs text-muted">+{hiddenRunningWorkstreamCount}</span>
-                    )}
                 </div>
+                {canExpand && (
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-fit shrink-0 gap-1 rounded-xl px-2.5 text-xs text-muted"
+                        aria-expanded={isExpanded}
+                        aria-controls={listId}
+                        onClick={() => setIsExpanded((expanded) => !expanded)}
+                    >
+                        {!isExpanded && <span>+{hiddenRunningWorkstreamCount}</span>}
+                        {isExpanded ? t('agent.showLess') : t('agent.showMore')}
+                        <ChevronDown
+                            className={cn('size-3.5 transition-transform', isExpanded && 'rotate-180')}
+                            aria-hidden="true"
+                        />
+                    </Button>
+                )}
             </output>
         </div>
     );

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

@@ -258,6 +258,114 @@ describe('AllMessagesMixed summary view', () => {
         expect(screen.getByText('Found 5 results')).not.toBeNull();
     });
 
+    it('does not show post-tool thinking while the latest tool is still running', () => {
+        renderSummary(
+            [
+                makeMessage({
+                    timestamp: 1_000,
+                    type: AgentMessageType.QUESTION,
+                    message: 'Find Japan news.',
+                }),
+                makeMessage({
+                    timestamp: 2_000,
+                    message: 'Searching for Japan news',
+                    details: {
+                        tool: 'web_search_serper',
+                        tool_status: 'running',
+                        tool_run_id: 'tool-1',
+                    },
+                }),
+            ],
+            false,
+        );
+
+        expect(screen.getAllByRole('button', { name: /Working.*for/ })).toHaveLength(1);
+        expect(screen.queryByTestId('post-tool-thinking-indicator')).toBeNull();
+    });
+
+    it('shows thinking below the active work group after its latest tool completes', () => {
+        renderSummary(
+            [
+                makeMessage({
+                    timestamp: 1_000,
+                    type: AgentMessageType.QUESTION,
+                    message: 'Find Japan news.',
+                }),
+                makeMessage({
+                    timestamp: 2_000,
+                    message: 'Searching for Japan news',
+                    details: {
+                        tool: 'web_search_serper',
+                        tool_status: 'running',
+                        tool_run_id: 'tool-1',
+                    },
+                }),
+                makeMessage({
+                    timestamp: 3_000,
+                    message: 'Found Japan news',
+                    details: {
+                        tool: 'web_search_serper',
+                        tool_status: 'completed',
+                        tool_run_id: 'tool-1',
+                    },
+                }),
+            ],
+            false,
+        );
+
+        expect(screen.queryByRole('button', { name: /Worked\s*for/ })).toBeNull();
+        expect(screen.getAllByRole('button', { name: /Working.*for/ })).toHaveLength(1);
+        expect(screen.getByTestId('post-tool-thinking-indicator').textContent).toBe('Thinking...');
+    });
+
+    it('keeps showing thinking when the current display-role marker follows a completed tool', () => {
+        renderSummary(
+            [
+                makeMessage({
+                    timestamp: 1_000,
+                    type: AgentMessageType.QUESTION,
+                    message: 'Find Japan news.',
+                }),
+                makeMessage({
+                    timestamp: 2_000,
+                    message: 'Searching for Japan news',
+                    details: {
+                        event_class: 'activity',
+                        tool: 'web_search_serper',
+                        tool_status: 'running',
+                        tool_run_id: 'tool-1',
+                        activity_group_id: 'activity-1',
+                    },
+                }),
+                makeMessage({
+                    timestamp: 3_000,
+                    message: 'Found Japan news',
+                    details: {
+                        event_class: 'activity',
+                        tool: 'web_search_serper',
+                        tool_status: 'completed',
+                        tool_run_id: 'tool-1',
+                        activity_group_id: 'activity-1',
+                    },
+                }),
+                makeMessage({
+                    timestamp: 4_000,
+                    message: 'Thinking...',
+                    details: {
+                        event_class: 'activity',
+                        display_role: 'thinking',
+                        activity_id: '17',
+                        activity_group_id: 'activity-1',
+                    },
+                }),
+            ],
+            false,
+        );
+
+        expect(screen.getAllByRole('button', { name: /Working.*for/ })).toHaveLength(1);
+        expect(screen.getByTestId('post-tool-thinking-indicator').textContent).toBe('Thinking...');
+    });
+
     it('replaces a completed tool’s progress title with an immediately visible resource deep link', () => {
         renderSummary(
             [
@@ -464,6 +572,7 @@ describe('AllMessagesMixed summary view', () => {
                     type: AgentMessageType.REQUEST_INPUT,
                     message: 'Approve Create Document: name News Headlines Today?',
                     details: {
+                        request_id: 'create_document:name:News Headlines Today',
                         tool_approval: {
                             approval_key: 'create_document:name:News Headlines Today',
                             tool_name: 'create_document',
@@ -499,6 +608,9 @@ describe('AllMessagesMixed summary view', () => {
                 decision: 'allow_once',
                 approval_key: 'create_document:name:News Headlines Today',
             },
+            request_input_response: {
+                request_id: 'create_document:name:News Headlines Today',
+            },
         });
     });
 

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

@@ -68,6 +68,7 @@ import {
     isToolApprovalRequestInput,
     isToolApprovalRequestInputHidden,
     type RequestInputMessageWithUx,
+    sendRequestInputResponse,
 } from './requestInputMessages';
 import {
     interleaveTurnSummaries,
@@ -92,6 +93,7 @@ import {
     getWorkstreamId,
     groupMessagesWithStreaming,
     isInProgress,
+    isToolActivityMessage,
     isToolPreambleMessage,
     isUserStoppedMessage,
     mergeConsecutiveToolGroups,
@@ -753,13 +755,22 @@ function SummaryMessage({
                     variant={uxConfig.variant}
                     multiSelect={uxConfig.multiSelect}
                     onSelect={(optionId) =>
-                        onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                        sendRequestInputResponse(
+                            onSendMessage,
+                            message,
+                            optionId,
+                            getToolApprovalResponseMetadata(message, optionId),
+                        )
+                    }
+                    onMultiSelect={(optionIds) =>
+                        sendRequestInputResponse(onSendMessage, message, optionIds.join(', '))
                     }
-                    onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                     allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
                     placeholder={uxConfig.free_response?.placeholder}
                     submitLabel={uxConfig.free_response?.submit_label}
-                    onSubmit={(value) => onSendMessage?.(value, uxConfig.free_response?.metadata)}
+                    onSubmit={(value) =>
+                        sendRequestInputResponse(onSendMessage, message, value, uxConfig.free_response?.metadata)
+                    }
                     hideBorder
                     compact
                     answered={requestInputAnswered}
@@ -2273,19 +2284,32 @@ function SummaryActivityRow({
                                                 variant={uxConfig.variant}
                                                 multiSelect={uxConfig.multiSelect}
                                                 onSelect={(optionId) =>
-                                                    onSendMessage?.(
+                                                    sendRequestInputResponse(
+                                                        onSendMessage,
+                                                        message,
                                                         optionId,
                                                         getToolApprovalResponseMetadata(message, optionId),
                                                     )
                                                 }
-                                                onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
+                                                onMultiSelect={(optionIds) =>
+                                                    sendRequestInputResponse(
+                                                        onSendMessage,
+                                                        message,
+                                                        optionIds.join(', '),
+                                                    )
+                                                }
                                                 allowFreeResponse={
                                                     !uxConfig.options?.length || !!uxConfig.free_response
                                                 }
                                                 placeholder={uxConfig.free_response?.placeholder}
                                                 submitLabel={uxConfig.free_response?.submit_label}
                                                 onSubmit={(value) =>
-                                                    onSendMessage?.(value, uxConfig.free_response?.metadata)
+                                                    sendRequestInputResponse(
+                                                        onSendMessage,
+                                                        message,
+                                                        value,
+                                                        uxConfig.free_response?.metadata,
+                                                    )
                                                 }
                                                 hideBorder
                                                 compact
@@ -2663,18 +2687,23 @@ function AllMessagesMixedComponent({
         });
     }, []);
 
+    const previousActiveWorkstreamRef = useRef(activeWorkstream);
+    useEffect(() => {
+        if (previousActiveWorkstreamRef.current === activeWorkstream) return;
+        previousActiveWorkstreamRef.current = activeWorkstream;
+        requestAnimationFrame(scrollToTop);
+    }, [activeWorkstream, scrollToTop]);
+
     const handleSelectWorkstream = useCallback(
         (workstreamId: string) => {
             setActiveWorkstream(workstreamId);
-            requestAnimationFrame(scrollToTop);
         },
-        [scrollToTop, setActiveWorkstream],
+        [setActiveWorkstream],
     );
 
     const handleShowMainAgentChat = useCallback(() => {
         setActiveWorkstream('all');
-        requestAnimationFrame(scrollToTop);
-    }, [scrollToTop, setActiveWorkstream]);
+    }, [setActiveWorkstream]);
 
     useEffect(() => {
         if (activeWorkstream !== 'all' && !workstreams.has(activeWorkstream)) {
@@ -2945,6 +2974,18 @@ function AllMessagesMixedComponent({
         return !isDisplayCompleted || hasOpenUserTurn(completionDisplayMessages);
     }, [completionDisplayMessages, isDisplayCompleted]);
 
+    const showPostToolThinking = useMemo(() => {
+        if (!isAgentWorking || incompleteStreaming.length > 0) return false;
+
+        const latestSummaryItem = summaryConversationItems[summaryConversationItems.length - 1];
+        const latestMessage = completionDisplayMessages[completionDisplayMessages.length - 1];
+        const latestMessageShowsThinking =
+            latestMessage !== undefined &&
+            (latestMessage.details?.display_role === 'thinking' ||
+                (isToolActivityMessage(latestMessage) && latestMessage.details?.tool_status === 'completed'));
+        return latestSummaryItem?.type === 'work' && latestSummaryItem.isActive && latestMessageShowsThinking;
+    }, [completionDisplayMessages, incompleteStreaming.length, isAgentWorking, summaryConversationItems]);
+
     const showActivityFallback = shouldShowSummaryActivityFallback(
         summaryConversationItems,
         isAgentWorking,
@@ -3661,6 +3702,17 @@ function AllMessagesMixedComponent({
                                     artifactRunId={artifactRunId}
                                 />
                             ))}
+                            {showPostToolThinking && (
+                                <div
+                                    className={cn(
+                                        'mx-auto w-full max-w-3xl px-1 text-sm text-muted',
+                                        workingIndicatorClassName,
+                                    )}
+                                    data-testid="post-tool-thinking-indicator"
+                                >
+                                    {t('agent.thinking')}
+                                </div>
+                            )}
                             {/* Activity fallback - shown before any tool/thought message has arrived */}
                             {showActivityFallback && !showInitialRequestWaitingCard && (
                                 <SummaryActivityRow

package/src/features/agent/chat/ModernAgentOutput/AttachmentPreview.test.ts

@@ -0,0 +1,38 @@
+import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import { collectDeliveredArtifactRefs } from './AttachmentPreview';
+
+function question(message: string, details?: AgentMessage['details']): AgentMessage {
+    return {
+        timestamp: 1_000,
+        workflow_run_id: 'run-1',
+        type: AgentMessageType.QUESTION,
+        message,
+        workstream_id: 'main',
+        details,
+    };
+}
+
+describe('collectDeliveredArtifactRefs', () => {
+    it('collects attachment references from persisted user messages', () => {
+        const refs = collectDeliveredArtifactRefs([
+            question('Review this.\n\nUploaded artifacts:\n[report.pdf](artifact:files/report.pdf)'),
+        ]);
+
+        expect(refs).toEqual(new Set(['artifact:files/report.pdf', 'files/report.pdf']));
+    });
+
+    it.each(['sending', 'received', 'consumed', 'failed'] as const)(
+        'ignores optimistic messages with %s delivery status',
+        (_deliveryStatus) => {
+            const refs = collectDeliveredArtifactRefs([
+                question('Review this.\n\nUploaded artifacts:\n[report.pdf](artifact:files/report.pdf)', {
+                    _optimistic: true,
+                    _deliveryStatus,
+                }),
+            ]);
+
+            expect(refs).toEqual(new Set());
+        },
+    );
+});

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

@@ -1,9 +1,10 @@
+import { type AgentMessage, AgentMessageType } from '@vertesia/common';
 import { Button, cn } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { UserSessionContext } from '@vertesia/ui/session';
-import { FileTextIcon, ImageIcon, XIcon } from 'lucide-react';
+import { ChevronDown, FileTextIcon, ImageIcon, XIcon } from 'lucide-react';
 import type React from 'react';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useId, useState } from 'react';
 import { useImageLightbox } from '../ImageLightbox';
 import { getArtifactCacheKey, useArtifactUrlCache } from '../useArtifactUrlCache';
 
@@ -26,6 +27,7 @@ const TEXT_EXTENSIONS = new Set([
     'yaml',
     'yml',
 ]);
+const DEFAULT_COLLAPSED_ATTACHMENT_COUNT = 3;
 
 export interface AttachmentPreviewItem {
     id: string;
@@ -374,11 +376,24 @@ export function AttachmentPreviewList({
     StoreLinkComponent,
     CollectionLinkComponent,
 }: AttachmentPreviewListProps) {
+    const { t } = useUITranslation();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const attachmentListId = useId();
+    const isCollapsible = variant === 'composer' && items.length > DEFAULT_COLLAPSED_ATTACHMENT_COUNT;
+    const visibleItems = isCollapsible && !isExpanded ? items.slice(0, DEFAULT_COLLAPSED_ATTACHMENT_COUNT) : items;
+    const hiddenItemCount = items.length - DEFAULT_COLLAPSED_ATTACHMENT_COUNT;
+
+    useEffect(() => {
+        if (items.length <= DEFAULT_COLLAPSED_ATTACHMENT_COUNT) {
+            setIsExpanded(false);
+        }
+    }, [items.length]);
+
     if (items.length === 0) return null;
 
     return (
-        <div className={cn('flex flex-wrap gap-2', align === 'end' && 'justify-end', className)}>
-            {items.map((item) => (
+        <div id={attachmentListId} className={cn('flex flex-wrap gap-2', align === 'end' && 'justify-end', className)}>
+            {visibleItems.map((item) => (
                 <AttachmentPreview
                     key={item.id}
                     item={item}
@@ -390,6 +405,24 @@ export function AttachmentPreviewList({
                     CollectionLinkComponent={CollectionLinkComponent}
                 />
             ))}
+            {isCollapsible && (
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    aria-controls={attachmentListId}
+                    aria-expanded={isExpanded}
+                    onClick={() => setIsExpanded((expanded) => !expanded)}
+                    className="h-8 shrink-0 gap-1 rounded-xl px-2.5 text-xs text-muted"
+                >
+                    {!isExpanded && <span>+{hiddenItemCount}</span>}
+                    {isExpanded ? t('agent.showLess') : t('agent.showMore')}
+                    <ChevronDown
+                        className={cn('size-3.5 transition-transform', isExpanded && 'rotate-180')}
+                        aria-hidden="true"
+                    />
+                </Button>
+            )}
         </div>
     );
 }
@@ -443,3 +476,28 @@ export function parseUserMessageAttachments(content: string): ParsedUserAttachme
         attachments,
     };
 }
+
+/**
+ * Collect the artifact references (`artifact:...` hrefs and bare artifact paths) embedded in
+ * sent user messages. A file whose reference appears here has already been delivered to the
+ * agent, so the composer must not offer it as a pending attachment again (e.g. after a reload).
+ */
+export function collectDeliveredArtifactRefs(messages: AgentMessage[]): Set<string> {
+    const refs = new Set<string>();
+    for (const message of messages) {
+        // Only persisted server echoes prove delivery. Optimistic messages can still be sending
+        // or can fail, in which case suppressing their files would prevent a retry.
+        if (
+            message.type !== AgentMessageType.QUESTION ||
+            message.details?._optimistic ||
+            typeof message.message !== 'string'
+        ) {
+            continue;
+        }
+        for (const attachment of parseUserMessageAttachments(message.message).attachments) {
+            if (attachment.href) refs.add(attachment.href);
+            if (attachment.artifactPath) refs.add(attachment.artifactPath);
+        }
+    }
+    return refs;
+}

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

@@ -5,6 +5,7 @@ import { useRouterContext } from '@vertesia/ui/router';
 import { useUserSession } from '@vertesia/ui/session';
 import {
     Bot,
+    Bug,
     ClipboardList,
     CopyIcon,
     DownloadCloudIcon,
@@ -13,7 +14,6 @@ import {
     InfoIcon,
     MessageSquareText,
     MoreVertical,
-    Rewind,
     Rows3,
     XIcon,
 } from 'lucide-react';
@@ -185,7 +185,7 @@ export default function Header({
                         variant === 'compact' && 'size-8 rounded-lg',
                     )}
                 >
-                    <Rewind className={cn('size-4', variant === 'full' && 'me-1.5')} />
+                    <Bug className={cn('size-4', variant === 'full' && 'me-1.5')} />
                     {variant === 'full' ? (
                         <span className="font-medium text-xs">{t('agent.rewind.label')}</span>
                     ) : (

package/src/features/agent/chat/ModernAgentOutput/MessageInput.test.tsx

@@ -201,6 +201,38 @@ describe('MessageInput', () => {
         expect(screen.getByText('Ready')).not.toBeNull();
     });
 
+    it('collapses large attachment lists while preserving attachment actions', () => {
+        const onRemoveDocument = vi.fn();
+        const selectedDocuments = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'].map((name, index) => ({
+            id: `doc-${index}`,
+            name,
+        }));
+
+        renderWithProviders(
+            <MessageInput onSend={vi.fn()} selectedDocuments={selectedDocuments} onRemoveDocument={onRemoveDocument} />,
+        );
+
+        expect(screen.getByText('Alpha')).not.toBeNull();
+        expect(screen.getByText('Gamma')).not.toBeNull();
+        expect(screen.queryByText('Delta')).toBeNull();
+        expect(screen.getByText('+2')).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /show more/i }));
+
+        expect(screen.getByText('Delta')).not.toBeNull();
+        expect(screen.getByText('Epsilon')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /show less/i })).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /Remove Epsilon/i }));
+
+        expect(onRemoveDocument).toHaveBeenCalledWith('doc-4');
+
+        fireEvent.click(screen.getByRole('button', { name: /show less/i }));
+
+        expect(screen.queryByText('Delta')).toBeNull();
+        expect(screen.getByText('+2')).not.toBeNull();
+    });
+
     it('renders context usage and triggers manual compaction', async () => {
         const onCompactContext = vi.fn();
 
@@ -269,4 +301,43 @@ describe('MessageInput', () => {
             tray.compareDocumentPosition(screen.getByRole('textbox')) & Node.DOCUMENT_POSITION_FOLLOWING,
         ).toBeTruthy();
     });
+
+    it('collapses large workstream lists and navigates from a selected workstream', () => {
+        const onSelectWorkstream = vi.fn();
+        const activeWorkstreams = ['alpha', 'beta', 'gamma', 'delta', 'epsilon'].map((workstream_id, index) => ({
+            workstream_id,
+            launch_id: `launch-${index}`,
+            elapsed_ms: 0,
+            deadline_ms: 0,
+            remaining_ms: 0,
+            status: 'running' as const,
+        }));
+
+        renderWithProviders(
+            <MessageInput
+                onSend={vi.fn()}
+                isStreaming
+                activeWorkstreams={activeWorkstreams}
+                onSelectWorkstream={onSelectWorkstream}
+            />,
+        );
+
+        expect(screen.getByRole('button', { name: 'Alpha' })).not.toBeNull();
+        expect(screen.getByRole('button', { name: 'Gamma' })).not.toBeNull();
+        expect(screen.queryByRole('button', { name: 'Delta' })).toBeNull();
+        expect(screen.getByText('+2')).not.toBeNull();
+        expect(screen.getByText('Show more')).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /show more/i }));
+
+        expect(screen.getByRole('button', { name: 'Delta' })).not.toBeNull();
+        expect(screen.getByRole('button', { name: 'Epsilon' })).not.toBeNull();
+        expect(screen.getByRole('button', { name: /show less/i })).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Delta' }));
+
+        expect(onSelectWorkstream).toHaveBeenCalledWith('delta');
+        expect(screen.queryByRole('button', { name: 'Delta' })).toBeNull();
+        expect(screen.getByRole('button', { name: /show more/i })).not.toBeNull();
+    });
 });