@dollhousemcp/mcp-server 2.0.26 → 2.0.27-rc.2

package/dist/web/public/app.js

@@ -105,6 +105,7 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
   let activeSort = 'date-desc';
   let activeSource = 'all'; // 'all' | 'collection' | 'portfolio'
   let searchQuery = '';
+  const DOLLHOUSE_SERVER_VERSION = document.querySelector('meta[name="dollhouse-server-version"]')?.content || '';
   const DOLLHOUSE_SESSION_ID = document.querySelector('meta[name="dollhouse-session-id"]')?.content || '';
   const DOLLHOUSE_RUNTIME_SESSION_ID = document.querySelector('meta[name="dollhouse-runtime-session-id"]')?.content || '';
 
@@ -117,6 +118,10 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
       .replaceAll("'", ''');
   }
 
+  function normalizeInlineMetaText(value) {
+    return typeof value === 'string' ? value.trim() : '';
+  }
+
   function renderHeaderStatsMarkup(primaryMarkup) {
     const sessionTitle = DOLLHOUSE_RUNTIME_SESSION_ID && DOLLHOUSE_RUNTIME_SESSION_ID !== DOLLHOUSE_SESSION_ID
       ? `Stable session ${DOLLHOUSE_SESSION_ID}; runtime ${DOLLHOUSE_RUNTIME_SESSION_ID}`
@@ -130,6 +135,96 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
     return `${primaryMarkup}${sessionMarkup}`;
   }
 
+  function updateFooterVersion() {
+    // Keep the running build visible in the fixed footer so operators can
+    // quickly confirm which console version a given tab or machine is serving.
+    const footerVersion = document.getElementById('footer-version');
+    if (!footerVersion) return;
+    footerVersion.textContent = `Version: ${DOLLHOUSE_SERVER_VERSION || 'unknown'}`;
+  }
+
+  function wireThemeToggle() {
+    const themeToggleBtn  = document.getElementById('theme-toggle');
+    const themeToggleIcon = document.getElementById('theme-toggle-icon');
+    const themeToggleLbl  = document.getElementById('theme-toggle-label');
+    const html = document.documentElement;
+
+    function applyTheme(theme) {
+      html.dataset.theme = theme;
+      const isDark = theme === 'dark';
+      if (themeToggleIcon) themeToggleIcon.textContent = isDark ? '☀' : '☾';
+      if (themeToggleLbl) themeToggleLbl.textContent = isDark ? 'Switch to light mode' : 'Switch to dark mode';
+      if (themeToggleBtn) themeToggleBtn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+      const hljsLight = document.getElementById('hljs-theme-light');
+      const hljsDark = document.getElementById('hljs-theme-dark');
+      if (hljsLight) hljsLight.disabled = isDark;
+      if (hljsDark) hljsDark.disabled = !isDark;
+      try { localStorage.setItem('color-scheme', theme); } catch {}
+    }
+
+    const saved = (() => { try { return localStorage.getItem('color-scheme'); } catch {} })();
+    const preferred = saved || (globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    applyTheme(preferred);
+
+    if (themeToggleBtn) {
+      themeToggleBtn.addEventListener('click', () => {
+        applyTheme(html.dataset.theme === 'dark' ? 'light' : 'dark');
+      });
+    }
+  }
+
+  function wireViewToggle() {
+    const viewToggle = document.getElementById('view-toggle');
+    const elemGrid = document.getElementById('elements-grid');
+    let activeView = (() => { try { return localStorage.getItem('collection-view') || 'grid'; } catch { return 'grid'; } })();
+
+    function applyView(view) {
+      activeView = view;
+      if (elemGrid) elemGrid.dataset.view = view;
+      viewToggle?.querySelectorAll('.view-btn').forEach(btn => {
+        const on = btn.dataset.view === view;
+        btn.classList.toggle('active', on);
+        btn.setAttribute('aria-pressed', on);
+      });
+      try { localStorage.setItem('collection-view', view); } catch {}
+    }
+
+    applyView(activeView);
+
+    viewToggle?.addEventListener('click', e => {
+      const btn = e.target.closest('[data-view]');
+      if (btn) applyView(btn.dataset.view);
+    });
+  }
+
+  function wireSortControls() {
+    const sortSelect = document.getElementById('sort-select');
+    if (!sortSelect) return;
+    sortSelect.value = activeSort;
+    sortSelect.addEventListener('change', e => {
+      activeSort = e.target.value;
+      applyFilters();
+    });
+  }
+
+  function wireSourceToggle() {
+    const sourceToggle = document.getElementById('source-toggle');
+    if (!sourceToggle) return;
+    sourceToggle.addEventListener('click', e => {
+      const btn = e.target.closest('[data-source]');
+      if (!btn) return;
+      activeSource = btn.dataset.source;
+      sourceToggle.querySelectorAll('[data-source]').forEach(b => {
+        const on = b.dataset.source === activeSource;
+        b.classList.toggle('active', on);
+        b.setAttribute('aria-pressed', on);
+      });
+      renderTypeFilters();
+      renderTopicFilters();
+      applyFilters();
+    });
+  }
+
   // ── Bootstrap ──────────────────────────────────────────────────────────────
 
   function mergeCollectionData(data) {
@@ -458,6 +553,7 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
       const idx = pageStart + i; // absolute index into filteredElements
       const unavailable = el._unavailable;
       const compSummary = renderComponentSummary(el);
+      const author = normalizeInlineMetaText(el.author);
       return `
       <article
         class="element-card"
@@ -483,7 +579,7 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
         ${compSummary}
         <footer class="card-footer">
           <div class="card-meta">
-            ${el.author   ? `<span class="meta-author">${escapeHtml(el.author)}</span>` : ''}
+            ${author      ? `<span class="meta-author">by ${escapeHtml(author)}</span>` : ''}
             ${el.version  ? `<span class="meta-version">v${escapeHtml(el.version)}</span>` : ''}
             ${el.category ? `<span class="meta-category">${escapeHtml(el.category)}</span>` : ''}
             ${el.created  ? `<span class="meta-date">${formatDate(el.created)}</span>` : ''}
@@ -682,9 +778,10 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
   }
 
   function setupModalMeta(element, modal) {
+    const author = normalizeInlineMetaText(element.author);
     modal.querySelector('.modal-title').textContent   = element.name;
     modal.querySelector('.modal-type').textContent    = capitalize(element.type);
-    modal.querySelector('.modal-author').textContent  = element.author ? `by ${element.author}` : '';
+    modal.querySelector('.modal-author').textContent  = author ? `by ${author}` : '';
     modal.querySelector('.modal-version').textContent = element.version ? `v${element.version}` : '';
     const modalDate   = modal.querySelector('.modal-date');
     const modalSource = modal.querySelector('.modal-source');
@@ -1877,70 +1974,10 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
   // ── Event wiring ───────────────────────────────────────────────────────────
 
   document.addEventListener('DOMContentLoaded', () => {
-
-    // Theme toggle
-    const themeToggleBtn  = document.getElementById('theme-toggle');
-    const themeToggleIcon = document.getElementById('theme-toggle-icon');
-    const themeToggleLbl  = document.getElementById('theme-toggle-label');
-    const html = document.documentElement;
-
-    function applyTheme(theme) {
-      html.dataset.theme = theme;
-      const isDark = theme === 'dark';
-      if (themeToggleIcon) themeToggleIcon.textContent = isDark ? '☀' : '☾';
-      if (themeToggleLbl)  themeToggleLbl.textContent  = isDark ? 'Switch to light mode' : 'Switch to dark mode';
-      if (themeToggleBtn)  themeToggleBtn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
-      // Sync highlight.js theme
-      const hljsLight = document.getElementById('hljs-theme-light');
-      const hljsDark  = document.getElementById('hljs-theme-dark');
-      if (hljsLight) hljsLight.disabled = isDark;
-      if (hljsDark)  hljsDark.disabled  = !isDark;
-      try { localStorage.setItem('color-scheme', theme); } catch {}
-    }
-
-    // Restore saved preference; fall back to OS preference
-    const saved = (() => { try { return localStorage.getItem('color-scheme'); } catch {} })();
-    const preferred = saved || (globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-    applyTheme(preferred);
-
-    if (themeToggleBtn) {
-      themeToggleBtn.addEventListener('click', () => {
-        applyTheme(html.dataset.theme === 'dark' ? 'light' : 'dark');
-      });
-    }
-
-    // View toggle
-    const viewToggle = document.getElementById('view-toggle');
-    const elemGrid   = document.getElementById('elements-grid');
-    let activeView = (() => { try { return localStorage.getItem('collection-view') || 'grid'; } catch { return 'grid'; } })();
-
-    function applyView(view) {
-      activeView = view;
-      if (elemGrid) elemGrid.dataset.view = view;
-      viewToggle?.querySelectorAll('.view-btn').forEach(btn => {
-        const on = btn.dataset.view === view;
-        btn.classList.toggle('active', on);
-        btn.setAttribute('aria-pressed', on);
-      });
-      try { localStorage.setItem('collection-view', view); } catch {}
-    }
-
-    applyView(activeView);
-
-    viewToggle?.addEventListener('click', e => {
-      const btn = e.target.closest('[data-view]');
-      if (btn) applyView(btn.dataset.view);
-    });
-
-    // Sort
-    const sortSelect = document.getElementById('sort-select');
-    if (sortSelect) {
-      sortSelect.value = activeSort;
-      sortSelect.addEventListener('change', e => {
-        activeSort = e.target.value;
-        applyFilters();
-      });
-    }
+    updateFooterVersion();
+    wireThemeToggle();
+    wireViewToggle();
+    wireSortControls();
 
     // Search
     const searchInput = document.getElementById('search-input');
@@ -1975,29 +2012,16 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
       }
     });
 
-    // Source toggle
-    const sourceToggle = document.getElementById('source-toggle');
-    if (sourceToggle) {
-      sourceToggle.addEventListener('click', e => {
-        const btn = e.target.closest('[data-source]');
-        if (!btn) return;
-        activeSource = btn.dataset.source;
-        sourceToggle.querySelectorAll('[data-source]').forEach(b => {
-          const on = b.dataset.source === activeSource;
-          b.classList.toggle('active', on);
-          b.setAttribute('aria-pressed', on);
-        });
-        renderTypeFilters();
-        renderTopicFilters();
-        applyFilters();
-      });
-    }
+    wireSourceToggle();
 
     // Portfolio button
     document.getElementById('btn-portfolio')?.addEventListener('click', loadLocalPortfolio);
 
     // ── Tab switching ─────────────────────────────────────────────────────────
     const consoleTabs = document.getElementById('console-tabs');
+    const headerNavRow = document.querySelector('.header-nav-row');
+    const consoleTabMenuToggle = document.getElementById('console-tab-menu-toggle');
+    const consoleTabMenu = document.getElementById('console-tab-menu');
     const tabInits = { logs: false, metrics: false, permissions: false, security: false };
 
     const TAB_KEY = 'dollhousemcp-active-tab';
@@ -2082,8 +2106,71 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
         p.hidden = p.id !== 'tab-' + tabName;
         p.classList.toggle('active', p.id === 'tab-' + tabName);
       });
+      syncConsoleTabMenuSelection();
+      closeConsoleTabMenu();
+      scheduleConsoleTabOverflowCheck();
     };
 
+    function renderConsoleTabMenu() {
+      if (!consoleTabs || !consoleTabMenu) return;
+      consoleTabMenu.innerHTML = '';
+      consoleTabs.querySelectorAll('.console-tab').forEach((btn) => {
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.className = 'console-tab-menu-item';
+        item.dataset.tab = btn.dataset.tab || '';
+        item.setAttribute('role', 'menuitem');
+        item.textContent = btn.textContent || '';
+        if (btn.classList.contains('active')) item.classList.add('active');
+        consoleTabMenu.appendChild(item);
+      });
+    }
+
+    function syncConsoleTabMenuSelection() {
+      if (!consoleTabs || !consoleTabMenu) return;
+      const activeTab = consoleTabs.querySelector('.console-tab.active')?.dataset.tab || '';
+      consoleTabMenu.querySelectorAll('.console-tab-menu-item').forEach((item) => {
+        item.classList.toggle('active', item.dataset.tab === activeTab);
+      });
+    }
+
+    function closeConsoleTabMenu() {
+      if (!consoleTabMenu || !consoleTabMenuToggle) return;
+      consoleTabMenu.hidden = true;
+      consoleTabMenuToggle.setAttribute('aria-expanded', 'false');
+    }
+
+    function tabsNeedOverflowMenu() {
+      if (!consoleTabs) return false;
+      const buttons = Array.from(consoleTabs.querySelectorAll('.console-tab'));
+      if (buttons.length < 2) return false;
+      const firstTop = buttons[0].offsetTop;
+      return buttons.some((btn) => btn.offsetTop !== firstTop);
+    }
+
+    let consoleTabOverflowFrame = 0;
+    function updateConsoleTabOverflow() {
+      if (!consoleTabs || !headerNavRow || !consoleTabMenuToggle) return;
+      headerNavRow.classList.remove('header-nav-row--collapsed');
+      consoleTabMenuToggle.hidden = true;
+      const shouldCollapse = tabsNeedOverflowMenu();
+      if (shouldCollapse) {
+        headerNavRow.classList.add('header-nav-row--collapsed');
+        consoleTabMenuToggle.hidden = false;
+      }
+      if (!shouldCollapse) {
+        closeConsoleTabMenu();
+      }
+    }
+
+    function scheduleConsoleTabOverflowCheck() {
+      if (consoleTabOverflowFrame) cancelAnimationFrame(consoleTabOverflowFrame);
+      consoleTabOverflowFrame = requestAnimationFrame(() => {
+        consoleTabOverflowFrame = 0;
+        updateConsoleTabOverflow();
+      });
+    }
+
     /**
      * Parse the URL hash into tab name and query parameters.
      * Supports fragment-query pattern: #tab?key=value&key=value
@@ -2218,6 +2305,15 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
     // Handle hash changes for deep-linking (e.g., open_logs operation)
     globalThis.addEventListener('hashchange', () => applyHashTab());
 
+    renderConsoleTabMenu();
+    syncConsoleTabMenuSelection();
+    scheduleConsoleTabOverflowCheck();
+    globalThis.addEventListener('resize', scheduleConsoleTabOverflowCheck);
+    if (typeof ResizeObserver === 'function' && headerNavRow) {
+      const tabOverflowObserver = new ResizeObserver(() => scheduleConsoleTabOverflowCheck());
+      tabOverflowObserver.observe(headerNavRow);
+    }
+
     if (consoleTabs) {
       consoleTabs.addEventListener('click', (e) => {
         const btn = e.target.closest('.console-tab');
@@ -2232,6 +2328,31 @@ globalThis.DollhouseConsoleUI.clearBanner = function(bannerId) {
       });
     }
 
+    consoleTabMenuToggle?.addEventListener('click', () => {
+      if (!consoleTabMenu) return;
+      const willOpen = consoleTabMenu.hidden;
+      consoleTabMenu.hidden = !willOpen;
+      consoleTabMenuToggle.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
+    });
+
+    consoleTabMenu?.addEventListener('click', (e) => {
+      const btn = e.target.closest('.console-tab-menu-item');
+      if (!btn?.dataset.tab) return;
+      const tab = btn.dataset.tab;
+      switchToTab(tab);
+      localStorage.setItem(TAB_KEY, tab);
+      lazyInitTab(tab, tabInits);
+    });
+
+    globalThis.addEventListener('click', (e) => {
+      if (!consoleTabMenu || !consoleTabMenuToggle) return;
+      if (consoleTabMenu.hidden) return;
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      if (consoleTabMenu.contains(target) || consoleTabMenuToggle.contains(target)) return;
+      closeConsoleTabMenu();
+    });
+
     function lazyInitTab(tab, tabInits, params) {
       const dc = globalThis.DollhouseConsole;
       const module = dc?.[tab];

package/dist/web/public/index.html

@@ -18,6 +18,8 @@
   <meta name="dollhouse-runtime-session-id" content="{{DOLLHOUSE_RUNTIME_SESSION_ID}}">
   <!-- 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="icon" type="image/png" href="dollhouse-logo.png?v={{DOLLHOUSE_ASSET_VERSION}}">
+  <link rel="apple-touch-icon" href="dollhouse-logo.png?v={{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}}">
@@ -41,7 +43,14 @@
         <p class="site-tagline">Management Console</p>
       </div>
     </div>
-    <div class="header-right">
+    <div class="header-controls">
+      <div class="site-stats" id="stats" aria-live="polite"></div>
+      <button class="theme-toggle" id="theme-toggle" type="button" aria-label="Switch to dark mode" title="Switch to dark mode">
+        <span class="theme-toggle-icon" id="theme-toggle-icon" aria-hidden="true">&#9790;</span>
+        <span class="sr-only" id="theme-toggle-label">Switch to dark mode</span>
+      </button>
+    </div>
+    <div class="header-nav-row">
       <nav class="console-tabs" id="console-tabs" aria-label="Console tabs">
         <button class="console-tab" data-tab="setup">Setup</button>
         <button class="console-tab" data-tab="security">Auth</button>
@@ -50,12 +59,14 @@
         <button class="console-tab" data-tab="permissions">Permissions</button>
         <button class="console-tab active" data-tab="portfolio">Portfolio</button>
       </nav>
+      <div class="console-tab-menu-shell" id="console-tab-menu-shell">
+        <button class="console-tab-menu-toggle" id="console-tab-menu-toggle" type="button" hidden aria-haspopup="menu" aria-expanded="false" aria-controls="console-tab-menu">
+          <span class="console-tab-menu-icon" aria-hidden="true">&#9776;</span>
+          <span class="console-tab-menu-label">Menu</span>
+        </button>
+        <div class="console-tab-menu" id="console-tab-menu" role="menu" hidden></div>
+      </div>
       <div class="session-indicator" id="session-indicator" title="Active sessions"></div>
-      <div class="site-stats" id="stats" aria-live="polite"></div>
-      <button class="theme-toggle" id="theme-toggle" type="button" aria-label="Switch to dark mode" title="Switch to dark mode">
-        <span class="theme-toggle-icon" id="theme-toggle-icon" aria-hidden="true">&#9790;</span>
-        <span class="sr-only" id="theme-toggle-label">Switch to dark mode</span>
-      </button>
     </div>
   </header>
 
@@ -570,6 +581,7 @@ npm install @dollhousemcp/mcp-server</code></pre>
       <a href="https://github.com/DollhouseMCP/mcp-server" class="footer-link">GitHub Repository</a>
       <a href="./collection-index.json" class="footer-link">JSON API</a>
       <a href="https://dollhousemcp.com" class="footer-link">DollhouseMCP</a>
+      <span class="footer-version" id="footer-version" aria-live="polite" aria-atomic="true"></span>
       <span class="footer-updated" id="footer-updated"></span>
       <span class="footer-copyright">&copy; 2026 DollhouseMCP</span>
     </div>

package/dist/web/public/logs.css

@@ -6,7 +6,7 @@
 .log-viewer {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 120px);
+  height: calc(100dvh - var(--site-footer-height, 4.5rem) - 120px);
   font-family: var(--font-mono);
   font-size: 12.5px;
   line-height: 1.5;
@@ -470,3 +470,159 @@
 .log-jump-bottom:hover {
   background: var(--signal-2);
 }
+
+@media (max-width: 48rem) {
+  .log-viewer {
+    height: calc(100dvh - var(--site-footer-height, 4.5rem) - 104px);
+  }
+
+  .log-controls {
+    padding: 10px;
+    gap: 10px;
+  }
+
+  .log-filter-group {
+    flex: 1 1 calc(50% - 10px);
+    min-width: 0;
+  }
+
+  .log-filter-group label {
+    flex-shrink: 0;
+  }
+
+  .log-controls select,
+  .log-controls input,
+  .log-search {
+    min-width: 0;
+    width: 100%;
+    max-width: none;
+  }
+
+  .log-status-bar {
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 8px 10px;
+  }
+
+  .log-entry-count {
+    margin-left: 0;
+    width: 100%;
+    order: 10;
+  }
+
+  .log-entry {
+    display: grid;
+    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "checkbox time level source corr"
+      ". message message message message";
+    align-items: start;
+    gap: 4px 8px;
+    padding: 6px 10px;
+    min-height: 74px;
+    white-space: normal;
+  }
+
+  .log-checkbox {
+    grid-area: checkbox;
+    margin-top: 1px;
+  }
+
+  .log-time {
+    grid-area: time;
+    width: auto;
+  }
+
+  .log-level {
+    grid-area: level;
+    width: auto;
+    min-width: 42px;
+    padding-inline: 6px;
+  }
+
+  .log-category {
+    display: none;
+  }
+
+  .log-source {
+    grid-area: source;
+    max-width: none;
+    min-width: 0;
+  }
+
+  .log-corr-badge {
+    grid-area: corr;
+    width: auto;
+    justify-self: end;
+  }
+
+  .log-message {
+    grid-area: message;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: initial;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 1.45;
+  }
+
+  .log-detail-card {
+    width: min(680px, calc(100vw - 1rem));
+    max-height: calc(100vh - 1rem);
+    border-radius: 0.9rem;
+  }
+
+  .log-detail-card-header {
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+  }
+
+  .log-detail-card-actions {
+    width: 100%;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .log-detail-field {
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .log-detail-field-label {
+    min-width: 0;
+  }
+
+  .log-jump-bottom {
+    right: 12px;
+    bottom: 12px;
+  }
+}
+
+@media (max-width: 32rem) {
+  .log-filter-group {
+    flex: 1 1 100%;
+  }
+
+  .log-entry {
+    grid-template-columns: auto auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "checkbox level source corr"
+      ". time time time"
+      ". message message message";
+    min-height: 96px;
+  }
+
+  .log-time {
+    color: var(--ink-700);
+  }
+
+  .log-source {
+    font-size: 10px;
+  }
+
+  .log-status-indicator {
+    width: 100%;
+  }
+}