clay-server 5.3.0-beta.4 → 5.3.0-beta.6

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

@@ -1,3 +1,5 @@
+import { syncPairView, pairPresentationPanes, pairViewCapacity } from './view-pair-presentation.js';
+import { paintLegacyToolPanes } from './tool-pane-legacy.js';
 import { adoptDocumentSource } from './clay-studio-document.js';
 import { trustedStudioFrame } from './clay-studio-render.js';
 import { handlePaneBrowserMessage } from './pane-browser-bridge.js';
@@ -131,21 +133,15 @@ function closePane(sessionId) {
 // Called on session_list so pane headers follow renames made elsewhere
 // (sidebar, in-pane app). Panes being renamed inline are left alone.
 export function syncPaneTitles() {
-  var split = store.get('splitPanes');
-  if (!split || !split.panes || !host) return;
-  var titleEls = host.querySelectorAll(".split-pane-title");
-  var paneEls = host.querySelectorAll('.split-pane');
-  for (var i = 0; i < split.panes.length && i < titleEls.length; i++) {
-    var session = sessionById(paneEls[i] && Number(paneEls[i].dataset.sessionId) || split.panes[i].sessionId);
-    if (!session || !session.title) continue;
-    if (titleEls[i].parentNode) titleEls[i].parentNode.title = session.title;
-    if (titleEls[i].style.display !== "none") titleEls[i].textContent = session.title;
-  }
-  var accessBtns = host.querySelectorAll(".split-pane-full-access");
-  for (var ai = 0; ai < split.panes.length && ai < accessBtns.length; ai++) {
-    updatePaneFullAccessButton(accessBtns[ai], sessionById(paneEls[ai] && Number(paneEls[ai].dataset.sessionId) || split.panes[ai].sessionId));
+  if (!host) return;
+  var panes = host.querySelectorAll('.split-pane:not(.split-pane-cached)');
+  for (var i = 0; i < panes.length; i++) {
+    var frame = panes[i].querySelector('.split-pane-frame');
+    if (frame && frame.dataset.requestedSessionId) continue;
+    var session = sessionById(Number(panes[i].dataset.sessionId));
+    if (session) updateSplitPaneMetadata(panes[i], { sessionId: session.id, slug: panes[i].dataset.projectSlug, title: session.title });
   }
-  syncPairChrome(host, split);
+  syncPairChrome(host, store.get('splitPanes'));
 }
 
 function handlePaneMessage(event) {
@@ -191,7 +187,8 @@ function renderSplit(split) {
     singleton || split && split.panes && split.panes.length >= 2 || !!state.projectSplitViewActiveId);
   // The exact singleton presentation is verified before the redundant cache catches up.
   if (singleton) { renderPresentationSplitView(); return; }
-  if (split && split.panes && store.get('projectSplitViewActiveId')) {
+  var savedPair = split && split.panes && syncPairView();
+  if (split && split.panes && !savedPair && store.get('projectSplitViewActiveId')) {
     store.set({ projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null, projectSplitViewPreviewTree: null });
   }
   var expectedPresentationContext = [store.get('currentSlug') || "", store.get('currentProjectOwnerId') || "", store.get('myUserId') || "", store.get('projectSplitViewSocketGeneration') || 0].join("|");
@@ -219,8 +216,10 @@ function renderSplit(split) {
   placeStickyNotesOverlay(true);
   nativeApp.classList.add("split-native-hidden");
   host.classList.add("visible");
+  if (savedPair) panes = pairPresentationPanes(panes);
   reconcileSplitPanes(host, panes, function (pane) { return createSplitPane(pane, closePane); }, updateSplitPaneMetadata);
   syncPairChrome(host, split);
+  paintLegacyToolPanes(host);
   refreshIcons();
 }
 
@@ -252,7 +251,7 @@ function openSplit(side, draggedId) {
 
 export function openGroup(group) {
   if (!canLeavePanes()) return false;
-  if (!group || !Array.isArray(group.members) || group.members.length < 2) return false;
+  if (!group || !Array.isArray(group.members) || group.members.length < 2 || !pairViewCapacity(group)) return false;
   var memberIds = splitGroupMemberIds(group);
   if (memberIds.length !== group.members.length) return false;
   for (var mi = 0; mi < memberIds.length; mi++) if (!sessionById(memberIds[mi])) return false;
@@ -497,3 +496,5 @@ export function initSplitView() {
   initSplitViewPresentations(host);
   renderSplit(store.get('splitPanes'));
 }
+
+export function repaintLegacySplit() { if (store.get('splitPanes')) renderSplit(store.get('splitPanes')); }

package/lib/public/modules/sticky-notes-browser.js

@@ -14,7 +14,7 @@ import { enhanceClayLogLinks } from './clay-log-links.js';
 import { closeHumanNote } from './sticky-notes-actions.js';
 import { send, getNoteUiState } from './sticky-notes-shared.js';
 import { listNoteData, focusNoteOnCanvas, hideNotes, showNotes } from './sticky-notes.js';
-import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { handlesWorkbenchKey, claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
 
 var panel = null;
 var gridEl = null;
@@ -427,7 +427,7 @@ export function isNotesBrowserOpen() {
 export function initNotesBrowser() {
   registerRightWorkbench("notes-browser", closeNotesBrowser);
   document.addEventListener("keydown", function (e) {
-    if (e.key !== "Escape") return;
+    if (e.key !== "Escape" || !handlesWorkbenchKey("notes-browser", e)) return;
     if (deleteDialog && !deleteDialog.classList.contains("hidden")) return;
     if (!store.get('notesBrowserOpen')) return;
     closeNotesBrowser();

package/lib/public/modules/sticky-notes.js

@@ -104,11 +104,17 @@ function recomputeFlightGeometry() {
 function syncFlightControls() {
   var buttons = document.querySelectorAll("#sticky-notes-toggle-btn");
   var hidden = !!store.get("notesTemporarilyHidden");
-  var label = hidden ? "Show sticky notes" : "Hide sticky notes";
+  var count = openCount();
+  var label = hidden ? "Show sticky notes (" + count + ")" : "Hide sticky notes";
   for (var i = 0; i < buttons.length; i++) {
     buttons[i].setAttribute("aria-label", label);
     buttons[i].setAttribute("aria-pressed", hidden ? "true" : "false");
     buttons[i].title = label;
+    var badge = buttons[i].querySelector('.sticky-notes-count');
+    if (badge) {
+      badge.textContent = String(count);
+      badge.classList.toggle('hidden', !hidden || count === 0);
+    }
   }
   refreshIcons();
 }
@@ -246,15 +252,7 @@ export function createNote() {
 
 function updateBadge() {
   syncToggleAvailability();
-  var badge = document.querySelector(".sticky-notes-count");
-  if (!badge) return;
-  var count = openCount();
-  if (count > 0) {
-    badge.textContent = count;
-    badge.classList.remove("hidden");
-  } else {
-    badge.classList.add("hidden");
-  }
+  syncFlightControls();
 }
 
 // --- WS message handlers ---

package/lib/public/modules/terminal.js

@@ -1,3 +1,5 @@
+import { recordToolExpansion } from './view-presentation-state.js';
+import { workspaceChanged } from './view-workspace-state.js';
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { closeSidebar } from './sidebar.js';
@@ -145,13 +147,8 @@ export function initTerminal(_ctx) {
 
   // Fullscreen toggle
   document.getElementById("terminal-fullscreen").addEventListener("click", function () {
-    var isFs = ctx.terminalContainerEl.classList.toggle("panel-fullscreen");
-    var icon = this.querySelector("[data-lucide]");
-    if (icon) {
-      icon.setAttribute("data-lucide", isFs ? "minimize-2" : "maximize-2");
-      refreshIcons();
-    }
-    fitTerminal();
+    setTerminalExpanded(!ctx.terminalContainerEl.classList.contains('panel-fullscreen'));
+    recordToolExpansion('terminal', ctx.terminalContainerEl.classList.contains('panel-fullscreen'));
   });
 
   // Header toggle button
@@ -224,6 +221,7 @@ export function openTerminal() {
 
 // --- Close terminal panel (hide, detach, but keep PTYs alive) ---
 export function closeTerminal() {
+  recordToolExpansion('terminal', false);
   releaseRightWorkbench("terminal");
   var container = ctx.terminalContainerEl;
   container.classList.remove("panel-fullscreen");
@@ -279,7 +277,7 @@ function closeTab(termId) {
 }
 
 // --- Activate a tab (show xterm, attach) ---
-function activateTab(termId) {
+function activateTab(termId, savedBinding) {
   var tab = tabs.get(termId);
   if (!tab) return;
 
@@ -294,6 +292,10 @@ function activateTab(termId) {
   }
 
   activeTabId = termId;
+  var binding = (store.get("clayControlTerminalViews") || []).find(function (item) { return item.id === termId; });
+  if (binding) store.set({ savedViewTerminalResource: { id: binding.id, identity: binding.identity, runtimeId: binding.runtimeId } });
+  var unavailable = document.getElementById("terminal-saved-unavailable"); if (unavailable) unavailable.remove();
+  workspaceChanged();
 
   // Lazy-create xterm instance
   if (!tab.xterm) {
@@ -305,7 +307,7 @@ function activateTab(termId) {
 
   // Attach to server
   if (ctx.ws && ctx.connected) {
-    ctx.ws.send(JSON.stringify({ type: "term_attach", id: termId }));
+    ctx.ws.send(JSON.stringify({ type: "term_attach", id: termId, savedBinding: savedBinding }));
   }
 
   // Fit and focus
@@ -557,11 +559,13 @@ function renderTabBar() {
 
       var moreBtn = document.createElement("button");
       moreBtn.className = "terminal-tab-more";
-      moreBtn.innerHTML = '<i data-lucide="ellipsis" style="width:12px;height:12px"></i>';
+      moreBtn.innerHTML = iconHtml('x');
+      moreBtn.setAttribute('aria-label', 'Close terminal tab ' + t.title);
       moreBtn.addEventListener("click", function (e) {
         e.stopPropagation();
-        showTabContextMenu(e, t, label);
+        closeTab(t.id);
       });
+      el.addEventListener('contextmenu', function (event) { event.preventDefault(); showTabContextMenu(event, t, label); });
       el.appendChild(moreBtn);
 
       el.addEventListener("click", function () {
@@ -699,7 +703,7 @@ function updateTerminalBadge() {
 // --- Handle server messages ---
 
 export function handleTermList(msg) {
-  store.set({ clayControlTerminalViews: (msg.terminals || []).map(function (item) { return { id: item.id, identity: item.controlIdentity, revision: item.controlRevision, runtimeId: store.get('controlRuntimeId') }; }) });
+  store.set({ clayControlTerminalViews: (msg.terminals || []).map(function (item) { return { id: item.id, identity: item.controlIdentity, revision: item.controlRevision, exited: item.exited, runtimeId: store.get('controlRuntimeId') }; }) });
   // TUI session terminals are owned by session-tui-view.js and must not
   // appear in the bottom terminal panel. Filter them out before any tab
   // bookkeeping so the panel never tries to render or auto-attach them.
@@ -744,6 +748,7 @@ export function handleTermList(msg) {
   }
 
   renderTabBar();
+  store.set({ savedViewTerminalListReady: true });
 
   // If panel is open and we have tabs, re-attach
   if (isOpen && tabs.size > 0) {
@@ -825,6 +830,7 @@ export function handleTermClosed(msg) {
 
 // --- Reset on reconnect ---
 export function resetTerminals() {
+  store.set({ savedViewTerminalListReady: false, savedViewTerminalResource: null });
   // Dispose all xterm instances (server state survives, client re-syncs via term_list)
   for (var tab of tabs.values()) {
     disposeTab(tab);
@@ -842,7 +848,8 @@ export function sendTerminalCommand(command) {
   }
 }
 
-export function setTerminalTheme(xtermTheme) {
+export function setTerminalTheme() {
+  var xtermTheme = getTerminalTheme();
   for (var tab of tabs.values()) {
     if (tab.xterm) {
       tab.xterm.options.theme = xtermTheme;
@@ -850,6 +857,7 @@ export function setTerminalTheme(xtermTheme) {
   }
 }
 
+
 // Live font update: applies family/size to every open shell terminal
 // and refits each (cell dimensions change with font size, so cols/rows
 // shift too). Hooked via onTerminalFontChange below.
@@ -978,3 +986,27 @@ function showTermCtxMenu(e, tab) {
     document.addEventListener("click", closeTermCtxMenu, { once: true });
   }, 0);
 }
+
+// Restoration must never enter openTerminal's create-new branch.
+export function restoreExistingTerminal(resource) {
+  if (!store.get('connected') || !store.get('controlRuntimeId')) return 'pending';
+  if (!store.get('savedViewTerminalListReady')) return 'pending';
+  var live = (store.get('clayControlTerminalViews') || []).find(function (item) { return item.id === resource.id && item.identity === resource.identity && item.runtimeId === resource.runtimeId && !item.exited; });
+  claimRightWorkbench('terminal');
+  var container = document.getElementById('terminal-container'); container.classList.remove('hidden');
+  if (live && tabs.has(resource.id)) { isOpen = true; activateTab(resource.id, resource); return 'restored'; }
+  isOpen = false;
+  tabs.forEach(function (tab) { if (tab.bodyEl) tab.bodyEl.style.display = 'none'; });
+  var notice = document.getElementById('terminal-saved-unavailable');
+  if (!notice) { notice = document.createElement('p'); notice.id = 'terminal-saved-unavailable'; notice.className = 'saved-view-unavailable'; notice.setAttribute('role', 'status'); document.getElementById('terminal-body').appendChild(notice); }
+  notice.textContent = 'This saved terminal is unavailable. Close this pane and open Terminal to choose an available shell.';
+  return 'unavailable';
+}
+
+export function setTerminalExpanded(enabled) {
+  var panel = document.getElementById('terminal-container'); if (!panel) return;
+  panel.classList.toggle('panel-fullscreen', !!enabled);
+  var icon = panel.querySelector('#terminal-fullscreen [data-lucide]');
+  if (icon) { icon.setAttribute('data-lucide', enabled ? 'minimize-2' : 'maximize-2'); refreshIcons(); }
+  if (!panel.classList.contains('hidden')) fitTerminal();
+}

package/lib/public/modules/theme.js

@@ -327,7 +327,7 @@ export function applyTheme(themeId, fromPicker) {
   // Terminals deliberately keep Clay Studio Dark for predictable ANSI
   // contrast, even while the surrounding workspace uses a light theme.
   var termTheme = getTerminalTheme();
-  try { setTerminalTheme(termTheme); } catch (e) {}
+  try { setTerminalTheme(); } catch (e) {}
   try { setTuiSessionTheme(termTheme); } catch (e) {}
   try { setTuiAttentionTheme(termTheme); } catch (e) {}
 

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

@@ -0,0 +1,82 @@
+import { WORKBENCH_PANELS } from './workbench-panels.js';
+import { recordToolExpansion } from './view-presentation-state.js';
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { TOOL_PANES } from './tool-pane-tree.js';
+
+function titleFor(panel, name) {
+  if (name === 'terminal') {
+    var state = store.snap(), project = (state.projectsHubList || []).find(function (item) { return item && item.slug === state.currentSlug; });
+    var projectName = project && (project.title || project.project || project.name) || state.projectName || state.currentSlug;
+    return projectName ? projectName + ' · Terminal' : 'Terminal';
+  }
+  if (name === 'file-viewer') { var tab = panel.querySelector('.file-viewer-tab.active .file-viewer-tab-label'); return tab && tab.textContent || 'Files'; }
+  var browser = store.get('sharedBrowser');
+  try { return browser && browser.url ? new URL(browser.url).hostname : 'Browser'; } catch (error) { return 'Browser'; }
+}
+export function renderToolPaneChrome(panel, name) {
+  if (panel.dataset.fileInstance) return;
+  if (WORKBENCH_PANELS[name]) { renderWorkbenchChrome(panel, name); return; }
+  var definition = TOOL_PANES[name];
+  if (!definition) return;
+  var header = panel.querySelector(':scope > .tool-pane-header');
+  if (!header) {
+    var original = panel.querySelector(name === 'terminal' ? '.terminal-header' : name === 'browser' ? '.shared-browser-header' : '.file-viewer-tabbar');
+    if (!original) return;
+    header = document.createElement('header'); header.className = 'tool-pane-header split-pane-header'; header.dataset.toolPane = name;
+    var kind = document.createElement('span'); kind.className = 'tool-pane-kind' + (name === 'terminal' ? '' : ' split-view-runtime');
+    kind.innerHTML = iconHtml(definition.icon) + (name === 'terminal' ? '' : '<span class="split-view-model">' + definition.label + '</span>');
+    var title = document.createElement('span'); title.className = 'tool-pane-title split-pane-title';
+    var space = document.createElement('span'); space.className = 'split-pane-drag-space'; space.title = 'Drag to rearrange panes'; space.setAttribute('aria-hidden', 'true');
+    var actions = original.querySelector('.terminal-header-actions, .shared-browser-window, .file-viewer-window-actions');
+    header.append(kind, title, space); if (actions) header.appendChild(actions);
+    panel.insertBefore(header, panel.firstChild);
+    if (name === 'browser') { original.hidden = true; var close = header.querySelector('[data-action="hide"]'); if (close) { close.title = 'Close browser pane'; close.setAttribute('aria-label', 'Close browser pane'); } }
+    else original.classList.add('tool-pane-tab-row');
+    var observer = new MutationObserver(function () { update(); });
+    observer.observe(panel, { childList: true, characterData: true, subtree: true, attributes: true, attributeFilter: ['aria-selected'] });
+    panel.addEventListener('clay-tool-pane-dispose', function () { observer.disconnect(); }, { once: true });
+    refreshIcons();
+  }
+  function update() {
+    var label = titleFor(panel, name), title = header.querySelector('.tool-pane-title');
+    if (title.textContent !== label) { title.textContent = label; title.title = label; }
+  }
+  update();
+}
+
+store.subscribe(function (state, previous) {
+  if (state.projectName === previous.projectName && state.projectsHubList === previous.projectsHubList && state.currentSlug === previous.currentSlug) return;
+  var panel = document.getElementById('terminal-container');
+  if (panel && panel.querySelector(':scope > .tool-pane-header')) renderToolPaneChrome(panel, 'terminal');
+});
+
+function renderWorkbenchChrome(panel, name) {
+  panel.classList.add('workbench-pane-shell');
+  var header = panel.querySelector(':scope > header');
+  if (!header || header.dataset.toolPane === name) return;
+  header.dataset.toolPane = name;
+  header.classList.add('tool-pane-header', 'split-pane-header');
+  var actions = header.querySelector('[class*="window-actions"], :scope > div:last-child');
+  if (!actions) {
+    actions = document.createElement('div');
+    Array.from(header.querySelectorAll(':scope > button')).forEach(function (button) {
+      var label = button.getAttribute('aria-label') || '';
+      if (/^(Widen|Close)|fullscreen/i.test(label)) actions.appendChild(button);
+    });
+    header.appendChild(actions);
+  }
+  actions.classList.add('workbench-pane-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';
+  space.title = 'Drag to rearrange panes'; space.setAttribute('aria-hidden', 'true');
+  header.insertBefore(space, actions);
+  var expanded = panel.classList.contains('panel-fullscreen');
+  var observer = new MutationObserver(function () {
+    var next = panel.classList.contains('panel-fullscreen');
+    if (next !== expanded) { expanded = next; recordToolExpansion(name, next); }
+  });
+  observer.observe(panel, { attributes: true, attributeFilter: ['class'] });
+  panel.addEventListener('clay-tool-pane-dispose', function () { observer.disconnect(); }, { once: true });
+}

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

@@ -0,0 +1,134 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { livePaneBinding, samePaneBinding } from './pane-binding.js';
+import { insertWindow } from './tool-pane-tree.js';
+import { resize } from './split-view-layout-client.js';
+import { repaintToolPanes, saveToolPaneTree, toolPaneContext } from './tool-pane-layout.js';
+
+function receiptCurrent(drag) {
+  var current = store.get('toolPaneWindowGeometry');
+  return current && current.key === toolPaneContext() && store.get('connected') && current.key === drag.receipt.key && current.socket === getWs() && current.socket === drag.receipt.socket &&
+    current.scope === drag.receipt.scope && current.scope === JSON.stringify([store.get('myUserId'), store.get('currentSlug'), store.get('currentProjectOwnerId'), store.get('projectSplitViewSocketGeneration')]) && current.revision === drag.receipt.revision &&
+    JSON.stringify(current.windows.map(function (entry) { return entry.id; }).sort()) === JSON.stringify(drag.windows.map(function (entry) { return entry.id; }).sort()) && JSON.stringify(current.base) === JSON.stringify(drag.receipt.base) &&
+    current.host.clientWidth === drag.width && current.host.clientHeight === drag.height &&
+    drag.windows.every(function (entry) {
+      if (!entry.element.isConnected || entry.element.classList.contains('hidden')) return false;
+      if (!entry.frame) return entry.element.dataset.toolWindowId === entry.id;
+      var live = entry.frame.clayPane && entry.frame.clayPane.identity();
+      return entry.frame.contentDocument === entry.document && entry.frame.contentWindow === entry.window &&
+        live && samePaneBinding(live.binding, entry.binding) && livePaneBinding(entry.frame);
+    });
+}
+function capture(event, source, divider) {
+  var receipt = store.get('toolPaneWindowGeometry'), preference = store.get('workbenchLayoutPreference') || {};
+  if (!receipt || (!store.get('projectSplitViewActiveId') && (!preference.ready || preference.loading || preference.saving)) || store.get('projectSplitViewDrag') || store.get('projectSplitViewPending')) return null;
+  var drag = { pointerId: event.pointerId, receipt: receipt, source: source, divider: divider, startX: event.clientX, startY: event.clientY,
+    width: receipt.host.clientWidth, height: receipt.host.clientHeight, tree: receipt.tree, moved: false, windows: receipt.windows.map(function (item) {
+      var live = item.frame && item.frame.clayPane && item.frame.clayPane.identity();
+      return Object.assign({}, item, { rect: item.element.getBoundingClientRect(), document: item.frame && item.frame.contentDocument,
+        window: item.frame && item.frame.contentWindow, binding: live && live.binding, pointerEvents: item.frame && item.frame.style.pointerEvents });
+    }) };
+  return receiptCurrent(drag) ? drag : null;
+}
+function begin(drag) {
+  drag.moved = true;
+  drag.windows.forEach(function (item) { if (item.frame) item.frame.style.pointerEvents = 'none'; });
+  if (drag.source) drag.source.element.classList.add('tool-pane-drag-source');
+  document.body.classList.add('tool-pane-dragging'); drag.receipt.host.classList.add('split-view-drag-preview');
+  try { document.documentElement.setPointerCapture(drag.pointerId); } catch (error) {}
+}
+function pointerDown(event) {
+  if (event.button !== 0 || event.isPrimary === false || store.get('toolPaneDrag')) return;
+  var header = event.target.closest && event.target.closest('.tool-pane-window > .tool-pane-header, #split-host > .split-pane > .split-pane-header');
+  if (!header || event.target.closest('button, input, a, .tool-pane-title, .tool-pane-kind, .split-pane-title, .split-view-runtime, .split-worker-runtime')) return;
+  var receipt = store.get('toolPaneWindowGeometry');
+  if (!receipt || !receipt.windows.some(function (item) { return !!item.tool; })) return;
+  var source = receipt.windows.find(function (item) { return item.element === header.parentNode; });
+  var drag = source && capture(event, source);
+  if (!drag) return;
+  store.set({ toolPaneDrag: drag }); event.preventDefault(); event.stopImmediatePropagation();
+}
+function preview(drag, tree) {
+  drag.tree = tree;
+  store.set({ toolPaneLayoutPreview: { key: drag.receipt.key, base: drag.receipt.base, tree: tree, socket: drag.receipt.socket } });
+  repaintToolPanes();
+}
+function move(event) {
+  var drag = store.get('toolPaneDrag');
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  if (!receiptCurrent(drag)) { finish(false); return; }
+  if (!drag.moved && Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 6) return;
+  if (!drag.moved) begin(drag);
+  event.preventDefault();
+  if (drag.divider) {
+    var entry = drag.divider, horizontal = entry.axis === 'horizontal';
+    var delta = horizontal ? event.clientX - drag.startX : event.clientY - drag.startY;
+    var next = resize(drag.receipt.tree, entry.path, Math.max(.05, Math.min(.95, entry.ratio + delta / Math.max(1, entry.available))));
+    if (next) preview(drag, next);
+    return;
+  }
+  var target = drag.windows.find(function (entry) { var r = entry.rect; return event.clientX >= r.left && event.clientX <= r.right && event.clientY >= r.top && event.clientY <= r.bottom; });
+  var nextTree = drag.receipt.tree;
+  if (target && target.id !== drag.source.id) {
+    var r = target.rect, x = (event.clientX - r.left) / r.width, y = (event.clientY - r.top) / r.height;
+    var edge = Math.min(x, 1 - x, y, 1 - y), side = 'center';
+    if (edge < .25) side = edge === x ? 'left' : edge === 1 - x ? 'right' : edge === y ? 'top' : 'bottom';
+    nextTree = insertWindow(drag.receipt.tree, drag.source.id, target.id, side);
+  }
+  preview(drag, nextTree);
+  var ghost = document.getElementById('tool-pane-drag-ghost');
+  if (!ghost) { ghost = document.createElement('div'); ghost.id = 'tool-pane-drag-ghost'; ghost.className = 'split-view-drag-ghost'; document.body.appendChild(ghost); }
+  ghost.textContent = drag.source.element.querySelector('.tool-pane-title, .split-pane-title').textContent;
+  ghost.style.left = event.clientX + 12 + 'px'; ghost.style.top = event.clientY + 12 + 'px'; ghost.hidden = false;
+}
+async function finish(commit) {
+  var drag = store.get('toolPaneDrag');
+  if (!drag) return;
+  var allowed = commit && drag.moved && receiptCurrent(drag) && JSON.stringify(drag.tree) !== JSON.stringify(drag.receipt.tree);
+  store.set({ toolPaneDrag: null });
+  drag.windows.forEach(function (entry) { if (entry.frame && entry.frame.isConnected) entry.frame.style.pointerEvents = entry.pointerEvents; });
+  if (drag.source) drag.source.element.classList.remove('tool-pane-drag-source');
+  document.body.classList.remove('tool-pane-dragging');
+  var ghost = document.getElementById('tool-pane-drag-ghost'); if (ghost) ghost.hidden = true;
+  try { if (document.documentElement.hasPointerCapture(drag.pointerId)) document.documentElement.releasePointerCapture(drag.pointerId); } catch (error) {}
+  var saved = allowed ? await saveToolPaneTree(drag.receipt, drag.tree) : false;
+  if (!store.get('toolPaneDrag')) { store.set({ toolPaneLayoutPreview: null }); repaintToolPanes(); }
+  setTimeout(function () { if (!store.get('toolPaneDrag')) drag.receipt.host.classList.remove('split-view-drag-preview'); }, 320);
+  return saved;
+}
+function up(event) {
+  var drag = store.get('toolPaneDrag');
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  if (drag.moved) move(event);
+  finish(true);
+}
+export function bindToolPaneDivider(divider, entry, tree) {
+  divider.addEventListener('pointerdown', function (event) {
+    if (event.button !== 0 || store.get('toolPaneDrag')) return;
+    var drag = capture(event, null, entry);
+    if (!drag) return;
+    store.set({ toolPaneDrag: drag }); begin(drag); event.preventDefault(); event.stopImmediatePropagation();
+  });
+  divider.addEventListener('keydown', function (event) {
+    var direction = ['ArrowLeft', 'ArrowUp'].indexOf(event.key) >= 0 ? -1 : ['ArrowRight', 'ArrowDown'].indexOf(event.key) >= 0 ? 1 : 0;
+    if (!direction) return;
+    var receipt = store.get('toolPaneWindowGeometry'), next = resize(tree, entry.path, Math.max(.05, Math.min(.95, entry.ratio + direction * .03)));
+    if (receipt && next) { event.preventDefault(); saveToolPaneTree(receipt, next); }
+  });
+}
+export function initToolPaneDrag() {
+  if (store.get('toolPaneDragInitialized')) return;
+  store.set({ toolPaneDragInitialized: true });
+  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);
+  window.addEventListener('blur', function () { finish(false); });
+}
+
+store.subscribe(function (state, previous) {
+  if (state.toolPaneDrag && (state.myUserId !== previous.myUserId || state.currentSlug !== previous.currentSlug ||
+      state.currentProjectOwnerId !== previous.currentProjectOwnerId || state.splitPanes !== previous.splitPanes ||
+      state.connected !== previous.connected || state.projectSplitViewActiveId !== previous.projectSplitViewActiveId ||
+      state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration)) finish(false);
+});

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

@@ -0,0 +1,95 @@
+import { boundLegacyCoordinates } from './view-legacy-coordinates.js';
+import { pairDisplayTree, pairBase } from './view-pair-presentation.js';
+import { activeSavedView, displayTree, fromDisplayTree, copy, workspaceKey } from './view-workspace-state.js';
+import { persistWorkspace } from './view-workspace-controller.js';
+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 { showToast } from './utils.js';
+import { initToolPaneDrag, bindToolPaneDivider } from './tool-pane-drag.js';
+
+export function toolPaneContext() {
+  var state = store.snap(), view = (state.projectSplitViews || []).find(function (item) { return item.id === state.projectSplitViewActiveId; });
+  var split = state.splitPanes;
+  var origin = view ? view.id : split && split.panes ? 'legacy-' + (split.groupId || split.panes.map(function (pane) { return pane.sessionId; }).join('-')) : state.projectSplitViewSingletonOrigin;
+  return origin && state.currentSlug && JSON.stringify([state.currentSlug, state.currentProjectOwnerId || null, origin]);
+}
+export function dockedToolPanes() {
+  if (window.innerWidth < 1024 || store.get('paneMode')) return [];
+  return (store.get('rightWorkbenchDockedOwners') || []).filter(function (name) {
+    var definition = TOOL_PANES[name], panel = definition && document.getElementById(definition.id);
+    return panel && !panel.classList.contains('hidden') && !panel.classList.contains('panel-fullscreen');
+  });
+}
+export function toolPaneLayoutTree(view, base) {
+  initToolPaneDrag();
+  var owners = dockedToolPanes(), key = toolPaneContext(), preference = store.get('workbenchLayoutPreference') || {};
+  var draft = store.get('toolPaneLayoutPreview'), saved = preference.layouts && preference.layouts[key];
+  if (view && view.workspace) {
+    var legacy = store.get('savedWorkspaceLegacyLayout');
+    saved = legacy && legacy.key === workspaceKey(view) ? boundLegacyCoordinates(legacy.record, view.workspace) : { base: view.workspace.linkedPair ? pairBase(view.workspace.linkedPair, view.tree) : view.tree, tree: pairDisplayTree(view.workspace) };
+  }
+  if (draft && draft.key === key && JSON.stringify(draft.base) === JSON.stringify(base) && draft.socket === getWs()) return draft.tree;
+  return owners.length || saved ? workspaceWindowTree(base, saved, owners) : base;
+}
+export function paintToolPaneWindows(host, view, base, tree, geometry, inset) {
+  var owners = dockedToolPanes(), key = toolPaneContext(), main = document.getElementById('main-panels');
+  if (!main) return;
+  main.classList.toggle('view-session-focused', !!store.get('projectSplitViewFocusedOrigin'));
+  var hostRect = host.getBoundingClientRect(), mainRect = main.getBoundingClientRect();
+  var windows = Array.from(host.querySelectorAll(':scope > .split-pane:not(.split-pane-cached)')).map(function (pane) {
+    var frame = pane.querySelector('.split-pane-frame'); return { id: frame && frame.dataset.sessionOriginId, element: pane, frame: frame };
+  });
+  Object.keys(TOOL_PANES).forEach(function (name) {
+    var panel = document.getElementById(TOOL_PANES[name].id), rect = geometry.panes[toolWindowId(name)];
+    if (!panel) return;
+    if (!panel.dataset.toolPaneFullscreenObserved) {
+      panel.dataset.toolPaneFullscreenObserved = 'true';
+      var observer = new MutationObserver(function (records) {
+        if (records.some(function (record) { return (String(record.oldValue || '').split(/\s+/).indexOf('panel-fullscreen') >= 0) !== panel.classList.contains('panel-fullscreen'); })) requestAnimationFrame(repaintToolPanes);
+      });
+      observer.observe(panel, { attributes: true, attributeOldValue: true, attributeFilter: ['class'] });
+      panel.addEventListener('clay-tool-pane-dispose', function () { observer.disconnect(); }, { once: true });
+    }
+    var mounted = owners.indexOf(name) >= 0 && !!rect;
+    var wasMounted = panel.classList.contains('tool-pane-window');
+    panel.classList.toggle('tool-pane-window', mounted);
+    if (!mounted) {
+      if (wasMounted) ['left', 'top', 'width', 'height', 'right', 'maxHeight'].forEach(function (field) { panel.style[field] = ''; });
+      delete panel.dataset.toolWindowId; return;
+    }
+    panel.dataset.toolWindowId = toolWindowId(name);
+    panel.style.left = hostRect.left - mainRect.left + inset.left + rect.x + 'px';
+    panel.style.top = hostRect.top - mainRect.top + inset.top + rect.y + 'px';
+    panel.style.width = rect.width + 'px'; panel.style.height = rect.height + 'px'; panel.style.right = 'auto'; panel.style.maxHeight = 'none';
+    windows.push({ id: toolWindowId(name), element: panel, tool: name });
+  });
+  main.classList.toggle('has-tool-pane-windows', owners.length > 0);
+  if (Math.abs(host.clientWidth - hostRect.width) > 1) requestAnimationFrame(repaintToolPanes);
+  store.set({ toolPaneWindowGeometry: { key: key, base: base, tree: tree, view: view, windows: windows,
+    host: host, socket: getWs(), revision: view && view.workspace ? view.revision : (store.get('workbenchLayoutPreference') || {}).revision,
+    scope: JSON.stringify([store.get('myUserId'), store.get('currentSlug'), store.get('currentProjectOwnerId'), store.get('projectSplitViewSocketGeneration')]) } });
+}
+export function bindWorkspaceDivider(divider, entry, tree) { bindToolPaneDivider(divider, entry, tree); }
+export function repaintToolPanes() { renderPresentationSplitView(); }
+export async function saveToolPaneTree(receipt, tree) {
+  var live = store.get('toolPaneWindowGeometry');
+  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;
+}
+store.subscribe(function (state, previous) {
+  if (state.paneMode) return;
+  var changed = state.rightWorkbenchDockedOwners !== previous.rightWorkbenchDockedOwners || state.workbenchLayoutPreference !== previous.workbenchLayoutPreference ||
+    state.toolPaneLayoutPreview !== previous.toolPaneLayoutPreview;
+  if (!changed) return;
+  if (!state.toolPaneRepaintQueued) {
+    store.set({ toolPaneRepaintQueued: true });
+    requestAnimationFrame(function () { store.set({ toolPaneRepaintQueued: false }); renderPresentationSplitView(); });
+  }
+  if ((state.rightWorkbenchDockedOwners || []).some(function (name) { return !!TOOL_PANES[name]; }) && !(state.workbenchLayoutPreference || {}).ready && !(state.workbenchLayoutPreference || {}).loading && !(state.workbenchLayoutPreference || {}).saving && !(state.workbenchLayoutPreference || {}).error) ensureWorkbenchLayoutPreference();
+});