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

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

@@ -0,0 +1,1574 @@
+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 { 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 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 { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
+import BatchProgressPanel from './BatchProgressPanel';
+import MessageItem from './MessageItem';
+import { getAnsweredRequestInputKeys, getPendingRequestInputMessage, getRequestInputMessageKey, isRequestInputAnswered, } 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 WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from './WorkstreamTabs';
+// Check if message is a batch progress message
+const isBatchProgressMessage = (message) => {
+    return message.type === AgentMessageType.BATCH_PROGRESS && !!message.details?.batch_id;
+};
+function getTimestampMs(timestamp) {
+    if (timestamp === undefined || timestamp === null || timestamp === '')
+        return Date.now();
+    const value = typeof timestamp === 'number' ? timestamp : new Date(timestamp).getTime();
+    return Number.isFinite(value) ? value : Date.now();
+}
+function getElapsedSeconds(timestamp) {
+    const elapsed = Date.now() - getTimestampMs(timestamp);
+    return Math.max(0, Math.round(elapsed / 1000));
+}
+function getDurationSeconds(start, end) {
+    const elapsed = getTimestampMs(end) - getTimestampMs(start);
+    return Math.max(0, Math.round(elapsed / 1000));
+}
+function formatDuration(seconds) {
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+}
+function getReadableToolLabel(message) {
+    const details = message.details;
+    const rawTool = details?.tool || '';
+    const relatedTools = Array.isArray(details?.tools)
+        ? details.tools.map((tool) => (typeof tool === 'string' ? tool : tool.name || tool.tool || '')).filter(Boolean)
+        : [];
+    const toolNames = [rawTool, ...relatedTools].join(' ').toLowerCase();
+    const tool = rawTool.toLowerCase();
+    const text = typeof message.message === 'string' ? message.message.trim() : '';
+    if (details?.display_role === 'tool_preamble') {
+        if (toolNames.includes('search') || toolNames.includes('web') || toolNames.includes('fetch')) {
+            return 'Preparing search';
+        }
+        return relatedTools.length > 0 ? 'Preparing tools' : 'Thinking';
+    }
+    if (tool.includes('search'))
+        return 'Searching';
+    if (tool.includes('fetch') || tool.includes('web'))
+        return 'Searching the web';
+    if (tool.includes('read') || tool.includes('document'))
+        return 'Reading';
+    if (tool.includes('edit') || tool.includes('write') || tool.includes('create'))
+        return 'Editing';
+    if (tool.includes('bash') || tool.includes('shell') || tool.includes('command'))
+        return 'Running command';
+    if (text)
+        return text;
+    return 'Using tool';
+}
+function getSummaryWorkLabel(status, isActive) {
+    if (status === 'error')
+        return 'Work needs attention';
+    if (status === 'warning')
+        return 'Work had warnings';
+    return isActive ? 'Working' : 'Worked';
+}
+function isTransientThinkingWork(messages) {
+    return messages.length > 0 && messages.every(isTransientWorkStatusMessage);
+}
+function getSummaryActivityLabel(status, isActive) {
+    return getSummaryWorkLabel(status, 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 getMessageText(message) {
+    if (!message.message)
+        return '';
+    if (typeof message.message === 'object')
+        return JSON.stringify(message.message, null, 2);
+    return String(message.message).trim();
+}
+function SummaryWorkstreamLaunchMessage({ message, details, }) {
+    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) })] })] }) }));
+}
+const SUMMARY_PROSE_CLASS = [
+    'agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/80',
+    'prose-p:my-2 prose-p:leading-6 prose-li:my-0.5 prose-pre:my-3 prose-headings:tracking-normal',
+    'prose-headings:text-foreground prose-strong:text-foreground prose-code:text-foreground',
+    'prose-a:text-foreground prose-a:underline prose-a:decoration-muted prose-a:underline-offset-4',
+    '[&_p]:text-foreground/80 [&_li]:text-foreground/80 [&_li::marker]:text-muted',
+].join(' ');
+const USER_BUBBLE_COLLAPSE_THRESHOLD = 520;
+const STORE_LINK_MARKDOWN_RE = /\[[^\]]+\]\((?:\/store\/(?:objects|collections)\/|store:|document:|document:\/\/|collection:)[^)]+\)/;
+const DEFAULT_AGENT_MARKDOWN_COMPONENTS = {
+    table: AgentMarkdownTable,
+};
+function getHastText(node) {
+    if (!node || typeof node !== 'object')
+        return '';
+    const typedNode = node;
+    if (typeof typedNode.value === 'string')
+        return typedNode.value;
+    if (!Array.isArray(typedNode.children))
+        return '';
+    return typedNode.children.map(getHastText).join('');
+}
+function getElementChildren(node, tagName) {
+    if (!node || typeof node !== 'object')
+        return [];
+    const children = node.children;
+    if (!Array.isArray(children))
+        return [];
+    return children.filter((child) => {
+        if (!child || typeof child !== 'object')
+            return false;
+        const childElement = child;
+        return tagName ? childElement.tagName === tagName : typeof childElement.tagName === 'string';
+    });
+}
+function getTableRows(node) {
+    const sections = getElementChildren(node).filter((child) => child.tagName === 'thead' || child.tagName === 'tbody');
+    return sections.flatMap((section) => getElementChildren(section, 'tr').map((row) => getElementChildren(row)
+        .filter((cell) => cell.tagName === 'th' || cell.tagName === 'td')
+        .map((cell) => getHastText(cell).replace(/\s+/g, ' ').trim())));
+}
+function getTableBodyRows(node) {
+    return getElementChildren(node, 'tbody').flatMap((section) => getElementChildren(section, 'tr').map((row) => getElementChildren(row, 'td').map((cell) => getHastText(cell).replace(/\s+/g, ' ').trim())));
+}
+function getCompactTableColumns(node) {
+    const rows = getTableRows(node);
+    const bodyRows = getTableBodyRows(node);
+    const columnCount = Math.max(0, ...rows.map((row) => row.length));
+    if (columnCount <= 1)
+        return new Set();
+    const compactColumns = new Set();
+    for (let columnIndex = 0; columnIndex < columnCount; columnIndex += 1) {
+        const bodyValues = bodyRows
+            .map((row) => row[columnIndex] || '')
+            .map((value) => value.trim())
+            .filter(Boolean);
+        if (bodyValues.length === 0)
+            continue;
+        const lengths = bodyValues.map((value) => value.length);
+        const maxLength = Math.max(...lengths);
+        const avgLength = lengths.reduce((sum, length) => sum + length, 0) / lengths.length;
+        const hasLongToken = bodyValues.some((value) => /\S{12,}/.test(value));
+        if (maxLength <= 16 && avgLength <= 10 && !hasLongToken) {
+            compactColumns.add(columnIndex);
+        }
+    }
+    if (compactColumns.size >= columnCount) {
+        return new Set();
+    }
+    return compactColumns;
+}
+function clampNumber(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function getLongestTokenLength(values) {
+    return values.reduce((longest, value) => {
+        const tokens = value.match(/\S+/g) || [];
+        return Math.max(longest, ...tokens.map((token) => token.length));
+    }, 0);
+}
+function getTableColumnLayouts(node) {
+    const rows = getTableRows(node);
+    const columnCount = Math.max(0, ...rows.map((row) => row.length));
+    if (columnCount <= 1)
+        return [];
+    const compactColumns = getCompactTableColumns(node);
+    const weights = Array.from({ length: columnCount }, (_value, columnIndex) => {
+        if (compactColumns.has(columnIndex)) {
+            return 8;
+        }
+        const values = rows
+            .map((row) => row[columnIndex] || '')
+            .map((value) => value.trim())
+            .filter(Boolean);
+        if (values.length === 0)
+            return 18;
+        const lengths = values.map((value) => value.length);
+        const maxLength = Math.max(...lengths);
+        const avgLength = lengths.reduce((sum, length) => sum + length, 0) / lengths.length;
+        const longestTokenLength = getLongestTokenLength(values);
+        return clampNumber(avgLength * 0.7 + maxLength * 0.25 + longestTokenLength * 0.45, 18, 90);
+    });
+    const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+    if (totalWeight <= 0)
+        return [];
+    return weights.map((weight, columnIndex) => {
+        const width = `${((weight / totalWeight) * 100).toFixed(3)}%`;
+        return {
+            key: `agent-markdown-table-column-${columnIndex}`,
+            compact: compactColumns.has(columnIndex),
+            width,
+        };
+    });
+}
+function AgentMarkdownTable({ node, className, children, ...props }) {
+    const columnLayouts = getTableColumnLayouts(node);
+    return (_jsxs("table", { ...props, className: className, children: [columnLayouts.length > 0 ? (_jsx("colgroup", { children: columnLayouts.map((columnLayout) => (_jsx("col", { className: columnLayout.compact ? 'agent-markdown-table-compact-col' : undefined, style: {
+                        '--agent-markdown-table-column-width': columnLayout.width,
+                    } }, columnLayout.key))) })) : null, children] }));
+}
+function getReactNodeTextLength(node) {
+    if (node === null || node === undefined || typeof node === 'boolean')
+        return 0;
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node).length;
+    if (Array.isArray(node)) {
+        return node.reduce((total, child) => total + getReactNodeTextLength(child), 0);
+    }
+    if (React.isValidElement(node)) {
+        const props = node.props;
+        return getReactNodeTextLength(props.children);
+    }
+    return 0;
+}
+function useLiveElapsedSeconds(timestamp, enabled) {
+    const [elapsed, setElapsed] = useState(() => getElapsedSeconds(timestamp));
+    useEffect(() => {
+        if (!enabled) {
+            setElapsed(getElapsedSeconds(timestamp));
+            return;
+        }
+        const updateElapsed = () => setElapsed(getElapsedSeconds(timestamp));
+        updateElapsed();
+        const intervalId = window.setInterval(updateElapsed, 1000);
+        return () => window.clearInterval(intervalId);
+    }, [enabled, timestamp]);
+    return elapsed;
+}
+function useRotatingThinkingMessageIndex(enabled = true) {
+    const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const intervalId = window.setInterval(() => {
+            setThinkingMessageIndex(() => Math.floor(Math.random() * ThinkingMessages.length));
+        }, 4000);
+        return () => window.clearInterval(intervalId);
+    }, [enabled]);
+    return thinkingMessageIndex;
+}
+function SummaryUserBubble({ children, workstreamId, className, artifactRunId, markdownComponents, }) {
+    const { t } = useUITranslation();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const contentLength = useMemo(() => getReactNodeTextLength(children), [children]);
+    const shouldCollapse = contentLength > USER_BUBBLE_COLLAPSE_THRESHOLD;
+    const isPlainText = typeof children === 'string' || typeof children === 'number';
+    const textContent = isPlainText ? String(children) : '';
+    const shouldRenderMarkdown = typeof children === 'string' && STORE_LINK_MARKDOWN_RE.test(children);
+    useEffect(() => {
+        if (!shouldCollapse && isExpanded) {
+            setIsExpanded(false);
+        }
+    }, [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" })] }))] }) }));
+}
+function SummaryMessage({ message, onSendMessage, requestInputAnswered = false, StoreLinkComponent, CollectionLinkComponent, }) {
+    const content = getMessageText(message);
+    const workstreamLaunchDetails = getWorkstreamLaunchDetails(message);
+    const workstreamId = getWorkstreamId(message);
+    const runId = message.workflow_run_id;
+    const parsedQuestion = useMemo(() => (message.type === AgentMessageType.QUESTION ? parseUserMessageAttachments(content) : null), [content, message.type]);
+    const markdownComponents = useMemo(() => ({
+        ...DEFAULT_AGENT_MARKDOWN_COMPONENTS,
+        a: ({ node: _node, ref: _ref, ...props }) => {
+            const href = props.href || '';
+            if (href.includes('/store/objects')) {
+                const documentId = href.split('/store/objects/')[1] || '';
+                if (StoreLinkComponent) {
+                    return (_jsx(StoreLinkComponent, { href: href, documentId: documentId, children: props.children }));
+                }
+                return (_jsx(NavLink, { href: href, topLevelNav: true, children: props.children }));
+            }
+            if (href.includes('/store/collections')) {
+                const collectionId = href.split('/store/collections/')[1] || '';
+                if (CollectionLinkComponent) {
+                    return (_jsx(CollectionLinkComponent, { href: href, collectionId: collectionId, children: props.children }));
+                }
+                return (_jsx(NavLink, { href: href, topLevelNav: true, children: props.children }));
+            }
+            return _jsx("a", { ...props, target: "_blank", rel: "noopener noreferrer" });
+        },
+    }), [StoreLinkComponent, CollectionLinkComponent]);
+    if (workstreamLaunchDetails) {
+        return _jsx(SummaryWorkstreamLaunchMessage, { message: message, details: workstreamLaunchDetails });
+    }
+    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 }))] }));
+    }
+    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 }) }));
+    }
+    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 }) }))] }));
+}
+function isRecordValue(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function hasInitialRequestValue(value) {
+    if (value === null || value === undefined)
+        return false;
+    if (typeof value === 'string')
+        return value.trim().length > 0;
+    if (Array.isArray(value))
+        return value.length > 0;
+    if (typeof value === 'object')
+        return Object.keys(value).length > 0;
+    return true;
+}
+function isRenderableNode(node) {
+    if (node === null || node === undefined || node === false)
+        return false;
+    if (typeof node === 'string')
+        return node.trim().length > 0;
+    return true;
+}
+function getSchemaProperties(schema) {
+    if (!schema || !isRecordValue(schema))
+        return {};
+    const properties = schema.properties;
+    if (!isRecordValue(properties))
+        return {};
+    return properties;
+}
+function getSchemaLabel(schema, fallback) {
+    const title = schema && isRecordValue(schema) ? schema.title : undefined;
+    if (typeof title === 'string' && title.trim())
+        return title;
+    return fallback
+        .replace(/[_-]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+function stringifyRequestValue(value) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+function renderRequestValue(value) {
+    if (value === null || value === undefined || value === '') {
+        return _jsx("span", { className: "text-muted", children: "Not provided" });
+    }
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    if (typeof value === 'number')
+        return String(value);
+    if (typeof value === 'string')
+        return _jsx("span", { className: "whitespace-pre-wrap", children: value });
+    if (Array.isArray(value) && value.every((item) => typeof item !== 'object' || item === null)) {
+        return value.map((item) => stringifyRequestValue(item)).join(', ');
+    }
+    return (_jsx("pre", { className: "max-h-40 overflow-auto whitespace-pre-wrap rounded-md bg-background/55 px-2 py-1.5 font-mono text-[12px] leading-relaxed text-foreground/80", children: stringifyRequestValue(value) }));
+}
+function renderDefaultInitialRequest(data, schema, title) {
+    if (!hasInitialRequestValue(data))
+        return null;
+    if (!isRecordValue(data))
+        return renderRequestValue(data);
+    const properties = getSchemaProperties(schema);
+    const fieldKeys = [...Object.keys(properties), ...Object.keys(data).filter((key) => !(key in properties))];
+    const fields = fieldKeys
+        .map((key) => ({
+        key,
+        label: getSchemaLabel(properties[key], key),
+        value: data[key],
+    }))
+        .filter((field) => hasInitialRequestValue(field.value));
+    if (fields.length === 0)
+        return null;
+    return (_jsxs("div", { className: "space-y-2 text-start", children: [title ? _jsx("div", { className: "text-xs font-medium uppercase tracking-normal text-muted", children: title }) : null, _jsx("dl", { className: "space-y-2", children: fields.map((field) => (_jsxs("div", { className: "grid gap-1 sm:grid-cols-[minmax(7rem,32%)_1fr] sm:gap-3", children: [_jsx("dt", { className: "text-xs font-medium text-muted", children: field.label }), _jsx("dd", { className: "min-w-0 break-words text-sm text-foreground", children: renderRequestValue(field.value) })] }, field.key))) })] }));
+}
+function InitialRequestMessage({ data, schema, title, template, prependFriendlyMessage, timestamp, isSummaryView, messageItemClassNames, messageStyleOverrides, StoreLinkComponent, CollectionLinkComponent, }) {
+    const plainText = prependFriendlyMessage?.trim() || (typeof data === 'string' ? data.trim() : '');
+    const templateContent = template?.({
+        data: data ?? prependFriendlyMessage,
+        schema,
+        title,
+    });
+    if (!isRenderableNode(templateContent) && plainText) {
+        const message = {
+            type: AgentMessageType.QUESTION,
+            message: plainText,
+            timestamp: getTimestampMs(timestamp),
+            workflow_run_id: '',
+            workstream_id: 'main',
+        };
+        return isSummaryView ? (_jsx(SummaryMessage, { message: message, StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent })) : (_jsx(MessageItem, { ...messageItemClassNames, messageStyleOverrides: messageStyleOverrides, message: message }));
+    }
+    const content = isRenderableNode(templateContent)
+        ? templateContent
+        : renderDefaultInitialRequest(data, schema, title);
+    if (!isRenderableNode(content))
+        return null;
+    return _jsx(SummaryUserBubble, { className: "py-3", children: content });
+}
+function InitialRequestWaitingCard({ label, timestamp, className, }) {
+    const thinkingMessageIndex = useRotatingThinkingMessageIndex();
+    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 TOOL_DETAIL_SYSTEM_KEYS = new Set([
+    'account_id',
+    'activity_group_id',
+    'activity_id',
+    'channel_id',
+    'collection_id',
+    'document_id',
+    'display_role',
+    'event_class',
+    'id',
+    'object_id',
+    'project_id',
+    'run_id',
+    'streamed',
+    'tenant_id',
+    'thread_id',
+    'tool',
+    'tool_event',
+    'tool_iteration',
+    'tool_run_id',
+    'tool_use_id',
+    'tool_status',
+    'tools',
+    'message_to_human',
+    'progress_messages',
+    'workflow_run_id',
+]);
+function getDetailsRecord(message) {
+    return isRecordValue(message.details) ? message.details : {};
+}
+function humanizeIdentifier(value) {
+    return value
+        .replace(/[_-]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+function getToolNames(details) {
+    const names = [];
+    if (typeof details.tool === 'string' && details.tool.trim())
+        names.push(details.tool.trim());
+    if (Array.isArray(details.tools)) {
+        for (const tool of details.tools) {
+            if (typeof tool === 'string' && tool.trim()) {
+                names.push(tool.trim());
+            }
+            else if (isRecordValue(tool)) {
+                const name = typeof tool.name === 'string' ? tool.name : tool.tool;
+                if (typeof name === 'string' && name.trim())
+                    names.push(name.trim());
+            }
+        }
+    }
+    return names;
+}
+const TOOL_TARGET_KEYS = [
+    'query',
+    'path',
+    'file',
+    'file_name',
+    'fileName',
+    'filename',
+    'name',
+    'title',
+    'artifact',
+    'artifact_path',
+    'url',
+    'command',
+];
+function getToolTargetEntry(details) {
+    for (const key of TOOL_TARGET_KEYS) {
+        const value = details[key];
+        if (typeof value === 'string' && value.trim())
+            return { key, value: value.trim() };
+        if (typeof value === 'number' || typeof value === 'boolean')
+            return { key, value: String(value) };
+    }
+    return undefined;
+}
+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}`;
+    if (isToolPreambleMessage(message))
+        return 'think';
+    if (concreteTool.startsWith('learn_') || haystack.includes('learn_') || /\bskill\b/.test(text))
+        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'))
+        return 'read';
+    if (classifierText.includes('edit') ||
+        classifierText.includes('write') ||
+        classifierText.includes('patch') ||
+        classifierText.includes('create'))
+        return 'edit';
+    if (classifierText.includes('bash') ||
+        classifierText.includes('shell') ||
+        classifierText.includes('command') ||
+        classifierText.includes('terminal'))
+        return 'command';
+    if (message.type === AgentMessageType.THOUGHT && toolNames.length === 0)
+        return 'think';
+    return 'tool';
+}
+function getToolDetailLabel(kind) {
+    switch (kind) {
+        case 'search':
+            return 'Search';
+        case 'read':
+            return 'Read';
+        case 'edit':
+            return 'Edit';
+        case 'command':
+            return 'Bash';
+        case 'skill':
+            return 'Skill';
+        case 'discover':
+            return 'Tool';
+        case 'think':
+            return 'Thought';
+        default:
+            return 'Tool';
+    }
+}
+function getToolTarget(details) {
+    const directTarget = getToolTargetEntry(details);
+    if (directTarget)
+        return directTarget.value;
+    const files = details.files ?? details.outputFiles;
+    if (Array.isArray(files) && files.length > 0) {
+        return files.map((file) => stringifyRequestValue(file)).join(', ');
+    }
+    return undefined;
+}
+function compactInlineText(value, maxLength = 160) {
+    const normalized = value.replace(/\s+/g, ' ').trim();
+    return normalized.length > maxLength ? `${normalized.slice(0, maxLength - 1)}...` : normalized;
+}
+const MESSAGE_RENDER_ID_DETAIL_KEYS = [
+    'batch_id',
+    'activity_group_id',
+    'activity_id',
+    'tool_run_id',
+    'tool_use_id',
+    'streaming_id',
+    'chunk_index',
+    'tool_iteration',
+    'tool_event',
+];
+function getStableDetailIdentity(details) {
+    for (const key of MESSAGE_RENDER_ID_DETAIL_KEYS) {
+        const value = details[key];
+        if (typeof value === 'string' && value.trim())
+            return `${key}:${value.trim()}`;
+        if (typeof value === 'number' || typeof value === 'boolean')
+            return `${key}:${value}`;
+    }
+    return undefined;
+}
+function getAgentMessageRenderKey(message, prefix = 'message') {
+    const details = getDetailsRecord(message);
+    const detailIdentity = getStableDetailIdentity(details);
+    const contentIdentity = compactInlineText(getMessageText(message), 96);
+    return [
+        prefix,
+        message.workstream_id || 'main',
+        message.workflow_run_id,
+        message.timestamp,
+        message.type,
+        detailIdentity ?? contentIdentity,
+    ]
+        .filter(Boolean)
+        .join(':');
+}
+function getRenderableGroupKey(group) {
+    if (group.type === 'single') {
+        return getAgentMessageRenderKey(group.message);
+    }
+    if (group.type === 'streaming') {
+        return `streaming:${group.streamingId}:${group.startTimestamp}:${group.workstreamId || 'main'}`;
+    }
+    const firstMessage = group.messages[0];
+    const lastMessage = group.messages[group.messages.length - 1];
+    const firstKey = firstMessage ? getAgentMessageRenderKey(firstMessage, 'first') : group.firstTimestamp;
+    const lastKey = lastMessage ? getAgentMessageRenderKey(lastMessage, 'last') : group.firstTimestamp;
+    return ['group', group.toolRunId, group.firstTimestamp, firstKey, lastKey].filter(Boolean).join(':');
+}
+function formatToolSectionValue(value) {
+    const text = stringifyRequestValue(value).trim();
+    return text.length > 2400 ? `${text.slice(0, 2400)}\n...` : text;
+}
+function createToolSection(key, label, value, tone) {
+    if (value === null || value === undefined || value === '')
+        return undefined;
+    if (Array.isArray(value) && value.length === 0)
+        return undefined;
+    if (isRecordValue(value) && Object.keys(value).length === 0)
+        return undefined;
+    return { key, label, value, tone };
+}
+function getRemainingDetailFields(details, consumedKeys) {
+    const remaining = Object.entries(details).reduce((acc, [key, value]) => {
+        if (TOOL_DETAIL_SYSTEM_KEYS.has(key) || consumedKeys.has(key))
+            return acc;
+        if (value === null || value === undefined || value === '')
+            return acc;
+        acc[key] = value;
+        return acc;
+    }, {});
+    return Object.keys(remaining).length > 0 ? remaining : undefined;
+}
+function getToolDetailSections(message) {
+    const details = getDetailsRecord(message);
+    const consumedKeys = new Set();
+    const sections = [];
+    const targetEntry = getToolTargetEntry(details);
+    const addSection = (label, keys, tone) => {
+        for (const key of keys) {
+            const section = createToolSection(key, label, details[key], tone);
+            if (section) {
+                consumedKeys.add(key);
+                sections.push(section);
+                return;
+            }
+        }
+    };
+    addSection('Query', ['query']);
+    addSection('Input', ['input', 'params', 'arguments', 'args']);
+    addSection('Output', [
+        'output',
+        'stdout',
+        'result',
+        'results',
+        'content',
+        'result_summary',
+        'observation',
+        'display_message',
+    ]);
+    addSection('Files', ['files', 'outputFiles']);
+    addSection('Error', ['error', 'stderr'], 'error');
+    if (targetEntry)
+        consumedKeys.add(targetEntry.key);
+    const remainingDetails = getRemainingDetailFields(details, consumedKeys);
+    if (sections.length === 0 && remainingDetails) {
+        sections.push({ key: 'details', label: 'Details', value: remainingDetails });
+    }
+    return sections;
+}
+function buildSummaryToolDetailItem(message, index) {
+    const text = getMessageText(message);
+    const details = getDetailsRecord(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 title = kind === 'think'
+        ? text || fallbackTitle
+        : kind === 'command'
+            ? compactInlineText(text || command || fallbackTitle)
+            : compactInlineText(target || text || fallbackTitle);
+    const normalizedText = text ? (kind === 'think' ? text : compactInlineText(text, 420)) : undefined;
+    const shouldShowText = normalizedText && normalizedText !== title;
+    if (!title && !shouldShowText)
+        return undefined;
+    return {
+        key: `${message.timestamp}-${details.activity_id || details.tool_run_id || index}`,
+        kind,
+        label: getToolDetailLabel(kind),
+        title,
+        command,
+        text: shouldShowText ? normalizedText : undefined,
+        status: details.tool_status,
+        sections: getToolDetailSections(message),
+    };
+}
+function mergeSummaryToolMessages(messages) {
+    const byGroupId = new Map();
+    const ungrouped = [];
+    messages.forEach((message, index) => {
+        const details = getDetailsRecord(message);
+        if (isToolPreambleMessage(message)) {
+            ungrouped.push({ index, message });
+            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) {
+            ungrouped.push({ index, message });
+            return;
+        }
+        const group = byGroupId.get(groupId);
+        if (group) {
+            group.messages.push(message);
+        }
+        else {
+            byGroupId.set(groupId, { index, messages: [message] });
+        }
+    });
+    const grouped = Array.from(byGroupId.values()).map(({ index, messages: runMessages }) => {
+        const sortedMessages = [...runMessages].sort((a, b) => getTimestampMs(a.timestamp) - getTimestampMs(b.timestamp));
+        const baseMessage = sortedMessages[sortedMessages.length - 1];
+        const startMessage = sortedMessages.find((message) => getDetailsRecord(message).tool_event === 'started');
+        const firstTextMessage = sortedMessages.find((message) => 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));
+        const mergedDetails = {};
+        for (const message of sortedMessages) {
+            Object.assign(mergedDetails, getDetailsRecord(message));
+        }
+        if (latestStatusMessage && mergedDetails.error === undefined && mergedDetails.stderr === undefined) {
+            mergedDetails.error = getMessageText(latestStatusMessage);
+        }
+        if (commandTextMessage && mergedDetails.command === undefined) {
+            mergedDetails.command = getMessageText(commandTextMessage);
+        }
+        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),
+                details: mergedDetails,
+            },
+        };
+    });
+    return [...ungrouped, ...grouped].sort((a, b) => a.index - b.index).map(({ message }) => message);
+}
+function buildSummaryToolDetailItems(messages) {
+    const seen = new Set();
+    const items = [];
+    mergeSummaryToolMessages(messages).forEach((message, index) => {
+        const item = buildSummaryToolDetailItem(message, index);
+        if (!item)
+            return;
+        const signature = `${item.kind}:${item.label}:${item.title}:${item.text ?? ''}`;
+        if (seen.has(signature))
+            return;
+        seen.add(signature);
+        items.push(item);
+    });
+    return items;
+}
+function ToolDetailIcon({ kind, status }) {
+    if (status === 'error' || status === 'warning') {
+        return _jsx(AlertTriangle, { className: "size-3.5" });
+    }
+    switch (kind) {
+        case 'search':
+            return _jsx(Search, { className: "size-3.5" });
+        case 'read':
+            return _jsx(FileText, { className: "size-3.5" });
+        case 'edit':
+            return _jsx(Pencil, { className: "size-3.5" });
+        case 'command':
+            return _jsx(Terminal, { className: "size-3.5" });
+        case 'skill':
+            return _jsx(Brain, { className: "size-3.5" });
+        case 'discover':
+            return _jsx(Wrench, { className: "size-3.5" });
+        case 'think':
+            return _jsx(Brain, { className: "size-3.5" });
+        default:
+            return _jsx(Wrench, { className: "size-3.5" });
+    }
+}
+function ToolDetailSection({ section }) {
+    const value = section.value;
+    const isPrimitive = typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+    const isFileList = section.label === 'Files' && Array.isArray(value);
+    const hideLabel = section.label === 'Output';
+    if (isFileList) {
+        const fileLabels = Array.from(new Set(value.map((file) => stringifyRequestValue(file))));
+        return (_jsx("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: fileLabels.map((fileLabel) => (_jsx("span", { className: "rounded-md bg-mixer-muted/15 px-1.5 py-0.5 font-mono text-[11px] text-muted", children: compactInlineText(fileLabel, 64) }, fileLabel))) }));
+    }
+    const labelClassName = cn('text-xs font-medium', section.tone === 'error' ? 'text-destructive' : 'text-muted');
+    const content = isPrimitive && !String(value).includes('\n') && String(value).length < 180 ? (_jsx("div", { className: cn('break-words text-xs', section.tone === 'error' ? 'text-destructive' : 'text-foreground/75'), children: String(value) })) : (_jsx("pre", { className: cn('max-h-52 overflow-auto whitespace-pre-wrap rounded-lg px-3 py-2 font-mono text-[11px] leading-relaxed', section.tone === 'error'
+            ? 'bg-destructive/5 text-destructive'
+            : 'bg-mixer-muted/10 text-foreground/75'), children: formatToolSectionValue(value) }));
+    return (_jsxs("div", { className: "mt-2", children: [!hideLabel ? _jsx("div", { className: cn('mb-1', labelClassName), children: section.label }) : null, content] }));
+}
+function getToolPanelTitle(item) {
+    return item.kind === 'command' ? 'Shell' : item.label;
+}
+function formatToolPrimaryText(item) {
+    if (item.kind !== 'command')
+        return item.title;
+    const command = item.command || item.title;
+    return command.trim().startsWith('$') ? command : `$ ${command}`;
+}
+function formatToolDetailCopyText(item) {
+    const parts = [getToolPanelTitle(item), formatToolPrimaryText(item)];
+    if (item.text)
+        parts.push(item.text);
+    for (const section of item.sections) {
+        parts.push(`${section.label}\n${formatToolSectionValue(section.value)}`);
+    }
+    return parts.filter(Boolean).join('\n\n');
+}
+async function copyTextToClipboard(text) {
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+    }
+    catch {
+        // Fall back to the older textarea path below.
+    }
+    if (typeof document === 'undefined')
+        return false;
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'fixed';
+    textarea.style.insetInlineStart = '-9999px';
+    textarea.style.top = '0';
+    document.body.appendChild(textarea);
+    try {
+        textarea.focus();
+        textarea.select();
+        return document.execCommand('copy');
+    }
+    catch {
+        return false;
+    }
+    finally {
+        textarea.remove();
+    }
+}
+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 [copyState, setCopyState] = useState('idle');
+    const copyResetRef = useRef(undefined);
+    useEffect(() => {
+        return () => {
+            if (copyResetRef.current !== undefined)
+                window.clearTimeout(copyResetRef.current);
+        };
+    }, []);
+    const copyDetails = () => {
+        void copyTextToClipboard(copyText).then((success) => {
+            setCopyState(success ? 'copied' : 'failed');
+            if (copyResetRef.current !== undefined)
+                window.clearTimeout(copyResetRef.current);
+            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] }));
+}
+function SummaryToolTimelineItem({ item }) {
+    const isAttention = item.status === 'error' || item.status === 'warning';
+    const hasDetails = Boolean(item.command || item.text || item.sections.length);
+    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] }));
+}
+function SummaryThoughtTimelineItem({ item, artifactRunId }) {
+    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))) }) }));
+}
+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, }) {
+    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] }) }));
+}
+function TimelineEntry({ children, status }) {
+    const dotClass = status === 'error'
+        ? 'bg-destructive'
+        : status === 'warning'
+            ? 'bg-attention'
+            : status === 'completed'
+                ? 'bg-success'
+                : 'bg-muted';
+    return (_jsxs("div", { className: "relative ps-7", children: [_jsx("div", { className: "absolute start-2 top-0 bottom-0 w-px bg-border" }), _jsx("div", { className: cn('absolute start-[5px] top-4 size-2.5 rounded-full ring-4 ring-background', dotClass) }), children] }));
+}
+// Error boundary to catch and isolate errors in individual message components
+// Note: Markdown parsing errors are handled internally by MarkdownRenderer,
+// so this mainly catches other component errors (e.g., artifact loading, charts)
+class MessageErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        console.error('Message render error:', error);
+        return { hasError: true, error };
+    }
+    componentDidUpdate(prevProps) {
+        // Auto-reset error state when children change
+        // This allows recovery from transient errors during streaming
+        if (this.state.hasError && prevProps.children !== this.props.children) {
+            this.setState({ hasError: false, error: undefined });
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs("div", { className: "border-s-4 border-s-destructive bg-destructive/10 px-4 py-2 my-2 rounded-e", children: [_jsx("p", { className: "text-sm text-destructive font-medium", children: i18nInstance.getFixedT(null, NAMESPACE)('agent.failedToRenderMessage') }), _jsx("p", { className: "text-xs text-muted mt-1 truncate", children: this.state.error?.message || 'Unknown error' })] }));
+        }
+        return this.props.children;
+    }
+}
+// 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, }) {
+    if (!artifactRunId) {
+        console.warn('[AllMessagesMixed] artifactRunId prop is missing!');
+    }
+    const { t } = useUITranslation();
+    const containerRef = useRef(null);
+    const [activeWorkstream, setActiveWorkstream] = useState('all');
+    // PERFORMANCE: Throttle auto-scroll to prevent layout thrashing
+    // During streaming, scrollIntoView was being called 30+ times/sec
+    const lastScrollTimeRef = useRef(0);
+    const scrollScheduledRef = useRef(null);
+    // Track whether the user has manually scrolled away from the bottom.
+    // When true, auto-scroll is suppressed so the user can read earlier content.
+    const userScrolledUpRef = useRef(false);
+    // Guard to distinguish programmatic scrolls from user-initiated ones
+    const programmaticScrollRef = useRef(false);
+    const isStreaming = streamingMessages.size > 0;
+    const isSummaryView = viewMode === 'sliding';
+    // Detect user scroll: if they scroll away from the bottom, stop auto-scrolling.
+    // Re-enable auto-scroll when they scroll back near the bottom.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const NEAR_BOTTOM_THRESHOLD = 80; // px from bottom to consider "at bottom"
+        const handleScroll = () => {
+            // Ignore scrolls triggered by our own performScroll
+            if (programmaticScrollRef.current)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            userScrolledUpRef.current = distanceFromBottom > NEAR_BOTTOM_THRESHOLD;
+        };
+        container.addEventListener('scroll', handleScroll, { passive: true });
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, []);
+    // Compute bucketed streaming content length for scroll dependency
+    // Changes every ~200 chars to trigger scroll without excessive updates
+    const streamingContentBucket = useMemo(() => {
+        let total = 0;
+        streamingMessages.forEach((data) => {
+            total += data.text?.length || 0;
+        });
+        return Math.floor(total / 200); // Bucket by 200 chars
+    }, [streamingMessages]);
+    // Throttled scroll function
+    const performScroll = useCallback(() => {
+        if (bottomRef.current) {
+            programmaticScrollRef.current = true;
+            bottomRef.current.scrollIntoView({ behavior: isStreaming ? 'instant' : 'smooth' });
+            lastScrollTimeRef.current = Date.now();
+            // Reset the programmatic flag after the browser processes the scroll
+            requestAnimationFrame(() => {
+                programmaticScrollRef.current = false;
+            });
+        }
+        scrollScheduledRef.current = null;
+    }, [bottomRef, isStreaming]);
+    // Auto-scroll to bottom when messages or streaming messages change
+    // Throttled to max 10 scrolls/sec to prevent layout thrashing
+    // Skipped when the user has manually scrolled up to read earlier content
+    useEffect(() => {
+        void messages.length;
+        void streamingMessages.size;
+        void streamingContentBucket;
+        if (disableAutoScroll)
+            return;
+        // Respect user's scroll position — don't yank them back to the bottom
+        if (userScrolledUpRef.current)
+            return;
+        const now = Date.now();
+        const timeSinceLastScroll = now - lastScrollTimeRef.current;
+        // If we haven't scrolled recently, scroll immediately
+        if (timeSinceLastScroll >= SCROLL_THROTTLE_MS) {
+            performScroll();
+        }
+        else if (scrollScheduledRef.current === null) {
+            // Schedule a scroll for later if not already scheduled
+            const delay = SCROLL_THROTTLE_MS - timeSinceLastScroll;
+            scrollScheduledRef.current = window.setTimeout(performScroll, delay);
+        }
+        // Cleanup scheduled scroll on unmount or before next effect
+        return () => {
+            if (scrollScheduledRef.current !== null) {
+                clearTimeout(scrollScheduledRef.current);
+                scrollScheduledRef.current = null;
+            }
+        };
+    }, [messages.length, streamingMessages.size, streamingContentBucket, performScroll, disableAutoScroll]);
+    // 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 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 = [];
+        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;
+    }, [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
+        return extractedWorkstreams;
+    }, [sortedMessages]);
+    // Count messages per workstream
+    const workstreamCounts = React.useMemo(() => {
+        const counts = new Map();
+        counts.set('all', sortedMessages.length);
+        // Count main messages
+        const mainMessages = filterMessagesByWorkstream(sortedMessages, 'main');
+        counts.set('main', mainMessages.length);
+        // Count other workstreams
+        sortedMessages.forEach((msg) => {
+            const workstreamId = getWorkstreamId(msg);
+            if (workstreamId !== 'main') {
+                counts.set(workstreamId, (counts.get(workstreamId) || 0) + 1);
+            }
+        });
+        return counts;
+    }, [sortedMessages]);
+    // Filter messages based on active workstream
+    const displayMessages = React.useMemo(() => {
+        if (activeWorkstream === 'all') {
+            return sortedMessages;
+        }
+        return filterMessagesByWorkstream(sortedMessages, activeWorkstream);
+    }, [sortedMessages, activeWorkstream]);
+    const answeredRequestInputKeys = React.useMemo(() => getAnsweredRequestInputKeys(displayMessages), [displayMessages]);
+    const externallyRenderedRequestInputKey = React.useMemo(() => {
+        if (renderRequestInputControls)
+            return undefined;
+        const pendingRequestInput = getPendingRequestInputMessage(displayMessages);
+        return pendingRequestInput ? getRequestInputMessageKey(pendingRequestInput) : undefined;
+    }, [displayMessages, renderRequestInputControls]);
+    const shouldHideRequestInputMessage = React.useCallback((message) => message.type === AgentMessageType.REQUEST_INPUT &&
+        externallyRenderedRequestInputKey === getRequestInputMessageKey(message), [externallyRenderedRequestInputKey]);
+    const fallbackWorkingStartedAtRef = useRef(Date.now());
+    const hasInitialRequest = Boolean(prependFriendlyMessage?.trim()) ||
+        hasInitialRequestValue(initialRequestData) ||
+        initialRequestTemplate !== undefined;
+    const hasPersistedUserQuestion = useMemo(() => displayMessages.some((message) => message.type === AgentMessageType.QUESTION), [displayMessages]);
+    const shouldRenderInitialRequest = hasInitialRequest && !hasPersistedUserQuestion;
+    const latestDisplayMessageTimestamp = useMemo(() => {
+        return displayMessages.reduce((latest, msg) => Math.max(latest, getTimestampMs(msg.timestamp)), -Infinity);
+    }, [displayMessages]);
+    const latestNonTransientDisplayMessageTimestamp = useMemo(() => {
+        return displayMessages.reduce((latest, msg) => {
+            if (isTransientThinkingMessage(msg))
+                return latest;
+            return Math.max(latest, getTimestampMs(msg.timestamp));
+        }, -Infinity);
+    }, [displayMessages]);
+    const isDisplayCompleted = useMemo(() => {
+        if (hasOpenUserTurn(displayMessages))
+            return false;
+        return isCompleted || !isInProgress(displayMessages);
+    }, [displayMessages, isCompleted]);
+    // Split streaming messages:
+    // - complete (or stale incomplete) ones are interleaved chronologically
+    // - actively incomplete ones render at the end
+    // This keeps live streaming performant while preventing old incomplete streams
+    // from being pinned forever at the bottom.
+    const { completeStreaming, incompleteStreaming } = React.useMemo(() => {
+        const complete = new Map();
+        const incomplete = [];
+        streamingMessages.forEach((data, id) => {
+            // Filter by workstream if specified
+            if (activeWorkstream && activeWorkstream !== 'all') {
+                const streamWorkstream = data.workstreamId || 'main';
+                if (activeWorkstream !== streamWorkstream)
+                    return;
+            }
+            // If a newer persisted message exists, this stream is stale and should be
+            // treated as complete for ordering purposes.
+            const isStale = data.startTimestamp <= latestNonTransientDisplayMessageTimestamp;
+            if (isStale) {
+                // Only interleave chronologically when a newer persisted message
+                // already exists — the streaming message is truly historical.
+                complete.set(id, data);
+            }
+            else if (data.text) {
+                // Keep at the bottom (including isComplete streams) until
+                // the persisted ANSWER/THOUGHT arrives and replaces it.
+                incomplete.push({ id, data });
+            }
+        });
+        return { completeStreaming: complete, incompleteStreaming: incomplete };
+    }, [streamingMessages, activeWorkstream, latestNonTransientDisplayMessageTimestamp]);
+    const summaryDisplayMessages = React.useMemo(() => buildSummaryDisplayMessages(displayMessages, completeStreaming), [displayMessages, completeStreaming]);
+    const latestSummaryObservedTimestamp = useMemo(() => {
+        const hasVisibleLiveStream = incompleteStreaming.some(({ data }) => data.text.trim().length > 0);
+        if (hasVisibleLiveStream)
+            return Number.POSITIVE_INFINITY;
+        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]);
+    // 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.
+    const groupedMessages = React.useMemo(() => mergeConsecutiveToolGroups(groupMessagesWithStreaming(displayMessages, completeStreaming, activeWorkstream)), [displayMessages, completeStreaming, activeWorkstream]);
+    // 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]);
+    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 activityStartedTimestampRef = useRef(activityAnchorCandidate);
+    const wasActivityFallbackVisibleRef = useRef(false);
+    const activityStartedTimestamp = useMemo(() => {
+        if (!showActivityFallback)
+            return activityAnchorCandidate;
+        const candidateMs = getTimestampMs(activityAnchorCandidate);
+        const currentMs = getTimestampMs(activityStartedTimestampRef.current);
+        if (!wasActivityFallbackVisibleRef.current || candidateMs < currentMs) {
+            return activityAnchorCandidate;
+        }
+        return activityStartedTimestampRef.current;
+    }, [activityAnchorCandidate, showActivityFallback]);
+    useEffect(() => {
+        activityStartedTimestampRef.current = activityStartedTimestamp;
+        wasActivityFallbackVisibleRef.current = showActivityFallback;
+    }, [activityStartedTimestamp, showActivityFallback]);
+    // Determine completion status for each workstream
+    const workstreamCompletionStatus = useMemo(() => {
+        const statusMap = new Map();
+        // Group messages by workstream
+        const workstreamMessages = new Map();
+        sortedMessages.forEach((message) => {
+            const workstreamId = getWorkstreamId(message);
+            if (!workstreamMessages.has(workstreamId)) {
+                workstreamMessages.set(workstreamId, []);
+            }
+            workstreamMessages.get(workstreamId)?.push(message);
+        });
+        // Check if each workstream is completed
+        for (const [workstreamId, msgs] of workstreamMessages.entries()) {
+            if (msgs.length > 0) {
+                const isCompleted = msgs.some((m) => {
+                    if ([
+                        AgentMessageType.COMPLETE,
+                        AgentMessageType.IDLE,
+                        AgentMessageType.REQUEST_INPUT,
+                        AgentMessageType.TERMINATED,
+                    ].includes(m.type)) {
+                        return true;
+                    }
+                    // Workstream completion is sent as UPDATE with workstream_event: 'completed' or status: 'completed'/'canceled'
+                    if (m.type === AgentMessageType.UPDATE && m.details) {
+                        const d = m.details;
+                        return (d.workstream_event === 'completed' || d.status === 'completed' || d.status === 'canceled');
+                    }
+                    return false;
+                });
+                statusMap.set(workstreamId, isCompleted);
+            }
+        }
+        return statusMap;
+    }, [sortedMessages]);
+    return (_jsxs("div", { ref: containerRef, 
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable message log needs to accept keyboard focus for arrow-key navigation
+        tabIndex: 0, className: "flex-1 min-h-0 h-full w-full max-w-full overflow-y-auto overflow-x-hidden px-1.5 sm:px-2.5 lg:px-3 flex flex-col relative focus:outline-none", "data-testid": "all-messages-mixed", "data-message-count": messages.length, "data-streaming-count": streamingMessages.size, "data-view-mode": viewMode, children: [_jsx("style", { children: `
+                /* Better vertical rhythm for markdown */
+                .vprose > * + * {
+                    margin-top: 0.625rem;
+                }
+                .vprose > h1 + *,
+                .vprose > h2 + *,
+                .vprose > h3 + * {
+                    margin-top: 0.375rem;
+                }
+                /* Tables should read like part of the conversation, not a separate app grid. */
+                .vprose table {
+                    margin-top: 0.875rem;
+                    margin-bottom: 0.875rem;
+                    border-collapse: collapse;
+                    width: 100%;
+                    background: transparent;
+                }
+                .vprose th,
+                .vprose td {
+                    padding: 0.5rem 0.625rem;
+                    border: 0;
+                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+                    background: transparent;
+                    text-align: left;
+                }
+                .vprose thead th {
+                    background: transparent;
+                    font-weight: 600;
+                    color: var(--muted);
+                    font-size: 0.75rem;
+                    text-transform: none;
+                    letter-spacing: 0;
+                }
+                .vprose tbody tr:hover {
+                    background: transparent;
+                }
+                /* Dark mode table styles */
+                .dark .vprose th,
+                .dark .vprose td {
+                    border-color: color-mix(in oklch, var(--border) 70%, transparent);
+                }
+                .dark .vprose thead th {
+                    background: transparent;
+                    color: var(--muted);
+                }
+                .dark .vprose tbody tr:hover {
+                    background: transparent;
+                }
+                /* Horizontal rules as section dividers */
+                .vprose hr {
+                    margin-top: 1rem;
+                    margin-bottom: 1rem;
+                    border-color: var(--gray-5, #d1d5db);
+                }
+                /* Better blockquote styling */
+                .vprose blockquote {
+                    margin-top: 0.875rem;
+                    margin-bottom: 0.875rem;
+                    padding-left: 1rem;
+                    border-left-width: 3px;
+                    border-left-color: var(--gray-6, #d1d5db);
+                    color: var(--gray-11, #6b7280);
+                }
+                /* Code blocks */
+                .vprose pre {
+                    margin-top: 0.75rem;
+                    margin-bottom: 0.75rem;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    overflow-x: auto;
+                    background-color: var(--color-muted-background, #f3f4f6);
+                    color: var(--color-foreground, #1f2937);
+                }
+                .vprose pre code {
+                    color: inherit;
+                }
+                .dark .vprose pre {
+                    color: var(--color-foreground, #f9fafb);
+                }
+
+                /* Summary chat markdown: keep structure, but match the app's quieter conversation surface. */
+                .agent-markdown {
+                    color: color-mix(in oklch, var(--foreground) 78%, transparent);
+                    font-size: 0.875rem;
+                    line-height: 1.625;
+                    overflow-x: auto;
+                }
+                .agent-markdown > * + * {
+                    margin-top: 0.65rem;
+                }
+                .agent-markdown p {
+                    margin-top: 0.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .agent-markdown h1,
+                .agent-markdown h2,
+                .agent-markdown h3,
+                .agent-markdown h4 {
+                    margin-top: 1.2rem;
+                    margin-bottom: 0.45rem;
+                    color: var(--foreground);
+                    font-weight: 650;
+                    letter-spacing: 0;
+                    line-height: 1.3;
+                }
+                .agent-markdown h1 {
+                    font-size: 1.2rem;
+                }
+                .agent-markdown h2 {
+                    font-size: 1.05rem;
+                }
+                .agent-markdown h3,
+                .agent-markdown h4 {
+                    font-size: 0.95rem;
+                }
+                .agent-markdown h1:first-child,
+                .agent-markdown h2:first-child,
+                .agent-markdown h3:first-child,
+                .agent-markdown h4:first-child {
+                    margin-top: 0;
+                }
+                .agent-markdown hr {
+                    margin: 1.15rem 0;
+                    border: 0;
+                    border-top: 1px solid var(--border);
+                    opacity: 0.65;
+                }
+                .agent-markdown ul,
+                .agent-markdown ol {
+                    margin-top: 0.55rem;
+                    margin-bottom: 0.55rem;
+                    padding-left: 1.25rem;
+                }
+                .agent-markdown li {
+                    margin-top: 0.2rem;
+                    margin-bottom: 0.2rem;
+                    padding-left: 0.1rem;
+                    color: inherit;
+                }
+                .agent-markdown li::marker {
+                    color: var(--muted);
+                }
+                .agent-markdown strong {
+                    color: var(--foreground);
+                    font-weight: 600;
+                }
+                .agent-markdown em {
+                    color: color-mix(in oklch, var(--foreground) 72%, transparent);
+                }
+                .agent-markdown a {
+                    color: var(--foreground);
+                    text-decoration-color: var(--muted);
+                    text-underline-offset: 3px;
+                }
+                .agent-markdown blockquote {
+                    margin-top: 0.85rem;
+                    margin-bottom: 0.85rem;
+                    padding-left: 0.875rem;
+                    border-left: 2px solid var(--border);
+                    color: var(--muted);
+                    font-style: normal;
+                }
+                .agent-markdown :not(pre) > code {
+                    border: 1px solid var(--border);
+                    border-radius: 0.375rem;
+                    background: var(--muted-background);
+                    color: var(--foreground);
+                    padding: 0.1rem 0.35rem;
+                    font-size: 0.8125em;
+                    font-weight: 500;
+                }
+                .agent-markdown pre {
+                    margin-top: 0.85rem;
+                    margin-bottom: 0.85rem;
+                    max-height: 32rem;
+                    overflow: auto;
+                    border: 1px solid var(--border);
+                    border-radius: 0.75rem;
+                    background: var(--muted-background);
+                    color: var(--foreground);
+                    padding: 0.875rem;
+                    font-size: 0.8125rem;
+                    line-height: 1.55;
+                }
+                .agent-markdown pre code {
+                    border: 0;
+                    background: transparent;
+                    color: inherit;
+                    padding: 0;
+                    font-size: inherit;
+                }
+                .agent-markdown table {
+                    display: table;
+                    width: 100%;
+                    max-width: 100%;
+                    margin: 0.9rem 0 1rem;
+                    border: 0;
+                    border-collapse: collapse;
+                    border-spacing: 0;
+                    font-size: 0.8125rem;
+                    table-layout: fixed;
+                    background: transparent;
+                }
+                .agent-markdown thead {
+                    background: transparent;
+                }
+                .agent-markdown th,
+                .agent-markdown td {
+                    border: 0;
+                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+                    background: transparent;
+                    padding: 0.55rem 0.75rem;
+                    text-align: left;
+                    vertical-align: top;
+                    overflow-wrap: anywhere;
+                    word-break: normal;
+                    white-space: normal;
+                }
+                .agent-markdown th {
+                    color: var(--muted);
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    letter-spacing: 0;
+                    text-transform: none;
+                    white-space: nowrap;
+                }
+                .agent-markdown td {
+                    color: inherit;
+                }
+                .agent-markdown th + th,
+                .agent-markdown td + td {
+                    padding-inline-start: 1.75rem;
+                }
+                .agent-markdown th:first-child,
+                .agent-markdown td:first-child {
+                    min-width: 0;
+                    width: auto;
+                    white-space: normal;
+                }
+                .agent-markdown col {
+                    width: var(--agent-markdown-table-column-width);
+                }
+                .agent-markdown .agent-markdown-table-compact-col {
+                    width: clamp(4.75rem, var(--agent-markdown-table-column-width), 7rem);
+                }
+                .agent-markdown tr:last-child td {
+                    border-bottom: 0;
+                }
+                .agent-markdown tbody tr:nth-child(even) {
+                    background: transparent;
+                }
+                .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'
+                        ? 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) => {
+                                const isLastGroup = groupIndex === groupedMessages.length - 1;
+                                if (group.type === 'tool_group') {
+                                    // Render grouped tool calls
+                                    const lastMessage = group.messages[group.messages.length - 1];
+                                    const isTerminalToolStatus = group.toolStatus === 'completed' ||
+                                        group.toolStatus === 'error' ||
+                                        group.toolStatus === 'warning';
+                                    const isLatest = !isCompleted &&
+                                        isLastGroup &&
+                                        !DONE_STATES.includes(lastMessage.type) &&
+                                        !isTerminalToolStatus;
+                                    if (hideToolCallsInViewMode?.includes(viewMode))
+                                        return null;
+                                    return (_jsx(TimelineEntry, { status: group.toolStatus, children: _jsx(MessageErrorBoundary, { children: _jsx(ToolCallGroup, { ...toolCallGroupClassNames, messages: group.messages, showPulsatingCircle: isLatest, toolRunId: group.toolRunId, toolStatus: group.toolStatus, preambleText: group.preambleText, preambleMessage: group.preambleMessage, rootClassName: cn('rounded-lg border border-border bg-background/60 shadow-none', toolCallGroupClassNames?.rootClassName), headerClassName: cn('px-3 py-2', toolCallGroupClassNames?.headerClassName), itemHeaderClassName: cn('hover:bg-mixer-muted/20', toolCallGroupClassNames?.itemHeaderClassName) }) }) }, getRenderableGroupKey(group)));
+                                }
+                                else if (group.type === 'streaming') {
+                                    // Render streaming message - no error boundary to avoid interrupting streaming
+                                    return (_jsx(TimelineEntry, { children: _jsx(StreamingMessage, { ...streamingMessageClassNames, text: group.text, workstreamId: group.workstreamId, isComplete: group.isComplete, timestamp: group.startTimestamp, artifactRunId: artifactRunId, cardClassName: cn('rounded-lg border border-border bg-background/60 shadow-none', streamingMessageClassNames?.cardClassName) }) }, getRenderableGroupKey(group)));
+                                }
+                                else {
+                                    // Render single message
+                                    const message = group.message;
+                                    if (shouldHideRequestInputMessage(message))
+                                        return null;
+                                    const isLatestMessage = !isCompleted && isLastGroup && !DONE_STATES.includes(message.type);
+                                    // Special handling for batch progress messages
+                                    if (isBatchProgressMessage(message)) {
+                                        return (_jsx(MessageErrorBoundary, { children: _jsx(BatchProgressPanel, { message: message, batchData: message.details, isRunning: !message.details.completed_at, ...batchProgressPanelClassNames }) }, `batch-${message.details.batch_id}-${message.timestamp}`));
+                                    }
+                                    return (_jsx(TimelineEntry, { status: "message", children: _jsx(MessageErrorBoundary, { children: _jsx(MessageItem, { ...messageItemClassNames, message: message, showPulsatingCircle: isLatestMessage, onSendMessage: onSendMessage, requestInputAnswered: isRequestInputAnswered(message, answeredRequestInputKeys), cardClassName: cn('rounded-lg border border-border bg-background/60 shadow-none', messageItemClassNames?.cardClassName), headerClassName: cn('px-3 py-2', messageItemClassNames?.headerClassName), contentClassName: cn('bg-transparent', messageItemClassNames?.contentClassName), messageStyleOverrides: messageStyleOverrides, StoreLinkComponent: StoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent }) }) }, getAgentMessageRenderKey(message)));
+                                }
+                            }), incompleteStreaming.map(({ id, data }) => (_jsx(TimelineEntry, { children: _jsx(StreamingMessage, { ...streamingMessageClassNames, text: data.text, workstreamId: data.workstreamId, isComplete: data.isComplete, timestamp: data.startTimestamp, artifactRunId: artifactRunId, cardClassName: cn('rounded-lg border border-border bg-background/60 shadow-none', streamingMessageClassNames?.cardClassName) }) }, `streaming-incomplete-${id}`))), isAgentWorking && incompleteStreaming.length === 0 && !showInitialRequestWaitingCard && (_jsx(TimelineEntry, { children: _jsxs("div", { className: cn('flex items-center gap-2 py-2 text-sm text-muted', workingIndicatorClassName), children: [_jsx(PulsatingCircle, { size: "sm", color: "blue" }), _jsx("span", { children: t('agent.working') })] }) }))] })) : (_jsxs(_Fragment, { children: [summaryConversationItems.map((item) => {
+                                if (item.type === 'work') {
+                                    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
+                                            ? 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}`));
+                                }
+                                const message = item.message;
+                                if (shouldHideRequestInputMessage(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')));
+                            }), 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) => {
+    if (previous.type !== current.type)
+        return false;
+    if (previous.message !== current.message)
+        return false;
+    const prevDetails = previous.details;
+    const currDetails = current.details;
+    if (prevDetails?.tool_status !== 'completed' || currDetails?.tool_status !== 'completed')
+        return false;
+    const prevTs = typeof previous.timestamp === 'number' ? previous.timestamp : new Date(previous.timestamp).getTime();
+    const currTs = typeof current.timestamp === 'number' ? current.timestamp : new Date(current.timestamp).getTime();
+    return currTs - prevTs < 2000;
+};
+const AllMessagesMixed = React.memo(AllMessagesMixedComponent);
+export default AllMessagesMixed;
+//# sourceMappingURL=AllMessagesMixed.js.map