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

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

@@ -0,0 +1,495 @@
+import { preserveReconnectingPresentation } from './split-pane-retention.js';
+import { layoutScope, currentLayoutScope, presentationTree } from './split-view-layout-scope.js';
+import { validPresentationClose } from './split-view-presentation-close.js';
+import { applyPresentationDrop } from './split-view-presentation-drop.js';
+import { closeSessionContextMenu } from './session-context-menu.js';
+import { openSplitViewMenu, closeSplitViewMenu as closeGroupMenus } from './split-view-sidebar-menu.js';
+import { store } from './store.js';
+import { organizeViewAction } from './split-view-organization.js';
+import { getWs } from './ws-ref.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { renderPresentationView, initPresentationRenderer, hidePresentationView, closePresentationArrange } from './split-view-presentation-renderer.js';
+import { initPresentationDrag, restorePresentationDrag } from './split-view-presentation-drag.js';
+import { detachTuiView } from './session-tui-view.js';
+import { checkComposerDeparture } from './session-rich-drafts.js';
+import { showToast } from './utils.js';
+import { preset, listIds, validateTree, remove, arrangeRegion } from './split-view-layout-client.js';
+import { viewIdForOrigin, updateActiveSession, exactDriverForOrigin, restorablePresentation } from './split-view-presentation-lookup.js';
+import { groupedSessionIds } from './split-group-helpers.js';
+import { handleSplitViewCreateEvent } from './split-view-create-action.js';
+import { initSplitViewCreateMenu } from './split-view-create-menu.js';
+import { currentSingletonPresentation } from './split-view-singleton.js';
+var host = null;
+var nativeApp = null;
+var mainPanels = null;
+var stickyContainer = null;
+var stickyHome = null;
+var stickyAnchor = null;function contextKey(state) {
+  return [state.currentSlug || "", state.currentProjectOwnerId || "", state.myUserId || "", state.projectSplitViewSocketGeneration || 0].join("|");
+}
+function projectReady(state) {
+  return getWs() !== state.splitIdentityBlockedSocket && !state.paneMode && !state.dmMode && state.currentSlug && state.activeProjectSlug === state.currentSlug &&
+    state.sessionListProjectSlug === state.currentSlug && state.authIdentityLoaded && state.connected;
+}
+function resetForContext() {
+  var state = store.snap();
+  var key = contextKey(state);
+  if (state.projectSplitViewContextKey === key) return false;
+  var uncertain = state.projectSplitViewPending ? "Connection or project changed during a Split view change. Refreshing saved state before another change." : "";
+  cleanupTransientInteractions(state);
+  store.set({ projectSplitViews: [], projectSplitViewRevision: 0, projectSplitViewContextKey: key,
+    projectSplitViewHydrated: false, projectSplitViewPending: null, projectSplitViewError: uncertain,
+    projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null, projectSplitViewPreviewTree: null, projectSplitViewStandaloneTarget: null,
+    projectSplitViewDrag: null, projectSplitViewDividerDrag: null, projectSplitViewRequestSocket: null,
+    projectSplitViewRequestGeneration: null, projectSplitViewRequestOwnerId: null, projectSplitViewRequestSlug: null });
+  return true;
+}
+function cleanupTransientInteractions(state) {
+  var drag = state.projectSplitViewDrag, divider = state.projectSplitViewDividerDrag;
+  if (drag) restorePresentationDrag(drag);
+  if (divider && divider.frames) divider.frames.forEach(function (item) { if (item.frame.isConnected) item.frame.style.pointerEvents = item.pointerEvents; });
+  if (drag || divider) {
+    document.body.classList.remove("split-view-resizing");
+    var pointerId = drag ? drag.pointerId : divider.pointerId;
+    try { if (document.documentElement.hasPointerCapture(pointerId)) document.documentElement.releasePointerCapture(pointerId); } catch (error) {}
+  }
+}
+function sendMessage(message) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1 || !projectReady(store.snap())) return false;
+  try { ws.send(JSON.stringify(message)); return true; } catch (error) { return false; }
+}
+export function requestProjectSplitViews() {
+  var state = store.snap();
+  if (!projectReady(state)) return false;
+  resetForContext();
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return false;
+  store.set({ projectSplitViewRequestSocket: ws, projectSplitViewRequestGeneration: state.projectSplitViewSocketGeneration,
+    projectSplitViewRequestOwnerId: state.myUserId || null, projectSplitViewRequestSlug: state.currentSlug });
+  try { ws.send(JSON.stringify({ type: "project_split_views_request" })); return true; } catch (error) { return false; }
+}
+function exactProjectMessage(msg) {
+  var state = store.snap();
+  return !!msg && msg.projectSlug === state.currentSlug && projectReady(state) &&
+    state.projectSplitViewRequestSlug === state.currentSlug && state.projectSplitViewRequestGeneration === state.projectSplitViewSocketGeneration &&
+    state.projectSplitViewRequestOwnerId === (state.myUserId || null) && state.projectSplitViewRequestSocket === getWs();
+}
+function viewExists(views, id) {
+  for (var i = 0; i < (views || []).length; i++) if (views[i].id === id) return views[i];
+  return null;
+}
+function viewSessions(view) {
+  if (!view || !Array.isArray(view.sessions)) return [];
+  var sessions = getCachedSessions() || [], mapped = [];
+  for (var i = 0; i < view.sessions.length; i++) {
+    var ref = view.sessions[i];
+    var session = ref && exactDriverForOrigin(ref.sessionOriginId, sessions);
+    if (!session || session.id !== ref.id || !session.sessionOriginId) return [];
+    mapped.push(session);
+  }
+  return mapped;
+}
+export function handleProjectSplitViews(msg) {
+  if (!exactProjectMessage(msg)) return false;
+  if (!Number.isInteger(msg.revision) || msg.revision < 0 || !Array.isArray(msg.views)) return true;
+  var state = store.snap();
+  if (state.projectSplitViewHydrated && msg.revision < state.projectSplitViewRevision) return true;
+  var nextViews = [];
+  var invalidView = false;
+  msg.views.forEach(function (view) {
+    var ids = view && Array.isArray(view.sessions) ? view.sessions.map(function (session) { return session.sessionOriginId; }) : [];
+    if (ids.length < 2 || ids.length > 8 || viewSessions(view).length !== ids.length || !validateTree(view.tree, ids).ok) invalidView = true;
+    else nextViews.push(view);
+  });
+  if (invalidView) {
+    store.set({ projectSplitViews: [], projectSplitViewHydrated: false, projectSplitViewError: "Saved Split view references are unavailable. Refresh the session list before changing layouts.",
+      projectSplitViewPending: null, projectSplitViewPreviewTree: null, projectSplitViewActiveId: null });
+    renderActive();
+    return true;
+  }
+  var pending = state.projectSplitViewPending;
+  if (state.projectSplitViewDrag || state.projectSplitViewDividerDrag) cleanupTransientInteractions(state);
+  var activeId = state.projectSplitViewActiveId;
+  if (!viewExists(nextViews, activeId)) {
+    var restored = restorablePresentation(state, nextViews, getCachedSessions());
+    if (restored) activeId = restored.id;
+  }
+  var removedActive = activeId && !viewExists(nextViews, activeId) ? activeId : null;
+  var completedPending = pending && pending.awaitingBroadcast && msg.revision >= pending.resultRevision ? pending : null;
+  var readyPending = completedPending ? null : pending;
+  var standaloneTarget = state.projectSplitViewStandaloneTarget || null;
+  if (removedActive && completedPending && completedPending.meta && completedPending.meta.separateViewId === removedActive) {
+    var survivor = exactDriverForOrigin(completedPending.meta.activeOrigin, getCachedSessions());
+    if (survivor) standaloneTarget = { id: survivor.id, origin: survivor.sessionOriginId, previousSessionId: state.activeSessionId, contextKey: contextKey(state) };
+  }
+  store.set({ projectSplitViews: nextViews, projectSplitViewRevision: msg.revision, projectSplitViewHydrated: true,
+    projectSplitViewError: msg.error || "", projectSplitViewStandaloneTarget: standaloneTarget, projectSplitViewActiveId: viewExists(nextViews, activeId) ? activeId : null,
+    projectSplitViewFocusedOrigin: viewExists(nextViews, activeId) ? state.projectSplitViewFocusedOrigin : null,
+    projectSplitViewPending: readyPending, projectSplitViewPreviewTree: readyPending ? state.projectSplitViewPreviewTree : null,
+    projectSplitViewDrag: null });
+  if (removedActive && completedPending && completedPending.meta && completedPending.meta.separateViewId === removedActive) {
+    var target = exactDriverForOrigin(completedPending.meta.activeOrigin, getCachedSessions());
+    if (target) switchToStandalone(target.id);
+  }
+  if (completedPending && completedPending.meta && completedPending.meta.activateCreatedView && completedPending.meta.createdViewId &&
+      viewExists(nextViews, completedPending.meta.createdViewId)) setActiveView(completedPending.meta.createdViewId);
+  if (completedPending && completedPending.meta && completedPending.meta.closedOrigin) {
+    var meta = completedPending.meta;
+    if (store.get('projectSplitViewFocusedOrigin') === meta.closedOrigin) store.set({ projectSplitViewFocusedOrigin: null });
+    var selected = exactDriverForOrigin(meta.closedOrigin, getCachedSessions());
+    var remaining = exactDriverForOrigin(meta.activeOrigin, getCachedSessions());
+    if (selected && remaining && store.get('activeSessionId') === selected.id && !sendMessage({ type: "switch_session", id: remaining.id })) {
+      showToast("Pane removed, but the remaining session could not be selected. Reconnect before continuing.", "error");
+    }
+  }
+  renderActive();
+  return true;
+}
+export function handleProjectSplitViewResult(msg) {
+  var state = store.snap(), pending = state.projectSplitViewPending;
+  if (!pending || !msg || msg.requestId !== pending.requestId ||
+      pending.contextKey !== contextKey(state) || pending.socket !== getWs()) return false;
+  if (!msg.ok) {
+    store.set({ projectSplitViewPending: null, projectSplitViewPreviewTree: null,
+      projectSplitViewError: msg.error || "Split view change was not saved" });
+    showToast(msg.error || "Split view change was not saved", "error");
+    if (msg.code === "conflict" || msg.code === "session" || msg.code === "identity" || msg.code === "folder") {
+      store.set({ projectSplitViewHydrated: false });
+      requestProjectSplitViews();
+    }
+    renderActive();
+    return true;
+  }
+  if (!Number.isInteger(msg.revision) || msg.revision < pending.expectedRevision) {
+    store.set({ projectSplitViewPending: null, projectSplitViewPreviewTree: null,
+      projectSplitViewHydrated: false, projectSplitViewError: "Split view confirmation was incomplete. Refreshing saved state." });
+    requestProjectSplitViews();
+    renderActive();
+    return true;
+  }
+  var nextMeta = pending.meta;
+  if (nextMeta && nextMeta.activateCreatedView && msg.view && msg.view.id) nextMeta = Object.assign({}, nextMeta, { createdViewId: msg.view.id });
+  store.set({ projectSplitViewPending: Object.assign({}, pending, { awaitingBroadcast: true, resultRevision: msg.revision, meta: nextMeta }),
+    projectSplitViewError: "" });
+  return true;
+}
+export function organizePresentationView(id, revision, folderId, favorite) {
+  var view = viewExists(store.get('projectSplitViews'), id);
+  if (!view || view.revision !== revision) return false;
+  return mutation('project_split_view_organize', { id: id, expectedViewRevision: revision, projectSlug: store.get('currentSlug'), folderId: folderId, favorite: favorite });
+}
+function mutation(type, body, meta) {
+  var state = store.snap();
+  if (!projectReady(state) || !state.projectSplitViewHydrated || state.projectSplitViewError || state.projectSplitViewPending) return false;
+  var requestId = "split-view-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);
+  var ws = getWs();
+  var message = Object.assign({ type: type, requestId: requestId, expectedRevision: state.projectSplitViewRevision }, body || {});
+  var pending = { requestId: requestId, type: type, socket: ws, contextKey: contextKey(state), expectedRevision: state.projectSplitViewRevision, meta: meta || null,
+    awaitingBroadcast: false, resultRevision: null };
+  store.set({ projectSplitViewPending: pending, projectSplitViewError: "" });
+  if (!sendMessage(message)) {
+    store.set({ projectSplitViewPending: null, projectSplitViewError: "Split view change could not be sent. Refresh before trying again." });
+    showToast("Split view change could not be sent. Refresh before trying again.", "error");
+    return false;
+  }
+  return true;
+}
+function setActiveView(id, preferredOrigin) {
+  var state = store.snap(), view = viewExists(state.projectSplitViews, id);
+  if (!view) return false;
+  try {
+    if (state.splitPanes || state.projectSplitViewActiveId) checkMountedPaneDrafts();
+    else checkComposerDeparture();
+  } catch (error) { showToast(error.message, "warn"); return false; }
+  if (!state.splitPanes && !state.projectSplitViewActiveId) detachTuiView();
+  var activeOrigin = preferredOrigin && view.sessions.some(function (session) { return session.sessionOriginId === preferredOrigin; }) ? preferredOrigin : view.activeSessionOriginId;
+  var activeSession = viewSessions(view).filter(function (session) { return session.sessionOriginId === activeOrigin; })[0];
+  if (activeSession && store.get('activeSessionId') !== activeSession.id) {
+    store.set({ projectSplitViewSwitching: true });
+    if (!sendMessage({ type: "switch_session", id: activeSession.id })) { store.set({ projectSplitViewSwitching: false }); return false; }
+  }
+  store.set({ projectSplitViewActiveId: id, projectSplitViewFocusedOrigin: null, projectSplitViewPreviewTree: null, splitPanes: null });
+  renderActive();
+  return true;
+}
+function checkMountedPaneDrafts() {
+  if (!host) return;
+  Array.from(host.querySelectorAll('.split-pane-frame')).forEach(function (frame) { if (frame.clayPane) frame.clayPane.checkDraft(); });
+}
+function switchToStandalone(sessionId) {
+  var state = store.snap();
+  try {
+    if (state.projectSplitViewActiveId || state.splitPanes) checkMountedPaneDrafts();
+    else checkComposerDeparture();
+  } catch (error) { showToast(error.message, "warn"); return false; }
+  if (!sendMessage({ type: "switch_session", id: sessionId })) {
+    showToast("Session switch could not be sent. The current Split view is still open.", "error");
+    return false;
+  }
+  store.set({ projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null, projectSplitViewPreviewTree: null, projectSplitViewSwitching: false, splitPanes: null });
+  renderActive();
+  return true;
+}
+function renderActive() {
+  if (!host || !nativeApp || preserveReconnectingPresentation(host)) return;
+  var state = store.snap(), view = viewExists(state.projectSplitViews, state.projectSplitViewActiveId);
+  if (state.splitIdentityBlockedSocket === getWs()) { hidePresentationView(); return; }
+  if (!view) {
+    var restored = state.projectSplitViewHydrated && restorablePresentation(state, state.projectSplitViews, getCachedSessions());
+    if (restored) {
+      store.set({ projectSplitViewActiveId: restored.id, projectSplitViewSingletonOrigin: null, projectSplitViewFocusedOrigin: null });
+      return;
+    }
+    var singleton = currentSingletonPresentation(state, getCachedSessions());
+    if (singleton) {
+      store.set({ projectSplitViewSingletonOrigin: singleton.origin });
+      if (stickyContainer && mainPanels) mainPanels.appendChild(stickyContainer);
+      renderPresentationView(singleton.view, { id: singleton.origin }, [singleton.session]);
+      return;
+    }
+    if (state.projectSplitViewSingletonOrigin) store.set({ projectSplitViewSingletonOrigin: null });
+    hidePresentationView();
+    if (stickyContainer && stickyHome) stickyHome.insertBefore(stickyContainer, stickyAnchor && stickyAnchor.parentNode === stickyHome ? stickyAnchor : null);
+    return;
+  }
+  if (state.projectSplitViewSingletonOrigin) store.set({ projectSplitViewSingletonOrigin: null });
+  var sessions = viewSessions(view);
+  var tree = presentationTree(view);
+  var ids = listIds(tree);
+  if (sessions.length !== view.sessions.length || ids.length < 2 || ids.length > 8 || !validateTree(tree, ids).ok) return;
+  if (stickyContainer && mainPanels) mainPanels.appendChild(stickyContainer);
+  renderPresentationView(view, tree, sessions);
+}
+function onClick(event) {
+  var target = event.target;
+  if (target.closest('.split-view-menu')) return;
+  var suppressed = store.get('projectSplitViewSuppressClick');
+  if (suppressed && Date.now() <= suppressed.until && event.pointerId === suppressed.pointerId) {
+    var clickedRow = target.closest(".session-item[data-session-id], .session-loop-child[data-session-id]"), clickedPane = target.closest(".split-pane");
+    var matchesSource = suppressed.sourceElement && (target === suppressed.sourceElement || suppressed.sourceElement.contains(target)) ||
+      clickedRow && Number(clickedRow.dataset.sessionId) === suppressed.sourceSessionId ||
+      clickedPane && clickedPane.querySelector('.split-pane-frame') && clickedPane.querySelector('.split-pane-frame').dataset.sessionOriginId === suppressed.targetOrigin;
+    if (matchesSource) { event.preventDefault(); event.stopImmediatePropagation(); store.set({ projectSplitViewSuppressClick: null }); return; }
+  }
+  var menu = target.closest(".split-view-arrange"); if (menu) return;
+  var splitGroup = target.closest(".split-view-group[data-split-view-id]");
+  if (splitGroup) {
+    var view = viewExists(store.get('projectSplitViews'), splitGroup.dataset.splitViewId); if (!view) return;
+    var more = target.closest(".split-view-group-more");
+    if (more) { event.preventDefault(); event.stopImmediatePropagation(); toggleGroupMenu(splitGroup, more); return; }
+    var option = target.closest("[data-split-view-action]");
+    if (option) { event.preventDefault(); event.stopImmediatePropagation(); runGroupAction(view, option.dataset.splitViewAction, splitGroup); return; }
+    var child = target.closest(".session-item[data-session-id], .session-loop-child[data-session-id]");
+    if (child && target.closest("button, a, input, textarea, select, [contenteditable='true']")) return;
+    var open = target.closest(".split-view-group-open");
+    if (open || child) {
+      event.preventDefault(); event.stopImmediatePropagation();
+      var session = child && exactDriverForOrigin(child.dataset.controlSessionOrigin, getCachedSessions());
+      if (child && !session) session = (getCachedSessions() || []).find(function (item) { return item.id === Number(child.dataset.sessionId); });
+      if (!setActiveView(view.id, session && session.sessionOriginId)) return;
+      if (session && session.sessionOriginId !== view.activeSessionOriginId) updateActiveSession(view, session.sessionOriginId, mutation);
+      return;
+    }
+  }
+  if (store.get('projectSplitViewActiveId') && target.closest('.split-group-item[data-split-group-id]')) {
+    store.set({ projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null }); return;
+  }
+  var row = target.closest(".session-item[data-session-id], .session-loop-child[data-session-id]"); if (row && store.get('projectSplitViewActiveId')) {
+    var session = (getCachedSessions() || []).find(function (item) { return item.id === Number(row.dataset.sessionId); });
+    var membershipViewId = session && viewIdForOrigin(session.sessionOriginId); if (membershipViewId) {
+      event.preventDefault(); event.stopImmediatePropagation(); var membershipView = viewExists(store.get('projectSplitViews'), membershipViewId);
+      if (membershipView && setActiveView(membershipView.id, session.sessionOriginId) && session.sessionOriginId !== membershipView.activeSessionOriginId) updateActiveSession(membershipView, session.sessionOriginId, mutation);
+      return;
+    }
+    if (session && (session.sessionRole === "worker" || groupedSessionIds(store.get('splitGroups') || []).has(session.id))) {
+      store.set({ projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null });
+      return;
+    }
+    if (session) { event.preventDefault(); event.stopImmediatePropagation(); switchToStandalone(session.id); }
+  }
+  if (!target.closest(".split-view-group-more")) {
+    var groupFocusTarget = target.closest("button, a, input, textarea, select, [tabindex]:not([tabindex='-1'])");
+    closeGroupMenus(!groupFocusTarget);
+  }
+  if (!menu) {
+    var arrangeFocusTarget = target.closest("button, a, input, textarea, select, [tabindex]:not([tabindex='-1'])");
+    closePresentationArrange(!arrangeFocusTarget);
+  }
+}
+function onContextMenu(event) {
+  var target = event.target;
+  if (!target || !target.closest) return;
+  var heading = target.closest('.split-view-group-heading'), group = heading && heading.closest('.split-view-group[data-split-view-id]');
+  if (!group || target.closest('input, textarea, [contenteditable="true"]') ||
+      !projectReady(store.snap()) || !viewExists(store.get('projectSplitViews'), group.dataset.splitViewId)) return;
+  var anchor = group.querySelector('.split-view-group-more');
+  if (!anchor) return;
+  event.preventDefault(); event.stopImmediatePropagation();
+  closeSessionContextMenu(false); closePresentationArrange(false);
+  toggleGroupMenu(group, anchor, event.clientX || event.clientY ? { x: event.clientX, y: event.clientY } : null);
+}
+function toggleGroupMenu(group, anchor, point) {
+  openSplitViewMenu(group, anchor, point, runGroupAction);
+}
+function runGroupAction(view, action, root) {
+  closeGroupMenus(false);
+  if (action === 'favorite' || action === 'folder') { organizeViewAction(view, action); return; }
+  if (action === "rename") { startRename(root, view); return; }
+  if (action === "separate") {
+    if (view.id === store.get('projectSplitViewActiveId')) {
+      try { checkMountedPaneDrafts(); } catch (error) { showToast(error.message, "warn"); return; }
+    }
+    var selectedOrigin = view.activeSessionOriginId;
+    mutation("project_split_view_separate", { id: view.id }, { separateViewId: view.id, activeOrigin: selectedOrigin });
+  }
+}
+function startRename(root, view) {
+  var name = root.querySelector('.split-view-group-name'), heading = root.querySelector('.split-view-group-heading');
+  if (!name || !heading || root.querySelector('.split-view-group-name-input')) return;
+  var input = document.createElement("input"); input.type = "text"; input.className = "split-view-group-name-input"; input.maxLength = 80;
+  input.value = view.name; input.setAttribute("aria-label", "Rename Split view"); name.replaceWith(input); input.focus(); input.select();
+  var finished = false;
+  function restore(returnFocus) {
+    if (finished) return;
+    finished = true;
+    if (!input.isConnected) return;
+    var span = document.createElement("span"); span.className = "split-view-group-name"; span.textContent = view.name; input.replaceWith(span);
+    if (returnFocus) { var trigger = root.querySelector('.split-view-group-open'); if (trigger) trigger.focus(); }
+  }
+  function showInlineError(message) {
+    var error = root.querySelector('.split-view-group-error');
+    if (!error) return;
+    error.textContent = message;
+    error.hidden = false;
+    input.setAttribute("aria-invalid", "true");
+    input.removeAttribute("aria-describedby");
+  }
+  input.addEventListener("click", function (event) { event.stopPropagation(); });
+  var inlineError = root.querySelector('.split-view-group-error');
+  if (inlineError) inlineError.hidden = true;
+  input.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") { event.preventDefault(); restore(true); return; }
+    if (event.key === "Enter") {
+      event.preventDefault(); var next = input.value.trim();
+      if (!next || next.length > 80) { showInlineError("Use a name from 1 to 80 characters."); return; }
+      input.removeAttribute("aria-invalid");
+      var currentError = root.querySelector('.split-view-group-error'); if (currentError) currentError.hidden = true;
+      if (!mutation("project_split_view_rename", { id: view.id, name: next })) { showInlineError(store.get('projectSplitViewError') || "Rename could not be saved."); return; }
+      restore();
+    }
+  });
+  input.addEventListener("blur", restore);
+}
+function onKeyDown(event) {
+  if (event.key === "Escape") closePresentationArrange();
+}
+function onArrangement(event) {
+  var view = viewExists(store.get('projectSplitViews'), store.get('projectSplitViewActiveId'));
+  if (!view || !event.detail) return;
+  var source = view.sessions.find(function (session) { return session.sessionOriginId === event.detail.sessionOriginId; });
+  if (!source || !exactDriverForOrigin(source.sessionOriginId, getCachedSessions())) return;
+  var nextTree = null, nextLayout = view.layout;
+  if (event.detail.preset) {
+    nextLayout = event.detail.preset;
+    var orderedIds = [source.sessionOriginId].concat(listIds(view.tree).filter(function (origin) { return origin !== source.sessionOriginId; }));
+    nextTree = preset(orderedIds, nextLayout);
+  }
+  else if (event.detail.position) {
+    var arranged = arrangeRegion(view.tree, source.sessionOriginId, event.detail.position);
+    if (!arranged.ok) { showToast(arranged.reason === "quarter-requires-three" ? "Quarter layouts require at least three sessions." : "This arrangement is unavailable.", "warn"); return; }
+    nextTree = arranged.tree;
+  }
+  if (!nextTree || !validateTree(nextTree, view.sessions.map(function (session) { return session.sessionOriginId; })).ok) return;
+  store.set({ projectSplitViewPreviewTree: nextTree, projectSplitViewPreviewScope: layoutScope(view), projectSplitViewFocusedOrigin: null }); renderActive();
+  if (!mutation("project_split_view_update", { id: view.id, sessionOrigins: listIds(nextTree), tree: nextTree,
+    layout: nextLayout, activeSessionOriginId: source.sessionOriginId })) {
+    store.set({ projectSplitViewPreviewTree: null }); renderActive();
+  }
+}
+function onResize(event) {
+  if (!event.detail || !currentLayoutScope(event.detail.scope) || event.detail.viewId !== event.detail.scope.viewId) return;
+  var view = viewExists(store.get('projectSplitViews'), event.detail.viewId);
+  if (!view) return;
+  if (store.get('projectSplitViewPending') || !mutation("project_split_view_update", { id: view.id, sessionOrigins: event.detail.ids, tree: event.detail.tree,
+    layout: view.layout, activeSessionOriginId: view.activeSessionOriginId })) { store.set({ projectSplitViewPreviewTree: null }); renderActive(); }
+}
+function onClosePane(event) {
+  var view = viewExists(store.get('projectSplitViews'), store.get('projectSplitViewActiveId'));
+  if (!view || !event.detail || !validPresentationClose(event.detail)) return;
+  var session = (getCachedSessions() || []).find(function (item) { return item.id === Number(event.detail.sessionId); });
+  if (!session || !view.sessions.some(function (item) { return item.sessionOriginId === session.sessionOriginId; })) return;
+  try { checkMountedPaneDrafts(); } catch (error) { showToast(error.message, "warn"); return; }
+  var origins = view.sessions.map(function (item) { return item.sessionOriginId; }).filter(function (origin) { return origin !== session.sessionOriginId; });
+  if (origins.length < 2) {
+    var remaining = view.sessions.filter(function (item) { return item.sessionOriginId !== session.sessionOriginId; })[0];
+    if (remaining) mutation("project_split_view_separate", { id: view.id }, { separateViewId: view.id, activeOrigin: remaining.sessionOriginId });
+    return;
+  }
+  var nextTree = remove(view.tree, session.sessionOriginId);
+  if (!nextTree || !validateTree(nextTree, origins).ok) return;
+  var nextActive = view.activeSessionOriginId === session.sessionOriginId ? origins[0] : view.activeSessionOriginId;
+  mutation("project_split_view_update", { id: view.id, sessionOrigins: origins, tree: nextTree,
+    layout: view.layout, activeSessionOriginId: nextActive }, { closedOrigin: session.sessionOriginId, activeOrigin: nextActive });
+}
+function onFocus(event) {
+  var view = viewExists(store.get('projectSplitViews'), store.get('projectSplitViewActiveId'));
+  if (!view) return;
+  var source = event.detail && view.sessions.find(function (session) { return session.sessionOriginId === event.detail.sessionOriginId; });
+  if (event.detail && event.detail.focused && !source) return;
+  store.set({ projectSplitViewFocusedOrigin: event.detail && event.detail.focused ? source.sessionOriginId : null });
+  renderActive();
+}
+function init(hostElement) {
+  host = hostElement; nativeApp = document.getElementById("app"); mainPanels = document.getElementById("main-panels");
+  stickyContainer = document.getElementById("sticky-notes-container");
+  if (stickyContainer) { stickyHome = stickyContainer.parentNode; stickyAnchor = stickyContainer.nextSibling; }
+  initPresentationRenderer(host);
+  initPresentationDrag(host, function (drag, target) { applyPresentationDrop(drag, target, mutation, checkMountedPaneDrafts); });
+  initSplitViewCreateMenu();
+  document.addEventListener('clay-split-view-create', function (event) { handleSplitViewCreateEvent(event, mutation, checkMountedPaneDrafts); });
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("contextmenu", onContextMenu, true);
+  document.addEventListener("clay-split-view-arrange", onArrangement);
+  document.addEventListener("clay-split-view-resize", onResize);
+  document.addEventListener("clay-split-view-focus", onFocus);
+  document.addEventListener("clay-split-view-close-pane", onClosePane);
+  document.addEventListener("keydown", onKeyDown, true);
+  store.subscribe(function (state, previous) {
+    if ((previous.projectSplitViewDrag && !state.projectSplitViewDrag) ||
+        (previous.projectSplitViewDividerDrag && !state.projectSplitViewDividerDrag)) cleanupTransientInteractions(previous);
+    if (state.projectSplitViewStandaloneTarget && state.activeSessionId !== previous.activeSessionId) store.set({ projectSplitViewStandaloneTarget: null });
+    var contextChanged = resetForContext();
+    if (previous.connected && !state.connected) {
+      var pending = state.projectSplitViewPending;
+      store.set({ projectSplitViews: [], projectSplitViewRevision: 0, projectSplitViewHydrated: false,
+        projectSplitViewPending: null, projectSplitViewError: pending ? "Connection changed during a Split view change. Saved state will be refreshed after reconnect." : "",
+        projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null, projectSplitViewPreviewTree: null, projectSplitViewRequestSocket: null });
+    }
+    var becameReady = projectReady(state) && (!projectReady(previous) || contextChanged);
+    if (becameReady) requestProjectSplitViews();
+    if (state.projectSplitViews !== previous.projectSplitViews || state.projectSplitViewActiveId !== previous.projectSplitViewActiveId || state.activeSessionId !== previous.activeSessionId || state.sessionOriginId !== previous.sessionOriginId || state.splitPanes !== previous.splitPanes ||
+        state.projectSplitViewPreviewTree !== previous.projectSplitViewPreviewTree || state.currentSlug !== previous.currentSlug ||
+        state.paneBindingSessions !== previous.paneBindingSessions || state.sessionActivatedProjectSlug !== previous.sessionActivatedProjectSlug) renderActive();
+    if (state.activeSessionId !== previous.activeSessionId && state.projectSplitViewActiveId) {
+      var activeView = viewExists(state.projectSplitViews, state.projectSplitViewActiveId);
+      if (activeView && !activeView.sessions.some(function (session) { return session.id === state.activeSessionId; })) {
+        store.set({ projectSplitViewActiveId: null, projectSplitViewPreviewTree: null });
+      }
+    }
+  });
+  var changed = resetForContext();
+  if (changed && projectReady(store.snap())) requestProjectSplitViews();
+}
+export function initSplitViewPresentations(hostElement) { init(hostElement); }
+export function renderPresentationSplitView() { renderActive(); }
+export function presentationViewForSidebar(viewId) { return viewExists(store.get('projectSplitViews'), viewId); }
+
+// Canonical navigation uses the same draft guard and view renderer as human entry.
+export function applyReviewedSplitView(target) {
+  var view = viewExists(store.get('projectSplitViews'), target.view.id);
+  if (!projectReady(store.snap()) || store.get('projectSplitViewPending') || !view || JSON.stringify(view) !== JSON.stringify(target.view)) return false;
+  if (!setActiveView(view.id, view.activeSessionOriginId)) return false;
+  onFocus({ detail: { focused: !!target.focusOrigin, sessionOriginId: target.focusOrigin } });
+  return true;
+}

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

@@ -0,0 +1,28 @@
+import { toggleSidebarCollapse } from './sidebar.js';
+
+export function syncSidebarReopenButton(button, active) {
+  if (!button) return;
+  var layout = document.getElementById("layout");
+  var desktop = !window.matchMedia || window.matchMedia("(min-width: 769px)").matches;
+  button.hidden = !layout || !desktop || !active || !layout.classList.contains("sidebar-collapsed");
+}
+
+export function createSidebarReopenButton() {
+  var target = document.querySelector("#top-bar .top-bar-left-pills");
+  if (!target) return null;
+  var button = document.createElement("button");
+  button.id = "sidebar-shell-expand-btn";
+  button.type = "button";
+  button.title = "Open sidebar";
+  button.setAttribute("aria-label", "Open sidebar");
+  button.setAttribute("aria-controls", "sidebar-column");
+  button.setAttribute("aria-expanded", "false");
+  button.innerHTML = '<i data-lucide="panel-left-open"></i>';
+  button.hidden = true;
+  button.addEventListener("click", function () {
+    if (button.hidden) return;
+    toggleSidebarCollapse();
+  });
+  target.prepend(button);
+  return button;
+}

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

@@ -0,0 +1,42 @@
+import { getWs } from './ws-ref.js';
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { closeSessionContextMenu, mountSessionContextMenu, positionSessionContextMenu } from './session-context-menu.js';
+import { closeFolderMenu } from './session-folder-context.js';
+
+export function closeSplitViewMenu(returnFocus) {
+  var current = store.get('sessionContextMenu');
+  if (current && current.el.classList.contains('split-view-menu')) closeSessionContextMenu(returnFocus);
+}
+
+export function openSplitViewMenu(group, anchor, point, onAction) {
+  var view = (store.get('projectSplitViews') || []).find(function (item) { return item.id === group.dataset.splitViewId; });
+  if (!view) return;
+  var surface = group.dataset.splitViewSurface || 'desktop';
+  var socket = getWs(), generation = store.get('projectSplitViewSocketGeneration');
+  var slug = store.get('currentSlug'), viewer = store.get('myUserId'), projection = group.dataset.splitViewProjection;
+  function currentRoot() {
+    var live = (store.get('projectSplitViews') || []).find(function (item) { return item.id === view.id && item.revision === view.revision && item.name === view.name; });
+    if (!live || socket !== getWs() || generation !== store.get('projectSplitViewSocketGeneration') || slug !== store.get('currentSlug') || viewer !== store.get('myUserId') || !store.get('connected')) return null;
+    function matches(root) { return root.isConnected && root.dataset.splitViewId === view.id && root.dataset.splitViewProjection === projection && (root.dataset.splitViewSurface || 'desktop') === surface; }
+    if (matches(group)) return group;
+    var roots = Array.from(document.querySelectorAll('.split-view-group[data-split-view-id]')).filter(matches);
+    return roots.length === 1 ? roots[0] : null;
+  }
+  closeFolderMenu(false); closeSessionContextMenu(false);
+  var menu = document.createElement('div'); menu.className = 'session-ctx-menu split-view-menu';
+  [['favorite', view.favorite ? 'Remove from Favorites' : 'Add to Favorites', 'star'], ['folder', 'Move to folder', 'folder-input'], ['rename', 'Rename', 'pencil'], ['separate', 'Separate', 'columns-2']].forEach(function (entry) {
+    var button = document.createElement('button'); button.className = 'session-ctx-item'; button.dataset.splitViewAction = entry[0];
+    button.innerHTML = iconHtml(entry[2]) + ' <span>' + entry[1] + '</span>';
+    button.addEventListener('click', function (event) {
+      event.stopPropagation(); var root = currentRoot(); closeSessionContextMenu(false);
+      if (root) onAction(view, entry[0], root);
+    });
+    menu.appendChild(button);
+  });
+  document.body.appendChild(menu);
+  mountSessionContextMenu(menu, anchor, null, { resolveAnchor: function () {
+    var root = currentRoot(); return root && root.querySelector('.split-view-group-more');
+  } });
+  refreshIcons(); positionSessionContextMenu(menu, anchor, point);
+}

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

@@ -0,0 +1,30 @@
+import { store } from './store.js';
+import { appendViewOrganization } from './split-view-organization.js';
+import { iconHtml } from './icons.js';
+
+export function renderPresentationSplitViewItem(view, members, renderSessionItem, containerId, surface) {
+  var root = document.createElement("div"), activeId = store.get('projectSplitViewActiveId');
+  var fullName = view.nameMode === "automatic" ? members.map(function (session) { return session.title || "Session"; }).join(" + ") : view.name;
+  var nameCharacters = Array.from(fullName);
+  var displayName = nameCharacters.length > 80 ? nameCharacters.slice(0, 79).join("") + "…" : fullName;
+  root.className = "split-view-group"; root.dataset.splitViewId = view.id; root.dataset.splitViewProjection = containerId || 'unfiled'; root.dataset.splitViewSurface = surface || 'desktop';
+  root.dataset.active = activeId === view.id ? "true" : "false"; root.title = fullName;
+  var heading = document.createElement("div"); heading.className = "split-view-group-heading";
+  var open = document.createElement("button"); open.type = "button"; open.className = "split-view-group-open";
+  open.setAttribute("aria-expanded", activeId === view.id ? "true" : "false");
+  open.setAttribute("aria-label", "Open Split view " + fullName); open.title = fullName;
+  open.innerHTML = iconHtml("columns-2");
+  var name = document.createElement("span"); name.className = "split-view-group-name"; name.textContent = displayName; open.appendChild(name);
+  var count = document.createElement("span"); count.className = "split-view-group-count"; count.textContent = String(members.length); open.appendChild(count);
+  heading.appendChild(open);
+  appendViewOrganization(heading, view);
+  var more = document.createElement("button"); more.type = "button"; more.className = "split-view-group-more";
+  more.setAttribute("aria-label", "Split view options " + fullName); more.setAttribute("aria-haspopup", "menu"); more.setAttribute("aria-expanded", "false");
+  more.innerHTML = iconHtml("ellipsis"); heading.appendChild(more); root.appendChild(heading);
+  var children = document.createElement("div"); children.className = "split-view-group-children";
+  for (var i = 0; containerId !== 'favorites' && i < members.length; i++) children.appendChild(renderSessionItem(members[i]));
+  root.appendChild(children);
+  var error = document.createElement("div"); error.className = "split-view-group-error";
+  error.textContent = store.get('projectSplitViewError') || ""; error.hidden = !error.textContent; root.appendChild(error);
+  return root;
+}

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

@@ -0,0 +1,21 @@
+import { getWs } from './ws-ref.js';
+// Build the transient one-Driver pane model without creating saved view state.
+export function singletonPresentation(state, sessions) {
+  if (!state || state.splitPanes) return null;
+  var target = state.projectSplitViewStandaloneTarget;
+  var validTarget = target && target.previousSessionId === state.activeSessionId && target.contextKey === state.projectSplitViewContextKey;
+  var candidate = (sessions || []).find(function (session) {
+    return validTarget ? session.id === target.id && session.sessionOriginId === target.origin && (session.ownerId || null) === (state.myUserId || null) : session.id === state.activeSessionId;
+  });
+  if (!candidate || !candidate.sessionOriginId || candidate.sessionRole === "worker" || candidate.isMate === true || candidate.isTui === true ||
+      (candidate.runtimeMode || candidate.mode || "gui") !== "gui") return null;
+  return { origin: candidate.sessionOriginId, view: { id: "single:" + candidate.sessionOriginId,
+    sessions: [candidate], activeSessionOriginId: candidate.sessionOriginId }, session: candidate };
+}
+
+export function currentSingletonPresentation(state, sessions) {
+  if (!state || state.splitIdentityBlockedSocket && state.splitIdentityBlockedSocket === getWs() || state.paneMode || state.dmMode || !state.currentSlug || state.activeProjectSlug !== state.currentSlug ||
+      state.sessionListProjectSlug !== state.currentSlug || !state.authIdentityLoaded || !state.connected ||
+      state.projectSplitViewContextKey !== [state.currentSlug || "", state.currentProjectOwnerId || "", state.myUserId || "", state.projectSplitViewSocketGeneration || 0].join("|")) return null;
+  return singletonPresentation(state, sessions);
+}