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

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

@@ -30,6 +30,11 @@ import {
 } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
+import {
+    type AgentResourceResolver,
+    AgentResourceResolverProvider,
+    isArtifactRefreshEvent,
+} from '@vertesia/ui/widgets';
 import { ArrowUpIcon, Bot, CheckCircle, Cpu, FileTextIcon, UploadIcon, XIcon } from 'lucide-react';
 import type React from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -69,6 +74,7 @@ import {
     getConversationUrl,
     getWorkstreamId,
     isInProgress,
+    isPassiveArtifactUpdate,
 } from './ModernAgentOutput/utils';
 import {
     type AgentChatPlaybackCursor,
@@ -97,6 +103,8 @@ export type StartWorkflowFn = (
     options?: StartWorkflowOptions,
 ) => Promise<{ agent_run_id: string } | undefined>;
 
+export type SendAgentMessageFn = (message: string, inputMetadata?: Record<string, unknown>) => void;
+
 const EMPTY_STREAMING_MESSAGES = new Map<string, never>();
 
 function getTimestampMs(timestamp: number | string | undefined): number {
@@ -533,6 +541,12 @@ function downloadJsonFile(filename: string, payload: unknown) {
 export interface ModernAgentConversationProps {
     /** Stable AgentRun ID — the primary identifier for all runtime operations. */
     agentRunId?: string;
+    /**
+     * Optional override for mapping agent resource references (documents, collections, interactions,
+     * ...) to navigation or activation targets in the chat. This overrides an inherited
+     * AgentResourceResolverProvider; without either, resources remain non-interactive.
+     */
+    resourceResolver?: AgentResourceResolver;
     title?: string;
     interactive?: boolean;
     onClose?: () => void;
@@ -567,6 +581,12 @@ export interface ModernAgentConversationProps {
 
     /** Ref populated with the internal file upload handler for external triggering */
     fileUploadRef?: React.MutableRefObject<((files: File[]) => void) | null>;
+    /** Ref populated with the internal message sender for document or artifact collaboration controls. */
+    sendMessageRef?: React.MutableRefObject<SendAgentMessageFn | null>;
+    /** Called for each live message delivered after the conversation stream connects. */
+    onMessage?: (message: AgentMessage) => void;
+    /** Called when the main agent turn starts or reaches an idle/terminal state. */
+    onAgentWorkingChange?: (isWorking: boolean) => void;
     /** Called when processingFiles state changes (for external progress display) */
     onProcessingFilesChange?: (files: Map<string, ConversationFile>) => void;
     /** Processing files to display in the right panel Uploads tab */
@@ -607,6 +627,8 @@ export interface ModernAgentConversationProps {
     hideHeader?: boolean;
     /** Header density. Use compact when the surrounding page already identifies the run. */
     headerVariant?: 'full' | 'compact';
+    /** Start-screen layout. Compact removes empty history; expanded-composer gives that space to the first input. */
+    startViewVariant?: 'default' | 'compact' | 'expanded-composer';
     /** Hide the internal message input (for apps that render their own) */
     hideMessageInput?: boolean;
     /** Custom action shown in place of the input box when the run status is FAILED.
@@ -643,6 +665,8 @@ export interface ModernAgentConversationProps {
     inputContainerClassName?: string;
     /** Additional className for the input field */
     inputClassName?: string;
+    /** Read-only context rendered immediately above the live conversation composer. */
+    composerContext?: React.ReactNode;
 
     /** Additional className for the root container */
     className?: string;
@@ -708,14 +732,19 @@ export interface ModernAgentConversationProps {
 }
 
 export function ModernAgentConversation(props: ModernAgentConversationProps) {
-    const { agentRunId, startWorkflow } = props;
+    const { agentRunId, startWorkflow, resourceResolver } = props;
 
     if (agentRunId) {
-        return (
+        const conversation = (
             <SkillWidgetProvider>
                 <ModernAgentConversationInner {...props} agentRunId={agentRunId} />
             </SkillWidgetProvider>
         );
+        return resourceResolver ? (
+            <AgentResourceResolverProvider value={resourceResolver}>{conversation}</AgentResourceResolverProvider>
+        ) : (
+            conversation
+        );
     } else if (startWorkflow) {
         // If we have startWorkflow capability but no agentRunId yet
         return <StartWorkflowView {...props} />;
@@ -758,13 +787,17 @@ function StartWorkflowView({
     hideFileUpload = false,
     hideObjectLinking,
     headerVariant,
+    startViewVariant = 'default',
     inputContainerClassName,
     inputClassName,
     className,
     allowWorkflowControl,
     initialToolApprovalMode,
+    onAgentWorkingChange,
 }: ModernAgentConversationProps) {
     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');
@@ -785,6 +818,10 @@ function StartWorkflowView({
     // Staged files - stored locally until workflow starts
     const [stagedFiles, setStagedFiles] = useState<File[]>([]);
 
+    useEffect(() => {
+        onAgentWorkingChange?.(isSending);
+    }, [isSending, onAgentWorkingChange]);
+
     // Drag and drop state
     const [isDragOver, setIsDragOver] = useState(false);
     const dragCounterRef = useRef(0);
@@ -1021,10 +1058,14 @@ function StartWorkflowView({
     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;
@@ -1049,6 +1090,7 @@ function StartWorkflowView({
                     inputClassName,
                     className,
                     allowWorkflowControl,
+                    onAgentWorkingChange,
                 }}
                 agentRunId={startedAgentRunId}
                 title={title}
@@ -1060,11 +1102,18 @@ function StartWorkflowView({
     }
 
     return (
-        <div className={cn('flex h-full flex-col items-center bg-background', className)}>
+        <div
+            className={cn(
+                'flex flex-col items-center bg-background',
+                isCompactStartView && !isExpandedStartComposer ? '' : 'h-full',
+                className,
+            )}
+        >
             {/* biome-ignore lint/a11y/noStaticElementInteractions: drag/drop target only; file selection is also exposed via the upload button. */}
             <div
                 className={cn(
-                    'relative flex h-full w-full flex-col overflow-hidden border-0',
+                    'relative flex w-full flex-col overflow-hidden border-0',
+                    isCompactStartView && !isExpandedStartComposer ? '' : 'h-full',
                     fullWidth ? '' : 'max-w-4xl',
                 )}
                 onDragEnter={canStageFiles ? handleDragEnter : undefined}
@@ -1120,11 +1169,21 @@ function StartWorkflowView({
                 )}
 
                 {/* Empty conversation area with instructions */}
-                <div className="flex flex-1 flex-col items-center justify-end overflow-y-auto bg-background px-4">
+                <div
+                    className={cn(
+                        'flex flex-col items-center justify-end bg-background px-4',
+                        isCompactStartView ? 'shrink-0 pt-3' : 'flex-1 overflow-y-auto',
+                    )}
+                >
                     {pendingStartMessage && pendingStartTimestamp ? (
                         <PendingStartConversation message={pendingStartMessage} startedAt={pendingStartTimestamp} />
                     ) : (
-                        <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end py-8">
+                        <div
+                            className={cn(
+                                'mx-auto flex w-full max-w-3xl flex-col justify-end',
+                                isCompactStartView ? '' : 'min-h-full py-8',
+                            )}
+                        >
                             {initialMessage && (
                                 <div className="text-[15px] leading-relaxed text-foreground/80">{initialMessage}</div>
                             )}
@@ -1133,10 +1192,16 @@ function StartWorkflowView({
                 </div>
 
                 {/* Input Area */}
-                <div className="shrink-0 bg-background px-4 pb-safe-area-4 pt-2">
+                <div
+                    className={cn(
+                        'bg-background px-4 pb-safe-area-4 pt-2',
+                        isExpandedStartComposer ? 'flex min-h-0 flex-1 flex-col' : 'shrink-0',
+                    )}
+                >
                     <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,
                         )}
                     >
@@ -1176,9 +1241,14 @@ function StartWorkflowView({
                             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={{ minHeight: '72px', maxHeight: '200px' }}
+                            style={
+                                isExpandedStartComposer
+                                    ? { minHeight: '72px', maxHeight: 'none' }
+                                    : { minHeight: '72px', maxHeight: '200px' }
+                            }
                         />
 
                         <div className="flex items-center justify-between gap-3">
@@ -1274,10 +1344,14 @@ function ModernAgentConversationInner({
     className,
     inputContainerClassName,
     inputClassName,
+    composerContext,
     // Fusion fragment data
     fusionData,
     // External file upload API
     fileUploadRef,
+    sendMessageRef,
+    onMessage,
+    onAgentWorkingChange,
     onProcessingFilesChange,
     processingFiles: processingFilesProp,
     // External plan panel API
@@ -1338,7 +1412,7 @@ function ModernAgentConversationInner({
         agentRunStatus,
         workflowRunId,
         serverFileUpdates,
-    } = useAgentStream(client, agentRunId);
+    } = useAgentStream(client, agentRunId, onMessage);
 
     const {
         plans,
@@ -1548,9 +1622,10 @@ function ModernAgentConversationInner({
     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(
@@ -1573,11 +1648,20 @@ function ModernAgentConversationInner({
     );
     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]);
@@ -1672,15 +1756,6 @@ function ModernAgentConversationInner({
     // ────────────────────────────────────────────
     // 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);
@@ -1695,17 +1770,44 @@ function ModernAgentConversationInner({
     const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>(
         conversationContent || conversationTab ? 'conversation' : 'plan',
     );
+    const [selectedArtifactPath, setSelectedArtifactPath] = useState<string | null>(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);
@@ -1747,10 +1849,44 @@ function ModernAgentConversationInner({
     }, [isRightPanelResizing]);
 
     const handleCloseRightPanel = useCallback(() => {
+        setRightPanelManuallyClosed(true);
         setShowSlidingPanel(false);
         handleCloseDocPanel();
     }, [setShowSlidingPanel, handleCloseDocPanel]);
 
+    const handleOpenArtifact = useCallback(
+        (path: string) => {
+            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<string | null>(null);
+    useEffect(() => {
+        let target: string | undefined;
+        let marker: string | undefined;
+        for (const message of messages) {
+            const details = message.details as Record<string, unknown> | undefined;
+            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 }: { href: string; documentId: string; children: React.ReactNode }) => (
@@ -1801,6 +1937,7 @@ function ModernAgentConversationInner({
 
     useEffect(() => {
         void agentRunId;
+        setSelectedArtifactPath(null);
         workstreamFetchFailedRef.current = false;
         setIsWorkstreamQueryUnavailable(false);
         setQueriedActiveWorkstreams([]);
@@ -1978,7 +2115,12 @@ function ModernAgentConversationInner({
                 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);
@@ -2049,6 +2191,13 @@ function ModernAgentConversationInner({
         ],
     );
 
+    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.
@@ -2382,6 +2531,21 @@ function ModernAgentConversationInner({
             return false;
         }).length;
     }, [messages]);
+    const selectedArtifactRefresh = useMemo(() => {
+        if (!selectedArtifactPath) return { key: artifactRefreshKey, details: undefined };
+
+        let key = 0;
+        let details: Record<string, unknown> | undefined;
+        for (const message of messages) {
+            const candidate = message.details as Record<string, unknown> | undefined;
+            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(
@@ -2405,7 +2569,7 @@ function ModernAgentConversationInner({
             workflowRunId={workflowRunId || ''}
             viewMode={viewMode}
             onViewModeChange={handleViewModeChange}
-            showPlanPanel={showRightPanelProp && showSlidingPanel}
+            showPlanPanel={isRightPanelVisible}
             hasPlan={showRightPanelProp && plans.length > 0}
             showPlanButton={showRightPanelProp && !conversationTab}
             onTogglePlanPanel={handleTogglePlanPanel}
@@ -2479,6 +2643,7 @@ function ModernAgentConversationInner({
                     taskLabels={taskLabels}
                     streamingMessages={displayedStreamingMessages}
                     onSendMessage={isPlaybackLive ? handleSendMessage : undefined}
+                    onOpenArtifact={showArtifacts ? handleOpenArtifact : undefined}
                     messageItemClassNames={messageItemClassNames}
                     messageStyleOverrides={messageStyleOverrides}
                     toolCallGroupClassNames={toolCallGroupClassNames}
@@ -2551,56 +2716,59 @@ function ModernAgentConversationInner({
                             )
                         ) : (
                             (showInput || canContinueConversation) && (
-                                <MessageInput
-                                    onSend={handleSendMessage}
-                                    onStop={allowWorkflowControl ? handleStopWorkflow : undefined}
-                                    approvalModeSlot={
-                                        interactive && toolApprovalMode ? (
-                                            <AgentApprovalModeSelector
-                                                mode={toolApprovalMode}
-                                                onChange={handleToolApprovalModeChange}
-                                                disabled={
-                                                    !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl
-                                                }
+                                <>
+                                    {composerContext}
+                                    <MessageInput
+                                        onSend={handleSendMessage}
+                                        onStop={allowWorkflowControl ? handleStopWorkflow : undefined}
+                                        approvalModeSlot={
+                                            interactive && toolApprovalMode ? (
+                                                <AgentApprovalModeSelector
+                                                    mode={toolApprovalMode}
+                                                    onChange={handleToolApprovalModeChange}
+                                                    disabled={
+                                                        !isPlaybackLive || isWorkflowTerminal || !allowWorkflowControl
+                                                    }
+                                                />
+                                            ) : undefined
+                                        }
+                                        mcpSlot={
+                                            <McpConnectionsActionMenu
+                                                disabledCollections={mcpDisabled}
+                                                onChange={handleMcpDisabledChange}
+                                                onConnectionChange={handleMcpConnectionChange}
                                             />
-                                        ) : undefined
-                                    }
-                                    mcpSlot={
-                                        <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}
-                                />
+                                        }
+                                        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}
+                                    />
+                                </>
                             )
                         )}
                     </div>
@@ -2717,7 +2885,11 @@ function ModernAgentConversationInner({
                                     processingFiles={processingFilesProp ?? processingFiles}
                                     // Artifacts
                                     showArtifacts={showArtifacts}
-                                    artifactRefreshKey={artifactRefreshKey}
+                                    artifactRefreshKey={selectedArtifactRefresh.key}
+                                    artifactRefreshDetails={selectedArtifactRefresh.details}
+                                    selectedArtifactPath={selectedArtifactPath}
+                                    onSelectedArtifactPathChange={setSelectedArtifactPath}
+                                    onSendMessage={canCollaborateWithArtifacts ? handleSendMessage : undefined}
                                     // Messages (for workstreams tab context)
                                     messages={messages}
                                     // Payload content

package/src/features/agent/chat/ModernAgentOutput/AgentMarkdownAnchor.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from '@testing-library/react';
+import type React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
+
+afterEach(() => cleanup());
+
+describe('createAgentMarkdownAnchor', () => {
+    it.each([
+        'https://example.com/store/objects/doc-1?view=full#section',
+        '//example.com/store/collections/col-1?view=full#section',
+    ])('keeps external resource-shaped URLs external: %s', (href) => {
+        const StoreLinkComponent = vi.fn(() => null);
+        const CollectionLinkComponent = vi.fn(() => null);
+        const Anchor = createAgentMarkdownAnchor({ StoreLinkComponent, CollectionLinkComponent });
+
+        render(<Anchor href={href}>External</Anchor>);
+
+        expect(screen.getByRole('link', { name: 'External' }).getAttribute('href')).toBe(href);
+        expect(screen.getByRole('link', { name: 'External' }).getAttribute('target')).toBe('_blank');
+        expect(StoreLinkComponent).not.toHaveBeenCalled();
+        expect(CollectionLinkComponent).not.toHaveBeenCalled();
+    });
+
+    it('passes a clean document id and styling to the host document link', () => {
+        const StoreLinkComponent = ({
+            href,
+            documentId,
+            className,
+            children,
+        }: {
+            href: string;
+            documentId: string;
+            className?: string;
+            children: React.ReactNode;
+        }) => (
+            <a href={href} className={className} data-document-id={documentId}>
+                {children}
+            </a>
+        );
+        const Anchor = createAgentMarkdownAnchor({
+            StoreLinkComponent,
+            addStickyParams: (href) => `${href}&a=account-1`,
+        });
+
+        render(
+            <Anchor href="/store/objects/doc-1?revision=rev-1#properties" className="resource-link">
+                Document
+            </Anchor>,
+        );
+
+        const link = screen.getByRole('link', { name: 'Document' });
+        expect(link.getAttribute('data-document-id')).toBe('doc-1');
+        expect(link.getAttribute('href')).toBe('/store/objects/doc-1?revision=rev-1#properties&a=account-1');
+        expect(link.className).toBe('resource-link');
+    });
+
+    it('passes a clean collection id to the host collection link', () => {
+        const CollectionLinkComponent = ({
+            href,
+            collectionId,
+            children,
+        }: {
+            href: string;
+            collectionId: string;
+            children: React.ReactNode;
+        }) => (
+            <a href={href} data-collection-id={collectionId}>
+                {children}
+            </a>
+        );
+        const Anchor = createAgentMarkdownAnchor({ CollectionLinkComponent });
+
+        render(<Anchor href="/store/collections/col-1?tab=objects#top">Collection</Anchor>);
+
+        expect(screen.getByRole('link', { name: 'Collection' }).getAttribute('data-collection-id')).toBe('col-1');
+    });
+});