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

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

@@ -47,6 +47,7 @@ export interface ParsedUserAttachments {
 interface AttachmentPreviewListProps {
     items: AttachmentPreviewItem[];
     artifactRunId?: string;
+    onOpenArtifact?: (path: string) => void;
     className?: string;
     align?: 'start' | 'end';
     variant?: 'composer' | 'message';
@@ -103,17 +104,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 +170,7 @@ function AttachmentPreview({
     artifactRunId,
     variant,
     onRemove,
+    onOpenArtifact,
     StoreLinkComponent,
     CollectionLinkComponent,
 }: {
@@ -165,6 +178,7 @@ function AttachmentPreview({
     artifactRunId?: string;
     variant: 'composer' | 'message';
     onRemove?: (fileId: string) => void;
+    onOpenArtifact?: (path: string) => void;
     StoreLinkComponent?: AttachmentPreviewListProps['StoreLinkComponent'];
     CollectionLinkComponent?: AttachmentPreviewListProps['CollectionLinkComponent'];
 }) {
@@ -338,6 +352,7 @@ function AttachmentPreview({
         <span className="relative inline-flex max-w-full">
             <AttachmentLink
                 item={item}
+                onOpenArtifact={onOpenArtifact}
                 StoreLinkComponent={StoreLinkComponent}
                 CollectionLinkComponent={CollectionLinkComponent}
             >
@@ -355,6 +370,7 @@ export function AttachmentPreviewList({
     align = 'start',
     variant = 'message',
     onRemove,
+    onOpenArtifact,
     StoreLinkComponent,
     CollectionLinkComponent,
 }: AttachmentPreviewListProps) {
@@ -369,6 +385,7 @@ export function AttachmentPreviewList({
                     artifactRunId={artifactRunId}
                     variant={variant}
                     onRemove={onRemove}
+                    onOpenArtifact={onOpenArtifact}
                     StoreLinkComponent={StoreLinkComponent}
                     CollectionLinkComponent={CollectionLinkComponent}
                 />

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

@@ -100,7 +100,9 @@ export default function Header({
     const controls = (
         <div
             className={cn(
-                isCompact ? 'flex flex-col items-center gap-1' : 'flex justify-end items-center gap-2 ms-auto',
+                isCompact
+                    ? 'flex flex-row items-center gap-1 lg:flex-col'
+                    : 'flex justify-end items-center gap-2 ms-auto',
             )}
         >
             {showPlanButton && (
@@ -177,7 +179,6 @@ export default function Header({
                     variant={isPlaybackEnabled ? 'primary' : 'ghost'}
                     onClick={onTogglePlayback}
                     aria-pressed={isPlaybackEnabled}
-                    aria-label={t('agent.rewind.label')}
                     title={t('agent.rewind.label')}
                     className={cn(
                         'transition-all duration-200 rounded-md',
@@ -376,7 +377,6 @@ function MoreDropdown({
                     size={compact ? 'icon' : 'xs'}
                     variant="ghost"
                     title={t('agent.moreActions')}
-                    aria-label={t('agent.moreActions')}
                     className={compact ? 'size-8 rounded-lg' : undefined}
                 >
                     <MoreVertical className="size-4" />

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

@@ -523,7 +523,6 @@ export default function MessageInput({
                                         variant="ghost"
                                         size="icon"
                                         className="size-8 rounded-full text-muted hover:bg-muted"
-                                        aria-label={t('agent.addAttachment')}
                                         title={t('agent.addAttachment')}
                                     >
                                         <PlusIcon className="size-4" />
@@ -654,7 +653,6 @@ export default function MessageInput({
                                 '[&_svg]:text-destructive disabled:[&_svg]:text-muted',
                             )}
                             title={t('agent.stopTooltip')}
-                            aria-label={t('agent.stopTooltip')}
                         >
                             {isStopping ? (
                                 <Spinner size="sm" />

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,12 +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 { getWorkstreamId } from './utils';
 
 /** className overrides for MessageItem — single source of truth for all className overrides. */
@@ -107,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) */
@@ -196,6 +201,7 @@ function MessageItemComponent({
     message,
     showPulsatingCircle = false,
     onSendMessage,
+    onOpenArtifact,
     requestInputAnswered = false,
     className,
     cardClassName,
@@ -303,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(() => {
@@ -366,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
@@ -465,6 +439,7 @@ function MessageItemComponent({
             >
                 <MarkdownRenderer
                     artifactRunId={runId}
+                    onArtifactOpen={onOpenArtifact}
                     onProposalSelect={(optionId) => onSendMessage?.(optionId)}
                     onProposalSubmit={(text) => onSendMessage?.(text)}
                     components={markdownComponents}
@@ -649,7 +624,9 @@ function MessageItemComponent({
                             options={askUserUx.options}
                             variant={askUserUx.variant}
                             multiSelect={askUserUx.multiSelect}
-                            onSelect={(optionId) => onSendMessage?.(optionId)}
+                            onSelect={(optionId) =>
+                                onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                            }
                             onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                             allowFreeResponse={!askUserUx.options?.length || !!askUserUx.free_response}
                             placeholder={askUserUx.free_response?.placeholder}
@@ -659,6 +636,8 @@ function MessageItemComponent({
                             compact
                             answered={requestInputAnswered}
                         />
+                    ) : editingAction ? (
+                        <DocumentEditingActionCard action={editingAction} />
                     ) : (
                         visibleMessageContent && (
                             <div
@@ -674,6 +653,7 @@ function MessageItemComponent({
                         <AttachmentPreviewList
                             items={messageAttachments}
                             artifactRunId={runId}
+                            onOpenArtifact={onOpenArtifact}
                             variant="message"
                             className={cn(visibleMessageContent && 'mt-3')}
                             StoreLinkComponent={StoreLinkComponent}
@@ -720,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}
@@ -787,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();
+    });
+});