clay-server 5.2.1-beta.2 → 5.3.0-beta.1

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

@@ -11,9 +11,11 @@ export function splitPaneIdentity(pane) {
   return String(pane && pane.slug || "") + "#" + String(pane && pane.sessionId || "");
 }
 
-export function reconcileSplitPanes(host, panes, createPane, updatePane) {
+export function reconcileSplitPanes(host, panes, createPane, updatePane, retention) {
   var desired = Array.isArray(panes) ? panes : [];
-  var existing = host.querySelectorAll(".split-pane");
+  var existing = host.querySelectorAll(retention ? ".split-pane, .split-pane-cached" : ".split-pane");
+  existing = Array.from(existing);
+  if (retention) existing.sort(function (a, b) { return retention.age(a) - retention.age(b); });
   var byKey = new Map();
   for (var i = 0; i < existing.length; i++) byKey.set(existing[i].dataset.splitPaneKey, existing[i]);
   var used = new Set();
@@ -24,20 +26,37 @@ export function reconcileSplitPanes(host, panes, createPane, updatePane) {
     if (!paneEl) {
       for (var ci = 0; ci < existing.length; ci++) {
         var candidate = existing[ci], frame = candidate.querySelector('.split-pane-frame');
-        if (!used.has(candidate) && frame && frame.dataset.projectSlug === pane.slug && frame.clayPane &&
+        if (candidate.parentNode === host && !used.has(candidate) && (!retention || retention.canRetarget(candidate)) && frame && frame.dataset.projectSlug === pane.slug && frame.clayPane &&
           !desired.some(function (item) { return splitPaneIdentity(item) === candidate.dataset.splitPaneKey; })) {
           paneEl = candidate; break;
         }
       }
     }
+    if (!paneEl && retention) {
+      while (host.querySelectorAll('.split-pane, .split-pane-cached').length >= retention.limit) {
+        var victim = existing.find(function (item) { return item.parentNode === host && !used.has(item) &&
+          !desired.some(function (model) { return splitPaneIdentity(model) === item.dataset.splitPaneKey; }); });
+        if (!victim) break;
+        retention.evict(victim);
+      }
+    }
     if (!paneEl) paneEl = createPane(pane, pi);
+    if (retention) retention.restore(paneEl);
     paneEl.dataset.splitPaneKey = key;
     updatePane(paneEl, pane, pi);
+    if (retention) retention.remember(paneEl, pane);
     if (paneEl.style) paneEl.style.order = String(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();
+    if (!used.has(existing[ei]) && existing[ei].parentNode === host) {
+      if (retention && retention.retain(existing[ei])) retention.park(existing[ei]);
+      else if (retention) retention.evict(existing[ei]);
+      else {
+        if (existing[ei].dispatchEvent) existing[ei].dispatchEvent(new Event('clay-pane-dispose'));
+        existing[ei].remove();
+      }
+    }
   }
 }

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

@@ -1,13 +1,17 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
+import { copyToClipboard } from './utils.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';
-import { paneTarget, livePaneBinding, samePaneTarget } from './pane-binding.js';
-import { syncPairChrome } from './split-pair-ui.js';
+import { paneTarget, livePaneBinding, samePaneTarget, samePaneBinding } from './pane-binding.js';
+import { syncPairChrome, clearPanePairChrome } from './split-pair-ui.js';
+import { renderPaneWorkers } from './split-view-workers.js';
+import { toggleSidebarCollapse } from './sidebar.js';
+import { syncPaneHeaderState } from './split-pane-header-state.js';
 
 function sessionById(sessionId) {
   var sessions = getCachedSessions() || [];
@@ -25,19 +29,219 @@ function headerBindingStamp(frame) {
     live && live.binding && live.binding.requestId, live && live.binding && live.binding.generation]);
 }
 
+function capturePaneSearchReceipt(paneEl, frame, binding) {
+  var live = frame.clayPane && frame.clayPane.identity(), state = store.snap();
+  if (!live || !live.ready || !binding || !samePaneBinding(live.binding, binding) || !livePaneBinding(frame, { paneBinding: binding }) ||
+      live.sessionId !== Number(frame.dataset.sessionId) || binding.sessionOriginId !== frame.dataset.sessionOriginId ||
+      Number(paneEl.dataset.sessionId) !== live.sessionId || paneEl.hidden || paneEl.inert || frame.closest('.split-pane-cached') ||
+      state.paneSuspended || !state.connected || !getWs()) return null;
+  return { binding: binding, source: frame.contentWindow, document: frame.contentDocument, socket: getWs(),
+    projectSlug: state.currentSlug, ownerId: state.myUserId, sessionId: live.sessionId, sessionOriginId: binding.sessionOriginId };
+}
+
+function paneSearchReceiptCurrent(paneEl, frame, receipt) {
+  if (!receipt || !paneEl.isConnected || paneEl.hidden || paneEl.inert || frame.closest('.split-pane-cached') ||
+      frame.contentWindow !== receipt.source || frame.contentDocument !== receipt.document || getWs() !== receipt.socket) return false;
+  var state = store.snap(), live = frame.clayPane && frame.clayPane.identity();
+  return state.connected && !state.paneSuspended && state.currentSlug === receipt.projectSlug && state.myUserId === receipt.ownerId &&
+    live && live.ready && live.sessionId === receipt.sessionId && live.binding.sessionOriginId === receipt.sessionOriginId &&
+    samePaneBinding(live.binding, receipt.binding) && livePaneBinding(frame, { paneBinding: receipt.binding }) &&
+    Number(paneEl.dataset.sessionId) === receipt.sessionId && Number(frame.dataset.sessionId) === receipt.sessionId &&
+    frame.dataset.sessionOriginId === receipt.sessionOriginId;
+}
+
+function sendPaneSearchCommand(paneEl, frame, receipt, action, query) {
+  if (!paneSearchReceiptCurrent(paneEl, frame, receipt) || !['open', 'query', 'next', 'previous', 'close'].includes(action)) return false;
+  frame.contentWindow.postMessage({ type: "clay-pane-search-command", paneBinding: receipt.binding, action: action, query: query }, window.location.origin);
+  return true;
+}
+
+var paneSearchDismissalInstalled = false;
+
+function createPaneSearchPopover(paneEl, frame, searchButton) {
+  var popover = document.createElement("div");
+  popover.className = "split-pane-search-popover";
+  popover.hidden = true;
+  popover.setAttribute("role", "search");
+  var input = document.createElement("input");
+  input.type = "search"; input.className = "split-pane-search-input";
+  input.placeholder = "Search this session"; input.autocomplete = "off"; input.spellcheck = false;
+  input.setAttribute("aria-label", "Search this session");
+  var count = document.createElement("span"); count.className = "split-pane-search-count"; count.setAttribute("aria-live", "polite");
+  var paneHeader = paneEl.querySelector(".split-pane-header");
+  var receipt = null;
+  var timer = null;
+  var disposed = false;
+  var actionGesture = null;
+  var headerObserver = null;
+  var unsubscribe = null;
+  function setSearchTop() {
+    if (!popover.hidden && paneHeader && paneEl.getBoundingClientRect && paneHeader.getBoundingClientRect && paneEl.style && paneEl.style.setProperty) {
+      var paneRect = paneEl.getBoundingClientRect(), headerRect = paneHeader.getBoundingClientRect();
+      paneEl.style.setProperty('--split-pane-search-top', Math.max(0, headerRect.bottom - paneRect.top) + 'px');
+    }
+  }
+  function actionButton(label, action, icon) {
+    var button = document.createElement("button"); button.type = "button";
+    button.className = "split-pane-search-action"; button.title = label; button.setAttribute("aria-label", label);
+    button.innerHTML = iconHtml(icon);
+    function arm(event) { if (event.type === 'pointerdown' || event.key === 'Enter' || event.key === ' ') actionGesture = { receipt: receipt }; }
+    button.addEventListener('pointerdown', arm);
+    button.addEventListener('keydown', arm);
+    button.addEventListener("click", function () {
+      var gesture = actionGesture; actionGesture = null;
+      var captured = gesture ? gesture.receipt : receipt;
+      if (!disposed && captured === receipt && sendPaneSearchCommand(paneEl, frame, captured, action)) input.focus();
+    });
+    return button;
+  }
+  var previous = actionButton("Previous match", "previous", "chevron-up");
+  var next = actionButton("Next match", "next", "chevron-down");
+  var close = document.createElement("button"); close.type = "button"; close.className = "split-pane-search-action";
+  close.title = "Close search"; close.setAttribute("aria-label", "Close search"); close.innerHTML = iconHtml("x");
+  input.addEventListener("input", function () {
+    clearTimeout(timer);
+    var openedReceipt = receipt;
+    timer = setTimeout(function () {
+      if (!disposed && openedReceipt === receipt) sendPaneSearchCommand(paneEl, frame, openedReceipt, "query", input.value);
+    }, 180);
+  });
+  input.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") { event.preventDefault(); sendPaneSearchCommand(paneEl, frame, receipt, event.shiftKey ? "previous" : "next"); }
+    if (event.key === "Escape") { event.preventDefault(); closeSearch(); }
+  });
+  popover.addEventListener("click", function (event) { event.stopPropagation(); });
+  function closeSearch(restoreFocus, sendClose, expectedReceipt) {
+    if (disposed) return;
+    if (expectedReceipt && expectedReceipt !== receipt) return;
+    var closingReceipt = receipt;
+    clearTimeout(timer);
+    if (sendClose !== false) sendPaneSearchCommand(paneEl, frame, closingReceipt, "close");
+    receipt = null;
+    popover.hidden = true; searchButton.setAttribute("aria-expanded", "false");
+    if (restoreFocus !== false) searchButton.focus();
+  }
+  function armClose(event) { if (event.type === 'pointerdown' || event.key === 'Enter' || event.key === ' ') actionGesture = { receipt: receipt }; }
+  close.addEventListener('pointerdown', armClose);
+  close.addEventListener('keydown', armClose);
+  close.addEventListener("click", function () {
+    var gesture = actionGesture; actionGesture = null;
+    if (!disposed && (!gesture || gesture.receipt === receipt)) closeSearch();
+  });
+  popover.closePaneSearch = closeSearch;
+  popover.getPaneSearchReceipt = function () { return receipt; };
+  popover.openPaneSearch = function (binding) {
+    if (disposed) return false;
+    var captured = capturePaneSearchReceipt(paneEl, frame, binding);
+    if (!captured) return false;
+    receipt = captured;
+    popover.hidden = false; searchButton.setAttribute("aria-expanded", "true");
+    setSearchTop(); sendPaneSearchCommand(paneEl, frame, receipt, "open", input.value); input.focus(); input.select();
+    return true;
+  };
+  if (!paneSearchDismissalInstalled) {
+    paneSearchDismissalInstalled = true;
+    document.addEventListener("pointerdown", function (event) {
+      var openPopovers = document.querySelectorAll(".split-pane-search-popover:not([hidden])");
+      for (var i = 0; i < openPopovers.length; i++) {
+        var openPopover = openPopovers[i];
+        var owner = openPopover.closest(".split-pane");
+        var trigger = owner && owner.querySelector(".split-pane-search");
+        if (!openPopover.contains(event.target) && event.target !== trigger && openPopover.closePaneSearch) openPopover.closePaneSearch(false);
+      }
+    });
+  }
+  searchButton.setAttribute("aria-expanded", "false");
+  searchButton.addEventListener("click", function (event) {
+    event.stopPropagation();
+    if (!syncPaneHeaderState(paneEl)) return;
+    var live = frame.clayPane && frame.clayPane.identity();
+    if (!live || !live.ready || !livePaneBinding(frame) || live.sessionId !== Number(frame.dataset.sessionId) ||
+        live.binding.sessionOriginId !== frame.dataset.sessionOriginId || Number(paneEl.dataset.sessionId) !== live.sessionId) return;
+    if (!popover.hidden) { closeSearch(); return; }
+    popover.openPaneSearch(live.binding);
+  });
+  function resetForBindingChange() { closeSearch(false, false); input.value = ""; count.textContent = ""; syncPaneHeaderState(paneEl); }
+  function onStoreChange() {
+    if (receipt && !paneSearchReceiptCurrent(paneEl, frame, receipt)) resetForBindingChange();
+    else syncPaneHeaderState(paneEl);
+  }
+  function dispose() {
+    if (disposed) return;
+    closeSearch(false, false);
+    disposed = true; clearTimeout(timer); timer = null; actionGesture = null;
+    frame.removeEventListener("clay-pane-retarget", resetForBindingChange);
+    if (paneHeader) paneHeader.removeEventListener("clay-pane-retarget", resetForBindingChange);
+    frame.removeEventListener("clay-pane-activation-failed", resetForBindingChange);
+    frame.removeEventListener("clay-pane-suspend", resetForBindingChange);
+    if (unsubscribe) { unsubscribe(); unsubscribe = null; }
+    window.removeEventListener("resize", setSearchTop);
+    if (headerObserver) { headerObserver.disconnect(); headerObserver = null; }
+    paneEl.removeEventListener('clay-pane-dispose', dispose);
+  }
+  paneEl.addEventListener('clay-pane-dispose', dispose);
+  paneEl.disposePaneSearchPopover = dispose;
+  try {
+    frame.addEventListener("clay-pane-retarget", resetForBindingChange);
+    if (paneHeader) paneHeader.addEventListener("clay-pane-retarget", resetForBindingChange);
+    frame.addEventListener("clay-pane-activation-failed", resetForBindingChange);
+    frame.addEventListener("clay-pane-suspend", resetForBindingChange);
+    unsubscribe = store.subscribe(onStoreChange);
+    window.addEventListener("resize", setSearchTop);
+    if (typeof ResizeObserver === 'function') {
+      headerObserver = new ResizeObserver(setSearchTop);
+      if (paneHeader) headerObserver.observe(paneHeader);
+    }
+    popover.appendChild(input); popover.appendChild(count); popover.appendChild(previous); popover.appendChild(next); popover.appendChild(close);
+    paneEl.appendChild(popover);
+    return { popover: popover, input: input, count: count, close: closeSearch, button: searchButton };
+  } catch (error) {
+    dispose();
+    throw error;
+  }
+}
+
+export function handlePaneSearchMessage(event, host) {
+  var frames = host ? host.querySelectorAll(".split-pane-frame") : [];
+  for (var i = 0; i < frames.length; i++) {
+    var frame = frames[i], live = frame.clayPane && frame.clayPane.identity();
+    if (frame.contentWindow !== event.source || !live || !livePaneBinding(frame, event.data) || live.sessionId !== Number(frame.dataset.sessionId)) continue;
+    var paneEl = frame.closest(".split-pane"), popover = paneEl && paneEl.querySelector(".split-pane-search-popover");
+    if (!popover) return true;
+    if (event.data.type === "clay-pane-search-status") {
+      var count = popover.querySelector(".split-pane-search-count");
+      var input = popover.querySelector(".split-pane-search-input");
+      var receipt = popover.getPaneSearchReceipt && popover.getPaneSearchReceipt();
+      if (receipt && samePaneBinding(receipt.binding, live.binding) && paneSearchReceiptCurrent(paneEl, frame, receipt)) {
+        if (event.data.open === false) popover.closePaneSearch(true, false, receipt);
+        else if (!popover.hidden && event.data.query === input.value.trim()) count.textContent = event.data.status || "";
+      }
+    } else if (event.data.type === "clay-pane-search-open" && popover.hidden) {
+      var input = popover.querySelector('.split-pane-search-input');
+      popover.openPaneSearch(live.binding);
+    }
+    return true;
+  }
+  return false;
+}
+
 function startPaneRename(header, titleEl, pane) {
   if (header.querySelector(".split-pane-rename-input")) return;
+  var section = header.parentNode, frame = section.querySelector('.split-pane-frame');
+  var initial = frame && frame.clayPane && frame.clayPane.identity();
+  if (!initial || !initial.ready || !livePaneBinding(frame) || initial.sessionId !== pane.sessionId ||
+      initial.binding.sessionOriginId !== frame.dataset.sessionOriginId) 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;
-  var section = header.parentNode, frame = section.querySelector('.split-pane-frame');
-  var origin = frame.dataset.sessionOriginId, binding = frame.clayPane && frame.clayPane.identity().binding, socket = getWs();
+  var origin = frame.dataset.sessionOriginId, binding = initial.binding, socket = getWs();
   function current() {
     var live = frame.clayPane && frame.clayPane.identity();
     return header.isConnected && !header.inert && socket === getWs() && store.get('connected') &&
       frame.dataset.sessionId === String(pane.sessionId) && frame.dataset.sessionOriginId === origin && !frame.dataset.requestedSessionId &&
-      (!frame.clayPane || livePaneBinding(frame) && live.binding === binding);
+      !!live && live.ready && live.sessionId === pane.sessionId && live.binding.sessionOriginId === origin &&
+      livePaneBinding(frame) && samePaneBinding(live.binding, binding);
   }
   function finish(commit) {
     if (done) return;
@@ -86,11 +290,11 @@ export function updatePaneFullAccessButton(button, 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 session = sessionById(pane.sessionId); var vendor = session && session.vendor || "unknown";
+  var vendorIcon = document.createElement("img"); vendorIcon.className = "split-pane-vendor"; vendorIcon.hidden = !VENDOR_AVATARS[vendor];
+  if (!vendorIcon.hidden) vendorIcon.src = VENDOR_AVATARS[vendor]; 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 () { var current = sessionById(Number(paneEl.dataset.sessionId)); if (current) startPaneRename(header, title, { sessionId: current.id, title: current.title }); }); header.appendChild(title);
+  title.addEventListener("click", function () { if (title.getAttribute('aria-disabled') === 'true' || !syncPaneHeaderState(paneEl)) return; var current = sessionById(Number(paneEl.dataset.sessionId)); if (current) startPaneRename(header, title, { sessionId: current.id, title: current.title }); }); 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;
   frame.dataset.sessionOriginId = session && session.sessionOriginId || '';
@@ -109,12 +313,38 @@ export function createSplitPane(pane, closePane) {
   });
   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.clayPane || livePaneBinding(frame))) frame.contentWindow.postMessage({ type: "clay-pane-toggle-context", paneBinding: frame.clayPane && frame.clayPane.identity().binding }, window.location.origin); }); header.appendChild(ctxChip);
+  ctxChip.addEventListener("click", function () { if (syncPaneHeaderState(paneEl) && frame.contentWindow && frame.clayPane && livePaneBinding(frame)) frame.contentWindow.postMessage({ type: "clay-pane-toggle-context", paneBinding: frame.clayPane.identity().binding }, 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(Number(paneEl.dataset.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);
+  if (store.get('projectSplitViewSingletonOrigin') === (session && session.sessionOriginId)) {
+    close.hidden = true; close.title = "The only pane cannot be closed"; close.setAttribute("aria-label", "The only pane cannot be closed");
+  }
+  close.dataset.sessionId = String(pane.sessionId); close.addEventListener("click", function () { if (syncPaneHeaderState(paneEl)) closePane(Number(this.dataset.sessionId)); }); header.appendChild(close);
+  var info = document.createElement("button"); info.type = "button"; info.className = "split-pane-info"; info.setAttribute("aria-label", "Session information"); info.title = "Session information"; info.innerHTML = iconHtml("info");
+  info.addEventListener("click", function (event) { event.stopPropagation(); if (syncPaneHeaderState(paneEl)) togglePaneInfo(info, frame); }); header.appendChild(info);
+  var sidebarButton = document.createElement("button"); sidebarButton.type = "button"; sidebarButton.className = "split-pane-sidebar";
+  var sidebarExpanded = !document.getElementById("layout").classList.contains("sidebar-collapsed");
+  sidebarButton.setAttribute("aria-label", sidebarExpanded ? "Collapse sidebar" : "Open sidebar");
+  sidebarButton.setAttribute("aria-expanded", sidebarExpanded ? "true" : "false");
+  sidebarButton.title = sidebarExpanded ? "Collapse sidebar" : "Open sidebar"; sidebarButton.innerHTML = iconHtml("panel-left");
+  sidebarButton.addEventListener("click", function (event) {
+    event.stopPropagation();
+    if (!syncPaneHeaderState(paneEl)) return;
+    var live = frame.clayPane && frame.clayPane.identity();
+    var activePane = paneEl.dataset.active === "true" || live && store.get('projectSplitViewSingletonOrigin') === live.binding.sessionOriginId;
+    if (!live || !live.ready || !livePaneBinding(frame) || live.sessionId !== Number(frame.dataset.sessionId) ||
+        live.binding.sessionOriginId !== frame.dataset.sessionOriginId || !activePane) return;
+    toggleSidebarCollapse();
+    var expanded = !document.getElementById("layout").classList.contains("sidebar-collapsed");
+    sidebarButton.setAttribute("aria-expanded", expanded ? "true" : "false");
+    sidebarButton.setAttribute("aria-label", expanded ? "Collapse sidebar" : "Open sidebar");
+    sidebarButton.title = expanded ? "Collapse sidebar" : "Open sidebar";
+  }); header.appendChild(sidebarButton);
+  var search = document.createElement("button"); search.type = "button"; search.className = "split-pane-search"; search.setAttribute("aria-label", "Search this session"); search.title = "Search this session"; search.innerHTML = iconHtml("search");
+  header.insertBefore(search, close);
   frame.addEventListener('clay-pane-ready', function () {
+    if (paneEl.classList.contains('split-pane-cached')) return;
     var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId), current = sessionById(id);
     var live = frame.clayPane && frame.clayPane.identity(), target = paneTarget(store.snap(), getCachedSessions(), id);
     if (!current || !live || !live.ready || !samePaneTarget(target, live.binding) || live.sessionId !== id) return;
@@ -124,24 +354,74 @@ export function createSplitPane(pane, closePane) {
     syncPairChrome(paneEl.parentNode, store.get('splitPanes'));
   });
   frame.addEventListener('clay-pane-activation-failed', function () {
+    if (paneEl.classList.contains('split-pane-cached')) return;
+    syncPaneHeaderState(paneEl);
     var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId);
     var fallbackTarget = paneTarget(store.snap(), getCachedSessions(), id);
-    if (!fallbackTarget) { header.inert = true; return; }
+    if (!fallbackTarget) { header.inert = true; syncPaneHeaderState(paneEl); return; }
     frame.dataset.sessionOriginId = fallbackTarget.sessionOriginId;
     frame.src = paneUrl({ slug: frame.dataset.projectSlug, sessionId: id });
     frame.dataset.sessionId = String(id); delete frame.dataset.requestedSessionId;
+    syncPaneHeaderState(paneEl);
   });
-  paneEl.appendChild(header); paneEl.appendChild(frame); return paneEl;
+  paneEl.appendChild(header);
+  createPaneSearchPopover(paneEl, frame, search);
+  var runtime = document.createElement("div"); runtime.className = "split-view-runtime";
+  vendorIcon.classList.add("split-view-runtime-icon"); runtime.appendChild(vendorIcon);
+  var runtimeModel = document.createElement("span"); runtimeModel.className = "split-view-model"; runtime.appendChild(runtimeModel);
+  header.insertBefore(runtime, title); header.appendChild(close); paneEl.appendChild(frame);
+  syncPaneHeaderState(paneEl);
+  return paneEl;
+}
+
+function togglePaneInfo(anchor, frame) {
+  var existing = document.getElementById("split-pane-info-popover");
+  if (existing) { existing.remove(); if (existing.dataset.origin === frame.dataset.sessionOriginId) return; }
+  var live = frame.clayPane && frame.clayPane.identity();
+  if (!live || !live.ready || !livePaneBinding(frame) || live.binding.sessionOriginId !== frame.dataset.sessionOriginId || live.sessionId !== Number(frame.dataset.sessionId)) return;
+  var session = sessionById(live.sessionId);
+  if (!session || session.sessionOriginId !== live.binding.sessionOriginId) return;
+  var binding = live.binding;
+  function current() {
+    var currentLive = frame.clayPane && frame.clayPane.identity();
+    return anchor.isConnected && !anchor.closest('.split-pane-header').inert && frame.dataset.sessionId === String(session.id) &&
+      frame.dataset.sessionOriginId === session.sessionOriginId && !frame.dataset.requestedSessionId && currentLive &&
+      currentLive.ready && currentLive.sessionId === session.id && samePaneBinding(currentLive.binding, binding) && livePaneBinding(frame);
+  }
+  var pop = document.createElement("div"); pop.id = "split-pane-info-popover"; pop.className = "session-info-popover"; pop.dataset.origin = session.sessionOriginId;
+  var values = [["Local ID", session.id]];
+  if (session.cliSessionId) values.push(["Session ID", session.cliSessionId]);
+  var vendor = (store.get("vendorInfo") || {})[session.vendor || "claude"] || {};
+  if (session.cliSessionId && vendor.terminalResumeCommand) values.push(["Resume", vendor.terminalResumeCommand + " " + session.cliSessionId]);
+  values.forEach(function (entry) {
+    var row = document.createElement("div"); row.className = "info-row";
+    var label = document.createElement("span"); label.className = "info-label"; label.textContent = entry[0];
+    var value = document.createElement("span"); value.className = "info-value"; value.textContent = String(entry[1]);
+    var copy = document.createElement("button"); copy.type = "button"; copy.className = "info-copy-btn"; copy.title = "Copy " + entry[0]; copy.setAttribute("aria-label", "Copy " + entry[0]); copy.innerHTML = iconHtml("copy");
+    copy.addEventListener("click", function () { if (!current()) { pop.remove(); return; } copyToClipboard(String(entry[1])).then(function () { if (pop.isConnected && current()) copy.innerHTML = iconHtml("check"); }); });
+    row.append(label, value, copy); pop.appendChild(row);
+  });
+  document.body.appendChild(pop);
+  var rect = anchor.getBoundingClientRect(); pop.style.top = (rect.bottom + 6) + "px"; pop.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - pop.offsetWidth - 8)) + "px";
+  function dismiss(event) { if (event.type === "keydown" && event.key !== "Escape") return; if (event.type === "click" && (pop.contains(event.target) || anchor.contains(event.target))) return; pop.remove(); document.removeEventListener("click", dismiss, true); document.removeEventListener("keydown", dismiss, true); frame.removeEventListener('clay-pane-retarget', dismiss); frame.removeEventListener('clay-pane-ready', dismiss); if (event.type === "keydown") anchor.focus(); }
+  document.addEventListener("click", dismiss, true); document.addEventListener("keydown", dismiss, true);
+  frame.addEventListener('clay-pane-retarget', dismiss); frame.addEventListener('clay-pane-ready', dismiss);
 }
 
 export function updateSplitPaneMetadata(paneEl, pane) {
+  clearPanePairChrome(paneEl);
   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");
   var live = frame && frame.clayPane && frame.clayPane.identity();
   var retarget = frame && (Number(frame.dataset.sessionId) !== pane.sessionId || frame.dataset.sessionOriginId !== (session && session.sessionOriginId || '') || frame.clayPane && (!live || !live.ready));
+  if (retarget && frame && frame.clayPane) {
+    // Invalidate the old ready binding before header sync exposes any action.
+    frame.dataset.requestedSessionId = String(pane.sessionId);
+  }
   if (retarget && header) {
     header.dispatchEvent(new Event('clay-pane-retarget'));
     header.inert = true;
+    syncPaneHeaderState(paneEl);
     header.title = 'Loading conversation';
     if (title) { title.style.display = ''; title.textContent = 'Loading conversation'; }
     if (vendor) vendor.hidden = true;
@@ -151,24 +431,51 @@ export function updateSplitPaneMetadata(paneEl, pane) {
   }
   if (frame && frame.clayPane && retarget) {
     var target = paneTarget(store.snap(), getCachedSessions(), pane.sessionId);
-    if (target && frame.clayPane.source === frame.contentWindow && frame.clayPane.document === frame.contentDocument && frame.clayPane.activate(pane.sessionId, false, target)) {
-      frame.dataset.requestedSessionId = String(pane.sessionId);
-      if (header) header.inert = true;
-      return;
+    if (target && frame.clayPane.source === frame.contentWindow && frame.clayPane.document === frame.contentDocument) {
+      if (frame.clayPane.activate(pane.sessionId, false, target)) {
+        if (header) header.inert = true;
+        return;
+      }
+      // A same-target document can expose its controller before its socket and
+      // identity are ready. Its bootstrap retries activation; reloading here
+      // restarts that bootstrap on every metadata update.
+      if ((!live || !live.ready) && Number(frame.dataset.sessionId) === pane.sessionId &&
+          frame.dataset.projectSlug === pane.slug && frame.dataset.sessionOriginId === target.sessionOriginId) return;
     }
+    delete frame.dataset.requestedSessionId;
     frame.src = paneUrl(pane);
     frame.dataset.sessionId = String(pane.sessionId); frame.dataset.projectSlug = pane.slug;
     frame.dataset.sessionOriginId = session && session.sessionOriginId || '';
   }
-  if (header) header.inert = false;
   paneEl.dataset.sessionId = String(pane.sessionId); paneEl.dataset.projectSlug = pane.slug;
+  paneEl.dataset.sessionOrigin = session && session.sessionOriginId || "";
   if (header) header.title = pane.title; if (title && title.style.display !== "none") title.textContent = pane.title; if (frame) frame.title = pane.title;
-  if (vendor) { vendor.hidden = false; var vendorName = session && session.vendor || "claude"; vendor.src = VENDOR_AVATARS[vendorName] || VENDOR_AVATARS.claude; vendor.title = VENDOR_NAMES[vendorName] || vendorName; }
+  var sidebarButton = paneEl.querySelector('.split-pane-sidebar');
+  if (sidebarButton) sidebarButton.hidden = store.get('projectSplitViewSingletonOrigin') !== (session && session.sessionOriginId) && paneEl.dataset.active !== 'true';
+  if (vendor) { var vendorName = session && session.vendor || "unknown"; vendor.hidden = !VENDOR_AVATARS[vendorName]; if (!vendor.hidden) vendor.src = VENDOR_AVATARS[vendorName]; vendor.title = VENDOR_NAMES[vendorName] || vendorName; }
+  var runtime = paneEl.querySelector('.split-view-runtime');
+  var runtimeName = session && session.vendor || "unknown", runtimeModelName = session && typeof session.model === "string" && session.model.trim() || "Model unavailable";
+  var runtimeIcon = runtime.querySelector('.split-view-runtime-icon'), runtimeModel = runtime.querySelector('.split-view-model');
+  if (runtimeIcon) { runtimeIcon.hidden = !VENDOR_AVATARS[runtimeName]; if (!runtimeIcon.hidden) runtimeIcon.src = VENDOR_AVATARS[runtimeName]; runtimeIcon.title = VENDOR_NAMES[runtimeName] || runtimeName; runtimeIcon.alt = ""; }
+  if (runtimeModel) { runtimeModel.textContent = runtimeModelName; runtimeModel.title = (VENDOR_NAMES[runtimeName] || runtimeName) + " · " + runtimeModelName; }
+  runtime.setAttribute("aria-label", (VENDOR_NAMES[runtimeName] || runtimeName) + " · " + runtimeModelName);
+  renderPaneWorkers(paneEl, session);
   updatePaneFullAccessButton(paneEl.querySelector('.split-pane-full-access'), session);
-  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);
-  }
+  syncPaneHeaderState(paneEl);
+  updateSplitPaneCloseVisibility(paneEl, pane.sessionId);
+}
+
+export function updateSplitPaneCloseVisibility(paneEl, sessionId) {
+  var close = paneEl && paneEl.querySelector('.split-pane-close');
+  if (!close) return;
+  var paneHost = paneEl.parentNode;
+  var singletonOnly = !!paneHost && paneHost.id === 'split-host' && paneHost.dataset && paneHost.dataset.singlePane === 'true' &&
+    paneHost.querySelectorAll(':scope > .split-pane').length === 1;
+  if (sessionId != null) close.dataset.sessionId = String(sessionId);
+  close.hidden = singletonOnly;
+  close.disabled = singletonOnly;
+  close.title = singletonOnly ? "The only pane cannot be closed" : "Close pane";
+  close.setAttribute("aria-label", close.title);
 }
 
 function resetPaneContextChip(paneEl) {