feat(cli): add elapsed time formatting utility

- Create format-elapsed-time utility with tests
- Update use-send-message to track message timing
- Displays human-readable elapsed time for user messages

Author: brandonkachen

cli/src/hooks/use-send-message.ts

@@ -14,6 +14,7 @@ import { getCodebuffClient, formatToolOutput } from '../utils/codebuff-client'
 import { shouldHideAgent, shouldCollapseByDefault } from '../utils/constants'
 
 import { getErrorObject } from '../utils/error'
+import { formatElapsedTime } from '../utils/format-elapsed-time'
 import { formatTimestamp } from '../utils/helpers'
 import { loadAgentDefinitions } from '../utils/load-agent-definitions'
 
@@ -1758,7 +1759,7 @@ export const useSendMessage = ({
         const elapsedMs = timerResult?.elapsedMs ?? 0
         const elapsedSeconds = Math.floor(elapsedMs / 1000)
         const completionTime =
-          elapsedSeconds > 0 ? `${elapsedSeconds}s` : undefined
+          elapsedSeconds > 0 ? formatElapsedTime(elapsedSeconds) : undefined
 
         applyMessageUpdate((prev) =>
           prev.map((msg) => {

cli/src/utils/__tests__/format-elapsed-time.test.ts

@@ -22,7 +22,7 @@ describe('formatElapsedTime', () => {
 
   describe('minutes format (60s - 3599s)', () => {
     test('formats exactly 1 minute', () => {
-      expect(formatElapsedTime(60)).toBe('1m 0s')
+      expect(formatElapsedTime(60)).toBe('1m')
     })
 
     test('formats minutes with remaining seconds (floors down)', () => {
@@ -32,9 +32,9 @@ describe('formatElapsedTime', () => {
     })
 
     test('formats double digit minutes', () => {
-      expect(formatElapsedTime(600)).toBe('10m 0s')
-      expect(formatElapsedTime(1800)).toBe('30m 0s')
-      expect(formatElapsedTime(3540)).toBe('59m 0s')
+      expect(formatElapsedTime(600)).toBe('10m')
+      expect(formatElapsedTime(1800)).toBe('30m')
+      expect(formatElapsedTime(3540)).toBe('59m')
     })
 
     test('formats just under 1 hour', () => {
@@ -44,20 +44,20 @@ describe('formatElapsedTime', () => {
 
   describe('hours format (>= 3600s)', () => {
     test('formats exactly 1 hour', () => {
-      expect(formatElapsedTime(3600)).toBe('1h 0m')
+      expect(formatElapsedTime(3600)).toBe('1h')
     })
 
     test('formats hours with remaining time (floors down)', () => {
       expect(formatElapsedTime(3661)).toBe('1h 1m')
       expect(formatElapsedTime(5400)).toBe('1h 30m')
       expect(formatElapsedTime(7199)).toBe('1h 59m')
-      expect(formatElapsedTime(7200)).toBe('2h 0m')
+      expect(formatElapsedTime(7200)).toBe('2h')
     })
 
     test('formats multiple hours', () => {
-      expect(formatElapsedTime(10800)).toBe('3h 0m')
-      expect(formatElapsedTime(36000)).toBe('10h 0m')
-      expect(formatElapsedTime(86400)).toBe('24h 0m')
+      expect(formatElapsedTime(10800)).toBe('3h')
+      expect(formatElapsedTime(36000)).toBe('10h')
+      expect(formatElapsedTime(86400)).toBe('24h')
     })
   })
 
@@ -75,14 +75,14 @@ describe('formatElapsedTime', () => {
 
     test('handles boundary between seconds and minutes', () => {
       expect(formatElapsedTime(59)).toBe('59s')
-      expect(formatElapsedTime(60)).toBe('1m 0s')
+      expect(formatElapsedTime(60)).toBe('1m')
       expect(formatElapsedTime(61)).toBe('1m 1s')
     })
 
     test('handles boundary between minutes and hours', () => {
       expect(formatElapsedTime(3599)).toBe('59m 59s')
-      expect(formatElapsedTime(3600)).toBe('1h 0m')
-      expect(formatElapsedTime(3601)).toBe('1h 0m')
+      expect(formatElapsedTime(3600)).toBe('1h')
+      expect(formatElapsedTime(3601)).toBe('1h') // 1 second rounds down to 0 minutes, shows as 1h
     })
   })
 
@@ -91,13 +91,13 @@ describe('formatElapsedTime', () => {
       expect(formatElapsedTime(3)).toBe('3s') // Quick response
       expect(formatElapsedTime(15)).toBe('15s') // Average response
       expect(formatElapsedTime(45)).toBe('45s') // Longer response
-      expect(formatElapsedTime(120)).toBe('2m 0s') // Very long response
+      expect(formatElapsedTime(120)).toBe('2m') // Very long response
     })
 
     test('formats extended task durations', () => {
-      expect(formatElapsedTime(180)).toBe('3m 0s') // 3 minute task
-      expect(formatElapsedTime(900)).toBe('15m 0s') // 15 minute task
-      expect(formatElapsedTime(3600)).toBe('1h 0m') // 1 hour task
+      expect(formatElapsedTime(180)).toBe('3m') // 3 minute task
+      expect(formatElapsedTime(900)).toBe('15m') // 15 minute task
+      expect(formatElapsedTime(3600)).toBe('1h') // 1 hour task
     })
   })
 })

cli/src/utils/format-elapsed-time.ts

@@ -6,26 +6,28 @@
  *
  * @example
  * formatElapsedTime(30)    // "30s"
+ * formatElapsedTime(60)    // "1m"
  * formatElapsedTime(90)    // "1m 30s"
+ * formatElapsedTime(3600)  // "1h"
  * formatElapsedTime(3700)  // "1h 1m"
  *
  * Format rules:
  * - Under 60 seconds: "Xs" (e.g., "45s")
- * - 60-3599 seconds (1-59 minutes): "Xm Ys" (e.g., "12m 5s")
- * - 3600+ seconds (1+ hours): "Xh Ym" (e.g., "2h 15m")
+ * - 60-3599 seconds (1-59 minutes): "Xm" or "Xm Ys" (e.g., "1m", "12m 5s")
+ * - 3600+ seconds (1+ hours): "Xh" or "Xh Ym" (e.g., "1h", "2h 15m")
  */
 export const formatElapsedTime = (elapsedSeconds: number): string => {
   if (elapsedSeconds < 60) {
     return `${elapsedSeconds}s`
   }
 
-  if (elapsedSeconds < 3600) {
-    const minutes = Math.floor(elapsedSeconds / 60)
-    const seconds = elapsedSeconds % 60
-    return `${minutes}m ${seconds}s`
-  }
-
   const hours = Math.floor(elapsedSeconds / 3600)
   const minutes = Math.floor((elapsedSeconds % 3600) / 60)
-  return `${hours}h ${minutes}m`
+  const seconds = elapsedSeconds % 60
+
+  if (hours > 0) {
+    return `${hours}h` + (minutes > 0 ? ` ${minutes}m` : '')
+  }
+
+  return `${minutes}m` + (seconds > 0 ? ` ${seconds}s` : '')
 }