@thotischner/observability-mcp 1.7.0 → 1.8.1

package/dist/ui/index.html

@@ -5,8 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Observability MCP Gateway</title>
   <script>
-    // Resolve the theme BEFORE first paint to avoid a flash. Explicit
-    // user choice (localStorage) wins; otherwise follow the OS setting.
+    // Resolve the theme + density BEFORE first paint to avoid a flash.
+    // Explicit user choice (localStorage) wins; otherwise follow the OS
+    // setting for theme and default to comfortable density.
     (function(){
       try {
         var t = localStorage.getItem('omcp-theme');
@@ -15,13 +16,32 @@
         }
         document.documentElement.setAttribute('data-theme', t);
       } catch (e) { document.documentElement.setAttribute('data-theme','dark'); }
+      try {
+        var d = localStorage.getItem('omcp-density');
+        document.documentElement.setAttribute('data-density', d === 'compact' ? 'compact' : 'comfortable');
+      } catch (e) { document.documentElement.setAttribute('data-density','comfortable'); }
+      try {
+        var r = localStorage.getItem('omcp-rail');
+        if (r !== 'collapsed' && r !== 'expanded') {
+          // No explicit choice yet: collapse by default on narrow viewports.
+          r = (typeof window !== 'undefined' && window.innerWidth && window.innerWidth < 1100)
+            ? 'collapsed' : 'expanded';
+        }
+        document.documentElement.setAttribute('data-rail', r);
+      } catch (e) { document.documentElement.setAttribute('data-rail','expanded'); }
     })();
   </script>
-  <link rel="preconnect" href="https://rsms.me/">
-  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+  <!--
+    No external font CDN. The system-font fallback chain below renders
+    cleanly on every supported OS (macOS / iOS → -apple-system,
+    Windows → Segoe UI, Android / ChromeOS → Roboto, Linux → ui-sans-serif
+    / DejaVu). Air-gapped deployments work out of the box.
+    See docs/airgapped-deployment.md.
+  -->
   <style>
-    @supports (font-variation-settings: normal) {
-      :root { font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+    :root {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                   'Helvetica Neue', Arial, ui-sans-serif, sans-serif;
     }
   </style>
   <style>
@@ -147,8 +167,8 @@
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
     html { -webkit-text-size-adjust: 100%; }
     body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-feature-settings: 'cv11', 'ss01', 'ss03';
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                   'Helvetica Neue', Arial, ui-sans-serif, sans-serif;
       font-size: var(--fs-md);
       line-height: 1.5;
       background: var(--bg);
@@ -447,7 +467,7 @@
       margin-bottom: var(--sp-6);
       display: flex; align-items: center; justify-content: space-between;
     }
-    .endpoint-bar::before { content: 'POST'; display: inline-block; padding: 2px 6px; margin-right: 10px; background: var(--accent-soft); color: var(--accent); border-radius: 3px; font-size: var(--fs-xs); font-weight: 700; font-family: 'Inter var', sans-serif; }
+    .endpoint-bar::before { content: 'POST'; display: inline-block; padding: 2px 6px; margin-right: 10px; background: var(--accent-soft); color: var(--accent); border-radius: 3px; font-size: var(--fs-xs); font-weight: 700; font-family: inherit; }
     .empty {
       color: var(--text-dim); text-align: center;
       padding: var(--sp-10) var(--sp-4); font-size: var(--fs-md);
@@ -480,6 +500,11 @@
     .tab-btn:hover { color: var(--text); }
     .tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
     .tab-content { display: none; } .tab-content.active { display: block; }
+    /* `.tab-pad` opts a .tab-content panel into the standard 20px inset.
+       Settings, connectors-tab and similar use this; the topology subtab
+       panels deliberately render edge-to-edge so the inner cards control
+       their own padding. */
+    .tab-content.tab-pad { padding: var(--sp-5); }
     /* Threshold cards */
     .threshold-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
     .threshold-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-4); }
@@ -590,8 +615,15 @@
 
     @media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } .threshold-group { grid-template-columns: 1fr; } .form-row, .form-row-3 { grid-template-columns: 1fr; } }
 
-    /* ===== Enterprise console shell: side rail + masthead ===== */
+    /* ===== Console shell: side rail + masthead =====
+       The rail collapses to an icon-only strip when
+       :root[data-rail="collapsed"] is set (via the brand-area toggle
+       or the auto-collapse threshold at <1100px). The narrower
+       --rail-w cascades through the fixed siderail + the body's
+       padding-left so the workspace reclaims the recovered pixels
+       without a layout jump. */
     :root { --rail-w: 236px; }
+    :root[data-rail="collapsed"] { --rail-w: 60px; }
     body { padding-left: var(--rail-w); }
     .siderail {
       position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w);
@@ -671,6 +703,43 @@
       border-left-color: var(--accent); background: var(--chrome-active);
     }
     .rail-foot { margin-top: auto; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--chrome-border); font-size: var(--fs-xs); color: var(--chrome-text-muted); }
+
+    /* Rail-collapse affordance: a small toggle docked at the top of the
+       rail. When the rail is collapsed everything but the brand icon and
+       primary nav-icons is hidden; native browser tooltips on each
+       nav-btn keep the destinations discoverable. */
+    .rail-collapse-btn {
+      background: none; border: 1px solid transparent;
+      color: var(--chrome-text-muted); cursor: pointer;
+      margin-left: auto;
+      width: 26px; height: 26px;
+      display: inline-flex; align-items: center; justify-content: center;
+      border-radius: var(--radius-sm);
+      transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
+    }
+    .rail-collapse-btn:hover { color: var(--chrome-text); border-color: var(--chrome-border); }
+    :root[data-rail="collapsed"] .rail-collapse-btn .rc-ico { transform: scaleX(-1); }
+
+    :root[data-rail="collapsed"] .siderail .rail-title,
+    :root[data-rail="collapsed"] .siderail .rail-grp-hd,
+    :root[data-rail="collapsed"] .siderail .rail-item .sub-chev,
+    :root[data-rail="collapsed"] .siderail .rail-sub,
+    :root[data-rail="collapsed"] .siderail .rail-foot,
+    :root[data-rail="collapsed"] .siderail .nav-label,
+    :root[data-rail="collapsed"] .siderail .nav-btn > *:not(.nav-ico) { display: none; }
+    :root[data-rail="collapsed"] .rail-brand {
+      justify-content: center;
+      padding: var(--sp-4) 0 var(--sp-3);
+    }
+    :root[data-rail="collapsed"] .rail-collapse-btn { margin: 0; }
+    :root[data-rail="collapsed"] .rail-nav .nav-btn {
+      justify-content: center;
+      padding: 10px 0;
+    }
+    :root[data-rail="collapsed"] .rail-nav .nav-btn .nav-ico {
+      width: 100%;
+      font-size: 16px;
+    }
     .masthead {
       position: sticky; top: 0; z-index: 20;
       display: flex; align-items: center; gap: var(--sp-3);
@@ -688,7 +757,7 @@
       transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
     }
     .theme-toggle:hover { color: var(--chrome-text); border-color: var(--chrome-text-muted); }
-    /* Header notification feed (ref: enterprise events / bell) */
+    /* Header notification feed (bell icon + dropdown panel) */
     .notif-wrap { position: relative; }
     .notif-btn {
       position: relative; background: none; border: 1px solid var(--chrome-border);
@@ -831,7 +900,7 @@
     .gate-failclosed { color: var(--danger);  background: var(--danger-soft);  border-color: rgba(239,91,110,0.35); }
     .gate-unknown    { color: var(--warning); background: var(--warning-soft); border-color: rgba(245,179,65,0.30); }
 
-    /* Enterprise page primitives */
+    /* Governance / catalog page primitives */
     .ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
     /* Dashboard feed + ranked bars (ref: events / top-consumers) */
     .feed-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-2); border-bottom: 1px solid var(--border); }
@@ -852,7 +921,7 @@
     .rank-row .rk-fill.warn { background: var(--warning); }
     .rank-row .rk-fill.bad { background: var(--danger); }
     .rank-row .rk-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
-    /* Data Products — toggleable cards / table (ref: enterprise catalogs) */
+    /* Data Products — toggleable cards / table for catalog views */
     .dp-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
     .dp-bar .dp-count { font-size: var(--fs-sm); color: var(--text-muted); }
     .dp-bar .dp-search { flex: 1; max-width: 320px; }
@@ -914,6 +983,214 @@
     .pill-yes { color: var(--success); } .pill-no { color: var(--danger); }
     .chip { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); margin: 1px 3px 1px 0; }
     @media (max-width: 980px) { .ent-grid { grid-template-columns: 1fr; } }
+
+    /* ===== Utilities — composable classes used across the page to keep
+       repeated layout/spacing/typography rules out of inline `style="…"`.
+       Tokens stay sourced from the existing CSS variable system. ===== */
+    .mt-1 { margin-top: var(--sp-1); }
+    .mt-2 { margin-top: var(--sp-2); }
+    .mt-3 { margin-top: var(--sp-3); }
+    .mt-4 { margin-top: var(--sp-4); }
+    .mt-5 { margin-top: var(--sp-5); }
+    .mt-6 { margin-top: var(--sp-6); }
+    .mb-1 { margin-bottom: var(--sp-1); }
+    .mb-2 { margin-bottom: var(--sp-2); }
+    .mb-3 { margin-bottom: var(--sp-3); }
+    .mb-4 { margin-bottom: var(--sp-4); }
+    .mb-5 { margin-bottom: var(--sp-5); }
+    .mb-6 { margin-bottom: var(--sp-6); }
+    .m-0 { margin: 0; }
+    .p-0 { padding: 0; }
+    .p-5 { padding: var(--sp-5); }
+    .gap-2 { gap: var(--sp-2); }
+    .gap-3 { gap: var(--sp-3); }
+
+    .row { display: flex; align-items: center; gap: var(--sp-3); }
+    .row-end { display: flex; justify-content: flex-end; gap: var(--sp-2); }
+    .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+    .row-inline { display: inline-flex; align-items: center; gap: var(--sp-1); }
+    .col { display: flex; flex-direction: column; gap: var(--sp-2); }
+
+    .t-muted { color: var(--text-muted); }
+    /* `.muted` is used in templates throughout the page but was previously
+       not defined in CSS — it relied on inline font-size declarations and
+       inherited color. Define it as muted text color so the markup renders
+       with the styling the original author clearly intended. */
+    .muted { color: var(--text-muted); }
+    .t-dim { color: var(--text-dim); }
+    .t-accent { color: var(--accent); }
+    .t-xs { font-size: var(--fs-xs); }
+    .t-sm { font-size: var(--fs-sm); }
+    .t-md { font-size: var(--fs-md); }
+    .t-lg { font-size: var(--fs-lg); }
+    .t-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+    .t-break { word-break: break-all; }
+    .t-nowrap { white-space: nowrap; }
+    .t-label {
+      text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em;
+      color: var(--text-muted); margin-bottom: 6px; font-weight: 600;
+    }
+
+    .is-hidden { display: none; }
+
+    /* Deployment-misconfig warning bar — sits between the masthead and
+       the page body. Subtle danger-tint so it doesn't compete with the
+       primary content but is impossible to miss while scrolling. */
+    .omcp-warning-bar {
+      padding: 8px 16px;
+      background: var(--danger-soft);
+      color: var(--danger);
+      border-bottom: 1px solid rgba(239, 91, 110, 0.35);
+      font-size: var(--fs-sm); line-height: 1.4;
+      text-align: center;
+    }
+
+    /* ===== Density variants =====
+       `data-density="compact"` on <html> shrinks row + cell padding
+       across lists, tables and cards so dense operator workloads fit
+       on smaller screens. Toggleable from the masthead. */
+    :root[data-density="compact"] .source-row,
+    :root[data-density="compact"] .service-row { padding-top: 4px; padding-bottom: 4px; }
+    :root[data-density="compact"] .dtable th,
+    :root[data-density="compact"] .dtable td { padding: 4px 8px; }
+    :root[data-density="compact"] .metric-table th,
+    :root[data-density="compact"] .metric-table td { padding: 4px 8px; }
+    :root[data-density="compact"] .health-card { padding: var(--sp-3); }
+    :root[data-density="compact"] .health-card .hc-header { margin-bottom: var(--sp-2); }
+    :root[data-density="compact"] .hc-metric { padding: 4px 8px; }
+
+    /* ===== Sortable table column headers ===== */
+    .dtable th.sortable, .metric-table th.sortable {
+      cursor: pointer; user-select: none;
+      transition: color var(--t-fast) var(--ease);
+    }
+    .dtable th.sortable:hover, .metric-table th.sortable:hover { color: var(--text); }
+    .dtable th.sortable .sort-ind, .metric-table th.sortable .sort-ind {
+      display: inline-block; width: 10px; opacity: 0.35;
+      margin-left: 4px; font-size: 9px;
+    }
+    .dtable th.sortable.sort-asc .sort-ind::before,
+    .metric-table th.sortable.sort-asc .sort-ind::before { content: '▲'; opacity: 1; }
+    .dtable th.sortable.sort-desc .sort-ind::before,
+    .metric-table th.sortable.sort-desc .sort-ind::before { content: '▼'; opacity: 1; }
+
+    /* ===== List filter input ===== */
+    .list-filter {
+      display: flex; align-items: center; gap: var(--sp-3);
+      margin-bottom: var(--sp-3);
+    }
+    .list-filter input[type="search"] {
+      flex: 1; min-width: 0; max-width: 360px;
+      background: var(--surface-2); border: 1px solid var(--border);
+      color: var(--text); padding: 6px 10px;
+      border-radius: var(--radius-sm); font-size: var(--fs-sm);
+      transition: border-color var(--t-fast) var(--ease);
+    }
+    .list-filter input[type="search"]:focus {
+      outline: none; border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-ring);
+    }
+    .list-filter input[type="search"]::placeholder { color: var(--text-dim); }
+    .list-filter .count { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }
+
+    /* ===== Rich empty / loading states =====
+       `.state` is the inviting empty-state block: icon + title + body
+       + CTA. Use richEmpty() / loadingBlock() helpers instead of the
+       bare `.empty` for any container where the user has a meaningful
+       next action — adding a source, navigating to settings, etc. */
+    .state {
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; text-align: center;
+      padding: var(--sp-8) var(--sp-4);
+      color: var(--text-dim); font-size: var(--fs-md);
+      line-height: 1.6; gap: var(--sp-3);
+      min-height: 180px;
+    }
+    .state-ico {
+      width: 44px; height: 44px;
+      display: inline-flex; align-items: center; justify-content: center;
+      color: var(--text-muted);
+      background: var(--surface-2); border: 1px solid var(--border);
+      border-radius: var(--radius);
+    }
+    .state-ico svg { width: 22px; height: 22px; }
+    .state-title { color: var(--text); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
+    .state-desc  { color: var(--text-muted); font-size: var(--fs-sm); max-width: 420px; }
+    .state-cta   { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); }
+    .state.is-loading .state-ico { color: var(--accent); border-color: var(--accent-soft); }
+    .state.is-loading .state-ico .spin {
+      transform-origin: center;
+      animation: spin 0.9s linear infinite;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .state.is-loading .state-ico .spin { animation: none; }
+    }
+
+    /* ===== Topology graph affordances =====
+       Zoom controls + keyboard-hint badge live inside #topology-graph-host
+       (already position:relative). Both kept compact so they don't crowd
+       the small graph viewport. Edge labels (rendered as SVG text) get
+       a halo via paint-order so they're legible against bands / wires. */
+    .topo-controls {
+      position: absolute; top: 10px; right: 10px;
+      display: flex; gap: 4px;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 3px;
+      z-index: 2;
+    }
+    .topo-controls .btn-icon {
+      width: 26px; height: 26px;
+      font-size: var(--fs-md); line-height: 1;
+      border-radius: var(--radius-sm);
+    }
+    .topo-hint {
+      position: absolute; top: 10px; left: 10px;
+      font-size: var(--fs-xs); color: var(--text-muted);
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 4px 8px;
+      pointer-events: none; opacity: 0.85;
+      z-index: 2;
+    }
+    /* Form validation primitives — used by the Add Source modal and
+       any future form. `.is-invalid` highlights the field, `.form-error`
+       renders a small red explanation below it, `.form-banner` is a
+       full-width error/success block at the top of a form body. */
+    .form-group input.is-invalid,
+    .form-group select.is-invalid,
+    .form-group textarea.is-invalid {
+      border-color: var(--danger);
+      box-shadow: 0 0 0 3px rgba(239, 91, 110, 0.18);
+    }
+    .form-error {
+      color: var(--danger); font-size: var(--fs-xs);
+      margin-top: 4px; line-height: 1.4;
+    }
+    .form-banner {
+      padding: 10px 12px; border-radius: var(--radius-sm);
+      font-size: var(--fs-sm); line-height: 1.4;
+      margin-bottom: var(--sp-3);
+      border: 1px solid transparent;
+      display: none;
+    }
+    .form-banner.show { display: block; }
+    .form-banner.error {
+      background: var(--danger-soft); color: var(--danger);
+      border-color: rgba(239, 91, 110, 0.35);
+    }
+    .form-banner.success {
+      background: var(--success-soft); color: var(--success);
+      border-color: rgba(74, 222, 128, 0.25);
+    }
+    .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+
+    /* Graph node focus ring: the <g data-id> is focusable; the inner
+       circle gets a wider stroke when its parent has :focus-visible. */
+    #topology-graph-svg:focus { outline: none; }
+    #topology-graph-svg g[data-id]:focus { outline: none; }
+    #topology-graph-svg g[data-id]:focus-visible circle {
+      stroke: var(--accent); stroke-width: 3;
+      filter: drop-shadow(0 0 4px var(--accent-soft));
+    }
   </style>
 </head>
 <body>
@@ -921,36 +1198,38 @@
     <div class="rail-brand">
       <span class="rail-mark"></span>
       <div class="rail-title">Observability<br><span>MCP Console</span></div>
+      <button class="rail-collapse-btn" id="rail-collapse-btn" title="Collapse navigation" aria-label="Collapse navigation" onclick="toggleRail()"><span class="rc-ico">‹</span></button>
     </div>
     <nav class="rail-nav">
       <div class="rail-grp" data-grp="observability">
         <button class="rail-grp-hd" onclick="toggleNavGroup('observability')">Observability<span class="chev">▾</span></button>
         <div class="rail-grp-body">
-          <button class="nav-btn active" data-page="dashboard" onclick="showPage('dashboard')"><span class="nav-ico">▦</span>Dashboard</button>
-          <button class="nav-btn" data-page="sources" onclick="showPage('sources')"><span class="nav-ico">⊟</span>Sources</button>
-          <button class="nav-btn" data-page="services" onclick="showPage('services')"><span class="nav-ico">⊞</span>Services</button>
-          <button class="nav-btn" data-page="health" onclick="showPage('health')"><span class="nav-ico">✚</span>Health</button>
-          <button class="nav-btn" data-page="topology" onclick="showPage('topology')"><span class="nav-ico">◇</span>Topology</button>
+          <button class="nav-btn active" data-page="dashboard" title="Dashboard" onclick="showPage('dashboard')"><span class="nav-ico">▦</span><span class="nav-label">Dashboard</span></button>
+          <button class="nav-btn" data-page="sources" title="Sources" onclick="showPage('sources')"><span class="nav-ico">⊟</span><span class="nav-label">Sources</span></button>
+          <button class="nav-btn" data-page="services" title="Services" onclick="showPage('services')"><span class="nav-ico">⊞</span><span class="nav-label">Services</span></button>
+          <button class="nav-btn" data-page="health" title="Health" onclick="showPage('health')"><span class="nav-ico">✚</span><span class="nav-label">Health</span></button>
+          <button class="nav-btn" data-page="topology" title="Topology" onclick="showPage('topology')"><span class="nav-ico">◇</span><span class="nav-label">Topology</span></button>
         </div>
       </div>
       <div class="rail-grp" data-grp="catalog">
         <button class="rail-grp-hd" onclick="toggleNavGroup('catalog')">Catalog<span class="chev">▾</span></button>
         <div class="rail-grp-body">
-          <button class="nav-btn" data-page="products" onclick="showPage('products')"><span class="nav-ico">◫</span>Products</button>
+          <button class="nav-btn" data-page="products" title="Products" onclick="showPage('products')"><span class="nav-ico">◫</span><span class="nav-label">Products</span></button>
         </div>
       </div>
       <div class="rail-grp" data-grp="governance">
         <button class="rail-grp-hd" onclick="toggleNavGroup('governance')">Governance<span class="chev">▾</span></button>
         <div class="rail-grp-body">
-          <button class="nav-btn" data-page="access" onclick="showPage('access')"><span class="nav-ico">⛨</span>Access Control</button>
-          <button class="nav-btn" data-page="audit" onclick="showPage('audit')"><span class="nav-ico">❒</span>Audit Log</button>
+          <button class="nav-btn" data-page="access" title="Access Control" onclick="showPage('access')"><span class="nav-ico">⛨</span><span class="nav-label">Access Control</span></button>
+          <button class="nav-btn" data-page="policies" title="Policies" onclick="showPage('policies')" data-rbac="users:delete"><span class="nav-ico">≣</span><span class="nav-label">Policies</span></button>
+          <button class="nav-btn" data-page="audit" title="Audit Log" onclick="showPage('audit')"><span class="nav-ico">❒</span><span class="nav-label">Audit Log</span></button>
         </div>
       </div>
       <div class="rail-grp" data-grp="system">
         <button class="rail-grp-hd" onclick="toggleNavGroup('system')">System<span class="chev">▾</span></button>
         <div class="rail-grp-body">
           <div class="rail-item" data-nav="connectors">
-            <button class="nav-btn nav-parent" onclick="navToggle('connectors')"><span class="nav-ico">⇄</span>Connectors<span class="sub-chev">▾</span></button>
+            <button class="nav-btn nav-parent" title="Connectors" onclick="navToggle('connectors')"><span class="nav-ico">⇄</span><span class="nav-label">Connectors</span><span class="sub-chev">▾</span></button>
             <div class="rail-sub">
               <button class="nav-sub" data-sub="installed" onclick="goTab('connectors','installed')">Installed</button>
               <button class="nav-sub" data-sub="hub" onclick="goTab('connectors','hub')">Connector Hub</button>
@@ -958,14 +1237,14 @@
             </div>
           </div>
           <div class="rail-item" data-nav="settings">
-            <button class="nav-btn nav-parent" onclick="navToggle('settings')"><span class="nav-ico">⚙</span>Settings<span class="sub-chev">▾</span></button>
+            <button class="nav-btn nav-parent" title="Settings" onclick="navToggle('settings')"><span class="nav-ico">⚙</span><span class="nav-label">Settings</span><span class="sub-chev">▾</span></button>
             <div class="rail-sub">
               <button class="nav-sub" data-sub="general" onclick="goTab('settings','general')">General</button>
               <button class="nav-sub" data-sub="health" onclick="goTab('settings','health')">Health Scoring</button>
               <button class="nav-sub" data-sub="metrics" onclick="goTab('settings','metrics')">Custom Metrics</button>
             </div>
           </div>
-          <button class="nav-btn" data-page="entitlement" onclick="showPage('entitlement')"><span class="nav-ico">⛁</span>Entitlement</button>
+          <button class="nav-btn" data-page="entitlement" title="Entitlement" onclick="showPage('entitlement')"><span class="nav-ico">⛁</span><span class="nav-label">Entitlement</span></button>
         </div>
       </div>
     </nav>
@@ -982,10 +1261,54 @@
         <div id="notif-list"><div class="notif-empty">No notifications</div></div>
       </div>
     </div>
+    <span id="user-badge" class="row-inline t-sm" style="display:none; margin-right: var(--sp-2);">
+      <span class="t-muted">Signed in as</span>
+      <span class="user-name" style="color: var(--chrome-text); font-weight: 600;"></span>
+      <button class="btn btn-ghost btn-sm" onclick="omcpLogout()">Sign out</button>
+    </span>
+    <button class="theme-toggle" id="density-toggle" title="Toggle row density" aria-label="Toggle density" onclick="toggleDensity()">≡</button>
     <button class="theme-toggle" id="theme-toggle" title="Toggle light / dark" aria-label="Toggle theme" onclick="toggleTheme()">◐</button>
     <button class="btn btn-ghost btn-sm" onclick="refresh()">Refresh</button>
   </header>
 
+  <!-- Governance misconfig banner — populated by omcpCheckGovernance()
+       from /api/info. Hidden by default; the JS makes it visible when
+       there is something the operator needs to fix (currently only the
+       ephemeral session secret case). -->
+  <div id="omcp-warning-bar" class="omcp-warning-bar" style="display:none" role="alert"></div>
+
+  <!-- Login modal — shown when /api/* returns 401 OMCP_AUTH_REQUIRED -->
+  <div class="modal-overlay" id="login-modal">
+    <div class="modal" style="width:380px;">
+      <div class="modal-header"><h3>Sign in</h3></div>
+      <div class="modal-body">
+        <div id="login-banner" class="form-banner"></div>
+        <!-- OIDC: shown when authMode=oidc. Single primary button — the
+             IdP collects credentials, not us. -->
+        <div id="login-oidc" style="display:none;" class="form-group">
+          <button class="btn btn-primary" id="login-sso" onclick="omcpStartSso()" style="width:100%;">
+            Sign in with SSO
+          </button>
+          <div class="form-hint t-sm" id="login-sso-hint" style="margin-top: var(--sp-2);"></div>
+        </div>
+        <!-- Basic: shown when authMode=basic. Hidden in oidc mode. -->
+        <div id="login-basic">
+          <div class="form-group">
+            <label>Username</label>
+            <input id="login-username" type="text" autocomplete="username" onkeydown="omcpLoginKey(event)">
+          </div>
+          <div class="form-group">
+            <label>Password</label>
+            <input id="login-password" type="password" autocomplete="current-password" onkeydown="omcpLoginKey(event)">
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" id="login-submit" onclick="omcpSubmitLogin()">Sign in</button>
+      </div>
+    </div>
+  </div>
+
   <div class="container">
     <!-- ===== Dashboard ===== -->
     <div class="page active" id="page-dashboard">
@@ -1045,8 +1368,21 @@
           <div class="flow-node"><span class="fn-ic">✦</span><span class="fn-t">Analysis</span><span class="fn-s">scored health</span></div>
         </div>
       </div>
+      <!-- Today's usage strip (top-5 identities by activity in the trailing
+           24h window). Reads /api/usage; hidden when no identity has any
+           traffic yet OR the viewer lacks audit:read (silently — non-admin
+           sessions just don't see it). -->
+      <div class="card" id="dash-usage-card" style="display:none">
+        <div class="card-header"><h2>Today's MCP usage
+          <button class="info" aria-label="About the usage strip"
+            data-title="Usage strip"
+            data-info="Per-identity totals across the trailing 24h window: requests counted by the rate-limiter (1-minute resolution) and tokens estimated post-tool-execution. The token bucket is the same one OMCP_TOOL_DAILY_TOKENS gates against — when it fills, the corresponding identity gets OMCP_TOKEN_BUDGET_EXCEEDED on the next call. Anonymous /mcp traffic isn't shown (no per-identity bucket to charge)."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div id="dash-usage" class="content"><div class="empty">Loading…</div></div>
+      </div>
       <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 16px;">
-        <div class="card"><div class="card-header"><h2>Sources</h2><button class="btn btn-primary btn-sm" onclick="showPage('sources');openAddModal()">+ Add Source</button></div><div id="dash-sources"><div class="empty">Loading...</div></div></div>
+        <div class="card"><div class="card-header"><h2>Sources</h2><button class="btn btn-primary btn-sm" data-rbac="sources:write" onclick="showPage('sources');openAddModal()">+ Add Source</button></div><div id="dash-sources"><div class="empty">Loading...</div></div></div>
         <div class="card"><div class="card-header"><h2>Services</h2></div><div id="dash-services"><div class="empty">Loading...</div></div></div>
       </div>
       <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;">
@@ -1068,7 +1404,7 @@
           <div class="breadcrumb">Console / Observability / <b>Sources</b></div>
           <h1>Data Sources</h1>
         </div>
-        <div class="ph-actions"><button class="btn btn-primary btn-sm" onclick="openAddModal()">+ Add Source</button></div>
+        <div class="ph-actions"><button class="btn btn-primary btn-sm" data-rbac="sources:write" onclick="openAddModal()">+ Add Source</button></div>
       </div>
       <div class="card">
         <div class="card-header"><h2>All sources</h2></div>
@@ -1103,25 +1439,25 @@
         </div>
 
         <!-- Installed Tab -->
-        <div class="tab-content active" id="tab-installed" style="padding:20px;">
+        <div class="tab-content tab-pad active" id="tab-installed">
           <div class="card-header" style="margin-bottom:12px"><h2>Installed connectors</h2><button class="btn btn-ghost btn-sm" onclick="loadConnectors()">Refresh</button></div>
           <div id="conn-installed"><div class="empty">Loading...</div></div>
         </div>
 
         <!-- Connector Hub Tab -->
-        <div class="tab-content" id="tab-hub" style="padding:20px;">
+        <div class="tab-content tab-pad" id="tab-hub">
           <div class="card-header" style="margin-bottom:12px"><h2>Available from the Connector Hub</h2>
             <a class="btn btn-ghost btn-sm" href="https://thotischner.github.io/observability-mcp/hub/" target="_blank" rel="noopener">Open Hub ↗</a></div>
           <div id="conn-hub"><div class="empty">Loading...</div></div>
         </div>
 
         <!-- Upload bundle Tab -->
-        <div class="tab-content" id="tab-upload" style="padding:20px;">
+        <div class="tab-content tab-pad" id="tab-upload">
           <div class="card-header" style="margin-bottom:12px"><h2>Upload a connector bundle</h2></div>
           <p class="empty" style="margin:0 0 12px">Install a signed connector <code>.tgz</code> directly — handy for air-gapped environments. The bundle is always verified against the configured trust root before it is loaded.</p>
           <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
             <input type="file" id="conn-upload-file" accept=".tgz,.tar.gz,application/octet-stream">
-            <button class="btn btn-primary btn-sm" onclick="uploadConnector(this)">Upload &amp; install</button>
+            <button class="btn btn-primary btn-sm" data-rbac="connectors:write" onclick="uploadConnector(this)">Upload &amp; install</button>
           </div>
         </div>
       </div>
@@ -1174,7 +1510,7 @@
                 <option value="">All</option>
               </select>
             </label>
-            <span class="muted" style="font-size: var(--fs-xs);">Scope = any resource pointed to by an <code>IN_NAMESPACE</code> edge (e.g. k8s namespaces, future: vCenter folders).</span>
+            <span class="muted t-xs">Scope = any resource pointed to by an <code>IN_NAMESPACE</code> edge (e.g. k8s namespaces, future: vCenter folders).</span>
           </div>
           <div id="topology-by-host" class="empty" style="padding: 0 16px 16px;">Loading...</div>
         </div>
@@ -1183,11 +1519,17 @@
         <div class="card">
           <div class="card-header">
             <h2>Layered graph</h2>
-            <span class="muted" style="font-size: var(--fs-xs);">click a resource to inspect · drag to reposition · wheel to zoom · drag the background to pan</span>
+            <span class="muted t-xs">click a resource to inspect · drag to reposition · wheel to zoom · drag the background to pan</span>
           </div>
           <div style="display:grid; grid-template-columns: 1fr 340px; gap: 0; border-top: 1px solid var(--border); height: 660px;">
             <div id="topology-graph-host" style="position:relative; overflow:hidden; background: var(--surface-2); border-right: 1px solid var(--border);">
-              <svg id="topology-graph-svg" style="position:absolute; inset:0; width:100%; height:100%; cursor: grab;"></svg>
+              <svg id="topology-graph-svg" style="position:absolute; inset:0; width:100%; height:100%; cursor: grab;" tabindex="0" role="application" aria-label="Topology graph — Tab through resources, Enter to inspect, Esc to clear"></svg>
+              <div class="topo-controls" role="toolbar" aria-label="Graph zoom">
+                <button class="btn-icon" title="Zoom in (or wheel up)" aria-label="Zoom in" onclick="topoZoom(1.2)">+</button>
+                <button class="btn-icon" title="Zoom out (or wheel down)" aria-label="Zoom out" onclick="topoZoom(1/1.2)">−</button>
+                <button class="btn-icon" title="Reset view" aria-label="Reset view" onclick="topoResetView()">⤾</button>
+              </div>
+              <div class="topo-hint" id="topo-hint">Tab to focus · Enter to inspect · arrows to move focus · Esc to clear</div>
               <div id="topology-graph-legend" style="position:absolute; bottom:10px; left:10px; font-size: var(--fs-xs); padding:8px 10px; background: var(--surface); border:1px solid var(--border); border-radius: 6px; max-width: 75%;"></div>
             </div>
             <aside id="topology-inspector" style="background: var(--surface); padding: 16px; overflow-y: auto; font-size: var(--fs-sm);">
@@ -1215,7 +1557,7 @@
         </div>
 
         <!-- General Tab -->
-        <div class="tab-content active" id="tab-general" style="padding:20px;">
+        <div class="tab-content tab-pad active" id="tab-general">
           <div class="form-row">
             <div class="form-group">
               <label>Check Interval (ms)</label>
@@ -1232,13 +1574,13 @@
             </div>
           </div>
           <div style="display:flex; gap:8px; justify-content:flex-end;">
-            <button class="btn btn-ghost btn-sm" onclick="resetSettings()">Reset to Defaults</button>
-            <button class="btn btn-primary btn-sm" onclick="saveSettings()">Save Settings</button>
+            <button class="btn btn-ghost btn-sm" data-rbac="settings:write" onclick="resetSettings()">Reset to Defaults</button>
+            <button class="btn btn-primary btn-sm" id="btn-save-settings" data-rbac="settings:write" onclick="saveSettings()" disabled>Save Settings</button>
           </div>
         </div>
 
         <!-- Health Scoring Tab -->
-        <div class="tab-content" id="tab-health" style="padding:20px;">
+        <div class="tab-content tab-pad" id="tab-health">
           <p style="font-size:13px; color:var(--text2); margin-bottom:16px;">Configure how service health scores are calculated. Weights must sum to 1.0.</p>
           <h3 style="font-size:14px; margin-bottom:12px;">Weights</h3>
           <div class="form-row" style="margin-bottom:20px;">
@@ -1288,13 +1630,13 @@
             <div class="form-group"><label>Degraded above score</label><input type="number" id="ht-bound-degraded" min="0" max="100"></div>
           </div>
           <div style="display:flex; gap:8px; justify-content:flex-end;">
-            <button class="btn btn-ghost btn-sm" onclick="resetHealth()">Reset to Defaults</button>
-            <button class="btn btn-primary btn-sm" onclick="saveHealth()">Save Thresholds</button>
+            <button class="btn btn-ghost btn-sm" data-rbac="health:write" onclick="resetHealth()">Reset to Defaults</button>
+            <button class="btn btn-primary btn-sm" id="btn-save-health" data-rbac="health:write" onclick="saveHealth()" disabled>Save Thresholds</button>
           </div>
         </div>
 
         <!-- Source Metrics Tab -->
-        <div class="tab-content" id="tab-metrics" style="padding:20px;">
+        <div class="tab-content tab-pad" id="tab-metrics">
           <p style="font-size:13px; color:var(--text2); margin-bottom:16px;">Each data source has its own metric definitions with backend-specific queries (PromQL, LogQL, etc.). Use <code style="background:var(--bg);padding:1px 5px;border-radius:3px;">{{service}}</code> as placeholder for the service/job name.</p>
           <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
             <label style="font-size:13px; color:var(--text2); white-space:nowrap;">Source:</label>
@@ -1389,8 +1731,31 @@ curl -X PUT http://localhost:3000/api/enterprise/policy \
           table; an admin can create or change products via the editor or the API example.
         </div>
       </div>
+      <!-- MCP Products — governed via /api/products (the new, RBAC-gated
+           surface from the MCP Products + RBAC phase). Replaces the
+           legacy enterprise-catalog block below for new deployments;
+           the legacy block stays so existing /api/enterprise/catalog
+           operators see their data until they migrate. -->
+      <div class="card" id="mcp-products-card">
+        <div class="card-header">
+          <h2>MCP Products
+            <button class="info" aria-label="About the MCP Products API"
+              data-title="MCP Products"
+              data-info="Curated tool bundles loaded from OMCP_PRODUCTS_FILE. Each product names an id, display name, optional tool allowlist (filters tools/list at the /mcp transport in a future slice), branding metadata, and a status (published | staging). Non-admins see only their own tenant's published entries; admins see everything plus staging. Edits go through PUT /api/products/{id} with strict body validation."
+              onclick="infoPop(this)">?</button>
+          </h2>
+          <div class="row-inline">
+            <span id="mcp-products-scope" class="badge"></span>
+            <button class="btn btn-primary btn-sm" data-rbac="products:write" onclick="mcpProductsNew()">+ New product</button>
+          </div>
+        </div>
+        <div id="mcp-products-box"><div class="empty">Loading…</div></div>
+      </div>
+
+      <!-- Legacy enterprise-products card (kept for operators that
+           still wire OMCP_ENTERPRISE_CATALOG_FILE) -->
       <div class="card">
-        <div class="card-header"><h2>Products</h2></div>
+        <div class="card-header"><h2>Products <span class="t-sm" style="opacity:.7">(legacy / enterprise catalog)</span></h2></div>
         <div id="ent-catalog"><div class="empty">Loading…</div></div>
         <div id="ent-cat-editor" class="hidden" style="margin-top:12px">
           <div class="ed-bar">
@@ -1435,6 +1800,50 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
       </div>
     </div>
 
+    <!-- ===== Governance: Policies (PolicyEngine snapshot + dry-run) ===== -->
+    <div class="page" id="page-policies">
+      <div class="page-head">
+        <div class="ph-left">
+          <div class="breadcrumb">Console / Governance / <b>Policies</b></div>
+          <h1>Policies</h1>
+        </div>
+        <div class="ph-actions"><span id="pol-engine" class="badge"></span></div>
+      </div>
+      <div class="card">
+        <div class="card-header"><h2>Active policy
+          <button class="info" aria-label="About the active policy"
+            data-title="Active policy"
+            data-info="Read-only view of the RBAC policy this build is running. When OMCP_RBAC_POLICY_FILE is set the file replaces the built-in defaults; the badge above identifies which is active. Use the dry-run panel below to probe specific role/resource/action combinations without writing a test."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div id="pol-roles" class="content"><div class="empty">Loading…</div></div>
+        <div class="form-hint" style="padding: var(--sp-3) var(--sp-4)">
+          File source: read-only here. To change, edit <code>OMCP_RBAC_POLICY_FILE</code> on the server and restart.
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header"><h2>Dry-run probe</h2></div>
+        <div class="content" style="display:grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr 1fr auto;">
+          <div class="form-group" style="margin:0">
+            <label>Roles <span class="form-hint">comma-separated</span></label>
+            <input id="pol-dry-roles" placeholder="admin, operator">
+          </div>
+          <div class="form-group" style="margin:0">
+            <label>Resource</label>
+            <input id="pol-dry-resource" placeholder="sources">
+          </div>
+          <div class="form-group" style="margin:0">
+            <label>Action</label>
+            <input id="pol-dry-action" placeholder="write">
+          </div>
+          <div class="form-group" style="margin:0; align-self:end">
+            <button class="btn btn-primary" onclick="polDryRun()">Evaluate</button>
+          </div>
+        </div>
+        <div id="pol-dry-out" style="padding: 0 var(--sp-4) var(--sp-4)"></div>
+      </div>
+    </div>
+
     <!-- ===== Governance: Audit Log ===== -->
     <div class="page" id="page-audit">
       <div class="page-head">
@@ -1453,6 +1862,15 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
         </h2></div>
         <div id="ent-audit"><div class="empty">Loading…</div></div>
       </div>
+      <div class="card mt-4">
+        <div class="card-header"><h2>Management changes
+          <button class="info" aria-label="About management audit"
+            data-title="Management audit"
+            data-info="Append-only hash-chained log of every mutating /api/* request (source / setting / health-threshold / connector changes). When OMCP_MGMT_AUDIT_FILE is set the log persists across restarts; otherwise it is an in-memory ring of the last 500 entries."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div id="mgmt-audit"><div class="empty">Loading…</div></div>
+      </div>
     </div>
 
     <!-- ===== Governance: Entitlement ===== -->
@@ -1495,9 +1913,19 @@ curl -s http://localhost:3000/api/enterprise/status</pre>
       <div class="modal-header"><h3 id="modal-title">Add Source</h3><button class="btn-icon" onclick="closeModal('source-modal')">&times;</button></div>
       <div class="modal-body">
         <input type="hidden" id="modal-mode" value="add"><input type="hidden" id="modal-original-name" value="">
-        <div class="form-group"><label>Name</label><input type="text" id="src-name" placeholder="e.g. prometheus-prod"><div class="form-hint">Unique identifier</div></div>
+        <div id="src-form-banner" class="form-banner"></div>
+        <div class="form-group">
+          <label>Name</label>
+          <input type="text" id="src-name" placeholder="e.g. prometheus-prod" oninput="validateSrcName()" onblur="validateSrcName()">
+          <div class="form-hint">Unique identifier</div>
+          <div class="form-error" id="src-name-err" hidden></div>
+        </div>
         <div class="form-group"><label>Type</label><select id="src-type"></select></div>
-        <div class="form-group"><label>URL</label><input type="text" id="src-url" placeholder="e.g. http://prometheus:9090"></div>
+        <div class="form-group">
+          <label>URL</label>
+          <input type="text" id="src-url" placeholder="e.g. http://prometheus:9090" oninput="validateSrcUrl()" onblur="validateSrcUrl()">
+          <div class="form-error" id="src-url-err" hidden></div>
+        </div>
         <div class="form-group"><label>Authentication</label><select id="src-auth-type" onchange="toggleAuthFields()"><option value="none">None</option><option value="basic">Basic Auth</option><option value="bearer">Bearer Token</option></select></div>
         <div id="auth-basic-fields" style="display:none">
           <div class="form-group"><label>Username</label><input type="text" id="src-auth-username" placeholder="username"></div>
@@ -1564,7 +1992,14 @@ let deleteTarget=null, deleteType=null;
 // Per-source metrics state
 let selectedMetricsSource='', sourceMetrics=[], sourceMetricDefaults=[];
 
-function toast(msg) { const t=document.getElementById('toast-el'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),2000); }
+function toast(msg, kind) {
+  const t=document.getElementById('toast-el');
+  t.textContent=msg;
+  t.classList.remove('toast-error');
+  if (kind === 'error') t.classList.add('toast-error');
+  t.classList.add('show');
+  setTimeout(()=>t.classList.remove('show'),2000);
+}
 
 // --- Nav ---
 function showPage(name) {
@@ -1580,6 +2015,78 @@ function showPage(name) {
   if(name==='topology') loadTopology();
   if(name==='connectors') loadConnectors();
   if(name==='access'||name==='products'||name==='audit'||name==='entitlement') loadEnterprise();
+  if(name==='products') loadMcpProducts();
+  if(name==='policies') loadPolicies();
+}
+
+// --- Policies tab (PolicyEngine snapshot + dry-run) ---
+async function loadPolicies() {
+  const engineEl = document.getElementById('pol-engine');
+  const rolesEl = document.getElementById('pol-roles');
+  try {
+    const r = await fetch('/api/policy');
+    if (!r.ok) {
+      rolesEl.innerHTML = '<div class="empty">Policy view requires the <code>users:delete</code> permission (admin role).</div>';
+      engineEl.textContent = '';
+      return;
+    }
+    const j = await r.json();
+    engineEl.textContent = 'engine: ' + (j.engine || 'unknown');
+    engineEl.className = 'badge ' + (j.engine === 'builtin' ? 'badge-ok' : '');
+    const blocks = [];
+    for (const role of (j.roles || [])) {
+      const grants = (j.policy && j.policy[role]) || [];
+      // Group grants by resource for compact rendering.
+      const byRes = {};
+      for (const g of grants) {
+        (byRes[g.resource] = byRes[g.resource] || []).push(g.action);
+      }
+      const rows = Object.entries(byRes).map(([res, actions]) =>
+        `<tr><td><code>${escHtml(res)}</code></td><td>${actions.map(a => `<span class="pill">${escHtml(a)}</span>`).join(' ')}</td></tr>`
+      ).join('');
+      blocks.push(`
+        <div style="padding: var(--sp-3) var(--sp-4)">
+          <h3 style="margin: 0 0 var(--sp-2); display:flex; gap: var(--sp-2); align-items:baseline;">
+            <span>${escHtml(role)}</span>
+            <span class="t-sm" style="opacity:.7">${grants.length} permission${grants.length===1?'':'s'}</span>
+          </h3>
+          <table class="data-table" style="width:100%"><thead><tr><th>Resource</th><th>Actions</th></tr></thead><tbody>${rows || '<tr><td colspan="2" class="empty">no grants</td></tr>'}</tbody></table>
+        </div>`);
+    }
+    rolesEl.innerHTML = blocks.join('') || '<div class="empty">No roles defined.</div>';
+    if (j.note) {
+      rolesEl.insertAdjacentHTML('beforeend', `<div class="form-hint" style="padding: var(--sp-2) var(--sp-4) var(--sp-3)">${escHtml(j.note)}</div>`);
+    }
+  } catch (e) {
+    rolesEl.innerHTML = '<div class="empty">Policy unavailable: ' + escHtml(String(e && e.message || e)) + '</div>';
+  }
+}
+async function polDryRun() {
+  const out = document.getElementById('pol-dry-out');
+  const roles = document.getElementById('pol-dry-roles').value.trim();
+  const resource = document.getElementById('pol-dry-resource').value.trim();
+  const action = document.getElementById('pol-dry-action').value.trim();
+  if (!resource || !action) {
+    out.innerHTML = '<div class="form-banner show error" style="margin-top: var(--sp-3)">Resource and action are required.</div>';
+    return;
+  }
+  const params = new URLSearchParams({ resource, action });
+  if (roles) params.set('roles', roles);
+  try {
+    const r = await fetch('/api/policy?' + params.toString());
+    const j = await r.json();
+    const d = j.dryRun || {};
+    const cls = d.allowed ? 'badge-ok' : 'badge-err';
+    const verdict = d.allowed ? 'allowed' : 'denied';
+    out.innerHTML = `
+      <div style="margin-top: var(--sp-3); display:flex; gap: var(--sp-2); align-items:center;">
+        <span class="badge ${cls}">${verdict}</span>
+        <code>${escHtml(Array.isArray(d.roles) ? d.roles.join(',') : '')} → ${escHtml(resource)}:${escHtml(action)}</code>
+      </div>
+      <div class="form-hint" style="margin-top: var(--sp-2)">${escHtml(d.reason || '')}</div>`;
+  } catch (e) {
+    out.innerHTML = '<div class="form-banner show error" style="margin-top: var(--sp-3)">Probe failed: ' + escHtml(String(e && e.message || e)) + '</div>';
+  }
 }
 
 // --- Theme (light / dark) ---
@@ -1596,6 +2103,240 @@ function toggleTheme(){
   syncThemeToggle();
 }
 
+// --- Management-plane auth (basic mode) ----------------------------------
+// When OMCP_AUTH=basic on the server, /api/* returns 401 + body
+// { code: "OMCP_AUTH_REQUIRED" } for unauthenticated requests. This block
+// wraps window.fetch to catch that, show the login modal, and replay the
+// original request once the user signs in. In anonymous mode nothing here
+// fires — the wrapper is a passthrough.
+const _omcpRawFetch = window.fetch.bind(window);
+let _omcpLoginInflight = null;
+let _omcpLoginResolve = null;
+window.fetch = async function omcpAuthedFetch(input, init) {
+  const res = await _omcpRawFetch(input, init);
+  if (res.status !== 401) return res;
+  let body = null;
+  try { body = await res.clone().json(); } catch(e) {}
+  if (!body || body.code !== 'OMCP_AUTH_REQUIRED') return res;
+  await omcpEnsureLoggedIn();
+  return _omcpRawFetch(input, init);
+};
+async function omcpEnsureLoggedIn() {
+  if (_omcpLoginInflight) return _omcpLoginInflight;
+  _omcpLoginInflight = new Promise((resolve) => { _omcpLoginResolve = resolve; });
+  // Race fix (deferred from #290 reviewer): when a protected fetch
+  // 401s before omcpSyncIdentity() has run, __omcpMe defaults to
+  // anonymous and the basic-mode form would flash for one paint
+  // even in OIDC mode. Force a sync before deciding which block to
+  // show so the operator never sees the wrong form.
+  if ((window.__omcpMe || {}).mode === 'anonymous') {
+    try { await omcpSyncIdentity(); } catch (e) {}
+  }
+  const m = document.getElementById('login-modal');
+  if (m) m.classList.add('open');
+  const me = window.__omcpMe || {};
+  const isOidc = me.mode === 'oidc';
+  const ssoBlock = document.getElementById('login-oidc');
+  const basicBlock = document.getElementById('login-basic');
+  const ssoHint = document.getElementById('login-sso-hint');
+  const submitBtn = document.getElementById('login-submit');
+  if (ssoBlock) ssoBlock.style.display = isOidc ? '' : 'none';
+  if (basicBlock) basicBlock.style.display = isOidc ? 'none' : '';
+  if (submitBtn) submitBtn.style.display = isOidc ? 'none' : '';
+  if (ssoHint && isOidc) {
+    ssoHint.textContent = me.idpIssuer ? 'You will be redirected to ' + me.idpIssuer : '';
+  }
+  // Prefill the most recent username (basic mode only — OIDC needs no
+  // local credential). Focus rules unchanged.
+  setTimeout(() => {
+    if (isOidc) {
+      const sso = document.getElementById('login-sso');
+      if (sso) sso.focus();
+      return;
+    }
+    const u = document.getElementById('login-username');
+    const p = document.getElementById('login-password');
+    let lastUser = '';
+    try { lastUser = localStorage.getItem('omcp-last-user') || ''; } catch (e) {}
+    if (u && lastUser && !u.value) u.value = lastUser;
+    if (u && p && u.value) p.focus();
+    else if (u) u.focus();
+  }, 50);
+  return _omcpLoginInflight;
+}
+// Kick off the OIDC redirect. The return_to carries the current path
+// so the user lands back where they were after the IdP round-trip.
+function omcpStartSso() {
+  const ret = location.pathname + location.search + location.hash;
+  // Only same-origin paths are valid (isSafeReturnTo on the server
+  // enforces this — but we sanitise client-side too so the URL stays
+  // tidy in browser history).
+  const safe = ret && ret.startsWith('/') && !ret.startsWith('//') ? ret : '/';
+  location.href = '/api/auth/oidc/login?return_to=' + encodeURIComponent(safe);
+}
+function omcpLoginKey(e) { if (e.key === 'Enter') { e.preventDefault(); omcpSubmitLogin(); } }
+async function omcpSubmitLogin() {
+  const u = document.getElementById('login-username').value.trim();
+  const p = document.getElementById('login-password').value;
+  const banner = document.getElementById('login-banner');
+  if (!u || !p) {
+    banner.className = 'form-banner show error';
+    banner.textContent = 'Username and password are required';
+    return;
+  }
+  const btn = document.getElementById('login-submit');
+  btn.disabled = true;
+  try {
+    const res = await _omcpRawFetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username: u, password: p }),
+    });
+    if (!res.ok) {
+      const j = await res.json().catch(() => ({ error: 'sign-in failed' }));
+      banner.className = 'form-banner show error';
+      banner.textContent = j.error || 'sign-in failed';
+      return;
+    }
+    document.getElementById('login-modal').classList.remove('open');
+    document.getElementById('login-password').value = '';
+    banner.className = 'form-banner';
+    // Remember the username for next time so the operator doesn't
+    // retype it on every cookie expiry. Password field never persists.
+    try { localStorage.setItem('omcp-last-user', u); } catch (e) {}
+    if (_omcpLoginResolve) { const r = _omcpLoginResolve; _omcpLoginResolve = null; _omcpLoginInflight = null; r(); }
+    await omcpSyncIdentity();
+  } finally { btn.disabled = false; }
+}
+async function omcpLogout() {
+  try { await _omcpRawFetch('/api/auth/logout', { method: 'POST' }); } catch(e) {}
+  await omcpSyncIdentity();
+  // Reload the page so any cached in-memory state is dropped.
+  location.reload();
+}
+// Identity + granted permissions snapshot, refreshed after sign-in /
+// out. Other code calls omcpCan('sources','write') to decide whether
+// to render write controls. Anonymous mode → window.__omcpMe.permissions
+// is undefined and omcpCan() returns true (no RBAC enforced).
+window.__omcpMe = { authenticated: false, mode: 'anonymous', permissions: null };
+function omcpCan(resource, action) {
+  const me = window.__omcpMe;
+  if (!me || me.mode === 'anonymous') return true;
+  if (!Array.isArray(me.permissions)) return false;
+  return me.permissions.some(p => p.resource === resource && p.action === action);
+}
+function omcpApplyRbacToDom() {
+  // Hide elements marked with data-rbac="resource:action" when the
+  // current user lacks that permission. Idempotent — safe to call on
+  // every render.
+  document.querySelectorAll('[data-rbac]').forEach(el => {
+    const [r, a] = (el.getAttribute('data-rbac') || '').split(':');
+    if (!r || !a) return;
+    el.style.display = omcpCan(r, a) ? '' : 'none';
+  });
+}
+async function omcpSyncIdentity() {
+  const badge = document.getElementById('user-badge');
+  try {
+    const r = await _omcpRawFetch('/api/me');
+    if (!r.ok) { if (badge) badge.style.display = 'none'; return; }
+    const me = await r.json();
+    window.__omcpMe = me;
+    if (me.authenticated && badge) {
+      // Show the email next to the name when the IdP gave us a
+      // verified one. Also surface the IdP issuer host as a title
+      // tooltip when this is an OIDC session — operators with
+      // multiple IdPs can tell at a glance which one they're on.
+      const nameEl = badge.querySelector('.user-name');
+      const u = me.user || {};
+      if (nameEl) {
+        nameEl.textContent = u.email ? (u.name + ' · ' + u.email) : u.name;
+      }
+      // Surface the tenant when it's not the universal default. A
+      // single-tenant deployment never sees the chip, so the demo
+      // path stays uncluttered; multi-tenant deployments get a
+      // permanent reminder of which tenant the session belongs to.
+      let chip = badge.querySelector('.user-tenant');
+      if (u.tenant && u.tenant !== 'default') {
+        if (!chip) {
+          chip = document.createElement('span');
+          chip.className = 'user-tenant tag';
+          chip.style.marginLeft = 'var(--sp-2)';
+          badge.appendChild(chip);
+        }
+        chip.textContent = u.tenant;
+      } else if (chip) {
+        chip.remove();
+      }
+      // body[data-tenant=…] lets per-tenant CSS theming (e.g. a brand
+      // colour bar) hook in without per-tenant builds.
+      document.body.setAttribute('data-tenant', u.tenant || 'default');
+      const tooltip = [];
+      if (me.mode === 'oidc' && me.idpIssuer) {
+        try { tooltip.push('signed in via ' + new URL(me.idpIssuer).host); } catch (e) { tooltip.push('signed in via ' + me.idpIssuer); }
+      }
+      if (u.tenant && u.tenant !== 'default') tooltip.push('tenant: ' + u.tenant);
+      if (tooltip.length) badge.title = tooltip.join(' · ');
+      else badge.removeAttribute('title');
+      badge.style.display = '';
+    } else if (badge) {
+      badge.style.display = 'none';
+      document.body.removeAttribute('data-tenant');
+    }
+    omcpApplyRbacToDom();
+  } catch (e) { if (badge) badge.style.display = 'none'; }
+}
+
+// Reads /api/info once at boot to surface deployment-misconfig warnings
+// the operator should fix. Currently only one trigger: the auth secret
+// is process-ephemeral (OMCP_SESSION_SECRET unset in basic mode), which
+// means every sign-in dies on restart. Pure additive — no banner shown
+// when the deployment is clean.
+async function omcpCheckGovernance() {
+  try {
+    const r = await _omcpRawFetch('/api/info');
+    if (!r.ok) return;
+    const info = await r.json();
+    const g = info && info.governance;
+    if (!g) return;
+    if (g.authMode === 'basic' && g.authSecretEphemeral) {
+      const bar = document.getElementById('omcp-warning-bar');
+      if (bar) {
+        bar.textContent = '⚠ OMCP_SESSION_SECRET is not set — every sign-in will be lost on server restart. Set a stable value in production.';
+        bar.style.display = '';
+      }
+    }
+  } catch (e) { /* /api/info unreachable — no banner */ }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  omcpSyncIdentity();
+  omcpCheckGovernance();
+});
+
+// --- Rail collapse toggle (icon-only mode) ---
+function toggleRail(){
+  const cur = document.documentElement.getAttribute('data-rail') === 'collapsed' ? 'collapsed' : 'expanded';
+  const next = cur === 'collapsed' ? 'expanded' : 'collapsed';
+  document.documentElement.setAttribute('data-rail', next);
+  try { localStorage.setItem('omcp-rail', next); } catch(e){}
+  // Update the toggle button's tooltip so it reflects the action it will take.
+  const btn = document.getElementById('rail-collapse-btn');
+  if (btn) btn.title = next === 'collapsed' ? 'Expand navigation' : 'Collapse navigation';
+}
+
+// --- Topology graph viewport controls (driven by the +/-/reset toolbar) ---
+function topoZoom(k){ const v = window.__topoViewport; if (v) v.zoom(k); }
+function topoResetView(){ const v = window.__topoViewport; if (v) v.reset(); }
+
+// --- Row density toggle (comfortable / compact), persisted ---
+function toggleDensity(){
+  const cur=document.documentElement.getAttribute('data-density')==='compact'?'compact':'comfortable';
+  const next=cur==='compact'?'comfortable':'compact';
+  document.documentElement.setAttribute('data-density',next);
+  try{ localStorage.setItem('omcp-density',next); }catch(e){}
+}
+
 // --- Navigation groups (collapsible, persisted) ---
 function navState(){ try{ return JSON.parse(localStorage.getItem('omcp-nav')||'{}'); }catch(e){ return {}; } }
 function toggleNavGroup(id){
@@ -1771,15 +2512,15 @@ function audDetail(seq){
   const tone=ev.allow?'ok':'bad';
   const reqRows=Object.keys(req).map(k=>`<tr><td>${escHtml(k)}</td><td class="mono">${escHtml(typeof req[k]==='object'?JSON.stringify(req[k]):String(req[k]))}</td></tr>`).join('')||'<tr><td colspan=2 style="color:var(--text-dim)">no request fields</td></tr>';
   const html=
-    dwSec('Decision', `<span class="stchip ${tone}">${ev.allow?'allow':'deny'}</span> <span style="color:var(--text-muted);font-size:var(--fs-sm)">sequence #${escHtml(String(e.seq))}</span>`)+
+    dwSec('Decision', `<span class="stchip ${tone}">${ev.allow?'allow':'deny'}</span> <span class="muted t-sm">sequence #${escHtml(String(e.seq))}</span>`)+
     dwSec('Principal & reason', `<table class="dtable"><tbody>
       <tr><td>Principal</td><td class="mono">${escHtml(ev.principalId||'—')}</td></tr>
       <tr><td>Timestamp</td><td class="mono">${escHtml(ev.ts||e.ts||'—')}</td></tr>
       <tr><td>Reason</td><td>${escHtml(ev.reason||'—')}</td></tr></tbody></table>`)+
     dwSec('Request', `<table class="dtable"><tbody>${reqRows}</tbody></table>`)+
     dwSec('Chain integrity', `<table class="dtable"><tbody>
-      <tr><td>Entry hash</td><td class="mono" style="word-break:break-all">${escHtml(e.hash||'—')}</td></tr>
-      <tr><td>Prev hash</td><td class="mono" style="word-break:break-all">${escHtml(e.prevHash||'—')}</td></tr></tbody></table>`);
+      <tr><td>Entry hash</td><td class="mono t-break">${escHtml(e.hash||'—')}</td></tr>
+      <tr><td>Prev hash</td><td class="mono t-break">${escHtml(e.prevHash||'—')}</td></tr></tbody></table>`);
   openDrawer('Decision #'+seq, html);
 }
 function dpView(){ try{ return localStorage.getItem('omcp-dp-view')==='table'?'table':'cards'; }catch(e){ return 'cards'; } }
@@ -1837,7 +2578,7 @@ function dpDetail(name){
     dwSec('Sources', dwChips(p.sources))+
     dwSec('Services', dwChips(p.services))+
     dwSec('Tools', dwChips(p.tools))+
-    dwSec('Granted to ('+grantedTo.length+')', grantedTo.length?grantedTo.map(x=>`<span class="chip">${escHtml(x)}</span>`).join(''):'<span style="color:var(--text-dim);font-size:var(--fs-sm)">No principals granted this product.</span>')+
+    dwSec('Granted to ('+grantedTo.length+')', grantedTo.length?grantedTo.map(x=>`<span class="chip">${escHtml(x)}</span>`).join(''):'<span class="t-dim t-sm">No principals granted this product.</span>')+
     `<div class="codeblock collapsed" style="margin-top:14px"><div class="codeblock-hd" onclick="toggleCode(this)"><span class="cb-chev">▾</span><span class="cb-title">API · grant this product</span><button class="codeblock-cp" onclick="event.stopPropagation();copyCode(this)">Copy</button></div><pre>${ex}</pre></div>`;
   openDrawer(name, html);
 }
@@ -1854,7 +2595,34 @@ async function loadGatePill(){
   }catch{ el.className='gate-pill gate-unknown'; el.textContent='Gate: n/a'; }
 }
 function entKV(o){return '<dl class="kv">'+Object.entries(o).map(([k,v])=>`<dt>${escHtml(k)}</dt><dd class="mono">${escHtml(v)}</dd>`).join('')+'</dl>';}
+// Operator-controlled page size for the management-plane audit feed.
+// Starts at 50 (the original default); the "Load more" button on the
+// table jumps to 500 (the in-memory ring cap) and the change persists
+// until the next reload. Doesn't read from localStorage on purpose —
+// inspecting more entries than usual is an investigative gesture, not
+// an everyday preference.
+let _omcpMgmtAuditLimit = 50;
+function omcpMgmtAuditMore(){ _omcpMgmtAuditLimit = 500; loadEnterprise(); }
+
+// Self-refresh the audit + governance feeds while the user is on
+// page-audit, page-access, page-products or page-entitlement. Gated on
+// document.activeElement and the page's .active class so it doesn't
+// burn cycles when the tab is hidden or backgrounded. Reuses the same
+// loadEnterprise() the page switch fires.
+let _omcpGovInterval = null;
+function ensureGovAutoRefresh(){
+  if (_omcpGovInterval) return;
+  _omcpGovInterval = setInterval(() => {
+    if (typeof document === 'undefined') return;
+    if (document.hidden) return;
+    const onGovPage = ['page-audit','page-access','page-products','page-entitlement']
+      .some(id => { const el = document.getElementById(id); return el && el.classList.contains('active'); });
+    if (onGovPage) loadEnterprise();
+  }, 15000);
+}
+
 async function loadEnterprise(){
+  ensureGovAutoRefresh();
   // Status + entitlement claims
   try{
     const s=await(await fetch('/api/enterprise/status')).json();
@@ -1914,6 +2682,61 @@ async function loadEnterprise(){
       box.querySelectorAll('[data-aud]').forEach(el=>el.addEventListener('click',()=>audDetail(el.getAttribute('data-aud'))));
     }
   }catch{ document.getElementById('ent-audit').innerHTML='<div class="empty">Audit unavailable.</div>'; }
+  // Management-plane audit (separate feed from the enterprise gate).
+  // Honours the per-page mgmt-audit-limit picker so operators can dial
+  // up from 50 to 500 entries without leaving the page.
+  try{
+    const limit = (typeof _omcpMgmtAuditLimit === 'number') ? _omcpMgmtAuditLimit : 50;
+    const r=await fetch('/api/audit?limit='+encodeURIComponent(limit));
+    if(!r.ok) throw new Error('http '+r.status);
+    const a=await r.json();
+    const box=document.getElementById('mgmt-audit');
+    const entries=a.entries||[];
+    if(entries.length===0){
+      box.innerHTML='<div class="empty">No management changes recorded yet.</div>';
+    } else {
+      const statusPill = (status) => {
+        const cls = status >= 500 ? 'pill-no'
+                  : status >= 400 ? 'pill-no'
+                  : status >= 200 && status < 300 ? 'pill-yes'
+                  : '';
+        return `<span class="mono ${cls}">${status}</span>`;
+      };
+      // Read = neutral, write = accent, delete = danger. Operators
+      // scanning an outage's worth of audit entries can spot the
+      // delete-shaped rows first — those are the ones most likely to
+      // have caused the regression.
+      const permPill = (resource, action) => {
+        const cls = action === 'delete' ? 'pill-no'
+                  : action === 'write' ? 't-accent'
+                  : 't-muted';
+        return `<span class="mono ${cls}">${escHtml(resource)}:${escHtml(action)}</span>`;
+      };
+      // Anonymous-mode entries render in muted italic so they read
+      // distinctly from authenticated actors — useful for spotting
+      // misconfigured deployments and pre-migration entries in the
+      // same feed.
+      const actorCell = (a) => {
+        const label = a.name || a.sub;
+        if (a.sub === 'anonymous') {
+          return `<span class="t-muted" style="font-style:italic">${escHtml(label)}</span>`;
+        }
+        return escHtml(label);
+      };
+      const rows=entries.map(e=>
+        `<tr><td class="mono">${e.seq}</td><td class="mono t-sm">${escHtml(e.ts)}</td><td>${actorCell(e.actor)}</td><td><span class="chip">${escHtml(e.method)}</span> <span class="mono t-sm">${escHtml(e.path)}</span></td><td>${permPill(e.resource, e.action)}</td><td>${statusPill(e.status)}</td></tr>`
+      ).join('');
+      const note=a.persisted?'':' · in-memory only — set OMCP_MGMT_AUDIT_FILE for persistence';
+      const showMore = entries.length === limit
+        ? `<button class="btn btn-ghost btn-sm" onclick="omcpMgmtAuditMore()">Load more (up to 500)</button>`
+        : '';
+      box.innerHTML=`<div class="row-between mb-2"><span class="t-muted t-sm">${entries.length} entries${escHtml(note)}</span>${showMore}</div>
+        <table class="dtable"><thead><tr><th>#</th><th>When</th><th>Actor</th><th>Request</th><th>Permission</th><th>Status</th></tr></thead><tbody>${rows}</tbody></table>`;
+    }
+  }catch(e){
+    const box=document.getElementById('mgmt-audit');
+    if(box) box.innerHTML='<div class="empty">Management audit unavailable.</div>';
+  }
 }
 // ---- Minimal YAML for the flat policy/catalog schema (maps, string
 // arrays, booleans, strings). Optional alternative view to the form. ----
@@ -2249,6 +3072,154 @@ function closeModal(id) { document.getElementById(id).classList.remove('open');
 
 // --- Data Loading ---
 async function loadSources() { try { sourcesData=await(await fetch('/api/sources')).json(); renderSources(); updateStats(); } catch(e){} }
+// --- MCP Products (new /api/products surface) ---
+async function loadMcpProducts() {
+  const box = document.getElementById('mcp-products-box');
+  const scope = document.getElementById('mcp-products-scope');
+  if (!box) return;
+  try {
+    const r = await fetch('/api/products');
+    if (!r.ok) {
+      // 403 = no products:read; render a friendly hint instead of an empty list
+      if (r.status === 403) {
+        box.innerHTML = '<div class="empty">Requires <code>products:read</code> permission (granted to viewer / operator / admin by default).</div>';
+      } else {
+        box.innerHTML = '<div class="empty">/api/products unavailable.</div>';
+      }
+      return;
+    }
+    const j = await r.json();
+    if (scope) {
+      const s = j.scopedTo === null ? 'all tenants' : (j.scopedTo || 'default');
+      scope.textContent = 'scope: ' + s + (j.includesStaging ? ' · staging visible' : '');
+    }
+    if (!j.products || j.products.length === 0) {
+      const hint = j.configured
+        ? 'No products yet. Click <b>+ New product</b> or edit <code>OMCP_PRODUCTS_FILE</code> directly.'
+        : 'Set <code>OMCP_PRODUCTS_FILE=&lt;path&gt;</code> on the server (or use <b>+ New product</b> to start an in-memory catalog).';
+      box.innerHTML = '<div class="empty">' + hint + '</div>';
+      return;
+    }
+    const rows = j.products.map((p) => {
+      const status = p.status === 'staging'
+        ? '<span class="pill" style="background:var(--warning-soft);color:var(--warning)">staging</span>'
+        : '<span class="pill" style="background:var(--success-soft);color:var(--success)">published</span>';
+      const tools = (p.tools || []).slice(0, 5).map((t) => `<code class="t-sm">${escHtml(t)}</code>`).join(' ');
+      const moreTools = (p.tools || []).length > 5 ? ` <span class="t-sm" style="opacity:.7">+${(p.tools.length - 5)} more</span>` : '';
+      const tenantCell = `<span class="tag">${escHtml(p.tenant || 'default')}</span>`;
+      return `<tr>
+        <td><code>${escHtml(p.id)}</code></td>
+        <td>${escHtml(p.name)}${p.description ? `<div class="t-sm" style="opacity:.7">${escHtml(p.description)}</div>` : ''}</td>
+        <td>${tenantCell}</td>
+        <td>${status}</td>
+        <td>${tools || '<span class="t-sm" style="opacity:.5">all tools</span>'}${moreTools}</td>
+        <td style="text-align:right">
+          <button class="btn-icon" data-rbac="products:write" title="Edit" onclick="mcpProductsEdit('${encodeURIComponent(p.id)}')">&#9998;</button>
+          <button class="btn-icon" data-rbac="products:delete" title="Delete" onclick="mcpProductsDelete('${encodeURIComponent(p.id)}')">&#128465;</button>
+        </td>
+      </tr>`;
+    }).join('');
+    box.innerHTML = `<table class="data-table" style="width:100%">
+      <thead><tr><th>id</th><th>Name</th><th>Tenant</th><th>Status</th><th>Tools</th><th></th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table>`;
+    omcpApplyRbacToDom();
+  } catch (e) {
+    box.innerHTML = '<div class="empty">/api/products unavailable: ' + escHtml(String(e && e.message || e)) + '</div>';
+  }
+}
+async function mcpProductsNew() {
+  const id = (window.prompt('New product id (lowercase, [a-z0-9._-]):') || '').trim();
+  if (!id) return;
+  const name = (window.prompt('Display name:') || '').trim();
+  if (!name) return;
+  await mcpProductsUpsert(id, { id, name, status: 'staging' });
+}
+async function mcpProductsEdit(idEnc) {
+  const id = decodeURIComponent(idEnc);
+  const r = await fetch('/api/products/' + encodeURIComponent(id));
+  if (!r.ok) { toast('Could not fetch ' + id); return; }
+  const current = await r.json();
+  const newName = window.prompt('Display name', current.name);
+  if (newName === null) return;
+  const status = window.prompt('Status (published | staging)', current.status || 'published');
+  if (status === null) return;
+  await mcpProductsUpsert(id, { ...current, name: newName, status });
+}
+async function mcpProductsUpsert(id, body) {
+  try {
+    const r = await fetch('/api/products/' + encodeURIComponent(id), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!r.ok) {
+      const j = await r.json().catch(() => ({}));
+      toast('Save failed: ' + (j.error || r.status));
+      return;
+    }
+    toast('Saved ' + id);
+    await loadMcpProducts();
+  } catch (e) { toast('Save failed: ' + (e && e.message || e)); }
+}
+async function mcpProductsDelete(idEnc) {
+  const id = decodeURIComponent(idEnc);
+  if (!window.confirm('Delete product ' + id + '?')) return;
+  try {
+    const r = await fetch('/api/products/' + encodeURIComponent(id), { method: 'DELETE' });
+    if (r.status === 204) {
+      toast('Deleted ' + id);
+      await loadMcpProducts();
+      return;
+    }
+    const j = await r.json().catch(() => ({}));
+    toast('Delete failed: ' + (j.error || r.status));
+  } catch (e) { toast('Delete failed: ' + (e && e.message || e)); }
+}
+
+async function loadDashUsage() {
+  const card = document.getElementById('dash-usage-card');
+  const box = document.getElementById('dash-usage');
+  if (!card || !box) return;
+  try {
+    const r = await fetch('/api/usage');
+    if (!r.ok) { card.style.display = 'none'; return; }
+    const j = await r.json();
+    const ids = (j.identities || [])
+      .map((i) => ({
+        actor: i.actor,
+        tenant: i.tenant || 'default',
+        calls: i.count || 0,
+        rateLimit: i.limit || 0,
+        tokensUsed: (i.tokens && i.tokens.used) || 0,
+        tokenLimit: (i.tokens && i.tokens.limit) || 0,
+      }))
+      .filter((i) => i.calls > 0 || i.tokensUsed > 0)
+      .sort((a, b) => (b.tokensUsed - a.tokensUsed) || (b.calls - a.calls))
+      .slice(0, 5);
+    if (ids.length === 0) { card.style.display = 'none'; return; }
+    card.style.display = '';
+    // Header chip: which tenant the view is scoped to (admins see
+    // either "all tenants" or a specific name; non-admins always
+    // see their own).
+    const scope = j.scopedTo === null ? 'all tenants' : (j.scopedTo || 'default');
+    const showTenantCol = j.scopedTo === null; // only admins unscoped see multiple
+    const rows = ids.map((i) => {
+      const pct = i.tokenLimit > 0 ? Math.min(100, Math.round((i.tokensUsed / i.tokenLimit) * 100)) : null;
+      const tokenCell = i.tokenLimit > 0
+        ? `${i.tokensUsed.toLocaleString()} / ${i.tokenLimit.toLocaleString()} <span class="t-sm" style="opacity:.7">(${pct}%)</span>`
+        : `${i.tokensUsed.toLocaleString()} <span class="t-sm" style="opacity:.7">(uncapped)</span>`;
+      const bar = pct !== null
+        ? `<div style="background: var(--surface-2); height: 6px; border-radius: 3px; overflow:hidden; margin-top: 2px;"><div style="width:${pct}%; height:100%; background: ${pct >= 90 ? 'var(--danger)' : pct >= 70 ? 'var(--warning)' : 'var(--success)'};"></div></div>`
+        : '';
+      const tenantCell = showTenantCol ? `<td><span class="tag">${escHtml(i.tenant)}</span></td>` : '';
+      return `<tr><td><code>${escHtml(i.actor)}</code></td>${tenantCell}<td>${i.calls.toLocaleString()} / ${i.rateLimit.toLocaleString()}</td><td>${tokenCell}${bar}</td></tr>`;
+    }).join('');
+    const tenantHeader = showTenantCol ? '<th>Tenant</th>' : '';
+    const scopeNote = `<div class="form-hint" style="padding: var(--sp-1) var(--sp-4) var(--sp-2); opacity:.7">scope: ${escHtml(scope)}</div>`;
+    box.innerHTML = scopeNote + `<table class="data-table" style="width:100%"><thead><tr><th>Identity</th>${tenantHeader}<th>Calls (rate-limit/min)</th><th>Tokens (24h)</th></tr></thead><tbody>${rows}</tbody></table>`;
+  } catch (e) { card.style.display = 'none'; }
+}
 async function loadServices() { try { const d=await(await fetch('/api/services')).json(); servicesData=d.services||[]; renderServices(); updateStats(); } catch(e){} }
 async function loadTypes() { try { supportedTypes=await(await fetch('/api/source-types')).json(); } catch(e){ supportedTypes=['prometheus','loki']; } }
 async function loadSettingsData() {
@@ -2358,28 +3329,112 @@ function renderHealthPanels(svcs){
 // --- Render Sources ---
 function srcView(){ try{ return localStorage.getItem('omcp-src-view')==='table'?'table':'list'; }catch(e){ return 'list'; } }
 function setSrcView(v){ try{ localStorage.setItem('omcp-src-view',v); }catch(e){} renderSources(); }
+
+// --- Sources / Services filter + sort state (filter in-memory, sort persisted) ---
+let srcFilter = '';
+let svcFilter = '';
+function loadSrcSort(){
+  try{ const s = JSON.parse(localStorage.getItem('omcp-src-sort')||''); if (s && s.key) return s; }catch(e){}
+  return { key: 'name', dir: 'asc' };
+}
+let srcSort = loadSrcSort();
+function setSrcSort(key){
+  if (srcSort.key === key) srcSort.dir = srcSort.dir === 'asc' ? 'desc' : 'asc';
+  else { srcSort.key = key; srcSort.dir = 'asc'; }
+  try{ localStorage.setItem('omcp-src-sort', JSON.stringify(srcSort)); }catch(e){}
+  renderSources();
+}
+function setSrcFilter(v){ srcFilter = String(v||'').trim().toLowerCase(); renderSources(); }
+function setSvcFilter(v){ svcFilter = String(v||'').trim().toLowerCase(); renderServices(); }
+function compareSrc(a, b){
+  const dir = srcSort.dir === 'desc' ? -1 : 1;
+  let av, bv;
+  switch (srcSort.key) {
+    case 'type':    av = a.type;            bv = b.type;            break;
+    case 'signal':  av = a.signalType||'';  bv = b.signalType||'';  break;
+    case 'url':     av = a.url;             bv = b.url;             break;
+    case 'status':  av = !a.enabled?'disabled':a.status; bv = !b.enabled?'disabled':b.status; break;
+    case 'latency': return dir * ((a.latencyMs||0) - (b.latencyMs||0));
+    case 'name':
+    default:        av = a.name;            bv = b.name;
+  }
+  av = String(av).toLowerCase(); bv = String(bv).toLowerCase();
+  if (av < bv) return -1 * dir;
+  if (av > bv) return  1 * dir;
+  return 0;
+}
+function filterSrcRow(s){
+  if (!srcFilter) return true;
+  return [s.name, s.type, s.signalType||'', s.url].join(' ').toLowerCase().includes(srcFilter);
+}
+function filterSvcRow(s){
+  if (!svcFilter) return true;
+  return [s.name, (s.sources||[]).join(' '), (s.signalTypes||[]).join(' ')]
+    .join(' ').toLowerCase().includes(svcFilter);
+}
+function sortIndClass(key){
+  return key === srcSort.key ? (srcSort.dir === 'asc' ? 'sort-asc' : 'sort-desc') : '';
+}
+
 function srcRow(s){
   const sc=!s.enabled?'dot-disabled':s.status==='up'?'dot-up':'dot-down';
-  return `<div class="source-row" data-src="${esc(s.name)}"><div class="dot ${sc}"></div><div class="source-info"><div class="name">${esc(s.name)}<span class="tag tag-type">${esc(s.type)}</span>${s.signalType?`<span class="tag tag-${s.signalType}">${s.signalType}</span>`:''}</div><div class="url">${esc(s.url)}</div></div>${s.latencyMs?`<span class="tag-latency">${s.latencyMs}ms</span>`:''}<div class="source-actions" onclick="event.stopPropagation()"><label class="toggle"><input type="checkbox" ${s.enabled?'checked':''} onchange="toggleSource('${esc(s.name)}')"><span class="slider"></span></label><button class="btn-icon" onclick="openEditModal('${esc(s.name)}')">&#9998;</button><button class="btn-icon" onclick="openDeleteConfirm('source','${esc(s.name)}')">&#128465;</button></div></div>`;
+  return `<div class="source-row" data-src="${esc(s.name)}"><div class="dot ${sc}"></div><div class="source-info"><div class="name">${esc(s.name)}<span class="tag tag-type">${esc(s.type)}</span>${s.signalType?`<span class="tag tag-${s.signalType}">${s.signalType}</span>`:''}</div><div class="url">${esc(s.url)}</div></div>${s.latencyMs?`<span class="tag-latency">${s.latencyMs}ms</span>`:''}<div class="source-actions" onclick="event.stopPropagation()"><label class="toggle" data-rbac="sources:write"><input type="checkbox" ${s.enabled?'checked':''} onchange="toggleSource('${esc(s.name)}')"><span class="slider"></span></label><button class="btn-icon" data-rbac="sources:write" title="Edit source" aria-label="Edit source" onclick="openEditModal('${esc(s.name)}')">&#9998;</button><button class="btn-icon" data-rbac="sources:delete" title="Delete source" aria-label="Delete source" onclick="openDeleteConfirm('source','${esc(s.name)}')">&#128465;</button></div></div>`;
 }
 function renderSources() {
-  const dashHtml = sourcesData.length===0 ? '<div class="empty">No sources configured.</div>' : sourcesData.map(srcRow).join('');
+  const emptyDash = richEmpty({
+    icon: 'plug',
+    title: 'No sources yet',
+    desc: 'Connect Prometheus, Loki or a Kubernetes cluster to start observing services.',
+    ctaLabel: 'Add a source',
+    ctaOnClick: "showPage('sources');openAddModal()",
+  });
+  const dashHtml = sourcesData.length===0 ? emptyDash : sourcesData.map(srcRow).join('');
   document.getElementById('dash-sources').innerHTML=dashHtml;
   const box=document.getElementById('sources-list'); if(!box) return;
-  if(sourcesData.length===0){ box.innerHTML='<div class="empty">No sources configured.</div>'; return; }
+  if(sourcesData.length===0){
+    box.innerHTML = richEmpty({
+      icon: 'plug',
+      title: 'No sources configured',
+      desc: 'Add a Prometheus, Loki or Kubernetes endpoint. Sources are auto-discovered for services and feed health, anomaly and topology tools.',
+      ctaLabel: 'Add a source',
+      ctaOnClick: 'openAddModal()',
+    });
+    return;
+  }
   const view=srcView();
-  const bar=`<div class="dp-bar"><span style="color:var(--text-muted);font-size:12px">${sourcesData.length} source${sourcesData.length===1?'':'s'} · click for detail</span>
-    <span class="view-toggle" style="margin-left:auto"><button class="${view==='list'?'active':''}" onclick="setSrcView('list')">List</button><button class="${view==='table'?'active':''}" onclick="setSrcView('table')">Table</button></span></div>`;
+  // Apply filter + sort. Keep `sourcesData` immutable; render from a copy.
+  const visible = sourcesData.filter(filterSrcRow).slice().sort(compareSrc);
+  const filterBar=`<div class="list-filter">
+    <input id="src-filter" type="search" placeholder="Filter sources by name, type or URL…" value="${esc(srcFilter)}" oninput="setSrcFilter(this.value)" aria-label="Filter sources">
+    <span class="count">${visible.length} of ${sourcesData.length}</span>
+    <span class="view-toggle" style="margin-left:auto"><button class="${view==='list'?'active':''}" onclick="setSrcView('list')">List</button><button class="${view==='table'?'active':''}" onclick="setSrcView('table')">Table</button></span>
+  </div>`;
   let body;
   if(view==='table'){
-    body=`<table class="dtable"><thead><tr><th>Name</th><th>Type</th><th>Signal</th><th>URL</th><th>Status</th><th>Latency</th></tr></thead><tbody>`+
-      sourcesData.map(s=>`<tr data-src="${esc(s.name)}"><td class="mono">${esc(s.name)}</td><td>${esc(s.type)}</td><td>${s.signalType?esc(s.signalType):'—'}</td><td class="mono" style="color:var(--text-muted)">${esc(s.url)}</td><td>${!s.enabled?'disabled':s.status==='up'?'<span class="pill-yes">up</span>':'<span class="pill-no">down</span>'}</td><td class="mono">${s.latencyMs?s.latencyMs+'ms':'—'}</td></tr>`).join('')+
+    const h = (key, label) => `<th class="sortable ${sortIndClass(key)}" data-sort-key="${key}" onclick="setSrcSort('${key}')">${label}<span class="sort-ind"></span></th>`;
+    body=`<table class="dtable"><thead><tr>${h('name','Name')}${h('type','Type')}${h('signal','Signal')}${h('url','URL')}${h('status','Status')}${h('latency','Latency')}</tr></thead><tbody>`+
+      visible.map(s=>`<tr data-src="${esc(s.name)}"><td class="mono">${esc(s.name)}</td><td>${esc(s.type)}</td><td>${s.signalType?esc(s.signalType):'—'}</td><td class="mono t-muted">${esc(s.url)}</td><td>${!s.enabled?'disabled':s.status==='up'?'<span class="pill-yes">up</span>':'<span class="pill-no">down</span>'}</td><td class="mono">${s.latencyMs?s.latencyMs+'ms':'—'}</td></tr>`).join('')+
       `</tbody></table>`;
   } else {
-    body=sourcesData.map(srcRow).join('');
+    body = visible.length === 0
+      ? `<div class="empty">No sources match "${esc(srcFilter)}".</div>`
+      : visible.map(srcRow).join('');
   }
-  box.innerHTML=bar+body;
-  box.querySelectorAll('[data-src]').forEach(el=>el.addEventListener('click',()=>srcDetail(el.getAttribute('data-src'))));
+  box.innerHTML=filterBar+body;
+  // Re-focus the filter input so typing doesn't lose focus across renders.
+  if (srcFilter) {
+    const inp = document.getElementById('src-filter');
+    if (inp) { inp.focus(); inp.setSelectionRange(inp.value.length, inp.value.length); }
+  }
+  box.querySelectorAll('tr[data-src], .source-row[data-src]').forEach(el=>el.addEventListener('click',(ev)=>{
+    // Don't trigger detail when clicking sortable column headers or actions.
+    if (ev.target.closest('.source-actions, th.sortable')) return;
+    srcDetail(el.getAttribute('data-src'));
+  }));
+  // Re-apply RBAC visibility — the new rows just got data-rbac="…" on
+  // the per-row edit/delete/toggle controls and need to be hidden for
+  // viewers who can't operate them. Idempotent.
+  if (typeof omcpApplyRbacToDom === 'function') omcpApplyRbacToDom();
 }
 function srcDetail(name){
   const s=sourcesData.find(x=>x.name===name);
@@ -2387,22 +3442,71 @@ function srcDetail(name){
   const tone=!s.enabled?'warn':s.status==='up'?'ok':'bad';
   const svc=(servicesData||[]).filter(x=>(x.sources||[]).includes(s.name)).map(x=>x.name);
   const html=
-    dwSec('Status', `<span class="stchip ${tone}">${!s.enabled?'disabled':s.status==='up'?'up':'down'}</span>${s.latencyMs?` <span style="color:var(--text-muted);font-size:var(--fs-sm)">${s.latencyMs}ms</span>`:''}`)+
+    dwSec('Status', `<span class="stchip ${tone}">${!s.enabled?'disabled':s.status==='up'?'up':'down'}</span>${s.latencyMs?` <span class="muted t-sm">${s.latencyMs}ms</span>`:''}`)+
     dwSec('Configuration', `<table class="dtable"><tbody>
       <tr><td>Type</td><td class="mono">${escHtml(s.type)}</td></tr>
       <tr><td>Signal type</td><td class="mono">${escHtml(s.signalType||'—')}</td></tr>
-      <tr><td>URL</td><td class="mono" style="word-break:break-all">${escHtml(s.url)}</td></tr>
+      <tr><td>URL</td><td class="mono t-break">${escHtml(s.url)}</td></tr>
       <tr><td>Enabled</td><td>${s.enabled?'yes':'no'}</td></tr></tbody></table>`)+
-    dwSec('Services from this source', svc.length?svc.map(n=>`<span class="chip">${escHtml(n)}</span>`).join(' '):'<span style="color:var(--text-dim);font-size:var(--fs-sm)">none discovered</span>')+
+    dwSec('Services from this source', svc.length?svc.map(n=>`<span class="chip">${escHtml(n)}</span>`).join(' '):'<span class="t-dim t-sm">none discovered</span>')+
     `<div style="display:flex;gap:8px;margin-top:14px"><button class="btn btn-sm" onclick="closeDrawer();openEditModal('${esc(s.name)}')">Edit source</button><button class="btn btn-ghost btn-sm" onclick="closeDrawer();openDeleteConfirm('source','${esc(s.name)}')">Delete</button></div>`+
     `<div class="codeblock collapsed" style="margin-top:12px"><div class="codeblock-hd" onclick="toggleCode(this)"><span class="cb-chev">▾</span><span class="cb-title">API · all sources</span><button class="codeblock-cp" onclick="event.stopPropagation();copyCode(this)">Copy</button></div><pre>curl -s http://localhost:3000/api/sources</pre></div>`;
   openDrawer(name, html);
 }
 function renderServices() {
-  const html = servicesData.length===0 ? '<div class="empty">No services discovered.</div>' : servicesData.map(s=>`<div class="service-row" data-svc="${esc(s.name)}"><div><span class="name">${esc(s.name)}</span>${s.signalTypes.map(t=>`<span class="tag tag-${t}">${t}</span>`).join('')}</div><span style="color:var(--text2);font-size:12px">${s.sources.join(', ')}</span></div>`).join('');
-  const sl=document.getElementById('services-list'); sl.innerHTML=html;
-  sl.querySelectorAll('[data-svc]').forEach(el=>el.addEventListener('click',()=>svcDetail(el.getAttribute('data-svc'))));
-  document.getElementById('dash-services').innerHTML=html;
+  const sl = document.getElementById('services-list');
+  const dash = document.getElementById('dash-services');
+  if(servicesData.length === 0){
+    // Two flavors: if no sources are connected, point at the Sources tab;
+    // otherwise it's a transient discovery gap, so just say "no services yet".
+    const hasSources = (sourcesData||[]).some(s => s.enabled && s.status === 'up');
+    const empty = hasSources
+      ? richEmpty({
+          icon: 'service',
+          title: 'No services discovered',
+          desc: 'Sources are connected but no service-level signals are flowing yet. Health and anomaly tools will activate as soon as services start emitting metrics or logs.',
+        })
+      : richEmpty({
+          icon: 'service',
+          title: 'No services to show',
+          desc: 'Connect at least one source — services are auto-discovered from the metrics or logs they emit.',
+          ctaLabel: 'Go to Sources',
+          ctaOnClick: "showPage('sources')",
+        });
+    if (sl) sl.innerHTML = empty;
+    if (dash) dash.innerHTML = empty;
+    return;
+  }
+  const visible = servicesData.filter(filterSvcRow);
+  // Catalog enrichment is optional — when /api/services returned a
+  // `.catalog` field (because OMCP_SERVICE_CATALOG_FILE is set and
+  // the service name matched an entry), surface the most useful
+  // fields inline: owner chip, criticality tier pill, on-call link.
+  // Otherwise the row renders exactly as before.
+  const catalogStrip = (c) => {
+    if (!c) return '';
+    const parts = [];
+    if (c.owner) parts.push(`<span class="chip">owner: ${esc(c.owner)}</span>`);
+    if (c.tier)  parts.push(`<span class="chip">${esc(c.tier)}</span>`);
+    if (c.onCall) parts.push(`<a class="chip" href="${esc(c.onCall)}" target="_blank" rel="noopener">on-call ↗</a>`);
+    return parts.length ? ` <span class="row-inline gap-2">${parts.join('')}</span>` : '';
+  };
+  const rowsHtml = visible.length === 0
+    ? `<div class="empty">No services match "${esc(svcFilter)}".</div>`
+    : visible.map(s=>`<div class="service-row" data-svc="${esc(s.name)}"><div><span class="name">${esc(s.name)}</span>${s.signalTypes.map(t=>`<span class="tag tag-${t}">${t}</span>`).join('')}${catalogStrip(s.catalog)}</div><span class="t-muted t-sm">${s.sources.join(', ')}</span></div>`).join('');
+  if (sl) {
+    const filterBar = `<div class="list-filter">
+      <input id="svc-filter" type="search" placeholder="Filter services by name or source…" value="${esc(svcFilter)}" oninput="setSvcFilter(this.value)" aria-label="Filter services">
+      <span class="count">${visible.length} of ${servicesData.length}</span>
+    </div>`;
+    sl.innerHTML = filterBar + rowsHtml;
+    if (svcFilter) {
+      const inp = document.getElementById('svc-filter');
+      if (inp) { inp.focus(); inp.setSelectionRange(inp.value.length, inp.value.length); }
+    }
+    sl.querySelectorAll('[data-svc]').forEach(el=>el.addEventListener('click',()=>svcDetail(el.getAttribute('data-svc'))));
+  }
+  if (dash) dash.innerHTML = rowsHtml;
 }
 async function svcDetail(name){
   let v=healthMap[name];
@@ -2411,16 +3515,35 @@ async function svcDetail(name){
   const tone=v.status==='critical'?'bad':v.status!=='healthy'?'warn':'ok';
   const m=(v.signals&&v.signals.metrics)||{};
   const fmtN=x=>x==null?'—':(Math.round(Number(x)*100)/100);
+  // Catalog enrichment may live on either the health payload or on the
+  // service row in servicesData (whichever was fetched first).
+  const cat = v.catalog || ((servicesData||[]).find(s => s.name === name) || {}).catalog;
+  const catalogSection = cat ? dwSec('Catalog', `<table class="dtable"><tbody>${
+    [
+      ['Owner', cat.owner],
+      ['Tier', cat.tier],
+      ['Data classification', cat.dataClassification],
+      ['SLO', cat.slo],
+      ['On-call', cat.onCall ? `<a href="${escHtml(cat.onCall)}" target="_blank" rel="noopener" class="mono">${escHtml(cat.onCall)} ↗</a>` : null],
+      ['Tags', (cat.tags && cat.tags.length) ? cat.tags.map(t => `<span class="chip">${escHtml(t)}</span>`).join(' ') : null],
+      ['Runbooks', (cat.runbooks && cat.runbooks.length) ? cat.runbooks.map(u => `<a href="${escHtml(u)}" target="_blank" rel="noopener" class="mono t-sm">${escHtml(u)} ↗</a>`).join('<br>') : null],
+      ['Description', cat.description],
+    ]
+      .filter(([, val]) => val != null && val !== '')
+      .map(([k, val]) => `<tr><td>${k}</td><td>${val}</td></tr>`)
+      .join('')
+  }</tbody></table>`) : '';
   const html=
-    dwSec('Status', `<span class="stchip ${tone}">${escHtml(v.status)}</span> <span style="color:var(--text-muted);font-size:var(--fs-sm)">health score ${escHtml(v.score)}</span>`)+
+    dwSec('Status', `<span class="stchip ${tone}">${escHtml(v.status)}</span> <span class="muted t-sm">health score ${escHtml(v.score)}</span>`)+
+    catalogSection+
     dwSec('Signals', `<table class="dtable"><tbody>
       <tr><td>CPU</td><td class="mono">${fmtN(m.cpu)}</td></tr>
       <tr><td>Memory (MB)</td><td class="mono">${fmtN(m.memory)}</td></tr>
       <tr><td>Error rate</td><td class="mono">${fmtN(m.errorRate)}</td></tr>
       <tr><td>Latency p99 (s)</td><td class="mono">${fmtN(m.latencyP99)}</td></tr>
       <tr><td>Log errors (5m)</td><td class="mono">${fmtN(v.signals&&v.signals.logs&&v.signals.logs.errorRate)}</td></tr></tbody></table>`)+
-    dwSec('Anomalies', (v.anomalies&&v.anomalies.length)?v.anomalies.map(a=>`<div class="feed-row"><span class="stchip ${a.severity==='high'?'bad':'warn'}">${escHtml(a.metric)}</span><div class="fr-main"><div class="fr-sub">${escHtml(a.description||'')}</div></div></div>`).join(''):'<span style="color:var(--text-dim);font-size:var(--fs-sm)">None detected.</span>')+
-    dwSec('Correlations', (v.correlations&&v.correlations.length)?v.correlations.map(c=>`<div class="fr-sub" style="margin-bottom:4px">• ${escHtml(c)}</div>`).join(''):'<span style="color:var(--text-dim);font-size:var(--fs-sm)">None.</span>')+
+    dwSec('Anomalies', (v.anomalies&&v.anomalies.length)?v.anomalies.map(a=>`<div class="feed-row"><span class="stchip ${a.severity==='high'?'bad':'warn'}">${escHtml(a.metric)}</span><div class="fr-main"><div class="fr-sub">${escHtml(a.description||'')}</div></div></div>`).join(''):'<span class="t-dim t-sm">None detected.</span>')+
+    dwSec('Correlations', (v.correlations&&v.correlations.length)?v.correlations.map(c=>`<div class="fr-sub" style="margin-bottom:4px">• ${escHtml(c)}</div>`).join(''):'<span class="t-dim t-sm">None.</span>')+
     `<div class="codeblock collapsed" style="margin-top:6px"><div class="codeblock-hd" onclick="toggleCode(this)"><span class="cb-chev">▾</span><span class="cb-title">API · this service's health</span><button class="codeblock-cp" onclick="event.stopPropagation();copyCode(this)">Copy</button></div><pre>curl -s http://localhost:3000/api/health/${escHtml(name)}</pre></div>`;
   openDrawer(name, html);
 }
@@ -2486,6 +3609,7 @@ function openAddModal() {
   document.getElementById('src-url').value=''; document.getElementById('src-enabled').checked=true;
   resetTlsFields();
   document.getElementById('src-name').disabled=false; resetAuthFields(); hideTestResult();
+  setFieldError('src-name','src-name-err',null); setFieldError('src-url','src-url-err',null); clearSrcBanner();
   const sel=document.getElementById('src-type'); sel.innerHTML=supportedTypes.map(t=>`<option value="${t}">${t}</option>`).join('');
   document.getElementById('source-modal').classList.add('open');
 }
@@ -2495,19 +3619,76 @@ function openEditModal(name) {
   document.getElementById('modal-original-name').value=name; document.getElementById('src-name').value=s.name;
   document.getElementById('src-name').disabled=true; document.getElementById('src-url').value=s.url;
   document.getElementById('src-enabled').checked=s.enabled; setTlsInForm(s.tls); setAuthInForm(s.auth); hideTestResult();
+  setFieldError('src-name','src-name-err',null); setFieldError('src-url','src-url-err',null); clearSrcBanner();
   const sel=document.getElementById('src-type'); sel.innerHTML=supportedTypes.map(t=>`<option value="${t}" ${t===s.type?'selected':''}>${t}</option>`).join('');
   document.getElementById('source-modal').classList.add('open');
 }
+// --- Source modal form validation + banner ------------------------------
+function setFieldError(inputId, errId, msg) {
+  const inp = document.getElementById(inputId);
+  const err = document.getElementById(errId);
+  if (msg) {
+    if (inp) inp.classList.add('is-invalid');
+    if (err) { err.textContent = msg; err.hidden = false; }
+  } else {
+    if (inp) inp.classList.remove('is-invalid');
+    if (err) { err.textContent = ''; err.hidden = true; }
+  }
+}
+function showSrcBanner(kind, msg) {
+  const b = document.getElementById('src-form-banner');
+  if (!b) return;
+  b.className = 'form-banner show ' + (kind || '');
+  b.textContent = msg || '';
+}
+function clearSrcBanner() {
+  const b = document.getElementById('src-form-banner');
+  if (b) { b.className = 'form-banner'; b.textContent = ''; }
+}
+function validateSrcName() {
+  const v = (document.getElementById('src-name').value || '').trim();
+  if (!v) { setFieldError('src-name', 'src-name-err', 'Name is required'); return false; }
+  if (!/^[a-z0-9][a-z0-9-]{0,62}$/i.test(v)) {
+    setFieldError('src-name', 'src-name-err',
+      'Use letters, digits and dashes (1–63 chars; must start with a letter or digit).');
+    return false;
+  }
+  setFieldError('src-name', 'src-name-err', null);
+  return true;
+}
+function validateSrcUrl() {
+  const v = (document.getElementById('src-url').value || '').trim();
+  if (!v) { setFieldError('src-url', 'src-url-err', 'URL is required'); return false; }
+  try {
+    const u = new URL(v);
+    if (u.protocol !== 'http:' && u.protocol !== 'https:') {
+      setFieldError('src-url', 'src-url-err', 'URL must start with http:// or https://');
+      return false;
+    }
+  } catch (e) {
+    setFieldError('src-url', 'src-url-err', 'Not a valid URL');
+    return false;
+  }
+  setFieldError('src-url', 'src-url-err', null);
+  return true;
+}
+
 async function saveSource() {
+  clearSrcBanner();
+  const okName = validateSrcName();
+  const okUrl  = validateSrcUrl();
+  if (!okName || !okUrl) { showSrcBanner('error', 'Fix the highlighted fields and try again.'); return; }
   const mode=document.getElementById('modal-mode').value;
   const src={name:document.getElementById('src-name').value.trim(),type:document.getElementById('src-type').value,url:document.getElementById('src-url').value.trim(),enabled:document.getElementById('src-enabled').checked,auth:getAuthFromForm(),tls:getTlsFromForm()};
-  if(!src.name||!src.url){alert('Name and URL are required');return;}
   const btn=document.getElementById('save-btn'); btn.disabled=true; btn.textContent='Saving...';
   try {
     let res; if(mode==='add') res=await fetch('/api/sources',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(src)});
     else res=await fetch('/api/sources/'+encodeURIComponent(document.getElementById('modal-original-name').value),{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(src)});
-    const d=await res.json(); if(!res.ok){alert(d.error);return;} closeModal('source-modal'); toast('Source saved'); await refresh();
-  } catch(e){alert(e);} finally{btn.disabled=false;btn.textContent='Save';}
+    const d=await res.json();
+    if(!res.ok){ showSrcBanner('error', d.error || ('HTTP '+res.status)); return; }
+    closeModal('source-modal'); toast('Source saved'); await refresh();
+  } catch(e){ showSrcBanner('error', String(e && e.message || e)); }
+  finally{btn.disabled=false;btn.textContent='Save';}
 }
 async function testConnection() {
   const btn=document.getElementById('test-btn'),r=document.getElementById('test-result');
@@ -2531,15 +3712,55 @@ async function confirmDelete(){
   deleteTarget=null;deleteType=null;
 }
 
+// --- Dirty-state tracking for forms with a Save button -----------------
+// Snapshots input values inside a root element on mount/populate; toggles
+// the save button between disabled (clean) and enabled (any input changed
+// from baseline). Reset on successful save resets the baseline.
+function bindDirtyState(rootId, btnId) {
+  const root = document.getElementById(rootId);
+  const btn  = document.getElementById(btnId);
+  if (!root || !btn) return;
+  function snapshot() {
+    const out = {};
+    root.querySelectorAll('input,select,textarea').forEach(el => {
+      if (!el.id) return;
+      out[el.id] = el.type === 'checkbox' ? !!el.checked : (el.value ?? '');
+    });
+    return out;
+  }
+  const baseline = snapshot();
+  function isDirty() {
+    const cur = snapshot();
+    for (const k of Object.keys(baseline)) {
+      if (cur[k] !== baseline[k]) return true;
+    }
+    return false;
+  }
+  function update() { btn.disabled = !isDirty(); }
+  root._omcpDirty = { baseline, update, reset(){ Object.assign(baseline, snapshot()); update(); } };
+  root.removeEventListener('input', update);
+  root.removeEventListener('change', update);
+  root.addEventListener('input', update);
+  root.addEventListener('change', update);
+  update();
+}
+function resetDirtyState(rootId) {
+  const root = document.getElementById(rootId);
+  if (root && root._omcpDirty) root._omcpDirty.reset();
+}
+
 // --- Settings: General ---
 function populateSettingsForm() {
   document.getElementById('set-interval').value=settings.checkIntervalMs||30000;
   document.getElementById('set-sensitivity').value=settings.defaultSensitivity||'medium';
+  bindDirtyState('tab-general', 'btn-save-settings');
 }
 async function saveSettings() {
   const body={checkIntervalMs:parseInt(document.getElementById('set-interval').value),defaultSensitivity:document.getElementById('set-sensitivity').value};
-  await fetch('/api/settings',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+  const res = await fetch('/api/settings',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+  if (!res.ok) { toast('Failed to save settings'); return; }
   toast('Settings saved');
+  resetDirtyState('tab-general');
 }
 async function resetSettings() { settings=defaults.settings; populateSettingsForm(); toast('Reset to defaults (save to persist)'); }
 
@@ -2555,6 +3776,7 @@ function populateHealthForm() {
   document.getElementById('ht-lat-good').value=h.latencyP99.good; document.getElementById('ht-lat-warn').value=h.latencyP99.warn; document.getElementById('ht-lat-crit').value=h.latencyP99.crit;
   document.getElementById('ht-log-good').value=h.logErrors.good; document.getElementById('ht-log-warn').value=h.logErrors.warn; document.getElementById('ht-log-crit').value=h.logErrors.crit;
   document.getElementById('ht-bound-healthy').value=h.statusBoundaries.healthy; document.getElementById('ht-bound-degraded').value=h.statusBoundaries.degraded;
+  bindDirtyState('tab-health', 'btn-save-health');
 }
 async function saveHealth() {
   const body={
@@ -2566,9 +3788,11 @@ async function saveHealth() {
     statusBoundaries:{healthy:parseFloat(document.getElementById('ht-bound-healthy').value),degraded:parseFloat(document.getElementById('ht-bound-degraded').value)}
   };
   const ws=body.weights; const sum=ws.errorRate+ws.latency+ws.cpu+ws.logErrors;
-  if(Math.abs(sum-1)>0.01){alert(`Weights must sum to 1.0 (currently ${sum.toFixed(2)})`);return;}
-  await fetch('/api/health-thresholds',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+  if(Math.abs(sum-1)>0.01){toast(`Weights must sum to 1.0 (currently ${sum.toFixed(2)})`, 'error');return;}
+  const res = await fetch('/api/health-thresholds',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+  if (!res.ok) { toast('Failed to save thresholds'); return; }
   healthThresholds=body; toast('Health thresholds saved');
+  resetDirtyState('tab-health');
 }
 async function resetHealth() { healthThresholds=defaults.healthThresholds; populateHealthForm(); toast('Reset to defaults (save to persist)'); }
 
@@ -2781,8 +4005,13 @@ async function loadTopology(){
   } catch(e) {
     topologyData = null;
     topologyLastRevHash = '';
-    document.getElementById('topology-summary').innerHTML =
-      '<div class="empty">No topology data available. Add a topology-capable source (e.g. <code>kubernetes</code>) under Sources.</div>';
+    document.getElementById('topology-summary').innerHTML = richEmpty({
+      icon: 'graph',
+      title: 'No topology data',
+      desc: 'Add a topology-capable source (currently: kubernetes) under Sources to populate the resource graph used by get_blast_radius and get_topology.',
+      ctaLabel: 'Go to Sources',
+      ctaOnClick: "showPage('sources')",
+    });
     const bh = document.getElementById('topology-by-host'); if (bh) bh.innerHTML = '';
   }
   if(!topologyInterval) topologyInterval = setInterval(()=>{
@@ -2821,7 +4050,13 @@ function renderTopology(){
   // --- Summary tab ---
   const summary = document.getElementById('topology-summary');
   if (d.sources.length === 0) {
-    summary.innerHTML = '<div class="empty">No topology-capable sources connected. Add a topology source (e.g. <b>kubernetes</b>) under Sources.</div>';
+    summary.innerHTML = richEmpty({
+      icon: 'graph',
+      title: 'No topology-capable sources',
+      desc: 'Add a topology source (currently: kubernetes) under Sources. The graph powers the blast-radius and dependency tools used by the agent.',
+      ctaLabel: 'Add a source',
+      ctaOnClick: "showPage('sources');openAddModal()",
+    });
     const bh = document.getElementById('topology-by-host'); if (bh) bh.innerHTML = '';
     renderTopologyGraph(); // shows empty-state legend too
     return;
@@ -3144,6 +4379,18 @@ function renderTopologyGraph(){
   function applyView(){ g.setAttribute('transform', `translate(${view.tx} ${view.ty}) scale(${view.scale})`); }
   applyView();
   svg.appendChild(g);
+  // Expose view + setters so the zoom toolbar buttons and the keyboard
+  // handler can drive the same `view` object that wheel-zoom mutates.
+  window.__topoViewport = {
+    zoom(k){
+      const cx = W/2, cy = H/2;
+      view.tx = cx - (cx - view.tx) * k;
+      view.ty = cy - (cy - view.ty) * k;
+      view.scale *= k;
+      applyView();
+    },
+    reset(){ view.tx = 0; view.ty = 0; view.scale = 1; applyView(); },
+  };
 
   // Alternating tier background bands + tier labels in the left gutter.
   for (let i = 0; i < tierIndices.length; i++){
@@ -3208,6 +4455,7 @@ function renderTopologyGraph(){
     const cy = (a.y + b.y) / 2;
     return `M ${a.x} ${a.y} C ${a.x} ${cy}, ${b.x} ${cy}, ${b.x} ${b.y}`;
   }
+  const edgeLabelEls = new Map(); // "<from> <to>" → text element, for repaint on drag
   for (const e of drawEdges){
     const a = positions.get(e.from), b = positions.get(e.to);
     const s = topoRelStyle(e.relation);
@@ -3220,6 +4468,22 @@ function renderTopologyGraph(){
     path.setAttribute('opacity', '0.85');
     path.dataset.from = e.from; path.dataset.to = e.to;
     g.appendChild(path);
+    // Edge label at midpoint, with a halo so it remains readable
+    // against tier bands and crossing wires in both themes.
+    const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    lbl.setAttribute('x', String((a.x + b.x) / 2));
+    lbl.setAttribute('y', String((a.y + b.y) / 2));
+    lbl.setAttribute('font-size', '9');
+    lbl.setAttribute('text-anchor', 'middle');
+    lbl.setAttribute('dominant-baseline', 'middle');
+    lbl.setAttribute('fill', 'var(--text-muted)');
+    lbl.setAttribute('stroke', 'var(--surface-2)');
+    lbl.setAttribute('stroke-width', '3');
+    lbl.setAttribute('paint-order', 'stroke');
+    lbl.setAttribute('style', 'pointer-events: none; letter-spacing: 0.04em;');
+    lbl.textContent = e.relation;
+    g.appendChild(lbl);
+    edgeLabelEls.set(e.from + '' + e.to, lbl);
   }
 
   // Nodes
@@ -3243,12 +4507,18 @@ function renderTopologyGraph(){
   }
 
   const nodeEls = new Map();
+  const focusOrder = []; // resource ids in deterministic visual order for arrow nav
   for (const r of drawables){
     const p = positions.get(r.id); if (!p) continue;
     const grp = document.createElementNS('http://www.w3.org/2000/svg', 'g');
     grp.setAttribute('transform', `translate(${p.x} ${p.y})`);
     grp.style.cursor = 'grab';
     grp.dataset.id = r.id;
+    // a11y: keyboard-focusable, screen-reader announces "<name>, <kind>".
+    grp.setAttribute('tabindex', '0');
+    grp.setAttribute('role', 'button');
+    grp.setAttribute('aria-label', `${r.name}, ${r.kind}`);
+    focusOrder.push(r.id);
     const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     // Hosts a touch bigger to read as anchors of the layout.
     const radius = incomingRunsOn.has(r.id) ? 9 : 6.5;
@@ -3293,7 +4563,14 @@ function renderTopologyGraph(){
       if (pth.dataset.from === id || pth.dataset.to === id){
         const a = positions.get(pth.dataset.from);
         const b = positions.get(pth.dataset.to);
-        if (a && b) pth.setAttribute('d', bezierPath(a, b));
+        if (a && b){
+          pth.setAttribute('d', bezierPath(a, b));
+          const lbl = edgeLabelEls.get(pth.dataset.from + ' ' + pth.dataset.to);
+          if (lbl){
+            lbl.setAttribute('x', String((a.x + b.x) / 2));
+            lbl.setAttribute('y', String((a.y + b.y) / 2));
+          }
+        }
       }
     });
   }
@@ -3385,6 +4662,65 @@ function renderTopologyGraph(){
     selectResource(el.dataset.id);
   };
 
+  // Keyboard navigation: Tab cycles natively (every <g data-id> is
+  // tabindex=0); Enter / Space inspects the focused node; Esc clears
+  // selection; arrows move focus to the nearest neighbour by 2-D distance.
+  function focusedId(){
+    const el = document.activeElement;
+    if (el && el.closest && el.closest('#topology-graph-svg')){
+      const g2 = el.closest('g[data-id]');
+      if (g2) return g2.dataset.id;
+    }
+    return null;
+  }
+  function moveFocusDir(dx, dy){
+    const cur = focusedId() || topologySelectedId || focusOrder[0];
+    if (!cur) return;
+    const p = positions.get(cur); if (!p) return;
+    let best = null, bestScore = Infinity;
+    for (const id of focusOrder){
+      if (id === cur) continue;
+      const q = positions.get(id); if (!q) continue;
+      const ex = q.x - p.x, ey = q.y - p.y;
+      const align = ex*dx + ey*dy;          // positive = same direction
+      if (align <= 0) continue;
+      const perp = Math.abs(ex*dy - ey*dx); // distance off-axis
+      const score = perp - align * 0.25;
+      if (score < bestScore){ bestScore = score; best = id; }
+    }
+    if (best){
+      const el = nodeEls.get(best);
+      if (el && el.grp.focus) el.grp.focus();
+    }
+  }
+  svg.addEventListener('focus', ()=>{
+    // First focus on the svg shell: forward to the previously-selected node
+    // or the first node so the user gets immediate context.
+    if (document.activeElement === svg){
+      const target = topologySelectedId || focusOrder[0];
+      const el = target ? nodeEls.get(target) : null;
+      if (el && el.grp.focus) el.grp.focus();
+    }
+  });
+  svg.addEventListener('keydown', (ev)=>{
+    if (ev.key === 'Escape'){
+      topologySelectedId = null;
+      clearHighlight();
+      showInspectorEmpty();
+      ev.preventDefault();
+      return;
+    }
+    if (ev.key === 'Enter' || ev.key === ' '){
+      const id = focusedId();
+      if (id){ selectResource(id); ev.preventDefault(); }
+      return;
+    }
+    if (ev.key === 'ArrowLeft')  { moveFocusDir(-1, 0); ev.preventDefault(); return; }
+    if (ev.key === 'ArrowRight') { moveFocusDir( 1, 0); ev.preventDefault(); return; }
+    if (ev.key === 'ArrowUp')    { moveFocusDir( 0,-1); ev.preventDefault(); return; }
+    if (ev.key === 'ArrowDown')  { moveFocusDir( 0, 1); ev.preventDefault(); return; }
+  });
+
   function showInspectorEmpty(){
     document.getElementById('topology-inspector-empty').style.display = '';
     document.getElementById('topology-inspector-body').style.display = 'none';
@@ -3396,13 +4732,13 @@ function renderTopologyGraph(){
     const labelEntries = Object.entries(ref.labels || {});
     const attrEntries = Object.entries(ref.attributes || {});
     function kvList(entries){
-      if (entries.length === 0) return '<div class="muted" style="font-size: var(--fs-xs);">(none)</div>';
+      if (entries.length === 0) return '<div class="muted t-xs">(none)</div>';
       return '<div style="display:grid; grid-template-columns: max-content 1fr; gap: 4px 10px; font-size: var(--fs-xs);">' +
         entries.map(([k,v])=>`<div class="muted" style="font-weight:600;">${esc(k)}</div><div style="font-family: 'JetBrains Mono', ui-monospace, monospace; word-break: break-all;">${esc(String(v))}</div>`).join('') +
         '</div>';
     }
     function neighbourList(edges, dir){
-      if (edges.length === 0) return '<div class="muted" style="font-size: var(--fs-xs);">(none)</div>';
+      if (edges.length === 0) return '<div class="muted t-xs">(none)</div>';
       return '<ul style="margin:0; padding-left: 0; list-style: none; display:flex; flex-direction:column; gap:4px;">' +
         edges.map(e=>{
           const otherId = dir === 'in' ? e.from : e.to;
@@ -3425,35 +4761,35 @@ function renderTopologyGraph(){
           <div style="font-weight:600; font-size: var(--fs-md); color: var(--text); word-break: break-all;">${esc(ref.name)}</div>
           <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top: 4px;">
             <span class="badge">${esc(ref.kind)}</span>
-            <span class="muted" style="font-size: var(--fs-xs);">source: ${esc(ref.source)}</span>
+            <span class="muted t-xs">source: ${esc(ref.source)}</span>
           </div>
         </div>
       </div>
       <div style="margin-top: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--text-muted); word-break: break-all;">${esc(ref.id)}</div>
 
       <div style="margin-top: 16px;">
-        <div style="text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px;">Labels</div>
+        <div class="t-label">Labels</div>
         ${kvList(labelEntries)}
       </div>
 
       <div style="margin-top: 16px;">
-        <div style="text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px;">Attributes</div>
+        <div class="t-label">Attributes</div>
         ${kvList(attrEntries.filter(([k])=>k!=='uid'))}
       </div>
 
       <div style="margin-top: 16px;">
-        <div style="text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px;">Outgoing (${outgoing.length})</div>
+        <div class="t-label">Outgoing (${outgoing.length})</div>
         ${neighbourList(outgoing, 'out')}
       </div>
 
       <div style="margin-top: 12px;">
-        <div style="text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px;">Incoming (${incoming.length})</div>
+        <div class="t-label">Incoming (${incoming.length})</div>
         ${neighbourList(incoming, 'in')}
       </div>
 
       <div style="margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border);">
-        <div style="text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px;">Linked telemetry</div>
-        <div class="muted" style="font-size: var(--fs-xs);">No metrics or logs linked to this resource. When demo workloads run inside the cluster and emit Prometheus/Loki signals under matching service labels, charts will appear here.</div>
+        <div class="t-label">Linked telemetry</div>
+        <div class="muted t-xs">No metrics or logs linked to this resource. When demo workloads run inside the cluster and emit Prometheus/Loki signals under matching service labels, charts will appear here.</div>
       </div>
     `;
     // Wire neighbour links to navigate inside the graph.
@@ -3480,7 +4816,37 @@ function renderTopologyGraph(){
 
 // --- Utils ---
 function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML;}
-async function refresh(){await Promise.all([loadSources(),loadServices()]);}
+
+// --- Empty / loading state helpers ----------------------------------------
+// Inline SVGs so the markup is self-contained and styleable via currentColor.
+const STATE_ICONS = {
+  spinner: '<svg class="spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3a9 9 0 1 1-6.36 2.64" /></svg>',
+  inbox:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13l3-8h12l3 8"/><path d="M3 13h6l1 3h4l1-3h6"/><path d="M3 13v6h18v-6"/></svg>',
+  plug:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v6"/><path d="M15 3v6"/><path d="M6 9h12v4a6 6 0 0 1-12 0z"/><path d="M12 19v3"/></svg>',
+  graph:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M7.5 7.6l3 7.4"/><path d="M16.5 7.6l-3 7.4"/></svg>',
+  service: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><circle cx="7" cy="7" r="1"/><circle cx="7" cy="17" r="1"/></svg>',
+};
+// richEmpty({icon, title, desc, ctaLabel, ctaOnClick, secondaryLabel, secondaryOnClick})
+// SECURITY: title / desc / ctaLabel / secondaryLabel are HTML-escaped before
+// insertion. ctaOnClick / secondaryOnClick are inlined verbatim into the
+// onclick attribute — only ever pass trusted static literals here, never
+// strings containing user input or backend data.
+function richEmpty(opts) {
+  const o = opts || {};
+  const icon = STATE_ICONS[o.icon || 'inbox'] || STATE_ICONS.inbox;
+  const cta = o.ctaLabel
+    ? `<div class="state-cta"><button class="btn btn-primary btn-sm" onclick="${o.ctaOnClick||''}">${esc(o.ctaLabel)}</button>${
+        o.secondaryLabel ? `<button class="btn btn-ghost btn-sm" onclick="${o.secondaryOnClick||''}">${esc(o.secondaryLabel)}</button>` : ''
+      }</div>`
+    : '';
+  return `<div class="state"><div class="state-ico">${icon}</div><div class="state-title">${esc(o.title||'Nothing here yet')}</div>${
+    o.desc ? `<div class="state-desc">${esc(o.desc)}</div>` : ''
+  }${cta}</div>`;
+}
+function loadingBlock(label) {
+  return `<div class="state is-loading" role="status" aria-live="polite"><div class="state-ico">${STATE_ICONS.spinner}</div><div class="state-title">${esc(label||'Loading…')}</div></div>`;
+}
+async function refresh(){await Promise.all([loadSources(),loadServices(),loadDashUsage()]);}
 
 async function loadInfo(){
   try{