clay-server 5.3.1-beta.1 → 5.4.0-beta.1

package/lib/public/modules/shared-browser-tabs.js

@@ -5,7 +5,7 @@ export function renderBrowserTabs(el, select, send) {
   var bar = el.querySelector('.shared-browser-tabs');
   var tabs = store.get('sharedBrowsers') || [];
   var selected = store.get('sharedBrowser');
-  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase, tab.incognito, tab.personalCookiesAvailable]; }), selected && selected.id, store.get('connected')]);
+  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase, tab.incognito, tab.personalCookiesAvailable, tab.sourceSessionId, tab.sourceRole, tab.sourceTitle, tab.sourceGeneration]; }), selected && selected.id, store.get('connected')]);
   if (bar.dataset.key === key) return;
   var focused = bar.contains(document.activeElement) ? document.activeElement : null;
   var focusedId = focused && focused.dataset.browserId, focusedAction = focused && focused.dataset.tabAction;
@@ -23,8 +23,10 @@ export function renderBrowserTabs(el, select, send) {
     button.setAttribute('aria-selected', String(active)); button.tabIndex = active ? 0 : -1;
     var title = 'New tab';
     try { if (tab.url) title = new URL(tab.url).hostname || 'New tab'; } catch (e) {}
+    var source = tab.sourceRole === 'worker' ? 'Worker #' + tab.sourceSessionId : '';
+    if (source) title = source + ' · ' + title;
     var mode = tab.phase === 'ended' ? 'Ended' : tab.phase === 'starting' ? 'Starting' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.';
-    var description = title + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + mode;
+    var description = title + (source ? ' · ' + tab.sourceTitle + ' · Gen ' + tab.sourceGeneration : '') + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + mode;
     var label = document.createElement('span'); label.className = 'shared-browser-tab-label'; label.textContent = title;
     button.innerHTML = iconHtml(tab.personalCookiesAvailable && tab.incognito ? 'glasses' : 'globe');
     button.appendChild(label); button.setAttribute('aria-label', description); button.setAttribute('data-tip', description);

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

@@ -292,7 +292,9 @@ function onClick(event) {
   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 row = target.closest(".session-item[data-session-id], .session-loop-child[data-session-id]");
+  if (row && target.closest("button, a, input, textarea, select, [contenteditable='true']")) return;
+  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);

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

@@ -14,7 +14,7 @@ export function shouldLoadWorkerPage(state, body, intentional) {
   if (!state || !body || state.inFlight || !state.hasMore || state.nextBefore == null || !workerCursorKey(state.nextBefore)) return false;
   if (state.status === 'error' && !intentional) return false;
   if (state.status !== 'ready' && state.status !== 'error') return false;
-  return intentional ? body.scrollTop <= 96 : body.clientHeight > 0 && body.scrollHeight <= body.clientHeight + 1;
+  return intentional === true && body.scrollTop <= 96;
 }
 export function captureWorkerAnchor(body) {
   var top = body.getBoundingClientRect().top;

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

@@ -34,15 +34,6 @@ function workersFor(driver) {
     (Number(b.workerGeneration) || 0) - (Number(a.workerGeneration) || 0); });
   return { items: all, currentIds: currentIds };
 }
-function configuredGroup(driver) {
-  if (!driver) return null;
-  var groups = store.get('splitGroups') || [];
-  for (var i = 0; i < groups.length; i++) {
-    var roles = splitGroupRoles(groups[i]);
-    if (roles && roles.version === 2 && roles.driverId === driver.id && roles.workerIds.length) return groups[i];
-  }
-  return null;
-}
 function presentationSource(container, driver, connectionErrorBinding) {
   var frame = container && container.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
   // A read-only connection error may outlive the child's committed binding.
@@ -130,7 +121,6 @@ function close(returnFocus) {
       requestId: state.subscriptionId, parentSessionOriginId: state.driverOriginId,
       workerSessionOriginId: state.workerOriginId, generation: state.generation })); } catch (_error) {}
   }
-  if (state.fillTimer) clearTimeout(state.fillTimer);
   if (state.requestTimer) clearTimeout(state.requestTimer);
   store.set({ splitViewWorkerConversation: null });
   syncWorkerSelection();
@@ -152,7 +142,6 @@ function requestPage(state, before, append, refresh) {
   if (!state || !current || state.requestId !== current.requestId || current.inFlight || workerCursorKey(before) === null || !ensurePopover()) return;
   state = store.get('splitViewWorkerConversation');
   if (append && workerCursorKey(before) !== workerCursorKey(state.nextBefore)) return;
-  if (state.fillTimer) clearTimeout(state.fillTimer);
   var ws = getWs();
   if (!store.get('connected') || !ws || ws.readyState !== 1) {
     store.set({ splitViewWorkerConversation: Object.assign({}, state, { status: "error", error: "Worker conversation is unavailable while disconnected.", append: false }) });
@@ -161,7 +150,7 @@ function requestPage(state, before, append, refresh) {
   var requestId = "worker-read-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 9);
   var subscribe = !state.subscriptionId || !state.subscriptionConfirmed;
   var pending = Object.assign({}, state, { subscriptionId: subscribe ? requestId : state.subscriptionId, requestId: requestId, socket: ws, projectSlug: store.get('currentSlug'), ownerId: store.get('myUserId') || null,
-    socketGeneration: store.get('projectSplitViewSocketGeneration') || 0, status: "loading", error: null, inFlight: true, fillTimer: null, requestedBefore: before == null ? null : before, append: append === true, refreshing: refresh === true, refreshPending: false });
+    socketGeneration: store.get('projectSplitViewSocketGeneration') || 0, status: "loading", error: null, inFlight: true, requestedBefore: before == null ? null : before, append: append === true, refreshing: refresh === true, refreshPending: false });
   pending.requestTimer = setTimeout(function () {
     var current = store.get('splitViewWorkerConversation');
     if (!current || current.requestId !== requestId || !current.inFlight) return;
@@ -219,8 +208,23 @@ function ensurePopover() {
     closeButton.addEventListener("click", function () { close(true); }); header.appendChild(closeButton); element.appendChild(header);
     var source = document.createElement("div"); source.className = "split-view-worker-popover-source"; element.appendChild(source);
     var body = document.createElement("div"); body.className = "split-view-worker-popover-body readonly-session-transcript"; body.tabIndex = 0; body.setAttribute("aria-label", "Read-only Worker transcript"); element.appendChild(body);
-    body.addEventListener('scroll', function () { loadEarlier(body, true); }, { passive: true });
-    body.addEventListener('wheel', function (event) { if (event.deltaY < 0) loadEarlier(body, true); }, { passive: true });
+    body.addEventListener('scroll', function () {
+      var state = store.get('splitViewWorkerConversation');
+      if (!state) return;
+      var upward = body.scrollTop < state.scrollTop;
+      store.set({ splitViewWorkerConversation: Object.assign({}, state, { scrollTop: body.scrollTop }) });
+      if (upward && state.scrollIntentUntil > Date.now()) loadEarlier(body, true);
+    }, { passive: true });
+    function scrollIntent() {
+      var state = store.get('splitViewWorkerConversation');
+      if (state) store.set({ splitViewWorkerConversation: Object.assign({}, state, { scrollIntentUntil: Date.now() + 1500 }) });
+    }
+    body.addEventListener('wheel', function (event) { if (event.deltaY < 0) { scrollIntent(); loadEarlier(body, true); } }, { passive: true });
+    body.addEventListener('keydown', function (event) {
+      if (['ArrowUp', 'PageUp', 'Home'].indexOf(event.key) >= 0 || event.key === ' ' && event.shiftKey) scrollIntent();
+    });
+    body.addEventListener('pointerdown', function (event) { if (event.target === body) scrollIntent(); }, { passive: true });
+    body.addEventListener('touchstart', scrollIntent, { passive: true });
     var footer = document.createElement("footer"); footer.className = "split-view-worker-popover-footer"; element.appendChild(footer);
   }
   return element;
@@ -249,7 +253,7 @@ function renderContent() {
     else body.scrollTop = oldTop;
     if (wasFocused) body.focus({ preventScroll: true });
   }
-  if (body) store.set({ splitViewWorkerConversation: Object.assign({}, state, { renderedMessages: state.messages, prepend: false, liveRefresh: false,
+  if (body) store.set({ splitViewWorkerConversation: Object.assign({}, state, { renderedMessages: state.messages, scrollTop: body.scrollTop, scrollIntentUntil: 0, prepend: false, liveRefresh: false,
     initialPage: state.status === 'ready' ? false : state.initialPage }) });
   if (footer) {
     footer.textContent = state.status === 'error' ? 'Read-only conversation' : state.refreshing ? 'Updating live conversation…' : state.subscriptionConfirmed ? 'Read-only · Live updates' : 'Read-only conversation';
@@ -265,25 +269,13 @@ function renderContent() {
   }
   if (footerFocused) { var nextFocus = footer.querySelector('button') || body; if (nextFocus) nextFocus.focus({ preventScroll: true }); }
   refreshIcons();
-  scheduleWorkerFill(body);
+
 }
 function loadEarlier(body, intentional) {
   var state = store.get('splitViewWorkerConversation');
   if (!shouldLoadWorkerPage(state, body, intentional)) return;
   requestPage(state, state.nextBefore, true);
 }
-function scheduleWorkerFill(body) {
-  var state = store.get('splitViewWorkerConversation');
-  if (!shouldLoadWorkerPage(state, body, false) || state.fillTimer) return;
-  var requestId = state.requestId;
-  var timer = setTimeout(function () {
-    var current = store.get('splitViewWorkerConversation');
-    if (!current || current.requestId !== requestId || current.fillTimer !== timer || !body.isConnected) return;
-    store.set({ splitViewWorkerConversation: Object.assign({}, current, { fillTimer: null }) });
-    loadEarlier(body, false);
-  }, 120);
-  store.set({ splitViewWorkerConversation: Object.assign({}, state, { fillTimer: timer }) });
-}
 function anchorChip(state) {
   if (!state) return null;
   return document.querySelector('.split-pane[data-session-origin="' + CSS.escape(state.driverOriginId) + '"] [data-worker-origin="' + CSS.escape(state.workerOriginId) + '"]');
@@ -397,28 +389,6 @@ export function renderPaneWorkers(container, driver) {
     button.addEventListener("click", function () { if (presentationSource(container, exactDriver(driver.sessionOriginId))) open(button, driver, worker); }); pill.appendChild(button); root.appendChild(pill);
     appendWorkerRemoval(pill, button, container, driver, worker);
   });
-  var activeView = (store.get('projectSplitViews') || []).find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
-  var group = configuredGroup(driver);
-  if ((activeView && activeView.sessions.some(function (session) { return session.sessionOriginId === driver.sessionOriginId; }) || source.singleton) && group) {
-    var controls = document.createElement('button'); controls.type = 'button'; controls.className = 'split-view-worker-controls';
-    controls.textContent = 'Controls'; controls.setAttribute('aria-label', 'Open Worker controls for ' + (driver.title || 'Driver session'));
-    controls.dataset.driverOrigin = driver.sessionOriginId; controls.dataset.groupId = String(group.id);
-    controls.addEventListener('click', function (event) {
-      event.preventDefault(); event.stopPropagation();
-      var frame = container.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
-      var currentSource = presentationSource(container, exactDriver(driver.sessionOriginId));
-      if (!frame || !live || !live.ready || !currentSource || !frame.isConnected || frame.dataset.sessionOriginId !== driver.sessionOriginId ||
-          Number(frame.dataset.sessionId) !== driver.id || live.sessionId !== driver.id || live.binding.sessionOriginId !== driver.sessionOriginId ||
-          frame.dataset.projectSlug !== store.get('currentSlug') || configuredGroup(exactDriver(driver.sessionOriginId)) !== group) return;
-      document.dispatchEvent(new CustomEvent('clay-split-view-open-worker-controls', { detail: {
-        driverOriginId: driver.sessionOriginId, driverId: driver.id, groupId: group.id, projectSlug: store.get('currentSlug'),
-        ownerId: driver.ownerId || null, workerOrigins: group.members.map(function (id) {
-          var member = sessions().find(function (session) { return session.id === id; }); return member && member.sessionRole === 'worker' ? member.sessionOriginId : null;
-        })
-      } }));
-    });
-    root.appendChild(controls);
-  }
   introduceWorkerViewer(container, driver);
   syncWorkerMessagePreviews();
   var conversation = store.get('splitViewWorkerConversation');
@@ -468,7 +438,6 @@ store.subscribe(function (state, previous) {
     var conversation = state.splitViewWorkerConversation;
     if (conversation) {
       if (conversation.requestTimer) clearTimeout(conversation.requestTimer);
-      if (conversation.fillTimer) clearTimeout(conversation.fillTimer);
       store.set({ splitViewWorkerConversation: Object.assign({}, conversation, { status: "error", error: "Worker conversation connection was lost.", inFlight: false, append: false }) });
       renderContent();
     }

package/lib/public/modules/tool-pane-chrome.js

@@ -1,3 +1,4 @@
+import { ensureWorkbenchWindowControls, syncWorkbenchWindowControls } from './workbench-window-controls.js';
 import { WORKBENCH_PANELS } from './workbench-panels.js';
 import { recordToolExpansion } from './view-presentation-state.js';
 import { store } from './store.js';
@@ -73,6 +74,7 @@ function renderWorkbenchChrome(panel, name) {
     header.appendChild(actions);
   }
   actions.classList.add('workbench-pane-actions');
+  ensureWorkbenchWindowControls(panel, name, actions);
   var title = header.querySelector('strong, [class$="-title"]');
   if (title) title.classList.add('tool-pane-title');
   var space = document.createElement('span'); space.className = 'split-pane-drag-space';
@@ -80,6 +82,7 @@ function renderWorkbenchChrome(panel, name) {
   header.insertBefore(space, actions);
   var expanded = panel.classList.contains('panel-fullscreen');
   var observer = new MutationObserver(function () {
+    syncWorkbenchWindowControls(panel, actions);
     var next = panel.classList.contains('panel-fullscreen');
     if (next !== expanded) { expanded = next; recordToolExpansion(name, next); }
   });

package/lib/public/modules/tool-pane-drag.js

@@ -122,7 +122,7 @@ export function initToolPaneDrag() {
   document.addEventListener('pointerdown', pointerDown, true);
   document.addEventListener('pointermove', move, true); document.addEventListener('pointerup', up, true);
   document.addEventListener('pointercancel', function () { finish(false); }, true);
-  document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && store.get('toolPaneDrag')) { event.preventDefault(); finish(false); } }, true);
+  document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && store.get('toolPaneDrag')) { event.preventDefault(); event.stopImmediatePropagation(); finish(false); } }, true);
   window.addEventListener('blur', function () { finish(false); });
 }
 

package/lib/public/modules/tool-pane-layout.js

@@ -6,7 +6,7 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { TOOL_PANES, toolWindowId, workspaceWindowTree } from './tool-pane-tree.js';
 import { renderPresentationSplitView } from './split-view-presentations.js';
-import { ensureWorkbenchLayoutPreference } from './workbench-layout-preference.js';
+import { ensureWorkbenchLayoutPreference, saveWorkbenchWindowLayout } from './workbench-layout-preference.js';
 import { showToast } from './utils.js';
 import { initToolPaneDrag, bindToolPaneDivider } from './tool-pane-drag.js';
 
@@ -79,8 +79,9 @@ export async function saveToolPaneTree(receipt, tree) {
   if (!live || live.key !== toolPaneContext() || live.key !== receipt.key || live.socket !== receipt.socket || live.scope !== receipt.scope || live.revision !== receipt.revision || !store.get('connected')) return false;
   var view = activeSavedView();
   if (view) { var value = copy(view.workspace); value.tree = fromDisplayTree(value, tree); if (value.linkedPair) value.linkedPair.tree = copy(tree); return persistWorkspace(value); }
-  showToast('Wait for the saved View before changing pane positions.', 'warn');
-  return false;
+  var saved = await saveWorkbenchWindowLayout(receipt.key, tree, receipt.base);
+  if (!saved) showToast((store.get('workbenchLayoutPreference') || {}).error || 'Pane positions could not be saved. Try again.', 'warn');
+  return saved;
 }
 store.subscribe(function (state, previous) {
   if (state.paneMode) return;

package/lib/public/modules/workbench-window-controls.js

@@ -0,0 +1,39 @@
+import { store } from './store.js';
+import { iconHtml } from './icons.js';
+import { WORKBENCH_PANELS } from './workbench-panels.js';
+
+// Every registered workbench gets the same window actions. Existing controllers
+// retain their handlers; missing actions use the common shell and presentation.
+export function ensureWorkbenchWindowControls(panel, name, actions) {
+  var definition = WORKBENCH_PANELS[name];
+  if (!definition || !actions) return;
+  function ensure(kind, selector, label, icon) {
+    var button = actions.querySelector(selector);
+    if (!button) {
+      button = document.createElement('button'); button.type = 'button';
+      button.setAttribute('aria-label', label); button.setAttribute('data-tip', label);
+      button.setAttribute('aria-pressed', String(kind === 'wide' && !!((store.get('workbenchWindowStates') || {})[name] || {}).wide)); button.innerHTML = iconHtml(icon);
+      var close = actions.querySelector('button[aria-label^="Close"]');
+      actions.insertBefore(button, close || null);
+      button.addEventListener('click', function () {
+        if (kind === 'fullscreen') panel.classList.toggle('panel-fullscreen');
+        else {
+          var values = store.get('workbenchWindowStates') || {}, previous = values[name] || {};
+          var wide = !previous.wide;
+          store.set({ workbenchWindowStates: Object.assign({}, values, { [name]: Object.assign({}, previous, { wide: wide }) }) });
+          button.setAttribute('aria-pressed', String(wide));
+        }
+      });
+    }
+    button.dataset.workbenchWindow = kind;
+    return button;
+  }
+  ensure('wide', 'button[aria-label^="Widen"]', 'Widen ' + definition.label, 'chevrons-left-right');
+  ensure('fullscreen', 'button[aria-label*="fullscreen"]', 'Toggle ' + definition.label + ' fullscreen', 'maximize-2');
+  syncWorkbenchWindowControls(panel, actions);
+}
+export function syncWorkbenchWindowControls(panel, actions) {
+  var full = panel.classList.contains('panel-fullscreen');
+  var button = actions.querySelector('[data-workbench-window="fullscreen"]');
+  if (button) button.setAttribute('aria-pressed', String(full));
+}