PyPI - nat-engine - Versions diffs - 1__py3-none-any.whl - Mend

nat-engine 1__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (299) hide show

mannf/__init__.py +33 -0
mannf/__main__.py +10 -0
mannf/_version.py +8 -0
mannf/agents/__init__.py +7 -0
mannf/agents/analyzer_agent.py +9 -0
mannf/agents/base.py +9 -0
mannf/agents/bdi_agent.py +9 -0
mannf/agents/belief_state.py +9 -0
mannf/agents/coordinator_agent.py +9 -0
mannf/agents/executor_agent.py +9 -0
mannf/agents/monitor_agent.py +9 -0
mannf/agents/oracle_agent.py +9 -0
mannf/agents/planner_agent.py +9 -0
mannf/agents/test_agent.py +9 -0
mannf/anomaly/__init__.py +7 -0
mannf/anomaly/enhanced_detector.py +9 -0
mannf/cli.py +9 -0
mannf/core/__init__.py +26 -0
mannf/core/agents/__init__.py +52 -0
mannf/core/agents/accessibility_scanner_agent.py +245 -0
mannf/core/agents/analyzer_agent.py +224 -0
mannf/core/agents/autonomous_loop_agent.py +1086 -0
mannf/core/agents/autonomous_loop_models.py +62 -0
mannf/core/agents/autonomous_run_differ.py +427 -0
mannf/core/agents/base.py +128 -0
mannf/core/agents/bdi_agent.py +330 -0
mannf/core/agents/belief_state.py +202 -0
mannf/core/agents/browser_coordinator_agent.py +224 -0
mannf/core/agents/browser_executor_agent.py +410 -0
mannf/core/agents/coordinator_agent.py +262 -0
mannf/core/agents/executor_agent.py +222 -0
mannf/core/agents/monitor_agent.py +188 -0
mannf/core/agents/oracle_agent.py +150 -0
mannf/core/agents/performance_testing_agent.py +279 -0
mannf/core/agents/planner_agent.py +128 -0
mannf/core/agents/test_agent.py +249 -0
mannf/core/agents/visual_regression_agent.py +311 -0
mannf/core/agents/web_crawler_agent.py +510 -0
mannf/core/agents/worker_pool.py +366 -0
mannf/core/anomaly/__init__.py +14 -0
mannf/core/anomaly/enhanced_detector.py +541 -0
mannf/core/browser/__init__.py +63 -0
mannf/core/browser/accessibility_scanner.py +424 -0
mannf/core/browser/discovery_model.py +178 -0
mannf/core/browser/dom_snapshot.py +349 -0
mannf/core/browser/ingestor_bridge.py +371 -0
mannf/core/browser/performance_metrics.py +217 -0
mannf/core/browser/reflection_analyzer.py +442 -0
mannf/core/browser/scenario_generator.py +1100 -0
mannf/core/browser/security_scenario_generator.py +695 -0
mannf/core/browser/visual_comparer.py +159 -0
mannf/core/diagnostics/__init__.py +28 -0
mannf/core/diagnostics/failure_clusterer.py +211 -0
mannf/core/diagnostics/flake_detector.py +233 -0
mannf/core/diagnostics/root_cause_analyzer.py +273 -0
mannf/core/distributed/__init__.py +16 -0
mannf/core/distributed/endpoint.py +139 -0
mannf/core/distributed/system_under_test.py +207 -0
mannf/core/functional_orchestrator.py +428 -0
mannf/core/messaging/__init__.py +11 -0
mannf/core/messaging/bus.py +113 -0
mannf/core/messaging/messages.py +89 -0
mannf/core/nat_orchestrator.py +342 -0
mannf/core/neural/__init__.py +183 -0
mannf/core/orchestrator.py +272 -0
mannf/core/prioritization/__init__.py +17 -0
mannf/core/prioritization/adaptive_controller.py +509 -0
mannf/core/prioritization/belief_prioritizer.py +231 -0
mannf/core/prioritization/risk_scorer.py +430 -0
mannf/core/reporting/__init__.py +12 -0
mannf/core/reporting/unified_report.py +664 -0
mannf/core/testing/__init__.py +17 -0
mannf/core/testing/adaptive_controller.py +149 -0
mannf/core/testing/models.py +179 -0
mannf/core/validation/__init__.py +10 -0
mannf/core/validation/self_validation_runner.py +180 -0
mannf/dashboard/__init__.py +7 -0
mannf/dashboard/app.py +9 -0
mannf/dashboard/models.py +9 -0
mannf/dashboard/static/index.html +2538 -0
mannf/dashboard/telemetry.py +9 -0
mannf/distributed/__init__.py +7 -0
mannf/distributed/endpoint.py +9 -0
mannf/distributed/system_under_test.py +9 -0
mannf/healing/__init__.py +7 -0
mannf/healing/graphql_schema_diff.py +9 -0
mannf/healing/healer.py +9 -0
mannf/healing/models.py +9 -0
mannf/healing/schema_diff.py +9 -0
mannf/integrations/__init__.py +7 -0
mannf/integrations/auth.py +9 -0
mannf/integrations/graphql_parser.py +9 -0
mannf/integrations/graphql_sut.py +9 -0
mannf/integrations/http_sut.py +9 -0
mannf/integrations/openapi_parser.py +9 -0
mannf/integrations/postman_parser.py +9 -0
mannf/llm/__init__.py +7 -0
mannf/llm/anthropic_provider.py +9 -0
mannf/llm/base.py +9 -0
mannf/llm/config.py +9 -0
mannf/llm/factory.py +9 -0
mannf/llm/openai_provider.py +9 -0
mannf/llm/prompts.py +9 -0
mannf/messaging/__init__.py +7 -0
mannf/messaging/bus.py +9 -0
mannf/messaging/messages.py +9 -0
mannf/nat_orchestrator.py +9 -0
mannf/neural/__init__.py +7 -0
mannf/orchestrator.py +9 -0
mannf/prioritization/__init__.py +7 -0
mannf/prioritization/adaptive_controller.py +9 -0
mannf/prioritization/belief_prioritizer.py +9 -0
mannf/prioritization/risk_scorer.py +9 -0
mannf/product/__init__.py +29 -0
mannf/product/admin/__init__.py +3 -0
mannf/product/admin/routes.py +514 -0
mannf/product/auth/__init__.py +5 -0
mannf/product/auth/saml.py +212 -0
mannf/product/billing/__init__.py +5 -0
mannf/product/billing/audit.py +160 -0
mannf/product/billing/feature_gates.py +180 -0
mannf/product/billing/metering.py +179 -0
mannf/product/billing/notifications.py +181 -0
mannf/product/billing/plans.py +133 -0
mannf/product/billing/rate_limits.py +35 -0
mannf/product/billing/stripe_billing.py +906 -0
mannf/product/billing/tenant_auth.py +233 -0
mannf/product/billing/tenant_manager.py +873 -0
mannf/product/cli.py +3900 -0
mannf/product/cli_admin.py +408 -0
mannf/product/dashboard/__init__.py +61 -0
mannf/product/dashboard/app.py +3567 -0
mannf/product/dashboard/models.py +460 -0
mannf/product/dashboard/static/index.html +6347 -0
mannf/product/dashboard/static/manifest.json +25 -0
mannf/product/dashboard/static/pwa-icon-192.png +0 -0
mannf/product/dashboard/static/pwa-icon-512.png +0 -0
mannf/product/dashboard/static/sw.js +64 -0
mannf/product/dashboard/telemetry.py +547 -0
mannf/product/database.py +145 -0
mannf/product/demo.py +844 -0
mannf/product/doctor.py +509 -0
mannf/product/exporters/__init__.py +65 -0
mannf/product/exporters/azuredevops_exporter.py +257 -0
mannf/product/exporters/base.py +307 -0
mannf/product/exporters/bugzilla_exporter.py +200 -0
mannf/product/exporters/dedup.py +275 -0
mannf/product/exporters/finding_adapter.py +216 -0
mannf/product/exporters/github_exporter.py +197 -0
mannf/product/exporters/gitlab_exporter.py +215 -0
mannf/product/exporters/jira_exporter.py +180 -0
mannf/product/exporters/linear_exporter.py +195 -0
mannf/product/exporters/loader.py +233 -0
mannf/product/exporters/pagerduty_exporter.py +363 -0
mannf/product/exporters/sentry_exporter.py +322 -0
mannf/product/exporters/servicenow_exporter.py +240 -0
mannf/product/exporters/shortcut_exporter.py +231 -0
mannf/product/exporters/webhook_exporter.py +383 -0
mannf/product/formatters/__init__.py +18 -0
mannf/product/formatters/allure_formatter.py +161 -0
mannf/product/formatters/ctrf_formatter.py +149 -0
mannf/product/healing/__init__.py +30 -0
mannf/product/healing/graphql_schema_diff.py +152 -0
mannf/product/healing/healer.py +141 -0
mannf/product/healing/models.py +175 -0
mannf/product/healing/schema_diff.py +251 -0
mannf/product/ingestors/__init__.py +77 -0
mannf/product/ingestors/base.py +256 -0
mannf/product/ingestors/bgstm_ingestor.py +764 -0
mannf/product/ingestors/curl_ingestor.py +1019 -0
mannf/product/ingestors/cypress_ingestor.py +487 -0
mannf/product/ingestors/gherkin_ingestor.py +967 -0
mannf/product/ingestors/graphql_ingestor.py +845 -0
mannf/product/ingestors/grpc_ingestor.py +591 -0
mannf/product/ingestors/har_ingestor.py +976 -0
mannf/product/ingestors/loader.py +284 -0
mannf/product/ingestors/models.py +146 -0
mannf/product/ingestors/openapi_ingestor.py +606 -0
mannf/product/ingestors/playwright_ingestor.py +449 -0
mannf/product/ingestors/postman_ingestor.py +631 -0
mannf/product/ingestors/traffic_ingestor.py +679 -0
mannf/product/ingestors/websocket_ingestor.py +526 -0
mannf/product/integrations/__init__.py +21 -0
mannf/product/integrations/auth.py +190 -0
mannf/product/integrations/graphql_parser.py +436 -0
mannf/product/integrations/graphql_sut.py +247 -0
mannf/product/integrations/grpc_sut.py +469 -0
mannf/product/integrations/http_sut.py +237 -0
mannf/product/integrations/kafka_adapter.py +342 -0
mannf/product/integrations/openapi_parser.py +513 -0
mannf/product/integrations/postman_parser.py +467 -0
mannf/product/integrations/webhook_receiver.py +344 -0
mannf/product/integrations/websocket_sut.py +434 -0
mannf/product/llm/__init__.py +25 -0
mannf/product/llm/anthropic_provider.py +94 -0
mannf/product/llm/base.py +267 -0
mannf/product/llm/config.py +48 -0
mannf/product/llm/factory.py +42 -0
mannf/product/llm/openai_provider.py +93 -0
mannf/product/llm/prompts.py +403 -0
mannf/product/llm/root_cause_service.py +311 -0
mannf/product/llm/test_plan_models.py +78 -0
mannf/product/metrics.py +149 -0
mannf/product/middleware/__init__.py +3 -0
mannf/product/middleware/audit_middleware.py +112 -0
mannf/product/middleware/tenant_isolation.py +114 -0
mannf/product/models.py +347 -0
mannf/product/notifications/__init__.py +24 -0
mannf/product/notifications/dispatcher.py +411 -0
mannf/product/onboarding.py +190 -0
mannf/product/orchestration/__init__.py +39 -0
mannf/product/orchestration/ingest_scan_orchestrator.py +339 -0
mannf/product/orchestration/pipeline.py +401 -0
mannf/product/orchestrator.py +987 -0
mannf/product/orchestrator_models.py +269 -0
mannf/product/regression/__init__.py +36 -0
mannf/product/regression/differ.py +172 -0
mannf/product/regression/masking.py +100 -0
mannf/product/regression/models.py +232 -0
mannf/product/regression/recorder.py +124 -0
mannf/product/regression/replayer.py +168 -0
mannf/product/reports/__init__.py +10 -0
mannf/product/reports/pdf.py +132 -0
mannf/product/scheduling/__init__.py +57 -0
mannf/product/scheduling/cron_utils.py +251 -0
mannf/product/scheduling/engine.py +473 -0
mannf/product/scheduling/models.py +86 -0
mannf/product/scheduling/queue.py +894 -0
mannf/product/scheduling/store.py +235 -0
mannf/product/security/__init__.py +21 -0
mannf/product/security/belief_guided.py +143 -0
mannf/product/security/checks/__init__.py +55 -0
mannf/product/security/checks/base.py +69 -0
mannf/product/security/checks/bfla.py +77 -0
mannf/product/security/checks/bola.py +77 -0
mannf/product/security/checks/bopla.py +80 -0
mannf/product/security/checks/broken_auth.py +86 -0
mannf/product/security/checks/graphql_security.py +299 -0
mannf/product/security/checks/inventory.py +70 -0
mannf/product/security/checks/misconfig.py +158 -0
mannf/product/security/checks/resource_consumption.py +70 -0
mannf/product/security/checks/sensitive_flows.py +80 -0
mannf/product/security/checks/ssrf.py +101 -0
mannf/product/security/checks/unsafe_consumption.py +120 -0
mannf/product/security/models.py +92 -0
mannf/product/security/plugin_loader.py +182 -0
mannf/product/security/reporter.py +92 -0
mannf/product/security/scanner.py +183 -0
mannf/product/server.py +6220 -0
mannf/product/setup_wizard.py +873 -0
mannf/product/status.py +404 -0
mannf/product/storage/__init__.py +10 -0
mannf/product/storage/artifact_store.py +343 -0
mannf/product/telemetry.py +300 -0
mannf/product/uninstall.py +169 -0
mannf/product/upgrade.py +139 -0
mannf/product/weights/__init__.py +13 -0
mannf/product/weights/blob_store.py +299 -0
mannf/product/weights/factory.py +42 -0
mannf/product/weights/registry.py +159 -0
mannf/product/weights/store.py +210 -0
mannf/regression/__init__.py +7 -0
mannf/regression/differ.py +9 -0
mannf/regression/masking.py +9 -0
mannf/regression/models.py +9 -0
mannf/regression/recorder.py +9 -0
mannf/regression/replayer.py +9 -0
mannf/security/__init__.py +7 -0
mannf/security/belief_guided.py +9 -0
mannf/security/checks/__init__.py +7 -0
mannf/security/checks/base.py +9 -0
mannf/security/checks/bfla.py +9 -0
mannf/security/checks/bola.py +9 -0
mannf/security/checks/bopla.py +9 -0
mannf/security/checks/broken_auth.py +9 -0
mannf/security/checks/graphql_security.py +9 -0
mannf/security/checks/inventory.py +9 -0
mannf/security/checks/misconfig.py +9 -0
mannf/security/checks/resource_consumption.py +9 -0
mannf/security/checks/sensitive_flows.py +9 -0
mannf/security/checks/ssrf.py +9 -0
mannf/security/checks/unsafe_consumption.py +9 -0
mannf/security/models.py +9 -0
mannf/security/reporter.py +9 -0
mannf/security/scanner.py +9 -0
mannf/server.py +9 -0
mannf/testing/__init__.py +7 -0
mannf/testing/adaptive_controller.py +9 -0
mannf/testing/models.py +9 -0
mannf/weights/__init__.py +7 -0
mannf/weights/registry.py +9 -0
mannf/weights/store.py +9 -0
nat_engine-1.dist-info/METADATA +555 -0
nat_engine-1.dist-info/RECORD +299 -0
nat_engine-1.dist-info/WHEEL +5 -0
nat_engine-1.dist-info/entry_points.txt +4 -0
nat_engine-1.dist-info/licenses/LICENSE +651 -0
nat_engine-1.dist-info/licenses/NOTICE +178 -0
nat_engine-1.dist-info/top_level.txt +1 -0

mannf/dashboard/static/index.html ADDED Viewed

@@ -0,0 +1,2538 @@
+<!DOCTYPE html>
+<!--
+  NeuroAgentTest (NAT) — Multi-Agent Neural Network Framework
+  Copyright (C) 2026 NAT Contributors
+  AGPL-3.0-or-later — see LICENSE for details
+  For commercial licensing: licensing@nat-testing.io
+-->
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <title>NAT Dashboard — NeuroAgentTest</title>
+  <!-- PWA / mobile meta -->
+  <meta name="theme-color" content="#1f6feb" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="NAT" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <link rel="manifest" href="/manifest.json" />
+  <link rel="apple-touch-icon" href="/pwa-icon-192.png" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
+  <style>
+    /* ─────────────────────────────────────────────
+       CSS Reset & Design Tokens
+    ───────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg-base:     #0d1117;
+      --bg-card:     #161b22;
+      --bg-card2:    #1c2128;
+      --bg-hover:    #21262d;
+      --border:      #30363d;
+      --text-primary:   #e6edf3;
+      --text-secondary: #8b949e;
+      --text-muted:     #484f58;
+      --accent:      #58a6ff;
+      --accent-dim:  #1f6feb;
+      --green:  #3fb950;
+      --yellow: #d29922;
+      --orange: #f0883e;
+      --red:    #f85149;
+      --purple: #bc8cff;
+      --radius: 8px;
+      --shadow: 0 4px 16px rgba(0,0,0,.4);
+      --transition: .15s ease;
+    }
+    body {
+      background: var(--bg-base);
+      color: var(--text-primary);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    /* ─────────────────────────────────────────────
+       Layout
+    ───────────────────────────────────────────── */
+    .app { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
+    .topbar {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--bg-card);
+      border-bottom: 1px solid var(--border);
+      position: sticky; top: 0; z-index: 100;
+    }
+    .topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
+    .topbar-brand .logo { width: 28px; height: 28px; background: var(--accent-dim);
+      border-radius: 6px; display: flex; align-items: center; justify-content: center;
+      font-weight: 900; font-size: 16px; color: #fff; }
+    .topbar-meta { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); font-size: 12px; }
+    .ws-badge {
+      display: flex; align-items: center; gap: 5px; padding: 3px 8px;
+      border-radius: 999px; background: var(--bg-card2); border: 1px solid var(--border);
+      font-size: 11px;
+    }
+    .ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); transition: var(--transition); }
+    .ws-dot.connected { background: var(--green); box-shadow: 0 0 6px var(--green); }
+    .main { padding: 20px 24px; overflow-y: auto; }
+    /* ─────────────────────────────────────────────
+       Summary Bar
+    ───────────────────────────────────────────── */
+    .summary-bar {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .stat-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 16px 18px;
+      transition: var(--transition);
+    }
+    .stat-card:hover { border-color: var(--accent-dim); }
+    .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 6px; }
+    .stat-value { font-size: 28px; font-weight: 700; line-height: 1; }
+    .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+    .health-good  { color: var(--green); }
+    .health-warn  { color: var(--yellow); }
+    .health-bad   { color: var(--orange); }
+    .health-crit  { color: var(--red); }
+    /* ─────────────────────────────────────────────
+       Section layout
+    ───────────────────────────────────────────── */
+    .section-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .section-title { font-size: 15px; font-weight: 600; }
+    .refresh-btn {
+      background: none; border: 1px solid var(--border); color: var(--text-secondary);
+      padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
+      transition: var(--transition);
+    }
+    .refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
+    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
+    .full-col { margin-bottom: 20px; }
+    @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
+    /* ─────────────────────────────────────────────
+       Cards (general)
+    ───────────────────────────────────────────── */
+    .card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 16px;
+    }
+    /* ─────────────────────────────────────────────
+       Risk Heatmap
+    ───────────────────────────────────────────── */
+    .heatmap-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 8px;
+    }
+    .endpoint-cell {
+      border-radius: 6px;
+      padding: 10px 12px;
+      cursor: pointer;
+      transition: var(--transition);
+      border: 2px solid transparent;
+      position: relative;
+    }
+    .endpoint-cell:hover { filter: brightness(1.15); }
+    .endpoint-cell.selected { border-color: var(--accent); }
+    .endpoint-cell .ep-method { font-size: 10px; font-weight: 700; letter-spacing: .05em; opacity: .85; }
+    .endpoint-cell .ep-path   { font-size: 12px; font-weight: 600; word-break: break-all; margin: 2px 0; }
+    .endpoint-cell .ep-score  { font-size: 18px; font-weight: 700; }
+    .endpoint-cell .ep-trend  { position: absolute; top: 8px; right: 10px; font-size: 16px; }
+    .endpoint-cell .ep-badge  { font-size: 10px; margin-top: 3px; opacity: .8; }
+    /* Risk color bands */
+    .risk-green  { background: rgba(63,185,80,.18);  border-color: rgba(63,185,80,.3)  !important; color: #3fb950; }
+    .risk-yellow { background: rgba(210,153,34,.18); border-color: rgba(210,153,34,.3) !important; color: #d29922; }
+    .risk-orange { background: rgba(240,136,62,.18); border-color: rgba(240,136,62,.3) !important; color: #f0883e; }
+    .risk-red    { background: rgba(248,81,73,.18);  border-color: rgba(248,81,73,.3)  !important; color: #f85149; }
+    /* ─────────────────────────────────────────────
+       Endpoint Detail Panel
+    ───────────────────────────────────────────── */
+    #detail-panel { display: none; }
+    .detail-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+    @media (max-width: 700px) { .detail-grid { grid-template-columns: 1fr; } }
+    .detail-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); }
+    .detail-row:last-child { border-bottom: none; }
+    .detail-key { color: var(--text-secondary); }
+    .detail-val { font-weight: 600; }
+    .progress-bar { height: 6px; border-radius: 3px; background: var(--bg-card2); overflow: hidden; }
+    .progress-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
+    /* ─────────────────────────────────────────────
+       Anomaly Feed
+    ───────────────────────────────────────────── */
+    .anomaly-list { display: flex; flex-direction: column; gap: 6px; }
+    .anomaly-entry {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 10px;
+      align-items: start;
+      padding: 10px 12px;
+      background: var(--bg-card2);
+      border-radius: 6px;
+      border-left: 3px solid var(--border);
+      transition: var(--transition);
+    }
+    .anomaly-entry:hover { background: var(--bg-hover); }
+    .sev-info     { border-left-color: var(--accent); }
+    .sev-warning  { border-left-color: var(--yellow); }
+    .sev-critical { border-left-color: var(--red); }
+    .sev-badge {
+      font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px;
+      text-transform: uppercase; white-space: nowrap;
+    }
+    .sev-badge.info     { background: rgba(88,166,255,.15); color: var(--accent); }
+    .sev-badge.warning  { background: rgba(210,153,34,.2);  color: var(--yellow); }
+    .sev-badge.critical { background: rgba(248,81,73,.2);   color: var(--red); }
+    .anomaly-body .ep-name { font-weight: 600; font-size: 13px; }
+    .anomaly-body .anom-desc { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
+    .anomaly-ts { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
+    .filter-bar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
+    .filter-btn {
+      background: var(--bg-card2); border: 1px solid var(--border);
+      color: var(--text-secondary); padding: 4px 10px; border-radius: 999px;
+      cursor: pointer; font-size: 12px; transition: var(--transition);
+    }
+    .filter-btn.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
+    .filter-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
+    /* ─────────────────────────────────────────────
+       Agent Activity Panel
+    ───────────────────────────────────────────── */
+    .agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
+    .agent-card {
+      background: var(--bg-card2); border: 1px solid var(--border); border-radius: 6px; padding: 12px;
+    }
+    .agent-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+    .agent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .agent-dot.active   { background: var(--green); box-shadow: 0 0 6px var(--green); }
+    .agent-dot.inactive { background: var(--text-muted); }
+    .agent-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
+    .agent-name { font-weight: 600; font-size: 13px; }
+    .agent-task { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-style: italic; }
+    .belief-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; }
+    .belief-key { color: var(--text-muted); }
+    /* ─────────────────────────────────────────────
+       Scan History
+    ───────────────────────────────────────────── */
+    .scan-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    .scan-table th {
+      text-align: left; padding: 8px 10px; color: var(--text-secondary);
+      border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px;
+      text-transform: uppercase; letter-spacing: .05em;
+    }
+    .scan-table td { padding: 8px 10px; border-bottom: 1px solid rgba(48,54,61,.5); }
+    .scan-table tr:hover td { background: var(--bg-hover); }
+    .scan-table tr:last-child td { border-bottom: none; }
+    .status-badge {
+      font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
+      text-transform: uppercase;
+    }
+    .status-pending   { background: rgba(88,166,255,.15); color: var(--accent); }
+    .status-running   { background: rgba(188,140,255,.15); color: var(--purple); }
+    .status-completed { background: rgba(63,185,80,.15);  color: var(--green); }
+    .status-failed    { background: rgba(248,81,73,.15);  color: var(--red); }
+    /* ─────────────────────────────────────────────
+       Chart container
+    ───────────────────────────────────────────── */
+    .chart-wrap { position: relative; height: 160px; }
+    /* ─────────────────────────────────────────────
+       Empty state
+    ───────────────────────────────────────────── */
+    .empty-state {
+      text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 13px;
+    }
+    .empty-state .emoji { font-size: 32px; display: block; margin-bottom: 8px; }
+    /* ─────────────────────────────────────────────
+       Toast notifications
+    ───────────────────────────────────────────── */
+    #toast-container {
+      position: fixed; bottom: 20px; right: 20px; z-index: 9999;
+      display: flex; flex-direction: column; gap: 8px;
+    }
+    .toast {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+      padding: 10px 14px; min-width: 240px; max-width: 360px;
+      box-shadow: var(--shadow); font-size: 13px;
+      animation: slideIn .2s ease;
+    }
+    @keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+    /* Scrollbar */
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: var(--bg-base); }
+    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+    /* Pulse animation for live indicators */
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
+    .pulse { animation: pulse 2s infinite; }
+    /* ─────────────────────────────────────────────
+       Tab Navigation
+    ───────────────────────────────────────────── */
+    .tab-nav {
+      display: flex; gap: 0; margin-bottom: 20px;
+      border-bottom: 1px solid var(--border);
+    }
+    .tab-btn {
+      background: none; border: none; border-bottom: 2px solid transparent;
+      color: var(--text-secondary); padding: 10px 18px; cursor: pointer;
+      font-size: 13px; font-weight: 500; transition: var(--transition);
+      margin-bottom: -1px;
+    }
+    .tab-btn:hover { color: var(--text-primary); }
+    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: block; }
+    /* ─────────────────────────────────────────────
+       Security Tab
+    ───────────────────────────────────────────── */
+    .sec-controls-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr auto auto;
+      gap: 10px; align-items: end; flex-wrap: wrap;
+    }
+    @media (max-width: 900px) { .sec-controls-grid { grid-template-columns: 1fr 1fr; } }
+    .form-group { display: flex; flex-direction: column; gap: 4px; }
+    .form-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
+    .form-input, .form-select {
+      background: var(--bg-card2); border: 1px solid var(--border); border-radius: 6px;
+      color: var(--text-primary); padding: 7px 10px; font-size: 13px; outline: none;
+      transition: var(--transition);
+    }
+    .form-input:focus, .form-select:focus { border-color: var(--accent); }
+    .form-select option { background: var(--bg-card2); }
+    .sec-summary-cards {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 10px; margin: 16px 0;
+    }
+    @media (max-width: 700px) { .sec-summary-cards { grid-template-columns: repeat(3, 1fr); } }
+    .sec-count-card {
+      background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius);
+      padding: 12px 14px; text-align: center;
+    }
+    .sec-count-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 4px; }
+    .sec-count-value { font-size: 26px; font-weight: 700; line-height: 1; }
+    .findings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    .findings-table th {
+      text-align: left; padding: 8px 10px; color: var(--text-secondary);
+      border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px;
+      text-transform: uppercase; letter-spacing: .05em;
+    }
+    .findings-table td { padding: 8px 10px; border-bottom: 1px solid rgba(48,54,61,.5); }
+    .findings-table tr.clickable { cursor: pointer; }
+    .findings-table tr.clickable:hover td { background: var(--bg-hover); }
+    .findings-table tr:last-child td { border-bottom: none; }
+    .findings-table tr.prio-high td { background: rgba(248,81,73,.06); }
+    .findings-table tr.prio-medium td { background: rgba(210,153,34,.06); }
+    .findings-table tr.prio-low td { background: rgba(88,166,255,.04); }
+    .sev-pill {
+      font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
+      text-transform: uppercase; white-space: nowrap; display: inline-block;
+    }
+    .sev-critical { background: rgba(248,81,73,.2);   color: #f85149; }
+    .sev-high     { background: rgba(240,136,62,.2);  color: #f0883e; }
+    .sev-medium   { background: rgba(210,153,34,.2);  color: #d29922; }
+    .sev-low      { background: rgba(88,166,255,.2);  color: #58a6ff; }
+    .sev-info     { background: rgba(139,148,158,.2); color: #8b949e; }
+    .prio-badge {
+      font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
+      white-space: nowrap; display: inline-block; font-family: ui-monospace, SFMono-Regular, monospace;
+    }
+    .prio-badge-high   { background: rgba(248,81,73,.2);  color: #f85149; }
+    .prio-badge-medium { background: rgba(210,153,34,.2); color: #d29922; }
+    .prio-badge-low    { background: rgba(88,166,255,.2); color: #58a6ff; }
+    #sec-finding-detail { display: none; }
+    .finding-detail-grid {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
+    }
+    @media (max-width: 700px) { .finding-detail-grid { grid-template-columns: 1fr; } }
+    .finding-meta-row {
+      display: flex; justify-content: space-between; padding: 5px 0;
+      border-bottom: 1px solid var(--border);
+    }
+    .finding-meta-row:last-child { border-bottom: none; }
+    .finding-meta-key { color: var(--text-secondary); }
+    .finding-meta-val { font-weight: 600; text-align: right; max-width: 60%; word-break: break-all; }
+    .finding-evidence {
+      background: var(--bg-base); border: 1px solid var(--border); border-radius: 6px;
+      padding: 10px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px;
+      white-space: pre-wrap; word-break: break-all; overflow-x: auto;
+      color: var(--text-secondary); max-height: 200px; overflow-y: auto;
+    }
+    #sec-scan-status { font-size: 12px; color: var(--text-secondary); }
+    /* ─────────────────────────────────────────────
+       Agents Tab
+    ───────────────────────────────────────────── */
+    .agents-cards-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 12px;
+    }
+    .agent-full-card {
+      background: var(--bg-card2); border: 1px solid var(--border);
+      border-radius: var(--radius); padding: 14px;
+      cursor: pointer; transition: var(--transition);
+    }
+    .agent-full-card:hover { border-color: var(--accent-dim); background: var(--bg-hover); }
+    .agent-full-card.selected { border-color: var(--accent); }
+    .agent-fc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+    .agent-fc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+    .agent-fc-dot.active { background: var(--green); box-shadow: 0 0 6px var(--green); }
+    .agent-fc-dot.idle   { background: var(--text-muted); }
+    .agent-fc-role {
+      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
+      padding: 1px 6px; border-radius: 999px; background: rgba(88,166,255,.15); color: var(--accent);
+    }
+    .agent-fc-id { font-weight: 600; font-size: 13px; margin-top: 2px; }
+    .agent-fc-status { margin-left: auto; font-size: 11px; color: var(--text-muted); }
+    .agent-fc-task { font-size: 11px; color: var(--text-secondary); font-style: italic; margin-bottom: 10px; }
+    .agent-fc-stats { display: flex; flex-direction: column; gap: 6px; }
+    .agent-fc-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
+    .agent-fc-stat-label { color: var(--text-muted); }
+    .agent-fc-stat-val { font-weight: 600; }
+    .conf-bar-wrap { flex: 1; margin: 0 8px; }
+    .conf-bar { height: 5px; border-radius: 3px; background: var(--bg-card); overflow: hidden; }
+    .conf-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s ease; }
+    .agent-fc-endpoints { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
+    /* Agent Drilldown Panel */
+    #agent-drilldown-panel { display: none; }
+    .drilldown-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+    .drilldown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+    @media (max-width: 900px) { .drilldown-grid { grid-template-columns: 1fr; } }
+    .drilldown-section-title {
+      font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
+      color: var(--text-secondary); margin-bottom: 8px;
+    }
+    .beliefs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    .beliefs-table th {
+      text-align: left; padding: 6px 8px; color: var(--text-secondary);
+      border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px;
+      text-transform: uppercase; letter-spacing: .05em; cursor: pointer; user-select: none;
+    }
+    .beliefs-table th:hover { color: var(--accent); }
+    .beliefs-table td { padding: 6px 8px; border-bottom: 1px solid rgba(48,54,61,.4); }
+    .beliefs-table tr:last-child td { border-bottom: none; }
+    .beliefs-table tr:hover td { background: var(--bg-hover); }
+    .belief-bar { width: 60px; height: 5px; border-radius: 3px; background: var(--bg-card); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
+    .belief-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
+    .intent-list { display: flex; flex-direction: column; gap: 5px; }
+    .intent-item {
+      display: flex; justify-content: space-between; align-items: flex-start;
+      padding: 6px 8px; background: var(--bg-card2); border-radius: 5px; font-size: 12px;
+    }
+    .intent-action { font-weight: 600; }
+    .intent-target { color: var(--text-secondary); font-size: 11px; margin-top: 2px; }
+    .intent-score { color: var(--accent); font-weight: 700; white-space: nowrap; margin-left: 8px; }
+    .desire-list { display: flex; flex-direction: column; gap: 4px; }
+    .desire-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+    .desire-name { color: var(--text-secondary); flex: 1; }
+    .desire-weight { font-weight: 600; width: 40px; text-align: right; }
+    .desire-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--bg-card); overflow: hidden; }
+    .desire-fill { height: 100%; border-radius: 3px; background: var(--purple); }
+    .chart-wrap-tall { position: relative; height: 220px; }
+    /* ECNP Timeline */
+    .ecnp-timeline { display: flex; flex-direction: column; gap: 8px; max-height: 440px; overflow-y: auto; }
+    .ecnp-event {
+      display: grid; grid-template-columns: auto 1fr auto;
+      gap: 10px; align-items: start;
+      padding: 10px 12px; background: var(--bg-card2);
+      border-radius: 6px; border-left: 3px solid var(--border);
+      animation: slideIn .25s ease;
+    }
+    .ecnp-event.offer { border-left-color: var(--accent); }
+    .ecnp-event.bid   { border-left-color: var(--yellow); }
+    .ecnp-event.award { border-left-color: var(--green); }
+    .ecnp-badge {
+      font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px;
+      text-transform: uppercase; white-space: nowrap;
+    }
+    .ecnp-badge.offer { background: rgba(88,166,255,.15);  color: var(--accent); }
+    .ecnp-badge.bid   { background: rgba(210,153,34,.2);   color: var(--yellow); }
+    .ecnp-badge.award { background: rgba(63,185,80,.2);    color: var(--green); }
+    .ecnp-body { font-size: 12px; min-width: 0; }
+    .ecnp-sender { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .ecnp-contract { color: var(--text-secondary); font-size: 11px; font-family: ui-monospace, monospace; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .ecnp-details { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
+    .ecnp-ts { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
+    /* Belief Update Feed */
+    .belief-feed { display: flex; flex-direction: column; gap: 4px; max-height: 440px; overflow-y: auto; }
+    .belief-feed-entry {
+      font-size: 11px; font-family: ui-monospace, SFMono-Regular, monospace;
+      padding: 5px 8px; border-radius: 4px; background: var(--bg-card2);
+      border-left: 3px solid var(--border);
+      animation: slideIn .2s ease;
+    }
+    .belief-feed-entry.improving { border-left-color: var(--green); }
+    .belief-feed-entry.worsening { border-left-color: var(--red); }
+    .belief-ts    { color: var(--text-muted); }
+    .belief-agent { color: var(--accent); font-weight: 700; }
+    .belief-ep    { color: var(--text-secondary); }
+    .belief-old   { color: var(--text-muted); }
+    .belief-new-good { color: var(--green); font-weight: 700; }
+    .belief-new-bad  { color: var(--red);   font-weight: 700; }
+    .belief-ev    { color: var(--text-muted); }
+    /* All-Agents / Per-Agent chart section */
+    .agents-chart-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px; margin-top: 12px;
+    }
+    /* ─────────────────────────────────────────────
+       Queue Panel
+    ───────────────────────────────────────────── */
+    .queue-stat { font-size: 13px; color: var(--text-secondary); }
+    .queue-stat span { font-weight: 700; color: var(--text-primary); }
+    .queue-item {
+      display: flex; align-items: center; gap: 10px;
+      padding: 8px 12px; background: var(--bg-card2);
+      border-radius: 6px; margin-bottom: 6px;
+      border-left: 3px solid var(--border);
+    }
+    .queue-item.running { border-left-color: var(--purple); }
+    .queue-item.pending { border-left-color: var(--accent); }
+    .queue-item.completed { border-left-color: var(--green); }
+    .queue-item.failed { border-left-color: var(--red); }
+    .queue-progress {
+      flex: 1; height: 4px; border-radius: 2px; background: var(--bg-card); overflow: hidden;
+    }
+    .queue-progress-fill { height: 100%; border-radius: 2px; background: var(--purple); animation: pulse 1.5s infinite; }
+    /* ─────────────────────────────────────────────
+       Export Buttons
+    ───────────────────────────────────────────── */
+    .export-btn {
+      background: none; border: 1px solid var(--border); color: var(--text-secondary);
+      padding: 2px 7px; border-radius: 4px; cursor: pointer; font-size: 11px;
+      transition: var(--transition); margin-right: 3px;
+    }
+    .export-btn:hover { border-color: var(--accent); color: var(--accent); }
+    /* ─────────────────────────────────────────────
+       History Tab
+    ───────────────────────────────────────────── */
+    .history-detail-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
+    .history-detail-row:last-child { border-bottom: none; }
+    .history-detail-key { color: var(--text-secondary); }
+    .history-detail-val { font-weight: 600; }
+    .page-btn {
+      background: var(--bg-card2); border: 1px solid var(--border); color: var(--text-secondary);
+      padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
+      transition: var(--transition);
+    }
+    .page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+    .page-btn:disabled { opacity: .4; cursor: default; }
+    .page-btn.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
+    /* ─────────────────────────────────────────────
+       Settings Tab
+    ───────────────────────────────────────────── */
+    .settings-ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
+    .settings-ws-dot.connected { background: var(--green); box-shadow: 0 0 6px var(--green); }
+    /* ─────────────────────────────────────────────
+       Error Banner
+    ───────────────────────────────────────────── */
+    #error-banner {
+      display: none; padding: 10px 20px; background: rgba(248,81,73,.12);
+      border-bottom: 1px solid rgba(248,81,73,.3); font-size: 13px;
+      color: #f85149; text-align: center;
+    }
+    #error-banner a { color: #f85149; text-decoration: underline; }
+    /* ─────────────────────────────────────────────
+       Hamburger / Mobile Nav
+    ───────────────────────────────────────────── */
+    .hamburger-btn {
+      display: none; background: none; border: 1px solid var(--border);
+      color: var(--text-secondary); padding: 5px 10px; border-radius: 6px;
+      cursor: pointer; font-size: 18px; line-height: 1;
+    }
+    @media (max-width: 640px) {
+      .hamburger-btn { display: block; }
+      .tab-nav { flex-wrap: wrap; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
+      .tab-nav.open { max-height: 300px; }
+      .tab-btn { flex: 1 1 100%; border-bottom: none; border-top: 1px solid var(--border); }
+      .tab-btn.active { border-left: 3px solid var(--accent); }
+      .topbar-brand span:last-child { display: none; }
+    }
+    @media (min-width: 641px) {
+      .tab-nav { max-height: none !important; overflow: visible !important; }
+    }
+    /* ─────────────────────────────────────────────
+       Dark / Light Mode Toggle
+    ───────────────────────────────────────────── */
+    .theme-btn {
+      background: none; border: 1px solid var(--border); color: var(--text-secondary);
+      padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 14px;
+      transition: var(--transition);
+    }
+    .theme-btn:hover { border-color: var(--accent); color: var(--accent); }
+    /* Light mode override */
+    body.light-mode {
+      --bg-base:        #f6f8fa;
+      --bg-card:        #ffffff;
+      --bg-card2:       #f0f2f5;
+      --bg-hover:       #e8ecf0;
+      --border:         #d0d7de;
+      --text-primary:   #1f2328;
+      --text-secondary: #57606a;
+      --text-muted:     #8c959f;
+      --shadow: 0 4px 16px rgba(0,0,0,.08);
+    }
+  </style>
+</head>
+<body>
+<div class="app">
+  <!-- ─── Top Bar ─────────────────────────────────────── -->
+  <header class="topbar">
+    <div class="topbar-brand">
+      <div class="logo">N</div>
+      <span>NeuroAgentTest</span>
+      <span style="color:var(--text-muted);font-weight:400;">Dashboard</span>
+    </div>
+    <div class="topbar-meta">
+      <span id="last-refresh" style="font-size:11px;"></span>
+      <button class="theme-btn" id="theme-btn" onclick="toggleTheme()" title="Toggle light/dark mode">☀️</button>
+      <div class="ws-badge">
+        <div class="ws-dot" id="ws-dot"></div>
+        <span id="ws-label">Connecting…</span>
+      </div>
+    </div>
+    <button class="hamburger-btn" id="hamburger-btn" onclick="toggleMobileMenu()" aria-label="Toggle navigation">☰</button>
+  </header>
+  <!-- ─── Main Content ────────────────────────────────── -->
+  <main class="main">
+    <!-- Tab Navigation -->
+    <nav class="tab-nav" id="tab-nav">
+      <button class="tab-btn active" data-tab="overview" onclick="switchTab('overview')">📊 Overview</button>
+      <button class="tab-btn" data-tab="agents" onclick="switchTab('agents')">🤖 Agents</button>
+      <button class="tab-btn" data-tab="security" onclick="switchTab('security')">🔒 Security</button>
+      <button class="tab-btn" data-tab="history" onclick="switchTab('history')">📜 History</button>
+      <button class="tab-btn" data-tab="settings" onclick="switchTab('settings')">⚙️ Settings</button>
+    </nav>
+    <!-- ═══ Overview Tab ═══════════════════════════════ -->
+    <div id="tab-overview" class="tab-panel active">
+    <!-- Summary Bar -->
+    <div class="summary-bar" id="summary-bar">
+      <div class="stat-card">
+        <div class="stat-label">Total Scans</div>
+        <div class="stat-value" id="s-scans">—</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Endpoints Discovered</div>
+        <div class="stat-value" id="s-endpoints">—</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Tests Run</div>
+        <div class="stat-value" id="s-tests">—</div>
+        <div class="stat-sub" id="s-passrate"></div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Pass / Fail</div>
+        <div class="stat-value" id="s-passed"><span style="color:var(--green)">—</span></div>
+        <div class="stat-sub" id="s-failed-sub"></div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Unique Defects</div>
+        <div class="stat-value" id="s-defects">—</div>
+        <div class="stat-sub" id="s-defects-sub">by endpoint</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Active Anomalies</div>
+        <div class="stat-value" id="s-anomalies">—</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Health Score</div>
+        <div class="stat-value" id="s-health">—</div>
+        <div class="stat-sub" id="s-avgrisk"></div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Last Scan</div>
+        <div class="stat-value" style="font-size:14px;padding-top:4px;" id="s-lastscan">—</div>
+      </div>
+      <div class="stat-card" id="s-llm-card" style="display:none;">
+        <div class="stat-label">🤖 LLM Cases</div>
+        <div class="stat-value" id="s-llm-count">—</div>
+        <div class="stat-sub" id="s-llm-rate"></div>
+      </div>
+    </div>
+    <!-- Queue Panel -->
+    <div class="full-col card" id="queue-panel" style="margin-bottom:16px;">
+      <div class="section-header">
+        <span class="section-title">🚦 Scan Queue</span>
+        <button class="refresh-btn" onclick="loadQueue()">↻ Refresh</button>
+      </div>
+      <div id="queue-stats" style="display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap;">
+        <span class="queue-stat"><span id="q-running">0</span> running</span>
+        <span class="queue-stat"><span id="q-queued">0</span> queued</span>
+        <span class="queue-stat text-muted">capacity: <span id="q-capacity">4</span></span>
+      </div>
+      <div id="queue-list">
+        <div class="empty-state"><span class="emoji">✅</span>No active scans</div>
+      </div>
+    </div>
+    <!-- Risk Heatmap -->
+    <div class="full-col card">
+      <div class="section-header">
+        <span class="section-title">🔥 Risk Heatmap</span>
+        <button class="refresh-btn" onclick="loadEndpoints()">↻ Refresh</button>
+      </div>
+      <div class="heatmap-grid" id="heatmap-grid">
+        <div class="empty-state"><span class="emoji">📡</span>Run a scan to see endpoints</div>
+      </div>
+    </div>
+    <!-- Endpoint Detail Panel -->
+    <div class="full-col card" id="detail-panel">
+      <div class="section-header">
+        <span class="section-title" id="detail-title">Endpoint Detail</span>
+        <button class="refresh-btn" onclick="closeDetail()">✕ Close</button>
+      </div>
+      <div class="detail-grid">
+        <!-- Risk Breakdown -->
+        <div>
+          <div style="font-size:12px;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;">Risk Breakdown</div>
+          <div class="detail-row"><span class="detail-key">Overall Risk</span><span class="detail-val" id="d-risk">—</span></div>
+          <div class="detail-row"><span class="detail-key">Fault Rate</span><span class="detail-val" id="d-fault">—</span></div>
+          <div style="margin:4px 0 8px;"><div class="progress-bar"><div class="progress-fill" id="pb-fault" style="background:var(--red);width:0%"></div></div></div>
+          <div class="detail-row"><span class="detail-key">Latency Signal</span><span class="detail-val" id="d-latency">—</span></div>
+          <div style="margin:4px 0 8px;"><div class="progress-bar"><div class="progress-fill" id="pb-latency" style="background:var(--orange);width:0%"></div></div></div>
+          <div class="detail-row"><span class="detail-key">Diversity Signal</span><span class="detail-val" id="d-diversity">—</span></div>
+          <div style="margin:4px 0 8px;"><div class="progress-bar"><div class="progress-fill" id="pb-diversity" style="background:var(--yellow);width:0%"></div></div></div>
+          <div class="detail-row"><span class="detail-key">Belief Signal</span><span class="detail-val" id="d-belief">—</span></div>
+          <div class="detail-row"><span class="detail-key">Run Count</span><span class="detail-val" id="d-runs">—</span></div>
+          <div class="detail-row"><span class="detail-key">Fault Count</span><span class="detail-val" id="d-faults">—</span></div>
+          <div class="detail-row"><span class="detail-key">Trend</span><span class="detail-val" id="d-trend">—</span></div>
+          <div class="detail-row"><span class="detail-key">Anomalies</span><span class="detail-val" id="d-anoms">—</span></div>
+        </div>
+        <!-- Chart placeholder -->
+        <div>
+          <div style="font-size:12px;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;">Risk Signal Breakdown</div>
+          <div class="chart-wrap"><canvas id="detail-chart"></canvas></div>
+        </div>
+      </div>
+    </div>
+    <!-- Healing Summary (shown when healing data is present) -->
+    <div id="d-healing-section" style="display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);">
+      <div style="font-size:12px;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;">🩹 Self-Healing Summary</div>
+      <div class="detail-row"><span class="detail-key">Tests Regenerated</span><span class="detail-val" id="d-heal-regenerated">—</span></div>
+      <div class="detail-row"><span class="detail-key">Tests Removed</span><span class="detail-val" id="d-heal-removed">—</span></div>
+      <div class="detail-row"><span class="detail-key">Tests Kept</span><span class="detail-val" id="d-heal-kept">—</span></div>
+    </div>
+    </div>
+    <div class="two-col">
+      <!-- Anomaly Feed -->
+      <div class="card">
+        <div class="section-header">
+          <span class="section-title">⚠️ Anomaly Feed</span>
+          <button class="refresh-btn" onclick="loadAnomalies()">↻ Refresh</button>
+        </div>
+        <div class="filter-bar" id="anomaly-filters">
+          <button class="filter-btn active" data-sev="all" onclick="filterAnomalies(this)">All</button>
+          <button class="filter-btn" data-sev="critical" onclick="filterAnomalies(this)">Critical</button>
+          <button class="filter-btn" data-sev="warning"  onclick="filterAnomalies(this)">Warning</button>
+          <button class="filter-btn" data-sev="info"     onclick="filterAnomalies(this)">Info</button>
+        </div>
+        <div class="anomaly-list" id="anomaly-list">
+          <div class="empty-state"><span class="emoji">✅</span>No anomalies detected</div>
+        </div>
+      </div>
+      <!-- Agent Activity -->
+      <div class="card">
+        <div class="section-header">
+          <span class="section-title">🧠 Agent Activity</span>
+          <button class="refresh-btn" onclick="renderAgents()">↻ Refresh</button>
+        </div>
+        <div class="agent-grid" id="agent-grid">
+          <!-- Populated by renderAgents() -->
+        </div>
+      </div>
+    </div>
+    <!-- Scan History -->
+    <div class="full-col card">
+      <div class="section-header">
+        <span class="section-title">📋 Scan History</span>
+        <button class="refresh-btn" onclick="loadScans()">↻ Refresh</button>
+      </div>
+      <div style="overflow-x:auto;">
+        <table class="scan-table" id="scan-table">
+          <thead>
+            <tr>
+              <th>Scan ID</th>
+              <th>Status</th>
+              <th>Spec</th>
+              <th>Base URL</th>
+              <th>Tests</th>
+              <th>Pass Rate</th>
+              <th>Healing</th>
+              <th>Started</th>
+              <th>Completed</th>
+              <th>Export</th>
+            </tr>
+          </thead>
+          <tbody id="scan-tbody">
+            <tr><td colspan="10" class="empty-state"><span class="emoji">🔍</span>No scans yet</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    </div><!-- /tab-overview -->
+    <!-- ═══ Security Tab ════════════════════════════════ -->
+    <div id="tab-security" class="tab-panel">
+      <!-- Security Scan Controls -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🔍 Security Scan Controls</span>
+          <button class="refresh-btn" onclick="loadSecurityData()">↻ Refresh</button>
+        </div>
+        <div class="sec-controls-grid">
+          <div class="form-group">
+            <label class="form-label" for="sec-spec-path">Spec Path</label>
+            <input class="form-input" id="sec-spec-path" type="text" placeholder="openapi.yaml" />
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="sec-base-url">Base URL</label>
+            <input class="form-input" id="sec-base-url" type="text" placeholder="https://api.example.com" />
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="sec-severity">Severity Threshold</label>
+            <select class="form-select" id="sec-severity">
+              <option value="low">Low</option>
+              <option value="medium" selected>Medium</option>
+              <option value="high">High</option>
+              <option value="critical">Critical</option>
+            </select>
+          </div>
+          <div class="form-group" style="justify-content:flex-end;">
+            <button class="refresh-btn" id="run-sec-scan-btn" onclick="runSecurityScan()" style="padding:8px 16px;font-size:13px;">▶ Run Security Scan</button>
+            <span id="sec-scan-status"></span>
+          </div>
+        </div>
+      </div>
+      <!-- Security Summary -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">📊 Security Summary</span>
+        </div>
+        <div class="sec-summary-cards">
+          <div class="sec-count-card">
+            <div class="sec-count-label">Critical 🔴</div>
+            <div class="sec-count-value sev-critical" id="sec-critical-count">0</div>
+          </div>
+          <div class="sec-count-card">
+            <div class="sec-count-label">High 🟠</div>
+            <div class="sec-count-value sev-high" id="sec-high-count">0</div>
+          </div>
+          <div class="sec-count-card">
+            <div class="sec-count-label">Medium 🟡</div>
+            <div class="sec-count-value sev-medium" id="sec-medium-count">0</div>
+          </div>
+          <div class="sec-count-card">
+            <div class="sec-count-label">Low 🔵</div>
+            <div class="sec-count-value sev-low" id="sec-low-count">0</div>
+          </div>
+          <div class="sec-count-card">
+            <div class="sec-count-label">Info ℹ️</div>
+            <div class="sec-count-value sev-info" id="sec-info-count">0</div>
+          </div>
+        </div>
+      </div>
+      <!-- Security Findings Table -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🛡️ Security Findings</span>
+        </div>
+        <div style="overflow-x:auto;">
+          <table class="findings-table" id="sec-findings-table">
+            <thead>
+              <tr>
+                <th>Severity</th>
+                <th>Check ID</th>
+                <th>Endpoint</th>
+                <th>Title</th>
+                <th>Risk Priority</th>
+                <th>Confidence</th>
+              </tr>
+            </thead>
+            <tbody id="sec-findings-tbody">
+              <tr><td colspan="6"><div class="empty-state"><span class="emoji">🔒</span>Run a security scan to see findings</div></td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <!-- Prioritization Info Card -->
+      <div class="full-col card" id="sec-prioritization-card" style="margin-bottom:16px;display:none;">
+        <div class="section-header">
+          <span class="section-title">🎯 Belief-Guided Prioritization</span>
+        </div>
+        <div id="sec-prioritization-summary" style="font-size:13px;color:var(--text-secondary);margin-bottom:10px;"></div>
+        <div style="overflow-x:auto;">
+          <table class="findings-table" id="sec-prio-table">
+            <thead>
+              <tr>
+                <th>Endpoint</th>
+                <th>Priority Score</th>
+                <th>Belief Score</th>
+                <th>Risk Score</th>
+                <th>Checks Run</th>
+              </tr>
+            </thead>
+            <tbody id="sec-prio-tbody"></tbody>
+          </table>
+        </div>
+      </div>
+      <!-- Finding Detail Panel -->
+      <div class="full-col card" id="sec-finding-detail">
+        <div class="section-header">
+          <span class="section-title" id="sec-detail-title">Finding Detail</span>
+          <button class="refresh-btn" onclick="closeSecurityDetail()">✕ Close</button>
+        </div>
+        <div class="finding-detail-grid">
+          <div>
+            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;">Metadata</div>
+            <div class="finding-meta-row"><span class="finding-meta-key">Check ID</span><span class="finding-meta-val" id="fd-check-id">—</span></div>
+            <div class="finding-meta-row"><span class="finding-meta-key">Endpoint</span><span class="finding-meta-val" id="fd-endpoint">—</span></div>
+            <div class="finding-meta-row"><span class="finding-meta-key">Severity</span><span class="finding-meta-val" id="fd-severity">—</span></div>
+            <div class="finding-meta-row"><span class="finding-meta-key">Title</span><span class="finding-meta-val" id="fd-title">—</span></div>
+            <div class="finding-meta-row"><span class="finding-meta-key">CWE ID</span><span class="finding-meta-val" id="fd-cwe-id">—</span></div>
+            <div style="margin-top:12px;">
+              <div style="font-size:12px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;">Description</div>
+              <p id="fd-description" style="font-size:13px;color:var(--text-secondary);line-height:1.6;"></p>
+            </div>
+            <div style="margin-top:12px;">
+              <div style="font-size:12px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;">Remediation</div>
+              <p id="fd-remediation" style="font-size:13px;color:var(--text-secondary);line-height:1.6;"></p>
+            </div>
+          </div>
+          <div>
+            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;">Evidence</div>
+            <pre class="finding-evidence" id="fd-evidence"></pre>
+          </div>
+        </div>
+      </div>
+    </div><!-- /tab-security -->
+    <!-- ═══ Agents Tab ════════════════════════════════ -->
+    <div id="tab-agents" class="tab-panel">
+      <!-- Agent Cards -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🤖 Active Agents</span>
+          <button class="refresh-btn" onclick="loadAgents()">↻ Refresh</button>
+        </div>
+        <div class="agents-cards-grid" id="agents-cards-grid">
+          <div class="empty-state"><span class="emoji">🤖</span>No agents active — start a scan to see live agent data</div>
+        </div>
+      </div>
+      <!-- Agent Drilldown Panel -->
+      <div class="full-col card" id="agent-drilldown-panel" style="margin-bottom:16px;">
+        <div class="drilldown-header">
+          <span class="section-title" id="dd-agent-title">Agent Detail</span>
+          <button class="refresh-btn" onclick="closeAgentDrilldown()">✕ Close</button>
+        </div>
+        <div class="drilldown-grid">
+          <!-- Left: Belief state table, intentions, desires -->
+          <div>
+            <div class="drilldown-section-title">Belief State</div>
+            <div style="overflow-x:auto;margin-bottom:14px;">
+              <table class="beliefs-table" id="dd-beliefs-table">
+                <thead>
+                  <tr>
+                    <th onclick="sortBeliefs('endpoint')">Endpoint ⇅</th>
+                    <th onclick="sortBeliefs('likelihood')">Fault Likelihood ⇅</th>
+                    <th onclick="sortBeliefs('confidence')">Confidence ⇅</th>
+                  </tr>
+                </thead>
+                <tbody id="dd-beliefs-tbody"></tbody>
+              </table>
+            </div>
+            <div class="drilldown-section-title">Intentions</div>
+            <div class="intent-list" id="dd-intent-list" style="margin-bottom:14px;"></div>
+            <div class="drilldown-section-title">Desires</div>
+            <div class="desire-list" id="dd-desire-list"></div>
+          </div>
+          <!-- Right: Belief trace chart for this agent -->
+          <div>
+            <div class="drilldown-section-title">Belief Trace</div>
+            <div class="chart-wrap-tall"><canvas id="dd-belief-chart"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <!-- ECNP Timeline + Belief Update Feed -->
+      <div class="two-col" style="margin-bottom:20px;">
+        <!-- ECNP Timeline -->
+        <div class="card">
+          <div class="section-header">
+            <span class="section-title">🤝 ECNP Message Flow</span>
+            <button class="refresh-btn" onclick="clearEcnpTimeline()">✕ Clear</button>
+          </div>
+          <div class="ecnp-timeline" id="ecnp-timeline">
+            <div class="empty-state"><span class="emoji">🤝</span>Awaiting ECNP events…</div>
+          </div>
+        </div>
+        <!-- Belief Update Feed -->
+        <div class="card">
+          <div class="section-header">
+            <span class="section-title">📡 Belief Update Feed</span>
+            <button class="refresh-btn" onclick="clearBeliefFeed()">✕ Clear</button>
+          </div>
+          <div class="belief-feed" id="belief-feed">
+            <div class="empty-state"><span class="emoji">📡</span>Awaiting belief updates…</div>
+          </div>
+        </div>
+      </div>
+      <!-- Belief Trace Charts Section -->
+      <div class="full-col card" id="belief-chart-section">
+        <div class="section-header">
+          <span class="section-title">📈 Belief Traces</span>
+          <div style="display:flex;gap:8px;">
+            <button class="filter-btn active" id="chart-view-all" onclick="switchChartView('all')">All Agents</button>
+            <button class="filter-btn" id="chart-view-per" onclick="switchChartView('per')">Per Agent</button>
+          </div>
+        </div>
+        <!-- All Agents overlay chart -->
+        <div id="chart-all-agents" style="margin-top:12px;">
+          <div class="chart-wrap-tall"><canvas id="all-agents-chart"></canvas></div>
+        </div>
+        <!-- Per-agent charts grid -->
+        <div id="chart-per-agent" style="display:none;margin-top:12px;">
+          <div class="agents-chart-grid" id="per-agent-charts-grid">
+            <div class="empty-state"><span class="emoji">📈</span>No agent data yet</div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /tab-agents -->
+    <!-- ═══ History Tab ═══════════════════════════════ -->
+    <div id="tab-history" class="tab-panel">
+      <!-- History Filters -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">📜 Scan History</span>
+          <button class="refresh-btn" onclick="loadHistory()">↻ Refresh</button>
+        </div>
+        <div class="filter-bar" id="history-status-filters" style="margin-bottom:12px;">
+          <button class="filter-btn active" data-status="all" onclick="filterHistory(this)">All</button>
+          <button class="filter-btn" data-status="completed" onclick="filterHistory(this)">Completed</button>
+          <button class="filter-btn" data-status="failed" onclick="filterHistory(this)">Failed</button>
+          <button class="filter-btn" data-status="running" onclick="filterHistory(this)">Running</button>
+        </div>
+        <div style="overflow-x:auto;">
+          <table class="scan-table" id="history-table">
+            <thead>
+              <tr>
+                <th>Scan ID</th>
+                <th>Status</th>
+                <th>Spec</th>
+                <th>Base URL</th>
+                <th>Tests</th>
+                <th>Pass Rate</th>
+                <th>Started</th>
+                <th>Duration</th>
+                <th>Export</th>
+              </tr>
+            </thead>
+            <tbody id="history-tbody">
+              <tr><td colspan="9" class="empty-state"><span class="emoji">🔍</span>No scans yet</td></tr>
+            </tbody>
+          </table>
+        </div>
+        <div id="history-pagination" style="display:flex;gap:8px;justify-content:center;margin-top:12px;"></div>
+      </div>
+      <!-- Expanded Scan Detail -->
+      <div class="full-col card" id="history-detail-panel" style="display:none;margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title" id="history-detail-title">Scan Detail</span>
+          <button class="refresh-btn" onclick="closeHistoryDetail()">✕ Close</button>
+        </div>
+        <div id="history-detail-content"></div>
+      </div>
+    </div><!-- /tab-history -->
+    <!-- ═══ Settings Tab ════════════════════════════════ -->
+    <div id="tab-settings" class="tab-panel">
+      <!-- Connection Status -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🔌 Connection Status</span>
+          <button class="refresh-btn" onclick="loadSettings()">↻ Refresh</button>
+        </div>
+        <div id="settings-connection-status" style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
+          <div class="ws-dot" id="settings-ws-dot"></div>
+          <span id="settings-ws-label">Checking…</span>
+        </div>
+      </div>
+      <!-- API Key & Auth -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🔑 API Key &amp; Authentication</span>
+        </div>
+        <div id="settings-auth-content">
+          <div class="detail-row"><span class="detail-key">API Key Configured</span><span class="detail-val" id="cfg-api-key-configured">—</span></div>
+          <div class="detail-row"><span class="detail-key">API Key Preview</span><span class="detail-val" id="cfg-api-key-preview" style="font-family:monospace;">—</span></div>
+        </div>
+        <div style="margin-top:12px;padding:12px;background:var(--bg-card2);border-radius:6px;font-size:12px;color:var(--text-secondary);">
+          <div style="font-weight:600;margin-bottom:4px;">Using the API Key in CI/CD</div>
+          <code>curl -H "X-API-Key: &lt;your-key&gt;" http://localhost:8080/api/v1/scan</code>
+        </div>
+      </div>
+      <!-- Server Configuration -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">⚙️ Server Configuration</span>
+        </div>
+        <div id="settings-server-content">
+          <div class="detail-row"><span class="detail-key">Host</span><span class="detail-val" id="cfg-host">—</span></div>
+          <div class="detail-row"><span class="detail-key">Port</span><span class="detail-val" id="cfg-port">—</span></div>
+          <div class="detail-row"><span class="detail-key">Workers</span><span class="detail-val" id="cfg-workers">—</span></div>
+          <div class="detail-row"><span class="detail-key">Log Level</span><span class="detail-val" id="cfg-log-level">—</span></div>
+          <div class="detail-row"><span class="detail-key">Rate Limit</span><span class="detail-val" id="cfg-rate-limit">—</span></div>
+        </div>
+      </div>
+      <!-- Queue Configuration -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🚦 Queue Configuration</span>
+        </div>
+        <div id="settings-queue-content">
+          <div class="detail-row"><span class="detail-key">Max Concurrent Scans</span><span class="detail-val" id="cfg-max-concurrent">—</span></div>
+          <div class="detail-row"><span class="detail-key">Max Queue Depth</span><span class="detail-val" id="cfg-max-queue">—</span></div>
+          <div class="detail-row"><span class="detail-key">Scan Timeout (s)</span><span class="detail-val" id="cfg-timeout">—</span></div>
+        </div>
+      </div>
+      <!-- Webhook Configuration -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🪝 Webhook Integration</span>
+        </div>
+        <div id="settings-webhook-content">
+          <div class="detail-row"><span class="detail-key">Default Webhook URL</span><span class="detail-val" id="cfg-webhook-url">—</span></div>
+          <div class="detail-row"><span class="detail-key">HMAC Signing Configured</span><span class="detail-val" id="cfg-hmac">—</span></div>
+        </div>
+        <div style="margin-top:12px;padding:12px;background:var(--bg-card2);border-radius:6px;font-size:12px;color:var(--text-secondary);">
+          <div style="font-weight:600;margin-bottom:4px;">Webhook Payload Example</div>
+          <code>POST &lt;webhook_url&gt;<br>X-NAT-Signature: sha256=&lt;hmac&gt;<br>{"event":"scan.completed","scan_id":"…"}</code>
+        </div>
+      </div>
+      <!-- CI/CD Integration Guide -->
+      <div class="full-col card" style="margin-bottom:16px;">
+        <div class="section-header">
+          <span class="section-title">🚀 CI/CD Integration Guide</span>
+        </div>
+        <div style="font-size:13px;color:var(--text-secondary);line-height:1.7;">
+          <p style="margin-bottom:8px;"><strong>GitHub Actions</strong></p>
+          <pre style="background:var(--bg-base);border:1px solid var(--border);border-radius:6px;padding:10px;font-size:12px;overflow-x:auto;">- uses: bg-playground/nat-action@v1
+  with:
+    spec: openapi.yaml
+    base-url: https://api.example.com
+    api-key: ${{ secrets.NAT_API_KEY }}</pre>
+          <p style="margin-top:12px;margin-bottom:8px;"><strong>Docker</strong></p>
+          <pre style="background:var(--bg-base);border:1px solid var(--border);border-radius:6px;padding:10px;font-size:12px;overflow-x:auto;">docker run --rm ghcr.io/bg-playground/nat-engine:latest \
+  nat scan --spec openapi.yaml --base-url https://api.example.com</pre>
+        </div>
+      </div>
+    </div><!-- /tab-settings -->
+  </main>
+</div>
+<div id="error-banner">
+  ⚠️ <span id="error-banner-msg">Connection lost</span>
+  — <a href="https://github.com/bg-playground/MultiAgent-Neural-Network-Framework/blob/main/docs/guides/dashboard.md" target="_blank">Troubleshooting Guide</a>
+  <button onclick="document.getElementById('error-banner').style.display='none'" style="margin-left:12px;background:none;border:none;color:#f85149;cursor:pointer;font-size:14px;">✕</button>
+</div>
+<!-- Toast container -->
+<div id="toast-container"></div>
+<script>
+/* ────────────────────────────────────────────────────────────────
+   NAT Dashboard — vanilla JS SPA
+   ──────────────────────────────────────────────────────────────── */
+// ─── State ──────────────────────────────────────────────────────
+let _summary = null;
+let _endpoints = [];
+let _anomalies = [];
+let _scans = [];
+let _selectedEndpoint = null;
+let _anomalyFilter = 'all';
+let _detailChart = null;
+let _ws = null;
+let _refreshTimer = null;
+let _secFindings = [];
+let _secPrioritization = [];
+let _activeTab = 'overview';
+let _secScanPollTimer = null;
+let _historyPage = 1;
+let _historyPerPage = 20;
+let _historyStatusFilter = 'all';
+let _historyScans = [];
+let _settings = null;
+let _queueData = null;
+// ─── Agents Tab State ────────────────────────────────────────────
+let _agentStates    = {};   // agent_id → last agent_state payload
+let _ecnpEvents     = [];   // array of ecnp_event payloads (capped at 100)
+let _beliefUpdates  = [];   // array of belief_update payloads (capped at 50)
+let _beliefCharts   = {};   // agent_id → Chart.js instance (per-agent trace)
+let _allAgentsChart = null; // Chart.js instance for All Agents overlay
+let _ddChart        = null; // Chart.js instance inside drilldown panel
+let _selectedAgentId = null;
+let _beliefTraceData = {};  // agent_id → { labels: [...], endpoints: { ep: [...] } }
+let _chartUpdateTimer = null;
+let _chartView = 'all';     // 'all' | 'per'
+let _beliefsSortKey = 'likelihood';
+let _beliefsSortAsc = false;
+let _agentColors = {};      // agent_id → colour string
+let _paletteIdx  = 0;
+const AGENT_PALETTE = ['#58a6ff','#3fb950','#d29922','#f0883e','#bc8cff','#f85149','#56d364','#e3b341'];
+const MAX_TRACE_POINTS = 60;
+const MAX_ECNP_EVENTS  = 100;
+const MAX_BELIEF_UPDATES = 50;
+// ─── Utility ────────────────────────────────────────────────────
+function riskClass(score) {
+  if (score < 0.3) return 'risk-green';
+  if (score < 0.6) return 'risk-yellow';
+  if (score < 0.8) return 'risk-orange';
+  return 'risk-red';
+}
+function healthClass(score) {
+  if (score >= 0.8) return 'health-good';
+  if (score >= 0.6) return 'health-warn';
+  if (score >= 0.4) return 'health-bad';
+  return 'health-crit';
+}
+function trendArrow(trend) {
+  if (!trend) return '→';
+  const t = trend.toLowerCase();
+  if (t === 'up' || t === 'increasing') return '↑';
+  if (t === 'down' || t === 'decreasing') return '↓';
+  return '→';
+}
+function pct(v) { return (v * 100).toFixed(1) + '%'; }
+function fmt2(v) { return parseFloat(v).toFixed(3); }
+function relTime(iso) {
+  if (!iso) return '—';
+  const diff = (Date.now() - new Date(iso).getTime()) / 1000;
+  if (diff < 60)   return Math.round(diff) + 's ago';
+  if (diff < 3600) return Math.round(diff / 60) + 'm ago';
+  if (diff < 86400) return Math.round(diff / 3600) + 'h ago';
+  return new Date(iso).toLocaleDateString();
+}
+function formatDuration(startIso, endIso) {
+  if (!startIso || !endIso) return '—';
+  const durationSec = Math.round((new Date(endIso).getTime() - new Date(startIso).getTime()) / 1000);
+  if (durationSec < 0) return '—';
+  if (durationSec >= 60) return Math.round(durationSec / 60) + 'm ' + (durationSec % 60) + 's';
+  return durationSec + 's';
+}
+function shortId(id) {
+  return id ? id.substring(0, 8) + '…' : '—';
+}
+function toast(msg, duration = 4000) {
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.textContent = msg;
+  document.getElementById('toast-container').appendChild(el);
+  setTimeout(() => el.remove(), duration);
+}
+async function apiFetch(path) {
+  const res = await fetch(path);
+  if (!res.ok) throw new Error(`${path}: HTTP ${res.status}`);
+  return res.json();
+}
+// ─── Summary Bar ────────────────────────────────────────────────
+async function loadSummary() {
+  try {
+    _summary = await apiFetch('/api/v1/dashboard/summary');
+    renderSummary();
+  } catch (e) {
+    console.warn('Summary fetch failed', e);
+  }
+}
+function renderSummary() {
+  if (!_summary) return;
+  const s = _summary;
+  document.getElementById('s-scans').textContent     = s.total_scans;
+  document.getElementById('s-endpoints').textContent = s.endpoints_discovered;
+  document.getElementById('s-tests').textContent     = s.total_tests_run;
+  document.getElementById('s-passrate').textContent  = s.total_tests_run > 0
+    ? 'Pass rate: ' + pct(s.pass_rate) : '';
+  document.getElementById('s-anomalies').textContent = s.active_anomalies;
+  const hEl = document.getElementById('s-health');
+  hEl.textContent  = pct(s.health_score);
+  hEl.className    = 'stat-value ' + healthClass(s.health_score);
+  document.getElementById('s-avgrisk').textContent   = 'Avg risk: ' + fmt2(s.avg_risk_score);
+  document.getElementById('s-lastscan').textContent  = relTime(s.last_scan_at);
+  document.getElementById('last-refresh').textContent = 'Updated ' + new Date().toLocaleTimeString();
+  // Pass/Fail card
+  const passedEl = document.getElementById('s-passed');
+  if (passedEl) {
+    const passedCount = s.total_tests_run > 0 ? Math.round(s.total_tests_run * s.pass_rate) : 0;
+    const failedCount = s.total_tests_run - passedCount;
+    passedEl.innerHTML = `<span style="color:var(--green)">${passedCount}</span>`;
+    const failedSub = document.getElementById('s-failed-sub');
+    if (failedSub) failedSub.textContent = `${failedCount} failed`;
+  }
+  // Unique defects (anomalies by endpoint count)
+  const defectsEl = document.getElementById('s-defects');
+  if (defectsEl) defectsEl.textContent = s.anomalies_found || 0;
+}
+// ─── Heatmap ────────────────────────────────────────────────────
+async function loadEndpoints() {
+  try {
+    _endpoints = await apiFetch('/api/v1/dashboard/endpoints');
+    renderHeatmap();
+  } catch (e) {
+    console.warn('Endpoints fetch failed', e);
+  }
+}
+function renderHeatmap() {
+  const grid = document.getElementById('heatmap-grid');
+  if (!_endpoints.length) {
+    grid.innerHTML = '<div class="empty-state"><span class="emoji">📡</span>Run a scan to see endpoints</div>';
+    return;
+  }
+  grid.innerHTML = _endpoints.map((ep, i) => {
+    const rc = riskClass(ep.risk_score);
+    const parts = ep.endpoint.split(' ');
+    const method = parts.length > 1 ? parts[0] : 'GET';
+    const path   = parts.length > 1 ? parts.slice(1).join(' ') : ep.endpoint;
+    const sel    = _selectedEndpoint === ep.endpoint ? ' selected' : '';
+    return `<div class="endpoint-cell ${rc}${sel}" onclick="selectEndpoint(${i})" title="${ep.endpoint}">
+      <div class="ep-trend">${trendArrow(ep.trend)}</div>
+      <div class="ep-method">${escHtml(method)}</div>
+      <div class="ep-path">${escHtml(path)}</div>
+      <div class="ep-score">${fmt2(ep.risk_score)}</div>
+      <div class="ep-badge">${ep.run_count} runs · ${ep.anomaly_count} anomalies</div>
+    </div>`;
+  }).join('');
+}
+function escHtml(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+// ─── Detail Panel ───────────────────────────────────────────────
+function selectEndpoint(idx) {
+  const ep = _endpoints[idx];
+  if (!ep) return;
+  _selectedEndpoint = ep.endpoint;
+  renderHeatmap(); // re-highlight
+  showDetail(ep);
+}
+function showDetail(ep) {
+  document.getElementById('detail-panel').style.display = 'block';
+  document.getElementById('detail-title').textContent   = ep.endpoint;
+  const rc = riskClass(ep.risk_score);
+  const color = { 'risk-green': '#3fb950', 'risk-yellow': '#d29922', 'risk-orange': '#f0883e', 'risk-red': '#f85149' }[rc] || '#58a6ff';
+  document.getElementById('d-risk').textContent     = fmt2(ep.risk_score);
+  document.getElementById('d-risk').style.color     = color;
+  document.getElementById('d-fault').textContent    = pct(ep.fault_rate);
+  document.getElementById('d-latency').textContent  = fmt2(ep.latency_signal);
+  document.getElementById('d-diversity').textContent = fmt2(ep.diversity_signal);
+  document.getElementById('d-belief').textContent   = fmt2(ep.belief_signal);
+  document.getElementById('d-runs').textContent     = ep.run_count;
+  document.getElementById('d-faults').textContent   = ep.fault_count;
+  document.getElementById('d-trend').textContent    = trendArrow(ep.trend) + ' ' + ep.trend;
+  document.getElementById('d-anoms').textContent    = ep.anomaly_count;
+  document.getElementById('pb-fault').style.width    = pct(Math.min(ep.fault_rate, 1));
+  document.getElementById('pb-latency').style.width  = pct(Math.min(ep.latency_signal, 1));
+  document.getElementById('pb-diversity').style.width = pct(Math.min(ep.diversity_signal, 1));
+  // Radar/doughnut chart
+  if (_detailChart) { _detailChart.destroy(); _detailChart = null; }
+  const ctx = document.getElementById('detail-chart').getContext('2d');
+  _detailChart = new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: ['Fault Rate', 'Latency', 'Diversity', 'Belief'],
+      datasets: [{
+        data: [
+          ep.fault_rate,
+          ep.latency_signal,
+          ep.diversity_signal,
+          ep.belief_signal
+        ],
+        backgroundColor: ['rgba(248,81,73,.7)','rgba(240,136,62,.7)','rgba(210,153,34,.7)','rgba(88,166,255,.7)'],
+        borderColor: 'transparent',
+        borderWidth: 0,
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { position: 'bottom', labels: { color: '#8b949e', font: { size: 11 }, padding: 8, boxWidth: 10 } }
+      }
+    }
+  });
+  document.getElementById('detail-panel').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+function closeDetail() {
+  _selectedEndpoint = null;
+  document.getElementById('detail-panel').style.display = 'none';
+  renderHeatmap();
+}
+// ─── Anomaly Feed ────────────────────────────────────────────────
+async function loadAnomalies() {
+  try {
+    _anomalies = await apiFetch('/api/v1/dashboard/anomalies');
+    renderAnomalies();
+  } catch (e) {
+    console.warn('Anomaly fetch failed', e);
+  }
+}
+function filterAnomalies(btn) {
+  document.querySelectorAll('#anomaly-filters .filter-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  _anomalyFilter = btn.dataset.sev;
+  renderAnomalies();
+}
+function renderAnomalies() {
+  const list = document.getElementById('anomaly-list');
+  let filtered = _anomalies;
+  if (_anomalyFilter !== 'all') {
+    filtered = _anomalies.filter(a => a.severity === _anomalyFilter);
+  }
+  if (!filtered.length) {
+    list.innerHTML = '<div class="empty-state"><span class="emoji">✅</span>No anomalies' +
+      (_anomalyFilter !== 'all' ? ' for this filter' : ' detected') + '</div>';
+    return;
+  }
+  list.innerHTML = filtered.slice(0, 50).map(a => `
+    <div class="anomaly-entry sev-${escHtml(a.severity)}">
+      <span class="sev-badge ${escHtml(a.severity)}">${escHtml(a.severity)}</span>
+      <div class="anomaly-body">
+        <div class="ep-name">${escHtml(a.endpoint)}</div>
+        <div class="anom-desc">${escHtml(a.anomaly_type)} — ${escHtml(a.description)}</div>
+      </div>
+      <span class="anomaly-ts">${relTime(a.detected_at)}</span>
+    </div>`).join('');
+}
+// ─── Agent Activity ──────────────────────────────────────────────
+function renderAgents() {
+  // Build representative agents based on BDI architecture (NAT roles)
+  const roles = [
+    { id: 'planner-1',     role: 'Planner',     task: 'Analyzing spec and generating test plan',   beliefs: { fault_prior: 0.2, confidence: 0.85 } },
+    { id: 'executor-1',    role: 'Executor',     task: 'Executing prioritized test cases',          beliefs: { throughput: 0.92, error_rate: 0.05 } },
+    { id: 'executor-2',    role: 'Executor',     task: 'Awaiting task assignment',                  beliefs: { throughput: 0.0,  error_rate: 0.0  } },
+    { id: 'analyzer-1',    role: 'Analyzer',     task: 'Scoring risk and detecting anomalies',      beliefs: { avg_risk: _summary ? _summary.avg_risk_score : 0, anomalies: _summary ? _summary.anomalies_found : 0 } },
+    { id: 'coordinator-1', role: 'Coordinator',  task: 'Allocating ECNP contracts to executors',   beliefs: { active_contracts: _endpoints.length, capacity: 4 } },
+  ];
+  const active = _scans.some(s => s.status === 'running');
+  document.getElementById('agent-grid').innerHTML = roles.map(ag => {
+    const isActive = active || ag.role === 'Analyzer' || ag.role === 'Coordinator';
+    return `<div class="agent-card">
+      <div class="agent-header">
+        <div class="agent-dot ${isActive ? 'active' : 'inactive'}"></div>
+        <div>
+          <div class="agent-role">${escHtml(ag.role)}</div>
+          <div class="agent-name">${escHtml(ag.id)}</div>
+        </div>
+      </div>
+      <div class="agent-task">${escHtml(ag.task)}</div>
+      ${Object.entries(ag.beliefs).map(([k, v]) =>
+        `<div class="belief-row"><span class="belief-key">${escHtml(k)}</span><span>${typeof v === 'number' ? fmt2(v) : escHtml(String(v))}</span></div>`
+      ).join('')}
+    </div>`;
+  }).join('');
+}
+// ─── Queue Panel ────────────────────────────────────────────────
+async function loadQueue() {
+  try {
+    _queueData = await apiFetch('/api/v1/queue');
+    renderQueue();
+  } catch (e) {
+    console.warn('Queue fetch failed', e);
+  }
+}
+function renderQueue() {
+  if (!_queueData) return;
+  document.getElementById('q-running').textContent  = _queueData.running || 0;
+  document.getElementById('q-queued').textContent   = _queueData.queued || 0;
+  document.getElementById('q-capacity').textContent = _queueData.capacity || 4;
+  const listEl = document.getElementById('queue-list');
+  if (!listEl) return;
+  const running = _queueData.running || 0;
+  const queued  = _queueData.queued  || 0;
+  if (running === 0 && queued === 0) {
+    listEl.innerHTML = '<div class="empty-state"><span class="emoji">✅</span>No active scans</div>';
+    return;
+  }
+  // Build queue display from the locally cached _scans list
+  let html = '';
+  _scans.filter(s => s.status === 'running').forEach(s => {
+    html += `<div class="queue-item running">
+      <span class="status-badge status-running">running</span>
+      <span style="font-family:monospace;font-size:12px;">${shortId(s.scan_id)}</span>
+      <span style="color:var(--text-muted);font-size:11px;">${escHtml(s.spec_name || '—')}</span>
+      <div class="queue-progress"><div class="queue-progress-fill" style="width:100%"></div></div>
+    </div>`;
+  });
+  _scans.filter(s => s.status === 'pending').forEach((s, i) => {
+    html += `<div class="queue-item pending">
+      <span class="status-badge status-pending">queued #${i + 1}</span>
+      <span style="font-family:monospace;font-size:12px;">${shortId(s.scan_id)}</span>
+      <span style="color:var(--text-muted);font-size:11px;">${escHtml(s.spec_name || '—')}</span>
+    </div>`;
+  });
+  listEl.innerHTML = html || '<div class="empty-state"><span class="emoji">✅</span>No active scans</div>';
+}
+// ─── Export ─────────────────────────────────────────────────────
+function exportScan(scanId, format) {
+  const a = document.createElement('a');
+  a.href = `/api/v1/scan/${encodeURIComponent(scanId)}/export?format=${encodeURIComponent(format)}`;
+  a.download = `scan-${scanId}.${format}`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+// ─── History Tab ─────────────────────────────────────────────────
+async function loadHistory() {
+  try {
+    const qs = `per_page=${_historyPerPage}&page=${_historyPage}` +
+      (_historyStatusFilter !== 'all' ? `&status=${encodeURIComponent(_historyStatusFilter)}` : '');
+    _historyScans = await apiFetch(`/api/v1/scans?${qs}`);
+    renderHistory();
+  } catch (e) {
+    console.warn('History fetch failed', e);
+    toast('⚠️ Failed to load scan history');
+  }
+}
+function filterHistory(btn) {
+  document.querySelectorAll('#history-status-filters .filter-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  _historyStatusFilter = btn.dataset.status;
+  _historyPage = 1;
+  loadHistory();
+}
+function renderHistory() {
+  const tbody = document.getElementById('history-tbody');
+  if (!tbody) return;
+  if (!_historyScans.length) {
+    tbody.innerHTML = '<tr><td colspan="9"><div class="empty-state"><span class="emoji">🔍</span>No scans found</div></td></tr>';
+    renderHistoryPagination();
+    return;
+  }
+  tbody.innerHTML = _historyScans.map((s, i) => {
+    const durationStr = formatDuration(s.created_at, s.completed_at);
+    return `<tr style="cursor:pointer;" onclick="showHistoryDetail(${i})">
+      <td style="font-family:monospace;font-size:12px;" title="${escHtml(s.scan_id)}">${shortId(s.scan_id)}</td>
+      <td><span class="status-badge status-${escHtml(s.status)}">${escHtml(s.status)}</span></td>
+      <td>${escHtml(s.spec_name || '—')}</td>
+      <td style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escHtml(s.base_url||'')}">${escHtml(s.base_url || '—')}</td>
+      <td>${s.total || 0}</td>
+      <td>${s.total > 0 ? pct(s.pass_rate) : '—'}</td>
+      <td>${relTime(s.created_at)}</td>
+      <td>${durationStr}</td>
+      <td>
+        <button class="export-btn" onclick="event.stopPropagation();exportScan('${escHtml(s.scan_id)}','json')">⬇ JSON</button>
+        <button class="export-btn" onclick="event.stopPropagation();exportScan('${escHtml(s.scan_id)}','csv')">⬇ CSV</button>
+        <button class="export-btn" onclick="event.stopPropagation();exportScan('${escHtml(s.scan_id)}','html')">⬇ HTML</button>
+      </td>
+    </tr>`;
+  }).join('');
+  renderHistoryPagination();
+}
+function renderHistoryPagination() {
+  const el = document.getElementById('history-pagination');
+  if (!el) return;
+  const prevDisabled = _historyPage <= 1 ? 'disabled' : '';
+  const nextDisabled = _historyScans.length < _historyPerPage ? 'disabled' : '';
+  el.innerHTML = `
+    <button class="page-btn" ${prevDisabled} onclick="changeHistoryPage(${_historyPage - 1})">← Prev</button>
+    <span class="page-btn active">Page ${_historyPage}</span>
+    <button class="page-btn" ${nextDisabled} onclick="changeHistoryPage(${_historyPage + 1})">Next →</button>`;
+}
+function changeHistoryPage(page) {
+  if (page < 1) return;
+  _historyPage = page;
+  loadHistory();
+}
+function showHistoryDetail(idx) {
+  const s = _historyScans[idx];
+  if (!s) return;
+  const panel = document.getElementById('history-detail-panel');
+  const content = document.getElementById('history-detail-content');
+  const title = document.getElementById('history-detail-title');
+  if (!panel || !content || !title) return;
+  title.textContent = 'Scan ' + s.scan_id;
+  const durationStr = formatDuration(s.created_at, s.completed_at);
+  content.innerHTML = `
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
+      <div>
+        <div class="history-detail-row"><span class="history-detail-key">Scan ID</span><span class="history-detail-val" style="font-family:monospace;font-size:12px;">${escHtml(s.scan_id)}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Status</span><span class="history-detail-val"><span class="status-badge status-${escHtml(s.status)}">${escHtml(s.status)}</span></span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Spec</span><span class="history-detail-val">${escHtml(s.spec_name || '—')}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Base URL</span><span class="history-detail-val">${escHtml(s.base_url || '—')}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Started</span><span class="history-detail-val">${escHtml(s.created_at || '—')}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Completed</span><span class="history-detail-val">${escHtml(s.completed_at || '—')}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Duration</span><span class="history-detail-val">${durationStr}</span></div>
+      </div>
+      <div>
+        <div class="history-detail-row"><span class="history-detail-key">Total Tests</span><span class="history-detail-val">${s.total || 0}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Passed</span><span class="history-detail-val" style="color:var(--green);">${s.passed || 0}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Failed</span><span class="history-detail-val" style="color:var(--red);">${s.failed || 0}</span></div>
+        <div class="history-detail-row"><span class="history-detail-key">Pass Rate</span><span class="history-detail-val">${s.total > 0 ? pct(s.pass_rate) : '—'}</span></div>
+        ${s.llm_cases_generated > 0 ? `<div class="history-detail-row"><span class="history-detail-key">LLM Cases</span><span class="history-detail-val" style="color:var(--purple);">${s.llm_cases_generated}</span></div>` : ''}
+      </div>
+    </div>
+    <div style="display:flex;gap:8px;margin-top:14px;">
+      <button class="export-btn" style="font-size:12px;padding:4px 10px;" onclick="exportScan('${escHtml(s.scan_id)}','json')">⬇ Export JSON</button>
+      <button class="export-btn" style="font-size:12px;padding:4px 10px;" onclick="exportScan('${escHtml(s.scan_id)}','csv')">⬇ Export CSV</button>
+      <button class="export-btn" style="font-size:12px;padding:4px 10px;" onclick="exportScan('${escHtml(s.scan_id)}','html')">⬇ Export HTML</button>
+    </div>`;
+  panel.style.display = 'block';
+  panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+function closeHistoryDetail() {
+  const panel = document.getElementById('history-detail-panel');
+  if (panel) panel.style.display = 'none';
+}
+// ─── Settings Tab ────────────────────────────────────────────────
+async function loadSettings() {
+  try {
+    _settings = await apiFetch('/api/v1/dashboard/settings');
+    renderSettings();
+  } catch (e) {
+    console.warn('Settings fetch failed', e);
+    toast('⚠️ Failed to load settings');
+  }
+}
+function renderSettings() {
+  if (!_settings) return;
+  const s = _settings.server || {};
+  const a = _settings.auth   || {};
+  const q = _settings.queue  || {};
+  const w = _settings.webhook || {};
+  _setText('cfg-host',      s.host || '—');
+  _setText('cfg-port',      s.port != null ? String(s.port) : '—');
+  _setText('cfg-workers',   s.workers != null ? String(s.workers) : '—');
+  _setText('cfg-log-level', s.log_level || '—');
+  _setText('cfg-rate-limit', _settings.rate_limit || 'unlimited');
+  _setText('cfg-api-key-configured', a.api_key_configured ? '✅ Yes' : '⚠️ Not set');
+  _setText('cfg-api-key-preview', a.api_key_preview || '(none)');
+  _setText('cfg-max-concurrent', String(q.max_concurrent_scans || 4));
+  _setText('cfg-max-queue',      String(q.max_queue_depth || 20));
+  _setText('cfg-timeout',        String(q.scan_timeout_seconds || 300));
+  _setText('cfg-webhook-url', w.default_url || '(not configured)');
+  _setText('cfg-hmac',        w.hmac_configured ? '✅ Yes' : '⚠️ No');
+  const settingsWsDot = document.getElementById('settings-ws-dot');
+  const settingsWsLabel = document.getElementById('settings-ws-label');
+  if (settingsWsDot && settingsWsLabel) {
+    const connected = _ws && _ws.readyState === WebSocket.OPEN;
+    settingsWsDot.className = 'ws-dot' + (connected ? ' connected' : '');
+    settingsWsLabel.textContent = connected ? '🟢 Connected' : '🔴 Disconnected';
+  }
+}
+function _setText(id, text) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = text;
+}
+// ─── Agents Tab ─────────────────────────────────────────────────
+function agentColor(id) {
+  if (!_agentColors[id]) {
+    _agentColors[id] = AGENT_PALETTE[_paletteIdx % AGENT_PALETTE.length];
+    _paletteIdx++;
+  }
+  return _agentColors[id];
+}
+async function loadAgents() {
+  try {
+    const agents = await apiFetch('/api/v1/dashboard/agents');
+    agents.forEach(a => { _agentStates[a.agent_id] = a; });
+    renderAgentCards();
+    scheduleChartUpdate();
+  } catch (e) {
+    console.warn('Agents fetch failed', e);
+  }
+}
+function renderAgentCards() {
+  const grid = document.getElementById('agents-cards-grid');
+  const agents = Object.values(_agentStates);
+  if (!agents.length) {
+    grid.innerHTML = '<div class="empty-state"><span class="emoji">🤖</span>No agents active — start a scan to see live agent data</div>';
+    return;
+  }
+  grid.innerHTML = agents.map(ag => {
+    const role = ag.agent_role || 'Unknown';
+    const confVals = Object.values(ag.confidence || {});
+    const confidence = confVals.length ? confVals.reduce((a, b) => a + b, 0) / confVals.length : 0;
+    const confPct = Math.round(confidence * 100);
+    const endpointCount = Object.keys(ag.beliefs || {}).length;
+    const firstIntent = (ag.intentions || [])[0];
+    const taskDesc = firstIntent
+      ? (firstIntent.action || '') + (firstIntent.target ? ': ' + firstIntent.target : '')
+      : 'Idle';
+    const sel = _selectedAgentId === ag.agent_id ? ' selected' : '';
+    return `<div class="agent-full-card${sel}" onclick="openAgentDrilldown('${escHtml(ag.agent_id)}')" data-agent-id="${escHtml(ag.agent_id)}">
+      <div class="agent-fc-header">
+        <div class="agent-fc-dot active"></div>
+        <div>
+          <div class="agent-fc-role">${escHtml(role)}</div>
+          <div class="agent-fc-id">${escHtml(ag.agent_id)}</div>
+        </div>
+        <span class="agent-fc-status">● active</span>
+      </div>
+      <div class="agent-fc-task">${escHtml(taskDesc)}</div>
+      <div class="agent-fc-stats">
+        <div class="agent-fc-stat-row">
+          <span class="agent-fc-stat-label">Confidence</span>
+          <div class="conf-bar-wrap"><div class="conf-bar"><div class="conf-fill" style="width:${confPct}%"></div></div></div>
+          <span class="agent-fc-stat-val">${confPct}%</span>
+        </div>
+        <div class="agent-fc-stat-row">
+          <span class="agent-fc-stat-label">Entropy</span>
+          <span class="agent-fc-stat-val">${fmt2(ag.entropy || 0)}</span>
+        </div>
+      </div>
+      <div class="agent-fc-endpoints">${endpointCount} endpoint${endpointCount !== 1 ? 's' : ''} tracked</div>
+    </div>`;
+  }).join('');
+}
+function openAgentDrilldown(agentId) {
+  const ag = _agentStates[agentId];
+  if (!ag) return;
+  _selectedAgentId = agentId;
+  renderAgentCards();
+  document.getElementById('dd-agent-title').textContent = (ag.agent_role || 'Agent') + ' · ' + agentId;
+  document.getElementById('agent-drilldown-panel').style.display = 'block';
+  _beliefsSortKey = 'likelihood';
+  _beliefsSortAsc = false;
+  renderDrilldownBeliefs(ag);
+  const intentList = document.getElementById('dd-intent-list');
+  const intentions = ag.intentions || [];
+  if (!intentions.length) {
+    intentList.innerHTML = '<div style="font-size:12px;color:var(--text-muted)">No active intentions</div>';
+  } else {
+    intentList.innerHTML = intentions.map(i => `
+      <div class="intent-item">
+        <div>
+          <div class="intent-action">${escHtml(i.action || '—')}</div>
+          <div class="intent-target">${escHtml(i.target || '—')}</div>
+        </div>
+        <div class="intent-score">${fmt2(i.score || 0)}</div>
+      </div>`).join('');
+  }
+  const desireList = document.getElementById('dd-desire-list');
+  const desireEntries = Object.entries(ag.desires || {});
+  if (!desireEntries.length) {
+    desireList.innerHTML = '<div style="font-size:12px;color:var(--text-muted)">No desires</div>';
+  } else {
+    desireList.innerHTML = desireEntries.map(([k, v]) => {
+      const p = Math.round(v * 100);
+      return `<div class="desire-item">
+        <span class="desire-name">${escHtml(k)}</span>
+        <div class="desire-bar"><div class="desire-fill" style="width:${p}%"></div></div>
+        <span class="desire-weight">${fmt2(v)}</span>
+      </div>`;
+    }).join('');
+  }
+  renderDrilldownChart(agentId);
+  document.getElementById('agent-drilldown-panel').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+function renderDrilldownBeliefs(ag) {
+  const tbody = document.getElementById('dd-beliefs-tbody');
+  const beliefs = ag.beliefs || {};
+  const confidence = ag.confidence || {};
+  let rows = Object.entries(beliefs).map(([ep, fl]) => ({
+    endpoint: ep, likelihood: fl, confidence: confidence[ep] || 0
+  }));
+  rows.sort((a, b) => {
+    const va = a[_beliefsSortKey], vb = b[_beliefsSortKey];
+    if (typeof va === 'string') return _beliefsSortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
+    return _beliefsSortAsc ? va - vb : vb - va;
+  });
+  if (!rows.length) {
+    tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;color:var(--text-muted);padding:12px;">No beliefs yet</td></tr>';
+    return;
+  }
+  tbody.innerHTML = rows.map(r => {
+    const flPct = Math.round(r.likelihood * 100);
+    const flColor = r.likelihood > 0.6 ? '#f85149' : r.likelihood > 0.35 ? '#f0883e' : '#3fb950';
+    return `<tr>
+      <td style="font-family:monospace;font-size:11px;">${escHtml(r.endpoint)}</td>
+      <td><span class="belief-bar"><span class="belief-fill" style="width:${flPct}%;background:${flColor}"></span></span>${fmt2(r.likelihood)}</td>
+      <td>${Math.round(r.confidence * 100)}%</td>
+    </tr>`;
+  }).join('');
+}
+function sortBeliefs(key) {
+  if (_beliefsSortKey === key) {
+    _beliefsSortAsc = !_beliefsSortAsc;
+  } else {
+    _beliefsSortKey = key;
+    _beliefsSortAsc = false;
+  }
+  if (_selectedAgentId && _agentStates[_selectedAgentId]) {
+    renderDrilldownBeliefs(_agentStates[_selectedAgentId]);
+  }
+}
+function closeAgentDrilldown() {
+  _selectedAgentId = null;
+  document.getElementById('agent-drilldown-panel').style.display = 'none';
+  if (_ddChart) { _ddChart.destroy(); _ddChart = null; }
+  renderAgentCards();
+}
+// ─── Belief Trace Data ──────────────────────────────────────────
+function updateBeliefTrace(agentId, beliefs, timestamp) {
+  if (!_beliefTraceData[agentId]) {
+    _beliefTraceData[agentId] = { labels: [], endpoints: {} };
+  }
+  const trace = _beliefTraceData[agentId];
+  const label = new Date(timestamp).toLocaleTimeString();
+  trace.labels.push(label);
+  if (trace.labels.length > MAX_TRACE_POINTS) trace.labels.shift();
+  Object.entries(beliefs).forEach(([ep, val]) => {
+    if (!trace.endpoints[ep]) trace.endpoints[ep] = [];
+    trace.endpoints[ep].push(val);
+    if (trace.endpoints[ep].length > MAX_TRACE_POINTS) trace.endpoints[ep].shift();
+  });
+}
+function _makeBeliefChartConfig(labels, datasets) {
+  return {
+    type: 'line',
+    data: { labels, datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      scales: {
+        x: {
+          ticks: { color: '#8b949e', font: { size: 10 }, maxTicksLimit: 8 },
+          grid: { color: 'rgba(48,54,61,.5)' },
+        },
+        y: {
+          min: 0, max: 1,
+          ticks: { color: '#8b949e', font: { size: 10 } },
+          grid: { color: 'rgba(48,54,61,.5)' },
+          title: { display: true, text: 'Fault Likelihood', color: '#8b949e', font: { size: 10 } },
+        },
+      },
+      plugins: {
+        legend: { position: 'bottom', labels: { color: '#8b949e', font: { size: 10 }, padding: 6, boxWidth: 10 } },
+      },
+    },
+  };
+}
+function renderDrilldownChart(agentId) {
+  if (_ddChart) { _ddChart.destroy(); _ddChart = null; }
+  const ctx = document.getElementById('dd-belief-chart').getContext('2d');
+  const trace = _beliefTraceData[agentId];
+  if (!trace || !trace.labels.length) {
+    _ddChart = new Chart(ctx, _makeBeliefChartConfig([], []));
+    return;
+  }
+  const datasets = Object.entries(trace.endpoints).map(([ep, vals], i) => ({
+    label: ep,
+    data: vals,
+    borderColor: AGENT_PALETTE[i % AGENT_PALETTE.length],
+    backgroundColor: 'transparent',
+    tension: 0.3,
+    borderWidth: 1.5,
+    pointRadius: 2,
+  }));
+  _ddChart = new Chart(ctx, _makeBeliefChartConfig(trace.labels, datasets));
+}
+// ─── Chart Update (throttled ~1 fps) ────────────────────────────
+function scheduleChartUpdate() {
+  if (_chartUpdateTimer) return;
+  _chartUpdateTimer = setTimeout(() => {
+    _chartUpdateTimer = null;
+    _doChartUpdate();
+  }, 1000);
+}
+function _doChartUpdate() {
+  if (_chartView === 'all') {
+    _updateAllAgentsChart();
+  } else {
+    _updatePerAgentCharts();
+  }
+  if (_selectedAgentId) {
+    renderDrilldownChart(_selectedAgentId);
+  }
+}
+function _updateAllAgentsChart() {
+  const ctx = document.getElementById('all-agents-chart').getContext('2d');
+  const agentIds = Object.keys(_beliefTraceData);
+  const datasets = agentIds.map(id => {
+    const trace = _beliefTraceData[id];
+    const eps = Object.values(trace.endpoints);
+    const avgData = trace.labels.map((_, ti) => {
+      const vals = eps.map(arr => arr[ti]).filter(v => v !== undefined);
+      return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+    });
+    return {
+      label: id,
+      data: avgData,
+      borderColor: agentColor(id),
+      backgroundColor: 'transparent',
+      tension: 0.3,
+      borderWidth: 2,
+      pointRadius: 2,
+    };
+  });
+  const labels = agentIds.length ? (_beliefTraceData[agentIds[0]].labels || []) : [];
+  if (_allAgentsChart) {
+    _allAgentsChart.data.labels = labels;
+    _allAgentsChart.data.datasets = datasets;
+    _allAgentsChart.update('none');
+  } else {
+    _allAgentsChart = new Chart(ctx, _makeBeliefChartConfig(labels, datasets));
+  }
+}
+function _updatePerAgentCharts() {
+  const grid = document.getElementById('per-agent-charts-grid');
+  const agents = Object.keys(_agentStates);
+  if (!agents.length) {
+    grid.innerHTML = '<div class="empty-state"><span class="emoji">📈</span>No agent data yet</div>';
+    return;
+  }
+  const placeholder = grid.querySelector('.empty-state');
+  if (placeholder) placeholder.remove();
+  agents.forEach(id => {
+    const safeId = id.replace(/[^a-z0-9]/gi, '-');
+    let wrapper = document.getElementById('chart-agent-' + safeId);
+    if (!wrapper) {
+      wrapper = document.createElement('div');
+      wrapper.id = 'chart-agent-' + safeId;
+      wrapper.className = 'card';
+      wrapper.innerHTML = '<div style="font-size:12px;font-weight:600;margin-bottom:8px;">' + escHtml(id) + '</div>'
+        + '<div class="chart-wrap-tall"><canvas id="canvas-agent-' + safeId + '"></canvas></div>';
+      grid.appendChild(wrapper);
+    }
+    const trace = _beliefTraceData[id];
+    if (!trace) return;
+    const datasets = Object.entries(trace.endpoints).map(([ep, vals], i) => ({
+      label: ep,
+      data: vals,
+      borderColor: AGENT_PALETTE[i % AGENT_PALETTE.length],
+      backgroundColor: 'transparent',
+      tension: 0.3,
+      borderWidth: 1.5,
+      pointRadius: 2,
+    }));
+    if (_beliefCharts[id]) {
+      _beliefCharts[id].data.labels = trace.labels;
+      _beliefCharts[id].data.datasets = datasets;
+      _beliefCharts[id].update('none');
+    } else {
+      const canvas = document.getElementById('canvas-agent-' + safeId);
+      if (canvas) {
+        _beliefCharts[id] = new Chart(canvas.getContext('2d'), _makeBeliefChartConfig(trace.labels, datasets));
+      }
+    }
+  });
+}
+function switchChartView(view) {
+  _chartView = view;
+  document.getElementById('chart-all-agents').style.display = view === 'all' ? 'block' : 'none';
+  document.getElementById('chart-per-agent').style.display  = view === 'per'  ? 'block' : 'none';
+  document.getElementById('chart-view-all').classList.toggle('active', view === 'all');
+  document.getElementById('chart-view-per').classList.toggle('active', view === 'per');
+  scheduleChartUpdate();
+}
+// ─── ECNP Timeline ──────────────────────────────────────────────
+function appendEcnpEvent(ev) {
+  _ecnpEvents.unshift(ev);
+  if (_ecnpEvents.length > MAX_ECNP_EVENTS) _ecnpEvents.pop();
+  _renderEcnpTimeline();
+}
+function _renderEcnpTimeline() {
+  const el = document.getElementById('ecnp-timeline');
+  if (!_ecnpEvents.length) {
+    el.innerHTML = '<div class="empty-state"><span class="emoji">🤝</span>Awaiting ECNP events…</div>';
+    return;
+  }
+  el.innerHTML = _ecnpEvents.slice(0, MAX_ECNP_EVENTS).map(ev => {
+    const kind = (ev.event_kind || 'offer').toLowerCase();
+    const detailStr = Object.entries(ev.details || {})
+      .map(([k, v]) => escHtml(k) + ': ' + escHtml(typeof v === 'object' ? JSON.stringify(v) : String(v)))
+      .slice(0, 3).join(' · ');
+    return `<div class="ecnp-event ${escHtml(kind)}">
+      <span class="ecnp-badge ${escHtml(kind)}">${escHtml(kind)}</span>
+      <div class="ecnp-body">
+        <div class="ecnp-sender">${escHtml(ev.sender_id || '—')}</div>
+        <div class="ecnp-contract">${escHtml(ev.contract_id || '—')}</div>
+        ${detailStr ? '<div class="ecnp-details">' + detailStr + '</div>' : ''}
+      </div>
+      <span class="ecnp-ts">${relTime(ev.timestamp)}</span>
+    </div>`;
+  }).join('');
+}
+function clearEcnpTimeline() {
+  _ecnpEvents = [];
+  _renderEcnpTimeline();
+}
+// ─── Belief Update Feed ─────────────────────────────────────────
+function appendBeliefUpdate(upd) {
+  _beliefUpdates.unshift(upd);
+  if (_beliefUpdates.length > MAX_BELIEF_UPDATES) _beliefUpdates.pop();
+  _renderBeliefFeed();
+  if (_agentStates[upd.agent_id]) {
+    updateBeliefTrace(upd.agent_id, { [upd.endpoint]: upd.new_value }, upd.timestamp);
+    scheduleChartUpdate();
+  }
+}
+function _renderBeliefFeed() {
+  const el = document.getElementById('belief-feed');
+  if (!_beliefUpdates.length) {
+    el.innerHTML = '<div class="empty-state"><span class="emoji">📡</span>Awaiting belief updates…</div>';
+    return;
+  }
+  el.innerHTML = _beliefUpdates.map(upd => {
+    const improving = upd.new_value < upd.old_value;
+    const cls    = improving ? 'improving' : 'worsening';
+    const newCls = improving ? 'belief-new-good' : 'belief-new-bad';
+    const ts = new Date(upd.timestamp).toLocaleTimeString();
+    return `<div class="belief-feed-entry ${cls}"><span class="belief-ts">[${escHtml(ts)}]</span> <span class="belief-agent">${escHtml(upd.agent_id)}</span>: <span class="belief-ep">${escHtml(upd.endpoint)}</span> <span class="belief-old">${fmt2(upd.old_value)}</span> → <span class="${newCls}">${fmt2(upd.new_value)}</span> <span class="belief-ev">(ev: ${fmt2(upd.evidence)})</span></div>`;
+  }).join('');
+  el.scrollTop = 0;
+}
+function clearBeliefFeed() {
+  _beliefUpdates = [];
+  _renderBeliefFeed();
+}
+// ─── Scan History ───────────────────────────────────────────────
+async function loadScans() {
+  try {
+    _scans = await apiFetch('/api/v1/scans?limit=30');
+    renderScans();
+  } catch (e) {
+    console.warn('Scans fetch failed', e);
+  }
+}
+function renderScans() {
+  const tbody = document.getElementById('scan-tbody');
+  if (!_scans.length) {
+    tbody.innerHTML = '<tr><td colspan="10"><div class="empty-state"><span class="emoji">🔍</span>No scans yet</div></td></tr>';
+    return;
+  }
+  tbody.innerHTML = _scans.map(s => {
+    const h = s.healing_summary;
+    const healingCell = h
+      ? `<span title="Regenerated: ${h.regenerated||0} | Removed: ${h.removed||0} | Kept: ${h.kept||0}" style="font-size:11px;color:var(--text-secondary);">🩹 ${(h.regenerated||0)+(h.removed||0)} changes</span>`
+      : '<span style="color:var(--text-muted);font-size:11px;">—</span>';
+    const llmBadge = s.llm_cases_generated > 0
+      ? `<span title="${s.llm_cases_generated} LLM-generated test cases" style="margin-left:4px;font-size:10px;background:rgba(188,140,255,.2);color:#bc8cff;border-radius:4px;padding:1px 5px;">🤖 LLM</span>`
+      : '';
+    return `
+    <tr>
+      <td style="font-family:monospace;font-size:12px;" title="${escHtml(s.scan_id)}">${shortId(s.scan_id)}</td>
+      <td><span class="status-badge status-${escHtml(s.status)}">${escHtml(s.status)}</span></td>
+      <td>${escHtml(s.spec_name || '—')}${llmBadge}</td>
+      <td style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escHtml(s.base_url||'')}">${escHtml(s.base_url || '—')}</td>
+      <td>${s.total || 0}</td>
+      <td>${s.total > 0 ? pct(s.pass_rate) : '—'}</td>
+      <td>${healingCell}</td>
+      <td>${relTime(s.created_at)}</td>
+      <td>${relTime(s.completed_at)}</td>
+      <td>
+        <button class="export-btn" onclick="exportScan('${escHtml(s.scan_id)}','json')" title="Export JSON">⬇ JSON</button>
+        <button class="export-btn" onclick="exportScan('${escHtml(s.scan_id)}','csv')" title="Export CSV">⬇ CSV</button>
+        <button class="export-btn" onclick="exportScan('${escHtml(s.scan_id)}','html')" title="Export HTML">⬇ HTML</button>
+      </td>
+    </tr>`;
+  }).join('');
+  // Update LLM Impact card
+  const totalLlm = _scans.reduce((acc, s) => acc + (s.llm_cases_generated || 0), 0);
+  const llmCard = document.getElementById('s-llm-card');
+  if (totalLlm > 0 && llmCard) {
+    llmCard.style.display = '';
+    document.getElementById('s-llm-count').textContent = totalLlm;
+    document.getElementById('s-llm-rate').textContent = 'across all scans';
+  }
+}
+// ─── WebSocket ──────────────────────────────────────────────────
+function connectWs() {
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const url   = `${proto}//${location.host}/ws/live`;
+  _ws = new WebSocket(url);
+  _ws.onopen = () => {
+    document.getElementById('ws-dot').classList.add('connected');
+    document.getElementById('ws-label').textContent = 'Live';
+    const banner = document.getElementById('error-banner');
+    if (banner) banner.style.display = 'none';
+  };
+  _ws.onclose = () => {
+    document.getElementById('ws-dot').classList.remove('connected');
+    document.getElementById('ws-label').textContent = 'Reconnecting…';
+    const banner = document.getElementById('error-banner');
+    const bannerMsg = document.getElementById('error-banner-msg');
+    if (banner && bannerMsg) {
+      bannerMsg.textContent = 'WebSocket disconnected — attempting to reconnect in 5s…';
+      banner.style.display = 'block';
+    }
+    setTimeout(connectWs, 5000);
+  };
+  _ws.onerror = () => {
+    document.getElementById('ws-dot').classList.remove('connected');
+    document.getElementById('ws-label').textContent = 'Disconnected';
+  };
+  _ws.onmessage = (ev) => {
+    try {
+      const msg = JSON.parse(ev.data);
+      if (msg.type === 'anomaly') {
+        toast('⚠️ New anomaly: ' + (msg.data?.endpoint || ''));
+        loadAnomalies();
+        loadSummary();
+      } else if (msg.type === 'scan_update') {
+        loadScans();
+        loadSummary();
+      } else if (msg.type === 'summary') {
+        _summary = msg.data;
+        renderSummary();
+      } else if (msg.type === 'agent_state') {
+        _agentStates[msg.agent_id] = msg;
+        updateBeliefTrace(msg.agent_id, msg.beliefs || {}, msg.timestamp);
+        if (_activeTab === 'agents') {
+          renderAgentCards();
+          if (_selectedAgentId === msg.agent_id) {
+            renderDrilldownBeliefs(msg);
+          }
+          scheduleChartUpdate();
+        }
+      } else if (msg.type === 'ecnp_event') {
+        appendEcnpEvent(msg);
+      } else if (msg.type === 'belief_update') {
+        appendBeliefUpdate(msg);
+      }
+    } catch (_) {}
+  };
+}
+// ─── Auto-refresh ───────────────────────────────────────────────
+function startAutoRefresh() {
+  if (_refreshTimer) clearInterval(_refreshTimer);
+  _refreshTimer = setInterval(async () => {
+    await Promise.all([
+      loadSummary(),
+      loadEndpoints(),
+      loadAnomalies(),
+      loadScans(),
+      loadQueue(),
+    ]);
+    renderAgents();
+    if (_activeTab === 'history') loadHistory();
+  }, 8000);
+}
+// ─── Init ───────────────────────────────────────────────────────
+async function init() {
+  await Promise.all([
+    loadSummary(),
+    loadEndpoints(),
+    loadAnomalies(),
+    loadScans(),
+    loadAgents(),
+    loadQueue(),
+  ]);
+  renderAgents();
+  connectWs();
+  startAutoRefresh();
+}
+// ─── Tab Switching ───────────────────────────────────────────────
+function switchTab(tabName) {
+  _activeTab = tabName;
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.tab === tabName);
+  });
+  document.querySelectorAll('.tab-panel').forEach(panel => {
+    panel.classList.toggle('active', panel.id === 'tab-' + tabName);
+  });
+  // Close mobile nav on tab switch
+  const nav = document.getElementById('tab-nav');
+  if (nav) nav.classList.remove('open');
+  if (tabName === 'security') loadSecurityData();
+  if (tabName === 'agents')   loadAgents();
+  if (tabName === 'history')  loadHistory();
+  if (tabName === 'settings') loadSettings();
+}
+// ─── Security ────────────────────────────────────────────────────
+const SEV_COLORS = {
+  critical: '#f85149',
+  high:     '#f0883e',
+  medium:   '#d29922',
+  low:      '#58a6ff',
+  info:     '#8b949e',
+};
+async function loadSecurityData() {
+  try {
+    const data = await apiFetch('/api/v1/security-findings');
+    _secFindings = Array.isArray(data) ? data : (data.findings || []);
+    renderSecuritySummary();
+    renderSecurityFindings();
+  } catch (e) {
+    console.warn('Security findings fetch failed', e);
+  }
+  // Load prioritization data from the latest completed scan if available
+  try {
+    const report = await apiFetch('/api/v1/security-report');
+    if (report && report.prioritization) {
+      _secPrioritization = report.prioritization;
+      renderPrioritization();
+      renderSecurityFindings(); // re-render with prio badges
+    }
+  } catch (e) {
+    // prioritization data is optional — ignore errors
+  }
+}
+function renderSecuritySummary() {
+  const counts = { critical: 0, high: 0, medium: 0, low: 0, info: 0 };
+  _secFindings.forEach(f => {
+    const sev = (f.severity || 'info').toLowerCase();
+    if (sev in counts) counts[sev]++;
+  });
+  document.getElementById('sec-critical-count').textContent = counts.critical;
+  document.getElementById('sec-high-count').textContent     = counts.high;
+  document.getElementById('sec-medium-count').textContent   = counts.medium;
+  document.getElementById('sec-low-count').textContent      = counts.low;
+  document.getElementById('sec-info-count').textContent     = counts.info;
+}
+function _prioBadge(endpoint) {
+  const entry = _secPrioritization.find(p => p.endpoint === endpoint || p.endpoint && p.endpoint.endsWith(endpoint));
+  if (!entry) return '—';
+  const score = entry.priority_score || 0;
+  let cls = 'prio-badge-low';
+  if (score > 0.7) cls = 'prio-badge-high';
+  else if (score > 0.4) cls = 'prio-badge-medium';
+  return `<span class="prio-badge ${cls}">${score.toFixed(2)}</span>`;
+}
+function _prioRowClass(endpoint) {
+  const entry = _secPrioritization.find(p => p.endpoint === endpoint || p.endpoint && p.endpoint.endsWith(endpoint));
+  if (!entry) return '';
+  const score = entry.priority_score || 0;
+  if (score > 0.7) return 'prio-high';
+  if (score > 0.4) return 'prio-medium';
+  return 'prio-low';
+}
+function renderSecurityFindings() {
+  const tbody = document.getElementById('sec-findings-tbody');
+  if (!_secFindings.length) {
+    tbody.innerHTML = '<tr><td colspan="6"><div class="empty-state"><span class="emoji">🔒</span>No security findings</div></td></tr>';
+    return;
+  }
+  tbody.innerHTML = _secFindings.map((f, i) => {
+    const sev = (f.severity || 'info').toLowerCase();
+    const rowCls = _prioRowClass(f.endpoint || '');
+    return `<tr class="clickable ${rowCls}" onclick="showSecurityFinding(${i})">
+      <td><span class="sev-pill sev-${escHtml(sev)}">${escHtml(sev)}</span></td>
+      <td style="font-family:monospace;font-size:12px;">${escHtml(f.check_id || '—')}</td>
+      <td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escHtml(f.endpoint||'')}">${escHtml(f.endpoint || '—')}</td>
+      <td>${escHtml(f.title || '—')}</td>
+      <td>${_prioBadge(f.endpoint || '')}</td>
+      <td>${escHtml(f.confidence != null ? String(f.confidence) : '—')}</td>
+    </tr>`;
+  }).join('');
+}
+function renderPrioritization() {
+  const card = document.getElementById('sec-prioritization-card');
+  const tbody = document.getElementById('sec-prio-tbody');
+  const summary = document.getElementById('sec-prioritization-summary');
+  if (!_secPrioritization.length) {
+    card.style.display = 'none';
+    return;
+  }
+  card.style.display = '';
+  const high = _secPrioritization.filter(p => (p.priority_score || 0) > 0.7).length;
+  const total = _secPrioritization.length;
+  summary.textContent = `${total} endpoints prioritized — ${high} flagged high-risk (score > 0.7) and received full check coverage.`;
+  tbody.innerHTML = _secPrioritization.map(p => {
+    const score = p.priority_score || 0;
+    let cls = 'prio-badge-low';
+    if (score > 0.7) cls = 'prio-badge-high';
+    else if (score > 0.4) cls = 'prio-badge-medium';
+    const checksRunCount = (p.checks_run || []).length;
+    return `<tr>
+      <td style="font-family:monospace;font-size:12px;">${escHtml(p.endpoint || '—')}</td>
+      <td><span class="prio-badge ${cls}">${score.toFixed(2)}</span></td>
+      <td>${(p.belief_score || 0).toFixed(2)}</td>
+      <td>${(p.risk_score || 0).toFixed(2)}</td>
+      <td style="font-size:12px;">${checksRunCount} checks</td>
+    </tr>`;
+  }).join('');
+}
+function showSecurityFinding(idx) {
+  const f = _secFindings[idx];
+  if (!f) return;
+  const sev = (f.severity || 'info').toLowerCase();
+  document.getElementById('sec-finding-detail').style.display = 'block';
+  document.getElementById('sec-detail-title').textContent = f.title || 'Finding Detail';
+  document.getElementById('fd-check-id').textContent    = f.check_id    || '—';
+  document.getElementById('fd-endpoint').textContent    = f.endpoint    || '—';
+  document.getElementById('fd-severity').innerHTML      = `<span class="sev-pill sev-${escHtml(sev)}">${escHtml(sev)}</span>`;
+  document.getElementById('fd-title').textContent       = f.title       || '—';
+  document.getElementById('fd-cwe-id').textContent      = f.cwe_id      || '—';
+  document.getElementById('fd-description').textContent = f.description || '—';
+  document.getElementById('fd-remediation').textContent = f.remediation || '—';
+  document.getElementById('fd-evidence').textContent    = typeof f.evidence === 'object'
+    ? JSON.stringify(f.evidence, null, 2) : (f.evidence || '—');
+  document.getElementById('sec-finding-detail').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+function closeSecurityDetail() {
+  document.getElementById('sec-finding-detail').style.display = 'none';
+}
+async function runSecurityScan() {
+  const spec     = document.getElementById('sec-spec-path').value.trim();
+  const baseUrl  = document.getElementById('sec-base-url').value.trim();
+  const severity = document.getElementById('sec-severity').value;
+  const statusEl = document.getElementById('sec-scan-status');
+  const btn      = document.getElementById('run-sec-scan-btn');
+  if (!spec || !baseUrl) {
+    statusEl.textContent = '⚠️ Spec path and Base URL are required.';
+    statusEl.style.color = '#f0883e';
+    return;
+  }
+  btn.disabled = true;
+  statusEl.textContent = '⏳ Starting scan…';
+  statusEl.style.color = '#8b949e';
+  try {
+    const res = await fetch('/api/v1/security-scan', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ spec, base_url: baseUrl, severity_threshold: severity }),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    const scanId = data.scan_id;
+    statusEl.textContent = '⏳ Scan running…';
+    _pollSecurityScan(scanId, statusEl, btn);
+  } catch (e) {
+    statusEl.textContent = '❌ Failed to start scan: ' + e.message;
+    statusEl.style.color = '#f85149';
+    btn.disabled = false;
+  }
+}
+function _pollSecurityScan(scanId, statusEl, btn) {
+  if (_secScanPollTimer) clearInterval(_secScanPollTimer);
+  _secScanPollTimer = setInterval(async () => {
+    try {
+      const data = await apiFetch(`/api/v1/security-scan/${encodeURIComponent(scanId)}`);
+      const status = (data.status || '').toLowerCase();
+      if (status === 'completed' || status === 'done') {
+        clearInterval(_secScanPollTimer);
+        statusEl.textContent = '✅ Scan complete';
+        statusEl.style.color = '#3fb950';
+        btn.disabled = false;
+        await loadSecurityData();
+      } else if (status === 'failed' || status === 'error') {
+        clearInterval(_secScanPollTimer);
+        statusEl.textContent = '❌ Scan failed';
+        statusEl.style.color = '#f85149';
+        btn.disabled = false;
+      } else {
+        statusEl.textContent = `⏳ ${status || 'running'}…`;
+      }
+    } catch (e) {
+      clearInterval(_secScanPollTimer);
+      statusEl.textContent = '❌ Poll error: ' + e.message;
+      statusEl.style.color = '#f85149';
+      btn.disabled = false;
+    }
+  }, 3000);
+}
+// ─── Mobile Menu ─────────────────────────────────────────────────
+function toggleMobileMenu() {
+  document.getElementById('tab-nav').classList.toggle('open');
+}
+// ─── Theme Toggle ────────────────────────────────────────────────
+function toggleTheme() {
+  const body = document.body;
+  const btn  = document.getElementById('theme-btn');
+  body.classList.toggle('light-mode');
+  if (btn) btn.textContent = body.classList.contains('light-mode') ? '🌙' : '☀️';
+}
+document.addEventListener('DOMContentLoaded', init);
+// ─── Service Worker Registration (PWA) ───────────────────────────────────────
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js').catch((err) => {
+      console.warn('Service worker registration failed:', err);
+    });
+  });
+}
+</script>
+</body>
+</html>