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

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

@@ -1,59 +1,223 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Bot, Cpu, FileTextIcon, SendIcon, UploadIcon, XIcon } from "lucide-react";
-import { useUserSession } from "@vertesia/ui/session";
 import {
-    ActiveWorkstreamEntry,
-    AgentMessage,
+    type ActiveWorkstreamEntry,
+    type AgentMessage,
     AgentMessageType,
-    AgentRun,
-    ConversationFile,
-    ConversationFileRef,
-    Plan,
-    UserInputSignal,
-} from "@vertesia/common";
-import { FusionFragmentProvider } from "@vertesia/fusion-ux";
-import { Button, cn, MessageBox, Spinner, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
-
-import { AnimatedThinkingDots, PulsatingCircle } from "./AnimatedThinkingDots";
-import { type AgentConversationViewMode } from "./ModernAgentOutput/AllMessagesMixed";
-import { type BatchProgressPanelClassNames } from "./ModernAgentOutput/BatchProgressPanel";
-import { type MessageItemClassNames } from "./ModernAgentOutput/MessageItem";
-import { type StreamingMessageClassNames } from "./ModernAgentOutput/StreamingMessage";
-import { type ToolCallGroupClassNames } from "./ModernAgentOutput/ToolCallGroup";
-import { ImageLightboxProvider } from "./ImageLightbox";
-import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
-import Header from "./ModernAgentOutput/Header";
-import MessageInput, { UploadedFile, SelectedDocument } from "./ModernAgentOutput/MessageInput";
-import { getConversationUrl, getWorkstreamId } from "./ModernAgentOutput/utils";
-import { ThinkingMessages } from "./WaitingMessages";
-import { SkillWidgetProvider } from "./SkillWidgetProvider";
-import { ArtifactUrlCacheProvider } from "./useArtifactUrlCache.js";
-import { useUITranslation } from "../../../i18n/index.js";
-import { VegaLiteChart } from "./VegaLiteChart";
-import { AgentRightPanel, type WorkstreamInfo } from "./AgentRightPanel.js";
-import { useAgentStream } from "./hooks/useAgentStream.js";
-import { useAgentPlans } from "./hooks/useAgentPlans.js";
-import { useDocumentPanel } from "./hooks/useDocumentPanel.js";
-import { useFileProcessing } from "./hooks/useFileProcessing.js";
-
-export type StartWorkflowFn = (
-    initialMessage?: string,
-) => Promise<{ agent_run_id: string } | undefined>;
+    type AgentRun,
+    type ConversationFile,
+    type ConversationFileRef,
+    type Plan,
+    type UserInputSignal,
+} 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 type React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AgentChatPlaybackControls } from './AgentChatPlaybackControls';
+import { AgentRequestInputOverlay } from './AgentRequestInputOverlay';
+import { AgentRightPanel, type WorkstreamInfo } from './AgentRightPanel.js';
+import { AnimatedThinkingDots, PulsatingCircle } from './AnimatedThinkingDots';
+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 type {
+    AgentConversationViewMode,
+    AgentInitialRequestTemplate,
+    AgentInitialRequestTemplateContext,
+} from './ModernAgentOutput/AllMessagesMixed';
+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 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 {
+    type AgentChatPlaybackCursor,
+    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';
+
+export type StartWorkflowFn = (initialMessage?: string) => Promise<{ agent_run_id: string } | undefined>;
+
+const EMPTY_STREAMING_MESSAGES = new Map<string, never>();
+
+function getTimestampMs(timestamp: number | string | undefined): number {
+    if (typeof timestamp === 'number') return timestamp;
+    if (!timestamp) return Date.now();
+    const parsed = new Date(timestamp).getTime();
+    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 }
+    >();
+
+    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)) continue;
+
+        const workstreamId = getWorkstreamId(message);
+        if (workstreamId === 'main' || workstreamId === 'all') 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);
+            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,
+            };
+        });
+}
+
+function formatCompactDuration(seconds: number): string {
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+}
+
+function useElapsedSeconds(timestamp?: number | string, enabled = true): number {
+    const [elapsed, setElapsed] = useState(() =>
+        Math.max(0, Math.floor((Date.now() - getTimestampMs(timestamp)) / 1000)),
+    );
+
+    useEffect(() => {
+        if (!enabled) return;
+
+        const updateElapsed = () => {
+            setElapsed(Math.max(0, Math.floor((Date.now() - getTimestampMs(timestamp)) / 1000)));
+        };
+
+        updateElapsed();
+        const intervalId = window.setInterval(updateElapsed, 1000);
+        return () => window.clearInterval(intervalId);
+    }, [enabled, timestamp]);
+
+    return elapsed;
+}
+
+function useThinkingMessageIndex(enabled = true): number {
+    const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
+
+    useEffect(() => {
+        if (!enabled) return;
+
+        const intervalId = window.setInterval(() => {
+            setThinkingMessageIndex(() => Math.floor(Math.random() * ThinkingMessages.length));
+        }, 4000);
+        return () => window.clearInterval(intervalId);
+    }, [enabled]);
+
+    return thinkingMessageIndex;
+}
+
+function PendingStartConversation({ message, startedAt }: { message: string; startedAt: number }) {
+    const { t } = useUITranslation();
+    const elapsed = useElapsedSeconds(startedAt);
+    const thinkingMessageIndex = useThinkingMessageIndex();
+
+    return (
+        <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end gap-6 px-1 py-8">
+            <div className="flex w-full justify-end">
+                <div
+                    className={cn(
+                        'max-w-[min(44rem,82%)] rounded-[1.35rem] bg-mixer-muted/35 px-4 py-2.5',
+                        'break-words text-sm font-normal leading-6 text-foreground/90 shadow-sm shadow-black/5',
+                        'dark:bg-mixer-muted/15 dark:text-foreground/88 dark:shadow-none [overflow-wrap:anywhere]',
+                    )}
+                >
+                    <div className="whitespace-pre-wrap">{message}</div>
+                </div>
+            </div>
+            <div className="border-b border-border/70 pb-4 text-sm text-muted">
+                <div className="flex items-center gap-3">
+                    <PulsatingCircle size="sm" color="blue" />
+                    <div className="min-w-0">
+                        <div>
+                            <span className="font-medium">{t('agent.preparing')}</span>
+                            <span className="ms-2 text-muted/75">for {formatCompactDuration(elapsed)}</span>
+                        </div>
+                        <div className="mt-1 truncate text-muted/80">{ThinkingMessages[thinkingMessageIndex]}</div>
+                    </div>
+                </div>
+                <div className="mt-3 ps-6">
+                    <AnimatedThinkingDots color="blue" />
+                </div>
+            </div>
+        </div>
+    );
+}
 
 function printElementToPdf(sourceElement: HTMLElement, title: string): boolean {
-    if (typeof window === "undefined" || typeof document === "undefined") {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
         return false;
     }
 
     // Use a hidden iframe to avoid opening a new window
-    const iframe = document.createElement("iframe");
-    iframe.style.position = "fixed";
-    iframe.style.right = "0";
-    iframe.style.bottom = "0";
-    iframe.style.width = "0";
-    iframe.style.height = "0";
-    iframe.style.border = "0";
-    iframe.style.visibility = "hidden";
+    const iframe = document.createElement('iframe');
+    iframe.style.position = 'fixed';
+    iframe.style.right = '0';
+    iframe.style.bottom = '0';
+    iframe.style.width = '0';
+    iframe.style.height = '0';
+    iframe.style.border = '0';
+    iframe.style.visibility = 'hidden';
     document.body.appendChild(iframe);
 
     const iframeWindow = iframe.contentWindow;
@@ -64,11 +228,13 @@ function printElementToPdf(sourceElement: HTMLElement, title: string): boolean {
 
     const doc = iframeWindow.document;
     doc.open();
-    doc.write(`<!doctype html><html><head><title>${title}</title></head><body></body></html>`);
+    // Write a static skeleton only; the (untrusted) title is assigned via doc.title below,
+    // which sets it as text and avoids constructing HTML from input (CodeQL js/html-constructed-from-input).
+    doc.write('<!doctype html><html><head><title></title></head><body></body></html>');
     doc.close();
     doc.title = title;
 
-    const styles = document.querySelectorAll<HTMLLinkElement | HTMLStyleElement>("link[rel=\"stylesheet\"], style");
+    const styles = document.querySelectorAll<HTMLLinkElement | HTMLStyleElement>('link[rel="stylesheet"], style');
     styles.forEach((node) => {
         doc.head.appendChild(node.cloneNode(true));
     });
@@ -84,7 +250,31 @@ function printElementToPdf(sourceElement: HTMLElement, title: string): boolean {
     return true;
 }
 
-interface ModernAgentConversationProps {
+function trimHyphens(value: string): string {
+    let start = 0;
+    let end = value.length;
+    while (start < end && value[start] === '-') start++;
+    while (end > start && value[end - 1] === '-') end--;
+    return value.slice(start, end);
+}
+
+function sanitizeFilenamePart(value: string): string {
+    return trimHyphens(value.trim().replace(/[^a-z0-9-_]+/gi, '-')).slice(0, 80);
+}
+
+function downloadJsonFile(filename: string, payload: unknown) {
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+}
+
+export interface ModernAgentConversationProps {
     /** Stable AgentRun ID — the primary identifier for all runtime operations. */
     agentRunId?: string;
     title?: string;
@@ -104,6 +294,8 @@ interface ModernAgentConversationProps {
     onClone?: (newRun: AgentRun) => void;
     /** Called to show run details/internals modal */
     onShowDetails?: () => void;
+    /** Whether workflow control actions such as cancel should be shown. */
+    allowWorkflowControl?: boolean;
 
     // File upload props - passed through to MessageInput
     /** Called when files are dropped/pasted/selected */
@@ -126,7 +318,9 @@ interface ModernAgentConversationProps {
     /** Called when plans change (for external plan panel) */
     onPlansChange?: (plans: Array<{ plan: Plan; timestamp: number }>, activePlanIndex: number) => void;
     /** Called when workstream status changes (for external plan panel) */
-    onWorkstreamStatusChange?: (statusMap: Map<number, Map<string, "pending" | "in_progress" | "completed" | "skipped">>) => void;
+    onWorkstreamStatusChange?: (
+        statusMap: Map<number, Map<string, 'pending' | 'in_progress' | 'completed' | 'skipped'>>,
+    ) => void;
 
     /** Controlled view mode — when provided, overrides internal state */
     viewMode?: AgentConversationViewMode;
@@ -155,8 +349,13 @@ interface ModernAgentConversationProps {
     hideObjectLinking?: boolean;
     /** Hide the internal header (for apps that render their own) */
     hideHeader?: boolean;
+    /** Header density. Use compact when the surrounding page already identifies the run. */
+    headerVariant?: 'full' | 'compact';
     /** Hide the internal message input (for apps that render their own) */
     hideMessageInput?: boolean;
+    /** Custom action shown in place of the input box when the run status is FAILED.
+     *  When omitted, the default "This Workflow is FAILED" message box is shown. */
+    failedAction?: React.ReactNode;
     /** Hide the internal plan panel (for apps that render their own) */
     hidePlanPanel?: boolean;
     /** Hide workstream tabs */
@@ -194,7 +393,7 @@ interface ModernAgentConversationProps {
 
     messageItemClassNames?: MessageItemClassNames;
     /** Sparse MESSAGE_STYLES overrides passed to every MessageItem */
-    messageStyleOverrides?: import("./ModernAgentOutput/MessageItem").MessageItemProps['messageStyleOverrides'];
+    messageStyleOverrides?: import('./ModernAgentOutput/MessageItem').MessageItemProps['messageStyleOverrides'];
     toolCallGroupClassNames?: ToolCallGroupClassNames;
     /** Hide ToolCallGroup in this view mode */
     hideToolCallsInViewMode?: AgentConversationViewMode[];
@@ -213,6 +412,14 @@ interface ModernAgentConversationProps {
     /** Optional message to display as the first user message in the conversation.
      *  Purely visual/UI — not sent to temporal. Renders as a QUESTION MessageItem before real messages. */
     prependFriendlyMessage?: string;
+    /** Optional structured request data to render as the first user entry in the conversation. */
+    initialRequestData?: unknown;
+    /** Optional schema used by the default request renderer. */
+    initialRequestSchema?: AgentInitialRequestTemplateContext['schema'];
+    /** Optional label/title for the default structured request renderer. */
+    initialRequestTitle?: string;
+    /** Optional agent-specific request renderer for arbitrary input schemas. */
+    initialRequestTemplate?: AgentInitialRequestTemplate;
 
     // Fusion fragment props
     /**
@@ -229,11 +436,17 @@ interface ModernAgentConversationProps {
     conversationContent?: React.ReactNode;
     /** When true, renders the conversation inside the right panel as a "Conversation" tab */
     conversationTab?: boolean;
+    /** Internal optimistic first message shown while a newly-started run is waiting for persisted messages. */
+    pendingStartMessage?: string;
+    /** Timestamp for the internal optimistic first-message waiting state. */
+    pendingStartTimestamp?: number;
+    /** 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. */
+    showPlaybackToggle?: boolean;
 }
 
-export function ModernAgentConversation(
-    props: ModernAgentConversationProps,
-) {
+export function ModernAgentConversation(props: ModernAgentConversationProps) {
     const { agentRunId, startWorkflow } = props;
 
     if (agentRunId) {
@@ -255,16 +468,9 @@ export function ModernAgentConversation(
 function EmptyState() {
     const { t } = useUITranslation();
     return (
-        <MessageBox
-            status="info"
-            icon={<Bot className="size-16 text-muted mb-4" />}
-        >
-            <div className="text-base font-medium text-muted">
-                {t('agent.noAgentRunning')}
-            </div>
-            <div className="mt-3 text-sm text-muted">
-                {t('agent.selectInteraction')}
-            </div>
+        <MessageBox status="info" icon={<Bot className="size-16 text-muted mb-4" />}>
+            <div className="text-base font-medium text-muted">{t('agent.noAgentRunning')}</div>
+            <div className="mt-3 text-sm text-muted">{t('agent.selectInteraction')}</div>
         </MessageBox>
     );
 }
@@ -286,79 +492,109 @@ function StartWorkflowView({
     // File upload props
     acceptedFileTypes,
     maxFiles = 5,
+    hideHeader = false,
+    hideFileUpload = false,
+    hideObjectLinking,
+    headerVariant,
+    inputContainerClassName,
+    inputClassName,
+    className,
+    allowWorkflowControl,
 }: ModernAgentConversationProps) {
     const { t } = useUITranslation();
     const resolvedPlaceholder = placeholder ?? t('agent.typeYourMessage');
     const resolvedStartButtonText = startButtonText ?? t('agent.startAgent');
     const resolvedTitle = title ?? t('agent.startNewConversation');
     const { client } = useUserSession();
-    const [inputValue, setInputValue] = useState<string>("");
+    const [inputValue, setInputValue] = useState<string>('');
     const [isSending, setIsSending] = useState(false);
     const [startedAgentRunId, setStartedAgentRunId] = useState<string | null>(null);
+    const [pendingStartMessage, setPendingStartMessage] = useState<string | null>(null);
+    const [pendingStartTimestamp, setPendingStartTimestamp] = useState<number | null>(null);
     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);
     const dragCounterRef = useRef(0);
 
     // Drag and drop handlers for file staging
-    const handleDragEnter = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounterRef.current++;
-        if (e.dataTransfer?.types?.includes('Files')) {
-            setIsDragOver(true);
-        }
-    }, []);
+    const handleDragEnter = useCallback(
+        (e: React.DragEvent) => {
+            if (!canStageFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounterRef.current++;
+            if (e.dataTransfer?.types?.includes('Files')) {
+                setIsDragOver(true);
+            }
+        },
+        [canStageFiles],
+    );
 
-    const handleDragOver = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
+    const handleDragOver = useCallback(
+        (e: React.DragEvent) => {
+            if (!canStageFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+        },
+        [canStageFiles],
+    );
 
-    const handleDragLeave = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounterRef.current--;
-        if (dragCounterRef.current === 0) {
+    const handleDragLeave = useCallback(
+        (e: React.DragEvent) => {
+            if (!canStageFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounterRef.current--;
+            if (dragCounterRef.current === 0) {
+                setIsDragOver(false);
+            }
+        },
+        [canStageFiles],
+    );
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            if (!canStageFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounterRef.current = 0;
             setIsDragOver(false);
-        }
-    }, []);
 
-    const handleDrop = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounterRef.current = 0;
-        setIsDragOver(false);
-
-        if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-            const filesArray = Array.from(e.dataTransfer.files);
-            setStagedFiles(prev => {
-                const newFiles = [...prev, ...filesArray].slice(0, maxFiles);
-                return newFiles;
-            });
-        }
-    }, [maxFiles]);
-
-    const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files.length > 0) {
-            const filesArray = Array.from(e.target.files);
-            setStagedFiles(prev => {
-                const newFiles = [...prev, ...filesArray].slice(0, maxFiles);
-                return newFiles;
-            });
-        }
-        // Reset input so the same file can be selected again
-        e.target.value = '';
-    }, [maxFiles]);
+            if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+                const filesArray = Array.from(e.dataTransfer.files);
+                setStagedFiles((prev) => {
+                    const newFiles = [...prev, ...filesArray].slice(0, maxFiles);
+                    return newFiles;
+                });
+            }
+        },
+        [maxFiles, canStageFiles],
+    );
+
+    const handleFileInputChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            if (e.target.files && e.target.files.length > 0) {
+                const filesArray = Array.from(e.target.files);
+                setStagedFiles((prev) => {
+                    const newFiles = [...prev, ...filesArray].slice(0, maxFiles);
+                    return newFiles;
+                });
+            }
+            // Reset input so the same file can be selected again
+            e.target.value = '';
+        },
+        [maxFiles],
+    );
 
     const removeStagedFile = useCallback((index: number) => {
-        setStagedFiles(prev => prev.filter((_, i) => i !== index));
+        setStagedFiles((prev) => prev.filter((_, i) => i !== index));
     }, []);
 
     useEffect(() => {
@@ -378,11 +614,14 @@ function StartWorkflowView({
         setIsSending(true);
         try {
             // Reset plan panel state when starting a new agent
-            sessionStorage.removeItem("plan-panel-shown");
+            sessionStorage.removeItem('plan-panel-shown');
 
             toast({
-                title: stagedFiles.length > 0 ? t('agent.startingAgentUploading') : t('agent.startingAgent'),
-                status: "info",
+                title:
+                    canStageFiles && stagedFiles.length > 0
+                        ? t('agent.startingAgentUploading')
+                        : t('agent.startingAgent'),
+                status: 'info',
                 duration: 3000,
             });
 
@@ -397,39 +636,38 @@ function StartWorkflowView({
             }
 
             // If files are staged, add a note to the message so the agent knows files are coming
-            if (stagedFiles.length > 0) {
-                const fileNames = stagedFiles.map(f => f.name).join(', ');
+            if (canStageFiles && stagedFiles.length > 0) {
+                const fileNames = stagedFiles.map((f) => f.name).join(', ');
                 messageContent = [
                     messageContent,
                     '',
-                    `[System: ${stagedFiles.length} file(s) are being uploaded: ${fileNames}. Please wait for the "Files Ready" notification before processing them.]`
+                    `[System: ${stagedFiles.length} file(s) are being uploaded: ${fileNames}. Please wait for the "Files Ready" notification before processing them.]`,
                 ].join('\n');
             }
 
+            setPendingStartMessage(messageContent);
+            setPendingStartTimestamp(Date.now());
+
             const newRun = await startWorkflow(messageContent);
             if (newRun) {
                 const agentId = newRun.agent_run_id;
 
                 // Upload staged files to the new run's artifact space and signal agent
                 const uploadedFiles: string[] = [];
-                if (stagedFiles.length > 0) {
+                if (canStageFiles && stagedFiles.length > 0) {
                     for (const file of stagedFiles) {
                         try {
                             const artifactPath = `files/${file.name}`;
                             await client.agents.uploadArtifact(agentId, artifactPath, file);
 
                             // Signal agent that file was uploaded
-                            await client.agents.sendSignal(
-                                agentId,
-                                "FileUploaded",
-                                {
-                                    id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-                                    name: file.name,
-                                    content_type: file.type || 'application/octet-stream',
-                                    reference: `artifact:${artifactPath}`,
-                                    artifact_path: artifactPath,
-                                } as ConversationFileRef
-                            );
+                            await client.agents.sendSignal(agentId, 'FileUploaded', {
+                                id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                                name: file.name,
+                                content_type: file.type || 'application/octet-stream',
+                                reference: `artifact:${artifactPath}`,
+                                artifact_path: artifactPath,
+                            } as ConversationFileRef);
                             uploadedFiles.push(file.name);
                         } catch (uploadErr) {
                             console.error(`Failed to upload staged file ${file.name}:`, uploadErr);
@@ -440,17 +678,13 @@ function StartWorkflowView({
                     // Send a follow-up message to notify the agent that all files are ready
                     if (uploadedFiles.length > 0) {
                         try {
-                            await client.agents.sendSignal(
-                                agentId,
-                                "UserInput",
-                                {
-                                    message: `[Files Ready] All ${uploadedFiles.length} file(s) have been uploaded and are now available: ${uploadedFiles.join(', ')}. You can now process them.`,
-                                    metadata: {
-                                        type: 'files_ready',
-                                        files: uploadedFiles,
-                                    },
-                                } as UserInputSignal
-                            );
+                            await client.agents.sendSignal(agentId, 'UserInput', {
+                                message: `[Files Ready] All ${uploadedFiles.length} file(s) have been uploaded and are now available: ${uploadedFiles.join(', ')}. You can now process them.`,
+                                metadata: {
+                                    type: 'files_ready',
+                                    files: uploadedFiles,
+                                },
+                            } as UserInputSignal);
                         } catch (signalErr) {
                             console.error('Failed to send files ready signal:', signalErr);
                         }
@@ -462,17 +696,19 @@ function StartWorkflowView({
                 // Clear attachments after successful start
                 onAttachmentsSent?.();
                 setStartedAgentRunId(agentId);
-                setInputValue("");
+                setInputValue('');
                 toast({
                     title: t('agent.agentStarted'),
-                    status: "success",
+                    status: 'success',
                     duration: 3000,
                 });
             }
-        } catch (err: any) {
+        } catch (err: unknown) {
+            setPendingStartMessage(null);
+            setPendingStartTimestamp(null);
             toast({
                 title: t('agent.errorStarting'),
-                status: "error",
+                status: 'error',
                 duration: 3000,
                 description: err instanceof Error ? err.message : t('agent.unknownError'),
             });
@@ -482,11 +718,19 @@ function StartWorkflowView({
     };
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (e.key === "Enter" && !e.shiftKey) {
+        if (e.key !== 'Enter') return;
+        const hasModifier = e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
+        if (!hasModifier) {
+            // Plain Enter sends.
             e.preventDefault();
-            startWorkflowWithMessage();
+            void startWorkflowWithMessage();
+            return;
+        }
+        // Shift+Enter inserts \n natively; Cmd/Ctrl/Alt+Enter do not in most browsers.
+        if (!e.shiftKey) {
+            e.preventDefault();
+            insertNewlineAtCursor(e.currentTarget, setInputValue);
         }
-        // Shift+Enter allows newline (default textarea behavior)
     };
 
     // Auto-resize textarea as content grows
@@ -499,6 +743,7 @@ function StartWorkflowView({
     }, []);
 
     useEffect(() => {
+        void inputValue;
         adjustTextareaHeight();
     }, [inputValue, adjustTextareaHeight]);
 
@@ -506,27 +751,44 @@ function StartWorkflowView({
     if (startedAgentRunId) {
         return (
             <ModernAgentConversationInner
-                {...{ onClose, isModal, initialMessage, placeholder }}
+                {...{
+                    onClose,
+                    isModal,
+                    initialMessage,
+                    placeholder,
+                    fullWidth,
+                    hideHeader,
+                    headerVariant,
+                    hideFileUpload,
+                    hideObjectLinking,
+                    inputContainerClassName,
+                    inputClassName,
+                    className,
+                    allowWorkflowControl,
+                }}
                 agentRunId={startedAgentRunId}
                 title={title}
+                pendingStartMessage={pendingStartMessage ?? undefined}
+                pendingStartTimestamp={pendingStartTimestamp ?? undefined}
             />
         );
     }
 
     return (
-        <div className="flex flex-col h-full bg-background items-center">
+        <div className={cn('flex h-full flex-col items-center bg-background', className)}>
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: drag/drop target only; file selection is also exposed via the upload button. */}
             <div
                 className={cn(
-                    "flex flex-col h-full w-full overflow-hidden border-0 relative",
-                    fullWidth ? "" : "max-w-4xl"
+                    'relative flex h-full w-full flex-col overflow-hidden border-0',
+                    fullWidth ? '' : 'max-w-4xl',
                 )}
-                onDragEnter={handleDragEnter}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
+                onDragEnter={canStageFiles ? handleDragEnter : undefined}
+                onDragOver={canStageFiles ? handleDragOver : undefined}
+                onDragLeave={canStageFiles ? handleDragLeave : undefined}
+                onDrop={canStageFiles ? handleDrop : undefined}
             >
                 {/* Drag overlay for full-panel file drop */}
-                {isDragOver && (
+                {canStageFiles && isDragOver && (
                     <div className="absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg">
                         <div className="text-info font-medium flex items-center gap-2 text-lg">
                             <UploadIcon className="size-6" />
@@ -536,131 +798,144 @@ function StartWorkflowView({
                 )}
 
                 {/* Hidden file input */}
-                <input
-                    ref={fileInputRef}
-                    type="file"
-                    multiple
-                    accept={acceptedFileTypes}
-                    onChange={handleFileInputChange}
-                    className="hidden"
-                />
+                {canStageFiles && (
+                    <input
+                        ref={fileInputRef}
+                        type="file"
+                        multiple
+                        accept={acceptedFileTypes}
+                        onChange={handleFileInputChange}
+                        className="hidden"
+                    />
+                )}
 
                 {/* Header */}
-                <div className="flex items-center justify-between py-2 px-3 border-b border-border bg-background">
-                    <div className="flex items-center space-x-2">
-                        <div className="p-1">
-                            <Cpu className="size-3.5 text-muted" />
+                {!hideHeader && (
+                    <div className="flex items-center justify-between border-b border-border/60 bg-background px-3 py-2">
+                        <div className="flex items-center gap-2">
+                            <div className="p-1">
+                                <Cpu className="size-3.5 text-muted" />
+                            </div>
+                            <span className="text-sm font-medium text-foreground">{resolvedTitle}</span>
                         </div>
-                        <span className="font-medium text-sm text-foreground">
-                            {resolvedTitle}
-                        </span>
+
+                        {/* Close button if needed */}
+                        {onClose && !isModal && (
+                            <Button
+                                size="xs"
+                                variant="ghost"
+                                onClick={onClose}
+                                aria-label={t('agent.close')}
+                                title={t('agent.close')}
+                                className="text-muted hover:text-foreground"
+                            >
+                                <XIcon className="size-4" />
+                            </Button>
+                        )}
                     </div>
+                )}
 
-                    {/* Close button if needed */}
-                    {onClose && !isModal && (
-                        <Button
-                            size="xs"
-                            variant="ghost"
-                            onClick={onClose}
-                            title={t('agent.close')}
-                            className="text-muted hover:text-foreground"
-                        >
-                            <XIcon className="size-4" />
-                        </Button>
+                {/* Empty conversation area with instructions */}
+                <div className="flex flex-1 flex-col items-center justify-end overflow-y-auto bg-background px-4">
+                    {pendingStartMessage && pendingStartTimestamp ? (
+                        <PendingStartConversation message={pendingStartMessage} startedAt={pendingStartTimestamp} />
+                    ) : (
+                        <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end py-8">
+                            {initialMessage && (
+                                <div className="text-[15px] leading-relaxed text-foreground/80">{initialMessage}</div>
+                            )}
+                        </div>
                     )}
                 </div>
 
-                {/* Empty conversation area with instructions */}
-                <div className="flex-1 overflow-y-auto bg-background flex flex-col items-center justify-end">
-                    <div className="w-full px-4 py-6">
-                        {initialMessage && (
-                            <div className="px-4 py-3 mb-4 bg-info-background border-l-2 border-info text-info">
-                                {initialMessage}
+                {/* Input Area */}
+                <div className="shrink-0 bg-background px-4 pb-safe-area-4 pt-2">
+                    <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,
+                        )}
+                    >
+                        {/* Staged files display */}
+                        {canStageFiles && stagedFiles.length > 0 && (
+                            <div className="flex flex-wrap gap-2">
+                                {stagedFiles.map((file, index) => (
+                                    <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"
+                                    >
+                                        <FileTextIcon className="size-3.5" />
+                                        <span className="max-w-[120px] truncate">{file.name}</span>
+                                        <span className="text-xs opacity-70">{t('agent.staged')}</span>
+                                        <Button
+                                            variant="unstyled"
+                                            aria-label={`Remove staged file ${file.name}`}
+                                            onClick={() => removeStagedFile(index)}
+                                            className="ms-1 rounded p-0.5 hover:bg-attention/20"
+                                        >
+                                            <XIcon className="size-3" />
+                                        </Button>
+                                    </div>
+                                ))}
                             </div>
                         )}
 
-                        <div className="bg-card p-4 border-l-2 border-info">
-                            <div className="text-base text-foreground font-medium">
-                                {t('agent.enterMessage')}
-                            </div>
-                            <div className="mt-3 text-sm text-muted">
-                                {t('agent.typeQuestionBelow', { buttonText: resolvedStartButtonText })}
+                        <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' }}
+                        />
+
+                        <div className="flex items-center justify-between gap-3">
+                            <div className="flex min-w-0 items-center gap-2">
+                                {canStageFiles && (
+                                    <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')}
+                                    >
+                                        <UploadIcon className="size-4" />
+                                    </Button>
+                                )}
                             </div>
+                            <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}
+                            >
+                                {isSending ? <Spinner size="sm" /> : <ArrowUpIcon className="size-4" />}
+                            </Button>
                         </div>
                     </div>
-                </div>
-
-                {/* Input Area */}
-                <div className="py-3 px-3 border-t border-border bg-background">
-                {/* Staged files display */}
-                {stagedFiles.length > 0 && (
-                    <div className="flex flex-wrap gap-2 mb-3">
-                        {stagedFiles.map((file, index) => (
-                            <div
-                                key={`${file.name}-${index}`}
-                                className="flex items-center gap-1.5 px-2 py-1 bg-attention/10 text-attention rounded-md text-sm"
-                            >
-                                <FileTextIcon className="size-3.5" />
-                                <span className="max-w-[120px] truncate">{file.name}</span>
-                                <span className="text-xs opacity-70">{t('agent.staged')}</span>
-                                <button
-                                    onClick={() => removeStagedFile(index)}
-                                    className="ml-1 p-0.5 hover:bg-attention/20 rounded"
-                                >
-                                    <XIcon className="size-3" />
-                                </button>
-                            </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>
-                )}
-
-                {/* Upload button row */}
-                <div className="flex gap-2 mb-2">
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => fileInputRef.current?.click()}
-                        disabled={isSending || stagedFiles.length >= maxFiles}
-                        className="text-xs"
-                    >
-                        <UploadIcon className="size-3.5 mr-1.5" />
-                        {t('agent.upload')}
-                    </Button>
-                </div>
-
-                <div className="flex items-end gap-2">
-                    <textarea
-                        ref={inputRef}
-                        value={inputValue}
-                        onChange={(e) => setInputValue(e.target.value)}
-                        onKeyDown={handleKeyDown}
-                        placeholder={resolvedPlaceholder}
-                        disabled={isSending}
-                        rows={2}
-                        className="flex-1 py-2.5 px-3 text-sm border border-border bg-background text-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring rounded-md resize-none overflow-hidden"
-                        style={{ minHeight: '60px', maxHeight: '200px' }}
-                    />
-                    <Button
-                        onClick={startWorkflowWithMessage}
-                        disabled={!inputValue.trim() || isSending}
-                        className="px-3 py-2.5 text-xs rounded-md transition-colors"
-                    >
-                        {isSending ? (
-                            <Spinner size="sm" className="mr-1.5" />
-                        ) : (
-                            <SendIcon className="size-3.5 mr-1.5" />
-                        )}
-                        {resolvedStartButtonText}
-                    </Button>
-                </div>
-                <div className="text-xs text-muted mt-2 text-center">
-                    {stagedFiles.length > 0
-                        ? t('agent.filesStagedCount', { count: stagedFiles.length })
-                        : t('agent.enterToSend')}
                 </div>
             </div>
         </div>
-        </div>
     );
 }
 
@@ -677,6 +952,7 @@ function ModernAgentConversationInner({
     onRestart,
     onClone,
     onShowDetails,
+    allowWorkflowControl = true,
     // File upload props (onFilesSelected handled internally by handleFileUpload)
     uploadedFiles,
     onRemoveFile,
@@ -690,7 +966,9 @@ function ModernAgentConversationInner({
     hideObjectLinking,
     // Section visibility
     hideHeader,
+    headerVariant = 'full',
     hideMessageInput,
+    failedAction,
     hidePlanPanel,
     hideWorkstreamTabs,
     showRightPanel: showRightPanelProp = true,
@@ -741,16 +1019,21 @@ function ModernAgentConversationInner({
     StoreLinkComponent,
     CollectionLinkComponent,
     prependFriendlyMessage,
+    initialRequestData,
+    initialRequestSchema,
+    initialRequestTitle,
+    initialRequestTemplate,
     payloadContent,
     conversationContent,
     conversationTab = false,
+    pendingStartMessage,
+    pendingStartTimestamp,
+    enablePlayback,
+    showPlaybackToggle = true,
 }: ModernAgentConversationProps & { agentRunId: string }) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
     const toast = useToast();
-    const instanceIdRef = useRef(
-        `mac-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`
-    );
 
     // ────────────────────────────────────────────
     // Extracted hooks
@@ -762,6 +1045,7 @@ function ModernAgentConversationInner({
         debugChunkFlash,
         addOptimisticMessage,
         removeOptimisticMessages,
+        reconnect: reconnectStream,
         agentRunStatus,
         workflowRunId,
         serverFileUpdates,
@@ -789,11 +1073,20 @@ function ModernAgentConversationInner({
         updateDocumentTitle,
     } = useDocumentPanel(messages);
 
-    const {
-        processingFiles,
-        hasProcessingFiles,
-        handleFileUpload,
-    } = useFileProcessing(client, agentRunId, serverFileUpdates, toast);
+    const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile } = useFileProcessing(
+        client,
+        agentRunId,
+        serverFileUpdates,
+        toast,
+    );
+    const canUploadFiles = interactive && !hideFileUpload;
+
+    const handleRemoveProcessingFile = useCallback(
+        (fileId: string) => {
+            void removeProcessingFile(fileId);
+        },
+        [removeProcessingFile],
+    );
 
     // ────────────────────────────────────────────
     // Local state (UI-only concerns)
@@ -802,22 +1095,30 @@ function ModernAgentConversationInner({
     const conversationRef = useRef<HTMLDivElement | null>(null);
     const conversationLayoutRef = useRef<HTMLDivElement | null>(null);
     const [isSending, setIsSending] = useState(false);
-    const [internalViewMode, setInternalViewMode] = useState<AgentConversationViewMode>("sliding");
+    const [internalViewMode, setInternalViewMode] = useState<AgentConversationViewMode>('sliding');
     const viewMode = controlledViewMode ?? internalViewMode;
-    const handleViewModeChange = useCallback((mode: AgentConversationViewMode) => {
-        if (onViewModeChangeProp) {
-            onViewModeChangeProp(mode);
-        } else {
-            setInternalViewMode(mode);
-        }
-    }, [onViewModeChangeProp]);
+    const handleViewModeChange = useCallback(
+        (mode: AgentConversationViewMode) => {
+            if (onViewModeChangeProp) {
+                onViewModeChangeProp(mode);
+            } else {
+                setInternalViewMode(mode);
+            }
+        },
+        [onViewModeChangeProp],
+    );
     const [isStopping, setIsStopping] = useState(false);
-    const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
     const [isDragOver, setIsDragOver] = useState(false);
+    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: 'completed' | 'canceled' }>>([]);
+    const [completedWorkstreams, setCompletedWorkstreams] = useState<
+        Array<{ launch_id: string; workstream_id: string; status: WorkstreamInfo['status'] }>
+    >([]);
     const workstreamFetchFailedRef = useRef(false);
     const dragCounterRef = useRef(0);
+    const pendingPlaybackScrollRef = useRef(false);
 
     // PERFORMANCE: Refs for values used inside useCallback to avoid re-creating the callback
     const isSendingRef = useRef(isSending);
@@ -826,52 +1127,56 @@ function ModernAgentConversationInner({
     hasProcessingFilesRef.current = hasProcessingFiles;
 
     const lastMainMessage = useMemo(() => {
-        const mainMessages = messages.filter(m => (m.workstream_id || 'main') === 'main');
+        const mainMessages = messages.filter((m) => (m.workstream_id || 'main') === 'main');
         return mainMessages[mainMessages.length - 1];
     }, [messages]);
 
     // Derive effective status from AgentRun state; main workstream terminal events cover live-stream races.
     const effectiveWorkflowStatus = useMemo(() => {
-        if (lastMainMessage?.type === AgentMessageType.TERMINATED) return "TERMINATED";
-        if (
-            lastMainMessage?.type === AgentMessageType.COMPLETE &&
-            (!agentRunStatus || agentRunStatus === "RUNNING")
-        ) {
-            return "COMPLETED";
+        if (lastMainMessage?.type === AgentMessageType.TERMINATED) return 'TERMINATED';
+        if (lastMainMessage?.type === AgentMessageType.COMPLETE && (!agentRunStatus || agentRunStatus === 'RUNNING')) {
+            return 'COMPLETED';
         }
         return agentRunStatus;
     }, [lastMainMessage, agentRunStatus]);
 
     const isWorkflowTerminal = useMemo(() => {
         const normalizedStatus = effectiveWorkflowStatus?.toUpperCase();
-        return normalizedStatus === "COMPLETED"
-            || normalizedStatus === "FAILED"
-            || normalizedStatus === "CANCELED"
-            || normalizedStatus === "CANCELLED"
-            || normalizedStatus === "TERMINATED"
-            || normalizedStatus === "TIMED_OUT";
+        return (
+            normalizedStatus === 'COMPLETED' ||
+            normalizedStatus === 'FAILED' ||
+            normalizedStatus === 'CANCELED' ||
+            normalizedStatus === 'CANCELLED' ||
+            normalizedStatus === 'TERMINATED' ||
+            normalizedStatus === 'TIMED_OUT'
+        );
     }, [effectiveWorkflowStatus]);
 
-    console.debug("[ModernAgentConversation] render", {
-        agentRunId,
-        instanceId: instanceIdRef.current,
-        messageCount: messages.length,
-        activeWorkstreams: activeWorkstreams.length,
-    });
-
-    useEffect(() => {
-        console.debug("[ModernAgentConversation] mount", {
-            agentRunId,
-            instanceId: instanceIdRef.current,
-        });
+    // When a terminal conversation can be restarted (host provided a restart handler),
+    // we keep the composer visible and seamlessly resume the agent on the next message
+    // instead of forcing the user to click "Continue Conversation".
+    // FAILED runs are excluded: a failed run is a dead end, so we surface the failed box /
+    // `failedAction` (e.g. an explicit Restart button) instead of silently resuming.
+    const canContinueConversation = useMemo(
+        () => isWorkflowTerminal && effectiveWorkflowStatus?.toUpperCase() !== 'FAILED' && !!onRestart,
+        [isWorkflowTerminal, effectiveWorkflowStatus, onRestart],
+    );
+    const shouldRenderMessageInputArea = !hideMessageInput || canContinueConversation;
+
+    // A failed run is a dead end: the input box must never show, in any state. We key off
+    // both effectiveWorkflowStatus and the authoritative API status (agentRunStatus) so the
+    // loading race (status fetch vs. message stream, where `showInput` defaults to `true`)
+    // can't transiently re-show the composer once we know the run failed.
+    const isFailed = useMemo(
+        () => effectiveWorkflowStatus?.toUpperCase() === 'FAILED' || agentRunStatus?.toUpperCase() === 'FAILED',
+        [effectiveWorkflowStatus, agentRunStatus],
+    );
 
-        return () => {
-            console.debug("[ModernAgentConversation] unmount", {
-                agentRunId,
-                instanceId: instanceIdRef.current,
-            });
-        };
-    }, [agentRunId]);
+    // Read inside handleSendMessage (a stable callback) without widening its deps.
+    const isWorkflowTerminalRef = useRef(isWorkflowTerminal);
+    isWorkflowTerminalRef.current = isWorkflowTerminal;
+    const canContinueConversationRef = useRef(canContinueConversation);
+    canContinueConversationRef.current = canContinueConversation;
 
     // ────────────────────────────────────────────
     // Computed values
@@ -881,36 +1186,108 @@ function ModernAgentConversationInner({
             plan: { plan: [] },
             timestamp: 0,
         };
-        const currentWorkstreamStatus =
-            workstreamStatusMap.get(currentPlanData.timestamp) || new Map();
+        const currentWorkstreamStatus = workstreamStatusMap.get(currentPlanData.timestamp) || new Map();
         return {
             plan: currentPlanData.plan,
             workstreamStatus: currentWorkstreamStatus,
         };
     }, [plans, activePlanIndex, workstreamStatusMap]);
 
+    const messageDerivedActiveWorkstreams = useMemo(() => deriveActiveWorkstreamsFromMessages(messages), [messages]);
+
     const panelWorkstreams = useMemo<WorkstreamInfo[]>(() => {
-        const running: WorkstreamInfo[] = activeWorkstreams.map((ws) => ({
-            workstream_id: ws.workstream_id,
-            launch_id: ws.launch_id,
-            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,
-        }));
-        const completed: WorkstreamInfo[] = completedWorkstreams.map((ws) => ({
-            workstream_id: ws.workstream_id,
-            launch_id: ws.launch_id,
-            elapsed_ms: 0,
-            deadline_ms: 0,
-            remaining_ms: 0,
-            status: ws.status,
-        }));
+        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]);
+    }, [activeWorkstreams, completedWorkstreams, messageDerivedActiveWorkstreams]);
+
+    const activeTaskCount = useMemo(
+        () => panelWorkstreams.filter((ws) => ws.status === 'running').length,
+        [panelWorkstreams],
+    );
+
+    const canShowPlaybackToggle = showPlaybackToggle && enablePlayback === undefined && isAgentChatPlaybackAvailable();
+    const isPlaybackEnabled = enablePlayback ?? (isAgentChatPlaybackEnabled() || isPlaybackToggleEnabled);
+    const playbackState = useMemo(
+        () => createPlaybackState(messages, playbackCursor, isPlaybackEnabled),
+        [isPlaybackEnabled, messages, playbackCursor],
+    );
+    const clampedPlaybackCursor = playbackState.cursor;
+    const isPlaybackLive = playbackState.isLive;
+    const displayedMessages = playbackState.displayedMessages;
+    const displayedStreamingMessages = isPlaybackLive ? streamingMessages : EMPTY_STREAMING_MESSAGES;
+    const effectiveIsCompleted = useMemo(() => isCompleted || !isInProgress(messages), [isCompleted, messages]);
+    const displayedIsCompleted = isPlaybackLive ? 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 handleTogglePlayback = useCallback(() => {
+        setIsPlaybackToggleEnabled((prev) => !prev);
+    }, []);
+
+    const handleChangePlaybackCursor = useCallback(
+        (nextCursor: AgentChatPlaybackCursor) => {
+            const currentIndex = getPlaybackCursorIndex(clampedPlaybackCursor, messages.length);
+            const nextIndex = getPlaybackCursorIndex(nextCursor, messages.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],
+    );
+
+    useEffect(() => {
+        if (!isPlaybackEnabled) {
+            if (playbackCursor !== 'live') setPlaybackCursor('live');
+            return;
+        }
+        if (clampedPlaybackCursor !== playbackCursor) {
+            setPlaybackCursor(clampedPlaybackCursor);
+        }
+    }, [clampedPlaybackCursor, isPlaybackEnabled, playbackCursor]);
+
+    useEffect(() => {
+        void playbackScrollRequestId;
+        if (!isPlaybackEnabled || !pendingPlaybackScrollRef.current) return;
+        pendingPlaybackScrollRef.current = false;
+        const animationFrame = window.requestAnimationFrame(() => {
+            bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        });
+        return () => window.cancelAnimationFrame(animationFrame);
+    }, [isPlaybackEnabled, playbackScrollRequestId]);
 
     // ────────────────────────────────────────────
     // Stable callbacks
@@ -918,29 +1295,36 @@ function ModernAgentConversationInner({
     const handleTogglePlanPanel = useCallback(() => {
         setShowSlidingPanel((prev: boolean) => {
             if (!prev) {
-                sessionStorage.setItem("plan-panel-shown", "true");
+                sessionStorage.setItem('plan-panel-shown', 'true');
             }
             return !prev;
         });
     }, [setShowSlidingPanel]);
 
-    const handleChangePlan = useCallback((index: number) => {
-        setActivePlanIndex(index);
-    }, [setActivePlanIndex]);
+    const handleChangePlan = useCallback(
+        (index: number) => {
+            setActivePlanIndex(index);
+        },
+        [setActivePlanIndex],
+    );
 
     // ────────────────────────────────────────────
     // Unified right panel state
     // ────────────────────────────────────────────
     type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload' | 'conversation';
-    const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>((conversationContent || conversationTab) ? 'conversation' : 'plan');
+    const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>(
+        conversationContent || conversationTab ? 'conversation' : 'plan',
+    );
     const [rightPanelWidth, setRightPanelWidth] = useState(400);
     const [isRightPanelResizing, setIsRightPanelResizing] = useState(false);
 
-    const isRightPanelVisible = showRightPanelProp && (showSlidingPanel
-        || isDocPanelOpen
-        || (!hideWorkstreamTabs && panelWorkstreams.length > 0)
-        || !!conversationContent
-        || conversationTab);
+    const isRightPanelVisible =
+        showRightPanelProp &&
+        (showSlidingPanel ||
+            isDocPanelOpen ||
+            (!hideWorkstreamTabs && panelWorkstreams.length > 0) ||
+            !!conversationContent ||
+            conversationTab);
 
     useEffect(() => {
         if (!isRightPanelVisible && isRightPanelResizing) {
@@ -982,7 +1366,7 @@ function ModernAgentConversationInner({
         };
     }, [isRightPanelResizing]);
 
-const handleCloseRightPanel = useCallback(() => {
+    const handleCloseRightPanel = useCallback(() => {
         setShowSlidingPanel(false);
         handleCloseDocPanel();
     }, [setShowSlidingPanel, handleCloseDocPanel]);
@@ -1003,7 +1387,7 @@ const handleCloseRightPanel = useCallback(() => {
                 {children}
             </a>
         ),
-        [openDocInPanel, setRightPanelTab]
+        [openDocInPanel],
     );
 
     const effectiveStoreLinkComponent = StoreLinkComponent ?? internalStoreLinkComponent;
@@ -1012,23 +1396,13 @@ const handleCloseRightPanel = useCallback(() => {
     // Effects
     // ────────────────────────────────────────────
 
-    // Show rotating thinking messages
-    useEffect(() => {
-        if (!isCompleted) {
-            const interval = setInterval(() => {
-                setThinkingMessageIndex(() =>
-                    Math.floor(Math.random() * (ThinkingMessages.length - 1)),
-                );
-            }, 4000);
-            return () => clearInterval(interval);
-        }
-    }, [isCompleted]);
-
     // Expose handleFileUpload to external callers via ref
     useEffect(() => {
-        if (fileUploadRef) fileUploadRef.current = handleFileUpload;
-        return () => { if (fileUploadRef) fileUploadRef.current = null; };
-    }, [fileUploadRef, handleFileUpload]);
+        if (fileUploadRef) fileUploadRef.current = canUploadFiles ? handleFileUpload : null;
+        return () => {
+            if (fileUploadRef) fileUploadRef.current = null;
+        };
+    }, [fileUploadRef, handleFileUpload, canUploadFiles]);
 
     // Notify parent when processingFiles changes
     useEffect(() => {
@@ -1047,7 +1421,7 @@ const handleCloseRightPanel = useCallback(() => {
 
     // Poll active workstreams from backend query for right-panel visibility and details.
     useEffect(() => {
-        const shouldPoll = !isCompleted || activeWorkstreams.length > 0;
+        const shouldPoll = !effectiveIsCompleted || activeWorkstreams.length > 0;
         if (!shouldPoll) {
             setActiveWorkstreams((prev) => (prev.length === 0 ? prev : []));
             return;
@@ -1060,166 +1434,219 @@ const handleCloseRightPanel = useCallback(() => {
                 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' ? 'canceled' : 'completed',
-                })));
+                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',
+                    })),
+                );
                 workstreamFetchFailedRef.current = false;
             } catch (error) {
                 if (isCancelled) return;
                 setActiveWorkstreams([]);
                 if (!workstreamFetchFailedRef.current) {
-                    console.warn("Failed to fetch active workstreams:", error);
+                    console.warn('Failed to fetch active workstreams:', error);
                     workstreamFetchFailedRef.current = true;
                 }
             }
         };
 
-        fetchActiveWorkstreams();
+        void fetchActiveWorkstreams();
         const pollHandle = window.setInterval(fetchActiveWorkstreams, 10000);
 
         return () => {
             isCancelled = true;
             window.clearInterval(pollHandle);
         };
-    }, [client.agents, agentRunId, isCompleted, activeWorkstreams.length]);
-
-    // Auto-switch to Workstreams tab the first time workstreams become active
-    const hasAutoSwitchedToWorkstreamsRef = useRef(false);
-    useEffect(() => {
-        if (panelWorkstreams.length > 0 && !hasAutoSwitchedToWorkstreamsRef.current) {
-            hasAutoSwitchedToWorkstreamsRef.current = true;
-            setRightPanelTab('workstreams');
-        }
-    }, [panelWorkstreams.length]);
+    }, [client.agents, agentRunId, effectiveIsCompleted, activeWorkstreams.length]);
 
     // Notify parent when input availability is determined
     useEffect(() => {
         if (messages.length === 0) return;
+        if (canContinueConversation) {
+            onShowInputChange?.(true);
+            return;
+        }
         if (!showInput) {
             onShowInputChange?.(false);
             return;
         }
-        if (effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING") {
+        if (effectiveWorkflowStatus && effectiveWorkflowStatus !== 'RUNNING') {
             onShowInputChange?.(false);
             return;
         }
         if (effectiveWorkflowStatus !== null) {
             onShowInputChange?.(true);
         }
-    }, [showInput, effectiveWorkflowStatus, messages.length, onShowInputChange]);
+    }, [showInput, effectiveWorkflowStatus, messages.length, onShowInputChange, canContinueConversation]);
 
     // ────────────────────────────────────────────
     // Handlers
     // ────────────────────────────────────────────
 
     // Send a message to the agent
-    const handleSendMessage = useCallback((message: string) => {
-        const trimmed = message.trim();
-        if (!trimmed || isSendingRef.current) return;
-
-        // Block if files are still processing
-        if (hasProcessingFilesRef.current) {
-            toast({
-                status: "warning",
-                title: t('agent.filesProcessing'),
-                description: t('agent.waitForFilesProcessing'),
-                duration: 3000,
-            });
-            return;
-        }
-
-        setIsSending(true);
-
-        const attachedDocs = getAttachedDocs?.() || [];
-        const contextMetadata = getMessageContext?.() || {};
-
-        let messageContent = trimmed;
-        if (attachedDocs.length > 0 && !/store:\S+/.test(trimmed)) {
-            const lines = attachedDocs.map((doc) => `[${doc.name}](/store/objects/${doc.id})`);
-            messageContent = [trimmed, '', 'Attachments:', ...lines].join('\n');
-        }
+    const handleSendMessage = useCallback(
+        (message: string) => {
+            const trimmed = message.trim();
+            if (!trimmed || isSendingRef.current) return;
+
+            // A terminal run only accepts input when it can be continued (restarted).
+            // handleSendMessage is also reachable from inline message actions (AllMessagesMixed),
+            // so guard here too — read-only terminal views that hide the composer must not restart.
+            if (isWorkflowTerminalRef.current && !canContinueConversationRef.current) return;
+
+            // Block if files are still processing
+            if (hasProcessingFilesRef.current) {
+                toast({
+                    status: 'warning',
+                    title: t('agent.filesProcessing'),
+                    description: t('agent.waitForFilesProcessing'),
+                    duration: 3000,
+                });
+                return;
+            }
 
-        const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            setIsSending(true);
 
-        const optimisticMessage: AgentMessage = {
-            timestamp: Date.now(),
-            workflow_run_id: agentRunId,
-            type: AgentMessageType.QUESTION,
-            message: messageContent,
-            workstream_id: "main",
-            details: { _optimistic: true, _messageId: messageId },
-        };
+            const attachedDocs = getAttachedDocs?.() || [];
+            const contextMetadata = getMessageContext?.() || {};
 
-        addOptimisticMessage(optimisticMessage);
+            let messageContent = trimmed;
+            if (attachedDocs.length > 0 && !/store:\S+/.test(trimmed)) {
+                const lines = attachedDocs.map((doc) => `[${doc.name}](/store/objects/${doc.id})`);
+                messageContent = [trimmed, '', 'Attachments:', ...lines].join('\n');
+            }
 
-        const metadata = {
-            ...(attachedDocs.length > 0 ? { attached_docs: attachedDocs.map((d) => d.id) } : {}),
-            ...contextMetadata,
-            _messageId: messageId,
-        };
+            const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
-        client.agents
-            .sendSignal(agentRunId, "UserInput", {
+            const optimisticMessage: AgentMessage = {
+                timestamp: Date.now(),
+                workflow_run_id: agentRunId,
+                type: AgentMessageType.QUESTION,
                 message: messageContent,
-                metadata,
-            } as UserInputSignal)
-            .then(() => {
-                onAttachmentsSent?.();
-            })
-            .catch((err) => {
-                removeOptimisticMessages((m) =>
-                    (m.details as any)?._messageId === messageId
-                );
-                toast({
-                    status: "error",
-                    title: t('agent.failedToSend'),
-                    description: err instanceof Error ? err.message : t('agent.unknownError'),
-                    duration: 3000,
+                workstream_id: 'main',
+                details: { _optimistic: true, _messageId: messageId },
+            };
+
+            addOptimisticMessage(optimisticMessage);
+
+            const metadata = {
+                ...(attachedDocs.length > 0 ? { attached_docs: attachedDocs.map((d) => d.id) } : {}),
+                ...contextMetadata,
+                _messageId: messageId,
+            };
+
+            const sendUserInput = () =>
+                client.agents.sendSignal(agentRunId, 'UserInput', {
+                    message: messageContent,
+                    metadata,
+                } as UserInputSignal);
+
+            // 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
+            // the stream in place (rather than remounting via onRestart) so the existing
+            // timeline is preserved and the new exchange appends seamlessly at the bottom.
+            const deliver = isWorkflowTerminalRef.current
+                ? client.agents.restart(agentRunId).then(() => {
+                      reconnectStream();
+                      return sendUserInput().then(() => {
+                          onAttachmentsSent?.();
+                      });
+                  })
+                : sendUserInput().then(() => {
+                      onAttachmentsSent?.();
+                  });
+
+            deliver
+                .catch((err) => {
+                    removeOptimisticMessages((m) => m.details?._messageId === messageId);
+                    toast({
+                        status: 'error',
+                        title: t('agent.failedToSend'),
+                        description: err instanceof Error ? err.message : t('agent.unknownError'),
+                        duration: 3000,
+                    });
+                })
+                .finally(() => {
+                    setIsSending(false);
                 });
-            })
-            .finally(() => {
-                setIsSending(false);
-            });
-    }, [agentRunId, client, toast, getAttachedDocs, getMessageContext, onAttachmentsSent, addOptimisticMessage, removeOptimisticMessages]);
+        },
+        [
+            agentRunId,
+            client,
+            toast,
+            getAttachedDocs,
+            getMessageContext,
+            onAttachmentsSent,
+            reconnectStream,
+            addOptimisticMessage,
+            removeOptimisticMessages,
+            t,
+        ],
+    );
 
     // Drag and drop handlers for full-panel file upload
-    const handleDragEnter = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounterRef.current++;
-        if (e.dataTransfer?.types?.includes('Files')) {
-            setIsDragOver(true);
-        }
-    }, []);
+    const handleDragEnter = useCallback(
+        (e: React.DragEvent) => {
+            if (!canUploadFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounterRef.current++;
+            if (e.dataTransfer?.types?.includes('Files')) {
+                setIsDragOver(true);
+            }
+        },
+        [canUploadFiles],
+    );
 
-    const handleDragOver = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
+    const handleDragOver = useCallback(
+        (e: React.DragEvent) => {
+            if (!canUploadFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+        },
+        [canUploadFiles],
+    );
 
-    const handleDragLeave = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounterRef.current--;
-        if (dragCounterRef.current === 0) {
-            setIsDragOver(false);
-        }
-    }, []);
+    const handleDragLeave = useCallback(
+        (e: React.DragEvent) => {
+            if (!canUploadFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounterRef.current--;
+            if (dragCounterRef.current === 0) {
+                setIsDragOver(false);
+            }
+        },
+        [canUploadFiles],
+    );
 
-    const handleDrop = useCallback((e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounterRef.current = 0;
-        setIsDragOver(false);
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            if (!canUploadFiles) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounterRef.current = 0;
+            setIsDragOver(false);
 
-        if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-            const filesArray = Array.from(e.dataTransfer.files);
-            handleFileUpload(filesArray);
-        }
-    }, [handleFileUpload]);
+            if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+                const filesArray = Array.from(e.dataTransfer.files);
+                void handleFileUpload(filesArray);
+            }
+        },
+        [handleFileUpload, canUploadFiles],
+    );
 
     // Stop/interrupt the active workflow
     const handleStopWorkflow = useCallback(async () => {
@@ -1227,19 +1654,19 @@ const handleCloseRightPanel = useCallback(() => {
 
         setIsStopping(true);
         try {
-            await client.agents.sendSignal(agentRunId, "Stop", {
-                message: "User requested stop",
+            await client.agents.sendSignal(agentRunId, 'Stop', {
+                message: 'User requested stop',
             });
 
             toast({
-                status: "info",
+                status: 'info',
                 title: t('agent.agentInterrupted'),
                 description: t('agent.typeNewInstructions'),
                 duration: 3000,
             });
         } catch (err) {
             toast({
-                status: "error",
+                status: 'error',
                 title: t('agent.failedToInterrupt'),
                 description: err instanceof Error ? err.message : t('agent.unknownError'),
                 duration: 3000,
@@ -1247,83 +1674,74 @@ const handleCloseRightPanel = useCallback(() => {
         } finally {
             setIsStopping(false);
         }
-    }, [isStopping, client, agentRunId, toast]);
+    }, [isStopping, client, agentRunId, toast, t]);
 
     // Expose stop handler to external callers via ref
     useEffect(() => {
-        if (stopRef) stopRef.current = !isCompleted ? handleStopWorkflow : null;
-        return () => { if (stopRef) stopRef.current = null; };
-    }, [stopRef, isCompleted, handleStopWorkflow]);
+        if (stopRef) stopRef.current = allowWorkflowControl && !effectiveIsCompleted ? handleStopWorkflow : null;
+        return () => {
+            if (stopRef) stopRef.current = null;
+        };
+    }, [stopRef, effectiveIsCompleted, handleStopWorkflow, allowWorkflowControl]);
 
     // Notify parent when stopping state changes
     useEffect(() => {
         onStoppingChange?.(isStopping);
     }, [isStopping, onStoppingChange]);
 
-    // Calculate number of active tasks for the status indicator
-    const getActiveTaskCount = (): number => {
-        if (activeWorkstreams.length > 0) {
-            return activeWorkstreams.filter((ws) => ws.status === "running").length;
-        }
-
-        if (!messages.length) return 0;
-
-        // Group messages by workstream
-        const workstreamMessages = new Map<string, AgentMessage[]>();
-
-        messages.forEach((message) => {
-            const workstreamId = getWorkstreamId(message);
-            if (workstreamId !== "main" && workstreamId !== "all") {
-                if (!workstreamMessages.has(workstreamId)) {
-                    workstreamMessages.set(workstreamId, []);
-                }
-                workstreamMessages.get(workstreamId)?.push(message);
-            }
-        });
-
-        // Count workstreams that don't have completion messages
-        let activeCount = 0;
-
-        for (const [_, msgs] of workstreamMessages.entries()) {
-            if (msgs.length > 0) {
-                const lastMessage = msgs[msgs.length - 1];
-                // If the last message isn't a completion message, the workstream is active
-                if (
-                    ![AgentMessageType.COMPLETE, AgentMessageType.IDLE].includes(
-                        lastMessage.type,
-                    )
-                ) {
-                    activeCount++;
-                }
-            }
-        }
-
-        return activeCount;
-    };
-
     const actualTitle = title || t('agent.agentConversation');
 
     // Handle downloading conversation
     const downloadConversation = async () => {
         try {
             const url = await getConversationUrl(client, agentRunId);
-            if (url) window.open(url, "_blank");
+            if (url) window.open(url, '_blank');
         } catch (err) {
-            console.error("Failed to download conversation", err);
+            console.error('Failed to download conversation', err);
             toast({
-                status: "error",
+                status: 'error',
                 title: t('agent.failedToDownload'),
                 duration: 3000,
             });
         }
     };
 
+    const exportReplayFixture = useCallback(() => {
+        const exportedAt = new Date().toISOString();
+        const streamingFrame =
+            streamingMessages.size > 0
+                ? [
+                      {
+                          cursor: 'live',
+                          streamingMessages: Array.from(streamingMessages, ([id, data]) => ({ id, ...data })),
+                      },
+                  ]
+                : undefined;
+        const fixture = {
+            metadata: {
+                title: actualTitle,
+                agent_run_id: agentRunId,
+                exported_at: exportedAt,
+                message_count: messages.length,
+            },
+            messages,
+            ...(streamingFrame ? { streamingFrames: streamingFrame } : {}),
+        };
+        const filename = `${sanitizeFilenamePart(actualTitle) || 'agent-chat'}-${sanitizeFilenamePart(agentRunId)}.json`;
+        downloadJsonFile(filename, fixture);
+        toast({
+            status: 'success',
+            title: t('agent.rewind.fixtureExported'),
+            duration: 2000,
+        });
+    }, [actualTitle, agentRunId, messages, streamingMessages, t, toast]);
+
     const [isPdfModalOpen, setIsPdfModalOpen] = useState(false);
 
     const exportConversationPdf = () => {
         if (!conversationRef.current) {
             toast({
-                status: "error",
+                status: 'error',
                 title: t('agent.pdfExportFailed'),
                 description: t('agent.noConversationContent'),
                 duration: 3000,
@@ -1336,7 +1754,7 @@ const handleCloseRightPanel = useCallback(() => {
     const handleConfirmExportPdf = () => {
         if (!conversationRef.current) {
             toast({
-                status: "error",
+                status: 'error',
                 title: t('agent.pdfExportFailed'),
                 description: t('agent.noConversationContent'),
                 duration: 3000,
@@ -1349,7 +1767,7 @@ const handleCloseRightPanel = useCallback(() => {
 
         if (!success) {
             toast({
-                status: "error",
+                status: 'error',
                 title: t('agent.pdfExportFailed'),
                 description: t('agent.unableToOpenPrint'),
                 duration: 4000,
@@ -1358,7 +1776,7 @@ const handleCloseRightPanel = useCallback(() => {
         }
 
         toast({
-            status: "success",
+            status: 'success',
             title: t('agent.pdfExportReady'),
             description: t('agent.printDialogDescription'),
             duration: 4000,
@@ -1380,74 +1798,90 @@ const handleCloseRightPanel = useCallback(() => {
     }, [messages]);
 
     // PERFORMANCE: Memoize taskLabels to prevent AllMessagesMixed re-renders
-    const taskLabels = useMemo(() =>
-        getActivePlan.plan.plan?.reduce((acc, task) => {
-            if (task.id && task.goal) acc.set(task.id.toString(), task.goal);
-            return acc;
-        }, new Map<string, string>()),
-    [getActivePlan.plan]);
+    const taskLabels = useMemo(
+        () =>
+            getActivePlan.plan.plan?.reduce((acc, task) => {
+                if (task.id && task.goal) acc.set(task.id.toString(), task.goal);
+                return acc;
+            }, new Map<string, string>()),
+        [getActivePlan.plan],
+    );
+
+    const renderConversationHeader = (variant: 'full' | 'compact') => (
+        <Header
+            title={actualTitle}
+            variant={variant}
+            isCompleted={effectiveIsCompleted}
+            isTerminal={isWorkflowTerminal}
+            onClose={onClose}
+            isModal={isModal}
+            agentRunId={agentRunId}
+            workflowRunId={workflowRunId || ''}
+            viewMode={viewMode}
+            onViewModeChange={handleViewModeChange}
+            showPlanPanel={showRightPanelProp && showSlidingPanel}
+            hasPlan={showRightPanelProp && plans.length > 0}
+            showPlanButton={showRightPanelProp && !conversationTab}
+            onTogglePlanPanel={handleTogglePlanPanel}
+            showPlaybackButton={canShowPlaybackToggle}
+            isPlaybackEnabled={isPlaybackEnabled}
+            onTogglePlayback={handleTogglePlayback}
+            onDownload={downloadConversation}
+            onExportFixture={exportReplayFixture}
+            resetWorkflow={resetWorkflow}
+            onClone={onClone}
+            onShowDetails={onShowDetails}
+            allowWorkflowControl={allowWorkflowControl}
+            onExportPdf={exportConversationPdf}
+            isReceivingChunks={debugChunkFlash}
+        />
+    );
 
     // Conversation area inner content — shared between main layout and conversationTab mode
     const conversationAreaJsx = (
         <div
             ref={conversationRef}
+            data-agent-playback-enabled={isPlaybackEnabled || undefined}
+            data-agent-playback-cursor={isPlaybackEnabled ? clampedPlaybackCursor : undefined}
+            data-agent-live-message-count={messages.length}
+            data-agent-rendered-message-count={displayedMessages.length}
             className={cn(
-                "flex flex-col min-h-0 min-w-0 border-0",
+                'flex flex-col min-h-0 min-w-0 border-0',
                 conversationTab
-                    ? "flex-1 h-full"
+                    ? 'flex-1 h-full'
                     : isRightPanelVisible
-                        ? "w-full flex-1 min-h-[50vh]"
-                        : fullWidth
-                            ? "flex-1 w-full"
-                            : `flex-1 mx-auto ${!isModal ? "max-w-4xl" : ""}`
+                      ? 'w-full flex-1 min-h-[50vh]'
+                      : fullWidth
+                        ? 'flex-1 w-full'
+                        : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`,
             )}
         >
-            {!hideHeader && (
-                <div className="flex-shrink-0">
-                    <Header
-                        title={actualTitle}
-                        isCompleted={isCompleted}
-                        isTerminal={isWorkflowTerminal}
-                        onClose={onClose}
-                        isModal={isModal}
-                        agentRunId={agentRunId}
-                        workflowRunId={workflowRunId || ''}
-                        viewMode={viewMode}
-                        onViewModeChange={handleViewModeChange}
-                        showPlanPanel={showRightPanelProp && showSlidingPanel}
-                        hasPlan={showRightPanelProp && plans.length > 0}
-                        showPlanButton={showRightPanelProp && !conversationTab}
-                        onTogglePlanPanel={handleTogglePlanPanel}
-                        onDownload={downloadConversation}
-                        resetWorkflow={resetWorkflow}
-                        onRestart={onRestart}
-                        onClone={onClone}
-                        onShowDetails={onShowDetails}
-                        onExportPdf={exportConversationPdf}
-                        isReceivingChunks={debugChunkFlash}
-                    />
+            {!hideHeader && headerVariant === 'compact' && (
+                <div className="flex flex-shrink-0 justify-end border-b border-border/60 px-2 py-1 lg:hidden">
+                    {renderConversationHeader('compact')}
                 </div>
             )}
+            {!hideHeader && headerVariant !== 'compact' && (
+                <div className="flex-shrink-0">{renderConversationHeader(headerVariant)}</div>
+            )}
 
-            {messages.length === 0 && !isCompleted ? (
-                <div className="flex-1 flex flex-col items-center justify-center h-full text-center py-6">
-                    <div className="p-5 max-w-md border border-info rounded-lg shadow-sm">
-                        <div className="flex items-center space-x-3 mb-3">
-                            <PulsatingCircle size="sm" color="blue" />
-                            <div className="text-sm text-muted font-medium">
-                                {ThinkingMessages[thinkingMessageIndex]}
-                            </div>
-                        </div>
-                        <div className="mt-4 flex justify-center">
-                            <AnimatedThinkingDots color="blue" className="mt-1" />
-                        </div>
-                    </div>
+            {isPlaybackEnabled && (
+                <div className="flex flex-shrink-0 justify-end px-2 py-1.5">
+                    <AgentChatPlaybackControls
+                        cursor={clampedPlaybackCursor}
+                        messages={messages}
+                        onChangeCursor={handleChangePlaybackCursor}
+                    />
                 </div>
+            )}
+
+            {messages.length === 0 && !effectiveIsCompleted && pendingStartMessage && pendingStartTimestamp ? (
+                <PendingStartConversation message={pendingStartMessage} startedAt={pendingStartTimestamp} />
             ) : (
                 <AllMessagesMixed
-                    messages={messages}
+                    messages={displayedMessages}
                     bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
-                    isCompleted={isCompleted}
+                    isCompleted={displayedIsCompleted}
                     plan={getActivePlan.plan}
                     workstreamStatus={getActivePlan.workstreamStatus}
                     showPlanPanel={showRightPanelProp && showSlidingPanel}
@@ -1456,9 +1890,8 @@ const handleCloseRightPanel = useCallback(() => {
                     activePlanIndex={activePlanIndex}
                     onChangePlan={handleChangePlan}
                     taskLabels={taskLabels}
-                    streamingMessages={streamingMessages}
-                    onSendMessage={handleSendMessage}
-                    thinkingMessageIndex={thinkingMessageIndex}
+                    streamingMessages={displayedStreamingMessages}
+                    onSendMessage={isPlaybackLive ? handleSendMessage : undefined}
                     messageItemClassNames={messageItemClassNames}
                     messageStyleOverrides={messageStyleOverrides}
                     toolCallGroupClassNames={toolCallGroupClassNames}
@@ -1473,48 +1906,89 @@ const handleCloseRightPanel = useCallback(() => {
                     StoreLinkComponent={effectiveStoreLinkComponent}
                     CollectionLinkComponent={CollectionLinkComponent}
                     prependFriendlyMessage={prependFriendlyMessage}
+                    initialRequestData={initialRequestData}
+                    initialRequestSchema={initialRequestSchema}
+                    initialRequestTitle={initialRequestTitle}
+                    initialRequestTemplate={initialRequestTemplate}
                     hiddenMessageTypes={hiddenMessageTypes}
+                    disableAutoScroll={!isPlaybackLive}
+                    renderRequestInputControls={isPlaybackLive && !shouldShowLiveRequestInputOverlay}
                 />
             )}
 
-            {!hideMessageInput && (
-                <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
-                    {effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING" ? (
-                        <MessageBox
-                            status={effectiveWorkflowStatus === "COMPLETED" ? 'success' : 'done'}
-                            icon={null}
-                            className="m-2"
-                        >
-                            This Workflow is {effectiveWorkflowStatus}
-                        </MessageBox>
-                    ) : showInput && (
-                        <MessageInput
-                            onSend={handleSendMessage}
-                            onStop={handleStopWorkflow}
-                            disabled={isUploading}
-                            isSending={isSending || isUploading}
-                            isStopping={isStopping}
-                            isStreaming={!isCompleted}
-                            isCompleted={isCompleted}
-                            activeTaskCount={getActiveTaskCount()}
-                            placeholder={placeholder ?? 'Type your message...'}
-                            onFilesSelected={handleFileUpload}
-                            uploadedFiles={uploadedFiles}
-                            onRemoveFile={onRemoveFile}
-                            acceptedFileTypes={acceptedFileTypes}
-                            maxFiles={maxFiles}
-                            processingFiles={processingFiles}
-                            hasProcessingFiles={hasProcessingFiles}
-                            renderDocumentSearch={renderDocumentSearch}
-                            selectedDocuments={selectedDocuments}
-                            onRemoveDocument={onRemoveDocument}
-                            hideObjectLinking={hideObjectLinking}
-                            hideFileUpload={hideFileUpload}
-                            className={inputContainerClassName}
-                            inputClassName={inputClassName}
-                        />
-                    )}
-                </div>
+            {shouldShowLiveRequestInputOverlay ? (
+                <AgentRequestInputOverlay
+                    message={pendingRequestInputMessage}
+                    onSendMessage={handleSendMessage}
+                    disabled={isUploading || !isPlaybackLive}
+                    isLoading={isSending || isUploading}
+                />
+            ) : (
+                shouldRenderLiveMessageInputArea && (
+                    <div className="flex-shrink-0 pb-safe-area">
+                        {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 ?? (
+                                <MessageBox status="error" icon={null} className="m-2">
+                                    This Workflow is FAILED
+                                </MessageBox>
+                            ))
+                        ) : effectiveWorkflowStatus &&
+                          effectiveWorkflowStatus !== 'RUNNING' &&
+                          !canContinueConversation ? (
+                            viewMode === 'sliding' && effectiveWorkflowStatus === 'COMPLETED' ? (
+                                <div className="mx-auto w-full max-w-3xl px-4 py-3 text-sm text-muted">
+                                    <div className="flex items-center gap-2 border-t border-success/25 pt-3 text-success">
+                                        <CheckCircle className="size-4" />
+                                        <span className="font-medium">Workflow completed</span>
+                                    </div>
+                                </div>
+                            ) : (
+                                <MessageBox
+                                    status={effectiveWorkflowStatus === 'COMPLETED' ? 'success' : 'done'}
+                                    icon={null}
+                                    className="m-2"
+                                >
+                                    This Workflow is {effectiveWorkflowStatus}
+                                </MessageBox>
+                            )
+                        ) : (
+                            (showInput || canContinueConversation) && (
+                                <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}
+                                />
+                            )
+                        )}
+                    </div>
+                )
             )}
         </div>
     );
@@ -1522,105 +1996,148 @@ const handleCloseRightPanel = useCallback(() => {
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
     const mainContent = (
         <ArtifactUrlCacheProvider>
-        <ImageLightboxProvider>
-        <div
-            ref={conversationLayoutRef}
-            className={cn("flex flex-col lg:flex-row gap-2 w-full h-full relative overflow-hidden", isDragOver && "ring-2 ring-blue-400 ring-inset", className)}
-            onDragEnter={handleDragEnter}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-        >
-            {/* Drag overlay for full-panel file drop */}
-            {isDragOver && (
-                <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">
-                    <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg">
-                        <UploadIcon className="size-6" />
-                        Drop files to upload
-                    </div>
-                </div>
-            )}
-            {/* Conversation Area — hidden when conversationTab moves it into the right panel */}
-            {!conversationTab && conversationAreaJsx}
-
-            {/* Unified Right Panel — Plan | Workstreams | Documents | Uploads */}
-            {isRightPanelVisible && (
-                <>
-                    {!conversationTab && (
-                        <div
-                            className="hidden lg:block lg:w-1 lg:shrink-0 cursor-col-resize bg-border/70 hover:bg-border transition-colors"
-                            onMouseDown={() => setIsRightPanelResizing(true)}
-                            role="separator"
-                            aria-orientation="vertical"
-                            aria-label="Resize right panel"
-                        />
+            <ImageLightboxProvider>
+                {/* biome-ignore lint/a11y/noStaticElementInteractions: drag/drop target only; file selection is also exposed via the upload button. */}
+                <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,
                     )}
-                    <div
-                        className={conversationTab
-                            ? "w-full h-full overflow-auto"
-                            : "w-full lg:w-[var(--agent-right-panel-width)] lg:shrink-0 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l"}
-                        style={!conversationTab ? ({ ['--agent-right-panel-width' as string]: `${rightPanelWidth}px` } as React.CSSProperties) : undefined}
-                    >
-                    <AgentRightPanel
-                        // Plan
-                        plan={getActivePlan.plan}
-                        workstreamStatus={getActivePlan.workstreamStatus}
-                        plans={plans}
-                        activePlanIndex={activePlanIndex}
-                        onChangePlan={handleChangePlan}
-                        showPlan={!hidePlanPanel && showSlidingPanel}
-                        // Workstreams
-                        activeWorkstreams={panelWorkstreams}
-                        hideWorkstreams={hideWorkstreamTabs}
-                        // Documents
-                        openDocuments={openDocuments}
-                        activeDocumentId={activeDocumentId}
-                        onSelectDocument={selectDocument}
-                        onCloseDocument={handleCloseDocument}
-                        onUpdateDocumentTitle={updateDocumentTitle}
-                        docRefreshKey={docRefreshKey}
-                        runId={agentRunId}
-                        // Uploads
-                        processingFiles={processingFilesProp ?? processingFiles}
-                        // Artifacts
-                        showArtifacts={showArtifacts}
-                        artifactRefreshKey={artifactRefreshKey}
-                        // Messages (for workstreams tab context)
-                        messages={messages}
-                        // Payload content
-                        payloadContent={payloadContent}
-                        // Conversation content
-                        conversationContent={conversationTab ? conversationAreaJsx : conversationContent}
-                        // Panel control
-                        onClose={handleCloseRightPanel}
-                        defaultTab={rightPanelTab}
-                        activeTab={rightPanelTab}
-                        onTabChange={setRightPanelTab}
-                    />
-                    </div>
-                </>
-            )}
-            <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
-                <ModalTitle>Export conversation as PDF</ModalTitle>
-                <ModalBody>
-                    <p className="mb-2">
-                        This will open your browser&apos;s print dialog with the current conversation.
-                    </p>
-                    <p className="text-sm text-muted">
-                        To save a PDF, choose &quot;Save as PDF&quot; or a similar option in the print dialog.
-                    </p>
-                </ModalBody>
-                <ModalFooter align="right">
-                    <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
-                        Cancel
-                    </Button>
-                    <Button size="sm" onClick={handleConfirmExportPdf}>
-                        Open print dialog
-                    </Button>
-                </ModalFooter>
-            </Modal>
-        </div>
-        </ImageLightboxProvider>
+                    onDragEnter={canUploadFiles ? handleDragEnter : undefined}
+                    onDragOver={canUploadFiles ? handleDragOver : undefined}
+                    onDragLeave={canUploadFiles ? handleDragLeave : undefined}
+                    onDrop={canUploadFiles ? handleDrop : undefined}
+                >
+                    {/* Drag overlay for full-panel file drop */}
+                    {canUploadFiles && isDragOver && (
+                        <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">
+                            <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg">
+                                <UploadIcon className="size-6" />
+                                Drop files to upload
+                            </div>
+                        </div>
+                    )}
+                    {/* Conversation Area — hidden when conversationTab moves it into the right panel */}
+                    {!conversationTab && conversationAreaJsx}
+
+                    {!conversationTab && headerVariant === 'compact' && !hideHeader && (
+                        <div className="hidden h-full w-12 shrink-0 items-start justify-center px-1 pt-2 lg:flex">
+                            {renderConversationHeader('compact')}
+                        </div>
+                    )}
+
+                    {/* Unified Right Panel — Plan | Workstreams | Documents | Uploads */}
+                    {isRightPanelVisible && (
+                        <>
+                            {!conversationTab && (
+                                // biome-ignore lint/a11y/useSemanticElements: <hr> has no semantics for a draggable resize handle; ARIA separator is the spec-recommended pattern.
+                                <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') return;
+                                        event.preventDefault();
+                                        const step = event.shiftKey ? 32 : 16;
+                                        // Right panel is anchored to the right edge — ArrowLeft grows it, ArrowRight shrinks.
+                                        const delta = event.key === 'ArrowLeft' ? step : -step;
+                                        const container = conversationLayoutRef.current;
+                                        const minRightPanelWidth = 300;
+                                        const minConversationWidth = 420;
+                                        const maxRightPanelWidth = container
+                                            ? Math.max(
+                                                  minRightPanelWidth,
+                                                  container.getBoundingClientRect().width - minConversationWidth,
+                                              )
+                                            : minRightPanelWidth + 600;
+                                        setRightPanelWidth((w) =>
+                                            Math.min(Math.max(w + delta, minRightPanelWidth), maxRightPanelWidth),
+                                        );
+                                    }}
+                                />
+                            )}
+                            <div
+                                className={
+                                    conversationTab
+                                        ? 'w-full h-full overflow-auto'
+                                        : 'w-full lg:w-[var(--agent-right-panel-width)] lg:shrink-0 min-h-[50vh] lg:h-full border-t lg:border-t-0'
+                                }
+                                style={
+                                    !conversationTab
+                                        ? ({
+                                              ['--agent-right-panel-width' as string]: `${rightPanelWidth}px`,
+                                          } as React.CSSProperties)
+                                        : undefined
+                                }
+                            >
+                                <AgentRightPanel
+                                    // Plan
+                                    plan={getActivePlan.plan}
+                                    workstreamStatus={getActivePlan.workstreamStatus}
+                                    plans={plans}
+                                    activePlanIndex={activePlanIndex}
+                                    onChangePlan={handleChangePlan}
+                                    showPlan={!hidePlanPanel && showSlidingPanel}
+                                    // Workstreams
+                                    activeWorkstreams={panelWorkstreams}
+                                    hideWorkstreams={hideWorkstreamTabs}
+                                    // Documents
+                                    openDocuments={openDocuments}
+                                    activeDocumentId={activeDocumentId}
+                                    onSelectDocument={selectDocument}
+                                    onCloseDocument={handleCloseDocument}
+                                    onUpdateDocumentTitle={updateDocumentTitle}
+                                    docRefreshKey={docRefreshKey}
+                                    runId={agentRunId}
+                                    // Uploads
+                                    processingFiles={processingFilesProp ?? processingFiles}
+                                    // Artifacts
+                                    showArtifacts={showArtifacts}
+                                    artifactRefreshKey={artifactRefreshKey}
+                                    // Messages (for workstreams tab context)
+                                    messages={messages}
+                                    // Payload content
+                                    payloadContent={payloadContent}
+                                    // Conversation content
+                                    conversationContent={conversationTab ? conversationAreaJsx : conversationContent}
+                                    // Panel control
+                                    onClose={handleCloseRightPanel}
+                                    defaultTab={rightPanelTab}
+                                    activeTab={rightPanelTab}
+                                    onTabChange={setRightPanelTab}
+                                />
+                            </div>
+                        </>
+                    )}
+                    <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
+                        <ModalTitle>Export conversation as PDF</ModalTitle>
+                        <ModalBody>
+                            <p className="mb-2">
+                                This will open your browser&apos;s print dialog with the current conversation.
+                            </p>
+                            <p className="text-sm text-muted">
+                                To save a PDF, choose &quot;Save as PDF&quot; or a similar option in the print dialog.
+                            </p>
+                        </ModalBody>
+                        <ModalFooter align="right">
+                            <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
+                                Cancel
+                            </Button>
+                            <Button size="sm" onClick={handleConfirmExportPdf}>
+                                Open print dialog
+                            </Button>
+                        </ModalFooter>
+                    </Modal>
+                </div>
+            </ImageLightboxProvider>
         </ArtifactUrlCacheProvider>
     );