Clean up thinking block: collapse '...' onto the other lines, choose margin better so it doesn't jump

Author: jahooma

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

@@ -4,12 +4,17 @@ import { Thinking } from '../thinking'
 
 import type { ContentBlock } from '../../types/chat'
 
+// Nested thinking blocks need more offset to account for the subagent's border and padding
+const WIDTH_OFFSET = 8
+const NESTED_WIDTH_OFFSET = 12
+
 interface ThinkingBlockProps {
   blocks: Extract<ContentBlock, { type: 'text' }>[]
   keyPrefix: string
   startIndex: number
   onToggleCollapsed: (id: string) => void
   availableWidth: number
+  isNested: boolean
 }
 
 export const ThinkingBlock = memo(
@@ -19,6 +24,7 @@ export const ThinkingBlock = memo(
     startIndex,
     onToggleCollapsed,
     availableWidth,
+    isNested,
   }: ThinkingBlockProps) => {
     const thinkingId = `${keyPrefix}-thinking-${startIndex}`
     const combinedContent = blocks
@@ -28,7 +34,8 @@ export const ThinkingBlock = memo(
 
     const firstBlock = blocks[0]
     const isCollapsed = firstBlock?.isCollapsed ?? true
-    const availWidth = Math.max(10, availableWidth - 10)
+    const offset = isNested ? NESTED_WIDTH_OFFSET : WIDTH_OFFSET
+    const availWidth = Math.max(10, availableWidth - offset)
 
     const handleToggle = useCallback(() => {
       onToggleCollapsed(thinkingId)

cli/src/components/message-block.tsx

@@ -433,6 +433,7 @@ const AgentBody = memo(
             startIndex={start}
             onToggleCollapsed={onToggleCollapsed}
             availableWidth={availableWidth}
+            isNested={true}
           />,
         )
         continue
@@ -716,6 +717,11 @@ const AgentBranchWrapper = memo(
             ? theme.foreground
             : theme.muted
 
+      // Split "Strategy #N: prompt" into parts for separate styling
+      const strategyMatch = displayName.match(/^(Strategy #\d+:)(.*)$/)
+      const strategyLabel = strategyMatch ? strategyMatch[1] : displayName
+      const strategyPrompt = strategyMatch ? strategyMatch[2] : ''
+
       return (
         <box
           key={keyPrefix}
@@ -729,8 +735,11 @@ const AgentBranchWrapper = memo(
             <span fg={statusColor}>{statusIndicator}</span>
             <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
               {' '}
-              {displayName}
+              {strategyLabel}
             </span>
+            {strategyPrompt && (
+              <span fg={theme.foreground}>{strategyPrompt}</span>
+            )}
           </text>
         </box>
       )
@@ -1237,6 +1246,7 @@ const BlocksRenderer = memo(
             startIndex={start}
             onToggleCollapsed={onToggleCollapsed}
             availableWidth={availableWidth}
+            isNested={false}
           />,
         )
         continue

cli/src/components/thinking.tsx

@@ -84,27 +84,16 @@ export const Thinking = memo(
                 style={{
                   paddingLeft: 1,
                   flexGrow: 1,
-                  flexDirection: 'column',
-                  gap: 0,
                 }}
               >
-                <text
-                  style={{
-                    wrapMode: 'none',
-                    fg: theme.muted,
-                  }}
-                  attributes={TextAttributes.ITALIC}
-                >
-                  {hasMore ? '...' : ' '}
-                </text>
                 <text
                   style={{
                     wrapMode: 'word',
                     fg: theme.muted,
                   }}
                   attributes={TextAttributes.ITALIC}
                 >
-                  {previewLines.join(' ')}
+                  {(hasMore ? '...' : '') + previewLines.join(' ')}
                 </text>
               </box>
             </box>