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

package/lib/public/app.js

@@ -1804,6 +1804,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");
@@ -3691,6 +3717,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
           break;
 
         case "thinking_start":
+          removeMatePreThinking();
           startThinking();
           break;
 
@@ -3705,6 +3732,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
 
         case "delta":
           if (typeof msg.text !== "string") break;
+          removeMatePreThinking();
           stopThinking();
           resetThinkingGroup();
           setActivity(null);
@@ -3712,6 +3740,7 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
           break;
 
         case "tool_start":
+          removeMatePreThinking();
           stopThinking();
           markAllToolsDone();
           if (msg.name === "EnterPlanMode") {
@@ -4531,6 +4560,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;
@@ -1423,21 +1459,9 @@ body.mate-dm-active .mate-permission .permission-actions {
   gap: 6px;
 }
 
-/* --- Mate Activity: avatar + text --- */
-body.mate-dm-active .mate-activity {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.mate-activity-avatar {
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-body.mate-dm-active .mate-activity .activity-text {
-  font-size: 13px;
-  color: var(--text-muted);
+/* --- Mate Activity: avatar + text (hidden, dots row is enough) --- */
+body.mate-dm-active .activity-inline {
+  display: none;
 }
 
 /* --- 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")) {
@@ -1252,12 +1259,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 +1299,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.3",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",