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

package/lib/public/modules/pane-browser-transport.js

@@ -0,0 +1,110 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { livePaneBinding, paneMessageBinding, samePaneBinding, paneTarget } from './pane-binding.js';
+
+// Browser-only presentation bridge. Effects still use the source pane's real
+// authenticated socket and the existing server browser service.
+function browserSource() { return store.get('paneBrowserSource') || null; }
+function focusedOrigin() {
+  var focused = store.get('projectSplitViewFocusedOrigin') || store.get('projectSplitViewSingletonOrigin');
+  if (focused) return focused;
+  var view = (store.get('projectSplitViews') || []).find(function (item) { return item.id === store.get('projectSplitViewActiveId'); });
+  return view && view.activeSessionOriginId || store.get('sessionOriginId') || null;
+}
+var receive = null;
+var changed = null;
+var fieldsByAction = {
+  state_request: [], open: ['url', 'newTab', 'incognito'], view: ['browserId', 'visible'],
+  control: ['browserId', 'control'], close: ['browserId'], end: ['browserId'], input: ['browserId', 'epoch', 'event'],
+};
+function frames() {
+  return Array.from(document.querySelectorAll('#split-host .split-pane:not(.split-pane-cached) .split-pane-frame'));
+}
+export function hasBrowserPaneHost() { return !store.get('paneMode') && frames().some(function (frame) { return !!frame.clayPane || !!paneTarget(store.snap(), store.get('paneBindingSessions') || [], Number(frame.dataset.sessionId)); }); }
+function current() {
+  var source = browserSource();
+  if (!source || source.socket !== getWs() || source.owner !== store.get('myUserId') || source.project !== store.get('currentSlug')) return false;
+  var frame = source.frame;
+  return frames().includes(frame) && frame.contentWindow === source.window && frame.contentDocument === source.document &&
+    !frame.dataset.requestedSessionId && livePaneBinding(frame, { paneBinding: source.binding });
+}
+export function browserPaneSessionId() { return current() ? browserSource().binding.sessionId : null; }
+export function browserPaneStamp() { var source = browserSource(); return current() ? source.binding.requestId + ':' + source.binding.generation : null; }
+export function browserPaneBound() { return !!browserSource(); }
+export function selectBrowserPane(frame, binding) {
+  var source = browserSource();
+  if (!frame || !binding || !frames().includes(frame) || frame.dataset.requestedSessionId || !livePaneBinding(frame, { paneBinding: binding })) return false;
+  if (current() && source.frame === frame && samePaneBinding(source.binding, binding)) {
+    if (source.focusedOrigin !== focusedOrigin()) store.set({ paneBrowserSource: Object.assign({}, source, { focusedOrigin: focusedOrigin() }) });
+    return true;
+  }
+  var previous = store.get('sharedBrowser');
+  if (current() && previous) sendBrowserPaneCommand('view', { browserId: previous.id, visible: false });
+  store.set({ paneBrowserSource: { frame: frame, window: frame.contentWindow, document: frame.contentDocument, binding: binding,
+    socket: getWs(), owner: store.get('myUserId'), project: store.get('currentSlug'), focusedOrigin: focusedOrigin() }, paneBrowserTarget: binding });
+  if (changed) changed(true);
+  return true;
+}
+export function ensureBrowserPaneSource() {
+  if (current() && browserSource().focusedOrigin === focusedOrigin()) return true;
+  var candidates = frames();
+  var origin = focusedOrigin();
+  var frame = candidates.find(function (item) { return origin && item.dataset.sessionOriginId === origin; }) ||
+    candidates.find(function (item) { var pane = item.closest('.split-pane'); return pane && pane.dataset.active === 'true'; }) || candidates[0];
+  var live = frame && frame.clayPane && frame.clayPane.identity();
+  return !!live && selectBrowserPane(frame, live.binding);
+}
+export function sendBrowserPaneCommand(action, fields) {
+  var source = browserSource();
+  if (!Object.prototype.hasOwnProperty.call(fieldsByAction, action)) return false;
+  if (!source && !hasBrowserPaneHost()) return null;
+  if (!current() || !source.frame.clayPane || typeof source.frame.clayPane.browserCommand !== 'function') return false;
+  return source.frame.clayPane.browserCommand(action, fields || {}, source.binding);
+}
+export function sendBoundBrowserCommand(action, fields, binding) {
+  var allowed = Object.prototype.hasOwnProperty.call(fieldsByAction, action) && fieldsByAction[action], ws = getWs();
+  if (!allowed || !ws || ws.readyState !== 1 || !samePaneBinding(binding, paneMessageBinding()) ||
+      !store.get('connected') || store.get('panePendingBinding') || store.get('activeSessionId') !== binding.sessionId) return false;
+  var message = { type: 'shared_browser_' + action, sessionId: binding.sessionId, paneBinding: binding };
+  allowed.forEach(function (key) { if (Object.prototype.hasOwnProperty.call(fields, key)) message[key] = fields[key]; });
+  ws.send(JSON.stringify(message));
+  return true;
+}
+export function forwardBrowserPaneMessage(message) {
+  var frame = window.frameElement;
+  if (!store.get('paneMode') || !frame || !frame.clayPane) return false;
+  if (['shared_browser_state', 'shared_browser_frame', 'shared_browser_error'].indexOf(message.type) < 0) return false;
+  var binding = paneMessageBinding();
+  if (binding && samePaneBinding(binding, message.paneActivation)) {
+    window.parent.postMessage({ type: 'clay-pane-browser-update', paneBinding: binding, message: message }, location.origin);
+  }
+  return true;
+}
+export function initBrowserPaneTransport(onMessage, onChanged) {
+  if (store.get('paneMode')) return;
+  receive = onMessage; changed = onChanged;
+  window.addEventListener('message', function (event) {
+    var data = event.data;
+    if (event.origin !== location.origin || !data || data.type !== 'clay-pane-browser-update' || !data.message) return;
+    var frame = frames().find(function (item) { return item.contentWindow === event.source; });
+    var message = data.message, source = browserSource();
+    if (!frame || !livePaneBinding(frame, data) || !samePaneBinding(data.paneBinding, message.paneActivation) ||
+        message.sessionId !== data.paneBinding.sessionId || ['shared_browser_state', 'shared_browser_frame', 'shared_browser_error'].indexOf(message.type) < 0) return;
+    if (!current() || source.frame !== frame || !samePaneBinding(source.binding, data.paneBinding)) {
+      if (message.type !== 'shared_browser_state' || !message.present || !selectBrowserPane(frame, data.paneBinding)) return;
+    }
+    receive(message, true);
+  });
+  document.addEventListener('clay-pane-ready', function () {
+    queueMicrotask(function () {
+      if (!current() && ensureBrowserPaneSource()) sendBrowserPaneCommand('state_request', {});
+    });
+  }, true);
+  store.subscribe(function () {
+    var source = browserSource();
+    if (source && !current()) {
+      store.set({ paneBrowserSource: null, paneBrowserTarget: null });
+      if (changed) changed(false);
+    }
+  });
+}

package/lib/public/modules/plantuml-preview.js

@@ -6,17 +6,17 @@ export function isPlantUmlFile(path) {
   return /\.(puml|plantuml|pu|uml|salt)$/i.test(String(path || ""));
 }
 
-export function cancelPlantUmlPreview() {
-  var job = store.get('plantUmlPreviewJob');
+export function cancelPlantUmlPreview(instanceId) {
+  var job = store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob');
   if (!job) return;
   clearTimeout(job.timer);
   job.observer.disconnect();
   job.controller.abort();
-  store.set({ plantUmlPreviewJob: null });
+  var cleared = {}; cleared[instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob'] = null; store.set(cleared);
 }
 
-export function renderPlantUmlPreview(body, source, path) {
-  cancelPlantUmlPreview();
+export function renderPlantUmlPreview(body, source, path, instanceId) {
+  cancelPlantUmlPreview(instanceId);
   body.innerHTML = "";
   var preview = document.createElement("div");
   preview.className = "file-viewer-plantuml-preview";
@@ -36,22 +36,22 @@ export function renderPlantUmlPreview(body, source, path) {
 
   var job = { controller: new AbortController(), observer: null, timer: null };
   job.observer = new MutationObserver(function () {
-    if (!preview.isConnected && store.get('plantUmlPreviewJob') === job) cancelPlantUmlPreview();
+    if (!preview.isConnected && store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') === job) cancelPlantUmlPreview(instanceId);
   });
   job.observer.observe(body, { childList: true });
   job.timer = setTimeout(function () {
-    if (store.get('plantUmlPreviewJob') !== job) return;
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') !== job) return;
     showError("The diagram preview timed out.");
-    cancelPlantUmlPreview();
+    cancelPlantUmlPreview(instanceId);
   }, 20000);
-  store.set({ plantUmlPreviewJob: job });
+  var patch = {}; patch[instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob'] = job; store.set(patch);
   fetch("api/file/plantuml?path=" + encodeURIComponent(path), { signal: job.controller.signal, cache: "no-store" }).then(function (response) {
     return response.text().then(function (text) {
       if (!response.ok) throw new Error(text || "Unable to render this diagram.");
       return text;
     });
   }).then(function (svg) {
-    if (store.get('plantUmlPreviewJob') !== job || !preview.isConnected) return;
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') !== job || !preview.isConnected) return;
     if (svg.length > 8 * 1024 * 1024 || !/<svg[\s>]/i.test(svg)) throw new Error("The renderer returned an invalid diagram.");
     var image = document.createElement("img");
     image.alt = "Diagram preview of " + path;
@@ -69,8 +69,8 @@ export function renderPlantUmlPreview(body, source, path) {
     mountWireframeViewport(viewport, image, toolbar);
 
   }).catch(function (error) {
-    if (store.get('plantUmlPreviewJob') === job && error.name !== "AbortError") showError(error.message);
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') === job && error.name !== "AbortError") showError(error.message);
   }).finally(function () {
-    if (store.get('plantUmlPreviewJob') === job) cancelPlantUmlPreview();
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') === job) cancelPlantUmlPreview(instanceId);
   });
 }

package/lib/public/modules/right-workbench.js

@@ -1,14 +1,15 @@
+import { WORKBENCH_PANELS } from './workbench-panels.js';
+import { activeSavedView, workspaceChanged } from './view-workspace-state.js';
 // Shared arbitration for docked background panes and one foreground overlay.
 
+import { renderToolPaneChrome } from './tool-pane-chrome.js';
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
 
 var closers = {};
-var panelIds = { terminal: 'terminal-container', browser: 'shared-browser-panel', 'file-viewer': 'file-viewer',
-  'project-logs': 'project-logs-panel', you: 'you-panel', issues: 'issues-panel', linear: 'linear-panel',
-  'notes-browser': 'notes-browser', 'scheduled-tasks': 'scheduled-tasks-panel', debates: 'debates-workbench',
-  'mcp-skills': 'mcp-skills-workbench', 'mate-knowledge': 'mate-knowledge-workbench', wireframe: 'wireframe-panel' };
+var panelIds = { terminal: 'terminal-container', browser: 'shared-browser-panel', 'file-viewer': 'file-viewer' };
+Object.keys(WORKBENCH_PANELS).forEach(function (name) { panelIds[name] = WORKBENCH_PANELS[name].id; });
 
 // Pane startup does not need account settings for a closed workbench.
 function ensureLayoutPreference() {
@@ -34,6 +35,7 @@ export function rightWorkbenchRevisionFor(name) {
 function publish(owner, docked, revisions) {
   store.set({ rightWorkbenchOwner: owner, rightWorkbenchDockedOwners: docked,
     rightWorkbenchPanelRevisions: revisions, rightWorkbenchRevision: (store.get('rightWorkbenchRevision') || 0) + 1 });
+  workspaceChanged();
 }
 function setDocked(name, docked) {
   if (!openOwner(name)) return;
@@ -53,16 +55,18 @@ function renderLayoutControls() {
     var panel = document.getElementById(panelIds[name]);
     if (!panel) return;
     var docked = owners.indexOf(name) !== -1;
+    renderToolPaneChrome(panel, name);
     panel.dataset.workbenchPlacement = docked ? 'docked' : 'overlay';
     panel.dataset.workbenchActive = store.get('rightWorkbenchOwner') === name ? 'true' : 'false';
     if (!openOwner(name)) return;
-    var header = panel.querySelector(':scope > header, :scope > .file-viewer-header .file-viewer-tabbar, :scope > .terminal-header');
+    var header = panel.querySelector(':scope > .tool-pane-header, :scope > header, :scope > .file-viewer-header .file-viewer-tabbar, :scope > .terminal-header');
     if (!header) return;
     var button = panel.querySelector('.workbench-layout-toggle');
     if (!button) {
-      var actions = header.querySelector('[class*="window-actions"], .terminal-header-actions, .shared-browser-window, :scope.mcp-skills-header > div') || header;
+      var actions = header.querySelector('[class*="window-actions"], .terminal-header-actions, .shared-browser-window, .file-viewer-window-actions, .workbench-pane-actions, :scope.mcp-skills-header > div') || header;
       button = document.createElement('button'); button.type = 'button'; button.className = 'workbench-layout-toggle';
       button.addEventListener('click', function () {
+        if (activeSavedView()) { setDocked(name, dockedOwners().indexOf(name) < 0); return; }
         var current = store.get('workbenchLayoutPreference') || {};
         if (!current.ready || current.loading || current.saving) { ensureLayoutPreference(); return; }
         var owner = store.get('myUserId'), project = store.get('currentSlug'), revision = rightWorkbenchRevisionFor(name);
@@ -83,6 +87,7 @@ function renderLayoutControls() {
         });
       });
       var anchor = actions === header ? header.querySelector('[data-knowledge-wide]') : actions.firstElementChild;
+      if (panel.dataset.fileInstance) { var pin = actions.querySelector('[data-action="pin"]'); anchor = pin && pin.nextSibling; }
       actions.insertBefore(button, anchor || null);
     }
     if (button.dataset.mode !== (docked ? 'docked' : 'overlay')) {
@@ -92,20 +97,26 @@ function renderLayoutControls() {
     button.setAttribute('aria-label', docked ? 'Float workbench over sessions' : 'Dock workbench beside sessions');
     button.title = state.error || button.getAttribute('aria-label');
     button.setAttribute('aria-pressed', docked ? 'true' : 'false');
-    button.disabled = !!state.loading || !!state.saving;
+    // View edits are queued by the workspace controller. Disabling this button
+    // for an unrelated in-flight save can swallow a click between down and up.
+    button.disabled = activeSavedView() ? false : !!state.loading || !!state.saving;
     button.setAttribute('aria-busy', state.loading || state.saving ? 'true' : 'false');
   });
 }
 
-export function registerRightWorkbench(name, close) {
+export function registerRightWorkbench(name, close, panelId) {
+  if (panelId) panelIds[name] = panelId;
   if (!name || typeof close !== "function") return;
   closers[name] = close;
 }
 
+export function unregisterRightWorkbench(name) {
+  delete closers[name];
+  if (name.indexOf('file-') === 0 && name !== 'file-viewer') delete panelIds[name];
+}
 export function claimRightWorkbench(name) {
   if (typeof document !== 'undefined') ensureLayoutPreference();
-  var owner = store.get('rightWorkbenchOwner'), docked = dockedOwners().slice(), preference = store.get('workbenchLayoutPreference') || {};
-  if (!owner && !docked.length && preference.ready && preference.mode === 'docked') docked.push(name);
+  var owner = store.get('rightWorkbenchOwner'), docked = dockedOwners().slice();
   var retained = docked.indexOf(name) !== -1 && owner && docked.indexOf(owner) === -1 ? owner : name;
   var revision = (store.get('rightWorkbenchRevision') || 0) + 1, revisions = Object.assign({}, store.get('rightWorkbenchPanelRevisions') || {});
   Object.keys(revisions).forEach(function (key) { if (key !== retained && docked.indexOf(key) === -1) delete revisions[key]; });
@@ -133,10 +144,18 @@ export function resetRightWorkbench() {
 }
 store.subscribe(function (state, previous) {
   if (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId) { resetRightWorkbench(); return; }
-  var preference = state.workbenchLayoutPreference || {}, before = previous.workbenchLayoutPreference || {};
-  if (!before.ready && preference.ready && preference.mode === 'docked' && !dockedOwners().length && state.rightWorkbenchOwner) {
-    setDocked(state.rightWorkbenchOwner, true); return;
-  }
-  if (state.workbenchLayoutPreference !== previous.workbenchLayoutPreference || state.rightWorkbenchOwner !== previous.rightWorkbenchOwner ||
+  if (state.projectSplitViewPending !== previous.projectSplitViewPending || state.workbenchLayoutPreference !== previous.workbenchLayoutPreference || state.rightWorkbenchOwner !== previous.rightWorkbenchOwner ||
       state.rightWorkbenchDockedOwners !== previous.rightWorkbenchDockedOwners) renderLayoutControls();
 });
+
+export function restoreWorkbenchDock(name) { setDocked(name, true); }
+
+// Document-level shortcuts belong to the focused pane, then the foreground overlay.
+export function handlesWorkbenchKey(name, event) {
+  if (event.defaultPrevented) return false;
+  var target = event.target, focused = Object.keys(panelIds).find(function (owner) {
+    var panel = document.getElementById(panelIds[owner]);
+    return panel && target && panel.contains(target);
+  });
+  return (focused || store.get('rightWorkbenchOwner')) === name;
+}

package/lib/public/modules/scheduled-tasks.js

@@ -65,18 +65,19 @@ function ensurePanel() {
   panel.innerHTML =
     '<header class="scheduled-tasks-topbar">' +
       '<span class="scheduled-tasks-title">' + iconHtml("calendar-clock") + 'Scheduled</span>' +
-      '<div class="scheduled-tasks-create-group">' +
-        '<button class="scheduled-tasks-new" type="button" data-action="new">' + iconHtml("plus") + 'New</button>' +
-        '<button id="scheduled-tasks-create-menu-trigger" class="scheduled-tasks-new-menu" type="button" data-action="new-menu" aria-label="More task creation options" aria-haspopup="menu" aria-expanded="false" aria-controls="scheduled-tasks-create-menu">' + iconHtml("chevron-down") + '</button>' +
-        '<div id="scheduled-tasks-create-menu" class="scheduled-tasks-create-menu hidden" role="menu" aria-labelledby="scheduled-tasks-create-menu-trigger"><button type="button" role="menuitem" data-action="manual">Manual creation</button></div>' +
-      '</div>' +
       '<div class="scheduled-tasks-window-actions">' +
         '<button class="scheduled-tasks-icon-btn" type="button" data-action="wide" title="Widen panel" aria-label="Widen Scheduled panel" aria-pressed="false">' + iconHtml("chevrons-left-right") + '</button>' +
         '<button class="scheduled-tasks-icon-btn" type="button" data-action="fullscreen" title="Toggle fullscreen" aria-label="Toggle Scheduled fullscreen" aria-pressed="false">' + iconHtml("maximize-2") + '</button>' +
         '<button class="scheduled-tasks-icon-btn" type="button" data-action="close" title="Close" aria-label="Close Scheduled">' + iconHtml("x") + '</button>' +
       '</div>' +
     '</header>' +
-    '<div class="scheduled-task-default-ai"><span>New interviews use your shared Default AI.</span><button type="button" data-action="default-ai">Change default</button></div>' +
+    '<div class="scheduled-tasks-toolbar" role="toolbar" aria-label="Scheduled task actions">' +
+      '<div class="scheduled-tasks-create-group">' +
+        '<button class="scheduled-tasks-new" type="button" data-action="new">' + iconHtml("plus") + 'New</button>' +
+        '<button id="scheduled-tasks-create-menu-trigger" class="scheduled-tasks-new-menu" type="button" data-action="new-menu" aria-label="More task creation options" aria-haspopup="menu" aria-expanded="false" aria-controls="scheduled-tasks-create-menu">' + iconHtml("chevron-down") + '</button>' +
+        '<div id="scheduled-tasks-create-menu" class="scheduled-tasks-create-menu hidden" role="menu" aria-labelledby="scheduled-tasks-create-menu-trigger"><button type="button" role="menuitem" data-action="manual">Manual creation</button></div>' +
+      '</div>' +
+    '<div class="scheduled-task-default-ai"><span>New interviews use your shared Default AI.</span><button type="button" data-action="default-ai">Change default</button></div></div>' +
     '<div class="scheduled-task-draft-slot"></div>' +
     '<div class="scheduled-tasks-list" role="list"></div>';
   host.appendChild(panel);

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

@@ -1,4 +1,6 @@
+import { recordToolExpansion } from './view-presentation-state.js';
 import { registerStudioPaint } from './clay-studio-render.js';
+import { hasBrowserPaneHost, initBrowserPaneTransport, forwardBrowserPaneMessage, sendBrowserPaneCommand, ensureBrowserPaneSource, browserPaneSessionId, browserPaneStamp, browserPaneBound } from './pane-browser-transport.js';
 import { browserLinkTarget, initBrowserLinks } from './clay-browser-links.js';
 import { browserSettingsHtml, bindBrowserSettings, renderBrowserSettings, closeBrowserSettings, handleBrowserSettingsMessage } from './shared-browser-settings.js';
 import { renderBrowserTabs } from './shared-browser-tabs.js';
@@ -19,9 +21,11 @@ function eligible() { return visibleEntry() && !!store.get('activeSessionId'); }
 function panel() { return document.getElementById('shared-browser-panel'); }
 function ui(patch) { store.set({ sharedBrowserUi: Object.assign({}, store.get('sharedBrowserUi'), patch) }); }
 function send(type, fields) {
+  var browser = store.get('sharedBrowser');
+  var paneSent = sendBrowserPaneCommand(type, Object.assign({ browserId: browser && browser.id, epoch: browser && browser.epoch }, fields || {}));
+  if (paneSent !== null) return paneSent;
   var ws = getWs();
   if (!ws || ws.readyState !== 1 || !store.get('activeSessionId')) return false;
-  var browser = store.get('sharedBrowser');
   ws.send(JSON.stringify(Object.assign({ type: 'shared_browser_' + type, sessionId: store.get('activeSessionId'),
     browserId: browser && browser.id, epoch: browser && browser.epoch }, fields || {})));
   return true;
@@ -65,7 +69,7 @@ function ensurePanel() {
   root.appendChild(el);
   el.querySelector('[data-action="hide"]').onclick = hideSharedBrowser;
   el.querySelector('[data-action="wide"]').onclick = function () { var wide = !(store.get('sharedBrowserUi') || {}).wide; ui({ wide: wide }); render(); };
-  el.querySelector('[data-action="fullscreen"]').onclick = function () { var full = !(store.get('sharedBrowserUi') || {}).fullscreen; ui({ fullscreen: full }); render(); };
+  el.querySelector('[data-action="fullscreen"]').onclick = function () { var full = !(store.get('sharedBrowserUi') || {}).fullscreen; setBrowserExpanded(full); recordToolExpansion('browser', full); };
   ['back', 'forward', 'reload'].forEach(function (action) { el.querySelector('[data-action="' + action + '"]').onclick = function () { sendBrowserInput({ kind: action }); }; });
   el.querySelector('form').onsubmit = function (event) { event.preventDefault(); sendBrowserInput({ kind: 'navigate', url: el.querySelector('form input').value }); };
   el.querySelector('[data-action="control"]').onclick = function () {
@@ -178,7 +182,28 @@ function selectBrowserTab(id) {
   setBrowserTab(browser);
   send('view', { visible: desktop() && !document.hidden }); render();
 }
+function browserOpenContext() {
+  return JSON.stringify([store.get('myUserId'), store.get('currentSlug'), store.get('projectSplitViewActiveId'), store.get('sessionOriginId'), store.get('projectSplitViewSocketGeneration')]);
+}
+function sendOrQueueBrowserOpen(fields) {
+  store.set({ pendingBrowserOpen: null });
+  if (send('open', fields)) return;
+  // A false transport result means nothing was sent. Only this fresh human
+  // opening can wait for pane readiness; restoration never enters this path.
+  store.set({ pendingBrowserOpen: { context: browserOpenContext(), socket: getWs(), fields: fields || {}, expires: Date.now() + 15000 } });
+}
+function resumePendingBrowserOpen() {
+  var pending = store.get('pendingBrowserOpen');
+  if (!pending) return;
+  if (pending.context !== browserOpenContext() || pending.socket !== getWs() || pending.expires < Date.now() || !store.get('connected') || !store.get('sharedBrowserOpen')) {
+    store.set({ pendingBrowserOpen: null }); return;
+  }
+  if (!ensureBrowserPaneSource()) return;
+  store.set({ pendingBrowserOpen: null });
+  if (!send('open', pending.fields)) store.set({ pendingBrowserOpen: pending });
+}
 export function openSharedBrowserAt(value) {
+  ensureBrowserPaneSource();
   var url = browserLinkTarget('browser:' + value);
   if (!url) throw new Error('Enter a valid HTTP or HTTPS browser address.');
   if (!desktop()) throw new Error('Clay Browser is available on desktop screens.');
@@ -186,19 +211,22 @@ export function openSharedBrowserAt(value) {
   if (!store.get('connected')) throw new Error('Reconnect before opening this browser link.');
   ensurePanel(); closeBrowserSettings(false);
   claimRightWorkbench('browser'); store.set({ sharedBrowserOpen: true });
-  ui({ error: '' }); send('open', { url: url }); render();
+  ui({ error: '' }); sendOrQueueBrowserOpen({ url: url }); render();
 }
 export function openSharedBrowser() {
+  ensureBrowserPaneSource();
   if (!eligible() || !store.get('connected')) return;
   ensurePanel();
   claimRightWorkbench('browser');
   store.set({ sharedBrowserOpen: true });
   var browser = store.get('sharedBrowser');
-  if (!browser) send('open');
+  if (!browser) sendOrQueueBrowserOpen();
   else send('view', { visible: true });
   render();
 }
 export function hideSharedBrowser() {
+  setBrowserExpanded(false); recordToolExpansion('browser', false);
+  if (!store.get('savedWorkspaceApplying')) store.set({ pendingBrowserOpen: null });
   closeViewportMenu();
   closeBrowserSettings();
   clearBrowserInput();
@@ -207,9 +235,11 @@ export function hideSharedBrowser() {
   releaseRightWorkbench('browser');
   render();
 }
-export function handleSharedBrowserMessage(msg) {
+export function handleSharedBrowserMessage(msg, fromPane) {
   if (!msg.type || msg.type.indexOf('shared_browser_') !== 0) return false;
-  if (String(msg.sessionId) !== String(store.get('activeSessionId'))) return true;
+  if (forwardBrowserPaneMessage(msg)) return true;
+  if (browserPaneBound() && !fromPane) return true;
+  if (String(msg.sessionId) !== String(browserPaneSessionId() || store.get('activeSessionId'))) return true;
   if (handleBrowserSettingsMessage(msg)) return true;
   if (msg.type === 'shared_browser_state') {
     var old = store.get('sharedBrowser');
@@ -218,6 +248,7 @@ export function handleSharedBrowserMessage(msg) {
     var selected = !msg.focus && old && tabs.find(function (tab) { return tab.id === old.id; });
     selected = selected || msg.browser || tabs[0] || null;
     setBrowserTab(selected);
+    store.set({ savedViewBrowserListReady: true });
     if (msg.present && eligible()) {
       ensurePanel(); claimRightWorkbench('browser'); store.set({ sharedBrowserOpen: true });
     }
@@ -228,23 +259,35 @@ export function handleSharedBrowserMessage(msg) {
     var current = store.get('sharedBrowser');
     if (!desktop() || !store.get('sharedBrowserOpen') || !current || current.id !== msg.browserId || (store.get('sharedBrowserUi') || {}).decoding) return true;
     var sessionId = store.get('activeSessionId');
+    var paneStamp = browserPaneStamp();
     ui({ decoding: true });
     var image = new Image();
     image.onload = function () {
       var latest = store.get('sharedBrowser');
-      if (latest && latest.id === msg.browserId && store.get('activeSessionId') === sessionId && panel()) {
+      if (latest && latest.id === msg.browserId && browserPaneStamp() === paneStamp && store.get('activeSessionId') === sessionId && panel()) {
         var canvas = panel().querySelector('canvas'); canvas.width = image.naturalWidth; canvas.height = image.naturalHeight;
         canvas.getContext('2d').drawImage(image, 0, 0);
         ui({ decoding: false, hasFrame: true }); render();
         registerStudioPaint(msg, canvas, null, canvas);
       }
     };
-    image.onerror = function () { if (store.get('activeSessionId') === sessionId) ui({ decoding: false }); };
+    image.onerror = function () { if (browserPaneStamp() === paneStamp && store.get('activeSessionId') === sessionId) ui({ decoding: false }); };
     image.src = 'data:image/jpeg;base64,' + msg.data;
   }
   return true;
 }
 export function initSharedBrowser() {
+  initBrowserPaneTransport(handleSharedBrowserMessage, function (available) {
+    var applying = store.get('savedWorkspaceApplying');
+    store.set({ savedWorkspaceApplying: true, savedViewBrowserListReady: false });
+    try {
+      clearBrowserInput(); setBrowserTab(null);
+      store.set({ sharedBrowsers: [], sharedBrowserUi: {}, sharedBrowserSettings: {} });
+      if (!available) hideSharedBrowser();
+      render();
+    } finally { store.set({ savedWorkspaceApplying: applying }); }
+  });
+  document.addEventListener('clay-pane-ready', function () { queueMicrotask(resumePendingBrowserOpen); }, true);
   initBrowserLinks();
   var button = document.getElementById('shared-browser-btn');
   if (button) button.onclick = openSharedBrowser;
@@ -261,14 +304,31 @@ export function initSharedBrowser() {
 registerRightWorkbench('browser', hideSharedBrowser);
 store.subscribe(function (state, previous) {
   if (state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.myUserId !== previous.myUserId) {
+    if (browserPaneSessionId() !== null) { render(); return; }
     clearBrowserInput(); releaseRightWorkbench('browser');
-    store.set({ sharedBrowser: null, sharedBrowsers: [], sharedBrowserOpen: false, sharedBrowserUi: {}, sharedBrowserSettings: {} });
+    store.set({ sharedBrowser: null, sharedBrowsers: [], savedViewBrowserListReady: false, sharedBrowserOpen: false, sharedBrowserUi: {}, sharedBrowserSettings: {} });
     if (state.connected) send('state_request');
     render();
   } else if (state.connected !== previous.connected) {
+    store.set({ savedViewBrowserListReady: false });
     if (state.connected) send('state_request');
     render();
   } else if (state.permissions !== previous.permissions || state.dmMode !== previous.dmMode) {
     if (!eligible()) hideSharedBrowser(); renderEntry();
   }
 });
+
+export function restoreExistingBrowser(resource) {
+  if (hasBrowserPaneHost() && !ensureBrowserPaneSource()) return 'pending';
+  if (!store.get('savedViewBrowserListReady')) { send('state_request'); return 'pending'; }
+  if (!store.get('connected') || !store.get('controlRuntimeId')) return 'pending';
+  ensurePanel();
+  var browser = (store.get('sharedBrowsers') || []).find(function (item) { return item.id === resource.id && item.phase !== 'ended'; });
+  var exact = browser && resource.runtimeId === store.get('controlRuntimeId') && resource.sessionOriginId === store.get('sessionOriginId');
+  claimRightWorkbench('browser'); store.set({ sharedBrowserOpen: true });
+  if (exact) { setBrowserTab(browser); send('view', { visible: true }); ui({ error: '' }); render(); return 'restored'; }
+  ui({ error: 'This saved browser is unavailable in the current conversation. No replacement browser was opened.' }); render();
+  return 'unavailable';
+}
+
+export function setBrowserExpanded(enabled) { ui({ fullscreen: !!enabled }); if (document.getElementById('shared-browser-panel')) render(); }

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

@@ -296,6 +296,7 @@ export function createSplitPane(pane, closePane) {
   if (!vendorIcon.hidden) vendorIcon.src = VENDOR_AVATARS[vendor]; vendorIcon.alt = ""; vendorIcon.title = VENDOR_NAMES[vendor] || vendor; header.appendChild(vendorIcon);
   var title = document.createElement("span"); title.className = "split-pane-title"; title.textContent = pane.title; title.title = "Rename session";
   title.addEventListener("click", function () { if (title.getAttribute('aria-disabled') === 'true' || !syncPaneHeaderState(paneEl)) return; var current = sessionById(Number(paneEl.dataset.sessionId)); if (current) startPaneRename(header, title, { sessionId: current.id, title: current.title }); }); header.appendChild(title);
+  var dragSpace = document.createElement("span"); dragSpace.className = "split-pane-drag-space"; dragSpace.title = "Drag to rearrange panes"; dragSpace.setAttribute("aria-hidden", "true"); header.appendChild(dragSpace);
   var frame = document.createElement("iframe"); frame.className = "split-pane-frame"; frame.dataset.projectSlug = pane.slug;
   frame.dataset.sessionId = String(pane.sessionId); frame.src = paneUrl(pane); frame.title = pane.title;
   frame.dataset.sessionOriginId = session && session.sessionOriginId || '';

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

@@ -0,0 +1,90 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { livePaneBinding, samePaneBinding } from './pane-binding.js';
+import { layoutScope, currentLayoutScope } from './split-view-layout-scope.js';
+import { presentationDropTree } from './split-view-presentation-drop.js';
+import { rectangles } from './split-view-layout-client.js';
+
+function activeView() {
+  return (store.get('projectSplitViews') || []).find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
+}
+function reducedMotion() { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+export function captureDragPreview(drag, host) {
+  var settling = store.get('projectSplitViewDragSettling');
+  if (settling && settling.timer) clearTimeout(settling.timer);
+  store.set({ projectSplitViewDragSettling: null });
+  var view = activeView();
+  drag.preview = { host: host, socket: getWs(), slug: store.get('currentSlug'), owner: store.get('myUserId'), projectOwner: store.get('currentProjectOwnerId'),
+    scope: view && layoutScope(view), width: host.clientWidth, height: host.clientHeight, tree: null,
+    panes: Array.from(host.querySelectorAll(':scope > .split-pane:not(.split-pane-cached)')).filter(function (pane) {
+      return !pane.hidden && pane.getBoundingClientRect().width > 0;
+    }).map(function (pane) {
+      var frame = pane.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
+      return { pane: pane, frame: frame, document: frame && frame.contentDocument, window: frame && frame.contentWindow,
+        binding: live && live.binding, rect: pane.getBoundingClientRect() };
+    }) };
+}
+export function dragPreviewCurrent(drag) {
+  var preview = drag.preview;
+  return !!preview && preview.socket === getWs() && preview.slug === store.get('currentSlug') && preview.owner === store.get('myUserId') &&
+    preview.projectOwner === store.get('currentProjectOwnerId') && store.get('connected') && !store.get('projectSplitViewDividerDrag') && (!preview.scope || currentLayoutScope(preview.scope)) &&
+    preview.width === preview.host.clientWidth && preview.height === preview.host.clientHeight && preview.panes.every(function (entry) {
+      var live = entry.frame && entry.frame.clayPane && entry.frame.clayPane.identity();
+      return entry.pane.isConnected && entry.frame.contentDocument === entry.document && entry.frame.contentWindow === entry.window &&
+        live && samePaneBinding(live.binding, entry.binding) && livePaneBinding(entry.frame);
+    });
+}
+// Hit-test the starting layout, never panes that are travelling under the hand.
+export function dragPreviewPaneAt(drag, x, y) {
+  var entries = drag && drag.preview && drag.preview.panes || [];
+  return entries.find(function (entry) {
+    var r = entry.rect; return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+  });
+}
+export function renderDragPreview(drag, target) {
+  var preview = drag.preview, view = activeView();
+  if (!preview || !view || !dragPreviewCurrent(drag)) return null;
+  var sourceView = (store.get('projectSplitViews') || []).find(function (item) { return item.id === drag.sourceViewId; });
+  var tree = target && !target.sidebar && target.viewId === view.id && sourceView && sourceView.id === view.id && !store.get('projectSplitViewFocusedOrigin') ?
+    presentationDropTree(drag, target, sourceView, view) : null;
+  if (JSON.stringify(tree) === JSON.stringify(preview.tree)) return preview.dropRect || null;
+  preview.tree = tree;
+  preview.host.classList.add('split-view-drag-preview');
+  store.set({ projectSplitViewPreviewTree: tree, projectSplitViewPreviewScope: preview.scope });
+  preview.dropRect = null;
+  if (tree) {
+    var style = window.getComputedStyle(preview.host), left = parseFloat(style.paddingLeft) || 0, top = parseFloat(style.paddingTop) || 0;
+    var geometry = rectangles(tree, preview.width - left - (parseFloat(style.paddingRight) || 0), preview.height - top - (parseFloat(style.paddingBottom) || 0), 7);
+    var rect = geometry.panes[drag.origin];
+    if (rect) preview.dropRect = { left: left + rect.x, top: top + rect.y, width: rect.width, height: rect.height };
+  }
+  return preview.dropRect;
+}
+function settleMotion() {
+  var settling = store.get('projectSplitViewDragSettling');
+  if (!settling || settling.timer || store.get('projectSplitViewDrag') || store.get('projectSplitViewPending')) return;
+  settling.timer = setTimeout(function () {
+    if (store.get('projectSplitViewDragSettling') !== settling) return;
+    settling.host.classList.remove('split-view-drag-preview');
+    store.set({ projectSplitViewDragSettling: null });
+  }, reducedMotion() ? 0 : 320);
+}
+export function restoreDragPreview(drag, keep) {
+  var preview = drag && drag.preview;
+  if (!preview) return;
+  if (!keep && preview.tree && store.get('projectSplitViewPreviewTree') === preview.tree) {
+    store.set({ projectSplitViewPreviewTree: null, projectSplitViewPreviewScope: null });
+  }
+  var previous = store.get('projectSplitViewDragSettling');
+  if (previous && previous.timer) clearTimeout(previous.timer);
+  store.set({ projectSplitViewDragSettling: { host: preview.host, timer: null } });
+  settleMotion();
+}
+// Preserve transcript anchors until animated width/height changes have settled.
+export function afterPaneMotion(host, callback) {
+  window.requestAnimationFrame(function () {
+    if (host.classList.contains('split-view-drag-preview') && !reducedMotion()) setTimeout(callback, 300);
+    else callback();
+  });
+}
+store.subscribe(function () { settleMotion(); });

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

@@ -24,7 +24,7 @@ export function validateTree(tree, expectedIds) {
         !Number.isFinite(node.ratio) || node.ratio < MIN_RATIO || node.ratio > MAX_RATIO) return false;
     return walk(node.left, depth + 1) && walk(node.right, depth + 1);
   }
-  valid = walk(tree, 0) && ids.length >= 2 && ids.length <= MAX_SESSIONS && new Set(ids).size === ids.length;
+  valid = (tree === null || walk(tree, 0)) && ids.length >= 0 && ids.length <= MAX_SESSIONS && new Set(ids).size === ids.length;
   if (valid && expectedIds) {
     valid = Array.isArray(expectedIds) && expectedIds.length === ids.length &&
       expectedIds.every(function (id) { return ids.indexOf(id) !== -1; });