clay-server 2.14.0-beta.7 → 2.14.0-beta.9

package/lib/public/css/mates.css

@@ -1431,32 +1431,89 @@ 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) --- */
@@ -1464,6 +1521,17 @@ body.mate-dm-active .activity-inline {
   display: none;
 }
 
+/* --- Mate AskUserQuestion: avatar + name header --- */
+.ask-user-mate-header {
+  display: none;
+}
+body.mate-dm-active .ask-user-mate-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
 /* --- 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,

package/lib/public/modules/tools.js

@@ -189,6 +189,19 @@ export function renderAskUserQuestion(toolId, input) {
   container.className = "ask-user-container";
   container.dataset.toolId = toolId;
 
+  // Mate DM: inject avatar + name header into ask-user container
+  if (ctx.isMateDm && ctx.isMateDm()) {
+    var mateName = ctx.getMateName();
+    var mateAvatar = ctx.getMateAvatarUrl();
+    var mateHeader = document.createElement("div");
+    mateHeader.className = "dm-bubble-header ask-user-mate-header";
+    mateHeader.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(mateHeader);
+  }
+
   var answers = {};
   var multiSelections = {};
 
@@ -385,25 +398,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");
@@ -629,6 +639,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");

package/package.json

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