@dollhousemcp/mcp-server 2.0.14 → 2.0.16

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,23 @@
       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 hasPatterns = (data.denyPatterns?.length || 0)
+        + (data.allowPatterns?.length || 0)
+        + (data.confirmPatterns?.length || 0) > 0;
+      if (!hasPatterns) {
+        hookDot.dataset.status = 'inactive';
+        hookLabel.textContent = 'No policies';
+      } 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();
@@ -176,6 +190,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 +217,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,7 +266,7 @@
       : 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('');
@@ -374,10 +401,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>
@@ -504,7 +531,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. The decision feed below is currently aggregate, not selection-scoped.')}${dataAdvisoryPlaceholder()}</div>
               </div>
             </div>
 
@@ -654,4 +681,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;
   }