clay-server 2.11.0-beta.8 → 2.11.0

package/lib/public/modules/admin.js

@@ -24,6 +24,27 @@ function showConfirmDialog(message, onConfirm) {
   });
 }
 
+function showConfirmResetPin(name, onConfirm) {
+  var modal = document.createElement("div");
+  modal.className = "admin-modal-overlay";
+  var html = '<div class="admin-modal">' +
+    '<div class="admin-modal-body" style="padding:20px 16px 16px">' +
+    '<p class="admin-modal-desc" style="margin:0;font-size:14px;color:var(--text)">Reset PIN for <strong>' + escapeHtml(name) + '</strong>? A new temporary PIN will be generated and they will need to change it on next login.</p>' +
+    '</div>' +
+    '<div class="admin-modal-footer">' +
+    '<button class="admin-modal-save">Reset PIN</button>' +
+    '<button class="admin-modal-cancel">Cancel</button>' +
+    '</div></div>';
+  modal.innerHTML = html;
+  document.body.appendChild(modal);
+  modal.querySelector(".admin-modal-cancel").addEventListener("click", function () { modal.remove(); });
+  modal.addEventListener("click", function (e) { if (e.target === modal) modal.remove(); });
+  modal.querySelector(".admin-modal-save").addEventListener("click", function () {
+    modal.remove();
+    onConfirm();
+  });
+}
+
 var ctx = null;
 var cachedUsers = [];
 var cachedInvites = [];
@@ -111,8 +132,13 @@ function renderUsersTab(body) {
     html += '</div>';
     html += '<div class="admin-user-meta">' + escapeHtml(u.username) + ' · joined ' + created + '</div>';
     html += '</div>';
-    if (!isMe && u.role !== "admin") {
-      html += '<button class="admin-remove-btn" data-user-id="' + u.id + '" title="Remove user">' + iconHtml("trash-2") + '</button>';
+    if (!isMe) {
+      html += '<div style="display:flex;align-items:center;gap:2px">';
+      html += '<button class="admin-remove-btn admin-reset-pin-btn" data-user-id="' + u.id + '" title="Reset PIN">' + iconHtml("key-round") + '</button>';
+      if (u.role !== "admin") {
+        html += '<button class="admin-remove-btn" data-user-id="' + u.id + '" title="Remove user">' + iconHtml("trash-2") + '</button>';
+      }
+      html += '</div>';
     }
     html += '</div>';
   }
@@ -129,10 +155,32 @@ function renderUsersTab(body) {
     });
   }
 
+  // Bind reset PIN buttons
+  var resetBtns = body.querySelectorAll(".admin-reset-pin-btn");
+  for (var j = 0; j < resetBtns.length; j++) {
+    resetBtns[j].addEventListener("click", function (e) {
+      e.stopPropagation();
+      var userId = this.dataset.userId;
+      var user = cachedUsers.find(function (u) { return u.id === userId; });
+      var name = user ? (user.displayName || user.username) : "this user";
+      showConfirmResetPin(name, function () {
+        apiPost("/api/admin/users/" + userId + "/reset-pin").then(function (data) {
+          if (data.ok) {
+            showTempPinModal({ username: user.username, displayName: user.displayName || user.username }, data.tempPin);
+          } else {
+            showToast(data.error || "Failed to reset PIN");
+          }
+        }).catch(function () {
+          showToast("Failed to reset PIN");
+        });
+      });
+    });
+  }
+
   // Bind remove buttons
-  var removeBtns = body.querySelectorAll(".admin-remove-btn");
-  for (var j = 0; j < removeBtns.length; j++) {
-    removeBtns[j].addEventListener("click", function () {
+  var removeBtns = body.querySelectorAll(".admin-remove-btn:not(.admin-reset-pin-btn)");
+  for (var k = 0; k < removeBtns.length; k++) {
+    removeBtns[k].addEventListener("click", function () {
       var userId = this.dataset.userId;
       var user = cachedUsers.find(function (u) { return u.id === userId; });
       var name = user ? (user.displayName || user.username) : "this user";

package/lib/public/modules/sidebar.js

@@ -435,6 +435,16 @@ function renderSessionItem(s) {
   })(s.id, s.title, s.cliSessionId, moreBtn, s));
   el.appendChild(moreBtn);
 
+  // Unread badge
+  var unreadBadge = document.createElement("span");
+  unreadBadge.className = "session-unread-badge";
+  unreadBadge.dataset.sessionId = s.id;
+  if (s.unread > 0) {
+    unreadBadge.textContent = s.unread > 99 ? "99+" : String(s.unread);
+    unreadBadge.classList.add("has-unread");
+  }
+  el.appendChild(unreadBadge);
+
   el.addEventListener("click", (function (id) {
     return function () {
       if (ctx.ws && ctx.connected) {
@@ -708,6 +718,13 @@ function renderSheetProjects(listEl) {
         el.appendChild(dot);
       }
 
+      if (p.unread > 0 && p.slug !== cachedCurrentSlug) {
+        var mBadge = document.createElement("span");
+        mBadge.className = "mobile-project-unread";
+        mBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
+        el.appendChild(mBadge);
+      }
+
       el.addEventListener("click", function () {
         if (ctx.switchProject) ctx.switchProject(p.slug);
         closeMobileSheet();
@@ -1387,6 +1404,74 @@ function hideIconTooltip() {
   }
 }
 
+// --- DM user context menu ---
+var userCtxMenu = null;
+
+function closeUserCtxMenu() {
+  if (userCtxMenu) {
+    userCtxMenu.remove();
+    userCtxMenu = null;
+  }
+  document.removeEventListener("click", handleUserCtxOutsideClick, true);
+}
+
+function showUserCtxMenu(anchorEl, user) {
+  closeUserCtxMenu();
+  closeProjectCtxMenu();
+
+  var menu = document.createElement("div");
+  menu.className = "project-ctx-menu";
+
+  var removeItem = document.createElement("button");
+  removeItem.className = "project-ctx-item project-ctx-delete";
+  removeItem.innerHTML = iconHtml("user-minus") + " <span>Remove from favorites</span>";
+  removeItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    // Spawn dust particles at the user icon position
+    var iconRect = anchorEl.getBoundingClientRect();
+    spawnDustParticles(iconRect.left + iconRect.width / 2, iconRect.top + iconRect.height / 2);
+    closeUserCtxMenu();
+    // Immediately mark as removed so strip re-render hides the icon,
+    // even if the user was only visible via cachedDmConversations (not favorites)
+    cachedDmRemovedUsers[user.id] = true;
+    if (ctx.onDmRemoveUser) ctx.onDmRemoveUser(user.id);
+    renderUserStrip(cachedAllUsers, cachedOnlineUserIds, cachedMyUserId, cachedDmFavorites, cachedDmConversations, cachedDmUnread, cachedDmRemovedUsers);
+    if (ctx.sendWs) {
+      ctx.sendWs({ type: "dm_remove_favorite", targetUserId: user.id });
+    }
+  });
+  menu.appendChild(removeItem);
+
+  document.body.appendChild(menu);
+  userCtxMenu = menu;
+  refreshIcons();
+
+  requestAnimationFrame(function () {
+    var rect = anchorEl.getBoundingClientRect();
+    menu.style.position = "fixed";
+    menu.style.left = (rect.right + 6) + "px";
+    menu.style.top = rect.top + "px";
+    var menuRect = menu.getBoundingClientRect();
+    if (menuRect.right > window.innerWidth - 8) {
+      menu.style.left = (rect.left - menuRect.width - 6) + "px";
+    }
+    if (menuRect.bottom > window.innerHeight - 8) {
+      menu.style.top = (window.innerHeight - menuRect.height - 8) + "px";
+    }
+  });
+
+  // Close on outside click
+  setTimeout(function () {
+    document.addEventListener("click", handleUserCtxOutsideClick, true);
+  }, 0);
+}
+
+function handleUserCtxOutsideClick(e) {
+  if (userCtxMenu && !userCtxMenu.contains(e.target)) {
+    closeUserCtxMenu();
+  }
+}
+
 // --- Project context menu ---
 var projectCtxMenu = null;
 
@@ -1601,8 +1686,9 @@ function closeProjectCtxMenu() {
   }
 }
 
-function showIconCtxMenu(anchorEl, slug) {
+function showIconCtxMenu(anchorEl, slug, name) {
   closeProjectCtxMenu();
+  closeUserCtxMenu();
   closeEmojiPicker();
 
   var menu = document.createElement("div");
@@ -1618,6 +1704,24 @@ function showIconCtxMenu(anchorEl, slug) {
   });
   menu.appendChild(iconItem);
 
+  // --- Separator ---
+  var sep = document.createElement("div");
+  sep.className = "project-ctx-separator";
+  menu.appendChild(sep);
+
+  // --- Remove Project ---
+  var removeItem = document.createElement("button");
+  removeItem.className = "project-ctx-item project-ctx-delete";
+  removeItem.innerHTML = iconHtml("trash-2") + " <span>Remove Project</span>";
+  removeItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeProjectCtxMenu();
+    if (ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
+    }
+  });
+  menu.appendChild(removeItem);
+
   document.body.appendChild(menu);
   projectCtxMenu = menu;
   refreshIcons();
@@ -1639,6 +1743,7 @@ function showIconCtxMenu(anchorEl, slug) {
 
 function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
   closeProjectCtxMenu();
+  closeUserCtxMenu();
   closeEmojiPicker();
 
   var menu = document.createElement("div");
@@ -1910,10 +2015,6 @@ function showTrashZone() {
     trash.classList.remove("drag-hover");
     var slug = e.dataTransfer.getData("text/plain");
     if (slug && ctx.ws && ctx.connected) {
-      // Spawn dust particles at trash position
-      var rect = trash.getBoundingClientRect();
-      spawnDustParticles(rect.left + rect.width / 2, rect.top + rect.height / 2);
-      // Check for tasks before removing
       ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug }));
     }
   });
@@ -1926,7 +2027,7 @@ function hideTrashZone() {
   if (addBtn) addBtn.style.display = "";
 }
 
-function spawnDustParticles(cx, cy) {
+export function spawnDustParticles(cx, cy) {
   var colors = ["#8B7355", "#A0522D", "#D2B48C", "#C4A882", "#9E9E9E", "#B8860B", "#BC8F8F"];
   var count = 24;
   var container = document.createElement("div");
@@ -2113,6 +2214,15 @@ export function renderIconStrip(projects, currentSlug) {
     if (p.isProcessing) statusDot.classList.add("processing");
     el.appendChild(statusDot);
 
+    // Unread badge (top-right)
+    var projectBadge = document.createElement("span");
+    projectBadge.className = "icon-strip-project-badge";
+    if (p.unread > 0 && !isActive) {
+      projectBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
+      projectBadge.classList.add("has-unread");
+    }
+    el.appendChild(projectBadge);
+
     // Tooltip on hover
     (function (name, elem) {
       elem.addEventListener("mouseenter", function () { showIconTooltip(elem, name); });
@@ -2128,13 +2238,13 @@ export function renderIconStrip(projects, currentSlug) {
     })(p.slug);
 
     // Right-click context menu (icon only)
-    (function (slug, elem) {
+    (function (slug, name, elem) {
       elem.addEventListener("contextmenu", function (e) {
         e.preventDefault();
         e.stopPropagation();
-        showIconCtxMenu(elem, slug);
+        showIconCtxMenu(elem, slug, name);
       });
-    })(p.slug, el);
+    })(p.slug, p.name || p.slug, el);
 
     // Drag-and-drop reordering
     setupDragHandlers(el, p.slug);
@@ -2197,24 +2307,46 @@ export function getEmojiCategories() { return EMOJI_CATEGORIES; }
 // --- User strip (DM targets) ---
 var cachedAllUsers = [];
 var cachedOnlineUserIds = [];
+var cachedDmFavorites = [];
+var cachedDmConversations = [];
+var cachedDmUnread = {};
+var cachedMyUserId = null;
 var currentDmUserId = null;
+var dmPickerOpen = false;
 
-export function renderUserStrip(allUsers, onlineUserIds, myUserId) {
+var cachedDmRemovedUsers = {};
+
+export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites, dmConversations, dmUnread, dmRemovedUsers) {
   cachedAllUsers = allUsers || [];
   cachedOnlineUserIds = onlineUserIds || [];
+  cachedDmFavorites = dmFavorites || [];
+  cachedDmConversations = dmConversations || [];
+  cachedDmUnread = dmUnread || {};
+  cachedDmRemovedUsers = dmRemovedUsers || {};
+  cachedMyUserId = myUserId;
   var container = document.getElementById("icon-strip-users");
   if (!container) return;
 
-  // Filter out self, only show other users
-  var others = cachedAllUsers.filter(function (u) { return u.id !== myUserId; });
+  // 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 (others.length === 0) {
+  if (allOthers.length === 0) {
     container.innerHTML = "";
     container.classList.add("hidden");
     return;
   }
 
+  // Filter to show only: favorites + users with unread + users with DM conversations
+  // But exclude users explicitly removed from favorites
+  var others = allOthers.filter(function (u) {
+    if (cachedDmRemovedUsers[u.id]) return false;
+    if (cachedDmFavorites.indexOf(u.id) !== -1) return true;
+    if (cachedDmUnread[u.id] && cachedDmUnread[u.id] > 0) return true;
+    if (cachedDmConversations.indexOf(u.id) !== -1) return true;
+    return false;
+  });
+
   container.classList.remove("hidden");
   container.innerHTML = "";
 
@@ -2254,21 +2386,141 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId) {
         if (ctx.openDm) ctx.openDm(u.id);
       });
 
+      // Right-click: show context menu
+      el.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        showUserCtxMenu(el, u);
+      });
+
       container.appendChild(el);
     })(others[i]);
   }
 
-  // Invite button at bottom of user strip (hidden for now)
-  // var inviteBtn = document.createElement("button");
-  // inviteBtn.className = "icon-strip-invite";
-  // inviteBtn.innerHTML = iconHtml("user-plus");
-  // inviteBtn.addEventListener("click", function () { triggerShare(); });
-  // inviteBtn.addEventListener("mouseenter", function () { showIconTooltip(inviteBtn, "Invite"); });
-  // inviteBtn.addEventListener("mouseleave", hideIconTooltip);
-  // container.appendChild(inviteBtn);
+  // Add user (+) button
+  var addBtn = document.createElement("button");
+  addBtn.className = "icon-strip-invite";
+  addBtn.innerHTML = iconHtml("user-plus");
+  addBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    toggleDmUserPicker(addBtn);
+  });
+  addBtn.addEventListener("mouseenter", function () { showIconTooltip(addBtn, "Add DM favorite"); });
+  addBtn.addEventListener("mouseleave", hideIconTooltip);
+  container.appendChild(addBtn);
   refreshIcons();
 }
 
+function toggleDmUserPicker(anchorEl) {
+  if (dmPickerOpen) {
+    closeDmUserPicker();
+    return;
+  }
+  dmPickerOpen = true;
+
+  var picker = document.createElement("div");
+  picker.className = "dm-user-picker";
+  picker.id = "dm-user-picker";
+
+  // Search input
+  var searchInput = document.createElement("input");
+  searchInput.className = "dm-user-picker-search";
+  searchInput.type = "text";
+  searchInput.placeholder = "Search users...";
+  picker.appendChild(searchInput);
+
+  // Scrollable list
+  var listEl = document.createElement("div");
+  listEl.className = "dm-user-picker-list";
+  picker.appendChild(listEl);
+
+  // Position the picker above the + button
+  document.body.appendChild(picker);
+  var rect = anchorEl.getBoundingClientRect();
+  picker.style.left = (rect.right + 8) + "px";
+  picker.style.bottom = (window.innerHeight - rect.bottom) + "px";
+
+  function renderPickerList(filter) {
+    listEl.innerHTML = "";
+    var allOthers = cachedAllUsers.filter(function (u) { return u.id !== cachedMyUserId; });
+    // Exclude already-favorited users
+    var available = allOthers.filter(function (u) {
+      return cachedDmFavorites.indexOf(u.id) === -1;
+    });
+    if (filter) {
+      var lf = filter.toLowerCase();
+      available = available.filter(function (u) {
+        return (u.displayName && u.displayName.toLowerCase().indexOf(lf) !== -1) ||
+               (u.username && u.username.toLowerCase().indexOf(lf) !== -1);
+      });
+    }
+    if (available.length === 0) {
+      var emptyEl = document.createElement("div");
+      emptyEl.className = "dm-user-picker-empty";
+      emptyEl.textContent = filter ? "No users found" : "No more users to add";
+      listEl.appendChild(emptyEl);
+      return;
+    }
+    for (var i = 0; i < available.length; i++) {
+      (function (u) {
+        var item = document.createElement("div");
+        item.className = "dm-user-picker-item";
+
+        var av = document.createElement("img");
+        av.className = "dm-user-picker-avatar";
+        av.src = "https://api.dicebear.com/9.x/" + (u.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(u.avatarSeed || u.username) + "&size=28";
+        av.alt = u.displayName;
+        item.appendChild(av);
+
+        var name = document.createElement("span");
+        name.className = "dm-user-picker-name";
+        name.textContent = u.displayName;
+        item.appendChild(name);
+
+        item.addEventListener("click", function () {
+          if (ctx.sendWs) {
+            ctx.sendWs({ type: "dm_add_favorite", targetUserId: u.id });
+          }
+          closeDmUserPicker();
+        });
+
+        listEl.appendChild(item);
+      })(available[i]);
+    }
+  }
+
+  renderPickerList("");
+  searchInput.addEventListener("input", function () {
+    renderPickerList(searchInput.value);
+  });
+
+  // Focus search
+  setTimeout(function () { searchInput.focus(); }, 50);
+
+  // Close on click outside
+  function onDocClick(e) {
+    if (!picker.contains(e.target) && e.target !== anchorEl && !anchorEl.contains(e.target)) {
+      closeDmUserPicker();
+      document.removeEventListener("click", onDocClick, true);
+    }
+  }
+  setTimeout(function () {
+    document.addEventListener("click", onDocClick, true);
+  }, 10);
+  picker._docClickHandler = onDocClick;
+}
+
+export function closeDmUserPicker() {
+  dmPickerOpen = false;
+  var picker = document.getElementById("dm-user-picker");
+  if (picker) {
+    if (picker._docClickHandler) {
+      document.removeEventListener("click", picker._docClickHandler, true);
+    }
+    picker.remove();
+  }
+}
+
 export function setCurrentDmUser(userId) {
   currentDmUserId = userId;
   // Update active state on user icons immediately
@@ -2296,6 +2548,32 @@ export function updateDmBadge(userId, count) {
   }
 }
 
+export function updateSessionBadge(sessionId, count) {
+  var badge = document.querySelector('.session-unread-badge[data-session-id="' + sessionId + '"]');
+  if (!badge) return;
+  if (count > 0) {
+    badge.textContent = count > 99 ? "99+" : String(count);
+    badge.classList.add("has-unread");
+  } else {
+    badge.textContent = "";
+    badge.classList.remove("has-unread");
+  }
+}
+
+export function updateProjectBadge(slug, count) {
+  var icon = document.querySelector('.icon-strip-item[data-slug="' + slug + '"]');
+  if (!icon) return;
+  var badge = icon.querySelector(".icon-strip-project-badge");
+  if (!badge) return;
+  if (count > 0) {
+    badge.textContent = count > 99 ? "99+" : String(count);
+    badge.classList.add("has-unread");
+  } else {
+    badge.textContent = "";
+    badge.classList.remove("has-unread");
+  }
+}
+
 export function initIconStrip(_ctx) {
   var addBtn = document.getElementById("icon-strip-add");
   if (addBtn) {

package/lib/public/modules/sticky-notes.js

@@ -156,7 +156,7 @@ function dismissOnboarding() {
 
 // --- Visibility ---
 
-function showNotes() {
+export function showNotes() {
   notesVisible = true;
   var container = document.getElementById("sticky-notes-container");
   var toggleBtn = document.getElementById("sticky-notes-toggle-btn");
@@ -164,7 +164,7 @@ function showNotes() {
   if (toggleBtn) toggleBtn.classList.add("active");
 }
 
-function hideNotes() {
+export function hideNotes() {
   notesVisible = false;
   var container = document.getElementById("sticky-notes-container");
   var toggleBtn = document.getElementById("sticky-notes-toggle-btn");
@@ -260,7 +260,7 @@ function renderMiniMarkdown(text) {
 
 function syncTitle(noteEl, text) {
   var spacer = noteEl.querySelector(".sticky-note-spacer");
-  if (spacer) spacer.textContent = getTitle(text);
+  if (spacer) spacer.textContent = getTitle(text) || "Untitled";
 }
 
 // --- HTML-to-Markdown reverse conversion (for contenteditable) ---
@@ -356,7 +356,7 @@ function renderNote(data) {
 
   var spacer = document.createElement("div");
   spacer.className = "sticky-note-spacer";
-  spacer.textContent = getTitle(data.text);
+  spacer.textContent = getTitle(data.text) || "Untitled";
   header.appendChild(spacer);
 
   var addBtn = document.createElement("button");
@@ -644,7 +644,25 @@ function showFormatToolbar(rendered) {
   if (!sel.toString().trim()) return;
 
   var range = sel.getRangeAt(0);
-  if (!rendered.contains(range.commonAncestorContainer)) return;
+  // When dragging outside the note, commonAncestorContainer may be a parent
+  // of rendered. Clamp the range to the rendered element so the toolbar shows.
+  if (!rendered.contains(range.commonAncestorContainer)) {
+    try {
+      var clampedRange = range.cloneRange();
+      if (range.startContainer === rendered || rendered.contains(range.startContainer)) {
+        clampedRange.selectNodeContents(rendered);
+        clampedRange.setStart(range.startContainer, range.startOffset);
+      } else if (range.endContainer === rendered || rendered.contains(range.endContainer)) {
+        clampedRange.selectNodeContents(rendered);
+        clampedRange.setEnd(range.endContainer, range.endOffset);
+      } else {
+        return;
+      }
+      range = clampedRange;
+    } catch (e) {
+      return;
+    }
+  }
 
   var toolbar = document.createElement("div");
   toolbar.className = "sn-format-toolbar";
@@ -1251,3 +1269,7 @@ export function closeArchive() {
 export function isArchiveOpen() {
   return archiveOpen;
 }
+
+export function isNotesVisible() {
+  return notesVisible;
+}