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

package/lib/public/modules/terminal.js

@@ -1,9 +1,11 @@
+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';
 import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
 import { copyToClipboard } from './utils.js';
-import { getTerminalTheme, getDockedTerminalTheme } from './theme.js';
+import { getTerminalTheme } from './theme.js';
 import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
 import { createKeyToolbar } from './terminal-toolbar.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
@@ -358,7 +360,7 @@ function createXtermForTab(tab) {
     cursorBlink: true,
     fontSize: getTerminalFontSize(),
     fontFamily: getTerminalFontFamily(),
-    theme: (store.get('rightWorkbenchDockedOwners') || []).indexOf('terminal') !== -1 ? getDockedTerminalTheme() : getTerminalTheme(),
+    theme: getTerminalTheme(),
   });
 
   var fitAddon = null;
@@ -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,8 +848,8 @@ export function sendTerminalCommand(command) {
   }
 }
 
-export function setTerminalTheme(xtermTheme) {
-  if ((store.get('rightWorkbenchDockedOwners') || []).indexOf('terminal') !== -1) xtermTheme = getDockedTerminalTheme();
+export function setTerminalTheme() {
+  var xtermTheme = getTerminalTheme();
   for (var tab of tabs.values()) {
     if (tab.xterm) {
       tab.xterm.options.theme = xtermTheme;
@@ -851,9 +857,6 @@ export function setTerminalTheme(xtermTheme) {
   }
 }
 
-store.subscribe(function (state, previous) {
-  if ((state.rightWorkbenchDockedOwners || []).includes('terminal') !== (previous.rightWorkbenchDockedOwners || []).includes('terminal')) setTerminalTheme(getTerminalTheme());
-});
 
 // Live font update: applies family/size to every open shell terminal
 // and refits each (cell dimensions change with font size, so cols/rows
@@ -983,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

@@ -267,11 +267,6 @@ export function getTerminalTheme() {
   return computeTerminalTheme(getTheme(DEFAULT_DARK_THEME_ID) || defaultDarkFallback);
 }
 
-export function getDockedTerminalTheme() {
-  var theme = getCurrentTheme();
-  return Object.assign({}, computeTerminalTheme(theme), { background: '#' + theme.base00 });
-}
-
 export function getMermaidThemeVars() {
   return computeMermaidVars(getCurrentTheme());
 }
@@ -332,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();
+});

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

@@ -0,0 +1,60 @@
+import { ensureArrangeTrigger } from './split-view-presentation-renderer.js';
+import { pairBase } from './view-pair-presentation.js';
+import { activeSavedView } from './view-workspace-state.js';
+// Legacy Driver/Worker pairs use the same display-only window geometry.
+import { store } from './store.js';
+import { rectangles } from './split-view-layout-client.js';
+import { toolPaneLayoutTree, paintToolPaneWindows, bindWorkspaceDivider, dockedToolPanes } from './tool-pane-layout.js';
+
+export function clearToolPaneWindows() {
+  document.querySelectorAll('.tool-pane-window').forEach(function (panel) {
+    panel.classList.remove('tool-pane-window'); delete panel.dataset.toolWindowId;
+    ['left', 'top', 'width', 'height', 'right', 'maxHeight'].forEach(function (field) { panel.style[field] = ''; });
+  });
+  var main = document.getElementById('main-panels');
+  if (main) main.classList.remove('has-tool-pane-windows');
+  store.set({ toolPaneWindowGeometry: null });
+}
+export function paintLegacyToolPanes(host) {
+  var split = store.get('splitPanes');
+  if (!host || !split || !split.panes || split.panes.length < 2) return false;
+  var panes = Array.from(host.querySelectorAll(':scope > .split-pane:not(.split-pane-cached)'));
+  var ids = panes.map(function (pane) {
+    var frame = pane.querySelector('.split-pane-frame');
+    if (frame && !frame.dataset.toolPaneGeometryReadyBound) {
+      frame.dataset.toolPaneGeometryReadyBound = 'true';
+      frame.addEventListener('clay-pane-ready', function () { queueMicrotask(function () { if (frame.isConnected) paintLegacyToolPanes(host); }); });
+    }
+    return frame && frame.dataset.sessionOriginId;
+  });
+  if (ids.length < split.panes.length || ids.some(function (id) { return !id; }) || new Set(ids).size !== ids.length) return false;
+  var base = { id: ids[0] };
+  ids.slice(1).forEach(function (id) { base = { axis: 'horizontal', ratio: .5, left: base, right: { id: id } }; });
+  var view = activeSavedView() || { id: 'legacy-' + (split.groupId || ids.join('-')), activeSessionOriginId: ids[0] };
+  if (view.workspace && view.workspace.linkedPair) base = pairBase(view.workspace.linkedPair, view.tree);
+  host.classList.add('split-view-canvas'); host.dataset.positioned = 'true'; delete host.dataset.singlePane;
+  var style = getComputedStyle(host), left = parseFloat(style.paddingLeft) || 0, top = parseFloat(style.paddingTop) || 0;
+  var width = host.clientWidth - left - (parseFloat(style.paddingRight) || 0), height = host.clientHeight - top - (parseFloat(style.paddingBottom) || 0);
+  var tree = toolPaneLayoutTree(view, base), geometry = rectangles(tree, Math.max(0, width), Math.max(0, height), 7);
+  paintToolPaneWindows(host, view, base, tree, geometry, { left: left, top: top });
+  var focused = store.get('projectSplitViewFocusedOrigin');
+  panes.forEach(function (pane, index) {
+    var rect = geometry.panes[ids[index]];
+    pane.hidden = !!focused && ids[index] !== focused; pane.style.display = pane.hidden ? 'none' : '';
+    if (focused === ids[index]) rect = { x: 0, y: 0, width: width, height: height };
+    if (!rect) return;
+    if (view.sessions && view.sessions.some(function (s) { return s.sessionOriginId === ids[index]; })) ensureArrangeTrigger(pane.querySelector('.split-pane-header'));
+    pane.style.left = left + rect.x + 'px'; pane.style.top = top + rect.y + 'px';
+    pane.style.width = rect.width + 'px'; pane.style.height = rect.height + 'px';
+  });
+  host.querySelectorAll(':scope > .split-view-divider').forEach(function (divider) { divider.remove(); });
+  (focused ? [] : geometry.dividers).forEach(function (entry) {
+    var divider = document.createElement('div'); divider.className = 'split-view-divider'; divider.dataset.axis = entry.axis;
+    divider.setAttribute('role', 'separator'); divider.setAttribute('tabindex', '0'); divider.setAttribute('aria-label', 'Resize pane windows');
+    divider.setAttribute('aria-orientation', entry.axis === 'horizontal' ? 'vertical' : 'horizontal');
+    divider.style.left = left + entry.rect.x + 'px'; divider.style.top = top + entry.rect.y + 'px';
+    divider.style.width = entry.rect.width + 'px'; divider.style.height = entry.rect.height + 'px';
+    bindWorkspaceDivider(divider, entry, tree); host.appendChild(divider);
+  });
+  return true;
+}

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

@@ -0,0 +1,51 @@
+import { WORKBENCH_PANELS } from './workbench-panels.js';
+import { listIds, remove, pairTree, swap } from './split-view-layout-client.js';
+
+export var TOOL_PANES = { terminal: { id: 'terminal-container', label: 'Terminal', icon: 'terminal' },
+  browser: { id: 'shared-browser-panel', label: 'Browser', icon: 'globe' }, 'file-viewer': { id: 'file-viewer', label: 'Files', icon: 'file-text' } };
+Object.assign(TOOL_PANES, WORKBENCH_PANELS);
+export function toolWindowId(name) { return 'tool-' + name; }
+export function isToolWindow(id) { return /^tool-file-[A-Za-z0-9_-]+$/.test(id) || Object.keys(TOOL_PANES).some(function (name) { return toolWindowId(name) === id; }); }
+export function insertWindow(tree, source, target, side, ratio) {
+  if (source === target) return tree;
+  if (side === 'center' && isToolWindow(source) && isToolWindow(target)) return swap(tree, source, target).tree;
+  side = side === 'center' ? 'right' : side;
+  var base = remove(tree, source), found = false;
+  function walk(node) {
+    if (!node) return node;
+    if (node.id) {
+      if (node.id !== target) return node;
+      found = true;
+      var result = pairTree(target, source, side);
+      result.ratio = ratio || .5;
+      return result;
+    }
+    return { axis: node.axis, ratio: node.ratio, left: walk(node.left), right: walk(node.right) };
+  }
+  var next = walk(base);
+  return found && listIds(next).length <= 24 ? next : tree;
+}
+function stripUnknown(tree, allowed) {
+  var result = tree;
+  listIds(tree).forEach(function (id) { if (allowed.indexOf(id) < 0) result = remove(result, id); });
+  return result;
+}
+function placements(tree, output) {
+  if (!tree || tree.id) return;
+  var left = listIds(tree.left), right = listIds(tree.right);
+  if (tree.left.id && isToolWindow(tree.left.id)) output.push({ id: tree.left.id, target: right[0], side: tree.axis === 'horizontal' ? 'left' : 'top', ratio: tree.ratio });
+  else if (tree.right.id && isToolWindow(tree.right.id)) output.push({ id: tree.right.id, target: left[0], side: tree.axis === 'horizontal' ? 'right' : 'bottom', ratio: tree.ratio });
+  placements(tree.left, output); placements(tree.right, output);
+}
+export function workspaceWindowTree(base, saved, owners) {
+  var sessions = listIds(base), tools = owners.map(toolWindowId), allowed = sessions.concat(tools), tree = base;
+  if (saved && saved.tree && JSON.stringify(saved.base) === JSON.stringify(base)) tree = stripUnknown(saved.tree, allowed);
+  else if (saved && saved.tree) {
+    var attached = []; placements(saved.tree, attached);
+    attached.reverse().forEach(function (item) { if (tools.indexOf(item.id) >= 0 && listIds(tree).indexOf(item.target) >= 0) tree = insertWindow(tree, item.id, item.target, item.side, item.ratio); });
+  }
+  tools.forEach(function (id) {
+    if (listIds(tree).indexOf(id) < 0) tree = tree ? { axis: 'horizontal', ratio: .66, left: tree, right: { id: id } } : { id: id };
+  });
+  return tree;
+}

package/lib/public/modules/view-legacy-coordinates.js

@@ -0,0 +1,16 @@
+import { copy, mapWorkspaceTree, paneOwner } from './view-workspace-state.js';
+import { listIds } from './split-view-layout-client.js';
+// Coordinates never create resources. Resolve the old singleton Files slot only
+// after a real file instance exists; leave other delayed slots intact.
+export function boundLegacyCoordinates(record, value) {
+  var next = copy(record), mapping = {};
+  listIds(record.tree).forEach(function (id) { mapping[id] = id; });
+  var files = value.panes.filter(function (pane) { return pane.kind === 'file' && pane.open && pane.placement === 'docked'; });
+  if (files.length === 1) mapping['tool-file-viewer'] = 'tool-' + paneOwner(files[0]);
+  next.tree = mapWorkspaceTree(next.tree, mapping);
+  return next;
+}
+export function legacyCoordinatesReady(record, value) {
+  var ids = value.panes.filter(function (p) { return p.open && p.placement === 'docked'; }).map(function (p) { return 'tool-' + paneOwner(p); });
+  return listIds(boundLegacyCoordinates(record, value).tree).filter(function (id) { return id.indexOf('tool-') === 0; }).every(function (id) { return ids.indexOf(id) >= 0; });
+}