@dollhousemcp/mcp-server 2.0.31 → 2.0.32

package/dist/web/public/styles.css

@@ -146,12 +146,15 @@ p, li { max-width: 69ch; }
   position: sticky;
   top: 0;
   z-index: 35;
-  display: flex;
-  flex-wrap: wrap;
+  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);
@@ -169,8 +172,8 @@ p, li { max-width: 69ch; }
   pointer-events: none;
 }
 
-.header-brand { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; min-width: 0; }
-.header-brand-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
+.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 {
@@ -187,15 +190,37 @@ 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;
-  flex: 1 1 auto;
+  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;
   min-width: 0;
 }
 
@@ -1346,6 +1371,85 @@ body.modal-open { overflow: hidden; }
   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 {
@@ -1373,41 +1477,138 @@ body.modal-open { overflow: hidden; }
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 }
 
-@media (max-width: 1100px) {
+@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 {
-    align-items: flex-start;
+    column-gap: 0.7rem;
   }
 
-  .header-right {
-    width: 100%;
-    justify-content: flex-start;
-    row-gap: 0.55rem;
+  .header-brand {
+    gap: 0.5rem;
+    min-height: 0;
   }
 
-  .console-tabs {
-    order: 3;
-    width: 100%;
-    flex-wrap: wrap;
+  .header-brand-text {
+    min-height: 0;
+    gap: 0;
   }
 
+  .header-brand .site-tagline {
+    display: none;
+  }
+
+  .header-controls,
   .site-stats {
-    flex: 1 1 auto;
-    justify-content: flex-start;
+    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 {
-    margin-left: auto;
+    width: 1.85rem;
+    height: 1.85rem;
+  }
+
+  .console-tab {
+    padding: 4px 11px;
+  }
+}
+
+@media (max-width: 46rem) {
+  .stat--session {
+    display: none;
   }
 }
 
-@media (max-width: 640px) {
-  .console-tabs {
-    order: -1;
+@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%;
   }
-  .console-tab {
-    flex: 1;
-    text-align: center;
+
+  .site-stats {
+    justify-content: flex-end;
+  }
+
+  .header-nav-row {
+    width: 100%;
+    justify-content: flex-end;
   }
 }
 
@@ -1725,8 +1926,6 @@ fieldset.topic-filters {
 
 @media (max-width: 52rem) {
   .header-brand .site-tagline { display: none; }
-  .stat { display: none; }
-  .stat:first-child { display: inline-flex; }
   .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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dollhousemcp/mcp-server",
-  "version": "2.0.31",
+  "version": "2.0.32",
   "description": "DollhouseMCP - A Model Context Protocol (MCP) server that enables dynamic AI persona management from markdown files, allowing Claude and other compatible AI assistants to activate and switch between different behavioral personas.",
   "type": "module",
   "main": "dist/index.js",

package/server.json

@@ -3,7 +3,7 @@
   "name": "io.github.DollhouseMCP/mcp-server",
   "title": "DollhouseMCP",
   "description": "OSS to create Personas, Skills, Templates, Agents, and Memories to customize your AI experience.",
-  "version": "2.0.31",
+  "version": "2.0.32",
   "homepage": "https://dollhousemcp.com",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     {
       "registryType": "npm",
       "identifier": "@dollhousemcp/mcp-server",
-      "version": "2.0.31",
+      "version": "2.0.32",
       "transport": {
         "type": "stdio"
       }