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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Bot, Cpu, FileTextIcon, SendIcon, UploadIcon, XIcon } from "lucide-react";
 import { useUserSession } from "@vertesia/ui/session";
@@ -10,13 +10,13 @@ import { ImageLightboxProvider } from "./ImageLightbox";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
 import Header from "./ModernAgentOutput/Header";
 import MessageInput 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 } from "./AgentRightPanel.js";
 import { useAgentStream } from "./hooks/useAgentStream.js";
 import { useAgentPlans } from "./hooks/useAgentPlans.js";
 import { useDocumentPanel } from "./hooks/useDocumentPanel.js";
@@ -58,19 +58,12 @@ function printElementToPdf(sourceElement, title) {
     return true;
 }
 export function ModernAgentConversation(props) {
-    const { run, startWorkflow } = props;
-    if (run) {
-        // If we have a run, convert it to AsyncExecutionResult format if needed
-        const execRun = "runId" in run
-            ? run
-            : {
-                runId: run.run_id,
-                workflowId: run.workflow_id,
-            };
-        return (_jsx(SkillWidgetProvider, { children: _jsx(ModernAgentConversationInner, { ...props, run: execRun }) }));
+    const { agentRunId, startWorkflow } = props;
+    if (agentRunId) {
+        return (_jsx(SkillWidgetProvider, { children: _jsx(ModernAgentConversationInner, { ...props, agentRunId: agentRunId }) }));
     }
     else if (startWorkflow) {
-        // If we have startWorkflow capability but no run yet
+        // If we have startWorkflow capability but no agentRunId yet
         return _jsx(StartWorkflowView, { ...props });
     }
     else {
@@ -80,19 +73,24 @@ export function ModernAgentConversation(props) {
 }
 // Empty state when no agent is running
 function EmptyState() {
-    return (_jsxs(MessageBox, { status: "info", icon: _jsx(Bot, { className: "size-16 text-muted mb-4" }), children: [_jsx("div", { className: "text-base font-medium text-muted", children: "No agent currently running" }), _jsx("div", { className: "mt-3 text-sm text-muted", children: "Select an interaction and click Start to start an agent" })] }));
+    const { t } = useUITranslation();
+    return (_jsxs(MessageBox, { status: "info", icon: _jsx(Bot, { className: "size-16 text-muted mb-4" }), children: [_jsx("div", { className: "text-base font-medium text-muted", children: t('agent.noAgentRunning') }), _jsx("div", { className: "mt-3 text-sm text-muted", children: t('agent.selectInteraction') })] }));
 }
 // Start workflow view - allows initiating a new agent conversation
 // Files can be staged locally before workflow starts, then uploaded when the workflow is created
-function StartWorkflowView({ initialMessage, startWorkflow, onClose, isModal = false, fullWidth = false, placeholder = "Type your message...", startButtonText = "Start Agent", title = "Start New Conversation", 
+function StartWorkflowView({ initialMessage, startWorkflow, onClose, isModal = false, fullWidth = false, placeholder, startButtonText, title, 
 // Attachment callback - used to include existing document attachments in the first message
 getAttachedDocs, onAttachmentsSent, 
 // File upload props
-acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp", maxFiles = 5, }) {
+acceptedFileTypes, maxFiles = 5, }) {
+    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("");
     const [isSending, setIsSending] = useState(false);
-    const [run, setRun] = useState();
+    const [startedAgentRunId, setStartedAgentRunId] = useState(null);
     const toast = useToast();
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
@@ -167,7 +165,7 @@ acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.
             // Reset plan panel state when starting a new agent
             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,
             });
@@ -190,15 +188,16 @@ acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.
             }
             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 = [];
                 if (stagedFiles.length > 0) {
                     for (const file of stagedFiles) {
                         try {
                             const artifactPath = `files/${file.name}`;
-                            await client.files.uploadArtifact(newRun.run_id, artifactPath, file);
-                            // Signal workflow that file was uploaded
-                            await client.store.workflows.sendSignal(newRun.workflow_id, newRun.run_id, "FileUploaded", {
+                            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',
@@ -215,7 +214,7 @@ acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.
                     // 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, "UserInput", {
+                            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',
@@ -231,13 +230,10 @@ acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.
                 }
                 // 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,
                 });
@@ -245,10 +241,10 @@ acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.
         }
         catch (err) {
             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 {
@@ -274,15 +270,15 @@ acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.
         adjustTextareaHeight();
     }, [inputValue, adjustTextareaHeight]);
     // If a run has been started, show the conversation
-    if (run) {
-        return (_jsx(ModernAgentConversationInner, { onClose, isModal, initialMessage, placeholder, run: run, title: title }));
+    if (startedAgentRunId) {
+        return (_jsx(ModernAgentConversationInner, { onClose, isModal, initialMessage, placeholder, agentRunId: startedAgentRunId, title: title }));
     }
-    return (_jsx("div", { className: "flex flex-col h-full bg-background items-center", children: _jsxs("div", { 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, children: [isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-info font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to stage for upload"] }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" }), _jsxs("div", { className: "flex items-center justify-between py-2 px-3 border-b border-border bg-background", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "font-medium text-sm text-foreground", children: title })] }), onClose && !isModal && (_jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, title: "Close", className: "text-muted hover:text-foreground", children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsx("div", { className: "flex-1 overflow-y-auto bg-background flex flex-col items-center justify-end", children: _jsxs("div", { className: "w-full px-4 py-6", children: [initialMessage && (_jsx("div", { className: "px-4 py-3 mb-4 bg-info-background border-l-2 border-info text-info", children: initialMessage })), _jsxs("div", { className: "bg-card p-4 border-l-2 border-info", children: [_jsx("div", { className: "text-base text-foreground font-medium", children: "Enter a message to start a conversation" }), _jsxs("div", { className: "mt-3 text-sm text-muted", children: ["Type your question below and press Enter or click ", startButtonText, " ", "to begin"] })] })] }) }), _jsxs("div", { className: "py-3 px-3 border-t border-border bg-background", children: [stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-attention/10 text-attention rounded-md text-sm", children: [_jsx(FileTextIcon, { className: "size-3.5" }), _jsx("span", { className: "max-w-[120px] truncate", children: file.name }), _jsx("span", { className: "text-xs opacity-70", children: "Staged" }), _jsx("button", { onClick: () => removeStagedFile(index), className: "ml-1 p-0.5 hover:bg-attention/20 rounded", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${index}`))) })), _jsx("div", { className: "flex gap-2 mb-2", children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, className: "text-xs", children: [_jsx(UploadIcon, { className: "size-3.5 mr-1.5" }), "Upload"] }) }), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx("textarea", { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, 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' } }), _jsxs(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, className: "px-3 py-2.5 text-xs rounded-md transition-colors", children: [isSending ? (_jsx(Spinner, { size: "sm", className: "mr-1.5" })) : (_jsx(SendIcon, { className: "size-3.5 mr-1.5" })), startButtonText] })] }), _jsx("div", { className: "text-xs text-muted mt-2 text-center", children: stagedFiles.length > 0
-                                ? `${stagedFiles.length} file${stagedFiles.length > 1 ? 's' : ''} staged - will upload when conversation starts`
-                                : 'Enter to send • Shift+Enter for new line' })] })] }) }));
+    return (_jsx("div", { className: "flex flex-col h-full bg-background items-center", children: _jsxs("div", { 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, children: [isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-info font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to stage for upload"] }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" }), _jsxs("div", { className: "flex items-center justify-between py-2 px-3 border-b border-border bg-background", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "font-medium text-sm text-foreground", children: resolvedTitle })] }), onClose && !isModal && (_jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, title: t('agent.close'), className: "text-muted hover:text-foreground", children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsx("div", { className: "flex-1 overflow-y-auto bg-background flex flex-col items-center justify-end", children: _jsxs("div", { className: "w-full px-4 py-6", children: [initialMessage && (_jsx("div", { className: "px-4 py-3 mb-4 bg-info-background border-l-2 border-info text-info", children: initialMessage })), _jsxs("div", { className: "bg-card p-4 border-l-2 border-info", children: [_jsx("div", { className: "text-base text-foreground font-medium", children: t('agent.enterMessage') }), _jsx("div", { className: "mt-3 text-sm text-muted", children: t('agent.typeQuestionBelow', { buttonText: resolvedStartButtonText }) })] })] }) }), _jsxs("div", { className: "py-3 px-3 border-t border-border bg-background", children: [stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-attention/10 text-attention rounded-md text-sm", children: [_jsx(FileTextIcon, { className: "size-3.5" }), _jsx("span", { className: "max-w-[120px] truncate", children: file.name }), _jsx("span", { className: "text-xs opacity-70", children: t('agent.staged') }), _jsx("button", { onClick: () => removeStagedFile(index), className: "ml-1 p-0.5 hover:bg-attention/20 rounded", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${index}`))) })), _jsx("div", { className: "flex gap-2 mb-2", children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, className: "text-xs", children: [_jsx(UploadIcon, { className: "size-3.5 mr-1.5" }), t('agent.upload')] }) }), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx("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' } }), _jsxs(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, className: "px-3 py-2.5 text-xs rounded-md transition-colors", children: [isSending ? (_jsx(Spinner, { size: "sm", className: "mr-1.5" })) : (_jsx(SendIcon, { className: "size-3.5 mr-1.5" })), resolvedStartButtonText] })] }), _jsx("div", { className: "text-xs text-muted mt-2 text-center", children: stagedFiles.length > 0
+                                ? t('agent.filesStagedCount', { count: stagedFiles.length })
+                                : t('agent.enterToSend') })] })] }) }));
 }
 // Inner component that handles the agent conversation - similar to ModernAgentOutput
-function ModernAgentConversationInner({ run, title, interactive = true, onClose, isModal = false, fullWidth = false, placeholder = "Type your message...", resetWorkflow, 
+function ModernAgentConversationInner({ agentRunId, title, interactive = true, onClose, isModal = false, fullWidth = false, placeholder, resetWorkflow, onRestart, onFork, onShowDetails, 
 // File upload props (onFilesSelected handled internally by handleFileUpload)
 uploadedFiles, onRemoveFile, acceptedFileTypes, maxFiles, 
 // Document search props
@@ -290,7 +286,7 @@ renderDocumentSearch, selectedDocuments, onRemoveDocument,
 // Object linking
 hideObjectLinking, 
 // Section visibility
-hideHeader, hideMessageInput, hidePlanPanel, hideWorkstreamTabs, hideFileUpload, hideDocumentPanel, 
+hideHeader, hideMessageInput, hidePlanPanel, hideWorkstreamTabs, showRightPanel: showRightPanelProp = true, hideFileUpload, showArtifacts = false, hideDocumentPanel: _hideDocumentPanel, 
 // Attachment callback
 getAttachedDocs, onAttachmentsSent, 
 // Upload state
@@ -302,7 +298,7 @@ className, inputContainerClassName, inputClassName,
 // Fusion fragment data
 fusionData, 
 // External file upload API
-fileUploadRef, onProcessingFilesChange, 
+fileUploadRef, onProcessingFilesChange, processingFiles: processingFilesProp, 
 // External plan panel API
 onPlansChange, onWorkstreamStatusChange, 
 // External view mode control
@@ -318,21 +314,24 @@ streamingMessageClassNames,
 // BatchProgressPanel className overrides
 batchProgressPanelClassNames, 
 // AllMessagesMixed className overrides
-workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, }) {
+workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, payloadContent, conversationContent, conversationTab = false, }) {
+    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
     // ────────────────────────────────────────────
-    const { messages, streamingMessages, isCompleted, debugChunkFlash, addOptimisticMessage, removeOptimisticMessages, workflowStatus, serverFileUpdates, } = useAgentStream(client, run);
+    const { messages, streamingMessages, isCompleted, debugChunkFlash, addOptimisticMessage, removeOptimisticMessages, workflowStatus, serverFileUpdates, } = useAgentStream(client, agentRunId);
     const { plans, activePlanIndex, setActivePlanIndex, workstreamStatusMap, showInput, showSlidingPanel, setShowSlidingPanel, } = useAgentPlans(messages, interactive, isModal);
     const { openDocuments, activeDocumentId, isDocPanelOpen, docRefreshKey, closeDocPanel: handleCloseDocPanel, closeDocument: handleCloseDocument, selectDocument, openDocInPanel, } = useDocumentPanel(messages);
-    const { processingFiles, hasProcessingFiles, handleFileUpload, } = useFileProcessing(client, run, serverFileUpdates, toast);
+    const { processingFiles, hasProcessingFiles, handleFileUpload, } = useFileProcessing(client, agentRunId, serverFileUpdates, toast);
     // ────────────────────────────────────────────
     // Local state (UI-only concerns)
     // ────────────────────────────────────────────
     const bottomRef = useRef(null);
     const conversationRef = useRef(null);
+    const conversationLayoutRef = useRef(null);
     const [isSending, setIsSending] = useState(false);
     const [internalViewMode, setInternalViewMode] = useState("sliding");
     const viewMode = controlledViewMode ?? internalViewMode;
@@ -347,19 +346,40 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     const [isStopping, setIsStopping] = useState(false);
     const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
     const [isDragOver, setIsDragOver] = useState(false);
+    const [activeWorkstreams, setActiveWorkstreams] = useState([]);
+    const workstreamFetchFailedRef = useRef(false);
     const dragCounterRef = useRef(0);
     // PERFORMANCE: Refs for values used inside useCallback to avoid re-creating the callback
     const isSendingRef = useRef(isSending);
     isSendingRef.current = isSending;
     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)
+        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
     // ────────────────────────────────────────────
@@ -374,6 +394,19 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             workstreamStatus: currentWorkstreamStatus,
         };
     }, [plans, activePlanIndex, workstreamStatusMap]);
+    const panelWorkstreams = useMemo(() => {
+        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
     // ────────────────────────────────────────────
@@ -388,11 +421,58 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     const handleChangePlan = useCallback((index) => {
         setActivePlanIndex(index);
     }, [setActivePlanIndex]);
-    const handleClosePlanPanel = useCallback(() => {
+    const [rightPanelTab, _setRightPanelTab] = useState((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) => {
+            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 }) => (_jsx("button", { className: "text-info underline cursor-pointer hover:text-info/80", onClick: () => openDocInPanel(documentId), children: children })), [openDocInPanel]);
+    const internalStoreLinkComponent = useCallback(({ href, documentId, children }) => (_jsx("a", { href: href, className: "text-info underline cursor-pointer hover:text-info/80", onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openDocInPanel(documentId);
+        }, children: children })), [openDocInPanel]);
     const effectiveStoreLinkComponent = StoreLinkComponent ?? internalStoreLinkComponent;
     // ────────────────────────────────────────────
     // Effects
@@ -425,6 +505,39 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     useEffect(() => {
         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)
@@ -453,8 +566,8 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         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;
@@ -470,7 +583,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const optimisticMessage = {
             timestamp: Date.now(),
-            workflow_run_id: run.runId,
+            workflow_run_id: agentRunId,
             type: AgentMessageType.QUESTION,
             message: messageContent,
             workstream_id: "main",
@@ -482,8 +595,8 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             ...contextMetadata,
             _messageId: messageId,
         };
-        client.store.workflows
-            .sendSignal(run.workflowId, run.runId, "UserInput", {
+        client.agents
+            .sendSignal(agentRunId, "UserInput", {
             message: messageContent,
             metadata,
         })
@@ -494,24 +607,24 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             removeOptimisticMessages((m) => m.details?._messageId === messageId);
             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) => {
         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) => {
         e.preventDefault();
         e.stopPropagation();
@@ -529,39 +642,39 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         e.stopPropagation();
         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 () => {
         if (isStopping)
             return;
         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(() => {
         if (stopRef)
@@ -575,6 +688,9 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     }, [isStopping, onStoppingChange]);
     // Calculate number of active tasks for the status indicator
     const getActiveTaskCount = () => {
+        if (activeWorkstreams.length > 0) {
+            return activeWorkstreams.filter((ws) => ws.status === "running").length;
+        }
         if (!messages.length)
             return 0;
         // Group messages by workstream
@@ -585,7 +701,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
                 if (!workstreamMessages.has(workstreamId)) {
                     workstreamMessages.set(workstreamId, []);
                 }
-                workstreamMessages.get(workstreamId).push(message);
+                workstreamMessages.get(workstreamId)?.push(message);
             }
         });
         // Count workstreams that don't have completion messages
@@ -601,11 +717,11 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         }
         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");
         }
@@ -613,17 +729,17 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             console.error("Failed to download conversation", err);
             toast({
                 status: "error",
-                title: "Failed to download conversation",
+                title: t('agent.failedToDownload'),
                 duration: 3000,
             });
         }
     };
     // 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,
         });
     };
@@ -632,8 +748,8 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         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;
@@ -644,67 +760,88 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         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;
         }
         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;
+                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) => {
         if (task.id && task.goal)
             acc.set(task.id.toString(), task.goal);
         return acc;
     }, new Map()), [getActivePlan.plan]);
+    // Conversation area inner content — shared between main layout and conversationTab mode
+    const conversationAreaJsx = (_jsxs("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" : ""}`), children: [!hideHeader && (_jsx("div", { className: "flex-shrink-0", children: _jsx(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 }) })), messages.length === 0 && !isCompleted ? (_jsx("div", { className: "flex-1 flex flex-col items-center justify-center h-full text-center py-6", children: _jsxs("div", { className: "p-5 max-w-md border border-info rounded-lg shadow-sm", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-3", children: [_jsx(PulsatingCircle, { size: "sm", color: "blue" }), _jsx("div", { className: "text-sm text-muted font-medium", children: ThinkingMessages[thinkingMessageIndex] })] }), _jsx("div", { className: "mt-4 flex justify-center", children: _jsx(AnimatedThinkingDots, { color: "blue", className: "mt-1" }) })] }) })) : (_jsx(AllMessagesMixed, { messages: messages, bottomRef: bottomRef, 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 && (_jsx("div", { className: "flex-shrink-0", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING" ? (_jsxs(MessageBox, { status: effectiveWorkflowStatus === "COMPLETED" ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] })) : showInput && (_jsx(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 })) }))] }));
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
-    const mainContent = (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("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), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to upload"] }) })), _jsxs("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" : ""}`), children: [!hideHeader && (_jsx("div", { className: "flex-shrink-0", children: _jsx(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 }) })), messages.length === 0 && !isCompleted ? (_jsx("div", { className: "flex-1 flex flex-col items-center justify-center h-full text-center py-6", children: _jsxs("div", { className: "p-5 max-w-md border border-info rounded-lg shadow-sm", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-3", children: [_jsx(PulsatingCircle, { size: "sm", color: "blue" }), _jsx("div", { className: "text-sm text-muted font-medium", children: ThinkingMessages[thinkingMessageIndex] })] }), _jsx("div", { className: "mt-4 flex justify-center", children: _jsx(AnimatedThinkingDots, { color: "blue", className: "mt-1" }) })] }) })) : (_jsx(AllMessagesMixed, { messages: messages, bottomRef: bottomRef, 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 })), !hideMessageInput && (_jsx("div", { className: "flex-shrink-0", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING" ? (_jsxs(MessageBox, { status: effectiveWorkflowStatus === "COMPLETED" ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] })) : showInput && (_jsx(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 })) }))] }), !hidePlanPanel && showSlidingPanel && (_jsx("div", { className: "w-full lg:w-1/3 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l", children: _jsx(InlineSlidingPlanPanel, { plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, isOpen: showSlidingPanel, onClose: handleClosePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan }) })), !hideDocumentPanel && isDocPanelOpen && openDocuments.length > 0 && (_jsx("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"), children: _jsx(DocumentPanel, { isOpen: isDocPanelOpen, onClose: handleCloseDocPanel, documents: openDocuments, activeDocumentId: activeDocumentId, onSelectDocument: selectDocument, onCloseDocument: handleCloseDocument, refreshKey: docRefreshKey, runId: run.runId }) })), _jsxs(Modal, { isOpen: isPdfModalOpen, onClose: () => setIsPdfModalOpen(false), children: [_jsx(ModalTitle, { children: "Export conversation as PDF" }), _jsxs(ModalBody, { children: [_jsx("p", { className: "mb-2", children: "This will open your browser's print dialog with the current conversation." }), _jsx("p", { className: "text-sm text-muted", children: "To save a PDF, choose \"Save as PDF\" or a similar option in the print dialog." })] }), _jsxs(ModalFooter, { align: "right", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsPdfModalOpen(false), children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirmExportPdf, children: "Open print dialog" })] })] })] }) }) }));
+    const mainContent = (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("div", { ref: conversationLayoutRef, className: cn("flex flex-col lg:flex-row gap-2 w-full h-full relative overflow-hidden", isDragOver && "ring-2 ring-blue-400 ring-inset", className), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to upload"] }) })), !conversationTab && conversationAreaJsx, isRightPanelVisible && (_jsxs(_Fragment, { children: [!conversationTab && (_jsx("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" })), _jsx("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']: `${rightPanelWidth}px` } : undefined, children: _jsx(AgentRightPanel
+                                // Plan
+                                , { 
+                                    // 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, 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 }) })] })), _jsxs(Modal, { isOpen: isPdfModalOpen, onClose: () => setIsPdfModalOpen(false), children: [_jsx(ModalTitle, { children: "Export conversation as PDF" }), _jsxs(ModalBody, { children: [_jsx("p", { className: "mb-2", children: "This will open your browser's print dialog with the current conversation." }), _jsx("p", { className: "text-sm text-muted", children: "To save a PDF, choose \"Save as PDF\" or a similar option in the print dialog." })] }), _jsxs(ModalFooter, { align: "right", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsPdfModalOpen(false), children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirmExportPdf, children: "Open print dialog" })] })] })] }) }) }));
     // Wrap with FusionFragmentProvider when fusionData is provided
     // This enables fusion-fragment code blocks to display data and supports
     // agent-mode interactions where clicking editable fields sends messages
     if (fusionData) {
-        return (_jsx(FusionFragmentProvider, { data: fusionData, sendMessage: handleSendMessage, ChartComponent: VegaLiteChart, artifactRunId: run.runId, children: mainContent }));
+        return (_jsx(FusionFragmentProvider, { data: fusionData, sendMessage: handleSendMessage, ChartComponent: VegaLiteChart, artifactRunId: agentRunId, children: mainContent }));
     }
     return mainContent;
 }
-// Helper function to get conversation URL - used by other components
-export async function getConversationUrl(vertesia, workflowRunId) {
-    return vertesia.files
-        .getDownloadUrl(`agents/${workflowRunId}/conversation.json`)
-        .then((r) => r.url);
-}
 //# sourceMappingURL=ModernAgentConversation.js.map