@vertesia/ui 1.4.0-dev.20260615.051508Z → 1.4.0

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

@@ -255,47 +255,36 @@ function AttachmentPreview({
         </Button>
     ) : null;
 
-    if (shouldRenderThumbnail && resolvedUrl) {
-        return (
-            <div className="relative inline-flex flex-col gap-1">
-                <Button
-                    type="button"
-                    variant="unstyled"
-                    onClick={() => openImage(resolvedUrl, item.name)}
-                    aria-label={item.name}
-                    className={cn(
-                        'group overflow-hidden rounded-xl border border-border/70 bg-mixer-muted/20 p-0 shadow-sm',
-                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                        variant === 'composer' ? 'size-16' : 'size-24',
-                    )}
-                >
-                    <img
-                        src={resolvedUrl}
-                        alt={item.name}
-                        className="h-full w-full object-cover transition-transform group-hover:scale-[1.02]"
-                    />
-                </Button>
-                {item.statusLabel ? (
-                    <span
-                        className={cn(
-                            'absolute bottom-1 start-1 max-w-[calc(100%-0.5rem)] truncate rounded px-1.5 py-0.5',
-                            'text-[10px] font-medium shadow-sm',
-                            statusClassName,
-                        )}
-                    >
-                        {item.statusLabel}
-                    </span>
-                ) : null}
-                {removeButton}
-            </div>
+    const attachmentIcon =
+        shouldRenderThumbnail && resolvedUrl ? (
+            <Button
+                type="button"
+                variant="unstyled"
+                size="none"
+                onClick={(event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    openImage(resolvedUrl, item.name);
+                }}
+                aria-label={item.name}
+                title={t('agent.enlargedView')}
+                className={cn(
+                    'group shrink-0 overflow-hidden rounded border border-border/60 p-0',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                    variant === 'composer' ? 'size-6' : 'size-24',
+                )}
+            >
+                <img
+                    src={resolvedUrl}
+                    alt={item.name}
+                    className="h-full w-full object-cover transition-transform group-hover:scale-[1.05]"
+                />
+            </Button>
+        ) : isImage ? (
+            <ImageIcon className="size-3.5 shrink-0 text-muted" aria-hidden="true" />
+        ) : (
+            <FileTextIcon className="size-3.5 shrink-0 text-muted" aria-hidden="true" />
         );
-    }
-
-    const attachmentIcon = isImage ? (
-        <ImageIcon className="size-3.5 shrink-0 text-muted" aria-hidden="true" />
-    ) : (
-        <FileTextIcon className="size-3.5 shrink-0 text-muted" aria-hidden="true" />
-    );
     const attachmentLabel = (
         <span className="inline-flex min-w-0 max-w-full items-center gap-1.5">
             {attachmentIcon}
@@ -313,6 +302,7 @@ function AttachmentPreview({
     if (variant === 'composer') {
         return (
             <span
+                title={item.name}
                 className={cn(
                     'inline-flex min-h-8 max-w-full items-center gap-1 rounded-xl border border-border/60',
                     'bg-mixer-muted/15 px-2.5 py-1 text-sm text-foreground/80 transition-colors',
@@ -333,6 +323,7 @@ function AttachmentPreview({
 
     const chipContent = (
         <span
+            title={item.name}
             className={cn(
                 'inline-flex max-w-full items-center gap-1.5 rounded-md border border-border/60 bg-mixer-muted/15',
                 'px-2.5 py-1.5 text-xs text-foreground/80 transition-colors',

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

@@ -103,6 +103,32 @@ export default function Header({
                 isCompact ? 'flex flex-col items-center gap-1' : 'flex justify-end items-center gap-2 ms-auto',
             )}
         >
+            {showPlanButton && (
+                <div className="relative">
+                    <Button
+                        size={variant === 'compact' ? 'icon' : 'sm'}
+                        variant={showPlanPanel ? 'primary' : 'ghost'}
+                        onClick={onTogglePlanPanel}
+                        className={cn(
+                            'transition-all duration-200 rounded-md',
+                            variant === 'compact' && 'size-8 rounded-lg',
+                        )}
+                        title={t('agent.toggleRightSidebar')}
+                    >
+                        <ClipboardList className={cn('size-4', variant === 'full' && 'me-1.5')} />
+                        {variant === 'full' ? (
+                            <span className="font-medium text-xs">
+                                {showPlanPanel ? t('agent.hideSidebar') : t('agent.showSidebar')}
+                            </span>
+                        ) : (
+                            <span className="sr-only">
+                                {showPlanPanel ? t('agent.hideSidebar') : t('agent.showSidebar')}
+                            </span>
+                        )}
+                    </Button>
+                </div>
+            )}
+
             {/* View Mode Toggle */}
             {isCompact ? (
                 <Button
@@ -144,32 +170,6 @@ export default function Header({
                 </div>
             )}
 
-            {showPlanButton && (
-                <div className="relative">
-                    <Button
-                        size={variant === 'compact' ? 'icon' : 'sm'}
-                        variant={showPlanPanel ? 'primary' : 'ghost'}
-                        onClick={onTogglePlanPanel}
-                        className={cn(
-                            'transition-all duration-200 rounded-md',
-                            variant === 'compact' && 'size-8 rounded-lg',
-                        )}
-                        title={t('agent.toggleRightSidebar')}
-                    >
-                        <ClipboardList className={cn('size-4', variant === 'full' && 'me-1.5')} />
-                        {variant === 'full' ? (
-                            <span className="font-medium text-xs">
-                                {showPlanPanel ? t('agent.hideSidebar') : t('agent.showSidebar')}
-                            </span>
-                        ) : (
-                            <span className="sr-only">
-                                {showPlanPanel ? t('agent.hideSidebar') : t('agent.showSidebar')}
-                            </span>
-                        )}
-                    </Button>
-                </div>
-            )}
-
             {showPlaybackButton && onTogglePlayback && (
                 <Button
                     type="button"
@@ -240,8 +240,8 @@ export default function Header({
                     className,
                 )}
             >
-                <div className="flex flex-wrap items-center space-x-2">
-                    <div className="flex items-center space-x-1">
+                <div className="flex flex-wrap items-center gap-2">
+                    <div className="flex items-center gap-1">
                         <Bot className="size-5 text-muted" />
                         <span className="font-medium">{title}</span>
                     </div>

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

@@ -0,0 +1,83 @@
+import { type AgentMessage, type AgentMessageDetails, AgentMessageType } from '@vertesia/common';
+import { cn, VTooltip } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { AlertCircle, Check, CheckCheck, Clock, type LucideIcon } from 'lucide-react';
+import { isUserStoppedMessage } from './utils';
+
+export type MessageDeliveryStatusValue = NonNullable<AgentMessageDetails['_deliveryStatus']>;
+
+interface MessageDeliveryStatusConfig {
+    icon: LucideIcon;
+    className: string;
+}
+
+const STATUS_CONFIG: Record<MessageDeliveryStatusValue, MessageDeliveryStatusConfig> = {
+    sending: {
+        icon: Clock,
+        className: 'text-muted/70',
+    },
+    received: {
+        icon: Check,
+        className: 'text-info',
+    },
+    consumed: {
+        icon: CheckCheck,
+        className: 'text-success',
+    },
+    failed: {
+        icon: AlertCircle,
+        className: 'text-destructive',
+    },
+};
+
+function isDeliveryStatus(value: unknown): value is MessageDeliveryStatusValue {
+    return value === 'sending' || value === 'received' || value === 'consumed' || value === 'failed';
+}
+
+export function getMessageDeliveryStatus(message: AgentMessage): MessageDeliveryStatusValue | undefined {
+    if (message.type !== AgentMessageType.QUESTION && !isUserStoppedMessage(message)) return undefined;
+
+    const status = message.details?._deliveryStatus;
+    if (isDeliveryStatus(status)) return status;
+    if (message.details?.ack) return 'consumed';
+    return undefined;
+}
+
+function getDeliveryStatusLabel(
+    t: ReturnType<typeof useUITranslation>['t'],
+    status: MessageDeliveryStatusValue,
+): string {
+    switch (status) {
+        case 'sending':
+            return t('agent.messageSending');
+        case 'received':
+            return t('agent.messageReceived');
+        case 'consumed':
+            return t('agent.messageConsumed');
+        case 'failed':
+            return t('agent.messageFailed');
+    }
+    return status;
+}
+
+export function MessageDeliveryStatus({ message, className }: { message: AgentMessage; className?: string }) {
+    const { t } = useUITranslation();
+    const status = getMessageDeliveryStatus(message);
+    if (!status) return null;
+
+    const config = STATUS_CONFIG[status];
+    const Icon = config.icon;
+    const label = getDeliveryStatusLabel(t, status);
+
+    return (
+        <VTooltip description={label} asChild>
+            <span
+                aria-label={label}
+                className={cn('inline-flex h-5 w-5 items-center justify-center', config.className, className)}
+                role="img"
+            >
+                <Icon className="size-3.5" aria-hidden="true" />
+            </span>
+        </VTooltip>
+    );
+}

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

@@ -17,8 +17,7 @@ describe('MessageInput', () => {
             />,
         );
 
-        expect(screen.getByPlaceholderText(/Enter to send/)).not.toBeNull();
-        expect(screen.queryByText('Enter to send • Shift+Enter for new line')).toBeNull();
+        expect(screen.getByPlaceholderText(/Type your message/)).not.toBeNull();
         expect(screen.getByText('Loan package')).not.toBeNull();
 
         fireEvent.pointerDown(screen.getByRole('button', { name: /Add attachment/i }));
@@ -55,6 +54,15 @@ describe('MessageInput', () => {
         expect(onFilesSelected).toHaveBeenCalledWith([file]);
     });
 
+    it('renders attachment actions before the MCP slot', () => {
+        renderWithProviders(<MessageInput onSend={vi.fn()} mcpSlot={<button type="button">MCP</button>} isCompleted />);
+
+        const attachmentButton = screen.getByRole('button', { name: /Add attachment/i });
+        const mcpButton = screen.getByRole('button', { name: 'MCP' });
+
+        expect(attachmentButton.compareDocumentPosition(mcpButton) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+
     it('accepts dropped files when upload is enabled', () => {
         const onFilesSelected = vi.fn();
         const { container } = renderWithProviders(<MessageInput onSend={vi.fn()} onFilesSelected={onFilesSelected} />);
@@ -168,6 +176,34 @@ describe('MessageInput', () => {
         expect(screen.getByText('Ready')).not.toBeNull();
     });
 
+    it('renders context usage and triggers manual compaction', async () => {
+        const onCompactContext = vi.fn();
+
+        renderWithProviders(
+            <MessageInput
+                onSend={vi.fn()}
+                contextWindowUsage={{
+                    usedTokens: 50_000,
+                    checkpointTokens: 100_000,
+                    usedPercent: 50,
+                    remainingPercent: 50,
+                }}
+                onCompactContext={onCompactContext}
+                isStreaming
+            />,
+        );
+
+        const contextButton = screen.getByRole('button', { name: /50% context used/i });
+
+        fireEvent.pointerMove(contextButton);
+
+        expect((await screen.findAllByText('Context size: 50K / 100K tokens')).length).toBeGreaterThan(0);
+
+        fireEvent.click(contextButton);
+
+        expect(onCompactContext).toHaveBeenCalledTimes(1);
+    });
+
     it('shows active workstream names above the compact composer', () => {
         renderWithProviders(
             <MessageInput

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

@@ -10,27 +10,16 @@ import {
     ModalTitle,
     Spinner,
     Textarea,
+    VTooltip,
 } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
-import {
-    Activity,
-    ArrowUpIcon,
-    Bot,
-    FileTextIcon,
-    PaperclipIcon,
-    PlusIcon,
-    SquareIcon,
-    UploadIcon,
-} from 'lucide-react';
+import { Activity, ArrowUpIcon, FileTextIcon, PaperclipIcon, PlusIcon, SquareIcon, UploadIcon } from 'lucide-react';
 import type React from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SelectDocument } from '../../../store/objects/components/SelectDocument';
-import {
-    formatWorkstreamName,
-    getWorkstreamDisplayName,
-    getWorkstreamStatusClass,
-    type WorkstreamInfo,
-} from '../workstreams.js';
+import { extractFilesFromClipboard } from '../clipboardFiles.js';
+import type { WorkstreamInfo } from '../workstreams.js';
+import { ActiveWorkstreamsSummary } from './ActiveWorkstreamsSummary';
 import { type AttachmentPreviewItem, AttachmentPreviewList } from './AttachmentPreview';
 
 /** Represents an uploaded file attachment */
@@ -51,6 +40,19 @@ export interface SelectedDocument {
     name: string;
 }
 
+export interface ContextWindowUsage {
+    usedTokens: number;
+    checkpointTokens: number;
+    usedPercent: number;
+    remainingPercent: number;
+}
+
+function formatTokenCountInK(tokens: number): string {
+    const value = Math.max(0, tokens) / 1000;
+    const maximumFractionDigits = value > 0 && value < 10 && !Number.isInteger(value) ? 1 : 0;
+    return `${new Intl.NumberFormat(undefined, { maximumFractionDigits }).format(value)}K`;
+}
+
 interface MessageInputProps {
     onSend: (message: string) => void;
     onStop?: () => void;
@@ -59,6 +61,9 @@ interface MessageInputProps {
     isStopping?: boolean;
     isStreaming?: boolean;
     isCompleted?: boolean;
+    contextWindowUsage?: ContextWindowUsage;
+    onCompactContext?: () => void;
+    isCompactingContext?: boolean;
     activeTaskCount?: number;
     activeWorkstreams?: WorkstreamInfo[];
     placeholder?: string;
@@ -99,6 +104,10 @@ interface MessageInputProps {
     hideObjectLinking?: boolean;
     // Hide file upload (for apps that don't use it)
     hideFileUpload?: boolean;
+    /** Optional toolbar slot for the agent approval mode selector. */
+    approvalModeSlot?: React.ReactNode;
+    /** Optional toolbar slot (e.g. the MCP action menu) rendered next to the attachment actions. */
+    mcpSlot?: React.ReactNode;
     /** Disable the local input drop overlay when a parent view owns drag/drop handling */
     disableDropZone?: boolean;
 
@@ -112,11 +121,16 @@ interface MessageInputProps {
 export default function MessageInput({
     onSend,
     onStop,
+    approvalModeSlot,
+    mcpSlot,
     disabled = false,
     isSending = false,
     isStopping = false,
     isStreaming = false,
     isCompleted = false,
+    contextWindowUsage,
+    onCompactContext,
+    isCompactingContext = false,
     activeTaskCount = 0,
     activeWorkstreams = [],
     placeholder,
@@ -161,8 +175,15 @@ export default function MessageInput({
         [activeWorkstreams],
     );
     const activeWorkstreamCount = runningWorkstreams.length || activeTaskCount;
-    const visibleRunningWorkstreams = runningWorkstreams.slice(0, 3);
-    const hiddenRunningWorkstreamCount = Math.max(0, runningWorkstreams.length - visibleRunningWorkstreams.length);
+    const contextUsageLabel = contextWindowUsage
+        ? t('agent.contextUsageCompactLabel', { percent: contextWindowUsage.usedPercent })
+        : undefined;
+    const contextTokenUsageLabel = contextWindowUsage
+        ? t('agent.contextTokenUsage', {
+              used: formatTokenCountInK(contextWindowUsage.usedTokens),
+              limit: formatTokenCountInK(contextWindowUsage.checkpointTokens),
+          })
+        : undefined;
     const attachmentItems = useMemo<AttachmentPreviewItem[]>(() => {
         const items: AttachmentPreviewItem[] = [];
         if (!hideFileUpload && processingFiles) {
@@ -285,30 +306,7 @@ export default function MessageInput({
     const handlePaste = useCallback(
         (e: React.ClipboardEvent) => {
             if (!canUploadFiles) return;
-
-            const items = e.clipboardData?.items;
-            if (!items) return;
-
-            const files: File[] = [];
-            for (let i = 0; i < items.length; i++) {
-                const item = items[i];
-                if (item.kind === 'file') {
-                    const file = item.getAsFile();
-                    if (file) {
-                        // If it's an image without a proper name, generate one
-                        if (item.type.startsWith('image/') && (!file.name || file.name === 'image.png')) {
-                            const extension = item.type.split('/')[1] || 'png';
-                            const namedFile = new File([file], `pasted-image-${Date.now()}.${extension}`, {
-                                type: file.type,
-                            });
-                            files.push(namedFile);
-                        } else {
-                            files.push(file);
-                        }
-                    }
-                }
-            }
-
+            const files = extractFilesFromClipboard(e.clipboardData?.items);
             if (files.length > 0) {
                 handleFiles(files);
             }
@@ -472,52 +470,7 @@ export default function MessageInput({
                 />
             )}
 
-            {runningWorkstreams.length > 0 && (
-                <div className="mx-auto mb-2 w-full max-w-3xl px-1" data-agent-active-workstreams>
-                    <output
-                        className="flex flex-col gap-1.5 rounded-2xl border border-border/70 bg-background/95 p-2 text-xs text-muted shadow-lg shadow-black/5"
-                        aria-live="polite"
-                    >
-                        <div className="flex items-center gap-2 px-1 font-medium">
-                            <Bot className="size-3.5 text-muted" aria-hidden="true" />
-                            <span>{t('agent.activeWorkstreams', { count: runningWorkstreams.length })}</span>
-                        </div>
-                        <div className="flex flex-col gap-0.5">
-                            {visibleRunningWorkstreams.map((workstream) => {
-                                const workstreamName = getWorkstreamDisplayName(
-                                    workstream.workstream_id,
-                                    workstream.interaction,
-                                );
-
-                                return (
-                                    <span
-                                        key={workstream.launch_id || workstream.workstream_id}
-                                        className="flex min-w-0 items-center gap-2 rounded-lg px-1 py-1 text-sm text-foreground/80"
-                                        title={workstreamName}
-                                    >
-                                        <span
-                                            className={cn(
-                                                'size-1.5 shrink-0 rounded-full',
-                                                getWorkstreamStatusClass(workstream.status),
-                                            )}
-                                            aria-hidden="true"
-                                        />
-                                        <span className="truncate font-medium">{workstreamName}</span>
-                                        {workstream.phase && (
-                                            <span className="truncate text-xs text-muted/75">
-                                                {formatWorkstreamName(workstream.phase)}
-                                            </span>
-                                        )}
-                                    </span>
-                                );
-                            })}
-                            {hiddenRunningWorkstreamCount > 0 && (
-                                <span className="px-1 py-1 text-xs text-muted">+{hiddenRunningWorkstreamCount}</span>
-                            )}
-                        </div>
-                    </output>
-                </div>
-            )}
+            <ActiveWorkstreamsSummary activeWorkstreams={activeWorkstreams} />
 
             {/* Input row */}
             <div className="mx-auto flex max-w-3xl flex-col gap-2 rounded-2xl border border-border/70 bg-mixer-muted/15 p-2.5 shadow-lg shadow-black/5">
@@ -547,13 +500,7 @@ export default function MessageInput({
                         onPaste={handlePaste}
                         disabled={disabled}
                         aria-label={resolvedPlaceholder}
-                        placeholder={
-                            isStreaming
-                                ? `${t('agent.agentWorking')} ${t('agent.enterToSend')}`
-                                : canUploadFiles
-                                  ? `${t('agent.askAnything')} ${t('agent.enterToSend')}`
-                                  : `${resolvedPlaceholder} ${t('agent.enterToSend')}`
-                        }
+                        placeholder={resolvedPlaceholder}
                         rows={1}
                         style={{ maxHeight: '160px' }}
                         className={cn(
@@ -573,6 +520,7 @@ export default function MessageInput({
                                         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" />
                                     </Button>
@@ -603,6 +551,81 @@ export default function MessageInput({
                                 )}
                             </Dropdown>
                         )}
+                        {approvalModeSlot}
+                        {mcpSlot}
+                        {contextWindowUsage && (
+                            <VTooltip
+                                asChild
+                                placement="top"
+                                size="md"
+                                className="text-foreground shadow-lg"
+                                description={
+                                    <span className="block max-w-56 text-start text-sm leading-6">
+                                        <span className="block">
+                                            {t('agent.contextRemainingUntilCompact', {
+                                                percent: contextWindowUsage.remainingPercent,
+                                            })}
+                                        </span>
+                                        {contextTokenUsageLabel && (
+                                            <span className="mt-1 block text-foreground/80">
+                                                {contextTokenUsageLabel}
+                                            </span>
+                                        )}
+                                    </span>
+                                }
+                            >
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className={cn(
+                                        'size-8 rounded-lg text-info hover:bg-muted hover:text-info disabled:opacity-60',
+                                        'focus-visible:ring-2 focus-visible:ring-info/40',
+                                    )}
+                                    aria-label={contextUsageLabel}
+                                    onClick={onCompactContext}
+                                    disabled={!onCompactContext || isCompactingContext}
+                                >
+                                    {isCompactingContext ? (
+                                        <Spinner size="sm" />
+                                    ) : (
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            className={cn(
+                                                'size-8 -rotate-90',
+                                                contextWindowUsage.usedPercent >= 90
+                                                    ? 'text-destructive'
+                                                    : contextWindowUsage.usedPercent >= 70
+                                                      ? 'text-attention'
+                                                      : 'text-info',
+                                            )}
+                                            aria-hidden="true"
+                                        >
+                                            <circle
+                                                cx="12"
+                                                cy="12"
+                                                r="9.75"
+                                                fill="none"
+                                                strokeWidth="4.5"
+                                                className="stroke-current text-muted/50"
+                                            />
+                                            <circle
+                                                cx="12"
+                                                cy="12"
+                                                r="9.75"
+                                                fill="none"
+                                                pathLength={100}
+                                                strokeWidth="4.5"
+                                                strokeLinecap="round"
+                                                strokeDasharray={100}
+                                                style={{ strokeDashoffset: 100 - contextWindowUsage.usedPercent }}
+                                                className="stroke-current"
+                                            />
+                                        </svg>
+                                    )}
+                                </Button>
+                            </VTooltip>
+                        )}
                         {runningWorkstreams.length === 0 && activeWorkstreamCount > 0 && (
                             <output className="flex min-w-0 flex-wrap items-center gap-1.5" aria-live="polite">
                                 <span className="inline-flex h-8 items-center gap-1 rounded-full px-2 text-xs text-muted">
@@ -626,8 +649,8 @@ export default function MessageInput({
                                 'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100',
                                 '[&_svg]:text-destructive disabled:[&_svg]:text-muted',
                             )}
-                            title={t('agent.stopAgent')}
-                            aria-label={t('agent.stopAgent')}
+                            title={t('agent.stopTooltip')}
+                            aria-label={t('agent.stopTooltip')}
                         >
                             {isStopping ? (
                                 <Spinner size="sm" />
@@ -646,7 +669,7 @@ export default function MessageInput({
                                 'hover:bg-foreground/90 hover:text-background',
                                 'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100',
                             )}
-                            title={hasProcessingFiles ? t('agent.waitForFiles') : undefined}
+                            title={hasProcessingFiles ? t('agent.waitForFiles') : t('agent.sendTooltip')}
                             aria-label={hasProcessingFiles ? t('agent.waitForFiles') : t('agent.send')}
                         >
                             {isSending ? <Spinner size="sm" /> : <ArrowUpIcon className="size-4" />}

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

@@ -33,6 +33,7 @@ import { useImageLightbox } from '../ImageLightbox';
 import { getArtifactCacheKey, useArtifactUrlCache } from '../useArtifactUrlCache.js';
 import { ThinkingMessages } from '../WaitingMessages';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
+import { MessageDeliveryStatus } from './MessageDeliveryStatus';
 import { processContentForMarkdown } from './processContentForMarkdown';
 import { getWorkstreamId } from './utils';
 
@@ -105,7 +106,7 @@ export interface MessageItemProps extends MessageItemClassNames {
     message: AgentMessage;
     showPulsatingCircle?: boolean;
     /** Callback when user sends a message (e.g., from proposal selection) */
-    onSendMessage?: (message: string) => void;
+    onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
     /** Whether a REQUEST_INPUT message has already been answered by a later user message */
     requestInputAnswered?: boolean;
     /** Sparse per-type overrides for MESSAGE_STYLES (deep-merged with defaults) */
@@ -592,6 +593,7 @@ function MessageItemComponent({
                         )}
                     </div>
                     <div className="flex items-center gap-1.5 print:hidden">
+                        <MessageDeliveryStatus message={message} />
                         <span className={cn('text-[11px] text-muted/70', resolvedStyle.timestampClassName)}>
                             {dayjs(message.timestamp).format('HH:mm:ss')}
                         </span>
@@ -649,6 +651,10 @@ function MessageItemComponent({
                                       multiSelect={uxConfig.multiSelect}
                                       onSelect={(optionId) => onSendMessage?.(optionId)}
                                       onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
+                                      allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
+                                      placeholder={uxConfig.free_response?.placeholder}
+                                      submitLabel={uxConfig.free_response?.submit_label}
+                                      onSubmit={(value) => onSendMessage?.(value, uxConfig.free_response?.metadata)}
                                       hideBorder
                                       compact
                                       answered={requestInputAnswered}