clay-server 2.13.0-beta.6 → 2.13.0-beta.8

package/lib/public/app.js

@@ -71,6 +71,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
   // --- Mate WS (separate connection to mate project) ---
   var mateWs = null;
   var mateProjectSlug = null;
+  var savedActiveSessionId = null; // main project session ID saved during mate DM
 
   // --- Home Hub ---
   var homeHub = $("home-hub");
@@ -629,8 +630,17 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       // 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
+      // Apply mate color to chat title bar and panels
       var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
+      document.body.style.setProperty("--mate-color", mateColor);
+      document.body.classList.add("mate-dm-active");
+      // Build mate avatar URL for DM bubble injection
+      var mp = targetUser.profile || {};
+      var mateAvatarUrl = "https://api.dicebear.com/9.x/" + (mp.avatarStyle || targetUser.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(mp.avatarSeed || targetUser.avatarSeed || targetUser.id) + "&size=36";
+      var myUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+      var myAvatarUrl = "https://api.dicebear.com/9.x/" + ((myUser && myUser.avatarStyle) || "thumbs") + "/svg?seed=" + encodeURIComponent((myUser && (myUser.avatarSeed || myUser.username)) || myUserId) + "&size=36";
+      document.body.dataset.mateAvatarUrl = mateAvatarUrl;
+      document.body.dataset.myAvatarUrl = myAvatarUrl;
       var titleBarContent = document.querySelector(".title-bar-content");
       if (titleBarContent) {
         titleBarContent.style.background = mateColor;
@@ -696,6 +706,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     if (resizeHandle) resizeHandle.classList.remove("dm-mode");
     hideMateSidebar();
     hideKnowledge();
+    if (isSchedulerOpen()) closeScheduler();
     disconnectMateWs();
     // Restore terminal button
     var termBtn = document.getElementById("terminal-toggle-btn");
@@ -713,7 +724,14 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       var mateTag = dmHeaderBar.querySelector(".dm-header-mate-tag");
       if (mateTag) mateTag.remove();
     }
-    // Reset chat title bar
+    // Reset chat title bar and mate color
+    document.body.style.removeProperty("--mate-color");
+    document.body.classList.remove("mate-dm-active");
+    delete document.body.dataset.mateAvatarUrl;
+    delete document.body.dataset.myAvatarUrl;
+    // Remove injected DM bubble avatars
+    var bubbleAvatars = messagesEl.querySelectorAll(".dm-bubble-avatar");
+    for (var ba = 0; ba < bubbleAvatars.length; ba++) bubbleAvatars[ba].remove();
     var titleBarContent = document.querySelector(".title-bar-content");
     if (titleBarContent) {
       titleBarContent.style.background = "";
@@ -779,6 +797,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     mateWs.onopen = function () {
       // Swap main ws to mateWs so all UI (input, model selector, etc.) routes through mate project
       savedMainWs = ws;
+      savedActiveSessionId = activeSessionId;
       ws = mateWs;
       connected = true;
     };
@@ -858,6 +877,11 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       mateWs.close();
       mateWs = null;
     }
+    // Restore main project's active session ID
+    if (savedActiveSessionId) {
+      activeSessionId = savedActiveSessionId;
+      savedActiveSessionId = null;
+    }
     mateProjectSlug = null;
     // If main WS was disconnected while in mate DM, reconnect now
     if (ws && ws.readyState !== 1) {
@@ -1512,6 +1536,13 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     dmConversations: function () { return cachedDmConversations || []; },
     myUserId: function () { return myUserId; },
     selectSession: function (id) {
+      // Close any open panels before switching
+      if (isSchedulerOpen()) closeScheduler();
+      var stickyPanel = document.getElementById("sticky-notes-panel");
+      if (stickyPanel && !stickyPanel.classList.contains("hidden")) {
+        var stickyBtn = document.getElementById("sticky-notes-sidebar-btn");
+        if (stickyBtn) stickyBtn.click();
+      }
       if (ws && ws.readyState === 1) {
         ws.send(JSON.stringify({ type: "switch_session", id: id }));
       }
@@ -2528,7 +2559,34 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     }
 
 
-    div.appendChild(bubble);
+    // Mate DM: wrap avatar + header + bubble in DM-like layout
+    if (document.body.classList.contains("mate-dm-active") && document.body.dataset.myAvatarUrl) {
+      var avi = document.createElement("img");
+      avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
+      avi.src = document.body.dataset.myAvatarUrl;
+      div.appendChild(avi);
+
+      var contentWrap = document.createElement("div");
+      contentWrap.className = "dm-bubble-content";
+
+      var header = document.createElement("div");
+      header.className = "dm-bubble-header";
+      var myU = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "dm-bubble-name";
+      nameSpan.textContent = myU ? myU.displayName : "Me";
+      header.appendChild(nameSpan);
+      var timeSpan = document.createElement("span");
+      timeSpan.className = "dm-bubble-time";
+      var nowH = new Date();
+      timeSpan.textContent = String(nowH.getHours()).padStart(2, "0") + ":" + String(nowH.getMinutes()).padStart(2, "0");
+      header.appendChild(timeSpan);
+      contentWrap.appendChild(header);
+      contentWrap.appendChild(bubble);
+      div.appendChild(contentWrap);
+    } else {
+      div.appendChild(bubble);
+    }
 
     // Action bar below bubble (icons visible on hover)
     var actions = document.createElement("div");
@@ -2562,7 +2620,40 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       currentMsgEl = document.createElement("div");
       currentMsgEl.className = "msg-assistant";
       currentMsgEl.dataset.turn = turnCounter;
-      currentMsgEl.innerHTML = '<div class="md-content" dir="auto"></div>';
+      // Inject mate avatar + header for DM bubble style
+      if (document.body.classList.contains("mate-dm-active") && document.body.dataset.mateAvatarUrl) {
+        var avi = document.createElement("img");
+        avi.className = "dm-bubble-avatar dm-bubble-avatar-mate";
+        avi.src = document.body.dataset.mateAvatarUrl;
+        currentMsgEl.appendChild(avi);
+
+        var contentWrap = document.createElement("div");
+        contentWrap.className = "dm-bubble-content";
+
+        var header = document.createElement("div");
+        header.className = "dm-bubble-header";
+        var nameSpan = document.createElement("span");
+        nameSpan.className = "dm-bubble-name";
+        nameSpan.textContent = (dmTargetUser && dmTargetUser.displayName) || "Mate";
+        header.appendChild(nameSpan);
+        var timeSpan = document.createElement("span");
+        timeSpan.className = "dm-bubble-time";
+        var nowA = new Date();
+        timeSpan.textContent = String(nowA.getHours()).padStart(2, "0") + ":" + String(nowA.getMinutes()).padStart(2, "0");
+        header.appendChild(timeSpan);
+        contentWrap.appendChild(header);
+
+        var mdDiv = document.createElement("div");
+        mdDiv.className = "md-content";
+        mdDiv.dir = "auto";
+        contentWrap.appendChild(mdDiv);
+        currentMsgEl.appendChild(contentWrap);
+      } else {
+        var mdDiv = document.createElement("div");
+        mdDiv.className = "md-content";
+        mdDiv.dir = "auto";
+        currentMsgEl.appendChild(mdDiv);
+      }
       addToMessages(currentMsgEl);
       currentFullText = "";
     }
@@ -4434,6 +4525,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
   initSTT({
     inputEl: inputEl,
     addSystemMessage: addSystemMessage,
+    scrollToBottom: scrollToBottom,
   });
 
   // --- User profile (Discord-style popover on user island) ---
@@ -4574,6 +4666,8 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       if (!myPermissions.scheduledTasks) {
         var schBtn = document.getElementById("scheduler-btn");
         if (schBtn) schBtn.style.display = "none";
+        var mateSchBtn = document.getElementById("mate-scheduler-btn");
+        if (mateSchBtn) mateSchBtn.style.display = "none";
       }
       if (!myPermissions.createProject) {
         var addProjBtn = document.getElementById("icon-strip-add");

package/lib/public/css/mates.css

@@ -798,8 +798,10 @@
 .mate-knowledge-header {
   display: flex;
   align-items: center;
-  padding: 10px 16px;
+  height: 48px;
+  padding: 0 16px;
   flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
 }
 .mate-knowledge-title-wrap {
   display: flex;
@@ -1130,3 +1132,194 @@
   margin-right: 8px;
   vertical-align: middle;
 }
+
+/* --- Mate color theming for panels --- */
+
+/* Match panel header heights to sidebar header (48px) */
+body.mate-dm-active .mate-knowledge-header,
+body.mate-dm-active .scheduler-top-bar,
+body.mate-dm-active .notes-archive-header {
+  height: 48px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Knowledge header */
+body.mate-dm-active .mate-knowledge-header {
+  background: var(--mate-color);
+  color: #fff;
+}
+body.mate-dm-active .mate-knowledge-header .lucide,
+body.mate-dm-active .mate-knowledge-header h2 {
+  color: #fff;
+}
+body.mate-dm-active .mate-knowledge-header-actions button {
+  color: rgba(255, 255, 255, 0.85);
+}
+body.mate-dm-active .mate-knowledge-header-actions button:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.15);
+}
+body.mate-dm-active .mate-knowledge-count {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Scheduler top bar (main header) */
+body.mate-dm-active .scheduler-top-bar {
+  background: var(--mate-color);
+  color: #fff;
+}
+body.mate-dm-active .scheduler-top-title,
+body.mate-dm-active .scheduler-top-title .lucide {
+  color: #fff;
+}
+body.mate-dm-active .scheduler-close-btn {
+  color: rgba(255, 255, 255, 0.85);
+}
+body.mate-dm-active .scheduler-close-btn:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.15);
+}
+body.mate-dm-active .scheduler-scope-toggle {
+  color: rgba(255, 255, 255, 0.7);
+}
+body.mate-dm-active .scheduler-scope-label {
+  color: rgba(255, 255, 255, 0.7);
+}
+body.mate-dm-active .scheduler-scope-label[data-side="off"],
+body.mate-dm-active .scheduler-scope-toggle.active .scheduler-scope-label[data-side="on"] {
+  color: #fff;
+}
+
+/* Scheduler: breathing room below top-bar */
+body.mate-dm-active .scheduler-sidebar,
+body.mate-dm-active .scheduler-content {
+  padding-top: 12px;
+}
+
+/* Sticky Notes header */
+body.mate-dm-active .notes-archive-header {
+  background: var(--mate-color);
+  color: #fff;
+}
+body.mate-dm-active .notes-archive-header .lucide,
+body.mate-dm-active .notes-archive-header h2 {
+  color: #fff;
+}
+body.mate-dm-active .notes-archive-count {
+  color: rgba(255, 255, 255, 0.7);
+}
+body.mate-dm-active .notes-archive-header button {
+  color: rgba(255, 255, 255, 0.85);
+}
+body.mate-dm-active .notes-archive-header button:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* ==========================================================================
+   Mate DM: Chat bubble style (messenger feel)
+   ========================================================================== */
+
+/* --- Avatar (injected by JS into .msg-user / .msg-assistant) --- */
+.dm-bubble-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  display: none;
+  object-fit: cover;
+  margin-top: 2px;
+}
+body.mate-dm-active .dm-bubble-avatar {
+  display: block;
+}
+
+/* --- DM bubble header (name + time) --- */
+.dm-bubble-content {
+  flex: 1;
+  min-width: 0;
+}
+.dm-bubble-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.dm-bubble-name {
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--text);
+}
+.dm-bubble-time {
+  font-size: 12px;
+  color: var(--text-dimmer);
+}
+
+/* --- Shared: Slack-style flat layout for both user & assistant --- */
+body.mate-dm-active .msg-user,
+body.mate-dm-active .msg-assistant {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
+  padding: 4px 16px;
+  margin: 0;
+  border-radius: 0;
+}
+body.mate-dm-active .msg-user:hover,
+body.mate-dm-active .msg-assistant:hover {
+  background: var(--bg-alt);
+}
+
+/* --- User messages --- */
+body.mate-dm-active .msg-user {
+  justify-content: flex-start; /* left-aligned like DM */
+}
+body.mate-dm-active .msg-user .dm-bubble-avatar-me {
+  order: -1; /* avatar first (left) */
+}
+body.mate-dm-active .msg-user .bubble {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+  max-width: 100%;
+  font-size: 15px;
+  line-height: 1.46;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+body.mate-dm-active .msg-user .msg-actions {
+  display: none;
+}
+
+/* --- Assistant messages --- */
+body.mate-dm-active .msg-assistant .dm-bubble-content {
+  flex: 1;
+  min-width: 0;
+}
+body.mate-dm-active .msg-assistant .md-content {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+/* Hide turn meta in mate DM */
+body.mate-dm-active .turn-meta {
+  display: none;
+}
+
+/* --- Interstitial elements: indent to align with message content (16px pad + 36px avatar + 8px gap = 60px) --- */
+body.mate-dm-active .thinking-item,
+body.mate-dm-active .tool-item,
+body.mate-dm-active .tool-group,
+body.mate-dm-active .plan-card,
+body.mate-dm-active .permission-container,
+body.mate-dm-active .ask-user-container,
+body.mate-dm-active .subagent-log,
+body.mate-dm-active .conflict-msg,
+body.mate-dm-active .context-overflow-msg,
+body.mate-dm-active .sys-msg,
+body.mate-dm-active .activity-inline {
+  padding-left: 60px;
+}

package/lib/public/css/scheduler.css

@@ -18,8 +18,10 @@
 .scheduler-top-bar {
   display: flex;
   align-items: center;
-  padding: 10px 16px;
+  height: 48px;
+  padding: 0 16px;
   flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
 }
 .scheduler-top-title {
   display: flex;
@@ -96,7 +98,7 @@
   display: flex;
   flex-direction: row;
   gap: 10px;
-  padding: 0 10px 10px;
+  padding: 12px 10px 10px;
   min-height: 0;
   overflow: hidden;
 }

package/lib/public/css/sticky-notes.css

@@ -531,8 +531,10 @@
 .notes-archive-header {
   display: flex;
   align-items: center;
-  padding: 10px 16px;
+  height: 48px;
+  padding: 0 16px;
   flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .notes-archive-title-wrap {

package/lib/public/index.html

@@ -203,6 +203,7 @@
         <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>
         <button id="mate-skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
+        <button id="mate-scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
       </div>
       <div class="mate-sidebar-sessions-header">
         <span>Conversations</span>

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

@@ -1,6 +1,7 @@
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { hideKnowledge } from './mate-knowledge.js';
+import { isSchedulerOpen, closeScheduler } from './scheduler.js';
 
 var getMateWs = null;
 var currentMateId = null;
@@ -58,6 +59,14 @@ export function initMateSidebar(mateWsGetter) {
       if (origBtn) origBtn.click();
     });
   }
+  var mateSchedulerBtn = document.getElementById("mate-scheduler-btn");
+  if (mateSchedulerBtn) {
+    mateSchedulerBtn.addEventListener("click", function () {
+      hideKnowledge();
+      var origBtn = document.getElementById("scheduler-btn");
+      if (origBtn) origBtn.click();
+    });
+  }
 }
 
 export function showMateSidebar(mateId, mateData) {
@@ -293,6 +302,14 @@ function renderMateSessionItem(s) {
 
   el.addEventListener("click", (function (id) {
     return function () {
+      // Close any open panels
+      hideKnowledge();
+      if (isSchedulerOpen()) closeScheduler();
+      var stickyBtn = document.getElementById("sticky-notes-sidebar-btn");
+      var stickyPanel = document.getElementById("sticky-notes-panel");
+      if (stickyPanel && !stickyPanel.classList.contains("hidden")) {
+        if (stickyBtn) stickyBtn.click();
+      }
       var ws = getMateWs ? getMateWs() : null;
       if (ws && ws.readyState === 1) {
         ws.send(JSON.stringify({ type: "switch_session", id: id }));

package/lib/public/modules/stt.js

@@ -182,6 +182,7 @@ function startRecording() {
 
     ctx.inputEl.value = text;
     autoResize();
+    if (ctx.scrollToBottom) ctx.scrollToBottom();
   };
 
   recognition.onerror = function(e) {

package/package.json

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