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

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/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,9 +29,11 @@ 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';
@@ -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}
@@ -662,6 +636,8 @@ function MessageItemComponent({
                             compact
                             answered={requestInputAnswered}
                         />
+                    ) : editingAction ? (
+                        <DocumentEditingActionCard action={editingAction} />
                     ) : (
                         visibleMessageContent && (
                             <div
@@ -677,6 +653,7 @@ function MessageItemComponent({
                         <AttachmentPreviewList
                             items={messageAttachments}
                             artifactRunId={runId}
+                            onOpenArtifact={onOpenArtifact}
                             variant="message"
                             className={cn(visibleMessageContent && 'mt-3')}
                             StoreLinkComponent={StoreLinkComponent}
@@ -723,7 +700,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 +773,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>
+    );
+}

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

@@ -0,0 +1,148 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import type { AgentResourceReference } from '@vertesia/common';
+import {
+    Boxes,
+    BrainCircuit,
+    Database,
+    FileType,
+    MessagesSquare,
+    PanelsTopLeft,
+    PlayCircle,
+    SquareTerminal,
+    Workflow,
+} from 'lucide-react';
+import type React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../../../i18n/index.js';
+import { ReactRouterContext, type RouterContext } from '../../../../router/index.js';
+import { AgentResourceResolverProvider } from '../../../../widgets/markdown/AgentResourceResolver';
+import { ResourceChangeSummary } from './ResourceChangeSummary';
+import { ResourceChip } from './ResourceChip';
+import { getResourceIcon } from './resourceLinks';
+
+function makeRouterContext(): RouterContext {
+    return {
+        location: window.location,
+        route: { path: '/', Component: () => null },
+        params: {},
+        state: null,
+        matchedRoutePath: '/',
+        navigate: vi.fn(),
+        router: {
+            navigate: vi.fn(),
+            getTopRouter: () => ({ navigator: { addStickyParams: (href: string) => href } }),
+        },
+    } as unknown as RouterContext;
+}
+
+function renderWithProviders(ui: React.ReactNode) {
+    return render(
+        <I18nProvider lng="en">
+            <ReactRouterContext.Provider value={makeRouterContext()}>{ui}</ReactRouterContext.Provider>
+        </I18nProvider>,
+    );
+}
+
+const ref = (over: Partial<AgentResourceReference> = {}): AgentResourceReference => ({
+    type: 'document',
+    id: 'd1',
+    label: 'My Document',
+    action: 'created',
+    ...over,
+});
+
+afterEach(() => cleanup());
+
+describe('ResourceChip', () => {
+    it('uses the same icons as the Studio navigation', () => {
+        expect(getResourceIcon('document')).toBe(Database);
+        expect(getResourceIcon('collection')).toBe(Boxes);
+        expect(getResourceIcon('content_type')).toBe(FileType);
+        expect(getResourceIcon('interaction')).toBe(MessagesSquare);
+        expect(getResourceIcon('prompt')).toBe(SquareTerminal);
+        expect(getResourceIcon('agent')).toBe(BrainCircuit);
+        expect(getResourceIcon('workflow')).toBe(Workflow);
+        expect(getResourceIcon('process')).toBe(Workflow);
+        expect(getResourceIcon('process_run')).toBe(PlayCircle);
+        expect(getResourceIcon('interaction_run')).toBe(PlayCircle);
+        expect(getResourceIcon('view')).toBe(PanelsTopLeft);
+    });
+
+    it('renders a navigable link supplied by the host resolver', () => {
+        renderWithProviders(
+            <AgentResourceResolverProvider value={() => ({ kind: 'navigate', href: '/documents/d1' })}>
+                <ResourceChip resource={ref()} />
+            </AgentResourceResolverProvider>,
+        );
+        const link = screen.getByRole('link', { name: /My Document/ });
+        expect(link.getAttribute('href')).toContain('/documents/d1');
+        expect(screen.getByText('Created')).not.toBeNull();
+    });
+
+    it('renders a non-interactive chip when the host does not configure a resolver', () => {
+        renderWithProviders(<ResourceChip resource={ref({ type: 'interaction', id: 'int-1', label: 'Chat' })} />);
+        expect(screen.queryByRole('link')).toBeNull();
+        expect(screen.getByText('Chat')).not.toBeNull();
+    });
+
+    it('renders a deleted resource as a non-interactive chip (no link)', () => {
+        renderWithProviders(<ResourceChip resource={ref({ action: 'deleted', label: 'Gone' })} />);
+        expect(screen.queryByRole('link')).toBeNull();
+        expect(screen.getByText('Gone')).not.toBeNull();
+        expect(screen.getByText('Deleted')).not.toBeNull();
+    });
+
+    it('honors a resolver override from context', () => {
+        renderWithProviders(
+            <AgentResourceResolverProvider value={() => ({ kind: 'navigate', href: '/custom/path' })}>
+                <ResourceChip resource={ref()} />
+            </AgentResourceResolverProvider>,
+        );
+        expect(screen.getByRole('link').getAttribute('href')).toContain('/custom/path');
+    });
+
+    it('supports a host activation callback instead of navigation', () => {
+        const onActivate = vi.fn();
+        renderWithProviders(
+            <AgentResourceResolverProvider value={() => ({ kind: 'activate', onActivate })}>
+                <ResourceChip resource={ref()} />
+            </AgentResourceResolverProvider>,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: /My Document/ }));
+        expect(onActivate).toHaveBeenCalledOnce();
+        expect(screen.queryByRole('link')).toBeNull();
+    });
+});
+
+describe('ResourceChangeSummary', () => {
+    it('renders nothing when there are no resources', () => {
+        const { container } = renderWithProviders(<ResourceChangeSummary resources={[]} />);
+        expect(container.querySelector('[data-agent-resource-summary]')).toBeNull();
+    });
+
+    it('renders a header and a chip per resource', () => {
+        const { container } = renderWithProviders(
+            <ResourceChangeSummary
+                resources={[ref({ id: 'd1', label: 'Doc One' }), ref({ type: 'collection', id: 'c1', label: 'Col' })]}
+            />,
+        );
+        expect(container.querySelector('[data-agent-resource-summary]')?.className).not.toContain('bg-muted');
+        expect(screen.getByText('Resources changed')).not.toBeNull();
+        expect(screen.getByText('Doc One')).not.toBeNull();
+        expect(screen.getByText('Col')).not.toBeNull();
+    });
+
+    it('collapses beyond five resources and expands on click', () => {
+        const many = Array.from({ length: 7 }, (_, i) => ref({ id: `d${i}`, label: `Doc ${i}` }));
+        renderWithProviders(<ResourceChangeSummary resources={many} />);
+        // Only 5 shown initially
+        expect(screen.queryByText('Doc 5')).toBeNull();
+        const toggle = screen.getByRole('button', { name: /View all 7 changes/ });
+        fireEvent.click(toggle);
+        expect(screen.getByText('Doc 5')).not.toBeNull();
+        expect(screen.getByText('Doc 6')).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,141 @@
+import type { AgentResourceReference } from '@vertesia/common';
+import { Badge, Button, cn } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { NavLink } from '@vertesia/ui/router';
+import { useAgentResourceResolver } from '@vertesia/ui/widgets';
+import { getResourceActionVariant, getResourceIcon } from './resourceLinks';
+
+interface ResourceChipProps {
+    resource: AgentResourceReference;
+    /** Originating run, passed to the resolver for run-scoped resources. */
+    workflowRunId?: string;
+    /** Hide the action badge when surrounding text already communicates the action. */
+    showAction?: boolean;
+    className?: string;
+}
+
+/**
+ * A compact resource chip for something an agent tool created/updated/deleted. The host resolver may
+ * make it navigable (NavLink applies tenant sticky params), activate a host callback, or leave it
+ * non-interactive.
+ */
+export function ResourceChip({ resource, workflowRunId, showAction = true, className }: ResourceChipProps) {
+    const { t } = useUITranslation();
+    const resolve = useAgentResourceResolver();
+    const target = resolve(resource, { workflowRunId, source: 'structured' });
+    const Icon = getResourceIcon(resource.type);
+    // Literal keys (not a dynamic lookup) so i18next-cli can statically extract them.
+    const actionLabel =
+        resource.action === 'created'
+            ? t('agent.resourceActionCreated')
+            : resource.action === 'deleted'
+              ? t('agent.resourceActionDeleted')
+              : t('agent.resourceActionUpdated');
+
+    const body = (
+        <>
+            <Icon className="size-3.5 shrink-0 text-foreground" aria-hidden="true" />
+            <span className="truncate">{resource.label}</span>
+            {showAction && (
+                <Badge variant={getResourceActionVariant(resource.action)} className="shrink-0 px-1.5 py-0 text-[10px]">
+                    {actionLabel}
+                </Badge>
+            )}
+        </>
+    );
+
+    const baseClass = cn(
+        'inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-xs',
+        className,
+    );
+
+    if (target.kind === 'navigate') {
+        return (
+            <NavLink
+                href={target.href}
+                topLevelNav
+                className={cn(baseClass, 'font-medium transition-colors hover:bg-muted/60')}
+            >
+                {body}
+            </NavLink>
+        );
+    }
+
+    if (target.kind === 'activate') {
+        return (
+            <Button
+                variant="unstyled"
+                onClick={target.onActivate}
+                className={cn(baseClass, 'font-medium transition-colors hover:bg-muted/60')}
+            >
+                {body}
+            </Button>
+        );
+    }
+
+    // Deleted or unresolvable resource: no navigation target, render a non-interactive chip.
+    return <span className={cn(baseClass, 'text-muted')}>{body}</span>;
+}
+
+interface ResourceActivityLinkListProps {
+    resources: AgentResourceReference[];
+    workflowRunId?: string;
+    className?: string;
+}
+
+/** Inline action + deep-link presentation for completed tool timeline rows. */
+export function ResourceActivityLinkList({ resources, workflowRunId, className }: ResourceActivityLinkListProps) {
+    const { t } = useUITranslation();
+    if (resources.length === 0) return null;
+
+    return (
+        <div
+            className={cn('flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1', className)}
+            data-agent-resource-activity
+        >
+            {resources.map((resource) => {
+                const actionLabel =
+                    resource.action === 'created'
+                        ? t('agent.resourceActionCreated')
+                        : resource.action === 'deleted'
+                          ? t('agent.resourceActionDeleted')
+                          : t('agent.resourceActionUpdated');
+                return (
+                    <span
+                        key={`${resource.type}:${resource.id}:${resource.action}`}
+                        className="inline-flex min-w-0 items-center gap-1.5"
+                    >
+                        <span className="shrink-0 text-sm text-muted">{actionLabel}</span>
+                        <ResourceChip
+                            resource={resource}
+                            workflowRunId={workflowRunId}
+                            showAction={false}
+                            className="py-0.5"
+                        />
+                    </span>
+                );
+            })}
+        </div>
+    );
+}
+
+interface ResourceChipListProps {
+    resources: AgentResourceReference[];
+    workflowRunId?: string;
+    className?: string;
+}
+
+export function ResourceChipList({ resources, workflowRunId, className }: ResourceChipListProps) {
+    if (resources.length === 0) return null;
+    return (
+        <div className={cn('flex flex-wrap gap-1.5', className)}>
+            {resources.map((resource) => (
+                <ResourceChip
+                    key={`${resource.type}:${resource.id}:${resource.action}`}
+                    resource={resource}
+                    workflowRunId={workflowRunId}
+                />
+            ))}
+        </div>
+    );
+}