clay-server 2.27.0-beta.9 → 2.27.0

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

@@ -0,0 +1,986 @@
+// 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';
+
+var _ctx = null;
+
+// --- 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;
+
+// --- Session context menu ---
+var sessionCtxMenu = null;
+var sessionCtxSessionId = null;
+
+export function initSidebarSessions(ctx) {
+  _ctx = ctx;
+
+  document.addEventListener("click", function () { closeSessionCtxMenu(); });
+
+  // --- Session search ---
+  var searchBtn = _ctx.$("search-session-btn");
+  var searchBox = _ctx.$("session-search");
+  var searchInput = _ctx.$("session-search-input");
+  var searchClear = _ctx.$("session-search-clear");
+
+  function openSearch() {
+    searchBox.classList.remove("hidden");
+    searchBtn.classList.add("active");
+    searchInput.value = "";
+    searchQuery = "";
+    setTimeout(function () { searchInput.focus(); }, 50);
+  }
+
+  function closeSearch() {
+    searchBox.classList.add("hidden");
+    searchBtn.classList.remove("active");
+    searchInput.value = "";
+    searchQuery = "";
+    searchMatchIds = null;
+    if (searchDebounce) { clearTimeout(searchDebounce); searchDebounce = null; }
+    renderSessionList(null);
+  }
+
+  searchBtn.addEventListener("click", function () {
+    if (searchBox.classList.contains("hidden")) {
+      openSearch();
+    } else {
+      closeSearch();
+    }
+  });
+
+  if (searchClear) {
+    searchClear.addEventListener("click", function () {
+      closeSearch();
+    });
+  }
+
+  searchInput.addEventListener("input", function () {
+    searchQuery = searchInput.value.trim();
+    if (searchDebounce) clearTimeout(searchDebounce);
+    if (!searchQuery) {
+      searchMatchIds = null;
+      renderSessionList(null);
+      return;
+    }
+    searchDebounce = setTimeout(function () {
+      if (_ctx.ws && _ctx.connected) {
+        _ctx.ws.send(JSON.stringify({ type: "search_sessions", query: searchQuery }));
+      }
+    }, 200);
+  });
+
+  searchInput.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeSearch();
+    }
+  });
+
+  // --- Resume session picker ---
+  var resumeModal = _ctx.$("resume-modal");
+  var resumeCancel = _ctx.$("resume-cancel");
+  var pickerLoading = _ctx.$("resume-picker-loading");
+  var pickerEmpty = _ctx.$("resume-picker-empty");
+  var pickerList = _ctx.$("resume-picker-list");
+
+  function openResumeModal() {
+    resumeModal.classList.remove("hidden");
+    pickerLoading.classList.remove("hidden");
+    pickerEmpty.classList.add("hidden");
+    pickerList.classList.add("hidden");
+    pickerList.innerHTML = "";
+    if (_ctx.ws && _ctx.connected) {
+      _ctx.ws.send(JSON.stringify({ type: "list_cli_sessions" }));
+    }
+  }
+
+  function closeResumeModal() {
+    resumeModal.classList.add("hidden");
+  }
+
+  _ctx.resumeSessionBtn.addEventListener("click", openResumeModal);
+  resumeCancel.addEventListener("click", closeResumeModal);
+  resumeModal.querySelector(".confirm-backdrop").addEventListener("click", closeResumeModal);
+
+  // --- Schedule countdown timer ---
+  startCountdownTimer();
+}
+
+// --- Getters for cross-module access ---
+
+export function getCachedSessions() {
+  return cachedSessions;
+}
+
+export function getSearchQuery() {
+  return searchQuery;
+}
+
+export function getSearchMatchIds() {
+  return searchMatchIds;
+}
+
+export function getExpandedLoopGroups() {
+  return expandedLoopGroups;
+}
+
+export function getExpandedLoopRuns() {
+  return expandedLoopRuns;
+}
+
+// --- Context menu ---
+
+function closeSessionCtxMenu() {
+  if (sessionCtxMenu) {
+    sessionCtxMenu.remove();
+    sessionCtxMenu = null;
+    sessionCtxSessionId = null;
+  }
+}
+
+function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
+  closeSessionCtxMenu();
+  sessionCtxSessionId = sessionId;
+
+  var menu = document.createElement("div");
+  menu.className = "session-ctx-menu";
+
+  var renameItem = document.createElement("button");
+  renameItem.className = "session-ctx-item";
+  renameItem.innerHTML = iconHtml("pencil") + " <span>Rename</span>";
+  renameItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeSessionCtxMenu();
+    startInlineRename(sessionId, title);
+  });
+  menu.appendChild(renameItem);
+
+  // Session visibility toggle (only the session owner can change)
+  if (_ctx.multiUser && sessionData && sessionData.ownerId && sessionData.ownerId === _ctx.myUserId) {
+    var currentVis = (sessionData && sessionData.sessionVisibility) || "shared";
+    var isPrivate = currentVis === "private";
+    var visItem = document.createElement("button");
+    visItem.className = "session-ctx-item";
+    visItem.innerHTML = iconHtml(isPrivate ? "eye" : "eye-off") + " <span>" + (isPrivate ? "Make Shared" : "Make Private") + "</span>";
+    visItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeSessionCtxMenu();
+      var newVis = isPrivate ? "shared" : "private";
+      if (_ctx.ws && _ctx.connected) {
+        _ctx.ws.send(JSON.stringify({ type: "set_session_visibility", sessionId: sessionId, visibility: newVis }));
+      }
+    });
+    menu.appendChild(visItem);
+  }
+
+  if (!_ctx.permissions || _ctx.permissions.sessionDelete !== false) {
+    var deleteItem = document.createElement("button");
+    deleteItem.className = "session-ctx-item session-ctx-delete";
+    deleteItem.innerHTML = iconHtml("trash-2") + " <span>Delete</span>";
+    deleteItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeSessionCtxMenu();
+      _ctx.showConfirm('Delete "' + (title || "New Session") + '"? This session and its history will be permanently removed.', function () {
+        var ws = _ctx.ws;
+        if (ws && _ctx.connected) {
+          ws.send(JSON.stringify({ type: "delete_session", id: sessionId }));
+        }
+      });
+    });
+    menu.appendChild(deleteItem);
+  }
+
+  document.body.appendChild(menu);
+  sessionCtxMenu = menu;
+  refreshIcons();
+
+  // Position: fixed relative to the anchor button
+  requestAnimationFrame(function () {
+    var btnRect = anchorBtn.getBoundingClientRect();
+    menu.style.position = "fixed";
+    menu.style.top = (btnRect.bottom + 2) + "px";
+    menu.style.right = (window.innerWidth - btnRect.right) + "px";
+    menu.style.left = "auto";
+    // If menu overflows below viewport, flip up
+    var menuRect = menu.getBoundingClientRect();
+    if (menuRect.bottom > window.innerHeight - 8) {
+      menu.style.top = (btnRect.top - menuRect.height - 2) + "px";
+    }
+  });
+}
+
+function showLoopCtxMenu(anchorBtn, loopId, loopName, childCount) {
+  closeSessionCtxMenu();
+
+  var menu = document.createElement("div");
+  menu.className = "session-ctx-menu";
+
+  var renameItem = document.createElement("button");
+  renameItem.className = "session-ctx-item";
+  renameItem.innerHTML = iconHtml("pencil") + " <span>Rename</span>";
+  renameItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeSessionCtxMenu();
+    startLoopInlineRename(loopId, loopName);
+  });
+  menu.appendChild(renameItem);
+
+  if (!_ctx.permissions || _ctx.permissions.sessionDelete !== false) {
+    var deleteItem = document.createElement("button");
+    deleteItem.className = "session-ctx-item session-ctx-delete";
+    deleteItem.innerHTML = iconHtml("trash-2") + " <span>Delete</span>";
+    deleteItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeSessionCtxMenu();
+      var msg = 'Delete "' + (loopName || "Loop") + '"';
+      if (childCount > 1) msg += " and its " + childCount + " sessions";
+      msg += "? This cannot be undone.";
+      _ctx.showConfirm(msg, function () {
+        if (_ctx.ws && _ctx.connected) {
+          _ctx.ws.send(JSON.stringify({ type: "delete_loop_group", loopId: loopId }));
+        }
+      });
+    });
+    menu.appendChild(deleteItem);
+  }
+
+  document.body.appendChild(menu);
+  sessionCtxMenu = menu;
+  refreshIcons();
+
+  requestAnimationFrame(function () {
+    var btnRect = anchorBtn.getBoundingClientRect();
+    menu.style.position = "fixed";
+    menu.style.top = (btnRect.bottom + 2) + "px";
+    menu.style.right = (window.innerWidth - btnRect.right) + "px";
+    menu.style.left = "auto";
+    var menuRect = menu.getBoundingClientRect();
+    if (menuRect.bottom > window.innerHeight - 8) {
+      menu.style.top = (btnRect.top - menuRect.height - 2) + "px";
+    }
+  });
+}
+
+// --- Inline rename ---
+
+function startInlineRename(sessionId, currentTitle) {
+  var el = _ctx.sessionListEl.querySelector('.session-item[data-session-id="' + sessionId + '"]');
+  if (!el) return;
+  var textSpan = el.querySelector(".session-item-text");
+  if (!textSpan) return;
+
+  var input = document.createElement("input");
+  input.type = "text";
+  input.className = "session-rename-input";
+  input.value = currentTitle || "New Session";
+
+  var originalHtml = textSpan.innerHTML;
+  textSpan.innerHTML = "";
+  textSpan.appendChild(input);
+  input.focus();
+  input.select();
+
+  function commitRename() {
+    var newTitle = input.value.trim();
+    if (newTitle && newTitle !== currentTitle && _ctx.ws && _ctx.connected) {
+      _ctx.ws.send(JSON.stringify({ type: "rename_session", id: sessionId, title: newTitle }));
+    }
+    // Restore text (server will send updated session_list)
+    textSpan.innerHTML = originalHtml;
+    if (newTitle && newTitle !== currentTitle) {
+      textSpan.textContent = newTitle;
+    }
+  }
+
+  input.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); commitRename(); }
+    if (e.key === "Escape") { e.preventDefault(); textSpan.innerHTML = originalHtml; }
+  });
+  input.addEventListener("blur", commitRename);
+  input.addEventListener("click", function (e) { e.stopPropagation(); });
+}
+
+function startLoopInlineRename(loopId, currentName) {
+  var el = _ctx.sessionListEl.querySelector('.session-loop-group[data-loop-id="' + loopId + '"]');
+  if (!el) return;
+  var textSpan = el.querySelector(".session-item-text");
+  if (!textSpan) return;
+
+  var input = document.createElement("input");
+  input.type = "text";
+  input.className = "session-rename-input";
+  input.value = currentName || "Loop";
+
+  var originalHtml = textSpan.innerHTML;
+  textSpan.innerHTML = "";
+  textSpan.appendChild(input);
+  input.focus();
+  input.select();
+
+  function commitRename() {
+    var newName = input.value.trim();
+    if (newName && newName !== currentName && _ctx.ws && _ctx.connected) {
+      _ctx.ws.send(JSON.stringify({ type: "loop_registry_rename", id: loopId, name: newName }));
+    }
+    textSpan.innerHTML = originalHtml;
+    if (newName && newName !== currentName) {
+      // Update text inline immediately
+      var nameNode = textSpan.querySelector(".session-loop-name");
+      if (nameNode) nameNode.textContent = newName;
+    }
+  }
+
+  input.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); commitRename(); }
+    if (e.key === "Escape") { e.preventDefault(); textSpan.innerHTML = originalHtml; }
+  });
+  input.addEventListener("blur", commitRename);
+  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";
+}
+
+export function highlightMatch(text, query) {
+  if (!query) return escapeHtml(text);
+  var lower = text.toLowerCase();
+  var qLower = query.toLowerCase();
+  var idx = lower.indexOf(qLower);
+  if (idx === -1) return escapeHtml(text);
+  var before = text.substring(0, idx);
+  var match = text.substring(idx, idx + query.length);
+  var after = text.substring(idx + query.length);
+  return escapeHtml(before) + '<mark class="session-highlight">' + escapeHtml(match) + '</mark>' + escapeHtml(after);
+}
+
+// --- 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.dataset.sessionId = s.id;
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "session-item-text";
+  var textHtml = "";
+  if (s.isProcessing) {
+    textHtml += '<span class="session-processing"></span>';
+  }
+  if (s.loop) {
+    var isRalphChild = s.loop.source === "ralph";
+    var roleName = s.loop.role === "crafting" ? "Crafting" : s.loop.role === "judge" ? "Judge" : (isRalphChild ? "Coder" : "Run");
+    var iterSuffix = s.loop.role === "crafting" ? "" : " #" + s.loop.iteration;
+    var roleCls = s.loop.role === "crafting" ? " crafting" : (!isRalphChild ? " scheduled" : "");
+    textHtml += '<span class="session-loop-role-badge' + roleCls + '">' + roleName + iterSuffix + '</span>';
+  }
+  textSpan.innerHTML = textHtml;
+  el.appendChild(textSpan);
+
+  el.addEventListener("click", (function (id) {
+    return function () {
+      if (_ctx.ws && _ctx.connected) {
+        _ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+        _ctx.dismissOverlayPanels();
+        _ctx.closeSidebar();
+      }
+    };
+  })(s.id));
+
+  return el;
+}
+
+function renderLoopGroup(loopId, children, groupKey) {
+  var gk = groupKey || loopId;
+
+  // Sub-group children by startedAt (each run)
+  var runMap = {};
+  for (var i = 0; i < children.length; i++) {
+    var runKey = String(children[i].loop && children[i].loop.startedAt || 0);
+    if (!runMap[runKey]) runMap[runKey] = [];
+    runMap[runKey].push(children[i]);
+  }
+  var runKeys = Object.keys(runMap);
+
+  // Sort each run's children by iteration then role
+  for (var ri = 0; ri < runKeys.length; ri++) {
+    runMap[runKeys[ri]].sort(function (a, b) {
+      var ai = (a.loop && a.loop.iteration) || 0;
+      var bi = (b.loop && b.loop.iteration) || 0;
+      if (ai !== bi) return ai - bi;
+      var ar = (a.loop && a.loop.role === "judge") ? 1 : 0;
+      var br = (b.loop && b.loop.role === "judge") ? 1 : 0;
+      return ar - br;
+    });
+  }
+
+  // Sort runs by startedAt descending (newest first)
+  runKeys.sort(function (a, b) { return Number(b) - Number(a); });
+
+  var expanded = 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 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 isCrafting = false;
+  for (var j = 0; j < children.length; j++) {
+    if (children[j].loop && children[j].loop.role === "crafting") isCrafting = true;
+  }
+
+  var runCount = runKeys.length;
+
+  var wrapper = document.createElement("div");
+  wrapper.className = "session-loop-wrapper";
+
+  // Group header row
+  var el = document.createElement("div");
+  var groupClass = "session-loop-group" + (hasActive ? " active" : "") + (expanded ? " expanded" : "");
+  if (isDebate) groupClass += " debate";
+  else if (!isRalph) groupClass += " scheduled";
+  el.className = groupClass;
+  el.dataset.loopId = loopId;
+
+  var chevron = document.createElement("button");
+  chevron.className = "session-loop-chevron";
+  chevron.innerHTML = iconHtml("chevron-right");
+  chevron.addEventListener("click", (function (lid) {
+    return function (e) {
+      e.stopPropagation();
+      if (expandedLoopGroups.has(lid)) {
+        expandedLoopGroups.delete(lid);
+      } else {
+        expandedLoopGroups.add(lid);
+      }
+      renderSessionList(null);
+    };
+  })(gk));
+  el.appendChild(chevron);
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "session-item-text";
+  var textHtml = "";
+  if (anyProcessing) {
+    textHtml += '<span class="session-processing"></span>';
+  }
+  var groupIcon = isDebate ? "mic" : (isRalph ? "repeat" : "calendar-clock");
+  var iconClass = isDebate ? " debate" : (isRalph ? "" : " scheduled");
+  textHtml += '<span class="session-loop-icon' + iconClass + '">' + iconHtml(groupIcon) + '</span>';
+  textHtml += '<span class="session-loop-name">' + escapeHtml(loopName) + '</span>';
+  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 countClass = isDebate ? " debate" : (isRalph ? "" : " scheduled");
+    textHtml += '<span class="session-loop-count' + countClass + '">' + countLabel + '</span>';
+  }
+  textSpan.innerHTML = textHtml;
+  el.appendChild(textSpan);
+
+  // More button (ellipsis)
+  var moreBtn = document.createElement("button");
+  moreBtn.className = "session-more-btn";
+  moreBtn.innerHTML = iconHtml("ellipsis");
+  moreBtn.title = "More options";
+  moreBtn.addEventListener("click", (function (lid, name, count, btn) {
+    return function (e) {
+      e.stopPropagation();
+      showLoopCtxMenu(btn, lid, name, count);
+    };
+  })(loopId, loopName, children.length, moreBtn));
+  el.appendChild(moreBtn);
+
+  // Click row (not chevron/more) -> switch to latest session
+  el.addEventListener("click", (function (id) {
+    return function () {
+      if (_ctx.ws && _ctx.connected) {
+        _ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+        _ctx.dismissOverlayPanels();
+        _ctx.closeSidebar();
+      }
+    };
+  })(latestSession.id));
+
+  wrapper.appendChild(el);
+
+  // Expanded: show runs as sub-groups
+  if (expanded) {
+    var childContainer = document.createElement("div");
+    childContainer.className = "session-loop-children";
+
+    if (runCount === 1) {
+      // Single run: show sessions directly (no extra nesting)
+      var singleRun = runMap[runKeys[0]];
+      for (var sk = 0; sk < singleRun.length; sk++) {
+        childContainer.appendChild(renderLoopChild(singleRun[sk]));
+      }
+    } else {
+      // Multiple runs: render each run as a collapsible sub-group
+      for (var rk = 0; rk < runKeys.length; rk++) {
+        childContainer.appendChild(renderLoopRun(gk, runKeys[rk], runMap[runKeys[rk]], isRalph));
+      }
+    }
+
+    wrapper.appendChild(childContainer);
+  }
+
+  return wrapper;
+}
+
+function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
+  var runGk = parentGk + ":" + startedAtKey;
+  var expanded = expandedLoopRuns.has(runGk);
+  var startedAt = Number(startedAtKey);
+  var timeLabel = startedAt ? new Date(startedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "Unknown";
+
+  var hasActive = false;
+  var anyProcessing = false;
+  var latestSession = sessions[0];
+  for (var i = 0; i < sessions.length; i++) {
+    if (sessions[i].active) hasActive = true;
+    if (sessions[i].isProcessing) anyProcessing = true;
+    if ((sessions[i].lastActivity || 0) > (latestSession.lastActivity || 0)) {
+      latestSession = sessions[i];
+    }
+  }
+
+  var wrapper = document.createElement("div");
+  wrapper.className = "session-loop-run-wrapper";
+
+  var el = document.createElement("div");
+  el.className = "session-loop-run" + (hasActive ? " active" : "") + (expanded ? " expanded" : "") + (isRalph ? "" : " scheduled");
+
+  var chevron = document.createElement("button");
+  chevron.className = "session-loop-chevron";
+  chevron.innerHTML = iconHtml("chevron-right");
+  chevron.addEventListener("click", (function (rk) {
+    return function (e) {
+      e.stopPropagation();
+      if (expandedLoopRuns.has(rk)) {
+        expandedLoopRuns.delete(rk);
+      } else {
+        expandedLoopRuns.add(rk);
+      }
+      renderSessionList(null);
+    };
+  })(runGk));
+  el.appendChild(chevron);
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "session-item-text";
+  var textHtml = "";
+  if (anyProcessing) {
+    textHtml += '<span class="session-processing"></span>';
+  }
+  textHtml += '<span class="session-loop-run-time">' + escapeHtml(timeLabel) + '</span>';
+  textHtml += '<span class="session-loop-count' + (isRalph ? "" : " scheduled") + '">' + sessions.length + '</span>';
+  textSpan.innerHTML = textHtml;
+  el.appendChild(textSpan);
+
+  // Click row -> switch to latest session of this run
+  el.addEventListener("click", (function (id) {
+    return function () {
+      if (_ctx.ws && _ctx.connected) {
+        _ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+        _ctx.dismissOverlayPanels();
+        _ctx.closeSidebar();
+      }
+    };
+  })(latestSession.id));
+
+  wrapper.appendChild(el);
+
+  if (expanded) {
+    var childContainer = document.createElement("div");
+    childContainer.className = "session-loop-children";
+    for (var k = 0; k < sessions.length; k++) {
+      childContainer.appendChild(renderLoopChild(sessions[k]));
+    }
+    wrapper.appendChild(childContainer);
+  }
+
+  return wrapper;
+}
+
+// --- Session item rendering ---
+
+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.dataset.sessionId = s.id;
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "session-item-text";
+  var textHtml = "";
+  if (s.isProcessing) {
+    textHtml += '<span class="session-processing"></span>';
+  }
+  if (s.loop && s.loop.source === "debate") {
+    textHtml += '<span class="session-debate-icon" title="Debate">' + iconHtml("mic") + '</span>';
+  }
+  if (_ctx.multiUser && s.sessionVisibility === "private") {
+    textHtml += '<span class="session-private-icon" title="Private session">' + iconHtml("lock") + '</span>';
+  }
+  textHtml += highlightMatch(s.title || "New Session", searchQuery);
+  textSpan.innerHTML = textHtml;
+  el.appendChild(textSpan);
+
+  // Right-click / long-press: context menu
+  el.addEventListener("contextmenu", (function(id, title, cliSid, anchor, sData) {
+    return function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      showSessionCtxMenu(anchor, id, title, cliSid, sData);
+    };
+  })(s.id, s.title, s.cliSessionId, el, s));
+
+  // Unread badge
+  var unreadBadge = document.createElement("span");
+  unreadBadge.className = "session-unread-badge";
+  unreadBadge.dataset.sessionId = s.id;
+  if (s.unread > 0) {
+    unreadBadge.textContent = s.unread > 99 ? "99+" : String(s.unread);
+    unreadBadge.classList.add("has-unread");
+  }
+  el.appendChild(unreadBadge);
+
+  el.addEventListener("click", (function (id) {
+    return function () {
+      if (_ctx.ws && _ctx.connected) {
+        var pendingQuery = searchQuery || "";
+        _ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+        _ctx.dismissOverlayPanels();
+        _ctx.closeSidebar();
+        if (pendingQuery) {
+          setTimeout(function () { openSessionSearch(pendingQuery); }, 400);
+        }
+      }
+    };
+  })(s.id));
+
+  // Presence avatars (multi-user)
+  renderPresenceAvatars(el, String(s.id));
+
+  return el;
+}
+
+// --- Main session list ---
+
+export function renderSessionList(sessions) {
+  if (sessions) cachedSessions = sessions;
+
+  // If mobile chat sheet is open, refresh it
+  if (_ctx.refreshMobileChatSheet) _ctx.refreshMobileChatSheet();
+
+  _ctx.sessionListEl.innerHTML = "";
+
+  // Partition: loop sessions vs normal sessions
+  // Group by loopId + date so all runs of the same task on the same day are merged
+  var loopGroups = {}; // groupKey -> [sessions]
+  var normalSessions = [];
+  for (var i = 0; i < cachedSessions.length; i++) {
+    var s = cachedSessions[i];
+    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph" && s.loop.source !== "debate") {
+      // Task crafting sessions live in the scheduler calendar, not the main list (except debate)
+      continue;
+    } else if (s.loop && s.loop.loopId) {
+      var startedAt = s.loop.startedAt || 0;
+      var dateStr = startedAt ? new Date(startedAt).toISOString().slice(0, 10) : "unknown";
+      var groupKey = s.loop.loopId + ":" + dateStr;
+      if (!loopGroups[groupKey]) loopGroups[groupKey] = [];
+      loopGroups[groupKey].push(s);
+    } else {
+      normalSessions.push(s);
+    }
+  }
+
+  // Build virtual items: normal sessions + one entry per loop group (using latest child's lastActivity)
+  var items = [];
+  for (var j = 0; j < normalSessions.length; j++) {
+    items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+  }
+  var groupKeys = Object.keys(loopGroups);
+  for (var k = 0; k < groupKeys.length; k++) {
+    var gk = groupKeys[k];
+    var children = loopGroups[gk];
+    var realLoopId = children[0].loop.loopId;
+    var maxActivity = 0;
+    for (var m = 0; m < children.length; m++) {
+      var act = children[m].lastActivity || 0;
+      if (act > maxActivity) maxActivity = act;
+    }
+    items.push({ type: "loop", loopId: realLoopId, groupKey: gk, children: children, lastActivity: maxActivity });
+  }
+
+  // Sort by lastActivity descending
+  items.sort(function (a, b) {
+    return (b.lastActivity || 0) - (a.lastActivity || 0);
+  });
+
+  var currentGroup = "";
+  for (var n = 0; n < items.length; n++) {
+    var item = items[n];
+    var group = getDateGroup(item.lastActivity || 0);
+    if (group !== currentGroup) {
+      currentGroup = group;
+      var header = document.createElement("div");
+      header.className = "session-group-header";
+      header.textContent = group;
+      _ctx.sessionListEl.appendChild(header);
+    }
+    if (item.type === "loop") {
+      _ctx.sessionListEl.appendChild(renderLoopGroup(item.loopId, item.children, item.groupKey));
+    } else {
+      _ctx.sessionListEl.appendChild(renderSessionItem(item.data));
+    }
+  }
+  refreshIcons();
+  if (_ctx.updatePageTitle) _ctx.updatePageTitle();
+}
+
+// --- 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);
+}
+
+// --- Session presence ---
+
+export function updateSessionPresence(presence) {
+  sessionPresence = presence;
+  // Update presence avatars on existing session items without full re-render
+  var items = _ctx.sessionListEl.querySelectorAll("[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 || "thumbs", 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);
+  }
+}
+
+// --- Session badge ---
+
+export function updateSessionBadge(sessionId, count) {
+  var badge = document.querySelector('.session-unread-badge[data-session-id="' + sessionId + '"]');
+  if (!badge) return;
+  if (count > 0) {
+    badge.textContent = count > 99 ? "99+" : String(count);
+    badge.classList.add("has-unread");
+  } else {
+    badge.textContent = "";
+    badge.classList.remove("has-unread");
+  }
+}
+
+// --- Countdown timer ---
+
+function startCountdownTimer() {
+  if (countdownTimer) clearInterval(countdownTimer);
+  countdownTimer = setInterval(updateCountdowns, 1000);
+}
+
+function updateCountdowns() {
+  if (!_ctx || !_ctx.getUpcomingSchedules || !_ctx.sessionListEl) return;
+  var upcoming = _ctx.getUpcomingSchedules(3 * 60 * 1000); // 3 minutes
+
+  // Remove stale container
+  if (countdownContainer && !_ctx.sessionListEl.contains(countdownContainer)) {
+    countdownContainer = null;
+  }
+
+  if (upcoming.length === 0) {
+    if (countdownContainer) {
+      countdownContainer.remove();
+      countdownContainer = null;
+    }
+    return;
+  }
+
+  if (!countdownContainer) {
+    countdownContainer = document.createElement("div");
+    countdownContainer.className = "session-countdown-group";
+    _ctx.sessionListEl.insertBefore(countdownContainer, _ctx.sessionListEl.firstChild);
+  }
+
+  var html = "";
+  var now = Date.now();
+  for (var i = 0; i < upcoming.length; i++) {
+    var u = upcoming[i];
+    var remaining = Math.max(0, Math.ceil((u.nextRunAt - now) / 1000));
+    var min = Math.floor(remaining / 60);
+    var sec = remaining % 60;
+    var timeStr = min + ":" + (sec < 10 ? "0" : "") + sec;
+    var colorStyle = u.color ? " style=\"border-left-color:" + u.color + "\"" : "";
+    html += '<div class="session-countdown-item"' + colorStyle + '>';
+    html += '<span class="session-countdown-name">' + escapeHtml(u.name) + '</span>';
+    html += '<span class="session-countdown-badge">' + timeStr + '</span>';
+    html += '</div>';
+  }
+  countdownContainer.innerHTML = html;
+}
+
+// --- CLI session picker ---
+
+function relativeTime(isoString) {
+  if (!isoString) return "";
+  var ms = Date.now() - new Date(isoString).getTime();
+  var sec = Math.floor(ms / 1000);
+  if (sec < 60) return "just now";
+  var min = Math.floor(sec / 60);
+  if (min < 60) return min + "m ago";
+  var hr = Math.floor(min / 60);
+  if (hr < 24) return hr + "h ago";
+  var days = Math.floor(hr / 24);
+  if (days < 30) return days + "d ago";
+  return new Date(isoString).toLocaleDateString();
+}
+
+export function populateCliSessionList(sessions) {
+  var pickerLoading = _ctx.$("resume-picker-loading");
+  var pickerEmpty = _ctx.$("resume-picker-empty");
+  var pickerList = _ctx.$("resume-picker-list");
+  if (!pickerLoading || !pickerList) return;
+
+  pickerLoading.classList.add("hidden");
+
+  if (!sessions || sessions.length === 0) {
+    pickerEmpty.classList.remove("hidden");
+    pickerList.classList.add("hidden");
+    return;
+  }
+
+  pickerEmpty.classList.add("hidden");
+  pickerList.classList.remove("hidden");
+  pickerList.innerHTML = "";
+
+  for (var i = 0; i < sessions.length; i++) {
+    var s = sessions[i];
+    var item = document.createElement("div");
+    item.className = "cli-session-item";
+
+    var title = document.createElement("div");
+    title.className = "cli-session-title";
+    title.textContent = s.firstPrompt || "Untitled session";
+    item.appendChild(title);
+
+    var meta = document.createElement("div");
+    meta.className = "cli-session-meta";
+    if (s.lastActivity) {
+      var time = document.createElement("span");
+      time.textContent = relativeTime(s.lastActivity);
+      meta.appendChild(time);
+    }
+    if (s.model) {
+      var model = document.createElement("span");
+      model.className = "badge";
+      model.textContent = s.model;
+      meta.appendChild(model);
+    }
+    if (s.gitBranch) {
+      var branch = document.createElement("span");
+      branch.className = "badge";
+      branch.textContent = s.gitBranch;
+      meta.appendChild(branch);
+    }
+    item.appendChild(meta);
+
+    (function (sessionId) {
+      item.addEventListener("click", function () {
+        if (_ctx.ws && _ctx.connected) {
+          _ctx.ws.send(JSON.stringify({ type: "resume_session", cliSessionId: sessionId }));
+        }
+        var modal = _ctx.$("resume-modal");
+        if (modal) modal.classList.add("hidden");
+        _ctx.closeSidebar();
+      });
+    })(s.sessionId);
+
+    pickerList.appendChild(item);
+  }
+}