clay-server 2.26.0-beta.8 → 2.26.0

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

@@ -6,7 +6,7 @@ import { isSchedulerOpen, closeScheduler } from './scheduler.js';
 import { hideNotes } from './sticky-notes.js';
 import { openSearch as openSessionSearch } from './session-search.js';
 
-var getMateWs = null;
+var getWs = null;
 var currentMateId = null;
 var currentMate = null;
 var cachedSessions = [];
@@ -27,8 +27,8 @@ var searchQuery = "";
 var searchMatchIds = null;
 var searchDebounce = null;
 
-export function initMateSidebar(mateWsGetter) {
-  getMateWs = mateWsGetter;
+export function initMateSidebar(wsGetter) {
+  getWs = wsGetter;
   columnEl = document.getElementById("mate-sidebar-column");
   listEl = document.getElementById("mate-session-list");
   avatarEl = document.getElementById("mate-sidebar-avatar");
@@ -37,7 +37,7 @@ export function initMateSidebar(mateWsGetter) {
 
   if (newSessionBtn) {
     newSessionBtn.addEventListener("click", function () {
-      var ws = getMateWs ? getMateWs() : null;
+      var ws = getWs ? getWs() : null;
       if (ws && ws.readyState === 1) {
         ws.send(JSON.stringify({ type: "new_session" }));
       }
@@ -73,7 +73,7 @@ export function initMateSidebar(mateWsGetter) {
         return;
       }
       searchDebounce = setTimeout(function () {
-        var ws = getMateWs ? getMateWs() : null;
+        var ws = getWs ? getWs() : null;
         if (ws && ws.readyState === 1) {
           ws.send(JSON.stringify({ type: "search_sessions", query: q }));
         }
@@ -316,6 +316,10 @@ function spawnSparks(cx, cy) {
   }
 }
 
+export function getMateSessions() {
+  return cachedSessions;
+}
+
 export function hideMateSidebar() {
   currentMateId = null;
   currentMate = null;
@@ -498,7 +502,7 @@ function renderDebateGroup(children, groupKey) {
       hideKnowledge();
       if (isSchedulerOpen()) closeScheduler();
       hideNotes();
-      var ws = getMateWs ? getMateWs() : null;
+      var ws = getWs ? getWs() : null;
       if (ws && ws.readyState === 1) {
         ws.send(JSON.stringify({ type: "switch_session", id: id }));
       }
@@ -534,7 +538,7 @@ function renderDebateGroup(children, groupKey) {
           hideKnowledge();
           if (isSchedulerOpen()) closeScheduler();
           hideNotes();
-          var ws = getMateWs ? getMateWs() : null;
+          var ws = getWs ? getWs() : null;
           if (ws && ws.readyState === 1) {
             ws.send(JSON.stringify({ type: "switch_session", id: id }));
           }
@@ -580,7 +584,7 @@ function renderMateSessionItem(s) {
       if (isSchedulerOpen()) closeScheduler();
       hideNotes();
       var pendingQuery = searchQuery || "";
-      var ws = getMateWs ? getMateWs() : null;
+      var ws = getWs ? getWs() : null;
       if (ws && ws.readyState === 1) {
         ws.send(JSON.stringify({ type: "switch_session", id: id }));
       }
@@ -642,7 +646,7 @@ function showMateSessionCtxMenu(anchorEl, sessionId, title) {
     overlay.querySelector(".mate-confirm-cancel").addEventListener("click", function () { overlay.remove(); });
     overlay.querySelector(".mate-confirm-delete").addEventListener("click", function () {
       overlay.remove();
-      var ws = getMateWs ? getMateWs() : null;
+      var ws = getWs ? getWs() : null;
       if (ws && ws.readyState === 1) {
         ws.send(JSON.stringify({ type: "delete_session", id: sessionId }));
       }

package/lib/public/modules/mention.js

@@ -176,13 +176,42 @@ function selectMentionItem(idx) {
   hideMentionMenu();
 }
 
+function ensureChipContrast(hex) {
+  if (!hex || hex.charAt(0) !== "#") return hex;
+  var r = parseInt(hex.substring(1, 3), 16);
+  var g = parseInt(hex.substring(3, 5), 16);
+  var b = parseInt(hex.substring(5, 7), 16);
+  // Relative luminance (sRGB)
+  var lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  var isDark = document.documentElement.classList.contains("dark") ||
+               document.body.classList.contains("dark-mode");
+  if (isDark) {
+    // Dark mode: lighten if too dark
+    return lum < 0.4 ? color_mix_lighten(r, g, b, 0.35) : hex;
+  }
+  // Light mode: darken if too bright
+  return lum > 0.55 ? color_mix_darken(r, g, b, 0.4) : hex;
+}
+
+function color_mix_darken(r, g, b, amount) {
+  var f = 1 - amount;
+  return "#" + [Math.round(r * f), Math.round(g * f), Math.round(b * f)]
+    .map(function (v) { return v.toString(16).padStart(2, "0"); }).join("");
+}
+
+function color_mix_lighten(r, g, b, amount) {
+  return "#" + [Math.round(r + (255 - r) * amount), Math.round(g + (255 - g) * amount), Math.round(b + (255 - b) * amount)]
+    .map(function (v) { return v.toString(16).padStart(2, "0"); }).join("");
+}
+
 function showInputMentionChip(name, color, avatarSrc) {
   removeInputMentionChip();
+  var textColor = ensureChipContrast(color);
   var chip = document.createElement("div");
   chip.id = "input-mention-chip";
   chip.innerHTML =
     '<img class="input-mention-chip-avatar" src="' + escapeHtml(avatarSrc) + '" width="18" height="18" />' +
-    '<span class="input-mention-chip-name" style="color:' + escapeHtml(color) + '">@' + escapeHtml(name) + '</span>' +
+    '<span class="input-mention-chip-name" style="color:' + escapeHtml(textColor) + '">@' + escapeHtml(name) + '</span>' +
     '<button class="input-mention-chip-remove" type="button" aria-label="Remove mention">&times;</button>';
   chip.style.setProperty("--chip-color", color);
 
@@ -277,7 +306,16 @@ export function sendMention(mateId, text, pastes, images) {
 
 // Recreate the mention block if it was lost (e.g. session switch)
 function ensureMentionBlock() {
-  if (currentMentionEl && currentMentionEl.parentNode) return; // still in DOM
+  if (currentMentionEl && currentMentionEl.parentNode) {
+    // If other elements (e.g. permission requests) were added after the mention
+    // block, move it to the bottom to maintain chronological order.
+    var parent = currentMentionEl.parentNode;
+    if (parent.lastElementChild !== currentMentionEl) {
+      parent.appendChild(currentMentionEl);
+      if (ctx.scrollToBottom) ctx.scrollToBottom();
+    }
+    return;
+  }
   if (!activeMentionMeta) return;
   // Recreate from saved meta
   handleMentionStart(activeMentionMeta);

package/lib/public/modules/sidebar.js

@@ -10,6 +10,7 @@ import { closeArchive } from './sticky-notes.js';
 import { closeScheduler } from './scheduler.js';
 import { openSearch as openSessionSearch } from './session-search.js';
 import { openCommandPalette } from './command-palette.js';
+import { getMateSessions } from './mate-sidebar.js';
 
 var ctx;
 
@@ -351,6 +352,7 @@ function renderLoopGroup(loopId, children, groupKey) {
 
   var loopName = (children[0].loop && children[0].loop.name) || "Ralph Loop";
   var isRalph = children[0].loop && children[0].loop.source === "ralph";
+  var isDebate = children[0].loop && children[0].loop.source === "debate";
   var isCrafting = false;
   for (var j = 0; j < children.length; j++) {
     if (children[j].loop && children[j].loop.role === "crafting") isCrafting = true;
@@ -363,7 +365,10 @@ function renderLoopGroup(loopId, children, groupKey) {
 
   // Group header row
   var el = document.createElement("div");
-  el.className = "session-loop-group" + (hasActive ? " active" : "") + (expanded ? " expanded" : "") + (isRalph ? "" : " scheduled");
+  var groupClass = "session-loop-group" + (hasActive ? " active" : "") + (expanded ? " expanded" : "");
+  if (isDebate) groupClass += " debate";
+  else if (!isRalph) groupClass += " scheduled";
+  el.className = groupClass;
   el.dataset.loopId = loopId;
 
   var chevron = document.createElement("button");
@@ -388,14 +393,16 @@ function renderLoopGroup(loopId, children, groupKey) {
   if (anyProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
-  var groupIcon = isRalph ? "repeat" : "calendar-clock";
-  textHtml += '<span class="session-loop-icon' + (isRalph ? "" : " scheduled") + '">' + iconHtml(groupIcon) + '</span>';
+  var groupIcon = isDebate ? "mic" : (isRalph ? "repeat" : "calendar-clock");
+  var iconClass = isDebate ? " debate" : (isRalph ? "" : " scheduled");
+  textHtml += '<span class="session-loop-icon' + iconClass + '">' + iconHtml(groupIcon) + '</span>';
   textHtml += '<span class="session-loop-name">' + escapeHtml(loopName) + '</span>';
   if (isCrafting && children.length === 1) {
     textHtml += '<span class="session-loop-badge crafting">Crafting</span>';
   } else {
     var countLabel = runCount === 1 ? children.length : runCount + (runCount === 1 ? " run" : " runs");
-    textHtml += '<span class="session-loop-count' + (isRalph ? "" : " scheduled") + '">' + countLabel + '</span>';
+    var countClass = isDebate ? " debate" : (isRalph ? "" : " scheduled");
+    textHtml += '<span class="session-loop-count' + countClass + '">' + countLabel + '</span>';
   }
   textSpan.innerHTML = textHtml;
   el.appendChild(textSpan);
@@ -538,6 +545,9 @@ function renderSessionItem(s) {
   if (s.isProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  if (s.loop && s.loop.source === "debate") {
+    textHtml += '<span class="session-debate-icon" title="Debate">' + iconHtml("mic") + '</span>';
+  }
   if (ctx.multiUser && s.sessionVisibility === "private") {
     textHtml += '<span class="session-private-icon" title="Private session">' + iconHtml("lock") + '</span>';
   }
@@ -598,8 +608,8 @@ export function renderSessionList(sessions) {
   var normalSessions = [];
   for (var i = 0; i < cachedSessions.length; i++) {
     var s = cachedSessions[i];
-    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph") {
-      // Task crafting sessions live in the scheduler calendar, not the main list
+    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph" && s.loop.source !== "debate") {
+      // Task crafting sessions live in the scheduler calendar, not the main list (except debate)
       continue;
     } else if (s.loop && s.loop.loopId) {
       var startedAt = s.loop.startedAt || 0;
@@ -923,7 +933,8 @@ function renderSheetSessions(listEl) {
     (function (p) {
       var chip = document.createElement("button");
       chip.className = "mobile-chat-chip";
-      if (p.slug === cachedCurrentSlug) chip.classList.add("active");
+      var isDmActive = document.body.classList.contains("mate-dm-active");
+      if (p.slug === cachedCurrentSlug && !isDmActive) chip.classList.add("active");
       chip.dataset.type = "project";
       chip.dataset.slug = p.slug;
 
@@ -975,6 +986,7 @@ function renderSheetSessions(listEl) {
       var mp = mate.profile || {};
       var chip = document.createElement("button");
       chip.className = "mobile-chat-chip";
+      if (currentDmUserId === mate.id) chip.classList.add("active");
       chip.dataset.type = "mate";
       chip.dataset.mateId = mate.id;
 
@@ -1029,10 +1041,9 @@ function renderSheetSessions(listEl) {
     if (type === "project") {
       renderMobileSessionsInto(sessionListEl);
     } else if (type === "mate") {
-      // Mate DM: just open the DM
+      // Mate DM: open the DM and show mate actions
       if (ctx.openDm) ctx.openDm(mateId);
-      closeMobileSheet();
-      return;
+      renderMateMobileActions(sessionListEl);
     }
 
     refreshIcons();
@@ -1051,15 +1062,23 @@ function renderSheetSessions(listEl) {
         var type = chip.dataset.type;
         if (type === "project") {
           var slug = chip.dataset.slug;
-          if (slug !== cachedCurrentSlug) {
-            // Switch project, show loading, keep sheet open
+          var isDmNow = !!currentDmUserId;
+          if (slug !== cachedCurrentSlug || isDmNow) {
+            // Switch project (or exit DM back to same project)
             sessionListEl.innerHTML = "";
-            var loading = document.createElement("div");
-            loading.className = "mobile-chat-context-note";
-            loading.textContent = "Loading sessions...";
-            sessionListEl.appendChild(loading);
+            if (slug !== cachedCurrentSlug) {
+              var loading = document.createElement("div");
+              loading.className = "mobile-chat-context-note";
+              loading.textContent = "Loading sessions...";
+              sessionListEl.appendChild(loading);
+            }
             if (ctx.switchProject) ctx.switchProject(slug);
-            // renderSessionList will be called by WS, which calls refreshMobileChatSheet
+            if (!isDmNow || slug !== cachedCurrentSlug) {
+              // renderSessionList will be called by WS, which calls refreshMobileChatSheet
+            } else {
+              // Exited DM, same project - render sessions now
+              renderSessionsForContext("project", slug, null);
+            }
           } else {
             renderSessionsForContext("project", slug, null);
           }
@@ -1073,8 +1092,12 @@ function renderSheetSessions(listEl) {
   // Track that chat sheet is open
   mobileChatSheetOpen = true;
 
-  // --- Initial render: current project sessions ---
-  renderSessionsForContext("project", cachedCurrentSlug, null);
+  // --- Initial render: show mate actions if DM active, otherwise project sessions ---
+  if (currentDmUserId) {
+    renderSessionsForContext("mate", null, currentDmUserId);
+  } else {
+    renderSessionsForContext("project", cachedCurrentSlug, null);
+  }
 }
 
 // Helper: create a mobile session item element
@@ -1350,6 +1373,54 @@ function createMobileLoopGroup(loopId, children, groupKey) {
   return wrapper;
 }
 
+function renderMateMobileActions(container) {
+  var newSessionBtn = document.createElement("button");
+  newSessionBtn.className = "mobile-session-new";
+  newSessionBtn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> New session';
+  newSessionBtn.addEventListener("click", function () {
+    if (ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({ type: "new_session" }));
+    }
+    closeMobileSheet();
+  });
+  container.appendChild(newSessionBtn);
+
+  var debateBtn = document.createElement("button");
+  debateBtn.className = "mobile-session-new";
+  debateBtn.innerHTML = '<i data-lucide="mic" style="width:16px;height:16px"></i> New debate';
+  debateBtn.addEventListener("click", function () {
+    closeMobileSheet();
+    var targetBtn = document.getElementById("mate-debate-btn");
+    if (targetBtn) setTimeout(function () { targetBtn.click(); }, 250);
+  });
+  container.appendChild(debateBtn);
+
+  // Render mate session list
+  var mateSessions = getMateSessions();
+  if (mateSessions.length > 0) {
+    var sorted = mateSessions.slice().sort(function (a, b) {
+      return (b.lastActivity || 0) - (a.lastActivity || 0);
+    });
+
+    var currentGroup = "";
+    for (var i = 0; i < sorted.length; i++) {
+      var s = sorted[i];
+      var group = getDateGroup(s.lastActivity || 0);
+      if (group !== currentGroup) {
+        currentGroup = group;
+        var header = document.createElement("div");
+        header.className = "mobile-sheet-group";
+        header.textContent = group;
+        container.appendChild(header);
+      }
+      var mateItem = createMobileSessionItem(s);
+      container.appendChild(mateItem);
+    }
+  }
+
+  refreshIcons();
+}
+
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
 function renderMobileSessionsInto(container) {
   var newBtn = document.createElement("button");
@@ -1368,7 +1439,7 @@ function renderMobileSessionsInto(container) {
   var normalSessions = [];
   for (var i = 0; i < cachedSessions.length; i++) {
     var s = cachedSessions[i];
-    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph") {
+    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph" && s.loop.source !== "debate") {
       continue;
     } else if (s.loop && s.loop.loopId) {
       var startedAt = s.loop.startedAt || 0;
@@ -1424,7 +1495,7 @@ function renderMobileSessionsInto(container) {
 }
 
 // Refresh mobile chat sheet when session data updates (called from renderSessionList)
-function refreshMobileChatSheet() {
+export function refreshMobileChatSheet() {
   if (!mobileChatSheetOpen) return;
   var sheet = document.getElementById("mobile-sheet");
   if (!sheet || sheet.classList.contains("hidden")) {
@@ -1441,7 +1512,10 @@ function refreshMobileChatSheet() {
     chip.classList.remove("active");
 
     // Update active state
-    if (chip.dataset.type === "project" && chip.dataset.slug === cachedCurrentSlug) {
+    var isDmActive = !!currentDmUserId;
+    if (chip.dataset.type === "project" && chip.dataset.slug === cachedCurrentSlug && !isDmActive) {
+      chip.classList.add("active");
+    } else if (chip.dataset.type === "mate" && chip.dataset.mateId === currentDmUserId) {
       chip.classList.add("active");
     }
 
@@ -1461,9 +1535,13 @@ function refreshMobileChatSheet() {
     }
   }
 
-  // Re-render sessions for current project
+  // Re-render sessions for current context
   sessionListEl.innerHTML = "";
-  renderMobileSessionsInto(sessionListEl);
+  if (currentDmUserId) {
+    renderMateMobileActions(sessionListEl);
+  } else {
+    renderMobileSessionsInto(sessionListEl);
+  }
 
   refreshIcons();
 }
@@ -1619,8 +1697,7 @@ function renderSheetTools(listEl) {
     { icon: "book-open", label: "Knowledge", action: "mate-knowledge" },
     { icon: "sticky-note", label: "Sticky Notes", action: "mate-sticky" },
     { icon: "puzzle", label: "Skills", action: "mate-skills" },
-    { icon: "calendar-clock", label: "Scheduled Tasks", action: "mate-scheduler" },
-    { icon: "mic", label: "Debate", action: "mate-debate" }
+    { icon: "calendar-clock", label: "Scheduled Tasks", action: "mate-scheduler" }
   ] : [
     { icon: "folder-tree", label: "Files", action: "files" },
     { icon: "square-terminal", label: "Terminal", action: "terminal" },
@@ -4062,6 +4139,8 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       avatar.className = "icon-strip-user-avatar" + (mate.primary ? " icon-strip-primary-mate" : "");
       avatar.src = mateAvatarUrl(mate, 34);
       avatar.alt = mp.displayName || mate.name || "Mate";
+      var mateColor = (mp.avatarColor) || mate.avatarColor || "#7c3aed";
+      avatar.style.background = mateColor + "30";
       el.appendChild(avatar);
 
       // Processing status dot (IO blink)

package/lib/public/modules/terminal.js

@@ -352,6 +352,16 @@ function createXtermForTab(tab) {
 
   xterm.open(bodyEl);
 
+  // WebGL addon: pixel-perfect rendering (eliminates gaps in block characters)
+  // Must be loaded after xterm.open() so the rendering context is available.
+  if (typeof WebglAddon !== "undefined") {
+    try {
+      xterm.loadAddon(new WebglAddon.WebglAddon());
+    } catch (e) {
+      // WebGL not available, fall back to DOM renderer
+    }
+  }
+
   // Route input to server
   xterm.onData(function (data) {
     if (ctx.ws && ctx.connected) {
@@ -481,14 +491,14 @@ function renderTabBar() {
         startRenameTab(t, label);
       });
 
-      var closeBtn = document.createElement("button");
-      closeBtn.className = "terminal-tab-close";
-      closeBtn.innerHTML = '<i data-lucide="trash-2" style="width:12px;height:12px"></i>';
-      closeBtn.addEventListener("click", function (e) {
+      var moreBtn = document.createElement("button");
+      moreBtn.className = "terminal-tab-more";
+      moreBtn.innerHTML = '<i data-lucide="ellipsis" style="width:12px;height:12px"></i>';
+      moreBtn.addEventListener("click", function (e) {
         e.stopPropagation();
-        closeTab(t.id);
+        showTabContextMenu(e, t, label);
       });
-      el.appendChild(closeBtn);
+      el.appendChild(moreBtn);
 
       el.addEventListener("click", function () {
         if (t.id !== activeTabId) {
@@ -504,6 +514,52 @@ function renderTabBar() {
   refreshIcons();
 }
 
+// --- Tab context menu (three-dot) ---
+function showTabContextMenu(e, tab, labelEl) {
+  var existing = document.querySelector(".terminal-tab-ctx");
+  if (existing) existing.remove();
+
+  var menu = document.createElement("div");
+  menu.className = "terminal-tab-ctx";
+
+  var renameItem = document.createElement("button");
+  renameItem.className = "terminal-tab-ctx-item";
+  renameItem.innerHTML = '<i data-lucide="pencil" style="width:13px;height:13px"></i> Rename';
+  renameItem.addEventListener("click", function () {
+    menu.remove();
+    startRenameTab(tab, labelEl);
+  });
+  menu.appendChild(renameItem);
+
+  var closeItem = document.createElement("button");
+  closeItem.className = "terminal-tab-ctx-item terminal-tab-ctx-danger";
+  closeItem.innerHTML = '<i data-lucide="trash-2" style="width:13px;height:13px"></i> Close';
+  closeItem.addEventListener("click", function () {
+    menu.remove();
+    closeTab(tab.id);
+  });
+  menu.appendChild(closeItem);
+
+  document.body.appendChild(menu);
+  refreshIcons();
+
+  // Position near the button
+  var rect = e.currentTarget.getBoundingClientRect();
+  menu.style.top = (rect.bottom + 4) + "px";
+  menu.style.left = rect.left + "px";
+
+  // Dismiss on outside click
+  function dismiss(ev) {
+    if (!menu.contains(ev.target)) {
+      menu.remove();
+      document.removeEventListener("mousedown", dismiss, true);
+    }
+  }
+  setTimeout(function () {
+    document.addEventListener("mousedown", dismiss, true);
+  }, 0);
+}
+
 // --- Rename tab inline ---
 function startRenameTab(tab, labelEl) {
   var input = document.createElement("input");

package/lib/public/modules/theme.js

@@ -155,7 +155,8 @@ function computeVars(theme) {
     "--code-bg":        isLight ? darken(b.base00, 0.03) : darken(b.base00, 0.15),
     "--border":         b.base02,
     "--border-subtle":  mixColors(b.base00, b.base02, 0.6),
-    "--input-bg":       mixColors(b.base01, b.base02, 0.5),
+    "--input-bg":       isLight ? darken(b.base00, 0.04) : mixColors(b.base01, b.base02, 0.5),
+    "--ask-mate-bg":    isLight ? mixColors("#ffffff", darken(b.base00, 0.04), 0.6) : mixColors(b.base00, mixColors(b.base01, b.base02, 0.5), 0.6),
     "--user-bubble":    isLight ? darken(b.base01, 0.03) : mixColors(b.base01, b.base02, 0.3),
     "--error":          b.base08,
     "--success":        b.base0B,

package/lib/public/modules/tools.js

@@ -1,9 +1,10 @@
 import { escapeHtml, copyToClipboard } from './utils.js';
-import { iconHtml, refreshIcons, randomThinkingVerb } from './icons.js';
+import { iconHtml, refreshIcons } from './icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks } from './markdown.js';
 import { renderUnifiedDiff, renderSplitDiff, renderPatchDiff } from './diff.js';
 import { openFile } from './filebrowser.js';
 import { mateAvatarUrl } from './avatar.js';
+import { getChatLayout } from './theme.js';
 
 var ctx;
 
@@ -496,12 +497,17 @@ 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, mateId);
+  // Channel layout or Mate DM: conversational "Can I ...?" style
+  if ((ctx.isMateDm && ctx.isMateDm()) || getChatLayout() === "channel") {
+    renderConversationalPermission(requestId, toolName, toolInput, mateId);
     return;
   }
 
+  // Bubble layout: formal "Permission Required" dialog
+  renderFormalPermission(requestId, toolName, toolInput, decisionReason);
+}
+
+function renderFormalPermission(requestId, toolName, toolInput, decisionReason) {
   var container = document.createElement("div");
   container.className = "permission-container";
   container.dataset.requestId = requestId;
@@ -755,18 +761,40 @@ function matePermissionInfo(toolName, toolInput) {
   return { verb: verb, target: target };
 }
 
-function renderMatePermission(requestId, toolName, toolInput, mateId) {
-  var mateName = ctx.getMateName();
-  var mateAvatar = ctx.getMateAvatarUrl();
-
-  // If mateId provided (e.g. @mention in DM), use that mate's info instead of DM target
+function resolvePermissionIdentity(mateId) {
+  // Mate DM: use DM target mate info
+  if (ctx.isMateDm && ctx.isMateDm()) {
+    var name = ctx.getMateName();
+    var avatar = ctx.getMateAvatarUrl();
+    // Override if specific mateId provided (e.g. @mention)
+    if (mateId && ctx.getMateById) {
+      var mentionMate = ctx.getMateById(mateId);
+      if (mentionMate) {
+        name = (mentionMate.profile && mentionMate.profile.displayName) || mentionMate.displayName || mentionMate.name || name;
+        avatar = mateAvatarUrl(mentionMate, 36);
+      }
+    }
+    return { name: name, avatar: avatar };
+  }
+  // Channel with Mate mention
   if (mateId && ctx.getMateById) {
-    var mentionMate = ctx.getMateById(mateId);
-    if (mentionMate) {
-      mateName = (mentionMate.profile && mentionMate.profile.displayName) || mentionMate.displayName || mentionMate.name || mateName;
-      mateAvatar = mateAvatarUrl(mentionMate, 36);
+    var mate = ctx.getMateById(mateId);
+    if (mate) {
+      return {
+        name: (mate.profile && mate.profile.displayName) || mate.displayName || mate.name || "Mate",
+        avatar: mateAvatarUrl(mate, 36)
+      };
     }
   }
+  // Project chat (Claude Code)
+  return {
+    name: "Claude Code",
+    avatar: ctx.getClaudeAvatar ? ctx.getClaudeAvatar() : ""
+  };
+}
+
+function renderConversationalPermission(requestId, toolName, toolInput, mateId) {
+  var identity = resolvePermissionIdentity(mateId);
   var info = matePermissionInfo(toolName, toolInput);
   var askMsg = "Can I " + info.verb + (info.target ? " " + info.target : "") + "?";
 
@@ -777,7 +805,7 @@ function renderMatePermission(requestId, toolName, toolInput, mateId) {
   // Avatar (left column)
   var avi = document.createElement("img");
   avi.className = "dm-bubble-avatar dm-bubble-avatar-mate";
-  avi.src = mateAvatar;
+  avi.src = identity.avatar;
   avi.alt = "";
   container.appendChild(avi);
 
@@ -789,7 +817,7 @@ function renderMatePermission(requestId, toolName, toolInput, mateId) {
   var headerRow = document.createElement("div");
   headerRow.className = "dm-bubble-header";
   headerRow.innerHTML =
-    '<span class="dm-bubble-name">' + escapeHtml(mateName) + '</span>' +
+    '<span class="dm-bubble-name">' + escapeHtml(identity.name) + '</span>' +
     '<span class="dm-bubble-time">' + String(new Date().getHours()).padStart(2, "0") + ":" + String(new Date().getMinutes()).padStart(2, "0") + '</span>';
   content.appendChild(headerRow);
 
@@ -1409,12 +1437,11 @@ export function startThinking() {
     var el = thinkingGroup.el;
     el.classList.remove("done");
     el.querySelector(".thinking-content").textContent = "";
-    // Mate mode: restore sparkle activity row, hide thinking header
+    // Mate mode: restore dots activity row, hide thinking header
     if (el.classList.contains("mate-thinking")) {
       var actRow = el.querySelector(".mate-thinking-activity");
       if (actRow) {
         actRow.style.display = "";
-        actRow.querySelector(".activity-text").textContent = randomThinkingVerb() + "...";
       }
       var header = el.querySelector(".thinking-header");
       if (header) header.style.display = "none";
@@ -1423,7 +1450,7 @@ export function startThinking() {
     refreshIcons();
     ctx.scrollToBottom();
     if (!el.classList.contains("mate-thinking")) {
-      ctx.setActivity(randomThinkingVerb() + "...");
+      ctx.setActivity("thinking");
     }
     return;
   }
@@ -1439,10 +1466,7 @@ export function startThinking() {
       '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
       '<div class="dm-bubble-content">' +
       '<div class="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
-      '<div class="activity-inline mate-thinking-activity">' +
-      '<span class="activity-icon">' + iconHtml("sparkles") + '</span>' +
-      '<span class="activity-text">' + randomThinkingVerb() + '...</span>' +
-      '</div>' +
+      '<div class="mate-thinking-dots mate-thinking-activity"><span></span><span></span><span></span></div>' +
       '<div class="thinking-header" style="display:none">' +
       '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
       '<span class="thinking-label">Thinking</span>' +
@@ -1472,7 +1496,7 @@ export function startThinking() {
   thinkingGroup = { el: el, count: 0, totalDuration: 0 };
   currentThinking = { el: el, fullText: "", startTime: Date.now() };
   if (!ctx.isMateDm()) {
-    ctx.setActivity(randomThinkingVerb() + "...");
+    ctx.setActivity("thinking");
   }
 }