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/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 },