Stabilize inline thinking box during streaming

packages/cli/src/ui/components/HistoryItemDisplay.tsx

@@ -70,6 +70,9 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
         <ThinkingMessage
           thoughts={itemForDisplay.thoughts}
           terminalWidth={terminalWidth}
+          availableTerminalHeight={
+            isPending ? availableTerminalHeight : undefined
+          }
         />
       )}
       {itemForDisplay.type === 'user' && (

packages/cli/src/ui/components/MainContent.test.tsx

@@ -12,15 +12,19 @@ import { Box, Text } from 'ink';
 import type React from 'react';
 
 // Mock dependencies
-vi.mock('../contexts/SettingsContext.js', () => ({
-  useSettings: () => ({
-    merged: {
-      ui: {
-        showInlineThinking: false,
+vi.mock('../contexts/SettingsContext.js', async () => {
+  const actual = await vi.importActual('../contexts/SettingsContext.js');
+  return {
+    ...actual,
+    useSettings: () => ({
+      merged: {
+        ui: {
+          showInlineThinking: false,
+        },
       },
-    },
-  }),
-}));
+    }),
+  };
+});
 
 vi.mock('../contexts/AppContext.js', async () => {
   const actual = await vi.importActual('../contexts/AppContext.js');

packages/cli/src/ui/components/messages/ThinkingMessage.tsx

@@ -7,40 +7,56 @@
 import type React from 'react';
 import { Box, Text } from 'ink';
 import type { ThoughtSummary } from '@google/gemini-cli-core';
+import { MaxSizedBox, MINIMUM_MAX_HEIGHT } from '../shared/MaxSizedBox.js';
 
 interface ThinkingMessageProps {
   thoughts: ThoughtSummary[];
   terminalWidth: number;
+  availableTerminalHeight?: number;
 }
 
 export const ThinkingMessage: React.FC<ThinkingMessageProps> = ({
   thoughts,
   terminalWidth,
-}) => (
-  <Box
-    borderStyle="round"
-    borderColor="magenta"
-    width={terminalWidth}
-    paddingX={1}
-    marginBottom={1}
-    flexDirection="column"
-  >
-    <Box>
-      <Text color="magenta">◆ </Text>
-      <Text bold color="magenta">
-        Thinking
-      </Text>
-      <Text dimColor> ({thoughts.length})</Text>
-    </Box>
-    {thoughts.map((thought, index) => (
-      <Box key={index} marginTop={1} flexDirection="column">
-        {thought.subject && (
-          <Text bold color="magenta">
-            {thought.subject}
-          </Text>
-        )}
-        <Text>{thought.description || ' '}</Text>
+  availableTerminalHeight,
+}) => {
+  const contentMaxHeight =
+    availableTerminalHeight !== undefined
+      ? Math.max(availableTerminalHeight - 4, MINIMUM_MAX_HEIGHT)
+      : undefined;
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="magenta"
+      width={terminalWidth}
+      paddingX={1}
+      marginBottom={1}
+      flexDirection="column"
+    >
+      <Box>
+        <Text color="magenta">◆ </Text>
+        <Text bold color="magenta">
+          Thinking
+        </Text>
+        <Text dimColor> ({thoughts.length})</Text>
       </Box>
-    ))}
-  </Box>
-);
+      <MaxSizedBox
+        maxHeight={contentMaxHeight}
+        maxWidth={terminalWidth - 2}
+        overflowDirection="top"
+      >
+        {thoughts.map((thought, index) => (
+          <Box key={index} marginTop={1} flexDirection="column">
+            {thought.subject && (
+              <Text bold color="magenta">
+                {thought.subject}
+              </Text>
+            )}
+            <Text>{thought.description || ' '}</Text>
+          </Box>
+        ))}
+      </MaxSizedBox>
+    </Box>
+  );
+};