Refine macOS terminal theming

Author: brandonkachen

bun.lock

@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@codebuff/sdk": "workspace:*",
-    "@opentui/core": "^0.1.31",
-    "@opentui/react": "^0.1.31",
+    "@opentui/core": "0.0.0-20251029-f23e92a5",
+    "@opentui/react": "0.0.0-20251029-f23e92a5",
     "@tanstack/react-query": "^5.62.8",
     "commander": "^14.0.1",
     "immer": "^10.1.3",

cli/package.json

@@ -31,7 +31,12 @@ import { formatQueuedPreview } from './utils/helpers'
 import { loadLocalAgents } from './utils/local-agent-registry'
 import { logger } from './utils/logger'
 import { buildMessageTree } from './utils/message-tree-utils'
-import { chatTheme, createMarkdownPalette } from './utils/theme-system'
+import {
+  chatTheme,
+  createMarkdownPalette,
+  onThemeChange,
+  type ChatTheme,
+} from './utils/theme-system'
 
 import type { User } from './utils/auth'
 import type { ToolName } from '@codebuff/sdk'
@@ -127,8 +132,47 @@ export const App = ({
   const terminalWidth = resolvedTerminalWidth
   const separatorWidth = Math.max(1, Math.floor(terminalWidth) - 2)
 
-  const theme = chatTheme
-  const markdownPalette = useMemo(() => createMarkdownPalette(theme), [theme])
+  const cloneTheme = (input: ChatTheme): ChatTheme => ({
+    ...input,
+    markdown: input.markdown
+      ? {
+          ...input.markdown,
+          headingFg: input.markdown.headingFg
+            ? { ...input.markdown.headingFg }
+            : undefined,
+        }
+      : undefined,
+  })
+
+  const [theme, setTheme] = useState<ChatTheme>(() => cloneTheme(chatTheme))
+  const [resolvedThemeName, setResolvedThemeName] = useState<'dark' | 'light'>(
+    chatTheme.messageTextAttributes ? 'dark' : 'light',
+  )
+
+  useEffect(() => {
+    const unsubscribe = onThemeChange((updatedTheme, meta) => {
+      const nextTheme = cloneTheme(updatedTheme)
+      setTheme(nextTheme)
+      setResolvedThemeName(meta.resolvedThemeName)
+      if (process.env.CODEBUFF_THEME_DEBUG === '1') {
+        logger.debug(
+          {
+            themeChange: {
+              source: meta.source,
+              resolvedThemeName: meta.resolvedThemeName,
+            },
+          },
+          'Applied theme change in chat component',
+        )
+      }
+    })
+    return unsubscribe
+  }, [])
+
+  const markdownPalette = useMemo(
+    () => createMarkdownPalette(theme),
+    [theme],
+  )
 
   const [exitWarning, setExitWarning] = useState<string | null>(null)
   const exitArmedRef = useRef(false)
@@ -191,16 +235,27 @@ export const App = ({
     )
   }, [])
 
-  // Initialize with loaded agents message
+  // Initialize and update loaded agents message when theme changes
   useEffect(() => {
-    if (loadedAgentsData && messages.length === 0) {
-      const agentListId = 'loaded-agents-list'
-      const userCredentials = getUserCredentials()
-      const greeting = userCredentials?.name?.trim().length
-        ? `Welcome back, ${userCredentials.name.trim()}!`
-        : null
-
-      const blocks: ContentBlock[] = [
+    if (!loadedAgentsData) {
+      return
+    }
+
+    const agentListId = 'loaded-agents-list'
+    const userCredentials = getUserCredentials()
+    const greeting = userCredentials?.name?.trim().length
+      ? `Welcome back, ${userCredentials.name.trim()}!`
+      : null
+
+    const baseTextColor =
+      resolvedThemeName === 'dark'
+        ? '#ffffff'
+        : theme.chromeText && theme.chromeText !== 'default'
+          ? theme.chromeText
+          : theme.agentResponseCount
+
+    const buildBlocks = (listId: string): ContentBlock[] => {
+      const result: ContentBlock[] = [
         {
           type: 'text',
           content: '\n\n' + LOGO_BLOCK,
@@ -209,41 +264,76 @@ export const App = ({
       ]
 
       if (greeting) {
-        blocks.push({
+        result.push({
           type: 'text',
           content: greeting,
-          color: theme.agentResponseCount,
+          color: baseTextColor,
         })
       }
 
-      blocks.push(
+      result.push(
         {
           type: 'text',
           content:
             'Codebuff can read and write files in this repository, and run terminal commands to help you build.',
-          color: theme.agentResponseCount,
+          color: baseTextColor,
         },
         {
           type: 'agent-list',
-          id: agentListId,
+          id: listId,
           agents: loadedAgentsData.agents,
           agentsDir: loadedAgentsData.agentsDir,
         },
       )
 
+      return result
+    }
+
+    if (messages.length === 0) {
+      const initialBlocks = buildBlocks(agentListId)
       const initialMessage: ChatMessage = {
         id: `system-loaded-agents-${Date.now()}`,
         variant: 'ai',
         content: '', // Content is in the block
-        blocks,
+        blocks: initialBlocks,
         timestamp: new Date().toISOString(),
       }
 
-      // Set as collapsed by default
       setCollapsedAgents((prev) => new Set([...prev, agentListId]))
       setMessages([initialMessage])
+      return
     }
-  }, [loadedAgentsData, theme]) // Only run when loadedAgentsData changes
+
+    setMessages((prev) => {
+      if (prev.length === 0) {
+        return prev
+      }
+
+      const [firstMessage, ...rest] = prev
+      if (!firstMessage.blocks) {
+        return prev
+      }
+
+      const agentListBlock = firstMessage.blocks.find(
+        (block): block is Extract<ContentBlock, { type: 'agent-list' }> =>
+          block.type === 'agent-list',
+      )
+
+      if (!agentListBlock) {
+        return prev
+      }
+
+      const updatedBlocks = buildBlocks(agentListBlock.id)
+
+      return [
+        {
+          ...firstMessage,
+          blocks: updatedBlocks,
+        },
+        ...rest,
+      ]
+    })
+  }, [loadedAgentsData, resolvedThemeName, theme])
 
   const {
     inputValue,

cli/src/chat.tsx

@@ -51,8 +51,8 @@ export const BranchItem = ({
   onToggle,
 }: BranchItemProps) => {
   const resolveFg = (
-    color?: string,
-    fallback?: string,
+    color?: string | null,
+    fallback?: string | null,
   ): string | undefined => {
     if (color && color !== 'default') return color
     if (fallback && fallback !== 'default') return fallback
@@ -63,14 +63,20 @@ export const BranchItem = ({
     resolveFg(theme.chromeText) ??
     '#d1d5e5'
 
+  const baseTextAttributes = theme.messageTextAttributes ?? 0
+  const getAttributes = (extra: number = 0): number | undefined => {
+    const combined = baseTextAttributes | extra
+    return combined === 0 ? undefined : combined
+  }
+
   const isExpanded = !isCollapsed
   const toggleFrameColor = isExpanded
     ? theme.agentToggleExpandedBg
-    : theme.agentToggleHeaderBg
+    : theme.agentResponseCount ?? theme.agentToggleHeaderBg
   const toggleIconColor = isStreaming
     ? theme.statusAccent
-    : toggleFrameColor
-  const toggleLabelColor = toggleFrameColor
+    : theme.chromeText ?? toggleFrameColor
+  const toggleLabelColor = theme.chromeText ?? toggleFrameColor
   const toggleLabel = `${isCollapsed ? '▸' : '▾'} `
   const collapseButtonFrame = theme.agentToggleExpandedBg
   const collapseButtonText = collapseButtonFrame
@@ -131,7 +137,11 @@ export const BranchItem = ({
 
     if (isTextRenderable(value)) {
       return (
-        <text fg={theme.agentText} key="expanded-text">
+        <text
+          fg={resolveFg(theme.agentText)}
+          key="expanded-text"
+          attributes={getAttributes()}
+        >
           {value}
         </text>
       )
@@ -209,7 +219,11 @@ export const BranchItem = ({
             }}
           >
             <text {...(headerFg ? { fg: headerFg } : undefined)}>Prompt</text>
-            <text fg={theme.agentText} style={{ wrapMode: 'word' }}>
+            <text
+              fg={resolveFg(theme.agentText)}
+              style={{ wrapMode: 'word' }}
+              attributes={getAttributes()}
+            >
               {prompt}
             </text>
           </box>
@@ -254,12 +268,15 @@ export const BranchItem = ({
                 paddingLeft: 1,
                 paddingRight: 1,
                 paddingTop: 0,
-                paddingBottom: 1,
+              paddingBottom: 1,
               }}
             >
               <text
-                fg={isStreaming ? theme.agentText : theme.agentResponseCount}
-                attributes={TextAttributes.ITALIC}
+                fg={resolveFg(
+                  isStreaming ? theme.agentText : theme.agentResponseCount,
+                  fallbackTextColor,
+                )}
+                attributes={getAttributes(TextAttributes.ITALIC)}
               >
                 {isStreaming ? streamingPreview : finishedPreview}
               </text>
@@ -285,7 +302,11 @@ export const BranchItem = ({
                 }}
               >
                 <text {...(headerFg ? { fg: headerFg } : undefined)}>Prompt</text>
-                <text fg={theme.agentText} style={{ wrapMode: 'word' }}>
+                <text
+                  fg={resolveFg(theme.agentText)}
+                  style={{ wrapMode: 'word' }}
+                  attributes={getAttributes()}
+                >
                   {prompt}
                 </text>
                 {content && (

cli/src/components/branch-item.tsx

@@ -32,7 +32,7 @@ import { copyTextToClipboard } from '../utils/clipboard'
 import { logger } from '../utils/logger'
 
 import type { User } from '../utils/auth'
-import type { ChatTheme } from '../utils/theme-system'
+import { resolveThemeColor, type ChatTheme } from '../utils/theme-system'
 
 interface LoginModalProps {
   onLoginSuccess: (user: User) => void
@@ -221,7 +221,9 @@ export const LoginModal = ({
     }
   }, [hasOpenedBrowser, loginUrl, copyToClipboard])
 
-  const logoColor = theme.chromeText
+  const logoColor =
+    resolveThemeColor(theme.chromeText, theme.statusAccent) ??
+    theme.statusAccent
 
   // Use custom hook for sheen animation
   const { applySheenToChar } = useSheenAnimation({
@@ -357,7 +359,7 @@ export const LoginModal = ({
           >
             <text style={{ wrapMode: 'none' }}>
               <b>
-                <span fg={theme.chromeText}>
+                <span fg={resolveThemeColor(theme.chromeText, logoColor)}>
                   {isNarrow ? 'Codebuff' : 'Codebuff CLI'}
                 </span>
               </b>