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

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.test.tsx

@@ -399,7 +399,12 @@ describe('AllMessagesMixed summary view', () => {
 
         fireEvent.click(screen.getByRole('button', { name: /Allow once/ }));
 
-        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once', {
+            tool_approval_response: {
+                decision: 'allow_once',
+                approval_key: 'create_document:name:News Headlines Today',
+            },
+        });
     });
 
     it('keeps an approved tool approval continuation in the same active work row', () => {

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -6,7 +6,7 @@ import {
     type JSONSchema,
     type Plan,
 } from '@vertesia/common';
-import { Badge, Button, cn, VTooltip } from '@vertesia/ui/core';
+import { Badge, Button, cn } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
 import { NavLink } from '@vertesia/ui/router';
 import { MarkdownRenderer, type MarkdownRendererProps } from '@vertesia/ui/widgets';
@@ -49,6 +49,7 @@ import {
     getRequestInputDisplayText,
     getRequestInputMessageKey,
     getResolvedToolApprovalKeys,
+    getToolApprovalResponseMetadata,
     hasRequestInputUx,
     isRequestInputAnswered,
     isToolApprovalAnswerHidden,
@@ -763,7 +764,9 @@ function SummaryMessage({
                     options={uxConfig.options}
                     variant={uxConfig.variant}
                     multiSelect={uxConfig.multiSelect}
-                    onSelect={(optionId) => onSendMessage?.(optionId)}
+                    onSelect={(optionId) =>
+                        onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                    }
                     onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                     allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
                     placeholder={uxConfig.free_response?.placeholder}
@@ -2240,7 +2243,12 @@ function SummaryActivityRow({
                                                 options={uxConfig.options}
                                                 variant={uxConfig.variant}
                                                 multiSelect={uxConfig.multiSelect}
-                                                onSelect={(optionId) => onSendMessage?.(optionId)}
+                                                onSelect={(optionId) =>
+                                                    onSendMessage?.(
+                                                        optionId,
+                                                        getToolApprovalResponseMetadata(message, optionId),
+                                                    )
+                                                }
                                                 onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                                                 allowFreeResponse={
                                                     !uxConfig.options?.length || !!uxConfig.free_response
@@ -3246,18 +3254,16 @@ function AllMessagesMixedComponent({
                     {isSummaryView && activeWorkstream !== 'all' && activeWorkstreamName && (
                         <div className="sticky top-0 z-20 -mx-2 bg-background/95 px-2 pb-2 pt-1 backdrop-blur sm:-mx-4 sm:px-4">
                             <div className="mx-auto flex w-full max-w-3xl items-center gap-2 border-b border-border/70 pb-3">
-                                <VTooltip description={t('agent.backToMainAgent')} asChild>
-                                    <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-8 shrink-0 text-muted hover:text-foreground"
-                                        aria-label={t('agent.backToMainAgent')}
-                                        onClick={handleShowMainAgentChat}
-                                    >
-                                        <ArrowLeft className="size-4" aria-hidden="true" />
-                                    </Button>
-                                </VTooltip>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-8 shrink-0 text-muted hover:text-foreground"
+                                    title={t('agent.backToMainAgent')}
+                                    onClick={handleShowMainAgentChat}
+                                >
+                                    <ArrowLeft className="size-4" aria-hidden="true" />
+                                </Button>
                                 <div className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
                                     {activeWorkstreamName}
                                 </div>

package/src/features/agent/chat/ModernAgentOutput/Header.tsx

@@ -100,7 +100,9 @@ export default function Header({
     const controls = (
         <div
             className={cn(
-                isCompact ? 'flex flex-col items-center gap-1' : 'flex justify-end items-center gap-2 ms-auto',
+                isCompact
+                    ? 'flex flex-row items-center gap-1 lg:flex-col'
+                    : 'flex justify-end items-center gap-2 ms-auto',
             )}
         >
             {showPlanButton && (
@@ -177,7 +179,6 @@ export default function Header({
                     variant={isPlaybackEnabled ? 'primary' : 'ghost'}
                     onClick={onTogglePlayback}
                     aria-pressed={isPlaybackEnabled}
-                    aria-label={t('agent.rewind.label')}
                     title={t('agent.rewind.label')}
                     className={cn(
                         'transition-all duration-200 rounded-md',
@@ -376,7 +377,6 @@ function MoreDropdown({
                     size={compact ? 'icon' : 'xs'}
                     variant="ghost"
                     title={t('agent.moreActions')}
-                    aria-label={t('agent.moreActions')}
                     className={compact ? 'size-8 rounded-lg' : undefined}
                 >
                     <MoreVertical className="size-4" />

package/src/features/agent/chat/ModernAgentOutput/MessageInput.tsx

@@ -523,7 +523,6 @@ export default function MessageInput({
                                         variant="ghost"
                                         size="icon"
                                         className="size-8 rounded-full text-muted hover:bg-muted"
-                                        aria-label={t('agent.addAttachment')}
                                         title={t('agent.addAttachment')}
                                     >
                                         <PlusIcon className="size-4" />
@@ -654,7 +653,6 @@ export default function MessageInput({
                                 '[&_svg]:text-destructive disabled:[&_svg]:text-muted',
                             )}
                             title={t('agent.stopTooltip')}
-                            aria-label={t('agent.stopTooltip')}
                         >
                             {isStopping ? (
                                 <Spinner size="sm" />

package/src/features/agent/chat/ModernAgentOutput/MessageItem.tsx

@@ -35,6 +35,7 @@ import { ThinkingMessages } from '../WaitingMessages';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
 import { MessageDeliveryStatus } from './MessageDeliveryStatus';
 import { processContentForMarkdown } from './processContentForMarkdown';
+import { getToolApprovalResponseMetadata } from './requestInputMessages';
 import { getWorkstreamId } from './utils';
 
 /** className overrides for MessageItem — single source of truth for all className overrides. */
@@ -649,7 +650,9 @@ function MessageItemComponent({
                             options={askUserUx.options}
                             variant={askUserUx.variant}
                             multiSelect={askUserUx.multiSelect}
-                            onSelect={(optionId) => onSendMessage?.(optionId)}
+                            onSelect={(optionId) =>
+                                onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                            }
                             onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                             allowFreeResponse={!askUserUx.options?.length || !!askUserUx.free_response}
                             placeholder={askUserUx.free_response?.placeholder}

package/src/features/agent/chat/ModernAgentOutput/requestInputMessages.test.ts

@@ -0,0 +1,80 @@
+import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import {
+    getAnsweredToolApprovalRequestInputKeys,
+    getRequestInputMessageKey,
+    getToolApprovalResponseMetadata,
+} from './requestInputMessages';
+
+const APPROVAL_KEY = 'create_interaction:name:JDE AR Payment Processing Agent';
+
+function makeApprovalRequest(): AgentMessage {
+    return {
+        timestamp: 1,
+        type: AgentMessageType.REQUEST_INPUT,
+        message: 'Approve Create a new draft interaction: JDE AR Payment Processing Agent?',
+        workstream_id: 'main',
+        details: {
+            tool_approval: { tool_name: 'create_interaction', approval_key: APPROVAL_KEY },
+            ux: { options: [{ id: 'allow_once' }, { id: 'allow_for_run' }, { id: 'deny' }] },
+        },
+    } as unknown as AgentMessage;
+}
+
+function makeUserAnswer(message: string, metadata?: Record<string, unknown>): AgentMessage {
+    return {
+        timestamp: 2,
+        type: AgentMessageType.QUESTION,
+        message,
+        workstream_id: 'main',
+        details: metadata ? { metadata } : undefined,
+    } as unknown as AgentMessage;
+}
+
+describe('getToolApprovalResponseMetadata', () => {
+    it('builds structured response metadata for approval options', () => {
+        expect(getToolApprovalResponseMetadata(makeApprovalRequest(), 'allow_for_run')).toEqual({
+            tool_approval_response: { decision: 'allow_for_run', approval_key: APPROVAL_KEY },
+        });
+    });
+
+    it('returns undefined for prompts that are not tool approvals', () => {
+        const plainPrompt = {
+            timestamp: 1,
+            type: AgentMessageType.REQUEST_INPUT,
+            message: 'Which environment?',
+            workstream_id: 'main',
+            details: { ux: { options: [{ id: 'staging' }, { id: 'production' }] } },
+        } as unknown as AgentMessage;
+        expect(getToolApprovalResponseMetadata(plainPrompt, 'staging')).toBeUndefined();
+    });
+
+    it('returns undefined for unknown option ids', () => {
+        expect(getToolApprovalResponseMetadata(makeApprovalRequest(), 'staging')).toBeUndefined();
+    });
+});
+
+describe('getAnsweredToolApprovalRequestInputKeys', () => {
+    it('treats a bare option answer as answered', () => {
+        const request = makeApprovalRequest();
+        const answer = makeUserAnswer('allow_for_run');
+        const answered = getAnsweredToolApprovalRequestInputKeys([request, answer]);
+        expect(answered.has(getRequestInputMessageKey(request))).toBe(true);
+    });
+
+    it('treats a metadata-carrying answer as answered regardless of its text', () => {
+        const request = makeApprovalRequest();
+        const answer = makeUserAnswer('Allow this action for this run\n\nUploaded artifacts:\n[a.png](artifact:a)', {
+            tool_approval_response: { decision: 'allow_for_run', approval_key: APPROVAL_KEY },
+        });
+        const answered = getAnsweredToolApprovalRequestInputKeys([request, answer]);
+        expect(answered.has(getRequestInputMessageKey(request))).toBe(true);
+    });
+
+    it('does not treat unrelated prose as an approval answer', () => {
+        const request = makeApprovalRequest();
+        const answer = makeUserAnswer('please proceed\n\nUploaded artifacts:\n[a.png](artifact:a)');
+        const answered = getAnsweredToolApprovalRequestInputKeys([request, answer]);
+        expect(answered.size).toBe(0);
+    });
+});

package/src/features/agent/chat/ModernAgentOutput/requestInputMessages.ts

@@ -169,6 +169,22 @@ export function isToolApprovalRequestInput(message: AgentMessage): boolean {
     return message.type === AgentMessageType.REQUEST_INPUT && getToolApprovalKey(message) !== undefined;
 }
 
+const TOOL_APPROVAL_OPTION_DECISIONS = new Set(['allow_once', 'allow_for_run', 'deny']);
+
+/**
+ * Metadata to attach when the user picks an option on a tool-approval prompt, so the workflow
+ * reads the decision structurally instead of from the message text (which clients may decorate,
+ * e.g. with an attachments footer). Returns undefined for non-approval prompts or unknown options.
+ */
+export function getToolApprovalResponseMetadata(
+    message: AgentMessage,
+    optionId: string,
+): Record<string, unknown> | undefined {
+    const approvalKey = getToolApprovalKey(message);
+    if (!approvalKey || !TOOL_APPROVAL_OPTION_DECISIONS.has(optionId)) return undefined;
+    return { tool_approval_response: { decision: optionId, approval_key: approvalKey } };
+}
+
 function isToolApprovalOptionResponse(message: AgentMessage): boolean {
     if (message.type !== AgentMessageType.QUESTION) return false;
     const normalized = getAgentMessageText(message).trim().toLowerCase();
@@ -181,7 +197,11 @@ function isToolApprovalMetadataResponse(message: AgentMessage): boolean {
     const metadata = getRecord(details?.metadata);
     const toolApprovalResponse =
         getRecord(details?.tool_approval_response) ?? getRecord(metadata?.tool_approval_response);
-    return toolApprovalResponse?.decision === 'deny_with_feedback';
+    const decision = toolApprovalResponse?.decision;
+    return (
+        decision === 'deny_with_feedback' ||
+        (typeof decision === 'string' && TOOL_APPROVAL_OPTION_DECISIONS.has(decision))
+    );
 }
 
 function isToolApprovalResponse(message: AgentMessage): boolean {

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',
+        );
+    });
+});