@vertesia/ui 1.5.0-dev.20260722.120446Z → 1.5.0-dev.20260804.124748Z

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

@@ -1,9 +1,9 @@
 import { Button, cn } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { UserSessionContext } from '@vertesia/ui/session';
-import { FileTextIcon, ImageIcon, XIcon } from 'lucide-react';
+import { ChevronDown, FileTextIcon, ImageIcon, XIcon } from 'lucide-react';
 import type React from 'react';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useId, useState } from 'react';
 import { useImageLightbox } from '../ImageLightbox';
 import { getArtifactCacheKey, useArtifactUrlCache } from '../useArtifactUrlCache';
 
@@ -26,6 +26,7 @@ const TEXT_EXTENSIONS = new Set([
     'yaml',
     'yml',
 ]);
+const DEFAULT_COLLAPSED_ATTACHMENT_COUNT = 3;
 
 export interface AttachmentPreviewItem {
     id: string;
@@ -47,6 +48,7 @@ export interface ParsedUserAttachments {
 interface AttachmentPreviewListProps {
     items: AttachmentPreviewItem[];
     artifactRunId?: string;
+    onOpenArtifact?: (path: string) => void;
     className?: string;
     align?: 'start' | 'end';
     variant?: 'composer' | 'message';
@@ -103,17 +105,28 @@ function isCollectionHref(href: string | undefined): boolean {
 function AttachmentLink({
     item,
     children,
+    onOpenArtifact,
     StoreLinkComponent,
     CollectionLinkComponent,
 }: {
     item: AttachmentPreviewItem;
     children: React.ReactNode;
+    onOpenArtifact?: (path: string) => void;
     StoreLinkComponent?: AttachmentPreviewListProps['StoreLinkComponent'];
     CollectionLinkComponent?: AttachmentPreviewListProps['CollectionLinkComponent'];
 }) {
     const href = item.href;
     if (!href) return <>{children}</>;
 
+    const artifactPath = getArtifactPath(item);
+    if (artifactPath && /\.md$/i.test(artifactPath) && onOpenArtifact) {
+        return (
+            <button type="button" className="max-w-full text-start" onClick={() => onOpenArtifact(artifactPath)}>
+                {children}
+            </button>
+        );
+    }
+
     if (isStoreObjectHref(href)) {
         const documentId = getStoreObjectId(href);
         if (StoreLinkComponent) {
@@ -158,6 +171,7 @@ function AttachmentPreview({
     artifactRunId,
     variant,
     onRemove,
+    onOpenArtifact,
     StoreLinkComponent,
     CollectionLinkComponent,
 }: {
@@ -165,6 +179,7 @@ function AttachmentPreview({
     artifactRunId?: string;
     variant: 'composer' | 'message';
     onRemove?: (fileId: string) => void;
+    onOpenArtifact?: (path: string) => void;
     StoreLinkComponent?: AttachmentPreviewListProps['StoreLinkComponent'];
     CollectionLinkComponent?: AttachmentPreviewListProps['CollectionLinkComponent'];
 }) {
@@ -338,6 +353,7 @@ function AttachmentPreview({
         <span className="relative inline-flex max-w-full">
             <AttachmentLink
                 item={item}
+                onOpenArtifact={onOpenArtifact}
                 StoreLinkComponent={StoreLinkComponent}
                 CollectionLinkComponent={CollectionLinkComponent}
             >
@@ -355,24 +371,57 @@ export function AttachmentPreviewList({
     align = 'start',
     variant = 'message',
     onRemove,
+    onOpenArtifact,
     StoreLinkComponent,
     CollectionLinkComponent,
 }: AttachmentPreviewListProps) {
+    const { t } = useUITranslation();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const attachmentListId = useId();
+    const isCollapsible = variant === 'composer' && items.length > DEFAULT_COLLAPSED_ATTACHMENT_COUNT;
+    const visibleItems = isCollapsible && !isExpanded ? items.slice(0, DEFAULT_COLLAPSED_ATTACHMENT_COUNT) : items;
+    const hiddenItemCount = items.length - DEFAULT_COLLAPSED_ATTACHMENT_COUNT;
+
+    useEffect(() => {
+        if (items.length <= DEFAULT_COLLAPSED_ATTACHMENT_COUNT) {
+            setIsExpanded(false);
+        }
+    }, [items.length]);
+
     if (items.length === 0) return null;
 
     return (
-        <div className={cn('flex flex-wrap gap-2', align === 'end' && 'justify-end', className)}>
-            {items.map((item) => (
+        <div id={attachmentListId} className={cn('flex flex-wrap gap-2', align === 'end' && 'justify-end', className)}>
+            {visibleItems.map((item) => (
                 <AttachmentPreview
                     key={item.id}
                     item={item}
                     artifactRunId={artifactRunId}
                     variant={variant}
                     onRemove={onRemove}
+                    onOpenArtifact={onOpenArtifact}
                     StoreLinkComponent={StoreLinkComponent}
                     CollectionLinkComponent={CollectionLinkComponent}
                 />
             ))}
+            {isCollapsible && (
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    aria-controls={attachmentListId}
+                    aria-expanded={isExpanded}
+                    onClick={() => setIsExpanded((expanded) => !expanded)}
+                    className="h-8 shrink-0 gap-1 rounded-xl px-2.5 text-xs text-muted"
+                >
+                    {!isExpanded && <span>+{hiddenItemCount}</span>}
+                    {isExpanded ? t('agent.showLess') : t('agent.showMore')}
+                    <ChevronDown
+                        className={cn('size-3.5 transition-transform', isExpanded && 'rotate-180')}
+                        aria-hidden="true"
+                    />
+                </Button>
+            )}
         </div>
     );
 }

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

@@ -0,0 +1,44 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { I18nProvider } from '../../../../i18n/index.js';
+import { AGENT_LINE_CLAMP_CLASS, CollapsibleAgentMarkdown } from './CollapsibleAgentMarkdown.js';
+
+afterEach(cleanup);
+
+const renderMarkdown = (markdown: string, testId = 'prose') =>
+    render(
+        <I18nProvider lng="en">
+            <CollapsibleAgentMarkdown data-testid={testId}>{markdown}</CollapsibleAgentMarkdown>
+        </I18nProvider>,
+    );
+
+describe('CollapsibleAgentMarkdown', () => {
+    it('renders markdown without a toggle when the content is short', () => {
+        renderMarkdown('A **short** note.');
+        expect(screen.getByText('short')).not.toBeNull();
+        expect(screen.queryByRole('button', { name: /Show more/ })).toBeNull();
+    });
+
+    it('renders a markdown table', () => {
+        renderMarkdown('| A | B |\n| - | - |\n| 1 | 2 |');
+        expect(screen.getByRole('table')).not.toBeNull();
+    });
+
+    it('collapses long content behind a show more / show less toggle', () => {
+        const long = Array.from({ length: 10 }, (_, i) => `Line number ${i + 1} of the reference block.`).join('\n\n');
+        renderMarkdown(long);
+
+        const prose = screen.getByTestId('prose');
+        const showMore = screen.getByRole('button', { name: /Show more/ });
+        expect(showMore.getAttribute('aria-expanded')).toBe('false');
+        expect(prose.getAttribute('class') ?? '').toContain(AGENT_LINE_CLAMP_CLASS.split(' ')[0]);
+
+        fireEvent.click(showMore);
+
+        const showLess = screen.getByRole('button', { name: /Show less/ });
+        expect(showLess.getAttribute('aria-expanded')).toBe('true');
+        expect(prose.getAttribute('class') ?? '').not.toContain('[-webkit-line-clamp:6]');
+    });
+});

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

@@ -0,0 +1,88 @@
+import { cn } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { MarkdownRenderer, type MarkdownRendererProps } from '@vertesia/ui/widgets';
+import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+
+/** Prose styling used for agent/model message markdown, shared across the conversation UI. */
+export const AGENT_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(' ');
+
+/** Clamp applied to collapsed markdown. Kept as a literal so Tailwind emits the utility. */
+export const AGENT_LINE_CLAMP_CLASS =
+    '[display:-webkit-box] overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:6]';
+
+export const AGENT_COLLAPSE_LINES = 6;
+export const AGENT_COLLAPSE_THRESHOLD = 520;
+
+interface CollapsibleAgentMarkdownProps {
+    /** Raw markdown to render. */
+    children: string;
+    artifactRunId?: string;
+    components?: MarkdownRendererProps['components'];
+    /** Disable the show more/less affordance regardless of length. */
+    disableCollapse?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+
+/**
+ * Renders agent/model markdown with the shared prose styling and, when the content is long,
+ * collapses it to a few lines behind a "Show more" / "Show less" toggle. Mirrors the treatment
+ * used for summary thought prose so edit/comment cards read like ordinary model messages.
+ */
+export function CollapsibleAgentMarkdown({
+    children,
+    artifactRunId,
+    components,
+    disableCollapse,
+    className,
+    'data-testid': dataTestId,
+}: CollapsibleAgentMarkdownProps) {
+    const { t } = useUITranslation();
+    const normalizedText = children.trim();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const explicitLineCount = normalizedText ? normalizedText.split(/\r?\n/).length : 0;
+    const isLong = normalizedText.length > AGENT_COLLAPSE_THRESHOLD || explicitLineCount > AGENT_COLLAPSE_LINES;
+    const collapsed = isLong && !disableCollapse && !isExpanded;
+
+    return (
+        <div className={cn('min-w-0', className)}>
+            <div
+                data-testid={dataTestId}
+                className={cn(AGENT_PROSE_CLASS, collapsed && AGENT_LINE_CLAMP_CLASS)}
+                style={{ overflowWrap: 'anywhere' }}
+            >
+                <MarkdownRenderer artifactRunId={artifactRunId} components={components}>
+                    {children}
+                </MarkdownRenderer>
+            </div>
+            {isLong && !disableCollapse ? (
+                <div className="mt-1.5 flex justify-end">
+                    <button
+                        type="button"
+                        aria-expanded={isExpanded}
+                        className={cn(
+                            'inline-flex items-center gap-1 text-sm font-medium text-muted transition-colors',
+                            '[text-decoration:none] hover:text-foreground hover:[text-decoration:none]',
+                            'focus-visible:text-foreground focus-visible:[text-decoration:none]',
+                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        )}
+                        onClick={() => setIsExpanded((current) => !current)}
+                    >
+                        {isExpanded ? t('agent.showLess') : t('agent.showMore')}
+                        <ChevronDown
+                            className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}
+                            aria-hidden="true"
+                        />
+                    </button>
+                </div>
+            ) : null}
+        </div>
+    );
+}

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

@@ -5,6 +5,7 @@ import { useRouterContext } from '@vertesia/ui/router';
 import { useUserSession } from '@vertesia/ui/session';
 import {
     Bot,
+    Bug,
     ClipboardList,
     CopyIcon,
     DownloadCloudIcon,
@@ -13,7 +14,6 @@ import {
     InfoIcon,
     MessageSquareText,
     MoreVertical,
-    Rewind,
     Rows3,
     XIcon,
 } from 'lucide-react';
@@ -185,7 +185,7 @@ export default function Header({
                         variant === 'compact' && 'size-8 rounded-lg',
                     )}
                 >
-                    <Rewind className={cn('size-4', variant === 'full' && 'me-1.5')} />
+                    <Bug className={cn('size-4', variant === 'full' && 'me-1.5')} />
                     {variant === 'full' ? (
                         <span className="font-medium text-xs">{t('agent.rewind.label')}</span>
                     ) : (

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

@@ -201,6 +201,38 @@ describe('MessageInput', () => {
         expect(screen.getByText('Ready')).not.toBeNull();
     });
 
+    it('collapses large attachment lists while preserving attachment actions', () => {
+        const onRemoveDocument = vi.fn();
+        const selectedDocuments = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'].map((name, index) => ({
+            id: `doc-${index}`,
+            name,
+        }));
+
+        renderWithProviders(
+            <MessageInput onSend={vi.fn()} selectedDocuments={selectedDocuments} onRemoveDocument={onRemoveDocument} />,
+        );
+
+        expect(screen.getByText('Alpha')).not.toBeNull();
+        expect(screen.getByText('Gamma')).not.toBeNull();
+        expect(screen.queryByText('Delta')).toBeNull();
+        expect(screen.getByText('+2')).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /show more/i }));
+
+        expect(screen.getByText('Delta')).not.toBeNull();
+        expect(screen.getByText('Epsilon')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /show less/i })).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /Remove Epsilon/i }));
+
+        expect(onRemoveDocument).toHaveBeenCalledWith('doc-4');
+
+        fireEvent.click(screen.getByRole('button', { name: /show less/i }));
+
+        expect(screen.queryByText('Delta')).toBeNull();
+        expect(screen.getByText('+2')).not.toBeNull();
+    });
+
     it('renders context usage and triggers manual compaction', async () => {
         const onCompactContext = vi.fn();
 
@@ -269,4 +301,43 @@ describe('MessageInput', () => {
             tray.compareDocumentPosition(screen.getByRole('textbox')) & Node.DOCUMENT_POSITION_FOLLOWING,
         ).toBeTruthy();
     });
+
+    it('collapses large workstream lists and navigates from a selected workstream', () => {
+        const onSelectWorkstream = vi.fn();
+        const activeWorkstreams = ['alpha', 'beta', 'gamma', 'delta', 'epsilon'].map((workstream_id, index) => ({
+            workstream_id,
+            launch_id: `launch-${index}`,
+            elapsed_ms: 0,
+            deadline_ms: 0,
+            remaining_ms: 0,
+            status: 'running' as const,
+        }));
+
+        renderWithProviders(
+            <MessageInput
+                onSend={vi.fn()}
+                isStreaming
+                activeWorkstreams={activeWorkstreams}
+                onSelectWorkstream={onSelectWorkstream}
+            />,
+        );
+
+        expect(screen.getByRole('button', { name: 'Alpha' })).not.toBeNull();
+        expect(screen.getByRole('button', { name: 'Gamma' })).not.toBeNull();
+        expect(screen.queryByRole('button', { name: 'Delta' })).toBeNull();
+        expect(screen.getByText('+2')).not.toBeNull();
+        expect(screen.getByText('Show more')).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /show more/i }));
+
+        expect(screen.getByRole('button', { name: 'Delta' })).not.toBeNull();
+        expect(screen.getByRole('button', { name: 'Epsilon' })).not.toBeNull();
+        expect(screen.getByRole('button', { name: /show less/i })).not.toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Delta' }));
+
+        expect(onSelectWorkstream).toHaveBeenCalledWith('delta');
+        expect(screen.queryByRole('button', { name: 'Delta' })).toBeNull();
+        expect(screen.getByRole('button', { name: /show more/i })).not.toBeNull();
+    });
 });

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

@@ -66,6 +66,7 @@ interface MessageInputProps {
     isCompactingContext?: boolean;
     activeTaskCount?: number;
     activeWorkstreams?: WorkstreamInfo[];
+    onSelectWorkstream?: (workstreamId: string) => void;
     placeholder?: string;
 
     // File upload props
@@ -133,6 +134,7 @@ export default function MessageInput({
     isCompactingContext = false,
     activeTaskCount = 0,
     activeWorkstreams = [],
+    onSelectWorkstream,
     placeholder,
     // File upload props
     onFilesSelected,
@@ -474,7 +476,7 @@ export default function MessageInput({
                 />
             )}
 
-            <ActiveWorkstreamsSummary activeWorkstreams={activeWorkstreams} />
+            <ActiveWorkstreamsSummary activeWorkstreams={activeWorkstreams} onSelectWorkstream={onSelectWorkstream} />
 
             {/* Input row */}
             <div className="mx-auto flex max-w-3xl flex-col gap-2 rounded-2xl border border-border/70 bg-mixer-muted/15 p-2.5 shadow-lg shadow-black/5">

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

@@ -6,7 +6,7 @@ import {
 } from '@vertesia/common';
 import { Badge, Button, cn, Dropdown, MenuItem, useToast } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
-import { NavLink, useRouterContext } from '@vertesia/ui/router';
+import { useRouterContext } from '@vertesia/ui/router';
 import { useUserSession } from '@vertesia/ui/session';
 import { MarkdownRenderer } from '@vertesia/ui/widgets';
 import dayjs from 'dayjs';
@@ -29,13 +29,15 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useDownloadFile } from '../../../store/objects/components/useDownloadFile.js';
 import { PulsatingCircle } from '../AnimatedThinkingDots';
 import { AskUserWidget } from '../AskUserWidget';
+import { DocumentEditingActionCard, parseMarkdownEditingAction } from '../DocumentEditingActionCard.js';
 import { useImageLightbox } from '../ImageLightbox';
 import { getArtifactCacheKey, useArtifactUrlCache } from '../useArtifactUrlCache.js';
 import { ThinkingMessages } from '../WaitingMessages';
+import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
 import { MessageDeliveryStatus } from './MessageDeliveryStatus';
 import { processContentForMarkdown } from './processContentForMarkdown';
-import { getToolApprovalResponseMetadata } from './requestInputMessages';
+import { getToolApprovalResponseMetadata, sendRequestInputResponse } from './requestInputMessages';
 import { getWorkstreamId } from './utils';
 
 /** className overrides for MessageItem — single source of truth for all className overrides. */
@@ -108,6 +110,8 @@ export interface MessageItemProps extends MessageItemClassNames {
     showPulsatingCircle?: boolean;
     /** 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;
     /** Whether a REQUEST_INPUT message has already been answered by a later user message */
     requestInputAnswered?: boolean;
     /** Sparse per-type overrides for MESSAGE_STYLES (deep-merged with defaults) */
@@ -197,6 +201,7 @@ function MessageItemComponent({
     message,
     showPulsatingCircle = false,
     onSendMessage,
+    onOpenArtifact,
     requestInputAnswered = false,
     className,
     cardClassName,
@@ -304,6 +309,13 @@ function MessageItemComponent({
 
     const visibleMessageContent = parsedUserAttachments?.body ?? messageContent;
     const messageAttachments = parsedUserAttachments?.attachments ?? [];
+    const editingAction = useMemo(
+        () =>
+            message.type === AgentMessageType.QUESTION
+                ? parseMarkdownEditingAction(message.details?.editing_action)
+                : undefined,
+        [message.details, message.type],
+    );
 
     // PERFORMANCE: Memoize processed content - expensive regex operations only run when messageContent changes
     const processedContent = useMemo(() => {
@@ -367,52 +379,13 @@ function MessageItemComponent({
     // PERFORMANCE: Memoize markdown components to prevent MarkdownRenderer remounts
     const markdownComponents = useMemo(
         () => ({
-            a: ({
-                node,
-                ref,
-                ...props
-            }: {
-                node?: unknown;
-                ref?: unknown;
-                href?: string;
-                children?: React.ReactNode;
-            }) => {
-                const href = props.href || '';
+            a: createAgentMarkdownAnchor({
+                StoreLinkComponent,
+                CollectionLinkComponent,
                 // Carry the active account (`a`) & project (`p`) params on internal routes so
                 // copy-link / open-in-new-tab preserve the current tenant.
-                const withParams = href.startsWith('/') ? router.getTopRouter().navigator.addStickyParams(href) : href;
-                if (href.includes('/store/objects')) {
-                    if (StoreLinkComponent) {
-                        const documentId = href.split('/store/objects/')[1] || '';
-                        return (
-                            <StoreLinkComponent href={withParams} documentId={documentId}>
-                                {props.children}
-                            </StoreLinkComponent>
-                        );
-                    }
-                    return (
-                        <NavLink href={withParams} topLevelNav>
-                            {props.children}
-                        </NavLink>
-                    );
-                }
-                if (href.includes('/store/collections')) {
-                    if (CollectionLinkComponent) {
-                        const collectionId = href.split('/store/collections/')[1] || '';
-                        return (
-                            <CollectionLinkComponent href={withParams} collectionId={collectionId}>
-                                {props.children}
-                            </CollectionLinkComponent>
-                        );
-                    }
-                    return (
-                        <NavLink href={withParams} topLevelNav>
-                            {props.children}
-                        </NavLink>
-                    );
-                }
-                return <a {...props} target="_blank" rel="noopener noreferrer" />;
-            },
+                addStickyParams: (href: string) => router.getTopRouter().navigator.addStickyParams(href),
+            }),
             img: ({ node, ref, ...props }: { node?: unknown; ref?: unknown; src?: string; alt?: string }) => {
                 return (
                     <Button
@@ -466,6 +439,7 @@ function MessageItemComponent({
             >
                 <MarkdownRenderer
                     artifactRunId={runId}
+                    onArtifactOpen={onOpenArtifact}
                     onProposalSelect={(optionId) => onSendMessage?.(optionId)}
                     onProposalSubmit={(text) => onSendMessage?.(text)}
                     components={markdownComponents}
@@ -651,17 +625,33 @@ function MessageItemComponent({
                             variant={askUserUx.variant}
                             multiSelect={askUserUx.multiSelect}
                             onSelect={(optionId) =>
-                                onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                                sendRequestInputResponse(
+                                    onSendMessage,
+                                    message,
+                                    optionId,
+                                    getToolApprovalResponseMetadata(message, optionId),
+                                )
+                            }
+                            onMultiSelect={(optionIds) =>
+                                sendRequestInputResponse(onSendMessage, message, optionIds.join(', '))
                             }
-                            onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                             allowFreeResponse={!askUserUx.options?.length || !!askUserUx.free_response}
                             placeholder={askUserUx.free_response?.placeholder}
                             submitLabel={askUserUx.free_response?.submit_label}
-                            onSubmit={(value) => onSendMessage?.(value, askUserUx.free_response?.metadata)}
+                            onSubmit={(value) =>
+                                sendRequestInputResponse(
+                                    onSendMessage,
+                                    message,
+                                    value,
+                                    askUserUx.free_response?.metadata,
+                                )
+                            }
                             hideBorder
                             compact
                             answered={requestInputAnswered}
                         />
+                    ) : editingAction ? (
+                        <DocumentEditingActionCard action={editingAction} />
                     ) : (
                         visibleMessageContent && (
                             <div
@@ -677,6 +667,7 @@ function MessageItemComponent({
                         <AttachmentPreviewList
                             items={messageAttachments}
                             artifactRunId={runId}
+                            onOpenArtifact={onOpenArtifact}
                             variant="message"
                             className={cn(visibleMessageContent && 'mt-3')}
                             StoreLinkComponent={StoreLinkComponent}
@@ -723,7 +714,13 @@ function MessageItemComponent({
                                         variant="outline"
                                         size="xs"
                                         className="px-2 py-1 text-xs"
-                                        onClick={() => window.open(url, '_blank')}
+                                        onClick={() => {
+                                            if (/\.md$/i.test(artifactPath) && onOpenArtifact) {
+                                                onOpenArtifact(artifactPath);
+                                                return;
+                                            }
+                                            window.open(url, '_blank');
+                                        }}
                                         title={artifactPath}
                                     >
                                         {displayName}
@@ -790,6 +787,7 @@ const MessageItem = memo(MessageItemComponent, (prevProps, nextProps) => {
         prevProps.message.workflow_run_id === nextProps.message.workflow_run_id &&
         prevProps.showPulsatingCircle === nextProps.showPulsatingCircle &&
         prevProps.onSendMessage === nextProps.onSendMessage &&
+        prevProps.onOpenArtifact === nextProps.onOpenArtifact &&
         prevProps.requestInputAnswered === nextProps.requestInputAnswered &&
         prevProps.messageStyleOverrides === nextProps.messageStyleOverrides &&
         MESSAGE_ITEM_CLASS_NAME_KEYS.every((key) => prevProps[key] === nextProps[key])

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

@@ -0,0 +1,40 @@
+import type { AgentResourceReference } from '@vertesia/common';
+import { Button, cn } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useState } from 'react';
+import { ResourceChipList } from './ResourceChip';
+
+const COLLAPSE_THRESHOLD = 5;
+
+interface ResourceChangeSummaryProps {
+    resources: AgentResourceReference[];
+    workflowRunId?: string;
+    className?: string;
+}
+
+/**
+ * End-of-turn summary listing every resource the assistant created/updated/deleted during the turn,
+ * as deep-linkable chips. Rendered once the turn is complete, from structured tool metadata rather
+ * than parsed prose. Collapses to the first few entries with a "view all" toggle when long.
+ */
+export function ResourceChangeSummary({ resources, workflowRunId, className }: ResourceChangeSummaryProps) {
+    const { t } = useUITranslation();
+    const [expanded, setExpanded] = useState(false);
+
+    if (resources.length === 0) return null;
+
+    const collapsible = resources.length > COLLAPSE_THRESHOLD;
+    const visible = collapsible && !expanded ? resources.slice(0, COLLAPSE_THRESHOLD) : resources;
+
+    return (
+        <div className={cn('mx-auto w-full max-w-3xl py-2', className)} data-agent-resource-summary>
+            <div className="mb-2 text-xs font-medium text-muted">{t('agent.resourcesChanged')}</div>
+            <ResourceChipList resources={visible} workflowRunId={workflowRunId} />
+            {collapsible && (
+                <Button variant="outline" size="xs" className="mt-2" onClick={() => setExpanded((prev) => !prev)}>
+                    {expanded ? t('agent.resourceShowLess') : t('agent.resourceViewAll', { total: resources.length })}
+                </Button>
+            )}
+        </div>
+    );
+}