@vertesia/ui 1.5.0-dev.20260722.120446Z → 1.5.0-dev.20260725.083715Z

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

@@ -4,6 +4,7 @@ import { FusionFragmentProvider } from '@vertesia/fusion-ux';
 import { Button, cn, insertNewlineAtCursor, MessageBox, Modal, ModalBody, ModalFooter, ModalTitle, Spinner, Textarea, useToast, } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
+import { AgentResourceResolverProvider, isArtifactRefreshEvent, } from '@vertesia/ui/widgets';
 import { ArrowUpIcon, Bot, CheckCircle, Cpu, FileTextIcon, UploadIcon, XIcon } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { McpConnectionsActionMenu } from '../../oauth/McpConnectionsButton.js';
@@ -23,7 +24,7 @@ import AllMessagesMixed from './ModernAgentOutput/AllMessagesMixed';
 import Header from './ModernAgentOutput/Header';
 import MessageInput from './ModernAgentOutput/MessageInput';
 import { getPendingRequestInputMessage } from './ModernAgentOutput/requestInputMessages';
-import { debugAgentChat, filterMessagesForActiveWorkstream, getConversationUrl, getWorkstreamId, isInProgress, } from './ModernAgentOutput/utils';
+import { debugAgentChat, filterMessagesForActiveWorkstream, getConversationUrl, getWorkstreamId, isInProgress, isPassiveArtifactUpdate, } from './ModernAgentOutput/utils';
 import { createPlaybackState, getPlaybackCursorIndex, isAgentChatPlaybackAvailable, isAgentChatPlaybackEnabled, } from './playback';
 import { SkillWidgetProvider } from './SkillWidgetProvider';
 import { ArtifactUrlCacheProvider } from './useArtifactUrlCache.js';
@@ -351,9 +352,10 @@ function downloadJsonFile(filename, payload) {
     URL.revokeObjectURL(url);
 }
 export function ModernAgentConversation(props) {
-    const { agentRunId, startWorkflow } = props;
+    const { agentRunId, startWorkflow, resourceResolver } = props;
     if (agentRunId) {
-        return (_jsx(SkillWidgetProvider, { children: _jsx(ModernAgentConversationInner, { ...props, agentRunId: agentRunId }) }));
+        const conversation = (_jsx(SkillWidgetProvider, { children: _jsx(ModernAgentConversationInner, { ...props, agentRunId: agentRunId }) }));
+        return resourceResolver ? (_jsx(AgentResourceResolverProvider, { value: resourceResolver, children: conversation })) : (conversation);
     }
     else if (startWorkflow) {
         // If we have startWorkflow capability but no agentRunId yet
@@ -375,8 +377,10 @@ function StartWorkflowView({ initialMessage, interactive = true, startWorkflow,
 // Attachment callback - used to include existing document attachments in the first message
 getAttachedDocs, onAttachmentsSent, 
 // File upload props
-acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hideObjectLinking, headerVariant, inputContainerClassName, inputClassName, className, allowWorkflowControl, initialToolApprovalMode, }) {
+acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hideObjectLinking, headerVariant, startViewVariant = 'default', inputContainerClassName, inputClassName, className, allowWorkflowControl, initialToolApprovalMode, onAgentWorkingChange, }) {
     const { t } = useUITranslation();
+    const isCompactStartView = startViewVariant !== 'default';
+    const isExpandedStartComposer = startViewVariant === 'expanded-composer';
     const canStageFiles = !hideFileUpload;
     const resolvedPlaceholder = placeholder ?? t('agent.typeYourMessage');
     const resolvedStartButtonText = startButtonText ?? t('agent.startAgent');
@@ -393,6 +397,9 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
     const fileInputRef = useRef(null);
     // Staged files - stored locally until workflow starts
     const [stagedFiles, setStagedFiles] = useState([]);
+    useEffect(() => {
+        onAgentWorkingChange?.(isSending);
+    }, [isSending, onAgentWorkingChange]);
     // Drag and drop state
     const [isDragOver, setIsDragOver] = useState(false);
     const dragCounterRef = useRef(0);
@@ -596,10 +603,14 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
     const adjustTextareaHeight = useCallback(() => {
         const textarea = inputRef.current;
         if (textarea) {
+            if (isExpandedStartComposer) {
+                textarea.style.height = '100%';
+                return;
+            }
             textarea.style.height = 'auto';
             textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
         }
-    }, []);
+    }, [isExpandedStartComposer]);
     useEffect(() => {
         void inputValue;
         adjustTextareaHeight();
@@ -618,9 +629,12 @@ acceptedFileTypes, maxFiles = 5, hideHeader = false, hideFileUpload = false, hid
             inputContainerClassName,
             inputClassName,
             className,
-            allowWorkflowControl, agentRunId: startedAgentRunId, title: title, pendingStartMessage: pendingStartMessage ?? undefined, pendingStartTimestamp: pendingStartTimestamp ?? undefined, initialToolApprovalMode: toolApprovalMode }));
+            allowWorkflowControl,
+            onAgentWorkingChange, agentRunId: startedAgentRunId, title: title, pendingStartMessage: pendingStartMessage ?? undefined, pendingStartTimestamp: pendingStartTimestamp ?? undefined, initialToolApprovalMode: toolApprovalMode }));
     }
-    return (_jsx("div", { className: cn('flex h-full flex-col items-center bg-background', className), children: _jsxs("div", { className: cn('relative flex h-full w-full flex-col overflow-hidden border-0', fullWidth ? '' : 'max-w-4xl'), onDragEnter: canStageFiles ? handleDragEnter : undefined, onDragOver: canStageFiles ? handleDragOver : undefined, onDragLeave: canStageFiles ? handleDragLeave : undefined, onDrop: canStageFiles ? handleDrop : undefined, children: [canStageFiles && 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"] }) })), canStageFiles && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" })), !hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 bg-background px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "text-sm font-medium 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 flex-1 flex-col items-center justify-end overflow-y-auto bg-background px-4", children: pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end py-8", children: initialMessage && (_jsx("div", { className: "text-[15px] leading-relaxed text-foreground/80", children: initialMessage })) })) }), _jsx("div", { className: "shrink-0 bg-background px-4 pb-safe-area-4 pt-2", children: _jsxs("div", { className: cn('mx-auto flex max-w-3xl flex-col gap-3 rounded-2xl border border-border/70 bg-mixer-muted/15 p-3 shadow-lg shadow-black/5', inputContainerClassName), children: [canStageFiles && stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention", title: t('agent.fileStagedTooltip'), 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, { variant: "unstyled", "aria-label": `Remove staged file ${file.name}`, onClick: () => removeStagedFile(index), className: "ms-1 rounded p-0.5 hover:bg-attention/20", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${file.size}-${file.lastModified}`))) })), _jsx(Textarea, { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: resolvedPlaceholder, disabled: isSending, rows: 2, className: cn('min-h-[72px] resize-none overflow-hidden border-0 bg-transparent px-0 py-0 text-sm leading-6 shadow-none focus-visible:ring-0', inputClassName), style: { minHeight: '72px', maxHeight: '200px' } }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [canStageFiles && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, "aria-label": t('agent.upload'), className: "rounded-full text-muted", title: t('agent.upload'), children: _jsx(UploadIcon, { className: "size-4" }) })), interactive && (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: setToolApprovalMode, disabled: isSending }))] }), _jsx(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, variant: "ghost", size: "icon", className: cn('size-9 rounded-full border border-border/60 bg-foreground text-background shadow-sm', 'hover:bg-foreground/90 hover:text-background', 'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100'), title: resolvedStartButtonText, children: isSending ? _jsx(Spinner, { size: "sm" }) : _jsx(ArrowUpIcon, { className: "size-4" }) })] })] }) })] }) }));
+    return (_jsx("div", { className: cn('flex flex-col items-center bg-background', isCompactStartView && !isExpandedStartComposer ? '' : 'h-full', className), children: _jsxs("div", { className: cn('relative flex w-full flex-col overflow-hidden border-0', isCompactStartView && !isExpandedStartComposer ? '' : 'h-full', fullWidth ? '' : 'max-w-4xl'), onDragEnter: canStageFiles ? handleDragEnter : undefined, onDragOver: canStageFiles ? handleDragOver : undefined, onDragLeave: canStageFiles ? handleDragLeave : undefined, onDrop: canStageFiles ? handleDrop : undefined, children: [canStageFiles && 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"] }) })), canStageFiles && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" })), !hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 bg-background px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "text-sm font-medium 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: cn('flex flex-col items-center justify-end bg-background px-4', isCompactStartView ? 'shrink-0 pt-3' : 'flex-1 overflow-y-auto'), children: pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx("div", { className: cn('mx-auto flex w-full max-w-3xl flex-col justify-end', isCompactStartView ? '' : 'min-h-full py-8'), children: initialMessage && (_jsx("div", { className: "text-[15px] leading-relaxed text-foreground/80", children: initialMessage })) })) }), _jsx("div", { className: cn('bg-background px-4 pb-safe-area-4 pt-2', isExpandedStartComposer ? 'flex min-h-0 flex-1 flex-col' : 'shrink-0'), children: _jsxs("div", { className: cn('mx-auto flex max-w-3xl flex-col gap-3 rounded-2xl border border-border/70 bg-mixer-muted/15 p-3 shadow-lg shadow-black/5', isExpandedStartComposer && 'min-h-0 w-full flex-1', inputContainerClassName), children: [canStageFiles && stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-md bg-attention/10 px-2 py-1 text-sm text-attention", title: t('agent.fileStagedTooltip'), 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, { variant: "unstyled", "aria-label": `Remove staged file ${file.name}`, onClick: () => removeStagedFile(index), className: "ms-1 rounded p-0.5 hover:bg-attention/20", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${file.size}-${file.lastModified}`))) })), _jsx(Textarea, { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: resolvedPlaceholder, disabled: isSending, rows: 2, className: cn('min-h-[72px] resize-none overflow-hidden border-0 bg-transparent px-0 py-0 text-sm leading-6 shadow-none focus-visible:ring-0', isExpandedStartComposer && 'min-h-0 flex-1', inputClassName), style: isExpandedStartComposer
+                                    ? { minHeight: '72px', maxHeight: 'none' }
+                                    : { minHeight: '72px', maxHeight: '200px' } }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [canStageFiles && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, "aria-label": t('agent.upload'), className: "rounded-full text-muted", title: t('agent.upload'), children: _jsx(UploadIcon, { className: "size-4" }) })), interactive && (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: setToolApprovalMode, disabled: isSending }))] }), _jsx(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, variant: "ghost", size: "icon", className: cn('size-9 rounded-full border border-border/60 bg-foreground text-background shadow-sm', 'hover:bg-foreground/90 hover:text-background', 'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100'), title: resolvedStartButtonText, children: isSending ? _jsx(Spinner, { size: "sm" }) : _jsx(ArrowUpIcon, { className: "size-4" }) })] })] }) })] }) }));
 }
 // 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, allowWorkflowControl = true, 
@@ -639,11 +653,11 @@ isUploading = false,
 // Context callback
 getMessageContext, 
 // Styling props
-className, inputContainerClassName, inputClassName, 
+className, inputContainerClassName, inputClassName, composerContext, 
 // Fusion fragment data
 fusionData, 
 // External file upload API
-fileUploadRef, onProcessingFilesChange, processingFiles: processingFilesProp, 
+fileUploadRef, sendMessageRef, onMessage, onAgentWorkingChange, onProcessingFilesChange, processingFiles: processingFilesProp, 
 // External plan panel API
 onPlansChange, onWorkstreamStatusChange, 
 // External view mode control
@@ -666,7 +680,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     // ────────────────────────────────────────────
     // Extracted hooks
     // ────────────────────────────────────────────
-    const { messages, streamingMessages, isCompleted, initialHistoryStatus, debugChunkFlash, addOptimisticMessage, updateOptimisticMessageStatus, reconnect: reconnectStream, agentRunStatus, workflowRunId, serverFileUpdates, } = useAgentStream(client, agentRunId);
+    const { messages, streamingMessages, isCompleted, initialHistoryStatus, debugChunkFlash, addOptimisticMessage, updateOptimisticMessageStatus, reconnect: reconnectStream, agentRunStatus, workflowRunId, serverFileUpdates, } = useAgentStream(client, agentRunId, onMessage);
     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, removeProcessingFile, clearProcessingFiles } = useFileProcessing(client, agentRunId, serverFileUpdates, toast);
@@ -812,9 +826,8 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     const canShowPlaybackToggle = showPlaybackToggle && enablePlayback === undefined && isAgentChatPlaybackAvailable();
     const isPlaybackEnabled = enablePlayback ?? (isAgentChatPlaybackEnabled() || isPlaybackToggleEnabled);
     const playbackSourceMessages = useMemo(() => {
-        const visibleMessages = hiddenMessageTypes?.length
-            ? messages.filter((message) => !hiddenMessageTypes.includes(message.type))
-            : messages;
+        // Passive artifact autosaves are surfaced by the editor's own save indicator, not the chat.
+        const visibleMessages = messages.filter((message) => !isPassiveArtifactUpdate(message) && !(hiddenMessageTypes?.includes(message.type) ?? false));
         return filterMessagesForActiveWorkstream(visibleMessages, activeWorkstream);
     }, [activeWorkstream, hiddenMessageTypes, messages]);
     const playbackState = useMemo(() => createPlaybackState(playbackSourceMessages, playbackCursor, isPlaybackEnabled), [isPlaybackEnabled, playbackCursor, playbackSourceMessages]);
@@ -827,8 +840,15 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     const playbackActiveWorkstreams = useMemo(() => playbackDerivedWorkstreams.filter((ws) => isActiveWorkstreamStatus(ws.status)), [playbackDerivedWorkstreams]);
     const effectiveIsCompleted = useMemo(() => isCompleted || !isInProgress(messages), [isCompleted, messages]);
     const displayedIsCompleted = isPlaybackLive || isPlaybackAtLatest ? effectiveIsCompleted : false;
+    const isAgentWorking = !effectiveIsCompleted && !isWorkflowTerminal;
+    useEffect(() => {
+        onAgentWorkingChange?.(isAgentWorking);
+    }, [isAgentWorking, onAgentWorkingChange]);
     const pendingRequestInputMessage = useMemo(() => getPendingRequestInputMessage(displayedMessages), [displayedMessages]);
-    const shouldShowRequestInputOverlay = Boolean(pendingRequestInputMessage) && !isFailed;
+    // A terminal run silently drops user input unless it can be continued (see the guard in
+    // handleSendMessage), so never surface an actionable question overlay in that state —
+    // the terminal status box renders instead.
+    const shouldShowRequestInputOverlay = Boolean(pendingRequestInputMessage) && !isFailed && (!isWorkflowTerminal || canContinueConversation);
     const isViewingPlaybackHistory = isPlaybackEnabled && !isPlaybackLive;
     const shouldRenderLiveMessageInputArea = shouldRenderMessageInputArea && !isViewingPlaybackHistory;
     const contextWindowUsage = useMemo(() => toContextWindowUsage(messages), [messages]);
@@ -915,26 +935,44 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     // ────────────────────────────────────────────
     // Stable callbacks
     // ────────────────────────────────────────────
-    const handleTogglePlanPanel = useCallback(() => {
-        setShowSlidingPanel((prev) => {
-            if (!prev) {
-                sessionStorage.setItem('plan-panel-shown', 'true');
-            }
-            return !prev;
-        });
-    }, [setShowSlidingPanel]);
     const handleChangePlan = useCallback((index) => {
         setActivePlanIndex(index);
     }, [setActivePlanIndex]);
     const [rightPanelTab, setRightPanelTab] = useState(conversationContent || conversationTab ? 'conversation' : 'plan');
+    const [selectedArtifactPath, setSelectedArtifactPath] = useState(null);
     const [rightPanelWidth, setRightPanelWidth] = useState(400);
     const [isRightPanelResizing, setIsRightPanelResizing] = useState(false);
+    // Master override for the "Toggle right sidebar" control. `showSlidingPanel` only tracks the
+    // plan; open documents/workstreams keep the panel visible on their own, so without this the
+    // toggle can't hide the panel while a document is open. Explicit reveals (opening an artifact
+    // or document) clear it again.
+    const [rightPanelManuallyClosed, setRightPanelManuallyClosed] = useState(false);
     const isRightPanelVisible = showRightPanelProp &&
+        !rightPanelManuallyClosed &&
         (showSlidingPanel ||
             isDocPanelOpen ||
             (!hideWorkstreamTabs && panelWorkstreams.length > 0) ||
             !!conversationContent ||
             conversationTab);
+    // A newly opened document should reveal the panel even if the user had manually collapsed it.
+    const previousDocPanelOpenRef = useRef(isDocPanelOpen);
+    useEffect(() => {
+        if (isDocPanelOpen && !previousDocPanelOpenRef.current) {
+            setRightPanelManuallyClosed(false);
+        }
+        previousDocPanelOpenRef.current = isDocPanelOpen;
+    }, [isDocPanelOpen]);
+    const handleTogglePlanPanel = useCallback(() => {
+        if (isRightPanelVisible) {
+            setRightPanelManuallyClosed(true);
+            setShowSlidingPanel(false);
+        }
+        else {
+            setRightPanelManuallyClosed(false);
+            setShowSlidingPanel(true);
+            sessionStorage.setItem('plan-panel-shown', 'true');
+        }
+    }, [isRightPanelVisible, setShowSlidingPanel]);
     useEffect(() => {
         if (!isRightPanelVisible && isRightPanelResizing) {
             setIsRightPanelResizing(false);
@@ -970,9 +1008,40 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         };
     }, [isRightPanelResizing]);
     const handleCloseRightPanel = useCallback(() => {
+        setRightPanelManuallyClosed(true);
         setShowSlidingPanel(false);
         handleCloseDocPanel();
     }, [setShowSlidingPanel, handleCloseDocPanel]);
+    const handleOpenArtifact = useCallback((path) => {
+        if (!/\.md$/i.test(path))
+            return;
+        setRightPanelManuallyClosed(false);
+        setSelectedArtifactPath(path);
+        setRightPanelTab('artifacts');
+        setShowSlidingPanel(true);
+    }, [setShowSlidingPanel]);
+    // The `display_artifact` tool emits a `display_artifact` stream event asking the UI
+    // to reveal a text artifact in the editor. Act on the latest such event, once per
+    // distinct occurrence so the user can still close the panel without it snapping back.
+    const displayedArtifactMarkerRef = useRef(null);
+    useEffect(() => {
+        let target;
+        let marker;
+        for (const message of messages) {
+            const details = message.details;
+            if (details?.event_class === 'display_artifact' && typeof details.path === 'string') {
+                target = details.path;
+                marker = `${message.timestamp ?? ''}:${details.path}`;
+            }
+        }
+        if (!target || !marker || marker === displayedArtifactMarkerRef.current)
+            return;
+        displayedArtifactMarkerRef.current = marker;
+        setRightPanelManuallyClosed(false);
+        setSelectedArtifactPath(target);
+        setRightPanelTab('artifacts');
+        setShowSlidingPanel(true);
+    }, [messages, setShowSlidingPanel]);
     // Default StoreLinkComponent that opens documents in the panel
     const internalStoreLinkComponent = useCallback(({ href, documentId, children }) => (_jsx("a", { href: href, className: "text-info underline cursor-pointer hover:text-info/80", onClick: (e) => {
             e.preventDefault();
@@ -1007,6 +1076,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
     }, [workstreamStatusMap, onWorkstreamStatusChange]);
     useEffect(() => {
         void agentRunId;
+        setSelectedArtifactPath(null);
         workstreamFetchFailedRef.current = false;
         setIsWorkstreamQueryUnavailable(false);
         setQueriedActiveWorkstreams([]);
@@ -1171,7 +1241,12 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             type: AgentMessageType.QUESTION,
             message: messageContent,
             workstream_id: 'main',
-            details: { _optimistic: true, _messageId: messageId, _deliveryStatus: 'sending' },
+            details: {
+                _optimistic: true,
+                _messageId: messageId,
+                _deliveryStatus: 'sending',
+                ...(inputMetadata?.editing_action ? { editing_action: inputMetadata.editing_action } : {}),
+            },
         };
         addOptimisticMessage(optimisticMessage);
         const metadata = {
@@ -1232,6 +1307,14 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
         t,
         waitForPendingToolApprovalModeChange,
     ]);
+    useEffect(() => {
+        if (sendMessageRef)
+            sendMessageRef.current = handleSendMessage;
+        return () => {
+            if (sendMessageRef?.current === handleSendMessage)
+                sendMessageRef.current = null;
+        };
+    }, [handleSendMessage, sendMessageRef]);
     // After the user connects an MCP server requested via request_mcp_connection, flag the
     // conversation for tool re-discovery and resume it with a confirmation message so the agent
     // continues automatically with the newly-available tools.
@@ -1530,13 +1613,28 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
             return false;
         }).length;
     }, [messages]);
+    const selectedArtifactRefresh = useMemo(() => {
+        if (!selectedArtifactPath)
+            return { key: artifactRefreshKey, details: undefined };
+        let key = 0;
+        let details;
+        for (const message of messages) {
+            const candidate = message.details;
+            if (!isArtifactRefreshEvent(candidate, selectedArtifactPath))
+                continue;
+            key++;
+            details = candidate;
+        }
+        return { key, details };
+    }, [artifactRefreshKey, messages, selectedArtifactPath]);
+    const canCollaborateWithArtifacts = interactive && isPlaybackLive && effectiveWorkflowStatus?.toUpperCase() === 'RUNNING';
     // 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]);
-    const renderConversationHeader = (variant) => (_jsx(Header, { title: actualTitle, variant: variant, isCompleted: effectiveIsCompleted, isTerminal: isWorkflowTerminal, onClose: onClose, isModal: isModal, agentRunId: agentRunId, workflowRunId: workflowRunId || '', viewMode: viewMode, onViewModeChange: handleViewModeChange, showPlanPanel: showRightPanelProp && showSlidingPanel, hasPlan: showRightPanelProp && plans.length > 0, showPlanButton: showRightPanelProp && !conversationTab, onTogglePlanPanel: handleTogglePlanPanel, showPlaybackButton: canShowPlaybackToggle, isPlaybackEnabled: isPlaybackEnabled, onTogglePlayback: handleTogglePlayback, onDownload: downloadConversation, onExportFixture: exportReplayFixture, resetWorkflow: resetWorkflow, onClone: onClone, onShowDetails: onShowDetails, allowWorkflowControl: allowWorkflowControl, onExportPdf: exportConversationPdf, isReceivingChunks: debugChunkFlash }));
+    const renderConversationHeader = (variant) => (_jsx(Header, { title: actualTitle, variant: variant, isCompleted: effectiveIsCompleted, isTerminal: isWorkflowTerminal, onClose: onClose, isModal: isModal, agentRunId: agentRunId, workflowRunId: workflowRunId || '', viewMode: viewMode, onViewModeChange: handleViewModeChange, showPlanPanel: isRightPanelVisible, hasPlan: showRightPanelProp && plans.length > 0, showPlanButton: showRightPanelProp && !conversationTab, onTogglePlanPanel: handleTogglePlanPanel, showPlaybackButton: canShowPlaybackToggle, isPlaybackEnabled: isPlaybackEnabled, onTogglePlayback: handleTogglePlayback, onDownload: downloadConversation, onExportFixture: exportReplayFixture, resetWorkflow: resetWorkflow, onClone: onClone, onShowDetails: onShowDetails, allowWorkflowControl: allowWorkflowControl, onExportPdf: exportConversationPdf, isReceivingChunks: debugChunkFlash }));
     // Conversation area inner content — shared between main layout and conversationTab mode
     const conversationAreaJsx = (_jsxs("div", { ref: conversationRef, "data-agent-playback-enabled": isPlaybackEnabled || undefined, "data-agent-playback-cursor": isPlaybackEnabled ? clampedPlaybackCursor : undefined, "data-agent-live-message-count": messages.length, "data-agent-rendered-message-count": displayedMessages.length, className: cn('flex flex-col min-h-0 min-w-0 border-0', conversationTab
             ? 'flex-1 h-full'
@@ -1544,13 +1642,13 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
                 ? 'w-full flex-1 min-h-[50vh]'
                 : fullWidth
                     ? 'flex-1 w-full'
-                    : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`), children: [!hideHeader && headerVariant === 'compact' && (_jsx("div", { className: "flex flex-shrink-0 justify-end border-b border-border/60 px-2 py-1 lg:hidden", children: renderConversationHeader('compact') })), !hideHeader && headerVariant !== 'compact' && (_jsx("div", { className: "flex-shrink-0", children: renderConversationHeader(headerVariant) })), isPlaybackEnabled && (_jsx("div", { className: "flex flex-shrink-0 justify-end px-2 py-1.5", children: _jsx(AgentChatPlaybackControls, { cursor: clampedPlaybackCursor, messages: playbackSourceMessages, onChangeCursor: handleChangePlaybackCursor }) })), messages.length === 0 && !effectiveIsCompleted && pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx(AllMessagesMixed, { messages: displayedMessages, workstreamSourceMessages: messages, bottomRef: bottomRef, isCompleted: displayedIsCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showRightPanelProp && showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: displayedStreamingMessages, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, 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, initialRequestData: initialRequestData, initialRequestSchema: initialRequestSchema, initialRequestTitle: initialRequestTitle, initialRequestTemplate: initialRequestTemplate, showInitialRequest: initialHistoryStatus === 'empty' && messages.length === 0, hiddenMessageTypes: hiddenMessageTypes, disableAutoScroll: !isPlaybackLive, renderRequestInputControls: !shouldShowRequestInputOverlay, activeWorkstream: activeWorkstream, onActiveWorkstreamChange: setActiveWorkstream })), shouldShowRequestInputOverlay ? (_jsx(AgentRequestInputOverlay, { message: pendingRequestInputMessage, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onMcpConnected: isPlaybackLive ? handleMcpConnected : undefined, disabled: isUploading || !isPlaybackLive, isLoading: isSending || isUploading })) : isViewingPlaybackHistory && playbackActiveWorkstreams.length > 0 ? (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: _jsx(ActiveWorkstreamsSummary, { activeWorkstreams: playbackActiveWorkstreams }) })) : (shouldRenderLiveMessageInputArea && (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: isFailed ? (
+                    : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`), children: [!hideHeader && headerVariant === 'compact' && (_jsx("div", { className: "flex flex-shrink-0 justify-end border-b border-border/60 px-2 py-1 lg:hidden", children: renderConversationHeader('compact') })), !hideHeader && headerVariant !== 'compact' && (_jsx("div", { className: "flex-shrink-0", children: renderConversationHeader(headerVariant) })), isPlaybackEnabled && (_jsx("div", { className: "flex flex-shrink-0 justify-end px-2 py-1.5", children: _jsx(AgentChatPlaybackControls, { cursor: clampedPlaybackCursor, messages: playbackSourceMessages, onChangeCursor: handleChangePlaybackCursor }) })), messages.length === 0 && !effectiveIsCompleted && pendingStartMessage && pendingStartTimestamp ? (_jsx(PendingStartConversation, { message: pendingStartMessage, startedAt: pendingStartTimestamp })) : (_jsx(AllMessagesMixed, { messages: displayedMessages, workstreamSourceMessages: messages, bottomRef: bottomRef, isCompleted: displayedIsCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showRightPanelProp && showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: displayedStreamingMessages, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onOpenArtifact: showArtifacts ? handleOpenArtifact : undefined, 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, initialRequestData: initialRequestData, initialRequestSchema: initialRequestSchema, initialRequestTitle: initialRequestTitle, initialRequestTemplate: initialRequestTemplate, showInitialRequest: initialHistoryStatus === 'empty' && messages.length === 0, hiddenMessageTypes: hiddenMessageTypes, disableAutoScroll: !isPlaybackLive, renderRequestInputControls: !shouldShowRequestInputOverlay, activeWorkstream: activeWorkstream, onActiveWorkstreamChange: setActiveWorkstream })), shouldShowRequestInputOverlay ? (_jsx(AgentRequestInputOverlay, { message: pendingRequestInputMessage, onSendMessage: isPlaybackLive ? handleSendMessage : undefined, onMcpConnected: isPlaybackLive ? handleMcpConnected : undefined, disabled: isUploading || !isPlaybackLive, isLoading: isSending || isUploading })) : isViewingPlaybackHistory && playbackActiveWorkstreams.length > 0 ? (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: _jsx(ActiveWorkstreamsSummary, { activeWorkstreams: playbackActiveWorkstreams }) })) : (shouldRenderLiveMessageInputArea && (_jsx("div", { className: "flex-shrink-0 pb-safe-area", children: isFailed ? (
                 // FAILED takes priority over every other branch so the composer can
                 // never render for a failed run. Use the caller's action when provided,
                 // otherwise fall back to the default failed message box.
                 (failedAction ?? (_jsx(MessageBox, { status: "error", icon: null, className: "m-2", children: "This Workflow is FAILED" })))) : effectiveWorkflowStatus &&
                     effectiveWorkflowStatus !== 'RUNNING' &&
-                    !canContinueConversation ? (viewMode === 'sliding' && effectiveWorkflowStatus === 'COMPLETED' ? (_jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-3 text-sm text-muted", children: _jsxs("div", { className: "flex items-center gap-2 border-t border-success/25 pt-3 text-success", children: [_jsx(CheckCircle, { className: "size-4" }), _jsx("span", { className: "font-medium", children: "Workflow completed" })] }) })) : (_jsxs(MessageBox, { status: effectiveWorkflowStatus === 'COMPLETED' ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] }))) : ((showInput || canContinueConversation) && (_jsx(MessageInput, { onSend: handleSendMessage, onStop: allowWorkflowControl ? handleStopWorkflow : undefined, approvalModeSlot: interactive && toolApprovalMode ? (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: handleToolApprovalModeChange, disabled: !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl })) : undefined, mcpSlot: _jsx(McpConnectionsActionMenu, { disabledCollections: mcpDisabled, onChange: handleMcpDisabledChange, onConnectionChange: handleMcpConnectionChange }), disabled: isUploading || !isPlaybackLive, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !effectiveIsCompleted, isCompleted: effectiveIsCompleted, contextWindowUsage: canCompactContext ? contextWindowUsage : undefined, onCompactContext: canCompactContext ? handleCompactContext : undefined, isCompactingContext: isCompactingContext, activeTaskCount: activeTaskCount, activeWorkstreams: composerActiveWorkstreams, placeholder: composerPlaceholder, onFilesSelected: canUploadFiles ? handleFileUpload : undefined, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, onRemoveProcessingFile: handleRemoveProcessingFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles, processingFiles: processingFiles, artifactRunId: agentRunId, hasProcessingFiles: hasProcessingFiles, renderDocumentSearch: renderDocumentSearch, selectedDocuments: selectedDocuments, onRemoveDocument: onRemoveDocument, hideObjectLinking: hideObjectLinking, hideFileUpload: !canUploadFiles, disableDropZone: canUploadFiles, className: inputContainerClassName, inputClassName: inputClassName }))) })))] }));
+                    !canContinueConversation ? (viewMode === 'sliding' && effectiveWorkflowStatus === 'COMPLETED' ? (_jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-3 text-sm text-muted", children: _jsxs("div", { className: "flex items-center gap-2 border-t border-success/25 pt-3 text-success", children: [_jsx(CheckCircle, { className: "size-4" }), _jsx("span", { className: "font-medium", children: "Workflow completed" })] }) })) : (_jsxs(MessageBox, { status: effectiveWorkflowStatus === 'COMPLETED' ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] }))) : ((showInput || canContinueConversation) && (_jsxs(_Fragment, { children: [composerContext, _jsx(MessageInput, { onSend: handleSendMessage, onStop: allowWorkflowControl ? handleStopWorkflow : undefined, approvalModeSlot: interactive && toolApprovalMode ? (_jsx(AgentApprovalModeSelector, { mode: toolApprovalMode, onChange: handleToolApprovalModeChange, disabled: !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl })) : undefined, mcpSlot: _jsx(McpConnectionsActionMenu, { disabledCollections: mcpDisabled, onChange: handleMcpDisabledChange, onConnectionChange: handleMcpConnectionChange }), disabled: isUploading || !isPlaybackLive, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !effectiveIsCompleted, isCompleted: effectiveIsCompleted, contextWindowUsage: canCompactContext ? contextWindowUsage : undefined, onCompactContext: canCompactContext ? handleCompactContext : undefined, isCompactingContext: isCompactingContext, activeTaskCount: activeTaskCount, activeWorkstreams: composerActiveWorkstreams, placeholder: composerPlaceholder, onFilesSelected: canUploadFiles ? handleFileUpload : undefined, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, onRemoveProcessingFile: handleRemoveProcessingFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles, processingFiles: processingFiles, artifactRunId: agentRunId, hasProcessingFiles: hasProcessingFiles, renderDocumentSearch: renderDocumentSearch, selectedDocuments: selectedDocuments, onRemoveDocument: onRemoveDocument, hideObjectLinking: hideObjectLinking, hideFileUpload: !canUploadFiles, disableDropZone: canUploadFiles, className: inputContainerClassName, inputClassName: inputClassName })] }))) })))] }));
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
     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', canUploadFiles && isDragOver && 'ring-2 ring-blue-400 ring-inset', className), onDragEnter: canUploadFiles ? handleDragEnter : undefined, onDragOver: canUploadFiles ? handleDragOver : undefined, onDragLeave: canUploadFiles ? handleDragLeave : undefined, onDrop: canUploadFiles ? handleDrop : undefined, children: [canUploadFiles && 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, !conversationTab && headerVariant === 'compact' && !hideHeader && (_jsx("div", { className: "hidden h-full w-12 shrink-0 items-start justify-center px-1 pt-2 lg:flex", children: renderConversationHeader('compact') })), isRightPanelVisible && (_jsxs(_Fragment, { children: [!conversationTab && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize right panel", "aria-valuenow": Math.round(rightPanelWidth), "aria-valuemin": 300, "aria-valuetext": `${Math.round(rightPanelWidth)} pixels`, tabIndex: 0, className: "hidden lg:block lg:w-1 lg:shrink-0 cursor-col-resize bg-border/70 hover:bg-border transition-colors", onMouseDown: () => setIsRightPanelResizing(true), onKeyDown: (event) => {
                                     if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
@@ -1584,7 +1682,7 @@ workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionL
                                     // Uploads
                                     processingFiles: processingFilesProp ?? processingFiles, 
                                     // Artifacts
-                                    showArtifacts: showArtifacts, artifactRefreshKey: artifactRefreshKey, 
+                                    showArtifacts: showArtifacts, artifactRefreshKey: selectedArtifactRefresh.key, artifactRefreshDetails: selectedArtifactRefresh.details, selectedArtifactPath: selectedArtifactPath, onSelectedArtifactPathChange: setSelectedArtifactPath, onSendMessage: canCollaborateWithArtifacts ? handleSendMessage : undefined, 
                                     // Messages (for workstreams tab context)
                                     messages: messages, 
                                     // Payload content