feat: add RouteFlow component and replace tabbed exchange detail with stacked layout

Replace the 4-tab DetailPanel (Overview/Processors/Exchange/Error) with a
single scrollable view: overview, errors (limited to 1 with +N indicator),
route flow diagram, and processor timeline. DetailPanel now supports
children as an alternative to tabs.

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

src/pages/Dashboard/Dashboard.tsx

@@ -13,6 +13,8 @@ import type { Column } from '../../design-system/composites/DataTable/types'
 import { DetailPanel } from '../../design-system/composites/DetailPanel/DetailPanel'
 import { ShortcutsBar } from '../../design-system/composites/ShortcutsBar/ShortcutsBar'
 import { ProcessorTimeline } 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 { StatCard } from '../../design-system/primitives/StatCard/StatCard'
@@ -191,98 +193,33 @@ export function Dashboard() {
     return undefined
   }
 
-  // Build detail panel tabs for selected exchange
-  const detailTabs = selectedExchange
-    ? [
-        {
-          label: 'Overview',
-          value: 'overview',
-          content: (
-            <div className={styles.overviewTab}>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Order ID</span>
-                <MonoText size="sm">{selectedExchange.orderId}</MonoText>
-              </div>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Route</span>
-                <span>{selectedExchange.route}</span>
-              </div>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Status</span>
-                <span className={styles.statusCell}>
-                  <StatusDot variant={statusToVariant(selectedExchange.status)} />
-                  <span>{statusLabel(selectedExchange.status)}</span>
-                </span>
-              </div>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Duration</span>
-                <MonoText size="sm">{formatDuration(selectedExchange.durationMs)}</MonoText>
-              </div>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Customer</span>
-                <MonoText size="sm">{selectedExchange.customer}</MonoText>
-              </div>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Agent</span>
-                <MonoText size="sm">{selectedExchange.agent}</MonoText>
-              </div>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Correlation ID</span>
-                <MonoText size="xs">{selectedExchange.correlationId}</MonoText>
-              </div>
-              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Timestamp</span>
-                <MonoText size="xs">{selectedExchange.timestamp.toISOString()}</MonoText>
-              </div>
-              {selectedExchange.errorMessage && (
-                <div className={styles.errorBlock}>
-                  <div className={styles.errorClass}>{selectedExchange.errorClass}</div>
-                  <div className={styles.errorMessage}>{selectedExchange.errorMessage}</div>
-                </div>
-              )}
-            </div>
-          ),
-        },
-        {
-          label: 'Processors',
-          value: 'processors',
-          content: (
-            <div className={styles.processorsTab}>
-              <ProcessorTimeline
-                processors={selectedExchange.processors}
-                totalMs={selectedExchange.durationMs}
-              />
-            </div>
-          ),
-        },
-        {
-          label: 'Exchange',
-          value: 'exchange',
-          content: (
-            <div className={styles.exchangeTab}>
-              <div className={styles.emptyTabMsg}>Exchange snapshot not available in mock mode.</div>
-            </div>
-          ),
-        },
-        {
-          label: 'Error',
-          value: 'error',
-          content: (
-            <div className={styles.errorTab}>
-              {selectedExchange.errorMessage ? (
-                <>
-                  <div className={styles.errorClass}>{selectedExchange.errorClass}</div>
-                  <pre className={styles.errorPre}>{selectedExchange.errorMessage}</pre>
-                </>
-              ) : (
-                <div className={styles.emptyTabMsg}>No error for this exchange.</div>
-              )}
-            </div>
-          ),
-        },
-      ]
+  // 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']
+    }
+  }
+
+  // Build RouteFlow nodes from exchange processors
+  const routeNodes: RouteNode[] = selectedExchange
+    ? selectedExchange.processors.map((p) => ({
+        name: p.name,
+        type: toRouteNodeType(p.type),
+        durationMs: p.durationMs,
+        status: p.status,
+      }))
     : []
 
+  // Collect errors from processors
+  const processorErrors = selectedExchange
+    ? selectedExchange.processors.filter((p) => p.status === 'fail')
+    : []
+  const hasExchangeError = selectedExchange?.errorMessage != null
+  const totalErrors = processorErrors.length + (hasExchangeError && processorErrors.length === 0 ? 1 : 0)
+
   return (
     <AppShell
       sidebar={
@@ -294,8 +231,83 @@ export function Dashboard() {
             open={panelOpen}
             onClose={() => setPanelOpen(false)}
             title={`${selectedExchange.orderId} — ${selectedExchange.route}`}
-            tabs={detailTabs}
-          />
+          >
+            {/* Overview */}
+            <div className={styles.panelSection}>
+              <div className={styles.panelSectionTitle}>Overview</div>
+              <div className={styles.overviewGrid}>
+                <div className={styles.overviewRow}>
+                  <span className={styles.overviewLabel}>Status</span>
+                  <span className={styles.statusCell}>
+                    <StatusDot variant={statusToVariant(selectedExchange.status)} />
+                    <span>{statusLabel(selectedExchange.status)}</span>
+                  </span>
+                </div>
+                <div className={styles.overviewRow}>
+                  <span className={styles.overviewLabel}>Duration</span>
+                  <MonoText size="sm">{formatDuration(selectedExchange.durationMs)}</MonoText>
+                </div>
+                <div className={styles.overviewRow}>
+                  <span className={styles.overviewLabel}>Route</span>
+                  <span>{selectedExchange.route}</span>
+                </div>
+                <div className={styles.overviewRow}>
+                  <span className={styles.overviewLabel}>Customer</span>
+                  <MonoText size="sm">{selectedExchange.customer}</MonoText>
+                </div>
+                <div className={styles.overviewRow}>
+                  <span className={styles.overviewLabel}>Agent</span>
+                  <MonoText size="sm">{selectedExchange.agent}</MonoText>
+                </div>
+                <div className={styles.overviewRow}>
+                  <span className={styles.overviewLabel}>Correlation</span>
+                  <MonoText size="xs">{selectedExchange.correlationId}</MonoText>
+                </div>
+                <div className={styles.overviewRow}>
+                  <span className={styles.overviewLabel}>Timestamp</span>
+                  <MonoText size="xs">{selectedExchange.timestamp.toISOString()}</MonoText>
+                </div>
+              </div>
+            </div>
+
+            {/* Errors */}
+            {totalErrors > 0 && (
+              <div className={styles.panelSection}>
+                <div className={styles.panelSectionTitle}>
+                  Errors
+                  {totalErrors > 1 && (
+                    <Badge label={`+${totalErrors - 1} more`} color="error" variant="outlined" />
+                  )}
+                </div>
+                <div className={styles.errorBlock}>
+                  <div className={styles.errorClass}>
+                    {selectedExchange.errorClass ?? processorErrors[0]?.name}
+                  </div>
+                  <div className={styles.errorMessage}>
+                    {selectedExchange.errorMessage ?? `Failed at processor: ${processorErrors[0]?.name}`}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Route Flow */}
+            <div className={styles.panelSection}>
+              <div className={styles.panelSectionTitle}>Route Flow</div>
+              <RouteFlow nodes={routeNodes} />
+            </div>
+
+            {/* Processor Timeline */}
+            <div className={styles.panelSection}>
+              <div className={styles.panelSectionTitle}>
+                Processor Timeline
+                <span className={styles.panelSectionMeta}>{formatDuration(selectedExchange.durationMs)}</span>
+              </div>
+              <ProcessorTimeline
+                processors={selectedExchange.processors}
+                totalMs={selectedExchange.durationMs}
+              />
+            </div>
+          </DetailPanel>
         ) : undefined
       }
     >