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

package/lib/public/modules/pane-header-runtime.js

@@ -0,0 +1,18 @@
+import { store } from './store.js';
+
+// Read-only presentation metadata from this pane's committed authenticated view.
+export function paneHeaderRuntime() {
+  var state = store.snap(), binding = state.paneCommittedBinding;
+  if (!binding || !state.connected || !state.paneReady || state.paneSuspended || state.panePendingBinding ||
+      state.activeSessionId !== binding.sessionId || state.sessionOriginId !== binding.sessionOriginId ||
+      state.currentSlug !== binding.projectSlug || (state.myUserId || null) !== (binding.viewerId || null)) return null;
+  return { binding: binding, vendor: state.currentVendor, model: state.currentModel || '' };
+}
+
+export function initPaneHeaderRuntime(frame) {
+  store.subscribe(function (state, previous) {
+    if (state.currentModel === previous.currentModel && state.currentVendor === previous.currentVendor) return;
+    if (!paneHeaderRuntime() || frame.contentWindow !== window || frame.contentDocument !== document) return;
+    frame.dispatchEvent(new window.parent.CustomEvent('clay-pane-config'));
+  });
+}

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 @@
-// Single arbitration point for the mutually exclusive right-side workbench.
+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() {
@@ -25,88 +26,136 @@ function ensureLayoutPreference() {
   });
 }
 
+function dockedOwners() { return store.get('rightWorkbenchDockedOwners') || []; }
+function openOwner(name) { return store.get('rightWorkbenchOwner') === name || dockedOwners().indexOf(name) !== -1; }
+export function rightWorkbenchRevisionFor(name) {
+  var revisions = store.get('rightWorkbenchPanelRevisions') || {};
+  return revisions[name] == null ? store.get('rightWorkbenchRevision') || 0 : revisions[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;
+  var owners = dockedOwners().filter(function (item) { return item !== name; }), previous = store.get('rightWorkbenchOwner');
+  if (docked) owners.push(name);
+  publish(docked ? previous : name, owners, store.get('rightWorkbenchPanelRevisions') || {});
+  if (!docked && previous && previous !== name && owners.indexOf(previous) === -1 && closers[previous]) closers[previous]();
+}
 function renderLayoutControls() {
   if (typeof document === 'undefined') return;
   var main = document.getElementById('main-panels');
   if (!main) return;
-  var state = store.get('workbenchLayoutPreference') || {}, docked = state.mode === 'docked';
-  main.dataset.workbenchMode = docked ? 'docked' : 'overlay';
-  var panel = document.getElementById(panelIds[store.get('rightWorkbenchOwner')]);
-  if (!panel) return;
-  var header = panel.querySelector(':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;
-    button = document.createElement('button'); button.type = 'button'; button.className = 'workbench-layout-toggle';
-    button.addEventListener('click', function () {
-      var current = store.get('workbenchLayoutPreference') || {};
-      if (!current.ready || current.loading || current.saving) { ensureLayoutPreference(); return; }
-      var owner = store.get('myUserId'), project = store.get('currentSlug');
-      function currentTarget() { return button.isConnected && owner === store.get('myUserId') && project === store.get('currentSlug'); }
-      import('./workbench-layout-preference.js').then(function (api) {
-        var fresh = store.get('workbenchLayoutPreference') || {};
-        if (!currentTarget() || fresh.mode !== current.mode || fresh.revision !== current.revision || fresh.loading || fresh.saving || !fresh.ready) return false;
-        return api.saveWorkbenchLayoutMode(current.mode === 'docked' ? 'overlay' : 'docked');
-      }).then(function (saved) {
-        if (saved === false && currentTarget()) showToast((store.get('workbenchLayoutPreference') || {}).error || 'Workbench layout could not be saved. Try again.', 'error');
-      }).catch(function (error) {
-        if (currentTarget()) showToast(error.message || 'Workbench layout could not be saved. Try again.', 'error');
+  var owners = dockedOwners(), state = store.get('workbenchLayoutPreference') || {};
+  main.dataset.workbenchMode = owners.length ? 'docked' : 'overlay';
+  main.dataset.workbenchDocks = String(owners.length);
+  Object.keys(panelIds).forEach(function (name) {
+    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 > .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, .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);
+        var wasDocked = dockedOwners().indexOf(name) !== -1;
+        function currentTarget() { return button.isConnected && openOwner(name) && owner === store.get('myUserId') && project === store.get('currentSlug') &&
+          revision === rightWorkbenchRevisionFor(name) && wasDocked === (dockedOwners().indexOf(name) !== -1); }
+        import('./workbench-layout-preference.js').then(function (api) {
+          var fresh = store.get('workbenchLayoutPreference') || {};
+          if (!currentTarget() || fresh.mode !== current.mode || fresh.revision !== current.revision || fresh.loading || fresh.saving || !fresh.ready) return false;
+          return api.saveWorkbenchLayoutMode(wasDocked ? 'overlay' : 'docked');
+        }).then(function (saved) {
+          if (!currentTarget()) return;
+          var fresh = store.get('workbenchLayoutPreference') || {};
+          if (saved === true && fresh.ready && fresh.mode === (wasDocked ? 'overlay' : 'docked')) setDocked(name, !wasDocked);
+          else if (saved === false) showToast(fresh.error || 'Workbench layout could not be saved. Try again.', 'error');
+        }).catch(function (error) {
+          if (currentTarget()) showToast(error.message || 'Workbench layout could not be saved. Try again.', 'error');
+        });
       });
-    });
-    var anchor = actions === header ? header.querySelector('[data-knowledge-wide]') : actions.firstElementChild;
-    actions.insertBefore(button, anchor || null);
-  }
-  if (button.dataset.mode !== (docked ? 'docked' : 'overlay')) {
-    button.dataset.mode = docked ? 'docked' : 'overlay';
-    button.innerHTML = iconHtml(docked ? 'layers-2' : 'panel-right');
-    refreshIcons();
-  }
-  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;
-  button.setAttribute('aria-busy', state.loading || state.saving ? 'true' : 'false');
+      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')) {
+      button.dataset.mode = docked ? 'docked' : 'overlay';
+      button.innerHTML = iconHtml(docked ? 'layers-2' : 'panel-right'); refreshIcons();
+    }
+    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');
+    // 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 previousRevision = store.get("rightWorkbenchRevision") || 0;
-  var nextRevision = previousRevision + 1;
-  storeSet(name, nextRevision);
-  var keys = Object.keys(closers);
-  for (var i = 0; i < keys.length; i++) {
-    if (keys[i] === name) continue;
-    try { closers[keys[i]](); } catch (error) { /* one panel must not block another */ }
-  }
+  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]; });
+  revisions[name] = revision;
+  publish(retained, docked, revisions);
+  Object.keys(closers).forEach(function (key) {
+    if (key === name || key === retained || docked.indexOf(key) !== -1) return;
+    try { closers[key](); } catch (error) { /* one panel must not block another */ }
+  });
   if (typeof requestAnimationFrame === 'function') requestAnimationFrame(renderLayoutControls);
-  return nextRevision;
-}
-
-function storeSet(name, value) {
-  store.set({ rightWorkbenchOwner: name, rightWorkbenchRevision: value });
+  return revision;
 }
-
 export function releaseRightWorkbench(name) {
-  if (store.get("rightWorkbenchOwner") !== name) return;
-  storeSet(null, (store.get("rightWorkbenchRevision") || 0) + 1);
+  if (!openOwner(name)) return;
+  var docked = dockedOwners().filter(function (item) { return item !== name; }), revisions = Object.assign({}, store.get('rightWorkbenchPanelRevisions') || {});
+  delete revisions[name];
+  publish(store.get('rightWorkbenchOwner') === name ? docked[docked.length - 1] || null : store.get('rightWorkbenchOwner'), docked, revisions);
 }
-
 export function isRightWorkbenchCurrent(name, expectedRevision) {
-  return store.get("rightWorkbenchOwner") === name && store.get("rightWorkbenchRevision") === expectedRevision;
+  return openOwner(name) && rightWorkbenchRevisionFor(name) === expectedRevision;
 }
-
 export function resetRightWorkbench() {
-  storeSet(null, (store.get("rightWorkbenchRevision") || 0) + 1);
+  publish(null, [], {});
+  Object.keys(closers).forEach(function (name) { try { closers[name](); } catch (error) { /* Clear other panes after a context change. */ } });
 }
-
 store.subscribe(function (state, previous) {
-  if (state.workbenchLayoutPreference !== previous.workbenchLayoutPreference || state.rightWorkbenchOwner !== previous.rightWorkbenchOwner) renderLayoutControls();
-  if (state.currentSlug === previous.currentSlug && state.myUserId === previous.myUserId) return;
-  resetRightWorkbench();
+  if (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId) { resetRightWorkbench(); return; }
+  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 () {
@@ -82,12 +86,18 @@ function ensurePanel() {
 }
 function renderEntry() {
   var browser = store.get('sharedBrowser');
+  var count = (store.get('sharedBrowsers') || []).length;
   var ready = !!store.get('connected') && !!store.get('activeSessionId');
   var label = !store.get('connected') ? 'Browser · Connecting…' : !store.get('activeSessionId') ? 'Browser · Loading session…' : browser ? 'View browser' : 'Open browser';
   ['shared-browser-btn', 'shared-browser-toggle-btn'].forEach(function (id) {
     var button = document.getElementById(id);
     if (!button) return;
     var title = id === 'shared-browser-toggle-btn' && ready && store.get('sharedBrowserOpen') ? 'Hide browser' : label;
+    if (id === 'shared-browser-toggle-btn') {
+      var badge = button.querySelector('.shared-browser-count');
+      if (badge) { badge.textContent = String(count); badge.classList.toggle('hidden', count === 0); }
+      if (count) title += ' · ' + count + (count === 1 ? ' tab' : ' tabs');
+    }
     button.classList.toggle('hidden', !visibleEntry());
     button.title = ready && browser ? title + ' · ' + browser.phase : title;
     button.setAttribute('aria-label', title);
@@ -172,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.');
@@ -180,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();
@@ -201,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');
@@ -212,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 });
     }
@@ -222,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;
@@ -255,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

@@ -1,3 +1,4 @@
+import { renderPaneRuntime } from './split-pane-runtime.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { copyToClipboard } from './utils.js';
@@ -295,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 || '';
@@ -343,7 +345,7 @@ export function createSplitPane(pane, closePane) {
   }); header.appendChild(sidebarButton);
   var search = document.createElement("button"); search.type = "button"; search.className = "split-pane-search"; search.setAttribute("aria-label", "Search this session"); search.title = "Search this session"; search.innerHTML = iconHtml("search");
   header.insertBefore(search, close);
-  frame.addEventListener('clay-pane-ready', function () {
+  function refreshReadyHeader() {
     if (paneEl.classList.contains('split-pane-cached')) return;
     var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId), current = sessionById(id);
     var live = frame.clayPane && frame.clayPane.identity(), target = paneTarget(store.snap(), getCachedSessions(), id);
@@ -352,7 +354,9 @@ export function createSplitPane(pane, closePane) {
     frame.dataset.sessionOriginId = live.binding.sessionOriginId;
     updateSplitPaneMetadata(paneEl, { slug: frame.dataset.projectSlug, sessionId: id, title: current.title });
     syncPairChrome(paneEl.parentNode, store.get('splitPanes'));
-  });
+  }
+  frame.addEventListener('clay-pane-ready', refreshReadyHeader);
+  frame.addEventListener('clay-pane-config', refreshReadyHeader);
   frame.addEventListener('clay-pane-activation-failed', function () {
     if (paneEl.classList.contains('split-pane-cached')) return;
     syncPaneHeaderState(paneEl);
@@ -453,12 +457,7 @@ export function updateSplitPaneMetadata(paneEl, pane) {
   var sidebarButton = paneEl.querySelector('.split-pane-sidebar');
   if (sidebarButton) sidebarButton.hidden = store.get('projectSplitViewSingletonOrigin') !== (session && session.sessionOriginId) && paneEl.dataset.active !== 'true';
   if (vendor) { var vendorName = session && session.vendor || "unknown"; vendor.hidden = !VENDOR_AVATARS[vendorName]; if (!vendor.hidden) vendor.src = VENDOR_AVATARS[vendorName]; vendor.title = VENDOR_NAMES[vendorName] || vendorName; }
-  var runtime = paneEl.querySelector('.split-view-runtime');
-  var runtimeName = session && session.vendor || "unknown", runtimeModelName = session && typeof session.model === "string" && session.model.trim() || "Model unavailable";
-  var runtimeIcon = runtime.querySelector('.split-view-runtime-icon'), runtimeModel = runtime.querySelector('.split-view-model');
-  if (runtimeIcon) { runtimeIcon.hidden = !VENDOR_AVATARS[runtimeName]; if (!runtimeIcon.hidden) runtimeIcon.src = VENDOR_AVATARS[runtimeName]; runtimeIcon.title = VENDOR_NAMES[runtimeName] || runtimeName; runtimeIcon.alt = ""; }
-  if (runtimeModel) { runtimeModel.textContent = runtimeModelName; runtimeModel.title = (VENDOR_NAMES[runtimeName] || runtimeName) + " · " + runtimeModelName; }
-  runtime.setAttribute("aria-label", (VENDOR_NAMES[runtimeName] || runtimeName) + " · " + runtimeModelName);
+  renderPaneRuntime(paneEl, session);
   renderPaneWorkers(paneEl, session);
   updatePaneFullAccessButton(paneEl.querySelector('.split-pane-full-access'), session);
   syncPaneHeaderState(paneEl);

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

@@ -0,0 +1,23 @@
+import { store } from './store.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { livePaneBinding, samePaneBinding, samePaneTarget, paneTarget } from './pane-binding.js';
+import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
+import { modelEntryValue } from './model-picker.js';
+
+export function renderPaneRuntime(paneEl, session) {
+  var runtime = paneEl.querySelector('.split-view-runtime');
+  if (!runtime) return;
+  var vendor = session && session.vendor || 'unknown', model = modelEntryValue(session && session.model);
+  var frame = paneEl.querySelector('.split-pane-frame'), controller = frame && frame.clayPane;
+  var live = controller && controller.identity(), target = session && paneTarget(store.snap(), getCachedSessions(), session.id);
+  if (session && live && live.ready && live.sessionId === session.id && !frame.dataset.requestedSessionId &&
+      samePaneTarget(target, live.binding) && livePaneBinding(frame) && typeof controller.headerRuntime === 'function') {
+    var observed = controller.headerRuntime();
+    if (observed && observed.vendor === vendor && samePaneBinding(live.binding, observed.binding)) model = modelEntryValue(observed.model) || model;
+  }
+  var label = model || (vendor === 'unknown' ? 'Model unavailable' : 'Provider default');
+  var icon = runtime.querySelector('.split-view-runtime-icon'), text = runtime.querySelector('.split-view-model');
+  if (icon) { icon.hidden = !VENDOR_AVATARS[vendor]; if (!icon.hidden) icon.src = VENDOR_AVATARS[vendor]; icon.title = VENDOR_NAMES[vendor] || vendor; icon.alt = ''; }
+  if (text) { text.textContent = label; text.title = (VENDOR_NAMES[vendor] || vendor) + ' · ' + label; }
+  runtime.setAttribute('aria-label', (VENDOR_NAMES[vendor] || vendor) + ' · ' + label);
+}