${title}

{/* Drag overlay for full-panel file drop */} {isDragOver && (

Drop files to stage for upload

)} {/* Hidden file input */} {/* Header */}

{resolvedTitle}

{/* Close button if needed */} {onClose && !isModal && ( )}

{/* Empty conversation area with instructions */}

{initialMessage && (

{initialMessage}

)}

{t('agent.enterMessage')}

{t('agent.typeQuestionBelow', { buttonText: resolvedStartButtonText })}

{/* Input Area */}

{/* Staged files display */} {stagedFiles.length > 0 && (

{stagedFiles.map((file, index) => (

{file.name} {t('agent.staged')}

))}

)} {/* Upload button row */}

setInputValue(e.target.value)}
                        onKeyDown={handleKeyDown}
                        placeholder={resolvedPlaceholder}
                        disabled={isSending}
                        rows={2}
                        className="flex-1 py-2.5 px-3 text-sm border border-border bg-background text-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring rounded-md resize-none overflow-hidden"
                        style={{ minHeight: '60px', maxHeight: '200px' }}
                    />
                    <Button
                        onClick={startWorkflowWithMessage}
                        disabled={!inputValue.trim() || isSending}
                        className="px-3 py-2.5 text-xs rounded-md transition-colors"
                    >
                        {isSending ? (
                            <Spinner size="sm" className="mr-1.5" />
                        ) : (
                            <SendIcon className="size-3.5 mr-1.5" />
                        )}
                        {resolvedStartButtonText}
                    </Button>
                </div>
                <div className="text-xs text-muted mt-2 text-center">
                    {stagedFiles.length > 0
                        ? t('agent.filesStagedCount', { count: stagedFiles.length })
                        : t('agent.enterToSend')}
                </div>
            </div>
        </div>
        </div>
    );
}

// Inner component that handles the agent conversation - similar to ModernAgentOutput
function ModernAgentConversationInner({
    agentRunId,
    title,
    interactive = true,
    onClose,
    isModal = false,
    fullWidth = false,
    placeholder,
    resetWorkflow,
    onRestart,
    onClone,
    onShowDetails,
    // File upload props (onFilesSelected handled internally by handleFileUpload)
    uploadedFiles,
    onRemoveFile,
    acceptedFileTypes,
    maxFiles,
    // Document search props
    renderDocumentSearch,
    selectedDocuments,
    onRemoveDocument,
    // Object linking
    hideObjectLinking,
    // Section visibility
    hideHeader,
    hideMessageInput,
    hidePlanPanel,
    hideWorkstreamTabs,
    showRightPanel: showRightPanelProp = true,
    hideFileUpload,
    showArtifacts = false,
    hideDocumentPanel: _hideDocumentPanel,
    hiddenMessageTypes,
    // Attachment callback
    getAttachedDocs,
    onAttachmentsSent,
    // Upload state
    isUploading = false,
    // Context callback
    getMessageContext,
    // Styling props
    className,
    inputContainerClassName,
    inputClassName,
    // Fusion fragment data
    fusionData,
    // External file upload API
    fileUploadRef,
    onProcessingFilesChange,
    processingFiles: processingFilesProp,
    // External plan panel API
    onPlansChange,
    onWorkstreamStatusChange,
    // External view mode control
    viewMode: controlledViewMode,
    onViewModeChange: onViewModeChangeProp,
    onShowInputChange,
    // External stop API
    stopRef,
    onStoppingChange,
    // MessageItem className/style overrides
    messageItemClassNames,
    messageStyleOverrides,
    // ToolCallGroup className overrides + view mode visibility
    toolCallGroupClassNames,
    hideToolCallsInViewMode,
    // StreamingMessage className overrides
    streamingMessageClassNames,
    // BatchProgressPanel className overrides
    batchProgressPanelClassNames,
    // AllMessagesMixed className overrides
    workingIndicatorClassName,
    messageListClassName,
    StoreLinkComponent,
    CollectionLinkComponent,
    prependFriendlyMessage,
    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
    // ────────────────────────────────────────────
    const {
        messages,
        streamingMessages,
        isCompleted,
        debugChunkFlash,
        addOptimisticMessage,
        removeOptimisticMessages,
        agentRunStatus,
        workflowRunId,
        serverFileUpdates,
    } = useAgentStream(client, agentRunId);

const {
        plans,
        activePlanIndex,
        setActivePlanIndex,
        workstreamStatusMap,
        showInput,
        showSlidingPanel,
        setShowSlidingPanel,
    } = useAgentPlans(messages, interactive, isModal);

const {
        openDocuments,
        activeDocumentId,
        isDocPanelOpen,
        docRefreshKey,
        closeDocPanel: handleCloseDocPanel,
        closeDocument: handleCloseDocument,
        selectDocument,
        openDocInPanel,
        updateDocumentTitle,
    } = useDocumentPanel(messages);

const {
        processingFiles,
        hasProcessingFiles,
        handleFileUpload,
    } = 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;
    const handleViewModeChange = useCallback((mode: AgentConversationViewMode) => {
        if (onViewModeChangeProp) {
            onViewModeChangeProp(mode);
        } else {
            setInternalViewMode(mode);
        }
    }, [onViewModeChangeProp]);
    const [isStopping, setIsStopping] = useState(false);
    const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
    const [isDragOver, setIsDragOver] = useState(false);
    const [activeWorkstreams, setActiveWorkstreams] = useState<ActiveWorkstreamEntry[]>([]);
    const [completedWorkstreams, setCompletedWorkstreams] = useState<Array<{ launch_id: string; workstream_id: string; status: 'completed' | 'canceled' }>>([]);
    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;

const lastMainMessage = useMemo(() => {
        const mainMessages = messages.filter(m => (m.workstream_id || 'main') === 'main');
        return mainMessages[mainMessages.length - 1];
    }, [messages]);

// Derive effective status from AgentRun state; main workstream terminal events cover live-stream races.
    const effectiveWorkflowStatus = useMemo(() => {
        if (lastMainMessage?.type === AgentMessageType.TERMINATED) return "TERMINATED";
        if (
            lastMainMessage?.type === AgentMessageType.COMPLETE &&
            (!agentRunStatus || agentRunStatus === "RUNNING")
        ) {
            return "COMPLETED";
        }
        return agentRunStatus;
    }, [lastMainMessage, agentRunStatus]);

const isWorkflowTerminal = useMemo(() => {
        const normalizedStatus = effectiveWorkflowStatus?.toUpperCase();
        return normalizedStatus === "COMPLETED"
            || normalizedStatus === "FAILED"
            || normalizedStatus === "CANCELED"
            || normalizedStatus === "CANCELLED"
            || normalizedStatus === "TERMINATED"
            || normalizedStatus === "TIMED_OUT";
    }, [effectiveWorkflowStatus]);

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
    // ────────────────────────────────────────────
    const getActivePlan = useMemo(() => {
        const currentPlanData = plans[activePlanIndex] || {
            plan: { plan: [] },
            timestamp: 0,
        };
        const currentWorkstreamStatus =
            workstreamStatusMap.get(currentPlanData.timestamp) || new Map();
        return {
            plan: currentPlanData.plan,
            workstreamStatus: currentWorkstreamStatus,
        };
    }, [plans, activePlanIndex, workstreamStatusMap]);

// ────────────────────────────────────────────
    // Stable callbacks
    // ────────────────────────────────────────────
    const handleTogglePlanPanel = useCallback(() => {
        setShowSlidingPanel((prev: boolean) => {
            if (!prev) {
                sessionStorage.setItem("plan-panel-shown", "true");
            }
            return !prev;
        });
    }, [setShowSlidingPanel]);

const handleChangePlan = useCallback((index: number) => {
        setActivePlanIndex(index);
    }, [setActivePlanIndex]);

// ────────────────────────────────────────────
    // Unified right panel state
    // ────────────────────────────────────────────
    type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload' | 'conversation';
    const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>((conversationContent || conversationTab) ? 'conversation' : 'plan');
    const [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);
        handleCloseDocPanel();
    }, [setShowSlidingPanel, handleCloseDocPanel]);

// Default StoreLinkComponent that opens documents in the panel
    const internalStoreLinkComponent = useCallback(
        ({ href, documentId, children }: { href: string; documentId: string; children: React.ReactNode }) => (
            <a
                href={href}
                className="text-info underline cursor-pointer hover:text-info/80"
                onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    openDocInPanel(documentId);
                    setRightPanelTab('documents');
                }}
            >
                {children}
            </a>
        ),
        [openDocInPanel, setRightPanelTab]
    );

const effectiveStoreLinkComponent = StoreLinkComponent ?? internalStoreLinkComponent;

// ────────────────────────────────────────────
    // Effects
    // ────────────────────────────────────────────

// Show rotating thinking messages
    useEffect(() => {
        if (!isCompleted) {
            const interval = setInterval(() => {
                setThinkingMessageIndex(() =>
                    Math.floor(Math.random() * (ThinkingMessages.length - 1)),
                );
            }, 4000);
            return () => clearInterval(interval);
        }
    }, [isCompleted]);

// Expose handleFileUpload to external callers via ref
    useEffect(() => {
        if (fileUploadRef) fileUploadRef.current = handleFileUpload;
        return () => { if (fileUploadRef) fileUploadRef.current = null; };
    }, [fileUploadRef, handleFileUpload]);

// Notify parent when processingFiles changes
    useEffect(() => {
        onProcessingFilesChange?.(processingFiles);
    }, [processingFiles, onProcessingFilesChange]);

// Notify parent when plans change
    useEffect(() => {
        onPlansChange?.(plans, activePlanIndex);
    }, [plans, activePlanIndex, onPlansChange]);

// Notify parent when workstream status changes
    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;

fetchActiveWorkstreams();
        const pollHandle = window.setInterval(fetchActiveWorkstreams, 10000);

return () => {
            isCancelled = true;
            window.clearInterval(pollHandle);
        };
    }, [client.agents, agentRunId, isCompleted, activeWorkstreams.length]);

// Auto-switch to Workstreams tab the first time workstreams become active
    const hasAutoSwitchedToWorkstreamsRef = useRef(false);
    useEffect(() => {
        if (panelWorkstreams.length > 0 && !hasAutoSwitchedToWorkstreamsRef.current) {
            hasAutoSwitchedToWorkstreamsRef.current = true;
            setRightPanelTab('workstreams');
        }
    }, [panelWorkstreams.length]);

// Notify parent when input availability is determined
    useEffect(() => {
        if (messages.length === 0) return;
        if (!showInput) {
            onShowInputChange?.(false);
            return;
        }
        if (effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING") {
            onShowInputChange?.(false);
            return;
        }
        if (effectiveWorkflowStatus !== null) {
            onShowInputChange?.(true);
        }
    }, [showInput, effectiveWorkflowStatus, messages.length, onShowInputChange]);

// ────────────────────────────────────────────
    // Handlers
    // ────────────────────────────────────────────

// Send a message to the agent
    const handleSendMessage = useCallback((message: string) => {
        const trimmed = message.trim();
        if (!trimmed || isSendingRef.current) return;

// Block if files are still processing
        if (hasProcessingFilesRef.current) {
            toast({
                status: "warning",
                title: t('agent.filesProcessing'),
                description: t('agent.waitForFilesProcessing'),
                duration: 3000,
            });
            return;
        }

setIsSending(true);

const attachedDocs = getAttachedDocs?.() || [];
        const contextMetadata = getMessageContext?.() || {};

const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

const optimisticMessage: AgentMessage = {
            timestamp: Date.now(),
            workflow_run_id: agentRunId,
            type: AgentMessageType.QUESTION,
            message: messageContent,
            workstream_id: "main",
            details: { _optimistic: true, _messageId: messageId },
        };

addOptimisticMessage(optimisticMessage);

const metadata = {
            ...(attachedDocs.length > 0 ? { attached_docs: attachedDocs.map((d) => d.id) } : {}),
            ...contextMetadata,
            _messageId: messageId,
        };

client.agents
            .sendSignal(agentRunId, "UserInput", {
                message: messageContent,
                metadata,
            } as UserInputSignal)
            .then(() => {
                onAttachmentsSent?.();
            })
            .catch((err) => {
                removeOptimisticMessages((m) =>
                    (m.details as any)?._messageId === messageId
                );
                toast({
                    status: "error",
                    title: t('agent.failedToSend'),
                    description: err instanceof Error ? err.message : t('agent.unknownError'),
                    duration: 3000,
                });
            })
            .finally(() => {
                setIsSending(false);
            });
    }, [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 (e.dataTransfer?.types?.includes('Files')) {
            setIsDragOver(true);
        }
    }, []);

const handleDragOver = useCallback((e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
    }, []);

const handleDragLeave = useCallback((e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
        dragCounterRef.current--;
        if (dragCounterRef.current === 0) {
            setIsDragOver(false);
        }
    }, []);

const handleDrop = useCallback((e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
        dragCounterRef.current = 0;
        setIsDragOver(false);

if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
            const filesArray = Array.from(e.dataTransfer.files);
            handleFileUpload(filesArray);
        }
    }, [handleFileUpload]);

// Stop/interrupt the active workflow
    const handleStopWorkflow = useCallback(async () => {
        if (isStopping) return;

setIsStopping(true);
        try {
            await client.agents.sendSignal(agentRunId, "Stop", {
                message: "User requested stop",
            });

toast({
                status: "info",
                title: t('agent.agentInterrupted'),
                description: t('agent.typeNewInstructions'),
                duration: 3000,
            });
        } catch (err) {
            toast({
                status: "error",
                title: t('agent.failedToInterrupt'),
                description: err instanceof Error ? err.message : t('agent.unknownError'),
                duration: 3000,
            });
        } finally {
            setIsStopping(false);
        }
    }, [isStopping, client, agentRunId, toast]);

// Expose stop handler to external callers via ref
    useEffect(() => {
        if (stopRef) stopRef.current = !isCompleted ? handleStopWorkflow : null;
        return () => { if (stopRef) stopRef.current = null; };
    }, [stopRef, isCompleted, handleStopWorkflow]);

// Notify parent when stopping state changes
    useEffect(() => {
        onStoppingChange?.(isStopping);
    }, [isStopping, onStoppingChange]);

// Calculate number of active tasks for the status indicator
    const getActiveTaskCount = (): number => {
        if (activeWorkstreams.length > 0) {
            return activeWorkstreams.filter((ws) => ws.status === "running").length;
        }

if (!messages.length) return 0;

// Group messages by workstream
        const workstreamMessages = new Map<string, AgentMessage[]>();

messages.forEach((message) => {
            const workstreamId = getWorkstreamId(message);
            if (workstreamId !== "main" && workstreamId !== "all") {
                if (!workstreamMessages.has(workstreamId)) {
                    workstreamMessages.set(workstreamId, []);
                }
                workstreamMessages.get(workstreamId)?.push(message);
            }
        });

// Count workstreams that don't have completion messages
        let activeCount = 0;

for (const [_, msgs] of workstreamMessages.entries()) {
            if (msgs.length > 0) {
                const lastMessage = msgs[msgs.length - 1];
                // If the last message isn't a completion message, the workstream is active
                if (
                    ![AgentMessageType.COMPLETE, AgentMessageType.IDLE].includes(
                        lastMessage.type,
                    )
                ) {
                    activeCount++;
                }
            }
        }

return activeCount;
    };

const actualTitle = title || t('agent.agentConversation');

// Handle downloading conversation
    const downloadConversation = async () => {
        try {
            const url = await getConversationUrl(client, agentRunId);
            if (url) window.open(url, "_blank");
        } catch (err) {
            console.error("Failed to download conversation", err);
            toast({
                status: "error",
                title: t('agent.failedToDownload'),
                duration: 3000,
            });
        }
    };

const [isPdfModalOpen, setIsPdfModalOpen] = useState(false);

const handleConfirmExportPdf = () => {
        if (!conversationRef.current) {
            toast({
                status: "error",
                title: t('agent.pdfExportFailed'),
                description: t('agent.noConversationContent'),
                duration: 3000,
            });
            return;
        }

const pdfTitle = `${actualTitle} - ${agentRunId}`;
        const success = printElementToPdf(conversationRef.current, pdfTitle);

if (!success) {
            toast({
                status: "error",
                title: t('agent.pdfExportFailed'),
                description: t('agent.unableToOpenPrint'),
                duration: 4000,
            });
            return;
        }

toast({
            status: "success",
            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) => {
            if (task.id && task.goal) acc.set(task.id.toString(), task.goal);
            return acc;
        }, 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}
                        isTerminal={isWorkflowTerminal}
                        onClose={onClose}
                        isModal={isModal}
                        agentRunId={agentRunId}
                        workflowRunId={workflowRunId || ''}
                        viewMode={viewMode}
                        onViewModeChange={handleViewModeChange}
                        showPlanPanel={showRightPanelProp && showSlidingPanel}
                        hasPlan={showRightPanelProp && plans.length > 0}
                        showPlanButton={showRightPanelProp && !conversationTab}
                        onTogglePlanPanel={handleTogglePlanPanel}
                        onDownload={downloadConversation}
                        resetWorkflow={resetWorkflow}
                        onRestart={onRestart}
                        onClone={onClone}
                        onShowDetails={onShowDetails}
                        onExportPdf={exportConversationPdf}
                        isReceivingChunks={debugChunkFlash}
                    />
                </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}
                    hiddenMessageTypes={hiddenMessageTypes}
                />
            )}

{!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
            ref={conversationLayoutRef}
            className={cn("flex flex-col lg:flex-row gap-2 w-full h-full relative overflow-hidden", isDragOver && "ring-2 ring-blue-400 ring-inset", className)}
            onDragEnter={handleDragEnter}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
        >
            {/* Drag overlay for full-panel file drop */}
            {isDragOver && (
                <div className="absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg">
                    <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg">
                        <UploadIcon className="size-6" />
                        Drop files to upload
                    </div>
                </div>
            )}
            {/* Conversation Area — hidden when conversationTab moves it into the right panel */}
            {!conversationTab && conversationAreaJsx}

{/* Unified Right Panel — Plan | Workstreams | Documents | Uploads */}
            {isRightPanelVisible && (
                <>
                    {!conversationTab && (
                        <div
                            className="hidden lg:block lg:w-1 lg:shrink-0 cursor-col-resize bg-border/70 hover:bg-border transition-colors"
                            onMouseDown={() => setIsRightPanelResizing(true)}
                            role="separator"
                            aria-orientation="vertical"
                            aria-label="Resize right panel"
                        />
                    )}
                    <div
                        className={conversationTab
                            ? "w-full h-full overflow-auto"
                            : "w-full lg:w-[var(--agent-right-panel-width)] lg:shrink-0 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l"}
                        style={!conversationTab ? ({ ['--agent-right-panel-width' as string]: `${rightPanelWidth}px` } as React.CSSProperties) : undefined}
                    >
                    <AgentRightPanel
                        // Plan
                        plan={getActivePlan.plan}
                        workstreamStatus={getActivePlan.workstreamStatus}
                        plans={plans}
                        activePlanIndex={activePlanIndex}
                        onChangePlan={handleChangePlan}
                        showPlan={!hidePlanPanel && showSlidingPanel}
                        // Workstreams
                        activeWorkstreams={panelWorkstreams}
                        hideWorkstreams={hideWorkstreamTabs}
                        // Documents
                        openDocuments={openDocuments}
                        activeDocumentId={activeDocumentId}
                        onSelectDocument={selectDocument}
                        onCloseDocument={handleCloseDocument}
                        onUpdateDocumentTitle={updateDocumentTitle}
                        docRefreshKey={docRefreshKey}
                        runId={agentRunId}
                        // Uploads
                        processingFiles={processingFilesProp ?? processingFiles}
                        // Artifacts
                        showArtifacts={showArtifacts}
                        artifactRefreshKey={artifactRefreshKey}
                        // Messages (for workstreams tab context)
                        messages={messages}
                        // Payload content
                        payloadContent={payloadContent}
                        // Conversation content
                        conversationContent={conversationTab ? conversationAreaJsx : conversationContent}
                        // Panel control
                        onClose={handleCloseRightPanel}
                        defaultTab={rightPanelTab}
                        activeTab={rightPanelTab}
                        onTabChange={setRightPanelTab}
                    />
                    </div>
                </>
            )}
            <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
                <ModalTitle>Export conversation as PDF</ModalTitle>
                <ModalBody>
                    <p className="mb-2">
                        This will open your browser's print dialog with the current conversation.
                    </p>
                    <p className="text-sm text-muted">
                        To save a PDF, choose "Save as PDF" or a similar option in the print dialog.
                    </p>
                </ModalBody>
                <ModalFooter align="right">
                    <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
                        Cancel
                    </Button>
                    <Button size="sm" onClick={handleConfirmExportPdf}>
                        Open print dialog
                    </Button>
                </ModalFooter>
            </Modal>
        </div>
        </ImageLightboxProvider>
        </ArtifactUrlCacheProvider>
    );

// 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 (
            <FusionFragmentProvider
                data={fusionData}
                sendMessage={handleSendMessage}
                ChartComponent={VegaLiteChart}
                artifactRunId={agentRunId}
            >
                {mainContent}
            </FusionFragmentProvider>
        );
    }

return mainContent;
}