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

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

@@ -925,64 +925,68 @@ function StartWorkflowView({
                 ].join('\n');
             }
 
+            const newRun = await startWorkflow(messageContent, { tool_approval_mode: toolApprovalMode });
+            if (!newRun) {
+                setPendingStartMessage(null);
+                setPendingStartTimestamp(null);
+                return;
+            }
+
             setPendingStartMessage(messageContent);
             setPendingStartTimestamp(Date.now());
 
-            const newRun = await startWorkflow(messageContent, { tool_approval_mode: toolApprovalMode });
-            if (newRun) {
-                const agentId = newRun.agent_run_id;
-
-                // Upload staged files to the new run's artifact space and signal agent
-                const uploadedFiles: string[] = [];
-                if (canStageFiles && stagedFiles.length > 0) {
-                    for (const file of stagedFiles) {
-                        try {
-                            const artifactPath = `files/${file.name}`;
-                            await client.agents.uploadArtifact(agentId, artifactPath, file);
-
-                            // Signal agent that file was uploaded
-                            await client.agents.sendSignal(agentId, 'FileUploaded', {
-                                id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-                                name: file.name,
-                                content_type: file.type || 'application/octet-stream',
-                                reference: `artifact:${artifactPath}`,
-                                artifact_path: artifactPath,
-                            } as ConversationFileRef);
-                            uploadedFiles.push(file.name);
-                        } catch (uploadErr) {
-                            console.error(`Failed to upload staged file ${file.name}:`, uploadErr);
-                            // Continue with other files
-                        }
-                    }
+            const agentId = newRun.agent_run_id;
 
-                    // Send a follow-up message to notify the agent that all files are ready
-                    if (uploadedFiles.length > 0) {
-                        try {
-                            await client.agents.sendSignal(agentId, 'UserInput', {
-                                message: `[Files Ready] All ${uploadedFiles.length} file(s) have been uploaded and are now available: ${uploadedFiles.join(', ')}. You can now process them.`,
-                                metadata: {
-                                    type: 'files_ready',
-                                    files: uploadedFiles,
-                                },
-                            } as UserInputSignal);
-                        } catch (signalErr) {
-                            console.error('Failed to send files ready signal:', signalErr);
-                        }
+            // Upload staged files to the new run's artifact space and signal agent
+            const uploadedFiles: string[] = [];
+            if (canStageFiles && stagedFiles.length > 0) {
+                for (const file of stagedFiles) {
+                    try {
+                        const artifactPath = `files/${file.name}`;
+                        await client.agents.uploadArtifact(agentId, artifactPath, file);
+
+                        // Signal agent that file was uploaded
+                        await client.agents.sendSignal(agentId, 'FileUploaded', {
+                            id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                            name: file.name,
+                            content_type: file.type || 'application/octet-stream',
+                            reference: `artifact:${artifactPath}`,
+                            artifact_path: artifactPath,
+                        } as ConversationFileRef);
+                        uploadedFiles.push(file.name);
+                    } catch (uploadErr) {
+                        console.error(`Failed to upload staged file ${file.name}:`, uploadErr);
+                        // Continue with other files
                     }
+                }
 
-                    setStagedFiles([]);
+                // Send a follow-up message to notify the agent that all files are ready
+                if (uploadedFiles.length > 0) {
+                    try {
+                        await client.agents.sendSignal(agentId, 'UserInput', {
+                            message: `[Files Ready] All ${uploadedFiles.length} file(s) have been uploaded and are now available: ${uploadedFiles.join(', ')}. You can now process them.`,
+                            metadata: {
+                                type: 'files_ready',
+                                files: uploadedFiles,
+                            },
+                        } as UserInputSignal);
+                    } catch (signalErr) {
+                        console.error('Failed to send files ready signal:', signalErr);
+                    }
                 }
 
-                // Clear attachments after successful start
-                onAttachmentsSent?.();
-                setStartedAgentRunId(agentId);
-                setInputValue('');
-                toast({
-                    title: t('agent.agentStarted'),
-                    status: 'success',
-                    duration: 3000,
-                });
+                setStagedFiles([]);
             }
+
+            // Clear attachments after successful start
+            onAttachmentsSent?.();
+            setStartedAgentRunId(agentId);
+            setInputValue('');
+            toast({
+                title: t('agent.agentStarted'),
+                status: 'success',
+                duration: 3000,
+            });
         } catch (err: unknown) {
             setPendingStartMessage(null);
             setPendingStartTimestamp(null);

package/src/features/agent/chat/hooks/useArtifacts.ts

@@ -15,14 +15,31 @@ export interface ArtifactTreeNode {
 }
 
 // ---------------------------------------------------------------------------
-// Internal files we never show to the user
+// System artifacts — agent execution internals (tool I/O hydration,
+// conversation snapshots, process state, archives). Hidden by default and
+// revealed via the "Show system files" toggle.
 // ---------------------------------------------------------------------------
 
-const INTERNAL_FILE_PATTERNS = [/conversation\.json$/, /-conversation\.json$/, /^tools\.json$/];
-
-function isInternalFile(relativePath: string): boolean {
+// Matched against the run-relative path: any path with one of these directory
+// segments is agent scaffolding rather than a user-facing output.
+const SYSTEM_DIR_PATTERN = /(^|\/)(tool-inputs|tool-results|archive)(\/|$)/;
+const SYSTEM_PROCESS_PATTERN = /(^|\/)process\/(history|state)(\/|$)/;
+
+// Matched against the file basename.
+const SYSTEM_BASENAME_PATTERNS = [
+    /conversation\.json$/, // conversation.json, <id>-conversation.json
+    /^conversation-checkpoint-\d+\.json$/,
+    /^tools\.json$/,
+    /^tool-input-refs\.json$/,
+    /^toolu[_-]/i, // per-tool-use input/result hydration payloads
+];
+
+export function isSystemArtifact(relativePath: string): boolean {
+    if (SYSTEM_DIR_PATTERN.test(relativePath) || SYSTEM_PROCESS_PATTERN.test(relativePath)) {
+        return true;
+    }
     const basename = relativePath.split('/').pop() ?? relativePath;
-    return INTERNAL_FILE_PATTERNS.some((re) => re.test(basename));
+    return SYSTEM_BASENAME_PATTERNS.some((re) => re.test(basename));
 }
 
 // ---------------------------------------------------------------------------
@@ -88,15 +105,26 @@ function stripToRelativePath(fullPath: string, runId: string): string {
 // ---------------------------------------------------------------------------
 
 export interface UseArtifactsResult {
+    /** Tree of the currently visible files (respects `showSystem`). */
     tree: ArtifactTreeNode[];
+    /** Currently visible files (respects `showSystem`). */
     flatFiles: string[];
+    /** Total number of artifacts in the run, including system files. */
+    totalCount: number;
+    /** Number of system files currently hidden (0 when `showSystem` is true). */
+    systemHiddenCount: number;
     isLoading: boolean;
     error: string | null;
     refresh: () => void;
 }
 
-export function useArtifacts(client: VertesiaClient, runId: string | undefined, refreshKey = 0): UseArtifactsResult {
-    const [flatFiles, setFlatFiles] = useState<string[]>([]);
+export function useArtifacts(
+    client: VertesiaClient,
+    runId: string | undefined,
+    refreshKey = 0,
+    showSystem = false,
+): UseArtifactsResult {
+    const [allFiles, setAllFiles] = useState<string[]>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [manualRefreshKey, setManualRefreshKey] = useState(0);
@@ -113,13 +141,13 @@ export function useArtifacts(client: VertesiaClient, runId: string | undefined,
             const paths = await client.files.listArtifacts(runId);
             if (fetchId !== fetchIdRef.current) return; // stale
 
-            const relatives = paths.map((p) => stripToRelativePath(p, runId)).filter((p) => p && !isInternalFile(p));
+            const relatives = paths.map((p) => stripToRelativePath(p, runId)).filter((p) => !!p);
 
-            setFlatFiles(relatives);
+            setAllFiles(relatives);
         } catch (err) {
             if (fetchId !== fetchIdRef.current) return;
             setError(err instanceof Error ? err.message : 'Failed to list artifacts');
-            setFlatFiles([]);
+            setAllFiles([]);
         } finally {
             if (fetchId === fetchIdRef.current) {
                 setIsLoading(false);
@@ -133,11 +161,16 @@ export function useArtifacts(client: VertesiaClient, runId: string | undefined,
         void fetchArtifacts();
     }, [fetchArtifacts, refreshKey, manualRefreshKey]);
 
+    const flatFiles = useMemo(
+        () => (showSystem ? allFiles : allFiles.filter((p) => !isSystemArtifact(p))),
+        [allFiles, showSystem],
+    );
     const tree = useMemo(() => buildTree(flatFiles), [flatFiles]);
+    const systemHiddenCount = allFiles.length - flatFiles.length;
 
     const refresh = useCallback(() => {
         setManualRefreshKey((k) => k + 1);
     }, []);
 
-    return { tree, flatFiles, isLoading, error, refresh };
+    return { tree, flatFiles, totalCount: allFiles.length, systemHiddenCount, isLoading, error, refresh };
 }

package/src/features/document-viewer/UniversalDocumentViewer.test.tsx

@@ -0,0 +1,123 @@
+import { screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+
+const { getArtifactDownloadUrl, getDownloadUrl } = vi.hoisted(() => ({
+    getArtifactDownloadUrl: vi.fn(),
+    getDownloadUrl: vi.fn(),
+}));
+
+vi.mock('../pdf-viewer/SimplePdfViewer.js', () => ({
+    SimplePdfViewer: () => <div data-testid="pdf-viewer" />,
+}));
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({
+        client: {
+            files: {
+                getArtifactDownloadUrl,
+                getDownloadUrl,
+            },
+        },
+    }),
+}));
+
+import { UniversalDocumentViewer } from './UniversalDocumentViewer';
+
+describe('UniversalDocumentViewer TSX sandbox preview', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        getArtifactDownloadUrl.mockImplementation(
+            async (_runId: string, path: string, _disposition: 'inline' | 'attachment') => ({
+                url: `https://signed.example/${encodeURIComponent(path)}`,
+            }),
+        );
+        getDownloadUrl.mockImplementation(
+            async (path: string, _fileName?: string, _disposition?: 'inline' | 'attachment') => ({
+                url: `https://signed.example/${encodeURIComponent(path)}`,
+            }),
+        );
+        vi.stubGlobal(
+            'fetch',
+            vi.fn(async (url: string) => {
+                const decodedUrl = decodeURIComponent(url);
+                const body = decodedUrl.endsWith('.render.json')
+                    ? JSON.stringify({
+                          ok: true,
+                          source_artifact: 'files/mockups/Dashboard.tsx',
+                          screenshot_artifact: 'files/mockups/Dashboard.png',
+                          rendered_at: '2026-06-03T12:00:00.000Z',
+                          viewport: { width: 1440, height: 900 },
+                          dependencies_reused: true,
+                          status: 200,
+                          timings_ms: { total_before_cleanup: 11481 },
+                      })
+                    : 'export default function Dashboard() { return <main>Dashboard</main>; }';
+                return {
+                    ok: true,
+                    statusText: 'OK',
+                    text: async () => body,
+                };
+            }),
+        );
+    });
+
+    it('renders a sibling sandbox PNG preview for TSX artifacts without executing source in Studio', async () => {
+        renderWithProviders(
+            <UniversalDocumentViewer
+                source={{
+                    fileName: 'Dashboard.tsx',
+                    contentType: 'text/typescript',
+                    artifact: {
+                        runId: 'agent-run-1',
+                        path: 'files/mockups/Dashboard.tsx',
+                    },
+                }}
+            />,
+        );
+
+        await screen.findByText('PNG preview');
+        const image = screen.getByAltText('Dashboard.tsx sandbox render') as HTMLImageElement;
+        expect(image.getAttribute('src')).toBe('https://signed.example/files%2Fmockups%2FDashboard.png');
+        expect(screen.getByText('deps reused')).toBeTruthy();
+        expect(screen.getByText('Total 11 s')).toBeTruthy();
+        expect(screen.getByText(/export default function Dashboard/)).toBeTruthy();
+
+        await waitFor(() => {
+            expect(getArtifactDownloadUrl).toHaveBeenCalledWith(
+                'agent-run-1',
+                'files/mockups/Dashboard.render.json',
+                'inline',
+            );
+        });
+        expect(getArtifactDownloadUrl).toHaveBeenCalledWith('agent-run-1', 'files/mockups/Dashboard.png', 'inline');
+    });
+
+    it('resolves copied render metadata relative to app design storage paths', async () => {
+        renderWithProviders(
+            <UniversalDocumentViewer
+                source={{
+                    fileName: 'Dashboard.tsx',
+                    contentType: 'text/typescript',
+                    sourcePath: 'apps/store-health/designs/design-1/artifacts/files/mockups/Dashboard.tsx',
+                }}
+            />,
+        );
+
+        await screen.findByText('PNG preview');
+        const image = screen.getByAltText('Dashboard.tsx sandbox render') as HTMLImageElement;
+        expect(image.getAttribute('src')).toBe(
+            'https://signed.example/apps%2Fstore-health%2Fdesigns%2Fdesign-1%2Fartifacts%2Ffiles%2Fmockups%2FDashboard.png',
+        );
+        expect(getDownloadUrl).toHaveBeenCalledWith(
+            'apps/store-health/designs/design-1/artifacts/files/mockups/Dashboard.render.json',
+            'Dashboard.render.json',
+            'inline',
+        );
+        expect(getDownloadUrl).toHaveBeenCalledWith(
+            'apps/store-health/designs/design-1/artifacts/files/mockups/Dashboard.png',
+            'Dashboard.png',
+            'inline',
+        );
+    });
+});