clay-server 5.0.0-beta.2 → 5.0.0-beta.3

package/lib/public/modules/session-list-search.js

@@ -0,0 +1,108 @@
+// Session list search: query, open state and results live in the store
+// (sessionSearch) so the folder toolbar on every surface can drive and show them.
+// Behavior is unchanged from the former header search: a debounced
+// search_sessions request, stale responses ignored, matches filter the list while
+// keeping Driver/Worker hierarchy.
+
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { hierarchyItemMatches } from './sidebar-session-hierarchy.js';
+
+var DEBOUNCE_MS = 200;
+
+function current() {
+  return store.get('sessionSearch') || { open: false, query: "", matchIds: null, timer: null, focus: false, selStart: null, selEnd: null };
+}
+
+function patch(change) {
+  store.set({ sessionSearch: Object.assign({}, current(), change) });
+}
+
+export function getListSearchQuery() {
+  return current().query;
+}
+
+// null means no search; otherwise a Set of matching session ids.
+export function getListSearchMatchIds() {
+  return current().matchIds;
+}
+
+export function listSearchActive() {
+  var state = current();
+  return state.open || !!state.query;
+}
+
+function cancelTimer() {
+  var timer = current().timer;
+  if (timer) clearTimeout(timer);
+}
+
+export function openListSearch() {
+  patch({ open: true, focus: true, selStart: null, selEnd: null });
+}
+
+// Close always clears the query, so the list returns to its normal state.
+export function closeListSearch() {
+  cancelTimer();
+  patch({ open: false, query: "", matchIds: null, timer: null, focus: false, selStart: null, selEnd: null });
+}
+
+// Clear empties the text but keeps the search open for another query.
+export function clearListSearchText() {
+  cancelTimer();
+  patch({ query: "", matchIds: null, timer: null, focus: true, selStart: 0, selEnd: 0 });
+}
+
+export function setListSearchQuery(raw) {
+  var query = raw || "";
+  cancelTimer();
+  if (!query.trim()) {
+    patch({ query: query, matchIds: null, timer: null });
+    return;
+  }
+  var timer = setTimeout(function () {
+    var ws = getWs();
+    var state = current();
+    if (ws && store.get('connected') && state.query === query) ws.send(JSON.stringify({ type: "search_sessions", query: query }));
+  }, DEBOUNCE_MS);
+  patch({ query: query, timer: timer });
+}
+
+export function rememberListSearchCaret(focus, selStart, selEnd) {
+  var state = current();
+  if (state.focus === focus && state.selStart === selStart && state.selEnd === selEnd) return;
+  patch({ focus: focus, selStart: selStart, selEnd: selEnd });
+}
+
+export function applyListSearchResults(msg) {
+  if (msg.query !== current().query) return; // stale response
+  var ids = new Set();
+  for (var i = 0; i < msg.results.length; i++) ids.add(msg.results[i].id);
+  patch({ matchIds: ids });
+}
+
+// What a list rerender needs to react to; typing and caret movement do not.
+export function listSearchNeedsRender(state, previous) {
+  var a = state.sessionSearch;
+  var b = previous.sessionSearch;
+  if (a === b) return false;
+  var after = a || { open: false, query: "", matchIds: null };
+  var before = b || { open: false, query: "", matchIds: null };
+  if (after.open !== before.open || after.matchIds !== before.matchIds) return true;
+  return after.query !== before.query && !after.query.trim();
+}
+
+// Shared by the desktop list and the mobile sheet: drops items with no match and
+// keeps a Driver visible when it or any of its Workers match.
+export function filterItemsBySearch(items, matchIds) {
+  if (matchIds === null) return items;
+  return items.filter(function (item) {
+    if (item.type === "session") return !!(item.data && matchIds.has(item.data.id));
+    if (item.type === "driver-hierarchy" || item.type === "orphan-workers") return hierarchyItemMatches(item, matchIds);
+    if (item.type === "split-group") {
+      for (var i = 0; i < item.members.length; i++) if (matchIds.has(item.members[i].id)) return true;
+      return false;
+    }
+    return true;
+  });
+}

package/lib/public/modules/session-presence-ui.js

@@ -0,0 +1,44 @@
+import { avatarUrl, userAvatarUrl } from './avatar.js';
+import { store } from './store.js';
+
+function avatarFor(userOrStyle, seed) {
+  if (userOrStyle && typeof userOrStyle === "object") return userAvatarUrl(userOrStyle, 24);
+  return avatarUrl(userOrStyle || "imprint", seed, 24);
+}
+
+export function setSessionPresence(presence) {
+  store.set({ sessionPresence: presence || {} });
+}
+
+export function renderSessionPresence(row, sessionId) {
+  var existing = row.querySelector(".session-presence");
+  if (existing) existing.remove();
+  var all = store.get('sessionPresence') || {};
+  var users = all[String(sessionId)] || all[sessionId];
+  if (!users || !users.length) return null;
+
+  var container = document.createElement("span");
+  container.className = "session-presence";
+  container.setAttribute("aria-label", users.length + (users.length === 1 ? " person viewing" : " people viewing"));
+  var max = 3;
+  var shown = Math.min(max, users.length);
+  for (var i = 0; i < shown; i++) {
+    var user = users[i];
+    var image = document.createElement("img");
+    image.className = "session-presence-avatar";
+    image.src = avatarFor(user);
+    image.alt = user.displayName || "Viewer";
+    image.dataset.tip = (user.displayName || "Viewer") + (user.username ? " (@" + user.username + ")" : "");
+    container.appendChild(image);
+  }
+  if (users.length > max) {
+    var more = document.createElement("span");
+    more.className = "session-presence-more";
+    more.textContent = "+" + (users.length - max);
+    container.appendChild(more);
+  }
+
+  var anchor = row.querySelector(".session-item-age, .mobile-worker-generation, .mobile-session-unread, .session-row-actions, .mobile-session-star");
+  row.insertBefore(container, anchor || null);
+  return container;
+}

package/lib/public/modules/sidebar-mobile.js

@@ -9,15 +9,15 @@ import { parseEmojis } from './markdown.js';
 import { getCurrentTheme, getChatLayout, setChatLayout } from './theme.js';
 import { openCommandPalette } from './command-palette.js';
 import { openProjectSettings } from './project-settings.js';
+import { getCachedSessions, openSessionContextMenu } from './sidebar-sessions.js';
+import { VENDOR_AVATARS } from './app-rendering.js';
+import { renderSessionPresence } from './session-presence-ui.js';
 import {
-  getCachedSessions,
-  getDateGroup,
-  resolveDefaultVendor,
-  startNewSession
-} from './sidebar-sessions.js';
-import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
-import { defaultVendorUnavailable, resolvePreferredVendor, saveDefaultVendor } from './default-vendor.js';
-import { renderSessionCreationCta } from './session-creation-cta.js';
+  canOrganizeSession, computeLayout, createStarButton, renderFavoritesSection, renderOrdinarySections
+} from './sidebar-session-folders-ui.js';
+import { renderFolderToolbar, captureFolderInputs } from './session-folder-toolbar.js';
+import { captureFolderCollapseAnimations } from './session-folder-collapse.js';
+import { getListSearchMatchIds, filterItemsBySearch } from './session-list-search.js';
 import {
   getCachedProjectList,
   getCachedCurrentSlug,
@@ -124,7 +124,7 @@ export function openMobileSheet(type) {
   refreshIcons();
 }
 
-function closeMobileSheet() {
+export function closeMobileSheet() {
   var sheet = document.getElementById("mobile-sheet");
   if (!sheet || sheet.classList.contains("hidden")) return;
 
@@ -387,6 +387,7 @@ function createMobileSessionItem(s, options) {
   var itemOptions = options || {};
   var el = document.createElement("div");
   el.className = "mobile-session-item" + (s.active ? " active" : "");
+  el.dataset.sessionId = String(s.id);
   if (itemOptions.worker) el.classList.add("mobile-worker-item");
 
   // Vendor badge (legacy sessions without a vendor are Claude)
@@ -414,6 +415,7 @@ function createMobileSessionItem(s, options) {
   titleSpan.appendChild(document.createTextNode(s.title || "New Session"));
   el.appendChild(titleSpan);
   appendGithubWork(el, s, titleSpan);
+  renderSessionPresence(el, String(s.id));
 
   if (itemOptions.worker) {
     var generation = document.createElement("span");
@@ -430,6 +432,16 @@ function createMobileSessionItem(s, options) {
     el.appendChild(badge);
   }
 
+  if (!itemOptions.worker && canOrganizeSession(s)) {
+    el.appendChild(createStarButton(s, "mobile-session-star"));
+  }
+
+  el.addEventListener("contextmenu", function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    openSessionContextMenu(el, s);
+  });
+
   (function (id) {
     el.addEventListener("click", function () {
       if (getWs() && store.get('connected')) {
@@ -680,125 +692,6 @@ function createMobileLoopGroup(loopId, children, groupKey) {
 
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
 export function renderMobileSessionsInto(container) {
-  var mobileDefaultVendor = resolvePreferredVendor(store.get('installedVendors') || []) || resolveDefaultVendor();
-  var mobileInstalled = store.get('installedVendors') || [];
-  var mobileDefaultState = store.get('defaultVendorState') || {};
-
-  var vendorList = document.createElement("div");
-  vendorList.className = "mobile-vendor-list hidden";
-  vendorList.id = "mobile-session-provider-menu";
-  var mobileVendorName = VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor;
-  var mobileCreateTitle = "Create a " + mobileVendorName + " session";
-  if (defaultVendorUnavailable(mobileInstalled)) mobileCreateTitle += " (saved default is unavailable; using installed priority)";
-  var controls;
-  controls = renderSessionCreationCta({
-    rowClass: "mobile-session-new-row",
-    createClass: "mobile-session-new mobile-session-new-main",
-    providerClass: "mobile-session-new mobile-session-new-provider",
-    iconClass: "mobile-session-new-icon",
-    vendorKey: mobileDefaultVendor,
-    vendorName: mobileVendorName,
-    vendorAvatar: VENDOR_AVATARS[mobileDefaultVendor] || VENDOR_AVATARS.claude,
-    createTitle: mobileCreateTitle,
-    providerTitle: "Switch AI provider (current: " + mobileVendorName + ")",
-    menuId: vendorList.id,
-    onCreate: function () { startNewSession(mobileDefaultVendor); closeMobileSheet(); },
-    onProvider: function () {
-      var opening = vendorList.classList.contains("hidden");
-      vendorList.classList.toggle("hidden", !opening);
-      controls.providerButton.classList.toggle("expanded", opening);
-      controls.providerButton.setAttribute("aria-expanded", opening ? "true" : "false");
-      if (opening) {
-        var first = vendorList.querySelector("button:not(:disabled)");
-        if (first) first.focus();
-      }
-    },
-  });
-  var newRow = controls.element;
-  vendorList.addEventListener("keydown", function (e) {
-    if (e.key !== "Escape") return;
-    e.preventDefault();
-    vendorList.classList.add("hidden");
-    controls.providerButton.classList.remove("expanded");
-    controls.providerButton.setAttribute("aria-expanded", "false");
-    controls.providerButton.focus();
-  });
-
-  if (defaultVendorUnavailable(mobileInstalled) && mobileDefaultState.preference) {
-    var mobileFallbackNote = document.createElement("div");
-    mobileFallbackNote.className = "mobile-session-new-preference-status mobile-session-new-fallback-note";
-    mobileFallbackNote.textContent = "Saved default " + (VENDOR_NAMES[mobileDefaultState.preference] || mobileDefaultState.preference) + " is unavailable. Using " + (VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor) + ".";
-  }
-
-  // Every known vendor is listed. Uninstalled ones stay visible but disabled,
-  // and tapping one opens the vendor's homepage.
-  for (var vi = 0; vi < VENDOR_ORDER.length; vi++) {
-    (function (vendor) {
-      var isInstalled = mobileInstalled.indexOf(vendor) !== -1;
-      var name = VENDOR_NAMES[vendor] || vendor;
-      var vendorRow = document.createElement("div");
-      vendorRow.className = "mobile-vendor-row";
-      var vBtn = document.createElement("button");
-      vBtn.className = "mobile-session-new mobile-session-new-vendor";
-      if (!isInstalled) vBtn.classList.add("disabled");
-      if (vendor === mobileDefaultVendor) vBtn.classList.add("active");
-      vBtn.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="mobile-session-new-icon" alt="">' +
-        '<span>' + (isInstalled ? "Create with " : "Learn about ") + name + '</span>' +
-        (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
-        (isInstalled ? "" : '<span class="mobile-vendor-note">Not installed</span>');
-      vBtn.addEventListener("click", function () {
-        if (!isInstalled) {
-          window.open(VENDOR_HOMEPAGES[vendor], "_blank", "noopener");
-          return;
-        }
-        vendorList.classList.add("hidden");
-        controls.providerButton.classList.remove("expanded");
-        controls.providerButton.setAttribute("aria-expanded", "false");
-        startNewSession(vendor);
-        closeMobileSheet();
-      });
-      vendorRow.appendChild(vBtn);
-      if (isInstalled) {
-        var defaultBtn = document.createElement("button");
-        defaultBtn.type = "button";
-        defaultBtn.className = "mobile-vendor-set-default";
-        defaultBtn.textContent = mobileDefaultState.saving ? "Saving…" : (vendor === mobileDefaultVendor && !defaultVendorUnavailable(mobileInstalled) ? "Default" : "Set default");
-        defaultBtn.disabled = mobileDefaultState.saving === true;
-        defaultBtn.setAttribute("aria-label", "Set " + name + " as default vendor");
-        defaultBtn.addEventListener("click", function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          saveDefaultVendor(vendor);
-        });
-        vendorRow.appendChild(defaultBtn);
-      }
-      vendorList.appendChild(vendorRow);
-    })(VENDOR_ORDER[vi]);
-  }
-
-  var automaticBtn = document.createElement("button");
-  automaticBtn.className = "mobile-session-new mobile-session-new-vendor mobile-session-new-automatic";
-  automaticBtn.type = "button";
-  automaticBtn.textContent = "Use automatic default";
-  automaticBtn.disabled = mobileDefaultState.saving === true;
-  automaticBtn.addEventListener("click", function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    saveDefaultVendor("");
-  });
-  vendorList.appendChild(automaticBtn);
-  if (mobileDefaultState.error) {
-    var mobileStatus = document.createElement("div");
-    mobileStatus.className = "mobile-session-new-preference-status";
-    mobileStatus.setAttribute("role", "alert");
-    mobileStatus.textContent = mobileDefaultState.error;
-    vendorList.appendChild(mobileStatus);
-  }
-
-  container.appendChild(newRow);
-  if (mobileFallbackNote) container.appendChild(mobileFallbackNote);
-  container.appendChild(vendorList);
-
   // Partition: loop sessions vs normal sessions (same logic as desktop renderSessionList)
   var sessions = getCachedSessions();
   var hierarchy = prepareSidebarHierarchy(sessions);
@@ -846,60 +739,21 @@ export function renderMobileSessionsInto(container) {
     items.push({ type: "loop", loopId: realLoopId, groupKey: gk, children: children, lastActivity: maxActivity });
   }
 
-  // Sort by lastActivity descending
-  items.sort(function (a, b) {
-    var aBookmarked = !!(a.type === "loop" || a.type === "orphan-workers" ? false : a.data && a.data.bookmarked);
-    var bBookmarked = !!(b.type === "loop" || b.type === "orphan-workers" ? false : b.data && b.data.bookmarked);
-    if (aBookmarked !== bBookmarked) return aBookmarked ? -1 : 1;
-    return (b.lastActivity || 0) - (a.lastActivity || 0);
-  });
-
-  var bookmarkedItems = [];
-  var regularItems = [];
-  for (var n = 0; n < items.length; n++) {
-    var item = items[n];
-    if ((item.type === "session" || item.type === "driver-hierarchy") && item.data && item.data.bookmarked) {
-      bookmarkedItems.push(item);
-    } else {
-      regularItems.push(item);
-    }
-  }
-
-  if (bookmarkedItems.length > 0) {
-    var bookmarkedHeader = document.createElement("div");
-    bookmarkedHeader.className = "mobile-sheet-group";
-    bookmarkedHeader.textContent = "Favorites";
-    container.appendChild(bookmarkedHeader);
-
-    for (var bi = 0; bi < bookmarkedItems.length; bi++) {
-      if (bookmarkedItems[bi].type === "driver-hierarchy") container.appendChild(renderMobileDriverHierarchy(bookmarkedItems[bi].root, createMobileSessionItem, refreshMobileChatSheet));
-      else container.appendChild(createMobileSessionItem(bookmarkedItems[bi].data));
-    }
-  }
-
-  var currentGroup = "";
-  for (var ri = 0; ri < regularItems.length; ri++) {
-    var item = regularItems[ri];
-    var group = getDateGroup(item.lastActivity || 0);
-    if (group !== currentGroup) {
-      currentGroup = group;
-      if (group !== "Today") {
-        var header = document.createElement("div");
-        header.className = "mobile-sheet-group";
-        header.textContent = group;
-        container.appendChild(header);
-      }
-    }
-    if (item.type === "loop") {
-      container.appendChild(createMobileLoopGroup(item.loopId, item.children, item.groupKey));
-    } else if (item.type === "driver-hierarchy") {
-      container.appendChild(renderMobileDriverHierarchy(item.root, createMobileSessionItem, refreshMobileChatSheet));
-    } else if (item.type === "orphan-workers") {
-      container.appendChild(renderMobileOrphanHierarchy(item.workers, createMobileSessionItem, refreshMobileChatSheet));
-    } else {
-      container.appendChild(createMobileSessionItem(item.data));
-    }
-  }
+  var matchIds = getListSearchMatchIds();
+  var layout = computeLayout(filterItemsBySearch(items, matchIds), matchIds !== null, "mobile");
+  var folderCtx = {
+    surface: "mobile",
+    searching: matchIds !== null,
+    renderItem: function (it) {
+      if (it.type === "loop") return createMobileLoopGroup(it.loopId, it.children, it.groupKey);
+      if (it.type === "driver-hierarchy") return renderMobileDriverHierarchy(it.root, createMobileSessionItem, refreshMobileChatSheet);
+      if (it.type === "orphan-workers") return renderMobileOrphanHierarchy(it.workers, createMobileSessionItem, refreshMobileChatSheet);
+      return createMobileSessionItem(it.data);
+    },
+  };
+  container.appendChild(renderFolderToolbar("mobile"));
+  container.appendChild(renderFavoritesSection(layout, folderCtx));
+  renderOrdinarySections(layout, folderCtx, container);
 }
 
 // Refresh mobile chat sheet when session data updates (called from renderSessionList)
@@ -944,6 +798,8 @@ export function refreshMobileChatSheet() {
   }
 
   // Re-render sessions for current context
+  captureFolderInputs();
+  captureFolderCollapseAnimations(sessionListEl);
   sessionListEl.innerHTML = "";
   renderMobileSessionsInto(sessionListEl);