clay-server 5.5.0-beta.1 → 5.5.0-beta.3

package/lib/public/modules/settings-shell.js

@@ -1,3 +1,4 @@
+import { activateSettingsSections, deactivateSettingsSections } from './settings-section-nav.js';
 // Unified full-screen settings: one shell for Personal, Project and Server
 // settings. Scope modules register a controller; the shell owns routing,
 // access, project target binding, focus, close restoration and draft guards.
@@ -134,6 +135,7 @@ function applyRoute(route, focus) {
   var resolved = resolveRoute(route, shell.access);
   var ctrl = controllers[resolved.scope];
   if (!ctrl) return;
+  deactivateSettingsSections();
   if (shell.scope && shell.scope !== resolved.scope && controllers[shell.scope].leave) controllers[shell.scope].leave();
   var entering = shell.scope !== resolved.scope;
   shell.scope = resolved.scope;
@@ -152,7 +154,8 @@ function applyRoute(route, focus) {
   markActivePage(page);
   store.set({ settingsLastRoute: { scope: resolved.scope, page: page, slug: shell.slug } });
   enhanceSettingsSelects(root); refreshIcons(root);
-  if (focus) focusHeading(ctrl);
+  if (focus && !resolved.anchor) focusHeading(ctrl);
+  activateSettingsSections(page, resolved.anchor);
 }
 
 function onScopeSelect(scope) {
@@ -160,12 +163,18 @@ function onScopeSelect(scope) {
   guard('scope', function () { applyRoute({ scope: scope, page: shell.pages[scope], slug: scope === 'project' ? currentRoute().slug : null }, true); });
 }
 function onPageSelect(page) {
-  if (page === shell.pages[shell.scope]) { focusHeading(controller()); return; }
+  var route = resolveRoute({scope:shell.scope,page:page}, shell.access);
+  if (route.page === shell.pages[shell.scope]) {
+    if (!route.anchor) focusHeading(controller());
+    activateSettingsSections(route.page, route.anchor); return;
+  }
   guard('page', function () {
     var ctrl = controller();
-    shell.pages[shell.scope] = page; ctrl.activate(page, { access: shell.access, scope: shell.scope });
-    markActivePage(page); store.set({ settingsLastRoute: { scope: shell.scope, page: page, slug: shell.slug } });
-    focusHeading(ctrl);
+    deactivateSettingsSections();
+    shell.pages[shell.scope] = route.page; ctrl.activate(route.page, {access:shell.access,scope:shell.scope});
+    markActivePage(route.page); store.set({settingsLastRoute:{scope:shell.scope,page:route.page,slug:shell.slug}});
+    if (!route.anchor) focusHeading(ctrl);
+    activateSettingsSections(route.page, route.anchor);
   }, shell.pages[shell.scope]);
 }
 // A project switch retargets only the settings view, never the workspace.
@@ -181,7 +190,8 @@ export function navigateSettings(route) {
   var resolved = resolveRoute(route, shell.access);
   if (resolved.scope === shell.scope && resolved.page === shell.pages[shell.scope] && (resolved.scope !== 'project' || !route.slug || route.slug === shell.slug)) {
     setShellStatus(redirectNote(resolved), resolved.redirected ? 'error' : undefined);
-    focusHeading(controller()); return;
+    if (!resolved.anchor) focusHeading(controller());
+    activateSettingsSections(resolved.page, resolved.anchor); return;
   }
   guard(resolved.scope === shell.scope ? (route.slug && route.slug !== shell.slug ? 'project' : 'page') : 'scope', function () { applyRoute(route, true); }, shell.pages[shell.scope]);
 }
@@ -251,6 +261,7 @@ export function closeSettings(opts) {
   function finish() {
     shell.token += 1; binding.invalidate();
     var ctrl = controller();
+    deactivateSettingsSections();
     if (ctrl && ctrl.leave) ctrl.leave();
     Object.keys(controllers).forEach(function (id) { if (controllers[id].close) controllers[id].close(); });
     root.classList.add('hidden');

package/lib/public/modules/sidebar-projects.js

@@ -1,3 +1,4 @@
+import { reviewWorktreeRemoval } from './worktree-controls.js';
 // sidebar-projects.js - Project icon strip, context menus, emoji picker, drag-and-drop, worktree modal
 // Extracted from sidebar.js (PR-36)
 
@@ -433,8 +434,9 @@ export function showProjectCtxMenu(anchorEl, slug, name, icon, position, options
   }
 
   var isWorktree = slug.indexOf("--") !== -1;
-  var canRemoveTarget = !isWorktree || options.canRemoveWorktree !== false;
-  var canDeleteTarget = canRemoveTarget && (!store.get('permissions') || store.get('permissions').deleteProject !== false);
+  var ownsWorktree = !isWorktree || !store.get('isMultiUserMode') || !!(targetProject && targetProject.projectOwnerId === store.get('myUserId'));
+  if (!ownsWorktree) iconItem.disabled = true;
+  var canDeleteTarget = ownsWorktree && (!store.get('permissions') || store.get('permissions').deleteProject !== false);
   if (!isWorktree || canDeleteTarget) {
     var sep2 = document.createElement("div");
     sep2.className = "project-ctx-separator";
@@ -465,15 +467,26 @@ export function showProjectCtxMenu(anchorEl, slug, name, icon, position, options
     var deleteItem = document.createElement("button");
     deleteItem.className = "project-ctx-item project-ctx-delete";
     deleteItem.setAttribute("role", "menuitem");
-    deleteItem.innerHTML = iconHtml("trash-2") + " <span>" + (isWorktree ? "Remove Worktree" : "Remove Project") + "</span>";
+    deleteItem.innerHTML = iconHtml("trash-2") + " <span>" + (isWorktree ? "Exclude worktree (keep files)" : "Remove Project") + "</span>";
     deleteItem.addEventListener("click", function (e) {
       e.stopPropagation();
       closeProjectCtxMenu();
-      if (getWs() && store.get('connected')) {
+      if (isWorktree) reviewWorktreeRemoval(slug, "exclude", anchorEl);
+      else if (getWs() && store.get('connected')) {
         getWs().send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name }));
       }
     });
     menu.appendChild(deleteItem);
+    if (isWorktree) {
+      var diskItem = document.createElement("button");
+      diskItem.className = "project-ctx-item project-ctx-delete";
+      diskItem.setAttribute("role", "menuitem");
+      diskItem.innerHTML = iconHtml("trash-2") + " <span>Delete worktree…</span>";
+      diskItem.addEventListener("click", function (event) {
+        event.stopPropagation(); closeProjectCtxMenu(); reviewWorktreeRemoval(slug, "delete", anchorEl);
+      });
+      menu.appendChild(diskItem);
+    }
   }
 
   document.body.appendChild(menu);
@@ -1103,7 +1116,7 @@ export function renderIconStrip(projects, currentSlug) {
         } else {
           var abbrev = document.createElement("span");
           abbrev.className = "wt-branch-abbrev";
-          abbrev.textContent = getProjectAbbrev(wt.name);
+          abbrev.innerHTML = iconHtml("git-branch");
           wtEl.appendChild(abbrev);
         }
 
@@ -1124,13 +1137,13 @@ export function renderIconStrip(projects, currentSlug) {
           });
         })(wt.slug);
 
-        (function (slug, name, elem, external) {
+        (function (slug, name, elem) {
           elem.addEventListener("contextmenu", function (e) {
             e.preventDefault();
             e.stopPropagation();
-            showProjectCtxMenu(elem, slug, name, null, null, { shareTargetSlug: true, canRemoveWorktree: !external });
+            showProjectCtxMenu(elem, slug, name, null, null, { shareTargetSlug: true });
           });
-        })(wt.slug, wt.name, wtEl, isExternal);
+        })(wt.slug, wt.name, wtEl);
 
         if (!isWtActive && (wt.pendingPermissions > 0 || getPendingTuiAttention(wt.slug) > 0)) {
           wtEl.classList.add("has-pending-perm");
@@ -1250,7 +1263,8 @@ function createMobileProjectItem(p, currentSlug, isWorktree) {
     abbrev.textContent = p.icon;
     parseEmojis(abbrev);
   } else {
-    abbrev.textContent = getProjectAbbrev(p.name);
+    if (p.isWorktree) abbrev.innerHTML = iconHtml("git-branch");
+    else abbrev.textContent = getProjectAbbrev(p.name);
   }
   el.appendChild(abbrev);
 

package/lib/public/modules/sidebar-sessions.js

@@ -1,3 +1,4 @@
+import { appendRemoveFromView } from './split-view-member-actions.js';
 import { appendGithubWork } from './session-github.js';
 // sidebar-sessions.js - Session list, search, presence, countdown, CLI picker
 // Extracted from sidebar.js (PR-35)
@@ -290,6 +291,8 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData, po
   menu.appendChild(renameItem);
 
 
+  appendRemoveFromView(menu, sessionData, currentAnchor);
+
   // Session visibility toggle (only the session owner can change)
   if (!isMateWorkspace(store.snap()) && store.get('isMultiUserMode') && sessionData && !sessionData.isMate && sessionData.ownerId && sessionData.ownerId === store.get('myUserId')) {
     var currentVis = (sessionData && sessionData.sessionVisibility) || "private";

package/lib/public/modules/split-pane-force-stop.js

@@ -0,0 +1,47 @@
+import { iconHtml } from './icons.js';
+import { livePaneBinding, samePaneBinding } from './pane-binding.js';
+import { syncPaneHeaderState } from './split-pane-header-state.js';
+import { showConfirm, hideConfirm } from './app-misc.js';
+
+export function createPaneForceStop(paneEl, frame) {
+  var button = document.createElement('button');
+  button.type = 'button'; button.className = 'split-pane-force-stop';
+  button.setAttribute('aria-label', 'Force stop session'); button.title = 'Force stop session and all its Workers';
+  button.innerHTML = iconHtml('power');
+  button.addEventListener('click', function (event) {
+    event.stopPropagation();
+    if (!syncPaneHeaderState(paneEl) || button.disabled || !frame.contentWindow || !frame.clayPane || !livePaneBinding(frame)) return;
+    var binding = frame.clayPane.identity().binding, sourceDocument = frame.contentDocument, settled = false;
+    var title = paneEl.querySelector('.split-pane-title');
+    var text = 'Force stop all work in ' + (title && title.textContent || 'this session') + ' and all of its Workers? Queued messages will be paused. The pane and conversation history will stay open. Commands or external requests already sent may still be running.';
+    function current() {
+      return paneEl.isConnected && !paneEl.hidden && !paneEl.inert && frame.contentDocument === sourceDocument &&
+        syncPaneHeaderState(paneEl) && !button.disabled && livePaneBinding(frame, { paneBinding: binding }) && samePaneBinding(binding, frame.clayPane.identity().binding);
+    }
+    var modal = document.getElementById('confirm-modal'), panel = modal && modal.querySelector('.confirm-dialog');
+    var cancel = document.getElementById('confirm-cancel'), ok = document.getElementById('confirm-ok');
+    function cleanup() {
+      settled = true;
+      window.removeEventListener('keydown', onKey, true);
+      if (panel) { panel.removeAttribute('role'); panel.removeAttribute('aria-modal'); panel.removeAttribute('aria-labelledby'); }
+      if (current()) button.focus();
+    }
+    function onKey(event) {
+      if (event.key === 'Escape') { event.preventDefault(); event.stopImmediatePropagation(); hideConfirm(); return; }
+      if (event.key !== 'Tab') return;
+      event.preventDefault(); event.stopImmediatePropagation();
+      var controls = [cancel, ok].filter(Boolean), index = controls.indexOf(document.activeElement);
+      controls[(index + (event.shiftKey ? controls.length - 1 : 1)) % controls.length].focus();
+    }
+    showConfirm(text, function () {
+      if (settled) return;
+      var valid = current(); cleanup();
+      if (!valid) return;
+      frame.contentWindow.postMessage({ type: 'clay-pane-force-stop', paneBinding: binding }, window.location.origin);
+    }, 'Force stop all work', true, cleanup);
+    if (panel) { panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-modal', 'true'); panel.setAttribute('aria-labelledby', 'confirm-text'); }
+    window.addEventListener('keydown', onKey, true);
+    if (cancel) cancel.focus();
+  });
+  return button;
+}

package/lib/public/modules/split-pane-header-state.js

@@ -20,7 +20,7 @@ export function syncPaneHeaderState(paneEl) {
   header.setAttribute('aria-busy', ready ? 'false' : 'true');
   header.dataset.paneLoading = ready ? 'false' : 'true';
   header.inert = !ready;
-  var actions = header.querySelectorAll('.split-pane-info, .split-pane-search, .split-pane-context, .split-pane-sidebar, .split-view-arrange-trigger');
+  var actions = header.querySelectorAll('.split-pane-info, .split-pane-force-stop, .split-pane-search, .split-pane-context, .split-pane-sidebar, .split-view-arrange-trigger');
   for (var i = 0; i < actions.length; i++) {
     var action = actions[i];
     if (!ready) {
@@ -31,6 +31,16 @@ export function syncPaneHeaderState(paneEl) {
       delete action.dataset.panePriorDisabled;
     }
   }
+  var force = header.querySelector('.split-pane-force-stop');
+  if (force) {
+    var session = getCachedSessions().find(function (item) { return item.id === Number(paneEl.dataset.sessionId); });
+    var support = session && session.forceTermination;
+    var reason = support && support.reason || 'Force termination is not yet supported for this vendor';
+    force.disabled = !ready || !support || support.supported !== true;
+    force.title = support && support.supported === true ? 'Force stop session and all its Workers' : reason;
+    force.setAttribute('aria-label', 'Force stop session' + (support && support.supported === true ? '' : ': ' + reason));
+    force.setAttribute('aria-disabled', force.disabled ? 'true' : 'false');
+  }
   var close = paneEl.querySelector('.split-pane-close');
   if (close) {
     var host = paneEl.parentNode;

package/lib/public/modules/split-pane-renderer.js

@@ -1,3 +1,4 @@
+import { createPaneForceStop } from './split-pane-force-stop.js';
 import { renderPaneRuntime } from './split-pane-runtime.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
@@ -201,7 +202,6 @@ function createPaneSearchPopover(paneEl, frame, searchButton) {
     throw error;
   }
 }
-
 export function handlePaneSearchMessage(event, host) {
   var frames = host ? host.querySelectorAll(".split-pane-frame") : [];
   for (var i = 0; i < frames.length; i++) {
@@ -287,7 +287,6 @@ function isConfiguredWorker(groups, sessionId) {
 export function updatePaneFullAccessButton(button, session) {
   if (button) renderPermissionControl(button, permissionState(session));
 }
-
 export function createSplitPane(pane, closePane) {
   var paneEl = document.createElement("section"); paneEl.className = "split-pane";
   var header = document.createElement("header"); header.className = "split-pane-header"; header.title = pane.title;
@@ -345,6 +344,7 @@ export function createSplitPane(pane, closePane) {
   }); header.appendChild(sidebarButton);
   var search = document.createElement("button"); search.type = "button"; search.className = "split-pane-search"; search.setAttribute("aria-label", "Search this session"); search.title = "Search this session"; search.innerHTML = iconHtml("search");
   header.insertBefore(search, close);
+  header.insertBefore(createPaneForceStop(paneEl, frame), close);
   function refreshReadyHeader() {
     if (paneEl.classList.contains('split-pane-cached')) return;
     var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId), current = sessionById(id);

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

@@ -0,0 +1,38 @@
+import { iconHtml } from './icons.js';
+import { appendLayoutOption } from './split-view-layout-icons.js';
+import { SPLIT_SIDES } from './split-view-picker-render.js';
+
+export function ensureArrangeMenu(closePresentationArrange) {
+  var menu = document.getElementById("split-view-arrange-menu");
+  if (menu) return menu;
+  menu = document.createElement("div"); menu.id = "split-view-arrange-menu"; menu.className = "split-view-arrange";
+  menu.setAttribute("role", "dialog"); menu.setAttribute("aria-label", "Arrange Split view"); menu.hidden = true;
+  var header = document.createElement("div"); header.className = "split-view-arrange-header";
+  var title = document.createElement("strong"); title.textContent = "Arrange Split view"; header.appendChild(title);
+  var close = document.createElement("button"); close.type = "button"; close.setAttribute("aria-label", "Close arrangement menu"); close.innerHTML = iconHtml("x"); header.appendChild(close);
+  close.addEventListener("click", function () { closePresentationArrange(); }); menu.appendChild(header);
+  var presets = [["balanced", "Balanced"], ["columns", "Columns"], ["rows", "Rows"], ["grid", "Grid"], ["main-left", "Main left"], ["main-right", "Main right"]];
+  var presetGrid = document.createElement("div"); presetGrid.className = "split-view-arrange-grid";
+  presets.forEach(function (item) { var button = document.createElement("button"); button.type = "button"; button.dataset.preset = item[0]; appendLayoutOption(button, item[1], "preset", item[0]); presetGrid.appendChild(button); });
+  menu.appendChild(presetGrid);
+  var positions = [["left", "Left half"], ["right", "Right half"], ["top", "Top half"], ["bottom", "Bottom half"], ["top-left", "Top left"], ["top-right", "Top right"], ["bottom-left", "Bottom left"], ["bottom-right", "Bottom right"], ["left-third", "Left third"], ["right-third", "Right third"]];
+  var positionGrid = document.createElement("div"); positionGrid.className = "split-view-arrange-grid split-view-arrange-positions";
+  positions.forEach(function (item) { var button = document.createElement("button"); button.type = "button"; button.dataset.position = item[0]; appendLayoutOption(button, item[1], "position", item[0]); positionGrid.appendChild(button); });
+  menu.appendChild(positionGrid);
+  var additions = document.createElement('div'); additions.className = 'split-session-directions';
+  SPLIT_SIDES.forEach(function (side) {
+    var button = document.createElement('button'); button.type = 'button'; button.dataset.arrangeAddSide = side[0];
+    button.innerHTML = iconHtml(side[2]); var label = document.createElement('span'); label.textContent = 'Add ' + side[1] + ' Split'; button.appendChild(label); additions.appendChild(button);
+  });
+  menu.appendChild(additions);
+  var focusButton = document.createElement("button"); focusButton.type = "button"; focusButton.dataset.focusLayout = "true"; menu.appendChild(focusButton);
+  var membership = document.createElement("button"); membership.type = "button"; membership.dataset.arrangeMembership = "true";
+  membership.textContent = "Choose sessions"; menu.appendChild(membership);
+  var context = document.createElement("div"); context.className = "split-view-arrange-context";
+  var contextButton = document.createElement("button"); contextButton.type = "button"; contextButton.dataset.arrangeContext = "true";
+  contextButton.setAttribute("aria-expanded", "false"); contextButton.setAttribute("aria-controls", "split-view-arrange-context-list");
+  var contextTitle = document.createElement("span"); contextTitle.dataset.arrangeContextTitle = "true"; contextButton.appendChild(contextTitle); context.appendChild(contextButton);
+  var contextList = document.createElement("div"); contextList.id = "split-view-arrange-context-list"; contextList.hidden = true; contextList.setAttribute("role", "listbox");
+  context.appendChild(contextList); menu.insertBefore(context, presetGrid);
+  document.body.appendChild(menu); return menu;
+}

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

@@ -29,8 +29,8 @@ function position() {
   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);
+function open(anchor, side, origin) {
+  var receipt = pickerReceipt(anchor, origin);
   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; }
@@ -41,8 +41,12 @@ function open(anchor) {
   }
   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();
+  store.set({ splitSessionPicker: { receipt: receipt, side: side || null, query: '', error: '', priorFocus: store.get('projectSplitViewFocusedOrigin') } });
+  if (side) store.set({ projectSplitViewFocusedOrigin: null });
+  renderPicker(menu); menu.hidden = false;
+  if (side) document.dispatchEvent(new CustomEvent('clay-split-picker-layout'));
+  position(); menu.querySelector(side ? 'input' : '[data-split-side]').focus();
+  if (side) retryOptions();
 }
 function onClick(event) {
   var menu = menuElement(), state = store.get('splitSessionPicker'); if (!menu || menu.hidden || !state) return;
@@ -76,7 +80,7 @@ function onKey(event) {
   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('clay-split-view-open-create', function (event) { if (event.detail && event.detail.anchor) open(event.detail.anchor, event.detail.side, event.detail.origin); });
   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;

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

@@ -0,0 +1,42 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { mutation } from './view-mutations.js';
+import { remove, validateTree } from './split-view-layout-client.js';
+import { showToast } from './utils.js';
+import { iconHtml } from './icons.js';
+import { closeSessionContextMenu } from './session-context-menu.js';
+
+export function removeViewSession(view, origin) {
+  var live = (store.get('projectSplitViews') || []).find(function (item) { return item.id === view.id && item.revision === view.revision; });
+  if (!live || !live.sessions.some(function (session) { return session.sessionOriginId === origin; })) return false;
+  var active = live.id === store.get('projectSplitViewActiveId');
+  if (active) {
+    try {
+      document.querySelectorAll('#split-host .split-pane-frame').forEach(function (frame) { if (frame.clayPane) frame.clayPane.checkDraft(); });
+    } catch (error) { showToast(error.message, 'warn'); return false; }
+  }
+  var origins = live.sessions.map(function (session) { return session.sessionOriginId; }).filter(function (item) { return item !== origin; });
+  var tree = remove(live.tree, origin);
+  if (!validateTree(tree, origins).ok) return false;
+  var nextActive = live.activeSessionOriginId === origin ? origins[0] || null : live.activeSessionOriginId;
+  return mutation('project_split_view_update', { id: live.id, sessionOrigins: origins, tree: tree,
+    layout: live.layout, activeSessionOriginId: nextActive, active: active }, active ? { closedOrigin: origin, activeOrigin: nextActive } : null);
+}
+
+export function appendRemoveFromView(menu, session, currentAnchor) {
+  if (!session || session.sessionRole === 'worker') return;
+  var view = (store.get('projectSplitViews') || []).find(function (item) {
+    return item.sessions.length > 1 && item.sessions.some(function (ref) { return ref.sessionOriginId === session.sessionOriginId; });
+  });
+  if (!view) return;
+  var socket = getWs(), slug = store.get('currentSlug'), viewer = store.get('myUserId'), generation = store.get('projectSplitViewSocketGeneration');
+  var button = document.createElement('button'); button.className = 'session-ctx-item';
+  button.innerHTML = iconHtml('panel-left-close') + ' <span>Remove from View</span>';
+  button.disabled = !!store.get('projectSplitViewPending');
+  button.addEventListener('click', function (event) {
+    event.stopPropagation(); var anchor = currentAnchor(); closeSessionContextMenu(false);
+    if (!anchor || socket !== getWs() || slug !== store.get('currentSlug') || viewer !== store.get('myUserId') || generation !== store.get('projectSplitViewSocketGeneration')) return;
+    removeViewSession(view, session.sessionOriginId);
+  });
+  menu.appendChild(button);
+}

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

@@ -11,9 +11,9 @@ import { checkComposerDeparture } from './session-rich-drafts.js';
 import { createOptions } from './session-create.js';
 import { showToast } from './utils.js';
 
-export function pickerReceipt(anchor) {
+export function pickerReceipt(anchor, targetOrigin) {
   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');
+  var origin = targetOrigin || 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) {

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

@@ -16,7 +16,8 @@ import { createSplitPane, updateSplitPaneMetadata, updateSplitPaneCloseVisibilit
 import { syncPaneHeaderState } from './split-pane-header-state.js';
 import { rectangles, resize, validateTree, listIds } from './split-view-layout-client.js';
 import { iconHtml, refreshIcons } from './icons.js';
-import { appendLayoutOption } from './split-view-layout-icons.js';
+import { ensureArrangeMenu as buildArrangeMenu } from './split-view-arrange-menu.js';
+import { pickerCapacity } from './split-view-picker-actions.js';
 import { reserveEmptySplit, clearEmptySplit } from './split-session-empty-pane.js';
 
 var host = null;
@@ -51,7 +52,7 @@ function dispatch(name, detail) {
 export function initPresentationRenderer(hostElement) {
   host = hostElement;
   app = document.getElementById("app");
-  ensureArrangeMenu();
+  buildArrangeMenu(closePresentationArrange);
   document.addEventListener('clay-split-picker-layout', renderCurrentGeometry);
   document.addEventListener("click", onClick, true);
   document.addEventListener("keydown", onKeyDown, true);
@@ -60,7 +61,7 @@ export function initPresentationRenderer(hostElement) {
   document.addEventListener("pointercancel", onPointerCancel, true);
   document.addEventListener("lostpointercapture", onPointerCancel, true);
   window.addEventListener("blur", onWindowBlur);
-  window.addEventListener("resize", function () { renderCurrentGeometry(); });
+  window.addEventListener("resize", function () { closePresentationArrange(false); renderCurrentGeometry(); });
   window.addEventListener("scroll", closePresentationArrange, true);
   if (typeof ResizeObserver === "function") {
     resizeObserver = new ResizeObserver(function () { renderCurrentGeometry(); });
@@ -136,7 +137,7 @@ export function renderPresentationView(view, tree, sessions) {
   if (app) app.classList.add("split-native-hidden");
   reconcileSplitPanes(host, panes, function (pane) { return createSplitPane(pane, function (sessionId) { dispatch("clay-split-view-close-pane", { sessionId: sessionId }); }); }, updateSplitPaneMetadata, paneRetention(host));
   Array.from(host.querySelectorAll(':scope > .split-pane .split-pane-header')).forEach(function (header) { ensureArrangeTrigger(header); });
-  ensureArrangeMenu();
+  buildArrangeMenu(closePresentationArrange);
   Array.from(host.querySelectorAll(':scope > .split-pane')).forEach(function (node) {
     var target = panes.find(function (pane) { return node.dataset.splitPaneKey === pane.slug + '#' + pane.sessionId; });
     var session = target && sessions.find(function (item) { return item.id === target.sessionId; });
@@ -278,34 +279,6 @@ export function ensureArrangeTrigger(header) {
   if (pane) syncPaneHeaderState(pane);
 }
 
-function ensureArrangeMenu() {
-  var menu = document.getElementById("split-view-arrange-menu");
-  if (menu) return menu;
-  menu = document.createElement("div"); menu.id = "split-view-arrange-menu"; menu.className = "split-view-arrange";
-  menu.setAttribute("role", "dialog"); menu.setAttribute("aria-label", "Arrange Split view"); menu.hidden = true;
-  var header = document.createElement("div"); header.className = "split-view-arrange-header";
-  var title = document.createElement("strong"); title.textContent = "Arrange Split view"; header.appendChild(title);
-  var close = document.createElement("button"); close.type = "button"; close.setAttribute("aria-label", "Close arrangement menu"); close.innerHTML = iconHtml("x"); header.appendChild(close);
-  close.addEventListener("click", function () { closePresentationArrange(); }); menu.appendChild(header);
-  var presets = [["balanced", "Balanced"], ["columns", "Columns"], ["rows", "Rows"], ["grid", "Grid"], ["main-left", "Main left"], ["main-right", "Main right"]];
-  var presetGrid = document.createElement("div"); presetGrid.className = "split-view-arrange-grid";
-  presets.forEach(function (item) { var button = document.createElement("button"); button.type = "button"; button.dataset.preset = item[0]; appendLayoutOption(button, item[1], "preset", item[0]); presetGrid.appendChild(button); });
-  menu.appendChild(presetGrid);
-  var positions = [["left", "Left half"], ["right", "Right half"], ["top", "Top half"], ["bottom", "Bottom half"], ["top-left", "Top left"], ["top-right", "Top right"], ["bottom-left", "Bottom left"], ["bottom-right", "Bottom right"], ["left-third", "Left third"], ["right-third", "Right third"]];
-  var positionGrid = document.createElement("div"); positionGrid.className = "split-view-arrange-grid split-view-arrange-positions";
-  positions.forEach(function (item) { var button = document.createElement("button"); button.type = "button"; button.dataset.position = item[0]; appendLayoutOption(button, item[1], "position", item[0]); positionGrid.appendChild(button); });
-  menu.appendChild(positionGrid);
-  var focusButton = document.createElement("button"); focusButton.type = "button"; focusButton.dataset.focusLayout = "true"; menu.appendChild(focusButton);
-  var membership = document.createElement("button"); membership.type = "button"; membership.dataset.arrangeMembership = "true";
-  membership.textContent = "Choose sessions"; menu.appendChild(membership);
-  var context = document.createElement("div"); context.className = "split-view-arrange-context";
-  var contextButton = document.createElement("button"); contextButton.type = "button"; contextButton.dataset.arrangeContext = "true";
-  contextButton.setAttribute("aria-expanded", "false"); contextButton.setAttribute("aria-controls", "split-view-arrange-context-list");
-  var contextTitle = document.createElement("span"); contextTitle.dataset.arrangeContextTitle = "true"; contextButton.appendChild(contextTitle); context.appendChild(contextButton);
-  var contextList = document.createElement("div"); contextList.id = "split-view-arrange-context-list"; contextList.hidden = true; contextList.setAttribute("role", "listbox");
-  context.appendChild(contextList); menu.insertBefore(context, presetGrid);
-  document.body.appendChild(menu); return menu;
-}
 
 function openArrangeMenu(trigger) {
   if (!syncPaneHeaderState(trigger.closest('.split-pane'))) return;
@@ -313,7 +286,7 @@ function openArrangeMenu(trigger) {
     dispatch("clay-split-view-open-create", { anchor: trigger });
     return;
   }
-  var menu = ensureArrangeMenu();
+  var menu = buildArrangeMenu(closePresentationArrange);
   if (!menu.hidden && menuTrigger === trigger) { closePresentationArrange(); return; }
   closePresentationArrange(false); menuTrigger = trigger; menu.hidden = false;
   trigger.setAttribute("aria-expanded", "true");
@@ -340,6 +313,7 @@ function openArrangeMenu(trigger) {
   Array.from(menu.querySelectorAll('[data-position*="-"]:not([data-position$="-third"])')).forEach(function (button) {
     button.disabled = count < 3; button.title = count < 3 ? "Quarter layouts require at least three sessions" : "";
   });
+  menu.querySelectorAll('[data-arrange-add-side]').forEach(function (button) { button.disabled = !pickerCapacity() || !!store.get('projectSplitViewPending'); });
   var rect = trigger.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";
@@ -362,10 +336,11 @@ function onClick(event) {
   if (trigger) { event.preventDefault(); event.stopImmediatePropagation(); openArrangeMenu(trigger); return; }
   var menu = event.target.closest('#split-view-arrange-menu');
   if (menu) {
-    if (event.target.closest('[data-arrange-membership]')) {
+    var addSide = event.target.closest('[data-arrange-add-side]');
+    if (addSide || event.target.closest('[data-arrange-membership]')) {
       event.preventDefault(); event.stopImmediatePropagation();
       var anchor = menuTrigger; closePresentationArrange(false);
-      if (anchor && anchor.isConnected) dispatch("clay-split-view-open-create", { anchor: anchor });
+      if (anchor && anchor.isConnected) dispatch("clay-split-view-open-create", { anchor: anchor, side: addSide && addSide.dataset.arrangeAddSide, origin: menu.dataset.sourceOrigin });
       return;
     }
     var contextButton = event.target.closest('[data-arrange-context]');

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

@@ -19,10 +19,11 @@ import { initPresentationDrag, restorePresentationDrag } from './split-view-pres
 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 { preset, listIds, validateTree, 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 { removeViewSession } from './split-view-member-actions.js';
 import { initSplitViewCreateMenu } from './split-view-create-menu.js';
 import { currentSingletonPresentation } from './split-view-singleton.js';
 var host = null;
@@ -333,6 +334,12 @@ function toggleGroupMenu(group, anchor, point) {
 }
 function runGroupAction(view, action, root) {
   closeGroupMenus(false);
+  if (action === 'add-pane') {
+    if (!setActiveView(view.id)) return;
+    var anchor = host && host.querySelector('.split-pane:not(.split-pane-cached) [data-action="arrange"]');
+    if (anchor) document.dispatchEvent(new CustomEvent('clay-split-view-open-create', { detail: { anchor: anchor, side: 'right', origin: view.activeSessionOriginId || view.sessions[0].sessionOriginId } }));
+    return;
+  }
   if (action === 'favorite' || action === 'folder') { organizeViewAction(view, action); return; }
   if (action === "rename") { startRename(root, view); return; }
   if (action === "separate") {
@@ -418,13 +425,7 @@ function onClosePane(event) {
   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; });
-  var nextTree = remove(view.tree, session.sessionOriginId);
-  if (!validateTree(nextTree, origins).ok) return;
-  var nextActive = view.activeSessionOriginId === session.sessionOriginId ? origins[0] || null : view.activeSessionOriginId;
-  mutation("project_split_view_update", { id: view.id, sessionOrigins: origins, tree: nextTree,
-    layout: view.layout, activeSessionOriginId: nextActive }, { closedOrigin: session.sessionOriginId, activeOrigin: nextActive });
+  removeViewSession(view, session.sessionOriginId);
 }
 function onFocus(event) {
   var view = viewExists(store.get('projectSplitViews'), store.get('projectSplitViewActiveId'));

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

@@ -25,8 +25,9 @@ export function openSplitViewMenu(group, anchor, point, onAction) {
   }
   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) {
+  [['add-pane', 'Add pane', 'panel-right-open'], ['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];
+    if (entry[0] === 'add-pane') button.disabled = !view.sessions.length || view.sessions.length + (view.workspace && view.workspace.linkedPair ? view.workspace.linkedPair.workerOrigins.length : 0) >= 8 || !!store.get('projectSplitViewPending');
     button.innerHTML = iconHtml(entry[2]) + ' <span>' + entry[1] + '</span>';
     button.addEventListener('click', function (event) {
       event.stopPropagation(); var root = currentRoot(); closeSessionContextMenu(false);