feat: add correlation chain and processor count to Exchange Detail

Adds a recursive processor count stat to the exchange header, and a
Correlation Chain section that visualises related executions sharing
the same correlationId, with the current exchange highlighted.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/pages/ExchangeDetail/ExchangeDetail.tsx

@@ -1,18 +1,24 @@
-import { useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import {
   Badge, StatusDot, MonoText, CodeBlock, InfoCallout,
   ProcessorTimeline, Breadcrumb, Spinner,
 } from '@cameleer/design-system';
 import { useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions';
+import { useCorrelationChain } from '../../api/queries/correlation';
 import styles from './ExchangeDetail.module.css';
 
+function countProcessors(nodes: any[]): number {
+  return nodes.reduce((sum, n) => sum + 1 + countProcessors(n.children || []), 0);
+}
+
 export default function ExchangeDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
   const { data: detail, isLoading } = useExecutionDetail(id ?? null);
   const [selectedProcessor, setSelectedProcessor] = useState<number | null>(null);
   const { data: snapshot } = useProcessorSnapshot(id ?? null, selectedProcessor);
+  const { data: correlationData } = useCorrelationChain(detail?.correlationId ?? null);
 
   const processors = useMemo(() => {
     if (!detail?.children) return [];
@@ -58,6 +64,10 @@ export default function ExchangeDetail() {
               <div className={styles.headerStatLabel}>Duration</div>
               <div className={styles.headerStatValue}>{detail.durationMs}ms</div>
             </div>
+            <div className={styles.headerStat}>
+              <div className={styles.headerStatLabel}>Processors</div>
+              <div className={styles.headerStatValue}>{countProcessors(detail.processors || detail.children || [])}</div>
+            </div>
             <div className={styles.headerStat}>
               <div className={styles.headerStatLabel}>Route</div>
               <div className={styles.headerStatValue}>{detail.routeId}</div>
@@ -70,6 +80,33 @@ export default function ExchangeDetail() {
         </div>
       </div>
 
+      {correlationData?.data && correlationData.data.length > 1 && (
+        <div className={styles.correlationChain}>
+          <div className={styles.panelHeader}>
+            <span className={styles.panelTitle}>Correlation Chain</span>
+          </div>
+          <div className={styles.chainRow}>
+            {correlationData.data.map((exec, i) => (
+              <React.Fragment key={exec.executionId}>
+                {i > 0 && <span className={styles.chainArrow}>→</span>}
+                <a
+                  href={`/exchanges/${exec.executionId}`}
+                  className={`${styles.chainCard} ${exec.executionId === id ? styles.chainCardActive : ''}`}
+                  onClick={(e) => { e.preventDefault(); navigate(`/exchanges/${exec.executionId}`); }}
+                >
+                  <StatusDot variant={exec.status === 'COMPLETED' ? 'success' : exec.status === 'FAILED' ? 'error' : 'warning'} />
+                  <span className={styles.chainRoute}>{exec.routeId}</span>
+                  <span className={styles.chainDuration}>{exec.durationMs}ms</span>
+                </a>
+              </React.Fragment>
+            ))}
+            {correlationData.total > 20 && (
+              <span className={styles.chainMore}>+{correlationData.total - 20} more</span>
+            )}
+          </div>
+        </div>
+      )}
+
       {detail.errorMessage && (
         <InfoCallout variant="error">
           {detail.errorMessage}