@thotischner/observability-mcp 1.8.1 → 3.0.0

package/dist/ui/index.html

@@ -936,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; }
@@ -1736,16 +1910,51 @@ curl -X PUT http://localhost:3000/api/enterprise/policy \
            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 in a future slice), branding metadata, and a status (published | staging). Non-admins see only their own tenant's published entries; admins see everything plus staging. Edits go through PUT /api/products/{id} with strict body validation."
+              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>
@@ -1809,38 +2018,171 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
         </div>
         <div class="ph-actions"><span id="pol-engine" class="badge"></span></div>
       </div>
-      <div class="card">
-        <div class="card-header"><h2>Active policy
-          <button class="info" aria-label="About the active policy"
-            data-title="Active policy"
-            data-info="Read-only view of the RBAC policy this build is running. When OMCP_RBAC_POLICY_FILE is set the file replaces the built-in defaults; the badge above identifies which is active. Use the dry-run panel below to probe specific role/resource/action combinations without writing a test."
-            onclick="infoPop(this)">?</button>
-        </h2></div>
-        <div id="pol-roles" class="content"><div class="empty">Loading…</div></div>
-        <div class="form-hint" style="padding: var(--sp-3) var(--sp-4)">
-          File source: read-only here. To change, edit <code>OMCP_RBAC_POLICY_FILE</code> on the server and restart.
+
+      <!-- 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>
-      <div class="card">
-        <div class="card-header"><h2>Dry-run probe</h2></div>
-        <div class="content" style="display:grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr 1fr auto;">
-          <div class="form-group" style="margin:0">
+
+      <!-- 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" style="margin:0">
+          <div class="form-group">
             <label>Resource</label>
             <input id="pol-dry-resource" placeholder="sources">
           </div>
-          <div class="form-group" style="margin:0">
+          <div class="form-group">
             <label>Action</label>
-            <input id="pol-dry-action" placeholder="write">
+            <input id="pol-dry-action" placeholder="read">
           </div>
-          <div class="form-group" style="margin:0; align-self:end">
+          <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" style="padding: 0 var(--sp-4) var(--sp-4)"></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>
 
@@ -1938,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>
@@ -1978,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>
@@ -2020,45 +2504,640 @@ function showPage(name) {
 }
 
 // --- Policies tab (PolicyEngine snapshot + dry-run) ---
-async function loadPolicies() {
+// 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) {
-      rolesEl.innerHTML = '<div class="empty">Policy view requires the <code>users:delete</code> permission (admin role).</div>';
-      engineEl.textContent = '';
+      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();
-    engineEl.textContent = 'engine: ' + (j.engine || 'unknown');
-    engineEl.className = 'badge ' + (j.engine === 'builtin' ? 'badge-ok' : '');
-    const blocks = [];
-    for (const role of (j.roles || [])) {
-      const grants = (j.policy && j.policy[role]) || [];
-      // Group grants by resource for compact rendering.
-      const byRes = {};
-      for (const g of grants) {
-        (byRes[g.resource] = byRes[g.resource] || []).push(g.action);
+    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>`);
       }
-      const rows = Object.entries(byRes).map(([res, actions]) =>
-        `<tr><td><code>${escHtml(res)}</code></td><td>${actions.map(a => `<span class="pill">${escHtml(a)}</span>`).join(' ')}</td></tr>`
-      ).join('');
-      blocks.push(`
-        <div style="padding: var(--sp-3) var(--sp-4)">
-          <h3 style="margin: 0 0 var(--sp-2); display:flex; gap: var(--sp-2); align-items:baseline;">
-            <span>${escHtml(role)}</span>
-            <span class="t-sm" style="opacity:.7">${grants.length} permission${grants.length===1?'':'s'}</span>
-          </h3>
-          <table class="data-table" style="width:100%"><thead><tr><th>Resource</th><th>Actions</th></tr></thead><tbody>${rows || '<tr><td colspan="2" class="empty">no grants</td></tr>'}</tbody></table>
-        </div>`);
-    }
-    rolesEl.innerHTML = blocks.join('') || '<div class="empty">No roles defined.</div>';
-    if (j.note) {
-      rolesEl.insertAdjacentHTML('beforeend', `<div class="form-hint" style="padding: var(--sp-2) var(--sp-4) var(--sp-3)">${escHtml(j.note)}</div>`);
+      rolesEl.innerHTML = blocks.join('') || '<div class="empty">No roles defined.</div>';
     }
   } catch (e) {
-    rolesEl.innerHTML = '<div class="empty">Policy unavailable: ' + escHtml(String(e && e.message || e)) + '</div>';
+    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() {
@@ -2066,24 +3145,28 @@ async function polDryRun() {
   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 cls = d.allowed ? 'badge-ok' : 'badge-err';
     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 style="margin-top: var(--sp-3); display:flex; gap: var(--sp-2); align-items:center;">
-        <span class="badge ${cls}">${verdict}</span>
+      <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-2)">${escHtml(d.reason || '')}</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>';
   }
@@ -3073,14 +4156,267 @@ 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) {
-      // 403 = no products:read; render a friendly hint instead of an empty list
       if (r.status === 403) {
         box.innerHTML = '<div class="empty">Requires <code>products:read</code> permission (granted to viewer / operator / admin by default).</div>';
       } else {
@@ -3094,59 +4430,312 @@ async function loadMcpProducts() {
       scope.textContent = 'scope: ' + s + (j.includesStaging ? ' · staging visible' : '');
     }
     if (!j.products || j.products.length === 0) {
-      const hint = j.configured
-        ? 'No products yet. Click <b>+ New product</b> or edit <code>OMCP_PRODUCTS_FILE</code> directly.'
-        : 'Set <code>OMCP_PRODUCTS_FILE=&lt;path&gt;</code> on the server (or use <b>+ New product</b> to start an in-memory catalog).';
-      box.innerHTML = '<div class="empty">' + hint + '</div>';
+      box.innerHTML = mcpProductEmptyHtml(j.configured);
+      omcpApplyRbacToDom();
       return;
     }
-    const rows = j.products.map((p) => {
-      const status = p.status === 'staging'
-        ? '<span class="pill" style="background:var(--warning-soft);color:var(--warning)">staging</span>'
-        : '<span class="pill" style="background:var(--success-soft);color:var(--success)">published</span>';
-      const tools = (p.tools || []).slice(0, 5).map((t) => `<code class="t-sm">${escHtml(t)}</code>`).join(' ');
-      const moreTools = (p.tools || []).length > 5 ? ` <span class="t-sm" style="opacity:.7">+${(p.tools.length - 5)} more</span>` : '';
-      const tenantCell = `<span class="tag">${escHtml(p.tenant || 'default')}</span>`;
-      return `<tr>
-        <td><code>${escHtml(p.id)}</code></td>
-        <td>${escHtml(p.name)}${p.description ? `<div class="t-sm" style="opacity:.7">${escHtml(p.description)}</div>` : ''}</td>
-        <td>${tenantCell}</td>
-        <td>${status}</td>
-        <td>${tools || '<span class="t-sm" style="opacity:.5">all tools</span>'}${moreTools}</td>
-        <td style="text-align:right">
-          <button class="btn-icon" data-rbac="products:write" title="Edit" onclick="mcpProductsEdit('${encodeURIComponent(p.id)}')">&#9998;</button>
-          <button class="btn-icon" data-rbac="products:delete" title="Delete" onclick="mcpProductsDelete('${encodeURIComponent(p.id)}')">&#128465;</button>
-        </td>
-      </tr>`;
-    }).join('');
-    box.innerHTML = `<table class="data-table" style="width:100%">
-      <thead><tr><th>id</th><th>Name</th><th>Tenant</th><th>Status</th><th>Tools</th><th></th></tr></thead>
-      <tbody>${rows}</tbody>
-    </table>`;
+    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>';
   }
 }
-async function mcpProductsNew() {
-  const id = (window.prompt('New product id (lowercase, [a-z0-9._-]):') || '').trim();
-  if (!id) return;
-  const name = (window.prompt('Display name:') || '').trim();
-  if (!name) return;
-  await mcpProductsUpsert(id, { id, name, status: 'staging' });
+// 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();
-  const newName = window.prompt('Display name', current.name);
-  if (newName === null) return;
-  const status = window.prompt('Status (published | staging)', current.status || 'published');
-  if (status === null) return;
-  await mcpProductsUpsert(id, { ...current, name: newName, status });
-}
-async function mcpProductsUpsert(id, body) {
+  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',
@@ -3155,12 +4744,13 @@ async function mcpProductsUpsert(id, body) {
     });
     if (!r.ok) {
       const j = await r.json().catch(() => ({}));
-      toast('Save failed: ' + (j.error || r.status));
+      fail(j.error || ('Save failed: HTTP ' + r.status));
       return;
     }
-    toast('Saved ' + id);
+    closeModal('mcp-product-modal');
+    toast((mode === 'edit' ? 'Updated ' : 'Created ') + id);
     await loadMcpProducts();
-  } catch (e) { toast('Save failed: ' + (e && e.message || e)); }
+  } catch (e) { fail('Save failed: ' + (e && e.message || e)); }
 }
 async function mcpProductsDelete(idEnc) {
   const id = decodeURIComponent(idEnc);
@@ -3378,7 +4968,10 @@ function sortIndClass(key){
 
 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" 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>`;
+  // 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 emptyDash = richEmpty({
@@ -3407,13 +5000,22 @@ function renderSources() {
   const filterBar=`<div class="list-filter">
     <input id="src-filter" type="search" placeholder="Filter sources by name, type or URL…" value="${esc(srcFilter)}" oninput="setSrcFilter(this.value)" aria-label="Filter sources">
     <span class="count">${visible.length} of ${sourcesData.length}</span>
-    <span class="view-toggle" style="margin-left:auto"><button class="${view==='list'?'active':''}" onclick="setSrcView('list')">List</button><button class="${view==='table'?'active':''}" onclick="setSrcView('table')">Table</button></span>
+    <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'){
     const h = (key, label) => `<th class="sortable ${sortIndClass(key)}" data-sort-key="${key}" onclick="setSrcSort('${key}')">${label}<span class="sort-ind"></span></th>`;
-    body=`<table class="dtable"><thead><tr>${h('name','Name')}${h('type','Type')}${h('signal','Signal')}${h('url','URL')}${h('status','Status')}${h('latency','Latency')}</tr></thead><tbody>`+
-      visible.map(s=>`<tr data-src="${esc(s.name)}"><td class="mono">${esc(s.name)}</td><td>${esc(s.type)}</td><td>${s.signalType?esc(s.signalType):'—'}</td><td class="mono t-muted">${esc(s.url)}</td><td>${!s.enabled?'disabled':s.status==='up'?'<span class="pill-yes">up</span>':'<span class="pill-no">down</span>'}</td><td class="mono">${s.latencyMs?s.latencyMs+'ms':'—'}</td></tr>`).join('')+
+    // 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 = visible.length === 0
@@ -3603,14 +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) {
@@ -3619,8 +5244,10 @@ 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 ------------------------------
@@ -3680,6 +5307,8 @@ async function saveSource() {
   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()};
+  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)});