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

package/dist/web/public/logs.js

@@ -13,10 +13,14 @@
 
 (() => {
   const BUFFER_SIZE = 10000;
-  const ROW_HEIGHT = 22;
+  const DEFAULT_ROW_HEIGHT = 22;
+  const COMPACT_ROW_HEIGHT = 74;
+  const EXTRA_COMPACT_ROW_HEIGHT = 96;
   const OVERSCAN = 5;
   const RECONNECT_DELAY_MS = 3000;
   const SEARCH_DEBOUNCE_MS = 300;
+  const COMPACT_LOG_LAYOUT_QUERY = '(max-width: 48rem)';
+  const EXTRA_COMPACT_LOG_LAYOUT_QUERY = '(max-width: 32rem)';
 
   // ── State ────────────────────────────────────────────────────────────────
   const buffer = [];
@@ -27,6 +31,8 @@
   let searchTimer = null;
   let pendingEntries = [];
   let rafScheduled = false;
+  let compactLogLayoutMedia = null;
+  let extraCompactLogLayoutMedia = null;
 
   // Selection state
   const selectedIds = new Set();
@@ -78,6 +84,7 @@
     if (urlParams) applyLogUrlParams(urlParams);
 
     bindEvents();
+    bindResponsiveLayout();
     connectSSE();
 
     requestAnimationFrame(() => {
@@ -142,6 +149,14 @@
       eventSource.close();
       eventSource = null;
     }
+    if (compactLogLayoutMedia) {
+      compactLogLayoutMedia.removeEventListener?.('change', handleResponsiveLayoutChange);
+      compactLogLayoutMedia = null;
+    }
+    if (extraCompactLogLayoutMedia) {
+      extraCompactLogLayoutMedia.removeEventListener?.('change', handleResponsiveLayoutChange);
+      extraCompactLogLayoutMedia = null;
+    }
   }
 
   // ── DOM construction ─────────────────────────────────────────────────────
@@ -287,6 +302,35 @@
     document.getElementById('log-trace-clear').addEventListener('click', clearTraceFilter);
   }
 
+  function isCompactLogLayout() {
+    return !!compactLogLayoutMedia?.matches;
+  }
+
+  function isExtraCompactLogLayout() {
+    return !!extraCompactLogLayoutMedia?.matches;
+  }
+
+  function getRowHeight() {
+    if (isExtraCompactLogLayout()) return EXTRA_COMPACT_ROW_HEIGHT;
+    if (isCompactLogLayout()) return COMPACT_ROW_HEIGHT;
+    return DEFAULT_ROW_HEIGHT;
+  }
+
+  function handleResponsiveLayoutChange() {
+    requestAnimationFrame(() => {
+      renderViewport();
+      if (autoScroll) scrollToBottom();
+    });
+  }
+
+  function bindResponsiveLayout() {
+    if (typeof globalThis.matchMedia !== 'function') return;
+    compactLogLayoutMedia = globalThis.matchMedia(COMPACT_LOG_LAYOUT_QUERY);
+    extraCompactLogLayoutMedia = globalThis.matchMedia(EXTRA_COMPACT_LOG_LAYOUT_QUERY);
+    compactLogLayoutMedia.addEventListener?.('change', handleResponsiveLayoutChange);
+    extraCompactLogLayoutMedia.addEventListener?.('change', handleResponsiveLayoutChange);
+  }
+
   function setTraceFilter(correlationId) {
     filterCorrelationId = correlationId;
     const banner = document.getElementById('log-trace-banner');
@@ -415,14 +459,15 @@
 
   function renderViewport() {
     const totalItems = getVisibleCount();
-    scrollSpacer.style.height = (totalItems * ROW_HEIGHT) + 'px';
+    const rowHeight = getRowHeight();
+    scrollSpacer.style.height = (totalItems * rowHeight) + 'px';
 
     const scrollTop = viewport.scrollTop;
     let viewHeight = viewport.clientHeight;
     if (viewHeight === 0) viewHeight = 600;
 
-    const startIdx = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
-    const endIdx = Math.min(totalItems, Math.ceil((scrollTop + viewHeight) / ROW_HEIGHT) + OVERSCAN);
+    const startIdx = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+    const endIdx = Math.min(totalItems, Math.ceil((scrollTop + viewHeight) / rowHeight) + OVERSCAN);
     const needed = endIdx - startIdx;
 
     while (rowPool.length < needed) {
@@ -452,8 +497,9 @@
 
   function updateRow(row, entry, visibleIndex) {
     const isSelected = selectedIds.has(entry.id);
-    row.style.top = (visibleIndex * ROW_HEIGHT) + 'px';
-    row.style.height = ROW_HEIGHT + 'px';
+    const rowHeight = getRowHeight();
+    row.style.top = (visibleIndex * rowHeight) + 'px';
+    row.style.height = rowHeight + 'px';
     row.dataset.entryId = entry.id;
     row.dataset.visibleIndex = visibleIndex;
     row.className = 'log-entry level-' + escapeHtml(entry.level) + (isSelected ? ' selected' : '');
@@ -622,7 +668,8 @@
 
   // ── Scroll & status ──────────────────────────────────────────────────────
   function onScroll() {
-    const atBottom = viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - ROW_HEIGHT * 2;
+    const rowHeight = getRowHeight();
+    const atBottom = viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - rowHeight * 2;
     autoScroll = atBottom;
     jumpBtn.classList.toggle('visible', !atBottom && getVisibleCount() > 0);
     renderViewport();
@@ -634,8 +681,8 @@
       requestAnimationFrame(() => {
         rafScheduled = false;
         updateEntryCount();
-        renderViewport();
         if (autoScroll) scrollToBottom();
+        else renderViewport();
       });
     }
   }
@@ -643,6 +690,7 @@
   // ── Helpers ──────────────────────────────────────────────────────────────
   function scrollToBottom() {
     viewport.scrollTop = viewport.scrollHeight;
+    renderViewport();
   }
 
   function setStatus(status) {

package/dist/web/public/sessions.css

@@ -66,7 +66,8 @@
   position: absolute;
   top: calc(100% + 0.4rem);
   right: 0;
-  min-width: 480px;
+  min-width: min(480px, calc(100vw - (2 * var(--gutter, 1rem))));
+  max-width: calc(100vw - (2 * var(--gutter, 1rem)));
   background: var(--paper-strong, #fff);
   border: 1px solid var(--line, #c8d5e9);
   border-radius: var(--radius-md, 0.85rem);

package/dist/web/public/styles.css

@@ -146,11 +146,15 @@ p, li { max-width: 69ch; }
   position: sticky;
   top: 0;
   z-index: 35;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    "brand controls"
+    "nav nav";
   align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.55rem var(--gutter);
+  column-gap: 1rem;
+  row-gap: 0.12rem;
+  padding: 0.44rem var(--gutter) 0.4rem;
   border-bottom: 1px solid var(--line);
   background: color-mix(in srgb, var(--paper-strong) 90%, transparent);
   backdrop-filter: blur(8px);
@@ -168,8 +172,8 @@ p, li { max-width: 69ch; }
   pointer-events: none;
 }
 
-.header-brand { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; }
-.header-brand-text { display: flex; flex-direction: column; gap: 0.05rem; }
+.header-brand { grid-area: brand; display: flex; flex-direction: row; align-items: center; gap: 0.6rem; min-width: 0; min-height: 2.35rem; }
+.header-brand-text { display: flex; flex-direction: column; justify-content: center; gap: 0.05rem; min-width: 0; min-height: 2.35rem; }
 .header-logo { width: 32px; height: 32px; flex-shrink: 0; }
 
 .site-title {
@@ -186,22 +190,49 @@ p, li { max-width: 69ch; }
   font-size: var(--step--1);
   color: var(--ink-700);
   max-width: none;
+  line-height: 1.15;
 }
 
-.header-right {
+.header-controls {
+  grid-area: controls;
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
   gap: 0.65rem;
+  width: auto;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.header-nav-row {
+  grid-area: nav;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+  gap: 0.55rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.console-tab-menu-shell {
+  position: relative;
+  display: flex;
+  align-items: center;
   flex-shrink: 0;
 }
 
 .site-stats {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   gap: 0.5rem;
   font-family: var(--font-mono);
   font-size: 0.72rem;
   color: var(--ink-500);
+  min-width: 0;
 }
 
 .stat {
@@ -735,12 +766,6 @@ p, li { max-width: 69ch; }
   color: var(--ink-500);
 }
 
-/* "by" prefix handled by CSS so JS can pass raw author value */
-.meta-author::before {
-  content: "by\00a0";
-  opacity: 0.65;
-}
-
 .meta-version {
   border: 1px solid color-mix(in srgb, var(--line) 82%, var(--paper-strong));
   border-radius: 0.24rem;
@@ -1338,6 +1363,86 @@ body.modal-open { overflow: hidden; }
   background: var(--surface-1);
   border-radius: var(--radius-sm);
   padding: 2px;
+  min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.console-tab-menu-toggle {
+  display: none;
+  align-items: center;
+  gap: 0.42rem;
+  border: 1px solid color-mix(in srgb, var(--signal) 24%, var(--line));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface-1) 70%, var(--paper-strong));
+  color: var(--ink-700);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0.48rem 0.78rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.console-tab-menu-toggle:hover,
+.console-tab-menu-toggle:focus-visible {
+  background: color-mix(in srgb, var(--surface-1) 88%, var(--paper-strong));
+  outline: 2px solid var(--signal);
+  outline-offset: 2px;
+}
+
+.console-tab-menu-icon {
+  font-size: 0.95rem;
+  line-height: 1;
+}
+
+.console-tab-menu {
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  right: 0;
+  min-width: 13rem;
+  max-width: min(18rem, calc(100vw - (2 * var(--gutter, 1rem))));
+  background: var(--paper-strong);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-soft);
+  padding: 0.3rem;
+  z-index: 200;
+}
+
+.console-tab-menu-item {
+  width: 100%;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--ink-700);
+  font-family: var(--font-body);
+  font-size: var(--step--1);
+  font-weight: 600;
+  text-align: left;
+  padding: 0.52rem 0.68rem;
+  cursor: pointer;
+}
+
+.console-tab-menu-item:hover,
+.console-tab-menu-item:focus-visible {
+  background: var(--surface-1);
+  outline: none;
+}
+
+.console-tab-menu-item.active {
+  background: color-mix(in srgb, var(--signal-2) 10%, var(--paper-strong));
+  color: var(--signal);
+}
+
+.header-nav-row--collapsed .console-tabs {
+  display: none;
+}
+
+.header-nav-row--collapsed .console-tab-menu-toggle:not([hidden]) {
+  display: inline-flex;
 }
 
 .console-tab {
@@ -1365,13 +1470,153 @@ body.modal-open { overflow: hidden; }
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 }
 
+@media (max-width: 960px) {
+  .header-controls {
+    align-items: center;
+    justify-content: flex-end;
+    width: auto;
+    max-width: 100%;
+    gap: 0.5rem;
+  }
+
+  .site-stats {
+    flex: 0 1 auto;
+    width: auto;
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 860px) {
+  .site-header {
+    column-gap: 0.7rem;
+  }
+
+  .header-brand {
+    gap: 0.5rem;
+    min-height: 0;
+  }
+
+  .header-brand-text {
+    min-height: 0;
+    gap: 0;
+  }
+
+  .header-brand .site-tagline {
+    display: none;
+  }
+
+  .header-controls,
+  .site-stats {
+    gap: 0.35rem;
+  }
+
+  .header-controls {
+    align-items: center;
+  }
+
+  .stat {
+    padding: 0.12rem 0.34rem;
+  }
+
+  .stat strong {
+    font-size: 0.92rem;
+  }
+
+  .stat--session strong {
+    font-size: 0.74rem;
+  }
+
+  .theme-toggle {
+    width: 1.85rem;
+    height: 1.85rem;
+  }
+
+  .console-tab {
+    padding: 4px 11px;
+  }
+}
+
+@media (max-width: 46rem) {
+  .stat--session {
+    display: none;
+  }
+}
+
+@media (max-width: 31rem) {
+  .site-stats .stat:nth-child(2) {
+    display: none;
+  }
+}
+
+@media (max-width: 28rem) {
+  .site-header {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-areas: "brand nav controls";
+    column-gap: 0.45rem;
+  }
+
+  .header-brand {
+    gap: 0;
+    min-width: 0;
+  }
+
+  .header-logo {
+    display: block;
+    width: 28px;
+    height: 28px;
+  }
+
+  .header-brand-text {
+    display: none;
+  }
+
+  .site-stats {
+    display: none;
+  }
+
+  .header-controls {
+    width: auto;
+    justify-content: flex-end;
+  }
+
+  .header-nav-row {
+    width: auto;
+    min-width: 0;
+    justify-content: flex-end;
+    gap: 0.4rem;
+  }
+}
+
+@media (max-width: 24rem) {
+  .site-header {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "brand"
+      "controls"
+      "nav";
+  }
+
+  .header-controls {
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .site-stats {
+    justify-content: flex-end;
+  }
+
+  .header-nav-row {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
 @media (max-width: 640px) {
   .console-tabs {
-    order: -1;
-    width: 100%;
+    width: fit-content;
+    max-width: 100%;
   }
   .console-tab {
-    flex: 1;
     text-align: center;
   }
 }
@@ -1430,13 +1675,17 @@ body.modal-open { overflow: hidden; }
   margin-left: auto;
 }
 
+.footer-version,
 .footer-updated {
-  margin-left: auto;
   font-family: var(--font-mono);
   font-size: 0.72rem;
   color: var(--ink-500);
 }
 
+.footer-updated {
+  margin-left: auto;
+}
+
 /* ── Topic filters ───────────────────────────────────────────────────────── */
 
 fieldset.topic-filters {
@@ -1684,10 +1933,9 @@ fieldset.topic-filters {
 
 /* ── Responsive ──────────────────────────────────────────────────────────── */
 
-@media (max-width: 52rem) {
+@media (max-width: 40rem) {
   .header-brand .site-tagline { display: none; }
-  .stat { display: none; }
-  .stat:first-child { display: inline-flex; }
+  .stat--session { display: none; }
   .elements-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
   .elements-grid[data-view="detail"] { grid-template-columns: 1fr; }
   .modal-dialog { height: calc(100vh - 0.5rem); border-radius: 0; }
@@ -1696,6 +1944,10 @@ fieldset.topic-filters {
   .elements-grid[data-view="list"] .card-description { display: none; }
 }
 
+@media (max-width: 30rem) {
+  .stat:nth-child(2) { display: none; }
+}
+
 /* ── Directive-style instructions ─────────────────────────────────── */
 
 .directive-list {

package/dist/web/routes/permissionRoutes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"permissionRoutes.d.ts","sourceRoot":"","sources":["../../../src/web/routes/permissionRoutes.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAgB,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AA8T7E;;;GAGG;AACH,MAAM,WAAW,+BAA+B;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,aAAa,EACtB,OAAO,GAAE,+BAAoC,GAC5C,IAAI,CA+NN"}
+{"version":3,"file":"permissionRoutes.d.ts","sourceRoot":"","sources":["../../../src/web/routes/permissionRoutes.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAgB,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAwV7E;;;GAGG;AACH,MAAM,WAAW,+BAA+B;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,aAAa,EACtB,OAAO,GAAE,+BAAoC,GAC5C,IAAI,CAkON"}