@vertesia/ui 1.4.0 → 1.4.1

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

@@ -1,7 +1,8 @@
 import type { AgentMessage } from '@vertesia/common';
-import { Button, cn } from '@vertesia/ui/core';
+import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
-import { CheckCircle, Clock } from 'lucide-react';
+import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { getWorkstreamId } from './utils';
 
 interface WorkstreamTabsProps {
@@ -12,6 +13,324 @@ interface WorkstreamTabsProps {
     completionStatus?: Map<string, boolean>; // Optional completion status per workstream
 }
 
+// Tab-item styling for the header workstream bar: filled `bg-info` active pill with
+// count badges and completion icons (distinct from the right panel's underline tabs).
+const TAB_ITEM_BASE =
+    'flex items-center gap-1.5 px-2 py-1 text-xs font-medium whitespace-nowrap transition-colors border-b-2 shrink-0 cursor-pointer';
+const TAB_ITEM_INACTIVE = 'border-transparent text-muted hover:bg-muted';
+const TAB_ITEM_ACTIVE = 'border-info bg-info text-info';
+const TAB_GAP_PX = 4; // matches the `gap-1` between tab items
+
+// Shorten long workstream names for the tab row.
+function truncateName(name: string) {
+    return name.length > 20 ? `${name.substring(0, 18)}...` : name;
+}
+
+type WorkstreamEntry = [id: string, name: string];
+
+interface WorkstreamMoreMenuProps {
+    /** The overflowed workstream entries to list inside the menu. */
+    items: WorkstreamEntry[];
+    current: string;
+    onSelect: (id: string) => void;
+    label: string;
+    /** Whether the active workstream is one of the overflowed entries. */
+    active: boolean;
+    count?: Map<string, number>;
+    completionStatus?: Map<string, boolean>;
+}
+
+/** Trailing "More" dropdown of overflowed workstream tabs; opens on hover, click, or keyboard. */
+function WorkstreamMoreMenu({
+    items,
+    current,
+    onSelect,
+    label,
+    active,
+    count,
+    completionStatus,
+}: WorkstreamMoreMenuProps) {
+    const [open, setOpen] = useState(false);
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const openedByHover = useRef(false);
+
+    const cancelClose = () => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    const openOnHover = () => {
+        cancelClose();
+        openedByHover.current = true;
+        setOpen(true);
+    };
+    // Delay the close so the pointer can travel across the gap onto the menu.
+    const closeAfterDelay = () => {
+        cancelClose();
+        closeTimer.current = setTimeout(() => setOpen(false), 150);
+    };
+
+    // Clear any pending close timer on unmount.
+    useEffect(() => () => clearTimeout(closeTimer.current ?? undefined), []);
+
+    return (
+        // Non-modal: a modal menu sets body `pointer-events: none` while open, which makes
+        // the hover open/close flap. It still closes on outside-click / Escape.
+        <DropdownMenu
+            modal={false}
+            open={open}
+            onOpenChange={(next) => {
+                // Fired by click / keyboard / dismiss (not by hover); keep our state in sync.
+                cancelClose();
+                if (next) openedByHover.current = false;
+                setOpen(next);
+            }}
+        >
+            <DropdownMenuTrigger asChild>
+                {/* Tab-bar primitive: raw button is the menu trigger (asChild). */}
+                <button
+                    type="button"
+                    onMouseEnter={openOnHover}
+                    onMouseLeave={closeAfterDelay}
+                    className={cn(TAB_ITEM_BASE, active ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
+                >
+                    {label}
+                    <ChevronDown className="ms-0.5 size-3.5" />
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                align="end"
+                className="w-max"
+                onMouseEnter={cancelClose}
+                onMouseLeave={closeAfterDelay}
+                onCloseAutoFocus={(e) => {
+                    // Keep hover-opens from returning the focus ring to the trigger.
+                    if (openedByHover.current) e.preventDefault();
+                }}
+            >
+                {items.map(([id, name]) => {
+                    // biome-ignore lint/style/noNonNullAssertion: guarded by count?.has(id).
+                    const showCount = count?.has(id) && count.get(id)! > 0;
+                    return (
+                        <DropdownMenuItem
+                            key={id}
+                            onClick={() => onSelect(id)}
+                            className={cn('flex items-center gap-2', id === current && 'text-info')}
+                        >
+                            <span className="truncate">{name}</span>
+                            {showCount && (
+                                <span className="ms-auto inline-flex items-center gap-1">
+                                    <span className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] text-muted">
+                                        {count?.get(id)}
+                                    </span>
+                                    {completionStatus &&
+                                        id !== 'all' &&
+                                        (completionStatus.get(id) ? (
+                                            <CheckCircle className="size-3 text-success" />
+                                        ) : (
+                                            <Clock className="size-3 text-attention" />
+                                        ))}
+                                </span>
+                            )}
+                        </DropdownMenuItem>
+                    );
+                })}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+interface WorkstreamOverflowBarProps {
+    entries: WorkstreamEntry[];
+    activeWorkstream: string;
+    onSelectWorkstream: (id: string) => void;
+    count?: Map<string, number>;
+    completionStatus?: Map<string, boolean>;
+}
+
+/**
+ * Workstream tabs as a horizontal row; any that don't fit collapse into a trailing
+ * "More" dropdown. The visible/overflow split is measured from a hidden full-width row,
+ * and the active tab is always promoted into view so it can never hide in the menu.
+ */
+function WorkstreamOverflowBar({
+    entries,
+    activeWorkstream,
+    onSelectWorkstream,
+    count,
+    completionStatus,
+}: WorkstreamOverflowBarProps) {
+    const { t } = useUITranslation();
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+    const moreRef = useRef<HTMLButtonElement | null>(null);
+    // `count` leading tabs are shown. When `promote` is set, the active tab is pulled
+    // into the last slot (before More) and `count` counts the tabs shown before it.
+    const [layout, setLayout] = useState<{ count: number; promote: boolean }>({
+        count: entries.length,
+        promote: false,
+    });
+
+    const recompute = () => {
+        const container = containerRef.current;
+        if (!container) return;
+        const containerWidth = container.clientWidth;
+        const widths = entries.map((_, i) => itemRefs.current[i]?.offsetWidth ?? 0);
+        const totalAll = widths.reduce((sum, w) => sum + w, 0) + TAB_GAP_PX * Math.max(0, entries.length - 1);
+
+        // How many tabs (in order, optionally skipping one) fit within `available`.
+        const fitCount = (available: number, skipIndex: number) => {
+            let used = 0;
+            let fitted = 0;
+            for (let i = 0; i < entries.length; i++) {
+                if (i === skipIndex) continue;
+                const cand = used + (fitted > 0 ? TAB_GAP_PX : 0) + widths[i];
+                if (cand > available) break;
+                used = cand;
+                fitted += 1;
+            }
+            return fitted;
+        };
+
+        let next: { count: number; promote: boolean };
+        if (totalAll <= containerWidth) {
+            next = { count: entries.length, promote: false };
+        } else {
+            const moreWidth = moreRef.current?.offsetWidth ?? 0;
+            const naturalCount = Math.max(1, fitCount(containerWidth - moreWidth - TAB_GAP_PX, -1));
+            const activeIndex = entries.findIndex(([id]) => id === activeWorkstream);
+            if (activeIndex < 0 || activeIndex < naturalCount) {
+                next = { count: naturalCount, promote: false };
+            } else {
+                // Active tab overflowed: reserve its slot at the end, fit leading tabs before it.
+                const leadAvailable = containerWidth - moreWidth - widths[activeIndex] - TAB_GAP_PX * 2;
+                next = { count: fitCount(leadAvailable, activeIndex), promote: true };
+            }
+        }
+        setLayout((prev) => (prev.count === next.count && prev.promote === next.promote ? prev : next));
+    };
+
+    // Re-measure after every render (tab/label changes) and on container resize.
+    const recomputeRef = useRef(recompute);
+    recomputeRef.current = recompute;
+    useLayoutEffect(() => {
+        recomputeRef.current();
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver(() => recomputeRef.current());
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+
+    const activeIndex = entries.findIndex(([id]) => id === activeWorkstream);
+    let visible: WorkstreamEntry[];
+    let overflow: WorkstreamEntry[];
+    if (layout.promote && activeIndex >= 0) {
+        // Pull the active tab into the last visible slot; the tab it displaces overflows.
+        const others = entries.filter((_, i) => i !== activeIndex);
+        visible = [...others.slice(0, layout.count), entries[activeIndex]];
+        overflow = others.slice(layout.count);
+    } else {
+        visible = entries.slice(0, layout.count);
+        overflow = entries.slice(layout.count);
+    }
+    const activeInOverflow = overflow.some(([id]) => id === activeWorkstream);
+    const moreLabel = t('agent.moreTabs');
+
+    // Inner tab content (name + count badge + completion icon), shared by the hidden
+    // measurement row and the visible row so their measured widths match.
+    const renderTabInner = (id: string, name: string, isActive: boolean) => {
+        // biome-ignore lint/style/noNonNullAssertion: guarded by count?.has(id).
+        const showCount = count?.has(id) && count.get(id)! > 0;
+        return (
+            <>
+                {truncateName(name)}
+                {showCount && (
+                    <span className="flex items-center gap-1">
+                        <span
+                            className={cn(
+                                'inline-flex items-center justify-center p-1 text-xs rounded-full',
+                                isActive ? 'bg-info text-info' : 'bg-muted text-muted',
+                            )}
+                        >
+                            {count?.get(id)}
+                        </span>
+                        {/* Show completion status indicator if we have it and it's not 'all' */}
+                        {completionStatus &&
+                            id !== 'all' &&
+                            (completionStatus.get(id) ? (
+                                <CheckCircle className="size-3 text-success" />
+                            ) : (
+                                <Clock className="size-3 text-attention" />
+                            ))}
+                    </span>
+                )}
+            </>
+        );
+    };
+
+    return (
+        <div ref={containerRef} className="relative mb-1 bg-muted border-b border-muted/20">
+            {/* Hidden measurement row: all tabs + More at natural width, kept separate
+                from the visible row so measuring can't feed back into the layout. */}
+            <div aria-hidden className="pointer-events-none invisible absolute start-0 top-0 flex w-max gap-1">
+                {entries.map(([id, name], i) => (
+                    <button
+                        type="button"
+                        key={id}
+                        tabIndex={-1}
+                        ref={(el) => {
+                            itemRefs.current[i] = el;
+                        }}
+                        className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}
+                    >
+                        {renderTabInner(id, name, false)}
+                    </button>
+                ))}
+                <button type="button" tabIndex={-1} ref={moreRef} className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}>
+                    {moreLabel}
+                    <ChevronDown className="ms-0.5 size-3.5" />
+                </button>
+            </div>
+
+            {/* Visible row */}
+            <div className="flex gap-1 overflow-hidden">
+                {visible.map(([id, name]) => {
+                    const isActive = activeWorkstream === id;
+                    return (
+                        // Tab-bar primitive: raw button mirrors the filled active-pill styling.
+                        <button
+                            type="button"
+                            key={id}
+                            aria-current={isActive ? 'page' : undefined}
+                            onClick={() => onSelectWorkstream(id)}
+                            title={name.length > 20 ? name : undefined}
+                            className={cn(TAB_ITEM_BASE, isActive ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
+                        >
+                            {renderTabInner(id, name, isActive)}
+                        </button>
+                    );
+                })}
+
+                {overflow.length > 0 && (
+                    <WorkstreamMoreMenu
+                        items={overflow}
+                        current={activeWorkstream}
+                        onSelect={onSelectWorkstream}
+                        label={moreLabel}
+                        active={activeInOverflow}
+                        count={count}
+                        completionStatus={completionStatus}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
+
 /**
  * Component that displays tabs for different workstreams
  */
@@ -58,46 +377,13 @@ export default function WorkstreamTabs({
     }
 
     return (
-        <div className="flex overflow-x-auto gap-1 mb-1 bg-muted border-b border-muted/20 sticky top-0 z-10">
-            {sortedWorkstreams.map(([id, name]) => (
-                <Button
-                    variant="unstyled"
-                    key={id}
-                    className={cn(
-                        'px-2 py-1 text-xs font-medium whitespace-nowrap transition-colors flex items-center gap-1.5',
-                        activeWorkstream === id
-                            ? 'bg-info text-info border-b-2 border-info'
-                            : 'text-muted hover:bg-muted border-b-2 border-transparent',
-                    )}
-                    onClick={() => onSelectWorkstream(id)}
-                    title={name.length > 20 ? name : undefined}
-                >
-                    {/* Shorten long names for better UI */}
-                    {name.length > 20 ? `${name.substring(0, 18)}...` : name}
-                    {/* biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here */}
-                    {count?.has(id) && count.get(id)! > 0 && (
-                        <div className="flex items-center gap-1">
-                            <span
-                                className={cn(
-                                    'inline-flex items-center justify-center p-1 text-xs rounded-full',
-                                    activeWorkstream === id ? 'bg-info text-info' : 'bg-muted text-muted',
-                                )}
-                            >
-                                {count.get(id)}
-                            </span>
-                            {/* Show completion status indicator if we have it and it's not 'all' */}
-                            {completionStatus &&
-                                id !== 'all' &&
-                                (completionStatus.get(id) ? (
-                                    <CheckCircle className="size-3 text-success" />
-                                ) : (
-                                    <Clock className="size-3 text-attention" />
-                                ))}
-                        </div>
-                    )}
-                </Button>
-            ))}
-        </div>
+        <WorkstreamOverflowBar
+            entries={sortedWorkstreams}
+            activeWorkstream={activeWorkstream}
+            onSelectWorkstream={onSelectWorkstream}
+            count={count}
+            completionStatus={completionStatus}
+        />
     );
 }
 

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/useFileProcessing.test.tsx

@@ -50,6 +50,76 @@ describe('useFileProcessing', () => {
         expect(result.current.processingFiles.has('file-1')).toBe(false);
     });
 
+    it('clears files on send without signaling FileRemoved and suppresses the server echo', async () => {
+        const client = createClient();
+        const toast = vi.fn();
+        const serverFileUpdates = new Map([['file-1', createReadyFile('file-1')]]);
+        const { result, rerender } = renderHook(
+            ({ updates }) => useFileProcessing(client, 'agent-run-1', updates, toast),
+            {
+                initialProps: { updates: serverFileUpdates },
+            },
+        );
+
+        expect(result.current.processingFiles.has('file-1')).toBe(true);
+
+        act(() => {
+            result.current.clearProcessingFiles();
+        });
+
+        // The agent already received the file via FileUploaded, so sending the message
+        // consumes it rather than retracting it — no FileRemoved signal.
+        expect(client.agents.sendSignal).not.toHaveBeenCalled();
+        expect(result.current.processingFiles.has('file-1')).toBe(false);
+
+        // A subsequent server echo for the same file must not re-add the chip.
+        rerender({ updates: new Map([['file-1', createReadyFile('file-1')]]) });
+        expect(result.current.processingFiles.has('file-1')).toBe(false);
+    });
+
+    it('preserves local artifact_path/reference when a server update omits them', async () => {
+        const client = createClient();
+        const toast = vi.fn();
+        const { result, rerender } = renderHook(
+            ({ updates }) => useFileProcessing(client, 'agent-run-1', updates, toast),
+            {
+                initialProps: { updates: new Map<string, ConversationFile>() },
+            },
+        );
+
+        const file = new File(['pdf'], 'report.pdf', { type: 'application/pdf' });
+        await act(async () => {
+            await result.current.handleFileUpload([file]);
+        });
+
+        const [fileId, local] = Array.from(result.current.processingFiles.entries())[0];
+        expect(local.artifact_path).toBe('files/report.pdf');
+        expect(local.reference).toBe('artifact:files/report.pdf');
+
+        // Server echoes READY but drops artifact_path/reference — the merge must backfill
+        // them from the local optimistic entry so the sent-message embed still resolves.
+        rerender({
+            updates: new Map<string, ConversationFile>([
+                [
+                    fileId,
+                    {
+                        id: fileId,
+                        name: 'report.pdf',
+                        content_type: 'application/pdf',
+                        size: 0,
+                        status: FileProcessingStatus.READY,
+                        started_at: 1_000,
+                    },
+                ],
+            ]),
+        });
+
+        const merged = result.current.processingFiles.get(fileId);
+        expect(merged?.status).toBe(FileProcessingStatus.READY);
+        expect(merged?.artifact_path).toBe('files/report.pdf');
+        expect(merged?.reference).toBe('artifact:files/report.pdf');
+    });
+
     it('does not signal an upload that was removed before upload completion', async () => {
         const client = createClient();
         const uploadArtifact = vi.mocked(client.agents.uploadArtifact);

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

@@ -8,6 +8,7 @@ export interface UseFileProcessingResult {
     hasProcessingFiles: boolean;
     handleFileUpload: (files: File[]) => Promise<void>;
     removeProcessingFile: (fileId: string) => Promise<void>;
+    clearProcessingFiles: () => void;
 }
 
 type ToastFn = (opts: {
@@ -58,6 +59,12 @@ export function useFileProcessing(
     const removedFileIdsRef = useRef<Set<string>>(new Set());
     const previewUrlsRef = useRef<Map<string, string>>(new Map());
     const previousAgentRunId = useRef(agentRunId);
+    // Kept current so clearProcessingFiles() can read the latest tracked ids
+    // imperatively without being re-created on every render.
+    const localFilesRef = useRef(localFiles);
+    localFilesRef.current = localFiles;
+    const serverFileUpdatesRef = useRef(serverFileUpdates);
+    serverFileUpdatesRef.current = serverFileUpdates;
 
     const revokePreviewUrl = useCallback((fileId: string) => {
         const previewUrl = previewUrlsRef.current.get(fileId);
@@ -97,11 +104,17 @@ export function useFileProcessing(
         });
         serverFileUpdates.forEach((file, id) => {
             if (!removedFileIds.has(id)) {
-                const localPreviewUrl = (localFiles.get(id) as LocalConversationFile | undefined)?.preview_url;
-                merged.set(
-                    id,
-                    localPreviewUrl ? ({ ...file, preview_url: localPreviewUrl } as LocalConversationFile) : file,
-                );
+                // Server updates are authoritative for status, but may omit fields the local
+                // optimistic entry already knows: preview_url is never sent by the server, and
+                // artifact_path/reference can be absent on some updates. Backfill them from local
+                // so the sent-message embed and thumbnail resolution keep working.
+                const local = localFiles.get(id) as LocalConversationFile | undefined;
+                merged.set(id, {
+                    ...file,
+                    artifact_path: file.artifact_path ?? local?.artifact_path,
+                    reference: file.reference ?? local?.reference,
+                    ...(local?.preview_url ? { preview_url: local.preview_url } : {}),
+                } as LocalConversationFile);
             }
         });
         return merged;
@@ -224,5 +237,23 @@ export function useFileProcessing(
         [agentRunId, client, revokePreviewUrl, t, toast],
     );
 
-    return { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile };
+    // Clears the composer's uploaded-file chips after a message is sent. Unlike
+    // removeProcessingFile, this does NOT signal FileRemoved — the agent already
+    // received these files via FileUploaded, so the message consumes them rather
+    // than retracting them. The ids are added to removedFileIds so the server echo
+    // in the merge above cannot re-add a chip once the message has been sent.
+    const clearProcessingFiles = useCallback(() => {
+        previewUrlsRef.current.forEach(revokePreviewUrlValue);
+        previewUrlsRef.current.clear();
+        setRemovedFileIds((prev) => {
+            const next = new Set(prev);
+            for (const id of serverFileUpdatesRef.current.keys()) next.add(id);
+            for (const id of localFilesRef.current.keys()) next.add(id);
+            removedFileIdsRef.current = next;
+            return next;
+        });
+        setLocalFiles(new Map());
+    }, []);
+
+    return { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile, clearProcessingFiles };
 }