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/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"