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

package/lib/public/modules/shared-browser.js

@@ -1,3 +1,6 @@
+import { registerStudioPaint } from './clay-studio-render.js';
+import { browserLinkTarget, initBrowserLinks } from './clay-browser-links.js';
+import { browserSettingsHtml, bindBrowserSettings, renderBrowserSettings, closeBrowserSettings, handleBrowserSettingsMessage } from './shared-browser-settings.js';
 import { renderBrowserTabs } from './shared-browser-tabs.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
@@ -50,15 +53,15 @@ function ensurePanel() {
   el.className = 'shared-browser-panel hidden';
   el.setAttribute('aria-label', 'Shared browser');
   el.innerHTML = '<header class="shared-browser-header"><span class="shared-browser-title">' + iconHtml('globe') + 'Browser</span><span class="shared-browser-phase" role="status">Ready</span><div class="shared-browser-window">' +
-    iconButton('wide', 'chevrons-left-right', 'Widen browser panel') + iconButton('fullscreen', 'maximize-2', 'Toggle browser fullscreen') + iconButton('hide', 'x', 'Hide browser panel') + '</div></header>' +
+    iconButton('settings', 'settings-2', 'Browser settings') + iconButton('wide', 'chevrons-left-right', 'Widen browser panel') + iconButton('fullscreen', 'maximize-2', 'Toggle browser fullscreen') + iconButton('hide', 'x', 'Hide browser panel') + '</div></header>' +
     '<div class="shared-browser-tabs" role="tablist" aria-label="Browser tabs"></div><form class="shared-browser-address">' + iconButton('back', 'arrow-left', 'Back') + iconButton('forward', 'arrow-right', 'Forward') + iconButton('reload', 'rotate-cw', 'Reload') +
     '<input aria-label="Browser address" placeholder="Enter a URL" type="text" autocomplete="off" spellcheck="false"><button type="submit" aria-label="Open address">' + iconHtml('arrow-right') + '</button></form>' +
-    '<div class="shared-browser-viewport"><div class="shared-browser-monitor"><div class="shared-browser-pointer-layer" aria-hidden="true"><div class="shared-browser-pointer" hidden><svg viewBox="0 0 24 28"><path d="M3 2 L3 22 L8 17 L12 26 L16 24 L12 15 L20 15 Z"/></svg><i></i></div></div><canvas width="1280" height="800" tabindex="0" aria-label="Shared browser page"></canvas>' +
-    '<div class="shared-browser-empty">' + iconHtml('globe') + '<h3>A browser you can share with your Driver</h3><p>Enter an address to browse together.<br>Localhost connects to the Clay host.</p><p class="shared-browser-private">Cookies last only for this browser session.</p></div>' +
+    browserSettingsHtml() + '<div class="shared-browser-viewport"><div class="shared-browser-monitor"><div class="shared-browser-pointer-layer" aria-hidden="true"><div class="shared-browser-pointer" hidden><svg viewBox="0 0 24 28"><path d="M3 2 L3 22 L8 17 L12 26 L16 24 L12 15 L20 15 Z"/></svg><i></i></div></div><canvas width="1280" height="800" tabindex="0" aria-label="Shared browser page"></canvas>' +
+    '<div class="shared-browser-empty">' + iconHtml('globe') + '<h3>A browser you can use with Clay</h3><p>Enter an address to browse together.<br>Localhost connects to the Clay host.</p><p class="shared-browser-private">Site data lasts only for this browser session.</p></div>' +
     '<textarea class="shared-browser-keyboard" aria-label="Type into shared browser" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea><span class="shared-browser-monitor-brand" aria-hidden="true">Clay Studio</span><span class="shared-browser-monitor-detail" aria-hidden="true"></span><span class="shared-browser-monitor-stand" aria-hidden="true"></span></div><div class="shared-browser-caption"><span class="shared-browser-monitor-label"></span>' + activityHtml() + '</div></div>' +
     '<p class="shared-browser-error hidden" role="status"></p>' +
     '<footer class="shared-browser-footer"><div class="shared-browser-control"><span class="shared-browser-control-status" role="status" aria-live="polite">You and Clay can control this browser</span><button type="button" data-action="control" aria-pressed="false"></button></div>' +
-    '<div class="shared-browser-details">' + viewportMenuHtml() + '<button type="button" data-action="end">End browser</button></div></footer>';
+    '<div class="shared-browser-details"><span class="shared-browser-cookie-mode"></span>' + viewportMenuHtml() + '<button type="button" data-action="end">End browser</button></div></footer>';
   root.appendChild(el);
   el.querySelector('[data-action="hide"]').onclick = hideSharedBrowser;
   el.querySelector('[data-action="wide"]').onclick = function () { var wide = !(store.get('sharedBrowserUi') || {}).wide; ui({ wide: wide }); render(); };
@@ -69,8 +72,9 @@ function ensurePanel() {
     var browser = store.get('sharedBrowser');
     if (browser) send('control', { control: browser.control === 'user' ? 'agent' : 'user' });
   };
-  el.querySelector('[data-action="end"]').onclick = function () { var browser = store.get('sharedBrowser'); send(browser && browser.phase === 'ended' ? 'open' : 'end'); };
+  el.querySelector('[data-action="end"]').onclick = function () { var browser = store.get('sharedBrowser'); send(browser && browser.phase === 'ended' ? 'open' : 'end', browser && browser.phase === 'ended' ? { incognito: browser.incognito } : undefined); };
   bindViewportMenu(el);
+  bindBrowserSettings(el);
   var observer = new ResizeObserver(layoutMonitor);
   observer.observe(el.querySelector('.shared-browser-viewport'));
   bindBrowserInput(el.querySelector('canvas'), el.querySelector('textarea'));
@@ -141,11 +145,16 @@ function render() {
   el.querySelector('[data-action="control"]').hidden = !live;
   el.querySelector('[data-action="end"]').disabled = !browser || !connected;
   el.querySelector('[data-action="end"]').textContent = browser && browser.phase === 'ended' ? 'New browser' : 'End browser';
+  var personal = browser && browser.incognito === false;
+  el.querySelector('.shared-browser-cookie-mode').textContent = personal ? 'Personal browser' : 'Incognito';
+  el.querySelector('.shared-browser-cookie-mode').title = personal ? 'Cookies and site storage are saved for your account across your Mates.' : 'Cookies and site storage are isolated and discarded when this tab ends.';
+  el.querySelector('.shared-browser-private').textContent = personal ? 'Your cookies and site storage are remembered across your Mates and browser restarts.' : 'Site data lasts only for this browser session.';
   var error = state.error || (browser && browser.error) || '';
   el.querySelector('.shared-browser-error').textContent = error;
   el.querySelector('.shared-browser-error').classList.toggle('hidden', !error);
   el.querySelector('.shared-browser-empty').classList.toggle('hidden', !!(browser && browser.url && state.hasFrame));
   renderViewportMenu(el, browser, operable);
+  renderBrowserSettings();
   renderBrowserActivity(el, browser, connected);
   layoutMonitor();
 }
@@ -163,6 +172,16 @@ function selectBrowserTab(id) {
   setBrowserTab(browser);
   send('view', { visible: desktop() && !document.hidden }); render();
 }
+export function openSharedBrowserAt(value) {
+  var url = browserLinkTarget('browser:' + value);
+  if (!url) throw new Error('Enter a valid HTTP or HTTPS browser address.');
+  if (!desktop()) throw new Error('Clay Browser is available on desktop screens.');
+  if (!eligible()) throw new Error('Browser access is unavailable in this conversation.');
+  if (!store.get('connected')) throw new Error('Reconnect before opening this browser link.');
+  ensurePanel(); closeBrowserSettings(false);
+  claimRightWorkbench('browser'); store.set({ sharedBrowserOpen: true });
+  ui({ error: '' }); send('open', { url: url }); render();
+}
 export function openSharedBrowser() {
   if (!eligible() || !store.get('connected')) return;
   ensurePanel();
@@ -175,6 +194,7 @@ export function openSharedBrowser() {
 }
 export function hideSharedBrowser() {
   closeViewportMenu();
+  closeBrowserSettings();
   clearBrowserInput();
   if (store.get('sharedBrowserOpen')) send('view', { visible: false });
   store.set({ sharedBrowserOpen: false });
@@ -184,6 +204,7 @@ export function hideSharedBrowser() {
 export function handleSharedBrowserMessage(msg) {
   if (!msg.type || msg.type.indexOf('shared_browser_') !== 0) return false;
   if (String(msg.sessionId) !== String(store.get('activeSessionId'))) return true;
+  if (handleBrowserSettingsMessage(msg)) return true;
   if (msg.type === 'shared_browser_state') {
     var old = store.get('sharedBrowser');
     var tabs = msg.browsers || (msg.browser ? [msg.browser] : []);
@@ -209,6 +230,7 @@ export function handleSharedBrowserMessage(msg) {
         var canvas = panel().querySelector('canvas'); canvas.width = image.naturalWidth; canvas.height = image.naturalHeight;
         canvas.getContext('2d').drawImage(image, 0, 0);
         ui({ decoding: false, hasFrame: true }); render();
+        registerStudioPaint(msg, canvas, null, canvas);
       }
     };
     image.onerror = function () { if (store.get('activeSessionId') === sessionId) ui({ decoding: false }); };
@@ -217,6 +239,7 @@ export function handleSharedBrowserMessage(msg) {
   return true;
 }
 export function initSharedBrowser() {
+  initBrowserLinks();
   var button = document.getElementById('shared-browser-btn');
   if (button) button.onclick = openSharedBrowser;
   var toggle = document.getElementById('shared-browser-toggle-btn');
@@ -233,7 +256,7 @@ registerRightWorkbench('browser', hideSharedBrowser);
 store.subscribe(function (state, previous) {
   if (state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.myUserId !== previous.myUserId) {
     clearBrowserInput(); releaseRightWorkbench('browser');
-    store.set({ sharedBrowser: null, sharedBrowsers: [], sharedBrowserOpen: false, sharedBrowserUi: {} });
+    store.set({ sharedBrowser: null, sharedBrowsers: [], sharedBrowserOpen: false, sharedBrowserUi: {}, sharedBrowserSettings: {} });
     if (state.connected) send('state_request');
     render();
   } else if (state.connected !== previous.connected) {

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

@@ -1,4 +1,5 @@
-import { openMateWorkspace, isMateWorkspace } from './project-mate-navigation.js';
+import { contextualMate } from './contextual-mate-identity.js';
+import { activateContextualMate, isMateWorkspace } from './project-mate-navigation.js';
 import { appendGithubWork } from './session-github.js';
 // sidebar-mobile.js - Mobile sheet overlays, tab bar, and mobile-specific rendering
 // Extracted from sidebar.js (PR-38)
@@ -258,7 +259,7 @@ function renderSheetSessions(listEl) {
   }
 
   var visibleChipMates = getCachedMates().filter(function (m) {
-    return m && !m.archived;
+    return m && !m.archived && contextualMate(m.id);
   });
   var sortedChipMates = visibleChipMates.sort(function (a, b) {
     var aBuiltin = a.builtinKey ? 1 : 0;
@@ -327,7 +328,7 @@ function renderSheetSessions(listEl) {
       renderMobileSessionsInto(sessionListEl);
     } else if (type === "mate") {
       closeMobileSheet();
-      openMateWorkspace(mateId);
+      activateContextualMate(mateId);
     }
 
     refreshIcons();

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

@@ -822,6 +822,7 @@ function createIconItem(p, currentSlug) {
   var el = document.createElement("a");
   var isActive = p.slug === currentSlug && !currentDmUserId;
   el.className = "icon-strip-item" + (isActive ? " active" : "");
+  el.dataset.controlRuntime = p.controlRuntimeId || "";
   el.href = "/p/" + p.slug + "/";
   el.dataset.slug = p.slug;
 

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

@@ -353,7 +353,7 @@ function renderSection(section, ctx, kind) {
     body.appendChild(empty);
   }
   var view = currentFolderState().view;
-  var dateGroups = isFavorites ? null : groupUnitsByDate(section.units, view.sort, view.direction);
+  var dateGroups = isFavorites || view.showDateHeadings === false ? null : groupUnitsByDate(section.units, view.sort, view.direction);
   if (dateGroups) {
     for (var g = 0; g < dateGroups.length; g++) {
       var ids = groupRootSessionIds(dateGroups[g].units);

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

@@ -826,6 +826,7 @@ function renderSessionItem(s, options) {
   el.className = "session-item" + (displaySession.active ? " active" : "") + (isMatch ? " search-match" : "");
   if (itemOptions.worker) el.classList.add("session-worker-item");
   el.dataset.sessionId = s.id;
+  el.dataset.controlSessionOrigin = s.sessionOriginId || '';
 
   var textSpan = document.createElement("span");
   textSpan.className = "session-item-text";

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

@@ -0,0 +1,68 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { isCurrentProjectSessionReady } from './split-session-boundary.js';
+import { splitPanesMatchProject, reconcileRestoredSplit } from './project-activation.js';
+import { splitGroupMemberIds } from './split-group-helpers.js';
+import { splitPaneForSession } from './split-pane-reconciler.js';
+import { clearProjectSplitState } from './split-session-boundary.js';
+
+export function reconcileSplitIdentity(state, previous, host) {
+  var ownerChanged = (previous.authIdentityLoaded === true || state.splitIdentityHydrated) && state.myUserId !== previous.myUserId;
+  if (state.authIdentityLoaded && !state.splitIdentityHydrated) store.set({ splitIdentityHydrated: true });
+  if (state.currentSlug === previous.currentSlug && state.myUserId === previous.myUserId) return false;
+  Array.from(host.querySelectorAll('.split-pane-frame')).forEach(function (frame) {
+    if (frame.clayPane) frame.clayPane.suspend();
+  });
+  host.innerHTML = '';
+  if (ownerChanged) {
+    // This socket was authenticated as the previous owner. Fresh metadata on
+    // that connection cannot establish the replacement owner's pane boundary.
+    store.set({ splitIdentityBlockedSocket: getWs(), paneBindingSessions: [] });
+    clearProjectSplitState();
+  } else if (state.splitPanes) store.set({ splitPanes: null });
+  return true;
+}
+
+// The initial owner response can arrive after history and split metadata.
+// Wait for it so identity cleanup cannot discard panes we just restored.
+export function restoreSplitGroup(openGroup) {
+  var state = store.snap();
+  if (state.authIdentityLoaded === false || state.isMultiUserMode && !state.myUserId) return;
+  if (!isCurrentProjectSessionReady(state, getWs())) return;
+  var split = state.splitPanes;
+  if (split && !splitPanesMatchProject(split, state.currentSlug)) {
+    store.set({ splitPanes: null });
+    return;
+  }
+  if (state.paneMode) return;
+  if (split) {
+    var reconciliation = reconcileRestoredSplit(split, state.splitGroups);
+    if (reconciliation.action === "clear") {
+      store.set({ splitPanes: null });
+      return;
+    }
+    if (reconciliation.action === "rebuild") {
+      var rebuilt = reconciliation.group;
+      if (rebuilt.members.some(function (id) { return !getCachedSessions().some(function (session) { return session.id === id; }); })) {
+        store.set({ splitPanes: null });
+        return;
+      }
+      store.set({ splitPanes: {
+        groupId: rebuilt.id,
+        panes: splitGroupMemberIds(rebuilt).map(function (id) { return splitPaneForSession(id, state.currentSlug, getCachedSessions()); }),
+      } });
+    }
+    return;
+  }
+  var activeId = store.get('activeSessionId');
+  if (!activeId) return;
+  var groups = store.get('splitGroups') || [];
+  for (var i = 0; i < groups.length; i++) {
+    var members = groups[i].members || [];
+    if (members.indexOf(activeId) !== -1) {
+      openGroup(groups[i]);
+      return;
+    }
+  }
+}

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

@@ -236,6 +236,7 @@ function sendSetPair(groupId, driverId) {
 
 export function syncPairChrome(host, split) {
   if (!host || !split || !split.groupId) return;
+  if (Array.from(host.querySelectorAll('.split-pane-frame')).some(function (frame) { return !!frame.dataset.requestedSessionId; })) return;
   var groups = store.get('splitGroups') || [];
   var group = null;
   for (var i = 0; i < groups.length; i++) {

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

@@ -2,6 +2,11 @@
 // (and their iframe browsing contexts) are reused by stable project/session
 // identity while metadata and visual order are refreshed.
 
+export function splitPaneForSession(id, slug, sessions) {
+  var session = (sessions || []).find(function (item) { return item.id === id; });
+  return { slug: slug, sessionId: id, title: session && session.title || ('Session ' + id) };
+}
+
 export function splitPaneIdentity(pane) {
   return String(pane && pane.slug || "") + "#" + String(pane && pane.sessionId || "");
 }
@@ -16,9 +21,19 @@ export function reconcileSplitPanes(host, panes, createPane, updatePane) {
     var pane = desired[pi];
     var key = splitPaneIdentity(pane);
     var paneEl = byKey.get(key);
+    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 &&
+          !desired.some(function (item) { return splitPaneIdentity(item) === candidate.dataset.splitPaneKey; })) {
+          paneEl = candidate; break;
+        }
+      }
+    }
     if (!paneEl) paneEl = createPane(pane, pi);
     paneEl.dataset.splitPaneKey = key;
     updatePane(paneEl, pane, pi);
+    if (paneEl.style) paneEl.style.order = String(pi);
     used.add(paneEl);
     if (!paneEl.parentNode) host.appendChild(paneEl);
   }

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

@@ -6,6 +6,8 @@ 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';
 
 function sessionById(sessionId) {
   var sessions = getCachedSessions() || [];
@@ -17,17 +19,31 @@ function paneUrl(pane) {
   return "/p/" + encodeURIComponent(pane.slug) + "/?pane=1&session=" + encodeURIComponent(pane.sessionId);
 }
 
+function headerBindingStamp(frame) {
+  var live = frame.clayPane && frame.clayPane.identity();
+  return JSON.stringify([frame.dataset.sessionId, frame.dataset.sessionOriginId,
+    live && live.binding && live.binding.requestId, live && live.binding && live.binding.generation]);
+}
+
 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;
+  var section = header.parentNode, frame = section.querySelector('.split-pane-frame');
+  var origin = frame.dataset.sessionOriginId, binding = frame.clayPane && frame.clayPane.identity().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);
+  }
   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;
+    if (!commit || !current() || !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 }));
@@ -37,6 +53,7 @@ function startPaneRename(header, titleEl, pane) {
     if (event.key === "Escape") { event.preventDefault(); finish(false); }
   });
   input.addEventListener("blur", function () { finish(true); });
+  header.addEventListener('clay-pane-retarget', function cancel() { finish(false); header.removeEventListener('clay-pane-retarget', cancel); });
   input.addEventListener("click", function (event) { event.stopPropagation(); });
 }
 
@@ -73,33 +90,97 @@ export function createSplitPane(pane, closePane) {
   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);
+  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);
   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 || '';
+  header.addEventListener('pointerdown', function () { header.dataset.pointerSessionId = frame.dataset.sessionId; header.dataset.pointerBinding = headerBindingStamp(frame); });
+  header.addEventListener('click', function (event) {
+    if (frame.clayPane && (!livePaneBinding(frame) || event.detail && header.dataset.pointerBinding !== headerBindingStamp(frame))) {
+      event.preventDefault(); event.stopImmediatePropagation();
+    }
+  }, true);
+  ['keydown', 'keyup'].forEach(function (name) {
+    header.addEventListener(name, function (event) {
+      var stamp = headerBindingStamp(frame);
+      if (name === 'keydown' && !event.repeat) header.dataset.keyBinding = stamp;
+      if (header.inert || header.dataset.keyBinding !== stamp) { event.preventDefault(); event.stopImmediatePropagation(); }
+    }, true);
+  });
   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);
+  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);
   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);
+  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);
+  frame.addEventListener('clay-pane-ready', function () {
+    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;
+    frame.dataset.sessionId = String(id); delete frame.dataset.requestedSessionId;
+    frame.dataset.sessionOriginId = live.binding.sessionOriginId;
+    updateSplitPaneMetadata(paneEl, { slug: frame.dataset.projectSlug, sessionId: id, title: current.title });
+    syncPairChrome(paneEl.parentNode, store.get('splitPanes'));
+  });
+  frame.addEventListener('clay-pane-activation-failed', function () {
+    var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId);
+    var fallbackTarget = paneTarget(store.snap(), getCachedSessions(), id);
+    if (!fallbackTarget) { header.inert = true; return; }
+    frame.dataset.sessionOriginId = fallbackTarget.sessionOriginId;
+    frame.src = paneUrl({ slug: frame.dataset.projectSlug, sessionId: id });
+    frame.dataset.sessionId = String(id); delete frame.dataset.requestedSessionId;
+  });
   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");
+  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 && header) {
+    header.dispatchEvent(new Event('clay-pane-retarget'));
+    header.inert = true;
+    header.title = 'Loading conversation';
+    if (title) { title.style.display = ''; title.textContent = 'Loading conversation'; }
+    if (vendor) vendor.hidden = true;
+    var permission = paneEl.querySelector('.split-pane-full-access');
+    if (permission) permission.classList.add('hidden');
+    resetPaneContextChip(paneEl);
+  }
+  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;
+    }
+    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;
   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; }
+  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; }
+  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);
   }
 }
 
+function resetPaneContextChip(paneEl) {
+  var chip = paneEl.querySelector('.split-pane-context'); if (!chip) return;
+  chip.classList.remove('has-data'); chip.title = 'Context usage';
+  var fill = chip.querySelector('.split-pane-context-fill'), label = chip.querySelector('.split-pane-context-label');
+  if (fill) { fill.style.width = '0%'; fill.className = 'split-pane-context-fill'; }
+  if (label) label.textContent = '';
+}
+
 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;
+  if (!paneEl) return; var chip = paneEl.querySelector(".split-pane-context"); if (!chip) return; var pct = msg.pct || 0; if (pct <= 0) { resetPaneContextChip(paneEl); 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)";

package/lib/public/modules/split-session-boundary.js

@@ -2,7 +2,7 @@ import { store } from './store.js';
 import { isProjectSessionReady } from './project-activation.js';
 
 export function isCurrentProjectSessionReady(state, socket) {
-  return isProjectSessionReady(state, socket);
+  return socket !== state.splitIdentityBlockedSocket && isProjectSessionReady(state, socket);
 }
 
 export function clearProjectSplitState() {