Thinking block UX: show up to 5 lines, collapse all after finished streaming

Author: jahooma

cli/src/components/blocks/agent-branch-wrapper.tsx

@@ -39,6 +39,7 @@ interface AgentBodyProps {
 
 /** Props stored in ref for stable handler access in AgentBody */
 interface AgentBodyPropsRef {
+  agentBlock: AgentContentBlock
   keyPrefix: string
   nestedBlocks: ContentBlock[]
   parentIsStreaming: boolean
@@ -87,6 +88,7 @@ const AgentBody = memo(
     // Store props in ref for stable handler access (avoids 12+ useMemo dependencies)
     const propsRef = useRef<AgentBodyPropsRef>(null!)
     propsRef.current = {
+      agentBlock,
       keyPrefix,
       nestedBlocks,
       parentIsStreaming,
@@ -112,6 +114,7 @@ const AgentBody = memo(
               onToggleCollapsed={p.onToggleCollapsed}
               availableWidth={p.availableWidth}
               isNested={true}
+              isMessageComplete={p.agentBlock.status === 'complete'}
             />
           )
         },

cli/src/components/blocks/blocks-renderer.tsx

@@ -100,6 +100,7 @@ export const BlocksRenderer = memo(
               onToggleCollapsed={p.onToggleCollapsed}
               availableWidth={p.availableWidth}
               isNested={false}
+              isMessageComplete={p.isComplete ?? false}
             />
           )
         },

cli/src/components/blocks/thinking-block.tsx

@@ -13,6 +13,8 @@ interface ThinkingBlockProps {
   onToggleCollapsed: (id: string) => void
   availableWidth: number
   isNested: boolean
+  /** Whether the parent message is complete (used to hide native reasoning blocks) */
+  isMessageComplete: boolean
 }
 
 export const ThinkingBlock = memo(
@@ -21,6 +23,7 @@ export const ThinkingBlock = memo(
     onToggleCollapsed,
     availableWidth,
     isNested,
+    isMessageComplete,
   }: ThinkingBlockProps) => {
     const firstBlock = blocks[0]
     const thinkingId = firstBlock?.thinkingId
@@ -39,6 +42,14 @@ export const ThinkingBlock = memo(
       }
     }, [onToggleCollapsed, thinkingId])
 
+    // thinkingOpen === true means still streaming
+    // thinkingOpen === false means explicitly closed with </think> tag
+    // thinkingOpen === undefined means native reasoning block - complete when message is complete
+    const isThinkingComplete =
+      firstBlock?.thinkingOpen === false ||
+      (firstBlock?.thinkingOpen === undefined && isMessageComplete)
+
+    // Hide if no content or no thinkingId (but NOT when thinking is complete)
     if (!combinedContent || !thinkingId) {
       return null
     }
@@ -48,6 +59,7 @@ export const ThinkingBlock = memo(
         <Thinking
           content={combinedContent}
           isCollapsed={isCollapsed}
+          isThinkingComplete={isThinkingComplete}
           onToggle={handleToggle}
           availableWidth={availWidth}
         />

cli/src/components/thinking.tsx

@@ -6,11 +6,13 @@ import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
 import { useTheme } from '../hooks/use-theme'
 import { getLastNVisualLines } from '../utils/text-layout'
 
-const PREVIEW_LINE_COUNT = 3
+const PREVIEW_LINE_COUNT = 5
 
 interface ThinkingProps {
   content: string
   isCollapsed: boolean
+  /** Whether the thinking has completed (streaming finished) */
+  isThinkingComplete: boolean
   onToggle: () => void
   availableWidth?: number
 }
@@ -19,6 +21,7 @@ export const Thinking = memo(
   ({
     content,
     isCollapsed,
+    isThinkingComplete,
     onToggle,
     availableWidth,
   }: ThinkingProps): ReactNode => {
@@ -36,6 +39,13 @@ export const Thinking = memo(
       PREVIEW_LINE_COUNT,
     )
 
+    // Toggle indicator: show caret when complete, bullet when streaming
+    const toggleIndicator = isThinkingComplete
+      ? isCollapsed
+        ? '▸ '
+        : '▾ '
+      : '• '
+
     return (
       <Button
         style={{
@@ -47,10 +57,13 @@ export const Thinking = memo(
         onClick={onToggle}
       >
         <text style={{ fg: theme.foreground }}>
-          <span>• </span>
+          <span>{toggleIndicator}</span>
           <span attributes={TextAttributes.BOLD}>Thinking</span>
         </text>
         {isCollapsed ? (
+          // When complete: show no preview (just "▸ Thinking")
+          // When streaming: show up to 5 lines preview
+          !isThinkingComplete &&
           lines.length > 0 && (
             <box style={{ paddingLeft: 2 }}>
               <text