clay-server 2.19.0 → 2.20.0-beta.2

package/lib/public/modules/sidebar.js

@@ -20,6 +20,8 @@ var searchDebounce = null;
 var cachedSessions = [];
 var expandedLoopGroups = new Set();
 var expandedLoopRuns = new Set();
+var expandedMobileLoopGroups = new Set();
+var expandedMobileLoopRuns = new Set();
 
 // --- Cached project data for mobile sheet ---
 var cachedProjectList = [];
@@ -959,7 +961,19 @@ function renderSheetSessions(listEl) {
     })(cachedProjectList[ci]);
   }
 
-  for (var mi = 0; mi < cachedMates.length; mi++) {
+  var favoriteChipMates = cachedMates.filter(function (m) {
+    if (cachedDmRemovedUsers[m.id]) return false;
+    if (cachedDmFavorites.indexOf(m.id) !== -1) return true;
+    if (cachedDmUnread[m.id] && cachedDmUnread[m.id] > 0) return true;
+    return false;
+  });
+  var sortedChipMates = favoriteChipMates.sort(function (a, b) {
+    var aBuiltin = a.builtinKey ? 1 : 0;
+    var bBuiltin = b.builtinKey ? 1 : 0;
+    if (aBuiltin !== bBuiltin) return bBuiltin - aBuiltin;
+    return (a.createdAt || 0) - (b.createdAt || 0);
+  });
+  for (var mi = 0; mi < sortedChipMates.length; mi++) {
     (function (mate) {
       var mp = mate.profile || {};
       var chip = document.createElement("button");
@@ -998,7 +1012,7 @@ function renderSheetSessions(listEl) {
       }
 
       chips.push(chip);
-    })(cachedMates[mi]);
+    })(sortedChipMates[mi]);
   }
 
   for (var i = 0; i < chips.length; i++) {
@@ -1104,7 +1118,242 @@ function createMobileSessionItem(s) {
   return el;
 }
 
-// Helper: render sorted sessions into a container with date groups
+// Helper: create a mobile loop child element (individual session inside a group)
+function createMobileLoopChild(s) {
+  var el = document.createElement("button");
+  el.className = "mobile-loop-child" + (s.active ? " active" : "");
+
+  if (s.isProcessing) {
+    var dot = document.createElement("span");
+    dot.className = "mobile-session-processing";
+    el.appendChild(dot);
+  }
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "mobile-session-title";
+  if (s.loop) {
+    var isRalphChild = s.loop.source === "ralph";
+    var roleName = s.loop.role === "crafting" ? "Crafting" : s.loop.role === "judge" ? "Judge" : (isRalphChild ? "Coder" : "Run");
+    var iterSuffix = s.loop.role === "crafting" ? "" : " #" + s.loop.iteration;
+    var roleCls = s.loop.role === "crafting" ? " crafting" : (!isRalphChild ? " scheduled" : "");
+    var badge = document.createElement("span");
+    badge.className = "mobile-loop-role-badge" + roleCls;
+    badge.textContent = roleName + iterSuffix;
+    textSpan.appendChild(badge);
+  }
+  el.appendChild(textSpan);
+
+  (function (id) {
+    el.addEventListener("click", function () {
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+      }
+      dismissOverlayPanels();
+      closeMobileSheet();
+    });
+  })(s.id);
+
+  return el;
+}
+
+// Helper: create a mobile loop run sub-group (collapsible time group)
+function createMobileLoopRun(parentGk, startedAtKey, sessions, isRalph) {
+  var runGk = parentGk + ":" + startedAtKey;
+  var expanded = expandedMobileLoopRuns.has(runGk);
+  var startedAt = Number(startedAtKey);
+  var timeLabel = startedAt ? new Date(startedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "Unknown";
+
+  var hasActive = false;
+  var anyProcessing = false;
+  var latestSession = sessions[0];
+  for (var i = 0; i < sessions.length; i++) {
+    if (sessions[i].active) hasActive = true;
+    if (sessions[i].isProcessing) anyProcessing = true;
+    if ((sessions[i].lastActivity || 0) > (latestSession.lastActivity || 0)) {
+      latestSession = sessions[i];
+    }
+  }
+
+  var wrapper = document.createElement("div");
+  wrapper.className = "mobile-loop-run-wrapper";
+
+  var header = document.createElement("button");
+  header.className = "mobile-loop-run" + (hasActive ? " active" : "") + (expanded ? " expanded" : "") + (isRalph ? "" : " scheduled");
+
+  var chevron = document.createElement("span");
+  chevron.className = "mobile-loop-chevron";
+  chevron.innerHTML = iconHtml("chevron-right");
+  header.appendChild(chevron);
+
+  var label = document.createElement("span");
+  label.className = "mobile-loop-run-time";
+  var labelHtml = "";
+  if (anyProcessing) {
+    labelHtml += '<span class="mobile-session-processing"></span> ';
+  }
+  labelHtml += escapeHtml(timeLabel);
+  label.innerHTML = labelHtml;
+  header.appendChild(label);
+
+  var countBadge = document.createElement("span");
+  countBadge.className = "mobile-loop-count" + (isRalph ? "" : " scheduled");
+  countBadge.textContent = String(sessions.length);
+  header.appendChild(countBadge);
+
+  header.addEventListener("click", (function (rk) {
+    return function (e) {
+      e.stopPropagation();
+      if (expandedMobileLoopRuns.has(rk)) {
+        expandedMobileLoopRuns.delete(rk);
+      } else {
+        expandedMobileLoopRuns.add(rk);
+      }
+      refreshMobileChatSheet();
+    };
+  })(runGk));
+
+  wrapper.appendChild(header);
+
+  if (expanded) {
+    var childContainer = document.createElement("div");
+    childContainer.className = "mobile-loop-children";
+    for (var k = 0; k < sessions.length; k++) {
+      childContainer.appendChild(createMobileLoopChild(sessions[k]));
+    }
+    wrapper.appendChild(childContainer);
+  }
+
+  return wrapper;
+}
+
+// Helper: create a mobile loop group element (collapsible group header)
+function createMobileLoopGroup(loopId, children, groupKey) {
+  var gk = groupKey || loopId;
+
+  // Sub-group children by startedAt (each run)
+  var runMap = {};
+  for (var i = 0; i < children.length; i++) {
+    var runKey = String(children[i].loop && children[i].loop.startedAt || 0);
+    if (!runMap[runKey]) runMap[runKey] = [];
+    runMap[runKey].push(children[i]);
+  }
+  var runKeys = Object.keys(runMap);
+
+  // Sort each run's children by iteration then role
+  for (var ri = 0; ri < runKeys.length; ri++) {
+    runMap[runKeys[ri]].sort(function (a, b) {
+      var ai = (a.loop && a.loop.iteration) || 0;
+      var bi = (b.loop && b.loop.iteration) || 0;
+      if (ai !== bi) return ai - bi;
+      var ar = (a.loop && a.loop.role === "judge") ? 1 : 0;
+      var br = (b.loop && b.loop.role === "judge") ? 1 : 0;
+      return ar - br;
+    });
+  }
+
+  // Sort runs by startedAt descending (newest first)
+  runKeys.sort(function (a, b) { return Number(b) - Number(a); });
+
+  var expanded = expandedMobileLoopGroups.has(gk);
+  var hasActive = false;
+  var anyProcessing = false;
+  var latestSession = children[0];
+  for (var ci = 0; ci < children.length; ci++) {
+    if (children[ci].active) hasActive = true;
+    if (children[ci].isProcessing) anyProcessing = true;
+    if ((children[ci].lastActivity || 0) > (latestSession.lastActivity || 0)) {
+      latestSession = children[ci];
+    }
+  }
+
+  var loopName = (children[0].loop && children[0].loop.name) || "Ralph Loop";
+  var isRalph = children[0].loop && children[0].loop.source === "ralph";
+  var isCrafting = false;
+  for (var j = 0; j < children.length; j++) {
+    if (children[j].loop && children[j].loop.role === "crafting") isCrafting = true;
+  }
+  var runCount = runKeys.length;
+
+  var wrapper = document.createElement("div");
+  wrapper.className = "mobile-loop-wrapper";
+
+  // Group header row
+  var header = document.createElement("button");
+  header.className = "mobile-loop-group" + (hasActive ? " active" : "") + (expanded ? " expanded" : "") + (isRalph ? "" : " scheduled");
+
+  var chevron = document.createElement("span");
+  chevron.className = "mobile-loop-chevron";
+  chevron.innerHTML = iconHtml("chevron-right");
+  header.appendChild(chevron);
+
+  var iconSpan = document.createElement("span");
+  var groupIcon = isRalph ? "repeat" : "calendar-clock";
+  iconSpan.className = "mobile-loop-icon" + (isRalph ? "" : " scheduled");
+  iconSpan.innerHTML = iconHtml(groupIcon);
+  header.appendChild(iconSpan);
+
+  if (anyProcessing) {
+    var dot = document.createElement("span");
+    dot.className = "mobile-session-processing";
+    header.appendChild(dot);
+  }
+
+  var nameSpan = document.createElement("span");
+  nameSpan.className = "mobile-loop-name";
+  nameSpan.textContent = loopName;
+  header.appendChild(nameSpan);
+
+  if (isCrafting && children.length === 1) {
+    var craftBadge = document.createElement("span");
+    craftBadge.className = "mobile-loop-badge crafting";
+    craftBadge.textContent = "Crafting";
+    header.appendChild(craftBadge);
+  } else {
+    var countBadge = document.createElement("span");
+    countBadge.className = "mobile-loop-count" + (isRalph ? "" : " scheduled");
+    var countLabel = runCount === 1 ? String(children.length) : runCount + (runCount === 1 ? " run" : " runs");
+    countBadge.textContent = countLabel;
+    header.appendChild(countBadge);
+  }
+
+  // Chevron toggles expansion
+  header.addEventListener("click", (function (lid) {
+    return function (e) {
+      e.stopPropagation();
+      if (expandedMobileLoopGroups.has(lid)) {
+        expandedMobileLoopGroups.delete(lid);
+      } else {
+        expandedMobileLoopGroups.add(lid);
+      }
+      refreshMobileChatSheet();
+    };
+  })(gk));
+
+  wrapper.appendChild(header);
+
+  // Expanded: show runs
+  if (expanded) {
+    var childContainer = document.createElement("div");
+    childContainer.className = "mobile-loop-children";
+
+    if (runCount === 1) {
+      var singleRun = runMap[runKeys[0]];
+      for (var sk = 0; sk < singleRun.length; sk++) {
+        childContainer.appendChild(createMobileLoopChild(singleRun[sk]));
+      }
+    } else {
+      for (var rk = 0; rk < runKeys.length; rk++) {
+        childContainer.appendChild(createMobileLoopRun(gk, runKeys[rk], runMap[runKeys[rk]], isRalph));
+      }
+    }
+
+    wrapper.appendChild(childContainer);
+  }
+
+  return wrapper;
+}
+
+// Helper: render sorted sessions into a container with date groups (with loop session grouping)
 function renderMobileSessionsInto(container) {
   var newBtn = document.createElement("button");
   newBtn.className = "mobile-session-new";
@@ -1117,14 +1366,51 @@ function renderMobileSessionsInto(container) {
   });
   container.appendChild(newBtn);
 
-  var sorted = cachedSessions.slice().sort(function (a, b) {
+  // Partition: loop sessions vs normal sessions (same logic as desktop renderSessionList)
+  var loopGroups = {};
+  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") {
+      continue;
+    } else if (s.loop && s.loop.loopId) {
+      var startedAt = s.loop.startedAt || 0;
+      var dateStr = startedAt ? new Date(startedAt).toISOString().slice(0, 10) : "unknown";
+      var groupKey = s.loop.loopId + ":" + dateStr;
+      if (!loopGroups[groupKey]) loopGroups[groupKey] = [];
+      loopGroups[groupKey].push(s);
+    } else {
+      normalSessions.push(s);
+    }
+  }
+
+  // Build virtual items
+  var items = [];
+  for (var j = 0; j < normalSessions.length; j++) {
+    items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+  }
+  var groupKeys = Object.keys(loopGroups);
+  for (var k = 0; k < groupKeys.length; k++) {
+    var gk = groupKeys[k];
+    var children = loopGroups[gk];
+    var realLoopId = children[0].loop.loopId;
+    var maxActivity = 0;
+    for (var m = 0; m < children.length; m++) {
+      var act = children[m].lastActivity || 0;
+      if (act > maxActivity) maxActivity = act;
+    }
+    items.push({ type: "loop", loopId: realLoopId, groupKey: gk, children: children, lastActivity: maxActivity });
+  }
+
+  // Sort by lastActivity descending
+  items.sort(function (a, b) {
     return (b.lastActivity || 0) - (a.lastActivity || 0);
   });
 
   var currentGroup = "";
-  for (var si = 0; si < sorted.length; si++) {
-    var s = sorted[si];
-    var group = getDateGroup(s.lastActivity || 0);
+  for (var n = 0; n < items.length; n++) {
+    var item = items[n];
+    var group = getDateGroup(item.lastActivity || 0);
     if (group !== currentGroup) {
       currentGroup = group;
       var header = document.createElement("div");
@@ -1132,7 +1418,11 @@ function renderMobileSessionsInto(container) {
       header.textContent = group;
       container.appendChild(header);
     }
-    container.appendChild(createMobileSessionItem(s));
+    if (item.type === "loop") {
+      container.appendChild(createMobileLoopGroup(item.loopId, item.children, item.groupKey));
+    } else {
+      container.appendChild(createMobileSessionItem(item.data));
+    }
   }
 }
 
@@ -2141,15 +2431,13 @@ function showMateCtxMenu(anchorEl, mate) {
   menu.appendChild(editItem);
 
   var removeItem = document.createElement("button");
-  removeItem.className = "project-ctx-item project-ctx-delete";
-  removeItem.innerHTML = iconHtml("trash-2") + " <span>Remove Mate</span>";
+  removeItem.className = "project-ctx-item";
+  removeItem.innerHTML = iconHtml("star-off") + " <span>Remove from favorites</span>";
   removeItem.addEventListener("click", function (e) {
     e.stopPropagation();
-    var iconRect = anchorEl.getBoundingClientRect();
-    spawnDustParticles(iconRect.left + iconRect.width / 2, iconRect.top + iconRect.height / 2);
     closeUserCtxMenu();
     if (ctx.sendWs) {
-      ctx.sendWs({ type: "mate_delete", mateId: mate.id });
+      ctx.sendWs({ type: "dm_remove_favorite", targetUserId: mate.id });
     }
   });
   menu.appendChild(removeItem);
@@ -3522,8 +3810,20 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
     }
   }
 
-  // Render mates
-  for (var mi = 0; mi < cachedMates.length; mi++) {
+  // Render mates (only favorites, built-in first, then user-created)
+  var favoriteMates = cachedMates.filter(function (m) {
+    if (cachedDmRemovedUsers[m.id]) return false;
+    if (cachedDmFavorites.indexOf(m.id) !== -1) return true;
+    if (cachedDmUnread[m.id] && cachedDmUnread[m.id] > 0) return true;
+    return false;
+  });
+  var sortedMates = favoriteMates.sort(function (a, b) {
+    var aBuiltin = a.builtinKey ? 1 : 0;
+    var bBuiltin = b.builtinKey ? 1 : 0;
+    if (aBuiltin !== bBuiltin) return bBuiltin - aBuiltin;
+    return (a.createdAt || 0) - (b.createdAt || 0);
+  });
+  for (var mi = 0; mi < sortedMates.length; mi++) {
     (function (mate) {
       var mp = mate.profile || {};
       var mateSlug = "mate-" + mate.id;
@@ -3598,7 +3898,7 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       });
 
       container.appendChild(el);
-    })(cachedMates[mi]);
+    })(sortedMates[mi]);
   }
 
   // Show container if we have mates even with no other users
@@ -3635,13 +3935,12 @@ function toggleDmUserPicker(anchorEl) {
   var searchInput = document.createElement("input");
   searchInput.className = "dm-user-picker-search";
   searchInput.type = "text";
-  searchInput.placeholder = "Search users...";
+  searchInput.placeholder = "Search mates and users...";
   picker.appendChild(searchInput);
 
-  // Scrollable list
+  // User list element (appended later, after USERS label)
   var listEl = document.createElement("div");
   listEl.className = "dm-user-picker-list";
-  picker.appendChild(listEl);
 
   // Position the picker above the + button
   document.body.appendChild(picker);
@@ -3698,10 +3997,193 @@ function toggleDmUserPicker(anchorEl) {
     }
   }
 
+  // --- MATES section ---
+  var matesSectionLabel = document.createElement("div");
+  matesSectionLabel.className = "dm-user-picker-section";
+  matesSectionLabel.textContent = "Mates";
+  picker.appendChild(matesSectionLabel);
+
+  var matesListEl = document.createElement("div");
+  matesListEl.className = "dm-user-picker-list dm-mates-list";
+  picker.appendChild(matesListEl);
+
+  // Update scroll gradient hint
+  function updateMatesScrollHint() {
+    var isOverflow = matesListEl.scrollHeight > matesListEl.clientHeight + 2;
+    if (!isOverflow) {
+      matesListEl.classList.add("no-overflow");
+      matesListEl.classList.remove("scrolled-bottom");
+      return;
+    }
+    matesListEl.classList.remove("no-overflow");
+    var atBottom = matesListEl.scrollTop + matesListEl.clientHeight >= matesListEl.scrollHeight - 4;
+    if (atBottom) {
+      matesListEl.classList.add("scrolled-bottom");
+    } else {
+      matesListEl.classList.remove("scrolled-bottom");
+    }
+  }
+  matesListEl.addEventListener("scroll", updateMatesScrollHint);
+
+  function renderMatesList(filter) {
+    matesListEl.innerHTML = "";
+    var allMates = cachedMates || [];
+    if (filter) {
+      var lf = filter.toLowerCase();
+      allMates = allMates.filter(function (m) {
+        var name = (m.profile && m.profile.displayName) || m.name || "";
+        return name.toLowerCase().indexOf(lf) !== -1;
+      });
+    }
+    // Build unified list: installed builtins, deleted builtins, user-created
+    var availBuiltins = (ctx.availableBuiltins && ctx.availableBuiltins()) || [];
+    var entries = [];
+    // 1. Installed builtin mates
+    for (var si = 0; si < allMates.length; si++) {
+      if (allMates[si].builtinKey) entries.push({ type: "mate", data: allMates[si] });
+    }
+    // 2. Deleted builtins (only when not filtering)
+    if (!filter) {
+      for (var di = 0; di < availBuiltins.length; di++) {
+        entries.push({ type: "deleted", data: availBuiltins[di] });
+      }
+    }
+    // 3. User-created mates
+    var userMates = allMates.filter(function (m) { return !m.builtinKey; });
+    userMates.sort(function (a, b) { return (a.createdAt || 0) - (b.createdAt || 0); });
+    for (var ui = 0; ui < userMates.length; ui++) {
+      entries.push({ type: "mate", data: userMates[ui] });
+    }
+
+    for (var i = 0; i < entries.length; i++) {
+      var entry = entries[i];
+      if (entry.type === "deleted") {
+        // Deleted builtin: show with "+ Add" button
+        (function (b) {
+          var bItem = document.createElement("div");
+          bItem.className = "dm-user-picker-item dm-user-picker-builtin-item";
+          bItem.style.opacity = "0.5";
+          var bAv = document.createElement("img");
+          bAv.className = "dm-user-picker-avatar";
+          bAv.src = b.avatarCustom || "";
+          bAv.alt = b.displayName;
+          bItem.appendChild(bAv);
+          var bNameWrap = document.createElement("div");
+          bNameWrap.style.cssText = "flex:1;min-width:0;";
+          var bName = document.createElement("span");
+          bName.className = "dm-user-picker-name";
+          bName.textContent = b.displayName;
+          bNameWrap.appendChild(bName);
+          var bBio = document.createElement("div");
+          bBio.style.cssText = "font-size:11px;color:var(--text-dimmer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
+          bBio.textContent = "Deleted";
+          bNameWrap.appendChild(bBio);
+          bItem.appendChild(bNameWrap);
+          var bAddBtn = document.createElement("button");
+          bAddBtn.style.cssText = "border:none;background:none;cursor:pointer;padding:2px 6px;color:var(--accent, #6366f1);font-size:12px;font-weight:600;white-space:nowrap;";
+          bAddBtn.textContent = "+ Add";
+          bAddBtn.title = "Re-add " + b.displayName;
+          bAddBtn.addEventListener("click", function (e) {
+            e.stopPropagation();
+            if (ctx.sendWs) ctx.sendWs({ type: "mate_readd_builtin", builtinKey: b.key });
+            closeDmUserPicker();
+          });
+          bItem.appendChild(bAddBtn);
+          bItem.addEventListener("click", function () {
+            if (ctx.sendWs) ctx.sendWs({ type: "mate_readd_builtin", builtinKey: b.key });
+            closeDmUserPicker();
+          });
+          matesListEl.appendChild(bItem);
+        })(entry.data);
+      } else {
+        // Normal mate
+        (function (m) {
+          var mp = m.profile || {};
+          var isFav = cachedDmFavorites.indexOf(m.id) !== -1;
+          var item = document.createElement("div");
+          item.className = "dm-user-picker-item";
+          if (isFav) item.classList.add("dm-picker-fav");
+          var av = document.createElement("img");
+          av.className = "dm-user-picker-avatar";
+          av.src = mateAvatarUrl(m, 28);
+          av.alt = mp.displayName || m.name || "Mate";
+          item.appendChild(av);
+          var nameWrap = document.createElement("div");
+          nameWrap.style.cssText = "flex:1;min-width:0;";
+          var name = document.createElement("span");
+          name.className = "dm-user-picker-name";
+          name.textContent = mp.displayName || m.name || "Mate";
+          nameWrap.appendChild(name);
+          if (m.bio) {
+            var bio = document.createElement("div");
+            bio.style.cssText = "font-size:11px;color:var(--text-dimmer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
+            bio.textContent = m.bio;
+            nameWrap.appendChild(bio);
+          }
+          item.appendChild(nameWrap);
+          // Delete button with inline confirm
+          var delBtn = document.createElement("button");
+          delBtn.className = "dm-picker-del-btn";
+          delBtn.innerHTML = iconHtml("trash-2");
+          delBtn.title = "Delete mate";
+          delBtn.addEventListener("click", function (e) {
+            e.stopPropagation();
+            var origHtml = item.innerHTML;
+            item.innerHTML = "";
+            item.style.justifyContent = "center";
+            item.style.gap = "6px";
+            var confirmMsg = document.createElement("span");
+            confirmMsg.style.cssText = "font-size:12px;color:var(--text-dimmer);";
+            confirmMsg.textContent = m.builtinKey ? "Delete? You can re-add later." : "Delete permanently?";
+            item.appendChild(confirmMsg);
+            var yesBtn = document.createElement("button");
+            yesBtn.style.cssText = "border:none;background:var(--danger,#e74c3c);color:#fff;padding:3px 10px;border-radius:4px;font-size:12px;cursor:pointer;";
+            yesBtn.textContent = "Delete";
+            yesBtn.addEventListener("click", function (e2) {
+              e2.stopPropagation();
+              if (ctx.sendWs) ctx.sendWs({ type: "mate_delete", mateId: m.id });
+              closeDmUserPicker();
+            });
+            item.appendChild(yesBtn);
+            var noBtn = document.createElement("button");
+            noBtn.style.cssText = "border:1px solid var(--border);background:none;color:var(--text);padding:3px 10px;border-radius:4px;font-size:12px;cursor:pointer;";
+            noBtn.textContent = "Cancel";
+            noBtn.addEventListener("click", function (e2) {
+              e2.stopPropagation();
+              item.innerHTML = origHtml;
+              item.style.justifyContent = "";
+              item.style.gap = "";
+              refreshIcons();
+            });
+            item.appendChild(noBtn);
+          });
+          item.appendChild(delBtn);
+          item.addEventListener("click", function () {
+            if (ctx.openDm) ctx.openDm(m.id);
+            if (!isFav && ctx.sendWs) ctx.sendWs({ type: "dm_add_favorite", targetUserId: m.id });
+            closeDmUserPicker();
+          });
+          matesListEl.appendChild(item);
+        })(entry.data);
+      }
+    }
+
+    if (entries.length === 0 && filter) {
+      var emptyEl = document.createElement("div");
+      emptyEl.className = "dm-user-picker-empty";
+      emptyEl.textContent = "No mates found";
+      matesListEl.appendChild(emptyEl);
+    }
+    refreshIcons();
+    requestAnimationFrame(updateMatesScrollHint);
+  }
+
   // Create Mate option
   var createMateEl = document.createElement("div");
   createMateEl.className = "dm-user-picker-create-mate";
-  createMateEl.innerHTML = iconHtml("bot") + " <span>Create a Mate</span>";
+  var hasCustomMates = (cachedMates || []).some(function (m) { return !m.builtinKey; });
+  var createMateLabel = hasCustomMates ? "Create a Mate" : "Create a Mate for what you're doing";
+  createMateEl.innerHTML = iconHtml("bot") + " <span>" + createMateLabel + "</span>";
   createMateEl.addEventListener("click", function () {
     closeDmUserPicker();
     if (ctx.openMateWizard) ctx.openMateWizard();
@@ -3719,10 +4201,14 @@ function toggleDmUserPicker(anchorEl) {
   sectionLabel.className = "dm-user-picker-section";
   sectionLabel.textContent = "Users";
   picker.appendChild(sectionLabel);
+  picker.appendChild(listEl);
 
+  renderMatesList("");
   renderPickerList("");
   searchInput.addEventListener("input", function () {
-    renderPickerList(searchInput.value);
+    var val = searchInput.value;
+    renderMatesList(val);
+    renderPickerList(val);
   });
 
   // Focus search

package/lib/public/modules/theme.js

@@ -495,13 +495,16 @@ export function toggleDarkMode() {
   updateToggleIcon();
 }
 
-// Update the toggle switch checkbox state
+// Update all theme toggle checkboxes
 function updateToggleIcon() {
-  var checkbox = document.getElementById("theme-toggle-check");
-  if (!checkbox) return;
   var mode = getEffectiveMode();
-  // checked = light mode (thumb slides right, covering moon)
-  checkbox.checked = (mode === "light");
+  var isLight = mode === "light";
+  // Legacy top-bar toggle (may not exist)
+  var checkbox = document.getElementById("theme-toggle-check");
+  if (checkbox) checkbox.checked = isLight;
+  // User settings toggle
+  var usToggle = document.getElementById("us-theme-toggle");
+  if (usToggle) usToggle.checked = isLight;
 }
 
 // --- Theme picker UI ---
@@ -671,13 +674,8 @@ export function initTheme() {
   // Load all themes from server, then apply properly
   loadThemes();
 
-  // Wire up title bar toggle switch
-  var toggleCheck = document.getElementById("theme-toggle-check");
-  if (toggleCheck) {
-    toggleCheck.addEventListener("change", function () {
-      toggleDarkMode();
-    });
-  }
+  // Theme toggle is now in User Settings (us-theme-toggle)
+  // Wired up in user-settings.js initUserSettings()
 
   // Listen for system preference changes (only applies if user has no manual override)
   if (window.matchMedia) {