@vertesia/ui 1.4.0 → 1.4.1

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

@@ -6,7 +6,7 @@ import {
     type JSONSchema,
     type Plan,
 } from '@vertesia/common';
-import { Badge, Button, cn, VTooltip } from '@vertesia/ui/core';
+import { Badge, Button, cn } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
 import { NavLink } from '@vertesia/ui/router';
 import { MarkdownRenderer, type MarkdownRendererProps } from '@vertesia/ui/widgets';
@@ -49,6 +49,7 @@ import {
     getRequestInputDisplayText,
     getRequestInputMessageKey,
     getResolvedToolApprovalKeys,
+    getToolApprovalResponseMetadata,
     hasRequestInputUx,
     isRequestInputAnswered,
     isToolApprovalAnswerHidden,
@@ -763,7 +764,9 @@ function SummaryMessage({
                     options={uxConfig.options}
                     variant={uxConfig.variant}
                     multiSelect={uxConfig.multiSelect}
-                    onSelect={(optionId) => onSendMessage?.(optionId)}
+                    onSelect={(optionId) =>
+                        onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                    }
                     onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                     allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
                     placeholder={uxConfig.free_response?.placeholder}
@@ -2240,7 +2243,12 @@ function SummaryActivityRow({
                                                 options={uxConfig.options}
                                                 variant={uxConfig.variant}
                                                 multiSelect={uxConfig.multiSelect}
-                                                onSelect={(optionId) => onSendMessage?.(optionId)}
+                                                onSelect={(optionId) =>
+                                                    onSendMessage?.(
+                                                        optionId,
+                                                        getToolApprovalResponseMetadata(message, optionId),
+                                                    )
+                                                }
                                                 onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                                                 allowFreeResponse={
                                                     !uxConfig.options?.length || !!uxConfig.free_response
@@ -2328,8 +2336,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 +2440,7 @@ const SCROLL_THROTTLE_MS = 100; // Max 10 scrolls per second
 
 function AllMessagesMixedComponent({
     messages,
+    workstreamSourceMessages,
     bottomRef,
     viewMode = 'stacked',
     isCompleted = false,
@@ -2536,36 +2580,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 +2609,7 @@ function AllMessagesMixedComponent({
         });
 
         return extractedWorkstreams;
-    }, [sortedMessages]);
+    }, [workstreamSourceSorted]);
 
     const activeWorkstreamName = React.useMemo(() => {
         if (activeWorkstream === 'all') return undefined;
@@ -2616,17 +2650,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 +2668,7 @@ function AllMessagesMixedComponent({
         });
 
         return counts;
-    }, [sortedMessages]);
+    }, [workstreamSourceSorted]);
 
     // Filter messages based on active workstream
     const displayMessages = React.useMemo(() => {
@@ -2869,7 +2903,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 +2939,7 @@ function AllMessagesMixedComponent({
         }
 
         return statusMap;
-    }, [sortedMessages]);
+    }, [workstreamSourceSorted]);
 
     return (
         <div
@@ -3220,18 +3254,16 @@ function AllMessagesMixedComponent({
                     {isSummaryView && activeWorkstream !== 'all' && activeWorkstreamName && (
                         <div className="sticky top-0 z-20 -mx-2 bg-background/95 px-2 pb-2 pt-1 backdrop-blur sm:-mx-4 sm:px-4">
                             <div className="mx-auto flex w-full max-w-3xl items-center gap-2 border-b border-border/70 pb-3">
-                                <VTooltip description={t('agent.backToMainAgent')} asChild>
-                                    <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-8 shrink-0 text-muted hover:text-foreground"
-                                        aria-label={t('agent.backToMainAgent')}
-                                        onClick={handleShowMainAgentChat}
-                                    >
-                                        <ArrowLeft className="size-4" aria-hidden="true" />
-                                    </Button>
-                                </VTooltip>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-8 shrink-0 text-muted hover:text-foreground"
+                                    title={t('agent.backToMainAgent')}
+                                    onClick={handleShowMainAgentChat}
+                                >
+                                    <ArrowLeft className="size-4" aria-hidden="true" />
+                                </Button>
                                 <div className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
                                     {activeWorkstreamName}
                                 </div>

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

@@ -100,7 +100,9 @@ export default function Header({
     const controls = (
         <div
             className={cn(
-                isCompact ? 'flex flex-col items-center gap-1' : 'flex justify-end items-center gap-2 ms-auto',
+                isCompact
+                    ? 'flex flex-row items-center gap-1 lg:flex-col'
+                    : 'flex justify-end items-center gap-2 ms-auto',
             )}
         >
             {showPlanButton && (
@@ -177,7 +179,6 @@ export default function Header({
                     variant={isPlaybackEnabled ? 'primary' : 'ghost'}
                     onClick={onTogglePlayback}
                     aria-pressed={isPlaybackEnabled}
-                    aria-label={t('agent.rewind.label')}
                     title={t('agent.rewind.label')}
                     className={cn(
                         'transition-all duration-200 rounded-md',
@@ -376,7 +377,6 @@ function MoreDropdown({
                     size={compact ? 'icon' : 'xs'}
                     variant="ghost"
                     title={t('agent.moreActions')}
-                    aria-label={t('agent.moreActions')}
                     className={compact ? 'size-8 rounded-lg' : undefined}
                 >
                     <MoreVertical className="size-4" />

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

@@ -54,6 +54,31 @@ describe('MessageInput', () => {
         expect(onFilesSelected).toHaveBeenCalledWith([file]);
     });
 
+    it('does not send or clear the text when Enter is pressed while files are still processing', () => {
+        const onSend = vi.fn();
+        renderWithProviders(<MessageInput onSend={onSend} onFilesSelected={vi.fn()} hasProcessingFiles />);
+
+        const textbox = screen.getByRole('textbox') as HTMLTextAreaElement;
+        fireEvent.change(textbox, { target: { value: 'please analyze this' } });
+        fireEvent.keyDown(textbox, { key: 'Enter' });
+
+        expect(onSend).not.toHaveBeenCalled();
+        // The typed text must be retained so the user doesn't have to re-type it.
+        expect(textbox.value).toBe('please analyze this');
+    });
+
+    it('sends and clears the text on Enter once files have finished processing', () => {
+        const onSend = vi.fn();
+        renderWithProviders(<MessageInput onSend={onSend} onFilesSelected={vi.fn()} />);
+
+        const textbox = screen.getByRole('textbox') as HTMLTextAreaElement;
+        fireEvent.change(textbox, { target: { value: 'please analyze this' } });
+        fireEvent.keyDown(textbox, { key: 'Enter' });
+
+        expect(onSend).toHaveBeenCalledWith('please analyze this');
+        expect(textbox.value).toBe('');
+    });
+
     it('renders attachment actions before the MCP slot', () => {
         renderWithProviders(<MessageInput onSend={vi.fn()} mcpSlot={<button type="button">MCP</button>} isCompleted />);
 

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

@@ -346,7 +346,11 @@ export default function MessageInput({
 
     const handleSend = () => {
         const message = value.trim();
-        if (!message || disabled || isSending) return;
+        // Mirror the send button's disabled condition so the keyboard (Enter) path can't
+        // dispatch a send that the parent will reject while files are still uploading —
+        // otherwise the text would be cleared below and lost. The disabled button + its
+        // "wait for files" tooltip already explain why Enter does nothing here.
+        if (!message || disabled || isSending || hasProcessingFiles) return;
 
         onSend(message);
         setValue('');
@@ -519,7 +523,6 @@ export default function MessageInput({
                                         variant="ghost"
                                         size="icon"
                                         className="size-8 rounded-full text-muted hover:bg-muted"
-                                        aria-label={t('agent.addAttachment')}
                                         title={t('agent.addAttachment')}
                                     >
                                         <PlusIcon className="size-4" />
@@ -650,7 +653,6 @@ export default function MessageInput({
                                 '[&_svg]:text-destructive disabled:[&_svg]:text-muted',
                             )}
                             title={t('agent.stopTooltip')}
-                            aria-label={t('agent.stopTooltip')}
                         >
                             {isStopping ? (
                                 <Spinner size="sm" />

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

@@ -35,6 +35,7 @@ import { ThinkingMessages } from '../WaitingMessages';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
 import { MessageDeliveryStatus } from './MessageDeliveryStatus';
 import { processContentForMarkdown } from './processContentForMarkdown';
+import { getToolApprovalResponseMetadata } from './requestInputMessages';
 import { getWorkstreamId } from './utils';
 
 /** className overrides for MessageItem — single source of truth for all className overrides. */
@@ -649,7 +650,9 @@ function MessageItemComponent({
                                       options={uxConfig.options}
                                       variant={uxConfig.variant}
                                       multiSelect={uxConfig.multiSelect}
-                                      onSelect={(optionId) => onSendMessage?.(optionId)}
+                                      onSelect={(optionId) =>
+                                          onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                                      }
                                       onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                                       allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
                                       placeholder={uxConfig.free_response?.placeholder}