@dollhousemcp/mcp-server 2.0.16 → 2.0.18

package/dist/web/public/permissions.css

@@ -355,9 +355,10 @@
 }
 
 .perm-feed--modal {
-  height: calc(100vh - 11rem);
+  height: 100%;
   max-height: none;
   min-height: 0;
+  overflow: auto;
 }
 
 .perm-feed-empty {
@@ -398,6 +399,16 @@
   .perm-selected-grid {
     grid-template-columns: 1fr;
   }
+
+  .perm-audit-summary-row {
+    grid-template-columns: 1fr;
+    gap: 0.45rem;
+  }
+
+  .perm-audit-detail-row {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
 }
 
 .perm-feed-tool {
@@ -420,6 +431,133 @@
   width: min(82rem, 100%);
 }
 
+.perm-audit-modal .modal-body {
+  display: flex;
+  min-height: 0;
+  padding: 0;
+}
+
+.perm-audit-modal .modal-meta {
+  row-gap: 0.35rem;
+}
+
+.perm-audit-modal .perm-feed--modal {
+  padding: 0.875rem 1rem 1rem;
+}
+
+.perm-audit-entry {
+  border: 1px solid var(--ink-100, #e2e8f0);
+  border-radius: 0.75rem;
+  background: var(--paper-strong, #fff);
+  margin-bottom: 0.75rem;
+  overflow: hidden;
+}
+
+.perm-audit-entry:last-child {
+  margin-bottom: 0;
+}
+
+.perm-audit-entry[open] {
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink-900, #0f172a) 10%, transparent);
+}
+
+.perm-audit-summary-row {
+  display: grid;
+  grid-template-columns: minmax(6rem, auto) auto minmax(9rem, auto) minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.875rem 1rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.perm-audit-summary-row::-webkit-details-marker {
+  display: none;
+}
+
+.perm-audit-summary-row:hover {
+  background: var(--ink-50, #f8fafc);
+}
+
+.perm-audit-time-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.perm-audit-time {
+  color: var(--ink-800, #1e293b);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.perm-audit-date {
+  color: var(--ink-500, #64748b);
+  font-size: 0.72rem;
+}
+
+.perm-audit-tool {
+  color: var(--ink-800, #1e293b);
+  font-weight: 700;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.perm-audit-context {
+  color: var(--ink-600, #475569);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.perm-audit-entry-body {
+  border-top: 1px solid var(--ink-100, #e2e8f0);
+  padding: 0.95rem 1rem 1rem;
+  background: color-mix(in srgb, var(--paper-base, #f8fafc) 82%, white);
+}
+
+.perm-audit-reason-block {
+  margin-bottom: 0.85rem;
+}
+
+.perm-audit-reason-text {
+  margin: 0.3rem 0 0;
+  color: var(--ink-700, #334155);
+  line-height: 1.55;
+}
+
+.perm-audit-detail-list {
+  display: grid;
+  gap: 0.625rem;
+  margin: 0;
+}
+
+.perm-audit-detail-row {
+  display: grid;
+  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: start;
+}
+
+.perm-audit-meta-label {
+  color: var(--ink-500, #64748b);
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 0.74rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.perm-audit-meta-value {
+  margin: 0;
+  color: var(--ink-800, #1e293b);
+  overflow-wrap: anywhere;
+}
+
+.perm-audit-detail-value--mono {
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 0.82rem;
+}
+
 /* ── Source Elements ───────────────────────────────────────── */
 
 .perm-source-list {
@@ -464,6 +602,29 @@
   overflow-wrap: anywhere;
 }
 
+.perm-source-warning {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.375rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, #f59e0b 16%, white);
+  color: #431407;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.perm-inline-warning {
+  margin-top: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid color-mix(in srgb, #f59e0b 35%, white);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, #f59e0b 10%, white);
+  color: #431407;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
 /* ── Dark Mode ─────────────────────────────────────────────── */
 
 [data-theme="dark"] .perm-status-bar,
@@ -527,7 +688,10 @@
 [data-theme="dark"] .perm-selected-title,
 [data-theme="dark"] .perm-feed-tool,
 [data-theme="dark"] .perm-pattern-text,
-[data-theme="dark"] .perm-source-name {
+[data-theme="dark"] .perm-source-name,
+[data-theme="dark"] .perm-audit-time,
+[data-theme="dark"] .perm-audit-tool,
+[data-theme="dark"] .perm-audit-meta-value {
   color: var(--ink-200, #e2e8f0);
 }
 
@@ -537,6 +701,20 @@
   background: color-mix(in srgb, var(--paper) 36%, var(--surface-1));
 }
 
+[data-theme="dark"] .perm-audit-entry {
+  background: color-mix(in srgb, var(--paper) 22%, var(--surface-1));
+  border-color: color-mix(in srgb, var(--line) 88%, transparent);
+}
+
+[data-theme="dark"] .perm-audit-summary-row:hover {
+  background: color-mix(in srgb, var(--surface-2) 72%, var(--paper-strong));
+}
+
+[data-theme="dark"] .perm-audit-entry-body {
+  background: color-mix(in srgb, var(--surface-1) 82%, var(--paper-strong));
+  border-color: color-mix(in srgb, var(--line) 92%, transparent);
+}
+
 [data-theme="dark"] .perm-source-item,
 [data-theme="dark"] .perm-pattern-item,
 [data-theme="dark"] .perm-feed-row {
@@ -548,6 +726,16 @@
   background: color-mix(in srgb, var(--surface-2) 72%, var(--paper-strong));
 }
 
+[data-theme="dark"] .perm-audit-context,
+[data-theme="dark"] .perm-audit-reason-text {
+  color: var(--ink-300, #cbd5e1);
+}
+
+[data-theme="dark"] .perm-audit-date,
+[data-theme="dark"] .perm-audit-meta-label {
+  color: var(--ink-500, #7b93a7);
+}
+
 [data-theme="dark"] .perm-source-type {
   background: color-mix(in srgb, var(--surface-2) 90%, var(--paper-strong));
   color: var(--ink-900, #dce6f2);

package/dist/web/public/permissions.js

@@ -152,12 +152,18 @@
         hasElements ? `${data.activeElementCount} elements` : 'No ensemble';
     }
     if (hookDot && hookLabel) {
-      const hasPatterns = (data.denyPatterns?.length || 0)
+      const hasExternalRules = (data.denyPatterns?.length || 0)
         + (data.allowPatterns?.length || 0)
         + (data.confirmPatterns?.length || 0) > 0;
-      if (!hasPatterns) {
+      const hasAnyRules = (data.denyRules?.length || 0)
+        + (data.allowRules?.length || 0)
+        + (data.confirmRules?.length || 0) > 0;
+      if (!hasAnyRules) {
         hookDot.dataset.status = 'inactive';
         hookLabel.textContent = 'No policies';
+      } else if (!hasExternalRules) {
+        hookDot.dataset.status = 'active';
+        hookLabel.textContent = 'MCP-AQL policies active';
       } else if (data.permissionPromptActive) {
         hookDot.dataset.status = 'active';
         hookLabel.textContent = 'Prompt tool active';
@@ -175,9 +181,9 @@
   }
 
   function renderSummaryStats(data) {
-    setText('perm-stat-deny-count', getAggregatePatterns(data, 'denyPatterns').length);
-    setText('perm-stat-allow-count', getAggregatePatterns(data, 'allowPatterns').length);
-    setText('perm-stat-confirm-count', getAggregatePatterns(data, 'confirmPatterns').length);
+    setText('perm-stat-deny-count', getAggregateRules(data, 'denyRules').length);
+    setText('perm-stat-allow-count', getAggregateRules(data, 'allowRules').length);
+    setText('perm-stat-confirm-count', getAggregateRules(data, 'confirmRules').length);
     setText('perm-stat-decisions', data.recentDecisions?.length || 0);
 
     // Decision breakdown
@@ -211,16 +217,14 @@
     const selectedSessionId = selectedData?.sessionId;
     if (elements.length === 0) {
       list.innerHTML = '<li class="perm-pattern-empty">No active elements with policies</li>';
+      renderInvalidPolicySummary('perm-all-invalid-policy-summary', []);
       return;
     }
 
-    list.innerHTML = elements.map(el => `
-      <li class="perm-source-item${elementMatchesSelected(el, selectedSessionId) ? ' perm-source-item--selected' : ''}">
-        <span class="perm-source-type">${esc(el.type)}</span>
-        <span class="perm-source-name">${esc(el.element_name || el.name || '')}</span>
-        ${el.description ? `<span style="color:var(--ink-400);font-size:0.75rem;margin-left:auto">${esc(el.description)}</span>` : ''}
-      </li>
-    `).join('');
+    renderInvalidPolicySummary('perm-all-invalid-policy-summary', elements);
+    list.innerHTML = elements.map(el =>
+      renderPolicySourceItem(el, elementMatchesSelected(el, selectedSessionId) ? ' perm-source-item--selected' : '')
+    ).join('');
   }
 
   function renderSelectedSessionDetail(selectedData) {
@@ -261,31 +265,26 @@
     }
 
     const elements = selectedData.elements || [];
+    renderInvalidPolicySummary('perm-selected-invalid-policy-summary', elements);
     sourceList.innerHTML = elements.length === 0
       ? '<li class="perm-pattern-empty">No policy-bearing elements found for this session</li>'
-      : elements.map(el => `
-          <li class="perm-source-item perm-source-item--detail">
-            <span class="perm-source-type">${esc(el.type)}</span>
-            <span class="perm-source-name">${esc(el.element_name || el.name || '')}</span>
-            ${el.description ? `<span style="color:var(--ink-400);font-size:0.75rem;margin-left:auto">${esc(el.description)}</span>` : ''}
-          </li>
-        `).join('');
+      : elements.map(el => renderPolicySourceItem(el, ' perm-source-item--detail')).join('');
 
-    renderPatternList('perm-selected-deny-list', selectedData.denyPatterns || [], 'deny');
-    renderPatternList('perm-selected-allow-list', selectedData.allowPatterns || [], 'allow');
-    renderPatternList('perm-selected-confirm-list', selectedData.confirmPatterns || [], 'confirm');
+    renderPatternList('perm-selected-deny-list', selectedData.denyRules || [], 'deny');
+    renderPatternList('perm-selected-allow-list', selectedData.allowRules || [], 'allow');
+    renderPatternList('perm-selected-confirm-list', selectedData.confirmRules || [], 'confirm');
   }
 
   function renderDenyPatterns(data) {
-    renderPatternList('perm-deny-list', getAggregatePatterns(data, 'denyPatterns'), 'deny');
+    renderPatternList('perm-deny-list', getAggregateRules(data, 'denyRules'), 'deny');
   }
 
   function renderAllowPatterns(data) {
-    renderPatternList('perm-allow-list', getAggregatePatterns(data, 'allowPatterns'), 'allow');
+    renderPatternList('perm-allow-list', getAggregateRules(data, 'allowRules'), 'allow');
   }
 
   function renderConfirmPatterns(data) {
-    renderPatternList('perm-confirm-list', getAggregatePatterns(data, 'confirmPatterns'), 'confirm');
+    renderPatternList('perm-confirm-list', getAggregateRules(data, 'confirmRules'), 'confirm');
   }
 
   function renderPatternList(elementId, patterns, type) {
@@ -293,7 +292,7 @@
     if (!list) return;
 
     if (patterns.length === 0) {
-      list.innerHTML = `<li class="perm-pattern-empty">No ${type} patterns active</li>`;
+      list.innerHTML = `<li class="perm-pattern-empty">No ${type} rules active</li>`;
       return;
     }
 
@@ -325,29 +324,152 @@
     if (latestId === lastDecisionId) return; // no change
     lastDecisionId = latestId;
 
-    const html = decisions.map(d => {
-      const time = new Date(d.timestamp).toLocaleTimeString();
-      const toolDisplay = d.tool_name === 'Bash'
-        ? `Bash: ${esc(truncate(d.command || '', 60))}`
-        : esc(d.tool_name);
-
-      return `
-        <div class="perm-feed-row">
-          <span class="perm-feed-time">${time}</span>
-          <span class="perm-feed-decision perm-feed-decision--${d.decision}">${d.decision.toUpperCase()}</span>
-          <span class="perm-feed-tool" title="${esc(d.command || d.tool_name)}">${toolDisplay}</span>
-          <span class="perm-feed-reason" title="${esc(d.reason || '')}">${esc(d.reason || '')}</span>
-        </div>
-      `;
-    }).join('');
+    const html = decisions.map(renderCompactDecisionRow).join('');
 
     feed.innerHTML = html;
-    if (modalFeed) modalFeed.innerHTML = html;
+    if (modalFeed) modalFeed.innerHTML = renderAuditModal(decisions);
     if (modalCount) {
       modalCount.textContent = `${decisions.length} captured ${decisions.length === 1 ? 'entry' : 'entries'}`;
     }
   }
 
+  function renderCompactDecisionRow(decision) {
+    const toolDisplay = decision.tool_name === 'Bash'
+      ? `Bash: ${esc(truncate(decision.command || '', 60))}`
+      : esc(decision.tool_name);
+
+    return `
+      <div class="perm-feed-row">
+        <span class="perm-feed-time">${esc(formatShortTime(decision.timestamp))}</span>
+        <span class="perm-feed-decision perm-feed-decision--${decision.decision}">${esc(getDecisionLabel(decision.decision))}</span>
+        <span class="perm-feed-tool" title="${esc(decision.command || decision.tool_name)}">${toolDisplay}</span>
+        <span class="perm-feed-reason" title="${esc(decision.reason || '')}">${esc(decision.reason || '')}</span>
+      </div>
+    `;
+  }
+
+  function renderAuditModal(decisions) {
+    if (!decisions || decisions.length === 0) {
+      return '<div class="perm-feed-empty">No permission decisions yet. Waiting for tool calls...</div>';
+    }
+
+    return decisions.map(renderAuditDecisionEntry).join('');
+  }
+
+  function renderAuditDecisionEntry(decision) {
+    const compactContext = getCompactContext(decision);
+    const detailRows = Array.isArray(decision.details) ? decision.details : [];
+    const reasonBlock = decision.reason
+      ? `
+        <div class="perm-audit-reason-block">
+          <div class="perm-audit-meta-label">Reason</div>
+          <p class="perm-audit-reason-text">${esc(decision.reason)}</p>
+        </div>
+      `
+      : '';
+    const detailList = detailRows.length > 0
+      ? `
+        <dl class="perm-audit-detail-list">
+          ${detailRows.map(detail => `
+            <div class="perm-audit-detail-row">
+              <dt class="perm-audit-meta-label">${esc(detail.label)}</dt>
+              <dd class="perm-audit-meta-value${detail.monospace ? ' perm-audit-detail-value--mono' : ''}">${esc(detail.value)}</dd>
+            </div>
+          `).join('')}
+          <div class="perm-audit-detail-row">
+            <dt class="perm-audit-meta-label">Exact Time</dt>
+            <dd class="perm-audit-meta-value perm-audit-detail-value--mono">${esc(formatExactTimestamp(decision.timestamp))}</dd>
+          </div>
+        </dl>
+      `
+      : `
+        <dl class="perm-audit-detail-list">
+          <div class="perm-audit-detail-row">
+            <dt class="perm-audit-meta-label">Exact Time</dt>
+            <dd class="perm-audit-meta-value perm-audit-detail-value--mono">${esc(formatExactTimestamp(decision.timestamp))}</dd>
+          </div>
+        </dl>
+      `;
+
+    return `
+      <details class="perm-audit-entry">
+        <summary class="perm-audit-summary-row">
+          <span class="perm-audit-time-group">
+            <span class="perm-audit-time">${esc(formatShortTime(decision.timestamp))}</span>
+            <span class="perm-audit-date">${esc(formatShortDate(decision.timestamp))}</span>
+          </span>
+          <span class="perm-feed-decision perm-feed-decision--${decision.decision}">${esc(getDecisionLabel(decision.decision))}</span>
+          <span class="perm-audit-tool">${esc(decision.tool_name)}</span>
+          <span class="perm-audit-context">${esc(compactContext)}</span>
+        </summary>
+        <div class="perm-audit-entry-body">
+          ${reasonBlock}
+          ${detailList}
+        </div>
+      </details>
+    `;
+  }
+
+  function formatShortTime(timestamp) {
+    return new Date(timestamp).toLocaleTimeString([], {
+      hour: 'numeric',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
+
+  function formatShortDate(timestamp) {
+    return new Date(timestamp).toLocaleDateString([], {
+      month: 'short',
+      day: 'numeric',
+    });
+  }
+
+  function formatExactTimestamp(timestamp) {
+    const date = new Date(timestamp);
+    return date.toLocaleString([], {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      second: '2-digit',
+      timeZoneName: 'short',
+    });
+  }
+
+  function getDecisionLabel(decision) {
+    return String(decision || '').toUpperCase();
+  }
+
+  function getCompactContext(decision) {
+    if (decision.targetLabel && decision.target) {
+      return `${decision.targetLabel}: ${truncate(decision.target, 96)}`;
+    }
+    if (decision.command) {
+      return truncate(decision.command, 96);
+    }
+    return decision.reason || 'No extra context captured';
+  }
+
+  function renderPolicySourceItem(el, extraClass = '') {
+    const invalidBadge = el.invalidGatekeeperPolicy
+      ? `<span class="perm-source-warning" title="${esc(el.invalidGatekeeperMessage || '')}">policy invalid</span>`
+      : '';
+    const description = el.description
+      ? `<span style="color:var(--ink-400);font-size:0.75rem;margin-left:auto">${esc(el.description)}</span>`
+      : '';
+
+    return `
+      <li class="perm-source-item${extraClass}">
+        <span class="perm-source-type">${esc(el.type)}</span>
+        <span class="perm-source-name">${esc(el.element_name || el.name || '')}</span>
+        ${invalidBadge}
+        ${description}
+      </li>
+    `;
+  }
+
   function deriveSelectedSessionData(aggregateData, sessionId) {
     if (!sessionId) return null;
 
@@ -359,16 +481,18 @@
       sessionId: sessionId,
       activeElementCount: elements.length,
       hasAllowlist: elements.some(function (element) {
-        return Array.isArray(element.allowPatterns) && element.allowPatterns.length > 0;
+        return Array.isArray(element.allowRules) && element.allowRules.length > 0;
       }),
-      denyPatterns: flattenElementPatterns(elements, 'denyPatterns'),
-      allowPatterns: flattenElementPatterns(elements, 'allowPatterns'),
-      confirmPatterns: flattenElementPatterns(elements, 'confirmPatterns'),
+      denyRules: flattenElementPatterns(elements, 'denyRules'),
+      allowRules: flattenElementPatterns(elements, 'allowRules'),
+      confirmRules: flattenElementPatterns(elements, 'confirmRules'),
       elements: elements.map(function (element) {
         return {
           type: element.type,
           element_name: element.element_name,
           description: element.description,
+          invalidGatekeeperPolicy: !!element.invalidGatekeeperPolicy,
+          invalidGatekeeperMessage: element.invalidGatekeeperMessage,
         };
       }),
       permissionPromptActive: !!aggregateData?.permissionPromptActive,
@@ -388,6 +512,12 @@
     return Array.from(new Set(combined.concat(perElement)));
   }
 
+  function getAggregateRules(data, key) {
+    const combined = Array.isArray(data && data[key]) ? data[key] : [];
+    const perElement = flattenElementPatterns((data && data.elements) || [], key);
+    return Array.from(new Set(combined.concat(perElement)));
+  }
+
   // ── Dashboard HTML ─────────────────────────────────────────
 
   function buildDashboardHTML() {
@@ -448,15 +578,15 @@
             <div class="perm-stat-grid">
               <div class="perm-stat">
                 <div class="perm-stat-value perm-stat-value--deny" id="perm-stat-deny-count">0</div>
-                <div class="perm-stat-label">Deny Patterns</div>
+                <div class="perm-stat-label">Deny Rules</div>
               </div>
               <div class="perm-stat">
                 <div class="perm-stat-value perm-stat-value--allow" id="perm-stat-allow-count">0</div>
-                <div class="perm-stat-label">Allow Patterns</div>
+                <div class="perm-stat-label">Allow Rules</div>
               </div>
               <div class="perm-stat">
                 <div class="perm-stat-value perm-stat-value--ask" id="perm-stat-confirm-count">0</div>
-                <div class="perm-stat-label">Confirm Patterns</div>
+                <div class="perm-stat-label">Confirm Rules</div>
               </div>
               <div class="perm-stat">
                 <div class="perm-stat-value" id="perm-stat-decisions">0</div>
@@ -489,6 +619,7 @@
               <div>
                 <div class="perm-selected-title" id="perm-selected-title">Selected Session</div>
                 <div class="perm-selected-subtitle" id="perm-selected-subtitle"></div>
+                <div class="perm-inline-warning" id="perm-selected-invalid-policy-summary" hidden></div>
               </div>
               <span class="perm-selected-badge" id="perm-selected-badge" hidden>Persisted Policy State (Debug Info)</span>
             </div>
@@ -501,19 +632,19 @@
                 </ul>
               </div>
               <div class="perm-selected-panel">
-                <h4 class="perm-selected-panel-title">Deny Patterns</h4>
+                <h4 class="perm-selected-panel-title">Deny Rules</h4>
                 <ul class="perm-pattern-list" id="perm-selected-deny-list">
                   <li class="perm-pattern-empty">Loading...</li>
                 </ul>
               </div>
               <div class="perm-selected-panel">
-                <h4 class="perm-selected-panel-title">Allow Patterns</h4>
+                <h4 class="perm-selected-panel-title">Allow Rules</h4>
                 <ul class="perm-pattern-list" id="perm-selected-allow-list">
                   <li class="perm-pattern-empty">Loading...</li>
                 </ul>
               </div>
               <div class="perm-selected-panel">
-                <h4 class="perm-selected-panel-title">Confirm Patterns</h4>
+                <h4 class="perm-selected-panel-title">Confirm Rules</h4>
                 <ul class="perm-pattern-list" id="perm-selected-confirm-list">
                   <li class="perm-pattern-empty">Loading...</li>
                 </ul>
@@ -531,7 +662,8 @@
             <div class="perm-selected-header perm-selected-header--compact">
               <div>
                 <div class="perm-selected-title">All Sessions</div>
-                <div class="perm-selected-subtitle">${esc('Aggregate policy state across all live and persisted sessions. The decision feed below is currently aggregate, not selection-scoped.')}${dataAdvisoryPlaceholder()}</div>
+                <div class="perm-selected-subtitle">${esc('Aggregate policy state across all live and persisted sessions. Rules shown here include both Dollhouse operation policies and external tool restrictions.')}${dataAdvisoryPlaceholder()}</div>
+                <div class="perm-inline-warning" id="perm-all-invalid-policy-summary" hidden></div>
               </div>
             </div>
 
@@ -543,19 +675,19 @@
                 </ul>
               </div>
               <div class="perm-selected-panel">
-                <h4 class="perm-selected-panel-title">Deny Patterns</h4>
+                <h4 class="perm-selected-panel-title">Deny Rules</h4>
                 <ul class="perm-pattern-list" id="perm-deny-list">
                   <li class="perm-pattern-empty">Loading...</li>
                 </ul>
               </div>
               <div class="perm-selected-panel">
-                <h4 class="perm-selected-panel-title">Allow Patterns</h4>
+                <h4 class="perm-selected-panel-title">Allow Rules</h4>
                 <ul class="perm-pattern-list" id="perm-allow-list">
                   <li class="perm-pattern-empty">Loading...</li>
                 </ul>
               </div>
               <div class="perm-selected-panel">
-                <h4 class="perm-selected-panel-title">Confirm Patterns</h4>
+                <h4 class="perm-selected-panel-title">Confirm Rules</h4>
                 <ul class="perm-pattern-list" id="perm-confirm-list">
                   <li class="perm-pattern-empty">Loading...</li>
                 </ul>
@@ -685,4 +817,25 @@
     return '<span id="perm-all-sessions-advisory" class="perm-inline-advisory" hidden></span>';
   }
 
+  function renderInvalidPolicySummary(elementId, elements) {
+    const banner = document.getElementById(elementId);
+    if (!banner) return;
+
+    const invalid = (elements || []).filter(function (element) {
+      return !!element.invalidGatekeeperPolicy;
+    });
+
+    if (invalid.length === 0) {
+      banner.hidden = true;
+      banner.textContent = '';
+      return;
+    }
+
+    const names = invalid.map(function (element) {
+      return element.element_name || element.name || 'unknown';
+    });
+    banner.hidden = false;
+    banner.textContent = `${invalid.length} active element${invalid.length === 1 ? '' : 's'} ha${invalid.length === 1 ? 's' : 've'} malformed gatekeeper policy. These elements remain active, but that policy is not being enforced: ${names.join(', ')}`;
+  }
+
 })();