clay-server 4.3.0-beta.1 → 4.3.0-beta.10

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);
   }
 }

package/lib/public/modules/split-pane-reconciler.js

@@ -0,0 +1,28 @@
+// Keyed DOM reconciliation for the parent split shell. Existing pane nodes
+// (and their iframe browsing contexts) are reused by stable project/session
+// identity while metadata and visual order are refreshed.
+
+export function splitPaneIdentity(pane) {
+  return String(pane && pane.slug || "") + "#" + String(pane && pane.sessionId || "");
+}
+
+export function reconcileSplitPanes(host, panes, createPane, updatePane) {
+  var desired = Array.isArray(panes) ? panes : [];
+  var existing = host.querySelectorAll(".split-pane");
+  var byKey = new Map();
+  for (var i = 0; i < existing.length; i++) byKey.set(existing[i].dataset.splitPaneKey, existing[i]);
+  var used = new Set();
+  for (var pi = 0; pi < desired.length; pi++) {
+    var pane = desired[pi];
+    var key = splitPaneIdentity(pane);
+    var paneEl = byKey.get(key);
+    if (!paneEl) paneEl = createPane(pane, pi);
+    paneEl.dataset.splitPaneKey = key;
+    updatePane(paneEl, pane, pi);
+    used.add(paneEl);
+    if (!paneEl.parentNode) host.appendChild(paneEl);
+  }
+  for (var ei = existing.length - 1; ei >= 0; ei--) {
+    if (!used.has(existing[ei])) existing[ei].remove();
+  }
+}

package/lib/public/modules/split-pane-renderer.js

@@ -0,0 +1,107 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { iconHtml } from './icons.js';
+import { formatTokens } from './app-panels.js';
+import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
+import { createPermissionControl, bindPermissionControl, renderPermissionControl } from './permission-control.js';
+import { splitGroupRoles } from './split-group-helpers.js';
+
+function sessionById(sessionId) {
+  var sessions = getCachedSessions() || [];
+  for (var i = 0; i < sessions.length; i++) if (sessions[i].id === sessionId) return sessions[i];
+  return null;
+}
+
+function paneUrl(pane) {
+  return "/p/" + encodeURIComponent(pane.slug) + "/?pane=1&session=" + encodeURIComponent(pane.sessionId);
+}
+
+function startPaneRename(header, titleEl, pane) {
+  if (header.querySelector(".split-pane-rename-input")) return;
+  var input = document.createElement("input");
+  input.type = "text"; input.className = "split-pane-rename-input"; input.value = pane.title;
+  titleEl.style.display = "none"; header.insertBefore(input, titleEl); input.focus(); input.select();
+  var done = false;
+  function finish(commit) {
+    if (done) return;
+    done = true;
+    var newTitle = input.value.trim(); input.remove(); titleEl.style.display = "";
+    if (!commit || !newTitle || newTitle === pane.title) return;
+    pane.title = newTitle; titleEl.textContent = newTitle;
+    var ws = getWs();
+    if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: "rename_session", id: pane.sessionId, title: newTitle }));
+  }
+  input.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") { event.preventDefault(); finish(true); }
+    if (event.key === "Escape") { event.preventDefault(); finish(false); }
+  });
+  input.addEventListener("blur", function () { finish(true); });
+  input.addEventListener("click", function (event) { event.stopPropagation(); });
+}
+
+function permissionState(session) {
+  var mode = session && (session.runtimeMode || session.mode || "gui");
+  var worker = !!session && isConfiguredWorker(store.get('splitGroups'), session.id);
+  return {
+    projectSlug: store.get('currentSlug'), sessionId: session && session.id,
+    vendor: session && session.vendor || store.get('currentVendor') || "claude",
+    permissionMode: session && session.permissionMode || "default",
+    effectivePermissionMode: session && session.effectivePermissionMode || null,
+    permissionCapabilities: session && session.permissionCapabilities || { auto: false, mcpOverride: false },
+    connected: store.get('connected'), globalPermissionModeForced: store.get('skipPermsEnabled') === true,
+    visible: !!session && !worker && mode === "gui", locked: worker,
+  };
+}
+
+function isConfiguredWorker(groups, sessionId) {
+  for (var i = 0; i < (groups || []).length; i++) {
+    var roles = splitGroupRoles(groups[i]);
+    if (roles && roles.workerIds.indexOf(sessionId) !== -1) return true;
+  }
+  return false;
+}
+
+export function updatePaneFullAccessButton(button, session) {
+  if (button) renderPermissionControl(button, permissionState(session));
+}
+
+export function createSplitPane(pane, closePane) {
+  var paneEl = document.createElement("section"); paneEl.className = "split-pane";
+  var header = document.createElement("header"); header.className = "split-pane-header"; header.title = pane.title;
+  var session = sessionById(pane.sessionId); var vendor = session && session.vendor || "claude";
+  var vendorIcon = document.createElement("img"); vendorIcon.className = "split-pane-vendor";
+  vendorIcon.src = VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude; vendorIcon.alt = ""; vendorIcon.title = VENDOR_NAMES[vendor] || vendor; header.appendChild(vendorIcon);
+  var title = document.createElement("span"); title.className = "split-pane-title"; title.textContent = pane.title; title.title = "Rename session";
+  title.addEventListener("click", function () { startPaneRename(header, title, pane); }); header.appendChild(title);
+  var frame = document.createElement("iframe"); frame.className = "split-pane-frame"; frame.dataset.projectSlug = pane.slug;
+  frame.dataset.sessionId = String(pane.sessionId); frame.src = paneUrl(pane); frame.title = pane.title;
+  var ctxChip = document.createElement("button"); ctxChip.type = "button"; ctxChip.className = "split-pane-context"; ctxChip.title = "Context usage";
+  ctxChip.innerHTML = '<span class="split-pane-context-bar"><span class="split-pane-context-fill"></span></span><span class="split-pane-context-label"></span>';
+  ctxChip.addEventListener("click", function () { if (frame.contentWindow) frame.contentWindow.postMessage({ type: "clay-pane-toggle-context" }, window.location.origin); }); header.appendChild(ctxChip);
+  var fullAccess = createPermissionControl("split-pane-full-access hidden", "Driver session permission mode");
+  updatePaneFullAccessButton(fullAccess, session); bindPermissionControl(fullAccess, function () { return permissionState(sessionById(pane.sessionId)); }); header.appendChild(fullAccess); header.insertBefore(fullAccess, ctxChip);
+  var close = document.createElement("button"); close.type = "button"; close.className = "split-pane-close"; close.title = "Close pane"; close.setAttribute("aria-label", "Close pane"); close.innerHTML = iconHtml("x");
+  close.dataset.sessionId = String(pane.sessionId); close.addEventListener("click", function () { closePane(Number(this.dataset.sessionId)); }); header.appendChild(close);
+  paneEl.appendChild(header); paneEl.appendChild(frame); return paneEl;
+}
+
+export function updateSplitPaneMetadata(paneEl, pane) {
+  var session = sessionById(pane.sessionId); var header = paneEl.querySelector(".split-pane-header");
+  var title = paneEl.querySelector(".split-pane-title"); var frame = paneEl.querySelector(".split-pane-frame"); var vendor = paneEl.querySelector(".split-pane-vendor");
+  paneEl.dataset.sessionId = String(pane.sessionId); paneEl.dataset.projectSlug = pane.slug;
+  if (header) header.title = pane.title; if (title && title.style.display !== "none") title.textContent = pane.title; if (frame) frame.title = pane.title;
+  if (vendor) { var vendorName = session && session.vendor || "claude"; vendor.src = VENDOR_AVATARS[vendorName] || VENDOR_AVATARS.claude; vendor.title = VENDOR_NAMES[vendorName] || vendorName; }
+  var close = paneEl.querySelector(".split-pane-close");
+  if (close) {
+    close.dataset.sessionId = String(pane.sessionId); close.disabled = false; close.title = "Close pane"; close.setAttribute("aria-label", close.title);
+  }
+}
+
+export function updatePaneContextChip(paneEl, msg) {
+  if (!paneEl) return; var chip = paneEl.querySelector(".split-pane-context"); if (!chip) return; var pct = msg.pct || 0; if (pct <= 0) return;
+  chip.classList.add("has-data"); var fill = chip.querySelector(".split-pane-context-fill"); var label = chip.querySelector(".split-pane-context-label");
+  fill.style.width = Math.min(100, pct).toFixed(1) + "%"; fill.className = "split-pane-context-fill" + (msg.cls || ""); label.textContent = pct.toFixed(0) + "%";
+  var tip = "Context " + pct.toFixed(0) + "% (" + formatTokens(msg.used || 0) + " / " + formatTokens(msg.win || 0) + " tokens)";
+  if (msg.cost) tip += " · $" + msg.cost.toFixed(4); if (msg.model && msg.model !== "-") tip += " · " + msg.model; chip.title = tip;
+}