refactor: clean up thinking component implementation

- Add PREVIEW_LINE_COUNT constant
- Consolidate duplicate reasoning block handling with renderThinkingBlock helper
- Rename stripPlanTags to scrubPlanTags for consistency
- Simplify getToolFinishedPreview ternary logic
- Add auto-collapse for subagent thinking blocks
- Improve code organization and maintainability

Author: jahooma

cli/src/components/message-block.tsx

@@ -6,6 +6,7 @@ import { AgentBranchItem } from './agent-branch-item'
 import { ElapsedTimer } from './elapsed-timer'
 import { renderToolComponent } from './tools/registry'
 import { ToolCallItem } from './tools/tool-call-item'
+import { Thinking } from './thinking'
 import { useTheme } from '../hooks/use-theme'
 import { getToolDisplayInfo } from '../utils/codebuff-client'
 import {
@@ -24,6 +25,12 @@ const trimTrailingNewlines = (value: string): string =>
 const sanitizePreview = (value: string): string =>
   value.replace(/[#*_`~\[\]()]/g, '').trim()
 
+// Delete any complete <cb_plan>...</cb_plan> segment; hide any partial open <cb_plan>... (until closing tag arrives)
+const scrubPlanTags = (value: string): string =>
+  value
+    .replace(/<cb_plan>[\s\S]*?<\/cb_plan>/g, '')
+    .replace(/<cb_plan>[\s\S]*$/g, '')
+
 interface MessageBlockProps {
   messageId: string
   blocks?: ContentBlock[]
@@ -100,9 +107,8 @@ export const MessageBlock = memo(
           .filter((line) => line.trim())
         const lastThreeLines = outputLines.slice(-3)
         const hasMoreLines = outputLines.length > 3
-        return hasMoreLines
-          ? '...\n' + lastThreeLines.join('\n')
-          : lastThreeLines.join('\n')
+        const preview = lastThreeLines.join('\n')
+        return hasMoreLines ? `...\n${preview}` : preview
       }
 
       return sanitizePreview(lastLine)
@@ -120,6 +126,45 @@ export const MessageBlock = memo(
       }
     }
 
+    const isReasoningTextBlock = (b: any): boolean =>
+      b?.type === 'text' &&
+      (b.textType === 'reasoning' ||
+        b.textType === 'reasoning_chunk' ||
+        (typeof b.color === 'string' &&
+          (b.color.toLowerCase() === 'grey' || b.color.toLowerCase() === 'gray')))
+
+    const renderThinkingBlock = (
+      blocks: Extract<ContentBlock, { type: 'text' }>[],
+      keyPrefix: string,
+      startIndex: number,
+      indentLevel: number = 0,
+    ): React.ReactNode => {
+      const thinkingId = `${keyPrefix}-thinking-${startIndex}`
+      const combinedContent = blocks
+        .map((b) => b.content)
+        .join('')
+        .trim()
+
+      if (!combinedContent) {
+        return null
+      }
+
+      const isCollapsed = collapsedAgents.has(thinkingId)
+      const marginLeft = Math.max(0, indentLevel * 2)
+      const availWidth = Math.max(10, availableWidth - marginLeft - 4)
+
+      return (
+        <box key={thinkingId} style={{ marginLeft }}>
+          <Thinking
+            content={scrubPlanTags(combinedContent)}
+            isCollapsed={isCollapsed}
+            onToggle={() => onToggleCollapsed(thinkingId)}
+            availableWidth={availWidth}
+          />
+        </box>
+      )
+    }
+
     const renderToolBranch = (
       toolBlock: Extract<ContentBlock, { type: 'tool' }>,
       indentLevel: number,
@@ -363,6 +408,29 @@ export const MessageBlock = memo(
 
       for (let nestedIdx = 0; nestedIdx < nestedBlocks.length; ) {
         const nestedBlock = nestedBlocks[nestedIdx]
+        // Handle reasoning text blocks in agents
+        if (isReasoningTextBlock(nestedBlock)) {
+          const start = nestedIdx
+          const reasoningBlocks: Extract<ContentBlock, { type: 'text' }>[] = []
+          while (
+            nestedIdx < nestedBlocks.length &&
+            isReasoningTextBlock(nestedBlocks[nestedIdx] as any)
+          ) {
+            reasoningBlocks.push(nestedBlocks[nestedIdx] as any)
+            nestedIdx++
+          }
+
+          const thinkingNode = renderThinkingBlock(
+            reasoningBlocks,
+            keyPrefix,
+            start,
+            indentLevel,
+          )
+          if (thinkingNode) {
+            nodes.push(thinkingNode)
+          }
+          continue
+        }
         switch (nestedBlock.type) {
           case 'text': {
             const nestedStatus =
@@ -374,10 +442,11 @@ export const MessageBlock = memo(
             const rawNestedContent = isNestedStreamingText
               ? trimTrailingNewlines(nestedBlock.content)
               : nestedBlock.content.trim()
+            const filteredNestedContent = scrubPlanTags(rawNestedContent)
             const renderKey = `${keyPrefix}-text-${nestedIdx}`
             const markdownOptionsForLevel = getAgentMarkdownOptions(indentLevel)
             const renderedContent = renderContentWithMarkdown(
-              rawNestedContent,
+              filteredNestedContent,
               isNestedStreamingText,
               markdownOptionsForLevel,
             )
@@ -517,8 +586,9 @@ export const MessageBlock = memo(
       const normalizedContent = isStreamingMessage
         ? trimTrailingNewlines(content)
         : content.trim()
+      const sanitizedContent = scrubPlanTags(normalizedContent)
       const displayContent = renderContentWithMarkdown(
-        normalizedContent,
+        sanitizedContent,
         isStreamingMessage,
         markdownOptions,
       )
@@ -536,13 +606,18 @@ export const MessageBlock = memo(
     const renderSingleBlock = (block: ContentBlock, idx: number) => {
       switch (block.type) {
         case 'text': {
+          // Skip raw rendering for reasoning; grouped above into <Thinking>
+          if (isReasoningTextBlock(block as any)) {
+            return null
+          }
           const isStreamingText = isLoading || !isComplete
           const rawContent = isStreamingText
             ? trimTrailingNewlines(block.content)
             : block.content.trim()
+          const filteredContent = scrubPlanTags(rawContent)
           const renderKey = `${messageId}-text-${idx}`
           const renderedContent = renderContentWithMarkdown(
-            rawContent,
+            filteredContent,
             isStreamingText,
             markdownOptions,
           )
@@ -622,6 +697,28 @@ export const MessageBlock = memo(
       const nodes: React.ReactNode[] = []
       for (let i = 0; i < sourceBlocks.length; ) {
         const block = sourceBlocks[i]
+        // Handle reasoning text blocks
+        if (isReasoningTextBlock(block as any)) {
+          const start = i
+          const reasoningBlocks: Extract<ContentBlock, { type: 'text' }>[] = []
+          while (
+            i < sourceBlocks.length &&
+            isReasoningTextBlock(sourceBlocks[i] as any)
+          ) {
+            reasoningBlocks.push(sourceBlocks[i] as any)
+            i++
+          }
+
+          const thinkingNode = renderThinkingBlock(
+            reasoningBlocks,
+            messageId,
+            start,
+          )
+          if (thinkingNode) {
+            nodes.push(thinkingNode)
+          }
+          continue
+        }
         if (block.type === 'tool') {
           const start = i
           const group: Extract<ContentBlock, { type: 'tool' }>[] = []

cli/src/components/thinking.tsx

@@ -5,6 +5,8 @@ import { useTheme } from '../hooks/use-theme'
 import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
 import { getLastNVisualLines } from '../utils/text-layout'
 
+const PREVIEW_LINE_COUNT = 3
+
 interface ThinkingProps {
   content: string
   isCollapsed: boolean
@@ -13,64 +15,129 @@ interface ThinkingProps {
 }
 
 export const Thinking = memo(
-  ({ content, isCollapsed, onToggle, availableWidth }: ThinkingProps): ReactNode => {
+  ({
+    content,
+    isCollapsed,
+    onToggle,
+    availableWidth,
+  }: ThinkingProps): ReactNode => {
     const theme = useTheme()
     const { contentMaxWidth } = useTerminalDimensions()
 
-    const width = Math.max(10, Math.min((availableWidth ?? contentMaxWidth), 120))
-    const { lines: lastLines, hasMore } = getLastNVisualLines(content, width, 3)
-    const collapsedText = (hasMore ? '...\n' : '') + lastLines.join('\n')
+    const width = Math.max(10, Math.min(availableWidth ?? contentMaxWidth, 120))
+    // Normalize content to single line for consistent preview
+    const normalizedContent = content.replace(/\n+/g, ' ').trim()
+    const { lines, hasMore } = getLastNVisualLines(
+      normalizedContent,
+      width,
+      PREVIEW_LINE_COUNT,
+    )
+    // Pad to exactly PREVIEW_LINE_COUNT lines for consistent height while streaming
+    const previewLines = [...lines]
+    while (previewLines.length < PREVIEW_LINE_COUNT) {
+      previewLines.push('')
+    }
 
     return (
       <box
         style={{
           flexDirection: 'column',
           gap: 0,
-          marginTop: 1,
-          marginBottom: 1,
+          marginTop: 0,
+          marginBottom: 0,
         }}
+        onMouseDown={onToggle}
       >
         <box
           style={{
             flexDirection: 'row',
             alignSelf: 'flex-start',
-            backgroundColor: theme.muted,
-            paddingLeft: 1,
-            paddingRight: 1,
           }}
-          onMouseDown={onToggle}
         >
-          <text style={{ wrapMode: 'none' }}>
-            <span fg={theme.foreground}>{isCollapsed ? '▸ ' : '▾ '}</span>
-            <span fg={theme.foreground} attributes={TextAttributes.ITALIC}>
-              Thinking
-            </span>
+          <text
+            style={{ wrapMode: 'none', attributes: TextAttributes.BOLD }}
+            fg={theme.foreground}
+          >
+            • Thinking
           </text>
         </box>
-        {isCollapsed && collapsedText && (
-          <box style={{ flexShrink: 1, marginTop: 0 }}>
-            <text
+        {isCollapsed ? (
+          previewLines.length > 0 && (
+            <box
               style={{
-                wrapMode: 'word',
-                fg: theme.muted,
+                flexDirection: 'row',
+                gap: 0,
+                alignItems: 'stretch',
+                marginTop: 0,
               }}
-              attributes={TextAttributes.ITALIC}
             >
-              {collapsedText}
-            </text>
-          </box>
-        )}
-        {!isCollapsed && (
-          <box style={{ flexShrink: 1, marginTop: 0 }}>
-            <text
+              <box
+                style={{
+                  width: 1,
+                  backgroundColor: theme.muted,
+                  marginTop: 0,
+                  marginBottom: 0,
+                }}
+              />
+              <box
+                style={{
+                  paddingLeft: 1,
+                  flexGrow: 1,
+                  flexDirection: 'column',
+                  gap: 0,
+                }}
+              >
+                {hasMore && (
+                  <text
+                    style={{
+                      wrapMode: 'none',
+                      fg: theme.muted,
+                    }}
+                    attributes={TextAttributes.ITALIC}
+                  >
+                    ...
+                  </text>
+                )}
+                <text
+                  style={{
+                    wrapMode: 'word',
+                    fg: theme.muted,
+                  }}
+                  attributes={TextAttributes.ITALIC}
+                >
+                  {previewLines.join(' ')}
+                </text>
+              </box>
+            </box>
+          )
+        ) : (
+          <box
+            style={{
+              flexDirection: 'row',
+              gap: 0,
+              alignItems: 'stretch',
+              marginTop: 0,
+            }}
+          >
+            <box
               style={{
-                wrapMode: 'word',
-                fg: theme.muted,
+                width: 1,
+                backgroundColor: theme.muted,
+                marginTop: 0,
+                marginBottom: 0,
               }}
-              attributes={TextAttributes.ITALIC}
-            >
-              {content}
-            </text>
+            />
+            <box style={{ paddingLeft: 1, flexGrow: 1 }}>
+              <text
+                style={{
+                  wrapMode: 'word',
+                  fg: theme.muted,
+                }}
+                attributes={TextAttributes.ITALIC}
+              >
+                {content}
+              </text>
+            </box>
           </box>
         )}
       </box>