clay-server 2.47.0-beta.5 → 3.0.0-beta.1

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

@@ -10,9 +10,10 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { closeSidebar } from './sidebar.js';
 import { showIconTooltip, hideIconTooltip, closeUserCtxMenu, getCurrentDmUserId } from './sidebar-mates.js';
-import { switchProject, openAddProjectModal, getCachedProjects } from './app-projects.js';
+import { switchProject, openAddProjectModal } from './app-projects.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
+import { aggregateFamily } from './worktree-family.js';
 
 // --- Project state ---
 var cachedProjectList = [];
@@ -31,12 +32,6 @@ var emojiPickerEl = null;
 var draggedSlug = null;
 var draggedEl = null;
 
-// --- Worktree folder collapse state (persisted in localStorage) ---
-var wtCollapsed = {};
-try {
-  wtCollapsed = JSON.parse(localStorage.getItem("clay-wt-collapsed") || "{}");
-} catch (e) {}
-
 var EMOJI_CATEGORIES = [
   { id: "frequent", icon: "🕐", label: "Frequent", emojis: [
     "😀","😎","🤓","🧠","💡","🔥","⚡","🚀",
@@ -524,17 +519,8 @@ function showIconCtxMenu(anchorEl, slug, name) {
       }
     });
     menu.appendChild(removeWtItem);
-  } else {
-    var wtItem = document.createElement("button");
-    wtItem.className = "project-ctx-item";
-    wtItem.innerHTML = iconHtml("git-branch") + " <span>Add Worktree</span>";
-    wtItem.addEventListener("click", function (e) {
-      e.stopPropagation();
-      closeProjectCtxMenu();
-      showWorktreeModal(slug, name || slug);
-    });
-    menu.appendChild(wtItem);
   }
+  // Worktree creation lives in the title-bar branch chip, not here.
 
   document.body.appendChild(menu);
   projectCtxMenu = menu;
@@ -619,20 +605,7 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     }
   }
 
-  var sep2 = document.createElement("div");
-  sep2.className = "project-ctx-separator";
-  menu.appendChild(sep2);
-
-  // --- Add Worktree ---
-  var wtItem = document.createElement("button");
-  wtItem.className = "project-ctx-item";
-  wtItem.innerHTML = iconHtml("git-branch") + " <span>Add Worktree</span>";
-  wtItem.addEventListener("click", function (e) {
-    e.stopPropagation();
-    closeProjectCtxMenu();
-    showWorktreeModal(slug, name || slug);
-  });
-  menu.appendChild(wtItem);
+  // Worktree creation lives in the title-bar branch chip, not here.
 
   if (!store.get('permissions') || store.get('permissions').deleteProject !== false) {
     var sep3 = document.createElement("div");
@@ -953,13 +926,6 @@ function setupDragHandlers(el, slug) {
   });
 }
 
-// --- Worktree folder collapse ---
-
-function setWtCollapsed(slug, collapsed) {
-  wtCollapsed[slug] = collapsed;
-  try { localStorage.setItem("clay-wt-collapsed", JSON.stringify(wtCollapsed)); } catch (e) {}
-}
-
 function groupProjects(projects) {
   var parents = [];
   var wtByParent = {};
@@ -975,6 +941,21 @@ function groupProjects(projects) {
   return { parents: parents, wtByParent: wtByParent };
 }
 
+function aggregateProjectFamily(parent, worktrees) {
+  var aggregate = aggregateFamily(parent, worktrees);
+  aggregate.hasFamilyPendingAttention = getPendingTuiAttention(parent.slug) > 0;
+  aggregate.hasWorktreeUnread = false;
+  aggregate.hasWorktreePending = false;
+  for (var i = 0; i < worktrees.length; i++) {
+    if (getPendingTuiAttention(worktrees[i].slug) > 0) aggregate.hasFamilyPendingAttention = true;
+    if (worktrees[i].unread > 0) aggregate.hasWorktreeUnread = true;
+    if (worktrees[i].pendingPermissions > 0 || getPendingTuiAttention(worktrees[i].slug) > 0) {
+      aggregate.hasWorktreePending = true;
+    }
+  }
+  return aggregate;
+}
+
 // --- Icon item creation ---
 
 function createIconItem(p, currentSlug) {
@@ -1006,7 +987,7 @@ function createIconItem(p, currentSlug) {
 
   var projectBadge = document.createElement("span");
   projectBadge.className = "icon-strip-project-badge";
-  if (p.unread > 0 && !isActive) {
+  if (p.unread > 0 && (!isActive || p.hasWorktreeUnread)) {
     projectBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
     projectBadge.classList.add("has-unread");
   }
@@ -1016,7 +997,8 @@ function createIconItem(p, currentSlug) {
   // broadcast — they surface via tui_attention notifications. We shake the
   // same icon for either, so the user notices regardless of which engine
   // is asking.
-  if (!isActive && (p.pendingPermissions > 0 || getPendingTuiAttention(p.slug) > 0)) {
+  if ((!isActive && (p.pendingPermissions > 0 || p.hasFamilyPendingAttention || getPendingTuiAttention(p.slug) > 0)) ||
+      p.hasWorktreePending) {
     el.classList.add("has-pending-perm");
   }
 
@@ -1037,7 +1019,7 @@ function createIconItem(p, currentSlug) {
 
 // --- Worktree creation modal ---
 
-function showWorktreeModal(parentSlug, parentName) {
+export function showWorktreeModal(parentSlug, parentName) {
   var existing = document.getElementById("wt-modal-container");
   if (existing) existing.remove();
 
@@ -1192,164 +1174,17 @@ export function renderIconStrip(projects, currentSlug) {
   for (var i = 0; i < grouped.parents.length; i++) {
     var p = grouped.parents[i];
     var worktrees = grouped.wtByParent[p.slug] || [];
-    var hasWorktrees = worktrees.length > 0;
-
-    if (!hasWorktrees) {
-      var el = createIconItem(p, currentSlug);
-      (function (slug, name, elem) {
-        elem.addEventListener("contextmenu", function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          showIconCtxMenu(elem, slug, name);
-        });
-      })(p.slug, p.name || p.slug, el);
-      setupDragHandlers(el, p.slug);
-      container.appendChild(el);
-      continue;
-    }
-
-    // Folder group for parent + worktrees
-    var folder = document.createElement("div");
-    folder.className = "icon-strip-group";
-    folder.dataset.parentSlug = p.slug;
-    if (wtCollapsed[p.slug]) folder.classList.add("collapsed");
-
-    if (!p.isProcessing) {
-      for (var wpi = 0; wpi < worktrees.length; wpi++) {
-        if (worktrees[wpi].isProcessing) { p.isProcessing = true; break; }
-      }
-    }
-
-    var header = createIconItem(p, currentSlug);
-    header.classList.add("folder-header");
+    var familyProject = aggregateProjectFamily(p, worktrees);
+    var el = createIconItem(familyProject, currentSlug);
     (function (slug, name, elem) {
       elem.addEventListener("contextmenu", function (e) {
         e.preventDefault();
         e.stopPropagation();
         showIconCtxMenu(elem, slug, name);
       });
-    })(p.slug, p.name || p.slug, header);
-    setupDragHandlers(header, p.slug);
-
-    var chevron = document.createElement("span");
-    chevron.className = "icon-strip-group-chevron";
-    chevron.innerHTML = '<i data-lucide="git-branch"></i>';
-    (function (parentSlug, folderEl) {
-      chevron.addEventListener("click", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var nowCollapsed = folderEl.classList.toggle("collapsed");
-        setWtCollapsed(parentSlug, nowCollapsed);
-      });
-      chevron.addEventListener("contextmenu", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-      });
-    })(p.slug, folder);
-    chevron.setAttribute("data-tip", "Toggle worktrees");
-    header.appendChild(chevron);
-    folder.appendChild(header);
-
-    var itemsContainer = document.createElement("div");
-    itemsContainer.className = "icon-strip-group-items";
-
-    for (var wi = 0; wi < worktrees.length; wi++) {
-      (function (wt) {
-        var wtEl = document.createElement("a");
-        var isWtActive = wt.slug === currentSlug && !currentDmUserId;
-        var isAccessible = wt.worktreeAccessible !== false;
-        wtEl.className = "icon-strip-wt-item" + (isWtActive ? " active" : "") + (!isAccessible ? " wt-disabled" : "");
-        wtEl.href = "/p/" + wt.slug + "/";
-        wtEl.dataset.slug = wt.slug;
-
-        if (wt.icon) {
-          var wtEmoji = document.createElement("span");
-          wtEmoji.className = "wt-branch-abbrev project-emoji";
-          wtEmoji.textContent = wt.icon;
-          parseEmojis(wtEmoji);
-          wtEl.appendChild(wtEmoji);
-        } else {
-          var abbrev = document.createElement("span");
-          abbrev.className = "wt-branch-abbrev";
-          abbrev.textContent = getProjectAbbrev(wt.name);
-          wtEl.appendChild(abbrev);
-        }
-
-        var wtStatus = document.createElement("span");
-        wtStatus.className = "icon-strip-status";
-        if (wt.isProcessing) wtStatus.classList.add("processing");
-        wtEl.appendChild(wtStatus);
-
-        var tooltipText = wt.name;
-        if (!isAccessible) {
-          tooltipText += " (outside project path, cannot be accessed)";
-        }
-        (function (text, elem) {
-          elem.addEventListener("mouseenter", function () { showIconTooltip(elem, text); });
-          elem.addEventListener("mouseleave", hideIconTooltip);
-        })(tooltipText, wtEl);
-
-        if (isAccessible) {
-          (function (slug) {
-            wtEl.addEventListener("click", function (e) {
-              e.preventDefault();
-              if (switchProject) switchProject(slug);
-            });
-          })(wt.slug);
-        } else {
-          wtEl.addEventListener("click", function (e) {
-            e.preventDefault();
-          });
-        }
-
-        if (isAccessible) {
-          (function (slug, name, elem) {
-            elem.addEventListener("contextmenu", function (e) {
-              e.preventDefault();
-              e.stopPropagation();
-              showIconCtxMenu(elem, slug, name);
-            });
-          })(wt.slug, wt.name, wtEl);
-        } else {
-          wtEl.addEventListener("contextmenu", function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-          });
-        }
-
-        if (!isWtActive && (wt.pendingPermissions > 0 || getPendingTuiAttention(wt.slug) > 0)) {
-          wtEl.classList.add("has-pending-perm");
-        }
-
-        itemsContainer.appendChild(wtEl);
-      })(worktrees[wi]);
-    }
-
-    var hasWtPendingPerm = false;
-    for (var wpi2 = 0; wpi2 < worktrees.length; wpi2++) {
-      if (worktrees[wpi2].pendingPermissions > 0 || getPendingTuiAttention(worktrees[wpi2].slug) > 0) {
-        hasWtPendingPerm = true;
-        break;
-      }
-    }
-    if (hasWtPendingPerm) folder.classList.remove("collapsed");
-
-    var addBtn = document.createElement("button");
-    addBtn.className = "icon-strip-group-add";
-    addBtn.textContent = "+";
-    (function (parentSlug, parentName, btn) {
-      btn.addEventListener("click", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        showWorktreeModal(parentSlug, parentName);
-      });
-      btn.addEventListener("mouseenter", function () { showIconTooltip(btn, "New worktree"); });
-      btn.addEventListener("mouseleave", hideIconTooltip);
-    })(p.slug, p.name, addBtn);
-    itemsContainer.appendChild(addBtn);
-
-    folder.appendChild(itemsContainer);
-    container.appendChild(folder);
+    })(p.slug, p.name || p.slug, el);
+    setupDragHandlers(el, p.slug);
+    container.appendChild(el);
   }
 
   // Update home icon active state
@@ -1377,50 +1212,17 @@ function renderProjectList(projects, currentSlug) {
   for (var i = 0; i < grouped.parents.length; i++) {
     var p = grouped.parents[i];
     var worktrees = grouped.wtByParent[p.slug] || [];
-
-    if (worktrees.length === 0) {
-      list.appendChild(createMobileProjectItem(p, currentSlug, false));
-      continue;
-    }
-
-    var folderDiv = document.createElement("div");
-    folderDiv.className = "mobile-project-folder";
-    if (wtCollapsed[p.slug]) folderDiv.classList.add("collapsed");
-
-    var headerEl = createMobileProjectItem(p, currentSlug, false);
-    var chevron = document.createElement("span");
-    chevron.className = "mobile-folder-chevron";
-    chevron.innerHTML = "&#9660;";
-    (function (parentSlug, fDiv) {
-      chevron.addEventListener("click", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var nowCollapsed = fDiv.classList.toggle("collapsed");
-        setWtCollapsed(parentSlug, nowCollapsed);
-      });
-    })(p.slug, folderDiv);
-    headerEl.appendChild(chevron);
-    folderDiv.appendChild(headerEl);
-
-    var wtList = document.createElement("div");
-    wtList.className = "mobile-folder-items";
-    for (var wi = 0; wi < worktrees.length; wi++) {
-      var isAccessible = worktrees[wi].worktreeAccessible !== false;
-      var wtItem = createMobileProjectItem(worktrees[wi], currentSlug, true);
-      if (!isAccessible) wtItem.classList.add("wt-disabled");
-      if (!isAccessible) {
-        wtItem.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); });
-      }
-      wtList.appendChild(wtItem);
-    }
-    folderDiv.appendChild(wtList);
-    list.appendChild(folderDiv);
+    list.appendChild(createMobileProjectItem(aggregateProjectFamily(p, worktrees), currentSlug));
   }
 }
 
-function createMobileProjectItem(p, currentSlug, isWorktree) {
+function createMobileProjectItem(p, currentSlug) {
   var el = document.createElement("button");
-  el.className = "mobile-project-item" + (p.slug === currentSlug ? " active" : "") + (isWorktree ? " wt-item" : "");
+  var isActive = p.slug === currentSlug;
+  el.className = "mobile-project-item" + (isActive ? " active" : "");
+  if ((!isActive && (p.pendingPermissions > 0 || p.hasFamilyPendingAttention)) || p.hasWorktreePending) {
+    el.classList.add("has-pending-perm");
+  }
 
   var abbrev = document.createElement("span");
   abbrev.className = "mobile-project-abbrev";
@@ -1443,6 +1245,13 @@ function createMobileProjectItem(p, currentSlug, isWorktree) {
     el.appendChild(dot);
   }
 
+  if (p.unread > 0 && (!isActive || p.hasWorktreeUnread)) {
+    var badge = document.createElement("span");
+    badge.className = "mobile-project-unread";
+    badge.textContent = p.unread > 99 ? "99+" : String(p.unread);
+    el.appendChild(badge);
+  }
+
   el.addEventListener("click", function () {
     if (switchProject) switchProject(p.slug);
     if (closeSidebar) closeSidebar();
@@ -1454,12 +1263,30 @@ function createMobileProjectItem(p, currentSlug, isWorktree) {
 export function getEmojiCategories() { return EMOJI_CATEGORIES; }
 
 export function updateProjectBadge(slug, count) {
-  var icon = document.querySelector('.icon-strip-item[data-slug="' + slug + '"]');
+  var targetSlug = slug;
+  for (var i = 0; i < cachedProjectList.length; i++) {
+    if (cachedProjectList[i].slug !== slug) continue;
+    cachedProjectList[i].unread = count;
+    if (cachedProjectList[i].isWorktree && cachedProjectList[i].parentSlug) {
+      targetSlug = cachedProjectList[i].parentSlug;
+    }
+    break;
+  }
+
+  var displayCount = count;
+  var grouped = groupProjects(cachedProjectList);
+  for (var pi = 0; pi < grouped.parents.length; pi++) {
+    if (grouped.parents[pi].slug !== targetSlug) continue;
+    displayCount = aggregateFamily(grouped.parents[pi], grouped.wtByParent[targetSlug] || []).unread;
+    break;
+  }
+
+  var icon = document.querySelector('.icon-strip-item[data-slug="' + targetSlug + '"]');
   if (!icon) return;
   var badge = icon.querySelector(".icon-strip-project-badge");
   if (!badge) return;
-  if (count > 0) {
-    badge.textContent = count > 99 ? "99+" : String(count);
+  if (displayCount > 0) {
+    badge.textContent = displayCount > 99 ? "99+" : String(displayCount);
     badge.classList.add("has-unread");
   } else {
     badge.textContent = "";

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

@@ -13,6 +13,9 @@ 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 } from './app-rendering.js';
+import { openGroup, separateGroup } from './split-view.js';
+import { groupedSessionIds } from './split-group-helpers.js';
+import { openPairDialog } from './split-pair-ui.js';
 
 
 // --- Session state ---
@@ -230,6 +233,9 @@ function collectItemSessionIds(item) {
     }
     return ids;
   }
+  if (item.type === "split-group" && Array.isArray(item.members)) {
+    return item.members.map(function (session) { return session.id; });
+  }
   return [];
 }
 
@@ -407,6 +413,23 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
     })(VENDOR_ORDER[i]);
   }
 
+  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.
@@ -418,7 +441,7 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
     var skipItem = document.createElement("button");
     skipItem.className = "session-ctx-item";
     skipItem.type = "button";
-    skipItem.innerHTML = iconHtml("shield-off") + " <span>Skip permissions (TUI)</span>";
+    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();
@@ -590,6 +613,7 @@ export function initSidebarSessions() {
     if (state.lastVendor !== prev.lastVendor || state.installedVendors !== prev.installedVendors) {
       renderSessionList(null);
     }
+    if (state.splitPanes !== prev.splitPanes) renderSessionList(null);
   });
 
   // --- Resume session picker ---
@@ -656,6 +680,7 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
   });
   menu.appendChild(renameItem);
 
+
   // Session visibility toggle (only the session owner can change)
   if (store.get('isMultiUserMode') && sessionData && sessionData.ownerId && sessionData.ownerId === store.get('myUserId')) {
     var currentVis = (sessionData && sessionData.sessionVisibility) || "shared";
@@ -705,6 +730,45 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
   });
 }
 
+function showSplitGroupCtxMenu(anchor, group) {
+  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();
+    startSplitGroupInlineRename(group);
+  });
+  menu.appendChild(renameItem);
+
+  var separateItem = document.createElement("button");
+  separateItem.className = "session-ctx-item";
+  separateItem.innerHTML = iconHtml("columns-2") + " <span>Separate</span>";
+  separateItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeSessionCtxMenu();
+    separateGroup(group);
+  });
+  menu.appendChild(separateItem);
+
+  document.body.appendChild(menu);
+  sessionCtxMenu = menu;
+  refreshIcons();
+  requestAnimationFrame(function () {
+    var rect = anchor.getBoundingClientRect();
+    menu.style.position = "fixed";
+    menu.style.top = (rect.bottom + 2) + "px";
+    menu.style.right = (window.innerWidth - rect.right) + "px";
+    menu.style.left = "auto";
+    var menuRect = menu.getBoundingClientRect();
+    if (menuRect.bottom > window.innerHeight - 8) menu.style.top = (rect.top - menuRect.height - 2) + "px";
+  });
+}
+
 function showLoopCtxMenu(anchorBtn, loopId, loopName, childCount) {
   closeSessionCtxMenu();
 
@@ -796,6 +860,40 @@ function startInlineRename(sessionId, currentTitle) {
   input.addEventListener("click", function (e) { e.stopPropagation(); });
 }
 
+function startSplitGroupInlineRename(group) {
+  var el = getSessionListEl().querySelector('.split-group-item[data-split-group-id="' + group.id + '"]');
+  if (!el) return;
+  var textSpan = el.querySelector(".split-group-name");
+  if (!textSpan) return;
+  var input = document.createElement("input");
+  input.type = "text";
+  input.className = "session-rename-input";
+  input.value = group.name || "Split";
+  var original = textSpan.textContent;
+  textSpan.innerHTML = "";
+  textSpan.appendChild(input);
+  input.focus();
+  input.select();
+  var finished = false;
+  function finish(commit) {
+    if (finished) return;
+    finished = true;
+    var name = input.value.trim();
+    if (commit && name && name !== group.name && getWs() && store.get('connected')) {
+      getWs().send(JSON.stringify({ type: "split_group_rename", id: group.id, name: name }));
+      textSpan.textContent = name;
+    } else {
+      textSpan.textContent = original;
+    }
+  }
+  input.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); finish(true); }
+    if (e.key === "Escape") { e.preventDefault(); finish(false); }
+  });
+  input.addEventListener("blur", function () { finish(true); });
+  input.addEventListener("click", function (e) { e.stopPropagation(); });
+}
+
 function startLoopInlineRename(loopId, currentName) {
   var el = getSessionListEl().querySelector('.session-loop-group[data-loop-id="' + loopId + '"]');
   if (!el) return;
@@ -1207,6 +1305,48 @@ function renderSessionItem(s) {
   return el;
 }
 
+function renderSplitGroupItem(group, members) {
+  var el = document.createElement("div");
+  var split = store.get('splitPanes');
+  el.className = "session-item split-group-item" + (split && split.groupId === group.id ? " active" : "");
+  el.dataset.splitGroupId = group.id;
+
+  var text = document.createElement("span");
+  text.className = "session-item-text split-group-text";
+  var html = '<span class="split-group-glyph" aria-hidden="true">' + iconHtml("columns-2") + '</span><span class="split-group-vendors">';
+  for (var i = 0; i < members.length; i++) {
+    var vendor = members[i].vendor || "claude";
+    html += '<img class="session-vendor-icon split-group-vendor" src="' +
+      (VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude) + '" alt="" title="' +
+      escapeHtml(VENDOR_NAMES[vendor] || vendor) + '">';
+  }
+  html += "</span>";
+  if (members[0].isProcessing || members[1].isProcessing) html += '<span class="session-processing"></span>';
+  html += '<span class="split-group-name">' + highlightMatch(group.name || "Split", searchQuery) + "</span>";
+  text.innerHTML = html;
+  el.appendChild(text);
+
+  var unread = (members[0].unread || 0) + (members[1].unread || 0);
+  var badge = document.createElement("span");
+  badge.className = "session-unread-badge" + (unread > 0 ? " has-unread" : "");
+  badge.dataset.splitGroupId = group.id;
+  if (unread > 0) badge.textContent = unread > 99 ? "99+" : String(unread);
+  el.appendChild(badge);
+
+  el.addEventListener("click", function () {
+    if (openGroup(group)) {
+      dismissOverlayPanels();
+      closeSidebar();
+    }
+  });
+  el.addEventListener("contextmenu", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    showSplitGroupCtxMenu(el, group);
+  });
+  return el;
+}
+
 // --- Main session list ---
 
 export function renderSessionList(sessions) {
@@ -1219,10 +1359,15 @@ export function renderSessionList(sessions) {
 
   // Partition: loop sessions vs normal sessions
   // Group by loopId + date so all runs of the same task on the same day are merged
+  var splitGroups = store.get('splitGroups') || [];
+  var groupedIds = groupedSessionIds(splitGroups);
+  var sessionsById = new Map();
+  for (var si = 0; si < cachedSessions.length; si++) sessionsById.set(cachedSessions[si].id, cachedSessions[si]);
   var loopGroups = {}; // groupKey -> [sessions]
   var normalSessions = [];
   for (var i = 0; i < cachedSessions.length; i++) {
     var s = cachedSessions[i];
+    if (groupedIds.has(s.id)) continue;
     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;
@@ -1242,6 +1387,18 @@ export function renderSessionList(sessions) {
   for (var j = 0; j < normalSessions.length; j++) {
     items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
   }
+  for (var sg = 0; sg < splitGroups.length; sg++) {
+    var splitGroup = splitGroups[sg];
+    var leftMember = sessionsById.get(splitGroup.members[0]);
+    var rightMember = sessionsById.get(splitGroup.members[1]);
+    if (!leftMember || !rightMember) continue;
+    items.push({
+      type: "split-group",
+      group: splitGroup,
+      members: [leftMember, rightMember],
+      lastActivity: Math.max(leftMember.lastActivity || 0, rightMember.lastActivity || 0),
+    });
+  }
   var groupKeys = Object.keys(loopGroups);
   for (var k = 0; k < groupKeys.length; k++) {
     var gk = groupKeys[k];
@@ -1265,6 +1422,8 @@ export function renderSessionList(sessions) {
     if (item.type === "session" && item.data && !isSessionVisibleBySearch(item.data.id)) {
       continue;
     }
+    if (item.type === "split-group" && searchMatchIds !== null &&
+        !searchMatchIds.has(item.members[0].id) && !searchMatchIds.has(item.members[1].id)) continue;
     if (item.type === "session" && item.data && item.data.bookmarked) {
       bookmarkedItems.push(item);
     } else {
@@ -1320,6 +1479,8 @@ export function renderSessionList(sessions) {
       if (loopEl) {
         regularContainer.appendChild(loopEl);
       }
+    } else if (item.type === "split-group") {
+      regularContainer.appendChild(renderSplitGroupItem(item.group, item.members));
     } else {
       regularContainer.appendChild(renderSessionItem(item.data));
     }
@@ -1400,7 +1561,20 @@ function renderPresenceAvatars(el, sessionId) {
 // --- Session badge ---
 
 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 + '"]');
+  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 + '"]');
+    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);

package/lib/public/modules/sidebar.js

@@ -12,6 +12,7 @@ import {
   getCurrentDmUserId
 } from './sidebar-mates.js';
 import { initSidebarMobile } from './sidebar-mobile.js';
+import { store } from './store.js';
 
 var ctx;
 var _syncResizeHandles = null;
@@ -26,6 +27,7 @@ export function dismissOverlayPanels() {
 }
 
 export function updatePageTitle() {
+  if (store.get('paneMode')) return;
   var sessionTitle = "";
   var activeItem = ctx.sessionListEl.querySelector(".session-item.active .session-item-text");
   if (activeItem) sessionTitle = activeItem.textContent;