@dollhousemcp/mcp-server 2.0.15 → 2.0.17

package/dist/web/public/index.html

@@ -77,6 +77,10 @@
           <strong>Pinned version</strong>
           <span>Lock to a specific version, update when you choose</span>
         </button>
+        <button class="setup-method-btn" data-method="permissions" aria-pressed="false">
+          <strong>Permissions &amp; Security</strong>
+          <span>Manual hook assets and enforcement guidance</span>
+        </button>
       </fieldset>
 
       <fieldset class="setup-channel-toggle" id="setup-channel-toggle">
@@ -119,6 +123,8 @@ npm install @dollhousemcp/mcp-server</code></pre>
         </div>
       </div>
 
+      <div class="setup-permissions-intro" id="setup-permissions-intro" hidden></div>
+
       <div class="setup-platforms" id="setup-platforms" role="tablist" aria-label="Platform install instructions">
         <button class="setup-platform-tab is-active" role="tab" aria-selected="true"  aria-controls="setup-panel-claude-desktop" id="setup-tab-claude-desktop">Claude Desktop</button>
         <button class="setup-platform-tab"           role="tab" aria-selected="false" aria-controls="setup-panel-claude-code"    id="setup-tab-claude-code">Claude Code</button>
@@ -133,7 +139,7 @@ npm install @dollhousemcp/mcp-server</code></pre>
 
       <!-- Claude Desktop -->
       <section class="setup-panel is-active" role="tabpanel" id="setup-panel-claude-desktop" aria-labelledby="setup-tab-claude-desktop">
-        <div class="setup-method setup-method-primary">
+        <div class="setup-method setup-method-primary" data-setup-modes="npx global">
           <h3>Auto-configure <span class="setup-method-badge setup-badge">auto-updating</span></h3>
           <p class="setup-method-desc">Pulls the latest version of DollhouseMCP on every startup. Uses <code>npx @latest</code> under the hood. Restart Claude Desktop after.</p>
           <div class="setup-install-row">
@@ -141,12 +147,12 @@ npm install @dollhousemcp/mcp-server</code></pre>
             <span class="setup-install-status" data-install-status="claude"></span>
           </div>
         </div>
-        <div class="setup-method setup-mcpb-option" id="setup-mcpb-section" hidden>
+        <div class="setup-method setup-mcpb-option" id="setup-mcpb-section" data-setup-modes="global" hidden>
           <h3>Or install via Desktop Extension <span class="setup-badge">pinned version</span></h3>
           <p>Download the <code>.mcpb</code> bundle and double-click it to install. Claude Desktop handles everything automatically &mdash; no terminal, no config editing. This installs a pinned copy that won't auto-update.</p>
           <a class="setup-btn setup-btn-secondary" href="/api/setup/mcpb" id="pinned-mcpb-btn">Download .mcpb <span id="pinned-mcpb-version"></span></a>
         </div>
-        <div class="setup-method">
+        <div class="setup-method" data-setup-modes="npx global">
           <h3>Or add manually
             <button class="setup-open-btn" type="button" data-open-client="claude">Open config file</button>
           </h3>
@@ -173,7 +179,7 @@ npm install @dollhousemcp/mcp-server</code></pre>
 
       <!-- Claude Code -->
       <section class="setup-panel" role="tabpanel" id="setup-panel-claude-code" aria-labelledby="setup-tab-claude-code" hidden>
-        <div class="setup-method setup-method-primary">
+        <div class="setup-method setup-method-primary" data-setup-modes="npx global">
           <h3>Auto-configure <span class="setup-method-badge setup-badge">auto-updating</span></h3>
           <p class="setup-method-desc">Adds DollhouseMCP to Claude Code, pulling the latest version on every startup.</p>
           <div class="setup-install-row">
@@ -181,7 +187,7 @@ npm install @dollhousemcp/mcp-server</code></pre>
             <span class="setup-install-status" data-install-status="claude-code"></span>
           </div>
         </div>
-        <div class="setup-method">
+        <div class="setup-method" data-setup-modes="npx global">
           <h3>Or run in your terminal</h3>
           <p>Start a new conversation and you're ready.</p>
           <div class="setup-code-block">
@@ -189,7 +195,7 @@ npm install @dollhousemcp/mcp-server</code></pre>
             <pre><code>claude mcp add dollhousemcp -- npx -y @dollhousemcp/mcp-server@latest</code></pre>
           </div>
         </div>
-        <div class="setup-method">
+        <div class="setup-method" data-setup-modes="npx global">
           <h3>Or add manually
             <button class="setup-open-btn" type="button" data-open-client="claude-code">Open config file</button>
           </h3>

package/dist/web/public/permissions.css

@@ -46,6 +46,11 @@
   box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
 }
 
+.perm-status-dot[data-status="warning"] {
+  background: #f59e0b;
+  box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
+}
+
 .perm-status-spacer {
   flex: 1;
 }
@@ -54,6 +59,12 @@
   color: var(--ink-400, #64748b);
 }
 
+.perm-inline-advisory {
+  display: inline-block;
+  color: var(--signal-4-ink, #b45309);
+  margin-top: 0.35rem;
+}
+
 /* ── Dashboard Grid ────────────────────────────────────────── */
 
 .perm-dashboard {

package/dist/web/public/permissions.js

@@ -116,6 +116,7 @@
   function render(data, selectedData) {
     renderStatusBar(data);
     renderSummaryStats(data);
+    renderAdvisory(data);
     renderPolicySources(data, selectedData);
     renderSelectedSessionDetail(selectedData);
     renderDenyPatterns(data);
@@ -137,6 +138,7 @@
     const serverDot = document.getElementById('perm-dot-server');
     const ensembleDot = document.getElementById('perm-dot-ensemble');
     const hookDot = document.getElementById('perm-dot-hook');
+    const hookLabel = hookDot ? hookDot.parentElement.querySelector('.perm-status-label') : null;
     const updated = document.getElementById('perm-last-updated');
 
     if (serverDot) {
@@ -149,11 +151,29 @@
       ensembleDot.parentElement.querySelector('.perm-status-label').textContent =
         hasElements ? `${data.activeElementCount} elements` : 'No ensemble';
     }
-    if (hookDot) {
-      const hasPatterns = (data.denyPatterns?.length || 0) + (data.allowPatterns?.length || 0) > 0;
-      hookDot.dataset.status = hasPatterns ? 'active' : 'inactive';
-      hookDot.parentElement.querySelector('.perm-status-label').textContent =
-        hasPatterns ? 'Policies active' : 'No policies';
+    if (hookDot && hookLabel) {
+      const hasExternalRules = (data.denyPatterns?.length || 0)
+        + (data.allowPatterns?.length || 0)
+        + (data.confirmPatterns?.length || 0) > 0;
+      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';
+      } else if (data.hookInstalled) {
+        hookDot.dataset.status = 'active';
+        hookLabel.textContent = data.hookHost ? `Hook installed (${data.hookHost})` : 'Hook installed';
+      } else {
+        hookDot.dataset.status = 'warning';
+        hookLabel.textContent = 'Policies loaded, not enforced';
+      }
     }
     if (updated) {
       updated.textContent = new Date().toLocaleTimeString();
@@ -161,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
@@ -176,6 +196,19 @@
     setText('perm-stat-asked', asked);
   }
 
+  function renderAdvisory(data) {
+    const advisory = document.getElementById('perm-all-sessions-advisory');
+    if (!advisory) return;
+
+    if (data && data.advisory) {
+      advisory.hidden = false;
+      advisory.textContent = ` ${data.advisory}`;
+    } else {
+      advisory.hidden = true;
+      advisory.textContent = '';
+    }
+  }
+
   function renderPolicySources(data, selectedData) {
     const list = document.getElementById('perm-source-list');
     if (!list) return;
@@ -190,7 +223,7 @@
     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)}</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('');
@@ -239,26 +272,26 @@
       : 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)}</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('');
 
-    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) {
@@ -266,7 +299,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;
     }
 
@@ -332,11 +365,11 @@
       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,
@@ -361,6 +394,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() {
@@ -374,10 +413,10 @@
           <span class="perm-status-dot" id="perm-dot-ensemble" data-status="inactive"></span>
           <span class="perm-status-label">Ensemble</span>
         </div>
-        <div class="perm-status-indicator">
-          <span class="perm-status-dot" id="perm-dot-hook" data-status="inactive"></span>
-          <span class="perm-status-label">Policies</span>
-        </div>
+          <div class="perm-status-indicator">
+            <span class="perm-status-dot" id="perm-dot-hook" data-status="inactive"></span>
+            <span class="perm-status-label">Policies</span>
+          </div>
         <span class="perm-status-spacer"></span>
         <span class="perm-status-updated">Updated: <span id="perm-last-updated">--:--:--</span></span>
       </div>
@@ -421,15 +460,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>
@@ -474,19 +513,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>
@@ -504,7 +543,7 @@
             <div class="perm-selected-header perm-selected-header--compact">
               <div>
                 <div class="perm-selected-title">All Sessions</div>
-                <div class="perm-selected-subtitle">Aggregate policy state across all live and persisted sessions. The decision feed below is currently aggregate, not selection-scoped.</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>
             </div>
 
@@ -516,19 +555,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>
@@ -654,4 +693,8 @@
     return str.length > len ? str.slice(0, len) + '...' : str;
   }
 
+  function dataAdvisoryPlaceholder() {
+    return '<span id="perm-all-sessions-advisory" class="perm-inline-advisory" hidden></span>';
+  }
+
 })();

package/dist/web/public/setup.css

@@ -70,7 +70,7 @@
 
 .setup-method-toggle {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.5rem;
   border: none;
   padding: 0;
@@ -162,6 +162,41 @@
   margin-bottom: 1.2rem;
 }
 
+.setup-permissions-intro {
+  display: grid;
+  gap: 1.2rem;
+  margin-bottom: 1.2rem;
+}
+
+.setup-permissions-intro[hidden] {
+  display: none !important;
+}
+
+.setup-permissions-note {
+  padding: 1rem 1.2rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--surface-2);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.setup-permissions-note strong {
+  display: block;
+  font-family: var(--font-heading);
+  font-size: var(--step-0);
+  font-weight: 700;
+  color: var(--ink-950);
+  margin-bottom: 0.35rem;
+}
+
+.setup-permissions-note p {
+  margin: 0;
+  color: var(--ink-700);
+  font-size: var(--step--1);
+  line-height: 1.55;
+}
+
 .setup-method h4 {
   font-family: var(--font-heading);
   font-size: var(--step-0);
@@ -217,6 +252,7 @@
 .setup-panel {
   display: grid;
   gap: 1.2rem;
+  min-width: 0;
 }
 
 .setup-panel[hidden] {
@@ -230,6 +266,7 @@
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
   padding: 1.2rem 1.4rem;
+  min-width: 0;
 }
 
 .setup-method-primary {
@@ -259,6 +296,131 @@
   margin-bottom: 0;
 }
 
+.setup-security-mode code {
+  word-break: break-word;
+}
+
+.setup-security-mode {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.setup-manual-fallback {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-1);
+  overflow: hidden;
+}
+
+.setup-manual-fallback summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 0.9rem 1rem;
+  font-family: var(--font-heading);
+  font-size: var(--step-0);
+  font-weight: 600;
+  color: var(--ink-900);
+}
+
+.setup-manual-fallback summary::-webkit-details-marker {
+  display: none;
+}
+
+.setup-manual-fallback summary::after {
+  content: '+';
+  float: right;
+  color: var(--ink-500);
+}
+
+.setup-manual-fallback[open] summary::after {
+  content: '-';
+}
+
+.setup-manual-fallback-body {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid var(--line);
+}
+
+.setup-permission-status {
+  margin: 0 0 0.8rem;
+  padding: 0.85rem 1rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface-1) 85%, white);
+}
+
+.setup-permission-status-title {
+  display: block;
+  margin-bottom: 0.3rem;
+  color: var(--ink-900);
+}
+
+.setup-permission-status-msg {
+  margin: 0;
+  color: var(--ink-700);
+}
+
+.setup-permission-status[data-state="warning"] {
+  border-color: color-mix(in srgb, #f59e0b 40%, var(--line));
+  background: color-mix(in srgb, #f59e0b 10%, var(--surface-2));
+}
+
+.setup-permission-status[data-state="warning"] .setup-permission-status-title {
+  color: #b45309;
+}
+
+.setup-permission-status[data-state="info"] {
+  border-color: color-mix(in srgb, var(--signal) 30%, var(--line));
+  background: color-mix(in srgb, var(--signal-2) 10%, var(--surface-2));
+}
+
+.setup-permission-status[data-state="info"] .setup-permission-status-title {
+  color: var(--signal);
+}
+
+[data-theme="dark"] .setup-permission-status[data-state="warning"] .setup-permission-status-title {
+  color: #fbbf24;
+}
+
+.setup-support-badge {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.45rem;
+  padding: 0.18rem 0.5rem;
+  border-radius: 999px;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.setup-support-badge--verified {
+  background: color-mix(in srgb, #22c55e 18%, var(--surface-2));
+  color: #15803d;
+  border: 1px solid color-mix(in srgb, #22c55e 45%, var(--line));
+}
+
+.setup-support-badge--manual {
+  background: color-mix(in srgb, #f59e0b 14%, var(--surface-2));
+  color: #b45309;
+  border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--line));
+}
+
+.setup-support-badge--unsupported {
+  background: color-mix(in srgb, #64748b 14%, var(--surface-2));
+  color: var(--ink-600);
+  border: 1px solid color-mix(in srgb, #64748b 35%, var(--line));
+}
+
+[data-theme="dark"] .setup-support-badge--verified {
+  color: #4ade80;
+}
+
+[data-theme="dark"] .setup-support-badge--manual {
+  color: #fbbf24;
+}
+
 .setup-paths {
   list-style: none;
   margin: 0 0 0.8rem;
@@ -292,6 +454,8 @@
 .setup-code-block {
   position: relative;
   margin: 0.5rem 0;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .setup-code-block pre {
@@ -307,6 +471,9 @@
   overflow-x: auto;
   white-space: pre;
   tab-size: 2;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
 }
 
 [data-theme="dark"] .setup-code-block pre {
@@ -667,6 +834,10 @@
     padding: 1rem;
   }
 
+  .setup-method-toggle {
+    grid-template-columns: 1fr;
+  }
+
   .setup-platforms {
     gap: 0.25rem;
   }