clay-server 2.13.0-beta.1 → 2.13.0-beta.2

package/lib/public/app.js

@@ -553,6 +553,37 @@ import { initMateWizard, openMateWizard, closeMateWizard, handleMateCreated } fr
   }
 
   function enterDmMode(key, targetUser, messages) {
+    // Clean up previous DM/mate state before entering new one
+    if (dmMode) {
+      disconnectMateWs();
+      hideMateSidebar();
+      hideKnowledge();
+      // Reset dm-header-bar
+      var prevHeader = document.getElementById("dm-header-bar");
+      if (prevHeader) {
+        prevHeader.style.display = "";
+        prevHeader.style.background = "";
+        var prevTag = prevHeader.querySelector(".dm-header-mate-tag");
+        if (prevTag) prevTag.remove();
+      }
+      // Restore terminal button
+      var prevTermBtn = document.getElementById("terminal-toggle-btn");
+      if (prevTermBtn) prevTermBtn.style.display = "";
+      // Remove dm-mode classes
+      var prevMain = document.getElementById("main-column");
+      if (prevMain) prevMain.classList.remove("dm-mode");
+      var prevSidebar = document.getElementById("sidebar-column");
+      if (prevSidebar) prevSidebar.classList.remove("dm-mode");
+      var prevResize = document.getElementById("sidebar-resize-handle");
+      if (prevResize) prevResize.classList.remove("dm-mode");
+      // Reset chat title bar
+      var prevTitleBar = document.querySelector(".title-bar-content");
+      if (prevTitleBar) {
+        prevTitleBar.style.background = "";
+        prevTitleBar.classList.remove("mate-dm-active");
+      }
+    }
+
     dmMode = true;
     dmKey = key;
     dmTargetUser = targetUser;
@@ -597,6 +628,13 @@ import { initMateWizard, openMateWizard, closeMateWizard, handleMateCreated } fr
       // Hide terminal button (not relevant for mate)
       var termBtn = document.getElementById("terminal-toggle-btn");
       if (termBtn) termBtn.style.display = "none";
+      // Apply mate color to chat title bar
+      var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
+      var titleBarContent = document.querySelector(".title-bar-content");
+      if (titleBarContent) {
+        titleBarContent.style.background = mateColor;
+        titleBarContent.classList.add("mate-dm-active");
+      }
     }
 
     // Hide user-island (my avatar behind it becomes visible)
@@ -623,21 +661,21 @@ import { initMateWizard, openMateWizard, closeMateWizard, handleMateCreated } fr
       var dmHeaderBar = document.getElementById("dm-header-bar");
       var dmAvatar = document.getElementById("dm-header-avatar");
       var dmName = document.getElementById("dm-header-name");
-      if (dmAvatar) {
-        dmAvatar.src = "https://api.dicebear.com/9.x/" + (targetUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(targetUser.avatarSeed || targetUser.username) + "&size=28";
-      }
-      if (dmName) dmName.textContent = targetUser.displayName;
-      if (dmHeaderBar && targetUser.avatarColor) {
-        dmHeaderBar.style.background = targetUser.avatarColor;
-      }
-      // Add mate tag if this is a mate
-      var existingTag = dmHeaderBar ? dmHeaderBar.querySelector(".dm-header-mate-tag") : null;
-      if (existingTag) existingTag.remove();
-      if (targetUser.isMate && dmHeaderBar) {
-        var mateTag = document.createElement("span");
-        mateTag.className = "dm-header-mate-tag";
-        mateTag.textContent = "MATE";
-        dmHeaderBar.appendChild(mateTag);
+      if (isMate) {
+        // Mate uses project chat title bar, hide DM header
+        if (dmHeaderBar) dmHeaderBar.style.display = "none";
+      } else {
+        if (dmHeaderBar) dmHeaderBar.style.display = "";
+        if (dmAvatar) {
+          dmAvatar.src = "https://api.dicebear.com/9.x/" + (targetUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(targetUser.avatarSeed || targetUser.username) + "&size=28";
+        }
+        if (dmName) dmName.textContent = targetUser.displayName;
+        if (dmHeaderBar && targetUser.avatarColor) {
+          dmHeaderBar.style.background = targetUser.avatarColor;
+        }
+        // Remove mate tag for regular DM
+        var existingTag = dmHeaderBar ? dmHeaderBar.querySelector(".dm-header-mate-tag") : null;
+        if (existingTag) existingTag.remove();
       }
     }
   }
@@ -669,10 +707,17 @@ import { initMateWizard, openMateWizard, closeMateWizard, handleMateCreated } fr
     // Reset DM header
     var dmHeaderBar = document.getElementById("dm-header-bar");
     if (dmHeaderBar) {
+      dmHeaderBar.style.display = "";
       dmHeaderBar.style.background = "";
       var mateTag = dmHeaderBar.querySelector(".dm-header-mate-tag");
       if (mateTag) mateTag.remove();
     }
+    // Reset chat title bar
+    var titleBarContent = document.querySelector(".title-bar-content");
+    if (titleBarContent) {
+      titleBarContent.style.background = "";
+      titleBarContent.classList.remove("mate-dm-active");
+    }
 
     // Restore user-island (covers my avatar again)
     var userIsland = document.getElementById("user-island");

package/lib/public/css/mates.css

@@ -1,3 +1,39 @@
+/* === Mate Chat Title Bar === */
+
+.title-bar-content.mate-dm-active {
+  border-bottom: none;
+}
+
+.title-bar-content.mate-dm-active #header-left,
+.title-bar-content.mate-dm-active #header-left * {
+  color: #fff !important;
+}
+
+.title-bar-content.mate-dm-active .status,
+.title-bar-content.mate-dm-active .status * {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+.title-bar-content.mate-dm-active .status svg,
+.title-bar-content.mate-dm-active #header-left svg {
+  stroke: #fff !important;
+  opacity: 0.9;
+}
+
+.title-bar-content.mate-dm-active .status button,
+.title-bar-content.mate-dm-active #header-left button {
+  color: #fff !important;
+}
+
+.title-bar-content.mate-dm-active .status button:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Hide session info button in mate DM (white circle issue) */
+.title-bar-content.mate-dm-active #header-info-btn {
+  display: none;
+}
+
 /* === Mate Wizard === */
 
 #mate-wizard {
@@ -464,7 +500,7 @@
   min-width: 200px;
   max-width: 360px;
   background: var(--sidebar-bg, var(--bg-secondary, #1a1a2e));
-  border-right: 1px solid var(--sidebar-border, var(--border, rgba(255,255,255,0.06)));
+  border-right: none;
   overflow: hidden;
   flex-shrink: 0;
 }
@@ -479,7 +515,7 @@
   gap: 10px;
   height: 48px;
   padding: 0 12px;
-  border-bottom: 1px solid var(--border-subtle);
+  border-bottom: none;
   flex-shrink: 0;
 }
 
@@ -491,6 +527,8 @@
   color: #fff;
   text-shadow: 0 1px 2px rgba(0,0,0,0.2);
   flex: 1;
+  font-size: 15px;
+  font-weight: 600;
 }
 
 .mate-sidebar-header .mate-sidebar-avatar {
@@ -558,32 +596,35 @@
   100% { filter: brightness(1); }
 }
 
-.mate-sidebar-chevron {
-  width: 14px;
-  height: 14px;
-  color: rgba(255,255,255,0.6);
-  transition: transform 0.2s;
-  flex-shrink: 0;
-}
-
-.mate-sidebar-header.expanded .mate-sidebar-chevron {
-  transform: rotate(180deg);
-}
-
-/* Seed data panel */
-.mate-sidebar-seed {
+/* Seed data hover tooltip */
+.mate-seed-tooltip {
+  position: absolute;
+  top: 100%;
+  left: 12px;
+  right: 12px;
+  margin-top: 4px;
   padding: 10px 14px;
-  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-primary, #fff);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
   font-size: 12px;
   color: var(--text-secondary);
   display: flex;
   flex-direction: column;
   gap: 6px;
-  flex-shrink: 0;
+  z-index: 100;
+  pointer-events: none;
 }
-.mate-sidebar-seed.hidden {
+.mate-seed-tooltip.hidden {
   display: none;
 }
+.mate-sidebar-header {
+  position: relative;
+}
+.mate-sidebar-name {
+  cursor: default;
+}
 .mate-sidebar-seed-row {
   display: flex;
   gap: 6px;

package/lib/public/index.html

@@ -198,9 +198,8 @@
       <div class="mate-sidebar-header" id="mate-sidebar-header">
         <img id="mate-sidebar-avatar" class="mate-sidebar-avatar" alt="">
         <span id="mate-sidebar-name" class="mate-sidebar-name"></span>
-        <i data-lucide="chevron-down" class="mate-sidebar-chevron"></i>
+        <div id="mate-sidebar-seed-tooltip" class="mate-seed-tooltip hidden"></div>
       </div>
-      <div id="mate-sidebar-seed" class="mate-sidebar-seed hidden"></div>
       <div id="mate-sidebar-tools">
         <button id="mate-knowledge-btn"><i data-lucide="book-open"></i> <span>Knowledge</span><span id="mate-knowledge-count" class="sidebar-badge hidden"></span></button>
         <button id="mate-sticky-notes-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span></button>

package/lib/public/modules/mate-sidebar.js

@@ -30,20 +30,15 @@ export function initMateSidebar(mateWsGetter) {
     });
   }
 
-  // Header click: toggle seed data panel
-  var headerEl = document.getElementById("mate-sidebar-header");
-  if (headerEl) {
-    headerEl.addEventListener("click", function () {
-      var seedPanel = document.getElementById("mate-sidebar-seed");
-      if (!seedPanel) return;
-      var expanded = !seedPanel.classList.contains("hidden");
-      if (expanded) {
-        seedPanel.classList.add("hidden");
-        headerEl.classList.remove("expanded");
-      } else {
-        seedPanel.classList.remove("hidden");
-        headerEl.classList.add("expanded");
-      }
+  // Name hover: show seed data tooltip
+  if (nameEl) {
+    nameEl.addEventListener("mouseenter", function () {
+      var tooltip = document.getElementById("mate-sidebar-seed-tooltip");
+      if (tooltip && tooltip.innerHTML.trim()) tooltip.classList.remove("hidden");
+    });
+    nameEl.addEventListener("mouseleave", function () {
+      var tooltip = document.getElementById("mate-sidebar-seed-tooltip");
+      if (tooltip) tooltip.classList.add("hidden");
     });
   }
 
@@ -91,22 +86,20 @@ export function showMateSidebar(mateId, mateData) {
   if (headerEl) headerEl.style.background = mateColor;
   columnEl.style.background = mateColor + "0a";
 
-  // Render seed data panel
-  var seedPanel = document.getElementById("mate-sidebar-seed");
-  var headerClickEl = document.getElementById("mate-sidebar-header");
-  if (seedPanel) {
-    seedPanel.innerHTML = "";
-    seedPanel.classList.add("hidden");
-    if (headerClickEl) headerClickEl.classList.remove("expanded");
+  // Render seed data tooltip
+  var seedTooltip = document.getElementById("mate-sidebar-seed-tooltip");
+  if (seedTooltip) {
+    seedTooltip.innerHTML = "";
+    seedTooltip.classList.add("hidden");
     var sd = mateData.seedData || {};
     if (sd.relationship) {
-      seedPanel.appendChild(makeSeedRow("Role", sd.relationship.replace(/_/g, " ")));
+      seedTooltip.appendChild(makeSeedRow("Role", sd.relationship.replace(/_/g, " ")));
     }
     if (sd.activity && sd.activity.length > 0) {
-      seedPanel.appendChild(makeSeedTags("Activities", sd.activity));
+      seedTooltip.appendChild(makeSeedTags("Activities", sd.activity));
     }
     if (sd.communicationStyle && sd.communicationStyle.length > 0) {
-      seedPanel.appendChild(makeSeedTags("Style", sd.communicationStyle.map(function (s) { return s.replace(/_/g, " "); })));
+      seedTooltip.appendChild(makeSeedTags("Style", sd.communicationStyle.map(function (s) { return s.replace(/_/g, " "); })));
     }
     if (sd.autonomy) {
       var autonomyLabels = {
@@ -115,7 +108,7 @@ export function showMateSidebar(mateId, mateData) {
         mostly_autonomous: "Mostly free",
         fully_autonomous: "Full freedom",
       };
-      seedPanel.appendChild(makeSeedRow("Autonomy", autonomyLabels[sd.autonomy] || sd.autonomy.replace(/_/g, " ")));
+      seedTooltip.appendChild(makeSeedRow("Autonomy", autonomyLabels[sd.autonomy] || sd.autonomy.replace(/_/g, " ")));
     }
   }
 
@@ -171,6 +164,9 @@ export function updateMateSidebarProfile(mateData) {
   var headerEl = columnEl.querySelector(".mate-sidebar-header");
   if (headerEl) headerEl.style.background = mateColor;
   columnEl.style.background = mateColor + "0a";
+  // Sync chat title bar color
+  var titleBarContent = document.querySelector(".title-bar-content.mate-dm-active");
+  if (titleBarContent) titleBarContent.style.background = mateColor;
 }
 
 // Ten Commandments engrave effect: letters appear one by one with spark particles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.13.0-beta.1",
+  "version": "2.13.0-beta.2",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",