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

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-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);

package/lib/public/modules/view-workspace-state.js

@@ -81,7 +81,7 @@ export function prepareViewMutation(type, message) {
   if (type === 'project_split_view_create' || type === 'project_split_view_update') {
     if (!message.workspace) message.workspace = recomposeWorkspace(view && view.workspace, message.tree, message.activeSessionOriginId);
     message.tree = sessionTree(message.workspace);
-    message.active = true;
+    message.active = message.active !== false;
   }
   if (type === 'project_split_view_move') {
     var target = views.find(function (item) { return item.id === message.targetViewId; });