clay-server 2.23.0-beta.4 → 2.23.0-beta.5

package/lib/public/app.js

@@ -654,9 +654,8 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
     if (isMate && targetUser.projectSlug) {
       // Mate DM: switch to mate's project (same as project switching)
       showMateSidebar(targetUser.id, targetUser);
-      connectMateProject(targetUser.projectSlug);
-      // Close file viewer and terminal panel, hide terminal button (not relevant for mate)
-      closeFileViewer();
+      // Close file viewer and terminal panel BEFORE switching WS (needs old WS still open)
+      try { closeFileViewer(); } catch(e) {}
       closeTerminal();
       var termBtn = document.getElementById("terminal-toggle-btn");
       if (termBtn) termBtn.style.display = "none";
@@ -706,6 +705,10 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
             color: mateColor
           });
       }
+      // Switch to mate project WS LAST, after all UI setup is complete.
+      // Must be last because connect() changes ws to CONNECTING state,
+      // and earlier code (closeFileViewer etc.) needs the old WS still open.
+      connectMateProject(targetUser.projectSlug);
     }
 
     // Hide user-island in human DM, keep visible in Mate DM
@@ -1340,28 +1343,33 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
         worktreeAccessible: p.worktreeAccessible !== undefined ? p.worktreeAccessible : true,
       };
     });
-    renderIconStrip(iconStripProjects, currentSlug);
+    // In mate DM, highlight the saved main project in the icon strip (not the mate slug)
+    var iconStripActiveSlug = (mateProjectSlug && savedMainSlug) ? savedMainSlug : currentSlug;
+    renderIconStrip(iconStripProjects, iconStripActiveSlug);
     // Update title bar project name and icon if it changed
-    for (var pi = 0; pi < cachedProjects.length; pi++) {
-      if (cachedProjects[pi].slug === currentSlug) {
-        var updatedName = cachedProjects[pi].title || cachedProjects[pi].project;
-        var tbName = document.getElementById("title-bar-project-name");
-        if (tbName && updatedName) tbName.textContent = updatedName;
-        var tbIcon = document.getElementById("title-bar-project-icon");
-        if (tbIcon) {
-          var pIcon = cachedProjects[pi].icon || null;
-          if (pIcon) {
-            tbIcon.textContent = pIcon;
-            parseEmojis(tbIcon);
-            tbIcon.classList.add("has-icon");
-            try { localStorage.setItem("clay-project-icon-" + (currentSlug || "default"), pIcon); } catch (e) {}
-          } else {
-            tbIcon.textContent = "";
-            tbIcon.classList.remove("has-icon");
-            try { localStorage.removeItem("clay-project-icon-" + (currentSlug || "default")); } catch (e) {}
+    // Skip when in mate DM mode (mate name/color is managed by enterDmMode)
+    if (!mateProjectSlug) {
+      for (var pi = 0; pi < cachedProjects.length; pi++) {
+        if (cachedProjects[pi].slug === currentSlug) {
+          var updatedName = cachedProjects[pi].title || cachedProjects[pi].project;
+          var tbName = document.getElementById("title-bar-project-name");
+          if (tbName && updatedName) tbName.textContent = updatedName;
+          var tbIcon = document.getElementById("title-bar-project-icon");
+          if (tbIcon) {
+            var pIcon = cachedProjects[pi].icon || null;
+            if (pIcon) {
+              tbIcon.textContent = pIcon;
+              parseEmojis(tbIcon);
+              tbIcon.classList.add("has-icon");
+              try { localStorage.setItem("clay-project-icon-" + (currentSlug || "default"), pIcon); } catch (e) {}
+            } else {
+              tbIcon.textContent = "";
+              tbIcon.classList.remove("has-icon");
+              try { localStorage.removeItem("clay-project-icon-" + (currentSlug || "default")); } catch (e) {}
+            }
           }
+          break;
         }
-        break;
       }
     }
     // Re-apply current socket status to the active icon's dot
@@ -3811,7 +3819,23 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
 
     ws.onerror = function () {};
 
-    function showUpdateAvailable(msg) {
+    ws.onmessage = function (event) {
+      // If this WS is stashed while in mate DM, only allow skill_installed through
+      // Backup: if we're receiving messages, we're connected
+      if (!connected) {
+        setStatus("connected");
+        reconnectDelay = 1000;
+        if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+      }
+
+      blinkIO();
+      var msg;
+      try { msg = JSON.parse(event.data); } catch (e) { return; }
+      processMessage(msg);
+    };
+  }
+
+  function showUpdateAvailable(msg) {
       var updatePillWrap = $("update-pill-wrap");
       var updateVersion = $("update-version");
       if (updatePillWrap && updateVersion && msg.version) {
@@ -3853,22 +3877,6 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
       }
     }
 
-    ws.onmessage = function (event) {
-      // If this WS is stashed while in mate DM, only allow skill_installed through
-      // Backup: if we're receiving messages, we're connected
-      if (!connected) {
-        setStatus("connected");
-        reconnectDelay = 1000;
-        if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
-      }
-
-      blinkIO();
-      var msg;
-      try { msg = JSON.parse(event.data); } catch (e) { return; }
-      processMessage(msg);
-    };
-  }
-
   function processMessage(msg) {
       var isMateDm = dmMode && dmTargetUser && dmTargetUser.isMate;
 
@@ -3884,12 +3892,15 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
       if (isMateDm) {
         if (msg.type === "session_list") {
           renderMateSessionList(msg.sessions || []);
-          // Also override title bar with mate name
+          // Override title bar with mate name and re-apply color
           var _mdn = (dmTargetUser.displayName || "New Mate");
           if (headerTitleEl) headerTitleEl.textContent = _mdn;
           var _tbpn = document.getElementById("title-bar-project-name");
           if (_tbpn) _tbpn.textContent = _mdn;
-          updatePageTitle();
+          var _mc2 = (dmTargetUser.profile && dmTargetUser.profile.avatarColor) || dmTargetUser.avatarColor || "#7c3aed";
+          var _tbc2 = document.querySelector(".title-bar-content");
+          if (_tbc2) { _tbc2.style.background = _mc2; _tbc2.classList.add("mate-dm-active"); }
+          document.body.classList.add("mate-dm-active");
           // Still let normal session_list handler run below
         }
         if (msg.type === "search_results") {
@@ -3999,9 +4010,11 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
         case "restore_mate_dm":
           if (msg.mateId && !returningFromMateDm) {
             // Server-driven mate DM restore on reconnect
+            // Note: do NOT remove mate-dm-active here; openDm is async (skill check)
+            // and removing the class causes a flash where mate UI is lost.
+            // enterDmMode will properly set/reset the class when DM is entered.
             if (dmMode) {
               dmMode = false;
-              document.body.classList.remove("mate-dm-active");
             }
             messagesEl.innerHTML = "";
             openDm(msg.mateId);
@@ -4023,12 +4036,17 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
           projectName = msg.project || msg.cwd;
           if (msg.slug) currentSlug = msg.slug;
           try { localStorage.setItem("clay-project-name-" + (currentSlug || "default"), projectName); } catch (e) {}
-          // In mate DM, keep title as mate name (not project/session title)
+          // In mate DM, keep title as mate name and re-apply mate color
           if (dmMode && dmTargetUser && dmTargetUser.isMate) {
             var _mateDN = dmTargetUser.displayName || "New Mate";
             headerTitleEl.textContent = _mateDN;
             var tbProjectName = $("title-bar-project-name");
             if (tbProjectName) tbProjectName.textContent = _mateDN;
+            // Re-apply mate title bar styling (may be lost during project switch)
+            var _mc = (dmTargetUser.profile && dmTargetUser.profile.avatarColor) || dmTargetUser.avatarColor || "#7c3aed";
+            var _tbc = document.querySelector(".title-bar-content");
+            if (_tbc) { _tbc.style.background = _mc; _tbc.classList.add("mate-dm-active"); }
+            document.body.classList.add("mate-dm-active");
           } else {
             headerTitleEl.textContent = projectName;
             var tbProjectName = $("title-bar-project-name");

package/lib/public/css/mates.css

@@ -14,6 +14,7 @@
 
 .title-bar-content.mate-dm-active {
   border-bottom: none;
+  background: var(--mate-color);
 }
 
 .title-bar-content.mate-dm-active #header-left,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.23.0-beta.4",
+  "version": "2.23.0-beta.5",
   "description": "Self-hosted Claude Code in your browser. Multi-session, multi-user, push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",