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

@@ -0,0 +1,66 @@
+.statStrip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.groupGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.instanceRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.1s;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 12px;
+}
+
+.instanceRow:last-child {
+  border-bottom: none;
+}
+
+.instanceRow:hover {
+  background: var(--bg-hover);
+}
+
+.instanceName {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.instanceTps {
+  margin-left: auto;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+.eventCard {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 420px;
+}
+
+.eventCardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}

ui/src/pages/AgentHealth/AgentHealth.tsx

@@ -4,6 +4,7 @@ import {
   StatCard, StatusDot, Badge, MonoText,
   GroupCard, EventFeed,
 } from '@cameleer/design-system';
+import styles from './AgentHealth.module.css';
 import { useAgents, useAgentEvents } from '../../api/queries/agents';
 import { useRouteCatalog } from '../../api/queries/catalog';
 
@@ -46,14 +47,14 @@ export default function AgentHealth() {
 
   return (
     <div>
-      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+      <div className={styles.statStrip}>
         <StatCard label="Total Agents" value={totalAgents} />
         <StatCard label="Live" value={liveCount} accent="success" />
         <StatCard label="Stale" value={staleCount} accent="warning" />
         <StatCard label="Dead" value={deadCount} accent="error" />
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', gap: '1rem', marginBottom: '1.5rem' }}>
+      <div className={styles.groupGrid}>
         {Object.entries(apps).map(([group, groupAgents]) => (
           <GroupCard
             key={group}
@@ -69,13 +70,13 @@ export default function AgentHealth() {
             {(groupAgents || []).map((agent: any) => (
               <div
                 key={agent.id}
-                style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0', cursor: 'pointer' }}
+                className={styles.instanceRow}
                 onClick={(e) => { e.stopPropagation(); navigate(`/agents/${group}/${agent.id}`); }}
               >
                 <StatusDot variant={agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead'} />
-                <MonoText size="sm">{agent.name}</MonoText>
+                <span className={styles.instanceName}>{agent.name}</span>
                 <Badge label={agent.status} color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'} />
-                {agent.tps > 0 && <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--text-tertiary)' }}>{agent.tps.toFixed(1)} tps</span>}
+                {agent.tps > 0 && <span className={styles.instanceTps}>{agent.tps.toFixed(1)} tps</span>}
               </div>
             ))}
           </GroupCard>
@@ -83,8 +84,8 @@ export default function AgentHealth() {
       </div>
 
       {feedEvents.length > 0 && (
-        <div>
-          <h3 style={{ marginBottom: '0.75rem' }}>Event Log</h3>
+        <div className={styles.eventCard}>
+          <div className={styles.eventCardHeader}>Event Log</div>
           <EventFeed events={feedEvents} maxItems={100} />
         </div>
       )}