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

ui/src/pages/Exchanges/ExchangeHeader.module.css

@@ -0,0 +1,93 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  font-size: 0.8125rem;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.duration {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+}
+
+/* ── Correlation chain ────────────────────────────────────────────────────── */
+
+.chain {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+  margin-top: 4px;
+  border-top: 1px solid var(--border-subtle);
+  flex-wrap: wrap;
+}
+
+.chainLabel {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-right: 4px;
+}
+
+.chainNode {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  font-size: 11px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  transition: all 0.12s;
+}
+
+.chainNode:hover {
+  border-color: var(--text-faint);
+  background: var(--bg-hover);
+}
+
+.chainNodeCurrent {
+  background: var(--amber-bg);
+  border-color: var(--amber-light);
+  color: var(--amber-deep);
+  font-weight: 600;
+}
+
+.chainNodeSuccess {
+  border-left: 3px solid var(--success);
+}
+
+.chainNodeError {
+  border-left: 3px solid var(--error);
+}
+
+.chainNodeRunning {
+  border-left: 3px solid var(--running);
+}
+
+.chainNodeWarning {
+  border-left: 3px solid var(--warning);
+}
+
+.chainMore {
+  color: var(--text-muted);
+  font-size: 11px;
+  font-style: italic;
+}

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={{
+    <div className={styles.header}>
-      display: 'flex', flexDirection: 'column', gap: '0.5rem',
+      <div className={styles.summary}>
-      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' }}>
         <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' }}>
+        <span className={styles.duration}>{formatDuration(detail.durationMs)}</span>
-          {formatDuration(detail.durationMs)}
-        </span>
       </div>
 
       {showChain && (
-        <div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap', alignItems: 'center' }}>
+        <div className={styles.chain}>
-          <span style={{ fontSize: '0.6875rem', color: 'var(--text-muted)', marginRight: '0.25rem' }}>
+          <span className={styles.chainLabel}>Correlated Exchanges</span>
-            Correlated:
+          {chain.map((ce: any) => {
-          </span>
+            const isCurrent = ce.executionId === detail.executionId;
-          {chain.map((e) => (
+            const variant = statusVariant(ce.status);
+            const statusCls =
+              variant === 'success' ? styles.chainNodeSuccess
+              : variant === 'error' ? styles.chainNodeError
+              : variant === 'running' ? styles.chainNodeRunning
+              : styles.chainNodeWarning;
+            return (
               <button
-              key={e.executionId}
+                key={ce.executionId}
-              onClick={() => onExchangeClick?.(e.executionId)}
+                className={`${styles.chainNode} ${statusCls} ${isCurrent ? styles.chainNodeCurrent : ''}`}
-              style={{
+                onClick={() => { if (!isCurrent) onExchangeClick?.(ce.executionId); }}
-                background: e.executionId === detail.executionId ? 'var(--surface-active)' : 'var(--surface)',
+                title={`${ce.executionId} \u2014 ${ce.routeId}`}
-                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)}
+                <StatusDot variant={variant} />
+                <span>{ce.routeId}</span>
               </button>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>