@vertesia/ui 1.4.0-dev.20260615.051508Z → 1.4.0

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

@@ -18,8 +18,7 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import {
     CheckCircleIcon,
-    CheckIcon,
-    ChevronsUpDownIcon,
+    ChevronDownIcon,
     ClipboardCopyIcon,
     DownloadCloudIcon,
     FileTextIcon,
@@ -28,7 +27,7 @@ import {
     XCircleIcon,
     XIcon,
 } from 'lucide-react';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ArtifactsTab } from './ArtifactsTab.js';
 import { BrowserUseWidget, getLatestBrowserUseByWorkstream } from './BrowserUseWidget.js';
 import { DocumentPanel } from './DocumentPanel.js';
@@ -350,66 +349,257 @@ function WorkstreamsTab({ workstreams, messages, runId }: WorkstreamsTabProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Right panel tabs
+// Overflow tab bar
 // ---------------------------------------------------------------------------
 
-type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload' | 'conversation';
+// Tab-item styling, matching core's TabsTrigger underline tabs.
+const TAB_ITEM_BASE =
+    'flex items-center border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer shrink-0';
+const TAB_ITEM_INACTIVE = 'border-transparent text-muted-foreground hover:border-border hover:text-foreground';
+const TAB_ITEM_ACTIVE = 'border-primary text-primary';
+const TAB_GAP_PX = 4; // matches the `gap-1` between tab items
 
-function RightPanelTabSelect({
-    tabs,
-    activeTab,
-    onChange,
-    ariaLabel,
-}: {
+interface OverflowMoreMenuProps {
+    /** The overflowed tabs to list inside the menu. */
     tabs: TabDefinition[];
-    activeTab: RightPanelTab;
-    onChange: (tab: RightPanelTab) => void;
-    ariaLabel: string;
-}) {
+    current: string;
+    onTabChange: (name: string) => void;
+    label: string;
+    /** Whether the active tab is one of the overflowed tabs. */
+    active: boolean;
+}
+
+/** Trailing "More" dropdown of overflowed tabs; opens on hover, click, or keyboard. */
+function OverflowMoreMenu({ tabs, current, onTabChange, label, active }: OverflowMoreMenuProps) {
     const [open, setOpen] = useState(false);
-    const currentTab = tabs.find((tab) => tab.name === activeTab) ?? tabs[0];
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const openedByHover = useRef(false);
+
+    const cancelClose = () => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    const openOnHover = () => {
+        cancelClose();
+        openedByHover.current = true;
+        setOpen(true);
+    };
+    // Delay the close so the pointer can travel across the gap onto the menu.
+    const closeAfterDelay = () => {
+        cancelClose();
+        closeTimer.current = setTimeout(() => setOpen(false), 150);
+    };
+
+    // Clear any pending close timer on unmount.
+    useEffect(() => () => clearTimeout(closeTimer.current ?? undefined), []);
 
     return (
-        <DropdownMenu open={open} onOpenChange={setOpen}>
+        // Non-modal: a modal menu sets body `pointer-events: none` while open, which makes
+        // the hover open/close flap. It still closes on outside-click / Escape.
+        <DropdownMenu
+            modal={false}
+            open={open}
+            onOpenChange={(next) => {
+                // Fired by click / keyboard / dismiss (not by hover); keep our state in sync.
+                cancelClose();
+                if (next) openedByHover.current = false;
+                setOpen(next);
+            }}
+        >
             <DropdownMenuTrigger asChild>
+                {/* Tab-bar primitive: raw button is the menu trigger (asChild). */}
                 <button
                     type="button"
-                    aria-label={ariaLabel}
-                    aria-haspopup="menu"
-                    aria-expanded={open}
-                    className={cn(
-                        'inline-flex min-w-40 max-w-56 flex-row items-center justify-between gap-2 rounded-md border border-border bg-transparent px-2.5 py-2 text-start text-inherit',
-                        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-                        'hover:bg-muted',
-                    )}
+                    onMouseEnter={openOnHover}
+                    onMouseLeave={closeAfterDelay}
+                    className={cn(TAB_ITEM_BASE, active ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
                 >
-                    <span className="min-w-0 flex-1 overflow-hidden text-sm">{currentTab?.label}</span>
-                    <ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" aria-hidden="true" />
+                    {label}
+                    <ChevronDownIcon className="ms-1 size-4" />
                 </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="z-[1000000] min-w-56 max-w-[min(24rem,calc(100vw-1rem))]">
-                {tabs.map((tab) => {
-                    const isSelected = tab.name === activeTab;
+            <DropdownMenuContent
+                align="end"
+                className="w-max"
+                onMouseEnter={cancelClose}
+                onMouseLeave={closeAfterDelay}
+                onCloseAutoFocus={(e) => {
+                    // Keep hover-opens from returning the focus ring to the trigger.
+                    if (openedByHover.current) e.preventDefault();
+                }}
+            >
+                {tabs.map((tab) => (
+                    <DropdownMenuItem
+                        key={tab.name}
+                        disabled={tab.disabled}
+                        onClick={() => onTabChange(tab.name)}
+                        className={cn(tab.name === current && 'text-primary')}
+                    >
+                        {tab.label}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+interface OverflowTabsBarProps {
+    tabs: TabDefinition[];
+    current: string;
+    onTabChange: (name: string) => void;
+    className?: string;
+}
 
+/**
+ * Tabs as a horizontal row; any that don't fit collapse into a trailing "More"
+ * dropdown. The visible/overflow split is measured from a hidden full-width row.
+ */
+function OverflowTabsBar({ tabs, current, onTabChange, className }: OverflowTabsBarProps) {
+    const { t } = useUITranslation();
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+    const moreRef = useRef<HTMLButtonElement | null>(null);
+    // `count` leading tabs are shown. When `promote` is set, the active tab is pulled
+    // into the last slot (before More) and `count` counts the tabs shown before it.
+    const [layout, setLayout] = useState<{ count: number; promote: boolean }>({ count: tabs.length, promote: false });
+
+    const recompute = () => {
+        const container = containerRef.current;
+        if (!container) return;
+        const containerWidth = container.clientWidth;
+        const widths = tabs.map((_, i) => itemRefs.current[i]?.offsetWidth ?? 0);
+        const totalAll = widths.reduce((sum, w) => sum + w, 0) + TAB_GAP_PX * Math.max(0, tabs.length - 1);
+
+        // How many tabs (in order, optionally skipping one) fit within `available`.
+        const fitCount = (available: number, skipIndex: number) => {
+            let used = 0;
+            let count = 0;
+            for (let i = 0; i < tabs.length; i++) {
+                if (i === skipIndex) continue;
+                const cand = used + (count > 0 ? TAB_GAP_PX : 0) + widths[i];
+                if (cand > available) break;
+                used = cand;
+                count += 1;
+            }
+            return count;
+        };
+
+        let next: { count: number; promote: boolean };
+        if (totalAll <= containerWidth) {
+            next = { count: tabs.length, promote: false };
+        } else {
+            const moreWidth = moreRef.current?.offsetWidth ?? 0;
+            const naturalCount = Math.max(1, fitCount(containerWidth - moreWidth - TAB_GAP_PX, -1));
+            const activeIndex = tabs.findIndex((tab) => tab.name === current);
+            if (activeIndex < 0 || activeIndex < naturalCount) {
+                next = { count: naturalCount, promote: false };
+            } else {
+                // Active tab overflowed: reserve its slot at the end, fit leading tabs before it.
+                const leadAvailable = containerWidth - moreWidth - widths[activeIndex] - TAB_GAP_PX * 2;
+                next = { count: fitCount(leadAvailable, activeIndex), promote: true };
+            }
+        }
+        setLayout((prev) => (prev.count === next.count && prev.promote === next.promote ? prev : next));
+    };
+
+    // Re-measure after every render (tab/label changes) and on container resize.
+    const recomputeRef = useRef(recompute);
+    recomputeRef.current = recompute;
+    useLayoutEffect(() => {
+        recomputeRef.current();
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver(() => recomputeRef.current());
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+
+    const activeIndex = tabs.findIndex((tab) => tab.name === current);
+    let visible: TabDefinition[];
+    let overflow: TabDefinition[];
+    if (layout.promote && activeIndex >= 0) {
+        // Pull the active tab into the last visible slot; the tab it displaces overflows.
+        const others = tabs.filter((_, i) => i !== activeIndex);
+        visible = [...others.slice(0, layout.count), tabs[activeIndex]];
+        overflow = others.slice(layout.count);
+    } else {
+        visible = tabs.slice(0, layout.count);
+        overflow = tabs.slice(layout.count);
+    }
+    const activeInOverflow = overflow.some((tab) => tab.name === current);
+    const moreLabel = t('agent.moreTabs');
+
+    return (
+        <div ref={containerRef} className={cn('relative', className)}>
+            {/* Hidden measurement row: all tabs + More at natural width, kept separate
+                from the visible row so measuring can't feed back into the layout. */}
+            <div aria-hidden className="pointer-events-none invisible absolute left-0 top-0 flex w-max gap-1">
+                {tabs.map((tab, i) => (
+                    <button
+                        type="button"
+                        key={tab.name}
+                        tabIndex={-1}
+                        ref={(el) => {
+                            itemRefs.current[i] = el;
+                        }}
+                        className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}
+                    >
+                        {tab.label}
+                    </button>
+                ))}
+                <button type="button" tabIndex={-1} ref={moreRef} className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}>
+                    {moreLabel}
+                    <ChevronDownIcon className="ms-1 size-4" />
+                </button>
+            </div>
+
+            {/* Visible row */}
+            <div className="-mb-px flex gap-1 overflow-hidden border-b">
+                {visible.map((tab) => {
+                    const isActive = tab.name === current;
                     return (
-                        <DropdownMenuItem
+                        // Tab-bar primitive: raw button mirrors core TabsTrigger underline styling.
+                        <button
+                            type="button"
                             key={tab.name}
-                            className="min-h-9 justify-between gap-3 px-2 py-1.5 text-sm"
-                            onSelect={() => {
-                                onChange(tab.name as RightPanelTab);
-                                setOpen(false);
-                            }}
+                            aria-current={isActive ? 'page' : undefined}
+                            disabled={tab.disabled}
+                            onClick={() => onTabChange(tab.name)}
+                            className={cn(
+                                TAB_ITEM_BASE,
+                                isActive ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE,
+                                'disabled:pointer-events-none disabled:opacity-50',
+                            )}
                         >
-                            <span className="min-w-0 flex-1 overflow-hidden">{tab.label}</span>
-                            {isSelected && <CheckIcon className="size-4 shrink-0" aria-hidden="true" />}
-                        </DropdownMenuItem>
+                            {tab.label}
+                        </button>
                     );
                 })}
-            </DropdownMenuContent>
-        </DropdownMenu>
+
+                {overflow.length > 0 && (
+                    <OverflowMoreMenu
+                        tabs={overflow}
+                        current={current}
+                        onTabChange={onTabChange}
+                        label={moreLabel}
+                        active={activeInOverflow}
+                    />
+                )}
+            </div>
+        </div>
     );
 }
 
+// ---------------------------------------------------------------------------
+// Right panel tabs
+// ---------------------------------------------------------------------------
+
+type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload' | 'conversation';
+
 export interface AgentRightPanelProps {
     /** Optional payload content to show as a "Payload" tab */
     payloadContent?: React.ReactNode;
@@ -639,15 +829,13 @@ function AgentRightPanelComponent({
     const visibleTabs = tabs.filter((tab) => tab.is_allowed === undefined || tab.is_allowed === true);
     return (
         <Tabs tabs={tabs} current={activeTab} onTabChange={handleTabChange} fullHeight className="px-0">
-            <div className="flex items-center justify-between shrink-0 px-1 py-1 gap-1">
-                <div className="min-w-0">
-                    <RightPanelTabSelect
-                        ariaLabel={t('agent.selectRightPanelSection')}
-                        tabs={visibleTabs}
-                        activeTab={activeTab}
-                        onChange={handleTabChange}
-                    />
-                </div>
+            <div className="flex items-end justify-between shrink-0 px-1 py-1 gap-1">
+                <OverflowTabsBar
+                    tabs={visibleTabs}
+                    current={activeTab}
+                    onTabChange={handleTabChange}
+                    className="min-w-0 flex-1"
+                />
                 {!conversationContent && (
                     <Button
                         variant="ghost"

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

@@ -145,7 +145,7 @@ export function PulsingMessageLoader({ message, className, color = 'blue' }: Pul
 
     return (
         <div className={cn('flex items-center gap-2 py-1', className)}>
-            <div className="flex space-x-1">
+            <div className="flex gap-1">
                 <div className={`w-1.5 h-1.5 ${colorClasses[color].dot} rounded-full animate-bounce`} />
                 <div
                     className={`w-1.5 h-1.5 ${colorClasses[color].dot} rounded-full animate-bounce`}

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

@@ -1,11 +1,9 @@
-import { Button, Center, ErrorBox, Input, Modal, ModalBody, ModalTitle, Switch } from '@vertesia/ui/core';
+import { Button, Center, ErrorBox, Input } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import {
     ChevronDownIcon,
     ChevronRightIcon,
-    DownloadIcon,
-    EyeIcon,
     FileIcon,
     FolderIcon,
     FolderOpenIcon,
@@ -14,10 +12,6 @@ import {
     RefreshCwIcon,
 } from 'lucide-react';
 import React, { useCallback, useId, useMemo, useState } from 'react';
-import {
-    type UniversalDocumentSource,
-    UniversalDocumentViewer,
-} from '../../document-viewer/UniversalDocumentViewer.js';
 import { type ArtifactTreeNode, useArtifacts } from './hooks/useArtifacts.js';
 
 // ---------------------------------------------------------------------------
@@ -28,26 +22,16 @@ interface TreeNodeProps {
     node: ArtifactTreeNode;
     depth: number;
     runId: string;
-    onPreview: (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, onDownload, downloadingPath, forceExpanded = false }: TreeNodeProps) {
     const [expanded, setExpanded] = useState(false);
     const isExpanded = forceExpanded || expanded;
 
@@ -82,7 +66,6 @@ function TreeNode({
                             node={child}
                             depth={depth + 1}
                             runId={runId}
-                            onPreview={onPreview}
                             onDownload={onDownload}
                             downloadingPath={downloadingPath}
                             forceExpanded={forceExpanded}
@@ -95,45 +78,23 @@ 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="min-w-0">
             <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 w-full max-w-full 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={() => onDownload(node.path)}
+                disabled={isDownloading}
                 title={node.path}
             >
-                <span className="size-3.5 shrink-0" />
+                {isDownloading ? (
+                    <Loader2Icon className="size-3.5 shrink-0 animate-spin text-info" />
+                ) : (
+                    <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>
         </div>
     );
 }
@@ -181,42 +142,6 @@ function downloadUrl(url: string, filename: string) {
     anchor.remove();
 }
 
-function getArtifactContentType(path: string): string | undefined {
-    const ext = path.split('.').pop()?.toLowerCase();
-    switch (ext) {
-        case 'css':
-            return 'text/css';
-        case 'gif':
-            return 'image/gif';
-        case 'htm':
-        case 'html':
-            return 'text/html';
-        case 'jpeg':
-        case 'jpg':
-            return 'image/jpeg';
-        case 'json':
-            return 'application/json';
-        case 'md':
-        case 'markdown':
-            return 'text/markdown';
-        case 'pdf':
-            return 'application/pdf';
-        case 'png':
-            return 'image/png';
-        case 'svg':
-            return 'image/svg+xml';
-        case 'ts':
-        case 'tsx':
-            return 'text/typescript';
-        case 'txt':
-            return 'text/plain';
-        case 'webp':
-            return 'image/webp';
-        default:
-            return undefined;
-    }
-}
-
 // ---------------------------------------------------------------------------
 // Main tab component
 // ---------------------------------------------------------------------------
@@ -247,15 +172,8 @@ function ArtifactEmptyState({
 function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
-    const [showSystem, setShowSystem] = useState(false);
-    const { tree, flatFiles, totalCount, systemHiddenCount, isLoading, error, refresh } = useArtifacts(
-        client,
-        runId,
-        refreshKey,
-        showSystem,
-    );
+    const { tree, flatFiles, isLoading, error, refresh } = useArtifacts(client, runId, refreshKey);
     const [downloadingPath, setDownloadingPath] = useState<string | null>(null);
-    const [previewPath, setPreviewPath] = useState<string | null>(null);
     const [filterValue, setFilterValue] = useState('');
     const normalizedFilterValue = filterValue.trim();
     const filteredTree = useMemo(() => filterArtifactTree(tree, normalizedFilterValue), [tree, normalizedFilterValue]);
@@ -278,28 +196,11 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
         [client, runId],
     );
 
-    const handlePreview = useCallback((relativePath: string) => {
-        setPreviewPath(relativePath);
-    }, []);
-
-    const previewSource: UniversalDocumentSource | null =
-        runId && previewPath
-            ? {
-                  title: previewPath.split('/').pop() || previewPath,
-                  fileName: previewPath.split('/').pop() || previewPath,
-                  contentType: getArtifactContentType(previewPath),
-                  artifact: {
-                      runId,
-                      path: previewPath,
-                  },
-              }
-            : null;
-
     if (!runId) {
         return <ArtifactEmptyState icon={<PackageIcon className="mb-2 size-8" />}>No run selected</ArtifactEmptyState>;
     }
 
-    if (isLoading && totalCount === 0) {
+    if (isLoading && flatFiles.length === 0) {
         return (
             <ArtifactEmptyState icon={<Loader2Icon className="mb-2 size-6 animate-spin" />}>
                 {t('agent.loadingArtifacts')}
@@ -327,7 +228,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
         );
     }
 
-    if (totalCount === 0) {
+    if (flatFiles.length === 0) {
         return (
             <ArtifactEmptyState
                 icon={<PackageIcon className="mb-2 size-8" />}
@@ -346,28 +247,16 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
     return (
         <div className="flex flex-col h-full">
             {/* Top bar */}
-            <div className="flex shrink-0 flex-col gap-2 border-b px-3 py-2">
+            <div className="flex shrink-0 flex-col gap-2 px-3 py-2">
                 <div className="flex items-center justify-between gap-2 text-xs text-muted">
                     <span>
                         {normalizedFilterValue
                             ? `${visibleFileCount} of ${flatFiles.length} file${flatFiles.length !== 1 ? 's' : ''}`
                             : `${flatFiles.length} file${flatFiles.length !== 1 ? 's' : ''}`}
-                        {!showSystem && systemHiddenCount > 0 ? ` · ${systemHiddenCount} hidden` : ''}
                     </span>
-                    <div className="flex items-center gap-1">
-                        <Switch size="sm" value={showSystem} onChange={setShowSystem}>
-                            <span className="text-xs text-muted">{t('agent.showSystemArtifacts')}</span>
-                        </Switch>
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={refresh}
-                            disabled={isLoading}
-                            className="h-6 w-6 p-0"
-                        >
-                            <RefreshCwIcon className={`size-3.5 ${isLoading ? 'animate-spin' : ''}`} />
-                        </Button>
-                    </div>
+                    <Button variant="ghost" size="sm" onClick={refresh} disabled={isLoading} className="h-6 w-6 p-0">
+                        <RefreshCwIcon className={`size-3.5 ${isLoading ? 'animate-spin' : ''}`} />
+                    </Button>
                 </div>
                 <label htmlFor={filterInputId} className="sr-only">
                     {t('form.filter')}
@@ -385,7 +274,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
             </div>
 
             {/* Tree */}
-            <div className="flex-1 overflow-y-auto px-3 py-2">
+            <div className="flex-1 overflow-y-auto px-3 pb-2">
                 {filteredTree.length > 0 ? (
                     <div className="min-w-0">
                         {filteredTree.map((node) => (
@@ -394,7 +283,6 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                                 node={node}
                                 depth={0}
                                 runId={runId}
-                                onPreview={handlePreview}
                                 onDownload={handleDownload}
                                 downloadingPath={downloadingPath}
                                 forceExpanded={!!normalizedFilterValue}
@@ -402,31 +290,9 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                         ))}
                     </div>
                 ) : (
-                    <div className="px-1 py-6 text-sm text-muted">
-                        {!showSystem && systemHiddenCount > 0
-                            ? t('agent.onlySystemArtifacts')
-                            : t('agent.noContentAvailable')}
-                    </div>
+                    <div className="px-1 py-6 text-sm text-muted">{t('agent.noContentAvailable')}</div>
                 )}
             </div>
-            {previewSource && (
-                <Modal
-                    isOpen={!!previewPath}
-                    onClose={() => setPreviewPath(null)}
-                    size="xl"
-                    className="h-[90vh] p-0"
-                    description="Artifact preview"
-                >
-                    <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)}
-                        />
-                    </ModalBody>
-                </Modal>
-            )}
         </div>
     );
 }