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

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

@@ -133,6 +133,41 @@ describe('AllMessagesMixed summary view', () => {
         vi.useRealTimers();
     });
 
+    it('keeps the draft accompanying ask_user visible outside collapsed work', () => {
+        renderSummary([
+            makeMessage({
+                timestamp: 1000,
+                message: '## Draft agenda\n9:00 Welcome\n9:15 Platform foundations',
+                details: {
+                    event_class: 'activity',
+                    display_role: 'tool_preamble',
+                    tools: ['ask_user'],
+                    activity_group_id: 'review-1',
+                    streamed: true,
+                },
+            }),
+            makeMessage({
+                timestamp: 2000,
+                message: 'Waiting for review...',
+                details: {
+                    tool: 'ask_user',
+                    tool_status: 'running',
+                    activity_group_id: 'review-1',
+                },
+            }),
+            makeMessage({
+                timestamp: 3000,
+                type: AgentMessageType.REQUEST_INPUT,
+                message: 'Does this agenda work?',
+                details: { tool: 'ask_user', request_id: 'ask-1' },
+            }),
+        ]);
+
+        expect(screen.getByRole('heading', { name: 'Draft agenda' })).not.toBeNull();
+        expect(screen.getByText('Does this agenda work?')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /Worked\s*for/ }).getAttribute('aria-expanded')).toBe('false');
+    });
+
     it('renders delivery status on user bubbles in summary view', () => {
         renderSummary([
             makeMessage({
@@ -1109,7 +1144,9 @@ describe('AllMessagesMixed summary view', () => {
 
         const columns = Array.from(screen.getByRole('table').querySelectorAll('col'));
         const contentWidths = [columns[0], columns[2]].map((column) =>
-            Number.parseFloat(column.style.getPropertyValue('--agent-markdown-table-column-width')),
+            Number.parseFloat(
+                column.style.getPropertyValue('--agent-markdown-table-column-width').replace('calc(', ''),
+            ),
         );
 
         expect(columns).toHaveLength(3);
@@ -1117,6 +1154,28 @@ describe('AllMessagesMixed summary view', () => {
         expect(contentWidths[1]).toBeGreaterThan(contentWidths[0]);
     });
 
+    it('reserves readable widths for agenda columns beside long descriptions', () => {
+        renderSummary([
+            makeMessage({
+                type: AgentMessageType.ANSWER,
+                message: [
+                    '| Time | Duration | Topic | Facilitator |',
+                    '| --- | --- | --- | --- |',
+                    '| 9:15 a.m. | 90 min | Advanced capabilities: sub-agents, workstreams, skills, tools and human review | Vertesia |',
+                    '| 10:45 a.m. | 15 min | Break | All |',
+                ].join('\n'),
+            }),
+        ]);
+
+        const table = screen.getByRole('table');
+        const widths = Array.from(table.querySelectorAll('col')).map((column) =>
+            column.style.getPropertyValue('--agent-markdown-table-column-width'),
+        );
+        expect(widths).toEqual(['8rem', '8rem', 'calc(100.000% - 24.000rem)', '8rem']);
+        expect(table.style.minWidth).toBe('32rem');
+        expect(table.parentElement?.classList.contains('overflow-x-auto')).toBe(true);
+    });
+
     it('merges legacy activity progress rows with different tool run ids', () => {
         renderSummary(
             [

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

@@ -475,11 +475,15 @@ function getTableColumnLayouts(node?: Element): AgentMarkdownTableColumnLayout[]
         return clampNumber(avgLength * 0.7 + maxLength * 0.25 + longestTokenLength * 0.45, 18, 90);
     });
 
-    const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+    const totalWeight = weights.reduce((sum, weight, index) => sum + (compactColumns.has(index) ? 0 : weight), 0);
     if (totalWeight <= 0) return [];
 
     return weights.map((weight, columnIndex) => {
-        const width = `${((weight / totalWeight) * 100).toFixed(3)}%`;
+        const share = weight / totalWeight;
+        // Reserve actual space for short values and headers before distributing prose columns.
+        const width = compactColumns.has(columnIndex)
+            ? '8rem'
+            : `calc(${(share * 100).toFixed(3)}% - ${(compactColumns.size * 8 * share).toFixed(3)}rem)`;
         return {
             key: `agent-markdown-table-column-${columnIndex}`,
             compact: compactColumns.has(columnIndex),
@@ -500,24 +504,30 @@ function AgentMarkdownTable({
     const columnLayouts = getTableColumnLayouts(node);
 
     return (
-        <table {...props} className={className}>
-            {columnLayouts.length > 0 ? (
-                <colgroup>
-                    {columnLayouts.map((columnLayout) => (
-                        <col
-                            key={columnLayout.key}
-                            className={columnLayout.compact ? 'agent-markdown-table-compact-col' : undefined}
-                            style={
-                                {
-                                    '--agent-markdown-table-column-width': columnLayout.width,
-                                } as React.CSSProperties
-                            }
-                        />
-                    ))}
-                </colgroup>
-            ) : null}
-            {children}
-        </table>
+        <div className="overflow-x-auto">
+            <table
+                {...props}
+                className={className}
+                style={{ minWidth: `${columnLayouts.length * 8}rem`, ...props.style }}
+            >
+                {columnLayouts.length > 0 ? (
+                    <colgroup>
+                        {columnLayouts.map((columnLayout) => (
+                            <col
+                                key={columnLayout.key}
+                                className={columnLayout.compact ? 'agent-markdown-table-compact-col' : undefined}
+                                style={
+                                    {
+                                        '--agent-markdown-table-column-width': columnLayout.width,
+                                    } as React.CSSProperties
+                                }
+                            />
+                        ))}
+                    </colgroup>
+                ) : null}
+                {children}
+            </table>
+        </div>
     );
 }
 
@@ -1210,6 +1220,15 @@ function getToolTarget(details: Record<string, unknown>): string | undefined {
     return undefined;
 }
 
+/**
+ * An approval decision that stopped the tool from running — a denial, a timeout, or a cancellation
+ * — as opposed to one that released it. Unknown decisions count as blocking: every decision the
+ * agent has ever emitted except `auto_approved` is one, so that is the safer default.
+ */
+function isBlockingApprovalDecision(decision: unknown): boolean {
+    return typeof decision === 'string' && decision !== 'auto_approved';
+}
+
 function getApprovalDecisionLabel(decision: unknown, toolLabel: string): string | undefined {
     switch (decision) {
         case 'denied':
@@ -1221,6 +1240,8 @@ function getApprovalDecisionLabel(decision: unknown, toolLabel: string): string
             return `Approval reviewer denied ${toolLabel}.`;
         case 'cancelled_after_denial':
             return `Cancelled ${toolLabel} after another tool was denied.`;
+        case 'auto_approved':
+            return `Approval no longer required for ${toolLabel}.`;
         default:
             return undefined;
     }
@@ -1237,6 +1258,8 @@ function getApprovalDecisionStatusText(decision: unknown): string | undefined {
             return 'Denied by reviewer';
         case 'cancelled_after_denial':
             return 'Cancelled after denial';
+        case 'auto_approved':
+            return 'Approved without asking';
         default:
             return undefined;
     }
@@ -1467,7 +1490,7 @@ function getToolDetailSections(message: AgentMessage): SummaryToolDetailSection[
     addSection(
         'Output',
         ['output', 'stdout', 'result', 'results', 'content', 'result_summary', 'observation', 'display_message'],
-        typeof details.approval_decision === 'string' ? 'error' : undefined,
+        isBlockingApprovalDecision(details.approval_decision) ? 'error' : undefined,
     );
     addSection('Files', ['files', 'outputFiles']);
     addSection('Error', ['error', 'stderr'], 'error');
@@ -3322,9 +3345,6 @@ function AllMessagesMixedComponent({
                 .agent-markdown col {
                     width: var(--agent-markdown-table-column-width);
                 }
-                .agent-markdown .agent-markdown-table-compact-col {
-                    width: clamp(4.75rem, var(--agent-markdown-table-column-width), 7rem);
-                }
                 .agent-markdown tr:last-child td {
                     border-bottom: 0;
                 }

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

@@ -83,7 +83,7 @@ function BatchProgressPanelComponent({
         if (overallStatus === 'error' || overallStatus === 'warning') {
             return <AlertCircle className="size-4 text-destructive" />;
         }
-        return <Layers className="size-4 text-purple-600" />;
+        return <Layers className="size-4 text-done" />;
     };
 
     // Border color based on status
@@ -91,14 +91,14 @@ function BatchProgressPanelComponent({
         if (overallStatus === 'completed') return 'border-s-success';
         if (overallStatus === 'error') return 'border-s-destructive';
         if (overallStatus === 'warning') return 'border-s-attention';
-        return 'border-s-blue-500';
+        return 'border-s-info';
     };
 
     // Progress bar color
     const getProgressColor = () => {
         if (hasErrors) return 'bg-attention';
         if (isComplete) return 'bg-success';
-        return 'bg-blue-500';
+        return 'bg-primary';
     };
 
     const copyToClipboard = () => {
@@ -118,7 +118,7 @@ function BatchProgressPanelComponent({
     return (
         <div
             className={cn(
-                'border-s-4 shadow-md overflow-hidden bg-white dark:bg-gray-900 mb-5',
+                'border-s-4 shadow-md overflow-hidden bg-white dark:bg-muted mb-5',
                 getBorderColor(),
                 className,
             )}
@@ -130,7 +130,7 @@ function BatchProgressPanelComponent({
                 tabIndex={0}
                 aria-expanded={isExpanded}
                 className={cn(
-                    'flex items-center justify-between px-4 py-2 border-b border-gray-100/80 dark:border-gray-800/80 bg-blue-50/50 dark:bg-blue-900/10 cursor-pointer',
+                    'flex items-center justify-between px-4 py-2 border-b border-border/80 bg-info/50 dark:bg-info/10 cursor-pointer',
                     headerClassName,
                 )}
                 onClick={() => setIsExpanded(!isExpanded)}
@@ -139,7 +139,7 @@ function BatchProgressPanelComponent({
                 <div className="flex items-center gap-2">
                     {renderStatusIndicator()}
                     <span className={cn('text-xs font-medium text-muted', senderClassName)}>{t('agent.batch')}</span>
-                    <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">{tool_name}</span>
+                    <span className="text-xs text-info font-medium">{tool_name}</span>
                     <span className="text-xs text-muted">
                         {completed}/{total}
                     </span>
@@ -169,9 +169,9 @@ function BatchProgressPanelComponent({
             </div>
 
             {/* Progress bar */}
-            <div className={cn('px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30', progressBarClassName)}>
+            <div className={cn('px-4 py-2 bg-muted/50 dark:bg-muted/30', progressBarClassName)}>
                 <div className="flex items-center gap-3">
-                    <div className="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                    <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                         <div
                             className={`h-full ${getProgressColor()} transition-all duration-300 ease-out`}
                             style={{ width: `${progress}%` }}
@@ -191,7 +191,7 @@ function BatchProgressPanelComponent({
                             </span>
                         )}
                         {isRunning && completed < total && (
-                            <span className="text-blue-500 flex items-center gap-1">
+                            <span className="text-info flex items-center gap-1">
                                 <Loader2 className="size-3 animate-spin" />
                                 {total - completed}
                             </span>
@@ -207,7 +207,7 @@ function BatchProgressPanelComponent({
                         <div
                             key={item.id}
                             className={cn(
-                                'flex items-center gap-2 px-4 py-1.5 text-xs border-b border-gray-100 dark:border-gray-800 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800/50',
+                                'flex items-center gap-2 px-4 py-1.5 text-xs border-b border-border last:border-b-0 hover:bg-muted',
                                 itemClassName,
                             )}
                         >
@@ -215,9 +215,9 @@ function BatchProgressPanelComponent({
                             <div className="w-4 flex-shrink-0">
                                 {item.status === 'success' && <CheckCircle className="size-3 text-success" />}
                                 {item.status === 'error' && <AlertCircle className="size-3 text-destructive" />}
-                                {item.status === 'running' && <Loader2 className="size-3 text-blue-500 animate-spin" />}
+                                {item.status === 'running' && <Loader2 className="size-3 text-info animate-spin" />}
                                 {item.status === 'pending' && (
-                                    <div className="size-3 rounded-full border border-gray-300 dark:border-gray-600" />
+                                    <div className="size-3 rounded-full border border-border" />
                                 )}
                             </div>
 

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

@@ -298,7 +298,7 @@ export default function Header({
                                 'w-2 h-2 rounded-full transition-colors duration-200',
                                 isReceivingChunks
                                     ? 'bg-purple-500 shadow-[0_0_6px_2px_rgba(168,85,247,0.6)]'
-                                    : 'bg-gray-400',
+                                    : 'bg-muted',
                             )}
                         />
                     </span>

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

@@ -45,15 +45,15 @@ export default function InlineSlideInPanel({
 
     return (
         <div
-            className={`absolute top-12 end-0 bottom-0 z-40 bg-white dark:bg-gray-900 shadow-lg border-s border-gray-200 dark:border-gray-800 border-4 border-red-500`}
+            className={`absolute top-12 end-0 bottom-0 z-40 bg-white dark:bg-muted shadow-lg border-s border-border border-4 border-destructive`}
             style={{ width, transform: 'none' }}
         >
             {/* Header */}
-            <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800">
-                <h3 className="font-medium text-gray-800 dark:text-gray-200 text-sm">{title}</h3>
+            <div className="flex items-center justify-between p-3 border-b border-border">
+                <h3 className="font-medium text-foreground text-sm">{title}</h3>
                 <Button
                     variant="unstyled"
-                    className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full"
+                    className="p-1 text-muted hover:text-foreground rounded-full"
                     onClick={onClose}
                     aria-label="Close"
                 >

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

@@ -456,8 +456,8 @@ export default function MessageInput({
         >
             {/* Drag overlay */}
             {isDragOver && canDropFiles && (
-                <div className="absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 rounded-lg z-10 pointer-events-none">
-                    <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2">
+                <div className="absolute inset-0 flex items-center justify-center bg-info/80 dark:bg-info/40 rounded-lg z-10 pointer-events-none">
+                    <div className="text-info font-medium flex items-center gap-2">
                         <UploadIcon className="size-5" />
                         {t('agent.dropFilesToUpload')}
                     </div>

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

@@ -140,8 +140,8 @@ export const MESSAGE_STYLES: Record<AgentMessageType | 'default', MessageStyleCo
     },
     [AgentMessageType.QUESTION]: { borderColor: 'border-s-muted', iconColor: 'text-muted', sender: 'User', Icon: User },
     [AgentMessageType.THOUGHT]: {
-        borderColor: 'border-s-purple-500',
-        iconColor: 'text-purple-600 dark:text-purple-400',
+        borderColor: 'border-s-done',
+        iconColor: 'text-done',
         sender: 'Agent',
         Icon: Bot,
     },
@@ -183,8 +183,8 @@ export const MESSAGE_STYLES: Record<AgentMessageType | 'default', MessageStyleCo
         Icon: Bot,
     },
     [AgentMessageType.BATCH_PROGRESS]: {
-        borderColor: 'border-s-blue-500',
-        iconColor: 'text-blue-600 dark:text-blue-400',
+        borderColor: 'border-s-info',
+        iconColor: 'text-info',
         sender: 'Batch',
         Icon: Layers,
     },
@@ -412,7 +412,7 @@ function MessageItemComponent({
         // Handle object content (JSON)
         if (typeof content === 'object') {
             return (
-                <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto bg-gray-100 dark:bg-gray-800 p-2 rounded text-gray-700">
+                <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto bg-muted p-2 rounded text-foreground">
                     {JSON.stringify(content, null, 2)}
                 </pre>
             );
@@ -548,7 +548,7 @@ function MessageItemComponent({
         <div className={cn('w-full max-w-full', resolvedStyle.className)}>
             <div
                 className={cn(
-                    'border-s-4 bg-white dark:bg-gray-900 mb-4 w-full max-w-full overflow-hidden',
+                    'border-s-4 bg-white dark:bg-muted mb-4 w-full max-w-full overflow-hidden',
                     resolvedStyle.borderColor,
                     resolvedStyle.cardClassName,
                 )}
@@ -611,12 +611,7 @@ function MessageItemComponent({
                 </div>
 
                 {/* Message content */}
-                <div
-                    className={cn(
-                        'px-4 pb-3 bg-white dark:bg-gray-900 overflow-hidden',
-                        resolvedStyle.contentClassName,
-                    )}
-                >
+                <div className={cn('px-4 pb-3 bg-white dark:bg-muted overflow-hidden', resolvedStyle.contentClassName)}>
                     {/* Check for REQUEST_INPUT with UX config - render AskUserWidget instead of plain text */}
                     {askUserUx ? (
                         <AskUserWidget

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

@@ -50,7 +50,7 @@ export default function MessagesContainer({
         >
             {sortedMessages.length === 0 ? (
                 <div className={`flex items-center justify-center h-full text-center py-8 ${emptyClassName || ''}`}>
-                    <div className="flex items-center px-4 py-3 text-gray-500">Waiting for agent response...</div>
+                    <div className="flex items-center px-4 py-3 text-muted">Waiting for agent response...</div>
                 </div>
             ) : (
                 <div className={`flex-1 flex flex-col justify-start h-full min-h-0 ${messagesClassName || ''}`}>

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

@@ -14,8 +14,8 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
     if (!isVisible) return null;
 
     return (
-        <div className="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-3 shadow-sm transition-all duration-300 ease-in-out transform">
-            <div className="text-xs font-medium mb-2 text-gray-800 dark:text-gray-200">{t('agent.agentPlan')}</div>
+        <div className="border-b border-border bg-muted p-3 shadow-sm transition-all duration-300 ease-in-out transform">
+            <div className="text-xs font-medium mb-2 text-foreground">{t('agent.agentPlan')}</div>
 
             {/* Plan Steps */}
             {plan.plan && plan.plan.length > 0 ? (
@@ -34,14 +34,14 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
 
                         // Determine status icon and style
                         let StatusIcon = Circle;
-                        let statusColor = 'text-gray-400';
+                        let statusColor = 'text-muted';
 
                         if (status === 'in_progress') {
                             StatusIcon = Clock;
-                            statusColor = 'text-blue-500';
+                            statusColor = 'text-info';
                         } else if (status === 'completed') {
                             StatusIcon = CheckCircle;
-                            statusColor = 'text-green-500';
+                            statusColor = 'text-success';
                         }
 
                         return (
@@ -50,8 +50,8 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
                                     <StatusIcon className="h-3.5 w-3.5" />
                                 </div>
                                 <div className="text-xs">
-                                    <span className="text-gray-700 dark:text-gray-300">{taskGoal}</span>
-                                    <span className="ms-1 bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded text-[10px] font-mono">
+                                    <span className="text-foreground">{taskGoal}</span>
+                                    <span className="ms-1 bg-muted px-1 py-0.5 rounded text-[10px] font-mono">
                                         {taskId}
                                     </span>
                                 </div>
@@ -60,18 +60,16 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
                     })}
                 </div>
             ) : (
-                <div className="text-xs text-gray-500 dark:text-gray-400 italic flex items-center">
-                    <AlertCircle className="h-3.5 w-3.5 me-1.5 text-amber-500" />
+                <div className="text-xs text-muted italic flex items-center">
+                    <AlertCircle className="h-3.5 w-3.5 me-1.5 text-attention" />
                     {t('agent.noPlanDetected')}
                 </div>
             )}
 
             {/* Workstream Status Summary */}
             {workstreamStatus.size > 1 && (
-                <div className="mt-3 pt-2 border-t border-gray-200 dark:border-gray-700">
-                    <div className="text-xs font-medium mb-1.5 text-gray-800 dark:text-gray-200">
-                        {t('agent.workstreams')}
-                    </div>
+                <div className="mt-3 pt-2 border-t border-border">
+                    <div className="text-xs font-medium mb-1.5 text-foreground">{t('agent.workstreams')}</div>
                     <div className="grid grid-cols-2 gap-1.5">
                         {Array.from(workstreamStatus.entries())
                             // Filter to only show real workstreams (main or those with valid names - not numeric IDs)
@@ -91,16 +89,16 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
                             })
                             .map(([id, status]) => {
                                 let StatusIcon = Circle;
-                                let statusColor = 'text-gray-400';
+                                let statusColor = 'text-muted';
                                 let statusText = t('agent.pending');
 
                                 if (status === 'in_progress') {
                                     StatusIcon = Clock;
-                                    statusColor = 'text-blue-500';
+                                    statusColor = 'text-info';
                                     statusText = t('agent.inProgress');
                                 } else if (status === 'completed') {
                                     StatusIcon = CheckCircle;
-                                    statusColor = 'text-green-500';
+                                    statusColor = 'text-success';
                                     statusText = t('agent.completed');
                                 }
 
@@ -112,12 +110,8 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
                                         <div className={`me-1.5 ${statusColor}`}>
                                             <StatusIcon className="h-3 w-3" />
                                         </div>
-                                        <span className="text-[10px] font-medium text-gray-600 dark:text-gray-400">
-                                            {displayId}
-                                        </span>
-                                        <span className="text-[10px] text-gray-500 dark:text-gray-500 ms-1">
-                                            {statusText}
-                                        </span>
+                                        <span className="text-[10px] font-medium text-muted">{displayId}</span>
+                                        <span className="text-[10px] text-muted ms-1">{statusText}</span>
                                     </div>
                                 );
                             })}

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

@@ -48,15 +48,15 @@ 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 ${panelTranslateClass}`}
+                className={`fixed top-0 end-0 bottom-0 z-50 bg-white dark:bg-muted shadow-lg border-s border-border transition-transform duration-300 ease-in-out ${panelTranslateClass}`}
                 style={{ width }}
             >
                 {/* Header */}
-                <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
-                    <h3 className="font-medium text-gray-800 dark:text-gray-200">{title}</h3>
+                <div className="flex items-center justify-between p-4 border-b border-border">
+                    <h3 className="font-medium text-foreground">{title}</h3>
                     <Button
                         variant="unstyled"
-                        className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full"
+                        className="p-1 text-muted hover:text-foreground rounded-full"
                         onClick={onClose}
                         aria-label="Close"
                     >

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

@@ -82,10 +82,8 @@ 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 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>
+                    <div className="flex items-center gap-3 bg-info rounded-lg border border-info px-4 py-3">
+                        <div className="text-sm text-info font-medium">{ThinkingMessages[thinkingMessageIndex]}</div>
                     </div>
                 </div>
             )}