@vertesia/ui 1.5.0-dev.20260905.011013Z → 1.5.0-dev.20260910.052912Z

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

@@ -51,7 +51,7 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                         <div className="font-medium text-sm">{t('agent.stepByStepPlan')}</div>
                     </div>
 
-                    <div className="divide-y divide-gray-100 dark:divide-gray-800">
+                    <div className="divide-y divide-border">
                         {plan.plan && plan.plan.length > 0 ? (
                             plan.plan.map((task, index) => {
                                 // Extract task info with null checks
@@ -68,16 +68,16 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
 
                                 // Determine status icon and style
                                 let StatusIcon = Circle;
-                                let statusColor = 'text-gray-400';
+                                let statusColor = 'text-muted';
                                 let bgColor = '';
 
                                 if (status === 'in_progress') {
                                     StatusIcon = Clock;
-                                    statusColor = 'text-blue-500';
-                                    bgColor = 'bg-blue-50/50 dark:bg-blue-900/10';
+                                    statusColor = 'text-info';
+                                    bgColor = 'bg-info/50 dark:bg-info/10';
                                 } else if (status === 'completed') {
                                     StatusIcon = CheckCircle;
-                                    statusColor = 'text-green-500';
+                                    statusColor = 'text-success';
                                 }
 
                                 return (
@@ -86,18 +86,18 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                             <StatusIcon className="h-4 w-4" />
                                         </div>
                                         <div>
-                                            <div className="text-sm text-gray-800 dark:text-gray-200">{taskGoal}</div>
+                                            <div className="text-sm text-foreground">{taskGoal}</div>
                                             <div className="mt-1">
-                                                <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                                                <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-muted text-foreground">
                                                     {taskId}
                                                 </span>
                                                 <span
                                                     className={`ms-2 text-xs ${
                                                         status === 'completed'
-                                                            ? 'text-green-600 dark:text-green-400'
+                                                            ? 'text-success'
                                                             : status === 'in_progress'
-                                                              ? 'text-blue-600 dark:text-blue-400'
-                                                              : 'text-gray-500 dark:text-gray-400'
+                                                              ? 'text-info'
+                                                              : 'text-muted'
                                                     }`}
                                                 >
                                                     {status === 'completed'
@@ -112,8 +112,8 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                 );
                             })
                         ) : (
-                            <div className="p-4 text-center text-gray-500 dark:text-gray-400 italic">
-                                <AlertCircle className="h-5 w-5 mx-auto mb-2 text-amber-500" />
+                            <div className="p-4 text-center text-muted italic">
+                                <AlertCircle className="h-5 w-5 mx-auto mb-2 text-attention" />
                                 <p>{t('agent.noPlanDetected')}</p>
                                 <p className="text-xs mt-1">{t('agent.plansWillAppear')}</p>
                             </div>
@@ -123,8 +123,8 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
 
                 {/* Workstream Status Summary */}
                 {workstreamStatus.size > 1 && (
-                    <div className="mt-4 rounded-md border border-gray-200 dark:border-gray-800">
-                        <div className="p-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+                    <div className="mt-4 rounded-md border border-border">
+                        <div className="p-3 border-b border-border bg-muted">
                             <div className="font-medium text-sm">{t('agent.workstreams')}</div>
                         </div>
                         <div className="p-3">
@@ -147,19 +147,19 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                     })
                                     .map(([id, status]) => {
                                         let StatusIcon = Circle;
-                                        let statusColor = 'text-gray-400';
-                                        let statusBg = 'bg-gray-100 dark:bg-gray-800';
+                                        let statusColor = 'text-muted';
+                                        let statusBg = 'bg-muted';
                                         let statusText = t('agent.pending');
 
                                         if (status === 'in_progress') {
                                             StatusIcon = Clock;
-                                            statusColor = 'text-blue-500';
-                                            statusBg = 'bg-blue-100 dark:bg-blue-800/30';
+                                            statusColor = 'text-info';
+                                            statusBg = 'bg-info';
                                             statusText = t('agent.inProgress');
                                         } else if (status === 'completed') {
                                             StatusIcon = CheckCircle;
-                                            statusColor = 'text-green-500';
-                                            statusBg = 'bg-green-100 dark:bg-green-800/30';
+                                            statusColor = 'text-success';
+                                            statusBg = 'bg-success';
                                             statusText = t('agent.completed');
                                         }
 
@@ -172,7 +172,7 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                                     <StatusIcon className="h-4 w-4" />
                                                 </div>
                                                 <div className="flex-1">
-                                                    <span className="text-sm font-medium text-gray-800 dark:text-gray-300">
+                                                    <span className="text-sm font-medium text-foreground">
                                                         {displayId}
                                                     </span>
                                                 </div>

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

@@ -273,7 +273,7 @@ function StreamingMessageComponent({
             {/* Card wrapper matching MessageItem structure */}
             <div
                 className={cn(
-                    'border-s-4 bg-white dark:bg-gray-900 mb-4 border-s-purple-500 w-full max-w-full overflow-hidden',
+                    'border-s-4 bg-white dark:bg-muted mb-4 border-s-done w-full max-w-full overflow-hidden',
                     cardClassName,
                 )}
                 data-workstream-id={workstreamId}
@@ -283,9 +283,9 @@ function StreamingMessageComponent({
                     <div className="flex items-center gap-1.5">
                         <div className={cn('animate-fadeIn', iconClassName)}>
                             {isTyping ? (
-                                <span className="size-2 rounded-full bg-blue-500 animate-pulse inline-block" />
+                                <span className="size-2 rounded-full bg-primary animate-pulse inline-block" />
                             ) : (
-                                <Bot className="size-4 text-purple-600 dark:text-purple-400" />
+                                <Bot className="size-4 text-done" />
                             )}
                         </div>
                         <span className={cn('text-xs font-medium text-muted', senderClassName)}>Agent</span>
@@ -299,7 +299,7 @@ function StreamingMessageComponent({
                             variant="ghost"
                             size="xs"
                             onClick={copyToClipboard}
-                            className="size-6 p-0 hover:bg-gray-100 dark:hover:bg-gray-800"
+                            className="size-6 p-0 hover:bg-muted"
                             title={t('agent.copyMessage')}
                         >
                             <CopyIcon className="size-3" />

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

@@ -133,7 +133,22 @@ export function isSummaryAssistantProseMessage(message: AgentMessage): boolean {
 
     if (message.type === AgentMessageType.ANSWER) return true;
 
-    if (isToolPreambleMessage(message)) return false;
+    if (isToolPreambleMessage(message)) {
+        // Text accompanying ask_user can be the draft the question asks the user to review.
+        // Keep it visible for both persisted messages and reconstructed streaming messages.
+        return (
+            message.details?.display_role === 'tool_preamble' &&
+            (message.details.tool === 'ask_user' ||
+                (Array.isArray(message.details.tools) &&
+                    message.details.tools.some((tool: unknown) => {
+                        if (typeof tool === 'string') return tool === 'ask_user';
+                        if (!tool || typeof tool !== 'object') return false;
+                        return (
+                            ('name' in tool && tool.name === 'ask_user') || ('tool' in tool && tool.tool === 'ask_user')
+                        );
+                    })))
+        );
+    }
 
     // Streamed thoughts without tool metadata are model-visible prose. They remain
     // in the conversation unless buildSummaryDisplayMessages classifies them as

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

@@ -117,13 +117,13 @@ function areMessagesRenderEqual(prevMessage: AgentMessage, nextMessage: AgentMes
 function statusBadgeClass(status?: ToolExecutionStatus): string {
     switch (status) {
         case 'completed':
-            return 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800';
+            return 'bg-success text-success border-success';
         case 'running':
-            return 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800';
+            return 'bg-info text-info border-info';
         case 'error':
-            return 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800';
+            return 'bg-destructive text-destructive border-destructive';
         case 'warning':
-            return 'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800';
+            return 'bg-attention text-attention border-attention';
         default:
             return '';
     }
@@ -320,10 +320,9 @@ const getFilesFromDetails = (
     return Array.isArray(files) ? files : undefined;
 };
 
-const TOOL_BADGE_CLASS =
-    'text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium';
+const TOOL_BADGE_CLASS = 'text-[10px] px-1.5 py-0.5 rounded-md bg-done text-done border border-done font-medium';
 const ASSISTANT_BADGE_CLASS =
-    'text-[10px] px-1.5 py-0.5 rounded-md bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 font-medium';
+    'text-[10px] px-1.5 py-0.5 rounded-md bg-muted text-foreground border border-border font-medium';
 
 const isToolPreambleMessage = (message: AgentMessage): boolean => {
     const details = message.details as { display_role?: string } | undefined;
@@ -452,14 +451,14 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
     };
 
     return (
-        <div className={cn('border-b border-gray-100 dark:border-gray-800 last:border-b-0', classNames.itemClassName)}>
+        <div className={cn('border-b border-border last:border-b-0', classNames.itemClassName)}>
             {/* Collapsed header - always visible */}
             {/* biome-ignore lint/a11y/useSemanticElements: header contains nested Buttons (copy); button-in-button is invalid HTML so role="button" on a div is the pragmatic choice. */}
             <div
                 role="button"
                 tabIndex={0}
                 className={cn(
-                    'flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors',
+                    'flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-muted transition-colors',
                     classNames.itemHeaderClassName,
                 )}
                 onClick={onToggle}
@@ -518,12 +517,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
                     );
                     const progressDetails = getProgressDetails(details as Record<string, unknown> | undefined);
                     return (
-                        <div
-                            className={cn(
-                                'px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30',
-                                classNames.itemContentClassName,
-                            )}
-                        >
+                        <div className={cn('px-4 py-2 bg-muted/50 dark:bg-muted/30', classNames.itemContentClassName)}>
                             {/* Badges row: tool name + status + timestamp */}
                             <div className="flex items-center gap-2 mb-2 flex-wrap">
                                 <span className={cn(badgeClass, classNames.toolBadgeClassName)}>{toolName}</span>
@@ -769,7 +763,7 @@ function GroupImageDisplay({ messages, artifactRunId }: { messages: AgentMessage
     if (resolvedImages.length === 0) return null;
 
     return (
-        <div className="px-3 py-1.5 border-b border-gray-100 dark:border-gray-800">
+        <div className="px-3 py-1.5 border-b border-border">
             <FileDisplay files={resolvedImages} />
         </div>
     );
@@ -829,7 +823,7 @@ function ToolCallGroupComponent({
             return <PulsatingCircle size="sm" color="blue" />;
         }
         if (toolStatus === 'running') {
-            return <span className="size-2 rounded-full bg-blue-500 inline-block" />;
+            return <span className="size-2 rounded-full bg-primary inline-block" />;
         }
         if (toolStatus === 'completed') {
             return <CheckCircle className="size-4 text-success" />;
@@ -840,7 +834,7 @@ function ToolCallGroupComponent({
         if (toolStatus === 'warning') {
             return <AlertTriangle className="size-4 text-attention" />;
         }
-        return <Bot className="size-4 text-purple-600 dark:text-purple-400" />;
+        return <Bot className="size-4 text-done" />;
     };
 
     // Get border color based on status
@@ -848,7 +842,7 @@ function ToolCallGroupComponent({
         if (toolStatus === 'completed') return 'border-s-success';
         if (toolStatus === 'error') return 'border-s-destructive';
         if (toolStatus === 'warning') return 'border-s-attention';
-        return 'border-s-purple-500';
+        return 'border-s-done';
     };
 
     // Animate new messages when they're added
@@ -914,9 +908,7 @@ function ToolCallGroupComponent({
     };
 
     return (
-        <div
-            className={cn('border-s-4 overflow-hidden bg-white dark:bg-gray-900 mb-4', getBorderColor(), rootClassName)}
-        >
+        <div className={cn('border-s-4 overflow-hidden bg-white dark:bg-muted mb-4', getBorderColor(), rootClassName)}>
             {/* Compact header */}
             {/* biome-ignore lint/a11y/useSemanticElements: header contains nested Buttons; button-in-button is invalid HTML so role="button" on a div is the pragmatic choice. */}
             <div
@@ -924,7 +916,7 @@ function ToolCallGroupComponent({
                 tabIndex={0}
                 aria-expanded={!isCollapsed}
                 className={cn(
-                    'flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors',
+                    'flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-muted transition-colors',
                     headerClassName,
                 )}
                 onClick={() => setIsCollapsed(!isCollapsed)}
@@ -941,12 +933,7 @@ function ToolCallGroupComponent({
                     ) : (
                         <>
                             <span className={cn('text-xs font-medium text-muted', senderClassName)}>Agent</span>
-                            <span
-                                className={cn(
-                                    'text-xs text-purple-600 dark:text-purple-400 font-medium',
-                                    toolSummaryClassName,
-                                )}
-                            >
+                            <span className={cn('text-xs text-done font-medium', toolSummaryClassName)}>
                                 {toolSummary}
                             </span>
                         </>
@@ -960,12 +947,7 @@ function ToolCallGroupComponent({
 
                 <div className="flex items-center gap-1 flex-shrink-0">
                     {preambleText && (
-                        <span
-                            className={cn(
-                                'text-[10px] text-purple-600 dark:text-purple-400 font-medium',
-                                toolSummaryClassName,
-                            )}
-                        >
+                        <span className={cn('text-[10px] text-done font-medium', toolSummaryClassName)}>
                             {toolSummary}
                         </span>
                     )}
@@ -1016,10 +998,7 @@ function ToolCallGroupComponent({
                         return (
                             <div
                                 key={itemKey}
-                                className={cn(
-                                    'border-b border-gray-100 dark:border-gray-800 last:border-b-0',
-                                    itemClassName,
-                                )}
+                                className={cn('border-b border-border last:border-b-0', itemClassName)}
                                 style={{
                                     opacity: isAnimating ? 0 : 1,
                                     transform: isAnimating ? 'translateX(-10px)' : 'translateX(0)',
@@ -1036,7 +1015,7 @@ function ToolCallGroupComponent({
                                     tabIndex={0}
                                     aria-expanded={isItemExpanded}
                                     className={cn(
-                                        'flex items-start gap-2 py-1.5 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50',
+                                        'flex items-start gap-2 py-1.5 text-xs cursor-pointer hover:bg-muted',
                                         itemHeaderClassName,
                                     )}
                                     onClick={() => toggleItem(itemKey)}

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

@@ -28,6 +28,29 @@ function makeApprovalRequest(): AgentMessage {
     } as unknown as AgentMessage;
 }
 
+function makeApprovalRequestForToolUse(toolUseId: string): AgentMessage {
+    const request = makeApprovalRequest();
+    return {
+        ...request,
+        details: { ...(request.details as Record<string, unknown>), request_id: toolUseId },
+    } as unknown as AgentMessage;
+}
+
+function makeApprovalReleasedMessage(toolUseId: string, timestamp: number): AgentMessage {
+    return {
+        timestamp,
+        type: AgentMessageType.UPDATE,
+        message: 'Approval reviewer allowed Create a new draft interaction.',
+        workstream_id: 'main',
+        details: {
+            request_id: toolUseId,
+            approval_decision: 'auto_approved',
+            approval_release_reason: 'reviewer_allowed',
+            approval_request: { tool_name: 'create_interaction', approval_key: APPROVAL_KEY },
+        },
+    } as unknown as AgentMessage;
+}
+
 function makeUserAnswer(message: string, metadata?: Record<string, unknown>): AgentMessage {
     return {
         timestamp: 2,
@@ -164,6 +187,24 @@ describe('request input correlation', () => {
         expect(getPendingRequestInputMessage([firstRequest, firstAnswer, secondRequest])).toBe(secondRequest);
     });
 
+    it('stops asking once the workflow releases the approval without a user answer', () => {
+        const request = makeApprovalRequestForToolUse('write-1');
+        const released = makeApprovalReleasedMessage('write-1', 3);
+
+        expect(getPendingRequestInputMessage([request])).toBe(request);
+        expect(getPendingRequestInputMessage([request, released])).toBeUndefined();
+    });
+
+    it('keeps asking for a later request that reuses a released approval key', () => {
+        // Approval keys are `tool_name:target`, so the same action repeats across turns: a release
+        // must resolve the request it answered, not every prompt that shares its key.
+        const firstRequest = makeApprovalRequestForToolUse('write-1');
+        const released = makeApprovalReleasedMessage('write-1', 3);
+        const laterRequest = { ...makeApprovalRequestForToolUse('write-2'), timestamp: 4 };
+
+        expect(getPendingRequestInputMessage([firstRequest, released, laterRequest])).toBe(laterRequest);
+    });
+
     it('reads a request id from response metadata', () => {
         expect(
             getRequestInputResponseIdFromMetadata({

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

@@ -242,6 +242,12 @@ export function getRequestInputResponseIdFromMetadata(metadata?: Record<string,
     return typeof requestId === 'string' && requestId ? requestId : undefined;
 }
 
+/**
+ * Prefix marking a resolution that belongs to ONE request rather than to every prompt sharing an
+ * approval key. Approval keys are `tool_name:target`, so the same action repeats across turns.
+ */
+const RESOLVED_REQUEST_ID_PREFIX = 'request:';
+
 export function getResolvedToolApprovalKeys(messages: AgentMessage[]): Set<string> {
     const resolved = new Set<string>();
 
@@ -251,6 +257,17 @@ export function getResolvedToolApprovalKeys(messages: AgentMessage[]): Set<strin
         const approvalKey = approvalRequest?.approval_key;
         const decision = details?.approval_decision;
 
+        // Released without a user answer (approval mode change, or the reviewer allowed it after the
+        // run switched to auto_review). Scoped to the released request: a later prompt for the same
+        // action still has to be answered, or the run would wait with nothing on screen.
+        if (decision === 'auto_approved') {
+            const requestId = details?.request_id;
+            if (typeof requestId === 'string' && requestId) {
+                resolved.add(`${RESOLVED_REQUEST_ID_PREFIX}${requestId}`);
+            }
+            continue;
+        }
+
         if (
             typeof approvalKey === 'string' &&
             (decision === 'denied' ||
@@ -321,6 +338,8 @@ export function isRequestInputResolvedByToolApprovalEvent(
     resolvedToolApprovalKeys: Set<string>,
 ): boolean {
     if (message.type !== AgentMessageType.REQUEST_INPUT) return false;
+    const requestId = getRequestInputId(message);
+    if (requestId && resolvedToolApprovalKeys.has(`${RESOLVED_REQUEST_ID_PREFIX}${requestId}`)) return true;
     const approvalKey = getToolApprovalKey(message);
     return approvalKey ? resolvedToolApprovalKeys.has(approvalKey) : false;
 }

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

@@ -140,6 +140,99 @@ describe('ModernAgentOutput utils - tool preamble behavior', () => {
     });
 });
 
+describe('ModernAgentOutput summary - ask_user review content', () => {
+    const draft = '## Draft agenda\n9:00 Welcome\n9:15 Platform foundations';
+    const tool = makeMessage({
+        timestamp: 3000,
+        message: 'Waiting for your review...',
+        details: {
+            tool: 'ask_user',
+            tool_status: 'running',
+            tool_run_id: 'ask-1',
+            activity_group_id: 'review-1',
+        },
+    });
+    const question = makeMessage({
+        timestamp: 4000,
+        type: AgentMessageType.REQUEST_INPUT,
+        message: 'Does this agenda work?',
+        details: { tool: 'ask_user' },
+    });
+
+    it.each([false, true])('keeps persisted review prose visible with streamed=%s', (streamed) => {
+        const preamble = makeMessage({
+            timestamp: 2000,
+            message: draft,
+            details: {
+                event_class: 'activity',
+                display_role: 'tool_preamble',
+                tools: ['update_plan', 'ask_user'],
+                activity_group_id: 'review-1',
+                streamed,
+            },
+        });
+        const items = buildSummaryConversationItems([preamble, tool, question], false);
+
+        expect(items.map((item) => item.type)).toEqual(['message', 'work', 'message']);
+        expect(items[0]).toEqual({ type: 'message', message: preamble });
+        expect(items[2]).toEqual({ type: 'message', message: question });
+    });
+
+    it.each([
+        { tools: [{ name: 'ask_user' }] },
+        { tools: [{ tool: 'ask_user' }] },
+        { tool: 'ask_user' },
+        { tools: [null, 42, {}, 'search_documents', { name: 'ask_user' }] },
+    ])('keeps review prose visible for supported tool metadata: %j', (details) => {
+        const preamble = makeMessage({
+            timestamp: 2000,
+            message: draft,
+            // Exercise legacy wire shapes outside the current string[] contract.
+            details: { display_role: 'tool_preamble', ...details } as unknown as AgentMessage['details'],
+        });
+        expect(buildSummaryConversationItems([preamble, tool, question], false)[0]).toEqual({
+            type: 'message',
+            message: preamble,
+        });
+    });
+
+    it.each([
+        { display_role: 'tool_preamble', tools: [null, {}, { name: 'search_documents' }] },
+        { tool: 'ask_user', tool_status: 'running' },
+        { tool: 'think' },
+    ])('keeps non-review activity collapsed: %j', (details) => {
+        const activity = makeMessage({
+            message: 'Working on the draft',
+            details: details as unknown as AgentMessage['details'],
+        });
+        expect(buildSummaryConversationItems([activity, question], false)[0]).toMatchObject({
+            type: 'work',
+            messages: [activity],
+        });
+    });
+
+    it.each([false, true])('keeps reconstructed review streams visible with isComplete=%s', (isComplete) => {
+        const messages = buildSummaryDisplayMessages(
+            [tool, question],
+            new Map([
+                [
+                    'review-stream',
+                    {
+                        text: draft,
+                        startTimestamp: 2000,
+                        activityId: 'review-1',
+                        isComplete,
+                    },
+                ],
+            ]),
+        );
+        const items = buildSummaryConversationItems(messages, false);
+
+        expect(items.map((item) => item.type)).toEqual(['message', 'work', 'message']);
+        expect(items[0]).toMatchObject({ type: 'message', message: { message: draft } });
+    });
+});
+
 describe('ModernAgentOutput utils - progress state', () => {
     it('treats a new user turn after an older idle message as in progress', () => {
         const idle = makeMessage({

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

@@ -284,7 +284,7 @@ export function SlidingThinkingIndicator({
                         size="xs"
                         variant="ghost"
                         onClick={() => setShowDetails(!showDetails)}
-                        className="text-slate-500 hover:text-slate-700 flex items-center gap-1 text-xs"
+                        className="text-muted hover:text-foreground flex items-center gap-1 text-xs"
                         title={showDetails ? t('agent.hideThinkingDetails') : t('agent.showAllMessages')}
                     >
                         {showDetails ? (
@@ -356,10 +356,13 @@ export function SlidingThinkingIndicator({
                                         ) : (
                                             <div
                                                 className={cn(
-                                                    'py-2 px-3 border-s-2 bg-white dark:bg-slate-800 flex items-center w-full',
+                                                    'py-2 px-3 border-s-2 bg-white dark:bg-muted flex items-center w-full',
                                                     'transition-all duration-200 ease-in-out rounded-e-md',
                                                     // Set border color based on message type
                                                     {
+                                                        // Categorical message-type palette, not semantic state:
+                                                        // these must stay in step with <PulsingMessageLoader color>
+                                                        // in AnimatedThinkingDots, which uses the same hue names.
                                                         'border-blue-400 dark:border-blue-500':
                                                             getThinkingColor(message) === 'blue',
                                                         'border-purple-400 dark:border-purple-500':

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

@@ -3,7 +3,6 @@ import { Button } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { Check, Copy, Download, Loader2, Maximize2, Minimize2, X } from 'lucide-react';
-import Papa from 'papaparse';
 import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { View } from 'vega';
 import type { TopLevelSpec as VisualizationSpec } from 'vega-lite';
@@ -717,7 +716,12 @@ export const VegaLiteChart = memo(
                         let data: unknown[];
 
                         if (isCsv) {
-                            // Parse CSV to JSON array
+                            // Parse CSV to JSON array. papaparse is imported here rather than at
+                            // module scope: it is only ever needed for a chart whose data comes from
+                            // a .csv artifact, and a static import put it in the widgets bundle's
+                            // graph (this module is reachable from widgets/markdown), so every
+                            // application paid for it on first render.
+                            const { default: Papa } = await import('papaparse');
                             const csvText = await response.text();
                             const parseResult = Papa.parse(csvText, {
                                 header: true,

package/src/features/errors/RowErrorBoundary.tsx

@@ -17,7 +17,7 @@ function RowErrorFallback({ error }: ErrorFallbackComponentProps) {
             <td colSpan={100}>
                 <span className="text-xs"> Cannot display row</span>
                 <br />
-                <span className="bg-gray-400">{message}</span>
+                <span className="bg-muted">{message}</span>
             </td>
         </tr>
     );

package/src/features/facets/AgentRunnerFacetsNav.tsx

@@ -193,7 +193,7 @@ export function AgentRunnerFacetsNav({
                     <div className="flex justify-end">
                         {!selectionCount && (
                             <div className="flex items-center justify-between px-2 py-1">
-                                <div className="text-sm text-muted-foreground">
+                                <div className="text-sm text-muted">
                                     {search.initialized ? `${search.totalCount} runs` : 'Loading runs...'}
                                 </div>
                             </div>