@thotischner/observability-mcp 1.7.1 → 3.0.0

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; }
@@ -867,6 +936,180 @@
     .view-toggle button + button { border-left: 1px solid var(--border-strong); }
     .view-toggle button.active { background: var(--accent-soft); color: var(--accent); }
     .view-toggle button:hover { color: var(--text); }
+
+    /* Products — leitfaden card */
+    .leitfaden-chev { display: inline-block; transition: transform .15s ease; font-size: .85em; opacity: .7; }
+    #mcp-products-leitfaden.collapsed .leitfaden-chev { transform: rotate(-90deg); }
+    #mcp-products-leitfaden.collapsed #mcp-leitfaden-body { display: none; }
+    .leitfaden-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-4); }
+    .leitfaden-grid h3 { font-size: 13px; font-weight: 600; margin: 0 0 var(--sp-2); }
+    .leitfaden-grid p { margin: 0 0 var(--sp-2); line-height: 1.5; }
+    .leitfaden-grid pre { background: var(--surface-2); padding: var(--sp-2); border-radius: var(--radius-sm); font-size: 11px; overflow-x: auto; }
+    .leitfaden-grid code { font-size: .92em; }
+    @media (max-width: 900px) { .leitfaden-grid { grid-template-columns: 1fr; } }
+
+    /* Products — card grid */
+    .pcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); padding: var(--sp-3); }
+    .pcard { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--sp-4); padding-left: calc(var(--sp-4) + 6px); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color .15s ease, box-shadow .15s ease; }
+    .pcard:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
+    .pcard-rail { position: absolute; left: 0; top: var(--sp-3); bottom: var(--sp-3); width: 4px; border-radius: 0 2px 2px 0; background: var(--accent); }
+    .pcard-hd { display: flex; align-items: flex-start; gap: var(--sp-2); }
+    .pcard-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 18px; overflow: hidden; }
+    .pcard-icon img { width: 100%; height: 100%; object-fit: cover; }
+    .pcard-title { flex: 1; min-width: 0; }
+    .pcard-title h3 { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .pcard-meta { font-size: 11px; opacity: .7; margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
+    .pcard-status { flex: 0 0 auto; }
+    .pcard-desc { font-size: 12px; line-height: 1.45; opacity: .85; min-height: 2.9em; }
+    .pcard-tools-label { font-size: 11px; font-weight: 600; opacity: .65; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-1); }
+    .pcard-tools { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
+    .pcard-tool { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; padding: 2px 6px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
+    .pcard-tool-all { font-size: 11px; opacity: .55; font-style: italic; }
+    .pcard-footer { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
+    .pcard-footer .pcard-spacer { flex: 1; }
+
+    /* Policies — engine banner + sticky dry-run */
+    .pol-engine-banner { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: var(--sp-3); }
+    .pol-engine-banner .pol-eb-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--text-2); }
+    .pol-engine-banner .pol-eb-body { flex: 1; min-width: 0; }
+    .pol-engine-banner .pol-eb-title { font-weight: 600; font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
+    .pol-engine-banner .pol-eb-meta { font-size: 11px; opacity: .7; margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
+    .pol-engine-banner .pol-eb-body p { margin: var(--sp-2) 0 0; font-size: 12px; line-height: 1.5; opacity: .9; max-width: 720px; }
+    .pol-engine-banner.eng-builtin { background: var(--surface-2); border-color: var(--border); }
+    .pol-engine-banner.eng-builtin .pol-eb-dot { background: var(--text-2); }
+    .pol-engine-banner.eng-file { background: var(--success-soft); border-color: var(--success); }
+    .pol-engine-banner.eng-file .pol-eb-dot { background: var(--success); }
+    .pol-engine-banner.eng-opa { background: var(--warning-soft); border-color: var(--warning); }
+    .pol-engine-banner.eng-opa .pol-eb-dot { background: var(--warning); }
+    .pol-engine-banner .pol-eb-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 500; }
+
+    /* Policies sub-tabs (Roles / Bindings / Subjects) */
+    .pol-subtabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); }
+    .pol-subtab { background: none; border: 0; padding: var(--sp-3) var(--sp-4); color: var(--text-2); cursor: pointer; font-size: 13px; position: relative; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+    .pol-subtab:hover { color: var(--text); }
+    .pol-subtab[data-active="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
+    .pol-pane[hidden] { display: none; }
+
+    /* Roles master/detail */
+    .pol-roles-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 320px; }
+    .pol-role-list { border-right: 1px solid var(--border); max-height: 60vh; overflow-y: auto; }
+    .pol-role-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; border-bottom: 1px solid var(--border); }
+    .pol-role-row:hover { background: var(--surface-2); }
+    .pol-role-row[data-active="true"] { background: var(--accent-soft); }
+    .pol-role-row .pol-role-name { font-weight: 500; font-size: 13px; }
+    .pol-role-row .pol-role-count { font-size: 11px; opacity: .65; }
+    .pol-role-detail { padding: var(--sp-4); overflow-x: auto; }
+    .pol-role-detail h3 { margin: 0 0 var(--sp-3); font-size: 14px; font-weight: 600; }
+    .pol-matrix { border-collapse: collapse; width: 100%; font-size: 12px; }
+    .pol-matrix th, .pol-matrix td { padding: var(--sp-2); border: 1px solid var(--border); text-align: left; }
+    .pol-matrix thead th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; opacity: .8; }
+    .pol-matrix tbody th { font-weight: 500; background: var(--surface-2); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; }
+    .pol-matrix td { text-align: center; }
+    .pol-matrix .cell-grant { color: var(--success); font-weight: 600; }
+    .pol-matrix .cell-empty { opacity: .25; }
+    /* Effective-permissions overlay cells — drop the bold/success
+       colour so "via <role>" reads as informational, not as a fresh
+       grant; "denied" cells stay dimmed via cell-empty. */
+    .pol-matrix td[data-effective="allowed"] { color: var(--text-1); font-weight: 400; }
+    .pol-matrix td[data-effective="allowed"][data-via-selected="true"] { color: var(--success); font-weight: 500; }
+    .pol-matrix td[data-effective="denied"] { color: var(--text-3); opacity: .55; font-style: italic; }
+    @media (max-width: 900px) {
+      .pol-roles-layout { grid-template-columns: 1fr; }
+      .pol-role-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: none; }
+    }
+
+    /* Subjects sub-tab — three stacked sections */
+    .pol-subjects-section { padding: var(--sp-3) var(--sp-4); }
+    .pol-subjects-section + .pol-subjects-section { border-top: 1px solid var(--border); }
+    .pol-subjects-section h3 { margin: 0 0 var(--sp-2); font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: var(--sp-2); }
+    .pol-subjects-section h3 .pol-subjects-count { font-size: 11px; opacity: .65; font-weight: 400; }
+    .pol-subjects-section h3 .pol-subjects-source { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; opacity: .55; margin-left: auto; }
+    .pol-subjects-empty { font-size: 12px; opacity: .65; padding: var(--sp-2) 0; }
+
+    /* Sticky dry-run bar — pinned at the top of the policies page */
+    .pol-probe-bar { position: sticky; top: 0; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
+    .pol-probe-grid { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: var(--sp-3); align-items: end; }
+    .pol-probe-grid .form-group { margin: 0; }
+    .pol-probe-result { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0 0; }
+    .pol-probe-result .pol-pv { font-weight: 600; padding: 2px 10px; border-radius: 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
+    .pol-probe-result .pol-pv.allow { background: var(--success-soft); color: var(--success); }
+    .pol-probe-result .pol-pv.deny { background: var(--danger-soft); color: var(--danger); }
+    .pol-probe-result code { font-size: 11px; opacity: .8; }
+    @media (max-width: 1000px) {
+      .pol-probe-grid { grid-template-columns: 1fr 1fr; }
+    }
+
+    /* Author-controls are hidden when the active engine is read-only.
+       Anything with data-engine-required="file" needs the file engine. */
+    body[data-policy-engine="opa"] [data-engine-required="file"],
+    body[data-policy-engine="builtin"] [data-engine-required="file"] {
+      opacity: .35; pointer-events: none;
+    }
+
+    /* Products wizard — multi-step modal */
+    .mcp-product-wizard { width: min(720px, 92vw); max-height: 86vh; display: flex; flex-direction: column; }
+    .mcp-product-wizard .modal-body { flex: 1; overflow-y: auto; }
+    .mcp-product-wizard .modal-footer { display: flex; align-items: center; gap: var(--sp-2); }
+    .wiz-stepper { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-2); }
+    .wiz-step-btn { display: flex; align-items: center; gap: var(--sp-2); background: none; border: 0; cursor: pointer; color: var(--text-2); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12px; }
+    .wiz-step-btn:hover { color: var(--text); background: var(--surface); }
+    .wiz-step-btn .wiz-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 600; }
+    .wiz-step-btn[data-active="true"] { color: var(--text); }
+    .wiz-step-btn[data-active="true"] .wiz-step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
+    .wiz-step-btn[data-done="true"] .wiz-step-num { background: var(--success); border-color: var(--success); color: #fff; }
+    .wiz-step-btn[data-done="true"] .wiz-step-num::after { content: "✓"; font-size: 10px; }
+    .wiz-step-btn[data-done="true"] .wiz-step-num > * { display: none; }
+    .wiz-step-line { flex: 1; height: 1px; background: var(--border); min-width: 12px; }
+    .wiz-step-help { padding: 0 0 var(--sp-3); opacity: .85; line-height: 1.5; }
+    .wiz-pane[hidden] { display: none; }
+
+    /* Review pane */
+    .wiz-review-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
+    .wiz-review-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; opacity: .65; padding-top: 2px; }
+    .wiz-review-grid dd { margin: 0; font-size: 13px; word-break: break-word; }
+    .wiz-review-grid dd code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
+    .wiz-review-grid .wiz-review-empty { opacity: .5; font-style: italic; }
+    .wiz-review-grid .wiz-review-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 6px; border: 1px solid var(--border); }
+    .wiz-review-tools { display: flex; flex-wrap: wrap; gap: 4px; }
+    .wiz-review-tools .pcard-tool { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; padding: 2px 6px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); }
+
+    /* Wizard Review — agent preview panel */
+    .wiz-agent-preview-h { margin: var(--sp-4) 0 var(--sp-2); font-size: 13px; font-weight: 600; }
+    .wiz-agent-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); background: var(--surface-2); }
+    .wiz-agent-banner { padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 12px; }
+    .wiz-agent-group { padding: var(--sp-1) 0; }
+    .wiz-agent-group + .wiz-agent-group { border-top: 1px dashed var(--border); padding-top: var(--sp-2); margin-top: var(--sp-2); }
+    .wiz-agent-tool { padding: 4px 0; }
+    .wiz-agent-tool-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; }
+    .wiz-agent-tool-summary { font-size: 11px; opacity: .75; line-height: 1.4; margin-top: 1px; }
+    .mcp-agent-preview { width: min(640px, 92vw); }
+    .mcp-agent-preview .modal-header { padding-left: var(--sp-3); }
+
+    /* Products modal — tools picker (multi-select grouped by category) */
+    .tools-picker { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2); background: var(--surface-2); max-height: 280px; overflow-y: auto; }
+    .tools-picker .tp-group { padding: var(--sp-1) 0; }
+    .tools-picker .tp-group + .tp-group { margin-top: var(--sp-2); border-top: 1px dashed var(--border); padding-top: var(--sp-2); }
+    .tools-picker .tp-cat { font-size: 11px; font-weight: 600; opacity: .65; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-1); padding: 0 var(--sp-1); }
+    .tools-picker .tp-item { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); cursor: pointer; }
+    .tools-picker .tp-item:hover { background: var(--surface); }
+    .tools-picker .tp-item input { margin-top: 3px; flex: 0 0 auto; }
+    .tools-picker .tp-item .tp-text { flex: 1; min-width: 0; }
+    .tools-picker .tp-item .tp-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; }
+    .tools-picker .tp-item .tp-summary { font-size: 11px; opacity: .7; line-height: 1.4; margin-top: 1px; }
+    .tools-picker .tp-actions { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
+    .tools-picker .tp-actions button { font-size: 11px; padding: 2px 8px; }
+    .tools-picker .tools-picker-hint { padding: var(--sp-2); opacity: .7; }
+
+    /* Products — empty state with templates */
+    .pempty { padding: var(--sp-5); text-align: center; }
+    .pempty h3 { margin: 0 0 var(--sp-2); font-size: 16px; }
+    .pempty p { margin: 0 auto var(--sp-4); max-width: 540px; line-height: 1.5; opacity: .8; }
+    .pempty-templates { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
+    .pempty-tpl { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-width: 140px; text-align: left; transition: border-color .15s ease, background .15s ease; }
+    .pempty-tpl:hover { border-color: var(--accent); background: var(--accent-soft); }
+    .pempty-tpl-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
+    .pempty-tpl-desc { font-size: 11px; opacity: .7; }
+
     /* Form-first editor (Form / JSON / YAML — OpenShift-style) */
     .ed-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
     .ed-token { flex: 1; min-width: 200px; }
@@ -914,6 +1157,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 +1372,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 +1411,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 +1435,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 +1542,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 +1578,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 +1613,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 +1684,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 +1693,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 +1731,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 +1748,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 +1804,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 +1905,66 @@ 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. -->
+      <!-- Inline leitfaden — collapsed by default once the operator
+           dismisses it; re-opens by clicking the chevron. -->
+      <div class="card" id="mcp-products-leitfaden">
+        <div class="card-header" style="cursor:pointer" onclick="mcpLeitfadenToggle()">
+          <h2 style="display:flex;align-items:center;gap:.5rem">
+            <span class="leitfaden-chev" id="mcp-leitfaden-chev">▾</span>
+            About Products
+          </h2>
+          <span class="t-sm" style="opacity:.7">click to collapse</span>
+        </div>
+        <div id="mcp-leitfaden-body">
+          <div class="leitfaden-grid">
+            <div>
+              <h3>What is a product?</h3>
+              <p class="t-sm">A curated, named bundle of MCP tools you expose to one agent. The bundle's <code>tools</code> allow-list filters <code>tools/list</code> at the <code>/mcp</code> transport, so an agent bound to <em>Ops Bundle</em> sees only the operations tools and not the developer tools.</p>
+            </div>
+            <div>
+              <h3>When do I need one?</h3>
+              <p class="t-sm">Whenever more than one agent connects. Each team / use-case gets its own product — SRE on-call vs coding assistant vs compliance auditor. Without a product the credential sees every registered tool, which is fine for a single-operator demo but not for a production multi-agent deployment.</p>
+            </div>
+            <div>
+              <h3>How do agents pick one up?</h3>
+              <p class="t-sm">Bind a credential to a product via <code>OMCP_KEY_PRODUCTS</code>:</p>
+              <pre style="margin:.25rem 0"><code>OMCP_API_KEYS="agent:tok_ops,ci:tok_dev"
+OMCP_KEY_PRODUCTS="agent=ops-bundle;ci=dev-bundle"</code></pre>
+              <p class="t-sm">The next <code>/mcp</code> session of <code>agent</code> sees only the tools in <code>ops-bundle</code>. <a href="https://github.com/ThoTischner/observability-mcp/blob/main/docs/products.md" target="_blank" rel="noreferrer">Full docs →</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <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), 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>
+            <span class="view-toggle" id="mcp-products-views">
+              <button id="mcp-pv-cards" onclick="mcpProductsSetView('cards')">Cards</button>
+              <button id="mcp-pv-table" onclick="mcpProductsSetView('table')">Table</button>
+            </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 +2009,183 @@ 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>
+
+      <!-- Engine banner — colour + copy distinguishes editable file
+           vs read-only builtin / opa modes at a glance. -->
+      <div id="pol-engine-banner" class="pol-engine-banner eng-builtin" hidden>
+        <div class="pol-eb-dot"></div>
+        <div class="pol-eb-body">
+          <div class="pol-eb-title">
+            <span id="pol-eb-title-text">Engine</span>
+            <span id="pol-eb-kind" class="pol-eb-pill"></span>
+            <span id="pol-eb-tenant-aware" class="pol-eb-pill" hidden>tenant-aware</span>
+          </div>
+          <div class="pol-eb-meta" id="pol-eb-meta"></div>
+          <p id="pol-eb-copy"></p>
+        </div>
+      </div>
+
+      <!-- Sticky dry-run probe bar — promoted to the top so it's the
+           first affordance, not buried below the snapshot. Works
+           across every engine including OPA (the only way to see what
+           Rego actually grants without writing a unit test). -->
+      <div class="pol-probe-bar">
+        <h3 style="margin:0 0 var(--sp-2);display:flex;align-items:center;gap:var(--sp-2);font-size:13px">
+          <span>Probe a permission</span>
+          <button class="info" aria-label="About dry-run"
+            data-title="Dry-run probe"
+            data-info="Asks the active engine 'would these roles be allowed this resource:action under this tenant?' Works for every engine kind including OPA — the answer reflects the live Rego evaluation."
+            onclick="infoPop(this)">?</button>
+        </h3>
+        <div class="pol-probe-grid">
+          <div class="form-group">
+            <label>Roles <span class="form-hint">comma-separated</span></label>
+            <input id="pol-dry-roles" placeholder="admin, operator">
+          </div>
+          <div class="form-group">
+            <label>Resource</label>
+            <input id="pol-dry-resource" placeholder="sources">
+          </div>
+          <div class="form-group">
+            <label>Action</label>
+            <input id="pol-dry-action" placeholder="read">
+          </div>
+          <div class="form-group">
+            <label>Tenant <span class="form-hint">optional</span></label>
+            <input id="pol-dry-tenant" placeholder="default">
+          </div>
+          <div class="form-group"><label>&nbsp;</label>
+            <button class="btn btn-primary" onclick="polDryRun()">Evaluate</button>
+          </div>
+        </div>
+        <div id="pol-dry-out"></div>
+      </div>
+
+      <!-- Sub-tab nav — k8s-style separation of Roles (the WHAT) vs
+           Bindings (the WHO) vs Subjects (the principals). Slice F
+           ships Roles; G + H fill in Bindings + Subjects. -->
+      <nav class="pol-subtabs" role="tablist" aria-label="Policies sections">
+        <button class="pol-subtab" role="tab" aria-controls="pol-pane-roles" data-pol-tab="roles" onclick="polSetTab('roles')">Roles</button>
+        <button class="pol-subtab" role="tab" aria-controls="pol-pane-bindings" data-pol-tab="bindings" onclick="polSetTab('bindings')">Bindings</button>
+        <button class="pol-subtab" role="tab" aria-controls="pol-pane-subjects" data-pol-tab="subjects" onclick="polSetTab('subjects')">Subjects</button>
+      </nav>
+
+      <!-- Roles sub-tab — master/detail: role list on the left, the
+           selected role's permission matrix on the right. -->
+      <div class="card pol-pane" id="pol-pane-roles" role="tabpanel">
+        <div class="card-header"><h2>Roles
+          <button class="info" aria-label="About roles"
+            data-title="Roles"
+            data-info="A role is the WHAT — a named bundle of resource:action grants. Bindings (next sub-tab) decide who carries the role. The matrix view shows the granted (✓) vs not-granted (—) cells for the selected role across every resource and action."
+            onclick="infoPop(this)">?</button>
+          <span style="flex:1"></span>
+          <button class="btn btn-primary btn-sm" data-engine-required="file" data-rbac="users:delete" onclick="polRoleAuthorNew()">+ New role</button>
+        </h2></div>
+        <div class="pol-roles-layout">
+          <div class="pol-role-list" id="pol-role-list" role="listbox" aria-label="Roles">
+            <div class="empty">Loading…</div>
+          </div>
+          <div class="pol-role-detail" id="pol-role-detail">
+            <div class="empty">Select a role on the left to see its permission matrix.</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bindings sub-tab — subject → roles table with inline edit. -->
+      <div class="card pol-pane" id="pol-pane-bindings" role="tabpanel" hidden>
+        <div class="card-header"><h2>Bindings
+          <button class="info" aria-label="About bindings"
+            data-title="Bindings"
+            data-info="A binding maps a subject (user, API key, OIDC group) to one or more roles. Today only local-user role assignments can be edited at runtime (writes through OMCP_USERS_FILE). API-key roles aren't stored on the credential, and OIDC group → role mappings come from OMCP_OIDC_ROLE_MAP which is read once at boot — those rows show their env source instead of an edit button."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div id="pol-bindings-body" class="content"><div class="empty">Loading…</div></div>
+      </div>
+
+      <!-- Role-author modal (file-engine only). Surfaces a name +
+           permission-matrix checkbox grid; saves via
+           PUT /api/policy/roles/:name. -->
+      <div class="modal-overlay" id="pol-role-author-modal">
+        <div class="modal" style="width:min(720px, 92vw)">
+          <div class="modal-header">
+            <h3>New role</h3>
+            <button class="btn-icon" onclick="closeModal('pol-role-author-modal')">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="pol-role-author-name">Role name</label>
+              <input type="text" id="pol-role-author-name" placeholder="e.g. on-call-sre" autocomplete="off">
+              <div class="form-hint">Pattern: <code>[A-Za-z0-9][A-Za-z0-9._-]{0,63}</code>. New roles append to the policy file; existing names overwrite.</div>
+            </div>
+            <div class="form-group">
+              <label>Permissions</label>
+              <div id="pol-role-author-grid" class="content"></div>
+              <div class="form-hint">Tick cells to grant. Empty rows mean the role has no access to that resource.</div>
+            </div>
+            <div id="pol-role-author-error" class="form-hint" role="alert" aria-live="polite" style="color: var(--danger); display: none;"></div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" onclick="closeModal('pol-role-author-modal')">Cancel</button>
+            <span style="flex:1"></span>
+            <button class="btn btn-primary" onclick="polRoleAuthorSave()">Save role</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Binding-edit modal — only used for the local-user row. -->
+      <div class="modal-overlay" id="pol-binding-modal">
+        <div class="modal" style="width:min(520px, 92vw)">
+          <div class="modal-header">
+            <h3>Edit binding · <span id="pol-binding-subject"></span></h3>
+            <button class="btn-icon" onclick="closeModal('pol-binding-modal')">&times;</button>
+          </div>
+          <div class="modal-body">
+            <p class="t-sm" style="opacity:.85;margin:0 0 var(--sp-3)">
+              Select the roles to grant <strong id="pol-binding-subject-2"></strong>.
+              Unknown roles are rejected — the catalogue comes from the active engine.
+            </p>
+            <div id="pol-binding-roles" class="content"><div class="empty">Loading…</div></div>
+            <div id="pol-binding-error" class="form-hint" role="alert" aria-live="polite" style="color: var(--danger); display: none;"></div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" onclick="closeModal('pol-binding-modal')">Cancel</button>
+            <span style="flex:1"></span>
+            <button class="btn btn-primary" onclick="polBindingSave()">Save binding</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Subjects sub-tab — three sections (Users / API keys /
+           OIDC groups). Read-only this slice. -->
+      <div class="card pol-pane" id="pol-pane-subjects" role="tabpanel" hidden>
+        <div class="card-header"><h2>Subjects
+          <button class="info" aria-label="About subjects"
+            data-title="Subjects"
+            data-info="The principals an OMCP deployment recognises: local users (basic auth via OMCP_USERS_FILE), bearer-token names from OMCP_API_KEYS, and OIDC groups the operator mapped to roles via OMCP_OIDC_ROLE_MAP. Slice H lands binding edits; this view is read-only."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div id="pol-subjects-body" class="content"><div class="empty">Loading…</div></div>
+      </div>
+
+      <!-- Kept for back-compat — the legacy snapshot lives here but
+           the new Roles sub-tab supersedes it. JS hides it once
+           Roles renders successfully so we don't duplicate
+           information. -->
+      <div class="card" id="pol-legacy-snapshot" hidden>
+        <div class="card-header"><h2>Active policy (legacy view)</h2></div>
+        <div id="pol-roles" class="content"></div>
+      </div>
+    </div>
+
     <!-- ===== Governance: Audit Log ===== -->
     <div class="page" id="page-audit">
       <div class="page-head">
@@ -1453,6 +2204,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 +2255,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>
@@ -1510,6 +2280,11 @@ curl -s http://localhost:3000/api/enterprise/status</pre>
         <div class="form-group"><label>CA Certificate Path</label><input type="text" id="src-tls-ca" placeholder="/path/to/ca.pem"><div class="form-hint">Custom CA for self-signed certs (safer than skip verify)</div></div>
         <div class="form-group"><label>Client Certificate Path</label><input type="text" id="src-tls-cert" placeholder="/path/to/client.pem"><div class="form-hint">For mutual TLS (mTLS)</div></div>
         <div class="form-group"><label>Client Key Path</label><input type="text" id="src-tls-key" placeholder="/path/to/client-key.pem"></div>
+        <div class="form-group">
+          <label for="src-tenant">Tenant <span class="t-sm" style="opacity:.6">(optional, admin-only)</span></label>
+          <input type="text" id="src-tenant" placeholder="(blank = global)" autocomplete="off">
+          <div class="form-hint">Tagged source is visible only inside its tenant. Blank = global (every tenant). Non-admins can only see / create within their own tenant.</div>
+        </div>
         <div class="form-group" style="display:flex;align-items:center;gap:10px;"><label style="margin:0">Enabled</label><label class="toggle"><input type="checkbox" id="src-enabled" checked><span class="slider"></span></label></div>
         <div class="test-result" id="test-result"></div>
       </div>
@@ -1550,6 +2325,143 @@ curl -s http://localhost:3000/api/enterprise/status</pre>
     </div>
   </div>
 
+  <!-- MCP Product Modal (Create + Edit) — 4-step wizard.
+       The form fields keep their stable ids so save() and the
+       existing field-by-field tests stay byte-identical; only the
+       structural grouping + stepper navigation are new. -->
+  <div class="modal-overlay" id="mcp-product-modal">
+    <div class="modal mcp-product-wizard">
+      <div class="modal-header">
+        <h3 id="mcp-product-modal-title">New Product</h3>
+        <button class="btn-icon" onclick="closeModal('mcp-product-modal')">&times;</button>
+      </div>
+      <!-- Stepper rail — bullets are clickable so an operator can
+           jump back to any step they've already filled in. -->
+      <div class="wiz-stepper" id="mcp-wiz-stepper" role="tablist" aria-label="Product wizard steps">
+        <button class="wiz-step-btn" data-step="1" role="tab" aria-controls="wiz-pane-1" onclick="mcpWizGoto(1)">
+          <span class="wiz-step-num">1</span><span class="wiz-step-lbl">Identity</span>
+        </button>
+        <span class="wiz-step-line"></span>
+        <button class="wiz-step-btn" data-step="2" role="tab" aria-controls="wiz-pane-2" onclick="mcpWizGoto(2)">
+          <span class="wiz-step-num">2</span><span class="wiz-step-lbl">Tools</span>
+        </button>
+        <span class="wiz-step-line"></span>
+        <button class="wiz-step-btn" data-step="3" role="tab" aria-controls="wiz-pane-3" onclick="mcpWizGoto(3)">
+          <span class="wiz-step-num">3</span><span class="wiz-step-lbl">Scope &amp; branding</span>
+        </button>
+        <span class="wiz-step-line"></span>
+        <button class="wiz-step-btn" data-step="4" role="tab" aria-controls="wiz-pane-4" onclick="mcpWizGoto(4)">
+          <span class="wiz-step-num">4</span><span class="wiz-step-lbl">Review &amp; publish</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <input type="hidden" id="mcp-product-mode" value="new">
+        <input type="hidden" id="mcp-product-original-id" value="">
+
+        <!-- Step 1: Identity -->
+        <div class="wiz-pane" id="wiz-pane-1" data-step="1" role="tabpanel">
+          <p class="wiz-step-help t-sm">Give the product a stable id (URL-safe, immutable once saved) and a display name agents will see in <code>tools/list</code>.</p>
+          <div class="form-group">
+            <label for="mcp-product-id">Id</label>
+            <input type="text" id="mcp-product-id" placeholder="e.g. ops-bundle" autocomplete="off">
+            <div class="form-hint">Pattern: <code>[A-Za-z0-9][A-Za-z0-9._-]{0,63}</code>. Immutable once saved.</div>
+          </div>
+          <div class="form-group">
+            <label for="mcp-product-name">Display name</label>
+            <input type="text" id="mcp-product-name" placeholder="e.g. Operations Bundle" autocomplete="off">
+          </div>
+          <div class="form-group">
+            <label for="mcp-product-description">Description <span class="t-sm" style="opacity:.6">(optional)</span></label>
+            <input type="text" id="mcp-product-description" placeholder="One-sentence summary" autocomplete="off">
+          </div>
+        </div>
+
+        <!-- Step 2: Tools -->
+        <div class="wiz-pane" id="wiz-pane-2" data-step="2" role="tabpanel" hidden>
+          <p class="wiz-step-help t-sm">Curate the tools an agent bound to this product can call. Leaving everything unchecked = no filter (every registered tool).</p>
+          <div class="form-group">
+            <div id="mcp-product-tools-picker" class="tools-picker">
+              <div class="tools-picker-hint t-sm">Loading…</div>
+            </div>
+            <!-- Hidden textarea kept for back-compat — the picker syncs
+                 selections here, and save() still reads from it. -->
+            <textarea id="mcp-product-tools" rows="2" hidden></textarea>
+          </div>
+        </div>
+
+        <!-- Step 3: Scope & branding -->
+        <div class="wiz-pane" id="wiz-pane-3" data-step="3" role="tabpanel" hidden>
+          <p class="wiz-step-help t-sm">Pick the lifecycle stage, the tenant scope, optional version, and the branding metadata that surfaces on the catalogue card.</p>
+          <div class="form-row">
+            <div class="form-group">
+              <label for="mcp-product-status">Status</label>
+              <select id="mcp-product-status">
+                <option value="staging">staging (admin-only)</option>
+                <option value="published">published (visible to agents)</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="mcp-product-tenant">Tenant <span class="t-sm" style="opacity:.6">(admin only)</span></label>
+              <input type="text" id="mcp-product-tenant" placeholder="default" autocomplete="off">
+              <div class="form-hint">Blank = same tenant as the calling user.</div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-group">
+              <label for="mcp-product-version">Version <span class="t-sm" style="opacity:.6">(optional)</span></label>
+              <input type="text" id="mcp-product-version" placeholder="1.0.0" autocomplete="off">
+            </div>
+            <div class="form-group">
+              <label for="mcp-product-color">Brand colour <span class="t-sm" style="opacity:.6">(optional)</span></label>
+              <input type="text" id="mcp-product-color" placeholder="#3178c6" autocomplete="off">
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="mcp-product-icon">Icon URL <span class="t-sm" style="opacity:.6">(optional)</span></label>
+            <input type="text" id="mcp-product-icon" placeholder="https://example.com/icons/ops.svg" autocomplete="off">
+          </div>
+        </div>
+
+        <!-- Step 4: Review & publish -->
+        <div class="wiz-pane" id="wiz-pane-4" data-step="4" role="tabpanel" hidden>
+          <p class="wiz-step-help t-sm">Confirm everything below, then save. Staging products are admin-only; published products are visible to agents in the selected tenant.</p>
+          <div id="mcp-wiz-review"></div>
+        </div>
+
+        <div id="mcp-product-error" class="form-hint" role="alert" aria-live="polite" style="color: var(--danger); display: none;"></div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-ghost" onclick="closeModal('mcp-product-modal')">Cancel</button>
+        <span style="flex:1"></span>
+        <button class="btn btn-ghost" id="mcp-wiz-back" onclick="mcpWizBack()" hidden>Back</button>
+        <button class="btn btn-primary" id="mcp-wiz-next" onclick="mcpWizNext()">Next</button>
+        <button class="btn btn-primary" id="mcp-wiz-save" onclick="mcpProductSave()" hidden>Save Product</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Agent preview modal — invoked from per-card "Preview as agent"
+       button. Same /api/products/:id/preview backend the wizard
+       Review pane could call, but the wizard uses the live registry
+       in-form because the draft hasn't been saved yet. -->
+  <div class="modal-overlay" id="mcp-agent-preview-modal">
+    <div class="modal mcp-agent-preview" style="--mcp-agent-accent: var(--accent)">
+      <div class="modal-header" style="border-left: 4px solid var(--mcp-agent-accent)">
+        <h3 id="mcp-agent-preview-title">Agent preview</h3>
+        <button class="btn-icon" onclick="closeModal('mcp-agent-preview-modal')">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div id="mcp-agent-preview-meta" class="t-sm" style="opacity:.7;margin-bottom:var(--sp-3);font-family:'JetBrains Mono', ui-monospace, monospace;"></div>
+        <p class="t-sm" style="opacity:.85">This is the <code>tools/list</code> set a credential bound to this product would receive on its <code>/mcp</code> session.</p>
+        <div id="mcp-agent-preview-list" class="wiz-agent-preview"></div>
+      </div>
+      <div class="modal-footer">
+        <span style="flex:1"></span>
+        <button class="btn btn-primary" onclick="closeModal('mcp-agent-preview-modal')">Close</button>
+      </div>
+    </div>
+  </div>
+
   <div class="toast" id="toast-el"></div>
 
   <div class="drawer-ov" id="drawer-ov" onclick="closeDrawer()"></div>
@@ -1564,7 +2476,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 +2499,677 @@ 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) ---
+// Classify the engine kind reported by /api/policy.engine into one of
+// the three banner styles. The kind is `builtin`, `file:<path>`, or
+// `opa:<url>`; the prefix is what we key on.
+function polEngineKind(engineStr) {
+  const s = (engineStr || '').toLowerCase();
+  if (s.startsWith('opa:')) return 'opa';
+  if (s.startsWith('file:') || s.startsWith('file ')) return 'file';
+  return 'builtin';
+}
+function polRenderEngineBanner(j) {
+  const banner = document.getElementById('pol-engine-banner');
+  if (!banner) return;
+  const kind = polEngineKind(j.engine);
+  banner.hidden = false;
+  banner.className = 'pol-engine-banner eng-' + kind;
+  // body[data-policy-engine="..."] drives CSS that disables every
+  // [data-engine-required="file"] control when authoring isn't
+  // supported by the active engine.
+  document.body.setAttribute('data-policy-engine', kind);
+  const titleEl = document.getElementById('pol-eb-title-text');
+  const kindEl = document.getElementById('pol-eb-kind');
+  const metaEl = document.getElementById('pol-eb-meta');
+  const copyEl = document.getElementById('pol-eb-copy');
+  const tenantPill = document.getElementById('pol-eb-tenant-aware');
+  if (kindEl) kindEl.textContent = j.engine || 'unknown';
+  if (tenantPill) tenantPill.hidden = !j.tenantAware;
+  if (kind === 'file') {
+    titleEl.textContent = 'Editable here';
+    metaEl.textContent = 'source: ' + (j.engine || '');
+    copyEl.textContent = 'Changes saved via the API are persisted to the file. A server restart re-reads the file from disk; until then the in-memory state is authoritative.';
+  } else if (kind === 'opa') {
+    titleEl.textContent = 'Read-only (OPA)';
+    metaEl.textContent = 'evaluating Rego at ' + (j.engine || '').replace(/^opa:/i, '');
+    copyEl.textContent = 'OPA is the source of truth. Define roles + bindings in Rego, deploy them through OPA’s bundle pipeline; this view reflects what OPA evaluates on every gate decision. Use the probe above to verify a specific verdict.';
+  } else {
+    titleEl.textContent = 'Built-in defaults (read-only)';
+    metaEl.textContent = j.note || 'DEFAULT_POLICY shipped with the build';
+    copyEl.textContent = 'Set OMCP_RBAC_POLICY_FILE to override with a YAML / JSON role catalogue (then the engine flips to file mode and authoring becomes available), or OMCP_OPA_URL to delegate evaluation to OPA.';
+  }
+  // Mirror the kind on the legacy badge in the header.
+  const engineEl = document.getElementById('pol-engine');
+  if (engineEl) {
+    engineEl.textContent = 'engine: ' + (j.engine || 'unknown');
+    engineEl.className = 'badge ' + (kind === 'opa' ? 'badge-warn' : kind === 'file' ? 'badge-ok' : '');
+  }
+}
+// Policy snapshot — fetched once on page enter, then reused by the
+// sub-tab renderers (Roles matrix today; Bindings + Subjects in
+// later slices). Reset on every loadPolicies() call.
+let POL_SNAPSHOT = null;
+let POL_SELECTED_ROLE = null;
+
+function polSetTab(name) {
+  document.querySelectorAll('.pol-subtab').forEach((btn) => {
+    btn.setAttribute('data-active', String(btn.getAttribute('data-pol-tab') === name));
+    btn.setAttribute('aria-selected', String(btn.getAttribute('data-pol-tab') === name));
+  });
+  document.querySelectorAll('.pol-pane').forEach((p) => {
+    p.hidden = p.id !== 'pol-pane-' + name;
+  });
+  // Lazy-load Subjects on first visit — it has its own endpoint
+  // so deferring the fetch keeps the page-enter cost low.
+  if (name === 'subjects') polLoadSubjects();
+  if (name === 'bindings') polLoadBindings();
+}
+
+// Bindings = the (subject → roles) view derived from /api/subjects.
+// We don't have a separate /api/bindings endpoint because the binding
+// data IS the subject data today (users carry roles; api-keys don't;
+// oidc groups map to a single role via the env catalog).
+let POL_BINDING_EDIT = null; // { kind, name } of the row being edited
+async function polLoadBindings() {
+  const body = document.getElementById('pol-bindings-body');
+  if (!body) return;
+  // Reuse the subjects payload if already fetched — same data source.
+  if (!POL_SUBJECTS) {
+    try {
+      const r = await fetch('/api/subjects');
+      if (!r.ok) {
+        body.innerHTML = '<div class="empty">Bindings view requires the <code>users:delete</code> permission (admin role).</div>';
+        return;
+      }
+      POL_SUBJECTS = await r.json();
+    } catch (e) {
+      body.innerHTML = '<div class="empty">Subjects unavailable: ' + escHtml(String(e && e.message || e)) + '</div>';
+      return;
+    }
+  }
+  polRenderBindings(POL_SUBJECTS);
+}
+function polRenderBindings(s) {
+  const body = document.getElementById('pol-bindings-body');
+  if (!body) return;
+  // Are user edits available? Only when OMCP_USERS_FILE is set
+  // (server returns it under sources.users) — otherwise the PUT
+  // endpoint 409s and the operator just gets a confusing failure.
+  const userEditable = !!(s.sources && s.sources.users);
+  const rows = [];
+  for (const u of (s.users || [])) {
+    const roles = (u.roles || []).map((r) => `<span class="pill">${escHtml(r)}</span>`).join(' ') || '<span class="t-sm" style="opacity:.5">—</span>';
+    const action = userEditable
+      ? `<button class="btn btn-ghost btn-sm" data-bind-edit data-bind-kind="user" data-bind-name="${escHtml(u.username)}">Edit</button>`
+      : '<span class="t-sm" style="opacity:.55" title="Set OMCP_USERS_FILE to enable user-role editing">read-only</span>';
+    rows.push(`<tr>
+      <td><code>${escHtml(u.username)}</code></td>
+      <td><span class="tag">user</span></td>
+      <td>${roles}</td>
+      <td>${escHtml(u.tenant || 'default')}</td>
+      <td style="text-align:right">${action}</td>
+    </tr>`);
+  }
+  for (const k of (s.apiKeys || [])) {
+    rows.push(`<tr>
+      <td><code>${escHtml(k.name)}</code></td>
+      <td><span class="tag">api key</span></td>
+      <td><span class="t-sm" style="opacity:.5" title="Bearer credentials don't carry RBAC roles today — the management-plane RBAC gate uses session principals, not /mcp credentials">—</span></td>
+      <td>${escHtml(k.tenant || 'default')}</td>
+      <td style="text-align:right"><span class="t-sm" style="opacity:.55">via <code>OMCP_API_KEYS</code></span></td>
+    </tr>`);
+  }
+  for (const g of (s.oidcGroups || [])) {
+    rows.push(`<tr>
+      <td><code>${escHtml(g.claim)}</code></td>
+      <td><span class="tag">oidc group</span></td>
+      <td><span class="pill">${escHtml(g.role)}</span></td>
+      <td><span class="t-sm" style="opacity:.55">—</span></td>
+      <td style="text-align:right"><span class="t-sm" style="opacity:.55">via <code>OMCP_OIDC_ROLE_MAP</code></span></td>
+    </tr>`);
+  }
+  if (rows.length === 0) {
+    body.innerHTML = `<div class="pol-subjects-empty" style="padding:var(--sp-4)">
+      No subjects configured. Set one of <code>OMCP_USERS_FILE</code> /
+      <code>OMCP_API_KEYS</code> / <code>OMCP_OIDC_ROLE_MAP</code> to populate this view.
+    </div>`;
+    return;
+  }
+  body.innerHTML = `<table class="data-table" style="width:100%">
+    <thead><tr><th>Subject</th><th>Kind</th><th>Roles</th><th>Tenant</th><th></th></tr></thead>
+    <tbody>${rows.join('')}</tbody>
+  </table>`;
+  // Wire the per-row Edit buttons via delegation so role-name strings
+  // can't escape into onclick context (same defence-in-depth as the
+  // role list in Slice F).
+  if (!body.dataset.delegated) {
+    body.addEventListener('click', (ev) => {
+      const btn = ev.target.closest('[data-bind-edit]');
+      if (!btn) return;
+      const kind = btn.getAttribute('data-bind-kind');
+      const name = btn.getAttribute('data-bind-name');
+      if (kind && name) polBindingEdit(kind, name);
+    });
+    body.dataset.delegated = '1';
+  }
+}
+function polBindingEdit(kind, name) {
+  POL_BINDING_EDIT = { kind, name };
+  const subj = document.getElementById('pol-binding-subject');
+  const subj2 = document.getElementById('pol-binding-subject-2');
+  if (subj) subj.textContent = name;
+  if (subj2) subj2.textContent = name;
+  const errEl = document.getElementById('pol-binding-error');
+  if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
+  // Build the checklist from the active engine's role catalogue.
+  const rolesBox = document.getElementById('pol-binding-roles');
+  const knownRoles = (POL_SNAPSHOT && POL_SNAPSHOT.roles) || [];
+  const currentRoles = kind === 'user'
+    ? ((POL_SUBJECTS && POL_SUBJECTS.users.find((u) => u.username === name) || {}).roles || [])
+    : [];
+  if (rolesBox) {
+    if (knownRoles.length === 0) {
+      rolesBox.innerHTML = '<div class="empty">No roles declared in the active engine.</div>';
+    } else {
+      rolesBox.innerHTML = knownRoles.map((r) => {
+        const checked = currentRoles.includes(r) ? 'checked' : '';
+        return `<label class="tp-item" style="display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0;cursor:pointer">
+          <input type="checkbox" data-pol-role value="${escHtml(r)}" ${checked}>
+          <span style="font-family:'JetBrains Mono', ui-monospace, monospace;font-size:13px">${escHtml(r)}</span>
+        </label>`;
+      }).join('');
+    }
+  }
+  document.getElementById('pol-binding-modal').classList.add('open');
+}
+async function polBindingSave() {
+  if (!POL_BINDING_EDIT) return;
+  const errEl = document.getElementById('pol-binding-error');
+  const setErr = (msg) => { if (errEl) { errEl.textContent = msg; errEl.style.display = ''; } };
+  if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
+  if (POL_BINDING_EDIT.kind !== 'user') {
+    setErr('Only local-user bindings are editable at runtime today.');
+    return;
+  }
+  const checks = Array.from(document.querySelectorAll('#pol-binding-roles input[data-pol-role]:checked'))
+    .map((el) => el.value);
+  try {
+    const r = await fetch('/api/users/' + encodeURIComponent(POL_BINDING_EDIT.name) + '/roles', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ roles: checks }),
+    });
+    if (!r.ok) {
+      const j = await r.json().catch(() => ({}));
+      setErr(j.error || ('HTTP ' + r.status));
+      return;
+    }
+    closeModal('pol-binding-modal');
+    toast('Roles updated for ' + POL_BINDING_EDIT.name);
+    // Invalidate + refresh the bindings view.
+    POL_SUBJECTS = null;
+    await polLoadBindings();
+  } catch (e) {
+    setErr('Save failed: ' + (e && e.message || e));
+  }
+}
+
+// Cache the subjects payload so re-entering the tab doesn't refetch.
+let POL_SUBJECTS = null;
+async function polLoadSubjects() {
+  const body = document.getElementById('pol-subjects-body');
+  if (!body) return;
+  if (POL_SUBJECTS) {
+    polRenderSubjects(POL_SUBJECTS);
+    return;
+  }
+  try {
+    const r = await fetch('/api/subjects');
+    if (!r.ok) {
+      body.innerHTML = '<div class="empty">Subjects view requires the <code>users:delete</code> permission (admin role).</div>';
+      return;
+    }
+    POL_SUBJECTS = await r.json();
+    polRenderSubjects(POL_SUBJECTS);
+  } catch (e) {
+    body.innerHTML = '<div class="empty">Subjects unavailable: ' + escHtml(String(e && e.message || e)) + '</div>';
+  }
+}
+function polRenderSubjects(j) {
+  const body = document.getElementById('pol-subjects-body');
+  if (!body) return;
+  const sources = j.sources || {};
+  const usersHtml = (j.users || []).map((u) => `
+    <tr>
+      <td><code>${escHtml(u.username)}</code></td>
+      <td>${escHtml(u.name)}</td>
+      <td>${(u.roles || []).map((r) => `<span class="pill">${escHtml(r)}</span>`).join(' ') || '<span class="t-sm" style="opacity:.5">—</span>'}</td>
+      <td>${escHtml(u.tenant || 'default')}</td>
+    </tr>`).join('');
+  const apiKeysHtml = (j.apiKeys || []).map((k) => `
+    <tr>
+      <td><code>${escHtml(k.name)}</code></td>
+      <td>${escHtml(k.tenant || 'default')}</td>
+      <td>${k.productId ? `<code>${escHtml(k.productId)}</code>` : '<span class="t-sm" style="opacity:.5">—</span>'}</td>
+      <td>${k.bypassRedaction ? '<span class="pill" style="background:var(--warning-soft);color:var(--warning)">bypass</span>' : '<span class="t-sm" style="opacity:.5">—</span>'}</td>
+      <td>${k.allowedSources && k.allowedSources.length ? k.allowedSources.map((s) => `<code class="t-sm">${escHtml(s)}</code>`).join(' ') : '<span class="t-sm" style="opacity:.5">(all)</span>'}</td>
+    </tr>`).join('');
+  const groupsHtml = (j.oidcGroups || []).map((g) => `
+    <tr>
+      <td><code>${escHtml(g.claim)}</code></td>
+      <td><span class="pill">${escHtml(g.role)}</span></td>
+    </tr>`).join('');
+  const usersTbl = usersHtml
+    ? `<table class="data-table" style="width:100%"><thead><tr><th>Username</th><th>Name</th><th>Roles</th><th>Tenant</th></tr></thead><tbody>${usersHtml}</tbody></table>`
+    : `<div class="pol-subjects-empty">${sources.users ? 'No users in <code>' + escHtml(sources.users) + '</code>.' : 'No local-user file configured — set <code>OMCP_USERS_FILE</code> to enable basic-mode logins.'}</div>`;
+  const apiKeysTbl = apiKeysHtml
+    ? `<table class="data-table" style="width:100%"><thead><tr><th>Name</th><th>Tenant</th><th>Product</th><th>Bypass</th><th>Sources</th></tr></thead><tbody>${apiKeysHtml}</tbody></table>`
+    : `<div class="pol-subjects-empty">${sources.apiKeys ? 'No credentials in <code>OMCP_API_KEYS</code>.' : 'No API-key credentials configured — set <code>OMCP_API_KEYS</code> to gate the <code>/mcp</code> transport with bearer tokens.'}</div>`;
+  const groupsTbl = groupsHtml
+    ? `<table class="data-table" style="width:100%"><thead><tr><th>Group / claim</th><th>Maps to role</th></tr></thead><tbody>${groupsHtml}</tbody></table>`
+    : `<div class="pol-subjects-empty">${sources.oidcGroups ? 'No mappings in <code>OMCP_OIDC_ROLE_MAP</code>.' : 'No OIDC group mapping configured — set <code>OMCP_OIDC_ROLE_MAP</code> when running under <code>OMCP_AUTH=oidc</code>.'}</div>`;
+  body.innerHTML = `
+    <div class="pol-subjects-section">
+      <h3>Users
+        <span class="pol-subjects-count">${(j.users || []).length}</span>
+        <span class="pol-subjects-source">${sources.users ? escHtml(sources.users) : 'OMCP_USERS_FILE'}</span>
+      </h3>
+      ${usersTbl}
+    </div>
+    <div class="pol-subjects-section">
+      <h3>API keys
+        <span class="pol-subjects-count">${(j.apiKeys || []).length}</span>
+        <span class="pol-subjects-source">OMCP_API_KEYS</span>
+      </h3>
+      ${apiKeysTbl}
+    </div>
+    <div class="pol-subjects-section">
+      <h3>OIDC groups
+        <span class="pol-subjects-count">${(j.oidcGroups || []).length}</span>
+        <span class="pol-subjects-source">OMCP_OIDC_ROLE_MAP</span>
+      </h3>
+      ${groupsTbl}
+    </div>`;
+}
+
+// Resources × actions catalogue, kept in sync with VALID_RESOURCES +
+// VALID_ACTIONS in src/auth/policy/loader.ts. Pinned client-side so
+// the matrix shows the FULL grid (granted vs not-granted) even when
+// a role has zero grants for a given resource — the empty cells are
+// information too. If the server adds a new resource / action,
+// extend this list; the policy.engine snapshot guards against
+// silent drift through its declared-roles catalogue.
+const POL_RESOURCES = ["sources","services","health","topology","settings","connectors","audit","catalog","users","redaction","products"];
+const POL_ACTIONS = ["read","write","delete","bypass"];
+
+// Effective-permissions overlay: when a subject is selected the
+// matrix flips from "what does THIS role grant" to "what can THIS
+// subject do, and via which role". The overlay is pure client-side
+// composition over the existing /api/policy + /api/subjects snapshots
+// — no new endpoint. Null means overlay off (default = role-centric).
+let POL_EFFECTIVE_SUBJECT = null; // { kind: 'user'|'oidc', id: string, roles: string[] } | null
+
+function polEffectiveSubjectsList() {
+  // Build the dropdown options from the cached subjects payload.
+  // Users carry an explicit roles[] array. OIDC groups map to a
+  // single role via OMCP_OIDC_ROLE_MAP. API keys don't carry RBAC
+  // roles in the current model, so they're omitted — selecting one
+  // would always show "denied" everywhere, which is misleading.
+  const out = [];
+  if (!POL_SUBJECTS) return out;
+  for (const u of (POL_SUBJECTS.users || [])) {
+    out.push({ kind: 'user', id: u.username, label: u.username + ' (user)', roles: u.roles || [] });
+  }
+  for (const g of (POL_SUBJECTS.oidcGroups || [])) {
+    out.push({ kind: 'oidc', id: g.claim, label: g.claim + ' (oidc group)', roles: [g.role] });
+  }
+  return out;
+}
+
+async function polEffectiveEnsureSubjects() {
+  // Lazy-load /api/subjects the first time the operator opens the
+  // selector. Reuse the same cache the Bindings/Subjects tabs use.
+  if (POL_SUBJECTS) return;
+  try {
+    const r = await fetch('/api/subjects');
+    if (!r.ok) return;
+    POL_SUBJECTS = await r.json();
+  } catch (e) {
+    // Silent — the selector will just show "no subjects".
+  }
+}
+
+function polEffectiveOnChange(ev) {
+  const val = ev.target.value;
+  if (!val) {
+    POL_EFFECTIVE_SUBJECT = null;
+    polRolesRender();
+    return;
+  }
+  const list = polEffectiveSubjectsList();
+  const found = list.find((s) => (s.kind + ':' + s.id) === val);
+  POL_EFFECTIVE_SUBJECT = found || null;
+  polRolesRender();
+}
+
+async function polEffectiveOpen() {
+  // Operator clicked the "Show effective permissions" affordance —
+  // make sure the subjects cache is populated, then re-render so the
+  // selector has options.
+  await polEffectiveEnsureSubjects();
+  polRolesRender();
+}
+
+function polRolesRender() {
+  const listEl = document.getElementById('pol-role-list');
+  const detailEl = document.getElementById('pol-role-detail');
+  if (!listEl || !detailEl || !POL_SNAPSHOT) return;
+  const roles = POL_SNAPSHOT.roles || [];
+  if (roles.length === 0) {
+    listEl.innerHTML = '<div class="empty">No roles defined.</div>';
+    detailEl.innerHTML = '<div class="empty">Define a role to see its permission matrix.</div>';
+    return;
+  }
+  if (!POL_SELECTED_ROLE || !roles.includes(POL_SELECTED_ROLE)) {
+    POL_SELECTED_ROLE = roles[0];
+  }
+  // Render the role list with grant counts. Selection is handled
+  // via event delegation on the list container — keeps untrusted
+  // role names (file-loaded policies can use any string) out of the
+  // onclick attribute, where escHtml's HTML-special set doesn't
+  // sanitise JS-string-literal characters like the single quote.
+  listEl.innerHTML = roles.map((role) => {
+    const grants = (POL_SNAPSHOT.policy && POL_SNAPSHOT.policy[role]) || [];
+    const active = role === POL_SELECTED_ROLE;
+    return `<div class="pol-role-row" role="option" data-role="${escHtml(role)}" data-active="${active}">
+      <span class="pol-role-name">${escHtml(role)}</span>
+      <span class="pol-role-count">${grants.length} grant${grants.length === 1 ? '' : 's'}</span>
+    </div>`;
+  }).join('');
+  // Wire delegation once. Idempotent — re-rendering the inner HTML
+  // doesn't lose the listener because it's bound to the outer list
+  // element which persists. Guarded with a marker attribute so a
+  // second loadPolicies call doesn't double-bind.
+  if (!listEl.dataset.delegated) {
+    listEl.addEventListener('click', (ev) => {
+      const row = ev.target.closest('.pol-role-row');
+      if (!row) return;
+      const role = row.getAttribute('data-role');
+      if (role) polSelectRole(role);
+    });
+    listEl.dataset.delegated = '1';
+  }
+  // Render the matrix for the selected role.
+  const grants = (POL_SNAPSHOT.policy && POL_SNAPSHOT.policy[POL_SELECTED_ROLE]) || [];
+  // Build a Set of "resource:action" pairs for O(1) lookup.
+  const granted = new Set();
+  for (const g of grants) granted.add(g.resource + ':' + g.action);
+  const headerCells = POL_ACTIONS.map((a) => `<th>${escHtml(a)}</th>`).join('');
+
+  // Effective-overlay precompute. For each (resource, action) build a
+  // list of roles (from the subject's role bundle) that grant it — so
+  // the cell can show "via <role>" or "via <role> +N". Empty = denied.
+  const effective = POL_EFFECTIVE_SUBJECT
+    ? (() => {
+        const m = new Map();
+        for (const role of (POL_EFFECTIVE_SUBJECT.roles || [])) {
+          const gs = (POL_SNAPSHOT.policy && POL_SNAPSHOT.policy[role]) || [];
+          for (const g of gs) {
+            const k = g.resource + ':' + g.action;
+            if (!m.has(k)) m.set(k, []);
+            m.get(k).push(role);
+          }
+        }
+        return m;
+      })()
+    : null;
+
+  const bodyRows = POL_RESOURCES.map((res) => {
+    const cells = POL_ACTIONS.map((act) => {
+      const key = res + ':' + act;
+      if (effective) {
+        const viaRoles = effective.get(key) || [];
+        const ownGrant = granted.has(key);
+        if (viaRoles.length === 0) {
+          return `<td class="cell-empty" data-grant="false" data-effective="denied" title="denied — subject has no role granting ${escHtml(res)}:${escHtml(act)}">denied</td>`;
+        }
+        const first = viaRoles[0];
+        const extra = viaRoles.length > 1 ? ` <span class="t-sm" style="opacity:.55">+${viaRoles.length - 1}</span>` : '';
+        const ownHint = ownGrant ? ' data-via-selected="true"' : '';
+        // Show all granting roles in the title for an audit trail.
+        const titleRoles = viaRoles.map((r) => r).join(', ');
+        return `<td class="cell-grant" data-grant="true" data-effective="allowed"${ownHint} title="via ${escHtml(titleRoles)}"><span class="t-sm" style="font-family:'JetBrains Mono', ui-monospace, monospace">via ${escHtml(first)}</span>${extra}</td>`;
+      }
+      const has = granted.has(key);
+      return has
+        ? `<td class="cell-grant" data-grant="true" title="${escHtml(res)}:${escHtml(act)} granted">✓</td>`
+        : `<td class="cell-empty" data-grant="false">—</td>`;
+    }).join('');
+    return `<tr><th scope="row"><code>${escHtml(res)}</code></th>${cells}</tr>`;
+  }).join('');
+
+  // Effective-overlay bar — subject selector + clear control. Rendered
+  // inside the detail panel so it survives polRolesRender re-renders
+  // and stays visually attached to the matrix it modifies.
+  const subjOpts = polEffectiveSubjectsList();
+  const selectedKey = POL_EFFECTIVE_SUBJECT ? (POL_EFFECTIVE_SUBJECT.kind + ':' + POL_EFFECTIVE_SUBJECT.id) : '';
+  const optEls = subjOpts.map((s) => {
+    const v = s.kind + ':' + s.id;
+    const sel = v === selectedKey ? ' selected' : '';
+    return `<option value="${escHtml(v)}"${sel}>${escHtml(s.label)}</option>`;
+  }).join('');
+  const subjEmpty = subjOpts.length === 0;
+  const overlayBar = `
+    <div class="pol-effective-bar" style="display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);flex-wrap:wrap">
+      <label class="t-sm" style="opacity:.7" for="pol-effective-subject">Show effective permissions for</label>
+      <select id="pol-effective-subject" class="input input-sm" style="min-width:240px" onchange="polEffectiveOnChange(event)" onfocus="polEffectiveOpen()" aria-label="Subject for effective-permissions overlay">
+        <option value="">(none — show role grants)</option>
+        ${optEls}
+      </select>
+      ${POL_EFFECTIVE_SUBJECT
+        ? `<button class="btn btn-ghost btn-sm" onclick="polEffectiveOnChange({target:{value:''}})">Clear</button>
+           <span class="t-sm" style="opacity:.65">via roles: ${(POL_EFFECTIVE_SUBJECT.roles || []).map((r) => `<code>${escHtml(r)}</code>`).join(', ') || '<em>none</em>'}</span>`
+        : (subjEmpty ? '<span class="t-sm" style="opacity:.55">No subjects configured — set OMCP_USERS_FILE or OMCP_OIDC_ROLE_MAP to populate.</span>' : '')
+      }
+    </div>`;
+
+  const titleSuffix = POL_EFFECTIVE_SUBJECT
+    ? ` <span class="t-sm" style="opacity:.65;font-weight:400">— effective view for ${escHtml(POL_EFFECTIVE_SUBJECT.id)}</span>`
+    : ` <span class="t-sm" style="opacity:.65;font-weight:400">${grants.length} grant${grants.length === 1 ? '' : 's'}</span>`;
+
+  const legend = POL_EFFECTIVE_SUBJECT
+    ? `<p class="t-sm" style="opacity:.65;margin-top:var(--sp-3)">
+        <em>via &lt;role&gt;</em> = the subject inherits this grant through that role. <em>denied</em> = no role in the subject's bundle grants it. +N = additional roles also grant it; hover the cell for the full list.
+      </p>`
+    : `<p class="t-sm" style="opacity:.65;margin-top:var(--sp-3)">
+        ✓ = the role grants this resource:action combination. — = no grant. The
+        <em>redaction:bypass</em> column is the operator-side gate for the per-call
+        bypass; the credential must also be allow-listed via OMCP_KEY_BYPASS_REDACTION.
+      </p>`;
+
+  detailEl.innerHTML = `
+    <h3>${escHtml(POL_SELECTED_ROLE)}${titleSuffix}</h3>
+    ${overlayBar}
+    <table class="pol-matrix"><thead><tr><th>Resource</th>${headerCells}</tr></thead><tbody>${bodyRows}</tbody></table>
+    ${legend}
+  `;
+}
+function polSelectRole(role) {
+  POL_SELECTED_ROLE = role;
+  polRolesRender();
+}
+
+function polRoleAuthorNew() {
+  // Author modal — render a permission-matrix as a checkbox grid
+  // (rows = resources × cols = actions) plus a role-name input.
+  const nameEl = document.getElementById('pol-role-author-name');
+  const gridEl = document.getElementById('pol-role-author-grid');
+  const errEl = document.getElementById('pol-role-author-error');
+  if (nameEl) nameEl.value = '';
+  if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
+  if (gridEl) {
+    const headerCells = POL_ACTIONS.map((a) => `<th>${escHtml(a)}</th>`).join('');
+    const bodyRows = POL_RESOURCES.map((res) => {
+      const cells = POL_ACTIONS.map((act) => `<td style="text-align:center">
+        <input type="checkbox" data-pol-resource="${escHtml(res)}" data-pol-action="${escHtml(act)}" aria-label="${escHtml(res)}:${escHtml(act)}">
+      </td>`).join('');
+      return `<tr><th scope="row"><code>${escHtml(res)}</code></th>${cells}</tr>`;
+    }).join('');
+    gridEl.innerHTML = `<table class="pol-matrix"><thead><tr><th>Resource</th>${headerCells}</tr></thead><tbody>${bodyRows}</tbody></table>`;
+  }
+  document.getElementById('pol-role-author-modal').classList.add('open');
+  setTimeout(() => nameEl && nameEl.focus(), 50);
+}
+async function polRoleAuthorSave() {
+  const nameEl = document.getElementById('pol-role-author-name');
+  const errEl = document.getElementById('pol-role-author-error');
+  const setErr = (msg) => { if (errEl) { errEl.textContent = msg; errEl.style.display = ''; } };
+  if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
+  const name = (nameEl && nameEl.value || '').trim();
+  if (!/^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/.test(name)) {
+    setErr('Role name must match [A-Za-z0-9][A-Za-z0-9._-]{0,63}.');
+    nameEl && nameEl.focus();
+    return;
+  }
+  const checks = Array.from(document.querySelectorAll('#pol-role-author-grid input[type=checkbox]:checked'));
+  const perms = checks.map((el) => ({
+    resource: el.getAttribute('data-pol-resource'),
+    action: el.getAttribute('data-pol-action'),
+  })).filter((p) => p.resource && p.action);
+  try {
+    const r = await fetch('/api/policy/roles/' + encodeURIComponent(name), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ permissions: perms }),
+    });
+    if (!r.ok) {
+      const j = await r.json().catch(() => ({}));
+      setErr(j.error || ('HTTP ' + r.status));
+      return;
+    }
+    closeModal('pol-role-author-modal');
+    toast('Saved role ' + name);
+    // Re-fetch the policy snapshot so the Roles list + matrix
+    // reflect the change without a page reload.
+    POL_SUBJECTS = null;
+    POL_SELECTED_ROLE = name;
+    await loadPolicies();
+  } catch (e) {
+    setErr('Save failed: ' + (e && e.message || e));
+  }
+}
+
+async function loadPolicies() {
+  const rolesEl = document.getElementById('pol-roles');
+  try {
+    const r = await fetch('/api/policy');
+    if (!r.ok) {
+      if (rolesEl) rolesEl.innerHTML = '';
+      const listEl = document.getElementById('pol-role-list');
+      const detailEl = document.getElementById('pol-role-detail');
+      const msg = '<div class="empty">Policy view requires the <code>users:delete</code> permission (admin role).</div>';
+      if (listEl) listEl.innerHTML = msg;
+      if (detailEl) detailEl.innerHTML = '';
+      const engineEl = document.getElementById('pol-engine');
+      if (engineEl) engineEl.textContent = '';
+      const banner = document.getElementById('pol-engine-banner');
+      if (banner) banner.hidden = true;
+      // Clear the body attribute so a stale value from a prior session
+      // (e.g. logged-out tab refresh) doesn't keep authoring controls
+      // dimmed under the wrong engine assumption.
+      document.body.removeAttribute('data-policy-engine');
+      return;
+    }
+    const j = await r.json();
+    polRenderEngineBanner(j);
+    POL_SNAPSHOT = j;
+    // Invalidate subjects cache on each policy reload so the next
+    // Subjects tab visit fetches fresh data (env vars / users file
+    // may have changed since last visit).
+    POL_SUBJECTS = null;
+    // Stale overlay selection points at a subject that may no longer
+    // exist (subjects cache will be repopulated on next visit) —
+    // safest to drop it on every policy reload.
+    POL_EFFECTIVE_SUBJECT = null;
+    // Default sub-tab = Roles.
+    if (!document.querySelector('.pol-subtab[data-active="true"]')) {
+      polSetTab('roles');
+    }
+    polRolesRender();
+    // Warm the subjects cache in the background so the effective-
+    // permissions selector has options the first time an operator
+    // opens it (no fetch-on-focus jank). Failure is silent — the
+    // selector falls back to its empty-state copy.
+    polEffectiveEnsureSubjects().then(() => {
+      if (POL_SUBJECTS && document.getElementById('pol-effective-subject')) polRolesRender();
+    });
+    // Legacy snapshot card kept hidden — the matrix supersedes it.
+    if (rolesEl) {
+      const blocks = [];
+      for (const role of (j.roles || [])) {
+        const grants = (j.policy && j.policy[role]) || [];
+        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>';
+    }
+  } catch (e) {
+    const msg = '<div class="empty">Policy unavailable: ' + escHtml(String(e && e.message || e)) + '</div>';
+    if (rolesEl) rolesEl.innerHTML = msg;
+    const listEl = document.getElementById('pol-role-list');
+    const detailEl = document.getElementById('pol-role-detail');
+    if (listEl) listEl.innerHTML = msg;
+    if (detailEl) detailEl.innerHTML = '';
+  }
+}
+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();
+  const tenant = document.getElementById('pol-dry-tenant').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);
+  if (tenant) params.set('tenant', tenant);
+  try {
+    const r = await fetch('/api/policy?' + params.toString());
+    const j = await r.json();
+    const d = j.dryRun || {};
+    const verdict = d.allowed ? 'allowed' : 'denied';
+    const cls = d.allowed ? 'allow' : 'deny';
+    const tenantTag = d.tenant ? ` <span class="tag t-sm">tenant: ${escHtml(d.tenant)}</span>` : '';
+    out.innerHTML = `
+      <div class="pol-probe-result">
+        <span class="pol-pv ${cls}" data-verdict="${verdict}">${verdict}</span>
+        <code>${escHtml(Array.isArray(d.roles) ? d.roles.join(',') : '')} → ${escHtml(resource)}:${escHtml(action)}</code>
+        ${tenantTag}
+      </div>
+      <div class="form-hint" style="margin-top: var(--sp-1)">${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 +3186,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 +3595,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 +3661,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 +3678,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 +3765,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 +4155,661 @@ 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) ---
+// View mode (cards | table) for the Products catalog. Persisted in
+// localStorage so an operator's preference survives reloads.
+function mcpProductsView() {
+  try { return localStorage.getItem('omcp-mcp-products-view') === 'table' ? 'table' : 'cards'; }
+  catch (e) { return 'cards'; }
+}
+function mcpProductsSetView(v) {
+  try { localStorage.setItem('omcp-mcp-products-view', v); } catch (e) { /* noop */ }
+  loadMcpProducts();
+}
+
+// Leitfaden collapse state. Default expanded on first visit; once
+// the user collapses it the choice sticks. Idempotent — safe to
+// call before the DOM is ready (no-ops if the card isn't present).
+function mcpLeitfadenSync() {
+  const card = document.getElementById('mcp-products-leitfaden');
+  if (!card) return;
+  let collapsed = false;
+  try { collapsed = localStorage.getItem('omcp-mcp-leitfaden-collapsed') === '1'; } catch (e) { /* noop */ }
+  card.classList.toggle('collapsed', collapsed);
+}
+function mcpLeitfadenToggle() {
+  const card = document.getElementById('mcp-products-leitfaden');
+  if (!card) return;
+  const nextCollapsed = !card.classList.contains('collapsed');
+  card.classList.toggle('collapsed', nextCollapsed);
+  try { localStorage.setItem('omcp-mcp-leitfaden-collapsed', nextCollapsed ? '1' : '0'); } catch (e) { /* noop */ }
+}
+
+// Cache the tool registry — fetched once on first modal open and
+// reused thereafter. Falsy means not-yet-loaded; an empty array
+// means the endpoint replied but with no tools (server bug — we
+// fall back to a textarea-style entry in that case).
+let MCP_TOOLS_REGISTRY = null;
+async function mcpLoadToolsRegistry() {
+  if (MCP_TOOLS_REGISTRY) return MCP_TOOLS_REGISTRY;
+  try {
+    const r = await fetch('/api/tools/registry');
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    const j = await r.json();
+    MCP_TOOLS_REGISTRY = Array.isArray(j.tools) ? j.tools : [];
+    return MCP_TOOLS_REGISTRY;
+  } catch (e) {
+    // Surface but don't break the modal — fall back to []
+    // (operator can still hand-edit via the textarea fallback).
+    MCP_TOOLS_REGISTRY = [];
+    return MCP_TOOLS_REGISTRY;
+  }
+}
+function mcpRenderToolsPicker(selected) {
+  const picker = document.getElementById('mcp-product-tools-picker');
+  const textarea = document.getElementById('mcp-product-tools');
+  if (!picker || !textarea) return;
+  const tools = MCP_TOOLS_REGISTRY || [];
+  if (tools.length === 0) {
+    // Fallback: expose the textarea so the operator can still author
+    // by hand. The server-side typo guard catches mistakes either way.
+    textarea.hidden = false;
+    textarea.value = (selected || []).join('\n');
+    picker.innerHTML = '<div class="tools-picker-hint">Tool registry unavailable — type names one per line.</div>';
+    return;
+  }
+  const selSet = new Set(selected || []);
+  // Group by category, ordered. Keep an "(other)" bucket for any
+  // future category we forgot in the CSS.
+  const order = ['discovery', 'query', 'diagnose', 'topology'];
+  const groups = {};
+  for (const t of tools) (groups[t.category] = groups[t.category] || []).push(t);
+  const labels = { discovery: 'Discovery', query: 'Query', diagnose: 'Diagnose', topology: 'Topology' };
+  const html = order.filter((c) => groups[c]).map((cat) => {
+    const items = groups[cat].map((t) => {
+      const checked = selSet.has(t.name) ? 'checked' : '';
+      return `<label class="tp-item">
+        <input type="checkbox" data-tool="${escHtml(t.name)}" ${checked} onchange="mcpToolsPickerSync()">
+        <span class="tp-text">
+          <span class="tp-name">${escHtml(t.name)}</span>
+          <span class="tp-summary">${escHtml(t.summary)}</span>
+        </span>
+      </label>`;
+    }).join('');
+    return `<div class="tp-group">
+      <div class="tp-cat">${escHtml(labels[cat] || cat)}</div>
+      ${items}
+    </div>`;
+  }).join('');
+  picker.innerHTML = `
+    <div class="tp-actions">
+      <button type="button" class="btn btn-ghost" onclick="mcpToolsPickerAll(true)">Select all</button>
+      <button type="button" class="btn btn-ghost" onclick="mcpToolsPickerAll(false)">Clear</button>
+    </div>
+    ${html}
+  `;
+  // Keep the hidden textarea in sync with the initial selection.
+  textarea.value = (selected || []).join('\n');
+}
+function mcpToolsPickerSync() {
+  const picker = document.getElementById('mcp-product-tools-picker');
+  const textarea = document.getElementById('mcp-product-tools');
+  if (!picker || !textarea) return;
+  const checked = Array.from(picker.querySelectorAll('input[type=checkbox][data-tool]:checked'))
+    .map((el) => el.getAttribute('data-tool'))
+    .filter(Boolean);
+  textarea.value = checked.join('\n');
+}
+function mcpToolsPickerAll(on) {
+  const picker = document.getElementById('mcp-product-tools-picker');
+  if (!picker) return;
+  picker.querySelectorAll('input[type=checkbox][data-tool]').forEach((el) => { el.checked = on; });
+  mcpToolsPickerSync();
+}
+
+// Empty-state product templates. Cloning a template prefills the
+// modal — the operator only has to pick an id + tweak before save.
+// Templates are pure UI; the server doesn't know about them.
+const MCP_PRODUCT_TEMPLATES = {
+  ops: {
+    title: 'Ops Bundle',
+    desc: 'Incident-response tools for an on-call SRE agent.',
+    product: {
+      id: '', name: 'Ops Bundle',
+      description: 'Incident-response tools for the on-call SRE agent.',
+      status: 'staging',
+      tools: ['query_logs', 'query_metrics', 'get_service_health', 'detect_anomalies'],
+    },
+  },
+  dev: {
+    title: 'Dev Bundle',
+    desc: 'Discovery + topology tools for a coding agent. Read-only.',
+    product: {
+      id: '', name: 'Dev Bundle',
+      description: 'Discovery + topology tools for a coding agent. Read-only.',
+      status: 'staging',
+      tools: ['list_sources', 'list_services', 'get_topology'],
+    },
+  },
+  compliance: {
+    title: 'Compliance Bundle',
+    desc: 'Logs query only — for an audit agent.',
+    product: {
+      id: '', name: 'Compliance Bundle',
+      description: 'Logs query only — for an audit agent.',
+      status: 'staging',
+      tools: ['query_logs'],
+    },
+  },
+  blank: {
+    title: 'Blank',
+    desc: 'Start from scratch.',
+    product: { id: '', name: '', status: 'staging' },
+  },
+};
+function mcpProductTemplate(key) {
+  const t = MCP_PRODUCT_TEMPLATES[key];
+  if (!t) return;
+  mcpProductOpen('new', t.product);
+}
+
+function mcpProductCardHtml(p) {
+  const accent = (p.branding && typeof p.branding.color === 'string' && /^#[0-9a-fA-F]{3,8}$/.test(p.branding.color))
+    ? p.branding.color : 'var(--accent)';
+  const icon = (p.branding && typeof p.branding.iconUrl === 'string' && /^https?:\/\//.test(p.branding.iconUrl))
+    ? `<img src="${escHtml(p.branding.iconUrl)}" alt="" onerror="this.style.display='none'">`
+    : '◫';
+  const status = p.status === 'staging'
+    ? '<span class="pill" style="background:var(--warning-soft);color:var(--warning)" title="Hidden from non-admin agents">staging</span>'
+    : '<span class="pill" style="background:var(--success-soft);color:var(--success)">published</span>';
+  const meta = [p.id, p.version ? 'v' + p.version : null, 'tenant: ' + (p.tenant || 'default')]
+    .filter(Boolean).map(escHtml).join(' · ');
+  const tools = (p.tools || []);
+  const toolsLabel = tools.length === 0
+    ? '<span class="pcard-tool-all">no filter — every registered tool</span>'
+    : tools.slice(0, 8).map((t) => `<span class="pcard-tool">${escHtml(t)}</span>`).join('') +
+      (tools.length > 8 ? `<span class="pcard-tool">+${tools.length - 8} more</span>` : '');
+  const desc = p.description
+    ? escHtml(p.description)
+    : '<span style="opacity:.5">No description.</span>';
+  const idAttr = encodeURIComponent(p.id);
+  return `<div class="pcard">
+    <div class="pcard-rail" style="background:${accent}"></div>
+    <div class="pcard-hd">
+      <div class="pcard-icon" style="color:${accent}">${icon}</div>
+      <div class="pcard-title">
+        <h3>${escHtml(p.name)}</h3>
+        <div class="pcard-meta">${meta}</div>
+      </div>
+      <div class="pcard-status">${status}</div>
+    </div>
+    <div class="pcard-desc">${desc}</div>
+    <div>
+      <div class="pcard-tools-label">Tools (${tools.length || 'unrestricted'})</div>
+      <div class="pcard-tools">${toolsLabel}</div>
+    </div>
+    <div class="pcard-footer">
+      <button class="btn btn-ghost btn-sm" title="Preview as agent" aria-label="Preview ${escHtml(p.id)} as agent" onclick="mcpProductPreviewAgent('${idAttr}')">Preview as agent</button>
+      <div class="pcard-spacer"></div>
+      <button class="btn-icon" data-rbac="products:write" title="Edit" aria-label="Edit ${escHtml(p.id)}" onclick="mcpProductsEdit('${idAttr}')">&#9998;</button>
+      <button class="btn-icon" data-rbac="products:delete" title="Delete" aria-label="Delete ${escHtml(p.id)}" onclick="mcpProductsDelete('${idAttr}')">&#128465;</button>
+    </div>
+  </div>`;
+}
+
+function mcpProductTableHtml(products) {
+  const rows = 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('');
+  return `<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>`;
+}
+
+function mcpProductEmptyHtml(configured) {
+  const tpls = ['ops', 'dev', 'compliance', 'blank']
+    .map((k) => {
+      const t = MCP_PRODUCT_TEMPLATES[k];
+      return `<button class="pempty-tpl" data-rbac="products:write" onclick="mcpProductTemplate('${k}')">
+        <div class="pempty-tpl-title">${escHtml(t.title)}</div>
+        <div class="pempty-tpl-desc">${escHtml(t.desc)}</div>
+      </button>`;
+    }).join('');
+  const persistedHint = configured
+    ? 'Changes here persist to <code>OMCP_PRODUCTS_FILE</code>.'
+    : '<code>OMCP_PRODUCTS_FILE</code> is unset — changes live in memory only and won\'t survive a restart.';
+  return `<div class="pempty">
+    <h3>No products yet</h3>
+    <p>A product is a curated tool bundle an agent receives when it connects with a bound credential. Pick a template below or start blank — you can rename and tweak everything before saving.</p>
+    <div class="pempty-templates" data-rbac="products:write">${tpls}</div>
+    <p class="t-sm" style="margin-top:var(--sp-4);opacity:.7">${persistedHint}</p>
+  </div>`;
+}
+
+async function loadMcpProducts() {
+  mcpLeitfadenSync();
+  const box = document.getElementById('mcp-products-box');
+  const scope = document.getElementById('mcp-products-scope');
+  if (!box) return;
+  // Sync view-toggle active state.
+  const v = mcpProductsView();
+  const btnC = document.getElementById('mcp-pv-cards');
+  const btnT = document.getElementById('mcp-pv-table');
+  if (btnC) btnC.classList.toggle('active', v === 'cards');
+  if (btnT) btnT.classList.toggle('active', v === 'table');
+  try {
+    const r = await fetch('/api/products');
+    if (!r.ok) {
+      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) {
+      box.innerHTML = mcpProductEmptyHtml(j.configured);
+      omcpApplyRbacToDom();
+      return;
+    }
+    if (v === 'table') {
+      box.innerHTML = mcpProductTableHtml(j.products);
+    } else {
+      box.innerHTML = `<div class="pcard-grid">${j.products.map(mcpProductCardHtml).join('')}</div>`;
+    }
+    omcpApplyRbacToDom();
+  } catch (e) {
+    box.innerHTML = '<div class="empty">/api/products unavailable: ' + escHtml(String(e && e.message || e)) + '</div>';
+  }
+}
+// Form-driven Product modal — replaces the old chain of window.prompt
+// dialogs. Exposes id + name + description + status + tenant + tools
+// + version + branding in one place, validated client-side before
+// the server's strict parser sees it.
+// Wizard navigation state — current step (1..4) for the active
+// modal session. Reset on every mcpProductOpen call.
+let MCP_WIZ_STEP = 1;
+const MCP_WIZ_LAST = 4;
+
+function mcpWizGoto(step) {
+  if (step < 1 || step > MCP_WIZ_LAST) return;
+  // Validate the current step before allowing forward navigation —
+  // backwards / sidewards navigation always allowed (the operator
+  // may want to revise).
+  if (step > MCP_WIZ_STEP && !mcpWizValidateStep(MCP_WIZ_STEP)) return;
+  MCP_WIZ_STEP = step;
+  mcpWizRender();
+}
+function mcpWizNext() {
+  if (MCP_WIZ_STEP < MCP_WIZ_LAST) mcpWizGoto(MCP_WIZ_STEP + 1);
+}
+function mcpWizBack() {
+  if (MCP_WIZ_STEP > 1) mcpWizGoto(MCP_WIZ_STEP - 1);
+}
+function mcpWizValidateStep(step) {
+  const errEl = document.getElementById('mcp-product-error');
+  errEl.style.display = 'none';
+  errEl.textContent = '';
+  if (step === 1) {
+    const id = document.getElementById('mcp-product-id').value.trim();
+    const name = document.getElementById('mcp-product-name').value.trim();
+    if (!/^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/.test(id)) {
+      errEl.textContent = 'Id must match [A-Za-z0-9][A-Za-z0-9._-]{0,63}.';
+      errEl.style.display = '';
+      document.getElementById('mcp-product-id').focus();
+      return false;
+    }
+    if (!name) {
+      errEl.textContent = 'Display name is required.';
+      errEl.style.display = '';
+      document.getElementById('mcp-product-name').focus();
+      return false;
+    }
+  }
+  // Step 2 (tools) + step 3 (scope/branding) have no required fields.
+  return true;
+}
+function mcpWizRender() {
+  // Toggle pane visibility.
+  for (let i = 1; i <= MCP_WIZ_LAST; i++) {
+    const pane = document.getElementById('wiz-pane-' + i);
+    if (pane) pane.hidden = i !== MCP_WIZ_STEP;
+  }
+  // Update stepper bullets — active = current, done = all earlier.
+  const stepper = document.getElementById('mcp-wiz-stepper');
+  if (stepper) {
+    stepper.querySelectorAll('.wiz-step-btn').forEach((btn) => {
+      const n = parseInt(btn.getAttribute('data-step') || '0', 10);
+      btn.setAttribute('data-active', String(n === MCP_WIZ_STEP));
+      btn.setAttribute('data-done', String(n < MCP_WIZ_STEP));
+      btn.setAttribute('aria-selected', String(n === MCP_WIZ_STEP));
+    });
+  }
+  // Footer button visibility.
+  const back = document.getElementById('mcp-wiz-back');
+  const next = document.getElementById('mcp-wiz-next');
+  const save = document.getElementById('mcp-wiz-save');
+  if (back) back.hidden = MCP_WIZ_STEP === 1;
+  if (next) next.hidden = MCP_WIZ_STEP === MCP_WIZ_LAST;
+  if (save) save.hidden = MCP_WIZ_STEP !== MCP_WIZ_LAST;
+  // Render the review summary lazily when entering step 4.
+  if (MCP_WIZ_STEP === MCP_WIZ_LAST) mcpWizRenderReview();
+}
+function mcpWizRenderReview() {
+  const out = document.getElementById('mcp-wiz-review');
+  if (!out) return;
+  const v = (id) => (document.getElementById(id).value || '').trim();
+  const id = v('mcp-product-id');
+  const name = v('mcp-product-name');
+  const desc = v('mcp-product-description');
+  const status = v('mcp-product-status');
+  const tenant = v('mcp-product-tenant');
+  const version = v('mcp-product-version');
+  const color = v('mcp-product-color');
+  const icon = v('mcp-product-icon');
+  const toolsRaw = (document.getElementById('mcp-product-tools').value || '');
+  const tools = toolsRaw.split(/[\n,]+/).map((s) => s.trim()).filter(Boolean);
+  const empty = (s) => s ? escHtml(s) : '<span class="wiz-review-empty">—</span>';
+  // Mirror mcpProductCardHtml's colour-validation regex so the
+  // inline style attribute can't carry an arbitrary CSS value. Even
+  // though escHtml prevents attribute breakout, restricting the
+  // value to a hex literal makes a CSS-context injection
+  // structurally impossible (defence-in-depth — reviewer-agent flag).
+  const safeColor = /^#[0-9a-fA-F]{3,8}$/.test(color) ? color : null;
+  const colorCell = !color
+    ? '<span class="wiz-review-empty">— (no brand colour)</span>'
+    : safeColor
+      ? `<span class="wiz-review-swatch" style="background:${safeColor}"></span><code>${escHtml(color)}</code>`
+      : `<code>${escHtml(color)}</code> <span class="t-sm" style="opacity:.6">(not a hex value)</span>`;
+  const toolsCell = tools.length === 0
+    ? '<span class="wiz-review-empty">no filter — every registered tool</span>'
+    : `<div class="wiz-review-tools">${tools.map((t) => `<span class="pcard-tool">${escHtml(t)}</span>`).join('')}</div>`;
+  out.innerHTML = `<dl class="wiz-review-grid">
+    <dt>Id</dt><dd><code>${empty(id)}</code></dd>
+    <dt>Name</dt><dd>${empty(name)}</dd>
+    <dt>Description</dt><dd>${empty(desc)}</dd>
+    <dt>Status</dt><dd><span class="pill">${empty(status)}</span></dd>
+    <dt>Tenant</dt><dd>${tenant ? escHtml(tenant) : '<span class="wiz-review-empty">(caller\'s tenant)</span>'}</dd>
+    <dt>Tools</dt><dd>${toolsCell}</dd>
+    <dt>Version</dt><dd>${empty(version)}</dd>
+    <dt>Colour</dt><dd>${colorCell}</dd>
+    <dt>Icon URL</dt><dd>${icon ? `<code>${escHtml(icon)}</code>` : '<span class="wiz-review-empty">—</span>'}</dd>
+  </dl>
+  <h4 class="wiz-agent-preview-h">Agent preview <span class="t-sm" style="opacity:.6;font-weight:400">— what the bound agent will see in <code>tools/list</code></span></h4>
+  <div id="mcp-wiz-agent-preview" class="wiz-agent-preview"><div class="t-sm" style="opacity:.7">${tools.length === 0
+    ? 'No filter set. Agent would see every registered tool — load the live registry to confirm.'
+    : `Filter active. Agent would see ${tools.length} tool${tools.length===1?'':'s'} from the allow-list.`}</div></div>`;
+  // Resolve the preview from the live tool registry — same source the
+  // server uses to filter /mcp tools/list. We don't hit
+  // /api/products/:id/preview here because the wizard's form-state
+  // hasn't been saved yet (the id may not exist on the server). The
+  // resolution mirrors allowsTool's semantics exactly.
+  mcpLoadToolsRegistry().then(() => {
+    const previewEl = document.getElementById('mcp-wiz-agent-preview');
+    if (!previewEl) return;
+    const allow = new Set(tools);
+    const filtered = (MCP_TOOLS_REGISTRY || []).filter((t) => tools.length === 0 || allow.has(t.name));
+    previewEl.innerHTML = mcpAgentPreviewHtml(filtered, tools.length === 0);
+  });
+}
+
+// Shared renderer for the agent-preview list — used by the wizard
+// Review pane and by the per-card "Preview as agent" action.
+function mcpAgentPreviewHtml(tools, unrestricted) {
+  if (!tools || tools.length === 0) {
+    return '<div class="t-sm" style="opacity:.7">No tools available.</div>';
+  }
+  const order = ['discovery', 'query', 'diagnose', 'topology'];
+  const groups = {};
+  for (const t of tools) (groups[t.category] = groups[t.category] || []).push(t);
+  const labels = { discovery: 'Discovery', query: 'Query', diagnose: 'Diagnose', topology: 'Topology' };
+  const banner = unrestricted
+    ? '<div class="wiz-agent-banner" data-unrestricted="true">Unrestricted — the bound agent sees every registered tool below.</div>'
+    : '';
+  const html = order.filter((c) => groups[c]).map((cat) => {
+    const items = groups[cat].map((t) => `
+      <div class="wiz-agent-tool">
+        <div class="wiz-agent-tool-name">${escHtml(t.name)}</div>
+        <div class="wiz-agent-tool-summary">${escHtml(t.summary)}</div>
+      </div>`).join('');
+    return `<div class="wiz-agent-group">
+      <div class="tp-cat">${escHtml(labels[cat] || cat)}</div>
+      ${items}
+    </div>`;
+  }).join('');
+  return banner + html;
+}
+
+// "Preview as agent" — called from the per-card button. Hits the
+// authoritative server endpoint so the operator sees what the bound
+// agent actually receives in production, not a client-side guess.
+async function mcpProductPreviewAgent(idEnc) {
+  const id = decodeURIComponent(idEnc);
+  let body;
+  try {
+    const r = await fetch('/api/products/' + encodeURIComponent(id) + '/preview');
+    if (!r.ok) { toast('Preview unavailable: HTTP ' + r.status); return; }
+    body = await r.json();
+  } catch (e) { toast('Preview failed: ' + (e && e.message || e)); return; }
+  const accent = (body.product && body.product.branding && /^#[0-9a-fA-F]{3,8}$/.test(body.product.branding.color || ''))
+    ? body.product.branding.color : 'var(--accent)';
+  const dlg = document.getElementById('mcp-agent-preview-modal');
+  const title = document.getElementById('mcp-agent-preview-title');
+  const meta = document.getElementById('mcp-agent-preview-meta');
+  const list = document.getElementById('mcp-agent-preview-list');
+  if (!dlg || !title || !meta || !list) return;
+  title.textContent = body.product.name || body.product.id;
+  meta.innerHTML = `<code>${escHtml(body.product.id)}</code>${body.product.version ? ' · v' + escHtml(body.product.version) : ''} · tenant: ${escHtml(body.product.tenant || 'default')} · status: ${escHtml(body.product.status || 'published')}`;
+  list.innerHTML = mcpAgentPreviewHtml(body.tools || [], !!body.unrestricted);
+  // Apply branding to the modal's left rail for a quick at-a-glance
+  // identity confirmation that the right product was probed.
+  dlg.style.setProperty('--mcp-agent-accent', accent);
+  dlg.classList.add('open');
+}
+
+function mcpProductOpen(mode, current) {
+  const idEl = document.getElementById('mcp-product-id');
+  const nameEl = document.getElementById('mcp-product-name');
+  const descEl = document.getElementById('mcp-product-description');
+  const statusEl = document.getElementById('mcp-product-status');
+  const tenantEl = document.getElementById('mcp-product-tenant');
+  const toolsEl = document.getElementById('mcp-product-tools');
+  const verEl = document.getElementById('mcp-product-version');
+  const colorEl = document.getElementById('mcp-product-color');
+  const iconEl = document.getElementById('mcp-product-icon');
+  const errEl = document.getElementById('mcp-product-error');
+  const titleEl = document.getElementById('mcp-product-modal-title');
+  document.getElementById('mcp-product-mode').value = mode;
+  document.getElementById('mcp-product-original-id').value = (current && current.id) || '';
+  errEl.style.display = 'none';
+  errEl.textContent = '';
+  if (mode === 'edit' && current) {
+    titleEl.textContent = 'Edit Product · ' + current.id;
+    idEl.value = current.id;
+    idEl.disabled = true;
+    nameEl.value = current.name || '';
+    descEl.value = current.description || '';
+    statusEl.value = current.status || 'published';
+    tenantEl.value = current.tenant || '';
+    toolsEl.value = (current.tools || []).join('\n');
+    verEl.value = current.version || '';
+    colorEl.value = (current.branding && current.branding.color) || '';
+    iconEl.value = (current.branding && current.branding.iconUrl) || '';
+  } else {
+    // 'new' mode. When the caller hands us a partial `current`
+    // (the empty-state templates do this), prefill every field
+    // they supplied — the operator only has to pick an id + tweak.
+    // Falsy `current` zeroes everything (legacy "fresh modal" path).
+    const c = current || {};
+    titleEl.textContent = 'New Product';
+    idEl.value = c.id || '';
+    idEl.disabled = false;
+    nameEl.value = c.name || '';
+    descEl.value = c.description || '';
+    statusEl.value = c.status || 'staging';
+    tenantEl.value = c.tenant || '';
+    toolsEl.value = (c.tools || []).join('\n');
+    verEl.value = c.version || '';
+    colorEl.value = (c.branding && c.branding.color) || '';
+    iconEl.value = (c.branding && c.branding.iconUrl) || '';
+  }
+  document.getElementById('mcp-product-modal').classList.add('open');
+  // Reset wizard state to step 1 on every open. Edit mode could
+  // start on step 4 (Review), but starting at step 1 keeps the UX
+  // uniform — an editor stepping through their own config catches
+  // surprises.
+  MCP_WIZ_STEP = 1;
+  mcpWizRender();
+  // Build the tools picker from the registry — fetched once on the
+  // first modal open and cached client-side. Selected = whatever was
+  // already in the (potentially template-prefilled) textarea.
+  mcpLoadToolsRegistry().then(() => {
+    const seeded = (toolsEl.value || '').split(/[\n,]+/).map((s) => s.trim()).filter(Boolean);
+    mcpRenderToolsPicker(seeded);
+  });
+  // When opening from a template the id is the one thing the operator
+  // hasn't picked yet; in every other case (edit, blank new) the name
+  // is the most natural focus target.
+  const focusEl = (mode === 'edit') ? nameEl
+    : (current && (current.name || (current.tools && current.tools.length))) ? idEl
+    : idEl;
+  setTimeout(() => focusEl.focus(), 50);
+}
+async function mcpProductsNew() { mcpProductOpen('new'); }
+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();
+  mcpProductOpen('edit', current);
+}
+async function mcpProductSave() {
+  const mode = document.getElementById('mcp-product-mode').value;
+  const id = document.getElementById('mcp-product-id').value.trim();
+  const name = document.getElementById('mcp-product-name').value.trim();
+  const errEl = document.getElementById('mcp-product-error');
+  function fail(msg) { errEl.textContent = msg; errEl.style.display = ''; }
+  // Mirror the server-side ID_RE so the user sees the rule before the
+  // round-trip — server is still the source of truth for rejection.
+  if (!/^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/.test(id)) {
+    fail('Id must match [A-Za-z0-9][A-Za-z0-9._-]{0,63}.');
+    return;
+  }
+  if (!name) { fail('Display name is required.'); return; }
+  const body = { id, name, status: document.getElementById('mcp-product-status').value };
+  const desc = document.getElementById('mcp-product-description').value.trim();
+  if (desc) body.description = desc;
+  const tenant = document.getElementById('mcp-product-tenant').value.trim();
+  if (tenant) body.tenant = tenant;
+  // Split on newlines or commas so paste-from-a-list works either way.
+  const toolsRaw = document.getElementById('mcp-product-tools').value || '';
+  const tools = toolsRaw.split(/[\n,]+/).map((s) => s.trim()).filter(Boolean);
+  if (tools.length > 0) body.tools = tools;
+  const version = document.getElementById('mcp-product-version').value.trim();
+  if (version) body.version = version;
+  const color = document.getElementById('mcp-product-color').value.trim();
+  const icon = document.getElementById('mcp-product-icon').value.trim();
+  if (color || icon) {
+    body.branding = {};
+    if (icon) body.branding.iconUrl = icon;
+    if (color) body.branding.color = color;
+  }
+  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(() => ({}));
+      fail(j.error || ('Save failed: HTTP ' + r.status));
+      return;
+    }
+    closeModal('mcp-product-modal');
+    toast((mode === 'edit' ? 'Updated ' : 'Created ') + id);
+    await loadMcpProducts();
+  } catch (e) { fail('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 +4919,124 @@ 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>`;
+  // Show a tenant tag only when set — single-tenant deployments
+  // stay visually identical to the pre-tenant rows.
+  const tenantTag = s.tenant ? `<span class="tag" title="Tenant ${esc(s.tenant)}">${esc(s.tenant)}</span>` : '';
+  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>`:''}${tenantTag}</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" id="src-views" style="margin-left:auto"><button id="src-view-list" class="${view==='list'?'active':''}" onclick="setSrcView('list')">List</button><button id="src-view-table" 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>`;
+    // Show the tenant column only when at least one source is
+    // tagged — single-tenant deployments stay uncluttered.
+    const anyTenant = visible.some(s => s.tenant);
+    const tenantHead = anyTenant ? h('tenant','Tenant') : '';
+    body=`<table class="dtable"><thead><tr>${h('name','Name')}${h('type','Type')}${h('signal','Signal')}${tenantHead}${h('url','URL')}${h('status','Status')}${h('latency','Latency')}</tr></thead><tbody>`+
+      visible.map(s=>{
+        const tenantCell = anyTenant
+          ? `<td>${s.tenant ? `<span class="badge">${esc(s.tenant)}</span>` : '<span class="t-muted">global</span>'}</td>`
+          : '';
+        return `<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>${tenantCell}<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 +5044,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 +5117,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);
 }
@@ -2480,13 +5205,37 @@ function setAuthInForm(auth) {
   if(auth.type==='bearer') { document.getElementById('src-auth-token').value=auth.token||''; }
   toggleAuthFields();
 }
+// Admins (users:delete) can pick any tenant or leave blank (global);
+// non-admins are silently scoped to their own tenant by the server.
+// Pre-fill + disable for non-admins so the UX matches the server
+// posture — they SEE the constraint instead of typing into a field
+// that the server will then quietly rewrite.
+function _omcpApplyTenantFieldMode() {
+  const inp = document.getElementById('src-tenant');
+  if (!inp) return;
+  const isAdmin = (typeof omcpCan === 'function') && omcpCan('users', 'delete');
+  const sess = window.__omcpMe;
+  const isAnonymous = !sess || sess.mode === 'anonymous';
+  if (isAdmin || isAnonymous) {
+    inp.disabled = false;
+    inp.placeholder = '(blank = global)';
+  } else {
+    const own = (sess && sess.user && sess.user.tenant) || 'default';
+    inp.value = own;
+    inp.disabled = true;
+    inp.placeholder = own;
+  }
+}
 function openAddModal() {
   document.getElementById('modal-title').textContent='Add Source'; document.getElementById('modal-mode').value='add';
   document.getElementById('modal-original-name').value=''; document.getElementById('src-name').value='';
   document.getElementById('src-url').value=''; document.getElementById('src-enabled').checked=true;
+  document.getElementById('src-tenant').value='';
   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('');
+  _omcpApplyTenantFieldMode();
   document.getElementById('source-modal').classList.add('open');
 }
 function openEditModal(name) {
@@ -2495,19 +5244,80 @@ 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();
+  document.getElementById('src-tenant').value = s.tenant || '';
+  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('');
+  _omcpApplyTenantFieldMode();
   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 tenant = document.getElementById('src-tenant').value.trim();
+  if (tenant) src.tenant = tenant;
   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 +5341,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 +5405,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 +5417,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 +5634,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 +5679,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 +6008,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 +6084,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 +6097,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 +6136,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 +6192,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 +6291,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 +6361,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 +6390,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 +6445,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{