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/design-system/composites/DetailPanel/DetailPanel.tsx

@@ -11,15 +11,16 @@ interface DetailPanelProps {
   open: boolean
   onClose: () => void
   title: string
-  tabs: Tab[]
+  tabs?: Tab[]
+  children?: ReactNode
   actions?: ReactNode
   className?: string
 }
 
-export function DetailPanel({ open, onClose, title, tabs, actions, className }: DetailPanelProps) {
-  const [activeTab, setActiveTab] = useState(tabs[0]?.value ?? '')
+export function DetailPanel({ open, onClose, title, tabs, children, actions, className }: DetailPanelProps) {
+  const [activeTab, setActiveTab] = useState(tabs?.[0]?.value ?? '')
 
-  const activeContent = tabs.find((t) => t.value === activeTab)?.content
+  const activeContent = tabs?.find((t) => t.value === activeTab)?.content
 
   return (
     <aside
@@ -38,7 +39,7 @@ export function DetailPanel({ open, onClose, title, tabs, actions, className }:
         </button>
       </div>
 
-      {tabs.length > 0 && (
+      {tabs && tabs.length > 0 && (
         <div className={styles.tabs}>
           {tabs.map((tab) => (
             <button
@@ -54,7 +55,7 @@ export function DetailPanel({ open, onClose, title, tabs, actions, className }:
       )}
 
       <div className={styles.body}>
-        {activeContent}
+        {children ?? activeContent}
       </div>
 
       {actions && (

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

@@ -0,0 +1,192 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  padding: 12px 0;
+}
+
+/* Processor node */
+.node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  cursor: default;
+  transition: all 0.12s;
+  position: relative;
+}
+
+.node:hover {
+  box-shadow: var(--shadow-sm);
+  border-color: var(--text-faint);
+}
+
+.nodeHealthy {
+  border-left: 3px solid var(--success);
+}
+
+.nodeSlow {
+  border-left: 3px solid var(--warning);
+}
+
+.nodeError {
+  border-left: 3px solid var(--error);
+}
+
+.nodeBottleneck {
+  border-left: 3px solid var(--error);
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+}
+
+/* Icon */
+.icon {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.iconFrom {
+  background: var(--running-bg);
+  color: var(--running);
+}
+
+.iconProcess {
+  background: var(--amber-bg);
+  color: var(--amber);
+}
+
+.iconTo {
+  background: var(--success-bg);
+  color: var(--success);
+}
+
+.iconChoice {
+  background: #F3EEFA;
+  color: #7C3AED;
+}
+
+.iconErrorHandler {
+  background: var(--error-bg);
+  color: var(--error);
+}
+
+[data-theme="dark"] .iconChoice {
+  background: rgba(124, 58, 237, 0.15);
+}
+
+/* Node info */
+.info {
+  flex: 1;
+  min-width: 0;
+}
+
+.type {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Node stats */
+.stats {
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.duration {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.durFast {
+  color: var(--success);
+}
+
+.durNormal {
+  color: var(--text-primary);
+}
+
+.durSlow {
+  color: var(--warning);
+}
+
+.durBreach {
+  color: var(--error);
+}
+
+/* Connector */
+.connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 16px;
+}
+
+.connectorLine {
+  width: 1px;
+  flex: 1;
+  background: var(--border);
+}
+
+.connectorArrow {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid var(--border);
+}
+
+/* Error handler section */
+.errorSection {
+  width: 100%;
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--border);
+}
+
+.errorLabel {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--error);
+  margin-bottom: 6px;
+  padding-left: 2px;
+}
+
+/* Bottleneck badge */
+.bottleneckBadge {
+  position: absolute;
+  top: -7px;
+  right: 8px;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--error);
+  color: #fff;
+  letter-spacing: 0.3px;
+}

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

@@ -0,0 +1,108 @@
+import styles from './RouteFlow.module.css'
+
+export interface RouteNode {
+  name: string
+  type: 'from' | 'process' | 'to' | 'choice' | 'error-handler'
+  durationMs: number
+  status: 'ok' | 'slow' | 'fail'
+  isBottleneck?: boolean
+}
+
+interface RouteFlowProps {
+  nodes: RouteNode[]
+  className?: string
+}
+
+function formatDuration(ms: number): string {
+  if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`
+  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`
+  return `${ms}ms`
+}
+
+function durationClass(ms: number, status: string): string {
+  if (status === 'fail') return styles.durBreach
+  if (ms < 50) return styles.durFast
+  if (ms < 150) return styles.durNormal
+  if (ms < 300) return styles.durSlow
+  return styles.durBreach
+}
+
+const TYPE_ICONS: Record<string, string> = {
+  'from': '\u25B6',
+  'process': '\u2699',
+  'to': '\u25A2',
+  'choice': '\u25C6',
+  'error-handler': '\u26A0',
+}
+
+const ICON_CLASSES: Record<string, string> = {
+  'from': styles.iconFrom,
+  'process': styles.iconProcess,
+  'to': styles.iconTo,
+  'choice': styles.iconChoice,
+  'error-handler': styles.iconErrorHandler,
+}
+
+function nodeStatusClass(node: RouteNode): string {
+  if (node.isBottleneck) return styles.nodeBottleneck
+  if (node.status === 'fail') return styles.nodeError
+  if (node.status === 'slow') return styles.nodeSlow
+  return styles.nodeHealthy
+}
+
+export function RouteFlow({ nodes, className }: RouteFlowProps) {
+  const mainNodes = nodes.filter((n) => n.type !== 'error-handler')
+  const errorHandlers = nodes.filter((n) => n.type === 'error-handler')
+
+  return (
+    <div className={`${styles.wrapper} ${className ?? ''}`}>
+      {mainNodes.map((node, i) => (
+        <div key={i} style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          {i > 0 && (
+            <div className={styles.connector}>
+              <div className={styles.connectorLine} />
+              <div className={styles.connectorArrow} />
+            </div>
+          )}
+          <div className={`${styles.node} ${nodeStatusClass(node)}`}>
+            {node.isBottleneck && <span className={styles.bottleneckBadge}>BOTTLENECK</span>}
+            <div className={`${styles.icon} ${ICON_CLASSES[node.type] ?? styles.iconTo}`}>
+              {TYPE_ICONS[node.type] ?? '\u25A2'}
+            </div>
+            <div className={styles.info}>
+              <div className={styles.type}>{node.type}</div>
+              <div className={styles.label} title={node.name}>{node.name}</div>
+            </div>
+            <div className={styles.stats}>
+              <div className={`${styles.duration} ${durationClass(node.durationMs, node.status)}`}>
+                {formatDuration(node.durationMs)}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {errorHandlers.length > 0 && (
+        <div className={styles.errorSection}>
+          <div className={styles.errorLabel}>Error Handler</div>
+          {errorHandlers.map((node, i) => (
+            <div key={i} className={`${styles.node} ${styles.nodeError}`}>
+              <div className={`${styles.icon} ${styles.iconErrorHandler}`}>
+                {TYPE_ICONS['error-handler']}
+              </div>
+              <div className={styles.info}>
+                <div className={styles.type}>{node.type}</div>
+                <div className={styles.label} title={node.name}>{node.name}</div>
+              </div>
+              <div className={styles.stats}>
+                <div className={`${styles.duration} ${durationClass(node.durationMs, node.status)}`}>
+                  {formatDuration(node.durationMs)}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/design-system/composites/index.ts

@@ -24,6 +24,8 @@ export type { MultiSelectOption } from './MultiSelect/MultiSelect'
 export { Popover } from './Popover/Popover'
 export { ProcessorTimeline } from './ProcessorTimeline/ProcessorTimeline'
 export type { ProcessorStep } from './ProcessorTimeline/ProcessorTimeline'
+export { RouteFlow } from './RouteFlow/RouteFlow'
+export type { RouteNode } from './RouteFlow/RouteFlow'
 export { ShortcutsBar } from './ShortcutsBar/ShortcutsBar'
 export { SegmentedTabs } from './SegmentedTabs/SegmentedTabs'
 export { Tabs } from './Tabs/Tabs'

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"