clay-server 4.2.0 → 4.3.0-beta.10

package/lib/public/modules/permission-control.js

@@ -46,10 +46,11 @@ export function createPermissionControl(className, ariaLabel) {
   control.setAttribute("role", "group");
   control.setAttribute("aria-label", ariaLabel || "Session permission mode");
   control.innerHTML = '<div class="session-permission-segmented">' +
-    '<button type="button" data-permission-mode="default">Ask</button>' +
-    '<button type="button" data-permission-mode="auto">Auto</button>' +
-    '<button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions"><span class="permission-label-long">Skip permissions</span><span class="permission-label-short" aria-hidden="true">Skip</span></button>' +
+    '<button type="button" data-permission-mode="default" aria-label="Ask permissions" title="Ask permissions"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="auto" aria-label="Auto permissions" title="Auto permissions"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
     '</div><span class="session-permission-status" aria-live="polite"></span>';
+  control.querySelector(".session-permission-status").setAttribute("aria-atomic", "true");
   return control;
 }
 
@@ -99,17 +100,21 @@ export function renderPermissionControl(control, state) {
   control.classList.toggle("permission-auto-unsupported", autoVisible && !autoSupported);
   control.classList.toggle("permission-globally-forced", globallyForced);
   control.classList.toggle("permission-runtime-fallback", state.permissionMode === "auto" && !!state.effectivePermissionMode && state.effectivePermissionMode !== "auto");
+  control.setAttribute("aria-busy", pending ? "true" : "false");
+  var buttonTitles = { default: "Ask permissions", auto: "Auto permissions", bypassPermissions: "Skip permissions" };
   var buttons = control.querySelectorAll("[data-permission-mode]");
   for (var i = 0; i < buttons.length; i++) {
     var mode = buttons[i].dataset.permissionMode;
     var unsupported = mode === "auto" && autoVisible && !autoSupported;
+    var requested = !!pending && pending.mode === mode;
     buttons[i].hidden = mode === "auto" && !autoVisible;
     var selected = globallyForced ? mode === "bypassPermissions" : mode === state.permissionMode;
     buttons[i].disabled = globallyForced || unsupported || !!pending || !connected || state.locked === true;
     buttons[i].classList.toggle("active", selected);
+    buttons[i].classList.toggle("pending", requested);
     buttons[i].setAttribute("aria-pressed", selected ? "true" : "false");
-    if (unsupported) buttons[i].title = "Auto permissions are unavailable for this Claude session.";
-    else buttons[i].removeAttribute("title");
+    buttons[i].setAttribute("aria-busy", requested ? "true" : "false");
+    buttons[i].title = unsupported ? "Auto permissions are unavailable for this Claude session." : buttonTitles[mode];
   }
   var status = control.querySelector(".session-permission-status");
   if (status) {

package/lib/public/modules/project-activation.js

@@ -59,19 +59,22 @@ export function isProjectSessionReady(state, socket) {
 }
 
 export function splitPanesMatchProject(split, slug) {
-  if (!split || !Array.isArray(split.panes) || split.panes.length !== 2 || !slug) return false;
-  return split.panes[0].slug === slug && split.panes[1].slug === slug;
+  if (!split || !Array.isArray(split.panes) || split.panes.length < 2 || split.panes.length > 3 || !slug) return false;
+  for (var i = 0; i < split.panes.length; i++) if (split.panes[i].slug !== slug) return false;
+  return true;
 }
 
 export function hasCurrentSplitGroup(split, groups) {
   if (!split || !split.groupId) return true;
   var members = split.panes && split.panes.map(function (pane) { return pane.sessionId; });
-  if (!members || members.length !== 2) return false;
+  if (!members || members.length < 2 || members.length > 3) return false;
   var available = Array.isArray(groups) ? groups : [];
   for (var i = 0; i < available.length; i++) {
     var group = available[i];
-    if (group.id !== split.groupId || !Array.isArray(group.members) || group.members.length !== 2) continue;
-    if (group.members.indexOf(members[0]) !== -1 && group.members.indexOf(members[1]) !== -1) return true;
+    if (group.id !== split.groupId || !Array.isArray(group.members) || group.members.length !== members.length) continue;
+    var matches = true;
+    for (var mi = 0; mi < members.length; mi++) if (group.members.indexOf(members[mi]) === -1) matches = false;
+    if (matches) return true;
   }
   return false;
 }
@@ -84,8 +87,8 @@ export function reconcileRestoredSplit(split, groups) {
     if (group.id !== split.groupId) continue;
     var oldMembers = split.panes && split.panes.map(function (pane) { return pane.sessionId; });
     var members = Array.isArray(group.members) ? group.members : [];
-    if (oldMembers && oldMembers.length === 2 && members.length === 2
-        && members.indexOf(oldMembers[0]) !== -1 && members.indexOf(oldMembers[1]) !== -1) {
+    if (oldMembers && oldMembers.length === members.length
+        && oldMembers.every(function (id) { return members.indexOf(id) !== -1; })) {
       return { action: "keep", group: group };
     }
     return { action: "rebuild", group: group };

package/lib/public/modules/session-creation-cta.js

@@ -0,0 +1,46 @@
+// Shared, presentation-only session creation controls for desktop and mobile.
+
+import { iconHtml } from './icons.js';
+
+var SESSION_VENDOR_LABELS = {
+  claude: "Claude",
+  codex: "Codex",
+  antigravity: "Antigravity",
+  opencode: "OpenCode",
+  kimi: "Kimi",
+  grok: "Grok",
+  copilot: "Copilot",
+  qwen: "Qwen",
+  junie: "Junie",
+  kiro: "Kiro",
+};
+
+export function renderSessionCreationCta(options) {
+  var row = document.createElement("div");
+  row.className = options.rowClass + " session-create-cta";
+
+  var createButton = document.createElement("button");
+  createButton.className = options.createClass + " session-create-primary";
+  createButton.type = "button";
+  var vendorLabel = SESSION_VENDOR_LABELS[options.vendorKey] || options.vendorName;
+  createButton.innerHTML = '<img src="' + options.vendorAvatar +
+    '" class="' + options.iconClass + ' session-create-provider-icon" alt="">' +
+    '<span>Create new ' + vendorLabel + ' session</span>';
+  createButton.title = options.createTitle;
+  createButton.setAttribute("aria-label", options.createTitle);
+  createButton.addEventListener("click", options.onCreate);
+  row.appendChild(createButton);
+
+  var providerButton = document.createElement("button");
+  providerButton.className = options.providerClass + " session-create-provider";
+  providerButton.type = "button";
+  providerButton.title = options.providerTitle;
+  providerButton.setAttribute("aria-label", "Switch AI provider (current: " + options.vendorName + ")");
+  providerButton.setAttribute("aria-expanded", "false");
+  providerButton.setAttribute("aria-controls", options.menuId);
+  providerButton.innerHTML = iconHtml("chevron-down", "session-create-provider-chevron");
+  providerButton.addEventListener("click", options.onProvider);
+  row.appendChild(providerButton);
+
+  return { element: row, createButton: createButton, providerButton: providerButton };
+}

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

@@ -16,6 +16,7 @@ import {
 } from './sidebar-sessions.js';
 import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
 import { defaultVendorUnavailable, resolvePreferredVendor, saveDefaultVendor } from './default-vendor.js';
+import { renderSessionCreationCta } from './session-creation-cta.js';
 import {
   getCachedProjectList,
   getCachedCurrentSlug,
@@ -671,42 +672,50 @@ function createMobileLoopGroup(loopId, children, groupKey) {
 }
 
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
-function renderMobileSessionsInto(container) {
-  // Mirrors the desktop sidebar's split button: one "New session" action on
-  // the project's last-used vendor, plus a chevron that expands the full
-  // vendor list. The list expands inline rather than as a fixed-position
-  // popover because it lives inside a scrolling bottom sheet.
+export function renderMobileSessionsInto(container) {
   var mobileDefaultVendor = resolvePreferredVendor(store.get('installedVendors') || []) || resolveDefaultVendor();
   var mobileInstalled = store.get('installedVendors') || [];
   var mobileDefaultState = store.get('defaultVendorState') || {};
 
-  var newRow = document.createElement("div");
-  newRow.className = "mobile-session-new-row";
-
-  var mainBtn = document.createElement("button");
-  mainBtn.className = "mobile-session-new mobile-session-new-main";
-  mainBtn.title = "New " + (VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor) + " session";
-  if (defaultVendorUnavailable(mobileInstalled)) mainBtn.title += " (saved default is unavailable; using installed priority)";
-  mainBtn.innerHTML = '<img src="' + (VENDOR_AVATARS[mobileDefaultVendor] || VENDOR_AVATARS.claude) +
-    '" class="mobile-session-new-icon" alt=""><span>New ' + (VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor) + ' session</span>';
-  mainBtn.addEventListener("click", function () {
-    startNewSession(mobileDefaultVendor);
-    closeMobileSheet();
-  });
-  newRow.appendChild(mainBtn);
-
   var vendorList = document.createElement("div");
   vendorList.className = "mobile-vendor-list hidden";
-
-  var chevronBtn = document.createElement("button");
-  chevronBtn.className = "mobile-session-new mobile-session-new-chevron";
-  chevronBtn.setAttribute("aria-label", "Choose a vendor");
-  chevronBtn.innerHTML = iconHtml("chevron-down");
-  chevronBtn.addEventListener("click", function () {
-    vendorList.classList.toggle("hidden");
-    chevronBtn.classList.toggle("expanded");
+  vendorList.id = "mobile-session-provider-menu";
+  var mobileVendorName = VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor;
+  var mobileCreateTitle = "Create a " + mobileVendorName + " session";
+  if (defaultVendorUnavailable(mobileInstalled)) mobileCreateTitle += " (saved default is unavailable; using installed priority)";
+  var controls;
+  controls = renderSessionCreationCta({
+    rowClass: "mobile-session-new-row",
+    createClass: "mobile-session-new mobile-session-new-main",
+    providerClass: "mobile-session-new mobile-session-new-provider",
+    iconClass: "mobile-session-new-icon",
+    vendorKey: mobileDefaultVendor,
+    vendorName: mobileVendorName,
+    vendorAvatar: VENDOR_AVATARS[mobileDefaultVendor] || VENDOR_AVATARS.claude,
+    createTitle: mobileCreateTitle,
+    providerTitle: "Switch AI provider (current: " + mobileVendorName + ")",
+    menuId: vendorList.id,
+    onCreate: function () { startNewSession(mobileDefaultVendor); closeMobileSheet(); },
+    onProvider: function () {
+      var opening = vendorList.classList.contains("hidden");
+      vendorList.classList.toggle("hidden", !opening);
+      controls.providerButton.classList.toggle("expanded", opening);
+      controls.providerButton.setAttribute("aria-expanded", opening ? "true" : "false");
+      if (opening) {
+        var first = vendorList.querySelector("button:not(:disabled)");
+        if (first) first.focus();
+      }
+    },
+  });
+  var newRow = controls.element;
+  vendorList.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    vendorList.classList.add("hidden");
+    controls.providerButton.classList.remove("expanded");
+    controls.providerButton.setAttribute("aria-expanded", "false");
+    controls.providerButton.focus();
   });
-  newRow.appendChild(chevronBtn);
 
   if (defaultVendorUnavailable(mobileInstalled) && mobileDefaultState.preference) {
     var mobileFallbackNote = document.createElement("div");
@@ -727,7 +736,7 @@ function renderMobileSessionsInto(container) {
       if (!isInstalled) vBtn.classList.add("disabled");
       if (vendor === mobileDefaultVendor) vBtn.classList.add("active");
       vBtn.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="mobile-session-new-icon" alt="">' +
-        '<span>' + name + '</span>' +
+        '<span>' + (isInstalled ? "Create with " : "Learn about ") + name + '</span>' +
         (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="mobile-vendor-note">Not installed</span>');
       vBtn.addEventListener("click", function () {
@@ -735,6 +744,9 @@ function renderMobileSessionsInto(container) {
           window.open(VENDOR_HOMEPAGES[vendor], "_blank", "noopener");
           return;
         }
+        vendorList.classList.add("hidden");
+        controls.providerButton.classList.remove("expanded");
+        controls.providerButton.setAttribute("aria-expanded", "false");
         startNewSession(vendor);
         closeMobileSheet();
       });

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

@@ -17,6 +17,7 @@ import { openGroup, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
 import { defaultVendorUnavailable, resolvePreferredVendor, saveDefaultVendor } from './default-vendor.js';
 import { openPairDialog } from './split-pair-ui.js';
+import { renderSessionCreationCta } from './session-creation-cta.js';
 import {
   hierarchyItemMatches,
   prepareSidebarHierarchy,
@@ -53,10 +54,11 @@ var armedDeleteTimer = null;
 store.subscribe(function (state, previous) {
   if (state.defaultVendorState !== previous.defaultVendorState || state.installedVendors !== previous.installedVendors) {
     var reopenNewMenu = !!(sessionCtxMenu && sessionCtxMenuAnchor);
+    var sessionList = getSessionListEl();
     if (reopenNewMenu) closeSessionCtxMenu();
-    if (getSessionListEl()) renderSessionList();
-    if (reopenNewMenu) {
-      var freshAnchor = getSessionListEl().querySelector(".session-top-action.split-chevron");
+    if (sessionList) renderSessionList();
+    if (reopenNewMenu && sessionList) {
+      var freshAnchor = sessionList.querySelector(".session-top-action.split-provider");
       if (freshAnchor) showNewSessionMenu(freshAnchor, resolveDefaultVendor());
     }
   }
@@ -356,58 +358,50 @@ export function startNewSession(vendor, extra) {
   });
 }
 
-function renderSessionTopActions() {
+export function renderSessionTopActions() {
   var wrap = document.createElement("div");
   wrap.className = "session-top-actions";
 
-  // Single split button. The main half creates a session with the project's
-  // last-used vendor (for Claude the server applies the claudeOpenMode pref);
-  // the chevron opens the vendor picker plus alternate launch modes.
   var defaultVendor = resolveDefaultVendor();
-
-  var cell = document.createElement("div");
-  cell.className = "session-top-action-split";
-
-  var mainBtn = document.createElement("button");
-  mainBtn.className = "session-top-action split-main";
-  mainBtn.type = "button";
-  mainBtn.title = "New " + (VENDOR_NAMES[defaultVendor] || defaultVendor) + " session";
-  if (defaultVendorUnavailable(store.get('installedVendors') || [])) mainBtn.title += " (saved default is unavailable; using installed priority)";
-  mainBtn.innerHTML = '<img src="' + (VENDOR_AVATARS[defaultVendor] || VENDOR_AVATARS.claude) +
-    '" class="session-top-action-icon" alt=""><span>New session</span>';
-  mainBtn.addEventListener("click", function () {
-    startNewSession(defaultVendor);
-  });
-  cell.appendChild(mainBtn);
-
-  var chevron = document.createElement("button");
-  chevron.className = "session-top-action split-chevron";
-  chevron.type = "button";
-  chevron.title = "Choose a vendor or launch mode";
-  chevron.setAttribute("aria-label", "Choose a vendor or launch mode");
-  chevron.innerHTML = iconHtml("chevron-down");
-  chevron.addEventListener("click", function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (sessionCtxMenu) { closeSessionCtxMenu(); return; }
-    showNewSessionMenu(chevron, defaultVendor);
+  var vendorName = VENDOR_NAMES[defaultVendor] || defaultVendor;
+  var createTitle = "Create a " + vendorName + " session";
+  if (defaultVendorUnavailable(store.get('installedVendors') || [])) createTitle += " (saved default is unavailable; using installed priority)";
+  var controls;
+  controls = renderSessionCreationCta({
+    rowClass: "session-top-action-split",
+    createClass: "session-top-action split-main",
+    providerClass: "session-top-action split-provider",
+    iconClass: "session-top-action-icon",
+    vendorKey: defaultVendor,
+    vendorName: vendorName,
+    vendorAvatar: VENDOR_AVATARS[defaultVendor] || VENDOR_AVATARS.claude,
+    createTitle: createTitle,
+    providerTitle: "Switch AI provider (current: " + vendorName + ")",
+    menuId: "session-new-menu",
+    onCreate: function () { startNewSession(defaultVendor); },
+    onProvider: function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (sessionCtxMenu) { closeSessionCtxMenu(); return; }
+      showNewSessionMenu(controls.providerButton, defaultVendor);
+    },
   });
-  cell.appendChild(chevron);
-
-  wrap.appendChild(cell);
+  wrap.appendChild(controls.element);
   return wrap;
 }
 
-// Dropdown anchored to the split-button chevron. Reuses the session-ctx-menu
-// element/var so the global document click handler closes it.
+// Provider disclosure anchored to the grouped provider control. Reuses the
+// session-ctx-menu element/var so the global document click handler closes it.
 function showNewSessionMenu(anchorBtn, defaultVendor) {
   closeSessionCtxMenu();
 
   var menu = document.createElement("div");
   menu.className = "session-ctx-menu session-new-menu";
+  menu.id = "session-new-menu";
   var installed = store.get('installedVendors') || [];
   var defaultVendorState = store.get('defaultVendorState') || {};
   sessionCtxMenuAnchor = anchorBtn;
+  anchorBtn.setAttribute("aria-expanded", "true");
 
   if (defaultVendorUnavailable(installed) && defaultVendorState.preference) {
     var fallbackNote = document.createElement("div");
@@ -430,7 +424,7 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
       if (vendor === defaultVendor) item.classList.add("active");
       item.type = "button";
       item.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="session-top-action-icon" alt="">' +
-        '<span class="session-new-vendor-name">' + name + '</span>' +
+        '<span class="session-new-vendor-name">' + (isInstalled ? "Create with " : "Learn about ") + name + '</span>' +
         (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="session-new-vendor-note">Not installed</span>' + iconHtml("external-link"));
       item.title = isInstalled
@@ -526,6 +520,12 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
 
   document.body.appendChild(menu);
   sessionCtxMenu = menu;
+  menu.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    e.stopPropagation();
+    closeSessionCtxMenu(true);
+  });
   refreshIcons();
 
   requestAnimationFrame(function () {
@@ -542,6 +542,8 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
     if (menuRect.bottom > window.innerHeight - 8) {
       menu.style.top = (btnRect.top - menuRect.height - 2) + "px";
     }
+    var firstMenuItem = menu.querySelector("button:not(:disabled)");
+    if (firstMenuItem) firstMenuItem.focus();
   });
 }
 
@@ -718,13 +720,16 @@ export function getExpandedLoopRuns() {
 
 // --- Context menu ---
 
-function closeSessionCtxMenu() {
+function closeSessionCtxMenu(restoreFocus) {
+  var anchor = sessionCtxMenuAnchor;
+  if (anchor) anchor.setAttribute("aria-expanded", "false");
   sessionCtxMenuAnchor = null;
   if (sessionCtxMenu) {
     sessionCtxMenu.remove();
     sessionCtxMenu = null;
     sessionCtxSessionId = null;
   }
+  if (restoreFocus && anchor && document.contains(anchor)) anchor.focus();
 }
 
 function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
@@ -1429,14 +1434,20 @@ function renderSplitGroupItem(group, members) {
       escapeHtml(VENDOR_NAMES[vendor] || vendor) + '">';
   }
   html += "</span>";
-  if (members[0].isProcessing || members[1].isProcessing) html += '<span class="session-processing"></span>';
-  var splitBackgroundTaskCount = (members[0].backgroundTaskCount || 0) + (members[1].backgroundTaskCount || 0);
+  var splitProcessing = false;
+  var splitBackgroundTaskCount = 0;
+  for (var si = 0; si < members.length; si++) {
+    if (members[si].isProcessing) splitProcessing = true;
+    splitBackgroundTaskCount += members[si].backgroundTaskCount || 0;
+  }
+  if (splitProcessing) html += '<span class="session-processing"></span>';
   if (splitBackgroundTaskCount) html += '<span class="session-background-task-count">' + splitBackgroundTaskCount + '</span>';
   html += '<span class="split-group-name">' + highlightMatch(group.name || "Split", searchQuery) + "</span>";
   text.innerHTML = html;
   el.appendChild(text);
 
-  var unread = (members[0].unread || 0) + (members[1].unread || 0);
+  var unread = 0;
+  for (var ui = 0; ui < members.length; ui++) unread += members[ui].unread || 0;
   var badge = document.createElement("span");
   badge.className = "session-unread-badge" + (unread > 0 ? " has-unread" : "");
   badge.dataset.splitGroupId = group.id;
@@ -1532,15 +1543,24 @@ export function renderSessionList(sessions) {
   }
   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;
-    if (hierarchySessionIds.has(leftMember.id) || hierarchySessionIds.has(rightMember.id)) continue;
+    var splitMembers = [];
+    for (var smi = 0; smi < splitGroup.members.length; smi++) {
+      var splitMember = sessionsById.get(splitGroup.members[smi]);
+      if (splitMember) splitMembers.push(splitMember);
+    }
+    if (splitMembers.length !== splitGroup.members.length) continue;
+    var hasHierarchyMember = false;
+    for (var hmi = 0; hmi < splitMembers.length; hmi++) {
+      if (hierarchySessionIds.has(splitMembers[hmi].id)) hasHierarchyMember = true;
+    }
+    if (hasHierarchyMember) continue;
+    var splitLastActivity = 0;
+    for (var lai = 0; lai < splitMembers.length; lai++) splitLastActivity = Math.max(splitLastActivity, splitMembers[lai].lastActivity || 0);
     items.push({
       type: "split-group",
       group: splitGroup,
-      members: [leftMember, rightMember],
-      lastActivity: Math.max(leftMember.lastActivity || 0, rightMember.lastActivity || 0),
+      members: splitMembers,
+      lastActivity: splitLastActivity,
     });
   }
   var groupKeys = Object.keys(loopGroups);
@@ -1567,8 +1587,13 @@ export function renderSessionList(sessions) {
       continue;
     }
     if ((item.type === "driver-hierarchy" || item.type === "orphan-workers") && !hierarchyItemMatches(item, searchMatchIds)) continue;
-    if (item.type === "split-group" && searchMatchIds !== null &&
-        !searchMatchIds.has(item.members[0].id) && !searchMatchIds.has(item.members[1].id)) continue;
+    if (item.type === "split-group" && searchMatchIds !== null) {
+      var splitSearchMatch = false;
+      for (var splitSearchIndex = 0; splitSearchIndex < item.members.length; splitSearchIndex++) {
+        if (searchMatchIds.has(item.members[splitSearchIndex].id)) splitSearchMatch = true;
+      }
+      if (!splitSearchMatch) continue;
+    }
     if ((item.type === "session" || item.type === "driver-hierarchy") && item.data && item.data.bookmarked) {
       bookmarkedItems.push(item);
     } else {

package/lib/public/modules/split-group-helpers.js

@@ -12,15 +12,87 @@ export function findSplitGroup(groups, memberIds) {
   var list = groups || [];
   for (var i = 0; i < list.length; i++) {
     var members = list[i].members || [];
-    if (members.length === 2 && members[0] === memberIds[0] && members[1] === memberIds[1]) return list[i];
+    if (members.length !== memberIds.length) continue;
+    var matches = true;
+    for (var j = 0; j < memberIds.length; j++) {
+      if (members.indexOf(memberIds[j]) === -1) { matches = false; break; }
+    }
+    if (matches) return list[i];
   }
   return null;
 }
 
+// Resolve the visible order from the explicit role contract. Member array
+// order is persistence detail and must never decide who is the Driver.
+export function splitGroupRoles(group) {
+  if (!group || !Array.isArray(group.members)) return null;
+  var pair = group.pair;
+  if (!pair || typeof pair !== "object" || Array.isArray(pair)) return null;
+  var hasVersion = Object.prototype.hasOwnProperty.call(pair, "version");
+  var hasLegacyWorker = Object.prototype.hasOwnProperty.call(pair, "workerId");
+  var hasWorkerIds = Object.prototype.hasOwnProperty.call(pair, "workerIds");
+  if (hasVersion && pair.version !== 2) return null;
+  if (hasVersion && hasLegacyWorker) return null;
+  if (hasVersion && !hasWorkerIds) return null;
+  if (!hasVersion && hasWorkerIds) return null;
+  if (!hasVersion && !hasLegacyWorker) return null;
+  var driverId = pair.driverId;
+  var workerIds = hasWorkerIds ? (Array.isArray(pair.workerIds) ? pair.workerIds.slice() : []) :
+    (pair.workerId !== undefined ? [pair.workerId] : []);
+  if (!Number.isInteger(driverId) || workerIds.length < 1 || workerIds.length > 2) return null;
+  if (group.members.indexOf(driverId) === -1) return null;
+  var ordered = [driverId];
+  for (var i = 0; i < workerIds.length; i++) {
+    if (!Number.isInteger(workerIds[i]) || workerIds[i] === driverId || group.members.indexOf(workerIds[i]) === -1 || ordered.indexOf(workerIds[i]) !== -1) return null;
+    ordered.push(workerIds[i]);
+  }
+  if (group.members.length !== ordered.length) return null;
+  for (var mi = 0; mi < group.members.length; mi++) if (ordered.indexOf(group.members[mi]) === -1) return null;
+  return { driverId: driverId, workerIds: workerIds, orderedIds: ordered, version: pair.version || null };
+}
+
+export function splitGroupMemberIds(group) {
+  var roles = splitGroupRoles(group);
+  return roles ? roles.orderedIds : (group && Array.isArray(group.members) ? group.members.slice() : []);
+}
+
+export function splitGroupActiveAnchor(group, activeId) {
+  var roles = splitGroupRoles(group);
+  if (roles) return roles.driverId;
+  var members = group && Array.isArray(group.members) ? group.members : [];
+  return members.indexOf(activeId) !== -1 ? activeId : (members[0] || null);
+}
+
 export function isConfiguredWorker(groups, sessionId) {
   var list = groups || [];
   for (var i = 0; i < list.length; i++) {
-    if (list[i].pair && list[i].pair.workerId === sessionId) return true;
+    var roles = splitGroupRoles(list[i]);
+    if (roles && roles.workerIds.indexOf(sessionId) !== -1) return true;
   }
   return false;
 }
+
+export function splitWorkerCloseRequest(group, sessions, projectSlug, workerId, requestId) {
+  var roles = splitGroupRoles(group);
+  if (!roles || roles.version !== 2 || roles.workerIds.indexOf(workerId) === -1) return null;
+  var anchors = group && group.pairAnchors;
+  if (!anchors || anchors.version !== 2 || !anchors.driver || !Array.isArray(anchors.workers)) return null;
+  var workerIndex = roles.workerIds.indexOf(workerId);
+  var workerAnchor = anchors.workers[workerIndex];
+  var worker = null;
+  var list = sessions || [];
+  for (var i = 0; i < list.length; i++) if (list[i].id === workerId) worker = list[i];
+  if (!workerAnchor || !anchors.driver.origin || !workerAnchor.origin || !worker || !Number.isInteger(worker.workerGeneration)) return null;
+  return {
+    type: "split_worker_close",
+    requestId: requestId,
+    projectSlug: projectSlug,
+    groupId: group.id,
+    driverId: roles.driverId,
+    driverOriginId: anchors.driver.origin,
+    workerId: workerId,
+    workerOriginId: workerAnchor.origin,
+    generation: worker.workerGeneration,
+    expectedWorkerIds: roles.workerIds.slice(),
+  };
+}

package/lib/public/modules/split-pair-ui.js

@@ -5,6 +5,7 @@ import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAg
 import { showToast } from './utils.js';
 import { getCachedSessions } from './sidebar-sessions.js';
 import { appendWorkerRuntime } from './split-worker-runtime.js';
+import { splitGroupRoles } from './split-group-helpers.js';
 
 var pairDialog = null;
 // Set when the dialog was opened via "Add Split Worker" on an existing session:
@@ -245,6 +246,8 @@ export function syncPairChrome(host, split) {
   var paneEls = host.querySelectorAll(".split-pane");
   for (var paneIndex = 0; paneIndex < paneEls.length; paneIndex++) {
     paneEls[paneIndex].classList.remove("split-pane-role-driver", "split-pane-role-worker");
+    paneEls[paneIndex].style.removeProperty("--split-pane-order");
+    paneEls[paneIndex].style.removeProperty("--split-worker-row");
   }
   var runtimeHeaders = host.querySelectorAll(".has-worker-runtime");
   for (var ri = 0; ri < runtimeHeaders.length; ri++) runtimeHeaders[ri].classList.remove("has-worker-runtime");
@@ -268,10 +271,23 @@ export function syncPairChrome(host, split) {
     }
     return;
   }
+  var roles = splitGroupRoles(group);
+  if (!roles) return;
+  var workerIndex = 0;
   for (var pi = 0; pi < split.panes.length && pi < headers.length; pi++) {
-    (function (sessionId, header) {
-      var isDriver = sessionId === group.pair.driverId;
-      if (paneEls[pi]) paneEls[pi].classList.add(isDriver ? "split-pane-role-driver" : "split-pane-role-worker");
+    var desiredPane = split.panes[pi];
+    var desiredPaneEl = null;
+    for (var pei = 0; pei < paneEls.length; pei++) {
+      if (paneEls[pei].dataset.sessionId === String(desiredPane.sessionId)) desiredPaneEl = paneEls[pei];
+    }
+    if (!desiredPaneEl) continue;
+    (function (sessionId, header, paneEl) {
+      var isDriver = sessionId === roles.driverId;
+      if (paneEl) {
+        paneEl.classList.add(isDriver ? "split-pane-role-driver" : "split-pane-role-worker");
+        paneEl.style.setProperty("--split-pane-order", isDriver ? "2" : String(workerIndex));
+        if (!isDriver) paneEl.style.setProperty("--split-worker-row", String(workerIndex + 1));
+      }
       var role = isDriver ? "Driver" : "Split Worker";
       var badge = document.createElement("span");
       badge.className = "split-pair-role split-pair-role-" + role.toLowerCase().replace(/ /g, "-");
@@ -287,18 +303,24 @@ export function syncPairChrome(host, split) {
           if (sessions[wi].id === sessionId) { workerSession = sessions[wi]; break; }
         }
         appendWorkerRuntime(header, workerSession);
+        workerIndex++;
       }
-    })(split.panes[pi].sessionId, headers[pi]);
+    })(desiredPane.sessionId, desiredPaneEl.querySelector(".split-pane-header"), desiredPaneEl);
   }
   var active = (store.get('splitDelegations') || {})[group.id];
   if (!active || !active.active) return;
   host.classList.add("split-delegating");
   var fromIndex = split.panes[0].sessionId === active.from ? 0 : 1;
   host.classList.add(fromIndex === 0 ? "split-direction-right" : "split-direction-left");
-  for (var si = 0; si < split.panes.length && si < headers.length; si++) {
+  for (var si = 0; si < split.panes.length; si++) {
+    var livePane = null;
+    for (var lpi = 0; lpi < paneEls.length; lpi++) {
+      if (paneEls[lpi].dataset.sessionId === String(split.panes[si].sessionId)) livePane = paneEls[lpi];
+    }
+    if (!livePane) continue;
     var live = document.createElement("span");
     live.className = "split-pair-live";
     live.textContent = split.panes[si].sessionId === active.to ? "Following direction" : "Waiting";
-    headers[si].appendChild(live);
+    livePane.querySelector(".split-pane-header").appendChild(live);
   }
 }