feat: replace UI with design system example pages wired to real API

Migrate all page components from the @cameleer/design-system v0.0.3
example UI, replacing mock data with real backend API hooks. This brings
richer visuals (KpiStrip, GroupCard, RouteFlow, ProcessorTimeline,
DateRangePicker, expandable rows) while preserving all existing API
integration, auth, and routing infrastructure.

Pages migrated: Dashboard, RoutesMetrics, RouteDetail, ExchangeDetail,
AgentHealth, AgentInstance, OidcConfig, AuditLog, RBAC (Users/Groups/Roles).
Also enhanced LayoutShell CommandPalette with real search data from catalog.

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

ui/src/pages/Routes/RoutesMetrics.module.css

@@ -1,17 +1,44 @@
-.statStrip {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
-  margin-bottom: 16px;
+/* Scrollable content area */
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
+.refreshIndicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.refreshDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 4px rgba(61, 124, 71, 0.5);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.refreshText {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+/* Route performance table */
 .tableSection {
   background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
   overflow: hidden;
-  margin-bottom: 20px;
 }
 
 .tableHeader {
@@ -28,36 +55,56 @@
   color: var(--text-primary);
 }
 
+.tableRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .tableMeta {
   font-size: 11px;
   color: var(--text-muted);
   font-family: var(--font-mono);
 }
 
+/* Route name in table */
+.routeNameCell {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+}
+
+/* Application column */
+.appCell {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* Rate color classes */
+.rateGood {
+  color: var(--success);
+}
+
+.rateWarn {
+  color: var(--warning);
+}
+
+.rateBad {
+  color: var(--error);
+}
+
+.rateNeutral {
+  color: var(--text-secondary);
+}
+
+/* 2x2 chart grid */
 .chartGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   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;
+.chart {
+  width: 100%;
 }
-
-.chartTitle {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 12px;
-}
-
-.rateGood { color: var(--success); }
-.rateWarn { color: var(--warning); }
-.rateBad { color: var(--error); }