@thotischner/observability-mcp 3.6.1 → 3.8.0

package/dist/ui/index.html

@@ -1392,11 +1392,66 @@
       filter: drop-shadow(0 0 4px var(--accent-soft));
     }
 
+    /* ===== Inspect — flow graph ===== */
+    #inspect-graph-svg:focus { outline: none; }
+    #inspect-graph-svg g[data-id]:focus { outline: none; }
+    #inspect-graph-svg g[data-id]:focus-visible .inode {
+      stroke: var(--accent); stroke-width: 3;
+      filter: drop-shadow(0 0 5px var(--accent-soft));
+    }
+    #inspect-graph-svg .iedge { fill: none; transition: opacity var(--t-fast); }
+    /* Animated traffic dash — a subtle "flow" along live (allowed) edges.
+       Disabled under reduced-motion + when the graph is paused. */
+    #inspect-graph-svg .iedge.flow {
+      stroke-dasharray: 2 6;
+      animation: inspect-flow 1s linear infinite;
+    }
+    #inspect-graph-svg.paused .iedge.flow { animation: none; }
+    @keyframes inspect-flow { to { stroke-dashoffset: -8; } }
+    @media (prefers-reduced-motion: reduce) {
+      #inspect-graph-svg .iedge.flow { animation: none; }
+    }
+    #inspect-graph-svg .inode { cursor: pointer; transition: opacity var(--t-fast); }
+    #inspect-graph-svg .ilabel { font-size: 11px; fill: var(--text-muted); pointer-events: none; user-select: none; }
+    #inspect-graph-svg .icol-label { font-size: 10px; fill: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; pointer-events: none; }
+    #inspect-graph-svg .dim { opacity: 0.18; }
+    .inspect-kv { display:grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0; }
+    .inspect-kv dt { color: var(--text-dim); }
+    .inspect-kv dd { margin: 0; color: var(--text); font-family: var(--font-mono, monospace); }
+
+    /* ===== Governance — clarifying subtitles + overview flow ===== */
+    .gov-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; max-width: 70ch; line-height: 1.5; }
+    .gov-sub em { color: var(--text); font-style: normal; font-weight: 600; }
+    .gov-overview { background: var(--surface); }
+    .gov-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
+    .gov-step { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 120px; }
+    .gov-step b { font-size: var(--fs-md); color: var(--text); }
+    .gov-step small { font-size: var(--fs-xs); color: var(--text-muted); }
+    .gov-arrow { align-self: center; color: var(--text-dim); font-size: var(--fs-lg); }
+
+    /* ===== Inspect — granular rule editor chips ===== */
+    .rule-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+    .rule-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); cursor: pointer; background: var(--surface-2); }
+    .rule-chip input { margin: 0; }
+
     /* ===== 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; }
+    .pg-seg button.locked { color:var(--text-dim); }
+    /* Entitlement lock optic — consistent across every enterprise feature.
+       The nav badge sits after the label; the page banner explains the lock. */
+    .nav-btn .ent-lock { margin-left:auto; font-size:11px; opacity:.65; flex:0 0 auto; }
+    .nav-btn.ent-locked .nav-label { opacity:.7; }
+    .ent-banner { display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:11px 14px;
+      border:1px solid var(--border); border-left:3px solid var(--accent,#6b8afd);
+      background:var(--surface-2,var(--surface)); border-radius:6px; font-size:var(--fs-sm,13px); }
+    .ent-banner .ent-banner-ico { font-size:15px; line-height:1.3; flex:0 0 auto; }
+    .ent-banner b { color:var(--text); }
+    .ent-banner .ent-banner-body { color:var(--text-2,var(--text)); }
+    .ent-banner code { font-family:var(--mono); font-size:12px; background:var(--bg); padding:1px 5px; border-radius:3px; }
+    .pol-subtab .ent-lock { margin-left:5px; font-size:10px; opacity:.65; }
     /* 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); }
@@ -1467,6 +1522,7 @@
           <button class="nav-btn" data-page="access" title="Access Control" onclick="showPage('access')"><span class="nav-ico">⛨</span><span class="nav-label">Access Control</span></button>
           <button class="nav-btn" data-page="policies" title="Policies" onclick="showPage('policies')" data-rbac="users:delete"><span class="nav-ico">≣</span><span class="nav-label">Policies</span></button>
           <button class="nav-btn" data-page="audit" title="Audit Log" onclick="showPage('audit')"><span class="nav-ico">❒</span><span class="nav-label">Audit Log</span></button>
+          <button class="nav-btn" data-page="inspect" title="Inspect" onclick="showPage('inspect')"><span class="nav-ico">◉</span><span class="nav-label">Inspect</span></button>
         </div>
       </div>
       <div class="rail-grp" data-grp="system">
@@ -1521,6 +1577,19 @@
        ephemeral session secret case). -->
   <div id="omcp-warning-bar" class="omcp-warning-bar" style="display:none" role="alert"></div>
 
+  <!-- Inspect: granular rule editor — toggle which observed values/buckets a rule allows -->
+  <div class="modal-overlay" id="inspect-rule-modal">
+    <div class="modal" style="width:min(620px,92vw)">
+      <div class="modal-header"><h3 id="inspect-rule-modal-title">Edit rule</h3><button class="btn-icon" onclick="closeModal('inspect-rule-modal')">&times;</button></div>
+      <div class="modal-body" id="inspect-rule-modal-body"></div>
+      <div class="modal-footer">
+        <button class="btn" onclick="closeModal('inspect-rule-modal')">Cancel</button>
+        <button class="btn" onclick="inspectSaveRule(false)">Save</button>
+        <button class="btn btn-primary" onclick="inspectSaveRule(true)">Save &amp; accept</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Login modal — shown when /api/* returns 401 OMCP_AUTH_REQUIRED -->
   <div class="modal-overlay" id="login-modal">
     <div class="modal" style="width:380px;">
@@ -1785,6 +1854,119 @@
       </div>
     </div>
 
+    <!-- ===== Inspect ===== -->
+    <div class="page" id="page-inspect">
+      <div class="page-head">
+        <div class="ph-left">
+          <div class="breadcrumb">Console / Governance / <b>Inspect</b></div>
+          <h1>Inspect — agent activity</h1>
+          <div class="gov-sub">Whether a call is <em>normal</em> vs. the learned baseline for that identity — behavioral guardrails. Distinct from <b>Policies</b> (allowed at all).</div>
+        </div>
+        <div class="ph-actions">
+          <span id="inspect-mode-chip" class="stchip" title="Current inspection mode">…</span>
+          <label class="muted" style="display:flex; gap:6px; align-items:center; font-size: var(--fs-sm);">
+            Window
+            <select id="inspect-window" onchange="loadInspectFlows(true)" style="background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 8px;">
+              <option value="5m">5m</option>
+              <option value="1h" selected>1h</option>
+              <option value="24h">24h</option>
+            </select>
+          </label>
+          <button id="inspect-live-btn" class="btn btn-sm" onclick="toggleInspectLive()" title="Pause / resume live updates">⏸ Live</button>
+          <button class="btn btn-sm" onclick="loadInspectFlows(true)">Refresh</button>
+        </div>
+      </div>
+      <div class="tabs">
+        <button class="tab-btn active" onclick="showInspectTab('flows')">Flows</button>
+        <button class="tab-btn" onclick="showInspectTab('profile')">Profile</button>
+        <button class="tab-btn" onclick="showInspectTab('deviations')">Deviations</button>
+      </div>
+      <div id="inspect-tab-flows" class="tab-content active">
+        <div class="card">
+          <div class="card-header">
+            <h2>Flows <span class="muted t-xs" style="font-weight:400;">identities → tools → backends · edge width = call volume · colour = allowed / deviation / blocked</span></h2>
+            <span id="inspect-flow-stat" class="muted t-xs"></span>
+          </div>
+          <div style="display:grid; grid-template-columns: 1fr 340px; gap: 0; border-top: 1px solid var(--border); height: 660px;">
+            <div id="inspect-graph-host" style="position:relative; overflow:hidden; background: var(--surface-2); border-right: 1px solid var(--border);">
+              <svg id="inspect-graph-svg" style="position:absolute; inset:0; width:100%; height:100%; cursor: grab;" tabindex="0" role="application" aria-label="Flow graph — Tab through nodes, Enter to inspect, Esc to clear"></svg>
+              <div class="topo-controls" role="toolbar" aria-label="Graph zoom">
+                <button class="btn-icon" title="Zoom in (or wheel up)" aria-label="Zoom in" onclick="inspectZoom(1.2)">+</button>
+                <button class="btn-icon" title="Zoom out (or wheel down)" aria-label="Zoom out" onclick="inspectZoom(1/1.2)">−</button>
+                <button class="btn-icon" title="Reset view" aria-label="Reset view" onclick="inspectResetView()">⤾</button>
+              </div>
+              <div class="topo-hint">Tab to focus · Enter to inspect · arrows to move focus · Esc to clear</div>
+              <div id="inspect-graph-legend" style="position:absolute; bottom:10px; left:10px; font-size: var(--fs-xs); padding:8px 10px; background: var(--surface); border:1px solid var(--border); border-radius: 6px;"></div>
+              <div id="inspect-graph-empty" class="empty" style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;">Loading flows…</div>
+            </div>
+            <aside id="inspect-inspector" style="background: var(--surface); padding: 16px; overflow-y: auto; font-size: var(--fs-sm);">
+              <div id="inspect-inspector-empty" class="empty" style="margin: 24px 0;">Select a node or edge on the left to inspect its calls, argument shapes and posture.</div>
+              <div id="inspect-inspector-body" style="display:none;"></div>
+            </aside>
+          </div>
+        </div>
+      </div>
+      <div id="inspect-tab-profile" class="tab-content">
+        <div class="card" style="margin-bottom:8px; padding:12px 14px;">
+          <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
+            <div>
+              <div style="font-weight:600;">Mode</div>
+              <div class="muted t-xs" id="inspect-mode-desc">…</div>
+            </div>
+            <div class="pg-seg" id="inspect-mode-seg" role="group" aria-label="Inspection mode">
+              <button data-mode="observe" onclick="inspectSetMode('observe')">Observe</button>
+              <button data-mode="dryrun" onclick="inspectSetMode('dryrun')">Dry-run</button>
+              <button data-mode="enforce" onclick="inspectRequestEnforce()">Enforce</button>
+            </div>
+          </div>
+          <div id="inspect-enforce-confirm" style="display:none; margin-top:10px; padding:10px 12px; border:1px solid var(--danger); background:var(--danger-soft); border-radius:6px;">
+            <div id="inspect-enforce-msg" style="margin-bottom:8px; font-size:var(--fs-sm);"></div>
+            <div style="display:flex; gap:8px;">
+              <button class="btn btn-sm btn-danger" id="inspect-enforce-go" onclick="inspectSetMode('enforce', true)">Enforce — block deviations</button>
+              <button class="btn btn-sm" onclick="inspectCancelEnforce()">Cancel</button>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h2>Behavior profile <span class="muted t-xs" style="font-weight:400;">learn a baseline from observed traffic, then accept the rules that look right</span></h2>
+            <div style="display:flex; gap:8px; align-items:center;">
+              <span id="inspect-profile-counts" class="muted t-xs"></span>
+              <button class="btn btn-sm btn-primary" onclick="inspectDerive()" title="Derive suggested rules from the observed window">Learn from traffic</button>
+            </div>
+          </div>
+          <div style="padding: 0 16px 16px;">
+            <div style="margin: 4px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:8px;">
+              <h3 style="font-size: var(--fs-md); margin:0;">Review queue <span class="muted t-xs" id="inspect-sugg-count"></span></h3>
+              <div id="inspect-sugg-bulk" style="display:none; gap:6px;">
+                <button class="btn btn-sm" onclick="inspectBulk('accepted')">Accept all</button>
+                <button class="btn btn-sm btn-ghost" onclick="inspectBulk('rejected')">Reject all</button>
+              </div>
+            </div>
+            <div id="inspect-review-queue"><div class="empty" style="margin: 16px 0;">No suggestions yet. Click <b>Learn from traffic</b> to derive rules from what agents have actually done.</div></div>
+
+            <h3 style="font-size: var(--fs-md); margin: 20px 0 8px;">Accepted rules <span class="muted t-xs" id="inspect-acc-count"></span></h3>
+            <div id="inspect-accepted-rules"><div class="empty" style="margin: 16px 0;">No accepted rules yet. Accept suggestions above to build the enforceable profile.</div></div>
+
+            <h3 style="font-size: var(--fs-md); margin: 20px 0 8px;">Rejected rules <span class="muted t-xs" id="inspect-rej-count"></span></h3>
+            <div id="inspect-rejected-rules"><div class="empty" style="margin: 16px 0;">No rejected rules. Rejected suggestions are kept here (not deleted) and won't reappear in the review queue on re-learn — restore one anytime.</div></div>
+          </div>
+        </div>
+      </div>
+      <div id="inspect-tab-deviations" class="tab-content">
+        <div class="card">
+          <div class="card-header">
+            <h2>Deviations <span class="muted t-xs" style="font-weight:400;">calls outside the accepted profile — would-block in dry-run, blocked in enforce</span></h2>
+            <div style="display:flex; gap:8px; align-items:center;">
+              <span id="inspect-dev-stat" class="muted t-xs"></span>
+              <button class="btn btn-sm" onclick="inspectLoadDeviations()">Refresh</button>
+            </div>
+          </div>
+          <div id="inspect-deviations" style="padding:0 16px 16px;"><div class="empty" style="margin:16px 0;">Switch to <b>Dry-run</b> and accept some rules — calls that fall outside them show up here as “would-block”, so you can verify the profile before enforcing.</div></div>
+        </div>
+      </div>
+    </div>
+
     <!-- ===== Settings ===== -->
     <div class="page" id="page-settings">
       <div class="page-head">
@@ -1904,9 +2086,24 @@
         <div class="ph-left">
           <div class="breadcrumb">Console / Governance / <b>Access Control</b></div>
           <h1>Access Control</h1>
+          <div class="gov-sub">Who can sign in and which role they hold — identities, SSO/OIDC, sessions. <em>Authentication.</em></div>
         </div>
         <div class="ph-actions"><button class="btn btn-primary btn-sm" onclick="entEditNew('rbac')">+ New role</button><button class="btn btn-sm" id="ent-rbac-editbtn" onclick="entEditOpen('rbac')">Edit policy</button></div>
       </div>
+      <div class="ent-banner" data-ent-feature="access-control" style="display:none">
+        <span class="ent-banner-ico">🔒</span>
+        <div class="ent-banner-body"><b>Enterprise feature.</b> Enforcing role-based access control requires an entitlement (<code>access-control</code>). You can review the configuration freely; rules only take effect with a license. <a href="#" onclick="showPage('entitlement');return false;">View entitlement →</a></div>
+      </div>
+      <div class="card gov-overview">
+        <div class="card-header"><h2>How governance fits together</h2></div>
+        <div class="gov-flow">
+          <span class="gov-step"><b>Access Control</b><small>who you are</small></span><span class="gov-arrow">→</span>
+          <span class="gov-step"><b>Products</b><small>what you're offered</small></span><span class="gov-arrow">→</span>
+          <span class="gov-step"><b>Policies</b><small>what you're allowed</small></span><span class="gov-arrow">→</span>
+          <span class="gov-step"><b>Inspect</b><small>is it normal</small></span>
+        </div>
+        <div class="muted t-xs" style="margin-top:8px;">Each layer answers a different question. <b>Catalog</b> runs alongside, adding resource context (owners, criticality). <b>Audit Log</b> records every change. <b>Policies</b> = allowed at all (static); <b>Inspect</b> = normal vs. the learned baseline (behavioral).</div>
+      </div>
       <div class="card">
         <div class="card-header"><h2>Roles &amp; bindings
           <button class="info" aria-label="About roles and bindings"
@@ -2069,8 +2266,13 @@ curl -X PUT http://localhost:3000/api/enterprise/policy \
               onclick="infoPop(this)">?</button>
           </h1>
           <p class="ph-sub">Curated, governed tool bundles you expose to an agent or credential.</p>
+          <div class="gov-sub">Which tools a credential is <em>offered</em> (packaging). Distinct from <b>Policies</b>, which decide what's <em>permitted</em>.</div>
         </div>
       </div>
+      <div class="ent-banner" data-ent-feature="access-control" style="display:none">
+        <span class="ent-banner-ico">🔒</span>
+        <div class="ent-banner-body"><b>Enterprise feature.</b> Governed context products are enforced with an entitlement (<code>access-control</code>). You can define products here; the binding only filters <code>tools/list</code> with a license. <a href="#" onclick="showPage('entitlement');return false;">View entitlement →</a></div>
+      </div>
 
       <!-- Primary surface: MCP Products via /api/products (RBAC-gated). -->
       <div class="card" id="mcp-products-card">
@@ -2164,9 +2366,14 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
         <div class="ph-left">
           <div class="breadcrumb">Console / Governance / <b>Policies</b></div>
           <h1>Policies</h1>
+          <div class="gov-sub">What a role is <em>allowed</em> to call at all — coarse RBAC (resource × action). Distinct from <b>Inspect</b>, which judges whether a call is <em>normal</em>.</div>
         </div>
         <div class="ph-actions"><span id="pol-engine" class="badge"></span></div>
       </div>
+      <div class="ent-banner" data-ent-feature="access-control" style="display:none">
+        <span class="ent-banner-ico">🔒</span>
+        <div class="ent-banner-body"><b>Enterprise feature.</b> The policy engine enforces verdicts with an entitlement (<code>access-control</code>). Roles and bindings are editable here; they only gate calls with a license. <a href="#" onclick="showPage('entitlement');return false;">View entitlement →</a></div>
+      </div>
 
       <!-- Engine banner — colour + copy distinguishes editable file
            vs read-only builtin / opa modes at a glance. -->
@@ -2330,6 +2537,10 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
       <!-- Provisioning sub-tab (C2b) — read-only view of the SCIM-provisioned
            Users/Groups an identity provider has pushed via /scim/v2. -->
       <div class="card pol-pane" id="pol-pane-provisioning" role="tabpanel" hidden>
+        <div class="ent-banner" data-ent-feature="scim" style="display:none">
+          <span class="ent-banner-ico">🔒</span>
+          <div class="ent-banner-body"><b>Enterprise feature.</b> SCIM 2.0 provisioning requires an entitlement (<code>scim</code>). With <code>OMCP_SCIM_TOKEN</code> set but unlicensed, the <code>/scim/v2</code> routes are not mounted (fail-closed). <a href="#" onclick="showPage('entitlement');return false;">View entitlement →</a></div>
+        </div>
         <div class="card-header"><h2>Provisioning
           <button class="info" aria-label="About provisioning"
             data-title="SCIM provisioning"
@@ -2394,9 +2605,14 @@ curl -X PUT http://localhost:3000/api/enterprise/catalog \
         <div class="ph-left">
           <div class="breadcrumb">Console / Governance / <b>Audit Log</b></div>
           <h1>Audit Log</h1>
+          <div class="gov-sub">An append-only, tamper-evident record of every mutating action — who did what, when.</div>
         </div>
         <div class="ph-actions"><span id="ent-chain"></span></div>
       </div>
+      <div class="ent-banner" data-ent-feature="audit" style="display:none">
+        <span class="ent-banner-ico">🔒</span>
+        <div class="ent-banner-body"><b>Enterprise feature.</b> The tamper-evident audit log requires an entitlement (<code>audit</code>). Without it, decisions are not recorded to the hash-chained sink. <a href="#" onclick="showPage('entitlement');return false;">View entitlement →</a></div>
+      </div>
       <div class="card">
         <div class="card-header"><h2>Recent decisions
           <button class="info" aria-label="About the audit log"
@@ -2705,6 +2921,7 @@ function showPage(name) {
   if(name==='policies') loadPolicies();
   if(name==='postmortems') pmLoadList();
   if(name==='playground') pgInit();
+  if(name==='inspect') inspectInit();
 }
 
 // --- Playground tab (Q13 / v3.1) ---------------------------------------
@@ -7341,10 +7558,46 @@ function loadingBlock(label) {
 }
 async function refresh(){await Promise.all([loadSources(),loadServices(),loadDashUsage()]);}
 
+// Entitlement lock optic. /api/info.governance.entitlements is a flat
+// { feature: bool } map; all false on the OSS default. We render a consistent
+// 🔒 badge + explanatory banner on every entitled feature so the enterprise
+// surface reads as "visible but locked" rather than silently inert. Purely
+// informational — the real enforcement is server-side and fail-closed.
+window.__entitlements = window.__entitlements || {};
+function omcpFeatureLocked(feature){ return !window.__entitlements[feature]; }
+// nav-rail page → required feature
+const ENT_NAV_FEATURES = { products:'access-control', access:'access-control', policies:'access-control', audit:'audit' };
+function applyEntitlementLocks(gov){
+  window.__entitlements = (gov && gov.entitlements) || {};
+  // 1. Nav-rail badges.
+  for(const page in ENT_NAV_FEATURES){
+    const btn=document.querySelector(`.nav-btn[data-page="${page}"]`);
+    if(!btn) continue;
+    const locked=omcpFeatureLocked(ENT_NAV_FEATURES[page]);
+    btn.classList.toggle('ent-locked', locked);
+    let lk=btn.querySelector('.ent-lock');
+    if(locked && !lk){ lk=document.createElement('span'); lk.className='ent-lock'; lk.textContent='🔒'; lk.setAttribute('aria-label','Enterprise feature — requires an entitlement'); lk.title='Enterprise feature — requires an entitlement'; btn.appendChild(lk); }
+    else if(!locked && lk){ lk.remove(); }
+  }
+  // 2. Page / sub-tab banners (declarative: any [data-ent-feature]).
+  document.querySelectorAll('.ent-banner[data-ent-feature]').forEach(el=>{
+    el.style.display=omcpFeatureLocked(el.getAttribute('data-ent-feature'))?'flex':'none';
+  });
+  // 3. Provisioning sub-tab badge (SCIM).
+  const provTab=document.querySelector('.pol-subtab[data-pol-tab="provisioning"]');
+  if(provTab){
+    const locked=omcpFeatureLocked('scim');
+    let lk=provTab.querySelector('.ent-lock');
+    if(locked && !lk){ lk=document.createElement('span'); lk.className='ent-lock'; lk.textContent='🔒'; provTab.appendChild(lk); }
+    else if(!locked && lk){ lk.remove(); }
+  }
+}
+
 async function loadInfo(){
   try{
     const r=await fetch('/api/info'); if(!r.ok) return;
     const d=await r.json();
+    try{ applyEntitlementLocks(d.governance); }catch(e){/* lock optic is best-effort */}
     const footer=document.getElementById('info-footer');
     if(!footer) return;
     const plugins=(d.plugins||[]).map(p=>`<span class="footer-pill">${esc(p.name)}<span class="footer-pill-meta">${esc(p.source)}${p.version?` · ${esc(p.version)}`:''}</span></span>`).join('');
@@ -7364,6 +7617,495 @@ async function loadInfo(){
 // Show the endpoint the user is actually reaching the server through
 // (localhost, a port-forward, or an ingress) — not a hardcoded host.
 document.getElementById('mcp-url').textContent = window.location.origin + '/mcp';
+// ===== Inspect — Flows live graph =====
+let inspectStarted=false, inspectLive=true, inspectTimer=null, inspectData=null, inspectRev='', inspectSel=null;
+const inspectView={tx:0,ty:0,scale:1};
+const INSPECT_COL={identity:170,tool:500,backend:830};
+const INSPECT_NODE_W=150, INSPECT_ROW_H=46, INSPECT_PAD_TOP=46;
+
+function inspectInit(){
+  if(!inspectStarted){
+    inspectStarted=true;
+    wireInspectGraph();
+    // Delegated handler for profile rule actions (data-rule + data-act) — keeps
+    // user-derived rule ids out of inline onclick (XSS-safe).
+    const ptab=document.getElementById('inspect-tab-profile');
+    if(ptab) ptab.addEventListener('click',(ev)=>{ const b=ev.target.closest('button[data-rule]'); if(!b) return; const id=b.getAttribute('data-rule'), act=b.getAttribute('data-act'); if(act==='edit') inspectOpenRuleEditor(id); else inspectRuleAction(id, act); });
+    // Self-checking poll: only refreshes while the tab is active AND live.
+    inspectTimer=setInterval(()=>{
+      if(document.getElementById('page-inspect').classList.contains('active') && inspectLive) loadInspectFlows(false);
+    }, 2500);
+  }
+  loadInspectFlows(true);
+}
+
+function showInspectTab(name){
+  document.querySelectorAll('#page-inspect .tab-btn').forEach(b=>b.classList.remove('active'));
+  document.querySelectorAll('#page-inspect .tab-content').forEach(c=>c.classList.remove('active'));
+  const btn=[...document.querySelectorAll('#page-inspect .tab-btn')].find(b=>b.textContent.trim().toLowerCase()===name);
+  if(btn) btn.classList.add('active');
+  const c=document.getElementById('inspect-tab-'+name); if(c) c.classList.add('active');
+  if(name==='profile'){ inspectRefreshMode(); inspectLoadProfile(); }
+  if(name==='deviations') inspectLoadDeviations();
+}
+
+const INSPECT_MODE_DESC={
+  off:'Disabled — no recording.',
+  observe:'Recording only — every tool call is captured; nothing is evaluated or blocked.',
+  dryrun:'Evaluating against accepted rules — deviations are flagged (see Deviations) but still allowed.',
+  enforce:'Enforcing — calls outside the accepted profile are blocked.'
+};
+
+async function inspectRefreshMode(){
+  try{ const r=await fetch('/api/inspect/mode'); if(r.ok) updateInspectModeChip(await r.json()); }catch(e){}
+}
+
+async function inspectSetMode(mode, confirmed){
+  // Enforce is destructive (it blocks live tool calls) — gate behind a confirm
+  // that shows how many calls would have been blocked recently.
+  if(mode==='enforce' && !confirmed){ inspectRequestEnforce(); return; }
+  inspectCancelEnforce();
+  try{
+    const r=await fetch('/api/inspect/mode',{method:'PUT',headers:{'content-type':'application/json'},body:JSON.stringify({mode})});
+    if(!r.ok){ let msg='Mode change failed'; try{ const e=await r.json(); if(e&&e.error) msg=e.error; }catch(_){} toast(msg,'error'); return; }
+    const j=await r.json();
+    toast('Inspection mode: '+(j.mode||mode),'ok');
+    inspectRefreshMode();
+    if(document.getElementById('inspect-tab-deviations').classList.contains('active')) inspectLoadDeviations();
+  }catch(e){ toast('Mode change failed','error'); }
+}
+
+async function inspectRequestEnforce(){
+  const msg=document.getElementById('inspect-enforce-msg');
+  const go=document.getElementById('inspect-enforce-go');
+  // Enforce (active blocking) is an entitled control — show an Enterprise
+  // notice instead of the confirm action when unlicensed.
+  if(window.__inspectEnforceEntitled===false){
+    msg.innerHTML='🔒 <b>Enforce is an Enterprise feature.</b> Blocking out-of-profile calls requires an entitlement (inspect-enforce). <b>Observe</b> and <b>Dry-run</b> — including the live graph, learning, and would-block deviations — are available without a license.';
+    if(go) go.style.display='none';
+    document.getElementById('inspect-enforce-confirm').style.display='block';
+    return;
+  }
+  if(go) go.style.display='';
+  let accepted=0, wouldBlock=0;
+  try{ const p=await fetch('/api/inspect/profile'); if(p.ok){ const j=await p.json(); accepted=(j.counts&&j.counts.accepted)||0; } }catch(e){}
+  try{ const d=await fetch('/api/inspect/deviations?window=24h'); if(d.ok){ const j=await d.json(); wouldBlock=j.total||0; } }catch(e){}
+  if(accepted===0){
+    msg.innerHTML='<b>No accepted rules.</b> Enforcing now would block <b>every</b> call (nothing is allow-listed). Accept some rules first, or continue only if you really intend a default-deny.';
+  }else{
+    msg.innerHTML='Enforce will <b>block</b> any call outside the <b>'+accepted+'</b> accepted rule'+(accepted===1?'':'s')+'. In the last 24h, <b>'+wouldBlock+'</b> call'+(wouldBlock===1?'':'s')+' would have been blocked. Review them under Deviations first.';
+  }
+  document.getElementById('inspect-enforce-confirm').style.display='block';
+}
+function inspectCancelEnforce(){
+  const c=document.getElementById('inspect-enforce-confirm'); if(c) c.style.display='none';
+}
+
+async function inspectLoadDeviations(){
+  try{
+    const win=(document.getElementById('inspect-window')||{}).value||'24h';
+    const r=await fetch('/api/inspect/deviations?window='+encodeURIComponent(win));
+    const box=document.getElementById('inspect-deviations');
+    if(!r.ok){ box.innerHTML='<div class="empty" style="margin:16px 0;">'+(r.status===403?'You don’t have permission to view deviations.':'Unavailable.')+'</div>'; return; }
+    const j=await r.json();
+    document.getElementById('inspect-dev-stat').textContent=(j.total||0)+' in window · mode '+(j.mode||'');
+    const devs=j.deviations||[];
+    window.__inspectDeviations=devs;
+    if(!devs.length){ box.innerHTML='<div class="empty" style="margin:16px 0;">No deviations in this window. In <b>Observe</b> mode nothing is evaluated; switch to <b>Dry-run</b> with accepted rules to surface would-block calls.</div>'; return; }
+    box.innerHTML='<table class="dtable"><thead><tr><th>When</th><th>Identity</th><th>Tool</th><th>Backend</th><th>Why</th><th>Decision</th><th></th></tr></thead><tbody>'
+      +devs.map((d,i)=>{ const backend=d.service||d.source||d.namespace||'—'; const dec=d.decision==='blocked'?'<span class="stchip bad">blocked</span>':'<span class="stchip warn">would-block</span>';
+        return '<tr><td class="muted t-xs">'+esc((d.ts||'').replace('T',' ').replace(/\..*/,''))+'</td><td>'+esc(d.principal)+'</td><td>'+esc(d.tool)+'</td><td>'+esc(backend)+'</td><td class="t-xs">'+esc(d.deviation||'deviation')+(d.detail?(' · '+esc(d.detail)):'')+'</td><td>'+dec+'</td>'
+          +'<td style="text-align:right;white-space:nowrap;"><button class="btn btn-sm" onclick="inspectAddDeviation('+i+')" title="Add exactly this call shape to the accepted profile">Add to profile</button></td></tr>'; }).join('')
+      +'</tbody></table>';
+  }catch(e){}
+}
+
+async function inspectAddDeviation(i){
+  const d=(window.__inspectDeviations||[])[i]; if(!d) return;
+  try{
+    const r=await fetch('/api/inspect/profile/from-deviation',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({principal:d.principal,tool:d.tool,source:d.source,service:d.service,namespace:d.namespace,argShape:d.argShape||{}})});
+    if(!r.ok){ toast(r.status===403?'Need inspection:write':'Failed','error'); return; }
+    toast('Added '+d.principal+' → '+d.tool+' to profile','ok');
+  }catch(e){ toast('Failed','error'); }
+}
+
+// --- Inspect: behavior profile (learn / review) ---
+function inspectConstraintSummary(c){
+  const parts=[];
+  ['source','service','namespace'].forEach(k=>{ if(c[k]&&c[k].length) parts.push(k+'∈{'+c[k].map(esc).join(', ')+'}'); });
+  if(c.argShape){ for(const k in c.argShape){ parts.push(esc(k)+'∈{'+c.argShape[k].map(esc).join(', ')+'}'); } }
+  return parts.length?parts.join(' · '):'<span class="muted">any (no constraints observed)</span>';
+}
+
+async function inspectLoadProfile(){
+  try{
+    const r=await fetch('/api/inspect/profile');
+    if(!r.ok){ document.getElementById('inspect-review-queue').innerHTML='<div class="empty" style="margin:16px 0;">'+(r.status===403?'You don’t have permission to view the profile.':'Profile unavailable.')+'</div>'; return; }
+    renderInspectProfile(await r.json());
+  }catch(e){}
+}
+
+async function inspectDerive(){
+  try{
+    const win=(document.getElementById('inspect-window')||{}).value||'24h';
+    const r=await fetch('/api/inspect/profile/derive?window='+encodeURIComponent(win),{method:'POST'});
+    if(!r.ok){ toast(r.status===403?'Need inspection:write to learn':'Learn failed', 'error'); return; }
+    const j=await r.json();
+    toast('Learned from '+j.learnedFrom+' calls · '+j.suggested+' suggestions', 'ok');
+    inspectLoadProfile();
+  }catch(e){ toast('Learn failed','error'); }
+}
+
+// G2: granular editor — toggle which observed values/buckets a rule allows.
+function inspectChip(attr, val){
+  return '<label class="rule-chip"><input type="checkbox" '+attr+' value="'+escHtml(val)+'" checked> '+esc(val)+'</label>';
+}
+function inspectOpenRuleEditor(id){
+  const rule=(window.__inspectRules||[]).find(r=>r.id===id); if(!rule){ toast('Rule not found','error'); return; }
+  window.__inspectEditRuleId=id;
+  document.getElementById('inspect-rule-modal-title').textContent='Edit rule — '+rule.subject+' → '+rule.tool;
+  const c=rule.constraints||{}; let html='';
+  for(const dim of ['source','service','namespace']){
+    if(c[dim] && c[dim].length){
+      html+='<div class="form-group"><label>'+dim+'</label><div class="rule-chips">'+c[dim].map(v=>inspectChip('data-dim="'+dim+'"',v)).join('')+'</div></div>';
+    }
+  }
+  if(c.argShape){
+    for(const k in c.argShape){
+      html+='<div class="form-group"><label>arg: '+esc(k)+'</label><div class="rule-chips">'+c.argShape[k].map(v=>inspectChip('data-argkey="'+escHtml(k)+'"',v)).join('')+'</div></div>';
+    }
+  }
+  if(!html) html='<div class="muted t-xs">This rule has no constraints (it matches the tool with no resource/arg restrictions). Nothing to narrow.</div>';
+  html+='<div class="form-hint">Unchecking a value removes it from the allow-list — calls using it then count as a deviation. Narrow only; you can re-learn to widen.</div>';
+  document.getElementById('inspect-rule-modal-body').innerHTML=html;
+  document.getElementById('inspect-rule-modal').classList.add('open');
+}
+async function inspectSaveRule(accept){
+  const id=window.__inspectEditRuleId; if(!id) return;
+  const body=document.getElementById('inspect-rule-modal-body');
+  const constraints={};
+  body.querySelectorAll('input[data-dim]:checked').forEach(i=>{ const d=i.getAttribute('data-dim'); (constraints[d]=constraints[d]||[]).push(i.value); });
+  const arg={};
+  body.querySelectorAll('input[data-argkey]:checked').forEach(i=>{ const k=i.getAttribute('data-argkey'); (arg[k]=arg[k]||[]).push(i.value); });
+  if(Object.keys(arg).length) constraints.argShape=arg;
+  try{
+    const r=await fetch('/api/inspect/profile/rules/'+encodeURIComponent(id),{method:'PATCH',headers:{'content-type':'application/json'},body:JSON.stringify({constraints})});
+    if(!r.ok){ toast(r.status===403?'Need inspection:write':'Save failed','error'); return; }
+    if(accept){ await fetch('/api/inspect/profile/rules/'+encodeURIComponent(id),{method:'PATCH',headers:{'content-type':'application/json'},body:JSON.stringify({status:'accepted'})}); }
+    closeModal('inspect-rule-modal');
+    toast(accept?'Saved & accepted':'Rule updated','ok');
+    inspectLoadProfile();
+  }catch(e){ toast('Save failed','error'); }
+}
+
+async function inspectRuleAction(id,status){
+  try{
+    const r=await fetch('/api/inspect/profile/rules/'+encodeURIComponent(id),{method:'PATCH',headers:{'content-type':'application/json'},body:JSON.stringify({status})});
+    if(!r.ok){ toast(r.status===403?'Need inspection:write':'Update failed','error'); return; }
+    inspectLoadProfile();
+  }catch(e){ toast('Update failed','error'); }
+}
+
+async function inspectBulk(status){
+  const ids=(window.__inspectSuggestedIds||[]);
+  for(const id of ids){ await inspectRuleAction(id,status); }
+}
+
+function renderInspectProfile(data){
+  const rules=data.rules||[]; const c=data.counts||{};
+  document.getElementById('inspect-profile-counts').textContent=(c.suggested||0)+' suggested · '+(c.accepted||0)+' accepted · '+(c.rejected||0)+' rejected'+(data.persisted?' · persisted':'');
+  const sugg=rules.filter(r=>r.status==='suggested');
+  const acc=rules.filter(r=>r.status==='accepted');
+  const rej=rules.filter(r=>r.status==='rejected');
+  window.__inspectSuggestedIds=sugg.map(r=>r.id);
+  window.__inspectRules=rules;
+  document.getElementById('inspect-sugg-count').textContent=sugg.length?('('+sugg.length+')'):'';
+  document.getElementById('inspect-acc-count').textContent=acc.length?('('+acc.length+')'):'';
+  document.getElementById('inspect-rej-count').textContent=rej.length?('('+rej.length+')'):'';
+  document.getElementById('inspect-sugg-bulk').style.display=sugg.length>1?'flex':'none';
+
+  const q=document.getElementById('inspect-review-queue');
+  if(!sugg.length){ q.innerHTML='<div class="empty" style="margin:16px 0;">No pending suggestions. Click <b>Learn from traffic</b> to (re-)derive from the selected window.</div>'; }
+  else{
+    q.innerHTML=sugg.map(r=>'<div class="card" style="margin:0 0 8px; padding:12px 14px;">'
+      +'<div style="display:flex; justify-content:space-between; gap:12px; align-items:flex-start;">'
+        +'<div style="min-width:0;">'
+          +'<div style="font-weight:600;">'+esc(r.subject)+' <span class="muted">→</span> <span style="color:var(--accent)">'+esc(r.tool)+'</span></div>'
+          +'<div class="muted t-xs" style="margin:4px 0;">'+inspectConstraintSummary(r.constraints)+'</div>'
+          +'<div class="muted t-xs">learned from '+r.provenance.learnedFrom+' call'+(r.provenance.learnedFrom===1?'':'s')+'</div>'
+        +'</div>'
+        +'<div style="display:flex; gap:6px; flex-shrink:0;">'
+          +'<button class="btn btn-sm btn-primary" data-rule="'+escHtml(r.id)+'" data-act="accepted">Accept</button>'
+          +'<button class="btn btn-sm" data-rule="'+escHtml(r.id)+'" data-act="edit" title="Narrow which values this rule allows">Edit</button>'
+          +'<button class="btn btn-sm btn-ghost" data-rule="'+escHtml(r.id)+'" data-act="rejected">Reject</button>'
+        +'</div>'
+      +'</div></div>').join('');
+  }
+
+  const a=document.getElementById('inspect-accepted-rules');
+  if(!acc.length){ a.innerHTML='<div class="empty" style="margin:16px 0;">No accepted rules yet.</div>'; }
+  else{
+    a.innerHTML='<table class="dtable"><thead><tr><th>Subject</th><th>Tool</th><th>Constraints</th><th>Learned</th><th></th></tr></thead><tbody>'
+      +acc.map(r=>'<tr><td>'+esc(r.subject)+'</td><td>'+esc(r.tool)+'</td><td class="muted t-xs">'+inspectConstraintSummary(r.constraints)+'</td><td>'+r.provenance.learnedFrom+'</td>'
+        +'<td style="text-align:right; white-space:nowrap;"><button class="btn btn-sm" data-rule="'+escHtml(r.id)+'" data-act="edit" title="Narrow which values this rule allows">Edit</button> <button class="btn btn-sm btn-ghost" data-rule="'+escHtml(r.id)+'" data-act="suggested" title="Move back to review">Unaccept</button></td></tr>').join('')
+      +'</tbody></table>';
+  }
+
+  const rj=document.getElementById('inspect-rejected-rules');
+  if(!rej.length){ rj.innerHTML='<div class="empty" style="margin:16px 0;">No rejected rules.</div>'; }
+  else{
+    rj.innerHTML='<table class="dtable"><thead><tr><th>Subject</th><th>Tool</th><th>Constraints</th><th>Learned</th><th></th></tr></thead><tbody>'
+      +rej.map(r=>'<tr style="opacity:0.7;"><td>'+esc(r.subject)+'</td><td>'+esc(r.tool)+'</td><td class="muted t-xs">'+inspectConstraintSummary(r.constraints)+'</td><td>'+r.provenance.learnedFrom+'</td>'
+        +'<td style="text-align:right; white-space:nowrap;"><button class="btn btn-sm" data-rule="'+escHtml(r.id)+'" data-act="suggested" title="Restore to the review queue">Restore</button> <button class="btn btn-sm btn-primary" data-rule="'+escHtml(r.id)+'" data-act="accepted" title="Accept directly">Accept</button></td></tr>').join('')
+      +'</tbody></table>';
+  }
+}
+
+function toggleInspectLive(){
+  inspectLive=!inspectLive;
+  const b=document.getElementById('inspect-live-btn');
+  if(b) b.textContent=inspectLive?'⏸ Live':'▶ Paused';
+  const svg=document.getElementById('inspect-graph-svg'); if(svg) svg.classList.toggle('paused',!inspectLive);
+  if(inspectLive) loadInspectFlows(true);
+}
+
+async function loadInspectFlows(force){
+  try{
+    const win=(document.getElementById('inspect-window')||{}).value||'1h';
+    const [fRes,mRes]=await Promise.all([
+      fetch('/api/inspect/flows?window='+encodeURIComponent(win)),
+      fetch('/api/inspect/mode'),
+    ]);
+    if(mRes.ok){ try{ updateInspectModeChip(await mRes.json()); }catch(e){} }
+    if(!fRes.ok){ showInspectGraphMessage(fRes.status===403?'You don’t have permission to view Inspect (needs inspection:read).':'Inspect is unavailable.'); return; }
+    const data=await fRes.json();
+    inspectData=data;
+    const rev=(data.total||0)+'|'+(data.nodes||[]).map(n=>n.id+':'+n.calls+':'+n.deviations).join(',')+'|'+win;
+    if(!force && rev===inspectRev) return;   // unchanged → keep view + selection
+    inspectRev=rev;
+    renderInspectGraph();
+  }catch(e){ showInspectGraphMessage('Inspect is unavailable.'); }
+}
+
+function updateInspectModeChip(m){
+  const chip=document.getElementById('inspect-mode-chip'); if(!chip||!m) return;
+  const mode=m.mode||'observe';
+  const label={off:'Off',observe:'Observe',dryrun:'Dry-run',enforce:'Enforce'}[mode]||mode;
+  chip.textContent='● '+label;
+  chip.className='stchip '+(mode==='enforce'?'bad':mode==='dryrun'?'warn':mode==='off'?'':'ok');
+  chip.title='Inspection mode: '+label+(m.size!=null?(' · '+m.size+' observations stored'):'');
+  // Reflect into the Profile-tab segmented control + description, when present.
+  const seg=document.getElementById('inspect-mode-seg');
+  if(seg) seg.querySelectorAll('button[data-mode]').forEach(b=>b.classList.toggle('active', b.getAttribute('data-mode')===mode));
+  const desc=document.getElementById('inspect-mode-desc');
+  if(desc) desc.textContent=(typeof INSPECT_MODE_DESC!=='undefined'&&INSPECT_MODE_DESC[mode])||'';
+  // Enforce is an entitled control — lock the segment when unlicensed.
+  window.__inspectEnforceEntitled = (m.enforceEntitled !== false);
+  const enf=seg&&seg.querySelector('button[data-mode="enforce"]');
+  if(enf){
+    const locked=m.enforceEntitled===false;
+    enf.classList.toggle('locked', locked);
+    enf.textContent=locked?'Enforce 🔒':'Enforce';
+    enf.title=locked?'Enforce (active blocking) is an Enterprise feature — requires an entitlement':'';
+  }
+}
+
+function showInspectGraphMessage(msg){
+  const e=document.getElementById('inspect-graph-empty'); if(e){ e.style.display='flex'; e.textContent=msg; }
+  const svg=document.getElementById('inspect-graph-svg'); if(svg) svg.innerHTML='';
+}
+
+function inspectEdgePosture(e){
+  if(e.denied>0) return 'denied';
+  if(e.deviation>0) return 'deviation';
+  return 'allow';
+}
+function inspectPostureColor(p){
+  return p==='denied'?'var(--danger)':p==='deviation'?'var(--warning)':'var(--success)';
+}
+
+function renderInspectGraph(){
+  const svg=document.getElementById('inspect-graph-svg');
+  const empty=document.getElementById('inspect-graph-empty');
+  if(!svg||!inspectData) return;
+  const cols={identity:[],tool:[],backend:[]};
+  (inspectData.nodes||[]).forEach(n=>{ if(cols[n.kind]) cols[n.kind].push(n); });
+  Object.values(cols).forEach(a=>a.sort((x,y)=>y.calls-x.calls));
+  if((inspectData.total||0)===0 || (inspectData.nodes||[]).length===0){
+    empty.style.display='flex';
+    empty.textContent='No traffic in this window yet. Make a tool call (e.g. from the Playground) and it appears here live.';
+    svg.innerHTML=''; renderInspectLegend(); updateInspectFlowStat(); return;
+  }
+  empty.style.display='none';
+  const maxRows=Math.max(cols.identity.length,cols.tool.length,cols.backend.length,1);
+  const pos={};
+  for(const kind of ['identity','tool','backend']){
+    const arr=cols[kind]; const colH=arr.length*INSPECT_ROW_H;
+    const start=INSPECT_PAD_TOP+(maxRows*INSPECT_ROW_H-colH)/2;
+    arr.forEach((n,i)=>{ pos[n.id]={x:INSPECT_COL[kind], y:start+i*INSPECT_ROW_H+INSPECT_ROW_H/2, node:n, kind}; });
+  }
+  const maxCount=Math.max(...(inspectData.edges||[]).map(e=>e.count),1);
+  const hw=INSPECT_NODE_W/2;
+  let edgesSvg='';
+  (inspectData.edges||[]).forEach((e,i)=>{
+    const a=pos[e.from], b=pos[e.to]; if(!a||!b) return;
+    const x1=a.x+hw, y1=a.y, x2=b.x-hw, y2=b.y, mx=(x1+x2)/2;
+    const w=(1.4+Math.log2(1+e.count)/Math.log2(1+maxCount)*5).toFixed(2);
+    const posture=inspectEdgePosture(e);
+    const col=inspectPostureColor(posture);
+    const flow=(e.allow>0 && posture==='allow')?' flow':'';
+    edgesSvg+='<path class="iedge'+flow+'" data-edge="'+i+'" d="M '+x1+' '+y1+' C '+mx+' '+y1+', '+mx+' '+y2+', '+x2+' '+y2+'" stroke="'+col+'" stroke-width="'+w+'" opacity="0.55"></path>';
+  });
+  let nodesSvg='';
+  const kindDot={identity:'var(--info)',tool:'var(--accent)',backend:'var(--success)'};
+  for(const id in pos){
+    const p=pos[id], n=p.node;
+    const x=p.x-hw, y=p.y-15;
+    const lbl=esc(n.label.length>20?n.label.slice(0,19)+'…':n.label);
+    const devTag=n.deviations>0?'<text class="ilabel" x="'+(p.x+hw-8)+'" y="'+(p.y+4)+'" text-anchor="end" fill="var(--warning)">⚠'+n.deviations+'</text>':'';
+    nodesSvg+='<g class="inode-g" data-id="'+escHtml(id)+'" tabindex="0" role="button" aria-label="'+escHtml(n.kind+' '+n.label+', '+n.calls+' calls')+'">'
+      +'<rect class="inode" x="'+x+'" y="'+y+'" width="'+INSPECT_NODE_W+'" height="30" rx="7" fill="var(--surface)" stroke="var(--border-strong)" stroke-width="1"></rect>'
+      +'<circle cx="'+(x+12)+'" cy="'+p.y+'" r="4" fill="'+kindDot[p.kind]+'"></circle>'
+      +'<text class="ilabel" x="'+(x+22)+'" y="'+(p.y-2)+'" fill="var(--text)">'+lbl+'</text>'
+      +'<text class="ilabel" x="'+(x+22)+'" y="'+(p.y+10)+'">'+n.calls+' call'+(n.calls===1?'':'s')+(n.errors>0?(' · '+n.errors+' err'):'')+'</text>'
+      +devTag+'</g>';
+  }
+  const colLabels='<text class="icol-label" x="'+INSPECT_COL.identity+'" y="22" text-anchor="middle">Identities</text>'
+    +'<text class="icol-label" x="'+INSPECT_COL.tool+'" y="22" text-anchor="middle">Tools</text>'
+    +'<text class="icol-label" x="'+INSPECT_COL.backend+'" y="22" text-anchor="middle">Backends</text>';
+  svg.innerHTML='<g id="inspect-root">'+colLabels+edgesSvg+nodesSvg+'</g>';
+  applyInspectTransform();
+  renderInspectLegend();
+  updateInspectFlowStat();
+  // Re-assert selection highlight if a node is still present.
+  if(inspectSel) highlightInspect(inspectSel);
+}
+
+function updateInspectFlowStat(){
+  const s=document.getElementById('inspect-flow-stat'); if(!s||!inspectData) return;
+  const dev=(inspectData.edges||[]).reduce((a,e)=>a+(e.deviation||0)+(e.denied||0),0);
+  s.textContent=(inspectData.total||0)+' calls · '+(inspectData.nodes||[]).length+' nodes'+(dev>0?(' · '+dev+' deviations'):'');
+}
+
+function renderInspectLegend(){
+  const el=document.getElementById('inspect-graph-legend'); if(!el) return;
+  el.innerHTML='<div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">'
+    +'<span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--info);margin-right:4px;"></span>identity</span>'
+    +'<span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:4px;"></span>tool</span>'
+    +'<span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-right:4px;"></span>backend</span>'
+    +'<span style="color:var(--success);">— allowed</span><span style="color:var(--warning);">— deviation</span><span style="color:var(--danger);">— blocked</span>'
+    +'</div>';
+}
+
+function applyInspectTransform(){
+  const root=document.getElementById('inspect-root'); if(!root) return;
+  root.setAttribute('transform','translate('+inspectView.tx+','+inspectView.ty+') scale('+inspectView.scale+')');
+}
+function inspectZoom(k){ inspectView.scale=Math.min(3,Math.max(0.3,inspectView.scale*k)); applyInspectTransform(); }
+function inspectResetView(){ inspectView.tx=0; inspectView.ty=0; inspectView.scale=1; applyInspectTransform(); }
+
+function highlightInspect(id){
+  const svg=document.getElementById('inspect-graph-svg'); if(!svg) return;
+  if(!id){ svg.querySelectorAll('.dim').forEach(n=>n.classList.remove('dim')); return; }
+  const neighbours=new Set([id]);
+  (inspectData.edges||[]).forEach(e=>{ if(e.from===id) neighbours.add(e.to); if(e.to===id) neighbours.add(e.from); });
+  svg.querySelectorAll('.inode-g').forEach(g=>{ g.classList.toggle('dim', !neighbours.has(g.getAttribute('data-id'))); });
+  svg.querySelectorAll('.iedge').forEach((p,i)=>{ const e=(inspectData.edges||[])[p.getAttribute('data-edge')]; p.classList.toggle('dim', !(e&&(e.from===id||e.to===id))); });
+}
+
+function inspectNodeById(id){ return (inspectData.nodes||[]).find(n=>n.id===id); }
+
+// G1 drill-down: map a flow node id (kind:label) to an events filter.
+function inspectNodeFilter(id){
+  const i=id.indexOf(':'); const kind=id.slice(0,i), val=id.slice(i+1);
+  if(kind==='identity') return { principal: val };
+  if(kind==='tool') return { tool: val };
+  if(kind==='backend') return { backend: val };
+  return {};
+}
+function inspectArgShapeStr(sh){
+  const e=Object.entries(sh||{}); if(!e.length) return '<span class="muted">—</span>';
+  return e.map(([k,v])=>esc(k)+'=<b>'+esc(String(v))+'</b>').join(' · ');
+}
+// Fetch + render the real calls behind a node/edge selection (the "look into
+// the calls" drill). Filters: {principal?, tool?, backend?}. All cells escaped.
+async function inspectRenderDrill(filters, win){
+  const el=document.getElementById('inspect-drill'); if(!el) return;
+  el.innerHTML='<div class="muted t-xs">Loading calls…</div>';
+  try{
+    const qs=new URLSearchParams(); for(const k in filters){ if(filters[k]) qs.set(k, filters[k]); }
+    qs.set('from', new Date(Date.now()-(inspectWinMs(win))).toISOString()); qs.set('limit','30');
+    const r=await fetch('/api/inspect/events?'+qs.toString());
+    if(!r.ok){ el.innerHTML='<div class="muted t-xs">'+(r.status===403?'No permission.':'Unavailable.')+'</div>'; return; }
+    const evs=(await r.json()).events||[];
+    if(!evs.length){ el.innerHTML='<div class="muted t-xs">No calls in window.</div>'; return; }
+    el.innerHTML='<div class="muted t-xs" style="margin:10px 0 4px;">Recent calls ('+evs.length+')</div>'
+      +evs.map(o=>{ const dec=o.decision==='blocked'?'<span class="stchip bad">blocked</span>':o.decision==='would-block'?'<span class="stchip warn">would-block</span>':(o.outcome==='error'?'<span class="stchip warn">error</span>':'<span class="stchip ok">ok</span>');
+        const backend=o.service||o.source||o.namespace||'—';
+        return '<div style="padding:6px 0;border-top:1px solid var(--border);">'
+          +'<div style="display:flex;justify-content:space-between;gap:8px;"><span class="t-xs">'+esc(o.principal)+' <span class="muted">→</span> '+esc(o.tool)+'</span>'+dec+'</div>'
+          +'<div class="muted t-xs" style="margin-top:2px;">'+esc((o.ts||'').replace('T',' ').replace(/\..*/,''))+' · '+esc(backend)+'</div>'
+          +'<div class="t-xs" style="margin-top:2px;">'+inspectArgShapeStr(o.argShape)+'</div>'
+          +'</div>'; }).join('');
+  }catch(e){ el.innerHTML='<div class="muted t-xs">Unavailable.</div>'; }
+}
+function inspectWinMs(win){ const w=win||((document.getElementById('inspect-window')||{}).value)||'1h'; return {'5m':3e5,'1h':36e5,'24h':864e5}[w]||36e5; }
+
+function selectInspectNode(id){
+  inspectSel=id; highlightInspect(id);
+  const n=inspectNodeById(id); if(!n) return;
+  const ins=(inspectData.edges||[]).filter(e=>e.to===id);
+  const outs=(inspectData.edges||[]).filter(e=>e.from===id);
+  const rows=(list,dir)=>list.map(e=>{ const other=dir==='out'?e.to:e.from; const nm=(inspectNodeById(other)||{}).label||other; const p=inspectEdgePosture(e);
+      return '<div style="display:flex;justify-content:space-between;gap:8px;padding:2px 0;"><span style="color:'+inspectPostureColor(p)+'">'+(dir==='out'?'→ ':'← ')+esc(nm)+'</span><span class="muted">'+e.count+'</span></div>'; }).join('')||'<span class="muted">none</span>';
+  const body=document.getElementById('inspect-inspector-body'), empty=document.getElementById('inspect-inspector-empty');
+  empty.style.display='none'; body.style.display='block';
+  body.innerHTML='<div style="font-size:var(--fs-lg);font-weight:600;margin-bottom:2px;">'+esc(n.label)+'</div>'
+    +'<div class="muted t-xs" style="margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em;">'+n.kind+'</div>'
+    +'<dl class="inspect-kv"><dt>calls</dt><dd>'+n.calls+'</dd><dt>errors</dt><dd>'+n.errors+'</dd><dt>deviations</dt><dd>'+n.deviations+'</dd></dl>'
+    +'<div class="muted t-xs" style="margin:10px 0 4px;">Incoming</div>'+rows(ins,'in')
+    +'<div class="muted t-xs" style="margin:10px 0 4px;">Outgoing</div>'+rows(outs,'out')
+    +'<div id="inspect-drill"></div>';
+  inspectRenderDrill(inspectNodeFilter(id));
+}
+
+function selectInspectEdge(idx){
+  const e=(inspectData.edges||[])[idx]; if(!e) return;
+  inspectSel=null; highlightInspect(null);
+  const from=(inspectNodeById(e.from)||{}).label||e.from, to=(inspectNodeById(e.to)||{}).label||e.to;
+  const body=document.getElementById('inspect-inspector-body'), empty=document.getElementById('inspect-inspector-empty');
+  empty.style.display='none'; body.style.display='block';
+  body.innerHTML='<div style="font-size:var(--fs-lg);font-weight:600;margin-bottom:2px;">'+esc(from)+' → '+esc(to)+'</div>'
+    +'<div class="muted t-xs" style="margin-bottom:10px;">flow edge</div>'
+    +'<dl class="inspect-kv"><dt>calls</dt><dd>'+e.count+'</dd><dt>allowed</dt><dd>'+e.allow+'</dd><dt>deviation</dt><dd>'+e.deviation+'</dd><dt>blocked</dt><dd>'+e.denied+'</dd></dl>'
+    +'<div id="inspect-drill"></div>';
+  inspectRenderDrill({ ...inspectNodeFilter(e.from), ...inspectNodeFilter(e.to) });
+}
+
+function wireInspectGraph(){
+  const svg=document.getElementById('inspect-graph-svg'); const host=document.getElementById('inspect-graph-host'); if(!svg||!host) return;
+  // click select (node or edge), background click clears
+  svg.addEventListener('click',(ev)=>{
+    const g=ev.target.closest('.inode-g'); if(g){ selectInspectNode(g.getAttribute('data-id')); return; }
+    const p=ev.target.closest('.iedge'); if(p){ selectInspectEdge(p.getAttribute('data-edge')); return; }
+    inspectSel=null; highlightInspect(null);
+    document.getElementById('inspect-inspector-body').style.display='none';
+    document.getElementById('inspect-inspector-empty').style.display='block';
+  });
+  // wheel zoom
+  svg.addEventListener('wheel',(ev)=>{ ev.preventDefault(); inspectZoom(ev.deltaY<0?1.12:1/1.12); },{passive:false});
+  // drag to pan
+  let panning=false, sx=0, sy=0, ox=0, oy=0;
+  svg.addEventListener('mousedown',(ev)=>{ if(ev.target.closest('.inode-g')) return; panning=true; sx=ev.clientX; sy=ev.clientY; ox=inspectView.tx; oy=inspectView.ty; svg.style.cursor='grabbing'; });
+  window.addEventListener('mousemove',(ev)=>{ if(!panning) return; inspectView.tx=ox+(ev.clientX-sx); inspectView.ty=oy+(ev.clientY-sy); applyInspectTransform(); });
+  window.addEventListener('mouseup',()=>{ panning=false; svg.style.cursor='grab'; });
+  // keyboard: Enter inspects focused node, Esc clears
+  svg.addEventListener('keydown',(ev)=>{
+    if(ev.key==='Escape'){ inspectSel=null; highlightInspect(null); document.getElementById('inspect-inspector-body').style.display='none'; document.getElementById('inspect-inspector-empty').style.display='block'; }
+    if((ev.key==='Enter'||ev.key===' ')){ const el=document.activeElement; if(el&&el.classList&&el.classList.contains('inode-g')){ ev.preventDefault(); selectInspectNode(el.getAttribute('data-id')); } }
+  });
+}
+
 (async()=>{syncThemeToggle();initNav();await loadTypes();await refresh();await loadInfo();await updateHealthStat();await buildNotifications();setInterval(refresh,15000);setInterval(updateHealthStat,15000);setInterval(buildNotifications,15000);})();
 </script>