@vertesia/ui 1.5.0-dev.20260901.052906Z → 1.5.0-dev.20260910.051115Z

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

@@ -65,6 +65,19 @@ export interface HeaderProps {
     className?: string;
 }
 
+/**
+ * Opens an internal route in a new browser tab, carrying the active tenant sticky params (a/p) so
+ * the new tab keeps the current account/project; absolute/external URLs are left untouched.
+ */
+function useOpenInNewTab() {
+    const { router } = useRouterContext();
+    return (url: string) => {
+        const href = url.startsWith('/') ? router.getTopRouter().navigator.addStickyParams(url) : url;
+        window.open(href, '_blank', 'noopener,noreferrer');
+        return href;
+    };
+}
+
 export default function Header({
     title,
     variant = 'full',
@@ -93,6 +106,7 @@ export default function Header({
     className,
 }: HeaderProps) {
     const { t } = useUITranslation();
+    const openInNewTab = useOpenInNewTab();
     const isCompact = variant === 'compact';
     const nextViewMode: AgentConversationViewMode = viewMode === 'sliding' ? 'stacked' : 'sliding';
     const verboseLabel = t('agent.verbose');
@@ -195,6 +209,19 @@ export default function Header({
                 </Button>
             )}
 
+            {agentRunId && (
+                <Button
+                    type="button"
+                    size={isCompact ? 'icon' : 'xs'}
+                    variant="ghost"
+                    onClick={() => openInNewTab(`/store/agent-runner/${agentRunId}`)}
+                    title={t('agent.openInNewTab')}
+                    className={cn('transition-all duration-200 rounded-md', isCompact && 'size-8 rounded-lg')}
+                >
+                    <ExternalLink className="size-4" />
+                </Button>
+            )}
+
             {resetWorkflow && (
                 <Button
                     type="button"
@@ -271,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>
@@ -316,7 +343,6 @@ function MoreDropdown({
     const toast = useToast();
     const { client } = useUserSession();
     const builder = usePayloadBuilder();
-    const { router } = useRouterContext();
 
     const cancelWorkflow = async () => {
         try {
@@ -360,14 +386,6 @@ function MoreDropdown({
         }
     };
 
-    const openUrl = (url: string) => {
-        // Carry the active tenant sticky params (a/p) on internal routes so the new tab keeps the
-        // current account/project; leave absolute/external URLs untouched.
-        const href = url.startsWith('/') ? router.getTopRouter().navigator.addStickyParams(url) : url;
-        window.open(href, '_blank');
-        return href;
-    };
-
     const copyAgentRunId = () => {
         navigator.clipboard.writeText(agentRunId);
         toast({
@@ -401,11 +419,6 @@ function MoreDropdown({
             }
         >
             <MenuGroup label="Actions">
-                {isModal && (
-                    <MenuItem onClick={() => openUrl(`/store/agent-runner/${agentRunId}`)}>
-                        <ExternalLink className="size-3.5 text-muted" /> {t('agent.openInNewTab')}
-                    </MenuItem>
-                )}
                 <MenuItem onClick={copyAgentRunId}>
                     <CopyIcon className="size-3.5 text-muted" /> {t('agent.copyAgentRunId')}
                 </MenuItem>

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>
             )}

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