From 24d760af8a9a9a56135499af0269ec3d767fca05 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:28:51 +0100
Subject: [PATCH] feat(ui): show total correlation duration (oldest start to
 latest end)

---
 ui/src/pages/Exchanges/ExchangeHeader.module.css | 9 +++++++++
 ui/src/pages/Exchanges/ExchangeHeader.tsx        | 6 ++++++
 2 files changed, 15 insertions(+)

diff --git a/ui/src/pages/Exchanges/ExchangeHeader.module.css b/ui/src/pages/Exchanges/ExchangeHeader.module.css
index 5b35a056..e14c43a4 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.module.css
+++ b/ui/src/pages/Exchanges/ExchangeHeader.module.css
@@ -115,6 +115,15 @@
   flex-shrink: 0;
 }
 
+.chainTotal {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+}
+
 .chainEntry {
   display: inline-flex;
   align-items: center;
diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index df809d7d..55795e1d 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -93,6 +93,12 @@ export function ExchangeHeader({ detail, onCorrelatedSelect }: ExchangeHeaderPro
       {/* Correlation chain */}
       <div className={styles.chain}>
         <span className={styles.chainLabel}>Correlated</span>
+        {showChain && (() => {
+          const starts = chain.map((ce: any) => new Date(ce.startTime).getTime()).filter((t: number) => !isNaN(t));
+          const ends = chain.map((ce: any) => new Date(ce.endTime ?? ce.startTime).getTime() + (ce.durationMs ?? 0)).filter((t: number) => !isNaN(t));
+          const totalMs = starts.length > 0 && ends.length > 0 ? Math.max(...ends) - Math.min(...starts) : 0;
+          return totalMs > 0 ? <span className={styles.chainTotal}>Duration: {formatDuration(totalMs)}</span> : null;
+        })()}
         {showChain ? chain.map((ce: any, i: number) => {
             const isCurrent = ce.executionId === detail.executionId;
             const variant = statusVariant(ce.status);