@dollhousemcp/mcp-server 2.0.17 → 2.0.19

package/dist/web/public/app.js

@@ -1978,12 +1978,70 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
 
     const TAB_KEY = 'dollhousemcp-active-tab';
     const SETUP_SEEN_KEY = 'dollhousemcp-setup-seen';
+    const FORCED_RELOAD_KEY = 'dollhousemcp-last-forced-reload';
     // Server version injected at request time — used to show Setup tab once per version
     // so upgraders automatically see it on each new release (not just first-ever visit).
     // Validate format (semver-like) before trusting the value; malformed falls back to
     // 'unknown' which safely triggers setup on every load rather than silently skipping.
     const _rawVersion = document.querySelector('meta[name="dollhouse-server-version"]')?.content || '';
     const currentServerVersion = /^\d+\.\d+\.\d+/.test(_rawVersion) ? _rawVersion : 'unknown';
+    const _rawAssetVersion = document.querySelector('meta[name="dollhouse-console-asset-version"]')?.content || '';
+    const currentAssetVersion = /^\d+\.\d+\.\d+/.test(_rawAssetVersion) ? _rawAssetVersion : currentServerVersion;
+    let forcedReloadInFlight = false;
+
+    function normalizeReloadVersion(version) {
+      return typeof version === 'string' && /^\d+\.\d+\.\d+/.test(version)
+        ? version
+        : (currentAssetVersion || currentServerVersion || 'unknown');
+    }
+
+    function shouldThrottleForcedReload(targetVersion) {
+      try {
+        const raw = sessionStorage.getItem(FORCED_RELOAD_KEY);
+        if (!raw) return false;
+        const parsed = JSON.parse(raw);
+        return parsed
+          && parsed.version === targetVersion
+          && typeof parsed.at === 'number'
+          && Date.now() - parsed.at < 60_000;
+      } catch {
+        return false;
+      }
+    }
+
+    function rememberForcedReload(targetVersion, reason) {
+      try {
+        sessionStorage.setItem(FORCED_RELOAD_KEY, JSON.stringify({
+          version: targetVersion,
+          reason: reason || 'manual',
+          at: Date.now(),
+        }));
+      } catch {
+        // Ignore storage failures — reload still proceeds.
+      }
+    }
+
+    function buildCacheBustedConsoleUrl(targetVersion, reason) {
+      const url = new URL(globalThis.location.href);
+      url.searchParams.set('dollhouse_bust', targetVersion + '-' + Date.now());
+      url.searchParams.set('dollhouse_asset_version', targetVersion);
+      if (reason) {
+        url.searchParams.set('dollhouse_reload_reason', reason);
+      }
+      return url.toString();
+    }
+
+    function forceConsoleReload(reason, targetVersion) {
+      const normalizedTargetVersion = normalizeReloadVersion(targetVersion);
+      if (forcedReloadInFlight || shouldThrottleForcedReload(normalizedTargetVersion)) {
+        return false;
+      }
+      forcedReloadInFlight = true;
+      rememberForcedReload(normalizedTargetVersion, reason);
+      const reloadUrl = buildCacheBustedConsoleUrl(normalizedTargetVersion, reason);
+      globalThis.location.replace(reloadUrl);
+      return true;
+    }
 
     // Determine which tab to show on load:
     // 1. URL hash (deep link)
@@ -2022,6 +2080,9 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
     // Expose for other scripts (logs.js, metrics.js, permissions.js)
     globalThis.DollhouseConsole = globalThis.DollhouseConsole || {};
     globalThis.DollhouseConsole.getUrlParams = () => getTabAndParams().params;
+    globalThis.DollhouseConsole.currentServerVersion = currentServerVersion;
+    globalThis.DollhouseConsole.currentAssetVersion = currentAssetVersion;
+    globalThis.DollhouseConsole.forceReload = forceConsoleReload;
 
     /**
      * Apply URL params to the portfolio tab.
@@ -2175,7 +2236,7 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
       toast.innerHTML = 'Console session token changed\u2009\u2014\u2009'
         + '<button style="background:#fff;color:#b91c1c;border:none;padding:6px 16px;'
         + 'border-radius:4px;cursor:pointer;font-weight:600;font-size:14px"'
-        + ' onclick="location.reload()">Reload</button>';
+        + ' onclick="window.DollhouseConsole.forceReload(\'session-expired\')">Reload</button>';
       document.body.appendChild(toast);
     });
 

package/dist/web/public/index.html

@@ -14,14 +14,16 @@
   <meta name="dollhouse-console-token" content="{{CONSOLE_TOKEN}}">
   <!-- Server version — injected at request time for version-aware UI behaviour (e.g. setup-seen per version). -->
   <meta name="dollhouse-server-version" content="{{DOLLHOUSE_VERSION}}">
-  <link rel="stylesheet" href="fonts.css">
-  <link rel="stylesheet" href="styles.css">
-  <link rel="stylesheet" href="logs.css">
-  <link rel="stylesheet" href="metrics.css">
-  <link rel="stylesheet" href="permissions.css">
-  <link rel="stylesheet" href="sessions.css">
-  <link rel="stylesheet" href="setup.css">
-  <link rel="stylesheet" href="security.css">
+  <!-- Asset version — injected at request time for cache-busting local CSS/JS/img files. -->
+  <meta name="dollhouse-console-asset-version" content="{{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="fonts.css?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="styles.css?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="logs.css?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="metrics.css?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="permissions.css?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="sessions.css?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="setup.css?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="stylesheet" href="security.css?v={{DOLLHOUSE_ASSET_VERSION}}">
   <!-- uPlot for metrics time-series charts -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uplot@1.6.30/dist/uPlot.min.css" integrity="sha384-IfV0B7MIOYuO95kO9G5ySKPz/85zqFNOAs8iy4tkK5zd9izhJAB8b7lHrwYqqmYE" crossorigin="anonymous">
 </head>
@@ -31,7 +33,7 @@
 
   <header class="site-header">
     <div class="header-brand">
-      <img src="dollhouse-logo.png" alt="DollhouseMCP" class="header-logo" width="32" height="32">
+      <img src="dollhouse-logo.png?v={{DOLLHOUSE_ASSET_VERSION}}" alt="DollhouseMCP" class="header-logo" width="32" height="32">
       <div class="header-brand-text">
         <h1 class="site-title">DollhouseMCP</h1>
         <p class="site-tagline">Management Console</p>
@@ -598,13 +600,13 @@ npm install @dollhousemcp/mcp-server</code></pre>
   <script src="https://cdn.jsdelivr.net/npm/uplot@1.6.30/dist/uPlot.iife.min.js" integrity="sha384-1NEYi76CBpge3gahk4+X4M4JzdOV3WYq84RnByqYdAd5SdvJBTNCPFh/nsoHfN6i" crossorigin="anonymous"></script>
   <!-- Console auth helper must load first — it reads the token meta tag and
        exposes window.DollhouseAuth for all subsequent scripts (#1780). -->
-  <script src="consoleAuth.js"></script>
-  <script src="setup.js"></script>
-  <script src="app.js"></script>
-  <script src="logs.js"></script>
-  <script src="metrics.js"></script>
-  <script src="permissions.js"></script>
-  <script src="sessions.js"></script>
-  <script src="security.js"></script>
+  <script src="consoleAuth.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
+  <script src="setup.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
+  <script src="app.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
+  <script src="logs.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
+  <script src="metrics.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
+  <script src="permissions.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
+  <script src="sessions.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
+  <script src="security.js?v={{DOLLHOUSE_ASSET_VERSION}}"></script>
 </body>
 </html>

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

@@ -217,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) {
@@ -267,15 +265,10 @@
     }
 
     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.denyRules || [], 'deny');
     renderPatternList('perm-selected-allow-list', selectedData.allowRules || [], 'allow');
@@ -331,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;
 
@@ -375,6 +491,8 @@
           type: element.type,
           element_name: element.element_name,
           description: element.description,
+          invalidGatekeeperPolicy: !!element.invalidGatekeeperPolicy,
+          invalidGatekeeperMessage: element.invalidGatekeeperMessage,
         };
       }),
       permissionPromptActive: !!aggregateData?.permissionPromptActive,
@@ -501,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>
@@ -544,6 +663,7 @@
               <div>
                 <div class="perm-selected-title">All Sessions</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>
 
@@ -697,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(', ')}`;
+  }
+
 })();