refactor(cli): add context providers to eliminate prop drilling

- Create MessageActionsProvider for message interaction callbacks
- Create ChatThemeProvider for theme and styling props
- Update MessageWithAgents, MessageBlock, and ChatScrollArea to use contexts
- Remove 12+ props from message component interfaces
- Update tests to wrap components with context providers

This eliminates severe prop drilling through 3+ component levels.

Author: brandonkachen

cli/src/chat.tsx

@@ -8,6 +8,8 @@ import { MessageWithAgents } from './components/message-with-agents'
 import { FeedbackContainer } from './components/feedback-container'
 import { ChatScrollArea } from './components/chat-scroll-area'
 import { ChatInputArea } from './components/chat-input-area'
+import { MessageActionsProvider } from './contexts/message-actions-context'
+import { ChatThemeProvider } from './contexts/chat-theme-context'
 import { useFeedbackStore } from './state/feedback-store'
 import { useAuthStore } from './state/auth-store'
 import { toggleCollapsedById, autoCollapseBlocks } from './utils/block-tree'
@@ -724,36 +726,44 @@ export const Chat = ({
   })
 
   return (
-    <box
-      style={{
-        flexDirection: 'column',
-        gap: 0,
-        paddingLeft: 1,
-        paddingRight: 1,
-        flexGrow: 1,
+    <MessageActionsProvider
+      value={{
+        onToggleCollapsed: handleCollapseToggle,
+        onBuildFast: handleBuildFast,
+        onBuildMax: handleBuildMax,
+        onFeedback: handleMessageFeedback,
+        onCloseFeedback: handleCloseFeedback,
       }}
     >
-      <ChatScrollArea
-        scrollRef={scrollRef}
-        appliedScrollboxProps={appliedScrollboxProps}
-        headerContent={headerContent}
-        virtualizationNotice={virtualizationNotice}
-        topLevelMessages={topLevelMessages}
-        markdownPalette={markdownPalette}
-        streamingAgents={streamingAgents}
-        messageTree={messageTree}
-        messages={messages}
-        separatorWidth={separatorWidth}
-        theme={theme}
-        setFocusedAgentId={setFocusedAgentId}
-        isWaitingForResponse={isWaitingForResponse}
-        timerStartTime={timerStartTime}
-        handleCollapseToggle={handleCollapseToggle}
-        handleBuildFast={handleBuildFast}
-        handleBuildMax={handleBuildMax}
-        handleMessageFeedback={handleMessageFeedback}
-        handleCloseFeedback={handleCloseFeedback}
-      />
+      <ChatThemeProvider
+        value={{
+          theme,
+          markdownPalette,
+          availableWidth: separatorWidth,
+          timerStartTime,
+        }}
+      >
+        <box
+          style={{
+            flexDirection: 'column',
+            gap: 0,
+            paddingLeft: 1,
+            paddingRight: 1,
+            flexGrow: 1,
+          }}
+        >
+          <ChatScrollArea
+            scrollRef={scrollRef}
+            appliedScrollboxProps={appliedScrollboxProps}
+            headerContent={headerContent}
+            virtualizationNotice={virtualizationNotice}
+            topLevelMessages={topLevelMessages}
+            streamingAgents={streamingAgents}
+            messageTree={messageTree}
+            messages={messages}
+            setFocusedAgentId={setFocusedAgentId}
+            isWaitingForResponse={isWaitingForResponse}
+          />
 
       <box
         style={{
@@ -814,7 +824,9 @@ export const Chat = ({
         )}
       </box>
 
-      {validationBanner}
-    </box>
+          {validationBanner}
+        </box>
+      </ChatThemeProvider>
+    </MessageActionsProvider>
   )
 }

cli/src/components/__tests__/message-block.streaming.test.tsx

@@ -5,6 +5,8 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { initializeThemeStore } from '../../hooks/use-theme'
 import { chatThemes, createMarkdownPalette } from '../../utils/theme-system'
 import { MessageBlock } from '../message-block'
+import { MessageActionsProvider } from '../../contexts/message-actions-context'
+import { ChatThemeProvider } from '../../contexts/chat-theme-context'
 
 import type { MarkdownPalette } from '../../utils/markdown-renderer'
 
@@ -34,41 +36,47 @@ const baseProps = {
     codeBlockWidth: 72,
     palette,
   },
-  availableWidth: 80,
-  markdownPalette: basePalette,
-  collapsedAgents: new Set<string>(),
-  autoCollapsedAgents: new Set<string>(),
   streamingAgents: new Set<string>(),
+}
+
+const messageActions = {
   onToggleCollapsed: () => {},
   onBuildFast: () => {},
   onBuildMax: () => {},
-  setCollapsedAgents: () => {},
-  addAutoCollapsedAgent: () => {},
+  onFeedback: () => {},
+  onCloseFeedback: () => {},
 }
 
+const createThemeContext = (timerStartTime: number | null) => ({
+  theme,
+  markdownPalette: basePalette,
+  availableWidth: 80,
+  timerStartTime,
+})
+
 const createTimerStartTime = (elapsedSeconds: number): number | null =>
   elapsedSeconds > 0 ? Date.now() - elapsedSeconds * 1000 : null
 
 describe('MessageBlock streaming indicator', () => {
   test('shows elapsed seconds while streaming', () => {
     const markup = renderToStaticMarkup(
-      <MessageBlock
-        {...baseProps}
-        isLoading={true}
-        timerStartTime={createTimerStartTime(4)}
-      />,
+      <MessageActionsProvider value={messageActions}>
+        <ChatThemeProvider value={createThemeContext(createTimerStartTime(4))}>
+          <MessageBlock {...baseProps} isLoading={true} />
+        </ChatThemeProvider>
+      </MessageActionsProvider>,
     )
 
     expect(markup).toContain('4s')
   })
 
   test('hides elapsed seconds when timer has not advanced', () => {
     const markup = renderToStaticMarkup(
-      <MessageBlock
-        {...baseProps}
-        isLoading={true}
-        timerStartTime={createTimerStartTime(0)}
-      />,
+      <MessageActionsProvider value={messageActions}>
+        <ChatThemeProvider value={createThemeContext(createTimerStartTime(0))}>
+          <MessageBlock {...baseProps} isLoading={true} />
+        </ChatThemeProvider>
+      </MessageActionsProvider>,
     )
 
     expect(markup).not.toContain('0s')

cli/src/components/chat-scroll-area.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 
 import { MessageWithAgents } from './message-with-agents'
-import type { ChatMessage, ContentBlock } from '../types/chat'
-import type { FileTreeNode } from '@codebuff/common/util/file'
+import type { ChatMessage } from '../types/chat'
 import type { ScrollBoxRenderable } from '@opentui/core'
 import type { Dispatch, SetStateAction } from 'react'
 
@@ -12,20 +11,11 @@ interface ChatScrollAreaProps {
   headerContent: React.ReactNode
   virtualizationNotice: React.ReactNode
   topLevelMessages: ChatMessage[]
-  markdownPalette: any
   streamingAgents: Set<string>
   messageTree: Map<string, ChatMessage[]>
   messages: ChatMessage[]
-  separatorWidth: number
-  theme: any
   setFocusedAgentId: Dispatch<SetStateAction<string | null>>
   isWaitingForResponse: boolean
-  timerStartTime: number | null
-  handleCollapseToggle: (id: string) => void
-  handleBuildFast: () => void
-  handleBuildMax: () => void
-  handleMessageFeedback: (id: string) => void
-  handleCloseFeedback: () => void
 }
 
 export const ChatScrollArea = ({
@@ -34,20 +24,11 @@ export const ChatScrollArea = ({
   headerContent,
   virtualizationNotice,
   topLevelMessages,
-  markdownPalette,
   streamingAgents,
   messageTree,
   messages,
-  separatorWidth,
-  theme,
   setFocusedAgentId,
   isWaitingForResponse,
-  timerStartTime,
-  handleCollapseToggle,
-  handleBuildFast,
-  handleBuildMax,
-  handleMessageFeedback,
-  handleCloseFeedback,
 }: ChatScrollAreaProps) => {
   return (
     <scrollbox
@@ -94,20 +75,11 @@ export const ChatScrollArea = ({
             message={message}
             depth={0}
             isLastMessage={isLast}
-            theme={theme}
-            markdownPalette={markdownPalette}
             streamingAgents={streamingAgents}
             messageTree={messageTree}
             messages={messages}
-            availableWidth={separatorWidth}
             setFocusedAgentId={setFocusedAgentId}
             isWaitingForResponse={isWaitingForResponse}
-            timerStartTime={timerStartTime}
-            onToggleCollapsed={handleCollapseToggle}
-            onBuildFast={handleBuildFast}
-            onBuildMax={handleBuildMax}
-            onFeedback={handleMessageFeedback}
-            onCloseFeedback={handleCloseFeedback}
           />
         )
       })}

cli/src/components/message-block.tsx

@@ -7,6 +7,8 @@ import { FeedbackIconButton } from './feedback-icon-button'
 import { useTheme } from '../hooks/use-theme'
 import { useWhyDidYouUpdateById } from '../hooks/use-why-did-you-update'
 import { type MarkdownPalette } from '../utils/markdown-renderer'
+import { useMessageActions } from '../contexts/message-actions-context'
+import { useChatTheme } from '../contexts/chat-theme-context'
 import {
   useFeedbackStore,
   selectIsFeedbackOpenForMessage,
@@ -32,18 +34,10 @@ interface MessageBlockProps {
   isComplete?: boolean
   completionTime?: string
   credits?: number
-  timerStartTime: number | null
   textColor?: ThemeColor
   timestampColor: string
   markdownOptions: { codeBlockWidth: number; palette: MarkdownPalette }
-  availableWidth: number
-  markdownPalette: MarkdownPalette
   streamingAgents: Set<string>
-  onToggleCollapsed: (id: string) => void
-  onBuildFast: () => void
-  onBuildMax: () => void
-  onFeedback?: (messageId: string) => void
-  onCloseFeedback?: () => void
 }
 
 const trimTrailingNewlines = (value: string): string =>
@@ -64,19 +58,13 @@ export const MessageBlock = memo((props: MessageBlockProps): ReactNode => {
     isComplete,
     completionTime,
     credits,
-    timerStartTime,
     textColor,
     timestampColor,
     markdownOptions,
-    availableWidth,
-    markdownPalette,
     streamingAgents,
-    onToggleCollapsed,
-    onBuildFast,
-    onBuildMax,
-    onFeedback,
-    onCloseFeedback,
   } = props
+  const { availableWidth, markdownPalette, timerStartTime } = useChatTheme()
+  const { onToggleCollapsed, onBuildFast, onBuildMax, onFeedback, onCloseFeedback } = useMessageActions()
   useWhyDidYouUpdateById('MessageBlock', messageId, props, {
     logLevel: 'debug',
     enabled: false,