fix(ui): restore proper correlation chain styling with StatusDot, route names, colored borders

ui/src/pages/Exchanges/ExchangeHeader.tsx

@@ -1,6 +1,7 @@
 import { StatusDot, MonoText, Badge } from '@cameleer/design-system';
 import { useCorrelationChain } from '../../api/queries/correlation';
 import type { ExecutionDetail } from '../../components/ExecutionDiagram/types';
+import styles from './ExchangeHeader.module.css';
 
 interface ExchangeHeaderProps {
   detail: ExecutionDetail;
@@ -8,7 +9,6 @@ interface ExchangeHeaderProps {
 }
 
 type StatusVariant = 'success' | 'error' | 'running' | 'warning';
-type BadgeColor = 'success' | 'error' | 'running' | 'warning';
 
 function statusVariant(s: string): StatusVariant {
   switch (s) {
@@ -19,15 +19,6 @@ function statusVariant(s: string): StatusVariant {
   }
 }
 
-function badgeColor(s: string): BadgeColor {
-  switch (s) {
-    case 'COMPLETED': return 'success';
-    case 'FAILED': return 'error';
-    case 'RUNNING': return 'running';
-    default: return 'warning';
-  }
-}
-
 function formatDuration(ms: number): string {
   if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`;
   if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
@@ -40,44 +31,38 @@ export function ExchangeHeader({ detail, onExchangeClick }: ExchangeHeaderProps)
   const showChain = chain && chain.length > 1;
 
   return (
-    <div style={{
-      display: 'flex', flexDirection: 'column', gap: '0.5rem',
-      padding: '0.75rem', borderBottom: '1px solid var(--border)',
-      background: 'var(--surface)', fontSize: '0.8125rem',
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+    <div className={styles.header}>
+      <div className={styles.summary}>
         <StatusDot variant={statusVariant(detail.status)} />
         <MonoText size="xs">{detail.exchangeId || detail.executionId}</MonoText>
-        <Badge label={detail.status === 'COMPLETED' ? 'OK' : detail.status} color={badgeColor(detail.status)} />
+        <Badge label={detail.status === 'COMPLETED' ? 'OK' : detail.status} color={statusVariant(detail.status)} />
         <span style={{ color: 'var(--text-muted)' }}>{detail.routeId}</span>
-        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
-          {formatDuration(detail.durationMs)}
-        </span>
+        <span className={styles.duration}>{formatDuration(detail.durationMs)}</span>
       </div>
 
       {showChain && (
-        <div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap', alignItems: 'center' }}>
-          <span style={{ fontSize: '0.6875rem', color: 'var(--text-muted)', marginRight: '0.25rem' }}>
-            Correlated:
-          </span>
-          {chain.map((e) => (
-            <button
-              key={e.executionId}
-              onClick={() => onExchangeClick?.(e.executionId)}
-              style={{
-                background: e.executionId === detail.executionId ? 'var(--surface-active)' : 'var(--surface)',
-                border: '1px solid var(--border)',
-                borderRadius: '4px',
-                padding: '0.125rem 0.375rem',
-                cursor: 'pointer',
-                fontSize: '0.6875rem',
-                fontFamily: 'var(--font-mono)',
-                color: e.status === 'FAILED' ? 'var(--error)' : 'var(--text-secondary)',
-              }}
-            >
-              {e.executionId.slice(0, 8)}
-            </button>
-          ))}
+        <div className={styles.chain}>
+          <span className={styles.chainLabel}>Correlated Exchanges</span>
+          {chain.map((ce: any) => {
+            const isCurrent = ce.executionId === detail.executionId;
+            const variant = statusVariant(ce.status);
+            const statusCls =
+              variant === 'success' ? styles.chainNodeSuccess
+              : variant === 'error' ? styles.chainNodeError
+              : variant === 'running' ? styles.chainNodeRunning
+              : styles.chainNodeWarning;
+            return (
+              <button
+                key={ce.executionId}
+                className={`${styles.chainNode} ${statusCls} ${isCurrent ? styles.chainNodeCurrent : ''}`}
+                onClick={() => { if (!isCurrent) onExchangeClick?.(ce.executionId); }}
+                title={`${ce.executionId} \u2014 ${ce.routeId}`}
+              >
+                <StatusDot variant={variant} />
+                <span>{ce.routeId}</span>
+              </button>
+            );
+          })}
         </div>
       )}
     </div>