@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0

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

@@ -1,10 +1,11 @@
 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 { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
 import {
+    ActiveWorkstreamEntry,
     AgentMessage,
     AgentMessageType,
+    AgentRun,
     ConversationFile,
     ConversationFileRef,
     Plan,
@@ -23,13 +24,13 @@ import { ImageLightboxProvider } from "./ImageLightbox";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
 import Header from "./ModernAgentOutput/Header";
 import MessageInput, { UploadedFile, SelectedDocument } from "./ModernAgentOutput/MessageInput";
-import { getWorkstreamId } from "./ModernAgentOutput/utils";
+import { getConversationUrl, getWorkstreamId } from "./ModernAgentOutput/utils";
 import { ThinkingMessages } from "./WaitingMessages";
-import InlineSlidingPlanPanel from "./ModernAgentOutput/InlineSlidingPlanPanel";
 import { SkillWidgetProvider } from "./SkillWidgetProvider";
 import { ArtifactUrlCacheProvider } from "./useArtifactUrlCache.js";
+import { useUITranslation } from "../../../i18n/index.js";
 import { VegaLiteChart } from "./VegaLiteChart";
-import { DocumentPanel } from "./DocumentPanel.js";
+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";
@@ -37,7 +38,7 @@ import { useFileProcessing } from "./hooks/useFileProcessing.js";
 
 export type StartWorkflowFn = (
     initialMessage?: string,
-) => Promise<{ run_id: string; workflow_id: string } | undefined>;
+) => Promise<{ agent_run_id: string } | undefined>;
 
 function printElementToPdf(sourceElement: HTMLElement, title: string): boolean {
     if (typeof window === "undefined" || typeof document === "undefined") {
@@ -84,7 +85,8 @@ function printElementToPdf(sourceElement: HTMLElement, title: string): boolean {
 }
 
 interface ModernAgentConversationProps {
-    run?: AsyncExecutionResult | { workflow_id: string; run_id: string };
+    /** Stable AgentRun ID — the primary identifier for all runtime operations. */
+    agentRunId?: string;
     title?: string;
     interactive?: boolean;
     onClose?: () => void;
@@ -96,6 +98,12 @@ interface ModernAgentConversationProps {
     placeholder?: string;
     hideUserInput?: boolean;
     resetWorkflow?: () => void;
+    /** Called after a restart succeeds — receives the new AgentRun for navigation */
+    onRestart?: (newRun: AgentRun) => void;
+    /** Called after a fork succeeds — receives the new AgentRun for navigation */
+    onFork?: (newRun: AgentRun) => void;
+    /** Called to show run details/internals modal */
+    onShowDetails?: () => void;
 
     // File upload props - passed through to MessageInput
     /** Called when files are dropped/pasted/selected */
@@ -113,6 +121,8 @@ interface ModernAgentConversationProps {
     fileUploadRef?: React.MutableRefObject<((files: File[]) => void) | null>;
     /** Called when processingFiles state changes (for external progress display) */
     onProcessingFilesChange?: (files: Map<string, ConversationFile>) => void;
+    /** Processing files to display in the right panel Uploads tab */
+    processingFiles?: Map<string, ConversationFile>;
     /** 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) */
@@ -151,8 +161,12 @@ interface ModernAgentConversationProps {
     hidePlanPanel?: boolean;
     /** Hide workstream tabs */
     hideWorkstreamTabs?: boolean;
+    /** Enable or disable the internal right panel (plan/workstreams/documents/uploads) */
+    showRightPanel?: boolean;
     /** Hide the default file upload */
     hideFileUpload?: boolean;
+    /** Show the Artifacts tab in the right panel (default false) */
+    showArtifacts?: boolean;
     /** Hide the document preview panel that auto-opens on create_document */
     hideDocumentPanel?: boolean;
 
@@ -206,29 +220,28 @@ interface ModernAgentConversationProps {
      * @example { fundName: "Tech Growth IV", vintage: 2024, totalCommitments: 500000000 }
      */
     fusionData?: Record<string, unknown>;
+
+    /** Optional payload content to show as a "Payload" tab in the right panel */
+    payloadContent?: React.ReactNode;
+    /** Optional conversation content to show as a "Conversation" tab in the right panel */
+    conversationContent?: React.ReactNode;
+    /** When true, renders the conversation inside the right panel as a "Conversation" tab */
+    conversationTab?: boolean;
 }
 
 export function ModernAgentConversation(
     props: ModernAgentConversationProps,
 ) {
-    const { run, startWorkflow } = props;
-
-    if (run) {
-        // If we have a run, convert it to AsyncExecutionResult format if needed
-        const execRun: AsyncExecutionResult =
-            "runId" in run
-                ? run
-                : {
-                    runId: run.run_id,
-                    workflowId: run.workflow_id,
-                };
+    const { agentRunId, startWorkflow } = props;
+
+    if (agentRunId) {
         return (
             <SkillWidgetProvider>
-                <ModernAgentConversationInner {...props} run={execRun} />
+                <ModernAgentConversationInner {...props} agentRunId={agentRunId} />
             </SkillWidgetProvider>
         );
     } else if (startWorkflow) {
-        // If we have startWorkflow capability but no run yet
+        // If we have startWorkflow capability but no agentRunId yet
         return <StartWorkflowView {...props} />;
     } else {
         // Empty state
@@ -238,16 +251,17 @@ export function ModernAgentConversation(
 
 // Empty state when no agent is running
 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">
-                No agent currently running
+                {t('agent.noAgentRunning')}
             </div>
             <div className="mt-3 text-sm text-muted">
-                Select an interaction and click Start to start an agent
+                {t('agent.selectInteraction')}
             </div>
         </MessageBox>
     );
@@ -261,20 +275,24 @@ function StartWorkflowView({
     onClose,
     isModal = false,
     fullWidth = false,
-    placeholder = "Type your message...",
-    startButtonText = "Start Agent",
-    title = "Start New Conversation",
+    placeholder,
+    startButtonText,
+    title,
     // Attachment callback - used to include existing document attachments in the first message
     getAttachedDocs,
     onAttachmentsSent,
     // File upload props
-    acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp",
+    acceptedFileTypes,
     maxFiles = 5,
 }: 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 [isSending, setIsSending] = useState(false);
-    const [run, setRun] = useState<AsyncExecutionResult>();
+    const [startedAgentRunId, setStartedAgentRunId] = useState<string | null>(null);
     const toast = useToast();
     const inputRef = useRef<HTMLTextAreaElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
@@ -361,7 +379,7 @@ function StartWorkflowView({
             sessionStorage.removeItem("plan-panel-shown");
 
             toast({
-                title: stagedFiles.length > 0 ? "Starting agent and uploading files..." : "Starting agent...",
+                title: stagedFiles.length > 0 ? t('agent.startingAgentUploading') : t('agent.startingAgent'),
                 status: "info",
                 duration: 3000,
             });
@@ -388,18 +406,19 @@ function StartWorkflowView({
 
             const newRun = await startWorkflow(messageContent);
             if (newRun) {
-                // Upload staged files to the new run's artifact space and signal workflow
+                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) {
                     for (const file of stagedFiles) {
                         try {
                             const artifactPath = `files/${file.name}`;
-                            await client.files.uploadArtifact(newRun.run_id, artifactPath, file);
+                            await client.agents.uploadArtifact(agentId, artifactPath, file);
 
-                            // Signal workflow that file was uploaded
-                            await client.store.workflows.sendSignal(
-                                newRun.workflow_id,
-                                newRun.run_id,
+                            // Signal agent that file was uploaded
+                            await client.agents.sendSignal(
+                                agentId,
                                 "FileUploaded",
                                 {
                                     id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
@@ -419,9 +438,8 @@ function StartWorkflowView({
                     // Send a follow-up message to notify the agent that all files are ready
                     if (uploadedFiles.length > 0) {
                         try {
-                            await client.store.workflows.sendSignal(
-                                newRun.workflow_id,
-                                newRun.run_id,
+                            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.`,
@@ -441,23 +459,20 @@ function StartWorkflowView({
 
                 // Clear attachments after successful start
                 onAttachmentsSent?.();
-                setRun({
-                    runId: newRun.run_id,
-                    workflowId: newRun.workflow_id,
-                });
+                setStartedAgentRunId(agentId);
                 setInputValue("");
                 toast({
-                    title: "Agent started",
+                    title: t('agent.agentStarted'),
                     status: "success",
                     duration: 3000,
                 });
             }
         } catch (err: any) {
             toast({
-                title: "Error starting workflow",
+                title: t('agent.errorStarting'),
                 status: "error",
                 duration: 3000,
-                description: err instanceof Error ? err.message : "Unknown error",
+                description: err instanceof Error ? err.message : t('agent.unknownError'),
             });
         } finally {
             setIsSending(false);
@@ -486,102 +501,95 @@ function StartWorkflowView({
     }, [inputValue, adjustTextareaHeight]);
 
     // If a run has been started, show the conversation
-    if (run) {
+    if (startedAgentRunId) {
         return (
             <ModernAgentConversationInner
                 {...{ onClose, isModal, initialMessage, placeholder }}
-                run={run}
+                agentRunId={startedAgentRunId}
                 title={title}
             />
         );
     }
 
     return (
-        <div
-            className={`flex flex-col h-full bg-white dark:bg-gray-900 overflow-hidden border-0 relative ${isDragOver ? 'ring-2 ring-blue-400 ring-inset' : ''}`}
-            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 stage for upload
-                    </div>
-                </div>
-            )}
-
-            {/* Hidden file input */}
-            <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-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
-                <div className="flex items-center space-x-2">
-                    <div className="p-1">
-                        <Cpu className="size-3.5 text-muted" />
-                    </div>
-                    <span className="font-medium text-sm text-gray-700 dark:text-gray-300">
-                        {title}
-                    </span>
-                </div>
-
-                {/* Close button if needed */}
-                {onClose && !isModal && (
-                    <Button
-                        size="xs"
-                        variant="ghost"
-                        onClick={onClose}
-                        title="Close"
-                        className="text-slate-500 hover:text-slate-700"
-                    >
-                        <XIcon className="size-4" />
-                    </Button>
-                )}
-            </div>
-
-            {/* Empty conversation area with instructions */}
+        <div className="flex flex-col h-full bg-background items-center">
             <div
-                className={`flex-1 overflow-y-auto px-4 py-6 bg-white dark:bg-gray-900 flex flex-col ${
-                    fullWidth ? 'items-start justify-start' : 'items-center justify-center'
-                }`}
+                className={cn(
+                    "flex flex-col h-full w-full overflow-hidden border-0 relative",
+                    fullWidth ? "" : "max-w-4xl"
+                )}
+                onDragEnter={handleDragEnter}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
             >
-                {initialMessage && (
-                    <div
-                        className={`px-4 py-3 mb-4 bg-blue-50/80 dark:bg-blue-900/30 border-l-2 border-blue-400 dark:border-blue-500 text-blue-700 dark:text-blue-300 ${
-                            fullWidth ? 'w-full' : 'max-w-md'
-                        }`}
-                    >
-                        {initialMessage}
+                {/* Drag overlay for full-panel file drop */}
+                {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" />
+                            Drop files to stage for upload
+                        </div>
                     </div>
                 )}
 
-                <div
-                    className={`bg-white dark:bg-slate-800 p-4 border-l-2 border-blue-400 dark:border-blue-500 ${
-                        fullWidth ? 'w-full' : 'max-w-md'
-                    }`}
-                >
-                    <div className="text-base text-slate-600 dark:text-slate-300 font-medium">
-                        Enter a message to start a conversation
+                {/* Hidden file input */}
+                <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" />
+                        </div>
+                        <span className="font-medium text-sm text-foreground">
+                            {resolvedTitle}
+                        </span>
                     </div>
-                    <div className="mt-3 text-sm text-slate-500 dark:text-slate-400">
-                        Type your question below and press Enter or click {startButtonText}{" "}
-                        to begin
+
+                    {/* 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>
+                    )}
+                </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}
+                            </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 })}
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            {/* Input Area */}
-            <div className="py-3 px-3 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
+                {/* 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">
@@ -592,7 +600,7 @@ function StartWorkflowView({
                             >
                                 <FileTextIcon className="size-3.5" />
                                 <span className="max-w-[120px] truncate">{file.name}</span>
-                                <span className="text-xs opacity-70">Staged</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"
@@ -614,57 +622,59 @@ function StartWorkflowView({
                         className="text-xs"
                     >
                         <UploadIcon className="size-3.5 mr-1.5" />
-                        Upload
+                        {t('agent.upload')}
                     </Button>
                 </div>
 
                 <div className="flex items-end gap-2">
-                    <div className="flex-1">
-                        <textarea
-                            ref={inputRef}
-                            value={inputValue}
-                            onChange={(e) => setInputValue(e.target.value)}
-                            onKeyDown={handleKeyDown}
-                            placeholder={placeholder}
-                            disabled={isSending}
-                            rows={2}
-                            className="w-full py-2.5 px-3 text-sm border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-gray-300 dark:focus:border-gray-600 focus:outline-none focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-600 rounded-md resize-none overflow-hidden"
-                            style={{ minHeight: '60px', maxHeight: '200px' }}
-                        />
-                    </div>
+                    <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 bg-gray-800 dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white text-xs rounded-md transition-colors"
+                        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" />
                         )}
-                        {startButtonText}
+                        {resolvedStartButtonText}
                     </Button>
                 </div>
-                <div className="text-xs text-gray-400 dark:text-gray-500 mt-2 text-center">
+                <div className="text-xs text-muted mt-2 text-center">
                     {stagedFiles.length > 0
-                        ? `${stagedFiles.length} file${stagedFiles.length > 1 ? 's' : ''} staged - will upload when conversation starts`
-                        : 'Enter to send • Shift+Enter for new line'}
+                        ? t('agent.filesStagedCount', { count: stagedFiles.length })
+                        : t('agent.enterToSend')}
                 </div>
             </div>
         </div>
+        </div>
     );
 }
 
 // Inner component that handles the agent conversation - similar to ModernAgentOutput
 function ModernAgentConversationInner({
-    run,
+    agentRunId,
     title,
     interactive = true,
     onClose,
     isModal = false,
     fullWidth = false,
-    placeholder = "Type your message...",
+    placeholder,
     resetWorkflow,
+    onRestart,
+    onFork,
+    onShowDetails,
     // File upload props (onFilesSelected handled internally by handleFileUpload)
     uploadedFiles,
     onRemoveFile,
@@ -681,8 +691,10 @@ function ModernAgentConversationInner({
     hideMessageInput,
     hidePlanPanel,
     hideWorkstreamTabs,
+    showRightPanel: showRightPanelProp = true,
     hideFileUpload,
-    hideDocumentPanel,
+    showArtifacts = false,
+    hideDocumentPanel: _hideDocumentPanel,
     // Attachment callback
     getAttachedDocs,
     onAttachmentsSent,
@@ -699,6 +711,7 @@ function ModernAgentConversationInner({
     // External file upload API
     fileUploadRef,
     onProcessingFilesChange,
+    processingFiles: processingFilesProp,
     // External plan panel API
     onPlansChange,
     onWorkstreamStatusChange,
@@ -725,9 +738,16 @@ function ModernAgentConversationInner({
     StoreLinkComponent,
     CollectionLinkComponent,
     prependFriendlyMessage,
-}: ModernAgentConversationProps & { run: AsyncExecutionResult }) {
+    payloadContent,
+    conversationContent,
+    conversationTab = false,
+}: 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
@@ -741,7 +761,7 @@ function ModernAgentConversationInner({
         removeOptimisticMessages,
         workflowStatus,
         serverFileUpdates,
-    } = useAgentStream(client, run);
+    } = useAgentStream(client, agentRunId);
 
     const {
         plans,
@@ -768,13 +788,14 @@ function ModernAgentConversationInner({
         processingFiles,
         hasProcessingFiles,
         handleFileUpload,
-    } = useFileProcessing(client, run, serverFileUpdates, toast);
+    } = useFileProcessing(client, agentRunId, serverFileUpdates, toast);
 
     // ────────────────────────────────────────────
     // Local state (UI-only concerns)
     // ────────────────────────────────────────────
     const bottomRef = useRef<HTMLDivElement | null>(null);
     const conversationRef = useRef<HTMLDivElement | null>(null);
+    const conversationLayoutRef = useRef<HTMLDivElement | null>(null);
     const [isSending, setIsSending] = useState(false);
     const [internalViewMode, setInternalViewMode] = useState<AgentConversationViewMode>("sliding");
     const viewMode = controlledViewMode ?? internalViewMode;
@@ -788,6 +809,8 @@ function ModernAgentConversationInner({
     const [isStopping, setIsStopping] = useState(false);
     const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
     const [isDragOver, setIsDragOver] = useState(false);
+    const [activeWorkstreams, setActiveWorkstreams] = useState<ActiveWorkstreamEntry[]>([]);
+    const workstreamFetchFailedRef = useRef(false);
     const dragCounterRef = useRef(0);
 
     // PERFORMANCE: Refs for values used inside useCallback to avoid re-creating the callback
@@ -796,13 +819,35 @@ function ModernAgentConversationInner({
     const hasProcessingFilesRef = useRef(hasProcessingFiles);
     hasProcessingFilesRef.current = hasProcessingFiles;
 
-    // Derive effective workflow status (API status + TERMINATED from messages)
+    // Derive effective workflow status — only main workstream TERMINATED overrides API status.
     const effectiveWorkflowStatus = useMemo(() => {
-        const lastMsg = messages[messages.length - 1];
-        if (lastMsg?.type === AgentMessageType.TERMINATED) return "TERMINATED";
+        const mainMessages = messages.filter(m => (m.workstream_id || 'main') === 'main');
+        const lastMain = mainMessages[mainMessages.length - 1];
+        if (lastMain?.type === AgentMessageType.TERMINATED) return "TERMINATED";
         return workflowStatus;
     }, [messages, workflowStatus]);
 
+    console.debug("[ModernAgentConversation] render", {
+        agentRunId,
+        instanceId: instanceIdRef.current,
+        messageCount: messages.length,
+        activeWorkstreams: activeWorkstreams.length,
+    });
+
+    useEffect(() => {
+        console.debug("[ModernAgentConversation] mount", {
+            agentRunId,
+            instanceId: instanceIdRef.current,
+        });
+
+        return () => {
+            console.debug("[ModernAgentConversation] unmount", {
+                agentRunId,
+                instanceId: instanceIdRef.current,
+            });
+        };
+    }, [agentRunId]);
+
     // ────────────────────────────────────────────
     // Computed values
     // ────────────────────────────────────────────
@@ -819,6 +864,20 @@ function ModernAgentConversationInner({
         };
     }, [plans, activePlanIndex, workstreamStatusMap]);
 
+    const panelWorkstreams = useMemo<WorkstreamInfo[]>(() => {
+        return 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,
+        }));
+    }, [activeWorkstreams]);
+
     // ────────────────────────────────────────────
     // Stable callbacks
     // ────────────────────────────────────────────
@@ -835,19 +894,79 @@ function ModernAgentConversationInner({
         setActivePlanIndex(index);
     }, [setActivePlanIndex]);
 
-    const handleClosePlanPanel = useCallback(() => {
+    // ────────────────────────────────────────────
+    // Unified right panel state
+    // ────────────────────────────────────────────
+    type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'conversation';
+    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);
+
+    useEffect(() => {
+        if (!isRightPanelVisible && isRightPanelResizing) {
+            setIsRightPanelResizing(false);
+        }
+    }, [isRightPanelVisible, isRightPanelResizing]);
+
+    useEffect(() => {
+        if (!isRightPanelResizing) return;
+
+        const minRightPanelWidth = 300;
+        const minConversationWidth = 420;
+
+        const handleMouseMove = (event: MouseEvent) => {
+            const container = conversationLayoutRef.current;
+            if (!container) return;
+
+            const containerRect = container.getBoundingClientRect();
+            const maxRightPanelWidth = Math.max(minRightPanelWidth, containerRect.width - minConversationWidth);
+            const nextWidth = containerRect.right - event.clientX;
+            const clampedWidth = Math.min(Math.max(nextWidth, minRightPanelWidth), maxRightPanelWidth);
+            setRightPanelWidth(clampedWidth);
+        };
+
+        const handleMouseUp = () => {
+            setIsRightPanelResizing(false);
+        };
+
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [isRightPanelResizing]);
+
+const handleCloseRightPanel = useCallback(() => {
         setShowSlidingPanel(false);
-    }, [setShowSlidingPanel]);
+        handleCloseDocPanel();
+    }, [setShowSlidingPanel, handleCloseDocPanel]);
 
     // Default StoreLinkComponent that opens documents in the panel
     const internalStoreLinkComponent = useCallback(
-        ({ documentId, children }: { href: string; documentId: string; children: React.ReactNode }) => (
-            <button
+        ({ href, documentId, children }: { href: string; documentId: string; children: React.ReactNode }) => (
+            <a
+                href={href}
                 className="text-info underline cursor-pointer hover:text-info/80"
-                onClick={() => openDocInPanel(documentId)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openDocInPanel(documentId);
+                }}
             >
                 {children}
-            </button>
+            </a>
         ),
         [openDocInPanel]
     );
@@ -891,6 +1010,41 @@ function ModernAgentConversationInner({
         onWorkstreamStatusChange?.(workstreamStatusMap);
     }, [workstreamStatusMap, onWorkstreamStatusChange]);
 
+    // Poll active workstreams from backend query for right-panel visibility and details.
+    useEffect(() => {
+        const shouldPoll = !isCompleted || activeWorkstreams.length > 0;
+        if (!shouldPoll) {
+            setActiveWorkstreams((prev) => (prev.length === 0 ? prev : []));
+            return;
+        }
+
+        let isCancelled = false;
+
+        const fetchActiveWorkstreams = async () => {
+            try {
+                const result = await client.agents.getActiveWorkstreams(agentRunId);
+                if (isCancelled) return;
+                setActiveWorkstreams(result.running ?? []);
+                workstreamFetchFailedRef.current = false;
+            } catch (error) {
+                if (isCancelled) return;
+                setActiveWorkstreams([]);
+                if (!workstreamFetchFailedRef.current) {
+                    console.warn("Failed to fetch active workstreams:", error);
+                    workstreamFetchFailedRef.current = true;
+                }
+            }
+        };
+
+        fetchActiveWorkstreams();
+        const pollHandle = window.setInterval(fetchActiveWorkstreams, 10000);
+
+        return () => {
+            isCancelled = true;
+            window.clearInterval(pollHandle);
+        };
+    }, [client.agents, agentRunId, isCompleted, activeWorkstreams.length]);
+
     // Notify parent when input availability is determined
     useEffect(() => {
         if (messages.length === 0) return;
@@ -920,8 +1074,8 @@ function ModernAgentConversationInner({
         if (hasProcessingFilesRef.current) {
             toast({
                 status: "warning",
-                title: "Files Still Processing",
-                description: "Please wait for all files to finish processing before sending",
+                title: t('agent.filesProcessing'),
+                description: t('agent.waitForFilesProcessing'),
                 duration: 3000,
             });
             return;
@@ -942,7 +1096,7 @@ function ModernAgentConversationInner({
 
         const optimisticMessage: AgentMessage = {
             timestamp: Date.now(),
-            workflow_run_id: run.runId,
+            workflow_run_id: agentRunId,
             type: AgentMessageType.QUESTION,
             message: messageContent,
             workstream_id: "main",
@@ -957,8 +1111,8 @@ function ModernAgentConversationInner({
             _messageId: messageId,
         };
 
-        client.store.workflows
-            .sendSignal(run.workflowId, run.runId, "UserInput", {
+        client.agents
+            .sendSignal(agentRunId, "UserInput", {
                 message: messageContent,
                 metadata,
             } as UserInputSignal)
@@ -971,25 +1125,25 @@ function ModernAgentConversationInner({
                 );
                 toast({
                     status: "error",
-                    title: "Failed to Send Message",
-                    description: err instanceof Error ? err.message : "Unknown error",
+                    title: t('agent.failedToSend'),
+                    description: err instanceof Error ? err.message : t('agent.unknownError'),
                     duration: 3000,
                 });
             })
             .finally(() => {
                 setIsSending(false);
             });
-    }, [run.runId, run.workflowId, client, toast, getAttachedDocs, getMessageContext, onAttachmentsSent, addOptimisticMessage, removeOptimisticMessages]);
+    }, [agentRunId, client, toast, getAttachedDocs, getMessageContext, onAttachmentsSent, addOptimisticMessage, removeOptimisticMessages]);
 
     // Drag and drop handlers for full-panel file upload
     const handleDragEnter = useCallback((e: React.DragEvent) => {
         e.preventDefault();
         e.stopPropagation();
         dragCounterRef.current++;
-        if (run && e.dataTransfer?.types?.includes('Files')) {
+        if (e.dataTransfer?.types?.includes('Files')) {
             setIsDragOver(true);
         }
-    }, [run]);
+    }, []);
 
     const handleDragOver = useCallback((e: React.DragEvent) => {
         e.preventDefault();
@@ -1011,11 +1165,11 @@ function ModernAgentConversationInner({
         dragCounterRef.current = 0;
         setIsDragOver(false);
 
-        if (run && e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
             const filesArray = Array.from(e.dataTransfer.files);
             handleFileUpload(filesArray);
         }
-    }, [run, handleFileUpload]);
+    }, [handleFileUpload]);
 
     // Stop/interrupt the active workflow
     const handleStopWorkflow = useCallback(async () => {
@@ -1023,27 +1177,27 @@ function ModernAgentConversationInner({
 
         setIsStopping(true);
         try {
-            await client.store.workflows.sendSignal(run.workflowId, run.runId, "Stop", {
+            await client.agents.sendSignal(agentRunId, "Stop", {
                 message: "User requested stop",
             });
 
             toast({
                 status: "info",
-                title: "Agent Interrupted",
-                description: "Type your message to give new instructions",
+                title: t('agent.agentInterrupted'),
+                description: t('agent.typeNewInstructions'),
                 duration: 3000,
             });
         } catch (err) {
             toast({
                 status: "error",
-                title: "Failed to Interrupt",
-                description: err instanceof Error ? err.message : "Unknown error",
+                title: t('agent.failedToInterrupt'),
+                description: err instanceof Error ? err.message : t('agent.unknownError'),
                 duration: 3000,
             });
         } finally {
             setIsStopping(false);
         }
-    }, [isStopping, client, run.workflowId, run.runId, toast]);
+    }, [isStopping, client, agentRunId, toast]);
 
     // Expose stop handler to external callers via ref
     useEffect(() => {
@@ -1058,6 +1212,10 @@ function ModernAgentConversationInner({
 
     // 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
@@ -1069,7 +1227,7 @@ function ModernAgentConversationInner({
                 if (!workstreamMessages.has(workstreamId)) {
                     workstreamMessages.set(workstreamId, []);
                 }
-                workstreamMessages.get(workstreamId)!.push(message);
+                workstreamMessages.get(workstreamId)?.push(message);
             }
         });
 
@@ -1093,19 +1251,18 @@ function ModernAgentConversationInner({
         return activeCount;
     };
 
-    const actualTitle =
-        title || run.workflowId.split(":")[2] || "Agent Conversation";
+    const actualTitle = title || t('agent.agentConversation');
 
     // Handle downloading conversation
     const downloadConversation = async () => {
         try {
-            const url = await getConversationUrl(client, run.runId);
+            const url = await getConversationUrl(client, agentRunId);
             if (url) window.open(url, "_blank");
         } catch (err) {
             console.error("Failed to download conversation", err);
             toast({
                 status: "error",
-                title: "Failed to download conversation",
+                title: t('agent.failedToDownload'),
                 duration: 3000,
             });
         }
@@ -1113,10 +1270,10 @@ function ModernAgentConversationInner({
 
     // Handle copying run ID
     const copyRunId = () => {
-        navigator.clipboard.writeText(run.runId);
+        navigator.clipboard.writeText(agentRunId);
         toast({
             status: "success",
-            title: "Run ID copied",
+            title: t('agent.runIdCopied'),
             duration: 2000,
         });
     };
@@ -1127,8 +1284,8 @@ function ModernAgentConversationInner({
         if (!conversationRef.current) {
             toast({
                 status: "error",
-                title: "PDF export failed",
-                description: "No conversation content available to export",
+                title: t('agent.pdfExportFailed'),
+                description: t('agent.noConversationContent'),
                 duration: 3000,
             });
             return;
@@ -1140,21 +1297,21 @@ function ModernAgentConversationInner({
         if (!conversationRef.current) {
             toast({
                 status: "error",
-                title: "PDF export failed",
-                description: "No conversation content available to export",
+                title: t('agent.pdfExportFailed'),
+                description: t('agent.noConversationContent'),
                 duration: 3000,
             });
             return;
         }
 
-        const pdfTitle = `${actualTitle} - ${run.runId}`;
+        const pdfTitle = `${actualTitle} - ${agentRunId}`;
         const success = printElementToPdf(conversationRef.current, pdfTitle);
 
         if (!success) {
             toast({
                 status: "error",
-                title: "PDF export failed",
-                description: "Unable to open print preview",
+                title: t('agent.pdfExportFailed'),
+                description: t('agent.unableToOpenPrint'),
                 duration: 4000,
             });
             return;
@@ -1162,13 +1319,26 @@ function ModernAgentConversationInner({
 
         toast({
             status: "success",
-            title: "PDF export ready",
-            description: "Use your browser's Print dialog to save as PDF",
+            title: t('agent.pdfExportReady'),
+            description: t('agent.printDialogDescription'),
             duration: 4000,
         });
         setIsPdfModalOpen(false);
     };
 
+    // Artifact refresh key — bumps when tool calls complete or conversation finishes,
+    // which is when new artifacts are most likely to appear.
+    const artifactRefreshKey = useMemo(() => {
+        return messages.filter((m) => {
+            if (m.type === AgentMessageType.COMPLETE) return true;
+            if (m.type === AgentMessageType.THOUGHT) {
+                const details = m.details as Record<string, unknown> | undefined;
+                return details?.tool_status === 'completed';
+            }
+            return false;
+        }).length;
+    }, [messages]);
+
     // PERFORMANCE: Memoize taskLabels to prevent AllMessagesMixed re-renders
     const taskLabels = useMemo(() =>
         getActivePlan.plan.plan?.reduce((acc, task) => {
@@ -1177,12 +1347,143 @@ function ModernAgentConversationInner({
         }, new Map<string, string>()),
     [getActivePlan.plan]);
 
+    // Conversation area inner content — shared between main layout and conversationTab mode
+    const conversationAreaJsx = (
+        <div
+            ref={conversationRef}
+            className={cn(
+                "flex flex-col min-h-0 min-w-0 border-0",
+                conversationTab
+                    ? "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" : ""}`
+            )}
+        >
+            {!hideHeader && (
+                <div className="flex-shrink-0">
+                    <Header
+                        title={actualTitle}
+                        isCompleted={isCompleted}
+                        onClose={onClose}
+                        isModal={isModal}
+                        agentRunId={agentRunId}
+                        viewMode={viewMode}
+                        onViewModeChange={handleViewModeChange}
+                        showPlanPanel={showRightPanelProp && showSlidingPanel}
+                        hasPlan={showRightPanelProp && plans.length > 0}
+                        showPlanButton={showRightPanelProp && !conversationTab}
+                        onTogglePlanPanel={handleTogglePlanPanel}
+                        onDownload={downloadConversation}
+                        onCopyRunId={copyRunId}
+                        resetWorkflow={resetWorkflow}
+                        onRestart={onRestart}
+                        onFork={onFork}
+                        onShowDetails={onShowDetails}
+                        onExportPdf={exportConversationPdf}
+                        isReceivingChunks={debugChunkFlash}
+                    />
+                </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>
+                </div>
+            ) : (
+                <AllMessagesMixed
+                    messages={messages}
+                    bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
+                    isCompleted={isCompleted}
+                    plan={getActivePlan.plan}
+                    workstreamStatus={getActivePlan.workstreamStatus}
+                    showPlanPanel={showRightPanelProp && showSlidingPanel}
+                    onTogglePlanPanel={handleTogglePlanPanel}
+                    plans={plans}
+                    activePlanIndex={activePlanIndex}
+                    onChangePlan={handleChangePlan}
+                    taskLabels={taskLabels}
+                    streamingMessages={streamingMessages}
+                    onSendMessage={handleSendMessage}
+                    thinkingMessageIndex={thinkingMessageIndex}
+                    messageItemClassNames={messageItemClassNames}
+                    messageStyleOverrides={messageStyleOverrides}
+                    toolCallGroupClassNames={toolCallGroupClassNames}
+                    hideToolCallsInViewMode={hideToolCallsInViewMode}
+                    streamingMessageClassNames={streamingMessageClassNames}
+                    batchProgressPanelClassNames={batchProgressPanelClassNames}
+                    artifactRunId={agentRunId}
+                    viewMode={viewMode}
+                    hideWorkstreamTabs={hideWorkstreamTabs}
+                    workingIndicatorClassName={workingIndicatorClassName}
+                    messageListClassName={messageListClassName}
+                    StoreLinkComponent={effectiveStoreLinkComponent}
+                    CollectionLinkComponent={CollectionLinkComponent}
+                    prependFriendlyMessage={prependFriendlyMessage}
+                />
+            )}
+
+            {!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>
+            )}
+        </div>
+    );
+
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
     const mainContent = (
         <ArtifactUrlCacheProvider>
         <ImageLightboxProvider>
         <div
-            className={cn("flex flex-col lg:flex-row gap-2 h-full relative overflow-hidden", isDragOver && "ring-2 ring-blue-400 ring-inset", className)}
+            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}
@@ -1197,170 +1498,62 @@ function ModernAgentConversationInner({
                     </div>
                 </div>
             )}
-            {/* Conversation Area - responsive width based on panel visibility */}
-            <div
-                ref={conversationRef}
-                className={cn(
-                    "flex flex-col min-h-0 border-0",
-                    (showSlidingPanel || isDocPanelOpen)
-                        ? "w-full lg:w-3/5 flex-1 min-h-[50vh]"
-                        : fullWidth
-                            ? "flex-1 w-full"
-                            : `flex-1 mx-auto ${!isModal ? "max-w-4xl" : ""}`
-                )}
-            >
-                {/* Streaming activity indicator moved to Header */}
-
-                {/* Header - flex-shrink-0 to prevent shrinking */}
-                {!hideHeader && (
-                    <div className="flex-shrink-0">
-                        <Header
-                            title={actualTitle}
-                            isCompleted={isCompleted}
-                            onClose={onClose}
-                            isModal={isModal}
-                            run={run}
-                            viewMode={viewMode}
-                            onViewModeChange={handleViewModeChange}
-                            showPlanPanel={showSlidingPanel}
-                            hasPlan={plans.length > 0}
-                            onTogglePlanPanel={handleTogglePlanPanel}
-                            onDownload={downloadConversation}
-                            onCopyRunId={copyRunId}
-                            resetWorkflow={resetWorkflow}
-                            onExportPdf={exportConversationPdf}
-                            isReceivingChunks={debugChunkFlash}
+            {/* 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"
                         />
-                    </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>
-                    </div>
-                ) : (
-                    <AllMessagesMixed
-                        messages={messages}
-                        bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
-                        isCompleted={isCompleted}
-                        plan={getActivePlan.plan}
-                        workstreamStatus={getActivePlan.workstreamStatus}
-                        showPlanPanel={showSlidingPanel}
-                        onTogglePlanPanel={handleTogglePlanPanel}
-                        plans={plans}
-                        activePlanIndex={activePlanIndex}
-                        onChangePlan={handleChangePlan}
-                        taskLabels={taskLabels}
-                        streamingMessages={streamingMessages}
-                        onSendMessage={handleSendMessage}
-                        thinkingMessageIndex={thinkingMessageIndex}
-                        messageItemClassNames={messageItemClassNames}
-                        messageStyleOverrides={messageStyleOverrides}
-                        toolCallGroupClassNames={toolCallGroupClassNames}
-                        hideToolCallsInViewMode={hideToolCallsInViewMode}
-                        streamingMessageClassNames={streamingMessageClassNames}
-                        batchProgressPanelClassNames={batchProgressPanelClassNames}
-                        viewMode={viewMode}
-                        hideWorkstreamTabs={hideWorkstreamTabs}
-                        workingIndicatorClassName={workingIndicatorClassName}
-                        messageListClassName={messageListClassName}
-                        StoreLinkComponent={effectiveStoreLinkComponent}
-                        CollectionLinkComponent={CollectionLinkComponent}
-                        prependFriendlyMessage={prependFriendlyMessage}
-                    />
-                )}
-
-                {/* Show workflow status message when not running, or show input when running/unknown */}
-                {/* Input area - flex-shrink-0 to stay pinned at bottom, with iOS safe area support */}
-                {!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}
-                                // File upload props - use internal handler that signals workflow
-                                onFilesSelected={handleFileUpload}
-                                uploadedFiles={uploadedFiles}
-                                onRemoveFile={onRemoveFile}
-                                acceptedFileTypes={acceptedFileTypes}
-                                maxFiles={maxFiles}
-                                // File processing state
-                                processingFiles={processingFiles}
-                                hasProcessingFiles={hasProcessingFiles}
-                                // Document search props
-                                renderDocumentSearch={renderDocumentSearch}
-                                selectedDocuments={selectedDocuments}
-                                onRemoveDocument={onRemoveDocument}
-                                // Object linking
-                                hideObjectLinking={hideObjectLinking}
-                                // Files Uploaded
-                                hideFileUpload={hideFileUpload}
-                                // Styling props
-                                className={inputContainerClassName}
-                                inputClassName={inputClassName}
-                            />
-                        )}
-                    </div>
-                )}
-            </div>
-
-            {/* Plan Panel Area - only rendered when panel should be shown */}
-            {!hidePlanPanel && showSlidingPanel && (
-                <div className="w-full lg:w-1/3 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l">
-                    <InlineSlidingPlanPanel
+                    )}
+                    <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}
-                        isOpen={showSlidingPanel}
-                        onClose={handleClosePlanPanel}
                         plans={plans}
                         activePlanIndex={activePlanIndex}
                         onChangePlan={handleChangePlan}
-                    />
-                </div>
-            )}
-
-            {/* Document Panel Area - slides in when documents are created/edited */}
-            {!hideDocumentPanel && isDocPanelOpen && openDocuments.length > 0 && (
-                <div className={cn(
-                    "w-full lg:w-2/5 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l",
-                    showSlidingPanel && "lg:w-1/3"
-                )}>
-                    <DocumentPanel
-                        isOpen={isDocPanelOpen}
-                        onClose={handleCloseDocPanel}
-                        documents={openDocuments}
+                        showPlan={!hidePlanPanel && showSlidingPanel}
+                        // Workstreams
+                        activeWorkstreams={panelWorkstreams}
+                        hideWorkstreams={hideWorkstreamTabs}
+                        // Documents
+                        openDocuments={openDocuments}
                         activeDocumentId={activeDocumentId}
                         onSelectDocument={selectDocument}
                         onCloseDocument={handleCloseDocument}
-                        refreshKey={docRefreshKey}
-                        runId={run.runId}
+                        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}
                     />
-                </div>
+                    </div>
+                </>
             )}
             <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
                 <ModalTitle>Export conversation as PDF</ModalTitle>
@@ -1395,7 +1588,7 @@ function ModernAgentConversationInner({
                 data={fusionData}
                 sendMessage={handleSendMessage}
                 ChartComponent={VegaLiteChart}
-                artifactRunId={run.runId}
+                artifactRunId={agentRunId}
             >
                 {mainContent}
             </FusionFragmentProvider>
@@ -1404,13 +1597,3 @@ function ModernAgentConversationInner({
 
     return mainContent;
 }
-
-// Helper function to get conversation URL - used by other components
-export async function getConversationUrl(
-    vertesia: VertesiaClient,
-    workflowRunId: string,
-): Promise<string> {
-    return vertesia.files
-        .getDownloadUrl(`agents/${workflowRunId}/conversation.json`)
-        .then((r) => r.url);
-}