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

package/lib/daemon.js

@@ -807,7 +807,7 @@ var relay = createServer({
         var isMateProject = slug.indexOf("mate-") === 0;
         return {
           slug: slug,
-          visibility: isMateProject ? "private" : (config.projects[i].visibility || "public"),
+          visibility: isMateProject ? "private" : (config.projects[i].visibility || (config.osUsers ? "private" : "public")),
           allowedUsers: config.projects[i].allowedUsers || [],
           ownerId: config.projects[i].ownerId || null,
         };

package/lib/project.js

@@ -3884,6 +3884,26 @@ function createProjectContext(opts) {
       return;
     }
 
+    if (msg.type === "send_scheduled_now") {
+      var nowSession = getSessionForWs(ws);
+      if (!nowSession || !nowSession.scheduledMessage) return;
+      var schedText = nowSession.scheduledMessage.text;
+      clearTimeout(nowSession.scheduledMessage.timer);
+      nowSession.scheduledMessage = null;
+      console.log("[project] Scheduled message sent immediately for session " + nowSession.localId);
+      sm.sendAndRecord(nowSession, { type: "scheduled_message_sent" });
+      var userMsg = { type: "user_message", text: schedText };
+      nowSession.history.push(userMsg);
+      sm.appendToSessionFile(nowSession, userMsg);
+      sendToSession(nowSession.localId, userMsg);
+      nowSession.isProcessing = true;
+      onProcessingChanged();
+      sendToSession(nowSession.localId, { type: "status", status: "processing" });
+      sdk.startQuery(nowSession, schedText, null, getLinuxUserForSession(nowSession));
+      sm.broadcastSessionList();
+      return;
+    }
+
     if (msg.type !== "message") return;
     if (!msg.text && (!msg.images || msg.images.length === 0) && (!msg.pastes || msg.pastes.length === 0)) return;
 
@@ -4418,7 +4438,7 @@ function createProjectContext(opts) {
           return;
         }
         // Sanitize filename — strip path separators
-        var safeName = path.basename(fileName).replace(/[^a-zA-Z0-9._\-\(\)\[\] ]/g, "_");
+        var safeName = path.basename(fileName).replace(/[\x00-\x1f\/\\:*?"<>|]/g, "_");
         if (!safeName) safeName = "upload";
 
         // Check size

package/lib/public/app.js

@@ -1,6 +1,6 @@
 import { avatarUrl, userAvatarUrl, mateAvatarUrl } from './modules/avatar.js';
 import { showToast, copyToClipboard, escapeHtml } from './modules/utils.js';
-import { refreshIcons, iconHtml, randomThinkingVerb } from './modules/icons.js';
+import { refreshIcons, iconHtml } from './modules/icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal, parseEmojis } from './modules/markdown.js';
 import { initSidebar, renderSessionList, handleSearchResults, updateSessionPresence, updatePageTitle, populateCliSessionList, renderIconStrip, renderSidebarPresence, initIconStrip, getEmojiCategories, renderUserStrip, setCurrentDmUser, updateDmBadge, updateSessionBadge, updateProjectBadge, closeDmUserPicker, spawnDustParticles, openMobileSheet, setMobileSheetMateData } from './modules/sidebar.js';
 import { initMateSidebar, showMateSidebar, hideMateSidebar, renderMateSessionList, updateMateSidebarProfile, handleMateSearchResults } from './modules/mate-sidebar.js';
@@ -14,7 +14,7 @@ import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFs
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermResized, handleTermExited, handleTermClosed, sendTerminalCommand } from './modules/terminal.js';
 import { initContextSources, updateTerminalList, updateBrowserTabList, handleContextSourcesState, getActiveSources, hasActiveSources } from './modules/context-sources.js';
 import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, openArchive, closeArchive, isArchiveOpen, hideNotes, showNotes, isNotesVisible } from './modules/sticky-notes.js';
-import { initTheme, getThemeColor, getComputedVar, onThemeChange, getCurrentTheme } from './modules/theme.js';
+import { initTheme, getThemeColor, getComputedVar, onThemeChange, getCurrentTheme, getChatLayout } from './modules/theme.js';
 import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderElicitationRequest, markElicitationResolved, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, resetTurnMetaCost, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, updateSubagentProgress, initSubagentStop, closeToolGroup, removeToolFromGroup } from './modules/tools.js';
 import { initServerSettings, updateSettingsStats, updateSettingsModels, updateDaemonConfig, handleSetPinResult, handleKeepAwakeChanged, handleAutoContinueChanged, handleRestartResult, handleShutdownResult, handleSharedEnv, handleSharedEnvSaved, handleGlobalClaudeMdRead, handleGlobalClaudeMdWrite } from './modules/server-settings.js';
 import { initProjectSettings, handleInstructionsRead, handleInstructionsWrite, handleProjectEnv, handleProjectEnvSaved, isProjectSettingsOpen, handleProjectSharedEnv, handleProjectSharedEnvSaved, handleProjectOwnerChanged } from './modules/project-settings.js';
@@ -2083,12 +2083,9 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         activityEl = document.createElement("div");
         activityEl.className = "activity-inline";
         activityEl.innerHTML =
-          '<span class="activity-icon">' + iconHtml("sparkles") + '</span>' +
-          '<span class="activity-text"></span>';
+          '<div class="mate-thinking-dots"><span></span><span></span><span></span></div>';
         addToMessages(activityEl);
-        refreshIcons();
       }
-      activityEl.querySelector(".activity-text").textContent = text;
       scrollToBottom();
     } else {
       if (activityEl) {
@@ -2098,9 +2095,14 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     }
   }
 
-  // --- Mate pre-thinking (instant dots before server responds) ---
+  // --- Pre-thinking (instant dots before server responds) ---
   var matePreThinkingEl = null;
   var matePreThinkingTimer = null;
+  function showClaudePreThinking() {
+    if (getChatLayout() !== "channel") return;
+    var claudeAvatar = CLAUDE_CODE_AVATAR;
+    doShowMatePreThinking("Claude Code", claudeAvatar);
+  }
   function showMatePreThinking() {
     removeMatePreThinking();
     var mateName = dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate";
@@ -2114,10 +2116,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="" style="display:block">' +
       '<div class="dm-bubble-content">' +
       '<div class="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
-      '<div class="activity-inline mate-pre-activity">' +
-      '<span class="activity-icon">' + iconHtml("sparkles") + '</span>' +
-      '<span class="activity-text">' + randomThinkingVerb() + '...</span>' +
-      '</div>' +
+      '<div class="mate-thinking-dots"><span></span><span></span><span></span></div>' +
       '</div>';
     if (activityEl && activityEl.parentNode) {
       activityEl.parentNode.insertBefore(matePreThinkingEl, activityEl);
@@ -3020,6 +3019,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     isMateDm: function () { return dmMode && dmTargetUser && dmTargetUser.isMate; },
     getMateName: function () { return dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate"; },
     getMateAvatarUrl: function () { return document.body.dataset.mateAvatarUrl || ""; },
+    getClaudeAvatar: function () { return CLAUDE_CODE_AVATAR; },
     getMateById: function (id) {
       if (!id || !cachedMatesList) return null;
       for (var i = 0; i < cachedMatesList.length; i++) {
@@ -3716,42 +3716,134 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
   function addScheduledMessageBubble(text, resetsAt) {
     removeScheduledMessageBubble();
+    var isChannel = document.body.classList.contains("wide-view");
     var wrap = document.createElement("div");
     wrap.className = "msg-user scheduled-msg-wrap";
     wrap.id = "scheduled-msg-bubble";
 
-    var bubble = document.createElement("div");
-    bubble.className = "bubble scheduled-msg-bubble";
+    var countdownEl;
+    var cancelBtn;
 
-    var textEl = document.createElement("span");
-    textEl.textContent = text;
-    bubble.appendChild(textEl);
+    if (isChannel) {
+      // Channel mode: avatar + header with scheduled badge + message
+      var _me = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+      if (!_me) { try { _me = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {} }
+      var _myName = document.body.dataset.myDisplayName || (_me && (_me.displayName || _me.username)) || "Me";
 
-    var metaEl = document.createElement("div");
-    metaEl.className = "scheduled-msg-meta";
+      var avi = document.createElement("img");
+      avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
+      avi.src = document.body.dataset.myAvatarUrl || userAvatarUrl(_me || { id: myUserId }, 36);
+      wrap.appendChild(avi);
 
-    var clockIcon = document.createElement("span");
-    clockIcon.className = "scheduled-msg-icon";
-    clockIcon.innerHTML = iconHtml("clock");
-    metaEl.appendChild(clockIcon);
+      var content = document.createElement("div");
+      content.className = "dm-bubble-content";
 
-    var countdownEl = document.createElement("span");
-    countdownEl.className = "scheduled-msg-countdown";
-    metaEl.appendChild(countdownEl);
+      var header = document.createElement("div");
+      header.className = "dm-bubble-header";
 
-    var cancelBtn = document.createElement("button");
-    cancelBtn.className = "scheduled-msg-cancel";
-    cancelBtn.title = "Cancel scheduled message";
-    cancelBtn.textContent = "\u00d7";
-    cancelBtn.addEventListener("click", function () {
-      if (ws && ws.readyState === 1) {
-        ws.send(JSON.stringify({ type: "cancel_scheduled_message" }));
-      }
-    });
-    metaEl.appendChild(cancelBtn);
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "dm-bubble-name";
+      nameSpan.textContent = _myName;
+      header.appendChild(nameSpan);
+
+      var badge = document.createElement("span");
+      badge.className = "scheduled-msg-badge";
+      badge.innerHTML = iconHtml("clock");
+      countdownEl = document.createElement("span");
+      countdownEl.className = "scheduled-msg-countdown";
+      badge.appendChild(countdownEl);
+      header.appendChild(badge);
+
+      var actions = document.createElement("span");
+      actions.className = "scheduled-msg-actions";
+
+      var sendNowBtn = document.createElement("button");
+      sendNowBtn.className = "scheduled-msg-send-now";
+      sendNowBtn.textContent = "Send now";
+      sendNowBtn.addEventListener("click", function () {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "send_scheduled_now" }));
+        }
+      });
+      actions.appendChild(sendNowBtn);
+
+      var sep = document.createElement("span");
+      sep.className = "scheduled-msg-sep";
+      sep.textContent = "\u00b7";
+      actions.appendChild(sep);
+
+      cancelBtn = document.createElement("button");
+      cancelBtn.className = "scheduled-msg-cancel";
+      cancelBtn.textContent = "Cancel";
+      cancelBtn.addEventListener("click", function () {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "cancel_scheduled_message" }));
+        }
+      });
+      actions.appendChild(cancelBtn);
+
+      header.appendChild(actions);
+
+      content.appendChild(header);
+
+      var bubble = document.createElement("div");
+      bubble.className = "bubble scheduled-msg-bubble";
+      var textEl = document.createElement("span");
+      textEl.textContent = text;
+      bubble.appendChild(textEl);
+      content.appendChild(bubble);
+
+      wrap.appendChild(content);
+    } else {
+      // Bubble mode: original layout
+      var bubble = document.createElement("div");
+      bubble.className = "bubble scheduled-msg-bubble";
+
+      var textEl = document.createElement("span");
+      textEl.textContent = text;
+      bubble.appendChild(textEl);
+
+      var metaEl = document.createElement("div");
+      metaEl.className = "scheduled-msg-meta";
+
+      var clockIcon = document.createElement("span");
+      clockIcon.className = "scheduled-msg-icon";
+      clockIcon.innerHTML = iconHtml("clock");
+      metaEl.appendChild(clockIcon);
+
+      countdownEl = document.createElement("span");
+      countdownEl.className = "scheduled-msg-countdown";
+      metaEl.appendChild(countdownEl);
+
+      var sendNowBtn2 = document.createElement("button");
+      sendNowBtn2.className = "scheduled-msg-send-now";
+      sendNowBtn2.textContent = "Send now";
+      sendNowBtn2.addEventListener("click", function () {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "send_scheduled_now" }));
+        }
+      });
+      metaEl.appendChild(sendNowBtn2);
+
+      var sep2 = document.createElement("span");
+      sep2.className = "scheduled-msg-sep";
+      sep2.textContent = "\u00b7";
+      metaEl.appendChild(sep2);
+
+      cancelBtn = document.createElement("button");
+      cancelBtn.className = "scheduled-msg-cancel";
+      cancelBtn.textContent = "Cancel";
+      cancelBtn.addEventListener("click", function () {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "cancel_scheduled_message" }));
+        }
+      });
+      metaEl.appendChild(cancelBtn);
+
+      wrap.appendChild(bubble);
+      wrap.appendChild(metaEl);
+    }
 
-    wrap.appendChild(bubble);
-    wrap.appendChild(metaEl);
     addToMessages(wrap);
     scheduledMsgEl = wrap;
     scrollToBottom();
@@ -4644,17 +4736,17 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         case "status":
           if (msg.status === "processing") {
             setStatus("processing");
-            if (!(dmMode && dmTargetUser && dmTargetUser.isMate)) {
-              setActivity(randomThinkingVerb() + "...");
+            if (!(dmMode && dmTargetUser && dmTargetUser.isMate) && !matePreThinkingEl) {
+              setActivity("thinking");
             }
           }
           break;
 
         case "compacting":
           if (msg.active) {
-            setActivity("Compacting conversation...");
+            setActivity("compacting");
           } else if (!(dmMode && dmTargetUser && dmTargetUser.isMate)) {
-            setActivity(randomThinkingVerb() + "...");
+            setActivity("thinking");
           }
           break;
 
@@ -4670,7 +4762,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         case "thinking_stop":
           stopThinking(msg.duration);
           if (!(dmMode && dmTargetUser && dmTargetUser.isMate)) {
-            setActivity(randomThinkingVerb() + "...");
+            setActivity("thinking");
           }
           break;
 
@@ -5703,6 +5795,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     getMateName: function () { return dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate"; },
     getMateAvatarUrl: function () { return document.body.dataset.mateAvatarUrl || ""; },
     showMatePreThinking: function () { showMatePreThinking(); },
+    showClaudePreThinking: function () { showClaudePreThinking(); },
   });
 
   // --- @Mention module ---

package/lib/public/css/input.css

@@ -466,15 +466,14 @@
   display: flex;
   flex-direction: column;
   background: var(--input-bg);
-  border: 1px solid var(--border);
+  border: none;
   border-radius: 8px;
-  padding: 6px;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  padding: 7px;
+  transition: box-shadow 0.2s;
 }
 
 #input-row:focus-within {
-  border-color: var(--text-dimmer);
-  box-shadow: 0 0 0 1px rgba(109, 104, 96, 0.15);
+  box-shadow: 0 0 0 1px var(--border);
 }
 
 #input {
@@ -553,7 +552,7 @@
   border-radius: 10px;
   border: 1px solid transparent;
   background:
-    linear-gradient(var(--bg, #282a36), var(--bg, #282a36)) padding-box,
+    linear-gradient(var(--ask-mate-bg, var(--bg)), var(--ask-mate-bg, var(--bg))) padding-box,
     linear-gradient(135deg, #4ecdc4 0%, #4ecdc4 25%, #556bf7, #a855f7, #f857a6, #ff6b6b) border-box;
   color: transparent;
   cursor: pointer;
@@ -934,27 +933,83 @@
   flex: 1;
 }
 
-.scheduled-msg-cancel {
-  display: flex;
+
+/* Channel mode: scheduled badge in header row */
+.scheduled-msg-badge {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  vertical-align: middle;
+}
+.scheduled-msg-badge svg,
+.scheduled-msg-badge .lucide {
+  width: 13px;
+  height: 13px;
+}
+/* Scheduled message action links (shared by both modes) */
+.scheduled-msg-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 4px;
+}
+.scheduled-msg-send-now {
+  padding: 0;
   border: none;
-  border-radius: 4px;
   background: none;
-  color: var(--text-dimmer);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
   cursor: pointer;
+  transition: text-decoration 0.15s;
+}
+.scheduled-msg-send-now:hover {
+  text-decoration: underline;
+}
+.scheduled-msg-sep {
+  color: var(--text-dimmer);
+  font-size: 12px;
+  user-select: none;
+}
+.scheduled-msg-cancel {
   padding: 0;
-  transition: background 0.15s, color 0.15s;
+  border: none;
+  background: none;
+  color: var(--text-dimmer);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.15s;
 }
-
 .scheduled-msg-cancel:hover {
-  background: rgba(var(--overlay-rgb), 0.08);
   color: var(--error);
 }
 
-.scheduled-msg-cancel .lucide {
-  width: 14px;
-  height: 14px;
+/* Channel mode: strip bubble box styling, render as plain text */
+body.wide-view .scheduled-msg-wrap .bubble {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+/* Channel mode: header alignment */
+body.wide-view .scheduled-msg-wrap .dm-bubble-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+body.wide-view .scheduled-msg-wrap .scheduled-msg-countdown {
+  font-size: inherit;
+  color: inherit;
 }

package/lib/public/css/mates.css

@@ -2342,7 +2342,9 @@ body.mate-dm-active .turn-meta {
    ========================================================================== */
 
 /* --- Mate Thinking: flex layout matching msg-assistant --- */
-body.mate-dm-active .mate-thinking {
+/* Applies in both Mate DM and channel project chat */
+body.mate-dm-active .mate-thinking,
+body.wide-view .mate-thinking {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -2351,10 +2353,12 @@ body.mate-dm-active .mate-thinking {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-thinking:hover {
+body.mate-dm-active .mate-thinking:hover,
+body.wide-view .mate-thinking:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-thinking > .dm-bubble-avatar {
+body.mate-dm-active .mate-thinking > .dm-bubble-avatar,
+body.wide-view .mate-thinking > .dm-bubble-avatar {
   display: block;
   width: 36px;
   height: 36px;
@@ -2362,7 +2366,8 @@ body.mate-dm-active .mate-thinking > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-thinking > .dm-bubble-content {
+body.mate-dm-active .mate-thinking > .dm-bubble-content,
+body.wide-view .mate-thinking > .dm-bubble-content {
   flex: 1;
   min-width: 0;
 }
@@ -2373,7 +2378,8 @@ body.mate-dm-active .mate-thinking > .dm-bubble-content {
   gap: 4px;
   padding: 4px 0;
 }
-body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row {
+body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row,
+body.wide-view .mate-thinking:not(.done) .mate-thinking-row {
   display: flex;
 }
 .mate-thinking-dots {
@@ -2400,10 +2406,16 @@ body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row {
 }
 
 /* When done, hide mate row (JS does this too), show compact expandable header */
-body.mate-dm-active .mate-thinking.done .mate-thinking-row {
+body.mate-dm-active .mate-thinking.done .mate-thinking-row,
+body.wide-view .mate-thinking.done .mate-thinking-row {
   display: none;
 }
-body.mate-dm-active .mate-thinking.done .thinking-header {
+body.mate-dm-active .mate-thinking.done .mate-thinking-activity,
+body.wide-view .mate-thinking.done .mate-thinking-activity {
+  display: none;
+}
+body.mate-dm-active .mate-thinking.done .thinking-header,
+body.wide-view .mate-thinking.done .thinking-header {
   display: inline-flex !important;
   font-size: 12px;
   padding: 4px 10px;
@@ -2412,16 +2424,19 @@ body.mate-dm-active .mate-thinking.done .thinking-header {
   opacity: 0.7;
   transition: opacity 0.15s;
 }
-body.mate-dm-active .mate-thinking.done .thinking-header:hover {
+body.mate-dm-active .mate-thinking.done .thinking-header:hover,
+body.wide-view .mate-thinking.done .thinking-header:hover {
   opacity: 1;
   background: rgba(var(--overlay-rgb), 0.08);
 }
-body.mate-dm-active .mate-thinking .thinking-content {
+body.mate-dm-active .mate-thinking .thinking-content,
+body.wide-view .mate-thinking .thinking-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.25s ease;
 }
-body.mate-dm-active .mate-thinking.expanded .thinking-content {
+body.mate-dm-active .mate-thinking.expanded .thinking-content,
+body.wide-view .mate-thinking.expanded .thinking-content {
   max-height: 2000px;
 }
 
@@ -2476,8 +2491,10 @@ body.mate-dm-active .mate-tool-group .tool-name {
   color: var(--text-muted);
 }
 
-/* --- Mate Permission: flex layout matching msg-assistant --- */
-body.mate-dm-active .mate-permission {
+/* --- Conversational Permission: flex layout matching msg-assistant --- */
+/* Applies in both Mate DM and channel project chat */
+body.mate-dm-active .mate-permission,
+body.wide-view .mate-permission {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -2490,10 +2507,12 @@ body.mate-dm-active .mate-permission {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-permission:hover {
+body.mate-dm-active .mate-permission:hover,
+body.wide-view .mate-permission:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-permission > .dm-bubble-avatar {
+body.mate-dm-active .mate-permission > .dm-bubble-avatar,
+body.wide-view .mate-permission > .dm-bubble-avatar {
   display: block;
   width: 36px;
   height: 36px;
@@ -2501,7 +2520,8 @@ body.mate-dm-active .mate-permission > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-permission > .dm-bubble-content {
+body.mate-dm-active .mate-permission > .dm-bubble-content,
+body.wide-view .mate-permission > .dm-bubble-content {
   flex: 1;
   min-width: 0;
 }
@@ -2569,14 +2589,14 @@ body.mate-dm-active .mate-permission > .dm-bubble-content {
 .mate-permission-deny {
   color: var(--text-muted);
 }
-/* Resolved state */
-body.mate-dm-active .mate-permission.resolved .mate-permission-actions {
+/* Resolved state (works in both Mate DM and channel project chat) */
+.mate-permission.resolved .mate-permission-actions {
   pointer-events: none;
 }
-body.mate-dm-active .mate-permission.resolved .mate-permission-reply {
+.mate-permission.resolved .mate-permission-reply {
   display: none;
 }
-body.mate-dm-active .mate-permission.resolved .permission-decision-label {
+.mate-permission.resolved .permission-decision-label {
   font-size: 12px;
   color: var(--text-dimmer);
 }

package/lib/public/css/mention.css

@@ -107,8 +107,8 @@
   padding: 3px 6px 3px 4px;
   margin: 0 0 4px 0;
   border-radius: 6px;
-  background: color-mix(in srgb, var(--chip-color, #6c5ce7) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--chip-color, #6c5ce7) 25%, transparent);
+  background: color-mix(in srgb, var(--chip-color, #6c5ce7) 15%, var(--bg-alt));
+  border: 1px solid color-mix(in srgb, var(--chip-color, #6c5ce7) 30%, var(--border));
   cursor: default;
   flex-shrink: 0;
   width: fit-content;
@@ -131,19 +131,22 @@
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
+  line-height: 18px;
 }
 
 .input-mention-chip-remove {
   background: none;
   border: none;
-  padding: 0 2px;
+  padding: 0;
   margin: 0;
   cursor: pointer;
   font-size: 15px;
-  line-height: 1;
+  line-height: 18px;
   color: var(--text-dimmer);
   opacity: 0.6;
   transition: opacity 0.1s;
+  display: flex;
+  align-items: center;
 }
 
 .input-mention-chip-remove:hover {

package/lib/public/modules/input.js

@@ -193,9 +193,11 @@ export function sendMessage() {
   }
   ctx.ws.send(JSON.stringify(payload));
 
-  // Mate DM: show pre-thinking dots after a short delay (before server responds)
+  // Show pre-thinking dots before server responds
   if (ctx.isMateDm && ctx.isMateDm()) {
     ctx.showMatePreThinking();
+  } else if (ctx.showClaudePreThinking) {
+    ctx.showClaudePreThinking();
   }
 
   ctx.inputEl.value = "";

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

@@ -3946,8 +3946,8 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
   // All other users
   var allOthers = cachedAllUsers.filter(function (u) { return u.id !== myUserId; });
 
-  // Hide section if no other users (single-user mode or alone)
-  if (allOthers.length === 0) {
+  // Hide section if no other users and no mates
+  if (allOthers.length === 0 && cachedMates.length === 0) {
     container.innerHTML = "";
     container.classList.add("hidden");
     return;

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;
 
@@ -204,7 +205,7 @@ export function renderAskUserQuestion(toolId, input) {
 
     var avi = document.createElement("img");
     avi.className = "dm-bubble-avatar";
-    avi.src = mateAvatar;
+    avi.src = identity.avatar;
     container.appendChild(avi);
 
     mateContentWrap = document.createElement("div");
@@ -213,7 +214,7 @@ export function renderAskUserQuestion(toolId, input) {
     var headerEl = document.createElement("div");
     headerEl.className = "dm-bubble-header";
     headerEl.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>';
     mateContentWrap.appendChild(headerEl);
   }
@@ -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");
   }
 }
 

package/lib/sdk-bridge.js

@@ -1515,6 +1515,18 @@ function createSDKBridge(opts) {
       return Promise.resolve({ behavior: "allow", updatedInput: input });
     }
 
+    // Auto-approve safe browser MCP tools.
+    // Only watch/unwatch: user explicitly chose which tab to share.
+    // Everything else (screenshot, read_page, list_tabs, etc.) can expose
+    // content from tabs the user didn't intend to share, so require approval.
+    var safeBrowserTools = { browser_watch_tab: true, browser_unwatch_tab: true };
+    if (toolName.indexOf("mcp__") === 0 && toolName.indexOf("__browser_") !== -1) {
+      var mcpToolName = toolName.substring(toolName.lastIndexOf("__") + 2);
+      if (safeBrowserTools[mcpToolName]) {
+        return Promise.resolve({ behavior: "allow", updatedInput: input });
+      }
+    }
+
     // Auto-approve safe Bash commands (read-only, non-destructive)
     // Applies to ALL sessions (mates and regular projects alike).
     // These are purely read-only commands that cannot modify files, install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.26.0-beta.7",
+  "version": "2.26.0-beta.9",
   "description": "Self-hosted Claude Code in your browser. Multi-session, multi-user, push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",