clay-server 5.3.0-beta.5 → 5.3.0-beta.7

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-drag-preview.js

@@ -0,0 +1,90 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { livePaneBinding, samePaneBinding } from './pane-binding.js';
+import { layoutScope, currentLayoutScope } from './split-view-layout-scope.js';
+import { presentationDropTree } from './split-view-presentation-drop.js';
+import { rectangles } from './split-view-layout-client.js';
+
+function activeView() {
+  return (store.get('projectSplitViews') || []).find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
+}
+function reducedMotion() { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+export function captureDragPreview(drag, host) {
+  var settling = store.get('projectSplitViewDragSettling');
+  if (settling && settling.timer) clearTimeout(settling.timer);
+  store.set({ projectSplitViewDragSettling: null });
+  var view = activeView();
+  drag.preview = { host: host, socket: getWs(), slug: store.get('currentSlug'), owner: store.get('myUserId'), projectOwner: store.get('currentProjectOwnerId'),
+    scope: view && layoutScope(view), width: host.clientWidth, height: host.clientHeight, tree: null,
+    panes: Array.from(host.querySelectorAll(':scope > .split-pane:not(.split-pane-cached)')).filter(function (pane) {
+      return !pane.hidden && pane.getBoundingClientRect().width > 0;
+    }).map(function (pane) {
+      var frame = pane.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
+      return { pane: pane, frame: frame, document: frame && frame.contentDocument, window: frame && frame.contentWindow,
+        binding: live && live.binding, rect: pane.getBoundingClientRect() };
+    }) };
+}
+export function dragPreviewCurrent(drag) {
+  var preview = drag.preview;
+  return !!preview && preview.socket === getWs() && preview.slug === store.get('currentSlug') && preview.owner === store.get('myUserId') &&
+    preview.projectOwner === store.get('currentProjectOwnerId') && store.get('connected') && !store.get('projectSplitViewDividerDrag') && (!preview.scope || currentLayoutScope(preview.scope)) &&
+    preview.width === preview.host.clientWidth && preview.height === preview.host.clientHeight && preview.panes.every(function (entry) {
+      var live = entry.frame && entry.frame.clayPane && entry.frame.clayPane.identity();
+      return entry.pane.isConnected && entry.frame.contentDocument === entry.document && entry.frame.contentWindow === entry.window &&
+        live && samePaneBinding(live.binding, entry.binding) && livePaneBinding(entry.frame);
+    });
+}
+// Hit-test the starting layout, never panes that are travelling under the hand.
+export function dragPreviewPaneAt(drag, x, y) {
+  var entries = drag && drag.preview && drag.preview.panes || [];
+  return entries.find(function (entry) {
+    var r = entry.rect; return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+  });
+}
+export function renderDragPreview(drag, target) {
+  var preview = drag.preview, view = activeView();
+  if (!preview || !view || !dragPreviewCurrent(drag)) return null;
+  var sourceView = (store.get('projectSplitViews') || []).find(function (item) { return item.id === drag.sourceViewId; });
+  var tree = target && !target.sidebar && target.viewId === view.id && sourceView && sourceView.id === view.id && !store.get('projectSplitViewFocusedOrigin') ?
+    presentationDropTree(drag, target, sourceView, view) : null;
+  if (JSON.stringify(tree) === JSON.stringify(preview.tree)) return preview.dropRect || null;
+  preview.tree = tree;
+  preview.host.classList.add('split-view-drag-preview');
+  store.set({ projectSplitViewPreviewTree: tree, projectSplitViewPreviewScope: preview.scope });
+  preview.dropRect = null;
+  if (tree) {
+    var style = window.getComputedStyle(preview.host), left = parseFloat(style.paddingLeft) || 0, top = parseFloat(style.paddingTop) || 0;
+    var geometry = rectangles(tree, preview.width - left - (parseFloat(style.paddingRight) || 0), preview.height - top - (parseFloat(style.paddingBottom) || 0), 7);
+    var rect = geometry.panes[drag.origin];
+    if (rect) preview.dropRect = { left: left + rect.x, top: top + rect.y, width: rect.width, height: rect.height };
+  }
+  return preview.dropRect;
+}
+function settleMotion() {
+  var settling = store.get('projectSplitViewDragSettling');
+  if (!settling || settling.timer || store.get('projectSplitViewDrag') || store.get('projectSplitViewPending')) return;
+  settling.timer = setTimeout(function () {
+    if (store.get('projectSplitViewDragSettling') !== settling) return;
+    settling.host.classList.remove('split-view-drag-preview');
+    store.set({ projectSplitViewDragSettling: null });
+  }, reducedMotion() ? 0 : 320);
+}
+export function restoreDragPreview(drag, keep) {
+  var preview = drag && drag.preview;
+  if (!preview) return;
+  if (!keep && preview.tree && store.get('projectSplitViewPreviewTree') === preview.tree) {
+    store.set({ projectSplitViewPreviewTree: null, projectSplitViewPreviewScope: null });
+  }
+  var previous = store.get('projectSplitViewDragSettling');
+  if (previous && previous.timer) clearTimeout(previous.timer);
+  store.set({ projectSplitViewDragSettling: { host: preview.host, timer: null } });
+  settleMotion();
+}
+// Preserve transcript anchors until animated width/height changes have settled.
+export function afterPaneMotion(host, callback) {
+  window.requestAnimationFrame(function () {
+    if (host.classList.contains('split-view-drag-preview') && !reducedMotion()) setTimeout(callback, 300);
+    else callback();
+  });
+}
+store.subscribe(function () { settleMotion(); });

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

@@ -24,7 +24,7 @@ export function validateTree(tree, expectedIds) {
         !Number.isFinite(node.ratio) || node.ratio < MIN_RATIO || node.ratio > MAX_RATIO) return false;
     return walk(node.left, depth + 1) && walk(node.right, depth + 1);
   }
-  valid = walk(tree, 0) && ids.length >= 2 && ids.length <= MAX_SESSIONS && new Set(ids).size === ids.length;
+  valid = (tree === null || walk(tree, 0)) && ids.length >= 0 && ids.length <= MAX_SESSIONS && new Set(ids).size === ids.length;
   if (valid && expectedIds) {
     valid = Array.isArray(expectedIds) && expectedIds.length === ids.length &&
       expectedIds.every(function (id) { return ids.indexOf(id) !== -1; });

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-drag.js

@@ -1,6 +1,8 @@
 // Pointer drag controller for presentation views. Captured gestures are
 // source-bound by pointerId and always recompute the release target.
 import { store } from './store.js';
+import { livePaneBinding } from './pane-binding.js';
+import { captureDragPreview, dragPreviewCurrent, dragPreviewPaneAt, renderDragPreview, restoreDragPreview } from './split-view-drag-preview.js';
 import { getCachedSessions } from './sidebar-sessions.js';
 import { showToast } from './utils.js';
 import { currentFolderState, sendFolderOp } from './session-folders.js';
@@ -29,22 +31,28 @@ function validSession(session) {
 function legacyMember(session) { return !!session && session.sessionRole === "worker"; }
 
 function onPointerDown(event) {
-  if (event.button !== 0 || event.isPrimary === false || store.get('projectSplitViewDrag')) return;
+  if (event.button !== 0 || event.isPrimary === false || store.get('projectSplitViewDrag') || store.get('projectSplitViewPending')) return;
   if (!event.target || !event.target.closest) return;
   var paneHeader = event.target.closest(".split-pane-header");
   var row = event.target.closest(".session-item[data-session-id], .session-loop-child[data-session-id]");
   if (!paneHeader && !row) return;
+  var workspace = store.get('toolPaneWindowGeometry');
+  if (paneHeader && workspace && workspace.windows.some(function (entry) { return !!entry.tool; })) return;
+  if (paneHeader && event.target.closest(".split-pane-title, .split-view-runtime, .split-worker-runtime")) return;
   var button = event.target.closest("button");
   if ((paneHeader && button) || (button && button !== row) || event.target.closest("a, input, textarea, select, [contenteditable='true'], .workbench, .split-view-menu, .split-view-arrange, .session-row-actions, .session-close-btn, .session-more-btn")) return;
   var pane = paneHeader && paneHeader.closest('.split-pane');
+  if (pane && !livePaneBinding(pane.querySelector('.split-pane-frame'))) return;
   var id = pane ? Number(pane.dataset.sessionId) : row ? Number(row.dataset.sessionId) : 0;
   var source = sessionById(id);
   if (!validSession(source) || legacyMember(source)) return;
   var group = row && row.closest('.split-view-group[data-split-view-id]');
   var view = viewForOrigin(source.sessionOriginId);
-  store.set({ projectSplitViewDrag: { pointerId: event.pointerId, sessionId: source.id, origin: source.sessionOriginId,
+  var drag = { pointerId: event.pointerId, sessionId: source.id, origin: source.sessionOriginId,
     sourceViewId: group ? group.dataset.splitViewId : view && view.id || null, sourceElement: row || paneHeader, startX: event.clientX, startY: event.clientY,
-    moved: false, target: null, pointerType: event.pointerType, frames: [] } });
+    moved: false, target: null, pointerType: event.pointerType, frames: [] };
+  captureDragPreview(drag, host);
+  store.set({ projectSplitViewDrag: drag });
 }
 
 function targetAt(x, y) {
@@ -59,6 +67,8 @@ function targetAt(x, y) {
   }
   var sidebar = sidebarTargetAt(element);
   if (sidebar) return sidebar;
+  var snapshot = dragPreviewPaneAt(store.get('projectSplitViewDrag'), x, y);
+  if (snapshot) return paneTargetAt(snapshot.pane, x, y, snapshot.rect);
   var pane = element.closest('.split-pane');
   if (!pane || !host.contains(pane) || !pane.isConnected) return null;
   return paneTargetAt(pane, x, y);
@@ -81,11 +91,11 @@ function sidebarTargetAt(element) {
     rect: { left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height } };
 }
 
-function paneTargetAt(pane, x, y) {
+function paneTargetAt(pane, x, y, originalBounds) {
   var id = Number(pane.dataset.sessionId), session = sessionById(id), frame = pane.querySelector('.split-pane-frame');
   if (!validSession(session) || legacyMember(session) || !frame || frame.dataset.projectSlug !== store.get('currentSlug') ||
       frame.dataset.sessionId !== String(id) || frame.dataset.sessionOriginId !== session.sessionOriginId) return null;
-  var bounds = pane.getBoundingClientRect(), dx = (x - bounds.left) / Math.max(1, bounds.width), dy = (y - bounds.top) / Math.max(1, bounds.height);
+  var bounds = originalBounds || pane.getBoundingClientRect(), dx = (x - bounds.left) / Math.max(1, bounds.width), dy = (y - bounds.top) / Math.max(1, bounds.height);
   var edge = Math.min(dx, 1 - dx, dy, 1 - dy), side = "center";
   if (edge < 0.25) side = edge === dx ? "left" : edge === 1 - dx ? "right" : edge === dy ? "top" : "bottom";
   var view = viewForOrigin(session.sessionOriginId);
@@ -102,12 +112,13 @@ function fallbackTargetAt(x, y) {
     var panes = Array.from(host.querySelectorAll(':scope > .split-pane')), nearest = null, nearestDistance = Infinity;
     panes.forEach(function (pane) {
       if (pane.hidden) return;
-      var rect = pane.getBoundingClientRect(), dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
+      var snapshot = store.get('projectSplitViewDrag'), entry = snapshot && snapshot.preview && snapshot.preview.panes.find(function (item) { return item.pane === pane; });
+      var rect = entry ? entry.rect : pane.getBoundingClientRect(), dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
       var dy = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
       var distance = dx * dx + dy * dy;
       if (distance < nearestDistance) { nearest = pane; nearestDistance = distance; }
     });
-    if (nearest) return paneTargetAt(nearest, x, y);
+    if (nearest) { var entry = store.get('projectSplitViewDrag').preview.panes.find(function (item) { return item.pane === nearest; }); return paneTargetAt(nearest, x, y, entry && entry.rect); }
   }
   if (!inApp) return null;
   var active = sessionById(Number(store.get('activeSessionId')));
@@ -123,9 +134,12 @@ function resolveTarget(x, y) { return targetAt(x, y) || fallbackTargetAt(x, y);
 function onPointerMove(event) {
   var drag = store.get('projectSplitViewDrag');
   if (!drag || drag.pointerId !== event.pointerId) return;
+  if (!dragPreviewCurrent(drag)) { cleanup(true, true); return; }
   if (!drag.moved && Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 6) return;
   if (!drag.moved) {
     drag.moved = true;
+    var source = drag.preview.panes.find(function (entry) { return entry.binding && entry.binding.sessionOriginId === drag.origin; });
+    if (source) { drag.sourcePane = source.pane; source.pane.classList.add('split-pane-drag-source'); }
     try { document.documentElement.setPointerCapture(event.pointerId); } catch (error) {}
     drag.frames = Array.from(host.querySelectorAll('.split-pane-frame')).map(function (frame) { return { frame: frame, pointerEvents: frame.style.pointerEvents }; });
     drag.frames.forEach(function (entry) { entry.frame.style.pointerEvents = "none"; });
@@ -138,6 +152,7 @@ function onPointerMove(event) {
 
 function renderPreview(drag, x, y) {
   clearSidebarPreview();
+  var plannedRect = renderDragPreview(drag, drag.target);
   var preview = host.querySelector(':scope > .split-view-drop-preview'), ghost = document.getElementById("split-view-drag-ghost");
   if (!ghost) { ghost = document.createElement("div"); ghost.id = "split-view-drag-ghost"; ghost.className = "split-view-drag-ghost"; ghost.hidden = true; document.body.appendChild(ghost); }
   if (!preview) {
@@ -188,9 +203,10 @@ function renderPreview(drag, x, y) {
   var hostRect = host.getBoundingClientRect();
   preview.style.left = (box.left - hostRect.left) + "px"; preview.style.top = (box.top - hostRect.top) + "px";
   preview.style.width = box.width + "px"; preview.style.height = box.height + "px";
+  if (plannedRect) { preview.style.left = plannedRect.left + "px"; preview.style.top = plannedRect.top + "px"; preview.style.width = plannedRect.width + "px"; preview.style.height = plannedRect.height + "px"; }
   preview.dataset.blocked = blocked ? "true" : "false"; preview.hidden = false;
   var label = preview.querySelector(".drop-label");
-  if (label) label.textContent = blocked ? "Eight sessions already open" : drag.origin === target.origin ? "Keep this pane" :
+  if (label) label.textContent = blocked ? (drag.origin === target.origin ? "Keep this pane" : "Eight sessions already open") : drag.origin === target.origin ? "Keep this pane" :
     target.side === "center" ? (sourceView && targetView && sourceView.id === targetView.id ? "Swap panes" : "Split right") : "Split " + target.side;
 }
 
@@ -199,8 +215,10 @@ function clearSidebarPreview() {
   document.querySelectorAll('[data-split-view-drop]').forEach(function (element) { delete element.dataset.splitViewDrop; });
 }
 
-export function restorePresentationDrag(drag) {
+export function restorePresentationDrag(drag, keepPreview) {
   if (!drag) return;
+  if (drag.sourcePane) drag.sourcePane.classList.remove('split-pane-drag-source');
+  restoreDragPreview(drag, keepPreview);
   clearSidebarPreview();
   drag.frames.forEach(function (entry) { if (entry.frame.isConnected) entry.frame.style.pointerEvents = entry.pointerEvents; });
   var preview = host.querySelector(':scope > .split-view-drop-preview'); if (preview) preview.hidden = true;
@@ -215,23 +233,24 @@ export function restorePresentationDrag(drag) {
   }
 }
 
-function cleanup(release, suppressClick) {
+function cleanup(release, suppressClick, keepPreview) {
   var drag = store.get('projectSplitViewDrag');
   if (!drag) return;
-  restorePresentationDrag(drag);
+  restorePresentationDrag(drag, keepPreview);
   if (suppressClick && drag.moved) {
     var token = { pointerId: drag.pointerId, sourceElement: drag.sourceElement, sourceSessionId: drag.sessionId,
       targetOrigin: drag.target && drag.target.origin, until: Date.now() + 250 };
     store.set({ projectSplitViewSuppressClick: token });
     setTimeout(function () { if (store.get('projectSplitViewSuppressClick') === token) store.set({ projectSplitViewSuppressClick: null }); }, 500);
   }
-  if (release) try { if (document.documentElement.hasPointerCapture(drag.pointerId)) document.documentElement.releasePointerCapture(drag.pointerId); } catch (error) {}
   store.set({ projectSplitViewDrag: null });
+  if (release) try { if (document.documentElement.hasPointerCapture(drag.pointerId)) document.documentElement.releasePointerCapture(drag.pointerId); } catch (error) {}
 }
 
 function onPointerUp(event) {
   var drag = store.get('projectSplitViewDrag');
   if (!drag || drag.pointerId !== event.pointerId) return;
+  if (!dragPreviewCurrent(drag)) { cleanup(true, true); return; }
   if (!drag.moved) { cleanup(true, false); return; }
   var target = resolveTarget(event.clientX, event.clientY);
   drag.target = target;
@@ -239,6 +258,11 @@ function onPointerUp(event) {
       (store.get('projectSplitViews') || []).some(function (view) { return view.id === target.viewId && view.sessions.length >= 8; })) {
     cleanup(true, true); showToast("Eight sessions are already open. Close a pane to add another.", "warn"); return;
   }
+  if (target && !target.folderId && drag.origin !== target.origin && commitDrop) {
+    renderDragPreview(drag, target);
+    var queued = commitDrop(drag, target);
+    cleanup(true, true, queued === true); return;
+  }
   cleanup(true, true);
   if (target && target.folderId) {
     var session = sessionById(drag.sessionId);
@@ -249,7 +273,6 @@ function onPointerUp(event) {
     else sendFolderOp(favorite ? { op: 'set_favorite', sessionId: session.id, favorite: true } : { op: 'place_session', sessionId: session.id, folderId: folderId });
     return;
   }
-  if (target && drag.origin !== target.origin && commitDrop) commitDrop(drag, target);
 }
 
 function onPointerCancel(event) {