clay-server 2.32.0-beta.1 → 2.32.0-beta.10

package/lib/public/css/input.css

@@ -746,12 +746,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 4px;
 }
 
 #input-bottom-right {
   display: flex;
   align-items: center;
   gap: 4px;
+  flex-shrink: 0;
 }
 
 /* --- Vendor toggle (split toggle) --- */
@@ -812,22 +814,31 @@
 .vendor-toggle-label {
   pointer-events: none;
 }
-@media (max-width: 600px) {
+@media (max-width: 900px) {
   .vendor-toggle-label { display: none; }
+  .vendor-toggle-btn { padding: 0 8px; }
 }
 
 /* --- Attach buttons & menu --- */
 #attach-wrap {
   position: relative;
-  flex-shrink: 0;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: 2px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+/* Allow popovers (context picker) to escape when open */
+#attach-wrap:has(#context-sources-picker:not(.hidden)) {
+  overflow: visible;
 }
 
 #attach-file-btn,
 #attach-image-btn,
-#schedule-btn {
+#schedule-btn,
+#input-more-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
@@ -844,11 +855,13 @@
 
 #attach-file-btn .lucide,
 #attach-image-btn .lucide,
-#schedule-btn .lucide { width: 20px; height: 20px; flex-shrink: 0; }
+#schedule-btn .lucide,
+#input-more-btn .lucide { width: 20px; height: 20px; flex-shrink: 0; }
 
 #attach-file-btn:hover,
 #attach-image-btn:hover,
-#schedule-btn:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
+#schedule-btn:hover,
+#input-more-btn:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
 
 #ask-mate-btn {
   width: 36px;
@@ -1137,6 +1150,146 @@
   body.keyboard-open #input-area {
     padding-bottom: 8px;
   }
+
+  /* Mobile visibility utilities for input toolbar */
+  .desktop-only { display: none !important; }
+  .mobile-only { display: inline-flex !important; }
+}
+
+/* Desktop: hide mobile-only, show desktop-only */
+@media (min-width: 769px) {
+  .mobile-only { display: none !important; }
+}
+
+/* ==========================================================================
+   Input More Bottom Sheet (mobile)
+   ========================================================================== */
+
+#input-more-sheet {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  pointer-events: none;
+}
+
+#input-more-sheet.hidden {
+  display: none;
+}
+
+.input-more-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: auto;
+}
+
+#input-more-sheet.open .input-more-backdrop {
+  opacity: 1;
+}
+
+.input-more-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--bg);
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  padding: 8px 0 calc(var(--safe-bottom) + 16px);
+  transform: translateY(100%);
+  transition: transform 0.25s ease;
+  pointer-events: auto;
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
+}
+
+#input-more-sheet.open .input-more-content {
+  transform: translateY(0);
+}
+
+.input-more-handle {
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--border-subtle);
+  margin: 8px auto 12px;
+}
+
+.input-more-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 4px 16px 12px;
+}
+
+.input-more-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 16px 8px;
+  background: var(--hover);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.input-more-action:active {
+  opacity: 0.7;
+}
+
+.input-more-action .lucide {
+  width: 22px;
+  height: 22px;
+  color: var(--text-secondary);
+}
+
+.input-more-divider {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 0 16px;
+}
+
+.input-more-section-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 20px 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.input-more-section-label .lucide {
+  width: 16px;
+  height: 16px;
+}
+
+.input-more-context-body {
+  max-height: 50vh;
+  overflow-y: auto;
+  padding: 0 8px 8px;
+}
+
+.input-more-context-body .context-picker-item {
+  padding: 12px 16px;
+  font-size: 15px;
+  border-radius: 8px;
+}
+
+.input-more-context-body .context-picker-item .lucide {
+  width: 18px;
+  height: 18px;
+}
+
+.input-more-context-body .context-picker-section-label {
+  padding: 10px 16px 4px;
 }
 
 /* ==========================================================================

package/lib/public/css/notifications-center.css

@@ -81,6 +81,13 @@
 }
 .notif-banner-icon .lucide { width: 16px; height: 16px; }
 .notif-banner-emoji { font-size: 18px; line-height: 1; }
+.notif-banner-avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+  display: block;
+}
 
 .notif-banner-body {
   flex: 1;

package/lib/public/css/tooltip.css

@@ -18,3 +18,50 @@
 }
 
 .tooltip.visible { opacity: 1; }
+
+.tooltip.multi-line {
+  white-space: pre-line;
+  text-align: left;
+  max-width: 320px;
+  line-height: 1.5;
+}
+
+/* Context sources tooltip */
+.ctx-tip-header {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.ctx-tip-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  color: var(--text);
+  font-size: 12px;
+}
+
+.ctx-tip-row .lucide {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+.ctx-tip-favicon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border-radius: 2px;
+}
+
+.ctx-tip-row span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 260px;
+}

package/lib/public/index.html

@@ -352,6 +352,7 @@
         <div class="status">
           <button id="debate-pdf-btn" class="hidden" title="Export debate as PDF"><i data-lucide="download"></i></button>
           <button id="find-in-session-btn" title="Search in session (Ctrl+F)"><i data-lucide="search"></i></button>
+          <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
         </div>
       </div>
       <div id="main-panels">
@@ -459,13 +460,14 @@
           </div>
           <div id="input-bottom">
             <div id="attach-wrap">
-              <button id="attach-file-btn" type="button" aria-label="Attach file" title="Attach file"><i data-lucide="paperclip"></i></button>
-              <button id="attach-image-btn" type="button" aria-label="Attach image" title="Attach image"><i data-lucide="image"></i></button>
+              <button id="input-more-btn" type="button" aria-label="More options" title="More options" class="mobile-only"><i data-lucide="plus"></i></button>
+              <button id="attach-file-btn" type="button" aria-label="Attach file" title="Attach file" class="desktop-only"><i data-lucide="paperclip"></i></button>
+              <button id="attach-image-btn" type="button" aria-label="Attach image" title="Attach image" class="desktop-only"><i data-lucide="image"></i></button>
               <button id="stt-btn" type="button" aria-label="Voice input" title="Voice input"><i data-lucide="mic"></i></button>
               <button id="schedule-btn" type="button" aria-label="Schedule message" title="Schedule message"><i data-lucide="clock"></i></button>
               <button id="ask-mate-btn" type="button" aria-label="Ask Mate" title="Ask a Mate for advice on this session"><i data-lucide="at-sign"></i></button>
-              <div id="context-sources-btn-wrap">
-                <button id="context-sources-add" type="button" title="Add context sources"><i data-lucide="plus"></i><span class="ctx-label">Context</span></button>
+              <div id="context-sources-btn-wrap" class="desktop-only">
+                <button id="context-sources-add" type="button" title="Add context sources"><i data-lucide="library"></i><span class="ctx-label">Context</span></button>
                 <div id="context-sources-picker" class="hidden">
                   <div class="context-picker-section" id="context-picker-email"></div>
                   <div class="context-picker-section" id="context-picker-terminals"></div>
@@ -542,6 +544,34 @@
       </div>
     </div>
   </div>
+  <!-- Mobile input-more bottom sheet: attach / image + context sources -->
+  <div id="input-more-sheet" class="hidden">
+    <div class="input-more-backdrop"></div>
+    <div class="input-more-content">
+      <div class="input-more-handle"></div>
+      <div class="input-more-actions">
+        <button class="input-more-action" id="input-more-attach">
+          <i data-lucide="paperclip"></i>
+          <span>Attach file</span>
+        </button>
+        <button class="input-more-action" id="input-more-image">
+          <i data-lucide="image"></i>
+          <span>Image</span>
+        </button>
+      </div>
+      <div class="input-more-divider"></div>
+      <div class="input-more-section-label">
+        <i data-lucide="library"></i>
+        <span>Context sources</span>
+      </div>
+      <div class="input-more-context-body" id="input-more-context-body">
+        <div class="context-picker-section" id="context-picker-email-mobile"></div>
+        <div class="context-picker-section" id="context-picker-terminals-mobile"></div>
+        <div class="context-picker-section" id="context-picker-tabs-mobile"></div>
+      </div>
+    </div>
+  </div>
+
   <!-- Mobile fullscreen sheet overlay (Projects / Sessions) -->
   <div id="mobile-sheet" class="hidden">
     <div class="mobile-sheet-backdrop"></div>

package/lib/public/modules/app-dm.js

@@ -210,6 +210,8 @@ export function enterDmMode(key, targetUser, messages) {
     // Close file viewer and terminal panel BEFORE switching WS (needs old WS still open)
     try { closeFileViewer(); } catch(e) {}
     closeTerminal();
+    var termBtn = document.getElementById("terminal-toggle-btn");
+    if (termBtn) termBtn.style.display = "none";
     // Apply mate color to chat title bar and panels
     var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
     document.body.style.setProperty("--mate-color", mateColor);
@@ -323,6 +325,9 @@ export function exitDmMode(skipProjectSwitch) {
   hideKnowledge();
   hideMemory();
   if (isSchedulerOpen()) closeScheduler();
+  // Restore terminal button
+  var termBtn = document.getElementById("terminal-toggle-btn");
+  if (termBtn) termBtn.style.display = "";
   // Reset DM header
   var dmHeaderBar = document.getElementById("dm-header-bar");
   if (dmHeaderBar) {

package/lib/public/modules/app-messages.js

@@ -11,7 +11,7 @@ import { refreshIcons, iconHtml } from './icons.js';
 import { renderMarkdown } from './markdown.js';
 import { updatePageTitle } from './sidebar.js';
 import { renderSessionList, updateSessionPresence, populateCliSessionList, handleSearchResults, updateSessionBadge } from './sidebar-sessions.js';
-import { updateDmBadge, renderSidebarPresence } from './sidebar-mates.js';
+import { updateDmBadge, renderSidebarPresence, setMentionActive, renderUserStrip } from './sidebar-mates.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
 import { renderMateSessionList, handleMateSearchResults, updateMateSidebarProfile } from './mate-sidebar.js';
 import { renderKnowledgeList, handleKnowledgeContent } from './mate-knowledge.js';
@@ -38,7 +38,7 @@ import { handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunF
 
 // --- App module imports ---
 import { scrollToBottom, addToMessages, addUserMessage, addSystemMessage, removeMatePreThinking, appendDelta, finalizeAssistantBlock, addConflictMessage, addContextOverflowMessage, addAuthRequiredMessage, showSuggestionChips } from './app-rendering.js';
-import { setActivity, startUrgentBlink, stopUrgentBlink, blinkSessionDot } from './app-favicon.js';
+import { setActivity, startUrgentBlink, stopUrgentBlink, blinkSessionDot, updateCrossProjectBlink } from './app-favicon.js';
 import { setStatus } from './app-connection.js';
 import { getModelEffortLevels, accumulateUsage, updateUsagePanel, accumulateContext, updateContextPanel, renderCtxPopover, updateStatusPanel } from './app-panels.js';
 import { updateProjectList, resetClientState, showUpdateAvailable, handleRemoveProjectCheckResult, handleRemoveProjectResult, handleBrowseDirResult, handleAddProjectResult, handleCloneProgress } from './app-projects.js';
@@ -369,9 +369,9 @@ export function processMessage(msg) {
 
       case "codex_config":
         store.set({
-          codexApproval: msg.approval || "on-failure",
-          codexSandbox: msg.sandbox || "workspace-write",
-          codexWebSearch: msg.webSearch || "disabled",
+          codexApproval: msg.approval,
+          codexSandbox: msg.sandbox,
+          codexWebSearch: msg.webSearch,
         });
         break;
 
@@ -1171,6 +1171,7 @@ export function processMessage(msg) {
 
       case "projects_updated":
         updateProjectList(msg);
+        renderUserStrip();
         break;
 
       case "project_owner_changed":
@@ -1324,6 +1325,7 @@ export function processMessage(msg) {
       case "mention_processing":
         // Broadcast: show/hide activity dot on mate avatar across all tabs
         if (msg.mateId) {
+          setMentionActive(msg.mateId, msg.active);
           var mateContainers = document.querySelectorAll('.icon-strip-mate[data-user-id="' + msg.mateId + '"]');
           for (var mi = 0; mi < mateContainers.length; mi++) {
             var dot = mateContainers[mi].querySelector(".icon-strip-status");
@@ -1335,6 +1337,7 @@ export function processMessage(msg) {
               mateContainers[mi].classList.remove("mention-active");
             }
           }
+          updateCrossProjectBlink();
         }
         break;
 

package/lib/public/modules/app-notifications.js

@@ -9,6 +9,7 @@ import { getWs } from './ws-ref.js';
 import { openDm } from './app-dm.js';
 import { getCachedProjects } from './app-projects.js';
 import { switchProject } from './app-projects.js';
+import { mateAvatarUrl } from './avatar.js';
 var notifications = [];
 var unreadCount = 0;
 var bannerContainer = null;
@@ -16,9 +17,10 @@ var bellBtn = null;
 var badgeEl = null;
 
 // --- Update available banner state ---
+// Server pushes update_available on an hourly boundary; dismissal is
+// per-banner-instance and doesn't need to persist. The next server push
+// (next hour) acts as a fresh ping.
 var pendingUpdateMsg = null;
-var updateReshowTimer = null;
-var UPDATE_RESHOW_INTERVAL = 60 * 60 * 1000; // 1 hour
 
 // ========================================================
 // Init
@@ -49,10 +51,12 @@ function showAllBanners() {
   // Clear existing banners first
   if (bannerContainer) bannerContainer.innerHTML = "";
 
-  // Re-add update banner if present
+  // Re-add update banner if present (may be suppressed by recent dismiss)
   if (pendingUpdateMsg) showUpdateBanner(pendingUpdateMsg);
 
-  if (notifications.length === 0 && !pendingUpdateMsg) {
+  // Check if any banner actually got rendered (update banner can be suppressed)
+  var hasVisibleBanner = bannerContainer.children.length > 0;
+  if (notifications.length === 0 && !hasVisibleBanner) {
     showBanner({
       id: "_empty",
       type: "info",
@@ -79,14 +83,17 @@ function showBanner(notif, autoDismissMs) {
   var projectIcon = isEmpty ? null : getProjectIcon(notif.slug);
   var projectName = isEmpty ? "" : getProjectName(notif.slug);
   var isPermission = notif.type === "permission_request" && notif.meta && notif.meta.requestId;
+  var mate = isEmpty ? null : getMateForNotification(notif);
 
   var banner = document.createElement("div");
   banner.className = "notif-banner" + (isPermission ? " notif-banner-permission" : "");
   if (!isEmpty) banner.setAttribute("data-notif-id", notif.id);
 
-  var iconHtmlStr = projectIcon
-    ? '<span class="notif-banner-emoji">' + projectIcon + '</span>'
-    : iconHtml(isEmpty ? "check-circle" : "folder");
+  var iconHtmlStr = mate
+    ? '<img class="notif-banner-avatar" src="' + escapeHtml(mateAvatarUrl(mate, 32)) + '" alt="' + escapeHtml(mate.displayName || mate.name || "Mate") + '">'
+    : projectIcon
+      ? '<span class="notif-banner-emoji">' + projectIcon + '</span>'
+      : iconHtml(isEmpty ? "check-circle" : "folder");
 
   // Format permission title as "Can I ..." style
   if (isPermission && notif.meta) {
@@ -101,7 +108,7 @@ function showBanner(notif, autoDismissMs) {
     actionsHtml =
       '<div class="notif-banner-actions">' +
         '<button class="notif-banner-allow">Sure</button>' +
-        '<button class="notif-banner-always">Always allow</button>' +
+        '<button class="notif-banner-always">Allow for session</button>' +
         '<button class="notif-banner-deny">No</button>' +
         '<button class="notif-banner-goto" title="Go to session">' + iconHtml("external-link") + '</button>' +
       '</div>';
@@ -300,8 +307,12 @@ function updateBadge() {
 // ========================================================
 
 function navigateToNotification(notif) {
-  if (notif.mateId) {
-    openDm(notif.mateId);
+  var mateId = notif.mateId || deriveMateIdFromNotification(notif);
+  if (mateId) {
+    if (notif.sessionId) {
+      try { sessionStorage.setItem("pending-notif-session", notif.sessionId); } catch (e) {}
+    }
+    openDm(mateId);
     return;
   }
 
@@ -322,6 +333,25 @@ function navigateToNotification(notif) {
   }
 }
 
+function deriveMateIdFromNotification(notif) {
+  if (!notif) return null;
+  if (typeof notif.slug === "string" && notif.slug.indexOf("mate-") === 0) {
+    return notif.slug.substring(5) || null;
+  }
+  return null;
+}
+
+function getMateForNotification(notif) {
+  var mateId = notif && notif.meta ? notif.meta.avatarMateId : null;
+  if (!mateId) mateId = deriveMateIdFromNotification(notif);
+  if (!mateId) return null;
+  var mates = store.get('cachedMatesList') || [];
+  for (var i = 0; i < mates.length; i++) {
+    if (mates[i] && mates[i].id === mateId) return mates[i];
+  }
+  return { id: mateId };
+}
+
 // ========================================================
 // Update available banner
 // ========================================================
@@ -383,25 +413,17 @@ export function showUpdateBanner(msg) {
     });
   }
 
-  // Close button -> dismiss, re-show in 1 hour
+  // Close button -> dismiss. No local throttle; the server pushes a new
+  // update_available on the next hour boundary, which re-shows naturally.
   var closeBtn = banner.querySelector(".notif-banner-close");
   if (closeBtn) {
     closeBtn.addEventListener("click", function (e) {
       e.stopPropagation();
       removeBanner(banner);
-      scheduleUpdateReshow();
     });
   }
 }
 
-function scheduleUpdateReshow() {
-  if (updateReshowTimer) clearTimeout(updateReshowTimer);
-  updateReshowTimer = setTimeout(function () {
-    updateReshowTimer = null;
-    if (pendingUpdateMsg) showUpdateBanner(pendingUpdateMsg);
-  }, UPDATE_RESHOW_INTERVAL);
-}
-
 // ========================================================
 // Helpers
 // ========================================================

package/lib/public/modules/app-panels.js

@@ -335,15 +335,15 @@ function rebuildCodexSections() {
 
   if (configApprovalSection) {
     configApprovalSection.style.display = isCodex ? "" : "none";
-    if (isCodex) buildSegmentedBar(configApprovalBar, CODEX_APPROVAL_OPTIONS, s.codexApproval || "on-failure", "set_codex_approval", "approval");
+    if (isCodex) buildSegmentedBar(configApprovalBar, CODEX_APPROVAL_OPTIONS, s.codexApproval, "set_codex_approval", "approval");
   }
   if (configSandboxSection) {
     configSandboxSection.style.display = isCodex ? "" : "none";
-    if (isCodex) buildSegmentedBar(configSandboxBar, CODEX_SANDBOX_OPTIONS, s.codexSandbox || "workspace-write", "set_codex_sandbox", "sandbox");
+    if (isCodex) buildSegmentedBar(configSandboxBar, CODEX_SANDBOX_OPTIONS, s.codexSandbox, "set_codex_sandbox", "sandbox");
   }
   if (configWebsearchSection) {
     configWebsearchSection.style.display = isCodex ? "" : "none";
-    if (isCodex) buildSegmentedBar(configWebsearchBar, CODEX_WEBSEARCH_OPTIONS, s.codexWebSearch || "disabled", "set_codex_websearch", "webSearch");
+    if (isCodex) buildSegmentedBar(configWebsearchBar, CODEX_WEBSEARCH_OPTIONS, s.codexWebSearch, "set_codex_websearch", "webSearch");
   }
 }
 

package/lib/public/modules/app-projects.js

@@ -24,6 +24,7 @@ import { connect, cancelReconnect, setStatus } from './app-connection.js';
 import { setTurnCounter, setPrependAnchor, setActivityEl, setIsUserScrolledUp, hideSuggestionChips } from './app-rendering.js';
 import { resetToolState, enableMainInput, resetTurnMetaCost } from './tools.js';
 import { clearPendingImages } from './input.js';
+import { clearAllMentionActive } from './sidebar-mates.js';
 import { setRewindMode } from './rewind.js';
 import { resetUsage, resetContext } from './app-panels.js';
 import { resetRateLimitState } from './app-rate-limit.js';
@@ -366,6 +367,7 @@ export function resetClientState() {
   store.set({ currentFullText: "" });
   resetToolState();
   clearPendingImages();
+  clearAllMentionActive();
   setActivityEl(null);
   store.set({ processing: false });
   setTurnCounter(0);