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

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

@@ -1,22 +1,30 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { AgentMessageType } from '@vertesia/common';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderWithProviders } from '../../../__tests__/test-utils.js';
 import { AgentRequestInputOverlay } from './AgentRequestInputOverlay';
 import type { RequestInputMessageWithUx } from './ModernAgentOutput/requestInputMessages';
 
+const mocks = vi.hoisted(() => ({
+    getCollectionStatus: vi.fn(),
+}));
+
 vi.mock('@vertesia/ui/session', () => ({
     useUserSession: () => ({
         client: {
             remoteMcpConnections: {
-                getCollectionStatus: vi.fn(),
+                getCollectionStatus: mocks.getCollectionStatus,
             },
         },
     }),
 }));
 
 vi.mock('../../oauth/RemoteMcpConnectionButton.js', () => ({
-    RemoteMcpConnectionButton: () => <button type="button">Connect</button>,
+    RemoteMcpConnectionButton: ({ onAuthChange }: { onAuthChange: () => void }) => (
+        <button type="button" onClick={onAuthChange}>
+            Connect
+        </button>
+    ),
 }));
 
 function createMcpRequestMessage(): RequestInputMessageWithUx {
@@ -27,6 +35,7 @@ function createMcpRequestMessage(): RequestInputMessageWithUx {
         workstream_id: 'main',
         message: 'Connect to Jira to continue.',
         details: {
+            request_id: 'request-mcp-1',
             ux: {
                 mcp_connect: {
                     app_install_id: 'app1',
@@ -46,6 +55,7 @@ function createToolApprovalRequestMessage(): RequestInputMessageWithUx {
         workstream_id: 'main',
         message: 'Approve Write Artifact: quotes.md?',
         details: {
+            request_id: 'write_artifact:name:quotes.md',
             tool_approval: {
                 tool_name: 'write_artifact',
                 tool_title: 'Write Artifact',
@@ -74,6 +84,11 @@ function createToolApprovalRequestMessage(): RequestInputMessageWithUx {
 }
 
 describe('AgentRequestInputOverlay', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mocks.getCollectionStatus.mockResolvedValue({ authenticated: true });
+    });
+
     it('lets the user decline an MCP connection request', () => {
         const onSendMessage = vi.fn();
 
@@ -86,7 +101,29 @@ describe('AgentRequestInputOverlay', () => {
         fireEvent.click(screen.getByRole('button', { name: /decline/i }));
 
         expect(onSendMessage).toHaveBeenCalledTimes(1);
-        expect(onSendMessage).toHaveBeenCalledWith("I don't want to connect to Jira. Continue without it.");
+        expect(onSendMessage).toHaveBeenCalledWith("I don't want to connect to Jira. Continue without it.", {
+            request_input_response: { request_id: 'request-mcp-1' },
+        });
+    });
+
+    it('correlates a successful MCP connection response', async () => {
+        const onMcpConnected = vi.fn();
+
+        renderWithProviders(
+            <AgentRequestInputOverlay
+                message={createMcpRequestMessage()}
+                onSendMessage={vi.fn()}
+                onMcpConnected={onMcpConnected}
+            />,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Connect' }));
+
+        await waitFor(() => {
+            expect(onMcpConnected).toHaveBeenCalledWith(expect.objectContaining({ collection_id: 'jira' }), {
+                request_input_response: { request_id: 'request-mcp-1' },
+            });
+        });
     });
 
     it('sends a commented tool approval denial with structured metadata', () => {
@@ -107,6 +144,9 @@ describe('AgentRequestInputOverlay', () => {
                 decision: 'deny_with_feedback',
                 approval_key: 'write_artifact:name:quotes.md',
             },
+            request_input_response: {
+                request_id: 'write_artifact:name:quotes.md',
+            },
         });
     });
 
@@ -125,6 +165,9 @@ describe('AgentRequestInputOverlay', () => {
                 decision: 'allow_for_run',
                 approval_key: 'write_artifact:name:quotes.md',
             },
+            request_input_response: {
+                request_id: 'write_artifact:name:quotes.md',
+            },
         });
     });
 
@@ -138,7 +181,9 @@ describe('AgentRequestInputOverlay', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Allow once' }));
 
         expect(onSendMessage).toHaveBeenCalledTimes(1);
-        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once', {
+            request_input_response: { request_id: 'write_artifact:name:quotes.md' },
+        });
     });
 
     it('renders legacy field-prefixed tool approval prompts with a friendly target', () => {

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

@@ -7,15 +7,17 @@ import { RemoteMcpConnectionButton } from '../../oauth/RemoteMcpConnectionButton
 import { AskUserWidget } from './AskUserWidget';
 import {
     getRequestInputDisplayText,
+    getRequestInputResponseMetadata,
     getToolApprovalResponseMetadata,
     type RequestInputMessageWithUx,
+    sendRequestInputResponse,
 } from './ModernAgentOutput/requestInputMessages';
 
 export interface AgentRequestInputOverlayProps {
     message?: RequestInputMessageWithUx;
     onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
     /** Called after the user connects the MCP server requested by request_mcp_connection. */
-    onMcpConnected?: (cfg: McpConnectUxConfig) => void;
+    onMcpConnected?: (cfg: McpConnectUxConfig, metadata?: Record<string, unknown>) => void;
     isLoading?: boolean;
     disabled?: boolean;
     className?: string;
@@ -81,11 +83,7 @@ export function AgentRequestInputOverlay({
     const displayText = getRequestInputDisplayText(message);
     const send = (value: string, metadata?: Record<string, unknown>) => {
         if (isDisabled) return;
-        if (metadata) {
-            onSendMessage?.(value, metadata);
-        } else {
-            onSendMessage?.(value);
-        }
+        sendRequestInputResponse(onSendMessage, message, value, metadata);
     };
 
     const wrapperClassName = cn(
@@ -102,7 +100,7 @@ export function AgentRequestInputOverlay({
                     <div className="min-w-0 text-sm leading-6 text-foreground/85">{displayText}</div>
                     <McpRequestInputControls
                         mcpConnect={mcpConnect}
-                        onMcpConnected={onMcpConnected}
+                        onMcpConnected={(cfg) => onMcpConnected?.(cfg, getRequestInputResponseMetadata(message))}
                         onDecline={() => send(t('agent.mcpDeclinedMessage', { name: mcpConnect.name }))}
                         disabled={isDisabled}
                     />

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

@@ -633,6 +633,10 @@ export interface AgentRightPanelProps {
     /** Show the Artifacts tab (opt-in, default false) */
     showArtifacts?: boolean;
     artifactRefreshKey?: number;
+    artifactRefreshDetails?: Record<string, unknown>;
+    selectedArtifactPath?: string | null;
+    onSelectedArtifactPathChange?: (path: string | null) => void;
+    onSendMessage?: (message: string, inputMetadata?: Record<string, unknown>) => void;
 
     // Panel control
     onClose: () => void;
@@ -672,6 +676,10 @@ function AgentRightPanelComponent({
     // Artifacts
     showArtifacts = false,
     artifactRefreshKey = 0,
+    artifactRefreshDetails,
+    selectedArtifactPath,
+    onSelectedArtifactPathChange,
+    onSendMessage,
 
     // Payload
     payloadContent,
@@ -811,7 +819,14 @@ function AgentRightPanelComponent({
             label: t('agent.artifacts'),
             content: withTabBoundary(
                 t('agent.artifacts'),
-                <ArtifactsTab runId={runId} refreshKey={artifactRefreshKey} />,
+                <ArtifactsTab
+                    runId={runId}
+                    refreshKey={artifactRefreshKey}
+                    refreshDetails={artifactRefreshDetails}
+                    selectedPath={selectedArtifactPath}
+                    onSelectedPathChange={onSelectedArtifactPathChange}
+                    onSendMessage={onSendMessage}
+                />,
             ),
             is_allowed: showArtifacts,
         },

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

@@ -0,0 +1,55 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../../i18n/index.js';
+import { ArtifactsTab } from './ArtifactsTab.js';
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({ client: {} }),
+}));
+
+vi.mock('@vertesia/ui/widgets', () => ({
+    ArtifactEditingSurface: ({ viewMode }: { viewMode?: 'components' | 'document' }) => (
+        <div data-testid="artifact-editing-surface" data-view-mode={viewMode} />
+    ),
+}));
+
+vi.mock('./hooks/useArtifacts.js', () => ({
+    useArtifacts: () => ({
+        tree: [],
+        flatFiles: [{ path: 'drafts/brief.md' }],
+        isLoading: false,
+        error: undefined,
+        refresh: vi.fn(),
+    }),
+}));
+
+afterEach(cleanup);
+
+function renderArtifactEditor(props?: Partial<ComponentProps<typeof ArtifactsTab>>) {
+    return render(
+        <I18nProvider lng="en">
+            <ArtifactsTab runId="run-1" selectedPath="drafts/brief.md" onSendMessage={vi.fn()} {...props} />
+        </I18nProvider>,
+    );
+}
+
+describe('ArtifactsTab', () => {
+    it('opens editable artifacts in block mode by default', () => {
+        renderArtifactEditor();
+
+        expect(screen.getByTestId('artifact-editing-surface').getAttribute('data-view-mode')).toBe('components');
+        expect(screen.getByRole('button', { name: 'Block mode' }).getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('allows switching from block mode to the full editor', () => {
+        renderArtifactEditor();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Edit mode' }));
+
+        expect(screen.getByTestId('artifact-editing-surface').getAttribute('data-view-mode')).toBe('document');
+        expect(screen.getByRole('button', { name: 'Edit mode' }).getAttribute('aria-pressed')).toBe('true');
+    });
+});

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

@@ -1,17 +1,21 @@
-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 } from '../../document-viewer/UniversalDocumentViewer.js';
@@ -22,6 +26,14 @@ const UniversalDocumentViewer = React.lazy(async () => {
     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
 // ---------------------------------------------------------------------------
@@ -30,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;
 
@@ -84,7 +88,7 @@ function TreeNode({
                             node={child}
                             depth={depth + 1}
                             runId={runId}
-                            onPreview={onPreview}
+                            onOpen={onOpen}
                             onDownload={onDownload}
                             downloadingPath={downloadingPath}
                             forceExpanded={forceExpanded}
@@ -97,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>
     );
 }
@@ -184,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':
@@ -226,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({
@@ -246,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);
@@ -259,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]);
@@ -280,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
@@ -345,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 */}
@@ -396,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}