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/Admin/UserManagement.module.css

@@ -5,187 +5,149 @@
   margin-bottom: 16px;
 }
 
-.splitPane {
-  display: grid;
-  grid-template-columns: 52fr 48fr;
-  gap: 1px;
-  background: var(--border-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  min-height: 500px;
-  box-shadow: var(--shadow-card);
-}
-
-.listPane {
-  background: var(--bg-surface);
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
-}
-
-.detailPane {
-  background: var(--bg-surface);
-  overflow-y: auto;
-  padding: 20px;
-  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-}
-
-.listHeader {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.listHeader input { flex: 1; }
-
-.entityList {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.entityItem {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 10px 12px;
-  cursor: pointer;
-  transition: background 0.1s;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.entityItem:last-child {
-  border-bottom: none;
-}
-
-.entityItem:hover {
-  background: var(--bg-hover);
-}
-
-.entityItemSelected {
-  background: var(--bg-raised);
+.tabContent {
+  margin-top: 16px;
 }
 
 .entityInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
   flex: 1;
   min-width: 0;
 }
 
 .entityName {
-  font-weight: 600;
   font-size: 13px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
+  font-weight: 500;
   color: var(--text-primary);
+  font-family: var(--font-body);
 }
 
 .entityMeta {
   font-size: 11px;
   color: var(--text-muted);
+  font-family: var(--font-body);
   margin-top: 2px;
 }
 
 .entityTags {
   display: flex;
-  gap: 4px;
   flex-wrap: wrap;
+  gap: 4px;
   margin-top: 4px;
 }
 
-.createForm {
-  background: var(--bg-raised);
-  border-bottom: 1px solid var(--border-subtle);
-  padding: 12px;
-}
-
-.createFormActions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
 .detailHeader {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--border-subtle);
+}
+
+.detailHeaderInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.detailName {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: var(--font-body);
+}
+
+.detailEmail {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-body);
 }
 
 .metaGrid {
   display: grid;
-  grid-template-columns: 100px 1fr;
-  gap: 6px 12px;
-  font-size: 13px;
+  grid-template-columns: auto 1fr;
+  gap: 6px 16px;
   margin-bottom: 16px;
+  font-size: 12px;
+  font-family: var(--font-body);
 }
 
 .metaLabel {
-  font-weight: 700;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
   color: var(--text-muted);
+  font-weight: 500;
 }
 
-.sectionTitle {
-  font-size: 13px;
-  font-weight: 700;
+.metaValue {
   color: var(--text-primary);
-  margin-bottom: 8px;
-  margin-top: 16px;
 }
 
 .sectionTags {
   display: flex;
-  gap: 4px;
   flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
   margin-bottom: 8px;
 }
 
+.createForm {
+  padding: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-raised);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.createFormRow {
+  display: flex;
+  gap: 8px;
+}
+
+.createFormActions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
 .inheritedNote {
   font-size: 11px;
-  font-style: italic;
   color: var(--text-muted);
+  font-style: italic;
+  font-family: var(--font-body);
   margin-top: 4px;
 }
 
+.providerBadge {
+  margin-left: 6px;
+}
+
+.inherited {
+  opacity: 0.65;
+}
+
 .securitySection {
-  padding: 12px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  margin-bottom: 16px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.securityRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  font-family: var(--font-body);
+  color: var(--text-primary);
+}
+
+.passwordDots {
+  font-family: var(--font-mono);
+  letter-spacing: 2px;
 }
 
 .resetForm {
   display: flex;
   gap: 8px;
+  align-items: center;
   margin-top: 8px;
 }
 
-.emptyDetail {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-muted);
-  font-size: 13px;
-}
-
-.emptySearch {
-  padding: 20px;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-.providerBadge {
-  font-size: 9px;
+.resetInput {
+  width: 200px;
 }