clay-server 2.14.0-beta.1 → 2.14.0-beta.10

package/lib/public/app.js

@@ -809,6 +809,14 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       if (msg.type === "init" && msg.sessions) {
         renderMateSessionList(msg.sessions);
         requestKnowledgeList();
+        // Override title bar with mate name (not session/project title)
+        if (dmTargetUser && dmTargetUser.isMate) {
+          var mateDN = dmTargetUser.displayName || "New Mate";
+          if (headerTitleEl) headerTitleEl.textContent = mateDN;
+          var tbPN = document.getElementById("title-bar-project-name");
+          if (tbPN) tbPN.textContent = mateDN;
+          updatePageTitle();
+        }
       }
       if (msg.type === "session_list") {
         renderMateSessionList(msg.sessions || []);
@@ -863,6 +871,11 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
         savedMainWs = null;
       }
       mateWs = null;
+      // If main ws is also closed (server shutdown), show disconnect screen
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        setStatus("disconnected");
+        scheduleReconnect();
+      }
     };
   }
 
@@ -1804,6 +1817,32 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     }
   }
 
+  // --- Mate pre-thinking (instant dots before server responds) ---
+  var matePreThinkingEl = null;
+  function showMatePreThinking() {
+    removeMatePreThinking();
+    var mateName = dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate";
+    var mateAvatar = document.body.dataset.mateAvatarUrl || "";
+    matePreThinkingEl = document.createElement("div");
+    matePreThinkingEl.className = "thinking-item mate-thinking mate-pre-thinking";
+    matePreThinkingEl.innerHTML =
+      '<div class="mate-thinking-row" style="display:flex">' +
+      '<img class="mate-thinking-avatar" src="' + escapeHtml(mateAvatar) + '" alt="">' +
+      '<div class="mate-thinking-body">' +
+      '<span class="mate-thinking-name">' + escapeHtml(mateName) + '</span>' +
+      '<span class="mate-thinking-dots"><span></span><span></span><span></span></span>' +
+      '</div>' +
+      '</div>';
+    addToMessages(matePreThinkingEl);
+    scrollToBottom();
+  }
+  function removeMatePreThinking() {
+    if (matePreThinkingEl) {
+      matePreThinkingEl.remove();
+      matePreThinkingEl = null;
+    }
+  }
+
   // --- Config chip (model + mode + effort) ---
   var configChipWrap = $("config-chip-wrap");
   var configChip = $("config-chip");
@@ -2512,6 +2551,9 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       var win = contextData.contextWindow;
       return win > 0 ? Math.round((used / win) * 100) : 0;
     },
+    isMateDm: function () { return dmMode && dmTargetUser && dmTargetUser.isMate; },
+    getMateName: function () { return dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate"; },
+    getMateAvatarUrl: function () { return document.body.dataset.mateAvatarUrl || ""; },
   });
 
   // isPlanFile, toolSummary, toolActivityText, shortPath -> modules/tools.js
@@ -3402,9 +3444,17 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
           projectName = msg.project || msg.cwd;
           if (msg.slug) currentSlug = msg.slug;
           try { localStorage.setItem("clay-project-name-" + (currentSlug || "default"), projectName); } catch (e) {}
-          headerTitleEl.textContent = projectName;
-          var tbProjectName = $("title-bar-project-name");
-          if (tbProjectName) tbProjectName.textContent = msg.title || projectName;
+          // In mate DM, keep title as mate name (not project/session title)
+          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;
+          } else {
+            headerTitleEl.textContent = projectName;
+            var tbProjectName = $("title-bar-project-name");
+            if (tbProjectName) tbProjectName.textContent = msg.title || projectName;
+          }
           updatePageTitle();
           if (msg.version) {
             setPaletteVersion(msg.version);
@@ -3691,6 +3741,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
           break;
 
         case "thinking_start":
+          removeMatePreThinking();
           startThinking();
           break;
 
@@ -3705,6 +3756,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
 
         case "delta":
           if (typeof msg.text !== "string") break;
+          removeMatePreThinking();
           stopThinking();
           resetThinkingGroup();
           setActivity(null);
@@ -3712,6 +3764,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
           break;
 
         case "tool_start":
+          removeMatePreThinking();
           stopThinking();
           markAllToolsDone();
           if (msg.name === "EnterPlanMode") {
@@ -4531,6 +4584,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     isMateDm: function () { return dmMode && dmTargetUser && dmTargetUser.isMate; },
     getMateName: function () { return dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate"; },
     getMateAvatarUrl: function () { return document.body.dataset.mateAvatarUrl || ""; },
+    showMatePreThinking: function () { showMatePreThinking(); },
   });
 
   // --- STT module (voice input via Web Speech API) ---

package/lib/public/css/mates.css

@@ -1376,15 +1376,51 @@ body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row {
   30% { transform: translateY(-4px); opacity: 1; }
 }
 
-/* When done, hide mate row (JS does this too), show normal thinking header */
+/* When done, hide mate row (JS does this too), show compact expandable header */
 body.mate-dm-active .mate-thinking.done .mate-thinking-row {
   display: none;
 }
 body.mate-dm-active .mate-thinking.done .thinking-header {
   display: inline-flex !important;
+  font-size: 12px;
+  padding: 4px 10px;
+  background: rgba(var(--overlay-rgb), 0.04);
+  border-radius: 6px;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+body.mate-dm-active .mate-thinking.done .thinking-header:hover {
+  opacity: 1;
+  background: rgba(var(--overlay-rgb), 0.08);
+}
+body.mate-dm-active .mate-thinking .thinking-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.25s ease;
+}
+body.mate-dm-active .mate-thinking.expanded .thinking-content {
+  max-height: 2000px;
 }
 
-/* --- Mate Tool Group: subtle, compact --- */
+/* --- Mate Tool Group: compact, always collapsed with summary header --- */
+body.mate-dm-active .mate-tool-group {
+  margin: 2px 0;
+}
+body.mate-dm-active .mate-tool-group .tool-group-header {
+  font-size: 12px;
+  padding: 4px 10px;
+  background: rgba(var(--overlay-rgb), 0.04);
+  border-radius: 6px;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+body.mate-dm-active .mate-tool-group .tool-group-header:hover {
+  opacity: 1;
+  background: rgba(var(--overlay-rgb), 0.08);
+}
+body.mate-dm-active .mate-tool-group .tool-group-label {
+  font-size: 12px;
+}
 body.mate-dm-active .mate-tool-group .tool-item {
   border: none;
   background: none;
@@ -1395,49 +1431,120 @@ body.mate-dm-active .mate-tool-group .tool-name {
   color: var(--text-muted);
 }
 
-/* --- Mate Permission: conversational style --- */
+/* --- Mate Permission: conversational chat bubble --- */
 body.mate-dm-active .mate-permission {
-  border-radius: 12px;
-  border: 1px solid var(--border);
+  border: none;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  padding: 4px 16px;
+}
+body.mate-dm-active .mate-permission:hover {
   background: var(--bg-alt);
-  overflow: hidden;
 }
-body.mate-dm-active .mate-permission .permission-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px 8px;
+.mate-permission-ask {
+  font-size: 15px;
+  line-height: 1.46;
+  color: var(--text);
+  padding-left: 36px; /* align with name (avatar 28px + gap 8px) */
+  margin-bottom: 8px;
 }
-.mate-permission-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  flex-shrink: 0;
+.mate-permission-details {
+  padding-left: 36px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
 }
-body.mate-dm-active .mate-permission .permission-title {
-  font-size: 14px;
-  font-weight: 600;
+.mate-permission-details summary {
+  cursor: pointer;
+  user-select: none;
 }
-body.mate-dm-active .mate-permission .permission-actions {
-  padding: 8px 16px 12px;
+.mate-permission-details pre {
+  font-size: 11px;
+  margin: 4px 0 0;
+  padding: 8px;
+  background: rgba(var(--overlay-rgb), 0.04);
+  border-radius: 6px;
+  overflow-x: auto;
+  max-height: 200px;
+}
+.mate-permission-actions {
+  display: flex;
   gap: 6px;
+  padding-left: 36px;
+  padding-bottom: 4px;
+}
+.mate-permission-reply {
+  padding: 5px 14px;
+  border-radius: 16px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--bg-alt);
+  color: var(--text);
+  transition: background 0.15s, border-color 0.15s;
+}
+.mate-permission-reply:hover {
+  border-color: var(--text-dimmer);
+  background: rgba(var(--overlay-rgb), 0.06);
+}
+.mate-permission-allow {
+  background: var(--accent, #6c5ce7);
+  color: #fff;
+  border-color: var(--accent, #6c5ce7);
+}
+.mate-permission-allow:hover {
+  opacity: 0.9;
+  background: var(--accent, #6c5ce7);
+  border-color: var(--accent, #6c5ce7);
+}
+.mate-permission-deny {
+  color: var(--text-muted);
+}
+/* Resolved state */
+body.mate-dm-active .mate-permission.resolved .mate-permission-actions {
+  pointer-events: none;
+}
+body.mate-dm-active .mate-permission.resolved .mate-permission-reply {
+  display: none;
+}
+body.mate-dm-active .mate-permission.resolved .permission-decision-label {
+  font-size: 12px;
+  color: var(--text-dimmer);
+  padding-left: 36px;
+}
+
+/* --- Mate Activity: avatar + text (hidden, dots row is enough) --- */
+body.mate-dm-active .activity-inline {
+  display: none;
 }
 
-/* --- Mate Activity: avatar + text --- */
-body.mate-dm-active .mate-activity {
+/* --- Mate AskUserQuestion: avatar + content layout (matches msg-assistant) --- */
+body.mate-dm-active .mate-ask-user {
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  align-items: flex-start;
   gap: 8px;
+  padding: 4px 16px;
+  margin: 0;
+  max-width: 100%;
 }
-.mate-activity-avatar {
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
+body.mate-dm-active .mate-ask-user:hover {
+  background: var(--bg-alt);
+}
+body.mate-dm-active .mate-ask-user > .dm-bubble-avatar {
+  display: block;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
   flex-shrink: 0;
+  margin-top: 2px;
 }
-body.mate-dm-active .mate-activity .activity-text {
-  font-size: 13px;
-  color: var(--text-muted);
+body.mate-dm-active .mate-ask-user > .dm-bubble-content {
+  flex: 1;
+  min-width: 0;
 }
 
 /* --- Interstitial elements: indent to align with message content (16px pad + 36px avatar + 8px gap = 60px) --- */

package/lib/public/modules/input.js

@@ -105,6 +105,11 @@ export function sendMessage() {
   }
   ctx.ws.send(JSON.stringify(payload));
 
+  // Mate DM: show pre-thinking dots immediately (before server responds)
+  if (ctx.isMateDm && ctx.isMateDm()) {
+    ctx.showMatePreThinking();
+  }
+
   ctx.inputEl.value = "";
   sendInputSync();
   clearPendingImages();

package/lib/public/modules/tools.js

@@ -112,9 +112,16 @@ function updateToolGroupHeader(group) {
     refreshIcons();
   }
 
-  // Show group header only when 2+ visible tools
+  // Show group header only when 2+ visible tools (or always in mate DM)
   var header = group.el.querySelector(".tool-group-header");
-  if (group.toolCount >= 2) {
+  var isMate = group.el.classList.contains("mate-tool-group");
+  if (isMate) {
+    // Mate DM: always show header and collapse
+    header.style.display = "";
+    if (!group.userToggled) {
+      group.el.classList.add("collapsed");
+    }
+  } else if (group.toolCount >= 2) {
     header.style.display = "";
     // When 2+ tools, ensure collapsed by default (unless user already toggled)
     if (!group.userToggled && !group.el.classList.contains("expanded-by-user")) {
@@ -182,6 +189,29 @@ export function renderAskUserQuestion(toolId, input) {
   container.className = "ask-user-container";
   container.dataset.toolId = toolId;
 
+  // Mate DM: wrap in avatar + content layout (same as msg-assistant)
+  var mateContentWrap = null;
+  if (ctx.isMateDm && ctx.isMateDm()) {
+    container.classList.add("mate-ask-user");
+    var mateName = ctx.getMateName();
+    var mateAvatar = ctx.getMateAvatarUrl();
+
+    var avi = document.createElement("img");
+    avi.className = "dm-bubble-avatar";
+    avi.src = mateAvatar;
+    container.appendChild(avi);
+
+    mateContentWrap = document.createElement("div");
+    mateContentWrap.className = "dm-bubble-content";
+
+    var headerEl = document.createElement("div");
+    headerEl.className = "dm-bubble-header";
+    headerEl.innerHTML =
+      '<span class="dm-bubble-name">' + escapeHtml(mateName) + '</span>' +
+      '<span class="dm-bubble-time">' + String(new Date().getHours()).padStart(2, "0") + ":" + String(new Date().getMinutes()).padStart(2, "0") + '</span>';
+    mateContentWrap.appendChild(headerEl);
+  }
+
   var answers = {};
   var multiSelections = {};
 
@@ -300,6 +330,20 @@ export function renderAskUserQuestion(toolId, input) {
   });
   container.appendChild(skipBtn);
 
+  // Mate DM: move all content into the bubble content wrapper
+  if (mateContentWrap) {
+    var children = [];
+    for (var ci = 0; ci < container.childNodes.length; ci++) {
+      if (container.childNodes[ci] !== container.querySelector(".dm-bubble-avatar")) {
+        children.push(container.childNodes[ci]);
+      }
+    }
+    for (var cj = 0; cj < children.length; cj++) {
+      mateContentWrap.appendChild(children[cj]);
+    }
+    container.appendChild(mateContentWrap);
+  }
+
   ctx.addToMessages(container);
   disableMainInput();
   ctx.setActivity(null);
@@ -378,25 +422,22 @@ export function renderPermissionRequest(requestId, toolName, toolInput, decision
     return;
   }
 
+  // Mate DM: render as conversational chat bubble instead of formal dialog
+  if (ctx.isMateDm && ctx.isMateDm()) {
+    renderMatePermission(requestId, toolName, toolInput);
+    return;
+  }
+
   var container = document.createElement("div");
   container.className = "permission-container";
-  if (ctx.isMateDm()) container.classList.add("mate-permission");
   container.dataset.requestId = requestId;
 
   // Header
   var header = document.createElement("div");
   header.className = "permission-header";
-  if (ctx.isMateDm()) {
-    var mateName = ctx.getMateName();
-    var mateAvatar = ctx.getMateAvatarUrl();
-    header.innerHTML =
-      '<img class="mate-permission-avatar" src="' + escapeHtml(mateAvatar) + '" alt="">' +
-      '<span class="permission-title">' + escapeHtml(mateName) + ' wants to do something</span>';
-  } else {
-    header.innerHTML =
-      '<span class="permission-icon">' + iconHtml("shield") + '</span>' +
-      '<span class="permission-title">Permission Required</span>';
-  }
+  header.innerHTML =
+    '<span class="permission-icon">' + iconHtml("shield") + '</span>' +
+    '<span class="permission-title">Permission Required</span>';
 
   // Body
   var body = document.createElement("div");
@@ -622,6 +663,108 @@ function sendPlanResponse(container, requestId, decision, feedback) {
   delete pendingPermissions[requestId];
 }
 
+function matePermissionVerb(toolName) {
+  switch (toolName) {
+    case "Write": return "write to";
+    case "Edit": return "edit";
+    case "Read": return "read";
+    case "Bash": return "run a command on";
+    case "Grep": return "search";
+    case "Glob": return "search for files in";
+    case "WebFetch": return "fetch";
+    case "WebSearch": return "search the web for";
+    default: return "use " + toolName + " on";
+  }
+}
+
+function matePermissionTarget(toolName, toolInput) {
+  if (!toolInput || typeof toolInput !== "object") return "";
+  switch (toolName) {
+    case "Write": case "Edit": case "Read": return shortPath(toolInput.file_path);
+    case "Bash": return toolInput.description || (toolInput.command || "").substring(0, 60);
+    case "Grep": return toolInput.pattern || "";
+    case "Glob": return toolInput.pattern || "";
+    case "WebFetch": return toolInput.url || "";
+    case "WebSearch": return toolInput.query || "";
+    default: return "";
+  }
+}
+
+function renderMatePermission(requestId, toolName, toolInput) {
+  var mateName = ctx.getMateName();
+  var mateAvatar = ctx.getMateAvatarUrl();
+  var verb = matePermissionVerb(toolName);
+  var target = matePermissionTarget(toolName, toolInput);
+
+  var container = document.createElement("div");
+  container.className = "permission-container mate-permission";
+  container.dataset.requestId = requestId;
+
+  // Chat bubble: avatar + name + time
+  var headerRow = document.createElement("div");
+  headerRow.className = "dm-bubble-header";
+  headerRow.style.cssText = "display:flex;align-items:center;gap:8px;margin-bottom:6px";
+  headerRow.innerHTML =
+    '<img class="dm-bubble-avatar" src="' + escapeHtml(mateAvatar) + '" alt="" style="display:block;width:28px;height:28px;border-radius:6px">' +
+    '<span class="dm-bubble-name">' + escapeHtml(mateName) + '</span>' +
+    '<span class="dm-bubble-time">' + String(new Date().getHours()).padStart(2, "0") + ":" + String(new Date().getMinutes()).padStart(2, "0") + '</span>';
+  container.appendChild(headerRow);
+
+  // Conversational ask text
+  var askText = document.createElement("div");
+  askText.className = "mate-permission-ask";
+  var askMsg = "Can I " + verb + (target ? " " : "") + (target ? target : "") + "?";
+  askText.textContent = askMsg;
+  container.appendChild(askText);
+
+  // Collapsible details (subtle)
+  var details = document.createElement("details");
+  details.className = "mate-permission-details";
+  var detailsSummary = document.createElement("summary");
+  detailsSummary.textContent = "Details";
+  var detailsPre = document.createElement("pre");
+  detailsPre.textContent = JSON.stringify(toolInput, null, 2);
+  details.appendChild(detailsSummary);
+  details.appendChild(detailsPre);
+  container.appendChild(details);
+
+  // Quick reply buttons (chat-style)
+  var actions = document.createElement("div");
+  actions.className = "permission-actions mate-permission-actions";
+
+  var allowBtn = document.createElement("button");
+  allowBtn.className = "mate-permission-reply mate-permission-allow";
+  allowBtn.textContent = "Sure";
+  allowBtn.addEventListener("click", function () {
+    sendPermissionResponse(container, requestId, "allow");
+  });
+
+  var alwaysBtn = document.createElement("button");
+  alwaysBtn.className = "mate-permission-reply mate-permission-always";
+  alwaysBtn.textContent = "Always allow this";
+  alwaysBtn.addEventListener("click", function () {
+    sendPermissionResponse(container, requestId, "allow_always");
+  });
+
+  var denyBtn = document.createElement("button");
+  denyBtn.className = "mate-permission-reply mate-permission-deny";
+  denyBtn.textContent = "No";
+  denyBtn.addEventListener("click", function () {
+    sendPermissionResponse(container, requestId, "deny");
+  });
+
+  actions.appendChild(allowBtn);
+  actions.appendChild(alwaysBtn);
+  actions.appendChild(denyBtn);
+  container.appendChild(actions);
+
+  ctx.addToMessages(container);
+  pendingPermissions[requestId] = container;
+  refreshIcons();
+  ctx.setActivity(null);
+  ctx.scrollToBottom();
+}
+
 function sendPermissionResponse(container, requestId, decision) {
   if (container.classList.contains("resolved")) return;
   container.classList.add("resolved");
@@ -1182,6 +1325,13 @@ export function startThinking() {
     var el = thinkingGroup.el;
     el.classList.remove("done");
     el.querySelector(".thinking-content").textContent = "";
+    // Mate mode: restore dots row, hide thinking header
+    if (el.classList.contains("mate-thinking")) {
+      var dotsRow = el.querySelector(".mate-thinking-row");
+      if (dotsRow) dotsRow.style.display = "flex";
+      var header = el.querySelector(".thinking-header");
+      if (header) header.style.display = "none";
+    }
     currentThinking = { el: el, fullText: "", startTime: Date.now() };
     refreshIcons();
     ctx.scrollToBottom();
@@ -1252,12 +1402,15 @@ export function stopThinking(duration) {
   } else {
     currentThinking.el.querySelector(".thinking-duration").textContent = " " + secs.toFixed(1) + "s";
   }
-  // In mate mode: hide dots, show expandable thinking header
+  // In mate mode: hide dots, show compact expandable thinking header
   if (currentThinking.el.classList.contains("mate-thinking")) {
     var dotsRow = currentThinking.el.querySelector(".mate-thinking-row");
     if (dotsRow) dotsRow.style.display = "none";
     var header = currentThinking.el.querySelector(".thinking-header");
-    if (header) header.style.display = "";
+    if (header) {
+      header.style.display = "";
+      header.style.cursor = "pointer";
+    }
   }
   currentThinking = null;
 }
@@ -1289,6 +1442,7 @@ export function createToolItem(id, name) {
 
     groupEl.querySelector(".tool-group-header").addEventListener("click", function () {
       groupEl.classList.toggle("collapsed");
+      if (currentToolGroup) currentToolGroup.userToggled = true;
     });
 
     ctx.addToMessages(groupEl);

package/package.json

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