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

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

@@ -1,14 +1,16 @@
 import {
     type AgentMessage,
     AgentMessageType,
+    type AgentResourceReference,
     type AskUserMessageDetails,
     type BatchProgressDetails,
+    getResourcesFromMessage,
     type JSONSchema,
     type Plan,
 } from '@vertesia/common';
 import { Badge, Button, cn, VTooltip } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
-import { NavLink } from '@vertesia/ui/router';
+import { useRouterContext } from '@vertesia/ui/router';
 import { MarkdownRenderer, type MarkdownRendererProps } from '@vertesia/ui/widgets';
 import type { Element } from 'hast';
 import {
@@ -29,6 +31,7 @@ import {
 import React, { Component, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatedThinkingDots, PulsatingCircle } from '../AnimatedThinkingDots';
 import { AskUserWidget } from '../AskUserWidget';
+import { DocumentEditingActionCard, parseMarkdownEditingAction } from '../DocumentEditingActionCard.js';
 import { ThinkingMessages } from '../WaitingMessages';
 import {
     formatWorkstreamName,
@@ -37,10 +40,19 @@ import {
     getWorkstreamLaunchDetails,
     type WorkstreamLaunchDetails,
 } from '../workstreams.js';
+import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
 import BatchProgressPanel, { type BatchProgressPanelClassNames } from './BatchProgressPanel';
+import {
+    AGENT_LINE_CLAMP_CLASS,
+    AGENT_PROSE_CLASS as SUMMARY_PROSE_CLASS,
+    AGENT_COLLAPSE_LINES as SUMMARY_THOUGHT_COLLAPSE_LINES,
+    AGENT_COLLAPSE_THRESHOLD as SUMMARY_THOUGHT_COLLAPSE_THRESHOLD,
+} from './CollapsibleAgentMarkdown.js';
 import { getMessageDeliveryStatus, MessageDeliveryStatus } from './MessageDeliveryStatus';
 import MessageItem, { type MessageItemClassNames, type MessageItemProps } from './MessageItem';
+import { ResourceChangeSummary } from './ResourceChangeSummary';
+import { ResourceActivityLinkList } from './ResourceChip';
 import {
     getAnsweredRequestInputKeys,
     getAnsweredToolApprovalRequestInputKeys,
@@ -49,6 +61,7 @@ import {
     getRequestInputDisplayText,
     getRequestInputMessageKey,
     getResolvedToolApprovalKeys,
+    getToolApprovalResponseMetadata,
     hasRequestInputUx,
     isRequestInputAnswered,
     isToolApprovalAnswerHidden,
@@ -56,6 +69,12 @@ import {
     isToolApprovalRequestInputHidden,
     type RequestInputMessageWithUx,
 } from './requestInputMessages';
+import {
+    interleaveTurnSummaries,
+    isResourceSummaryReady,
+    type ResourceSummaryRenderItem,
+    segmentTurnResources,
+} from './resourceSummary';
 import StreamingMessage, { type StreamingMessageClassNames } from './StreamingMessage';
 import {
     buildSummaryConversationItems,
@@ -282,6 +301,7 @@ function getMessageText(message: AgentMessage): string {
 interface SummaryMessageProps {
     message: AgentMessage;
     onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
+    onOpenArtifact?: (path: string) => void;
     onSelectWorkstream?: (workstreamId: string) => void;
     requestInputAnswered?: boolean;
     StoreLinkComponent?: React.ComponentType<{ href: string; documentId: string; children: React.ReactNode }>;
@@ -329,17 +349,7 @@ function SummaryWorkstreamLaunchMessage({
     );
 }
 
-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 SUMMARY_THOUGHT_COLLAPSE_LINES = 6;
-const SUMMARY_THOUGHT_COLLAPSE_THRESHOLD = 520;
 const STORE_LINK_MARKDOWN_RE =
     /\[[^\]]+\]\((?:\/store\/(?:objects|collections)\/|store:|document:|document:\/\/|collection:)[^)]+\)/;
 const DEFAULT_AGENT_MARKDOWN_COMPONENTS: MarkdownRendererProps['components'] = {
@@ -560,6 +570,7 @@ function SummaryUserBubble({
     workstreamId,
     className,
     artifactRunId,
+    onOpenArtifact,
     markdownComponents,
 }: {
     children: React.ReactNode;
@@ -567,6 +578,7 @@ function SummaryUserBubble({
     workstreamId?: string;
     className?: string;
     artifactRunId?: string;
+    onOpenArtifact?: (path: string) => void;
     markdownComponents?: MarkdownRendererProps['components'];
 }) {
     const { t } = useUITranslation();
@@ -606,6 +618,7 @@ function SummaryUserBubble({
                     {shouldRenderMarkdown ? (
                         <MarkdownRenderer
                             artifactRunId={artifactRunId}
+                            onArtifactOpen={onOpenArtifact}
                             components={markdownComponents}
                             className={cn(
                                 'agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/90',
@@ -646,11 +659,13 @@ function SummaryUserBubble({
 function SummaryMessage({
     message,
     onSendMessage,
+    onOpenArtifact,
     onSelectWorkstream,
     requestInputAnswered = false,
     StoreLinkComponent,
     CollectionLinkComponent,
 }: SummaryMessageProps) {
+    const { router } = useRouterContext();
     const content =
         message.type === AgentMessageType.REQUEST_INPUT ? getRequestInputDisplayText(message) : getMessageText(message);
     const workstreamLaunchDetails = getWorkstreamLaunchDetails(message) ?? getWorkstreamActivityDetails(message);
@@ -660,55 +675,24 @@ function SummaryMessage({
         () => (message.type === AgentMessageType.QUESTION ? parseUserMessageAttachments(content) : null),
         [content, message.type],
     );
+    const editingAction = useMemo(
+        () =>
+            message.type === AgentMessageType.QUESTION
+                ? parseMarkdownEditingAction(message.details?.editing_action)
+                : undefined,
+        [message.details, 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" />;
-            },
+            a: createAgentMarkdownAnchor({
+                StoreLinkComponent,
+                CollectionLinkComponent,
+                addStickyParams: (href: string) => router.getTopRouter().navigator.addStickyParams(href),
+            }),
         }),
-        [StoreLinkComponent, CollectionLinkComponent],
+        [StoreLinkComponent, CollectionLinkComponent, router],
     );
 
     if (workstreamLaunchDetails) {
@@ -732,6 +716,7 @@ function SummaryMessage({
                         <AttachmentPreviewList
                             items={attachments}
                             artifactRunId={runId}
+                            onOpenArtifact={onOpenArtifact}
                             align="end"
                             variant="message"
                             StoreLinkComponent={StoreLinkComponent}
@@ -744,9 +729,13 @@ function SummaryMessage({
                         message={message}
                         workstreamId={workstreamId}
                         artifactRunId={runId}
+                        onOpenArtifact={onOpenArtifact}
                         markdownComponents={markdownComponents}
+                        // Comments/edits are user actions: keep the user-message background and end
+                        // alignment, just give the card a little more room for tables and diffs.
+                        className={editingAction ? 'max-w-[min(44rem,90%)]' : undefined}
                     >
-                        {questionBody}
+                        {editingAction ? <DocumentEditingActionCard action={editingAction} /> : questionBody}
                     </SummaryUserBubble>
                 )}
             </>
@@ -763,7 +752,9 @@ function SummaryMessage({
                     options={uxConfig.options}
                     variant={uxConfig.variant}
                     multiSelect={uxConfig.multiSelect}
-                    onSelect={(optionId) => onSendMessage?.(optionId)}
+                    onSelect={(optionId) =>
+                        onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                    }
                     onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                     allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
                     placeholder={uxConfig.free_response?.placeholder}
@@ -796,6 +787,7 @@ function SummaryMessage({
                 >
                     <MarkdownRenderer
                         artifactRunId={runId}
+                        onArtifactOpen={onOpenArtifact}
                         onProposalSelect={(optionId) => onSendMessage?.(optionId)}
                         onProposalSubmit={(text) => onSendMessage?.(text)}
                         components={markdownComponents}
@@ -1025,6 +1017,8 @@ interface SummaryToolDetailItem {
     finishedAt?: number | string;
     status?: ToolExecutionStatus;
     decisionText?: string;
+    resources: AgentResourceReference[];
+    workflowRunId?: string;
     sections: SummaryToolDetailSection[];
 }
 
@@ -1040,6 +1034,7 @@ const TOOL_DETAIL_SYSTEM_KEYS = new Set([
     'collection_id',
     'document_id',
     'display_role',
+    'duration_ms',
     'event_class',
     'id',
     'object_id',
@@ -1057,6 +1052,7 @@ const TOOL_DETAIL_SYSTEM_KEYS = new Set([
     'tools',
     'message_to_human',
     'progress_messages',
+    'resources',
     'source',
     'token_usage',
     'checkpoint_at',
@@ -1391,7 +1387,12 @@ function getRenderableGroupKey(group: RenderableGroup): string {
     return ['group', group.toolRunId, group.firstTimestamp, firstKey, lastKey].filter(Boolean).join(':');
 }
 
-function getPreviousRenderableGroupTimestamp(groups: RenderableGroup[], index: number): number | string | undefined {
+// Accepts the augmented render list (which may contain interleaved resource_summary items); those
+// are skipped so the previous *group* timestamp is found regardless of inserted summaries.
+function getPreviousRenderableGroupTimestamp(
+    groups: Array<RenderableGroup | ResourceSummaryRenderItem>,
+    index: number,
+): number | string | undefined {
     for (let previousIndex = index - 1; previousIndex >= 0; previousIndex--) {
         const group = groups[previousIndex];
         if (group.type === 'single') return group.message.timestamp;
@@ -1509,6 +1510,8 @@ function buildSummaryToolDetailItem(message: AgentMessage, index: number): Summa
         finishedAt: getTimestampDetail(details[SUMMARY_TOOL_FINISHED_AT_DETAIL_KEY]) ?? message.timestamp,
         status: approvalDecisionTitle ? 'error' : (details.tool_status as ToolExecutionStatus | undefined),
         decisionText,
+        resources: getResourcesFromMessage(message),
+        workflowRunId: message.workflow_run_id,
         sections: getToolDetailSections(message),
     };
 }
@@ -1843,6 +1846,13 @@ function formatToolDetailCopyText(item: SummaryToolDetailItem): string {
     const metadata = getToolDetailMetadata(item).map((entry) => `${entry.label}: ${entry.value}`);
     if (metadata.length > 0) parts.push(metadata.join('\n'));
     if (item.text) parts.push(item.text);
+    if (item.resources.length > 0) {
+        parts.push(
+            `Resources\n${item.resources
+                .map((resource) => `${resource.label} (${resource.type}:${resource.id}) — ${resource.action}`)
+                .join('\n')}`,
+        );
+    }
 
     for (const section of item.sections) {
         parts.push(`${section.label}\n${formatToolSectionValue(section.value)}`);
@@ -1950,52 +1960,80 @@ function SummaryToolDetailPanel({ item }: { item: SummaryToolDetailItem }) {
 }
 
 function SummaryToolTimelineItem({ item }: { item: SummaryToolDetailItem }) {
+    const { t } = useUITranslation();
     const isDecision = Boolean(item.decisionText);
     const isAttention = !isDecision && (item.status === 'error' || item.status === 'warning');
     const hasMetadata = getToolDetailMetadata(item).length > 0;
     const hasDetails = Boolean(item.command || item.text || item.sections.length || hasMetadata);
+    const hasResources = item.resources.length > 0;
     const [isExpanded, setIsExpanded] = useState(false);
     const iconStatus = isDecision ? undefined : item.status;
+    const toggleDetailsLabel = isExpanded ? t('agent.hideDetails') : t('agent.showDetails');
+    const detailsSubject = hasResources ? item.resources.map((resource) => resource.label).join(', ') : item.title;
+
+    const icon = (
+        <span
+            className={cn(
+                'flex size-5 items-center justify-center pt-0.5',
+                isAttention ? 'text-attention' : 'text-muted',
+            )}
+        >
+            <ToolDetailIcon kind={item.kind} status={iconStatus} />
+        </span>
+    );
+
+    const chevron = (
+        <ChevronDown
+            className={cn('size-4 shrink-0 text-muted opacity-50 transition-transform', !isExpanded && '-rotate-90')}
+            aria-hidden="true"
+        />
+    );
 
     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
+            {hasResources ? (
+                <div className="grid w-full grid-cols-[1.5rem_1fr_auto] items-center gap-2 text-start">
+                    {icon}
+                    <ResourceActivityLinkList resources={item.resources} workflowRunId={item.workflowRunId} />
+                    {hasDetails ? (
+                        <VTooltip description={toggleDetailsLabel} asChild>
+                            <Button
+                                variant="ghost"
+                                size="xs"
+                                className="size-6 p-0 text-muted"
+                                onClick={() => setIsExpanded((current) => !current)}
+                                aria-expanded={isExpanded}
+                                aria-label={`${toggleDetailsLabel}: ${detailsSubject}`}
+                            >
+                                {chevron}
+                            </Button>
+                        </VTooltip>
+                    ) : null}
+                </div>
+            ) : (
+                <button
+                    type="button"
                     className={cn(
-                        'flex size-5 items-center justify-center pt-0.5',
-                        isAttention ? 'text-attention' : 'text-muted',
+                        '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}
                 >
-                    <ToolDetailIcon kind={item.kind} status={iconStatus} />
-                </span>
-                <span className="min-w-0 text-sm text-muted">
-                    <span className="break-words">{item.title}</span>
-                    {item.decisionText ? (
-                        <Badge variant="destructive" className="ms-2 rounded-full shadow-sm shadow-destructive/10">
-                            {item.decisionText}
-                        </Badge>
-                    ) : null}
-                </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>
+                    {icon}
+                    <span className="min-w-0 text-sm text-muted">
+                        <span className="break-words">{item.title}</span>
+                        {item.decisionText ? (
+                            <Badge variant="destructive" className="ms-2 rounded-full shadow-sm shadow-destructive/10">
+                                {item.decisionText}
+                            </Badge>
+                        ) : null}
+                    </span>
+                    {hasDetails ? chevron : null}
+                </button>
+            )}
             {hasDetails && isExpanded ? (
                 <div className="mt-1">
                     <SummaryToolDetailPanel item={item} />
@@ -2028,13 +2066,7 @@ function SummaryThoughtProseItem({
         <div className="min-w-0 py-1">
             <div
                 data-testid="summary-thought-prose"
-                className={cn(
-                    SUMMARY_PROSE_CLASS,
-                    isLong &&
-                        !disableCollapse &&
-                        !isExpanded &&
-                        '[display:-webkit-box] overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:6]',
-                )}
+                className={cn(SUMMARY_PROSE_CLASS, isLong && !disableCollapse && !isExpanded && AGENT_LINE_CLAMP_CLASS)}
                 style={{ overflowWrap: 'anywhere' }}
             >
                 <MarkdownRenderer artifactRunId={artifactRunId} components={DEFAULT_AGENT_MARKDOWN_COMPONENTS}>
@@ -2133,9 +2165,9 @@ function SummaryStoppedMessage({
 
     return (
         <div className={cn('mx-auto w-full max-w-3xl px-1', className)} data-testid="summary-stopped-message">
-            <div className="flex items-center justify-end gap-2 text-lg font-medium text-muted sm:text-xl">
+            <div className="flex items-center justify-end gap-2 text-sm font-medium text-muted">
                 <span>{t('agent.youStoppedAfter', { duration })}</span>
-                <MessageDeliveryStatus message={message} className="h-5 w-5" />
+                <MessageDeliveryStatus message={message} className="h-4 w-4" />
             </div>
             <div className="mt-5 border-b border-border/70" />
         </div>
@@ -2240,7 +2272,12 @@ function SummaryActivityRow({
                                                 options={uxConfig.options}
                                                 variant={uxConfig.variant}
                                                 multiSelect={uxConfig.multiSelect}
-                                                onSelect={(optionId) => onSendMessage?.(optionId)}
+                                                onSelect={(optionId) =>
+                                                    onSendMessage?.(
+                                                        optionId,
+                                                        getToolApprovalResponseMetadata(message, optionId),
+                                                    )
+                                                }
                                                 onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                                                 allowFreeResponse={
                                                     !uxConfig.options?.length || !!uxConfig.free_response
@@ -2379,6 +2416,8 @@ interface AllMessagesMixedProps {
     streamingMessages?: Map<string, StreamingData>; // Real-time streaming chunks
     /** Callback when user sends a message (e.g., from proposal selection) */
     onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
+    /** Open a Markdown artifact in the surrounding agent panel. */
+    onOpenArtifact?: (path: string) => void;
     /** Stable index for thinking messages (changes on 4s interval) */
     thinkingMessageIndex?: number;
     /** className overrides passed to every MessageItem */
@@ -2438,6 +2477,7 @@ function AllMessagesMixedComponent({
     isCompleted = false,
     streamingMessages = new Map(),
     onSendMessage,
+    onOpenArtifact,
     messageItemClassNames,
     messageStyleOverrides,
     toolCallGroupClassNames,
@@ -2759,6 +2799,36 @@ function AllMessagesMixedComponent({
         return isCompleted || !isInProgress(completionDisplayMessages);
     }, [completionDisplayMessages, hasLatestToolApprovalAllow, hasPendingToolApprovalRequest, isCompleted]);
 
+    // Per-turn resource summaries. Derived from the full source stream (not the active-tab view) so
+    // child-workstream resources are included, but CLIPPED to the playback cursor so scrubbing back
+    // never reveals resources created later in the turn. Gated on the MAIN workstream reaching either
+    // a terminal state or its final ANSWER, so a completed child tab can't surface a summary early while
+    // reusable interactive workflows can summarize a completed turn. Built from structured tool metadata
+    // (details.resources), never parsed from prose.
+    //
+    // Clip by the cursor message's POSITION in the ordered source, not by `timestamp <= cursor`:
+    // millisecond timestamps are not unique, so a later message sharing the cursor's timestamp would
+    // otherwise leak. indexOf works because sortAndDedupeMessages preserves message references; a
+    // timestamp compare is the fallback if the cursor can't be located (e.g. collapsed by dedup).
+    const clippedResourceSource = useMemo(() => {
+        if (workstreamSourceSorted.length === 0) return workstreamSourceSorted;
+        const cursorMessage = messages[messages.length - 1];
+        if (!cursorMessage) return [];
+        const cursorIndex = workstreamSourceSorted.indexOf(cursorMessage);
+        if (cursorIndex >= 0) {
+            return cursorIndex >= workstreamSourceSorted.length - 1
+                ? workstreamSourceSorted
+                : workstreamSourceSorted.slice(0, cursorIndex + 1);
+        }
+        const cursorTs = getTimestampMs(cursorMessage.timestamp);
+        return workstreamSourceSorted.filter((m) => getTimestampMs(m.timestamp) <= cursorTs);
+    }, [workstreamSourceSorted, messages]);
+    const isLatestResourceTurnComplete = useMemo(
+        () => isCompleted || isResourceSummaryReady(clippedResourceSource),
+        [isCompleted, clippedResourceSource],
+    );
+    const turnResourceSummaries = useMemo(() => segmentTurnResources(clippedResourceSource), [clippedResourceSource]);
+
     // Split streaming messages:
     // - complete (or stale incomplete) ones are interleaved chronologically
     // - actively incomplete ones render at the end
@@ -2828,6 +2898,19 @@ function AllMessagesMixedComponent({
         [visibleSummaryDisplayMessages, isDisplayCompleted, latestSummaryObservedTimestamp],
     );
 
+    // Interleave per-turn resource summaries into the sliding (summary) timeline, mirroring the
+    // stacked view. Turn boundaries are user QUESTION message items.
+    const slidingRenderItems = React.useMemo(
+        () =>
+            interleaveTurnSummaries(
+                summaryConversationItems,
+                (item) => item.type === 'message' && item.message.type === AgentMessageType.QUESTION,
+                turnResourceSummaries,
+                isLatestResourceTurnComplete,
+            ),
+        [summaryConversationItems, turnResourceSummaries, isLatestResourceTurnComplete],
+    );
+
     // 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.
@@ -2839,6 +2922,19 @@ function AllMessagesMixedComponent({
         [displayMessages, completeStreaming, activeWorkstream],
     );
 
+    // Interleave per-turn resource summaries into the stacked timeline. Turn boundaries are user
+    // QUESTION groups; turn N's resources come from the full-stream segmentation.
+    const stackedRenderItems = React.useMemo(
+        () =>
+            interleaveTurnSummaries(
+                groupedMessages,
+                (group) => group.type === 'single' && group.message.type === AgentMessageType.QUESTION,
+                turnResourceSummaries,
+                isLatestResourceTurnComplete,
+            ),
+        [groupedMessages, turnResourceSummaries, isLatestResourceTurnComplete],
+    );
+
     // 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(() => {
@@ -3246,18 +3342,16 @@ function AllMessagesMixedComponent({
                     {isSummaryView && activeWorkstream !== 'all' && activeWorkstreamName && (
                         <div className="sticky top-0 z-20 -mx-2 bg-background/95 px-2 pb-2 pt-1 backdrop-blur sm:-mx-4 sm:px-4">
                             <div className="mx-auto flex w-full max-w-3xl items-center gap-2 border-b border-border/70 pb-3">
-                                <VTooltip description={t('agent.backToMainAgent')} asChild>
-                                    <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-8 shrink-0 text-muted hover:text-foreground"
-                                        aria-label={t('agent.backToMainAgent')}
-                                        onClick={handleShowMainAgentChat}
-                                    >
-                                        <ArrowLeft className="size-4" aria-hidden="true" />
-                                    </Button>
-                                </VTooltip>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-8 shrink-0 text-muted hover:text-foreground"
+                                    title={t('agent.backToMainAgent')}
+                                    onClick={handleShowMainAgentChat}
+                                >
+                                    <ArrowLeft className="size-4" aria-hidden="true" />
+                                </Button>
                                 <div className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
                                     {activeWorkstreamName}
                                 </div>
@@ -3293,8 +3387,19 @@ function AllMessagesMixedComponent({
                     {viewMode === 'stacked' ? (
                         // Details view - show ALL messages with streaming interleaved
                         <>
-                            {groupedMessages.map((group, groupIndex) => {
-                                const isLastGroup = groupIndex === groupedMessages.length - 1;
+                            {stackedRenderItems.map((group, groupIndex) => {
+                                const isLastGroup = groupIndex === stackedRenderItems.length - 1;
+
+                                if (group.type === 'resource_summary') {
+                                    return (
+                                        <ResourceChangeSummary
+                                            key={group.key}
+                                            resources={group.resources}
+                                            workflowRunId={artifactRunId}
+                                            className="my-2"
+                                        />
+                                    );
+                                }
 
                                 if (group.type === 'tool_group') {
                                     // Render grouped tool calls
@@ -3367,7 +3472,7 @@ function AllMessagesMixedComponent({
                                                     message={message}
                                                     startTimestamp={
                                                         getPreviousRenderableGroupTimestamp(
-                                                            groupedMessages,
+                                                            stackedRenderItems,
                                                             groupIndex,
                                                         ) ?? message.timestamp
                                                     }
@@ -3403,6 +3508,7 @@ function AllMessagesMixedComponent({
                                                     message={message}
                                                     showPulsatingCircle={isLatestMessage}
                                                     onSendMessage={onSendMessage}
+                                                    onOpenArtifact={onOpenArtifact}
                                                     requestInputAnswered={isRequestInputAnswered(
                                                         message,
                                                         answeredRequestInputKeys,
@@ -3463,7 +3569,18 @@ function AllMessagesMixedComponent({
                     ) : (
                         // Summary view - conversation turns with per-turn work disclosure
                         <>
-                            {summaryConversationItems.map((item) => {
+                            {slidingRenderItems.map((item) => {
+                                if (item.type === 'resource_summary') {
+                                    return (
+                                        <ResourceChangeSummary
+                                            key={item.key}
+                                            resources={item.resources}
+                                            workflowRunId={artifactRunId}
+                                            className="my-2"
+                                        />
+                                    );
+                                }
+
                                 if (item.type === 'work') {
                                     if (hideToolCallsInViewMode?.includes(viewMode)) return null;
                                     const isThinkingOnlyWork = isTransientThinkingWork(item.messages);
@@ -3523,6 +3640,7 @@ function AllMessagesMixedComponent({
                                         <SummaryMessage
                                             message={message}
                                             onSendMessage={onSendMessage}
+                                            onOpenArtifact={onOpenArtifact}
                                             onSelectWorkstream={handleSelectWorkstream}
                                             requestInputAnswered={isRequestInputAnswered(
                                                 message,