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

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

@@ -0,0 +1,418 @@
+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';
+import { captureWorkerDisclosures, restoreWorkerDisclosures } from './split-view-worker-activity.js';
+// Read-only Worker conversation chips attached to a Driver's presentation pane.
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { splitGroupRoles } from './split-group-helpers.js';
+import { livePaneBinding, samePaneBinding, paneTarget, samePaneTarget } from './pane-binding.js';
+import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
+
+function sessions() { return getCachedSessions() || []; }
+function exactDriver(origin) {
+  return sessions().find(function (session) { return session.sessionOriginId === origin && session.sessionRole === "driver"; }) || null;
+}
+function exactWorker(driver, origin, generation) {
+  if (!driver) return null;
+  return sessions().find(function (session) { return session.sessionOriginId === origin && session.sessionRole === "worker" &&
+    session.parentAvailable === true && session.parentSessionId === driver.id && (session.ownerId || null) === (driver.ownerId || null) &&
+    session.workerGeneration === generation; }) || null;
+}
+function workersFor(driver) {
+  var all = sessions().filter(function (session) { return session.sessionRole === "worker" && session.parentAvailable === true && session.parentSessionId === driver.id &&
+    (session.ownerId || null) === (driver.ownerId || null); });
+  var currentIds = new Set();
+  (store.get('splitGroups') || []).forEach(function (group) {
+    var roles = splitGroupRoles(group);
+    if (roles && roles.driverId === driver.id) roles.workerIds.forEach(function (id) { currentIds.add(id); });
+  });
+  all.sort(function (a, b) { return (currentIds.has(b.id) ? 1 : 0) - (currentIds.has(a.id) ? 1 : 0) ||
+    (Number(b.workerGeneration) || 0) - (Number(a.workerGeneration) || 0); });
+  return { items: all, currentIds: currentIds };
+}
+function configuredGroup(driver) {
+  if (!driver) return null;
+  var groups = store.get('splitGroups') || [];
+  for (var i = 0; i < groups.length; i++) {
+    var roles = splitGroupRoles(groups[i]);
+    if (roles && roles.version === 2 && roles.driverId === driver.id && roles.workerIds.length) return groups[i];
+  }
+  return null;
+}
+function presentationSource(container, driver, connectionErrorBinding) {
+  var frame = container && container.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
+  // A read-only connection error may outlive the child's committed binding.
+  // Validate the recorded source against current metadata and the attached
+  // document, without granting it action authority or accepting new replies.
+  var unavailable = connectionErrorBinding && !store.get('connected') && container && !container.hidden && driver &&
+    frame && frame.clayPane && frame.clayPane.source === frame.contentWindow && frame.clayPane.document === frame.contentDocument &&
+    samePaneTarget(connectionErrorBinding, paneTarget(store.snap(), sessions(), driver.id));
+  var binding = unavailable ? connectionErrorBinding : live && live.binding;
+  if (!driver || !frame || !binding || (!unavailable && (!live || !live.ready || !livePaneBinding(frame) ||
+      live.sessionId !== driver.id || live.ownerId !== (store.get('myUserId') || null) || live.projectSlug !== store.get('currentSlug'))) ||
+      frame.dataset.sessionId !== String(driver.id) || frame.dataset.sessionOriginId !== driver.sessionOriginId ||
+      binding.sessionOriginId !== driver.sessionOriginId) return null;
+  var view = (store.get('projectSplitViews') || []).find(function (item) { return item.id === store.get('projectSplitViewActiveId'); });
+  var inView = !!(view && view.sessions.some(function (session) { return session.id === driver.id && session.sessionOriginId === driver.sessionOriginId; }));
+  var inSingleton = !view && store.get('projectSplitViewSingletonOrigin') === driver.sessionOriginId;
+  return inView || inSingleton ? { frame: frame, live: live, binding: binding, view: view, singleton: inSingleton } : null;
+}
+export function workerRemovalTarget(container, driverOrigin, workerOrigin, generation) {
+  var driver = exactDriver(driverOrigin), worker = exactWorker(driver, workerOrigin, generation);
+  var source = presentationSource(container, driver);
+  if (!worker || worker.hidden || !driver || driver.hidden || (driver.ownerId || null) !== (store.get('myUserId') || null) ||
+      document.hidden || !source || !store.get('connected') || !container.isConnected || container.hidden || container.inert ||
+      source.frame.hidden || source.frame.inert || store.get('permissions') && store.get('permissions').sessionDelete === false) return null;
+  return { projectSlug: store.get('currentSlug'), ownerId: store.get('myUserId') || null, driverId: driver.id,
+    driverOriginId: driverOrigin, workerId: worker.id, workerOriginId: workerOrigin, generation: generation,
+    bindingGeneration: source.binding.generation, bindingRequestId: source.binding.requestId,
+    viewRevision: store.get('projectSplitViewRevision'), socketGeneration: store.get('projectSplitViewSocketGeneration') };
+}
+function popover() { return document.getElementById("split-view-worker-popover"); }
+function close(returnFocus) {
+  var state = store.get('splitViewWorkerConversation');
+  if (!state) return;
+  var socket = getWs();
+  if (state.subscriptionId && socket && socket === state.socket && socket.readyState === 1) {
+    try { socket.send(JSON.stringify({ type: 'split_worker_conversation_request', watch: false,
+      requestId: state.subscriptionId, parentSessionOriginId: state.driverOriginId,
+      workerSessionOriginId: state.workerOriginId, generation: state.generation })); } catch (_error) {}
+  }
+  if (state.fillTimer) clearTimeout(state.fillTimer);
+  if (state.requestTimer) clearTimeout(state.requestTimer);
+  store.set({ splitViewWorkerConversation: null });
+  var element = popover(); if (element) element.remove();
+  if (returnFocus) {
+    var chip = document.querySelector('.split-pane[data-session-origin="' + CSS.escape(state.driverOriginId) + '"] [data-worker-origin="' + CSS.escape(state.workerOriginId) + '"]');
+    if (chip && chip.isConnected && !chip.closest('.split-pane').hidden) chip.focus();
+  }
+}
+function position(element, anchor) {
+  if (!element || !anchor || !anchor.isConnected) return;
+  var rect = anchor.getBoundingClientRect(), width = Math.min(430, window.innerWidth - 20), height = Math.min(440, window.innerHeight - 24);
+  element.style.width = width + "px"; element.style.height = height + "px";
+  element.style.left = Math.max(10, Math.min(rect.left, window.innerWidth - width - 10)) + "px";
+  element.style.top = Math.max(10, Math.min(rect.bottom + 6, window.innerHeight - height - 10)) + "px";
+}
+function requestPage(state, before, append, refresh) {
+  var current = store.get('splitViewWorkerConversation');
+  if (!state || !current || state.requestId !== current.requestId || current.inFlight || workerCursorKey(before) === null || !ensurePopover()) return;
+  state = store.get('splitViewWorkerConversation');
+  if (append && workerCursorKey(before) !== workerCursorKey(state.nextBefore)) return;
+  if (state.fillTimer) clearTimeout(state.fillTimer);
+  var ws = getWs();
+  if (!store.get('connected') || !ws || ws.readyState !== 1) {
+    store.set({ splitViewWorkerConversation: Object.assign({}, state, { status: "error", error: "Worker conversation is unavailable while disconnected.", append: false }) });
+    renderContent(); return;
+  }
+  var requestId = "worker-read-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 9);
+  var subscribe = !state.subscriptionId || !state.subscriptionConfirmed;
+  var pending = Object.assign({}, state, { subscriptionId: subscribe ? requestId : state.subscriptionId, requestId: requestId, socket: ws, projectSlug: store.get('currentSlug'), ownerId: store.get('myUserId') || null,
+    socketGeneration: store.get('projectSplitViewSocketGeneration') || 0, status: "loading", error: null, inFlight: true, fillTimer: null, requestedBefore: before == null ? null : before, append: append === true, refreshing: refresh === true, refreshPending: false });
+  pending.requestTimer = setTimeout(function () {
+    var current = store.get('splitViewWorkerConversation');
+    if (!current || current.requestId !== requestId || !current.inFlight) return;
+    store.set({ splitViewWorkerConversation: Object.assign({}, current, { status: 'error', inFlight: false, append: false,
+      requestTimer: null, error: 'Worker conversation request timed out. Scroll up or retry to load it again.' }) });
+    renderContent();
+  }, 15000);
+  store.set({ splitViewWorkerConversation: pending }); renderContent();
+  var last = refresh && state.messages[state.messages.length - 1];
+  var after = last && Number.isInteger(last.recordIndex) && Number.isInteger(last.end) ? { index: last.recordIndex, offset: last.end } : undefined;
+  try {
+    ws.send(JSON.stringify({ type: "split_worker_conversation_request", requestId: requestId,
+      parentSessionOriginId: state.driverOriginId, workerSessionOriginId: state.workerOriginId,
+      generation: state.generation, before: before, after: after, watch: subscribe ? true : undefined }));
+  } catch (_error) {
+    var current = store.get('splitViewWorkerConversation');
+    if (current && current.requestId === requestId) {
+      clearTimeout(current.requestTimer);
+      store.set({ splitViewWorkerConversation: Object.assign({}, current, { status: "error", error: "Worker conversation request could not be sent.", inFlight: false, append: false }) });
+      renderContent();
+    }
+  }
+}
+function open(chip, driver, worker) {
+  var existing = store.get('splitViewWorkerConversation');
+  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",
+    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();
+  var element = popover(); position(element, chip);
+  requestPage(state, undefined, false);
+  var closeButton = element && element.querySelector('[aria-label="Close Worker conversation"]'); if (closeButton) closeButton.focus();
+}
+function ensurePopover() {
+  var state = store.get('splitViewWorkerConversation');
+  var element = popover();
+  if (!state) { if (element) element.remove(); return; }
+  var driver = exactDriver(state.driverOriginId), worker = exactWorker(driver, state.workerOriginId, state.generation);
+  var sourcePane = document.querySelector('.split-pane[data-session-origin="' + CSS.escape(state.driverOriginId) + '"]');
+  var source = presentationSource(sourcePane, driver, state.status === 'error' && state.sourceBinding);
+  if (!driver || !worker || !source || sourcePane.hidden || !state.sourceBinding || !samePaneBinding(source.binding || source.live && source.live.binding, state.sourceBinding) ||
+      source.view && store.get('projectSplitViewFocusedOrigin') && store.get('projectSplitViewFocusedOrigin') !== state.driverOriginId) {
+    close(false); return;
+  }
+  if (!element) {
+    element = document.createElement("section"); element.id = "split-view-worker-popover"; element.className = "split-view-worker-popover";
+    element.setAttribute("role", "dialog"); element.setAttribute("aria-label", "Read-only Worker conversation"); document.body.appendChild(element);
+    var header = document.createElement("header"); header.className = "split-view-worker-popover-header";
+    var title = document.createElement("strong"); title.className = "worker-popover-title"; header.appendChild(title);
+    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);
+    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);
+  }
+  return element;
+}
+function renderContent() {
+  var state = store.get('splitViewWorkerConversation'), element = ensurePopover();
+  if (!state || !element) return;
+  var title = element.querySelector('.worker-popover-title'), source = element.querySelector('.split-view-worker-popover-source');
+  var body = element.querySelector('.split-view-worker-popover-body'), footer = element.querySelector('.split-view-worker-popover-footer');
+  if (title) title.textContent = state.workerTitle;
+  if (source) source.textContent = state.driverTitle + " · " + state.workerTitle + " · Gen " + state.generation;
+  var footerFocused = footer && footer.contains(document.activeElement);
+  if (body && (state.renderedMessages !== state.messages || !state.messages.length)) {
+    var anchor = state.prepend ? captureWorkerAnchor(body) : null;
+    var disclosures = captureWorkerDisclosures(body);
+    var followTail = body.scrollHeight - body.clientHeight - body.scrollTop < 48;
+    var oldTop = body.scrollTop, wasFocused = document.activeElement === body;
+    body.textContent = "";
+    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);
+    restoreWorkerDisclosures(body, disclosures);
+    if ((state.initialPage || state.liveRefresh && followTail) && state.status === 'ready') body.scrollTop = body.scrollHeight;
+    else if (anchor) restoreWorkerAnchor(body, anchor);
+    else body.scrollTop = oldTop;
+    if (wasFocused) body.focus({ preventScroll: true });
+  }
+  if (body) store.set({ splitViewWorkerConversation: Object.assign({}, state, { renderedMessages: state.messages, prepend: false, liveRefresh: false,
+    initialPage: state.status === 'ready' ? false : state.initialPage }) });
+  if (footer) {
+    footer.textContent = state.status === 'error' ? 'Read-only conversation' : state.refreshing ? 'Updating live conversation…' : state.subscriptionConfirmed ? 'Read-only · Live updates' : 'Read-only conversation';
+    if (state.status === "error") { var status = document.createElement('span'); status.setAttribute('role', 'status'); status.textContent = state.error || "Conversation is unavailable."; footer.appendChild(status); }
+    var status = document.createElement('span'); status.className = 'split-view-worker-page-status'; status.setAttribute('role', 'status');
+    status.textContent = state.inFlight ? (state.refreshing ? 'Receiving Worker activity…' : state.messages.length ? 'Loading earlier messages…' : 'Loading conversation…') : state.hasMore ? 'Scroll up for earlier messages' : state.messages.length ? 'Beginning of conversation' : '';
+    footer.appendChild(status);
+    if (state.status === 'error') {
+      var retry = document.createElement('button'); retry.type = 'button'; retry.textContent = 'Retry loading conversation';
+      retry.addEventListener('click', function () { var current = store.get('splitViewWorkerConversation'); if (current) requestPage(current, current.requestedBefore, current.messages.length > 0); });
+      footer.appendChild(retry);
+    }
+  }
+  if (footerFocused) { var nextFocus = footer.querySelector('button') || body; if (nextFocus) nextFocus.focus({ preventScroll: true }); }
+  refreshIcons();
+  scheduleWorkerFill(body);
+}
+function loadEarlier(body, intentional) {
+  var state = store.get('splitViewWorkerConversation');
+  if (!shouldLoadWorkerPage(state, body, intentional)) return;
+  requestPage(state, state.nextBefore, true);
+}
+function scheduleWorkerFill(body) {
+  var state = store.get('splitViewWorkerConversation');
+  if (!shouldLoadWorkerPage(state, body, false) || state.fillTimer) return;
+  var requestId = state.requestId;
+  var timer = setTimeout(function () {
+    var current = store.get('splitViewWorkerConversation');
+    if (!current || current.requestId !== requestId || current.fillTimer !== timer || !body.isConnected) return;
+    store.set({ splitViewWorkerConversation: Object.assign({}, current, { fillTimer: null }) });
+    loadEarlier(body, false);
+  }, 120);
+  store.set({ splitViewWorkerConversation: Object.assign({}, state, { fillTimer: timer }) });
+}
+function anchorChip(state) {
+  if (!state) return null;
+  return document.querySelector('.split-pane[data-session-origin="' + CSS.escape(state.driverOriginId) + '"] [data-worker-origin="' + CSS.escape(state.workerOriginId) + '"]');
+}
+function reanchorPopover() {
+  var state = store.get('splitViewWorkerConversation');
+  if (state) position(popover(), anchorChip(state));
+}
+export function handleSplitWorkerConversation(message) {
+  var state = store.get('splitViewWorkerConversation');
+  if (!state || !store.get('connected') || !message || message.type !== "split_worker_conversation" || state.socket !== getWs() || state.projectSlug !== store.get('currentSlug') ||
+      state.ownerId !== (store.get('myUserId') || null) || state.socketGeneration !== (store.get('projectSplitViewSocketGeneration') || 0) || message.requestId !== state.requestId ||
+      message.parentSessionOriginId !== state.driverOriginId || message.workerSessionOriginId !== state.workerOriginId || message.generation !== state.generation) return false;
+  var driver = exactDriver(state.driverOriginId), sourcePane = document.querySelector('.split-pane[data-session-origin="' + CSS.escape(state.driverOriginId) + '"]');
+  var source = presentationSource(sourcePane, driver);
+  if (!exactWorker(driver, state.workerOriginId, state.generation) || !source || !state.sourceBinding || !samePaneBinding(source.live.binding, state.sourceBinding)) { close(false); return true; }
+  if (!state.inFlight || state.status !== 'loading' || !Object.prototype.hasOwnProperty.call(message, 'pageBefore') || workerCursorKey(message.pageBefore) !== workerCursorKey(state.requestedBefore)) return false;
+  clearTimeout(state.requestTimer);
+  var error = message.error || null;
+  if (!error && (!Array.isArray(message.messages) || message.hasMore && !workerCursorAdvances(state.requestedBefore, message.nextBefore))) error = 'Worker history page did not advance. Retry loading conversation.';
+  var incoming = error ? [] : message.messages;
+  var messages = error ? state.messages : state.append ? incoming.concat(state.messages || []) : incoming.slice();
+  if (!error && state.refreshing && incoming.length) {
+    var first = incoming[0];
+    messages = state.messages.filter(function (item) {
+      return item.recordIndex < first.recordIndex || item.recordIndex === first.recordIndex && item.end <= first.start;
+    }).concat(incoming);
+  }
+  if (!error && state.refreshing && !incoming.length) messages = state.messages;
+  var refreshAgain = state.refreshPending || message.moreRecent === true;
+  store.set({ splitViewWorkerConversation: Object.assign({}, state, { status: error ? 'error' : 'ready', error: error,
+    messages: messages, subscriptionConfirmed: !error || state.subscriptionConfirmed, inFlight: false, requestTimer: null, nextBefore: error || state.refreshing && state.messages.length ? state.nextBefore : message.nextBefore,
+    hasMore: error || state.refreshing && state.messages.length ? state.hasMore : message.hasMore === true,
+    liveRefresh: !error && state.refreshing, refreshing: false, refreshPending: false, prepend: !error && state.append, append: false }) });
+  renderContent();
+  if (refreshAgain && !error) refreshWorkerConversation();
+  return true;
+}
+function refreshWorkerConversation() {
+  var state = store.get('splitViewWorkerConversation');
+  if (!state || !store.get('connected') || !ensurePopover()) return;
+  if (state.inFlight) {
+    if (!state.refreshPending) store.set({ splitViewWorkerConversation: Object.assign({}, state, { refreshPending: true }) });
+    return;
+  }
+  requestPage(state, undefined, false, true);
+}
+export function handleWorkerConversationChanged(message) {
+  var state = store.get('splitViewWorkerConversation');
+  if (!state || !store.get('connected') || state.socket !== getWs() || state.projectSlug !== store.get('currentSlug') ||
+      state.ownerId !== (store.get('myUserId') || null) || state.socketGeneration !== (store.get('projectSplitViewSocketGeneration') || 0) ||
+      message.subscriptionId !== state.subscriptionId || message.parentSessionOriginId !== state.driverOriginId ||
+      message.workerSessionOriginId !== state.workerOriginId || message.generation !== state.generation || !ensurePopover()) return false;
+  document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
+    if (chip.dataset.workerOrigin === state.workerOriginId) {
+      var dot = chip.querySelector('.split-view-worker-dot');
+      if (dot) dot.dataset.state = message.isProcessing ? 'working' : 'ready';
+    }
+  });
+  refreshWorkerConversation();
+  return true;
+}
+export function handleWorkerSessionActivity(message) {
+  var worker = sessions().find(function (item) { return item.id === message.id && item.sessionRole === 'worker'; });
+  if (!worker || !store.get('connected')) return;
+  document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
+    if (chip.dataset.workerOrigin !== worker.sessionOriginId) return;
+    var dot = chip.querySelector('.split-view-worker-dot');
+    if (dot) { dot.dataset.state = 'working'; dot.setAttribute('aria-label', 'Worker activity received'); }
+  });
+  var state = store.get('splitViewWorkerConversation');
+  if (state && state.workerOriginId === worker.sessionOriginId && state.generation === worker.workerGeneration) refreshWorkerConversation();
+}
+export function renderPaneWorkers(container, driver) {
+  if (!container || !driver) return;
+  reconcileWorkerRemoval(container);
+  var root = container.querySelector('.split-view-workers');
+  var data = workersFor(driver);
+  if (!root) { root = document.createElement("div"); root.className = "split-view-workers"; root.setAttribute("aria-label", "Worker conversations");
+    var frame = container.querySelector('.split-pane-frame'); if (frame) container.insertBefore(root, frame); else container.appendChild(root); }
+  var source = presentationSource(container, driver);
+  root.hidden = !source || data.items.length === 0;
+  if (!source) { if (store.get('splitViewWorkerConversation') && store.get('splitViewWorkerConversation').driverOriginId === driver.sessionOriginId) ensurePopover(); return; }
+  root.textContent = "";
+  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);
+    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 +
+      (current ? "" : " · Archived · Gen " + worker.workerGeneration) + " · " + (worker.title || "Worker");
+    button.setAttribute("aria-label", button.title + " conversation");
+    var dot = document.createElement("span"); dot.className = "split-view-worker-dot"; dot.dataset.state = !store.get('connected') ? 'disconnected' : worker.isProcessing ? 'working' : 'ready';
+    dot.setAttribute('aria-label', !store.get('connected') ? 'Disconnected' : worker.isProcessing ? 'Worker is working' : 'Worker is idle');
+    if (VENDOR_AVATARS[worker.vendor]) {
+      var vendorIcon = document.createElement("img"); vendorIcon.className = "split-view-worker-vendor";
+      vendorIcon.src = VENDOR_AVATARS[worker.vendor]; vendorIcon.alt = ""; vendorIcon.setAttribute("aria-hidden", "true"); button.appendChild(vendorIcon);
+    }
+    var name = document.createElement("span"); name.className = "split-view-worker-name"; name.textContent = modelLabel; button.appendChild(name);
+    var identity = document.createElement("span"); identity.className = "split-view-worker-identity";
+    identity.textContent = "Split Worker #" + worker.id; button.appendChild(identity);
+    if (!current) {
+      var generation = document.createElement("span"); generation.className = "split-view-worker-generation";
+      generation.textContent = "Gen " + worker.workerGeneration; button.appendChild(generation);
+    }
+    button.dataset.workerSessionId = String(worker.id);
+    button.appendChild(dot);
+    var state = store.get('splitViewWorkerConversation');
+    button.setAttribute("aria-expanded", state && state.driverOriginId === driver.sessionOriginId && state.workerOriginId === worker.sessionOriginId ? "true" : "false");
+    button.addEventListener("click", function () { if (presentationSource(container, exactDriver(driver.sessionOriginId))) open(button, driver, worker); }); pill.appendChild(button); root.appendChild(pill);
+    appendWorkerRemoval(pill, button, container, driver, worker);
+  });
+  var activeView = (store.get('projectSplitViews') || []).find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
+  var group = configuredGroup(driver);
+  if ((activeView && activeView.sessions.some(function (session) { return session.sessionOriginId === driver.sessionOriginId; }) || source.singleton) && group) {
+    var controls = document.createElement('button'); controls.type = 'button'; controls.className = 'split-view-worker-controls';
+    controls.textContent = 'Controls'; controls.setAttribute('aria-label', 'Open Worker controls for ' + (driver.title || 'Driver session'));
+    controls.dataset.driverOrigin = driver.sessionOriginId; controls.dataset.groupId = String(group.id);
+    controls.addEventListener('click', function (event) {
+      event.preventDefault(); event.stopPropagation();
+      var frame = container.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
+      var currentSource = presentationSource(container, exactDriver(driver.sessionOriginId));
+      if (!frame || !live || !live.ready || !currentSource || !frame.isConnected || frame.dataset.sessionOriginId !== driver.sessionOriginId ||
+          Number(frame.dataset.sessionId) !== driver.id || live.sessionId !== driver.id || live.binding.sessionOriginId !== driver.sessionOriginId ||
+          frame.dataset.projectSlug !== store.get('currentSlug') || configuredGroup(exactDriver(driver.sessionOriginId)) !== group) return;
+      document.dispatchEvent(new CustomEvent('clay-split-view-open-worker-controls', { detail: {
+        driverOriginId: driver.sessionOriginId, driverId: driver.id, groupId: group.id, projectSlug: store.get('currentSlug'),
+        ownerId: driver.ownerId || null, workerOrigins: group.members.map(function (id) {
+          var member = sessions().find(function (session) { return session.id === id; }); return member && member.sessionRole === 'worker' ? member.sessionOriginId : null;
+        })
+      } }));
+    });
+    root.appendChild(controls);
+  }
+  var conversation = store.get('splitViewWorkerConversation');
+  if (conversation) ensurePopover();
+}
+document.addEventListener("keydown", function (event) { if (event.key === "Escape" && store.get('splitViewWorkerConversation')) { event.preventDefault(); event.stopImmediatePropagation(); close(true); } }, true);
+document.addEventListener("click", function (event) {
+  if (!store.get('splitViewWorkerConversation')) return;
+  var element = popover(); if (element && element.contains(event.target)) return;
+  if (event.target.closest && event.target.closest('.split-view-worker-chip')) return;
+  var interactive = event.target.closest && event.target.closest('button, a, input, textarea, select, [contenteditable="true"], [tabindex]:not([tabindex="-1"])');
+  close(!interactive);
+}, true);
+window.addEventListener("resize", reanchorPopover);
+window.addEventListener("scroll", function (event) {
+  var element = popover();
+  if (element && event.target && (event.target === element || event.target.nodeType && element.contains(event.target))) return;
+  reanchorPopover();
+}, true);
+store.subscribe(function (state, previous) {
+  if (state.paneBindingSessions !== previous.paneBindingSessions || state.connected !== previous.connected) {
+    document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
+      var worker = sessions().find(function (item) { return item.sessionOriginId === chip.dataset.workerOrigin; });
+      var dot = chip.querySelector('.split-view-worker-dot');
+      if (dot) dot.dataset.state = !state.connected ? 'disconnected' : worker && worker.isProcessing ? 'working' : 'ready';
+    });
+    if (state.connected && state.splitViewWorkerConversation) refreshWorkerConversation();
+  }
+  if (state.splitViewWorkerConversation && (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId ||
+      state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration)) {
+    close(false);
+    return;
+  }
+  if (state.splitViewWorkerConversation && (state.projectSplitViewActiveId !== previous.projectSplitViewActiveId || state.projectSplitViews !== previous.projectSplitViews ||
+      state.projectSplitViewSingletonOrigin !== previous.projectSplitViewSingletonOrigin || state.splitPanes !== previous.splitPanes ||
+      state.projectSplitViewFocusedOrigin !== previous.projectSplitViewFocusedOrigin || state.paneBindingSessions !== previous.paneBindingSessions)) {
+    if (state.projectSplitViewActiveId !== previous.projectSplitViewActiveId || state.projectSplitViewFocusedOrigin !== previous.projectSplitViewFocusedOrigin ||
+        state.paneBindingSessions !== previous.paneBindingSessions) ensurePopover();
+    else renderContent();
+  }
+  if (state.connected !== previous.connected && state.connected === false) {
+    var conversation = state.splitViewWorkerConversation;
+    if (conversation) {
+      if (conversation.requestTimer) clearTimeout(conversation.requestTimer);
+      if (conversation.fillTimer) clearTimeout(conversation.fillTimer);
+      store.set({ splitViewWorkerConversation: Object.assign({}, conversation, { status: "error", error: "Worker conversation connection was lost.", inFlight: false, append: false }) });
+      renderContent();
+    }
+  }
+});

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

@@ -22,8 +22,13 @@ import { handlePaneIssueMessage } from './pane-issue-bridge.js';
 import { handlePaneFileMessage, revealFilesPanel } from './pane-file-bridge.js';
 import { openFile } from './filebrowser.js';
 import { restoreSplitGroup, reconcileSplitIdentity } from './split-group-restore.js';
+import { clearRetainedPanes, releaseRetainedPanes, disposePaneChildren, preserveReconnectingPresentation } from './split-pane-retention.js';
 import { reconcileSplitPanes, splitPaneForSession } from './split-pane-reconciler.js';
-import { createSplitPane, updateSplitPaneMetadata, updatePaneContextChip, updatePaneFullAccessButton } from './split-pane-renderer.js';
+import { createSplitPane, updateSplitPaneMetadata, updatePaneContextChip, updatePaneFullAccessButton, handlePaneSearchMessage } from './split-pane-renderer.js';
+import { initSplitViewPresentations, renderPresentationSplitView } from './split-view-presentations.js';
+import { currentSingletonPresentation } from './split-view-singleton.js';
+import { initSplitViewWorkerControls } from './split-view-worker-controls.js';
+import { createSidebarReopenButton, syncSidebarReopenButton } from './split-view-shell-controls.js';
 
 var host = null;
 var nativeApp = null;
@@ -34,6 +39,7 @@ var draggedSessionId = null;
 var stickyNotesContainer = null;
 var stickyNotesHome = null;
 var stickyNotesAnchor = null;
+var shellSidebarExpand = null;
 function placeStickyNotesOverlay(splitActive) {
   if (!stickyNotesContainer || !stickyNotesHome || !mainPanelsEl) return;
   if (splitActive) {
@@ -164,6 +170,10 @@ function handlePaneMessage(event) {
   if (handlePaneIssueMessage(event, host)) return;
   if (handlePaneBrowserMessage(event, host)) return;
   if (handlePaneFileMessage(event, host, openFile, revealFilesPanel)) return;
+  if (msg.type === "clay-pane-search-status" || msg.type === "clay-pane-search-open") {
+    handlePaneSearchMessage(event, host);
+    return;
+  }
   if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");
   for (var i = 0; i < frames.length; i++) {
@@ -175,18 +185,37 @@ function handlePaneMessage(event) {
 }
 
 function renderSplit(split) {
-  if (!host || !nativeApp) return;
+  if (!host || !nativeApp || preserveReconnectingPresentation(host)) return;
+  var state = store.snap(), singleton = !split && !state.splitPanes && !state.projectSplitViewActiveId && currentSingletonPresentation(state, getCachedSessions());
+  syncSidebarReopenButton(shellSidebarExpand,
+    singleton || split && split.panes && split.panes.length >= 2 || !!state.projectSplitViewActiveId);
+  // The exact singleton presentation is verified before the redundant cache catches up.
+  if (singleton) { renderPresentationSplitView(); return; }
+  if (split && split.panes && store.get('projectSplitViewActiveId')) {
+    store.set({ projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null, projectSplitViewPreviewTree: null });
+  }
+  var expectedPresentationContext = [store.get('currentSlug') || "", store.get('currentProjectOwnerId') || "", store.get('myUserId') || "", store.get('projectSplitViewSocketGeneration') || 0].join("|");
+  if (!(split && split.panes) && store.get('projectSplitViewActiveId') && store.get('projectSplitViewContextKey') === expectedPresentationContext) {
+    renderPresentationSplitView();
+    return;
+  }
+  if (split && split.panes) releaseRetainedPanes(host);
+  else clearRetainedPanes(host);
   var panes = split && split.panes;
-  if (!panes || panes.length < 2 || panes.length > 3) {
+  if (!panes || panes.length < 2) {
+    if (shellSidebarExpand) shellSidebarExpand.hidden = true;
     placeStickyNotesOverlay(false);
     var frames = host.querySelectorAll('.split-pane-frame');
     var retain = frames.length > 0 && frames.length <= 3 && Array.from(frames).every(function (frame) { return frame.dataset.projectSlug === store.get('currentSlug') && frame.clayPane; });
     if (retain) Array.from(frames).forEach(function (frame) { frame.clayPane.suspend(); });
-    else host.innerHTML = "";
-    host.classList.remove("visible");
+    else { disposePaneChildren(host); host.innerHTML = ""; }
+    host.classList.remove("visible", "split-view-canvas");
+    delete host.dataset.singlePane;
+    delete host.dataset.positioned;
     nativeApp.classList.remove("split-native-hidden");
     return;
   }
+  if (shellSidebarExpand) shellSidebarExpand.hidden = !document.getElementById("layout").classList.contains("sidebar-collapsed");
   placeStickyNotesOverlay(true);
   nativeApp.classList.add("split-native-hidden");
   host.classList.add("visible");
@@ -223,7 +252,7 @@ function openSplit(side, draggedId) {
 
 export function openGroup(group) {
   if (!canLeavePanes()) return false;
-  if (!group || !Array.isArray(group.members) || group.members.length < 2 || group.members.length > 3) return false;
+  if (!group || !Array.isArray(group.members) || group.members.length < 2) return false;
   var memberIds = splitGroupMemberIds(group);
   if (memberIds.length !== group.members.length) return false;
   for (var mi = 0; mi < memberIds.length; mi++) if (!sessionById(memberIds[mi])) return false;
@@ -273,7 +302,7 @@ export function openWorkerWithDriver(worker) {
 
 // Keep the public entry shared by connection, sidebar and identity hydration.
 export function maybeRestoreSplitGroup() {
-  restoreSplitGroup(openGroup);
+  restoreSplitGroup();
 }
 
 export function separateGroup(group) {
@@ -326,7 +355,8 @@ function createDropOverlay(mainPanels) {
 }
 
 function handleSessionDragStart(event) {
-  if (store.get('splitPanes')) return;
+  if (event.defaultPrevented || store.get('projectSplitViewDrag') || store.get('projectSplitViewSingletonOrigin') ||
+      store.get('projectSplitViewActiveId') || store.get('splitPanes')) return;
   var item = event.target.closest("[data-session-id][draggable='true']");
   if (!item) return;
   draggedSessionId = parseInt(item.dataset.sessionId, 10);
@@ -337,26 +367,27 @@ function handleSessionDragStart(event) {
   if (draggedSessionId) showDropOverlay();
 }
 
-function openDriverGroup(driver) {
-  var state = store.snap();
-  if (!driver || driver.sessionRole !== "driver" || !isCurrentProjectSessionReady(state, getWs())) return false;
-  var groups = state.splitGroups || [];
+function keepCurrentDriverGroup(driver) {
+  if (!isCurrentProjectSessionReady(store.snap(), getWs())) return false;
+  var split = store.get('splitPanes');
+  if (!driver || driver.sessionRole !== "driver" || !split || !split.groupId) return false;
+  var groups = store.get('splitGroups') || [];
   for (var i = 0; i < groups.length; i++) {
-    var group = groups[i];
-    var roles = splitGroupRoles(group);
-    if (!roles || roles.driverId !== driver.id || typeof group.id !== "string" || !group.id) continue;
-    var available = roles.workerIds.every(function (id) {
+    var group = groups[i], roles = splitGroupRoles(group);
+    if (!roles || group.id !== split.groupId || roles.driverId !== driver.id || typeof group.id !== "string" || !group.id) continue;
+    var valid = roles.workerIds.every(function (id) {
       var worker = sessionById(id);
-      return worker && worker.sessionRole === "worker" && worker.parentAvailable === true && worker.parentSessionId === driver.id;
+      return worker && worker.sessionRole === "worker" && worker.parentAvailable === true &&
+        worker.parentSessionId === driver.id && (worker.ownerId || null) === (driver.ownerId || null);
     });
-    // Keep mounted conversations when selecting their Driver again.
-    if (available) return openGroup(group);
+    if (!valid) return false;
+    return openGroup(group);
   }
   return false;
 }
 
 function handleSidebarSessionClick(event) {
-  if (!store.get('splitPanes') || event.button !== 0) return;
+  var state = store.snap(); if ((!state.splitPanes && !currentSingletonPresentation(state, getCachedSessions())) || event.button !== 0) return;
   // This document capture listener runs before a row's bubble handlers. Leave
   // real controls alone so GitHub anchors retain native click, modified-click,
   // and keyboard navigation rather than selecting their owning session.
@@ -370,7 +401,7 @@ function handleSidebarSessionClick(event) {
   if (!canLeavePanes()) return;
   var session = sessionById(sessionId);
   if (session && session.sessionRole === "worker" && openWorkerWithDriver(session)) return;
-  if (openDriverGroup(session)) return;
+  if (keepCurrentDriverGroup(session)) return;
   switchNativeSession(sessionId);
 }
 
@@ -398,9 +429,14 @@ export function initSplitView() {
   host = document.createElement("div");
   host.id = "split-host";
   mainPanels.insertBefore(host, nativeApp.nextSibling);
+  shellSidebarExpand = createSidebarReopenButton();
+  window.addEventListener("resize", function () {
+    syncSidebarReopenButton(shellSidebarExpand, !!host && host.classList.contains("visible"));
+  });
   dropOverlay = createDropOverlay(mainPanels);
 
   window.addEventListener("message", handlePaneMessage);
+  initSplitViewWorkerControls(openGroup);
   document.addEventListener("dragstart", handleSessionDragStart);
   document.addEventListener("dragend", hideDropOverlay);
   document.addEventListener("drop", function (event) {
@@ -411,6 +447,8 @@ export function initSplitView() {
     if (state.authIdentityLoaded && !prev.authIdentityLoaded) queueMicrotask(maybeRestoreSplitGroup);
     if (reconcileSplitIdentity(state, prev, host)) { renderSplit(null); return; }
     if (state.splitPanes !== prev.splitPanes) renderSplit(state.splitPanes);
+    if (state.projectSplitViewActiveId !== prev.projectSplitViewActiveId || state.projectSplitViews !== prev.projectSplitViews ||
+        state.projectSplitViewPreviewTree !== prev.projectSplitViewPreviewTree) renderSplit(state.splitPanes);
     if (state.permissionModePendingByTarget !== prev.permissionModePendingByTarget || state.connected !== prev.connected ||
         state.skipPermsEnabled !== prev.skipPermsEnabled) syncPaneTitles();
     // Switching to a session outside the open split (new_session, palette,
@@ -442,7 +480,7 @@ export function initSplitView() {
           return;
         }
         var projectedIds = splitGroupMemberIds(currentGroup);
-        if (projectedIds.length < 2 || projectedIds.length > 3) return;
+        if (projectedIds.length < 2) return;
         var projectedPanes = projectedIds.map(function (id) { return paneForSession(id); });
         var projectedKey = projectedPanes.map(function (pane) { return pane.slug + "#" + pane.sessionId; }).join("|");
         var currentKey = split.panes.map(function (pane) { return pane.slug + "#" + pane.sessionId; }).join("|");
@@ -456,5 +494,6 @@ export function initSplitView() {
       if (confirmed) store.set({ splitPanes: { groupId: confirmed.id, panes: split.panes } });
     }
   });
+  initSplitViewPresentations(host);
   renderSplit(store.get('splitPanes'));
 }