clay-server 2.26.0-beta.1 → 2.26.0-beta.11

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/notifications.js

@@ -1,4 +1,4 @@
-import { copyToClipboard } from './utils.js';
+import { copyToClipboard, showToast } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 
 var ctx;
@@ -155,6 +155,114 @@ export function initNotifications(_ctx) {
     });
   })();
 
+  // --- Extension pill popover ---
+  (function () {
+    var extPillWrap = $("ext-pill-wrap");
+    var extPillBtn = $("ext-pill");
+    var extPopover = $("ext-popover");
+    var extDownloadBtn = $("ext-download-btn");
+    var extDownloadStatus = $("ext-download-status");
+    var extCopyUrl = $("ext-copy-url");
+    if (!extPillWrap || !extPillBtn || !extPopover) return;
+
+    // Detect extension connection via postMessage from content.js
+    var extConnected = false;
+    var connectedBanner = $("ext-connected-banner");
+    var extDesc = $("ext-popover-desc");
+    var extDivider = $("ext-popover-divider");
+    var extGuideTitle = $("ext-popover-guide-title");
+    var extSteps = extPopover.querySelector(".ext-popover-steps");
+
+    function setExtConnected() {
+      if (extConnected) return;
+      extConnected = true;
+      extPillBtn.classList.add("ext-connected");
+      extPillBtn.innerHTML = '<i data-lucide="check"></i> Extension';
+      refreshIcons(extPillBtn);
+      if (connectedBanner) connectedBanner.classList.remove("hidden");
+      if (extDownloadBtn) extDownloadBtn.style.display = "none";
+      if (extDownloadStatus) extDownloadStatus.classList.add("hidden");
+      if (extDesc) extDesc.style.display = "none";
+      if (extDivider) extDivider.style.display = "none";
+      if (extGuideTitle) extGuideTitle.style.display = "none";
+      if (extSteps) extSteps.style.display = "none";
+    }
+
+    window.addEventListener("message", function (event) {
+      if (event.source !== window) return;
+      if (!event.data || event.data.source !== "clay-chrome-extension") return;
+      setExtConnected();
+    });
+
+    // Toggle popover
+    extPillBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      extPopover.classList.toggle("visible");
+      refreshIcons(extPopover);
+    });
+
+    document.addEventListener("click", function (e) {
+      if (!extPopover.contains(e.target) && e.target !== extPillBtn && !extPillBtn.contains(e.target)) {
+        extPopover.classList.remove("visible");
+      }
+    });
+
+    // Download button
+    if (extDownloadBtn) {
+      extDownloadBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        extDownloadBtn.disabled = true;
+        extDownloadBtn.innerHTML = iconHtml("loader") + " Downloading...";
+        refreshIcons(extDownloadBtn);
+        var loaderIcon = extDownloadBtn.querySelector(".lucide");
+        if (loaderIcon) loaderIcon.style.animation = "spin 1s linear infinite";
+        if (extDownloadStatus) {
+          extDownloadStatus.classList.remove("hidden");
+          extDownloadStatus.textContent = "Fetching from GitHub...";
+          extDownloadStatus.style.color = "";
+        }
+        fetch("/api/extension/download").then(function (resp) {
+          if (!resp.ok) throw new Error("Download failed (" + resp.status + ")");
+          return resp.blob();
+        }).then(function (blob) {
+          var url = URL.createObjectURL(blob);
+          var a = document.createElement("a");
+          a.href = url;
+          a.download = "clay-chrome-extension.zip";
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          if (extDownloadStatus) {
+            extDownloadStatus.textContent = "Download complete!";
+            extDownloadStatus.style.color = "var(--accent)";
+          }
+          showToast("Extension downloaded");
+        }).catch(function (err) {
+          if (extDownloadStatus) {
+            extDownloadStatus.textContent = "Failed: " + err.message;
+            extDownloadStatus.style.color = "var(--danger, #e53935)";
+          }
+          showToast("Download failed");
+        }).finally(function () {
+          extDownloadBtn.disabled = false;
+          extDownloadBtn.innerHTML = iconHtml("download") + " Download Extension (.zip)";
+          refreshIcons(extDownloadBtn);
+        });
+      });
+    }
+
+    // Copy chrome://extensions URL
+    if (extCopyUrl) {
+      extCopyUrl.addEventListener("click", function (e) {
+        e.stopPropagation();
+        copyToClipboard("chrome://extensions").then(function () {
+          showToast("Copied chrome://extensions");
+        });
+      });
+    }
+  })();
+
   // --- Settings: Check for updates ---
   (function () {
     var settingsUpdateCheck = $("settings-update-check");

package/lib/public/modules/rewind.js

@@ -4,6 +4,8 @@ import { iconHtml, refreshIcons } from './icons.js';
 var ctx;
 var rewindMode = false;
 var pendingRewindUuid = null;
+var rewindPreviewInFlight = false;
+var rewindExecuting = false;
 var rewindBannerEl = null;
 var rewindScrollHandler = null;
 var rewindModal, rewindSummary, rewindFilesList, rewindConfirmBtn, rewindCancelBtn, rewindModeOptions;
@@ -50,6 +52,17 @@ export function clearPendingRewindUuid() {
   pendingRewindUuid = null;
 }
 
+export function onRewindComplete() {
+  rewindExecuting = false;
+  rewindPreviewInFlight = false;
+  pendingRewindUuid = null;
+}
+
+export function onRewindError() {
+  rewindExecuting = false;
+  rewindPreviewInFlight = false;
+}
+
 function initiateRewind(uuid) {
   if (ctx.processing) {
     ctx.addSystemMessage("Cannot rewind while processing. Stop the current operation first.", true);
@@ -59,7 +72,16 @@ function initiateRewind(uuid) {
     ctx.addSystemMessage("No rewind point found for this turn.", true);
     return;
   }
+  if (rewindPreviewInFlight) {
+    // Debounce: ignore clicks while a preview is already in flight
+    return;
+  }
+  if (rewindExecuting) {
+    ctx.addSystemMessage("Rewind already in progress.", true);
+    return;
+  }
   pendingRewindUuid = uuid;
+  rewindPreviewInFlight = true;
   if (ctx.ws && ctx.connected) {
     ctx.ws.send(JSON.stringify({ type: "rewind_preview", uuid: uuid }));
   }
@@ -98,6 +120,17 @@ function updateSummaryForMode() {
 }
 
 export function showRewindModal(data) {
+  rewindPreviewInFlight = false;
+
+  // Ignore stale preview results that don't match current pending UUID
+  if (data.uuid && pendingRewindUuid && data.uuid !== pendingRewindUuid) {
+    return;
+  }
+  // Ignore if a rewind is already executing
+  if (rewindExecuting) {
+    return;
+  }
+
   var p = data.preview || data;
   var filePaths = p.filesChanged || p.filePaths || p.files || [];
   var fileCount = filePaths.length;
@@ -171,6 +204,7 @@ export function showRewindModal(data) {
 export function hideRewindModal() {
   rewindModal.classList.add("hidden");
   pendingRewindUuid = null;
+  rewindPreviewInFlight = false;
 }
 
 export function renderDiffPre(text) {
@@ -333,7 +367,9 @@ export function initRewind(_ctx) {
   });
 
   rewindConfirmBtn.addEventListener("click", function() {
+    if (rewindExecuting) return;
     if (pendingRewindUuid && ctx.ws && ctx.connected) {
+      rewindExecuting = true;
       var mode = getSelectedMode();
       ctx.ws.send(JSON.stringify({ type: "rewind_execute", uuid: pendingRewindUuid, mode: mode }));
     }

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" },
@@ -3946,8 +4023,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;
@@ -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

@@ -653,6 +653,14 @@ export function handleTermOutput(msg) {
   }
 }
 
+export function handleTermResized(msg) {
+  if (!msg.id) return;
+  var tab = tabs.get(msg.id);
+  if (tab && tab.xterm && msg.cols > 0 && msg.rows > 0) {
+    tab.xterm.resize(msg.cols, msg.rows);
+  }
+}
+
 export function handleTermExited(msg) {
   if (!msg.id) return;
   var tab = tabs.get(msg.id);

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,