Thinking block UX/refactor: show 5 line preview until next message

Author: jahooma

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

@@ -32,7 +32,7 @@ export const ThinkingBlock = memo(
       .join('')
       .trim()
 
-    const isCollapsed = firstBlock?.isCollapsed ?? true
+    const thinkingCollapseState = firstBlock?.thinkingCollapseState ?? 'preview'
     const offset = isNested ? NESTED_WIDTH_OFFSET : WIDTH_OFFSET
     const availWidth = Math.max(10, availableWidth - offset)
 
@@ -56,7 +56,7 @@ export const ThinkingBlock = memo(
       <box>
         <Thinking
           content={combinedContent}
-          isCollapsed={isCollapsed}
+          thinkingCollapseState={thinkingCollapseState}
           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'
 
+import type { ThinkingCollapseState } from '../types/chat'
+
 const PREVIEW_LINE_COUNT = 5
 
 interface ThinkingProps {
   content: string
-  isCollapsed: boolean
+  thinkingCollapseState: ThinkingCollapseState
   /** Whether the thinking has completed (streaming finished) */
   isThinkingComplete: boolean
   onToggle: () => void
@@ -20,7 +22,7 @@ interface ThinkingProps {
 export const Thinking = memo(
   ({
     content,
-    isCollapsed,
+    thinkingCollapseState,
     isThinkingComplete,
     onToggle,
     availableWidth,
@@ -39,12 +41,14 @@ export const Thinking = memo(
       PREVIEW_LINE_COUNT,
     )
 
-    // Toggle indicator: show caret when complete, bullet when streaming
-    const toggleIndicator = isThinkingComplete
-      ? isCollapsed
-        ? '▸ '
-        : '▾ '
-      : '• '
+    const showFull = thinkingCollapseState === 'expanded'
+    const showPreview = thinkingCollapseState === 'preview' && lines.length > 0
+
+    const toggleIndicator =
+      !isThinkingComplete ? '• '
+      : showFull ? '▾ '
+      : showPreview ? '• '
+      : '▸ '
 
     return (
       <Button
@@ -60,24 +64,20 @@ export const Thinking = memo(
           <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
-                style={{
-                  wrapMode: 'none',
-                  fg: theme.muted,
-                }}
-                attributes={TextAttributes.ITALIC}
-              >
-                {hasMore ? '...' + lines.join('\n') : lines.join('\n')}
-              </text>
-            </box>
-          )
-        ) : (
+        {showPreview && (
+          <box style={{ paddingLeft: 2 }}>
+            <text
+              style={{
+                wrapMode: 'none',
+                fg: theme.muted,
+              }}
+              attributes={TextAttributes.ITALIC}
+            >
+              {hasMore ? '...' + lines.join('\n') : lines.join('\n')}
+            </text>
+          </box>
+        )}
+        {showFull && (
           <box style={{ paddingLeft: 2 }}>
             <text
               style={{

cli/src/hooks/use-chat-messages.ts

@@ -116,11 +116,11 @@ export function useChatMessages({
               // Handle thinking blocks - just match by thinkingId
               if (block.type === 'text' && block.thinkingId === id) {
                 foundTarget = true
-                const wasCollapsed = block.isCollapsed ?? false
+                const isExpanded = block.thinkingCollapseState === 'expanded'
                 return {
                   ...block,
-                  isCollapsed: !wasCollapsed,
-                  userOpened: wasCollapsed, // Mark as user-opened if expanding
+                  thinkingCollapseState: isExpanded ? 'preview' as const : 'expanded' as const,
+                  userOpened: !isExpanded, // Mark as user-opened if expanding
                 }
               }
 

cli/src/types/chat.ts

@@ -10,6 +10,8 @@ import type { ReactNode } from 'react'
 
 export type ChatVariant = 'ai' | 'user' | 'agent' | 'error'
 
+export type ThinkingCollapseState = 'expanded' | 'preview' | 'hidden'
+
 export type TextContentBlock = {
   type: 'text'
   content: string
@@ -23,6 +25,7 @@ export type TextContentBlock = {
   userOpened?: boolean
   /** True if this is a reasoning block from a <think> tag that hasn't been closed yet */
   thinkingOpen?: boolean
+  thinkingCollapseState?: ThinkingCollapseState
 }
 /** Renders dynamic React content. NOT serializable - don't use for persistent data. */
 export type HtmlContentBlock = {

cli/src/utils/__tests__/collapse-helpers.test.ts

@@ -9,6 +9,7 @@ import type {
   AgentContentBlock,
   TextContentBlock,
   AgentListContentBlock,
+  ThinkingCollapseState,
 } from '../../types/chat'
 
 // Type helper for accessing isCollapsed/userOpened on any block type
@@ -64,13 +65,13 @@ const createAgentBlock = (
 // Helper to create thinking/text blocks with thinkingId
 const createThinkingBlock = (
   thinkingId: string,
-  isCollapsed?: boolean,
+  thinkingCollapseState?: ThinkingCollapseState,
   userOpened?: boolean,
 ): ContentBlock => ({
   type: 'text',
   content: 'thinking content',
   thinkingId,
-  isCollapsed,
+  ...(thinkingCollapseState !== undefined && { thinkingCollapseState }),
   userOpened,
 })
 
@@ -195,14 +196,14 @@ describe('hasAnyExpandedBlocks', () => {
   describe('thinking blocks', () => {
     test('returns true when thinking block is expanded', () => {
       const messages = [
-        createMessage('1', 'ai', [createThinkingBlock('think-1', false)]),
+        createMessage('1', 'ai', [createThinkingBlock('think-1', 'expanded')]),
       ]
       expect(hasAnyExpandedBlocks(messages)).toBe(true)
     })
 
     test('returns false when thinking block is collapsed', () => {
       const messages = [
-        createMessage('1', 'ai', [createThinkingBlock('think-1', true)]),
+        createMessage('1', 'ai', [createThinkingBlock('think-1', 'hidden')]),
       ]
       expect(hasAnyExpandedBlocks(messages)).toBe(false)
     })
@@ -463,22 +464,22 @@ describe('setAllBlocksCollapsedState', () => {
   describe('thinking blocks', () => {
     test('collapses thinking blocks', () => {
       const messages = [
-        createMessage('1', 'ai', [createThinkingBlock('think-1', false)]),
+        createMessage('1', 'ai', [createThinkingBlock('think-1', 'expanded')]),
       ]
       const result = setAllBlocksCollapsedState(messages, true)
 
-      const block = result[0]?.blocks?.[0] as CollapsibleBlock
-      expect(block?.isCollapsed).toBe(true)
+      const block = result[0]?.blocks?.[0] as TextContentBlock
+      expect(block?.thinkingCollapseState).toBe('hidden')
     })
 
     test('expands thinking blocks and sets userOpened', () => {
       const messages = [
-        createMessage('1', 'ai', [createThinkingBlock('think-1', true)]),
+        createMessage('1', 'ai', [createThinkingBlock('think-1', 'hidden')]),
       ]
       const result = setAllBlocksCollapsedState(messages, false)
 
-      const block = result[0]?.blocks?.[0] as CollapsibleBlock
-      expect(block?.isCollapsed).toBe(false)
+      const block = result[0]?.blocks?.[0] as TextContentBlock
+      expect(block?.thinkingCollapseState).toBe('expanded')
       expect(block?.userOpened).toBe(true)
     })
 
@@ -522,7 +523,7 @@ describe('setAllBlocksCollapsedState', () => {
         createMessage('1', 'ai', [
           createToolBlock('tool-1', false),
           createAgentBlock('agent-1', false),
-          createThinkingBlock('think-1', false),
+          createThinkingBlock('think-1', 'expanded'),
           createAgentListBlock('list-1', false),
           createTextBlock('regular text'),
         ]),
@@ -532,7 +533,7 @@ describe('setAllBlocksCollapsedState', () => {
       const blocks = result[0]?.blocks as CollapsibleBlock[]
       expect(blocks[0]?.isCollapsed).toBe(true) // tool
       expect(blocks[1]?.isCollapsed).toBe(true) // agent
-      expect(blocks[2]?.isCollapsed).toBe(true) // thinking
+      expect((blocks[2] as TextContentBlock)?.thinkingCollapseState).toBe('hidden') // thinking
       expect(blocks[3]?.isCollapsed).toBe(true) // agent-list
       expect((blocks[4] as TextContentBlock)?.isCollapsed).toBeUndefined() // text (not collapsible)
     })
@@ -542,7 +543,7 @@ describe('setAllBlocksCollapsedState', () => {
         createMessage('1', 'ai', [
           createToolBlock('tool-1', true),
           createAgentBlock('agent-1', true),
-          createThinkingBlock('think-1', true),
+          createThinkingBlock('think-1', 'hidden'),
           createAgentListBlock('list-1', true),
         ]),
       ]
@@ -553,8 +554,8 @@ describe('setAllBlocksCollapsedState', () => {
       expect(blocks[0]?.userOpened).toBe(true)
       expect(blocks[1]?.isCollapsed).toBe(false)
       expect(blocks[1]?.userOpened).toBe(true)
-      expect(blocks[2]?.isCollapsed).toBe(false)
-      expect(blocks[2]?.userOpened).toBe(true)
+      expect((blocks[2] as TextContentBlock)?.thinkingCollapseState).toBe('expanded')
+      expect((blocks[2] as TextContentBlock)?.userOpened).toBe(true)
       expect(blocks[3]?.isCollapsed).toBe(false)
       expect(blocks[3]?.userOpened).toBe(true)
     })
@@ -746,27 +747,27 @@ describe('toggle-all edge cases', () => {
 
     test('setAllBlocksCollapsedState: collapses both parent and nested blocks', () => {
       const nestedBlocks = [
-        createToolBlock('tool-1', false), // expanded
-        createThinkingBlock('think-1', false), // expanded
+        createToolBlock('tool-1', false),
+        createThinkingBlock('think-1', 'expanded'),
       ]
       const messages = [
-        createMessage('1', 'ai', [createAgentBlock('agent-1', false, false, nestedBlocks)]), // expanded parent
+        createMessage('1', 'ai', [createAgentBlock('agent-1', false, false, nestedBlocks)]),
       ]
       const result = setAllBlocksCollapsedState(messages, true)
 
       const agentBlock = result[0]?.blocks?.[0] as AgentContentBlock
       expect(agentBlock?.isCollapsed).toBe(true)
       expect((agentBlock?.blocks?.[0] as CollapsibleBlock)?.isCollapsed).toBe(true)
-      expect((agentBlock?.blocks?.[1] as CollapsibleBlock)?.isCollapsed).toBe(true)
+      expect((agentBlock?.blocks?.[1] as TextContentBlock)?.thinkingCollapseState).toBe('hidden')
     })
 
     test('setAllBlocksCollapsedState: expands both parent and nested blocks', () => {
       const nestedBlocks = [
-        createToolBlock('tool-1', true), // collapsed
-        createThinkingBlock('think-1', true), // collapsed
+        createToolBlock('tool-1', true),
+        createThinkingBlock('think-1', 'hidden'),
       ]
       const messages = [
-        createMessage('1', 'ai', [createAgentBlock('agent-1', true, false, nestedBlocks)]), // collapsed parent
+        createMessage('1', 'ai', [createAgentBlock('agent-1', true, false, nestedBlocks)]),
       ]
       const result = setAllBlocksCollapsedState(messages, false)
 
@@ -775,8 +776,8 @@ describe('toggle-all edge cases', () => {
       expect(agentBlock?.userOpened).toBe(true)
       expect((agentBlock?.blocks?.[0] as CollapsibleBlock)?.isCollapsed).toBe(false)
       expect((agentBlock?.blocks?.[0] as CollapsibleBlock)?.userOpened).toBe(true)
-      expect((agentBlock?.blocks?.[1] as CollapsibleBlock)?.isCollapsed).toBe(false)
-      expect((agentBlock?.blocks?.[1] as CollapsibleBlock)?.userOpened).toBe(true)
+      expect((agentBlock?.blocks?.[1] as TextContentBlock)?.thinkingCollapseState).toBe('expanded')
+      expect((agentBlock?.blocks?.[1] as TextContentBlock)?.userOpened).toBe(true)
     })
   })
 
@@ -1087,7 +1088,7 @@ describe('toggle-all edge cases', () => {
     test('nested agent blocks with all types of collapsible blocks', () => {
       const deepBlocks = [
         createToolBlock('deep-tool', false),
-        createThinkingBlock('deep-think', false),
+        createThinkingBlock('deep-think', 'expanded'),
         createAgentListBlock('deep-list', false),
       ]
       const messages = [
@@ -1101,7 +1102,7 @@ describe('toggle-all edge cases', () => {
       const outerAgent = result[0]?.blocks?.[0] as AgentContentBlock
       expect(outerAgent?.isCollapsed).toBe(true)
       expect((outerAgent?.blocks?.[0] as CollapsibleBlock)?.isCollapsed).toBe(true)
-      expect((outerAgent?.blocks?.[1] as CollapsibleBlock)?.isCollapsed).toBe(true)
+      expect((outerAgent?.blocks?.[1] as TextContentBlock)?.thinkingCollapseState).toBe('hidden')
       expect((outerAgent?.blocks?.[2] as CollapsibleBlock)?.isCollapsed).toBe(true)
     })
   })

cli/src/utils/__tests__/message-block-helpers.test.ts

@@ -125,7 +125,7 @@ describe('autoCollapseBlocks', () => {
       { type: 'text', content: 'thinking', thinkingId: 'think-1' },
     ]
     const result = autoCollapseBlocks(blocks)
-    expect(result[0]).toHaveProperty('isCollapsed', true)
+    expect(result[0]).toHaveProperty('thinkingCollapseState', 'hidden')
   })
 
   test('preserves user-opened text blocks', () => {
@@ -394,7 +394,7 @@ describe('appendInterruptionNotice', () => {
         status: 'running',
         thinkingId: 'think-1',
         userOpened: true,
-        isCollapsed: true,
+        thinkingCollapseState: 'hidden',
       },
     ]
     const result = appendInterruptionNotice(blocks)
@@ -403,7 +403,7 @@ describe('appendInterruptionNotice', () => {
       status: 'running',
       thinkingId: 'think-1',
       userOpened: true,
-      isCollapsed: true,
+      thinkingCollapseState: 'hidden',
       content: 'Hello\n\n[response interrupted]',
     })
   })

cli/src/utils/__tests__/send-message-helpers.test.ts

@@ -252,7 +252,7 @@ describe('autoCollapseBlocks', () => {
     ]
 
     const result = autoCollapseBlocks(blocks)
-    expect((result[0] as TextContentBlock).isCollapsed).toBe(true)
+    expect((result[0] as TextContentBlock).thinkingCollapseState).toBe('hidden')
   })
 
   test('does not collapse user-opened blocks', () => {
@@ -441,7 +441,7 @@ describe('appendTextToRootStream', () => {
 
     expect(result).toHaveLength(2)
     expect((result[1] as TextContentBlock).textType).toBe('reasoning')
-    expect((result[1] as TextContentBlock).isCollapsed).toBe(true)
+    expect((result[1] as TextContentBlock).thinkingCollapseState).toBe('preview')
   })
 
   test('returns original blocks for empty text', () => {
@@ -912,7 +912,7 @@ describe('appendTextToAgentBlock with native reasoning', () => {
     expect(agentBlock.blocks).toHaveLength(1)
     expect((agentBlock.blocks![0] as TextContentBlock).textType).toBe('reasoning')
     expect((agentBlock.blocks![0] as TextContentBlock).content).toBe('Thinking...')
-    expect((agentBlock.blocks![0] as TextContentBlock).isCollapsed).toBe(true)
+    expect((agentBlock.blocks![0] as TextContentBlock).thinkingCollapseState).toBe('preview')
     // Native reasoning has thinkingOpen undefined
     expect((agentBlock.blocks![0] as TextContentBlock).thinkingOpen).toBeUndefined()
   })

cli/src/utils/block-operations.ts

@@ -113,7 +113,7 @@ const createReasoningBlock = (
   type: 'text',
   content,
   textType: 'reasoning',
-  isCollapsed: true,
+  thinkingCollapseState: 'preview',
   thinkingOpen,
   thinkingId,
 })
@@ -315,7 +315,7 @@ const appendNativeReasoningToBlocks = (
     type: 'text',
     content: text,
     textType: 'reasoning',
-    isCollapsed: true,
+    thinkingCollapseState: 'preview',
     thinkingId: generateThinkingId(),
   }
 
@@ -419,7 +419,7 @@ export const appendTextToRootStream = (
       type: 'text',
       content: delta.text,
       textType: 'reasoning',
-      isCollapsed: true,
+      thinkingCollapseState: 'preview',
       thinkingId: generateThinkingId(),
     }