diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/ExecutionController.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/ExecutionController.java
index bea76037..d056aeba 100644
--- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/ExecutionController.java
+++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/ExecutionController.java
@@ -53,11 +53,11 @@ public class ExecutionController {
     @ApiResponse(responseCode = "202", description = "Data accepted for processing")
     public ResponseEntity<Void> ingestExecutions(@RequestBody String body) throws JsonProcessingException {
         String agentId = extractAgentId();
-        String groupName = resolveGroupName(agentId);
+        String applicationName = resolveApplicationName(agentId);
         List<RouteExecution> executions = parsePayload(body);
 
         for (RouteExecution execution : executions) {
-            ingestionService.ingestExecution(agentId, groupName, execution);
+            ingestionService.ingestExecution(agentId, applicationName, execution);
         }
 
         return ResponseEntity.accepted().build();
@@ -68,7 +68,7 @@ public class ExecutionController {
         return auth != null ? auth.getName() : "";
     }
 
-    private String resolveGroupName(String agentId) {
+    private String resolveApplicationName(String agentId) {
         AgentInfo agent = registryService.findById(agentId);
         return agent != null ? agent.group() : "";
     }
diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteMetricsController.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteMetricsController.java
index 63aebc15..59b5a6e3 100644
--- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteMetricsController.java
+++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteMetricsController.java
@@ -65,7 +65,7 @@ public class RouteMetricsController {
         List<RouteKey> routeKeys = new ArrayList<>();
 
         List<RouteMetrics> metrics = jdbc.query(sql.toString(), (rs, rowNum) -> {
-            String groupName = rs.getString("group_name");
+            String applicationName = rs.getString("group_name");
             String routeId = rs.getString("route_id");
             long total = rs.getLong("total");
             long failed = rs.getLong("failed");
@@ -76,8 +76,8 @@ public class RouteMetricsController {
             double errorRate = total > 0 ? (double) failed / total : 0.0;
             double tps = windowSeconds > 0 ? (double) total / windowSeconds : 0.0;
 
-            routeKeys.add(new RouteKey(groupName, routeId));
-            return new RouteMetrics(routeId, groupName, total, successRate,
+            routeKeys.add(new RouteKey(applicationName, routeId));
+            return new RouteMetrics(routeId, applicationName, total, successRate,
                     avgDur, p99Dur, errorRate, tps, List.of());
         }, params.toArray());
 
diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/SearchController.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/SearchController.java
index 293a71e1..79450ce2 100644
--- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/SearchController.java
+++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/SearchController.java
@@ -51,13 +51,13 @@ public class SearchController {
             @RequestParam(required = false) String routeId,
             @RequestParam(required = false) String agentId,
             @RequestParam(required = false) String processorType,
-            @RequestParam(required = false) String group,
+            @RequestParam(required = false) String application,
             @RequestParam(defaultValue = "0") int offset,
             @RequestParam(defaultValue = "50") int limit,
             @RequestParam(required = false) String sortField,
             @RequestParam(required = false) String sortDir) {
 
-        List<String> agentIds = resolveGroupToAgentIds(group);
+        List<String> agentIds = resolveApplicationToAgentIds(application);
 
         SearchRequest request = new SearchRequest(
                 status, timeFrom, timeTo,
@@ -65,7 +65,7 @@ public class SearchController {
                 correlationId,
                 text, null, null, null,
                 routeId, agentId, processorType,
-                group, agentIds,
+                application, agentIds,
                 offset, limit,
                 sortField, sortDir
         );
@@ -77,11 +77,11 @@ public class SearchController {
     @Operation(summary = "Advanced search with all filters")
     public ResponseEntity<SearchResult<ExecutionSummary>> searchPost(
             @RequestBody SearchRequest request) {
-        // Resolve group to agentIds if group is specified but agentIds is not
+        // Resolve application to agentIds if application is specified but agentIds is not
         SearchRequest resolved = request;
-        if (request.group() != null && !request.group().isBlank()
+        if (request.application() != null && !request.application().isBlank()
                 && (request.agentIds() == null || request.agentIds().isEmpty())) {
-            resolved = request.withAgentIds(resolveGroupToAgentIds(request.group()));
+            resolved = request.withAgentIds(resolveApplicationToAgentIds(request.application()));
         }
         return ResponseEntity.ok(searchService.search(resolved));
     }
@@ -92,9 +92,9 @@ public class SearchController {
             @RequestParam Instant from,
             @RequestParam(required = false) Instant to,
             @RequestParam(required = false) String routeId,
-            @RequestParam(required = false) String group) {
+            @RequestParam(required = false) String application) {
         Instant end = to != null ? to : Instant.now();
-        List<String> agentIds = resolveGroupToAgentIds(group);
+        List<String> agentIds = resolveApplicationToAgentIds(application);
         if (routeId == null && agentIds == null) {
             return ResponseEntity.ok(searchService.stats(from, end));
         }
@@ -108,9 +108,9 @@ public class SearchController {
             @RequestParam(required = false) Instant to,
             @RequestParam(defaultValue = "24") int buckets,
             @RequestParam(required = false) String routeId,
-            @RequestParam(required = false) String group) {
+            @RequestParam(required = false) String application) {
         Instant end = to != null ? to : Instant.now();
-        List<String> agentIds = resolveGroupToAgentIds(group);
+        List<String> agentIds = resolveApplicationToAgentIds(application);
         if (routeId == null && agentIds == null) {
             return ResponseEntity.ok(searchService.timeseries(from, end, buckets));
         }
@@ -118,14 +118,14 @@ public class SearchController {
     }
 
     /**
-     * Resolve an application group name to agent IDs.
-     * Returns null if group is null/blank (no filtering).
+     * Resolve an application name to agent IDs.
+     * Returns null if application is null/blank (no filtering).
      */
-    private List<String> resolveGroupToAgentIds(String group) {
-        if (group == null || group.isBlank()) {
+    private List<String> resolveApplicationToAgentIds(String application) {
+        if (application == null || application.isBlank()) {
             return null;
         }
-        return registryService.findByGroup(group).stream()
+        return registryService.findByGroup(application).stream()
                 .map(AgentInfo::id)
                 .toList();
     }
diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/search/OpenSearchIndex.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/search/OpenSearchIndex.java
index 132086b3..3747d20b 100644
--- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/search/OpenSearchIndex.java
+++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/search/OpenSearchIndex.java
@@ -288,7 +288,7 @@ public class OpenSearchIndex implements SearchIndex {
         map.put("execution_id", doc.executionId());
         map.put("route_id", doc.routeId());
         map.put("agent_id", doc.agentId());
-        map.put("group_name", doc.groupName());
+        map.put("group_name", doc.applicationName());
         map.put("status", doc.status());
         map.put("correlation_id", doc.correlationId());
         map.put("exchange_id", doc.exchangeId());
diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresExecutionStore.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresExecutionStore.java
index 84170327..d4e0eb52 100644
--- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresExecutionStore.java
+++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresExecutionStore.java
@@ -45,7 +45,7 @@ public class PostgresExecutionStore implements ExecutionStore {
                     updated_at = now()
                 """,
                 execution.executionId(), execution.routeId(), execution.agentId(),
-                execution.groupName(), execution.status(), execution.correlationId(),
+                execution.applicationName(), execution.status(), execution.correlationId(),
                 execution.exchangeId(),
                 Timestamp.from(execution.startTime()),
                 execution.endTime() != null ? Timestamp.from(execution.endTime()) : null,
@@ -55,7 +55,7 @@ public class PostgresExecutionStore implements ExecutionStore {
 
     @Override
     public void upsertProcessors(String executionId, Instant startTime,
-                                  String groupName, String routeId,
+                                  String applicationName, String routeId,
                                   List<ProcessorRecord> processors) {
         jdbc.batchUpdate("""
                 INSERT INTO processor_executions (execution_id, processor_id, processor_type,
@@ -76,7 +76,7 @@ public class PostgresExecutionStore implements ExecutionStore {
                 """,
                 processors.stream().map(p -> new Object[]{
                         p.executionId(), p.processorId(), p.processorType(),
-                        p.diagramNodeId(), p.groupName(), p.routeId(),
+                        p.diagramNodeId(), p.applicationName(), p.routeId(),
                         p.depth(), p.parentProcessorId(), p.status(),
                         Timestamp.from(p.startTime()),
                         p.endTime() != null ? Timestamp.from(p.endTime()) : null,
diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresStatsStore.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresStatsStore.java
index fff9b70f..0247e5d5 100644
--- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresStatsStore.java
+++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresStatsStore.java
@@ -29,9 +29,9 @@ public class PostgresStatsStore implements StatsStore {
     }
 
     @Override
-    public ExecutionStats statsForApp(Instant from, Instant to, String groupName) {
+    public ExecutionStats statsForApp(Instant from, Instant to, String applicationName) {
         return queryStats("stats_1m_app", from, to, List.of(
-                new Filter("group_name", groupName)));
+                new Filter("group_name", applicationName)));
     }
 
     @Override
@@ -56,9 +56,9 @@ public class PostgresStatsStore implements StatsStore {
     }
 
     @Override
-    public StatsTimeseries timeseriesForApp(Instant from, Instant to, int bucketCount, String groupName) {
+    public StatsTimeseries timeseriesForApp(Instant from, Instant to, int bucketCount, String applicationName) {
         return queryTimeseries("stats_1m_app", from, to, bucketCount, List.of(
-                new Filter("group_name", groupName)), true);
+                new Filter("group_name", applicationName)), true);
     }
 
     @Override
diff --git a/cameleer3-server-app/src/test/java/com/cameleer3/server/app/storage/PostgresStatsStoreIT.java b/cameleer3-server-app/src/test/java/com/cameleer3/server/app/storage/PostgresStatsStoreIT.java
index c7bc748b..9a3f61fb 100644
--- a/cameleer3-server-app/src/test/java/com/cameleer3/server/app/storage/PostgresStatsStoreIT.java
+++ b/cameleer3-server-app/src/test/java/com/cameleer3/server/app/storage/PostgresStatsStoreIT.java
@@ -54,10 +54,10 @@ class PostgresStatsStoreIT extends AbstractPostgresIT {
         assertFalse(ts.buckets().isEmpty());
     }
 
-    private void insertExecution(String id, String routeId, String groupName,
+    private void insertExecution(String id, String routeId, String applicationName,
                                   String status, Instant startTime, long durationMs) {
         executionStore.upsert(new ExecutionRecord(
-                id, routeId, "agent-1", groupName, status, null, null,
+                id, routeId, "agent-1", applicationName, status, null, null,
                 startTime, startTime.plusMillis(durationMs), durationMs,
                 status.equals("FAILED") ? "error" : null, null, null));
     }
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/DetailService.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/DetailService.java
index b0ba5d1d..1ab9cb81 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/DetailService.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/DetailService.java
@@ -20,7 +20,7 @@ public class DetailService {
                     List<ProcessorNode> roots = buildTree(processors);
                     return new ExecutionDetail(
                             exec.executionId(), exec.routeId(), exec.agentId(),
-                            exec.groupName(),
+                            exec.applicationName(),
                             exec.status(), exec.startTime(), exec.endTime(),
                             exec.durationMs() != null ? exec.durationMs() : 0L,
                             exec.correlationId(), exec.exchangeId(),
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ExecutionDetail.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ExecutionDetail.java
index 0e50abf0..ba133b2a 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ExecutionDetail.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/detail/ExecutionDetail.java
@@ -27,7 +27,7 @@ public record ExecutionDetail(
         String executionId,
         String routeId,
         String agentId,
-        String groupName,
+        String applicationName,
         String status,
         Instant startTime,
         Instant endTime,
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/indexing/SearchIndexer.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/indexing/SearchIndexer.java
index f616e35d..7341a571 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/indexing/SearchIndexer.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/indexing/SearchIndexer.java
@@ -74,7 +74,7 @@ public class SearchIndexer implements SearchIndexerStats {
                     .toList();
 
             searchIndex.index(new ExecutionDocument(
-                    exec.executionId(), exec.routeId(), exec.agentId(), exec.groupName(),
+                    exec.executionId(), exec.routeId(), exec.agentId(), exec.applicationName(),
                     exec.status(), exec.correlationId(), exec.exchangeId(),
                     exec.startTime(), exec.endTime(), exec.durationMs(),
                     exec.errorMessage(), exec.errorStacktrace(), processorDocs));
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/ingestion/IngestionService.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/ingestion/IngestionService.java
index bdd32cfb..3d02fec0 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/ingestion/IngestionService.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/ingestion/IngestionService.java
@@ -38,18 +38,18 @@ public class IngestionService {
         this.bodySizeLimit = bodySizeLimit;
     }
 
-    public void ingestExecution(String agentId, String groupName, RouteExecution execution) {
-        ExecutionRecord record = toExecutionRecord(agentId, groupName, execution);
+    public void ingestExecution(String agentId, String applicationName, RouteExecution execution) {
+        ExecutionRecord record = toExecutionRecord(agentId, applicationName, execution);
         executionStore.upsert(record);
 
         if (execution.getProcessors() != null && !execution.getProcessors().isEmpty()) {
             List<ProcessorRecord> processors = flattenProcessors(
                     execution.getProcessors(), record.executionId(),
-                    record.startTime(), groupName, execution.getRouteId(),
+                    record.startTime(), applicationName, execution.getRouteId(),
                     null, 0);
             executionStore.upsertProcessors(
                     record.executionId(), record.startTime(),
-                    groupName, execution.getRouteId(), processors);
+                    applicationName, execution.getRouteId(), processors);
         }
 
         eventPublisher.accept(new ExecutionUpdatedEvent(
@@ -72,13 +72,13 @@ public class IngestionService {
         return metricsBuffer;
     }
 
-    private ExecutionRecord toExecutionRecord(String agentId, String groupName,
+    private ExecutionRecord toExecutionRecord(String agentId, String applicationName,
                                                RouteExecution exec) {
         String diagramHash = diagramStore
                 .findContentHashForRoute(exec.getRouteId(), agentId)
                 .orElse("");
         return new ExecutionRecord(
-                exec.getExchangeId(), exec.getRouteId(), agentId, groupName,
+                exec.getExchangeId(), exec.getRouteId(), agentId, applicationName,
                 exec.getStatus() != null ? exec.getStatus().name() : "RUNNING",
                 exec.getCorrelationId(), exec.getExchangeId(),
                 exec.getStartTime(), exec.getEndTime(),
@@ -90,13 +90,13 @@ public class IngestionService {
 
     private List<ProcessorRecord> flattenProcessors(
             List<ProcessorExecution> processors, String executionId,
-            java.time.Instant execStartTime, String groupName, String routeId,
+            java.time.Instant execStartTime, String applicationName, String routeId,
             String parentProcessorId, int depth) {
         List<ProcessorRecord> flat = new ArrayList<>();
         for (ProcessorExecution p : processors) {
             flat.add(new ProcessorRecord(
                     executionId, p.getProcessorId(), p.getProcessorType(),
-                    p.getDiagramNodeId(), groupName, routeId,
+                    p.getDiagramNodeId(), applicationName, routeId,
                     depth, parentProcessorId,
                     p.getStatus() != null ? p.getStatus().name() : "RUNNING",
                     p.getStartTime() != null ? p.getStartTime() : execStartTime,
@@ -109,7 +109,7 @@ public class IngestionService {
             if (p.getChildren() != null) {
                 flat.addAll(flattenProcessors(
                         p.getChildren(), executionId, execStartTime,
-                        groupName, routeId, p.getProcessorId(), depth + 1));
+                        applicationName, routeId, p.getProcessorId(), depth + 1));
             }
         }
         return flat;
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/ExecutionSummary.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/ExecutionSummary.java
index 51038dbd..04d118fe 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/ExecutionSummary.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/ExecutionSummary.java
@@ -23,7 +23,7 @@ public record ExecutionSummary(
         String executionId,
         String routeId,
         String agentId,
-        String groupName,
+        String applicationName,
         String status,
         Instant startTime,
         Instant endTime,
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/SearchRequest.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/SearchRequest.java
index 17ff44c9..78911ecb 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/SearchRequest.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/search/SearchRequest.java
@@ -22,7 +22,7 @@ import java.util.List;
  * @param routeId       exact match on route_id
  * @param agentId       exact match on agent_id
  * @param processorType matches processor_types array via has()
- * @param group         application group filter (resolved to agentIds server-side)
+ * @param application   application name filter (resolved to agentIds server-side)
  * @param agentIds      list of agent IDs (resolved from group, used for IN clause)
  * @param offset        pagination offset (0-based)
  * @param limit         page size (default 50, max 500)
@@ -43,7 +43,7 @@ public record SearchRequest(
         String routeId,
         String agentId,
         String processorType,
-        String group,
+        String application,
         List<String> agentIds,
         int offset,
         int limit,
@@ -80,12 +80,12 @@ public record SearchRequest(
         return SORT_FIELD_TO_COLUMN.getOrDefault(sortField, "start_time");
     }
 
-    /** Create a copy with resolved agentIds (from group lookup). */
+    /** Create a copy with resolved agentIds (from application name lookup). */
     public SearchRequest withAgentIds(List<String> resolvedAgentIds) {
         return new SearchRequest(
                 status, timeFrom, timeTo, durationMin, durationMax, correlationId,
                 text, textInBody, textInHeaders, textInErrors,
-                routeId, agentId, processorType, group, resolvedAgentIds,
+                routeId, agentId, processorType, application, resolvedAgentIds,
                 offset, limit, sortField, sortDir
         );
     }
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/ExecutionStore.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/ExecutionStore.java
index ae45577e..000a6acb 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/ExecutionStore.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/ExecutionStore.java
@@ -9,7 +9,7 @@ public interface ExecutionStore {
     void upsert(ExecutionRecord execution);
 
     void upsertProcessors(String executionId, Instant startTime,
-                          String groupName, String routeId,
+                          String applicationName, String routeId,
                           List<ProcessorRecord> processors);
 
     Optional<ExecutionRecord> findById(String executionId);
@@ -17,7 +17,7 @@ public interface ExecutionStore {
     List<ProcessorRecord> findProcessors(String executionId);
 
     record ExecutionRecord(
-            String executionId, String routeId, String agentId, String groupName,
+            String executionId, String routeId, String agentId, String applicationName,
             String status, String correlationId, String exchangeId,
             Instant startTime, Instant endTime, Long durationMs,
             String errorMessage, String errorStacktrace, String diagramContentHash
@@ -25,7 +25,7 @@ public interface ExecutionStore {
 
     record ProcessorRecord(
             String executionId, String processorId, String processorType,
-            String diagramNodeId, String groupName, String routeId,
+            String diagramNodeId, String applicationName, String routeId,
             int depth, String parentProcessorId, String status,
             Instant startTime, Instant endTime, Long durationMs,
             String errorMessage, String errorStacktrace,
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/StatsStore.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/StatsStore.java
index 05931a86..8c00b6e8 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/StatsStore.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/StatsStore.java
@@ -12,7 +12,7 @@ public interface StatsStore {
     ExecutionStats stats(Instant from, Instant to);
 
     // Per-app stats (stats_1m_app)
-    ExecutionStats statsForApp(Instant from, Instant to, String groupName);
+    ExecutionStats statsForApp(Instant from, Instant to, String applicationName);
 
     // Per-route stats (stats_1m_route), optionally scoped to specific agents
     ExecutionStats statsForRoute(Instant from, Instant to, String routeId, List<String> agentIds);
@@ -24,7 +24,7 @@ public interface StatsStore {
     StatsTimeseries timeseries(Instant from, Instant to, int bucketCount);
 
     // Per-app timeseries
-    StatsTimeseries timeseriesForApp(Instant from, Instant to, int bucketCount, String groupName);
+    StatsTimeseries timeseriesForApp(Instant from, Instant to, int bucketCount, String applicationName);
 
     // Per-route timeseries, optionally scoped to specific agents
     StatsTimeseries timeseriesForRoute(Instant from, Instant to, int bucketCount,
diff --git a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/model/ExecutionDocument.java b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/model/ExecutionDocument.java
index 6822088a..cc0ccc32 100644
--- a/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/model/ExecutionDocument.java
+++ b/cameleer3-server-core/src/main/java/com/cameleer3/server/core/storage/model/ExecutionDocument.java
@@ -4,7 +4,7 @@ import java.time.Instant;
 import java.util.List;
 
 public record ExecutionDocument(
-        String executionId, String routeId, String agentId, String groupName,
+        String executionId, String routeId, String agentId, String applicationName,
         String status, String correlationId, String exchangeId,
         Instant startTime, Instant endTime, Long durationMs,
         String errorMessage, String errorStacktrace,
diff --git a/dashboard-after-click.md b/dashboard-after-click.md
new file mode 100644
index 00000000..dbe0c418
--- /dev/null
+++ b/dashboard-after-click.md
@@ -0,0 +1,591 @@
+- generic [ref=e3]:
+  - complementary [ref=e4]:
+    - generic [ref=e5] [cursor=pointer]:
+      - img [ref=e6]
+      - generic [ref=e7]: cameleerv3.2.1
+    - generic [ref=e9]:
+      - img [ref=e11]
+      - textbox "Filter..." [ref=e14]
+    - generic [ref=e15]:
+      - generic [ref=e16]: Navigation
+      - generic [ref=e17]:
+        - generic [ref=e18]:
+          - button "Collapse Applications" [expanded] [ref=e19] [cursor=pointer]: ▾
+          - button "Applications" [ref=e20] [cursor=pointer]
+        - tree [ref=e91]:
+          - treeitem "Collapse sample-app 214.3k Add to starred" [expanded] [ref=e686] [cursor=pointer]:
+            - button "Collapse" [ref=e94]: ▾
+            - generic [ref=e97]: sample-app
+            - generic [ref=e98]: 214.3k
+            - button "Add to starred" [ref=e99]:
+              - img [ref=e100]
+          - group [ref=e102]:
+            - treeitem "content-based-routing 0 Add to starred" [ref=e103] [cursor=pointer]:
+              - generic [ref=e105]: ▸
+              - generic [ref=e106]: content-based-routing
+              - generic [ref=e107]: "0"
+              - button "Add to starred" [ref=e108]:
+                - img [ref=e109]
+            - treeitem "data-gen-orders 8.6k Add to starred" [ref=e111] [cursor=pointer]:
+              - generic [ref=e113]: ▸
+              - generic [ref=e114]: data-gen-orders
+              - generic [ref=e115]: 8.6k
+              - button "Add to starred" [ref=e116]:
+                - img [ref=e117]
+            - treeitem "data-gen-files 6.2k Add to starred" [ref=e119] [cursor=pointer]:
+              - generic [ref=e121]: ▸
+              - generic [ref=e122]: data-gen-files
+              - generic [ref=e123]: 6.2k
+              - button "Add to starred" [ref=e124]:
+                - img [ref=e125]
+            - treeitem "data-gen-nested-split 4.8k Add to starred" [ref=e127] [cursor=pointer]:
+              - generic [ref=e129]: ▸
+              - generic [ref=e130]: data-gen-nested-split
+              - generic [ref=e131]: 4.8k
+              - button "Add to starred" [ref=e132]:
+                - img [ref=e133]
+            - treeitem "error-handling-test 5.8k Add to starred" [ref=e135] [cursor=pointer]:
+              - generic [ref=e137]: ▸
+              - generic [ref=e138]: error-handling-test
+              - generic [ref=e139]: 5.8k
+              - button "Add to starred" [ref=e140]:
+                - img [ref=e141]
+            - treeitem "file-processing 171.7k Add to starred" [ref=e687] [cursor=pointer]:
+              - generic [ref=e145]: ▸
+              - generic [ref=e146]: file-processing
+              - generic [ref=e147]: 171.7k
+              - button "Add to starred" [ref=e148]:
+                - img [ref=e149]
+            - treeitem "split-and-multicast 0 Add to starred" [ref=e151] [cursor=pointer]:
+              - generic [ref=e153]: ▸
+              - generic [ref=e154]: split-and-multicast
+              - generic [ref=e155]: "0"
+              - button "Add to starred" [ref=e156]:
+                - img [ref=e157]
+            - treeitem "notify-warehouse 0 Add to starred" [ref=e159] [cursor=pointer]:
+              - generic [ref=e161]: ▸
+              - generic [ref=e162]: notify-warehouse
+              - generic [ref=e163]: "0"
+              - button "Add to starred" [ref=e164]:
+                - img [ref=e165]
+            - treeitem "notify-billing 0 Add to starred" [ref=e167] [cursor=pointer]:
+              - generic [ref=e169]: ▸
+              - generic [ref=e170]: notify-billing
+              - generic [ref=e171]: "0"
+              - button "Add to starred" [ref=e172]:
+                - img [ref=e173]
+            - treeitem "nested-split-demo 0 Add to starred" [ref=e175] [cursor=pointer]:
+              - generic [ref=e177]: ▸
+              - generic [ref=e178]: nested-split-demo
+              - generic [ref=e179]: "0"
+              - button "Add to starred" [ref=e180]:
+                - img [ref=e181]
+            - treeitem "process-composite 0 Add to starred" [ref=e183] [cursor=pointer]:
+              - generic [ref=e185]: ▸
+              - generic [ref=e186]: process-composite
+              - generic [ref=e187]: "0"
+              - button "Add to starred" [ref=e188]:
+                - img [ref=e189]
+            - treeitem "process-order 0 Add to starred" [ref=e191] [cursor=pointer]:
+              - generic [ref=e193]: ▸
+              - generic [ref=e194]: process-order
+              - generic [ref=e195]: "0"
+              - button "Add to starred" [ref=e196]:
+                - img [ref=e197]
+            - treeitem "get-order 0 Add to starred" [ref=e199] [cursor=pointer]:
+              - generic [ref=e201]: ▸
+              - generic [ref=e202]: get-order
+              - generic [ref=e203]: "0"
+              - button "Add to starred" [ref=e204]:
+                - img [ref=e205]
+            - treeitem "route1 0 Add to starred" [ref=e207] [cursor=pointer]:
+              - generic [ref=e209]: ▸
+              - generic [ref=e210]: route1
+              - generic [ref=e211]: "0"
+              - button "Add to starred" [ref=e212]:
+                - img [ref=e213]
+            - treeitem "route2 0 Add to starred" [ref=e215] [cursor=pointer]:
+              - generic [ref=e217]: ▸
+              - generic [ref=e218]: route2
+              - generic [ref=e219]: "0"
+              - button "Add to starred" [ref=e220]:
+                - img [ref=e221]
+            - treeitem "timer-heartbeat 17.3k Add to starred" [ref=e223] [cursor=pointer]:
+              - generic [ref=e225]: ▸
+              - generic [ref=e226]: timer-heartbeat
+              - generic [ref=e227]: 17.3k
+              - button "Add to starred" [ref=e228]:
+                - img [ref=e229]
+      - generic [ref=e21]:
+        - generic [ref=e22]:
+          - button "Collapse Agents" [expanded] [ref=e23] [cursor=pointer]: ▾
+          - button "Agents" [ref=e24] [cursor=pointer]
+        - tree [ref=e231]:
+          - treeitem "Expand sample-app 1/1 live Add to starred" [ref=e232] [cursor=pointer]:
+            - button "Expand" [ref=e234]: ▸
+            - generic [ref=e237]: sample-app
+            - generic [ref=e238]: 1/1 live
+            - button "Add to starred" [ref=e239]:
+              - img [ref=e240]
+      - generic [ref=e25]:
+        - generic [ref=e26]:
+          - button "Collapse Routes" [expanded] [ref=e27] [cursor=pointer]: ▾
+          - button "Routes" [ref=e28] [cursor=pointer]
+        - tree [ref=e242]:
+          - treeitem "Expand sample-app 16 routes Add to starred" [ref=e243] [cursor=pointer]:
+            - button "Expand" [ref=e245]: ▸
+            - generic [ref=e248]: sample-app
+            - generic [ref=e249]: 16 routes
+            - button "Add to starred" [ref=e250]:
+              - img [ref=e251]
+    - generic [ref=e29]:
+      - button "⚙ Admin" [ref=e30] [cursor=pointer]:
+        - generic [ref=e31]: ⚙
+        - generic [ref=e33]: Admin
+      - button "☰ API Docs" [ref=e34] [cursor=pointer]:
+        - generic [ref=e35]: ☰
+        - generic [ref=e37]: API Docs
+  - generic [ref=e38]:
+    - banner [ref=e39]:
+      - navigation "Breadcrumb" [ref=e40]:
+        - list [ref=e41]:
+          - listitem [ref=e42]:
+            - generic [ref=e43]: apps
+      - button "Open search" [ref=e44] [cursor=pointer]:
+        - img [ref=e46]
+        - generic [ref=e49]: Search... ⌘K
+        - generic [ref=e50]: Ctrl+K
+      - group [ref=e51]:
+        - button "OK" [ref=e52] [cursor=pointer]: OK
+        - button "Warn" [ref=e54] [cursor=pointer]: Warn
+        - button "Error" [ref=e56] [cursor=pointer]: Error
+        - button "Running" [ref=e58] [cursor=pointer]: Running
+      - tablist [ref=e61]:
+        - tab "1h" [selected] [ref=e62] [cursor=pointer]:
+          - generic [ref=e63]: 1h
+        - tab "3h" [ref=e64] [cursor=pointer]:
+          - generic [ref=e65]: 3h
+        - tab "6h" [ref=e66] [cursor=pointer]:
+          - generic [ref=e67]: 6h
+        - tab "Today" [ref=e68] [cursor=pointer]:
+          - generic [ref=e69]: Today
+        - tab "24h" [ref=e70] [cursor=pointer]:
+          - generic [ref=e71]: 24h
+        - tab "7d" [ref=e72] [cursor=pointer]:
+          - generic [ref=e73]: 7d
+        - tab "23. März 19:40 – now" [ref=e74]:
+          - generic [ref=e75]:
+            - button "23. März 19:40" [ref=e77] [cursor=pointer]
+            - generic [ref=e78]: –
+            - button "now" [ref=e80] [cursor=pointer]
+      - generic [ref=e81]:
+        - button "Switch to dark mode" [ref=e82] [cursor=pointer]: ☾
+        - generic [ref=e85] [cursor=pointer]:
+          - generic [ref=e86]: admin
+          - generic "admin" [ref=e87]: AD
+    - main [ref=e88]:
+      - generic [ref=e253]:
+        - generic [ref=e254]:
+          - generic [ref=e255]:
+            - generic [ref=e256]:
+              - generic [ref=e257]: Exchanges
+              - img [ref=e258]
+            - generic [ref=e260]:
+              - generic [ref=e261]: 8,887
+              - generic [ref=e262]: ↓ -1%
+            - generic [ref=e263]: 100.0% success rate
+          - generic [ref=e264]:
+            - generic [ref=e266]: Success Rate
+            - generic [ref=e267]:
+              - generic [ref=e268]: 100.0%
+              - generic [ref=e269]: ↑ +0.0%
+            - generic [ref=e270]: 8,887 ok / 0 error
+          - generic [ref=e271]:
+            - generic [ref=e272]:
+              - generic [ref=e273]: Errors
+              - img [ref=e274]
+            - generic [ref=e275]:
+              - generic [ref=e276]: "0"
+              - generic [ref=e277]: → 0
+            - generic [ref=e278]: 0 errors in selected period
+          - generic [ref=e279]:
+            - generic [ref=e280]:
+              - generic [ref=e281]: Throughput
+              - img [ref=e282]
+            - generic [ref=e285]: "2.5"
+            - generic [ref=e286]: 2.5 msg/s
+          - generic [ref=e287]:
+            - generic [ref=e288]:
+              - generic [ref=e289]: Latency p99
+              - img [ref=e290]
+            - generic [ref=e293]: 8,804
+            - generic [ref=e294]: 8,804ms
+        - generic [ref=e295]:
+          - generic [ref=e296]:
+            - generic [ref=e297]: Recent Exchanges
+            - generic [ref=e298]:
+              - generic [ref=e299]: 50 of 8886 exchanges
+              - generic [ref=e300]: LIVE
+          - generic [ref=e301]:
+            - table [ref=e303]:
+              - rowgroup [ref=e304]:
+                - row "Status↕ ↕ Route↕ Application↕ Exchange ID↕ Started↕ Duration↕ Agent↕" [ref=e305]:
+                  - columnheader "Status↕" [ref=e306] [cursor=pointer]
+                  - columnheader "↕" [ref=e307] [cursor=pointer]
+                  - columnheader "Route↕" [ref=e308] [cursor=pointer]
+                  - columnheader "Application↕" [ref=e309] [cursor=pointer]
+                  - columnheader "Exchange ID↕" [ref=e310] [cursor=pointer]
+                  - columnheader "Started↕" [ref=e311] [cursor=pointer]
+                  - columnheader "Duration↕" [ref=e312] [cursor=pointer]
+                  - columnheader "Agent↕" [ref=e313] [cursor=pointer]
+              - rowgroup [ref=e314]:
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109FA7 2026-03-23 19:40:45 783ms sample-app-1" [ref=e315] [cursor=pointer]:
+                  - cell "OK" [ref=e316]:
+                    - generic [ref=e319]: OK
+                  - cell "↗" [ref=e320]:
+                    - link "↗" [ref=e321]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109FA7
+                  - cell "file-processing" [ref=e322]
+                  - cell [ref=e323]
+                  - cell "6351ED788703FDC-0000000000109FA7" [ref=e324]
+                  - cell "2026-03-23 19:40:45" [ref=e325]
+                  - cell "783ms" [ref=e326]
+                  - cell "sample-app-1" [ref=e327]:
+                    - generic [ref=e328]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109FA4 2026-03-23 19:40:45 865ms sample-app-1" [ref=e329] [cursor=pointer]:
+                  - cell "OK" [ref=e330]:
+                    - generic [ref=e333]: OK
+                  - cell "↗" [ref=e334]:
+                    - link "↗" [ref=e335]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109FA4
+                  - cell "file-processing" [ref=e336]
+                  - cell [ref=e337]
+                  - cell "6351ED788703FDC-0000000000109FA4" [ref=e338]
+                  - cell "2026-03-23 19:40:45" [ref=e339]
+                  - cell "865ms" [ref=e340]
+                  - cell "sample-app-1" [ref=e341]:
+                    - generic [ref=e342]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109FA3 2026-03-23 19:40:44 415ms sample-app-1" [ref=e343] [cursor=pointer]:
+                  - cell "OK" [ref=e344]:
+                    - generic [ref=e347]: OK
+                  - cell "↗" [ref=e348]:
+                    - link "↗" [ref=e349]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109FA3
+                  - cell "file-processing" [ref=e350]
+                  - cell [ref=e351]
+                  - cell "6351ED788703FDC-0000000000109FA3" [ref=e352]
+                  - cell "2026-03-23 19:40:44" [ref=e353]
+                  - cell "415ms" [ref=e354]
+                  - cell "sample-app-1" [ref=e355]:
+                    - generic [ref=e356]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109FA2 2026-03-23 19:40:44 120ms sample-app-1" [ref=e357] [cursor=pointer]:
+                  - cell "OK" [ref=e358]:
+                    - generic [ref=e361]: OK
+                  - cell "↗" [ref=e362]:
+                    - link "↗" [ref=e363]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109FA2
+                  - cell "file-processing" [ref=e364]
+                  - cell [ref=e365]
+                  - cell "6351ED788703FDC-0000000000109FA2" [ref=e366]
+                  - cell "2026-03-23 19:40:44" [ref=e367]
+                  - cell "120ms" [ref=e368]
+                  - cell "sample-app-1" [ref=e369]:
+                    - generic [ref=e370]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109FA1 2026-03-23 19:40:44 194ms sample-app-1" [ref=e371] [cursor=pointer]:
+                  - cell "OK" [ref=e372]:
+                    - generic [ref=e375]: OK
+                  - cell "↗" [ref=e376]:
+                    - link "↗" [ref=e377]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109FA1
+                  - cell "file-processing" [ref=e378]
+                  - cell [ref=e379]
+                  - cell "6351ED788703FDC-0000000000109FA1" [ref=e380]
+                  - cell "2026-03-23 19:40:44" [ref=e381]
+                  - cell "194ms" [ref=e382]
+                  - cell "sample-app-1" [ref=e383]:
+                    - generic [ref=e384]: sample-app-1
+                - row "OK ↗ timer-heartbeat 6351ED788703FDC-0000000000109FA0 2026-03-23 19:40:43 840ms sample-app-1" [ref=e385] [cursor=pointer]:
+                  - cell "OK" [ref=e386]:
+                    - generic [ref=e389]: OK
+                  - cell "↗" [ref=e390]:
+                    - link "↗" [ref=e391]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109FA0
+                  - cell "timer-heartbeat" [ref=e392]
+                  - cell [ref=e393]
+                  - cell "6351ED788703FDC-0000000000109FA0" [ref=e394]
+                  - cell "2026-03-23 19:40:43" [ref=e395]
+                  - cell "840ms" [ref=e396]
+                  - cell "sample-app-1" [ref=e397]:
+                    - generic [ref=e398]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F9F 2026-03-23 19:40:43 476ms sample-app-1" [ref=e399] [cursor=pointer]:
+                  - cell "OK" [ref=e400]:
+                    - generic [ref=e403]: OK
+                  - cell "↗" [ref=e404]:
+                    - link "↗" [ref=e405]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F9F
+                  - cell "file-processing" [ref=e406]
+                  - cell [ref=e407]
+                  - cell "6351ED788703FDC-0000000000109F9F" [ref=e408]
+                  - cell "2026-03-23 19:40:43" [ref=e409]
+                  - cell "476ms" [ref=e410]
+                  - cell "sample-app-1" [ref=e411]:
+                    - generic [ref=e412]: sample-app-1
+                - row "OK ↗ data-gen-orders 6351ED788703FDC-0000000000109F9E 2026-03-23 19:40:43 1.9s sample-app-1" [ref=e413] [cursor=pointer]:
+                  - cell "OK" [ref=e414]:
+                    - generic [ref=e417]: OK
+                  - cell "↗" [ref=e418]:
+                    - link "↗" [ref=e419]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F9E
+                  - cell "data-gen-orders" [ref=e420]
+                  - cell [ref=e421]
+                  - cell "6351ED788703FDC-0000000000109F9E" [ref=e422]
+                  - cell "2026-03-23 19:40:43" [ref=e423]
+                  - cell "1.9s" [ref=e424]
+                  - cell "sample-app-1" [ref=e425]:
+                    - generic [ref=e426]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F9D 2026-03-23 19:40:43 443ms sample-app-1" [ref=e427] [cursor=pointer]:
+                  - cell "OK" [ref=e428]:
+                    - generic [ref=e431]: OK
+                  - cell "↗" [ref=e432]:
+                    - link "↗" [ref=e433]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F9D
+                  - cell "file-processing" [ref=e434]
+                  - cell [ref=e435]
+                  - cell "6351ED788703FDC-0000000000109F9D" [ref=e436]
+                  - cell "2026-03-23 19:40:43" [ref=e437]
+                  - cell "443ms" [ref=e438]
+                  - cell "sample-app-1" [ref=e439]:
+                    - generic [ref=e440]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F9C 2026-03-23 19:40:43 179ms sample-app-1" [ref=e441] [cursor=pointer]:
+                  - cell "OK" [ref=e442]:
+                    - generic [ref=e445]: OK
+                  - cell "↗" [ref=e446]:
+                    - link "↗" [ref=e447]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F9C
+                  - cell "file-processing" [ref=e448]
+                  - cell [ref=e449]
+                  - cell "6351ED788703FDC-0000000000109F9C" [ref=e450]
+                  - cell "2026-03-23 19:40:43" [ref=e451]
+                  - cell "179ms" [ref=e452]
+                  - cell "sample-app-1" [ref=e453]:
+                    - generic [ref=e454]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F9B 2026-03-23 19:40:42 240ms sample-app-1" [ref=e455] [cursor=pointer]:
+                  - cell "OK" [ref=e456]:
+                    - generic [ref=e459]: OK
+                  - cell "↗" [ref=e460]:
+                    - link "↗" [ref=e461]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F9B
+                  - cell "file-processing" [ref=e462]
+                  - cell [ref=e463]
+                  - cell "6351ED788703FDC-0000000000109F9B" [ref=e464]
+                  - cell "2026-03-23 19:40:42" [ref=e465]
+                  - cell "240ms" [ref=e466]
+                  - cell "sample-app-1" [ref=e467]:
+                    - generic [ref=e468]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F9A 2026-03-23 19:40:42 798ms sample-app-1" [ref=e469] [cursor=pointer]:
+                  - cell "OK" [ref=e470]:
+                    - generic [ref=e473]: OK
+                  - cell "↗" [ref=e474]:
+                    - link "↗" [ref=e475]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F9A
+                  - cell "file-processing" [ref=e476]
+                  - cell [ref=e477]
+                  - cell "6351ED788703FDC-0000000000109F9A" [ref=e478]
+                  - cell "2026-03-23 19:40:42" [ref=e479]
+                  - cell "798ms" [ref=e480]
+                  - cell "sample-app-1" [ref=e481]:
+                    - generic [ref=e482]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F98 2026-03-23 19:40:41 276ms sample-app-1" [ref=e483] [cursor=pointer]:
+                  - cell "OK" [ref=e484]:
+                    - generic [ref=e487]: OK
+                  - cell "↗" [ref=e488]:
+                    - link "↗" [ref=e489]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F98
+                  - cell "file-processing" [ref=e490]
+                  - cell [ref=e491]
+                  - cell "6351ED788703FDC-0000000000109F98" [ref=e492]
+                  - cell "2026-03-23 19:40:41" [ref=e493]
+                  - cell "276ms" [ref=e494]
+                  - cell "sample-app-1" [ref=e495]:
+                    - generic [ref=e496]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F96 2026-03-23 19:40:41 213ms sample-app-1" [ref=e497] [cursor=pointer]:
+                  - cell "OK" [ref=e498]:
+                    - generic [ref=e501]: OK
+                  - cell "↗" [ref=e502]:
+                    - link "↗" [ref=e503]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F96
+                  - cell "file-processing" [ref=e504]
+                  - cell [ref=e505]
+                  - cell "6351ED788703FDC-0000000000109F96" [ref=e506]
+                  - cell "2026-03-23 19:40:41" [ref=e507]
+                  - cell "213ms" [ref=e508]
+                  - cell "sample-app-1" [ref=e509]:
+                    - generic [ref=e510]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F95 2026-03-23 19:40:41 15ms sample-app-1" [ref=e511] [cursor=pointer]:
+                  - cell "OK" [ref=e512]:
+                    - generic [ref=e515]: OK
+                  - cell "↗" [ref=e516]:
+                    - link "↗" [ref=e517]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F95
+                  - cell "file-processing" [ref=e518]
+                  - cell [ref=e519]
+                  - cell "6351ED788703FDC-0000000000109F95" [ref=e520]
+                  - cell "2026-03-23 19:40:41" [ref=e521]
+                  - cell "15ms" [ref=e522]
+                  - cell "sample-app-1" [ref=e523]:
+                    - generic [ref=e524]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F94 2026-03-23 19:40:41 537ms sample-app-1" [ref=e525] [cursor=pointer]:
+                  - cell "OK" [ref=e526]:
+                    - generic [ref=e529]: OK
+                  - cell "↗" [ref=e530]:
+                    - link "↗" [ref=e531]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F94
+                  - cell "file-processing" [ref=e532]
+                  - cell [ref=e533]
+                  - cell "6351ED788703FDC-0000000000109F94" [ref=e534]
+                  - cell "2026-03-23 19:40:41" [ref=e535]
+                  - cell "537ms" [ref=e536]
+                  - cell "sample-app-1" [ref=e537]:
+                    - generic [ref=e538]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F93 2026-03-23 19:40:40 244ms sample-app-1" [ref=e539] [cursor=pointer]:
+                  - cell "OK" [ref=e540]:
+                    - generic [ref=e543]: OK
+                  - cell "↗" [ref=e544]:
+                    - link "↗" [ref=e545]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F93
+                  - cell "file-processing" [ref=e546]
+                  - cell [ref=e547]
+                  - cell "6351ED788703FDC-0000000000109F93" [ref=e548]
+                  - cell "2026-03-23 19:40:40" [ref=e549]
+                  - cell "244ms" [ref=e550]
+                  - cell "sample-app-1" [ref=e551]:
+                    - generic [ref=e552]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F90 2026-03-23 19:40:39 867ms sample-app-1" [ref=e553] [cursor=pointer]:
+                  - cell "OK" [ref=e554]:
+                    - generic [ref=e557]: OK
+                  - cell "↗" [ref=e558]:
+                    - link "↗" [ref=e559]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F90
+                  - cell "file-processing" [ref=e560]
+                  - cell [ref=e561]
+                  - cell "6351ED788703FDC-0000000000109F90" [ref=e562]
+                  - cell "2026-03-23 19:40:39" [ref=e563]
+                  - cell "867ms" [ref=e564]
+                  - cell "sample-app-1" [ref=e565]:
+                    - generic [ref=e566]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F8F 2026-03-23 19:40:39 389ms sample-app-1" [ref=e567] [cursor=pointer]:
+                  - cell "OK" [ref=e568]:
+                    - generic [ref=e571]: OK
+                  - cell "↗" [ref=e572]:
+                    - link "↗" [ref=e573]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F8F
+                  - cell "file-processing" [ref=e574]
+                  - cell [ref=e575]
+                  - cell "6351ED788703FDC-0000000000109F8F" [ref=e576]
+                  - cell "2026-03-23 19:40:39" [ref=e577]
+                  - cell "389ms" [ref=e578]
+                  - cell "sample-app-1" [ref=e579]:
+                    - generic [ref=e580]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F8D 2026-03-23 19:40:39 25ms sample-app-1" [ref=e581] [cursor=pointer]:
+                  - cell "OK" [ref=e582]:
+                    - generic [ref=e585]: OK
+                  - cell "↗" [ref=e586]:
+                    - link "↗" [ref=e587]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F8D
+                  - cell "file-processing" [ref=e588]
+                  - cell [ref=e589]
+                  - cell "6351ED788703FDC-0000000000109F8D" [ref=e590]
+                  - cell "2026-03-23 19:40:39" [ref=e591]
+                  - cell "25ms" [ref=e592]
+                  - cell "sample-app-1" [ref=e593]:
+                    - generic [ref=e594]: sample-app-1
+                - row "OK ↗ timer-heartbeat 6351ED788703FDC-0000000000109F8C 2026-03-23 19:40:38 679ms sample-app-1" [ref=e595] [cursor=pointer]:
+                  - cell "OK" [ref=e596]:
+                    - generic [ref=e599]: OK
+                  - cell "↗" [ref=e600]:
+                    - link "↗" [ref=e601]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F8C
+                  - cell "timer-heartbeat" [ref=e602]
+                  - cell [ref=e603]
+                  - cell "6351ED788703FDC-0000000000109F8C" [ref=e604]
+                  - cell "2026-03-23 19:40:38" [ref=e605]
+                  - cell "679ms" [ref=e606]
+                  - cell "sample-app-1" [ref=e607]:
+                    - generic [ref=e608]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F8A 2026-03-23 19:40:38 922ms sample-app-1" [ref=e609] [cursor=pointer]:
+                  - cell "OK" [ref=e610]:
+                    - generic [ref=e613]: OK
+                  - cell "↗" [ref=e614]:
+                    - link "↗" [ref=e615]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F8A
+                  - cell "file-processing" [ref=e616]
+                  - cell [ref=e617]
+                  - cell "6351ED788703FDC-0000000000109F8A" [ref=e618]
+                  - cell "2026-03-23 19:40:38" [ref=e619]
+                  - cell "922ms" [ref=e620]
+                  - cell "sample-app-1" [ref=e621]:
+                    - generic [ref=e622]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F88 2026-03-23 19:40:37 851ms sample-app-1" [ref=e623] [cursor=pointer]:
+                  - cell "OK" [ref=e624]:
+                    - generic [ref=e627]: OK
+                  - cell "↗" [ref=e628]:
+                    - link "↗" [ref=e629]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F88
+                  - cell "file-processing" [ref=e630]
+                  - cell [ref=e631]
+                  - cell "6351ED788703FDC-0000000000109F88" [ref=e632]
+                  - cell "2026-03-23 19:40:37" [ref=e633]
+                  - cell "851ms" [ref=e634]
+                  - cell "sample-app-1" [ref=e635]:
+                    - generic [ref=e636]: sample-app-1
+                - row "OK ↗ file-processing 6351ED788703FDC-0000000000109F87 2026-03-23 19:40:37 10ms sample-app-1" [ref=e637] [cursor=pointer]:
+                  - cell "OK" [ref=e638]:
+                    - generic [ref=e641]: OK
+                  - cell "↗" [ref=e642]:
+                    - link "↗" [ref=e643]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F87
+                  - cell "file-processing" [ref=e644]
+                  - cell [ref=e645]
+                  - cell "6351ED788703FDC-0000000000109F87" [ref=e646]
+                  - cell "2026-03-23 19:40:37" [ref=e647]
+                  - cell "10ms" [ref=e648]
+                  - cell "sample-app-1" [ref=e649]:
+                    - generic [ref=e650]: sample-app-1
+                - row "OK ↗ data-gen-files 6351ED788703FDC-0000000000109F84 2026-03-23 19:40:37 0ms sample-app-1" [ref=e651] [cursor=pointer]:
+                  - cell "OK" [ref=e652]:
+                    - generic [ref=e655]: OK
+                  - cell "↗" [ref=e656]:
+                    - link "↗" [ref=e657]:
+                      - /url: /exchanges/6351ED788703FDC-0000000000109F84
+                  - cell "data-gen-files" [ref=e658]
+                  - cell [ref=e659]
+                  - cell "6351ED788703FDC-0000000000109F84" [ref=e660]
+                  - cell "2026-03-23 19:40:37" [ref=e661]
+                  - cell "0ms" [ref=e662]
+                  - cell "sample-app-1" [ref=e663]:
+                    - generic [ref=e664]: sample-app-1
+            - generic [ref=e665]:
+              - generic [ref=e666]: 1–25 of 50
+              - generic [ref=e667]:
+                - generic [ref=e668]: "Rows:"
+                - generic [ref=e669]:
+                  - combobox [ref=e670] [cursor=pointer]:
+                    - option "10"
+                    - option "25" [selected]
+                    - option "50"
+                    - option "100"
+                  - generic: ▾
+                - generic [ref=e671]:
+                  - button "Previous page" [disabled] [ref=e672]:
+                    - generic [ref=e673]: ‹
+                  - generic [ref=e674]: 1 / 2
+                  - button "Next page" [ref=e675] [cursor=pointer]:
+                    - generic [ref=e676]: ›
+        - complementary [ref=e677]:
+          - generic [ref=e678]:
+            - generic [ref=e679]: Exchange 6351ED788703...
+            - button "Close panel" [ref=e680] [cursor=pointer]: ×
+          - generic [ref=e681]:
+            - button "Overview" [ref=e682] [cursor=pointer]
+            - button "Processors" [ref=e683] [cursor=pointer]
+            - button "Route Flow" [ref=e684] [cursor=pointer]
\ No newline at end of file
diff --git a/docs/superpowers/plans/2026-03-17-rbac-crud-gaps.md b/docs/superpowers/plans/2026-03-17-rbac-crud-gaps.md
new file mode 100644
index 00000000..d5358fb5
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-17-rbac-crud-gaps.md
@@ -0,0 +1,1204 @@
+# RBAC CRUD Gaps Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add CRUD actions, assignment UI, and guards to the read-only RBAC management page; seed a built-in Admins group; fix date formatting and diagram ordering.
+
+**Architecture:** Backend seed migration + constant, then frontend changes: reusable MultiSelectDropdown component, CRUD forms/buttons on each tab, diagram sorting. All mutation hooks already exist in `rbac.ts`.
+
+**Tech Stack:** Java 17, Spring Boot, Flyway, React 19, TypeScript, TanStack Query, CSS Modules.
+
+**Spec:** `docs/superpowers/specs/2026-03-17-rbac-crud-gaps-design.md`
+
+---
+
+## File Map
+
+### Backend
+| File | Change |
+|---|---|
+| Create: `cameleer3-server-app/src/main/resources/db/migration/V2__admin_group_seed.sql` | Seed Admins group + ADMIN role assignment |
+| Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/SystemRole.java` | Add `ADMINS_GROUP_ID` |
+| Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/security/UiAuthController.java` | Add admin user to Admins group on login |
+
+### Frontend
+| File | Change |
+|---|---|
+| Create: `ui/src/pages/admin/rbac/components/MultiSelectDropdown.tsx` | Reusable multi-select picker |
+| Modify: `ui/src/pages/admin/rbac/RbacPage.module.css` | Styles for dropdown, create forms, delete/remove buttons |
+| Modify: `ui/src/pages/admin/rbac/DashboardTab.tsx` | Sort diagram columns consistently |
+| Modify: `ui/src/pages/admin/rbac/UsersTab.tsx` | Delete button, group/role assignment, date format |
+| Modify: `ui/src/pages/admin/rbac/GroupsTab.tsx` | Add group form, delete, role assignment, parent dropdown |
+| Modify: `ui/src/pages/admin/rbac/RolesTab.tsx` | Add role form, delete (disabled for system) |
+
+---
+
+## Tasks
+
+### Task 1: Backend — Admins Group Seed + SystemRole Constant + Auth
+
+**Files:**
+- Create: `cameleer3-server-app/src/main/resources/db/migration/V2__admin_group_seed.sql`
+- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/SystemRole.java`
+- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/security/UiAuthController.java`
+
+- [ ] **Step 1: Create V2 migration**
+
+```sql
+-- Built-in Admins group
+INSERT INTO groups (id, name) VALUES
+    ('00000000-0000-0000-0000-000000000010', 'Admins');
+
+-- Assign ADMIN role to Admins group
+INSERT INTO group_roles (group_id, role_id) VALUES
+    ('00000000-0000-0000-0000-000000000010', '00000000-0000-0000-0000-000000000004');
+```
+
+- [ ] **Step 2: Add ADMINS_GROUP_ID to SystemRole.java**
+
+Read `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/SystemRole.java` and add after the existing UUID constants:
+
+```java
+public static final UUID ADMINS_GROUP_ID = UUID.fromString("00000000-0000-0000-0000-000000000010");
+```
+
+- [ ] **Step 3: Update UiAuthController.login()**
+
+Read `cameleer3-server-app/src/main/java/com/cameleer3/server/app/security/UiAuthController.java`. In the `login()` method, after the line that assigns ADMIN role (`rbacService.assignRoleToUser(subject, SystemRole.ADMIN_ID)`), add:
+
+```java
+rbacService.addUserToGroup(subject, SystemRole.ADMINS_GROUP_ID);
+```
+
+- [ ] **Step 4: Verify backend compiles**
+
+```bash
+mvn clean compile
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add cameleer3-server-app/src/main/resources/db/migration/V2__admin_group_seed.sql cameleer3-server-core/ cameleer3-server-app/src/main/java/
+git commit -m "feat: seed built-in Admins group and assign admin users on login"
+```
+
+---
+
+### Task 2: MultiSelectDropdown Component + CSS
+
+**Files:**
+- Create: `ui/src/pages/admin/rbac/components/MultiSelectDropdown.tsx`
+- Modify: `ui/src/pages/admin/rbac/RbacPage.module.css`
+
+- [ ] **Step 1: Add CSS styles for multi-select dropdown, create forms, and action buttons**
+
+Read `ui/src/pages/admin/rbac/RbacPage.module.css`. Append these new styles:
+
+```css
+/* ─── Multi-Select Dropdown ─── */
+.multiSelectWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.addChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 20px;
+  border: 1px dashed var(--border);
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+
+.addChip:hover {
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  min-width: 220px;
+  max-height: 300px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  margin-top: 4px;
+}
+
+.dropdownSearch {
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.dropdownSearchInput {
+  width: 100%;
+  padding: 5px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.dropdownSearchInput:focus {
+  border-color: var(--amber);
+}
+
+.dropdownList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.dropdownItem:hover {
+  background: var(--bg-hover);
+}
+
+.dropdownItemCheckbox {
+  accent-color: var(--amber);
+}
+
+.dropdownFooter {
+  padding: 8px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dropdownApply {
+  font-size: 11px;
+  padding: 4px 12px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--amber);
+  color: #000;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.dropdownApply:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.dropdownEmpty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* ─── Remove button on chips ─── */
+.chipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.4;
+  font-size: 10px;
+  padding: 0;
+  margin-left: 2px;
+  border-radius: 50%;
+  transition: opacity 0.1s;
+}
+
+.chipRemove:hover {
+  opacity: 0.9;
+}
+
+.chipRemove:disabled {
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+
+/* ─── Delete button ─── */
+.btnDelete {
+  font-size: 11px;
+  padding: 4px 10px;
+  border: 1px solid var(--rose);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--rose);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: background 0.1s;
+}
+
+.btnDelete:hover {
+  background: rgba(244, 63, 94, 0.1);
+}
+
+.btnDelete:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ─── Inline Create Form ─── */
+.createForm {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.createFormRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.createFormLabel {
+  font-size: 11px;
+  color: var(--text-muted);
+  width: 60px;
+  flex-shrink: 0;
+}
+
+.createFormInput {
+  flex: 1;
+  padding: 5px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.createFormInput:focus {
+  border-color: var(--amber);
+}
+
+.createFormSelect {
+  flex: 1;
+  padding: 5px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.createFormActions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.createFormBtn {
+  font-size: 11px;
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.createFormBtnPrimary {
+  composes: createFormBtn;
+  background: var(--amber);
+  border-color: var(--amber);
+  color: #000;
+  font-weight: 500;
+}
+
+.createFormBtnPrimary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.createFormError {
+  font-size: 11px;
+  color: var(--rose);
+}
+
+/* ─── Detail header with actions ─── */
+.detailHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.detailHeaderInfo {
+  flex: 1;
+}
+
+/* ─── Parent group dropdown ─── */
+.parentSelect {
+  padding: 3px 6px;
+  font-size: 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  outline: none;
+  max-width: 200px;
+}
+```
+
+- [ ] **Step 2: Create MultiSelectDropdown component**
+
+Create `ui/src/pages/admin/rbac/components/MultiSelectDropdown.tsx`:
+
+```tsx
+import { useState, useRef, useEffect } from 'react';
+import styles from '../RbacPage.module.css';
+
+interface MultiSelectItem {
+  id: string;
+  label: string;
+}
+
+interface MultiSelectDropdownProps {
+  items: MultiSelectItem[];
+  onApply: (selectedIds: string[]) => void;
+  placeholder?: string;
+  label?: string;
+}
+
+export function MultiSelectDropdown({ items, onApply, placeholder = 'Search...', label = '+ Add' }: MultiSelectDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+        setSearch('');
+        setSelected(new Set());
+      }
+    }
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        setSearch('');
+        setSelected(new Set());
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [open]);
+
+  const filtered = items.filter(item =>
+    item.label.toLowerCase().includes(search.toLowerCase())
+  );
+
+  function toggle(id: string) {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function handleApply() {
+    onApply(Array.from(selected));
+    setOpen(false);
+    setSearch('');
+    setSelected(new Set());
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className={styles.multiSelectWrapper} ref={ref}>
+      <button
+        type="button"
+        className={styles.addChip}
+        onClick={() => setOpen(!open)}
+      >
+        {label}
+      </button>
+      {open && (
+        <div className={styles.dropdown}>
+          <div className={styles.dropdownSearch}>
+            <input
+              type="text"
+              className={styles.dropdownSearchInput}
+              placeholder={placeholder}
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              autoFocus
+            />
+          </div>
+          <div className={styles.dropdownList}>
+            {filtered.length === 0 ? (
+              <div className={styles.dropdownEmpty}>No items found</div>
+            ) : (
+              filtered.map(item => (
+                <label key={item.id} className={styles.dropdownItem}>
+                  <input
+                    type="checkbox"
+                    className={styles.dropdownItemCheckbox}
+                    checked={selected.has(item.id)}
+                    onChange={() => toggle(item.id)}
+                  />
+                  {item.label}
+                </label>
+              ))
+            )}
+          </div>
+          <div className={styles.dropdownFooter}>
+            <button
+              type="button"
+              className={styles.dropdownApply}
+              disabled={selected.size === 0}
+              onClick={handleApply}
+            >
+              Apply{selected.size > 0 ? ` (${selected.size})` : ''}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 3: Verify UI builds**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/components/MultiSelectDropdown.tsx ui/src/pages/admin/rbac/RbacPage.module.css
+git commit -m "feat: add MultiSelectDropdown component and CRUD styles"
+```
+
+---
+
+### Task 3: Dashboard Diagram Ordering
+
+**Files:**
+- Modify: `ui/src/pages/admin/rbac/DashboardTab.tsx`
+
+- [ ] **Step 1: Fix diagram column ordering**
+
+Read `ui/src/pages/admin/rbac/DashboardTab.tsx`. The inheritance diagram currently renders groups, roles, and users without explicit sorting. Change:
+
+1. **Groups column**: Sort groups alphabetically. Render top-level groups first (no parentGroupId), with children indented below their parent.
+2. **Roles column**: Iterate sorted groups top-to-bottom, collect each group's `directRoles`, deduplicate preserving first-seen order. Only show roles that are assigned to at least one group.
+3. **Users column**: Sort users alphabetically by `displayName`.
+
+The existing code builds `groupList`, `roleList`, and `userList` from `useGroups()`, `useRoles()`, and `useUsers()`. Replace the list-building logic with sorted/ordered versions.
+
+For groups, build a tree structure: for each top-level group (parentGroupId is null), render it followed by its children (sorted). Use `useMemo` for the sorted lists.
+
+For roles, derive from the sorted groups' directRoles rather than from `useRoles()`.
+
+- [ ] **Step 2: Verify UI builds**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/DashboardTab.tsx
+git commit -m "fix: sort RBAC dashboard diagram columns consistently"
+```
+
+---
+
+### Task 4: UsersTab — Delete, Assignments, Date Format
+
+**Files:**
+- Modify: `ui/src/pages/admin/rbac/UsersTab.tsx`
+
+- [ ] **Step 1: Add imports and mutation hooks**
+
+Read `ui/src/pages/admin/rbac/UsersTab.tsx`. Add imports:
+
+```tsx
+import { ConfirmDeleteDialog } from '../../../components/admin/ConfirmDeleteDialog';
+import { MultiSelectDropdown } from './components/MultiSelectDropdown';
+import { useAuthStore } from '../../../auth/auth-store';
+import {
+  useDeleteUser,
+  useAddUserToGroup,
+  useRemoveUserFromGroup,
+  useAssignRoleToUser,
+  useRemoveRoleFromUser,
+  useRoles,
+} from '../../../api/queries/admin/rbac';
+```
+
+- [ ] **Step 2: Add state and hooks in UsersTab component**
+
+Inside the `UsersTab` component function, after the existing state, add:
+
+```tsx
+const { data: allRoles } = useRoles();
+```
+
+- [ ] **Step 3: Add state, hooks, and props in UserDetail sub-component**
+
+The `UserDetail` sub-component needs new props and hooks. Update its signature to accept `onDeselect`, `allGroups`, and `allRoles`:
+
+```tsx
+function UserDetailView({ user, groupMap, allGroups, allRoles, onDeselect }: {
+  user: UserDetail;
+  groupMap: Map<string, GroupDetail>;
+  allGroups: GroupDetail[];
+  allRoles: RoleDetail[];
+  onDeselect: () => void;
+}) {
+```
+
+Update the parent's JSX call site to pass these props:
+
+```tsx
+<UserDetailView
+  user={selectedUser}
+  groupMap={groupMap}
+  allGroups={groups || []}
+  allRoles={allRoles || []}
+  onDeselect={() => setSelected(null)}
+/>
+```
+
+Inside the sub-component, add state and hooks:
+
+```tsx
+const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+const deleteUserMut = useDeleteUser();
+const addToGroup = useAddUserToGroup();
+const removeFromGroup = useRemoveUserFromGroup();
+const assignRole = useAssignRoleToUser();
+const removeRole = useRemoveRoleFromUser();
+```
+
+For the **self-delete guard**, parse the JWT subject from the access token to get the current user's actual userId:
+
+```tsx
+const accessToken = useAuthStore((s) => s.accessToken);
+const currentUserId = accessToken ? JSON.parse(atob(accessToken.split('.')[1])).sub : null;
+const isSelf = currentUserId === user.userId;
+```
+
+This is necessary because the auth store's `username` field holds the display name, not the JWT subject (`user:<login>`).
+
+- [ ] **Step 4: Add delete button to detail header**
+
+In the detail pane header (where avatar + name are rendered), add a delete button:
+
+```tsx
+const isSelf = currentUser && user.userId === `user:${currentUser}`;
+
+<div className={styles.detailHeader}>
+  <div className={styles.detailHeaderInfo}>
+    {/* existing avatar, name, email */}
+  </div>
+  <button
+    type="button"
+    className={styles.btnDelete}
+    onClick={() => setShowDeleteDialog(true)}
+    disabled={!!isSelf || deleteUserMut.isPending}
+    title={isSelf ? 'Cannot delete your own account' : 'Delete user'}
+  >
+    Delete
+  </button>
+</div>
+```
+
+And the dialog at the bottom of the detail component:
+
+```tsx
+<ConfirmDeleteDialog
+  isOpen={showDeleteDialog}
+  onClose={() => setShowDeleteDialog(false)}
+  onConfirm={() => {
+    deleteUserMut.mutate(user.userId, {
+      onSuccess: () => {
+        setShowDeleteDialog(false);
+        onDeselect(); // clear selection — parent must pass this callback
+      },
+    });
+  }}
+  resourceName={user.displayName || user.userId}
+  resourceType="user"
+/>
+```
+
+The parent `UsersTab` must pass an `onDeselect` callback that sets `selectedUserId` to null.
+
+- [ ] **Step 5: Add group membership assignment UI**
+
+In the "Group membership" detail section, after the existing group chips, add the MultiSelectDropdown:
+
+```tsx
+// Available groups = all groups NOT in user's directGroups
+const availableGroups = (allGroups || [])
+  .filter(g => !user.directGroups.some(dg => dg.id === g.id))
+  .map(g => ({ id: g.id, label: g.name }));
+
+// In the section JSX:
+{user.directGroups.map(g => (
+  <span key={g.id} className={styles.chip}>
+    {g.name}
+    <button
+      type="button"
+      className={styles.chipRemove}
+      onClick={() => removeFromGroup.mutate({ userId: user.userId, groupId: g.id })}
+      disabled={removeFromGroup.isPending}
+      title="Remove from group"
+    >
+      x
+    </button>
+  </span>
+))}
+<MultiSelectDropdown
+  items={availableGroups}
+  onApply={async (ids) => {
+    await Promise.allSettled(ids.map(gid => addToGroup.mutateAsync({ userId: user.userId, groupId: gid })));
+  }}
+  placeholder="Search groups..."
+  label="+ Add"
+/>
+```
+
+- [ ] **Step 6: Add direct role assignment UI**
+
+In the "Effective roles" detail section, add assignment for direct roles and remove buttons on direct (non-inherited) chips:
+
+```tsx
+// Available roles = all roles NOT in user's directRoles
+const availableRoles = (allRoles || [])
+  .filter(r => !user.directRoles.some(dr => dr.id === r.id))
+  .map(r => ({ id: r.id, label: r.name }));
+
+// For each effective role chip:
+{user.effectiveRoles.map(r => (
+  <span key={r.id} className={`${styles.chip} ${r.source !== 'direct' ? styles.chipInherited : ''}`}>
+    {r.name}
+    {r.source !== 'direct' && <span className={styles.chipSource}>↑ {r.source}</span>}
+    {r.source === 'direct' && (
+      <button
+        type="button"
+        className={styles.chipRemove}
+        onClick={() => removeRole.mutate({ userId: user.userId, roleId: r.id })}
+        disabled={removeRole.isPending}
+        title="Remove role"
+      >
+        x
+      </button>
+    )}
+  </span>
+))}
+<MultiSelectDropdown
+  items={availableRoles}
+  onApply={async (ids) => {
+    await Promise.allSettled(ids.map(rid => assignRole.mutateAsync({ userId: user.userId, roleId: rid })));
+  }}
+  placeholder="Search roles..."
+  label="+ Add"
+/>
+```
+
+- [ ] **Step 7: Fix date format**
+
+In the "Created" field row, change from:
+
+```tsx
+{formatDate(user.createdAt)}
+```
+
+to:
+
+```tsx
+{new Date(user.createdAt).toLocaleString()}
+```
+
+Remove the `formatDate` helper if it's no longer used elsewhere.
+
+- [ ] **Step 8: Verify UI builds**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/UsersTab.tsx
+git commit -m "feat: add user delete, group/role assignment, and date format fix"
+```
+
+---
+
+### Task 5: GroupsTab — Create, Delete, Role Assignment, Parent Dropdown
+
+**Files:**
+- Modify: `ui/src/pages/admin/rbac/GroupsTab.tsx`
+
+- [ ] **Step 1: Add imports**
+
+```tsx
+import { ConfirmDeleteDialog } from '../../../components/admin/ConfirmDeleteDialog';
+import { MultiSelectDropdown } from './components/MultiSelectDropdown';
+import {
+  useCreateGroup,
+  useDeleteGroup,
+  useUpdateGroup,
+  useAssignRoleToGroup,
+  useRemoveRoleFromGroup,
+  useRoles,
+} from '../../../api/queries/admin/rbac';
+```
+
+- [ ] **Step 2: Add create group form**
+
+In the `GroupsTab` component, add state for the inline create form:
+
+```tsx
+const [showCreateForm, setShowCreateForm] = useState(false);
+const [newName, setNewName] = useState('');
+const [newParentId, setNewParentId] = useState('');
+const [createError, setCreateError] = useState('');
+const createGroup = useCreateGroup();
+const { data: allRoles } = useRoles();
+```
+
+In the panel header, change the subtitle area to include the add button:
+
+```tsx
+<button type="button" className={styles.btnAdd} onClick={() => setShowCreateForm(true)}>
+  + Add group
+</button>
+```
+
+Below the search bar (inside the list pane, before the entity list), render the form conditionally:
+
+```tsx
+{showCreateForm && (
+  <div className={styles.createForm}>
+    <div className={styles.createFormRow}>
+      <label className={styles.createFormLabel}>Name</label>
+      <input
+        className={styles.createFormInput}
+        value={newName}
+        onChange={e => { setNewName(e.target.value); setCreateError(''); }}
+        placeholder="Group name"
+        autoFocus
+      />
+    </div>
+    <div className={styles.createFormRow}>
+      <label className={styles.createFormLabel}>Parent</label>
+      <select
+        className={styles.createFormSelect}
+        value={newParentId}
+        onChange={e => setNewParentId(e.target.value)}
+      >
+        <option value="">(Top-level)</option>
+        {(groups || []).map(g => (
+          <option key={g.id} value={g.id}>{g.name}</option>
+        ))}
+      </select>
+    </div>
+    {createError && <div className={styles.createFormError}>{createError}</div>}
+    <div className={styles.createFormActions}>
+      <button type="button" className={styles.createFormBtn} onClick={() => { setShowCreateForm(false); setNewName(''); setNewParentId(''); setCreateError(''); }}>
+        Cancel
+      </button>
+      <button
+        type="button"
+        className={styles.createFormBtnPrimary}
+        disabled={!newName.trim() || createGroup.isPending}
+        onClick={() => {
+          createGroup.mutate(
+            { name: newName.trim(), parentGroupId: newParentId || undefined },
+            {
+              onSuccess: () => { setShowCreateForm(false); setNewName(''); setNewParentId(''); setCreateError(''); },
+              onError: (err) => setCreateError(err instanceof Error ? err.message : 'Failed to create group'),
+            }
+          );
+        }}
+      >
+        Create
+      </button>
+    </div>
+  </div>
+)}
+```
+
+- [ ] **Step 3: Add delete button to group detail**
+
+The built-in Admins group (UUID `00000000-0000-0000-0000-000000000010`) cannot be deleted:
+
+```tsx
+const ADMINS_GROUP_ID = '00000000-0000-0000-0000-000000000010';
+const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+const deleteGroup = useDeleteGroup();
+const isBuiltIn = group.id === ADMINS_GROUP_ID;
+
+// In detail header:
+<div className={styles.detailHeader}>
+  <div className={styles.detailHeaderInfo}>
+    {/* avatar, name, hierarchy label */}
+  </div>
+  <button
+    type="button"
+    className={styles.btnDelete}
+    onClick={() => setShowDeleteDialog(true)}
+    disabled={isBuiltIn || deleteGroup.isPending}
+    title={isBuiltIn ? 'Built-in group cannot be deleted' : 'Delete group'}
+  >
+    Delete
+  </button>
+</div>
+
+// Dialog:
+<ConfirmDeleteDialog
+  isOpen={showDeleteDialog}
+  onClose={() => setShowDeleteDialog(false)}
+  onConfirm={() => {
+    deleteGroup.mutate(group.id, {
+      onSuccess: () => { setShowDeleteDialog(false); onDeselect(); },
+    });
+  }}
+  resourceName={group.name}
+  resourceType="group"
+/>
+```
+
+- [ ] **Step 4: Add role assignment to group detail**
+
+In the "Assigned roles" section:
+
+```tsx
+const availableRoles = (allRoles || [])
+  .filter(r => !group.directRoles.some(dr => dr.id === r.id))
+  .map(r => ({ id: r.id, label: r.name }));
+const assignRole = useAssignRoleToGroup();
+const removeRole = useRemoveRoleFromGroup();
+
+{group.directRoles.map(r => (
+  <span key={r.id} className={styles.chip}>
+    {r.name}
+    <button
+      type="button"
+      className={styles.chipRemove}
+      onClick={() => removeRole.mutate({ groupId: group.id, roleId: r.id })}
+      disabled={removeRole.isPending}
+      title="Remove role"
+    >
+      x
+    </button>
+  </span>
+))}
+<MultiSelectDropdown
+  items={availableRoles}
+  onApply={async (ids) => {
+    await Promise.allSettled(ids.map(rid => assignRole.mutateAsync({ groupId: group.id, roleId: rid })));
+  }}
+  placeholder="Search roles..."
+  label="+ Add"
+/>
+```
+
+- [ ] **Step 5: Add parent group dropdown to group detail**
+
+In the detail header area, add a parent group selector. Must exclude the group itself and its transitive descendants to prevent cycles:
+
+```tsx
+const updateGroup = useUpdateGroup();
+
+function getDescendantIds(groupId: string, allGroups: GroupDetail[]): Set<string> {
+  const ids = new Set<string>();
+  function walk(id: string) {
+    const g = allGroups.find(x => x.id === id);
+    if (!g) return;
+    for (const child of g.childGroups) {
+      if (!ids.has(child.id)) {
+        ids.add(child.id);
+        walk(child.id);
+      }
+    }
+  }
+  walk(groupId);
+  return ids;
+}
+
+const descendantIds = getDescendantIds(group.id, allGroups || []);
+const parentOptions = (allGroups || [])
+  .filter(g => g.id !== group.id && !descendantIds.has(g.id));
+
+// Render in the detail fields area:
+<div className={styles.fieldRow}>
+  <span className={styles.fieldLabel}>Parent</span>
+  <select
+    className={styles.parentSelect}
+    value={group.parentGroupId || ''}
+    onChange={e => {
+      updateGroup.mutate({
+        id: group.id,
+        parentGroupId: e.target.value || null,
+      });
+    }}
+  >
+    <option value="">(Top-level)</option>
+    {parentOptions.map(g => (
+      <option key={g.id} value={g.id}>{g.name}</option>
+    ))}
+  </select>
+</div>
+```
+
+- [ ] **Step 6: Update GroupDetailView props and call site**
+
+Update `GroupDetailView` signature to accept new props:
+
+```tsx
+function GroupDetailView({ group, groupMap, allGroups, allRoles, onDeselect }: {
+  group: GroupDetail;
+  groupMap: Map<string, GroupDetail>;
+  allGroups: GroupDetail[];
+  allRoles: RoleDetail[];
+  onDeselect: () => void;
+}) {
+```
+
+Update the parent's JSX call site:
+
+```tsx
+<GroupDetailView
+  group={detail}
+  groupMap={groupMap}
+  allGroups={groups || []}
+  allRoles={allRoles || []}
+  onDeselect={() => setSelected(null)}
+/>
+```
+
+- [ ] **Step 7: Verify UI builds**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/GroupsTab.tsx
+git commit -m "feat: add group create, delete, role assignment, and parent dropdown"
+```
+
+---
+
+### Task 6: RolesTab — Create + Delete
+
+**Files:**
+- Modify: `ui/src/pages/admin/rbac/RolesTab.tsx`
+
+- [ ] **Step 1: Add imports**
+
+```tsx
+import { ConfirmDeleteDialog } from '../../../components/admin/ConfirmDeleteDialog';
+import { useCreateRole, useDeleteRole } from '../../../api/queries/admin/rbac';
+```
+
+- [ ] **Step 2: Add create role form**
+
+Same pattern as groups. In `RolesTab`, add state:
+
+```tsx
+const [showCreateForm, setShowCreateForm] = useState(false);
+const [newName, setNewName] = useState('');
+const [newDesc, setNewDesc] = useState('');
+const [newScope, setNewScope] = useState('custom');
+const [createError, setCreateError] = useState('');
+const createRole = useCreateRole();
+```
+
+Add button in panel header:
+
+```tsx
+<button type="button" className={styles.btnAdd} onClick={() => setShowCreateForm(true)}>
+  + Add role
+</button>
+```
+
+Form below search bar:
+
+```tsx
+{showCreateForm && (
+  <div className={styles.createForm}>
+    <div className={styles.createFormRow}>
+      <label className={styles.createFormLabel}>Name</label>
+      <input
+        className={styles.createFormInput}
+        value={newName}
+        onChange={e => { setNewName(e.target.value); setCreateError(''); }}
+        placeholder="Role name"
+        autoFocus
+      />
+    </div>
+    <div className={styles.createFormRow}>
+      <label className={styles.createFormLabel}>Description</label>
+      <input
+        className={styles.createFormInput}
+        value={newDesc}
+        onChange={e => setNewDesc(e.target.value)}
+        placeholder="Optional description"
+      />
+    </div>
+    <div className={styles.createFormRow}>
+      <label className={styles.createFormLabel}>Scope</label>
+      <input
+        className={styles.createFormInput}
+        value={newScope}
+        onChange={e => setNewScope(e.target.value)}
+        placeholder="custom"
+      />
+    </div>
+    {createError && <div className={styles.createFormError}>{createError}</div>}
+    <div className={styles.createFormActions}>
+      <button type="button" className={styles.createFormBtn} onClick={() => { setShowCreateForm(false); setNewName(''); setNewDesc(''); setNewScope('custom'); setCreateError(''); }}>
+        Cancel
+      </button>
+      <button
+        type="button"
+        className={styles.createFormBtnPrimary}
+        disabled={!newName.trim() || createRole.isPending}
+        onClick={() => {
+          createRole.mutate(
+            { name: newName.trim(), description: newDesc || undefined, scope: newScope || undefined },
+            {
+              onSuccess: () => { setShowCreateForm(false); setNewName(''); setNewDesc(''); setNewScope('custom'); setCreateError(''); },
+              onError: (err) => setCreateError(err instanceof Error ? err.message : 'Failed to create role'),
+            }
+          );
+        }}
+      >
+        Create
+      </button>
+    </div>
+  </div>
+)}
+```
+
+- [ ] **Step 3: Add delete button to role detail + update props**
+
+Update `RoleDetailView` to accept `onDeselect` prop. Update the parent's JSX call site to pass `onDeselect={() => setSelected(null)}`.
+
+In the role detail sub-component:
+
+```tsx
+const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+const deleteRole = useDeleteRole();
+
+// In detail header:
+<div className={styles.detailHeader}>
+  <div className={styles.detailHeaderInfo}>
+    {/* avatar, name, lock icon */}
+  </div>
+  {!role.system && (
+    <button
+      type="button"
+      className={styles.btnDelete}
+      onClick={() => setShowDeleteDialog(true)}
+      disabled={deleteRole.isPending}
+    >
+      Delete
+    </button>
+  )}
+</div>
+
+// Dialog (only for non-system roles):
+{!role.system && (
+  <ConfirmDeleteDialog
+    isOpen={showDeleteDialog}
+    onClose={() => setShowDeleteDialog(false)}
+    onConfirm={() => {
+      deleteRole.mutate(role.id, {
+        onSuccess: () => { setShowDeleteDialog(false); onDeselect(); },
+      });
+    }}
+    resourceName={role.name}
+    resourceType="role"
+  />
+)}
+```
+
+- [ ] **Step 4: Verify UI builds**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/RolesTab.tsx
+git commit -m "feat: add role create and delete with system role protection"
+```
+
+---
+
+### Task 7: Final Build Verification
+
+- [ ] **Step 1: Full backend build**
+
+```bash
+mvn clean compile
+```
+
+- [ ] **Step 2: Full frontend build**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 3: Commit any cleanup if needed**
+
+```bash
+git add -A
+git commit -m "chore: cleanup after RBAC CRUD gaps implementation"
+```
diff --git a/docs/superpowers/plans/2026-03-17-rbac-management.md b/docs/superpowers/plans/2026-03-17-rbac-management.md
new file mode 100644
index 00000000..96100636
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-17-rbac-management.md
@@ -0,0 +1,2392 @@
+# RBAC Management Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace flat `users.roles` text array with a full RBAC system — groups, roles, inheritance — plus a management UI at `/admin/rbac`.
+
+**Architecture:** Consolidated Flyway migration (`V1__init.sql`), new RBAC domain records and `RbacService` for inheritance computation, three new admin controllers, React UI with tab-based navigation and split-pane entity views.
+
+**Tech Stack:** Java 17, Spring Boot 3.4, PostgreSQL/TimescaleDB, Flyway, React 19, TypeScript, TanStack Query, CSS Modules.
+
+**Spec:** `docs/superpowers/specs/2026-03-17-rbac-management-design.md`
+
+---
+
+## File Map
+
+### Backend — New Files
+| File | Responsibility |
+|---|---|
+| `cameleer3-server-app/src/main/resources/db/migration/V1__init.sql` | Consolidated schema (replaces V1–V10) |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RbacService.java` | Inheritance computation interface |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/GroupRepository.java` | Group CRUD interface |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RoleRepository.java` | Role CRUD interface |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/UserDetail.java` | Enriched user record |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/GroupDetail.java` | Group detail record |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RoleDetail.java` | Role detail record |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/UserSummary.java` | Embedded user ref |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/GroupSummary.java` | Embedded group ref |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RoleSummary.java` | Embedded role ref |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RbacStats.java` | Dashboard stats record |
+| `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/SystemRole.java` | System role constants + fixed UUIDs |
+| `cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresGroupRepository.java` | Group repository impl |
+| `cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresRoleRepository.java` | Role repository impl |
+| `cameleer3-server-app/src/main/java/com/cameleer3/server/app/rbac/RbacServiceImpl.java` | Inheritance computation impl |
+| `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/GroupAdminController.java` | Group CRUD endpoints |
+| `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RoleAdminController.java` | Role CRUD endpoints |
+| `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RbacStatsController.java` | Dashboard stats endpoint |
+
+### Backend — Modified Files
+| File | Change |
+|---|---|
+| `cameleer3-server-core/.../security/UserInfo.java` | Remove `roles` field |
+| `cameleer3-server-core/.../security/UserRepository.java` | Remove `updateRoles`, add `findSystemRoles` |
+| `cameleer3-server-core/.../admin/AuditCategory.java` | Add `RBAC` category |
+| `cameleer3-server-app/.../storage/PostgresUserRepository.java` | Rewrite for new schema (no roles column, use user_roles join) |
+| `cameleer3-server-app/.../controller/UserAdminController.java` | Rewrite: use RbacService, new endpoints |
+| `cameleer3-server-app/.../security/UiAuthController.java` | Use user_roles instead of UserInfo.roles |
+| `cameleer3-server-app/.../security/OidcAuthController.java` | Use user_roles for role resolution |
+| `cameleer3-server-app/.../security/JwtAuthenticationFilter.java` | No change (reads roles from JWT, not DB) |
+| `cameleer3-server-app/.../security/AgentRegistrationController.java` | Use user_roles for AGENT role |
+| `cameleer3-server-app/src/test/.../TestSecurityHelper.java` | No change (creates JWT directly) |
+
+### Backend — Deleted Files
+| File |
+|---|
+| `cameleer3-server-app/src/main/resources/db/migration/V2__executions.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V3__processor_executions.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V4__agent_metrics.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V5__route_diagrams.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V6__users.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V7__oidc_config.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V8__continuous_aggregates.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V9__admin_thresholds.sql` |
+| `cameleer3-server-app/src/main/resources/db/migration/V10__audit_log.sql` |
+
+### Frontend — New Files
+| File | Responsibility |
+|---|---|
+| `ui/src/api/queries/admin/rbac.ts` | React Query hooks + mutation hooks |
+| `ui/src/pages/admin/rbac/RbacPage.tsx` | ADMIN gate + tab navigation |
+| `ui/src/pages/admin/rbac/RbacPage.module.css` | All RBAC styles |
+| `ui/src/pages/admin/rbac/DashboardTab.tsx` | Stats + inheritance diagram |
+| `ui/src/pages/admin/rbac/UsersTab.tsx` | User split pane |
+| `ui/src/pages/admin/rbac/GroupsTab.tsx` | Group split pane |
+| `ui/src/pages/admin/rbac/RolesTab.tsx` | Role split pane |
+| `ui/src/pages/admin/rbac/components/EntityListPane.tsx` | Reusable filtered list |
+| `ui/src/pages/admin/rbac/components/EntityCard.tsx` | List row component |
+| `ui/src/pages/admin/rbac/components/EntityAvatar.tsx` | Avatar (circle/square) |
+| `ui/src/pages/admin/rbac/components/UserDetail.tsx` | User detail pane |
+| `ui/src/pages/admin/rbac/components/GroupDetail.tsx` | Group detail pane |
+| `ui/src/pages/admin/rbac/components/RoleDetail.tsx` | Role detail pane |
+| `ui/src/pages/admin/rbac/components/InheritanceChip.tsx` | Dashed chip + source |
+| `ui/src/pages/admin/rbac/components/GroupTree.tsx` | Indented hierarchy |
+| `ui/src/pages/admin/rbac/components/OidcBadge.tsx` | OIDC provider badge |
+| `ui/src/pages/admin/rbac/components/InheritanceDiagram.tsx` | Dashboard diagram |
+| `ui/src/pages/admin/rbac/components/InheritanceNote.tsx` | Explanation block |
+
+### Frontend — Modified Files
+| File | Change |
+|---|---|
+| `ui/src/router.tsx` | Add `/admin/rbac` lazy route |
+| `ui/src/components/layout/AppSidebar.tsx` | Add "User Management" to ADMIN_LINKS |
+
+---
+
+## Tasks
+
+### Task 1: Consolidate Flyway Migrations
+
+**Files:**
+- Create: `cameleer3-server-app/src/main/resources/db/migration/V1__init.sql`
+- Delete: `V1__extensions.sql` through `V10__audit_log.sql` (10 files)
+
+- [ ] **Step 1: Create consolidated V1__init.sql**
+
+Combine all existing migration content (V1–V10) into a single file, replacing the `users` table definition to drop `roles TEXT[]`, and adding the new RBAC tables. Order: extensions → users (new) → roles (with seeds) → groups → join tables → executions → processor_executions → agent_metrics → route_diagrams → oidc_config → continuous_aggregates → admin_thresholds → audit_log → indexes.
+
+```sql
+-- V1__init.sql — Consolidated schema for Cameleer3
+
+-- Extensions
+CREATE EXTENSION IF NOT EXISTS timescaledb;
+CREATE EXTENSION IF NOT EXISTS timescaledb_toolkit;
+
+-- ═══════════════════════════════════════════════════════════
+-- RBAC
+-- ═══════════════════════════════════════════════════════════
+
+CREATE TABLE users (
+    user_id      TEXT        PRIMARY KEY,
+    provider     TEXT        NOT NULL,
+    email        TEXT,
+    display_name TEXT,
+    created_at   TIMESTAMPTZ NOT NULL DEFAULT now(),
+    updated_at   TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE roles (
+    id            UUID        PRIMARY KEY DEFAULT gen_random_uuid(),
+    name          TEXT        NOT NULL UNIQUE,
+    description   TEXT        NOT NULL DEFAULT '',
+    scope         TEXT        NOT NULL DEFAULT 'custom',
+    system        BOOLEAN     NOT NULL DEFAULT false,
+    created_at    TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+INSERT INTO roles (id, name, description, scope, system) VALUES
+    ('00000000-0000-0000-0000-000000000001', 'AGENT',    'Agent registration and data ingestion',              'system-wide', true),
+    ('00000000-0000-0000-0000-000000000002', 'VIEWER',   'Read-only access to dashboards and data',            'system-wide', true),
+    ('00000000-0000-0000-0000-000000000003', 'OPERATOR', 'Operational commands (start/stop/configure agents)',  'system-wide', true),
+    ('00000000-0000-0000-0000-000000000004', 'ADMIN',    'Full administrative access',                         'system-wide', true);
+
+CREATE TABLE groups (
+    id              UUID        PRIMARY KEY DEFAULT gen_random_uuid(),
+    name            TEXT        NOT NULL UNIQUE,
+    parent_group_id UUID        REFERENCES groups(id) ON DELETE SET NULL,
+    created_at      TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE group_roles (
+    group_id UUID NOT NULL REFERENCES groups(id) ON DELETE CASCADE,
+    role_id  UUID NOT NULL REFERENCES roles(id) ON DELETE CASCADE,
+    PRIMARY KEY (group_id, role_id)
+);
+
+CREATE TABLE user_groups (
+    user_id  TEXT NOT NULL REFERENCES users(user_id) ON DELETE CASCADE,
+    group_id UUID NOT NULL REFERENCES groups(id) ON DELETE CASCADE,
+    PRIMARY KEY (user_id, group_id)
+);
+
+CREATE TABLE user_roles (
+    user_id TEXT NOT NULL REFERENCES users(user_id) ON DELETE CASCADE,
+    role_id UUID NOT NULL REFERENCES roles(id) ON DELETE CASCADE,
+    PRIMARY KEY (user_id, role_id)
+);
+
+CREATE INDEX idx_user_roles_user_id ON user_roles(user_id);
+CREATE INDEX idx_user_groups_user_id ON user_groups(user_id);
+CREATE INDEX idx_group_roles_group_id ON group_roles(group_id);
+CREATE INDEX idx_groups_parent ON groups(parent_group_id);
+
+-- ═══════════════════════════════════════════════════════════
+-- Execution data (TimescaleDB hypertables)
+-- ═══════════════════════════════════════════════════════════
+
+CREATE TABLE executions (
+    execution_id    TEXT        NOT NULL,
+    route_id        TEXT        NOT NULL,
+    agent_id        TEXT        NOT NULL,
+    group_name      TEXT        NOT NULL,
+    status          TEXT        NOT NULL,
+    correlation_id  TEXT,
+    exchange_id     TEXT,
+    start_time      TIMESTAMPTZ NOT NULL,
+    end_time        TIMESTAMPTZ,
+    duration_ms     BIGINT,
+    error_message   TEXT,
+    error_stacktrace TEXT,
+    diagram_content_hash TEXT,
+    created_at      TIMESTAMPTZ NOT NULL DEFAULT now(),
+    updated_at      TIMESTAMPTZ NOT NULL DEFAULT now(),
+    PRIMARY KEY (execution_id, start_time)
+);
+
+SELECT create_hypertable('executions', 'start_time', chunk_time_interval => INTERVAL '1 day');
+
+CREATE INDEX idx_executions_agent_time ON executions (agent_id, start_time DESC);
+CREATE INDEX idx_executions_route_time ON executions (route_id, start_time DESC);
+CREATE INDEX idx_executions_group_time ON executions (group_name, start_time DESC);
+CREATE INDEX idx_executions_correlation ON executions (correlation_id);
+
+CREATE TABLE processor_executions (
+    id                  BIGSERIAL,
+    execution_id        TEXT        NOT NULL,
+    processor_id        TEXT        NOT NULL,
+    processor_type      TEXT        NOT NULL,
+    diagram_node_id     TEXT,
+    group_name          TEXT        NOT NULL,
+    route_id            TEXT        NOT NULL,
+    depth               INT         NOT NULL,
+    parent_processor_id TEXT,
+    status              TEXT        NOT NULL,
+    start_time          TIMESTAMPTZ NOT NULL,
+    end_time            TIMESTAMPTZ,
+    duration_ms         BIGINT,
+    error_message       TEXT,
+    error_stacktrace    TEXT,
+    input_body          TEXT,
+    output_body         TEXT,
+    input_headers       JSONB,
+    output_headers      JSONB,
+    created_at          TIMESTAMPTZ NOT NULL DEFAULT now(),
+    UNIQUE (execution_id, processor_id, start_time)
+);
+
+SELECT create_hypertable('processor_executions', 'start_time', chunk_time_interval => INTERVAL '1 day');
+
+CREATE INDEX idx_proc_exec_execution ON processor_executions (execution_id);
+CREATE INDEX idx_proc_exec_type_time ON processor_executions (processor_type, start_time DESC);
+
+-- ═══════════════════════════════════════════════════════════
+-- Agent metrics
+-- ═══════════════════════════════════════════════════════════
+
+CREATE TABLE agent_metrics (
+    agent_id           TEXT             NOT NULL,
+    metric_name        TEXT             NOT NULL,
+    metric_value       DOUBLE PRECISION NOT NULL,
+    tags               JSONB,
+    collected_at       TIMESTAMPTZ      NOT NULL,
+    server_received_at TIMESTAMPTZ      NOT NULL DEFAULT now()
+);
+
+SELECT create_hypertable('agent_metrics', 'collected_at', chunk_time_interval => INTERVAL '1 day');
+
+CREATE INDEX idx_metrics_agent_name ON agent_metrics (agent_id, metric_name, collected_at DESC);
+
+-- ═══════════════════════════════════════════════════════════
+-- Route diagrams
+-- ═══════════════════════════════════════════════════════════
+
+CREATE TABLE route_diagrams (
+    content_hash TEXT        PRIMARY KEY,
+    route_id     TEXT        NOT NULL,
+    agent_id     TEXT        NOT NULL,
+    definition   TEXT        NOT NULL,
+    created_at   TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE INDEX idx_diagrams_route_agent ON route_diagrams (route_id, agent_id);
+
+-- ═══════════════════════════════════════════════════════════
+-- OIDC configuration
+-- ═══════════════════════════════════════════════════════════
+
+CREATE TABLE oidc_config (
+    config_id          TEXT        PRIMARY KEY DEFAULT 'default',
+    enabled            BOOLEAN     NOT NULL DEFAULT false,
+    issuer_uri         TEXT,
+    client_id          TEXT,
+    client_secret      TEXT,
+    roles_claim        TEXT,
+    default_roles      TEXT[]      NOT NULL DEFAULT '{}',
+    auto_signup        BOOLEAN     DEFAULT false,
+    display_name_claim TEXT,
+    updated_at         TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+-- ═══════════════════════════════════════════════════════════
+-- Continuous aggregates
+-- ═══════════════════════════════════════════════════════════
+
+CREATE MATERIALIZED VIEW stats_1m_all
+WITH (timescaledb.continuous, timescaledb.materialized_only = false) AS
+SELECT
+    time_bucket('1 minute', start_time) AS bucket,
+    COUNT(*) AS total_count,
+    COUNT(*) FILTER (WHERE status = 'FAILED') AS failed_count,
+    COUNT(*) FILTER (WHERE status = 'RUNNING') AS running_count,
+    SUM(duration_ms) AS duration_sum,
+    MAX(duration_ms) AS duration_max,
+    approx_percentile(0.99, percentile_agg(duration_ms::DOUBLE PRECISION)) AS p99_duration
+FROM executions
+WHERE status IS NOT NULL
+GROUP BY bucket
+WITH NO DATA;
+
+SELECT add_continuous_aggregate_policy('stats_1m_all',
+    start_offset => INTERVAL '1 hour',
+    end_offset   => INTERVAL '1 minute',
+    schedule_interval => INTERVAL '1 minute');
+
+CREATE MATERIALIZED VIEW stats_1m_app
+WITH (timescaledb.continuous, timescaledb.materialized_only = false) AS
+SELECT
+    time_bucket('1 minute', start_time) AS bucket,
+    group_name,
+    COUNT(*) AS total_count,
+    COUNT(*) FILTER (WHERE status = 'FAILED') AS failed_count,
+    COUNT(*) FILTER (WHERE status = 'RUNNING') AS running_count,
+    SUM(duration_ms) AS duration_sum,
+    MAX(duration_ms) AS duration_max,
+    approx_percentile(0.99, percentile_agg(duration_ms::DOUBLE PRECISION)) AS p99_duration
+FROM executions
+WHERE status IS NOT NULL
+GROUP BY bucket, group_name
+WITH NO DATA;
+
+SELECT add_continuous_aggregate_policy('stats_1m_app',
+    start_offset => INTERVAL '1 hour',
+    end_offset   => INTERVAL '1 minute',
+    schedule_interval => INTERVAL '1 minute');
+
+CREATE MATERIALIZED VIEW stats_1m_route
+WITH (timescaledb.continuous, timescaledb.materialized_only = false) AS
+SELECT
+    time_bucket('1 minute', start_time) AS bucket,
+    group_name,
+    route_id,
+    COUNT(*) AS total_count,
+    COUNT(*) FILTER (WHERE status = 'FAILED') AS failed_count,
+    COUNT(*) FILTER (WHERE status = 'RUNNING') AS running_count,
+    SUM(duration_ms) AS duration_sum,
+    MAX(duration_ms) AS duration_max,
+    approx_percentile(0.99, percentile_agg(duration_ms::DOUBLE PRECISION)) AS p99_duration
+FROM executions
+WHERE status IS NOT NULL
+GROUP BY bucket, group_name, route_id
+WITH NO DATA;
+
+SELECT add_continuous_aggregate_policy('stats_1m_route',
+    start_offset => INTERVAL '1 hour',
+    end_offset   => INTERVAL '1 minute',
+    schedule_interval => INTERVAL '1 minute');
+
+CREATE MATERIALIZED VIEW stats_1m_processor
+WITH (timescaledb.continuous, timescaledb.materialized_only = false) AS
+SELECT
+    time_bucket('1 minute', start_time) AS bucket,
+    group_name,
+    route_id,
+    processor_type,
+    COUNT(*) AS total_count,
+    COUNT(*) FILTER (WHERE status = 'FAILED') AS failed_count,
+    SUM(duration_ms) AS duration_sum,
+    MAX(duration_ms) AS duration_max,
+    approx_percentile(0.99, percentile_agg(duration_ms::DOUBLE PRECISION)) AS p99_duration
+FROM processor_executions
+GROUP BY bucket, group_name, route_id, processor_type
+WITH NO DATA;
+
+SELECT add_continuous_aggregate_policy('stats_1m_processor',
+    start_offset => INTERVAL '1 hour',
+    end_offset   => INTERVAL '1 minute',
+    schedule_interval => INTERVAL '1 minute');
+
+-- ═══════════════════════════════════════════════════════════
+-- Admin
+-- ═══════════════════════════════════════════════════════════
+
+CREATE TABLE admin_thresholds (
+    id          INTEGER PRIMARY KEY DEFAULT 1,
+    config      JSONB NOT NULL DEFAULT '{}',
+    updated_at  TIMESTAMPTZ NOT NULL DEFAULT now(),
+    updated_by  TEXT NOT NULL,
+    CONSTRAINT  single_row CHECK (id = 1)
+);
+
+CREATE TABLE audit_log (
+    id          BIGSERIAL PRIMARY KEY,
+    timestamp   TIMESTAMPTZ NOT NULL DEFAULT now(),
+    username    TEXT NOT NULL,
+    action      TEXT NOT NULL,
+    category    TEXT NOT NULL,
+    target      TEXT,
+    detail      JSONB,
+    result      TEXT NOT NULL,
+    ip_address  TEXT,
+    user_agent  TEXT
+);
+
+CREATE INDEX idx_audit_log_timestamp ON audit_log (timestamp DESC);
+CREATE INDEX idx_audit_log_username ON audit_log (username);
+CREATE INDEX idx_audit_log_category ON audit_log (category);
+CREATE INDEX idx_audit_log_action ON audit_log (action);
+CREATE INDEX idx_audit_log_target ON audit_log (target);
+```
+
+- [ ] **Step 2: Delete old migration files**
+
+```bash
+cd cameleer3-server-app/src/main/resources/db/migration
+rm V2__executions.sql V3__processor_executions.sql V4__agent_metrics.sql V5__route_diagrams.sql V6__users.sql V7__oidc_config.sql V8__continuous_aggregates.sql V9__admin_thresholds.sql V10__audit_log.sql
+# Keep V1__extensions.sql but it's been replaced by V1__init.sql — rename the old one first
+mv V1__extensions.sql V1__extensions.sql.bak
+```
+
+Actually: the new file is `V1__init.sql`. Flyway requires unique version numbers. Since the old `V1__extensions.sql` exists, rename the new file to match:
+
+Delete ALL old files (V1 through V10). The single new `V1__init.sql` replaces everything.
+
+```bash
+rm V1__extensions.sql V2__executions.sql V3__processor_executions.sql V4__agent_metrics.sql V5__route_diagrams.sql V6__users.sql V7__oidc_config.sql V8__continuous_aggregates.sql V9__admin_thresholds.sql V10__audit_log.sql
+```
+
+- [ ] **Step 3: Verify the migration compiles**
+
+```bash
+cd /c/Users/Hendrik/Documents/projects/cameleer3-server
+mvn clean compile -pl cameleer3-server-app
+```
+
+Expected: BUILD SUCCESS (Flyway doesn't run at compile time, just packaging)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add -A cameleer3-server-app/src/main/resources/db/migration/
+git commit -m "refactor: consolidate V1-V10 Flyway migrations into single V1__init.sql
+
+Add RBAC tables (roles, groups, group_roles, user_groups, user_roles)
+with system role seeds and join indexes. Drop users.roles TEXT[] column."
+```
+
+---
+
+### Task 2: RBAC Domain Model (core module)
+
+**Files:**
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/SystemRole.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/UserDetail.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/GroupDetail.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RoleDetail.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/UserSummary.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/GroupSummary.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RoleSummary.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RbacStats.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/GroupRepository.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RoleRepository.java`
+- Create: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/rbac/RbacService.java`
+- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/security/UserInfo.java`
+- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/security/UserRepository.java`
+- Modify: `cameleer3-server-core/src/main/java/com/cameleer3/server/core/admin/AuditCategory.java`
+
+- [ ] **Step 1: Create SystemRole constants**
+
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.util.Map;
+import java.util.Set;
+import java.util.UUID;
+
+public final class SystemRole {
+    private SystemRole() {}
+
+    public static final UUID AGENT_ID    = UUID.fromString("00000000-0000-0000-0000-000000000001");
+    public static final UUID VIEWER_ID   = UUID.fromString("00000000-0000-0000-0000-000000000002");
+    public static final UUID OPERATOR_ID = UUID.fromString("00000000-0000-0000-0000-000000000003");
+    public static final UUID ADMIN_ID    = UUID.fromString("00000000-0000-0000-0000-000000000004");
+
+    public static final Set<UUID> IDS = Set.of(AGENT_ID, VIEWER_ID, OPERATOR_ID, ADMIN_ID);
+
+    public static final Map<String, UUID> BY_NAME = Map.of(
+            "AGENT", AGENT_ID,
+            "VIEWER", VIEWER_ID,
+            "OPERATOR", OPERATOR_ID,
+            "ADMIN", ADMIN_ID
+    );
+
+    public static boolean isSystem(UUID id) {
+        return IDS.contains(id);
+    }
+}
+```
+
+- [ ] **Step 2: Create summary records**
+
+`UserSummary.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+public record UserSummary(String userId, String displayName, String provider) {}
+```
+
+`GroupSummary.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.util.UUID;
+
+public record GroupSummary(UUID id, String name) {}
+```
+
+`RoleSummary.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.util.UUID;
+
+public record RoleSummary(UUID id, String name, boolean system, String source) {}
+```
+
+`RbacStats.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+public record RbacStats(int userCount, int activeUserCount, int groupCount, int maxGroupDepth, int roleCount) {}
+```
+
+- [ ] **Step 3: Create detail records**
+
+`UserDetail.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.time.Instant;
+import java.util.List;
+
+public record UserDetail(
+        String userId,
+        String provider,
+        String email,
+        String displayName,
+        Instant createdAt,
+        List<RoleSummary> directRoles,
+        List<GroupSummary> directGroups,
+        List<RoleSummary> effectiveRoles,
+        List<GroupSummary> effectiveGroups
+) {}
+```
+
+`GroupDetail.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.time.Instant;
+import java.util.List;
+import java.util.UUID;
+
+public record GroupDetail(
+        UUID id,
+        String name,
+        UUID parentGroupId,
+        Instant createdAt,
+        List<RoleSummary> directRoles,
+        List<RoleSummary> effectiveRoles,
+        List<UserSummary> members,
+        List<GroupSummary> childGroups
+) {}
+```
+
+`RoleDetail.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.time.Instant;
+import java.util.List;
+import java.util.UUID;
+
+public record RoleDetail(
+        UUID id,
+        String name,
+        String description,
+        String scope,
+        boolean system,
+        Instant createdAt,
+        List<GroupSummary> assignedGroups,
+        List<UserSummary> directUsers,
+        List<UserSummary> effectivePrincipals
+) {}
+```
+
+- [ ] **Step 4: Create repository interfaces**
+
+`GroupRepository.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+public interface GroupRepository {
+    List<GroupSummary> findAll();
+    Optional<GroupDetail> findById(UUID id);
+    UUID create(String name, UUID parentGroupId);
+    void update(UUID id, String name, UUID parentGroupId);
+    void delete(UUID id);
+    void addRole(UUID groupId, UUID roleId);
+    void removeRole(UUID groupId, UUID roleId);
+    List<GroupSummary> findChildGroups(UUID parentId);
+    List<GroupSummary> findAncestorChain(UUID groupId);
+}
+```
+
+`RoleRepository.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+public interface RoleRepository {
+    List<RoleDetail> findAll();
+    Optional<RoleDetail> findById(UUID id);
+    UUID create(String name, String description, String scope);
+    void update(UUID id, String name, String description, String scope);
+    void delete(UUID id);
+}
+```
+
+`RbacService.java`:
+```java
+package com.cameleer3.server.core.rbac;
+
+import java.util.List;
+import java.util.UUID;
+
+public interface RbacService {
+    List<UserDetail> listUsers();
+    UserDetail getUser(String userId);
+    void assignRoleToUser(String userId, UUID roleId);
+    void removeRoleFromUser(String userId, UUID roleId);
+    void addUserToGroup(String userId, UUID groupId);
+    void removeUserFromGroup(String userId, UUID groupId);
+
+    List<RoleSummary> getEffectiveRolesForUser(String userId);
+    List<GroupSummary> getEffectiveGroupsForUser(String userId);
+    List<RoleSummary> getEffectiveRolesForGroup(UUID groupId);
+    List<UserSummary> getEffectivePrincipalsForRole(UUID roleId);
+
+    /** Returns system role names for JWT/auth — only system roles. */
+    List<String> getSystemRoleNames(String userId);
+
+    RbacStats getStats();
+}
+```
+
+- [ ] **Step 5: Update UserInfo — remove roles field**
+
+In `cameleer3-server-core/src/main/java/com/cameleer3/server/core/security/UserInfo.java`, change to:
+
+```java
+package com.cameleer3.server.core.security;
+
+import java.time.Instant;
+
+public record UserInfo(
+        String userId,
+        String provider,
+        String email,
+        String displayName,
+        Instant createdAt
+) {}
+```
+
+- [ ] **Step 6: Update UserRepository interface**
+
+In `cameleer3-server-core/src/main/java/com/cameleer3/server/core/security/UserRepository.java`, change to:
+
+```java
+package com.cameleer3.server.core.security;
+
+import java.util.List;
+import java.util.Optional;
+
+public interface UserRepository {
+    Optional<UserInfo> findById(String userId);
+    List<UserInfo> findAll();
+    void upsert(UserInfo user);
+    void delete(String userId);
+}
+```
+
+Remove `updateRoles` method (role management moves to `RbacService`).
+
+- [ ] **Step 7: Add RBAC audit category**
+
+In `cameleer3-server-core/src/main/java/com/cameleer3/server/core/admin/AuditCategory.java`, add `RBAC`:
+
+```java
+public enum AuditCategory {
+    INFRA, AUTH, USER_MGMT, CONFIG, RBAC
+}
+```
+
+- [ ] **Step 8: Verify core module compiles**
+
+```bash
+mvn clean compile -pl cameleer3-server-core
+```
+
+Expected: BUILD SUCCESS
+
+**Do NOT commit individually** — Tasks 2–6 form an atomic batch. Commit after Task 6.
+
+---
+
+### Task 3: PostgresUserRepository — Adapt to New Schema
+
+**Files:**
+- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresUserRepository.java`
+
+- [ ] **Step 1: Rewrite PostgresUserRepository**
+
+The `upsert` no longer writes roles (no `roles` column). The `mapUser` no longer reads a roles array. Remove `updateRoles` method.
+
+```java
+package com.cameleer3.server.app.storage;
+
+import com.cameleer3.server.core.security.UserInfo;
+import com.cameleer3.server.core.security.UserRepository;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Repository;
+
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.util.List;
+import java.util.Optional;
+
+@Repository
+public class PostgresUserRepository implements UserRepository {
+
+    private final JdbcTemplate jdbc;
+
+    public PostgresUserRepository(JdbcTemplate jdbc) {
+        this.jdbc = jdbc;
+    }
+
+    @Override
+    public Optional<UserInfo> findById(String userId) {
+        var list = jdbc.query(
+                "SELECT user_id, provider, email, display_name, created_at FROM users WHERE user_id = ?",
+                (rs, _) -> mapUser(rs), userId);
+        return list.isEmpty() ? Optional.empty() : Optional.of(list.getFirst());
+    }
+
+    @Override
+    public List<UserInfo> findAll() {
+        return jdbc.query(
+                "SELECT user_id, provider, email, display_name, created_at FROM users ORDER BY user_id",
+                (rs, _) -> mapUser(rs));
+    }
+
+    @Override
+    public void upsert(UserInfo user) {
+        jdbc.update("""
+                INSERT INTO users (user_id, provider, email, display_name, created_at, updated_at)
+                VALUES (?, ?, ?, ?, ?, now())
+                ON CONFLICT (user_id) DO UPDATE SET
+                    provider = EXCLUDED.provider,
+                    email = EXCLUDED.email,
+                    display_name = EXCLUDED.display_name,
+                    updated_at = now()
+                """,
+                user.userId(), user.provider(), user.email(), user.displayName(), user.createdAt());
+    }
+
+    @Override
+    public void delete(String userId) {
+        jdbc.update("DELETE FROM users WHERE user_id = ?", userId);
+    }
+
+    private UserInfo mapUser(ResultSet rs) throws SQLException {
+        return new UserInfo(
+                rs.getString("user_id"),
+                rs.getString("provider"),
+                rs.getString("email"),
+                rs.getString("display_name"),
+                rs.getTimestamp("created_at").toInstant()
+        );
+    }
+}
+```
+
+**Do NOT commit individually** — Tasks 2–6 form an atomic batch. Commit after Task 6 when the full project compiles.
+
+---
+
+### Task 4: PostgresGroupRepository and PostgresRoleRepository
+
+**Files:**
+- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresGroupRepository.java`
+- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/storage/PostgresRoleRepository.java`
+
+- [ ] **Step 1: Implement PostgresGroupRepository**
+
+```java
+package com.cameleer3.server.app.storage;
+
+import com.cameleer3.server.core.rbac.*;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Repository;
+
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.util.*;
+
+@Repository
+public class PostgresGroupRepository implements GroupRepository {
+
+    private final JdbcTemplate jdbc;
+
+    public PostgresGroupRepository(JdbcTemplate jdbc) {
+        this.jdbc = jdbc;
+    }
+
+    @Override
+    public List<GroupSummary> findAll() {
+        return jdbc.query("SELECT id, name FROM groups ORDER BY name",
+                (rs, _) -> new GroupSummary(rs.getObject("id", UUID.class), rs.getString("name")));
+    }
+
+    @Override
+    public Optional<GroupDetail> findById(UUID id) {
+        var rows = jdbc.query(
+                "SELECT id, name, parent_group_id, created_at FROM groups WHERE id = ?",
+                (rs, _) -> new GroupDetail(
+                        rs.getObject("id", UUID.class),
+                        rs.getString("name"),
+                        rs.getObject("parent_group_id", UUID.class),
+                        rs.getTimestamp("created_at").toInstant(),
+                        List.of(), List.of(), List.of(), List.of()
+                ), id);
+        if (rows.isEmpty()) return Optional.empty();
+        var g = rows.getFirst();
+
+        List<RoleSummary> directRoles = jdbc.query("""
+                SELECT r.id, r.name, r.system FROM group_roles gr
+                JOIN roles r ON r.id = gr.role_id WHERE gr.group_id = ?
+                """, (rs, _) -> new RoleSummary(rs.getObject("id", UUID.class),
+                        rs.getString("name"), rs.getBoolean("system"), "direct"), id);
+
+        List<UserSummary> members = jdbc.query("""
+                SELECT u.user_id, u.display_name, u.provider FROM user_groups ug
+                JOIN users u ON u.user_id = ug.user_id WHERE ug.group_id = ?
+                """, (rs, _) -> new UserSummary(rs.getString("user_id"),
+                        rs.getString("display_name"), rs.getString("provider")), id);
+
+        List<GroupSummary> children = findChildGroups(id);
+
+        return Optional.of(new GroupDetail(g.id(), g.name(), g.parentGroupId(),
+                g.createdAt(), directRoles, List.of(), members, children));
+    }
+
+    @Override
+    public UUID create(String name, UUID parentGroupId) {
+        UUID id = UUID.randomUUID();
+        jdbc.update("INSERT INTO groups (id, name, parent_group_id) VALUES (?, ?, ?)",
+                id, name, parentGroupId);
+        return id;
+    }
+
+    @Override
+    public void update(UUID id, String name, UUID parentGroupId) {
+        jdbc.update("UPDATE groups SET name = COALESCE(?, name), parent_group_id = ? WHERE id = ?",
+                name, parentGroupId, id);
+    }
+
+    @Override
+    public void delete(UUID id) {
+        jdbc.update("DELETE FROM groups WHERE id = ?", id);
+    }
+
+    @Override
+    public void addRole(UUID groupId, UUID roleId) {
+        jdbc.update("INSERT INTO group_roles (group_id, role_id) VALUES (?, ?) ON CONFLICT DO NOTHING",
+                groupId, roleId);
+    }
+
+    @Override
+    public void removeRole(UUID groupId, UUID roleId) {
+        jdbc.update("DELETE FROM group_roles WHERE group_id = ? AND role_id = ?", groupId, roleId);
+    }
+
+    @Override
+    public List<GroupSummary> findChildGroups(UUID parentId) {
+        return jdbc.query("SELECT id, name FROM groups WHERE parent_group_id = ? ORDER BY name",
+                (rs, _) -> new GroupSummary(rs.getObject("id", UUID.class), rs.getString("name")),
+                parentId);
+    }
+
+    @Override
+    public List<GroupSummary> findAncestorChain(UUID groupId) {
+        // Walk parent chain iteratively (max depth is small)
+        List<GroupSummary> chain = new ArrayList<>();
+        UUID current = groupId;
+        Set<UUID> visited = new HashSet<>();
+        while (current != null && visited.add(current)) {
+            UUID id = current;
+            var rows = jdbc.query(
+                    "SELECT id, name, parent_group_id FROM groups WHERE id = ?",
+                    (rs, _) -> new Object[]{
+                            new GroupSummary(rs.getObject("id", UUID.class), rs.getString("name")),
+                            rs.getObject("parent_group_id", UUID.class)
+                    }, id);
+            if (rows.isEmpty()) break;
+            chain.add((GroupSummary) rows.getFirst()[0]);
+            current = (UUID) rows.getFirst()[1];
+        }
+        Collections.reverse(chain); // root first
+        return chain;
+    }
+}
+```
+
+- [ ] **Step 2: Implement PostgresRoleRepository**
+
+```java
+package com.cameleer3.server.app.storage;
+
+import com.cameleer3.server.core.rbac.*;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Repository;
+
+import java.util.*;
+
+@Repository
+public class PostgresRoleRepository implements RoleRepository {
+
+    private final JdbcTemplate jdbc;
+
+    public PostgresRoleRepository(JdbcTemplate jdbc) {
+        this.jdbc = jdbc;
+    }
+
+    @Override
+    public List<RoleDetail> findAll() {
+        return jdbc.query("""
+                SELECT id, name, description, scope, system, created_at FROM roles ORDER BY system DESC, name
+                """, (rs, _) -> new RoleDetail(
+                rs.getObject("id", UUID.class),
+                rs.getString("name"),
+                rs.getString("description"),
+                rs.getString("scope"),
+                rs.getBoolean("system"),
+                rs.getTimestamp("created_at").toInstant(),
+                List.of(), List.of(), List.of()
+        ));
+    }
+
+    @Override
+    public Optional<RoleDetail> findById(UUID id) {
+        var rows = jdbc.query("""
+                SELECT id, name, description, scope, system, created_at FROM roles WHERE id = ?
+                """, (rs, _) -> new RoleDetail(
+                rs.getObject("id", UUID.class),
+                rs.getString("name"),
+                rs.getString("description"),
+                rs.getString("scope"),
+                rs.getBoolean("system"),
+                rs.getTimestamp("created_at").toInstant(),
+                List.of(), List.of(), List.of()
+        ), id);
+        if (rows.isEmpty()) return Optional.empty();
+        var r = rows.getFirst();
+
+        List<GroupSummary> assignedGroups = jdbc.query("""
+                SELECT g.id, g.name FROM group_roles gr
+                JOIN groups g ON g.id = gr.group_id WHERE gr.role_id = ?
+                """, (rs, _) -> new GroupSummary(rs.getObject("id", UUID.class),
+                rs.getString("name")), id);
+
+        List<UserSummary> directUsers = jdbc.query("""
+                SELECT u.user_id, u.display_name, u.provider FROM user_roles ur
+                JOIN users u ON u.user_id = ur.user_id WHERE ur.role_id = ?
+                """, (rs, _) -> new UserSummary(rs.getString("user_id"),
+                rs.getString("display_name"), rs.getString("provider")), id);
+
+        return Optional.of(new RoleDetail(r.id(), r.name(), r.description(),
+                r.scope(), r.system(), r.createdAt(), assignedGroups, directUsers, List.of()));
+    }
+
+    @Override
+    public UUID create(String name, String description, String scope) {
+        UUID id = UUID.randomUUID();
+        jdbc.update("INSERT INTO roles (id, name, description, scope, system) VALUES (?, ?, ?, ?, false)",
+                id, name, description, scope);
+        return id;
+    }
+
+    @Override
+    public void update(UUID id, String name, String description, String scope) {
+        jdbc.update("""
+                UPDATE roles SET name = COALESCE(?, name), description = COALESCE(?, description),
+                scope = COALESCE(?, scope) WHERE id = ? AND system = false
+                """, name, description, scope, id);
+    }
+
+    @Override
+    public void delete(UUID id) {
+        jdbc.update("DELETE FROM roles WHERE id = ? AND system = false", id);
+    }
+}
+```
+
+- [ ] **Step 3: Verify compile**
+
+```bash
+mvn clean compile -pl cameleer3-server-app
+```
+
+Expected: May still have errors from files referencing `UserInfo.roles()` — those are fixed in Task 6.
+
+**Do NOT commit individually** — Tasks 2–6 form an atomic batch. Commit after Task 6 when the full project compiles.
+
+---
+
+### Task 5: RbacServiceImpl — Inheritance Logic
+
+**Files:**
+- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/rbac/RbacServiceImpl.java`
+
+- [ ] **Step 1: Implement RbacServiceImpl**
+
+This is the core service that computes inheritance. It reads from `user_roles`, `user_groups`, `group_roles`, and `groups` tables to compute effective roles/groups.
+
+```java
+package com.cameleer3.server.app.rbac;
+
+import com.cameleer3.server.core.rbac.*;
+import com.cameleer3.server.core.security.UserInfo;
+import com.cameleer3.server.core.security.UserRepository;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+import java.util.*;
+import java.util.stream.Collectors;
+
+@Service
+public class RbacServiceImpl implements RbacService {
+
+    private final JdbcTemplate jdbc;
+    private final UserRepository userRepository;
+    private final GroupRepository groupRepository;
+    private final RoleRepository roleRepository;
+
+    public RbacServiceImpl(JdbcTemplate jdbc, UserRepository userRepository,
+                           GroupRepository groupRepository, RoleRepository roleRepository) {
+        this.jdbc = jdbc;
+        this.userRepository = userRepository;
+        this.groupRepository = groupRepository;
+        this.roleRepository = roleRepository;
+    }
+
+    @Override
+    public List<UserDetail> listUsers() {
+        return userRepository.findAll().stream()
+                .map(u -> buildUserDetail(u))
+                .toList();
+    }
+
+    @Override
+    public UserDetail getUser(String userId) {
+        UserInfo user = userRepository.findById(userId).orElse(null);
+        if (user == null) return null;
+        return buildUserDetail(user);
+    }
+
+    private UserDetail buildUserDetail(UserInfo user) {
+        List<RoleSummary> directRoles = getDirectRolesForUser(user.userId());
+        List<GroupSummary> directGroups = getDirectGroupsForUser(user.userId());
+        List<RoleSummary> effectiveRoles = getEffectiveRolesForUser(user.userId());
+        List<GroupSummary> effectiveGroups = getEffectiveGroupsForUser(user.userId());
+        return new UserDetail(user.userId(), user.provider(), user.email(),
+                user.displayName(), user.createdAt(),
+                directRoles, directGroups, effectiveRoles, effectiveGroups);
+    }
+
+    @Override
+    public void assignRoleToUser(String userId, UUID roleId) {
+        jdbc.update("INSERT INTO user_roles (user_id, role_id) VALUES (?, ?) ON CONFLICT DO NOTHING",
+                userId, roleId);
+    }
+
+    @Override
+    public void removeRoleFromUser(String userId, UUID roleId) {
+        jdbc.update("DELETE FROM user_roles WHERE user_id = ? AND role_id = ?", userId, roleId);
+    }
+
+    @Override
+    public void addUserToGroup(String userId, UUID groupId) {
+        jdbc.update("INSERT INTO user_groups (user_id, group_id) VALUES (?, ?) ON CONFLICT DO NOTHING",
+                userId, groupId);
+    }
+
+    @Override
+    public void removeUserFromGroup(String userId, UUID groupId) {
+        jdbc.update("DELETE FROM user_groups WHERE user_id = ? AND group_id = ?", userId, groupId);
+    }
+
+    @Override
+    public List<RoleSummary> getEffectiveRolesForUser(String userId) {
+        // 1. Direct roles
+        List<RoleSummary> direct = getDirectRolesForUser(userId);
+
+        // 2. Roles inherited from groups
+        List<GroupSummary> effectiveGroups = getEffectiveGroupsForUser(userId);
+        Map<UUID, RoleSummary> roleMap = new LinkedHashMap<>();
+        for (RoleSummary r : direct) {
+            roleMap.put(r.id(), r);
+        }
+        for (GroupSummary group : effectiveGroups) {
+            List<RoleSummary> groupRoles = jdbc.query("""
+                    SELECT r.id, r.name, r.system FROM group_roles gr
+                    JOIN roles r ON r.id = gr.role_id WHERE gr.group_id = ?
+                    """, (rs, _) -> new RoleSummary(
+                    rs.getObject("id", UUID.class),
+                    rs.getString("name"),
+                    rs.getBoolean("system"),
+                    group.name()
+            ), group.id());
+            for (RoleSummary r : groupRoles) {
+                roleMap.putIfAbsent(r.id(), r);
+            }
+        }
+        return new ArrayList<>(roleMap.values());
+    }
+
+    @Override
+    public List<GroupSummary> getEffectiveGroupsForUser(String userId) {
+        List<GroupSummary> directGroups = getDirectGroupsForUser(userId);
+        Set<UUID> visited = new LinkedHashSet<>();
+        List<GroupSummary> all = new ArrayList<>();
+        for (GroupSummary g : directGroups) {
+            collectAncestors(g.id(), visited, all);
+        }
+        return all;
+    }
+
+    private void collectAncestors(UUID groupId, Set<UUID> visited, List<GroupSummary> result) {
+        if (!visited.add(groupId)) return;
+        var rows = jdbc.query("SELECT id, name, parent_group_id FROM groups WHERE id = ?",
+                (rs, _) -> new Object[]{
+                        new GroupSummary(rs.getObject("id", UUID.class), rs.getString("name")),
+                        rs.getObject("parent_group_id", UUID.class)
+                }, groupId);
+        if (rows.isEmpty()) return;
+        result.add((GroupSummary) rows.getFirst()[0]);
+        UUID parentId = (UUID) rows.getFirst()[1];
+        if (parentId != null) {
+            collectAncestors(parentId, visited, result);
+        }
+    }
+
+    @Override
+    public List<RoleSummary> getEffectiveRolesForGroup(UUID groupId) {
+        // Direct roles on group
+        List<RoleSummary> direct = jdbc.query("""
+                SELECT r.id, r.name, r.system FROM group_roles gr
+                JOIN roles r ON r.id = gr.role_id WHERE gr.group_id = ?
+                """, (rs, _) -> new RoleSummary(rs.getObject("id", UUID.class),
+                rs.getString("name"), rs.getBoolean("system"), "direct"), groupId);
+
+        // Walk parent chain
+        Map<UUID, RoleSummary> roleMap = new LinkedHashMap<>();
+        for (RoleSummary r : direct) roleMap.put(r.id(), r);
+
+        List<GroupSummary> ancestors = groupRepository.findAncestorChain(groupId);
+        // ancestors includes self — skip self, iterate parents
+        for (GroupSummary ancestor : ancestors) {
+            if (ancestor.id().equals(groupId)) continue;
+            List<RoleSummary> parentRoles = jdbc.query("""
+                    SELECT r.id, r.name, r.system FROM group_roles gr
+                    JOIN roles r ON r.id = gr.role_id WHERE gr.group_id = ?
+                    """, (rs, _) -> new RoleSummary(rs.getObject("id", UUID.class),
+                    rs.getString("name"), rs.getBoolean("system"),
+                    ancestor.name()), ancestor.id());
+            for (RoleSummary r : parentRoles) roleMap.putIfAbsent(r.id(), r);
+        }
+        return new ArrayList<>(roleMap.values());
+    }
+
+    @Override
+    public List<UserSummary> getEffectivePrincipalsForRole(UUID roleId) {
+        // Users with direct assignment
+        Set<String> seen = new LinkedHashSet<>();
+        List<UserSummary> result = new ArrayList<>();
+
+        List<UserSummary> direct = jdbc.query("""
+                SELECT u.user_id, u.display_name, u.provider FROM user_roles ur
+                JOIN users u ON u.user_id = ur.user_id WHERE ur.role_id = ?
+                """, (rs, _) -> new UserSummary(rs.getString("user_id"),
+                rs.getString("display_name"), rs.getString("provider")), roleId);
+        for (UserSummary u : direct) {
+            if (seen.add(u.userId())) result.add(u);
+        }
+
+        // Users in groups that have this role (transitively)
+        // Find all groups with this role directly
+        List<UUID> groupsWithRole = jdbc.query(
+                "SELECT group_id FROM group_roles WHERE role_id = ?",
+                (rs, _) -> rs.getObject("group_id", UUID.class), roleId);
+
+        // For each group, find all descendant groups + self, then their members
+        Set<UUID> allGroups = new LinkedHashSet<>(groupsWithRole);
+        for (UUID gid : groupsWithRole) {
+            collectDescendants(gid, allGroups);
+        }
+        for (UUID gid : allGroups) {
+            List<UserSummary> members = jdbc.query("""
+                    SELECT u.user_id, u.display_name, u.provider FROM user_groups ug
+                    JOIN users u ON u.user_id = ug.user_id WHERE ug.group_id = ?
+                    """, (rs, _) -> new UserSummary(rs.getString("user_id"),
+                    rs.getString("display_name"), rs.getString("provider")), gid);
+            for (UserSummary u : members) {
+                if (seen.add(u.userId())) result.add(u);
+            }
+        }
+        return result;
+    }
+
+    private void collectDescendants(UUID groupId, Set<UUID> result) {
+        List<UUID> children = jdbc.query(
+                "SELECT id FROM groups WHERE parent_group_id = ?",
+                (rs, _) -> rs.getObject("id", UUID.class), groupId);
+        for (UUID child : children) {
+            if (result.add(child)) {
+                collectDescendants(child, result);
+            }
+        }
+    }
+
+    @Override
+    public List<String> getSystemRoleNames(String userId) {
+        // Uses effective roles (direct + inherited via groups) filtered to system roles
+        return getEffectiveRolesForUser(userId).stream()
+                .filter(RoleSummary::system)
+                .map(RoleSummary::name)
+                .toList();
+    }
+
+    @Override
+    public RbacStats getStats() {
+        int userCount = jdbc.queryForObject("SELECT COUNT(*) FROM users", Integer.class);
+        // "active" = users who have at least one role assigned
+        int activeUserCount = jdbc.queryForObject(
+                "SELECT COUNT(DISTINCT user_id) FROM user_roles", Integer.class);
+        int groupCount = jdbc.queryForObject("SELECT COUNT(*) FROM groups", Integer.class);
+        int roleCount = jdbc.queryForObject("SELECT COUNT(*) FROM roles", Integer.class);
+        int maxDepth = computeMaxGroupDepth();
+        return new RbacStats(userCount, activeUserCount, groupCount, maxDepth, roleCount);
+    }
+
+    private int computeMaxGroupDepth() {
+        // Find all root groups and walk down
+        List<UUID> roots = jdbc.query(
+                "SELECT id FROM groups WHERE parent_group_id IS NULL",
+                (rs, _) -> rs.getObject("id", UUID.class));
+        int max = 0;
+        for (UUID root : roots) {
+            max = Math.max(max, measureDepth(root, 1));
+        }
+        return max;
+    }
+
+    private int measureDepth(UUID groupId, int currentDepth) {
+        List<UUID> children = jdbc.query(
+                "SELECT id FROM groups WHERE parent_group_id = ?",
+                (rs, _) -> rs.getObject("id", UUID.class), groupId);
+        if (children.isEmpty()) return currentDepth;
+        int max = currentDepth;
+        for (UUID child : children) {
+            max = Math.max(max, measureDepth(child, currentDepth + 1));
+        }
+        return max;
+    }
+
+    private List<RoleSummary> getDirectRolesForUser(String userId) {
+        return jdbc.query("""
+                SELECT r.id, r.name, r.system FROM user_roles ur
+                JOIN roles r ON r.id = ur.role_id WHERE ur.user_id = ?
+                """, (rs, _) -> new RoleSummary(rs.getObject("id", UUID.class),
+                rs.getString("name"), rs.getBoolean("system"), "direct"), userId);
+    }
+
+    private List<GroupSummary> getDirectGroupsForUser(String userId) {
+        return jdbc.query("""
+                SELECT g.id, g.name FROM user_groups ug
+                JOIN groups g ON g.id = ug.group_id WHERE ug.user_id = ?
+                """, (rs, _) -> new GroupSummary(rs.getObject("id", UUID.class),
+                rs.getString("name")), userId);
+    }
+}
+```
+
+**Do NOT commit individually** — Tasks 2–6 form an atomic batch. Commit after Task 6 when the full project compiles.
+
+---
+
+### Task 6: Auth Integration — Update Login and OIDC Flows
+
+**Files:**
+- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/security/UiAuthController.java`
+- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/security/OidcAuthController.java`
+- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/AgentRegistrationController.java`
+
+These controllers currently embed roles in `UserInfo` and pass them to JWT creation. After the change, they must:
+1. Create/upsert the `UserInfo` (without roles)
+2. Assign roles via `RbacService.assignRoleToUser()`
+3. Read system roles via `RbacService.getSystemRoleNames()` for JWT creation
+
+- [ ] **Step 1: Update UiAuthController**
+
+Key changes in `login()`:
+- Remove `List<String> roles = List.of("ADMIN")`
+- Upsert `UserInfo` without roles
+- Assign ADMIN role via `rbacService.assignRoleToUser(subject, SystemRole.ADMIN_ID)`
+- Read roles from `rbacService.getSystemRoleNames(subject)` for JWT
+
+Key changes in `refresh()`:
+- Roles still come from the refresh token JWT claims (no DB read needed during refresh)
+- No change needed here since refresh preserves existing claims
+
+Read the actual file to determine exact line changes, then apply edits. The `RbacService` and `SystemRole` need to be injected.
+
+- [ ] **Step 2: Update OidcAuthController**
+
+Key changes in `callback()`:
+- After upserting `UserInfo` (without roles), resolve roles:
+  - Existing user: read from `rbacService.getSystemRoleNames(userId)`
+  - New user with OIDC claims: map claim role names to system role IDs, call `rbacService.assignRoleToUser()` for each
+  - New user without claims: use `config.defaultRoles()`, map to IDs, assign via rbacService
+- Read system roles for JWT from `rbacService.getSystemRoleNames(userId)`
+
+The `resolveRoles` method changes from returning `List<String>` to assigning roles via RbacService and returning system role names.
+
+- [ ] **Step 3: Update AgentRegistrationController**
+
+In `register()`:
+- After creating agent user, assign AGENT role: `rbacService.assignRoleToUser(agentId, SystemRole.AGENT_ID)`
+- JWT still gets `List.of("AGENT")`
+
+- [ ] **Step 4: Verify full project compiles**
+
+```bash
+mvn clean compile
+```
+
+Expected: BUILD SUCCESS (all `UserInfo.roles()` references resolved)
+
+- [ ] **Step 5: Commit (atomic — covers Tasks 2–6)**
+
+This is the single commit for the entire backend RBAC model. Tasks 2–6 must all be done before committing since intermediate states don't compile.
+
+```bash
+git add cameleer3-server-core/ cameleer3-server-app/src/main/java/
+git commit -m "feat: replace flat users.roles with relational RBAC model
+
+New package com.cameleer3.server.core.rbac with SystemRole constants,
+detail/summary records, GroupRepository, RoleRepository, RbacService.
+Remove roles field from UserInfo. Implement PostgresGroupRepository,
+PostgresRoleRepository, RbacServiceImpl with inheritance computation.
+Update UiAuthController, OidcAuthController, AgentRegistrationController
+to assign roles via user_roles table. JWT populated from effective system roles."
+```
+
+---
+
+### Task 7: Admin Controllers — Users, Groups, Roles, Stats
+
+**Files:**
+- Modify: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/UserAdminController.java`
+- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/GroupAdminController.java`
+- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RoleAdminController.java`
+- Create: `cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RbacStatsController.java`
+
+- [ ] **Step 1: Rewrite UserAdminController**
+
+```java
+package com.cameleer3.server.app.controller;
+
+import com.cameleer3.server.core.admin.*;
+import com.cameleer3.server.core.rbac.*;
+import com.cameleer3.server.core.security.UserRepository;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.servlet.http.HttpServletRequest;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.*;
+
+@RestController
+@RequestMapping("/api/v1/admin/users")
+@Tag(name = "User Admin", description = "User management (ADMIN only)")
+@PreAuthorize("hasRole('ADMIN')")
+public class UserAdminController {
+
+    private final RbacService rbacService;
+    private final UserRepository userRepository;
+    private final AuditService auditService;
+
+    public UserAdminController(RbacService rbacService, UserRepository userRepository,
+                                AuditService auditService) {
+        this.rbacService = rbacService;
+        this.userRepository = userRepository;
+        this.auditService = auditService;
+    }
+
+    @GetMapping
+    @Operation(summary = "List all users with effective roles/groups")
+    public ResponseEntity<List<UserDetail>> listUsers() {
+        return ResponseEntity.ok(rbacService.listUsers());
+    }
+
+    @GetMapping("/{userId}")
+    @Operation(summary = "Get user detail")
+    public ResponseEntity<UserDetail> getUser(@PathVariable String userId) {
+        UserDetail detail = rbacService.getUser(userId);
+        if (detail == null) return ResponseEntity.notFound().build();
+        return ResponseEntity.ok(detail);
+    }
+
+    @PostMapping("/{userId}/roles/{roleId}")
+    @Operation(summary = "Assign role to user")
+    public ResponseEntity<Void> assignRole(@PathVariable String userId,
+                                            @PathVariable UUID roleId,
+                                            HttpServletRequest httpRequest) {
+        rbacService.assignRoleToUser(userId, roleId);
+        auditService.log("assign_user_role", AuditCategory.USER_MGMT, userId,
+                Map.of("roleId", roleId.toString()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping("/{userId}/roles/{roleId}")
+    @Operation(summary = "Remove role from user")
+    public ResponseEntity<Void> removeRole(@PathVariable String userId,
+                                            @PathVariable UUID roleId,
+                                            HttpServletRequest httpRequest) {
+        rbacService.removeRoleFromUser(userId, roleId);
+        auditService.log("remove_user_role", AuditCategory.USER_MGMT, userId,
+                Map.of("roleId", roleId.toString()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    @PostMapping("/{userId}/groups/{groupId}")
+    @Operation(summary = "Add user to group")
+    public ResponseEntity<Void> addToGroup(@PathVariable String userId,
+                                            @PathVariable UUID groupId,
+                                            HttpServletRequest httpRequest) {
+        rbacService.addUserToGroup(userId, groupId);
+        auditService.log("add_user_group", AuditCategory.USER_MGMT, userId,
+                Map.of("groupId", groupId.toString()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping("/{userId}/groups/{groupId}")
+    @Operation(summary = "Remove user from group")
+    public ResponseEntity<Void> removeFromGroup(@PathVariable String userId,
+                                                 @PathVariable UUID groupId,
+                                                 HttpServletRequest httpRequest) {
+        rbacService.removeUserFromGroup(userId, groupId);
+        auditService.log("remove_user_group", AuditCategory.USER_MGMT, userId,
+                Map.of("groupId", groupId.toString()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping("/{userId}")
+    @Operation(summary = "Delete user")
+    public ResponseEntity<Void> deleteUser(@PathVariable String userId,
+                                            HttpServletRequest httpRequest) {
+        userRepository.delete(userId);
+        auditService.log("delete_user", AuditCategory.USER_MGMT, userId,
+                null, AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.noContent().build();
+    }
+}
+```
+
+- [ ] **Step 2: Create GroupAdminController**
+
+```java
+package com.cameleer3.server.app.controller;
+
+import com.cameleer3.server.core.admin.*;
+import com.cameleer3.server.core.rbac.*;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.servlet.http.HttpServletRequest;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.*;
+
+@RestController
+@RequestMapping("/api/v1/admin/groups")
+@Tag(name = "Group Admin", description = "Group management (ADMIN only)")
+@PreAuthorize("hasRole('ADMIN')")
+public class GroupAdminController {
+
+    private final GroupRepository groupRepository;
+    private final RbacService rbacService;
+    private final AuditService auditService;
+
+    public GroupAdminController(GroupRepository groupRepository, RbacService rbacService,
+                                AuditService auditService) {
+        this.groupRepository = groupRepository;
+        this.rbacService = rbacService;
+        this.auditService = auditService;
+    }
+
+    @GetMapping
+    @Operation(summary = "List all groups with hierarchy")
+    public ResponseEntity<List<GroupDetail>> listGroups() {
+        List<GroupSummary> all = groupRepository.findAll();
+        List<GroupDetail> details = all.stream()
+                .map(g -> groupRepository.findById(g.id()).orElse(null))
+                .filter(Objects::nonNull)
+                .map(g -> new GroupDetail(g.id(), g.name(), g.parentGroupId(), g.createdAt(),
+                        g.directRoles(), rbacService.getEffectiveRolesForGroup(g.id()),
+                        g.members(), g.childGroups()))
+                .toList();
+        return ResponseEntity.ok(details);
+    }
+
+    @GetMapping("/{id}")
+    @Operation(summary = "Get group detail")
+    public ResponseEntity<GroupDetail> getGroup(@PathVariable UUID id) {
+        return groupRepository.findById(id)
+                .map(g -> {
+                    // Enrich with effective roles
+                    List<RoleSummary> effectiveRoles = rbacService.getEffectiveRolesForGroup(id);
+                    return ResponseEntity.ok(new GroupDetail(g.id(), g.name(), g.parentGroupId(),
+                            g.createdAt(), g.directRoles(), effectiveRoles, g.members(), g.childGroups()));
+                })
+                .orElse(ResponseEntity.notFound().build());
+    }
+
+    @PostMapping
+    @Operation(summary = "Create group")
+    public ResponseEntity<Map<String, UUID>> createGroup(@RequestBody CreateGroupRequest request,
+                                                          HttpServletRequest httpRequest) {
+        UUID id = groupRepository.create(request.name(), request.parentGroupId());
+        auditService.log("create_group", AuditCategory.RBAC, id.toString(),
+                Map.of("name", request.name()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok(Map.of("id", id));
+    }
+
+    @PutMapping("/{id}")
+    @Operation(summary = "Update group")
+    public ResponseEntity<Void> updateGroup(@PathVariable UUID id,
+                                             @RequestBody UpdateGroupRequest request,
+                                             HttpServletRequest httpRequest) {
+        // Cycle detection
+        if (request.parentGroupId() != null) {
+            List<GroupSummary> ancestors = groupRepository.findAncestorChain(request.parentGroupId());
+            boolean cycle = ancestors.stream().anyMatch(a -> a.id().equals(id));
+            if (cycle || request.parentGroupId().equals(id)) {
+                return ResponseEntity.status(409).build();
+            }
+        }
+        groupRepository.update(id, request.name(), request.parentGroupId());
+        auditService.log("update_group", AuditCategory.RBAC, id.toString(),
+                null, AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping("/{id}")
+    @Operation(summary = "Delete group")
+    public ResponseEntity<Void> deleteGroup(@PathVariable UUID id, HttpServletRequest httpRequest) {
+        groupRepository.delete(id);
+        auditService.log("delete_group", AuditCategory.RBAC, id.toString(),
+                null, AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.noContent().build();
+    }
+
+    @PostMapping("/{id}/roles/{roleId}")
+    @Operation(summary = "Assign role to group")
+    public ResponseEntity<Void> addRole(@PathVariable UUID id, @PathVariable UUID roleId,
+                                         HttpServletRequest httpRequest) {
+        groupRepository.addRole(id, roleId);
+        auditService.log("assign_group_role", AuditCategory.RBAC, id.toString(),
+                Map.of("roleId", roleId.toString()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping("/{id}/roles/{roleId}")
+    @Operation(summary = "Remove role from group")
+    public ResponseEntity<Void> removeRole(@PathVariable UUID id, @PathVariable UUID roleId,
+                                            HttpServletRequest httpRequest) {
+        groupRepository.removeRole(id, roleId);
+        auditService.log("remove_group_role", AuditCategory.RBAC, id.toString(),
+                Map.of("roleId", roleId.toString()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    public record CreateGroupRequest(String name, UUID parentGroupId) {}
+    public record UpdateGroupRequest(String name, UUID parentGroupId) {}
+}
+```
+
+- [ ] **Step 3: Create RoleAdminController**
+
+```java
+package com.cameleer3.server.app.controller;
+
+import com.cameleer3.server.core.admin.*;
+import com.cameleer3.server.core.rbac.*;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.servlet.http.HttpServletRequest;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.*;
+
+@RestController
+@RequestMapping("/api/v1/admin/roles")
+@Tag(name = "Role Admin", description = "Role management (ADMIN only)")
+@PreAuthorize("hasRole('ADMIN')")
+public class RoleAdminController {
+
+    private final RoleRepository roleRepository;
+    private final RbacService rbacService;
+    private final AuditService auditService;
+
+    public RoleAdminController(RoleRepository roleRepository, RbacService rbacService,
+                                AuditService auditService) {
+        this.roleRepository = roleRepository;
+        this.rbacService = rbacService;
+        this.auditService = auditService;
+    }
+
+    @GetMapping
+    @Operation(summary = "List all roles (system + custom)")
+    public ResponseEntity<List<RoleDetail>> listRoles() {
+        return ResponseEntity.ok(roleRepository.findAll());
+    }
+
+    @GetMapping("/{id}")
+    @Operation(summary = "Get role detail")
+    public ResponseEntity<RoleDetail> getRole(@PathVariable UUID id) {
+        return roleRepository.findById(id)
+                .map(r -> {
+                    List<UserSummary> principals = rbacService.getEffectivePrincipalsForRole(id);
+                    return ResponseEntity.ok(new RoleDetail(r.id(), r.name(), r.description(),
+                            r.scope(), r.system(), r.createdAt(), r.assignedGroups(),
+                            r.directUsers(), principals));
+                })
+                .orElse(ResponseEntity.notFound().build());
+    }
+
+    @PostMapping
+    @Operation(summary = "Create custom role")
+    public ResponseEntity<Map<String, UUID>> createRole(@RequestBody CreateRoleRequest request,
+                                                         HttpServletRequest httpRequest) {
+        UUID id = roleRepository.create(request.name(), request.description(), request.scope());
+        auditService.log("create_role", AuditCategory.RBAC, id.toString(),
+                Map.of("name", request.name()), AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok(Map.of("id", id));
+    }
+
+    @PutMapping("/{id}")
+    @Operation(summary = "Update custom role (rejects system roles)")
+    public ResponseEntity<Void> updateRole(@PathVariable UUID id,
+                                            @RequestBody UpdateRoleRequest request,
+                                            HttpServletRequest httpRequest) {
+        if (SystemRole.isSystem(id)) {
+            return ResponseEntity.status(403).build();
+        }
+        roleRepository.update(id, request.name(), request.description(), request.scope());
+        auditService.log("update_role", AuditCategory.RBAC, id.toString(),
+                null, AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping("/{id}")
+    @Operation(summary = "Delete custom role (rejects system roles)")
+    public ResponseEntity<Void> deleteRole(@PathVariable UUID id, HttpServletRequest httpRequest) {
+        if (SystemRole.isSystem(id)) {
+            return ResponseEntity.status(403).build();
+        }
+        roleRepository.delete(id);
+        auditService.log("delete_role", AuditCategory.RBAC, id.toString(),
+                null, AuditResult.SUCCESS, httpRequest);
+        return ResponseEntity.noContent().build();
+    }
+
+    public record CreateRoleRequest(String name, String description, String scope) {}
+    public record UpdateRoleRequest(String name, String description, String scope) {}
+}
+```
+
+- [ ] **Step 4: Create RbacStatsController**
+
+```java
+package com.cameleer3.server.app.controller;
+
+import com.cameleer3.server.core.rbac.RbacService;
+import com.cameleer3.server.core.rbac.RbacStats;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequestMapping("/api/v1/admin/rbac")
+@Tag(name = "RBAC Stats", description = "RBAC dashboard statistics")
+@PreAuthorize("hasRole('ADMIN')")
+public class RbacStatsController {
+
+    private final RbacService rbacService;
+
+    public RbacStatsController(RbacService rbacService) {
+        this.rbacService = rbacService;
+    }
+
+    @GetMapping("/stats")
+    @Operation(summary = "RBAC dashboard statistics")
+    public ResponseEntity<RbacStats> getStats() {
+        return ResponseEntity.ok(rbacService.getStats());
+    }
+}
+```
+
+- [ ] **Step 5: Verify full project compiles**
+
+```bash
+mvn clean compile
+```
+
+Expected: BUILD SUCCESS
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/
+git commit -m "feat: add Group, Role, and RBAC stats admin controllers
+
+GroupAdminController with cycle detection, RoleAdminController
+with system role protection, RbacStatsController for dashboard.
+Rewrite UserAdminController to use RbacService."
+```
+
+---
+
+### Task 8: Fix Tests and Verify Build
+
+**Files:**
+- Modify: any test files that reference `UserInfo.roles()` or old `updateRoles` API
+- Run: `mvn clean verify -DskipITs` (unit tests only, ITs need Docker)
+
+- [ ] **Step 1: Find and fix all test compilation errors**
+
+Search for references to `UserInfo` constructor with 6 args (now 5) or `.roles()` calls in test files. Update constructor calls, remove roles parameter.
+
+```bash
+grep -rn "UserInfo(" cameleer3-server-app/src/test/
+grep -rn "\.roles()" cameleer3-server-app/src/test/
+```
+
+Fix each reference. `TestSecurityHelper` creates JWT directly with roles — this doesn't change since JWT creation still takes `List<String> roles`.
+
+- [ ] **Step 2: Run unit tests**
+
+```bash
+mvn clean verify -DskipITs
+```
+
+Expected: BUILD SUCCESS, all unit tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add -A
+git commit -m "fix: update tests for new UserInfo record without roles field"
+```
+
+---
+
+### Task 9: Regenerate OpenAPI Spec
+
+After backend changes, regenerate the OpenAPI spec so the frontend can use the new types.
+
+- [ ] **Step 1: Build the backend**
+
+```bash
+mvn clean package -DskipTests
+```
+
+- [ ] **Step 2: Start the server locally (or use running backend)**
+
+If a running backend is available, redeploy. Otherwise start locally temporarily.
+
+- [ ] **Step 3: Regenerate OpenAPI types**
+
+```bash
+cd ui
+npm run generate-api:live
+```
+
+Or if using local server:
+```bash
+curl -s http://localhost:8081/api/v1/api-docs -o ui/src/api/openapi.json
+cd ui && npm run generate-api
+```
+
+- [ ] **Step 4: Verify UI still builds**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add ui/src/api/openapi.json ui/src/api/schema.d.ts
+git commit -m "chore: regenerate OpenAPI spec and TypeScript types for RBAC endpoints"
+```
+
+---
+
+### Task 10: Frontend API Hooks
+
+**Files:**
+- Create: `ui/src/api/queries/admin/rbac.ts`
+
+- [ ] **Step 1: Create RBAC query and mutation hooks**
+
+```typescript
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { adminFetch } from './admin-api';
+
+// ─── Types ───
+
+export interface RoleSummary {
+  id: string;
+  name: string;
+  system: boolean;
+  source: string;
+}
+
+export interface GroupSummary {
+  id: string;
+  name: string;
+}
+
+export interface UserSummary {
+  userId: string;
+  displayName: string;
+  provider: string;
+}
+
+export interface UserDetail {
+  userId: string;
+  provider: string;
+  email: string;
+  displayName: string;
+  createdAt: string;
+  directRoles: RoleSummary[];
+  directGroups: GroupSummary[];
+  effectiveRoles: RoleSummary[];
+  effectiveGroups: GroupSummary[];
+}
+
+export interface GroupDetail {
+  id: string;
+  name: string;
+  parentGroupId: string | null;
+  createdAt: string;
+  directRoles: RoleSummary[];
+  effectiveRoles: RoleSummary[];
+  members: UserSummary[];
+  childGroups: GroupSummary[];
+}
+
+export interface RoleDetail {
+  id: string;
+  name: string;
+  description: string;
+  scope: string;
+  system: boolean;
+  createdAt: string;
+  assignedGroups: GroupSummary[];
+  directUsers: UserSummary[];
+  effectivePrincipals: UserSummary[];
+}
+
+export interface RbacStats {
+  userCount: number;
+  activeUserCount: number;
+  groupCount: number;
+  maxGroupDepth: number;
+  roleCount: number;
+}
+
+// ─── Query hooks ───
+
+export function useUsers() {
+  return useQuery({
+    queryKey: ['admin', 'rbac', 'users'],
+    queryFn: () => adminFetch<UserDetail[]>('/users'),
+  });
+}
+
+export function useUser(userId: string | null) {
+  return useQuery({
+    queryKey: ['admin', 'rbac', 'users', userId],
+    queryFn: () => adminFetch<UserDetail>(`/users/${encodeURIComponent(userId!)}`),
+    enabled: !!userId,
+  });
+}
+
+export function useGroups() {
+  return useQuery({
+    queryKey: ['admin', 'rbac', 'groups'],
+    queryFn: () => adminFetch<GroupSummary[]>('/groups'),
+  });
+}
+
+export function useGroup(groupId: string | null) {
+  return useQuery({
+    queryKey: ['admin', 'rbac', 'groups', groupId],
+    queryFn: () => adminFetch<GroupDetail>(`/groups/${groupId}`),
+    enabled: !!groupId,
+  });
+}
+
+export function useRoles() {
+  return useQuery({
+    queryKey: ['admin', 'rbac', 'roles'],
+    queryFn: () => adminFetch<RoleDetail[]>('/roles'),
+  });
+}
+
+export function useRole(roleId: string | null) {
+  return useQuery({
+    queryKey: ['admin', 'rbac', 'roles', roleId],
+    queryFn: () => adminFetch<RoleDetail>(`/roles/${roleId}`),
+    enabled: !!roleId,
+  });
+}
+
+export function useRbacStats() {
+  return useQuery({
+    queryKey: ['admin', 'rbac', 'stats'],
+    queryFn: () => adminFetch<RbacStats>('/rbac/stats'),
+  });
+}
+
+// ─── Mutation hooks ───
+
+export function useAssignRoleToUser() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ userId, roleId }: { userId: string; roleId: string }) =>
+      adminFetch(`/users/${encodeURIComponent(userId)}/roles/${roleId}`, { method: 'POST' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useRemoveRoleFromUser() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ userId, roleId }: { userId: string; roleId: string }) =>
+      adminFetch(`/users/${encodeURIComponent(userId)}/roles/${roleId}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useAddUserToGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ userId, groupId }: { userId: string; groupId: string }) =>
+      adminFetch(`/users/${encodeURIComponent(userId)}/groups/${groupId}`, { method: 'POST' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useRemoveUserFromGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ userId, groupId }: { userId: string; groupId: string }) =>
+      adminFetch(`/users/${encodeURIComponent(userId)}/groups/${groupId}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useCreateGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (data: { name: string; parentGroupId?: string }) =>
+      adminFetch<{ id: string }>('/groups', {
+        method: 'POST',
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useUpdateGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, ...data }: { id: string; name?: string; parentGroupId?: string | null }) =>
+      adminFetch(`/groups/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useDeleteGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) =>
+      adminFetch(`/groups/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useAssignRoleToGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ groupId, roleId }: { groupId: string; roleId: string }) =>
+      adminFetch(`/groups/${groupId}/roles/${roleId}`, { method: 'POST' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useRemoveRoleFromGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ groupId, roleId }: { groupId: string; roleId: string }) =>
+      adminFetch(`/groups/${groupId}/roles/${roleId}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useCreateRole() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (data: { name: string; description?: string; scope?: string }) =>
+      adminFetch<{ id: string }>('/roles', {
+        method: 'POST',
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useUpdateRole() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, ...data }: { id: string; name?: string; description?: string; scope?: string }) =>
+      adminFetch(`/roles/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useDeleteRole() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) =>
+      adminFetch(`/roles/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+
+export function useDeleteUser() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (userId: string) =>
+      adminFetch(`/users/${encodeURIComponent(userId)}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['admin', 'rbac'] });
+    },
+  });
+}
+```
+
+- [ ] **Step 2: Verify UI builds**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add ui/src/api/queries/admin/rbac.ts
+git commit -m "feat: add React Query hooks for RBAC admin API"
+```
+
+---
+
+### Task 11: Frontend — Routing, Sidebar, RbacPage Shell
+
+**Files:**
+- Modify: `ui/src/router.tsx`
+- Modify: `ui/src/components/layout/AppSidebar.tsx`
+- Create: `ui/src/pages/admin/rbac/RbacPage.tsx`
+- Create: `ui/src/pages/admin/rbac/RbacPage.module.css`
+
+- [ ] **Step 1: Add route to router.tsx**
+
+Add lazy import and route entry for `/admin/rbac`:
+```tsx
+const RbacPage = lazy(() => import('./pages/admin/rbac/RbacPage').then(m => ({ default: m.RbacPage })));
+// In routes array:
+{ path: 'admin/rbac', element: <Suspense fallback={null}><RbacPage /></Suspense> }
+```
+
+- [ ] **Step 2: Add sidebar link**
+
+In `AppSidebar.tsx`, add to `ADMIN_LINKS`:
+```tsx
+{ to: '/admin/rbac', label: 'User Management' },
+```
+
+- [ ] **Step 3: Create RbacPage shell with tab navigation**
+
+`RbacPage.tsx` — ADMIN role gate + tab bar (Dashboard | Users | Groups | Roles). Uses `?tab=` query param for active tab state. Each tab renders a placeholder initially.
+
+- [ ] **Step 4: Create RbacPage.module.css**
+
+Styles for tab bar, split pane layout, entity cards, detail pane, avatars, chips, badges, search input, trees, stat cards, inheritance diagram. Reference `examples/RBAC/rbac_management_ui.html` for visual conventions and map to project's CSS variables (`--bg-surface`, `--border`, `--text-primary`, etc.).
+
+- [ ] **Step 5: Verify build**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add ui/src/router.tsx ui/src/components/layout/AppSidebar.tsx ui/src/pages/admin/rbac/
+git commit -m "feat: add RbacPage shell with tab navigation and routing"
+```
+
+---
+
+### Task 12: Frontend — Shared Components (EntityListPane, EntityCard, EntityAvatar, chips, badges)
+
+**Files:**
+- Create: `ui/src/pages/admin/rbac/components/EntityListPane.tsx`
+- Create: `ui/src/pages/admin/rbac/components/EntityCard.tsx`
+- Create: `ui/src/pages/admin/rbac/components/EntityAvatar.tsx`
+- Create: `ui/src/pages/admin/rbac/components/InheritanceChip.tsx`
+- Create: `ui/src/pages/admin/rbac/components/OidcBadge.tsx`
+- Create: `ui/src/pages/admin/rbac/components/InheritanceNote.tsx`
+- Create: `ui/src/pages/admin/rbac/components/GroupTree.tsx`
+- Create: `ui/src/pages/admin/rbac/components/InheritanceDiagram.tsx`
+
+- [ ] **Step 1: Create EntityAvatar**
+
+Renders circle (user) or rounded-square (group/role) avatar with initials and type-specific colors.
+
+Props: `type: 'user' | 'group' | 'role'`, `name: string`, `size?: number`
+
+Colors: user = blue tint (#E6F1FB / #0C447C), group = green tint (#E1F5EE / #0F6E56), role = amber tint (#FAEEDA / #633806). Initials = first two chars of name, uppercased.
+
+- [ ] **Step 2: Create OidcBadge**
+
+Props: `provider: string`. Renders a small cyan pill showing "OIDC" (or issuer hostname extracted from `oidc:<host>`). Only render when `provider !== "local"`.
+
+- [ ] **Step 3: Create InheritanceChip**
+
+Props: `name: string`, `source?: string`, `type: 'role' | 'group'`. Renders chip with dashed border if `source` is present (inherited), solid if direct. Includes `↑ source` annotation when inherited.
+
+- [ ] **Step 4: Create InheritanceNote**
+
+Props: `children: ReactNode`. Green-bordered explanation block. Styled per the spec: `border-left: 2px solid var(--green)`, subtle background.
+
+- [ ] **Step 5: Create GroupTree**
+
+Props: `groups: GroupSummary[]` (ordered root-first). Renders indented tree with corner connectors using CSS borders, matching the prototype.
+
+- [ ] **Step 6: Create InheritanceDiagram**
+
+Three-column layout (Groups → Roles → Users) for the dashboard. Read-only orientation aid.
+
+- [ ] **Step 7: Create EntityCard**
+
+Generic list row: avatar + entity info (name, meta line, tag row) + optional status dot. Props accept render functions for meta and tags to support user/group/role variations.
+
+- [ ] **Step 8: Create EntityListPane**
+
+Search input + scrollable card list. Props: `items`, `renderCard`, `searchFilter`, `onSelect`, `selectedId`, `placeholder`.
+
+- [ ] **Step 9: Verify build**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 10: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/components/
+git commit -m "feat: add RBAC shared components (avatars, chips, tree, entity list)"
+```
+
+---
+
+### Task 13: Frontend — DashboardTab
+
+**Files:**
+- Create: `ui/src/pages/admin/rbac/DashboardTab.tsx`
+
+- [ ] **Step 1: Implement DashboardTab**
+
+Uses `useRbacStats()` hook. Renders three stat cards (Users, Groups, Roles) and the InheritanceDiagram. Uses `useGroups()` and `useRoles()` to populate the diagram with real data.
+
+- [ ] **Step 2: Verify build**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/DashboardTab.tsx
+git commit -m "feat: add RBAC dashboard tab with stats and inheritance diagram"
+```
+
+---
+
+### Task 14: Frontend — UsersTab with UserDetail
+
+**Files:**
+- Create: `ui/src/pages/admin/rbac/UsersTab.tsx`
+- Create: `ui/src/pages/admin/rbac/components/UserDetail.tsx`
+
+- [ ] **Step 1: Implement UserDetail**
+
+Renders: avatar, name, email, OIDC badge, status fields, group membership chips, effective roles (with InheritanceChip), group tree. Uses data from `UserDetail` type.
+
+- [ ] **Step 2: Implement UsersTab**
+
+Split pane: EntityListPane on left (52%), UserDetail on right (48%). Uses `useUsers()` for list data. Clicking a user card selects it and shows UserDetail.
+
+User card: EntityCard with circle avatar, name, email meta, role tags (amber, inherited italic), group tags (green), OIDC badge.
+
+- [ ] **Step 3: Verify build**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/UsersTab.tsx ui/src/pages/admin/rbac/components/UserDetail.tsx
+git commit -m "feat: add Users tab with split pane list and detail view"
+```
+
+---
+
+### Task 15: Frontend — GroupsTab with GroupDetail
+
+**Files:**
+- Create: `ui/src/pages/admin/rbac/GroupsTab.tsx`
+- Create: `ui/src/pages/admin/rbac/components/GroupDetail.tsx`
+
+- [ ] **Step 1: Implement GroupDetail**
+
+Renders: avatar, name, hierarchy level, ID field, member chips, child group chips, assigned roles with inheritance notes, group hierarchy tree.
+
+- [ ] **Step 2: Implement GroupsTab**
+
+Split pane with EntityListPane. Uses `useGroups()` for list, `useGroup(selectedId)` for detail. Group cards: rounded-square avatar, name, parent/member-count meta, role tags.
+
+- [ ] **Step 3: Verify build and commit**
+
+```bash
+cd ui && npm run build
+git add ui/src/pages/admin/rbac/GroupsTab.tsx ui/src/pages/admin/rbac/components/GroupDetail.tsx
+git commit -m "feat: add Groups tab with hierarchy display and detail view"
+```
+
+---
+
+### Task 16: Frontend — RolesTab with RoleDetail
+
+**Files:**
+- Create: `ui/src/pages/admin/rbac/RolesTab.tsx`
+- Create: `ui/src/pages/admin/rbac/components/RoleDetail.tsx`
+
+- [ ] **Step 1: Implement RoleDetail**
+
+Renders: avatar, role name, description, ID/scope fields, assigned groups, direct users, effective principals, inheritance note. System roles show lock icon.
+
+- [ ] **Step 2: Implement RolesTab**
+
+Split pane with EntityListPane. Uses `useRoles()` for list, `useRole(selectedId)` for detail. Role cards: rounded-square avatar, name, description/assignment meta, group tags. System roles show lock icon.
+
+- [ ] **Step 3: Verify build and commit**
+
+```bash
+cd ui && npm run build
+git add ui/src/pages/admin/rbac/RolesTab.tsx ui/src/pages/admin/rbac/components/RoleDetail.tsx
+git commit -m "feat: add Roles tab with system role protection and detail view"
+```
+
+---
+
+### Task 17: Wire Tabs into RbacPage
+
+**Files:**
+- Modify: `ui/src/pages/admin/rbac/RbacPage.tsx`
+
+- [ ] **Step 1: Import and render tab content**
+
+Replace placeholder tab content with actual `DashboardTab`, `UsersTab`, `GroupsTab`, `RolesTab` components.
+
+- [ ] **Step 2: Full build verification**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add ui/src/pages/admin/rbac/RbacPage.tsx
+git commit -m "feat: wire all RBAC tabs into RbacPage"
+```
+
+---
+
+### Task 18: Final Build Verification and Cleanup
+
+- [ ] **Step 1: Full backend build**
+
+```bash
+mvn clean compile
+```
+
+- [ ] **Step 2: Full frontend build**
+
+```bash
+cd ui && npm run build
+```
+
+- [ ] **Step 3: Check for unused imports or dead code**
+
+Review modified files for leftover references to old `UserInfo.roles()` pattern.
+
+- [ ] **Step 4: Final commit if any cleanup needed**
+
+```bash
+git add -A
+git commit -m "chore: cleanup unused imports and dead code from RBAC migration"
+```
diff --git a/docs/superpowers/specs/2026-03-17-rbac-crud-gaps-design.md b/docs/superpowers/specs/2026-03-17-rbac-crud-gaps-design.md
new file mode 100644
index 00000000..0f5c9af9
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-17-rbac-crud-gaps-design.md
@@ -0,0 +1,142 @@
+# RBAC CRUD Gaps — Design Specification
+
+## Goal
+
+Add missing CRUD and assignment UI to the RBAC management page, fix date formatting, seed a built-in Admins group, and fix dashboard diagram ordering.
+
+## References
+
+- Parent spec: `docs/superpowers/specs/2026-03-17-rbac-management-design.md`
+- Visual prototype: `examples/RBAC/rbac_management_ui.html`
+
+---
+
+## Changes
+
+### 1. Users Tab — Delete + Assignments
+
+Users cannot be created manually (they arrive via login). The detail pane gains:
+
+- **Delete button** in the detail header area. Uses existing `ConfirmDeleteDialog` with the user's `displayName` as the confirmation string. Calls `useDeleteUser()`. **Guard:** the currently authenticated user (from `useAuthStore`) cannot delete themselves — button disabled with tooltip "Cannot delete your own account".
+- **Group membership section** — "+ Add" chip opens a **multi-select dropdown** listing all groups the user is NOT already a member of. Checkboxes for batch selection, "Apply" button to commit. Calls are batched via `Promise.allSettled()` — if any fail, show an inline error, invalidate queries regardless to refresh. Existing group chips gain an "x" remove button calling `useRemoveUserFromGroup()`.
+- **Direct roles section** — the existing "Effective roles" section renders both direct and inherited roles. The "+ Add" multi-select dropdown lists roles not yet directly assigned. Calls `useAssignRoleToUser()` (batched via `Promise.allSettled()`). Direct role chips gain an "x" button calling `useRemoveRoleFromUser()`. Inherited role chips (dashed border) do NOT get remove buttons — they can only be removed by changing group membership or group role assignments.
+- **Created field** — change from date-only to full date+time: `new Date(createdAt).toLocaleString()`.
+- **Mutation button states** — all action buttons (delete, remove chip "x") disable while their mutation is in-flight to prevent double-clicks.
+
+### 2. Groups Tab — CRUD + Assignments
+
+- **"+ Add group" button** in the panel header (`.btnAdd` style exists). Opens an inline form below the search bar with: name text input, optional parent group dropdown, "Create" button. Calls `useCreateGroup()`. Form clears and closes on success. On error: shows error message inline.
+- **Delete button** in detail pane header. Uses `ConfirmDeleteDialog` with group name. Calls `useDeleteGroup()`. Resets selected group. **Guard:** the built-in Admins group (`SystemRole.ADMINS_GROUP_ID`) cannot be deleted — button disabled with tooltip "Built-in group cannot be deleted".
+- **Assigned roles section** — "+ Add" multi-select dropdown listing roles not yet assigned to this group. Batched via `Promise.allSettled()`. Calls `useAssignRoleToGroup()`. Role chips gain "x" for `useRemoveRoleFromGroup()`.
+- **Parent group** — shown as a dropdown in the detail header area, allowing re-parenting. Calls `useUpdateGroup()`. The dropdown excludes the group itself and its transitive descendants (cycle prevention — requires recursive traversal of `childGroups` on each `GroupDetail`). Setting to empty/none makes it top-level.
+
+### 3. Roles Tab — CRUD
+
+- **"+ Add role" button** in panel header. Opens an inline form: name (required), description (optional), scope (optional, free-text, defaults to "custom"). Calls `useCreateRole()`.
+- **Delete button** in detail pane header. **Disabled for system roles** (lock icon + tooltip "System roles cannot be deleted"). Custom roles use `ConfirmDeleteDialog` with role name → `useDeleteRole()`.
+- No assignment UI on the roles tab — assignments are managed from the User and Group detail panes.
+
+### 4. Multi-Select Dropdown Component
+
+A reusable component used across all assignment actions:
+
+```
+Props:
+  items: { id: string; label: string }[]   — available items to pick from
+  onApply: (selectedIds: string[]) => void  — called with all checked IDs
+  placeholder?: string                      — search filter placeholder
+```
+
+Behavior:
+- Opens as a positioned dropdown below the "+ Add" chip
+- Search/filter input at top
+- Checkbox list of items (max-height with scroll)
+- "Apply" button at bottom (disabled when nothing selected)
+- Closes on Apply, Escape, or click-outside
+- Shows count badge on Apply button: "Apply (3)"
+
+Styling: background `var(--bg-raised)`, border `var(--border)`, border-radius `var(--radius-md)`, items with `var(--bg-hover)` on hover, checkboxes with `var(--amber)` accent.
+
+### 5. Inline Create Form
+
+A reusable pattern for "Add group" and "Add role":
+
+- Appears below the search bar in the list pane, pushing content down
+- Input fields with labels
+- "Create" and "Cancel" buttons
+- On success: closes form, clears inputs, new entity appears in list
+- On error: shows error message inline
+- "Create" button disabled while mutation is in-flight
+
+### 6. Built-in Admins Group Seed
+
+**Database migration** — new `V2__admin_group_seed.sql` (V1 is already deployed, V2-V10 were deleted in the migration consolidation so V2 is safe):
+
+```sql
+-- Built-in Admins group
+INSERT INTO groups (id, name) VALUES
+    ('00000000-0000-0000-0000-000000000010', 'Admins');
+
+-- Assign ADMIN role to Admins group
+INSERT INTO group_roles (group_id, role_id) VALUES
+    ('00000000-0000-0000-0000-000000000010', '00000000-0000-0000-0000-000000000004');
+```
+
+**SystemRole.java** — add constants:
+```java
+public static final UUID ADMINS_GROUP_ID = UUID.fromString("00000000-0000-0000-0000-000000000010");
+```
+
+**UiAuthController.login()** — after upserting the user and assigning ADMIN role, also add to Admins group:
+```java
+rbacService.addUserToGroup(subject, SystemRole.ADMINS_GROUP_ID);
+```
+
+**Frontend guard:** The Admins group UUID is hardcoded as a constant in the frontend to disable deletion. Alternatively, check if a group's ID matches a known system group ID.
+
+### 7. Dashboard Diagram Ordering
+
+The inheritance diagram's three columns (Groups → Roles → Users) must show items in a consistent, matching order:
+
+- **Groups column**: alphabetical by name, children indented under parents
+- **Roles column**: iterate groups top-to-bottom, collect their direct roles, deduplicate preserving first-seen order. Roles not assigned to any group are omitted from the diagram.
+- **Users column**: alphabetical by display name
+
+Sort explicitly in `DashboardTab.tsx` before rendering.
+
+---
+
+## Files Changed
+
+### Frontend — Modified
+| File | Change |
+|---|---|
+| `ui/src/pages/admin/rbac/UsersTab.tsx` | Delete button, group/role assignment dropdowns, date format fix, self-delete guard |
+| `ui/src/pages/admin/rbac/GroupsTab.tsx` | Add group form, delete button, role assignment dropdown, parent group dropdown, Admins guard |
+| `ui/src/pages/admin/rbac/RolesTab.tsx` | Add role form, delete button (disabled for system) |
+| `ui/src/pages/admin/rbac/DashboardTab.tsx` | Sort diagram columns consistently |
+| `ui/src/pages/admin/rbac/RbacPage.module.css` | Styles for multi-select dropdown, inline create form, delete button, action chips, remove buttons |
+
+### Frontend — New
+| File | Responsibility |
+|---|---|
+| `ui/src/pages/admin/rbac/components/MultiSelectDropdown.tsx` | Reusable multi-select picker with search, checkboxes, batch apply |
+
+### Backend — Modified
+| File | Change |
+|---|---|
+| `cameleer3-server-core/.../rbac/SystemRole.java` | Add `ADMINS_GROUP_ID` constant |
+| `cameleer3-server-app/.../security/UiAuthController.java` | Add admin user to Admins group on login |
+
+### Backend — New Migration
+| File | Change |
+|---|---|
+| `cameleer3-server-app/src/main/resources/db/migration/V2__admin_group_seed.sql` | Seed Admins group + ADMIN role assignment |
+
+---
+
+## Out of Scope
+
+- Editing user profile fields (name, email) — users are managed by their identity provider
+- Drag-and-drop group hierarchy management
+- Role permission editing (custom roles have no effect on Spring Security yet)
diff --git a/docs/superpowers/specs/2026-03-17-rbac-management-design.md b/docs/superpowers/specs/2026-03-17-rbac-management-design.md
new file mode 100644
index 00000000..e5160f74
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-17-rbac-management-design.md
@@ -0,0 +1,327 @@
+# RBAC Management — Design Specification
+
+## Goal
+
+Implement a full RBAC management system (issue #41) with group hierarchy, role inheritance, and a management UI integrated into the admin section. Replace the flat `users.roles` text array with a proper relational model.
+
+## References
+
+- Functional spec: `examples/RBAC/rbac-ui-spec.md`
+- Visual prototype: `examples/RBAC/rbac_management_ui.html`
+
+---
+
+## Backend
+
+### Database Schema
+
+Squash V1–V10 Flyway migrations into a single `V1__init.sql`. The `users` table drops the `roles TEXT[]` column. New tables:
+
+```sql
+CREATE TABLE users (
+    user_id      TEXT        PRIMARY KEY,
+    provider     TEXT        NOT NULL,
+    email        TEXT,
+    display_name TEXT,
+    created_at   TIMESTAMPTZ NOT NULL DEFAULT now(),
+    updated_at   TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+-- RBAC: all roles — system roles seeded with fixed UUIDs, custom roles created by admins
+CREATE TABLE roles (
+    id            UUID        PRIMARY KEY DEFAULT gen_random_uuid(),
+    name          TEXT        NOT NULL UNIQUE,
+    description   TEXT        NOT NULL DEFAULT '',
+    scope         TEXT        NOT NULL DEFAULT 'custom',
+    system        BOOLEAN     NOT NULL DEFAULT false,
+    created_at    TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+-- Seed system roles with fixed UUIDs (stable across environments)
+INSERT INTO roles (id, name, description, scope, system) VALUES
+    ('00000000-0000-0000-0000-000000000001', 'AGENT',    'Agent registration and data ingestion',              'system-wide', true),
+    ('00000000-0000-0000-0000-000000000002', 'VIEWER',   'Read-only access to dashboards and data',            'system-wide', true),
+    ('00000000-0000-0000-0000-000000000003', 'OPERATOR', 'Operational commands (start/stop/configure agents)',  'system-wide', true),
+    ('00000000-0000-0000-0000-000000000004', 'ADMIN',    'Full administrative access',                         'system-wide', true);
+
+-- RBAC: groups with self-referential hierarchy
+CREATE TABLE groups (
+    id            UUID        PRIMARY KEY DEFAULT gen_random_uuid(),
+    name          TEXT        NOT NULL UNIQUE,
+    parent_group_id UUID     REFERENCES groups(id) ON DELETE SET NULL,
+    created_at    TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+-- Join: roles assigned to groups (system + custom)
+CREATE TABLE group_roles (
+    group_id      UUID        NOT NULL REFERENCES groups(id) ON DELETE CASCADE,
+    role_id       UUID        NOT NULL REFERENCES roles(id) ON DELETE CASCADE,
+    PRIMARY KEY (group_id, role_id)
+);
+
+-- Join: direct group membership for users
+CREATE TABLE user_groups (
+    user_id       TEXT        NOT NULL REFERENCES users(user_id) ON DELETE CASCADE,
+    group_id      UUID        NOT NULL REFERENCES groups(id) ON DELETE CASCADE,
+    PRIMARY KEY (user_id, group_id)
+);
+
+-- Join: direct role assignments to users (system + custom)
+CREATE TABLE user_roles (
+    user_id       TEXT        NOT NULL REFERENCES users(user_id) ON DELETE CASCADE,
+    role_id       UUID        NOT NULL REFERENCES roles(id) ON DELETE CASCADE,
+    PRIMARY KEY (user_id, role_id)
+);
+
+-- Indexes for join query performance
+CREATE INDEX idx_user_roles_user_id ON user_roles(user_id);
+CREATE INDEX idx_user_groups_user_id ON user_groups(user_id);
+CREATE INDEX idx_group_roles_group_id ON group_roles(group_id);
+CREATE INDEX idx_groups_parent ON groups(parent_group_id);
+```
+
+Note: `roles TEXT[]` column is removed from `users`. All roles (system and custom) live in the `roles` table. System roles are seeded rows with `system = true` and fixed UUIDs — the application prevents their deletion or modification.
+
+### System Roles
+
+The four system roles (AGENT, VIEWER, OPERATOR, ADMIN) are:
+- Seeded as rows in the `roles` table with `system = true` and fixed UUIDs
+- Assigned to users via the same `user_roles` join table as custom roles
+- Protected by application logic: creation, deletion, and name/scope modification are rejected
+- Displayed in the UI as read-only entries (lock icon, non-deletable)
+- Used by Spring Security / JWT for authorization decisions
+
+Custom roles (`system = false`) are application-defined and have no effect on Spring Security — they serve the RBAC management model only (for future permission expansion).
+
+The `scope` field distinguishes role domains: system roles use `system-wide`, custom roles can use descriptive scopes like `monitoring:read`, `config:write` for future permission gating.
+
+### Domain Model (Java)
+
+```java
+// Existing, modified — drop roles field
+public record UserInfo(
+    String userId,
+    String provider,
+    String email,
+    String displayName,
+    Instant createdAt
+) {}
+
+// New — enriched user for admin API responses
+public record UserDetail(
+    String userId,
+    String provider,
+    String email,
+    String displayName,
+    Instant createdAt,
+    List<RoleSummary> directRoles,    // from user_roles join (system + custom)
+    List<GroupSummary> directGroups,  // from user_groups join
+    List<RoleSummary> effectiveRoles, // computed: union of direct + inherited via groups
+    List<GroupSummary> effectiveGroups // computed: direct groups + their ancestor chain
+) {}
+
+public record GroupDetail(
+    UUID id,
+    String name,
+    UUID parentGroupId,              // nullable
+    Instant createdAt,
+    List<RoleSummary> directRoles,
+    List<RoleSummary> effectiveRoles, // direct + inherited from parent chain
+    List<UserSummary> members,       // direct members
+    List<GroupSummary> childGroups
+) {}
+
+public record RoleDetail(
+    UUID id,
+    String name,
+    String description,
+    String scope,
+    boolean system,                  // true for AGENT/VIEWER/OPERATOR/ADMIN
+    Instant createdAt,
+    List<GroupSummary> assignedGroups,
+    List<UserSummary> directUsers,
+    List<UserSummary> effectivePrincipals // all users who hold this role
+) {}
+
+// Summaries for embedding in detail responses
+public record UserSummary(String userId, String displayName, String provider) {}
+public record GroupSummary(UUID id, String name) {}
+public record RoleSummary(UUID id, String name, boolean system, String source) {}
+// source: "direct" | group name (for inherited)
+```
+
+### Inheritance Logic
+
+Server-side computation in a service class (e.g., `RbacService`):
+
+1. **Effective groups for user**: Start from `user_groups` (direct memberships), then for each group walk `parent_group_id` chain upward to collect all ancestor groups. The union is every group the user is transitively a member of.
+2. **Effective roles for user**: Direct `user_roles` + all `group_roles` for every effective group. Both system and custom roles flow through the same path.
+3. **Effective roles for group**: Direct `group_roles` + inherited from parent chain.
+4. **Effective principals for role**: All users who hold the role directly + all users in any group that has the role (transitively).
+
+No role negation — roles only grant, never deny.
+
+**Cycle detection**: When setting `parent_group_id` on a group, the application must walk the proposed parent chain upward and reject the update if it would create a cycle (i.e., the group appears in its own ancestor chain). Return HTTP 409 Conflict.
+
+### Auth Integration
+
+`JwtService` and `SecurityConfig` read system roles from `user_roles` joined to `roles WHERE system = true`, instead of `users.roles`. The `UserRepository` methods that currently read/write `users.roles` are updated to use the join table. JWT claims remain unchanged (`roles: ["ADMIN", "VIEWER"]`).
+
+OIDC auto-signup: When a user is auto-registered via OIDC token exchange, they get a row in `users` with `provider = "oidc:<issuer>"` and a default system role (VIEWER) via `user_roles`. No group membership by default.
+
+### API Endpoints
+
+All under `/api/v1/admin/` prefix, protected by `@PreAuthorize("hasRole('ADMIN')")`.
+
+The existing `PUT /users/{userId}/roles` bulk endpoint is removed. Role assignments use individual add/remove endpoints.
+
+All mutation endpoints log to the `AuditService` (category: `USER_MGMT` for user operations, `RBAC` for group/role operations).
+
+**Users** — response type: `UserDetail`
+
+| Method | Path | Description | Request Body |
+|---|---|---|---|
+| GET | `/users` | List all users with effective roles/groups | — |
+| GET | `/users/{id}` | Full user detail | — |
+| POST | `/users/{id}/roles/{roleId}` | Assign role to user (system or custom) | — |
+| DELETE | `/users/{id}/roles/{roleId}` | Remove role from user | — |
+| POST | `/users/{id}/groups/{groupId}` | Add user to group | — |
+| DELETE | `/users/{id}/groups/{groupId}` | Remove user from group | — |
+| DELETE | `/users/{id}` | Delete user | — |
+
+**Groups** — response type: `GroupDetail`
+
+| Method | Path | Description | Request Body |
+|---|---|---|---|
+| GET | `/groups` | List all groups with hierarchy | — |
+| GET | `/groups/{id}` | Full group detail | — |
+| POST | `/groups` | Create group | `{ name, parentGroupId? }` |
+| PUT | `/groups/{id}` | Update group | `{ name?, parentGroupId? }` — returns 409 on cycle |
+| DELETE | `/groups/{id}` | Delete group — cascades role/member associations; child groups become top-level (parent set to null) | — |
+| POST | `/groups/{id}/roles/{roleId}` | Assign role to group | — |
+| DELETE | `/groups/{id}/roles/{roleId}` | Remove role from group | — |
+
+**Roles** — response type: `RoleDetail`
+
+| Method | Path | Description | Request Body |
+|---|---|---|---|
+| GET | `/roles` | List all roles (system + custom) | — |
+| GET | `/roles/{id}` | Role detail | — |
+| POST | `/roles` | Create custom role | `{ name, description?, scope? }` |
+| PUT | `/roles/{id}` | Update custom role (rejects system roles) | `{ name?, description?, scope? }` |
+| DELETE | `/roles/{id}` | Delete custom role (rejects system roles) | — |
+
+**Dashboard:**
+
+| Method | Path | Description |
+|---|---|---|
+| GET | `/rbac/stats` | `{ userCount, activeUserCount, groupCount, maxGroupDepth, roleCount }` |
+
+---
+
+## Frontend
+
+### Routing
+
+New route at `/admin/rbac` in `router.tsx`, lazy-loaded:
+
+```tsx
+const RbacPage = lazy(() => import('./pages/admin/rbac/RbacPage').then(m => ({ default: m.RbacPage })));
+// ...
+{ path: 'admin/rbac', element: <Suspense fallback={null}><RbacPage /></Suspense> }
+```
+
+Update `AppSidebar` ADMIN_LINKS to add `{ to: '/admin/rbac', label: 'User Management' }`.
+
+### Component Structure
+
+```
+pages/admin/rbac/
+├── RbacPage.tsx                 ← ADMIN role gate + tab navigation
+├── RbacPage.module.css          ← All RBAC-specific styles
+├── DashboardTab.tsx             ← Stat cards + inheritance diagram
+├── UsersTab.tsx                 ← Split pane orchestrator
+├── GroupsTab.tsx                ← Split pane orchestrator
+├── RolesTab.tsx                 ← Split pane orchestrator
+├── components/
+│   ├── EntityListPane.tsx       ← Reusable: search input + scrollable card list
+│   ├── EntityCard.tsx           ← Single list row: avatar, name, meta, tags, status dot
+│   ├── UserDetail.tsx           ← Header, fields, groups, effective roles, group tree
+│   ├── GroupDetail.tsx          ← Header, fields, members, children, roles, hierarchy
+│   ├── RoleDetail.tsx           ← Header, fields, assigned groups/users, effective principals
+│   ├── InheritanceChip.tsx      ← Chip with dashed border + "↑ Source" annotation
+│   ├── GroupTree.tsx            ← Indented tree with corner connectors
+│   ├── EntityAvatar.tsx         ← Circle (user), rounded-square (group/role), color by type
+│   ├── OidcBadge.tsx            ← Small badge showing OIDC provider origin
+│   ├── InheritanceDiagram.tsx   ← Three-column Groups→Roles→Users read-only diagram
+│   └── InheritanceNote.tsx      ← Green-bordered explanation block
+api/queries/admin/
+│   └── rbac.ts                  ← useUsers, useUser, useGroups, useGroup, useRoles, useRole, useRbacStats + mutation hooks
+```
+
+### Tab Navigation
+
+`RbacPage` uses a horizontal tab bar (Dashboard | Users | Groups | Roles) with URL-synced active state via query parameter (`?tab=users`). Each tab renders its content below the tab bar in the full main panel area.
+
+### Split Pane Layout
+
+Users, Groups, and Roles tabs share the same layout:
+- **Left (52%)**: `EntityListPane` with search input + scrollable entity cards
+- **Right (48%)**: Detail pane showing selected entity, or empty state prompt
+- Resizable via `ResizableDivider` (existing shared component)
+
+### Entity Card Patterns
+
+**User card:** Circle avatar (initials, blue tint) + name + email/primary-group meta + role tags (amber) + group tags (green) + status dot + OIDC badge if `provider !== "local"`
+
+**Group card:** Rounded-square avatar (initials, green/amber/red by domain) + name + parent/member-count meta + role tags (direct solid, inherited faded+italic)
+
+**Role card:** Rounded-square avatar (initials, amber tint) + name + description/assignment-count meta + assigned-to tags. System roles show a lock icon.
+
+### Badge/Chip Styling
+
+Following the spec and existing CSS token system:
+
+| Chip type | Background | Border | Text |
+|---|---|---|---|
+| Role (direct) | `var(--amber-dim)` | solid `var(--amber)` | amber text |
+| Role (inherited) | transparent | dashed `var(--amber)` | faded amber, italic |
+| Group | `var(--green-dim)` / `#E1F5EE` | solid green | green text |
+| OIDC badge | `var(--cyan-dim)` | solid cyan | cyan text, shows provider |
+| System role | Same as role but with lock icon | — | — |
+
+Inherited role chips include `↑ GroupName` annotation in the detail pane.
+
+### OIDC Badge
+
+Displayed on user cards and user detail when `provider !== "local"`. Shows a small cyan-tinted pill with the provider name (e.g., "OIDC" or the issuer hostname). Positioned after the user's name in the card, and as a field in the detail pane.
+
+### Search
+
+Client-side filtering on entity list panes — filter by any visible text (name, email, group, role). Sufficient for the expected user count.
+
+### State Management
+
+- React Query for all server state (users, groups, roles, stats)
+- Local `useState` for selected entity, search filter, active tab
+- Mutations invalidate related queries (e.g., updating a user's groups invalidates both user and group queries)
+
+---
+
+## Migration Strategy
+
+1. Delete all V1–V10 migration files
+2. Create single `V1__init.sql` containing the full consolidated schema
+3. Deployed environments: drop and recreate the database (data loss accepted)
+4. CI/CD: no special handling — clean database on deploy
+5. Update `application.yml` if needed: `spring.flyway.clean-on-validation-error: true` or manual DB drop
+
+---
+
+## Out of Scope
+
+- Permission-based access control (custom roles don't gate endpoints — system roles do)
+- Audit log panel within RBAC (existing audit log page covers this)
+- Bulk import/export of users or groups
+- SCIM provisioning
+- Role negation / deny rules
diff --git a/docs/ui-mocks/camel-developer-review.md b/docs/ui-mocks/camel-developer-review.md
new file mode 100644
index 00000000..ac17413c
--- /dev/null
+++ b/docs/ui-mocks/camel-developer-review.md
@@ -0,0 +1,261 @@
+# Cameleer3 Dashboard Review -- Senior Camel Developer Perspective
+
+**Reviewer**: Senior Apache Camel Developer (10+ years, Java DSL / Spring Boot)
+**Artifact reviewed**: `mock-v2-light.html` -- Operations Dashboard (v2 synthesis)
+**Date**: 2026-03-17
+
+---
+
+## 1. What the Dashboard Gets RIGHT
+
+### Business ID as First-Class Citizen
+The Order ID and Customer columns in the execution table are exactly what I need. When support calls me about "order OP-88421", I can paste that into the search and find the execution immediately. Every other monitoring tool I have used forces me to map business IDs to correlation IDs manually. This alone would save me 10-15 minutes per incident.
+
+### Inline Error Previews
+Showing the exception message directly in the table row without requiring a click-through is genuinely useful. The two error examples in the mock (`HttpOperationFailedException` with a 504, `SQLTransientConnectionException` with HikariPool exhaustion) are realistic Camel exceptions. I can scan the error list and immediately tell whether it is a downstream timeout or a connection pool issue. That distinction determines whether I investigate our code or page the DBA.
+
+### Processor Timeline (Gantt View)
+The processor timeline in the detail panel is the single most valuable feature. Seeing that `to(payment-api)` consumed 280ms out of a 412ms total execution, while `enrich(inventory)` took 85ms, immediately tells me WHERE the bottleneck is. In my experience, 95% of Camel performance issues are in external calls, and this view pinpoints them. The color coding (green/yellow/red) for processor bars makes the slow step obvious at a glance.
+
+### SLA Awareness Baked In
+The SLA threshold line on the latency chart, the "SLA" tag on slow durations, and the "CLOSE" warning on the p99 card are exactly the kind of proactive indicators I want. Most monitoring tools show me raw numbers; this dashboard shows me numbers in context. I know immediately that 287ms p99 is dangerously close to our 300ms SLA.
+
+### Shift-Aware Time Context
+The "since 06:00" shift concept is something I have never seen in a developer tool but actually matches how production support works. When I start my day shift, I want to see what happened overnight and what is happening now, not a rolling 24-hour window that mixes yesterday afternoon with this morning.
+
+### Agent Health in Sidebar
+Seeing agent status (live/stale/dead), throughput per agent, and error rates at a glance in the sidebar is practical. When an agent goes stale, I know to check if a pod restarted or if there is a network partition.
+
+### Application-to-Route Navigation Hierarchy
+The sidebar tree (Applications > order-service > Routes > order-intake, order-enrichment, etc.) matches how I think about Camel deployments. I have multiple applications, each with multiple routes. Being able to filter by application first, then drill into routes, is the right hierarchy.
+
+---
+
+## 2. What is MISSING or Could Be Better
+
+### 2.1 Exchange Body/Header Inspection -- CRITICAL GAP
+
+**Pain point**: The "Exchange" tab exists in the detail panel tabs but its content is not shown. This is the single most important debugging feature for a Camel developer. When a message fails at step 5 of 7, I need to see:
+- What was the original inbound message (before any transformation)?
+- What did the exchange body look like at each processor step?
+- Which headers were present at each step, and which were added/removed?
+- What was the exception body (often different from the exception message)?
+
+**How to address it**: The Exchange tab should show a step-by-step diff view of the exchange. For each processor in the route, show the body (with a JSON/XML pretty-printer) and the headers map. Highlight headers that were added at that step. Allow comparing any two steps side-by-side. Show the original inbound message prominently at the top.
+
+**Priority**: **Must-Have**. Without this, the dashboard is an operations monitor, not a debugging tool. This is the difference between "I can see something failed" and "I can see WHY it failed."
+
+### 2.2 Route Diagram / Visual Graph -- MENTIONED BUT NOT SHOWN
+
+**Pain point**: The "View Route Diagram" button exists in the detail actions, but there is no mockup of what the route diagram looks like. As a Camel developer, I need to see the DAG (directed acyclic graph) of my route: from(jms:orders) -> unmarshal -> validate -> choice -> [branch A: enrich -> transform -> to(http)] [branch B: log -> to(dlq)]. I also need to see execution overlay on the diagram -- which path did THIS specific exchange take, and how long did each node take.
+
+**How to address it**: Add a Route Diagram page/view that shows:
+- The route definition as an interactive DAG (nodes = processors, edges = flow)
+- Execution overlay: color-code each node by success/failure for a specific execution
+- Aggregate overlay: color-code each node by throughput/error rate over a time window
+- Highlight the path taken by the selected exchange (dim the branches not taken)
+- Show inter-route connections (e.g., `direct:`, `seda:`, `vm:` endpoints linking routes)
+
+**Priority**: **Must-Have**. Cameleer already has `RouteGraph` data from agents -- this is the tool's differentiating feature.
+
+### 2.3 Cross-Route Correlation / Message Tracing
+
+**Pain point**: A single business transaction (e.g., an order) often spans multiple routes: `order-intake` -> `order-enrichment` -> `payment-process` -> `shipment-dispatch`. The dashboard shows each route execution as a separate row. There is no way to see the full journey of order OP-88421 across all routes.
+
+**How to address it**: Add a "Transaction Trace" or "Message Flow" view that:
+- Groups all executions sharing a breadcrumbId or correlation ID
+- Shows them as a horizontal timeline or waterfall chart
+- Highlights which route in the chain failed
+- Works across `direct:`, `seda:`, and `vm:` endpoints that link routes
+
+The search bar says "Search by Order ID, correlation ID" which is a good start, but the results should show the correlated group, not just individual rows.
+
+**Priority**: **Must-Have**. Splitter/aggregator patterns and multi-route flows are the norm, not the exception, in real Camel applications.
+
+### 2.4 Dead Letter Queue Monitoring
+
+**Pain point**: When messages fail and are routed to a dead letter channel (which is the standard Camel error handling pattern), I need to know: how many messages are in the DLQ, what are they, how long have they been there, and can I retry them?
+
+**How to address it**: Add a DLQ section or page showing:
+- Count of messages per dead letter endpoint
+- Age distribution (how many are from today vs. last week)
+- Message preview (body + headers + the exception that caused routing to DLQ)
+- Retry action (re-submit the message to the original route)
+- Purge action (acknowledge and discard)
+
+**Priority**: **Must-Have**. DLQ management is a daily production task.
+
+### 2.5 Per-Processor Statistics (Aggregate View)
+
+**Pain point**: The processor timeline in the detail panel shows per-processor timing for a single execution. But I also need aggregate statistics: for processor `to(payment-api)`, what is the p50/p95/p99 latency over the last hour? How many times did it fail? Is it getting slower over time?
+
+**How to address it**: Clicking a processor name in the timeline should show aggregate stats for that processor. Alternatively, the Route Detail page should have a "Processors" tab with a table of all processors in the route, their call count, success rate, and latency percentiles.
+
+**Priority**: **Must-Have**. Identifying a chronically slow processor is different from identifying a one-off slow execution.
+
+### 2.6 Error Pattern Grouping / Top Errors
+
+**Pain point**: The dashboard shows individual error rows. When there are 38 errors, I do not want to scroll through all 38. I want to see: "23 of the 38 errors are `HttpOperationFailedException` on `payment-process`, 10 are `SQLTransientConnectionException` on `order-enrichment`, 5 are `ValidationException` on `order-intake`." The design notes mention "Top error pattern grouping panel" from the operator expert, but it is not in the final mock.
+
+**How to address it**: Add an error summary panel above or alongside the execution table showing errors grouped by exception class + route. Each group should show count, first/last occurrence, and whether the count is trending up.
+
+**Priority**: **Must-Have**. Pattern recognition is more important than individual error viewing.
+
+### 2.7 Route Status Management
+
+**Pain point**: I need to know which routes are started, stopped, or suspended. And I need the ability to stop/start/suspend individual routes without redeploying. This is routine in production -- temporarily suspending a route that is flooding a downstream system.
+
+**How to address it**: The sidebar route list should show route status (started/stopped/suspended) with icons. Right-click or action menu on a route should offer start/stop/suspend. This maps directly to Camel's route controller API.
+
+**Priority**: **Nice-to-Have** for v1, **Must-Have** for v2. Operators will ask for this quickly.
+
+### 2.8 Route Version Comparison
+
+**Pain point**: After a deployment, I want to compare the current route definition with the previous version. Did someone add a processor? Change an endpoint URI? Route definition drift is a real source of production issues.
+
+**How to address it**: Store route graph snapshots per deployment/version. Show a diff view highlighting added/removed/modified processors.
+
+**Priority**: **Nice-to-Have**. Valuable but less urgent than the above.
+
+### 2.9 Thread Pool / Resource Monitoring
+
+**Pain point**: Camel's default thread pool max is 20. When all threads are consumed, messages queue up silently. The HikariPool error in the mock is a perfect example -- pool exhaustion. I need visibility into thread pool utilization, connection pool utilization, and inflight exchange count.
+
+**How to address it**: Add a "Resources" section (either in the agent detail or a separate page) showing:
+- Camel thread pool utilization (active/max)
+- Connection pool utilization (from endpoint components)
+- Inflight exchange count per route
+- Consumer prefetch/backlog (for JMS/Kafka consumers)
+
+**Priority**: **Nice-to-Have** initially, but becomes **Must-Have** when debugging pool exhaustion issues.
+
+### 2.10 Saved Searches / Alert Rules
+
+**Pain point**: I find myself searching for the same patterns repeatedly: "errors on payment-process in the last hour", "executions over 500ms for order-enrichment". There is no way to save these as bookmarks or convert them into alert rules.
+
+**How to address it**: Allow saving filter configurations as named views. Allow converting a saved search into an alerting rule (email/webhook when count exceeds threshold).
+
+**Priority**: **Nice-to-Have**.
+
+---
+
+## 3. Specific Page/Feature Recommendations
+
+### 3.1 Route Detail Page
+
+When I click a route name (e.g., `order-intake`) from the sidebar, I should see:
+
+- **Header**: Route name, status (started/stopped), uptime, route definition source (Java DSL / XML / YAML)
+- **KPI Strip**: Total executions, success rate, p50/p99 latency, inflight count, throughput -- all for this route only
+- **Processor Table**: Every processor in the route with columns: name, type, call count, success rate, p50 latency, p99 latency, total time %. Sortable by any column. This is where I find the bottleneck processor.
+- **Route Diagram**: Interactive DAG with execution overlay. Nodes sized by throughput, colored by error rate. Clicking a node filters the execution list to that processor.
+- **Recent Executions**: Filtered version of the main table, showing only this route's executions.
+- **Error Patterns**: Top errors for this route, grouped by exception class.
+
+### 3.2 Exchange / Message Inspector
+
+When I click "Exchange" tab in the detail panel:
+
+- **Inbound Message**: The original message as received by the route's consumer. Body + headers. Shown prominently, always visible.
+- **Step-by-Step Trace**: For each processor, show the exchange state AFTER that processor ran. Diff mode should highlight what changed (body mutations, added headers, removed headers).
+- **Properties**: Camel exchange properties (not just headers). Properties often carry routing decisions.
+- **Exception**: If the exchange failed, show the caught exception, the handled flag, and whether it was routed to a dead letter channel.
+- **Response**: If the route produces a response (e.g., REST endpoint), show the outbound body.
+
+Display format should auto-detect JSON/XML and pretty-print. Binary payloads should show hex dump with size.
+
+### 3.3 Metrics Dashboard (Developer vs. Operator KPIs)
+
+The current metrics (throughput, latency p99, error rate) are operator KPIs. A Camel developer also needs:
+
+**Developer KPIs** (add a "Developer" metrics view):
+- Per-processor latency breakdown (stacked bar: which processors consume the most time)
+- External endpoint response time (HTTP, DB, JMS) -- separate from Camel processing time
+- Type converter cache hit rate (rarely needed, but valuable when debugging serialization issues)
+- Redelivery count (how many messages required retries before succeeding)
+- Content-based router distribution (for `choice()` routes: how many messages went down each branch)
+
+**Operator KPIs** (already well-covered):
+- Throughput, error rate, latency percentiles -- these are solid as-is
+
+### 3.4 Dead Letter Queue View
+
+A dedicated DLQ page:
+
+- **Summary Cards**: One card per DLQ endpoint (e.g., `jms:DLQ.orders`, `seda:error-handler`), showing message count, oldest message age, newest message timestamp.
+- **Message List**: Table with columns: original route, exception class, business ID, timestamp, retry count.
+- **Message Detail**: Click a DLQ message to see the exchange snapshot (body + headers + exception) at the time of failure.
+- **Actions**: Retry (re-submit to original endpoint), Retry All (bulk retry for a pattern), Discard, Move to another queue.
+- **Filters**: By exception type, by route, by age.
+
+### 3.5 Route Comparison
+
+Two use cases:
+
+1. **Version diff**: Compare route graph v3.2.0 vs. v3.2.1. Show added/removed/modified processors as a visual diff on the DAG.
+2. **Performance comparison**: Compare this week's latency distribution for `payment-process` with last week's. Overlay histograms. Useful for validating that a deployment improved (or degraded) performance.
+
+---
+
+## 4. Information Architecture Critique
+
+### What Works
+- **Sidebar hierarchy** (Applications > Routes) is correct and matches how Camel projects are structured.
+- **Health strip at top** provides instant situational awareness without scrolling.
+- **Master-detail pattern** (table + slide-in panel) avoids page navigation for quick inspection. This keeps context.
+- **Keyboard shortcuts** (Ctrl+K search, arrow navigation, Esc to close) are the right accelerators for power users.
+
+### What Needs Adjustment
+
+**The sidebar is too flat.** It shows applications and routes in the same list, but there is no way to navigate to:
+- A dedicated Route Detail page (with per-processor stats, diagram, error patterns)
+- An Agent Detail page (with resource utilization, version info, configuration)
+- A DLQ page
+- A Search/Trace page (for cross-route correlation)
+
+Recommendation: Add top-level navigation items to the sidebar:
+```
+Dashboard  (the current view)
+Routes     (route list with status, drill into route detail)
+Traces     (cross-route message flow / correlation)
+Errors     (grouped error patterns, DLQ)
+Agents     (agent health, resource utilization)
+Diagrams   (route graph visualization)
+```
+
+**Route click should go deeper.** Currently, clicking a route in the sidebar filters the execution table. This is useful, but clicking the route NAME in a table row or in the detail panel should navigate to a dedicated Route Detail page with per-processor aggregate stats and the route diagram.
+
+**Search results need grouping.** The Ctrl+K search bar says "Search by Order ID, route, error..." but search results should group by correlation ID when searching by business ID. If I search for "OP-88421", I want to see ALL executions related to that order across all routes, not just the one row in `payment-process`.
+
+**1-click access priorities:**
+- Health overview: 1 click (current: 0 clicks -- it is the home page -- good)
+- Filter by errors only: 1 click (current: 1 click on Error pill -- good)
+- View a specific execution's processor timeline: 2 clicks (current: 1 click on row -- good)
+- View exchange body/headers: should be 2 clicks (click row, click Exchange tab). Currently not implemented.
+- View route diagram: should be 2 clicks (click route name, see diagram). Currently requires finding the button in the detail panel.
+- Cross-route trace: should be 2 clicks (click correlation ID or business ID, see trace). Currently not possible.
+- DLQ status: should be 1 click from sidebar. Currently not available.
+
+---
+
+## 5. Score Card
+
+| Dimension                   | Score (1-10) | Notes |
+|-----------------------------|:---:|-------|
+| Transaction tracking        | 4   | Individual executions visible, but no cross-route transaction view. Correlation ID shown but not actionable. |
+| Root cause analysis         | 6   | Processor timeline identifies the slow/failing step. Error messages shown inline. But no exchange body inspection, no stack trace expansion, no header diff. |
+| Performance monitoring       | 7   | Throughput, latency p99, error rate charts with SLA lines are solid. Missing per-processor aggregate stats and resource utilization. |
+| Route visualization         | 3   | Route names in sidebar, but no actual route diagram/DAG. The "View Route Diagram" button exists with no destination. This is Cameleer's key differentiator -- it must ship. |
+| Exchange/message visibility | 2   | Exchange tab exists but has no content. No body inspection, no header view, no step-by-step diff. This is the most critical gap. |
+| Correlation/tracing         | 3   | Correlation ID displayed in detail panel, but no way to trace a message across routes. No breadcrumb linking. No transaction waterfall. |
+| Overall daily usefulness    | 5   | As an operations monitor (is anything broken right now?), it scores 7-8. As a developer debugging tool (why is it broken and how do I fix it?), it scores 3-4. The gap is in the debugging/inspection features. |
+
+### Summary Verdict
+
+The dashboard is a **strong operations monitor** -- it answers "what is happening right now?" effectively. The health strip, SLA awareness, shift context, business ID columns, and inline error previews are genuinely useful and better than most tools I have used.
+
+However, it is a **weak debugging tool** -- it does not yet answer "why did this specific message fail?" or "what did the exchange look like at each step?" The Exchange tab, route diagram, cross-route tracing, and error pattern grouping are the features that would make this a daily-driver tool rather than a pretty overview I glance at in the morning.
+
+The processor Gantt chart in the detail panel is the single best feature in the entire dashboard. Build on that. Make it clickable (click a processor to see the exchange state at that point). Add aggregate stats. Link it to the route diagram. That is where this tool becomes indispensable.
+
+**Bottom line**: Ship the exchange inspector, the route diagram, and cross-route tracing, and this goes from a 5/10 to an 8/10 daily-use tool.
diff --git a/docs/ui-mocks/mock-design-expert.html b/docs/ui-mocks/mock-design-expert.html
new file mode 100644
index 00000000..9b9bdcab
--- /dev/null
+++ b/docs/ui-mocks/mock-design-expert.html
@@ -0,0 +1,1502 @@
+<!--
+  ============================================================================
+  CAMELEER3 — Dashboard Visual Design Mock
+  ============================================================================
+
+  DESIGN RATIONALE
+  ================
+
+  1. COLOR PHILOSOPHY — "Desert Dusk"
+     Moving away from the generic dark-navy dashboard, this design uses a
+     warm sandstone/parchment palette inspired by desert caravans (the camel
+     connection). The base is a warm off-white (#FAF8F5) with layered ivory
+     surfaces. The accent color is a rich amber-gold (#C6820E) that evokes
+     caravan lanterns. This creates a distinctive identity that no other
+     monitoring tool has — most are cold blue/gray.
+
+  2. TYPOGRAPHY
+     DM Sans for body text (geometric, modern, highly legible at small sizes).
+     JetBrains Mono for data values and code (excellent number alignment).
+     Four-level hierarchy: Page title (20px/700), Section headers (13px/600
+     uppercase tracking), Body (13px/400), Meta (11px/400 muted).
+
+  3. INFORMATION DENSITY
+     Inspired by the nJAMS three-panel layout: operators need to see many
+     executions at once. Rows are compact (40px) but not cramped. The stats
+     bar uses horizontal cards rather than tall boxes to preserve vertical
+     space for the table. A metrics panel below the fold provides trend data
+     without cluttering the primary view.
+
+  4. STATUS COLORS
+     Success: Warm olive-green (#3D7C47) — natural, not neon
+     Warning: Burnt orange (#C27516) — distinct from the amber accent
+     Error: Terracotta red (#C0392B) — warm red, not alarming pink
+     Running: Teal (#1A7F8E) — cool contrast against warm palette
+
+  5. LAYOUT
+     Three zones: Navigation sidebar (220px, warm dark), Main content (flex),
+     optional detail panel. The sidebar uses a deep warm charcoal (#2C2520)
+     instead of pure black — keeping the warm family. Active items get a
+     golden left-border accent.
+
+  6. BRAND IDENTITY
+     The camel silhouette in the logo area, warm desert tones, and the name
+     "Cameleer" (one who leads camels) create a cohesive brand. The overall
+     feel is "premium craft tool" rather than "enterprise dashboard."
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>Cameleer3 — Route Execution Monitor</title>
+<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@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ═══════════════════════════════════════════════════════════════════════════
+   RESET & FOUNDATIONS
+   ═══════════════════════════════════════════════════════════════════════════ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* ── Surface palette (warm parchment) ── */
+  --bg-body:     #F5F2ED;
+  --bg-surface:  #FFFFFF;
+  --bg-raised:   #FAF8F5;
+  --bg-inset:    #F0EDE8;
+  --bg-hover:    #F5F0EA;
+
+  /* ── Sidebar (warm charcoal) ── */
+  --sidebar-bg:     #2C2520;
+  --sidebar-hover:  #3A322C;
+  --sidebar-active: #4A3F38;
+  --sidebar-text:   #BFB5A8;
+  --sidebar-muted:  #7A6F63;
+
+  /* ── Text ── */
+  --text-primary:   #1A1612;
+  --text-secondary: #5C5347;
+  --text-muted:     #9C9184;
+  --text-faint:     #C4BAB0;
+
+  /* ── Borders ── */
+  --border:        #E4DFD8;
+  --border-subtle: #EDE9E3;
+
+  /* ── Brand accent (amber-gold) ── */
+  --amber:       #C6820E;
+  --amber-light: #F0D9A8;
+  --amber-bg:    #FDF6E9;
+  --amber-deep:  #8B5A06;
+
+  /* ── Status colors ── */
+  --success:     #3D7C47;
+  --success-bg:  #EFF7F0;
+  --success-border: #C2DFC6;
+  --warning:     #C27516;
+  --warning-bg:  #FEF5E7;
+  --warning-border: #F0D9A8;
+  --error:       #C0392B;
+  --error-bg:    #FDF0EE;
+  --error-border: #F0C4BE;
+  --running:     #1A7F8E;
+  --running-bg:  #E8F5F7;
+  --running-border: #B0DDE4;
+
+  /* ── Typography ── */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* ── Radii ── */
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* ── Shadows ── */
+  --shadow-sm: 0 1px 2px rgba(44, 37, 32, 0.06);
+  --shadow-md: 0 2px 8px rgba(44, 37, 32, 0.08);
+  --shadow-lg: 0 4px 16px rgba(44, 37, 32, 0.10);
+  --shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
+}
+
+html { font-size: 14px; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   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-faint); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   LAYOUT SKELETON
+   ═══════════════════════════════════════════════════════════════════════════ */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SIDEBAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-logo {
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.sidebar-logo svg { flex-shrink: 0; }
+
+.sidebar-logo .brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--amber-light);
+  letter-spacing: -0.3px;
+}
+
+.sidebar-logo .version {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+  margin-left: 2px;
+}
+
+/* Sidebar search */
+.sidebar-search {
+  padding: 12px 14px;
+}
+
+.sidebar-search input {
+  width: 100%;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--radius-sm);
+  padding: 7px 10px 7px 30px;
+  color: var(--sidebar-text);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.sidebar-search input::placeholder { color: var(--sidebar-muted); }
+.sidebar-search input:focus { border-color: rgba(198, 130, 14, 0.4); }
+
+.sidebar-search-wrap {
+  position: relative;
+}
+
+.sidebar-search-wrap .search-icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sidebar-muted);
+  font-size: 12px;
+}
+
+/* Section header */
+.sidebar-section {
+  padding: 16px 14px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+}
+
+/* Sidebar items */
+.sidebar-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  color: var(--sidebar-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.12s;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  margin-bottom: 1px;
+}
+
+.sidebar-item:hover {
+  background: var(--sidebar-hover);
+  color: #E8DFD4;
+}
+
+.sidebar-item.active {
+  background: var(--sidebar-active);
+  color: var(--amber-light);
+  border-left-color: var(--amber);
+}
+
+.sidebar-item .health {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
+.health-stale { background: var(--warning); }
+.health-dead { background: var(--sidebar-muted); }
+
+.sidebar-item .item-info { flex: 1; min-width: 0; }
+.sidebar-item .item-name {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidebar-item .item-meta {
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  font-family: var(--font-mono);
+}
+
+.sidebar-item .item-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  background: rgba(255,255,255,0.06);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.sidebar-item.active .item-count {
+  background: rgba(198, 130, 14, 0.2);
+  color: var(--amber-light);
+}
+
+/* Sidebar divider */
+.sidebar-divider {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 8px 14px;
+}
+
+/* Sidebar bottom */
+.sidebar-bottom {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 8px 6px;
+}
+
+.sidebar-bottom .sidebar-item {
+  font-size: 12px;
+  color: var(--sidebar-muted);
+  border-left: 3px solid transparent;
+}
+
+.sidebar-bottom .sidebar-item:hover {
+  color: var(--sidebar-text);
+}
+
+.sidebar-bottom .sidebar-item .bottom-icon {
+  font-size: 14px;
+  width: 18px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MAIN CONTENT AREA
+   ═══════════════════════════════════════════════════════════════════════════ */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── Top Bar ── */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 28px;
+  height: 52px;
+  flex-shrink: 0;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topbar-breadcrumb .crumb-active {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.topbar-breadcrumb .crumb-sep {
+  color: var(--text-faint);
+  font-size: 11px;
+}
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-env {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.topbar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--amber-bg);
+  color: var(--amber);
+  font-weight: 600;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--amber-light);
+}
+
+.topbar-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  min-width: 200px;
+}
+
+.topbar-search:hover { border-color: var(--text-faint); }
+
+.topbar-kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  padding: 0 4px;
+  border-radius: 3px;
+  color: var(--text-faint);
+  margin-left: auto;
+}
+
+/* ── Content scroll container ── */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px 28px 40px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   PAGE HEADER
+   ═══════════════════════════════════════════════════════════════════════════ */
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.page-header h1 {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.3px;
+  color: var(--text-primary);
+}
+
+.page-header .subtitle {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.live-btn {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 16px;
+  border: 1px solid var(--success-border);
+  border-radius: var(--radius-sm);
+  background: var(--success-bg);
+  color: var(--success);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.live-btn:hover {
+  background: #E2F0E4;
+}
+
+.live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 124, 71, 0.35); }
+  50% { box-shadow: 0 0 0 5px rgba(61, 124, 71, 0); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FILTER BAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.filter-input-wrap {
+  position: relative;
+  flex: 1;
+  max-width: 360px;
+}
+
+.filter-input-wrap .fi-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-faint);
+  font-size: 13px;
+}
+
+.filter-input {
+  width: 100%;
+  padding: 8px 12px 8px 32px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s;
+  box-shadow: var(--shadow-sm);
+}
+
+.filter-input::placeholder { color: var(--text-faint); }
+.filter-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
+
+.filter-pills {
+  display: flex;
+  gap: 4px;
+}
+
+.filter-pill {
+  padding: 6px 14px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s;
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
+}
+
+.filter-pill:hover {
+  border-color: var(--text-faint);
+  background: var(--bg-raised);
+}
+
+.filter-pill.active {
+  background: var(--amber-bg);
+  border-color: var(--amber-light);
+  color: var(--amber-deep);
+  font-weight: 600;
+}
+
+.filter-pill .pill-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  margin-left: 4px;
+  opacity: 0.7;
+}
+
+.filter-pill.active .pill-count { opacity: 1; }
+
+.filter-select {
+  padding: 7px 28px 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-family: var(--font-body);
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239C9184' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  box-shadow: var(--shadow-sm);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   STATS BAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+.stats-bar {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  flex: 1;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 14px 18px;
+  box-shadow: var(--shadow-card);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  transition: box-shadow 0.15s;
+}
+
+.stat-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.stat-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.stat-icon.total { background: var(--bg-inset); color: var(--text-secondary); }
+.stat-icon.success { background: var(--success-bg); color: var(--success); }
+.stat-icon.warning { background: var(--warning-bg); color: var(--warning); }
+.stat-icon.error { background: var(--error-bg); color: var(--error); }
+.stat-icon.duration { background: var(--running-bg); color: var(--running); }
+
+.stat-info { min-width: 0; }
+
+.stat-label {
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 1px;
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.stat-value.success-val { color: var(--success); }
+.stat-value.warning-val { color: var(--warning); }
+.stat-value.error-val { color: var(--error); }
+
+.stat-trend {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--success);
+  margin-top: 1px;
+}
+
+.stat-trend.down { color: var(--error); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   EXECUTION TABLE
+   ═══════════════════════════════════════════════════════════════════════════ */
+.table-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  margin-bottom: 24px;
+}
+
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.table-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.table-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+
+th:hover { color: var(--text-secondary); }
+
+th.sorted {
+  color: var(--amber);
+}
+
+th .sort-arrow {
+  font-size: 8px;
+  margin-left: 3px;
+  opacity: 0.4;
+}
+
+th.sorted .sort-arrow { opacity: 1; }
+
+tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.08s;
+  cursor: pointer;
+}
+
+tr:last-child { border-bottom: none; }
+tr:hover { background: var(--bg-hover); }
+
+td {
+  padding: 10px 16px;
+  font-size: 13px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.td-route {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.td-route:hover { color: var(--amber); }
+
+.td-mono {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.td-id {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.td-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.td-group-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--amber);
+}
+
+/* Status badges */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.status-success {
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+}
+
+.status-warning {
+  background: var(--warning-bg);
+  color: var(--warning);
+  border: 1px solid var(--warning-border);
+}
+
+.status-error {
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid var(--error-border);
+}
+
+.status-running {
+  background: var(--running-bg);
+  color: var(--running);
+  border: 1px solid var(--running-border);
+}
+
+.status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+}
+
+.status-success .status-dot { background: var(--success); }
+.status-warning .status-dot { background: var(--warning); }
+.status-error .status-dot { background: var(--error); }
+.status-running .status-dot { background: var(--running); animation: pulse-sm 1.5s ease-in-out infinite; }
+
+@keyframes pulse-sm {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 127, 142, 0.3); }
+  50% { box-shadow: 0 0 0 3px rgba(26, 127, 142, 0); }
+}
+
+/* Duration bar (visual sparkline in duration column) */
+.duration-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.duration-bar {
+  width: 60px;
+  height: 4px;
+  background: var(--bg-inset);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.duration-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  background: var(--running);
+  transition: width 0.3s ease;
+}
+
+.duration-bar-fill.fast { background: var(--success); }
+.duration-bar-fill.medium { background: var(--warning); }
+.duration-bar-fill.slow { background: var(--error); }
+
+/* Pagination */
+.table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 18px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.page-btn {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.12s;
+}
+
+.page-btn:hover { background: var(--bg-raised); border-color: var(--text-faint); }
+.page-btn.active {
+  background: var(--amber-bg);
+  border-color: var(--amber-light);
+  color: var(--amber-deep);
+  font-weight: 600;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   METRICS PANEL
+   ═══════════════════════════════════════════════════════════════════════════ */
+.metrics-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.metric-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.metric-card-header {
+  padding: 14px 18px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.metric-card-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.metric-card-value {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.metric-chart {
+  padding: 12px 18px 14px;
+  height: 100px;
+  position: relative;
+}
+
+/* SVG Chart styling */
+.chart-line {
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.chart-area {
+  opacity: 0.12;
+}
+
+.chart-grid-line {
+  stroke: var(--border-subtle);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+}
+
+.chart-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  fill: var(--text-faint);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   UTILITY CLASSES
+   ═══════════════════════════════════════════════════════════════════════════ */
+.mono { font-family: var(--font-mono); }
+.text-muted { color: var(--text-muted); }
+.text-secondary { color: var(--text-secondary); }
+.flex-center { display: flex; align-items: center; }
+
+/* Fade-in animation */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-in {
+  animation: fadeIn 0.35s ease-out both;
+}
+
+.delay-1 { animation-delay: 0.04s; }
+.delay-2 { animation-delay: 0.08s; }
+.delay-3 { animation-delay: 0.12s; }
+.delay-4 { animation-delay: 0.16s; }
+.delay-5 { animation-delay: 0.20s; }
+</style>
+</head>
+<body>
+<div class="app">
+  <!-- ═══════════════════════════════════════════════════════════════════
+       SIDEBAR
+       ═══════════════════════════════════════════════════════════════════ -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path style="fill:#C6820E" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
+      </svg>
+      <div>
+        <span class="brand">cameleer</span><span class="version">v3</span>
+      </div>
+    </div>
+
+    <div class="sidebar-search">
+      <div class="sidebar-search-wrap">
+        <span class="search-icon">&loz;</span>
+        <input type="text" placeholder="Filter applications...">
+      </div>
+    </div>
+
+    <div class="sidebar-section">Applications</div>
+
+    <div class="sidebar-items">
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">All Applications</div>
+        </div>
+        <span class="item-count">3</span>
+      </div>
+
+      <div style="height: 1px; background: rgba(255,255,255,0.06); margin: 4px 14px;"></div>
+
+      <div class="sidebar-item active">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">order-service</div>
+          <div class="item-meta">2 instances</div>
+        </div>
+        <span class="item-count">847</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">payment-gateway</div>
+          <div class="item-meta">1 instance</div>
+        </div>
+        <span class="item-count">312</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info">
+          <div class="item-name">notification-hub</div>
+          <div class="item-meta">1 instance</div>
+        </div>
+        <span class="item-count">45</span>
+      </div>
+
+      <div class="sidebar-section">Routes</div>
+
+      <div class="sidebar-item" style="padding-left: 24px;">
+        <span style="color: var(--sidebar-muted); font-size: 11px;">&#9656;</span>
+        <div class="item-info">
+          <div class="item-name">order-processing</div>
+        </div>
+        <span class="item-count">523</span>
+      </div>
+
+      <div class="sidebar-item" style="padding-left: 24px;">
+        <span style="color: var(--sidebar-muted); font-size: 11px;">&#9656;</span>
+        <div class="item-info">
+          <div class="item-name">order-validation</div>
+        </div>
+        <span class="item-count">215</span>
+      </div>
+
+      <div class="sidebar-item" style="padding-left: 24px;">
+        <span style="color: var(--sidebar-muted); font-size: 11px;">&#9656;</span>
+        <div class="item-info">
+          <div class="item-name">inventory-check</div>
+        </div>
+        <span class="item-count">109</span>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <div class="sidebar-item">
+        <span class="bottom-icon">&bull;</span>
+        <div class="item-info"><div class="item-name">Route Diagrams</div></div>
+      </div>
+      <div class="sidebar-item">
+        <span class="bottom-icon">&#9881;</span>
+        <div class="item-info"><div class="item-name">Admin</div></div>
+      </div>
+      <div class="sidebar-item">
+        <span class="bottom-icon">&laquo;&raquo;</span>
+        <div class="item-info"><div class="item-name">API Docs</div></div>
+      </div>
+    </div>
+  </aside>
+
+  <!-- ═══════════════════════════════════════════════════════════════════
+       MAIN
+       ═══════════════════════════════════════════════════════════════════ -->
+  <div class="main">
+    <!-- Top bar -->
+    <div class="topbar">
+      <div class="topbar-breadcrumb">
+        <span>Applications</span>
+        <span class="crumb-sep">&#x2F;</span>
+        <span class="crumb-active">order-service</span>
+      </div>
+
+      <div class="topbar-search">
+        <span style="font-size: 13px; color: var(--text-faint);">&#x1F50E;&#xFE0E;</span>
+        <span>Search executions...</span>
+        <span class="topbar-kbd">Ctrl+K</span>
+      </div>
+
+      <div class="topbar-right">
+        <span class="topbar-env">PRODUCTION</span>
+        <div class="topbar-user">
+          <span>hendrik</span>
+          <div class="topbar-avatar">H</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="content">
+      <!-- Page header -->
+      <div class="page-header animate-in">
+        <div>
+          <h1>Execution Explorer</h1>
+          <div class="subtitle">order-service &mdash; last 24 hours</div>
+        </div>
+        <button class="live-btn">
+          <span class="live-dot"></span>
+          LIVE
+        </button>
+      </div>
+
+      <!-- Filter bar -->
+      <div class="filter-bar animate-in delay-1">
+        <div class="filter-input-wrap">
+          <span class="fi-icon">&#x1F50E;&#xFE0E;</span>
+          <input class="filter-input" type="text" placeholder="Search by route, correlation ID, body content...">
+        </div>
+
+        <div class="filter-pills">
+          <div class="filter-pill active">All<span class="pill-count">1,204</span></div>
+          <div class="filter-pill">
+            <span style="color: var(--success);">&bull;</span> Success<span class="pill-count">1,142</span>
+          </div>
+          <div class="filter-pill">
+            <span style="color: var(--warning);">&bull;</span> Warning<span class="pill-count">38</span>
+          </div>
+          <div class="filter-pill">
+            <span style="color: var(--error);">&bull;</span> Error<span class="pill-count">7</span>
+          </div>
+          <div class="filter-pill">
+            <span style="color: var(--running);">&bull;</span> Running<span class="pill-count">17</span>
+          </div>
+        </div>
+
+        <select class="filter-select">
+          <option>Last 24 hours</option>
+          <option>Last 1 hour</option>
+          <option>Last 7 days</option>
+          <option>Custom range</option>
+        </select>
+      </div>
+
+      <!-- Stats bar -->
+      <div class="stats-bar animate-in delay-2">
+        <div class="stat-card">
+          <div class="stat-icon total">&#x2211;</div>
+          <div class="stat-info">
+            <div class="stat-label">Total</div>
+            <div class="stat-value">1,204</div>
+            <div class="stat-trend">+12% vs yesterday</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon success">&#x2713;</div>
+          <div class="stat-info">
+            <div class="stat-label">Success</div>
+            <div class="stat-value success-val">1,142</div>
+            <div class="stat-trend">94.8% rate</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon warning">&#x26A0;</div>
+          <div class="stat-info">
+            <div class="stat-label">Warnings</div>
+            <div class="stat-value warning-val">38</div>
+            <div class="stat-trend down">+5 vs yesterday</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon error">&#x2717;</div>
+          <div class="stat-info">
+            <div class="stat-label">Errors</div>
+            <div class="stat-value error-val">7</div>
+            <div class="stat-trend">0.58% rate</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon duration">&#x23F1;</div>
+          <div class="stat-info">
+            <div class="stat-label">Avg Duration</div>
+            <div class="stat-value">247<span style="font-size:13px; font-weight:400; color: var(--text-muted)">ms</span></div>
+            <div class="stat-trend">-8% vs yesterday</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Execution table -->
+      <div class="table-section animate-in delay-3">
+        <div class="table-header">
+          <span class="table-title">Recent Executions</span>
+          <span class="table-meta">Showing 1&ndash;20 of 1,204</span>
+        </div>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Status</th>
+              <th>Route</th>
+              <th>Application</th>
+              <th class="sorted">Started <span class="sort-arrow">&#x25BC;</span></th>
+              <th>Duration</th>
+              <th>Correlation ID</th>
+              <th>Processors</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><span class="status-badge status-success"><span class="status-dot"></span>Success</span></td>
+              <td class="td-route">order-processing</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:47.182</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">124ms</span>
+                  <div class="duration-bar"><div class="duration-bar-fill fast" style="width: 25%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">a8f3e2d1-4b5c</td>
+              <td class="td-mono">12</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-running"><span class="status-dot"></span>Running</span></td>
+              <td class="td-route">payment-flow</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:45.903</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">1.2s</span>
+                  <div class="duration-bar"><div class="duration-bar-fill" style="width: 60%; background: var(--running);"></div></div>
+                </div>
+              </td>
+              <td class="td-id">b7c2a1f0-9d8e</td>
+              <td class="td-mono">8/15</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-success"><span class="status-dot"></span>Success</span></td>
+              <td class="td-route">order-validation</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:44.571</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">89ms</span>
+                  <div class="duration-bar"><div class="duration-bar-fill fast" style="width: 18%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">c6d1b0a9-7f3e</td>
+              <td class="td-mono">7</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-warning"><span class="status-dot"></span>Warning</span></td>
+              <td class="td-route">inventory-check</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:42.008</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">892ms</span>
+                  <div class="duration-bar"><div class="duration-bar-fill medium" style="width: 55%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">d5e0c9b8-6a2d</td>
+              <td class="td-mono">9</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-success"><span class="status-dot"></span>Success</span></td>
+              <td class="td-route">order-processing</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:39.245</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">156ms</span>
+                  <div class="duration-bar"><div class="duration-bar-fill fast" style="width: 30%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">e4f9d8c7-5b1c</td>
+              <td class="td-mono">12</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-error"><span class="status-dot"></span>Error</span></td>
+              <td class="td-route">shipment-notify</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:37.891</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">2.4s</span>
+                  <div class="duration-bar"><div class="duration-bar-fill slow" style="width: 90%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">f3a8b7c6-4d0e</td>
+              <td class="td-mono">5/11</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-success"><span class="status-dot"></span>Success</span></td>
+              <td class="td-route">payment-flow</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:35.124</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">341ms</span>
+                  <div class="duration-bar"><div class="duration-bar-fill fast" style="width: 40%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">a2b7c6d5-3e9f</td>
+              <td class="td-mono">15</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-success"><span class="status-dot"></span>Success</span></td>
+              <td class="td-route">order-processing</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:33.567</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">98ms</span>
+                  <div class="duration-bar"><div class="duration-bar-fill fast" style="width: 20%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">b1c6d5e4-2f8a</td>
+              <td class="td-mono">12</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-running"><span class="status-dot"></span>Running</span></td>
+              <td class="td-route">order-processing</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:31.230</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">2.8s</span>
+                  <div class="duration-bar"><div class="duration-bar-fill" style="width: 75%; background: var(--running);"></div></div>
+                </div>
+              </td>
+              <td class="td-id">c0d5e4f3-1a7b</td>
+              <td class="td-mono">10/12</td>
+            </tr>
+            <tr>
+              <td><span class="status-badge status-success"><span class="status-dot"></span>Success</span></td>
+              <td class="td-route">order-validation</td>
+              <td><div class="td-group"><span class="td-group-dot"></span> order-service</div></td>
+              <td class="td-mono">14:23:28.892</td>
+              <td>
+                <div class="duration-bar-wrap">
+                  <span class="td-mono">67ms</span>
+                  <div class="duration-bar"><div class="duration-bar-fill fast" style="width: 14%"></div></div>
+                </div>
+              </td>
+              <td class="td-id">d9e4f3a2-0b6c</td>
+              <td class="td-mono">7</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="table-footer">
+          <span class="mono" style="font-size: 12px;">20 rows per page</span>
+          <div class="pagination">
+            <button class="page-btn">&lsaquo;</button>
+            <button class="page-btn active">1</button>
+            <button class="page-btn">2</button>
+            <button class="page-btn">3</button>
+            <button class="page-btn">...</button>
+            <button class="page-btn">61</button>
+            <button class="page-btn">&rsaquo;</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Metrics panel -->
+      <div class="metrics-row animate-in delay-4">
+        <!-- Throughput chart -->
+        <div class="metric-card">
+          <div class="metric-card-header">
+            <span class="metric-card-title">Throughput</span>
+            <span class="metric-card-value">52<span style="font-size:11px; font-weight:400; color: var(--text-muted)">/min</span></span>
+          </div>
+          <div class="metric-chart">
+            <svg width="100%" height="100%" viewBox="0 0 300 70" preserveAspectRatio="none">
+              <!-- Grid lines -->
+              <line x1="0" y1="17.5" x2="300" y2="17.5" class="chart-grid-line"/>
+              <line x1="0" y1="35" x2="300" y2="35" class="chart-grid-line"/>
+              <line x1="0" y1="52.5" x2="300" y2="52.5" class="chart-grid-line"/>
+              <!-- Area fill -->
+              <path d="M0,55 L20,48 40,50 60,42 80,38 100,35 120,30 140,32 160,25 180,22 200,28 220,20 240,15 260,18 280,12 300,10 L300,70 L0,70 Z"
+                    fill="#C6820E" class="chart-area"/>
+              <!-- Line -->
+              <path d="M0,55 L20,48 40,50 60,42 80,38 100,35 120,30 140,32 160,25 180,22 200,28 220,20 240,15 260,18 280,12 300,10"
+                    stroke="#C6820E" class="chart-line"/>
+              <!-- Labels -->
+              <text x="0" y="68" class="chart-label">12:00</text>
+              <text x="145" y="68" class="chart-label">13:00</text>
+              <text x="290" y="68" class="chart-label">14:00</text>
+            </svg>
+          </div>
+        </div>
+
+        <!-- Error rate chart -->
+        <div class="metric-card">
+          <div class="metric-card-header">
+            <span class="metric-card-title">Error Rate</span>
+            <span class="metric-card-value" style="color: var(--error);">0.58<span style="font-size:11px; font-weight:400; color: var(--text-muted)">%</span></span>
+          </div>
+          <div class="metric-chart">
+            <svg width="100%" height="100%" viewBox="0 0 300 70" preserveAspectRatio="none">
+              <line x1="0" y1="17.5" x2="300" y2="17.5" class="chart-grid-line"/>
+              <line x1="0" y1="35" x2="300" y2="35" class="chart-grid-line"/>
+              <line x1="0" y1="52.5" x2="300" y2="52.5" class="chart-grid-line"/>
+              <!-- Bar chart for errors -->
+              <rect x="5" y="60" width="14" height="10" rx="2" fill="var(--error-border)"/>
+              <rect x="25" y="55" width="14" height="15" rx="2" fill="var(--error-border)"/>
+              <rect x="45" y="62" width="14" height="8" rx="2" fill="var(--error-border)"/>
+              <rect x="65" y="58" width="14" height="12" rx="2" fill="var(--error-border)"/>
+              <rect x="85" y="65" width="14" height="5" rx="2" fill="var(--error-border)"/>
+              <rect x="105" y="63" width="14" height="7" rx="2" fill="var(--error-border)"/>
+              <rect x="125" y="60" width="14" height="10" rx="2" fill="var(--error-border)"/>
+              <rect x="145" y="45" width="14" height="25" rx="2" fill="var(--error)"/>
+              <rect x="165" y="55" width="14" height="15" rx="2" fill="var(--error-border)"/>
+              <rect x="185" y="58" width="14" height="12" rx="2" fill="var(--error-border)"/>
+              <rect x="205" y="63" width="14" height="7" rx="2" fill="var(--error-border)"/>
+              <rect x="225" y="60" width="14" height="10" rx="2" fill="var(--error-border)"/>
+              <rect x="245" y="55" width="14" height="15" rx="2" fill="var(--error-border)"/>
+              <rect x="265" y="50" width="14" height="20" rx="2" fill="var(--error)"/>
+              <rect x="285" y="58" width="14" height="12" rx="2" fill="var(--error-border)"/>
+              <text x="0" y="68" class="chart-label">12:00</text>
+              <text x="145" y="68" class="chart-label">13:00</text>
+              <text x="290" y="68" class="chart-label">14:00</text>
+            </svg>
+          </div>
+        </div>
+
+        <!-- Latency chart -->
+        <div class="metric-card">
+          <div class="metric-card-header">
+            <span class="metric-card-title">P95 Latency</span>
+            <span class="metric-card-value">412<span style="font-size:11px; font-weight:400; color: var(--text-muted)">ms</span></span>
+          </div>
+          <div class="metric-chart">
+            <svg width="100%" height="100%" viewBox="0 0 300 70" preserveAspectRatio="none">
+              <line x1="0" y1="17.5" x2="300" y2="17.5" class="chart-grid-line"/>
+              <line x1="0" y1="35" x2="300" y2="35" class="chart-grid-line"/>
+              <line x1="0" y1="52.5" x2="300" y2="52.5" class="chart-grid-line"/>
+              <!-- P95 area -->
+              <path d="M0,35 L20,32 40,38 60,30 80,25 100,28 120,35 140,40 160,32 180,28 200,22 220,30 240,25 260,20 280,28 300,25 L300,70 L0,70 Z"
+                    fill="#1A7F8E" class="chart-area"/>
+              <!-- P50 line -->
+              <path d="M0,50 L20,48 40,52 60,45 80,42 100,46 120,50 140,52 160,47 180,44 200,40 220,45 240,42 260,38 280,43 300,40"
+                    stroke="#1A7F8E" stroke-opacity="0.4" class="chart-line" stroke-dasharray="4 3"/>
+              <!-- P95 line -->
+              <path d="M0,35 L20,32 40,38 60,30 80,25 100,28 120,35 140,40 160,32 180,28 200,22 220,30 240,25 260,20 280,28 300,25"
+                    stroke="#1A7F8E" class="chart-line"/>
+              <text x="0" y="68" class="chart-label">12:00</text>
+              <text x="145" y="68" class="chart-label">13:00</text>
+              <text x="290" y="68" class="chart-label">14:00</text>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+    </div><!-- /content -->
+  </div><!-- /main -->
+</div><!-- /app -->
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-operator-expert.html b/docs/ui-mocks/mock-operator-expert.html
new file mode 100644
index 00000000..c6028538
--- /dev/null
+++ b/docs/ui-mocks/mock-operator-expert.html
@@ -0,0 +1,1651 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Operations Console</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+/*
+ * ============================================================================
+ * CAMELEER3 OPERATIONS CONSOLE — DESIGN RATIONALE
+ * ============================================================================
+ *
+ * This mock is designed from 15 years of middleware operations experience.
+ * Here is what typical monitoring UIs get WRONG and how this addresses it:
+ *
+ * 1. BUSINESS CONTEXT IS KING
+ *    Most monitoring tools show exchangeId, correlationId, routeId — all
+ *    technical identifiers that mean nothing when a business user calls and
+ *    says "order OP-88421 didn't go through." This console surfaces business
+ *    IDs (Order ID, Customer ID, Source System) as first-class columns,
+ *    extracted from exchange headers/properties during ingestion.
+ *
+ * 2. TIME-RELATIVE DISPLAY
+ *    "2 min ago" is instantly parseable; "09:14:33.127" requires mental math.
+ *    Recent items use relative time, older items switch to absolute. Both are
+ *    shown on hover for precision when needed (e.g., incident reports).
+ *
+ * 3. ERRORS WITHOUT CLICKING
+ *    The #1 time-waster in incident response: clicking through 40 failed
+ *    executions one by one to read error messages. This table shows error
+ *    previews inline and expands to full stack trace without navigation.
+ *
+ * 4. SLA AWARENESS
+ *    Operators don't care that p99 latency is 342ms. They care that it's
+ *    ABOVE the 300ms SLA threshold. Color-coding and threshold lines on
+ *    charts make SLA violations visible at a glance.
+ *
+ * 5. TREND DIRECTION
+ *    A metric value alone is useless without context. "Error rate: 2.3%"
+ *    — is that going up or down? Trend arrows answer the only question
+ *    that matters: "Is it getting better or worse?"
+ *
+ * 6. AGENT HEALTH CORRELATION
+ *    When errors spike, the first question is "is it the app or the infra?"
+ *    Seeing agent health alongside execution data answers this immediately.
+ *    Dead/stale agents explain missing data; overloaded agents explain latency.
+ *
+ * 7. SHIFT-AWARE SUMMARIES
+ *    Operators work in shifts. "Overnight failures" is a real concept.
+ *    The health bar shows "since last shift" counts, not just "last 24h."
+ *
+ * 8. WHAT'S MISSING FROM THIS MOCK (would need backend support):
+ *    - Reprocessing/retry actions (needs agent command channel)
+ *    - Correlation chains (order -> payment -> shipment linked view)
+ *    - Time-shifted comparison overlays (today vs yesterday)
+ *    - Saved filter presets per operator
+ *    - Alert rule configuration
+ *    - Export to CSV/PDF for incident reports
+ *    - Annotation markers on charts (deploys, config changes)
+ *    - Multi-tenant/team-scoped views
+ * ============================================================================
+ */
+
+/* ─── Reset & Base ─── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+: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);
+  --green: #10b981;
+  --green-glow: rgba(16, 185, 129, 0.12);
+  --blue: #3b82f6;
+  --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;
+}
+
+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;
+}
+
+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;
+}
+
+::-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); }
+
+/* ─── Layout ─── */
+.console {
+  position: relative;
+  z-index: 1;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 24px 24px;
+}
+
+/* ─── Top Nav ─── */
+.topnav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+  background: rgba(6, 10, 19, 0.85);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border-subtle);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  margin: 0 -24px 20px;
+}
+
+.topnav-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.topnav-logo {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--amber);
+  letter-spacing: -0.5px;
+}
+
+.topnav-sep {
+  color: var(--text-muted);
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.topnav-page {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.topnav-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.topnav-clock {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topnav-shift {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--cyan);
+  padding: 3px 10px;
+  border: 1px solid var(--cyan-dim);
+  border-radius: 99px;
+  background: var(--cyan-glow);
+}
+
+.live-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--green);
+}
+
+.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); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+
+/* ─── Health / SLA Status Bar ─── */
+.health-bar {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.health-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 14px 16px;
+  position: relative;
+  overflow: hidden;
+}
+
+.health-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+}
+
+.health-card.ok::before { background: var(--green); }
+.health-card.warn::before { background: var(--amber); }
+.health-card.error::before { background: var(--rose); }
+.health-card.info::before { background: var(--cyan); }
+
+.health-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.health-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.health-value {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.health-value.ok { color: var(--green); }
+.health-value.warn { color: var(--amber); }
+.health-value.error { color: var(--rose); }
+.health-value.info { color: var(--cyan); }
+.health-value.neutral { color: var(--text-primary); }
+
+.health-unit {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.health-trend {
+  font-size: 12px;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.health-trend.up-good { color: var(--green); }
+.health-trend.up-bad { color: var(--rose); }
+.health-trend.down-good { color: var(--green); }
+.health-trend.down-bad { color: var(--rose); }
+.health-trend.flat { color: var(--text-muted); }
+
+.health-detail {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.health-detail strong {
+  color: var(--text-secondary);
+}
+
+/* ─── Summary Badges Row ─── */
+.summary-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.summary-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 99px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid;
+}
+
+.summary-badge.ok {
+  color: var(--green);
+  border-color: rgba(16, 185, 129, 0.3);
+  background: var(--green-glow);
+}
+
+.summary-badge.warn {
+  color: var(--amber);
+  border-color: rgba(240, 180, 41, 0.3);
+  background: var(--amber-glow);
+}
+
+.summary-badge.error {
+  color: var(--rose);
+  border-color: rgba(244, 63, 94, 0.3);
+  background: var(--rose-glow);
+}
+
+.summary-badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.summary-badge.ok .summary-badge-dot { background: var(--green); }
+.summary-badge.warn .summary-badge-dot { background: var(--amber); }
+.summary-badge.error .summary-badge-dot { background: var(--rose); }
+
+.summary-sep {
+  flex: 1;
+}
+
+.summary-timerange {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+/* ─── Two-Column Layout ─── */
+.main-grid {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 16px;
+}
+
+/* ─── Filter / Search Bar ─── */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.search-box {
+  flex: 1;
+  min-width: 240px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.search-box input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 13px;
+}
+
+.search-box input::placeholder { color: var(--text-muted); }
+
+.search-icon { color: var(--text-muted); font-size: 14px; }
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  background: none;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.filter-chip:hover {
+  background: var(--bg-raised);
+  border-color: var(--text-muted);
+}
+
+.filter-chip.active {
+  background: var(--amber-glow);
+  color: var(--amber);
+  border-color: rgba(240, 180, 41, 0.3);
+}
+
+.filter-chip .chip-count {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.filter-chip.active-error {
+  background: var(--rose-glow);
+  color: var(--rose);
+  border-color: rgba(244, 63, 94, 0.3);
+}
+
+/* ─── Execution Table ─── */
+.table-wrap {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.exec-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.exec-table thead {
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border);
+}
+
+.exec-table th {
+  padding: 10px 14px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.exec-table th:hover { color: var(--text-secondary); }
+
+.exec-table td {
+  padding: 10px 14px;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.exec-table tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.1s;
+  cursor: pointer;
+}
+
+.exec-table tbody tr:last-child { border-bottom: none; }
+.exec-table tbody tr:hover { background: var(--bg-raised); }
+
+/* Status indicator strip on left */
+.exec-table tbody tr {
+  border-left: 3px solid transparent;
+}
+
+.exec-table tbody tr.status-ok { border-left-color: var(--green); }
+.exec-table tbody tr.status-warn { border-left-color: var(--amber); }
+.exec-table tbody tr.status-error { border-left-color: var(--rose); }
+
+/* Status pill */
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.status-pill.ok {
+  background: var(--green-glow);
+  color: var(--green);
+}
+
+.status-pill.warn {
+  background: var(--amber-glow);
+  color: var(--amber);
+}
+
+.status-pill.error {
+  background: var(--rose-glow);
+  color: var(--rose);
+}
+
+.status-pill-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* SLA violation marker */
+.sla-breach {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--rose);
+  font-size: 11px;
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.sla-breach::before {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 7px solid var(--rose);
+}
+
+/* Duration with SLA color */
+.duration {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.duration.fast { color: var(--green); }
+.duration.normal { color: var(--text-primary); }
+.duration.slow { color: var(--amber); }
+.duration.breach { color: var(--rose); font-weight: 600; }
+
+/* Business ID styling */
+.biz-id {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  color: var(--cyan);
+  font-size: 12px;
+}
+
+.biz-id-secondary {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Route name */
+.route-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.route-group {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Time display */
+.time-relative {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.time-absolute {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Error preview row */
+.error-preview-row td {
+  padding: 0 14px 10px 20px !important;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.error-preview {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(244, 63, 94, 0.06);
+  border: 1px solid rgba(244, 63, 94, 0.15);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--rose);
+  line-height: 1.6;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.error-preview-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.error-preview-text {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.error-expand-hint {
+  color: var(--text-muted);
+  font-size: 10px;
+  margin-top: 4px;
+  font-family: var(--font-body);
+}
+
+/* Agent badge in table */
+.agent-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.agent-badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.agent-badge-dot.live { background: var(--green); }
+.agent-badge-dot.stale { background: var(--amber); }
+.agent-badge-dot.dead { background: var(--rose); }
+
+/* ─── Right Sidebar ─── */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ─── Agent Health Panel ─── */
+.panel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.panel-title {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.panel-badge {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 99px;
+}
+
+.panel-body {
+  padding: 12px 16px;
+}
+
+/* Agent list */
+.agent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--bg-raised);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  transition: border-color 0.15s;
+}
+
+.agent-item:hover { border-color: var(--border); }
+
+.agent-status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.agent-status-dot.live {
+  background: var(--green);
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
+}
+
+.agent-status-dot.stale {
+  background: var(--amber);
+  box-shadow: 0 0 6px rgba(240, 180, 41, 0.3);
+}
+
+.agent-status-dot.dead {
+  background: var(--rose);
+  opacity: 0.6;
+}
+
+.agent-info { flex: 1; min-width: 0; }
+
+.agent-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.agent-meta {
+  font-size: 11px;
+  color: var(--text-muted);
+  display: flex;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.agent-stats {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.agent-tps { color: var(--text-secondary); }
+.agent-errors { color: var(--rose); }
+.agent-heartbeat { font-size: 10px; color: var(--text-muted); }
+
+/* ─── Metrics Panels ─── */
+.metric-chart {
+  padding: 16px;
+}
+
+.metric-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.metric-title {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.metric-current {
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.metric-current .trend-arrow {
+  font-size: 14px;
+  margin-left: 4px;
+}
+
+.metric-current .trend-arrow.up-bad { color: var(--rose); }
+.metric-current .trend-arrow.down-good { color: var(--green); }
+.metric-current .trend-arrow.up-good { color: var(--green); }
+.metric-current .trend-arrow.flat { color: var(--text-muted); }
+
+/* SVG Chart area */
+.chart-area {
+  width: 100%;
+  height: 80px;
+  position: relative;
+}
+
+.chart-area svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Sparkline-style mini charts */
+.sparkline {
+  display: block;
+}
+
+/* SLA threshold line */
+.sla-line {
+  stroke: var(--rose);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  opacity: 0.6;
+}
+
+.sla-label {
+  fill: var(--rose);
+  font-size: 9px;
+  font-family: 'JetBrains Mono', monospace;
+  opacity: 0.7;
+}
+
+/* ─── Top Errors Panel ─── */
+.error-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.error-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 10px;
+  background: var(--bg-raised);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--rose);
+}
+
+.error-count {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rose);
+  min-width: 28px;
+  text-align: center;
+}
+
+.error-info { flex: 1; min-width: 0; }
+
+.error-route {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.error-message {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
+.error-since {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* ─── Table footer / pagination ─── */
+.table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--bg-raised);
+}
+
+.table-footer-info {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.pagination {
+  display: flex;
+  gap: 4px;
+}
+
+.page-btn {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.page-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.page-btn.active {
+  background: var(--amber-glow);
+  color: var(--amber);
+  border-color: rgba(240, 180, 41, 0.3);
+}
+
+/* ─── Utility ─── */
+.mono { font-family: var(--font-mono); }
+.flex-center { display: flex; align-items: center; }
+
+/* ─── Chart fill colors ─── */
+.fill-green { fill: rgba(16, 185, 129, 0.15); }
+.stroke-green { stroke: var(--green); }
+.fill-amber { fill: rgba(240, 180, 41, 0.1); }
+.stroke-amber { stroke: var(--amber); }
+.fill-cyan { fill: rgba(34, 211, 238, 0.1); }
+.stroke-cyan { stroke: var(--cyan); }
+.fill-rose { fill: rgba(244, 63, 94, 0.1); }
+.stroke-rose { stroke: var(--rose); }
+
+</style>
+</head>
+<body>
+
+<div class="console">
+
+  <!-- ─── Top Navigation ─── -->
+  <nav class="topnav">
+    <div class="topnav-brand">
+      <span class="topnav-logo">cameleer3</span>
+      <span class="topnav-sep">/</span>
+      <span class="topnav-page">Operations Console</span>
+    </div>
+    <div class="topnav-right">
+      <span class="topnav-shift">Shift: Day (06:00-18:00)</span>
+      <span class="topnav-clock">2026-03-17 09:14 CET</span>
+      <span class="live-indicator">
+        <span class="live-dot"></span>
+        LIVE
+      </span>
+    </div>
+  </nav>
+
+  <!-- ─── Health / SLA Status Bar ─── -->
+  <div class="health-bar animate-in">
+
+    <div class="health-card ok">
+      <div class="health-label">System Health</div>
+      <div class="health-value-row">
+        <span class="health-value ok">HEALTHY</span>
+      </div>
+      <div class="health-detail">All 4 agents reporting &middot; No SLA breaches</div>
+    </div>
+
+    <div class="health-card ok">
+      <div class="health-label">Executions (shift)</div>
+      <div class="health-value-row">
+        <span class="health-value neutral">3,241</span>
+        <span class="health-trend up-good">+12%</span>
+      </div>
+      <div class="health-detail"><strong>97.1%</strong> success rate since 06:00</div>
+    </div>
+
+    <div class="health-card warn">
+      <div class="health-label">Failures (shift)</div>
+      <div class="health-value-row">
+        <span class="health-value error">38</span>
+        <span class="health-trend up-bad">+5</span>
+      </div>
+      <div class="health-detail"><strong>23</strong> overnight &middot; <strong>15</strong> since 06:00</div>
+    </div>
+
+    <div class="health-card ok">
+      <div class="health-label">Throughput</div>
+      <div class="health-value-row">
+        <span class="health-value neutral">47.2</span>
+        <span class="health-unit">msg/s</span>
+        <span class="health-trend flat">&#8596;</span>
+      </div>
+      <div class="health-detail">Capacity: 120 msg/s &middot; <strong>39%</strong> utilized</div>
+    </div>
+
+    <div class="health-card ok">
+      <div class="health-label">Latency p50</div>
+      <div class="health-value-row">
+        <span class="health-value neutral">142</span>
+        <span class="health-unit">ms</span>
+        <span class="health-trend down-good">-8ms</span>
+      </div>
+      <div class="health-detail">SLA: &lt;200ms &middot; <strong style="color: var(--green);">OK</strong></div>
+    </div>
+
+    <div class="health-card warn">
+      <div class="health-label">Latency p99</div>
+      <div class="health-value-row">
+        <span class="health-value warn">287</span>
+        <span class="health-unit">ms</span>
+        <span class="health-trend up-bad">+23ms</span>
+      </div>
+      <div class="health-detail">SLA: &lt;300ms &middot; <strong style="color: var(--amber);">CLOSE</strong></div>
+    </div>
+
+  </div>
+
+  <!-- ─── Summary Badges ─── -->
+  <div class="summary-row animate-in" style="animation-delay: 0.05s">
+    <span class="summary-badge ok">
+      <span class="summary-badge-dot"></span>
+      3,197 ok
+    </span>
+    <span class="summary-badge warn">
+      <span class="summary-badge-dot"></span>
+      6 warn
+    </span>
+    <span class="summary-badge error">
+      <span class="summary-badge-dot"></span>
+      38 error
+    </span>
+    <span class="summary-sep"></span>
+    <span class="summary-timerange">Last 12h &middot; All groups</span>
+  </div>
+
+  <!-- ─── Main Grid: Table + Sidebar ─── -->
+  <div class="main-grid">
+
+    <!-- ─── Left: Execution Table ─── -->
+    <div class="animate-in" style="animation-delay: 0.1s">
+
+      <!-- Filter Bar -->
+      <div class="filter-bar">
+        <div class="search-box">
+          <span class="search-icon">&#128269;</span>
+          <input type="text" placeholder="Search by Order ID, Customer ID, Correlation ID, Error message...">
+        </div>
+        <button class="filter-chip active">All Routes</button>
+        <button class="filter-chip">order-flow <span class="chip-count">1,847</span></button>
+        <button class="filter-chip">payment-flow <span class="chip-count">923</span></button>
+        <button class="filter-chip">shipment-flow <span class="chip-count">471</span></button>
+        <button class="filter-chip active-error">Errors only <span class="chip-count">38</span></button>
+      </div>
+
+      <!-- Execution Table -->
+      <div class="table-wrap">
+        <table class="exec-table">
+          <thead>
+            <tr>
+              <th style="width: 30px;"></th>
+              <th>Status</th>
+              <th>Route / Group</th>
+              <th>Order ID</th>
+              <th>Customer</th>
+              <th>Started</th>
+              <th>Duration</th>
+              <th>Agent</th>
+            </tr>
+          </thead>
+          <tbody>
+
+            <!-- Row 1: Recent success -->
+            <tr class="status-ok">
+              <td></td>
+              <td><span class="status-pill ok"><span class="status-pill-dot"></span>OK</span></td>
+              <td>
+                <div class="route-name">order-intake</div>
+                <div class="route-group">order-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-92184</div>
+                <div class="biz-id-secondary">SAP-DE</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-44210</div>
+              </td>
+              <td>
+                <div class="time-relative">2 min ago</div>
+                <div class="time-absolute">09:12:04</div>
+              </td>
+              <td><span class="duration fast">87ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-1</span>
+              </td>
+            </tr>
+
+            <!-- Row 2: Recent success, slightly slow -->
+            <tr class="status-ok">
+              <td></td>
+              <td><span class="status-pill ok"><span class="status-pill-dot"></span>OK</span></td>
+              <td>
+                <div class="route-name">payment-validate</div>
+                <div class="route-group">payment-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-92183</div>
+                <div class="biz-id-secondary">WEB-EU</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-18773</div>
+              </td>
+              <td>
+                <div class="time-relative">3 min ago</div>
+                <div class="time-absolute">09:11:22</div>
+              </td>
+              <td><span class="duration normal">164ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-2</span>
+              </td>
+            </tr>
+
+            <!-- Row 3: WARNING - slow but succeeded -->
+            <tr class="status-warn">
+              <td></td>
+              <td><span class="status-pill warn"><span class="status-pill-dot"></span>WARN</span></td>
+              <td>
+                <div class="route-name">shipment-dispatch</div>
+                <div class="route-group">shipment-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-92180</div>
+                <div class="biz-id-secondary">SAP-DE</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-55019</div>
+              </td>
+              <td>
+                <div class="time-relative">5 min ago</div>
+                <div class="time-absolute">09:09:47</div>
+              </td>
+              <td>
+                <span class="duration slow">248ms</span>
+                <span class="sla-breach" title="Approaching SLA threshold (300ms)">SLA</span>
+              </td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-3</span>
+              </td>
+            </tr>
+
+            <!-- Row 4: ERROR with inline preview -->
+            <tr class="status-error">
+              <td></td>
+              <td><span class="status-pill error"><span class="status-pill-dot"></span>ERROR</span></td>
+              <td>
+                <div class="route-name">payment-process</div>
+                <div class="route-group">payment-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-88421</div>
+                <div class="biz-id-secondary">WEB-EU</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-31094</div>
+              </td>
+              <td>
+                <div class="time-relative">8 min ago</div>
+                <div class="time-absolute">09:06:11</div>
+              </td>
+              <td><span class="duration breach">412ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-2</span>
+              </td>
+            </tr>
+
+            <!-- Error preview row (expanded inline) -->
+            <tr class="error-preview-row">
+              <td colspan="8">
+                <div class="error-preview">
+                  <span class="error-preview-icon">&#9888;</span>
+                  <div>
+                    <div class="error-preview-text">org.apache.camel.CamelExecutionException: Payment gateway timeout after 5000ms &mdash; POST https://pay.provider.com/v2/charge returned HTTP 504. Retry exhausted (3/3 attempts). CorrelationId: c7e2a1f0-9b3d</div>
+                    <div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+
+            <!-- Row 5: Another error -->
+            <tr class="status-error">
+              <td></td>
+              <td><span class="status-pill error"><span class="status-pill-dot"></span>ERROR</span></td>
+              <td>
+                <div class="route-name">order-enrichment</div>
+                <div class="route-group">order-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-88419</div>
+                <div class="biz-id-secondary">EDI-US</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-72841</div>
+              </td>
+              <td>
+                <div class="time-relative">12 min ago</div>
+                <div class="time-absolute">09:02:38</div>
+              </td>
+              <td><span class="duration breach">1,247ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-1</span>
+              </td>
+            </tr>
+
+            <tr class="error-preview-row">
+              <td colspan="8">
+                <div class="error-preview">
+                  <span class="error-preview-icon">&#9888;</span>
+                  <div>
+                    <div class="error-preview-text">java.sql.SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after 1000ms. (pool size: 10, active: 10, idle: 0, waiting: 3)</div>
+                    <div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+
+            <!-- Row 6: Success -->
+            <tr class="status-ok">
+              <td></td>
+              <td><span class="status-pill ok"><span class="status-pill-dot"></span>OK</span></td>
+              <td>
+                <div class="route-name">order-intake</div>
+                <div class="route-group">order-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-92179</div>
+                <div class="biz-id-secondary">WEB-EU</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-90123</div>
+              </td>
+              <td>
+                <div class="time-relative">14 min ago</div>
+                <div class="time-absolute">09:00:15</div>
+              </td>
+              <td><span class="duration fast">62ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-3</span>
+              </td>
+            </tr>
+
+            <!-- Row 7: Success -->
+            <tr class="status-ok">
+              <td></td>
+              <td><span class="status-pill ok"><span class="status-pill-dot"></span>OK</span></td>
+              <td>
+                <div class="route-name">payment-validate</div>
+                <div class="route-group">payment-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-92178</div>
+                <div class="biz-id-secondary">SAP-DE</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-44210</div>
+              </td>
+              <td>
+                <div class="time-relative">16 min ago</div>
+                <div class="time-absolute">08:58:33</div>
+              </td>
+              <td><span class="duration normal">131ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-1</span>
+              </td>
+            </tr>
+
+            <!-- Row 8: Success -->
+            <tr class="status-ok">
+              <td></td>
+              <td><span class="status-pill ok"><span class="status-pill-dot"></span>OK</span></td>
+              <td>
+                <div class="route-name">shipment-track</div>
+                <div class="route-group">shipment-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-92175</div>
+                <div class="biz-id-secondary">EDI-US</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-67892</div>
+              </td>
+              <td>
+                <div class="time-relative">21 min ago</div>
+                <div class="time-absolute">08:53:07</div>
+              </td>
+              <td><span class="duration fast">94ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-4</span>
+              </td>
+            </tr>
+
+            <!-- Row 9: Error from overnight -->
+            <tr class="status-error">
+              <td></td>
+              <td><span class="status-pill error"><span class="status-pill-dot"></span>ERROR</span></td>
+              <td>
+                <div class="route-name">payment-process</div>
+                <div class="route-group">payment-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-91844</div>
+                <div class="biz-id-secondary">WEB-EU</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-10082</div>
+              </td>
+              <td>
+                <div class="time-relative">5 hours ago</div>
+                <div class="time-absolute">04:12:55</div>
+              </td>
+              <td><span class="duration breach">timeout</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-2</span>
+              </td>
+            </tr>
+
+            <tr class="error-preview-row">
+              <td colspan="8">
+                <div class="error-preview">
+                  <span class="error-preview-icon">&#9888;</span>
+                  <div>
+                    <div class="error-preview-text">org.apache.camel.CamelExecutionException: Payment gateway timeout after 5000ms &mdash; POST https://pay.provider.com/v2/charge returned HTTP 504. Retry exhausted (3/3 attempts). Overnight batch: provider maintenance window?</div>
+                    <div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+
+            <!-- Row 10: Success -->
+            <tr class="status-ok">
+              <td></td>
+              <td><span class="status-pill ok"><span class="status-pill-dot"></span>OK</span></td>
+              <td>
+                <div class="route-name">order-intake</div>
+                <div class="route-group">order-flow</div>
+              </td>
+              <td>
+                <div class="biz-id">OP-91840</div>
+                <div class="biz-id-secondary">EDI-US</div>
+              </td>
+              <td>
+                <div class="biz-id-secondary">CUST-38291</div>
+              </td>
+              <td>
+                <div class="time-relative">5 hours ago</div>
+                <div class="time-absolute">04:10:22</div>
+              </td>
+              <td><span class="duration fast">78ms</span></td>
+              <td>
+                <span class="agent-badge"><span class="agent-badge-dot live"></span>prod-1</span>
+              </td>
+            </tr>
+
+          </tbody>
+        </table>
+
+        <div class="table-footer">
+          <div class="table-footer-info">
+            Showing 1-20 of 3,241 executions
+          </div>
+          <div class="pagination">
+            <button class="page-btn active">1</button>
+            <button class="page-btn">2</button>
+            <button class="page-btn">3</button>
+            <button class="page-btn">...</button>
+            <button class="page-btn">162</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ─── Right Sidebar ─── -->
+    <div class="sidebar animate-in" style="animation-delay: 0.15s">
+
+      <!-- Agent Health -->
+      <div class="panel">
+        <div class="panel-header">
+          <span class="panel-title">Agent Health</span>
+          <span class="panel-badge" style="color: var(--green); background: var(--green-glow); border: 1px solid rgba(16,185,129,0.3); border-radius: 99px;">4 / 4 live</span>
+        </div>
+        <div class="panel-body">
+          <div class="agent-list">
+
+            <div class="agent-item">
+              <span class="agent-status-dot live"></span>
+              <div class="agent-info">
+                <div class="agent-name">prod-1</div>
+                <div class="agent-meta">
+                  <span>order-service</span>
+                  <span>v3.2.1</span>
+                </div>
+              </div>
+              <div class="agent-stats">
+                <div class="agent-tps">14.2 msg/s</div>
+                <div class="agent-heartbeat">12s ago</div>
+              </div>
+            </div>
+
+            <div class="agent-item">
+              <span class="agent-status-dot live"></span>
+              <div class="agent-info">
+                <div class="agent-name">prod-2</div>
+                <div class="agent-meta">
+                  <span>payment-service</span>
+                  <span>v3.2.1</span>
+                </div>
+              </div>
+              <div class="agent-stats">
+                <div class="agent-tps">11.8 msg/s</div>
+                <div class="agent-errors">3 err/h</div>
+                <div class="agent-heartbeat">8s ago</div>
+              </div>
+            </div>
+
+            <div class="agent-item">
+              <span class="agent-status-dot live"></span>
+              <div class="agent-info">
+                <div class="agent-name">prod-3</div>
+                <div class="agent-meta">
+                  <span>shipment-service</span>
+                  <span>v3.2.0</span>
+                </div>
+              </div>
+              <div class="agent-stats">
+                <div class="agent-tps">12.1 msg/s</div>
+                <div class="agent-heartbeat">5s ago</div>
+              </div>
+            </div>
+
+            <div class="agent-item">
+              <span class="agent-status-dot live"></span>
+              <div class="agent-info">
+                <div class="agent-name">prod-4</div>
+                <div class="agent-meta">
+                  <span>shipment-service</span>
+                  <span>v3.2.0</span>
+                </div>
+              </div>
+              <div class="agent-stats">
+                <div class="agent-tps">9.1 msg/s</div>
+                <div class="agent-heartbeat">3s ago</div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Throughput Chart -->
+      <div class="panel">
+        <div class="metric-chart">
+          <div class="metric-header">
+            <span class="metric-title">Throughput (1h)</span>
+            <span class="metric-current">47.2 <span class="trend-arrow flat">&#8596;</span></span>
+          </div>
+          <div class="chart-area">
+            <svg viewBox="0 0 288 80" preserveAspectRatio="none">
+              <!-- Grid lines -->
+              <line x1="0" y1="20" x2="288" y2="20" stroke="#1e2d3d" stroke-width="0.5"/>
+              <line x1="0" y1="40" x2="288" y2="40" stroke="#1e2d3d" stroke-width="0.5"/>
+              <line x1="0" y1="60" x2="288" y2="60" stroke="#1e2d3d" stroke-width="0.5"/>
+              <!-- Capacity line at ~33% (40 of 120) -->
+              <!-- Area fill -->
+              <path d="M0,55 L24,52 L48,48 L72,50 L96,45 L120,42 L144,44 L168,40 L192,38 L216,40 L240,42 L264,39 L288,38 L288,80 L0,80 Z" class="fill-cyan" />
+              <!-- Line -->
+              <path d="M0,55 L24,52 L48,48 L72,50 L96,45 L120,42 L144,44 L168,40 L192,38 L216,40 L240,42 L264,39 L288,38" fill="none" class="stroke-cyan" stroke-width="1.5"/>
+              <!-- Time labels -->
+              <text x="0" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">08:15</text>
+              <text x="138" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">08:45</text>
+              <text x="272" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">09:14</text>
+              <!-- Scale -->
+              <text x="278" y="18" fill="#4a5e7a" font-size="7" font-family="JetBrains Mono" text-anchor="end">80</text>
+              <text x="278" y="38" fill="#4a5e7a" font-size="7" font-family="JetBrains Mono" text-anchor="end">50</text>
+              <text x="278" y="58" fill="#4a5e7a" font-size="7" font-family="JetBrains Mono" text-anchor="end">20</text>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Latency Chart with SLA line -->
+      <div class="panel">
+        <div class="metric-chart">
+          <div class="metric-header">
+            <span class="metric-title">Latency p99 (1h)</span>
+            <span class="metric-current" style="color: var(--amber);">287ms <span class="trend-arrow up-bad">&#8599;</span></span>
+          </div>
+          <div class="chart-area">
+            <svg viewBox="0 0 288 80" preserveAspectRatio="none">
+              <!-- Grid lines -->
+              <line x1="0" y1="20" x2="288" y2="20" stroke="#1e2d3d" stroke-width="0.5"/>
+              <line x1="0" y1="40" x2="288" y2="40" stroke="#1e2d3d" stroke-width="0.5"/>
+              <line x1="0" y1="60" x2="288" y2="60" stroke="#1e2d3d" stroke-width="0.5"/>
+              <!-- SLA threshold line at 300ms (~y=18 on our 0-350ms scale) -->
+              <line x1="0" y1="12" x2="288" y2="12" class="sla-line"/>
+              <text x="4" y="10" class="sla-label">SLA 300ms</text>
+              <!-- Danger zone fill above SLA -->
+              <rect x="0" y="0" width="288" height="12" fill="rgba(244, 63, 94, 0.04)"/>
+              <!-- Area fill -->
+              <path d="M0,48 L24,45 L48,42 L72,40 L96,38 L120,35 L144,32 L168,28 L192,24 L216,22 L240,20 L264,18 L288,16 L288,80 L0,80 Z" class="fill-amber" />
+              <!-- Line -->
+              <path d="M0,48 L24,45 L48,42 L72,40 L96,38 L120,35 L144,32 L168,28 L192,24 L216,22 L240,20 L264,18 L288,16" fill="none" class="stroke-amber" stroke-width="1.5"/>
+              <!-- p50 line (reference) -->
+              <path d="M0,60 L24,62 L48,60 L72,58 L96,60 L120,59 L144,58 L168,60 L192,58 L216,57 L240,58 L264,56 L288,55" fill="none" stroke="#22d3ee" stroke-width="1" opacity="0.5"/>
+              <text x="288" y="54" fill="#22d3ee" font-size="7" font-family="JetBrains Mono" text-anchor="end" opacity="0.6">p50</text>
+              <!-- Time labels -->
+              <text x="0" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">08:15</text>
+              <text x="138" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">08:45</text>
+              <text x="272" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">09:14</text>
+              <!-- Scale -->
+              <text x="278" y="18" fill="#4a5e7a" font-size="7" font-family="JetBrains Mono" text-anchor="end">300</text>
+              <text x="278" y="38" fill="#4a5e7a" font-size="7" font-family="JetBrains Mono" text-anchor="end">200</text>
+              <text x="278" y="58" fill="#4a5e7a" font-size="7" font-family="JetBrains Mono" text-anchor="end">100</text>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Error Rate Chart -->
+      <div class="panel">
+        <div class="metric-chart">
+          <div class="metric-header">
+            <span class="metric-title">Error Rate (1h)</span>
+            <span class="metric-current" style="color: var(--rose);">2.9% <span class="trend-arrow up-bad">&#8599;</span></span>
+          </div>
+          <div class="chart-area">
+            <svg viewBox="0 0 288 80" preserveAspectRatio="none">
+              <!-- Grid lines -->
+              <line x1="0" y1="20" x2="288" y2="20" stroke="#1e2d3d" stroke-width="0.5"/>
+              <line x1="0" y1="40" x2="288" y2="40" stroke="#1e2d3d" stroke-width="0.5"/>
+              <line x1="0" y1="60" x2="288" y2="60" stroke="#1e2d3d" stroke-width="0.5"/>
+              <!-- SLA threshold at 5% (y=20) -->
+              <line x1="0" y1="20" x2="288" y2="20" class="sla-line"/>
+              <text x="4" y="18" class="sla-label">SLA 5%</text>
+              <rect x="0" y="0" width="288" height="20" fill="rgba(244, 63, 94, 0.04)"/>
+              <!-- Bar chart style for errors -->
+              <rect x="2" y="62" width="20" height="18" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+              <rect x="26" y="65" width="20" height="15" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+              <rect x="50" y="68" width="20" height="12" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+              <rect x="74" y="64" width="20" height="16" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+              <rect x="98" y="60" width="20" height="20" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+              <rect x="122" y="66" width="20" height="14" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+              <rect x="146" y="70" width="20" height="10" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+              <rect x="170" y="58" width="20" height="22" rx="2" fill="rgba(244, 63, 94, 0.4)"/>
+              <rect x="194" y="52" width="20" height="28" rx="2" fill="rgba(244, 63, 94, 0.5)"/>
+              <rect x="218" y="48" width="20" height="32" rx="2" fill="rgba(244, 63, 94, 0.6)"/>
+              <rect x="242" y="44" width="20" height="36" rx="2" fill="rgba(244, 63, 94, 0.7)"/>
+              <rect x="266" y="42" width="20" height="38" rx="2" fill="rgba(244, 63, 94, 0.8)"/>
+              <!-- Time labels -->
+              <text x="0" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">08:15</text>
+              <text x="138" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">08:45</text>
+              <text x="272" y="78" fill="#4a5e7a" font-size="8" font-family="JetBrains Mono">09:14</text>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Top Errors Panel -->
+      <div class="panel">
+        <div class="panel-header">
+          <span class="panel-title">Top Errors (shift)</span>
+          <span class="panel-badge" style="color: var(--rose); background: var(--rose-glow); border: 1px solid rgba(244,63,94,0.3); border-radius: 99px;">3 patterns</span>
+        </div>
+        <div class="panel-body">
+          <div class="error-list">
+
+            <div class="error-item">
+              <div class="error-count">23</div>
+              <div class="error-info">
+                <div class="error-route">payment-flow / payment-process</div>
+                <div class="error-message">Payment gateway timeout (HTTP 504)</div>
+                <div class="error-since">First: 03:42 &middot; Last: 09:06</div>
+              </div>
+            </div>
+
+            <div class="error-item">
+              <div class="error-count">11</div>
+              <div class="error-info">
+                <div class="error-route">order-flow / order-enrichment</div>
+                <div class="error-message">HikariPool connection timeout</div>
+                <div class="error-since">First: 08:55 &middot; Last: 09:02</div>
+              </div>
+            </div>
+
+            <div class="error-item">
+              <div class="error-count">4</div>
+              <div class="error-info">
+                <div class="error-route">shipment-flow / shipment-dispatch</div>
+                <div class="error-message">NullPointerException at ShipmentMapper:142</div>
+                <div class="error-since">First: 07:11 &middot; Last: 08:34</div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </div><!-- /sidebar -->
+
+  </div><!-- /main-grid -->
+
+</div><!-- /console -->
+
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-usability-expert.html b/docs/ui-mocks/mock-usability-expert.html
new file mode 100644
index 00000000..4b13374c
--- /dev/null
+++ b/docs/ui-mocks/mock-usability-expert.html
@@ -0,0 +1,1565 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cameleer3 — Usability Expert Mock</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,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<!--
+  =====================================================================
+  UX DECISIONS & INFORMATION ARCHITECTURE RATIONALE
+  =====================================================================
+
+  1. INFORMATION HIERARCHY (what operators see first)
+     - Level 1 (Glanceable): Top health bar with 4 key metrics (total, success
+       rate, error count, avg latency). These answer "is the system OK?" in
+       under 2 seconds. The error count uses rose color and pulses when > 0.
+     - Level 2 (Actionable): Filter bar with status pills + time presets.
+       Smart defaults: last 1h, all statuses, sorted newest-first. Active
+       filters are shown as removable tags so the operator always knows
+       what's filtered.
+     - Level 3 (Scannable): Execution list table with color-coded status
+       pills, duration bars, and app badges. Failed rows get a subtle rose
+       left-border so failures are visible during fast scrolling.
+     - Level 4 (Detail on demand): Right detail panel that opens when a row
+       is selected. Shows execution metadata, processor timeline (Gantt-
+       style), exchange snapshot, and error details without navigating away.
+
+  2. NAVIGATION FLOW (system overview -> specific problem in min clicks)
+     - Click 0: Dashboard loads with health metrics + recent executions
+     - Click 1: Click status pill "Failed" or click error count card
+       -> table filters to errors only
+     - Click 2: Click a row -> detail panel slides in from right
+     - Click 3: Click "View Diagram" in detail panel -> route diagram
+       with execution overlay (only if needed)
+     Total: 2 clicks from "everything is fine" to "here's what failed"
+
+  3. FILTER/SEARCH PATTERNS
+     - Quick filters: Status pills (All/Completed/Failed/Running) with
+       live counts. Single-click toggle, visually active state.
+     - Time presets: 15m/1h/6h/24h/7d pills (operator rarely needs
+       custom range for triage). Custom range available but secondary.
+     - Full-text search: Inline search bar that searches across
+       correlation IDs, route IDs, error messages. Opens command palette
+       on Ctrl+K for power users.
+     - Active filter tags: Shown below the filter bar as removable pills
+       so operators always know what's filtered and can clear quickly.
+
+  4. SCAN-ABILITY
+     - Failed rows: Rose left-border accent + red status pill = visible
+       in < 1 second during fast scroll
+     - Duration bars: Visual bar + number. Slow durations use amber/rose
+       colors. Anomalous durations stand out without reading numbers.
+     - Relative timestamps: "2m ago", "15m ago" — faster to parse than
+       absolute timestamps for recent events. Absolute on hover.
+     - Alternating subtle backgrounds for table rows (not used — the
+       border-bottom approach from the existing design is cleaner)
+
+  5. CONTEXT PRESERVATION (master-detail pattern)
+     - Selecting a row opens the detail panel on the right WITHOUT
+       navigating away. The execution list remains visible and scrollable.
+     - The detail panel uses tabs (Overview/Processors/Exchange/Errors)
+       for progressive disclosure.
+     - Breadcrumb-style context at the top of the detail panel shows
+       the path: App > Route > Execution ID.
+     - Closing the panel returns focus to the list. Keyboard: Escape
+       closes, arrow keys navigate rows, Enter opens detail.
+
+  6. KEYBOARD SHORTCUTS
+     - Ctrl+K: Command palette (search anything)
+     - Escape: Close detail panel / clear search
+     - Arrow Up/Down: Navigate execution list
+     - Enter: Open detail for selected row
+     - F: Toggle failed filter
+     - R: Refresh data
+     - ?: Show keyboard shortcuts overlay
+
+  7. PROGRESSIVE DISCLOSURE
+     - Health cards: Show number + trend. Hover for more context.
+     - Table rows: Key columns only (status, app, route, time, duration).
+       Click for full detail.
+     - Detail panel tabs: Overview first (most common need), then
+       Processors (Gantt), Exchange (payload), Errors (stack traces).
+     - Error details: Show error class + message. Expandable for full
+       stack trace.
+
+  8. COMPARISON UX
+     - Duration bars provide instant visual comparison across rows.
+     - Stats cards show trend arrows (up/down vs previous period).
+     - The Processors tab in detail shows a Gantt timeline so you can
+       see which processor is the bottleneck.
+
+  =====================================================================
+-->
+<style>
+/* ─── Reset ─── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ─── Design Tokens (matching existing Cameleer3 theme) ─── */
+: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);
+  --green: #10b981;
+  --green-glow: rgba(16, 185, 129, 0.12);
+  --blue: #3b82f6;
+  --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;
+  --topnav-bg: rgba(6, 10, 19, 0.85);
+}
+
+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;
+}
+
+/* Background treatment */
+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;
+}
+
+/* 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); }
+
+/* ─── 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); }
+}
+@keyframes errorPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.3); }
+  50% { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0); }
+}
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+
+/* ─── Top Navigation ─── */
+.topnav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--topnav-bg);
+  backdrop-filter: blur(20px) saturate(1.2);
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  gap: 16px;
+}
+
+.hamburger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.hamburger:hover { color: var(--text-primary); border-color: var(--text-muted); background: var(--bg-raised); }
+
+.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;
+  text-decoration: none;
+}
+
+.search-bar {
+  flex: 1;
+  max-width: 480px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.search-bar:hover { border-color: var(--text-muted); }
+.search-icon { color: var(--text-muted); flex-shrink: 0; font-size: 14px; }
+.search-placeholder { flex: 1; font-size: 13px; color: var(--text-muted); }
+.search-kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+.nav-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.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;
+}
+.nav-link {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-decoration: none;
+  padding: 4px 10px;
+  border-radius: 99px;
+  border: 1px solid var(--border);
+  transition: all 0.15s;
+}
+.nav-link:hover { color: var(--text-primary); border-color: var(--text-muted); }
+.nav-link.active { color: var(--amber); border-color: rgba(240, 180, 41, 0.3); background: var(--amber-glow); }
+.user-info {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ─── Layout ─── */
+.layout {
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Sidebar ─── */
+.sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border-subtle);
+  height: calc(100vh - 56px);
+  position: sticky;
+  top: 56px;
+  overflow: hidden;
+}
+
+.sidebar-search {
+  padding: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.sidebar-search input {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: var(--font-body);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.sidebar-search input::placeholder { color: var(--text-muted); }
+.sidebar-search input:focus { border-color: var(--amber); }
+
+.app-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.app-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: all 0.1s;
+  text-align: left;
+}
+.app-item:hover { background: var(--bg-hover); color: var(--text-primary); }
+.app-item.active { background: var(--amber-glow); color: var(--amber); }
+
+.health-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot-live { background: var(--green); }
+.dot-stale { background: var(--amber); }
+.dot-dead { background: var(--text-muted); }
+
+.app-info { flex: 1; min-width: 0; }
+.app-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.app-meta { font-size: 11px; color: var(--text-muted); }
+
+.all-icon {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+.app-item.active .all-icon { color: var(--amber); }
+
+.sidebar-divider {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 4px 12px;
+}
+
+.sidebar-section-label {
+  padding: 12px 16px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+}
+
+.sidebar-bottom {
+  border-top: 1px solid var(--border-subtle);
+  padding: 8px 0;
+}
+.bottom-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: all 0.1s;
+  text-decoration: none;
+}
+.bottom-item:hover { background: var(--bg-hover); color: var(--text-primary); }
+.bottom-icon { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; }
+
+/* ─── Main Content ─── */
+.main-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 56px);
+}
+
+/* ─── Health Overview Strip ─── */
+.health-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  padding: 20px 24px 0;
+  animation: fadeIn 0.3s ease-out both;
+}
+
+.stat-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 14px 18px;
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.2s;
+  cursor: pointer;
+}
+.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.green::before { background: linear-gradient(90deg, var(--green), transparent); }
+.stat-card.rose::before { background: linear-gradient(90deg, var(--rose), transparent); }
+.stat-card.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
+.stat-card.rose.has-errors { animation: errorPulse 2s ease-in-out infinite; }
+
+.stat-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -1px;
+}
+.stat-card.amber .stat-value { color: var(--amber); }
+.stat-card.green .stat-value { color: var(--green); }
+.stat-card.rose .stat-value { color: var(--rose); }
+.stat-card.cyan .stat-value { color: var(--cyan); }
+
+.stat-trend {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.trend-up { color: var(--rose); }
+.trend-down { color: var(--green); }
+.trend-neutral { color: var(--text-muted); }
+.stat-subtitle {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* ─── Filter Bar ─── */
+.filter-section {
+  padding: 16px 24px 0;
+  animation: fadeIn 0.3s ease-out 0.05s both;
+}
+
+.filter-bar {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 14px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.filter-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.filter-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.separator {
+  width: 1px;
+  height: 24px;
+  background: var(--border);
+  margin: 0 4px;
+}
+
+/* Chips */
+.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.chip-green { background: var(--green-glow); border-color: rgba(16, 185, 129, 0.3); color: var(--green); }
+.chip.active.chip-rose { background: var(--rose-glow); border-color: rgba(244, 63, 94, 0.3); color: var(--rose); }
+.chip.active.chip-blue { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); color: var(--blue); }
+
+.chip-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.chip-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+/* Active filter tags */
+.active-filters {
+  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;
+  background: none;
+  border: none;
+  color: inherit;
+}
+.filter-tag-remove:hover { opacity: 1; }
+.clear-all {
+  font-size: 11px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px 8px;
+  background: none;
+  border: none;
+}
+.clear-all:hover { color: var(--rose); }
+
+/* ─── Results Area (split: list + detail) ─── */
+.results-area {
+  flex: 1;
+  display: flex;
+  gap: 0;
+  padding: 16px 24px 24px;
+  min-height: 0;
+  animation: fadeIn 0.3s ease-out 0.1s both;
+}
+
+/* ─── Execution List Panel ─── */
+.list-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  transition: flex 0.25s ease;
+}
+.list-panel.with-detail { flex: 0 0 55%; }
+
+.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); }
+
+.live-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: var(--green);
+  border-color: var(--green);
+}
+.live-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--green);
+  animation: livePulse 2s ease-in-out infinite;
+}
+
+/* Table */
+.table-wrap {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-scroll {
+  flex: 1;
+  overflow-y: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+thead {
+  background: var(--bg-raised);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+th {
+  padding: 11px 16px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  user-select: none;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+th:hover { color: var(--text-secondary); }
+th.sorted { color: var(--amber); }
+.sort-arrow { font-size: 9px; margin-left: 4px; opacity: 0.4; }
+th.sorted .sort-arrow { opacity: 1; }
+
+tr.exec-row {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.1s;
+  cursor: pointer;
+  position: relative;
+}
+tr.exec-row:last-child { border-bottom: none; }
+tr.exec-row:hover { background: var(--bg-raised); }
+tr.exec-row.selected { background: var(--amber-glow); }
+
+/* Failed row accent */
+tr.exec-row.row-failed { border-left: 3px solid var(--rose); }
+tr.exec-row.row-running { border-left: 3px solid var(--blue); }
+tr.exec-row.row-completed { border-left: 3px solid transparent; }
+
+td {
+  padding: 11px 16px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+/* Status pill in table */
+.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-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.pill-completed { background: var(--green-glow); color: var(--green); }
+.pill-failed { background: var(--rose-glow); color: var(--rose); }
+.pill-running { background: rgba(59, 130, 246, 0.12); color: var(--blue); }
+.pill-running .status-dot { animation: livePulse 1.5s ease-in-out infinite; }
+
+/* Duration bar */
+.duration-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dur-bar {
+  width: 50px;
+  height: 4px;
+  background: var(--bg-base);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.dur-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+.dur-fast { background: var(--green); }
+.dur-medium { background: var(--amber); }
+.dur-slow { background: var(--rose); }
+.dur-text {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+  min-width: 48px;
+}
+
+/* App badge */
+.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-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.route-name {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.correlation-id {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-muted);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.time-cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.time-relative { color: var(--text-secondary); }
+.time-absolute {
+  font-size: 10px;
+  color: var(--text-muted);
+  display: block;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 12px;
+  border-top: 1px solid var(--border-subtle);
+}
+.page-btn {
+  width: 32px;
+  height: 32px;
+  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: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.page-btn:hover { border-color: var(--border); background: var(--bg-raised); }
+.page-btn.active { background: var(--amber-glow); border-color: var(--amber-dim); color: var(--amber); }
+.page-btn.disabled { opacity: 0.3; cursor: default; }
+
+/* ─── Detail Panel ─── */
+.detail-panel {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.25s ease, opacity 0.2s ease;
+  opacity: 0;
+  border-left: 1px solid transparent;
+  display: flex;
+  flex-direction: column;
+}
+.detail-panel.open {
+  width: 45%;
+  opacity: 1;
+  border-left-color: var(--border-subtle);
+  animation: slideInRight 0.25s ease-out both;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  flex-shrink: 0;
+}
+.detail-breadcrumb {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.detail-breadcrumb .bc-sep { color: var(--text-muted); font-size: 10px; }
+.detail-breadcrumb .bc-current { color: var(--amber); font-weight: 500; }
+
+.detail-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.15s;
+}
+.detail-close:hover { color: var(--text-primary); border-color: var(--text-muted); }
+
+/* Detail tabs */
+.detail-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  flex-shrink: 0;
+}
+.detail-tab {
+  padding: 10px 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  font-family: var(--font-body);
+}
+.detail-tab:hover { color: var(--text-secondary); }
+.detail-tab.active {
+  color: var(--amber);
+  border-bottom-color: var(--amber);
+}
+
+/* Detail body */
+.detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  background: var(--bg-base);
+}
+
+.detail-section {
+  margin-bottom: 20px;
+}
+.detail-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 8px 12px;
+  font-size: 13px;
+}
+.detail-key {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.detail-val {
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  word-break: break-all;
+}
+.detail-val.error-text { color: var(--rose); }
+
+/* Processor timeline (Gantt-style) */
+.processor-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.proc-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+}
+.proc-name {
+  width: 120px;
+  text-align: right;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.proc-bar-bg {
+  flex: 1;
+  height: 18px;
+  background: var(--bg-raised);
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+}
+.proc-bar-fill {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 6px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: rgba(255,255,255,0.8);
+  min-width: 24px;
+}
+.proc-bar-fill.proc-ok { background: rgba(16, 185, 129, 0.5); }
+.proc-bar-fill.proc-slow { background: rgba(240, 180, 41, 0.5); }
+.proc-bar-fill.proc-error { background: rgba(244, 63, 94, 0.5); }
+
+.proc-dur {
+  width: 50px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* Error block */
+.error-block {
+  background: var(--bg-raised);
+  border: 1px solid rgba(244, 63, 94, 0.2);
+  border-left: 3px solid var(--rose);
+  border-radius: var(--radius-sm);
+  padding: 14px 16px;
+}
+.error-class {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--rose);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.error-message {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+.error-expand {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-family: var(--font-mono);
+}
+.error-expand:hover { color: var(--amber); }
+
+/* Detail actions */
+.detail-actions {
+  display: flex;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  flex-shrink: 0;
+}
+.action-btn {
+  padding: 7px 16px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: var(--font-body);
+}
+.action-btn.primary {
+  background: var(--amber);
+  color: var(--bg-deep);
+  border: none;
+}
+.action-btn.primary:hover { background: #d4a017; }
+.action-btn.secondary {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+}
+.action-btn.secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }
+
+/* ─── Keyboard Shortcuts Hint ─── */
+.shortcuts-bar {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  display: flex;
+  gap: 12px;
+  z-index: 50;
+  animation: fadeIn 0.5s ease-out 0.5s both;
+}
+.shortcut-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
+}
+.shortcut-hint kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 1px 5px;
+  color: var(--text-secondary);
+}
+
+/* ─── Command Palette Overlay (shown as suggestion) ─── */
+.palette-overlay {
+  display: none;
+}
+
+/* Row keyboard focus */
+tr.exec-row:focus-visible {
+  outline: 2px solid var(--amber);
+  outline-offset: -2px;
+}
+</style>
+</head>
+<body>
+
+<!-- ════════════════════════════════════════════════════ -->
+<!-- TOP NAVIGATION                                      -->
+<!-- ════════════════════════════════════════════════════ -->
+<nav class="topnav">
+  <button class="hamburger" title="Toggle sidebar">&#9776;</button>
+  <a href="#" class="logo">
+    <svg width="22" height="22" 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="M8 12c0-2 1-4 4-4s4 2 4 4-1 4-4 4-4-2-4-4"/></svg>
+    cameleer3
+  </a>
+  <div class="search-bar" title="Press Ctrl+K to search">
+    <span class="search-icon">&#128269;</span>
+    <span class="search-placeholder">Search executions, routes, correlation IDs...</span>
+    <kbd class="search-kbd">Ctrl K</kbd>
+  </div>
+  <div class="nav-right">
+    <span class="env-badge">PROD</span>
+    <a href="#" class="nav-link active">Executions</a>
+    <a href="#" class="nav-link">Routes</a>
+    <a href="#" class="nav-link">API</a>
+    <span class="user-info">admin</span>
+  </div>
+</nav>
+
+<!-- ════════════════════════════════════════════════════ -->
+<!-- LAYOUT: SIDEBAR + MAIN                              -->
+<!-- ════════════════════════════════════════════════════ -->
+<div class="layout">
+
+  <!-- ─── Sidebar: App / Group Navigation ─── -->
+  <aside class="sidebar">
+    <div class="sidebar-search">
+      <input type="text" placeholder="Filter apps...">
+    </div>
+    <div class="app-list">
+      <button class="app-item active">
+        <span class="all-icon">*</span>
+        <div class="app-info">
+          <div class="app-name">All Applications</div>
+          <div class="app-meta">6 apps, 14 agents</div>
+        </div>
+      </button>
+      <div class="sidebar-divider"></div>
+      <button class="app-item">
+        <span class="health-dot dot-live"></span>
+        <div class="app-info">
+          <div class="app-name">order-service</div>
+          <div class="app-meta">3 agents &middot; 12 routes</div>
+        </div>
+      </button>
+      <button class="app-item">
+        <span class="health-dot dot-live"></span>
+        <div class="app-info">
+          <div class="app-name">payment-gateway</div>
+          <div class="app-meta">2 agents &middot; 8 routes</div>
+        </div>
+      </button>
+      <button class="app-item">
+        <span class="health-dot dot-stale"></span>
+        <div class="app-info">
+          <div class="app-name">inventory-sync</div>
+          <div class="app-meta">2 agents &middot; 5 routes</div>
+        </div>
+      </button>
+      <button class="app-item">
+        <span class="health-dot dot-live"></span>
+        <div class="app-info">
+          <div class="app-name">notification-hub</div>
+          <div class="app-meta">3 agents &middot; 6 routes</div>
+        </div>
+      </button>
+      <button class="app-item">
+        <span class="health-dot dot-live"></span>
+        <div class="app-info">
+          <div class="app-name">shipping-tracker</div>
+          <div class="app-meta">2 agents &middot; 4 routes</div>
+        </div>
+      </button>
+      <button class="app-item">
+        <span class="health-dot dot-dead"></span>
+        <div class="app-info">
+          <div class="app-name">legacy-bridge</div>
+          <div class="app-meta">2 agents &middot; 3 routes</div>
+        </div>
+      </button>
+    </div>
+    <div class="sidebar-bottom">
+      <div class="sidebar-divider"></div>
+      <a href="#" class="bottom-item">
+        <span class="bottom-icon">&#9881;</span>
+        <span>Admin</span>
+      </a>
+      <a href="#" class="bottom-item">
+        <span class="bottom-icon">&#128218;</span>
+        <span>API Docs</span>
+      </a>
+    </div>
+  </aside>
+
+  <!-- ─── Main Content Area ─── -->
+  <main class="main-content">
+
+    <!-- ═══ Level 1: Health Overview (glanceable) ═══ -->
+    <div class="health-strip">
+      <div class="stat-card amber" title="Click to see all executions">
+        <div class="stat-label">Executions (1h)</div>
+        <div class="stat-value">2,847</div>
+        <div class="stat-trend trend-neutral">&#8596; steady vs prev hour</div>
+      </div>
+      <div class="stat-card green">
+        <div class="stat-label">Success Rate</div>
+        <div class="stat-value">97.3%</div>
+        <div class="stat-trend trend-down">&#9660; 0.4% from 97.7%</div>
+      </div>
+      <div class="stat-card rose has-errors" title="Click to filter failed">
+        <div class="stat-label">Errors</div>
+        <div class="stat-value">77</div>
+        <div class="stat-trend trend-up">&#9650; +12 vs prev hour</div>
+      </div>
+      <div class="stat-card cyan">
+        <div class="stat-label">Avg Latency</div>
+        <div class="stat-value">142ms</div>
+        <div class="stat-trend trend-neutral">&#8596; P95: 380ms</div>
+      </div>
+    </div>
+
+    <!-- ═══ Level 2: Filters (actionable) ═══ -->
+    <div class="filter-section">
+      <div class="filter-bar">
+        <div class="filter-row">
+          <!-- Status pills -->
+          <div class="filter-group">
+            <span class="filter-label">Status</span>
+            <span class="chip active">All <span class="chip-count">2,847</span></span>
+            <span class="chip chip-green"><span class="chip-dot"></span> Completed <span class="chip-count">2,761</span></span>
+            <span class="chip chip-rose"><span class="chip-dot"></span> Failed <span class="chip-count">77</span></span>
+            <span class="chip chip-blue"><span class="chip-dot"></span> Running <span class="chip-count">9</span></span>
+          </div>
+
+          <div class="separator"></div>
+
+          <!-- Time presets -->
+          <div class="filter-group">
+            <span class="filter-label">Time</span>
+            <span class="chip">15m</span>
+            <span class="chip active">1h</span>
+            <span class="chip">6h</span>
+            <span class="chip">24h</span>
+            <span class="chip">7d</span>
+            <span class="chip">Custom</span>
+          </div>
+        </div>
+        <!-- Active filter tags row -->
+        <div class="active-filters">
+          <span class="filter-tag">time: last 1 hour <button class="filter-tag-remove">&times;</button></span>
+          <span class="filter-tag">sort: newest first <button class="filter-tag-remove">&times;</button></span>
+          <button class="clear-all">Clear all</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Level 3: Results (scannable list + detail) ═══ -->
+    <div class="results-area">
+
+      <!-- Execution List -->
+      <div class="list-panel with-detail">
+        <div class="results-header">
+          <span class="results-count">Showing <strong>1&ndash;25</strong> of <strong>2,847</strong> executions</span>
+          <button class="live-toggle" title="Auto-refresh every 5s">
+            <span class="live-dot"></span>
+            LIVE
+          </button>
+        </div>
+
+        <div class="table-wrap">
+          <div class="table-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width:90px">Status</th>
+                  <th>Application</th>
+                  <th>Route</th>
+                  <th>Correlation ID</th>
+                  <th class="sorted">Started <span class="sort-arrow">&#9660;</span></th>
+                  <th>Duration</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="exec-row row-failed selected" tabindex="0">
+                  <td><span class="status-pill pill-failed"><span class="status-dot"></span>FAILED</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot dot-live" style="background:var(--green)"></span>order-service</span></td>
+                  <td><span class="route-name">processOrderRoute</span></td>
+                  <td><span class="correlation-id">ord-2024-78291</span></td>
+                  <td class="time-cell"><span class="time-relative">2m ago</span><span class="time-absolute">14:58:12 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-slow" style="width:85%"></div></div><span class="dur-text">1,247ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-running" tabindex="0">
+                  <td><span class="status-pill pill-running"><span class="status-dot"></span>RUNNING</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>payment-gateway</span></td>
+                  <td><span class="route-name">chargePaymentRoute</span></td>
+                  <td><span class="correlation-id">pay-2024-18734</span></td>
+                  <td class="time-cell"><span class="time-relative">30s ago</span><span class="time-absolute">14:59:42 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-medium" style="width:45%"></div></div><span class="dur-text">~30s</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>order-service</span></td>
+                  <td><span class="route-name">validateOrderRoute</span></td>
+                  <td><span class="correlation-id">ord-2024-78290</span></td>
+                  <td class="time-cell"><span class="time-relative">3m ago</span><span class="time-absolute">14:57:04 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-fast" style="width:15%"></div></div><span class="dur-text">89ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>notification-hub</span></td>
+                  <td><span class="route-name">sendEmailRoute</span></td>
+                  <td><span class="correlation-id">ntf-2024-44821</span></td>
+                  <td class="time-cell"><span class="time-relative">4m ago</span><span class="time-absolute">14:56:33 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-fast" style="width:20%"></div></div><span class="dur-text">112ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--amber)"></span>inventory-sync</span></td>
+                  <td><span class="route-name">syncStockRoute</span></td>
+                  <td><span class="correlation-id">inv-2024-93102</span></td>
+                  <td class="time-cell"><span class="time-relative">5m ago</span><span class="time-absolute">14:55:11 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-medium" style="width:55%"></div></div><span class="dur-text">423ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-failed" tabindex="0">
+                  <td><span class="status-pill pill-failed"><span class="status-dot"></span>FAILED</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>payment-gateway</span></td>
+                  <td><span class="route-name">refundPaymentRoute</span></td>
+                  <td><span class="correlation-id">pay-2024-18720</span></td>
+                  <td class="time-cell"><span class="time-relative">7m ago</span><span class="time-absolute">14:53:28 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-slow" style="width:70%"></div></div><span class="dur-text">892ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>shipping-tracker</span></td>
+                  <td><span class="route-name">updateTrackingRoute</span></td>
+                  <td><span class="correlation-id">shp-2024-67433</span></td>
+                  <td class="time-cell"><span class="time-relative">8m ago</span><span class="time-absolute">14:52:15 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-fast" style="width:12%"></div></div><span class="dur-text">67ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>order-service</span></td>
+                  <td><span class="route-name">processOrderRoute</span></td>
+                  <td><span class="correlation-id">ord-2024-78289</span></td>
+                  <td class="time-cell"><span class="time-relative">10m ago</span><span class="time-absolute">14:50:03 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-fast" style="width:25%"></div></div><span class="dur-text">156ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>order-service</span></td>
+                  <td><span class="route-name">validateOrderRoute</span></td>
+                  <td><span class="correlation-id">ord-2024-78288</span></td>
+                  <td class="time-cell"><span class="time-relative">12m ago</span><span class="time-absolute">14:48:41 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-fast" style="width:18%"></div></div><span class="dur-text">98ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>notification-hub</span></td>
+                  <td><span class="route-name">sendSmsRoute</span></td>
+                  <td><span class="correlation-id">ntf-2024-44819</span></td>
+                  <td class="time-cell"><span class="time-relative">14m ago</span><span class="time-absolute">14:46:22 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-fast" style="width:10%"></div></div><span class="dur-text">52ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-failed" tabindex="0">
+                  <td><span class="status-pill pill-failed"><span class="status-dot"></span>FAILED</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--amber)"></span>inventory-sync</span></td>
+                  <td><span class="route-name">syncStockRoute</span></td>
+                  <td><span class="correlation-id">inv-2024-93098</span></td>
+                  <td class="time-cell"><span class="time-relative">15m ago</span><span class="time-absolute">14:45:09 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-slow" style="width:95%"></div></div><span class="dur-text">2,340ms</span></div></td>
+                </tr>
+                <tr class="exec-row row-completed" tabindex="0">
+                  <td><span class="status-pill pill-completed"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="app-badge"><span class="app-badge-dot" style="background:var(--green)"></span>shipping-tracker</span></td>
+                  <td><span class="route-name">trackParcelRoute</span></td>
+                  <td><span class="correlation-id">shp-2024-67430</span></td>
+                  <td class="time-cell"><span class="time-relative">18m ago</span><span class="time-absolute">14:42:55 UTC</span></td>
+                  <td><div class="duration-cell"><div class="dur-bar"><div class="dur-fill dur-fast" style="width:22%"></div></div><span class="dur-text">134ms</span></div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="pagination">
+            <button class="page-btn disabled">&laquo;</button>
+            <button class="page-btn active">1</button>
+            <button class="page-btn">2</button>
+            <button class="page-btn">3</button>
+            <span style="color:var(--text-muted);padding:0 4px;font-family:var(--font-mono)">&hellip;</span>
+            <button class="page-btn">114</button>
+            <button class="page-btn">&raquo;</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══ Level 4: Detail Panel (on-demand) ═══ -->
+      <div class="detail-panel open">
+        <div class="detail-header">
+          <div class="detail-breadcrumb">
+            <span>order-service</span>
+            <span class="bc-sep">&#9656;</span>
+            <span>processOrderRoute</span>
+            <span class="bc-sep">&#9656;</span>
+            <span class="bc-current">ord-2024-78291</span>
+          </div>
+          <button class="detail-close" title="Close (Esc)">&times;</button>
+        </div>
+
+        <div class="detail-tabs">
+          <button class="detail-tab active">Overview</button>
+          <button class="detail-tab">Processors</button>
+          <button class="detail-tab">Exchange</button>
+          <button class="detail-tab">Error</button>
+        </div>
+
+        <div class="detail-body">
+          <!-- Overview tab content -->
+          <div class="detail-section">
+            <div class="detail-section-title">Execution Details</div>
+            <div class="detail-grid">
+              <span class="detail-key">Status</span>
+              <span class="detail-val"><span class="status-pill pill-failed" style="font-size:11px"><span class="status-dot"></span>FAILED</span></span>
+              <span class="detail-key">Correlation ID</span>
+              <span class="detail-val">ord-2024-78291</span>
+              <span class="detail-key">Execution ID</span>
+              <span class="detail-val">a3f8c2d1-7e4b-4a91-b6f0-2c8d9e3a1b5f</span>
+              <span class="detail-key">Application</span>
+              <span class="detail-val">order-service</span>
+              <span class="detail-key">Route</span>
+              <span class="detail-val" style="color:var(--amber);cursor:pointer">processOrderRoute</span>
+              <span class="detail-key">Agent</span>
+              <span class="detail-val">order-svc-pod-7b8c9d-x2k4p</span>
+              <span class="detail-key">Started</span>
+              <span class="detail-val">2024-03-17T14:58:12.341Z</span>
+              <span class="detail-key">Duration</span>
+              <span class="detail-val" style="color:var(--rose)">1,247ms</span>
+              <span class="detail-key">Processors</span>
+              <span class="detail-val">7 (5 ok, 1 failed, 1 skipped)</span>
+            </div>
+          </div>
+
+          <!-- Processor Timeline -->
+          <div class="detail-section">
+            <div class="detail-section-title">Processor Timeline</div>
+            <div class="processor-timeline">
+              <div class="proc-row">
+                <span class="proc-name">unmarshal</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:0;width:8%">12ms</div></div>
+                <span class="proc-dur">12ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">validate</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:8%;width:5%">8ms</div></div>
+                <span class="proc-dur">8ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">enrich(inventory)</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-slow" style="left:13%;width:35%">420ms</div></div>
+                <span class="proc-dur">420ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">transform</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:48%;width:3%">5ms</div></div>
+                <span class="proc-dur">5ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">to(payment-api)</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-error" style="left:51%;width:45%">780ms</div></div>
+                <span class="proc-dur">780ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">log</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:96%;width:2%">2ms</div></div>
+                <span class="proc-dur">2ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name" style="color:var(--text-muted)">marshal</span>
+                <div class="proc-bar-bg" style="opacity:0.4"></div>
+                <span class="proc-dur" style="color:var(--text-muted)">skip</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Error Details -->
+          <div class="detail-section">
+            <div class="detail-section-title">Error</div>
+            <div class="error-block">
+              <div class="error-class">org.apache.camel.http.base.HttpOperationFailedException</div>
+              <div class="error-message">
+                HTTP operation failed invoking https://payment-api.internal/v2/charge<br>
+                with statusCode: 503 Service Unavailable<br>
+                &nbsp;&nbsp;at processor: to(payment-api) [step 5/7]
+              </div>
+              <button class="error-expand">&#9656; Show full stack trace</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-actions">
+          <button class="action-btn primary">View Route Diagram</button>
+          <button class="action-btn secondary">Copy Execution ID</button>
+          <button class="action-btn secondary">Re-process</button>
+        </div>
+      </div>
+
+    </div><!-- /results-area -->
+  </main>
+</div><!-- /layout -->
+
+<!-- ─── Keyboard Shortcuts Bar ─── -->
+<div class="shortcuts-bar">
+  <div class="shortcut-hint"><kbd>Ctrl</kbd>+<kbd>K</kbd> Search</div>
+  <div class="shortcut-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> Navigate</div>
+  <div class="shortcut-hint"><kbd>Enter</kbd> Open detail</div>
+  <div class="shortcut-hint"><kbd>Esc</kbd> Close</div>
+  <div class="shortcut-hint"><kbd>?</kbd> All shortcuts</div>
+</div>
+
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-v2-dark.html b/docs/ui-mocks/mock-v2-dark.html
new file mode 100644
index 00000000..7a4eac5d
--- /dev/null
+++ b/docs/ui-mocks/mock-v2-dark.html
@@ -0,0 +1,1707 @@
+<!--
+  ============================================================================
+  CAMELEER3 v2 — Operations Dashboard (Dark Theme)
+  ============================================================================
+
+  DESIGN NOTES — SYNTHESIS RATIONALE
+  ===================================
+
+  What was taken from each expert:
+
+  FROM DESIGN EXPERT:
+  - Amber-gold accent (#D4940F) as the primary brand color, maintaining the
+    "Desert Dusk" identity even in dark mode. The camel silhouette SVG logo.
+  - Typography system: DM Sans + JetBrains Mono, four-level hierarchy.
+  - Card-based layouts with subtle borders and layered surfaces.
+  - Duration bar sparklines for quick visual comparison.
+  - Warm sidebar tone (not pure black, but warm obsidian).
+
+  FROM USABILITY EXPERT:
+  - Full information hierarchy: health strip -> filter bar -> results -> detail.
+  - Master-detail pattern with slide-in panel (45% width on row select).
+  - Status pills with live counts, time preset chips, removable filter tags.
+  - Relative timestamps ("2m ago") with absolute fallback.
+  - Keyboard shortcut hints bar.
+  - Failed/running row border accents for scan-ability.
+  - Processor Gantt timeline in detail panel.
+  - Tab-based progressive disclosure in detail (Overview/Processors/Exchange/Error).
+
+  FROM OPERATOR EXPERT:
+  - Business IDs (Order ID, Customer, Source) as first-class table columns.
+  - Inline error previews directly below failed rows — no click needed.
+  - SLA threshold indicators on metric charts and duration cells.
+  - Agent health panel (integrated into sidebar).
+  - Trend arrows on all metric cards (directional context).
+  - Top error pattern grouping with occurrence counts.
+  - Shift-aware labeling ("since 06:00", overnight vs. today split).
+
+  KEY DESIGN DECISIONS:
+  1. Dark palette uses refined obsidian (#0B0F18) not generic navy. Surfaces
+     layer from #0B0F18 -> #111827 -> #1A2332 -> #212D3F for depth.
+  2. Status colors are tuned for dark contrast: emerald (#10B981), amber
+     (#F0B429), rose (#F43F5E), sky blue (#3B82F6) with subtle glow effects.
+  3. The warm amber accent (#D4940F) provides brand continuity with the light
+     theme — both mocks are clearly the same product.
+  4. Glow effects on status indicators (box-shadow with colored alpha) give
+     the dark theme a polished, premium feel without being garish.
+  5. Chart palettes use semi-transparent fills that work on dark backgrounds,
+     with SLA threshold lines clearly visible.
+
+  WHAT MAKES THIS BETTER THAN EACH INDIVIDUAL:
+  - Design expert had the warm brand but was light-only. This proves the amber
+    brand works equally well on dark backgrounds.
+  - Usability expert had a dark theme but with generic navy colors and no
+    business context. This uses refined obsidian + business data.
+  - Operator expert had excellent data but a flat single-page layout with no
+    sidebar or detail panel. This adds proper navigation + drill-down.
+  - The synthesis creates a cohesive dark monitoring experience: professional
+    enough for a NOC wall display, detailed enough for incident response.
+
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>Cameleer3 — Operations Dashboard (Dark)</title>
+<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@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ==========================================================================
+   RESET & FOUNDATIONS
+   ========================================================================== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Surface palette (obsidian layers) */
+  --bg-deep:     #0B0F18;
+  --bg-base:     #0E1220;
+  --bg-surface:  #141B2A;
+  --bg-raised:   #1A2332;
+  --bg-hover:    #212D3F;
+
+  /* Sidebar (warm obsidian) */
+  --sidebar-bg:     #0E1118;
+  --sidebar-hover:  #171D28;
+  --sidebar-active: #1D2636;
+  --sidebar-text:   #94A3B8;
+  --sidebar-muted:  #475569;
+
+  /* Text */
+  --text-primary:   #E8ECF4;
+  --text-secondary: #94A3B8;
+  --text-muted:     #5A6B83;
+  --text-faint:     #3A4A5E;
+
+  /* Borders */
+  --border:        #1E2D3D;
+  --border-subtle: #172030;
+
+  /* Brand accent (amber-gold) */
+  --amber:       #D4940F;
+  --amber-light: #F0C060;
+  --amber-bg:    rgba(212, 148, 15, 0.12);
+  --amber-deep:  #A67200;
+  --amber-glow:  rgba(212, 148, 15, 0.15);
+
+  /* Status colors (dark-optimized, brighter for contrast) */
+  --success:        #10B981;
+  --success-bg:     rgba(16, 185, 129, 0.10);
+  --success-border: rgba(16, 185, 129, 0.25);
+  --success-glow:   rgba(16, 185, 129, 0.15);
+
+  --warning:        #F0B429;
+  --warning-bg:     rgba(240, 180, 41, 0.10);
+  --warning-border: rgba(240, 180, 41, 0.25);
+
+  --error:          #F43F5E;
+  --error-bg:       rgba(244, 63, 94, 0.08);
+  --error-border:   rgba(244, 63, 94, 0.20);
+  --error-glow:     rgba(244, 63, 94, 0.12);
+
+  --running:        #3B82F6;
+  --running-bg:     rgba(59, 130, 246, 0.10);
+  --running-border: rgba(59, 130, 246, 0.25);
+
+  --cyan:           #22D3EE;
+  --cyan-bg:        rgba(34, 211, 238, 0.10);
+
+  /* Typography */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing & Radii */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows (dark-optimized: deeper, colored) */
+  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.35);
+  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--border-subtle);
+}
+
+html { font-size: 14px; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg-deep);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Subtle gradient background */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 900px 450px at 15% 10%, rgba(212, 148, 15, 0.03), transparent),
+    radial-gradient(ellipse 700px 700px at 85% 85%, rgba(34, 211, 238, 0.015), transparent);
+  pointer-events: none;
+  z-index: 0;
+}
+
+::-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); }
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+  50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
+}
+@keyframes errorPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.2); }
+  50%      { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0); }
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes glowPulse {
+  0%, 100% { opacity: 0.6; }
+  50%      { opacity: 1; }
+}
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+.delay-1 { animation-delay: 0.04s; }
+.delay-2 { animation-delay: 0.08s; }
+.delay-3 { animation-delay: 0.12s; }
+.delay-4 { animation-delay: 0.16s; }
+
+/* ==========================================================================
+   LAYOUT: 3-column
+   ========================================================================== */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+/* ==========================================================================
+   SIDEBAR (warm obsidian)
+   ========================================================================== */
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-logo {
+  padding: 16px 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.sidebar-logo .brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--amber-light);
+  letter-spacing: -0.3px;
+}
+
+.sidebar-logo .version {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+  margin-left: 2px;
+}
+
+.sidebar-search { padding: 10px 12px; }
+
+.sidebar-search input {
+  width: 100%;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px 6px 28px;
+  color: var(--sidebar-text);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.sidebar-search input::placeholder { color: var(--sidebar-muted); }
+.sidebar-search input:focus { border-color: var(--amber); }
+
+.sidebar-search-wrap { position: relative; }
+.sidebar-search-wrap .search-icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sidebar-muted);
+  font-size: 12px;
+}
+
+.sidebar-section {
+  padding: 14px 12px 5px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+}
+
+.sidebar-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--sidebar-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.12s;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  margin-bottom: 1px;
+}
+
+.sidebar-item:hover { background: var(--sidebar-hover); color: var(--text-primary); }
+.sidebar-item.active { background: var(--sidebar-active); color: var(--amber-light); border-left-color: var(--amber); }
+
+.sidebar-item .health {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-live { background: var(--success); box-shadow: 0 0 6px var(--success-glow); }
+.health-stale { background: var(--warning); box-shadow: 0 0 6px rgba(240, 180, 41, 0.3); }
+.health-dead { background: var(--sidebar-muted); }
+
+.sidebar-item .item-info { flex: 1; min-width: 0; }
+.sidebar-item .item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-item .item-meta { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
+
+.sidebar-item .item-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  background: var(--bg-raised);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.sidebar-item.active .item-count { background: var(--amber-bg); color: var(--amber-light); }
+
+.sidebar-divider {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 6px 12px;
+}
+
+/* Agent health in sidebar */
+.sidebar-agents-header {
+  padding: 14px 12px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-agent-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  margin: 0 6px 2px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--sidebar-text);
+  transition: background 0.1s;
+}
+
+.agent-item:hover { background: var(--sidebar-hover); }
+
+.agent-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.agent-info { flex: 1; min-width: 0; }
+.agent-name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
+.agent-detail { font-size: 10px; color: var(--sidebar-muted); }
+
+.agent-stats-col {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+}
+
+.agent-tps { color: var(--sidebar-text); }
+
+.sidebar-bottom {
+  border-top: 1px solid var(--border-subtle);
+  padding: 6px;
+}
+
+.sidebar-bottom .sidebar-item {
+  font-size: 12px;
+  color: var(--sidebar-muted);
+  border-left: 3px solid transparent;
+}
+
+.sidebar-bottom .sidebar-item:hover { color: var(--sidebar-text); }
+
+/* ==========================================================================
+   MAIN CONTENT AREA
+   ========================================================================== */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  height: 48px;
+  flex-shrink: 0;
+  background: rgba(14, 18, 32, 0.85);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.topbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topbar-breadcrumb .crumb-active { color: var(--text-primary); font-weight: 600; }
+.topbar-breadcrumb .crumb-sep { color: var(--text-faint); font-size: 11px; }
+
+.topbar-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  min-width: 280px;
+}
+
+.topbar-search:hover { border-color: var(--text-muted); }
+
+.topbar-kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  padding: 0 4px;
+  border-radius: 3px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-env {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.topbar-shift {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--cyan-bg);
+  color: var(--cyan);
+  border: 1px solid rgba(34, 211, 238, 0.2);
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.topbar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--amber-bg);
+  color: var(--amber);
+  font-weight: 600;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(212, 148, 15, 0.3);
+}
+
+/* Content scroll container */
+.content-wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px 40px;
+  min-width: 0;
+}
+
+/* ==========================================================================
+   HEALTH STATUS BAR
+   ========================================================================== */
+.health-strip {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.stat-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 12px 16px;
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.2s;
+  cursor: pointer;
+}
+
+.stat-card:hover { border-color: var(--border); }
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+}
+
+.stat-card.card-amber::before  { background: linear-gradient(90deg, var(--amber), transparent); }
+.stat-card.card-green::before  { background: linear-gradient(90deg, var(--success), transparent); }
+.stat-card.card-error::before  { background: linear-gradient(90deg, var(--error), transparent); }
+.stat-card.card-teal::before   { background: linear-gradient(90deg, var(--cyan), transparent); }
+.stat-card.card-warn::before   { background: linear-gradient(90deg, var(--warning), transparent); }
+
+.stat-card.has-errors { animation: errorPulse 2.5s ease-in-out infinite; }
+
+.stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+}
+
+.stat-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--text-primary);
+}
+
+.stat-value.val-amber  { color: var(--amber); }
+.stat-value.val-green  { color: var(--success); }
+.stat-value.val-error  { color: var(--error); }
+.stat-value.val-teal   { color: var(--cyan); }
+.stat-value.val-warn   { color: var(--warning); }
+
+.stat-unit { font-size: 12px; color: var(--text-muted); }
+
+.stat-trend {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.trend-up-good   { color: var(--success); }
+.trend-up-bad    { color: var(--error); }
+.trend-down-good { color: var(--success); }
+.trend-down-bad  { color: var(--error); }
+.trend-flat      { color: var(--text-muted); }
+
+.stat-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+.stat-detail strong { color: var(--text-secondary); }
+
+/* ==========================================================================
+   FILTER BAR
+   ========================================================================== */
+.filter-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 12px 16px;
+  margin-bottom: 16px;
+}
+
+.filter-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.filter-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  margin-right: 2px;
+}
+
+.filter-sep {
+  width: 1px;
+  height: 22px;
+  background: var(--border);
+  margin: 0 6px;
+}
+
+.filter-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s;
+  white-space: nowrap;
+}
+
+.filter-pill:hover { border-color: var(--text-muted); background: var(--bg-raised); }
+
+.filter-pill.active {
+  background: var(--amber-bg);
+  border-color: rgba(212, 148, 15, 0.35);
+  color: var(--amber-light);
+  font-weight: 600;
+}
+
+.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.pill-count { font-family: var(--font-mono); font-size: 10px; opacity: 0.7; }
+
+.filter-input-wrap { position: relative; flex: 1; max-width: 360px; }
+
+.filter-input-wrap .fi-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.filter-input {
+  width: 100%;
+  padding: 6px 12px 6px 30px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.filter-input::placeholder { color: var(--text-muted); }
+.filter-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
+
+.active-filters {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.filter-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  background: var(--amber-bg);
+  border: 1px solid rgba(212, 148, 15, 0.25);
+  border-radius: 20px;
+  font-size: 11px;
+  color: var(--amber-light);
+  font-family: var(--font-mono);
+}
+
+.filter-tag-remove { cursor: pointer; opacity: 0.5; font-size: 13px; line-height: 1; background: none; border: none; color: inherit; }
+.filter-tag-remove:hover { opacity: 1; }
+
+.clear-all { font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 3px 6px; background: none; border: none; }
+.clear-all:hover { color: var(--error); }
+
+/* ==========================================================================
+   EXECUTION TABLE
+   ========================================================================== */
+.table-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.table-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+
+.table-right { display: flex; align-items: center; gap: 12px; }
+.table-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+
+.live-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--success-border);
+  border-radius: var(--radius-sm);
+  background: var(--success-bg);
+  color: var(--success);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.live-btn:hover { background: rgba(16, 185, 129, 0.15); }
+
+.live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.table-scroll { overflow-x: auto; }
+
+table { width: 100%; border-collapse: collapse; }
+
+thead {
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  padding: 9px 14px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+
+th:hover { color: var(--text-secondary); }
+th.sorted { color: var(--amber); }
+.sort-arrow { font-size: 8px; margin-left: 3px; opacity: 0.4; }
+th.sorted .sort-arrow { opacity: 1; }
+
+tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  border-left: 3px solid transparent;
+  transition: background 0.08s;
+  cursor: pointer;
+}
+
+tbody tr:last-child { border-bottom: none; }
+tbody tr:hover { background: var(--bg-hover); }
+tbody tr.selected { background: var(--amber-bg); }
+
+tbody tr.row-error   { border-left-color: var(--error); }
+tbody tr.row-warning { border-left-color: var(--warning); }
+tbody tr.row-running { border-left-color: var(--running); }
+
+td {
+  padding: 9px 14px;
+  font-size: 13px;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+/* Status badge with glow */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.status-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.status-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
+.status-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }
+.status-running { background: var(--running-bg); color: var(--running); border: 1px solid var(--running-border); }
+
+.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+
+/* Glow on status indicators */
+.status-success .status-dot { box-shadow: 0 0 4px var(--success-glow); }
+.status-error .status-dot   { box-shadow: 0 0 4px var(--error-glow); }
+
+.route-name { font-weight: 500; color: var(--text-primary); }
+.route-name:hover { color: var(--amber); }
+.route-group { font-size: 11px; color: var(--text-muted); }
+
+.biz-id { font-family: var(--font-mono); font-weight: 500; color: var(--cyan); font-size: 12px; }
+.biz-id-secondary { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+
+.time-relative { color: var(--text-secondary); font-size: 13px; }
+.time-absolute { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); display: block; }
+
+.duration { font-family: var(--font-mono); font-size: 12px; }
+.dur-fast   { color: var(--success); }
+.dur-normal { color: var(--text-primary); }
+.dur-slow   { color: var(--warning); }
+.dur-breach { color: var(--error); font-weight: 600; }
+
+.sla-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--error);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  margin-left: 4px;
+  animation: glowPulse 2s ease-in-out infinite;
+}
+
+.agent-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.agent-badge-dot { width: 5px; height: 5px; border-radius: 50%; }
+
+/* Error preview row */
+.error-preview-row td {
+  padding: 0 14px 8px 20px !important;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.error-preview {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(244, 63, 94, 0.05);
+  border: 1px solid var(--error-border);
+  border-left: 3px solid var(--error);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--error);
+  line-height: 1.6;
+}
+
+.error-preview-icon { flex-shrink: 0; margin-top: 1px; }
+.error-preview-text { white-space: normal; word-break: break-word; }
+.error-expand-hint { color: var(--text-muted); font-size: 10px; margin-top: 4px; font-family: var(--font-body); }
+
+/* Pagination */
+.table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--bg-raised);
+}
+
+.pagination { display: flex; align-items: center; gap: 4px; }
+
+.page-btn {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.12s;
+}
+
+.page-btn:hover { background: var(--bg-hover); border-color: var(--text-muted); }
+.page-btn.active { background: var(--amber-bg); border-color: rgba(212, 148, 15, 0.35); color: var(--amber-light); font-weight: 600; }
+
+/* ==========================================================================
+   METRICS ROW
+   ========================================================================== */
+.metrics-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.metric-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.metric-card-header {
+  padding: 12px 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.metric-card-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
+.metric-card-value { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); }
+
+.metric-chart { padding: 10px 16px 12px; height: 90px; position: relative; }
+
+.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.chart-area { opacity: 0.15; }
+.chart-grid-line { stroke: var(--border-subtle); stroke-width: 0.5; }
+.chart-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-muted); }
+
+.sla-line { stroke: var(--error); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.6; }
+.sla-label-text { fill: var(--error); font-size: 8px; font-family: var(--font-mono); opacity: 0.7; }
+
+/* ==========================================================================
+   DETAIL PANEL
+   ========================================================================== */
+.detail-panel {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.25s ease, opacity 0.2s ease;
+  opacity: 0;
+  border-left: 1px solid transparent;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface);
+  flex-shrink: 0;
+}
+
+.detail-panel.open {
+  width: 400px;
+  opacity: 1;
+  border-left-color: var(--border);
+  animation: slideIn 0.25s ease-out both;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.detail-breadcrumb { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
+.detail-breadcrumb .bc-sep { color: var(--text-faint); font-size: 9px; }
+.detail-breadcrumb .bc-current { color: var(--amber); font-weight: 500; }
+
+.detail-close {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+
+.detail-close:hover { color: var(--text-primary); border-color: var(--text-muted); }
+
+.detail-tabs { display: flex; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
+
+.detail-tab {
+  padding: 9px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  background: none;
+  border-top: none; border-left: none; border-right: none;
+  font-family: var(--font-body);
+}
+
+.detail-tab:hover { color: var(--text-secondary); }
+.detail-tab.active { color: var(--amber); border-bottom-color: var(--amber); }
+
+.detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--bg-deep);
+}
+
+.detail-section { margin-bottom: 18px; }
+
+.detail-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 6px 10px;
+  font-size: 12px;
+}
+
+.detail-key { color: var(--text-muted); font-size: 11px; }
+.detail-val { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; word-break: break-all; }
+.detail-val.error-text { color: var(--error); }
+.detail-val.link { color: var(--amber); cursor: pointer; }
+
+/* Processor timeline */
+.processor-timeline { display: flex; flex-direction: column; gap: 5px; }
+.proc-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
+
+.proc-name {
+  width: 100px;
+  text-align: right;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.proc-bar-bg {
+  flex: 1;
+  height: 16px;
+  background: var(--bg-raised);
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+}
+
+.proc-bar-fill {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 5px;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  color: rgba(255,255,255,0.8);
+  min-width: 20px;
+}
+
+.proc-ok   { background: rgba(16, 185, 129, 0.45); }
+.proc-slow { background: rgba(240, 180, 41, 0.45); }
+.proc-fail { background: rgba(244, 63, 94, 0.45); }
+
+.proc-dur { width: 42px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
+
+/* Error block */
+.error-block {
+  background: rgba(244, 63, 94, 0.05);
+  border: 1px solid var(--error-border);
+  border-left: 3px solid var(--error);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+}
+
+.error-class { font-family: var(--font-mono); font-size: 11px; color: var(--error); font-weight: 600; margin-bottom: 4px; }
+
+.error-message-detail { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); line-height: 1.6; }
+
+.error-expand { margin-top: 6px; font-size: 10px; color: var(--text-muted); cursor: pointer; background: none; border: none; font-family: var(--font-mono); }
+.error-expand:hover { color: var(--amber); }
+
+/* Detail actions */
+.detail-actions {
+  display: flex;
+  gap: 6px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.action-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: var(--font-body); }
+.action-btn.primary { background: var(--amber); color: var(--bg-deep); border: none; }
+.action-btn.primary:hover { background: var(--amber-light); }
+.action-btn.secondary { background: none; border: 1px solid var(--border); color: var(--text-secondary); }
+.action-btn.secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }
+
+/* ==========================================================================
+   KEYBOARD SHORTCUTS BAR
+   ========================================================================== */
+.shortcuts-bar {
+  position: fixed;
+  bottom: 12px;
+  right: 12px;
+  display: flex;
+  gap: 10px;
+  z-index: 50;
+  animation: fadeIn 0.5s ease-out 0.5s both;
+}
+
+.shortcut-hint {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+}
+
+.shortcut-hint kbd {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 4px;
+  color: var(--text-secondary);
+}
+
+.mono { font-family: var(--font-mono); }
+</style>
+</head>
+<body>
+<div class="app">
+
+  <!-- SIDEBAR -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path style="fill:#D4940F" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
+      </svg>
+      <div>
+        <span class="brand">cameleer</span><span class="version">v3</span>
+      </div>
+    </div>
+
+    <div class="sidebar-search">
+      <div class="sidebar-search-wrap">
+        <span class="search-icon">&#9671;</span>
+        <input type="text" placeholder="Filter applications...">
+      </div>
+    </div>
+
+    <div class="sidebar-section">Applications</div>
+
+    <div class="sidebar-items">
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info"><div class="item-name">All Applications</div></div>
+        <span class="item-count">4</span>
+      </div>
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-item active">
+        <span class="health health-live"></span>
+        <div class="item-info"><div class="item-name">order-service</div><div class="item-meta">2 agents</div></div>
+        <span class="item-count">1,847</span>
+      </div>
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info"><div class="item-name">payment-gateway</div><div class="item-meta">2 agents</div></div>
+        <span class="item-count">923</span>
+      </div>
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info"><div class="item-name">shipment-tracker</div><div class="item-meta">2 agents</div></div>
+        <span class="item-count">471</span>
+      </div>
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info"><div class="item-name">notification-hub</div><div class="item-meta">1 agent</div></div>
+        <span class="item-count">128</span>
+      </div>
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-section">Routes</div>
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-intake</div></div>
+        <span class="item-count">892</span>
+      </div>
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-enrichment</div></div>
+        <span class="item-count">541</span>
+      </div>
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">payment-process</div></div>
+        <span class="item-count">414</span>
+      </div>
+    </div>
+
+    <!-- Agent health -->
+    <div class="sidebar-agents-header">
+      <span>Agents</span>
+      <span class="sidebar-agent-badge">4/4 live</span>
+    </div>
+
+    <div style="padding: 0 0 6px; overflow-y: auto; max-height: 180px;">
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info"><div class="agent-name">prod-1</div><div class="agent-detail">order-service v3.2.1</div></div>
+        <div class="agent-stats-col"><div class="agent-tps">14.2/s</div><div>12s ago</div></div>
+      </div>
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info"><div class="agent-name">prod-2</div><div class="agent-detail">payment-svc v3.2.1</div></div>
+        <div class="agent-stats-col"><div class="agent-tps">11.8/s</div><div style="color: var(--error);">3 err/h</div></div>
+      </div>
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info"><div class="agent-name">prod-3</div><div class="agent-detail">shipment-svc v3.2.0</div></div>
+        <div class="agent-stats-col"><div class="agent-tps">12.1/s</div><div>5s ago</div></div>
+      </div>
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info"><div class="agent-name">prod-4</div><div class="agent-detail">shipment-svc v3.2.0</div></div>
+        <div class="agent-stats-col"><div class="agent-tps">9.1/s</div><div>3s ago</div></div>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9881;</span><div class="item-info"><div class="item-name">Admin</div></div></div>
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9776;</span><div class="item-info"><div class="item-name">API Docs</div></div></div>
+    </div>
+  </aside>
+
+  <!-- MAIN CONTENT -->
+  <div class="main">
+    <div class="topbar">
+      <div class="topbar-breadcrumb">
+        <span>Applications</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-active">order-service</span>
+      </div>
+      <div class="topbar-search">
+        <span style="font-size: 12px; color: var(--text-muted);">&#128270;</span>
+        <span>Search by Order ID, route, error...</span>
+        <span class="topbar-kbd">Ctrl+K</span>
+      </div>
+      <div class="topbar-right">
+        <span class="topbar-env">PRODUCTION</span>
+        <span class="topbar-shift">Shift: Day (06:00-18:00)</span>
+        <div class="topbar-user">
+          <span>hendrik</span>
+          <div class="topbar-avatar">H</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content-wrap">
+      <div class="content">
+
+        <!-- Health strip -->
+        <div class="health-strip animate-in">
+          <div class="stat-card card-amber">
+            <div class="stat-label">Executions (shift)</div>
+            <div class="stat-value-row"><span class="stat-value">3,241</span><span class="stat-trend trend-up-good">+12%</span></div>
+            <div class="stat-detail"><strong>97.1%</strong> success since 06:00</div>
+          </div>
+          <div class="stat-card card-green">
+            <div class="stat-label">Success Rate</div>
+            <div class="stat-value-row"><span class="stat-value val-green">97.1%</span><span class="stat-trend trend-down-bad">-0.4%</span></div>
+            <div class="stat-detail">3,147 ok / 56 warn / 38 error</div>
+          </div>
+          <div class="stat-card card-error has-errors">
+            <div class="stat-label">Errors (shift)</div>
+            <div class="stat-value-row"><span class="stat-value val-error">38</span><span class="stat-trend trend-up-bad">+5</span></div>
+            <div class="stat-detail"><strong>23</strong> overnight &middot; <strong>15</strong> since 06:00</div>
+          </div>
+          <div class="stat-card card-teal">
+            <div class="stat-label">Throughput</div>
+            <div class="stat-value-row"><span class="stat-value">47.2</span><span class="stat-unit">msg/s</span><span class="stat-trend trend-flat">&#8596;</span></div>
+            <div class="stat-detail">Capacity: 120 msg/s &middot; <strong>39%</strong></div>
+          </div>
+          <div class="stat-card card-warn">
+            <div class="stat-label">Latency p99</div>
+            <div class="stat-value-row"><span class="stat-value val-warn">287</span><span class="stat-unit">ms</span><span class="stat-trend trend-up-bad">+23ms</span></div>
+            <div class="stat-detail">SLA: &lt;300ms &middot; <strong style="color: var(--warning);">CLOSE</strong></div>
+          </div>
+        </div>
+
+        <!-- Filter bar -->
+        <div class="filter-section animate-in delay-1">
+          <div class="filter-row">
+            <div class="filter-input-wrap">
+              <span class="fi-icon">&#128270;</span>
+              <input class="filter-input" type="text" placeholder="Search by Order ID, correlation ID, error message...">
+            </div>
+            <div class="filter-sep"></div>
+            <div class="filter-group">
+              <span class="filter-label">Status</span>
+              <span class="filter-pill active">All <span class="pill-count">3,241</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--success);"></span> OK <span class="pill-count">3,147</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--warning);"></span> Warn <span class="pill-count">56</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--error);"></span> Error <span class="pill-count">38</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--running);"></span> Running <span class="pill-count">9</span></span>
+            </div>
+            <div class="filter-sep"></div>
+            <div class="filter-group">
+              <span class="filter-label">Time</span>
+              <span class="filter-pill">15m</span>
+              <span class="filter-pill">1h</span>
+              <span class="filter-pill active">Shift</span>
+              <span class="filter-pill">24h</span>
+              <span class="filter-pill">7d</span>
+            </div>
+          </div>
+          <div class="active-filters">
+            <span class="filter-tag">time: since 06:00 (shift) <button class="filter-tag-remove">&times;</button></span>
+            <span class="filter-tag">app: order-service <button class="filter-tag-remove">&times;</button></span>
+            <span class="filter-tag">sort: newest first <button class="filter-tag-remove">&times;</button></span>
+            <button class="clear-all">Clear all</button>
+          </div>
+        </div>
+
+        <!-- Execution table -->
+        <div class="table-section animate-in delay-2">
+          <div class="table-header">
+            <span class="table-title">Recent Executions</span>
+            <div class="table-right">
+              <span class="table-meta">Showing 1-20 of 3,241</span>
+              <button class="live-btn"><span class="live-dot"></span> LIVE</button>
+            </div>
+          </div>
+          <div class="table-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 85px">Status</th>
+                  <th>Route</th>
+                  <th>Order ID</th>
+                  <th>Customer</th>
+                  <th class="sorted">Started <span class="sort-arrow">&#9660;</span></th>
+                  <th>Duration</th>
+                  <th>Agent</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92184</div><div class="biz-id-secondary">SAP-DE</div></td>
+                  <td><span class="biz-id-secondary">CUST-44210</span></td>
+                  <td><span class="time-relative">2 min ago</span><span class="time-absolute">09:12:04</span></td>
+                  <td><span class="duration dur-fast">87ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">payment-validate</div><div class="route-group">payment-flow</div></td>
+                  <td><div class="biz-id">OP-92183</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-18773</span></td>
+                  <td><span class="time-relative">3 min ago</span><span class="time-absolute">09:11:22</span></td>
+                  <td><span class="duration dur-normal">164ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
+                </tr>
+                <tr class="row-running">
+                  <td><span class="status-badge status-running"><span class="status-dot" style="animation: pulse 1.5s ease-in-out infinite;"></span>RUN</span></td>
+                  <td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92185</div><div class="biz-id-secondary">EDI-US</div></td>
+                  <td><span class="biz-id-secondary">CUST-67501</span></td>
+                  <td><span class="time-relative">30s ago</span><span class="time-absolute">09:13:44</span></td>
+                  <td><span class="duration" style="color: var(--running);">~30s</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+                <tr class="row-warning">
+                  <td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td>
+                  <td><div class="route-name">shipment-dispatch</div><div class="route-group">shipment-flow</div></td>
+                  <td><div class="biz-id">OP-92180</div><div class="biz-id-secondary">SAP-DE</div></td>
+                  <td><span class="biz-id-secondary">CUST-55019</span></td>
+                  <td><span class="time-relative">5 min ago</span><span class="time-absolute">09:09:47</span></td>
+                  <td><span class="duration dur-slow">248ms</span> <span class="sla-tag">SLA</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td>
+                </tr>
+                <!-- ERROR with inline preview -->
+                <tr class="row-error selected">
+                  <td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
+                  <td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td>
+                  <td><div class="biz-id">OP-88421</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-31094</span></td>
+                  <td><span class="time-relative">8 min ago</span><span class="time-absolute">09:06:11</span></td>
+                  <td><span class="duration dur-breach">412ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
+                </tr>
+                <tr class="error-preview-row">
+                  <td colspan="7">
+                    <div class="error-preview">
+                      <span class="error-preview-icon">&#9888;</span>
+                      <div>
+                        <div class="error-preview-text">org.apache.camel.CamelExecutionException: Payment gateway timeout after 5000ms &mdash; POST https://pay.provider.com/v2/charge returned HTTP 504. Retry exhausted (3/3).</div>
+                        <div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <!-- ERROR 2 -->
+                <tr class="row-error">
+                  <td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
+                  <td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-88419</div><div class="biz-id-secondary">EDI-US</div></td>
+                  <td><span class="biz-id-secondary">CUST-72841</span></td>
+                  <td><span class="time-relative">12 min ago</span><span class="time-absolute">09:02:38</span></td>
+                  <td><span class="duration dur-breach">1,247ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+                <tr class="error-preview-row">
+                  <td colspan="7">
+                    <div class="error-preview">
+                      <span class="error-preview-icon">&#9888;</span>
+                      <div>
+                        <div class="error-preview-text">java.sql.SQLTransientConnectionException: HikariPool-1 - Connection not available, request timed out after 1000ms. (pool: 10, active: 10, idle: 0, waiting: 3)</div>
+                        <div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td><td><div class="biz-id">OP-92179</div><div class="biz-id-secondary">WEB-EU</div></td><td><span class="biz-id-secondary">CUST-90123</span></td><td><span class="time-relative">14 min ago</span><span class="time-absolute">09:00:15</span></td><td><span class="duration dur-fast">62ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td></tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">payment-validate</div><div class="route-group">payment-flow</div></td><td><div class="biz-id">OP-92178</div><div class="biz-id-secondary">SAP-DE</div></td><td><span class="biz-id-secondary">CUST-44210</span></td><td><span class="time-relative">16 min ago</span><span class="time-absolute">08:58:33</span></td><td><span class="duration dur-normal">131ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td></tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">shipment-track</div><div class="route-group">shipment-flow</div></td><td><div class="biz-id">OP-92175</div><div class="biz-id-secondary">EDI-US</div></td><td><span class="biz-id-secondary">CUST-67892</span></td><td><span class="time-relative">21 min ago</span><span class="time-absolute">08:53:07</span></td><td><span class="duration dur-fast">94ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-4</span></td></tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td><td><div class="biz-id">OP-92174</div><div class="biz-id-secondary">WEB-EU</div></td><td><span class="biz-id-secondary">CUST-15293</span></td><td><span class="time-relative">24 min ago</span><span class="time-absolute">08:50:41</span></td><td><span class="duration dur-fast">73ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td></tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td><td><div class="biz-id">OP-92173</div><div class="biz-id-secondary">SAP-DE</div></td><td><span class="biz-id-secondary">CUST-88104</span></td><td><span class="time-relative">28 min ago</span><span class="time-absolute">08:46:19</span></td><td><span class="duration dur-normal">198ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td></tr>
+                <tr class="row-warning"><td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td><td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td><td><div class="biz-id">OP-92170</div><div class="biz-id-secondary">EDI-US</div></td><td><span class="biz-id-secondary">CUST-50321</span></td><td><span class="time-relative">35 min ago</span><span class="time-absolute">08:39:52</span></td><td><span class="duration dur-slow">267ms</span> <span class="sla-tag">SLA</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td></tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">shipment-dispatch</div><div class="route-group">shipment-flow</div></td><td><div class="biz-id">OP-92168</div><div class="biz-id-secondary">WEB-EU</div></td><td><span class="biz-id-secondary">CUST-29104</span></td><td><span class="time-relative">42 min ago</span><span class="time-absolute">08:32:28</span></td><td><span class="duration dur-fast">55ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td></tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td><td><div class="biz-id">OP-92165</div><div class="biz-id-secondary">SAP-DE</div></td><td><span class="biz-id-secondary">CUST-77618</span></td><td><span class="time-relative">51 min ago</span><span class="time-absolute">08:23:14</span></td><td><span class="duration dur-fast">81ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-4</span></td></tr>
+                <tr class="row-error"><td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td><td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td><td><div class="biz-id">OP-91844</div><div class="biz-id-secondary">WEB-EU</div></td><td><span class="biz-id-secondary">CUST-10082</span></td><td><span class="time-relative">5 hours ago</span><span class="time-absolute">04:12:55</span></td><td><span class="duration dur-breach">timeout</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td></tr>
+                <tr class="row-success"><td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td><td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td><td><div class="biz-id">OP-91840</div><div class="biz-id-secondary">EDI-US</div></td><td><span class="biz-id-secondary">CUST-38291</span></td><td><span class="time-relative">5 hours ago</span><span class="time-absolute">04:10:22</span></td><td><span class="duration dur-fast">78ms</span></td><td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td></tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="table-footer">
+            <span class="mono" style="font-size: 11px;">20 rows per page</span>
+            <div class="pagination">
+              <button class="page-btn active">1</button>
+              <button class="page-btn">2</button>
+              <button class="page-btn">3</button>
+              <button class="page-btn">...</button>
+              <button class="page-btn">162</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metrics panel -->
+        <div class="metrics-row animate-in delay-3">
+          <div class="metric-card">
+            <div class="metric-card-header">
+              <span class="metric-card-title">Throughput (1h)</span>
+              <span class="metric-card-value">47.2<span style="font-size:11px; font-weight:400; color: var(--text-muted)"> msg/s</span></span>
+            </div>
+            <div class="metric-chart">
+              <svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
+                <line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
+                <line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
+                <line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
+                <path d="M0,50 L25,47 50,43 75,45 100,40 125,37 150,39 175,35 200,33 225,35 250,37 275,34 300,33 L300,65 L0,65 Z" fill="#22D3EE" class="chart-area"/>
+                <path d="M0,50 L25,47 50,43 75,45 100,40 125,37 150,39 175,35 200,33 225,35 250,37 275,34 300,33" stroke="#22D3EE" class="chart-line"/>
+                <text x="0" y="63" class="chart-label">08:15</text>
+                <text x="145" y="63" class="chart-label">08:45</text>
+                <text x="282" y="63" class="chart-label">09:14</text>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-card">
+            <div class="metric-card-header">
+              <span class="metric-card-title">Latency p99 (1h)</span>
+              <span class="metric-card-value" style="color: var(--warning);">287<span style="font-size:11px; font-weight:400; color: var(--text-muted)">ms</span> <span style="font-size:12px; color: var(--error);">&#8599;</span></span>
+            </div>
+            <div class="metric-chart">
+              <svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
+                <line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
+                <line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
+                <line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
+                <line x1="0" y1="10" x2="300" y2="10" class="sla-line"/>
+                <text x="4" y="8" class="sla-label-text">SLA 300ms</text>
+                <rect x="0" y="0" width="300" height="10" fill="rgba(244, 63, 94, 0.04)"/>
+                <path d="M0,42 L25,40 50,37 75,35 100,33 125,30 150,27 175,23 200,20 225,18 250,16 275,14 300,13 L300,65 L0,65 Z" fill="#F0B429" class="chart-area"/>
+                <path d="M0,42 L25,40 50,37 75,35 100,33 125,30 150,27 175,23 200,20 225,18 250,16 275,14 300,13" stroke="#F0B429" class="chart-line"/>
+                <path d="M0,52 L25,53 50,52 75,50 100,52 125,51 150,50 175,52 200,50 225,49 250,50 275,48 300,47" stroke="#22D3EE" stroke-width="1" opacity="0.4" fill="none" stroke-dasharray="4 3"/>
+                <text x="0" y="63" class="chart-label">08:15</text>
+                <text x="145" y="63" class="chart-label">08:45</text>
+                <text x="282" y="63" class="chart-label">09:14</text>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-card">
+            <div class="metric-card-header">
+              <span class="metric-card-title">Error Rate (1h)</span>
+              <span class="metric-card-value" style="color: var(--error);">2.9<span style="font-size:11px; font-weight:400; color: var(--text-muted)">%</span> <span style="font-size:12px;">&#8599;</span></span>
+            </div>
+            <div class="metric-chart">
+              <svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
+                <line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
+                <line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
+                <line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
+                <line x1="0" y1="16" x2="300" y2="16" class="sla-line"/>
+                <text x="4" y="14" class="sla-label-text">SLA 5%</text>
+                <rect x="2" y="54" width="18" height="11" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
+                <rect x="24" y="56" width="18" height="9" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
+                <rect x="46" y="58" width="18" height="7" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
+                <rect x="68" y="55" width="18" height="10" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
+                <rect x="90" y="52" width="18" height="13" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
+                <rect x="112" y="56" width="18" height="9" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
+                <rect x="134" y="59" width="18" height="6" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
+                <rect x="156" y="50" width="18" height="15" rx="2" fill="rgba(244, 63, 94, 0.35)"/>
+                <rect x="178" y="45" width="18" height="20" rx="2" fill="rgba(244, 63, 94, 0.5)"/>
+                <rect x="200" y="42" width="18" height="23" rx="2" fill="rgba(244, 63, 94, 0.55)"/>
+                <rect x="222" y="38" width="18" height="27" rx="2" fill="rgba(244, 63, 94, 0.6)"/>
+                <rect x="244" y="36" width="18" height="29" rx="2" fill="rgba(244, 63, 94, 0.65)"/>
+                <rect x="266" y="34" width="18" height="31" rx="2" fill="rgba(244, 63, 94, 0.75)"/>
+                <text x="0" y="63" class="chart-label">08:15</text>
+                <text x="145" y="63" class="chart-label">08:45</text>
+                <text x="282" y="63" class="chart-label">09:14</text>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+      </div><!-- /content -->
+
+      <!-- DETAIL PANEL -->
+      <div class="detail-panel open">
+        <div class="detail-header">
+          <div class="detail-breadcrumb">
+            <span>order-service</span>
+            <span class="bc-sep">&#9656;</span>
+            <span>payment-process</span>
+            <span class="bc-sep">&#9656;</span>
+            <span class="bc-current">OP-88421</span>
+          </div>
+          <button class="detail-close" title="Close (Esc)">&times;</button>
+        </div>
+        <div class="detail-tabs">
+          <button class="detail-tab active">Overview</button>
+          <button class="detail-tab">Processors</button>
+          <button class="detail-tab">Exchange</button>
+          <button class="detail-tab">Error</button>
+        </div>
+        <div class="detail-body">
+          <div class="detail-section">
+            <div class="detail-section-title">Execution Details</div>
+            <div class="detail-grid">
+              <span class="detail-key">Status</span>
+              <span class="detail-val"><span class="status-badge status-error" style="font-size:10px"><span class="status-dot"></span>FAILED</span></span>
+              <span class="detail-key">Order ID</span>
+              <span class="detail-val" style="color: var(--cyan);">OP-88421</span>
+              <span class="detail-key">Customer</span>
+              <span class="detail-val">CUST-31094</span>
+              <span class="detail-key">Source</span>
+              <span class="detail-val">WEB-EU</span>
+              <span class="detail-key">Correlation ID</span>
+              <span class="detail-val">c7e2a1f0-9b3d-4e1a-8f2c-5d6e7f8a9b0c</span>
+              <span class="detail-key">Application</span>
+              <span class="detail-val">order-service</span>
+              <span class="detail-key">Route</span>
+              <span class="detail-val link">payment-process</span>
+              <span class="detail-key">Agent</span>
+              <span class="detail-val">prod-2</span>
+              <span class="detail-key">Started</span>
+              <span class="detail-val">2026-03-17T09:06:11.341Z</span>
+              <span class="detail-key">Duration</span>
+              <span class="detail-val error-text">412ms</span>
+              <span class="detail-key">Processors</span>
+              <span class="detail-val">7 (5 ok, 1 failed, 1 skipped)</span>
+            </div>
+          </div>
+          <div class="detail-section">
+            <div class="detail-section-title">Processor Timeline</div>
+            <div class="processor-timeline">
+              <div class="proc-row"><span class="proc-name">unmarshal</span><div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:0;width:8%">12ms</div></div><span class="proc-dur">12ms</span></div>
+              <div class="proc-row"><span class="proc-name">validate</span><div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:8%;width:5%">8ms</div></div><span class="proc-dur">8ms</span></div>
+              <div class="proc-row"><span class="proc-name">enrich(inventory)</span><div class="proc-bar-bg"><div class="proc-bar-fill proc-slow" style="left:13%;width:20%">85ms</div></div><span class="proc-dur">85ms</span></div>
+              <div class="proc-row"><span class="proc-name">transform</span><div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:33%;width:3%">5ms</div></div><span class="proc-dur">5ms</span></div>
+              <div class="proc-row"><span class="proc-name">to(payment-api)</span><div class="proc-bar-bg"><div class="proc-bar-fill proc-fail" style="left:36%;width:58%">280ms</div></div><span class="proc-dur">280ms</span></div>
+              <div class="proc-row"><span class="proc-name">log</span><div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:94%;width:2%">2ms</div></div><span class="proc-dur">2ms</span></div>
+              <div class="proc-row"><span class="proc-name" style="color: var(--text-faint);">marshal</span><div class="proc-bar-bg" style="opacity:0.3"></div><span class="proc-dur" style="color: var(--text-faint);">skip</span></div>
+            </div>
+          </div>
+          <div class="detail-section">
+            <div class="detail-section-title">Error</div>
+            <div class="error-block">
+              <div class="error-class">org.apache.camel.http.base.HttpOperationFailedException</div>
+              <div class="error-message-detail">
+                HTTP operation failed invoking https://pay.provider.com/v2/charge<br>
+                with statusCode: 504 Gateway Timeout<br>
+                Retry exhausted (3/3 attempts)<br>
+                &nbsp;&nbsp;at processor: to(payment-api) [step 5/7]
+              </div>
+              <button class="error-expand">&#9656; Show full stack trace</button>
+            </div>
+          </div>
+        </div>
+        <div class="detail-actions">
+          <button class="action-btn primary">View Route Diagram</button>
+          <button class="action-btn secondary">Copy ID</button>
+          <button class="action-btn secondary">Re-process</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="shortcuts-bar">
+  <div class="shortcut-hint"><kbd>Ctrl</kbd>+<kbd>K</kbd> Search</div>
+  <div class="shortcut-hint"><kbd>&#8593;</kbd><kbd>&#8595;</kbd> Navigate</div>
+  <div class="shortcut-hint"><kbd>Enter</kbd> Detail</div>
+  <div class="shortcut-hint"><kbd>Esc</kbd> Close</div>
+  <div class="shortcut-hint"><kbd>?</kbd> Shortcuts</div>
+</div>
+
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-v2-light.html b/docs/ui-mocks/mock-v2-light.html
new file mode 100644
index 00000000..db2ca9a5
--- /dev/null
+++ b/docs/ui-mocks/mock-v2-light.html
@@ -0,0 +1,2076 @@
+<!--
+  ============================================================================
+  CAMELEER3 v2 — Operations Dashboard (Light Theme)
+  ============================================================================
+
+  DESIGN NOTES — SYNTHESIS RATIONALE
+  ===================================
+
+  What was taken from each expert:
+
+  FROM DESIGN EXPERT:
+  - "Desert Dusk" warm color palette: sandstone base (#F5F2ED), amber-gold
+    accent (#C6820E), warm charcoal sidebar (#2C2520). This is distinctive
+    and avoids the generic blue/gray of every other monitoring tool.
+  - Typography: DM Sans body + JetBrains Mono for data. Four-level hierarchy.
+  - The camel SVG silhouette logo and "cameleer" brand identity.
+  - Shadow system, card design with subtle borders, duration bar sparklines.
+  - Compact 40px rows for information density.
+
+  FROM USABILITY EXPERT:
+  - Information hierarchy: health strip -> filters -> results -> detail panel.
+  - Master-detail pattern: clicking a row opens a detail panel on the right
+    WITHOUT navigating away from the list. Tabs for progressive disclosure
+    (Overview / Processors / Exchange / Error).
+  - Filter interaction: status pills with live counts, time preset chips,
+    removable active filter tags so operator always knows what's filtered.
+  - Relative timestamps ("2 min ago") with absolute on second line.
+  - Keyboard shortcut hints bar at bottom.
+  - Failed row accent border (left-side colored strip).
+  - Processor Gantt timeline in detail panel.
+
+  FROM OPERATOR EXPERT:
+  - Business IDs as first-class columns (Order ID, Source System) — operators
+    get calls about "order OP-88421", not about correlation IDs.
+  - Inline error previews in table rows — no need to click each failed row.
+  - SLA threshold indicators on metrics (colored + "SLA 300ms" line on chart).
+  - Agent health panel in sidebar area.
+  - Trend direction arrows on all metric cards.
+  - Top error pattern grouping panel.
+  - Shift-aware context ("since 06:00", overnight vs today).
+  - Duration color-coded by SLA (fast/normal/slow/breach).
+
+  KEY DESIGN DECISIONS:
+  1. Three-column layout: narrow sidebar (220px, warm charcoal) for app/route
+     tree | main content (health + filters + table + metrics) | collapsible
+     detail panel (400px, slides in on row select).
+  2. Light theme uses warm parchment (#F5F2ED) not cold white. Status colors
+     are warm variants (olive green, burnt orange, terracotta, teal).
+  3. Table combines business context (Order ID) WITH technical context (Route,
+     Duration) in a single scannable row. Error rows show inline preview below.
+  4. Metrics charts at bottom with SLA threshold lines from operator expert.
+  5. Agent health integrated into sidebar bottom section.
+
+  WHAT MAKES THIS BETTER THAN EACH INDIVIDUAL:
+  - Design expert had beautiful visuals but lacked business context columns
+    and detail panel. No error previews, no SLA awareness.
+  - Usability expert had excellent interaction patterns but used a dark theme
+    that doesn't match the brand. No business IDs, no agent health.
+  - Operator expert had the best data model but lacked the sidebar navigation,
+    detail panel, and the warm brand identity.
+  - This synthesis combines all three: warm brand identity + master-detail UX
+    + operator-grade data model with business context.
+
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>Cameleer3 — Operations Dashboard</title>
+<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@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ==========================================================================
+   RESET & FOUNDATIONS
+   ========================================================================== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Surface palette (warm parchment) */
+  --bg-body:     #F5F2ED;
+  --bg-surface:  #FFFFFF;
+  --bg-raised:   #FAF8F5;
+  --bg-inset:    #F0EDE8;
+  --bg-hover:    #F5F0EA;
+
+  /* Sidebar (warm charcoal) */
+  --sidebar-bg:     #2C2520;
+  --sidebar-hover:  #3A322C;
+  --sidebar-active: #4A3F38;
+  --sidebar-text:   #BFB5A8;
+  --sidebar-muted:  #7A6F63;
+
+  /* Text */
+  --text-primary:   #1A1612;
+  --text-secondary: #5C5347;
+  --text-muted:     #9C9184;
+  --text-faint:     #C4BAB0;
+
+  /* Borders */
+  --border:        #E4DFD8;
+  --border-subtle: #EDE9E3;
+
+  /* Brand accent (amber-gold) */
+  --amber:       #C6820E;
+  --amber-light: #F0D9A8;
+  --amber-bg:    #FDF6E9;
+  --amber-deep:  #8B5A06;
+
+  /* Status colors (warm) */
+  --success:        #3D7C47;
+  --success-bg:     #EFF7F0;
+  --success-border: #C2DFC6;
+  --warning:        #C27516;
+  --warning-bg:     #FEF5E7;
+  --warning-border: #F0D9A8;
+  --error:          #C0392B;
+  --error-bg:       #FDF0EE;
+  --error-border:   #F0C4BE;
+  --running:        #1A7F8E;
+  --running-bg:     #E8F5F7;
+  --running-border: #B0DDE4;
+
+  /* Typography */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing & Radii */
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows */
+  --shadow-sm:   0 1px 2px rgba(44, 37, 32, 0.06);
+  --shadow-md:   0 2px 8px rgba(44, 37, 32, 0.08);
+  --shadow-lg:   0 4px 16px rgba(44, 37, 32, 0.10);
+  --shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
+}
+
+html { font-size: 14px; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-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-faint); }
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 124, 71, 0.35); }
+  50%      { box-shadow: 0 0 0 5px rgba(61, 124, 71, 0); }
+}
+@keyframes errorPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.2); }
+  50%      { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0); }
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+.delay-1 { animation-delay: 0.04s; }
+.delay-2 { animation-delay: 0.08s; }
+.delay-3 { animation-delay: 0.12s; }
+.delay-4 { animation-delay: 0.16s; }
+.delay-5 { animation-delay: 0.20s; }
+
+/* ==========================================================================
+   LAYOUT: 3-column (sidebar | main | detail)
+   ========================================================================== */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   SIDEBAR (220px, warm charcoal)
+   ========================================================================== */
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-logo {
+  padding: 16px 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.sidebar-logo .brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--amber-light);
+  letter-spacing: -0.3px;
+}
+
+.sidebar-logo .version {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+  margin-left: 2px;
+}
+
+.sidebar-search {
+  padding: 10px 12px;
+}
+
+.sidebar-search input {
+  width: 100%;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px 6px 28px;
+  color: var(--sidebar-text);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.sidebar-search input::placeholder { color: var(--sidebar-muted); }
+.sidebar-search input:focus { border-color: rgba(198, 130, 14, 0.4); }
+
+.sidebar-search-wrap { position: relative; }
+.sidebar-search-wrap .search-icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sidebar-muted);
+  font-size: 12px;
+}
+
+.sidebar-section {
+  padding: 14px 12px 5px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+}
+
+.sidebar-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--sidebar-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.12s;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  margin-bottom: 1px;
+}
+
+.sidebar-item:hover { background: var(--sidebar-hover); color: #E8DFD4; }
+.sidebar-item.active { background: var(--sidebar-active); color: var(--amber-light); border-left-color: var(--amber); }
+
+.sidebar-item .health {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
+.health-stale { background: var(--warning); }
+.health-dead { background: var(--sidebar-muted); }
+
+.sidebar-item .item-info { flex: 1; min-width: 0; }
+.sidebar-item .item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-item .item-meta { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
+
+.sidebar-item .item-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  background: rgba(255,255,255,0.06);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.sidebar-item.active .item-count { background: rgba(198, 130, 14, 0.2); color: var(--amber-light); }
+
+.sidebar-divider {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 6px 12px;
+}
+
+/* Agent health in sidebar */
+.sidebar-agents-header {
+  padding: 14px 12px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-agent-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: rgba(93, 184, 102, 0.15);
+  color: #5DB866;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  margin: 0 6px 2px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--sidebar-text);
+  transition: background 0.1s;
+}
+
+.agent-item:hover { background: var(--sidebar-hover); }
+
+.agent-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.agent-info { flex: 1; min-width: 0; }
+.agent-name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-detail { font-size: 10px; color: var(--sidebar-muted); }
+
+.agent-stats-col {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+}
+
+.agent-tps { color: var(--sidebar-text); }
+
+.sidebar-bottom {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 6px;
+}
+
+.sidebar-bottom .sidebar-item {
+  font-size: 12px;
+  color: var(--sidebar-muted);
+  border-left: 3px solid transparent;
+}
+
+.sidebar-bottom .sidebar-item:hover { color: var(--sidebar-text); }
+
+/* ==========================================================================
+   MAIN CONTENT AREA
+   ========================================================================== */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  height: 48px;
+  flex-shrink: 0;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topbar-breadcrumb .crumb-active { color: var(--text-primary); font-weight: 600; }
+.topbar-breadcrumb .crumb-sep { color: var(--text-faint); font-size: 11px; }
+
+.topbar-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  min-width: 280px;
+}
+
+.topbar-search:hover { border-color: var(--text-faint); }
+
+.topbar-kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  padding: 0 4px;
+  border-radius: 3px;
+  color: var(--text-faint);
+  margin-left: auto;
+}
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-env {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.topbar-shift {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--running-bg);
+  color: var(--running);
+  border: 1px solid var(--running-border);
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.topbar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--amber-bg);
+  color: var(--amber);
+  font-weight: 600;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--amber-light);
+}
+
+/* Content scroll container */
+.content-wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px 40px;
+  min-width: 0;
+}
+
+/* ==========================================================================
+   HEALTH STATUS BAR (from UX expert hierarchy + operator SLA awareness)
+   ========================================================================== */
+.health-strip {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.stat-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 12px 16px;
+  box-shadow: var(--shadow-card);
+  position: relative;
+  overflow: hidden;
+  transition: box-shadow 0.15s;
+  cursor: pointer;
+}
+
+.stat-card:hover { box-shadow: var(--shadow-md); }
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+}
+
+.stat-card.card-amber::before  { background: linear-gradient(90deg, var(--amber), transparent); }
+.stat-card.card-green::before  { background: linear-gradient(90deg, var(--success), transparent); }
+.stat-card.card-error::before  { background: linear-gradient(90deg, var(--error), transparent); }
+.stat-card.card-teal::before   { background: linear-gradient(90deg, var(--running), transparent); }
+.stat-card.card-warn::before   { background: linear-gradient(90deg, var(--warning), transparent); }
+
+.stat-card.has-errors { animation: errorPulse 2.5s ease-in-out infinite; }
+
+.stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+}
+
+.stat-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stat-value.val-amber  { color: var(--amber); }
+.stat-value.val-green  { color: var(--success); }
+.stat-value.val-error  { color: var(--error); }
+.stat-value.val-teal   { color: var(--running); }
+.stat-value.val-warn   { color: var(--warning); }
+
+.stat-unit {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.stat-trend {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.trend-up-good   { color: var(--success); }
+.trend-up-bad    { color: var(--error); }
+.trend-down-good { color: var(--success); }
+.trend-down-bad  { color: var(--error); }
+.trend-flat      { color: var(--text-muted); }
+
+.stat-detail {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.stat-detail strong { color: var(--text-secondary); }
+
+/* ==========================================================================
+   FILTER BAR (from UX expert: pills + time presets + active tags)
+   ========================================================================== */
+.filter-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  box-shadow: var(--shadow-card);
+}
+
+.filter-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.filter-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  margin-right: 2px;
+}
+
+.filter-sep {
+  width: 1px;
+  height: 22px;
+  background: var(--border);
+  margin: 0 6px;
+}
+
+.filter-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s;
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
+}
+
+.filter-pill:hover { border-color: var(--text-faint); background: var(--bg-raised); }
+
+.filter-pill.active {
+  background: var(--amber-bg);
+  border-color: var(--amber-light);
+  color: var(--amber-deep);
+  font-weight: 600;
+}
+
+.filter-pill.active-green { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
+.filter-pill.active-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error); }
+.filter-pill.active-teal  { background: var(--running-bg); border-color: var(--running-border); color: var(--running); }
+
+.pill-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.pill-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+.filter-input-wrap {
+  position: relative;
+  flex: 1;
+  max-width: 360px;
+}
+
+.filter-input-wrap .fi-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-faint);
+  font-size: 13px;
+}
+
+.filter-input {
+  width: 100%;
+  padding: 6px 12px 6px 30px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.filter-input::placeholder { color: var(--text-faint); }
+.filter-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
+
+/* Active filter tags */
+.active-filters {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.filter-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  background: var(--amber-bg);
+  border: 1px solid var(--amber-light);
+  border-radius: 20px;
+  font-size: 11px;
+  color: var(--amber-deep);
+  font-family: var(--font-mono);
+}
+
+.filter-tag-remove {
+  cursor: pointer;
+  opacity: 0.5;
+  font-size: 13px;
+  line-height: 1;
+  background: none;
+  border: none;
+  color: inherit;
+}
+
+.filter-tag-remove:hover { opacity: 1; }
+
+.clear-all {
+  font-size: 11px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 3px 6px;
+  background: none;
+  border: none;
+}
+
+.clear-all:hover { color: var(--error); }
+
+/* ==========================================================================
+   EXECUTION TABLE (business context from operator + design styling)
+   ========================================================================== */
+.table-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.table-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+
+.table-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+
+.live-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--success-border);
+  border-radius: var(--radius-sm);
+  background: var(--success-bg);
+  color: var(--success);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.live-btn:hover { background: #E2F0E4; }
+
+.live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.table-scroll {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  padding: 9px 14px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+
+th:hover { color: var(--text-secondary); }
+th.sorted { color: var(--amber); }
+.sort-arrow { font-size: 8px; margin-left: 3px; opacity: 0.4; }
+th.sorted .sort-arrow { opacity: 1; }
+
+tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  border-left: 3px solid transparent;
+  transition: background 0.08s;
+  cursor: pointer;
+}
+
+tbody tr:last-child { border-bottom: none; }
+tbody tr:hover { background: var(--bg-hover); }
+tbody tr.selected { background: var(--amber-bg); }
+
+/* Status-colored left border from usability expert */
+tbody tr.row-success { border-left-color: transparent; }
+tbody tr.row-error   { border-left-color: var(--error); }
+tbody tr.row-warning { border-left-color: var(--warning); }
+tbody tr.row-running { border-left-color: var(--running); }
+
+td {
+  padding: 9px 14px;
+  font-size: 13px;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+/* Status badge */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.status-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.status-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
+.status-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }
+.status-running { background: var(--running-bg); color: var(--running); border: 1px solid var(--running-border); }
+
+.status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* Route + group cell */
+.route-name { font-weight: 500; color: var(--text-primary); }
+.route-name:hover { color: var(--amber); }
+.route-group { font-size: 11px; color: var(--text-muted); }
+
+/* Business ID columns (from operator expert) */
+.biz-id { font-family: var(--font-mono); font-weight: 500; color: var(--running); font-size: 12px; }
+.biz-id-secondary { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+
+/* Time display (relative from operator + usability experts) */
+.time-relative { color: var(--text-secondary); font-size: 13px; }
+.time-absolute { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); display: block; }
+
+/* Duration with SLA awareness */
+.duration { font-family: var(--font-mono); font-size: 12px; }
+.dur-fast   { color: var(--success); }
+.dur-normal { color: var(--text-primary); }
+.dur-slow   { color: var(--warning); }
+.dur-breach { color: var(--error); font-weight: 600; }
+
+.sla-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--error);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  margin-left: 4px;
+}
+
+/* Agent badge in table */
+.agent-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.agent-badge-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+}
+
+/* Error preview row (from operator expert) */
+.error-preview-row td {
+  padding: 0 14px 8px 20px !important;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.error-preview {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-left: 3px solid var(--error);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--error);
+  line-height: 1.6;
+}
+
+.error-preview-icon { flex-shrink: 0; margin-top: 1px; }
+
+.error-preview-text { white-space: normal; word-break: break-word; }
+
+.error-expand-hint {
+  color: var(--text-muted);
+  font-size: 10px;
+  margin-top: 4px;
+  font-family: var(--font-body);
+}
+
+/* Pagination */
+.table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.pagination { display: flex; align-items: center; gap: 4px; }
+
+.page-btn {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.12s;
+}
+
+.page-btn:hover { background: var(--bg-raised); border-color: var(--text-faint); }
+.page-btn.active { background: var(--amber-bg); border-color: var(--amber-light); color: var(--amber-deep); font-weight: 600; }
+
+/* ==========================================================================
+   METRICS ROW (charts with SLA lines from operator expert)
+   ========================================================================== */
+.metrics-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.metric-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.metric-card-header {
+  padding: 12px 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.metric-card-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.metric-card-value {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.metric-chart {
+  padding: 10px 16px 12px;
+  height: 90px;
+  position: relative;
+}
+
+.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.chart-area { opacity: 0.12; }
+.chart-grid-line { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 3; }
+.chart-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-faint); }
+
+.sla-line { stroke: var(--error); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.5; }
+.sla-label-text { fill: var(--error); font-size: 8px; font-family: var(--font-mono); opacity: 0.6; }
+
+/* ==========================================================================
+   DETAIL PANEL (from usability expert: master-detail pattern)
+   ========================================================================== */
+.detail-panel {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.25s ease, opacity 0.2s ease;
+  opacity: 0;
+  border-left: 1px solid transparent;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface);
+  flex-shrink: 0;
+}
+
+.detail-panel.open {
+  width: 400px;
+  opacity: 1;
+  border-left-color: var(--border);
+  animation: slideIn 0.25s ease-out both;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.detail-breadcrumb {
+  font-size: 11px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.detail-breadcrumb .bc-sep { color: var(--text-faint); font-size: 9px; }
+.detail-breadcrumb .bc-current { color: var(--amber); font-weight: 500; }
+
+.detail-close {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+
+.detail-close:hover { color: var(--text-primary); border-color: var(--text-faint); }
+
+/* Detail tabs */
+.detail-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.detail-tab {
+  padding: 9px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  font-family: var(--font-body);
+}
+
+.detail-tab:hover { color: var(--text-secondary); }
+.detail-tab.active { color: var(--amber); border-bottom-color: var(--amber); }
+
+/* Detail body */
+.detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--bg-raised);
+}
+
+.detail-section { margin-bottom: 18px; }
+
+.detail-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 6px 10px;
+  font-size: 12px;
+}
+
+.detail-key { color: var(--text-muted); font-size: 11px; }
+.detail-val { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; word-break: break-all; }
+.detail-val.error-text { color: var(--error); }
+.detail-val.link { color: var(--amber); cursor: pointer; }
+
+/* Processor timeline (Gantt from usability expert) */
+.processor-timeline { display: flex; flex-direction: column; gap: 5px; }
+
+.proc-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
+
+.proc-name {
+  width: 100px;
+  text-align: right;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.proc-bar-bg {
+  flex: 1;
+  height: 16px;
+  background: var(--bg-inset);
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+}
+
+.proc-bar-fill {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 5px;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  color: white;
+  min-width: 20px;
+}
+
+.proc-ok   { background: rgba(61, 124, 71, 0.5); }
+.proc-slow { background: rgba(194, 117, 22, 0.5); }
+.proc-fail { background: rgba(192, 57, 43, 0.5); }
+
+.proc-dur {
+  width: 42px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* Error block in detail */
+.error-block {
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-left: 3px solid var(--error);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+}
+
+.error-class {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--error);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.error-message-detail {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.error-expand {
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--text-muted);
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-family: var(--font-mono);
+}
+
+.error-expand:hover { color: var(--amber); }
+
+/* Detail actions */
+.detail-actions {
+  display: flex;
+  gap: 6px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.action-btn {
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: var(--font-body);
+}
+
+.action-btn.primary {
+  background: var(--amber);
+  color: white;
+  border: none;
+}
+
+.action-btn.primary:hover { background: var(--amber-deep); }
+
+.action-btn.secondary {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+}
+
+.action-btn.secondary:hover { border-color: var(--text-faint); color: var(--text-primary); }
+
+/* ==========================================================================
+   KEYBOARD SHORTCUTS BAR (from usability expert)
+   ========================================================================== */
+.shortcuts-bar {
+  position: fixed;
+  bottom: 12px;
+  right: 12px;
+  display: flex;
+  gap: 10px;
+  z-index: 50;
+  animation: fadeIn 0.5s ease-out 0.5s both;
+}
+
+.shortcut-hint {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  box-shadow: var(--shadow-sm);
+}
+
+.shortcut-hint kbd {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 4px;
+  color: var(--text-secondary);
+}
+
+/* Utility */
+.mono { font-family: var(--font-mono); }
+</style>
+</head>
+<body>
+<div class="app">
+
+  <!-- ====================================================================
+       SIDEBAR (warm charcoal, from design expert + agent health from operator)
+       ==================================================================== -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path style="fill:#C6820E" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
+      </svg>
+      <div>
+        <span class="brand">cameleer</span><span class="version">v3</span>
+      </div>
+    </div>
+
+    <div class="sidebar-search">
+      <div class="sidebar-search-wrap">
+        <span class="search-icon">&#9671;</span>
+        <input type="text" placeholder="Filter applications...">
+      </div>
+    </div>
+
+    <div class="sidebar-section">Applications</div>
+
+    <div class="sidebar-items">
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info"><div class="item-name">All Applications</div></div>
+        <span class="item-count">4</span>
+      </div>
+
+      <div class="sidebar-divider"></div>
+
+      <div class="sidebar-item active">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">order-service</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">1,847</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">payment-gateway</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">923</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">shipment-tracker</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">471</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info">
+          <div class="item-name">notification-hub</div>
+          <div class="item-meta">1 agent</div>
+        </div>
+        <span class="item-count">128</span>
+      </div>
+
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-section">Routes</div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-intake</div></div>
+        <span class="item-count">892</span>
+      </div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-enrichment</div></div>
+        <span class="item-count">541</span>
+      </div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">payment-process</div></div>
+        <span class="item-count">414</span>
+      </div>
+    </div>
+
+    <!-- Agent health section (from operator expert, adapted to sidebar) -->
+    <div class="sidebar-agents-header">
+      <span>Agents</span>
+      <span class="sidebar-agent-badge">4/4 live</span>
+    </div>
+
+    <div style="padding: 0 0 6px; overflow-y: auto; max-height: 180px;">
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-1</div>
+          <div class="agent-detail">order-service v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">14.2/s</div>
+          <div>12s ago</div>
+        </div>
+      </div>
+
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-2</div>
+          <div class="agent-detail">payment-svc v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">11.8/s</div>
+          <div style="color: var(--error);">3 err/h</div>
+        </div>
+      </div>
+
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-3</div>
+          <div class="agent-detail">shipment-svc v3.2.0</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">12.1/s</div>
+          <div>5s ago</div>
+        </div>
+      </div>
+
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-4</div>
+          <div class="agent-detail">shipment-svc v3.2.0</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">9.1/s</div>
+          <div>3s ago</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9881;</span><div class="item-info"><div class="item-name">Admin</div></div></div>
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9776;</span><div class="item-info"><div class="item-name">API Docs</div></div></div>
+    </div>
+  </aside>
+
+  <!-- ====================================================================
+       MAIN CONTENT
+       ==================================================================== -->
+  <div class="main">
+    <!-- Top bar -->
+    <div class="topbar">
+      <div class="topbar-breadcrumb">
+        <span>Applications</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-active">order-service</span>
+      </div>
+
+      <div class="topbar-search">
+        <span style="font-size: 12px; color: var(--text-faint);">&#128270;</span>
+        <span>Search by Order ID, route, error...</span>
+        <span class="topbar-kbd">Ctrl+K</span>
+      </div>
+
+      <div class="topbar-right">
+        <span class="topbar-env">PRODUCTION</span>
+        <span class="topbar-shift">Shift: Day (06:00-18:00)</span>
+        <div class="topbar-user">
+          <span>hendrik</span>
+          <div class="topbar-avatar">H</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content-wrap">
+      <!-- Scrollable content area -->
+      <div class="content">
+
+        <!-- Health strip -->
+        <div class="health-strip animate-in">
+          <div class="stat-card card-amber">
+            <div class="stat-label">Executions (shift)</div>
+            <div class="stat-value-row">
+              <span class="stat-value">3,241</span>
+              <span class="stat-trend trend-up-good">+12%</span>
+            </div>
+            <div class="stat-detail"><strong>97.1%</strong> success since 06:00</div>
+          </div>
+
+          <div class="stat-card card-green">
+            <div class="stat-label">Success Rate</div>
+            <div class="stat-value-row">
+              <span class="stat-value val-green">97.1%</span>
+              <span class="stat-trend trend-down-bad">-0.4%</span>
+            </div>
+            <div class="stat-detail">3,147 ok / 56 warn / 38 error</div>
+          </div>
+
+          <div class="stat-card card-error has-errors">
+            <div class="stat-label">Errors (shift)</div>
+            <div class="stat-value-row">
+              <span class="stat-value val-error">38</span>
+              <span class="stat-trend trend-up-bad">+5</span>
+            </div>
+            <div class="stat-detail"><strong>23</strong> overnight &middot; <strong>15</strong> since 06:00</div>
+          </div>
+
+          <div class="stat-card card-teal">
+            <div class="stat-label">Throughput</div>
+            <div class="stat-value-row">
+              <span class="stat-value">47.2</span>
+              <span class="stat-unit">msg/s</span>
+              <span class="stat-trend trend-flat">&#8596;</span>
+            </div>
+            <div class="stat-detail">Capacity: 120 msg/s &middot; <strong>39%</strong></div>
+          </div>
+
+          <div class="stat-card card-warn">
+            <div class="stat-label">Latency p99</div>
+            <div class="stat-value-row">
+              <span class="stat-value val-warn">287</span>
+              <span class="stat-unit">ms</span>
+              <span class="stat-trend trend-up-bad">+23ms</span>
+            </div>
+            <div class="stat-detail">SLA: &lt;300ms &middot; <strong style="color: var(--warning);">CLOSE</strong></div>
+          </div>
+        </div>
+
+        <!-- Filter bar -->
+        <div class="filter-section animate-in delay-1">
+          <div class="filter-row">
+            <div class="filter-input-wrap">
+              <span class="fi-icon">&#128270;</span>
+              <input class="filter-input" type="text" placeholder="Search by Order ID, correlation ID, error message...">
+            </div>
+
+            <div class="filter-sep"></div>
+
+            <div class="filter-group">
+              <span class="filter-label">Status</span>
+              <span class="filter-pill active">All <span class="pill-count">3,241</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--success);"></span> OK <span class="pill-count">3,147</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--warning);"></span> Warn <span class="pill-count">56</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--error);"></span> Error <span class="pill-count">38</span></span>
+              <span class="filter-pill"><span class="pill-dot" style="background: var(--running);"></span> Running <span class="pill-count">9</span></span>
+            </div>
+
+            <div class="filter-sep"></div>
+
+            <div class="filter-group">
+              <span class="filter-label">Time</span>
+              <span class="filter-pill">15m</span>
+              <span class="filter-pill">1h</span>
+              <span class="filter-pill active">Shift</span>
+              <span class="filter-pill">24h</span>
+              <span class="filter-pill">7d</span>
+            </div>
+          </div>
+          <div class="active-filters">
+            <span class="filter-tag">time: since 06:00 (shift) <button class="filter-tag-remove">&times;</button></span>
+            <span class="filter-tag">app: order-service <button class="filter-tag-remove">&times;</button></span>
+            <span class="filter-tag">sort: newest first <button class="filter-tag-remove">&times;</button></span>
+            <button class="clear-all">Clear all</button>
+          </div>
+        </div>
+
+        <!-- Execution table -->
+        <div class="table-section animate-in delay-2">
+          <div class="table-header">
+            <span class="table-title">Recent Executions</span>
+            <div class="table-right">
+              <span class="table-meta">Showing 1-20 of 3,241</span>
+              <button class="live-btn"><span class="live-dot"></span> LIVE</button>
+            </div>
+          </div>
+
+          <div class="table-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 85px">Status</th>
+                  <th>Route</th>
+                  <th>Order ID</th>
+                  <th>Customer</th>
+                  <th class="sorted">Started <span class="sort-arrow">&#9660;</span></th>
+                  <th>Duration</th>
+                  <th>Agent</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Row 1: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92184</div><div class="biz-id-secondary">SAP-DE</div></td>
+                  <td><span class="biz-id-secondary">CUST-44210</span></td>
+                  <td><span class="time-relative">2 min ago</span><span class="time-absolute">09:12:04</span></td>
+                  <td><span class="duration dur-fast">87ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+
+                <!-- Row 2: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">payment-validate</div><div class="route-group">payment-flow</div></td>
+                  <td><div class="biz-id">OP-92183</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-18773</span></td>
+                  <td><span class="time-relative">3 min ago</span><span class="time-absolute">09:11:22</span></td>
+                  <td><span class="duration dur-normal">164ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
+                </tr>
+
+                <!-- Row 3: Running -->
+                <tr class="row-running">
+                  <td><span class="status-badge status-running"><span class="status-dot" style="animation: pulse 1.5s ease-in-out infinite;"></span>RUN</span></td>
+                  <td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92185</div><div class="biz-id-secondary">EDI-US</div></td>
+                  <td><span class="biz-id-secondary">CUST-67501</span></td>
+                  <td><span class="time-relative">30s ago</span><span class="time-absolute">09:13:44</span></td>
+                  <td><span class="duration" style="color: var(--running);">~30s</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+
+                <!-- Row 4: Warning (SLA close) -->
+                <tr class="row-warning">
+                  <td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td>
+                  <td><div class="route-name">shipment-dispatch</div><div class="route-group">shipment-flow</div></td>
+                  <td><div class="biz-id">OP-92180</div><div class="biz-id-secondary">SAP-DE</div></td>
+                  <td><span class="biz-id-secondary">CUST-55019</span></td>
+                  <td><span class="time-relative">5 min ago</span><span class="time-absolute">09:09:47</span></td>
+                  <td><span class="duration dur-slow">248ms</span> <span class="sla-tag">SLA</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td>
+                </tr>
+
+                <!-- Row 5: ERROR with inline preview -->
+                <tr class="row-error selected">
+                  <td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
+                  <td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td>
+                  <td><div class="biz-id">OP-88421</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-31094</span></td>
+                  <td><span class="time-relative">8 min ago</span><span class="time-absolute">09:06:11</span></td>
+                  <td><span class="duration dur-breach">412ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
+                </tr>
+                <tr class="error-preview-row">
+                  <td colspan="7">
+                    <div class="error-preview">
+                      <span class="error-preview-icon">&#9888;</span>
+                      <div>
+                        <div class="error-preview-text">org.apache.camel.CamelExecutionException: Payment gateway timeout after 5000ms &mdash; POST https://pay.provider.com/v2/charge returned HTTP 504. Retry exhausted (3/3).</div>
+                        <div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+
+                <!-- Row 6: ERROR -->
+                <tr class="row-error">
+                  <td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
+                  <td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-88419</div><div class="biz-id-secondary">EDI-US</div></td>
+                  <td><span class="biz-id-secondary">CUST-72841</span></td>
+                  <td><span class="time-relative">12 min ago</span><span class="time-absolute">09:02:38</span></td>
+                  <td><span class="duration dur-breach">1,247ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+                <tr class="error-preview-row">
+                  <td colspan="7">
+                    <div class="error-preview">
+                      <span class="error-preview-icon">&#9888;</span>
+                      <div>
+                        <div class="error-preview-text">java.sql.SQLTransientConnectionException: HikariPool-1 - Connection not available, request timed out after 1000ms. (pool: 10, active: 10, idle: 0, waiting: 3)</div>
+                        <div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+
+                <!-- Row 7: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92179</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-90123</span></td>
+                  <td><span class="time-relative">14 min ago</span><span class="time-absolute">09:00:15</span></td>
+                  <td><span class="duration dur-fast">62ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td>
+                </tr>
+
+                <!-- Row 8: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">payment-validate</div><div class="route-group">payment-flow</div></td>
+                  <td><div class="biz-id">OP-92178</div><div class="biz-id-secondary">SAP-DE</div></td>
+                  <td><span class="biz-id-secondary">CUST-44210</span></td>
+                  <td><span class="time-relative">16 min ago</span><span class="time-absolute">08:58:33</span></td>
+                  <td><span class="duration dur-normal">131ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+
+                <!-- Row 9: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">shipment-track</div><div class="route-group">shipment-flow</div></td>
+                  <td><div class="biz-id">OP-92175</div><div class="biz-id-secondary">EDI-US</div></td>
+                  <td><span class="biz-id-secondary">CUST-67892</span></td>
+                  <td><span class="time-relative">21 min ago</span><span class="time-absolute">08:53:07</span></td>
+                  <td><span class="duration dur-fast">94ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-4</span></td>
+                </tr>
+
+                <!-- Row 10: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92174</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-15293</span></td>
+                  <td><span class="time-relative">24 min ago</span><span class="time-absolute">08:50:41</span></td>
+                  <td><span class="duration dur-fast">73ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+
+                <!-- Row 11: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td>
+                  <td><div class="biz-id">OP-92173</div><div class="biz-id-secondary">SAP-DE</div></td>
+                  <td><span class="biz-id-secondary">CUST-88104</span></td>
+                  <td><span class="time-relative">28 min ago</span><span class="time-absolute">08:46:19</span></td>
+                  <td><span class="duration dur-normal">198ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
+                </tr>
+
+                <!-- Row 12: Warning -->
+                <tr class="row-warning">
+                  <td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td>
+                  <td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92170</div><div class="biz-id-secondary">EDI-US</div></td>
+                  <td><span class="biz-id-secondary">CUST-50321</span></td>
+                  <td><span class="time-relative">35 min ago</span><span class="time-absolute">08:39:52</span></td>
+                  <td><span class="duration dur-slow">267ms</span> <span class="sla-tag">SLA</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+
+                <!-- Row 13: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">shipment-dispatch</div><div class="route-group">shipment-flow</div></td>
+                  <td><div class="biz-id">OP-92168</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-29104</span></td>
+                  <td><span class="time-relative">42 min ago</span><span class="time-absolute">08:32:28</span></td>
+                  <td><span class="duration dur-fast">55ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td>
+                </tr>
+
+                <!-- Row 14: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-92165</div><div class="biz-id-secondary">SAP-DE</div></td>
+                  <td><span class="biz-id-secondary">CUST-77618</span></td>
+                  <td><span class="time-relative">51 min ago</span><span class="time-absolute">08:23:14</span></td>
+                  <td><span class="duration dur-fast">81ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-4</span></td>
+                </tr>
+
+                <!-- Row 15: Overnight error -->
+                <tr class="row-error">
+                  <td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
+                  <td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td>
+                  <td><div class="biz-id">OP-91844</div><div class="biz-id-secondary">WEB-EU</div></td>
+                  <td><span class="biz-id-secondary">CUST-10082</span></td>
+                  <td><span class="time-relative">5 hours ago</span><span class="time-absolute">04:12:55</span></td>
+                  <td><span class="duration dur-breach">timeout</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
+                </tr>
+
+                <!-- Row 16: Success -->
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
+                  <td><div class="biz-id">OP-91840</div><div class="biz-id-secondary">EDI-US</div></td>
+                  <td><span class="biz-id-secondary">CUST-38291</span></td>
+                  <td><span class="time-relative">5 hours ago</span><span class="time-absolute">04:10:22</span></td>
+                  <td><span class="duration dur-fast">78ms</span></td>
+                  <td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="table-footer">
+            <span class="mono" style="font-size: 11px;">20 rows per page</span>
+            <div class="pagination">
+              <button class="page-btn active">1</button>
+              <button class="page-btn">2</button>
+              <button class="page-btn">3</button>
+              <button class="page-btn">...</button>
+              <button class="page-btn">162</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metrics panel -->
+        <div class="metrics-row animate-in delay-3">
+          <!-- Throughput chart -->
+          <div class="metric-card">
+            <div class="metric-card-header">
+              <span class="metric-card-title">Throughput (1h)</span>
+              <span class="metric-card-value">47.2<span style="font-size:11px; font-weight:400; color: var(--text-muted)"> msg/s</span></span>
+            </div>
+            <div class="metric-chart">
+              <svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
+                <line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
+                <line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
+                <line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
+                <path d="M0,50 L25,47 50,43 75,45 100,40 125,37 150,39 175,35 200,33 225,35 250,37 275,34 300,33 L300,65 L0,65 Z" fill="#1A7F8E" class="chart-area"/>
+                <path d="M0,50 L25,47 50,43 75,45 100,40 125,37 150,39 175,35 200,33 225,35 250,37 275,34 300,33" stroke="#1A7F8E" class="chart-line"/>
+                <text x="0" y="63" class="chart-label">08:15</text>
+                <text x="145" y="63" class="chart-label">08:45</text>
+                <text x="282" y="63" class="chart-label">09:14</text>
+              </svg>
+            </div>
+          </div>
+
+          <!-- Latency chart with SLA -->
+          <div class="metric-card">
+            <div class="metric-card-header">
+              <span class="metric-card-title">Latency p99 (1h)</span>
+              <span class="metric-card-value" style="color: var(--warning);">287<span style="font-size:11px; font-weight:400; color: var(--text-muted)">ms</span> <span style="font-size:12px; color: var(--error);">&#8599;</span></span>
+            </div>
+            <div class="metric-chart">
+              <svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
+                <line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
+                <line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
+                <line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
+                <!-- SLA threshold at 300ms -->
+                <line x1="0" y1="10" x2="300" y2="10" class="sla-line"/>
+                <text x="4" y="8" class="sla-label-text">SLA 300ms</text>
+                <rect x="0" y="0" width="300" height="10" fill="rgba(192, 57, 43, 0.04)"/>
+                <path d="M0,42 L25,40 50,37 75,35 100,33 125,30 150,27 175,23 200,20 225,18 250,16 275,14 300,13 L300,65 L0,65 Z" fill="#C27516" class="chart-area"/>
+                <path d="M0,42 L25,40 50,37 75,35 100,33 125,30 150,27 175,23 200,20 225,18 250,16 275,14 300,13" stroke="#C27516" class="chart-line"/>
+                <!-- p50 reference -->
+                <path d="M0,52 L25,53 50,52 75,50 100,52 125,51 150,50 175,52 200,50 225,49 250,50 275,48 300,47" stroke="#1A7F8E" stroke-width="1" opacity="0.4" fill="none" stroke-dasharray="4 3"/>
+                <text x="0" y="63" class="chart-label">08:15</text>
+                <text x="145" y="63" class="chart-label">08:45</text>
+                <text x="282" y="63" class="chart-label">09:14</text>
+              </svg>
+            </div>
+          </div>
+
+          <!-- Error rate chart -->
+          <div class="metric-card">
+            <div class="metric-card-header">
+              <span class="metric-card-title">Error Rate (1h)</span>
+              <span class="metric-card-value" style="color: var(--error);">2.9<span style="font-size:11px; font-weight:400; color: var(--text-muted)">%</span> <span style="font-size:12px;">&#8599;</span></span>
+            </div>
+            <div class="metric-chart">
+              <svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
+                <line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
+                <line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
+                <line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
+                <!-- SLA at 5% -->
+                <line x1="0" y1="16" x2="300" y2="16" class="sla-line"/>
+                <text x="4" y="14" class="sla-label-text">SLA 5%</text>
+                <rect x="2" y="54" width="18" height="11" rx="2" fill="var(--error-border)"/>
+                <rect x="24" y="56" width="18" height="9" rx="2" fill="var(--error-border)"/>
+                <rect x="46" y="58" width="18" height="7" rx="2" fill="var(--error-border)"/>
+                <rect x="68" y="55" width="18" height="10" rx="2" fill="var(--error-border)"/>
+                <rect x="90" y="52" width="18" height="13" rx="2" fill="var(--error-border)"/>
+                <rect x="112" y="56" width="18" height="9" rx="2" fill="var(--error-border)"/>
+                <rect x="134" y="59" width="18" height="6" rx="2" fill="var(--error-border)"/>
+                <rect x="156" y="50" width="18" height="15" rx="2" fill="var(--error-border)"/>
+                <rect x="178" y="45" width="18" height="20" rx="2" fill="var(--error)" opacity="0.5"/>
+                <rect x="200" y="42" width="18" height="23" rx="2" fill="var(--error)" opacity="0.6"/>
+                <rect x="222" y="38" width="18" height="27" rx="2" fill="var(--error)" opacity="0.7"/>
+                <rect x="244" y="36" width="18" height="29" rx="2" fill="var(--error)" opacity="0.7"/>
+                <rect x="266" y="34" width="18" height="31" rx="2" fill="var(--error)" opacity="0.8"/>
+                <text x="0" y="63" class="chart-label">08:15</text>
+                <text x="145" y="63" class="chart-label">08:45</text>
+                <text x="282" y="63" class="chart-label">09:14</text>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+      </div><!-- /content -->
+
+      <!-- ==================================================================
+           DETAIL PANEL (from usability expert, slides in on row select)
+           ================================================================== -->
+      <div class="detail-panel open">
+        <div class="detail-header">
+          <div class="detail-breadcrumb">
+            <span>order-service</span>
+            <span class="bc-sep">&#9656;</span>
+            <span>payment-process</span>
+            <span class="bc-sep">&#9656;</span>
+            <span class="bc-current">OP-88421</span>
+          </div>
+          <button class="detail-close" title="Close (Esc)">&times;</button>
+        </div>
+
+        <div class="detail-tabs">
+          <button class="detail-tab active">Overview</button>
+          <button class="detail-tab">Processors</button>
+          <button class="detail-tab">Exchange</button>
+          <button class="detail-tab">Error</button>
+        </div>
+
+        <div class="detail-body">
+          <div class="detail-section">
+            <div class="detail-section-title">Execution Details</div>
+            <div class="detail-grid">
+              <span class="detail-key">Status</span>
+              <span class="detail-val"><span class="status-badge status-error" style="font-size:10px"><span class="status-dot"></span>FAILED</span></span>
+              <span class="detail-key">Order ID</span>
+              <span class="detail-val" style="color: var(--running);">OP-88421</span>
+              <span class="detail-key">Customer</span>
+              <span class="detail-val">CUST-31094</span>
+              <span class="detail-key">Source</span>
+              <span class="detail-val">WEB-EU</span>
+              <span class="detail-key">Correlation ID</span>
+              <span class="detail-val">c7e2a1f0-9b3d-4e1a-8f2c-5d6e7f8a9b0c</span>
+              <span class="detail-key">Application</span>
+              <span class="detail-val">order-service</span>
+              <span class="detail-key">Route</span>
+              <span class="detail-val link">payment-process</span>
+              <span class="detail-key">Agent</span>
+              <span class="detail-val">prod-2</span>
+              <span class="detail-key">Started</span>
+              <span class="detail-val">2026-03-17T09:06:11.341Z</span>
+              <span class="detail-key">Duration</span>
+              <span class="detail-val error-text">412ms</span>
+              <span class="detail-key">Processors</span>
+              <span class="detail-val">7 (5 ok, 1 failed, 1 skipped)</span>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <div class="detail-section-title">Processor Timeline</div>
+            <div class="processor-timeline">
+              <div class="proc-row">
+                <span class="proc-name">unmarshal</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:0;width:8%">12ms</div></div>
+                <span class="proc-dur">12ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">validate</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:8%;width:5%">8ms</div></div>
+                <span class="proc-dur">8ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">enrich(inventory)</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-slow" style="left:13%;width:20%">85ms</div></div>
+                <span class="proc-dur">85ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">transform</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:33%;width:3%">5ms</div></div>
+                <span class="proc-dur">5ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">to(payment-api)</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-fail" style="left:36%;width:58%">280ms</div></div>
+                <span class="proc-dur">280ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name">log</span>
+                <div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:94%;width:2%">2ms</div></div>
+                <span class="proc-dur">2ms</span>
+              </div>
+              <div class="proc-row">
+                <span class="proc-name" style="color: var(--text-faint);">marshal</span>
+                <div class="proc-bar-bg" style="opacity:0.4"></div>
+                <span class="proc-dur" style="color: var(--text-faint);">skip</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <div class="detail-section-title">Error</div>
+            <div class="error-block">
+              <div class="error-class">org.apache.camel.http.base.HttpOperationFailedException</div>
+              <div class="error-message-detail">
+                HTTP operation failed invoking https://pay.provider.com/v2/charge<br>
+                with statusCode: 504 Gateway Timeout<br>
+                Retry exhausted (3/3 attempts)<br>
+                &nbsp;&nbsp;at processor: to(payment-api) [step 5/7]
+              </div>
+              <button class="error-expand">&#9656; Show full stack trace</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-actions">
+          <button class="action-btn primary">View Route Diagram</button>
+          <button class="action-btn secondary">Copy ID</button>
+          <button class="action-btn secondary">Re-process</button>
+        </div>
+      </div>
+
+    </div><!-- /content-wrap -->
+  </div><!-- /main -->
+</div><!-- /app -->
+
+<!-- Keyboard shortcuts bar -->
+<div class="shortcuts-bar">
+  <div class="shortcut-hint"><kbd>Ctrl</kbd>+<kbd>K</kbd> Search</div>
+  <div class="shortcut-hint"><kbd>&#8593;</kbd><kbd>&#8595;</kbd> Navigate</div>
+  <div class="shortcut-hint"><kbd>Enter</kbd> Detail</div>
+  <div class="shortcut-hint"><kbd>Esc</kbd> Close</div>
+  <div class="shortcut-hint"><kbd>?</kbd> Shortcuts</div>
+</div>
+
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-v3-agent-health.html b/docs/ui-mocks/mock-v3-agent-health.html
new file mode 100644
index 00000000..fb9a5b80
--- /dev/null
+++ b/docs/ui-mocks/mock-v3-agent-health.html
@@ -0,0 +1,1490 @@
+<!--
+  ============================================================================
+  CAMELEER3 v3 — Agent Health & System Overview (Light Theme)
+  ============================================================================
+
+  DESIGN NOTES
+  ============
+
+  PURPOSE:
+  This page is the "Agents" view of the Cameleer3 monitoring dashboard. It
+  shows the health of all Camel application instances (agents) reporting to
+  the server, grouped by application group.
+
+  INFORMATION HIERARCHY:
+  1. System Overview Strip — 5 summary cards (total agents, groups, routes,
+     uptime, ingestion rate) give instant situational awareness.
+  2. Agent Group Cards — 2-column grid of cards, one per application group.
+     Each card lists its instances with status dot, state badge, uptime,
+     throughput, error rate, and last heartbeat. The inventory-check card
+     has a single DEAD instance with a prominent alert.
+  3. Bottom Tabs — Timeline (lifecycle events) and Route Distribution
+     (which routes run on which agents).
+
+  DESIGN SYSTEM:
+  Exact match of mock-v2-light.html: warm parchment (#F5F2ED), amber-gold
+  (#C6820E), warm charcoal sidebar (#2C2520), DM Sans + JetBrains Mono,
+  identical card styles, shadows, border radius, status colors.
+
+  DATA STORY:
+  - 12 agents across 4 groups. 9 LIVE, 2 STALE, 1 DEAD.
+  - order-processing: 3 healthy instances, one recently restarted.
+  - payment-flow: 2 instances, one STALE (missed heartbeats 3m ago).
+  - shipment-notify: 2 healthy instances.
+  - inventory-check: 1 DEAD instance — single point of failure alert.
+
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>Cameleer3 — Agent Health & System Overview</title>
+<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@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ==========================================================================
+   RESET & FOUNDATIONS (identical to v2)
+   ========================================================================== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Surface palette (warm parchment) */
+  --bg-body:     #F5F2ED;
+  --bg-surface:  #FFFFFF;
+  --bg-raised:   #FAF8F5;
+  --bg-inset:    #F0EDE8;
+  --bg-hover:    #F5F0EA;
+
+  /* Sidebar (warm charcoal) */
+  --sidebar-bg:     #2C2520;
+  --sidebar-hover:  #3A322C;
+  --sidebar-active: #4A3F38;
+  --sidebar-text:   #BFB5A8;
+  --sidebar-muted:  #7A6F63;
+
+  /* Text */
+  --text-primary:   #1A1612;
+  --text-secondary: #5C5347;
+  --text-muted:     #9C9184;
+  --text-faint:     #C4BAB0;
+
+  /* Borders */
+  --border:        #E4DFD8;
+  --border-subtle: #EDE9E3;
+
+  /* Brand accent (amber-gold) */
+  --amber:       #C6820E;
+  --amber-light: #F0D9A8;
+  --amber-bg:    #FDF6E9;
+  --amber-deep:  #8B5A06;
+
+  /* Status colors (warm) */
+  --success:        #3D7C47;
+  --success-bg:     #EFF7F0;
+  --success-border: #C2DFC6;
+  --warning:        #C27516;
+  --warning-bg:     #FEF5E7;
+  --warning-border: #F0D9A8;
+  --error:          #C0392B;
+  --error-bg:       #FDF0EE;
+  --error-border:   #F0C4BE;
+  --running:        #1A7F8E;
+  --running-bg:     #E8F5F7;
+  --running-border: #B0DDE4;
+
+  /* Typography */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing & Radii */
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows */
+  --shadow-sm:   0 1px 2px rgba(44, 37, 32, 0.06);
+  --shadow-md:   0 2px 8px rgba(44, 37, 32, 0.08);
+  --shadow-lg:   0 4px 16px rgba(44, 37, 32, 0.10);
+  --shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
+}
+
+html { font-size: 14px; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-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-faint); }
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 124, 71, 0.35); }
+  50%      { box-shadow: 0 0 0 5px rgba(61, 124, 71, 0); }
+}
+@keyframes errorPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.2); }
+  50%      { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0); }
+}
+@keyframes warningPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 117, 22, 0.2); }
+  50%      { box-shadow: 0 0 0 4px rgba(194, 117, 22, 0); }
+}
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+.delay-1 { animation-delay: 0.04s; }
+.delay-2 { animation-delay: 0.08s; }
+.delay-3 { animation-delay: 0.12s; }
+.delay-4 { animation-delay: 0.16s; }
+.delay-5 { animation-delay: 0.20s; }
+.delay-6 { animation-delay: 0.24s; }
+.delay-7 { animation-delay: 0.28s; }
+
+/* ==========================================================================
+   LAYOUT
+   ========================================================================== */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   SIDEBAR (220px, warm charcoal) — identical structure to v2
+   ========================================================================== */
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-logo {
+  padding: 16px 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.sidebar-logo .brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--amber-light);
+  letter-spacing: -0.3px;
+}
+
+.sidebar-logo .version {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+  margin-left: 2px;
+}
+
+.sidebar-section {
+  padding: 14px 12px 5px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+}
+
+.sidebar-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--sidebar-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.12s;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  margin-bottom: 1px;
+}
+
+.sidebar-item:hover { background: var(--sidebar-hover); color: #E8DFD4; }
+.sidebar-item.active { background: var(--sidebar-active); color: var(--amber-light); border-left-color: var(--amber); }
+
+.sidebar-item .item-info { flex: 1; min-width: 0; }
+.sidebar-item .item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-item .item-meta { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
+
+.sidebar-item .item-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  background: rgba(255,255,255,0.06);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.sidebar-item.active .item-count { background: rgba(198, 130, 14, 0.2); color: var(--amber-light); }
+
+.sidebar-item .health {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
+.health-stale { background: var(--warning); }
+.health-dead { background: var(--sidebar-muted); }
+
+.sidebar-divider {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 6px 12px;
+}
+
+.sidebar-bottom {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 6px;
+}
+
+.sidebar-bottom .sidebar-item {
+  font-size: 12px;
+  color: var(--sidebar-muted);
+  border-left: 3px solid transparent;
+}
+
+.sidebar-bottom .sidebar-item:hover { color: var(--sidebar-text); }
+
+/* ==========================================================================
+   MAIN CONTENT AREA
+   ========================================================================== */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  height: 48px;
+  flex-shrink: 0;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topbar-breadcrumb .crumb-active { color: var(--text-primary); font-weight: 600; }
+.topbar-breadcrumb .crumb-sep { color: var(--text-faint); font-size: 11px; }
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-env {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.topbar-shift {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--running-bg);
+  color: var(--running);
+  border: 1px solid var(--running-border);
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.topbar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--amber-bg);
+  color: var(--amber);
+  font-weight: 600;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--amber-light);
+}
+
+/* Content scroll container */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px 40px;
+  min-width: 0;
+}
+
+/* ==========================================================================
+   SYSTEM OVERVIEW STRIP (top 5 cards)
+   ========================================================================== */
+.health-strip {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 12px 16px;
+  box-shadow: var(--shadow-card);
+  position: relative;
+  overflow: hidden;
+  transition: box-shadow 0.15s;
+  cursor: pointer;
+}
+
+.stat-card:hover { box-shadow: var(--shadow-md); }
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+}
+
+.stat-card.card-amber::before  { background: linear-gradient(90deg, var(--amber), transparent); }
+.stat-card.card-green::before  { background: linear-gradient(90deg, var(--success), transparent); }
+.stat-card.card-error::before  { background: linear-gradient(90deg, var(--error), transparent); }
+.stat-card.card-teal::before   { background: linear-gradient(90deg, var(--running), transparent); }
+.stat-card.card-warn::before   { background: linear-gradient(90deg, var(--warning), transparent); }
+
+.stat-card.has-warning { animation: warningPulse 2.5s ease-in-out infinite; }
+
+.stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+}
+
+.stat-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stat-value.val-amber  { color: var(--amber); }
+.stat-value.val-green  { color: var(--success); }
+.stat-value.val-error  { color: var(--error); }
+.stat-value.val-teal   { color: var(--running); }
+.stat-value.val-warn   { color: var(--warning); }
+
+.stat-unit {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.stat-detail {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.stat-detail strong { color: var(--text-secondary); }
+
+.stat-breakdown {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
+.stat-breakdown .bp-live { color: var(--success); }
+.stat-breakdown .bp-stale { color: var(--warning); }
+.stat-breakdown .bp-dead { color: var(--error); }
+
+.stat-breakdown .bp-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 3px;
+  vertical-align: middle;
+}
+
+.stat-breakdown .bp-dot-live { background: #5DB866; }
+.stat-breakdown .bp-dot-stale { background: var(--warning); }
+.stat-breakdown .bp-dot-dead { background: var(--text-muted); }
+
+/* ==========================================================================
+   AGENT GROUP CARDS
+   ========================================================================== */
+.group-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.group-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  transition: box-shadow 0.15s;
+}
+
+.group-card:hover { box-shadow: var(--shadow-md); }
+
+.group-card.group-alert {
+  border-color: var(--error-border);
+  animation: errorPulse 2.5s ease-in-out infinite;
+}
+
+.group-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-raised);
+}
+
+.group-name {
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+
+.group-instance-count {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  background: var(--bg-inset);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.group-meta {
+  display: flex;
+  gap: 16px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+}
+
+.group-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.group-meta-item strong {
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.group-instances {
+  padding: 0;
+}
+
+.instance-row {
+  display: grid;
+  grid-template-columns: 8px 1fr auto auto auto auto auto;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 12px;
+  transition: background 0.1s;
+}
+
+.instance-row:last-child { border-bottom: none; }
+.instance-row:hover { background: var(--bg-hover); }
+
+.instance-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dot-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
+.dot-stale { background: var(--warning); box-shadow: 0 0 6px rgba(194, 117, 22, 0.3); }
+.dot-dead { background: var(--text-muted); }
+
+.instance-name {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-size: 12px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.instance-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+
+.badge-live {
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+}
+
+.badge-stale {
+  background: var(--warning-bg);
+  color: var(--warning);
+  border: 1px solid var(--warning-border);
+}
+
+.badge-dead {
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid var(--error-border);
+}
+
+.instance-uptime {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.instance-throughput {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.instance-errors {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.instance-errors.low { color: var(--success); }
+.instance-errors.med { color: var(--warning); }
+.instance-errors.high { color: var(--error); }
+
+.instance-heartbeat {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  text-align: right;
+}
+
+.instance-heartbeat.stale-hb { color: var(--warning); font-weight: 600; }
+.instance-heartbeat.dead-hb { color: var(--error); font-weight: 600; }
+
+.instance-note {
+  font-size: 10px;
+  color: var(--amber);
+  font-style: italic;
+  margin-left: 4px;
+}
+
+/* Alert banner inside group card */
+.group-alert-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--error-bg);
+  border-top: 1px solid var(--error-border);
+  font-size: 11px;
+  color: var(--error);
+  font-weight: 500;
+}
+
+.group-alert-banner .alert-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   BOTTOM TABS (Timeline + Route Distribution)
+   ========================================================================== */
+.bottom-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.tab-bar {
+  display: flex;
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0 16px;
+  gap: 0;
+}
+
+.tab-item {
+  padding: 10px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  margin-bottom: -1px;
+}
+
+.tab-item:hover { color: var(--text-primary); }
+.tab-item.active {
+  color: var(--amber);
+  border-bottom-color: var(--amber);
+  font-weight: 600;
+}
+
+.tab-content { padding: 0; }
+.tab-panel { display: none; }
+.tab-panel.active { display: block; }
+
+/* Timeline */
+.timeline-list { padding: 8px 0; }
+
+.timeline-event {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 16px;
+  transition: background 0.1s;
+}
+
+.timeline-event:hover { background: var(--bg-hover); }
+
+.timeline-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.timeline-icon.icon-start { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.timeline-icon.icon-dead { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
+.timeline-icon.icon-stale { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
+.timeline-icon.icon-route { background: var(--running-bg); color: var(--running); border: 1px solid var(--running-border); }
+.timeline-icon.icon-config { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-light); }
+
+.timeline-body { flex: 1; min-width: 0; }
+
+.timeline-text {
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.timeline-text .tl-agent {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.timeline-text .tl-group {
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+.timeline-text .tl-highlight-dead { color: var(--error); font-weight: 600; }
+.timeline-text .tl-highlight-stale { color: var(--warning); font-weight: 600; }
+.timeline-text .tl-highlight-start { color: var(--success); font-weight: 600; }
+
+.timeline-time {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+
+/* Route Distribution Table */
+.route-table-wrap { overflow-x: auto; }
+
+.route-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.route-table th {
+  padding: 8px 12px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+
+.route-table td {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.route-table tbody tr:hover { background: var(--bg-hover); }
+.route-table tbody tr:last-child td { border-bottom: none; }
+
+.route-table td.route-name {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.route-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  font-size: 11px;
+}
+
+.route-check.present { background: var(--success-bg); color: var(--success); }
+.route-check.absent { background: var(--bg-inset); color: var(--text-faint); }
+.route-check.dead { background: var(--error-bg); color: var(--error); }
+
+.route-status {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+.route-status.status-healthy { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.route-status.status-partial { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
+.route-status.status-degraded { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
+
+/* ==========================================================================
+   RESPONSIVE INSTANCE ROW (adjust grid for content)
+   ========================================================================== */
+.instance-row {
+  grid-template-columns: 8px minmax(100px, 1.2fr) auto auto auto auto auto;
+}
+
+/* Column headers for instance list */
+.instance-header {
+  display: grid;
+  grid-template-columns: 8px minmax(100px, 1.2fr) auto auto auto auto auto;
+  gap: 12px;
+  padding: 4px 16px;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-faint);
+  border-bottom: 1px solid var(--border-subtle);
+}
+</style>
+</head>
+<body>
+<div class="app">
+
+  <!-- ====================================================================
+       SIDEBAR
+       ==================================================================== -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path style="fill:#C6820E" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
+      </svg>
+      <div>
+        <span class="brand">cameleer</span><span class="version">v3</span>
+      </div>
+    </div>
+
+    <div class="sidebar-section">Navigation</div>
+
+    <div class="sidebar-items">
+      <div class="sidebar-item">
+        <span style="font-size: 13px; width: 18px; text-align: center;">&#9673;</span>
+        <div class="item-info"><div class="item-name">Executions</div></div>
+      </div>
+
+      <div class="sidebar-item active">
+        <span style="font-size: 13px; width: 18px; text-align: center;">&#9670;</span>
+        <div class="item-info"><div class="item-name">Agents</div></div>
+        <span class="item-count">12</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span style="font-size: 13px; width: 18px; text-align: center;">&#9711;</span>
+        <div class="item-info"><div class="item-name">Routes</div></div>
+        <span class="item-count">24</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span style="font-size: 13px; width: 18px; text-align: center;">&#9881;</span>
+        <div class="item-info"><div class="item-name">Diagrams</div></div>
+      </div>
+
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-section">Groups</div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">order-processing</div>
+          <div class="item-meta">3 agents</div>
+        </div>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info">
+          <div class="item-name">payment-flow</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">shipment-notify</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-dead"></span>
+        <div class="item-info">
+          <div class="item-name">inventory-check</div>
+          <div class="item-meta">1 agent</div>
+        </div>
+      </div>
+
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-section">Quick Filters</div>
+
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info"><div class="item-name">Stale Agents</div></div>
+        <span class="item-count">2</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-dead"></span>
+        <div class="item-info"><div class="item-name">Dead Agents</div></div>
+        <span class="item-count">1</span>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9881;</span><div class="item-info"><div class="item-name">Admin</div></div></div>
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9776;</span><div class="item-info"><div class="item-name">API Docs</div></div></div>
+    </div>
+  </aside>
+
+  <!-- ====================================================================
+       MAIN CONTENT
+       ==================================================================== -->
+  <div class="main">
+
+    <!-- Top bar -->
+    <div class="topbar">
+      <div class="topbar-breadcrumb">
+        <span>System</span>
+        <span class="crumb-sep">&#9656;</span>
+        <span class="crumb-active">Agents</span>
+      </div>
+      <div class="topbar-right">
+        <span class="topbar-env">Production</span>
+        <span class="topbar-shift">Since 06:00</span>
+        <div class="topbar-user">
+          <span>ops-admin</span>
+          <div class="topbar-avatar">OA</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scrollable content -->
+    <div class="content">
+
+      <!-- ================================================================
+           SYSTEM OVERVIEW STRIP
+           ================================================================ -->
+      <div class="health-strip animate-in">
+
+        <div class="stat-card card-amber has-warning">
+          <div class="stat-label">Total Agents</div>
+          <div class="stat-value-row">
+            <span class="stat-value val-amber">12</span>
+            <span class="stat-unit">reporting</span>
+          </div>
+          <div class="stat-breakdown">
+            <span class="bp-live"><span class="bp-dot bp-dot-live"></span>9</span>
+            <span class="bp-stale"><span class="bp-dot bp-dot-stale"></span>2</span>
+            <span class="bp-dead"><span class="bp-dot bp-dot-dead"></span>1</span>
+          </div>
+        </div>
+
+        <div class="stat-card card-teal">
+          <div class="stat-label">Groups</div>
+          <div class="stat-value-row">
+            <span class="stat-value val-teal">4</span>
+            <span class="stat-unit">applications</span>
+          </div>
+          <div class="stat-detail"><strong>3</strong> healthy &middot; <strong>1</strong> degraded</div>
+        </div>
+
+        <div class="stat-card card-green">
+          <div class="stat-label">Active Routes</div>
+          <div class="stat-value-row">
+            <span class="stat-value val-green">24</span>
+            <span class="stat-unit">routes</span>
+          </div>
+          <div class="stat-detail">across all agents</div>
+        </div>
+
+        <div class="stat-card card-green">
+          <div class="stat-label">System Uptime</div>
+          <div class="stat-value-row">
+            <span class="stat-value val-green">14d</span>
+            <span class="stat-unit">3h 22m</span>
+          </div>
+          <div class="stat-detail">since Mar 3 02:38 UTC</div>
+        </div>
+
+        <div class="stat-card card-amber">
+          <div class="stat-label">Data Ingestion</div>
+          <div class="stat-value-row">
+            <span class="stat-value val-amber">847</span>
+            <span class="stat-unit">msg/min</span>
+          </div>
+          <div class="stat-detail">&#9650; 4.2% vs yesterday</div>
+        </div>
+
+      </div>
+
+      <!-- ================================================================
+           AGENT GROUP CARDS (2-column grid)
+           ================================================================ -->
+      <div class="group-grid">
+
+        <!-- order-processing — 3 healthy instances -->
+        <div class="group-card animate-in delay-1">
+          <div class="group-card-header">
+            <span class="group-name">order-processing</span>
+            <span class="group-instance-count">3 instances</span>
+          </div>
+          <div class="group-meta">
+            <div class="group-meta-item">Routes: <strong>8</strong></div>
+            <div class="group-meta-item">Avg Throughput: <strong>248/min</strong></div>
+            <div class="group-meta-item">Errors: <strong>0.3%</strong></div>
+          </div>
+          <div class="instance-header">
+            <span></span>
+            <span>Agent ID</span>
+            <span>State</span>
+            <span>Uptime</span>
+            <span>Throughput</span>
+            <span>Err %</span>
+            <span style="text-align: right;">Heartbeat</span>
+          </div>
+          <div class="group-instances">
+            <div class="instance-row">
+              <span class="instance-dot dot-live"></span>
+              <span class="instance-name">prod-node-01</span>
+              <span class="instance-badge badge-live">Live</span>
+              <span class="instance-uptime">&#8593; 14d 3h</span>
+              <span class="instance-throughput">248/min</span>
+              <span class="instance-errors low">0.2%</span>
+              <span class="instance-heartbeat">5s ago</span>
+            </div>
+            <div class="instance-row">
+              <span class="instance-dot dot-live"></span>
+              <span class="instance-name">prod-node-02</span>
+              <span class="instance-badge badge-live">Live</span>
+              <span class="instance-uptime">&#8593; 14d 3h</span>
+              <span class="instance-throughput">251/min</span>
+              <span class="instance-errors low">0.4%</span>
+              <span class="instance-heartbeat">3s ago</span>
+            </div>
+            <div class="instance-row">
+              <span class="instance-dot dot-live"></span>
+              <span class="instance-name">prod-node-03</span>
+              <span class="instance-badge badge-live">Live</span>
+              <span class="instance-uptime">&#8593; 2h 15m<span class="instance-note">restarted</span></span>
+              <span class="instance-throughput">245/min</span>
+              <span class="instance-errors low">0.3%</span>
+              <span class="instance-heartbeat">8s ago</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- payment-flow — 2 instances, one STALE -->
+        <div class="group-card animate-in delay-2">
+          <div class="group-card-header">
+            <span class="group-name">payment-flow</span>
+            <span class="group-instance-count">2 instances</span>
+          </div>
+          <div class="group-meta">
+            <div class="group-meta-item">Routes: <strong>6</strong></div>
+            <div class="group-meta-item">Avg Throughput: <strong>182/min</strong></div>
+            <div class="group-meta-item">Errors: <strong>0.8%</strong></div>
+          </div>
+          <div class="instance-header">
+            <span></span>
+            <span>Agent ID</span>
+            <span>State</span>
+            <span>Uptime</span>
+            <span>Throughput</span>
+            <span>Err %</span>
+            <span style="text-align: right;">Heartbeat</span>
+          </div>
+          <div class="group-instances">
+            <div class="instance-row">
+              <span class="instance-dot dot-live"></span>
+              <span class="instance-name">prod-pay-01</span>
+              <span class="instance-badge badge-live">Live</span>
+              <span class="instance-uptime">&#8593; 14d 3h</span>
+              <span class="instance-throughput">194/min</span>
+              <span class="instance-errors low">0.5%</span>
+              <span class="instance-heartbeat">2s ago</span>
+            </div>
+            <div class="instance-row">
+              <span class="instance-dot dot-stale"></span>
+              <span class="instance-name">prod-pay-02</span>
+              <span class="instance-badge badge-stale">Stale</span>
+              <span class="instance-uptime">&#8593; 14d 3h</span>
+              <span class="instance-throughput">170/min</span>
+              <span class="instance-errors med">1.1%</span>
+              <span class="instance-heartbeat stale-hb">3m ago</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- shipment-notify — 2 healthy instances -->
+        <div class="group-card animate-in delay-3">
+          <div class="group-card-header">
+            <span class="group-name">shipment-notify</span>
+            <span class="group-instance-count">2 instances</span>
+          </div>
+          <div class="group-meta">
+            <div class="group-meta-item">Routes: <strong>4</strong></div>
+            <div class="group-meta-item">Avg Throughput: <strong>96/min</strong></div>
+            <div class="group-meta-item">Errors: <strong>0.1%</strong></div>
+          </div>
+          <div class="instance-header">
+            <span></span>
+            <span>Agent ID</span>
+            <span>State</span>
+            <span>Uptime</span>
+            <span>Throughput</span>
+            <span>Err %</span>
+            <span style="text-align: right;">Heartbeat</span>
+          </div>
+          <div class="group-instances">
+            <div class="instance-row">
+              <span class="instance-dot dot-live"></span>
+              <span class="instance-name">prod-ship-01</span>
+              <span class="instance-badge badge-live">Live</span>
+              <span class="instance-uptime">&#8593; 14d 3h</span>
+              <span class="instance-throughput">98/min</span>
+              <span class="instance-errors low">0.1%</span>
+              <span class="instance-heartbeat">6s ago</span>
+            </div>
+            <div class="instance-row">
+              <span class="instance-dot dot-live"></span>
+              <span class="instance-name">prod-ship-02</span>
+              <span class="instance-badge badge-live">Live</span>
+              <span class="instance-uptime">&#8593; 14d 3h</span>
+              <span class="instance-throughput">94/min</span>
+              <span class="instance-errors low">0.1%</span>
+              <span class="instance-heartbeat">4s ago</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- inventory-check — 1 DEAD instance, SPOF alert -->
+        <div class="group-card group-alert animate-in delay-4">
+          <div class="group-card-header" style="background: var(--error-bg);">
+            <span class="group-name" style="color: var(--error);">inventory-check</span>
+            <span class="group-instance-count" style="background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border);">1 instance</span>
+          </div>
+          <div class="group-meta" style="background: var(--error-bg); border-bottom-color: var(--error-border);">
+            <div class="group-meta-item">Routes: <strong>6</strong></div>
+            <div class="group-meta-item">Avg Throughput: <strong style="color: var(--error);">0/min</strong></div>
+            <div class="group-meta-item">Errors: <strong style="color: var(--error);">&#8212;</strong></div>
+          </div>
+          <div class="instance-header">
+            <span></span>
+            <span>Agent ID</span>
+            <span>State</span>
+            <span>Uptime</span>
+            <span>Throughput</span>
+            <span>Err %</span>
+            <span style="text-align: right;">Heartbeat</span>
+          </div>
+          <div class="group-instances">
+            <div class="instance-row">
+              <span class="instance-dot dot-dead"></span>
+              <span class="instance-name">staging-01</span>
+              <span class="instance-badge badge-dead">Dead</span>
+              <span class="instance-uptime" style="color: var(--text-faint);">&#8212;</span>
+              <span class="instance-throughput" style="color: var(--text-faint);">0/min</span>
+              <span class="instance-errors" style="color: var(--text-faint);">&#8212;</span>
+              <span class="instance-heartbeat dead-hb">45m ago</span>
+            </div>
+          </div>
+          <div class="group-alert-banner">
+            <span class="alert-icon">&#9888;</span>
+            <span>Single point of failure &mdash; this group has only 1 instance and it is <strong>DEAD</strong>. Last heartbeat 45 minutes ago. Inventory checking is fully offline.</span>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- ================================================================
+           BOTTOM TABS: Timeline | Route Distribution
+           ================================================================ -->
+      <div class="bottom-section animate-in delay-5">
+        <div class="tab-bar">
+          <div class="tab-item active" onclick="switchTab('timeline')">Timeline</div>
+          <div class="tab-item" onclick="switchTab('routes')">Route Distribution</div>
+        </div>
+        <div class="tab-content">
+
+          <!-- Timeline Tab -->
+          <div class="tab-panel active" id="tab-timeline">
+            <div class="timeline-list">
+
+              <div class="timeline-event">
+                <div class="timeline-icon icon-stale">&#9888;</div>
+                <div class="timeline-body">
+                  <div class="timeline-text">
+                    <span class="tl-agent">prod-pay-02</span>
+                    <span class="tl-group">(payment-flow)</span>
+                    went <span class="tl-highlight-stale">STALE</span> &mdash; missed 3 consecutive heartbeats
+                  </div>
+                  <div class="timeline-time">3 minutes ago &middot; 17 Mar 2026, 14:57 UTC</div>
+                </div>
+              </div>
+
+              <div class="timeline-event">
+                <div class="timeline-icon icon-dead">&#10006;</div>
+                <div class="timeline-body">
+                  <div class="timeline-text">
+                    <span class="tl-agent">staging-01</span>
+                    <span class="tl-group">(inventory-check)</span>
+                    went <span class="tl-highlight-dead">DEAD</span> &mdash; no heartbeat for 15 minutes
+                  </div>
+                  <div class="timeline-time">45 minutes ago &middot; 17 Mar 2026, 14:15 UTC</div>
+                </div>
+              </div>
+
+              <div class="timeline-event">
+                <div class="timeline-icon icon-route">&#8635;</div>
+                <div class="timeline-body">
+                  <div class="timeline-text">
+                    <span class="tl-agent">prod-node-01</span>
+                    <span class="tl-group">(order-processing)</span>
+                    route <strong>order-retry</strong> restarted after error threshold reached
+                  </div>
+                  <div class="timeline-time">1 hour ago &middot; 17 Mar 2026, 14:00 UTC</div>
+                </div>
+              </div>
+
+              <div class="timeline-event">
+                <div class="timeline-icon icon-start">&#9654;</div>
+                <div class="timeline-body">
+                  <div class="timeline-text">
+                    <span class="tl-agent">prod-node-03</span>
+                    <span class="tl-group">(order-processing)</span>
+                    <span class="tl-highlight-start">started</span> &mdash; registered with server, 8 routes loaded
+                  </div>
+                  <div class="timeline-time">2 hours 15 minutes ago &middot; 17 Mar 2026, 12:45 UTC</div>
+                </div>
+              </div>
+
+              <div class="timeline-event">
+                <div class="timeline-icon icon-config">&#9881;</div>
+                <div class="timeline-body">
+                  <div class="timeline-text">
+                    Config push to <span class="tl-agent">prod-pay-01</span>
+                    <span class="tl-group">(payment-flow)</span>
+                    &mdash; updated log level to DEBUG for route <strong>payment-charge</strong>
+                  </div>
+                  <div class="timeline-time">3 hours ago &middot; 17 Mar 2026, 12:00 UTC</div>
+                </div>
+              </div>
+
+              <div class="timeline-event">
+                <div class="timeline-icon icon-stale">&#9888;</div>
+                <div class="timeline-body">
+                  <div class="timeline-text">
+                    <span class="tl-agent">staging-01</span>
+                    <span class="tl-group">(inventory-check)</span>
+                    went <span class="tl-highlight-stale">STALE</span> &mdash; first missed heartbeat
+                  </div>
+                  <div class="timeline-time">1 hour ago &middot; 17 Mar 2026, 14:00 UTC</div>
+                </div>
+              </div>
+
+              <div class="timeline-event">
+                <div class="timeline-icon icon-start">&#9654;</div>
+                <div class="timeline-body">
+                  <div class="timeline-text">
+                    <span class="tl-agent">prod-ship-01</span>
+                    <span class="tl-group">(shipment-notify)</span>
+                    deployed version <strong>v3.2.1</strong> &mdash; rolling update completed
+                  </div>
+                  <div class="timeline-time">6 hours ago &middot; 17 Mar 2026, 09:00 UTC</div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- Route Distribution Tab -->
+          <div class="tab-panel" id="tab-routes">
+            <div class="route-table-wrap">
+              <table class="route-table">
+                <thead>
+                  <tr>
+                    <th>Route</th>
+                    <th>Group</th>
+                    <th>prod-node-01</th>
+                    <th>prod-node-02</th>
+                    <th>prod-node-03</th>
+                    <th>prod-pay-01</th>
+                    <th>prod-pay-02</th>
+                    <th>prod-ship-01</th>
+                    <th>prod-ship-02</th>
+                    <th>staging-01</th>
+                    <th>Coverage</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="route-name">order-intake</td>
+                    <td>order-processing</td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-status status-healthy">3/3</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">order-enrichment</td>
+                    <td>order-processing</td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-status status-healthy">3/3</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">order-retry</td>
+                    <td>order-processing</td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-status status-healthy">3/3</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">payment-charge</td>
+                    <td>payment-flow</td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-status status-partial">1/2 live</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">payment-refund</td>
+                    <td>payment-flow</td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-status status-partial">1/2 live</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">ship-dispatch</td>
+                    <td>shipment-notify</td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-status status-healthy">2/2</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">ship-track-update</td>
+                    <td>shipment-notify</td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check present">&#10003;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-status status-healthy">2/2</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">inv-stock-check</td>
+                    <td>inventory-check</td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check dead">&#10006;</span></td>
+                    <td><span class="route-status status-degraded">0/1 dead</span></td>
+                  </tr>
+                  <tr>
+                    <td class="route-name">inv-reorder</td>
+                    <td>inventory-check</td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check absent">&mdash;</span></td>
+                    <td><span class="route-check dead">&#10006;</span></td>
+                    <td><span class="route-status status-degraded">0/1 dead</span></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div><!-- /content -->
+  </div><!-- /main -->
+</div><!-- /app -->
+
+<script>
+function switchTab(tab) {
+  // Update tab bar
+  document.querySelectorAll('.tab-item').forEach(function(el) {
+    el.classList.remove('active');
+  });
+  event.target.classList.add('active');
+
+  // Update tab panels
+  document.querySelectorAll('.tab-panel').forEach(function(el) {
+    el.classList.remove('active');
+  });
+  document.getElementById('tab-' + tab).classList.add('active');
+}
+</script>
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-v3-exchange-detail.html b/docs/ui-mocks/mock-v3-exchange-detail.html
new file mode 100644
index 00000000..5e8becc3
--- /dev/null
+++ b/docs/ui-mocks/mock-v3-exchange-detail.html
@@ -0,0 +1,1945 @@
+<!--
+  ============================================================================
+  CAMELEER3 v3 — Exchange / Message Inspector (Light Theme)
+  ============================================================================
+
+  DESIGN NOTES
+  ============
+
+  PURPOSE:
+  This is the deepest drill-down view in Cameleer3 — the Exchange Inspector.
+  A developer arrives here after clicking a failed execution row in the
+  Operations Dashboard (mock-v2). The page answers the #1 question:
+  "What happened to my message as it flowed through the route?"
+
+  LAYOUT:
+  Two-region layout inside the standard sidebar + main shell:
+  1. Exchange Header Card — identity, status, timing at a glance
+  2. Processor Timeline — Gantt-style horizontal bars showing where time was spent
+  3. Processor Detail Panel — split IN / OUT columns with headers, body, diffs
+  4. Properties & Correlation — collapsible bottom section
+
+  DATA SCENARIO:
+  Order OP-88421 entered via direct:order-intake, passed validation, DB insert,
+  priority check, then FAILED at http:payment-api/charge with a 503 timeout
+  after 2m 18s. The payment-api processor consumed 94% of total wall time.
+
+  DESIGN SYSTEM:
+  Inherits 100% from mock-v2-light.html — same CSS variables, fonts, sidebar,
+  topbar. No new colors or typefaces introduced.
+
+  OPTIMIZED FOR: 1920x1080, Chrome/Firefox/Edge
+
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>Cameleer3 — Exchange OP-88421</title>
+<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@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ==========================================================================
+   RESET & FOUNDATIONS (identical to mock-v2)
+   ========================================================================== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Surface palette (warm parchment) */
+  --bg-body:     #F5F2ED;
+  --bg-surface:  #FFFFFF;
+  --bg-raised:   #FAF8F5;
+  --bg-inset:    #F0EDE8;
+  --bg-hover:    #F5F0EA;
+
+  /* Sidebar (warm charcoal) */
+  --sidebar-bg:     #2C2520;
+  --sidebar-hover:  #3A322C;
+  --sidebar-active: #4A3F38;
+  --sidebar-text:   #BFB5A8;
+  --sidebar-muted:  #7A6F63;
+
+  /* Text */
+  --text-primary:   #1A1612;
+  --text-secondary: #5C5347;
+  --text-muted:     #9C9184;
+  --text-faint:     #C4BAB0;
+
+  /* Borders */
+  --border:        #E4DFD8;
+  --border-subtle: #EDE9E3;
+
+  /* Brand accent (amber-gold) */
+  --amber:       #C6820E;
+  --amber-light: #F0D9A8;
+  --amber-bg:    #FDF6E9;
+  --amber-deep:  #8B5A06;
+
+  /* Status colors (warm) */
+  --success:        #3D7C47;
+  --success-bg:     #EFF7F0;
+  --success-border: #C2DFC6;
+  --warning:        #C27516;
+  --warning-bg:     #FEF5E7;
+  --warning-border: #F0D9A8;
+  --error:          #C0392B;
+  --error-bg:       #FDF0EE;
+  --error-border:   #F0C4BE;
+  --running:        #1A7F8E;
+  --running-bg:     #E8F5F7;
+  --running-border: #B0DDE4;
+
+  /* Typography */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing & Radii */
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows */
+  --shadow-sm:   0 1px 2px rgba(44, 37, 32, 0.06);
+  --shadow-md:   0 2px 8px rgba(44, 37, 32, 0.08);
+  --shadow-lg:   0 4px 16px rgba(44, 37, 32, 0.10);
+  --shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
+}
+
+html { font-size: 14px; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-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-faint); }
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes errorPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.2); }
+  50%      { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0); }
+}
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+.delay-1 { animation-delay: 0.04s; }
+.delay-2 { animation-delay: 0.08s; }
+.delay-3 { animation-delay: 0.12s; }
+.delay-4 { animation-delay: 0.16s; }
+.delay-5 { animation-delay: 0.20s; }
+
+/* ==========================================================================
+   LAYOUT
+   ========================================================================== */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   SIDEBAR (220px, warm charcoal — identical to mock-v2)
+   ========================================================================== */
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-logo {
+  padding: 16px 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.sidebar-logo .brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--amber-light);
+  letter-spacing: -0.3px;
+}
+
+.sidebar-logo .version {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+  margin-left: 2px;
+}
+
+.sidebar-search { padding: 10px 12px; }
+
+.sidebar-search input {
+  width: 100%;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px 6px 28px;
+  color: var(--sidebar-text);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.sidebar-search input::placeholder { color: var(--sidebar-muted); }
+.sidebar-search input:focus { border-color: rgba(198, 130, 14, 0.4); }
+
+.sidebar-search-wrap { position: relative; }
+.sidebar-search-wrap .search-icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sidebar-muted);
+  font-size: 12px;
+}
+
+.sidebar-section {
+  padding: 14px 12px 5px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+}
+
+.sidebar-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--sidebar-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.12s;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  margin-bottom: 1px;
+}
+
+.sidebar-item:hover { background: var(--sidebar-hover); color: #E8DFD4; }
+.sidebar-item.active { background: var(--sidebar-active); color: var(--amber-light); border-left-color: var(--amber); }
+
+.sidebar-item .health { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.health-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
+.health-stale { background: var(--warning); }
+
+.sidebar-item .item-info { flex: 1; min-width: 0; }
+.sidebar-item .item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-item .item-meta { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
+.sidebar-item .item-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  background: rgba(255,255,255,0.06);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+.sidebar-item.active .item-count { background: rgba(198, 130, 14, 0.2); color: var(--amber-light); }
+
+.sidebar-divider {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 6px 12px;
+}
+
+.sidebar-agents-header {
+  padding: 14px 12px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-agent-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: rgba(93, 184, 102, 0.15);
+  color: #5DB866;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  margin: 0 6px 2px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--sidebar-text);
+  transition: background 0.1s;
+}
+.agent-item:hover { background: var(--sidebar-hover); }
+.agent-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.agent-info { flex: 1; min-width: 0; }
+.agent-name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-detail { font-size: 10px; color: var(--sidebar-muted); }
+.agent-stats-col { text-align: right; font-family: var(--font-mono); font-size: 10px; color: var(--sidebar-muted); }
+.agent-tps { color: var(--sidebar-text); }
+
+.sidebar-bottom {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 6px;
+}
+.sidebar-bottom .sidebar-item { font-size: 12px; color: var(--sidebar-muted); border-left: 3px solid transparent; }
+.sidebar-bottom .sidebar-item:hover { color: var(--sidebar-text); }
+
+/* ==========================================================================
+   MAIN CONTENT AREA
+   ========================================================================== */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  height: 48px;
+  flex-shrink: 0;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topbar-breadcrumb .crumb-link {
+  color: var(--text-muted);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+.topbar-breadcrumb .crumb-link:hover { color: var(--amber); }
+.topbar-breadcrumb .crumb-active { color: var(--text-primary); font-weight: 600; }
+.topbar-breadcrumb .crumb-sep { color: var(--text-faint); font-size: 11px; }
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-env {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.topbar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--amber-bg);
+  color: var(--amber);
+  font-weight: 600;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--amber-light);
+}
+
+/* Content scroll container */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px 40px;
+  min-width: 0;
+}
+
+/* ==========================================================================
+   STATUS BADGES (reused from mock-v2)
+   ========================================================================== */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.status-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.status-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }
+
+.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+
+/* ==========================================================================
+   EXCHANGE HEADER CARD
+   ========================================================================== */
+.exchange-header {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 18px 22px;
+  box-shadow: var(--shadow-card);
+  margin-bottom: 16px;
+  border-left: 4px solid var(--error);
+}
+
+.exchange-header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.exchange-title-area {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.exchange-route {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.exchange-status-lg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 14px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid var(--error-border);
+  animation: errorPulse 2.5s ease-in-out infinite;
+}
+
+.exchange-status-lg .status-dot { width: 6px; height: 6px; }
+
+.exchange-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+
+.action-btn:hover {
+  border-color: var(--text-faint);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+}
+
+.action-btn.primary {
+  background: var(--amber-bg);
+  border-color: var(--amber-light);
+  color: var(--amber-deep);
+}
+
+.action-btn.primary:hover {
+  background: var(--amber-light);
+}
+
+.exchange-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 14px;
+}
+
+.meta-item {
+  padding: 0 16px;
+  border-right: 1px solid var(--border-subtle);
+}
+
+.meta-item:first-child { padding-left: 0; }
+.meta-item:last-child { border-right: none; }
+
+.meta-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+}
+
+.meta-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.meta-value.mono-sm {
+  font-size: 11px;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+.meta-value .biz-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 500;
+  margin-right: 6px;
+}
+
+.biz-tag.order { background: var(--running-bg); color: var(--running); border: 1px solid var(--running-border); }
+.biz-tag.customer { background: var(--amber-bg); color: var(--amber-deep); border: 1px solid var(--amber-light); }
+
+.meta-value .duration-lg {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--error);
+}
+
+.meta-value .duration-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 400;
+  margin-left: 4px;
+}
+
+.meta-sub {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  margin-top: 2px;
+}
+
+/* ==========================================================================
+   PROCESSOR TIMELINE (Gantt-style)
+   ========================================================================== */
+.timeline-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.timeline-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.timeline-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.timeline-title .proc-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--bg-inset);
+  color: var(--text-muted);
+}
+
+.timeline-legend {
+  display: flex;
+  gap: 14px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+.legend-dot.l-success { background: var(--success); }
+.legend-dot.l-error { background: var(--error); }
+.legend-dot.l-slow { background: var(--warning); }
+
+.timeline-body {
+  padding: 6px 0;
+}
+
+.timeline-row {
+  display: grid;
+  grid-template-columns: 260px 1fr 80px 32px;
+  align-items: center;
+  padding: 6px 18px;
+  gap: 12px;
+  cursor: pointer;
+  transition: background 0.08s;
+  border-left: 3px solid transparent;
+}
+
+.timeline-row:hover { background: var(--bg-hover); }
+.timeline-row.selected { background: var(--amber-bg); border-left-color: var(--amber); }
+.timeline-row.row-error { border-left-color: var(--error); }
+.timeline-row.row-error.selected { border-left-color: var(--error); background: var(--error-bg); }
+
+.proc-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  min-width: 0;
+}
+
+.proc-index {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-faint);
+  width: 18px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.proc-type {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.proc-type.type-from { background: var(--running-bg); color: var(--running); }
+.proc-type.type-to { background: var(--amber-bg); color: var(--amber-deep); }
+.proc-type.type-process { background: var(--success-bg); color: var(--success); }
+.proc-type.type-choice { background: #F3EFF8; color: #6B4FA0; }
+
+.proc-name {
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.proc-bar-area {
+  position: relative;
+  height: 20px;
+  background: var(--bg-inset);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.proc-bar {
+  height: 100%;
+  border-radius: 3px;
+  min-width: 3px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.proc-bar.bar-success { background: linear-gradient(90deg, var(--success), #5DB866); }
+.proc-bar.bar-error   { background: linear-gradient(90deg, var(--error), #E74C3C); }
+.proc-bar.bar-slow    { background: linear-gradient(90deg, var(--warning), #E8A838); }
+
+.proc-bar .bar-pct {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  color: white;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+
+.proc-duration {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-align: right;
+}
+
+.proc-duration.dur-error { color: var(--error); font-weight: 600; }
+
+.proc-status-icon {
+  font-size: 14px;
+  text-align: center;
+}
+
+.proc-status-icon.icon-ok { color: var(--success); }
+.proc-status-icon.icon-fail { color: var(--error); }
+
+/* Bottleneck callout */
+.bottleneck-callout {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 18px 10px;
+  padding: 8px 14px;
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-left: 3px solid var(--error);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--error);
+}
+
+.bottleneck-callout strong { font-weight: 700; }
+.bottleneck-pct {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 14px;
+}
+
+/* ==========================================================================
+   PROCESSOR DETAIL PANEL (split IN / OUT)
+   ========================================================================== */
+.detail-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.detail-panel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.detail-panel.panel-error {
+  border-color: var(--error-border);
+}
+
+.detail-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-raised);
+}
+
+.detail-panel.panel-error .detail-panel-header {
+  background: var(--error-bg);
+  border-bottom-color: var(--error-border);
+}
+
+.panel-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.panel-title .arrow-in { color: var(--success); }
+.panel-title .arrow-out { color: var(--error); }
+
+.panel-tag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.detail-panel-body {
+  padding: 14px 16px;
+}
+
+/* Headers section */
+.headers-section { margin-bottom: 16px; }
+
+.section-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.section-label .count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: var(--text-faint);
+}
+
+.header-list {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.header-row {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 8px;
+  padding: 3px 8px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  transition: background 0.08s;
+}
+
+.header-row:hover { background: var(--bg-hover); }
+
+.header-row.h-added { background: var(--success-bg); }
+.header-row.h-removed { background: var(--error-bg); text-decoration: line-through; }
+
+.header-key {
+  color: var(--text-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-value {
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.header-row.h-added .header-key { color: var(--success); }
+.header-row.h-added .header-value { color: var(--success); }
+.header-row.h-removed .header-key { color: var(--error); opacity: 0.7; }
+.header-row.h-removed .header-value { color: var(--error); opacity: 0.7; }
+
+.diff-badge {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  padding: 0 5px;
+  border-radius: 8px;
+  margin-left: 4px;
+}
+
+.diff-badge.added { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.diff-badge.removed { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
+
+/* Body section */
+.body-section { margin-bottom: 0; }
+
+.body-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.body-size {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.body-format-tag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--running-bg);
+  color: var(--running);
+  border: 1px solid var(--running-border);
+}
+
+.body-toggle {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.12s;
+  margin-left: auto;
+}
+
+.body-toggle:hover { border-color: var(--text-faint); color: var(--text-secondary); }
+.body-toggle.active { background: var(--amber-bg); border-color: var(--amber-light); color: var(--amber-deep); }
+
+.body-content {
+  background: var(--bg-inset);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  overflow-x: auto;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.body-content pre {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  margin: 0;
+  white-space: pre;
+}
+
+/* JSON syntax highlighting */
+.json-key { color: #6B4FA0; }
+.json-str { color: var(--success); }
+.json-num { color: var(--amber-deep); }
+.json-bool { color: var(--running); }
+.json-null { color: var(--text-muted); }
+.json-brace { color: var(--text-secondary); }
+
+/* ==========================================================================
+   ERROR DISPLAY
+   ========================================================================== */
+.error-section {
+  margin-top: 0;
+}
+
+.error-badge-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.error-class {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--error);
+}
+
+.error-http-badge {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 10px;
+  border-radius: 10px;
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid var(--error-border);
+}
+
+.error-message-box {
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-left: 3px solid var(--error);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  margin-bottom: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--error);
+  line-height: 1.6;
+}
+
+.error-detail-grid {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 4px 12px;
+  margin-bottom: 14px;
+  font-size: 12px;
+}
+
+.error-detail-key {
+  font-weight: 600;
+  color: var(--text-muted);
+  text-align: right;
+}
+
+.error-detail-val {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.stack-section { }
+
+.stack-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px 0;
+  margin-bottom: 6px;
+  background: none;
+  border: none;
+  font-family: var(--font-body);
+}
+
+.stack-toggle:hover { color: var(--text-primary); }
+
+.stack-content {
+  background: var(--sidebar-bg);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  overflow-x: auto;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.stack-content pre {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.7;
+  color: #D4C8B8;
+  margin: 0;
+  white-space: pre;
+}
+
+.stack-content .stack-highlight {
+  color: #F0C4BE;
+  font-weight: 600;
+}
+
+.stack-content .stack-cause {
+  color: #E8A838;
+  font-weight: 600;
+}
+
+.stack-content .stack-at {
+  color: #8B9DAF;
+}
+
+/* ==========================================================================
+   PROPERTIES & CORRELATION
+   ========================================================================== */
+.props-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.props-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 18px;
+  border-bottom: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: background 0.08s;
+}
+
+.props-header:hover { background: var(--bg-hover); }
+
+.props-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.props-chevron {
+  color: var(--text-faint);
+  font-size: 12px;
+  transition: transform 0.2s;
+}
+
+.props-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0;
+  padding: 16px 18px;
+}
+
+.props-column {
+  padding: 0 16px;
+  border-right: 1px solid var(--border-subtle);
+}
+
+.props-column:first-child { padding-left: 0; }
+.props-column:last-child { border-right: none; }
+
+.props-col-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+}
+
+.prop-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  padding: 3px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 11px;
+}
+
+.prop-row:last-child { border-bottom: none; }
+
+.prop-key {
+  font-weight: 500;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.prop-val {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+/* Correlation chain */
+.correlation-chain {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-top: 16px;
+  padding: 12px 18px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.chain-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-right: 14px;
+  white-space: nowrap;
+}
+
+.chain-node {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.12s;
+  background: var(--bg-surface);
+}
+
+.chain-node:hover { border-color: var(--amber); color: var(--amber); }
+.chain-node.current { background: var(--amber-bg); border-color: var(--amber-light); color: var(--amber-deep); font-weight: 600; }
+.chain-node.chain-error { border-color: var(--error-border); color: var(--error); }
+
+.chain-arrow {
+  color: var(--text-faint);
+  font-size: 14px;
+  margin: 0 6px;
+}
+
+/* ==========================================================================
+   KEYBOARD HINTS
+   ========================================================================== */
+.keyboard-bar {
+  position: fixed;
+  bottom: 0;
+  left: 220px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 6px 24px;
+  background: var(--sidebar-bg);
+  border-top: 1px solid rgba(255,255,255,0.06);
+  z-index: 100;
+}
+
+.kb-hint {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--sidebar-muted);
+}
+
+.kb-key {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(255,255,255,0.08);
+  color: var(--sidebar-text);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+</style>
+</head>
+<body>
+
+<div class="app">
+  <!-- ====================================================================
+       SIDEBAR (identical structure to mock-v2)
+       ==================================================================== -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path style="fill:#C6820E" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
+      </svg>
+      <div>
+        <span class="brand">cameleer</span><span class="version">v3</span>
+      </div>
+    </div>
+
+    <div class="sidebar-search">
+      <div class="sidebar-search-wrap">
+        <span class="search-icon">&#9671;</span>
+        <input type="text" placeholder="Filter applications...">
+      </div>
+    </div>
+
+    <div class="sidebar-section">Applications</div>
+
+    <div class="sidebar-items">
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info"><div class="item-name">All Applications</div></div>
+        <span class="item-count">4</span>
+      </div>
+
+      <div class="sidebar-divider"></div>
+
+      <div class="sidebar-item active">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">order-service</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">1,847</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">payment-gateway</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">923</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">shipment-tracker</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">471</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info">
+          <div class="item-name">notification-hub</div>
+          <div class="item-meta">1 agent</div>
+        </div>
+        <span class="item-count">128</span>
+      </div>
+
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-section">Routes</div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-intake</div></div>
+        <span class="item-count">892</span>
+      </div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-enrichment</div></div>
+        <span class="item-count">541</span>
+      </div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">payment-process</div></div>
+        <span class="item-count">414</span>
+      </div>
+    </div>
+
+    <!-- Agent health -->
+    <div class="sidebar-agents-header">
+      <span>Agents</span>
+      <span class="sidebar-agent-badge">4/4 live</span>
+    </div>
+
+    <div style="padding: 0 0 6px; overflow-y: auto; max-height: 180px;">
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-node-01</div>
+          <div class="agent-detail">order-service v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">14.2/s</div>
+          <div>12s ago</div>
+        </div>
+      </div>
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-node-02</div>
+          <div class="agent-detail">order-service v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">11.8/s</div>
+          <div style="color: var(--error);">3 err/h</div>
+        </div>
+      </div>
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-node-03</div>
+          <div class="agent-detail">payment-svc v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">12.1/s</div>
+          <div>5s ago</div>
+        </div>
+      </div>
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-node-04</div>
+          <div class="agent-detail">shipment-svc v3.2.0</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">9.1/s</div>
+          <div>3s ago</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9881;</span><div class="item-info"><div class="item-name">Admin</div></div></div>
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9776;</span><div class="item-info"><div class="item-name">API Docs</div></div></div>
+    </div>
+  </aside>
+
+  <!-- ====================================================================
+       MAIN CONTENT — Exchange Detail
+       ==================================================================== -->
+  <div class="main">
+    <!-- Top bar -->
+    <div class="topbar">
+      <div class="topbar-breadcrumb">
+        <span class="crumb-link">order-service</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-link">order-processing</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-active">Exchange OP-88421</span>
+      </div>
+
+      <div class="topbar-right">
+        <span class="topbar-env">PRODUCTION</span>
+        <div class="topbar-user">
+          <span>hendrik</span>
+          <div class="topbar-avatar">H</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scrollable content -->
+    <div class="content" style="padding-bottom: 60px;">
+
+      <!-- ============================================================
+           1. EXCHANGE HEADER CARD
+           ============================================================ -->
+      <div class="exchange-header animate-in">
+        <div class="exchange-header-top">
+          <div class="exchange-title-area">
+            <span class="exchange-route">order-processing</span>
+            <span class="exchange-status-lg">
+              <span class="status-dot"></span>
+              FAILED
+            </span>
+          </div>
+          <div class="exchange-actions">
+            <button class="action-btn" title="Copy Exchange ID">&#128203; Copy ID</button>
+            <button class="action-btn" title="Copy full trace as JSON">&#128196; Export JSON</button>
+            <button class="action-btn primary" title="Retry this exchange">&#8635; Retry</button>
+          </div>
+        </div>
+
+        <div class="exchange-meta-grid">
+          <div class="meta-item">
+            <div class="meta-label">Business IDs</div>
+            <div class="meta-value">
+              <span class="biz-tag order">Order: OP-88421</span>
+              <span class="biz-tag customer">Customer: DE-40912</span>
+            </div>
+          </div>
+          <div class="meta-item">
+            <div class="meta-label">Duration</div>
+            <div class="meta-value">
+              <span class="duration-lg">2m 33s</span>
+              <span class="duration-label">total</span>
+            </div>
+            <div class="meta-sub">Started 09:14:22 (2 min ago)</div>
+          </div>
+          <div class="meta-item">
+            <div class="meta-label">Exchange ID</div>
+            <div class="meta-value mono-sm">ID-20260317-091422-prod02-88421</div>
+            <div class="meta-sub">Breadcrumb: BC-88421-001</div>
+          </div>
+          <div class="meta-item">
+            <div class="meta-label">Agent</div>
+            <div class="meta-value" style="display: flex; align-items: center; gap: 6px;">
+              <span style="width: 6px; height: 6px; border-radius: 50%; background: #5DB866; display: inline-block;"></span>
+              prod-node-02
+            </div>
+            <div class="meta-sub">order-service v3.2.1</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ============================================================
+           2. PROCESSOR TIMELINE (Gantt-style)
+           ============================================================ -->
+      <div class="timeline-section animate-in delay-1">
+        <div class="timeline-header">
+          <div class="timeline-title">
+            Processor Timeline
+            <span class="proc-count">5 processors</span>
+          </div>
+          <div class="timeline-legend">
+            <div class="legend-item"><span class="legend-dot l-success"></span> Success</div>
+            <div class="legend-item"><span class="legend-dot l-error"></span> Failed</div>
+            <div class="legend-item"><span class="legend-dot l-slow"></span> Slow (&gt; SLA)</div>
+          </div>
+        </div>
+
+        <div class="timeline-body">
+          <!-- Row 1: from(direct:order-intake) — 12ms -->
+          <div class="timeline-row" onclick="selectRow(this, 0)">
+            <div class="proc-label">
+              <span class="proc-index">1</span>
+              <span class="proc-type type-from">from</span>
+              <span class="proc-name">direct:order-intake</span>
+            </div>
+            <div class="proc-bar-area">
+              <div class="proc-bar bar-success" style="width: 0.8%;"></div>
+            </div>
+            <div class="proc-duration">12ms</div>
+            <div class="proc-status-icon icon-ok">&#10003;</div>
+          </div>
+
+          <!-- Row 2: process(OrderValidator) — 45ms -->
+          <div class="timeline-row" onclick="selectRow(this, 1)">
+            <div class="proc-label">
+              <span class="proc-index">2</span>
+              <span class="proc-type type-process">process</span>
+              <span class="proc-name">OrderValidator</span>
+            </div>
+            <div class="proc-bar-area">
+              <div class="proc-bar bar-success" style="width: 2.9%;"></div>
+            </div>
+            <div class="proc-duration">45ms</div>
+            <div class="proc-status-icon icon-ok">&#10003;</div>
+          </div>
+
+          <!-- Row 3: to(sql:INSERT INTO orders) — 89ms -->
+          <div class="timeline-row" onclick="selectRow(this, 2)">
+            <div class="proc-label">
+              <span class="proc-index">3</span>
+              <span class="proc-type type-to">to</span>
+              <span class="proc-name">sql:INSERT INTO orders</span>
+            </div>
+            <div class="proc-bar-area">
+              <div class="proc-bar bar-success" style="width: 5.8%;"></div>
+            </div>
+            <div class="proc-duration">89ms</div>
+            <div class="proc-status-icon icon-ok">&#10003;</div>
+          </div>
+
+          <!-- Row 4: choice(priority check) — 2ms -->
+          <div class="timeline-row" onclick="selectRow(this, 3)">
+            <div class="proc-label">
+              <span class="proc-index">4</span>
+              <span class="proc-type type-choice">choice</span>
+              <span class="proc-name">priority-check</span>
+            </div>
+            <div class="proc-bar-area">
+              <div class="proc-bar bar-success" style="width: 0.3%;"></div>
+            </div>
+            <div class="proc-duration">2ms</div>
+            <div class="proc-status-icon icon-ok">&#10003;</div>
+          </div>
+
+          <!-- Row 5: to(http:payment-api/charge) — 2m 18s — FAILED -->
+          <div class="timeline-row row-error selected" onclick="selectRow(this, 4)">
+            <div class="proc-label">
+              <span class="proc-index">5</span>
+              <span class="proc-type type-to">to</span>
+              <span class="proc-name" style="color: var(--error); font-weight: 600;">http:payment-api/charge</span>
+            </div>
+            <div class="proc-bar-area">
+              <div class="proc-bar bar-error" style="width: 94%;">
+                <span class="bar-pct">94%</span>
+              </div>
+            </div>
+            <div class="proc-duration dur-error">2m 18s</div>
+            <div class="proc-status-icon icon-fail">&#10007;</div>
+          </div>
+        </div>
+
+        <!-- Bottleneck callout -->
+        <div class="bottleneck-callout">
+          <span style="font-size: 16px;">&#9888;</span>
+          <span><strong>Bottleneck detected:</strong> Processor #5 <code style="font-family: var(--font-mono); font-size: 11px; background: rgba(192,57,43,0.1); padding: 1px 4px; border-radius: 3px;">http:payment-api/charge</code> consumed</span>
+          <span class="bottleneck-pct">94%</span>
+          <span>of total execution time (2m 18s of 2m 33s). 503 Service Unavailable after 30s timeout with 4 retries.</span>
+        </div>
+      </div>
+
+      <!-- ============================================================
+           3. PROCESSOR DETAIL PANEL (split IN / OUT)
+           Selected: #5 http:payment-api/charge (FAILED)
+           ============================================================ -->
+      <div class="detail-split animate-in delay-2">
+
+        <!-- LEFT: Message IN (at entry to this processor) -->
+        <div class="detail-panel">
+          <div class="detail-panel-header">
+            <div class="panel-title">
+              <span class="arrow-in" style="font-size: 16px;">&#8594;</span>
+              Message IN
+              <span class="panel-tag">at processor #5 entry</span>
+            </div>
+          </div>
+          <div class="detail-panel-body">
+
+            <!-- Headers at entry -->
+            <div class="headers-section">
+              <div class="section-label">
+                Headers <span class="count">9</span>
+              </div>
+              <div class="header-list">
+                <div class="header-row">
+                  <span class="header-key">breadcrumbId</span>
+                  <span class="header-value">BC-88421-001</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">CamelHttpMethod</span>
+                  <span class="header-value">POST</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">Content-Type</span>
+                  <span class="header-value">application/json</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">orderId</span>
+                  <span class="header-value">OP-88421</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">customerId</span>
+                  <span class="header-value">DE-40912</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">correlationId</span>
+                  <span class="header-value">corr-a7f3e9d1-88421</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">orderPriority</span>
+                  <span class="header-value">HIGH</span>
+                </div>
+                <div class="header-row h-added">
+                  <span class="header-key">orderDbId <span class="diff-badge added">+added</span></span>
+                  <span class="header-value">48291</span>
+                </div>
+                <div class="header-row h-added">
+                  <span class="header-key">priorityTier <span class="diff-badge added">+added</span></span>
+                  <span class="header-value">express</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Body at entry -->
+            <div class="body-section">
+              <div class="section-label">Body</div>
+              <div class="body-toolbar">
+                <span class="body-format-tag">JSON</span>
+                <span class="body-size">1.2 KB</span>
+                <button class="body-toggle">Show diff from #4</button>
+              </div>
+              <div class="body-content">
+<pre><span class="json-brace">{</span>
+  <span class="json-key">"orderId"</span>: <span class="json-str">"OP-88421"</span>,
+  <span class="json-key">"customerId"</span>: <span class="json-str">"DE-40912"</span>,
+  <span class="json-key">"timestamp"</span>: <span class="json-str">"2026-03-17T09:14:22.184Z"</span>,
+  <span class="json-key">"items"</span>: <span class="json-brace">[</span>
+    <span class="json-brace">{</span>
+      <span class="json-key">"sku"</span>: <span class="json-str">"WDG-4420-BLK"</span>,
+      <span class="json-key">"name"</span>: <span class="json-str">"Industrial Pressure Valve DN50"</span>,
+      <span class="json-key">"quantity"</span>: <span class="json-num">12</span>,
+      <span class="json-key">"unitPrice"</span>: <span class="json-num">284.50</span>,
+      <span class="json-key">"currency"</span>: <span class="json-str">"EUR"</span>
+    <span class="json-brace">}</span>,
+    <span class="json-brace">{</span>
+      <span class="json-key">"sku"</span>: <span class="json-str">"FLG-1180-SS"</span>,
+      <span class="json-key">"name"</span>: <span class="json-str">"Stainless Steel Flange PN16"</span>,
+      <span class="json-key">"quantity"</span>: <span class="json-num">24</span>,
+      <span class="json-key">"unitPrice"</span>: <span class="json-num">67.90</span>,
+      <span class="json-key">"currency"</span>: <span class="json-str">"EUR"</span>
+    <span class="json-brace">}</span>
+  <span class="json-brace">]</span>,
+  <span class="json-key">"totalAmount"</span>: <span class="json-num">5043.60</span>,
+  <span class="json-key">"shippingAddress"</span>: <span class="json-brace">{</span>
+    <span class="json-key">"street"</span>: <span class="json-str">"Industriestr. 42"</span>,
+    <span class="json-key">"city"</span>: <span class="json-str">"Stuttgart"</span>,
+    <span class="json-key">"zip"</span>: <span class="json-str">"70178"</span>,
+    <span class="json-key">"country"</span>: <span class="json-str">"DE"</span>
+  <span class="json-brace">}</span>,
+  <span class="json-key">"priority"</span>: <span class="json-str">"HIGH"</span>,
+  <span class="json-key">"paymentMethod"</span>: <span class="json-str">"invoice_30d"</span>
+<span class="json-brace">}</span></pre>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <!-- RIGHT: Message OUT / Error -->
+        <div class="detail-panel panel-error">
+          <div class="detail-panel-header">
+            <div class="panel-title">
+              <span class="arrow-out" style="font-size: 16px;">&#10007;</span>
+              Error at Processor #5
+              <span class="panel-tag" style="background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border);">FAILED</span>
+            </div>
+          </div>
+          <div class="detail-panel-body">
+
+            <!-- Error info -->
+            <div class="error-section">
+              <div class="error-badge-row">
+                <span class="error-http-badge">503</span>
+                <span class="error-class">java.net.http.HttpTimeoutException</span>
+              </div>
+
+              <div class="error-message-box">
+                request timed out after 30000ms &mdash; HTTP POST http://payment-api:8080/v2/charge returned 503 Service Unavailable after 4 retry attempts (backoff: 1s, 2s, 4s, 8s)
+              </div>
+
+              <div class="error-detail-grid">
+                <span class="error-detail-key">Endpoint</span>
+                <span class="error-detail-val">http://payment-api:8080/v2/charge</span>
+
+                <span class="error-detail-key">HTTP Method</span>
+                <span class="error-detail-val">POST</span>
+
+                <span class="error-detail-key">HTTP Status</span>
+                <span class="error-detail-val" style="color: var(--error); font-weight: 600;">503 Service Unavailable</span>
+
+                <span class="error-detail-key">Timeout</span>
+                <span class="error-detail-val">30,000ms (configured)</span>
+
+                <span class="error-detail-key">Retries</span>
+                <span class="error-detail-val">4 of 4 (exhausted)</span>
+
+                <span class="error-detail-key">Last Attempt</span>
+                <span class="error-detail-val">09:16:55.412 (after 8s backoff)</span>
+              </div>
+
+              <!-- Stack trace -->
+              <div class="stack-section">
+                <button class="stack-toggle">
+                  <span style="font-size: 9px;">&#9660;</span>
+                  Stack Trace (42 frames)
+                </button>
+                <div class="stack-content">
+<pre><span class="stack-highlight">java.net.http.HttpTimeoutException: request timed out after 30000ms</span>
+<span class="stack-at">    at java.net.http/jdk.internal.net.http.HttpClientImpl.send(HttpClientImpl.java:586)</span>
+<span class="stack-at">    at java.net.http/jdk.internal.net.http.HttpClientImpl.send(HttpClientImpl.java:538)</span>
+<span class="stack-at">    at org.apache.camel.component.http.HttpProducer.executeMethod(HttpProducer.java:347)</span>
+<span class="stack-at">    at org.apache.camel.component.http.HttpProducer.process(HttpProducer.java:198)</span>
+<span class="stack-at">    at org.apache.camel.processor.SendProcessor.process(SendProcessor.java:172)</span>
+<span class="stack-at">    at org.apache.camel.processor.errorhandler.RedeliveryErrorHandler.process(RedeliveryErrorHandler.java:614)</span>
+<span class="stack-at">    at org.apache.camel.processor.errorhandler.RedeliveryErrorHandler.processErrorHandler(RedeliveryErrorHandler.java:258)</span>
+<span class="stack-at">    at org.apache.camel.processor.CamelInternalProcessor.process(CamelInternalProcessor.java:399)</span>
+<span class="stack-at">    at org.apache.camel.processor.Pipeline.process(Pipeline.java:184)</span>
+<span class="stack-at">    at org.apache.camel.processor.Pipeline.process(Pipeline.java:74)</span>
+<span class="stack-at">    at org.apache.camel.impl.engine.DefaultReactiveExecutor$Worker.run(DefaultReactiveExecutor.java:182)</span>
+<span class="stack-at">    at org.apache.camel.impl.engine.DefaultReactiveExecutor.scheduleMain(DefaultReactiveExecutor.java:64)</span>
+<span class="stack-at">    at org.apache.camel.processor.Pipeline.process(Pipeline.java:184)</span>
+<span class="stack-at">    at org.apache.camel.spring.boot.SpringBootRoutesCollector.process(SpringBootRoutesCollector.java:89)</span>
+<span class="stack-cause">Caused by: java.net.ConnectException: Connection refused: payment-api:8080</span>
+<span class="stack-at">    at java.base/sun.nio.ch.Net.connect0(Native Method)</span>
+<span class="stack-at">    at java.base/sun.nio.ch.Net.connect(Net.java:579)</span>
+<span class="stack-at">    at java.base/sun.nio.ch.SocketChannelImpl.connect(SocketChannelImpl.java:726)</span>
+<span class="stack-at">    at java.net.http/jdk.internal.net.http.PlainHttpConnection.connectAsync(PlainHttpConnection.java:198)</span>
+<span class="stack-at">    ... 8 more</span></pre>
+                </div>
+              </div>
+            </div>
+
+            <!-- Response headers (from the 503) -->
+            <div class="headers-section" style="margin-top: 16px;">
+              <div class="section-label">
+                Response Headers <span class="count">4</span>
+              </div>
+              <div class="header-list">
+                <div class="header-row">
+                  <span class="header-key">Date</span>
+                  <span class="header-value">Mon, 17 Mar 2026 09:16:55 GMT</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">Content-Length</span>
+                  <span class="header-value">0</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">Retry-After</span>
+                  <span class="header-value">60</span>
+                </div>
+                <div class="header-row">
+                  <span class="header-key">X-Request-Id</span>
+                  <span class="header-value">pay-req-f42a8c91</span>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- ============================================================
+           4. PROPERTIES & CORRELATION
+           ============================================================ -->
+      <div class="props-section animate-in delay-3">
+        <div class="props-header">
+          <span class="props-title">Exchange Properties &amp; Context</span>
+          <span class="props-chevron">&#9660;</span>
+        </div>
+
+        <div class="props-body">
+          <!-- Column 1: Exchange Properties -->
+          <div class="props-column">
+            <div class="props-col-title">Exchange Properties</div>
+            <div class="prop-row">
+              <span class="prop-key">CamelCreatedTimestamp</span>
+              <span class="prop-val">2026-03-17T09:14:22.184Z</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">CamelExternalRedelivered</span>
+              <span class="prop-val">false</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">CamelToEndpoint</span>
+              <span class="prop-val">http://payment-api:8080/v2/charge</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">CamelFailureEndpoint</span>
+              <span class="prop-val">http://payment-api:8080/v2/charge</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">CamelRedeliveryCounter</span>
+              <span class="prop-val">4</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">CamelRedelivered</span>
+              <span class="prop-val">true</span>
+            </div>
+          </div>
+
+          <!-- Column 2: Route Context -->
+          <div class="props-column">
+            <div class="props-col-title">Route Context</div>
+            <div class="prop-row">
+              <span class="prop-key">CamelContext</span>
+              <span class="prop-val">order-service-ctx</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">Route ID</span>
+              <span class="prop-val">order-processing</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">Route Version</span>
+              <span class="prop-val">3.2.1-20260315</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">From Endpoint</span>
+              <span class="prop-val">direct:order-intake</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">Error Handler</span>
+              <span class="prop-val">DefaultErrorHandler</span>
+            </div>
+          </div>
+
+          <!-- Column 3: Environment -->
+          <div class="props-column">
+            <div class="props-col-title">Environment</div>
+            <div class="prop-row">
+              <span class="prop-key">Agent ID</span>
+              <span class="prop-val">prod-node-02</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">Hostname</span>
+              <span class="prop-val">order-svc-6f8d4b-xk2p9</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">JVM</span>
+              <span class="prop-val">Eclipse Temurin 17.0.10</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">Camel Version</span>
+              <span class="prop-val">4.4.1</span>
+            </div>
+            <div class="prop-row">
+              <span class="prop-key">Heap Used</span>
+              <span class="prop-val">412 MB / 1024 MB</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Correlation chain -->
+        <div class="correlation-chain">
+          <span class="chain-label">Correlation Chain</span>
+          <span class="chain-node current chain-error">
+            <span style="width: 5px; height: 5px; border-radius: 50; background: var(--error); display: inline-block;"></span>
+            order-processing
+          </span>
+          <span class="chain-arrow">&#8594;</span>
+          <span class="chain-node">
+            payment-flow
+          </span>
+          <span class="chain-arrow">&#8594;</span>
+          <span class="chain-node">
+            notification-sender
+          </span>
+        </div>
+      </div>
+
+    </div><!-- /content -->
+
+    <!-- Keyboard hints bar -->
+    <div class="keyboard-bar">
+      <div class="kb-hint"><span class="kb-key">&#8593;&#8595;</span> Navigate processors</div>
+      <div class="kb-hint"><span class="kb-key">Enter</span> Select processor</div>
+      <div class="kb-hint"><span class="kb-key">D</span> Toggle diff</div>
+      <div class="kb-hint"><span class="kb-key">J</span> View raw JSON</div>
+      <div class="kb-hint"><span class="kb-key">R</span> Retry exchange</div>
+      <div class="kb-hint"><span class="kb-key">Esc</span> Back to list</div>
+    </div>
+
+  </div><!-- /main -->
+</div><!-- /app -->
+
+<script>
+// Simple row selection for the timeline
+function selectRow(el, index) {
+  document.querySelectorAll('.timeline-row').forEach(function(row) {
+    row.classList.remove('selected');
+  });
+  el.classList.add('selected');
+}
+</script>
+
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-v3-metrics-dashboard.html b/docs/ui-mocks/mock-v3-metrics-dashboard.html
new file mode 100644
index 00000000..dc9e703d
--- /dev/null
+++ b/docs/ui-mocks/mock-v3-metrics-dashboard.html
@@ -0,0 +1,2177 @@
+<!--
+  ============================================================================
+  CAMELEER3 v3 — Metrics & KPI Dashboard (Light Theme)
+  ============================================================================
+
+  DESIGN NOTES
+  ============
+
+  PURPOSE:
+  A dedicated KPI/Metrics page focused on system-wide and per-route performance
+  metrics. Separate from the transaction list (v2), this page provides at-a-glance
+  system health, per-route performance comparison, and time-series trend analysis.
+
+  LAYOUT:
+  - Same 220px warm charcoal sidebar as v2 (with "Metrics" active)
+  - Same 48px topbar with breadcrumb: Dashboard > Metrics
+  - Scrollable main content with:
+    1. Time range selector bar + auto-refresh indicator
+    2. System Health KPI cards (5 large cards)
+    3. Per-Route Performance Table with sparklines
+    4. 2x2 Time-Series Chart grid (SVG, no libraries)
+    5. Live Event Feed panel (right rail, optional)
+
+  DESIGN SYSTEM (identical to v2-light):
+  - Surface: warm parchment #F5F2ED, cards #FFFFFF
+  - Sidebar: warm charcoal #2C2520
+  - Brand accent: amber-gold #C6820E
+  - Typography: DM Sans body + JetBrains Mono data
+  - Status: olive green #3D7C47, burnt orange #C27516, terracotta #C0392B, teal #1A7F8E
+  - Shadows, radii, border styles all from v2
+
+  DATA STORY:
+  - order-processing: high throughput, low latency, healthy
+  - payment-flow: moderate throughput, HIGHER latency (payment gateway), occasional errors
+  - shipment-notify: steady, fast
+  - inventory-check: fast, low volume
+  - customer-validation: moderate, stable
+  - email-notification: low volume, very fast
+  - retry-handler: LOW throughput but HIGH error rate (by design, retries failed messages)
+  - dead-letter-processor: very low volume, 100% "errors" (receives poison pills)
+
+  CHARTS:
+  All SVG inline, no external libraries. Sparklines in KPI cards and table.
+  Four large charts: throughput area, latency lines, error bars, volume heatmap.
+
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>Cameleer3 — Metrics Dashboard</title>
+<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@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ==========================================================================
+   RESET & FOUNDATIONS (identical to v2)
+   ========================================================================== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Surface palette (warm parchment) */
+  --bg-body:     #F5F2ED;
+  --bg-surface:  #FFFFFF;
+  --bg-raised:   #FAF8F5;
+  --bg-inset:    #F0EDE8;
+  --bg-hover:    #F5F0EA;
+
+  /* Sidebar (warm charcoal) */
+  --sidebar-bg:     #2C2520;
+  --sidebar-hover:  #3A322C;
+  --sidebar-active: #4A3F38;
+  --sidebar-text:   #BFB5A8;
+  --sidebar-muted:  #7A6F63;
+
+  /* Text */
+  --text-primary:   #1A1612;
+  --text-secondary: #5C5347;
+  --text-muted:     #9C9184;
+  --text-faint:     #C4BAB0;
+
+  /* Borders */
+  --border:        #E4DFD8;
+  --border-subtle: #EDE9E3;
+
+  /* Brand accent (amber-gold) */
+  --amber:       #C6820E;
+  --amber-light: #F0D9A8;
+  --amber-bg:    #FDF6E9;
+  --amber-deep:  #8B5A06;
+
+  /* Status colors (warm) */
+  --success:        #3D7C47;
+  --success-bg:     #EFF7F0;
+  --success-border: #C2DFC6;
+  --warning:        #C27516;
+  --warning-bg:     #FEF5E7;
+  --warning-border: #F0D9A8;
+  --error:          #C0392B;
+  --error-bg:       #FDF0EE;
+  --error-border:   #F0C4BE;
+  --running:        #1A7F8E;
+  --running-bg:     #E8F5F7;
+  --running-border: #B0DDE4;
+
+  /* Typography */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing & Radii */
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows */
+  --shadow-sm:   0 1px 2px rgba(44, 37, 32, 0.06);
+  --shadow-md:   0 2px 8px rgba(44, 37, 32, 0.08);
+  --shadow-lg:   0 4px 16px rgba(44, 37, 32, 0.10);
+  --shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
+
+  /* Chart palette (warm spectrum) */
+  --chart-1: #C6820E;  /* amber */
+  --chart-2: #3D7C47;  /* olive green */
+  --chart-3: #1A7F8E;  /* teal */
+  --chart-4: #C27516;  /* burnt orange */
+  --chart-5: #8B5A06;  /* deep amber */
+  --chart-6: #6B8E4E;  /* sage */
+  --chart-7: #C0392B;  /* terracotta */
+  --chart-8: #9C7A3C;  /* gold */
+}
+
+html { font-size: 14px; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-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-faint); }
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 124, 71, 0.35); }
+  50%      { box-shadow: 0 0 0 5px rgba(61, 124, 71, 0); }
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+.delay-1 { animation-delay: 0.04s; }
+.delay-2 { animation-delay: 0.08s; }
+.delay-3 { animation-delay: 0.12s; }
+.delay-4 { animation-delay: 0.16s; }
+.delay-5 { animation-delay: 0.20s; }
+
+/* ==========================================================================
+   LAYOUT
+   ========================================================================== */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   SIDEBAR (220px, warm charcoal — identical structure to v2)
+   ========================================================================== */
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-logo {
+  padding: 16px 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.sidebar-logo .brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--amber-light);
+  letter-spacing: -0.3px;
+}
+
+.sidebar-logo .version {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+  margin-left: 2px;
+}
+
+.sidebar-search { padding: 10px 12px; }
+
+.sidebar-search input {
+  width: 100%;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px 6px 28px;
+  color: var(--sidebar-text);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.sidebar-search input::placeholder { color: var(--sidebar-muted); }
+.sidebar-search input:focus { border-color: rgba(198, 130, 14, 0.4); }
+
+.sidebar-search-wrap { position: relative; }
+.sidebar-search-wrap .search-icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sidebar-muted);
+  font-size: 12px;
+}
+
+.sidebar-section {
+  padding: 14px 12px 5px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+}
+
+.sidebar-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--sidebar-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.12s;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  margin-bottom: 1px;
+}
+
+.sidebar-item:hover { background: var(--sidebar-hover); color: #E8DFD4; }
+.sidebar-item.active { background: var(--sidebar-active); color: var(--amber-light); border-left-color: var(--amber); }
+
+.sidebar-item .health {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
+.health-stale { background: var(--warning); }
+.health-dead { background: var(--sidebar-muted); }
+
+.sidebar-item .item-info { flex: 1; min-width: 0; }
+.sidebar-item .item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-item .item-meta { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
+
+.sidebar-item .item-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  background: rgba(255,255,255,0.06);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.sidebar-item.active .item-count { background: rgba(198, 130, 14, 0.2); color: var(--amber-light); }
+
+.sidebar-divider {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 6px 12px;
+}
+
+/* Agent health in sidebar */
+.sidebar-agents-header {
+  padding: 14px 12px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-agent-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: rgba(93, 184, 102, 0.15);
+  color: #5DB866;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  margin: 0 6px 2px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--sidebar-text);
+  transition: background 0.1s;
+}
+
+.agent-item:hover { background: var(--sidebar-hover); }
+
+.agent-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.agent-info { flex: 1; min-width: 0; }
+.agent-name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-detail { font-size: 10px; color: var(--sidebar-muted); }
+
+.agent-stats-col {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+}
+
+.agent-tps { color: var(--sidebar-text); }
+
+.sidebar-bottom {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 6px;
+}
+
+.sidebar-bottom .sidebar-item {
+  font-size: 12px;
+  color: var(--sidebar-muted);
+  border-left: 3px solid transparent;
+}
+
+.sidebar-bottom .sidebar-item:hover { color: var(--sidebar-text); }
+
+/* ==========================================================================
+   MAIN CONTENT AREA
+   ========================================================================== */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  height: 48px;
+  flex-shrink: 0;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topbar-breadcrumb .crumb-active { color: var(--text-primary); font-weight: 600; }
+.topbar-breadcrumb .crumb-sep { color: var(--text-faint); font-size: 11px; }
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-env {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.topbar-shift {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--running-bg);
+  color: var(--running);
+  border: 1px solid var(--running-border);
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.topbar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--amber-bg);
+  color: var(--amber);
+  font-weight: 600;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--amber-light);
+}
+
+/* Content scroll container */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px 40px;
+  min-width: 0;
+}
+
+/* ==========================================================================
+   TIME RANGE SELECTOR BAR
+   ========================================================================== */
+.time-range-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.time-range-pills {
+  display: flex;
+  gap: 4px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 3px;
+  box-shadow: var(--shadow-card);
+}
+
+.time-pill {
+  padding: 5px 14px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.12s;
+  background: none;
+  border: none;
+  font-family: var(--font-body);
+}
+
+.time-pill:hover { background: var(--bg-hover); }
+.time-pill.active {
+  background: var(--amber);
+  color: white;
+  font-weight: 600;
+}
+
+.refresh-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.auto-refresh {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.auto-refresh-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.refresh-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: all 0.15s;
+  box-shadow: var(--shadow-sm);
+}
+
+.refresh-btn:hover { border-color: var(--text-faint); background: var(--bg-raised); }
+
+.refresh-icon {
+  display: inline-block;
+  font-size: 12px;
+}
+
+.last-updated {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+/* ==========================================================================
+   KPI CARDS (System Health Overview)
+   ========================================================================== */
+.kpi-strip {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.kpi-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 16px 18px 12px;
+  box-shadow: var(--shadow-card);
+  position: relative;
+  overflow: hidden;
+  transition: box-shadow 0.15s;
+  cursor: pointer;
+}
+
+.kpi-card:hover { box-shadow: var(--shadow-md); }
+
+.kpi-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+}
+
+.kpi-card.card-amber::before  { background: linear-gradient(90deg, var(--amber), transparent); }
+.kpi-card.card-green::before  { background: linear-gradient(90deg, var(--success), transparent); }
+.kpi-card.card-error::before  { background: linear-gradient(90deg, var(--error), transparent); }
+.kpi-card.card-teal::before   { background: linear-gradient(90deg, var(--running), transparent); }
+.kpi-card.card-warn::before   { background: linear-gradient(90deg, var(--warning), transparent); }
+
+.kpi-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.kpi-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.kpi-value {
+  font-family: var(--font-mono);
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.kpi-value.val-amber  { color: var(--amber); }
+.kpi-value.val-green  { color: var(--success); }
+.kpi-value.val-error  { color: var(--error); }
+.kpi-value.val-teal   { color: var(--running); }
+.kpi-value.val-warn   { color: var(--warning); }
+
+.kpi-unit {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.kpi-trend {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.trend-up-good   { color: var(--success); }
+.trend-up-bad    { color: var(--error); }
+.trend-down-good { color: var(--success); }
+.trend-down-bad  { color: var(--error); }
+.trend-flat      { color: var(--text-muted); }
+
+.kpi-detail {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.kpi-detail strong { color: var(--text-secondary); }
+
+.kpi-sparkline {
+  margin-top: 8px;
+  height: 32px;
+}
+
+.kpi-sparkline svg { width: 100%; height: 100%; }
+
+/* Latency sub-values */
+.latency-values {
+  display: flex;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.latency-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.latency-label {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  letter-spacing: 0.5px;
+}
+
+.latency-val {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.latency-val.lat-green { color: var(--success); }
+.latency-val.lat-amber { color: var(--warning); }
+.latency-val.lat-red { color: var(--error); }
+
+.latency-trend {
+  font-family: var(--font-mono);
+  font-size: 9px;
+}
+
+/* Mini donut */
+.mini-donut-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.mini-donut { position: relative; width: 40px; height: 40px; }
+
+.donut-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.donut-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.donut-legend-active { color: var(--success); }
+
+/* ==========================================================================
+   PER-ROUTE PERFORMANCE TABLE
+   ========================================================================== */
+.table-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.table-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+
+.table-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+
+.table-scroll { overflow-x: auto; }
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  padding: 9px 14px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+
+th:hover { color: var(--text-secondary); }
+th.sorted { color: var(--amber); }
+.sort-arrow { font-size: 8px; margin-left: 3px; opacity: 0.4; }
+th.sorted .sort-arrow { opacity: 1; }
+
+tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.08s;
+  cursor: pointer;
+}
+
+tbody tr:last-child { border-bottom: none; }
+tbody tr:hover { background: var(--bg-hover); }
+
+td {
+  padding: 9px 14px;
+  font-size: 13px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.route-name-cell {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.route-name-cell:hover { color: var(--amber); }
+
+.route-group-cell {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.mono { font-family: var(--font-mono); }
+
+.cell-sparkline { display: inline-block; vertical-align: middle; }
+
+/* Latency cell color coding */
+.lat-cell { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
+.lat-fast   { color: var(--success); }
+.lat-normal { color: var(--text-primary); }
+.lat-slow   { color: var(--warning); }
+.lat-breach { color: var(--error); font-weight: 600; }
+
+/* Error rate cell */
+.err-rate { font-family: var(--font-mono); font-size: 12px; }
+.err-low  { color: var(--success); }
+.err-mid  { color: var(--warning); }
+.err-high { color: var(--error); font-weight: 600; }
+
+/* Status badge */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.status-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.status-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
+.status-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }
+
+.status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.drill-arrow {
+  color: var(--text-faint);
+  font-size: 11px;
+  transition: color 0.12s;
+}
+
+tbody tr:hover .drill-arrow { color: var(--amber); }
+
+/* ==========================================================================
+   CHART GRID (2x2)
+   ========================================================================== */
+.chart-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.chart-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.chart-card-header {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.chart-card-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.chart-card-subtitle {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.chart-body {
+  padding: 16px;
+  height: 220px;
+  position: relative;
+}
+
+.chart-body svg { width: 100%; height: 100%; }
+
+/* Chart elements */
+.chart-grid-line { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 3; }
+.chart-axis-line { stroke: var(--border); stroke-width: 1; }
+.chart-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-faint); }
+.chart-value-label { font-family: var(--font-mono); font-size: 8px; fill: var(--text-muted); }
+
+.sla-line { stroke: var(--error); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.5; }
+.sla-label-text { fill: var(--error); font-size: 8px; font-family: var(--font-mono); opacity: 0.6; }
+
+.sla-zone { fill: var(--error); opacity: 0.04; }
+
+/* Chart legend */
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 8px 16px 12px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.legend-dot {
+  width: 8px;
+  height: 3px;
+  border-radius: 1px;
+}
+
+/* Heatmap */
+.heatmap-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  height: 100%;
+}
+
+.heatmap-row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+}
+
+.heatmap-label {
+  width: 90px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-muted);
+  text-align: right;
+  padding-right: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.heatmap-cells {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+}
+
+.heatmap-cell {
+  flex: 1;
+  border-radius: 2px;
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.1s;
+  min-height: 16px;
+}
+
+.heatmap-cell:hover { transform: scale(1.15); z-index: 1; }
+
+.heatmap-hour-labels {
+  display: flex;
+  gap: 2px;
+  margin-left: 92px;
+  margin-top: 2px;
+}
+
+.heatmap-hour-label {
+  flex: 1;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  color: var(--text-faint);
+}
+
+/* Heatmap intensity scale */
+.heat-0 { background: var(--bg-inset); }
+.heat-1 { background: #FDF6E9; }
+.heat-2 { background: #F8E6C1; }
+.heat-3 { background: #F0D9A8; }
+.heat-4 { background: #E5C07A; }
+.heat-5 { background: #D4A24E; }
+.heat-6 { background: #C6820E; }
+.heat-7 { background: #A66A0A; }
+.heat-8 { background: #8B5A06; }
+
+.heatmap-scale {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 16px 10px;
+  justify-content: flex-end;
+}
+
+.heatmap-scale-label {
+  font-size: 9px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.heatmap-scale-cells {
+  display: flex;
+  gap: 2px;
+}
+
+.heatmap-scale-cell {
+  width: 12px;
+  height: 10px;
+  border-radius: 1px;
+}
+
+/* ==========================================================================
+   LIVE EVENT FEED
+   ========================================================================== */
+.live-feed-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.live-feed-header {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.live-feed-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.live-feed-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.live-feed-list {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.feed-item {
+  display: flex;
+  gap: 10px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.08s;
+  cursor: pointer;
+}
+
+.feed-item:hover { background: var(--bg-hover); }
+.feed-item:last-child { border-bottom: none; }
+
+.feed-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.feed-icon.feed-error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
+.feed-icon.feed-warn  { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
+.feed-icon.feed-info  { background: var(--running-bg); color: var(--running); border: 1px solid var(--running-border); }
+.feed-icon.feed-ok    { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+
+.feed-content { flex: 1; min-width: 0; }
+
+.feed-text {
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.feed-text strong { font-weight: 600; }
+.feed-text .feed-route { color: var(--amber); font-family: var(--font-mono); font-size: 11px; }
+
+.feed-meta {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin-top: 1px;
+}
+
+/* Utility */
+.mono { font-family: var(--font-mono); }
+</style>
+</head>
+<body>
+<div class="app">
+
+  <!-- ====================================================================
+       SIDEBAR (warm charcoal — identical to v2, "Metrics" highlighted)
+       ==================================================================== -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path style="fill:#C6820E" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
+      </svg>
+      <div>
+        <span class="brand">cameleer</span><span class="version">v3</span>
+      </div>
+    </div>
+
+    <div class="sidebar-search">
+      <div class="sidebar-search-wrap">
+        <span class="search-icon">&#9671;</span>
+        <input type="text" placeholder="Filter applications...">
+      </div>
+    </div>
+
+    <div class="sidebar-section">Navigation</div>
+
+    <div class="sidebar-items">
+      <div class="sidebar-item">
+        <span style="font-size: 13px; width: 18px; text-align: center;">&#9634;</span>
+        <div class="item-info"><div class="item-name">Transactions</div></div>
+      </div>
+
+      <div class="sidebar-item active">
+        <span style="font-size: 13px; width: 18px; text-align: center;">&#9670;</span>
+        <div class="item-info"><div class="item-name">Metrics</div></div>
+      </div>
+
+      <div class="sidebar-item">
+        <span style="font-size: 13px; width: 18px; text-align: center;">&#9740;</span>
+        <div class="item-info"><div class="item-name">Route Diagrams</div></div>
+      </div>
+
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-section">Applications</div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">order-service</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">1,847</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">payment-gateway</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">923</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">shipment-tracker</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">471</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info">
+          <div class="item-name">notification-hub</div>
+          <div class="item-meta">1 agent</div>
+        </div>
+        <span class="item-count">128</span>
+      </div>
+    </div>
+
+    <!-- Agent health section -->
+    <div class="sidebar-agents-header">
+      <span>Agents</span>
+      <span class="sidebar-agent-badge">4/4 live</span>
+    </div>
+
+    <div style="padding: 0 0 6px; overflow-y: auto; max-height: 180px;">
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-1</div>
+          <div class="agent-detail">order-service v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">14.2/s</div>
+          <div>12s ago</div>
+        </div>
+      </div>
+
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-2</div>
+          <div class="agent-detail">payment-svc v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">11.8/s</div>
+          <div style="color: var(--error);">3 err/h</div>
+        </div>
+      </div>
+
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-3</div>
+          <div class="agent-detail">shipment-svc v3.2.0</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">12.1/s</div>
+          <div>5s ago</div>
+        </div>
+      </div>
+
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-4</div>
+          <div class="agent-detail">notif-hub v3.1.8</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">9.1/s</div>
+          <div>3s ago</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9881;</span><div class="item-info"><div class="item-name">Admin</div></div></div>
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9776;</span><div class="item-info"><div class="item-name">API Docs</div></div></div>
+    </div>
+  </aside>
+
+  <!-- ====================================================================
+       MAIN CONTENT
+       ==================================================================== -->
+  <div class="main">
+    <!-- Top bar -->
+    <div class="topbar">
+      <div class="topbar-breadcrumb">
+        <span>Dashboard</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-active">Metrics</span>
+      </div>
+
+      <div class="topbar-right">
+        <span class="topbar-env">PRODUCTION</span>
+        <span class="topbar-shift">Shift: Day (06:00-18:00)</span>
+        <div class="topbar-user">
+          <span>hendrik</span>
+          <div class="topbar-avatar">H</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scrollable content area -->
+    <div class="content">
+
+      <!-- Time range selector bar -->
+      <div class="time-range-bar animate-in">
+        <div class="time-range-pills">
+          <button class="time-pill">1h</button>
+          <button class="time-pill active">6h</button>
+          <button class="time-pill">24h</button>
+          <button class="time-pill">7d</button>
+          <button class="time-pill">30d</button>
+          <button class="time-pill">Custom</button>
+        </div>
+        <div class="refresh-group">
+          <div class="auto-refresh">
+            <span class="auto-refresh-dot"></span>
+            Auto-refresh: 30s
+          </div>
+          <button class="refresh-btn">
+            <span class="refresh-icon">&#8635;</span>
+            Refresh
+          </button>
+          <span class="last-updated">Updated 4s ago</span>
+        </div>
+      </div>
+
+      <!-- ================================================================
+           KPI CARDS — System Health Overview
+           ================================================================ -->
+      <div class="kpi-strip animate-in delay-1">
+
+        <!-- Card 1: Total Throughput -->
+        <div class="kpi-card card-amber">
+          <div class="kpi-label">Total Throughput</div>
+          <div class="kpi-value-row">
+            <span class="kpi-value val-amber">2,847</span>
+            <span class="kpi-unit">msg/min</span>
+            <span class="kpi-trend trend-up-good">&#9650; +8%</span>
+          </div>
+          <div class="kpi-detail"><strong>47.5</strong> msg/s &middot; Capacity 39%</div>
+          <div class="kpi-sparkline">
+            <svg viewBox="0 0 200 32" preserveAspectRatio="none">
+              <polyline points="0,28 8,26 16,24 24,25 32,22 40,20 48,21 56,18 64,16 72,17 80,15 88,13 96,14 104,12 112,10 120,11 128,9 136,8 144,10 152,7 160,6 168,8 176,5 184,4 192,6 200,3" fill="none" stroke="#C6820E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              <linearGradient id="sparkGrad1" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#C6820E" stop-opacity="0.2"/>
+                <stop offset="100%" stop-color="#C6820E" stop-opacity="0"/>
+              </linearGradient>
+              <polyline points="0,28 8,26 16,24 24,25 32,22 40,20 48,21 56,18 64,16 72,17 80,15 88,13 96,14 104,12 112,10 120,11 128,9 136,8 144,10 152,7 160,6 168,8 176,5 184,4 192,6 200,3 200,32 0,32" fill="url(#sparkGrad1)"/>
+            </svg>
+          </div>
+        </div>
+
+        <!-- Card 2: System Error Rate -->
+        <div class="kpi-card card-green">
+          <div class="kpi-label">System Error Rate</div>
+          <div class="kpi-value-row">
+            <span class="kpi-value val-green">0.82%</span>
+            <span class="kpi-trend trend-down-good">&#9660; -0.1%</span>
+          </div>
+          <div class="kpi-detail"><strong>94</strong> errors / <strong>11,482</strong> total (6h)</div>
+          <div class="kpi-sparkline">
+            <svg viewBox="0 0 200 32" preserveAspectRatio="none">
+              <polyline points="0,18 8,17 16,19 24,16 32,15 40,17 48,14 56,16 64,13 72,15 80,12 88,14 96,11 104,13 112,10 120,12 128,14 136,11 144,13 152,10 160,12 168,10 176,11 184,9 192,10 200,8" fill="none" stroke="#3D7C47" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              <linearGradient id="sparkGrad2" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#3D7C47" stop-opacity="0.15"/>
+                <stop offset="100%" stop-color="#3D7C47" stop-opacity="0"/>
+              </linearGradient>
+              <polyline points="0,18 8,17 16,19 24,16 32,15 40,17 48,14 56,16 64,13 72,15 80,12 88,14 96,11 104,13 112,10 120,12 128,14 136,11 144,13 152,10 160,12 168,10 176,11 184,9 192,10 200,8 200,32 0,32" fill="url(#sparkGrad2)"/>
+            </svg>
+          </div>
+        </div>
+
+        <!-- Card 3: Avg Latency (P50/P95/P99) -->
+        <div class="kpi-card card-warn">
+          <div class="kpi-label">Latency Percentiles</div>
+          <div class="latency-values">
+            <div class="latency-item">
+              <span class="latency-label">P50</span>
+              <span class="latency-val lat-green">42ms</span>
+              <span class="latency-trend trend-down-good">&#9660;3</span>
+            </div>
+            <div class="latency-item">
+              <span class="latency-label">P95</span>
+              <span class="latency-val lat-amber">187ms</span>
+              <span class="latency-trend trend-up-bad">&#9650;12</span>
+            </div>
+            <div class="latency-item">
+              <span class="latency-label">P99</span>
+              <span class="latency-val lat-red">312ms</span>
+              <span class="latency-trend trend-up-bad">&#9650;28</span>
+            </div>
+          </div>
+          <div class="kpi-detail" style="margin-top:6px;">SLA: &lt;300ms P99 &middot; <strong style="color:var(--error);">BREACH</strong></div>
+        </div>
+
+        <!-- Card 4: Active Routes (mini donut) -->
+        <div class="kpi-card card-teal">
+          <div class="kpi-label">Active Routes</div>
+          <div class="kpi-value-row">
+            <span class="kpi-value val-teal">7</span>
+            <span class="kpi-unit">of 8</span>
+            <span class="kpi-trend trend-flat">&#8596; stable</span>
+          </div>
+          <div class="mini-donut-wrap">
+            <div class="mini-donut">
+              <svg viewBox="0 0 36 36" width="40" height="40">
+                <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--bg-inset)" stroke-width="3"/>
+                <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--running)" stroke-width="3"
+                  stroke-dasharray="87.5 12.5" stroke-dashoffset="25" stroke-linecap="round"/>
+              </svg>
+              <span class="donut-label">88%</span>
+            </div>
+            <div class="donut-legend">
+              <span class="donut-legend-active">7 active</span>
+              <span>1 stopped</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 5: In-Flight Exchanges -->
+        <div class="kpi-card card-amber">
+          <div class="kpi-label">In-Flight Exchanges</div>
+          <div class="kpi-value-row">
+            <span class="kpi-value">23</span>
+            <span class="kpi-trend trend-flat">&#8596;</span>
+          </div>
+          <div class="kpi-detail">High-water: <strong>67</strong> (2h ago)</div>
+          <div class="kpi-sparkline">
+            <svg viewBox="0 0 200 32" preserveAspectRatio="none">
+              <polyline points="0,16 8,14 16,18 24,12 32,10 40,15 48,8 56,6 64,4 72,3 80,2 88,4 96,6 104,8 112,10 120,12 128,14 136,16 144,18 152,20 160,18 168,16 176,18 184,20 192,18 200,17" fill="none" stroke="#C6820E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              <linearGradient id="sparkGrad5" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#C6820E" stop-opacity="0.15"/>
+                <stop offset="100%" stop-color="#C6820E" stop-opacity="0"/>
+              </linearGradient>
+              <polyline points="0,16 8,14 16,18 24,12 32,10 40,15 48,8 56,6 64,4 72,3 80,2 88,4 96,6 104,8 112,10 120,12 128,14 136,16 144,18 152,20 160,18 168,16 176,18 184,20 192,18 200,17 200,32 0,32" fill="url(#sparkGrad5)"/>
+              <!-- High-water mark line -->
+              <line x1="78" y1="0" x2="78" y2="32" stroke="var(--error)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5"/>
+              <text x="80" y="7" font-family="var(--font-mono)" font-size="6" fill="var(--error)" opacity="0.6">67</text>
+            </svg>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- ================================================================
+           PER-ROUTE PERFORMANCE TABLE
+           ================================================================ -->
+      <div class="table-section animate-in delay-2">
+        <div class="table-header">
+          <span class="table-title">Per-Route Performance</span>
+          <div class="table-right">
+            <span class="table-meta">8 routes &middot; last 6h</span>
+          </div>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th style="width:180px">Route</th>
+                <th>Trend (1h)</th>
+                <th class="sorted">Throughput <span class="sort-arrow">&#9660;</span></th>
+                <th>Error Rate</th>
+                <th>P50</th>
+                <th>P95</th>
+                <th>P99</th>
+                <th style="text-align:right">Success</th>
+                <th style="text-align:right">Failed</th>
+                <th style="width:80px">Status</th>
+                <th style="width:30px"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- Row 1: order-processing — high throughput, healthy -->
+              <tr>
+                <td>
+                  <div class="route-name-cell">order-processing</div>
+                  <div class="route-group-cell">order-service</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,14 8,12 16,10 24,11 32,8 40,9 48,7 56,6 64,7 72,5 80,4" fill="none" stroke="var(--chart-1)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;font-weight:600;">842</span> <span style="font-size:10px;color:var(--text-muted);">msg/min</span></td>
+                <td><span class="err-rate err-low">0.2%</span></td>
+                <td><span class="lat-cell lat-fast">28ms</span></td>
+                <td><span class="lat-cell lat-fast">94ms</span></td>
+                <td><span class="lat-cell lat-normal">156ms</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--success);">4,987</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--error);">10</span></td>
+                <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+              <!-- Row 2: payment-flow — higher latency, some errors -->
+              <tr>
+                <td>
+                  <div class="route-name-cell">payment-flow</div>
+                  <div class="route-group-cell">payment-gateway</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,10 8,11 16,9 24,12 32,10 40,8 48,10 56,9 64,11 72,8 80,7" fill="none" stroke="var(--chart-2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;font-weight:600;">524</span> <span style="font-size:10px;color:var(--text-muted);">msg/min</span></td>
+                <td><span class="err-rate err-mid">2.1%</span></td>
+                <td><span class="lat-cell lat-normal">89ms</span></td>
+                <td><span class="lat-cell lat-slow">245ms</span></td>
+                <td><span class="lat-cell lat-breach">412ms</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--success);">3,078</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--error);">66</span></td>
+                <td><span class="status-badge status-warning"><span class="status-dot"></span>SLA</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+              <!-- Row 3: shipment-notify — steady, fast -->
+              <tr>
+                <td>
+                  <div class="route-name-cell">shipment-notify</div>
+                  <div class="route-group-cell">shipment-tracker</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,10 8,10 16,9 24,10 32,10 40,9 48,10 56,9 64,10 72,9 80,10" fill="none" stroke="var(--chart-3)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;font-weight:600;">471</span> <span style="font-size:10px;color:var(--text-muted);">msg/min</span></td>
+                <td><span class="err-rate err-low">0.1%</span></td>
+                <td><span class="lat-cell lat-fast">18ms</span></td>
+                <td><span class="lat-cell lat-fast">52ms</span></td>
+                <td><span class="lat-cell lat-fast">87ms</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--success);">2,823</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--error);">3</span></td>
+                <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+              <!-- Row 4: inventory-check — fast, low volume -->
+              <tr>
+                <td>
+                  <div class="route-name-cell">inventory-check</div>
+                  <div class="route-group-cell">order-service</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,12 8,13 16,11 24,14 32,12 40,13 48,11 56,12 64,13 72,11 80,12" fill="none" stroke="var(--chart-4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;font-weight:600;">389</span> <span style="font-size:10px;color:var(--text-muted);">msg/min</span></td>
+                <td><span class="err-rate err-low">0.3%</span></td>
+                <td><span class="lat-cell lat-fast">12ms</span></td>
+                <td><span class="lat-cell lat-fast">34ms</span></td>
+                <td><span class="lat-cell lat-fast">61ms</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--success);">2,327</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--error);">7</span></td>
+                <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+              <!-- Row 5: customer-validation — moderate, stable -->
+              <tr>
+                <td>
+                  <div class="route-name-cell">customer-validation</div>
+                  <div class="route-group-cell">order-service</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,8 8,10 16,9 24,8 32,10 40,9 48,10 56,8 64,9 72,10 80,9" fill="none" stroke="var(--chart-5)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;font-weight:600;">312</span> <span style="font-size:10px;color:var(--text-muted);">msg/min</span></td>
+                <td><span class="err-rate err-low">0.5%</span></td>
+                <td><span class="lat-cell lat-fast">35ms</span></td>
+                <td><span class="lat-cell lat-normal">112ms</span></td>
+                <td><span class="lat-cell lat-normal">178ms</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--success);">1,863</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--error);">9</span></td>
+                <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+              <!-- Row 6: email-notification — low volume, very fast -->
+              <tr>
+                <td>
+                  <div class="route-name-cell">email-notification</div>
+                  <div class="route-group-cell">notification-hub</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,14 8,15 16,13 24,14 32,16 40,14 48,15 56,13 64,14 72,15 80,14" fill="none" stroke="var(--chart-6)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;font-weight:600;">201</span> <span style="font-size:10px;color:var(--text-muted);">msg/min</span></td>
+                <td><span class="err-rate err-low">0.0%</span></td>
+                <td><span class="lat-cell lat-fast">8ms</span></td>
+                <td><span class="lat-cell lat-fast">21ms</span></td>
+                <td><span class="lat-cell lat-fast">38ms</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--success);">1,206</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--text-faint);">0</span></td>
+                <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+              <!-- Row 7: retry-handler — low throughput, HIGH error rate -->
+              <tr>
+                <td>
+                  <div class="route-name-cell">retry-handler</div>
+                  <div class="route-group-cell">order-service</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,10 8,8 16,12 24,6 32,10 40,4 48,8 56,6 64,10 72,4 80,8" fill="none" stroke="var(--chart-7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;font-weight:600;">78</span> <span style="font-size:10px;color:var(--text-muted);">msg/min</span></td>
+                <td><span class="err-rate err-high">12.8%</span></td>
+                <td><span class="lat-cell lat-slow">210ms</span></td>
+                <td><span class="lat-cell lat-breach">890ms</span></td>
+                <td><span class="lat-cell lat-breach">2,140ms</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--success);">408</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--error);">60</span></td>
+                <td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+              <!-- Row 8: dead-letter-processor — very low, all "errors" -->
+              <tr>
+                <td>
+                  <div class="route-name-cell" style="color:var(--text-muted);">dead-letter-processor</div>
+                  <div class="route-group-cell">order-service</div>
+                </td>
+                <td>
+                  <span class="cell-sparkline">
+                    <svg width="80" height="20" viewBox="0 0 80 20">
+                      <polyline points="0,16 8,16 16,14 24,16 32,15 40,16 48,14 56,16 64,15 72,16 80,16" fill="none" stroke="var(--text-faint)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 2"/>
+                    </svg>
+                  </span>
+                </td>
+                <td><span class="mono" style="font-size:12px;color:var(--text-muted);">0</span> <span style="font-size:10px;color:var(--text-faint);">msg/min</span></td>
+                <td><span class="err-rate" style="color:var(--text-faint);">-- %</span></td>
+                <td><span class="lat-cell" style="color:var(--text-faint);">--</span></td>
+                <td><span class="lat-cell" style="color:var(--text-faint);">--</span></td>
+                <td><span class="lat-cell" style="color:var(--text-faint);">--</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--text-faint);">0</span></td>
+                <td style="text-align:right"><span class="mono" style="font-size:12px;color:var(--text-faint);">0</span></td>
+                <td><span class="status-badge" style="background:var(--bg-inset);color:var(--text-faint);border:1px solid var(--border);"><span class="status-dot"></span>STOP</span></td>
+                <td><span class="drill-arrow">&#9656;</span></td>
+              </tr>
+
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- ================================================================
+           TIME-SERIES CHARTS (2x2 grid)
+           ================================================================ -->
+      <div class="chart-grid animate-in delay-3">
+
+        <!-- Chart 1: Throughput Over Time (stacked area) -->
+        <div class="chart-card">
+          <div class="chart-card-header">
+            <div>
+              <div class="chart-card-title">Throughput Over Time</div>
+              <div class="chart-card-subtitle">Messages/min by route &middot; last 6h</div>
+            </div>
+          </div>
+          <div class="chart-body">
+            <svg viewBox="0 0 600 180" preserveAspectRatio="none">
+              <!-- Grid lines -->
+              <line x1="40" y1="10" x2="580" y2="10" class="chart-grid-line"/>
+              <line x1="40" y1="52" x2="580" y2="52" class="chart-grid-line"/>
+              <line x1="40" y1="94" x2="580" y2="94" class="chart-grid-line"/>
+              <line x1="40" y1="136" x2="580" y2="136" class="chart-grid-line"/>
+              <line x1="40" y1="170" x2="580" y2="170" class="chart-axis-line"/>
+
+              <!-- Y-axis labels -->
+              <text x="36" y="14" class="chart-label" text-anchor="end">3k</text>
+              <text x="36" y="56" class="chart-label" text-anchor="end">2k</text>
+              <text x="36" y="98" class="chart-label" text-anchor="end">1k</text>
+              <text x="36" y="140" class="chart-label" text-anchor="end">500</text>
+              <text x="36" y="174" class="chart-label" text-anchor="end">0</text>
+
+              <!-- X-axis labels -->
+              <text x="40" y="180" class="chart-label">03:00</text>
+              <text x="130" y="180" class="chart-label">04:00</text>
+              <text x="220" y="180" class="chart-label">05:00</text>
+              <text x="310" y="180" class="chart-label">06:00</text>
+              <text x="400" y="180" class="chart-label">07:00</text>
+              <text x="490" y="180" class="chart-label">08:00</text>
+              <text x="565" y="180" class="chart-label">09:14</text>
+
+              <!-- Stacked areas (bottom to top: email, inventory, shipment, customer, payment, order) -->
+              <!-- Layer 1: order-processing (amber) -->
+              <polygon points="40,170 85,165 130,160 175,155 220,145 265,130 310,105 355,90 400,75 445,65 490,55 535,50 580,45 580,170" fill="#C6820E" opacity="0.3"/>
+              <polyline points="40,170 85,165 130,160 175,155 220,145 265,130 310,105 355,90 400,75 445,65 490,55 535,50 580,45" fill="none" stroke="#C6820E" stroke-width="1.5"/>
+
+              <!-- Layer 2: payment-flow (olive green) -->
+              <polygon points="40,170 85,168 130,166 175,163 220,158 265,150 310,135 355,125 400,112 445,104 490,96 535,92 580,88 580,170" fill="#3D7C47" opacity="0.25"/>
+              <polyline points="40,170 85,168 130,166 175,163 220,158 265,150 310,135 355,125 400,112 445,104 490,96 535,92 580,88" fill="none" stroke="#3D7C47" stroke-width="1.5"/>
+
+              <!-- Layer 3: shipment-notify (teal) -->
+              <polygon points="40,170 85,169 130,168 175,167 220,164 265,158 310,148 355,140 400,132 445,126 490,120 535,117 580,114 580,170" fill="#1A7F8E" opacity="0.25"/>
+              <polyline points="40,170 85,169 130,168 175,167 220,164 265,158 310,148 355,140 400,132 445,126 490,120 535,117 580,114" fill="none" stroke="#1A7F8E" stroke-width="1.5"/>
+
+              <!-- Layer 4: other routes combined (burnt orange, thin) -->
+              <polygon points="40,170 85,169 130,169 175,168 220,167 265,164 310,158 355,152 400,146 445,141 490,136 535,134 580,132 580,170" fill="#C27516" opacity="0.15"/>
+              <polyline points="40,170 85,169 130,169 175,168 220,167 265,164 310,158 355,152 400,146 445,141 490,136 535,134 580,132" fill="none" stroke="#C27516" stroke-width="1" stroke-dasharray="3 2"/>
+            </svg>
+          </div>
+          <div class="chart-legend">
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-1);"></div>order-processing</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-2);"></div>payment-flow</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-3);"></div>shipment-notify</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-4);"></div>others (combined)</div>
+          </div>
+        </div>
+
+        <!-- Chart 2: Latency Percentiles (line chart) -->
+        <div class="chart-card">
+          <div class="chart-card-header">
+            <div>
+              <div class="chart-card-title">Latency Percentiles</div>
+              <div class="chart-card-subtitle">P50 / P95 / P99 &middot; last 6h</div>
+            </div>
+          </div>
+          <div class="chart-body">
+            <svg viewBox="0 0 600 180" preserveAspectRatio="none">
+              <!-- Grid -->
+              <line x1="40" y1="10" x2="580" y2="10" class="chart-grid-line"/>
+              <line x1="40" y1="52" x2="580" y2="52" class="chart-grid-line"/>
+              <line x1="40" y1="94" x2="580" y2="94" class="chart-grid-line"/>
+              <line x1="40" y1="136" x2="580" y2="136" class="chart-grid-line"/>
+              <line x1="40" y1="170" x2="580" y2="170" class="chart-axis-line"/>
+
+              <!-- Y-axis (ms) -->
+              <text x="36" y="14" class="chart-label" text-anchor="end">500</text>
+              <text x="36" y="56" class="chart-label" text-anchor="end">375</text>
+              <text x="36" y="98" class="chart-label" text-anchor="end">250</text>
+              <text x="36" y="140" class="chart-label" text-anchor="end">125</text>
+              <text x="36" y="174" class="chart-label" text-anchor="end">0</text>
+
+              <!-- X-axis -->
+              <text x="40" y="180" class="chart-label">03:00</text>
+              <text x="130" y="180" class="chart-label">04:00</text>
+              <text x="220" y="180" class="chart-label">05:00</text>
+              <text x="310" y="180" class="chart-label">06:00</text>
+              <text x="400" y="180" class="chart-label">07:00</text>
+              <text x="490" y="180" class="chart-label">08:00</text>
+              <text x="565" y="180" class="chart-label">09:14</text>
+
+              <!-- SLA threshold at 300ms = y ~74 -->
+              <rect x="40" y="10" width="540" height="64" class="sla-zone"/>
+              <line x1="40" y1="74" x2="580" y2="74" class="sla-line"/>
+              <text x="582" y="72" class="sla-label-text">SLA 300ms</text>
+
+              <!-- P99 line (red, most volatile) -->
+              <polyline points="40,100 85,95 130,88 175,82 220,78 265,72 310,68 355,62 400,58 445,55 490,52 535,48 580,42" fill="none" stroke="var(--error)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+              <!-- P95 line (amber) -->
+              <polyline points="40,128 85,126 130,122 175,118 220,114 265,110 310,106 355,102 400,98 445,96 490,94 535,92 580,90" fill="none" stroke="var(--warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+              <!-- P50 line (green, stable at bottom) -->
+              <polyline points="40,158 85,157 130,156 175,155 220,154 265,153 310,152 355,152 400,151 445,150 490,150 535,149 580,148" fill="none" stroke="var(--success)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+              <!-- Current value labels -->
+              <text x="582" y="44" class="chart-value-label" fill="var(--error)">312ms</text>
+              <text x="582" y="92" class="chart-value-label" fill="var(--warning)">187ms</text>
+              <text x="582" y="150" class="chart-value-label" fill="var(--success)">42ms</text>
+            </svg>
+          </div>
+          <div class="chart-legend">
+            <div class="legend-item"><div class="legend-dot" style="background:var(--success);"></div>P50</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--warning);"></div>P95</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--error);"></div>P99</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--error); opacity:0.3;"></div>SLA threshold (300ms)</div>
+          </div>
+        </div>
+
+        <!-- Chart 3: Error Rate by Route (stacked bar chart) -->
+        <div class="chart-card">
+          <div class="chart-card-header">
+            <div>
+              <div class="chart-card-title">Errors by Route</div>
+              <div class="chart-card-subtitle">15-min buckets &middot; last 6h</div>
+            </div>
+          </div>
+          <div class="chart-body">
+            <svg viewBox="0 0 600 180" preserveAspectRatio="none">
+              <!-- Grid -->
+              <line x1="40" y1="10" x2="580" y2="10" class="chart-grid-line"/>
+              <line x1="40" y1="52" x2="580" y2="52" class="chart-grid-line"/>
+              <line x1="40" y1="94" x2="580" y2="94" class="chart-grid-line"/>
+              <line x1="40" y1="136" x2="580" y2="136" class="chart-grid-line"/>
+              <line x1="40" y1="170" x2="580" y2="170" class="chart-axis-line"/>
+
+              <!-- Y-axis -->
+              <text x="36" y="14" class="chart-label" text-anchor="end">20</text>
+              <text x="36" y="56" class="chart-label" text-anchor="end">15</text>
+              <text x="36" y="98" class="chart-label" text-anchor="end">10</text>
+              <text x="36" y="140" class="chart-label" text-anchor="end">5</text>
+              <text x="36" y="174" class="chart-label" text-anchor="end">0</text>
+
+              <!-- X-axis -->
+              <text x="40" y="180" class="chart-label">03:00</text>
+              <text x="130" y="180" class="chart-label">04:00</text>
+              <text x="220" y="180" class="chart-label">05:00</text>
+              <text x="310" y="180" class="chart-label">06:00</text>
+              <text x="400" y="180" class="chart-label">07:00</text>
+              <text x="490" y="180" class="chart-label">08:00</text>
+              <text x="565" y="180" class="chart-label">09:14</text>
+
+              <!-- Stacked bars (24 bars over 6 hours, 15-min each) -->
+              <!-- Low activity early morning (03:00-06:00) -->
+              <!-- Bar group 1: 03:00 -->
+              <rect x="44" y="162" width="16" height="8" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="44" y="166" width="16" height="4" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 03:15 -->
+              <rect x="66" y="166" width="16" height="4" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 03:30 -->
+              <rect x="88" y="162" width="16" height="8" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 03:45 -->
+              <rect x="110" y="164" width="16" height="6" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 04:00 -->
+              <rect x="132" y="158" width="16" height="12" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="132" y="162" width="16" height="8" rx="1" fill="var(--chart-1)" opacity="0.5"/>
+
+              <!-- 04:15 -->
+              <rect x="154" y="164" width="16" height="6" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 04:30 -->
+              <rect x="176" y="160" width="16" height="10" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 04:45 -->
+              <rect x="198" y="162" width="16" height="8" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 05:00 -->
+              <rect x="220" y="158" width="16" height="12" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="220" y="164" width="16" height="6" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 05:15 -->
+              <rect x="242" y="164" width="16" height="6" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 05:30 -->
+              <rect x="264" y="162" width="16" height="8" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 05:45 -->
+              <rect x="286" y="160" width="16" height="10" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+
+              <!-- 06:00 — shift start, traffic ramp up -->
+              <rect x="308" y="148" width="16" height="22" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="308" y="154" width="16" height="16" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+              <rect x="308" y="160" width="16" height="10" rx="1" fill="var(--chart-1)" opacity="0.5"/>
+
+              <!-- 06:15 -->
+              <rect x="330" y="152" width="16" height="18" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="330" y="158" width="16" height="12" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 06:30 -->
+              <rect x="352" y="144" width="16" height="26" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="352" y="150" width="16" height="20" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+              <rect x="352" y="158" width="16" height="12" rx="1" fill="var(--chart-1)" opacity="0.5"/>
+
+              <!-- 06:45 -->
+              <rect x="374" y="150" width="16" height="20" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="374" y="156" width="16" height="14" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 07:00 — peak errors -->
+              <rect x="396" y="130" width="16" height="40" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="396" y="140" width="16" height="30" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+              <rect x="396" y="150" width="16" height="20" rx="1" fill="var(--chart-1)" opacity="0.5"/>
+              <rect x="396" y="158" width="16" height="12" rx="1" fill="var(--chart-3)" opacity="0.5"/>
+
+              <!-- 07:15 -->
+              <rect x="418" y="138" width="16" height="32" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="418" y="146" width="16" height="24" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+              <rect x="418" y="156" width="16" height="14" rx="1" fill="var(--chart-1)" opacity="0.5"/>
+
+              <!-- 07:30 -->
+              <rect x="440" y="142" width="16" height="28" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="440" y="150" width="16" height="20" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 07:45 -->
+              <rect x="462" y="148" width="16" height="22" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="462" y="156" width="16" height="14" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 08:00 -->
+              <rect x="484" y="144" width="16" height="26" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="484" y="152" width="16" height="18" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+              <rect x="484" y="160" width="16" height="10" rx="1" fill="var(--chart-1)" opacity="0.5"/>
+
+              <!-- 08:15 -->
+              <rect x="506" y="150" width="16" height="20" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="506" y="158" width="16" height="12" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 08:30 -->
+              <rect x="528" y="154" width="16" height="16" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="528" y="160" width="16" height="10" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 08:45 -->
+              <rect x="550" y="156" width="16" height="14" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="550" y="162" width="16" height="8" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- 09:00 (current, partial) -->
+              <rect x="572" y="158" width="8" height="12" rx="1" fill="var(--chart-7)" opacity="0.8"/>
+              <rect x="572" y="162" width="8" height="8" rx="1" fill="var(--chart-2)" opacity="0.6"/>
+
+              <!-- Total errors overlay line -->
+              <polyline points="52,164 74,168 96,164 118,166 140,160 162,166 184,162 206,164 228,160 250,166 272,164 294,162 316,150 338,154 360,146 382,152 404,132 426,140 448,144 470,150 492,146 514,152 536,156 558,158 576,160" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" stroke-dasharray="4 2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+          <div class="chart-legend">
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-7);"></div>retry-handler</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-2);"></div>payment-flow</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-1);"></div>order-processing</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--chart-3);"></div>shipment-notify</div>
+            <div class="legend-item"><div class="legend-dot" style="background:var(--text-secondary); height:1px; border-top: 1.5px dashed var(--text-secondary); width:12px;"></div>total (overlay)</div>
+          </div>
+        </div>
+
+        <!-- Chart 4: Exchange Volume Heatmap -->
+        <div class="chart-card">
+          <div class="chart-card-header">
+            <div>
+              <div class="chart-card-title">Exchange Volume Heatmap</div>
+              <div class="chart-card-subtitle">Hourly volume by route &middot; last 6h</div>
+            </div>
+          </div>
+          <div class="chart-body" style="padding: 12px 16px;">
+            <div class="heatmap-grid">
+              <!-- Row: order-processing -->
+              <div class="heatmap-row">
+                <div class="heatmap-label">order-proc</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-2" title="03:00 — 142"></div>
+                  <div class="heatmap-cell heat-3" title="04:00 — 287"></div>
+                  <div class="heatmap-cell heat-4" title="05:00 — 456"></div>
+                  <div class="heatmap-cell heat-7" title="06:00 — 812"></div>
+                  <div class="heatmap-cell heat-8" title="07:00 — 923"></div>
+                  <div class="heatmap-cell heat-8" title="08:00 — 891"></div>
+                  <div class="heatmap-cell heat-6" title="09:00 — 653 (partial)"></div>
+                </div>
+              </div>
+
+              <!-- Row: payment-flow -->
+              <div class="heatmap-row">
+                <div class="heatmap-label">payment-flow</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-1" title="03:00 — 68"></div>
+                  <div class="heatmap-cell heat-2" title="04:00 — 134"></div>
+                  <div class="heatmap-cell heat-3" title="05:00 — 245"></div>
+                  <div class="heatmap-cell heat-6" title="06:00 — 587"></div>
+                  <div class="heatmap-cell heat-7" title="07:00 — 712"></div>
+                  <div class="heatmap-cell heat-6" title="08:00 — 645"></div>
+                  <div class="heatmap-cell heat-5" title="09:00 — 401 (partial)"></div>
+                </div>
+              </div>
+
+              <!-- Row: shipment-notify -->
+              <div class="heatmap-row">
+                <div class="heatmap-label">ship-notify</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-1" title="03:00 — 52"></div>
+                  <div class="heatmap-cell heat-2" title="04:00 — 118"></div>
+                  <div class="heatmap-cell heat-3" title="05:00 — 210"></div>
+                  <div class="heatmap-cell heat-5" title="06:00 — 478"></div>
+                  <div class="heatmap-cell heat-6" title="07:00 — 534"></div>
+                  <div class="heatmap-cell heat-6" title="08:00 — 521"></div>
+                  <div class="heatmap-cell heat-4" title="09:00 — 341 (partial)"></div>
+                </div>
+              </div>
+
+              <!-- Row: inventory-check -->
+              <div class="heatmap-row">
+                <div class="heatmap-label">inv-check</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-1" title="03:00 — 38"></div>
+                  <div class="heatmap-cell heat-2" title="04:00 — 97"></div>
+                  <div class="heatmap-cell heat-2" title="05:00 — 178"></div>
+                  <div class="heatmap-cell heat-5" title="06:00 — 412"></div>
+                  <div class="heatmap-cell heat-5" title="07:00 — 467"></div>
+                  <div class="heatmap-cell heat-5" title="08:00 — 445"></div>
+                  <div class="heatmap-cell heat-4" title="09:00 — 298 (partial)"></div>
+                </div>
+              </div>
+
+              <!-- Row: customer-validation -->
+              <div class="heatmap-row">
+                <div class="heatmap-label">cust-valid</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-1" title="03:00 — 24"></div>
+                  <div class="heatmap-cell heat-1" title="04:00 — 76"></div>
+                  <div class="heatmap-cell heat-2" title="05:00 — 145"></div>
+                  <div class="heatmap-cell heat-4" title="06:00 — 356"></div>
+                  <div class="heatmap-cell heat-5" title="07:00 — 398"></div>
+                  <div class="heatmap-cell heat-4" title="08:00 — 367"></div>
+                  <div class="heatmap-cell heat-3" title="09:00 — 234 (partial)"></div>
+                </div>
+              </div>
+
+              <!-- Row: email-notification -->
+              <div class="heatmap-row">
+                <div class="heatmap-label">email-notif</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-0" title="03:00 — 8"></div>
+                  <div class="heatmap-cell heat-1" title="04:00 — 42"></div>
+                  <div class="heatmap-cell heat-1" title="05:00 — 78"></div>
+                  <div class="heatmap-cell heat-3" title="06:00 — 245"></div>
+                  <div class="heatmap-cell heat-4" title="07:00 — 312"></div>
+                  <div class="heatmap-cell heat-3" title="08:00 — 278"></div>
+                  <div class="heatmap-cell heat-2" title="09:00 — 167 (partial)"></div>
+                </div>
+              </div>
+
+              <!-- Row: retry-handler -->
+              <div class="heatmap-row">
+                <div class="heatmap-label">retry-hdlr</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-0" title="03:00 — 4"></div>
+                  <div class="heatmap-cell heat-1" title="04:00 — 12"></div>
+                  <div class="heatmap-cell heat-1" title="05:00 — 18"></div>
+                  <div class="heatmap-cell heat-2" title="06:00 — 89"></div>
+                  <div class="heatmap-cell heat-3" title="07:00 — 134"></div>
+                  <div class="heatmap-cell heat-2" title="08:00 — 112"></div>
+                  <div class="heatmap-cell heat-1" title="09:00 — 67 (partial)"></div>
+                </div>
+              </div>
+
+              <!-- Row: dead-letter-processor -->
+              <div class="heatmap-row">
+                <div class="heatmap-label" style="color:var(--text-faint);">dead-letter</div>
+                <div class="heatmap-cells">
+                  <div class="heatmap-cell heat-0" title="03:00 — 0"></div>
+                  <div class="heatmap-cell heat-0" title="04:00 — 0"></div>
+                  <div class="heatmap-cell heat-0" title="05:00 — 0"></div>
+                  <div class="heatmap-cell heat-0" title="06:00 — 0"></div>
+                  <div class="heatmap-cell heat-0" title="07:00 — 0"></div>
+                  <div class="heatmap-cell heat-0" title="08:00 — 0"></div>
+                  <div class="heatmap-cell heat-0" title="09:00 — 0"></div>
+                </div>
+              </div>
+            </div>
+            <div class="heatmap-hour-labels">
+              <div class="heatmap-hour-label">03:00</div>
+              <div class="heatmap-hour-label">04:00</div>
+              <div class="heatmap-hour-label">05:00</div>
+              <div class="heatmap-hour-label">06:00</div>
+              <div class="heatmap-hour-label">07:00</div>
+              <div class="heatmap-hour-label">08:00</div>
+              <div class="heatmap-hour-label">09:00</div>
+            </div>
+          </div>
+          <div class="heatmap-scale">
+            <span class="heatmap-scale-label">Low</span>
+            <div class="heatmap-scale-cells">
+              <div class="heatmap-scale-cell heat-0"></div>
+              <div class="heatmap-scale-cell heat-1"></div>
+              <div class="heatmap-scale-cell heat-2"></div>
+              <div class="heatmap-scale-cell heat-3"></div>
+              <div class="heatmap-scale-cell heat-4"></div>
+              <div class="heatmap-scale-cell heat-5"></div>
+              <div class="heatmap-scale-cell heat-6"></div>
+              <div class="heatmap-scale-cell heat-7"></div>
+              <div class="heatmap-scale-cell heat-8"></div>
+            </div>
+            <span class="heatmap-scale-label">High</span>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- ================================================================
+           LIVE EVENT FEED
+           ================================================================ -->
+      <div class="live-feed-section animate-in delay-4">
+        <div class="live-feed-header">
+          <div class="live-feed-title">
+            <span class="live-feed-dot"></span>
+            Live Event Feed
+          </div>
+          <span class="table-meta">Last 25 events</span>
+        </div>
+        <div class="live-feed-list">
+          <div class="feed-item">
+            <div class="feed-icon feed-error">&#9888;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>Threshold breached</strong> &mdash; P99 latency exceeded SLA on <span class="feed-route">payment-flow</span> (312ms > 300ms)</div>
+              <div class="feed-meta">09:12:44 &middot; 2 min ago</div>
+            </div>
+          </div>
+
+          <div class="feed-item">
+            <div class="feed-icon feed-error">&#10005;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>Error</strong> &mdash; <span class="feed-route">retry-handler</span> exhausted retries: CamelExecutionException after 3 attempts</div>
+              <div class="feed-meta">09:11:18 &middot; 3 min ago</div>
+            </div>
+          </div>
+
+          <div class="feed-item">
+            <div class="feed-icon feed-warn">&#9651;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>Warning</strong> &mdash; <span class="feed-route">payment-flow</span> latency spike: P95 jumped from 198ms to 245ms</div>
+              <div class="feed-meta">09:08:32 &middot; 6 min ago</div>
+            </div>
+          </div>
+
+          <div class="feed-item">
+            <div class="feed-icon feed-error">&#10005;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>Error</strong> &mdash; <span class="feed-route">payment-flow</span> HTTP 504 from payment gateway (timeout after 5000ms)</div>
+              <div class="feed-meta">09:06:11 &middot; 8 min ago</div>
+            </div>
+          </div>
+
+          <div class="feed-item">
+            <div class="feed-icon feed-ok">&#10003;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>Recovery</strong> &mdash; <span class="feed-route">order-processing</span> error rate returned below 1% threshold</div>
+              <div class="feed-meta">09:04:55 &middot; 10 min ago</div>
+            </div>
+          </div>
+
+          <div class="feed-item">
+            <div class="feed-icon feed-info">&#9432;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>In-flight high-water</strong> &mdash; 67 concurrent exchanges (capacity 78%). Auto-scaled connection pool.</div>
+              <div class="feed-meta">07:22:10 &middot; 1h 52m ago</div>
+            </div>
+          </div>
+
+          <div class="feed-item">
+            <div class="feed-icon feed-info">&#9654;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>Shift started</strong> &mdash; Day shift (06:00-18:00). Metrics counters reset.</div>
+              <div class="feed-meta">06:00:00 &middot; 3h 14m ago</div>
+            </div>
+          </div>
+
+          <div class="feed-item">
+            <div class="feed-icon feed-warn">&#9651;</div>
+            <div class="feed-content">
+              <div class="feed-text"><strong>Route stopped</strong> &mdash; <span class="feed-route">dead-letter-processor</span> manually stopped by operator hendrik</div>
+              <div class="feed-meta">05:48:22 &middot; 3h 26m ago</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div><!-- /content -->
+  </div><!-- /main -->
+
+</div><!-- /app -->
+</body>
+</html>
diff --git a/docs/ui-mocks/mock-v3-route-detail.html b/docs/ui-mocks/mock-v3-route-detail.html
new file mode 100644
index 00000000..db638cb0
--- /dev/null
+++ b/docs/ui-mocks/mock-v3-route-detail.html
@@ -0,0 +1,2336 @@
+<!--
+  ============================================================================
+  CAMELEER3 v3 — Route Detail Page (Light Theme)
+  ============================================================================
+
+  DESIGN NOTES
+  ============
+
+  PAGE PURPOSE:
+  This is the Route Detail page — what a Camel developer sees after clicking
+  on a specific route (e.g., "order-processing") from the dashboard. It shows
+  everything about that route: flow diagram, per-processor stats, performance
+  metrics, recent executions, and error patterns.
+
+  LAYOUT:
+  - Sidebar (220px, warm charcoal) — same app/route tree as dashboard,
+    with this route highlighted under its parent application.
+  - Topbar — breadcrumb showing Apps > order-service > order-processing,
+    same search, env badge, user avatar.
+  - Main content scrolls vertically:
+    1. Route Header Card — status, uptime, version, inflight exchanges
+    2. Route Diagram + Processor Stats — side-by-side, the diagram shows
+       the DAG of processors with execution overlay, the table shows
+       per-processor performance data.
+    3. Tabbed section — Performance | Recent Executions | Error Patterns
+
+  DESIGN SYSTEM:
+  Identical to mock-v2-light.html:
+  - Color palette: warm parchment #F5F2ED, amber-gold #C6820E, charcoal #2C2520
+  - Typography: DM Sans body + JetBrains Mono for data
+  - Same sidebar, topbar, card styles, shadows, border radius, status colors
+
+  DATA MODEL:
+  Route "order-processing" with processors:
+  - from(direct:order-intake)
+  - process(OrderValidator)
+  - to(sql:INSERT INTO orders...)
+  - choice() [when(header.priority == 'HIGH')]
+  - to(http:payment-api/charge)
+  - process(ResponseMapper)
+  - to(kafka:order-completed)
+  - Error handler: to(dead-letter:failed-orders)
+
+  OPTIMIZED FOR: 1920x1080
+
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>Cameleer3 — Route: order-processing</title>
+<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@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ==========================================================================
+   RESET & FOUNDATIONS (identical to v2)
+   ========================================================================== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Surface palette (warm parchment) */
+  --bg-body:     #F5F2ED;
+  --bg-surface:  #FFFFFF;
+  --bg-raised:   #FAF8F5;
+  --bg-inset:    #F0EDE8;
+  --bg-hover:    #F5F0EA;
+
+  /* Sidebar (warm charcoal) */
+  --sidebar-bg:     #2C2520;
+  --sidebar-hover:  #3A322C;
+  --sidebar-active: #4A3F38;
+  --sidebar-text:   #BFB5A8;
+  --sidebar-muted:  #7A6F63;
+
+  /* Text */
+  --text-primary:   #1A1612;
+  --text-secondary: #5C5347;
+  --text-muted:     #9C9184;
+  --text-faint:     #C4BAB0;
+
+  /* Borders */
+  --border:        #E4DFD8;
+  --border-subtle: #EDE9E3;
+
+  /* Brand accent (amber-gold) */
+  --amber:       #C6820E;
+  --amber-light: #F0D9A8;
+  --amber-bg:    #FDF6E9;
+  --amber-deep:  #8B5A06;
+
+  /* Status colors (warm) */
+  --success:        #3D7C47;
+  --success-bg:     #EFF7F0;
+  --success-border: #C2DFC6;
+  --warning:        #C27516;
+  --warning-bg:     #FEF5E7;
+  --warning-border: #F0D9A8;
+  --error:          #C0392B;
+  --error-bg:       #FDF0EE;
+  --error-border:   #F0C4BE;
+  --running:        #1A7F8E;
+  --running-bg:     #E8F5F7;
+  --running-border: #B0DDE4;
+
+  /* Typography */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing & Radii */
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows */
+  --shadow-sm:   0 1px 2px rgba(44, 37, 32, 0.06);
+  --shadow-md:   0 2px 8px rgba(44, 37, 32, 0.08);
+  --shadow-lg:   0 4px 16px rgba(44, 37, 32, 0.10);
+  --shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
+}
+
+html { font-size: 14px; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-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-faint); }
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 124, 71, 0.35); }
+  50%      { box-shadow: 0 0 0 5px rgba(61, 124, 71, 0); }
+}
+@keyframes flowPulse {
+  0%   { stroke-dashoffset: 0; }
+  100% { stroke-dashoffset: -16; }
+}
+.animate-in { animation: fadeIn 0.3s ease-out both; }
+.delay-1 { animation-delay: 0.04s; }
+.delay-2 { animation-delay: 0.08s; }
+.delay-3 { animation-delay: 0.12s; }
+.delay-4 { animation-delay: 0.16s; }
+.delay-5 { animation-delay: 0.20s; }
+
+/* ==========================================================================
+   LAYOUT
+   ========================================================================== */
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   SIDEBAR (220px, warm charcoal) — identical to v2
+   ========================================================================== */
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-logo {
+  padding: 16px 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.sidebar-logo .brand {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--amber-light);
+  letter-spacing: -0.3px;
+}
+
+.sidebar-logo .version {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+  margin-left: 2px;
+}
+
+.sidebar-search { padding: 10px 12px; }
+
+.sidebar-search input {
+  width: 100%;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px 6px 28px;
+  color: var(--sidebar-text);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.sidebar-search input::placeholder { color: var(--sidebar-muted); }
+.sidebar-search input:focus { border-color: rgba(198, 130, 14, 0.4); }
+
+.sidebar-search-wrap { position: relative; }
+.sidebar-search-wrap .search-icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sidebar-muted);
+  font-size: 12px;
+}
+
+.sidebar-section {
+  padding: 14px 12px 5px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+}
+
+.sidebar-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--sidebar-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.12s;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  margin-bottom: 1px;
+}
+
+.sidebar-item:hover { background: var(--sidebar-hover); color: #E8DFD4; }
+.sidebar-item.active { background: var(--sidebar-active); color: var(--amber-light); border-left-color: var(--amber); }
+
+.sidebar-item .health {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
+.health-stale { background: var(--warning); }
+
+.sidebar-item .item-info { flex: 1; min-width: 0; }
+.sidebar-item .item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-item .item-meta { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
+
+.sidebar-item .item-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sidebar-muted);
+  background: rgba(255,255,255,0.06);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.sidebar-item.active .item-count { background: rgba(198, 130, 14, 0.2); color: var(--amber-light); }
+
+.sidebar-divider {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 6px 12px;
+}
+
+.sidebar-agents-header {
+  padding: 14px 12px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--sidebar-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-agent-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: rgba(93, 184, 102, 0.15);
+  color: #5DB866;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  margin: 0 6px 2px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--sidebar-text);
+  transition: background 0.1s;
+}
+
+.agent-item:hover { background: var(--sidebar-hover); }
+
+.agent-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.agent-info { flex: 1; min-width: 0; }
+.agent-name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-detail { font-size: 10px; color: var(--sidebar-muted); }
+
+.agent-stats-col {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--sidebar-muted);
+}
+
+.agent-tps { color: var(--sidebar-text); }
+
+.sidebar-bottom {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 6px;
+}
+
+.sidebar-bottom .sidebar-item {
+  font-size: 12px;
+  color: var(--sidebar-muted);
+  border-left: 3px solid transparent;
+}
+
+.sidebar-bottom .sidebar-item:hover { color: var(--sidebar-text); }
+
+/* ==========================================================================
+   MAIN CONTENT AREA
+   ========================================================================== */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  height: 48px;
+  flex-shrink: 0;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.topbar-breadcrumb .crumb-link { color: var(--text-muted); cursor: pointer; transition: color 0.12s; }
+.topbar-breadcrumb .crumb-link:hover { color: var(--amber); }
+.topbar-breadcrumb .crumb-active { color: var(--text-primary); font-weight: 600; }
+.topbar-breadcrumb .crumb-sep { color: var(--text-faint); font-size: 11px; }
+
+.topbar-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  min-width: 280px;
+}
+
+.topbar-search:hover { border-color: var(--text-faint); }
+
+.topbar-kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  padding: 0 4px;
+  border-radius: 3px;
+  color: var(--text-faint);
+  margin-left: auto;
+}
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-env {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.topbar-shift {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: var(--running-bg);
+  color: var(--running);
+  border: 1px solid var(--running-border);
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.topbar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--amber-bg);
+  color: var(--amber);
+  font-weight: 600;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--amber-light);
+}
+
+/* Content scroll container */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px 40px;
+  min-width: 0;
+}
+
+/* ==========================================================================
+   ROUTE HEADER CARD
+   ========================================================================== */
+.route-header {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  padding: 16px 20px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.route-header-main { flex: 1; min-width: 0; }
+
+.route-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.route-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.3px;
+}
+
+.route-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 12px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.route-status-started {
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+}
+
+.route-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.route-subtitle {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.route-subtitle .mono {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.route-subtitle .dot-sep {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--text-faint);
+}
+
+.route-header-stats {
+  display: flex;
+  gap: 16px;
+}
+
+.route-stat {
+  text-align: center;
+  padding: 8px 16px;
+  border-radius: var(--radius-md);
+  background: var(--bg-raised);
+  border: 1px solid var(--border-subtle);
+  min-width: 100px;
+}
+
+.route-stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+}
+
+.route-stat-value {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.route-stat-value.val-green { color: var(--success); }
+.route-stat-value.val-amber { color: var(--amber); }
+.route-stat-value.val-teal { color: var(--running); }
+.route-stat-value.val-error { color: var(--error); }
+
+.route-stat-detail {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.route-header-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.route-action-btn {
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: var(--font-body);
+  white-space: nowrap;
+}
+
+.route-action-btn.primary {
+  background: var(--amber);
+  color: white;
+  border: none;
+}
+
+.route-action-btn.primary:hover { background: var(--amber-deep); }
+
+.route-action-btn.secondary {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+}
+
+.route-action-btn.secondary:hover { border-color: var(--text-faint); color: var(--text-primary); }
+
+/* ==========================================================================
+   ROUTE DIAGRAM + PROCESSOR STATS (side by side)
+   ========================================================================== */
+.diagram-stats-row {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+/* Route Diagram */
+.diagram-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.diagram-card-header {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.diagram-card-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.diagram-legend {
+  display: flex;
+  gap: 12px;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+.diagram-body {
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+
+/* Processor nodes in diagram */
+.diagram-node {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 320px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  cursor: pointer;
+  transition: all 0.12s;
+  position: relative;
+}
+
+.diagram-node:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--text-faint);
+}
+
+.diagram-node.node-healthy { border-left: 3px solid var(--success); }
+.diagram-node.node-slow { border-left: 3px solid var(--warning); }
+.diagram-node.node-error { border-left: 3px solid var(--error); }
+.diagram-node.node-bottleneck {
+  border-left: 3px solid var(--error);
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+}
+
+.node-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.node-icon.icon-from { background: var(--running-bg); color: var(--running); }
+.node-icon.icon-process { background: var(--amber-bg); color: var(--amber); }
+.node-icon.icon-to { background: var(--success-bg); color: var(--success); }
+.node-icon.icon-choice { background: #F3EEFA; color: #7C3AED; }
+.node-icon.icon-error-handler { background: var(--error-bg); color: var(--error); }
+
+.node-info { flex: 1; min-width: 0; }
+
+.node-type {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.node-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.node-stats {
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.node-duration {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.node-duration.dur-fast { color: var(--success); }
+.node-duration.dur-normal { color: var(--text-primary); }
+.node-duration.dur-slow { color: var(--warning); }
+.node-duration.dur-breach { color: var(--error); }
+
+.node-counts {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-muted);
+}
+
+.node-counts .err-count { color: var(--error); font-weight: 600; }
+
+/* Bottleneck badge */
+.bottleneck-badge {
+  position: absolute;
+  top: -8px;
+  right: 10px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--error);
+  color: white;
+  letter-spacing: 0.3px;
+}
+
+/* Connector arrows between nodes */
+.diagram-connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 24px;
+  position: relative;
+}
+
+.connector-line {
+  width: 2px;
+  flex: 1;
+  background: var(--border);
+}
+
+.connector-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid var(--border);
+}
+
+/* Choice branch visual */
+.diagram-branch {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  width: 340px;
+  position: relative;
+}
+
+.branch-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-muted);
+  padding: 2px 8px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+/* Error handler section in diagram */
+.diagram-error-section {
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px dashed var(--error-border);
+  width: 340px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.error-handler-label {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--error);
+  margin-bottom: 8px;
+}
+
+/* ==========================================================================
+   PROCESSOR STATS TABLE
+   ========================================================================== */
+.stats-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.stats-card-header {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stats-card-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.stats-card-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.stats-table-wrap {
+  overflow-x: auto;
+  flex: 1;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  padding: 9px 14px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+
+th:hover { color: var(--text-secondary); }
+th.sorted { color: var(--amber); }
+.sort-arrow { font-size: 8px; margin-left: 3px; opacity: 0.4; }
+th.sorted .sort-arrow { opacity: 1; }
+th.text-right { text-align: right; }
+
+tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.08s;
+  cursor: pointer;
+}
+
+tbody tr:last-child { border-bottom: none; }
+tbody tr:hover { background: var(--bg-hover); }
+tbody tr.row-highlight { background: var(--warning-bg); }
+
+td {
+  padding: 9px 14px;
+  font-size: 13px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+td.text-right { text-align: right; }
+
+.proc-type-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  letter-spacing: 0.3px;
+}
+
+.proc-type-from { background: var(--running-bg); color: var(--running); }
+.proc-type-process { background: var(--amber-bg); color: var(--amber-deep); }
+.proc-type-to { background: var(--success-bg); color: var(--success); }
+.proc-type-choice { background: #F3EEFA; color: #7C3AED; }
+.proc-type-error { background: var(--error-bg); color: var(--error); }
+
+.proc-name-cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.duration-cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.dur-fast { color: var(--success); }
+.dur-normal { color: var(--text-primary); }
+.dur-slow { color: var(--warning); }
+.dur-breach { color: var(--error); font-weight: 600; }
+
+.invocations-cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.error-pct {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.error-pct.low { color: var(--success); }
+.error-pct.medium { color: var(--warning); }
+.error-pct.high { color: var(--error); }
+
+/* Duration bar (inline sparkline) */
+.dur-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dur-bar {
+  width: 60px;
+  height: 6px;
+  background: var(--bg-inset);
+  border-radius: 3px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.dur-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+}
+
+.dur-bar-fill.fill-fast { background: var(--success); }
+.dur-bar-fill.fill-normal { background: var(--amber-light); }
+.dur-bar-fill.fill-slow { background: var(--warning); }
+.dur-bar-fill.fill-breach { background: var(--error); }
+
+/* ==========================================================================
+   TABBED SECTION
+   ========================================================================== */
+.tabs-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.tabs-header {
+  display: flex;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.tab-btn {
+  padding: 11px 20px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  font-family: var(--font-body);
+  transition: all 0.15s;
+}
+
+.tab-btn:hover { color: var(--text-secondary); }
+.tab-btn.active { color: var(--amber); border-bottom-color: var(--amber); }
+
+.tab-btn .tab-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  margin-left: 6px;
+}
+
+.tab-btn.active .tab-count {
+  background: var(--amber-bg);
+  color: var(--amber-deep);
+}
+
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+/* Performance tab */
+.perf-summary {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.perf-stat {
+  background: var(--bg-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 12px 14px;
+  position: relative;
+  overflow: hidden;
+}
+
+.perf-stat::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+}
+
+.perf-stat.stat-throughput::before { background: linear-gradient(90deg, var(--running), transparent); }
+.perf-stat.stat-error-rate::before { background: linear-gradient(90deg, var(--error), transparent); }
+.perf-stat.stat-avg-latency::before { background: linear-gradient(90deg, var(--amber), transparent); }
+.perf-stat.stat-p99::before { background: linear-gradient(90deg, var(--warning), transparent); }
+
+.perf-stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+}
+
+.perf-stat-value {
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.perf-stat-value.val-teal { color: var(--running); }
+.perf-stat-value.val-error { color: var(--error); }
+.perf-stat-value.val-amber { color: var(--amber); }
+.perf-stat-value.val-warn { color: var(--warning); }
+
+.perf-stat-unit {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-left: 2px;
+}
+
+.perf-stat-trend {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 6px;
+}
+
+.trend-up-good { color: var(--success); }
+.trend-up-bad { color: var(--error); }
+.trend-down-good { color: var(--success); }
+.trend-down-bad { color: var(--error); }
+.trend-flat { color: var(--text-muted); }
+
+.perf-stat-detail {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* Charts row */
+.charts-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0;
+}
+
+.chart-panel {
+  padding: 16px;
+  border-right: 1px solid var(--border-subtle);
+}
+
+.chart-panel:last-child { border-right: none; }
+
+.chart-panel-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.chart-panel-value {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.chart-area-wrapper {
+  height: 100px;
+  position: relative;
+}
+
+.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.chart-area { opacity: 0.12; }
+.chart-grid-line { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 3; }
+.chart-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-faint); }
+.sla-line { stroke: var(--error); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.5; }
+.sla-label-text { fill: var(--error); font-size: 8px; font-family: var(--font-mono); opacity: 0.6; }
+
+/* Executions tab */
+.exec-table-wrap {
+  overflow-x: auto;
+}
+
+.exec-table-header {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.exec-table-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.live-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--success-border);
+  border-radius: var(--radius-sm);
+  background: var(--success-bg);
+  color: var(--success);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.live-btn:hover { background: #E2F0E4; }
+
+.live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.status-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
+.status-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
+.status-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }
+.status-running { background: var(--running-bg); color: var(--running); border: 1px solid var(--running-border); }
+
+.status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.time-relative { color: var(--text-secondary); font-size: 13px; }
+.time-absolute { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); display: block; }
+
+.biz-id { font-family: var(--font-mono); font-weight: 500; color: var(--running); font-size: 12px; }
+
+tbody tr.row-success { border-left: 3px solid transparent; }
+tbody tr.row-error   { border-left: 3px solid var(--error); }
+tbody tr.row-warning { border-left: 3px solid var(--warning); }
+tbody tr.row-running { border-left: 3px solid var(--running); }
+
+/* Error patterns tab */
+.error-patterns {
+  padding: 16px;
+}
+
+.error-pattern {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 14px 16px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-subtle);
+  border-left: 3px solid var(--error);
+  border-radius: var(--radius-md);
+  margin-bottom: 10px;
+  transition: box-shadow 0.12s;
+  cursor: pointer;
+}
+
+.error-pattern:hover { box-shadow: var(--shadow-md); }
+
+.error-pattern-count {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 50px;
+  flex-shrink: 0;
+}
+
+.error-count-num {
+  font-family: var(--font-mono);
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--error);
+  line-height: 1;
+}
+
+.error-count-label {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.error-pattern-info { flex: 1; min-width: 0; }
+
+.error-exception-class {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--error);
+  margin-bottom: 3px;
+}
+
+.error-message-preview {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.error-pattern-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.error-pattern-meta .mono {
+  font-family: var(--font-mono);
+}
+
+.error-trend-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 24px;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.error-trend-bar-segment {
+  width: 4px;
+  background: var(--error-border);
+  border-radius: 1px;
+  transition: height 0.2s;
+}
+
+.error-trend-bar-segment.active { background: var(--error); }
+
+/* ==========================================================================
+   KEYBOARD SHORTCUTS BAR
+   ========================================================================== */
+.shortcuts-bar {
+  position: fixed;
+  bottom: 12px;
+  right: 12px;
+  display: flex;
+  gap: 10px;
+  z-index: 50;
+  animation: fadeIn 0.5s ease-out 0.5s both;
+}
+
+.shortcut-hint {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  box-shadow: var(--shadow-sm);
+}
+
+.shortcut-hint kbd {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 4px;
+  color: var(--text-secondary);
+}
+
+.mono { font-family: var(--font-mono); }
+</style>
+</head>
+<body>
+<div class="app">
+
+  <!-- ====================================================================
+       SIDEBAR
+       ==================================================================== -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path style="fill:#C6820E" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
+      </svg>
+      <div>
+        <span class="brand">cameleer</span><span class="version">v3</span>
+      </div>
+    </div>
+
+    <div class="sidebar-search">
+      <div class="sidebar-search-wrap">
+        <span class="search-icon">&#9671;</span>
+        <input type="text" placeholder="Filter applications...">
+      </div>
+    </div>
+
+    <div class="sidebar-section">Applications</div>
+
+    <div class="sidebar-items">
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info"><div class="item-name">All Applications</div></div>
+        <span class="item-count">4</span>
+      </div>
+
+      <div class="sidebar-divider"></div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">order-service</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">1,847</span>
+      </div>
+
+      <div class="sidebar-divider"></div>
+      <div class="sidebar-section">Routes</div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-intake</div></div>
+        <span class="item-count">892</span>
+      </div>
+
+      <div class="sidebar-item active" style="padding-left: 22px;">
+        <span style="color: var(--amber-light); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-processing</div></div>
+        <span class="item-count">541</span>
+      </div>
+
+      <div class="sidebar-item" style="padding-left: 22px;">
+        <span style="color: var(--sidebar-muted); font-size: 10px;">&#9656;</span>
+        <div class="item-info"><div class="item-name">order-enrichment</div></div>
+        <span class="item-count">414</span>
+      </div>
+
+      <div class="sidebar-divider"></div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">payment-gateway</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">923</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-live"></span>
+        <div class="item-info">
+          <div class="item-name">shipment-tracker</div>
+          <div class="item-meta">2 agents</div>
+        </div>
+        <span class="item-count">471</span>
+      </div>
+
+      <div class="sidebar-item">
+        <span class="health health-stale"></span>
+        <div class="item-info">
+          <div class="item-name">notification-hub</div>
+          <div class="item-meta">1 agent</div>
+        </div>
+        <span class="item-count">128</span>
+      </div>
+    </div>
+
+    <!-- Agent health section -->
+    <div class="sidebar-agents-header">
+      <span>Agents</span>
+      <span class="sidebar-agent-badge">4/4 live</span>
+    </div>
+
+    <div style="padding: 0 0 6px; overflow-y: auto; max-height: 140px;">
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-1</div>
+          <div class="agent-detail">order-service v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">14.2/s</div>
+          <div>12s ago</div>
+        </div>
+      </div>
+
+      <div class="agent-item">
+        <span class="agent-dot health-live"></span>
+        <div class="agent-info">
+          <div class="agent-name">prod-2</div>
+          <div class="agent-detail">order-service v3.2.1</div>
+        </div>
+        <div class="agent-stats-col">
+          <div class="agent-tps">11.8/s</div>
+          <div style="color: var(--error);">3 err/h</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9881;</span><div class="item-info"><div class="item-name">Admin</div></div></div>
+      <div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">&#9776;</span><div class="item-info"><div class="item-name">API Docs</div></div></div>
+    </div>
+  </aside>
+
+  <!-- ====================================================================
+       MAIN CONTENT
+       ==================================================================== -->
+  <div class="main">
+    <!-- Top bar -->
+    <div class="topbar">
+      <div class="topbar-breadcrumb">
+        <span class="crumb-link">Applications</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-link">order-service</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-active">order-processing</span>
+      </div>
+
+      <div class="topbar-search">
+        <span style="font-size: 12px; color: var(--text-faint);">&#128270;</span>
+        <span>Search by Order ID, route, error...</span>
+        <span class="topbar-kbd">Ctrl+K</span>
+      </div>
+
+      <div class="topbar-right">
+        <span class="topbar-env">PRODUCTION</span>
+        <span class="topbar-shift">Shift: Day (06:00-18:00)</span>
+        <div class="topbar-user">
+          <span>hendrik</span>
+          <div class="topbar-avatar">H</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scrollable content -->
+    <div class="content">
+
+      <!-- ================================================================
+           ROUTE HEADER CARD
+           ================================================================ -->
+      <div class="route-header animate-in">
+        <div class="route-header-main">
+          <div class="route-title-row">
+            <span class="route-title">order-processing</span>
+            <span class="route-status-badge route-status-started">
+              <span class="route-status-dot"></span>
+              Started
+            </span>
+          </div>
+          <div class="route-subtitle">
+            <span>CamelContext: <span class="mono">order-service-ctx</span></span>
+            <span class="dot-sep"></span>
+            <span>Uptime: <span class="mono">14d 6h 22m</span></span>
+            <span class="dot-sep"></span>
+            <span>Last restart: <span class="mono">Mar 3, 08:41 UTC</span></span>
+            <span class="dot-sep"></span>
+            <span>Version: <span class="mono">a3f8c2d</span></span>
+          </div>
+        </div>
+        <div class="route-header-stats">
+          <div class="route-stat">
+            <div class="route-stat-label">Throughput</div>
+            <div class="route-stat-value val-teal">12.4<span style="font-size: 11px; color: var(--text-muted); font-weight: 400;">/s</span></div>
+            <div class="route-stat-detail">peak 28.1/s</div>
+          </div>
+          <div class="route-stat">
+            <div class="route-stat-label">Inflight</div>
+            <div class="route-stat-value val-amber">3</div>
+            <div class="route-stat-detail">max 10</div>
+          </div>
+          <div class="route-stat">
+            <div class="route-stat-label">Success Rate</div>
+            <div class="route-stat-value val-green">96.8%</div>
+            <div class="route-stat-detail">523/541 ok</div>
+          </div>
+          <div class="route-stat">
+            <div class="route-stat-label">Errors (shift)</div>
+            <div class="route-stat-value val-error">18</div>
+            <div class="route-stat-detail">+5 since 06:00</div>
+          </div>
+        </div>
+        <div class="route-header-actions">
+          <button class="route-action-btn primary">Suspend Route</button>
+          <button class="route-action-btn secondary">View Config</button>
+        </div>
+      </div>
+
+      <!-- ================================================================
+           ROUTE DIAGRAM + PROCESSOR STATS (side by side)
+           ================================================================ -->
+      <div class="diagram-stats-row animate-in delay-1">
+
+        <!-- Route Flow Diagram -->
+        <div class="diagram-card">
+          <div class="diagram-card-header">
+            <span class="diagram-card-title">Route Flow</span>
+            <div class="diagram-legend">
+              <div class="legend-item"><div class="legend-dot" style="background: var(--success);"></div> Healthy</div>
+              <div class="legend-item"><div class="legend-dot" style="background: var(--warning);"></div> Slow</div>
+              <div class="legend-item"><div class="legend-dot" style="background: var(--error);"></div> Errors</div>
+            </div>
+          </div>
+          <div class="diagram-body">
+
+            <!-- Node 1: from -->
+            <div class="diagram-node node-healthy">
+              <div class="node-icon icon-from">&#9654;</div>
+              <div class="node-info">
+                <div class="node-type">from</div>
+                <div class="node-label">direct:order-intake</div>
+              </div>
+              <div class="node-stats">
+                <div class="node-duration dur-fast">2ms</div>
+                <div class="node-counts">12,841 / <span class="err-count">0</span></div>
+              </div>
+            </div>
+
+            <div class="diagram-connector"><div class="connector-line"></div><div class="connector-arrow"></div></div>
+
+            <!-- Node 2: process -->
+            <div class="diagram-node node-healthy">
+              <div class="node-icon icon-process">&#9881;</div>
+              <div class="node-info">
+                <div class="node-type">process</div>
+                <div class="node-label">OrderValidator</div>
+              </div>
+              <div class="node-stats">
+                <div class="node-duration dur-fast">8ms</div>
+                <div class="node-counts">12,841 / <span class="err-count">12</span></div>
+              </div>
+            </div>
+
+            <div class="diagram-connector"><div class="connector-line"></div><div class="connector-arrow"></div></div>
+
+            <!-- Node 3: to SQL -->
+            <div class="diagram-node node-healthy">
+              <div class="node-icon icon-to">&#9634;</div>
+              <div class="node-info">
+                <div class="node-type">to</div>
+                <div class="node-label" title="sql:INSERT INTO orders...">sql:INSERT INTO orders...</div>
+              </div>
+              <div class="node-stats">
+                <div class="node-duration dur-normal">24ms</div>
+                <div class="node-counts">12,829 / <span class="err-count">3</span></div>
+              </div>
+            </div>
+
+            <div class="diagram-connector"><div class="connector-line"></div><div class="connector-arrow"></div></div>
+
+            <!-- Node 4: choice -->
+            <div class="diagram-node node-healthy">
+              <div class="node-icon icon-choice">&#9830;</div>
+              <div class="node-info">
+                <div class="node-type">choice</div>
+                <div class="node-label">header.priority == 'HIGH'</div>
+              </div>
+              <div class="node-stats">
+                <div class="node-duration dur-fast">1ms</div>
+                <div class="node-counts">12,826 / <span class="err-count">0</span></div>
+              </div>
+            </div>
+
+            <div class="diagram-connector"><div class="connector-line"></div><div class="connector-arrow"></div></div>
+
+            <!-- Node 5: to payment-api — BOTTLENECK -->
+            <div class="diagram-node node-bottleneck">
+              <span class="bottleneck-badge">BOTTLENECK</span>
+              <div class="node-icon icon-to" style="background: var(--warning-bg); color: var(--warning);">&#9889;</div>
+              <div class="node-info">
+                <div class="node-type">to</div>
+                <div class="node-label">http:payment-api/charge</div>
+              </div>
+              <div class="node-stats">
+                <div class="node-duration dur-breach">187ms</div>
+                <div class="node-counts">4,218 / <span class="err-count">47</span></div>
+              </div>
+            </div>
+
+            <div class="diagram-connector"><div class="connector-line"></div><div class="connector-arrow"></div></div>
+
+            <!-- Node 6: process ResponseMapper -->
+            <div class="diagram-node node-healthy">
+              <div class="node-icon icon-process">&#9881;</div>
+              <div class="node-info">
+                <div class="node-type">process</div>
+                <div class="node-label">ResponseMapper</div>
+              </div>
+              <div class="node-stats">
+                <div class="node-duration dur-fast">3ms</div>
+                <div class="node-counts">12,779 / <span class="err-count">0</span></div>
+              </div>
+            </div>
+
+            <div class="diagram-connector"><div class="connector-line"></div><div class="connector-arrow"></div></div>
+
+            <!-- Node 7: to kafka -->
+            <div class="diagram-node node-healthy">
+              <div class="node-icon icon-to">&#9634;</div>
+              <div class="node-info">
+                <div class="node-type">to</div>
+                <div class="node-label">kafka:order-completed</div>
+              </div>
+              <div class="node-stats">
+                <div class="node-duration dur-normal">11ms</div>
+                <div class="node-counts">12,779 / <span class="err-count">2</span></div>
+              </div>
+            </div>
+
+            <!-- Error handler section -->
+            <div class="diagram-error-section">
+              <div class="error-handler-label">Error Handler</div>
+              <div class="diagram-node node-error">
+                <div class="node-icon icon-error-handler">&#9888;</div>
+                <div class="node-info">
+                  <div class="node-type">to</div>
+                  <div class="node-label">dead-letter:failed-orders</div>
+                </div>
+                <div class="node-stats">
+                  <div class="node-duration dur-normal">14ms</div>
+                  <div class="node-counts">62 total</div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <!-- Processor Statistics Table -->
+        <div class="stats-card">
+          <div class="stats-card-header">
+            <span class="stats-card-title">Processor Statistics</span>
+            <span class="stats-card-meta">Last 6 hours &middot; 8 processors</span>
+          </div>
+          <div class="stats-table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>Processor</th>
+                  <th>Type</th>
+                  <th class="sorted">Avg Duration <span class="sort-arrow">&#9660;</span></th>
+                  <th>P99</th>
+                  <th class="text-right">Invocations</th>
+                  <th class="text-right">Errors</th>
+                  <th class="text-right">Error %</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- BOTTLENECK ROW: payment-api -->
+                <tr class="row-highlight">
+                  <td><span class="proc-name-cell">http:payment-api/charge</span></td>
+                  <td><span class="proc-type-badge proc-type-to">TO</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-breach">187ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-breach" style="width: 100%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-breach">892ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">4,218</span></td>
+                  <td class="text-right"><span class="duration-cell dur-breach">47</span></td>
+                  <td class="text-right"><span class="error-pct high">1.11%</span></td>
+                </tr>
+
+                <tr>
+                  <td><span class="proc-name-cell">sql:INSERT INTO orders...</span></td>
+                  <td><span class="proc-type-badge proc-type-to">TO</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-normal">24ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-normal" style="width: 13%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-slow">78ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">12,829</span></td>
+                  <td class="text-right"><span class="duration-cell">3</span></td>
+                  <td class="text-right"><span class="error-pct low">0.02%</span></td>
+                </tr>
+
+                <tr>
+                  <td><span class="proc-name-cell">dead-letter:failed-orders</span></td>
+                  <td><span class="proc-type-badge proc-type-error">DLQ</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-normal">14ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-normal" style="width: 7%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-normal">31ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">62</span></td>
+                  <td class="text-right"><span class="duration-cell">0</span></td>
+                  <td class="text-right"><span class="error-pct low">0.00%</span></td>
+                </tr>
+
+                <tr>
+                  <td><span class="proc-name-cell">kafka:order-completed</span></td>
+                  <td><span class="proc-type-badge proc-type-to">TO</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-normal">11ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-normal" style="width: 6%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-normal">42ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">12,779</span></td>
+                  <td class="text-right"><span class="duration-cell">2</span></td>
+                  <td class="text-right"><span class="error-pct low">0.02%</span></td>
+                </tr>
+
+                <tr>
+                  <td><span class="proc-name-cell">OrderValidator</span></td>
+                  <td><span class="proc-type-badge proc-type-process">PROC</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-fast">8ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-fast" style="width: 4%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-normal">19ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">12,841</span></td>
+                  <td class="text-right"><span class="duration-cell">12</span></td>
+                  <td class="text-right"><span class="error-pct low">0.09%</span></td>
+                </tr>
+
+                <tr>
+                  <td><span class="proc-name-cell">ResponseMapper</span></td>
+                  <td><span class="proc-type-badge proc-type-process">PROC</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-fast">3ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-fast" style="width: 2%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-fast">7ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">12,779</span></td>
+                  <td class="text-right"><span class="duration-cell">0</span></td>
+                  <td class="text-right"><span class="error-pct low">0.00%</span></td>
+                </tr>
+
+                <tr>
+                  <td><span class="proc-name-cell">direct:order-intake</span></td>
+                  <td><span class="proc-type-badge proc-type-from">FROM</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-fast">2ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-fast" style="width: 1%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-fast">4ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">12,841</span></td>
+                  <td class="text-right"><span class="duration-cell">0</span></td>
+                  <td class="text-right"><span class="error-pct low">0.00%</span></td>
+                </tr>
+
+                <tr>
+                  <td><span class="proc-name-cell">choice(priority)</span></td>
+                  <td><span class="proc-type-badge proc-type-choice">CHOICE</span></td>
+                  <td>
+                    <div class="dur-bar-wrap">
+                      <span class="duration-cell dur-fast">1ms</span>
+                      <div class="dur-bar"><div class="dur-bar-fill fill-fast" style="width: 0.5%;"></div></div>
+                    </div>
+                  </td>
+                  <td><span class="duration-cell dur-fast">2ms</span></td>
+                  <td class="text-right"><span class="invocations-cell">12,826</span></td>
+                  <td class="text-right"><span class="duration-cell">0</span></td>
+                  <td class="text-right"><span class="error-pct low">0.00%</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- ================================================================
+           TABBED SECTION: Performance | Recent Executions | Error Patterns
+           ================================================================ -->
+      <div class="tabs-section animate-in delay-3">
+        <div class="tabs-header">
+          <button class="tab-btn active" onclick="switchTab('performance')">Performance<span class="tab-count">6h</span></button>
+          <button class="tab-btn" onclick="switchTab('executions')">Recent Executions<span class="tab-count">20</span></button>
+          <button class="tab-btn" onclick="switchTab('errors')">Error Patterns<span class="tab-count">5</span></button>
+        </div>
+
+        <!-- ============================================================
+             TAB 1: Performance
+             ============================================================ -->
+        <div class="tab-content active" id="tab-performance">
+          <div class="perf-summary">
+            <div class="perf-stat stat-throughput">
+              <div class="perf-stat-label">Throughput</div>
+              <div>
+                <span class="perf-stat-value val-teal">12.4</span>
+                <span class="perf-stat-unit">msg/s</span>
+                <span class="perf-stat-trend trend-up-good">&#9650; +8%</span>
+              </div>
+              <div class="perf-stat-detail">Peak: 28.1/s at 08:42</div>
+            </div>
+
+            <div class="perf-stat stat-error-rate">
+              <div class="perf-stat-label">Error Rate</div>
+              <div>
+                <span class="perf-stat-value val-error">3.2%</span>
+                <span class="perf-stat-trend trend-up-bad">&#9650; +0.8%</span>
+              </div>
+              <div class="perf-stat-detail">18 errors / 541 total</div>
+            </div>
+
+            <div class="perf-stat stat-avg-latency">
+              <div class="perf-stat-label">Avg Latency</div>
+              <div>
+                <span class="perf-stat-value val-amber">142</span>
+                <span class="perf-stat-unit">ms</span>
+                <span class="perf-stat-trend trend-up-bad">&#9650; +18ms</span>
+              </div>
+              <div class="perf-stat-detail">Median: 98ms</div>
+            </div>
+
+            <div class="perf-stat stat-p99">
+              <div class="perf-stat-label">P99 Latency</div>
+              <div>
+                <span class="perf-stat-value val-warn">487</span>
+                <span class="perf-stat-unit">ms</span>
+                <span class="perf-stat-trend trend-up-bad">&#9650; +52ms</span>
+              </div>
+              <div class="perf-stat-detail">SLA: &lt;500ms &middot; <strong style="color: var(--warning);">CLOSE</strong></div>
+            </div>
+          </div>
+
+          <div class="charts-row">
+            <!-- Throughput chart -->
+            <div class="chart-panel">
+              <div class="chart-panel-title">
+                <span>Throughput (msg/s)</span>
+                <span class="chart-panel-value">12.4/s</span>
+              </div>
+              <div class="chart-area-wrapper">
+                <svg width="100%" height="100" viewBox="0 0 400 100" preserveAspectRatio="none">
+                  <line x1="0" y1="25" x2="400" y2="25" class="chart-grid-line"/>
+                  <line x1="0" y1="50" x2="400" y2="50" class="chart-grid-line"/>
+                  <line x1="0" y1="75" x2="400" y2="75" class="chart-grid-line"/>
+                  <text x="2" y="24" class="chart-label">30</text>
+                  <text x="2" y="49" class="chart-label">20</text>
+                  <text x="2" y="74" class="chart-label">10</text>
+                  <text x="2" y="97" class="chart-label">0</text>
+                  <path d="M20,78 L60,72 L100,65 L140,58 L180,45 L220,35 L260,42 L300,48 L340,52 L380,55" class="chart-line" stroke="#1A7F8E"/>
+                  <path d="M20,78 L60,72 L100,65 L140,58 L180,45 L220,35 L260,42 L300,48 L340,52 L380,55 L380,100 L20,100 Z" class="chart-area" fill="#1A7F8E"/>
+                  <text x="60" y="97" class="chart-label">04:00</text>
+                  <text x="180" y="97" class="chart-label">06:00</text>
+                  <text x="300" y="97" class="chart-label">08:00</text>
+                </svg>
+              </div>
+            </div>
+
+            <!-- Latency distribution chart -->
+            <div class="chart-panel">
+              <div class="chart-panel-title">
+                <span>Latency Distribution</span>
+                <span class="chart-panel-value">avg 142ms</span>
+              </div>
+              <div class="chart-area-wrapper">
+                <svg width="100%" height="100" viewBox="0 0 400 100" preserveAspectRatio="none">
+                  <line x1="0" y1="25" x2="400" y2="25" class="chart-grid-line"/>
+                  <line x1="0" y1="50" x2="400" y2="50" class="chart-grid-line"/>
+                  <line x1="0" y1="75" x2="400" y2="75" class="chart-grid-line"/>
+                  <!-- Histogram bars -->
+                  <rect x="30" y="15" width="30" height="80" rx="2" fill="#C6820E" opacity="0.15"/>
+                  <rect x="65" y="25" width="30" height="70" rx="2" fill="#C6820E" opacity="0.2"/>
+                  <rect x="100" y="8" width="30" height="87" rx="2" fill="#C6820E" opacity="0.25"/>
+                  <rect x="135" y="20" width="30" height="75" rx="2" fill="#C6820E" opacity="0.3"/>
+                  <rect x="170" y="35" width="30" height="60" rx="2" fill="#C6820E" opacity="0.35"/>
+                  <rect x="205" y="50" width="30" height="45" rx="2" fill="#C6820E" opacity="0.3"/>
+                  <rect x="240" y="60" width="30" height="35" rx="2" fill="#C6820E" opacity="0.25"/>
+                  <rect x="275" y="72" width="30" height="23" rx="2" fill="#C6820E" opacity="0.2"/>
+                  <rect x="310" y="80" width="30" height="15" rx="2" fill="#C0392B" opacity="0.3"/>
+                  <rect x="345" y="85" width="30" height="10" rx="2" fill="#C0392B" opacity="0.3"/>
+                  <!-- SLA line -->
+                  <line x1="310" y1="0" x2="310" y2="95" class="sla-line"/>
+                  <text x="312" y="10" class="sla-label-text">SLA 500ms</text>
+                  <text x="30" y="97" class="chart-label">0ms</text>
+                  <text x="170" y="97" class="chart-label">250ms</text>
+                  <text x="310" y="97" class="chart-label">500ms</text>
+                </svg>
+              </div>
+            </div>
+
+            <!-- Error rate trend chart -->
+            <div class="chart-panel">
+              <div class="chart-panel-title">
+                <span>Error Rate Trend</span>
+                <span class="chart-panel-value" style="color: var(--error);">3.2%</span>
+              </div>
+              <div class="chart-area-wrapper">
+                <svg width="100%" height="100" viewBox="0 0 400 100" preserveAspectRatio="none">
+                  <line x1="0" y1="25" x2="400" y2="25" class="chart-grid-line"/>
+                  <line x1="0" y1="50" x2="400" y2="50" class="chart-grid-line"/>
+                  <line x1="0" y1="75" x2="400" y2="75" class="chart-grid-line"/>
+                  <text x="2" y="24" class="chart-label">10%</text>
+                  <text x="2" y="49" class="chart-label">5%</text>
+                  <text x="2" y="74" class="chart-label">2%</text>
+                  <text x="2" y="97" class="chart-label">0%</text>
+                  <!-- SLA line at 5% -->
+                  <line x1="20" y1="50" x2="380" y2="50" class="sla-line"/>
+                  <text x="350" y="47" class="sla-label-text">SLA 5%</text>
+                  <path d="M20,88 L60,85 L100,80 L140,82 L180,75 L220,70 L260,72 L300,68 L340,65 L380,62" class="chart-line" stroke="#C0392B"/>
+                  <path d="M20,88 L60,85 L100,80 L140,82 L180,75 L220,70 L260,72 L300,68 L340,65 L380,62 L380,100 L20,100 Z" class="chart-area" fill="#C0392B"/>
+                  <text x="60" y="97" class="chart-label">04:00</text>
+                  <text x="180" y="97" class="chart-label">06:00</text>
+                  <text x="300" y="97" class="chart-label">08:00</text>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ============================================================
+             TAB 2: Recent Executions
+             ============================================================ -->
+        <div class="tab-content" id="tab-executions">
+          <div class="exec-table-header">
+            <span class="exec-table-meta">Showing 1-20 of 541 &middot; This route only</span>
+            <button class="live-btn"><span class="live-dot"></span> LIVE</button>
+          </div>
+          <div class="exec-table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 80px;">Status</th>
+                  <th>Business ID</th>
+                  <th class="sorted">Started <span class="sort-arrow">&#9660;</span></th>
+                  <th>Duration</th>
+                  <th>Processors</th>
+                  <th>Agent</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="biz-id">OP-92184</span></td>
+                  <td><span class="time-relative">2 min ago</span><span class="time-absolute">09:12:04</span></td>
+                  <td><span class="duration-cell dur-fast">87ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">7/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-1</span></td>
+                </tr>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="biz-id">OP-92183</span></td>
+                  <td><span class="time-relative">3 min ago</span><span class="time-absolute">09:11:22</span></td>
+                  <td><span class="duration-cell dur-normal">164ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">7/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-2</span></td>
+                </tr>
+                <tr class="row-running">
+                  <td><span class="status-badge status-running"><span class="status-dot" style="animation: pulse 1.5s ease-in-out infinite;"></span>RUN</span></td>
+                  <td><span class="biz-id">OP-92185</span></td>
+                  <td><span class="time-relative">30s ago</span><span class="time-absolute">09:13:44</span></td>
+                  <td><span class="duration-cell" style="color: var(--running);">~30s</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--running);">5/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-1</span></td>
+                </tr>
+                <tr class="row-error">
+                  <td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
+                  <td><span class="biz-id">OP-92181</span></td>
+                  <td><span class="time-relative">5 min ago</span><span class="time-absolute">09:09:12</span></td>
+                  <td><span class="duration-cell dur-breach">412ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--error);">5/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-2</span></td>
+                </tr>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="biz-id">OP-92180</span></td>
+                  <td><span class="time-relative">6 min ago</span><span class="time-absolute">09:08:47</span></td>
+                  <td><span class="duration-cell dur-fast">91ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">7/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-1</span></td>
+                </tr>
+                <tr class="row-warning">
+                  <td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td>
+                  <td><span class="biz-id">OP-92179</span></td>
+                  <td><span class="time-relative">8 min ago</span><span class="time-absolute">09:06:33</span></td>
+                  <td><span class="duration-cell dur-slow">348ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">7/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-2</span></td>
+                </tr>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="biz-id">OP-92178</span></td>
+                  <td><span class="time-relative">9 min ago</span><span class="time-absolute">09:05:11</span></td>
+                  <td><span class="duration-cell dur-fast">72ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">7/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-1</span></td>
+                </tr>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="biz-id">OP-92177</span></td>
+                  <td><span class="time-relative">11 min ago</span><span class="time-absolute">09:03:29</span></td>
+                  <td><span class="duration-cell dur-normal">134ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">7/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-2</span></td>
+                </tr>
+                <tr class="row-error">
+                  <td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
+                  <td><span class="biz-id">OP-92174</span></td>
+                  <td><span class="time-relative">14 min ago</span><span class="time-absolute">09:00:02</span></td>
+                  <td><span class="duration-cell dur-breach">5,041ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--error);">5/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-1</span></td>
+                </tr>
+                <tr class="row-success">
+                  <td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
+                  <td><span class="biz-id">OP-92173</span></td>
+                  <td><span class="time-relative">16 min ago</span><span class="time-absolute">08:58:44</span></td>
+                  <td><span class="duration-cell dur-fast">68ms</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">7/7</span></td>
+                  <td><span class="mono" style="font-size: 12px; color: var(--text-muted);">prod-2</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- ============================================================
+             TAB 3: Error Patterns
+             ============================================================ -->
+        <div class="tab-content" id="tab-errors">
+          <div class="error-patterns">
+
+            <!-- Error Pattern 1 -->
+            <div class="error-pattern">
+              <div class="error-pattern-count">
+                <div class="error-count-num">47</div>
+                <div class="error-count-label">times</div>
+              </div>
+              <div class="error-pattern-info">
+                <div class="error-exception-class">java.net.http.HttpConnectTimeoutException</div>
+                <div class="error-message-preview">HTTP connect timed out after 5000ms &mdash; POST https://payment-api.internal/v2/charge. Connection pool exhausted, all 20 connections in use. Retry exhausted (3/3 attempts).</div>
+                <div class="error-pattern-meta">
+                  <span>Processor: <span class="mono">http:payment-api/charge</span></span>
+                  <span>Last seen: <span class="mono">2 min ago</span></span>
+                  <span>First seen: <span class="mono">03:14 today</span></span>
+                </div>
+              </div>
+              <div class="error-trend-bar" title="Last 6 hours, hourly buckets">
+                <div class="error-trend-bar-segment" style="height: 4px;"></div>
+                <div class="error-trend-bar-segment" style="height: 6px;"></div>
+                <div class="error-trend-bar-segment" style="height: 8px;"></div>
+                <div class="error-trend-bar-segment active" style="height: 14px;"></div>
+                <div class="error-trend-bar-segment active" style="height: 18px;"></div>
+                <div class="error-trend-bar-segment active" style="height: 24px;"></div>
+              </div>
+            </div>
+
+            <!-- Error Pattern 2 -->
+            <div class="error-pattern">
+              <div class="error-pattern-count">
+                <div class="error-count-num">12</div>
+                <div class="error-count-label">times</div>
+              </div>
+              <div class="error-pattern-info">
+                <div class="error-exception-class">com.cameleer3.validation.OrderValidationException</div>
+                <div class="error-message-preview">Order validation failed: required field 'shippingAddress.postalCode' is null or empty. Validation rule: ADDR-001. Source system: EDI-US.</div>
+                <div class="error-pattern-meta">
+                  <span>Processor: <span class="mono">OrderValidator</span></span>
+                  <span>Last seen: <span class="mono">18 min ago</span></span>
+                  <span>First seen: <span class="mono">yesterday 22:07</span></span>
+                </div>
+              </div>
+              <div class="error-trend-bar" title="Last 6 hours, hourly buckets">
+                <div class="error-trend-bar-segment" style="height: 8px;"></div>
+                <div class="error-trend-bar-segment active" style="height: 12px;"></div>
+                <div class="error-trend-bar-segment" style="height: 6px;"></div>
+                <div class="error-trend-bar-segment" style="height: 4px;"></div>
+                <div class="error-trend-bar-segment active" style="height: 10px;"></div>
+                <div class="error-trend-bar-segment" style="height: 6px;"></div>
+              </div>
+            </div>
+
+            <!-- Error Pattern 3 -->
+            <div class="error-pattern">
+              <div class="error-pattern-count">
+                <div class="error-count-num">3</div>
+                <div class="error-count-label">times</div>
+              </div>
+              <div class="error-pattern-info">
+                <div class="error-exception-class">java.sql.SQLTransientConnectionException</div>
+                <div class="error-message-preview">HikariPool-1 &mdash; Connection not available, request timed out after 1000ms. Pool stats: total=10, active=10, idle=0, waiting=3.</div>
+                <div class="error-pattern-meta">
+                  <span>Processor: <span class="mono">sql:INSERT INTO orders...</span></span>
+                  <span>Last seen: <span class="mono">41 min ago</span></span>
+                  <span>First seen: <span class="mono">today 07:22</span></span>
+                </div>
+              </div>
+              <div class="error-trend-bar" title="Last 6 hours, hourly buckets">
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 4px;"></div>
+                <div class="error-trend-bar-segment active" style="height: 10px;"></div>
+                <div class="error-trend-bar-segment" style="height: 6px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+              </div>
+            </div>
+
+            <!-- Error Pattern 4 -->
+            <div class="error-pattern">
+              <div class="error-pattern-count">
+                <div class="error-count-num">2</div>
+                <div class="error-count-label">times</div>
+              </div>
+              <div class="error-pattern-info">
+                <div class="error-exception-class">org.apache.kafka.common.errors.TimeoutException</div>
+                <div class="error-message-preview">Expiring 1 record(s) for order-completed-0: 30004 ms has passed since batch creation. Topic partition: order-completed-0, broker: kafka-0.kafka.svc:9092.</div>
+                <div class="error-pattern-meta">
+                  <span>Processor: <span class="mono">kafka:order-completed</span></span>
+                  <span>Last seen: <span class="mono">2h ago</span></span>
+                  <span>First seen: <span class="mono">today 04:11</span></span>
+                </div>
+              </div>
+              <div class="error-trend-bar" title="Last 6 hours, hourly buckets">
+                <div class="error-trend-bar-segment" style="height: 6px;"></div>
+                <div class="error-trend-bar-segment active" style="height: 8px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+              </div>
+            </div>
+
+            <!-- Error Pattern 5 -->
+            <div class="error-pattern">
+              <div class="error-pattern-count">
+                <div class="error-count-num">1</div>
+                <div class="error-count-label">times</div>
+              </div>
+              <div class="error-pattern-info">
+                <div class="error-exception-class">com.fasterxml.jackson.databind.JsonMappingException</div>
+                <div class="error-message-preview">Cannot deserialize value of type `java.math.BigDecimal` from String "N/A": not a valid representation at [Source: (byte[]); line: 1, column: 847] (through reference chain: Order["totalAmount"]).</div>
+                <div class="error-pattern-meta">
+                  <span>Processor: <span class="mono">ResponseMapper</span></span>
+                  <span>Last seen: <span class="mono">5h ago</span></span>
+                  <span>First seen: <span class="mono">today 04:33</span></span>
+                </div>
+              </div>
+              <div class="error-trend-bar" title="Last 6 hours, hourly buckets">
+                <div class="error-trend-bar-segment active" style="height: 6px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+                <div class="error-trend-bar-segment" style="height: 0px;"></div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      </div><!-- /tabs-section -->
+
+    </div><!-- /content -->
+  </div><!-- /main -->
+
+</div><!-- /app -->
+
+<!-- Keyboard shortcuts bar -->
+<div class="shortcuts-bar">
+  <div class="shortcut-hint"><kbd>Esc</kbd> Back to list</div>
+  <div class="shortcut-hint"><kbd>R</kbd> Refresh</div>
+  <div class="shortcut-hint"><kbd>S</kbd> Suspend route</div>
+  <div class="shortcut-hint"><kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> Switch tabs</div>
+</div>
+
+<script>
+function switchTab(tabId) {
+  // Deactivate all tabs and content
+  document.querySelectorAll('.tab-btn').forEach(function(btn) { btn.classList.remove('active'); });
+  document.querySelectorAll('.tab-content').forEach(function(tc) { tc.classList.remove('active'); });
+
+  // Activate the selected tab
+  var tabMap = { 'performance': 0, 'executions': 1, 'errors': 2 };
+  var idx = tabMap[tabId];
+  document.querySelectorAll('.tab-btn')[idx].classList.add('active');
+  document.getElementById('tab-' + tabId).classList.add('active');
+}
+
+// Keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+  if (e.target.tagName === 'INPUT') return;
+  if (e.key === '1') switchTab('performance');
+  if (e.key === '2') switchTab('executions');
+  if (e.key === '3') switchTab('errors');
+});
+</script>
+</body>
+</html>
diff --git a/live-agents-v2.png b/live-agents-v2.png
new file mode 100644
index 00000000..407638b9
Binary files /dev/null and b/live-agents-v2.png differ
diff --git a/live-agents.png b/live-agents.png
new file mode 100644
index 00000000..b88ea3c2
Binary files /dev/null and b/live-agents.png differ
diff --git a/live-dashboard-detail.png b/live-dashboard-detail.png
new file mode 100644
index 00000000..6bec217b
Binary files /dev/null and b/live-dashboard-detail.png differ
diff --git a/live-dashboard-panel-v2.png b/live-dashboard-panel-v2.png
new file mode 100644
index 00000000..d770f4a2
Binary files /dev/null and b/live-dashboard-panel-v2.png differ
diff --git a/live-dashboard-panel-v3.png b/live-dashboard-panel-v3.png
new file mode 100644
index 00000000..375023bf
Binary files /dev/null and b/live-dashboard-panel-v3.png differ
diff --git a/live-dashboard-panel.png b/live-dashboard-panel.png
new file mode 100644
index 00000000..a135fc07
Binary files /dev/null and b/live-dashboard-panel.png differ
diff --git a/live-dashboard-v2.png b/live-dashboard-v2.png
new file mode 100644
index 00000000..a358f373
Binary files /dev/null and b/live-dashboard-v2.png differ
diff --git a/live-dashboard-v3.png b/live-dashboard-v3.png
new file mode 100644
index 00000000..25aef98d
Binary files /dev/null and b/live-dashboard-v3.png differ
diff --git a/live-dashboard.png b/live-dashboard.png
new file mode 100644
index 00000000..ba961f17
Binary files /dev/null and b/live-dashboard.png differ
diff --git a/live-routes-v2.png b/live-routes-v2.png
new file mode 100644
index 00000000..ef8e6c54
Binary files /dev/null and b/live-routes-v2.png differ
diff --git a/mock-agent-instance.png b/mock-agent-instance.png
new file mode 100644
index 00000000..024d6838
Binary files /dev/null and b/mock-agent-instance.png differ
diff --git a/mock-agents.png b/mock-agents.png
new file mode 100644
index 00000000..0d187635
Binary files /dev/null and b/mock-agents.png differ
diff --git a/mock-dashboard-v2.png b/mock-dashboard-v2.png
new file mode 100644
index 00000000..c2083b16
Binary files /dev/null and b/mock-dashboard-v2.png differ
diff --git a/mock-dashboard.png b/mock-dashboard.png
new file mode 100644
index 00000000..8046fe4e
Binary files /dev/null and b/mock-dashboard.png differ
diff --git a/mock-routes.png b/mock-routes.png
new file mode 100644
index 00000000..e56d6465
Binary files /dev/null and b/mock-routes.png differ
diff --git a/ui/src/api/queries/executions.ts b/ui/src/api/queries/executions.ts
index a8142881..d898ef21 100644
--- a/ui/src/api/queries/executions.ts
+++ b/ui/src/api/queries/executions.ts
@@ -6,10 +6,10 @@ export function useExecutionStats(
   timeFrom: string | undefined,
   timeTo: string | undefined,
   routeId?: string,
-  group?: string,
+  application?: string,
 ) {
   return useQuery({
-    queryKey: ['executions', 'stats', timeFrom, timeTo, routeId, group],
+    queryKey: ['executions', 'stats', timeFrom, timeTo, routeId, application],
     queryFn: async () => {
       const { data, error } = await api.GET('/search/stats', {
         params: {
@@ -17,7 +17,7 @@ export function useExecutionStats(
             from: timeFrom!,
             to: timeTo || undefined,
             routeId: routeId || undefined,
-            group: group || undefined,
+            application: application || undefined,
           },
         },
       });
@@ -49,10 +49,10 @@ export function useStatsTimeseries(
   timeFrom: string | undefined,
   timeTo: string | undefined,
   routeId?: string,
-  group?: string,
+  application?: string,
 ) {
   return useQuery({
-    queryKey: ['executions', 'timeseries', timeFrom, timeTo, routeId, group],
+    queryKey: ['executions', 'timeseries', timeFrom, timeTo, routeId, application],
     queryFn: async () => {
       const { data, error } = await api.GET('/search/stats/timeseries', {
         params: {
@@ -61,7 +61,7 @@ export function useStatsTimeseries(
             to: timeTo || undefined,
             buckets: 24,
             routeId: routeId || undefined,
-            group: group || undefined,
+            application: application || undefined,
           },
         },
       });
diff --git a/ui/src/api/schema.d.ts b/ui/src/api/schema.d.ts
index e14ae3d2..a9440b73 100644
--- a/ui/src/api/schema.d.ts
+++ b/ui/src/api/schema.d.ts
@@ -1079,7 +1079,7 @@ export interface components {
             routeId?: string;
             agentId?: string;
             processorType?: string;
-            group?: string;
+            application?: string;
             agentIds?: string[];
             /** Format: int32 */
             offset?: number;
@@ -1092,7 +1092,7 @@ export interface components {
             executionId: string;
             routeId: string;
             agentId: string;
-            groupName: string;
+            applicationName: string;
             status: string;
             /** Format: date-time */
             startTime: string;
@@ -1327,7 +1327,7 @@ export interface components {
             errorStackTrace: string;
             diagramContentHash: string;
             processors: components["schemas"]["ProcessorNode"][];
-            groupName?: string;
+            applicationName?: string;
             children?: components["schemas"]["ProcessorNode"][];
         };
         ProcessorNode: {
@@ -2977,7 +2977,7 @@ export interface operations {
                 from: string;
                 to?: string;
                 routeId?: string;
-                group?: string;
+                application?: string;
             };
             header?: never;
             path?: never;
@@ -3003,7 +3003,7 @@ export interface operations {
                 to?: string;
                 buckets?: number;
                 routeId?: string;
-                group?: string;
+                application?: string;
             };
             header?: never;
             path?: never;
diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index 08a48dac..fac58a57 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -36,7 +36,7 @@ export default function Dashboard() {
   const { data: searchResult } = useSearchExecutions({
     timeFrom, timeTo,
     routeId: routeId || undefined,
-    group: appId || undefined,
+    application: appId || undefined,
     offset: 0, limit: 50,
   }, true);
   const { data: detail } = useExecutionDetail(selectedId);
@@ -94,7 +94,7 @@ export default function Dashboard() {
       ),
     },
     { key: 'routeId', header: 'Route', sortable: true, render: (v) => <span>{String(v)}</span> },
-    { key: 'groupName', header: 'Application', sortable: true, render: (v) => <span>{String(v ?? '')}</span> },
+    { key: 'applicationName', header: 'Application', sortable: true, render: (v) => <span>{String(v ?? '')}</span> },
     { key: 'executionId', header: 'Exchange ID', sortable: true, render: (v) => <MonoText size="xs">{String(v)}</MonoText> },
     { key: 'startTime', header: 'Started', sortable: true, render: (v) => <MonoText size="xs">{new Date(v as string).toISOString().replace('T', ' ').slice(0, 19)}</MonoText> },
     {
diff --git a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
index 8f30f43f..817a8260 100644
--- a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
+++ b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
@@ -94,7 +94,7 @@ export default function ExchangeDetail() {
     <div>
       <Breadcrumb items={[
         { label: 'Dashboard', href: '/apps' },
-        { label: detail.groupName || 'App', href: `/apps/${detail.groupName}` },
+        { label: detail.applicationName || 'App', href: `/apps/${detail.applicationName}` },
         { label: id?.slice(0, 12) || '' },
       ]} />
 
@@ -109,11 +109,11 @@ export default function ExchangeDetail() {
                 <Badge label={detail.status} color={detail.status === 'COMPLETED' ? 'success' : 'error'} variant="filled" />
               </div>
               <div className={styles.exchangeRoute}>
-                Route: <span className={styles.routeLink} onClick={() => navigate(`/apps/${detail.groupName}/${detail.routeId}`)}>{detail.routeId}</span>
-                {detail.groupName && (
+                Route: <span className={styles.routeLink} onClick={() => navigate(`/apps/${detail.applicationName}/${detail.routeId}`)}>{detail.routeId}</span>
+                {detail.applicationName && (
                   <>
                     <span className={styles.headerDivider}>&middot;</span>
-                    App: <MonoText size="xs">{detail.groupName}</MonoText>
+                    App: <MonoText size="xs">{detail.applicationName}</MonoText>
                   </>
                 )}
               </div>
diff --git a/ui/src/pages/Routes/RouteDetail.tsx b/ui/src/pages/Routes/RouteDetail.tsx
index e4cf1407..2f23e9a6 100644
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -51,7 +51,7 @@ export default function RouteDetail() {
     timeFrom,
     timeTo,
     routeId: routeId || undefined,
-    group: appId || undefined,
+    application: appId || undefined,
     offset: 0,
     limit: 50,
   });
@@ -59,7 +59,7 @@ export default function RouteDetail() {
     timeFrom,
     timeTo,
     routeId: routeId || undefined,
-    group: appId || undefined,
+    application: appId || undefined,
     status: 'FAILED',
     offset: 0,
     limit: 200,
diff --git a/ui/tsconfig.app.tsbuildinfo b/ui/tsconfig.app.tsbuildinfo
new file mode 100644
index 00000000..284eb469
--- /dev/null
+++ b/ui/tsconfig.app.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/config.ts","./src/main.tsx","./src/router.tsx","./src/swagger-ui-dist.d.ts","./src/vite-env.d.ts","./src/api/client.ts","./src/api/schema.d.ts","./src/api/types.ts","./src/api/queries/agents.ts","./src/api/queries/catalog.ts","./src/api/queries/diagrams.ts","./src/api/queries/executions.ts","./src/api/queries/admin/admin-api.ts","./src/api/queries/admin/audit.ts","./src/api/queries/admin/database.ts","./src/api/queries/admin/opensearch.ts","./src/api/queries/admin/rbac.ts","./src/api/queries/admin/thresholds.ts","./src/auth/loginpage.tsx","./src/auth/oidccallback.tsx","./src/auth/protectedroute.tsx","./src/auth/auth-store.ts","./src/auth/use-auth.ts","./src/components/layoutshell.tsx","./src/pages/admin/auditlogpage.tsx","./src/pages/admin/databaseadminpage.tsx","./src/pages/admin/oidcconfigpage.tsx","./src/pages/admin/opensearchadminpage.tsx","./src/pages/admin/rbacpage.tsx","./src/pages/agenthealth/agenthealth.tsx","./src/pages/agentinstance/agentinstance.tsx","./src/pages/dashboard/dashboard.tsx","./src/pages/exchangedetail/exchangedetail.tsx","./src/pages/routes/routesmetrics.tsx","./src/pages/swagger/swaggerpage.tsx"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/ui/tsconfig.node.tsbuildinfo b/ui/tsconfig.node.tsbuildinfo
new file mode 100644
index 00000000..62c7bf92
--- /dev/null
+++ b/ui/tsconfig.node.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/ui/tsconfig.tsbuildinfo b/ui/tsconfig.tsbuildinfo
new file mode 100644
index 00000000..1968d6a0
--- /dev/null
+++ b/ui/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./vite.config.ts","./src/config.ts","./src/main.tsx","./src/router.tsx","./src/swagger-ui-dist.d.ts","./src/vite-env.d.ts","./src/api/client.ts","./src/api/schema.d.ts","./src/api/types.ts","./src/api/queries/agents.ts","./src/api/queries/catalog.ts","./src/api/queries/diagrams.ts","./src/api/queries/executions.ts","./src/api/queries/admin/admin-api.ts","./src/api/queries/admin/audit.ts","./src/api/queries/admin/database.ts","./src/api/queries/admin/opensearch.ts","./src/api/queries/admin/rbac.ts","./src/api/queries/admin/thresholds.ts","./src/auth/loginpage.tsx","./src/auth/oidccallback.tsx","./src/auth/protectedroute.tsx","./src/auth/auth-store.ts","./src/auth/use-auth.ts","./src/components/layoutshell.tsx","./src/pages/admin/auditlogpage.tsx","./src/pages/admin/databaseadminpage.tsx","./src/pages/admin/oidcconfigpage.tsx","./src/pages/admin/opensearchadminpage.tsx","./src/pages/admin/rbacpage.tsx","./src/pages/agenthealth/agenthealth.tsx","./src/pages/agentinstance/agentinstance.tsx","./src/pages/dashboard/dashboard.tsx","./src/pages/exchangedetail/exchangedetail.tsx","./src/pages/routes/routesmetrics.tsx","./src/pages/swagger/swaggerpage.tsx"],"errors":true,"version":"5.9.3"}
\ No newline at end of file