clay-server 5.3.0-beta.6 → 5.3.0

package/lib/public/modules/split-view-create-menu.js

@@ -1,83 +1,92 @@
-// Pane-header picker for explicitly choosing real Driver sessions for a Split view.
+// Direction menu, then a centered session picker inside the reserved empty pane.
 import { store } from './store.js';
-import { getCachedSessions } from './sidebar-sessions.js';
-import { viewForOrigin } from './split-view-presentation-lookup.js';
-import { iconHtml } from './icons.js';
+import { retryOptions } from './session-create.js';
+import { pickerReceipt, pickerCurrent, insertPickerSession, createPickerSession } from './split-view-picker-actions.js';
+import { renderPicker, renderPickerResults } from './split-view-picker-render.js';
+import { showToast } from './utils.js';
 
 function menuElement() { return document.getElementById('split-view-create-menu'); }
 function close(returnFocus) {
   var menu = menuElement(); if (!menu) return;
-  menu.hidden = true; store.set({ projectSplitViewCreateSelection: [] });
-  if (returnFocus && menu.clayCreateAnchor && menu.clayCreateAnchor.isConnected) menu.clayCreateAnchor.focus();
-  menu.clayCreateAnchor = null;
+  var state = store.get('splitSessionPicker');
+  var update = { splitSessionPicker: null, projectSplitViewCreateSelection: [] };
+  if (returnFocus && state && pickerCurrent(state.receipt) && !store.get('projectSplitViewPending')) update.projectSplitViewFocusedOrigin = state.priorFocus || null;
+  var anchor = menu.clayCreateAnchor; menu.clayCreateAnchor = null;
+  menu.hidden = true; store.set(update);
+  if (menu.contains(document.activeElement)) document.activeElement.blur();
+  if (menu.parentNode !== document.body) document.body.appendChild(menu);
+  if (anchor) anchor.setAttribute('aria-expanded', 'false');
+  document.dispatchEvent(new CustomEvent('clay-split-picker-layout'));
+  if (returnFocus && anchor && anchor.isConnected) anchor.focus();
 }
-function refreshCreateButton(menu) {
-  var selected = store.get('projectSplitViewCreateSelection') || [], action = menu.querySelector('[data-create-split-view]');
-  action.disabled = selected.length < 2 || selected.length > 8;
-  action.textContent = 'Create Split view (' + selected.length + ')';
+function position() {
+  var menu = menuElement(), anchor = menu && menu.clayCreateAnchor;
+  if (!menu || menu.hidden) return;
+  if (!anchor || !anchor.isConnected) { close(false); return; }
+  var state = store.get('splitSessionPicker');
+  if (state && state.side) { menu.style.left = ''; menu.style.top = ''; return; }
+  var rect = anchor.getBoundingClientRect(), width = menu.offsetWidth;
+  menu.style.left = Math.max(8, Math.min(rect.right - width, innerWidth - width - 8)) + 'px';
+  menu.style.top = Math.max(8, Math.min(rect.bottom + 5, innerHeight - menu.offsetHeight - 8)) + 'px';
 }
 function open(anchor) {
+  var receipt = pickerReceipt(anchor);
+  if (!receipt || !pickerCurrent(receipt)) { showToast('Wait for this View to finish loading, then try again.', 'warn'); return; }
   var menu = menuElement();
+  if (menu && !menu.hidden && menu.clayCreateAnchor === anchor) { close(true); return; }
+  if (menu && !menu.hidden) close(false);
   if (!menu) {
-    menu = document.createElement('section'); menu.id = 'split-view-create-menu'; menu.className = 'split-view-arrange';
-    menu.hidden = true; menu.setAttribute('role', 'dialog'); menu.setAttribute('aria-label', 'Arrange sessions');
-    var header = document.createElement('div'); header.className = 'split-view-arrange-header';
-    var title = document.createElement('strong'); title.textContent = 'Arrange sessions'; header.appendChild(title);
-    var closeButton = document.createElement('button'); closeButton.type = 'button'; closeButton.setAttribute('aria-label', 'Close arrangement picker'); closeButton.innerHTML = iconHtml('x'); header.appendChild(closeButton); menu.appendChild(header);
-    var list = document.createElement('div'); list.className = 'split-view-arrange-grid'; list.setAttribute('role', 'group'); list.setAttribute('aria-label', 'Choose sessions');
-    list.style.cssText = 'display:flex;flex-direction:column;max-height:230px;overflow:auto'; menu.appendChild(list);
-    var create = document.createElement('button'); create.type = 'button'; create.dataset.createSplitView = 'true'; menu.appendChild(create);
-    document.body.appendChild(menu);
+    menu = document.createElement('section'); menu.id = 'split-view-create-menu'; menu.className = 'split-view-arrange split-session-picker'; menu.hidden = true;
+    menu.setAttribute('role', 'dialog'); menu.setAttribute('aria-label', 'Add a session split'); document.body.appendChild(menu);
   }
-  menu.clayCreateAnchor = anchor;
-  var list = menu.querySelector('[aria-label="Choose sessions"]'); list.textContent = '';
-  var activeView = (store.get('projectSplitViews') || []).find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
-  var currentId = Number(store.get('activeSessionId'));
-  var current = (getCachedSessions() || []).find(function (session) { return session.id === currentId; });
-  var selected = activeView ? activeView.sessions.map(function (item) { return item.sessionOriginId; }) :
-    current && current.sessionRole !== 'worker' && !current.isMate && !current.isTui ? [current.sessionOriginId] : [];
-  var candidates = (getCachedSessions() || []).filter(function (session) {
-    if (!session.sessionOriginId || session.sessionRole === 'worker' || session.isMate || session.isTui) return false;
-    var owner = viewForOrigin(session.sessionOriginId); return !owner || activeView && owner.id === activeView.id;
-  });
-  candidates.forEach(function (session) {
-    var choice = document.createElement('button'); choice.type = 'button'; choice.dataset.createSessionOrigin = session.sessionOriginId;
-    choice.setAttribute('aria-pressed', selected.indexOf(session.sessionOriginId) >= 0 ? 'true' : 'false');
-    choice.textContent = session.title || 'Session'; list.appendChild(choice);
-  });
-  store.set({ projectSplitViewCreateSelection: selected }); refreshCreateButton(menu); menu.hidden = false;
-  var rect = anchor.getBoundingClientRect(), width = Math.min(280, window.innerWidth - 16);
-  menu.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8)) + 'px';
-  menu.style.top = Math.max(8, Math.min(rect.bottom + 4, window.innerHeight - menu.offsetHeight - 8)) + 'px';
-  var first = menu.querySelector('[data-create-session-origin]'); if (first) first.focus();
+  receipt.reservationId = 'split-picker-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2);
+  menu.clayCreateAnchor = anchor; anchor.setAttribute('aria-expanded', 'true');
+  store.set({ splitSessionPicker: { receipt: receipt, side: null, query: '', error: '', priorFocus: store.get('projectSplitViewFocusedOrigin') } });
+  renderPicker(menu); menu.hidden = false; position(); menu.querySelector('[data-split-side]').focus();
 }
 function onClick(event) {
-  var target = event.target;
-  var menu = menuElement(); if (!menu || menu.hidden) return;
-  if (menu.contains(target)) {
-    var closeButton = target.closest('[aria-label="Close arrangement picker"]');
-    if (closeButton) { event.preventDefault(); close(true); return; }
-    var choice = target.closest('[data-create-session-origin]');
-    if (choice) {
-      event.preventDefault(); var selected = (store.get('projectSplitViewCreateSelection') || []).slice(), origin = choice.dataset.createSessionOrigin, index = selected.indexOf(origin);
-      if (index === -1 && selected.length >= 8) return;
-      if (index === -1) selected.push(origin); else selected.splice(index, 1);
-      store.set({ projectSplitViewCreateSelection: selected }); choice.setAttribute('aria-pressed', selected.indexOf(origin) >= 0 ? 'true' : 'false'); refreshCreateButton(menu); return;
-    }
-    if (target.closest('[data-create-split-view]') && !target.closest('[data-create-split-view]').disabled) {
-      event.preventDefault(); document.dispatchEvent(new CustomEvent('clay-split-view-create', { detail: { origins: (store.get('projectSplitViewCreateSelection') || []).slice() } })); close(true);
-    }
-    return;
+  var menu = menuElement(), state = store.get('splitSessionPicker'); if (!menu || menu.hidden || !state) return;
+  var button = event.target.closest && event.target.closest('button');
+  if (!menu.contains(event.target)) { if (!state.side && (!event.target.closest || !event.target.closest('.split-view-arrange-trigger'))) close(false); return; }
+  if (!button || button.disabled) return;
+  event.preventDefault();
+  if (button.dataset.splitClose) { close(true); return; }
+  if (!pickerCurrent(state.receipt)) { close(true); return; }
+  if (button.dataset.splitSide) {
+    store.set({ splitSessionPicker: Object.assign({}, state, { side: button.dataset.splitSide, query: '' }), projectSplitViewFocusedOrigin: null }); renderPicker(menu); document.dispatchEvent(new CustomEvent('clay-split-picker-layout')); position(); menu.querySelector('input').focus(); retryOptions(); return;
   }
-  if (target.closest && target.closest('.split-view-arrange-trigger')) return;
-  close(false);
+  if (button.dataset.splitRetry) { retryOptions(); return; }
+  var accepted = button.dataset.splitSession ? insertPickerSession(state.receipt, state.side, Number(button.dataset.splitSession)) : button.dataset.splitVendor ? createPickerSession(state.receipt, state.side, button.dataset.splitVendor) : false;
+  if (accepted) renderPickerResults(menu);
+  else { store.set({ splitSessionPicker: Object.assign({}, state, { error: 'The split could not be added. Check the View and try again.' }) }); renderPickerResults(menu); }
+}
+function onKey(event) {
+  var menu = menuElement(), state = store.get('splitSessionPicker'); if (!menu || menu.hidden || !state) return;
+  if (event.key === 'Escape') { event.preventDefault(); event.stopImmediatePropagation(); close(true); return; }
+  if (!menu.contains(event.target)) return;
+  var keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+  if (keys.indexOf(event.key) < 0 && !(event.key === 'Enter' && event.target.tagName === 'INPUT')) return;
+  var items = Array.from(menu.querySelectorAll('[data-split-side], [data-split-session], [data-split-vendor]')).filter(function (button) { return !button.disabled; });
+  if (!items.length) return;
+  if (event.target.tagName === 'INPUT' && (event.key === 'Home' || event.key === 'End')) return;
+  event.preventDefault();
+  var index = items.indexOf(document.activeElement);
+  if (event.key === 'Enter') { items[0].click(); return; }
+  var next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : index < 0 ? event.key === 'ArrowUp' ? items.length - 1 : 0 : (index + (event.key === 'ArrowUp' ? -1 : 1) + items.length) % items.length;
+  items[next].focus();
 }
 export function initSplitViewCreateMenu() {
   document.addEventListener('clay-split-view-open-create', function (event) { if (event.detail && event.detail.anchor) open(event.detail.anchor); });
-  document.addEventListener('click', onClick, true);
-  document.addEventListener('keydown', function (event) {
-    if (event.key !== 'Escape' || !menuElement() || menuElement().hidden) return;
-    event.preventDefault(); event.stopImmediatePropagation(); close(true);
-  }, true);
-  window.addEventListener('resize', function () { if (menuElement() && !menuElement().hidden) close(false); });
+  document.addEventListener('click', onClick, true); document.addEventListener('keydown', onKey, true);
+  document.addEventListener('input', function (event) {
+    var state = store.get('splitSessionPicker'); if (!state || !event.target.matches('#split-view-create-menu input')) return;
+    store.set({ splitSessionPicker: Object.assign({}, state, { query: event.target.value }) });
+    var label = menuElement().querySelector('.split-session-section'); label.textContent = event.target.value ? 'Search results' : 'Recent sessions'; renderPickerResults(menuElement()); position();
+  });
+  window.addEventListener('resize', position);
+  store.subscribe(function (state, previous) {
+    if (!state.splitSessionPicker) return;
+    if (!pickerCurrent(state.splitSessionPicker.receipt)) { close(false); return; }
+    if (state.sessionCreateOptions !== previous.sessionCreateOptions || state.projectSplitViewPending !== previous.projectSplitViewPending || state.paneBindingSessions !== previous.paneBindingSessions || state.splitSessionCreation !== previous.splitSessionCreation) { renderPickerResults(menuElement()); position(); }
+  });
 }

package/lib/public/modules/split-view-layout-scope.js

@@ -36,3 +36,7 @@ export function presentationTree(view) {
     JSON.stringify(receipt) === JSON.stringify(layoutScope(view)) ?
     store.get('projectSplitViewPreviewTree') : view && view.tree;
 }
+export function bindingMatches(left, right) {
+  return !!left && !!right && left.sessionId === right.sessionId && left.sessionOriginId === right.sessionOriginId &&
+    left.generation === right.generation && left.requestId === right.requestId;
+}

package/lib/public/modules/split-view-picker-actions.js

@@ -0,0 +1,71 @@
+// Exact-context session insertion through the existing View and creation services.
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { activeSavedView } from './view-workspace-state.js';
+import { layoutScope, currentLayoutScope } from './split-view-layout-scope.js';
+import { viewForOrigin } from './split-view-presentation-lookup.js';
+import { applyPresentationDrop } from './split-view-presentation-drop.js';
+import { mutation } from './view-mutations.js';
+import { checkComposerDeparture } from './session-rich-drafts.js';
+import { createOptions } from './session-create.js';
+import { showToast } from './utils.js';
+
+export function pickerReceipt(anchor) {
+  var view = activeSavedView(), pane = anchor && anchor.closest('.split-pane'), frame = pane && pane.querySelector('.split-pane-frame');
+  var origin = pane && pane.dataset.presentationOrigin || frame && frame.dataset.sessionOriginId || store.get('sessionOriginId');
+  return view && view.sessions.some(function (session) { return session.sessionOriginId === origin; }) ? { scope: layoutScope(view), origin: origin } : null;
+}
+export function pickerCurrent(receipt) {
+  var picker = store.get('splitSessionPicker');
+  return receipt && (!receipt.reservationId || picker && picker.receipt.reservationId === receipt.reservationId) && !store.get('paneMode') && currentLayoutScope(receipt.scope) && activeSavedView().sessions.some(function (session) { return session.sessionOriginId === receipt.origin; });
+}
+export function pickerCapacity() {
+  var view = activeSavedView();
+  return !!view && view.sessions.length + (view.workspace.linkedPair ? view.workspace.linkedPair.workerOrigins.length : 0) < 8;
+}
+function checkDrafts() {
+  checkComposerDeparture();
+  document.querySelectorAll('#split-host .split-pane:not(.split-pane-cached) .split-pane-frame').forEach(function (frame) { if (frame.clayPane) frame.clayPane.checkDraft(); });
+}
+export function insertPickerSession(receipt, side, id) {
+  if (['left', 'right', 'top', 'bottom'].indexOf(side) < 0 || !pickerCurrent(receipt) || !pickerCapacity() || store.get('projectSplitViewPending') || store.get('projectSplitViewError')) return false;
+  var view = activeSavedView(), session = (getCachedSessions() || []).find(function (item) { return item.id === id; });
+  if (!session || session.sessionRole === 'worker' || session.isMate || session.isTui || (session.ownerId || null) !== (store.get('myUserId') || null) || view.sessions.some(function (ref) { return ref.sessionOriginId === session.sessionOriginId; })) return false;
+  var source = viewForOrigin(session.sessionOriginId);
+  return applyPresentationDrop({ origin: session.sessionOriginId, sessionId: id, sourceViewId: source && source.id },
+    { origin: receipt.origin, viewId: view.id, side: side }, mutation, checkDrafts) === true;
+}
+export function createPickerSession(receipt, side, vendor) {
+  if (['left', 'right', 'top', 'bottom'].indexOf(side) < 0 || !pickerCurrent(receipt) || !pickerCapacity() || store.get('splitSessionCreation') || store.get('projectSplitViewPending')) return false;
+  if (!createOptions().vendors.some(function (item) { return item.id === vendor && item.installed; })) return false;
+  try { checkDrafts(); } catch (error) { showToast(error.message, 'warn'); return false; }
+  var id = 'split-create-' + (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? crypto.randomUUID() : Date.now().toString(36) + '-' + Math.random().toString(36).slice(2));
+  store.set({ splitSessionCreation: { receipt: receipt, side: side, requestId: id, createdId: null } });
+  try { getWs().send(JSON.stringify({ type: 'new_session', slug: store.get('currentSlug'), requestId: id, vendor: vendor, forceNew: true, activate: false })); }
+  catch (error) { store.set({ splitSessionCreation: null }); return false; }
+  setTimeout(function () {
+    var pending = store.get('splitSessionCreation');
+    if (pending && pending.requestId === id) {
+      store.set({ splitSessionCreation: null });
+      showToast('Creation was not confirmed. Check recent sessions before trying again.', 'warn');
+    }
+  }, 30000);
+  return true;
+}
+export function handleSplitSessionCreated(message) {
+  var pending = store.get('splitSessionCreation');
+  if (message.type !== 'new_session_result' || !pending || message.requestId !== pending.requestId) return false;
+  if (!message.ok) { store.set({ splitSessionCreation: null }); showToast(message.error || 'The session could not be created.', 'error'); return true; }
+  store.set({ splitSessionCreation: Object.assign({}, pending, { createdId: message.sessionId }) });
+  finishPickerCreation(); return true;
+}
+export function finishPickerCreation() {
+  var pending = store.get('splitSessionCreation');
+  if (!pending || !pending.createdId || !getCachedSessions().some(function (session) { return session.id === pending.createdId; })) return;
+  store.set({ splitSessionCreation: null });
+  if (!insertPickerSession(pending.receipt, pending.side, pending.createdId)) showToast('The session was created in Unfiled. The View changed, so it was not added to the split.', 'warn');
+}
+store.subscribe(function (state, previous) {
+  if (state.splitSessionCreation && (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId || state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration || !state.connected)) store.set({ splitSessionCreation: null });
+});

package/lib/public/modules/split-view-picker-render.js

@@ -0,0 +1,81 @@
+import { store } from './store.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { activeSavedView } from './view-workspace-state.js';
+import { viewForOrigin } from './split-view-presentation-lookup.js';
+import { createOptions } from './session-create.js';
+import { sortVendorEntries } from './vendor-priority.js';
+import { VENDOR_AVATARS, VENDOR_NAMES } from './chat-render-runtime.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { pickerCapacity } from './split-view-picker-actions.js';
+
+export var SPLIT_SIDES = [['right', 'Right', 'panel-right-open'], ['left', 'Left', 'panel-left-open'], ['top', 'Top', 'panel-top-open'], ['bottom', 'Bottom', 'panel-bottom-open']];
+function button(label, action, value) {
+  var el = document.createElement('button'); el.type = 'button'; el.dataset[action] = value; el.setAttribute('aria-label', label); el.title = label; return el;
+}
+function vendorIcon(vendor) {
+  var image = document.createElement('img'); image.src = VENDOR_AVATARS[vendor] || '/icon-192.png'; image.alt = ''; return image;
+}
+function age(time) {
+  var minutes = Math.max(0, Math.floor((Date.now() - (time || 0)) / 60000));
+  return minutes < 1 ? 'Now' : minutes < 60 ? minutes + 'm' : minutes < 1440 ? Math.floor(minutes / 60) + 'h' : Math.floor(minutes / 1440) + 'd';
+}
+export function pickerCandidates(query) {
+  var view = activeSavedView(), text = (query || '').trim().toLocaleLowerCase();
+  return (getCachedSessions() || []).filter(function (session) {
+    return view && session.sessionOriginId && !session.hidden && session.sessionRole !== 'worker' && !session.isMate && !session.isTui &&
+      (session.ownerId || null) === (store.get('myUserId') || null) && !view.sessions.some(function (ref) { return ref.sessionOriginId === session.sessionOriginId; }) &&
+      (!text || (session.title || 'New session').toLocaleLowerCase().indexOf(text) >= 0);
+  }).sort(function (a, b) { return (b.lastActivity || b.createdAt || 0) - (a.lastActivity || a.createdAt || 0); }).slice(0, text ? 40 : 6);
+}
+export function renderPickerResults(menu) {
+  var state = store.get('splitSessionPicker'); if (!state) return;
+  var list = menu.querySelector('.split-session-results'); if (!list) return;
+  var focused = menu.contains(document.activeElement) && document.activeElement.dataset, focusKey = focused && (focused.splitSession ? ['splitSession', focused.splitSession] : focused.splitVendor ? ['splitVendor', focused.splitVendor] : null);
+  list.replaceChildren();
+  var candidates = pickerCandidates(state.query), blocked = !pickerCapacity() || !!store.get('projectSplitViewPending') || !!store.get('splitSessionCreation');
+  candidates.forEach(function (session) {
+    var title = session.title || 'New session', owner = viewForOrigin(session.sessionOriginId);
+    var choice = button('Add ' + title, 'splitSession', String(session.id)); choice.className = 'split-session-result'; choice.disabled = blocked;
+    choice.appendChild(vendorIcon(session.vendor));
+    var content = document.createElement('span'); content.className = 'split-session-result-title'; content.textContent = title; choice.appendChild(content);
+    var time = document.createElement('small'); time.textContent = age(session.lastActivity || session.createdAt); choice.appendChild(time);
+    choice.title = title + (owner ? ' · Move from ' + owner.name : '');
+    if (owner && owner.sessions.length > 1) { var note = document.createElement('small'); note.className = 'split-session-move'; note.textContent = 'Move from ' + owner.name; content.appendChild(note); }
+    list.appendChild(choice);
+  });
+  if (!candidates.length) { var empty = document.createElement('p'); empty.className = 'split-session-empty'; empty.textContent = state.query ? 'No matching sessions. Start a new one below.' : 'No other sessions yet. Start a new one below.'; list.appendChild(empty); }
+  var vendors = menu.querySelector('.split-session-vendors'); vendors.replaceChildren();
+  var options = createOptions(), installed = sortVendorEntries(options.vendors.filter(function (vendor) { return vendor.installed; }));
+  installed.forEach(function (vendor) {
+    var label = 'New ' + (VENDOR_NAMES[vendor.id] || vendor.displayName || vendor.id) + ' session';
+    var control = button(label, 'splitVendor', vendor.id); control.disabled = blocked; control.appendChild(vendorIcon(vendor.id)); vendors.appendChild(control);
+  });
+  if (options.error || !installed.length) {
+    var hint = document.createElement('span'); hint.className = 'split-session-empty'; hint.textContent = options.error || (options.loaded ? 'No installed vendors available.' : 'Loading vendors…'); vendors.appendChild(hint);
+    if (options.error) { var retry = button('Retry loading vendors', 'splitRetry', 'true'); retry.textContent = 'Retry'; vendors.appendChild(retry); }
+  }
+  var status = menu.querySelector('[role="status"]');
+  if (focusKey) { var restored = Array.from(menu.querySelectorAll('button')).find(function (item) { return item.dataset[focusKey[0]] === focusKey[1] && !item.disabled; }); if (restored) restored.focus({ preventScroll: true }); }
+  status.textContent = !pickerCapacity() ? 'This View already has eight session panes.' : store.get('projectSplitViewPending') ? 'Saving the View…' : store.get('splitSessionCreation') ? 'Creating session…' : state.error || '';
+}
+export function renderPicker(menu) {
+  var state = store.get('splitSessionPicker'); if (!state) return;
+  menu.replaceChildren(); menu.dataset.stage = state.side ? 'sessions' : 'direction';
+  if (!state.side) {
+    var header = document.createElement('div'); header.className = 'split-view-arrange-header';
+    var title = document.createElement('strong'); title.textContent = 'Add split'; header.appendChild(title);
+    var close = button('Close split picker', 'splitClose', 'true'); close.innerHTML = iconHtml('x'); header.appendChild(close); menu.appendChild(header);
+    var directions = document.createElement('div'); directions.className = 'split-session-directions';
+    SPLIT_SIDES.forEach(function (side) { var choice = button('Add ' + side[1] + ' Split', 'splitSide', side[0]); choice.disabled = !pickerCapacity() || !!store.get('projectSplitViewPending'); choice.innerHTML = iconHtml(side[2]); var label = document.createElement('span'); label.textContent = 'Add ' + side[1] + ' Split'; choice.appendChild(label); directions.appendChild(choice); });
+    menu.appendChild(directions); refreshIcons(); return;
+  }
+  var search = document.createElement('label'); search.className = 'split-session-search'; search.innerHTML = iconHtml('search');
+  var input = document.createElement('input'); input.type = 'search'; input.placeholder = 'Search sessions…'; input.setAttribute('aria-label', 'Search sessions'); input.value = state.query || ''; search.appendChild(input); menu.appendChild(search);
+  var recent = document.createElement('div'); recent.className = 'split-session-section'; recent.textContent = state.query ? 'Search results' : 'Recent sessions'; menu.appendChild(recent);
+  var list = document.createElement('div'); list.className = 'split-session-results'; list.setAttribute('aria-label', 'Available sessions'); menu.appendChild(list);
+  var heading = document.createElement('div'); heading.className = 'split-session-section split-session-new'; heading.textContent = 'New session'; menu.appendChild(heading);
+  var vendors = document.createElement('div'); vendors.className = 'split-session-vendors'; vendors.setAttribute('aria-label', 'Installed vendors'); menu.appendChild(vendors);
+  var status = document.createElement('p'); status.className = 'split-session-status'; status.setAttribute('role', 'status'); menu.appendChild(status);
+  var footer = document.createElement('small'); footer.className = 'split-session-hint'; footer.textContent = '↑↓ Choose · Enter Open · Esc Cancel'; menu.appendChild(footer);
+  renderPickerResults(menu); refreshIcons();
+}

package/lib/public/modules/split-view-presentation-renderer.js

@@ -1,7 +1,7 @@
 import { paintLegacyToolPanes, clearToolPaneWindows } from './tool-pane-legacy.js';
 import { toolPaneLayoutTree, paintToolPaneWindows, bindWorkspaceDivider, dockedToolPanes } from './tool-pane-layout.js';
 import { afterPaneMotion } from './split-view-drag-preview.js';
-import { layoutScope, currentLayoutScope, presentationTree } from './split-view-layout-scope.js';
+import { layoutScope, currentLayoutScope, presentationTree, bindingMatches } from './split-view-layout-scope.js';
 // Flat, stable pane presentation for persisted binary trees. Geometry is
 // applied to existing direct-child .split-pane nodes; iframes are never moved
 // below a nested layout wrapper.
@@ -17,6 +17,7 @@ import { syncPaneHeaderState } from './split-pane-header-state.js';
 import { rectangles, resize, validateTree, listIds } from './split-view-layout-client.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { appendLayoutOption } from './split-view-layout-icons.js';
+import { reserveEmptySplit, clearEmptySplit } from './split-session-empty-pane.js';
 
 var host = null;
 var app = null;
@@ -24,7 +25,6 @@ var menuTrigger = null;
 var resizeObserver = null;
 var geometryToken = 0;
 var stickyStatusOrigins = null;
-
 function relocateStickyStatus(enabled) {
   var ids = ['todo-sticky', 'ralph-sticky', 'debate-sticky'];
   var main = document.getElementById('main-panels'), appElement = document.getElementById('app');
@@ -52,6 +52,7 @@ export function initPresentationRenderer(hostElement) {
   host = hostElement;
   app = document.getElementById("app");
   ensureArrangeMenu();
+  document.addEventListener('clay-split-picker-layout', renderCurrentGeometry);
   document.addEventListener("click", onClick, true);
   document.addEventListener("keydown", onKeyDown, true);
   document.addEventListener("pointermove", onPointerMove, true);
@@ -69,6 +70,7 @@ export function initPresentationRenderer(hostElement) {
 
 export function hidePresentationView() {
   if (!host) return;
+  clearEmptySplit(host);
   var legacySplit = store.get('splitPanes');
   if (legacySplit) releaseRetainedPanes(host);
   else clearRetainedPanes(host);
@@ -218,11 +220,12 @@ function applyGeometry(view, tree, stillCurrent) {
   var windowTree = toolPaneLayoutTree(view, tree);
   var geometry = rectangles(windowTree, Math.max(0, host.clientWidth - left - right), Math.max(0, host.clientHeight - top - bottom), 7);
   paintToolPaneWindows(host, view, tree, windowTree, geometry, { left: left, top: top });
+  var reserving = reserveEmptySplit(host, geometry, { left: left, top: top });
   var focused = store.get('projectSplitViewFocusedOrigin');
   var panes = host.querySelectorAll(':scope > .split-pane');
   for (var i = 0; i < panes.length; i++) {
     var frame = panes[i].querySelector('.split-pane-frame'), origin = panes[i].dataset.presentationOrigin || frame && frame.dataset.sessionOriginId;
-    var rect = host.dataset.singlePane === 'true' && panes.length === 1 && !dockedToolPanes().length ?
+    var rect = !reserving && host.dataset.singlePane === 'true' && panes.length === 1 && !dockedToolPanes().length ?
       { x: 0, y: 0, width: Math.max(0, host.clientWidth - left - right), height: Math.max(0, host.clientHeight - top - bottom) } : geometry.panes[origin];
     if (!rect) continue;
     if (focused && geometry.panes[focused]) {
@@ -245,6 +248,7 @@ function applyGeometry(view, tree, stillCurrent) {
     divider.setAttribute("role", "separator"); divider.setAttribute("tabindex", "0");
     divider.setAttribute("aria-orientation", entry.axis === "horizontal" ? "vertical" : "horizontal");
     divider.setAttribute("aria-label", "Resize Split view panels");
+    if (reserving) { divider.inert = true; divider.tabIndex = -1; divider.setAttribute('aria-disabled', 'true'); }
     divider.style.left = (left + entry.rect.x) + "px"; divider.style.top = (top + entry.rect.y) + "px";
     divider.style.width = entry.rect.width + "px"; divider.style.height = entry.rect.height + "px";
     if (dockedToolPanes().length) bindWorkspaceDivider(divider, entry, windowTree);
@@ -261,15 +265,11 @@ function applyGeometry(view, tree, stillCurrent) {
     });
   });
 }
-function bindingMatches(left, right) {
-  return !!left && !!right && left.sessionId === right.sessionId && left.sessionOriginId === right.sessionOriginId &&
-    left.generation === right.generation && left.requestId === right.requestId;
-}
 export function ensureArrangeTrigger(header) {
   if (!header) return;
   if (!header.querySelector('[data-action="arrange"]')) {
     var trigger = document.createElement("button"); trigger.type = "button"; trigger.className = "split-view-arrange-trigger";
-    trigger.dataset.action = "arrange"; trigger.setAttribute("aria-label", "Arrange sessions");
+    trigger.dataset.action = "arrange"; trigger.setAttribute("aria-label", "Split view options");
     trigger.setAttribute("aria-expanded", "false"); trigger.setAttribute("aria-controls", "split-view-arrange-menu");
     trigger.innerHTML = iconHtml("columns-2");
     var close = header.querySelector(".split-pane-close"); header.insertBefore(trigger, close || null);

package/lib/public/modules/split-view-worker-activity.js

@@ -22,14 +22,14 @@ export function workerActivityLabel(message, names) {
 }
 export function captureWorkerDisclosures(body) {
   return {
-    open: Array.from(body.querySelectorAll('details[open]')).map(function (node) { return node.dataset.disclosureKey; }),
+    open: Array.from(body.querySelectorAll('details[open], [data-disclosure-key][aria-expanded="true"]')).map(function (node) { return node.dataset.disclosureKey; }),
     focus: document.activeElement && body.contains(document.activeElement) && (document.activeElement.dataset.disclosureKey || document.activeElement.parentElement && document.activeElement.parentElement.dataset.disclosureKey)
   };
 }
 export function restoreWorkerDisclosures(body, saved) {
   Array.from(body.querySelectorAll('[data-disclosure-key]')).forEach(function (node) {
     var key = node.dataset.disclosureKey;
-    if (saved.open.indexOf(key) >= 0) node.open = true;
+    if (saved.open.indexOf(key) >= 0) { if (node.tagName === 'DETAILS') node.open = true; else if (node.getAttribute('aria-expanded') !== 'true') node.click(); }
     if (saved.focus === key) {
       var target = node.tagName === 'DETAILS' ? node.querySelector('summary') : node;
       if (target) target.focus({ preventScroll: true });

package/lib/public/modules/split-view-worker-transcript.js

@@ -1,5 +1,9 @@
-import { workerActivityLabel, workerActivityNames } from './split-view-worker-activity.js';
-import { renderMarkdown } from './markdown.js';
+import { workerActivityNames } from './split-view-worker-activity.js';
+import { createAssistantBubble, createUserBubble, renderAssistantBubbleText } from './chat-bubble-renderer.js';
+import { createSessionToolItem, createSessionToolGroup, sessionToolGroupSummary } from './session-tool-item.js';
+import { applyClayToolItem, bindToolGroupDisclosure } from './clay-tool-activity.js';
+import { iconHtml } from './icons.js';
+import { VENDOR_AVATARS } from './chat-render-runtime.js';
 
 // Reassemble bounded record fragments and contiguous streaming deltas before
 // parsing Markdown, including fences and lists that cross a page boundary.
@@ -17,38 +21,71 @@ export function workerTranscriptRows(messages) {
   return rows;
 }
 
-export function appendWorkerMessage(body, message, names) {
+function inputFor(message) {
+  if (message.recordType !== 'tool_use' && message.recordType !== 'tool_executing') return null;
+  try { var start = message.text.indexOf('{'); return start >= 0 ? JSON.parse(message.text.slice(start)) : null; } catch (error) { return null; }
+}
+export function appendWorkerMessage(body, message, names, options) {
+  options = options || {};
   if (message.role === 'tool') {
-    var article = document.createElement('article');
-    article.className = 'message worker-readonly-message worker-tool-message';
-    article.dataset.recordIndex = String(message.recordIndex);
-    article.dataset.phase = message.isError ? 'failed' : message.recordType === 'tool_result' ? 'returned' : 'recorded';
-    var details = document.createElement('details');
-    details.dataset.disclosureKey = 'record-' + message.recordIndex;
-    var summary = document.createElement('summary');
-    summary.textContent = workerActivityLabel(message, names || workerActivityNames([message])) +
-      (message.isError ? ' · Failed' : message.recordType === 'tool_result' ? ' · Result returned' : ' · Call recorded');
-    var output = document.createElement('pre'); output.textContent = message.text;
-    details.append(summary, output); article.appendChild(details); body.appendChild(article);
-    return;
+    var name = message.toolName || names && names[message.toolId] && names[message.toolId].name || 'Tool activity';
+    var el = createSessionToolItem(message.toolId, name);
+    el.classList.add('worker-readonly-message', 'worker-tool-message'); el.dataset.recordIndex = String(message.recordIndex);
+    el.dataset.phase = message.isError ? 'failed' : message.recordType === 'tool_result' ? 'returned' : 'recorded';
+    var input = inputFor(message), output = message.resultText;
+    var tool = { el: el, name: name, input: input, clayRawResult: output, clayOutcome: output !== undefined ? { phase: message.isError ? 'error' : 'done' } : { phase: 'returned', status: 'result_unavailable' } };
+    var header = el.querySelector('.tool-header'); header.dataset.disclosureKey = 'record-' + message.recordIndex;
+    if (!applyClayToolItem(tool)) {
+      var terminal = message.isError ? 'Failed' : output !== undefined || message.recordType === 'tool_result' ? 'Result returned' : 'Call recorded';
+      el.querySelector('.tool-desc').textContent = input && (input.file_path || input.command || input.pattern) || '';
+      el.querySelector('.tool-subtitle-text').textContent = terminal;
+      el.querySelector('.tool-status-icon').innerHTML = iconHtml(message.isError ? 'alert-triangle' : output !== undefined ? 'check' : 'circle-help');
+      el.classList.toggle('done', output !== undefined); el.classList.toggle('error', !!message.isError);
+      var block = document.createElement('div'); block.className = 'tool-result-block collapsed';
+      var pre = document.createElement('pre'); pre.textContent = output !== undefined ? output : message.text; block.appendChild(pre); el.appendChild(block);
+      header.setAttribute('role', 'button'); header.tabIndex = 0; header.setAttribute('aria-expanded', 'false');
+      function toggle() { var expanded = el.classList.toggle('expanded'); block.classList.toggle('collapsed', !expanded); header.setAttribute('aria-expanded', String(expanded)); }
+      header.addEventListener('click', toggle); header.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggle(); } });
+    }
+    body.appendChild(el); return;
   }
-  var article = document.createElement('article');
-  article.className = 'message worker-readonly-message ' + (message.role === 'user' ? 'msg-user' : 'msg-assistant');
-  if (Number.isInteger(message.recordIndex)) article.dataset.recordIndex = String(message.recordIndex);
-  var author = document.createElement('strong'); author.className = 'author';
-  author.textContent = message.role === 'user' ? 'Driver' : 'Worker';
-  var content = document.createElement('div'); content.className = 'message-body md-content';
-  // Recorded HTML must not create controls, scoped overlays or active embeds.
-  // Keep the shared Markdown parser and its sanitization, with a narrower
-  // read-only prose vocabulary for this secondary history surface.
-  content.innerHTML = DOMPurify.sanitize(renderMarkdown(message.text), {
-    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'del', 's', 'blockquote', 'ul', 'ol', 'li', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'a', 'wbr'],
-    ALLOWED_ATTR: ['href', 'title', 'target', 'rel', 'start'], ALLOW_DATA_ATTR: false
-  });
-  article.append(author, content); body.appendChild(article);
+  var user = message.role === 'user';
+  var label = message.authorLabel || (user ? options.userName || 'Driver' : options.assistantName || 'Worker');
+  var config = { tagName: 'article', name: label, avatarUrl: user ? options.userAvatar || '/icon-192.png' : VENDOR_AVATARS[options.vendor || 'claude'], text: message.text };
+  var article = user ? createUserBubble(config) : createAssistantBubble(config);
+  article.classList.add('worker-readonly-message'); article.dataset.recordIndex = String(message.recordIndex);
+  if (!user) renderAssistantBubbleText(article, message.text, true, { readOnly: true });
+  body.appendChild(article);
 }
-
-export function appendWorkerTranscript(body, messages) {
-  var rows = workerTranscriptRows(messages), names = workerActivityNames(rows);
-  rows.forEach(function (message) { appendWorkerMessage(body, message, names); });
+export function appendWorkerTranscript(body, messages, options) {
+  var rows = workerTranscriptRows(messages), names = workerActivityNames(rows), consumed = new Set(), visible = [];
+  rows.forEach(function (message, index) {
+    if (consumed.has(index)) return;
+    var row = message;
+    if (message.role === 'tool' && names[message.toolId] && names[message.toolId].index === message.recordIndex) {
+      var later = rows.slice(index + 1), executing = later.find(function (item) { return item.toolId === message.toolId && item.recordType === 'tool_executing'; });
+      var result = later.find(function (item) { return item.toolId === message.toolId && item.recordType === 'tool_result'; });
+      row = Object.assign({}, message, executing ? { text: executing.text, recordType: executing.recordType } : {}, result ? { resultText: result.text, isError: result.isError } : {});
+      [executing, result].forEach(function (item) { if (item) consumed.add(rows.indexOf(item)); });
+    }
+    visible.push(row);
+  });
+  var group = null, groupRows = [];
+  function finish() {
+    if (!group) return;
+    var header = group.querySelector('.tool-group-header'), done = groupRows.every(function (row) { return row.resultText !== undefined || row.recordType === 'tool_result'; });
+    var meta = { toolNames: groupRows.map(function (row) { return row.toolName || names[row.toolId] && names[row.toolId].name || 'Tool'; }), doneCount: done ? groupRows.length : 0 };
+    header.style.display = groupRows.length > 1 ? '' : 'none';
+    header.dataset.disclosureKey = 'group-' + groupRows[0].recordIndex;
+    group.querySelector('.tool-group-label').textContent = done ? sessionToolGroupSummary(meta, {}) : groupRows.length + ' tool calls recorded';
+    group.classList.toggle('done', done); group.classList.toggle('collapsed', groupRows.length > 1);
+    group.querySelector('.tool-group-status-icon').innerHTML = iconHtml(done ? 'check' : 'circle-help');
+    bindToolGroupDisclosure(group, function () {}); group = null; groupRows = [];
+  }
+  visible.forEach(function (row) {
+    if (row.role !== 'tool') { finish(); appendWorkerMessage(body, row, names, options); return; }
+    if (!group) { group = createSessionToolGroup(); body.appendChild(group); }
+    groupRows.push(row); appendWorkerMessage(group.querySelector('.tool-group-items'), row, names, options);
+  });
+  finish();
 }

package/lib/public/modules/split-view-workers.js

@@ -1,3 +1,4 @@
+import { syncWorkerMessagePreviews } from './worker-message-previews.js';
 import { appendWorkerRemoval, reconcileWorkerRemoval } from './split-view-worker-removal.js';
 import { workerCursorKey, workerCursorAdvances, shouldLoadWorkerPage, captureWorkerAnchor, restoreWorkerAnchor } from './split-view-worker-scroll.js';
 import { appendWorkerTranscript } from './split-view-worker-transcript.js';
@@ -189,7 +190,7 @@ function open(chip, driver, worker, takeFocus) {
   if (existing && existing.driverOriginId === driver.sessionOriginId && existing.workerOriginId === worker.sessionOriginId && existing.generation === worker.workerGeneration) { close(true); return; }
   if (existing) close(false);
   var state = { requestId: null, driverOriginId: driver.sessionOriginId, workerOriginId: worker.sessionOriginId,
-    generation: worker.workerGeneration, driverTitle: driver.title || "Driver session", workerTitle: worker.title || "Worker",
+    generation: worker.workerGeneration, workerVendor: worker.vendor, driverTitle: driver.title || "Driver session", workerTitle: worker.title || "Worker",
     sourceBinding: chip.closest('.split-pane').querySelector('.split-pane-frame').clayPane.identity().binding,
     status: "loading", messages: [], hasMore: false, nextBefore: null, append: false, inFlight: false, initialPage: true };
   store.set({ splitViewWorkerConversation: state }); ensurePopover(); renderContent();
@@ -217,7 +218,7 @@ function ensurePopover() {
     var closeButton = document.createElement("button"); closeButton.type = "button"; closeButton.setAttribute("aria-label", "Close Worker conversation"); closeButton.innerHTML = iconHtml("x");
     closeButton.addEventListener("click", function () { close(true); }); header.appendChild(closeButton); element.appendChild(header);
     var source = document.createElement("div"); source.className = "split-view-worker-popover-source"; element.appendChild(source);
-    var body = document.createElement("div"); body.className = "split-view-worker-popover-body"; body.tabIndex = 0; body.setAttribute("aria-label", "Read-only Worker transcript"); element.appendChild(body);
+    var body = document.createElement("div"); body.className = "split-view-worker-popover-body readonly-session-transcript"; body.tabIndex = 0; body.setAttribute("aria-label", "Read-only Worker transcript"); element.appendChild(body);
     body.addEventListener('scroll', function () { loadEarlier(body, true); }, { passive: true });
     body.addEventListener('wheel', function (event) { if (event.deltaY < 0) loadEarlier(body, true); }, { passive: true });
     var footer = document.createElement("footer"); footer.className = "split-view-worker-popover-footer"; element.appendChild(footer);
@@ -241,7 +242,7 @@ function renderContent() {
     if (state.status === "loading" && !state.messages.length) body.textContent = "Loading conversation…";
     else if (state.status === "error" && !state.messages.length) body.textContent = state.error || "Conversation is unavailable.";
     else if (!state.messages.length) body.textContent = "No recorded conversation.";
-    appendWorkerTranscript(body, state.messages);
+    appendWorkerTranscript(body, state.messages, { vendor: state.workerVendor, assistantName: state.workerTitle });
     restoreWorkerDisclosures(body, disclosures);
     if ((state.initialPage || state.liveRefresh && followTail) && state.status === 'ready') body.scrollTop = body.scrollHeight;
     else if (anchor) restoreWorkerAnchor(body, anchor);
@@ -370,7 +371,7 @@ export function renderPaneWorkers(container, driver) {
   data.items.forEach(function (worker) {
     var pill = document.createElement("span"); pill.className = "split-view-worker-pill";
     var button = document.createElement("button"); button.type = "button"; button.className = "split-view-worker-chip";
-    button.dataset.workerOrigin = worker.sessionOriginId; button.dataset.workerGeneration = String(worker.workerGeneration);
+    button.dataset.workerParent = driver.sessionOriginId; button.dataset.workerOrigin = worker.sessionOriginId; button.dataset.workerGeneration = String(worker.workerGeneration);
     var current = data.currentIds.has(worker.id);
     var modelLabel = worker.model || "Default model";
     button.title = (VENDOR_NAMES[worker.vendor] || worker.vendor || "Unknown vendor") + " · " + modelLabel + " · Split Worker #" + worker.id +
@@ -419,6 +420,7 @@ export function renderPaneWorkers(container, driver) {
     root.appendChild(controls);
   }
   introduceWorkerViewer(container, driver);
+  syncWorkerMessagePreviews();
   var conversation = store.get('splitViewWorkerConversation');
   if (conversation) ensurePopover();
 }