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.module.css

@@ -146,12 +146,46 @@
   margin-top: 3px;
 }
 
-/* Detail panel: overview tab */
-.overviewTab {
-  padding: 16px;
+/* Detail panel sections */
+.panelSection {
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.panelSection:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.panelSectionTitle {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.panelSectionMeta {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text-faint);
+}
+
+/* Overview grid */
+.overviewGrid {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .overviewRow {
@@ -166,17 +200,17 @@
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--text-muted);
-  width: 100px;
+  width: 90px;
   flex-shrink: 0;
   padding-top: 2px;
 }
 
+/* Error block */
 .errorBlock {
   background: var(--error-bg);
   border: 1px solid var(--error-border);
   border-radius: var(--radius-sm);
   padding: 10px 12px;
-  margin-top: 4px;
 }
 
 .errorClass {
@@ -184,7 +218,7 @@
   font-size: 10px;
   font-weight: 600;
   color: var(--error);
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 
 .errorMessage {
@@ -192,40 +226,5 @@
   color: var(--text-secondary);
   line-height: 1.5;
   font-family: var(--font-mono);
-}
-
-/* Detail panel: processors tab */
-.processorsTab {
-  padding: 16px;
-}
-
-/* Detail panel: exchange tab */
-.exchangeTab {
-  padding: 16px;
-}
-
-/* Detail panel: error tab */
-.errorTab {
-  padding: 16px;
-}
-
-.emptyTabMsg {
-  font-size: 12px;
-  color: var(--text-muted);
-  text-align: center;
-  padding: 40px 0;
-}
-
-.errorPre {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--error);
-  background: var(--error-bg);
-  border: 1px solid var(--error-border);
-  border-radius: var(--radius-sm);
-  padding: 12px;
-  white-space: pre-wrap;
   word-break: break-word;
-  line-height: 1.5;
-  margin-top: 8px;
 }

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

src/pages/Inventory/Inventory.tsx

@@ -68,6 +68,7 @@ const NAV_SECTIONS = [
       { label: 'MultiSelect', href: '#multi-select' },
       { label: 'Popover', href: '#popover' },
       { label: 'ProcessorTimeline', href: '#processortimeline' },
+      { label: 'RouteFlow', href: '#routeflow' },
       { label: 'SegmentedTabs', href: '#segmented-tabs' },
       { label: 'ShortcutsBar', href: '#shortcutsbar' },
       { label: 'Tabs', href: '#tabs' },

src/pages/Inventory/sections/CompositesSection.tsx

@@ -21,6 +21,7 @@ import {
   MultiSelect,
   Popover,
   ProcessorTimeline,
+  RouteFlow,
   SegmentedTabs,
   ShortcutsBar,
   Tabs,
@@ -607,6 +608,28 @@ export function CompositesSection() {
           </div>
         </DemoCard>
 
+        {/* 17b. RouteFlow */}
+        <DemoCard
+          id="routeflow"
+          title="RouteFlow"
+          description="Vertical processor node diagram showing route execution flow with status coloring and connectors."
+        >
+          <div style={{ width: '100%', maxWidth: 360 }}>
+            <RouteFlow
+              nodes={[
+                { name: 'jms:orders', type: 'from', durationMs: 4, status: 'ok' },
+                { name: 'OrderValidator', type: 'process', durationMs: 8, status: 'ok' },
+                { name: 'sql:INSERT INTO orders', type: 'to', durationMs: 24, status: 'ok' },
+                { name: 'header.priority == HIGH', type: 'choice', durationMs: 1, status: 'ok' },
+                { name: 'http:payment-api/charge', type: 'to', durationMs: 187, status: 'slow', isBottleneck: true },
+                { name: 'ResponseMapper', type: 'process', durationMs: 3, status: 'ok' },
+                { name: 'kafka:order-completed', type: 'to', durationMs: 11, status: 'ok' },
+                { name: 'dead-letter:failed-orders', type: 'error-handler', durationMs: 14, status: 'fail' },
+              ]}
+            />
+          </div>
+        </DemoCard>
+
         {/* 18. ShortcutsBar */}
         <DemoCard
           id="shortcutsbar"