@vertesia/ui 1.4.0-dev.20260615.051508Z → 1.4.0

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

@@ -30,6 +30,8 @@ export default function SlideInPanel({ isOpen, onClose, title, children, width =
         return null;
     }
 
+    const panelTranslateClass = isOpen ? 'translate-x-0' : 'translate-x-full rtl:-translate-x-full'; // rtl-ok: mirrored inline-end transform
+
     return (
         <>
             {/* Backdrop overlay */}
@@ -46,9 +48,7 @@ export default function SlideInPanel({ isOpen, onClose, title, children, width =
 
             {/* Slide-in panel */}
             <div
-                className={`fixed top-0 end-0 bottom-0 z-50 bg-white dark:bg-gray-900 shadow-lg border-s border-gray-200 dark:border-gray-800 transition-transform duration-300 ease-in-out ${
-                    isOpen ? 'translate-x-0' : 'translate-x-full rtl:-translate-x-full'
-                }`}
+                className={`fixed top-0 end-0 bottom-0 z-50 bg-white dark:bg-gray-900 shadow-lg border-s border-gray-200 dark:border-gray-800 transition-transform duration-300 ease-in-out ${panelTranslateClass}`}
                 style={{ width }}
             >
                 {/* Header */}

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

@@ -82,7 +82,7 @@ export default function SlidingMessages({ messages, isCompleted }: SlidingMessag
             {/* If no messages and not completed, show a placeholder thinking message */}
             {messages.length === 0 && !isCompleted && (
                 <div className="flex items-center justify-center flex-1 text-center py-8">
-                    <div className="flex items-center space-x-3 bg-blue-50 rounded-lg border border-blue-100 px-4 py-3">
+                    <div className="flex items-center gap-3 bg-blue-50 rounded-lg border border-blue-100 px-4 py-3">
                         <div className="text-sm text-blue-700 font-medium">
                             {ThinkingMessages[thinkingMessageIndex]}
                         </div>

package/src/features/agent/chat/ModernAgentOutput/SummaryConversation.ts

@@ -1,19 +1,28 @@
 import { type AgentMessage, AgentMessageType } from '@vertesia/common';
 import {
+    getWorkstreamActivityDetails,
     getWorkstreamLaunchDetails,
     isWorkstreamInternalResultMessage,
     isWorkstreamInternalResultText,
 } from '../workstreams.js';
+import { isToolApprovalRequestInput } from './requestInputMessages';
 import {
     isStreamReplacedByMessage,
     isToolActivityMessage,
     isToolPreambleMessage,
+    isUserStoppedMessage,
     type StreamingData,
     type ToolExecutionStatus,
 } from './utils';
 
 export type SummaryConversationItem =
     | { type: 'message'; message: AgentMessage }
+    | {
+          type: 'stopped';
+          message: AgentMessage;
+          startTimestamp: number | string;
+          endTimestamp: number | string;
+      }
     | {
           type: 'work';
           id: string;
@@ -154,14 +163,49 @@ function isToolScopedStatusMessage(message: AgentMessage): boolean {
     );
 }
 
+function isLegacyAnalyzeConversationErrorMessage(message: AgentMessage): boolean {
+    if (message.type !== AgentMessageType.ERROR || isToolScopedStatusMessage(message)) return false;
+
+    const details = message.details as { error?: unknown } | undefined;
+    return getMessageText(message).startsWith('Error analyzing conversation:') && typeof details?.error === 'string';
+}
+
+function isWorkstreamActivityFailureMessage(message: AgentMessage): boolean {
+    if (message.type !== AgentMessageType.ERROR) return false;
+
+    const details = message.details as
+        | {
+              activity_group_id?: unknown;
+              event_class?: unknown;
+              tool?: unknown;
+              tool_event?: unknown;
+              tool_run_id?: unknown;
+              tool_status?: unknown;
+              workstream_event?: unknown;
+          }
+        | undefined;
+
+    if (details?.event_class !== 'activity') return false;
+    if (details.workstream_event) return false;
+
+    return !(
+        details.tool ||
+        details.tool_status ||
+        details.tool_run_id ||
+        details.activity_group_id ||
+        details.tool_event
+    );
+}
+
 function isSummaryPrimaryMessage(message: AgentMessage): boolean {
     if (isWorkstreamInternalResultMessage(message)) return false;
+    if (isWorkstreamActivityFailureMessage(message)) return false;
 
     return (
         message.type === AgentMessageType.QUESTION ||
         Boolean(getWorkstreamLaunchDetails(message)) ||
         isSummaryAssistantProseMessage(message) ||
-        message.type === AgentMessageType.REQUEST_INPUT ||
+        (message.type === AgentMessageType.REQUEST_INPUT && !isToolApprovalRequestInput(message)) ||
         message.type === AgentMessageType.TERMINATED ||
         ((message.type === AgentMessageType.ERROR || message.type === AgentMessageType.WARNING) &&
             !isToolScopedStatusMessage(message) &&
@@ -200,7 +244,9 @@ function isSummaryWorkMessage(message: AgentMessage): boolean {
     if (isWorkstreamInternalResultMessage(message)) return false;
     if (isSummaryAssistantProseMessage(message)) return false;
     if (getWorkstreamLaunchDetails(message)) return false;
+    if (isWorkstreamActivityFailureMessage(message)) return true;
     if (isTransientWorkStatusMessage(message)) return true;
+    if (isToolApprovalRequestInput(message)) return true;
     if (isToolScopedStatusMessage(message)) return true;
     if (isToolPreambleMessage(message)) return true;
     if (isToolActivityMessage(message)) return true;
@@ -216,6 +262,7 @@ export function buildSummaryConversationItems(
 ): SummaryConversationItem[] {
     const items: SummaryConversationItem[] = [];
     let pendingWork: AgentMessage[] = [];
+    const seenWorkstreamStartIds = new Set<string>();
 
     const flushWork = (isActive: boolean, endMessage?: AgentMessage) => {
         if (pendingWork.length === 0) return;
@@ -244,12 +291,45 @@ export function buildSummaryConversationItems(
     };
 
     for (const message of messages) {
+        const launchDetails = getWorkstreamLaunchDetails(message);
+        const activityStartDetails = launchDetails ? null : getWorkstreamActivityDetails(message);
+        const workstreamStartDetails = launchDetails ?? activityStartDetails;
+
+        if (workstreamStartDetails) {
+            const hasSeenWorkstream = seenWorkstreamStartIds.has(workstreamStartDetails.workstreamId);
+            seenWorkstreamStartIds.add(workstreamStartDetails.workstreamId);
+
+            if (launchDetails || !hasSeenWorkstream) {
+                flushWork(false, message);
+                items.push({ type: 'message', message });
+                continue;
+            }
+        }
+
         if (message.type === AgentMessageType.COMPLETE || message.type === AgentMessageType.IDLE) {
+            if (isUserStoppedMessage(message)) {
+                const pendingWorkStartTimestamp = pendingWork[0]?.timestamp;
+                flushWork(false, message);
+                const previousItem = items[items.length - 1];
+                items.push({
+                    type: 'stopped',
+                    message,
+                    startTimestamp:
+                        pendingWorkStartTimestamp !== undefined && previousItem?.type === 'work'
+                            ? previousItem.startTimestamp
+                            : (pendingWorkStartTimestamp ?? message.timestamp),
+                    endTimestamp: message.timestamp,
+                });
+                continue;
+            }
             flushWork(false, message);
             continue;
         }
 
-        if (isSummaryWorkMessage(message)) {
+        if (
+            isSummaryWorkMessage(message) ||
+            (pendingWork.length > 0 && isLegacyAnalyzeConversationErrorMessage(message))
+        ) {
             if (shouldResumeCompletedWorkForTool(message, pendingWork)) {
                 const previousItem = items[items.length - 1];
                 if (previousItem?.type === 'work' && !previousItem.isActive) {

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

@@ -58,7 +58,7 @@ export default function WorkstreamTabs({
     }
 
     return (
-        <div className="flex overflow-x-auto space-x-1 mb-1 bg-muted border-b border-muted/20 sticky top-0 z-10">
+        <div className="flex overflow-x-auto gap-1 mb-1 bg-muted border-b border-muted/20 sticky top-0 z-10">
             {sortedWorkstreams.map(([id, name]) => (
                 <Button
                     variant="unstyled"
@@ -76,7 +76,7 @@ export default function WorkstreamTabs({
                     {name.length > 20 ? `${name.substring(0, 18)}...` : name}
                     {/* biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here */}
                     {count?.has(id) && count.get(id)! > 0 && (
-                        <div className="flex items-center space-x-1">
+                        <div className="flex items-center gap-1">
                             <span
                                 className={cn(
                                     'inline-flex items-center justify-center p-1 text-xs rounded-full',

package/src/features/agent/chat/ModernAgentOutput/requestInputMessages.ts

@@ -11,6 +11,68 @@ export function getAgentMessageText(message: AgentMessage): string {
     return String(message.message).trim();
 }
 
+export function getRequestInputDisplayText(message: AgentMessage): string {
+    const toolApproval = getRecord((message.details as Record<string, unknown> | undefined)?.tool_approval);
+    if (!toolApproval) return getAgentMessageText(message);
+
+    const title = getString(toolApproval.tool_title) ?? getString(toolApproval.tool_name);
+    const target = formatToolApprovalTargetForDisplay(getString(toolApproval.target));
+    if (title && target) return `Approve ${title}: ${target}?`;
+
+    const actionSummary = getString(toolApproval.action_summary);
+    if (actionSummary) return `Approve ${formatToolApprovalActionSummaryForDisplay(actionSummary)}?`;
+
+    return getAgentMessageText(message);
+}
+
+function getRecord(value: unknown): Record<string, unknown> | undefined {
+    return value && typeof value === 'object' && !Array.isArray(value) ? (value as Record<string, unknown>) : undefined;
+}
+
+function getString(value: unknown): string | undefined {
+    return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function formatToolApprovalActionSummaryForDisplay(actionSummary: string): string {
+    return actionSummary.replace(/:\s*name(?::|\s+)/i, ': ');
+}
+
+function formatToolApprovalTargetForDisplay(target: string | undefined): string | undefined {
+    if (!target) return undefined;
+
+    const separatorIndex = target.indexOf(':');
+    if (separatorIndex < 0) return target;
+
+    const key = target.slice(0, separatorIndex);
+    const value = target.slice(separatorIndex + 1).trim();
+    if (!value) return target;
+
+    switch (key) {
+        case 'document_id':
+            return `document ${value}`;
+        case 'object_id':
+            return `object ${value}`;
+        case 'collection_id':
+            return `collection ${value}`;
+        case 'process_id':
+            return `process ${value}`;
+        case 'process_definition_id':
+            return `process definition ${value}`;
+        case 'interaction_id':
+            return `interaction ${value}`;
+        case 'prompt_id':
+            return `prompt ${value}`;
+        case 'dashboard_id':
+            return `dashboard ${value}`;
+        case 'database_id':
+            return `database ${value}`;
+        case 'table_id':
+            return `table ${value}`;
+        default:
+            return value;
+    }
+}
+
 export function hasRequestInputUx(message: AgentMessage): message is RequestInputMessageWithUx {
     const details = message.details as AskUserMessageDetails | undefined;
     return message.type === AgentMessageType.REQUEST_INPUT && !!details?.ux;
@@ -34,6 +96,22 @@ export function getRequestInputMessageKey(message: AgentMessage): string {
         .join('|');
 }
 
+export function getRequestInputAnswerMessageKey(message: AgentMessage): string {
+    const details = message.details as Record<string, unknown> | undefined;
+    const keyParts = [
+        details?.ack,
+        details?._messageId,
+        details?._deliveryStatus,
+        message.timestamp,
+        getWorkstreamId(message),
+        getAgentMessageText(message),
+    ];
+    return keyParts
+        .filter((value): value is string | number => typeof value === 'string' || typeof value === 'number')
+        .map(String)
+        .join('|');
+}
+
 export function getAnsweredRequestInputKeys(messages: AgentMessage[]): Set<string> {
     const answered = new Set<string>();
 
@@ -56,6 +134,142 @@ export function getAnsweredRequestInputKeys(messages: AgentMessage[]): Set<strin
     return answered;
 }
 
+export function getResolvedToolApprovalKeys(messages: AgentMessage[]): Set<string> {
+    const resolved = new Set<string>();
+
+    for (const message of messages) {
+        const details = getRecord(message.details);
+        const approvalRequest = getRecord(details?.approval_request);
+        const approvalKey = approvalRequest?.approval_key;
+        const decision = details?.approval_decision;
+
+        if (
+            typeof approvalKey === 'string' &&
+            (decision === 'denied' ||
+                decision === 'denied_with_feedback' ||
+                decision === 'timeout' ||
+                decision === 'reviewer_denied' ||
+                decision === 'cancelled_after_denial')
+        ) {
+            resolved.add(approvalKey);
+        }
+    }
+
+    return resolved;
+}
+
+function getToolApprovalKey(message: AgentMessage): string | undefined {
+    const details = getRecord(message.details);
+    const toolApproval = getRecord(details?.tool_approval);
+    const approvalKey = toolApproval?.approval_key;
+    return typeof approvalKey === 'string' ? approvalKey : undefined;
+}
+
+export function isToolApprovalRequestInput(message: AgentMessage): boolean {
+    return message.type === AgentMessageType.REQUEST_INPUT && getToolApprovalKey(message) !== undefined;
+}
+
+function isToolApprovalOptionResponse(message: AgentMessage): boolean {
+    if (message.type !== AgentMessageType.QUESTION) return false;
+    const normalized = getAgentMessageText(message).trim().toLowerCase();
+    return normalized === 'allow_once' || normalized === 'allow_for_run' || normalized === 'deny';
+}
+
+function isToolApprovalMetadataResponse(message: AgentMessage): boolean {
+    if (message.type !== AgentMessageType.QUESTION) return false;
+    const details = getRecord(message.details);
+    const metadata = getRecord(details?.metadata);
+    const toolApprovalResponse =
+        getRecord(details?.tool_approval_response) ?? getRecord(metadata?.tool_approval_response);
+    return toolApprovalResponse?.decision === 'deny_with_feedback';
+}
+
+function isToolApprovalResponse(message: AgentMessage): boolean {
+    return isToolApprovalOptionResponse(message) || isToolApprovalMetadataResponse(message);
+}
+
+export function isRequestInputResolvedByToolApprovalEvent(
+    message: AgentMessage,
+    resolvedToolApprovalKeys: Set<string>,
+): boolean {
+    if (message.type !== AgentMessageType.REQUEST_INPUT) return false;
+    const approvalKey = getToolApprovalKey(message);
+    return approvalKey ? resolvedToolApprovalKeys.has(approvalKey) : false;
+}
+
+export function getAnsweredToolApprovalRequestInputKeys(messages: AgentMessage[]): Set<string> {
+    const answered = new Set<string>();
+
+    messages.forEach((message, index) => {
+        if (!isToolApprovalRequestInput(message)) return;
+
+        const workstreamId = getWorkstreamId(message);
+        for (let nextIndex = index + 1; nextIndex < messages.length; nextIndex += 1) {
+            const nextMessage = messages[nextIndex];
+            if (getWorkstreamId(nextMessage) !== workstreamId) continue;
+            if (nextMessage.type === AgentMessageType.REQUEST_INPUT) break;
+            if (nextMessage.type === AgentMessageType.QUESTION) {
+                if (isToolApprovalResponse(nextMessage)) {
+                    answered.add(getRequestInputMessageKey(message));
+                }
+                break;
+            }
+        }
+    });
+
+    return answered;
+}
+
+export function isToolApprovalRequestInputHidden(
+    message: AgentMessage,
+    answeredToolApprovalRequestInputKeys: Set<string>,
+    resolvedToolApprovalKeys: Set<string>,
+): boolean {
+    return (
+        isToolApprovalRequestInput(message) &&
+        (answeredToolApprovalRequestInputKeys.has(getRequestInputMessageKey(message)) ||
+            isRequestInputResolvedByToolApprovalEvent(message, resolvedToolApprovalKeys))
+    );
+}
+
+export function getHiddenToolApprovalAnswerKeys(
+    messages: AgentMessage[],
+    resolvedToolApprovalKeys?: Set<string>,
+): Set<string> {
+    const hidden = new Set<string>();
+
+    messages.forEach((message, index) => {
+        if (
+            !isToolApprovalRequestInput(message) ||
+            (resolvedToolApprovalKeys && !isRequestInputResolvedByToolApprovalEvent(message, resolvedToolApprovalKeys))
+        ) {
+            return;
+        }
+
+        const workstreamId = getWorkstreamId(message);
+        for (let nextIndex = index + 1; nextIndex < messages.length; nextIndex += 1) {
+            const nextMessage = messages[nextIndex];
+            if (getWorkstreamId(nextMessage) !== workstreamId) continue;
+            if (nextMessage.type === AgentMessageType.REQUEST_INPUT) break;
+            if (nextMessage.type === AgentMessageType.QUESTION) {
+                if (isToolApprovalOptionResponse(nextMessage)) {
+                    hidden.add(getRequestInputAnswerMessageKey(nextMessage));
+                }
+                break;
+            }
+        }
+    });
+
+    return hidden;
+}
+
+export function isToolApprovalAnswerHidden(message: AgentMessage, hiddenToolApprovalAnswerKeys: Set<string>): boolean {
+    return (
+        message.type === AgentMessageType.QUESTION &&
+        hiddenToolApprovalAnswerKeys.has(getRequestInputAnswerMessageKey(message))
+    );
+}
+
 export function isRequestInputAnswered(message: AgentMessage, answeredRequestInputKeys: Set<string>): boolean {
     return (
         message.type === AgentMessageType.REQUEST_INPUT &&
@@ -68,12 +282,14 @@ export function getPendingRequestInputMessage(
     workstreamId = 'main',
 ): RequestInputMessageWithUx | undefined {
     const answeredRequestInputKeys = getAnsweredRequestInputKeys(messages);
+    const resolvedToolApprovalKeys = getResolvedToolApprovalKeys(messages);
 
     for (let index = messages.length - 1; index >= 0; index -= 1) {
         const message = messages[index];
         if (!hasRequestInputUx(message)) continue;
         if (getWorkstreamId(message) !== workstreamId) continue;
         if (isRequestInputAnswered(message, answeredRequestInputKeys)) continue;
+        if (isRequestInputResolvedByToolApprovalEvent(message, resolvedToolApprovalKeys)) continue;
         return message;
     }
 

package/src/features/agent/chat/ModernAgentOutput/utils.test.ts

@@ -498,6 +498,67 @@ describe('ModernAgentOutput summary conversation items', () => {
         });
     });
 
+    it('keeps legacy analyze conversation errors inside the surrounding work block', () => {
+        const analyzeStart = makeMessage({
+            timestamp: 1000,
+            type: AgentMessageType.THOUGHT,
+            message: 'Running analyze_conversation',
+            details: {
+                activity_group_id: 'activity-10',
+                tool: 'analyze_conversation',
+                tool_run_id: 'analyze-run-1',
+                tool_status: 'running',
+            },
+        });
+        const legacyAnalyzeError = makeMessage({
+            timestamp: 1100,
+            type: AgentMessageType.ERROR,
+            message: 'Error analyzing conversation: Could not find conversation for workflow run ID: run-1',
+            details: {
+                error: 'Could not find conversation for workflow run ID: run-1',
+            },
+        });
+        const answer = makeMessage({
+            timestamp: 1200,
+            type: AgentMessageType.ANSWER,
+            message: 'Here is the analysis.',
+        });
+
+        const items = buildSummaryConversationItems([analyzeStart, legacyAnalyzeError, answer], true);
+
+        expect(items).toHaveLength(2);
+        expect(items[0]).toMatchObject({
+            type: 'work',
+            isActive: false,
+            status: 'error',
+            messages: [analyzeStart, legacyAnalyzeError],
+        });
+        expect(items[1]).toMatchObject({
+            type: 'message',
+            message: answer,
+        });
+    });
+
+    it('keeps legacy analyze conversation errors without surrounding work as primary messages', () => {
+        const legacyAnalyzeError = makeMessage({
+            timestamp: 1000,
+            type: AgentMessageType.ERROR,
+            message: 'Error analyzing conversation: Could not find conversation for workflow run ID: run-1',
+            details: {
+                error: 'Could not find conversation for workflow run ID: run-1',
+            },
+        });
+
+        const items = buildSummaryConversationItems([legacyAnalyzeError], true);
+
+        expect(items).toEqual([
+            {
+                type: 'message',
+                message: legacyAnalyzeError,
+            },
+        ]);
+    });
+
     it('hides transient thinking once the work segment completes', () => {
         const tool = makeMessage({
             timestamp: 1000,
@@ -785,6 +846,37 @@ describe('ModernAgentOutput summary conversation items', () => {
         expect(items).toEqual([]);
     });
 
+    it('creates a visible stopped item for a consumed user stop idle marker', () => {
+        const thinking = makeMessage({
+            timestamp: 1000,
+            type: AgentMessageType.THOUGHT,
+            message: 'Thinking...',
+            details: {
+                display_role: 'thinking',
+                activity_group_id: 'activity-1',
+            },
+        });
+        const idle = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.IDLE,
+            message: 'Stopped. Waiting for your command...',
+            details: {
+                ack: 'stop-1',
+                status_reason: 'user_stopped',
+            },
+        });
+
+        const items = buildSummaryConversationItems([thinking, idle], true);
+
+        expect(items).toHaveLength(1);
+        expect(items[0]).toMatchObject({
+            type: 'stopped',
+            message: idle,
+            startTimestamp: 1000,
+            endTimestamp: 2000,
+        });
+    });
+
     it('closes pending work when an idle marker arrives even if parent completion lags', () => {
         const tool = makeMessage({
             timestamp: 1000,
@@ -1180,6 +1272,37 @@ describe('ModernAgentOutput summary conversation items', () => {
         expect(summaryMessages).toEqual([answer]);
     });
 
+    it('does not duplicate completed tool preamble streams once persisted prose replaces them', () => {
+        const preamble = makeMessage({
+            timestamp: 3000,
+            type: AgentMessageType.THOUGHT,
+            message: 'Got my tools ready. Querying now!',
+            details: {
+                activity_id: 'activity-1',
+                display_role: 'tool_preamble',
+                tools: ['search_documents'],
+                streamed: true,
+            },
+        });
+
+        const summaryMessages = buildSummaryDisplayMessages(
+            [preamble],
+            new Map([
+                [
+                    'activity-1',
+                    {
+                        text: 'Got my tools ready. Querying now!',
+                        startTimestamp: 2000,
+                        activityId: 'activity-1',
+                        isComplete: true,
+                    },
+                ],
+            ]),
+        );
+
+        expect(summaryMessages).toEqual([preamble]);
+    });
+
     it('keeps completed answer streams as assistant prose when a later tool message follows', () => {
         const question = makeMessage({
             timestamp: 1000,
@@ -1287,6 +1410,32 @@ describe('ModernAgentOutput utils - streamed deduplication', () => {
         expect(grouped[0].type).toBe('single');
     });
 
+    it('does not replace a run-scoped stream with a different stream using the same activity id', () => {
+        const answer = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.ANSWER,
+            message: 'Different final text',
+            details: {
+                activity_id: 'activity-1',
+                streaming_id: 'run-b-activity-1',
+                streaming_id_scope: 'workflow_run',
+            },
+        });
+
+        expect(
+            isStreamReplacedByMessage(
+                {
+                    text: 'partial text',
+                    startTimestamp: 1000,
+                    workstreamId: 'main',
+                    activityId: 'activity-1',
+                    streamingId: 'run-a-activity-1',
+                },
+                [answer],
+            ),
+        ).toBe(false);
+    });
+
     it('does not treat a tool event with the same activity id as a replacement for streamed prose', () => {
         const tool = makeMessage({
             timestamp: 2000,