refactor: AgentHealth slide-in detail panel and richer stat cards

- Instance detail now opens in a DetailPanel (slide-in from right)
  with Overview and Performance tabs instead of navigating away
- Stat strip matches mock design: 5 cards with colored StatusDot
  breakdowns, labeled states (live/stale/dead, healthy/degraded/critical)
- Active Routes shows colored ratio (green/yellow/red) based on state
- Groups renamed to Applications
- StatCard value/detail props now accept ReactNode for rich content

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

src/pages/AgentHealth/AgentHealth.module.css

@@ -10,11 +10,27 @@
 /* Stat strip */
 .statStrip {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   gap: 10px;
   margin-bottom: 16px;
 }
 
+/* Stat breakdown with colored dots */
+.breakdown {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
+.bpLive { color: var(--success); display: inline-flex; align-items: center; gap: 3px; }
+.bpStale { color: var(--warning); display: inline-flex; align-items: center; gap: 3px; }
+.bpDead { color: var(--error); display: inline-flex; align-items: center; gap: 3px; }
+
+.routesSuccess { color: var(--success); }
+.routesWarning { color: var(--warning); }
+.routesError { color: var(--error); }
+
 /* Scope breadcrumb trail */
 .scopeTrail {
   display: flex;
@@ -178,11 +194,6 @@
   box-shadow: inset 3px 0 0 var(--amber);
 }
 
-/* Chart expansion row */
-.chartRow td {
-  padding: 0;
-}
-
 /* Instance fields */
 .instanceName {
   font-weight: 600;
@@ -211,17 +222,35 @@
   white-space: nowrap;
 }
 
-/* Instance expanded charts */
-.instanceCharts {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+/* Detail panel content */
+.detailContent {
+  display: flex;
+  flex-direction: column;
   gap: 12px;
-  padding: 12px 16px;
-  background: var(--bg-raised);
-  border-top: 1px solid var(--border-subtle);
+}
+
+.detailRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-family: var(--font-body);
+  padding: 4px 0;
   border-bottom: 1px solid var(--border-subtle);
 }
 
+.detailLabel {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.detailProgress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 140px;
+}
+
 .chartPanel {
   display: flex;
   flex-direction: column;