fix: align all pages with design system mocks — stat cards, tables, detail panels

Dashboard: correct stat card labels (Exchanges/Success Rate/Errors/Throughput/Latency p99),
add detail text, trends, sparklines on all cards, Agent column, LIVE badge,
expanded detail panel with Agent/Correlation/Timestamp, "Open full details" link.

Agent Health: per-group meta (TPS/routes) in GroupCard header, proper HTML table
with column headers for instance list.

Agent Instance: stat card detail props (heap info, start date), scope trail with
inline status/version/routes badges.

Routes: 5th In-Flight stat card, enriched stat card props (detail/trend/sparkline),
SLA threshold line on latency chart.

Exchange Detail: Agent stat box in header.

Also: vite proxy CORS fix, cross-env dev scripts.

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

ui/src/pages/AgentInstance/AgentInstance.module.css

@@ -110,6 +110,35 @@
   flex-wrap: wrap;
 }
 
+.scopeTrail {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 16px;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+
+.scopeLink {
+  color: var(--text-accent, var(--text-primary));
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.scopeLink:hover {
+  text-decoration: underline;
+}
+
+.scopeSep {
+  color: var(--text-muted);
+  font-size: 10px;
+}
+
+.scopeCurrent {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
 .paneTitle {
   font-size: 13px;
   font-weight: 700;

ui/src/pages/AgentInstance/AgentInstance.tsx

@@ -122,10 +122,35 @@ export default function AgentInstance() {
 
           <div className={styles.statStrip}>
             <StatCard label="CPU" value={cpuPct != null ? `${(cpuPct * 100).toFixed(0)}%` : '—'} />
-            <StatCard label="Memory" value={memPct != null ? `${memPct.toFixed(0)}%` : '—'} />
+            <StatCard
+              label="Memory"
+              value={memPct != null ? `${memPct.toFixed(0)}%` : '—'}
+              detail={heapUsed != null && heapMax != null ? `${(heapUsed / (1024 * 1024)).toFixed(0)} MB / ${(heapMax / (1024 * 1024)).toFixed(0)} MB` : undefined}
+            />
             <StatCard label="Throughput" value={agent?.tps != null ? `${agent.tps.toFixed(1)}/s` : '—'} />
             <StatCard label="Errors" value={agent?.errorRate != null ? `${(agent.errorRate * 100).toFixed(1)}%` : '—'} accent={agent?.errorRate > 0 ? 'error' : undefined} />
-            <StatCard label="Uptime" value={formatUptime(agent?.uptimeSeconds)} />
+            <StatCard
+              label="Uptime"
+              value={formatUptime(agent?.uptimeSeconds)}
+              detail={agent?.registeredAt ? `since ${new Date(agent.registeredAt).toLocaleDateString()}` : undefined}
+            />
+          </div>
+
+          <div className={styles.scopeTrail}>
+            <a href="/agents" className={styles.scopeLink}>All Agents</a>
+            <span className={styles.scopeSep}>&#9656;</span>
+            <a href={`/agents/${appId}`} className={styles.scopeLink}>{appId}</a>
+            <span className={styles.scopeSep}>&#9656;</span>
+            <span className={styles.scopeCurrent}>{agent.name}</span>
+            <Badge
+              label={agent.status.toUpperCase()}
+              color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'}
+            />
+            {agent.version && <Badge label={agent.version} variant="outlined" />}
+            <Badge
+              label={`${agent.activeRoutes ?? (agent.routeIds?.length ?? 0)}/${agent.totalRoutes ?? (agent.routeIds?.length ?? 0)} routes`}
+              color={(agent.activeRoutes ?? 0) < (agent.totalRoutes ?? 0) ? 'warning' : 'success'}
+            />
           </div>
 
           <Card className={styles.infoCard}>