style: add CSS modules to all pages matching design system mock layouts

Replace inline styles with semantic CSS module classes for proper visual
structure: card wrappers with borders/shadows, grid layouts for stat
strips and charts, section headers, and typography classes.

Pages updated: Dashboard, ExchangeDetail, RoutesMetrics, AgentHealth,
AgentInstance.

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

ui/src/pages/Dashboard/Dashboard.module.css

@@ -0,0 +1,84 @@
+.healthStrip {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.tableSection {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.tableHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.tableTitle {
+  font-size: 13px;
+  font-weight: 600;
+  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);
+}
+
+.panelSection {
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.panelSection:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.panelSectionTitle {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+}
+
+.overviewGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.overviewRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.overviewLabel {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  width: 90px;
+  flex-shrink: 0;
+  padding-top: 2px;
+}

ui/src/pages/Dashboard/Dashboard.tsx

@@ -8,6 +8,7 @@ import type { Column } from '@cameleer/design-system';
 import { useSearchExecutions, useExecutionStats, useStatsTimeseries, useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions';
 import { useGlobalFilters } from '@cameleer/design-system';
 import type { ExecutionSummary } from '../../api/types';
+import styles from './Dashboard.module.css';
 
 interface Row extends ExecutionSummary { id: string }
 
@@ -61,12 +62,32 @@ export default function Dashboard() {
     {
       label: 'Overview', value: 'overview',
       content: (
-        <div style={{ display: 'grid', gap: '0.75rem', padding: '1rem' }}>
-          <div><strong>Execution ID:</strong> <MonoText size="sm">{detail.executionId}</MonoText></div>
-          <div><strong>Status:</strong> <Badge label={detail.status} color={detail.status === 'COMPLETED' ? 'success' : 'error'} /></div>
-          <div><strong>Route:</strong> {detail.routeId}</div>
-          <div><strong>Duration:</strong> {detail.durationMs}ms</div>
-          {detail.errorMessage && <div><strong>Error:</strong> {detail.errorMessage}</div>}
+        <div className={styles.panelSection}>
+          <div className={styles.panelSectionTitle}>Details</div>
+          <div className={styles.overviewGrid}>
+            <div className={styles.overviewRow}>
+              <span className={styles.overviewLabel}>Exchange ID</span>
+              <MonoText size="sm">{detail.executionId}</MonoText>
+            </div>
+            <div className={styles.overviewRow}>
+              <span className={styles.overviewLabel}>Status</span>
+              <Badge label={detail.status} color={detail.status === 'COMPLETED' ? 'success' : 'error'} />
+            </div>
+            <div className={styles.overviewRow}>
+              <span className={styles.overviewLabel}>Route</span>
+              <span>{detail.routeId}</span>
+            </div>
+            <div className={styles.overviewRow}>
+              <span className={styles.overviewLabel}>Duration</span>
+              <span>{detail.durationMs}ms</span>
+            </div>
+            {detail.errorMessage && (
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Error</span>
+                <span>{detail.errorMessage}</span>
+              </div>
+            )}
+          </div>
         </div>
       ),
     },
@@ -85,7 +106,7 @@ export default function Dashboard() {
 
   return (
     <div>
-      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+      <div className={styles.healthStrip}>
         <StatCard label="Total Exchanges" value={stats?.totalCount ?? 0} sparkline={sparklineData} />
         <StatCard label="Failed" value={stats?.failedCount ?? 0} accent="error" />
         <StatCard label="Avg Duration" value={`${stats?.avgDurationMs ?? 0}ms`} />
@@ -93,14 +114,22 @@ export default function Dashboard() {
         <StatCard label="Active" value={stats?.activeCount ?? 0} accent="running" />
       </div>
 
-      <DataTable
-        columns={columns}
-        data={rows}
-        onRowClick={(row) => { setSelectedId(row.id); setProcessorIdx(null); }}
-        selectedId={selectedId ?? undefined}
-        sortable
-        pageSize={25}
-      />
+      <div className={styles.tableSection}>
+        <div className={styles.tableHeader}>
+          <span className={styles.tableTitle}>Recent Exchanges</span>
+          <div className={styles.tableRight}>
+            <span className={styles.tableMeta}>{rows.length} results</span>
+          </div>
+        </div>
+        <DataTable
+          columns={columns}
+          data={rows}
+          onRowClick={(row) => { setSelectedId(row.id); setProcessorIdx(null); }}
+          selectedId={selectedId ?? undefined}
+          sortable
+          pageSize={25}
+        />
+      </div>
 
       <DetailPanel
         open={!!selectedId}