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

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

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from '@testing-library/react';
+import type React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
+
+afterEach(() => cleanup());
+
+describe('createAgentMarkdownAnchor', () => {
+    it.each([
+        'https://example.com/store/objects/doc-1?view=full#section',
+        '//example.com/store/collections/col-1?view=full#section',
+    ])('keeps external resource-shaped URLs external: %s', (href) => {
+        const StoreLinkComponent = vi.fn(() => null);
+        const CollectionLinkComponent = vi.fn(() => null);
+        const Anchor = createAgentMarkdownAnchor({ StoreLinkComponent, CollectionLinkComponent });
+
+        render(<Anchor href={href}>External</Anchor>);
+
+        expect(screen.getByRole('link', { name: 'External' }).getAttribute('href')).toBe(href);
+        expect(screen.getByRole('link', { name: 'External' }).getAttribute('target')).toBe('_blank');
+        expect(StoreLinkComponent).not.toHaveBeenCalled();
+        expect(CollectionLinkComponent).not.toHaveBeenCalled();
+    });
+
+    it('passes a clean document id and styling to the host document link', () => {
+        const StoreLinkComponent = ({
+            href,
+            documentId,
+            className,
+            children,
+        }: {
+            href: string;
+            documentId: string;
+            className?: string;
+            children: React.ReactNode;
+        }) => (
+            <a href={href} className={className} data-document-id={documentId}>
+                {children}
+            </a>
+        );
+        const Anchor = createAgentMarkdownAnchor({
+            StoreLinkComponent,
+            addStickyParams: (href) => `${href}&a=account-1`,
+        });
+
+        render(
+            <Anchor href="/store/objects/doc-1?revision=rev-1#properties" className="resource-link">
+                Document
+            </Anchor>,
+        );
+
+        const link = screen.getByRole('link', { name: 'Document' });
+        expect(link.getAttribute('data-document-id')).toBe('doc-1');
+        expect(link.getAttribute('href')).toBe('/store/objects/doc-1?revision=rev-1#properties&a=account-1');
+        expect(link.className).toBe('resource-link');
+    });
+
+    it('passes a clean collection id to the host collection link', () => {
+        const CollectionLinkComponent = ({
+            href,
+            collectionId,
+            children,
+        }: {
+            href: string;
+            collectionId: string;
+            children: React.ReactNode;
+        }) => (
+            <a href={href} data-collection-id={collectionId}>
+                {children}
+            </a>
+        );
+        const Anchor = createAgentMarkdownAnchor({ CollectionLinkComponent });
+
+        render(<Anchor href="/store/collections/col-1?tab=objects#top">Collection</Anchor>);
+
+        expect(screen.getByRole('link', { name: 'Collection' }).getAttribute('data-collection-id')).toBe('col-1');
+    });
+});

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

@@ -0,0 +1,94 @@
+import { NavLink } from '@vertesia/ui/router';
+import type React from 'react';
+
+/** Host-provided renderer for store/document links (e.g. to open a side panel instead of navigating). */
+export type StoreLinkComponentType = React.ComponentType<{
+    href: string;
+    documentId: string;
+    children: React.ReactNode;
+    className?: string;
+}>;
+
+/** Host-provided renderer for store/collection links. */
+export type CollectionLinkComponentType = React.ComponentType<{
+    href: string;
+    collectionId: string;
+    children: React.ReactNode;
+    className?: string;
+}>;
+
+export interface AgentMarkdownAnchorOptions {
+    /** Custom component to render store/document links instead of default NavLink navigation. */
+    StoreLinkComponent?: StoreLinkComponentType;
+    /** Custom component to render store/collection links instead of default NavLink navigation. */
+    CollectionLinkComponent?: CollectionLinkComponentType;
+    /**
+     * Applies tenant sticky params (account `a` / project `p`) to internal routes so copy-link and
+     * open-in-new-tab preserve the current tenant. Left undefined when no router is in scope.
+     */
+    addStickyParams?: (href: string) => string;
+}
+
+interface AnchorProps {
+    node?: unknown;
+    ref?: unknown;
+    href?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+function getInternalRouteId(href: string, routePrefix: string): string | undefined {
+    if (!href.startsWith(routePrefix)) {
+        return undefined;
+    }
+    return href.slice(routePrefix.length).split(/[/?#]/, 1)[0] || undefined;
+}
+
+/**
+ * Builds the markdown `a` renderer used across agent chat.
+ *
+ * Custom-scheme links (`store:`, `collection:`, `interaction:`, `prompt:`, ...) are resolved by the
+ * host's AgentResourceResolver upstream in MarkdownLink, so navigable targets reach this renderer as
+ * concrete paths. We route relative paths through NavLink (preserving tenant params); only document
+ * and collection paths get the optional host-provided link components. External URLs open in a new
+ * tab, matching prior behavior.
+ */
+export function createAgentMarkdownAnchor(options: AgentMarkdownAnchorOptions = {}) {
+    const { StoreLinkComponent, CollectionLinkComponent, addStickyParams } = options;
+
+    return function AgentMarkdownAnchor({ node: _node, ref: _ref, ...props }: AnchorProps) {
+        const href = props.href || '';
+        const isInternal = href.startsWith('/') && !href.startsWith('//');
+        const withParams = isInternal && addStickyParams ? addStickyParams(href) : href;
+        const documentId = isInternal ? getInternalRouteId(href, '/store/objects/') : undefined;
+
+        if (documentId && StoreLinkComponent) {
+            return (
+                <StoreLinkComponent href={withParams} documentId={documentId} className={props.className}>
+                    {props.children}
+                </StoreLinkComponent>
+            );
+        }
+
+        const collectionId = isInternal ? getInternalRouteId(href, '/store/collections/') : undefined;
+        if (collectionId && CollectionLinkComponent) {
+            return (
+                <CollectionLinkComponent href={withParams} collectionId={collectionId} className={props.className}>
+                    {props.children}
+                </CollectionLinkComponent>
+            );
+        }
+
+        // Any other relative in-app path (e.g. /studio/interactions/:id, /store/workflows/:id)
+        // navigates internally so tenant params are preserved and the SPA is not reloaded.
+        if (isInternal) {
+            return (
+                <NavLink href={withParams} className={props.className} topLevelNav>
+                    {props.children}
+                </NavLink>
+            );
+        }
+
+        return <a {...props} target="_blank" rel="noopener noreferrer" />;
+    };
+}

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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import type { VertesiaClient } from '@vertesia/client';
 import { type AgentMessage, AgentMessageType } from '@vertesia/common';
 import React from 'react';
@@ -6,6 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { I18nProvider } from '../../../../i18n/index.js';
 import { ReactRouterContext, type RouterContext } from '../../../../router/index.js';
 import { UserSession, UserSessionContext } from '../../../../session/index.js';
+import { AgentResourceResolverProvider } from '../../../../widgets/markdown/AgentResourceResolver';
 import AllMessagesMixed from './AllMessagesMixed';
 import type { StreamingData } from './utils';
 
@@ -20,6 +21,30 @@ function makeMessage(overrides: Partial<AgentMessage>): AgentMessage {
     };
 }
 
+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;
+}
+
+const testResourceResolver = (resource: { type: string; id: string }) => ({
+    kind: 'navigate' as const,
+    href: `/resources/${resource.type}/${encodeURIComponent(resource.id)}`,
+});
+
 function renderSummary(
     messages: AgentMessage[],
     isCompleted = false,
@@ -30,15 +55,19 @@ function renderSummary(
 
     return render(
         <I18nProvider lng="en">
-            <AllMessagesMixed
-                messages={messages}
-                bottomRef={bottomRef}
-                viewMode="sliding"
-                isCompleted={isCompleted}
-                artifactRunId="run-1"
-                streamingMessages={streamingMessages}
-                {...props}
-            />
+            <ReactRouterContext.Provider value={makeRouterContext()}>
+                <AgentResourceResolverProvider value={testResourceResolver}>
+                    <AllMessagesMixed
+                        messages={messages}
+                        bottomRef={bottomRef}
+                        viewMode="sliding"
+                        isCompleted={isCompleted}
+                        artifactRunId="run-1"
+                        streamingMessages={streamingMessages}
+                        {...props}
+                    />
+                </AgentResourceResolverProvider>
+            </ReactRouterContext.Provider>
         </I18nProvider>,
     );
 }
@@ -54,35 +83,22 @@ function renderStacked(
             getArtifactDownloadUrl: vi.fn(),
         },
     } as unknown as VertesiaClient);
-    const routerContext = {
-        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;
+    const routerContext = makeRouterContext();
 
     return render(
         <I18nProvider lng="en">
             <ReactRouterContext.Provider value={routerContext}>
                 <UserSessionContext.Provider value={session}>
-                    <AllMessagesMixed
-                        messages={messages}
-                        bottomRef={bottomRef}
-                        viewMode="stacked"
-                        isCompleted={isCompleted}
-                        artifactRunId="run-1"
-                        {...props}
-                    />
+                    <AgentResourceResolverProvider value={testResourceResolver}>
+                        <AllMessagesMixed
+                            messages={messages}
+                            bottomRef={bottomRef}
+                            viewMode="stacked"
+                            isCompleted={isCompleted}
+                            artifactRunId="run-1"
+                            {...props}
+                        />
+                    </AgentResourceResolverProvider>
                 </UserSessionContext.Provider>
             </ReactRouterContext.Provider>
         </I18nProvider>,
@@ -116,6 +132,33 @@ describe('AllMessagesMixed summary view', () => {
         expect(screen.getByLabelText('Message consumed')).not.toBeNull();
     });
 
+    it('renders structured document editing input as a compact card', () => {
+        renderSummary([
+            makeMessage({
+                timestamp: 1_000,
+                type: AgentMessageType.QUESTION,
+                message: 'Add one concrete example.',
+                details: {
+                    editing_action: {
+                        operation_id: 'operation-1',
+                        resource: { kind: 'store_document', document_id: 'document-1', name: 'Launch plan' },
+                        action: 'comment',
+                        anchor: {
+                            block_id: 'list_item:10:24',
+                            block_type: 'list_item',
+                            exact_text: '- Preserve unrelated sections.',
+                        },
+                        comment: 'Add one concrete example.',
+                    },
+                },
+            }),
+        ]);
+
+        expect(document.querySelector('[data-document-edit-action="comment"]')).not.toBeNull();
+        expect(screen.getByText('Add one concrete example.')).not.toBeNull();
+        expect(screen.queryByText('operation-1')).toBeNull();
+    });
+
     it('renders delivery status on user messages in stacked view', () => {
         renderStacked([
             makeMessage({
@@ -215,6 +258,58 @@ describe('AllMessagesMixed summary view', () => {
         expect(screen.getByText('Found 5 results')).not.toBeNull();
     });
 
+    it('replaces a completed tool’s progress title with an immediately visible resource deep link', () => {
+        renderSummary(
+            [
+                makeMessage({
+                    timestamp: 1_000,
+                    type: AgentMessageType.QUESTION,
+                    message: 'Create a market news agent.',
+                }),
+                makeMessage({
+                    timestamp: 2_000,
+                    message: 'Creating the Market Impact News agent...',
+                    details: {
+                        event_class: 'activity',
+                        tool: 'create_interaction',
+                        tool_status: 'completed',
+                        tool_event: 'completed',
+                        tool_run_id: 'tool-1',
+                        duration_ms: 1_032,
+                        resources: [
+                            {
+                                type: 'interaction',
+                                id: 'interaction-1',
+                                label: 'Daily Market Impact News Agent',
+                                action: 'created',
+                            },
+                        ],
+                    },
+                }),
+            ],
+            true,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: /Worked\s*for/ }));
+
+        const resourceActivity = document.querySelector('[data-agent-resource-activity]');
+        expect(resourceActivity).not.toBeNull();
+        expect(within(resourceActivity as HTMLElement).getByText('Created')).not.toBeNull();
+        const resourceLink = within(resourceActivity as HTMLElement).getByRole('link', {
+            name: /Daily Market Impact News Agent/,
+        });
+        expect(resourceLink.getAttribute('href')).toContain('/resources/interaction/interaction-1');
+        expect(resourceLink.textContent).toBe('Daily Market Impact News Agent');
+        expect(screen.queryByText('Creating the Market Impact News agent...')).toBeNull();
+
+        fireEvent.click(screen.getByRole('button', { name: /Show details: Daily Market Impact News Agent/ }));
+        expect(screen.getByText('create_interaction')).not.toBeNull();
+        expect(document.querySelector('[data-agent-tool-resources]')).toBeNull();
+        expect(screen.queryByText(/"type":\s*"interaction"/)).toBeNull();
+        expect(screen.queryByText(/"duration_ms":\s*1032/)).toBeNull();
+        expect(screen.queryByText('Details')).toBeNull();
+    });
+
     it('keeps same-iteration tool detail panels matched to their own tool identity', () => {
         renderSummary(
             [
@@ -399,7 +494,12 @@ describe('AllMessagesMixed summary view', () => {
 
         fireEvent.click(screen.getByRole('button', { name: /Allow once/ }));
 
-        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once', {
+            tool_approval_response: {
+                decision: 'allow_once',
+                approval_key: 'create_document:name:News Headlines Today',
+            },
+        });
     });
 
     it('keeps an approved tool approval continuation in the same active work row', () => {
@@ -2238,3 +2338,131 @@ describe('AllMessagesMixed summary view', () => {
         expect(screen.getByText('Prepared and saved artifact to files/US_News_Report_2026-06-22.md')).not.toBeNull();
     });
 });
+
+describe('AllMessagesMixed resource summary — playback clipping', () => {
+    const resourceMsg = (id: string, label: string, ts: number) =>
+        makeMessage({
+            timestamp: ts,
+            type: AgentMessageType.THOUGHT,
+            details: {
+                event_class: 'activity',
+                tool: 'create_document',
+                tool_status: 'completed',
+                tool_event: 'completed',
+                resources: [{ type: 'document', id, label, action: 'created' }],
+            },
+        });
+
+    const fullHistory = [
+        makeMessage({ timestamp: 1000, type: AgentMessageType.QUESTION, message: 'first' }),
+        resourceMsg('doc-a', 'Doc A', 2000),
+        makeMessage({ timestamp: 3000, type: AgentMessageType.COMPLETE, message: '' }),
+        makeMessage({ timestamp: 4000, type: AgentMessageType.QUESTION, message: 'second' }),
+        resourceMsg('doc-b', 'Doc B', 5000),
+        makeMessage({ timestamp: 6000, type: AgentMessageType.COMPLETE, message: '' }),
+    ];
+
+    it('shows resources up to the playback cursor but hides ones created later', () => {
+        // Scrubbed to the end of the first turn: clipped view stops at t=3000; full history has more.
+        renderStacked(fullHistory.slice(0, 3), false, { workstreamSourceMessages: fullHistory });
+
+        expect(screen.getByText('Doc A')).not.toBeNull();
+        expect(screen.queryByText('Doc B')).toBeNull();
+    });
+
+    it('shows all completed turns’ resources when live/at-latest', () => {
+        renderStacked(fullHistory, true, { workstreamSourceMessages: fullHistory });
+
+        expect(screen.getByText('Doc A')).not.toBeNull();
+        expect(screen.getByText('Doc B')).not.toBeNull();
+    });
+
+    it('shows the latest turn summary after a final answer while the workflow remains interactive', () => {
+        const answerEndedTurn = [
+            makeMessage({ timestamp: 1000, type: AgentMessageType.QUESTION, message: 'Create a document.' }),
+            resourceMsg('doc-a', 'Doc A', 2000),
+            makeMessage({ timestamp: 3000, type: AgentMessageType.ANSWER, message: 'The document is ready.' }),
+        ];
+
+        renderStacked(answerEndedTurn, false);
+
+        expect(screen.getByText('Doc A')).not.toBeNull();
+    });
+});
+
+describe('AllMessagesMixed — stopped duration with interleaved resource summary', () => {
+    it('computes the stopped duration from the previous group, not the inserted summary', () => {
+        const resourceMsg = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.THOUGHT,
+            details: {
+                event_class: 'activity',
+                tool: 'create_document',
+                tool_status: 'completed',
+                tool_event: 'completed',
+                resources: [{ type: 'document', id: 'doc-a', label: 'Doc A', action: 'created' }],
+            },
+        });
+        const messages = [
+            makeMessage({ timestamp: 1000, type: AgentMessageType.QUESTION, message: 'first' }),
+            resourceMsg,
+            makeMessage({ timestamp: 4000, type: AgentMessageType.QUESTION, message: 'second' }),
+            makeMessage({
+                timestamp: 5000,
+                type: AgentMessageType.THOUGHT,
+                details: { event_class: 'activity', tool: 'search', tool_status: 'completed', tool_event: 'completed' },
+            }),
+            makeMessage({
+                timestamp: 8000,
+                type: AgentMessageType.IDLE,
+                message: 'Stopped.',
+                details: { status_reason: 'user_stopped' },
+            }),
+        ];
+
+        renderStacked(messages, true);
+
+        // Turn 1's summary is interleaved before turn 2, but the stopped duration must still be
+        // measured from the previous *group* (the search tool at t=5000 → 3s), not the summary.
+        expect(screen.getByText('Doc A')).not.toBeNull();
+        expect(screen.getByText('You stopped after 3s')).not.toBeNull();
+    });
+});
+
+describe('AllMessagesMixed resource summary — same-timestamp cursor clipping', () => {
+    it('excludes a later message sharing the cursor timestamp (position-based clip)', () => {
+        const docA = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.THOUGHT,
+            details: {
+                event_class: 'activity',
+                tool: 'create_document',
+                tool_status: 'completed',
+                resources: [{ type: 'document', id: 'doc-a', label: 'Doc A', action: 'created' }],
+            },
+        });
+        const cursor = makeMessage({ timestamp: 2000, type: AgentMessageType.COMPLETE, message: 'c1' });
+        const docB = makeMessage({
+            timestamp: 2000, // same millisecond as the cursor, but ordered AFTER it
+            type: AgentMessageType.THOUGHT,
+            details: {
+                event_class: 'activity',
+                tool: 'create_document',
+                tool_status: 'completed',
+                resources: [{ type: 'document', id: 'doc-b', label: 'Doc B', action: 'created' }],
+            },
+        });
+        const fullHistory = [
+            makeMessage({ timestamp: 1000, type: AgentMessageType.QUESTION, message: 'first' }),
+            docA,
+            cursor,
+            docB,
+        ];
+
+        // Scrubbed so the clipped view ends at the cursor (shares its timestamp with the later Doc B).
+        renderStacked(fullHistory.slice(0, 3), false, { workstreamSourceMessages: fullHistory });
+
+        expect(screen.getByText('Doc A')).not.toBeNull();
+        expect(screen.queryByText('Doc B')).toBeNull();
+    });
+});