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

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

@@ -1,25 +1,39 @@
-import { Button, Center, ErrorBox, Input, Modal, ModalBody, ModalTitle, Switch } from '@vertesia/ui/core';
+import { Button, Center, cn, ErrorBox, Input, Modal, ModalBody, ModalTitle, Switch, VTooltip } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
+import { ArtifactEditingSurface, type ArtifactSaveStatus, type MarkdownEditingAction } from '@vertesia/ui/widgets';
 import {
+    ArrowLeftIcon,
+    CheckIcon,
     ChevronDownIcon,
     ChevronRightIcon,
     DownloadIcon,
-    EyeIcon,
     FileIcon,
     FolderIcon,
     FolderOpenIcon,
     Loader2Icon,
     PackageIcon,
+    PenLineIcon,
     RefreshCwIcon,
+    Rows3Icon,
 } from 'lucide-react';
 import React, { useCallback, useId, useMemo, useState } from 'react';
-import {
-    type UniversalDocumentSource,
-    UniversalDocumentViewer,
-} from '../../document-viewer/UniversalDocumentViewer.js';
+import type { UniversalDocumentSource } from '../../document-viewer/UniversalDocumentViewer.js';
 import { type ArtifactTreeNode, useArtifacts } from './hooks/useArtifacts.js';
 
+const UniversalDocumentViewer = React.lazy(async () => {
+    const module = await import('../../document-viewer/UniversalDocumentViewer.js');
+    return { default: module.UniversalDocumentViewer };
+});
+
+/** Artifact file extensions that open in the Markdown editor rather than downloading. */
+const EDITABLE_ARTIFACT_EXTENSIONS = new Set(['md', 'markdown', 'mdx', 'txt']);
+
+function isEditableArtifact(path: string): boolean {
+    const extension = path.split('.').pop()?.toLowerCase();
+    return extension !== undefined && EDITABLE_ARTIFACT_EXTENSIONS.has(extension);
+}
+
 // ---------------------------------------------------------------------------
 // Tree node component
 // ---------------------------------------------------------------------------
@@ -28,26 +42,18 @@ interface TreeNodeProps {
     node: ArtifactTreeNode;
     depth: number;
     runId: string;
-    onPreview: (relativePath: string) => void;
+    onOpen: (relativePath: string) => void;
     onDownload: (relativePath: string) => void;
     downloadingPath: string | null;
     forceExpanded?: boolean;
 }
-
 //** Convert a raw directory segment (e.g. "out_files") into a readable label ("Out Files"). */
 function formatDirectoryLabel(name: string): string {
     return name.replace(/[_-]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
-function TreeNode({
-    node,
-    depth,
-    runId,
-    onPreview,
-    onDownload,
-    downloadingPath,
-    forceExpanded = false,
-}: TreeNodeProps) {
+function TreeNode({ node, depth, runId, onOpen, onDownload, downloadingPath, forceExpanded = false }: TreeNodeProps) {
+    const { t } = useUITranslation();
     const [expanded, setExpanded] = useState(false);
     const isExpanded = forceExpanded || expanded;
 
@@ -82,7 +88,7 @@ function TreeNode({
                             node={child}
                             depth={depth + 1}
                             runId={runId}
-                            onPreview={onPreview}
+                            onOpen={onOpen}
                             onDownload={onDownload}
                             downloadingPath={downloadingPath}
                             forceExpanded={forceExpanded}
@@ -95,45 +101,33 @@ function TreeNode({
     const isDownloading = downloadingPath === node.path;
 
     return (
-        <div
-            className="group flex min-w-0 items-center gap-1.5 rounded text-sm hover:bg-muted/30"
-            style={{ paddingInlineStart: `${depth * 14 + 4}px` }}
-        >
+        <div className="flex min-w-0 items-center gap-1">
             <Button
                 variant="unstyled"
-                className="flex min-w-0 flex-1 items-center justify-start gap-1.5 px-1 py-1 text-start"
-                onClick={() => onPreview(node.path)}
+                className="flex min-w-0 flex-1 items-center justify-start gap-1.5 rounded px-1 py-1 text-start text-sm hover:bg-muted/30"
+                style={{ paddingInlineStart: `${depth * 14 + 4}px` }}
+                onClick={() => onOpen(node.path)}
                 title={node.path}
             >
                 <span className="size-3.5 shrink-0" />
                 <FileIcon className="size-4 shrink-0 text-muted" />
                 <span className="min-w-0 truncate">{node.name}</span>
             </Button>
-            <div className="flex shrink-0 items-center pe-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
-                <Button
-                    variant="ghost"
-                    size="xs"
-                    className="h-6 w-6 p-0"
-                    onClick={() => onPreview(node.path)}
-                    aria-label="Preview artifact"
-                >
-                    <EyeIcon className="size-3.5" />
-                </Button>
-                <Button
-                    variant="ghost"
-                    size="xs"
-                    className="h-6 w-6 p-0"
-                    onClick={() => onDownload(node.path)}
-                    disabled={isDownloading}
-                    aria-label="Download artifact"
-                >
-                    {isDownloading ? (
-                        <Loader2Icon className="size-3.5 animate-spin text-info" />
-                    ) : (
-                        <DownloadIcon className="size-3.5" />
-                    )}
-                </Button>
-            </div>
+            <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 shrink-0 p-0"
+                onClick={() => onDownload(node.path)}
+                disabled={isDownloading}
+                aria-label={t('agent.download')}
+                title={t('agent.download')}
+            >
+                {isDownloading ? (
+                    <Loader2Icon className="size-3.5 animate-spin text-info" />
+                ) : (
+                    <DownloadIcon className="size-3.5" />
+                )}
+            </Button>
         </div>
     );
 }
@@ -182,8 +176,8 @@ function downloadUrl(url: string, filename: string) {
 }
 
 function getArtifactContentType(path: string): string | undefined {
-    const ext = path.split('.').pop()?.toLowerCase();
-    switch (ext) {
+    const extension = path.split('.').pop()?.toLowerCase();
+    switch (extension) {
         case 'css':
             return 'text/css';
         case 'gif':
@@ -224,6 +218,128 @@ function getArtifactContentType(path: string): string | undefined {
 interface ArtifactsTabProps {
     runId?: string;
     refreshKey?: number;
+    refreshDetails?: Record<string, unknown>;
+    selectedPath?: string | null;
+    onSelectedPathChange?: (path: string | null) => void;
+    onSendMessage?: (message: string, inputMetadata?: Record<string, unknown>) => void;
+}
+
+interface ArtifactMarkdownEditorProps {
+    runId: string;
+    path: string;
+    onBack: () => void;
+    onDownload: (path: string) => void;
+    refreshKey?: number;
+    refreshDetails?: Record<string, unknown>;
+    onSendMessage?: (message: string, inputMetadata?: Record<string, unknown>) => void;
+}
+
+function ArtifactMarkdownEditor({
+    runId,
+    path,
+    onBack,
+    onDownload,
+    refreshKey,
+    refreshDetails,
+    onSendMessage,
+}: ArtifactMarkdownEditorProps) {
+    const { t } = useUITranslation();
+    const [viewMode, setViewMode] = useState<'components' | 'document'>('components');
+    const [saveStatus, setSaveStatus] = useState<ArtifactSaveStatus>('idle');
+
+    const handleAction = (action: MarkdownEditingAction) => {
+        if (!onSendMessage) return;
+        const blockType = action.anchor.block_type.replaceAll('_', ' ');
+        const displayMessage = action.comment?.trim() || t('agent.editedSelectionMessage', { blockType });
+        onSendMessage(displayMessage, { editing_action: action });
+    };
+
+    return (
+        <div className="flex h-full min-h-0 flex-col">
+            <div className="flex shrink-0 items-center gap-1 border-b border-border/60 px-2 py-1">
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-8 shrink-0 rounded-md p-0"
+                    onClick={onBack}
+                    aria-label={t('agent.backToArtifacts')}
+                    title={t('agent.backToArtifacts')}
+                >
+                    <ArrowLeftIcon className="size-4 cn-rtl-flip" />
+                </Button>
+                <div className="flex min-w-0 flex-1 items-center gap-1.5">
+                    <span className="truncate text-sm font-medium" title={path}>
+                        {path.split('/').pop()}
+                    </span>
+                    {saveStatus === 'saving' ? (
+                        <VTooltip description={t('agent.savingWorkingCopy')} asChild>
+                            <Loader2Icon
+                                className="size-3.5 shrink-0 animate-spin text-muted"
+                                aria-label={t('agent.savingWorkingCopy')}
+                            />
+                        </VTooltip>
+                    ) : saveStatus === 'saved' ? (
+                        <VTooltip description={t('agent.savedToWorkingCopy')} asChild>
+                            <CheckIcon
+                                className="size-3.5 shrink-0 text-success"
+                                aria-label={t('agent.savedToWorkingCopy')}
+                            />
+                        </VTooltip>
+                    ) : null}
+                </div>
+                <div className="flex items-center gap-0.5">
+                    <Button
+                        variant={viewMode === 'components' ? 'primary' : 'ghost'}
+                        size="sm"
+                        className="size-8 shrink-0 rounded-md p-0"
+                        onClick={() => setViewMode('components')}
+                        aria-label={t('agent.blockMode')}
+                        aria-pressed={viewMode === 'components'}
+                        title={t('agent.blockMode')}
+                    >
+                        <Rows3Icon className="size-4" />
+                    </Button>
+                    <Button
+                        variant={viewMode === 'document' ? 'primary' : 'ghost'}
+                        size="sm"
+                        className="size-8 shrink-0 rounded-md p-0"
+                        onClick={() => setViewMode('document')}
+                        aria-label={t('agent.editMode')}
+                        aria-pressed={viewMode === 'document'}
+                        title={t('agent.editMode')}
+                    >
+                        <PenLineIcon className="size-4" />
+                    </Button>
+                </div>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-8 shrink-0 rounded-md p-0"
+                    onClick={() => onDownload(path)}
+                    aria-label={t('agent.download')}
+                    title={t('agent.download')}
+                >
+                    <DownloadIcon className="size-4" />
+                </Button>
+            </div>
+            <ArtifactEditingSurface
+                runId={runId}
+                path={path}
+                viewMode={viewMode}
+                refreshKey={refreshKey}
+                refreshDetails={refreshDetails}
+                readOnly={!onSendMessage}
+                onAction={handleAction}
+                onSaveStatusChange={setSaveStatus}
+                onSendMessage={onSendMessage ? (message) => onSendMessage(message) : undefined}
+                className={cn(
+                    'relative min-h-0 flex-1',
+                    // Edit mode self-scrolls; block mode needs the surface to scroll and pad its blocks.
+                    viewMode === 'document' ? 'overflow-hidden' : 'overflow-y-auto px-6 py-5',
+                )}
+            />
+        </div>
+    );
 }
 
 function ArtifactEmptyState({
@@ -244,7 +360,14 @@ function ArtifactEmptyState({
     );
 }
 
-function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
+function ArtifactsTabComponent({
+    runId,
+    refreshKey = 0,
+    refreshDetails,
+    selectedPath,
+    onSelectedPathChange,
+    onSendMessage,
+}: ArtifactsTabProps) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
     const [showSystem, setShowSystem] = useState(false);
@@ -257,6 +380,15 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
     const [downloadingPath, setDownloadingPath] = useState<string | null>(null);
     const [previewPath, setPreviewPath] = useState<string | null>(null);
     const [filterValue, setFilterValue] = useState('');
+    const [internalSelectedPath, setInternalSelectedPath] = useState<string | null>(null);
+    const activeSelectedPath = selectedPath === undefined ? internalSelectedPath : selectedPath;
+    const setSelectedPath = useCallback(
+        (path: string | null) => {
+            if (selectedPath === undefined) setInternalSelectedPath(path);
+            onSelectedPathChange?.(path);
+        },
+        [onSelectedPathChange, selectedPath],
+    );
     const normalizedFilterValue = filterValue.trim();
     const filteredTree = useMemo(() => filterArtifactTree(tree, normalizedFilterValue), [tree, normalizedFilterValue]);
     const visibleFileCount = useMemo(() => countTreeFiles(filteredTree), [filteredTree]);
@@ -278,9 +410,16 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
         [client, runId],
     );
 
-    const handlePreview = useCallback((relativePath: string) => {
-        setPreviewPath(relativePath);
-    }, []);
+    const handleOpen = useCallback(
+        (relativePath: string) => {
+            if (isEditableArtifact(relativePath)) {
+                setSelectedPath(relativePath);
+                return;
+            }
+            setPreviewPath(relativePath);
+        },
+        [setSelectedPath],
+    );
 
     const previewSource: UniversalDocumentSource | null =
         runId && previewPath
@@ -343,6 +482,20 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
         );
     }
 
+    if (activeSelectedPath) {
+        return (
+            <ArtifactMarkdownEditor
+                runId={runId}
+                path={activeSelectedPath}
+                refreshKey={refreshKey}
+                refreshDetails={refreshDetails}
+                onBack={() => setSelectedPath(null)}
+                onDownload={(path) => void handleDownload(path)}
+                onSendMessage={onSendMessage}
+            />
+        );
+    }
+
     return (
         <div className="flex flex-col h-full">
             {/* Top bar */}
@@ -394,7 +547,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                                 node={node}
                                 depth={0}
                                 runId={runId}
-                                onPreview={handlePreview}
+                                onOpen={handleOpen}
                                 onDownload={handleDownload}
                                 downloadingPath={downloadingPath}
                                 forceExpanded={!!normalizedFilterValue}
@@ -419,11 +572,19 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                 >
                     <ModalTitle show={false}>{previewSource.fileName}</ModalTitle>
                     <ModalBody className="h-full max-h-none p-0">
-                        <UniversalDocumentViewer
-                            source={previewSource}
-                            className="h-full"
-                            onDownload={() => previewPath && void handleDownload(previewPath)}
-                        />
+                        <React.Suspense
+                            fallback={
+                                <Center className="h-full">
+                                    <Loader2Icon className="size-6 animate-spin text-muted" />
+                                </Center>
+                            }
+                        >
+                            <UniversalDocumentViewer
+                                source={previewSource}
+                                className="h-full"
+                                onDownload={() => previewPath && void handleDownload(previewPath)}
+                            />
+                        </React.Suspense>
                     </ModalBody>
                 </Modal>
             )}

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

@@ -0,0 +1,105 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { I18nProvider } from '../../../i18n/index.js';
+import { DocumentEditingActionCard, parseMarkdownEditingAction } from './DocumentEditingActionCard.js';
+
+afterEach(cleanup);
+
+const 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.',
+};
+
+describe('DocumentEditingActionCard', () => {
+    it('parses and renders a compact comment card', () => {
+        const parsed = parseMarkdownEditingAction(action);
+        expect(parsed).toBeDefined();
+        if (!parsed) throw new Error('Expected a valid editing action');
+
+        render(
+            <I18nProvider lng="en">
+                <DocumentEditingActionCard action={parsed} />
+            </I18nProvider>,
+        );
+
+        expect(screen.getByText('Add one concrete example.')).not.toBeNull();
+        expect(screen.getByText('list item')).not.toBeNull();
+        expect(screen.getByText('Launch plan')).not.toBeNull();
+        expect(screen.queryByText('operation-1')).toBeNull();
+    });
+
+    it('renders an applied edit as a saved notification', () => {
+        const parsed = parseMarkdownEditingAction({
+            operation_id: 'operation-2',
+            resource: { kind: 'store_document', document_id: 'document-1', name: 'Launch plan' },
+            action: 'edit',
+            anchor: {
+                block_id: 'list:10:24',
+                block_type: 'list',
+                exact_text: '- Preserve unrelated sections.',
+            },
+            user_change: {
+                before: '- Preserve unrelated sections.',
+                after: '- Preserve unrelated sections.\n- And be fun',
+            },
+            applied: true,
+            updated_document_id: 'document-2',
+        });
+        expect(parsed).toBeDefined();
+        if (!parsed) throw new Error('Expected a valid editing action');
+        expect(parsed.applied).toBe(true);
+        expect(parsed.updated_document_id).toBe('document-2');
+
+        render(
+            <I18nProvider lng="en">
+                <DocumentEditingActionCard action={parsed} />
+            </I18nProvider>,
+        );
+
+        expect(screen.getByText('Edit applied')).not.toBeNull();
+        expect(screen.getByText('list')).not.toBeNull();
+        expect(screen.getByText('Launch plan')).not.toBeNull();
+    });
+
+    it('highlights the change as an inline diff', () => {
+        const parsed = parseMarkdownEditingAction({
+            operation_id: 'operation-3',
+            resource: { kind: 'store_document', document_id: 'document-1', name: 'Launch plan' },
+            action: 'edit',
+            anchor: {
+                block_id: 'paragraph:30:40',
+                block_type: 'paragraph',
+                exact_text: 'Keep the tone light.',
+            },
+            user_change: {
+                before: 'Keep the tone light.',
+                after: 'Keep the tone light. Session edit A.',
+            },
+        });
+        if (!parsed) throw new Error('Expected a valid editing action');
+
+        const { container } = render(
+            <I18nProvider lng="en">
+                <DocumentEditingActionCard action={parsed} />
+            </I18nProvider>,
+        );
+
+        const inserted = container.querySelector('ins');
+        expect(inserted?.textContent).toBe(' Session edit A.');
+        expect(container.querySelector('del')).toBeNull();
+        expect(screen.getByText('Keep the tone light.')).not.toBeNull();
+    });
+
+    it('rejects malformed editing metadata', () => {
+        expect(parseMarkdownEditingAction({ action: 'comment' })).toBeUndefined();
+    });
+});