clay-server 2.34.0-beta.8 → 2.34.0

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

@@ -8,7 +8,7 @@ import { openSearch as openSessionSearch } from './session-search.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { getSessionListEl } from './dom-refs.js';
-import { dismissOverlayPanels, closeSidebar, updatePageTitle } from './sidebar.js';
+import { dismissOverlayPanels, closeSidebar, updatePageTitle, spawnDustParticles } from './sidebar.js';
 import { showConfirm } from './app-misc.js';
 import { getUpcomingSchedules } from './scheduler.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
@@ -32,6 +32,16 @@ var countdownContainer = null;
 // --- Session context menu ---
 var sessionCtxMenu = null;
 var sessionCtxSessionId = null;
+var draggedSessionId = null;
+var draggedSessionBookmarked = false;
+var openResumePickerModal = function () {};
+var headerSearchOpen = false;
+var armedDeleteSessionId = null;
+var armedDeleteTimer = null;
+
+export function openResumePicker() {
+  openResumePickerModal();
+}
 
 function sendSessionBookmark(sessionId, bookmarked) {
   if (getWs() && store.get('connected')) {
@@ -40,76 +50,415 @@ function sendSessionBookmark(sessionId, bookmarked) {
 }
 
 function compareSessionListItems(a, b) {
-  var aBookmarked = !!a.bookmarked;
-  var bBookmarked = !!b.bookmarked;
+  var aData = a && a.type === "session" ? a.data : a;
+  var bData = b && b.type === "session" ? 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);
 }
 
-export function initSidebarSessions() {
+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");
+  }
+}
 
-  document.addEventListener("click", function () { closeSessionCtxMenu(); });
+function setupSessionDragHandlers(el, session) {
+  el.setAttribute("draggable", "true");
 
-  // --- Session search ---
-  var searchBtn = document.getElementById("search-session-btn");
-  var searchBox = document.getElementById("session-search");
-  var searchInput = document.getElementById("session-search-input");
-  var searchClear = document.getElementById("session-search-clear");
+  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;
+  });
 
-  function openSearch() {
-    searchBox.classList.remove("hidden");
-    searchBtn.classList.add("active");
-    searchInput.value = "";
-    searchQuery = "";
-    setTimeout(function () { searchInput.focus(); }, 50);
+  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 closeSearch() {
-    searchBox.classList.add("hidden");
-    searchBtn.classList.remove("active");
-    searchInput.value = "";
-    searchQuery = "";
-    searchMatchIds = null;
-    if (searchDebounce) { clearTimeout(searchDebounce); searchDebounce = null; }
-    renderSessionList(null);
+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 + '"]');
+    if (!el) return;
+    var rect = el.getBoundingClientRect();
+    spawnDustParticles(rect.left + rect.width / 2, rect.top + rect.height / 2);
+  }, 0);
+}
+
+function confirmDeleteSession(session) {
+  showConfirm('Delete "' + (session.title || "New Session") + '"? This session and its history will be permanently removed.', function () {
+    var ws = getWs();
+    if (ws && store.get('connected')) {
+      ws.send(JSON.stringify({ type: "delete_session", id: session.id }));
+      spawnSessionDeleteParticles(session.id);
+    }
+  });
+}
+
+function clearArmedSessionDelete() {
+  if (armedDeleteTimer) {
+    clearTimeout(armedDeleteTimer);
+    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();
+    }
+  }
+  armedDeleteSessionId = null;
+}
 
-  searchBtn.addEventListener("click", function () {
-    if (searchBox.classList.contains("hidden")) {
-      openSearch();
-    } else {
-      closeSearch();
+function armSessionDelete(closeBtn, session) {
+  clearArmedSessionDelete();
+  armedDeleteSessionId = session.id;
+  closeBtn.classList.add("armed");
+  closeBtn.innerHTML = iconHtml("check");
+  closeBtn.title = "Click again to delete";
+  closeBtn.setAttribute("aria-label", "Click again to delete");
+  refreshIcons();
+  armedDeleteTimer = setTimeout(function () {
+    clearArmedSessionDelete();
+  }, 1800);
+}
+
+function deleteSessionImmediately(session) {
+  var ws = getWs();
+  if (ws && store.get('connected')) {
+    ws.send(JSON.stringify({ type: "delete_session", id: session.id }));
+    spawnSessionDeleteParticles(session.id);
+  }
+}
+
+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;
+  }
+  return [];
+}
+
+function confirmDeleteSessionGroup(groupLabel, sessionIds) {
+  if (!Array.isArray(sessionIds) || sessionIds.length === 0) return;
+  var count = sessionIds.length;
+  var noun = count === 1 ? "session" : "sessions";
+  showConfirm('Clear "' + groupLabel + '"? ' + count + " " + noun + ' will be permanently removed.', function () {
+    var ws = getWs();
+    if (ws && store.get('connected')) {
+      ws.send(JSON.stringify({ type: "bulk_delete_sessions", sessionIds: sessionIds }));
     }
   });
+}
 
-  if (searchClear) {
-    searchClear.addEventListener("click", function () {
-      closeSearch();
+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);
   }
 
-  searchInput.addEventListener("input", function () {
-    searchQuery = searchInput.value.trim();
-    if (searchDebounce) clearTimeout(searchDebounce);
-    if (!searchQuery) {
-      searchMatchIds = null;
-      renderSessionList(null);
+  return header;
+}
+
+function appendSessionCloseButton(el, session) {
+  if (store.get('permissions') && store.get('permissions').sessionDelete === false) return;
+
+  var closeBtn = document.createElement("button");
+  closeBtn.className = "session-close-btn";
+  closeBtn.dataset.sessionId = session.id;
+  closeBtn.type = "button";
+  closeBtn.title = "Delete session";
+  closeBtn.setAttribute("aria-label", "Delete session");
+  closeBtn.innerHTML = iconHtml("x");
+  closeBtn.addEventListener("click", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (armedDeleteSessionId === session.id) {
+      clearArmedSessionDelete();
+      deleteSessionImmediately(session);
       return;
     }
-    searchDebounce = setTimeout(function () {
-      if (getWs() && store.get('connected')) {
-        getWs().send(JSON.stringify({ type: "search_sessions", query: searchQuery }));
-      }
-    }, 200);
+    armSessionDelete(closeBtn, session);
   });
+  el.appendChild(closeBtn);
+}
 
-  searchInput.addEventListener("keydown", function (e) {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      closeSearch();
+function renderSessionTopActions() {
+  var wrap = document.createElement("div");
+  wrap.className = "session-top-actions";
+
+  var newBtn = document.createElement("button");
+  newBtn.className = "session-top-action";
+  newBtn.type = "button";
+  newBtn.innerHTML = iconHtml("plus") + '<span>New Session</span>';
+  newBtn.addEventListener("click", function () {
+    if (getWs() && store.get('connected')) {
+      getWs().send(JSON.stringify({ type: "new_session" }));
+    }
+  });
+  wrap.appendChild(newBtn);
+
+  var importBtn = document.createElement("button");
+  importBtn.className = "session-top-action";
+  importBtn.type = "button";
+  importBtn.innerHTML = iconHtml("import") + '<span>Import CLI</span>';
+  importBtn.addEventListener("click", function () {
+    openResumePickerModal();
+  });
+  wrap.appendChild(importBtn);
+
+  return wrap;
+}
+
+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() {
+
+  document.addEventListener("click", function () {
+    closeSessionCtxMenu();
+    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();
+  }
+
   // --- Resume session picker ---
   var resumeModal = document.getElementById("resume-modal");
   var resumeCancel = document.getElementById("resume-cancel");
@@ -127,13 +476,12 @@ export function initSidebarSessions() {
       getWs().send(JSON.stringify({ type: "list_cli_sessions" }));
     }
   }
+  openResumePickerModal = openResumeModal;
 
   function closeResumeModal() {
     resumeModal.classList.add("hidden");
   }
 
-  var resumeBtn = document.getElementById("resume-session-btn");
-  if (resumeBtn) resumeBtn.addEventListener("click", openResumeModal);
   resumeCancel.addEventListener("click", closeResumeModal);
   resumeModal.querySelector(".confirm-backdrop").addEventListener("click", closeResumeModal);
 
@@ -182,7 +530,7 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
 
   var bookmarkItem = document.createElement("button");
   bookmarkItem.className = "session-ctx-item";
-  bookmarkItem.innerHTML = iconHtml(sessionData && sessionData.bookmarked ? "star-off" : "star") + " <span>" + (sessionData && sessionData.bookmarked ? "Remove Bookmark" : "Bookmark") + "</span>";
+  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();
@@ -225,12 +573,7 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
     deleteItem.addEventListener("click", function (e) {
       e.stopPropagation();
       closeSessionCtxMenu();
-      showConfirm('Delete "' + (title || "New Session") + '"? This session and its history will be permanently removed.', function () {
-        var ws = getWs();
-        if (ws && store.get('connected')) {
-          ws.send(JSON.stringify({ type: "delete_session", id: sessionId }));
-        }
-      });
+      confirmDeleteSession({ id: sessionId, title: title });
     });
     menu.appendChild(deleteItem);
   }
@@ -409,13 +752,17 @@ export function highlightMatch(text, query) {
   return escapeHtml(before) + '<mark class="session-highlight">' + escapeHtml(match) + '</mark>' + escapeHtml(after);
 }
 
+function isSessionVisibleBySearch(sessionId) {
+  if (searchMatchIds === null) return true;
+  return searchMatchIds.has(sessionId);
+}
+
 // --- Loop child / run / group rendering ---
 
 function renderLoopChild(s) {
   var el = document.createElement("div");
   var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
-  var dimmed = searchMatchIds !== null && !isMatch;
-  el.className = "session-loop-child" + (s.active ? " active" : "") + (isMatch ? " search-match" : "") + (dimmed ? " search-dimmed" : "");
+  el.className = "session-loop-child" + (s.active ? " active" : "") + (isMatch ? " search-match" : "");
   el.dataset.sessionId = s.id;
 
   var textSpan = document.createElement("span");
@@ -433,6 +780,7 @@ function renderLoopChild(s) {
   }
   textSpan.innerHTML = textHtml;
   el.appendChild(textSpan);
+  appendSessionCloseButton(el, s);
 
   el.addEventListener("click", (function (id) {
     return function () {
@@ -448,14 +796,27 @@ function renderLoopChild(s) {
 }
 
 function renderLoopGroup(loopId, children, groupKey) {
+  var visibleChildren = children;
+  if (searchMatchIds !== null) {
+    visibleChildren = [];
+    for (var vi = 0; vi < children.length; vi++) {
+      if (isSessionVisibleBySearch(children[vi].id)) {
+        visibleChildren.push(children[vi]);
+      }
+    }
+    if (visibleChildren.length === 0) {
+      return null;
+    }
+  }
+
   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);
+  for (var i = 0; i < visibleChildren.length; i++) {
+    var runKey = String(visibleChildren[i].loop && visibleChildren[i].loop.startedAt || 0);
     if (!runMap[runKey]) runMap[runKey] = [];
-    runMap[runKey].push(children[i]);
+    runMap[runKey].push(visibleChildren[i]);
   }
   var runKeys = Object.keys(runMap);
 
@@ -477,21 +838,21 @@ function renderLoopGroup(loopId, children, groupKey) {
   var expanded = expandedLoopGroups.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 latestSession = visibleChildren[0];
+  for (var ci = 0; ci < visibleChildren.length; ci++) {
+    if (visibleChildren[ci].active) hasActive = true;
+    if (visibleChildren[ci].isProcessing) anyProcessing = true;
+    if ((visibleChildren[ci].lastActivity || 0) > (latestSession.lastActivity || 0)) {
+      latestSession = visibleChildren[ci];
     }
   }
 
-  var loopName = (children[0].loop && children[0].loop.name) || "Loop";
-  var isRalph = children[0].loop && children[0].loop.source === "ralph";
-  var isDebate = children[0].loop && children[0].loop.source === "debate";
+  var loopName = (visibleChildren[0].loop && visibleChildren[0].loop.name) || "Loop";
+  var isRalph = visibleChildren[0].loop && visibleChildren[0].loop.source === "ralph";
+  var isDebate = visibleChildren[0].loop && visibleChildren[0].loop.source === "debate";
   var isCrafting = false;
-  for (var j = 0; j < children.length; j++) {
-    if (children[j].loop && children[j].loop.role === "crafting") isCrafting = true;
+  for (var j = 0; j < visibleChildren.length; j++) {
+    if (visibleChildren[j].loop && visibleChildren[j].loop.role === "crafting") isCrafting = true;
   }
 
   var runCount = runKeys.length;
@@ -536,7 +897,7 @@ function renderLoopGroup(loopId, children, groupKey) {
   if (isCrafting && children.length === 1) {
     textHtml += '<span class="session-loop-badge crafting">Crafting</span>';
   } else {
-    var countLabel = runCount === 1 ? children.length : runCount + (runCount === 1 ? " run" : " runs");
+    var countLabel = runCount === 1 ? visibleChildren.length : runCount + (runCount === 1 ? " run" : " runs");
     var countClass = isDebate ? " debate" : (isRalph ? "" : " scheduled");
     textHtml += '<span class="session-loop-count' + countClass + '">' + countLabel + '</span>';
   }
@@ -553,7 +914,7 @@ function renderLoopGroup(loopId, children, groupKey) {
       e.stopPropagation();
       showLoopCtxMenu(btn, lid, name, count);
     };
-  })(loopId, loopName, children.length, moreBtn));
+  })(loopId, loopName, visibleChildren.length, moreBtn));
   el.appendChild(moreBtn);
 
   // Click row (not chevron/more) -> switch to latest session
@@ -673,27 +1034,9 @@ function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
 function renderSessionItem(s) {
   var el = document.createElement("div");
   var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
-  var dimmed = searchMatchIds !== null && !isMatch;
-  el.className = "session-item" + (s.active ? " active" : "") + (isMatch ? " search-match" : "") + (dimmed ? " search-dimmed" : "");
+  el.className = "session-item" + (s.active ? " active" : "") + (isMatch ? " search-match" : "");
   el.dataset.sessionId = s.id;
 
-  var bookmarkBtn = document.createElement("button");
-  bookmarkBtn.className = "session-bookmark-btn" + (s.bookmarked ? " bookmarked inline" : " hover");
-  bookmarkBtn.type = "button";
-  bookmarkBtn.title = s.bookmarked ? "Remove bookmark" : "Bookmark";
-  bookmarkBtn.setAttribute("aria-label", s.bookmarked ? "Remove bookmark" : "Bookmark");
-  bookmarkBtn.innerHTML = iconHtml("star");
-  bookmarkBtn.addEventListener("click", (function (id, bookmarked) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      sendSessionBookmark(id, !bookmarked);
-    };
-  })(s.id, !!s.bookmarked));
-  if (s.bookmarked) {
-    el.appendChild(bookmarkBtn);
-  }
-
   var textSpan = document.createElement("span");
   textSpan.className = "session-item-text";
   var textHtml = "";
@@ -728,10 +1071,7 @@ function renderSessionItem(s) {
     unreadBadge.classList.add("has-unread");
   }
   el.appendChild(unreadBadge);
-
-  if (!s.bookmarked) {
-    el.appendChild(bookmarkBtn);
-  }
+  appendSessionCloseButton(el, s);
 
   el.addEventListener("click", (function (id) {
     return function () {
@@ -749,6 +1089,7 @@ function renderSessionItem(s) {
 
   // Presence avatars (multi-user)
   renderPresenceAvatars(el, String(s.id));
+  setupSessionDragHandlers(el, s);
 
   return el;
 }
@@ -808,6 +1149,9 @@ export function renderSessionList(sessions) {
   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 === "session" && item.data && item.data.bookmarked) {
       bookmarkedItems.push(item);
     } else {
@@ -815,36 +1159,62 @@ export function renderSessionList(sessions) {
     }
   }
 
-  if (bookmarkedItems.length > 0) {
-    var bookmarkedHeader = document.createElement("div");
-    bookmarkedHeader.className = "session-group-header";
-    bookmarkedHeader.textContent = "Bookmarked";
-    getSessionListEl().appendChild(bookmarkedHeader);
-
-    for (var bi = 0; bi < bookmarkedItems.length; bi++) {
-      getSessionListEl().appendChild(renderSessionItem(bookmarkedItems[bi].data));
-    }
+  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++) {
+    favoritesContainer.appendChild(renderSessionItem(bookmarkedItems[bi].data));
   }
 
+  var divider = document.createElement("div");
+  divider.className = "session-favorites-divider";
+
+  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;
-      var header = document.createElement("div");
-      header.className = "session-group-header";
-      header.textContent = group;
-      getSessionListEl().appendChild(header);
+      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") {
-      getSessionListEl().appendChild(renderLoopGroup(item.loopId, item.children, item.groupKey));
+      var loopEl = renderLoopGroup(item.loopId, item.children, item.groupKey);
+      if (loopEl) {
+        regularContainer.appendChild(loopEl);
+      }
     } else {
-      getSessionListEl().appendChild(renderSessionItem(item.data));
+      regularContainer.appendChild(renderSessionItem(item.data));
     }
   }
+  getSessionListEl().appendChild(regularContainer);
   refreshIcons();
   if (updatePageTitle) updatePageTitle();
+  syncHeaderSearchUi();
 }
 
 // --- Search results ---
@@ -955,7 +1325,14 @@ function updateCountdowns() {
   if (!countdownContainer) {
     countdownContainer = document.createElement("div");
     countdownContainer.className = "session-countdown-group";
-    getSessionListEl().insertBefore(countdownContainer, getSessionListEl().firstChild);
+    var stickyTop = getSessionListEl().querySelector(".session-list-sticky-top");
+    if (stickyTop && stickyTop.nextSibling) {
+      getSessionListEl().insertBefore(countdownContainer, stickyTop.nextSibling);
+    } else if (stickyTop) {
+      getSessionListEl().appendChild(countdownContainer);
+    } else {
+      getSessionListEl().insertBefore(countdownContainer, getSessionListEl().firstChild);
+    }
   }
 
   var html = "";