From d229365eafd0a2af91fc767004e6f531a300ae7c Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 13 Mar 2026 10:52:43 +0100
Subject: [PATCH] added examples

---
 examples/DESIGN-SYSTEM.md                |  186 +++
 examples/cmd-k-search-example.html       | 1010 ++++++++++++++++
 examples/cmd-k-search-light.html         | 1012 ++++++++++++++++
 examples/dashboard-light.html            | 1128 +++++++++++++++++
 examples/dashboard.html                  | 1125 +++++++++++++++++
 examples/route-detail-light.html         | 1408 ++++++++++++++++++++++
 examples/route-detail.html               | 1403 +++++++++++++++++++++
 examples/route-diagram-example.html      | 1336 ++++++++++++++++++++
 examples/route-diagram-light.html        | 1341 +++++++++++++++++++++
 examples/transaction-explorer-light.html | 1309 ++++++++++++++++++++
 examples/transaction-explorer.html       | 1304 ++++++++++++++++++++
 11 files changed, 12562 insertions(+)
 create mode 100644 examples/DESIGN-SYSTEM.md
 create mode 100644 examples/cmd-k-search-example.html
 create mode 100644 examples/cmd-k-search-light.html
 create mode 100644 examples/dashboard-light.html
 create mode 100644 examples/dashboard.html
 create mode 100644 examples/route-detail-light.html
 create mode 100644 examples/route-detail.html
 create mode 100644 examples/route-diagram-example.html
 create mode 100644 examples/route-diagram-light.html
 create mode 100644 examples/transaction-explorer-light.html
 create mode 100644 examples/transaction-explorer.html

diff --git a/examples/DESIGN-SYSTEM.md b/examples/DESIGN-SYSTEM.md
new file mode 100644
index 00000000..cf1116fa
--- /dev/null
+++ b/examples/DESIGN-SYSTEM.md
@@ -0,0 +1,186 @@
+# Cameleer3 Design System
+
+## Concept
+
+**"Mission Control"** — industrial-precision meets data-dense observatory. Bloomberg Terminal crossed with a luxury car dashboard. Dark, information-rich, with careful hierarchy and breathing room. Operators monitoring hundreds of systems need density without chaos.
+
+**Signature element**: Subtle topographic/contour pattern background evoking "mapping routes" — because Cameleer maps Camel routes.
+
+## Colors
+
+### Backgrounds
+
+| Token | Hex | Usage |
+|---|---|---|
+| `--bg-deep` | `#060a13` | Page background |
+| `--bg-base` | `#0a0e17` | Recessed areas, inputs |
+| `--bg-surface` | `#111827` | Cards, panels |
+| `--bg-raised` | `#1a2332` | Elevated elements, hovers |
+| `--bg-hover` | `#1e2d3d` | Active hover states |
+
+### Borders
+
+| Token | Hex | Usage |
+|---|---|---|
+| `--border` | `#1e2d3d` | Default borders |
+| `--border-subtle` | `#152030` | Card borders, dividers |
+
+### Text
+
+| Token | Hex | Usage |
+|---|---|---|
+| `--text-primary` | `#e2e8f0` | Headings, primary content |
+| `--text-secondary` | `#8b9cb6` | Body text, values |
+| `--text-muted` | `#4a5e7a` | Labels, hints, metadata |
+
+### Accent Colors
+
+| Token | Hex | Glow | Usage |
+|---|---|---|---|
+| `--amber` | `#f0b429` | `rgba(240, 180, 41, 0.15)` | Primary brand, totals, volume, links |
+| `--cyan` | `#22d3ee` | `rgba(34, 211, 238, 0.12)` | Latency, cross-route refs |
+| `--rose` | `#f43f5e` | `rgba(244, 63, 94, 0.12)` | Errors, failures, slow durations |
+| `--green` | `#10b981` | `rgba(16, 185, 129, 0.12)` | Success, completed, fast durations |
+| `--blue` | `#3b82f6` | — | Running state, endpoints |
+| `--purple` | `#a855f7` | — | EIP nodes, active routes |
+
+Each accent has a `*-dim` variant (e.g. `--amber-dim: #b8860b`) for border accents on active states.
+
+### Semantic Color Mapping
+
+- **Status**: completed → green, failed → rose, running → blue
+- **Duration**: fast (<100ms) → green, medium (100-1000ms) → amber, slow (>1s) → rose
+- **Health**: healthy → green, warning → amber, critical → rose
+- **Node types**: endpoint → blue, processor → green, EIP → purple, cross-route → cyan dashed
+
+## Typography
+
+### Font Stack
+
+| Role | Family | Fallbacks |
+|---|---|---|
+| Body / UI | `DM Sans` | `system-ui, sans-serif` |
+| Data / Code | `JetBrains Mono` | `Fira Code, monospace` |
+
+Load from Google Fonts:
+```html
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+```
+
+### Scale
+
+| Element | Font | Size | Weight | Extras |
+|---|---|---|---|---|
+| Page title | DM Sans | 24px | 700 | `letter-spacing: -0.5px` |
+| Card title | DM Sans | 13px | 600 | — |
+| Section label | DM Sans | 11px | 600 | `uppercase, letter-spacing: 0.8px` |
+| Body text | DM Sans | 14px | 400 | — |
+| Stat value | JetBrains Mono | 26-28px | 600 | `letter-spacing: -1px` |
+| Table data | JetBrains Mono | 12px | 400 | — |
+| Badge/tag | JetBrains Mono | 11px | 500 | — |
+| Tiny label | JetBrains Mono | 9-10px | 400-500 | — |
+
+## Spacing & Radii
+
+| Token | Value | Usage |
+|---|---|---|
+| `--radius-sm` | `6px` | Buttons, inputs, chips |
+| `--radius-md` | `10px` | Small cards, badges |
+| `--radius-lg` | `14px` | Cards, panels, modals |
+| Page padding | `24px` | Main content area |
+| Card padding | `16-20px` | Card header/body |
+| Grid gap | `12-16px` | Between cards |
+
+## Components
+
+### Stat Card
+
+Top-edge colored line (2px gradient from accent to transparent). Label in muted uppercase, value in mono accent color, optional change indicator below.
+
+### Status Pill
+
+Rounded (`99px`), colored background glow + text. Contains a 6px dot + label. Running state dot pulses.
+
+### Filter Chip
+
+Rounded pill, toggleable. Active state uses accent glow background + accent border + accent text. Inactive is raised background with subtle border.
+
+### App Tile
+
+Left-edge 3px color bar (green/amber/rose). Shows app name, route count, failure rate. Hover lifts slightly (`translateY(-1px)`).
+
+### Duration Bar
+
+Inline bar (60px wide, 4px tall) with color-coded fill. Paired with mono duration label.
+
+### Heatmap Cell
+
+Individual cells with amber opacity mapped to intensity (0.02–0.85). Hover scales to 1.3× with amber ring. Tooltip on hover.
+
+## Charts
+
+All charts use inline SVG with:
+- Grid lines: `var(--border-subtle)`, 0.5px
+- Axis labels: `var(--font-mono)`, 10px, `var(--text-muted)`
+- Area fills: linear gradient from accent (15% opacity) to transparent
+- Lines: accent color, 1.5px, round joins
+
+### Sparklines
+
+Tiny (200×24) SVG with polygon fill + polyline stroke. Used in hero stat cards.
+
+## Animations
+
+| Effect | Spec | Usage |
+|---|---|---|
+| Page enter | `fadeIn 0.3s ease-out` with staggered `animation-delay` (0.05s increments) | Page load |
+| Live pulse | `0 → 6px` green box-shadow, 2s infinite | Live indicators, running dots |
+| Hover lift | `translateY(-1px)`, 0.15s | App tiles |
+| Border glow | `border-color` transition, 0.2s | Cards, inputs on hover/focus |
+| Expand arrow | `rotate(90deg)`, 0.2s | Table row expand |
+
+```css
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes livePulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+}
+```
+
+## Background Treatment
+
+Two layers over `--bg-deep`:
+
+1. **Radial gradients** — subtle amber glow top-left (3% opacity), cyan glow bottom-right (2% opacity)
+2. **Topographic SVG pattern** — repeating 400×400 tile of bezier curves in amber/cyan at 2.5% opacity
+
+```css
+body::before {
+  background:
+    radial-gradient(ellipse 800px 400px at 20% 20%, rgba(240, 180, 41, 0.03), transparent),
+    radial-gradient(ellipse 600px 600px at 80% 80%, rgba(34, 211, 238, 0.02), transparent);
+}
+```
+
+## Navigation
+
+Sticky top bar, 56px tall. Glass-morphism: `rgba(6, 10, 19, 0.85)` with `backdrop-filter: blur(20px) saturate(1.2)`. Amber logo (JetBrains Mono, 16px, 600), pill-style nav links, right-aligned environment badge and cluster count.
+
+## Route Diagram
+
+- **Node shapes**: Rounded rects (8px radius, cross-route 14px). Fill from `getNodeColor()`, 1.5px stroke.
+- **Edges**: Bezier curves between node centers. Flow → gray, branch → amber (labeled), cross-route → cyan dashed, error → rose dashed.
+- **Execution overlay** (toggle with `E`): Executed path glows green. Non-executed dims to 15% opacity. Sequence badges (numbered circles) on nodes. Duration pills above nodes.
+- **Arrow markers**: Per-edge-type colored arrowheads.
+
+## Pages
+
+| Page | File | Purpose |
+|---|---|---|
+| Transaction Explorer | `transaction-explorer.html` | Search/filter transactions across all apps |
+| Dashboard | `dashboard.html` | Fleet-wide overview with charts and health grid |
+| Route Detail | `route-detail.html` | Deep dive into single route with diagram and metrics |
diff --git a/examples/cmd-k-search-example.html b/examples/cmd-k-search-example.html
new file mode 100644
index 00000000..0a12d0c3
--- /dev/null
+++ b/examples/cmd-k-search-example.html
@@ -0,0 +1,1010 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Command Search</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --bg-primary: #0d1117;
+    --bg-secondary: #161b22;
+    --bg-tertiary: #1c2128;
+    --bg-overlay: rgba(1, 4, 9, 0.85);
+    --border: #30363d;
+    --border-active: #58a6ff;
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --text-muted: #6e7681;
+    --accent-blue: #58a6ff;
+    --accent-green: #3fb950;
+    --accent-red: #f85149;
+    --accent-orange: #d29922;
+    --accent-purple: #bc8cff;
+    --accent-cyan: #79c0ff;
+    --accent-pink: #f778ba;
+    --shadow-heavy: 0 16px 72px rgba(0,0,0,0.6);
+    --shadow-glow: 0 0 40px rgba(88,166,255,0.08);
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 16px;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slideUp {
+    from { opacity: 0; transform: translateY(20px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  @keyframes pulseGlow {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0); }
+    50% { box-shadow: 0 0 0 4px rgba(88,166,255,0.1); }
+  }
+
+  @keyframes slideInResult {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  body {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: hidden;
+  }
+
+  /* Background mesh gradient */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background:
+      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(88,166,255,0.06), transparent),
+      radial-gradient(ellipse 60% 40% at 80% 60%, rgba(188,140,255,0.04), transparent),
+      radial-gradient(ellipse 50% 50% at 20% 80%, rgba(63,185,80,0.03), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* ── Behind-the-overlay page (blurred app mock) ── */
+  .app-bg {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .app-topbar {
+    height: 48px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    gap: 16px;
+    flex-shrink: 0;
+  }
+
+  .app-topbar .logo {
+    font-weight: 700;
+    font-size: 15px;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .app-topbar .logo svg { width: 22px; height: 22px; }
+
+  .app-topbar .nav-items {
+    display: flex;
+    gap: 4px;
+    margin-left: 12px;
+  }
+
+  .app-topbar .nav-item {
+    padding: 6px 12px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    border-radius: var(--radius-sm);
+    cursor: default;
+  }
+
+  .app-topbar .nav-item.active {
+    color: var(--text-primary);
+    background: rgba(255,255,255,0.06);
+  }
+
+  .app-topbar .search-trigger {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 12px 5px 10px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    font-size: 13px;
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+
+  .app-topbar .search-trigger:hover { border-color: var(--border-active); color: var(--text-secondary); }
+
+  .app-topbar .search-trigger svg { width: 14px; height: 14px; opacity: 0.5; }
+
+  .app-topbar .kbd {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 11px;
+    padding: 1px 5px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+    line-height: 1.4;
+  }
+
+  .app-content {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    overflow: hidden;
+  }
+
+  .app-sidebar {
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border);
+    padding: 16px 12px;
+  }
+
+  .app-sidebar .sidebar-section {
+    margin-bottom: 20px;
+  }
+
+  .app-sidebar .sidebar-title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+    padding: 0 8px;
+  }
+
+  .app-sidebar .sidebar-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    border-radius: var(--radius-sm);
+    cursor: default;
+  }
+
+  .app-sidebar .sidebar-item.active {
+    background: rgba(88,166,255,0.1);
+    color: var(--accent-blue);
+  }
+
+  .app-sidebar .sidebar-item svg { width: 16px; height: 16px; opacity: 0.6; }
+  .app-sidebar .sidebar-item.active svg { opacity: 1; }
+
+  .app-main {
+    padding: 24px 32px;
+    overflow-y: auto;
+  }
+
+  .app-main .page-title {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  .app-main .page-subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-bottom: 24px;
+  }
+
+  /* Fake table rows behind overlay */
+  .app-table-row {
+    display: grid;
+    grid-template-columns: 40px 2fr 1fr 1fr 100px 80px;
+    align-items: center;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+
+  .app-table-row.header {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: var(--text-muted);
+    border-bottom: 2px solid var(--border);
+  }
+
+  .app-table-row .status-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--accent-green);
+  }
+
+  .app-table-row .status-dot.failed { background: var(--accent-red); }
+
+  /* ── Overlay ── */
+  .overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 100;
+    background: var(--bg-overlay);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    display: flex;
+    justify-content: center;
+    padding-top: 12vh;
+    animation: fadeIn 0.15s ease-out;
+  }
+
+  /* ── Search Modal ── */
+  .search-modal {
+    width: 680px;
+    max-height: 520px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-heavy), var(--shadow-glow);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    align-self: flex-start;
+  }
+
+  /* ── Search Input ── */
+  .search-input-wrap {
+    display: flex;
+    align-items: center;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--border);
+    gap: 12px;
+  }
+
+  .search-input-wrap svg {
+    width: 20px;
+    height: 20px;
+    color: var(--accent-blue);
+    flex-shrink: 0;
+    filter: drop-shadow(0 0 6px rgba(88,166,255,0.3));
+  }
+
+  .search-input {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    font-family: inherit;
+    color: var(--text-primary);
+    caret-color: var(--accent-blue);
+  }
+
+  .search-input::placeholder { color: var(--text-muted); }
+
+  .search-input-wrap .input-hint {
+    font-size: 11px;
+    color: var(--text-muted);
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .search-input-wrap .input-hint kbd {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10px;
+    padding: 1px 5px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    line-height: 1.5;
+  }
+
+  /* ── Scope Tabs ── */
+  .scope-tabs {
+    display: flex;
+    padding: 8px 18px 0;
+    gap: 2px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .scope-tab {
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-muted);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .scope-tab:hover { color: var(--text-secondary); }
+
+  .scope-tab.active {
+    color: var(--accent-blue);
+    border-bottom-color: var(--accent-blue);
+  }
+
+  .scope-tab .count {
+    font-size: 10px;
+    padding: 1px 6px;
+    background: rgba(255,255,255,0.06);
+    border-radius: 10px;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+  }
+
+  .scope-tab.active .count {
+    background: rgba(88,166,255,0.15);
+    color: var(--accent-blue);
+  }
+
+  /* ── Results ── */
+  .results {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 8px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+
+  .results::-webkit-scrollbar { width: 6px; }
+  .results::-webkit-scrollbar-track { background: transparent; }
+  .results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+  .result-group-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: var(--text-muted);
+    padding: 10px 12px 4px;
+  }
+
+  .result-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background 0.1s;
+    animation: slideInResult 0.2s ease-out both;
+  }
+
+  .result-item:nth-child(2) { animation-delay: 0.03s; }
+  .result-item:nth-child(3) { animation-delay: 0.06s; }
+  .result-item:nth-child(4) { animation-delay: 0.09s; }
+  .result-item:nth-child(5) { animation-delay: 0.12s; }
+  .result-item:nth-child(6) { animation-delay: 0.15s; }
+
+  .result-item:hover, .result-item.selected {
+    background: rgba(255,255,255,0.04);
+  }
+
+  .result-item.selected {
+    background: rgba(88,166,255,0.08);
+    outline: 1px solid rgba(88,166,255,0.2);
+  }
+
+  .result-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .result-icon svg { width: 18px; height: 18px; }
+
+  .result-icon.execution {
+    background: rgba(88,166,255,0.12);
+    color: var(--accent-blue);
+  }
+
+  .result-icon.route {
+    background: rgba(188,140,255,0.12);
+    color: var(--accent-purple);
+  }
+
+  .result-icon.exchange {
+    background: rgba(121,192,255,0.12);
+    color: var(--accent-cyan);
+  }
+
+  .result-icon.error {
+    background: rgba(248,81,73,0.12);
+    color: var(--accent-red);
+  }
+
+  .result-icon.agent {
+    background: rgba(63,185,80,0.12);
+    color: var(--accent-green);
+  }
+
+  .result-body {
+    flex: 1;
+    min-width: 0;
+    padding-top: 1px;
+  }
+
+  .result-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    line-height: 1.3;
+  }
+
+  .result-title .highlight {
+    color: var(--accent-blue);
+    font-weight: 600;
+  }
+
+  .result-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 3px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .result-meta .sep {
+    width: 3px; height: 3px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+
+  /* Tags / Badges */
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 12px;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .badge.status-completed {
+    background: rgba(63,185,80,0.12);
+    color: var(--accent-green);
+  }
+
+  .badge.status-failed {
+    background: rgba(248,81,73,0.12);
+    color: var(--accent-red);
+  }
+
+  .badge.status-running {
+    background: rgba(210,153,34,0.12);
+    color: var(--accent-orange);
+  }
+
+  .badge.route-tag {
+    background: rgba(188,140,255,0.1);
+    color: var(--accent-purple);
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10.5px;
+  }
+
+  .badge.env-tag {
+    background: rgba(63,185,80,0.1);
+    color: var(--accent-green);
+  }
+
+  .badge.duration {
+    background: rgba(255,255,255,0.06);
+    color: var(--text-secondary);
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10.5px;
+  }
+
+  .result-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+    flex-shrink: 0;
+    padding-top: 2px;
+  }
+
+  .result-time {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    white-space: nowrap;
+  }
+
+  /* Preview Pane (inline) */
+  .result-preview {
+    margin-top: 8px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 10px 12px;
+    font-size: 12px;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    max-height: 120px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .result-preview::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 30px;
+    background: linear-gradient(transparent, var(--bg-tertiary));
+  }
+
+  .result-preview .key { color: var(--accent-cyan); }
+  .result-preview .str { color: var(--accent-green); }
+  .result-preview .num { color: var(--accent-orange); }
+  .result-preview .kw { color: var(--accent-purple); }
+
+  /* ── Footer ── */
+  .search-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 18px;
+    border-top: 1px solid var(--border);
+    background: var(--bg-tertiary);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .footer-hints {
+    display: flex;
+    gap: 16px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .footer-hint {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .footer-hint kbd {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10px;
+    padding: 1px 5px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    line-height: 1.5;
+  }
+
+  .footer-powered {
+    font-size: 11px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .footer-powered svg { width: 14px; height: 14px; color: var(--accent-blue); }
+
+  /* ── Typing cursor ── */
+  .cursor {
+    display: inline-block;
+    width: 2px;
+    height: 18px;
+    background: var(--accent-blue);
+    margin-left: 1px;
+    animation: blink 1s step-end infinite;
+    vertical-align: text-bottom;
+  }
+
+  @keyframes blink {
+    50% { opacity: 0; }
+  }
+
+  /* ── Filter chips in input area ── */
+  .filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    background: rgba(88,166,255,0.12);
+    color: var(--accent-blue);
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+
+  .filter-chip .chip-key {
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  /* ── Responsive ── */
+  @media (max-width: 768px) {
+    .search-modal { width: calc(100vw - 32px); max-height: 70vh; }
+    .app-sidebar { display: none; }
+    .app-content { grid-template-columns: 1fr; }
+    .app-table-row { grid-template-columns: 30px 2fr 1fr 80px; }
+    .app-table-row .hide-mobile { display: none; }
+  }
+</style>
+</head>
+<body>
+
+<!-- Background App UI -->
+<div class="app-bg">
+  <div class="app-topbar">
+    <div class="logo">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+        <path d="M2 17l10 5 10-5"/>
+        <path d="M2 12l10 5 10-5"/>
+      </svg>
+      Cameleer
+    </div>
+    <div class="nav-items">
+      <div class="nav-item active">Dashboard</div>
+      <div class="nav-item">Routes</div>
+      <div class="nav-item">Executions</div>
+      <div class="nav-item">Agents</div>
+    </div>
+    <div class="search-trigger" onclick="void(0)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      Search everything...
+      <kbd class="kbd">&#8984;K</kbd>
+    </div>
+  </div>
+  <div class="app-content">
+    <div class="app-sidebar">
+      <div class="sidebar-section">
+        <div class="sidebar-title">Observe</div>
+        <div class="sidebar-item active">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+          Dashboard
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          Live Trace
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+          Executions
+        </div>
+      </div>
+      <div class="sidebar-section">
+        <div class="sidebar-title">Topology</div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
+          Routes
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
+          Agents
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
+          Diagrams
+        </div>
+      </div>
+      <div class="sidebar-section">
+        <div class="sidebar-title">Investigate</div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+          Errors
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+          Exchanges
+        </div>
+      </div>
+    </div>
+    <div class="app-main">
+      <div class="page-title">Dashboard</div>
+      <div class="page-subtitle">3 agents connected &mdash; 12 routes active &mdash; 1,247 executions/min</div>
+      <div class="app-table-row header">
+        <div></div>
+        <div>Route / Exchange</div>
+        <div>Agent</div>
+        <div class="hide-mobile">Correlation ID</div>
+        <div>Duration</div>
+        <div>Time</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>content-based-routing</div>
+        <div>order-svc-pod-7f8</div>
+        <div class="hide-mobile">cmr-9a4f2b...</div>
+        <div>47ms</div>
+        <div>2s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>timer-heartbeat</div>
+        <div>order-svc-pod-a3b</div>
+        <div class="hide-mobile">cmr-8e3c1a...</div>
+        <div>3ms</div>
+        <div>4s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot failed"></span></div>
+        <div>file-ingest-orders</div>
+        <div>order-svc-pod-7f8</div>
+        <div class="hide-mobile">cmr-7d2b0f...</div>
+        <div>312ms</div>
+        <div>8s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>rest-api-orders</div>
+        <div>order-svc-pod-x9y</div>
+        <div class="hide-mobile">cmr-6c1a9e...</div>
+        <div>128ms</div>
+        <div>11s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>split-order-items</div>
+        <div>order-svc-pod-a3b</div>
+        <div class="hide-mobile">cmr-5b0d8c...</div>
+        <div>89ms</div>
+        <div>15s ago</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- CMD-K Search Overlay -->
+<div class="overlay">
+  <div class="search-modal">
+
+    <!-- Input -->
+    <div class="search-input-wrap">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/>
+        <path d="m21 21-4.35-4.35"/>
+      </svg>
+      <span class="filter-chip"><span class="chip-key">route:</span>order</span>
+      <input class="search-input" type="text" value="PRIORITY" autofocus placeholder="Search executions, routes, exchanges..." />
+      <div class="input-hint">
+        <kbd>esc</kbd> close
+      </div>
+    </div>
+
+    <!-- Scope tabs -->
+    <div class="scope-tabs">
+      <div class="scope-tab active">All <span class="count">14</span></div>
+      <div class="scope-tab">Executions <span class="count">8</span></div>
+      <div class="scope-tab">Routes <span class="count">3</span></div>
+      <div class="scope-tab">Exchanges <span class="count">2</span></div>
+      <div class="scope-tab">Agents <span class="count">1</span></div>
+    </div>
+
+    <!-- Results -->
+    <div class="results">
+      <div class="result-group-label">Executions</div>
+
+      <!-- Result 1 - selected -->
+      <div class="result-item selected">
+        <div class="result-icon execution">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            content-based-routing
+            <span class="badge status-completed">Completed</span>
+            <span class="badge duration">47ms</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-cbr</span>
+            <span class="sep"></span>
+            cmr-9a4f2b71-e8c3
+            <span class="sep"></span>
+            Body matched <span class="result-title"><span class="highlight">PRIORITY</span></span>
+          </div>
+          <div class="result-preview">
+{
+  <span class="key">"routeId"</span>: <span class="str">"content-based-routing"</span>,
+  <span class="key">"exchangeId"</span>: <span class="str">"E-2026-03-08-00142"</span>,
+  <span class="key">"status"</span>: <span class="str">"COMPLETED"</span>,
+  <span class="key">"durationMs"</span>: <span class="num">47</span>,
+  <span class="key">"inputSnapshot"</span>: {
+    <span class="key">"body"</span>: <span class="str">"{\"type\":\"<b class="highlight">PRIORITY</b>\",\"item\":\"Widget-X\",\"qty\":50}"</span>,
+    <span class="key">"headers"</span>: { <span class="key">"Content-Type"</span>: <span class="str">"application/json"</span> }
+  }
+}</div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">2s ago</span>
+        </div>
+      </div>
+
+      <!-- Result 2 -->
+      <div class="result-item">
+        <div class="result-icon error">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            content-based-routing
+            <span class="badge status-failed">Failed</span>
+            <span class="badge duration">312ms</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-cbr</span>
+            <span class="sep"></span>
+            cmr-7d2b0f93-a1d7
+            <span class="sep"></span>
+            NullPointerException in <span class="result-title"><span class="highlight">PRIORITY</span></span> branch
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">8s ago</span>
+        </div>
+      </div>
+
+      <!-- Result 3 -->
+      <div class="result-item">
+        <div class="result-icon execution">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            split-order-items
+            <span class="badge status-completed">Completed</span>
+            <span class="badge duration">89ms</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-split</span>
+            <span class="sep"></span>
+            cmr-9a4f2b71-e8c3
+            <span class="sep"></span>
+            Correlated &mdash; downstream of <span class="result-title"><span class="highlight">PRIORITY</span></span> order
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">2s ago</span>
+        </div>
+      </div>
+
+      <div class="result-group-label">Routes</div>
+
+      <!-- Result 4 -->
+      <div class="result-item">
+        <div class="result-icon route">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            content-based-routing
+            <span class="badge env-tag">production</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-cbr</span>
+            <span class="sep"></span>
+            14 nodes, 14 edges
+            <span class="sep"></span>
+            EIP_CHOICE branches: <span class="result-title"><span class="highlight">PRIORITY</span></span>, STANDARD, BULK
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">Route</span>
+        </div>
+      </div>
+
+      <div class="result-group-label">Exchanges</div>
+
+      <!-- Result 5 -->
+      <div class="result-item">
+        <div class="result-icon exchange">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            E-2026-03-08-00142
+          </div>
+          <div class="result-meta">
+            cmr-9a4f2b71-e8c3
+            <span class="sep"></span>
+            3 route hops
+            <span class="sep"></span>
+            Body: <span class="result-title"><span class="highlight">PRIORITY</span></span> order Widget-X qty:50
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">2s ago</span>
+        </div>
+      </div>
+
+      <!-- Result 6 -->
+      <div class="result-item">
+        <div class="result-icon exchange">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            E-2026-03-08-00098
+          </div>
+          <div class="result-meta">
+            cmr-7d2b0f93-a1d7
+            <span class="sep"></span>
+            1 route hop
+            <span class="sep"></span>
+            Body: <span class="result-title"><span class="highlight">PRIORITY</span></span> order Gadget-Z qty:12 &mdash; failed
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">8s ago</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="search-footer">
+      <div class="footer-hints">
+        <div class="footer-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> navigate</div>
+        <div class="footer-hint"><kbd>&crarr;</kbd> open</div>
+        <div class="footer-hint"><kbd>tab</kbd> filter</div>
+        <div class="footer-hint"><kbd>#</kbd> scope</div>
+      </div>
+      <div class="footer-powered">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+          <path d="M2 17l10 5 10-5"/>
+          <path d="M2 12l10 5 10-5"/>
+        </svg>
+        Cameleer3
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/examples/cmd-k-search-light.html b/examples/cmd-k-search-light.html
new file mode 100644
index 00000000..962cd736
--- /dev/null
+++ b/examples/cmd-k-search-light.html
@@ -0,0 +1,1012 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Command Search (Light)</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --bg-primary: #f7f5f2;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f3f1ee;
+    --bg-overlay: rgba(247, 245, 242, 0.75);
+    --border: #d4cfc8;
+    --border-active: #b45309;
+    --text-primary: #1c1917;
+    --text-secondary: #57534e;
+    --text-muted: #a8a29e;
+    --accent-amber: #b45309;
+    --accent-green: #047857;
+    --accent-red: #be123c;
+    --accent-orange: #c2410c;
+    --accent-purple: #7c3aed;
+    --accent-cyan: #0e7490;
+    --accent-blue: #1d4ed8;
+    --shadow-heavy: 0 25px 50px rgba(0,0,0,0.1), 0 12px 24px rgba(0,0,0,0.06);
+    --shadow-glow: 0 0 0 1px rgba(180, 83, 9, 0.08);
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 16px;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slideUp {
+    from { opacity: 0; transform: translateY(20px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  @keyframes pulseGlow {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(180,83,9,0); }
+    50% { box-shadow: 0 0 0 4px rgba(180,83,9,0.08); }
+  }
+
+  @keyframes slideInResult {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  body {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: hidden;
+  }
+
+  /* Background mesh gradient */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background:
+      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(180,83,9,0.04), transparent),
+      radial-gradient(ellipse 60% 40% at 80% 60%, rgba(124,58,237,0.03), transparent),
+      radial-gradient(ellipse 50% 50% at 20% 80%, rgba(4,120,87,0.02), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* ── Behind-the-overlay page (blurred app mock) ── */
+  .app-bg {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .app-topbar {
+    height: 48px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    gap: 16px;
+    flex-shrink: 0;
+  }
+
+  .app-topbar .logo {
+    font-weight: 700;
+    font-size: 15px;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .app-topbar .logo svg { width: 22px; height: 22px; }
+
+  .app-topbar .nav-items {
+    display: flex;
+    gap: 4px;
+    margin-left: 12px;
+  }
+
+  .app-topbar .nav-item {
+    padding: 6px 12px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    border-radius: var(--radius-sm);
+    cursor: default;
+  }
+
+  .app-topbar .nav-item.active {
+    color: var(--text-primary);
+    background: rgba(0,0,0,0.04);
+  }
+
+  .app-topbar .search-trigger {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 12px 5px 10px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    font-size: 13px;
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+
+  .app-topbar .search-trigger:hover { border-color: var(--border-active); color: var(--text-secondary); }
+
+  .app-topbar .search-trigger svg { width: 14px; height: 14px; opacity: 0.5; }
+
+  .app-topbar .kbd {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 11px;
+    padding: 1px 5px;
+    background: rgba(0,0,0,0.04);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+    line-height: 1.4;
+  }
+
+  .app-content {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    overflow: hidden;
+  }
+
+  .app-sidebar {
+    background: var(--bg-primary);
+    border-right: 1px solid var(--border);
+    padding: 16px 12px;
+  }
+
+  .app-sidebar .sidebar-section {
+    margin-bottom: 20px;
+  }
+
+  .app-sidebar .sidebar-title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+    padding: 0 8px;
+  }
+
+  .app-sidebar .sidebar-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    border-radius: var(--radius-sm);
+    cursor: default;
+  }
+
+  .app-sidebar .sidebar-item.active {
+    background: rgba(180, 83, 9, 0.06);
+    color: var(--accent-amber);
+  }
+
+  .app-sidebar .sidebar-item svg { width: 16px; height: 16px; opacity: 0.6; }
+  .app-sidebar .sidebar-item.active svg { opacity: 1; }
+
+  .app-main {
+    padding: 24px 32px;
+    overflow-y: auto;
+    background: var(--bg-secondary);
+  }
+
+  .app-main .page-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+  }
+
+  .app-main .page-subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-bottom: 24px;
+  }
+
+  /* Fake table rows behind overlay */
+  .app-table-row {
+    display: grid;
+    grid-template-columns: 40px 2fr 1fr 1fr 100px 80px;
+    align-items: center;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+
+  .app-table-row.header {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: var(--text-muted);
+    border-bottom: 2px solid var(--border);
+  }
+
+  .app-table-row .status-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: #047857;
+  }
+
+  .app-table-row .status-dot.failed { background: #be123c; }
+
+  /* ── Overlay ── */
+  .overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 100;
+    background: var(--bg-overlay);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    display: flex;
+    justify-content: center;
+    padding-top: 12vh;
+    animation: fadeIn 0.15s ease-out;
+  }
+
+  /* ── Search Modal ── */
+  .search-modal {
+    width: 680px;
+    max-height: 520px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-heavy), var(--shadow-glow);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    align-self: flex-start;
+  }
+
+  /* ── Search Input ── */
+  .search-input-wrap {
+    display: flex;
+    align-items: center;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--border);
+    gap: 12px;
+  }
+
+  .search-input-wrap svg {
+    width: 20px;
+    height: 20px;
+    color: var(--accent-amber);
+    flex-shrink: 0;
+    filter: drop-shadow(0 0 4px rgba(180, 83, 9, 0.2));
+  }
+
+  .search-input {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    font-family: inherit;
+    color: var(--text-primary);
+    caret-color: var(--accent-amber);
+  }
+
+  .search-input::placeholder { color: var(--text-muted); }
+
+  .search-input-wrap .input-hint {
+    font-size: 11px;
+    color: var(--text-muted);
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .search-input-wrap .input-hint kbd {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10px;
+    padding: 1px 5px;
+    background: rgba(0,0,0,0.04);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    line-height: 1.5;
+  }
+
+  /* ── Scope Tabs ── */
+  .scope-tabs {
+    display: flex;
+    padding: 8px 18px 0;
+    gap: 2px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .scope-tab {
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-muted);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .scope-tab:hover { color: var(--text-secondary); }
+
+  .scope-tab.active {
+    color: var(--accent-amber);
+    border-bottom-color: var(--accent-amber);
+  }
+
+  .scope-tab .count {
+    font-size: 10px;
+    padding: 1px 6px;
+    background: rgba(0,0,0,0.04);
+    border-radius: 10px;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+  }
+
+  .scope-tab.active .count {
+    background: rgba(180, 83, 9, 0.08);
+    color: var(--accent-amber);
+  }
+
+  /* ── Results ── */
+  .results {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 8px;
+    scrollbar-width: thin;
+    scrollbar-color: #c8c3bc transparent;
+  }
+
+  .results::-webkit-scrollbar { width: 6px; }
+  .results::-webkit-scrollbar-track { background: transparent; }
+  .results::-webkit-scrollbar-thumb { background: #c8c3bc; border-radius: 3px; }
+
+  .result-group-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: var(--text-muted);
+    padding: 10px 12px 4px;
+  }
+
+  .result-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background 0.1s;
+    animation: slideInResult 0.2s ease-out both;
+  }
+
+  .result-item:nth-child(2) { animation-delay: 0.03s; }
+  .result-item:nth-child(3) { animation-delay: 0.06s; }
+  .result-item:nth-child(4) { animation-delay: 0.09s; }
+  .result-item:nth-child(5) { animation-delay: 0.12s; }
+  .result-item:nth-child(6) { animation-delay: 0.15s; }
+
+  .result-item:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+
+  .result-item.selected {
+    background: rgba(180, 83, 9, 0.04);
+    outline: 1px solid rgba(180, 83, 9, 0.12);
+  }
+
+  .result-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .result-icon svg { width: 18px; height: 18px; }
+
+  .result-icon.execution {
+    background: rgba(29, 78, 216, 0.07);
+    color: var(--accent-blue);
+  }
+
+  .result-icon.route {
+    background: rgba(124, 58, 237, 0.07);
+    color: var(--accent-purple);
+  }
+
+  .result-icon.exchange {
+    background: rgba(14, 116, 144, 0.07);
+    color: var(--accent-cyan);
+  }
+
+  .result-icon.error {
+    background: rgba(190, 18, 60, 0.06);
+    color: var(--accent-red);
+  }
+
+  .result-icon.agent {
+    background: rgba(4, 120, 87, 0.06);
+    color: var(--accent-green);
+  }
+
+  .result-body {
+    flex: 1;
+    min-width: 0;
+    padding-top: 1px;
+  }
+
+  .result-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    line-height: 1.3;
+  }
+
+  .result-title .highlight {
+    color: var(--accent-amber);
+    font-weight: 600;
+  }
+
+  .result-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 3px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .result-meta .sep {
+    width: 3px; height: 3px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+
+  /* Tags / Badges */
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 12px;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .badge.status-completed {
+    background: rgba(4, 120, 87, 0.07);
+    color: var(--accent-green);
+  }
+
+  .badge.status-failed {
+    background: rgba(190, 18, 60, 0.06);
+    color: var(--accent-red);
+  }
+
+  .badge.status-running {
+    background: rgba(194, 65, 12, 0.07);
+    color: var(--accent-orange);
+  }
+
+  .badge.route-tag {
+    background: rgba(124, 58, 237, 0.06);
+    color: var(--accent-purple);
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10.5px;
+  }
+
+  .badge.env-tag {
+    background: rgba(4, 120, 87, 0.06);
+    color: var(--accent-green);
+  }
+
+  .badge.duration {
+    background: rgba(0, 0, 0, 0.04);
+    color: var(--text-secondary);
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10.5px;
+  }
+
+  .result-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+    flex-shrink: 0;
+    padding-top: 2px;
+  }
+
+  .result-time {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    white-space: nowrap;
+  }
+
+  /* Preview Pane (inline) */
+  .result-preview {
+    margin-top: 8px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 10px 12px;
+    font-size: 12px;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    max-height: 120px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .result-preview::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 30px;
+    background: linear-gradient(transparent, var(--bg-tertiary));
+  }
+
+  .result-preview .key { color: var(--accent-cyan); }
+  .result-preview .str { color: var(--accent-green); }
+  .result-preview .num { color: var(--accent-orange); }
+  .result-preview .kw { color: var(--accent-purple); }
+
+  /* ── Footer ── */
+  .search-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 18px;
+    border-top: 1px solid var(--border);
+    background: var(--bg-tertiary);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .footer-hints {
+    display: flex;
+    gap: 16px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .footer-hint {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .footer-hint kbd {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    font-size: 10px;
+    padding: 1px 5px;
+    background: rgba(0,0,0,0.04);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    line-height: 1.5;
+  }
+
+  .footer-powered {
+    font-size: 11px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .footer-powered svg { width: 14px; height: 14px; color: var(--accent-amber); }
+
+  /* ── Typing cursor ── */
+  .cursor {
+    display: inline-block;
+    width: 2px;
+    height: 18px;
+    background: var(--accent-amber);
+    margin-left: 1px;
+    animation: blink 1s step-end infinite;
+    vertical-align: text-bottom;
+  }
+
+  @keyframes blink {
+    50% { opacity: 0; }
+  }
+
+  /* ── Filter chips in input area ── */
+  .filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    background: rgba(180, 83, 9, 0.08);
+    color: var(--accent-amber);
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+
+  .filter-chip .chip-key {
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  /* ── Responsive ── */
+  @media (max-width: 768px) {
+    .search-modal { width: calc(100vw - 32px); max-height: 70vh; }
+    .app-sidebar { display: none; }
+    .app-content { grid-template-columns: 1fr; }
+    .app-table-row { grid-template-columns: 30px 2fr 1fr 80px; }
+    .app-table-row .hide-mobile { display: none; }
+  }
+</style>
+</head>
+<body>
+
+<!-- Background App UI -->
+<div class="app-bg">
+  <div class="app-topbar">
+    <div class="logo">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+        <path d="M2 17l10 5 10-5"/>
+        <path d="M2 12l10 5 10-5"/>
+      </svg>
+      Cameleer
+    </div>
+    <div class="nav-items">
+      <div class="nav-item active">Dashboard</div>
+      <div class="nav-item">Routes</div>
+      <div class="nav-item">Executions</div>
+      <div class="nav-item">Agents</div>
+    </div>
+    <div class="search-trigger" onclick="void(0)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      Search everything...
+      <kbd class="kbd">&#8984;K</kbd>
+    </div>
+  </div>
+  <div class="app-content">
+    <div class="app-sidebar">
+      <div class="sidebar-section">
+        <div class="sidebar-title">Observe</div>
+        <div class="sidebar-item active">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+          Dashboard
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          Live Trace
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+          Executions
+        </div>
+      </div>
+      <div class="sidebar-section">
+        <div class="sidebar-title">Topology</div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
+          Routes
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
+          Agents
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
+          Diagrams
+        </div>
+      </div>
+      <div class="sidebar-section">
+        <div class="sidebar-title">Investigate</div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+          Errors
+        </div>
+        <div class="sidebar-item">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+          Exchanges
+        </div>
+      </div>
+    </div>
+    <div class="app-main">
+      <div class="page-title">Dashboard</div>
+      <div class="page-subtitle">3 agents connected &mdash; 12 routes active &mdash; 1,247 executions/min</div>
+      <div class="app-table-row header">
+        <div></div>
+        <div>Route / Exchange</div>
+        <div>Agent</div>
+        <div class="hide-mobile">Correlation ID</div>
+        <div>Duration</div>
+        <div>Time</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>content-based-routing</div>
+        <div>order-svc-pod-7f8</div>
+        <div class="hide-mobile">cmr-9a4f2b...</div>
+        <div>47ms</div>
+        <div>2s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>timer-heartbeat</div>
+        <div>order-svc-pod-a3b</div>
+        <div class="hide-mobile">cmr-8e3c1a...</div>
+        <div>3ms</div>
+        <div>4s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot failed"></span></div>
+        <div>file-ingest-orders</div>
+        <div>order-svc-pod-7f8</div>
+        <div class="hide-mobile">cmr-7d2b0f...</div>
+        <div>312ms</div>
+        <div>8s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>rest-api-orders</div>
+        <div>order-svc-pod-x9y</div>
+        <div class="hide-mobile">cmr-6c1a9e...</div>
+        <div>128ms</div>
+        <div>11s ago</div>
+      </div>
+      <div class="app-table-row">
+        <div><span class="status-dot"></span></div>
+        <div>split-order-items</div>
+        <div>order-svc-pod-a3b</div>
+        <div class="hide-mobile">cmr-5b0d8c...</div>
+        <div>89ms</div>
+        <div>15s ago</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- CMD-K Search Overlay -->
+<div class="overlay">
+  <div class="search-modal">
+
+    <!-- Input -->
+    <div class="search-input-wrap">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/>
+        <path d="m21 21-4.35-4.35"/>
+      </svg>
+      <span class="filter-chip"><span class="chip-key">route:</span>order</span>
+      <input class="search-input" type="text" value="PRIORITY" autofocus placeholder="Search executions, routes, exchanges..." />
+      <div class="input-hint">
+        <kbd>esc</kbd> close
+      </div>
+    </div>
+
+    <!-- Scope tabs -->
+    <div class="scope-tabs">
+      <div class="scope-tab active">All <span class="count">14</span></div>
+      <div class="scope-tab">Executions <span class="count">8</span></div>
+      <div class="scope-tab">Routes <span class="count">3</span></div>
+      <div class="scope-tab">Exchanges <span class="count">2</span></div>
+      <div class="scope-tab">Agents <span class="count">1</span></div>
+    </div>
+
+    <!-- Results -->
+    <div class="results">
+      <div class="result-group-label">Executions</div>
+
+      <!-- Result 1 - selected -->
+      <div class="result-item selected">
+        <div class="result-icon execution">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            content-based-routing
+            <span class="badge status-completed">Completed</span>
+            <span class="badge duration">47ms</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-cbr</span>
+            <span class="sep"></span>
+            cmr-9a4f2b71-e8c3
+            <span class="sep"></span>
+            Body matched <span class="result-title"><span class="highlight">PRIORITY</span></span>
+          </div>
+          <div class="result-preview">
+{
+  <span class="key">"routeId"</span>: <span class="str">"content-based-routing"</span>,
+  <span class="key">"exchangeId"</span>: <span class="str">"E-2026-03-08-00142"</span>,
+  <span class="key">"status"</span>: <span class="str">"COMPLETED"</span>,
+  <span class="key">"durationMs"</span>: <span class="num">47</span>,
+  <span class="key">"inputSnapshot"</span>: {
+    <span class="key">"body"</span>: <span class="str">"{\"type\":\"<b class="highlight">PRIORITY</b>\",\"item\":\"Widget-X\",\"qty\":50}"</span>,
+    <span class="key">"headers"</span>: { <span class="key">"Content-Type"</span>: <span class="str">"application/json"</span> }
+  }
+}</div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">2s ago</span>
+        </div>
+      </div>
+
+      <!-- Result 2 -->
+      <div class="result-item">
+        <div class="result-icon error">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            content-based-routing
+            <span class="badge status-failed">Failed</span>
+            <span class="badge duration">312ms</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-cbr</span>
+            <span class="sep"></span>
+            cmr-7d2b0f93-a1d7
+            <span class="sep"></span>
+            NullPointerException in <span class="result-title"><span class="highlight">PRIORITY</span></span> branch
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">8s ago</span>
+        </div>
+      </div>
+
+      <!-- Result 3 -->
+      <div class="result-item">
+        <div class="result-icon execution">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            split-order-items
+            <span class="badge status-completed">Completed</span>
+            <span class="badge duration">89ms</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-split</span>
+            <span class="sep"></span>
+            cmr-9a4f2b71-e8c3
+            <span class="sep"></span>
+            Correlated &mdash; downstream of <span class="result-title"><span class="highlight">PRIORITY</span></span> order
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">2s ago</span>
+        </div>
+      </div>
+
+      <div class="result-group-label">Routes</div>
+
+      <!-- Result 4 -->
+      <div class="result-item">
+        <div class="result-icon route">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            content-based-routing
+            <span class="badge env-tag">production</span>
+          </div>
+          <div class="result-meta">
+            <span class="badge route-tag">route-cbr</span>
+            <span class="sep"></span>
+            14 nodes, 14 edges
+            <span class="sep"></span>
+            EIP_CHOICE branches: <span class="result-title"><span class="highlight">PRIORITY</span></span>, STANDARD, BULK
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">Route</span>
+        </div>
+      </div>
+
+      <div class="result-group-label">Exchanges</div>
+
+      <!-- Result 5 -->
+      <div class="result-item">
+        <div class="result-icon exchange">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            E-2026-03-08-00142
+          </div>
+          <div class="result-meta">
+            cmr-9a4f2b71-e8c3
+            <span class="sep"></span>
+            3 route hops
+            <span class="sep"></span>
+            Body: <span class="result-title"><span class="highlight">PRIORITY</span></span> order Widget-X qty:50
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">2s ago</span>
+        </div>
+      </div>
+
+      <!-- Result 6 -->
+      <div class="result-item">
+        <div class="result-icon exchange">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        </div>
+        <div class="result-body">
+          <div class="result-title">
+            E-2026-03-08-00098
+          </div>
+          <div class="result-meta">
+            cmr-7d2b0f93-a1d7
+            <span class="sep"></span>
+            1 route hop
+            <span class="sep"></span>
+            Body: <span class="result-title"><span class="highlight">PRIORITY</span></span> order Gadget-Z qty:12 &mdash; failed
+          </div>
+        </div>
+        <div class="result-right">
+          <span class="result-time">8s ago</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="search-footer">
+      <div class="footer-hints">
+        <div class="footer-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> navigate</div>
+        <div class="footer-hint"><kbd>&crarr;</kbd> open</div>
+        <div class="footer-hint"><kbd>tab</kbd> filter</div>
+        <div class="footer-hint"><kbd>#</kbd> scope</div>
+      </div>
+      <div class="footer-powered">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+          <path d="M2 17l10 5 10-5"/>
+          <path d="M2 12l10 5 10-5"/>
+        </svg>
+        Cameleer3
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/examples/dashboard-light.html b/examples/dashboard-light.html
new file mode 100644
index 00000000..6ccf4d09
--- /dev/null
+++ b/examples/dashboard-light.html
@@ -0,0 +1,1128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Dashboard</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,650;0,9..40,700;0,9..40,800&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg-deep: #f7f5f2;
+    --bg-base: #efecea;
+    --bg-surface: #ffffff;
+    --bg-raised: #f3f1ee;
+    --bg-hover: #eae7e3;
+    --border: #d4cfc8;
+    --border-subtle: #e4e0db;
+    --text-primary: #1c1917;
+    --text-secondary: #57534e;
+    --text-muted: #a8a29e;
+    --amber: #b45309;
+    --amber-dim: #92400e;
+    --amber-glow: rgba(180, 83, 9, 0.07);
+    --cyan: #0e7490;
+    --cyan-dim: #155e75;
+    --cyan-glow: rgba(14, 116, 144, 0.06);
+    --rose: #be123c;
+    --rose-dim: #9f1239;
+    --rose-glow: rgba(190, 18, 60, 0.05);
+    --green: #047857;
+    --green-glow: rgba(4, 120, 87, 0.06);
+    --blue: #1d4ed8;
+    --purple: #7c3aed;
+    --font-body: 'DM Sans', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg-deep);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+  }
+
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 800px 400px at 20% 20%, rgba(180, 83, 9, 0.02), transparent),
+      radial-gradient(ellipse 600px 600px at 80% 80%, rgba(14, 116, 144, 0.015), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    opacity: 0.025;
+    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23b45309' stroke-width='1' opacity='0.018'/%3E%3Cpath d='M0 220 Q120 170 200 220 T400 220' fill='none' stroke='%23b45309' stroke-width='0.5' opacity='0.018'/%3E%3Cpath d='M0 180 Q80 130 200 180 T400 180' fill='none' stroke='%23b45309' stroke-width='0.5' opacity='0.018'/%3E%3Cpath d='M0 100 Q150 60 200 100 T400 100' fill='none' stroke='%230e7490' stroke-width='0.5' opacity='0.012'/%3E%3Cpath d='M0 300 Q100 260 200 300 T400 300' fill='none' stroke='%230e7490' stroke-width='0.5' opacity='0.012'/%3E%3C/svg%3E");
+    background-size: 400px 400px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  a { color: var(--amber); text-decoration: none; }
+  a:hover { color: var(--text-primary); }
+
+  /* ─── Top Navigation ─── */
+  .topnav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    gap: 32px;
+  }
+
+  .topnav .logo {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--amber);
+    letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .topnav .logo svg { width: 22px; height: 22px; }
+
+  .topnav .nav-links {
+    display: flex;
+    gap: 4px;
+    list-style: none;
+  }
+
+  .topnav .nav-links a {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.15s;
+  }
+
+  .topnav .nav-links a:hover { color: var(--text-primary); background: var(--bg-raised); }
+  .topnav .nav-links a.active { color: var(--amber); background: var(--amber-glow); }
+
+  .topnav .nav-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .env-badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--green-glow);
+    color: var(--green);
+    border: 1px solid rgba(4, 120, 87, 0.2);
+    font-weight: 500;
+  }
+
+  .cluster-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  /* ─── Main Layout ─── */
+  .main {
+    position: relative;
+    z-index: 1;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 24px;
+  }
+
+  /* ─── Page Header ─── */
+  .page-header {
+    margin-bottom: 24px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .page-header h1 {
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+  }
+
+  .page-header .subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  .time-range-selector {
+    display: flex;
+    gap: 4px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 3px;
+  }
+
+  .time-range-selector .range-btn {
+    padding: 6px 14px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.15s;
+    border: none;
+    background: none;
+    font-family: var(--font-body);
+  }
+
+  .time-range-selector .range-btn:hover { color: var(--text-secondary); }
+  .time-range-selector .range-btn.active { background: var(--amber-glow); color: var(--amber); }
+
+  /* ─── Hero Stats ─── */
+  .hero-stats {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 12px;
+    margin-bottom: 24px;
+  }
+
+  .hero-stat {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 18px 20px;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .hero-stat:hover { border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+
+  .hero-stat::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }
+
+  .hero-stat .label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+
+  .hero-stat .value {
+    font-family: var(--font-mono);
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -1px;
+  }
+
+  .hero-stat .sparkline {
+    margin-top: 10px;
+    height: 24px;
+  }
+
+  .hero-stat .sparkline svg { width: 100%; height: 100%; }
+
+  /* Color variants */
+  .hero-stat.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
+  .hero-stat.amber .value { color: var(--amber); }
+  .hero-stat.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
+  .hero-stat.cyan .value { color: var(--cyan); }
+  .hero-stat.rose::before { background: linear-gradient(90deg, var(--rose), transparent); }
+  .hero-stat.rose .value { color: var(--rose); }
+  .hero-stat.green::before { background: linear-gradient(90deg, var(--green), transparent); }
+  .hero-stat.green .value { color: var(--green); }
+  .hero-stat.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
+  .hero-stat.blue .value { color: var(--blue); }
+  .hero-stat.purple::before { background: linear-gradient(90deg, var(--purple), transparent); }
+  .hero-stat.purple .value { color: var(--purple); }
+
+  /* ─── Grid Layout ─── */
+  .dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .dashboard-grid.triple {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
+  }
+
+  .card:hover { border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+
+  .card-header {
+    padding: 16px 20px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-title {
+    font-size: 13px;
+    font-weight: 650;
+    color: var(--text-primary);
+  }
+
+  .card-subtitle {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .card-body {
+    padding: 0 20px 20px;
+  }
+
+  .card.full-width {
+    grid-column: 1 / -1;
+  }
+
+  /* ─── Chart Container ─── */
+  .chart-area {
+    width: 100%;
+    position: relative;
+  }
+
+  .chart-area canvas {
+    width: 100% !important;
+    height: 200px !important;
+  }
+
+  /* SVG Charts */
+  .svg-chart {
+    width: 100%;
+    overflow: visible;
+  }
+
+  .svg-chart text {
+    font-family: var(--font-mono);
+    fill: var(--text-muted);
+    font-size: 10px;
+  }
+
+  .svg-chart .grid-line {
+    stroke: var(--border-subtle);
+    stroke-width: 0.5;
+  }
+
+  .svg-chart .axis-line {
+    stroke: var(--border);
+    stroke-width: 1;
+  }
+
+  .chart-legend {
+    display: flex;
+    gap: 16px;
+    margin-top: 12px;
+  }
+
+  .chart-legend .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .chart-legend .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+  }
+
+  /* ─── Heatmap ─── */
+  .heatmap {
+    display: grid;
+    gap: 2px;
+  }
+
+  .heatmap-row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .heatmap-label {
+    width: 32px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+    text-align: right;
+    padding-right: 6px;
+    flex-shrink: 0;
+  }
+
+  .heatmap-cell {
+    flex: 1;
+    aspect-ratio: 1.8;
+    min-height: 16px;
+    border-radius: 3px;
+    transition: transform 0.1s, box-shadow 0.1s;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .heatmap-cell:hover {
+    transform: scale(1.3);
+    z-index: 2;
+    box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 3px var(--amber-dim);
+  }
+
+  .heatmap-cell .tooltip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 6px 10px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  }
+
+  .heatmap-cell:hover .tooltip { display: block; }
+
+  .heatmap-day-labels {
+    display: flex;
+    gap: 2px;
+    margin-left: 38px;
+    margin-bottom: 4px;
+  }
+
+  .heatmap-day-labels span {
+    flex: 1;
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--text-muted);
+  }
+
+  .heatmap-scale {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 10px;
+    justify-content: flex-end;
+  }
+
+  .heatmap-scale .scale-label {
+    font-size: 10px;
+    font-family: var(--font-mono);
+    color: var(--text-muted);
+  }
+
+  .heatmap-scale .scale-cell {
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+  }
+
+  /* ─── Application Health Grid ─── */
+  .app-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    gap: 6px;
+  }
+
+  .app-tile {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 10px 12px;
+    cursor: pointer;
+    transition: all 0.15s;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .app-tile:hover {
+    border-color: var(--border);
+    background: var(--bg-surface);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  }
+
+  .app-tile::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+  }
+
+  .app-tile.healthy::before { background: var(--green); }
+  .app-tile.warning::before { background: var(--amber); }
+  .app-tile.critical::before { background: var(--rose); }
+
+  .app-tile .app-name {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 4px;
+  }
+
+  .app-tile .app-stats {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .app-tile .app-routes {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+  }
+
+  .app-tile .app-rate {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  .app-tile.healthy .app-rate { color: var(--green); }
+  .app-tile.warning .app-rate { color: var(--amber); }
+  .app-tile.critical .app-rate { color: var(--rose); }
+
+  /* ─── Top Lists ─── */
+  .top-list {
+    list-style: none;
+  }
+
+  .top-list li {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: 13px;
+  }
+
+  .top-list li:last-child { border-bottom: none; }
+
+  .top-list .rank {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+    width: 20px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .top-list .route-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .top-list .route-name {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-primary);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .top-list .route-app {
+    font-size: 10px;
+    color: var(--text-muted);
+  }
+
+  .top-list .route-metric {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  .top-list .route-bar {
+    width: 80px;
+    height: 4px;
+    background: var(--bg-base);
+    border-radius: 2px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .top-list .route-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  /* ─── Animations ─── */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes livePulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.3); }
+    50% { box-shadow: 0 0 0 6px rgba(4, 120, 87, 0); }
+  }
+
+  .animate-in { animation: fadeIn 0.3s ease-out both; }
+  .delay-1 { animation-delay: 0.05s; }
+  .delay-2 { animation-delay: 0.1s; }
+  .delay-3 { animation-delay: 0.15s; }
+  .delay-4 { animation-delay: 0.2s; }
+  .delay-5 { animation-delay: 0.25s; }
+  .delay-6 { animation-delay: 0.3s; }
+
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+  .live-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--green);
+    font-family: var(--font-mono);
+    font-weight: 500;
+  }
+
+  .live-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    animation: livePulse 2s ease-in-out infinite;
+  }
+
+  @media (max-width: 1200px) {
+    .hero-stats { grid-template-columns: repeat(3, 1fr); }
+    .dashboard-grid { grid-template-columns: 1fr; }
+    .dashboard-grid.triple { grid-template-columns: 1fr; }
+  }
+
+  @media (max-width: 768px) {
+    .hero-stats { grid-template-columns: 1fr 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- ═══ Top Navigation ═══ -->
+<nav class="topnav">
+  <div class="logo">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"/>
+      <path d="M12 6v6l4 2"/>
+    </svg>
+    cameleer3
+  </div>
+  <ul class="nav-links">
+    <li><a href="dashboard-light.html" class="active">Dashboard</a></li>
+    <li><a href="transaction-explorer-light.html">Transactions</a></li>
+    <li><a href="route-detail-light.html">Routes</a></li>
+  </ul>
+  <div class="nav-right">
+    <span class="env-badge">PRODUCTION</span>
+    <span class="cluster-count">47 apps · 1,283 routes</span>
+  </div>
+</nav>
+
+<!-- ═══ Main Content ═══ -->
+<main class="main">
+
+  <div class="page-header animate-in">
+    <div>
+      <h1>Fleet Overview</h1>
+      <div class="subtitle">Real-time observability across 47 applications</div>
+    </div>
+    <div style="display:flex;gap:16px;align-items:center">
+      <div class="live-indicator">
+        <span class="live-dot"></span>
+        LIVE
+      </div>
+      <div class="time-range-selector">
+        <button class="range-btn">1h</button>
+        <button class="range-btn">6h</button>
+        <button class="range-btn active">24h</button>
+        <button class="range-btn">7d</button>
+        <button class="range-btn">30d</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Hero Stats -->
+  <div class="hero-stats">
+    <div class="hero-stat amber animate-in delay-1">
+      <div class="label">Total Exchanges</div>
+      <div class="value">2.4M</div>
+      <div class="sparkline" id="sparkline-vol"></div>
+    </div>
+    <div class="hero-stat green animate-in delay-2">
+      <div class="label">Success Rate</div>
+      <div class="value">99.66%</div>
+      <div class="sparkline" id="sparkline-success"></div>
+    </div>
+    <div class="hero-stat rose animate-in delay-3">
+      <div class="label">Failed</div>
+      <div class="value">8,147</div>
+      <div class="sparkline" id="sparkline-failed"></div>
+    </div>
+    <div class="hero-stat cyan animate-in delay-4">
+      <div class="label">Avg Latency</div>
+      <div class="value">47ms</div>
+      <div class="sparkline" id="sparkline-latency"></div>
+    </div>
+    <div class="hero-stat purple animate-in delay-5">
+      <div class="label">Active Routes</div>
+      <div class="value">1,283</div>
+      <div class="sparkline" id="sparkline-routes"></div>
+    </div>
+    <div class="hero-stat blue animate-in delay-6">
+      <div class="label">In-Flight</div>
+      <div class="value">1,293</div>
+      <div class="sparkline" id="sparkline-inflight"></div>
+    </div>
+  </div>
+
+  <!-- Charts Row 1: Failure Rate Trend + Latency Percentiles -->
+  <div class="dashboard-grid animate-in delay-3">
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Failure Rate Trend</div>
+          <div class="card-subtitle">Last 24 hours · 15-min intervals</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="chart-area">
+          <svg class="svg-chart" viewBox="0 0 600 200" id="chart-failure"></svg>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> Failure %</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--amber)"></div> Threshold</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Latency Percentiles</div>
+          <div class="card-subtitle">Last 24 hours · p50 / p95 / p99</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="chart-area">
+          <svg class="svg-chart" viewBox="0 0 600 200" id="chart-latency"></svg>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> p50</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--amber)"></div> p95</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> p99</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Volume Heatmap -->
+  <div class="dashboard-grid" style="grid-template-columns:1fr">
+    <div class="card animate-in delay-4">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Exchange Volume Heatmap</div>
+          <div class="card-subtitle">Last 7 days · hourly buckets</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="heatmap-day-labels" id="heatmap-days"></div>
+        <div class="heatmap" id="heatmap"></div>
+        <div class="heatmap-scale">
+          <span class="scale-label">Less</span>
+          <div class="scale-cell" style="background:rgba(180,83,9,0.04)"></div>
+          <div class="scale-cell" style="background:rgba(180,83,9,0.15)"></div>
+          <div class="scale-cell" style="background:rgba(180,83,9,0.3)"></div>
+          <div class="scale-cell" style="background:rgba(180,83,9,0.5)"></div>
+          <div class="scale-cell" style="background:rgba(180,83,9,0.65)"></div>
+          <span class="scale-label">More</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Charts Row 2: Top Failing + Slowest Routes -->
+  <div class="dashboard-grid animate-in delay-5">
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Top Failing Routes</div>
+          <div class="card-subtitle">By failure count · last 24h</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="top-list" id="top-failing"></ul>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Slowest Routes</div>
+          <div class="card-subtitle">By p95 latency · last 24h</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="top-list" id="top-slowest"></ul>
+      </div>
+    </div>
+  </div>
+
+  <!-- Application Health Grid -->
+  <div class="dashboard-grid" style="grid-template-columns:1fr">
+    <div class="card animate-in delay-6">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Application Health</div>
+          <div class="card-subtitle">47 applications · sorted by failure rate</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="app-grid" id="app-grid"></div>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<script>
+// ─── Sparkline Generator ───
+function sparkline(containerId, data, color) {
+  const el = document.getElementById(containerId);
+  const w = 200, h = 24;
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min || 1;
+  const step = w / (data.length - 1);
+  const points = data.map((v, i) => `${i * step},${h - ((v - min) / range) * (h - 2) - 1}`);
+  const gradId = containerId + '-grad';
+
+  el.innerHTML = `
+    <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">
+      <defs>
+        <linearGradient id="${gradId}" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="${color}" stop-opacity="0.3"/>
+          <stop offset="100%" stop-color="${color}" stop-opacity="0"/>
+        </linearGradient>
+      </defs>
+      <polygon points="0,${h} ${points.join(' ')} ${w},${h}" fill="url(#${gradId})"/>
+      <polyline points="${points.join(' ')}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linejoin="round"/>
+    </svg>
+  `;
+}
+
+function randomSeries(len, base, variance) {
+  const data = [];
+  let v = base;
+  for (let i = 0; i < len; i++) {
+    v += (Math.random() - 0.5) * variance;
+    v = Math.max(base * 0.3, v);
+    data.push(v);
+  }
+  return data;
+}
+
+sparkline('sparkline-vol', randomSeries(24, 100000, 20000), '#b45309');
+sparkline('sparkline-success', randomSeries(24, 99.6, 0.2), '#047857');
+sparkline('sparkline-failed', randomSeries(24, 340, 80), '#be123c');
+sparkline('sparkline-latency', randomSeries(24, 47, 12), '#0e7490');
+sparkline('sparkline-routes', [1280,1280,1281,1281,1282,1282,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283], '#7c3aed');
+sparkline('sparkline-inflight', randomSeries(24, 1200, 400), '#1d4ed8');
+
+// ─── SVG Line Chart: Failure Rate ───
+function drawLineChart(svgId, datasets, yLabels, gridLines) {
+  const svg = document.getElementById(svgId);
+  const W = 600, H = 200;
+  const pad = { top: 10, right: 15, bottom: 25, left: 45 };
+  const cw = W - pad.left - pad.right;
+  const ch = H - pad.top - pad.bottom;
+
+  let html = '';
+
+  // Grid lines
+  gridLines.forEach(val => {
+    const y = pad.top + ch - (val / gridLines[gridLines.length - 1]) * ch;
+    html += `<line class="grid-line" x1="${pad.left}" y1="${y}" x2="${W - pad.right}" y2="${y}"/>`;
+    html += `<text x="${pad.left - 8}" y="${y + 3}" text-anchor="end" font-size="10">${val}${yLabels.suffix || ''}</text>`;
+  });
+
+  // X-axis labels
+  const xLabels = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'];
+  xLabels.forEach((label, i) => {
+    const x = pad.left + (i / (xLabels.length - 1)) * cw;
+    html += `<text x="${x}" y="${H - 4}" text-anchor="middle" font-size="10">${label}</text>`;
+  });
+
+  // Data lines
+  datasets.forEach(ds => {
+    const points = ds.data.map((v, i) => {
+      const x = pad.left + (i / (ds.data.length - 1)) * cw;
+      const y = pad.top + ch - (v / gridLines[gridLines.length - 1]) * ch;
+      return `${x},${y}`;
+    });
+
+    // Area fill
+    if (ds.fill) {
+      const gradId = svgId + '-' + ds.label;
+      html += `<defs><linearGradient id="${gradId}" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="${ds.color}" stop-opacity="0.08"/>
+        <stop offset="100%" stop-color="${ds.color}" stop-opacity="0"/>
+      </linearGradient></defs>`;
+      html += `<polygon points="${pad.left},${pad.top + ch} ${points.join(' ')} ${W - pad.right},${pad.top + ch}" fill="url(#${gradId})"/>`;
+    }
+
+    // Line
+    html += `<polyline points="${points.join(' ')}" fill="none" stroke="${ds.color}" stroke-width="${ds.width || 1.5}" stroke-linejoin="round" ${ds.dash ? `stroke-dasharray="${ds.dash}"` : ''}/>`;
+  });
+
+  svg.innerHTML = html;
+}
+
+// Failure rate data
+const failureData = randomSeries(96, 0.35, 0.12).map(v => Math.max(0, v));
+drawLineChart('chart-failure', [
+  { label: 'failure', data: failureData, color: '#be123c', fill: true },
+  { label: 'threshold', data: Array(96).fill(0.5), color: '#b45309', width: 1, dash: '4,4' }
+], { suffix: '%' }, [0, 0.25, 0.5, 0.75, 1.0]);
+
+// Latency percentile data
+const p50 = randomSeries(96, 25, 8);
+const p95 = randomSeries(96, 120, 30);
+const p99 = randomSeries(96, 310, 60);
+drawLineChart('chart-latency', [
+  { label: 'p99', data: p99, color: '#be123c', fill: true },
+  { label: 'p95', data: p95, color: '#b45309', fill: true },
+  { label: 'p50', data: p50, color: '#047857', fill: true },
+], { suffix: 'ms' }, [0, 100, 200, 300, 400, 500]);
+
+// ─── Volume Heatmap ───
+(function() {
+  const container = document.getElementById('heatmap');
+  const daysEl = document.getElementById('heatmap-days');
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  const hours = Array.from({length: 24}, (_, i) => i);
+
+  // Day labels
+  days.forEach(d => {
+    const span = document.createElement('span');
+    span.textContent = d;
+    daysEl.appendChild(span);
+  });
+
+  // Generate volume data (business hours = more traffic)
+  hours.forEach(hour => {
+    const row = document.createElement('div');
+    row.className = 'heatmap-row';
+
+    const label = document.createElement('div');
+    label.className = 'heatmap-label';
+    label.textContent = hour.toString().padStart(2, '0');
+    row.appendChild(label);
+
+    days.forEach(day => {
+      const cell = document.createElement('div');
+      cell.className = 'heatmap-cell';
+
+      // Simulate realistic traffic: business hours (8-18) on weekdays get more
+      const isWeekday = ['Mon','Tue','Wed','Thu','Fri'].includes(day);
+      const isBusinessHour = hour >= 8 && hour <= 18;
+      const isNight = hour >= 0 && hour <= 5;
+
+      let intensity;
+      if (isWeekday && isBusinessHour) {
+        intensity = 0.5 + Math.random() * 0.5;
+      } else if (isWeekday && !isNight) {
+        intensity = 0.2 + Math.random() * 0.3;
+      } else if (isNight) {
+        intensity = 0.02 + Math.random() * 0.08;
+      } else {
+        intensity = 0.05 + Math.random() * 0.2;
+      }
+
+      const volume = Math.floor(intensity * 200000);
+      cell.style.background = `rgba(180, 83, 9, ${intensity * 0.65})`;
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'tooltip';
+      tooltip.textContent = `${day} ${hour}:00 — ${volume.toLocaleString()} txns`;
+      cell.appendChild(tooltip);
+
+      row.appendChild(cell);
+    });
+
+    container.appendChild(row);
+  });
+})();
+
+// ─── Top Failing Routes ───
+(function() {
+  const list = document.getElementById('top-failing');
+  const routes = [
+    { name: 'payment-processing', app: 'payment-gateway', failures: 2841, total: 89420 },
+    { name: 'inventory-check', app: 'inventory-sync', failures: 1203, total: 156000 },
+    { name: 'email-sender', app: 'notification-hub', failures: 987, total: 234000 },
+    { name: 'fraud-check', app: 'order-service-eu', failures: 812, total: 89420 },
+    { name: 'shipment-update', app: 'shipping-tracker', failures: 504, total: 78000 },
+    { name: 'etl-transform-legacy', app: 'etl-pipeline-prod', failures: 398, total: 45000 },
+    { name: 'sms-gateway', app: 'notification-hub', failures: 287, total: 67000 },
+    { name: 'order-validation', app: 'order-service-eu', failures: 115, total: 156000 },
+  ];
+
+  const maxFailures = routes[0].failures;
+  routes.forEach((r, i) => {
+    const pct = ((r.failures / r.total) * 100).toFixed(2);
+    const barWidth = (r.failures / maxFailures) * 100;
+    list.innerHTML += `
+      <li>
+        <span class="rank">${i + 1}</span>
+        <div class="route-info">
+          <div class="route-name">${r.name}</div>
+          <div class="route-app">${r.app}</div>
+        </div>
+        <div class="route-bar"><div class="route-bar-fill" style="width:${barWidth}%;background:var(--rose)"></div></div>
+        <span class="route-metric" style="color:var(--rose)">${r.failures.toLocaleString()}</span>
+      </li>`;
+  });
+})();
+
+// ─── Top Slowest Routes ───
+(function() {
+  const list = document.getElementById('top-slowest');
+  const routes = [
+    { name: 'etl-transform-legacy', app: 'etl-pipeline-prod', p95: 4823 },
+    { name: 'payment-processing', app: 'payment-gateway', p95: 2140 },
+    { name: 'report-generation', app: 'analytics-engine', p95: 1870 },
+    { name: 'fraud-check', app: 'order-service-eu', p95: 892 },
+    { name: 'inventory-batch-sync', app: 'inventory-sync', p95: 756 },
+    { name: 'pdf-invoice-gen', app: 'billing-service', p95: 645 },
+    { name: 'email-template-render', app: 'notification-hub', p95: 412 },
+    { name: 'shipment-tracking-poll', app: 'shipping-tracker', p95: 387 },
+  ];
+
+  const maxP95 = routes[0].p95;
+  routes.forEach((r, i) => {
+    const barWidth = (r.p95 / maxP95) * 100;
+    list.innerHTML += `
+      <li>
+        <span class="rank">${i + 1}</span>
+        <div class="route-info">
+          <div class="route-name">${r.name}</div>
+          <div class="route-app">${r.app}</div>
+        </div>
+        <div class="route-bar"><div class="route-bar-fill" style="width:${barWidth}%;background:var(--amber)"></div></div>
+        <span class="route-metric" style="color:var(--amber)">${r.p95.toLocaleString()}ms</span>
+      </li>`;
+  });
+})();
+
+// ─── Application Health Grid ───
+(function() {
+  const grid = document.getElementById('app-grid');
+  const apps = [
+    'order-service-eu', 'order-service-us', 'order-service-ap',
+    'payment-gateway', 'payment-refunds', 'payment-reconciliation',
+    'inventory-sync', 'inventory-warehouse-eu', 'inventory-warehouse-us',
+    'notification-hub', 'notification-sms', 'notification-push',
+    'etl-pipeline-prod', 'etl-pipeline-staging', 'etl-archive',
+    'shipping-tracker', 'shipping-labels', 'shipping-returns',
+    'customer-portal', 'customer-auth', 'customer-preferences',
+    'analytics-engine', 'analytics-realtime', 'analytics-batch',
+    'billing-service', 'billing-invoices', 'billing-subscriptions',
+    'fraud-detection', 'fraud-rules-engine', 'fraud-ml-scoring',
+    'api-gateway-eu', 'api-gateway-us', 'api-gateway-ap',
+    'search-service', 'search-indexer', 'search-autocomplete',
+    'cms-content', 'cms-media', 'cms-translations',
+    'monitoring-agent', 'monitoring-alerts', 'monitoring-dashboards',
+    'cache-service', 'cache-invalidator',
+    'queue-manager', 'message-router', 'dead-letter-handler',
+  ];
+
+  apps.forEach(name => {
+    const routes = Math.floor(Math.random() * 40) + 5;
+    const failRate = Math.random() * 5;
+    let status = 'healthy';
+    if (failRate > 3) status = 'critical';
+    else if (failRate > 1) status = 'warning';
+
+    // Force some specific statuses for realism
+    if (name === 'payment-gateway') { status = 'warning'; }
+    if (name === 'etl-pipeline-prod') { status = 'critical'; }
+
+    grid.innerHTML += `
+      <div class="app-tile ${status}" title="${name}: ${routes} routes, ${failRate.toFixed(2)}% fail rate">
+        <div class="app-name">${name}</div>
+        <div class="app-stats">
+          <span class="app-routes">${routes} routes</span>
+          <span class="app-rate">${failRate.toFixed(2)}%</span>
+        </div>
+      </div>`;
+  });
+})();
+
+// Time range selector
+document.querySelectorAll('.range-btn').forEach(btn => {
+  btn.addEventListener('click', function() {
+    document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+    this.classList.add('active');
+  });
+});
+</script>
+</body>
+</html>
diff --git a/examples/dashboard.html b/examples/dashboard.html
new file mode 100644
index 00000000..fe8b6e1e
--- /dev/null
+++ b/examples/dashboard.html
@@ -0,0 +1,1125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Dashboard</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg-deep: #060a13;
+    --bg-base: #0a0e17;
+    --bg-surface: #111827;
+    --bg-raised: #1a2332;
+    --bg-hover: #1e2d3d;
+    --border: #1e2d3d;
+    --border-subtle: #152030;
+    --text-primary: #e2e8f0;
+    --text-secondary: #8b9cb6;
+    --text-muted: #4a5e7a;
+    --amber: #f0b429;
+    --amber-dim: #b8860b;
+    --amber-glow: rgba(240, 180, 41, 0.15);
+    --cyan: #22d3ee;
+    --cyan-dim: #0e7490;
+    --cyan-glow: rgba(34, 211, 238, 0.12);
+    --rose: #f43f5e;
+    --rose-dim: #9f1239;
+    --rose-glow: rgba(244, 63, 94, 0.12);
+    --blue: #3b82f6;
+    --green: #10b981;
+    --green-glow: rgba(16, 185, 129, 0.12);
+    --purple: #a855f7;
+    --font-body: 'DM Sans', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg-deep);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+  }
+
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 800px 400px at 20% 20%, rgba(240, 180, 41, 0.03), transparent),
+      radial-gradient(ellipse 600px 600px at 80% 80%, rgba(34, 211, 238, 0.02), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    opacity: 0.025;
+    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23f0b429' stroke-width='1'/%3E%3Cpath d='M0 220 Q120 170 200 220 T400 220' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 180 Q80 130 200 180 T400 180' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q150 60 200 100 T400 100' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3Cpath d='M0 300 Q100 260 200 300 T400 300' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3C/svg%3E");
+    background-size: 400px 400px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  a { color: var(--amber); text-decoration: none; }
+  a:hover { color: var(--text-primary); }
+
+  /* ─── Top Navigation ─── */
+  .topnav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(6, 10, 19, 0.85);
+    backdrop-filter: blur(20px) saturate(1.2);
+    border-bottom: 1px solid var(--border-subtle);
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    gap: 32px;
+  }
+
+  .topnav .logo {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--amber);
+    letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .topnav .logo svg { width: 22px; height: 22px; }
+
+  .topnav .nav-links {
+    display: flex;
+    gap: 4px;
+    list-style: none;
+  }
+
+  .topnav .nav-links a {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.15s;
+  }
+
+  .topnav .nav-links a:hover { color: var(--text-primary); background: var(--bg-raised); }
+  .topnav .nav-links a.active { color: var(--amber); background: var(--amber-glow); }
+
+  .topnav .nav-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .env-badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--green-glow);
+    color: var(--green);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    font-weight: 500;
+  }
+
+  .cluster-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  /* ─── Main Layout ─── */
+  .main {
+    position: relative;
+    z-index: 1;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 24px;
+  }
+
+  /* ─── Page Header ─── */
+  .page-header {
+    margin-bottom: 24px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .page-header h1 {
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+
+  .page-header .subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  .time-range-selector {
+    display: flex;
+    gap: 4px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 3px;
+  }
+
+  .time-range-selector .range-btn {
+    padding: 6px 14px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.15s;
+    border: none;
+    background: none;
+    font-family: var(--font-body);
+  }
+
+  .time-range-selector .range-btn:hover { color: var(--text-secondary); }
+  .time-range-selector .range-btn.active { background: var(--amber-glow); color: var(--amber); }
+
+  /* ─── Hero Stats ─── */
+  .hero-stats {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 12px;
+    margin-bottom: 24px;
+  }
+
+  .hero-stat {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 18px 20px;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s;
+  }
+
+  .hero-stat:hover { border-color: var(--border); }
+
+  .hero-stat::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }
+
+  .hero-stat .label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+
+  .hero-stat .value {
+    font-family: var(--font-mono);
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -1px;
+  }
+
+  .hero-stat .sparkline {
+    margin-top: 10px;
+    height: 24px;
+  }
+
+  .hero-stat .sparkline svg { width: 100%; height: 100%; }
+
+  /* Color variants */
+  .hero-stat.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
+  .hero-stat.amber .value { color: var(--amber); }
+  .hero-stat.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
+  .hero-stat.cyan .value { color: var(--cyan); }
+  .hero-stat.rose::before { background: linear-gradient(90deg, var(--rose), transparent); }
+  .hero-stat.rose .value { color: var(--rose); }
+  .hero-stat.green::before { background: linear-gradient(90deg, var(--green), transparent); }
+  .hero-stat.green .value { color: var(--green); }
+  .hero-stat.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
+  .hero-stat.blue .value { color: var(--blue); }
+  .hero-stat.purple::before { background: linear-gradient(90deg, var(--purple), transparent); }
+  .hero-stat.purple .value { color: var(--purple); }
+
+  /* ─── Grid Layout ─── */
+  .dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .dashboard-grid.triple {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    transition: border-color 0.2s;
+  }
+
+  .card:hover { border-color: var(--border); }
+
+  .card-header {
+    padding: 16px 20px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .card-subtitle {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .card-body {
+    padding: 0 20px 20px;
+  }
+
+  .card.full-width {
+    grid-column: 1 / -1;
+  }
+
+  /* ─── Chart Container ─── */
+  .chart-area {
+    width: 100%;
+    position: relative;
+  }
+
+  .chart-area canvas {
+    width: 100% !important;
+    height: 200px !important;
+  }
+
+  /* SVG Charts */
+  .svg-chart {
+    width: 100%;
+    overflow: visible;
+  }
+
+  .svg-chart text {
+    font-family: var(--font-mono);
+    fill: var(--text-muted);
+    font-size: 10px;
+  }
+
+  .svg-chart .grid-line {
+    stroke: var(--border-subtle);
+    stroke-width: 0.5;
+  }
+
+  .svg-chart .axis-line {
+    stroke: var(--border);
+    stroke-width: 1;
+  }
+
+  .chart-legend {
+    display: flex;
+    gap: 16px;
+    margin-top: 12px;
+  }
+
+  .chart-legend .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .chart-legend .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+  }
+
+  /* ─── Heatmap ─── */
+  .heatmap {
+    display: grid;
+    gap: 2px;
+  }
+
+  .heatmap-row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .heatmap-label {
+    width: 32px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+    text-align: right;
+    padding-right: 6px;
+    flex-shrink: 0;
+  }
+
+  .heatmap-cell {
+    flex: 1;
+    aspect-ratio: 1.8;
+    min-height: 16px;
+    border-radius: 3px;
+    transition: transform 0.1s, box-shadow 0.1s;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .heatmap-cell:hover {
+    transform: scale(1.3);
+    z-index: 2;
+    box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 3px var(--amber-dim);
+  }
+
+  .heatmap-cell .tooltip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 6px 10px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
+  }
+
+  .heatmap-cell:hover .tooltip { display: block; }
+
+  .heatmap-day-labels {
+    display: flex;
+    gap: 2px;
+    margin-left: 38px;
+    margin-bottom: 4px;
+  }
+
+  .heatmap-day-labels span {
+    flex: 1;
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--text-muted);
+  }
+
+  .heatmap-scale {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 10px;
+    justify-content: flex-end;
+  }
+
+  .heatmap-scale .scale-label {
+    font-size: 10px;
+    font-family: var(--font-mono);
+    color: var(--text-muted);
+  }
+
+  .heatmap-scale .scale-cell {
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+  }
+
+  /* ─── Application Health Grid ─── */
+  .app-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    gap: 6px;
+  }
+
+  .app-tile {
+    background: var(--bg-raised);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 10px 12px;
+    cursor: pointer;
+    transition: all 0.15s;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .app-tile:hover {
+    border-color: var(--border);
+    background: var(--bg-hover);
+    transform: translateY(-1px);
+  }
+
+  .app-tile::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+  }
+
+  .app-tile.healthy::before { background: var(--green); }
+  .app-tile.warning::before { background: var(--amber); }
+  .app-tile.critical::before { background: var(--rose); }
+
+  .app-tile .app-name {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 4px;
+  }
+
+  .app-tile .app-stats {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .app-tile .app-routes {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+  }
+
+  .app-tile .app-rate {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  .app-tile.healthy .app-rate { color: var(--green); }
+  .app-tile.warning .app-rate { color: var(--amber); }
+  .app-tile.critical .app-rate { color: var(--rose); }
+
+  /* ─── Top Lists ─── */
+  .top-list {
+    list-style: none;
+  }
+
+  .top-list li {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: 13px;
+  }
+
+  .top-list li:last-child { border-bottom: none; }
+
+  .top-list .rank {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+    width: 20px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .top-list .route-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .top-list .route-name {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-primary);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .top-list .route-app {
+    font-size: 10px;
+    color: var(--text-muted);
+  }
+
+  .top-list .route-metric {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  .top-list .route-bar {
+    width: 80px;
+    height: 4px;
+    background: var(--bg-base);
+    border-radius: 2px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .top-list .route-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  /* ─── Animations ─── */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes livePulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+  }
+
+  .animate-in { animation: fadeIn 0.3s ease-out both; }
+  .delay-1 { animation-delay: 0.05s; }
+  .delay-2 { animation-delay: 0.1s; }
+  .delay-3 { animation-delay: 0.15s; }
+  .delay-4 { animation-delay: 0.2s; }
+  .delay-5 { animation-delay: 0.25s; }
+  .delay-6 { animation-delay: 0.3s; }
+
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+  .live-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--green);
+    font-family: var(--font-mono);
+    font-weight: 500;
+  }
+
+  .live-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    animation: livePulse 2s ease-in-out infinite;
+  }
+
+  @media (max-width: 1200px) {
+    .hero-stats { grid-template-columns: repeat(3, 1fr); }
+    .dashboard-grid { grid-template-columns: 1fr; }
+    .dashboard-grid.triple { grid-template-columns: 1fr; }
+  }
+
+  @media (max-width: 768px) {
+    .hero-stats { grid-template-columns: 1fr 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- ═══ Top Navigation ═══ -->
+<nav class="topnav">
+  <div class="logo">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"/>
+      <path d="M12 6v6l4 2"/>
+    </svg>
+    cameleer3
+  </div>
+  <ul class="nav-links">
+    <li><a href="dashboard.html" class="active">Dashboard</a></li>
+    <li><a href="transaction-explorer.html">Transactions</a></li>
+    <li><a href="route-detail.html">Routes</a></li>
+  </ul>
+  <div class="nav-right">
+    <span class="env-badge">PRODUCTION</span>
+    <span class="cluster-count">47 apps · 1,283 routes</span>
+  </div>
+</nav>
+
+<!-- ═══ Main Content ═══ -->
+<main class="main">
+
+  <div class="page-header animate-in">
+    <div>
+      <h1>Fleet Overview</h1>
+      <div class="subtitle">Real-time observability across 47 applications</div>
+    </div>
+    <div style="display:flex;gap:16px;align-items:center">
+      <div class="live-indicator">
+        <span class="live-dot"></span>
+        LIVE
+      </div>
+      <div class="time-range-selector">
+        <button class="range-btn">1h</button>
+        <button class="range-btn">6h</button>
+        <button class="range-btn active">24h</button>
+        <button class="range-btn">7d</button>
+        <button class="range-btn">30d</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Hero Stats -->
+  <div class="hero-stats">
+    <div class="hero-stat amber animate-in delay-1">
+      <div class="label">Total Exchanges</div>
+      <div class="value">2.4M</div>
+      <div class="sparkline" id="sparkline-vol"></div>
+    </div>
+    <div class="hero-stat green animate-in delay-2">
+      <div class="label">Success Rate</div>
+      <div class="value">99.66%</div>
+      <div class="sparkline" id="sparkline-success"></div>
+    </div>
+    <div class="hero-stat rose animate-in delay-3">
+      <div class="label">Failed</div>
+      <div class="value">8,147</div>
+      <div class="sparkline" id="sparkline-failed"></div>
+    </div>
+    <div class="hero-stat cyan animate-in delay-4">
+      <div class="label">Avg Latency</div>
+      <div class="value">47ms</div>
+      <div class="sparkline" id="sparkline-latency"></div>
+    </div>
+    <div class="hero-stat purple animate-in delay-5">
+      <div class="label">Active Routes</div>
+      <div class="value">1,283</div>
+      <div class="sparkline" id="sparkline-routes"></div>
+    </div>
+    <div class="hero-stat blue animate-in delay-6">
+      <div class="label">In-Flight</div>
+      <div class="value">1,293</div>
+      <div class="sparkline" id="sparkline-inflight"></div>
+    </div>
+  </div>
+
+  <!-- Charts Row 1: Failure Rate Trend + Latency Percentiles -->
+  <div class="dashboard-grid animate-in delay-3">
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Failure Rate Trend</div>
+          <div class="card-subtitle">Last 24 hours · 15-min intervals</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="chart-area">
+          <svg class="svg-chart" viewBox="0 0 600 200" id="chart-failure"></svg>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> Failure %</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--amber)"></div> Threshold</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Latency Percentiles</div>
+          <div class="card-subtitle">Last 24 hours · p50 / p95 / p99</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="chart-area">
+          <svg class="svg-chart" viewBox="0 0 600 200" id="chart-latency"></svg>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> p50</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--amber)"></div> p95</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> p99</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Volume Heatmap -->
+  <div class="dashboard-grid" style="grid-template-columns:1fr">
+    <div class="card animate-in delay-4">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Exchange Volume Heatmap</div>
+          <div class="card-subtitle">Last 7 days · hourly buckets</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="heatmap-day-labels" id="heatmap-days"></div>
+        <div class="heatmap" id="heatmap"></div>
+        <div class="heatmap-scale">
+          <span class="scale-label">Less</span>
+          <div class="scale-cell" style="background:rgba(240,180,41,0.05)"></div>
+          <div class="scale-cell" style="background:rgba(240,180,41,0.15)"></div>
+          <div class="scale-cell" style="background:rgba(240,180,41,0.3)"></div>
+          <div class="scale-cell" style="background:rgba(240,180,41,0.5)"></div>
+          <div class="scale-cell" style="background:rgba(240,180,41,0.8)"></div>
+          <span class="scale-label">More</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Charts Row 2: Top Failing + Slowest Routes -->
+  <div class="dashboard-grid animate-in delay-5">
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Top Failing Routes</div>
+          <div class="card-subtitle">By failure count · last 24h</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="top-list" id="top-failing"></ul>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Slowest Routes</div>
+          <div class="card-subtitle">By p95 latency · last 24h</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="top-list" id="top-slowest"></ul>
+      </div>
+    </div>
+  </div>
+
+  <!-- Application Health Grid -->
+  <div class="dashboard-grid" style="grid-template-columns:1fr">
+    <div class="card animate-in delay-6">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Application Health</div>
+          <div class="card-subtitle">47 applications · sorted by failure rate</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="app-grid" id="app-grid"></div>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<script>
+// ─── Sparkline Generator ───
+function sparkline(containerId, data, color) {
+  const el = document.getElementById(containerId);
+  const w = 200, h = 24;
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min || 1;
+  const step = w / (data.length - 1);
+  const points = data.map((v, i) => `${i * step},${h - ((v - min) / range) * (h - 2) - 1}`);
+  const gradId = containerId + '-grad';
+
+  el.innerHTML = `
+    <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">
+      <defs>
+        <linearGradient id="${gradId}" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="${color}" stop-opacity="0.3"/>
+          <stop offset="100%" stop-color="${color}" stop-opacity="0"/>
+        </linearGradient>
+      </defs>
+      <polygon points="0,${h} ${points.join(' ')} ${w},${h}" fill="url(#${gradId})"/>
+      <polyline points="${points.join(' ')}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linejoin="round"/>
+    </svg>
+  `;
+}
+
+function randomSeries(len, base, variance) {
+  const data = [];
+  let v = base;
+  for (let i = 0; i < len; i++) {
+    v += (Math.random() - 0.5) * variance;
+    v = Math.max(base * 0.3, v);
+    data.push(v);
+  }
+  return data;
+}
+
+sparkline('sparkline-vol', randomSeries(24, 100000, 20000), '#f0b429');
+sparkline('sparkline-success', randomSeries(24, 99.6, 0.2), '#10b981');
+sparkline('sparkline-failed', randomSeries(24, 340, 80), '#f43f5e');
+sparkline('sparkline-latency', randomSeries(24, 47, 12), '#22d3ee');
+sparkline('sparkline-routes', [1280,1280,1281,1281,1282,1282,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283,1283], '#a855f7');
+sparkline('sparkline-inflight', randomSeries(24, 1200, 400), '#3b82f6');
+
+// ─── SVG Line Chart: Failure Rate ───
+function drawLineChart(svgId, datasets, yLabels, gridLines) {
+  const svg = document.getElementById(svgId);
+  const W = 600, H = 200;
+  const pad = { top: 10, right: 15, bottom: 25, left: 45 };
+  const cw = W - pad.left - pad.right;
+  const ch = H - pad.top - pad.bottom;
+
+  let html = '';
+
+  // Grid lines
+  gridLines.forEach(val => {
+    const y = pad.top + ch - (val / gridLines[gridLines.length - 1]) * ch;
+    html += `<line class="grid-line" x1="${pad.left}" y1="${y}" x2="${W - pad.right}" y2="${y}"/>`;
+    html += `<text x="${pad.left - 8}" y="${y + 3}" text-anchor="end" font-size="10">${val}${yLabels.suffix || ''}</text>`;
+  });
+
+  // X-axis labels
+  const xLabels = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'];
+  xLabels.forEach((label, i) => {
+    const x = pad.left + (i / (xLabels.length - 1)) * cw;
+    html += `<text x="${x}" y="${H - 4}" text-anchor="middle" font-size="10">${label}</text>`;
+  });
+
+  // Data lines
+  datasets.forEach(ds => {
+    const points = ds.data.map((v, i) => {
+      const x = pad.left + (i / (ds.data.length - 1)) * cw;
+      const y = pad.top + ch - (v / gridLines[gridLines.length - 1]) * ch;
+      return `${x},${y}`;
+    });
+
+    // Area fill
+    if (ds.fill) {
+      const gradId = svgId + '-' + ds.label;
+      html += `<defs><linearGradient id="${gradId}" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="${ds.color}" stop-opacity="0.15"/>
+        <stop offset="100%" stop-color="${ds.color}" stop-opacity="0"/>
+      </linearGradient></defs>`;
+      html += `<polygon points="${pad.left},${pad.top + ch} ${points.join(' ')} ${W - pad.right},${pad.top + ch}" fill="url(#${gradId})"/>`;
+    }
+
+    // Line
+    html += `<polyline points="${points.join(' ')}" fill="none" stroke="${ds.color}" stroke-width="${ds.width || 1.5}" stroke-linejoin="round" ${ds.dash ? `stroke-dasharray="${ds.dash}"` : ''}/>`;
+  });
+
+  svg.innerHTML = html;
+}
+
+// Failure rate data
+const failureData = randomSeries(96, 0.35, 0.12).map(v => Math.max(0, v));
+drawLineChart('chart-failure', [
+  { label: 'failure', data: failureData, color: '#f43f5e', fill: true },
+  { label: 'threshold', data: Array(96).fill(0.5), color: '#f0b429', width: 1, dash: '4,4' }
+], { suffix: '%' }, [0, 0.25, 0.5, 0.75, 1.0]);
+
+// Latency percentile data
+const p50 = randomSeries(96, 25, 8);
+const p95 = randomSeries(96, 120, 30);
+const p99 = randomSeries(96, 310, 60);
+drawLineChart('chart-latency', [
+  { label: 'p99', data: p99, color: '#f43f5e', fill: true },
+  { label: 'p95', data: p95, color: '#f0b429', fill: true },
+  { label: 'p50', data: p50, color: '#10b981', fill: true },
+], { suffix: 'ms' }, [0, 100, 200, 300, 400, 500]);
+
+// ─── Volume Heatmap ───
+(function() {
+  const container = document.getElementById('heatmap');
+  const daysEl = document.getElementById('heatmap-days');
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  const hours = Array.from({length: 24}, (_, i) => i);
+
+  // Day labels
+  days.forEach(d => {
+    const span = document.createElement('span');
+    span.textContent = d;
+    daysEl.appendChild(span);
+  });
+
+  // Generate volume data (business hours = more traffic)
+  hours.forEach(hour => {
+    const row = document.createElement('div');
+    row.className = 'heatmap-row';
+
+    const label = document.createElement('div');
+    label.className = 'heatmap-label';
+    label.textContent = hour.toString().padStart(2, '0');
+    row.appendChild(label);
+
+    days.forEach(day => {
+      const cell = document.createElement('div');
+      cell.className = 'heatmap-cell';
+
+      // Simulate realistic traffic: business hours (8-18) on weekdays get more
+      const isWeekday = ['Mon','Tue','Wed','Thu','Fri'].includes(day);
+      const isBusinessHour = hour >= 8 && hour <= 18;
+      const isNight = hour >= 0 && hour <= 5;
+
+      let intensity;
+      if (isWeekday && isBusinessHour) {
+        intensity = 0.5 + Math.random() * 0.5;
+      } else if (isWeekday && !isNight) {
+        intensity = 0.2 + Math.random() * 0.3;
+      } else if (isNight) {
+        intensity = 0.02 + Math.random() * 0.08;
+      } else {
+        intensity = 0.05 + Math.random() * 0.2;
+      }
+
+      const volume = Math.floor(intensity * 200000);
+      cell.style.background = `rgba(240, 180, 41, ${intensity * 0.85})`;
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'tooltip';
+      tooltip.textContent = `${day} ${hour}:00 — ${volume.toLocaleString()} txns`;
+      cell.appendChild(tooltip);
+
+      row.appendChild(cell);
+    });
+
+    container.appendChild(row);
+  });
+})();
+
+// ─── Top Failing Routes ───
+(function() {
+  const list = document.getElementById('top-failing');
+  const routes = [
+    { name: 'payment-processing', app: 'payment-gateway', failures: 2841, total: 89420 },
+    { name: 'inventory-check', app: 'inventory-sync', failures: 1203, total: 156000 },
+    { name: 'email-sender', app: 'notification-hub', failures: 987, total: 234000 },
+    { name: 'fraud-check', app: 'order-service-eu', failures: 812, total: 89420 },
+    { name: 'shipment-update', app: 'shipping-tracker', failures: 504, total: 78000 },
+    { name: 'etl-transform-legacy', app: 'etl-pipeline-prod', failures: 398, total: 45000 },
+    { name: 'sms-gateway', app: 'notification-hub', failures: 287, total: 67000 },
+    { name: 'order-validation', app: 'order-service-eu', failures: 115, total: 156000 },
+  ];
+
+  const maxFailures = routes[0].failures;
+  routes.forEach((r, i) => {
+    const pct = ((r.failures / r.total) * 100).toFixed(2);
+    const barWidth = (r.failures / maxFailures) * 100;
+    list.innerHTML += `
+      <li>
+        <span class="rank">${i + 1}</span>
+        <div class="route-info">
+          <div class="route-name">${r.name}</div>
+          <div class="route-app">${r.app}</div>
+        </div>
+        <div class="route-bar"><div class="route-bar-fill" style="width:${barWidth}%;background:var(--rose)"></div></div>
+        <span class="route-metric" style="color:var(--rose)">${r.failures.toLocaleString()}</span>
+      </li>`;
+  });
+})();
+
+// ─── Top Slowest Routes ───
+(function() {
+  const list = document.getElementById('top-slowest');
+  const routes = [
+    { name: 'etl-transform-legacy', app: 'etl-pipeline-prod', p95: 4823 },
+    { name: 'payment-processing', app: 'payment-gateway', p95: 2140 },
+    { name: 'report-generation', app: 'analytics-engine', p95: 1870 },
+    { name: 'fraud-check', app: 'order-service-eu', p95: 892 },
+    { name: 'inventory-batch-sync', app: 'inventory-sync', p95: 756 },
+    { name: 'pdf-invoice-gen', app: 'billing-service', p95: 645 },
+    { name: 'email-template-render', app: 'notification-hub', p95: 412 },
+    { name: 'shipment-tracking-poll', app: 'shipping-tracker', p95: 387 },
+  ];
+
+  const maxP95 = routes[0].p95;
+  routes.forEach((r, i) => {
+    const barWidth = (r.p95 / maxP95) * 100;
+    list.innerHTML += `
+      <li>
+        <span class="rank">${i + 1}</span>
+        <div class="route-info">
+          <div class="route-name">${r.name}</div>
+          <div class="route-app">${r.app}</div>
+        </div>
+        <div class="route-bar"><div class="route-bar-fill" style="width:${barWidth}%;background:var(--amber)"></div></div>
+        <span class="route-metric" style="color:var(--amber)">${r.p95.toLocaleString()}ms</span>
+      </li>`;
+  });
+})();
+
+// ─── Application Health Grid ───
+(function() {
+  const grid = document.getElementById('app-grid');
+  const apps = [
+    'order-service-eu', 'order-service-us', 'order-service-ap',
+    'payment-gateway', 'payment-refunds', 'payment-reconciliation',
+    'inventory-sync', 'inventory-warehouse-eu', 'inventory-warehouse-us',
+    'notification-hub', 'notification-sms', 'notification-push',
+    'etl-pipeline-prod', 'etl-pipeline-staging', 'etl-archive',
+    'shipping-tracker', 'shipping-labels', 'shipping-returns',
+    'customer-portal', 'customer-auth', 'customer-preferences',
+    'analytics-engine', 'analytics-realtime', 'analytics-batch',
+    'billing-service', 'billing-invoices', 'billing-subscriptions',
+    'fraud-detection', 'fraud-rules-engine', 'fraud-ml-scoring',
+    'api-gateway-eu', 'api-gateway-us', 'api-gateway-ap',
+    'search-service', 'search-indexer', 'search-autocomplete',
+    'cms-content', 'cms-media', 'cms-translations',
+    'monitoring-agent', 'monitoring-alerts', 'monitoring-dashboards',
+    'cache-service', 'cache-invalidator',
+    'queue-manager', 'message-router', 'dead-letter-handler',
+  ];
+
+  apps.forEach(name => {
+    const routes = Math.floor(Math.random() * 40) + 5;
+    const failRate = Math.random() * 5;
+    let status = 'healthy';
+    if (failRate > 3) status = 'critical';
+    else if (failRate > 1) status = 'warning';
+
+    // Force some specific statuses for realism
+    if (name === 'payment-gateway') { status = 'warning'; }
+    if (name === 'etl-pipeline-prod') { status = 'critical'; }
+
+    grid.innerHTML += `
+      <div class="app-tile ${status}" title="${name}: ${routes} routes, ${failRate.toFixed(2)}% fail rate">
+        <div class="app-name">${name}</div>
+        <div class="app-stats">
+          <span class="app-routes">${routes} routes</span>
+          <span class="app-rate">${failRate.toFixed(2)}%</span>
+        </div>
+      </div>`;
+  });
+})();
+
+// Time range selector
+document.querySelectorAll('.range-btn').forEach(btn => {
+  btn.addEventListener('click', function() {
+    document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+    this.classList.add('active');
+  });
+});
+</script>
+</body>
+</html>
diff --git a/examples/route-detail-light.html b/examples/route-detail-light.html
new file mode 100644
index 00000000..c495b186
--- /dev/null
+++ b/examples/route-detail-light.html
@@ -0,0 +1,1408 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Route Detail: content-based-routing</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg-deep: #f7f5f2;
+    --bg-base: #efecea;
+    --bg-surface: #ffffff;
+    --bg-raised: #f3f1ee;
+    --bg-hover: #eae7e3;
+    --border: #d4cfc8;
+    --border-subtle: #e4e0db;
+    --text-primary: #1c1917;
+    --text-secondary: #57534e;
+    --text-muted: #a8a29e;
+    --amber: #b45309;
+    --amber-dim: #92400e;
+    --amber-glow: rgba(180, 83, 9, 0.07);
+    --cyan: #0e7490;
+    --cyan-dim: #155e75;
+    --cyan-glow: rgba(14, 116, 144, 0.06);
+    --rose: #be123c;
+    --rose-dim: #9f1239;
+    --rose-glow: rgba(190, 18, 60, 0.05);
+    --green: #047857;
+    --green-glow: rgba(4, 120, 87, 0.06);
+    --blue: #1d4ed8;
+    --purple: #7c3aed;
+    --font-body: 'DM Sans', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg-deep);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+  }
+
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 800px 400px at 20% 20%, rgba(180, 83, 9, 0.03), transparent),
+      radial-gradient(ellipse 600px 600px at 80% 80%, rgba(14, 116, 144, 0.02), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    opacity: 0.018;
+    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23b45309' stroke-width='1'/%3E%3Cpath d='M0 220 Q120 170 200 220 T400 220' fill='none' stroke='%23b45309' stroke-width='0.5'/%3E%3Cpath d='M0 180 Q80 130 200 180 T400 180' fill='none' stroke='%23b45309' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q150 60 200 100 T400 100' fill='none' stroke='%230e7490' stroke-width='0.5'/%3E%3Cpath d='M0 300 Q100 260 200 300 T400 300' fill='none' stroke='%230e7490' stroke-width='0.5'/%3E%3C/svg%3E");
+    background-size: 400px 400px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  a { color: var(--amber); text-decoration: none; }
+  a:hover { color: var(--text-primary); }
+
+  .topnav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(20px) saturate(1.2);
+    border-bottom: 1px solid var(--border-subtle);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    gap: 32px;
+  }
+
+  .topnav .logo {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--amber);
+    letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .topnav .logo svg { width: 22px; height: 22px; }
+
+  .topnav .nav-links {
+    display: flex;
+    gap: 4px;
+    list-style: none;
+  }
+
+  .topnav .nav-links a {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.15s;
+  }
+
+  .topnav .nav-links a:hover { color: var(--text-primary); background: var(--bg-raised); }
+  .topnav .nav-links a.active { color: var(--amber); background: var(--amber-glow); }
+
+  .topnav .nav-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .env-badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--green-glow);
+    color: var(--green);
+    border: 1px solid rgba(4, 120, 87, 0.2);
+    font-weight: 500;
+  }
+
+  .cluster-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .main {
+    position: relative;
+    z-index: 1;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 24px;
+  }
+
+  /* ─── Breadcrumb ─── */
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-bottom: 16px;
+  }
+
+  .breadcrumb a { color: var(--text-secondary); font-weight: 500; }
+  .breadcrumb a:hover { color: var(--amber); }
+  .breadcrumb .sep { color: var(--border); }
+
+  /* ─── Route Header ─── */
+  .route-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 24px;
+    padding: 24px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
+  }
+
+  .route-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--amber), var(--cyan), transparent);
+  }
+
+  .route-header-left h1 {
+    font-family: var(--font-mono);
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+    margin-bottom: 6px;
+    color: var(--text-primary);
+  }
+
+  .route-meta {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .route-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .route-meta-item strong { color: var(--text-secondary); font-weight: 600; }
+  .route-meta-item .dot { width: 7px; height: 7px; border-radius: 50%; }
+
+  .route-header-stats {
+    display: flex;
+    gap: 24px;
+    flex-shrink: 0;
+  }
+
+  .route-stat {
+    text-align: center;
+  }
+
+  .route-stat .val {
+    font-family: var(--font-mono);
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+  }
+
+  .route-stat .lbl {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  /* ─── Tabs ─── */
+  .tabs {
+    display: flex;
+    gap: 2px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--border-subtle);
+    padding-bottom: 0;
+  }
+
+  .tab {
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: all 0.15s;
+  }
+
+  .tab:hover { color: var(--text-secondary); }
+  .tab.active { color: var(--amber); border-bottom-color: var(--amber); }
+
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+
+  /* ─── Cards ─── */
+  .card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    transition: border-color 0.2s;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
+  }
+
+  .card:hover { border-color: var(--border); }
+
+  .card-header {
+    padding: 16px 20px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .card-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .card-subtitle {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .card-body { padding: 20px; }
+
+  /* ─── Route Diagram ─── */
+  .diagram-container {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 24px;
+    overflow-x: auto;
+    position: relative;
+    min-height: 400px;
+  }
+
+  .diagram-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .diagram-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    font-family: var(--font-body);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .diagram-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+  .diagram-btn.active { background: var(--amber-glow); border-color: rgba(180,83,9,0.3); color: var(--amber); }
+
+  .diagram-btn .kbd {
+    font-size: 9px;
+    padding: 1px 5px;
+    border-radius: 3px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .exec-badge {
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    font-weight: 600;
+    font-family: var(--font-mono);
+    background: rgba(4,120,87,0.08);
+    color: var(--green);
+    border: 1px solid rgba(4,120,87,0.2);
+    margin-left: auto;
+  }
+
+  /* SVG Diagram */
+  .diagram-svg {
+    width: 100%;
+    min-width: 800px;
+  }
+
+  .diagram-svg text { font-family: var(--font-mono); }
+
+  .node-group { cursor: pointer; transition: opacity 0.2s; }
+  .node-group:hover .node-rect {
+    filter: drop-shadow(0 0 8px var(--glow-color, rgba(180,83,9,0.3)));
+  }
+
+  .overlay-mode .node-group.dim { opacity: 0.35; }
+  .overlay-mode .node-group.dim:hover { opacity: 0.55; }
+  .overlay-mode .edge-path.dim { opacity: 0.12; }
+  .overlay-mode .node-group.hot .node-rect {
+    filter: drop-shadow(0 0 10px rgba(4,120,87,0.4));
+  }
+
+  /* ─── Grid layouts ─── */
+  .grid-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .grid-3 {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  /* ─── Recent Executions Timeline ─── */
+  .timeline {
+    position: relative;
+  }
+
+  .timeline::before {
+    content: '';
+    position: absolute;
+    left: 20px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--border);
+  }
+
+  .timeline-item {
+    display: flex;
+    gap: 16px;
+    padding: 12px 0;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.1s;
+    border-radius: var(--radius-sm);
+    padding-left: 4px;
+  }
+
+  .timeline-item:hover { background: var(--bg-raised); }
+
+  .timeline-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-top: 4px;
+    z-index: 1;
+    border: 2px solid var(--bg-surface);
+  }
+
+  .timeline-dot.completed { background: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
+  .timeline-dot.failed { background: var(--rose); box-shadow: 0 0 0 3px var(--rose-glow); }
+
+  .timeline-content { flex: 1; min-width: 0; }
+
+  .timeline-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .timeline-id {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .timeline-time {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .timeline-details {
+    display: flex;
+    gap: 16px;
+    margin-top: 4px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .timeline-details span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .timeline-error {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--rose);
+    margin-top: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ─── Performance Histogram ─── */
+  .histogram {
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    height: 140px;
+    padding-top: 10px;
+  }
+
+  .histogram-bar-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .histogram-bar {
+    width: 100%;
+    border-radius: 3px 3px 0 0;
+    transition: all 0.2s;
+    min-height: 2px;
+    position: relative;
+  }
+
+  .histogram-bar-wrap:hover .histogram-bar {
+    filter: brightness(1.1);
+    box-shadow: 0 0 8px rgba(180, 83, 9, 0.2);
+  }
+
+  .histogram-bar-wrap .bar-tooltip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 6px 10px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  }
+
+  .histogram-bar-wrap:hover .bar-tooltip { display: block; }
+
+  .histogram-labels {
+    display: flex;
+    gap: 3px;
+    margin-top: 6px;
+  }
+
+  .histogram-labels span {
+    flex: 1;
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--text-muted);
+  }
+
+  .histogram-percentiles {
+    display: flex;
+    gap: 24px;
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .percentile {
+    text-align: center;
+  }
+
+  .percentile .pval {
+    font-family: var(--font-mono);
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+  }
+
+  .percentile .plbl {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  /* ─── Throughput Chart ─── */
+  .svg-chart {
+    width: 100%;
+    overflow: visible;
+  }
+
+  .svg-chart text {
+    font-family: var(--font-mono);
+    fill: var(--text-muted);
+    font-size: 10px;
+  }
+
+  .chart-legend {
+    display: flex;
+    gap: 16px;
+    margin-top: 12px;
+  }
+
+  .chart-legend .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .chart-legend .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+  }
+
+  /* ─── Processor Table ─── */
+  .proc-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+  }
+
+  .proc-table thead th {
+    padding: 10px 12px;
+    text-align: left;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-raised);
+  }
+
+  .proc-table tbody td {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    vertical-align: middle;
+  }
+
+  .proc-table tbody tr:hover { background: var(--bg-raised); }
+
+  .proc-type-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  .proc-type-badge.endpoint { background: rgba(29,78,216,0.08); color: var(--blue); }
+  .proc-type-badge.eip { background: rgba(124,58,237,0.08); color: var(--purple); }
+  .proc-type-badge.processor { background: var(--green-glow); color: var(--green); }
+
+  .pct-bar {
+    width: 60px;
+    height: 4px;
+    background: var(--bg-base);
+    border-radius: 2px;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+
+  .pct-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  /* ─── Animations ─── */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes livePulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.3); }
+    50% { box-shadow: 0 0 0 6px rgba(4, 120, 87, 0); }
+  }
+
+  .animate-in { animation: fadeIn 0.3s ease-out both; }
+  .delay-1 { animation-delay: 0.05s; }
+  .delay-2 { animation-delay: 0.1s; }
+  .delay-3 { animation-delay: 0.15s; }
+  .delay-4 { animation-delay: 0.2s; }
+
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+  @media (max-width: 1200px) {
+    .grid-2, .grid-3 { grid-template-columns: 1fr; }
+    .route-header { flex-direction: column; }
+    .route-header-stats { align-self: stretch; justify-content: space-around; }
+  }
+</style>
+</head>
+<body>
+
+<nav class="topnav">
+  <div class="logo">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"/>
+      <path d="M12 6v6l4 2"/>
+    </svg>
+    cameleer3
+  </div>
+  <ul class="nav-links">
+    <li><a href="dashboard-light.html">Dashboard</a></li>
+    <li><a href="transaction-explorer-light.html">Transactions</a></li>
+    <li><a href="route-detail-light.html" class="active">Routes</a></li>
+  </ul>
+  <div class="nav-right">
+    <span class="env-badge">PRODUCTION</span>
+    <span class="cluster-count">47 apps · 1,283 routes</span>
+  </div>
+</nav>
+
+<main class="main">
+
+  <!-- Breadcrumb -->
+  <div class="breadcrumb animate-in">
+    <a href="dashboard-light.html">Dashboard</a>
+    <span class="sep">›</span>
+    <a href="#">order-service-eu</a>
+    <span class="sep">›</span>
+    <span style="color:var(--amber)">content-based-routing</span>
+  </div>
+
+  <!-- Route Header -->
+  <div class="route-header animate-in delay-1">
+    <div class="route-header-left">
+      <h1>content-based-routing</h1>
+      <div class="route-meta">
+        <div class="route-meta-item">
+          <span class="dot" style="background:var(--green)"></span>
+          <strong>Running</strong>
+        </div>
+        <div class="route-meta-item">
+          Application: <strong>order-service-eu</strong>
+        </div>
+        <div class="route-meta-item">
+          From: <strong style="font-family:var(--font-mono);font-size:11px">direct:content-based-routing</strong>
+        </div>
+        <div class="route-meta-item">
+          Processors: <strong>14</strong>
+        </div>
+        <div class="route-meta-item">
+          Uptime: <strong>12d 7h 43m</strong>
+        </div>
+      </div>
+    </div>
+    <div class="route-header-stats">
+      <div class="route-stat">
+        <div class="val" style="color:var(--amber)">89.4K</div>
+        <div class="lbl">Today</div>
+      </div>
+      <div class="route-stat">
+        <div class="val" style="color:var(--green)">99.72%</div>
+        <div class="lbl">Success</div>
+      </div>
+      <div class="route-stat">
+        <div class="val" style="color:var(--cyan)">47ms</div>
+        <div class="lbl">p50</div>
+      </div>
+      <div class="route-stat">
+        <div class="val" style="color:var(--rose)">312ms</div>
+        <div class="lbl">p99</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tabs -->
+  <div class="tabs animate-in delay-2">
+    <div class="tab active" data-tab="diagram">Diagram</div>
+    <div class="tab" data-tab="performance">Performance</div>
+    <div class="tab" data-tab="executions">Recent Executions</div>
+    <div class="tab" data-tab="processors">Processor Breakdown</div>
+  </div>
+
+  <!-- ═══ TAB: Diagram ═══ -->
+  <div class="tab-panel active" id="tab-diagram">
+    <div class="card animate-in delay-3">
+      <div class="card-body" style="padding:16px">
+        <div class="diagram-toolbar">
+          <button class="diagram-btn" id="btn-overlay" onclick="toggleOverlay()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+            Execution Overlay
+            <span class="kbd">E</span>
+          </button>
+          <button class="diagram-btn" onclick="this.classList.toggle('active')">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+            Zoom
+          </button>
+          <span class="exec-badge" id="exec-badge" style="display:none">COMPLETED · 47ms · 8 processors</span>
+        </div>
+        <div class="diagram-container" id="diagram-container">
+          <svg class="diagram-svg" id="route-diagram" viewBox="0 0 900 480"></svg>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB: Performance ═══ -->
+  <div class="tab-panel" id="tab-performance">
+    <div class="grid-2 animate-in delay-3">
+      <!-- Duration Histogram -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <div class="card-title">Duration Distribution</div>
+            <div class="card-subtitle">Last 24h · 89,420 exchanges</div>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="histogram" id="histogram"></div>
+          <div class="histogram-labels" id="histogram-labels"></div>
+          <div class="histogram-percentiles">
+            <div class="percentile"><div class="pval" style="color:var(--green)">23ms</div><div class="plbl">p50</div></div>
+            <div class="percentile"><div class="pval" style="color:var(--cyan)">47ms</div><div class="plbl">p75</div></div>
+            <div class="percentile"><div class="pval" style="color:var(--amber)">142ms</div><div class="plbl">p95</div></div>
+            <div class="percentile"><div class="pval" style="color:var(--rose)">312ms</div><div class="plbl">p99</div></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Throughput Over Time -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <div class="card-title">Throughput Over Time</div>
+            <div class="card-subtitle">Exchanges/min · last 24h</div>
+          </div>
+        </div>
+        <div class="card-body">
+          <svg class="svg-chart" viewBox="0 0 500 200" id="chart-throughput"></svg>
+          <div class="chart-legend">
+            <div class="legend-item"><div class="legend-dot" style="background:var(--amber)"></div> Volume</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> Failures</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error Rate vs Latency Correlation -->
+    <div class="card animate-in delay-4">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Error Rate vs Latency</div>
+          <div class="card-subtitle">Last 24h · 15-min windows</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <svg class="svg-chart" viewBox="0 0 900 180" id="chart-correlation"></svg>
+        <div class="chart-legend">
+          <div class="legend-item"><div class="legend-dot" style="background:var(--cyan)"></div> Avg Latency (ms)</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> Error Rate (%)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB: Recent Executions ═══ -->
+  <div class="tab-panel" id="tab-executions">
+    <div class="card animate-in delay-3">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Recent Executions</div>
+          <div class="card-subtitle">Last 50 exchanges</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="timeline" id="timeline"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB: Processor Breakdown ═══ -->
+  <div class="tab-panel" id="tab-processors">
+    <div class="card animate-in delay-3">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Processor Performance Breakdown</div>
+          <div class="card-subtitle">Average across last 1,000 exchanges</div>
+        </div>
+      </div>
+      <div class="card-body" style="padding:0">
+        <table class="proc-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Processor</th>
+              <th>Type</th>
+              <th>Endpoint</th>
+              <th>Avg Duration</th>
+              <th>% of Total</th>
+              <th>Calls</th>
+              <th>Error Rate</th>
+            </tr>
+          </thead>
+          <tbody id="proc-table-body"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<script>
+// ─── Tab Switching ───
+document.querySelectorAll('.tab').forEach(tab => {
+  tab.addEventListener('click', function() {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+    this.classList.add('active');
+    document.getElementById('tab-' + this.dataset.tab).classList.add('active');
+  });
+});
+
+// ─── Route Diagram ───
+const NODES = [
+  { id: 'from', label: 'direct:content-based-routing', type: 'endpoint', x: 100, y: 30, w: 200, h: 38 },
+  { id: 'log1', label: 'Log: Received', type: 'processor', x: 100, y: 90, w: 200, h: 38 },
+  { id: 'setheader', label: 'SetHeader: correlationId', type: 'processor', x: 100, y: 150, w: 200, h: 38 },
+  { id: 'choice', label: 'Content Based Router', type: 'eip', x: 100, y: 220, w: 200, h: 38 },
+  // HIGH branch
+  { id: 'when-high', label: 'When: priority=HIGH', type: 'eip', x: 20, y: 290, w: 180, h: 34 },
+  { id: 'to-priority', label: 'direct:priority-processing', type: 'endpoint', x: 20, y: 340, w: 180, h: 34 },
+  // NORMAL branch
+  { id: 'when-normal', label: 'When: priority=NORMAL', type: 'eip', x: 220, y: 290, w: 180, h: 34 },
+  { id: 'to-standard', label: 'direct:standard-processing', type: 'endpoint', x: 220, y: 340, w: 180, h: 34 },
+  // LOW branch
+  { id: 'otherwise', label: 'Otherwise', type: 'eip', x: 420, y: 290, w: 180, h: 34 },
+  { id: 'to-batch', label: 'seda:batch-queue', type: 'endpoint', x: 420, y: 340, w: 180, h: 34 },
+  // Cross-route references
+  { id: 'cross-priority', label: 'priority-processing', type: 'cross-route', x: 20, y: 400, w: 180, h: 30 },
+  { id: 'cross-standard', label: 'standard-processing', type: 'cross-route', x: 220, y: 400, w: 180, h: 30 },
+  // Converge
+  { id: 'marshal', label: 'Marshal: JSON', type: 'processor', x: 220, y: 440, w: 180, h: 34 },
+  { id: 'to-audit', label: 'jms:queue:AUDIT.LOG', type: 'endpoint', x: 620, y: 220, w: 180, h: 38 },
+];
+
+const EDGES = [
+  { from: 'from', to: 'log1', type: 'flow' },
+  { from: 'log1', to: 'setheader', type: 'flow' },
+  { from: 'setheader', to: 'choice', type: 'flow' },
+  { from: 'choice', to: 'when-high', type: 'branch', label: 'HIGH' },
+  { from: 'choice', to: 'when-normal', type: 'branch', label: 'NORMAL' },
+  { from: 'choice', to: 'otherwise', type: 'branch', label: 'OTHER' },
+  { from: 'when-high', to: 'to-priority', type: 'flow' },
+  { from: 'when-normal', to: 'to-standard', type: 'flow' },
+  { from: 'otherwise', to: 'to-batch', type: 'flow' },
+  { from: 'to-priority', to: 'cross-priority', type: 'cross-route' },
+  { from: 'to-standard', to: 'cross-standard', type: 'cross-route' },
+  { from: 'choice', to: 'to-audit', type: 'flow' },
+];
+
+// Execution path (highlighted in overlay)
+const EXEC_PATH = ['from', 'log1', 'setheader', 'choice', 'when-high', 'to-priority', 'cross-priority', 'marshal'];
+const EXEC_DURATIONS = { from: 0, log1: 1, setheader: 1, choice: 0, 'when-high': 0, 'to-priority': 35, 'cross-priority': 0, marshal: 2 };
+
+function getNodeColor(type) {
+  switch(type) {
+    case 'endpoint': return { fill: 'rgba(29,78,216,0.06)', stroke: 'rgba(29,78,216,0.4)', text: '#1d4ed8' };
+    case 'processor': return { fill: 'rgba(4,120,87,0.06)', stroke: 'rgba(4,120,87,0.4)', text: '#047857' };
+    case 'eip': return { fill: 'rgba(124,58,237,0.06)', stroke: 'rgba(124,58,237,0.4)', text: '#7c3aed' };
+    case 'cross-route': return { fill: 'rgba(14,116,144,0.06)', stroke: 'rgba(14,116,144,0.4)', text: '#0e7490' };
+    default: return { fill: 'rgba(168,162,158,0.1)', stroke: 'rgba(168,162,158,0.4)', text: '#57534e' };
+  }
+}
+
+function getEdgeColor(type) {
+  switch(type) {
+    case 'flow': return '#a8a29e';
+    case 'branch': return '#b45309';
+    case 'cross-route': return '#0e7490';
+    case 'error': return '#be123c';
+    default: return '#a8a29e';
+  }
+}
+
+function drawDiagram() {
+  const svg = document.getElementById('route-diagram');
+  let html = '';
+
+  // Defs for markers
+  html += `<defs>
+    <marker id="arrow-flow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#a8a29e"/>
+    </marker>
+    <marker id="arrow-branch" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#b45309"/>
+    </marker>
+    <marker id="arrow-cross" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#0e7490"/>
+    </marker>
+    <marker id="arrow-exec" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#047857"/>
+    </marker>
+    <filter id="glow-green">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>`;
+
+  const nodeMap = {};
+  NODES.forEach(n => nodeMap[n.id] = n);
+
+  // Draw edges
+  EDGES.forEach(e => {
+    const from = nodeMap[e.from];
+    const to = nodeMap[e.to];
+    if (!from || !to) return;
+
+    const x1 = from.x + from.w / 2;
+    const y1 = from.y + from.h;
+    const x2 = to.x + to.w / 2;
+    const y2 = to.y;
+
+    const color = getEdgeColor(e.type);
+    const markerId = e.type === 'branch' ? 'arrow-branch' : e.type === 'cross-route' ? 'arrow-cross' : 'arrow-flow';
+    const dash = e.type === 'cross-route' ? 'stroke-dasharray="5,3"' : '';
+
+    // Bezier for non-straight paths
+    const midY = (y1 + y2) / 2;
+    const path = `M${x1},${y1} C${x1},${midY} ${x2},${midY} ${x2},${y2}`;
+
+    html += `<path class="edge-path" data-from="${e.from}" data-to="${e.to}" d="${path}" fill="none" stroke="${color}" stroke-width="1.5" marker-end="url(#${markerId})" ${dash} opacity="0.6"/>`;
+
+    // Branch label
+    if (e.label) {
+      const lx = (x1 + x2) / 2 + (x1 < x2 ? -20 : 20);
+      const ly = midY - 4;
+      html += `<text x="${lx}" y="${ly}" font-size="9" fill="#b45309" text-anchor="middle" font-weight="600">${e.label}</text>`;
+    }
+  });
+
+  // Draw nodes
+  NODES.forEach(n => {
+    const c = getNodeColor(n.type);
+    const isExec = EXEC_PATH.includes(n.id);
+
+    html += `<g class="node-group" data-id="${n.id}" style="--glow-color:${c.stroke}">`;
+
+    // Rect
+    const rx = n.type === 'cross-route' ? 14 : 8;
+    const dashArr = n.type === 'cross-route' ? 'stroke-dasharray="4,3"' : '';
+    html += `<rect class="node-rect" x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="${rx}" fill="${c.fill}" stroke="${c.stroke}" stroke-width="1.5" ${dashArr}/>`;
+
+    // Label
+    const fontSize = n.label.length > 28 ? 9 : 10;
+    html += `<text x="${n.x + n.w/2}" y="${n.y + n.h/2 + 3}" text-anchor="middle" fill="#1c1917" font-size="${fontSize}" font-weight="500">${n.label}</text>`;
+
+    // Type badge (small)
+    if (n.type === 'cross-route') {
+      html += `<text x="${n.x + n.w - 8}" y="${n.y + 10}" text-anchor="end" fill="${c.text}" font-size="7" opacity="0.6">↗ route</text>`;
+    }
+
+    html += `</g>`;
+  });
+
+  svg.innerHTML = html;
+}
+
+let overlayActive = false;
+
+function toggleOverlay() {
+  overlayActive = !overlayActive;
+  const container = document.getElementById('diagram-container');
+  const btn = document.getElementById('btn-overlay');
+  const badge = document.getElementById('exec-badge');
+
+  if (overlayActive) {
+    container.classList.add('overlay-mode');
+    btn.classList.add('active');
+    badge.style.display = 'inline-flex';
+
+    // Dim non-executed nodes
+    document.querySelectorAll('.node-group').forEach(g => {
+      const id = g.dataset.id;
+      if (EXEC_PATH.includes(id)) {
+        g.classList.add('hot');
+        g.classList.remove('dim');
+        // Change stroke to green
+        const rect = g.querySelector('.node-rect');
+        rect.setAttribute('stroke', '#047857');
+        rect.setAttribute('stroke-width', '2');
+        rect.setAttribute('filter', 'url(#glow-green)');
+      } else {
+        g.classList.add('dim');
+        g.classList.remove('hot');
+      }
+    });
+
+    // Dim non-executed edges
+    document.querySelectorAll('.edge-path').forEach(e => {
+      const from = e.dataset.from;
+      const to = e.dataset.to;
+      const fromIdx = EXEC_PATH.indexOf(from);
+      const toIdx = EXEC_PATH.indexOf(to);
+      if (fromIdx >= 0 && toIdx >= 0 && Math.abs(fromIdx - toIdx) <= 2) {
+        e.classList.remove('dim');
+        e.setAttribute('stroke', '#047857');
+        e.setAttribute('stroke-width', '2.5');
+        e.setAttribute('opacity', '0.9');
+        e.setAttribute('marker-end', 'url(#arrow-exec)');
+      } else {
+        e.classList.add('dim');
+      }
+    });
+
+    // Add sequence numbers and duration badges
+    const svg = document.getElementById('route-diagram');
+    EXEC_PATH.forEach((id, idx) => {
+      const node = NODES.find(n => n.id === id);
+      if (!node) return;
+      const dur = EXEC_DURATIONS[id] || 0;
+
+      // Sequence badge
+      const badge = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      badge.classList.add('exec-overlay-badge');
+      badge.innerHTML = `
+        <circle cx="${node.x - 4}" cy="${node.y + node.h/2}" r="10" fill="#047857" opacity="0.9"/>
+        <text x="${node.x - 4}" y="${node.y + node.h/2 + 3.5}" text-anchor="middle" fill="#ffffff" font-size="9" font-weight="700">${idx + 1}</text>
+      `;
+      svg.appendChild(badge);
+
+      // Duration pill
+      if (dur > 0) {
+        const pill = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        pill.classList.add('exec-overlay-badge');
+        const tw = dur.toString().length * 7 + 24;
+        pill.innerHTML = `
+          <rect x="${node.x + node.w/2 - tw/2}" y="${node.y - 18}" width="${tw}" height="16" rx="8" fill="rgba(255,255,255,0.95)" stroke="rgba(4,120,87,0.3)" stroke-width="0.5" filter="url(#pill-shadow)"/>
+          <text x="${node.x + node.w/2}" y="${node.y - 7}" text-anchor="middle" fill="#047857" font-size="9" font-weight="600">${dur}ms</text>
+        `;
+        svg.appendChild(pill);
+      }
+    });
+
+  } else {
+    container.classList.remove('overlay-mode');
+    btn.classList.remove('active');
+    badge.style.display = 'none';
+
+    // Remove overlays and restore
+    document.querySelectorAll('.exec-overlay-badge').forEach(b => b.remove());
+    document.querySelectorAll('.node-group').forEach(g => {
+      g.classList.remove('hot', 'dim');
+      const rect = g.querySelector('.node-rect');
+      const id = g.dataset.id;
+      const node = NODES.find(n => n.id === id);
+      if (node) {
+        const c = getNodeColor(node.type);
+        rect.setAttribute('stroke', c.stroke);
+        rect.setAttribute('stroke-width', '1.5');
+        rect.removeAttribute('filter');
+      }
+    });
+    document.querySelectorAll('.edge-path').forEach(e => {
+      e.classList.remove('dim');
+      const from = e.dataset.from;
+      const edge = EDGES.find(ed => ed.from === from && ed.to === e.dataset.to);
+      if (edge) {
+        e.setAttribute('stroke', getEdgeColor(edge.type));
+        e.setAttribute('stroke-width', '1.5');
+        e.setAttribute('opacity', '0.6');
+        const markerId = edge.type === 'branch' ? 'arrow-branch' : edge.type === 'cross-route' ? 'arrow-cross' : 'arrow-flow';
+        e.setAttribute('marker-end', `url(#${markerId})`);
+      }
+    });
+  }
+}
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'e' || e.key === 'E') toggleOverlay();
+});
+
+drawDiagram();
+
+// ─── Histogram ───
+(function() {
+  const hist = document.getElementById('histogram');
+  const labels = document.getElementById('histogram-labels');
+
+  const buckets = [
+    { range: '0-5', count: 8420, pct: 9.4 },
+    { range: '5-10', count: 14230, pct: 15.9 },
+    { range: '10-20', count: 21560, pct: 24.1 },
+    { range: '20-50', count: 25340, pct: 28.3 },
+    { range: '50-100', count: 11200, pct: 12.5 },
+    { range: '100-200', count: 4890, pct: 5.5 },
+    { range: '200-500', count: 2340, pct: 2.6 },
+    { range: '500-1k', count: 980, pct: 1.1 },
+    { range: '1-2k', count: 340, pct: 0.4 },
+    { range: '2-5k', count: 98, pct: 0.1 },
+    { range: '5k+', count: 22, pct: 0.02 },
+  ];
+
+  const maxCount = Math.max(...buckets.map(b => b.count));
+
+  buckets.forEach(b => {
+    const height = (b.count / maxCount) * 100;
+    const hue = height > 70 ? 150 : height > 40 ? 40 : 0;
+    const color = height > 70 ? 'var(--amber)' : height > 40 ? 'rgba(180,83,9,0.7)' : 'rgba(180,83,9,0.4)';
+
+    hist.innerHTML += `
+      <div class="histogram-bar-wrap">
+        <div class="bar-tooltip">${b.range}ms: ${b.count.toLocaleString()} (${b.pct}%)</div>
+        <div class="histogram-bar" style="height:${height}%;background:${color}"></div>
+      </div>`;
+
+    labels.innerHTML += `<span>${b.range}</span>`;
+  });
+})();
+
+// ─── Throughput Chart ───
+(function() {
+  const svg = document.getElementById('chart-throughput');
+  const W = 500, H = 200;
+  const pad = { top: 10, right: 10, bottom: 25, left: 40 };
+  const cw = W - pad.left - pad.right;
+  const ch = H - pad.top - pad.bottom;
+
+  let html = '';
+
+  // Grid
+  [0, 25, 50, 75, 100].forEach(val => {
+    const y = pad.top + ch - (val / 100) * ch;
+    html += `<line x1="${pad.left}" y1="${y}" x2="${W-pad.right}" y2="${y}" stroke="var(--border-subtle)" stroke-width="0.5"/>`;
+    html += `<text x="${pad.left-6}" y="${y+3}" text-anchor="end" font-size="9" fill="var(--text-muted)">${val}</text>`;
+  });
+
+  // X labels
+  ['00:00','06:00','12:00','18:00','24:00'].forEach((l, i) => {
+    const x = pad.left + (i/4) * cw;
+    html += `<text x="${x}" y="${H-4}" text-anchor="middle" font-size="9" fill="var(--text-muted)">${l}</text>`;
+  });
+
+  // Volume area
+  const volData = [];
+  for (let i = 0; i < 96; i++) {
+    const hour = i / 4;
+    const base = hour >= 8 && hour <= 18 ? 70 : hour >= 6 && hour <= 20 ? 40 : 10;
+    volData.push(base + Math.random() * 20 - 10);
+  }
+
+  const volPoints = volData.map((v, i) => {
+    const x = pad.left + (i / 95) * cw;
+    const y = pad.top + ch - (v / 100) * ch;
+    return `${x},${y}`;
+  });
+
+  html += `<defs><linearGradient id="vol-grad" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0%" stop-color="var(--amber)" stop-opacity="0.08"/>
+    <stop offset="100%" stop-color="var(--amber)" stop-opacity="0"/>
+  </linearGradient></defs>`;
+  html += `<polygon points="${pad.left},${pad.top+ch} ${volPoints.join(' ')} ${W-pad.right},${pad.top+ch}" fill="url(#vol-grad)"/>`;
+  html += `<polyline points="${volPoints.join(' ')}" fill="none" stroke="var(--amber)" stroke-width="1.5"/>`;
+
+  // Failure line (scaled up for visibility)
+  const failPoints = volData.map((v, i) => {
+    const x = pad.left + (i / 95) * cw;
+    const fRate = Math.random() * 3 + 0.5;
+    const y = pad.top + ch - (fRate / 100) * ch * 20; // scaled
+    return `${x},${y}`;
+  });
+  html += `<polyline points="${failPoints.join(' ')}" fill="none" stroke="var(--rose)" stroke-width="1" opacity="0.7"/>`;
+
+  svg.innerHTML = html;
+})();
+
+// ─── Correlation Chart ───
+(function() {
+  const svg = document.getElementById('chart-correlation');
+  const W = 900, H = 180;
+  const pad = { top: 10, right: 10, bottom: 25, left: 40 };
+  const cw = W - pad.left - pad.right;
+  const ch = H - pad.top - pad.bottom;
+  let html = '';
+
+  // Grid
+  [0, 50, 100, 150, 200].forEach(val => {
+    const y = pad.top + ch - (val / 200) * ch;
+    html += `<line x1="${pad.left}" y1="${y}" x2="${W-pad.right}" y2="${y}" stroke="var(--border-subtle)" stroke-width="0.5"/>`;
+    html += `<text x="${pad.left-6}" y="${y+3}" text-anchor="end" font-size="9" fill="var(--text-muted)">${val}ms</text>`;
+  });
+
+  const labels = ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'];
+  labels.forEach((l, i) => {
+    const x = pad.left + (i / (labels.length-1)) * cw;
+    html += `<text x="${x}" y="${H-4}" text-anchor="middle" font-size="9" fill="var(--text-muted)">${l}</text>`;
+  });
+
+  // Latency area
+  const latData = [];
+  for (let i = 0; i < 96; i++) latData.push(30 + Math.random() * 80);
+
+  const latPoints = latData.map((v, i) => `${pad.left + (i/95)*cw},${pad.top + ch - (v/200)*ch}`);
+
+  html += `<defs><linearGradient id="lat-grad" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0%" stop-color="var(--cyan)" stop-opacity="0.08"/>
+    <stop offset="100%" stop-color="var(--cyan)" stop-opacity="0"/>
+  </linearGradient></defs>`;
+  html += `<polygon points="${pad.left},${pad.top+ch} ${latPoints.join(' ')} ${W-pad.right},${pad.top+ch}" fill="url(#lat-grad)"/>`;
+  html += `<polyline points="${latPoints.join(' ')}" fill="none" stroke="var(--cyan)" stroke-width="1.5"/>`;
+
+  // Error rate bars
+  for (let i = 0; i < 96; i++) {
+    const x = pad.left + (i / 95) * cw;
+    const rate = Math.random() * 2;
+    const barH = (rate / 200) * ch * 30;
+    html += `<rect x="${x-2}" y="${pad.top + ch - barH}" width="4" height="${barH}" fill="var(--rose)" opacity="0.3" rx="1"/>`;
+  }
+
+  svg.innerHTML = html;
+})();
+
+// ─── Timeline ───
+(function() {
+  const timeline = document.getElementById('timeline');
+  const now = Date.now();
+
+  const executions = [];
+  for (let i = 0; i < 30; i++) {
+    const failed = Math.random() < 0.05;
+    executions.push({
+      id: Math.random().toString(16).slice(2, 18),
+      time: new Date(now - i * (Math.random() * 3000 + 1000)),
+      status: failed ? 'failed' : 'completed',
+      duration: failed ? Math.floor(Math.random() * 5000) + 200 : Math.floor(Math.random() * 300) + 10,
+      processors: Math.floor(Math.random() * 10) + 4,
+      correlationId: Math.random().toString(16).slice(2, 18),
+      error: failed ? 'HttpOperationFailedException: HTTP 503 from payment-provider-api' : null,
+    });
+  }
+
+  executions.forEach(exec => {
+    const timeStr = exec.time.toTimeString().slice(0, 12);
+    const durColor = exec.duration > 1000 ? 'var(--rose)' : exec.duration > 200 ? 'var(--amber)' : 'var(--green)';
+
+    timeline.innerHTML += `
+      <div class="timeline-item">
+        <div class="timeline-dot ${exec.status}"></div>
+        <div class="timeline-content">
+          <div class="timeline-top">
+            <span class="timeline-id">${exec.id}</span>
+            <span class="timeline-time">${timeStr}</span>
+          </div>
+          <div class="timeline-details">
+            <span style="color:${durColor};font-family:var(--font-mono);font-weight:600">${exec.duration}ms</span>
+            <span>${exec.processors} processors</span>
+            <span style="color:var(--text-muted);font-family:var(--font-mono);font-size:10px">corr: ${exec.correlationId}</span>
+          </div>
+          ${exec.error ? `<div class="timeline-error">${exec.error}</div>` : ''}
+        </div>
+      </div>`;
+  });
+})();
+
+// ─── Processor Breakdown Table ───
+(function() {
+  const tbody = document.getElementById('proc-table-body');
+  const processors = [
+    { id: 'from1', type: 'Endpoint', cat: 'endpoint', uri: 'direct:content-based-routing', avgMs: 0.3, pct: 0.6, calls: 89420, errRate: 0 },
+    { id: 'log1', type: 'Log', cat: 'processor', uri: 'Received order: ${body}', avgMs: 0.8, pct: 1.7, calls: 89420, errRate: 0 },
+    { id: 'setHeader1', type: 'SetHeader', cat: 'processor', uri: 'X-Cameleer-CorrelationId', avgMs: 0.4, pct: 0.8, calls: 89420, errRate: 0 },
+    { id: 'choice1', type: 'Choice (CBR)', cat: 'eip', uri: 'content-based-router', avgMs: 0.2, pct: 0.4, calls: 89420, errRate: 0 },
+    { id: 'when1', type: 'When', cat: 'eip', uri: 'priority == HIGH', avgMs: 0.1, pct: 0.2, calls: 34210, errRate: 0 },
+    { id: 'to-prio', type: 'To', cat: 'endpoint', uri: 'direct:priority-processing', avgMs: 35.2, pct: 74.5, calls: 34210, errRate: 0.31 },
+    { id: 'when2', type: 'When', cat: 'eip', uri: 'priority == NORMAL', avgMs: 0.1, pct: 0.2, calls: 42850, errRate: 0 },
+    { id: 'to-std', type: 'To', cat: 'endpoint', uri: 'direct:standard-processing', avgMs: 8.4, pct: 17.8, calls: 42850, errRate: 0.08 },
+    { id: 'other', type: 'Otherwise', cat: 'eip', uri: '(default branch)', avgMs: 0.1, pct: 0.2, calls: 12360, errRate: 0 },
+    { id: 'to-batch', type: 'To', cat: 'endpoint', uri: 'seda:batch-queue', avgMs: 1.2, pct: 2.5, calls: 12360, errRate: 0 },
+    { id: 'marshal', type: 'Marshal', cat: 'processor', uri: 'JSON (Jackson)', avgMs: 0.5, pct: 1.1, calls: 89420, errRate: 0 },
+  ];
+
+  processors.forEach((p, idx) => {
+    const errColor = p.errRate > 0.1 ? 'var(--rose)' : p.errRate > 0 ? 'var(--amber)' : 'var(--text-muted)';
+    const pctColor = p.pct > 50 ? 'var(--rose)' : p.pct > 20 ? 'var(--amber)' : 'var(--green)';
+
+    tbody.innerHTML += `
+      <tr>
+        <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted)">${idx + 1}</td>
+        <td style="font-weight:600;font-size:12px">${p.id}</td>
+        <td><span class="proc-type-badge ${p.cat}">${p.type}</span></td>
+        <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${p.uri}</td>
+        <td style="font-family:var(--font-mono);font-size:12px;font-weight:600">${p.avgMs}ms</td>
+        <td>
+          <div class="pct-bar"><div class="pct-bar-fill" style="width:${p.pct}%;background:${pctColor}"></div></div>
+          <span style="font-family:var(--font-mono);font-size:11px;color:${pctColor}">${p.pct}%</span>
+        </td>
+        <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)">${p.calls.toLocaleString()}</td>
+        <td style="font-family:var(--font-mono);font-size:11px;color:${errColor}">${p.errRate > 0 ? p.errRate + '%' : '—'}</td>
+      </tr>`;
+  });
+})();
+</script>
+</body>
+</html>
diff --git a/examples/route-detail.html b/examples/route-detail.html
new file mode 100644
index 00000000..e0ee138e
--- /dev/null
+++ b/examples/route-detail.html
@@ -0,0 +1,1403 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Route Detail: content-based-routing</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg-deep: #060a13;
+    --bg-base: #0a0e17;
+    --bg-surface: #111827;
+    --bg-raised: #1a2332;
+    --bg-hover: #1e2d3d;
+    --border: #1e2d3d;
+    --border-subtle: #152030;
+    --text-primary: #e2e8f0;
+    --text-secondary: #8b9cb6;
+    --text-muted: #4a5e7a;
+    --amber: #f0b429;
+    --amber-dim: #b8860b;
+    --amber-glow: rgba(240, 180, 41, 0.15);
+    --cyan: #22d3ee;
+    --cyan-dim: #0e7490;
+    --cyan-glow: rgba(34, 211, 238, 0.12);
+    --rose: #f43f5e;
+    --rose-dim: #9f1239;
+    --rose-glow: rgba(244, 63, 94, 0.12);
+    --blue: #3b82f6;
+    --green: #10b981;
+    --green-glow: rgba(16, 185, 129, 0.12);
+    --purple: #a855f7;
+    --font-body: 'DM Sans', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg-deep);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+  }
+
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 800px 400px at 20% 20%, rgba(240, 180, 41, 0.03), transparent),
+      radial-gradient(ellipse 600px 600px at 80% 80%, rgba(34, 211, 238, 0.02), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    opacity: 0.025;
+    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23f0b429' stroke-width='1'/%3E%3Cpath d='M0 220 Q120 170 200 220 T400 220' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 180 Q80 130 200 180 T400 180' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q150 60 200 100 T400 100' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3Cpath d='M0 300 Q100 260 200 300 T400 300' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3C/svg%3E");
+    background-size: 400px 400px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  a { color: var(--amber); text-decoration: none; }
+  a:hover { color: var(--text-primary); }
+
+  .topnav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(6, 10, 19, 0.85);
+    backdrop-filter: blur(20px) saturate(1.2);
+    border-bottom: 1px solid var(--border-subtle);
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    gap: 32px;
+  }
+
+  .topnav .logo {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--amber);
+    letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .topnav .logo svg { width: 22px; height: 22px; }
+
+  .topnav .nav-links {
+    display: flex;
+    gap: 4px;
+    list-style: none;
+  }
+
+  .topnav .nav-links a {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.15s;
+  }
+
+  .topnav .nav-links a:hover { color: var(--text-primary); background: var(--bg-raised); }
+  .topnav .nav-links a.active { color: var(--amber); background: var(--amber-glow); }
+
+  .topnav .nav-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .env-badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--green-glow);
+    color: var(--green);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    font-weight: 500;
+  }
+
+  .cluster-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .main {
+    position: relative;
+    z-index: 1;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 24px;
+  }
+
+  /* ─── Breadcrumb ─── */
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-bottom: 16px;
+  }
+
+  .breadcrumb a { color: var(--text-secondary); font-weight: 500; }
+  .breadcrumb a:hover { color: var(--amber); }
+  .breadcrumb .sep { color: var(--border); }
+
+  /* ─── Route Header ─── */
+  .route-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 24px;
+    padding: 24px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .route-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--amber), var(--cyan), transparent);
+  }
+
+  .route-header-left h1 {
+    font-family: var(--font-mono);
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+    margin-bottom: 6px;
+  }
+
+  .route-meta {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .route-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .route-meta-item strong { color: var(--text-secondary); font-weight: 600; }
+  .route-meta-item .dot { width: 7px; height: 7px; border-radius: 50%; }
+
+  .route-header-stats {
+    display: flex;
+    gap: 24px;
+    flex-shrink: 0;
+  }
+
+  .route-stat {
+    text-align: center;
+  }
+
+  .route-stat .val {
+    font-family: var(--font-mono);
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+  }
+
+  .route-stat .lbl {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  /* ─── Tabs ─── */
+  .tabs {
+    display: flex;
+    gap: 2px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--border-subtle);
+    padding-bottom: 0;
+  }
+
+  .tab {
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: all 0.15s;
+  }
+
+  .tab:hover { color: var(--text-secondary); }
+  .tab.active { color: var(--amber); border-bottom-color: var(--amber); }
+
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+
+  /* ─── Cards ─── */
+  .card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    transition: border-color 0.2s;
+  }
+
+  .card:hover { border-color: var(--border); }
+
+  .card-header {
+    padding: 16px 20px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .card-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .card-subtitle {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .card-body { padding: 20px; }
+
+  /* ─── Route Diagram ─── */
+  .diagram-container {
+    background: var(--bg-base);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 24px;
+    overflow-x: auto;
+    position: relative;
+    min-height: 400px;
+  }
+
+  .diagram-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .diagram-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-raised);
+    color: var(--text-secondary);
+    font-family: var(--font-body);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .diagram-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+  .diagram-btn.active { background: var(--green-glow); border-color: rgba(16,185,129,0.3); color: var(--green); }
+
+  .diagram-btn .kbd {
+    font-size: 9px;
+    padding: 1px 5px;
+    border-radius: 3px;
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .exec-badge {
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    font-weight: 600;
+    font-family: var(--font-mono);
+    background: rgba(16,185,129,0.1);
+    color: var(--green);
+    border: 1px solid rgba(16,185,129,0.2);
+    margin-left: auto;
+  }
+
+  /* SVG Diagram */
+  .diagram-svg {
+    width: 100%;
+    min-width: 800px;
+  }
+
+  .diagram-svg text { font-family: var(--font-mono); }
+
+  .node-group { cursor: pointer; transition: opacity 0.2s; }
+  .node-group:hover .node-rect {
+    filter: drop-shadow(0 0 8px var(--glow-color, rgba(240,180,41,0.5)));
+  }
+
+  .overlay-mode .node-group.dim { opacity: 0.15; }
+  .overlay-mode .node-group.dim:hover { opacity: 0.4; }
+  .overlay-mode .edge-path.dim { opacity: 0.08; }
+  .overlay-mode .node-group.hot .node-rect {
+    filter: drop-shadow(0 0 12px rgba(16,185,129,0.6));
+  }
+
+  /* ─── Grid layouts ─── */
+  .grid-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .grid-3 {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  /* ─── Recent Executions Timeline ─── */
+  .timeline {
+    position: relative;
+  }
+
+  .timeline::before {
+    content: '';
+    position: absolute;
+    left: 20px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--border);
+  }
+
+  .timeline-item {
+    display: flex;
+    gap: 16px;
+    padding: 12px 0;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.1s;
+    border-radius: var(--radius-sm);
+    padding-left: 4px;
+  }
+
+  .timeline-item:hover { background: var(--bg-raised); }
+
+  .timeline-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-top: 4px;
+    z-index: 1;
+    border: 2px solid var(--bg-surface);
+  }
+
+  .timeline-dot.completed { background: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
+  .timeline-dot.failed { background: var(--rose); box-shadow: 0 0 0 3px var(--rose-glow); }
+
+  .timeline-content { flex: 1; min-width: 0; }
+
+  .timeline-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .timeline-id {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .timeline-time {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .timeline-details {
+    display: flex;
+    gap: 16px;
+    margin-top: 4px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .timeline-details span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .timeline-error {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--rose);
+    margin-top: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ─── Performance Histogram ─── */
+  .histogram {
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    height: 140px;
+    padding-top: 10px;
+  }
+
+  .histogram-bar-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .histogram-bar {
+    width: 100%;
+    border-radius: 3px 3px 0 0;
+    transition: all 0.2s;
+    min-height: 2px;
+    position: relative;
+  }
+
+  .histogram-bar-wrap:hover .histogram-bar {
+    filter: brightness(1.3);
+    box-shadow: 0 0 8px rgba(240, 180, 41, 0.3);
+  }
+
+  .histogram-bar-wrap .bar-tooltip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 6px 10px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
+  }
+
+  .histogram-bar-wrap:hover .bar-tooltip { display: block; }
+
+  .histogram-labels {
+    display: flex;
+    gap: 3px;
+    margin-top: 6px;
+  }
+
+  .histogram-labels span {
+    flex: 1;
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--text-muted);
+  }
+
+  .histogram-percentiles {
+    display: flex;
+    gap: 24px;
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .percentile {
+    text-align: center;
+  }
+
+  .percentile .pval {
+    font-family: var(--font-mono);
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+  }
+
+  .percentile .plbl {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  /* ─── Throughput Chart ─── */
+  .svg-chart {
+    width: 100%;
+    overflow: visible;
+  }
+
+  .svg-chart text {
+    font-family: var(--font-mono);
+    fill: var(--text-muted);
+    font-size: 10px;
+  }
+
+  .chart-legend {
+    display: flex;
+    gap: 16px;
+    margin-top: 12px;
+  }
+
+  .chart-legend .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .chart-legend .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+  }
+
+  /* ─── Processor Table ─── */
+  .proc-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+  }
+
+  .proc-table thead th {
+    padding: 10px 12px;
+    text-align: left;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-raised);
+  }
+
+  .proc-table tbody td {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    vertical-align: middle;
+  }
+
+  .proc-table tbody tr:hover { background: var(--bg-raised); }
+
+  .proc-type-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  .proc-type-badge.endpoint { background: rgba(59,130,246,0.12); color: var(--blue); }
+  .proc-type-badge.eip { background: rgba(168,85,247,0.12); color: var(--purple); }
+  .proc-type-badge.processor { background: var(--green-glow); color: var(--green); }
+
+  .pct-bar {
+    width: 60px;
+    height: 4px;
+    background: var(--bg-base);
+    border-radius: 2px;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+
+  .pct-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  /* ─── Animations ─── */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes livePulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+  }
+
+  .animate-in { animation: fadeIn 0.3s ease-out both; }
+  .delay-1 { animation-delay: 0.05s; }
+  .delay-2 { animation-delay: 0.1s; }
+  .delay-3 { animation-delay: 0.15s; }
+  .delay-4 { animation-delay: 0.2s; }
+
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+  @media (max-width: 1200px) {
+    .grid-2, .grid-3 { grid-template-columns: 1fr; }
+    .route-header { flex-direction: column; }
+    .route-header-stats { align-self: stretch; justify-content: space-around; }
+  }
+</style>
+</head>
+<body>
+
+<nav class="topnav">
+  <div class="logo">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"/>
+      <path d="M12 6v6l4 2"/>
+    </svg>
+    cameleer3
+  </div>
+  <ul class="nav-links">
+    <li><a href="dashboard.html">Dashboard</a></li>
+    <li><a href="transaction-explorer.html">Transactions</a></li>
+    <li><a href="route-detail.html" class="active">Routes</a></li>
+  </ul>
+  <div class="nav-right">
+    <span class="env-badge">PRODUCTION</span>
+    <span class="cluster-count">47 apps · 1,283 routes</span>
+  </div>
+</nav>
+
+<main class="main">
+
+  <!-- Breadcrumb -->
+  <div class="breadcrumb animate-in">
+    <a href="dashboard.html">Dashboard</a>
+    <span class="sep">›</span>
+    <a href="#">order-service-eu</a>
+    <span class="sep">›</span>
+    <span style="color:var(--text-secondary)">content-based-routing</span>
+  </div>
+
+  <!-- Route Header -->
+  <div class="route-header animate-in delay-1">
+    <div class="route-header-left">
+      <h1>content-based-routing</h1>
+      <div class="route-meta">
+        <div class="route-meta-item">
+          <span class="dot" style="background:var(--green)"></span>
+          <strong>Running</strong>
+        </div>
+        <div class="route-meta-item">
+          Application: <strong>order-service-eu</strong>
+        </div>
+        <div class="route-meta-item">
+          From: <strong style="font-family:var(--font-mono);font-size:11px">direct:content-based-routing</strong>
+        </div>
+        <div class="route-meta-item">
+          Processors: <strong>14</strong>
+        </div>
+        <div class="route-meta-item">
+          Uptime: <strong>12d 7h 43m</strong>
+        </div>
+      </div>
+    </div>
+    <div class="route-header-stats">
+      <div class="route-stat">
+        <div class="val" style="color:var(--amber)">89.4K</div>
+        <div class="lbl">Today</div>
+      </div>
+      <div class="route-stat">
+        <div class="val" style="color:var(--green)">99.72%</div>
+        <div class="lbl">Success</div>
+      </div>
+      <div class="route-stat">
+        <div class="val" style="color:var(--cyan)">47ms</div>
+        <div class="lbl">p50</div>
+      </div>
+      <div class="route-stat">
+        <div class="val" style="color:var(--rose)">312ms</div>
+        <div class="lbl">p99</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tabs -->
+  <div class="tabs animate-in delay-2">
+    <div class="tab active" data-tab="diagram">Diagram</div>
+    <div class="tab" data-tab="performance">Performance</div>
+    <div class="tab" data-tab="executions">Recent Executions</div>
+    <div class="tab" data-tab="processors">Processor Breakdown</div>
+  </div>
+
+  <!-- ═══ TAB: Diagram ═══ -->
+  <div class="tab-panel active" id="tab-diagram">
+    <div class="card animate-in delay-3">
+      <div class="card-body" style="padding:16px">
+        <div class="diagram-toolbar">
+          <button class="diagram-btn" id="btn-overlay" onclick="toggleOverlay()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+            Execution Overlay
+            <span class="kbd">E</span>
+          </button>
+          <button class="diagram-btn" onclick="this.classList.toggle('active')">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+            Zoom
+          </button>
+          <span class="exec-badge" id="exec-badge" style="display:none">COMPLETED · 47ms · 8 processors</span>
+        </div>
+        <div class="diagram-container" id="diagram-container">
+          <svg class="diagram-svg" id="route-diagram" viewBox="0 0 900 480"></svg>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB: Performance ═══ -->
+  <div class="tab-panel" id="tab-performance">
+    <div class="grid-2 animate-in delay-3">
+      <!-- Duration Histogram -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <div class="card-title">Duration Distribution</div>
+            <div class="card-subtitle">Last 24h · 89,420 exchanges</div>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="histogram" id="histogram"></div>
+          <div class="histogram-labels" id="histogram-labels"></div>
+          <div class="histogram-percentiles">
+            <div class="percentile"><div class="pval" style="color:var(--green)">23ms</div><div class="plbl">p50</div></div>
+            <div class="percentile"><div class="pval" style="color:var(--cyan)">47ms</div><div class="plbl">p75</div></div>
+            <div class="percentile"><div class="pval" style="color:var(--amber)">142ms</div><div class="plbl">p95</div></div>
+            <div class="percentile"><div class="pval" style="color:var(--rose)">312ms</div><div class="plbl">p99</div></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Throughput Over Time -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <div class="card-title">Throughput Over Time</div>
+            <div class="card-subtitle">Exchanges/min · last 24h</div>
+          </div>
+        </div>
+        <div class="card-body">
+          <svg class="svg-chart" viewBox="0 0 500 200" id="chart-throughput"></svg>
+          <div class="chart-legend">
+            <div class="legend-item"><div class="legend-dot" style="background:var(--amber)"></div> Volume</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> Failures</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error Rate vs Latency Correlation -->
+    <div class="card animate-in delay-4">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Error Rate vs Latency</div>
+          <div class="card-subtitle">Last 24h · 15-min windows</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <svg class="svg-chart" viewBox="0 0 900 180" id="chart-correlation"></svg>
+        <div class="chart-legend">
+          <div class="legend-item"><div class="legend-dot" style="background:var(--cyan)"></div> Avg Latency (ms)</div>
+          <div class="legend-item"><div class="legend-dot" style="background:var(--rose)"></div> Error Rate (%)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB: Recent Executions ═══ -->
+  <div class="tab-panel" id="tab-executions">
+    <div class="card animate-in delay-3">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Recent Executions</div>
+          <div class="card-subtitle">Last 50 exchanges</div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="timeline" id="timeline"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ TAB: Processor Breakdown ═══ -->
+  <div class="tab-panel" id="tab-processors">
+    <div class="card animate-in delay-3">
+      <div class="card-header">
+        <div>
+          <div class="card-title">Processor Performance Breakdown</div>
+          <div class="card-subtitle">Average across last 1,000 exchanges</div>
+        </div>
+      </div>
+      <div class="card-body" style="padding:0">
+        <table class="proc-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Processor</th>
+              <th>Type</th>
+              <th>Endpoint</th>
+              <th>Avg Duration</th>
+              <th>% of Total</th>
+              <th>Calls</th>
+              <th>Error Rate</th>
+            </tr>
+          </thead>
+          <tbody id="proc-table-body"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<script>
+// ─── Tab Switching ───
+document.querySelectorAll('.tab').forEach(tab => {
+  tab.addEventListener('click', function() {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+    this.classList.add('active');
+    document.getElementById('tab-' + this.dataset.tab).classList.add('active');
+  });
+});
+
+// ─── Route Diagram ───
+const NODES = [
+  { id: 'from', label: 'direct:content-based-routing', type: 'endpoint', x: 100, y: 30, w: 200, h: 38 },
+  { id: 'log1', label: 'Log: Received', type: 'processor', x: 100, y: 90, w: 200, h: 38 },
+  { id: 'setheader', label: 'SetHeader: correlationId', type: 'processor', x: 100, y: 150, w: 200, h: 38 },
+  { id: 'choice', label: 'Content Based Router', type: 'eip', x: 100, y: 220, w: 200, h: 38 },
+  // HIGH branch
+  { id: 'when-high', label: 'When: priority=HIGH', type: 'eip', x: 20, y: 290, w: 180, h: 34 },
+  { id: 'to-priority', label: 'direct:priority-processing', type: 'endpoint', x: 20, y: 340, w: 180, h: 34 },
+  // NORMAL branch
+  { id: 'when-normal', label: 'When: priority=NORMAL', type: 'eip', x: 220, y: 290, w: 180, h: 34 },
+  { id: 'to-standard', label: 'direct:standard-processing', type: 'endpoint', x: 220, y: 340, w: 180, h: 34 },
+  // LOW branch
+  { id: 'otherwise', label: 'Otherwise', type: 'eip', x: 420, y: 290, w: 180, h: 34 },
+  { id: 'to-batch', label: 'seda:batch-queue', type: 'endpoint', x: 420, y: 340, w: 180, h: 34 },
+  // Cross-route references
+  { id: 'cross-priority', label: 'priority-processing', type: 'cross-route', x: 20, y: 400, w: 180, h: 30 },
+  { id: 'cross-standard', label: 'standard-processing', type: 'cross-route', x: 220, y: 400, w: 180, h: 30 },
+  // Converge
+  { id: 'marshal', label: 'Marshal: JSON', type: 'processor', x: 220, y: 440, w: 180, h: 34 },
+  { id: 'to-audit', label: 'jms:queue:AUDIT.LOG', type: 'endpoint', x: 620, y: 220, w: 180, h: 38 },
+];
+
+const EDGES = [
+  { from: 'from', to: 'log1', type: 'flow' },
+  { from: 'log1', to: 'setheader', type: 'flow' },
+  { from: 'setheader', to: 'choice', type: 'flow' },
+  { from: 'choice', to: 'when-high', type: 'branch', label: 'HIGH' },
+  { from: 'choice', to: 'when-normal', type: 'branch', label: 'NORMAL' },
+  { from: 'choice', to: 'otherwise', type: 'branch', label: 'OTHER' },
+  { from: 'when-high', to: 'to-priority', type: 'flow' },
+  { from: 'when-normal', to: 'to-standard', type: 'flow' },
+  { from: 'otherwise', to: 'to-batch', type: 'flow' },
+  { from: 'to-priority', to: 'cross-priority', type: 'cross-route' },
+  { from: 'to-standard', to: 'cross-standard', type: 'cross-route' },
+  { from: 'choice', to: 'to-audit', type: 'flow' },
+];
+
+// Execution path (highlighted in overlay)
+const EXEC_PATH = ['from', 'log1', 'setheader', 'choice', 'when-high', 'to-priority', 'cross-priority', 'marshal'];
+const EXEC_DURATIONS = { from: 0, log1: 1, setheader: 1, choice: 0, 'when-high': 0, 'to-priority': 35, 'cross-priority': 0, marshal: 2 };
+
+function getNodeColor(type) {
+  switch(type) {
+    case 'endpoint': return { fill: 'rgba(59,130,246,0.12)', stroke: 'rgba(59,130,246,0.5)', text: '#3b82f6' };
+    case 'processor': return { fill: 'rgba(16,185,129,0.12)', stroke: 'rgba(16,185,129,0.5)', text: '#10b981' };
+    case 'eip': return { fill: 'rgba(168,85,247,0.12)', stroke: 'rgba(168,85,247,0.5)', text: '#a855f7' };
+    case 'cross-route': return { fill: 'rgba(34,211,238,0.08)', stroke: 'rgba(34,211,238,0.4)', text: '#22d3ee' };
+    default: return { fill: 'rgba(139,156,182,0.12)', stroke: 'rgba(139,156,182,0.4)', text: '#8b9cb6' };
+  }
+}
+
+function getEdgeColor(type) {
+  switch(type) {
+    case 'flow': return '#4a5e7a';
+    case 'branch': return '#f0b429';
+    case 'cross-route': return '#22d3ee';
+    case 'error': return '#f43f5e';
+    default: return '#4a5e7a';
+  }
+}
+
+function drawDiagram() {
+  const svg = document.getElementById('route-diagram');
+  let html = '';
+
+  // Defs for markers
+  html += `<defs>
+    <marker id="arrow-flow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#4a5e7a"/>
+    </marker>
+    <marker id="arrow-branch" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#f0b429"/>
+    </marker>
+    <marker id="arrow-cross" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#22d3ee"/>
+    </marker>
+    <marker id="arrow-exec" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6" fill="#10b981"/>
+    </marker>
+    <filter id="glow-green">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>`;
+
+  const nodeMap = {};
+  NODES.forEach(n => nodeMap[n.id] = n);
+
+  // Draw edges
+  EDGES.forEach(e => {
+    const from = nodeMap[e.from];
+    const to = nodeMap[e.to];
+    if (!from || !to) return;
+
+    const x1 = from.x + from.w / 2;
+    const y1 = from.y + from.h;
+    const x2 = to.x + to.w / 2;
+    const y2 = to.y;
+
+    const color = getEdgeColor(e.type);
+    const markerId = e.type === 'branch' ? 'arrow-branch' : e.type === 'cross-route' ? 'arrow-cross' : 'arrow-flow';
+    const dash = e.type === 'cross-route' ? 'stroke-dasharray="5,3"' : '';
+
+    // Bezier for non-straight paths
+    const midY = (y1 + y2) / 2;
+    const path = `M${x1},${y1} C${x1},${midY} ${x2},${midY} ${x2},${y2}`;
+
+    html += `<path class="edge-path" data-from="${e.from}" data-to="${e.to}" d="${path}" fill="none" stroke="${color}" stroke-width="1.5" marker-end="url(#${markerId})" ${dash} opacity="0.6"/>`;
+
+    // Branch label
+    if (e.label) {
+      const lx = (x1 + x2) / 2 + (x1 < x2 ? -20 : 20);
+      const ly = midY - 4;
+      html += `<text x="${lx}" y="${ly}" font-size="9" fill="#f0b429" text-anchor="middle" font-weight="600">${e.label}</text>`;
+    }
+  });
+
+  // Draw nodes
+  NODES.forEach(n => {
+    const c = getNodeColor(n.type);
+    const isExec = EXEC_PATH.includes(n.id);
+
+    html += `<g class="node-group" data-id="${n.id}" style="--glow-color:${c.stroke}">`;
+
+    // Rect
+    const rx = n.type === 'cross-route' ? 14 : 8;
+    const dashArr = n.type === 'cross-route' ? 'stroke-dasharray="4,3"' : '';
+    html += `<rect class="node-rect" x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="${rx}" fill="${c.fill}" stroke="${c.stroke}" stroke-width="1.5" ${dashArr}/>`;
+
+    // Label
+    const fontSize = n.label.length > 28 ? 9 : 10;
+    html += `<text x="${n.x + n.w/2}" y="${n.y + n.h/2 + 3}" text-anchor="middle" fill="${c.text}" font-size="${fontSize}" font-weight="500">${n.label}</text>`;
+
+    // Type badge (small)
+    if (n.type === 'cross-route') {
+      html += `<text x="${n.x + n.w - 8}" y="${n.y + 10}" text-anchor="end" fill="${c.text}" font-size="7" opacity="0.6">↗ route</text>`;
+    }
+
+    html += `</g>`;
+  });
+
+  svg.innerHTML = html;
+}
+
+let overlayActive = false;
+
+function toggleOverlay() {
+  overlayActive = !overlayActive;
+  const container = document.getElementById('diagram-container');
+  const btn = document.getElementById('btn-overlay');
+  const badge = document.getElementById('exec-badge');
+
+  if (overlayActive) {
+    container.classList.add('overlay-mode');
+    btn.classList.add('active');
+    badge.style.display = 'inline-flex';
+
+    // Dim non-executed nodes
+    document.querySelectorAll('.node-group').forEach(g => {
+      const id = g.dataset.id;
+      if (EXEC_PATH.includes(id)) {
+        g.classList.add('hot');
+        g.classList.remove('dim');
+        // Change stroke to green
+        const rect = g.querySelector('.node-rect');
+        rect.setAttribute('stroke', '#10b981');
+        rect.setAttribute('stroke-width', '2');
+        rect.setAttribute('filter', 'url(#glow-green)');
+      } else {
+        g.classList.add('dim');
+        g.classList.remove('hot');
+      }
+    });
+
+    // Dim non-executed edges
+    document.querySelectorAll('.edge-path').forEach(e => {
+      const from = e.dataset.from;
+      const to = e.dataset.to;
+      const fromIdx = EXEC_PATH.indexOf(from);
+      const toIdx = EXEC_PATH.indexOf(to);
+      if (fromIdx >= 0 && toIdx >= 0 && Math.abs(fromIdx - toIdx) <= 2) {
+        e.classList.remove('dim');
+        e.setAttribute('stroke', '#10b981');
+        e.setAttribute('stroke-width', '2.5');
+        e.setAttribute('opacity', '0.9');
+        e.setAttribute('marker-end', 'url(#arrow-exec)');
+      } else {
+        e.classList.add('dim');
+      }
+    });
+
+    // Add sequence numbers and duration badges
+    const svg = document.getElementById('route-diagram');
+    EXEC_PATH.forEach((id, idx) => {
+      const node = NODES.find(n => n.id === id);
+      if (!node) return;
+      const dur = EXEC_DURATIONS[id] || 0;
+
+      // Sequence badge
+      const badge = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      badge.classList.add('exec-overlay-badge');
+      badge.innerHTML = `
+        <circle cx="${node.x - 4}" cy="${node.y + node.h/2}" r="10" fill="#10b981" opacity="0.9"/>
+        <text x="${node.x - 4}" y="${node.y + node.h/2 + 3.5}" text-anchor="middle" fill="#060a13" font-size="9" font-weight="700">${idx + 1}</text>
+      `;
+      svg.appendChild(badge);
+
+      // Duration pill
+      if (dur > 0) {
+        const pill = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        pill.classList.add('exec-overlay-badge');
+        const tw = dur.toString().length * 7 + 24;
+        pill.innerHTML = `
+          <rect x="${node.x + node.w/2 - tw/2}" y="${node.y - 18}" width="${tw}" height="16" rx="8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.4)" stroke-width="0.5"/>
+          <text x="${node.x + node.w/2}" y="${node.y - 7}" text-anchor="middle" fill="#10b981" font-size="9" font-weight="600">${dur}ms</text>
+        `;
+        svg.appendChild(pill);
+      }
+    });
+
+  } else {
+    container.classList.remove('overlay-mode');
+    btn.classList.remove('active');
+    badge.style.display = 'none';
+
+    // Remove overlays and restore
+    document.querySelectorAll('.exec-overlay-badge').forEach(b => b.remove());
+    document.querySelectorAll('.node-group').forEach(g => {
+      g.classList.remove('hot', 'dim');
+      const rect = g.querySelector('.node-rect');
+      const id = g.dataset.id;
+      const node = NODES.find(n => n.id === id);
+      if (node) {
+        const c = getNodeColor(node.type);
+        rect.setAttribute('stroke', c.stroke);
+        rect.setAttribute('stroke-width', '1.5');
+        rect.removeAttribute('filter');
+      }
+    });
+    document.querySelectorAll('.edge-path').forEach(e => {
+      e.classList.remove('dim');
+      const from = e.dataset.from;
+      const edge = EDGES.find(ed => ed.from === from && ed.to === e.dataset.to);
+      if (edge) {
+        e.setAttribute('stroke', getEdgeColor(edge.type));
+        e.setAttribute('stroke-width', '1.5');
+        e.setAttribute('opacity', '0.6');
+        const markerId = edge.type === 'branch' ? 'arrow-branch' : edge.type === 'cross-route' ? 'arrow-cross' : 'arrow-flow';
+        e.setAttribute('marker-end', `url(#${markerId})`);
+      }
+    });
+  }
+}
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'e' || e.key === 'E') toggleOverlay();
+});
+
+drawDiagram();
+
+// ─── Histogram ───
+(function() {
+  const hist = document.getElementById('histogram');
+  const labels = document.getElementById('histogram-labels');
+
+  const buckets = [
+    { range: '0-5', count: 8420, pct: 9.4 },
+    { range: '5-10', count: 14230, pct: 15.9 },
+    { range: '10-20', count: 21560, pct: 24.1 },
+    { range: '20-50', count: 25340, pct: 28.3 },
+    { range: '50-100', count: 11200, pct: 12.5 },
+    { range: '100-200', count: 4890, pct: 5.5 },
+    { range: '200-500', count: 2340, pct: 2.6 },
+    { range: '500-1k', count: 980, pct: 1.1 },
+    { range: '1-2k', count: 340, pct: 0.4 },
+    { range: '2-5k', count: 98, pct: 0.1 },
+    { range: '5k+', count: 22, pct: 0.02 },
+  ];
+
+  const maxCount = Math.max(...buckets.map(b => b.count));
+
+  buckets.forEach(b => {
+    const height = (b.count / maxCount) * 100;
+    const hue = height > 70 ? 150 : height > 40 ? 40 : 0;
+    const color = height > 70 ? 'var(--amber)' : height > 40 ? 'rgba(240,180,41,0.7)' : 'rgba(240,180,41,0.4)';
+
+    hist.innerHTML += `
+      <div class="histogram-bar-wrap">
+        <div class="bar-tooltip">${b.range}ms: ${b.count.toLocaleString()} (${b.pct}%)</div>
+        <div class="histogram-bar" style="height:${height}%;background:${color}"></div>
+      </div>`;
+
+    labels.innerHTML += `<span>${b.range}</span>`;
+  });
+})();
+
+// ─── Throughput Chart ───
+(function() {
+  const svg = document.getElementById('chart-throughput');
+  const W = 500, H = 200;
+  const pad = { top: 10, right: 10, bottom: 25, left: 40 };
+  const cw = W - pad.left - pad.right;
+  const ch = H - pad.top - pad.bottom;
+
+  let html = '';
+
+  // Grid
+  [0, 25, 50, 75, 100].forEach(val => {
+    const y = pad.top + ch - (val / 100) * ch;
+    html += `<line x1="${pad.left}" y1="${y}" x2="${W-pad.right}" y2="${y}" stroke="var(--border-subtle)" stroke-width="0.5"/>`;
+    html += `<text x="${pad.left-6}" y="${y+3}" text-anchor="end" font-size="9" fill="var(--text-muted)">${val}</text>`;
+  });
+
+  // X labels
+  ['00:00','06:00','12:00','18:00','24:00'].forEach((l, i) => {
+    const x = pad.left + (i/4) * cw;
+    html += `<text x="${x}" y="${H-4}" text-anchor="middle" font-size="9" fill="var(--text-muted)">${l}</text>`;
+  });
+
+  // Volume area
+  const volData = [];
+  for (let i = 0; i < 96; i++) {
+    const hour = i / 4;
+    const base = hour >= 8 && hour <= 18 ? 70 : hour >= 6 && hour <= 20 ? 40 : 10;
+    volData.push(base + Math.random() * 20 - 10);
+  }
+
+  const volPoints = volData.map((v, i) => {
+    const x = pad.left + (i / 95) * cw;
+    const y = pad.top + ch - (v / 100) * ch;
+    return `${x},${y}`;
+  });
+
+  html += `<defs><linearGradient id="vol-grad" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0%" stop-color="var(--amber)" stop-opacity="0.2"/>
+    <stop offset="100%" stop-color="var(--amber)" stop-opacity="0"/>
+  </linearGradient></defs>`;
+  html += `<polygon points="${pad.left},${pad.top+ch} ${volPoints.join(' ')} ${W-pad.right},${pad.top+ch}" fill="url(#vol-grad)"/>`;
+  html += `<polyline points="${volPoints.join(' ')}" fill="none" stroke="var(--amber)" stroke-width="1.5"/>`;
+
+  // Failure line (scaled up for visibility)
+  const failPoints = volData.map((v, i) => {
+    const x = pad.left + (i / 95) * cw;
+    const fRate = Math.random() * 3 + 0.5;
+    const y = pad.top + ch - (fRate / 100) * ch * 20; // scaled
+    return `${x},${y}`;
+  });
+  html += `<polyline points="${failPoints.join(' ')}" fill="none" stroke="var(--rose)" stroke-width="1" opacity="0.7"/>`;
+
+  svg.innerHTML = html;
+})();
+
+// ─── Correlation Chart ───
+(function() {
+  const svg = document.getElementById('chart-correlation');
+  const W = 900, H = 180;
+  const pad = { top: 10, right: 10, bottom: 25, left: 40 };
+  const cw = W - pad.left - pad.right;
+  const ch = H - pad.top - pad.bottom;
+  let html = '';
+
+  // Grid
+  [0, 50, 100, 150, 200].forEach(val => {
+    const y = pad.top + ch - (val / 200) * ch;
+    html += `<line x1="${pad.left}" y1="${y}" x2="${W-pad.right}" y2="${y}" stroke="var(--border-subtle)" stroke-width="0.5"/>`;
+    html += `<text x="${pad.left-6}" y="${y+3}" text-anchor="end" font-size="9" fill="var(--text-muted)">${val}ms</text>`;
+  });
+
+  const labels = ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'];
+  labels.forEach((l, i) => {
+    const x = pad.left + (i / (labels.length-1)) * cw;
+    html += `<text x="${x}" y="${H-4}" text-anchor="middle" font-size="9" fill="var(--text-muted)">${l}</text>`;
+  });
+
+  // Latency area
+  const latData = [];
+  for (let i = 0; i < 96; i++) latData.push(30 + Math.random() * 80);
+
+  const latPoints = latData.map((v, i) => `${pad.left + (i/95)*cw},${pad.top + ch - (v/200)*ch}`);
+
+  html += `<defs><linearGradient id="lat-grad" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0%" stop-color="var(--cyan)" stop-opacity="0.15"/>
+    <stop offset="100%" stop-color="var(--cyan)" stop-opacity="0"/>
+  </linearGradient></defs>`;
+  html += `<polygon points="${pad.left},${pad.top+ch} ${latPoints.join(' ')} ${W-pad.right},${pad.top+ch}" fill="url(#lat-grad)"/>`;
+  html += `<polyline points="${latPoints.join(' ')}" fill="none" stroke="var(--cyan)" stroke-width="1.5"/>`;
+
+  // Error rate bars
+  for (let i = 0; i < 96; i++) {
+    const x = pad.left + (i / 95) * cw;
+    const rate = Math.random() * 2;
+    const barH = (rate / 200) * ch * 30;
+    html += `<rect x="${x-2}" y="${pad.top + ch - barH}" width="4" height="${barH}" fill="var(--rose)" opacity="0.3" rx="1"/>`;
+  }
+
+  svg.innerHTML = html;
+})();
+
+// ─── Timeline ───
+(function() {
+  const timeline = document.getElementById('timeline');
+  const now = Date.now();
+
+  const executions = [];
+  for (let i = 0; i < 30; i++) {
+    const failed = Math.random() < 0.05;
+    executions.push({
+      id: Math.random().toString(16).slice(2, 18),
+      time: new Date(now - i * (Math.random() * 3000 + 1000)),
+      status: failed ? 'failed' : 'completed',
+      duration: failed ? Math.floor(Math.random() * 5000) + 200 : Math.floor(Math.random() * 300) + 10,
+      processors: Math.floor(Math.random() * 10) + 4,
+      correlationId: Math.random().toString(16).slice(2, 18),
+      error: failed ? 'HttpOperationFailedException: HTTP 503 from payment-provider-api' : null,
+    });
+  }
+
+  executions.forEach(exec => {
+    const timeStr = exec.time.toTimeString().slice(0, 12);
+    const durColor = exec.duration > 1000 ? 'var(--rose)' : exec.duration > 200 ? 'var(--amber)' : 'var(--green)';
+
+    timeline.innerHTML += `
+      <div class="timeline-item">
+        <div class="timeline-dot ${exec.status}"></div>
+        <div class="timeline-content">
+          <div class="timeline-top">
+            <span class="timeline-id">${exec.id}</span>
+            <span class="timeline-time">${timeStr}</span>
+          </div>
+          <div class="timeline-details">
+            <span style="color:${durColor};font-family:var(--font-mono);font-weight:600">${exec.duration}ms</span>
+            <span>${exec.processors} processors</span>
+            <span style="color:var(--text-muted);font-family:var(--font-mono);font-size:10px">corr: ${exec.correlationId}</span>
+          </div>
+          ${exec.error ? `<div class="timeline-error">${exec.error}</div>` : ''}
+        </div>
+      </div>`;
+  });
+})();
+
+// ─── Processor Breakdown Table ───
+(function() {
+  const tbody = document.getElementById('proc-table-body');
+  const processors = [
+    { id: 'from1', type: 'Endpoint', cat: 'endpoint', uri: 'direct:content-based-routing', avgMs: 0.3, pct: 0.6, calls: 89420, errRate: 0 },
+    { id: 'log1', type: 'Log', cat: 'processor', uri: 'Received order: ${body}', avgMs: 0.8, pct: 1.7, calls: 89420, errRate: 0 },
+    { id: 'setHeader1', type: 'SetHeader', cat: 'processor', uri: 'X-Cameleer-CorrelationId', avgMs: 0.4, pct: 0.8, calls: 89420, errRate: 0 },
+    { id: 'choice1', type: 'Choice (CBR)', cat: 'eip', uri: 'content-based-router', avgMs: 0.2, pct: 0.4, calls: 89420, errRate: 0 },
+    { id: 'when1', type: 'When', cat: 'eip', uri: 'priority == HIGH', avgMs: 0.1, pct: 0.2, calls: 34210, errRate: 0 },
+    { id: 'to-prio', type: 'To', cat: 'endpoint', uri: 'direct:priority-processing', avgMs: 35.2, pct: 74.5, calls: 34210, errRate: 0.31 },
+    { id: 'when2', type: 'When', cat: 'eip', uri: 'priority == NORMAL', avgMs: 0.1, pct: 0.2, calls: 42850, errRate: 0 },
+    { id: 'to-std', type: 'To', cat: 'endpoint', uri: 'direct:standard-processing', avgMs: 8.4, pct: 17.8, calls: 42850, errRate: 0.08 },
+    { id: 'other', type: 'Otherwise', cat: 'eip', uri: '(default branch)', avgMs: 0.1, pct: 0.2, calls: 12360, errRate: 0 },
+    { id: 'to-batch', type: 'To', cat: 'endpoint', uri: 'seda:batch-queue', avgMs: 1.2, pct: 2.5, calls: 12360, errRate: 0 },
+    { id: 'marshal', type: 'Marshal', cat: 'processor', uri: 'JSON (Jackson)', avgMs: 0.5, pct: 1.1, calls: 89420, errRate: 0 },
+  ];
+
+  processors.forEach((p, idx) => {
+    const errColor = p.errRate > 0.1 ? 'var(--rose)' : p.errRate > 0 ? 'var(--amber)' : 'var(--text-muted)';
+    const pctColor = p.pct > 50 ? 'var(--rose)' : p.pct > 20 ? 'var(--amber)' : 'var(--green)';
+
+    tbody.innerHTML += `
+      <tr>
+        <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted)">${idx + 1}</td>
+        <td style="font-weight:600;font-size:12px">${p.id}</td>
+        <td><span class="proc-type-badge ${p.cat}">${p.type}</span></td>
+        <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${p.uri}</td>
+        <td style="font-family:var(--font-mono);font-size:12px;font-weight:600">${p.avgMs}ms</td>
+        <td>
+          <div class="pct-bar"><div class="pct-bar-fill" style="width:${p.pct}%;background:${pctColor}"></div></div>
+          <span style="font-family:var(--font-mono);font-size:11px;color:${pctColor}">${p.pct}%</span>
+        </td>
+        <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)">${p.calls.toLocaleString()}</td>
+        <td style="font-family:var(--font-mono);font-size:11px;color:${errColor}">${p.errRate > 0 ? p.errRate + '%' : '—'}</td>
+      </tr>`;
+  });
+})();
+</script>
+</body>
+</html>
diff --git a/examples/route-diagram-example.html b/examples/route-diagram-example.html
new file mode 100644
index 00000000..b68f891e
--- /dev/null
+++ b/examples/route-diagram-example.html
@@ -0,0 +1,1336 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Route Diagram: split-and-multicast</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: #0d1117;
+    color: #c9d1d9;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px 16px;
+  }
+
+  header {
+    max-width: 960px;
+    width: 100%;
+    margin-bottom: 24px;
+  }
+
+  header h1 {
+    font-size: 22px;
+    font-weight: 600;
+    color: #e6edf3;
+    margin-bottom: 6px;
+  }
+
+  header .meta {
+    font-size: 13px;
+    color: #7d8590;
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  header .meta span { display: inline-flex; align-items: center; gap: 5px; }
+  header .meta .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+  header .meta .dot.green { background: #3fb950; }
+
+  /* Toolbar */
+  .toolbar {
+    max-width: 960px;
+    width: 100%;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    padding: 7px 16px;
+    border-radius: 6px;
+    border: 1px solid #30363d;
+    background: #21262d;
+    color: #c9d1d9;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: background 0.15s, border-color 0.15s;
+    user-select: none;
+  }
+
+  .btn:hover { background: #30363d; border-color: #484f58; }
+
+  .btn.active {
+    background: #1a3a1a;
+    border-color: #3fb950;
+    color: #3fb950;
+  }
+
+  .btn .kbd {
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 3px;
+    background: #0d1117;
+    border: 1px solid #30363d;
+    color: #7d8590;
+    font-family: monospace;
+  }
+
+  .exec-badge {
+    font-size: 12px;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-weight: 500;
+    display: none;
+  }
+
+  .exec-badge.visible { display: inline-flex; align-items: center; gap: 5px; }
+
+  .exec-badge.completed { background: #0d2818; color: #3fb950; border: 1px solid #238636; }
+  .exec-badge.failed { background: #3d1418; color: #f85149; border: 1px solid #da3633; }
+
+  .canvas-wrapper {
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    overflow: auto;
+    max-width: 960px;
+    width: 100%;
+    position: relative;
+  }
+
+  svg text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
+
+  /* Hover glow on node groups */
+  .node-group { cursor: default; transition: opacity 0.3s; }
+  .node-group:hover .node-rect { filter: drop-shadow(0 0 8px var(--glow-color, #58a6ff)); }
+
+  /* Execution overlay states */
+  .overlay-active .node-group.dimmed { opacity: 0.2; }
+  .overlay-active .node-group.dimmed:hover { opacity: 0.5; }
+  .overlay-active .edge-path.dimmed { opacity: 0.1; }
+
+  .overlay-active .node-group.executed .node-rect {
+    filter: drop-shadow(0 0 10px var(--glow-color, #58a6ff));
+  }
+
+  .overlay-active .edge-path.executed {
+    stroke-width: 2.5 !important;
+    filter: drop-shadow(0 0 4px var(--edge-glow));
+  }
+
+  /* Animated flow particles */
+  @keyframes flowParticle {
+    0% { offset-distance: 0%; opacity: 0; }
+    5% { opacity: 1; }
+    95% { opacity: 1; }
+    100% { offset-distance: 100%; opacity: 0; }
+  }
+
+  .flow-particle {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #3fb950;
+    position: absolute;
+    offset-rotate: 0deg;
+    animation: flowParticle 1.5s linear infinite;
+    box-shadow: 0 0 8px #3fb950, 0 0 16px #3fb95066;
+    display: none;
+    pointer-events: none;
+  }
+
+  .overlay-active .flow-particle { display: block; }
+
+  /* Duration badge on nodes */
+  .duration-badge { display: none; }
+  .overlay-active .duration-badge { display: block; }
+
+  /* Iteration count badge on split nodes */
+  .iter-badge { display: none; }
+  .overlay-active .iter-badge { display: block; }
+
+  /* Execution detail panel */
+  .exec-panel {
+    max-width: 960px;
+    width: 100%;
+    margin-top: 16px;
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    overflow: hidden;
+    display: none;
+  }
+
+  .exec-panel.visible { display: block; }
+
+  .exec-panel-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #21262d;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .exec-panel-header h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #e6edf3;
+  }
+
+  .exec-panel-header .timing {
+    font-size: 12px;
+    color: #7d8590;
+  }
+
+  .exec-steps {
+    display: flex;
+    overflow-x: auto;
+    padding: 16px;
+    gap: 0;
+  }
+
+  .exec-step {
+    flex-shrink: 0;
+    width: 180px;
+    position: relative;
+  }
+
+  .exec-step::after {
+    content: '';
+    position: absolute;
+    top: 18px;
+    right: -1px;
+    width: 100%;
+    height: 2px;
+    background: #238636;
+    z-index: 0;
+  }
+
+  .exec-step:last-child::after { display: none; }
+
+  .step-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #3fb950;
+    border: 2px solid #161b22;
+    position: relative;
+    z-index: 1;
+    margin-bottom: 8px;
+  }
+
+  .step-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #e6edf3;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 160px;
+  }
+
+  .step-type {
+    font-size: 10px;
+    color: #7d8590;
+    margin-bottom: 6px;
+  }
+
+  .step-duration {
+    font-size: 10px;
+    color: #3fb950;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .step-body {
+    font-size: 10px;
+    color: #7d8590;
+    margin-top: 4px;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    line-height: 1.4;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .step-body .arrow { color: #484f58; }
+
+  /* Iteration selector tabs */
+  .iter-tabs {
+    display: flex;
+    gap: 0;
+    padding: 0 16px;
+    border-bottom: 1px solid #21262d;
+  }
+
+  .iter-tab {
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #7d8590;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+    user-select: none;
+  }
+
+  .iter-tab:hover { color: #c9d1d9; }
+
+  .iter-tab.active {
+    color: #3fb950;
+    border-bottom-color: #3fb950;
+  }
+
+  .iter-tab .iter-idx {
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 3px;
+    background: #21262d;
+    margin-left: 4px;
+  }
+
+  .iter-tab.active .iter-idx {
+    background: #0d2818;
+    color: #3fb950;
+  }
+
+  /* Legend */
+  .legend {
+    max-width: 960px;
+    width: 100%;
+    margin-top: 16px;
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    padding: 16px 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 28px;
+  }
+
+  .legend-section h3 {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #7d8590;
+    margin-bottom: 8px;
+  }
+
+  .legend-items { display: flex; flex-wrap: wrap; gap: 14px; }
+
+  .legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 12px;
+    color: #c9d1d9;
+  }
+
+  .legend-swatch {
+    width: 28px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1.5px solid;
+    flex-shrink: 0;
+  }
+
+  .legend-line {
+    width: 28px;
+    height: 2px;
+    flex-shrink: 0;
+    border-radius: 1px;
+  }
+
+  .legend-line.dashed {
+    height: 0;
+    border-top: 2px dashed;
+  }
+
+  .legend-swatch.exec-glow {
+    background: #0d2818;
+    border-color: #3fb950;
+    box-shadow: 0 0 6px #3fb95066;
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <h1>split-and-multicast</h1>
+  <div class="meta">
+    <span><span class="dot green"></span> Route active</span>
+    <span>From: <code style="color:#58a6ff">direct:splitAndMulticast</code></span>
+    <span>Nodes: 8</span>
+    <span>Split: 3 iterations</span>
+  </div>
+</header>
+
+<div class="toolbar">
+  <button class="btn" id="toggleOverlay" onclick="toggleExecution()">
+    <span id="overlayIcon">▶</span> Show Execution
+    <span class="kbd">E</span>
+  </button>
+  <span class="exec-badge" id="execBadge">
+    <span class="dot green"></span>
+    COMPLETED in 85ms (3 iterations)
+  </span>
+  <span style="flex:1"></span>
+  <span style="font-size:12px;color:#484f58" id="execMeta"></span>
+</div>
+
+<div class="canvas-wrapper" id="canvas-wrapper">
+  <svg id="diagram" xmlns="http://www.w3.org/2000/svg"></svg>
+</div>
+
+<!-- Execution detail panel -->
+<div class="exec-panel" id="execPanel">
+  <div class="exec-panel-header">
+    <h3>Execution Trace</h3>
+    <span class="timing" id="execTiming"></span>
+  </div>
+  <div class="iter-tabs" id="iterTabs"></div>
+  <div class="exec-steps" id="execSteps"></div>
+</div>
+
+<div class="legend">
+  <div class="legend-section">
+    <h3>Node Types</h3>
+    <div class="legend-items">
+      <span class="legend-item"><span class="legend-swatch" style="background:#1a3a5c;border-color:#58a6ff"></span>Endpoint</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:#2d1b4e;border-color:#b87aff"></span>EIP Pattern</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:#0d2818;border-color:#3fb950"></span>Processor</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:#3d1418;border-color:#f85149"></span>Error</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:transparent;border-color:#39d2e0;border-style:dashed"></span>Cross-route</span>
+    </div>
+  </div>
+  <div class="legend-section">
+    <h3>Edge Types</h3>
+    <div class="legend-items">
+      <span class="legend-item"><span class="legend-line" style="background:#484f58"></span>Flow</span>
+      <span class="legend-item"><span class="legend-line" style="background:#d29922"></span>Branch</span>
+      <span class="legend-item"><span class="legend-line dashed" style="border-color:#f85149"></span>Error</span>
+      <span class="legend-item"><span class="legend-line dashed" style="border-color:#39d2e0"></span>Cross-route</span>
+    </div>
+  </div>
+  <div class="legend-section">
+    <h3>Execution Overlay</h3>
+    <div class="legend-items">
+      <span class="legend-item"><span class="legend-swatch exec-glow"></span>Executed node</span>
+      <span class="legend-item"><span class="legend-line" style="background:#3fb950"></span>Execution path</span>
+      <span class="legend-item"><span style="width:6px;height:6px;border-radius:50%;background:#3fb950;box-shadow:0 0 6px #3fb950;flex-shrink:0"></span>Flow particle</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:#161b22;border-color:#30363d;opacity:0.25"></span>Not executed</span>
+    </div>
+  </div>
+</div>
+
+<script>
+// ── Route diagram data ──────────────────────────────────────────────────
+// Split-and-multicast route: receives an order, logs it, splits the items
+// array, processes each item (log + setHeader + to mock:warehouse), then
+// aggregates and sends to direct:audit.
+const routeData = {
+  routeId: "split-and-multicast",
+  from: "direct:splitAndMulticast",
+  nodes: [
+    { id: "n1",  type: "DIRECT",     label: "direct:splitAndMulticast",  endpointUri: "direct:splitAndMulticast" },
+    { id: "n2",  type: "LOG",        label: "Processing order items" },
+    { id: "n3",  type: "EIP_SPLIT",  label: "split",                     expression: "${body.items}" },
+    { id: "n4",  type: "LOG",        label: "Item: ${body.name}" },
+    { id: "n5",  type: "SET_HEADER", label: "setHeader: X-ItemId" },
+    { id: "n6",  type: "TO",         label: "mock:warehouse",            endpointUri: "mock:warehouse" },
+    { id: "n7",  type: "LOG",        label: "All items processed" },
+    { id: "n8",  type: "TO",         label: "direct:audit",              endpointUri: "direct:audit", crossRoute: true }
+  ],
+  edges: [
+    { source: "n1", target: "n2", edgeType: "FLOW" },
+    { source: "n2", target: "n3", edgeType: "FLOW" },
+    { source: "n3", target: "n4", edgeType: "FLOW" },
+    { source: "n4", target: "n5", edgeType: "FLOW" },
+    { source: "n5", target: "n6", edgeType: "FLOW" },
+    { source: "n3", target: "n7", edgeType: "FLOW" },
+    { source: "n7", target: "n8", edgeType: "FLOW" },
+    { source: "n8", target: "direct:audit", edgeType: "CROSS_ROUTE", label: "\u2192 audit" }
+  ]
+};
+
+// ── Execution data (3-item split) ────────────────────────────────────────
+// Simulates a real CAMELEER3_EXECUTION JSON for an order with 3 items
+// flowing through the split-and-multicast route.
+const executionData = {
+  routeId: "split-and-multicast",
+  exchangeId: "ID-cameleer-dev-1741443600-0-2",
+  correlationId: "b4f9d3e2-8c5e-4f0b-a7d4-3e2g1f9b6d58",
+  status: "COMPLETED",
+  startTime: "2026-03-08T14:00:01.200Z",
+  endTime:   "2026-03-08T14:00:01.285Z",
+  durationMs: 85,
+  inputSnapshot: {
+    body: '{"orderId":"ORD-2048","items":[{"name":"Widget A","qty":2},{"name":"Gadget B","qty":1},{"name":"Gizmo C","qty":5}]}',
+    headers: { "Content-Type": "application/json", "X-Cameleer-CorrelationId": "b4f9d3e2-8c5e-4f0b-a7d4-3e2g1f9b6d58" }
+  },
+  outputSnapshot: {
+    body: '{"orderId":"ORD-2048","items":[...],"processed":true}',
+    headers: { "Content-Type": "application/json", "X-Cameleer-CorrelationId": "b4f9d3e2-8c5e-4f0b-a7d4-3e2g1f9b6d58" }
+  },
+  // Processors before the split, then the split itself (with iterations as children)
+  processors: [
+    {
+      nodeId: "n1", processorType: "from", label: "direct:splitAndMulticast",
+      status: "COMPLETED", durationMs: 1,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}'
+    },
+    {
+      nodeId: "n2", processorType: "log", label: "Processing order items",
+      status: "COMPLETED", durationMs: 2,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}'
+    },
+    {
+      nodeId: "n3", processorType: "split", label: "split: ${body.items} \u00d7 3",
+      status: "COMPLETED", durationMs: 62,
+      splitSize: 3,
+      inputBody: '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}',
+      // Each iteration shows processors within that split sub-exchange
+      iterations: [
+        {
+          splitIndex: 0, splitSize: 3, status: "COMPLETED", durationMs: 18,
+          inputBody: '{"name":"Widget A","qty":2}',
+          processors: [
+            { nodeId: "n4", processorType: "log", label: "Item: Widget A", status: "COMPLETED", durationMs: 2, inputBody: '{"name":"Widget A","qty":2}', outputBody: '{"name":"Widget A","qty":2}' },
+            { nodeId: "n5", processorType: "setHeader", label: "X-ItemId = WIDGET-A", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Widget A","qty":2}', outputBody: '{"name":"Widget A","qty":2}', inputHeaders: {}, outputHeaders: { "X-ItemId": "WIDGET-A" } },
+            { nodeId: "n6", processorType: "to", label: "\u2192 mock:warehouse", status: "COMPLETED", durationMs: 12, inputBody: '{"name":"Widget A","qty":2}', outputBody: '{"name":"Widget A","qty":2,"shipped":true}', endpointUri: "mock:warehouse" }
+          ]
+        },
+        {
+          splitIndex: 1, splitSize: 3, status: "COMPLETED", durationMs: 20,
+          inputBody: '{"name":"Gadget B","qty":1}',
+          processors: [
+            { nodeId: "n4", processorType: "log", label: "Item: Gadget B", status: "COMPLETED", durationMs: 2, inputBody: '{"name":"Gadget B","qty":1}', outputBody: '{"name":"Gadget B","qty":1}' },
+            { nodeId: "n5", processorType: "setHeader", label: "X-ItemId = GADGET-B", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Gadget B","qty":1}', outputBody: '{"name":"Gadget B","qty":1}', inputHeaders: {}, outputHeaders: { "X-ItemId": "GADGET-B" } },
+            { nodeId: "n6", processorType: "to", label: "\u2192 mock:warehouse", status: "COMPLETED", durationMs: 15, inputBody: '{"name":"Gadget B","qty":1}', outputBody: '{"name":"Gadget B","qty":1,"shipped":true}', endpointUri: "mock:warehouse" }
+          ]
+        },
+        {
+          splitIndex: 2, splitSize: 3, status: "COMPLETED", durationMs: 16,
+          inputBody: '{"name":"Gizmo C","qty":5}',
+          processors: [
+            { nodeId: "n4", processorType: "log", label: "Item: Gizmo C", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Gizmo C","qty":5}', outputBody: '{"name":"Gizmo C","qty":5}' },
+            { nodeId: "n5", processorType: "setHeader", label: "X-ItemId = GIZMO-C", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Gizmo C","qty":5}', outputBody: '{"name":"Gizmo C","qty":5}', inputHeaders: {}, outputHeaders: { "X-ItemId": "GIZMO-C" } },
+            { nodeId: "n6", processorType: "to", label: "\u2192 mock:warehouse", status: "COMPLETED", durationMs: 11, inputBody: '{"name":"Gizmo C","qty":5}', outputBody: '{"name":"Gizmo C","qty":5,"shipped":true}', endpointUri: "mock:warehouse" }
+          ]
+        }
+      ]
+    },
+    {
+      nodeId: "n7", processorType: "log", label: "All items processed",
+      status: "COMPLETED", durationMs: 2,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}'
+    },
+    {
+      nodeId: "n8", processorType: "to", label: "\u2192 direct:audit",
+      status: "COMPLETED", durationMs: 15,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items],"audited":true}',
+      endpointUri: "direct:audit"
+    }
+  ]
+};
+
+// ── Build executed node/edge sets (handles split iterations) ─────────────
+const executedNodes = new Set();
+const executedEdges = new Set();
+// Track per-node execution count for iteration badges
+const nodeExecCounts = {};
+// Aggregate duration per node (sum across iterations)
+const nodeAggregateDuration = {};
+
+function collectExecutedFromProcessors(procs) {
+  for (let i = 0; i < procs.length; i++) {
+    const p = procs[i];
+    executedNodes.add(p.nodeId);
+    nodeExecCounts[p.nodeId] = (nodeExecCounts[p.nodeId] || 0) + 1;
+    nodeAggregateDuration[p.nodeId] = (nodeAggregateDuration[p.nodeId] || 0) + p.durationMs;
+    if (i > 0) {
+      executedEdges.add(procs[i - 1].nodeId + "->" + p.nodeId);
+    }
+    // Recurse into split iterations
+    if (p.iterations) {
+      for (const iter of p.iterations) {
+        collectExecutedFromProcessors(iter.processors);
+      }
+    }
+  }
+}
+
+// Connect sequential processors at the top level
+for (let i = 0; i < executionData.processors.length - 1; i++) {
+  executedEdges.add(executionData.processors[i].nodeId + "->" + executionData.processors[i + 1].nodeId);
+}
+// Also connect split node to its children and back to post-split
+const splitProc = executionData.processors.find(p => p.iterations);
+if (splitProc && splitProc.iterations.length > 0) {
+  const firstIterProc = splitProc.iterations[0].processors[0];
+  if (firstIterProc) executedEdges.add(splitProc.nodeId + "->" + firstIterProc.nodeId);
+  // Connect last iteration processor back to post-split
+  const splitIdx = executionData.processors.indexOf(splitProc);
+  const postSplit = executionData.processors[splitIdx + 1];
+  if (postSplit) {
+    for (const iter of splitProc.iterations) {
+      const lastP = iter.processors[iter.processors.length - 1];
+      if (lastP) executedEdges.add(lastP.nodeId + "->" + postSplit.nodeId); // not a real edge, but shows flow
+    }
+    executedEdges.add(splitProc.nodeId + "->" + postSplit.nodeId);
+  }
+}
+
+collectExecutedFromProcessors(executionData.processors);
+
+// Current iteration index for detail panel (null = "All")
+let currentIteration = null;
+
+// ── Node style config ───────────────────────────────────────────────────
+const STYLES = {
+  endpoint:  { fill: "#1a3a5c", stroke: "#58a6ff", glow: "#58a6ff", icon: "◉" },
+  eip:       { fill: "#2d1b4e", stroke: "#b87aff", glow: "#b87aff", icon: "◆" },
+  processor: { fill: "#0d2818", stroke: "#3fb950", glow: "#3fb950", icon: "▸" },
+  error:     { fill: "#3d1418", stroke: "#f85149", glow: "#f85149", icon: "⚠" },
+  crossRoute:{ fill: "#0a2a2e", stroke: "#39d2e0", glow: "#39d2e0", icon: "↗" }
+};
+
+function nodeCategory(node) {
+  if (node.crossRoute) return "crossRoute";
+  const t = node.type;
+  if (["DIRECT","ENDPOINT","SEDA"].includes(t)) return "endpoint";
+  if (t.startsWith("EIP_")) return "eip";
+  if (["ERROR_HANDLER","ON_EXCEPTION","TRY_CATCH","DO_TRY","DO_CATCH","DO_FINALLY"].includes(t)) return "error";
+  if (t === "TO" || t === "TO_DYNAMIC") return "endpoint";
+  return "processor";
+}
+
+const EDGE_COLORS = {
+  FLOW:        "#484f58",
+  BRANCH:      "#d29922",
+  ERROR:       "#f85149",
+  CROSS_ROUTE: "#39d2e0"
+};
+
+// ── Layout constants ────────────────────────────────────────────────────
+const NODE_W = 200;
+const NODE_H = 40;
+const V_GAP  = 50;
+const H_GAP  = 40;
+const PAD    = 60;
+
+// ── Build node lookup ───────────────────────────────────────────────────
+const nodeMap = {};
+routeData.nodes.forEach(n => nodeMap[n.id] = n);
+
+// ── Tree layout for split route ─────────────────────────────────────────
+// Linear chain: n1 → n2 → n3(split) → n4 → n5 → n6 (split body)
+// Then: n3 → n7 → n8 (post-split)
+// Layout: vertical chain with split body indented to the right
+
+const positions = {};
+
+function layoutSplitRoute() {
+  const centerX = PAD + NODE_W / 2 + 60;
+
+  // Pre-split: n1, n2 centered
+  positions["n1"] = { x: centerX - NODE_W / 2, y: PAD };
+  positions["n2"] = { x: centerX - NODE_W / 2, y: PAD + (NODE_H + V_GAP) };
+
+  // Split node: n3
+  positions["n3"] = { x: centerX - NODE_W / 2, y: PAD + 2 * (NODE_H + V_GAP) };
+
+  // Split body (indented right): n4, n5, n6
+  const splitBodyX = centerX + NODE_W / 2 + H_GAP / 2;
+  const splitBodyStartY = PAD + 2 * (NODE_H + V_GAP) + 10;
+  positions["n4"] = { x: splitBodyX, y: splitBodyStartY + 0 * (NODE_H + V_GAP) };
+  positions["n5"] = { x: splitBodyX, y: splitBodyStartY + 1 * (NODE_H + V_GAP) };
+  positions["n6"] = { x: splitBodyX, y: splitBodyStartY + 2 * (NODE_H + V_GAP) };
+
+  // Post-split: n7, n8 centered (below split body)
+  const postSplitY = splitBodyStartY + 3 * (NODE_H + V_GAP);
+  positions["n7"] = { x: centerX - NODE_W / 2, y: postSplitY };
+  positions["n8"] = { x: centerX - NODE_W / 2, y: postSplitY + (NODE_H + V_GAP) };
+}
+
+layoutSplitRoute();
+
+// ── Compute SVG dimensions ──────────────────────────────────────────────
+let maxX = 0, maxY = 0;
+Object.values(positions).forEach(p => {
+  if (p.x + NODE_W > maxX) maxX = p.x + NODE_W;
+  if (p.y + NODE_H > maxY) maxY = p.y + NODE_H;
+});
+const svgW = maxX + PAD;
+const svgH = maxY + PAD + 30;
+
+// ── SVG rendering ───────────────────────────────────────────────────────
+const NS = "http://www.w3.org/2000/svg";
+const svg = document.getElementById("diagram");
+svg.setAttribute("width", svgW);
+svg.setAttribute("height", svgH);
+svg.setAttribute("viewBox", `0 0 ${svgW} ${svgH}`);
+
+// Defs: arrow markers + execution glow filter
+const defs = document.createElementNS(NS, "defs");
+
+function createMarker(id, color) {
+  const marker = document.createElementNS(NS, "marker");
+  marker.setAttribute("id", id);
+  marker.setAttribute("viewBox", "0 0 10 7");
+  marker.setAttribute("refX", "10");
+  marker.setAttribute("refY", "3.5");
+  marker.setAttribute("markerWidth", "8");
+  marker.setAttribute("markerHeight", "6");
+  marker.setAttribute("orient", "auto");
+  const poly = document.createElementNS(NS, "polygon");
+  poly.setAttribute("points", "0 0, 10 3.5, 0 7");
+  poly.setAttribute("fill", color);
+  marker.appendChild(poly);
+  defs.appendChild(marker);
+}
+
+Object.entries(EDGE_COLORS).forEach(([type, color]) => {
+  createMarker("arrow-" + type, color);
+});
+// Green execution arrow
+createMarker("arrow-exec", "#3fb950");
+
+svg.appendChild(defs);
+
+// ── Draw edges ──────────────────────────────────────────────────────────
+const edgeGroup = document.createElementNS(NS, "g");
+edgeGroup.setAttribute("class", "edges");
+
+// Store edge elements and paths for overlay
+const edgeElements = [];
+
+routeData.edges.forEach(edge => {
+  const sp = positions[edge.source];
+  const tp = positions[edge.target];
+  if (!sp || !tp) return;
+
+  const color = EDGE_COLORS[edge.edgeType] || EDGE_COLORS.FLOW;
+  const isDashed = edge.edgeType === "ERROR" || edge.edgeType === "CROSS_ROUTE";
+  const edgeKey = edge.source + "->" + edge.target;
+  const isExecuted = executedEdges.has(edgeKey);
+
+  const sx = sp.x + NODE_W / 2;
+  const sy = sp.y + NODE_H;
+  const tx = tp.x + NODE_W / 2;
+  const ty = tp.y;
+
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("class", "edge-path");
+  path.dataset.edgeKey = edgeKey;
+
+  let d;
+  if (edge.edgeType === "CROSS_ROUTE") {
+    const sx2 = sp.x + NODE_W / 2;
+    const sy2 = sp.y + NODE_H;
+    const tx2 = tp.x + NODE_W / 2;
+    const ty2 = tp.y + NODE_H;
+    const midY = Math.max(sy2, ty2) + 25;
+    d = `M ${sx2} ${sy2} C ${sx2} ${midY}, ${tx2} ${midY}, ${tx2} ${ty2}`;
+  } else if (Math.abs(sx - tx) < 2) {
+    d = `M ${sx} ${sy} L ${tx} ${ty}`;
+  } else {
+    const midY = sy + (ty - sy) * 0.5;
+    d = `M ${sx} ${sy} C ${sx} ${midY}, ${tx} ${midY}, ${tx} ${ty}`;
+  }
+
+  path.setAttribute("d", d);
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", color);
+  path.setAttribute("stroke-width", edge.edgeType === "BRANCH" ? "2" : "1.5");
+  if (isDashed) path.setAttribute("stroke-dasharray", "6 3");
+  path.setAttribute("marker-end", `url(#arrow-${edge.edgeType})`);
+  path.style.setProperty("--edge-glow", color);
+  path.style.transition = "opacity 0.3s, stroke 0.3s, stroke-width 0.3s";
+  edgeGroup.appendChild(path);
+
+  edgeElements.push({ el: path, edge, d, isExecuted });
+
+  // Edge label
+  if (edge.label && edge.edgeType !== "CROSS_ROUTE") {
+    const lx = (sx + tx) / 2 + 8;
+    const ly = (sy + ty) / 2;
+    const text = document.createElementNS(NS, "text");
+    text.setAttribute("x", lx);
+    text.setAttribute("y", ly);
+    text.setAttribute("fill", color);
+    text.setAttribute("font-size", "11");
+    text.setAttribute("font-weight", "500");
+    text.setAttribute("class", "edge-label");
+    text.dataset.edgeKey = edgeKey;
+    text.style.transition = "opacity 0.3s";
+    text.textContent = edge.label;
+    edgeGroup.appendChild(text);
+  }
+});
+
+svg.appendChild(edgeGroup);
+
+// ── Execution path overlay edges (drawn on top, hidden by default) ─────
+const execEdgeGroup = document.createElementNS(NS, "g");
+execEdgeGroup.setAttribute("class", "exec-edges");
+execEdgeGroup.style.display = "none";
+
+edgeElements.filter(e => e.isExecuted).forEach(({ d, edge }) => {
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("d", d);
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", "#3fb950");
+  path.setAttribute("stroke-width", "2.5");
+  path.setAttribute("marker-end", "url(#arrow-exec)");
+  path.style.setProperty("--edge-glow", "#3fb950");
+  path.style.filter = "drop-shadow(0 0 4px #3fb95088)";
+  execEdgeGroup.appendChild(path);
+});
+
+svg.appendChild(execEdgeGroup);
+
+// ── Draw nodes ──────────────────────────────────────────────────────────
+const nodeGroup = document.createElementNS(NS, "g");
+nodeGroup.setAttribute("class", "nodes");
+
+const nodeElements = {};
+
+routeData.nodes.forEach(node => {
+  const pos = positions[node.id];
+  if (!pos) return;
+
+  const cat = nodeCategory(node);
+  const style = STYLES[cat];
+  const isExec = executedNodes.has(node.id);
+
+  const g = document.createElementNS(NS, "g");
+  g.setAttribute("class", "node-group");
+  g.dataset.nodeId = node.id;
+  g.style.setProperty("--glow-color", style.glow);
+
+  // Tooltip — enhanced with execution data when available
+  const title = document.createElementNS(NS, "title");
+  let tip = `${node.type}: ${node.label}`;
+  if (node.expression) tip += `\nExpression: ${node.expression}`;
+  if (node.endpointUri) tip += `\nURI: ${node.endpointUri}`;
+  // Find execution data (top-level processor or aggregated from iterations)
+  const execProc = executionData.processors.find(p => p.nodeId === node.id);
+  const execCount = nodeExecCounts[node.id] || 0;
+  const aggDuration = nodeAggregateDuration[node.id] || 0;
+  if (execProc) {
+    tip += `\n\u2500\u2500\u2500 Execution \u2500\u2500\u2500`;
+    tip += `\nStatus: ${execProc.status}`;
+    tip += `\nDuration: ${execProc.durationMs}ms`;
+    if (execProc.splitSize) tip += `\nSplit: ${execProc.splitSize} iterations, ${aggDuration}ms total`;
+    if (execProc.inputBody) tip += `\nInput: ${execProc.inputBody}`;
+    if (execProc.outputBody) tip += `\nOutput: ${execProc.outputBody}`;
+  } else if (execCount > 1) {
+    tip += `\n\u2500\u2500\u2500 Execution \u2500\u2500\u2500`;
+    tip += `\nExecuted ${execCount}\u00d7 across split iterations`;
+    tip += `\nAggregate duration: ${aggDuration}ms`;
+  }
+  title.textContent = tip;
+  g.appendChild(title);
+
+  // Rect
+  const rect = document.createElementNS(NS, "rect");
+  rect.setAttribute("class", "node-rect");
+  rect.setAttribute("x", pos.x);
+  rect.setAttribute("y", pos.y);
+  rect.setAttribute("width", NODE_W);
+  rect.setAttribute("height", NODE_H);
+  rect.setAttribute("rx", "8");
+  rect.setAttribute("fill", style.fill);
+  rect.setAttribute("stroke", style.stroke);
+  rect.setAttribute("stroke-width", "1.5");
+  if (node.crossRoute) rect.setAttribute("stroke-dasharray", "5 3");
+  g.appendChild(rect);
+
+  // Icon
+  const icon = document.createElementNS(NS, "text");
+  icon.setAttribute("x", pos.x + 14);
+  icon.setAttribute("y", pos.y + NODE_H / 2 + 1);
+  icon.setAttribute("fill", style.stroke);
+  icon.setAttribute("font-size", "14");
+  icon.setAttribute("dominant-baseline", "central");
+  icon.textContent = style.icon;
+  g.appendChild(icon);
+
+  // Label
+  let labelText = node.label;
+  if (labelText.length > 24) labelText = labelText.substring(0, 22) + "\u2026";
+
+  const label = document.createElementNS(NS, "text");
+  label.setAttribute("x", pos.x + 30);
+  label.setAttribute("y", pos.y + NODE_H / 2 + 1);
+  label.setAttribute("fill", "#e6edf3");
+  label.setAttribute("font-size", "12.5");
+  label.setAttribute("font-weight", "500");
+  label.setAttribute("dominant-baseline", "central");
+  label.textContent = labelText;
+  g.appendChild(label);
+
+  // Type badge below node
+  const badge = document.createElementNS(NS, "text");
+  badge.setAttribute("x", pos.x + NODE_W / 2);
+  badge.setAttribute("y", pos.y + NODE_H + 14);
+  badge.setAttribute("fill", "#484f58");
+  badge.setAttribute("font-size", "9.5");
+  badge.setAttribute("text-anchor", "middle");
+  badge.textContent = node.type.replace("EIP_", "");
+  g.appendChild(badge);
+
+  // Duration badge (only visible during execution overlay)
+  const showDuration = execProc || execCount > 0;
+  if (showDuration) {
+    const displayDuration = execProc ? execProc.durationMs : aggDuration;
+    const dbg = document.createElementNS(NS, "g");
+    dbg.setAttribute("class", "duration-badge");
+
+    const pillW = 42;
+    const pillH = 16;
+    const px = pos.x + NODE_W - pillW - 4;
+    const py = pos.y - pillH - 3;
+
+    const pill = document.createElementNS(NS, "rect");
+    pill.setAttribute("x", px);
+    pill.setAttribute("y", py);
+    pill.setAttribute("width", pillW);
+    pill.setAttribute("height", pillH);
+    pill.setAttribute("rx", "8");
+    pill.setAttribute("fill", "#0d2818");
+    pill.setAttribute("stroke", "#238636");
+    pill.setAttribute("stroke-width", "1");
+    dbg.appendChild(pill);
+
+    const dtext = document.createElementNS(NS, "text");
+    dtext.setAttribute("x", px + pillW / 2);
+    dtext.setAttribute("y", py + pillH / 2 + 1);
+    dtext.setAttribute("fill", "#3fb950");
+    dtext.setAttribute("font-size", "10");
+    dtext.setAttribute("font-weight", "600");
+    dtext.setAttribute("text-anchor", "middle");
+    dtext.setAttribute("dominant-baseline", "central");
+    dtext.setAttribute("font-variant-numeric", "tabular-nums");
+    dtext.textContent = `${displayDuration}ms`;
+    dbg.appendChild(dtext);
+
+    g.appendChild(dbg);
+  }
+
+  // Iteration count badge for split nodes (e.g., "\u00d73")
+  if (execProc && execProc.splitSize) {
+    const ibg = document.createElementNS(NS, "g");
+    ibg.setAttribute("class", "iter-badge");
+
+    const ibW = 28;
+    const ibH = 16;
+    const ibx = pos.x + 4;
+    const iby = pos.y - ibH - 3;
+
+    const ibPill = document.createElementNS(NS, "rect");
+    ibPill.setAttribute("x", ibx);
+    ibPill.setAttribute("y", iby);
+    ibPill.setAttribute("width", ibW);
+    ibPill.setAttribute("height", ibH);
+    ibPill.setAttribute("rx", "8");
+    ibPill.setAttribute("fill", "#1a3a5c");
+    ibPill.setAttribute("stroke", "#58a6ff");
+    ibPill.setAttribute("stroke-width", "1");
+    ibg.appendChild(ibPill);
+
+    const ibText = document.createElementNS(NS, "text");
+    ibText.setAttribute("x", ibx + ibW / 2);
+    ibText.setAttribute("y", iby + ibH / 2 + 1);
+    ibText.setAttribute("fill", "#58a6ff");
+    ibText.setAttribute("font-size", "10");
+    ibText.setAttribute("font-weight", "700");
+    ibText.setAttribute("text-anchor", "middle");
+    ibText.setAttribute("dominant-baseline", "central");
+    ibText.textContent = `\u00d7${execProc.splitSize}`;
+    ibg.appendChild(ibText);
+
+    g.appendChild(ibg);
+  }
+
+  // Iteration count badge for nodes executed multiple times (inside split body)
+  if (!execProc && execCount > 1) {
+    const ibg = document.createElementNS(NS, "g");
+    ibg.setAttribute("class", "iter-badge");
+
+    const ibW = 28;
+    const ibH = 16;
+    const ibx = pos.x + 4;
+    const iby = pos.y - ibH - 3;
+
+    const ibPill = document.createElementNS(NS, "rect");
+    ibPill.setAttribute("x", ibx);
+    ibPill.setAttribute("y", iby);
+    ibPill.setAttribute("width", ibW);
+    ibPill.setAttribute("height", ibH);
+    ibPill.setAttribute("rx", "8");
+    ibPill.setAttribute("fill", "#1a3a5c");
+    ibPill.setAttribute("stroke", "#58a6ff");
+    ibPill.setAttribute("stroke-width", "1");
+    ibg.appendChild(ibPill);
+
+    const ibText = document.createElementNS(NS, "text");
+    ibText.setAttribute("x", ibx + ibW / 2);
+    ibText.setAttribute("y", iby + ibH / 2 + 1);
+    ibText.setAttribute("fill", "#58a6ff");
+    ibText.setAttribute("font-size", "10");
+    ibText.setAttribute("font-weight", "700");
+    ibText.setAttribute("text-anchor", "middle");
+    ibText.setAttribute("dominant-baseline", "central");
+    ibText.textContent = `\u00d7${execCount}`;
+    ibg.appendChild(ibText);
+
+    g.appendChild(ibg);
+  }
+
+  // Cross-route external route pill
+  if (node.crossRoute) {
+    const pillW = 130;
+    const pillH = 18;
+    const px = pos.x + (NODE_W - pillW) / 2;
+    const py = pos.y + NODE_H + 22;
+
+    const pill = document.createElementNS(NS, "rect");
+    pill.setAttribute("x", px);
+    pill.setAttribute("y", py);
+    pill.setAttribute("width", pillW);
+    pill.setAttribute("height", pillH);
+    pill.setAttribute("rx", "9");
+    pill.setAttribute("fill", "#0a2a2e");
+    pill.setAttribute("stroke", "#39d2e0");
+    pill.setAttribute("stroke-width", "1");
+    pill.setAttribute("stroke-dasharray", "3 2");
+    g.appendChild(pill);
+
+    const pillText = document.createElementNS(NS, "text");
+    pillText.setAttribute("x", px + pillW / 2);
+    pillText.setAttribute("y", py + pillH / 2 + 1);
+    pillText.setAttribute("fill", "#39d2e0");
+    pillText.setAttribute("font-size", "9.5");
+    pillText.setAttribute("text-anchor", "middle");
+    pillText.setAttribute("dominant-baseline", "central");
+    pillText.textContent = "\u2197 external route";
+    g.appendChild(pillText);
+  }
+
+  nodeElements[node.id] = g;
+  nodeGroup.appendChild(g);
+});
+
+svg.appendChild(nodeGroup);
+
+// ── Execution sequence number overlay (hidden by default) ───────────────
+const seqGroup = document.createElementNS(NS, "g");
+seqGroup.setAttribute("class", "seq-numbers");
+seqGroup.style.display = "none";
+
+// Flatten top-level processor sequence (skip iteration children for seq numbers)
+const topLevelSeq = executionData.processors.filter(p => !p.iterations || true);
+const seenSeqNodes = new Set();
+
+topLevelSeq.forEach((proc, i) => {
+  if (seenSeqNodes.has(proc.nodeId)) return;
+  seenSeqNodes.add(proc.nodeId);
+  const pos = positions[proc.nodeId];
+  if (!pos) return;
+
+  const cx = pos.x + 10;
+  const cy = pos.y + 10;
+
+  const circle = document.createElementNS(NS, "circle");
+  circle.setAttribute("cx", cx);
+  circle.setAttribute("cy", cy);
+  circle.setAttribute("r", "9");
+  circle.setAttribute("fill", "#238636");
+  circle.setAttribute("stroke", "#161b22");
+  circle.setAttribute("stroke-width", "2");
+  seqGroup.appendChild(circle);
+
+  const num = document.createElementNS(NS, "text");
+  num.setAttribute("x", cx);
+  num.setAttribute("y", cy + 1);
+  num.setAttribute("fill", "#ffffff");
+  num.setAttribute("font-size", "10");
+  num.setAttribute("font-weight", "700");
+  num.setAttribute("text-anchor", "middle");
+  num.setAttribute("dominant-baseline", "central");
+  num.textContent = i + 1;
+  seqGroup.appendChild(num);
+});
+
+// Add sequence numbers for split body nodes (using sub-numbering like 3a, 3b, 3c)
+if (splitProc && splitProc.iterations.length > 0) {
+  const splitIdx = executionData.processors.indexOf(splitProc);
+  const firstIter = splitProc.iterations[0];
+  firstIter.processors.forEach((proc, j) => {
+    if (seenSeqNodes.has(proc.nodeId)) return;
+    seenSeqNodes.add(proc.nodeId);
+    const pos = positions[proc.nodeId];
+    if (!pos) return;
+
+    const cx = pos.x + 10;
+    const cy = pos.y + 10;
+
+    const circle = document.createElementNS(NS, "circle");
+    circle.setAttribute("cx", cx);
+    circle.setAttribute("cy", cy);
+    circle.setAttribute("r", "9");
+    circle.setAttribute("fill", "#238636");
+    circle.setAttribute("stroke", "#161b22");
+    circle.setAttribute("stroke-width", "2");
+    seqGroup.appendChild(circle);
+
+    const num = document.createElementNS(NS, "text");
+    num.setAttribute("x", cx);
+    num.setAttribute("y", cy + 1);
+    num.setAttribute("fill", "#ffffff");
+    num.setAttribute("font-size", "9");
+    num.setAttribute("font-weight", "700");
+    num.setAttribute("text-anchor", "middle");
+    num.setAttribute("dominant-baseline", "central");
+    num.textContent = `${splitIdx + 1}${String.fromCharCode(97 + j)}`;
+    seqGroup.appendChild(num);
+  });
+}
+
+svg.appendChild(seqGroup);
+
+// ── Build execution detail panel with iteration tabs ─────────────────────
+function buildExecPanel() {
+  const tabsEl = document.getElementById("iterTabs");
+  const stepsEl = document.getElementById("execSteps");
+  const timingEl = document.getElementById("execTiming");
+
+  timingEl.textContent = `Exchange: ${executionData.exchangeId}  \u00b7  ${executionData.startTime}  \u00b7  ${executionData.durationMs}ms total`;
+
+  // Build iteration tabs if there's a split processor
+  if (splitProc && splitProc.iterations.length > 0) {
+    // "All" tab
+    const allTab = document.createElement("div");
+    allTab.className = "iter-tab active";
+    allTab.textContent = "All Steps";
+    allTab.onclick = () => selectIteration(null);
+    tabsEl.appendChild(allTab);
+
+    splitProc.iterations.forEach((iter, i) => {
+      const tab = document.createElement("div");
+      tab.className = "iter-tab";
+      tab.innerHTML = `Iteration <span class="iter-idx">${i}</span>`;
+      tab.title = `Split item: ${iter.inputBody}`;
+      tab.onclick = () => selectIteration(i);
+      tabsEl.appendChild(tab);
+    });
+  }
+
+  renderSteps(null);
+}
+
+function selectIteration(iterIdx) {
+  currentIteration = iterIdx;
+  // Update tab active state
+  document.querySelectorAll(".iter-tab").forEach((tab, i) => {
+    tab.classList.toggle("active", iterIdx === null ? i === 0 : i === iterIdx + 1);
+  });
+  renderSteps(iterIdx);
+}
+
+function renderSteps(iterIdx) {
+  const stepsEl = document.getElementById("execSteps");
+  stepsEl.innerHTML = "";
+
+  let procs;
+  if (iterIdx === null) {
+    // Show all top-level processors (split shows as aggregate)
+    procs = executionData.processors;
+  } else {
+    // Show pre-split procs + specific iteration procs + post-split procs
+    const splitIndex = executionData.processors.indexOf(splitProc);
+    const preSplit = executionData.processors.slice(0, splitIndex);
+    const iterProcs = splitProc.iterations[iterIdx].processors;
+    const postSplit = executionData.processors.slice(splitIndex + 1);
+    procs = [...preSplit, ...iterProcs, ...postSplit];
+  }
+
+  procs.forEach((proc, i) => {
+    const step = document.createElement("div");
+    step.className = "exec-step";
+
+    const dot = document.createElement("div");
+    dot.className = "step-dot";
+    if (proc.status === "FAILED") dot.style.background = "#f85149";
+    step.appendChild(dot);
+
+    const lbl = document.createElement("div");
+    lbl.className = "step-label";
+    let labelPrefix = `${i + 1}. `;
+    if (proc.splitIndex !== undefined) labelPrefix = `${i + 1}. [${proc.splitIndex}] `;
+    lbl.textContent = labelPrefix + proc.label;
+    lbl.title = proc.label;
+    step.appendChild(lbl);
+
+    const type = document.createElement("div");
+    type.className = "step-type";
+    let typeText = proc.processorType;
+    if (proc.iterations) typeText += ` (\u00d7${proc.splitSize})`;
+    type.textContent = typeText;
+    step.appendChild(type);
+
+    const dur = document.createElement("div");
+    dur.className = "step-duration";
+    dur.textContent = `${proc.durationMs}ms`;
+    step.appendChild(dur);
+
+    // Show body details
+    if (proc.inputBody && proc.outputBody) {
+      const bodyDiv = document.createElement("div");
+      bodyDiv.className = "step-body";
+
+      if (proc.outputHeaders && proc.inputHeaders) {
+        const newKeys = Object.keys(proc.outputHeaders).filter(k => !(k in proc.inputHeaders));
+        if (newKeys.length > 0) {
+          bodyDiv.textContent = `+${newKeys.map(k => `${k}: ${proc.outputHeaders[k]}`).join(", ")}`;
+          bodyDiv.style.color = "#3fb950";
+        }
+      }
+
+      if (proc.processorType === "to" && proc.inputBody !== proc.outputBody) {
+        const outObj = proc.outputBody;
+        bodyDiv.innerHTML = `<span class="arrow">\u2192</span> body changed`;
+        bodyDiv.style.color = "#3fb950";
+      }
+
+      if (proc.iterations) {
+        bodyDiv.textContent = `${proc.splitSize} iterations, ${proc.iterations.reduce((s, it) => s + it.durationMs, 0)}ms total`;
+        bodyDiv.style.color = "#58a6ff";
+      }
+
+      if (bodyDiv.textContent || bodyDiv.innerHTML) step.appendChild(bodyDiv);
+    }
+
+    stepsEl.appendChild(step);
+  });
+}
+
+buildExecPanel();
+
+// ── Toggle execution overlay ────────────────────────────────────────────
+let overlayActive = false;
+
+function toggleExecution() {
+  overlayActive = !overlayActive;
+  const svgEl = document.getElementById("diagram");
+  const btn = document.getElementById("toggleOverlay");
+  const badge = document.getElementById("execBadge");
+  const panel = document.getElementById("execPanel");
+  const meta = document.getElementById("execMeta");
+  const iconSpan = document.getElementById("overlayIcon");
+
+  if (overlayActive) {
+    // Activate overlay
+    svgEl.classList.add("overlay-active");
+    btn.classList.add("active");
+    btn.innerHTML = '<span id="overlayIcon">■</span> Hide Execution <span class="kbd">E</span>';
+    badge.className = "exec-badge visible completed";
+    panel.classList.add("visible");
+    meta.textContent = `Correlation: ${executionData.correlationId}`;
+
+    // Dim non-executed nodes and edges
+    routeData.nodes.forEach(node => {
+      const el = nodeElements[node.id];
+      if (!el) return;
+      if (executedNodes.has(node.id)) {
+        el.classList.add("executed");
+        el.classList.remove("dimmed");
+      } else {
+        el.classList.add("dimmed");
+        el.classList.remove("executed");
+      }
+    });
+
+    document.querySelectorAll(".edge-path").forEach(el => {
+      const key = el.dataset.edgeKey;
+      if (executedEdges.has(key)) {
+        el.classList.add("executed");
+        el.classList.remove("dimmed");
+      } else {
+        el.classList.add("dimmed");
+        el.classList.remove("executed");
+      }
+    });
+
+    document.querySelectorAll(".edge-label").forEach(el => {
+      const key = el.dataset.edgeKey;
+      el.style.opacity = executedEdges.has(key) ? "1" : "0.15";
+    });
+
+    // Show execution edges + sequence numbers
+    execEdgeGroup.style.display = "";
+    seqGroup.style.display = "";
+
+  } else {
+    // Deactivate overlay
+    svgEl.classList.remove("overlay-active");
+    btn.classList.remove("active");
+    btn.innerHTML = '<span id="overlayIcon">▶</span> Show Execution <span class="kbd">E</span>';
+    badge.className = "exec-badge";
+    panel.classList.remove("visible");
+    meta.textContent = "";
+
+    // Remove dim/executed classes
+    routeData.nodes.forEach(node => {
+      const el = nodeElements[node.id];
+      if (!el) return;
+      el.classList.remove("executed", "dimmed");
+    });
+
+    document.querySelectorAll(".edge-path").forEach(el => {
+      el.classList.remove("executed", "dimmed");
+    });
+
+    document.querySelectorAll(".edge-label").forEach(el => {
+      el.style.opacity = "";
+    });
+
+    execEdgeGroup.style.display = "none";
+    seqGroup.style.display = "none";
+  }
+}
+
+// Keyboard shortcut: E to toggle
+document.addEventListener("keydown", (e) => {
+  if (e.key === "e" || e.key === "E") {
+    if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
+    toggleExecution();
+  }
+});
+</script>
+
+</body>
+</html>
diff --git a/examples/route-diagram-light.html b/examples/route-diagram-light.html
new file mode 100644
index 00000000..dfe70483
--- /dev/null
+++ b/examples/route-diagram-light.html
@@ -0,0 +1,1341 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Route Diagram: split-and-multicast (Light)</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: #f7f5f2;
+    color: #57534e;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px 16px;
+  }
+
+  header {
+    max-width: 960px;
+    width: 100%;
+    margin-bottom: 24px;
+  }
+
+  header h1 {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1c1917;
+    margin-bottom: 6px;
+  }
+
+  header .meta {
+    font-size: 13px;
+    color: #a8a29e;
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  header .meta span { display: inline-flex; align-items: center; gap: 5px; }
+  header .meta .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+  header .meta .dot.green { background: #047857; }
+
+  /* Toolbar */
+  .toolbar {
+    max-width: 960px;
+    width: 100%;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    padding: 7px 16px;
+    border-radius: 6px;
+    border: 1px solid #d4cfc8;
+    background: #ffffff;
+    color: #57534e;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: background 0.15s, border-color 0.15s;
+    user-select: none;
+  }
+
+  .btn:hover { background: #f3f1ee; border-color: #d4cfc8; color: #1c1917; }
+
+  .btn.active {
+    background: rgba(180, 83, 9, 0.07);
+    border-color: rgba(180, 83, 9, 0.3);
+    color: #b45309;
+  }
+
+  .btn .kbd {
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 3px;
+    background: #f3f1ee;
+    border: 1px solid #d4cfc8;
+    color: #a8a29e;
+    font-family: monospace;
+  }
+
+  .exec-badge {
+    font-size: 12px;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-weight: 500;
+    display: none;
+  }
+
+  .exec-badge.visible { display: inline-flex; align-items: center; gap: 5px; }
+
+  .exec-badge.completed { background: rgba(4, 120, 87, 0.08); color: #047857; border: 1px solid rgba(4, 120, 87, 0.3); }
+  .exec-badge.failed { background: rgba(190, 18, 60, 0.08); color: #be123c; border: 1px solid rgba(190, 18, 60, 0.3); }
+
+  .canvas-wrapper {
+    background: #ffffff;
+    border: 1px solid #e4e0db;
+    border-radius: 14px;
+    overflow: auto;
+    max-width: 960px;
+    width: 100%;
+    position: relative;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  }
+
+  svg text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
+
+  /* Hover glow on node groups */
+  .node-group { cursor: default; transition: opacity 0.3s; }
+  .node-group:hover .node-rect { filter: drop-shadow(0 0 8px var(--glow-color, rgba(29, 78, 216, 0.3))); }
+
+  /* Execution overlay states */
+  .overlay-active .node-group.dimmed { opacity: 0.3; }
+  .overlay-active .node-group.dimmed:hover { opacity: 0.5; }
+  .overlay-active .edge-path.dimmed { opacity: 0.15; }
+
+  .overlay-active .node-group.executed .node-rect {
+    filter: drop-shadow(0 0 8px var(--glow-color, rgba(4, 120, 87, 0.4)));
+  }
+
+  .overlay-active .edge-path.executed {
+    stroke-width: 2.5 !important;
+    filter: drop-shadow(0 0 4px var(--edge-glow));
+  }
+
+  /* Animated flow particles */
+  @keyframes flowParticle {
+    0% { offset-distance: 0%; opacity: 0; }
+    5% { opacity: 1; }
+    95% { opacity: 1; }
+    100% { offset-distance: 100%; opacity: 0; }
+  }
+
+  .flow-particle {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #047857;
+    position: absolute;
+    offset-rotate: 0deg;
+    animation: flowParticle 1.5s linear infinite;
+    box-shadow: 0 0 8px #04785766, 0 0 16px #04785733;
+    display: none;
+    pointer-events: none;
+  }
+
+  .overlay-active .flow-particle { display: block; }
+
+  /* Duration badge on nodes */
+  .duration-badge { display: none; }
+  .overlay-active .duration-badge { display: block; }
+
+  /* Iteration count badge on split nodes */
+  .iter-badge { display: none; }
+  .overlay-active .iter-badge { display: block; }
+
+  /* Execution detail panel */
+  .exec-panel {
+    max-width: 960px;
+    width: 100%;
+    margin-top: 16px;
+    background: #ffffff;
+    border: 1px solid #e4e0db;
+    border-radius: 14px;
+    overflow: hidden;
+    display: none;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  }
+
+  .exec-panel.visible { display: block; }
+
+  .exec-panel-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #e4e0db;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .exec-panel-header h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1c1917;
+  }
+
+  .exec-panel-header .timing {
+    font-size: 12px;
+    color: #a8a29e;
+  }
+
+  .exec-steps {
+    display: flex;
+    overflow-x: auto;
+    padding: 16px;
+    gap: 0;
+  }
+
+  .exec-step {
+    flex-shrink: 0;
+    width: 180px;
+    position: relative;
+  }
+
+  .exec-step::after {
+    content: '';
+    position: absolute;
+    top: 18px;
+    right: -1px;
+    width: 100%;
+    height: 2px;
+    background: rgba(4, 120, 87, 0.3);
+    z-index: 0;
+  }
+
+  .exec-step:last-child::after { display: none; }
+
+  .step-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #047857;
+    border: 2px solid #ffffff;
+    position: relative;
+    z-index: 1;
+    margin-bottom: 8px;
+  }
+
+  .step-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #1c1917;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 160px;
+  }
+
+  .step-type {
+    font-size: 10px;
+    color: #a8a29e;
+    margin-bottom: 6px;
+  }
+
+  .step-duration {
+    font-size: 10px;
+    color: #047857;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .step-body {
+    font-size: 10px;
+    color: #a8a29e;
+    margin-top: 4px;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    line-height: 1.4;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .step-body .arrow { color: #d4cfc8; }
+
+  /* Iteration selector tabs */
+  .iter-tabs {
+    display: flex;
+    gap: 0;
+    padding: 0 16px;
+    border-bottom: 1px solid #e4e0db;
+  }
+
+  .iter-tab {
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #a8a29e;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+    user-select: none;
+  }
+
+  .iter-tab:hover { color: #57534e; }
+
+  .iter-tab.active {
+    color: #047857;
+    border-bottom-color: #047857;
+  }
+
+  .iter-tab .iter-idx {
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 3px;
+    background: #f3f1ee;
+    margin-left: 4px;
+  }
+
+  .iter-tab.active .iter-idx {
+    background: rgba(4, 120, 87, 0.08);
+    color: #047857;
+  }
+
+  /* Legend */
+  .legend {
+    max-width: 960px;
+    width: 100%;
+    margin-top: 16px;
+    background: #ffffff;
+    border: 1px solid #e4e0db;
+    border-radius: 14px;
+    padding: 16px 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 28px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  }
+
+  .legend-section h3 {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #a8a29e;
+    margin-bottom: 8px;
+  }
+
+  .legend-items { display: flex; flex-wrap: wrap; gap: 14px; }
+
+  .legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 12px;
+    color: #57534e;
+  }
+
+  .legend-swatch {
+    width: 28px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1.5px solid;
+    flex-shrink: 0;
+  }
+
+  .legend-line {
+    width: 28px;
+    height: 2px;
+    flex-shrink: 0;
+    border-radius: 1px;
+  }
+
+  .legend-line.dashed {
+    height: 0;
+    border-top: 2px dashed;
+  }
+
+  .legend-swatch.exec-glow {
+    background: rgba(4, 120, 87, 0.08);
+    border-color: rgba(4, 120, 87, 0.5);
+    box-shadow: 0 0 6px rgba(4, 120, 87, 0.25);
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <h1>split-and-multicast</h1>
+  <div class="meta">
+    <span><span class="dot green"></span> Route active</span>
+    <span>From: <code style="color:#1d4ed8">direct:splitAndMulticast</code></span>
+    <span>Nodes: 8</span>
+    <span>Split: 3 iterations</span>
+  </div>
+</header>
+
+<div class="toolbar">
+  <button class="btn" id="toggleOverlay" onclick="toggleExecution()">
+    <span id="overlayIcon">\u25b6</span> Show Execution
+    <span class="kbd">E</span>
+  </button>
+  <span class="exec-badge" id="execBadge">
+    <span class="dot green"></span>
+    COMPLETED in 85ms (3 iterations)
+  </span>
+  <span style="flex:1"></span>
+  <span style="font-size:12px;color:#d4cfc8" id="execMeta"></span>
+</div>
+
+<div class="canvas-wrapper" id="canvas-wrapper">
+  <svg id="diagram" xmlns="http://www.w3.org/2000/svg"></svg>
+</div>
+
+<!-- Execution detail panel -->
+<div class="exec-panel" id="execPanel">
+  <div class="exec-panel-header">
+    <h3>Execution Trace</h3>
+    <span class="timing" id="execTiming"></span>
+  </div>
+  <div class="iter-tabs" id="iterTabs"></div>
+  <div class="exec-steps" id="execSteps"></div>
+</div>
+
+<div class="legend">
+  <div class="legend-section">
+    <h3>Node Types</h3>
+    <div class="legend-items">
+      <span class="legend-item"><span class="legend-swatch" style="background:rgba(29,78,216,0.06);border-color:rgba(29,78,216,0.35)"></span>Endpoint</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:rgba(124,58,237,0.06);border-color:rgba(124,58,237,0.35)"></span>EIP Pattern</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:rgba(4,120,87,0.06);border-color:rgba(4,120,87,0.35)"></span>Processor</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:rgba(190,18,60,0.05);border-color:rgba(190,18,60,0.3)"></span>Error</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:transparent;border-color:rgba(14,116,144,0.35);border-style:dashed"></span>Cross-route</span>
+    </div>
+  </div>
+  <div class="legend-section">
+    <h3>Edge Types</h3>
+    <div class="legend-items">
+      <span class="legend-item"><span class="legend-line" style="background:#c4bfb8"></span>Flow</span>
+      <span class="legend-item"><span class="legend-line" style="background:#b45309"></span>Branch</span>
+      <span class="legend-item"><span class="legend-line dashed" style="border-color:#be123c"></span>Error</span>
+      <span class="legend-item"><span class="legend-line dashed" style="border-color:#0e7490"></span>Cross-route</span>
+    </div>
+  </div>
+  <div class="legend-section">
+    <h3>Execution Overlay</h3>
+    <div class="legend-items">
+      <span class="legend-item"><span class="legend-swatch exec-glow"></span>Executed node</span>
+      <span class="legend-item"><span class="legend-line" style="background:#047857"></span>Execution path</span>
+      <span class="legend-item"><span style="width:6px;height:6px;border-radius:50%;background:#047857;box-shadow:0 0 6px rgba(4,120,87,0.5);flex-shrink:0"></span>Flow particle</span>
+      <span class="legend-item"><span class="legend-swatch" style="background:#f3f1ee;border-color:#e4e0db;opacity:0.35"></span>Not executed</span>
+    </div>
+  </div>
+</div>
+
+<script>
+// -- Route diagram data ----------------------------------------------------------
+// Split-and-multicast route: receives an order, logs it, splits the items
+// array, processes each item (log + setHeader + to mock:warehouse), then
+// aggregates and sends to direct:audit.
+const routeData = {
+  routeId: "split-and-multicast",
+  from: "direct:splitAndMulticast",
+  nodes: [
+    { id: "n1",  type: "DIRECT",     label: "direct:splitAndMulticast",  endpointUri: "direct:splitAndMulticast" },
+    { id: "n2",  type: "LOG",        label: "Processing order items" },
+    { id: "n3",  type: "EIP_SPLIT",  label: "split",                     expression: "${body.items}" },
+    { id: "n4",  type: "LOG",        label: "Item: ${body.name}" },
+    { id: "n5",  type: "SET_HEADER", label: "setHeader: X-ItemId" },
+    { id: "n6",  type: "TO",         label: "mock:warehouse",            endpointUri: "mock:warehouse" },
+    { id: "n7",  type: "LOG",        label: "All items processed" },
+    { id: "n8",  type: "TO",         label: "direct:audit",              endpointUri: "direct:audit", crossRoute: true }
+  ],
+  edges: [
+    { source: "n1", target: "n2", edgeType: "FLOW" },
+    { source: "n2", target: "n3", edgeType: "FLOW" },
+    { source: "n3", target: "n4", edgeType: "FLOW" },
+    { source: "n4", target: "n5", edgeType: "FLOW" },
+    { source: "n5", target: "n6", edgeType: "FLOW" },
+    { source: "n3", target: "n7", edgeType: "FLOW" },
+    { source: "n7", target: "n8", edgeType: "FLOW" },
+    { source: "n8", target: "direct:audit", edgeType: "CROSS_ROUTE", label: "\u2192 audit" }
+  ]
+};
+
+// -- Execution data (3-item split) ------------------------------------------------
+// Simulates a real CAMELEER3_EXECUTION JSON for an order with 3 items
+// flowing through the split-and-multicast route.
+const executionData = {
+  routeId: "split-and-multicast",
+  exchangeId: "ID-cameleer-dev-1741443600-0-2",
+  correlationId: "b4f9d3e2-8c5e-4f0b-a7d4-3e2g1f9b6d58",
+  status: "COMPLETED",
+  startTime: "2026-03-08T14:00:01.200Z",
+  endTime:   "2026-03-08T14:00:01.285Z",
+  durationMs: 85,
+  inputSnapshot: {
+    body: '{"orderId":"ORD-2048","items":[{"name":"Widget A","qty":2},{"name":"Gadget B","qty":1},{"name":"Gizmo C","qty":5}]}',
+    headers: { "Content-Type": "application/json", "X-Cameleer-CorrelationId": "b4f9d3e2-8c5e-4f0b-a7d4-3e2g1f9b6d58" }
+  },
+  outputSnapshot: {
+    body: '{"orderId":"ORD-2048","items":[...],"processed":true}',
+    headers: { "Content-Type": "application/json", "X-Cameleer-CorrelationId": "b4f9d3e2-8c5e-4f0b-a7d4-3e2g1f9b6d58" }
+  },
+  // Processors before the split, then the split itself (with iterations as children)
+  processors: [
+    {
+      nodeId: "n1", processorType: "from", label: "direct:splitAndMulticast",
+      status: "COMPLETED", durationMs: 1,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}'
+    },
+    {
+      nodeId: "n2", processorType: "log", label: "Processing order items",
+      status: "COMPLETED", durationMs: 2,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}'
+    },
+    {
+      nodeId: "n3", processorType: "split", label: "split: ${body.items} \u00d7 3",
+      status: "COMPLETED", durationMs: 62,
+      splitSize: 3,
+      inputBody: '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}',
+      // Each iteration shows processors within that split sub-exchange
+      iterations: [
+        {
+          splitIndex: 0, splitSize: 3, status: "COMPLETED", durationMs: 18,
+          inputBody: '{"name":"Widget A","qty":2}',
+          processors: [
+            { nodeId: "n4", processorType: "log", label: "Item: Widget A", status: "COMPLETED", durationMs: 2, inputBody: '{"name":"Widget A","qty":2}', outputBody: '{"name":"Widget A","qty":2}' },
+            { nodeId: "n5", processorType: "setHeader", label: "X-ItemId = WIDGET-A", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Widget A","qty":2}', outputBody: '{"name":"Widget A","qty":2}', inputHeaders: {}, outputHeaders: { "X-ItemId": "WIDGET-A" } },
+            { nodeId: "n6", processorType: "to", label: "\u2192 mock:warehouse", status: "COMPLETED", durationMs: 12, inputBody: '{"name":"Widget A","qty":2}', outputBody: '{"name":"Widget A","qty":2,"shipped":true}', endpointUri: "mock:warehouse" }
+          ]
+        },
+        {
+          splitIndex: 1, splitSize: 3, status: "COMPLETED", durationMs: 20,
+          inputBody: '{"name":"Gadget B","qty":1}',
+          processors: [
+            { nodeId: "n4", processorType: "log", label: "Item: Gadget B", status: "COMPLETED", durationMs: 2, inputBody: '{"name":"Gadget B","qty":1}', outputBody: '{"name":"Gadget B","qty":1}' },
+            { nodeId: "n5", processorType: "setHeader", label: "X-ItemId = GADGET-B", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Gadget B","qty":1}', outputBody: '{"name":"Gadget B","qty":1}', inputHeaders: {}, outputHeaders: { "X-ItemId": "GADGET-B" } },
+            { nodeId: "n6", processorType: "to", label: "\u2192 mock:warehouse", status: "COMPLETED", durationMs: 15, inputBody: '{"name":"Gadget B","qty":1}', outputBody: '{"name":"Gadget B","qty":1,"shipped":true}', endpointUri: "mock:warehouse" }
+          ]
+        },
+        {
+          splitIndex: 2, splitSize: 3, status: "COMPLETED", durationMs: 16,
+          inputBody: '{"name":"Gizmo C","qty":5}',
+          processors: [
+            { nodeId: "n4", processorType: "log", label: "Item: Gizmo C", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Gizmo C","qty":5}', outputBody: '{"name":"Gizmo C","qty":5}' },
+            { nodeId: "n5", processorType: "setHeader", label: "X-ItemId = GIZMO-C", status: "COMPLETED", durationMs: 1, inputBody: '{"name":"Gizmo C","qty":5}', outputBody: '{"name":"Gizmo C","qty":5}', inputHeaders: {}, outputHeaders: { "X-ItemId": "GIZMO-C" } },
+            { nodeId: "n6", processorType: "to", label: "\u2192 mock:warehouse", status: "COMPLETED", durationMs: 11, inputBody: '{"name":"Gizmo C","qty":5}', outputBody: '{"name":"Gizmo C","qty":5,"shipped":true}', endpointUri: "mock:warehouse" }
+          ]
+        }
+      ]
+    },
+    {
+      nodeId: "n7", processorType: "log", label: "All items processed",
+      status: "COMPLETED", durationMs: 2,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items]}'
+    },
+    {
+      nodeId: "n8", processorType: "to", label: "\u2192 direct:audit",
+      status: "COMPLETED", durationMs: 15,
+      inputBody:  '{"orderId":"ORD-2048","items":[...3 items]}',
+      outputBody: '{"orderId":"ORD-2048","items":[...3 items],"audited":true}',
+      endpointUri: "direct:audit"
+    }
+  ]
+};
+
+// -- Build executed node/edge sets (handles split iterations) ---------------------
+const executedNodes = new Set();
+const executedEdges = new Set();
+// Track per-node execution count for iteration badges
+const nodeExecCounts = {};
+// Aggregate duration per node (sum across iterations)
+const nodeAggregateDuration = {};
+
+function collectExecutedFromProcessors(procs) {
+  for (let i = 0; i < procs.length; i++) {
+    const p = procs[i];
+    executedNodes.add(p.nodeId);
+    nodeExecCounts[p.nodeId] = (nodeExecCounts[p.nodeId] || 0) + 1;
+    nodeAggregateDuration[p.nodeId] = (nodeAggregateDuration[p.nodeId] || 0) + p.durationMs;
+    if (i > 0) {
+      executedEdges.add(procs[i - 1].nodeId + "->" + p.nodeId);
+    }
+    // Recurse into split iterations
+    if (p.iterations) {
+      for (const iter of p.iterations) {
+        collectExecutedFromProcessors(iter.processors);
+      }
+    }
+  }
+}
+
+// Connect sequential processors at the top level
+for (let i = 0; i < executionData.processors.length - 1; i++) {
+  executedEdges.add(executionData.processors[i].nodeId + "->" + executionData.processors[i + 1].nodeId);
+}
+// Also connect split node to its children and back to post-split
+const splitProc = executionData.processors.find(p => p.iterations);
+if (splitProc && splitProc.iterations.length > 0) {
+  const firstIterProc = splitProc.iterations[0].processors[0];
+  if (firstIterProc) executedEdges.add(splitProc.nodeId + "->" + firstIterProc.nodeId);
+  // Connect last iteration processor back to post-split
+  const splitIdx = executionData.processors.indexOf(splitProc);
+  const postSplit = executionData.processors[splitIdx + 1];
+  if (postSplit) {
+    for (const iter of splitProc.iterations) {
+      const lastP = iter.processors[iter.processors.length - 1];
+      if (lastP) executedEdges.add(lastP.nodeId + "->" + postSplit.nodeId);
+    }
+    executedEdges.add(splitProc.nodeId + "->" + postSplit.nodeId);
+  }
+}
+
+collectExecutedFromProcessors(executionData.processors);
+
+// Current iteration index for detail panel (null = "All")
+let currentIteration = null;
+
+// -- Node style config (light theme) ---------------------------------------------
+const STYLES = {
+  endpoint:  { fill: "rgba(29, 78, 216, 0.06)", stroke: "rgba(29, 78, 216, 0.35)", text: "#1d4ed8", glow: "rgba(29, 78, 216, 0.3)", icon: "\u25c9" },
+  eip:       { fill: "rgba(124, 58, 237, 0.06)", stroke: "rgba(124, 58, 237, 0.35)", text: "#7c3aed", glow: "rgba(124, 58, 237, 0.3)", icon: "\u25c6" },
+  processor: { fill: "rgba(4, 120, 87, 0.06)", stroke: "rgba(4, 120, 87, 0.35)", text: "#047857", glow: "rgba(4, 120, 87, 0.3)", icon: "\u25b8" },
+  error:     { fill: "rgba(190, 18, 60, 0.05)", stroke: "rgba(190, 18, 60, 0.3)", text: "#be123c", glow: "rgba(190, 18, 60, 0.3)", icon: "\u26a0" },
+  crossRoute:{ fill: "rgba(14, 116, 144, 0.06)", stroke: "rgba(14, 116, 144, 0.35)", text: "#0e7490", glow: "rgba(14, 116, 144, 0.3)", icon: "\u2197" }
+};
+
+function nodeCategory(node) {
+  if (node.crossRoute) return "crossRoute";
+  const t = node.type;
+  if (["DIRECT","ENDPOINT","SEDA"].includes(t)) return "endpoint";
+  if (t.startsWith("EIP_")) return "eip";
+  if (["ERROR_HANDLER","ON_EXCEPTION","TRY_CATCH","DO_TRY","DO_CATCH","DO_FINALLY"].includes(t)) return "error";
+  if (t === "TO" || t === "TO_DYNAMIC") return "endpoint";
+  return "processor";
+}
+
+const EDGE_COLORS = {
+  FLOW:        "#c4bfb8",
+  BRANCH:      "#b45309",
+  ERROR:       "#be123c",
+  CROSS_ROUTE: "#0e7490"
+};
+
+// -- Layout constants -------------------------------------------------------------
+const NODE_W = 200;
+const NODE_H = 40;
+const V_GAP  = 50;
+const H_GAP  = 40;
+const PAD    = 60;
+
+// -- Build node lookup ------------------------------------------------------------
+const nodeMap = {};
+routeData.nodes.forEach(n => nodeMap[n.id] = n);
+
+// -- Tree layout for split route --------------------------------------------------
+// Linear chain: n1 -> n2 -> n3(split) -> n4 -> n5 -> n6 (split body)
+// Then: n3 -> n7 -> n8 (post-split)
+// Layout: vertical chain with split body indented to the right
+
+const positions = {};
+
+function layoutSplitRoute() {
+  const centerX = PAD + NODE_W / 2 + 60;
+
+  // Pre-split: n1, n2 centered
+  positions["n1"] = { x: centerX - NODE_W / 2, y: PAD };
+  positions["n2"] = { x: centerX - NODE_W / 2, y: PAD + (NODE_H + V_GAP) };
+
+  // Split node: n3
+  positions["n3"] = { x: centerX - NODE_W / 2, y: PAD + 2 * (NODE_H + V_GAP) };
+
+  // Split body (indented right): n4, n5, n6
+  const splitBodyX = centerX + NODE_W / 2 + H_GAP / 2;
+  const splitBodyStartY = PAD + 2 * (NODE_H + V_GAP) + 10;
+  positions["n4"] = { x: splitBodyX, y: splitBodyStartY + 0 * (NODE_H + V_GAP) };
+  positions["n5"] = { x: splitBodyX, y: splitBodyStartY + 1 * (NODE_H + V_GAP) };
+  positions["n6"] = { x: splitBodyX, y: splitBodyStartY + 2 * (NODE_H + V_GAP) };
+
+  // Post-split: n7, n8 centered (below split body)
+  const postSplitY = splitBodyStartY + 3 * (NODE_H + V_GAP);
+  positions["n7"] = { x: centerX - NODE_W / 2, y: postSplitY };
+  positions["n8"] = { x: centerX - NODE_W / 2, y: postSplitY + (NODE_H + V_GAP) };
+}
+
+layoutSplitRoute();
+
+// -- Compute SVG dimensions -------------------------------------------------------
+let maxX = 0, maxY = 0;
+Object.values(positions).forEach(p => {
+  if (p.x + NODE_W > maxX) maxX = p.x + NODE_W;
+  if (p.y + NODE_H > maxY) maxY = p.y + NODE_H;
+});
+const svgW = maxX + PAD;
+const svgH = maxY + PAD + 30;
+
+// -- SVG rendering ----------------------------------------------------------------
+const NS = "http://www.w3.org/2000/svg";
+const svg = document.getElementById("diagram");
+svg.setAttribute("width", svgW);
+svg.setAttribute("height", svgH);
+svg.setAttribute("viewBox", `0 0 ${svgW} ${svgH}`);
+
+// Defs: arrow markers + execution glow filter
+const defs = document.createElementNS(NS, "defs");
+
+function createMarker(id, color) {
+  const marker = document.createElementNS(NS, "marker");
+  marker.setAttribute("id", id);
+  marker.setAttribute("viewBox", "0 0 10 7");
+  marker.setAttribute("refX", "10");
+  marker.setAttribute("refY", "3.5");
+  marker.setAttribute("markerWidth", "8");
+  marker.setAttribute("markerHeight", "6");
+  marker.setAttribute("orient", "auto");
+  const poly = document.createElementNS(NS, "polygon");
+  poly.setAttribute("points", "0 0, 10 3.5, 0 7");
+  poly.setAttribute("fill", color);
+  marker.appendChild(poly);
+  defs.appendChild(marker);
+}
+
+Object.entries(EDGE_COLORS).forEach(([type, color]) => {
+  createMarker("arrow-" + type, color);
+});
+// Green execution arrow
+createMarker("arrow-exec", "#047857");
+
+svg.appendChild(defs);
+
+// -- Draw edges -------------------------------------------------------------------
+const edgeGroup = document.createElementNS(NS, "g");
+edgeGroup.setAttribute("class", "edges");
+
+// Store edge elements and paths for overlay
+const edgeElements = [];
+
+routeData.edges.forEach(edge => {
+  const sp = positions[edge.source];
+  const tp = positions[edge.target];
+  if (!sp || !tp) return;
+
+  const color = EDGE_COLORS[edge.edgeType] || EDGE_COLORS.FLOW;
+  const isDashed = edge.edgeType === "ERROR" || edge.edgeType === "CROSS_ROUTE";
+  const edgeKey = edge.source + "->" + edge.target;
+  const isExecuted = executedEdges.has(edgeKey);
+
+  const sx = sp.x + NODE_W / 2;
+  const sy = sp.y + NODE_H;
+  const tx = tp.x + NODE_W / 2;
+  const ty = tp.y;
+
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("class", "edge-path");
+  path.dataset.edgeKey = edgeKey;
+
+  let d;
+  if (edge.edgeType === "CROSS_ROUTE") {
+    const sx2 = sp.x + NODE_W / 2;
+    const sy2 = sp.y + NODE_H;
+    const tx2 = tp.x + NODE_W / 2;
+    const ty2 = tp.y + NODE_H;
+    const midY = Math.max(sy2, ty2) + 25;
+    d = `M ${sx2} ${sy2} C ${sx2} ${midY}, ${tx2} ${midY}, ${tx2} ${ty2}`;
+  } else if (Math.abs(sx - tx) < 2) {
+    d = `M ${sx} ${sy} L ${tx} ${ty}`;
+  } else {
+    const midY = sy + (ty - sy) * 0.5;
+    d = `M ${sx} ${sy} C ${sx} ${midY}, ${tx} ${midY}, ${tx} ${ty}`;
+  }
+
+  path.setAttribute("d", d);
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", color);
+  path.setAttribute("stroke-width", edge.edgeType === "BRANCH" ? "2" : "1.5");
+  if (isDashed) path.setAttribute("stroke-dasharray", "6 3");
+  path.setAttribute("marker-end", `url(#arrow-${edge.edgeType})`);
+  path.style.setProperty("--edge-glow", color);
+  path.style.transition = "opacity 0.3s, stroke 0.3s, stroke-width 0.3s";
+  edgeGroup.appendChild(path);
+
+  edgeElements.push({ el: path, edge, d, isExecuted });
+
+  // Edge label
+  if (edge.label && edge.edgeType !== "CROSS_ROUTE") {
+    const lx = (sx + tx) / 2 + 8;
+    const ly = (sy + ty) / 2;
+    const text = document.createElementNS(NS, "text");
+    text.setAttribute("x", lx);
+    text.setAttribute("y", ly);
+    text.setAttribute("fill", color);
+    text.setAttribute("font-size", "11");
+    text.setAttribute("font-weight", "500");
+    text.setAttribute("class", "edge-label");
+    text.dataset.edgeKey = edgeKey;
+    text.style.transition = "opacity 0.3s";
+    text.textContent = edge.label;
+    edgeGroup.appendChild(text);
+  }
+});
+
+svg.appendChild(edgeGroup);
+
+// -- Execution path overlay edges (drawn on top, hidden by default) ---------------
+const execEdgeGroup = document.createElementNS(NS, "g");
+execEdgeGroup.setAttribute("class", "exec-edges");
+execEdgeGroup.style.display = "none";
+
+edgeElements.filter(e => e.isExecuted).forEach(({ d, edge }) => {
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("d", d);
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", "#047857");
+  path.setAttribute("stroke-width", "2.5");
+  path.setAttribute("marker-end", "url(#arrow-exec)");
+  path.style.setProperty("--edge-glow", "#047857");
+  path.style.filter = "drop-shadow(0 0 4px rgba(4, 120, 87, 0.4))";
+  execEdgeGroup.appendChild(path);
+});
+
+svg.appendChild(execEdgeGroup);
+
+// -- Draw nodes -------------------------------------------------------------------
+const nodeGroup = document.createElementNS(NS, "g");
+nodeGroup.setAttribute("class", "nodes");
+
+const nodeElements = {};
+
+routeData.nodes.forEach(node => {
+  const pos = positions[node.id];
+  if (!pos) return;
+
+  const cat = nodeCategory(node);
+  const style = STYLES[cat];
+  const isExec = executedNodes.has(node.id);
+
+  const g = document.createElementNS(NS, "g");
+  g.setAttribute("class", "node-group");
+  g.dataset.nodeId = node.id;
+  g.style.setProperty("--glow-color", style.glow);
+
+  // Tooltip -- enhanced with execution data when available
+  const title = document.createElementNS(NS, "title");
+  let tip = `${node.type}: ${node.label}`;
+  if (node.expression) tip += `\nExpression: ${node.expression}`;
+  if (node.endpointUri) tip += `\nURI: ${node.endpointUri}`;
+  // Find execution data (top-level processor or aggregated from iterations)
+  const execProc = executionData.processors.find(p => p.nodeId === node.id);
+  const execCount = nodeExecCounts[node.id] || 0;
+  const aggDuration = nodeAggregateDuration[node.id] || 0;
+  if (execProc) {
+    tip += `\n\u2500\u2500\u2500 Execution \u2500\u2500\u2500`;
+    tip += `\nStatus: ${execProc.status}`;
+    tip += `\nDuration: ${execProc.durationMs}ms`;
+    if (execProc.splitSize) tip += `\nSplit: ${execProc.splitSize} iterations, ${aggDuration}ms total`;
+    if (execProc.inputBody) tip += `\nInput: ${execProc.inputBody}`;
+    if (execProc.outputBody) tip += `\nOutput: ${execProc.outputBody}`;
+  } else if (execCount > 1) {
+    tip += `\n\u2500\u2500\u2500 Execution \u2500\u2500\u2500`;
+    tip += `\nExecuted ${execCount}\u00d7 across split iterations`;
+    tip += `\nAggregate duration: ${aggDuration}ms`;
+  }
+  title.textContent = tip;
+  g.appendChild(title);
+
+  // Rect
+  const rect = document.createElementNS(NS, "rect");
+  rect.setAttribute("class", "node-rect");
+  rect.setAttribute("x", pos.x);
+  rect.setAttribute("y", pos.y);
+  rect.setAttribute("width", NODE_W);
+  rect.setAttribute("height", NODE_H);
+  rect.setAttribute("rx", "8");
+  rect.setAttribute("fill", style.fill);
+  rect.setAttribute("stroke", style.stroke);
+  rect.setAttribute("stroke-width", "1.5");
+  if (node.crossRoute) rect.setAttribute("stroke-dasharray", "5 3");
+  g.appendChild(rect);
+
+  // Icon
+  const icon = document.createElementNS(NS, "text");
+  icon.setAttribute("x", pos.x + 14);
+  icon.setAttribute("y", pos.y + NODE_H / 2 + 1);
+  icon.setAttribute("fill", style.text);
+  icon.setAttribute("font-size", "14");
+  icon.setAttribute("dominant-baseline", "central");
+  icon.textContent = style.icon;
+  g.appendChild(icon);
+
+  // Label
+  let labelText = node.label;
+  if (labelText.length > 24) labelText = labelText.substring(0, 22) + "\u2026";
+
+  const label = document.createElementNS(NS, "text");
+  label.setAttribute("x", pos.x + 30);
+  label.setAttribute("y", pos.y + NODE_H / 2 + 1);
+  label.setAttribute("fill", "#1c1917");
+  label.setAttribute("font-size", "12.5");
+  label.setAttribute("font-weight", "500");
+  label.setAttribute("dominant-baseline", "central");
+  label.textContent = labelText;
+  g.appendChild(label);
+
+  // Type badge below node
+  const badge = document.createElementNS(NS, "text");
+  badge.setAttribute("x", pos.x + NODE_W / 2);
+  badge.setAttribute("y", pos.y + NODE_H + 14);
+  badge.setAttribute("fill", style.text);
+  badge.setAttribute("font-size", "9.5");
+  badge.setAttribute("text-anchor", "middle");
+  badge.textContent = node.type.replace("EIP_", "");
+  g.appendChild(badge);
+
+  // Duration badge (only visible during execution overlay)
+  const showDuration = execProc || execCount > 0;
+  if (showDuration) {
+    const displayDuration = execProc ? execProc.durationMs : aggDuration;
+    const dbg = document.createElementNS(NS, "g");
+    dbg.setAttribute("class", "duration-badge");
+
+    const pillW = 42;
+    const pillH = 16;
+    const px = pos.x + NODE_W - pillW - 4;
+    const py = pos.y - pillH - 3;
+
+    const pill = document.createElementNS(NS, "rect");
+    pill.setAttribute("x", px);
+    pill.setAttribute("y", py);
+    pill.setAttribute("width", pillW);
+    pill.setAttribute("height", pillH);
+    pill.setAttribute("rx", "8");
+    pill.setAttribute("fill", "#ffffff");
+    pill.setAttribute("stroke", "#e4e0db");
+    pill.setAttribute("stroke-width", "1");
+    dbg.appendChild(pill);
+
+    const dtext = document.createElementNS(NS, "text");
+    dtext.setAttribute("x", px + pillW / 2);
+    dtext.setAttribute("y", py + pillH / 2 + 1);
+    // Color based on speed: green < 10ms, amber 10-50ms, rose > 50ms
+    let durColor = "#047857";
+    if (displayDuration > 50) durColor = "#be123c";
+    else if (displayDuration >= 10) durColor = "#b45309";
+    dtext.setAttribute("fill", durColor);
+    dtext.setAttribute("font-size", "10");
+    dtext.setAttribute("font-weight", "600");
+    dtext.setAttribute("text-anchor", "middle");
+    dtext.setAttribute("dominant-baseline", "central");
+    dtext.setAttribute("font-variant-numeric", "tabular-nums");
+    dtext.textContent = `${displayDuration}ms`;
+    dbg.appendChild(dtext);
+
+    g.appendChild(dbg);
+  }
+
+  // Iteration count badge for split nodes (e.g., "x3")
+  if (execProc && execProc.splitSize) {
+    const ibg = document.createElementNS(NS, "g");
+    ibg.setAttribute("class", "iter-badge");
+
+    const ibW = 28;
+    const ibH = 16;
+    const ibx = pos.x + 4;
+    const iby = pos.y - ibH - 3;
+
+    const ibPill = document.createElementNS(NS, "rect");
+    ibPill.setAttribute("x", ibx);
+    ibPill.setAttribute("y", iby);
+    ibPill.setAttribute("width", ibW);
+    ibPill.setAttribute("height", ibH);
+    ibPill.setAttribute("rx", "8");
+    ibPill.setAttribute("fill", "#047857");
+    ibPill.setAttribute("stroke", "none");
+    ibg.appendChild(ibPill);
+
+    const ibText = document.createElementNS(NS, "text");
+    ibText.setAttribute("x", ibx + ibW / 2);
+    ibText.setAttribute("y", iby + ibH / 2 + 1);
+    ibText.setAttribute("fill", "#ffffff");
+    ibText.setAttribute("font-size", "10");
+    ibText.setAttribute("font-weight", "700");
+    ibText.setAttribute("text-anchor", "middle");
+    ibText.setAttribute("dominant-baseline", "central");
+    ibText.textContent = `\u00d7${execProc.splitSize}`;
+    ibg.appendChild(ibText);
+
+    g.appendChild(ibg);
+  }
+
+  // Iteration count badge for nodes executed multiple times (inside split body)
+  if (!execProc && execCount > 1) {
+    const ibg = document.createElementNS(NS, "g");
+    ibg.setAttribute("class", "iter-badge");
+
+    const ibW = 28;
+    const ibH = 16;
+    const ibx = pos.x + 4;
+    const iby = pos.y - ibH - 3;
+
+    const ibPill = document.createElementNS(NS, "rect");
+    ibPill.setAttribute("x", ibx);
+    ibPill.setAttribute("y", iby);
+    ibPill.setAttribute("width", ibW);
+    ibPill.setAttribute("height", ibH);
+    ibPill.setAttribute("rx", "8");
+    ibPill.setAttribute("fill", "#047857");
+    ibPill.setAttribute("stroke", "none");
+    ibg.appendChild(ibPill);
+
+    const ibText = document.createElementNS(NS, "text");
+    ibText.setAttribute("x", ibx + ibW / 2);
+    ibText.setAttribute("y", iby + ibH / 2 + 1);
+    ibText.setAttribute("fill", "#ffffff");
+    ibText.setAttribute("font-size", "10");
+    ibText.setAttribute("font-weight", "700");
+    ibText.setAttribute("text-anchor", "middle");
+    ibText.setAttribute("dominant-baseline", "central");
+    ibText.textContent = `\u00d7${execCount}`;
+    ibg.appendChild(ibText);
+
+    g.appendChild(ibg);
+  }
+
+  // Cross-route external route pill
+  if (node.crossRoute) {
+    const pillW = 130;
+    const pillH = 18;
+    const px = pos.x + (NODE_W - pillW) / 2;
+    const py = pos.y + NODE_H + 22;
+
+    const pill = document.createElementNS(NS, "rect");
+    pill.setAttribute("x", px);
+    pill.setAttribute("y", py);
+    pill.setAttribute("width", pillW);
+    pill.setAttribute("height", pillH);
+    pill.setAttribute("rx", "9");
+    pill.setAttribute("fill", "rgba(14, 116, 144, 0.06)");
+    pill.setAttribute("stroke", "rgba(14, 116, 144, 0.35)");
+    pill.setAttribute("stroke-width", "1");
+    pill.setAttribute("stroke-dasharray", "3 2");
+    g.appendChild(pill);
+
+    const pillText = document.createElementNS(NS, "text");
+    pillText.setAttribute("x", px + pillW / 2);
+    pillText.setAttribute("y", py + pillH / 2 + 1);
+    pillText.setAttribute("fill", "#0e7490");
+    pillText.setAttribute("font-size", "9.5");
+    pillText.setAttribute("text-anchor", "middle");
+    pillText.setAttribute("dominant-baseline", "central");
+    pillText.textContent = "\u2197 external route";
+    g.appendChild(pillText);
+  }
+
+  nodeElements[node.id] = g;
+  nodeGroup.appendChild(g);
+});
+
+svg.appendChild(nodeGroup);
+
+// -- Execution sequence number overlay (hidden by default) ------------------------
+const seqGroup = document.createElementNS(NS, "g");
+seqGroup.setAttribute("class", "seq-numbers");
+seqGroup.style.display = "none";
+
+// Flatten top-level processor sequence (skip iteration children for seq numbers)
+const topLevelSeq = executionData.processors.filter(p => !p.iterations || true);
+const seenSeqNodes = new Set();
+
+topLevelSeq.forEach((proc, i) => {
+  if (seenSeqNodes.has(proc.nodeId)) return;
+  seenSeqNodes.add(proc.nodeId);
+  const pos = positions[proc.nodeId];
+  if (!pos) return;
+
+  const cx = pos.x + 10;
+  const cy = pos.y + 10;
+
+  const circle = document.createElementNS(NS, "circle");
+  circle.setAttribute("cx", cx);
+  circle.setAttribute("cy", cy);
+  circle.setAttribute("r", "9");
+  circle.setAttribute("fill", "#047857");
+  circle.setAttribute("stroke", "#ffffff");
+  circle.setAttribute("stroke-width", "2");
+  seqGroup.appendChild(circle);
+
+  const num = document.createElementNS(NS, "text");
+  num.setAttribute("x", cx);
+  num.setAttribute("y", cy + 1);
+  num.setAttribute("fill", "#ffffff");
+  num.setAttribute("font-size", "10");
+  num.setAttribute("font-weight", "700");
+  num.setAttribute("text-anchor", "middle");
+  num.setAttribute("dominant-baseline", "central");
+  num.textContent = i + 1;
+  seqGroup.appendChild(num);
+});
+
+// Add sequence numbers for split body nodes (using sub-numbering like 3a, 3b, 3c)
+if (splitProc && splitProc.iterations.length > 0) {
+  const splitIdx = executionData.processors.indexOf(splitProc);
+  const firstIter = splitProc.iterations[0];
+  firstIter.processors.forEach((proc, j) => {
+    if (seenSeqNodes.has(proc.nodeId)) return;
+    seenSeqNodes.add(proc.nodeId);
+    const pos = positions[proc.nodeId];
+    if (!pos) return;
+
+    const cx = pos.x + 10;
+    const cy = pos.y + 10;
+
+    const circle = document.createElementNS(NS, "circle");
+    circle.setAttribute("cx", cx);
+    circle.setAttribute("cy", cy);
+    circle.setAttribute("r", "9");
+    circle.setAttribute("fill", "#047857");
+    circle.setAttribute("stroke", "#ffffff");
+    circle.setAttribute("stroke-width", "2");
+    seqGroup.appendChild(circle);
+
+    const num = document.createElementNS(NS, "text");
+    num.setAttribute("x", cx);
+    num.setAttribute("y", cy + 1);
+    num.setAttribute("fill", "#ffffff");
+    num.setAttribute("font-size", "9");
+    num.setAttribute("font-weight", "700");
+    num.setAttribute("text-anchor", "middle");
+    num.setAttribute("dominant-baseline", "central");
+    num.textContent = `${splitIdx + 1}${String.fromCharCode(97 + j)}`;
+    seqGroup.appendChild(num);
+  });
+}
+
+svg.appendChild(seqGroup);
+
+// -- Build execution detail panel with iteration tabs -----------------------------
+function buildExecPanel() {
+  const tabsEl = document.getElementById("iterTabs");
+  const stepsEl = document.getElementById("execSteps");
+  const timingEl = document.getElementById("execTiming");
+
+  timingEl.textContent = `Exchange: ${executionData.exchangeId}  \u00b7  ${executionData.startTime}  \u00b7  ${executionData.durationMs}ms total`;
+
+  // Build iteration tabs if there's a split processor
+  if (splitProc && splitProc.iterations.length > 0) {
+    // "All" tab
+    const allTab = document.createElement("div");
+    allTab.className = "iter-tab active";
+    allTab.textContent = "All Steps";
+    allTab.onclick = () => selectIteration(null);
+    tabsEl.appendChild(allTab);
+
+    splitProc.iterations.forEach((iter, i) => {
+      const tab = document.createElement("div");
+      tab.className = "iter-tab";
+      tab.innerHTML = `Iteration <span class="iter-idx">${i}</span>`;
+      tab.title = `Split item: ${iter.inputBody}`;
+      tab.onclick = () => selectIteration(i);
+      tabsEl.appendChild(tab);
+    });
+  }
+
+  renderSteps(null);
+}
+
+function selectIteration(iterIdx) {
+  currentIteration = iterIdx;
+  // Update tab active state
+  document.querySelectorAll(".iter-tab").forEach((tab, i) => {
+    tab.classList.toggle("active", iterIdx === null ? i === 0 : i === iterIdx + 1);
+  });
+  renderSteps(iterIdx);
+}
+
+function renderSteps(iterIdx) {
+  const stepsEl = document.getElementById("execSteps");
+  stepsEl.innerHTML = "";
+
+  let procs;
+  if (iterIdx === null) {
+    // Show all top-level processors (split shows as aggregate)
+    procs = executionData.processors;
+  } else {
+    // Show pre-split procs + specific iteration procs + post-split procs
+    const splitIndex = executionData.processors.indexOf(splitProc);
+    const preSplit = executionData.processors.slice(0, splitIndex);
+    const iterProcs = splitProc.iterations[iterIdx].processors;
+    const postSplit = executionData.processors.slice(splitIndex + 1);
+    procs = [...preSplit, ...iterProcs, ...postSplit];
+  }
+
+  procs.forEach((proc, i) => {
+    const step = document.createElement("div");
+    step.className = "exec-step";
+
+    const dot = document.createElement("div");
+    dot.className = "step-dot";
+    if (proc.status === "FAILED") dot.style.background = "#be123c";
+    step.appendChild(dot);
+
+    const lbl = document.createElement("div");
+    lbl.className = "step-label";
+    let labelPrefix = `${i + 1}. `;
+    if (proc.splitIndex !== undefined) labelPrefix = `${i + 1}. [${proc.splitIndex}] `;
+    lbl.textContent = labelPrefix + proc.label;
+    lbl.title = proc.label;
+    step.appendChild(lbl);
+
+    const type = document.createElement("div");
+    type.className = "step-type";
+    let typeText = proc.processorType;
+    if (proc.iterations) typeText += ` (\u00d7${proc.splitSize})`;
+    type.textContent = typeText;
+    step.appendChild(type);
+
+    const dur = document.createElement("div");
+    dur.className = "step-duration";
+    dur.textContent = `${proc.durationMs}ms`;
+    step.appendChild(dur);
+
+    // Show body details
+    if (proc.inputBody && proc.outputBody) {
+      const bodyDiv = document.createElement("div");
+      bodyDiv.className = "step-body";
+
+      if (proc.outputHeaders && proc.inputHeaders) {
+        const newKeys = Object.keys(proc.outputHeaders).filter(k => !(k in proc.inputHeaders));
+        if (newKeys.length > 0) {
+          bodyDiv.textContent = `+${newKeys.map(k => `${k}: ${proc.outputHeaders[k]}`).join(", ")}`;
+          bodyDiv.style.color = "#047857";
+        }
+      }
+
+      if (proc.processorType === "to" && proc.inputBody !== proc.outputBody) {
+        const outObj = proc.outputBody;
+        bodyDiv.innerHTML = `<span class="arrow">\u2192</span> body changed`;
+        bodyDiv.style.color = "#047857";
+      }
+
+      if (proc.iterations) {
+        bodyDiv.textContent = `${proc.splitSize} iterations, ${proc.iterations.reduce((s, it) => s + it.durationMs, 0)}ms total`;
+        bodyDiv.style.color = "#1d4ed8";
+      }
+
+      if (bodyDiv.textContent || bodyDiv.innerHTML) step.appendChild(bodyDiv);
+    }
+
+    stepsEl.appendChild(step);
+  });
+}
+
+buildExecPanel();
+
+// -- Toggle execution overlay -----------------------------------------------------
+let overlayActive = false;
+
+function toggleExecution() {
+  overlayActive = !overlayActive;
+  const svgEl = document.getElementById("diagram");
+  const btn = document.getElementById("toggleOverlay");
+  const badge = document.getElementById("execBadge");
+  const panel = document.getElementById("execPanel");
+  const meta = document.getElementById("execMeta");
+  const iconSpan = document.getElementById("overlayIcon");
+
+  if (overlayActive) {
+    // Activate overlay
+    svgEl.classList.add("overlay-active");
+    btn.classList.add("active");
+    btn.innerHTML = '<span id="overlayIcon">\u25a0</span> Hide Execution <span class="kbd">E</span>';
+    badge.className = "exec-badge visible completed";
+    panel.classList.add("visible");
+    meta.textContent = `Correlation: ${executionData.correlationId}`;
+
+    // Dim non-executed nodes and edges
+    routeData.nodes.forEach(node => {
+      const el = nodeElements[node.id];
+      if (!el) return;
+      if (executedNodes.has(node.id)) {
+        el.classList.add("executed");
+        el.classList.remove("dimmed");
+      } else {
+        el.classList.add("dimmed");
+        el.classList.remove("executed");
+      }
+    });
+
+    document.querySelectorAll(".edge-path").forEach(el => {
+      const key = el.dataset.edgeKey;
+      if (executedEdges.has(key)) {
+        el.classList.add("executed");
+        el.classList.remove("dimmed");
+      } else {
+        el.classList.add("dimmed");
+        el.classList.remove("executed");
+      }
+    });
+
+    document.querySelectorAll(".edge-label").forEach(el => {
+      const key = el.dataset.edgeKey;
+      el.style.opacity = executedEdges.has(key) ? "1" : "0.15";
+    });
+
+    // Show execution edges + sequence numbers
+    execEdgeGroup.style.display = "";
+    seqGroup.style.display = "";
+
+  } else {
+    // Deactivate overlay
+    svgEl.classList.remove("overlay-active");
+    btn.classList.remove("active");
+    btn.innerHTML = '<span id="overlayIcon">\u25b6</span> Show Execution <span class="kbd">E</span>';
+    badge.className = "exec-badge";
+    panel.classList.remove("visible");
+    meta.textContent = "";
+
+    // Remove dim/executed classes
+    routeData.nodes.forEach(node => {
+      const el = nodeElements[node.id];
+      if (!el) return;
+      el.classList.remove("executed", "dimmed");
+    });
+
+    document.querySelectorAll(".edge-path").forEach(el => {
+      el.classList.remove("executed", "dimmed");
+    });
+
+    document.querySelectorAll(".edge-label").forEach(el => {
+      el.style.opacity = "";
+    });
+
+    execEdgeGroup.style.display = "none";
+    seqGroup.style.display = "none";
+  }
+}
+
+// Keyboard shortcut: E to toggle
+document.addEventListener("keydown", (e) => {
+  if (e.key === "e" || e.key === "E") {
+    if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
+    toggleExecution();
+  }
+});
+</script>
+
+</body>
+</html>
diff --git a/examples/transaction-explorer-light.html b/examples/transaction-explorer-light.html
new file mode 100644
index 00000000..6a7fec65
--- /dev/null
+++ b/examples/transaction-explorer-light.html
@@ -0,0 +1,1309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Transaction Explorer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg-deep: #f7f5f2;
+    --bg-base: #efecea;
+    --bg-surface: #ffffff;
+    --bg-raised: #f3f1ee;
+    --bg-hover: #eae7e3;
+    --border: #d4cfc8;
+    --border-subtle: #e4e0db;
+    --text-primary: #1c1917;
+    --text-secondary: #57534e;
+    --text-muted: #a8a29e;
+    --amber: #b45309;
+    --amber-dim: #92400e;
+    --amber-glow: rgba(180, 83, 9, 0.07);
+    --cyan: #0e7490;
+    --cyan-dim: #155e75;
+    --cyan-glow: rgba(14, 116, 144, 0.06);
+    --rose: #be123c;
+    --rose-dim: #9f1239;
+    --rose-glow: rgba(190, 18, 60, 0.05);
+    --green: #047857;
+    --green-glow: rgba(4, 120, 87, 0.06);
+    --blue: #1d4ed8;
+    --purple: #7c3aed;
+    --font-body: 'DM Sans', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg-deep);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* Topographic background pattern */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 800px 400px at 20% 20%, rgba(180, 83, 9, 0.02), transparent),
+      radial-gradient(ellipse 600px 600px at 80% 80%, rgba(14, 116, 144, 0.015), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* Topo lines */
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    opacity: 0.018;
+    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23b45309' stroke-width='1'/%3E%3Cpath d='M0 220 Q120 170 200 220 T400 220' fill='none' stroke='%23b45309' stroke-width='0.5'/%3E%3Cpath d='M0 180 Q80 130 200 180 T400 180' fill='none' stroke='%23b45309' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q150 60 200 100 T400 100' fill='none' stroke='%230e7490' stroke-width='0.5'/%3E%3Cpath d='M0 300 Q100 260 200 300 T400 300' fill='none' stroke='%230e7490' stroke-width='0.5'/%3E%3C/svg%3E");
+    background-size: 400px 400px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  a { color: var(--amber); text-decoration: none; }
+  a:hover { color: var(--text-primary); }
+
+  /* ─── Top Navigation ─── */
+  .topnav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    border-bottom: 1px solid var(--border-subtle);
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    gap: 32px;
+  }
+
+  .topnav .logo {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--amber);
+    letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .topnav .logo svg { width: 22px; height: 22px; }
+
+  .topnav .nav-links {
+    display: flex;
+    gap: 4px;
+    list-style: none;
+  }
+
+  .topnav .nav-links a {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.15s;
+    position: relative;
+  }
+
+  .topnav .nav-links a:hover { color: var(--text-primary); background: var(--bg-raised); }
+  .topnav .nav-links a.active {
+    color: var(--amber);
+    background: var(--amber-glow);
+  }
+
+  .topnav .nav-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .env-badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--green-glow);
+    color: var(--green);
+    border: 1px solid rgba(4, 120, 87, 0.2);
+    font-weight: 500;
+  }
+
+  .cluster-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  /* ─── Main Layout ─── */
+  .main {
+    position: relative;
+    z-index: 1;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 24px;
+  }
+
+  /* ─── Page Header ─── */
+  .page-header {
+    margin-bottom: 24px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .page-header h1 {
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    color: var(--text-primary);
+  }
+
+  .page-header .subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  .live-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--green);
+    font-family: var(--font-mono);
+    font-weight: 500;
+  }
+
+  .live-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    animation: livePulse 2s ease-in-out infinite;
+  }
+
+  @keyframes livePulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.3); }
+    50% { box-shadow: 0 0 0 6px rgba(4, 120, 87, 0); }
+  }
+
+  /* ─── Stats Bar ─── */
+  .stats-bar {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .stat-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 16px 20px;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  }
+
+  .stat-card:hover { border-color: var(--border); }
+
+  .stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }
+
+  .stat-card.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
+  .stat-card.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
+  .stat-card.rose::before { background: linear-gradient(90deg, var(--rose), transparent); }
+  .stat-card.green::before { background: linear-gradient(90deg, var(--green), transparent); }
+  .stat-card.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
+
+  .stat-card .stat-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+
+  .stat-card .stat-value {
+    font-family: var(--font-mono);
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -1px;
+  }
+
+  .stat-card.amber .stat-value { color: var(--amber); }
+  .stat-card.cyan .stat-value { color: var(--cyan); }
+  .stat-card.rose .stat-value { color: var(--rose); }
+  .stat-card.green .stat-value { color: var(--green); }
+  .stat-card.blue .stat-value { color: var(--blue); }
+
+  .stat-card .stat-change {
+    font-size: 11px;
+    font-family: var(--font-mono);
+    margin-top: 4px;
+  }
+
+  .stat-card .stat-change.up { color: var(--rose); }
+  .stat-card .stat-change.down { color: var(--green); }
+  .stat-card .stat-change.neutral { color: var(--text-muted); }
+
+  /* ─── Search & Filters ─── */
+  .filter-bar {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: 16px 20px;
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  }
+
+  .filter-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .search-input-wrap {
+    flex: 1;
+    min-width: 300px;
+    position: relative;
+  }
+
+  .search-input-wrap svg {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: var(--text-muted);
+  }
+
+  .search-input-wrap input {
+    width: 100%;
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 10px 14px 10px 40px;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .search-input-wrap input::placeholder { color: var(--text-muted); font-family: var(--font-body); }
+  .search-input-wrap input:focus {
+    border-color: var(--amber);
+    box-shadow: 0 0 0 3px var(--amber-glow);
+  }
+
+  .search-input-wrap .search-hint {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    padding: 3px 8px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+  }
+
+  .filter-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .filter-group label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    white-space: nowrap;
+  }
+
+  .filter-select {
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 8px 32px 8px 12px;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 13px;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8a29e' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    transition: border-color 0.2s;
+  }
+
+  .filter-select:focus { border-color: var(--amber); }
+
+  .filter-chips {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px 12px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: 99px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
+  .chip.active { background: var(--amber-glow); border-color: var(--amber); color: var(--amber); }
+  .chip.active.green-chip { background: var(--green-glow); border-color: rgba(4,120,87,0.3); color: var(--green); }
+  .chip.active.rose-chip { background: var(--rose-glow); border-color: rgba(190,18,60,0.3); color: var(--rose); }
+  .chip.active.blue-chip { background: rgba(29,78,216,0.06); border-color: rgba(29,78,216,0.3); color: var(--blue); }
+
+  .chip .chip-count {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    opacity: 0.7;
+  }
+
+  .date-input {
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 8px 12px;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    outline: none;
+    width: 160px;
+    transition: border-color 0.2s;
+  }
+  .date-input:focus { border-color: var(--amber); }
+
+  .duration-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .duration-range input[type="range"] {
+    width: 100px;
+    accent-color: var(--amber);
+    cursor: pointer;
+  }
+
+  .duration-range .range-label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    min-width: 50px;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+  }
+
+  .btn:hover { background: var(--bg-raised); color: var(--text-primary); border-color: var(--text-muted); }
+
+  .btn-primary {
+    background: var(--amber);
+    color: #ffffff;
+    border-color: var(--amber);
+    font-weight: 600;
+  }
+  .btn-primary:hover { background: #92400e; border-color: #92400e; color: #ffffff; }
+
+  .filter-tags {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .filter-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: var(--amber-glow);
+    border: 1px solid rgba(180,83,9,0.2);
+    border-radius: 99px;
+    font-size: 12px;
+    color: var(--amber);
+    font-family: var(--font-mono);
+  }
+
+  .filter-tag .remove {
+    cursor: pointer;
+    opacity: 0.5;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .filter-tag .remove:hover { opacity: 1; }
+
+  .filter-tags .clear-all {
+    font-size: 11px;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px 8px;
+  }
+  .filter-tags .clear-all:hover { color: var(--rose); }
+
+  /* ─── Results Table ─── */
+  .results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding: 0 4px;
+  }
+
+  .results-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .results-count strong { color: var(--text-secondary); }
+
+  .results-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .table-wrap {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  thead {
+    background: var(--bg-raised);
+    border-bottom: 1px solid var(--border);
+  }
+
+  thead th {
+    padding: 12px 16px;
+    text-align: left;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: color 0.15s;
+    position: relative;
+  }
+
+  thead th:hover { color: var(--text-secondary); }
+  thead th.sorted { color: var(--amber); }
+  thead th.sorted::after {
+    content: ' ▼';
+    font-size: 8px;
+  }
+  thead th.sorted.asc::after { content: ' ▲'; }
+
+  tbody tr {
+    border-bottom: 1px solid var(--border-subtle);
+    transition: background 0.1s;
+    cursor: pointer;
+  }
+
+  tbody tr:last-child { border-bottom: none; }
+  tbody tr:hover { background: var(--bg-raised); }
+
+  tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .td-expand {
+    width: 32px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 16px;
+    transition: transform 0.2s;
+  }
+
+  tr.expanded .td-expand { transform: rotate(90deg); color: var(--amber); }
+
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 10px;
+    border-radius: 99px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+  }
+
+  .status-pill.completed { background: var(--green-glow); color: var(--green); }
+  .status-pill.failed { background: var(--rose-glow); color: var(--rose); }
+  .status-pill.running { background: rgba(29,78,216,0.06); color: var(--blue); }
+
+  .status-pill .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .status-pill.running .status-dot { animation: livePulse 1.5s ease-in-out infinite; }
+
+  .mono { font-family: var(--font-mono); font-size: 12px; }
+  .text-muted { color: var(--text-muted); }
+  .text-secondary { color: var(--text-secondary); }
+  .text-amber { color: var(--amber); }
+
+  .app-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 8px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border-subtle);
+    border-radius: 4px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
+  }
+
+  .app-badge .app-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+
+  .duration-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .duration-bar .bar {
+    width: 60px;
+    height: 4px;
+    background: var(--bg-base);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .duration-bar .bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.3s;
+  }
+
+  .duration-bar .bar-fill.fast { background: var(--green); }
+  .duration-bar .bar-fill.medium { background: var(--amber); }
+  .duration-bar .bar-fill.slow { background: var(--rose); }
+
+  .correlation-id {
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* ─── Expanded Row / Processor Tree ─── */
+  .detail-row { display: none; }
+  .detail-row.visible { display: table-row; }
+
+  .detail-row td {
+    padding: 0;
+    background: var(--bg-raised);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .detail-content {
+    padding: 20px 24px;
+    display: flex;
+    gap: 24px;
+  }
+
+  .processor-tree {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .processor-tree h4 {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+  }
+
+  .proc-node {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 8px 12px;
+    border-radius: var(--radius-sm);
+    margin-bottom: 2px;
+    transition: background 0.1s;
+    position: relative;
+  }
+
+  .proc-node:hover { background: var(--bg-surface); }
+
+  .proc-connector {
+    position: absolute;
+    left: 22px;
+    top: 28px;
+    bottom: -4px;
+    width: 1px;
+    background: var(--border);
+  }
+
+  .proc-node:last-child .proc-connector { display: none; }
+
+  .proc-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+    flex-shrink: 0;
+    z-index: 1;
+    font-family: var(--font-mono);
+  }
+
+  .proc-icon.endpoint { background: rgba(29,78,216,0.08); color: var(--blue); border: 1px solid rgba(29,78,216,0.2); }
+  .proc-icon.processor { background: var(--green-glow); color: var(--green); border: 1px solid rgba(4,120,87,0.2); }
+  .proc-icon.eip { background: rgba(124,58,237,0.07); color: var(--purple); border: 1px solid rgba(124,58,237,0.2); }
+  .proc-icon.error { background: var(--rose-glow); color: var(--rose); border: 1px solid rgba(190,18,60,0.2); }
+
+  .proc-info { flex: 1; min-width: 0; }
+  .proc-info .proc-type { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+  .proc-info .proc-uri {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .proc-timing {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+    text-align: right;
+  }
+
+  .proc-timing .proc-duration { font-weight: 600; color: var(--text-secondary); }
+
+  .detail-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+  }
+
+  .detail-sidebar h4 {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+  }
+
+  .detail-kv {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px 12px;
+    font-size: 12px;
+  }
+
+  .detail-kv dt { color: var(--text-muted); font-weight: 500; }
+  .detail-kv dd { font-family: var(--font-mono); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
+
+  .detail-body-preview {
+    margin-top: 16px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 12px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-secondary);
+    max-height: 120px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .detail-body-preview .label {
+    font-family: var(--font-body);
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    display: block;
+    margin-bottom: 6px;
+  }
+
+  .error-preview {
+    margin-top: 12px;
+    background: var(--rose-glow);
+    border: 1px solid rgba(190,18,60,0.2);
+    border-radius: var(--radius-sm);
+    padding: 10px 12px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--rose);
+    max-height: 80px;
+    overflow: auto;
+  }
+
+  /* ─── Pagination ─── */
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    margin-top: 20px;
+  }
+
+  .pagination .page-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .pagination .page-btn:hover { border-color: var(--border); background: var(--bg-raised); }
+  .pagination .page-btn.active { background: var(--amber-glow); border-color: var(--amber-dim); color: var(--amber); }
+  .pagination .page-btn.disabled { opacity: 0.3; cursor: default; }
+
+  .pagination .page-ellipsis {
+    color: var(--text-muted);
+    padding: 0 4px;
+    font-family: var(--font-mono);
+  }
+
+  /* ─── Animations ─── */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .animate-in { animation: fadeIn 0.3s ease-out both; }
+  .delay-1 { animation-delay: 0.05s; }
+  .delay-2 { animation-delay: 0.1s; }
+  .delay-3 { animation-delay: 0.15s; }
+  .delay-4 { animation-delay: 0.2s; }
+  .delay-5 { animation-delay: 0.25s; }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+  /* ─── Responsive ─── */
+  @media (max-width: 1200px) {
+    .stats-bar { grid-template-columns: repeat(3, 1fr); }
+    .detail-content { flex-direction: column; }
+    .detail-sidebar { width: 100%; }
+  }
+
+  @media (max-width: 768px) {
+    .stats-bar { grid-template-columns: 1fr 1fr; }
+    .filter-row { flex-direction: column; align-items: stretch; }
+    .search-input-wrap { min-width: unset; }
+  }
+</style>
+</head>
+<body>
+
+<!-- ═══ Top Navigation ═══ -->
+<nav class="topnav">
+  <div class="logo">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"/>
+      <path d="M12 6v6l4 2"/>
+    </svg>
+    cameleer3
+  </div>
+  <ul class="nav-links">
+    <li><a href="dashboard-light.html">Dashboard</a></li>
+    <li><a href="transaction-explorer-light.html" class="active">Transactions</a></li>
+    <li><a href="route-detail-light.html">Routes</a></li>
+  </ul>
+  <div class="nav-right">
+    <span class="env-badge">PRODUCTION</span>
+    <span class="cluster-count">47 apps · 1,283 routes</span>
+  </div>
+</nav>
+
+<!-- ═══ Main Content ═══ -->
+<main class="main">
+
+  <!-- Page Header -->
+  <div class="page-header animate-in">
+    <div>
+      <h1>Transaction Explorer</h1>
+      <div class="subtitle">Search across 47 applications · 2.4M transactions today</div>
+    </div>
+    <div class="live-indicator">
+      <span class="live-dot"></span>
+      STREAMING
+    </div>
+  </div>
+
+  <!-- Stats Bar -->
+  <div class="stats-bar">
+    <div class="stat-card amber animate-in delay-1">
+      <div class="stat-label">Total Matches</div>
+      <div class="stat-value">12,847</div>
+      <div class="stat-change neutral">of 2.4M today</div>
+    </div>
+    <div class="stat-card cyan animate-in delay-2">
+      <div class="stat-label">Avg Duration</div>
+      <div class="stat-value">47ms</div>
+      <div class="stat-change down">↓ 12% vs yesterday</div>
+    </div>
+    <div class="stat-card rose animate-in delay-3">
+      <div class="stat-label">Failure Rate</div>
+      <div class="stat-value">0.34%</div>
+      <div class="stat-change up">↑ 0.08% vs yesterday</div>
+    </div>
+    <div class="stat-card green animate-in delay-4">
+      <div class="stat-label">P99 Latency</div>
+      <div class="stat-value">312ms</div>
+      <div class="stat-change down">↓ 23ms vs yesterday</div>
+    </div>
+    <div class="stat-card blue animate-in delay-5">
+      <div class="stat-label">Active Now</div>
+      <div class="stat-value">1,293</div>
+      <div class="stat-change neutral">exchanges in-flight</div>
+    </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="filter-bar animate-in delay-3">
+    <!-- Row 1: Search -->
+    <div class="filter-row">
+      <div class="search-input-wrap">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        <input type="text" placeholder="Search by correlation ID, order ID, error message, route ID..." value="ORD-2024-88431">
+        <span class="search-hint">⌘K</span>
+      </div>
+      <button class="btn-primary btn">Search</button>
+      <button class="btn">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 21v-7m0 0V5a2 2 0 012-2h2.5l1 2H21l-3 6H9.5l-1-2H6v7z"/></svg>
+        Export
+      </button>
+    </div>
+
+    <!-- Row 2: Filters -->
+    <div class="filter-row">
+      <div class="filter-group">
+        <label>Status</label>
+        <div class="filter-chips">
+          <span class="chip active green-chip"><span class="status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block"></span> Completed <span class="chip-count">12,804</span></span>
+          <span class="chip active rose-chip"><span class="status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--rose);display:inline-block"></span> Failed <span class="chip-count">43</span></span>
+          <span class="chip blue-chip"><span class="status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--blue);display:inline-block"></span> Running <span class="chip-count">0</span></span>
+        </div>
+      </div>
+
+      <div style="width:1px;height:24px;background:var(--border);margin:0 4px"></div>
+
+      <div class="filter-group">
+        <label>Date</label>
+        <input type="text" class="date-input" value="2026-03-09 00:00" placeholder="From">
+        <span class="text-muted" style="font-size:12px">→</span>
+        <input type="text" class="date-input" value="2026-03-09 23:59" placeholder="To">
+      </div>
+
+      <div style="width:1px;height:24px;background:var(--border);margin:0 4px"></div>
+
+      <div class="filter-group">
+        <label>Duration</label>
+        <div class="duration-range">
+          <span class="range-label">0ms</span>
+          <input type="range" min="0" max="5000" value="5000">
+          <span class="range-label">≤ 5000ms</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Row 3: App + Route filters -->
+    <div class="filter-row">
+      <div class="filter-group">
+        <label>Application</label>
+        <select class="filter-select">
+          <option>All Applications (47)</option>
+          <option selected>order-service-eu</option>
+          <option>payment-gateway</option>
+          <option>inventory-sync</option>
+          <option>notification-hub</option>
+          <option>etl-pipeline-prod</option>
+        </select>
+      </div>
+
+      <div class="filter-group">
+        <label>Route</label>
+        <select class="filter-select">
+          <option>All Routes (1,283)</option>
+          <option>order-intake</option>
+          <option selected>content-based-routing</option>
+          <option>payment-processing</option>
+          <option>inventory-check</option>
+        </select>
+      </div>
+
+      <div class="filter-tags" style="margin-left:8px">
+        <span class="filter-tag">app:order-service-eu <span class="remove">×</span></span>
+        <span class="filter-tag">route:content-based-routing <span class="remove">×</span></span>
+        <span class="filter-tag">text:"ORD-2024-88431" <span class="remove">×</span></span>
+        <span class="clear-all">Clear all</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Results Header -->
+  <div class="results-header animate-in delay-4">
+    <span class="results-count">Showing <strong>1–25</strong> of <strong>12,847</strong> results · sorted by <strong>timestamp</strong> desc</span>
+    <div class="results-actions">
+      <button class="btn" style="font-size:12px;padding:6px 10px">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+        Columns
+      </button>
+      <button class="btn" style="font-size:12px;padding:6px 10px">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"/></svg>
+        CSV
+      </button>
+    </div>
+  </div>
+
+  <!-- Results Table -->
+  <div class="table-wrap animate-in delay-4">
+    <table>
+      <thead>
+        <tr>
+          <th style="width:32px"></th>
+          <th class="sorted">Timestamp</th>
+          <th>Status</th>
+          <th>Application</th>
+          <th>Route</th>
+          <th>Correlation ID</th>
+          <th>Duration</th>
+          <th>Processors</th>
+        </tr>
+      </thead>
+      <tbody id="results-body">
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  <div class="pagination animate-in delay-5">
+    <div class="page-btn disabled">‹</div>
+    <div class="page-btn active">1</div>
+    <div class="page-btn">2</div>
+    <div class="page-btn">3</div>
+    <div class="page-btn">4</div>
+    <div class="page-btn">5</div>
+    <span class="page-ellipsis">…</span>
+    <div class="page-btn">514</div>
+    <div class="page-btn">›</div>
+  </div>
+
+</main>
+
+<script>
+// ─── Mock Data Generator ───
+const APPS = [
+  { name: 'order-service-eu', color: '#1d4ed8' },
+  { name: 'payment-gateway', color: '#b45309' },
+  { name: 'inventory-sync', color: '#047857' },
+  { name: 'notification-hub', color: '#7c3aed' },
+  { name: 'etl-pipeline-prod', color: '#be123c' },
+  { name: 'shipping-tracker', color: '#0e7490' },
+  { name: 'customer-portal', color: '#c026d3' },
+];
+
+const ROUTES = [
+  'order-intake', 'content-based-routing', 'payment-processing',
+  'inventory-check', 'notification-dispatch', 'etl-transform',
+  'shipment-update', 'order-validation', 'fraud-check',
+  'email-sender', 'sms-gateway', 'audit-log',
+];
+
+const ERROR_MESSAGES = [
+  'Connection refused: payment-provider-api:8443',
+  'Timeout waiting for response from inventory-service (30000ms)',
+  'org.apache.camel.CamelExecutionException: MVEL expression failed',
+  'javax.jms.JMSException: Queue ORDERS.PRIORITY is full',
+  'HttpOperationFailedException: HTTP operation failed with status 503',
+  'com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: field "qty"',
+];
+
+const PROCESSOR_TREES = {
+  completed: [
+    { type: 'From', icon: 'EP', iconClass: 'endpoint', uri: 'direct:order-intake', duration: 0 },
+    { type: 'SetHeader', icon: 'PR', iconClass: 'processor', uri: 'X-Cameleer-CorrelationId', duration: 1 },
+    { type: 'Log', icon: 'PR', iconClass: 'processor', uri: 'Received order: ${body}', duration: 0 },
+    { type: 'Choice', icon: 'CB', iconClass: 'eip', uri: 'content-based-router', duration: 0 },
+    { type: 'When', icon: 'CB', iconClass: 'eip', uri: '${header.priority} == "HIGH"', duration: 0 },
+    { type: 'To', icon: 'EP', iconClass: 'endpoint', uri: 'direct:priority-processing', duration: 35 },
+    { type: 'Marshal', icon: 'PR', iconClass: 'processor', uri: 'jackson', duration: 2 },
+    { type: 'To', icon: 'EP', iconClass: 'endpoint', uri: 'jms:queue:ORDERS.COMPLETED', duration: 8 },
+  ],
+  failed: [
+    { type: 'From', icon: 'EP', iconClass: 'endpoint', uri: 'direct:payment-processing', duration: 0 },
+    { type: 'SetHeader', icon: 'PR', iconClass: 'processor', uri: 'Authorization: Bearer ***', duration: 0 },
+    { type: 'To', icon: 'EP', iconClass: 'endpoint', uri: 'https://api.payment-provider.com/v2/charge', duration: 3042 },
+    { type: 'Exception', icon: '!!', iconClass: 'error', uri: 'HttpOperationFailedException: HTTP 503', duration: 0 },
+  ]
+};
+
+function randomId() {
+  const hex = () => Math.random().toString(16).slice(2, 10);
+  return hex() + hex();
+}
+
+function generateTransactions(count) {
+  const txns = [];
+  const now = Date.now();
+
+  for (let i = 0; i < count; i++) {
+    const isFailed = Math.random() < 0.04;
+    const isRunning = !isFailed && Math.random() < 0.005;
+    const status = isRunning ? 'running' : (isFailed ? 'failed' : 'completed');
+    const app = APPS[Math.floor(Math.random() * APPS.length)];
+    const route = ROUTES[Math.floor(Math.random() * ROUTES.length)];
+    const duration = isFailed
+      ? Math.floor(Math.random() * 30000) + 100
+      : Math.floor(Math.random() * 500) + 5;
+    const procCount = Math.floor(Math.random() * 12) + 3;
+    const orderId = `ORD-2024-${(88000 + Math.floor(Math.random() * 1000)).toString()}`;
+    const ts = new Date(now - i * (Math.random() * 2000 + 500));
+
+    txns.push({
+      id: randomId(),
+      timestamp: ts,
+      status,
+      app,
+      route,
+      correlationId: randomId(),
+      duration,
+      processorCount: procCount,
+      orderId,
+      errorMessage: isFailed ? ERROR_MESSAGES[Math.floor(Math.random() * ERROR_MESSAGES.length)] : null,
+    });
+  }
+  // Ensure our search target is in the list
+  txns[2].orderId = 'ORD-2024-88431';
+  txns[2].app = APPS[0];
+  txns[2].route = 'content-based-routing';
+  txns[2].status = 'completed';
+  txns[2].duration = 47;
+
+  txns[7].status = 'failed';
+  txns[7].duration = 3142;
+  txns[7].errorMessage = ERROR_MESSAGES[0];
+
+  return txns;
+}
+
+function formatTime(date) {
+  return date.toTimeString().slice(0, 12);
+}
+
+function durationClass(ms) {
+  if (ms < 100) return 'fast';
+  if (ms < 1000) return 'medium';
+  return 'slow';
+}
+
+function durationWidth(ms) {
+  return Math.min(100, (ms / 5000) * 100);
+}
+
+function renderTable(txns) {
+  const tbody = document.getElementById('results-body');
+  let html = '';
+
+  txns.forEach((txn, idx) => {
+    html += `
+      <tr onclick="toggleDetail(${idx})" data-idx="${idx}">
+        <td class="td-expand">›</td>
+        <td class="mono">${formatTime(txn.timestamp)}</td>
+        <td>
+          <span class="status-pill ${txn.status}">
+            <span class="status-dot"></span>
+            ${txn.status.charAt(0).toUpperCase() + txn.status.slice(1)}
+          </span>
+        </td>
+        <td>
+          <span class="app-badge">
+            <span class="app-dot" style="background:${txn.app.color}"></span>
+            ${txn.app.name}
+          </span>
+        </td>
+        <td class="mono text-secondary">${txn.route}</td>
+        <td class="mono text-muted correlation-id" title="${txn.correlationId}">${txn.correlationId}</td>
+        <td>
+          <div class="duration-bar">
+            <span class="mono" style="color:${txn.duration > 1000 ? 'var(--rose)' : txn.duration > 100 ? 'var(--amber)' : 'var(--green)'}">${txn.duration.toLocaleString()}ms</span>
+            <div class="bar"><div class="bar-fill ${durationClass(txn.duration)}" style="width:${durationWidth(txn.duration)}%"></div></div>
+          </div>
+        </td>
+        <td class="mono text-muted">${txn.processorCount}</td>
+      </tr>
+      <tr class="detail-row" id="detail-${idx}">
+        <td colspan="8">
+          <div class="detail-content">
+            <div class="processor-tree">
+              <h4>Processor Execution Tree</h4>
+              ${renderProcessorTree(txn)}
+            </div>
+            <div class="detail-sidebar">
+              <h4>Exchange Details</h4>
+              <dl class="detail-kv">
+                <dt>Exchange ID</dt><dd>${txn.id}</dd>
+                <dt>Correlation</dt><dd>${txn.correlationId}</dd>
+                <dt>Order ID</dt><dd>${txn.orderId}</dd>
+                <dt>Application</dt><dd>${txn.app.name}</dd>
+                <dt>Route</dt><dd>${txn.route}</dd>
+                <dt>Timestamp</dt><dd>${txn.timestamp.toISOString()}</dd>
+                <dt>Duration</dt><dd>${txn.duration}ms</dd>
+                <dt>Processors</dt><dd>${txn.processorCount}</dd>
+              </dl>
+              <div class="detail-body-preview">
+                <span class="label">Input Body</span>{"orderId":"${txn.orderId}","customer":"ACME Corp","items":[{"sku":"WDG-4401","qty":3,"price":29.99}],"priority":"HIGH","region":"EU-WEST"}</div>
+              ${txn.errorMessage ? `<div class="error-preview">${txn.errorMessage}</div>` : ''}
+            </div>
+          </div>
+        </td>
+      </tr>
+    `;
+  });
+
+  tbody.innerHTML = html;
+}
+
+function renderProcessorTree(txn) {
+  const tree = txn.status === 'failed' ? PROCESSOR_TREES.failed : PROCESSOR_TREES.completed;
+  return tree.map(proc => `
+    <div class="proc-node">
+      <div class="proc-connector"></div>
+      <div class="proc-icon ${proc.iconClass}">${proc.icon}</div>
+      <div class="proc-info">
+        <div class="proc-type">${proc.type}</div>
+        <div class="proc-uri">${proc.uri}</div>
+      </div>
+      <div class="proc-timing">
+        <span class="proc-duration">${proc.duration}ms</span>
+      </div>
+    </div>
+  `).join('');
+}
+
+function toggleDetail(idx) {
+  const row = document.querySelector(`tr[data-idx="${idx}"]`);
+  const detail = document.getElementById(`detail-${idx}`);
+  row.classList.toggle('expanded');
+  detail.classList.toggle('visible');
+}
+
+// Init
+const transactions = generateTransactions(25);
+renderTable(transactions);
+
+// Chip toggle
+document.querySelectorAll('.chip').forEach(chip => {
+  chip.addEventListener('click', () => chip.classList.toggle('active'));
+});
+</script>
+</body>
+</html>
diff --git a/examples/transaction-explorer.html b/examples/transaction-explorer.html
new file mode 100644
index 00000000..b22c2edf
--- /dev/null
+++ b/examples/transaction-explorer.html
@@ -0,0 +1,1304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Transaction Explorer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg-deep: #060a13;
+    --bg-base: #0a0e17;
+    --bg-surface: #111827;
+    --bg-raised: #1a2332;
+    --bg-hover: #1e2d3d;
+    --border: #1e2d3d;
+    --border-subtle: #152030;
+    --text-primary: #e2e8f0;
+    --text-secondary: #8b9cb6;
+    --text-muted: #4a5e7a;
+    --amber: #f0b429;
+    --amber-dim: #b8860b;
+    --amber-glow: rgba(240, 180, 41, 0.15);
+    --cyan: #22d3ee;
+    --cyan-dim: #0e7490;
+    --cyan-glow: rgba(34, 211, 238, 0.12);
+    --rose: #f43f5e;
+    --rose-dim: #9f1239;
+    --rose-glow: rgba(244, 63, 94, 0.12);
+    --blue: #3b82f6;
+    --green: #10b981;
+    --green-glow: rgba(16, 185, 129, 0.12);
+    --font-body: 'DM Sans', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg-deep);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* Topographic background pattern */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 800px 400px at 20% 20%, rgba(240, 180, 41, 0.03), transparent),
+      radial-gradient(ellipse 600px 600px at 80% 80%, rgba(34, 211, 238, 0.02), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* Topo lines */
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    opacity: 0.025;
+    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23f0b429' stroke-width='1'/%3E%3Cpath d='M0 220 Q120 170 200 220 T400 220' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 180 Q80 130 200 180 T400 180' fill='none' stroke='%23f0b429' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q150 60 200 100 T400 100' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3Cpath d='M0 300 Q100 260 200 300 T400 300' fill='none' stroke='%2322d3ee' stroke-width='0.5'/%3E%3C/svg%3E");
+    background-size: 400px 400px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  a { color: var(--amber); text-decoration: none; }
+  a:hover { color: var(--text-primary); }
+
+  /* ─── Top Navigation ─── */
+  .topnav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(6, 10, 19, 0.85);
+    backdrop-filter: blur(20px) saturate(1.2);
+    border-bottom: 1px solid var(--border-subtle);
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    gap: 32px;
+  }
+
+  .topnav .logo {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--amber);
+    letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .topnav .logo svg { width: 22px; height: 22px; }
+
+  .topnav .nav-links {
+    display: flex;
+    gap: 4px;
+    list-style: none;
+  }
+
+  .topnav .nav-links a {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.15s;
+    position: relative;
+  }
+
+  .topnav .nav-links a:hover { color: var(--text-primary); background: var(--bg-raised); }
+  .topnav .nav-links a.active {
+    color: var(--amber);
+    background: var(--amber-glow);
+  }
+
+  .topnav .nav-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .env-badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--green-glow);
+    color: var(--green);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    font-weight: 500;
+  }
+
+  .cluster-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  /* ─── Main Layout ─── */
+  .main {
+    position: relative;
+    z-index: 1;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 24px;
+  }
+
+  /* ─── Page Header ─── */
+  .page-header {
+    margin-bottom: 24px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .page-header h1 {
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    color: var(--text-primary);
+  }
+
+  .page-header .subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  .live-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--green);
+    font-family: var(--font-mono);
+    font-weight: 500;
+  }
+
+  .live-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    animation: livePulse 2s ease-in-out infinite;
+  }
+
+  @keyframes livePulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+  }
+
+  /* ─── Stats Bar ─── */
+  .stats-bar {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .stat-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 16px 20px;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s;
+  }
+
+  .stat-card:hover { border-color: var(--border); }
+
+  .stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }
+
+  .stat-card.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
+  .stat-card.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
+  .stat-card.rose::before { background: linear-gradient(90deg, var(--rose), transparent); }
+  .stat-card.green::before { background: linear-gradient(90deg, var(--green), transparent); }
+  .stat-card.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
+
+  .stat-card .stat-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+
+  .stat-card .stat-value {
+    font-family: var(--font-mono);
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -1px;
+  }
+
+  .stat-card.amber .stat-value { color: var(--amber); }
+  .stat-card.cyan .stat-value { color: var(--cyan); }
+  .stat-card.rose .stat-value { color: var(--rose); }
+  .stat-card.green .stat-value { color: var(--green); }
+  .stat-card.blue .stat-value { color: var(--blue); }
+
+  .stat-card .stat-change {
+    font-size: 11px;
+    font-family: var(--font-mono);
+    margin-top: 4px;
+  }
+
+  .stat-card .stat-change.up { color: var(--rose); }
+  .stat-card .stat-change.down { color: var(--green); }
+  .stat-card .stat-change.neutral { color: var(--text-muted); }
+
+  /* ─── Search & Filters ─── */
+  .filter-bar {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: 16px 20px;
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .filter-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .search-input-wrap {
+    flex: 1;
+    min-width: 300px;
+    position: relative;
+  }
+
+  .search-input-wrap svg {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: var(--text-muted);
+  }
+
+  .search-input-wrap input {
+    width: 100%;
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 10px 14px 10px 40px;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .search-input-wrap input::placeholder { color: var(--text-muted); font-family: var(--font-body); }
+  .search-input-wrap input:focus {
+    border-color: var(--amber-dim);
+    box-shadow: 0 0 0 3px var(--amber-glow);
+  }
+
+  .search-input-wrap .search-hint {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    padding: 3px 8px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+  }
+
+  .filter-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .filter-group label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    white-space: nowrap;
+  }
+
+  .filter-select {
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 8px 32px 8px 12px;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 13px;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5e7a' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    transition: border-color 0.2s;
+  }
+
+  .filter-select:focus { border-color: var(--amber-dim); }
+
+  .filter-chips {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px 12px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: 99px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
+  .chip.active { background: var(--amber-glow); border-color: var(--amber-dim); color: var(--amber); }
+  .chip.active.green-chip { background: var(--green-glow); border-color: rgba(16,185,129,0.3); color: var(--green); }
+  .chip.active.rose-chip { background: var(--rose-glow); border-color: rgba(244,63,94,0.3); color: var(--rose); }
+  .chip.active.blue-chip { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); color: var(--blue); }
+
+  .chip .chip-count {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    opacity: 0.7;
+  }
+
+  .date-input {
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 8px 12px;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    outline: none;
+    width: 160px;
+    transition: border-color 0.2s;
+  }
+  .date-input:focus { border-color: var(--amber-dim); }
+
+  .duration-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .duration-range input[type="range"] {
+    width: 100px;
+    accent-color: var(--amber);
+    cursor: pointer;
+  }
+
+  .duration-range .range-label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    min-width: 50px;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-raised);
+    color: var(--text-secondary);
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+  }
+
+  .btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-muted); }
+
+  .btn-primary {
+    background: var(--amber);
+    color: #0a0e17;
+    border-color: var(--amber);
+    font-weight: 600;
+  }
+  .btn-primary:hover { background: #d4a017; border-color: #d4a017; color: #0a0e17; }
+
+  .filter-tags {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .filter-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: var(--amber-glow);
+    border: 1px solid rgba(240,180,41,0.2);
+    border-radius: 99px;
+    font-size: 12px;
+    color: var(--amber);
+    font-family: var(--font-mono);
+  }
+
+  .filter-tag .remove {
+    cursor: pointer;
+    opacity: 0.5;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .filter-tag .remove:hover { opacity: 1; }
+
+  .filter-tags .clear-all {
+    font-size: 11px;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px 8px;
+  }
+  .filter-tags .clear-all:hover { color: var(--rose); }
+
+  /* ─── Results Table ─── */
+  .results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding: 0 4px;
+  }
+
+  .results-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .results-count strong { color: var(--text-secondary); }
+
+  .results-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .table-wrap {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  thead {
+    background: var(--bg-raised);
+    border-bottom: 1px solid var(--border);
+  }
+
+  thead th {
+    padding: 12px 16px;
+    text-align: left;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: color 0.15s;
+    position: relative;
+  }
+
+  thead th:hover { color: var(--text-secondary); }
+  thead th.sorted { color: var(--amber); }
+  thead th.sorted::after {
+    content: ' ▼';
+    font-size: 8px;
+  }
+  thead th.sorted.asc::after { content: ' ▲'; }
+
+  tbody tr {
+    border-bottom: 1px solid var(--border-subtle);
+    transition: background 0.1s;
+    cursor: pointer;
+  }
+
+  tbody tr:last-child { border-bottom: none; }
+  tbody tr:hover { background: var(--bg-raised); }
+
+  tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .td-expand {
+    width: 32px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 16px;
+    transition: transform 0.2s;
+  }
+
+  tr.expanded .td-expand { transform: rotate(90deg); color: var(--amber); }
+
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 10px;
+    border-radius: 99px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+  }
+
+  .status-pill.completed { background: var(--green-glow); color: var(--green); }
+  .status-pill.failed { background: var(--rose-glow); color: var(--rose); }
+  .status-pill.running { background: rgba(59,130,246,0.12); color: var(--blue); }
+
+  .status-pill .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .status-pill.running .status-dot { animation: livePulse 1.5s ease-in-out infinite; }
+
+  .mono { font-family: var(--font-mono); font-size: 12px; }
+  .text-muted { color: var(--text-muted); }
+  .text-secondary { color: var(--text-secondary); }
+  .text-amber { color: var(--amber); }
+
+  .app-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 8px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
+  }
+
+  .app-badge .app-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+
+  .duration-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .duration-bar .bar {
+    width: 60px;
+    height: 4px;
+    background: var(--bg-base);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .duration-bar .bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.3s;
+  }
+
+  .duration-bar .bar-fill.fast { background: var(--green); }
+  .duration-bar .bar-fill.medium { background: var(--amber); }
+  .duration-bar .bar-fill.slow { background: var(--rose); }
+
+  .correlation-id {
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* ─── Expanded Row / Processor Tree ─── */
+  .detail-row { display: none; }
+  .detail-row.visible { display: table-row; }
+
+  .detail-row td {
+    padding: 0;
+    background: var(--bg-base);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .detail-content {
+    padding: 20px 24px;
+    display: flex;
+    gap: 24px;
+  }
+
+  .processor-tree {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .processor-tree h4 {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+  }
+
+  .proc-node {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 8px 12px;
+    border-radius: var(--radius-sm);
+    margin-bottom: 2px;
+    transition: background 0.1s;
+    position: relative;
+  }
+
+  .proc-node:hover { background: var(--bg-surface); }
+
+  .proc-connector {
+    position: absolute;
+    left: 22px;
+    top: 28px;
+    bottom: -4px;
+    width: 1px;
+    background: var(--border);
+  }
+
+  .proc-node:last-child .proc-connector { display: none; }
+
+  .proc-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+    flex-shrink: 0;
+    z-index: 1;
+    font-family: var(--font-mono);
+  }
+
+  .proc-icon.endpoint { background: rgba(59,130,246,0.15); color: var(--blue); border: 1px solid rgba(59,130,246,0.3); }
+  .proc-icon.processor { background: var(--green-glow); color: var(--green); border: 1px solid rgba(16,185,129,0.3); }
+  .proc-icon.eip { background: rgba(168,85,247,0.12); color: #a855f7; border: 1px solid rgba(168,85,247,0.3); }
+  .proc-icon.error { background: var(--rose-glow); color: var(--rose); border: 1px solid rgba(244,63,94,0.3); }
+
+  .proc-info { flex: 1; min-width: 0; }
+  .proc-info .proc-type { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+  .proc-info .proc-uri {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .proc-timing {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+    text-align: right;
+  }
+
+  .proc-timing .proc-duration { font-weight: 600; color: var(--text-secondary); }
+
+  .detail-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+  }
+
+  .detail-sidebar h4 {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+  }
+
+  .detail-kv {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px 12px;
+    font-size: 12px;
+  }
+
+  .detail-kv dt { color: var(--text-muted); font-weight: 500; }
+  .detail-kv dd { font-family: var(--font-mono); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
+
+  .detail-body-preview {
+    margin-top: 16px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 12px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-secondary);
+    max-height: 120px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .detail-body-preview .label {
+    font-family: var(--font-body);
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    display: block;
+    margin-bottom: 6px;
+  }
+
+  .error-preview {
+    margin-top: 12px;
+    background: var(--rose-glow);
+    border: 1px solid rgba(244,63,94,0.2);
+    border-radius: var(--radius-sm);
+    padding: 10px 12px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--rose);
+    max-height: 80px;
+    overflow: auto;
+  }
+
+  /* ─── Pagination ─── */
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    margin-top: 20px;
+  }
+
+  .pagination .page-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .pagination .page-btn:hover { border-color: var(--border); background: var(--bg-raised); }
+  .pagination .page-btn.active { background: var(--amber-glow); border-color: var(--amber-dim); color: var(--amber); }
+  .pagination .page-btn.disabled { opacity: 0.3; cursor: default; }
+
+  .pagination .page-ellipsis {
+    color: var(--text-muted);
+    padding: 0 4px;
+    font-family: var(--font-mono);
+  }
+
+  /* ─── Animations ─── */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .animate-in { animation: fadeIn 0.3s ease-out both; }
+  .delay-1 { animation-delay: 0.05s; }
+  .delay-2 { animation-delay: 0.1s; }
+  .delay-3 { animation-delay: 0.15s; }
+  .delay-4 { animation-delay: 0.2s; }
+  .delay-5 { animation-delay: 0.25s; }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+  /* ─── Responsive ─── */
+  @media (max-width: 1200px) {
+    .stats-bar { grid-template-columns: repeat(3, 1fr); }
+    .detail-content { flex-direction: column; }
+    .detail-sidebar { width: 100%; }
+  }
+
+  @media (max-width: 768px) {
+    .stats-bar { grid-template-columns: 1fr 1fr; }
+    .filter-row { flex-direction: column; align-items: stretch; }
+    .search-input-wrap { min-width: unset; }
+  }
+</style>
+</head>
+<body>
+
+<!-- ═══ Top Navigation ═══ -->
+<nav class="topnav">
+  <div class="logo">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"/>
+      <path d="M12 6v6l4 2"/>
+    </svg>
+    cameleer3
+  </div>
+  <ul class="nav-links">
+    <li><a href="dashboard.html">Dashboard</a></li>
+    <li><a href="transaction-explorer.html" class="active">Transactions</a></li>
+    <li><a href="route-detail.html">Routes</a></li>
+  </ul>
+  <div class="nav-right">
+    <span class="env-badge">PRODUCTION</span>
+    <span class="cluster-count">47 apps · 1,283 routes</span>
+  </div>
+</nav>
+
+<!-- ═══ Main Content ═══ -->
+<main class="main">
+
+  <!-- Page Header -->
+  <div class="page-header animate-in">
+    <div>
+      <h1>Transaction Explorer</h1>
+      <div class="subtitle">Search across 47 applications · 2.4M transactions today</div>
+    </div>
+    <div class="live-indicator">
+      <span class="live-dot"></span>
+      STREAMING
+    </div>
+  </div>
+
+  <!-- Stats Bar -->
+  <div class="stats-bar">
+    <div class="stat-card amber animate-in delay-1">
+      <div class="stat-label">Total Matches</div>
+      <div class="stat-value">12,847</div>
+      <div class="stat-change neutral">of 2.4M today</div>
+    </div>
+    <div class="stat-card cyan animate-in delay-2">
+      <div class="stat-label">Avg Duration</div>
+      <div class="stat-value">47ms</div>
+      <div class="stat-change down">↓ 12% vs yesterday</div>
+    </div>
+    <div class="stat-card rose animate-in delay-3">
+      <div class="stat-label">Failure Rate</div>
+      <div class="stat-value">0.34%</div>
+      <div class="stat-change up">↑ 0.08% vs yesterday</div>
+    </div>
+    <div class="stat-card green animate-in delay-4">
+      <div class="stat-label">P99 Latency</div>
+      <div class="stat-value">312ms</div>
+      <div class="stat-change down">↓ 23ms vs yesterday</div>
+    </div>
+    <div class="stat-card blue animate-in delay-5">
+      <div class="stat-label">Active Now</div>
+      <div class="stat-value">1,293</div>
+      <div class="stat-change neutral">exchanges in-flight</div>
+    </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="filter-bar animate-in delay-3">
+    <!-- Row 1: Search -->
+    <div class="filter-row">
+      <div class="search-input-wrap">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        <input type="text" placeholder="Search by correlation ID, order ID, error message, route ID..." value="ORD-2024-88431">
+        <span class="search-hint">⌘K</span>
+      </div>
+      <button class="btn-primary btn">Search</button>
+      <button class="btn">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 21v-7m0 0V5a2 2 0 012-2h2.5l1 2H21l-3 6H9.5l-1-2H6v7z"/></svg>
+        Export
+      </button>
+    </div>
+
+    <!-- Row 2: Filters -->
+    <div class="filter-row">
+      <div class="filter-group">
+        <label>Status</label>
+        <div class="filter-chips">
+          <span class="chip active green-chip"><span class="status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block"></span> Completed <span class="chip-count">12,804</span></span>
+          <span class="chip active rose-chip"><span class="status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--rose);display:inline-block"></span> Failed <span class="chip-count">43</span></span>
+          <span class="chip blue-chip"><span class="status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--blue);display:inline-block"></span> Running <span class="chip-count">0</span></span>
+        </div>
+      </div>
+
+      <div style="width:1px;height:24px;background:var(--border);margin:0 4px"></div>
+
+      <div class="filter-group">
+        <label>Date</label>
+        <input type="text" class="date-input" value="2026-03-09 00:00" placeholder="From">
+        <span class="text-muted" style="font-size:12px">→</span>
+        <input type="text" class="date-input" value="2026-03-09 23:59" placeholder="To">
+      </div>
+
+      <div style="width:1px;height:24px;background:var(--border);margin:0 4px"></div>
+
+      <div class="filter-group">
+        <label>Duration</label>
+        <div class="duration-range">
+          <span class="range-label">0ms</span>
+          <input type="range" min="0" max="5000" value="5000">
+          <span class="range-label">≤ 5000ms</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Row 3: App + Route filters -->
+    <div class="filter-row">
+      <div class="filter-group">
+        <label>Application</label>
+        <select class="filter-select">
+          <option>All Applications (47)</option>
+          <option selected>order-service-eu</option>
+          <option>payment-gateway</option>
+          <option>inventory-sync</option>
+          <option>notification-hub</option>
+          <option>etl-pipeline-prod</option>
+        </select>
+      </div>
+
+      <div class="filter-group">
+        <label>Route</label>
+        <select class="filter-select">
+          <option>All Routes (1,283)</option>
+          <option>order-intake</option>
+          <option selected>content-based-routing</option>
+          <option>payment-processing</option>
+          <option>inventory-check</option>
+        </select>
+      </div>
+
+      <div class="filter-tags" style="margin-left:8px">
+        <span class="filter-tag">app:order-service-eu <span class="remove">×</span></span>
+        <span class="filter-tag">route:content-based-routing <span class="remove">×</span></span>
+        <span class="filter-tag">text:"ORD-2024-88431" <span class="remove">×</span></span>
+        <span class="clear-all">Clear all</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Results Header -->
+  <div class="results-header animate-in delay-4">
+    <span class="results-count">Showing <strong>1–25</strong> of <strong>12,847</strong> results · sorted by <strong>timestamp</strong> desc</span>
+    <div class="results-actions">
+      <button class="btn" style="font-size:12px;padding:6px 10px">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+        Columns
+      </button>
+      <button class="btn" style="font-size:12px;padding:6px 10px">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"/></svg>
+        CSV
+      </button>
+    </div>
+  </div>
+
+  <!-- Results Table -->
+  <div class="table-wrap animate-in delay-4">
+    <table>
+      <thead>
+        <tr>
+          <th style="width:32px"></th>
+          <th class="sorted">Timestamp</th>
+          <th>Status</th>
+          <th>Application</th>
+          <th>Route</th>
+          <th>Correlation ID</th>
+          <th>Duration</th>
+          <th>Processors</th>
+        </tr>
+      </thead>
+      <tbody id="results-body">
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  <div class="pagination animate-in delay-5">
+    <div class="page-btn disabled">‹</div>
+    <div class="page-btn active">1</div>
+    <div class="page-btn">2</div>
+    <div class="page-btn">3</div>
+    <div class="page-btn">4</div>
+    <div class="page-btn">5</div>
+    <span class="page-ellipsis">…</span>
+    <div class="page-btn">514</div>
+    <div class="page-btn">›</div>
+  </div>
+
+</main>
+
+<script>
+// ─── Mock Data Generator ───
+const APPS = [
+  { name: 'order-service-eu', color: '#3b82f6' },
+  { name: 'payment-gateway', color: '#f0b429' },
+  { name: 'inventory-sync', color: '#10b981' },
+  { name: 'notification-hub', color: '#a855f7' },
+  { name: 'etl-pipeline-prod', color: '#f43f5e' },
+  { name: 'shipping-tracker', color: '#22d3ee' },
+  { name: 'customer-portal', color: '#ec4899' },
+];
+
+const ROUTES = [
+  'order-intake', 'content-based-routing', 'payment-processing',
+  'inventory-check', 'notification-dispatch', 'etl-transform',
+  'shipment-update', 'order-validation', 'fraud-check',
+  'email-sender', 'sms-gateway', 'audit-log',
+];
+
+const ERROR_MESSAGES = [
+  'Connection refused: payment-provider-api:8443',
+  'Timeout waiting for response from inventory-service (30000ms)',
+  'org.apache.camel.CamelExecutionException: MVEL expression failed',
+  'javax.jms.JMSException: Queue ORDERS.PRIORITY is full',
+  'HttpOperationFailedException: HTTP operation failed with status 503',
+  'com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: field "qty"',
+];
+
+const PROCESSOR_TREES = {
+  completed: [
+    { type: 'From', icon: 'EP', iconClass: 'endpoint', uri: 'direct:order-intake', duration: 0 },
+    { type: 'SetHeader', icon: 'PR', iconClass: 'processor', uri: 'X-Cameleer-CorrelationId', duration: 1 },
+    { type: 'Log', icon: 'PR', iconClass: 'processor', uri: 'Received order: ${body}', duration: 0 },
+    { type: 'Choice', icon: 'CB', iconClass: 'eip', uri: 'content-based-router', duration: 0 },
+    { type: 'When', icon: 'CB', iconClass: 'eip', uri: '${header.priority} == "HIGH"', duration: 0 },
+    { type: 'To', icon: 'EP', iconClass: 'endpoint', uri: 'direct:priority-processing', duration: 35 },
+    { type: 'Marshal', icon: 'PR', iconClass: 'processor', uri: 'jackson', duration: 2 },
+    { type: 'To', icon: 'EP', iconClass: 'endpoint', uri: 'jms:queue:ORDERS.COMPLETED', duration: 8 },
+  ],
+  failed: [
+    { type: 'From', icon: 'EP', iconClass: 'endpoint', uri: 'direct:payment-processing', duration: 0 },
+    { type: 'SetHeader', icon: 'PR', iconClass: 'processor', uri: 'Authorization: Bearer ***', duration: 0 },
+    { type: 'To', icon: 'EP', iconClass: 'endpoint', uri: 'https://api.payment-provider.com/v2/charge', duration: 3042 },
+    { type: 'Exception', icon: '!!', iconClass: 'error', uri: 'HttpOperationFailedException: HTTP 503', duration: 0 },
+  ]
+};
+
+function randomId() {
+  const hex = () => Math.random().toString(16).slice(2, 10);
+  return hex() + hex();
+}
+
+function generateTransactions(count) {
+  const txns = [];
+  const now = Date.now();
+
+  for (let i = 0; i < count; i++) {
+    const isFailed = Math.random() < 0.04;
+    const isRunning = !isFailed && Math.random() < 0.005;
+    const status = isRunning ? 'running' : (isFailed ? 'failed' : 'completed');
+    const app = APPS[Math.floor(Math.random() * APPS.length)];
+    const route = ROUTES[Math.floor(Math.random() * ROUTES.length)];
+    const duration = isFailed
+      ? Math.floor(Math.random() * 30000) + 100
+      : Math.floor(Math.random() * 500) + 5;
+    const procCount = Math.floor(Math.random() * 12) + 3;
+    const orderId = `ORD-2024-${(88000 + Math.floor(Math.random() * 1000)).toString()}`;
+    const ts = new Date(now - i * (Math.random() * 2000 + 500));
+
+    txns.push({
+      id: randomId(),
+      timestamp: ts,
+      status,
+      app,
+      route,
+      correlationId: randomId(),
+      duration,
+      processorCount: procCount,
+      orderId,
+      errorMessage: isFailed ? ERROR_MESSAGES[Math.floor(Math.random() * ERROR_MESSAGES.length)] : null,
+    });
+  }
+  // Ensure our search target is in the list
+  txns[2].orderId = 'ORD-2024-88431';
+  txns[2].app = APPS[0];
+  txns[2].route = 'content-based-routing';
+  txns[2].status = 'completed';
+  txns[2].duration = 47;
+
+  txns[7].status = 'failed';
+  txns[7].duration = 3142;
+  txns[7].errorMessage = ERROR_MESSAGES[0];
+
+  return txns;
+}
+
+function formatTime(date) {
+  return date.toTimeString().slice(0, 12);
+}
+
+function durationClass(ms) {
+  if (ms < 100) return 'fast';
+  if (ms < 1000) return 'medium';
+  return 'slow';
+}
+
+function durationWidth(ms) {
+  return Math.min(100, (ms / 5000) * 100);
+}
+
+function renderTable(txns) {
+  const tbody = document.getElementById('results-body');
+  let html = '';
+
+  txns.forEach((txn, idx) => {
+    html += `
+      <tr onclick="toggleDetail(${idx})" data-idx="${idx}">
+        <td class="td-expand">›</td>
+        <td class="mono">${formatTime(txn.timestamp)}</td>
+        <td>
+          <span class="status-pill ${txn.status}">
+            <span class="status-dot"></span>
+            ${txn.status.charAt(0).toUpperCase() + txn.status.slice(1)}
+          </span>
+        </td>
+        <td>
+          <span class="app-badge">
+            <span class="app-dot" style="background:${txn.app.color}"></span>
+            ${txn.app.name}
+          </span>
+        </td>
+        <td class="mono text-secondary">${txn.route}</td>
+        <td class="mono text-muted correlation-id" title="${txn.correlationId}">${txn.correlationId}</td>
+        <td>
+          <div class="duration-bar">
+            <span class="mono" style="color:${txn.duration > 1000 ? 'var(--rose)' : txn.duration > 100 ? 'var(--amber)' : 'var(--green)'}">${txn.duration.toLocaleString()}ms</span>
+            <div class="bar"><div class="bar-fill ${durationClass(txn.duration)}" style="width:${durationWidth(txn.duration)}%"></div></div>
+          </div>
+        </td>
+        <td class="mono text-muted">${txn.processorCount}</td>
+      </tr>
+      <tr class="detail-row" id="detail-${idx}">
+        <td colspan="8">
+          <div class="detail-content">
+            <div class="processor-tree">
+              <h4>Processor Execution Tree</h4>
+              ${renderProcessorTree(txn)}
+            </div>
+            <div class="detail-sidebar">
+              <h4>Exchange Details</h4>
+              <dl class="detail-kv">
+                <dt>Exchange ID</dt><dd>${txn.id}</dd>
+                <dt>Correlation</dt><dd>${txn.correlationId}</dd>
+                <dt>Order ID</dt><dd>${txn.orderId}</dd>
+                <dt>Application</dt><dd>${txn.app.name}</dd>
+                <dt>Route</dt><dd>${txn.route}</dd>
+                <dt>Timestamp</dt><dd>${txn.timestamp.toISOString()}</dd>
+                <dt>Duration</dt><dd>${txn.duration}ms</dd>
+                <dt>Processors</dt><dd>${txn.processorCount}</dd>
+              </dl>
+              <div class="detail-body-preview">
+                <span class="label">Input Body</span>{"orderId":"${txn.orderId}","customer":"ACME Corp","items":[{"sku":"WDG-4401","qty":3,"price":29.99}],"priority":"HIGH","region":"EU-WEST"}</div>
+              ${txn.errorMessage ? `<div class="error-preview">${txn.errorMessage}</div>` : ''}
+            </div>
+          </div>
+        </td>
+      </tr>
+    `;
+  });
+
+  tbody.innerHTML = html;
+}
+
+function renderProcessorTree(txn) {
+  const tree = txn.status === 'failed' ? PROCESSOR_TREES.failed : PROCESSOR_TREES.completed;
+  return tree.map(proc => `
+    <div class="proc-node">
+      <div class="proc-connector"></div>
+      <div class="proc-icon ${proc.iconClass}">${proc.icon}</div>
+      <div class="proc-info">
+        <div class="proc-type">${proc.type}</div>
+        <div class="proc-uri">${proc.uri}</div>
+      </div>
+      <div class="proc-timing">
+        <span class="proc-duration">${proc.duration}ms</span>
+      </div>
+    </div>
+  `).join('');
+}
+
+function toggleDetail(idx) {
+  const row = document.querySelector(`tr[data-idx="${idx}"]`);
+  const detail = document.getElementById(`detail-${idx}`);
+  row.classList.toggle('expanded');
+  detail.classList.toggle('visible');
+}
+
+// Init
+const transactions = generateTransactions(25);
+renderTable(transactions);
+
+// Chip toggle
+document.querySelectorAll('.chip').forEach(chip => {
+  chip.addEventListener('click', () => chip.classList.toggle('active'));
+});
+</script>
+</body>
+</html>