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