feat: redesign exchange detail page with interactive processor inspector

- Rewrite ExchangeDetail with split Message IN/OUT panels that update
  on processor click, error panel for failed processors, and
  Timeline/Flow toggle for the processor visualization
- Add correlation chain in header with status-colored clickable nodes
  sorted by start time, labeled "Correlated Exchanges"
- Add Exchange ID column and inspect button (↗) to Dashboard table
- Add "Open full details" link in the exchange slide-in panel
- Add selectedIndex prop to ProcessorTimeline and RouteFlow for
  highlighting the active processor
- Add onNodeClick + selectedIndex to RouteFlow for interactive use
- Add correlationGroup field to exchange mock data
- Fix sidebar section toggle indentation alignment

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

src/design-system/composites/ProcessorTimeline/ProcessorTimeline.module.css

@@ -89,6 +89,13 @@
   text-align: right;
 }
 
+.selectedRow {
+  background: var(--amber-bg);
+  border-left: 3px solid var(--amber);
+  border-radius: var(--radius-sm);
+  padding: 2px 0 2px 4px;
+}
+
 .empty {
   color: var(--text-muted);
   font-size: 12px;

src/design-system/composites/ProcessorTimeline/ProcessorTimeline.tsx

@@ -11,7 +11,8 @@ export interface ProcessorStep {
 interface ProcessorTimelineProps {
   processors: ProcessorStep[]
   totalMs: number
-  onProcessorClick?: (processor: ProcessorStep) => void
+  onProcessorClick?: (processor: ProcessorStep, index: number) => void
+  selectedIndex?: number
   className?: string
 }
 
@@ -24,6 +25,7 @@ export function ProcessorTimeline({
   processors,
   totalMs,
   onProcessorClick,
+  selectedIndex,
   className,
 }: ProcessorTimelineProps) {
   const safeTotal = totalMs || 1
@@ -49,17 +51,19 @@ export function ProcessorTimeline({
           .filter(Boolean)
           .join(' ')
 
+        const isSelected = selectedIndex === i
+
         return (
           <div
             key={i}
-            className={`${styles.row} ${onProcessorClick ? styles.clickable : ''}`}
+            className={`${styles.row} ${onProcessorClick ? styles.clickable : ''} ${isSelected ? styles.selectedRow : ''}`}
-            onClick={() => onProcessorClick?.(proc)}
+            onClick={() => onProcessorClick?.(proc, i)}
             role={onProcessorClick ? 'button' : undefined}
             tabIndex={onProcessorClick ? 0 : undefined}
             onKeyDown={(e) => {
               if (onProcessorClick && (e.key === 'Enter' || e.key === ' ')) {
                 e.preventDefault()
-                onProcessorClick(proc)
+                onProcessorClick(proc, i)
               }
             }}
             aria-label={`${proc.name}: ${formatDuration(proc.durationMs)} (${proc.status})`}

src/design-system/composites/RouteFlow/RouteFlow.module.css

@@ -176,6 +176,22 @@
   padding-left: 2px;
 }
 
+/* Selected node */
+.nodeSelected {
+  box-shadow: 0 0 0 2px var(--amber);
+  border-color: var(--amber);
+}
+
+/* Clickable node */
+.nodeClickable {
+  cursor: pointer;
+}
+
+.nodeClickable:focus-visible {
+  outline: 2px solid var(--amber);
+  outline-offset: 2px;
+}
+
 /* Bottleneck badge */
 .bottleneckBadge {
   position: absolute;

src/design-system/composites/RouteFlow/RouteFlow.tsx

@@ -10,6 +10,8 @@ export interface RouteNode {
 
 interface RouteFlowProps {
   nodes: RouteNode[]
+  onNodeClick?: (node: RouteNode, index: number) => void
+  selectedIndex?: number
   className?: string
 }
 
@@ -50,13 +52,24 @@ function nodeStatusClass(node: RouteNode): string {
   return styles.nodeHealthy
 }
 
-export function RouteFlow({ nodes, className }: RouteFlowProps) {
+export function RouteFlow({ nodes, onNodeClick, selectedIndex, className }: RouteFlowProps) {
   const mainNodes = nodes.filter((n) => n.type !== 'error-handler')
   const errorHandlers = nodes.filter((n) => n.type === 'error-handler')
 
+  // Map from mainNodes index back to original nodes index
+  const mainNodeOriginalIndices = nodes.reduce<number[]>((acc, n, idx) => {
+    if (n.type !== 'error-handler') acc.push(idx)
+    return acc
+  }, [])
+
   return (
     <div className={`${styles.wrapper} ${className ?? ''}`}>
-      {mainNodes.map((node, i) => (
+      {mainNodes.map((node, i) => {
+        const originalIndex = mainNodeOriginalIndices[i]
+        const isSelected = selectedIndex === originalIndex
+        const isClickable = !!onNodeClick
+
+        return (
           <div key={i} style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             {i > 0 && (
               <div className={styles.connector}>
@@ -64,7 +77,18 @@ export function RouteFlow({ nodes, className }: RouteFlowProps) {
                 <div className={styles.connectorArrow} />
               </div>
             )}
-          <div className={`${styles.node} ${nodeStatusClass(node)}`}>
+            <div
+              className={`${styles.node} ${nodeStatusClass(node)} ${isSelected ? styles.nodeSelected : ''} ${isClickable ? styles.nodeClickable : ''}`}
+              onClick={() => onNodeClick?.(node, originalIndex)}
+              role={isClickable ? 'button' : undefined}
+              tabIndex={isClickable ? 0 : undefined}
+              onKeyDown={(e) => {
+                if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
+                  e.preventDefault()
+                  onNodeClick?.(node, originalIndex)
+                }
+              }}
+            >
               {node.isBottleneck && <span className={styles.bottleneckBadge}>BOTTLENECK</span>}
               <div className={`${styles.icon} ${ICON_CLASSES[node.type] ?? styles.iconTo}`}>
                 {TYPE_ICONS[node.type] ?? '\u25A2'}
@@ -80,7 +104,8 @@ export function RouteFlow({ nodes, className }: RouteFlowProps) {
               </div>
             </div>
           </div>
-      ))}
+        )
+      })}
 
       {errorHandlers.length > 0 && (
         <div className={styles.errorSection}>

src/design-system/layout/Sidebar/Sidebar.module.css

@@ -214,9 +214,9 @@
 .treeSectionToggle {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 2px;
   width: 100%;
-  padding: 8px 12px 4px;
+  padding: 8px 0 4px;
 }
 
 .treeSectionChevronBtn {

src/mocks/exchanges.ts

@@ -20,6 +20,7 @@ export interface Exchange {
   errorMessage?: string
   errorClass?: string
   processors: ProcessorData[]
+  correlationGroup?: string
 }
 
 export const exchanges: Exchange[] = [
@@ -34,6 +35,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T09:12:04'),
     correlationId: 'cmr-f4a1c82b-9d3e',
     agent: 'prod-1',
+    correlationGroup: 'order-flow-001',
     processors: [
       { name: 'from(jms:orders)', type: 'consumer', durationMs: 4, status: 'ok', startMs: 0 },
       { name: 'unmarshal(json)', type: 'transform', durationMs: 6, status: 'ok', startMs: 4 },
@@ -53,6 +55,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T09:11:22'),
     correlationId: 'cmr-7b2d9f14-c5a8',
     agent: 'prod-2',
+    correlationGroup: 'payment-flow-001',
     processors: [
       { name: 'from(jms:payments)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
       { name: 'unmarshal(json)', type: 'transform', durationMs: 8, status: 'ok', startMs: 5 },
@@ -72,6 +75,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T09:13:44'),
     correlationId: 'cmr-3c8e1a7f-d2b6',
     agent: 'prod-1',
+    correlationGroup: 'order-flow-001',
     processors: [
       { name: 'from(jms:orders)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
       { name: 'enrich(inventory-api)', type: 'enrich', durationMs: 29990, status: 'slow', startMs: 5 },
@@ -88,6 +92,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T09:09:47'),
     correlationId: 'cmr-a9f3b2c1-e4d7',
     agent: 'prod-3',
+    correlationGroup: 'shipment-flow-001',
     processors: [
       { name: 'from(jms:shipments)', type: 'consumer', durationMs: 6, status: 'ok', startMs: 0 },
       { name: 'unmarshal(json)', type: 'transform', durationMs: 8, status: 'ok', startMs: 6 },
@@ -106,6 +111,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T09:06:11'),
     correlationId: 'cmr-9a4f2b71-e8c3',
     agent: 'prod-2',
+    correlationGroup: 'payment-flow-002',
     errorMessage: 'org.apache.camel.CamelExecutionException: Payment gateway timeout after 5000ms — POST https://pay.provider.com/v2/charge returned HTTP 504. Retry exhausted (3/3).',
     errorClass: 'org.apache.camel.CamelExecutionException',
     processors: [
@@ -145,6 +151,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T09:00:15'),
     correlationId: 'cmr-2e5f8d9a-b4c1',
     agent: 'prod-3',
+    correlationGroup: 'order-flow-001',
     processors: [
       { name: 'from(jms:orders)', type: 'consumer', durationMs: 3, status: 'ok', startMs: 0 },
       { name: 'unmarshal(json)', type: 'transform', durationMs: 5, status: 'ok', startMs: 3 },
@@ -164,6 +171,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T08:58:33'),
     correlationId: 'cmr-d1a3e7f4-c2b8',
     agent: 'prod-1',
+    correlationGroup: 'payment-flow-001',
     processors: [
       { name: 'from(jms:payments)', type: 'consumer', durationMs: 4, status: 'ok', startMs: 0 },
       { name: 'validate(payment-schema)', type: 'process', durationMs: 14, status: 'ok', startMs: 4 },
@@ -199,6 +207,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T08:50:41'),
     correlationId: 'cmr-f3c7a1b9-d5e2',
     agent: 'prod-1',
+    correlationGroup: 'order-flow-001',
     processors: [
       { name: 'from(jms:orders)', type: 'consumer', durationMs: 3, status: 'ok', startMs: 0 },
       { name: 'unmarshal(json)', type: 'transform', durationMs: 6, status: 'ok', startMs: 3 },
@@ -218,6 +227,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T08:46:19'),
     correlationId: 'cmr-a2d8f5c3-b9e1',
     agent: 'prod-2',
+    correlationGroup: 'payment-flow-001',
     processors: [
       { name: 'from(jms:payments)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
       { name: 'validate(payment-schema)', type: 'process', durationMs: 12, status: 'ok', startMs: 5 },
@@ -254,6 +264,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T08:31:05'),
     correlationId: 'cmr-7e9a2c5f-d1b4',
     agent: 'prod-2',
+    correlationGroup: 'payment-flow-002',
     errorMessage: 'org.apache.camel.component.http.HttpOperationFailedException: HTTP operation failed invoking https://pay.provider.com/v2/charge with statusCode: 422 — Unprocessable Entity: card declined (insufficient funds)',
     errorClass: 'org.apache.camel.component.http.HttpOperationFailedException',
     processors: [
@@ -273,6 +284,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T08:22:44'),
     correlationId: 'cmr-b5c8d2a7-f4e3',
     agent: 'prod-3',
+    correlationGroup: 'shipment-flow-001',
     processors: [
       { name: 'from(jms:shipments)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
       { name: 'unmarshal(json)', type: 'transform', durationMs: 7, status: 'ok', startMs: 5 },
@@ -291,6 +303,7 @@ export const exchanges: Exchange[] = [
     timestamp: new Date('2026-03-18T08:15:19'),
     correlationId: 'cmr-d9e3f7b1-a6c5',
     agent: 'prod-4',
+    correlationGroup: 'order-flow-001',
     processors: [
       { name: 'from(jms:orders)', type: 'consumer', durationMs: 4, status: 'ok', startMs: 0 },
       { name: 'unmarshal(json)', type: 'transform', durationMs: 7, status: 'ok', startMs: 4 },

src/pages/Dashboard/Dashboard.module.css

@@ -223,3 +223,43 @@
   font-family: var(--font-mono);
   word-break: break-word;
 }
+
+/* Inspect exchange icon in table */
+.inspectLink {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, opacity 0.15s;
+}
+
+.inspectLink:hover {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+/* Open full details link in panel */
+.openDetailLink {
+  background: transparent;
+  border: none;
+  color: var(--amber);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+  font-family: var(--font-body);
+  transition: color 0.1s;
+}
+
+.openDetailLink:hover {
+  color: var(--amber-deep);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}

src/pages/Dashboard/Dashboard.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import styles from './Dashboard.module.css'
 
 // Layout
@@ -68,8 +68,8 @@ function statusLabel(status: Exchange['status']): string {
   }
 }
 
-// ─── Table columns ────────────────────────────────────────────────────────────
+// ─── Table columns (base, without navigate action) ──────────────────────────
-const COLUMNS: Column<Exchange>[] = [
+const BASE_COLUMNS: Column<Exchange>[] = [
   {
     key: 'status',
     header: 'Status',
@@ -97,6 +97,14 @@ const COLUMNS: Column<Exchange>[] = [
       <span className={styles.appName}>{ROUTE_TO_APP.get(row.route) ?? row.routeGroup}</span>
     ),
   },
+  {
+    key: 'id',
+    header: 'Exchange ID',
+    sortable: true,
+    render: (_, row) => (
+      <MonoText size="xs">{row.id}</MonoText>
+    ),
+  },
   {
     key: 'timestamp',
     header: 'Started',
@@ -145,10 +153,34 @@ const SHORTCUTS = [
 // ─── Dashboard component ──────────────────────────────────────────────────────
 export function Dashboard() {
   const { id: appId, routeId } = useParams<{ id: string; routeId: string }>()
+  const navigate = useNavigate()
   const [selectedId, setSelectedId] = useState<string | undefined>()
   const [panelOpen, setPanelOpen] = useState(false)
   const [selectedExchange, setSelectedExchange] = useState<Exchange | null>(null)
 
+  // Build columns with inspect action as second column
+  const COLUMNS: Column<Exchange>[] = useMemo(() => {
+    const inspectCol: Column<Exchange> = {
+      key: 'correlationId' as keyof Exchange,
+      header: '',
+      width: '36px',
+      render: (_, row) => (
+        <button
+          className={styles.inspectLink}
+          title="Inspect exchange"
+          onClick={(e) => {
+            e.stopPropagation()
+            navigate(`/exchanges/${row.id}`)
+          }}
+        >
+          &#x2197;
+        </button>
+      ),
+    }
+    const [statusCol, ...rest] = BASE_COLUMNS
+    return [statusCol, inspectCol, ...rest]
+  }, [navigate])
+
   const { isInTimeRange, statusFilters } = useGlobalFilters()
 
   // Build set of route IDs belonging to the selected app (if any)
@@ -232,6 +264,16 @@ export function Dashboard() {
             onClose={() => setPanelOpen(false)}
             title={`${selectedExchange.orderId} — ${selectedExchange.route}`}
           >
+            {/* Link to full detail page */}
+            <div className={styles.panelSection}>
+              <button
+                className={styles.openDetailLink}
+                onClick={() => navigate(`/exchanges/${selectedExchange.id}`)}
+              >
+                Open full details &#x2192;
+              </button>
+            </div>
+
             {/* Overview */}
             <div className={styles.panelSection}>
               <div className={styles.panelSectionTitle}>Overview</div>

src/pages/ExchangeDetail/ExchangeDetail.module.css

@@ -7,7 +7,9 @@
   background: var(--bg-body);
 }
 
-/* Exchange header card */
+/* ==========================================================================
+   EXCHANGE HEADER CARD
+   ========================================================================== */
 .exchangeHeader {
   background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
@@ -88,17 +90,85 @@
   color: var(--text-primary);
 }
 
-/* Section layout */
+/* ==========================================================================
-.section {
+   CORRELATION CHAIN
+   ========================================================================== */
+.correlationChain {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding-top: 12px;
+  margin-top: 12px;
+  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);
+}
+
+/* ==========================================================================
+   TIMELINE SECTION
+   ========================================================================== */
+.timelineSection {
   background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
-  overflow: hidden;
   margin-bottom: 16px;
+  overflow: hidden;
 }
 
-.sectionHeader {
+.timelineHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -106,159 +176,255 @@
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.sectionTitle {
+.timelineTitle {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-primary);
-}
-
-.sectionMeta {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-}
-
-/* Timeline wrapper */
-.timelineWrap {
-  padding: 12px 16px;
-}
-
-/* Inspector steps */
-.inspectorSteps {
-  display: flex;
-  flex-direction: column;
-}
-
-.stepCollapsible {
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.stepCollapsible:last-child {
-  border-bottom: none;
-}
-
-.stepTitle {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
 
-.stepIndex {
+.procCount {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  font-size: 11px;
-  font-weight: 700;
   font-family: var(--font-mono);
-  flex-shrink: 0;
+  font-size: 10px;
-}
-
-.stepOk {
-  background: var(--success-bg);
-  color: var(--success);
-  border: 1px solid var(--success-border);
-}
-
-.stepSlow {
-  background: var(--warning-bg);
-  color: var(--warning);
-  border: 1px solid var(--warning-border);
-}
-
-.stepFail {
-  background: var(--error-bg);
-  color: var(--error);
-  border: 1px solid var(--error-border);
-}
-
-.stepName {
-  font-size: 12px;
   font-weight: 500;
-  font-family: var(--font-mono);
+  padding: 1px 8px;
-  color: var(--text-primary);
+  border-radius: 10px;
-  flex: 1;
+  background: var(--bg-inset);
-}
-
-.stepDuration {
-  font-size: 11px;
-  font-family: var(--font-mono);
   color: var(--text-muted);
-  margin-left: auto;
-  flex-shrink: 0;
 }
 
-/* Step body (two-column layout) */
+.timelineToggle {
-.stepBody {
+  display: inline-flex;
-  display: grid;
+  gap: 0;
-  grid-template-columns: 1fr 2fr;
+  border: 1px solid var(--border-subtle);
-  gap: 12px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.toggleBtn {
+  padding: 4px 12px;
+  font-size: 11px;
+  font-family: var(--font-body);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.12s;
+}
+
+.toggleBtn:hover {
+  background: var(--bg-hover);
+}
+
+.toggleBtnActive {
+  background: var(--amber);
+  color: #fff;
+  font-weight: 600;
+}
+
+.toggleBtnActive:hover {
+  background: var(--amber-deep);
+}
+
+.timelineBody {
   padding: 12px 16px;
-  background: var(--bg-raised);
 }
 
-.stepPanel {
+/* ==========================================================================
+   DETAIL SPLIT (IN / OUT panels)
+   ========================================================================== */
+.detailSplit {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.detailPanel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.detailPanelError {
+  border-color: var(--error-border);
+}
+
+.panelHeader {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-raised);
+  gap: 8px;
+}
+
+.detailPanelError .panelHeader {
+  background: var(--error-bg);
+  border-bottom-color: var(--error-border);
+}
+
+.panelTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   gap: 6px;
 }
 
-.stepPanelLabel {
+.arrowIn {
+  color: var(--success);
+  font-weight: 700;
+}
+
+.arrowOut {
+  color: var(--running);
+  font-weight: 700;
+}
+
+.arrowError {
+  color: var(--error);
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.panelTag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.panelBody {
+  padding: 16px;
+}
+
+/* Headers section */
+.headersSection {
+  margin-bottom: 12px;
+}
+
+.headerList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.headerKvRow {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 11px;
+}
+
+.headerKvRow:last-child {
+  border-bottom: none;
+}
+
+.headerKey {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.headerValue {
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Body section */
+.bodySection {
+  margin-top: 12px;
+}
+
+.sectionLabel {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--text-muted);
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.codeBlock {
+.count {
-  flex: 1;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-/* Error section */
-.errorSection {
-  background: var(--error-bg);
-  border: 1px solid var(--error-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-  margin-bottom: 16px;
-}
-
-.errorBody {
-  padding: 16px;
-}
-
-.errorClass {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: 700;
+  padding: 0 5px;
-  color: var(--error);
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: var(--text-faint);
+}
+
+/* Error panel styles */
+.errorBadgeRow {
+  display: flex;
+  gap: 8px;
   margin-bottom: 8px;
 }
 
-.errorMessage {
+.errorHttpBadge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid var(--error-border);
+}
+
+.errorMessageBox {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--text-secondary);
-  background: var(--bg-surface);
+  background: var(--error-bg);
-  border: 1px solid var(--error-border);
-  border-radius: var(--radius-sm);
   padding: 10px 12px;
-  white-space: pre-wrap;
+  border-radius: var(--radius-sm);
-  word-break: break-word;
+  border: 1px solid var(--error-border);
+  margin-bottom: 12px;
   line-height: 1.5;
-  margin-bottom: 8px;
+  word-break: break-word;
+  white-space: pre-wrap;
 }
 
-.errorHint {
+.errorDetailGrid {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 4px 12px;
   font-size: 11px;
-  color: var(--text-muted);
+}
-  display: flex;
+
-  align-items: center;
+.errorDetailLabel {
-  gap: 5px;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.errorDetailValue {
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  word-break: break-all;
 }

src/pages/ExchangeDetail/ExchangeDetail.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useState, useMemo } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import styles from './ExchangeDetail.module.css'
 
@@ -10,12 +10,13 @@ import { TopBar } from '../../design-system/layout/TopBar/TopBar'
 // Composites
 import { ProcessorTimeline } from '../../design-system/composites/ProcessorTimeline/ProcessorTimeline'
 import type { ProcessorStep } from '../../design-system/composites/ProcessorTimeline/ProcessorTimeline'
+import { RouteFlow } from '../../design-system/composites/RouteFlow/RouteFlow'
+import type { RouteNode } from '../../design-system/composites/RouteFlow/RouteFlow'
 
 // Primitives
 import { Badge } from '../../design-system/primitives/Badge/Badge'
 import { StatusDot } from '../../design-system/primitives/StatusDot/StatusDot'
 import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
-import { Collapsible } from '../../design-system/primitives/Collapsible/Collapsible'
 import { CodeBlock } from '../../design-system/primitives/CodeBlock/CodeBlock'
 import { InfoCallout } from '../../design-system/primitives/InfoCallout/InfoCallout'
 
@@ -50,8 +51,7 @@ function statusToLabel(status: 'completed' | 'failed' | 'running' | 'warning'):
   }
 }
 
-// ─── Exchange body mock generator ────────────────────────────────────────────
+// ─── Exchange body mock generators ──────────────────────────────────────────
-// For each processor step, generate a plausible exchange body snapshot
 function generateExchangeSnapshot(
   step: ProcessorStep,
   orderId: string,
@@ -67,7 +67,7 @@ function generateExchangeSnapshot(
   }
 
   const headers: Record<string, string> = {
-    'CamelCorrelationId': `cmr-${Math.random().toString(36).slice(2, 10)}`,
+    'CamelCorrelationId': `cmr-${orderId.toLowerCase().replace('op-', '')}-${stepIndex}`,
     'Content-Type': 'application/json',
     'CamelTimerName': step.name,
     'CamelBreadcrumbId': `${orderId}-${stepIndex}`,
@@ -102,6 +102,61 @@ function generateExchangeSnapshot(
   }
 }
 
+function generateExchangeSnapshotOut(
+  step: ProcessorStep,
+  orderId: string,
+  customer: string,
+  stepIndex: number,
+) {
+  const statusResult = step.status === 'fail' ? 'ERROR' : step.status === 'slow' ? 'SLOW_OK' : 'OK'
+  const baseBody = {
+    orderId,
+    customer,
+    status: statusResult,
+    processorStep: step.name,
+    stepIndex,
+    processed: true,
+  }
+
+  const headers: Record<string, string> = {
+    'CamelCorrelationId': `cmr-${orderId.toLowerCase().replace('op-', '')}-${stepIndex}`,
+    'Content-Type': 'application/json',
+    'CamelTimerName': step.name,
+    'CamelBreadcrumbId': `${orderId}-${stepIndex}`,
+    'CamelProcessedAt': new Date().toISOString(),
+  }
+
+  if (step.type === 'enrich') {
+    const source = step.name.replace('enrich(', '').replace(')', '')
+    return {
+      headers: {
+        ...headers,
+        'enrichedBy': source,
+        'enrichmentComplete': 'true',
+      },
+      body: JSON.stringify({
+        ...baseBody,
+        enrichment: { source: step.name, addedFields: ['customerId', 'address', 'tier'], resolved: true },
+      }, null, 2),
+    }
+  }
+
+  return {
+    headers,
+    body: JSON.stringify(baseBody, null, 2),
+  }
+}
+
+// Map processor types to RouteNode types
+function toRouteNodeType(procType: string): RouteNode['type'] {
+  switch (procType) {
+    case 'consumer': return 'from'
+    case 'transform': return 'process'
+    case 'enrich': return 'process'
+    default: return procType as RouteNode['type']
+  }
+}
+
 // ─── ExchangeDetail component ─────────────────────────────────────────────────
 export function ExchangeDetail() {
   const { id } = useParams<{ id: string }>()
@@ -109,6 +164,35 @@ export function ExchangeDetail() {
 
   const exchange = useMemo(() => exchanges.find((e) => e.id === id), [id])
 
+  // Find correlated exchanges, sorted by start time
+  const correlatedExchanges = useMemo(() => {
+    if (!exchange?.correlationGroup) return []
+    return exchanges
+      .filter((e) => e.correlationGroup === exchange.correlationGroup)
+      .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
+  }, [exchange])
+
+  // Default selected processor: first failed, or 0
+  const defaultIndex = useMemo(() => {
+    if (!exchange) return 0
+    const failIdx = exchange.processors.findIndex((p) => p.status === 'fail')
+    return failIdx >= 0 ? failIdx : 0
+  }, [exchange])
+
+  const [selectedProcessorIndex, setSelectedProcessorIndex] = useState<number>(defaultIndex)
+  const [timelineView, setTimelineView] = useState<'gantt' | 'flow'>('gantt')
+
+  // Build RouteFlow nodes from exchange processors
+  const routeNodes: RouteNode[] = useMemo(() => {
+    if (!exchange) return []
+    return exchange.processors.map((p) => ({
+      name: p.name,
+      type: toRouteNodeType(p.type),
+      durationMs: p.durationMs,
+      status: p.status,
+    }))
+  }, [exchange])
+
   // Not found state
   if (!exchange) {
     return (
@@ -124,7 +208,6 @@ export function ExchangeDetail() {
             { label: id ?? 'Unknown' },
           ]}
           environment="PRODUCTION"
-
           user={{ name: 'hendrik' }}
         />
         <div className={styles.content}>
@@ -136,6 +219,14 @@ export function ExchangeDetail() {
 
   const statusVariant = statusToVariant(exchange.status)
   const statusLabel = statusToLabel(exchange.status)
+  const selectedProc = exchange.processors[selectedProcessorIndex]
+  const snapshotIn = selectedProc
+    ? generateExchangeSnapshot(selectedProc, exchange.orderId, exchange.customer, selectedProcessorIndex)
+    : null
+  const snapshotOut = selectedProc
+    ? generateExchangeSnapshotOut(selectedProc, exchange.orderId, exchange.customer, selectedProcessorIndex)
+    : null
+  const isSelectedFailed = selectedProc?.status === 'fail'
 
   return (
     <AppShell
@@ -157,7 +248,7 @@ export function ExchangeDetail() {
       {/* Scrollable content */}
       <div className={styles.content}>
 
-        {/* Exchange header */}
+        {/* Exchange header card */}
         <div className={styles.exchangeHeader}>
           <div className={styles.headerRow}>
             <div className={styles.headerLeft}>
@@ -169,9 +260,9 @@ export function ExchangeDetail() {
                 </div>
                 <div className={styles.exchangeRoute}>
                   Route: <span className={styles.routeLink} onClick={() => navigate(`/apps/${ROUTE_TO_APP.get(exchange.route) ?? exchange.route}/${exchange.route}`)}>{exchange.route}</span>
-                  <span className={styles.headerDivider}>·</span>
+                  <span className={styles.headerDivider}>&middot;</span>
                   Order: <MonoText size="xs">{exchange.orderId}</MonoText>
-                  <span className={styles.headerDivider}>·</span>
+                  <span className={styles.headerDivider}>&middot;</span>
                   Customer: <MonoText size="xs">{exchange.customer}</MonoText>
                 </div>
               </div>
@@ -197,98 +288,168 @@ export function ExchangeDetail() {
               </div>
             </div>
           </div>
-        </div>
-
-        {/* Processor timeline */}
-        <div className={styles.section}>
-          <div className={styles.sectionHeader}>
-            <span className={styles.sectionTitle}>Processor Timeline</span>
-            <span className={styles.sectionMeta}>Total: {formatDuration(exchange.durationMs)}</span>
-          </div>
-          <div className={styles.timelineWrap}>
-            <ProcessorTimeline
-              processors={exchange.processors}
-              totalMs={exchange.durationMs}
-            />
-          </div>
-        </div>
-
-        {/* Step-by-step inspector */}
-        <div className={styles.section}>
-          <div className={styles.sectionHeader}>
-            <span className={styles.sectionTitle}>Exchange Inspector</span>
-            <span className={styles.sectionMeta}>{exchange.processors.length} processor steps</span>
-          </div>
-          <div className={styles.inspectorSteps}>
-            {exchange.processors.map((proc, index) => {
-              const snapshot = generateExchangeSnapshot(proc, exchange.orderId, exchange.customer, index)
-              const stepStatusClass =
-                proc.status === 'fail'
-                  ? styles.stepFail
-                  : proc.status === 'slow'
-                    ? styles.stepSlow
-                    : styles.stepOk
 
+          {/* Correlation Chain */}
+          {correlatedExchanges.length > 1 && (
+            <div className={styles.correlationChain}>
+              <span className={styles.chainLabel}>Correlated Exchanges</span>
+              {correlatedExchanges.map((ce) => {
+                const isCurrent = ce.id === exchange.id
+                const variant = statusToVariant(ce.status)
+                const statusCls =
+                  variant === 'success' ? styles.chainNodeSuccess
+                  : variant === 'error' ? styles.chainNodeError
+                  : variant === 'running' ? styles.chainNodeRunning
+                  : styles.chainNodeWarning
                 return (
-                <Collapsible
+                  <button
-                  key={index}
+                    key={ce.id}
-                  title={
+                    className={`${styles.chainNode} ${statusCls} ${isCurrent ? styles.chainNodeCurrent : ''}`}
-                    <div className={styles.stepTitle}>
+                    onClick={() => {
-                      <span className={`${styles.stepIndex} ${stepStatusClass}`}>{index + 1}</span>
+                      if (!isCurrent) navigate(`/exchanges/${ce.id}`)
-                      <span className={styles.stepName}>{proc.name}</span>
+                    }}
-                      <Badge
+                    title={`${ce.id} — ${ce.route}`}
-                        label={proc.status.toUpperCase()}
-                        color={proc.status === 'fail' ? 'error' : proc.status === 'slow' ? 'warning' : 'success'}
-                        variant="outlined"
-                      />
-                      <span className={styles.stepDuration}>{formatDuration(proc.durationMs)}</span>
-                    </div>
-                  }
-                  defaultOpen={proc.status === 'fail'}
-                  className={styles.stepCollapsible}
                   >
-                  <div className={styles.stepBody}>
+                    <StatusDot variant={variant} />
-                    <div className={styles.stepPanel}>
+                    <span>{ce.route}</span>
-                      <div className={styles.stepPanelLabel}>Exchange Headers</div>
+                  </button>
-                      <CodeBlock
-                        content={JSON.stringify(snapshot.headers, null, 2)}
-                        language="json"
-                        copyable
-                        className={styles.codeBlock}
-                      />
-                    </div>
-                    <div className={styles.stepPanel}>
-                      <div className={styles.stepPanelLabel}>Exchange Body</div>
-                      <CodeBlock
-                        content={snapshot.body}
-                        language="json"
-                        copyable
-                        className={styles.codeBlock}
-                      />
-                    </div>
-                  </div>
-                </Collapsible>
                 )
               })}
             </div>
+          )}
         </div>
 
-        {/* Error block (if failed) */}
+        {/* Processor Timeline Section */}
-        {exchange.status === 'failed' && exchange.errorMessage && (
+        <div className={styles.timelineSection}>
-          <div className={styles.errorSection}>
+          <div className={styles.timelineHeader}>
-            <div className={styles.sectionHeader}>
+            <span className={styles.timelineTitle}>
-              <span className={styles.sectionTitle}>Error Details</span>
+              Processor Timeline
-              <Badge label="FAILED" color="error" />
+              <span className={styles.procCount}>{exchange.processors.length} processors</span>
-            </div>
+            </span>
-            <div className={styles.errorBody}>
+            <div className={styles.timelineToggle}>
-              <div className={styles.errorClass}>{exchange.errorClass}</div>
+              <button
-              <pre className={styles.errorMessage}>{exchange.errorMessage}</pre>
+                className={`${styles.toggleBtn} ${timelineView === 'gantt' ? styles.toggleBtnActive : ''}`}
-              <div className={styles.errorHint}>
+                onClick={() => setTimelineView('gantt')}
-                Failed at processor: <MonoText size="xs">
+              >
-                  {exchange.processors.find((p) => p.status === 'fail')?.name ?? 'unknown'}
+                Timeline
-                </MonoText>
+              </button>
+              <button
+                className={`${styles.toggleBtn} ${timelineView === 'flow' ? styles.toggleBtnActive : ''}`}
+                onClick={() => setTimelineView('flow')}
+              >
+                Flow
+              </button>
             </div>
           </div>
+          <div className={styles.timelineBody}>
+            {timelineView === 'gantt' ? (
+              <ProcessorTimeline
+                processors={exchange.processors}
+                totalMs={exchange.durationMs}
+                onProcessorClick={(_proc, index) => setSelectedProcessorIndex(index)}
+                selectedIndex={selectedProcessorIndex}
+              />
+            ) : (
+              <RouteFlow
+                nodes={routeNodes}
+                onNodeClick={(_node, index) => setSelectedProcessorIndex(index)}
+                selectedIndex={selectedProcessorIndex}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Processor Detail Panel (split IN / OUT) */}
+        {selectedProc && snapshotIn && snapshotOut && (
+          <div className={styles.detailSplit}>
+            {/* Message IN */}
+            <div className={styles.detailPanel}>
+              <div className={styles.panelHeader}>
+                <span className={styles.panelTitle}>
+                  <span className={styles.arrowIn}>&rarr;</span> Message IN
+                </span>
+                <span className={styles.panelTag}>at processor #{selectedProcessorIndex + 1} entry</span>
+              </div>
+              <div className={styles.panelBody}>
+                <div className={styles.headersSection}>
+                  <div className={styles.sectionLabel}>
+                    Headers <span className={styles.count}>{Object.keys(snapshotIn.headers).length}</span>
+                  </div>
+                  <div className={styles.headerList}>
+                    {Object.entries(snapshotIn.headers).map(([key, value]) => (
+                      <div key={key} className={styles.headerKvRow}>
+                        <span className={styles.headerKey}>{key}</span>
+                        <span className={styles.headerValue}>{value}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className={styles.bodySection}>
+                  <div className={styles.sectionLabel}>Body</div>
+                  <CodeBlock content={snapshotIn.body} language="json" copyable />
+                </div>
+              </div>
+            </div>
+
+            {/* Message OUT or Error */}
+            {isSelectedFailed ? (
+              <div className={`${styles.detailPanel} ${styles.detailPanelError}`}>
+                <div className={styles.panelHeader}>
+                  <span className={styles.panelTitle}>
+                    <span className={styles.arrowError}>&times;</span> Error at Processor #{selectedProcessorIndex + 1}
+                  </span>
+                  <Badge label="FAILED" color="error" variant="filled" />
+                </div>
+                <div className={styles.panelBody}>
+                  {exchange.errorClass && (
+                    <div className={styles.errorBadgeRow}>
+                      <span className={styles.errorHttpBadge}>{exchange.errorClass.split('.').pop()}</span>
+                    </div>
+                  )}
+                  {exchange.errorMessage && (
+                    <div className={styles.errorMessageBox}>{exchange.errorMessage}</div>
+                  )}
+                  <div className={styles.errorDetailGrid}>
+                    <span className={styles.errorDetailLabel}>Error Class</span>
+                    <span className={styles.errorDetailValue}>{exchange.errorClass ?? 'Unknown'}</span>
+                    <span className={styles.errorDetailLabel}>Processor</span>
+                    <span className={styles.errorDetailValue}>{selectedProc.name}</span>
+                    <span className={styles.errorDetailLabel}>Duration</span>
+                    <span className={styles.errorDetailValue}>{formatDuration(selectedProc.durationMs)}</span>
+                    <span className={styles.errorDetailLabel}>Status</span>
+                    <span className={styles.errorDetailValue}>{selectedProc.status.toUpperCase()}</span>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className={styles.detailPanel}>
+                <div className={styles.panelHeader}>
+                  <span className={styles.panelTitle}>
+                    <span className={styles.arrowOut}>&larr;</span> Message OUT
+                  </span>
+                  <span className={styles.panelTag}>after processor #{selectedProcessorIndex + 1}</span>
+                </div>
+                <div className={styles.panelBody}>
+                  <div className={styles.headersSection}>
+                    <div className={styles.sectionLabel}>
+                      Headers <span className={styles.count}>{Object.keys(snapshotOut.headers).length}</span>
+                    </div>
+                    <div className={styles.headerList}>
+                      {Object.entries(snapshotOut.headers).map(([key, value]) => (
+                        <div key={key} className={styles.headerKvRow}>
+                          <span className={styles.headerKey}>{key}</span>
+                          <span className={styles.headerValue}>{value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div className={styles.bodySection}>
+                    <div className={styles.sectionLabel}>Body</div>
+                    <CodeBlock content={snapshotOut.body} language="json" copyable />
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         )}