refactor: use KpiStrip, StatusText, and Card title in Routes page

Replace the custom KpiHeader function with KpiStrip composite, swap
chart wrapper divs with Card title prop, and remove ~190 lines of
now-redundant CSS.

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

src/pages/Routes/Routes.module.css

@@ -35,176 +35,6 @@
   font-family: var(--font-mono);
 }
 
-/* KPI strip */
-.kpiStrip {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-/* KPI card */
-.kpiCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: 16px 18px 12px;
-  box-shadow: var(--shadow-card);
-  position: relative;
-  overflow: hidden;
-  transition: box-shadow 0.15s;
-}
-
-.kpiCard:hover {
-  box-shadow: var(--shadow-md);
-}
-
-.kpiCard::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-}
-
-.kpiCardAmber::before  { background: linear-gradient(90deg, var(--amber), transparent); }
-.kpiCardGreen::before  { background: linear-gradient(90deg, var(--success), transparent); }
-.kpiCardError::before  { background: linear-gradient(90deg, var(--error), transparent); }
-.kpiCardTeal::before   { background: linear-gradient(90deg, var(--running), transparent); }
-.kpiCardWarn::before   { background: linear-gradient(90deg, var(--warning), transparent); }
-
-.kpiLabel {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-}
-
-.kpiValueRow {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  margin-bottom: 4px;
-}
-
-.kpiValue {
-  font-family: var(--font-mono);
-  font-size: 26px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.kpiValueAmber  { color: var(--amber); }
-.kpiValueGreen  { color: var(--success); }
-.kpiValueError  { color: var(--error); }
-.kpiValueTeal   { color: var(--running); }
-.kpiValueWarn   { color: var(--warning); }
-
-.kpiUnit {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.kpiTrend {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  margin-left: auto;
-}
-
-.trendUpGood   { color: var(--success); }
-.trendUpBad    { color: var(--error); }
-.trendDownGood { color: var(--success); }
-.trendDownBad  { color: var(--error); }
-.trendFlat     { color: var(--text-muted); }
-
-.kpiDetail {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-top: 2px;
-}
-
-.kpiDetailStrong {
-  color: var(--text-secondary);
-  font-weight: 600;
-}
-
-.kpiSparkline {
-  margin-top: 8px;
-  height: 32px;
-}
-
-/* Latency percentiles card */
-.latencyValues {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 4px;
-}
-
-.latencyItem {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.latencyLabel {
-  font-size: 9px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-}
-
-.latencyVal {
-  font-family: var(--font-mono);
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.latValGreen { color: var(--success); }
-.latValAmber { color: var(--amber); }
-.latValRed   { color: var(--error); }
-
-.latencyTrend {
-  font-family: var(--font-mono);
-  font-size: 9px;
-}
-
-/* Active routes donut */
-.donutWrap {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 4px;
-}
-
-.donutLabel {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.donutLegend {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 10px;
-  color: var(--text-muted);
-}
-
-.donutLegendActive {
-  color: var(--running);
-  font-weight: 600;
-}
-
 /* Route performance table */
 .tableSection {
   background: var(--bg-surface);
@@ -273,24 +103,6 @@
   gap: 16px;
 }
 
-.chartCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  padding: 16px;
-  overflow: hidden;
-}
-
-.chartTitle {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 12px;
-}
-
 .chart {
   width: 100%;
 }

src/pages/Routes/Routes.tsx

@@ -15,11 +15,14 @@ import { DataTable } from '../../design-system/composites/DataTable/DataTable'
 import type { Column } from '../../design-system/composites/DataTable/types'
 import { RouteFlow } from '../../design-system/composites/RouteFlow/RouteFlow'
 import type { RouteNode } from '../../design-system/composites/RouteFlow/RouteFlow'
+import { KpiStrip } from '../../design-system/composites'
+import type { KpiItem } from '../../design-system/composites'
 
 // Primitives
 import { Sparkline } from '../../design-system/primitives/Sparkline/Sparkline'
 import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
 import { Badge } from '../../design-system/primitives/Badge/Badge'
+import { Card } from '../../design-system/primitives'
 
 // Mock data
 import {
@@ -34,8 +37,8 @@ import { SIDEBAR_APPS, buildRouteToAppMap } from '../../mocks/sidebar'
 
 const ROUTE_TO_APP = buildRouteToAppMap()
 
-// ─── KPI Header Strip (matches mock-v3-metrics-dashboard) ────────────────────
+// ─── Build KPI items from scoped route metrics ──────────────────────────────
-function KpiHeader({ scopedMetrics }: { scopedMetrics: RouteMetricRow[] }) {
+function buildKpiItems(scopedMetrics: RouteMetricRow[]): KpiItem[] {
   const totalExchanges = scopedMetrics.reduce((sum, r) => sum + r.exchangeCount, 0)
   const totalErrors = scopedMetrics.reduce((sum, r) => sum + r.errorCount, 0)
   const errorRate = totalExchanges > 0 ? ((totalErrors / totalExchanges) * 100) : 0
@@ -45,113 +48,57 @@ function KpiHeader({ scopedMetrics }: { scopedMetrics: RouteMetricRow[] }) {
   const p99Latency = scopedMetrics.length > 0
     ? Math.max(...scopedMetrics.map((r) => r.p99DurationMs))
     : 0
-  const avgSuccessRate = scopedMetrics.length > 0
-    ? Number((scopedMetrics.reduce((sum, r) => sum + r.successRate, 0) / scopedMetrics.length).toFixed(1))
-    : 0
   const throughputPerSec = totalExchanges > 0 ? (totalExchanges / 360).toFixed(1) : '0'
   const activeRoutes = scopedMetrics.length
   const totalRoutes = routeMetrics.length
 
-  return (
+  const p50 = Math.round(avgLatency * 0.5)
-    <div className={styles.kpiStrip}>
+  const p95 = Math.round(avgLatency * 1.4)
-      {/* Card 1: Total Throughput */}
+  const slaStatus = p99Latency > 300 ? 'BREACH' : 'OK'
-      <div className={`${styles.kpiCard} ${styles.kpiCardAmber}`}>
-        <div className={styles.kpiLabel}>Total Throughput</div>
-        <div className={styles.kpiValueRow}>
-          <span className={`${styles.kpiValue} ${styles.kpiValueAmber}`}>{totalExchanges.toLocaleString()}</span>
-          <span className={styles.kpiUnit}>exchanges</span>
-          <span className={`${styles.kpiTrend} ${styles.trendUpGood}`}>&#9650; +8%</span>
-        </div>
-        <div className={styles.kpiDetail}>
-          <span className={styles.kpiDetailStrong}>{throughputPerSec}</span> msg/s · Capacity 39%
-        </div>
-        <div className={styles.kpiSparkline}>
-          <Sparkline data={[44, 46, 45, 47, 48, 46, 47, 48, 46, 47, 48, 47, 46, 47]} color="var(--amber)" width={200} height={32} />
-        </div>
-      </div>
 
-      {/* Card 2: System Error Rate */}
+  return [
-      <div className={`${styles.kpiCard} ${errorRate < 1 ? styles.kpiCardGreen : styles.kpiCardError}`}>
+    {
-        <div className={styles.kpiLabel}>System Error Rate</div>
+      label: 'Total Throughput',
-        <div className={styles.kpiValueRow}>
+      value: totalExchanges.toLocaleString(),
-          <span className={`${styles.kpiValue} ${errorRate < 1 ? styles.kpiValueGreen : styles.kpiValueError}`}>{errorRate.toFixed(2)}%</span>
+      trend: { label: '\u25B2 +8%', variant: 'success' as const },
-          <span className={`${styles.kpiTrend} ${errorRate < 1 ? styles.trendDownGood : styles.trendUpBad}`}>
+      subtitle: `${throughputPerSec} msg/s \u00B7 Capacity 39%`,
-            {errorRate < 1 ? '\u25BC -0.1%' : '\u25B2 +0.4%'}
+      sparkline: [44, 46, 45, 47, 48, 46, 47, 48, 46, 47, 48, 47, 46, 47],
-          </span>
+      borderColor: 'var(--amber)',
-        </div>
+    },
-        <div className={styles.kpiDetail}>
+    {
-          <span className={styles.kpiDetailStrong}>{totalErrors}</span> errors / <span className={styles.kpiDetailStrong}>{totalExchanges.toLocaleString()}</span> total (6h)
+      label: 'System Error Rate',
-        </div>
+      value: `${errorRate.toFixed(2)}%`,
-        <div className={styles.kpiSparkline}>
+      trend: {
-          <Sparkline data={[1.2, 1.8, 1.5, 2.1, 2.4, 2.2, 2.5, 2.6, 2.7, 2.8, 2.7, 2.9, 2.8, errorRate]} color={errorRate < 1 ? 'var(--success)' : 'var(--error)'} width={200} height={32} />
+        label: errorRate < 1 ? '\u25BC -0.1%' : '\u25B2 +0.4%',
-        </div>
+        variant: errorRate < 1 ? 'success' as const : 'error' as const,
-      </div>
+      },
-
+      subtitle: `${totalErrors} errors / ${totalExchanges.toLocaleString()} total (6h)`,
-      {/* Card 3: Latency Percentiles */}
+      sparkline: [1.2, 1.8, 1.5, 2.1, 2.4, 2.2, 2.5, 2.6, 2.7, 2.8, 2.7, 2.9, 2.8, errorRate],
-      <div className={`${styles.kpiCard} ${p99Latency > 300 ? styles.kpiCardWarn : styles.kpiCardGreen}`}>
+      borderColor: errorRate < 1 ? 'var(--success)' : 'var(--error)',
-        <div className={styles.kpiLabel}>Latency Percentiles</div>
+    },
-        <div className={styles.latencyValues}>
+    {
-          <div className={styles.latencyItem}>
+      label: 'Latency Percentiles',
-            <span className={styles.latencyLabel}>P50</span>
+      value: `${p99Latency}ms`,
-            <span className={`${styles.latencyVal} ${styles.latValGreen}`}>{Math.round(avgLatency * 0.5)}ms</span>
+      trend: { label: '\u25B2 +28', variant: p99Latency > 300 ? 'error' as const : 'warning' as const },
-            <span className={`${styles.latencyTrend} ${styles.trendDownGood}`}>&#9660;3</span>
+      subtitle: `P50 ${p50}ms \u00B7 P95 ${p95}ms \u00B7 SLA <300ms P99: ${slaStatus}`,
-          </div>
+      borderColor: p99Latency > 300 ? 'var(--warning)' : 'var(--success)',
-          <div className={styles.latencyItem}>
+    },
-            <span className={styles.latencyLabel}>P95</span>
+    {
-            <span className={`${styles.latencyVal} ${avgLatency > 150 ? styles.latValAmber : styles.latValGreen}`}>{Math.round(avgLatency * 1.4)}ms</span>
+      label: 'Active Routes',
-            <span className={`${styles.latencyTrend} ${styles.trendUpBad}`}>&#9650;12</span>
+      value: `${activeRoutes} / ${totalRoutes}`,
-          </div>
+      trend: { label: '\u2194 stable', variant: 'muted' as const },
-          <div className={styles.latencyItem}>
+      subtitle: `${activeRoutes} active \u00B7 ${totalRoutes - activeRoutes} stopped`,
-            <span className={styles.latencyLabel}>P99</span>
+      borderColor: 'var(--running)',
-            <span className={`${styles.latencyVal} ${p99Latency > 300 ? styles.latValRed : styles.latValAmber}`}>{p99Latency}ms</span>
+    },
-            <span className={`${styles.latencyTrend} ${styles.trendUpBad}`}>&#9650;28</span>
+    {
-          </div>
+      label: 'In-Flight Exchanges',
-        </div>
+      value: '23',
-        <div className={styles.kpiDetail}>
+      trend: { label: '\u2194', variant: 'muted' as const },
-          SLA: &lt;300ms P99 · {p99Latency > 300
+      subtitle: 'High-water: 67 (2h ago)',
-            ? <span style={{ color: 'var(--error)', fontWeight: 600 }}>BREACH</span>
+      sparkline: [16, 14, 18, 12, 10, 15, 8, 6, 4, 3, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 18, 16, 18, 20, 18, 23],
-            : <span style={{ color: 'var(--success)', fontWeight: 600 }}>OK</span>}
+      borderColor: 'var(--amber)',
-        </div>
+    },
-      </div>
+  ]
-
-      {/* Card 4: Active Routes */}
-      <div className={`${styles.kpiCard} ${styles.kpiCardTeal}`}>
-        <div className={styles.kpiLabel}>Active Routes</div>
-        <div className={styles.kpiValueRow}>
-          <span className={`${styles.kpiValue} ${styles.kpiValueTeal}`}>{activeRoutes}</span>
-          <span className={styles.kpiUnit}>of {totalRoutes}</span>
-          <span className={`${styles.kpiTrend} ${styles.trendFlat}`}>&#8596; stable</span>
-        </div>
-        <div className={styles.donutWrap}>
-          <svg viewBox="0 0 36 36" width="40" height="40">
-            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--bg-inset)" strokeWidth="3" />
-            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--running)" strokeWidth="3"
-              strokeDasharray={`${(activeRoutes / totalRoutes) * 100} ${100 - (activeRoutes / totalRoutes) * 100}`}
-              strokeDashoffset="25" strokeLinecap="round" />
-          </svg>
-          <div className={styles.donutLegend}>
-            <span className={styles.donutLegendActive}>{activeRoutes} active</span>
-            <span>{totalRoutes - activeRoutes} stopped</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Card 5: In-Flight Exchanges */}
-      <div className={`${styles.kpiCard} ${styles.kpiCardAmber}`}>
-        <div className={styles.kpiLabel}>In-Flight Exchanges</div>
-        <div className={styles.kpiValueRow}>
-          <span className={styles.kpiValue}>23</span>
-          <span className={`${styles.kpiTrend} ${styles.trendFlat}`}>&#8596;</span>
-        </div>
-        <div className={styles.kpiDetail}>
-          High-water: <span className={styles.kpiDetailStrong}>67</span> (2h ago)
-        </div>
-        <div className={styles.kpiSparkline}>
-          <Sparkline data={[16, 14, 18, 12, 10, 15, 8, 6, 4, 3, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 18, 16, 18, 20, 18, 23]} color="var(--amber)" width={200} height={32} />
-        </div>
-      </div>
-    </div>
-  )
 }
 
 // ─── Route metric row with id field (required by DataTable) ──────────────────
@@ -475,7 +422,7 @@ export function Routes() {
             <span className={styles.refreshText}>Auto-refresh: 30s</span>
           </div>
 
-          <KpiHeader scopedMetrics={scopedMetricsForKpi} />
+          <KpiStrip items={buildKpiItems(scopedMetricsForKpi)} />
 
           {/* Processor Performance table */}
           <div className={styles.tableSection}>
@@ -520,7 +467,7 @@ export function Routes() {
         </div>
 
         {/* KPI header cards */}
-        <KpiHeader scopedMetrics={scopedMetricsForKpi} />
+        <KpiStrip items={buildKpiItems(scopedMetricsForKpi)} />
 
         {/* Per-route performance table */}
         <div className={styles.tableSection}>
@@ -544,8 +491,7 @@ export function Routes() {
 
         {/* 2x2 chart grid */}
         <div className={styles.chartGrid}>
-          <div className={styles.chartCard}>
+          <Card title="Throughput (msg/s)">
-            <div className={styles.chartTitle}>Throughput (msg/s)</div>
             <AreaChart
               series={convertSeries(throughputSeries)}
               yLabel="msg/s"
@@ -553,10 +499,9 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
 
-          <div className={styles.chartCard}>
+          <Card title="Latency (ms)">
-            <div className={styles.chartTitle}>Latency (ms)</div>
             <LineChart
               series={convertSeries(latencySeries)}
               yLabel="ms"
@@ -565,10 +510,9 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
 
-          <div className={styles.chartCard}>
+          <Card title="Errors by Route">
-            <div className={styles.chartTitle}>Errors by Route</div>
             <BarChart
               series={ERROR_BAR_SERIES}
               stacked
@@ -576,10 +520,9 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
 
-          <div className={styles.chartCard}>
+          <Card title="Message Volume (msg/min)">
-            <div className={styles.chartTitle}>Message Volume (msg/min)</div>
             <AreaChart
               series={VOLUME_SERIES}
               yLabel="msg/min"
@@ -587,7 +530,7 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
         </div>
       </div>
     </AppShell>