feat(usage): expose request timing details

frontend/src/utils/__tests__/format.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { formatCompactNumber, formatTokens, formatUsageCount } from '../format'
+import { formatByteSize, formatCompactNumber, formatTokens, formatUsageCount } from '../format'
 
 describe('format utils', () => {
   it('formats compact numbers beyond millions', () => {
@@ -16,4 +16,11 @@ describe('format utils', () => {
     expect(formatTokens(1_500_000_000_000)).toBe('1.5T')
     expect(formatUsageCount(1_000_000_000)).toBe('1B')
   })
+
+  it('formats byte sizes with automatic units', () => {
+    expect(formatByteSize(512)).toBe('0.5 KB')
+    expect(formatByteSize(1024)).toBe('1 KB')
+    expect(formatByteSize(12.5 * 1024 * 1024)).toBe('12.5 MB')
+    expect(formatByteSize(2 * 1024 * 1024 * 1024)).toBe('2 GB')
+  })
 })

frontend/src/utils/format.ts

@@ -66,6 +66,25 @@ export function formatCompactNumber(
   return `${sign}${formatCompactScaledValue(absValue, unitIndex, options.fractionDigits)}`
 }
 
+export function formatByteSize(bytes: number | undefined | null): string {
+  if (bytes === undefined || bytes === null || !Number.isFinite(bytes)) {
+    return '-'
+  }
+
+  const absBytes = Math.max(0, Math.abs(bytes))
+  const units = [
+    { value: 1024 ** 3, suffix: 'GB' },
+    { value: 1024 ** 2, suffix: 'MB' },
+    { value: 1024, suffix: 'KB' },
+  ] as const
+  const unit = units.find(candidate => absBytes >= candidate.value) ?? units[2]
+  const scaled = absBytes / unit.value
+  const fractionDigits = scaled >= 100 ? 0 : scaled >= 10 ? 1 : 2
+  const formatted = trimTrailingDecimalZeros(scaled.toFixed(fractionDigits))
+
+  return `${bytes < 0 ? '-' : ''}${formatted} ${unit.suffix}`
+}
+
 // Token formatting - intelligent display based on value size
 export function formatTokens(num: number | undefined | null): string {
   return formatCompactNumber(num)