From 5209395a7477cb3dcd96cc0e2b2f99e01a964dc9 Mon Sep 17 00:00:00 2001 From: Stefan de Vogelaere Date: Sat, 17 Jan 2026 11:44:33 +0100 Subject: [PATCH] fix: respect theme in agent output modal and log viewer The Agent Output modal and LogViewer component had hardcoded dark zinc colors that didn't adapt to light mode themes. Replaced all hardcoded colors with semantic Tailwind classes (bg-popover, text-foreground, text-muted-foreground, bg-muted, border-border) that automatically respect the active theme. --- apps/ui/src/components/ui/log-viewer.tsx | 52 ++++++++++--------- .../board-view/dialogs/agent-output-modal.tsx | 6 ++- 2 files changed, 31 insertions(+), 27 deletions(-) diff --git a/apps/ui/src/components/ui/log-viewer.tsx b/apps/ui/src/components/ui/log-viewer.tsx index 5284ef2d..1d14a14e 100644 --- a/apps/ui/src/components/ui/log-viewer.tsx +++ b/apps/ui/src/components/ui/log-viewer.tsx @@ -108,7 +108,7 @@ const getToolCategoryColor = (category: ToolCategory | undefined): string => { case 'task': return 'text-indigo-400 bg-indigo-500/10 border-indigo-500/30'; default: - return 'text-zinc-400 bg-zinc-500/10 border-zinc-500/30'; + return 'text-muted-foreground bg-muted/30 border-border'; } }; @@ -150,9 +150,9 @@ function TodoListRenderer({ todos }: { todos: TodoItem[] }) { case 'in_progress': return ; case 'pending': - return ; + return ; default: - return ; + return ; } }; @@ -163,9 +163,9 @@ function TodoListRenderer({ todos }: { todos: TodoItem[] }) { case 'in_progress': return 'text-amber-300'; case 'pending': - return 'text-zinc-400'; + return 'text-muted-foreground'; default: - return 'text-zinc-400'; + return 'text-muted-foreground'; } }; @@ -197,7 +197,7 @@ function TodoListRenderer({ todos }: { todos: TodoItem[] }) { 'flex items-start gap-2 p-2 rounded-md transition-colors', todo.status === 'in_progress' && 'bg-amber-500/5 border border-amber-500/20', todo.status === 'completed' && 'bg-emerald-500/5', - todo.status === 'pending' && 'bg-zinc-800/30' + todo.status === 'pending' && 'bg-muted/30' )} >
{getStatusIcon(todo.status)}
@@ -313,9 +313,9 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) { // Get colors - use tool category colors for tool_call entries const colorParts = toolCategoryColors.split(' '); - const textColor = isToolCall ? colorParts[0] || 'text-zinc-400' : colors.text; - const bgColor = isToolCall ? colorParts[1] || 'bg-zinc-500/10' : colors.bg; - const borderColor = isToolCall ? colorParts[2] || 'border-zinc-500/30' : colors.border; + const textColor = isToolCall ? colorParts[0] || 'text-muted-foreground' : colors.text; + const bgColor = isToolCall ? colorParts[1] || 'bg-muted/30' : colors.bg; + const borderColor = isToolCall ? colorParts[2] || 'border-border' : colors.border; return (
{hasContent ? ( isExpanded ? ( - + ) : ( - + ) ) : ( @@ -361,7 +361,9 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) { {entry.title} - {collapsedPreview} + + {collapsedPreview} + {(isExpanded || !hasContent) && ( @@ -374,7 +376,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) { {formattedContent.map((part, index) => (
{part.type === 'json' ? ( - 
+                    
                       {part.content}
                     

                   ) : (
@@ -576,7 +578,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
           
           
No log entries yet. Logs will appear here as the process runs.

           {output && output.trim() && (
-            

+            

               
{output}

             

           )}
@@ -610,23 +612,23 @@ export function LogViewer({ output, className }: LogViewerProps) {
     

       {/* Sticky header with search, stats, and filters */}
       {/* Use -top-4 to compensate for parent's p-4 padding, pt-4 to restore visual spacing */}
-      

+      

         {/* Search bar */}
         

           

-            
+            
              setSearchQuery(e.target.value)}
               placeholder="Search logs..."
-              className="w-full pl-8 pr-8 py-1.5 text-xs bg-zinc-900/50 border border-zinc-700/50 rounded-md text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
+              className="w-full pl-8 pr-8 py-1.5 text-xs bg-muted/50 border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-ring"
               data-testid="log-search-input"
             />
             {searchQuery && (