refactor(cli): refactor message-with-agents and add chat types

Refactor message-with-agents component to use zustand store.
Add chat types and update error-boundary component.

Author: brandonkachen

cli/src/chat.tsx

@@ -57,6 +57,7 @@ import { getProjectRoot } from './project-files'
 import { useChatStore } from './state/chat-store'
 import { useChatHistoryStore } from './state/chat-history-store'
 import { useFeedbackStore } from './state/feedback-store'
+import { useMessageBlockStore } from './state/message-block-store'
 import { usePublishStore } from './state/publish-store'
 import {
   addClipboardPlaceholder,
@@ -1363,6 +1364,52 @@ export const Chat = ({
     [messages],
   )
 
+  // Sync message block context to zustand store for child components
+  const setMessageBlockContext = useMessageBlockStore(
+    (state) => state.setContext,
+  )
+  const setMessageBlockCallbacks = useMessageBlockStore(
+    (state) => state.setCallbacks,
+  )
+
+  // Update context when values change
+  useEffect(() => {
+    setMessageBlockContext({
+      theme,
+      markdownPalette,
+      messageTree,
+      isWaitingForResponse,
+      timerStartTime,
+      availableWidth: messageAvailableWidth,
+    })
+  }, [
+    theme,
+    markdownPalette,
+    messageTree,
+    isWaitingForResponse,
+    timerStartTime,
+    messageAvailableWidth,
+    setMessageBlockContext,
+  ])
+
+  // Update callbacks once (they're stable)
+  useEffect(() => {
+    setMessageBlockCallbacks({
+      onToggleCollapsed: handleCollapseToggle,
+      onBuildFast: handleBuildFast,
+      onBuildMax: handleBuildMax,
+      onFeedback: handleMessageFeedback,
+      onCloseFeedback: handleCloseFeedback,
+    })
+  }, [
+    handleCollapseToggle,
+    handleBuildFast,
+    handleBuildMax,
+    handleMessageFeedback,
+    handleCloseFeedback,
+    setMessageBlockCallbacks,
+  ])
+
   // Compute visible messages slice (from the end)
   const visibleTopLevelMessages = useMemo(() => {
     if (topLevelMessages.length <= visibleMessageCount) {
@@ -1530,20 +1577,7 @@ export const Chat = ({
               message={message}
               depth={0}
               isLastMessage={isLast}
-              theme={theme}
-              markdownPalette={markdownPalette}
-              streamingAgents={streamingAgents}
-              messageTree={messageTree}
-              messages={messages}
               availableWidth={messageAvailableWidth}
-              setFocusedAgentId={setFocusedAgentId}
-              isWaitingForResponse={isWaitingForResponse}
-              timerStartTime={timerStartTime}
-              onToggleCollapsed={handleCollapseToggle}
-              onBuildFast={handleBuildFast}
-              onBuildMax={handleBuildMax}
-              onFeedback={handleMessageFeedback}
-              onCloseFeedback={handleCloseFeedback}
             />
           )
         })}

cli/src/components/error-boundary.tsx

@@ -1,31 +1,42 @@
 import { memo, type ReactNode } from 'react'
 
-interface ErrorBoundaryProps {
+interface ErrorBoundaryPlaceholderProps {
   children: ReactNode
   fallback: ReactNode
   componentName?: string
 }
 
 /**
- * A wrapper component that provides error boundary-like behavior.
- * Since OpenTUI's JSX types don't support React class components,
- * this uses a memo wrapper. Errors that occur during render will
- * be caught by React's error boundary mechanism if one exists higher
- * in the tree, or will propagate normally.
+ * **WARNING: This component does NOT catch render errors.**
  * 
- * For true error boundary behavior in OpenTUI, wrap at the application
- * root level using React's native error boundary support.
+ * This is a placeholder/passthrough component that exists for structural purposes.
+ * OpenTUI's JSX types don't support React class components, which are required
+ * for true error boundary functionality.
+ * 
+ * For actual error catching in render functions, use `withErrorFallback()` instead.
+ * 
+ * @example
+ * // Use withErrorFallback for catching render errors:
+ * const safeContent = withErrorFallback(
+ *   () => riskyRenderFunction(),
+ *   <FallbackComponent />,
+ *   'MyComponent'
+ * )
  */
-export const ErrorBoundary = memo(
-  ({ children, fallback, componentName }: ErrorBoundaryProps) => {
-    // Note: This is a structural wrapper. True error catching requires
-    // a class component, but OpenTUI's JSX types don't support them.
-    // The fallback is available for parent components to use when they
-    // detect errors through other means.
+export const ErrorBoundaryPlaceholder = memo(
+  ({ children }: ErrorBoundaryPlaceholderProps) => {
+    // This component does NOT catch errors - it's a passthrough.
+    // Use withErrorFallback() for actual error catching.
     return <>{children}</>
   },
 )
 
+/**
+ * @deprecated Use `ErrorBoundaryPlaceholder` instead. This alias exists for backward
+ * compatibility but the name is misleading since it doesn't actually catch errors.
+ */
+export const ErrorBoundary = ErrorBoundaryPlaceholder
+
 /**
  * Helper to safely render content with error handling.
  * Use this when you need to catch render errors in a functional context.