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.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}