♻️ refactor(web): consolidate design-system primitives and responsive data views

web/default/src/features/dashboard/components/models/performance-overview.tsx

@@ -21,13 +21,14 @@ import { Gauge, HeartPulse, Timer } from 'lucide-react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { StatusBadge, type StatusVariant } from '@/components/status-badge'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getPerfMetricsSummary } from '@/features/performance-metrics/api'
 import {
   formatLatency,
   formatThroughput,
   formatUptimePct,
-  getSuccessRateDotClass,
+  getSuccessRateLevel,
   getSuccessRateTextClass,
 } from '@/features/performance-metrics/lib/format'
 import type { PerfModelSummary } from '@/features/performance-metrics/types'
@@ -35,6 +36,11 @@ import { cn } from '@/lib/utils'
 
 const PERFORMANCE_WINDOW_HOURS = 24
 const TOP_MODEL_LIMIT = 6
+const METRIC_SKELETON_KEYS = [
+  'success-rate-skeleton',
+  'latency-skeleton',
+  'throughput-skeleton',
+]
 
 type WeightedMetric = 'avg_latency_ms' | 'avg_tps' | 'success_rate'
 
@@ -60,7 +66,7 @@ function simpleAverage(
     count++
   }
 
-  return count > 0 ? total / count : NaN
+  return count > 0 ? total / count : Number.NaN
 }
 
 function buildPerformanceSummary(rows: PerfModelSummary[]): PerformanceSummary {
@@ -128,8 +134,8 @@ export function PerformanceOverview() {
         {/* 3 KPI inline metrics */}
         {loading ? (
           <div className='flex flex-wrap items-center gap-x-5 gap-y-2'>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className='flex items-center gap-1.5'>
+            {METRIC_SKELETON_KEYS.map((key) => (
+              <div key={key} className='flex items-center gap-1.5'>
                 <Skeleton className='h-3 w-14' />
                 <Skeleton className='h-4 w-16' />
               </div>
@@ -201,27 +207,22 @@ function InlineMetric(props: {
 
 function ModelBadge(props: { model: PerfModelSummary }) {
   const model = props.model
+  const level = getSuccessRateLevel(model.success_rate)
+  let variant: StatusVariant = 'neutral'
+  if (level === 'excellent' || level === 'good') {
+    variant = 'success'
+  } else if (level === 'warning') {
+    variant = 'warning'
+  } else if (level === 'critical') {
+    variant = 'destructive'
+  }
 
   return (
-    <span className='bg-muted/50 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1'>
-      <span className='max-w-[10rem] truncate font-mono text-xs'>
-        {model.model_name}
-      </span>
-      <span
-        className={cn(
-          'size-1.5 rounded-full',
-          getSuccessRateDotClass(model.success_rate)
-        )}
-        aria-hidden='true'
-      />
-      <span
-        className={cn(
-          'text-xs font-semibold tabular-nums',
-          getSuccessRateTextClass(model.success_rate)
-        )}
-      >
+    <StatusBadge variant={variant}>
+      <span className='mr-1 max-w-[10rem] truncate'>{model.model_name}</span>
+      <span className='tabular-nums'>
         {formatUptimePct(model.success_rate)}
       </span>
-    </span>
+    </StatusBadge>
   )
 }