@vertesia/ui 1.4.0-dev.20260615.042549Z → 1.4.0-dev.20260629.130134Z

package/lib/features/agent/chat/ModernAgentOutput/AllMessagesMixed.js

@@ -1,23 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AgentMessageType, } from '@vertesia/common';
-import { cn } from '@vertesia/ui/core';
+import { Badge, Button, cn, VTooltip } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
 import { NavLink } from '@vertesia/ui/router';
 import { MarkdownRenderer } from '@vertesia/ui/widgets';
-import { AlertTriangle, Bot, Brain, CheckCircle, ChevronDown, ChevronRight, CopyIcon, FileText, Pencil, Search, Terminal, Wrench, } from 'lucide-react';
+import { AlertTriangle, ArrowLeft, Bot, Brain, CheckCircle, ChevronDown, ChevronRight, CopyIcon, FileText, Pencil, Search, Terminal, Wrench, } from 'lucide-react';
 import React, { Component, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatedThinkingDots, PulsatingCircle } from '../AnimatedThinkingDots';
 import { AskUserWidget } from '../AskUserWidget';
 import { ThinkingMessages } from '../WaitingMessages';
-import { formatWorkstreamName, getWorkstreamDisplayName, getWorkstreamLaunchDetails, } from '../workstreams.js';
+import { formatWorkstreamName, getWorkstreamActivityDetails, getWorkstreamDisplayName, getWorkstreamLaunchDetails, } from '../workstreams.js';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
 import BatchProgressPanel from './BatchProgressPanel';
+import { getMessageDeliveryStatus, MessageDeliveryStatus } from './MessageDeliveryStatus';
 import MessageItem from './MessageItem';
-import { getAnsweredRequestInputKeys, getPendingRequestInputMessage, getRequestInputMessageKey, isRequestInputAnswered, } from './requestInputMessages';
+import { getAnsweredRequestInputKeys, getAnsweredToolApprovalRequestInputKeys, getHiddenToolApprovalAnswerKeys, getPendingRequestInputMessage, getRequestInputDisplayText, getRequestInputMessageKey, getResolvedToolApprovalKeys, hasRequestInputUx, isRequestInputAnswered, isToolApprovalAnswerHidden, isToolApprovalRequestInput, isToolApprovalRequestInputHidden, } from './requestInputMessages';
 import StreamingMessage from './StreamingMessage';
 import { buildSummaryConversationItems, buildSummaryDisplayMessages, getSummaryActivityAnchorTimestamp, isInitialSummaryActivityFallback, isTransientThinkingMessage, isTransientWorkStatusMessage, shouldShowSummaryActivityFallback, } from './SummaryConversation';
 import ToolCallGroup from './ToolCallGroup';
-import { DONE_STATES, getWorkstreamId, groupMessagesWithStreaming, isInProgress, isToolPreambleMessage, mergeConsecutiveToolGroups, shouldCollapseAdjacentRenderedMessage, } from './utils';
+import { DONE_STATES, filterMessagesForActiveWorkstream, getWorkstreamId, groupMessagesWithStreaming, isInProgress, isToolPreambleMessage, isUserStoppedMessage, mergeConsecutiveToolGroups, shouldCollapseAdjacentRenderedMessage, } from './utils';
 import WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from './WorkstreamTabs';
 // Check if message is a batch progress message
 const isBatchProgressMessage = (message) => {
@@ -44,6 +45,22 @@ function formatDuration(seconds) {
     const remainingSeconds = seconds % 60;
     return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
 }
+function parseTimestampMs(timestamp) {
+    if (timestamp === undefined || timestamp === null || timestamp === '')
+        return undefined;
+    const value = typeof timestamp === 'number' ? timestamp : new Date(timestamp).getTime();
+    return Number.isFinite(value) ? value : undefined;
+}
+function formatToolDetailTimestamp(timestamp) {
+    const value = parseTimestampMs(timestamp);
+    if (value === undefined)
+        return undefined;
+    return new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    }).format(new Date(value));
+}
 function getReadableToolLabel(message) {
     const details = message.details;
     const rawTool = details?.tool || '';
@@ -73,24 +90,98 @@ function getReadableToolLabel(message) {
         return text;
     return 'Using tool';
 }
-function getSummaryWorkLabel(status, isActive) {
-    if (status === 'error')
-        return 'Work needs attention';
-    if (status === 'warning')
-        return 'Work had warnings';
+function getSummaryWorkLabel(isActive) {
     return isActive ? 'Working' : 'Worked';
 }
 function isTransientThinkingWork(messages) {
     return messages.length > 0 && messages.every(isTransientWorkStatusMessage);
 }
-function getSummaryActivityLabel(status, isActive) {
-    return getSummaryWorkLabel(status, isActive);
+function getSummaryActivityLabel(isActive) {
+    return getSummaryWorkLabel(isActive);
 }
 function hasOpenUserTurn(messages) {
     const mainMessages = messages.filter((message) => getWorkstreamId(message) === 'main');
     const latestMessage = mainMessages[mainMessages.length - 1] ?? messages[messages.length - 1];
     return latestMessage?.type === AgentMessageType.QUESTION;
 }
+function hasLatestToolApprovalAllowTurn(messages, hiddenToolApprovalAnswerKeys) {
+    const mainMessages = messages.filter((message) => getWorkstreamId(message) === 'main');
+    const latestMessage = mainMessages[mainMessages.length - 1] ?? messages[messages.length - 1];
+    if (!latestMessage || !isToolApprovalAnswerHidden(latestMessage, hiddenToolApprovalAnswerKeys))
+        return false;
+    const response = getToolApprovalResponse(latestMessage);
+    return response === 'allow_once' || response === 'allow_for_run';
+}
+function getWriteArtifactCompletionPath(message) {
+    if (message.type !== AgentMessageType.UPDATE)
+        return undefined;
+    const details = getDetailsRecord(message);
+    if (details.tool !== undefined || details.activity_group_id !== undefined)
+        return undefined;
+    const path = typeof details.path === 'string' && details.path.trim() ? details.path.trim() : undefined;
+    if (!path)
+        return undefined;
+    return getMessageText(message) === `Prepared and saved artifact to ${path}` ? path : undefined;
+}
+function findPreviousWriteArtifactToolMessage(messages, index) {
+    const workstreamId = getWorkstreamId(messages[index]);
+    for (let prevIndex = index - 1; prevIndex >= 0; prevIndex -= 1) {
+        const previous = messages[prevIndex];
+        if (getWorkstreamId(previous) !== workstreamId)
+            continue;
+        const details = getDetailsRecord(previous);
+        if (details.tool === 'write_artifact' && typeof details.activity_group_id === 'string')
+            return previous;
+        if (previous.type === AgentMessageType.REQUEST_INPUT)
+            continue;
+        if (getToolApprovalResponse(previous))
+            continue;
+        if (details.display_role === 'thinking')
+            continue;
+        if (typeof details.tool === 'string' && details.tool !== 'write_artifact')
+            return undefined;
+        if (previous.type === AgentMessageType.ANSWER ||
+            previous.type === AgentMessageType.COMPLETE ||
+            previous.type === AgentMessageType.IDLE ||
+            previous.type === AgentMessageType.TERMINATED) {
+            return undefined;
+        }
+    }
+    return undefined;
+}
+function attachWriteArtifactCompletionMessages(messages) {
+    return messages.map((message, index) => {
+        const path = getWriteArtifactCompletionPath(message);
+        if (!path)
+            return message;
+        const previousToolMessage = findPreviousWriteArtifactToolMessage(messages, index);
+        const previousDetails = previousToolMessage ? getDetailsRecord(previousToolMessage) : undefined;
+        if (!previousDetails)
+            return message;
+        const activityGroupId = typeof previousDetails.activity_group_id === 'string' ? previousDetails.activity_group_id : undefined;
+        const toolRunId = typeof previousDetails.tool_run_id === 'string' ? previousDetails.tool_run_id : undefined;
+        const toolUseId = typeof previousDetails.tool_use_id === 'string' ? previousDetails.tool_use_id : undefined;
+        const toolIteration = typeof previousDetails.tool_iteration === 'number' ? previousDetails.tool_iteration : undefined;
+        if (!activityGroupId)
+            return message;
+        return {
+            ...message,
+            details: {
+                ...message.details,
+                event_class: 'activity',
+                tool: 'write_artifact',
+                tool_run_id: toolRunId ?? 'write_artifact',
+                tool_use_id: toolUseId ?? toolRunId ?? 'write_artifact',
+                tool_iteration: toolIteration,
+                tool_status: 'completed',
+                tool_event: 'progress',
+                activity_group_id: activityGroupId,
+                output: getMessageText(message),
+                path,
+            },
+        };
+    });
+}
 function getMessageText(message) {
     if (!message.message)
         return '';
@@ -98,12 +189,12 @@ function getMessageText(message) {
         return JSON.stringify(message.message, null, 2);
     return String(message.message).trim();
 }
-function SummaryWorkstreamLaunchMessage({ message, details, }) {
+function SummaryWorkstreamLaunchMessage({ message, details, onSelectWorkstream, }) {
     const { t } = useUITranslation();
     const workstreamName = getWorkstreamDisplayName(details.workstreamId, details.interaction);
     const interactionName = details.interaction ? formatWorkstreamName(details.interaction) : '';
     const secondaryName = interactionName && interactionName !== workstreamName ? interactionName : undefined;
-    return (_jsx("div", { className: "mx-auto w-full max-w-3xl px-1", "data-workstream-id": details.workstreamId, children: _jsxs("div", { className: "flex items-start gap-3 border-b border-border/70 py-2 text-sm text-muted", children: [_jsx(Bot, { className: "mt-0.5 size-4 shrink-0 text-muted", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx("span", { className: "font-medium text-muted", children: t('agent.workstreams') }), _jsx("span", { className: "min-w-0 truncate text-foreground/85", children: workstreamName })] }), secondaryName && _jsx("div", { className: "mt-0.5 truncate text-xs text-muted/75", children: secondaryName }), _jsx("span", { className: "sr-only", children: getMessageText(message) })] })] }) }));
+    return (_jsx("div", { className: "mx-auto w-full max-w-3xl px-1", "data-workstream-id": details.workstreamId, children: _jsxs("button", { type: "button", className: cn('group flex w-full items-start gap-3 border-b border-border/70 py-2 text-start text-sm text-muted', 'transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2', 'focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background'), onClick: () => onSelectWorkstream?.(details.workstreamId), children: [_jsx(Bot, { className: "mt-0.5 size-4 shrink-0 text-muted", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx("span", { className: "font-medium text-muted", children: t('agent.workstreams') }), _jsx("span", { className: "min-w-0 truncate text-foreground/85", children: workstreamName })] }), secondaryName && _jsx("div", { className: "mt-0.5 truncate text-xs text-muted/75", children: secondaryName }), _jsx("span", { className: "sr-only", children: getMessageText(message) })] }), _jsx(ChevronRight, { className: "mt-0.5 size-4 shrink-0 text-muted transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" })] }) }));
 }
 const SUMMARY_PROSE_CLASS = [
     'agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/80',
@@ -113,6 +204,8 @@ const SUMMARY_PROSE_CLASS = [
     '[&_p]:text-foreground/80 [&_li]:text-foreground/80 [&_li::marker]:text-muted',
 ].join(' ');
 const USER_BUBBLE_COLLAPSE_THRESHOLD = 520;
+const SUMMARY_THOUGHT_COLLAPSE_LINES = 6;
+const SUMMARY_THOUGHT_COLLAPSE_THRESHOLD = 520;
 const STORE_LINK_MARKDOWN_RE = /\[[^\]]+\]\((?:\/store\/(?:objects|collections)\/|store:|document:|document:\/\/|collection:)[^)]+\)/;
 const DEFAULT_AGENT_MARKDOWN_COMPONENTS = {
     table: AgentMarkdownTable,
@@ -265,7 +358,7 @@ function useRotatingThinkingMessageIndex(enabled = true) {
     }, [enabled]);
     return thinkingMessageIndex;
 }
-function SummaryUserBubble({ children, workstreamId, className, artifactRunId, markdownComponents, }) {
+function SummaryUserBubble({ children, message, workstreamId, className, artifactRunId, markdownComponents, }) {
     const { t } = useUITranslation();
     const [isExpanded, setIsExpanded] = useState(false);
     const contentLength = useMemo(() => getReactNodeTextLength(children), [children]);
@@ -273,6 +366,7 @@ function SummaryUserBubble({ children, workstreamId, className, artifactRunId, m
     const isPlainText = typeof children === 'string' || typeof children === 'number';
     const textContent = isPlainText ? String(children) : '';
     const shouldRenderMarkdown = typeof children === 'string' && STORE_LINK_MARKDOWN_RE.test(children);
+    const deliveryStatus = message ? getMessageDeliveryStatus(message) : undefined;
     useEffect(() => {
         if (!shouldCollapse && isExpanded) {
             setIsExpanded(false);
@@ -280,11 +374,11 @@ function SummaryUserBubble({ children, workstreamId, className, artifactRunId, m
     }, [isExpanded, shouldCollapse]);
     return (_jsx("div", { className: "mx-auto flex w-full max-w-3xl justify-end px-1", children: _jsxs("div", { className: cn('max-w-[min(44rem,82%)] rounded-[1.35rem] bg-mixer-muted/35 px-4 py-2.5', 'text-sm font-normal leading-6 text-foreground/90 shadow-sm shadow-black/5 dark:bg-mixer-muted/15 dark:text-foreground/88 dark:shadow-none', 'break-words [overflow-wrap:anywhere]', className), "data-workstream-id": workstreamId, children: [_jsx("div", { className: cn(isPlainText && !shouldRenderMarkdown && 'whitespace-pre-wrap', shouldCollapse &&
                         !isExpanded &&
-                        'max-h-72 overflow-hidden [mask-image:linear-gradient(to_bottom,black_76%,transparent_100%)]'), children: shouldRenderMarkdown ? (_jsx(MarkdownRenderer, { artifactRunId: artifactRunId, components: markdownComponents, className: cn('agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/90', 'prose-p:my-0 prose-p:leading-6 prose-a:text-foreground prose-a:underline prose-a:decoration-muted prose-a:underline-offset-4', '[&_p+_p]:mt-2'), children: textContent })) : (children) }), shouldCollapse && (_jsxs("button", { type: "button", "aria-expanded": isExpanded, className: "mt-2 inline-flex items-center gap-1 text-sm font-medium text-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => setIsExpanded((current) => !current), children: [isExpanded ? t('agent.showLess') : t('agent.showMore'), _jsx(ChevronDown, { className: cn('size-4 transition-transform', isExpanded && 'rotate-180'), "aria-hidden": "true" })] }))] }) }));
+                        'max-h-72 overflow-hidden [mask-image:linear-gradient(to_bottom,black_76%,transparent_100%)]'), children: shouldRenderMarkdown ? (_jsx(MarkdownRenderer, { artifactRunId: artifactRunId, components: markdownComponents, className: cn('agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/90', 'prose-p:my-0 prose-p:leading-6 prose-a:text-foreground prose-a:underline prose-a:decoration-muted prose-a:underline-offset-4', '[&_p+_p]:mt-2'), children: textContent })) : (children) }), shouldCollapse && (_jsxs("button", { type: "button", "aria-expanded": isExpanded, className: "mt-2 inline-flex items-center gap-1 text-sm font-medium text-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => setIsExpanded((current) => !current), children: [isExpanded ? t('agent.showLess') : t('agent.showMore'), _jsx(ChevronDown, { className: cn('size-4 transition-transform', isExpanded && 'rotate-180'), "aria-hidden": "true" })] })), message && deliveryStatus ? (_jsx("div", { className: "mt-1.5 flex justify-end", children: _jsx(MessageDeliveryStatus, { message: message, className: "h-4 w-4" }) })) : null] }) }));
 }
-function SummaryMessage({ message, onSendMessage, requestInputAnswered = false, StoreLinkComponent, CollectionLinkComponent, }) {
-    const content = getMessageText(message);
-    const workstreamLaunchDetails = getWorkstreamLaunchDetails(message);
+function SummaryMessage({ message, onSendMessage, onSelectWorkstream, requestInputAnswered = false, StoreLinkComponent, CollectionLinkComponent, }) {
+    const content = message.type === AgentMessageType.REQUEST_INPUT ? getRequestInputDisplayText(message) : getMessageText(message);
+    const workstreamLaunchDetails = getWorkstreamLaunchDetails(message) ?? getWorkstreamActivityDetails(message);
     const workstreamId = getWorkstreamId(message);
     const runId = message.workflow_run_id;
     const parsedQuestion = useMemo(() => (message.type === AgentMessageType.QUESTION ? parseUserMessageAttachments(content) : null), [content, message.type]);
@@ -310,17 +404,17 @@ function SummaryMessage({ message, onSendMessage, requestInputAnswered = false,
         },
     }), [StoreLinkComponent, CollectionLinkComponent]);
     if (workstreamLaunchDetails) {
-        return _jsx(SummaryWorkstreamLaunchMessage, { message: message, details: workstreamLaunchDetails });
+        return (_jsx(SummaryWorkstreamLaunchMessage, { message: message, details: workstreamLaunchDetails, onSelectWorkstream: onSelectWorkstream }));
     }
     if (message.type === AgentMessageType.QUESTION) {
         const questionBody = parsedQuestion?.body ?? content;
         const attachments = parsedQuestion?.attachments ?? [];
-        return (_jsxs(_Fragment, { children: [attachments.length > 0 && (_jsx("div", { className: "mx-auto flex w-full max-w-3xl justify-end px-1", children: _jsx(AttachmentPreviewList, { items: attachments, artifactRunId: runId, align: "end", variant: "message", StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent }) })), questionBody && (_jsx(SummaryUserBubble, { workstreamId: workstreamId, artifactRunId: runId, markdownComponents: markdownComponents, children: questionBody }))] }));
+        return (_jsxs(_Fragment, { children: [attachments.length > 0 && (_jsx("div", { className: "mx-auto flex w-full max-w-3xl justify-end px-1", children: _jsx(AttachmentPreviewList, { items: attachments, artifactRunId: runId, align: "end", variant: "message", StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent }) })), questionBody && (_jsx(SummaryUserBubble, { message: message, workstreamId: workstreamId, artifactRunId: runId, markdownComponents: markdownComponents, children: questionBody }))] }));
     }
     const requestInputDetails = message.details;
     if (message.type === AgentMessageType.REQUEST_INPUT && requestInputDetails?.ux) {
         const uxConfig = requestInputDetails.ux;
-        return (_jsx("div", { className: "mx-auto w-full max-w-3xl px-1", children: _jsx(AskUserWidget, { question: content, options: uxConfig.options, variant: uxConfig.variant, multiSelect: uxConfig.multiSelect, onSelect: (optionId) => onSendMessage?.(optionId), onMultiSelect: (optionIds) => onSendMessage?.(optionIds.join(', ')), hideBorder: true, compact: true, answered: requestInputAnswered }) }));
+        return (_jsx("div", { className: "mx-auto w-full max-w-3xl px-1", children: _jsx(AskUserWidget, { question: content, options: uxConfig.options, variant: uxConfig.variant, multiSelect: uxConfig.multiSelect, onSelect: (optionId) => onSendMessage?.(optionId), 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), hideBorder: true, compact: true, answered: requestInputAnswered }) }));
     }
     const isError = message.type === AgentMessageType.ERROR || message.type === AgentMessageType.WARNING;
     return (_jsxs("div", { className: "mx-auto w-full max-w-3xl px-1", "data-workstream-id": workstreamId, children: [isError && (_jsx("div", { className: "mb-2 text-xs font-medium text-destructive", children: message.type === AgentMessageType.WARNING ? 'Warning' : 'Error' })), content && (_jsx("div", { className: cn(SUMMARY_PROSE_CLASS, isError && 'rounded-lg border border-destructive/20 bg-destructive/5 px-3 py-2'), style: { overflowWrap: 'anywhere' }, children: _jsx(MarkdownRenderer, { artifactRunId: runId, onProposalSelect: (optionId) => onSendMessage?.(optionId), onProposalSubmit: (text) => onSendMessage?.(text), components: markdownComponents, children: content }) }))] }));
@@ -437,6 +531,9 @@ function InitialRequestWaitingCard({ label, timestamp, className, }) {
     const elapsed = useLiveElapsedSeconds(timestamp, true);
     return (_jsx("div", { className: cn('mx-auto w-full max-w-3xl px-1', className), children: _jsxs("div", { className: "border-b border-border/70 pb-4 text-sm text-muted", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(PulsatingCircle, { size: "sm", color: "blue" }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: label }), _jsxs("span", { className: "ms-2 text-muted/75", children: ["for ", formatDuration(elapsed)] })] }), _jsx("div", { className: "mt-1 truncate text-muted/80", children: ThinkingMessages[thinkingMessageIndex] })] })] }), _jsx("div", { className: "mt-3 ps-6", children: _jsx(AnimatedThinkingDots, { color: "blue" }) })] }) }));
 }
+const SUMMARY_TOOL_STARTED_AT_DETAIL_KEY = '_summary_started_at';
+const SUMMARY_TOOL_FINISHED_AT_DETAIL_KEY = '_summary_finished_at';
+const SYNTHETIC_TOOL_APPROVAL_EVENT_SOURCE = 'synthetic_tool_approval_decision';
 const TOOL_DETAIL_SYSTEM_KEYS = new Set([
     'account_id',
     'activity_group_id',
@@ -462,11 +559,26 @@ const TOOL_DETAIL_SYSTEM_KEYS = new Set([
     'tools',
     'message_to_human',
     'progress_messages',
+    'source',
+    'token_usage',
+    'checkpoint_at',
+    'checkpoint_threshold',
+    'approval_decision',
+    'approval_request',
+    'cancellation_reason',
+    SUMMARY_TOOL_STARTED_AT_DETAIL_KEY,
+    SUMMARY_TOOL_FINISHED_AT_DETAIL_KEY,
     'workflow_run_id',
 ]);
 function getDetailsRecord(message) {
     return isRecordValue(message.details) ? message.details : {};
 }
+function isDocumentPanelEventMessage(message) {
+    if (message.type !== AgentMessageType.UPDATE)
+        return false;
+    const eventClass = getDetailsRecord(message).event_class;
+    return eventClass === 'document_created' || eventClass === 'document_updated';
+}
 function humanizeIdentifier(value) {
     return value
         .replace(/[_-]+/g, ' ')
@@ -492,6 +604,13 @@ function getToolNames(details) {
     }
     return names;
 }
+function getUniqueToolName(details) {
+    const names = Array.from(new Set(getToolNames(details)));
+    return names.length > 0 ? names.join(', ') : undefined;
+}
+function getTimestampDetail(value) {
+    return typeof value === 'number' || typeof value === 'string' ? value : undefined;
+}
 const TOOL_TARGET_KEYS = [
     'query',
     'path',
@@ -520,17 +639,15 @@ function getToolDetailKind(message) {
     const details = getDetailsRecord(message);
     const toolNames = getToolNames(details).join(' ').toLowerCase();
     const concreteTool = typeof details.tool === 'string' ? details.tool.toLowerCase() : '';
-    const text = getMessageText(message).toLowerCase();
-    const haystack = `${toolNames} ${text}`;
+    const classifierText = concreteTool || toolNames;
     if (isToolPreambleMessage(message))
         return 'think';
-    if (concreteTool.startsWith('learn_') || haystack.includes('learn_') || /\bskill\b/.test(text))
+    if (concreteTool.startsWith('learn_') || toolNames.includes('learn_'))
         return 'skill';
     if (concreteTool === 'discover_tools')
         return 'discover';
     if (message.type === AgentMessageType.THOUGHT && !concreteTool)
         return 'think';
-    const classifierText = concreteTool || haystack;
     if (classifierText.includes('search') || classifierText.includes('web') || classifierText.includes('fetch'))
         return 'search';
     if (classifierText.includes('read') || classifierText.includes('document') || classifierText.includes('file'))
@@ -579,6 +696,125 @@ function getToolTarget(details) {
     }
     return undefined;
 }
+function getApprovalDecisionLabel(decision, toolLabel) {
+    switch (decision) {
+        case 'denied':
+        case 'denied_with_feedback':
+            return `User declined to use ${toolLabel}.`;
+        case 'timeout':
+            return `Approval timed out for ${toolLabel}.`;
+        case 'reviewer_denied':
+            return `Approval reviewer denied ${toolLabel}.`;
+        case 'cancelled_after_denial':
+            return `Cancelled ${toolLabel} after another tool was denied.`;
+        default:
+            return undefined;
+    }
+}
+function getApprovalDecisionStatusText(decision) {
+    switch (decision) {
+        case 'denied':
+        case 'denied_with_feedback':
+            return 'Declined by user';
+        case 'timeout':
+            return 'Approval timed out';
+        case 'reviewer_denied':
+            return 'Denied by reviewer';
+        case 'cancelled_after_denial':
+            return 'Cancelled after denial';
+        default:
+            return undefined;
+    }
+}
+function getToolApprovalRecord(message) {
+    const details = getDetailsRecord(message);
+    const toolApproval = details.tool_approval;
+    return isRecordValue(toolApproval) ? toolApproval : undefined;
+}
+function getApprovalKeyFromToolApproval(toolApproval) {
+    const approvalKey = toolApproval?.approval_key;
+    return typeof approvalKey === 'string' && approvalKey.trim() ? approvalKey.trim() : undefined;
+}
+function getToolApprovalResponse(message) {
+    if (message.type !== AgentMessageType.QUESTION)
+        return undefined;
+    const normalized = getMessageText(message).trim().toLowerCase();
+    if (normalized === 'allow_once' || normalized === 'allow_for_run' || normalized === 'deny')
+        return normalized;
+    return undefined;
+}
+function getToolApprovalDisplayName(toolApproval) {
+    const title = toolApproval.tool_title;
+    if (typeof title === 'string' && title.trim())
+        return title.trim();
+    const name = toolApproval.tool_name;
+    if (typeof name === 'string' && name.trim())
+        return humanizeIdentifier(name.trim());
+    return 'tool action';
+}
+function buildSyntheticToolApprovalDecisionMessages(messages, resolvedToolApprovalKeys) {
+    const syntheticMessages = [];
+    messages.forEach((message, index) => {
+        if (message.type !== AgentMessageType.REQUEST_INPUT)
+            return;
+        const toolApproval = getToolApprovalRecord(message);
+        const approvalKey = getApprovalKeyFromToolApproval(toolApproval);
+        if (!toolApproval || !approvalKey || resolvedToolApprovalKeys.has(approvalKey))
+            return;
+        const workstreamId = getWorkstreamId(message);
+        let responseMessage;
+        for (let nextIndex = index + 1; nextIndex < messages.length; nextIndex += 1) {
+            const nextMessage = messages[nextIndex];
+            if (getWorkstreamId(nextMessage) !== workstreamId)
+                continue;
+            if (nextMessage.type === AgentMessageType.REQUEST_INPUT)
+                break;
+            if (nextMessage.type === AgentMessageType.QUESTION) {
+                responseMessage = nextMessage;
+                break;
+            }
+        }
+        if (!responseMessage || getToolApprovalResponse(responseMessage) !== 'deny')
+            return;
+        const toolName = typeof toolApproval.tool_name === 'string' && toolApproval.tool_name.trim()
+            ? toolApproval.tool_name.trim()
+            : 'tool_action';
+        const toolLabel = getToolApprovalDisplayName(toolApproval);
+        const target = typeof toolApproval.target === 'string' && toolApproval.target.trim() ? toolApproval.target : '';
+        const approvalRequest = {
+            tool_name: toolName,
+            tool_title: toolApproval.tool_title,
+            action_summary: toolApproval.action_summary,
+            target: toolApproval.target,
+            approval_key: approvalKey,
+        };
+        syntheticMessages.push({
+            timestamp: responseMessage.timestamp ?? message.timestamp,
+            workflow_run_id: responseMessage.workflow_run_id || message.workflow_run_id,
+            type: AgentMessageType.THOUGHT,
+            message: getApprovalDecisionLabel('denied', toolLabel) ?? `User declined to use ${toolLabel}.`,
+            workstream_id: workstreamId,
+            details: {
+                event_class: 'activity',
+                tool: toolName,
+                tool_run_id: `approval:${approvalKey}`,
+                tool_use_id: `approval:${approvalKey}`,
+                tool_status: 'error',
+                tool_event: 'failed',
+                activity_group_id: `approval:${approvalKey}`,
+                approval_decision: 'denied',
+                approval_request: approvalRequest,
+                input: toolApproval.input,
+                target,
+                observation: 'The user declined this tool action.',
+                source: SYNTHETIC_TOOL_APPROVAL_EVENT_SOURCE,
+            },
+        });
+    });
+    if (syntheticMessages.length === 0)
+        return messages;
+    return [...messages, ...syntheticMessages].sort((a, b) => getTimestampMs(a.timestamp) - getTimestampMs(b.timestamp));
+}
 function compactInlineText(value, maxLength = 160) {
     const normalized = value.replace(/\s+/g, ' ').trim();
     return normalized.length > maxLength ? `${normalized.slice(0, maxLength - 1)}...` : normalized;
@@ -632,6 +868,18 @@ function getRenderableGroupKey(group) {
     const lastKey = lastMessage ? getAgentMessageRenderKey(lastMessage, 'last') : group.firstTimestamp;
     return ['group', group.toolRunId, group.firstTimestamp, firstKey, lastKey].filter(Boolean).join(':');
 }
+function getPreviousRenderableGroupTimestamp(groups, index) {
+    for (let previousIndex = index - 1; previousIndex >= 0; previousIndex--) {
+        const group = groups[previousIndex];
+        if (group.type === 'single')
+            return group.message.timestamp;
+        if (group.type === 'tool_group')
+            return group.firstTimestamp;
+        if (group.type === 'streaming')
+            return group.startTimestamp;
+    }
+    return undefined;
+}
 function formatToolSectionValue(value) {
     const text = stringifyRequestValue(value).trim();
     return text.length > 2400 ? `${text.slice(0, 2400)}\n...` : text;
@@ -673,16 +921,7 @@ function getToolDetailSections(message) {
     };
     addSection('Query', ['query']);
     addSection('Input', ['input', 'params', 'arguments', 'args']);
-    addSection('Output', [
-        'output',
-        'stdout',
-        'result',
-        'results',
-        'content',
-        'result_summary',
-        'observation',
-        'display_message',
-    ]);
+    addSection('Output', ['output', 'stdout', 'result', 'results', 'content', 'result_summary', 'observation', 'display_message'], typeof details.approval_decision === 'string' ? 'error' : undefined);
     addSection('Files', ['files', 'outputFiles']);
     addSection('Error', ['error', 'stderr'], 'error');
     if (targetEntry)
@@ -694,20 +933,28 @@ function getToolDetailSections(message) {
     return sections;
 }
 function buildSummaryToolDetailItem(message, index) {
+    if (message.type === AgentMessageType.REQUEST_INPUT)
+        return undefined;
     const text = getMessageText(message);
     const details = getDetailsRecord(message);
+    const isPreamble = isToolPreambleMessage(message);
     const kind = getToolDetailKind(message);
     const toolNames = getToolNames(details);
     const target = getToolTarget(details);
     const command = typeof details.command === 'string' && details.command.trim() ? details.command.trim() : undefined;
     const fallbackTitle = toolNames[0] ? humanizeIdentifier(toolNames[0]) : getReadableToolLabel(message);
+    const approvalDecisionTitle = getApprovalDecisionLabel(details.approval_decision, fallbackTitle);
+    const decisionText = getApprovalDecisionStatusText(details.approval_decision);
+    const messageToHuman = typeof details.message_to_human === 'string' && details.message_to_human.trim()
+        ? details.message_to_human.trim()
+        : undefined;
     const title = kind === 'think'
         ? text || fallbackTitle
         : kind === 'command'
-            ? compactInlineText(text || command || fallbackTitle)
-            : compactInlineText(target || text || fallbackTitle);
+            ? compactInlineText(messageToHuman || (!approvalDecisionTitle ? text : '') || command || fallbackTitle)
+            : compactInlineText(messageToHuman || target || (!approvalDecisionTitle ? text : '') || fallbackTitle);
     const normalizedText = text ? (kind === 'think' ? text : compactInlineText(text, 420)) : undefined;
-    const shouldShowText = normalizedText && normalizedText !== title;
+    const shouldShowText = normalizedText && normalizedText !== title && !approvalDecisionTitle;
     if (!title && !shouldShowText)
         return undefined;
     return {
@@ -715,36 +962,113 @@ function buildSummaryToolDetailItem(message, index) {
         kind,
         label: getToolDetailLabel(kind),
         title,
+        isPreamble,
         command,
         text: shouldShowText ? normalizedText : undefined,
-        status: details.tool_status,
+        toolName: getUniqueToolName(details),
+        startedAt: getTimestampDetail(details[SUMMARY_TOOL_STARTED_AT_DETAIL_KEY]) ?? message.timestamp,
+        finishedAt: getTimestampDetail(details[SUMMARY_TOOL_FINISHED_AT_DETAIL_KEY]) ?? message.timestamp,
+        status: approvalDecisionTitle ? 'error' : details.tool_status,
+        decisionText,
         sections: getToolDetailSections(message),
     };
 }
+function isPlanToolMessage(message) {
+    const details = getDetailsRecord(message);
+    return details.tool === 'plan' || details.tool === 'update_plan';
+}
+function isPlanLifecycleMessage(message) {
+    const details = getDetailsRecord(message);
+    if (message.type === AgentMessageType.UPDATE && Array.isArray(details.updates))
+        return true;
+    return message.type === AgentMessageType.PLAN && Array.isArray(details.plan);
+}
+function getActivityGroupIdentity(details) {
+    return typeof details.activity_group_id === 'string' && details.activity_group_id.trim()
+        ? details.activity_group_id.trim()
+        : undefined;
+}
+function getToolIdentity(details) {
+    if (typeof details.tool_use_id === 'string' && details.tool_use_id.trim())
+        return details.tool_use_id.trim();
+    if (typeof details.tool_run_id === 'string' && details.tool_run_id.trim())
+        return details.tool_run_id.trim();
+    if (typeof details.tool === 'string' && details.tool.trim())
+        return details.tool.trim();
+    return undefined;
+}
+function getSplitActivityGroups(messages) {
+    const startedToolIdentities = new Map();
+    const approvalDecisionToolIdentities = new Map();
+    const addIdentity = (groups, activityGroupId, toolIdentity) => {
+        if (!activityGroupId || !toolIdentity)
+            return;
+        const identities = groups.get(activityGroupId) ?? new Set();
+        identities.add(toolIdentity);
+        groups.set(activityGroupId, identities);
+    };
+    for (const message of messages) {
+        const details = getDetailsRecord(message);
+        const activityGroupId = getActivityGroupIdentity(details);
+        const toolIdentity = getToolIdentity(details);
+        if (details.tool_event === 'started') {
+            addIdentity(startedToolIdentities, activityGroupId, toolIdentity);
+        }
+        if (typeof details.approval_decision === 'string') {
+            addIdentity(approvalDecisionToolIdentities, activityGroupId, toolIdentity);
+        }
+    }
+    return new Set([...startedToolIdentities.entries(), ...approvalDecisionToolIdentities.entries()]
+        .filter(([, identities]) => identities.size > 1)
+        .map(([activityGroupId]) => activityGroupId));
+}
+function getSummaryToolGroupId(details, splitActivityGroups) {
+    const activityGroupId = getActivityGroupIdentity(details);
+    const toolIdentity = getToolIdentity(details);
+    if (activityGroupId) {
+        if (toolIdentity && splitActivityGroups.has(activityGroupId)) {
+            return `activity:${activityGroupId}:tool:${toolIdentity}`;
+        }
+        return `activity:${activityGroupId}`;
+    }
+    if (typeof details.tool_use_id === 'string' && details.tool_use_id.trim()) {
+        return `tool-use:${details.tool_use_id.trim()}`;
+    }
+    if (typeof details.tool_run_id === 'string' && details.tool_run_id.trim())
+        return `run:${details.tool_run_id.trim()}`;
+    return undefined;
+}
 function mergeSummaryToolMessages(messages) {
     const byGroupId = new Map();
     const ungrouped = [];
+    let currentPlanGroupId;
+    const splitActivityGroups = getSplitActivityGroups(messages);
     messages.forEach((message, index) => {
         const details = getDetailsRecord(message);
         if (isToolPreambleMessage(message)) {
             ungrouped.push({ index, message });
+            currentPlanGroupId = undefined;
             return;
         }
-        const activityGroupId = typeof details.activity_group_id === 'string' && details.activity_group_id.trim()
-            ? details.activity_group_id
-            : undefined;
-        const runId = typeof details.tool_run_id === 'string' && details.tool_run_id.trim() ? details.tool_run_id : undefined;
-        const groupId = activityGroupId ? `activity:${activityGroupId}` : runId ? `run:${runId}` : undefined;
-        if (!groupId) {
+        const groupId = getSummaryToolGroupId(details, splitActivityGroups);
+        const legacyPlanGroupId = !groupId && isPlanLifecycleMessage(message) ? currentPlanGroupId : undefined;
+        const effectiveGroupId = groupId ?? legacyPlanGroupId;
+        if (!effectiveGroupId) {
             ungrouped.push({ index, message });
             return;
         }
-        const group = byGroupId.get(groupId);
+        const group = byGroupId.get(effectiveGroupId);
         if (group) {
             group.messages.push(message);
         }
         else {
-            byGroupId.set(groupId, { index, messages: [message] });
+            byGroupId.set(effectiveGroupId, { index, messages: [message] });
+        }
+        if (isPlanToolMessage(message)) {
+            currentPlanGroupId = effectiveGroupId;
+        }
+        else if (message.type === AgentMessageType.PLAN) {
+            currentPlanGroupId = undefined;
         }
     });
     const grouped = Array.from(byGroupId.values()).map(({ index, messages: runMessages }) => {
@@ -752,6 +1076,10 @@ function mergeSummaryToolMessages(messages) {
         const baseMessage = sortedMessages[sortedMessages.length - 1];
         const startMessage = sortedMessages.find((message) => getDetailsRecord(message).tool_event === 'started');
         const firstTextMessage = sortedMessages.find((message) => getMessageText(message));
+        const latestApprovalDecisionMessage = sortedMessages.findLast((message) => {
+            const details = getDetailsRecord(message);
+            return typeof details.approval_decision === 'string' && Boolean(getMessageText(message));
+        });
         const commandTextMessage = sortedMessages.findLast((message) => getMessageText(message).startsWith('$ '));
         const latestStatusMessage = sortedMessages.findLast((message) => (message.type === AgentMessageType.ERROR || message.type === AgentMessageType.WARNING) &&
             getMessageText(message));
@@ -762,15 +1090,23 @@ function mergeSummaryToolMessages(messages) {
         if (latestStatusMessage && mergedDetails.error === undefined && mergedDetails.stderr === undefined) {
             mergedDetails.error = getMessageText(latestStatusMessage);
         }
+        if (!latestStatusMessage &&
+            sortedMessages.some((message) => message.type === AgentMessageType.PLAN && Array.isArray(message.details?.plan))) {
+            mergedDetails.tool_status = 'completed';
+        }
         if (commandTextMessage && mergedDetails.command === undefined) {
             mergedDetails.command = getMessageText(commandTextMessage);
         }
+        mergedDetails[SUMMARY_TOOL_STARTED_AT_DETAIL_KEY] = sortedMessages[0]?.timestamp;
+        mergedDetails[SUMMARY_TOOL_FINISHED_AT_DETAIL_KEY] = sortedMessages[sortedMessages.length - 1]?.timestamp;
         const messageToHuman = typeof startMessage?.details?.message_to_human === 'string' ? startMessage.details.message_to_human : '';
         return {
             index,
             message: {
                 ...baseMessage,
-                message: messageToHuman || (firstTextMessage ? firstTextMessage.message : baseMessage.message),
+                message: latestApprovalDecisionMessage?.message ||
+                    messageToHuman ||
+                    (firstTextMessage ? firstTextMessage.message : baseMessage.message),
                 details: mergedDetails,
             },
         };
@@ -815,6 +1151,31 @@ function ToolDetailIcon({ kind, status }) {
             return _jsx(Wrench, { className: "size-3.5" });
     }
 }
+function getToolDetailMetadata(item) {
+    const entries = [];
+    const startedMs = parseTimestampMs(item.startedAt);
+    const finishedMs = parseTimestampMs(item.finishedAt);
+    const startedAt = formatToolDetailTimestamp(item.startedAt);
+    const finishedAt = formatToolDetailTimestamp(item.finishedAt);
+    if (item.toolName) {
+        entries.push({ label: 'Tool', value: item.toolName });
+    }
+    if (startedAt && finishedAt && startedMs !== undefined && finishedMs !== undefined && startedMs !== finishedMs) {
+        entries.push({ label: 'Started', value: startedAt });
+        entries.push({ label: 'Ended', value: finishedAt });
+        entries.push({ label: 'Duration', value: formatDuration(getDurationSeconds(item.startedAt, item.finishedAt)) });
+    }
+    else if (startedAt || finishedAt) {
+        entries.push({ label: 'Time', value: startedAt ?? finishedAt ?? '' });
+    }
+    return entries;
+}
+function ToolDetailMetadata({ hasDetailContent, item }) {
+    const entries = getToolDetailMetadata(item);
+    if (entries.length === 0)
+        return null;
+    return (_jsx("dl", { className: cn('flex flex-wrap gap-x-4 gap-y-1 text-xs', hasDetailContent && 'mb-3 border-b border-border/60 pb-2'), children: entries.map((entry) => (_jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [_jsx("dt", { className: "shrink-0 text-muted", children: entry.label }), _jsx("dd", { className: "min-w-0 wrap-break-word font-medium text-foreground/80", children: entry.value })] }, entry.label))) }));
+}
 function ToolDetailSection({ section }) {
     const value = section.value;
     const isPrimitive = typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
@@ -841,6 +1202,9 @@ function formatToolPrimaryText(item) {
 }
 function formatToolDetailCopyText(item) {
     const parts = [getToolPanelTitle(item), formatToolPrimaryText(item)];
+    const metadata = getToolDetailMetadata(item).map((entry) => `${entry.label}: ${entry.value}`);
+    if (metadata.length > 0)
+        parts.push(metadata.join('\n'));
     if (item.text)
         parts.push(item.text);
     for (const section of item.sections) {
@@ -880,9 +1244,10 @@ async function copyTextToClipboard(text) {
     }
 }
 function SummaryToolDetailPanel({ item }) {
-    const copyText = formatToolDetailCopyText(item);
     const commandText = item.kind === 'command' && item.command ? formatToolPrimaryText(item) : undefined;
     const fallbackText = !commandText && item.sections.length === 0 ? item.text : undefined;
+    const hasDetailContent = Boolean(commandText || fallbackText || item.sections.length);
+    const copyText = formatToolDetailCopyText(item);
     const [copyState, setCopyState] = useState('idle');
     const copyResetRef = useRef(undefined);
     useEffect(() => {
@@ -899,34 +1264,56 @@ function SummaryToolDetailPanel({ item }) {
             copyResetRef.current = window.setTimeout(() => setCopyState('idle'), 2000);
         });
     };
-    return (_jsxs("div", { className: "relative mt-2 rounded-lg border border-border/70 bg-mixer-muted/10 p-3 shadow-sm", children: [_jsx("div", { className: "absolute end-2 top-2", children: _jsx("button", { type: "button", className: cn('inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted opacity-70 transition', 'hover:bg-mixer-muted/20 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', copyState === 'copied' && 'text-success opacity-100', copyState === 'failed' && 'text-destructive opacity-100'), onClick: copyDetails, "aria-label": "Copy tool details", title: "Copy tool details", children: copyState === 'copied' ? _jsx(CheckCircle, { className: "size-4" }) : _jsx(CopyIcon, { className: "size-4" }) }) }), _jsxs("div", { className: "pe-7", children: [commandText ? (_jsx("pre", { className: "mb-3 whitespace-pre-wrap break-words font-mono text-sm leading-6 text-foreground/85", children: commandText })) : null, fallbackText ? (_jsx("div", { className: "mb-3 break-words text-sm leading-6 text-foreground/75", children: fallbackText })) : null, item.sections.length > 0 ? (_jsx("div", { className: "space-y-3", children: item.sections.map((section) => (_jsx(ToolDetailSection, { section: section }, section.key))) })) : null] }), copyState === 'failed' ? _jsx("div", { className: "mt-3 text-xs text-destructive", children: "Copy failed" }) : null] }));
+    return (_jsxs("div", { className: "relative mt-2 rounded-lg border border-border/70 bg-mixer-muted/10 p-3 shadow-sm", children: [hasDetailContent ? (_jsx("div", { className: "absolute end-2 top-2", children: _jsx("button", { type: "button", className: cn('inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted opacity-70 transition', 'hover:bg-mixer-muted/20 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', copyState === 'copied' && 'text-success opacity-100', copyState === 'failed' && 'text-destructive opacity-100'), onClick: copyDetails, "aria-label": "Copy tool details", title: "Copy tool details", children: copyState === 'copied' ? _jsx(CheckCircle, { className: "size-4" }) : _jsx(CopyIcon, { className: "size-4" }) }) })) : null, _jsxs("div", { className: cn(hasDetailContent && 'pe-7'), children: [_jsx(ToolDetailMetadata, { item: item, hasDetailContent: hasDetailContent }), commandText ? (_jsx("pre", { className: "mb-3 whitespace-pre-wrap break-words font-mono text-sm leading-6 text-foreground/85", children: commandText })) : null, fallbackText ? (_jsx("div", { className: "mb-3 break-words text-sm leading-6 text-foreground/75", children: fallbackText })) : null, item.sections.length > 0 ? (_jsx("div", { className: "space-y-3", children: item.sections.map((section) => (_jsx(ToolDetailSection, { section: section }, section.key))) })) : null] }), copyState === 'failed' && hasDetailContent ? (_jsx("div", { className: "mt-3 text-xs text-destructive", children: "Copy failed" })) : null] }));
 }
 function SummaryToolTimelineItem({ item }) {
-    const isAttention = item.status === 'error' || item.status === 'warning';
-    const hasDetails = Boolean(item.command || item.text || item.sections.length);
+    const isDecision = Boolean(item.decisionText);
+    const isAttention = !isDecision && (item.status === 'error' || item.status === 'warning');
+    const hasMetadata = getToolDetailMetadata(item).length > 0;
+    const hasDetails = Boolean(item.command || item.text || item.sections.length || hasMetadata);
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("button", { type: "button", className: cn('grid w-full grid-cols-[1.5rem_1fr_auto] gap-2 text-start outline-none transition-colors', 'focus-visible:text-foreground focus-visible:underline focus-visible:underline-offset-4', hasDetails ? 'cursor-pointer hover:text-foreground' : 'cursor-default'), onClick: () => hasDetails && setIsExpanded((current) => !current), "aria-expanded": hasDetails ? isExpanded : undefined, disabled: !hasDetails, children: [_jsx("span", { className: cn('flex size-5 items-center justify-center pt-0.5', isAttention ? 'text-attention' : 'text-muted'), children: _jsx(ToolDetailIcon, { kind: item.kind, status: item.status }) }), _jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5", children: [_jsx("span", { className: "text-sm font-medium text-muted", children: item.label }), _jsx("span", { className: "min-w-0 break-words text-sm text-muted", children: item.title })] }), hasDetails ? (_jsx(ChevronDown, { className: cn('mt-0.5 size-4 shrink-0 text-muted opacity-50 transition-transform', !isExpanded && '-rotate-90'), "aria-hidden": "true" })) : null] }), hasDetails && isExpanded ? (_jsx("div", { className: "mt-1", children: _jsx(SummaryToolDetailPanel, { item: item }) })) : null] }));
+    const iconStatus = isDecision ? undefined : item.status;
+    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("button", { type: "button", className: cn('grid w-full grid-cols-[1.5rem_1fr_auto] gap-2 text-start outline-none transition-colors', 'focus-visible:text-foreground focus-visible:underline focus-visible:underline-offset-4', hasDetails ? 'cursor-pointer hover:text-foreground' : 'cursor-default'), onClick: () => hasDetails && setIsExpanded((current) => !current), "aria-expanded": hasDetails ? isExpanded : undefined, disabled: !hasDetails, children: [_jsx("span", { className: cn('flex size-5 items-center justify-center pt-0.5', isAttention ? 'text-attention' : 'text-muted'), children: _jsx(ToolDetailIcon, { kind: item.kind, status: iconStatus }) }), _jsxs("span", { className: "min-w-0 text-sm text-muted", children: [_jsx("span", { className: "break-words", children: item.title }), item.decisionText ? (_jsx(Badge, { variant: "destructive", className: "ms-2 rounded-full shadow-sm shadow-destructive/10", children: item.decisionText })) : null] }), hasDetails ? (_jsx(ChevronDown, { className: cn('mt-0.5 size-4 shrink-0 text-muted opacity-50 transition-transform', !isExpanded && '-rotate-90'), "aria-hidden": "true" })) : null] }), hasDetails && isExpanded ? (_jsx("div", { className: "mt-1", children: _jsx(SummaryToolDetailPanel, { item: item }) })) : null] }));
 }
-function SummaryThoughtTimelineItem({ item, artifactRunId }) {
+function SummaryThoughtProseItem({ item, artifactRunId, disableCollapse, }) {
+    const { t } = useUITranslation();
     const text = item.text ?? item.title;
-    return (_jsx("div", { className: "min-w-0 py-1 text-sm leading-6 text-foreground/85", children: _jsx("div", { className: SUMMARY_PROSE_CLASS, style: { overflowWrap: 'anywhere' }, children: _jsx(MarkdownRenderer, { artifactRunId: artifactRunId, components: DEFAULT_AGENT_MARKDOWN_COMPONENTS, children: text }) }) }));
-}
-function SummaryToolTimeline({ items, artifactRunId }) {
-    return (_jsx("div", { className: "mt-3", children: _jsx("div", { className: "space-y-3", children: items.map((item) => item.kind === 'think' ? (_jsx(SummaryThoughtTimelineItem, { item: item, artifactRunId: artifactRunId }, item.key)) : (_jsx(SummaryToolTimelineItem, { item: item }, item.key))) }) }));
+    const normalizedText = text.trim();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const explicitLineCount = normalizedText ? normalizedText.split(/\r?\n/).length : 0;
+    const isLong = normalizedText.length > SUMMARY_THOUGHT_COLLAPSE_THRESHOLD ||
+        explicitLineCount > SUMMARY_THOUGHT_COLLAPSE_LINES;
+    const toggleLabel = isExpanded ? t('agent.showLess') : t('agent.showMore');
+    return (_jsxs("div", { className: "min-w-0 py-1", children: [_jsx("div", { "data-testid": "summary-thought-prose", className: cn(SUMMARY_PROSE_CLASS, isLong &&
+                    !disableCollapse &&
+                    !isExpanded &&
+                    '[display:-webkit-box] overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:6]'), style: { overflowWrap: 'anywhere' }, children: _jsx(MarkdownRenderer, { artifactRunId: artifactRunId, components: DEFAULT_AGENT_MARKDOWN_COMPONENTS, children: text }) }), isLong && !disableCollapse ? (_jsx("div", { className: "mt-1.5 flex justify-end", children: _jsxs("button", { type: "button", "aria-expanded": isExpanded, className: cn('inline-flex items-center gap-1 text-sm font-medium text-muted transition-colors', '[text-decoration:none] hover:text-foreground hover:[text-decoration:none]', 'focus-visible:text-foreground focus-visible:[text-decoration:none]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), onClick: () => setIsExpanded((current) => !current), children: [toggleLabel, _jsx(ChevronDown, { className: cn('size-4 transition-transform', isExpanded && 'rotate-180'), "aria-hidden": "true" })] }) })) : null] }));
+}
+function SummaryToolTimeline({ items, artifactRunId, disablePreambleCollapse, }) {
+    return (_jsx("div", { className: "mt-3", children: _jsx("div", { className: "space-y-3", children: items.map((item) => item.isPreamble || item.kind === 'think' ? (_jsx(SummaryThoughtProseItem, { item: item, artifactRunId: artifactRunId, disableCollapse: disablePreambleCollapse }, item.key)) : (_jsx(SummaryToolTimelineItem, { item: item }, item.key))) }) }));
 }
 function SummaryStreamingMessage({ text, artifactRunId, workstreamId, }) {
     return (_jsx("div", { className: "mx-auto w-full max-w-3xl px-1", "data-workstream-id": workstreamId, children: _jsx("div", { className: SUMMARY_PROSE_CLASS, style: { overflowWrap: 'anywhere' }, children: _jsx(MarkdownRenderer, { artifactRunId: artifactRunId, components: DEFAULT_AGENT_MARKDOWN_COMPONENTS, children: text }) }) }));
 }
-function SummaryActivityRow({ label, status, timestamp, durationSeconds, showElapsed, details, emptyDetailsLabel, defaultExpanded = false, className, artifactRunId, }) {
+function SummaryStoppedMessage({ message, startTimestamp, endTimestamp, className, }) {
+    const { t } = useUITranslation();
+    const duration = formatDuration(getDurationSeconds(startTimestamp ?? message.timestamp, endTimestamp ?? message.timestamp));
+    return (_jsxs("div", { className: cn('mx-auto w-full max-w-3xl px-1', className), "data-testid": "summary-stopped-message", children: [_jsxs("div", { className: "flex items-center justify-end gap-2 text-lg font-medium text-muted sm:text-xl", children: [_jsx("span", { children: t('agent.youStoppedAfter', { duration }) }), _jsx(MessageDeliveryStatus, { message: message, className: "h-5 w-5" })] }), _jsx("div", { className: "mt-5 border-b border-border/70" })] }));
+}
+function SummaryActivityRow({ label, timestamp, durationSeconds, showElapsed, details, emptyDetailsLabel, defaultExpanded = false, disablePreambleCollapse = false, className, artifactRunId, onSendMessage, answeredToolApprovalRequestInputKeys, resolvedToolApprovalKeys, }) {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const isLiveElapsed = showElapsed && durationSeconds === undefined;
     const liveElapsed = useLiveElapsedSeconds(timestamp, isLiveElapsed);
     const elapsed = durationSeconds ?? liveElapsed;
     const shouldShowElapsed = showElapsed && timestamp !== undefined;
-    const isAttention = status === 'error' || status === 'warning';
     const detailItems = useMemo(() => buildSummaryToolDetailItems(details ?? []), [details]);
-    const canExpand = detailItems.length > 0 || Boolean(emptyDetailsLabel);
-    return (_jsx("div", { className: cn('mx-auto w-full max-w-3xl px-1', className), children: _jsxs("div", { className: cn('border-b border-border/70 pb-3 text-sm', isAttention ? 'text-attention' : 'text-muted'), children: [_jsxs("button", { type: "button", className: cn('inline-flex max-w-full items-center gap-2 text-start outline-none', 'focus-visible:text-foreground focus-visible:underline focus-visible:underline-offset-4', canExpand ? 'cursor-pointer hover:text-foreground' : 'cursor-default'), onClick: () => canExpand && setIsExpanded((current) => !current), "aria-expanded": canExpand ? isExpanded : undefined, disabled: !canExpand, children: [_jsx("span", { className: "min-w-0 truncate font-medium", children: label }), shouldShowElapsed ? (_jsxs("span", { className: "shrink-0 text-muted/75", children: ["for ", formatDuration(elapsed)] })) : null, canExpand ? (isExpanded ? (_jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })) : (_jsx(ChevronRight, { className: "size-4 shrink-0 opacity-50" }))) : null] }), canExpand && isExpanded ? (detailItems.length > 0 ? (_jsx(SummaryToolTimeline, { items: detailItems, artifactRunId: artifactRunId })) : (_jsxs("div", { className: "mt-3 flex items-center gap-2 text-sm text-muted", children: [_jsx(Terminal, { className: "size-4 opacity-70", "aria-hidden": "true" }), _jsx("span", { children: emptyDetailsLabel })] }))) : null] }) }));
+    const requestInputMessages = useMemo(() => (details ?? []).filter((message) => hasRequestInputUx(message) &&
+        !isToolApprovalRequestInputHidden(message, answeredToolApprovalRequestInputKeys ?? new Set(), resolvedToolApprovalKeys ?? new Set())), [answeredToolApprovalRequestInputKeys, details, resolvedToolApprovalKeys]);
+    const canExpand = detailItems.length > 0 || requestInputMessages.length > 0 || Boolean(emptyDetailsLabel);
+    return (_jsx("div", { className: cn('mx-auto w-full max-w-3xl px-1', className), children: _jsxs("div", { className: "border-b border-border/70 pb-3 text-sm text-muted", children: [_jsxs("button", { type: "button", className: cn('inline-flex max-w-full items-center gap-2 text-start outline-none', 'focus-visible:text-foreground focus-visible:underline focus-visible:underline-offset-4', canExpand ? 'cursor-pointer hover:text-foreground' : 'cursor-default'), onClick: () => canExpand && setIsExpanded((current) => !current), "aria-expanded": canExpand ? isExpanded : undefined, disabled: !canExpand, children: [_jsx("span", { className: "min-w-0 truncate font-medium", children: label }), shouldShowElapsed ? (_jsxs("span", { className: "shrink-0 text-muted/75", children: ["for ", formatDuration(elapsed)] })) : null, canExpand ? (isExpanded ? (_jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })) : (_jsx(ChevronRight, { className: "size-4 shrink-0 opacity-50" }))) : null] }), canExpand && isExpanded ? (detailItems.length > 0 || requestInputMessages.length > 0 ? (_jsxs(_Fragment, { children: [detailItems.length > 0 ? (_jsx(SummaryToolTimeline, { items: detailItems, artifactRunId: artifactRunId, disablePreambleCollapse: disablePreambleCollapse })) : null, requestInputMessages.length > 0 ? (_jsx("div", { className: "mt-3 space-y-3", children: requestInputMessages.map((message) => {
+                                const uxConfig = message.details.ux;
+                                return (_jsx(AskUserWidget, { question: getRequestInputDisplayText(message), options: uxConfig.options, variant: uxConfig.variant, multiSelect: uxConfig.multiSelect, onSelect: (optionId) => onSendMessage?.(optionId), 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), hideBorder: true, compact: true, className: "my-0", cardClassName: "bg-background/60 shadow-none" }, getAgentMessageRenderKey(message, 'work-request-input')));
+                            }) })) : null] })) : (_jsxs("div", { className: "mt-3 flex items-center gap-2 text-sm text-muted", children: [_jsx(Terminal, { className: "size-4 opacity-70", "aria-hidden": "true" }), _jsx("span", { children: emptyDetailsLabel })] }))) : null] }) }));
 }
 function TimelineEntry({ children, status }) {
     const dotClass = status === 'error'
@@ -966,13 +1353,20 @@ class MessageErrorBoundary extends Component {
 }
 // PERFORMANCE: Throttle interval for auto-scroll (ms)
 const SCROLL_THROTTLE_MS = 100; // Max 10 scrolls per second
-function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked', isCompleted = false, streamingMessages = new Map(), onSendMessage, messageItemClassNames, messageStyleOverrides, toolCallGroupClassNames, hideToolCallsInViewMode, streamingMessageClassNames, batchProgressPanelClassNames, artifactRunId, hideWorkstreamTabs, workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, initialRequestData, initialRequestSchema, initialRequestTitle, initialRequestTemplate, hiddenMessageTypes, disableAutoScroll = false, renderRequestInputControls = true, }) {
+function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked', isCompleted = false, streamingMessages = new Map(), onSendMessage, messageItemClassNames, messageStyleOverrides, toolCallGroupClassNames, hideToolCallsInViewMode, streamingMessageClassNames, batchProgressPanelClassNames, artifactRunId, hideWorkstreamTabs, workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, initialRequestData, initialRequestSchema, initialRequestTitle, initialRequestTemplate, showInitialRequest, hiddenMessageTypes, disableAutoScroll = false, renderRequestInputControls = true, activeWorkstream: controlledActiveWorkstream, onActiveWorkstreamChange, }) {
     if (!artifactRunId) {
         console.warn('[AllMessagesMixed] artifactRunId prop is missing!');
     }
     const { t } = useUITranslation();
     const containerRef = useRef(null);
-    const [activeWorkstream, setActiveWorkstream] = useState('all');
+    const [internalActiveWorkstream, setInternalActiveWorkstream] = useState('all');
+    const activeWorkstream = controlledActiveWorkstream ?? internalActiveWorkstream;
+    const setActiveWorkstream = useCallback((workstreamId) => {
+        if (controlledActiveWorkstream === undefined) {
+            setInternalActiveWorkstream(workstreamId);
+        }
+        onActiveWorkstreamChange?.(workstreamId);
+    }, [controlledActiveWorkstream, onActiveWorkstreamChange]);
     // PERFORMANCE: Throttle auto-scroll to prevent layout thrashing
     // During streaming, scrollIntoView was being called 30+ times/sec
     const lastScrollTimeRef = useRef(0);
@@ -1058,9 +1452,7 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
     // 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 = hiddenMessageTypes?.length
-            ? messages.filter((m) => !hiddenMessageTypes.includes(m.type))
-            : messages;
+        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();
@@ -1079,14 +1471,49 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
         }
         return deduped;
     }, [messages, hiddenMessageTypes]);
-    // Get workstreams from messages - only from message.workstream_id
     const workstreams = React.useMemo(() => {
-        // Just get the basic workstreams from the messages
         const extractedWorkstreams = extractWorkstreams(sortedMessages);
-        // We'll keep taskLabels - they might be used for display purposes elsewhere
-        // but we won't use them to create new workstream tabs
+        sortedMessages.forEach((message) => {
+            const details = getWorkstreamLaunchDetails(message) ?? getWorkstreamActivityDetails(message);
+            if (!details)
+                return;
+            extractedWorkstreams.set(details.workstreamId, getWorkstreamDisplayName(details.workstreamId, details.interaction));
+        });
         return extractedWorkstreams;
     }, [sortedMessages]);
+    const activeWorkstreamName = React.useMemo(() => {
+        if (activeWorkstream === 'all')
+            return undefined;
+        return workstreams.get(activeWorkstream) ?? formatWorkstreamName(activeWorkstream);
+    }, [activeWorkstream, workstreams]);
+    const scrollToTop = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        programmaticScrollRef.current = true;
+        if (typeof container.scrollTo === 'function') {
+            container.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        else {
+            container.scrollTop = 0;
+        }
+        requestAnimationFrame(() => {
+            programmaticScrollRef.current = false;
+        });
+    }, []);
+    const handleSelectWorkstream = useCallback((workstreamId) => {
+        setActiveWorkstream(workstreamId);
+        requestAnimationFrame(scrollToTop);
+    }, [scrollToTop, setActiveWorkstream]);
+    const handleShowMainAgentChat = useCallback(() => {
+        setActiveWorkstream('all');
+        requestAnimationFrame(scrollToTop);
+    }, [scrollToTop, setActiveWorkstream]);
+    useEffect(() => {
+        if (activeWorkstream !== 'all' && !workstreams.has(activeWorkstream)) {
+            setActiveWorkstream('all');
+        }
+    }, [activeWorkstream, workstreams, setActiveWorkstream]);
     // Count messages per workstream
     const workstreamCounts = React.useMemo(() => {
         const counts = new Map();
@@ -1105,12 +1532,12 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
     }, [sortedMessages]);
     // Filter messages based on active workstream
     const displayMessages = React.useMemo(() => {
-        if (activeWorkstream === 'all') {
-            return sortedMessages;
-        }
-        return filterMessagesByWorkstream(sortedMessages, activeWorkstream);
+        return attachWriteArtifactCompletionMessages(filterMessagesForActiveWorkstream(sortedMessages, activeWorkstream));
     }, [sortedMessages, activeWorkstream]);
     const answeredRequestInputKeys = React.useMemo(() => getAnsweredRequestInputKeys(displayMessages), [displayMessages]);
+    const resolvedToolApprovalKeys = React.useMemo(() => getResolvedToolApprovalKeys(displayMessages), [displayMessages]);
+    const answeredToolApprovalRequestInputKeys = React.useMemo(() => getAnsweredToolApprovalRequestInputKeys(displayMessages), [displayMessages]);
+    const hiddenToolApprovalAnswerKeys = React.useMemo(() => getHiddenToolApprovalAnswerKeys(displayMessages), [displayMessages]);
     const externallyRenderedRequestInputKey = React.useMemo(() => {
         if (renderRequestInputControls)
             return undefined;
@@ -1118,13 +1545,18 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
         return pendingRequestInput ? getRequestInputMessageKey(pendingRequestInput) : undefined;
     }, [displayMessages, renderRequestInputControls]);
     const shouldHideRequestInputMessage = React.useCallback((message) => message.type === AgentMessageType.REQUEST_INPUT &&
-        externallyRenderedRequestInputKey === getRequestInputMessageKey(message), [externallyRenderedRequestInputKey]);
+        (externallyRenderedRequestInputKey === getRequestInputMessageKey(message) ||
+            isToolApprovalRequestInputHidden(message, answeredToolApprovalRequestInputKeys, resolvedToolApprovalKeys)), [answeredToolApprovalRequestInputKeys, externallyRenderedRequestInputKey, resolvedToolApprovalKeys]);
+    const shouldHideToolApprovalAnswerMessage = React.useCallback((message) => isToolApprovalAnswerHidden(message, hiddenToolApprovalAnswerKeys), [hiddenToolApprovalAnswerKeys]);
+    const completionDisplayMessages = React.useMemo(() => displayMessages.filter((message) => !shouldHideToolApprovalAnswerMessage(message)), [displayMessages, shouldHideToolApprovalAnswerMessage]);
     const fallbackWorkingStartedAtRef = useRef(Date.now());
     const hasInitialRequest = Boolean(prependFriendlyMessage?.trim()) ||
         hasInitialRequestValue(initialRequestData) ||
         initialRequestTemplate !== undefined;
+    const canRenderInitialRequest = showInitialRequest ?? true;
+    const hasRenderableInitialRequest = hasInitialRequest && canRenderInitialRequest;
     const hasPersistedUserQuestion = useMemo(() => displayMessages.some((message) => message.type === AgentMessageType.QUESTION), [displayMessages]);
-    const shouldRenderInitialRequest = hasInitialRequest && !hasPersistedUserQuestion;
+    const shouldRenderInitialRequest = activeWorkstream === 'all' && hasRenderableInitialRequest && !hasPersistedUserQuestion;
     const latestDisplayMessageTimestamp = useMemo(() => {
         return displayMessages.reduce((latest, msg) => Math.max(latest, getTimestampMs(msg.timestamp)), -Infinity);
     }, [displayMessages]);
@@ -1135,11 +1567,18 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
             return Math.max(latest, getTimestampMs(msg.timestamp));
         }, -Infinity);
     }, [displayMessages]);
+    const hasPendingToolApprovalRequest = useMemo(() => displayMessages.some((message) => isToolApprovalRequestInput(message) &&
+        !isToolApprovalRequestInputHidden(message, answeredToolApprovalRequestInputKeys, resolvedToolApprovalKeys)), [answeredToolApprovalRequestInputKeys, displayMessages, resolvedToolApprovalKeys]);
+    const hasLatestToolApprovalAllow = useMemo(() => hasLatestToolApprovalAllowTurn(displayMessages, hiddenToolApprovalAnswerKeys), [displayMessages, hiddenToolApprovalAnswerKeys]);
     const isDisplayCompleted = useMemo(() => {
-        if (hasOpenUserTurn(displayMessages))
+        if (hasPendingToolApprovalRequest)
+            return false;
+        if (hasLatestToolApprovalAllow)
             return false;
-        return isCompleted || !isInProgress(displayMessages);
-    }, [displayMessages, isCompleted]);
+        if (hasOpenUserTurn(completionDisplayMessages))
+            return false;
+        return isCompleted || !isInProgress(completionDisplayMessages);
+    }, [completionDisplayMessages, hasLatestToolApprovalAllow, hasPendingToolApprovalRequest, isCompleted]);
     // Split streaming messages:
     // - complete (or stale incomplete) ones are interleaved chronologically
     // - actively incomplete ones render at the end
@@ -1171,7 +1610,8 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
         });
         return { completeStreaming: complete, incompleteStreaming: incomplete };
     }, [streamingMessages, activeWorkstream, latestNonTransientDisplayMessageTimestamp]);
-    const summaryDisplayMessages = React.useMemo(() => buildSummaryDisplayMessages(displayMessages, completeStreaming), [displayMessages, completeStreaming]);
+    const summaryDisplayMessages = React.useMemo(() => buildSyntheticToolApprovalDecisionMessages(buildSummaryDisplayMessages(displayMessages, completeStreaming), resolvedToolApprovalKeys), [displayMessages, completeStreaming, resolvedToolApprovalKeys]);
+    const visibleSummaryDisplayMessages = React.useMemo(() => summaryDisplayMessages.filter((message) => !shouldHideRequestInputMessage(message) && !shouldHideToolApprovalAnswerMessage(message)), [summaryDisplayMessages, shouldHideRequestInputMessage, shouldHideToolApprovalAnswerMessage]);
     const latestSummaryObservedTimestamp = useMemo(() => {
         const hasVisibleLiveStream = incompleteStreaming.some(({ data }) => data.text.trim().length > 0);
         if (hasVisibleLiveStream)
@@ -1179,7 +1619,7 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
         const latestStreamingTimestamp = incompleteStreaming.reduce((latest, { data }) => Math.max(latest, data.startTimestamp), -Infinity);
         return Math.max(latestDisplayMessageTimestamp, latestStreamingTimestamp);
     }, [incompleteStreaming, latestDisplayMessageTimestamp]);
-    const summaryConversationItems = React.useMemo(() => buildSummaryConversationItems(summaryDisplayMessages, isDisplayCompleted, latestSummaryObservedTimestamp), [summaryDisplayMessages, isDisplayCompleted, latestSummaryObservedTimestamp]);
+    const summaryConversationItems = React.useMemo(() => buildSummaryConversationItems(visibleSummaryDisplayMessages, isDisplayCompleted, latestSummaryObservedTimestamp), [visibleSummaryDisplayMessages, isDisplayCompleted, latestSummaryObservedTimestamp]);
     // Group messages with ONLY complete streaming interleaved for stacked view.
     // Incomplete streaming is rendered separately at the end (avoids re-grouping on every chunk).
     // Assistant prose stays as its own timeline item so thoughts remain visible between tool calls.
@@ -1187,14 +1627,21 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
     // Show an activity indicator when the latest visible conversation state is not terminal.
     // Older idle/complete messages from previous turns must not suppress the new turn.
     const isAgentWorking = useMemo(() => {
-        return !isDisplayCompleted;
-    }, [isDisplayCompleted]);
+        // Also treat an open user turn (the latest message is the user's, awaiting the agent's
+        // first output) as "working" — otherwise nothing animates in the gap between sending a
+        // message and the first streamed token, especially after a stop where the run reads as
+        // completed until the agent posts its next message.
+        return !isDisplayCompleted || hasOpenUserTurn(completionDisplayMessages);
+    }, [completionDisplayMessages, isDisplayCompleted]);
     const showActivityFallback = shouldShowSummaryActivityFallback(summaryConversationItems, isAgentWorking, incompleteStreaming.length > 0);
     const summaryActivityFallbackLabel = isInitialSummaryActivityFallback(summaryConversationItems)
         ? t('agent.preparing')
         : t('agent.working');
-    const showInitialRequestWaitingCard = displayMessages.length === 0 && hasInitialRequest && isAgentWorking && incompleteStreaming.length === 0;
-    const activityAnchorCandidate = useMemo(() => getSummaryActivityAnchorTimestamp(summaryConversationItems, summaryDisplayMessages, fallbackWorkingStartedAtRef.current), [summaryConversationItems, summaryDisplayMessages]);
+    const showInitialRequestWaitingCard = displayMessages.length === 0 &&
+        hasRenderableInitialRequest &&
+        isAgentWorking &&
+        incompleteStreaming.length === 0;
+    const activityAnchorCandidate = useMemo(() => getSummaryActivityAnchorTimestamp(summaryConversationItems, visibleSummaryDisplayMessages, fallbackWorkingStartedAtRef.current), [summaryConversationItems, visibleSummaryDisplayMessages]);
     const activityStartedTimestampRef = useRef(activityAnchorCandidate);
     const wasActivityFallbackVisibleRef = useRef(false);
     const activityStartedTimestamp = useMemo(() => {
@@ -1504,9 +1951,11 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
                 .agent-markdown tbody tr:hover {
                     background: transparent;
                 }
-            ` }), viewMode === 'stacked' && (_jsx("div", { className: cn('sticky top-0 z-10', hideWorkstreamTabs && 'hidden'), children: _jsx(WorkstreamTabs, { workstreams: workstreams, activeWorkstream: activeWorkstream, onSelectWorkstream: setActiveWorkstream, count: workstreamCounts, completionStatus: workstreamCompletionStatus }) })), displayMessages.length === 0 && !hasInitialRequest && !(isSummaryView && showActivityFallback) ? (activeWorkstream === 'all' && isAgentWorking && incompleteStreaming.length === 0 ? (_jsx("div", { className: "flex-1 px-2 py-6 sm:px-4", children: _jsx(InitialRequestWaitingCard, { label: t('agent.preparing'), timestamp: fallbackWorkingStartedAtRef.current, className: workingIndicatorClassName }) })) : (_jsx("div", { className: "flex items-center justify-center h-full text-center py-8", children: _jsx("div", { className: "flex items-center px-3 py-2 text-sm text-muted", children: activeWorkstream === 'all'
+            ` }), viewMode === 'stacked' && (_jsx("div", { className: cn('sticky top-0 z-10', hideWorkstreamTabs && 'hidden'), children: _jsx(WorkstreamTabs, { workstreams: workstreams, activeWorkstream: activeWorkstream, onSelectWorkstream: handleSelectWorkstream, count: workstreamCounts, completionStatus: workstreamCompletionStatus }) })), displayMessages.length === 0 &&
+                !hasRenderableInitialRequest &&
+                !(isSummaryView && showActivityFallback) ? (activeWorkstream === 'all' && isAgentWorking && incompleteStreaming.length === 0 ? (_jsx("div", { className: "flex-1 px-2 py-6 sm:px-4", children: _jsx(InitialRequestWaitingCard, { label: t('agent.preparing'), timestamp: fallbackWorkingStartedAtRef.current, className: workingIndicatorClassName }) })) : (_jsx("div", { className: "flex items-center justify-center h-full text-center py-8", children: _jsx("div", { className: "flex items-center px-3 py-2 text-sm text-muted", children: activeWorkstream === 'all'
                         ? t('agent.waitingForAgentResponse')
-                        : t('agent.noMessagesInWorkstream') }) }))) : (_jsxs("div", { className: cn('flex-1 flex flex-col justify-start w-full max-w-full', isSummaryView ? 'gap-6 px-2 py-6 sm:px-4' : 'gap-3 pb-4', messageListClassName), children: [shouldRenderInitialRequest && (_jsx(InitialRequestMessage, { data: initialRequestData, schema: initialRequestSchema, title: initialRequestTitle, template: initialRequestTemplate, prependFriendlyMessage: prependFriendlyMessage, timestamp: displayMessages[0]?.timestamp ?? Date.now(), isSummaryView: isSummaryView, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent }, "initial-request")), showInitialRequestWaitingCard && (_jsx(InitialRequestWaitingCard, { label: summaryActivityFallbackLabel, timestamp: activityStartedTimestamp, className: workingIndicatorClassName })), viewMode === 'stacked' ? (_jsxs(_Fragment, { children: [groupedMessages.map((group, groupIndex) => {
+                        : t('agent.noMessagesInWorkstream') }) }))) : (_jsxs("div", { className: cn('flex-1 flex flex-col justify-start w-full max-w-full', isSummaryView ? 'gap-6 px-2 py-6 sm:px-4' : 'gap-3 pb-4', messageListClassName), children: [isSummaryView && activeWorkstream !== 'all' && activeWorkstreamName && (_jsx("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", children: _jsxs("div", { className: "mx-auto flex w-full max-w-3xl items-center gap-2 border-b border-border/70 pb-3", children: [_jsx(VTooltip, { description: t('agent.backToMainAgent'), asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 text-muted hover:text-foreground", "aria-label": t('agent.backToMainAgent'), onClick: handleShowMainAgentChat, children: _jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx("div", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: activeWorkstreamName })] }) })), shouldRenderInitialRequest && (_jsx(InitialRequestMessage, { data: initialRequestData, schema: initialRequestSchema, title: initialRequestTitle, template: initialRequestTemplate, prependFriendlyMessage: prependFriendlyMessage, timestamp: displayMessages[0]?.timestamp ?? Date.now(), isSummaryView: isSummaryView, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent }, "initial-request")), showInitialRequestWaitingCard && (_jsx(InitialRequestWaitingCard, { label: summaryActivityFallbackLabel, timestamp: activityStartedTimestamp, className: workingIndicatorClassName })), viewMode === 'stacked' ? (_jsxs(_Fragment, { children: [groupedMessages.map((group, groupIndex) => {
                                 const isLastGroup = groupIndex === groupedMessages.length - 1;
                                 if (group.type === 'tool_group') {
                                     // Render grouped tool calls
@@ -1531,6 +1980,11 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
                                     const message = group.message;
                                     if (shouldHideRequestInputMessage(message))
                                         return null;
+                                    if (shouldHideToolApprovalAnswerMessage(message))
+                                        return null;
+                                    if (isUserStoppedMessage(message)) {
+                                        return (_jsx(TimelineEntry, { children: _jsx(SummaryStoppedMessage, { message: message, startTimestamp: getPreviousRenderableGroupTimestamp(groupedMessages, groupIndex) ?? message.timestamp, endTimestamp: message.timestamp }) }, getAgentMessageRenderKey(message, 'stopped')));
+                                    }
                                     const isLatestMessage = !isCompleted && isLastGroup && !DONE_STATES.includes(message.type);
                                     // Special handling for batch progress messages
                                     if (isBatchProgressMessage(message)) {
@@ -1543,17 +1997,22 @@ function AllMessagesMixedComponent({ messages, bottomRef, viewMode = 'stacked',
                                     if (hideToolCallsInViewMode?.includes(viewMode))
                                         return null;
                                     const isThinkingOnlyWork = isTransientThinkingWork(item.messages);
-                                    return (_jsx(SummaryActivityRow, { label: getSummaryActivityLabel(item.status, item.isActive), status: item.status, timestamp: item.startTimestamp, durationSeconds: item.isActive
+                                    return (_jsx(SummaryActivityRow, { label: getSummaryActivityLabel(item.isActive), status: item.status, timestamp: item.startTimestamp, durationSeconds: item.isActive
                                             ? undefined
-                                            : getDurationSeconds(item.startTimestamp, item.endTimestamp), showElapsed: true, details: isThinkingOnlyWork ? undefined : item.messages, defaultExpanded: item.isActive && !isThinkingOnlyWork, className: workingIndicatorClassName }, `work-${item.id}-${item.isActive ? 'active' : 'done'}-${item.status}`));
+                                            : getDurationSeconds(item.startTimestamp, item.endTimestamp), showElapsed: true, details: isThinkingOnlyWork ? undefined : item.messages, defaultExpanded: item.isActive && !isThinkingOnlyWork, disablePreambleCollapse: item.isActive, className: workingIndicatorClassName, onSendMessage: onSendMessage, answeredToolApprovalRequestInputKeys: answeredToolApprovalRequestInputKeys, resolvedToolApprovalKeys: resolvedToolApprovalKeys }, `work-${item.id}-${item.isActive ? 'active' : 'done'}-${item.status}`));
+                                }
+                                if (item.type === 'stopped') {
+                                    return (_jsx(SummaryStoppedMessage, { message: item.message, startTimestamp: item.startTimestamp, endTimestamp: item.endTimestamp }, getAgentMessageRenderKey(item.message, 'stopped-summary')));
                                 }
                                 const message = item.message;
                                 if (shouldHideRequestInputMessage(message))
                                     return null;
+                                if (shouldHideToolApprovalAnswerMessage(message))
+                                    return null;
                                 if (isBatchProgressMessage(message)) {
                                     return (_jsx(MessageErrorBoundary, { children: _jsx(BatchProgressPanel, { message: message, batchData: message.details, isRunning: !message.details.completed_at, ...batchProgressPanelClassNames }) }, getAgentMessageRenderKey(message, 'batch')));
                                 }
-                                return (_jsx(MessageErrorBoundary, { children: _jsx(SummaryMessage, { message: message, onSendMessage: onSendMessage, requestInputAnswered: isRequestInputAnswered(message, answeredRequestInputKeys), StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent }) }, getAgentMessageRenderKey(message, 'summary')));
+                                return (_jsx(MessageErrorBoundary, { children: _jsx(SummaryMessage, { message: message, onSendMessage: onSendMessage, onSelectWorkstream: handleSelectWorkstream, requestInputAnswered: isRequestInputAnswered(message, answeredRequestInputKeys), StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent }) }, getAgentMessageRenderKey(message, 'summary')));
                             }), incompleteStreaming.map(({ id, data }) => (_jsx(SummaryStreamingMessage, { text: data.text, workstreamId: data.workstreamId, artifactRunId: artifactRunId }, `streaming-incomplete-${id}`))), showActivityFallback && !showInitialRequestWaitingCard && (_jsx(SummaryActivityRow, { label: summaryActivityFallbackLabel, status: "running", timestamp: activityStartedTimestamp, showElapsed: true, className: workingIndicatorClassName }))] })), _jsx("div", { ref: bottomRef, className: "h-2" })] }))] }));
 }
 const shouldDedupeAdjacentCompletedToolMessage = (previous, current) => {