feat: Show model thoughts while loading (#992)

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

@@ -159,4 +159,56 @@ describe('<LoadingIndicator />', () => {
     );
     expect(lastFrame()).toBe('');
   });
+
+  it('should display fallback phrase if thought is empty', () => {
+    const props = {
+      thought: null,
+      currentLoadingPhrase: 'Loading...',
+      elapsedTime: 5,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    const output = lastFrame();
+    expect(output).toContain('Loading...');
+  });
+
+  it('should display the subject of a thought', () => {
+    const props = {
+      thought: {
+        subject: 'Thinking about something...',
+        description: 'and other stuff.',
+      },
+      elapsedTime: 5,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    const output = lastFrame();
+    expect(output).toBeDefined();
+    if (output) {
+      expect(output).toContain('Thinking about something...');
+      expect(output).not.toContain('and other stuff.');
+    }
+  });
+
+  it('should prioritize thought.subject over currentLoadingPhrase', () => {
+    const props = {
+      thought: {
+        subject: 'This should be displayed',
+        description: 'A description',
+      },
+      currentLoadingPhrase: 'This should not be displayed',
+      elapsedTime: 5,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    const output = lastFrame();
+    expect(output).toContain('This should be displayed');
+    expect(output).not.toContain('This should not be displayed');
+  });
 });

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { ThoughtSummary } from '@gemini-cli/core';
 import React from 'react';
 import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
@@ -15,12 +16,14 @@ interface LoadingIndicatorProps {
   currentLoadingPhrase?: string;
   elapsedTime: number;
   rightContent?: React.ReactNode;
+  thought?: ThoughtSummary | null;
 }
 
 export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
   currentLoadingPhrase,
   elapsedTime,
   rightContent,
+  thought,
 }) => {
   const streamingState = useStreamingContext();
 
@@ -28,25 +31,30 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     return null;
   }
 
+  const primaryText = thought?.subject || currentLoadingPhrase;
+
   return (
-    <Box marginTop={1} paddingLeft={0}>
-      <Box marginRight={1}>
-        <GeminiRespondingSpinner
-          nonRespondingDisplay={
-            streamingState === StreamingState.WaitingForConfirmation ? '⠏' : ''
-          }
-        />
+    <Box marginTop={1} paddingLeft={0} flexDirection="column">
+      {/* Main loading line */}
+      <Box>
+        <Box marginRight={1}>
+          <GeminiRespondingSpinner
+            nonRespondingDisplay={
+              streamingState === StreamingState.WaitingForConfirmation
+                ? '⠏'
+                : ''
+            }
+          />
+        </Box>
+        {primaryText && <Text color={Colors.AccentPurple}>{primaryText}</Text>}
+        <Text color={Colors.Gray}>
+          {streamingState === StreamingState.WaitingForConfirmation
+            ? ''
+            : ` (esc to cancel, ${elapsedTime}s)`}
+        </Text>
+        <Box flexGrow={1}>{/* Spacer */}</Box>
+        {rightContent && <Box>{rightContent}</Box>}
       </Box>
-      {currentLoadingPhrase && (
-        <Text color={Colors.AccentPurple}>{currentLoadingPhrase}</Text>
-      )}
-      <Text color={Colors.Gray}>
-        {streamingState === StreamingState.WaitingForConfirmation
-          ? ''
-          : ` (esc to cancel, ${elapsedTime}s)`}
-      </Text>
-      <Box flexGrow={1}>{/* Spacer */}</Box>
-      {rightContent && <Box>{rightContent}</Box>}
     </Box>
   );
 };