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/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 ────────────────────────────────────────────
-// For each processor step, generate a plausible exchange body snapshot
+// ─── Exchange body mock generators ──────────────────────────────────────────
 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
-
-              return (
-                <Collapsible
-                  key={index}
-                  title={
-                    <div className={styles.stepTitle}>
-                      <span className={`${styles.stepIndex} ${stepStatusClass}`}>{index + 1}</span>
-                      <span className={styles.stepName}>{proc.name}</span>
-                      <Badge
-                        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}>
-                    <div className={styles.stepPanel}>
-                      <div className={styles.stepPanelLabel}>Exchange Headers</div>
-                      <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) */}
-        {exchange.status === 'failed' && exchange.errorMessage && (
-          <div className={styles.errorSection}>
-            <div className={styles.sectionHeader}>
-              <span className={styles.sectionTitle}>Error Details</span>
-              <Badge label="FAILED" color="error" />
+          {/* 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 (
+                  <button
+                    key={ce.id}
+                    className={`${styles.chainNode} ${statusCls} ${isCurrent ? styles.chainNodeCurrent : ''}`}
+                    onClick={() => {
+                      if (!isCurrent) navigate(`/exchanges/${ce.id}`)
+                    }}
+                    title={`${ce.id} — ${ce.route}`}
+                  >
+                    <StatusDot variant={variant} />
+                    <span>{ce.route}</span>
+                  </button>
+                )
+              })}
             </div>
-            <div className={styles.errorBody}>
-              <div className={styles.errorClass}>{exchange.errorClass}</div>
-              <pre className={styles.errorMessage}>{exchange.errorMessage}</pre>
-              <div className={styles.errorHint}>
-                Failed at processor: <MonoText size="xs">
-                  {exchange.processors.find((p) => p.status === 'fail')?.name ?? 'unknown'}
-                </MonoText>
+          )}
+        </div>
+
+        {/* Processor Timeline Section */}
+        <div className={styles.timelineSection}>
+          <div className={styles.timelineHeader}>
+            <span className={styles.timelineTitle}>
+              Processor Timeline
+              <span className={styles.procCount}>{exchange.processors.length} processors</span>
+            </span>
+            <div className={styles.timelineToggle}>
+              <button
+                className={`${styles.toggleBtn} ${timelineView === 'gantt' ? styles.toggleBtnActive : ''}`}
+                onClick={() => setTimelineView('gantt')}
+              >
+                Timeline
+              </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>
         )}