@vertesia/ui 1.0.0 → 1.1.0-dev.20260427.060440Z

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

@@ -100,8 +100,8 @@ interface ModernAgentConversationProps {
     resetWorkflow?: () => void;
     /** Called after a restart succeeds — receives the new AgentRun for navigation */
     onRestart?: (newRun: AgentRun) => void;
-    /** Called after a fork succeeds — receives the new AgentRun for navigation */
-    onFork?: (newRun: AgentRun) => void;
+    /** Called after a clone succeeds — receives the new AgentRun for navigation */
+    onClone?: (newRun: AgentRun) => void;
     /** Called to show run details/internals modal */
     onShowDetails?: () => void;
 
@@ -169,6 +169,8 @@ interface ModernAgentConversationProps {
     showArtifacts?: boolean;
     /** Hide the document preview panel that auto-opens on create_document */
     hideDocumentPanel?: boolean;
+    /** Message types to exclude from the conversation view */
+    hiddenMessageTypes?: AgentMessageType[];
 
     // Callback to get attached documents when sending messages
     // Returns array of { id, name } to include in message metadata and display
@@ -673,7 +675,7 @@ function ModernAgentConversationInner({
     placeholder,
     resetWorkflow,
     onRestart,
-    onFork,
+    onClone,
     onShowDetails,
     // File upload props (onFilesSelected handled internally by handleFileUpload)
     uploadedFiles,
@@ -695,6 +697,7 @@ function ModernAgentConversationInner({
     hideFileUpload,
     showArtifacts = false,
     hideDocumentPanel: _hideDocumentPanel,
+    hiddenMessageTypes,
     // Attachment callback
     getAttachedDocs,
     onAttachmentsSent,
@@ -759,7 +762,8 @@ function ModernAgentConversationInner({
         debugChunkFlash,
         addOptimisticMessage,
         removeOptimisticMessages,
-        workflowStatus,
+        agentRunStatus,
+        workflowRunId,
         serverFileUpdates,
     } = useAgentStream(client, agentRunId);
 
@@ -782,6 +786,7 @@ function ModernAgentConversationInner({
         closeDocument: handleCloseDocument,
         selectDocument,
         openDocInPanel,
+        updateDocumentTitle,
     } = useDocumentPanel(messages);
 
     const {
@@ -810,6 +815,7 @@ function ModernAgentConversationInner({
     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);
 
@@ -819,13 +825,32 @@ function ModernAgentConversationInner({
     const hasProcessingFilesRef = useRef(hasProcessingFiles);
     hasProcessingFilesRef.current = hasProcessingFiles;
 
-    // Derive effective workflow status — only main workstream TERMINATED overrides API status.
-    const effectiveWorkflowStatus = useMemo(() => {
+    const lastMainMessage = useMemo(() => {
         const mainMessages = messages.filter(m => (m.workstream_id || 'main') === 'main');
-        const lastMain = mainMessages[mainMessages.length - 1];
-        if (lastMain?.type === AgentMessageType.TERMINATED) return "TERMINATED";
-        return workflowStatus;
-    }, [messages, workflowStatus]);
+        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,
@@ -865,7 +890,7 @@ function ModernAgentConversationInner({
     }, [plans, activePlanIndex, workstreamStatusMap]);
 
     const panelWorkstreams = useMemo<WorkstreamInfo[]>(() => {
-        return activeWorkstreams.map((ws) => ({
+        const running: WorkstreamInfo[] = activeWorkstreams.map((ws) => ({
             workstream_id: ws.workstream_id,
             launch_id: ws.launch_id,
             elapsed_ms: ws.elapsed_ms,
@@ -876,7 +901,16 @@ function ModernAgentConversationInner({
             child_workflow_id: ws.child_workflow_id,
             child_workflow_run_id: ws.child_workflow_run_id,
         }));
-    }, [activeWorkstreams]);
+        const completed: WorkstreamInfo[] = completedWorkstreams.map((ws) => ({
+            workstream_id: ws.workstream_id,
+            launch_id: ws.launch_id,
+            elapsed_ms: 0,
+            deadline_ms: 0,
+            remaining_ms: 0,
+            status: ws.status,
+        }));
+        return [...running, ...completed];
+    }, [activeWorkstreams, completedWorkstreams]);
 
     // ────────────────────────────────────────────
     // Stable callbacks
@@ -897,8 +931,8 @@ function ModernAgentConversationInner({
     // ────────────────────────────────────────────
     // Unified right panel state
     // ────────────────────────────────────────────
-    type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'conversation';
-    const [rightPanelTab, _setRightPanelTab] = useState<RightPanelTab>((conversationContent || conversationTab) ? 'conversation' : 'plan');
+    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);
 
@@ -963,12 +997,13 @@ const handleCloseRightPanel = useCallback(() => {
                     e.preventDefault();
                     e.stopPropagation();
                     openDocInPanel(documentId);
+                    setRightPanelTab('documents');
                 }}
             >
                 {children}
             </a>
         ),
-        [openDocInPanel]
+        [openDocInPanel, setRightPanelTab]
     );
 
     const effectiveStoreLinkComponent = StoreLinkComponent ?? internalStoreLinkComponent;
@@ -1025,6 +1060,12 @@ const handleCloseRightPanel = useCallback(() => {
                 const result = await client.agents.getActiveWorkstreams(agentRunId);
                 if (isCancelled) return;
                 setActiveWorkstreams(result.running ?? []);
+                const completed = (result as unknown as { completed?: Array<{ launch_id: string; workstream_id: string; status: string }> }).completed ?? [];
+                setCompletedWorkstreams(completed.map(c => ({
+                    launch_id: c.launch_id,
+                    workstream_id: c.workstream_id,
+                    status: c.status === 'canceled' ? 'canceled' : 'completed',
+                })));
                 workstreamFetchFailedRef.current = false;
             } catch (error) {
                 if (isCancelled) return;
@@ -1045,6 +1086,15 @@ const handleCloseRightPanel = useCallback(() => {
         };
     }, [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;
@@ -1268,16 +1318,6 @@ const handleCloseRightPanel = useCallback(() => {
         }
     };
 
-    // Handle copying run ID
-    const copyRunId = () => {
-        navigator.clipboard.writeText(agentRunId);
-        toast({
-            status: "success",
-            title: t('agent.runIdCopied'),
-            duration: 2000,
-        });
-    };
-
     const [isPdfModalOpen, setIsPdfModalOpen] = useState(false);
 
     const exportConversationPdf = () => {
@@ -1367,9 +1407,11 @@ const handleCloseRightPanel = useCallback(() => {
                     <Header
                         title={actualTitle}
                         isCompleted={isCompleted}
+                        isTerminal={isWorkflowTerminal}
                         onClose={onClose}
                         isModal={isModal}
                         agentRunId={agentRunId}
+                        workflowRunId={workflowRunId || ''}
                         viewMode={viewMode}
                         onViewModeChange={handleViewModeChange}
                         showPlanPanel={showRightPanelProp && showSlidingPanel}
@@ -1377,10 +1419,9 @@ const handleCloseRightPanel = useCallback(() => {
                         showPlanButton={showRightPanelProp && !conversationTab}
                         onTogglePlanPanel={handleTogglePlanPanel}
                         onDownload={downloadConversation}
-                        onCopyRunId={copyRunId}
                         resetWorkflow={resetWorkflow}
                         onRestart={onRestart}
-                        onFork={onFork}
+                        onClone={onClone}
                         onShowDetails={onShowDetails}
                         onExportPdf={exportConversationPdf}
                         isReceivingChunks={debugChunkFlash}
@@ -1432,6 +1473,7 @@ const handleCloseRightPanel = useCallback(() => {
                     StoreLinkComponent={effectiveStoreLinkComponent}
                     CollectionLinkComponent={CollectionLinkComponent}
                     prependFriendlyMessage={prependFriendlyMessage}
+                    hiddenMessageTypes={hiddenMessageTypes}
                 />
             )}
 
@@ -1535,6 +1577,7 @@ const handleCloseRightPanel = useCallback(() => {
                         activeDocumentId={activeDocumentId}
                         onSelectDocument={selectDocument}
                         onCloseDocument={handleCloseDocument}
+                        onUpdateDocumentTitle={updateDocumentTitle}
                         docRefreshKey={docRefreshKey}
                         runId={agentRunId}
                         // Uploads
@@ -1551,6 +1594,8 @@ const handleCloseRightPanel = useCallback(() => {
                         // Panel control
                         onClose={handleCloseRightPanel}
                         defaultTab={rightPanelTab}
+                        activeTab={rightPanelTab}
+                        onTabChange={setRightPanelTab}
                     />
                     </div>
                 </>

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -166,6 +166,8 @@ interface AllMessagesMixedProps {
     /** Optional message to display as the first user message in the conversation.
      *  Purely visual/UI — not sent to temporal. Renders as a QUESTION MessageItem before real messages. */
     prependFriendlyMessage?: string;
+    /** Message types to exclude from the conversation view */
+    hiddenMessageTypes?: AgentMessageType[];
 }
 
 // PERFORMANCE: Throttle interval for auto-scroll (ms)
@@ -192,6 +194,7 @@ function AllMessagesMixedComponent({
     StoreLinkComponent,
     CollectionLinkComponent,
     prependFriendlyMessage,
+    hiddenMessageTypes,
 }: AllMessagesMixedProps) {
     if (!artifactRunId) {
         console.warn('[AllMessagesMixed] artifactRunId prop is missing!');
@@ -290,7 +293,11 @@ function AllMessagesMixedComponent({
     // Low-signal messages are suppressed at the source (server-side) via shouldSuppressLowSignalMessage
     const sortedMessages = React.useMemo(
         () => {
-            const sorted = [...messages].sort((a, b) => {
+            const filtered = hiddenMessageTypes?.length
+                ? messages.filter(m => !hiddenMessageTypes.includes(m.type))
+                : messages;
+
+            const sorted = [...filtered].sort((a, b) => {
                 const timeA = typeof a.timestamp === "number" ? a.timestamp : new Date(a.timestamp).getTime();
                 const timeB = typeof b.timestamp === "number" ? b.timestamp : new Date(b.timestamp).getTime();
                 return timeA - timeB;
@@ -310,7 +317,7 @@ function AllMessagesMixedComponent({
             }
             return deduped;
         },
-        [messages],
+        [messages, hiddenMessageTypes],
     );
 
     // Get workstreams from messages - only from message.workstream_id
@@ -439,13 +446,18 @@ function AllMessagesMixedComponent({
         // Check if each workstream is completed
         for (const [workstreamId, msgs] of workstreamMessages.entries()) {
             if (msgs.length > 0) {
-                const lastMessage = msgs[msgs.length - 1];
-                statusMap.set(workstreamId, [
-                    AgentMessageType.COMPLETE,
-                    AgentMessageType.IDLE,
-                    AgentMessageType.REQUEST_INPUT,
-                    AgentMessageType.TERMINATED
-                ].includes(lastMessage.type));
+                const isCompleted = msgs.some(m => {
+                    if ([AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT, AgentMessageType.TERMINATED].includes(m.type)) {
+                        return true;
+                    }
+                    // Workstream completion is sent as UPDATE with workstream_event: 'completed' or status: 'completed'/'canceled'
+                    if (m.type === AgentMessageType.UPDATE && m.details) {
+                        const d = m.details as Record<string, unknown>;
+                        return d.workstream_event === 'completed' || d.status === 'completed' || d.status === 'canceled';
+                    }
+                    return false;
+                });
+                statusMap.set(workstreamId, isCompleted);
             }
         }