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

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

@@ -0,0 +1,112 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml as escapeText } from './utils.js';
+
+function escapeHtml(value) { return escapeText(String(value)).replace(/"/g, '"').replace(/'/g, '''); }
+function state() { return store.get('sharedBrowserSettings') || {}; }
+function set(patch) { store.set({ sharedBrowserSettings: Object.assign({}, state(), patch) }); }
+function root() { return document.getElementById('shared-browser-settings'); }
+function button(label, action, target, description) {
+  return '<button type="button" data-settings-action="' + action + '" data-target="' + escapeHtml(target || '') + '" data-label="' + escapeHtml(description || target || '') + '">' + escapeHtml(label) + '</button>';
+}
+function request(operation, target) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) { set({ error: 'Reconnect to manage browser data.', pending: false }); renderBrowserSettings(); return; }
+  var id = crypto.randomUUID();
+  set({ pending: true, requestId: id, error: '', notice: '' });
+  ws.send(JSON.stringify({ type: 'shared_browser_settings', sessionId: store.get('activeSessionId'), requestId: id, operation: operation, target: target }));
+  renderBrowserSettings();
+  setTimeout(function () {
+    if (state().requestId === id && state().pending) { set({ pending: false, error: 'The request timed out. Refresh to check the saved state.' }); renderBrowserSettings(); }
+  }, 15000);
+}
+export function closeBrowserSettings(restoreFocus) {
+  var wasOpen = !!state().open;
+  set({ open: false, review: null }); renderBrowserSettings();
+  var trigger = document.querySelector('[data-action="settings"]'); if (trigger && wasOpen && restoreFocus !== false) trigger.focus();
+}
+export function browserSettingsHtml() {
+  return '<section id="shared-browser-settings" class="shared-browser-settings" aria-label="Browser settings" hidden></section>';
+}
+export function bindBrowserSettings(panel) {
+  panel.querySelector('[data-action="settings"]').onclick = function () {
+    set({ open: true, page: 'sites', data: null, review: null, filter: '' });
+    request('list');
+    root().querySelector('[data-settings-action="back"]').focus();
+  };
+  root().addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeBrowserSettings(); }
+  });
+  root().addEventListener('input', function (event) {
+    if (event.target.matches('[data-settings-filter]')) { set({ filter: event.target.value }); renderRows(); root().dataset.key = JSON.stringify([state(), store.get('connected')]); }
+  });
+  root().addEventListener('click', function (event) {
+    var control = event.target.closest('[data-settings-action]');
+    if (!control || control.disabled) return;
+    var action = control.dataset.settingsAction;
+    if (action === 'back') { closeBrowserSettings(); return; }
+    if (action === 'sites' || action === 'history') { set({ page: action, filter: '', review: null, notice: '', error: '' }); renderBrowserSettings(); return; }
+    if (action === 'refresh') { request('list'); return; }
+    if (action === 'cancel') { set({ review: null }); renderBrowserSettings(); root().querySelector('[data-settings-action="refresh"]').focus(); return; }
+    if (action === 'confirm') { var review = state().review; if (review) request(review.action, review.target); return; }
+    set({ notice: '', error: '', review: { action: action, target: control.dataset.target, label: control.dataset.label || control.dataset.target } });
+    renderBrowserSettings(); root().querySelector('[data-settings-action="cancel"]').focus();
+  });
+}
+function renderRows() {
+  var el = root(), s = state(); if (!el || !s.open) return;
+  var rows = el.querySelector('.browser-settings-rows'); if (!rows) return;
+  var filter = (s.filter || '').toLowerCase();
+  var data = s.data || { sites: [], history: [] };
+  if (s.page === 'history') {
+    rows.innerHTML = data.history.filter(function (entry) { return entry.url.toLowerCase().includes(filter); }).map(function (entry) {
+      return '<div class="browser-settings-row"><div><span class="browser-settings-url">' + escapeHtml(entry.url) + '</span><small>' + escapeHtml(new Date(entry.at).toLocaleString()) + '</small></div>' + button('Remove', 'delete_history', entry.id, entry.url) + '</div>';
+    }).join('');
+  } else {
+    rows.innerHTML = data.sites.filter(function (site) { return site.host.toLowerCase().includes(filter); }).map(function (site) {
+      return '<details><summary>' + escapeHtml(site.host) + '<small>' + site.cookies.length + (site.cookies.length === 1 ? ' cookie · ' : ' cookies · ') + site.origins.length + (site.origins.length === 1 ? ' storage origin' : ' storage origins') + '</small></summary><div class="browser-settings-row"><span>Cookies and site storage</span>' + button('Remove site data', 'delete_site', site.host) + '</div>' +
+        site.origins.map(function (origin) { return '<p class="browser-settings-origin">' + escapeHtml(origin.origin) + '<small>' + origin.localStorage + ' localStorage entries · ' + origin.databases + ' IndexedDB databases</small></p>'; }).join('') +
+        site.cookies.map(function (cookie) {
+          var info = cookie.domain + cookie.path + ' · ' + (cookie.expires === -1 ? 'Session cookie' : 'Expires ' + new Date(cookie.expires * 1000).toLocaleDateString()) + (cookie.httpOnly ? ' · HttpOnly' : '') + (cookie.secure ? ' · Secure' : '') + (cookie.partitioned ? ' · Partitioned' : '');
+          return '<div class="browser-settings-row"><div><span>' + escapeHtml(cookie.name) + '</span><small>' + escapeHtml(info) + '</small></div>' + button('Remove cookie', 'delete_cookie', cookie.id, cookie.name + ' · ' + cookie.domain + cookie.path) + '</div>';
+        }).join('') + '</details>';
+    }).join('');
+  }
+  if (!rows.innerHTML) rows.innerHTML = '<p class="browser-settings-muted">' + (s.pending && !s.data ? 'Loading saved data…' : filter ? 'No matching entries.' : s.page === 'history' ? 'No saved browsing history.' : 'No saved cookies or site data.') + '</p>';
+  rows.querySelectorAll('button').forEach(function (control) { control.disabled = !!s.pending || !store.get('connected'); });
+}
+export function renderBrowserSettings() {
+  var el = root(); if (!el) return;
+  var s = state(), panel = el.closest('.shared-browser-panel');
+  var browser = store.get('sharedBrowser');
+  var trigger = panel.querySelector('[data-action="settings"]');
+  trigger.hidden = !(browser && browser.personalCookiesAvailable);
+  trigger.disabled = !store.get('connected');
+  trigger.setAttribute('aria-expanded', String(!!s.open));
+  el.hidden = !s.open;
+  panel.classList.toggle('browser-settings-open', !!s.open);
+  if (!s.open) return;
+  var key = JSON.stringify([s, store.get('connected')]); if (el.dataset.key === key) return; el.dataset.key = key;
+  var page = s.page || 'sites';
+  el.innerHTML = '<div class="browser-settings-heading">' + button('Back to browser', 'back') + '<h3>Browser settings</h3></div><p class="browser-settings-muted">Personal · Shared across your Mates. Incognito tabs do not save data here.</p>' +
+    '<nav aria-label="Browser settings sections">' + button('Cookies & site data', 'sites') + button('History', 'history') + '</nav>' +
+    '<p class="browser-settings-muted">' + (page === 'sites' ? 'Cookies, localStorage and IndexedDB are saved for your account. New personal tabs restore saved site storage. Removing data may sign you out. Removals also apply to open personal tabs. Sites may create new data afterwards.' : 'Your latest 500 page visits. Clearing this list leaves open tabs, their Back/Forward navigation and conversation activity unchanged.') + '</p>' +
+    '<div class="browser-settings-tools"><input data-settings-filter aria-label="Filter saved browser data" placeholder="' + (page === 'sites' ? 'Find a site' : 'Find a page') + '" value="' + escapeHtml(s.filter || '') + '">' + button('Refresh', 'refresh') + button(page === 'sites' ? 'Clear all site data' : 'Clear history', page === 'sites' ? 'clear_data' : 'clear_history') + '</div>' +
+    '<p class="browser-settings-feedback" role="status">' + escapeHtml(s.error || (!store.get('connected') ? 'Disconnected. Reconnect and refresh to see current saved data.' : s.pending ? 'Updating…' : s.notice || '')) + '</p>' +
+    (s.review ? '<div class="browser-settings-review" role="group" aria-label="Confirm removal"><strong>' + (s.review.action.includes('history') ? 'Remove browsing history?' : 'Remove saved site data?') + '</strong><p>' + (s.review.action.includes('history') ? 'This removes ' + (s.review.action === 'clear_history' ? 'all saved visits' : 'this saved visit') + ' from your personal history.' : s.review.action === 'delete_cookie' ? 'This removes ' + escapeHtml(s.review.label) + ' across your personal Mate browsers and may sign you out.' : 'This removes ' + (s.review.action === 'clear_data' ? 'all cookies and site storage' : 'cookies and storage for ' + escapeHtml(s.review.target)) + ' across your personal Mate browsers and may sign you out.') + '</p>' + button('Cancel', 'cancel') + button('Remove', 'confirm') + '</div>' : '') +
+    '<div class="browser-settings-rows"></div>';
+  el.querySelector('[data-settings-action="' + page + '"]').setAttribute('aria-current', 'page');
+  el.querySelectorAll('button').forEach(function (control) { control.disabled = control.dataset.settingsAction !== 'back' && (!!s.pending || !store.get('connected')); });
+  renderRows();
+}
+export function handleBrowserSettingsMessage(msg) {
+  if (!msg.requestId || msg.requestId !== state().requestId) return false;
+  if (msg.type === 'shared_browser_settings') {
+    var removed = !!state().review;
+    set({ data: msg.settings, pending: false, review: null, error: '', notice: removed ? 'Removed from your saved browser data.' : '' });
+  } else if (msg.type === 'shared_browser_error') set({ pending: false, error: msg.error });
+  else return false;
+  renderBrowserSettings();
+  if (state().open && removed) root().querySelector('[data-settings-action="refresh"]').focus();
+  return true;
+}

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

@@ -1,10 +1,11 @@
+import { iconHtml, refreshIcons } from './icons.js';
 import { store } from './store.js';
 
 export function renderBrowserTabs(el, select, send) {
   var bar = el.querySelector('.shared-browser-tabs');
   var tabs = store.get('sharedBrowsers') || [];
   var selected = store.get('sharedBrowser');
-  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase]; }), selected && selected.id, store.get('connected')]);
+  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase, tab.incognito, tab.personalCookiesAvailable]; }), selected && selected.id, store.get('connected')]);
   if (bar.dataset.key === key) return;
   bar.dataset.key = key;
   bar.replaceChildren();
@@ -14,9 +15,9 @@ export function renderBrowserTabs(el, select, send) {
     button.setAttribute('aria-selected', String(!!selected && selected.id === tab.id));
     var title = 'Tab ' + (index + 1);
     try { if (tab.url) title = new URL(tab.url).hostname; } catch (e) {}
-    var label = document.createElement('span'); label.textContent = title;
+    var label = document.createElement('span'); label.textContent = title + (tab.personalCookiesAvailable && tab.incognito ? ' · Incognito' : '');
     var owner = document.createElement('small'); owner.textContent = tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'Shared' : 'You only';
-    button.append(label, owner); button.title = title + ' · ' + (tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.');
+    button.append(label, owner); button.title = title + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + (tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.');
     button.onclick = function () { select(tab.id); };
     button.onkeydown = function (event) {
       var next = event.key === 'ArrowRight' ? (index + 1) % tabs.length : event.key === 'ArrowLeft' ? (index + tabs.length - 1) % tabs.length : event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : -1;
@@ -28,6 +29,15 @@ export function renderBrowserTabs(el, select, send) {
     item.append(button, close); bar.appendChild(item);
   });
   var add = document.createElement('button'); add.type = 'button'; add.textContent = '+'; add.setAttribute('aria-label', 'New browser tab'); add.disabled = !store.get('connected');
+  add.title = selected && selected.personalCookiesAvailable ? 'New tab · Personal browser' : 'New incognito tab';
   add.onclick = function () { send('open', { newTab: true }); };
   bar.appendChild(add);
+  if (selected && selected.personalCookiesAvailable) {
+    var incognito = document.createElement('button'); incognito.type = 'button';
+    incognito.innerHTML = iconHtml('glasses');
+    incognito.setAttribute('aria-label', 'New incognito tab'); incognito.title = 'New incognito tab · Site data is not saved';
+    incognito.disabled = !store.get('connected');
+    incognito.onclick = function () { send('open', { newTab: true, incognito: true }); };
+    bar.appendChild(incognito); refreshIcons();
+  }
 }

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() {