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

package/lib/features/agent/chat/ModernAgentConversation.js

@@ -1,31 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AgentMessageType, } from '@vertesia/common';
+import { AgentMessageType, normalizeAgentToolApprovalMode, } from '@vertesia/common';
 import { FusionFragmentProvider } from '@vertesia/fusion-ux';
 import { Button, cn, insertNewlineAtCursor, MessageBox, Modal, ModalBody, ModalFooter, ModalTitle, Spinner, Textarea, useToast, } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { ArrowUpIcon, Bot, CheckCircle, Cpu, FileTextIcon, UploadIcon, XIcon } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { McpConnectionsActionMenu } from '../../oauth/McpConnectionsButton.js';
+import { AgentApprovalModeSelector } from './AgentApprovalModeSelector';
 import { AgentChatPlaybackControls } from './AgentChatPlaybackControls';
 import { AgentRequestInputOverlay } from './AgentRequestInputOverlay';
 import { AgentRightPanel } from './AgentRightPanel.js';
 import { AnimatedThinkingDots, PulsatingCircle } from './AnimatedThinkingDots';
+import { extractFilesFromClipboard } from './clipboardFiles.js';
 import { useAgentPlans } from './hooks/useAgentPlans.js';
 import { useAgentStream } from './hooks/useAgentStream.js';
 import { useDocumentPanel } from './hooks/useDocumentPanel.js';
 import { useFileProcessing } from './hooks/useFileProcessing.js';
 import { ImageLightboxProvider } from './ImageLightbox';
+import { ActiveWorkstreamsSummary } from './ModernAgentOutput/ActiveWorkstreamsSummary';
 import AllMessagesMixed from './ModernAgentOutput/AllMessagesMixed';
 import Header from './ModernAgentOutput/Header';
 import MessageInput from './ModernAgentOutput/MessageInput';
 import { getPendingRequestInputMessage } from './ModernAgentOutput/requestInputMessages';
-import { getConversationUrl, getWorkstreamId, isInProgress } from './ModernAgentOutput/utils';
+import { debugAgentChat, filterMessagesForActiveWorkstream, getConversationUrl, getWorkstreamId, isInProgress, } from './ModernAgentOutput/utils';
 import { createPlaybackState, getPlaybackCursorIndex, isAgentChatPlaybackAvailable, isAgentChatPlaybackEnabled, } from './playback';
 import { SkillWidgetProvider } from './SkillWidgetProvider';
 import { ArtifactUrlCacheProvider } from './useArtifactUrlCache.js';
 import { VegaLiteChart } from './VegaLiteChart';
 import { ThinkingMessages } from './WaitingMessages';
-import { getWorkstreamLaunchDetails, getWorkstreamLifecycleStatus, isWorkstreamInternalResultMessage, isWorkstreamTerminalMessage, } from './workstreams.js';
+import { getWorkstreamDisplayName, getWorkstreamLaunchDetails, getWorkstreamLifecycleStatus, isWorkstreamInternalResultMessage, } from './workstreams.js';
 const EMPTY_STREAMING_MESSAGES = new Map();
 function getTimestampMs(timestamp) {
     if (typeof timestamp === 'number')
@@ -35,46 +39,216 @@ function getTimestampMs(timestamp) {
     const parsed = new Date(timestamp).getTime();
     return Number.isFinite(parsed) ? parsed : Date.now();
 }
-function deriveActiveWorkstreamsFromMessages(messages) {
-    const latestByWorkstream = new Map();
-    const launchesByWorkstream = new Map();
-    for (const message of messages) {
-        const launchDetails = getWorkstreamLaunchDetails(message);
-        if (launchDetails) {
-            launchesByWorkstream.set(launchDetails.workstreamId, {
-                launch_id: launchDetails.launchId,
-                interaction: launchDetails.interaction,
-                child_workflow_id: launchDetails.childWorkflowId,
-                child_workflow_run_id: launchDetails.childWorkflowRunId,
-            });
-        }
-        if (isWorkstreamInternalResultMessage(message))
+function isActiveWorkstreamStatus(status) {
+    return status === 'running' || status === 'canceling';
+}
+function isTerminalWorkstreamStatus(status) {
+    return !isActiveWorkstreamStatus(status);
+}
+function getNumberDetail(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+function toContextWindowUsage(messages) {
+    for (let index = messages.length - 1; index >= 0; index--) {
+        const details = messages[index].details;
+        if (!details)
             continue;
-        const workstreamId = getWorkstreamId(message);
-        if (workstreamId === 'main' || workstreamId === 'all')
+        const tokenUsage = details.token_usage;
+        const usedTokens = getNumberDetail(tokenUsage?.total);
+        const checkpointTokens = getNumberDetail(details.checkpoint_threshold) ?? getNumberDetail(details.checkpoint_at);
+        if (typeof usedTokens !== 'number' || typeof checkpointTokens !== 'number' || checkpointTokens <= 0) {
             continue;
-        latestByWorkstream.set(workstreamId, message);
-    }
-    return Array.from(latestByWorkstream.entries())
-        .filter(([, message]) => {
-        if ([AgentMessageType.COMPLETE, AgentMessageType.IDLE].includes(message.type))
-            return false;
-        return !isWorkstreamTerminalMessage(message);
-    })
-        .map(([workstreamId, message]) => {
-        const launch = launchesByWorkstream.get(workstreamId);
+        }
+        const usedPercent = Math.max(0, Math.min(100, Math.round((usedTokens / checkpointTokens) * 100)));
         return {
-            workstream_id: workstreamId,
-            launch_id: launch?.launch_id ?? `message-derived:${workstreamId}`,
-            interaction: launch?.interaction,
-            elapsed_ms: 0,
-            deadline_ms: 0,
-            remaining_ms: 0,
-            status: getWorkstreamLifecycleStatus(message) ?? 'running',
-            child_workflow_id: launch?.child_workflow_id,
-            child_workflow_run_id: launch?.child_workflow_run_id,
+            usedTokens,
+            checkpointTokens,
+            usedPercent,
+            remainingPercent: Math.max(0, 100 - usedPercent),
         };
+    }
+    return undefined;
+}
+function mergePreservingTerminalStatus(existing, next) {
+    if (!isTerminalWorkstreamStatus(existing.status) || !isActiveWorkstreamStatus(next.status)) {
+        return { ...existing, ...next };
+    }
+    return {
+        ...existing,
+        interaction: existing.interaction ?? next.interaction,
+        elapsed_ms: Math.max(existing.elapsed_ms, next.elapsed_ms),
+        deadline_ms: Math.max(existing.deadline_ms, next.deadline_ms),
+        remaining_ms: 0,
+        phase: existing.phase ?? next.phase,
+        child_workflow_id: existing.child_workflow_id ?? next.child_workflow_id,
+        child_workflow_run_id: existing.child_workflow_run_id ?? next.child_workflow_run_id,
+    };
+}
+function getWorkstreamMessageDetails(message) {
+    const details = message.details;
+    const workstreamId = typeof details?.workstream_id === 'string' && details.workstream_id.trim()
+        ? details.workstream_id
+        : getWorkstreamId(message);
+    if (workstreamId === 'main' || workstreamId === 'all')
+        return null;
+    return {
+        workstreamId,
+        launchId: typeof details?.launch_id === 'string' ? details.launch_id : undefined,
+        interaction: typeof details?.interaction === 'string' ? details.interaction : undefined,
+        childWorkflowId: typeof details?.child_workflow_id === 'string' ? details.child_workflow_id : undefined,
+        childWorkflowRunId: typeof details?.child_workflow_run_id === 'string' ? details.child_workflow_run_id : undefined,
+    };
+}
+function isWorkstreamActivityFailureMessage(message) {
+    if (message.type !== AgentMessageType.ERROR)
+        return false;
+    const details = message.details;
+    if (details?.event_class !== 'activity')
+        return false;
+    if (details.workstream_event)
+        return false;
+    return !(details.tool ||
+        details.tool_status ||
+        details.tool_run_id ||
+        details.activity_group_id ||
+        details.tool_event);
+}
+function ensureWorkstreamRecord(records, latestKeyByWorkstream, workstreamId, launchId, timestamp, order) {
+    if (launchId) {
+        const previousKey = latestKeyByWorkstream.get(workstreamId);
+        if (previousKey?.startsWith('message-derived:')) {
+            const previous = records.get(previousKey);
+            if (previous) {
+                records.delete(previousKey);
+                records.set(launchId, {
+                    ...previous,
+                    launch_id: launchId,
+                    updated_at: Math.max(previous.updated_at, timestamp),
+                });
+            }
+        }
+        latestKeyByWorkstream.set(workstreamId, launchId);
+    }
+    const key = launchId ?? latestKeyByWorkstream.get(workstreamId) ?? `message-derived:${workstreamId}`;
+    const existing = records.get(key);
+    if (existing)
+        return existing;
+    const record = {
+        workstream_id: workstreamId,
+        launch_id: key,
+        elapsed_ms: 0,
+        deadline_ms: 0,
+        remaining_ms: 0,
+        status: 'running',
+        started_at: timestamp,
+        updated_at: timestamp,
+        order,
+    };
+    records.set(key, record);
+    if (!latestKeyByWorkstream.has(workstreamId))
+        latestKeyByWorkstream.set(workstreamId, key);
+    return record;
+}
+function deriveWorkstreamsFromMessages(messages) {
+    const records = new Map();
+    const latestKeyByWorkstream = new Map();
+    messages.forEach((message, order) => {
+        const timestamp = getTimestampMs(message.timestamp);
+        const details = getWorkstreamMessageDetails(message);
+        const launchDetails = getWorkstreamLaunchDetails(message);
+        const workstreamId = launchDetails?.workstreamId ?? details?.workstreamId;
+        if (!workstreamId)
+            return;
+        const launchId = launchDetails?.launchId ?? details?.launchId;
+        const isInternalResult = isWorkstreamInternalResultMessage(message);
+        if (!launchDetails && !launchId && isInternalResult && !latestKeyByWorkstream.has(workstreamId))
+            return;
+        const record = ensureWorkstreamRecord(records, latestKeyByWorkstream, workstreamId, launchId, timestamp, order);
+        if (launchDetails) {
+            record.interaction = launchDetails.interaction ?? record.interaction;
+            record.child_workflow_id = launchDetails.childWorkflowId ?? record.child_workflow_id;
+            record.child_workflow_run_id = launchDetails.childWorkflowRunId ?? record.child_workflow_run_id;
+            record.status = 'running';
+        }
+        else {
+            record.interaction = details?.interaction ?? record.interaction;
+            record.child_workflow_id = details?.childWorkflowId ?? record.child_workflow_id;
+            record.child_workflow_run_id = details?.childWorkflowRunId ?? record.child_workflow_run_id;
+        }
+        const lifecycleStatus = getWorkstreamLifecycleStatus(message);
+        if (lifecycleStatus) {
+            record.status = lifecycleStatus;
+        }
+        else if (!isInternalResult) {
+            if (isWorkstreamActivityFailureMessage(message)) {
+                record.status = 'failed';
+            }
+            else if (message.type === AgentMessageType.COMPLETE || message.type === AgentMessageType.IDLE) {
+                record.status = 'completed';
+            }
+        }
+        if (isInternalResult)
+            return;
+        record.updated_at = Math.max(record.updated_at, timestamp);
+        if (isActiveWorkstreamStatus(record.status)) {
+            record.elapsed_ms = Math.max(record.elapsed_ms, timestamp - record.started_at);
+        }
+        else {
+            record.elapsed_ms = Math.max(record.elapsed_ms, timestamp - record.started_at);
+            record.remaining_ms = 0;
+        }
     });
+    return Array.from(records.values())
+        .sort((a, b) => {
+        const activeDelta = Number(!isActiveWorkstreamStatus(a.status)) - Number(!isActiveWorkstreamStatus(b.status));
+        if (activeDelta !== 0)
+            return activeDelta;
+        if (isActiveWorkstreamStatus(a.status))
+            return a.order - b.order;
+        return b.updated_at - a.updated_at || a.order - b.order;
+    })
+        .map(({ started_at, updated_at, order, ...workstream }) => workstream);
+}
+function activeWorkstreamEntryToInfo(ws) {
+    return {
+        workstream_id: ws.workstream_id,
+        launch_id: ws.launch_id,
+        interaction: ws.interaction,
+        elapsed_ms: ws.elapsed_ms,
+        deadline_ms: ws.deadline_ms,
+        remaining_ms: Math.max(0, ws.deadline_ms - ws.elapsed_ms),
+        status: ws.status,
+        phase: ws.latest_progress?.phase,
+        child_workflow_id: ws.child_workflow_id,
+        child_workflow_run_id: ws.child_workflow_run_id,
+    };
+}
+function completedWorkstreamEntryToInfo(ws) {
+    return {
+        workstream_id: ws.workstream_id,
+        launch_id: ws.launch_id,
+        interaction: ws.interaction,
+        elapsed_ms: ws.duration_ms ?? 0,
+        deadline_ms: 0,
+        remaining_ms: 0,
+        status: ws.status,
+        phase: ws.last_progress?.phase,
+        child_workflow_id: ws.child_workflow_id,
+        child_workflow_run_id: ws.child_workflow_run_id,
+    };
+}
+function mergeWorkstreamInfo(workstreams, next) {
+    const existingIndex = workstreams.findIndex((ws) => ws.launch_id === next.launch_id);
+    if (existingIndex >= 0) {
+        workstreams[existingIndex] = mergePreservingTerminalStatus(workstreams[existingIndex], next);
+        return;
+    }
+    const fallbackIndex = workstreams.findIndex((ws) => ws.workstream_id === next.workstream_id && ws.launch_id.startsWith('message-derived:'));
+    if (fallbackIndex >= 0 && !next.launch_id.startsWith('message-derived:')) {
+        workstreams[fallbackIndex] = mergePreservingTerminalStatus(workstreams[fallbackIndex], next);
+        return;
+    }
+    workstreams.push(next);
 }
 function formatCompactDuration(seconds) {
     if (seconds < 60)
@@ -197,12 +371,13 @@ function EmptyState() {
 }
 // Start workflow view - allows initiating a new agent conversation
 // Files can be staged locally before workflow starts, then uploaded when the workflow is created
-function StartWorkflowView({ initialMessage, startWorkflow, onClose, isModal = false, fullWidth = false, placeholder, startButtonText, title, 
+function StartWorkflowView({ initialMessage, interactive = true, startWorkflow, onClose, isModal = false, fullWidth = false, placeholder, startButtonText, title, 
 // Attachment callback - used to include existing document attachments in the first message
 getAttachedDocs, onAttachmentsSent, 
 // File upload props
-acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hideObjectLinking, headerVariant, inputContainerClassName, inputClassName, className, allowWorkflowControl, }) {
+acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hideObjectLinking, headerVariant, inputContainerClassName, inputClassName, className, allowWorkflowControl, initialToolApprovalMode, }) {
     const { t } = useUITranslation();
+    const canStageFiles = !hideFileUpload;
     const resolvedPlaceholder = placeholder ?? t('agent.typeYourMessage');
     const resolvedStartButtonText = startButtonText ?? t('agent.startAgent');
     const resolvedTitle = title ?? t('agent.startNewConversation');
@@ -212,12 +387,12 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
     const [startedAgentRunId, setStartedAgentRunId] = useState(null);
     const [pendingStartMessage, setPendingStartMessage] = useState(null);
     const [pendingStartTimestamp, setPendingStartTimestamp] = useState(null);
+    const [toolApprovalMode, setToolApprovalMode] = useState(() => normalizeAgentToolApprovalMode(initialToolApprovalMode, interactive));
     const toast = useToast();
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
     // Staged files - stored locally until workflow starts
     const [stagedFiles, setStagedFiles] = useState([]);
-    const canStageFiles = !hideFileUpload;
     // Drag and drop state
     const [isDragOver, setIsDragOver] = useState(false);
     const dragCounterRef = useRef(0);
@@ -263,6 +438,17 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
             });
         }
     }, [maxFiles, canStageFiles]);
+    // Paste handler for files — mirrors MessageInput.handlePaste so the start
+    // screen and the live chat both accept pasted clipboard images/files. Files
+    // are staged locally here; they get uploaded when the workflow starts.
+    const handlePaste = useCallback((e) => {
+        if (!canStageFiles)
+            return;
+        const files = extractFilesFromClipboard(e.clipboardData?.items);
+        if (files.length > 0) {
+            setStagedFiles((prev) => [...prev, ...files].slice(0, maxFiles));
+        }
+    }, [canStageFiles, maxFiles]);
     const handleFileInputChange = useCallback((e) => {
         if (e.target.files && e.target.files.length > 0) {
             const filesArray = Array.from(e.target.files);
@@ -320,7 +506,7 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
             }
             setPendingStartMessage(messageContent);
             setPendingStartTimestamp(Date.now());
-            const newRun = await startWorkflow(messageContent);
+            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
@@ -429,11 +615,9 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
             inputContainerClassName,
             inputClassName,
             className,
-            allowWorkflowControl, agentRunId: startedAgentRunId, title: title, pendingStartMessage: pendingStartMessage ?? undefined, pendingStartTimestamp: pendingStartTimestamp ?? undefined }));
+            allowWorkflowControl, agentRunId: startedAgentRunId, title: title, pendingStartMessage: pendingStartMessage ?? undefined, pendingStartTimestamp: pendingStartTimestamp ?? undefined, initialToolApprovalMode: toolApprovalMode }));
     }
-    return (_jsx("div", { className: cn('flex h-full flex-col items-center bg-background', className), children: _jsxs("div", { className: cn('relative flex h-full w-full flex-col overflow-hidden border-0', fullWidth ? '' : 'max-w-4xl'), onDragEnter: canStageFiles ? handleDragEnter : undefined, onDragOver: canStageFiles ? handleDragOver : undefined, onDragLeave: canStageFiles ? handleDragLeave : undefined, onDrop: canStageFiles ? handleDrop : undefined, children: [canStageFiles && isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-info font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to stage for upload"] }) })), canStageFiles && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" })), !hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 bg-background px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedTitle })] }), onClose && !isModal && (_jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, "aria-label": t('agent.close'), title: t('agent.close'), className: "text-muted hover:text-foreground", children: _jsx(XIcon, { className: "size-4" }) }))] })), _jsx("div", { className: "flex flex-1 flex-col items-center justify-end overflow-y-auto bg-background px-4", children: pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end py-8", children: initialMessage && (_jsx("div", { className: "text-[15px] leading-relaxed text-foreground/80", children: initialMessage })) })) }), _jsxs("div", { className: "shrink-0 bg-background px-4 pb-safe-area-4 pt-2", children: [_jsxs("div", { className: cn('mx-auto flex max-w-3xl flex-col gap-3 rounded-2xl border border-border/70 bg-mixer-muted/15 p-3 shadow-lg shadow-black/5', inputContainerClassName), children: [canStageFiles && stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention", children: [_jsx(FileTextIcon, { className: "size-3.5" }), _jsx("span", { className: "max-w-[120px] truncate", children: file.name }), _jsx("span", { className: "text-xs opacity-70", children: t('agent.staged') }), _jsx(Button, { variant: "unstyled", "aria-label": `Remove staged file ${file.name}`, onClick: () => removeStagedFile(index), className: "ms-1 rounded p-0.5 hover:bg-attention/20", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${file.size}-${file.lastModified}`))) })), _jsx(Textarea, { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: resolvedPlaceholder, disabled: isSending, rows: 2, className: cn('min-h-[72px] resize-none overflow-hidden border-0 bg-transparent px-0 py-0 text-sm leading-6 shadow-none focus-visible:ring-0', inputClassName), style: { minHeight: '72px', maxHeight: '200px' } }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "flex min-w-0 items-center gap-2", children: canStageFiles && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, "aria-label": t('agent.upload'), className: "rounded-full text-muted", title: t('agent.upload'), children: _jsx(UploadIcon, { className: "size-4" }) })) }), _jsx(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, variant: "ghost", size: "icon", className: cn('size-9 rounded-full border border-border/60 bg-foreground text-background shadow-sm', 'hover:bg-foreground/90 hover:text-background', 'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100'), title: resolvedStartButtonText, "aria-label": resolvedStartButtonText, children: isSending ? _jsx(Spinner, { size: "sm" }) : _jsx(ArrowUpIcon, { className: "size-4" }) })] })] }), _jsx("div", { className: "mx-auto mt-2 max-w-3xl text-center text-xs text-muted", children: canStageFiles && stagedFiles.length > 0
-                                ? t('agent.filesStagedCount', { count: stagedFiles.length })
-                                : t('agent.enterToSend') })] })] }) }));
+    return (_jsx("div", { className: cn('flex h-full flex-col items-center bg-background', className), children: _jsxs("div", { className: cn('relative flex h-full w-full flex-col overflow-hidden border-0', fullWidth ? '' : 'max-w-4xl'), onDragEnter: canStageFiles ? handleDragEnter : undefined, onDragOver: canStageFiles ? handleDragOver : undefined, onDragLeave: canStageFiles ? handleDragLeave : undefined, onDrop: canStageFiles ? handleDrop : undefined, children: [canStageFiles && isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-info font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to stage for upload"] }) })), canStageFiles && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" })), !hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 bg-background px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedTitle })] }), onClose && !isModal && (_jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, "aria-label": t('agent.close'), title: t('agent.close'), className: "text-muted hover:text-foreground", children: _jsx(XIcon, { className: "size-4" }) }))] })), _jsx("div", { className: "flex flex-1 flex-col items-center justify-end overflow-y-auto bg-background px-4", children: pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end py-8", children: initialMessage && (_jsx("div", { className: "text-[15px] leading-relaxed text-foreground/80", children: initialMessage })) })) }), _jsx("div", { className: "shrink-0 bg-background px-4 pb-safe-area-4 pt-2", children: _jsxs("div", { className: cn('mx-auto flex max-w-3xl flex-col gap-3 rounded-2xl border border-border/70 bg-mixer-muted/15 p-3 shadow-lg shadow-black/5', inputContainerClassName), children: [canStageFiles && stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention", title: t('agent.fileStagedTooltip'), children: [_jsx(FileTextIcon, { className: "size-3.5" }), _jsx("span", { className: "max-w-[120px] truncate", children: file.name }), _jsx("span", { className: "text-xs opacity-70", children: t('agent.staged') }), _jsx(Button, { variant: "unstyled", "aria-label": `Remove staged file ${file.name}`, onClick: () => removeStagedFile(index), className: "ms-1 rounded p-0.5 hover:bg-attention/20", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${file.size}-${file.lastModified}`))) })), _jsx(Textarea, { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: resolvedPlaceholder, disabled: isSending, rows: 2, className: cn('min-h-[72px] resize-none overflow-hidden border-0 bg-transparent px-0 py-0 text-sm leading-6 shadow-none focus-visible:ring-0', inputClassName), style: { minHeight: '72px', maxHeight: '200px' } }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [canStageFiles && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, "aria-label": t('agent.upload'), className: "rounded-full text-muted", title: t('agent.upload'), children: _jsx(UploadIcon, { className: "size-4" }) })), interactive && (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: setToolApprovalMode, disabled: isSending }))] }), _jsx(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, variant: "ghost", size: "icon", className: cn('size-9 rounded-full border border-border/60 bg-foreground text-background shadow-sm', 'hover:bg-foreground/90 hover:text-background', 'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100'), title: resolvedStartButtonText, "aria-label": resolvedStartButtonText, children: isSending ? _jsx(Spinner, { size: "sm" }) : _jsx(ArrowUpIcon, { className: "size-4" }) })] })] }) })] }) }));
 }
 // Inner component that handles the agent conversation - similar to ModernAgentOutput
 function ModernAgentConversationInner({ agentRunId, title, interactive = true, onClose, isModal = false, fullWidth = false, placeholder, resetWorkflow, onRestart, onClone, onShowDetails, allowWorkflowControl = true, 
@@ -472,14 +656,14 @@ streamingMessageClassNames,
 // BatchProgressPanel className overrides
 batchProgressPanelClassNames, 
 // AllMessagesMixed className overrides
-workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, initialRequestData, initialRequestSchema, initialRequestTitle, initialRequestTemplate, payloadContent, conversationContent, conversationTab = false, pendingStartMessage, pendingStartTimestamp, enablePlayback, showPlaybackToggle = true, }) {
+workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, initialRequestData, initialRequestSchema, initialRequestTitle, initialRequestTemplate, payloadContent, conversationContent, conversationTab = false, pendingStartMessage, pendingStartTimestamp, initialToolApprovalMode, enablePlayback, showPlaybackToggle = true, }) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
     const toast = useToast();
     // ────────────────────────────────────────────
     // Extracted hooks
     // ────────────────────────────────────────────
-    const { messages, streamingMessages, isCompleted, debugChunkFlash, addOptimisticMessage, removeOptimisticMessages, reconnect: reconnectStream, agentRunStatus, workflowRunId, serverFileUpdates, } = useAgentStream(client, agentRunId);
+    const { messages, streamingMessages, isCompleted, initialHistoryStatus, debugChunkFlash, addOptimisticMessage, updateOptimisticMessageStatus, reconnect: reconnectStream, agentRunStatus, workflowRunId, serverFileUpdates, } = useAgentStream(client, agentRunId);
     const { plans, activePlanIndex, setActivePlanIndex, workstreamStatusMap, showInput, showSlidingPanel, setShowSlidingPanel, } = useAgentPlans(messages, interactive, isModal);
     const { openDocuments, activeDocumentId, isDocPanelOpen, docRefreshKey, closeDocPanel: handleCloseDocPanel, closeDocument: handleCloseDocument, selectDocument, openDocInPanel, updateDocumentTitle, } = useDocumentPanel(messages);
     const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile } = useFileProcessing(client, agentRunId, serverFileUpdates, toast);
@@ -494,6 +678,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     const conversationRef = useRef(null);
     const conversationLayoutRef = useRef(null);
     const [isSending, setIsSending] = useState(false);
+    const [isCompactingContext, setIsCompactingContext] = useState(false);
     const [internalViewMode, setInternalViewMode] = useState('sliding');
     const viewMode = controlledViewMode ?? internalViewMode;
     const handleViewModeChange = useCallback((mode) => {
@@ -506,14 +691,23 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     }, [onViewModeChangeProp]);
     const [isStopping, setIsStopping] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);
+    const [activeWorkstream, setActiveWorkstream] = useState('all');
     const [playbackCursor, setPlaybackCursor] = useState('live');
     const [isPlaybackToggleEnabled, setIsPlaybackToggleEnabled] = useState(false);
     const [playbackScrollRequestId, setPlaybackScrollRequestId] = useState(0);
-    const [activeWorkstreams, setActiveWorkstreams] = useState([]);
-    const [completedWorkstreams, setCompletedWorkstreams] = useState([]);
+    const [queriedActiveWorkstreams, setQueriedActiveWorkstreams] = useState([]);
+    const [queriedCompletedWorkstreams, setQueriedCompletedWorkstreams] = useState([]);
+    const [isWorkstreamQueryUnavailable, setIsWorkstreamQueryUnavailable] = useState(false);
+    const initialResolvedToolApprovalMode = useMemo(() => initialToolApprovalMode === undefined && interactive
+        ? undefined
+        : normalizeAgentToolApprovalMode(initialToolApprovalMode, interactive), [initialToolApprovalMode, interactive]);
+    const [toolApprovalMode, setToolApprovalMode] = useState(initialResolvedToolApprovalMode);
     const workstreamFetchFailedRef = useRef(false);
     const dragCounterRef = useRef(0);
     const pendingPlaybackScrollRef = useRef(false);
+    useEffect(() => {
+        setToolApprovalMode(initialResolvedToolApprovalMode);
+    }, [initialResolvedToolApprovalMode]);
     // PERFORMANCE: Refs for values used inside useCallback to avoid re-creating the callback
     const isSendingRef = useRef(isSending);
     isSendingRef.current = isSending;
@@ -572,63 +766,125 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             workstreamStatus: currentWorkstreamStatus,
         };
     }, [plans, activePlanIndex, workstreamStatusMap]);
-    const messageDerivedActiveWorkstreams = useMemo(() => deriveActiveWorkstreamsFromMessages(messages), [messages]);
+    const messageDerivedWorkstreams = useMemo(() => deriveWorkstreamsFromMessages(messages), [messages]);
     const panelWorkstreams = useMemo(() => {
-        const running = activeWorkstreams.length > 0
-            ? activeWorkstreams.map((ws) => ({
-                workstream_id: ws.workstream_id,
-                launch_id: ws.launch_id,
-                interaction: ws.interaction,
-                elapsed_ms: ws.elapsed_ms,
-                deadline_ms: ws.deadline_ms,
-                remaining_ms: Math.max(0, ws.deadline_ms - ws.elapsed_ms),
-                status: ws.status,
-                phase: ws.latest_progress?.phase,
-                child_workflow_id: ws.child_workflow_id,
-                child_workflow_run_id: ws.child_workflow_run_id,
-            }))
-            : messageDerivedActiveWorkstreams;
-        const runningWorkstreamIds = new Set(running.map((ws) => ws.workstream_id));
-        const completed = completedWorkstreams
-            .filter((ws) => !runningWorkstreamIds.has(ws.workstream_id))
-            .map((ws) => ({
-            workstream_id: ws.workstream_id,
-            launch_id: ws.launch_id,
-            elapsed_ms: 0,
-            deadline_ms: 0,
-            remaining_ms: 0,
-            status: ws.status,
-        }));
-        return [...running, ...completed];
-    }, [activeWorkstreams, completedWorkstreams, messageDerivedActiveWorkstreams]);
-    const activeTaskCount = useMemo(() => panelWorkstreams.filter((ws) => ws.status === 'running').length, [panelWorkstreams]);
+        const merged = [...messageDerivedWorkstreams];
+        for (const ws of queriedCompletedWorkstreams) {
+            mergeWorkstreamInfo(merged, completedWorkstreamEntryToInfo(ws));
+        }
+        for (const ws of queriedActiveWorkstreams) {
+            mergeWorkstreamInfo(merged, activeWorkstreamEntryToInfo(ws));
+        }
+        return merged
+            .map((workstream, index) => ({ workstream, index }))
+            .sort((a, b) => {
+            const activeDelta = Number(!isActiveWorkstreamStatus(a.workstream.status)) -
+                Number(!isActiveWorkstreamStatus(b.workstream.status));
+            return activeDelta || a.index - b.index;
+        })
+            .map(({ workstream }) => workstream);
+    }, [messageDerivedWorkstreams, queriedActiveWorkstreams, queriedCompletedWorkstreams]);
+    const composerActiveWorkstreams = useMemo(() => panelWorkstreams.filter((ws) => isActiveWorkstreamStatus(ws.status)), [panelWorkstreams]);
+    const activeTaskCount = useMemo(() => composerActiveWorkstreams.filter((ws) => ws.status === 'running').length, [composerActiveWorkstreams]);
+    const activeWorkstreamDisplayName = useMemo(() => {
+        if (activeWorkstream === 'all')
+            return undefined;
+        const workstream = panelWorkstreams.find((ws) => ws.workstream_id === activeWorkstream || ws.launch_id === activeWorkstream);
+        if (!workstream)
+            return getWorkstreamDisplayName(activeWorkstream);
+        return getWorkstreamDisplayName(workstream.workstream_id, workstream.interaction);
+    }, [activeWorkstream, panelWorkstreams]);
+    const composerPlaceholder = useMemo(() => {
+        if (placeholder)
+            return placeholder;
+        if (activeWorkstreamDisplayName) {
+            return t('agent.messageMainAgentWhileViewingWorkstream', { workstream: activeWorkstreamDisplayName });
+        }
+        return undefined;
+    }, [activeWorkstreamDisplayName, placeholder, t]);
     const canShowPlaybackToggle = showPlaybackToggle && enablePlayback === undefined && isAgentChatPlaybackAvailable();
     const isPlaybackEnabled = enablePlayback ?? (isAgentChatPlaybackEnabled() || isPlaybackToggleEnabled);
-    const playbackState = useMemo(() => createPlaybackState(messages, playbackCursor, isPlaybackEnabled), [isPlaybackEnabled, messages, playbackCursor]);
+    const playbackSourceMessages = useMemo(() => {
+        const visibleMessages = hiddenMessageTypes?.length
+            ? messages.filter((message) => !hiddenMessageTypes.includes(message.type))
+            : messages;
+        return filterMessagesForActiveWorkstream(visibleMessages, activeWorkstream);
+    }, [activeWorkstream, hiddenMessageTypes, messages]);
+    const playbackState = useMemo(() => createPlaybackState(playbackSourceMessages, playbackCursor, isPlaybackEnabled), [isPlaybackEnabled, playbackCursor, playbackSourceMessages]);
     const clampedPlaybackCursor = playbackState.cursor;
     const isPlaybackLive = playbackState.isLive;
+    const isPlaybackAtLatest = isPlaybackEnabled && !isPlaybackLive && playbackState.cursorIndex === playbackSourceMessages.length - 1;
     const displayedMessages = playbackState.displayedMessages;
     const displayedStreamingMessages = isPlaybackLive ? streamingMessages : EMPTY_STREAMING_MESSAGES;
+    const playbackDerivedWorkstreams = useMemo(() => deriveWorkstreamsFromMessages(displayedMessages), [displayedMessages]);
+    const playbackActiveWorkstreams = useMemo(() => playbackDerivedWorkstreams.filter((ws) => isActiveWorkstreamStatus(ws.status)), [playbackDerivedWorkstreams]);
     const effectiveIsCompleted = useMemo(() => isCompleted || !isInProgress(messages), [isCompleted, messages]);
-    const displayedIsCompleted = isPlaybackLive ? effectiveIsCompleted : false;
+    const displayedIsCompleted = isPlaybackLive || isPlaybackAtLatest ? effectiveIsCompleted : false;
     const pendingRequestInputMessage = useMemo(() => getPendingRequestInputMessage(displayedMessages), [displayedMessages]);
     const shouldShowRequestInputOverlay = Boolean(pendingRequestInputMessage) && !isFailed;
     const isViewingPlaybackHistory = isPlaybackEnabled && !isPlaybackLive;
-    const shouldShowLiveRequestInputOverlay = shouldShowRequestInputOverlay && !isViewingPlaybackHistory;
     const shouldRenderLiveMessageInputArea = shouldRenderMessageInputArea && !isViewingPlaybackHistory;
+    const contextWindowUsage = useMemo(() => toContextWindowUsage(messages), [messages]);
+    // The run is still "alive" while it waits for user input (idle on ask_user), so keep the
+    // context-usage indicator visible then — it's only truly hidden once the run terminates.
+    const canCompactContext = allowWorkflowControl && !isWorkflowTerminal && isPlaybackLive && Boolean(contextWindowUsage);
+    useEffect(() => {
+        debugAgentChat('conversation render state', {
+            agentRunId,
+            messageCount: messages.length,
+            playbackMessageCount: playbackSourceMessages.length,
+            displayedMessageCount: displayedMessages.length,
+            streamingCount: streamingMessages.size,
+            displayedStreamingCount: displayedStreamingMessages.size,
+            initialHistoryStatus,
+            isCompleted,
+            effectiveIsCompleted,
+            displayedIsCompleted,
+            agentRunStatus,
+            effectiveWorkflowStatus,
+            isWorkflowTerminal,
+            playbackCursor: clampedPlaybackCursor,
+            isPlaybackEnabled,
+            isPlaybackLive,
+            isPlaybackAtLatest,
+            activeWorkstream,
+            showInitialRequest: initialHistoryStatus === 'empty' && messages.length === 0,
+            pendingStartVisible: messages.length === 0 && !effectiveIsCompleted && Boolean(pendingStartMessage),
+        });
+    }, [
+        activeWorkstream,
+        agentRunId,
+        agentRunStatus,
+        clampedPlaybackCursor,
+        displayedIsCompleted,
+        displayedMessages.length,
+        displayedStreamingMessages.size,
+        effectiveIsCompleted,
+        effectiveWorkflowStatus,
+        initialHistoryStatus,
+        isCompleted,
+        isPlaybackAtLatest,
+        isPlaybackEnabled,
+        isPlaybackLive,
+        isWorkflowTerminal,
+        messages.length,
+        pendingStartMessage,
+        playbackSourceMessages.length,
+        streamingMessages.size,
+    ]);
     const handleTogglePlayback = useCallback(() => {
         setIsPlaybackToggleEnabled((prev) => !prev);
     }, []);
     const handleChangePlaybackCursor = useCallback((nextCursor) => {
-        const currentIndex = getPlaybackCursorIndex(clampedPlaybackCursor, messages.length);
-        const nextIndex = getPlaybackCursorIndex(nextCursor, messages.length);
+        const currentIndex = getPlaybackCursorIndex(clampedPlaybackCursor, playbackSourceMessages.length);
+        const nextIndex = getPlaybackCursorIndex(nextCursor, playbackSourceMessages.length);
         const returningToLive = nextCursor === 'live' && clampedPlaybackCursor !== 'live';
         if (isPlaybackEnabled && (nextIndex > currentIndex || returningToLive)) {
             pendingPlaybackScrollRef.current = true;
             setPlaybackScrollRequestId((requestId) => requestId + 1);
         }
         setPlaybackCursor(nextCursor);
-    }, [clampedPlaybackCursor, isPlaybackEnabled, messages.length]);
+    }, [clampedPlaybackCursor, isPlaybackEnabled, playbackSourceMessages.length]);
     useEffect(() => {
         if (!isPlaybackEnabled) {
             if (playbackCursor !== 'live')
@@ -742,39 +998,76 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     useEffect(() => {
         onWorkstreamStatusChange?.(workstreamStatusMap);
     }, [workstreamStatusMap, onWorkstreamStatusChange]);
-    // Poll active workstreams from backend query for right-panel visibility and details.
     useEffect(() => {
-        const shouldPoll = !effectiveIsCompleted || activeWorkstreams.length > 0;
+        void agentRunId;
+        workstreamFetchFailedRef.current = false;
+        setIsWorkstreamQueryUnavailable(false);
+        setQueriedActiveWorkstreams([]);
+        setQueriedCompletedWorkstreams([]);
+    }, [agentRunId]);
+    // Poll the backend query only as live enrichment. Persisted messages remain the
+    // source of truth for the right-panel history once a workflow can no longer be queried.
+    useEffect(() => {
+        const shouldPoll = initialHistoryStatus !== 'loading' &&
+            !effectiveIsCompleted &&
+            !isWorkflowTerminal &&
+            !isWorkstreamQueryUnavailable;
+        debugAgentChat('active workstreams poll state', {
+            agentRunId,
+            shouldPoll,
+            initialHistoryStatus,
+            effectiveIsCompleted,
+            isWorkflowTerminal,
+            isWorkstreamQueryUnavailable,
+        });
         if (!shouldPoll) {
-            setActiveWorkstreams((prev) => (prev.length === 0 ? prev : []));
+            setQueriedActiveWorkstreams((prev) => (prev.length === 0 ? prev : []));
             return;
         }
         let isCancelled = false;
+        let isFetchInFlight = false;
         const fetchActiveWorkstreams = async () => {
+            if (isFetchInFlight) {
+                debugAgentChat('active workstreams fetch skipped while previous request is pending', { agentRunId });
+                return;
+            }
+            isFetchInFlight = true;
             try {
+                debugAgentChat('active workstreams fetch start', { agentRunId });
                 const result = await client.agents.getActiveWorkstreams(agentRunId);
                 if (isCancelled)
                     return;
-                setActiveWorkstreams(result.running ?? []);
-                const completed = result.completed ?? [];
-                setCompletedWorkstreams(completed.map((c) => ({
-                    launch_id: c.launch_id,
-                    workstream_id: c.workstream_id,
-                    status: c.status === 'canceled' || c.status === 'failed' || c.status === 'timeout'
-                        ? c.status
-                        : 'completed',
-                })));
+                debugAgentChat('active workstreams fetch success', {
+                    agentRunId,
+                    runningCount: result.running?.length ?? 0,
+                    completedCount: result.completed?.length ?? 0,
+                    unavailable: result.unavailable === true,
+                });
+                setQueriedActiveWorkstreams(result.running ?? []);
+                setQueriedCompletedWorkstreams(result.completed ?? []);
+                if (result.unavailable) {
+                    setIsWorkstreamQueryUnavailable(true);
+                    return;
+                }
                 workstreamFetchFailedRef.current = false;
             }
             catch (error) {
                 if (isCancelled)
                     return;
-                setActiveWorkstreams([]);
+                setQueriedActiveWorkstreams((prev) => (prev.length === 0 ? prev : []));
+                setIsWorkstreamQueryUnavailable(true);
+                debugAgentChat('active workstreams fetch failed', {
+                    agentRunId,
+                    error: error instanceof Error ? error.message : String(error),
+                });
                 if (!workstreamFetchFailedRef.current) {
                     console.warn('Failed to fetch active workstreams:', error);
                     workstreamFetchFailedRef.current = true;
                 }
             }
+            finally {
+                isFetchInFlight = false;
+            }
         };
         void fetchActiveWorkstreams();
         const pollHandle = window.setInterval(fetchActiveWorkstreams, 10000);
@@ -782,7 +1075,14 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             isCancelled = true;
             window.clearInterval(pollHandle);
         };
-    }, [client.agents, agentRunId, effectiveIsCompleted, activeWorkstreams.length]);
+    }, [
+        client.agents,
+        agentRunId,
+        effectiveIsCompleted,
+        initialHistoryStatus,
+        isWorkflowTerminal,
+        isWorkstreamQueryUnavailable,
+    ]);
     // Notify parent when input availability is determined
     useEffect(() => {
         if (messages.length === 0)
@@ -807,7 +1107,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     // Handlers
     // ────────────────────────────────────────────
     // Send a message to the agent
-    const handleSendMessage = useCallback((message) => {
+    const handleSendMessage = useCallback((message, inputMetadata) => {
         const trimmed = message.trim();
         if (!trimmed || isSendingRef.current)
             return;
@@ -841,18 +1141,25 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             type: AgentMessageType.QUESTION,
             message: messageContent,
             workstream_id: 'main',
-            details: { _optimistic: true, _messageId: messageId },
+            details: { _optimistic: true, _messageId: messageId, _deliveryStatus: 'sending' },
         };
         addOptimisticMessage(optimisticMessage);
         const metadata = {
             ...(attachedDocs.length > 0 ? { attached_docs: attachedDocs.map((d) => d.id) } : {}),
             ...contextMetadata,
+            ...inputMetadata,
+            id: messageId,
             _messageId: messageId,
         };
         const sendUserInput = () => client.agents.sendSignal(agentRunId, 'UserInput', {
             message: messageContent,
+            client_message_id: messageId,
             metadata,
         });
+        const markReceived = () => {
+            updateOptimisticMessageStatus(messageId, 'received');
+            onAttachmentsSent?.();
+        };
         // When the workflow has already completed, restart it first so it resumes
         // from the existing conversation history, then deliver the message. Temporal
         // buffers the signal until the new run is ready to receive it. We reconnect
@@ -861,16 +1168,12 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         const deliver = isWorkflowTerminalRef.current
             ? client.agents.restart(agentRunId).then(() => {
                 reconnectStream();
-                return sendUserInput().then(() => {
-                    onAttachmentsSent?.();
-                });
+                return sendUserInput().then(markReceived);
             })
-            : sendUserInput().then(() => {
-                onAttachmentsSent?.();
-            });
+            : sendUserInput().then(markReceived);
         deliver
             .catch((err) => {
-            removeOptimisticMessages((m) => m.details?._messageId === messageId);
+            updateOptimisticMessageStatus(messageId, 'failed');
             toast({
                 status: 'error',
                 title: t('agent.failedToSend'),
@@ -890,9 +1193,77 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         onAttachmentsSent,
         reconnectStream,
         addOptimisticMessage,
-        removeOptimisticMessages,
+        updateOptimisticMessageStatus,
         t,
     ]);
+    // After the user connects an MCP server requested via request_mcp_connection, flag the
+    // conversation for tool re-discovery and resume it with a confirmation message so the agent
+    // continues automatically with the newly-available tools.
+    const handleMcpConnected = useCallback(async (cfg) => {
+        // Await the dirty-flag signal BEFORE sending the follow-up message so Temporal records
+        // McpConfigChanged ahead of the UserInput. Otherwise the resume turn could run before
+        // the flag is set and use the stale tool catalog. An omitted disabled list preserves
+        // the user's current deactivation set.
+        try {
+            await client.agents.sendSignal(agentRunId, 'McpConfigChanged', {});
+        }
+        catch (err) {
+            console.error('Failed to signal MCP config change', err);
+        }
+        handleSendMessage(t('agent.mcpConnectedMessage', { name: cfg.name }));
+    }, [client, agentRunId, handleSendMessage, t]);
+    // Per-conversation MCP deactivation set, seeded from the run and updated live via the
+    // MCP action menu in the composer toolbar. Changes are pushed to the running workflow
+    // (which re-discovers tools at the next turn).
+    const [mcpDisabled, setMcpDisabled] = useState(undefined);
+    useEffect(() => {
+        let cancelled = false;
+        client.agents
+            .retrieve(agentRunId)
+            .then((run) => {
+            if (!cancelled) {
+                setMcpDisabled(run.disabled_mcp_collections);
+                if (run.tool_approval_mode !== undefined || run.interactive !== undefined) {
+                    setToolApprovalMode(normalizeAgentToolApprovalMode(run.tool_approval_mode, run.interactive));
+                }
+            }
+        })
+            .catch(() => {
+            /* best-effort: toggles default to all-active */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, agentRunId]);
+    const handleMcpDisabledChange = useCallback((disabled) => {
+        const next = disabled.length > 0 ? disabled : undefined;
+        setMcpDisabled(next);
+        client.agents
+            .sendSignal(agentRunId, 'McpConfigChanged', { disabled_mcp_collections: disabled })
+            .catch((err) => console.error('Failed to signal MCP config change', err));
+    }, [client, agentRunId]);
+    const handleMcpConnectionChange = useCallback(() => {
+        // A connect/disconnect doesn't change the activation set — omit disabled_mcp_collections so
+        // the workflow preserves the current denylist (rather than overwriting it with possibly
+        // stale UI state) and just re-discovers tools.
+        client.agents
+            .sendSignal(agentRunId, 'McpConfigChanged', {})
+            .catch((err) => console.error('Failed to signal MCP config change', err));
+    }, [client, agentRunId]);
+    const handleToolApprovalModeChange = useCallback((mode) => {
+        const nextMode = normalizeAgentToolApprovalMode(mode, interactive);
+        setToolApprovalMode(nextMode);
+        client.agents
+            .sendSignal(agentRunId, 'ToolApprovalModeChanged', { mode: nextMode })
+            .catch((err) => {
+            toast({
+                status: 'error',
+                title: t('agent.approvalMode.changeFailed'),
+                description: err instanceof Error ? err.message : t('agent.unknownError'),
+                duration: 3000,
+            });
+        });
+    }, [agentRunId, client, interactive, t, toast]);
     // Drag and drop handlers for full-panel file upload
     const handleDragEnter = useCallback((e) => {
         if (!canUploadFiles)
@@ -936,30 +1307,68 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     const handleStopWorkflow = useCallback(async () => {
         if (isStopping)
             return;
+        const messageId = `stop-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const optimisticMessage = {
+            timestamp: Date.now(),
+            workflow_run_id: agentRunId,
+            type: AgentMessageType.IDLE,
+            message: 'Stopped. Waiting for your command...',
+            workstream_id: 'main',
+            details: {
+                _optimistic: true,
+                _messageId: messageId,
+                _deliveryStatus: 'sending',
+                display_role: 'user_stopped',
+                status_reason: 'user_stopped',
+            },
+        };
+        addOptimisticMessage(optimisticMessage);
         setIsStopping(true);
         try {
             await client.agents.sendSignal(agentRunId, 'Stop', {
                 message: 'User requested stop',
+                client_message_id: messageId,
+                metadata: {
+                    id: messageId,
+                    _messageId: messageId,
+                },
             });
+            updateOptimisticMessageStatus(messageId, 'received');
+        }
+        catch (err) {
             toast({
-                status: 'info',
-                title: t('agent.agentInterrupted'),
-                description: t('agent.typeNewInstructions'),
+                status: 'error',
+                title: t('agent.failedToInterrupt'),
+                description: err instanceof Error ? err.message : t('agent.unknownError'),
                 duration: 3000,
             });
+            updateOptimisticMessageStatus(messageId, 'failed');
+        }
+        finally {
+            setIsStopping(false);
+        }
+    }, [isStopping, agentRunId, addOptimisticMessage, client.agents, toast, t, updateOptimisticMessageStatus]);
+    const handleCompactContext = useCallback(async () => {
+        if (isCompactingContext || effectiveIsCompleted || !isPlaybackLive)
+            return;
+        setIsCompactingContext(true);
+        try {
+            await client.agents.sendSignal(agentRunId, 'TriggerCheckpoint', {
+                reason: 'manual user request',
+            });
         }
         catch (err) {
             toast({
                 status: 'error',
-                title: t('agent.failedToInterrupt'),
+                title: t('agent.failedToCompactContext'),
                 description: err instanceof Error ? err.message : t('agent.unknownError'),
                 duration: 3000,
             });
         }
         finally {
-            setIsStopping(false);
+            setIsCompactingContext(false);
         }
-    }, [isStopping, client, agentRunId, toast, t]);
+    }, [agentRunId, client.agents, effectiveIsCompleted, isCompactingContext, isPlaybackLive, t, toast]);
     // Expose stop handler to external callers via ref
     useEffect(() => {
         if (stopRef)
@@ -1087,13 +1496,13 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
                 ? 'w-full flex-1 min-h-[50vh]'
                 : fullWidth
                     ? 'flex-1 w-full'
-                    : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`), children: [!hideHeader && headerVariant === 'compact' && (_jsx("div", { className: "flex flex-shrink-0 justify-end border-b border-border/60 px-2 py-1 lg:hidden", children: renderConversationHeader('compact') })), !hideHeader && headerVariant !== 'compact' && (_jsx("div", { className: "flex-shrink-0", children: renderConversationHeader(headerVariant) })), isPlaybackEnabled && (_jsx("div", { className: "flex flex-shrink-0 justify-end px-2 py-1.5", children: _jsx(AgentChatPlaybackControls, { cursor: clampedPlaybackCursor, messages: messages, onChangeCursor: handleChangePlaybackCursor }) })), messages.length === 0 && !effectiveIsCompleted && pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx(AllMessagesMixed, { messages: displayedMessages, bottomRef: bottomRef, isCompleted: displayedIsCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showRightPanelProp && showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: displayedStreamingMessages, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, toolCallGroupClassNames: toolCallGroupClassNames, hideToolCallsInViewMode: hideToolCallsInViewMode, streamingMessageClassNames: streamingMessageClassNames, batchProgressPanelClassNames: batchProgressPanelClassNames, artifactRunId: agentRunId, viewMode: viewMode, hideWorkstreamTabs: hideWorkstreamTabs, workingIndicatorClassName: workingIndicatorClassName, messageListClassName: messageListClassName, StoreLinkComponent: effectiveStoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent, prependFriendlyMessage: prependFriendlyMessage, initialRequestData: initialRequestData, initialRequestSchema: initialRequestSchema, initialRequestTitle: initialRequestTitle, initialRequestTemplate: initialRequestTemplate, hiddenMessageTypes: hiddenMessageTypes, disableAutoScroll: !isPlaybackLive, renderRequestInputControls: isPlaybackLive && !shouldShowLiveRequestInputOverlay })), shouldShowLiveRequestInputOverlay ? (_jsx(AgentRequestInputOverlay, { message: pendingRequestInputMessage, onSendMessage: handleSendMessage, disabled: isUploading || !isPlaybackLive, isLoading: isSending || isUploading })) : (shouldRenderLiveMessageInputArea && (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: isFailed ? (
+                    : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`), children: [!hideHeader && headerVariant === 'compact' && (_jsx("div", { className: "flex flex-shrink-0 justify-end border-b border-border/60 px-2 py-1 lg:hidden", children: renderConversationHeader('compact') })), !hideHeader && headerVariant !== 'compact' && (_jsx("div", { className: "flex-shrink-0", children: renderConversationHeader(headerVariant) })), isPlaybackEnabled && (_jsx("div", { className: "flex flex-shrink-0 justify-end px-2 py-1.5", children: _jsx(AgentChatPlaybackControls, { cursor: clampedPlaybackCursor, messages: playbackSourceMessages, onChangeCursor: handleChangePlaybackCursor }) })), messages.length === 0 && !effectiveIsCompleted && pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx(AllMessagesMixed, { messages: displayedMessages, bottomRef: bottomRef, isCompleted: displayedIsCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showRightPanelProp && showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: displayedStreamingMessages, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, toolCallGroupClassNames: toolCallGroupClassNames, hideToolCallsInViewMode: hideToolCallsInViewMode, streamingMessageClassNames: streamingMessageClassNames, batchProgressPanelClassNames: batchProgressPanelClassNames, artifactRunId: agentRunId, viewMode: viewMode, hideWorkstreamTabs: hideWorkstreamTabs, workingIndicatorClassName: workingIndicatorClassName, messageListClassName: messageListClassName, StoreLinkComponent: effectiveStoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent, prependFriendlyMessage: prependFriendlyMessage, initialRequestData: initialRequestData, initialRequestSchema: initialRequestSchema, initialRequestTitle: initialRequestTitle, initialRequestTemplate: initialRequestTemplate, showInitialRequest: initialHistoryStatus === 'empty' && messages.length === 0, hiddenMessageTypes: hiddenMessageTypes, disableAutoScroll: !isPlaybackLive, renderRequestInputControls: !shouldShowRequestInputOverlay, activeWorkstream: activeWorkstream, onActiveWorkstreamChange: setActiveWorkstream })), shouldShowRequestInputOverlay ? (_jsx(AgentRequestInputOverlay, { message: pendingRequestInputMessage, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onMcpConnected: isPlaybackLive ? handleMcpConnected : undefined, disabled: isUploading || !isPlaybackLive, isLoading: isSending || isUploading })) : isViewingPlaybackHistory && playbackActiveWorkstreams.length > 0 ? (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: _jsx(ActiveWorkstreamsSummary, { activeWorkstreams: playbackActiveWorkstreams }) })) : (shouldRenderLiveMessageInputArea && (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: isFailed ? (
                 // FAILED takes priority over every other branch so the composer can
                 // never render for a failed run. Use the caller's action when provided,
                 // otherwise fall back to the default failed message box.
                 (failedAction ?? (_jsx(MessageBox, { status: "error", icon: null, className: "m-2", children: "This Workflow is FAILED" })))) : effectiveWorkflowStatus &&
                     effectiveWorkflowStatus !== 'RUNNING' &&
-                    !canContinueConversation ? (viewMode === 'sliding' && effectiveWorkflowStatus === 'COMPLETED' ? (_jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-3 text-sm text-muted", children: _jsxs("div", { className: "flex items-center gap-2 border-t border-success/25 pt-3 text-success", children: [_jsx(CheckCircle, { className: "size-4" }), _jsx("span", { className: "font-medium", children: "Workflow completed" })] }) })) : (_jsxs(MessageBox, { status: effectiveWorkflowStatus === 'COMPLETED' ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] }))) : ((showInput || canContinueConversation) && (_jsx(MessageInput, { onSend: handleSendMessage, onStop: allowWorkflowControl ? handleStopWorkflow : undefined, disabled: isUploading || !isPlaybackLive, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !effectiveIsCompleted, isCompleted: effectiveIsCompleted, activeTaskCount: activeTaskCount, activeWorkstreams: panelWorkstreams, placeholder: placeholder ?? 'Type your message...', onFilesSelected: canUploadFiles ? handleFileUpload : undefined, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, onRemoveProcessingFile: handleRemoveProcessingFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles, processingFiles: processingFiles, artifactRunId: agentRunId, hasProcessingFiles: hasProcessingFiles, renderDocumentSearch: renderDocumentSearch, selectedDocuments: selectedDocuments, onRemoveDocument: onRemoveDocument, hideObjectLinking: hideObjectLinking, hideFileUpload: !canUploadFiles, disableDropZone: canUploadFiles, className: inputContainerClassName, inputClassName: inputClassName }))) })))] }));
+                    !canContinueConversation ? (viewMode === 'sliding' && effectiveWorkflowStatus === 'COMPLETED' ? (_jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-3 text-sm text-muted", children: _jsxs("div", { className: "flex items-center gap-2 border-t border-success/25 pt-3 text-success", children: [_jsx(CheckCircle, { className: "size-4" }), _jsx("span", { className: "font-medium", children: "Workflow completed" })] }) })) : (_jsxs(MessageBox, { status: effectiveWorkflowStatus === 'COMPLETED' ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] }))) : ((showInput || canContinueConversation) && (_jsx(MessageInput, { onSend: handleSendMessage, onStop: allowWorkflowControl ? handleStopWorkflow : undefined, approvalModeSlot: interactive && toolApprovalMode ? (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: handleToolApprovalModeChange, disabled: !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl })) : undefined, mcpSlot: _jsx(McpConnectionsActionMenu, { disabledCollections: mcpDisabled, onChange: handleMcpDisabledChange, onConnectionChange: handleMcpConnectionChange }), disabled: isUploading || !isPlaybackLive, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !effectiveIsCompleted, isCompleted: effectiveIsCompleted, contextWindowUsage: canCompactContext ? contextWindowUsage : undefined, onCompactContext: canCompactContext ? handleCompactContext : undefined, isCompactingContext: isCompactingContext, activeTaskCount: activeTaskCount, activeWorkstreams: composerActiveWorkstreams, placeholder: composerPlaceholder, onFilesSelected: canUploadFiles ? handleFileUpload : undefined, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, onRemoveProcessingFile: handleRemoveProcessingFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles, processingFiles: processingFiles, artifactRunId: agentRunId, hasProcessingFiles: hasProcessingFiles, renderDocumentSearch: renderDocumentSearch, selectedDocuments: selectedDocuments, onRemoveDocument: onRemoveDocument, hideObjectLinking: hideObjectLinking, hideFileUpload: !canUploadFiles, disableDropZone: canUploadFiles, className: inputContainerClassName, inputClassName: inputClassName }))) })))] }));
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
     const mainContent = (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("div", { ref: conversationLayoutRef, className: cn('flex flex-col lg:flex-row gap-2 w-full h-full relative overflow-hidden', canUploadFiles && isDragOver && 'ring-2 ring-blue-400 ring-inset', className), onDragEnter: canUploadFiles ? handleDragEnter : undefined, onDragOver: canUploadFiles ? handleDragOver : undefined, onDragLeave: canUploadFiles ? handleDragLeave : undefined, onDrop: canUploadFiles ? handleDrop : undefined, children: [canUploadFiles && isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to upload"] }) })), !conversationTab && conversationAreaJsx, !conversationTab && headerVariant === 'compact' && !hideHeader && (_jsx("div", { className: "hidden h-full w-12 shrink-0 items-start justify-center px-1 pt-2 lg:flex", children: renderConversationHeader('compact') })), isRightPanelVisible && (_jsxs(_Fragment, { children: [!conversationTab && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize right panel", "aria-valuenow": Math.round(rightPanelWidth), "aria-valuemin": 300, "aria-valuetext": `${Math.round(rightPanelWidth)} pixels`, tabIndex: 0, className: "hidden lg:block lg:w-1 lg:shrink-0 cursor-col-resize bg-border/70 hover:bg-border transition-colors", onMouseDown: () => setIsRightPanelResizing(true), onKeyDown: (event) => {
                                     if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')