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

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

@@ -3,9 +3,14 @@ import {
     type AgentMessage,
     AgentMessageType,
     type AgentRun,
+    type AgentToolApprovalMode,
+    type CompletedWorkstreamEntry,
     type ConversationFile,
     type ConversationFileRef,
+    type McpConnectUxConfig,
+    normalizeAgentToolApprovalMode,
     type Plan,
+    type StopSignal,
     type UserInputSignal,
 } from '@vertesia/common';
 import { FusionFragmentProvider } from '@vertesia/fusion-ux';
@@ -27,15 +32,19 @@ import { useUserSession } from '@vertesia/ui/session';
 import { ArrowUpIcon, Bot, CheckCircle, Cpu, FileTextIcon, UploadIcon, XIcon } from 'lucide-react';
 import type React from '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, type WorkstreamInfo } 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 type {
     AgentConversationViewMode,
     AgentInitialRequestTemplate,
@@ -44,12 +53,22 @@ import type {
 import AllMessagesMixed from './ModernAgentOutput/AllMessagesMixed';
 import type { BatchProgressPanelClassNames } from './ModernAgentOutput/BatchProgressPanel';
 import Header from './ModernAgentOutput/Header';
-import MessageInput, { type SelectedDocument, type UploadedFile } from './ModernAgentOutput/MessageInput';
+import MessageInput, {
+    type ContextWindowUsage,
+    type SelectedDocument,
+    type UploadedFile,
+} from './ModernAgentOutput/MessageInput';
 import type { MessageItemClassNames } from './ModernAgentOutput/MessageItem';
 import { getPendingRequestInputMessage } from './ModernAgentOutput/requestInputMessages';
 import type { StreamingMessageClassNames } from './ModernAgentOutput/StreamingMessage';
 import type { ToolCallGroupClassNames } from './ModernAgentOutput/ToolCallGroup';
-import { getConversationUrl, getWorkstreamId, isInProgress } from './ModernAgentOutput/utils';
+import {
+    debugAgentChat,
+    filterMessagesForActiveWorkstream,
+    getConversationUrl,
+    getWorkstreamId,
+    isInProgress,
+} from './ModernAgentOutput/utils';
 import {
     type AgentChatPlaybackCursor,
     createPlaybackState,
@@ -62,13 +81,20 @@ import { ArtifactUrlCacheProvider } from './useArtifactUrlCache.js';
 import { VegaLiteChart } from './VegaLiteChart';
 import { ThinkingMessages } from './WaitingMessages';
 import {
+    getWorkstreamDisplayName,
     getWorkstreamLaunchDetails,
     getWorkstreamLifecycleStatus,
     isWorkstreamInternalResultMessage,
-    isWorkstreamTerminalMessage,
 } from './workstreams.js';
 
-export type StartWorkflowFn = (initialMessage?: string) => Promise<{ agent_run_id: string } | undefined>;
+export interface StartWorkflowOptions {
+    tool_approval_mode?: AgentToolApprovalMode;
+}
+
+export type StartWorkflowFn = (
+    initialMessage?: string,
+    options?: StartWorkflowOptions,
+) => Promise<{ agent_run_id: string } | undefined>;
 
 const EMPTY_STREAMING_MESSAGES = new Map<string, never>();
 
@@ -79,50 +105,279 @@ function getTimestampMs(timestamp: number | string | undefined): number {
     return Number.isFinite(parsed) ? parsed : Date.now();
 }
 
-function deriveActiveWorkstreamsFromMessages(messages: AgentMessage[]): WorkstreamInfo[] {
-    const latestByWorkstream = new Map<string, AgentMessage>();
-    const launchesByWorkstream = new Map<
-        string,
-        { launch_id?: string; interaction?: string; child_workflow_id?: string; child_workflow_run_id?: string }
-    >();
+type DerivedWorkstreamInfo = WorkstreamInfo & {
+    started_at: number;
+    updated_at: number;
+    order: number;
+};
+
+function isActiveWorkstreamStatus(status: WorkstreamInfo['status']) {
+    return status === 'running' || status === 'canceling';
+}
+
+function isTerminalWorkstreamStatus(status: WorkstreamInfo['status']) {
+    return !isActiveWorkstreamStatus(status);
+}
+
+function getNumberDetail(value: unknown): number | undefined {
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function toContextWindowUsage(messages: AgentMessage[]): ContextWindowUsage | undefined {
+    for (let index = messages.length - 1; index >= 0; index--) {
+        const details = messages[index].details;
+        if (!details) continue;
+
+        const tokenUsage = details.token_usage as { total?: unknown } | undefined;
+        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;
+        }
+
+        const usedPercent = Math.max(0, Math.min(100, Math.round((usedTokens / checkpointTokens) * 100)));
+        return {
+            usedTokens,
+            checkpointTokens,
+            usedPercent,
+            remainingPercent: Math.max(0, 100 - usedPercent),
+        };
+    }
+
+    return undefined;
+}
+
+function mergePreservingTerminalStatus(existing: WorkstreamInfo, next: WorkstreamInfo): WorkstreamInfo {
+    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: AgentMessage): {
+    workstreamId: string;
+    launchId?: string;
+    interaction?: string;
+    childWorkflowId?: string;
+    childWorkflowRunId?: string;
+} | null {
+    const details = message.details as
+        | {
+              workstream_id?: unknown;
+              launch_id?: unknown;
+              interaction?: unknown;
+              child_workflow_id?: unknown;
+              child_workflow_run_id?: unknown;
+          }
+        | undefined;
+
+    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: AgentMessage): boolean {
+    if (message.type !== AgentMessageType.ERROR) return false;
+
+    const details = message.details as
+        | {
+              activity_group_id?: unknown;
+              event_class?: unknown;
+              tool?: unknown;
+              tool_event?: unknown;
+              tool_run_id?: unknown;
+              tool_status?: unknown;
+              workstream_event?: unknown;
+          }
+        | undefined;
+
+    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
+    );
+}
 
-    for (const message of messages) {
+function ensureWorkstreamRecord(
+    records: Map<string, DerivedWorkstreamInfo>,
+    latestKeyByWorkstream: Map<string, string>,
+    workstreamId: string,
+    launchId: string | undefined,
+    timestamp: number,
+    order: number,
+): DerivedWorkstreamInfo {
+    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: DerivedWorkstreamInfo = {
+        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: AgentMessage[]): WorkstreamInfo[] {
+    const records = new Map<string, DerivedWorkstreamInfo>();
+    const latestKeyByWorkstream = new Map<string, string>();
+
+    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) {
-            launchesByWorkstream.set(launchDetails.workstreamId, {
-                launch_id: launchDetails.launchId,
-                interaction: launchDetails.interaction,
-                child_workflow_id: launchDetails.childWorkflowId,
-                child_workflow_run_id: launchDetails.childWorkflowRunId,
-            });
+            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 (isWorkstreamInternalResultMessage(message)) continue;
+        if (isInternalResult) return;
 
-        const workstreamId = getWorkstreamId(message);
-        if (workstreamId === 'main' || workstreamId === 'all') continue;
-        latestByWorkstream.set(workstreamId, message);
-    }
+        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(latestByWorkstream.entries())
-        .filter(([, message]) => {
-            if ([AgentMessageType.COMPLETE, AgentMessageType.IDLE].includes(message.type)) return false;
-            return !isWorkstreamTerminalMessage(message);
+    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(([workstreamId, message]) => {
-            const launch = launchesByWorkstream.get(workstreamId);
-            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,
-            };
-        });
+        .map(({ started_at, updated_at, order, ...workstream }) => workstream);
+}
+
+function activeWorkstreamEntryToInfo(ws: ActiveWorkstreamEntry): WorkstreamInfo {
+    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: CompletedWorkstreamEntry): WorkstreamInfo {
+    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: WorkstreamInfo[], next: WorkstreamInfo) {
+    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: number): string {
@@ -440,6 +695,11 @@ export interface ModernAgentConversationProps {
     pendingStartMessage?: string;
     /** Timestamp for the internal optimistic first-message waiting state. */
     pendingStartTimestamp?: number;
+    /**
+     * Initial approval mode: seeds the start screen for a new interactive run, and is shown
+     * while an existing run's metadata loads. Defaults to `full_control`.
+     */
+    initialToolApprovalMode?: AgentToolApprovalMode;
     /** Force display playback controls on or off. When omitted, local playback can be toggled from the header. */
     enablePlayback?: boolean;
     /** Show a local toggle for display playback controls in the conversation action rail. */
@@ -479,6 +739,7 @@ function EmptyState() {
 // Files can be staged locally before workflow starts, then uploaded when the workflow is created
 function StartWorkflowView({
     initialMessage,
+    interactive = true,
     startWorkflow,
     onClose,
     isModal = false,
@@ -500,8 +761,10 @@ function StartWorkflowView({
     inputClassName,
     className,
     allowWorkflowControl,
+    initialToolApprovalMode,
 }: ModernAgentConversationProps) {
     const { t } = useUITranslation();
+    const canStageFiles = !hideFileUpload;
     const resolvedPlaceholder = placeholder ?? t('agent.typeYourMessage');
     const resolvedStartButtonText = startButtonText ?? t('agent.startAgent');
     const resolvedTitle = title ?? t('agent.startNewConversation');
@@ -511,13 +774,15 @@ function StartWorkflowView({
     const [startedAgentRunId, setStartedAgentRunId] = useState<string | null>(null);
     const [pendingStartMessage, setPendingStartMessage] = useState<string | null>(null);
     const [pendingStartTimestamp, setPendingStartTimestamp] = useState<number | null>(null);
+    const [toolApprovalMode, setToolApprovalMode] = useState<AgentToolApprovalMode>(() =>
+        normalizeAgentToolApprovalMode(initialToolApprovalMode, interactive),
+    );
     const toast = useToast();
     const inputRef = useRef<HTMLTextAreaElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
 
     // Staged files - stored locally until workflow starts
     const [stagedFiles, setStagedFiles] = useState<File[]>([]);
-    const canStageFiles = !hideFileUpload;
 
     // Drag and drop state
     const [isDragOver, setIsDragOver] = useState(false);
@@ -578,6 +843,20 @@ function StartWorkflowView({
         [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: React.ClipboardEvent) => {
+            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: React.ChangeEvent<HTMLInputElement>) => {
             if (e.target.files && e.target.files.length > 0) {
@@ -648,7 +927,7 @@ function StartWorkflowView({
             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;
 
@@ -770,6 +1049,7 @@ function StartWorkflowView({
                 title={title}
                 pendingStartMessage={pendingStartMessage ?? undefined}
                 pendingStartTimestamp={pendingStartTimestamp ?? undefined}
+                initialToolApprovalMode={toolApprovalMode}
             />
         );
     }
@@ -863,6 +1143,7 @@ function StartWorkflowView({
                                     <div
                                         key={`${file.name}-${file.size}-${file.lastModified}`}
                                         className="flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention"
+                                        title={t('agent.fileStagedTooltip')}
                                     >
                                         <FileTextIcon className="size-3.5" />
                                         <span className="max-w-[120px] truncate">{file.name}</span>
@@ -885,6 +1166,7 @@ function StartWorkflowView({
                             value={inputValue}
                             onChange={(e) => setInputValue(e.target.value)}
                             onKeyDown={handleKeyDown}
+                            onPaste={handlePaste}
                             placeholder={resolvedPlaceholder}
                             disabled={isSending}
                             rows={2}
@@ -910,6 +1192,13 @@ function StartWorkflowView({
                                         <UploadIcon className="size-4" />
                                     </Button>
                                 )}
+                                {interactive && (
+                                    <AgentApprovalModeSelector
+                                        mode={toolApprovalMode}
+                                        onChange={setToolApprovalMode}
+                                        disabled={isSending}
+                                    />
+                                )}
                             </div>
                             <Button
                                 onClick={startWorkflowWithMessage}
@@ -928,11 +1217,6 @@ function StartWorkflowView({
                             </Button>
                         </div>
                     </div>
-                    <div className="mx-auto mt-2 max-w-3xl text-center text-xs text-muted">
-                        {canStageFiles && stagedFiles.length > 0
-                            ? t('agent.filesStagedCount', { count: stagedFiles.length })
-                            : t('agent.enterToSend')}
-                    </div>
                 </div>
             </div>
         </div>
@@ -1028,6 +1312,7 @@ function ModernAgentConversationInner({
     conversationTab = false,
     pendingStartMessage,
     pendingStartTimestamp,
+    initialToolApprovalMode,
     enablePlayback,
     showPlaybackToggle = true,
 }: ModernAgentConversationProps & { agentRunId: string }) {
@@ -1042,9 +1327,10 @@ function ModernAgentConversationInner({
         messages,
         streamingMessages,
         isCompleted,
+        initialHistoryStatus,
         debugChunkFlash,
         addOptimisticMessage,
-        removeOptimisticMessages,
+        updateOptimisticMessageStatus,
         reconnect: reconnectStream,
         agentRunStatus,
         workflowRunId,
@@ -1095,6 +1381,7 @@ function ModernAgentConversationInner({
     const conversationRef = useRef<HTMLDivElement | null>(null);
     const conversationLayoutRef = useRef<HTMLDivElement | null>(null);
     const [isSending, setIsSending] = useState(false);
+    const [isCompactingContext, setIsCompactingContext] = useState(false);
     const [internalViewMode, setInternalViewMode] = useState<AgentConversationViewMode>('sliding');
     const viewMode = controlledViewMode ?? internalViewMode;
     const handleViewModeChange = useCallback(
@@ -1109,17 +1396,31 @@ function ModernAgentConversationInner({
     );
     const [isStopping, setIsStopping] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);
+    const [activeWorkstream, setActiveWorkstream] = useState('all');
     const [playbackCursor, setPlaybackCursor] = useState<AgentChatPlaybackCursor>('live');
     const [isPlaybackToggleEnabled, setIsPlaybackToggleEnabled] = useState(false);
     const [playbackScrollRequestId, setPlaybackScrollRequestId] = useState(0);
-    const [activeWorkstreams, setActiveWorkstreams] = useState<ActiveWorkstreamEntry[]>([]);
-    const [completedWorkstreams, setCompletedWorkstreams] = useState<
-        Array<{ launch_id: string; workstream_id: string; status: WorkstreamInfo['status'] }>
-    >([]);
+    const [queriedActiveWorkstreams, setQueriedActiveWorkstreams] = useState<ActiveWorkstreamEntry[]>([]);
+    const [queriedCompletedWorkstreams, setQueriedCompletedWorkstreams] = useState<CompletedWorkstreamEntry[]>([]);
+    const [isWorkstreamQueryUnavailable, setIsWorkstreamQueryUnavailable] = useState(false);
+    const initialResolvedToolApprovalMode = useMemo<AgentToolApprovalMode | undefined>(
+        () =>
+            initialToolApprovalMode === undefined && interactive
+                ? undefined
+                : normalizeAgentToolApprovalMode(initialToolApprovalMode, interactive),
+        [initialToolApprovalMode, interactive],
+    );
+    const [toolApprovalMode, setToolApprovalMode] = useState<AgentToolApprovalMode | undefined>(
+        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;
@@ -1193,63 +1494,139 @@ function ModernAgentConversationInner({
         };
     }, [plans, activePlanIndex, workstreamStatusMap]);
 
-    const messageDerivedActiveWorkstreams = useMemo(() => deriveActiveWorkstreamsFromMessages(messages), [messages]);
+    const messageDerivedWorkstreams = useMemo(() => deriveWorkstreamsFromMessages(messages), [messages]);
 
     const panelWorkstreams = useMemo<WorkstreamInfo[]>(() => {
-        const running: WorkstreamInfo[] =
-            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: WorkstreamInfo[] = 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 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(
-        () => panelWorkstreams.filter((ws) => ws.status === 'running').length,
-        [panelWorkstreams],
+        () => 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 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(messages, playbackCursor, isPlaybackEnabled),
-        [isPlaybackEnabled, messages, playbackCursor],
+        () => 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);
@@ -1257,8 +1634,8 @@ function ModernAgentConversationInner({
 
     const handleChangePlaybackCursor = useCallback(
         (nextCursor: AgentChatPlaybackCursor) => {
-            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;
@@ -1266,7 +1643,7 @@ function ModernAgentConversationInner({
             }
             setPlaybackCursor(nextCursor);
         },
-        [clampedPlaybackCursor, isPlaybackEnabled, messages.length],
+        [clampedPlaybackCursor, isPlaybackEnabled, playbackSourceMessages.length],
     );
 
     useEffect(() => {
@@ -1419,45 +1796,76 @@ function ModernAgentConversationInner({
         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 as unknown as {
-                            completed?: Array<{ launch_id: string; workstream_id: string; status: string }>;
-                        }
-                    ).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;
             }
         };
 
@@ -1468,7 +1876,14 @@ function ModernAgentConversationInner({
             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(() => {
@@ -1496,7 +1911,7 @@ function ModernAgentConversationInner({
 
     // Send a message to the agent
     const handleSendMessage = useCallback(
-        (message: string) => {
+        (message: string, inputMetadata?: Record<string, unknown>) => {
             const trimmed = message.trim();
             if (!trimmed || isSendingRef.current) return;
 
@@ -1535,7 +1950,7 @@ function ModernAgentConversationInner({
                 type: AgentMessageType.QUESTION,
                 message: messageContent,
                 workstream_id: 'main',
-                details: { _optimistic: true, _messageId: messageId },
+                details: { _optimistic: true, _messageId: messageId, _deliveryStatus: 'sending' },
             };
 
             addOptimisticMessage(optimisticMessage);
@@ -1543,15 +1958,23 @@ function ModernAgentConversationInner({
             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,
                 } as UserInputSignal);
 
+            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
@@ -1560,17 +1983,13 @@ function ModernAgentConversationInner({
             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'),
@@ -1591,11 +2010,92 @@ function ModernAgentConversationInner({
             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: McpConnectUxConfig) => {
+            // 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: unknown) {
+                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<string[] | undefined>(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: string[]) => {
+            const next = disabled.length > 0 ? disabled : undefined;
+            setMcpDisabled(next);
+            client.agents
+                .sendSignal(agentRunId, 'McpConfigChanged', { disabled_mcp_collections: disabled })
+                .catch((err: unknown) => 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: unknown) => console.error('Failed to signal MCP config change', err));
+    }, [client, agentRunId]);
+
+    const handleToolApprovalModeChange = useCallback(
+        (mode: AgentToolApprovalMode) => {
+            const nextMode = normalizeAgentToolApprovalMode(mode, interactive);
+            setToolApprovalMode(nextMode);
+            client.agents
+                .sendSignal(agentRunId, 'ToolApprovalModeChanged', { mode: nextMode })
+                .catch((err: unknown) => {
+                    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: React.DragEvent) => {
@@ -1652,29 +2152,67 @@ function ModernAgentConversationInner({
     const handleStopWorkflow = useCallback(async () => {
         if (isStopping) return;
 
+        const messageId = `stop-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const optimisticMessage: AgentMessage = {
+            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,
+                },
+            } as StopSignal);
+
+            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(() => {
@@ -1869,7 +2407,7 @@ function ModernAgentConversationInner({
                 <div className="flex flex-shrink-0 justify-end px-2 py-1.5">
                     <AgentChatPlaybackControls
                         cursor={clampedPlaybackCursor}
-                        messages={messages}
+                        messages={playbackSourceMessages}
                         onChangeCursor={handleChangePlaybackCursor}
                     />
                 </div>
@@ -1910,19 +2448,27 @@ function ModernAgentConversationInner({
                     initialRequestSchema={initialRequestSchema}
                     initialRequestTitle={initialRequestTitle}
                     initialRequestTemplate={initialRequestTemplate}
+                    showInitialRequest={initialHistoryStatus === 'empty' && messages.length === 0}
                     hiddenMessageTypes={hiddenMessageTypes}
                     disableAutoScroll={!isPlaybackLive}
-                    renderRequestInputControls={isPlaybackLive && !shouldShowLiveRequestInputOverlay}
+                    renderRequestInputControls={!shouldShowRequestInputOverlay}
+                    activeWorkstream={activeWorkstream}
+                    onActiveWorkstreamChange={setActiveWorkstream}
                 />
             )}
 
-            {shouldShowLiveRequestInputOverlay ? (
+            {shouldShowRequestInputOverlay ? (
                 <AgentRequestInputOverlay
                     message={pendingRequestInputMessage}
-                    onSendMessage={handleSendMessage}
+                    onSendMessage={isPlaybackLive ? handleSendMessage : undefined}
+                    onMcpConnected={isPlaybackLive ? handleMcpConnected : undefined}
                     disabled={isUploading || !isPlaybackLive}
                     isLoading={isSending || isUploading}
                 />
+            ) : isViewingPlaybackHistory && playbackActiveWorkstreams.length > 0 ? (
+                <div className="flex-shrink-0 pb-safe-area">
+                    <ActiveWorkstreamsSummary activeWorkstreams={playbackActiveWorkstreams} />
+                </div>
             ) : (
                 shouldRenderLiveMessageInputArea && (
                     <div className="flex-shrink-0 pb-safe-area">
@@ -1959,14 +2505,35 @@ function ModernAgentConversationInner({
                                 <MessageInput
                                     onSend={handleSendMessage}
                                     onStop={allowWorkflowControl ? handleStopWorkflow : undefined}
+                                    approvalModeSlot={
+                                        interactive && toolApprovalMode ? (
+                                            <AgentApprovalModeSelector
+                                                mode={toolApprovalMode}
+                                                onChange={handleToolApprovalModeChange}
+                                                disabled={
+                                                    !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl
+                                                }
+                                            />
+                                        ) : undefined
+                                    }
+                                    mcpSlot={
+                                        <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={panelWorkstreams}
-                                    placeholder={placeholder ?? 'Type your message...'}
+                                    activeWorkstreams={composerActiveWorkstreams}
+                                    placeholder={composerPlaceholder}
                                     onFilesSelected={canUploadFiles ? handleFileUpload : undefined}
                                     uploadedFiles={uploadedFiles}
                                     onRemoveFile={onRemoveFile}