Clean up theme usage in components

- Remove resolveThemeColor calls from components (handled in theme building)
- Components now use theme properties directly with ?? fallbacks
- Simplify AgentBranchItem and ToolCallItem props (remove showBorder, toggleEnabled)
- Auto-resolve 'default' color values to actual colors during theme building
- ThemeColor is always a string (never undefined or 'default')

Components are now simpler and just consume ready-to-use theme values.

Author: brandonkachen

cli/src/components/agent-branch-item.tsx

@@ -2,8 +2,7 @@ import { TextAttributes, type BorderCharacters } from '@opentui/core'
 import React, { type ReactNode } from 'react'
 
 import { RaisedPill } from './raised-pill'
-
-import type { ChatTheme } from '../utils/theme-system'
+import { useTheme } from '../hooks/use-theme'
 
 interface AgentBranchItemProps {
   name: string
@@ -18,10 +17,7 @@ interface AgentBranchItemProps {
   statusLabel?: string
   statusColor?: string
   statusIndicator?: string
-  theme: ChatTheme
   onToggle?: () => void
-  showBorder?: boolean
-  toggleEnabled?: boolean
   titleSuffix?: string
 }
 
@@ -52,24 +48,10 @@ export const AgentBranchItem = ({
   statusLabel,
   statusColor,
   statusIndicator = '●',
-  theme,
   onToggle,
-  showBorder = true,
-  toggleEnabled = true,
   titleSuffix,
 }: AgentBranchItemProps) => {
-  const resolveFg = (
-    color?: string | null,
-    fallback?: string | null,
-  ): string | undefined => {
-    if (color && color !== 'default') return color
-    if (fallback && fallback !== 'default') return fallback
-    return undefined
-  }
-  const fallbackTextColor =
-    resolveFg(theme.agentContentText) ??
-    resolveFg(theme.chromeText) ??
-    '#d1d5e5'
+  const theme = useTheme()
 
   const baseTextAttributes = theme.messageTextAttributes ?? 0
   const getAttributes = (extra: number = 0): number | undefined => {
@@ -80,19 +62,12 @@ export const AgentBranchItem = ({
   const isExpanded = !isCollapsed
   const toggleFrameColor = isExpanded
     ? theme.agentToggleExpandedBg
-    : theme.agentResponseCount ?? theme.agentToggleHeaderBg
-  const toggleIconColor = isStreaming
-    ? theme.statusAccent
-    : theme.chromeText ?? toggleFrameColor
-  const toggleLabelColor = theme.chromeText ?? toggleFrameColor
-  const toggleIndicator = toggleEnabled ? (isCollapsed ? '▸ ' : '▾ ') : ''
+    : theme.agentResponseCount
+  const toggleIconColor = isStreaming ? theme.statusAccent : theme.chromeText
+  const toggleIndicator = onToggle ? (isCollapsed ? '▸ ' : '▾ ') : ''
   const toggleLabel = `${branchChar}${toggleIndicator}`
   const collapseButtonFrame = theme.agentToggleExpandedBg
   const collapseButtonText = collapseButtonFrame
-  const toggleFrameFg = resolveFg(toggleFrameColor, fallbackTextColor)
-  const toggleIconFg = resolveFg(toggleIconColor, fallbackTextColor)
-  const toggleLabelFg = resolveFg(toggleLabelColor, fallbackTextColor)
-  const headerFg = resolveFg(theme.agentToggleHeaderText, fallbackTextColor)
   const statusText =
     statusLabel && statusLabel.length > 0
       ? statusIndicator === '✓'
@@ -149,7 +124,7 @@ export const AgentBranchItem = ({
     if (isTextRenderable(value)) {
       return (
         <text
-          fg={resolveFg(theme.agentText)}
+          fg={theme.agentText}
           key="expanded-text"
           attributes={getAttributes()}
         >
@@ -204,10 +179,10 @@ export const AgentBranchItem = ({
       }}
     >
       <box
-        border={showBorder}
-        borderStyle={showBorder ? 'single' : undefined}
-        borderColor={showBorder ? toggleFrameFg ?? undefined : undefined}
-        customBorderChars={showBorder ? containerBorderChars : undefined}
+        border
+        borderStyle="single"
+        borderColor={toggleFrameColor}
+        customBorderChars={containerBorderChars}
         style={{
           flexDirection: 'column',
           gap: 0,
@@ -230,9 +205,9 @@ export const AgentBranchItem = ({
               width: '100%',
             }}
           >
-            <text {...(headerFg ? { fg: headerFg } : undefined)}>Prompt</text>
+            <text fg={theme.agentToggleHeaderText}>Prompt</text>
             <text
-              fg={resolveFg(theme.agentText)}
+              fg={theme.agentText}
               style={{ wrapMode: 'word' }}
               attributes={getAttributes()}
             >
@@ -244,27 +219,27 @@ export const AgentBranchItem = ({
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            paddingLeft: showBorder ? 1 : 0,
-            paddingRight: showBorder ? 1 : 0,
+            paddingLeft: 1,
+            paddingRight: 1,
             paddingTop: 0,
             paddingBottom: isCollapsed ? 0 : 1,
             width: '100%',
           }}
-          onMouseDown={toggleEnabled && onToggle ? onToggle : undefined}
+          onMouseDown={onToggle}
         >
           <text style={{ wrapMode: 'none' }}>
-            <span {...(toggleIconFg ? { fg: toggleIconFg } : undefined)}>
+            <span fg={toggleIconColor}>
               {toggleLabel}
             </span>
             <span
-              {...(toggleLabelFg ? { fg: toggleLabelFg } : undefined)}
+              fg={theme.chromeText}
               attributes={isExpanded ? TextAttributes.BOLD : undefined}
             >
               {name}
             </span>
             {titleSuffix ? (
               <span
-                {...(toggleLabelFg ? { fg: toggleLabelFg } : undefined)}
+                fg={theme.chromeText}
                 attributes={TextAttributes.BOLD}
               >
                 {` ${titleSuffix}`}
@@ -292,10 +267,7 @@ export const AgentBranchItem = ({
               }}
             >
               <text
-                fg={resolveFg(
-                  isStreaming ? theme.agentText : theme.agentResponseCount,
-                  fallbackTextColor,
-                )}
+                fg={isStreaming ? theme.agentText : theme.agentResponseCount}
                 attributes={getAttributes(TextAttributes.ITALIC)}
               >
                 {isStreaming ? streamingPreview : finishedPreview}
@@ -321,19 +293,19 @@ export const AgentBranchItem = ({
                   marginBottom: content ? 1 : 0,
                 }}
               >
-                <text {...(headerFg ? { fg: headerFg } : undefined)}>
+                <text fg={theme.agentToggleHeaderText}>
                   Prompt
                 </text>
                 <text
-                  fg={resolveFg(theme.agentText)}
+                  fg={theme.agentText}
                   style={{ wrapMode: 'word' }}
                   attributes={getAttributes()}
                 >
                   {prompt}
                 </text>
                 {content && (
                   <text
-                    {...(headerFg ? { fg: headerFg } : undefined)}
+                    fg={theme.agentToggleHeaderText}
                     style={{ marginTop: 1 }}
                   >
                     Response
@@ -342,12 +314,12 @@ export const AgentBranchItem = ({
               </box>
             )}
             {renderExpandedContent(content)}
-            {toggleEnabled && onToggle && (
+            {onToggle && (
               <box
                 style={{
                   alignSelf: 'flex-end',
                   marginTop: content ? 0 : 1,
-                  paddingRight: showBorder ? 1 : 0,
+                  paddingRight: 1,
                   paddingBottom: 0,
                   marginBottom: 0,
                 }}

cli/src/components/message-block.tsx

@@ -18,7 +18,6 @@ import {
 import type { ElapsedTimeTracker } from '../hooks/use-elapsed-time'
 import type { ContentBlock } from '../types/chat'
 import type { ChatTheme, ThemeColor } from '../types/theme-system'
-import { resolveThemeColor } from '../utils/theme-system'
 
 const trimTrailingNewlines = (value: string): string =>
   value.replace(/[\r\n]+$/g, '')
@@ -73,10 +72,7 @@ export const MessageBlock = ({
   onToggleCollapsed,
   registerAgentRef,
 }: MessageBlockProps): ReactNode => {
-  const resolvedTextColor =
-    resolveThemeColor(textColor, theme.messageAiText) ??
-    resolveThemeColor(theme.messageAiText, '#cbd5f5') ??
-    '#cbd5f5'
+  const resolvedTextColor = textColor ?? theme.messageAiText
 
   // Get elapsed time from timer for streaming AI messages
   const elapsedSeconds = timer.elapsedSeconds
@@ -239,7 +235,7 @@ export const MessageBlock = ({
         ? null
         : (
             <text
-              fg={resolveThemeColor(theme.agentText)}
+              fg={theme.agentText}
               style={{ wrapMode: 'word' }}
               attributes={
                 theme.messageTextAttributes && theme.messageTextAttributes !== 0
@@ -280,7 +276,6 @@ export const MessageBlock = ({
           branchChar={branchChar}
           streamingPreview={streamingPreview}
           finishedPreview={finishedPreview}
-          theme={theme}
           onToggle={() => onToggleCollapsed(toolBlock.toolCallId)}
           titleSuffix={toolRenderConfig.path}
         />
@@ -361,7 +356,6 @@ export const MessageBlock = ({
           statusLabel={statusLabel ?? undefined}
           statusColor={statusColor}
           statusIndicator={statusIndicator}
-          theme={theme}
           onToggle={() => onToggleCollapsed(agentBlock.agentId)}
         />
       </box>
@@ -446,7 +440,6 @@ export const MessageBlock = ({
           branchChar=""
           streamingPreview=""
           finishedPreview={finishedPreview}
-          theme={theme}
           onToggle={() => onToggleCollapsed(agentListBlock.id)}
         />
       </box>
@@ -488,16 +481,13 @@ export const MessageBlock = ({
             typeof (nestedBlock as any).color === 'string'
               ? ((nestedBlock as any).color as string)
               : undefined
-          const nestedTextColor = resolveThemeColor(
-            explicitColor,
-            theme.agentText,
-          )
+          const nestedTextColor = explicitColor ?? theme.agentText
           nodes.push(
             <text
               key={renderKey}
               style={{
                 wrapMode: 'word',
-                fg: nestedTextColor ?? theme.agentText,
+                fg: nestedTextColor,
                 marginLeft: Math.max(0, indentLevel * 2),
                 marginTop,
                 marginBottom,
@@ -607,11 +597,11 @@ export const MessageBlock = ({
           typeof (block as any).color === 'string'
             ? ((block as any).color as string)
             : undefined
-        const blockTextColor = resolveThemeColor(explicitColor, resolvedTextColor)
+        const blockTextColor = explicitColor ?? resolvedTextColor
         return (
           <text
             key={renderKey}
-            style={{ wrapMode: 'word', fg: blockTextColor ?? resolvedTextColor, marginTop, marginBottom }}
+            style={{ wrapMode: 'word', fg: blockTextColor, marginTop, marginBottom }}
           >
             {renderedContent}
           </text>