@thotischner/observability-mcp 1.8.1 → 3.0.1

package/dist/ui/index.html

@@ -936,6 +936,206 @@
     .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); }
+
+    /* One helper line under a page H1. */
+    .ph-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-2, var(--text)); }
+
+    /* Disclosure (native <details>) — used for the in-card "bind a
+       credential" note and the demoted legacy catalog section. */
+    .pg-disclosure > summary { cursor: pointer; list-style: none; user-select: none; font-size: 13px; color: var(--text-2, var(--text)); padding: 8px 0; display: flex; align-items: center; gap: 8px; }
+    .pg-disclosure > summary::-webkit-details-marker { display: none; }
+    .pg-disclosure > summary::before { content: "▸"; font-size: 11px; color: var(--text-3, #8a93a5); transition: transform .12s ease; }
+    .pg-disclosure[open] > summary::before { transform: rotate(90deg); }
+    .pg-disclosure-body { padding: 4px 0 8px; }
+    /* The "bind a credential" note sits inside the primary card. */
+    .pg-bind { border-top: 1px solid var(--border); margin-top: 8px; }
+    .pg-bind pre { background: var(--surface-2); padding: 8px 10px; border-radius: 4px; font-size: 11px; overflow-x: auto; margin: 6px 0; }
+    /* The legacy catalog: a recessed, muted block, demoted by depth. */
+    .pg-legacy { border: 1px solid var(--border); border-radius: 6px; margin-top: 18px; padding: 0 14px; background: var(--surface-2); }
+    .pg-legacy > summary { color: var(--text-3, #8a93a5); }
+    .pg-legacy-note { color: var(--text-3, #8a93a5); margin: 0 0 12px; }
+
+    /* 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; }
+    }
+
+    /* Batch evaluate heat-map (P4) */
+    .pol-batch { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-4); align-items: start; }
+    .pol-batch .form-row { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
+    .pol-batch textarea { font-family: var(--mono); font-size: 12px; padding: var(--sp-2); border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); resize: vertical; }
+    .pol-batch select[multiple] { font-family: var(--mono); font-size: 12px; padding: var(--sp-1); border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }
+    .pol-batch-result { min-height: 200px; }
+    .pol-heat { border-collapse: collapse; font-size: 11px; }
+    .pol-heat th, .pol-heat td { border: 1px solid var(--border); padding: 4px 8px; text-align: center; vertical-align: middle; }
+    .pol-heat thead th { background: var(--surface-2); position: sticky; top: 0; }
+    .pol-heat .row-head { background: var(--surface-2); font-weight: 600; text-align: left; padding-right: var(--sp-3); white-space: nowrap; }
+    .pol-heat .resource-head { background: var(--surface-2); font-size: 10px; opacity: .8; font-weight: normal; }
+    .pol-heat .cell-allow { background: var(--success-soft); color: var(--success); font-weight: 600; cursor: help; }
+    .pol-heat .cell-deny { background: var(--danger-soft); color: var(--danger); font-weight: 600; cursor: help; }
+    .pol-heat .cell-na { background: transparent; color: var(--text-3); }
+    .pol-batch-dropped { margin-top: var(--sp-2); font-size: 11px; color: var(--warn); }
+    @media (max-width: 1200px) {
+      .pol-batch { grid-template-columns: 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; }
@@ -1191,6 +1391,48 @@
       stroke: var(--accent); stroke-width: 3;
       filter: drop-shadow(0 0 4px var(--accent-soft));
     }
+
+    /* ===== Playground (Q13) — restrained, monochrome ===== */
+    .pg-seg { display:inline-flex; gap:0; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
+    .pg-seg button { border:none; background:transparent; color:var(--text-2,var(--text)); font:inherit; font-size:12px; padding:3px 11px; cursor:pointer; }
+    .pg-seg button + button { border-left:1px solid var(--border); }
+    .pg-seg button.active { background:var(--surface-3); color:var(--text); font-weight:600; }
+    /* JSON: two tones only — keys at full strength, scalars muted. */
+    .pg-json { white-space:pre-wrap; font-family:var(--mono); font-size:12px; background:var(--bg); padding:12px; border:1px solid var(--border); border-radius:4px; max-height:540px; overflow:auto; margin:0; color:var(--text-3,#8a93a5); }
+    .pg-json .k { color:var(--text); }
+    .pg-json .s { color:var(--text-2,var(--text)); }
+    .pg-json .n, .pg-json .b { color:var(--text-2,var(--text)); }
+    .pg-json .z { color:var(--text-3,#8a93a5); }
+    .pg-tbl-wrap { max-height:540px; overflow:auto; border:1px solid var(--border); border-radius:4px; }
+    table.pg-tbl { border-collapse:collapse; width:100%; font-size:12px; }
+    table.pg-tbl th, table.pg-tbl td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
+    table.pg-tbl th { position:sticky; top:0; background:var(--surface-2); color:var(--text-2,var(--text)); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
+    table.pg-tbl tr:last-child td { border-bottom:none; }
+    table.pg-tbl tr:hover td { background:var(--surface-2); }
+    /* Status: plain text by default; only failure states get a tint. */
+    table.pg-tbl td .pill { font-weight:600; }
+    table.pg-tbl td .pill.down, table.pg-tbl td .pill.error, table.pg-tbl td .pill.crit { color:var(--danger); }
+    table.pg-tbl td .pill.warn, table.pg-tbl td .pill.degraded { color:var(--warning); }
+    .pg-err-banner { border:1px solid var(--danger); color:var(--danger); border-radius:4px; padding:8px 12px; margin-bottom:10px; font-size:13px; }
+
+    /* Tool picker — type-ahead combobox, closed at rest (Carbon-style). */
+    .pg-combo { position:relative; max-width:560px; }
+    .pg-combo input { width:100%; padding-right:30px; }
+    .pg-combo input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); outline:none; }
+    .pg-combo-chev { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-3,#8a93a5); cursor:pointer; font-size:11px; padding:4px; line-height:1; }
+    .pg-combo-menu { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--border); border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,0.28); max-height:340px; overflow:auto; }
+    .pg-grp-hdr { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3,#8a93a5); padding:8px 14px 4px; pointer-events:none; }
+    .pg-grp-hdr + .pg-grp-hdr { display:none; } /* no empty headers */
+    .pg-opt { padding:7px 14px; cursor:pointer; border-left:2px solid transparent; }
+    .pg-opt:hover, .pg-opt.hl { background:var(--surface-2); }
+    .pg-opt.sel { background:var(--surface-3); border-left-color:var(--accent); }
+    .pg-opt .nm { font-family:var(--mono); font-size:13px; color:var(--text); }
+    .pg-opt .sm { font-size:12px; color:var(--text-3,#8a93a5); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .pg-opt .src { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3,#8a93a5); }
+    .pg-sel-sum { font-size:12px; color:var(--text-3,#8a93a5); margin-top:6px; min-height:1em; max-width:560px; }
+    .pg-args-tools { float:right; display:inline-flex; gap:4px; }
+    .pg-args-box { font-family:var(--mono); font-size:12px; line-height:1.5; }
+    .pg-args-err { color:var(--danger); font-size:12px; margin-top:6px; }
   </style>
 </head>
 <body>
@@ -1209,6 +1451,8 @@
           <button class="nav-btn" data-page="services" title="Services" onclick="showPage('services')"><span class="nav-ico">⊞</span><span class="nav-label">Services</span></button>
           <button class="nav-btn" data-page="health" title="Health" onclick="showPage('health')"><span class="nav-ico">✚</span><span class="nav-label">Health</span></button>
           <button class="nav-btn" data-page="topology" title="Topology" onclick="showPage('topology')"><span class="nav-ico">◇</span><span class="nav-label">Topology</span></button>
+          <button class="nav-btn" data-page="postmortems" title="Postmortems" onclick="showPage('postmortems')"><span class="nav-ico">◷</span><span class="nav-label">Postmortems</span></button>
+          <button class="nav-btn" data-page="playground" title="Playground" onclick="showPage('playground')"><span class="nav-ico">⏵</span><span class="nav-label">Playground</span></button>
         </div>
       </div>
       <div class="rail-grp" data-grp="catalog">
@@ -1710,6 +1954,109 @@ curl -X PUT http://localhost:3000/api/enterprise/policy \
       </div>
     </div>
 
+    <!-- ===== Observability: Postmortems (P6 — persisted reports) ===== -->
+    <div class="page" id="page-postmortems">
+      <div class="page-head">
+        <div class="ph-left">
+          <div class="breadcrumb">Console / Observability / <b>Postmortems</b></div>
+          <h1>Postmortems</h1>
+        </div>
+        <div class="ph-actions">
+          <button class="btn btn-primary btn-sm" onclick="pmOpenNew()">+ Generate</button>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-header"><h2>Generated reports
+          <button class="info" aria-label="About postmortems"
+            data-title="Postmortems"
+            data-info="Persisted output of the generate_postmortem MCP tool. Each entry stitches anomaly history + traces + blast-radius + log highlights into one markdown report for a service. RBAC: viewers list, operators regenerate, admins delete."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div class="content">
+          <div id="pm-list-body"><div class="empty">Loading…</div></div>
+        </div>
+      </div>
+
+      <div class="card" id="pm-detail-card" hidden>
+        <div class="card-header"><h2 id="pm-detail-title">Report</h2>
+          <span style="flex:1"></span>
+          <button class="btn btn-ghost btn-sm" onclick="pmCloseDetail()">Close</button>
+          <button class="btn btn-sm" id="pm-detail-regen" onclick="pmRegenerate()" hidden>Regenerate</button>
+          <button class="btn btn-sm btn-danger" id="pm-detail-delete" onclick="pmDelete()" hidden>Delete</button>
+        </div>
+        <div class="content">
+          <div id="pm-detail-meta" class="muted" style="margin-bottom:8px;font-size:12px"></div>
+          <pre id="pm-detail-md" style="white-space:pre-wrap;font-family:var(--mono);font-size:12px;background:var(--bg);padding:12px;border:1px solid var(--border);border-radius:4px;max-height:540px;overflow:auto"></pre>
+        </div>
+      </div>
+    </div>
+
+    <!-- ===== Playground (Q13 / v3.1) ===== -->
+    <div class="page" id="page-playground">
+      <div class="page-head">
+        <div class="ph-left">
+          <div class="breadcrumb">Console / Observability / <b>Playground</b></div>
+          <h1>Tool Playground</h1>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-header"><h2>Invoke a tool
+          <button class="info" aria-label="About playground"
+            data-title="Playground"
+            data-info="Run any registered MCP tool against the live gateway. Uses your current credential's RBAC + rate-limit + entitlement + audit — identical to the dispatch path an MCP client would hit. Result is the raw CallToolResult."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div class="content">
+          <!-- hidden field carries the selected tool name -->
+          <input type="hidden" id="pg-tool" value="">
+          <div class="form-row">
+            <label for="pg-combo-input">Tool</label>
+            <div class="pg-combo" id="pg-combo">
+              <input type="text" id="pg-combo-input" class="input" autocomplete="off" spellcheck="false"
+                     placeholder="Select or filter tools…" role="combobox" aria-expanded="false" aria-controls="pg-combo-menu"
+                     oninput="pgComboFilter(this.value)" onfocus="pgComboOpen()" onkeydown="pgComboKey(event)">
+              <button type="button" class="pg-combo-chev" id="pg-combo-chev" tabindex="-1" aria-label="Toggle tool list" onclick="pgComboToggle()">▾</button>
+              <div class="pg-combo-menu" id="pg-combo-menu" role="listbox" hidden></div>
+            </div>
+            <div id="pg-sel-sum" class="pg-sel-sum"></div>
+          </div>
+
+          <div class="form-row" style="margin-top:20px">
+            <label for="pg-args">Arguments <span class="muted" style="font-weight:normal">(JSON)</span>
+              <span class="pg-args-tools">
+                <button type="button" class="btn btn-ghost btn-sm" onclick="pgFormatArgs()">Format</button>
+                <button type="button" class="btn btn-ghost btn-sm" onclick="document.getElementById('pg-args').value='{}'">Reset</button>
+              </span>
+            </label>
+            <textarea id="pg-args" class="input pg-args-box" rows="8" spellcheck="false">{}</textarea>
+            <div id="pg-args-err" class="pg-args-err" hidden></div>
+          </div>
+          <div class="row" style="gap:8px;margin-top:8px">
+            <button class="btn btn-primary" onclick="pgRun()" id="pg-run-btn" disabled>Invoke</button>
+            <button class="btn btn-ghost" onclick="pgClear()">Clear result</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="card" id="pg-result-card" hidden>
+        <div class="card-header">
+          <h2>Result <span id="pg-result-meta" class="muted" style="font-weight:normal;font-size:12px"></span></h2>
+          <span style="flex:1"></span>
+          <div class="pg-seg" id="pg-view-seg">
+            <button data-view="pretty" class="active" onclick="pgSetView('pretty')">Pretty</button>
+            <button data-view="table" onclick="pgSetView('table')">Table</button>
+            <button data-view="raw" onclick="pgSetView('raw')">Raw</button>
+          </div>
+          <button class="btn btn-ghost btn-sm" style="margin-left:8px" onclick="pgCopy()">Copy</button>
+        </div>
+        <div class="content">
+          <div id="pg-result-body"></div>
+        </div>
+      </div>
+    </div>
+
     <!-- ===== Catalog: Context Products ===== -->
     <div class="page" id="page-products">
       <div class="page-head">
@@ -1718,70 +2065,80 @@ curl -X PUT http://localhost:3000/api/enterprise/policy \
           <h1>Context Products
             <button class="info" aria-label="What is a context product"
               data-title="Context products"
-              data-info="A context product is a named, governed bundle of observability context an agent may consume — a curated set of sources, services and tools. It is the unit you grant to a principal. The catalog is the collection of all products plus the grants that map principals to them; it composes with access control (a request must satisfy both RBAC and the catalog)."
+              data-info="A context product is a named, governed bundle of MCP tools you expose to an agent or credential. The bundle's tools allow-list filters tools/list at the /mcp transport, so an agent bound to a product sees only that product's tools. Products compose with access control — a request must satisfy both RBAC and the product binding."
               onclick="infoPop(this)">?</button>
           </h1>
+          <p class="ph-sub">Curated, governed tool bundles you expose to an agent or credential.</p>
         </div>
-        <div class="ph-actions"><button class="btn btn-primary btn-sm" onclick="entEditNew('cat')">+ New product</button><button class="btn btn-sm" id="ent-cat-editbtn" onclick="entEditOpen('cat')">Edit catalog</button></div>
       </div>
-      <div class="card" style="background:var(--accent-soft);border-color:transparent">
-        <div style="font-size:var(--fs-sm);color:var(--text);line-height:1.6">
-          <b>The catalog</b> publishes <b>context products</b> — reusable bundles of sources, services and tools —
-          and the <b>grants</b> that decide which principals may consume each product. Browse below as cards or a
-          table; an admin can create or change products via the editor or the API example.
-        </div>
-      </div>
-      <!-- MCP Products — governed via /api/products (the new, RBAC-gated
-           surface from the MCP Products + RBAC phase). Replaces the
-           legacy enterprise-catalog block below for new deployments;
-           the legacy block stays so existing /api/enterprise/catalog
-           operators see their data until they migrate. -->
+
+      <!-- Primary surface: MCP Products via /api/products (RBAC-gated). -->
       <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>
         <div id="mcp-products-box"><div class="empty">Loading…</div></div>
+        <details class="pg-disclosure pg-bind">
+          <summary>Bind a credential to a product</summary>
+          <div class="pg-disclosure-body">
+            <p class="t-sm">Bind a credential to a product via <code>OMCP_KEY_PRODUCTS</code>; the agent's next <code>/mcp</code> session then sees only that product's tools:</p>
+            <pre><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"><a href="https://github.com/ThoTischner/observability-mcp/blob/main/docs/products.md" target="_blank" rel="noreferrer">Full docs →</a></p>
+          </div>
+        </details>
       </div>
 
-      <!-- Legacy enterprise-products card (kept for operators that
-           still wire OMCP_ENTERPRISE_CATALOG_FILE) -->
-      <div class="card">
-        <div class="card-header"><h2>Products <span class="t-sm" style="opacity:.7">(legacy / enterprise catalog)</span></h2></div>
-        <div id="ent-catalog"><div class="empty">Loading…</div></div>
-        <div id="ent-cat-editor" class="hidden" style="margin-top:12px">
-          <div class="ed-bar">
-            <span class="view-toggle" id="cat-views">
-              <button data-v="form" class="active" onclick="catView('form')">Form</button>
-              <button data-v="json" onclick="catView('json')">JSON</button>
-              <button data-v="yaml" onclick="catView('yaml')">YAML</button>
-            </span>
-            <input type="password" id="ent-cat-token" class="ed-token" placeholder="Admin API key (Bearer)">
-          </div>
-          <div class="form-hint" style="margin-bottom:8px">Define products &amp; grants below — no JSON required. JSON / YAML are optional alternative views. Saving needs an admin API key.</div>
-          <div id="cat-form"></div>
-          <textarea id="ent-cat-json" class="ed-code hidden" rows="16" spellcheck="false"></textarea>
-          <div id="ent-cat-msg" style="margin:8px 0;font-size:12px"></div>
-          <div style="display:flex;gap:8px;justify-content:flex-end">
-            <button class="btn btn-ghost btn-sm" onclick="closeDrawer()">Cancel</button>
-            <button class="btn btn-primary btn-sm" onclick="entSaveCat()">Save catalog</button>
+      <!-- Legacy enterprise catalog — deprecated, demoted into a
+           collapsed disclosure so it stays reachable for operators
+           still wiring OMCP_ENTERPRISE_CATALOG_FILE without competing
+           with the primary surface above. Open state persists. -->
+      <details class="pg-disclosure pg-legacy" id="ent-legacy" ontoggle="pgLegacyPersist(this)">
+        <summary>Legacy catalog (enterprise)</summary>
+        <div class="pg-disclosure-body">
+          <p class="t-sm pg-legacy-note">Deprecated. Backed by <code>OMCP_ENTERPRISE_CATALOG_FILE</code>. Use <b>MCP Products</b> above for new deployments.</p>
+          <div class="row-inline" style="margin-bottom:12px">
+            <button class="btn btn-sm" onclick="entEditNew('cat')">+ New product</button>
+            <button class="btn btn-sm" id="ent-cat-editbtn" onclick="entEditOpen('cat')">Edit catalog</button>
           </div>
-        </div>
-        <div class="form-hint" style="margin-top:14px">Use <b>Edit catalog</b> above — no command line needed. The block below is the optional API equivalent for automation/CI.</div>
-        <div class="codeblock collapsed">
-          <div class="codeblock-hd" onclick="toggleCode(this)">
-            <span class="cb-chev">▾</span><span class="cb-title">API · create a context product via curl</span>
-            <button class="codeblock-cp" onclick="event.stopPropagation();copyCode(this)">Copy</button>
+          <div id="ent-catalog"><div class="empty">Loading…</div></div>
+          <div id="ent-cat-editor" class="hidden" style="margin-top:12px">
+            <div class="ed-bar">
+              <span class="view-toggle" id="cat-views">
+                <button data-v="form" class="active" onclick="catView('form')">Form</button>
+                <button data-v="json" onclick="catView('json')">JSON</button>
+                <button data-v="yaml" onclick="catView('yaml')">YAML</button>
+              </span>
+              <input type="password" id="ent-cat-token" class="ed-token" placeholder="Admin API key (Bearer)">
+            </div>
+            <div class="form-hint" style="margin-bottom:8px">Define products &amp; grants below — no JSON required. JSON / YAML are optional alternative views. Saving needs an admin API key.</div>
+            <div id="cat-form"></div>
+            <textarea id="ent-cat-json" class="ed-code hidden" rows="16" spellcheck="false"></textarea>
+            <div id="ent-cat-msg" style="margin:8px 0;font-size:12px"></div>
+            <div style="display:flex;gap:8px;justify-content:flex-end">
+              <button class="btn btn-ghost btn-sm" onclick="closeDrawer()">Cancel</button>
+              <button class="btn btn-primary btn-sm" onclick="entSaveCat()">Save catalog</button>
+            </div>
           </div>
-          <pre><span class="tok-cmt"># publish a "payments-eu" product and grant it to a principal.</span>
+          <div class="codeblock collapsed" style="margin-top:14px">
+            <div class="codeblock-hd" onclick="toggleCode(this)">
+              <span class="cb-chev">▾</span><span class="cb-title">API · create a context product via curl</span>
+              <button class="codeblock-cp" onclick="event.stopPropagation();copyCode(this)">Copy</button>
+            </div>
+            <pre><span class="tok-cmt"># publish a "payments-eu" product and grant it to a principal.</span>
 <span class="tok-cmt"># needs an admin API key (a principal the current policy grants admin).</span>
 curl -X PUT http://localhost:3000/api/enterprise/catalog \
   -H "Authorization: Bearer &lt;ADMIN_API_KEY&gt;" \
@@ -1796,8 +2153,9 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
     },
     "grants": { "alice": ["payments-eu"] }
   }'</pre>
+          </div>
         </div>
-      </div>
+      </details>
     </div>
 
     <!-- ===== Governance: Policies (PolicyEngine snapshot + dry-run) ===== -->
@@ -1809,38 +2167,208 @@ 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">
+            <label>Tenant <span class="form-hint">optional</span></label>
+            <input id="pol-dry-tenant" placeholder="default">
           </div>
-          <div class="form-group" style="margin:0; align-self:end">
+          <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>
+        <button class="pol-subtab" role="tab" aria-controls="pol-pane-batch" data-pol-tab="batch" onclick="polSetTab('batch')">Batch evaluate</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>
+
+      <!-- Batch evaluate sub-tab (P4) — wraps POST /api/policy/dry-run-batch
+           into a UI: subjects × resources × actions multi-select,
+           one click renders a green/red heat-map matrix the user
+           can hover for the per-cell deny reason; "Export CSV"
+           re-hits the same endpoint with Accept: text/csv. -->
+      <div class="card pol-pane" id="pol-pane-batch" role="tabpanel" hidden>
+        <div class="card-header"><h2>Batch evaluate
+          <button class="info" aria-label="About batch evaluate"
+            data-title="Batch evaluate"
+            data-info="Probe the active policy engine for every (subject × resource × action) cell at once. Useful before changing a role to see who would lose/gain access. Capped at 100 × 100 × 10 cells."
+            onclick="infoPop(this)">?</button>
+        </h2></div>
+        <div class="content pol-batch">
+          <div class="pol-batch-form">
+            <div class="form-row">
+              <label for="pol-batch-subjects">Subjects (one role per line; format: <code>label=role1,role2</code>; e.g. <code>alice=viewer</code>):</label>
+              <textarea id="pol-batch-subjects" rows="4" placeholder="alice=viewer&#10;bob=operator,viewer&#10;admin@prod=admin"></textarea>
+            </div>
+            <div class="form-row">
+              <label for="pol-batch-resources">Resources (multi-select):</label>
+              <select id="pol-batch-resources" multiple size="6"></select>
+            </div>
+            <div class="form-row">
+              <label for="pol-batch-actions">Actions (multi-select):</label>
+              <select id="pol-batch-actions" multiple size="4"></select>
+            </div>
+            <div class="form-row" style="display:flex;gap:8px;align-items:center">
+              <button class="btn btn-primary" id="pol-batch-eval-btn" onclick="polBatchEvaluate()">Evaluate</button>
+              <button class="btn btn-sm" id="pol-batch-csv-btn" onclick="polBatchExportCsv()" disabled>Export CSV</button>
+              <span id="pol-batch-totals" class="muted" style="margin-left:auto"></span>
+            </div>
+          </div>
+          <div id="pol-batch-result" class="pol-batch-result"><div class="muted">Pick subjects + resources + actions, then click <b>Evaluate</b>.</div></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 +2466,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 +2511,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>
@@ -2017,48 +2687,1182 @@ function showPage(name) {
   if(name==='access'||name==='products'||name==='audit'||name==='entitlement') loadEnterprise();
   if(name==='products') loadMcpProducts();
   if(name==='policies') loadPolicies();
+  if(name==='postmortems') pmLoadList();
+  if(name==='playground') pgInit();
+}
+
+// --- Playground tab (Q13 / v3.1) ---------------------------------------
+// In-product tool invocation. Picks a tool from /api/tools/registry,
+// POSTs {tool, args} to /api/playground/invoke, renders the raw
+// CallToolResult. RBAC + entitlement + audit live on the server side —
+// the UI just shows whatever comes back.
+
+let PG_TOOLS = [];
+let PG_FILTERED = [];   // flat list of tool names currently shown in the menu (keyboard nav)
+let PG_HL = -1;         // highlighted index into PG_FILTERED
+let PG_COMBO_WIRED = false;
+// Category display order + label. Unknown categories fall into "other"
+// so nothing silently vanishes.
+const PG_CAT_ORDER = ['discovery', 'query', 'diagnose', 'topology', 'federated', 'other'];
+const PG_CAT_LABEL = { discovery:'Discovery', query:'Query', diagnose:'Diagnose', topology:'Topology', federated:'Federated', other:'Other' };
+
+async function pgInit() {
+  if (PG_TOOLS.length) return; // already loaded
+  try {
+    const res = await fetch('/api/tools/registry');
+    PG_TOOLS = (await res.json()).tools || [];
+  } catch (e) {
+    document.getElementById('pg-sel-sum').textContent = 'Failed to load tool catalogue: ' + (e && e.message ? e.message : String(e));
+  }
+  if (!PG_COMBO_WIRED) {
+    // One document-level outside-click closer.
+    document.addEventListener('click', (ev) => {
+      const combo = document.getElementById('pg-combo');
+      if (combo && !combo.contains(ev.target)) pgComboClose();
+    });
+    PG_COMBO_WIRED = true;
+  }
+}
+
+// A tool name with a dot is federated in from an upstream gateway —
+// the prefix is its source; route those into the "federated" group.
+function pgEnrich(t) {
+  const dot = t.name.indexOf('.');
+  return {
+    name: t.name,
+    summary: t.summary || '',
+    category: dot > 0 ? 'federated' : (t.category || 'other'),
+    source: dot > 0 ? t.name.slice(0, dot) : null,
+  };
+}
+
+function pgComboRender(q) {
+  const menu = document.getElementById('pg-combo-menu');
+  const sel = document.getElementById('pg-tool').value;
+  const norm = (q || '').trim().toLowerCase();
+  const showAll = !norm || norm === sel.toLowerCase();
+  const match = (t) => showAll || t.name.toLowerCase().includes(norm) || t.summary.toLowerCase().includes(norm);
+  const byCat = {};
+  PG_TOOLS.map(pgEnrich).filter(match).forEach((t) => { (byCat[t.category] = byCat[t.category] || []).push(t); });
+  const cats = PG_CAT_ORDER.filter((c) => byCat[c]).concat(Object.keys(byCat).filter((c) => !PG_CAT_ORDER.includes(c)));
+  PG_FILTERED = [];
+  let html = '';
+  cats.forEach((cat) => {
+    html += '<div class="pg-grp-hdr">' + escHtml(PG_CAT_LABEL[cat] || cat) + '</div>';
+    byCat[cat].forEach((t) => {
+      const idx = PG_FILTERED.length;
+      PG_FILTERED.push(t.name);
+      html += '<div class="pg-opt' + (t.name === sel ? ' sel' : '') + '" role="option" data-idx="' + idx + '" data-name="' + escHtml(t.name) + '" onclick="pgComboPick(this.dataset.name)">' +
+        '<div class="nm">' + escHtml(t.name) + (t.source ? ' <span class="src">via ' + escHtml(t.source) + '</span>' : '') + '</div>' +
+        '<div class="sm">' + escHtml(t.summary) + '</div>' +
+      '</div>';
+    });
+  });
+  if (!PG_FILTERED.length) html = '<div class="pg-grp-hdr">No matches</div>';
+  menu.innerHTML = html;
+  PG_HL = -1;
+}
+
+function pgComboOpen() {
+  const menu = document.getElementById('pg-combo-menu');
+  pgComboRender(document.getElementById('pg-combo-input').value);
+  menu.hidden = false;
+  document.getElementById('pg-combo-input').setAttribute('aria-expanded', 'true');
+}
+function pgComboClose() {
+  const menu = document.getElementById('pg-combo-menu');
+  if (menu) menu.hidden = true;
+  const inp = document.getElementById('pg-combo-input');
+  if (inp) inp.setAttribute('aria-expanded', 'false');
+}
+function pgComboToggle() {
+  const menu = document.getElementById('pg-combo-menu');
+  if (menu.hidden) { document.getElementById('pg-combo-input').focus(); pgComboOpen(); }
+  else pgComboClose();
+}
+function pgComboFilter(v) { pgComboRender(v); document.getElementById('pg-combo-menu').hidden = false; }
+
+function pgComboPick(name) {
+  document.getElementById('pg-tool').value = name;
+  document.getElementById('pg-combo-input').value = name;
+  const t = PG_TOOLS.find((x) => x.name === name);
+  document.getElementById('pg-sel-sum').textContent = t ? t.summary : '';
+  document.getElementById('pg-run-btn').disabled = false;
+  pgComboClose();
+}
+
+function pgComboKey(e) {
+  const menu = document.getElementById('pg-combo-menu');
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    if (menu.hidden) { pgComboOpen(); return; }
+    if (!PG_FILTERED.length) return;
+    PG_HL = e.key === 'ArrowDown'
+      ? (PG_HL + 1) % PG_FILTERED.length
+      : (PG_HL - 1 + PG_FILTERED.length) % PG_FILTERED.length;
+    const opts = menu.querySelectorAll('.pg-opt');
+    opts.forEach((o) => o.classList.remove('hl'));
+    const cur = menu.querySelector('.pg-opt[data-idx="' + PG_HL + '"]');
+    if (cur) { cur.classList.add('hl'); cur.scrollIntoView({ block: 'nearest' }); }
+  } else if (e.key === 'Enter') {
+    if (!menu.hidden && PG_HL >= 0 && PG_FILTERED[PG_HL]) { e.preventDefault(); pgComboPick(PG_FILTERED[PG_HL]); }
+  } else if (e.key === 'Escape') {
+    pgComboClose();
+  }
+}
+
+function pgFormatArgs() {
+  const el = document.getElementById('pg-args');
+  const err = document.getElementById('pg-args-err');
+  try {
+    el.value = JSON.stringify(JSON.parse(el.value || '{}'), null, 2);
+    err.hidden = true;
+  } catch (e) {
+    err.hidden = false;
+    err.textContent = 'Invalid JSON: ' + (e && e.message ? e.message : e);
+  }
+}
+
+// Last invocation state — drives the view toggle without re-running.
+let PG_LAST = null;   // { raw: <full {tool,result} JSON>, data: <unwrapped payload>, error: <string|null> }
+let PG_VIEW = 'pretty';
+
+async function pgRun() {
+  const sel = document.getElementById('pg-tool');
+  const argsEl = document.getElementById('pg-args');
+  const btn = document.getElementById('pg-run-btn');
+  const card = document.getElementById('pg-result-card');
+  const body = document.getElementById('pg-result-body');
+  const meta = document.getElementById('pg-result-meta');
+  const tool = sel.value || '';
+  if (!tool) { return; }
+  const argErr = document.getElementById('pg-args-err');
+  let args;
+  try {
+    args = argsEl.value.trim() ? JSON.parse(argsEl.value) : {};
+    if (argErr) argErr.hidden = true;
+  } catch (e) {
+    if (argErr) { argErr.hidden = false; argErr.textContent = 'Arguments are not valid JSON: ' + (e && e.message ? e.message : e); }
+    card.hidden = false;
+    meta.textContent = ' · client-side error';
+    PG_LAST = { raw: null, data: null, error: 'Arguments are not valid JSON: ' + (e && e.message ? e.message : e) };
+    pgRenderResult();
+    return;
+  }
+  btn.disabled = true;
+  meta.textContent = ' · running…';
+  card.hidden = false;
+  body.textContent = '';
+  const t0 = Date.now();
+  try {
+    const res = await fetch('/api/playground/invoke', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ tool, args }),
+    });
+    const json = await res.json();
+    meta.textContent = ' · HTTP ' + res.status + ' · ' + (Date.now() - t0) + ' ms';
+    PG_LAST = pgUnwrap(json, res.ok);
+    pgRenderResult();
+  } catch (e) {
+    meta.textContent = ' · network error';
+    PG_LAST = { raw: null, data: null, error: (e && e.message) ? e.message : String(e) };
+    pgRenderResult();
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+// Pull the meaningful payload out of an MCP CallToolResult. Tools return
+// { tool, result:{ content:[{type:'text',text}], isError? } }. The text
+// is usually itself JSON — parse it so we can pretty/table-render it.
+function pgUnwrap(json, httpOk) {
+  if (!httpOk || (json && json.error)) {
+    return { raw: json, data: null, error: (json && (json.error || json.message)) || ('HTTP error') };
+  }
+  const result = json && json.result;
+  let data = result;
+  let error = (result && result.isError) ? 'Tool reported isError' : null;
+  const content = result && result.content;
+  if (Array.isArray(content)) {
+    const text = content.filter(c => c && c.type === 'text' && typeof c.text === 'string').map(c => c.text).join('\n');
+    if (text) {
+      try { data = JSON.parse(text); }
+      catch (e) { data = text; }  // not JSON — show the raw text
+    }
+  }
+  return { raw: json, data, error };
+}
+
+function pgSetView(v) {
+  PG_VIEW = v;
+  document.querySelectorAll('#pg-view-seg button').forEach(b => b.classList.toggle('active', b.dataset.view === v));
+  pgRenderResult();
+}
+
+function pgRenderResult() {
+  const body = document.getElementById('pg-result-body');
+  if (!PG_LAST) { body.textContent = ''; return; }
+  let html = '';
+  if (PG_LAST.error) html += '<div class="pg-err-banner">⚠ ' + escHtml(PG_LAST.error) + '</div>';
+
+  if (PG_VIEW === 'raw' || PG_LAST.raw == null && PG_LAST.data == null) {
+    html += '<pre class="pg-json">' + pgHighlight(PG_LAST.raw != null ? PG_LAST.raw : (PG_LAST.error || '')) + '</pre>';
+  } else if (PG_VIEW === 'table') {
+    const tbl = pgTryTable(PG_LAST.data);
+    html += tbl || ('<div class="muted" style="font-size:13px;margin-bottom:8px">No tabular shape detected — showing Pretty.</div><pre class="pg-json">' + pgHighlight(PG_LAST.data) + '</pre>');
+  } else { // pretty
+    html += '<pre class="pg-json">' + pgHighlight(PG_LAST.data) + '</pre>';
+  }
+  body.innerHTML = html;
+}
+
+// Syntax-highlight a value as pretty JSON. Escapes first (XSS-safe),
+// then wraps tokens in colour spans.
+function pgHighlight(value) {
+  let s;
+  if (typeof value === 'string') s = value;
+  else s = JSON.stringify(value, null, 2);
+  if (typeof s !== 'string') s = String(s);
+  s = escHtml(s);
+  // strings (incl. keys), then numbers / bools / null
+  s = s.replace(/&quot;(\\.|[^&]|&(?!quot;))*?&quot;(\s*:)?/g, (m, _g, colon) =>
+    '<span class="' + (colon ? 'k' : 's') + '">' + m.replace(/(\s*:)$/, '') + '</span>' + (colon || ''));
+  s = s.replace(/\b(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)\b/g, '<span class="n">$1</span>');
+  s = s.replace(/\b(true|false)\b/g, '<span class="b">$1</span>');
+  s = s.replace(/\bnull\b/g, '<span class="z">null</span>');
+  return s;
+}
+
+// Render an array-of-objects (or an object whose first array value is one)
+// as a table. Returns null when nothing tabular is found.
+function pgTryTable(data) {
+  let rows = null;
+  if (Array.isArray(data) && data.length && data.every(r => r && typeof r === 'object' && !Array.isArray(r))) {
+    rows = data;
+  } else if (data && typeof data === 'object') {
+    for (const k of Object.keys(data)) {
+      const v = data[k];
+      if (Array.isArray(v) && v.length && v.every(r => r && typeof r === 'object' && !Array.isArray(r))) { rows = v; break; }
+    }
+  }
+  if (!rows) return null;
+  // Union of keys, preserving first-seen order.
+  const cols = [];
+  rows.forEach(r => Object.keys(r).forEach(k => { if (!cols.includes(k)) cols.push(k); }));
+  const head = '<tr>' + cols.map(c => '<th>' + escHtml(c) + '</th>').join('') + '</tr>';
+  const bodyRows = rows.map(r => '<tr>' + cols.map(c => '<td>' + pgCell(r[c]) + '</td>').join('') + '</tr>').join('');
+  return '<div class="pg-tbl-wrap"><table class="pg-tbl"><thead>' + head + '</thead><tbody>' + bodyRows + '</tbody></table></div>';
+}
+
+// One table cell. Status-like strings get a coloured pill; objects/arrays
+// collapse to compact JSON.
+function pgCell(v) {
+  if (v == null) return '<span class="muted">—</span>';
+  if (typeof v === 'object') return '<span class="muted" style="font-family:var(--mono);font-size:11px">' + escHtml(JSON.stringify(v)) + '</span>';
+  const s = String(v);
+  const cls = { up:'up', healthy:'healthy', ok:'ok', down:'down', error:'error', critical:'crit', crit:'crit', warn:'warn', warning:'warn', degraded:'degraded' }[s.toLowerCase()];
+  if (cls) return '<span class="pill ' + cls + '">' + escHtml(s) + '</span>';
+  return escHtml(s);
+}
+
+function pgCopy() {
+  if (!PG_LAST) return;
+  const text = PG_VIEW === 'raw'
+    ? JSON.stringify(PG_LAST.raw, null, 2)
+    : (typeof PG_LAST.data === 'string' ? PG_LAST.data : JSON.stringify(PG_LAST.data, null, 2));
+  navigator.clipboard.writeText(text).then(() => toast('Copied'), () => toast('Copy failed'));
+}
+
+function pgClear() {
+  document.getElementById('pg-result-card').hidden = true;
+  document.getElementById('pg-result-body').textContent = '';
+  document.getElementById('pg-result-meta').textContent = '';
+  PG_LAST = null;
+}
+
+// --- Postmortems tab (P6) -----------------------------------------------
+// Mirrors the generate_postmortem MCP tool into the UI: list persisted
+// entries newest-first, open a detail view rendering the markdown,
+// regenerate (POST /api/postmortems re-runs the tool with the same
+// service+window), delete (admin-only — the API gates).
+
+let PM_LAST_DETAIL = null;
+
+async function pmLoadList() {
+  const body = document.getElementById('pm-list-body');
+  if (!body) return;
+  body.innerHTML = '<div class="empty">Loading…</div>';
+  try {
+    const r = await fetch('/api/postmortems');
+    if (!r.ok) { body.innerHTML = '<div class="empty">HTTP ' + r.status + '</div>'; return; }
+    const j = await r.json();
+    if (!j.entries || j.entries.length === 0) {
+      body.innerHTML = '<div class="empty">No postmortems yet. Click <b>+ Generate</b> to create one for a service.</div>';
+      return;
+    }
+    let html = '<table class="data-table"><thead><tr><th>When</th><th>Service</th><th>Window</th><th>Synopsis</th><th>By</th><th></th></tr></thead><tbody>';
+    for (const e of j.entries) {
+      html += '<tr>'
+        + '<td>' + escHtml(e.ts) + '</td>'
+        + '<td><code>' + escHtml(e.service) + '</code></td>'
+        + '<td>' + escHtml(e.window) + '</td>'
+        + '<td>' + escHtml((e.synopsis || '').slice(0, 120)) + '</td>'
+        + '<td>' + escHtml(e.createdBy) + '</td>'
+        + '<td><button class="btn btn-sm" onclick="pmOpen(\'' + escHtml(e.id) + '\')">Open</button></td>'
+        + '</tr>';
+    }
+    html += '</tbody></table>';
+    body.innerHTML = html;
+  } catch (e) {
+    body.innerHTML = '<div class="empty">' + escHtml('Load failed: ' + (e?.message || e)) + '</div>';
+  }
+}
+
+async function pmOpen(id) {
+  try {
+    const r = await fetch('/api/postmortems/' + encodeURIComponent(id));
+    if (!r.ok) { alert('HTTP ' + r.status); return; }
+    const j = await r.json();
+    PM_LAST_DETAIL = j;
+    const card = document.getElementById('pm-detail-card');
+    const title = document.getElementById('pm-detail-title');
+    const meta = document.getElementById('pm-detail-meta');
+    const md = document.getElementById('pm-detail-md');
+    title.textContent = j.report.service + ' — ' + j.report.window;
+    meta.textContent = j.ts + ' · by ' + j.createdBy + ' · id ' + j.id;
+    md.textContent = j.report.markdown || '';
+    card.hidden = false;
+    document.getElementById('pm-detail-regen').hidden = false;
+    document.getElementById('pm-detail-delete').hidden = false;
+    card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  } catch (e) { alert('Open failed: ' + (e?.message || e)); }
+}
+
+function pmCloseDetail() {
+  PM_LAST_DETAIL = null;
+  document.getElementById('pm-detail-card').hidden = true;
+}
+
+async function pmOpenNew() {
+  const service = prompt('Service name to generate a postmortem for:');
+  if (!service) return;
+  const duration = prompt('Window (e.g. 1h, 6h):', '1h') || '1h';
+  await pmGenerate(service.trim(), duration.trim());
+}
+
+async function pmGenerate(service, duration) {
+  try {
+    const r = await fetch('/api/postmortems', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ service, duration }),
+    });
+    if (!r.ok) {
+      const text = await r.text();
+      alert('Generate failed: HTTP ' + r.status + (text ? '\n' + text : ''));
+      return;
+    }
+    const stored = await r.json();
+    await pmLoadList();
+    await pmOpen(stored.id);
+  } catch (e) { alert('Generate failed: ' + (e?.message || e)); }
+}
+
+async function pmRegenerate() {
+  if (!PM_LAST_DETAIL) return;
+  await pmGenerate(PM_LAST_DETAIL.report.service, PM_LAST_DETAIL.report.window);
+}
+
+async function pmDelete() {
+  if (!PM_LAST_DETAIL) return;
+  if (!confirm('Delete this postmortem? This cannot be undone.')) return;
+  try {
+    const r = await fetch('/api/postmortems/' + encodeURIComponent(PM_LAST_DETAIL.id), { method: 'DELETE' });
+    if (r.status === 204) { pmCloseDetail(); await pmLoadList(); return; }
+    alert('Delete failed: HTTP ' + r.status);
+  } catch (e) { alert('Delete failed: ' + (e?.message || e)); }
 }
 
 // --- 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();
+  if (name === 'batch') polBatchInit();
+}
+
+// --- Batch evaluate sub-tab (P4) ---
+//
+// One round-trip to POST /api/policy/dry-run-batch with the
+// parsed subjects + selected resources + selected actions.
+// Renders the (subject × resource × action) matrix as a coloured
+// heat-map. CSV export re-hits the same endpoint with
+// `Accept: text/csv` so we never have to format CSV in the UI.
+
+let POL_BATCH_INITED = false;
+let POL_BATCH_LAST = null;
+
+function polBatchInit() {
+  if (POL_BATCH_INITED) return;
+  POL_BATCH_INITED = true;
+  // Reuse POL_RESOURCES + POL_ACTIONS — the same constants the Roles
+  // matrix renders from, kept in sync with VALID_RESOURCES /
+  // VALID_ACTIONS server-side via a CI check.
+  const resSel = document.getElementById('pol-batch-resources');
+  const actSel = document.getElementById('pol-batch-actions');
+  if (resSel) {
+    resSel.innerHTML = POL_RESOURCES.map((r) => '<option value="' + escHtml(r) + '" selected>' + escHtml(r) + '</option>').join('');
+  }
+  if (actSel) {
+    actSel.innerHTML = POL_ACTIONS.map((a) => '<option value="' + escHtml(a) + '" selected>' + escHtml(a) + '</option>').join('');
+  }
+}
+
+function polBatchParseSubjects(text) {
+  const out = [];
+  for (const line of String(text || '').split('\n')) {
+    const t = line.trim();
+    if (!t) continue;
+    const eq = t.indexOf('=');
+    if (eq < 0) continue;
+    const key = t.slice(0, eq).trim();
+    const roles = t.slice(eq + 1).split(',').map((r) => r.trim()).filter(Boolean);
+    if (!key || roles.length === 0) continue;
+    out.push({ key, roles });
+  }
+  return out;
+}
+
+function polBatchBuildRequest() {
+  const subjects = polBatchParseSubjects(document.getElementById('pol-batch-subjects')?.value);
+  const resources = Array.from(document.getElementById('pol-batch-resources')?.selectedOptions || []).map((o) => o.value);
+  const actions = Array.from(document.getElementById('pol-batch-actions')?.selectedOptions || []).map((o) => o.value);
+  return { subjects, resources, actions };
+}
+
+async function polBatchEvaluate() {
+  const body = polBatchBuildRequest();
+  const out = document.getElementById('pol-batch-result');
+  const totals = document.getElementById('pol-batch-totals');
+  const csvBtn = document.getElementById('pol-batch-csv-btn');
+  if (body.subjects.length === 0 || body.resources.length === 0 || body.actions.length === 0) {
+    out.innerHTML = '<div class="empty">Need at least one subject, one resource, and one action.</div>';
+    if (csvBtn) csvBtn.disabled = true;
+    if (totals) totals.textContent = '';
+    return;
+  }
+  out.innerHTML = '<div class="muted">Evaluating…</div>';
+  try {
+    const r = await fetch('/api/policy/dry-run-batch', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!r.ok) {
+      out.innerHTML = '<div class="empty">' + escHtml('Evaluate failed: HTTP ' + r.status) + '</div>';
+      if (csvBtn) csvBtn.disabled = true;
+      return;
+    }
+    const j = await r.json();
+    POL_BATCH_LAST = body;
+    polBatchRender(j, body);
+    if (csvBtn) csvBtn.disabled = false;
+    if (totals) totals.textContent = `${j.totals.cells} cells · ${j.totals.allow} allow · ${j.totals.deny} deny`;
+  } catch (e) {
+    out.innerHTML = '<div class="empty">' + escHtml('Evaluate failed: ' + (e?.message || e)) + '</div>';
+    if (csvBtn) csvBtn.disabled = true;
+  }
+}
+
+function polBatchRender(result, req) {
+  const out = document.getElementById('pol-batch-result');
+  if (!out) return;
+  // Matrix layout: rows = subjects, columns = (resource, action) pairs.
+  // Grouping resources visually keeps the table compact.
+  const rows = req.subjects.map((s) => s.key);
+  const colGroups = req.resources.map((res) => ({ res, actions: req.actions.slice() }));
+  let html = '<div style="overflow:auto;max-height:520px"><table class="pol-heat">';
+  // Resource header row
+  html += '<thead><tr><th rowspan="2" class="row-head">Subject</th>';
+  for (const g of colGroups) html += '<th class="resource-head" colspan="' + g.actions.length + '">' + escHtml(g.res) + '</th>';
+  html += '</tr><tr>';
+  for (const g of colGroups) for (const a of g.actions) html += '<th>' + escHtml(a) + '</th>';
+  html += '</tr></thead><tbody>';
+  for (const sk of rows) {
+    html += '<tr><td class="row-head">' + escHtml(sk) + '</td>';
+    for (const g of colGroups) {
+      for (const a of g.actions) {
+        const cell = result.matrix?.[sk]?.[g.res]?.[a];
+        if (!cell) {
+          html += '<td class="cell-na" title="not evaluated">·</td>';
+        } else if (cell.allowed) {
+          html += '<td class="cell-allow" title="' + escHtml(cell.reason || 'allow') + '">✓</td>';
+        } else {
+          html += '<td class="cell-deny" title="' + escHtml(cell.reason || 'deny') + '">✗</td>';
+        }
+      }
+    }
+    html += '</tr>';
+  }
+  html += '</tbody></table></div>';
+  if (Array.isArray(result.dropped) && result.dropped.length) {
+    html += '<div class="pol-batch-dropped">Dropped: ' +
+      result.dropped.map((d) => escHtml(d.kind + ' ' + d.value + ' (' + d.reason + ')')).join('; ') + '</div>';
+  }
+  out.innerHTML = html;
+}
+
+async function polBatchExportCsv() {
+  if (!POL_BATCH_LAST) return;
+  try {
+    const r = await fetch('/api/policy/dry-run-batch', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', 'accept': 'text/csv' },
+      body: JSON.stringify(POL_BATCH_LAST),
+    });
+    if (!r.ok) { alert('CSV export failed: HTTP ' + r.status); return; }
+    const csv = await r.text();
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'policy-dry-run-' + new Date().toISOString().replace(/[:.]/g, '-') + '.csv';
+    document.body.appendChild(a); a.click(); a.remove();
+    URL.revokeObjectURL(url);
+  } catch (e) {
+    alert('CSV export failed: ' + (e?.message || e));
+  }
+}
+
+// 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 +3870,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>';
   }
@@ -2112,7 +3920,29 @@ function toggleTheme(){
 const _omcpRawFetch = window.fetch.bind(window);
 let _omcpLoginInflight = null;
 let _omcpLoginResolve = null;
+// CSRF double-submit: the server issues a non-HttpOnly omcp-csrf
+// cookie and enforces that mutating /api requests echo it back in
+// X-CSRF-Token. The browser sends the cookie automatically but never
+// the header — so this wrapper reads the cookie and injects the
+// matching header on every state-changing request. Safe methods and
+// cross-origin requests are left untouched.
+function _omcpCsrfToken() {
+  const m = document.cookie.match(/(?:^|;\s*)omcp-csrf=([^;]+)/);
+  return m ? decodeURIComponent(m[1]) : null;
+}
+function _omcpWithCsrf(input, init) {
+  const method = ((init && init.method) || (typeof input === 'object' && input.method) || 'GET').toUpperCase();
+  if (method === 'GET' || method === 'HEAD' || method === 'OPTIONS') return init;
+  const token = _omcpCsrfToken();
+  if (!token) return init;
+  const next = Object.assign({}, init);
+  const headers = new Headers((init && init.headers) || (typeof input === 'object' && input.headers) || {});
+  if (!headers.has('X-CSRF-Token')) headers.set('X-CSRF-Token', token);
+  next.headers = headers;
+  return next;
+}
 window.fetch = async function omcpAuthedFetch(input, init) {
+  init = _omcpWithCsrf(input, init);
   const res = await _omcpRawFetch(input, init);
   if (res.status !== 401) return res;
   let body = null;
@@ -2299,10 +4129,21 @@ async function omcpCheckGovernance() {
     const info = await r.json();
     const g = info && info.governance;
     if (!g) return;
+    const warns = [];
     if (g.authMode === 'basic' && g.authSecretEphemeral) {
+      warns.push('OMCP_SESSION_SECRET is not set — every sign-in will be lost on server restart. Set a stable value in production.');
+    }
+    // P9: plugin signature verification is off — filesystem plugins
+    // load without integrity checks. Production deployments should
+    // turn this back on (VERIFY_PLUGINS=true is the default since
+    // F1, so seeing this banner means an operator opted OUT).
+    if (g.pluginsVerified === false) {
+      warns.push('Plugin signature verification is OFF (VERIFY_PLUGINS=false). Any filesystem plugin can load unchecked. Re-enable for production.');
+    }
+    if (warns.length > 0) {
       const bar = document.getElementById('omcp-warning-bar');
       if (bar) {
-        bar.textContent = '⚠ OMCP_SESSION_SECRET is not set — every sign-in will be lost on server restart. Set a stable value in production.';
+        bar.textContent = '⚠ ' + warns.join(' · ');
         bar.style.display = '';
       }
     }
@@ -3073,14 +4914,261 @@ 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();
+}
+
+// Legacy-catalog disclosure: persist open/closed so an operator who
+// actually uses the deprecated catalog isn't re-expanding it every
+// visit. Default closed (the <details> has no `open` attribute).
+function pgLegacyPersist(el) {
+  try { localStorage.setItem('omcp-legacy-catalog-open', el.open ? '1' : '0'); } catch (e) { /* noop */ }
+}
+function pgLegacyRestore() {
+  const el = document.getElementById('ent-legacy');
+  if (!el) return;
+  try { el.open = localStorage.getItem('omcp-legacy-catalog-open') === '1'; } 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() {
+  pgLegacyRestore();
   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 +5182,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 +5496,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 +5720,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 +5752,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 +5957,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 +5996,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 +6059,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)});
@@ -4334,7 +6715,10 @@ function renderTopologyGraph(){
     const r = idx.byId.get(id);
     const base = topoKindColor(r ? r.kind : 'scope');
     // soft alpha + slightly lighter
-    return base.replace(/^#/, '#') + '22'; // append alpha (works because we use hex)
+    // `base` already starts with `#` from topoKindColor; just append
+    // a 1-byte alpha to get an 8-digit hex CSS colour. The dead
+    // `.replace(/^#/, '#')` step from an earlier refactor is gone.
+    return base + '22';
   };
   const scopeBands = [];
   for (const scopeId of pureScope){