@thotischner/observability-mcp 3.0.0 → 3.0.1

package/dist/ui/index.html

@@ -937,16 +937,23 @@
     .view-toggle button.active { background: var(--accent-soft); color: var(--accent); }
     .view-toggle button:hover { color: var(--text); }
 
-    /* Products — leitfaden card */
-    .leitfaden-chev { display: inline-block; transition: transform .15s ease; font-size: .85em; opacity: .7; }
-    #mcp-products-leitfaden.collapsed .leitfaden-chev { transform: rotate(-90deg); }
-    #mcp-products-leitfaden.collapsed #mcp-leitfaden-body { display: none; }
-    .leitfaden-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-4); }
-    .leitfaden-grid h3 { font-size: 13px; font-weight: 600; margin: 0 0 var(--sp-2); }
-    .leitfaden-grid p { margin: 0 0 var(--sp-2); line-height: 1.5; }
-    .leitfaden-grid pre { background: var(--surface-2); padding: var(--sp-2); border-radius: var(--radius-sm); font-size: 11px; overflow-x: auto; }
-    .leitfaden-grid code { font-size: .92em; }
-    @media (max-width: 900px) { .leitfaden-grid { grid-template-columns: 1fr; } }
+    /* 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); }
@@ -1039,6 +1046,25 @@
       .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"],
@@ -1365,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>
@@ -1383,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">
@@ -1884,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">
@@ -1892,55 +2065,14 @@ 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>
-        </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. -->
-      <!-- Inline leitfaden — collapsed by default once the operator
-           dismisses it; re-opens by clicking the chevron. -->
-      <div class="card" id="mcp-products-leitfaden">
-        <div class="card-header" style="cursor:pointer" onclick="mcpLeitfadenToggle()">
-          <h2 style="display:flex;align-items:center;gap:.5rem">
-            <span class="leitfaden-chev" id="mcp-leitfaden-chev">▾</span>
-            About Products
-          </h2>
-          <span class="t-sm" style="opacity:.7">click to collapse</span>
-        </div>
-        <div id="mcp-leitfaden-body">
-          <div class="leitfaden-grid">
-            <div>
-              <h3>What is a product?</h3>
-              <p class="t-sm">A curated, named bundle of MCP tools you expose to one agent. The bundle's <code>tools</code> allow-list filters <code>tools/list</code> at the <code>/mcp</code> transport, so an agent bound to <em>Ops Bundle</em> sees only the operations tools and not the developer tools.</p>
-            </div>
-            <div>
-              <h3>When do I need one?</h3>
-              <p class="t-sm">Whenever more than one agent connects. Each team / use-case gets its own product — SRE on-call vs coding assistant vs compliance auditor. Without a product the credential sees every registered tool, which is fine for a single-operator demo but not for a production multi-agent deployment.</p>
-            </div>
-            <div>
-              <h3>How do agents pick one up?</h3>
-              <p class="t-sm">Bind a credential to a product via <code>OMCP_KEY_PRODUCTS</code>:</p>
-              <pre style="margin:.25rem 0"><code>OMCP_API_KEYS="agent:tok_ops,ci:tok_dev"
-OMCP_KEY_PRODUCTS="agent=ops-bundle;ci=dev-bundle"</code></pre>
-              <p class="t-sm">The next <code>/mcp</code> session of <code>agent</code> sees only the tools in <code>ops-bundle</code>. <a href="https://github.com/ThoTischner/observability-mcp/blob/main/docs/products.md" target="_blank" rel="noreferrer">Full docs →</a></p>
-            </div>
-          </div>
+          <p class="ph-sub">Curated, governed tool bundles you expose to an agent or credential.</p>
         </div>
       </div>
 
+      <!-- Primary surface: MCP Products via /api/products (RBAC-gated). -->
       <div class="card" id="mcp-products-card">
         <div class="card-header">
           <h2>MCP Products
@@ -1959,38 +2091,54 @@ OMCP_KEY_PRODUCTS="agent=ops-bundle;ci=dev-bundle"</code></pre>
           </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;" \
@@ -2005,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) ===== -->
@@ -2077,6 +2226,7 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
         <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
@@ -2176,6 +2326,42 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
         <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
@@ -2501,6 +2687,401 @@ 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) ---
@@ -2568,6 +3149,150 @@ function polSetTab(name) {
   // 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.
@@ -3195,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;
@@ -3382,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 = '';
       }
     }
@@ -4167,22 +4925,16 @@ function mcpProductsSetView(v) {
   loadMcpProducts();
 }
 
-// Leitfaden collapse state. Default expanded on first visit; once
-// the user collapses it the choice sticks. Idempotent — safe to
-// call before the DOM is ready (no-ops if the card isn't present).
-function mcpLeitfadenSync() {
-  const card = document.getElementById('mcp-products-leitfaden');
-  if (!card) return;
-  let collapsed = false;
-  try { collapsed = localStorage.getItem('omcp-mcp-leitfaden-collapsed') === '1'; } catch (e) { /* noop */ }
-  card.classList.toggle('collapsed', collapsed);
+// 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 mcpLeitfadenToggle() {
-  const card = document.getElementById('mcp-products-leitfaden');
-  if (!card) return;
-  const nextCollapsed = !card.classList.contains('collapsed');
-  card.classList.toggle('collapsed', nextCollapsed);
-  try { localStorage.setItem('omcp-mcp-leitfaden-collapsed', nextCollapsed ? '1' : '0'); } catch (e) { /* noop */ }
+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
@@ -4404,7 +5156,7 @@ function mcpProductEmptyHtml(configured) {
 }
 
 async function loadMcpProducts() {
-  mcpLeitfadenSync();
+  pgLegacyRestore();
   const box = document.getElementById('mcp-products-box');
   const scope = document.getElementById('mcp-products-scope');
   if (!box) return;
@@ -5963,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){