clay-server 5.1.0-beta.1 → 5.1.0-beta.3

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

@@ -9,13 +9,16 @@ import { parseEmojis } from './markdown.js';
 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 { showIconTooltip, hideIconTooltip, bindIconTooltip, closeUserCtxMenu, getCurrentDmUserId } from './sidebar-mates.js';
 import { switchProject, openAddProjectModal, getCachedProjects } from './app-projects.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
 import { isExternalWorktree, externalWorktreeTooltip, appendExternalWorktreeBadge } from './worktree-location.js';
 import { groupProjects } from './project-grouping.js';
 import { showProjectAccessPopover } from './project-access.js';
+import { renderProjectMates, mateForWorkspace } from './project-mate-navigation.js';
+import { openProjectCreateChoice } from './project-mate-creation-workspace.js';
+import { openHomeMateSettings } from './home-mate-settings.js';
 
 // --- Project state ---
 var cachedProjectList = [];
@@ -23,6 +26,7 @@ var cachedCurrentSlug = null;
 
 // --- Project context menu ---
 var projectCtxMenu = null;
+var projectCtxAnchor = null;
 
 // --- Emoji picker ---
 var emojiPickerEl = null;
@@ -250,14 +254,15 @@ export function initSidebarProjects() {
   var addBtn = document.getElementById("icon-strip-add");
   if (addBtn) {
     addBtn.addEventListener("click", function () {
-      if (openAddProjectModal) {
-        openAddProjectModal();
-      } else {
-        var modal = document.getElementById("add-project-modal");
-        if (modal) modal.classList.remove("hidden");
-      }
+      openProjectCreateChoice(addBtn, function () {
+        if (openAddProjectModal) openAddProjectModal();
+        else {
+          var modal = document.getElementById("add-project-modal");
+          if (modal) modal.classList.remove("hidden");
+        }
+      });
     });
-    addBtn.addEventListener("mouseenter", function () { showIconTooltip(addBtn, "Add project"); });
+    addBtn.addEventListener("mouseenter", function () { showIconTooltip(addBtn, "Add Mate or project"); });
     addBtn.addEventListener("mouseleave", hideIconTooltip);
   }
 
@@ -273,7 +278,7 @@ export function initSidebarProjects() {
 
   // Tooltip + click for home icon
   var homeIcon = document.querySelector(".icon-strip-home");
-  if (homeIcon) {
+  if (homeIcon && !homeIcon.classList.contains("icon-strip-brand")) {
     homeIcon.addEventListener("mouseenter", function () { showIconTooltip(homeIcon, "Clay Studio"); });
     homeIcon.addEventListener("mouseleave", hideIconTooltip);
     homeIcon.addEventListener("click", function (e) {
@@ -288,6 +293,11 @@ export function initSidebarProjects() {
   if (dropdownBtn) {
     dropdownBtn.addEventListener("click", function (e) {
       e.stopPropagation();
+      var currentMate = mateForWorkspace(store.snap());
+      if (currentMate) {
+        openHomeMateSettings(currentMate.id, dropdownBtn, { section: "general" });
+        return;
+      }
       var current = null;
       for (var i = 0; i < cachedProjectList.length; i++) {
         if (cachedProjectList[i].slug === cachedCurrentSlug) {
@@ -339,82 +349,21 @@ export { getProjectAbbrev };
 
 // --- Project context menu ---
 
-export function closeProjectCtxMenu() {
+export function closeProjectCtxMenu(options) {
   if (projectCtxMenu) {
     projectCtxMenu.remove();
     projectCtxMenu = null;
   }
+  if (options && options.restoreFocus && projectCtxAnchor && projectCtxAnchor.isConnected) projectCtxAnchor.focus();
+  projectCtxAnchor = null;
 }
 
-function showIconCtxMenu(anchorEl, slug, name, options) {
-  closeProjectCtxMenu();
-  if (closeUserCtxMenu) closeUserCtxMenu();
-  closeEmojiPicker();
-
-  var menu = document.createElement("div");
-  menu.className = "project-ctx-menu";
-
-  var isWorktree = slug.indexOf("--") !== -1;
-
-  var iconItem = document.createElement("button");
-  iconItem.className = "project-ctx-item";
-  iconItem.innerHTML = iconHtml("smile") + " <span>Set Icon</span>";
-  iconItem.addEventListener("click", function (e) {
-    e.stopPropagation();
-    closeProjectCtxMenu();
-    showEmojiPicker(slug, anchorEl);
-  });
-  menu.appendChild(iconItem);
-
-  if (isWorktree) {
-    if (!options || options.canRemoveWorktree !== false) {
-      var removeWtItem = document.createElement("button");
-      removeWtItem.className = "project-ctx-item project-ctx-delete";
-      removeWtItem.innerHTML = iconHtml("trash-2") + " <span>Remove Worktree</span>";
-      removeWtItem.addEventListener("click", function (e) {
-        e.stopPropagation();
-        closeProjectCtxMenu();
-        if (getWs() && store.get('connected')) {
-          getWs().send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
-        }
-      });
-      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);
-  }
-
-  document.body.appendChild(menu);
-  projectCtxMenu = menu;
-  refreshIcons();
-
-  requestAnimationFrame(function () {
-    var rect = anchorEl.getBoundingClientRect();
-    menu.style.position = "fixed";
-    menu.style.left = (rect.right + 6) + "px";
-    menu.style.top = rect.top + "px";
-    var menuRect = menu.getBoundingClientRect();
-    if (menuRect.right > window.innerWidth - 8) {
-      menu.style.left = (rect.left - menuRect.width - 6) + "px";
-    }
-    if (menuRect.bottom > window.innerHeight - 8) {
-      menu.style.top = (window.innerHeight - menuRect.height - 8) + "px";
-    }
-  });
-}
-
-function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
+export function showProjectCtxMenu(anchorEl, slug, name, icon, position, options) {
+  options = options || {};
   closeProjectCtxMenu();
   if (closeUserCtxMenu) closeUserCtxMenu();
   closeEmojiPicker();
+  projectCtxAnchor = anchorEl;
   var projects = getCachedProjects();
   var targetProject = null;
   for (var projectIndex = 0; projectIndex < projects.length; projectIndex++) {
@@ -423,10 +372,12 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
 
   var menu = document.createElement("div");
   menu.className = "project-ctx-menu";
+  menu.setAttribute("role", "menu");
 
   // --- Set Icon ---
   var iconItem = document.createElement("button");
   iconItem.className = "project-ctx-item";
+  iconItem.setAttribute("role", "menuitem");
   iconItem.innerHTML = iconHtml("smile") + " <span>Set Icon</span>";
   iconItem.addEventListener("click", function (e) {
     e.stopPropagation();
@@ -439,6 +390,7 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
   if (!store.get('permissions') || store.get('permissions').projectSettings !== false) {
     var settingsItem = document.createElement("button");
     settingsItem.className = "project-ctx-item";
+    settingsItem.setAttribute("role", "menuitem");
     settingsItem.innerHTML = iconHtml("settings") + " <span>Project Settings</span>";
     settingsItem.addEventListener("click", function (e) {
       e.stopPropagation();
@@ -461,11 +413,12 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
   // --- Share ---
   var shareItem = document.createElement("button");
   shareItem.className = "project-ctx-item";
+  shareItem.setAttribute("role", "menuitem");
   shareItem.innerHTML = iconHtml("share") + " <span>Share</span>";
   shareItem.addEventListener("click", function (e) {
     e.stopPropagation();
     closeProjectCtxMenu();
-    triggerShare();
+    triggerShare(options.shareTargetSlug ? { projectSlug: slug, title: name || slug } : undefined);
   });
   menu.appendChild(shareItem);
 
@@ -476,6 +429,7 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     if (isProjectOwner || isAdmin) {
       var accessItem = document.createElement("button");
       accessItem.className = "project-ctx-item";
+      accessItem.setAttribute("role", "menuitem");
       accessItem.innerHTML = iconHtml("users") + " <span>Manage Access</span>";
       accessItem.addEventListener("click", function (e) {
         e.stopPropagation();
@@ -486,14 +440,20 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     }
   }
 
-  var sep2 = document.createElement("div");
-  sep2.className = "project-ctx-separator";
-  menu.appendChild(sep2);
+  var isWorktree = slug.indexOf("--") !== -1;
+  var canRemoveTarget = !isWorktree || options.canRemoveWorktree !== false;
+  var canDeleteTarget = canRemoveTarget && (!store.get('permissions') || store.get('permissions').deleteProject !== false);
+  if (!isWorktree || canDeleteTarget) {
+    var sep2 = document.createElement("div");
+    sep2.className = "project-ctx-separator";
+    menu.appendChild(sep2);
+  }
 
   // --- Add Worktree ---
   if (slug.indexOf("--") === -1) {
     var wtItem = document.createElement("button");
     wtItem.className = "project-ctx-item";
+    wtItem.setAttribute("role", "menuitem");
     wtItem.innerHTML = iconHtml("git-branch") + " <span>Add Worktree</span>";
     wtItem.addEventListener("click", function (e) {
       e.stopPropagation();
@@ -503,14 +463,17 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     menu.appendChild(wtItem);
   }
 
-  if (!store.get('permissions') || store.get('permissions').deleteProject !== false) {
-    var sep3 = document.createElement("div");
-    sep3.className = "project-ctx-separator";
-    menu.appendChild(sep3);
+  if (canDeleteTarget) {
+    if (!isWorktree) {
+      var sep3 = document.createElement("div");
+      sep3.className = "project-ctx-separator";
+      menu.appendChild(sep3);
+    }
 
     var deleteItem = document.createElement("button");
     deleteItem.className = "project-ctx-item project-ctx-delete";
-    deleteItem.innerHTML = iconHtml("trash-2") + " <span>Remove Project</span>";
+    deleteItem.setAttribute("role", "menuitem");
+    deleteItem.innerHTML = iconHtml("trash-2") + " <span>" + (isWorktree ? "Remove Worktree" : "Remove Project") + "</span>";
     deleteItem.addEventListener("click", function (e) {
       e.stopPropagation();
       closeProjectCtxMenu();
@@ -525,6 +488,28 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
   projectCtxMenu = menu;
   refreshIcons();
 
+  menu.addEventListener("keydown", function (event) {
+    var items = Array.from(menu.querySelectorAll('.project-ctx-item:not([disabled])'));
+    var index = items.indexOf(document.activeElement);
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeProjectCtxMenu({ restoreFocus: true });
+      return;
+    }
+    if (event.key === "Tab") {
+      closeProjectCtxMenu();
+      return;
+    }
+    if (event.key === "Home" || event.key === "End" || event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (event.key === "Home") index = 0;
+      else if (event.key === "End") index = items.length - 1;
+      else if (event.key === "ArrowDown") index = (index + 1 + items.length) % items.length;
+      else index = (index - 1 + items.length) % items.length;
+      if (items[index]) items[index].focus();
+    }
+  });
+
   requestAnimationFrame(function () {
     var rect = anchorEl.getBoundingClientRect();
     menu.style.position = "fixed";
@@ -542,6 +527,8 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     if (menuRect.bottom > window.innerHeight - 8) {
       menu.style.top = (window.innerHeight - menuRect.height - 8) + "px";
     }
+    var firstItem = menu.querySelector('.project-ctx-item:not([disabled])');
+    if (firstItem) firstItem.focus();
   });
 }
 
@@ -797,7 +784,7 @@ function setupDragHandlers(el, slug) {
     var insertBefore = e.clientY < midY;
 
     var container = document.getElementById("icon-strip-projects");
-    var items = container.querySelectorAll(".icon-strip-item");
+    var items = container.querySelectorAll(".icon-strip-item[data-slug]");
     var slugs = [];
     for (var i = 0; i < items.length; i++) {
       if (items[i].dataset.slug !== draggedSlug) {
@@ -873,10 +860,7 @@ function createIconItem(p, currentSlug) {
     el.classList.add("has-pending-perm");
   }
 
-  (function (name, elem) {
-    elem.addEventListener("mouseenter", function () { showIconTooltip(elem, name); });
-    elem.addEventListener("mouseleave", hideIconTooltip);
-  })(p.name, el);
+  bindIconTooltip(el, { text: p.name, kind: "project" });
 
   (function (slug) {
     el.addEventListener("click", function (e) {
@@ -1037,6 +1021,7 @@ export function renderIconStrip(projects, currentSlug) {
 
   var container = document.getElementById("icon-strip-projects");
   if (!container) return;
+  var focusedMateId = container.contains(document.activeElement) ? document.activeElement.dataset.mateId : null;
   container.innerHTML = "";
 
   var currentDmUserId = getCurrentDmUserId ? getCurrentDmUserId() : null;
@@ -1053,7 +1038,7 @@ export function renderIconStrip(projects, currentSlug) {
         elem.addEventListener("contextmenu", function (e) {
           e.preventDefault();
           e.stopPropagation();
-          showIconCtxMenu(elem, slug, name);
+          showProjectCtxMenu(elem, slug, name, null, null, { shareTargetSlug: true });
         });
       })(p.slug, p.name || p.slug, el);
       setupDragHandlers(el, p.slug);
@@ -1079,7 +1064,7 @@ export function renderIconStrip(projects, currentSlug) {
       elem.addEventListener("contextmenu", function (e) {
         e.preventDefault();
         e.stopPropagation();
-        showIconCtxMenu(elem, slug, name);
+        showProjectCtxMenu(elem, slug, name, null, null, { shareTargetSlug: true });
       });
     })(p.slug, p.name || p.slug, header);
     setupDragHandlers(header, p.slug);
@@ -1136,10 +1121,7 @@ export function renderIconStrip(projects, currentSlug) {
         if (isExternal) appendExternalWorktreeBadge(wtEl, "worktree-external-badge");
 
         var tooltipText = isExternal ? externalWorktreeTooltip(wt.name) : wt.name;
-        (function (text, elem) {
-          elem.addEventListener("mouseenter", function () { showIconTooltip(elem, text); });
-          elem.addEventListener("mouseleave", hideIconTooltip);
-        })(tooltipText, wtEl);
+        bindIconTooltip(wtEl, { text: tooltipText, kind: "project" });
 
         (function (slug) {
           wtEl.addEventListener("click", function (e) {
@@ -1152,7 +1134,7 @@ export function renderIconStrip(projects, currentSlug) {
           elem.addEventListener("contextmenu", function (e) {
             e.preventDefault();
             e.stopPropagation();
-            showIconCtxMenu(elem, slug, name, { canRemoveWorktree: !external });
+            showProjectCtxMenu(elem, slug, name, null, null, { shareTargetSlug: true, canRemoveWorktree: !external });
           });
         })(wt.slug, wt.name, wtEl, isExternal);
 
@@ -1202,6 +1184,11 @@ export function renderIconStrip(projects, currentSlug) {
   }
 
   renderProjectList(projects, currentSlug);
+  renderProjectMates();
+  if (focusedMateId) {
+    var mateButton = container.querySelector('[data-mate-id="' + CSS.escape(focusedMateId) + '"]');
+    if (mateButton) mateButton.focus({ preventScroll: true });
+  }
 
   var iconNodes = [container];
   var mobileProjectList = document.getElementById("project-list");

package/lib/public/modules/sidebar-session-folders-ui.js

@@ -17,7 +17,7 @@ import {
 } from './session-folder-layout.js';
 import { openFolderNameDialog, openFolderPicker, closeFolderModal } from './session-folder-dialogs.js';
 import { openFolderDelete } from './session-folder-delete.js';
-import { openSessionCreate } from './session-create.js';
+import { beginSessionCreate } from './session-create.js';
 import { renderNewSessionButton, renderCreateRow } from './session-create-form.js';
 import { restoreFolderCollapse, toggleFolderCollapse } from './session-folder-collapse.js';
 import { groupUnitsByDate, groupRootSessionIds } from './session-date-groups.js';
@@ -286,7 +286,7 @@ function folderMenuEntries(section, ctx) {
   var at = folders.map(function (f) { return f.id; }).indexOf(section.id);
   var folder = { id: section.id, label: section.label };
   return [
-    { label: "New session here", icon: "plus", run: function () { openSessionCreate(section.id); } },
+    { label: "New session here", icon: "plus", run: function () { beginSessionCreate(section.id); } },
     { label: "Rename", icon: "pencil", run: function () { renameFolder(folder); } },
     { label: "Move up", icon: "arrow-up", disabled: at <= 0, run: function () { shiftFolder(section.id, -1); } },
     { label: "Move down", icon: "arrow-down", disabled: at === -1 || at >= folders.length - 1, run: function () { shiftFolder(section.id, 1); } },

package/lib/public/modules/sidebar-session-hierarchy.js

@@ -2,13 +2,150 @@
 
 import { iconHtml } from './icons.js';
 import { store } from './store.js';
+import { getWs } from './ws-ref.js';
 import { buildSessionHierarchy } from './session-hierarchy.js';
+import { splitGroupRoles } from './split-group-helpers.js';
 
 var expansionBySurface = {
   desktop: new Map(),
   mobile: new Map(),
 };
 
+var workerHistoryMenu = null;
+var workerHistoryOpener = null;
+var workerHistoryKeyHandler = null;
+var workerHistoryOutsideHandler = null;
+
+export function closeWorkerHistoryMenu(restoreFocus) {
+  if (workerHistoryMenu) {
+    workerHistoryMenu.remove();
+    workerHistoryMenu = null;
+  }
+  if (typeof document !== "undefined" && workerHistoryKeyHandler) document.removeEventListener("keydown", workerHistoryKeyHandler, true);
+  if (typeof document !== "undefined" && workerHistoryOutsideHandler) document.removeEventListener("click", workerHistoryOutsideHandler, true);
+  workerHistoryKeyHandler = null;
+  workerHistoryOutsideHandler = null;
+  var opener = workerHistoryOpener;
+  workerHistoryOpener = null;
+  if (restoreFocus !== false && opener && typeof document !== "undefined" && document.contains(opener)) opener.focus();
+}
+
+function workerIsCurrent(worker) {
+  var groups = store.get('splitGroups') || [];
+  for (var i = 0; i < groups.length; i++) {
+    var roles = splitGroupRoles(groups[i]);
+    if (roles && roles.workerIds.indexOf(worker.id) !== -1) return true;
+  }
+  return false;
+}
+
+function workerLabel(worker) {
+  var generation = worker && worker.workerGeneration ? "Generation " + worker.workerGeneration : "Worker";
+  return generation + (workerIsCurrent(worker) ? " · Current" : " · History");
+}
+
+function openWorkerHistoryMenu(button, driver, workers, options) {
+  var opts = options || {};
+  if (opts.validate && !opts.validate(driver, workers)) return;
+  closeWorkerHistoryMenu();
+  var menu = document.createElement("div");
+  menu.className = "session-worker-history-menu";
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("aria-label", "Worker history for " + (driver.title || "this session"));
+  var heading = document.createElement("div");
+  heading.className = "session-worker-history-heading";
+  heading.textContent = "Worker history";
+  menu.appendChild(heading);
+  for (var i = 0; i < workers.length; i++) {
+    var worker = workers[i];
+    var item = document.createElement("button");
+    item.type = "button";
+    item.className = "session-worker-history-item" + (workerIsCurrent(worker) ? " current" : "");
+    item.setAttribute("role", "menuitem");
+    item.setAttribute("aria-label", workerLabel(worker));
+    var label = document.createElement("span");
+    label.className = "session-worker-history-label";
+    label.textContent = workerLabel(worker);
+    var title = document.createElement("span");
+    title.className = "session-worker-history-title";
+    title.textContent = worker.title || "Untitled Worker";
+    item.appendChild(label);
+    item.appendChild(title);
+    item.addEventListener("click", (function (id, historyWorker) {
+      return function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        var ws = getWs();
+        var valid = ws && ws.readyState === 1 && store.get('connected') && (!opts.validate || opts.validate(driver, workers));
+        var navigated = false;
+        if (valid && opts.navigate) navigated = opts.navigate(historyWorker) !== false;
+        else if (valid) {
+          ws.send(JSON.stringify({ type: "switch_session", id: id }));
+          navigated = true;
+        }
+        if (navigated) closeWorkerHistoryMenu(false);
+        else closeWorkerHistoryMenu();
+      };
+    })(worker.id, worker));
+    menu.appendChild(item);
+  }
+  document.body.appendChild(menu);
+  var rect = button.getBoundingClientRect();
+  var menuRect = menu.getBoundingClientRect();
+  var left = Math.max(8, Math.min(rect.right - menuRect.width, window.innerWidth - menuRect.width - 8));
+  var top = rect.bottom + 4;
+  if (top + menuRect.height > window.innerHeight - 8) top = Math.max(8, rect.top - menuRect.height - 4);
+  menu.style.left = left + "px";
+  menu.style.top = top + "px";
+  workerHistoryMenu = menu;
+  workerHistoryOpener = button;
+  workerHistoryKeyHandler = function (event) {
+    var items = menu.querySelectorAll(".session-worker-history-item");
+    var currentIndex = -1;
+    for (var ii = 0; ii < items.length; ii++) if (items[ii] === document.activeElement) currentIndex = ii;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeWorkerHistoryMenu();
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      if (!items.length) return;
+      var nextIndex = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : currentIndex + (event.key === "ArrowDown" ? 1 : -1);
+      if (nextIndex < 0) nextIndex = items.length - 1;
+      if (nextIndex >= items.length) nextIndex = 0;
+      items[nextIndex].focus();
+    }
+  };
+  workerHistoryOutsideHandler = function (event) {
+    if (!menu.contains(event.target) && event.target !== button) closeWorkerHistoryMenu();
+  };
+  document.addEventListener("keydown", workerHistoryKeyHandler, true);
+  document.addEventListener("click", workerHistoryOutsideHandler, true);
+  var firstItem = menu.querySelector(".session-worker-history-item");
+  if (firstItem) firstItem.focus();
+}
+
+export function createWorkerHistoryControl(driver, workers, options) {
+  if (!workers || !workers.length) return null;
+  var opts = options || {};
+  var button = document.createElement("button");
+  button.type = "button";
+  button.className = "session-worker-history-btn" + (opts.className ? " " + opts.className : "");
+  button.setAttribute("aria-label", opts.label || "Show Worker history");
+  button.setAttribute("aria-haspopup", "menu");
+  button.innerHTML = iconHtml("history");
+  button.addEventListener("click", function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (workerHistoryMenu) closeWorkerHistoryMenu();
+    else openWorkerHistoryMenu(button, driver, workers, opts);
+  });
+  return button;
+}
+
+store.subscribe(function (state, previous) {
+  if (state.activeSessionId !== previous.activeSessionId || state.currentSlug !== previous.currentSlug || state.activeProjectMateId !== previous.activeProjectMateId || state.splitPanes !== previous.splitPanes) closeWorkerHistoryMenu(false);
+});
+
 export function prepareSidebarHierarchy(sessions) {
   var hierarchy = buildSessionHierarchy(sessions);
   var byDriver = new Map();
@@ -32,15 +169,8 @@ export function currentWorkerIds() {
   var result = new Set();
   var groups = store.get('splitGroups') || [];
   for (var i = 0; i < groups.length; i++) {
-    var pair = groups[i].pair;
-    if (!pair) continue;
-    if (Array.isArray(pair.workerIds)) {
-      for (var j = 0; j < pair.workerIds.length; j++) {
-        if (Number.isInteger(pair.workerIds[j])) result.add(pair.workerIds[j]);
-      }
-    } else if (Number.isInteger(pair.workerId)) {
-      result.add(pair.workerId);
-    }
+    var roles = splitGroupRoles(groups[i]);
+    if (roles) for (var j = 0; j < roles.workerIds.length; j++) result.add(roles.workerIds[j]);
   }
   return result;
 }
@@ -90,46 +220,16 @@ function visibleWorker(worker, driver, matchIds) {
 export function renderDesktopDriverHierarchy(root, renderSession, rerender, matchIds) {
   var wrapper = document.createElement("div");
   wrapper.className = "session-driver-hierarchy";
-  var key = "driver:" + root.driver.id;
-  var isExpanded = expanded("desktop", key);
-  var childrenId = "session-workers-" + root.driver.id;
   var header = document.createElement("div");
   header.className = "session-driver-header";
-  var row = renderSession(root.driver);
+  var selectedSessionId = store.get('activeSessionId');
+  var anyActive = !!root.driver.active || root.workers.some(function (worker) { return worker.id === selectedSessionId; });
+  var anyProcessing = root.workers.some(function (worker) { return worker.isProcessing; });
+  var workerUnread = root.workers.reduce(function (total, worker) { return total + (worker.unread || 0); }, 0);
+  var row = renderSession(root.driver, { promotedActive: anyActive, promotedProcessing: anyProcessing, promotedUnread: workerUnread });
   row.classList.add("session-driver-item");
-  var control = document.createElement("button");
-  control.type = "button";
-  control.className = "session-driver-toggle";
-  control.setAttribute("aria-expanded", String(isExpanded));
-  control.setAttribute("aria-controls", childrenId);
-  control.setAttribute("aria-label", (isExpanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "New Session"));
-  control.innerHTML = iconHtml("chevron-right");
-  var children = document.createElement("div");
-  children.id = childrenId;
-  children.className = "session-worker-children";
-  children.setAttribute("role", "group");
-  children.setAttribute("aria-label", "Workers for " + (root.driver.title || "New Session"));
-  children.hidden = !isExpanded;
-  control.addEventListener("click", function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    var nextExpanded = !isExpanded;
-    expansionBySurface.desktop.set(expansionKey(key), nextExpanded);
-    control.setAttribute("aria-expanded", String(nextExpanded));
-    control.setAttribute("aria-label", (nextExpanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "New Session"));
-    children.hidden = !nextExpanded;
-    isExpanded = nextExpanded;
-  });
-  header.appendChild(control);
   header.appendChild(row);
   wrapper.appendChild(header);
-
-  var current = currentWorkerIds();
-  for (var i = 0; i < root.workers.length; i++) {
-    if (!visibleWorker(root.workers[i], root.driver, matchIds)) continue;
-    children.appendChild(renderSession(root.workers[i], { worker: true, current: current.has(root.workers[i].id) }));
-  }
-  wrapper.appendChild(children);
   return wrapper;
 }
 
@@ -164,35 +264,14 @@ export function renderDesktopOrphanHierarchy(workers, renderSession, rerender, m
 export function renderMobileDriverHierarchy(root, renderSession, rerender, matchIds) {
   var wrapper = document.createElement("div");
   wrapper.className = "mobile-driver-hierarchy";
-  var key = "driver:" + root.driver.id;
-  var isExpanded = expanded("mobile", key);
-  var childrenId = "mobile-session-workers-" + root.driver.id;
   var header = document.createElement("div");
   header.className = "mobile-driver-header";
-  var control = document.createElement("button");
-  control.type = "button";
-  control.className = "mobile-driver-toggle";
-  control.setAttribute("aria-expanded", String(isExpanded));
-  control.setAttribute("aria-controls", childrenId);
-  control.setAttribute("aria-label", (isExpanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "New Session"));
-  control.innerHTML = iconHtml("chevron-right");
-  control.addEventListener("click", function () { toggle("mobile", key, isExpanded, rerender); });
-  header.appendChild(control);
-  header.appendChild(renderSession(root.driver));
+  var selectedSessionId = store.get('activeSessionId');
+  var anyActive = !!root.driver.active || root.workers.some(function (worker) { return worker.id === selectedSessionId; });
+  var anyProcessing = root.workers.some(function (worker) { return worker.isProcessing; });
+  var workerUnread = root.workers.reduce(function (total, worker) { return total + (worker.unread || 0); }, 0);
+  header.appendChild(renderSession(root.driver, { promotedActive: anyActive, promotedProcessing: anyProcessing, promotedUnread: workerUnread }));
   wrapper.appendChild(header);
-
-  var children = document.createElement("div");
-  children.id = childrenId;
-  children.className = "mobile-worker-children";
-  children.setAttribute("role", "group");
-  children.setAttribute("aria-label", "Workers for " + (root.driver.title || "New Session"));
-  children.hidden = !isExpanded;
-  var current = currentWorkerIds();
-  for (var i = 0; i < root.workers.length; i++) {
-    if (!visibleWorker(root.workers[i], root.driver, matchIds === undefined ? null : matchIds)) continue;
-    children.appendChild(renderSession(root.workers[i], { worker: true, current: current.has(root.workers[i].id) }));
-  }
-  wrapper.appendChild(children);
   return wrapper;
 }