From 23e3c7d6ec714aeb80f78f7c551fda0929e6a9e8 Mon Sep 17 00:00:00 2001
From: Ayesha Shafique <79274585+Aisha630@users.noreply.github.com>
Date: Tue, 8 Jul 2025 11:14:42 +0500
Subject: [PATCH] style: Format execution time as minutes, seconds (#2707)

---
 .../src/ui/components/LoadingIndicator.test.tsx  | 16 ++++++++++++++--
 .../cli/src/ui/components/LoadingIndicator.tsx   |  3 ++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/ui/components/LoadingIndicator.test.tsx b/packages/cli/src/ui/components/LoadingIndicator.test.tsx
index ba161062..9e647208 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.test.tsx
+++ b/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', () => {
diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx
index 88a66b31..6e1bc758 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.tsx
+++ b/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>}