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

@@ -1,10 +1,18 @@
-.healthStrip {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
+/* Scrollable content area */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px 40px;
+  min-width: 0;
+  background: var(--bg-body);
+}
+
+/* Filter bar spacing */
+.filterBar {
   margin-bottom: 16px;
 }
 
+/* Table section */
 .tableSection {
   background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
@@ -39,6 +47,93 @@
   font-family: var(--font-mono);
 }
 
+/* Status cell */
+.statusCell {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* Route cells */
+.routeName {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+/* Application column */
+.appName {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* Duration color classes */
+.durFast {
+  color: var(--success);
+}
+
+.durNormal {
+  color: var(--text-secondary);
+}
+
+.durSlow {
+  color: var(--warning);
+}
+
+.durBreach {
+  color: var(--error);
+}
+
+/* Agent badge in table */
+.agentBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.agentDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #5db866;
+  box-shadow: 0 0 4px rgba(93, 184, 102, 0.4);
+  flex-shrink: 0;
+}
+
+/* Inline error preview below row */
+.inlineError {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--error-bg);
+  border-left: 3px solid var(--error-border);
+}
+
+.inlineErrorIcon {
+  color: var(--error);
+  font-size: 14px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.inlineErrorText {
+  font-size: 11px;
+  color: var(--error);
+  font-family: var(--font-mono);
+  line-height: 1.4;
+}
+
+.inlineErrorHint {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 3px;
+}
+
+/* Detail panel sections */
 .panelSection {
   padding-bottom: 16px;
   margin-bottom: 16px;
@@ -59,19 +154,21 @@
   color: var(--text-muted);
   margin-bottom: 10px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 8px;
 }
 
 .panelSectionMeta {
-  font-size: 11px;
-  font-weight: 400;
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
   text-transform: none;
   letter-spacing: 0;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
+  color: var(--text-faint);
 }
 
+/* Overview grid */
 .overviewGrid {
   display: flex;
   flex-direction: column;
@@ -95,45 +192,67 @@
   padding-top: 2px;
 }
 
+/* Error block */
+.errorBlock {
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+}
+
+.errorClass {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--error);
+  margin-bottom: 4px;
+}
+
+.errorMessage {
+  font-size: 11px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  font-family: var(--font-mono);
+  word-break: break-word;
+}
+
+/* Inspect exchange icon in table */
 .inspectLink {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  font-size: 14px;
-  color: var(--text-muted);
+  transition: color 0.15s, opacity 0.15s;
   text-decoration: none;
-  border-radius: 4px;
-  transition: color 0.15s, background 0.15s;
 }
 
 .inspectLink:hover {
-  color: var(--accent, #c6820e);
-  background: var(--bg-hover);
-}
-
-.detailPanelOverride {
-  position: fixed;
-  top: 0;
-  right: 0;
-  height: 100vh;
-  z-index: 100;
-  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
+  color: var(--text-primary);
+  opacity: 1;
 }
 
+/* Open full details link in panel */
 .openDetailLink {
-  display: inline-block;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--accent, #c6820e);
-  cursor: pointer;
-  background: none;
+  background: transparent;
   border: none;
+  color: var(--amber);
+  cursor: pointer;
+  font-size: 12px;
   padding: 0;
-  text-decoration: none;
+  font-family: var(--font-body);
+  transition: color 0.1s;
 }
 
 .openDetailLink:hover {
+  color: var(--amber-deep);
   text-decoration: underline;
+  text-underline-offset: 2px;
 }