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

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

@@ -1,96 +1,1666 @@
-import { AgentMessage, AgentMessageType, BatchProgressDetails, Plan } from "@vertesia/common";
-import React, { useEffect, useMemo, useState, useRef, useCallback, Component, ReactNode } from "react";
-import { cn } from "@vertesia/ui/core";
-import { useUITranslation } from '../../../../i18n/index.js';
-import { i18nInstance, NAMESPACE } from '../../../../i18n/instance.js';
-import { PulsatingCircle } from "../AnimatedThinkingDots";
-export type AgentConversationViewMode = "stacked" | "sliding";
-import BatchProgressPanel, { type BatchProgressPanelClassNames } from "./BatchProgressPanel";
-import MessageItem, { type MessageItemClassNames, type MessageItemProps } from "./MessageItem";
-import StreamingMessage, { type StreamingMessageClassNames } from "./StreamingMessage";
-import ToolCallGroup, { type ToolCallGroupClassNames } from "./ToolCallGroup";
-import WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from "./WorkstreamTabs";
-import { DONE_STATES, getSlidingViewMessageBuckets, getWorkstreamId, groupMessagesWithStreaming, mergeConsecutiveToolGroups, RenderableGroup, shouldCollapseAdjacentRenderedMessage, StreamingData } from "./utils";
-import { ThinkingMessages } from "../WaitingMessages";
-
-/** Extended group that may carry preamble info (text from a preceding single/streaming message) */
-type RenderableGroupWithPreamble = RenderableGroup & {
-    preambleText?: string;
-    preambleMessage?: AgentMessage;
-    /** When true, this group was consumed as a preamble and should not render */
-    _consumed?: boolean;
+import {
+    type AgentMessage,
+    AgentMessageType,
+    type AskUserMessageDetails,
+    type BatchProgressDetails,
+    type JSONSchema,
+    type Plan,
+} 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, type MarkdownRendererProps } from '@vertesia/ui/widgets';
+import type { Element } from 'hast';
+import {
+    AlertTriangle,
+    Bot,
+    Brain,
+    CheckCircle,
+    ChevronDown,
+    ChevronRight,
+    CopyIcon,
+    FileText,
+    Pencil,
+    Search,
+    Terminal,
+    Wrench,
+} from 'lucide-react';
+import React, { Component, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AnimatedThinkingDots, PulsatingCircle } from '../AnimatedThinkingDots';
+import { AskUserWidget } from '../AskUserWidget';
+import { ThinkingMessages } from '../WaitingMessages';
+import {
+    formatWorkstreamName,
+    getWorkstreamDisplayName,
+    getWorkstreamLaunchDetails,
+    type WorkstreamLaunchDetails,
+} from '../workstreams.js';
+import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
+import BatchProgressPanel, { type BatchProgressPanelClassNames } from './BatchProgressPanel';
+import MessageItem, { type MessageItemClassNames, type MessageItemProps } from './MessageItem';
+import {
+    getAnsweredRequestInputKeys,
+    getPendingRequestInputMessage,
+    getRequestInputMessageKey,
+    isRequestInputAnswered,
+} from './requestInputMessages';
+import StreamingMessage, { type StreamingMessageClassNames } from './StreamingMessage';
+import {
+    buildSummaryConversationItems,
+    buildSummaryDisplayMessages,
+    getSummaryActivityAnchorTimestamp,
+    isInitialSummaryActivityFallback,
+    isTransientThinkingMessage,
+    isTransientWorkStatusMessage,
+    shouldShowSummaryActivityFallback,
+} from './SummaryConversation';
+import ToolCallGroup, { type ToolCallGroupClassNames } from './ToolCallGroup';
+import {
+    DONE_STATES,
+    getWorkstreamId,
+    groupMessagesWithStreaming,
+    isInProgress,
+    isToolPreambleMessage,
+    mergeConsecutiveToolGroups,
+    type RenderableGroup,
+    type StreamingData,
+    shouldCollapseAdjacentRenderedMessage,
+    type ToolExecutionStatus,
+} from './utils';
+import WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from './WorkstreamTabs';
+
+export type AgentConversationViewMode = 'stacked' | 'sliding';
+
+export interface AgentInitialRequestTemplateContext {
+    data: unknown;
+    schema?: JSONSchema | null;
+    title?: string;
+}
+
+export type AgentInitialRequestTemplate = (context: AgentInitialRequestTemplateContext) => React.ReactNode;
+
+// Check if message is a batch progress message
+const isBatchProgressMessage = (message: AgentMessage): message is AgentMessage & { details: BatchProgressDetails } => {
+    return message.type === AgentMessageType.BATCH_PROGRESS && !!message.details?.batch_id;
 };
 
-/** Message types that must never be consumed as preamble text */
-const NON_PREAMBLE_TYPES = new Set([
-    AgentMessageType.QUESTION,
-    AgentMessageType.COMPLETE,
-    AgentMessageType.IDLE,
-    AgentMessageType.TERMINATED,
-    AgentMessageType.ERROR,
-    AgentMessageType.REQUEST_INPUT,
-    AgentMessageType.BATCH_PROGRESS,
-]);
+function getTimestampMs(timestamp: number | string | undefined): number {
+    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: number | string | undefined): number {
+    const elapsed = Date.now() - getTimestampMs(timestamp);
+    return Math.max(0, Math.round(elapsed / 1000));
+}
+
+function getDurationSeconds(start: number | string | undefined, end: number | string | undefined): number {
+    const elapsed = getTimestampMs(end) - getTimestampMs(start);
+    return Math.max(0, Math.round(elapsed / 1000));
+}
+
+function formatDuration(seconds: number): string {
+    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: AgentMessage): string {
+    const details = message.details as
+        | {
+              display_role?: string;
+              tool?: string;
+              tools?: Array<string | { name?: string; tool?: string }>;
+          }
+        | undefined;
+    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: ToolExecutionStatus, isActive: boolean): string {
+    if (status === 'error') return 'Work needs attention';
+    if (status === 'warning') return 'Work had warnings';
+    return isActive ? 'Working' : 'Worked';
+}
+
+function isTransientThinkingWork(messages: AgentMessage[]): boolean {
+    return messages.length > 0 && messages.every(isTransientWorkStatusMessage);
+}
+
+function getSummaryActivityLabel(status: ToolExecutionStatus, isActive: boolean): string {
+    return getSummaryWorkLabel(status, isActive);
+}
+
+function hasOpenUserTurn(messages: AgentMessage[]): boolean {
+    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: AgentMessage): string {
+    if (!message.message) return '';
+    if (typeof message.message === 'object') return JSON.stringify(message.message, null, 2);
+    return String(message.message).trim();
+}
+
+interface SummaryMessageProps {
+    message: AgentMessage;
+    onSendMessage?: (message: string) => void;
+    requestInputAnswered?: boolean;
+    StoreLinkComponent?: React.ComponentType<{ href: string; documentId: string; children: React.ReactNode }>;
+    CollectionLinkComponent?: React.ComponentType<{ href: string; collectionId: string; children: React.ReactNode }>;
+}
+
+function SummaryWorkstreamLaunchMessage({
+    message,
+    details,
+}: {
+    message: AgentMessage;
+    details: WorkstreamLaunchDetails;
+}) {
+    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 (
+        <div className="mx-auto w-full max-w-3xl px-1" data-workstream-id={details.workstreamId}>
+            <div className="flex items-start gap-3 border-b border-border/70 py-2 text-sm text-muted">
+                <Bot className="mt-0.5 size-4 shrink-0 text-muted" aria-hidden="true" />
+                <div className="min-w-0 flex-1">
+                    <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+                        <span className="font-medium text-muted">{t('agent.workstreams')}</span>
+                        <span className="min-w-0 truncate text-foreground/85">{workstreamName}</span>
+                    </div>
+                    {secondaryName && <div className="mt-0.5 truncate text-xs text-muted/75">{secondaryName}</div>}
+                    <span className="sr-only">{getMessageText(message)}</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+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: MarkdownRendererProps['components'] = {
+    table: AgentMarkdownTable,
+};
+
+type HastTextNode = {
+    value?: unknown;
+    children?: unknown[];
+};
+
+function getHastText(node: unknown): string {
+    if (!node || typeof node !== 'object') return '';
+    const typedNode = node as HastTextNode;
+    if (typeof typedNode.value === 'string') return typedNode.value;
+    if (!Array.isArray(typedNode.children)) return '';
+    return typedNode.children.map(getHastText).join('');
+}
+
+function getElementChildren(node: unknown, tagName?: string): Element[] {
+    if (!node || typeof node !== 'object') return [];
+    const children = (node as { children?: unknown[] }).children;
+    if (!Array.isArray(children)) return [];
+    return children.filter((child): child is Element => {
+        if (!child || typeof child !== 'object') return false;
+        const childElement = child as Element;
+        return tagName ? childElement.tagName === tagName : typeof childElement.tagName === 'string';
+    });
+}
+
+function getTableRows(node?: Element): string[][] {
+    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?: Element): string[][] {
+    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?: Element): Set<number> {
+    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<number>();
+    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: number, min: number, max: number): number {
+    return Math.min(max, Math.max(min, value));
+}
+
+function getLongestTokenLength(values: string[]): number {
+    return values.reduce((longest, value) => {
+        const tokens = value.match(/\S+/g) || [];
+        return Math.max(longest, ...tokens.map((token) => token.length));
+    }, 0);
+}
+
+interface AgentMarkdownTableColumnLayout {
+    key: string;
+    compact: boolean;
+    width: string;
+}
+
+function getTableColumnLayouts(node?: Element): AgentMarkdownTableColumnLayout[] {
+    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
+}: React.TableHTMLAttributes<HTMLTableElement> & {
+    node?: Element;
+    children?: React.ReactNode;
+}) {
+    const columnLayouts = getTableColumnLayouts(node);
+
+    return (
+        <table {...props} className={className}>
+            {columnLayouts.length > 0 ? (
+                <colgroup>
+                    {columnLayouts.map((columnLayout) => (
+                        <col
+                            key={columnLayout.key}
+                            className={columnLayout.compact ? 'agent-markdown-table-compact-col' : undefined}
+                            style={
+                                {
+                                    '--agent-markdown-table-column-width': columnLayout.width,
+                                } as React.CSSProperties
+                            }
+                        />
+                    ))}
+                </colgroup>
+            ) : null}
+            {children}
+        </table>
+    );
+}
+
+function getReactNodeTextLength(node: React.ReactNode): number {
+    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 as { children?: React.ReactNode };
+        return getReactNodeTextLength(props.children);
+    }
+    return 0;
+}
+
+function useLiveElapsedSeconds(timestamp?: number | string, enabled?: boolean): number {
+    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): number {
+    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,
+}: {
+    children: React.ReactNode;
+    workstreamId?: string;
+    className?: string;
+    artifactRunId?: string;
+    markdownComponents?: MarkdownRendererProps['components'];
+}) {
+    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 (
+        <div className="mx-auto flex w-full max-w-3xl justify-end px-1">
+            <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}
+            >
+                <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%)]',
+                    )}
+                >
+                    {shouldRenderMarkdown ? (
+                        <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',
+                            )}
+                        >
+                            {textContent}
+                        </MarkdownRenderer>
+                    ) : (
+                        children
+                    )}
+                </div>
+                {shouldCollapse && (
+                    <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)}
+                    >
+                        {isExpanded ? t('agent.showLess') : t('agent.showMore')}
+                        <ChevronDown
+                            className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}
+                            aria-hidden="true"
+                        />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function SummaryMessage({
+    message,
+    onSendMessage,
+    requestInputAnswered = false,
+    StoreLinkComponent,
+    CollectionLinkComponent,
+}: SummaryMessageProps) {
+    const content = getMessageText(message);
+    const workstreamLaunchDetails = getWorkstreamLaunchDetails(message);
+    const workstreamId = getWorkstreamId(message);
+    const runId = (message as { workflow_run_id?: string }).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
+            }: {
+                node?: unknown;
+                ref?: unknown;
+                href?: string;
+                children?: React.ReactNode;
+            }) => {
+                const href = props.href || '';
+                if (href.includes('/store/objects')) {
+                    const documentId = href.split('/store/objects/')[1] || '';
+                    if (StoreLinkComponent) {
+                        return (
+                            <StoreLinkComponent href={href} documentId={documentId}>
+                                {props.children}
+                            </StoreLinkComponent>
+                        );
+                    }
+                    return (
+                        <NavLink href={href} topLevelNav>
+                            {props.children}
+                        </NavLink>
+                    );
+                }
+                if (href.includes('/store/collections')) {
+                    const collectionId = href.split('/store/collections/')[1] || '';
+                    if (CollectionLinkComponent) {
+                        return (
+                            <CollectionLinkComponent href={href} collectionId={collectionId}>
+                                {props.children}
+                            </CollectionLinkComponent>
+                        );
+                    }
+                    return (
+                        <NavLink href={href} topLevelNav>
+                            {props.children}
+                        </NavLink>
+                    );
+                }
+                return <a {...props} target="_blank" rel="noopener noreferrer" />;
+            },
+        }),
+        [StoreLinkComponent, CollectionLinkComponent],
+    );
+
+    if (workstreamLaunchDetails) {
+        return <SummaryWorkstreamLaunchMessage message={message} details={workstreamLaunchDetails} />;
+    }
+
+    if (message.type === AgentMessageType.QUESTION) {
+        const questionBody = parsedQuestion?.body ?? content;
+        const attachments = parsedQuestion?.attachments ?? [];
+
+        return (
+            <>
+                {attachments.length > 0 && (
+                    <div className="mx-auto flex w-full max-w-3xl justify-end px-1">
+                        <AttachmentPreviewList
+                            items={attachments}
+                            artifactRunId={runId}
+                            align="end"
+                            variant="message"
+                            StoreLinkComponent={StoreLinkComponent}
+                            CollectionLinkComponent={CollectionLinkComponent}
+                        />
+                    </div>
+                )}
+                {questionBody && (
+                    <SummaryUserBubble
+                        workstreamId={workstreamId}
+                        artifactRunId={runId}
+                        markdownComponents={markdownComponents}
+                    >
+                        {questionBody}
+                    </SummaryUserBubble>
+                )}
+            </>
+        );
+    }
+
+    const requestInputDetails = message.details as AskUserMessageDetails | undefined;
+    if (message.type === AgentMessageType.REQUEST_INPUT && requestInputDetails?.ux) {
+        const uxConfig = requestInputDetails.ux;
+        return (
+            <div className="mx-auto w-full max-w-3xl px-1">
+                <AskUserWidget
+                    question={content}
+                    options={uxConfig.options}
+                    variant={uxConfig.variant}
+                    multiSelect={uxConfig.multiSelect}
+                    onSelect={(optionId) => onSendMessage?.(optionId)}
+                    onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
+                    hideBorder
+                    compact
+                    answered={requestInputAnswered}
+                />
+            </div>
+        );
+    }
+
+    const isError = message.type === AgentMessageType.ERROR || message.type === AgentMessageType.WARNING;
+
+    return (
+        <div className="mx-auto w-full max-w-3xl px-1" data-workstream-id={workstreamId}>
+            {isError && (
+                <div className="mb-2 text-xs font-medium text-destructive">
+                    {message.type === AgentMessageType.WARNING ? 'Warning' : 'Error'}
+                </div>
+            )}
+            {content && (
+                <div
+                    className={cn(
+                        SUMMARY_PROSE_CLASS,
+                        isError && 'rounded-lg border border-destructive/20 bg-destructive/5 px-3 py-2',
+                    )}
+                    style={{ overflowWrap: 'anywhere' }}
+                >
+                    <MarkdownRenderer
+                        artifactRunId={runId}
+                        onProposalSelect={(optionId) => onSendMessage?.(optionId)}
+                        onProposalSubmit={(text) => onSendMessage?.(text)}
+                        components={markdownComponents}
+                    >
+                        {content}
+                    </MarkdownRenderer>
+                </div>
+            )}
+        </div>
+    );
+}
+
+function isRecordValue(value: unknown): value is Record<string, unknown> {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+function hasInitialRequestValue(value: unknown): boolean {
+    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 as Record<string, unknown>).length > 0;
+    return true;
+}
+
+function isRenderableNode(node: React.ReactNode): boolean {
+    if (node === null || node === undefined || node === false) return false;
+    if (typeof node === 'string') return node.trim().length > 0;
+    return true;
+}
+
+function getSchemaProperties(schema: JSONSchema | null | undefined): Record<string, JSONSchema> {
+    if (!schema || !isRecordValue(schema)) return {};
+    const properties = (schema as Record<string, unknown>).properties;
+    if (!isRecordValue(properties)) return {};
+    return properties as Record<string, JSONSchema>;
+}
+
+function getSchemaLabel(schema: JSONSchema | undefined, fallback: string): string {
+    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: unknown): string {
+    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: unknown): React.ReactNode {
+    if (value === null || value === undefined || value === '') {
+        return <span className="text-muted">Not provided</span>;
+    }
+    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    if (typeof value === 'number') return String(value);
+    if (typeof value === 'string') return <span className="whitespace-pre-wrap">{value}</span>;
+    if (Array.isArray(value) && value.every((item) => typeof item !== 'object' || item === null)) {
+        return value.map((item) => stringifyRequestValue(item)).join(', ');
+    }
+
+    return (
+        <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">
+            {stringifyRequestValue(value)}
+        </pre>
+    );
+}
+
+function renderDefaultInitialRequest(
+    data: unknown,
+    schema: JSONSchema | null | undefined,
+    title: string | undefined,
+): React.ReactNode {
+    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 (
+        <div className="space-y-2 text-start">
+            {title ? <div className="text-xs font-medium uppercase tracking-normal text-muted">{title}</div> : null}
+            <dl className="space-y-2">
+                {fields.map((field) => (
+                    <div key={field.key} className="grid gap-1 sm:grid-cols-[minmax(7rem,32%)_1fr] sm:gap-3">
+                        <dt className="text-xs font-medium text-muted">{field.label}</dt>
+                        <dd className="min-w-0 break-words text-sm text-foreground">
+                            {renderRequestValue(field.value)}
+                        </dd>
+                    </div>
+                ))}
+            </dl>
+        </div>
+    );
+}
+
+interface InitialRequestMessageProps {
+    data?: unknown;
+    schema?: JSONSchema | null;
+    title?: string;
+    template?: AgentInitialRequestTemplate;
+    prependFriendlyMessage?: string;
+    timestamp?: number | string;
+    isSummaryView: boolean;
+    messageItemClassNames?: MessageItemClassNames;
+    messageStyleOverrides?: MessageItemProps['messageStyleOverrides'];
+    StoreLinkComponent?: React.ComponentType<{ href: string; documentId: string; children: React.ReactNode }>;
+    CollectionLinkComponent?: React.ComponentType<{ href: string; collectionId: string; children: React.ReactNode }>;
+}
+
+function InitialRequestMessage({
+    data,
+    schema,
+    title,
+    template,
+    prependFriendlyMessage,
+    timestamp,
+    isSummaryView,
+    messageItemClassNames,
+    messageStyleOverrides,
+    StoreLinkComponent,
+    CollectionLinkComponent,
+}: InitialRequestMessageProps) {
+    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 ? (
+            <SummaryMessage
+                message={message}
+                StoreLinkComponent={StoreLinkComponent}
+                CollectionLinkComponent={CollectionLinkComponent}
+            />
+        ) : (
+            <MessageItem {...messageItemClassNames} messageStyleOverrides={messageStyleOverrides} message={message} />
+        );
+    }
+
+    const content = isRenderableNode(templateContent)
+        ? templateContent
+        : renderDefaultInitialRequest(data, schema, title);
+    if (!isRenderableNode(content)) return null;
+
+    return <SummaryUserBubble className="py-3">{content}</SummaryUserBubble>;
+}
+
+function InitialRequestWaitingCard({
+    label,
+    timestamp,
+    className,
+}: {
+    label: string;
+    timestamp?: number | string;
+    className?: string;
+}) {
+    const thinkingMessageIndex = useRotatingThinkingMessageIndex();
+    const elapsed = useLiveElapsedSeconds(timestamp, true);
+
+    return (
+        <div className={cn('mx-auto w-full max-w-3xl px-1', className)}>
+            <div className="border-b border-border/70 pb-4 text-sm text-muted">
+                <div className="flex items-center gap-3">
+                    <PulsatingCircle size="sm" color="blue" />
+                    <div className="min-w-0">
+                        <div>
+                            <span className="font-medium">{label}</span>
+                            <span className="ms-2 text-muted/75">for {formatDuration(elapsed)}</span>
+                        </div>
+                        <div className="mt-1 truncate text-muted/80">{ThinkingMessages[thinkingMessageIndex]}</div>
+                    </div>
+                </div>
+                <div className="mt-3 ps-6">
+                    <AnimatedThinkingDots color="blue" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+type SummaryToolDetailKind = 'search' | 'read' | 'edit' | 'command' | 'skill' | 'discover' | 'think' | 'tool';
+
+interface SummaryToolDetailSection {
+    key: string;
+    label: string;
+    value: unknown;
+    tone?: 'default' | 'error';
+}
+
+interface SummaryToolDetailItem {
+    key: string;
+    kind: SummaryToolDetailKind;
+    label: string;
+    title: string;
+    command?: string;
+    text?: string;
+    status?: ToolExecutionStatus;
+    sections: SummaryToolDetailSection[];
+}
+
+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: AgentMessage): Record<string, unknown> {
+    return isRecordValue(message.details) ? message.details : {};
+}
+
+function humanizeIdentifier(value: string): string {
+    return value
+        .replace(/[_-]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function getToolNames(details: Record<string, unknown>): string[] {
+    const names: string[] = [];
+    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: Record<string, unknown>): { key: string; value: string } | undefined {
+    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: AgentMessage): SummaryToolDetailKind {
+    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: SummaryToolDetailKind): string {
+    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: Record<string, unknown>): string | undefined {
+    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: string, maxLength = 160): string {
+    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: Record<string, unknown>): string | undefined {
+    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: AgentMessage, prefix = 'message'): string {
+    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: RenderableGroup): string {
+    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: unknown): string {
+    const text = stringifyRequestValue(value).trim();
+    return text.length > 2400 ? `${text.slice(0, 2400)}\n...` : text;
+}
+
+function createToolSection(
+    key: string,
+    label: string,
+    value: unknown,
+    tone?: SummaryToolDetailSection['tone'],
+): SummaryToolDetailSection | undefined {
+    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: Record<string, unknown>,
+    consumedKeys: Set<string>,
+): Record<string, unknown> | undefined {
+    const remaining = Object.entries(details).reduce<Record<string, unknown>>((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: AgentMessage): SummaryToolDetailSection[] {
+    const details = getDetailsRecord(message);
+    const consumedKeys = new Set<string>();
+    const sections: SummaryToolDetailSection[] = [];
+    const targetEntry = getToolTargetEntry(details);
+
+    const addSection = (label: string, keys: string[], tone?: SummaryToolDetailSection['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: AgentMessage, index: number): SummaryToolDetailItem | undefined {
+    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 as ToolExecutionStatus | undefined,
+        sections: getToolDetailSections(message),
+    };
+}
+
+function mergeSummaryToolMessages(messages: AgentMessage[]): AgentMessage[] {
+    const byGroupId = new Map<string, { index: number; messages: AgentMessage[] }>();
+    const ungrouped: Array<{ index: number; message: AgentMessage }> = [];
+
+    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: Record<string, unknown> = {};
+        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,
+            },
+        };
+    });
 
-/**
- * Scan grouped messages and attach preamble text to tool_groups.
- * When a single message (THOUGHT, UPDATE, ANSWER, etc.) immediately precedes
- * a tool_group, the text is attached as preamble and the single message is marked
- * as consumed so it doesn't render as a separate "Agent" box.
- */
-function attachPreambles(groups: RenderableGroup[]): RenderableGroupWithPreamble[] {
-    const result: RenderableGroupWithPreamble[] = groups.map(g => ({ ...g }));
-
-    for (let i = 1; i < result.length; i++) {
-        const current = result[i];
-        const prev = result[i - 1];
-
-        // Only attach preamble to tool_groups
-        if (current.type !== 'tool_group') continue;
-        // Previous must be a single message with text content
-        if (prev.type !== 'single' || prev._consumed) continue;
-
-        const msg = prev.message;
-        const text = typeof msg.message === 'string' ? msg.message.trim() : '';
-        if (!text) continue;
-
-        // Skip messages that are tool activity themselves (already part of tool groups)
-        const isToolActivity = msg.details?.tool || msg.details?.tools;
-        if (isToolActivity) continue;
-
-        // Skip terminal/interactive message types that should always render independently
-        if (NON_PREAMBLE_TYPES.has(msg.type)) continue;
-
-        // Attach as preamble
-        current.preambleText = text;
-        current.preambleMessage = msg;
-        prev._consumed = true;
+    return [...ungrouped, ...grouped].sort((a, b) => a.index - b.index).map(({ message }) => message);
+}
+
+function buildSummaryToolDetailItems(messages: AgentMessage[]): SummaryToolDetailItem[] {
+    const seen = new Set<string>();
+    const items: SummaryToolDetailItem[] = [];
+
+    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 }: { kind: SummaryToolDetailKind; status?: ToolExecutionStatus }) {
+    if (status === 'error' || status === 'warning') {
+        return <AlertTriangle className="size-3.5" />;
     }
 
-    // Filter out consumed groups
-    return result.filter(g => !g._consumed);
+    switch (kind) {
+        case 'search':
+            return <Search className="size-3.5" />;
+        case 'read':
+            return <FileText className="size-3.5" />;
+        case 'edit':
+            return <Pencil className="size-3.5" />;
+        case 'command':
+            return <Terminal className="size-3.5" />;
+        case 'skill':
+            return <Brain className="size-3.5" />;
+        case 'discover':
+            return <Wrench className="size-3.5" />;
+        case 'think':
+            return <Brain className="size-3.5" />;
+        default:
+            return <Wrench className="size-3.5" />;
+    }
 }
 
-// Replace %thinking_message% placeholder with actual thinking message
-const processThinkingPlaceholder = (text: string, thinkingMessageIndex: number): string => {
-    if (text.includes('%thinking_message%')) {
-        return text.replace(/%thinking_message%/g, ThinkingMessages[thinkingMessageIndex]);
+function ToolDetailSection({ section }: { section: SummaryToolDetailSection }) {
+    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 (
+            <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                {fileLabels.map((fileLabel) => (
+                    <span
+                        key={fileLabel}
+                        className="rounded-md bg-mixer-muted/15 px-1.5 py-0.5 font-mono text-[11px] text-muted"
+                    >
+                        {compactInlineText(fileLabel, 64)}
+                    </span>
+                ))}
+            </div>
+        );
     }
-    return text;
-};
 
-// Check if message is a batch progress message
-const isBatchProgressMessage = (message: AgentMessage): message is AgentMessage & { details: BatchProgressDetails } => {
-    return message.type === AgentMessageType.BATCH_PROGRESS && !!message.details?.batch_id;
-};
+    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 ? (
+            <div
+                className={cn(
+                    'break-words text-xs',
+                    section.tone === 'error' ? 'text-destructive' : 'text-foreground/75',
+                )}
+            >
+                {String(value)}
+            </div>
+        ) : (
+            <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',
+                )}
+            >
+                {formatToolSectionValue(value)}
+            </pre>
+        );
+
+    return (
+        <div className="mt-2">
+            {!hideLabel ? <div className={cn('mb-1', labelClassName)}>{section.label}</div> : null}
+            {content}
+        </div>
+    );
+}
+
+function getToolPanelTitle(item: SummaryToolDetailItem): string {
+    return item.kind === 'command' ? 'Shell' : item.label;
+}
+
+function formatToolPrimaryText(item: SummaryToolDetailItem): string {
+    if (item.kind !== 'command') return item.title;
+    const command = item.command || item.title;
+    return command.trim().startsWith('$') ? command : `$ ${command}`;
+}
+
+function formatToolDetailCopyText(item: SummaryToolDetailItem): string {
+    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: string): Promise<boolean> {
+    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 }: { item: SummaryToolDetailItem }) {
+    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' | 'copied' | 'failed'>('idle');
+    const copyResetRef = useRef<number | undefined>(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 (
+        <div className="relative mt-2 rounded-lg border border-border/70 bg-mixer-muted/10 p-3 shadow-sm">
+            <div className="absolute end-2 top-2">
+                <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"
+                >
+                    {copyState === 'copied' ? <CheckCircle className="size-4" /> : <CopyIcon className="size-4" />}
+                </button>
+            </div>
+            <div className="pe-7">
+                {commandText ? (
+                    <pre className="mb-3 whitespace-pre-wrap break-words font-mono text-sm leading-6 text-foreground/85">
+                        {commandText}
+                    </pre>
+                ) : null}
+                {fallbackText ? (
+                    <div className="mb-3 break-words text-sm leading-6 text-foreground/75">{fallbackText}</div>
+                ) : null}
+                {item.sections.length > 0 ? (
+                    <div className="space-y-3">
+                        {item.sections.map((section) => (
+                            <ToolDetailSection key={section.key} section={section} />
+                        ))}
+                    </div>
+                ) : null}
+            </div>
+            {copyState === 'failed' ? <div className="mt-3 text-xs text-destructive">Copy failed</div> : null}
+        </div>
+    );
+}
+
+function SummaryToolTimelineItem({ item }: { item: SummaryToolDetailItem }) {
+    const isAttention = item.status === 'error' || item.status === 'warning';
+    const hasDetails = Boolean(item.command || item.text || item.sections.length);
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    return (
+        <div className="min-w-0">
+            <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}
+            >
+                <span
+                    className={cn(
+                        'flex size-5 items-center justify-center pt-0.5',
+                        isAttention ? 'text-attention' : 'text-muted',
+                    )}
+                >
+                    <ToolDetailIcon kind={item.kind} status={item.status} />
+                </span>
+                <span className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+                    <span className="text-sm font-medium text-muted">{item.label}</span>
+                    <span className="min-w-0 break-words text-sm text-muted">{item.title}</span>
+                </span>
+                {hasDetails ? (
+                    <ChevronDown
+                        className={cn(
+                            'mt-0.5 size-4 shrink-0 text-muted opacity-50 transition-transform',
+                            !isExpanded && '-rotate-90',
+                        )}
+                        aria-hidden="true"
+                    />
+                ) : null}
+            </button>
+            {hasDetails && isExpanded ? (
+                <div className="mt-1">
+                    <SummaryToolDetailPanel item={item} />
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+function SummaryThoughtTimelineItem({ item, artifactRunId }: { item: SummaryToolDetailItem; artifactRunId?: string }) {
+    const text = item.text ?? item.title;
+
+    return (
+        <div className="min-w-0 py-1 text-sm leading-6 text-foreground/85">
+            <div className={SUMMARY_PROSE_CLASS} style={{ overflowWrap: 'anywhere' }}>
+                <MarkdownRenderer artifactRunId={artifactRunId} components={DEFAULT_AGENT_MARKDOWN_COMPONENTS}>
+                    {text}
+                </MarkdownRenderer>
+            </div>
+        </div>
+    );
+}
+
+function SummaryToolTimeline({ items, artifactRunId }: { items: SummaryToolDetailItem[]; artifactRunId?: string }) {
+    return (
+        <div className="mt-3">
+            <div className="space-y-3">
+                {items.map((item) =>
+                    item.kind === 'think' ? (
+                        <SummaryThoughtTimelineItem key={item.key} item={item} artifactRunId={artifactRunId} />
+                    ) : (
+                        <SummaryToolTimelineItem key={item.key} item={item} />
+                    ),
+                )}
+            </div>
+        </div>
+    );
+}
+
+function SummaryStreamingMessage({
+    text,
+    artifactRunId,
+    workstreamId,
+}: {
+    text: string;
+    artifactRunId?: string;
+    workstreamId?: string;
+}) {
+    return (
+        <div className="mx-auto w-full max-w-3xl px-1" data-workstream-id={workstreamId}>
+            <div className={SUMMARY_PROSE_CLASS} style={{ overflowWrap: 'anywhere' }}>
+                <MarkdownRenderer artifactRunId={artifactRunId} components={DEFAULT_AGENT_MARKDOWN_COMPONENTS}>
+                    {text}
+                </MarkdownRenderer>
+            </div>
+        </div>
+    );
+}
+
+function SummaryActivityRow({
+    label,
+    status,
+    timestamp,
+    durationSeconds,
+    showElapsed,
+    details,
+    emptyDetailsLabel,
+    defaultExpanded = false,
+    className,
+    artifactRunId,
+}: {
+    label: string;
+    status?: ToolExecutionStatus;
+    timestamp?: number | string;
+    durationSeconds?: number;
+    showElapsed?: boolean;
+    details?: AgentMessage[];
+    emptyDetailsLabel?: string;
+    defaultExpanded?: boolean;
+    className?: string;
+    artifactRunId?: string;
+}) {
+    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 (
+        <div className={cn('mx-auto w-full max-w-3xl px-1', className)}>
+            <div
+                className={cn('border-b border-border/70 pb-3 text-sm', isAttention ? 'text-attention' : 'text-muted')}
+            >
+                <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}
+                >
+                    <span className="min-w-0 truncate font-medium">{label}</span>
+                    {shouldShowElapsed ? (
+                        <span className="shrink-0 text-muted/75">for {formatDuration(elapsed)}</span>
+                    ) : null}
+                    {canExpand ? (
+                        isExpanded ? (
+                            <ChevronDown className="size-4 shrink-0 opacity-50" />
+                        ) : (
+                            <ChevronRight className="size-4 shrink-0 opacity-50" />
+                        )
+                    ) : null}
+                </button>
+                {canExpand && isExpanded ? (
+                    detailItems.length > 0 ? (
+                        <SummaryToolTimeline items={detailItems} artifactRunId={artifactRunId} />
+                    ) : (
+                        <div className="mt-3 flex items-center gap-2 text-sm text-muted">
+                            <Terminal className="size-4 opacity-70" aria-hidden="true" />
+                            <span>{emptyDetailsLabel}</span>
+                        </div>
+                    )
+                ) : null}
+            </div>
+        </div>
+    );
+}
+
+function TimelineEntry({ children, status }: { children: React.ReactNode; status?: ToolExecutionStatus | 'message' }) {
+    const dotClass =
+        status === 'error'
+            ? 'bg-destructive'
+            : status === 'warning'
+              ? 'bg-attention'
+              : status === 'completed'
+                ? 'bg-success'
+                : 'bg-muted';
+
+    return (
+        <div className="relative ps-7">
+            <div className="absolute start-2 top-0 bottom-0 w-px bg-border" />
+            <div className={cn('absolute start-[5px] top-4 size-2.5 rounded-full ring-4 ring-background', dotClass)} />
+            {children}
+        </div>
+    );
+}
 
 // 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<
-    { children: ReactNode },
-    { hasError: boolean; error?: Error }
-> {
+class MessageErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error?: Error }> {
     constructor(props: { children: ReactNode }) {
         super(props);
         this.state = { hasError: false };
@@ -112,11 +1682,11 @@ class MessageErrorBoundary extends Component<
     render() {
         if (this.state.hasError) {
             return (
-                <div className="border-l-4 border-l-destructive bg-destructive/10 px-4 py-2 my-2 rounded-r">
-                    <p className="text-sm text-destructive font-medium">{i18nInstance.getFixedT(null, NAMESPACE)('agent.failedToRenderMessage')}</p>
-                    <p className="text-xs text-muted mt-1 truncate">
-                        {this.state.error?.message || 'Unknown error'}
+                <div className="border-s-4 border-s-destructive bg-destructive/10 px-4 py-2 my-2 rounded-e">
+                    <p className="text-sm text-destructive font-medium">
+                        {i18nInstance.getFixedT(null, NAMESPACE)('agent.failedToRenderMessage')}
                     </p>
+                    <p className="text-xs text-muted mt-1 truncate">{this.state.error?.message || 'Unknown error'}</p>
                 </div>
             );
         }
@@ -133,7 +1703,7 @@ interface AllMessagesMixedProps {
     workstreamStatus?: Map<string, 'pending' | 'in_progress' | 'completed'>;
     showPlanPanel?: boolean;
     onTogglePlanPanel?: () => void;
-    plans?: Array<{ plan: Plan, timestamp: number }>;
+    plans?: Array<{ plan: Plan; timestamp: number }>;
     activePlanIndex?: number;
     onChangePlan?: (index: number) => void;
     taskLabels?: Map<string, string>; // Maps task IDs to more descriptive labels
@@ -166,8 +1736,20 @@ interface AllMessagesMixedProps {
     /** Optional message to display as the first user message in the conversation.
      *  Purely visual/UI — not sent to temporal. Renders as a QUESTION MessageItem before real messages. */
     prependFriendlyMessage?: string;
+    /** Optional structured request data to render as the first user entry in Summary/Details. */
+    initialRequestData?: unknown;
+    /** Optional schema used to turn structured request data into a readable first entry. */
+    initialRequestSchema?: JSONSchema | null;
+    /** Optional title for the structured request renderer. */
+    initialRequestTitle?: string;
+    /** Optional caller-provided renderer for agent-specific request shapes. */
+    initialRequestTemplate?: AgentInitialRequestTemplate;
     /** Message types to exclude from the conversation view */
     hiddenMessageTypes?: AgentMessageType[];
+    /** Test/playback mode: keep the current scroll position while the rendered message slice changes. */
+    disableAutoScroll?: boolean;
+    /** Whether REQUEST_INPUT messages render their active controls in the transcript. */
+    renderRequestInputControls?: boolean;
 }
 
 // PERFORMANCE: Throttle interval for auto-scroll (ms)
@@ -180,7 +1762,6 @@ function AllMessagesMixedComponent({
     isCompleted = false,
     streamingMessages = new Map(),
     onSendMessage,
-    thinkingMessageIndex = 0,
     messageItemClassNames,
     messageStyleOverrides,
     toolCallGroupClassNames,
@@ -194,7 +1775,13 @@ function AllMessagesMixedComponent({
     StoreLinkComponent,
     CollectionLinkComponent,
     prependFriendlyMessage,
+    initialRequestData,
+    initialRequestSchema,
+    initialRequestTitle,
+    initialRequestTemplate,
     hiddenMessageTypes,
+    disableAutoScroll = false,
+    renderRequestInputControls = true,
 }: AllMessagesMixedProps) {
     if (!artifactRunId) {
         console.warn('[AllMessagesMixed] artifactRunId prop is missing!');
@@ -202,7 +1789,7 @@ function AllMessagesMixedComponent({
 
     const { t } = useUITranslation();
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const [activeWorkstream, setActiveWorkstream] = useState<string>("all");
+    const [activeWorkstream, setActiveWorkstream] = useState<string>('all');
 
     // PERFORMANCE: Throttle auto-scroll to prevent layout thrashing
     // During streaming, scrollIntoView was being called 30+ times/sec
@@ -215,6 +1802,7 @@ function AllMessagesMixedComponent({
     const programmaticScrollRef = useRef<boolean>(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.
@@ -251,7 +1839,7 @@ function AllMessagesMixedComponent({
     const performScroll = useCallback(() => {
         if (bottomRef.current) {
             programmaticScrollRef.current = true;
-            bottomRef.current.scrollIntoView({ behavior: isStreaming ? "instant" : "smooth" });
+            bottomRef.current.scrollIntoView({ behavior: isStreaming ? 'instant' : 'smooth' });
             lastScrollTimeRef.current = Date.now();
             // Reset the programmatic flag after the browser processes the scroll
             requestAnimationFrame(() => {
@@ -265,6 +1853,10 @@ function AllMessagesMixedComponent({
     // 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;
 
@@ -287,38 +1879,35 @@ function AllMessagesMixedComponent({
                 scrollScheduledRef.current = null;
             }
         };
-    }, [messages.length, streamingMessages.size, streamingContentBucket, performScroll]);
+    }, [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 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: AgentMessage[] = [];
-            for (const msg of sorted) {
-                const previous = deduped[deduped.length - 1];
-                if (previous && shouldCollapseAdjacentRenderedMessage(previous, msg)) {
-                    continue;
-                }
+        const deduped: AgentMessage[] = [];
+        for (const msg of sorted) {
+            const previous = deduped[deduped.length - 1];
+            if (previous && shouldCollapseAdjacentRenderedMessage(previous, msg)) {
+                continue;
+            }
 
-                if (previous && shouldDedupeAdjacentCompletedToolMessage(previous, msg)) {
-                    continue;
-                }
-                deduped.push(msg);
+            if (previous && shouldDedupeAdjacentCompletedToolMessage(previous, msg)) {
+                continue;
             }
-            return deduped;
-        },
-        [messages, hiddenMessageTypes],
-    );
+            deduped.push(msg);
+        }
+        return deduped;
+    }, [messages, hiddenMessageTypes]);
 
     // Get workstreams from messages - only from message.workstream_id
     const workstreams = React.useMemo(() => {
@@ -334,16 +1923,16 @@ function AllMessagesMixedComponent({
     // Count messages per workstream
     const workstreamCounts = React.useMemo(() => {
         const counts = new Map<string, number>();
-        counts.set("all", sortedMessages.length);
+        counts.set('all', sortedMessages.length);
 
         // Count main messages
-        const mainMessages = filterMessagesByWorkstream(sortedMessages, "main");
-        counts.set("main", mainMessages.length);
+        const mainMessages = filterMessagesByWorkstream(sortedMessages, 'main');
+        counts.set('main', mainMessages.length);
 
         // Count other workstreams
         sortedMessages.forEach((msg) => {
             const workstreamId = getWorkstreamId(msg);
-            if (workstreamId !== "main") {
+            if (workstreamId !== 'main') {
                 counts.set(workstreamId, (counts.get(workstreamId) || 0) + 1);
             }
         });
@@ -353,17 +1942,54 @@ function AllMessagesMixedComponent({
 
     // Filter messages based on active workstream
     const displayMessages = React.useMemo(() => {
-        if (activeWorkstream === "all") {
+        if (activeWorkstream === 'all') {
             return sortedMessages;
         }
         return filterMessagesByWorkstream(sortedMessages, activeWorkstream);
     }, [sortedMessages, activeWorkstream]);
 
-    // Pre-compute important messages and recent thinking for sliding view (avoid IIFE in render)
-    const { importantMessages, recentThinking } = React.useMemo(
-        () => getSlidingViewMessageBuckets(displayMessages, isCompleted, streamingMessages.size > 0),
-        [displayMessages, isCompleted, streamingMessages.size],
+    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: AgentMessage) =>
+            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
@@ -373,22 +1999,16 @@ function AllMessagesMixedComponent({
     const { completeStreaming, incompleteStreaming } = React.useMemo(() => {
         const complete = new Map<string, StreamingData>();
         const incomplete: Array<{ id: string; data: StreamingData }> = [];
-        const newestMessageTimestamp = displayMessages.length > 0
-            ? Math.max(...displayMessages.map(msg =>
-                typeof msg.timestamp === "number" ? msg.timestamp : new Date(msg.timestamp).getTime()
-            ))
-            : -Infinity;
-
         streamingMessages.forEach((data, id) => {
             // Filter by workstream if specified
-            if (activeWorkstream && activeWorkstream !== "all") {
-                const streamWorkstream = data.workstreamId || "main";
+            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 <= newestMessageTimestamp;
+            const isStale = data.startTimestamp <= latestNonTransientDisplayMessageTimestamp;
             if (isStale) {
                 // Only interleave chronologically when a newer persisted message
                 // already exists — the streaming message is truly historical.
@@ -401,32 +2021,81 @@ function AllMessagesMixedComponent({
         });
 
         return { completeStreaming: complete, incompleteStreaming: incomplete };
-    }, [streamingMessages, activeWorkstream, displayMessages]);
+    }, [streamingMessages, activeWorkstream, latestNonTransientDisplayMessageTimestamp]);
 
-    // Group messages with ONLY complete streaming interleaved for stacked view
-    // Incomplete streaming is rendered separately at the end (avoids re-grouping on every chunk)
-    // Then attach preamble text from preceding reasoning messages to tool_groups
-    const groupedMessages = React.useMemo(
-        () => attachPreambles(mergeConsecutiveToolGroups(groupMessagesWithStreaming(displayMessages, completeStreaming, activeWorkstream))),
-        [displayMessages, completeStreaming, activeWorkstream]
+    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 important messages with ONLY complete streaming interleaved for sliding view
-    const groupedImportantMessages = React.useMemo(
-        () => attachPreambles(mergeConsecutiveToolGroups(groupMessagesWithStreaming(importantMessages, completeStreaming, activeWorkstream))),
-        [importantMessages, completeStreaming, activeWorkstream]
+    // 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 working indicator when agent is actively processing
+    // 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(() => {
-        if (isCompleted) return false;
-        // Agent is working if there are streaming messages, recent thinking, or no final answer yet
-        return streamingMessages.size > 0 || recentThinking.length > 0 || !displayMessages.some(msg =>
-            msg.type === AgentMessageType.COMPLETE ||
-            msg.type === AgentMessageType.IDLE ||
-            msg.type === AgentMessageType.TERMINATED
-        );
-    }, [isCompleted, streamingMessages.size, recentThinking.length, displayMessages]);
+        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<number | string>(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(() => {
@@ -435,7 +2104,7 @@ function AllMessagesMixedComponent({
         // Group messages by workstream
         const workstreamMessages = new Map<string, AgentMessage[]>();
 
-        sortedMessages.forEach(message => {
+        sortedMessages.forEach((message) => {
             const workstreamId = getWorkstreamId(message);
             if (!workstreamMessages.has(workstreamId)) {
                 workstreamMessages.set(workstreamId, []);
@@ -446,14 +2115,23 @@ function AllMessagesMixedComponent({
         // 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)) {
+                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 as Record<string, unknown>;
-                        return d.workstream_event === 'completed' || d.status === 'completed' || d.status === 'canceled';
+                        return (
+                            d.workstream_event === 'completed' || d.status === 'completed' || d.status === 'canceled'
+                        );
                     }
                     return false;
                 });
@@ -467,9 +2145,13 @@ function AllMessagesMixedComponent({
     return (
         <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}
         >
             {/* Global styles for vprose markdown content */}
             <style>{`
@@ -482,41 +2164,44 @@ function AllMessagesMixedComponent({
                 .vprose > h3 + * {
                     margin-top: 0.375rem;
                 }
-                /* Tables need more separation and better styling */
+                /* 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: 1px solid var(--gray-6, #e5e7eb);
+                    border: 0;
+                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+                    background: transparent;
                     text-align: left;
                 }
                 .vprose thead th {
-                    background-color: var(--gray-3, #f3f4f6);
+                    background: transparent;
                     font-weight: 600;
-                    color: var(--gray-11, #6b7280);
+                    color: var(--muted);
                     font-size: 0.75rem;
-                    text-transform: uppercase;
-                    letter-spacing: 0.05em;
+                    text-transform: none;
+                    letter-spacing: 0;
                 }
                 .vprose tbody tr:hover {
-                    background-color: var(--gray-2, #f9fafb);
+                    background: transparent;
                 }
                 /* Dark mode table styles */
                 .dark .vprose th,
                 .dark .vprose td {
-                    border-color: var(--gray-7, #374151);
+                    border-color: color-mix(in oklch, var(--border) 70%, transparent);
                 }
                 .dark .vprose thead th {
-                    background-color: var(--gray-4, #1f2937);
-                    color: var(--gray-11, #9ca3af);
+                    background: transparent;
+                    color: var(--muted);
                 }
                 .dark .vprose tbody tr:hover {
-                    background-color: var(--gray-3, #111827);
+                    background: transparent;
                 }
                 /* Horizontal rules as section dividers */
                 .vprose hr {
@@ -549,42 +2234,244 @@ function AllMessagesMixedComponent({
                 .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;
+                }
             `}</style>
 
-            {/* Workstream tabs with completion indicators */}
-            <div className={cn("sticky top-0 z-10", hideWorkstreamTabs && "hidden")}>
-                <WorkstreamTabs
-                    workstreams={workstreams}
-                    activeWorkstream={activeWorkstream}
-                    onSelectWorkstream={setActiveWorkstream}
-                    count={workstreamCounts}
-                    completionStatus={workstreamCompletionStatus}
-                />
-            </div>
+            {/* Workstream tabs are a debug affordance; Summary keeps the conversation surface quiet. */}
+            {viewMode === 'stacked' && (
+                <div className={cn('sticky top-0 z-10', hideWorkstreamTabs && 'hidden')}>
+                    <WorkstreamTabs
+                        workstreams={workstreams}
+                        activeWorkstream={activeWorkstream}
+                        onSelectWorkstream={setActiveWorkstream}
+                        count={workstreamCounts}
+                        completionStatus={workstreamCompletionStatus}
+                    />
+                </div>
+            )}
 
-            {displayMessages.length === 0 ? (
-                <div className="flex items-center justify-center h-full text-center py-8">
-                    <div className="flex items-center px-3 py-2 text-sm text-muted">
-                        {activeWorkstream === "all"
-                            ? t('agent.waitingForAgentResponse')
-                            : t('agent.noMessagesInWorkstream')}
+            {displayMessages.length === 0 && !hasInitialRequest && !(isSummaryView && showActivityFallback) ? (
+                activeWorkstream === 'all' && isAgentWorking && incompleteStreaming.length === 0 ? (
+                    <div className="flex-1 px-2 py-6 sm:px-4">
+                        <InitialRequestWaitingCard
+                            label={t('agent.preparing')}
+                            timestamp={fallbackWorkingStartedAtRef.current}
+                            className={workingIndicatorClassName}
+                        />
                     </div>
-                </div>
+                ) : (
+                    <div className="flex items-center justify-center h-full text-center py-8">
+                        <div className="flex items-center px-3 py-2 text-sm text-muted">
+                            {activeWorkstream === 'all'
+                                ? t('agent.waitingForAgentResponse')
+                                : t('agent.noMessagesInWorkstream')}
+                        </div>
+                    </div>
+                )
             ) : (
-                <div className={cn("flex-1 flex flex-col justify-start pb-4 space-y-2 w-full max-w-full", messageListClassName)}>
+                <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,
+                    )}
+                >
                     {/* Friendly message — rendered outside the messages array to avoid memo issues/triggering autoscroll */}
-                    {prependFriendlyMessage && (
-                        <MessageItem
-                            key={prependFriendlyMessage}
-                            {...messageItemClassNames}
+                    {shouldRenderInitialRequest && (
+                        <InitialRequestMessage
+                            key="initial-request"
+                            data={initialRequestData}
+                            schema={initialRequestSchema}
+                            title={initialRequestTitle}
+                            template={initialRequestTemplate}
+                            prependFriendlyMessage={prependFriendlyMessage}
+                            timestamp={displayMessages[0]?.timestamp ?? Date.now()}
+                            isSummaryView={isSummaryView}
+                            messageItemClassNames={messageItemClassNames}
                             messageStyleOverrides={messageStyleOverrides}
-                            message={{
-                                type: AgentMessageType.QUESTION,
-                                message: prependFriendlyMessage,
-                                timestamp: displayMessages[0]?.timestamp ?? Date.now(),
-                                workflow_run_id: "",
-                                workstream_id: "main",
-                            }}
+                            StoreLinkComponent={StoreLinkComponent}
+                            CollectionLinkComponent={CollectionLinkComponent}
+                        />
+                    )}
+                    {showInitialRequestWaitingCard && (
+                        <InitialRequestWaitingCard
+                            label={summaryActivityFallbackLabel}
+                            timestamp={activityStartedTimestamp}
+                            className={workingIndicatorClassName}
                         />
                     )}
                     {/* Show either all messages or just sliding view depending on viewMode */}
@@ -598,52 +2485,74 @@ function AllMessagesMixedComponent({
                                     // 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 &&
+                                        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 (
-                                        <MessageErrorBoundary key={`group-${group.toolRunId || group.firstTimestamp}-${groupIndex}`}>
-                                            <ToolCallGroup
-                                                messages={group.messages}
-                                                showPulsatingCircle={isLatest}
-                                                toolRunId={group.toolRunId}
-                                                toolStatus={group.toolStatus}
-                                                preambleText={group.preambleText}
-                                                preambleMessage={group.preambleMessage}
-                                                {...toolCallGroupClassNames}
-                                            />
-                                        </MessageErrorBoundary>
+                                        <TimelineEntry key={getRenderableGroupKey(group)} status={group.toolStatus}>
+                                            <MessageErrorBoundary>
+                                                <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,
+                                                    )}
+                                                />
+                                            </MessageErrorBoundary>
+                                        </TimelineEntry>
                                     );
                                 } else if (group.type === 'streaming') {
                                     // Render streaming message - no error boundary to avoid interrupting streaming
                                     return (
-                                        <StreamingMessage
-                                            key={`streaming-${group.streamingId}-${groupIndex}`}
-                                            text={group.text}
-                                            workstreamId={group.workstreamId}
-                                            isComplete={group.isComplete}
-                                            timestamp={group.startTimestamp}
-                                            artifactRunId={artifactRunId}
-                                            {...streamingMessageClassNames}
-                                        />
+                                        <TimelineEntry key={getRenderableGroupKey(group)}>
+                                            <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,
+                                                )}
+                                            />
+                                        </TimelineEntry>
                                     );
                                 } else {
                                     // Render single message
                                     const message = group.message;
-                                    const isLatestMessage = !isCompleted &&
-                                        isLastGroup &&
-                                        !DONE_STATES.includes(message.type);
+                                    if (shouldHideRequestInputMessage(message)) return null;
+                                    const isLatestMessage =
+                                        !isCompleted && isLastGroup && !DONE_STATES.includes(message.type);
 
                                     // Special handling for batch progress messages
                                     if (isBatchProgressMessage(message)) {
                                         return (
-                                            <MessageErrorBoundary key={`batch-${message.details.batch_id}-${message.timestamp}-${groupIndex}`}>
+                                            <MessageErrorBoundary
+                                                key={`batch-${message.details.batch_id}-${message.timestamp}`}
+                                            >
                                                 <BatchProgressPanel
                                                     message={message}
                                                     batchData={message.details}
@@ -655,153 +2564,145 @@ function AllMessagesMixedComponent({
                                     }
 
                                     return (
-                                        <MessageErrorBoundary key={`${message.timestamp}-${groupIndex}`}>
-                                            <MessageItem
-                                                message={message}
-                                                showPulsatingCircle={isLatestMessage}
-                                                onSendMessage={onSendMessage}
-                                                {...messageItemClassNames}
-                                                messageStyleOverrides={messageStyleOverrides}
-                                                StoreLinkComponent={StoreLinkComponent}
-                                                CollectionLinkComponent={CollectionLinkComponent}
-                                            />
-                                        </MessageErrorBoundary>
+                                        <TimelineEntry key={getAgentMessageRenderKey(message)} status="message">
+                                            <MessageErrorBoundary>
+                                                <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}
+                                                />
+                                            </MessageErrorBoundary>
+                                        </TimelineEntry>
                                     );
                                 }
                             })}
                             {/* Incomplete streaming - no error boundary to avoid interrupting streaming */}
                             {incompleteStreaming.map(({ id, data }) => (
-                                <StreamingMessage
-                                    key={`streaming-incomplete-${id}`}
-                                    text={data.text}
-                                    workstreamId={data.workstreamId}
-                                    isComplete={data.isComplete}
-                                    timestamp={data.startTimestamp}
-                                    artifactRunId={artifactRunId}
-                                    {...streamingMessageClassNames}
-                                />
+                                <TimelineEntry key={`streaming-incomplete-${id}`}>
+                                    <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,
+                                        )}
+                                    />
+                                </TimelineEntry>
                             ))}
                             {/* Working indicator - shows agent is actively processing */}
-                            {isAgentWorking && incompleteStreaming.length === 0 && (
-                                <div className={cn("flex items-center gap-2 pl-3 py-1.5 border-l-2 border-l-purple-500", workingIndicatorClassName)}>
-                                    <PulsatingCircle size="sm" color="blue" />
-                                    <span className="text-xs text-muted">{t('agent.working')}</span>
-                                </div>
+                            {isAgentWorking && incompleteStreaming.length === 0 && !showInitialRequestWaitingCard && (
+                                <TimelineEntry>
+                                    <div
+                                        className={cn(
+                                            'flex items-center gap-2 py-2 text-sm text-muted',
+                                            workingIndicatorClassName,
+                                        )}
+                                    >
+                                        <PulsatingCircle size="sm" color="blue" />
+                                        <span>{t('agent.working')}</span>
+                                    </div>
+                                </TimelineEntry>
                             )}
                         </>
                     ) : (
-                        // Most Important view - main messages + streaming interleaved
+                        // Summary view - conversation turns with per-turn work disclosure
                         <>
-                            {groupedImportantMessages.map((group, groupIndex) => {
-                                const isLastGroup = groupIndex === groupedImportantMessages.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 &&
-                                        recentThinking.length === 0 &&
-                                        isLastGroup &&
-                                        !DONE_STATES.includes(lastMessage.type) &&
-                                        !isTerminalToolStatus;
-
+                            {summaryConversationItems.map((item) => {
+                                if (item.type === 'work') {
                                     if (hideToolCallsInViewMode?.includes(viewMode)) return null;
+                                    const isThinkingOnlyWork = isTransientThinkingWork(item.messages);
+
                                     return (
-                                        <MessageErrorBoundary key={`group-${group.toolRunId || group.firstTimestamp}-${groupIndex}`}>
-                                            <ToolCallGroup
-                                                messages={group.messages}
-                                                showPulsatingCircle={isLatest}
-                                                toolRunId={group.toolRunId}
-                                                toolStatus={group.toolStatus}
-                                                preambleText={group.preambleText}
-                                                preambleMessage={group.preambleMessage}
-                                                {...toolCallGroupClassNames}
-                                            />
-                                        </MessageErrorBoundary>
-                                    );
-                                } else if (group.type === 'streaming') {
-                                    // Render streaming message - no error boundary to avoid interrupting streaming
-                                    return (
-                                        <StreamingMessage
-                                            key={`streaming-${group.streamingId}-${groupIndex}`}
-                                            text={group.text}
-                                            workstreamId={group.workstreamId}
-                                            isComplete={group.isComplete}
-                                            timestamp={group.startTimestamp}
-                                            artifactRunId={artifactRunId}
-                                            {...streamingMessageClassNames}
+                                        <SummaryActivityRow
+                                            key={`work-${item.id}-${item.isActive ? 'active' : 'done'}-${item.status}`}
+                                            label={getSummaryActivityLabel(item.status, item.isActive)}
+                                            status={item.status}
+                                            timestamp={item.startTimestamp}
+                                            durationSeconds={
+                                                item.isActive
+                                                    ? undefined
+                                                    : getDurationSeconds(item.startTimestamp, item.endTimestamp)
+                                            }
+                                            showElapsed
+                                            details={isThinkingOnlyWork ? undefined : item.messages}
+                                            defaultExpanded={item.isActive && !isThinkingOnlyWork}
+                                            className={workingIndicatorClassName}
                                         />
                                     );
-                                } else {
-                                    // Render single message
-                                    const message = group.message;
-                                    const isLatestMessage = !isCompleted &&
-                                        recentThinking.length === 0 &&
-                                        isLastGroup &&
-                                        !DONE_STATES.includes(message.type);
-
-                                    // Special handling for batch progress messages
-                                    if (isBatchProgressMessage(message)) {
-                                        return (
-                                            <MessageErrorBoundary key={`batch-${message.details.batch_id}-${message.timestamp}-${groupIndex}`}>
-                                                <BatchProgressPanel
-                                                    message={message}
-                                                    batchData={message.details}
-                                                    isRunning={!message.details.completed_at}
-                                                    {...batchProgressPanelClassNames}
-                                                />
-                                            </MessageErrorBoundary>
-                                        );
-                                    }
+                                }
 
+                                const message = item.message;
+                                if (shouldHideRequestInputMessage(message)) return null;
+                                if (isBatchProgressMessage(message)) {
                                     return (
-                                        <MessageErrorBoundary key={`${message.timestamp}-${groupIndex}`}>
-                                            <MessageItem
+                                        <MessageErrorBoundary key={getAgentMessageRenderKey(message, 'batch')}>
+                                            <BatchProgressPanel
                                                 message={message}
-                                                showPulsatingCircle={isLatestMessage}
-                                                onSendMessage={onSendMessage}
-                                                {...messageItemClassNames}
-                                                messageStyleOverrides={messageStyleOverrides}
-                                                StoreLinkComponent={StoreLinkComponent}
-                                                CollectionLinkComponent={CollectionLinkComponent}
+                                                batchData={message.details}
+                                                isRunning={!message.details.completed_at}
+                                                {...batchProgressPanelClassNames}
                                             />
                                         </MessageErrorBoundary>
                                     );
                                 }
+
+                                return (
+                                    <MessageErrorBoundary key={getAgentMessageRenderKey(message, 'summary')}>
+                                        <SummaryMessage
+                                            message={message}
+                                            onSendMessage={onSendMessage}
+                                            requestInputAnswered={isRequestInputAnswered(
+                                                message,
+                                                answeredRequestInputKeys,
+                                            )}
+                                            StoreLinkComponent={StoreLinkComponent}
+                                            CollectionLinkComponent={CollectionLinkComponent}
+                                        />
+                                    </MessageErrorBoundary>
+                                );
                             })}
-                            {/* Recent thinking messages - displayed with streaming reveal */}
-                            {recentThinking.map((thinking, idx) => (
-                                <StreamingMessage
-                                    key={`thinking-${thinking.timestamp}-${idx}`}
-                                    text={processThinkingPlaceholder(thinking.message || '', thinkingMessageIndex)}
-                                    workstreamId={getWorkstreamId(thinking)}
-                                    isComplete={idx < recentThinking.length - 1} // Only latest is still "streaming"
-                                    timestamp={thinking.timestamp}
-                                    artifactRunId={artifactRunId}
-                                    {...streamingMessageClassNames}
-                                />
-                            ))}
                             {/* Incomplete streaming - no error boundary to avoid interrupting streaming */}
                             {incompleteStreaming.map(({ id, data }) => (
-                                <StreamingMessage
+                                <SummaryStreamingMessage
                                     key={`streaming-incomplete-${id}`}
                                     text={data.text}
                                     workstreamId={data.workstreamId}
-                                    isComplete={data.isComplete}
-                                    timestamp={data.startTimestamp}
                                     artifactRunId={artifactRunId}
-                                    {...streamingMessageClassNames}
                                 />
                             ))}
-                            {/* Working indicator - shows agent is actively processing */}
-                            {isAgentWorking && recentThinking.length === 0 && incompleteStreaming.length === 0 && (
-                                <div className={cn("flex items-center gap-2 pl-3 py-1.5 border-l-2 border-l-purple-500", workingIndicatorClassName)}>
-                                    <PulsatingCircle size="sm" color="blue" />
-                                    <span className="text-xs text-muted">{t('agent.working')}</span>
-                                </div>
+                            {/* Activity fallback - shown before any tool/thought message has arrived */}
+                            {showActivityFallback && !showInitialRequestWaitingCard && (
+                                <SummaryActivityRow
+                                    label={summaryActivityFallbackLabel}
+                                    status="running"
+                                    timestamp={activityStartedTimestamp}
+                                    showElapsed
+                                    className={workingIndicatorClassName}
+                                />
                             )}
                         </>
                     )}
@@ -818,10 +2719,10 @@ const shouldDedupeAdjacentCompletedToolMessage = (previous: AgentMessage, curren
 
     const prevDetails = previous.details as { tool_status?: string } | undefined;
     const currDetails = current.details as { tool_status?: string } | undefined;
-    if (prevDetails?.tool_status !== "completed" || currDetails?.tool_status !== "completed") return false;
+    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();
+    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;
 };