refactor: extract duplicated utility functions into shared format-utils

Consolidate formatDuration, statusToVariant, statusLabel, formatTimestamp,
toRouteNodeType, and durationClass from 5 page/component files into one
shared utils module.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/RouteDetail/RouteDetail.tsx

@@ -17,39 +17,14 @@ import { StatusDot } from '../../design-system/primitives/StatusDot/StatusDot'
 import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
 import { InfoCallout } from '../../design-system/primitives/InfoCallout/InfoCallout'
 
+// Utils
+import { formatDuration, statusToVariant, statusLabel, formatTimestamp, durationClass } from '../../utils/format-utils'
+
 // Mock data
 import { routes } from '../../mocks/routes'
 import { exchanges, type Exchange } from '../../mocks/exchanges'
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatDuration(ms: number): string {
-  if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`
-  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`
-  return `${ms}ms`
-}
-
-function formatTimestamp(date: Date): string {
-  return date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
-}
-
-function statusToVariant(status: Exchange['status']): 'success' | 'error' | 'running' | 'warning' {
-  switch (status) {
-    case 'completed': return 'success'
-    case 'failed': return 'error'
-    case 'running': return 'running'
-    case 'warning': return 'warning'
-  }
-}
-
-function statusLabel(status: Exchange['status']): string {
-  switch (status) {
-    case 'completed': return 'OK'
-    case 'failed': return 'ERR'
-    case 'running': return 'RUN'
-    case 'warning': return 'WARN'
-  }
-}
-
 function routeStatusVariant(status: 'healthy' | 'degraded' | 'down'): 'success' | 'warning' | 'error' {
   switch (status) {
     case 'healthy': return 'success'
@@ -58,14 +33,6 @@ function routeStatusVariant(status: 'healthy' | 'degraded' | 'down'): 'success'
   }
 }
 
-function durationClass(ms: number, status: Exchange['status']): string {
-  if (status === 'failed') return styles.durBreach
-  if (ms < 100) return styles.durFast
-  if (ms < 200) return styles.durNormal
-  if (ms < 300) return styles.durSlow
-  return styles.durBreach
-}
-
 // ─── Columns for exchanges table ────────────────────────────────────────────
 const EXCHANGE_COLUMNS: Column<Exchange>[] = [
   {
@@ -106,7 +73,7 @@ const EXCHANGE_COLUMNS: Column<Exchange>[] = [
     header: 'Duration',
     sortable: true,
     render: (_, row) => (
-      <MonoText size="sm" className={durationClass(row.durationMs, row.status)}>
+      <MonoText size="sm" className={durationClass(row.durationMs, row.status, styles)}>
         {formatDuration(row.durationMs)}
       </MonoText>
     ),