Fix CLI toggle rendering and update knowledge

Author: brandonkachen

cli/src/components/branch-item.tsx

@@ -26,6 +26,65 @@ export const BranchItem = ({
   theme,
   onToggle,
 }: BranchItemProps) => {
+  const isTextRenderable = (value: ReactNode): boolean => {
+    if (
+      value === null ||
+      value === undefined ||
+      typeof value === 'boolean'
+    ) {
+      return false
+    }
+
+    if (typeof value === 'string' || typeof value === 'number') {
+      return true
+    }
+
+    if (Array.isArray(value)) {
+      return value.every((child) => isTextRenderable(child))
+    }
+
+    if (React.isValidElement(value)) {
+      if (value.type === React.Fragment) {
+        return isTextRenderable(value.props.children)
+      }
+
+      if (typeof value.type === 'string') {
+        if (
+          value.type === 'span' ||
+          value.type === 'strong' ||
+          value.type === 'em'
+        ) {
+          return isTextRenderable(value.props.children)
+        }
+
+        return false
+      }
+    }
+
+    return false
+  }
+
+  const renderExpandedContent = (value: ReactNode): ReactNode => {
+    if (
+      value === null ||
+      value === undefined ||
+      value === false ||
+      value === true
+    ) {
+      return null
+    }
+
+    if (isTextRenderable(value)) {
+      return (
+        <text wrap fg={theme.agentText}>
+          {value}
+        </text>
+      )
+    }
+
+    return value
+  }
+
   return (
     <box style={{ flexDirection: 'row', flexShrink: 0 }}>
       <text wrap={false}>
@@ -51,21 +110,17 @@ export const BranchItem = ({
           }}
           onMouseDown={onToggle}
         >
-          <text wrap={false}>
+          <text wrap>
             <span fg={theme.agentToggleText}>
               {isCollapsed ? '▸ ' : '▾ '}
             </span>
+            <span
+              fg={theme.agentToggleText}
+              attributes={TextAttributes.BOLD}
+            >
+              {name}
+            </span>
           </text>
-          <box style={{ flexShrink: 1 }}>
-            <text wrap>
-              <span
-                fg={theme.agentToggleText}
-                attributes={TextAttributes.BOLD}
-              >
-                {name}
-              </span>
-            </text>
-          </box>
         </box>
         <box style={{ flexShrink: 1, marginBottom: 0 }}>
           {isStreaming && isCollapsed && streamingPreview && (
@@ -86,11 +141,7 @@ export const BranchItem = ({
               {finishedPreview}
             </text>
           )}
-          {!isCollapsed && content && (
-            <text wrap fg={theme.agentText}>
-              {content}
-            </text>
-          )}
+          {!isCollapsed && content && renderExpandedContent(content)}
         </box>
       </box>
     </box>

cli/src/hooks/use-message-renderer.tsx

@@ -175,26 +175,22 @@ export const useMessageRenderer = (props: UseMessageRendererProps): ReactNode[]
                     ? theme.agentResponseCount
                     : theme.agentPrefix,
                   paddingLeft: 1,
-                  paddingRight: 1,
-                }}
-                onMouseDown={handleTitleClick}
-              >
-                <text wrap={false}>
-                  <span fg={theme.agentToggleText}>
-                    {isCollapsed ? '▸' : '▾'}{' '}
-                  </span>
-                </text>
-                <box style={{ flexShrink: 1 }}>
-                  <text wrap>
-                    <span
-                      fg={theme.agentToggleText}
-                      attributes={TextAttributes.BOLD}
-                    >
-                      {agentInfo.agentName}
-                    </span>
-                  </text>
-                </box>
-              </box>
+          paddingRight: 1,
+        }}
+        onMouseDown={handleTitleClick}
+      >
+        <text wrap>
+          <span fg={theme.agentToggleText}>
+            {isCollapsed ? '▸ ' : '▾ '}
+          </span>
+          <span
+            fg={theme.agentToggleText}
+            attributes={TextAttributes.BOLD}
+          >
+            {agentInfo.agentName}
+          </span>
+        </text>
+      </box>
               <box
                 style={{ flexShrink: 1, marginBottom: isCollapsed ? 1 : 0 }}
                 onMouseDown={handleContentClick}

knowledge.md

@@ -55,6 +55,13 @@ Codebuff is a tool for editing codebases via natural language instruction to Buf
 - ESC key to toggle menu or stop AI response
 - CTRL+C to exit the application
 
+### CLI Toggle Rendering Notes
+
+- The agent/tool toggles in the TUI render inside `<text>` components from OpenTUI. Any expanded content must resolve to plain strings or StyledText-compatible fragments (`<span>`, `<strong>`, `<em>`, etc.) so the reconciler can convert them into `TextNodeRenderable` instances.
+- Issue: When markdown-rendered content returned arbitrary React elements (e.g., nested `<box>` containers) under `<text>`, toggling a branch threw `Error: TextNodeRenderable only accepts strings, TextNodeRenderable instances, or StyledText instances`.
+- Fix (Oct 2025): `cli/src/components/branch-item.tsx` now inspects expanded content; if it is text-renderable, it stays inside `<text>`, otherwise the raw element tree is rendered directly. This prevents invalid children from reaching `TextNodeRenderable` while preserving formatted markdown.
+- Related adjustment: `cli/src/hooks/use-message-renderer.tsx` ensures the toggle header renders within a single `<text>` block so glyphs and names remain StyledText-safe.
+
 ### Shell Shims (Direct Commands)
 
 Codebuff supports shell shims for direct command invocation without the `codebuff` prefix.