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

package/src/features/agent/chat/DocumentEditingActionCard.tsx

@@ -0,0 +1,210 @@
+import { cn } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import {
+    diffWordSegments,
+    type MarkdownBlockType,
+    type MarkdownEditingAction,
+    type MarkdownEditingResource,
+} from '@vertesia/ui/widgets';
+import { MessageSquareText, PencilLine } from 'lucide-react';
+import { type ReactNode, useMemo } from 'react';
+import { CollapsibleAgentMarkdown } from './ModernAgentOutput/CollapsibleAgentMarkdown.js';
+
+const BLOCK_TYPES = new Set<MarkdownBlockType>([
+    'heading',
+    'paragraph',
+    'list',
+    'list_item',
+    'blockquote',
+    'code_block',
+    'table',
+    'separator',
+]);
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+    return value && typeof value === 'object' && !Array.isArray(value) ? (value as Record<string, unknown>) : undefined;
+}
+
+function readString(record: Record<string, unknown> | undefined, key: string): string | undefined {
+    const value = record?.[key];
+    return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+function parseResource(value: unknown): MarkdownEditingResource | undefined {
+    const resource = asRecord(value);
+    const kind = readString(resource, 'kind');
+    if (kind === 'store_document') {
+        const documentId = readString(resource, 'document_id');
+        if (!documentId) return undefined;
+        const name = readString(resource, 'name');
+        return { kind, document_id: documentId, ...(name ? { name } : {}) };
+    }
+    if (kind === 'agent_artifact') {
+        const runId = readString(resource, 'run_id');
+        const path = readString(resource, 'path');
+        return runId && path ? { kind, run_id: runId, path } : undefined;
+    }
+    return undefined;
+}
+
+export function parseMarkdownEditingAction(value: unknown): MarkdownEditingAction | undefined {
+    const action = asRecord(value);
+    const anchor = asRecord(action?.anchor);
+    const operationId = readString(action, 'operation_id');
+    const actionType = readString(action, 'action');
+    const blockId = readString(anchor, 'block_id');
+    const blockType = readString(anchor, 'block_type');
+    const exactText = readString(anchor, 'exact_text');
+    const resource = parseResource(action?.resource);
+    if (
+        !operationId ||
+        (actionType !== 'comment' && actionType !== 'edit') ||
+        !blockId ||
+        !blockType ||
+        !BLOCK_TYPES.has(blockType as MarkdownBlockType) ||
+        !exactText ||
+        !resource
+    ) {
+        return undefined;
+    }
+
+    const baseVersion = readString(action, 'base_version');
+    const comment = readString(action, 'comment');
+    const userChange = asRecord(action?.user_change);
+    const before = readString(userChange, 'before');
+    const after = readString(userChange, 'after');
+    if (actionType === 'comment' && !comment) return undefined;
+    if (actionType === 'edit' && (!before || !after)) return undefined;
+
+    const updatedDocumentId = readString(action, 'updated_document_id');
+    return {
+        operation_id: operationId,
+        resource,
+        ...(baseVersion ? { base_version: baseVersion } : {}),
+        action: actionType,
+        anchor: {
+            block_id: blockId,
+            block_type: blockType as MarkdownBlockType,
+            exact_text: exactText,
+        },
+        ...(comment ? { comment } : {}),
+        ...(before && after ? { user_change: { before, after } } : {}),
+        ...(action?.applied === true ? { applied: true } : {}),
+        ...(updatedDocumentId ? { updated_document_id: updatedDocumentId } : {}),
+    };
+}
+
+function shortenId(id: string): string {
+    return id.length > 12 ? `${id.slice(0, 4)}…${id.slice(-4)}` : id;
+}
+
+function resourceLabel(resource: MarkdownEditingResource): string {
+    if (resource.kind === 'store_document') return resource.name || shortenId(resource.document_id);
+    return resource.path;
+}
+
+// A referenced block is a preview, not a document title — keep headings at body scale so a heading
+// block doesn't render as a full-size H1, and trim the outer block margins.
+const COMPACT_MARKDOWN_CLASS = [
+    '[&_h1]:text-base [&_h2]:text-base [&_h3]:text-base [&_h4]:text-base [&_h5]:text-base [&_h6]:text-base',
+    '[&_h1]:leading-snug [&_h2]:leading-snug [&_h3]:leading-snug',
+    '[&_:first-child]:mt-0 [&_:last-child]:mb-0',
+].join(' ');
+
+function SourcePreview({ children, className }: { children: ReactNode; className?: string }) {
+    return (
+        <pre
+            className={cn(
+                'm-0 max-h-48 overflow-auto whitespace-pre-wrap font-mono text-xs leading-5 text-foreground/80',
+                className,
+            )}
+        >
+            {children}
+        </pre>
+    );
+}
+
+function ChangeDiff({ before, after }: { before: string; after: string }) {
+    const segments = useMemo(() => diffWordSegments(before, after), [before, after]);
+    return (
+        <SourcePreview>
+            {segments.map((segment, index) => {
+                if (segment.type === 'removed') {
+                    return (
+                        <del
+                            key={index}
+                            className="rounded-xs bg-mixer-destructive/15 text-destructive line-through decoration-destructive/50"
+                        >
+                            {segment.text}
+                        </del>
+                    );
+                }
+                if (segment.type === 'added') {
+                    return (
+                        <ins key={index} className="rounded-xs bg-mixer-success/15 text-success no-underline">
+                            {segment.text}
+                        </ins>
+                    );
+                }
+                return <span key={index}>{segment.text}</span>;
+            })}
+        </SourcePreview>
+    );
+}
+
+export function DocumentEditingActionCard({ action }: { action: MarkdownEditingAction }) {
+    const { t } = useUITranslation();
+    const isComment = action.action === 'comment';
+    const isApplied = action.applied === true;
+    const blockType = action.anchor.block_type.replaceAll('_', ' ');
+    const Icon = isComment ? MessageSquareText : PencilLine;
+    const artifactRunId = action.resource.kind === 'agent_artifact' ? action.resource.run_id : undefined;
+
+    return (
+        <div className="min-w-0 space-y-2 text-start" data-document-edit-action={action.action}>
+            <div className="flex min-w-0 items-center gap-1.5 text-sm text-muted">
+                <Icon className="size-4 shrink-0" aria-hidden="true" />
+                <span className="shrink-0 font-medium text-foreground">
+                    {isComment
+                        ? t('agent.documentEditCardComment')
+                        : isApplied
+                          ? t('agent.documentEditCardApplied')
+                          : t('agent.documentEditCardDirectEdit')}
+                </span>
+                <span aria-hidden="true">·</span>
+                <span className="shrink-0 capitalize">{blockType}</span>
+                <span aria-hidden="true">·</span>
+                <span className="truncate">{resourceLabel(action.resource)}</span>
+            </div>
+
+            {isComment ? (
+                <>
+                    {action.comment ? (
+                        <CollapsibleAgentMarkdown
+                            artifactRunId={artifactRunId}
+                            disableCollapse
+                            className={COMPACT_MARKDOWN_CLASS}
+                        >
+                            {action.comment}
+                        </CollapsibleAgentMarkdown>
+                    ) : null}
+                    <CollapsibleAgentMarkdown
+                        artifactRunId={artifactRunId}
+                        disableCollapse
+                        className={cn(
+                            'border-s-2 border-mixer-muted/30 ps-3 text-foreground/70',
+                            COMPACT_MARKDOWN_CLASS,
+                        )}
+                    >
+                        {action.anchor.exact_text}
+                    </CollapsibleAgentMarkdown>
+                </>
+            ) : (
+                <ChangeDiff
+                    before={action.user_change?.before ?? action.anchor.exact_text}
+                    after={action.user_change?.after ?? ''}
+                />
+            )}
+        </div>
+    );
+}

package/src/features/agent/chat/ModernAgentConversation.test.tsx

@@ -85,53 +85,79 @@ vi.mock('./ModernAgentOutput/MessageInput', () => ({
     },
 }));
 
-vi.mock('./ModernAgentOutput/AllMessagesMixed', () => ({
-    default: ({
-        messages,
-        streamingMessages,
-        isCompleted,
-        bottomRef,
-        onSendMessage,
-        showInitialRequest,
-        renderRequestInputControls,
-        activeWorkstream,
-        onActiveWorkstreamChange,
-    }: {
-        messages: AgentMessage[];
-        streamingMessages: Map<string, unknown>;
-        isCompleted?: boolean;
-        bottomRef: React.RefObject<HTMLDivElement>;
-        onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
-        showInitialRequest?: boolean;
-        renderRequestInputControls?: boolean;
-        activeWorkstream?: string;
-        onActiveWorkstreamChange?: (workstreamId: string) => void;
-    }) => {
-        mocks.allMessagesMixedProps({
+vi.mock('./ModernAgentOutput/AllMessagesMixed', async () => {
+    const { useAgentResourceResolver } = await import('@vertesia/ui/widgets');
+    return {
+        default: ({
             messages,
             streamingMessages,
             isCompleted,
+            bottomRef,
             onSendMessage,
+            onOpenArtifact,
             showInitialRequest,
             renderRequestInputControls,
             activeWorkstream,
             onActiveWorkstreamChange,
-        });
-        return (
-            <div>
-                <div data-testid="rendered-message-count">{messages.length}</div>
-                <div data-testid="rendered-streaming-count">{streamingMessages.size}</div>
-                <button type="button" disabled={!onSendMessage} onClick={() => onSendMessage?.('follow up')}>
-                    inline send
-                </button>
-                <div ref={bottomRef} data-testid="bottom-sentinel" />
-            </div>
-        );
-    },
-}));
+        }: {
+            messages: AgentMessage[];
+            streamingMessages: Map<string, unknown>;
+            isCompleted?: boolean;
+            bottomRef: React.RefObject<HTMLDivElement>;
+            onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
+            onOpenArtifact?: (path: string) => void;
+            showInitialRequest?: boolean;
+            renderRequestInputControls?: boolean;
+            activeWorkstream?: string;
+            onActiveWorkstreamChange?: (workstreamId: string) => void;
+        }) => {
+            const resolveResource = useAgentResourceResolver();
+            const resourceTarget = resolveResource(
+                { type: 'document', id: 'document-1' },
+                { source: 'structured', workflowRunId: 'agent-run-1' },
+            );
+            mocks.allMessagesMixedProps({
+                messages,
+                streamingMessages,
+                isCompleted,
+                onSendMessage,
+                onOpenArtifact,
+                showInitialRequest,
+                renderRequestInputControls,
+                activeWorkstream,
+                onActiveWorkstreamChange,
+            });
+            return (
+                <div>
+                    <div data-testid="rendered-message-count">{messages.length}</div>
+                    <div data-testid="rendered-streaming-count">{streamingMessages.size}</div>
+                    <div data-testid="resource-target">
+                        {resourceTarget.kind === 'navigate' ? resourceTarget.href : resourceTarget.kind}
+                    </div>
+                    <button type="button" disabled={!onSendMessage} onClick={() => onSendMessage?.('follow up')}>
+                        inline send
+                    </button>
+                    <button
+                        type="button"
+                        disabled={!onOpenArtifact}
+                        onClick={() => onOpenArtifact?.('files/report.md')}
+                    >
+                        open artifact
+                    </button>
+                    <div ref={bottomRef} data-testid="bottom-sentinel" />
+                </div>
+            );
+        },
+    };
+});
 
 vi.mock('./AgentRightPanel.js', () => ({
-    AgentRightPanel: (props: { activeWorkstreams?: Array<{ workstream_id: string; status: string }> }) => {
+    AgentRightPanel: (props: {
+        activeWorkstreams?: Array<{ workstream_id: string; status: string }>;
+        onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
+        selectedArtifactPath?: string | null;
+        activeTab?: string;
+    }) => {
         mocks.rightPanelProps(props);
         return <div data-testid="agent-right-panel" />;
     },
@@ -213,6 +239,17 @@ function latestAllMessagesMixedProps() {
         | undefined;
 }
 
+function latestRightPanelProps() {
+    const calls = mocks.rightPanelProps.mock.calls;
+    return calls[calls.length - 1]?.[0] as
+        | {
+              onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
+              selectedArtifactPath?: string | null;
+              activeTab?: string;
+          }
+        | undefined;
+}
+
 describe('ModernAgentConversation send handling', () => {
     beforeEach(() => {
         vi.clearAllMocks();
@@ -253,6 +290,63 @@ describe('ModernAgentConversation send handling', () => {
         vi.restoreAllMocks();
     });
 
+    it('reports when the main agent turn starts and returns to idle', async () => {
+        const onAgentWorkingChange = vi.fn();
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.QUESTION, 'make an edit')],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        const view = renderConversation({ onAgentWorkingChange });
+
+        await waitFor(() => expect(onAgentWorkingChange).toHaveBeenLastCalledWith(true));
+
+        mockStreamState({
+            messages: [
+                createMessage(AgentMessageType.QUESTION, 'make an edit'),
+                createMessage(AgentMessageType.IDLE, 'Waiting for your command...'),
+            ],
+            isCompleted: true,
+            agentRunStatus: 'RUNNING',
+        });
+        view.rerender(
+            <ModernAgentConversation
+                agentRunId="agent-run-1"
+                title="Agent"
+                hideHeader
+                hideMessageInput
+                showRightPanel={false}
+                onAgentWorkingChange={onAgentWorkingChange}
+            />,
+        );
+
+        await waitFor(() => expect(onAgentWorkingChange).toHaveBeenLastCalledWith(false));
+    });
+
+    it('reports a failed workflow as idle even when its final stream message is an error', async () => {
+        const onAgentWorkingChange = vi.fn();
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ERROR, 'Agent failed')],
+            isCompleted: false,
+            agentRunStatus: 'FAILED',
+        });
+
+        renderConversation({ onAgentWorkingChange });
+
+        await waitFor(() => expect(onAgentWorkingChange).toHaveBeenLastCalledWith(false));
+    });
+
+    it('provides its resourceResolver prop to conversation content', () => {
+        mockStreamState({ messages: [createMessage(AgentMessageType.COMPLETE, 'done')] });
+
+        renderConversation({
+            resourceResolver: (resource) => ({ kind: 'navigate', href: `/host/documents/${resource.id}` }),
+        });
+
+        expect(screen.getByTestId('resource-target').textContent).toBe('/host/documents/document-1');
+    });
+
     it('restarts a terminal continuable run before sending the follow-up message', async () => {
         mockStreamState({
             messages: [createMessage(AgentMessageType.COMPLETE, 'done')],
@@ -286,6 +380,62 @@ describe('ModernAgentConversation send handling', () => {
         expect(mocks.updateOptimisticMessageStatus).toHaveBeenCalledWith(expect.any(String), 'received');
     });
 
+    it('opens a Markdown artifact in the side panel and allows collaboration for an active run', async () => {
+        mocks.useAgentPlans.mockReturnValue({
+            plans: [],
+            activePlanIndex: 0,
+            setActivePlanIndex: vi.fn(),
+            workstreamStatusMap: new Map(),
+            showInput: true,
+            showSlidingPanel: true,
+            setShowSlidingPanel: vi.fn(),
+        });
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.IDLE, 'Waiting for your command...')],
+            isCompleted: true,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({ showRightPanel: true, showArtifacts: true, interactive: true });
+
+        fireEvent.click(screen.getByRole('button', { name: 'open artifact' }));
+
+        await waitFor(() => {
+            expect(latestRightPanelProps()).toEqual(
+                expect.objectContaining({
+                    activeTab: 'artifacts',
+                    selectedArtifactPath: 'files/report.md',
+                    onSendMessage: expect.any(Function),
+                }),
+            );
+        });
+    });
+
+    it('keeps artifacts read-only when their originating run is completed', () => {
+        mocks.useAgentPlans.mockReturnValue({
+            plans: [],
+            activePlanIndex: 0,
+            setActivePlanIndex: vi.fn(),
+            workstreamStatusMap: new Map(),
+            showInput: true,
+            showSlidingPanel: true,
+            setShowSlidingPanel: vi.fn(),
+        });
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.COMPLETE, 'done')],
+            agentRunStatus: 'COMPLETED',
+        });
+
+        renderConversation({
+            showRightPanel: true,
+            showArtifacts: true,
+            interactive: true,
+            onRestart: vi.fn(),
+        });
+
+        expect(latestRightPanelProps()?.onSendMessage).toBeUndefined();
+    });
+
     it('binds ready uploaded files into the sent message and clears them after send', async () => {
         const clearProcessingFiles = vi.fn();
         const readyFile: ConversationFile = {
@@ -325,9 +475,8 @@ describe('ModernAgentConversation send handling', () => {
         });
 
         const userInputCall = mocks.sendSignal.mock.calls.find((call) => call[1] === 'UserInput');
-        expect((userInputCall?.[2] as { message: string }).message).toContain(
-            '[report.pdf](artifact:files/report.pdf)',
-        );
+        const userInputPayload = userInputCall?.[2] as { message: string } | undefined;
+        expect(userInputPayload?.message).toContain('[report.pdf](artifact:files/report.pdf)');
         await waitFor(() => {
             expect(clearProcessingFiles).toHaveBeenCalledTimes(1);
         });
@@ -1339,6 +1488,54 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('hides a stale request overlay when a terminal run cannot continue', () => {
+        mockStreamState({
+            messages: [
+                {
+                    ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),
+                    details: {
+                        ux: {
+                            options: [
+                                { id: 'red', label: 'Red' },
+                                { id: 'blue', label: 'Blue' },
+                            ],
+                        },
+                    },
+                },
+            ],
+            agentRunStatus: 'COMPLETED',
+        });
+
+        renderConversation();
+
+        expect(screen.queryByText('What is your favorite color?')).toBeNull();
+        expect(screen.queryByRole('button', { name: /Blue/ })).toBeNull();
+    });
+
+    it('keeps a pending request overlay when a terminal run can restart', () => {
+        mockStreamState({
+            messages: [
+                {
+                    ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),
+                    details: {
+                        ux: {
+                            options: [
+                                { id: 'red', label: 'Red' },
+                                { id: 'blue', label: 'Blue' },
+                            ],
+                        },
+                    },
+                },
+            ],
+            agentRunStatus: 'COMPLETED',
+        });
+
+        renderConversation({ onRestart: vi.fn() });
+
+        expect(screen.getByText('What is your favorite color?')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /Blue/ })).not.toBeNull();
+    });
+
     it('passes commented approval denial metadata through the request overlay signal', async () => {
         mockStreamState({
             messages: [