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

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

@@ -2,7 +2,6 @@ import { appendGithubWork } from './session-github.js';
 // sidebar-sessions.js - Session list, search, presence, countdown, CLI picker
 // Extracted from sidebar.js (PR-35)
 
-import { avatarUrl, userAvatarUrl } from './avatar.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { openSearch as openSessionSearch } from './session-search.js';
@@ -13,15 +12,21 @@ import { dismissOverlayPanels, closeSidebar, updatePageTitle, spawnDustParticles
 import { showConfirm } from './app-misc.js';
 import { getUpcomingSchedules } from './scheduler.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
-import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
+import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { openGroup, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
-import { defaultVendorUnavailable, resolvePreferredVendor, saveDefaultVendor } from './default-vendor.js';
-import { openPairDialog } from './split-pair-ui.js';
-import { renderSessionCreationCta } from './session-creation-cta.js';
-import { describeSessionDelete, describeGroupDelete } from './session-delete-scope.js';
+import { resolvePreferredVendor } from './default-vendor.js';
+import {
+  canOrganizeSession, computeLayout, createStarButton, isFavoriteSession, openMoveToFolder, renderFavoritesSection,
+  renderOrdinarySections, setupFolderDrag, toggleFavorite
+} from './sidebar-session-folders-ui.js';
+import { renderFolderToolbar, captureFolderInputs, folderToolbarNeedsRender } from './session-folder-toolbar.js';
+import { captureFolderCollapseAnimations } from './session-folder-collapse.js';
+import { getListSearchQuery, getListSearchMatchIds, applyListSearchResults, filterItemsBySearch } from './session-list-search.js';
+import { expectCreatedSession } from './session-create.js';
+import { describeSessionDelete } from './session-delete-scope.js';
+import { renderSessionPresence, setSessionPresence } from './session-presence-ui.js';
 import {
-  hierarchyItemMatches,
   prepareSidebarHierarchy,
   renderDesktopDriverHierarchy,
   renderDesktopOrphanHierarchy
@@ -30,15 +35,9 @@ import {
 
 // --- Session state ---
 var cachedSessions = [];
-var searchQuery = "";
-var searchMatchIds = null; // null = no search, Set of matched session IDs
-var searchDebounce = null;
 var expandedLoopGroups = new Set();
 var expandedLoopRuns = new Set();
 
-// --- Session presence (multi-user: who is viewing which session) ---
-var sessionPresence = {}; // { sessionId: [{ id, displayName, avatarStyle, avatarSeed }] }
-
 // --- Countdown timer for upcoming schedules ---
 var countdownTimer = null;
 var countdownContainer = null;
@@ -47,146 +46,17 @@ var countdownContainer = null;
 var sessionCtxMenu = null;
 var sessionCtxMenuAnchor = null;
 var sessionCtxSessionId = null;
-var draggedSessionId = null;
-var draggedSessionBookmarked = false;
-var headerSearchOpen = false;
 var armedDeleteSessionId = null;
 var armedDeleteTimer = null;
 
 store.subscribe(function (state, previous) {
-  if (state.defaultVendorState !== previous.defaultVendorState || state.installedVendors !== previous.installedVendors) {
-    var reopenNewMenu = !!(sessionCtxMenu && sessionCtxMenuAnchor);
-    var sessionList = getSessionListEl();
-    if (reopenNewMenu) closeSessionCtxMenu();
-    if (sessionList) renderSessionList();
-    if (reopenNewMenu && sessionList) {
-      var freshAnchor = sessionList.querySelector(".session-top-action.split-provider");
-      if (freshAnchor) showNewSessionMenu(freshAnchor, resolveDefaultVendor());
-    }
-  }
+  if ((state.sessionFolders !== previous.sessionFolders || folderToolbarNeedsRender(state, previous)) && getSessionListEl()) renderSessionList(null);
 });
 
-function sendSessionBookmark(sessionId, bookmarked) {
-  if (getWs() && store.get('connected')) {
-    getWs().send(JSON.stringify({ type: "set_session_bookmark", sessionId: sessionId, bookmarked: !!bookmarked }));
-  }
-}
-
-function compareSessionListItems(a, b) {
-  var aData = a && (a.type === "session" || a.type === "driver-hierarchy") ? a.data : a;
-  var bData = b && (b.type === "session" || b.type === "driver-hierarchy") ? b.data : b;
-  var aBookmarked = !!(aData && aData.bookmarked);
-  var bBookmarked = !!(bData && bData.bookmarked);
-  if (aBookmarked !== bBookmarked) return aBookmarked ? -1 : 1;
-  if (aBookmarked && bBookmarked) {
-    var ao = aData && typeof aData.favoriteOrder === "number" ? aData.favoriteOrder : Number.MAX_SAFE_INTEGER;
-    var bo = bData && typeof bData.favoriteOrder === "number" ? bData.favoriteOrder : Number.MAX_SAFE_INTEGER;
-    if (ao !== bo) return ao - bo;
-  }
-  return (b.lastActivity || 0) - (a.lastActivity || 0);
-}
-
-function clearSessionDragIndicators() {
-  var listEl = getSessionListEl();
-  if (!listEl) return;
-  var active = listEl.querySelectorAll(".session-favorites-divider.drag-hover, .session-regular-drop.drag-hover, .session-item.dragging");
-  for (var i = 0; i < active.length; i++) {
-    active[i].classList.remove("drag-hover", "dragging");
-  }
-}
-
-function setupSessionDragHandlers(el, session) {
-  el.setAttribute("draggable", "true");
-
-  el.addEventListener("dragstart", function (e) {
-    draggedSessionId = session.id;
-    draggedSessionBookmarked = !!session.bookmarked;
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", String(session.id));
-
-    var ghost = document.createElement("div");
-    ghost.textContent = session.title || "New Session";
-    ghost.style.cssText = "position:fixed;left:-200px;top:-200px;max-width:220px;padding:8px 12px;border-radius:10px;" +
-      "background:var(--sidebar-active);color:var(--text);font-size:13px;font-weight:600;pointer-events:none;z-index:-1;";
-    document.body.appendChild(ghost);
-    e.dataTransfer.setDragImage(ghost, 18, 18);
-    setTimeout(function () { ghost.remove(); }, 0);
-
-    setTimeout(function () { el.classList.add("dragging"); }, 0);
-  });
-
-  el.addEventListener("dragend", function () {
-    clearSessionDragIndicators();
-    draggedSessionId = null;
-    draggedSessionBookmarked = false;
-  });
-
-  if (session.bookmarked) {
-    el.addEventListener("dragover", function (e) {
-      if (!draggedSessionId || draggedSessionId === session.id) return;
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "move";
-      var rect = el.getBoundingClientRect();
-      var insertBefore = e.clientY < rect.top + rect.height / 2;
-      el.classList.remove("drag-over-above", "drag-over-below");
-      el.classList.add(insertBefore ? "drag-over-above" : "drag-over-below");
-    });
-
-    el.addEventListener("dragleave", function () {
-      el.classList.remove("drag-over-above", "drag-over-below");
-    });
-
-    el.addEventListener("drop", function (e) {
-      if (!draggedSessionId || draggedSessionId === session.id) return;
-      e.preventDefault();
-      var rect = el.getBoundingClientRect();
-      var insertBefore = e.clientY < rect.top + rect.height / 2;
-      el.classList.remove("drag-over-above", "drag-over-below");
-      if (draggedSessionBookmarked) {
-        if (getWs() && store.get('connected')) {
-          getWs().send(JSON.stringify({
-            type: "reorder_session_bookmarks",
-            sourceId: draggedSessionId,
-            targetId: session.id,
-            insertBefore: insertBefore,
-          }));
-        }
-      } else {
-        sendSessionBookmark(draggedSessionId, true);
-      }
-    });
-  }
-}
-
-function setupBookmarkDropTarget(el, bookmarked) {
-  el.addEventListener("dragover", function (e) {
-    if (!draggedSessionId) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    el.classList.add("drag-hover");
-  });
-
-  el.addEventListener("dragleave", function () {
-    el.classList.remove("drag-hover");
-  });
-
-  el.addEventListener("drop", function (e) {
-    if (!draggedSessionId) return;
-    e.preventDefault();
-    el.classList.remove("drag-hover");
-    if (draggedSessionBookmarked !== !!bookmarked) {
-      sendSessionBookmark(draggedSessionId, !!bookmarked);
-    }
-    clearSessionDragIndicators();
-    draggedSessionId = null;
-    draggedSessionBookmarked = false;
-  });
-}
-
 function spawnSessionDeleteParticles(sessionId) {
   if (!spawnDustParticles) return;
   setTimeout(function () {
-    var el = getSessionListEl().querySelector('[data-session-id="' + sessionId + '"]');
+    var el = visibleSessionRow(sessionId) || getSessionListEl().querySelector('[data-session-id="' + sessionId + '"]');
     if (!el) return;
     var rect = el.getBoundingClientRect();
     spawnDustParticles(rect.left + rect.width / 2, rect.top + rect.height / 2);
@@ -209,14 +79,15 @@ function clearArmedSessionDelete() {
     armedDeleteTimer = null;
   }
   if (armedDeleteSessionId !== null) {
-    var prevBtn = getSessionListEl() ? getSessionListEl().querySelector('.session-close-btn[data-session-id="' + armedDeleteSessionId + '"]') : null;
-    if (prevBtn) {
-      prevBtn.classList.remove("armed");
-      prevBtn.innerHTML = iconHtml("x");
-      prevBtn.title = "Delete session";
-      prevBtn.setAttribute("aria-label", "Delete session");
-      refreshIcons();
+    // A session can appear twice (its folder and Favorites): reset every copy.
+    var prevBtns = getSessionListEl() ? getSessionListEl().querySelectorAll('.session-close-btn[data-session-id="' + armedDeleteSessionId + '"]') : [];
+    for (var pb = 0; pb < prevBtns.length; pb++) {
+      prevBtns[pb].classList.remove("armed");
+      prevBtns[pb].innerHTML = iconHtml("x");
+      prevBtns[pb].title = "Delete session";
+      prevBtns[pb].setAttribute("aria-label", "Delete session");
     }
+    if (prevBtns.length) refreshIcons();
   }
   armedDeleteSessionId = null;
 }
@@ -242,70 +113,6 @@ function deleteSessionImmediately(session) {
   }
 }
 
-function collectItemSessionIds(item) {
-  if (!item) return [];
-  if (item.type === "session" && item.data && typeof item.data.id === "number") {
-    if (!isSessionVisibleBySearch(item.data.id)) return [];
-    return [item.data.id];
-  }
-  if (item.type === "loop" && Array.isArray(item.children)) {
-    var ids = [];
-    for (var i = 0; i < item.children.length; i++) {
-      if (typeof item.children[i].id === "number" && isSessionVisibleBySearch(item.children[i].id)) {
-        ids.push(item.children[i].id);
-      }
-    }
-    return ids;
-  }
-  if (item.type === "split-group" && Array.isArray(item.members)) {
-    return item.members.map(function (session) { return session.id; });
-  }
-  if (item.type === "driver-hierarchy" && item.root) {
-    var hierarchyIds = [item.root.driver.id];
-    for (var j = 0; j < item.root.workers.length; j++) hierarchyIds.push(item.root.workers[j].id);
-    return hierarchyIds;
-  }
-  if (item.type === "orphan-workers" && Array.isArray(item.workers)) {
-    return item.workers.map(function (session) { return session.id; });
-  }
-  return [];
-}
-
-function confirmDeleteSessionGroup(groupLabel, sessionIds) {
-  if (!Array.isArray(sessionIds) || sessionIds.length === 0) return;
-  showConfirm(describeGroupDelete(groupLabel, sessionIds, cachedSessions).message, function () {
-    var ws = getWs();
-    if (ws && store.get('connected')) {
-      ws.send(JSON.stringify({ type: "bulk_delete_sessions", sessionIds: sessionIds }));
-    }
-  });
-}
-
-function createSessionGroupHeader(group, sessionIds) {
-  var header = document.createElement("div");
-  header.className = "session-group-header";
-
-  var label = document.createElement("span");
-  label.className = "session-group-header-label";
-  label.textContent = group;
-  header.appendChild(label);
-
-  if ((!store.get('permissions') || store.get('permissions').sessionDelete !== false) && Array.isArray(sessionIds) && sessionIds.length > 0) {
-    var clearBtn = document.createElement("button");
-    clearBtn.className = "session-group-clear-btn";
-    clearBtn.type = "button";
-    clearBtn.textContent = "Clear";
-    clearBtn.addEventListener("click", function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      confirmDeleteSessionGroup(group, sessionIds);
-    });
-    header.appendChild(clearBtn);
-  }
-
-  return header;
-}
-
 function appendSessionCloseButton(el, session) {
   if (store.get('permissions') && store.get('permissions').sessionDelete === false) return;
 
@@ -348,13 +155,22 @@ export function resolveDefaultVendor() {
 // Otherwise vendorSelectionLocked from the previous session can reject the
 // new config_state and leave a Kiro/Codex session rendered as Claude.
 export function startNewSession(vendor, extra) {
-  if (!getWs() || !store.get('connected')) return;
+  if (!getWs() || !store.get('connected')) return false;
   var payload = { type: "new_session", vendor: vendor };
   if (extra) {
     var keys = Object.keys(extra);
     for (var i = 0; i < keys.length; i++) payload[keys[i]] = extra[keys[i]];
   }
-  getWs().send(JSON.stringify(payload));
+  try {
+    getWs().send(JSON.stringify(payload));
+  } catch (e) {
+    return false;
+  }
+  // The destination (Unfiled unless a folder was chosen) is expanded and the
+  // new session revealed once it becomes active.
+  // A creation that carries a request id is revealed from its acknowledgement,
+  // which knows where the session was really filed.
+  if (!(extra && extra.requestId)) expectCreatedSession(extra && extra.folderId ? extra.folderId : "unfiled");
   store.set({
     lastVendor: vendor,
     currentVendor: vendor,
@@ -363,273 +179,9 @@ export function startNewSession(vendor, extra) {
     vendorSelectionLocked: true,
     sessionVendorBound: true,
   });
+  return true;
 }
 
-export function renderSessionTopActions() {
-  var wrap = document.createElement("div");
-  wrap.className = "session-top-actions";
-
-  var defaultVendor = resolveDefaultVendor();
-  var vendorName = VENDOR_NAMES[defaultVendor] || defaultVendor;
-  var createTitle = "Create a " + vendorName + " session";
-  if (defaultVendorUnavailable(store.get('installedVendors') || [])) createTitle += " (saved default is unavailable; using installed priority)";
-  var controls;
-  controls = renderSessionCreationCta({
-    rowClass: "session-top-action-split",
-    createClass: "session-top-action split-main",
-    providerClass: "session-top-action split-provider",
-    iconClass: "session-top-action-icon",
-    vendorKey: defaultVendor,
-    vendorName: vendorName,
-    vendorAvatar: VENDOR_AVATARS[defaultVendor] || VENDOR_AVATARS.claude,
-    createTitle: createTitle,
-    providerTitle: "Switch AI provider (current: " + vendorName + ")",
-    menuId: "session-new-menu",
-    onCreate: function () { startNewSession(defaultVendor); },
-    onProvider: function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (sessionCtxMenu) { closeSessionCtxMenu(); return; }
-      showNewSessionMenu(controls.providerButton, defaultVendor);
-    },
-  });
-  wrap.appendChild(controls.element);
-  return wrap;
-}
-
-// Provider disclosure anchored to the grouped provider control. Reuses the
-// session-ctx-menu element/var so the global document click handler closes it.
-function showNewSessionMenu(anchorBtn, defaultVendor) {
-  closeSessionCtxMenu();
-
-  var menu = document.createElement("div");
-  menu.className = "session-ctx-menu session-new-menu";
-  menu.id = "session-new-menu";
-  var installed = store.get('installedVendors') || [];
-  var defaultVendorState = store.get('defaultVendorState') || {};
-  sessionCtxMenuAnchor = anchorBtn;
-  anchorBtn.setAttribute("aria-expanded", "true");
-
-  if (defaultVendorUnavailable(installed) && defaultVendorState.preference) {
-    var fallbackNote = document.createElement("div");
-    fallbackNote.className = "session-new-preference-status session-new-fallback-note";
-    fallbackNote.textContent = "Saved default " + (VENDOR_NAMES[defaultVendorState.preference] || defaultVendorState.preference) + " is unavailable. Using " + (VENDOR_NAMES[defaultVendor] || defaultVendor) + ".";
-    menu.appendChild(fallbackNote);
-  }
-
-  // Every known vendor is listed. Uninstalled ones stay visible but disabled,
-  // and clicking one opens the vendor's homepage so the user can install it.
-  for (var i = 0; i < VENDOR_ORDER.length; i++) {
-    (function (vendor) {
-      var isInstalled = installed.indexOf(vendor) !== -1;
-      var name = VENDOR_NAMES[vendor] || vendor;
-      var row = document.createElement("div");
-      row.className = "session-new-vendor-row";
-      var item = document.createElement("button");
-      item.className = "session-ctx-item session-new-vendor";
-      if (!isInstalled) item.classList.add("disabled");
-      if (vendor === defaultVendor) item.classList.add("active");
-      item.type = "button";
-      item.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="session-top-action-icon" alt="">' +
-        '<span class="session-new-vendor-name">' + (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="session-new-vendor-note">Not installed</span>' + iconHtml("external-link"));
-      item.title = isInstalled
-        ? "New " + name + " session"
-        : name + " is not installed - open " + VENDOR_HOMEPAGES[vendor];
-      if (isExperimentalVendor(vendor)) item.title += " · Experimental integration; not yet validated through direct use testing";
-      item.addEventListener("click", function (e) {
-        e.stopPropagation();
-        closeSessionCtxMenu();
-        if (!isInstalled) {
-          window.open(VENDOR_HOMEPAGES[vendor], "_blank", "noopener");
-          return;
-        }
-        startNewSession(vendor);
-      });
-      row.appendChild(item);
-      if (isInstalled) {
-        var defaultBtn = document.createElement("button");
-        defaultBtn.type = "button";
-        defaultBtn.className = "session-new-set-default";
-        defaultBtn.textContent = defaultVendorState.saving ? "Saving…" : (vendor === defaultVendor && !defaultVendorUnavailable(installed) ? "Default" : "Set default");
-        defaultBtn.disabled = defaultVendorState.saving === true;
-        defaultBtn.setAttribute("aria-label", "Set " + name + " as default vendor");
-        defaultBtn.title = "Use " + name + " for New session by default";
-        defaultBtn.addEventListener("click", function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          saveDefaultVendor(vendor);
-        });
-        row.appendChild(defaultBtn);
-      }
-      menu.appendChild(row);
-    })(VENDOR_ORDER[i]);
-  }
-
-  var automatic = document.createElement("button");
-  automatic.className = "session-ctx-item session-new-automatic";
-  automatic.type = "button";
-  automatic.textContent = "Use automatic default";
-  automatic.disabled = defaultVendorState.saving === true;
-  automatic.title = "Use Clay's installed-vendor priority";
-  automatic.addEventListener("click", function (e) {
-    e.stopPropagation();
-    closeSessionCtxMenu();
-    saveDefaultVendor("");
-  });
-  menu.appendChild(automatic);
-  if (defaultVendorState.error) {
-    var status = document.createElement("div");
-    status.className = "session-new-preference-status";
-    status.setAttribute("role", "alert");
-    status.textContent = defaultVendorState.error;
-    menu.appendChild(status);
-  }
-
-  if (installed.length > 0) {
-    var pairSep = document.createElement("div");
-    pairSep.className = "session-ctx-sep";
-    menu.appendChild(pairSep);
-    var pairItem = document.createElement("button");
-    pairItem.className = "session-ctx-item";
-    pairItem.type = "button";
-    pairItem.innerHTML = iconHtml("panel-left-close") + " <span>Pair session…</span>";
-    pairItem.title = "Create a Driver and Worker in a split view";
-    pairItem.addEventListener("click", function (e) {
-      e.stopPropagation();
-      closeSessionCtxMenu();
-      openPairDialog();
-    });
-    menu.appendChild(pairItem);
-  }
-
-  // Claude-only launch mode: a bare TUI shell with permission prompts off.
-  // Hidden in GUI mode (the default) because the item only ever produces a
-  // terminal session, which contradicts what the rest of the menu creates.
-  if (installed.indexOf("claude") !== -1 && store.get('claudeOpenMode') === "tui") {
-    var sep = document.createElement("div");
-    sep.className = "session-ctx-sep";
-    menu.appendChild(sep);
-
-    var skipItem = document.createElement("button");
-    skipItem.className = "session-ctx-item";
-    skipItem.type = "button";
-    skipItem.innerHTML = iconHtml("shield-off") + " <span>Skip Permissions (TUI)</span>";
-    skipItem.title = "Start a terminal session with --dangerously-skip-permissions";
-    skipItem.addEventListener("click", function (e) {
-      e.stopPropagation();
-      closeSessionCtxMenu();
-      startNewSession("claude", { mode: "tui", dangerouslySkipPermissions: true });
-    });
-    menu.appendChild(skipItem);
-  }
-
-  document.body.appendChild(menu);
-  sessionCtxMenu = menu;
-  menu.addEventListener("keydown", function (e) {
-    if (e.key !== "Escape") return;
-    e.preventDefault();
-    e.stopPropagation();
-    closeSessionCtxMenu(true);
-  });
-  refreshIcons();
-
-  requestAnimationFrame(function () {
-    var btnRect = anchorBtn.getBoundingClientRect();
-    menu.style.position = "fixed";
-    menu.style.top = (btnRect.bottom + 2) + "px";
-    menu.style.left = btnRect.left + "px";
-    menu.style.right = "auto";
-    var menuRect = menu.getBoundingClientRect();
-    if (menuRect.right > window.innerWidth - 8) {
-      menu.style.left = "auto";
-      menu.style.right = (window.innerWidth - btnRect.right) + "px";
-    }
-    if (menuRect.bottom > window.innerHeight - 8) {
-      menu.style.top = (btnRect.top - menuRect.height - 2) + "px";
-    }
-    var firstMenuItem = menu.querySelector("button:not(:disabled)");
-    if (firstMenuItem) firstMenuItem.focus();
-  });
-}
-
-function runSessionSearch(query) {
-  var normalizedQuery = query || "";
-  var trimmedQuery = normalizedQuery.trim();
-  searchQuery = normalizedQuery;
-  if (searchDebounce) {
-    clearTimeout(searchDebounce);
-    searchDebounce = null;
-  }
-  if (!trimmedQuery) {
-    searchMatchIds = null;
-    renderSessionList(null);
-    return;
-  }
-  searchDebounce = setTimeout(function () {
-    if (getWs() && store.get('connected')) {
-      getWs().send(JSON.stringify({ type: "search_sessions", query: searchQuery }));
-    }
-  }, 200);
-}
-
-function syncHeaderSearchUi() {
-  var searchInline = document.getElementById("session-header-search-inline");
-  var searchInput = document.getElementById("session-header-search-input");
-  var searchClear = document.getElementById("session-header-search-clear");
-  var searchBtn = document.getElementById("session-header-search-btn");
-  var filterCount = document.getElementById("session-filter-count");
-  var isOpen = headerSearchOpen || !!searchQuery;
-  if (!searchInline || !searchInput || !searchClear || !searchBtn || !filterCount) return;
-  searchInline.classList.toggle("hidden", !isOpen);
-  searchBtn.classList.toggle("active", isOpen);
-  if (searchInput.value !== searchQuery) {
-    searchInput.value = searchQuery;
-  }
-  searchClear.classList.toggle("hidden", !searchQuery);
-  if (!searchQuery || searchMatchIds === null) {
-    filterCount.classList.add("hidden");
-    filterCount.textContent = "";
-  } else {
-    filterCount.classList.remove("hidden");
-    filterCount.textContent = String(searchMatchIds.size);
-  }
-}
-
-function openHeaderSearch() {
-  headerSearchOpen = true;
-  syncHeaderSearchUi();
-  var searchInput = document.getElementById("session-header-search-input");
-  if (searchInput) {
-    requestAnimationFrame(function () {
-      searchInput.focus();
-      searchInput.select();
-    });
-  }
-}
-
-function closeHeaderSearch() {
-  headerSearchOpen = false;
-  syncHeaderSearchUi();
-}
-
-function clearSessionSearch(shouldBlur, input, shouldClose) {
-  if (searchDebounce) {
-    clearTimeout(searchDebounce);
-    searchDebounce = null;
-  }
-  searchQuery = "";
-  searchMatchIds = null;
-  if (shouldClose) {
-    headerSearchOpen = false;
-  }
-  syncHeaderSearchUi();
-  renderSessionList(null);
-  if (shouldBlur && input) {
-    input.blur();
-  }
-}
 
 export function initSidebarSessions() {
 
@@ -638,63 +190,12 @@ export function initSidebarSessions() {
     clearArmedSessionDelete();
   });
 
-  var searchBtn = document.getElementById("session-header-search-btn");
-  var searchInput = document.getElementById("session-header-search-input");
-  var searchClear = document.getElementById("session-header-search-clear");
-  var searchInline = document.getElementById("session-header-search-inline");
-
-  if (searchBtn && searchInput && searchClear && searchInline) {
-    searchBtn.addEventListener("click", function () {
-      if (!headerSearchOpen && !searchQuery) {
-        openHeaderSearch();
-        return;
-      }
-      if (!searchQuery) {
-        closeHeaderSearch();
-        return;
-      }
-      searchInput.focus();
-      searchInput.select();
-    });
-
-    searchInput.addEventListener("input", function () {
-      runSessionSearch(searchInput.value);
-      syncHeaderSearchUi();
-    });
-
-    searchInput.addEventListener("keydown", function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        if (searchInput.value.trim()) {
-          clearSessionSearch(false, searchInput, false);
-          return;
-        }
-        clearSessionSearch(true, searchInput, true);
-      }
-    });
-
-    searchInput.addEventListener("blur", function () {
-      setTimeout(function () {
-        if (!searchQuery && document.activeElement !== searchBtn && document.activeElement !== searchClear) {
-          closeHeaderSearch();
-        }
-      }, 0);
-    });
-
-    searchClear.addEventListener("click", function () {
-      clearSessionSearch(false, searchInput, false);
-      searchInput.focus();
-    });
-
-    syncHeaderSearchUi();
-  }
-
-  // The "New session" split button renders from lastVendor + installedVendors,
-  // so a late-arriving vendor detection or a vendor switch has to repaint it.
+  // Folder form, folder state and the creation reveal repaint through their own
+  // subscriptions; only structural changes to the open form need a list render.
   store.subscribe(function (state, prev) {
-    if (state.lastVendor !== prev.lastVendor || state.installedVendors !== prev.installedVendors) {
-      renderSessionList(null);
-    }
+    var a = state.sessionCreate;
+    var b = prev.sessionCreate;
+    if ((!a !== !b || (a && b && a.folderId !== b.folderId)) && getSessionListEl()) renderSessionList(null);
     if (state.splitPanes !== prev.splitPanes) renderSessionList(null);
   });
 
@@ -710,11 +211,11 @@ export function getCachedSessions() {
 }
 
 export function getSearchQuery() {
-  return searchQuery;
+  return getListSearchQuery();
 }
 
 export function getSearchMatchIds() {
-  return searchMatchIds;
+  return getListSearchMatchIds();
 }
 
 export function getExpandedLoopGroups() {
@@ -746,15 +247,28 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
   var menu = document.createElement("div");
   menu.className = "session-ctx-menu";
 
-  var bookmarkItem = document.createElement("button");
-  bookmarkItem.className = "session-ctx-item";
-  bookmarkItem.innerHTML = iconHtml(sessionData && sessionData.bookmarked ? "arrow-down" : "arrow-up") + " <span>" + (sessionData && sessionData.bookmarked ? "Remove from Favorites" : "Add to Favorites") + "</span>";
-  bookmarkItem.addEventListener("click", function (e) {
-    e.stopPropagation();
-    closeSessionCtxMenu();
-    sendSessionBookmark(sessionId, !(sessionData && sessionData.bookmarked));
-  });
-  menu.appendChild(bookmarkItem);
+  if (canOrganizeSession(sessionData)) {
+    var isFavorite = isFavoriteSession(sessionData);
+    var bookmarkItem = document.createElement("button");
+    bookmarkItem.className = "session-ctx-item";
+    bookmarkItem.innerHTML = iconHtml(isFavorite ? "star-off" : "star") + " <span>" + (isFavorite ? "Remove from Favorites" : "Add to Favorites") + "</span>";
+    bookmarkItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeSessionCtxMenu();
+      toggleFavorite(sessionData);
+    });
+    menu.appendChild(bookmarkItem);
+
+    var moveItem = document.createElement("button");
+    moveItem.className = "session-ctx-item";
+    moveItem.innerHTML = iconHtml("folder-input") + " <span>Move to folder</span>";
+    moveItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeSessionCtxMenu();
+      openMoveToFolder(sessionData);
+    });
+    menu.appendChild(moveItem);
+  }
 
   var renameItem = document.createElement("button");
   renameItem.className = "session-ctx-item";
@@ -816,6 +330,10 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
   });
 }
 
+export function openSessionContextMenu(anchor, session) {
+  showSessionCtxMenu(anchor, session.id, session.title, session.cliSessionId, session);
+}
+
 function showSplitGroupCtxMenu(anchor, group) {
   closeSessionCtxMenu();
   var menu = document.createElement("div");
@@ -909,8 +427,16 @@ function showLoopCtxMenu(anchorBtn, loopId, loopName, childCount) {
 
 // --- Inline rename ---
 
+// A session can be on screen twice (its folder and Favorites); work on the copy
+// the user can actually see.
+function visibleSessionRow(sessionId) {
+  var rows = getSessionListEl().querySelectorAll('.session-item[data-session-id="' + sessionId + '"]');
+  for (var i = 0; i < rows.length; i++) if (rows[i].getClientRects().length) return rows[i];
+  return rows[0] || null;
+}
+
 function startInlineRename(sessionId, currentTitle) {
-  var el = getSessionListEl().querySelector('.session-item[data-session-id="' + sessionId + '"]');
+  var el = visibleSessionRow(sessionId);
   if (!el) return;
   var textSpan = el.querySelector(".session-item-text");
   if (!textSpan) return;
@@ -1018,19 +544,7 @@ function startLoopInlineRename(loopId, currentName) {
   input.addEventListener("click", function (e) { e.stopPropagation(); });
 }
 
-// --- Date grouping / highlighting ---
-
-export function getDateGroup(ts) {
-  var now = new Date();
-  var d = new Date(ts);
-  var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  var yesterday = new Date(today.getTime() - 86400000);
-  var weekAgo = new Date(today.getTime() - 7 * 86400000);
-  if (d >= today) return "Today";
-  if (d >= yesterday) return "Yesterday";
-  if (d >= weekAgo) return "This Week";
-  return "Older";
-}
+// --- Highlighting ---
 
 export function highlightMatch(text, query) {
   if (!query) return escapeHtml(text);
@@ -1045,15 +559,15 @@ export function highlightMatch(text, query) {
 }
 
 function isSessionVisibleBySearch(sessionId) {
-  if (searchMatchIds === null) return true;
-  return searchMatchIds.has(sessionId);
+  if (getListSearchMatchIds() === null) return true;
+  return getListSearchMatchIds().has(sessionId);
 }
 
 // --- Loop child / run / group rendering ---
 
 function renderLoopChild(s) {
   var el = document.createElement("div");
-  var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
+  var isMatch = getListSearchMatchIds() !== null && getListSearchMatchIds().has(s.id);
   el.className = "session-loop-child" + (s.active ? " active" : "") + (isMatch ? " search-match" : "");
   el.dataset.sessionId = s.id;
 
@@ -1092,7 +606,7 @@ function renderLoopChild(s) {
 
 function renderLoopGroup(loopId, children, groupKey) {
   var visibleChildren = children;
-  if (searchMatchIds !== null) {
+  if (getListSearchMatchIds() !== null) {
     visibleChildren = [];
     for (var vi = 0; vi < children.length; vi++) {
       if (isSessionVisibleBySearch(children[vi].id)) {
@@ -1335,7 +849,7 @@ function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
 function renderSessionItem(s, options) {
   var itemOptions = options || {};
   var el = document.createElement("div");
-  var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
+  var isMatch = getListSearchMatchIds() !== null && getListSearchMatchIds().has(s.id);
   el.className = "session-item" + (s.active ? " active" : "") + (isMatch ? " search-match" : "");
   if (itemOptions.worker) el.classList.add("session-worker-item");
   el.dataset.sessionId = s.id;
@@ -1365,7 +879,7 @@ function renderSessionItem(s, options) {
   if (store.get('isMultiUserMode') && s.sessionVisibility === "shared") {
     textHtml += '<span class="session-shared-icon" title="Shared session" aria-label="Shared session">' + iconHtml("users") + '</span>';
   }
-  textHtml += highlightMatch(s.title || "New Session", searchQuery);
+  textHtml += '<span class="session-item-title">' + highlightMatch(s.title || "New Session", getListSearchQuery()) + '</span>';
   textSpan.innerHTML = textHtml;
   el.appendChild(textSpan);
   appendGithubWork(el, s, textSpan);
@@ -1403,12 +917,19 @@ function renderSessionItem(s, options) {
     unreadBadge.classList.add("has-unread");
   }
   el.appendChild(unreadBadge);
-  appendSessionCloseButton(el, s);
+  var actions = document.createElement("span");
+  actions.className = "session-row-actions";
+  if (!itemOptions.worker && canOrganizeSession(s)) {
+    actions.appendChild(createStarButton(s));
+    if (isFavoriteSession(s)) el.classList.add("is-favorite");
+  }
+  appendSessionCloseButton(actions, s);
+  if (actions.childNodes.length) el.appendChild(actions);
 
   el.addEventListener("click", (function (id) {
     return function () {
       if (getWs() && store.get('connected')) {
-        var pendingQuery = searchQuery || "";
+        var pendingQuery = getListSearchQuery() || "";
         getWs().send(JSON.stringify({ type: "switch_session", id: id }));
         dismissOverlayPanels();
         closeSidebar();
@@ -1420,8 +941,8 @@ function renderSessionItem(s, options) {
   })(s.id));
 
   // Presence avatars (multi-user)
-  renderPresenceAvatars(el, String(s.id));
-  if (!itemOptions.worker) setupSessionDragHandlers(el, s);
+  renderSessionPresence(el, String(s.id));
+  if (!itemOptions.worker) setupFolderDrag(el, s);
 
   return el;
 }
@@ -1450,7 +971,7 @@ function renderSplitGroupItem(group, members) {
   }
   if (splitProcessing) html += '<span class="session-processing"></span>';
   if (splitBackgroundTaskCount) html += '<span class="session-background-task-count">' + splitBackgroundTaskCount + '</span>';
-  html += '<span class="split-group-name">' + highlightMatch(group.name || "Split", searchQuery) + "</span>";
+  html += '<span class="split-group-name">' + highlightMatch(group.name || "Split", getListSearchQuery()) + "</span>";
   text.innerHTML = html;
   el.appendChild(text);
 
@@ -1502,6 +1023,11 @@ export function renderSessionList(sessions) {
     cachedSessions = sessions;
   }
 
+  // Remember the inline folder draft before either surface is rebuilt: the mobile
+  // refresh below builds a fresh row whose queued focus must not be re-captured.
+  captureFolderInputs();
+  captureFolderCollapseAnimations(document);
+
   // If mobile chat sheet is open, refresh it
   if (refreshMobileChatSheet) refreshMobileChatSheet();
 
@@ -1584,94 +1110,38 @@ export function renderSessionList(sessions) {
     items.push({ type: "loop", loopId: realLoopId, groupKey: gk, children: children, lastActivity: maxActivity });
   }
 
-  // Sort by lastActivity descending
-  items.sort(compareSessionListItems);
-
-  var bookmarkedItems = [];
-  var regularItems = [];
-  for (var n = 0; n < items.length; n++) {
-    var item = items[n];
-    if (item.type === "session" && item.data && !isSessionVisibleBySearch(item.data.id)) {
-      continue;
-    }
-    if ((item.type === "driver-hierarchy" || item.type === "orphan-workers") && !hierarchyItemMatches(item, searchMatchIds)) continue;
-    if (item.type === "split-group" && searchMatchIds !== null) {
-      var splitSearchMatch = false;
-      for (var splitSearchIndex = 0; splitSearchIndex < item.members.length; splitSearchIndex++) {
-        if (searchMatchIds.has(item.members[splitSearchIndex].id)) splitSearchMatch = true;
-      }
-      if (!splitSearchMatch) continue;
-    }
-    if ((item.type === "session" || item.type === "driver-hierarchy") && item.data && item.data.bookmarked) {
-      bookmarkedItems.push(item);
-    } else {
-      regularItems.push(item);
-    }
-  }
-
-  var favoritesContainer = document.createElement("div");
-  favoritesContainer.className = "session-favorites-section";
-  setupBookmarkDropTarget(favoritesContainer, true);
-  if (bookmarkedItems.length === 0) {
-    var emptyHint = document.createElement("div");
-    emptyHint.className = "session-favorites-empty";
-    emptyHint.textContent = "Drag and drop sessions here to add favorites.";
-    favoritesContainer.appendChild(emptyHint);
-  }
-  for (var bi = 0; bi < bookmarkedItems.length; bi++) {
-    if (bookmarkedItems[bi].type === "driver-hierarchy") favoritesContainer.appendChild(renderDesktopDriverHierarchy(bookmarkedItems[bi].root, renderSessionItem, function () { renderSessionList(null); }, searchMatchIds));
-    else favoritesContainer.appendChild(renderSessionItem(bookmarkedItems[bi].data));
-  }
+  var matchIds = getListSearchMatchIds();
+  var visibleItems = filterItemsBySearch(items, matchIds);
+
+  var rerender = function () { renderSessionList(null); };
+  var layout = computeLayout(visibleItems, matchIds !== null, "desktop");
+  var folderCtx = {
+    surface: "desktop",
+    searching: matchIds !== null,
+    sessions: cachedSessions,
+    renderItem: function (it) {
+      if (it.type === "loop") return renderLoopGroup(it.loopId, it.children, it.groupKey) || document.createElement("div");
+      if (it.type === "split-group") return renderSplitGroupItem(it.group, it.members);
+      if (it.type === "driver-hierarchy") return renderDesktopDriverHierarchy(it.root, renderSessionItem, rerender, matchIds);
+      if (it.type === "orphan-workers") return renderDesktopOrphanHierarchy(it.workers, renderSessionItem, rerender, matchIds);
+      return renderSessionItem(it.data);
+    },
+  };
 
-  var divider = document.createElement("div");
-  divider.className = "session-favorites-divider";
+  // The folder toolbar sits above one continuous list: Favorites first, then
+  // custom folders, then Unfiled. Each header has its own New session button.
+  var topActions = document.createElement("div");
+  topActions.className = "session-list-sticky-top";
+  topActions.appendChild(renderFolderToolbar("desktop"));
+  getSessionListEl().appendChild(topActions);
 
   var regularContainer = document.createElement("div");
   regularContainer.className = "session-regular-drop";
-  setupBookmarkDropTarget(regularContainer, false);
-  var stickyTop = document.createElement("div");
-  stickyTop.className = "session-list-sticky-top";
-  stickyTop.appendChild(favoritesContainer);
-  stickyTop.appendChild(divider);
-  stickyTop.appendChild(renderSessionTopActions());
-  getSessionListEl().appendChild(stickyTop);
-
-  var currentGroup = "";
-  var currentGroupIds = [];
-  for (var ri = 0; ri < regularItems.length; ri++) {
-    var item = regularItems[ri];
-    var group = getDateGroup(item.lastActivity || 0);
-    if (group !== currentGroup) {
-      currentGroup = group;
-      currentGroupIds = [];
-      for (var gi = ri; gi < regularItems.length; gi++) {
-        if (getDateGroup(regularItems[gi].lastActivity || 0) !== group) break;
-        var groupIds = collectItemSessionIds(regularItems[gi]);
-        for (var gj = 0; gj < groupIds.length; gj++) currentGroupIds.push(groupIds[gj]);
-      }
-      if (group !== "Today") {
-        regularContainer.appendChild(createSessionGroupHeader(group, currentGroupIds));
-      }
-    }
-    if (item.type === "loop") {
-      var loopEl = renderLoopGroup(item.loopId, item.children, item.groupKey);
-      if (loopEl) {
-        regularContainer.appendChild(loopEl);
-      }
-    } else if (item.type === "split-group") {
-      regularContainer.appendChild(renderSplitGroupItem(item.group, item.members));
-    } else if (item.type === "driver-hierarchy") {
-      regularContainer.appendChild(renderDesktopDriverHierarchy(item.root, renderSessionItem, function () { renderSessionList(null); }, searchMatchIds));
-    } else if (item.type === "orphan-workers") {
-      regularContainer.appendChild(renderDesktopOrphanHierarchy(item.workers, renderSessionItem, function () { renderSessionList(null); }, searchMatchIds));
-    } else {
-      regularContainer.appendChild(renderSessionItem(item.data));
-    }
-  }
+  regularContainer.appendChild(renderFavoritesSection(layout, folderCtx));
+  renderOrdinarySections(layout, folderCtx, regularContainer);
   getSessionListEl().appendChild(regularContainer);
   refreshIcons();
   if (updatePageTitle) updatePageTitle();
-  syncHeaderSearchUi();
   // Recorded from the sessions actually rendered, so a null-argument re-render
   // driven by other state refreshes the fingerprint rather than stranding it.
   lastRenderFingerprint = sessionRenderFingerprint(cachedSessions);
@@ -1680,68 +1150,19 @@ export function renderSessionList(sessions) {
 // --- Search results ---
 
 export function handleSearchResults(msg) {
-  if (msg.query !== searchQuery) return; // stale response
-  var ids = new Set();
-  for (var i = 0; i < msg.results.length; i++) {
-    ids.add(msg.results[i].id);
-  }
-  searchMatchIds = ids;
-  renderSessionList(null);
+  applyListSearchResults(msg);
 }
 
 // --- Session presence ---
 
 export function updateSessionPresence(presence) {
-  sessionPresence = presence;
+  setSessionPresence(presence);
   // Update presence avatars on existing session items without full re-render
-  var items = getSessionListEl().querySelectorAll("[data-session-id]");
+  var items = getSessionListEl().querySelectorAll(".session-item[data-session-id]");
   for (var i = 0; i < items.length; i++) {
-    renderPresenceAvatars(items[i], items[i].dataset.sessionId);
-  }
-}
-
-function presenceAvatarUrl(userOrStyle, seed) {
-  if (userOrStyle && typeof userOrStyle === "object") return userAvatarUrl(userOrStyle, 24);
-  return avatarUrl(userOrStyle || "imprint", seed, 24);
-}
-
-function renderPresenceAvatars(el, sessionId) {
-  // Remove existing presence container
-  var existing = el.querySelector(".session-presence");
-  if (existing) existing.remove();
-
-  var users = sessionPresence[sessionId];
-  if (!users || users.length === 0) return;
-
-  var container = document.createElement("span");
-  container.className = "session-presence";
-
-  var max = 3;
-  var shown = users.length > max ? max : users.length;
-  for (var i = 0; i < shown; i++) {
-    var u = users[i];
-    var img = document.createElement("img");
-    img.className = "session-presence-avatar";
-    img.src = presenceAvatarUrl(u);
-    img.alt = u.displayName;
-    img.dataset.tip = u.displayName + (u.username ? " (@" + u.username + ")" : "");
-    if (i > 0) img.style.marginLeft = "-6px";
-    container.appendChild(img);
-  }
-  if (users.length > max) {
-    var more = document.createElement("span");
-    more.className = "session-presence-more";
-    more.textContent = "+" + (users.length - max);
-    container.appendChild(more);
-  }
-
-  // Insert before the more-btn
-  var moreBtn = el.querySelector(".session-more-btn");
-  if (moreBtn) {
-    el.insertBefore(container, moreBtn);
-  } else {
-    el.appendChild(container);
+    renderSessionPresence(items[i], items[i].dataset.sessionId);
   }
+  refreshMobileChatSheet();
 }
 
 // --- Session badge ---
@@ -1750,24 +1171,27 @@ export function updateSessionBadge(sessionId, count) {
   for (var i = 0; i < cachedSessions.length; i++) {
     if (cachedSessions[i].id === sessionId) cachedSessions[i].unread = count;
   }
-  var badge = document.querySelector('.session-unread-badge[data-session-id="' + sessionId + '"]');
+  // Every copy of the row (a favorite shows twice) is updated.
+  var badges = document.querySelectorAll('.session-unread-badge[data-session-id="' + sessionId + '"]');
   var groups = store.get('splitGroups') || [];
   for (var gi = 0; gi < groups.length; gi++) {
     if (groups[gi].members.indexOf(sessionId) === -1) continue;
-    badge = document.querySelector('.session-unread-badge[data-split-group-id="' + groups[gi].id + '"]');
+    badges = document.querySelectorAll('.session-unread-badge[data-split-group-id="' + groups[gi].id + '"]');
     count = 0;
     for (var mi = 0; mi < cachedSessions.length; mi++) {
       if (groups[gi].members.indexOf(cachedSessions[mi].id) !== -1) count += cachedSessions[mi].unread || 0;
     }
     break;
   }
-  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");
+  for (var bi = 0; bi < badges.length; bi++) {
+    var badge = badges[bi];
+    if (count > 0) {
+      badge.textContent = count > 99 ? "99+" : String(count);
+      badge.classList.add("has-unread");
+    } else {
+      badge.textContent = "";
+      badge.classList.remove("has-unread");
+    }
   }
 }