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

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/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.2",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",