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

package/src/core/components/shadcn/theme/ThemeSwitcher.tsx

@@ -17,7 +17,7 @@ export function ModeOption({ option, current, setTheme, icon, alt }: ModeOptionP
             variant={current === option ? 'secondary' : 'outline'}
             size="sm"
             onClick={() => setTheme(option)}
-            alt={alt}
+            title={alt}
         >
             {icon}
         </Button>

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/AgentChatPlaybackControls.tsx

@@ -108,7 +108,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.jumpToStart')}
                     title={t('agent.rewind.jumpToStart')}
                     disabled={!canJumpToStart}
                     onClick={jumpToStart}
@@ -120,7 +119,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.previousMessage')}
                     title={t('agent.rewind.previousMessage')}
                     disabled={!canStepPrevious}
                     onClick={setPreviousMessage}
@@ -165,7 +163,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.nextMessage')}
                     title={t('agent.rewind.nextMessage')}
                     disabled={!canStepNext}
                     onClick={setNextMessage}
@@ -177,7 +174,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.jumpToLatest')}
                     title={t('agent.rewind.jumpToLatest')}
                     disabled={!canJumpToLatest}
                     onClick={jumpToLatest}
@@ -189,7 +185,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant={isLive ? 'secondary' : 'ghost'}
                     size="icon"
-                    aria-label={t('agent.rewind.jumpToLive')}
                     title={t('agent.rewind.jumpToLive')}
                     disabled={isLive}
                     onClick={() => onChangeCursor('live')}

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

@@ -110,6 +110,37 @@ describe('AgentRequestInputOverlay', () => {
         });
     });
 
+    it('sends a tool approval option with structured metadata', () => {
+        const onSendMessage = vi.fn();
+
+        renderWithProviders(
+            <AgentRequestInputOverlay message={createToolApprovalRequestMessage()} onSendMessage={onSendMessage} />,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Allow this action for this run' }));
+
+        expect(onSendMessage).toHaveBeenCalledTimes(1);
+        expect(onSendMessage).toHaveBeenCalledWith('allow_for_run', {
+            tool_approval_response: {
+                decision: 'allow_for_run',
+                approval_key: 'write_artifact:name:quotes.md',
+            },
+        });
+    });
+
+    it('sends a bare option id for prompts that are not tool approvals', () => {
+        const onSendMessage = vi.fn();
+        const message = createToolApprovalRequestMessage();
+        delete (message.details as Record<string, unknown>).tool_approval;
+
+        renderWithProviders(<AgentRequestInputOverlay message={message} onSendMessage={onSendMessage} />);
+
+        fireEvent.click(screen.getByRole('button', { name: 'Allow once' }));
+
+        expect(onSendMessage).toHaveBeenCalledTimes(1);
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+    });
+
     it('renders legacy field-prefixed tool approval prompts with a friendly target', () => {
         const message = createToolApprovalRequestMessage();
         message.message = 'Approve Write Artifact: name quotes.md?';

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

@@ -5,7 +5,11 @@ import { useUserSession } from '@vertesia/ui/session';
 import { XIcon } from 'lucide-react';
 import { RemoteMcpConnectionButton } from '../../oauth/RemoteMcpConnectionButton.js';
 import { AskUserWidget } from './AskUserWidget';
-import { getRequestInputDisplayText, type RequestInputMessageWithUx } from './ModernAgentOutput/requestInputMessages';
+import {
+    getRequestInputDisplayText,
+    getToolApprovalResponseMetadata,
+    type RequestInputMessageWithUx,
+} from './ModernAgentOutput/requestInputMessages';
 
 export interface AgentRequestInputOverlayProps {
     message?: RequestInputMessageWithUx;
@@ -118,7 +122,7 @@ export function AgentRequestInputOverlay({
                     allowFreeResponse={options.length === 0 || !!freeResponse}
                     placeholder={freeResponse?.placeholder}
                     submitLabel={freeResponse?.submit_label}
-                    onSelect={send}
+                    onSelect={(optionId) => send(optionId, getToolApprovalResponseMetadata(message, optionId))}
                     onMultiSelect={(optionIds) => send(optionIds.join(', '))}
                     onSubmit={(value) => send(value, freeResponse?.metadata)}
                     hideBorder

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,8 +14,14 @@ import {
     RefreshCwIcon,
 } from 'lucide-react';
 import React, { useCallback, useId, useMemo, useState } from 'react';
+import type { UniversalDocumentSource } from '../../document-viewer/UniversalDocumentViewer.js';
 import { type ArtifactTreeNode, useArtifacts } from './hooks/useArtifacts.js';
 
+const UniversalDocumentViewer = React.lazy(async () => {
+    const module = await import('../../document-viewer/UniversalDocumentViewer.js');
+    return { default: module.UniversalDocumentViewer };
+});
+
 // ---------------------------------------------------------------------------
 // Tree node component
 // ---------------------------------------------------------------------------
@@ -22,16 +30,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 +84,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 +97,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 +183,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 +249,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 +280,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 +329,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 +348,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 +387,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 +396,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                                 node={node}
                                 depth={0}
                                 runId={runId}
+                                onPreview={handlePreview}
                                 onDownload={handleDownload}
                                 downloadingPath={downloadingPath}
                                 forceExpanded={!!normalizedFilterValue}
@@ -290,9 +404,39 @@ 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">
+                        <React.Suspense
+                            fallback={
+                                <Center className="h-full">
+                                    <Loader2Icon className="size-6 animate-spin text-muted" />
+                                </Center>
+                            }
+                        >
+                            <UniversalDocumentViewer
+                                source={previewSource}
+                                className="h-full"
+                                onDownload={() => previewPath && void handleDownload(previewPath)}
+                            />
+                        </React.Suspense>
+                    </ModalBody>
+                </Modal>
+            )}
         </div>
     );
 }

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

@@ -64,7 +64,6 @@ export function ImageLightboxProvider({ children }: ImageLightboxProviderProps)
                             className="absolute top-2 end-2 text-white bg-black/50 rounded-full p-2 hover:bg-black/70 transition-colors"
                             onClick={closeImage}
                             title={t('agent.close')}
-                            aria-label={t('agent.close')}
                         >
                             <X className="size-6" />
                         </Button>

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

@@ -1400,6 +1400,54 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('passes approval option metadata through the request overlay signal', async () => {
+        mockStreamState({
+            messages: [
+                {
+                    ...createMessage(AgentMessageType.REQUEST_INPUT, 'Approve Write Artifact: quotes.md?'),
+                    details: {
+                        tool_approval: {
+                            tool_name: 'write_artifact',
+                            approval_key: 'write_artifact:name:quotes.md',
+                        },
+                        ux: {
+                            options: [
+                                { id: 'allow_once', label: 'Allow once' },
+                                { id: 'allow_for_run', label: 'Allow this action for this run' },
+                                { id: 'deny', label: 'Deny' },
+                            ],
+                        },
+                    },
+                },
+            ],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Allow this action for this run' }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledTimes(1);
+        });
+        expect(mocks.sendSignal).toHaveBeenCalledWith(
+            'agent-run-1',
+            'UserInput',
+            expect.objectContaining({
+                message: 'allow_for_run',
+                metadata: expect.objectContaining({
+                    tool_approval_response: {
+                        decision: 'allow_for_run',
+                        approval_key: 'write_artifact:name:quotes.md',
+                    },
+                    id: expect.any(String),
+                    _messageId: expect.any(String),
+                }),
+            }),
+        );
+    });
+
     it('sends directly without restart while the run is active', async () => {
         mockStreamState({
             messages: [createMessage(AgentMessageType.ANSWER, 'still running')],

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);
@@ -1106,7 +1110,6 @@ function StartWorkflowView({
                                 size="xs"
                                 variant="ghost"
                                 onClick={onClose}
-                                aria-label={t('agent.close')}
                                 title={t('agent.close')}
                                 className="text-muted hover:text-foreground"
                             >
@@ -1212,7 +1215,6 @@ function StartWorkflowView({
                                     'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100',
                                 )}
                                 title={resolvedStartButtonText}
-                                aria-label={resolvedStartButtonText}
                             >
                                 {isSending ? <Spinner size="sm" /> : <ArrowUpIcon className="size-4" />}
                             </Button>