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

package/llms.txt

@@ -5,14 +5,14 @@
 
 ## Reference URLs
 
-- Visual style guide: https://docs-ui-style-shadcn.vertesia.dev
-- Markdown component guide: https://docs-ui-style-shadcn.vertesia.dev/components.md
-- LLM reference: https://docs-ui-style-shadcn.vertesia.dev/llms.txt
+- Visual style guide: https://design.vertesiahq.com
+- Markdown component guide: https://design.vertesiahq.com/components.md
+- LLM reference: https://design.vertesiahq.com/llms.txt
 
 # @vertesia/ui Component Reference
 
 > Markdown rendition of the Vertesia UI style guide for LLMs and text-first clients.
-> Visual style guide: https://docs-ui-style-shadcn.vertesia.dev
+> Visual style guide: https://design.vertesiahq.com
 
 Use this file when generating React UI for Vertesia apps or plugins. Prefer `@vertesia/ui`
 components over local duplicates, and use semantic color classes instead of hardcoded colors.
@@ -31,65 +31,65 @@ import { useUserSession } from '@vertesia/ui/session';
 
 ## Classes
 
-- [Semantic](https://docs-ui-style-shadcn.vertesia.dev/semantic)
-- [Background](https://docs-ui-style-shadcn.vertesia.dev/classes/background)
-- [Text](https://docs-ui-style-shadcn.vertesia.dev/classes/text)
-- [Border & Ring](https://docs-ui-style-shadcn.vertesia.dev/classes/border)
-- [Icons](https://docs-ui-style-shadcn.vertesia.dev/classes/icons)
+- [Semantic](https://design.vertesiahq.com/semantic)
+- [Background](https://design.vertesiahq.com/classes/background)
+- [Text](https://design.vertesiahq.com/classes/text)
+- [Border & Ring](https://design.vertesiahq.com/classes/border)
+- [Icons](https://design.vertesiahq.com/classes/icons)
 
 ## Components
 
-- [Heading](https://docs-ui-style-shadcn.vertesia.dev/components/heading)
-- [Buttons](https://docs-ui-style-shadcn.vertesia.dev/components/buttons)
-- [Badges](https://docs-ui-style-shadcn.vertesia.dev/components/badges)
-- [Dot Badges](https://docs-ui-style-shadcn.vertesia.dev/components/dotBadges)
-- [Message Box](https://docs-ui-style-shadcn.vertesia.dev/components/messageBox)
-- [Modal](https://docs-ui-style-shadcn.vertesia.dev/components/modal)
-- [Confirm Modal](https://docs-ui-style-shadcn.vertesia.dev/components/confirmModal)
-- [Delete Modal](https://docs-ui-style-shadcn.vertesia.dev/components/deleteModal)
-- [Filter](https://docs-ui-style-shadcn.vertesia.dev/components/filter)
-- [Tabs](https://docs-ui-style-shadcn.vertesia.dev/components/tabs)
-- [Tooltips](https://docs-ui-style-shadcn.vertesia.dev/components/tooltips)
-- [Switch](https://docs-ui-style-shadcn.vertesia.dev/components/switch)
-- [Side Panel](https://docs-ui-style-shadcn.vertesia.dev/components/sidePanel)
-- [SelectBox](https://docs-ui-style-shadcn.vertesia.dev/components/selectBox)
-- [Overlay](https://docs-ui-style-shadcn.vertesia.dev/components/overlay)
-- [Breadcrumbs](https://docs-ui-style-shadcn.vertesia.dev/components/breadcrumb)
-- [Monaco](https://docs-ui-style-shadcn.vertesia.dev/components/monaco)
-- [Card](https://docs-ui-style-shadcn.vertesia.dev/components/card)
-- [Checkbox](https://docs-ui-style-shadcn.vertesia.dev/components/checkbox)
-- [Collapsible](https://docs-ui-style-shadcn.vertesia.dev/components/collapsible)
-- [Command](https://docs-ui-style-shadcn.vertesia.dev/components/command)
-- [Dropdown](https://docs-ui-style-shadcn.vertesia.dev/components/dropdown)
-- [Label](https://docs-ui-style-shadcn.vertesia.dev/components/label)
-- [Panel](https://docs-ui-style-shadcn.vertesia.dev/components/panel)
-- [Popover](https://docs-ui-style-shadcn.vertesia.dev/components/popover)
-- [Radio Group](https://docs-ui-style-shadcn.vertesia.dev/components/radioGroup)
-- [Resizeable](https://docs-ui-style-shadcn.vertesia.dev/components/resizeable)
-- [Separator](https://docs-ui-style-shadcn.vertesia.dev/components/separator)
-- [Text](https://docs-ui-style-shadcn.vertesia.dev/components/text)
-- [Theme](https://docs-ui-style-shadcn.vertesia.dev/components/theme)
+- [Heading](https://design.vertesiahq.com/components/heading)
+- [Buttons](https://design.vertesiahq.com/components/buttons)
+- [Badges](https://design.vertesiahq.com/components/badges)
+- [Dot Badges](https://design.vertesiahq.com/components/dotBadges)
+- [Message Box](https://design.vertesiahq.com/components/messageBox)
+- [Modal](https://design.vertesiahq.com/components/modal)
+- [Confirm Modal](https://design.vertesiahq.com/components/confirmModal)
+- [Delete Modal](https://design.vertesiahq.com/components/deleteModal)
+- [Filter](https://design.vertesiahq.com/components/filter)
+- [Tabs](https://design.vertesiahq.com/components/tabs)
+- [Tooltips](https://design.vertesiahq.com/components/tooltips)
+- [Switch](https://design.vertesiahq.com/components/switch)
+- [Side Panel](https://design.vertesiahq.com/components/sidePanel)
+- [SelectBox](https://design.vertesiahq.com/components/selectBox)
+- [Overlay](https://design.vertesiahq.com/components/overlay)
+- [Breadcrumbs](https://design.vertesiahq.com/components/breadcrumb)
+- [Monaco](https://design.vertesiahq.com/components/monaco)
+- [Card](https://design.vertesiahq.com/components/card)
+- [Checkbox](https://design.vertesiahq.com/components/checkbox)
+- [Collapsible](https://design.vertesiahq.com/components/collapsible)
+- [Command](https://design.vertesiahq.com/components/command)
+- [Dropdown](https://design.vertesiahq.com/components/dropdown)
+- [Label](https://design.vertesiahq.com/components/label)
+- [Panel](https://design.vertesiahq.com/components/panel)
+- [Popover](https://design.vertesiahq.com/components/popover)
+- [Radio Group](https://design.vertesiahq.com/components/radioGroup)
+- [Resizeable](https://design.vertesiahq.com/components/resizeable)
+- [Separator](https://design.vertesiahq.com/components/separator)
+- [Text](https://design.vertesiahq.com/components/text)
+- [Theme](https://design.vertesiahq.com/components/theme)
 
 ## Layout & Structure
 
-- [Avatar](https://docs-ui-style-shadcn.vertesia.dev/components/avatar)
-- [Center](https://docs-ui-style-shadcn.vertesia.dev/components/center)
-- [Divider](https://docs-ui-style-shadcn.vertesia.dev/components/divider)
-- [Link](https://docs-ui-style-shadcn.vertesia.dev/components/link)
-- [Portal](https://docs-ui-style-shadcn.vertesia.dev/components/portal)
-- [Spinner](https://docs-ui-style-shadcn.vertesia.dev/components/spinner)
+- [Avatar](https://design.vertesiahq.com/components/avatar)
+- [Center](https://design.vertesiahq.com/components/center)
+- [Divider](https://design.vertesiahq.com/components/divider)
+- [Link](https://design.vertesiahq.com/components/link)
+- [Portal](https://design.vertesiahq.com/components/portal)
+- [Spinner](https://design.vertesiahq.com/components/spinner)
 
 ## Forms
 
-- [FormItem](https://docs-ui-style-shadcn.vertesia.dev/components/formItem)
-- [Inputs](https://docs-ui-style-shadcn.vertesia.dev/components/inputs)
-- [Textarea](https://docs-ui-style-shadcn.vertesia.dev/components/textarea)
-- [ComboBox](https://docs-ui-style-shadcn.vertesia.dev/components/comboBox)
-- [InputList](https://docs-ui-style-shadcn.vertesia.dev/components/inputList)
-- [MenuList](https://docs-ui-style-shadcn.vertesia.dev/components/menuList)
-- [NumberInput](https://docs-ui-style-shadcn.vertesia.dev/components/numberInput)
-- [SelectList](https://docs-ui-style-shadcn.vertesia.dev/components/selectList)
-- [TagsInput](https://docs-ui-style-shadcn.vertesia.dev/components/tagsInput)
+- [FormItem](https://design.vertesiahq.com/components/formItem)
+- [Inputs](https://design.vertesiahq.com/components/inputs)
+- [Textarea](https://design.vertesiahq.com/components/textarea)
+- [ComboBox](https://design.vertesiahq.com/components/comboBox)
+- [InputList](https://design.vertesiahq.com/components/inputList)
+- [MenuList](https://design.vertesiahq.com/components/menuList)
+- [NumberInput](https://design.vertesiahq.com/components/numberInput)
+- [SelectList](https://design.vertesiahq.com/components/selectList)
+- [TagsInput](https://design.vertesiahq.com/components/tagsInput)
 
 # Component Guidance
 
@@ -97,7 +97,7 @@ import { useUserSession } from '@vertesia/ui/session';
 
 Primary action primitive with Vertesia variants, loading state, disabled state, and tooltip support.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/buttons
+- Route: https://design.vertesiahq.com/components/buttons
 - Import path: `@vertesia/ui/core`
 - Exports: `Button`, `CopyButton`, `buttonVariants`
 
@@ -147,7 +147,7 @@ import { Button } from '@vertesia/ui/core';
 
 Single-line text input with a simplified value-based `onChange` callback.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/inputs
+- Route: https://design.vertesiahq.com/components/inputs
 - Import path: `@vertesia/ui/core`
 - Exports: `Input`
 
@@ -184,7 +184,7 @@ const [name, setName] = useState('');
 
 Multi-line text control using standard React textarea event handling.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/textarea
+- Route: https://design.vertesiahq.com/components/textarea
 - Import path: `@vertesia/ui/core`
 - Exports: `Textarea`
 
@@ -215,7 +215,7 @@ Multi-line text control using standard React textarea event handling.
 
 Field wrapper for labels, required indicators, and help tooltips.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/formItem
+- Route: https://design.vertesiahq.com/components/formItem
 - Import path: `@vertesia/ui/core`
 - Exports: `FormItem`
 
@@ -248,7 +248,7 @@ Field wrapper for labels, required indicators, and help tooltips.
 
 Accessible overlay dialog for focused tasks and forms.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/modal
+- Route: https://design.vertesiahq.com/components/modal
 - Import path: `@vertesia/ui/core`
 - Exports: `Modal`, `ModalTitle`, `ModalBody`, `ModalFooter`
 
@@ -293,7 +293,7 @@ Accessible overlay dialog for focused tasks and forms.
 
 Confirmation dialog for actions that need explicit user consent.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/confirmModal
+- Route: https://design.vertesiahq.com/components/confirmModal
 - Import path: `@vertesia/ui/core`
 - Exports: `ConfirmModal`
 
@@ -316,7 +316,7 @@ Confirmation dialog for actions that need explicit user consent.
 
 Delete-specific confirmation wrapper with async delete handling and toast feedback.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/deleteModal
+- Route: https://design.vertesiahq.com/components/deleteModal
 - Import path: `@vertesia/ui/core`
 - Exports: `DeleteModal`
 
@@ -342,7 +342,7 @@ Delete-specific confirmation wrapper with async delete handling and toast feedba
 
 Dropdown select for string or object options, with optional search, clear, and multi-select modes.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/selectBox
+- Route: https://design.vertesiahq.com/components/selectBox
 - Import path: `@vertesia/ui/core`
 - Exports: `SelectBox`
 
@@ -383,7 +383,7 @@ Dropdown select for string or object options, with optional search, clear, and m
 
 Tab container driven by an array of tab objects and companion bar/panel components.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/tabs
+- Route: https://design.vertesiahq.com/components/tabs
 - Import path: `@vertesia/ui/core`
 - Exports: `Tabs`, `TabsBar`, `TabsPanel`, `VTabs`, `VTabsBar`, `VTabsPanel`
 
@@ -408,7 +408,7 @@ Tab container driven by an array of tab objects and companion bar/panel componen
 
 Compact status and category labels.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/badges
+- Route: https://design.vertesiahq.com/components/badges
 - Import path: `@vertesia/ui/core`
 - Exports: `Badge`, `DotBadge`
 
@@ -425,7 +425,7 @@ Compact status and category labels.
 
 Semantic feedback box for success, attention, destructive, done, info, and muted messages.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/messageBox
+- Route: https://design.vertesiahq.com/components/messageBox
 - Import path: `@vertesia/ui/core`
 - Exports: `MessageBox`
 
@@ -437,7 +437,7 @@ Semantic feedback box for success, attention, destructive, done, info, and muted
 
 Choice controls for boolean values and mutually exclusive option sets.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/checkbox
+- Route: https://design.vertesiahq.com/components/checkbox
 - Import path: `@vertesia/ui/core`
 - Exports: `Checkbox`, `Switch`, `RadioGroup`, `RadioGroupItem`, `RadioGroupOption`
 
@@ -451,7 +451,7 @@ Choice controls for boolean values and mutually exclusive option sets.
 
 Overlay primitives for action menus, floating content, command palettes, and contextual help.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/dropdown
+- Route: https://design.vertesiahq.com/components/dropdown
 - Import path: `@vertesia/ui/core`
 - Exports: `Dropdown`, `MenuGroup`, `MenuItem`, `Popover`, `Command`, `VTooltip`, `Tooltip`
 
@@ -466,7 +466,7 @@ Overlay primitives for action menus, floating content, command palettes, and con
 
 Content containers for repeated items and framed tool surfaces.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/card
+- Route: https://design.vertesiahq.com/components/card
 - Import path: `@vertesia/ui/core`
 - Exports: `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `Panel`
 
@@ -479,7 +479,7 @@ Content containers for repeated items and framed tool surfaces.
 
 Small primitives for display, separation, links, loading states, portals, and overlays.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/components/center
+- Route: https://design.vertesiahq.com/components/center
 - Import path: `@vertesia/ui/core`
 - Exports: `Avatar`, `SvgAvatar`, `Center`, `Divider`, `Link`, `Portal`, `Spinner`, `Separator`, `Overlay`
 
@@ -493,7 +493,7 @@ Small primitives for display, separation, links, loading states, portals, and ov
 
 Semantic Tailwind classes and approved lucide-react icon guidance for Vertesia apps.
 
-- Route: https://docs-ui-style-shadcn.vertesia.dev/semantic
+- Route: https://design.vertesiahq.com/semantic
 - Import path: `@vertesia/ui/core`
 - Exports: `ModeToggle`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.5.0-dev.20260714.072725Z",
+  "version": "1.5.0-dev.20260717.131047Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -90,10 +90,10 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.3",
-    "@vertesia/common": "1.5.0-dev.20260714.072725Z",
-    "@vertesia/client": "1.5.0-dev.20260714.072725Z",
-    "@vertesia/json": "1.5.0-dev.20260714.072725Z",
-    "@vertesia/fusion-ux": "1.5.0-dev.20260714.072725Z"
+    "@vertesia/client": "1.5.0-dev.20260717.131047Z",
+    "@vertesia/common": "1.5.0-dev.20260717.131047Z",
+    "@vertesia/fusion-ux": "1.5.0-dev.20260717.131047Z",
+    "@vertesia/json": "1.5.0-dev.20260717.131047Z"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -106,9 +106,9 @@
     "@types/react-dom": "19.2.3",
     "axe-core": "^4.12.1",
     "culori": "^4.0.2",
-    "i18next-cli": "^1.64.2",
+    "i18next-cli": "^1.65.0",
     "jsdom": "^29.1.1",
-    "rolldown": "1.1.3",
+    "rolldown": "1.1.4",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
     "vitest-axe": "^0.1.0",
@@ -180,6 +180,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
+  "gitHead": "8aaad228827b2927db8e6aa75b27bfac90fec36f",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/env/index.ts

@@ -15,6 +15,7 @@ export interface EnvProps {
         zeno: string;
         studio: string;
         sts: string; // Security Token Service endpoint
+        git?: string; // Smart HTTP app source git endpoint
         mcp?: string;
     };
     firebase?: {
@@ -27,6 +28,21 @@ export interface EnvProps {
     region?: string;
     datadogRum?: boolean;
     datadogLogs?: boolean;
+    /**
+     * Development-only Vertesia auth token.
+     *
+     * This is intended for sandbox/dev previews where the host process already
+     * has a short-lived Vertesia token. Production apps must not set this.
+     */
+    devAuthToken?: string;
+    /**
+     * Optional host-provided Vertesia auth token bootstrap.
+     *
+     * Published generated apps use this to ask their same-origin app gateway for
+     * the token backing the gateway session cookie, allowing UserSession to
+     * initialize without redirecting through Central Auth.
+     */
+    authTokenProvider?: () => Promise<string | undefined>;
     logger?: {
         info: (msg: string, ...args: unknown[]) => void;
         warn: (msg: string, ...args: unknown[]) => void;
@@ -116,6 +132,14 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this._props?.datadogLogs ?? false;
     }
 
+    get devAuthToken() {
+        return this._props?.devAuthToken;
+    }
+
+    get authTokenProvider() {
+        return this._props?.authTokenProvider;
+    }
+
     get logger() {
         return this._props?.logger ?? console;
     }

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

@@ -1,9 +1,11 @@
-import { Button, Center, ErrorBox, Input } from '@vertesia/ui/core';
+import { Button, Center, ErrorBox, Input, Modal, ModalBody, ModalTitle, Switch } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import {
     ChevronDownIcon,
     ChevronRightIcon,
+    DownloadIcon,
+    EyeIcon,
     FileIcon,
     FolderIcon,
     FolderOpenIcon,
@@ -12,6 +14,10 @@ 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';
 
 // ---------------------------------------------------------------------------
@@ -22,16 +28,26 @@ 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, onDownload, downloadingPath, forceExpanded = false }: TreeNodeProps) {
+function TreeNode({
+    node,
+    depth,
+    runId,
+    onPreview,
+    onDownload,
+    downloadingPath,
+    forceExpanded = false,
+}: TreeNodeProps) {
     const [expanded, setExpanded] = useState(false);
     const isExpanded = forceExpanded || expanded;
 
@@ -66,6 +82,7 @@ function TreeNode({ node, depth, runId, onDownload, downloadingPath, forceExpand
                             node={child}
                             depth={depth + 1}
                             runId={runId}
+                            onPreview={onPreview}
                             onDownload={onDownload}
                             downloadingPath={downloadingPath}
                             forceExpanded={forceExpanded}
@@ -78,23 +95,45 @@ function TreeNode({ node, depth, runId, onDownload, downloadingPath, forceExpand
     const isDownloading = downloadingPath === node.path;
 
     return (
-        <div className="min-w-0">
+        <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` }}
+        >
             <Button
                 variant="unstyled"
-                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}
+                className="flex min-w-0 flex-1 items-center justify-start gap-1.5 px-1 py-1 text-start"
+                onClick={() => onPreview(node.path)}
                 title={node.path}
             >
-                {isDownloading ? (
-                    <Loader2Icon className="size-3.5 shrink-0 animate-spin text-info" />
-                ) : (
-                    <span className="size-3.5 shrink-0" />
-                )}
+                <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>
     );
 }
@@ -142,6 +181,42 @@ 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
 // ---------------------------------------------------------------------------
@@ -172,8 +247,15 @@ function ArtifactEmptyState({
 function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
-    const { tree, flatFiles, isLoading, error, refresh } = useArtifacts(client, runId, refreshKey);
+    const [showSystem, setShowSystem] = useState(false);
+    const { tree, flatFiles, totalCount, systemHiddenCount, isLoading, error, refresh } = useArtifacts(
+        client,
+        runId,
+        refreshKey,
+        showSystem,
+    );
     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]);
@@ -196,11 +278,28 @@ 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 && flatFiles.length === 0) {
+    if (isLoading && totalCount === 0) {
         return (
             <ArtifactEmptyState icon={<Loader2Icon className="mb-2 size-6 animate-spin" />}>
                 {t('agent.loadingArtifacts')}
@@ -228,7 +327,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
         );
     }
 
-    if (flatFiles.length === 0) {
+    if (totalCount === 0) {
         return (
             <ArtifactEmptyState
                 icon={<PackageIcon className="mb-2 size-8" />}
@@ -247,16 +346,28 @@ 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 px-3 py-2">
+            <div className="flex shrink-0 flex-col gap-2 border-b 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>
-                    <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 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>
                 </div>
                 <label htmlFor={filterInputId} className="sr-only">
                     {t('form.filter')}
@@ -274,7 +385,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
             </div>
 
             {/* Tree */}
-            <div className="flex-1 overflow-y-auto px-3 pb-2">
+            <div className="flex-1 overflow-y-auto px-3 py-2">
                 {filteredTree.length > 0 ? (
                     <div className="min-w-0">
                         {filteredTree.map((node) => (
@@ -283,6 +394,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                                 node={node}
                                 depth={0}
                                 runId={runId}
+                                onPreview={handlePreview}
                                 onDownload={handleDownload}
                                 downloadingPath={downloadingPath}
                                 forceExpanded={!!normalizedFilterValue}
@@ -290,9 +402,31 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                         ))}
                     </div>
                 ) : (
-                    <div className="px-1 py-6 text-sm text-muted">{t('agent.noContentAvailable')}</div>
+                    <div className="px-1 py-6 text-sm text-muted">
+                        {!showSystem && systemHiddenCount > 0
+                            ? t('agent.onlySystemArtifacts')
+                            : 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>
     );
 }