style: Format execution time as minutes, seconds (#2707)

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

@@ -97,13 +97,25 @@ describe('<LoadingIndicator />', () => {
   it('should display the elapsedTime correctly when Responding', () => {
     const props = {
       currentLoadingPhrase: 'Working...',
-      elapsedTime: 8,
+      elapsedTime: 60,
     };
     const { lastFrame } = renderWithContext(
       <LoadingIndicator {...props} />,
       StreamingState.Responding,
     );
-    expect(lastFrame()).toContain('(esc to cancel, 8s)');
+    expect(lastFrame()).toContain('(esc to cancel, 1m)');
+  });
+
+  it('should display the elapsedTime correctly in human-readable format', () => {
+    const props = {
+      currentLoadingPhrase: 'Working...',
+      elapsedTime: 125,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    expect(lastFrame()).toContain('(esc to cancel, 2m 5s)');
   });
 
   it('should render rightContent when provided', () => {

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

@@ -11,6 +11,7 @@ import { Colors } from '../colors.js';
 import { useStreamingContext } from '../contexts/StreamingContext.js';
 import { StreamingState } from '../types.js';
 import { GeminiRespondingSpinner } from './GeminiRespondingSpinner.js';
+import { formatDuration } from '../utils/formatters.js';
 
 interface LoadingIndicatorProps {
   currentLoadingPhrase?: string;
@@ -50,7 +51,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
         <Text color={Colors.Gray}>
           {streamingState === StreamingState.WaitingForConfirmation
             ? ''
-            : ` (esc to cancel, ${elapsedTime}s)`}
+            : ` (esc to cancel, ${elapsedTime < 60 ? `${elapsedTime}s` : formatDuration(elapsedTime * 1000)})`}
         </Text>
         <Box flexGrow={1}>{/* Spacer */}</Box>
         {rightContent && <Box>{rightContent}</Box>}