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

package/lib/public/modules/server-settings-controls.js

@@ -4,6 +4,23 @@ import { showToast } from './utils.js';
 import { confirmSettingsAction, clearSettingsDraft, setSettingsDraft } from './server-settings-state.js';
 import { enhanceSettingsSelects } from './settings-select.js';
 
+var controlSettings = {
+  set_keep_awake: { config: 'keepAwake', field: 'value' },
+  set_image_retention: { config: 'imageRetentionDays', field: 'days' },
+  set_update_channel: { config: 'updateChannel', field: 'channel' }
+};
+function controlValue(input, type) {
+  if (type === 'set_image_retention') return Number(input.value);
+  if (type === 'set_update_channel') return input.checked ? 'beta' : 'stable';
+  return input.checked;
+}
+function savedControlValue(type) {
+  var value = (store.get('serverSettingsConfig') || {})[controlSettings[type].config];
+  if (type === 'set_image_retention') return value === undefined ? 7 : Number(value);
+  if (type === 'set_update_channel') return value === 'beta' ? 'beta' : 'stable';
+  return !!value;
+}
+
 function status(id, text) {
   var el = document.getElementById(id);
   if (el) { el.textContent = text; el.classList.remove('hidden'); }
@@ -19,7 +36,7 @@ function sendSetting(type, values, buttonId, statusId) {
   if (input) { input.disabled = true; input.dispatchEvent(new Event('settings-sync')); }
   status(statusId, 'Saving…');
   var pending = Object.assign({}, store.get('serverSettingsPending') || {});
-  pending[type] = { buttonId: buttonId, statusId: statusId };
+  pending[type] = { buttonId: buttonId, statusId: statusId, submitted: controlSettings[type] ? values[controlSettings[type].field] : null };
   store.set({ serverSettingsPending: pending });
   ws.send(JSON.stringify(Object.assign({ type: type }, values)));
   setTimeout(function () {
@@ -51,14 +68,25 @@ export function handleServerSettingResult(msg) {
   var input = request.buttonId === 'settings-pin-save-btn' ? document.getElementById('settings-pin-input') : request.buttonId.endsWith('-save') ? document.getElementById(request.buttonId.slice(0, -5)) : null;
   if (input) { input.disabled = false; input.dispatchEvent(new Event('settings-sync')); }
   status(request.statusId, msg.ok ? 'Saved. ' + (msg.timing || '') : (msg.error || 'Could not save. Retry your change.'));
-  if (msg.ok) clearSettingsDraft(type);
+  if (msg.ok) {
+    var setting = controlSettings[type];
+    if (setting) {
+      var config = Object.assign({}, store.get('serverSettingsConfig') || {});
+      config[setting.config] = request.submitted;
+      store.set({ serverSettingsConfig: config });
+      var dirty = input && controlValue(input, type) !== savedControlValue(type);
+      setSettingsDraft(type, dirty);
+      if (button) button.hidden = !dirty;
+      if (dirty) status(request.statusId, 'Submitted value saved. Newer edits remain unsaved.');
+    } else clearSettingsDraft(type);
+  }
 }
 
 function finishSetting(msg, id, field) {
   handleServerSettingResult(msg);
   var el = document.getElementById(id);
   var key = 'set_keep_awake';
-  if (!msg.type.endsWith('_result') && (store.get('serverSettingsDrafts') || {})[key]) return;
+  if ((store.get('serverSettingsDrafts') || {})[key]) return;
   if (el && msg.ok !== false && msg[field] !== undefined) el.checked = !!msg[field];
 }
 
@@ -108,7 +136,8 @@ export function initServerControls() {
     var save = document.createElement('button'); save.type = 'button'; save.className = 'settings-btn-sm'; save.textContent = 'Save changes';
     save.id = entry[0] + '-save'; save.hidden = true; receipt.insertAdjacentElement('beforebegin', save);
     input.onchange = function () {
-      setSettingsDraft(entry[1], true); save.hidden = false; receipt.textContent = entry[3];
+      var dirty = controlValue(input, entry[1]) !== savedControlValue(entry[1]);
+      setSettingsDraft(entry[1], dirty); save.hidden = !dirty; receipt.textContent = dirty ? entry[3] : 'No unsaved changes';
     };
     save.onclick = function () {
       var values = {}; values[entry[2]] = entry[2] === 'days' ? Number(input.value) : entry[2] === 'channel' ? (input.checked ? 'beta' : 'stable') : input.checked;

package/lib/public/modules/session-folder-toolbar.js

@@ -165,7 +165,7 @@ export function renderFolderToolbar(surface, displayCounts) {
   view.setAttribute("aria-haspopup", "true");
   var viewState = store.get('sessionFolderViewMenu');
   view.setAttribute("aria-expanded", String(!!(viewState && viewState.surface === surface)));
-  view.innerHTML = iconHtml("sliders-horizontal") + "<span>View</span>";
+  view.innerHTML = iconHtml("sliders-horizontal") + "<span>View options</span>";
   view.addEventListener("click", function () { toggleViewMenu(surface); });
 
   var magnifier = document.createElement("button");

package/lib/public/modules/session-tool-item.js

@@ -0,0 +1,86 @@
+import { clayToolGroupSummary } from './clay-tool-presentation.js';
+import { iconHtml } from './icons.js';
+
+// Shared stateless activity chrome for live sessions and read-only transcripts.
+export function createSessionToolItem(id, name) {
+  var el = document.createElement("div");
+  el.className = "tool-item";
+  if (id != null) el.dataset.toolId = id;
+  el.innerHTML =
+    '<div class="tool-header">' +
+    '<span class="tool-chevron">' + iconHtml("chevron-right") + '</span>' +
+    '<span class="tool-bullet"></span>' +
+    '<span class="tool-name"></span>' +
+    '<span class="tool-desc"></span>' +
+    '<span class="tool-status-icon">' + iconHtml("loader", "icon-spin") + '</span>' +
+    '</div>' +
+    '<div class="tool-subtitle">' +
+    '<span class="tool-connector">&#9492;</span>' +
+    '<span class="tool-subtitle-text">Running...</span>' +
+    '</div>';
+
+  el.querySelector(".tool-name").textContent = name;
+
+  return el;
+}
+
+export function createSessionToolGroup(avatarUrl) {
+  var group = document.createElement('div'); group.className = 'tool-group';
+  var parent = group;
+  if (avatarUrl) {
+    var image = document.createElement('img'); image.className = 'dm-bubble-avatar dm-bubble-avatar-mate'; image.src = avatarUrl; image.alt = ''; group.appendChild(image);
+    parent = document.createElement('div'); parent.className = 'dm-bubble-content'; group.appendChild(parent);
+  }
+  parent.innerHTML = '<div class="tool-group-header" style="display:none"><span class="tool-group-chevron">' + iconHtml('chevron-right') + '</span><span class="tool-group-bullet"></span><span class="tool-group-label">Running...</span><span class="tool-group-status-icon">' + iconHtml('loader', 'icon-spin') + '</span></div><div class="tool-group-items"></div>';
+  return group;
+}
+
+export function sessionToolGroupSummary(group, tools) {
+  var claySummary = clayToolGroupSummary(group, tools);
+  if (claySummary) return claySummary;
+  var names = group.toolNames;
+  var count = names.length;
+  var allDone = group.doneCount >= count;
+
+  // Count by tool name
+  var counts = {};
+  for (var i = 0; i < names.length; i++) {
+    counts[names[i]] = (counts[names[i]] || 0) + 1;
+  }
+  var uniqueNames = Object.keys(counts);
+
+  if (uniqueNames.length === 1) {
+    var name = uniqueNames[0];
+    var n = counts[name];
+    if (allDone) {
+      switch (name) {
+        case "Read": return "Read " + n + " file" + (n > 1 ? "s" : "");
+        case "Edit": return "Edited " + n + " file" + (n > 1 ? "s" : "");
+        case "Write": return "Wrote " + n + " file" + (n > 1 ? "s" : "");
+        case "Bash": return "Ran " + n + " command" + (n > 1 ? "s" : "");
+        case "Grep": return "Searched " + n + " pattern" + (n > 1 ? "s" : "");
+        case "Glob": return "Found " + n + " pattern" + (n > 1 ? "s" : "");
+        case "Task": return "Ran " + n + " task" + (n > 1 ? "s" : "");
+        case "WebSearch": return "Searched " + n + " quer" + (n > 1 ? "ies" : "y");
+        case "WebFetch": return "Fetched " + n + " URL" + (n > 1 ? "s" : "");
+        default: return "Ran " + n + " tool" + (n > 1 ? "s" : "");
+      }
+    }
+    switch (name) {
+      case "Read": return "Reading " + n + " file" + (n > 1 ? "s" : "") + "...";
+      case "Edit": return "Editing " + n + " file" + (n > 1 ? "s" : "") + "...";
+      case "Write": return "Writing " + n + " file" + (n > 1 ? "s" : "") + "...";
+      case "Bash": return "Running " + n + " command" + (n > 1 ? "s" : "") + "...";
+      case "Grep": return "Searching " + n + " pattern" + (n > 1 ? "s" : "") + "...";
+      case "Glob": return "Finding " + n + " pattern" + (n > 1 ? "s" : "") + "...";
+      case "Task": return "Running " + n + " task" + (n > 1 ? "s" : "") + "...";
+      case "WebSearch": return "Searching " + n + " quer" + (n > 1 ? "ies" : "y") + "...";
+      case "WebFetch": return "Fetching " + n + " URL" + (n > 1 ? "s" : "") + "...";
+      default: return "Running " + n + " tool" + (n > 1 ? "s" : "") + "...";
+    }
+  }
+
+  // Mixed tools
+  if (allDone) return "Ran " + count + " tools";
+  return "Running " + count + " tools...";
+}

package/lib/public/modules/settings-select.js

@@ -55,8 +55,9 @@ export function enhanceSettingsSelects(root) {
         item.hidden = option.hidden;
         item.onclick = function (event) {
           event.preventDefault();
+          var changed = select.value !== option.value;
           select.value = option.value;
-          select.dispatchEvent(new Event('change', { bubbles: true }));
+          if (changed) select.dispatchEvent(new Event('change', { bubbles: true }));
           sync();
           close(true);
         };

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

@@ -7,37 +7,53 @@ export function renderBrowserTabs(el, select, send) {
   var selected = store.get('sharedBrowser');
   var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase, tab.incognito, tab.personalCookiesAvailable]; }), selected && selected.id, store.get('connected')]);
   if (bar.dataset.key === key) return;
-  bar.dataset.key = key;
+  var focused = bar.contains(document.activeElement) ? document.activeElement : null;
+  var focusedId = focused && focused.dataset.browserId, focusedAction = focused && focused.dataset.tabAction;
+  var previousSelection = bar.dataset.selected;
+  var previousStrip = bar.querySelector('.shared-browser-tab-list'), scrollLeft = previousStrip ? previousStrip.scrollLeft : 0;
+  bar.dataset.key = key; bar.dataset.selected = selected && selected.id || '';
   bar.replaceChildren();
+  var strip = document.createElement('div'); strip.className = 'shared-browser-tab-list'; strip.setAttribute('role', 'presentation');
+  bar.appendChild(strip);
   tabs.forEach(function (tab, index) {
-    var item = document.createElement('div'); item.className = 'shared-browser-tab';
+    var item = document.createElement('div'); item.className = 'shared-browser-tab'; item.setAttribute('role', 'presentation');
+    var active = !!selected && selected.id === tab.id;
     var button = document.createElement('button'); button.type = 'button'; button.setAttribute('role', 'tab');
-    button.setAttribute('aria-selected', String(!!selected && selected.id === tab.id));
-    var title = 'Tab ' + (index + 1);
-    try { if (tab.url) title = new URL(tab.url).hostname; } catch (e) {}
-    var label = document.createElement('span'); label.textContent = title + (tab.personalCookiesAvailable && tab.incognito ? ' · Incognito' : '');
-    var owner = document.createElement('small'); owner.textContent = tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'Shared' : 'You only';
-    button.append(label, owner); button.title = title + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + (tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.');
+    button.dataset.browserId = tab.id; button.dataset.tabAction = 'select';
+    button.setAttribute('aria-selected', String(active)); button.tabIndex = active ? 0 : -1;
+    var title = 'New tab';
+    try { if (tab.url) title = new URL(tab.url).hostname || 'New tab'; } catch (e) {}
+    var mode = tab.phase === 'ended' ? 'Ended' : tab.phase === 'starting' ? 'Starting' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.';
+    var description = title + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + mode;
+    var label = document.createElement('span'); label.className = 'shared-browser-tab-label'; label.textContent = title;
+    button.innerHTML = iconHtml(tab.personalCookiesAvailable && tab.incognito ? 'glasses' : 'globe');
+    button.appendChild(label); button.setAttribute('aria-label', description); button.setAttribute('data-tip', description);
+    item.dataset.phase = tab.phase; item.dataset.control = tab.control;
     button.onclick = function () { select(tab.id); };
     button.onkeydown = function (event) {
       var next = event.key === 'ArrowRight' ? (index + 1) % tabs.length : event.key === 'ArrowLeft' ? (index + tabs.length - 1) % tabs.length : event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : -1;
       if (next < 0) return;
       event.preventDefault(); select(tabs[next].id); bar.querySelectorAll('[role="tab"]')[next].focus();
     };
-    var close = document.createElement('button'); close.type = 'button'; close.textContent = '×'; close.setAttribute('aria-label', 'Close browser tab ' + (index + 1)); close.disabled = !store.get('connected');
+    var close = document.createElement('button'); close.type = 'button'; close.className = 'shared-browser-tab-close'; close.innerHTML = iconHtml('x');
+    close.dataset.browserId = tab.id; close.dataset.tabAction = 'close';
+    close.setAttribute('aria-label', 'Close browser tab ' + (index + 1)); close.setAttribute('data-tip', 'Close tab'); close.disabled = !store.get('connected');
     close.onclick = function () { send('close', { browserId: tab.id }); };
-    item.append(button, close); bar.appendChild(item);
+    item.append(button, close); strip.appendChild(item);
   });
-  var add = document.createElement('button'); add.type = 'button'; add.textContent = '+'; add.setAttribute('aria-label', 'New browser tab'); add.disabled = !store.get('connected');
-  add.title = selected && selected.personalCookiesAvailable ? 'New tab · Personal browser' : 'New incognito tab';
-  add.onclick = function () { send('open', { newTab: true }); };
-  bar.appendChild(add);
-  if (selected && selected.personalCookiesAvailable) {
-    var incognito = document.createElement('button'); incognito.type = 'button';
-    incognito.innerHTML = iconHtml('glasses');
-    incognito.setAttribute('aria-label', 'New incognito tab'); incognito.title = 'New incognito tab · Site data is not saved';
-    incognito.disabled = !store.get('connected');
-    incognito.onclick = function () { send('open', { newTab: true, incognito: true }); };
-    bar.appendChild(incognito); refreshIcons();
+  function addButton(icon, label, description, fields, action) {
+    var button = document.createElement('button'); button.type = 'button'; button.className = 'shared-browser-new-tab';
+    button.innerHTML = iconHtml(icon); button.dataset.tabAction = action;
+    button.setAttribute('aria-label', label); button.setAttribute('data-tip', description); button.disabled = !store.get('connected');
+    button.onclick = function () { send('open', fields); }; bar.appendChild(button);
   }
+  addButton('plus', 'New browser tab', selected && selected.personalCookiesAvailable ? 'New tab · Personal browser' : 'New incognito tab', { newTab: true }, 'new');
+  if (selected && selected.personalCookiesAvailable) addButton('glasses', 'New incognito tab', 'New incognito tab · Site data is not saved', { newTab: true, incognito: true }, 'incognito');
+  refreshIcons();
+  strip.scrollLeft = scrollLeft;
+  var buttons = Array.from(bar.querySelectorAll('button'));
+  var replacement = focused && buttons.find(function (button) { return button.dataset.browserId === focusedId && button.dataset.tabAction === focusedAction; });
+  if (focused) (replacement || bar.querySelector('[aria-selected="true"]') || buttons[0]).focus({ preventScroll: true });
+  var current = bar.querySelector('[aria-selected="true"]');
+  if (current && previousSelection !== bar.dataset.selected) current.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 }

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/sidebar-projects.js

@@ -15,7 +15,7 @@ import { openAddProjectModal } from './project-start-dialog.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
 import { isExternalWorktree, externalWorktreeTooltip, appendExternalWorktreeBadge } from './worktree-location.js';
-import { groupProjects } from './project-grouping.js';
+import { groupProjects, getProjectAbbrev } from './project-grouping.js';
 import { showProjectAccessPopover } from './project-access.js';
 import { renderProjectMates, mateForWorkspace } from './project-mate-navigation.js';
 import { openProjectCreateChoice } from './project-mate-creation-workspace.js';
@@ -337,15 +337,6 @@ export function initSidebarProjects() {
 export function getCachedProjectList() { return cachedProjectList; }
 export function getCachedCurrentSlug() { return cachedCurrentSlug; }
 
-function getProjectAbbrev(name) {
-  if (!name) return "?";
-  var words = name.replace(/[^a-zA-Z0-9\s]/g, "").trim().split(/\s+/);
-  if (words.length >= 2) {
-    return (words[0][0] + words[1][0]).toUpperCase();
-  }
-  return name.substring(0, 2).toUpperCase();
-}
-
 export { getProjectAbbrev };
 
 // --- Project context menu ---

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-session-empty-pane.js

@@ -0,0 +1,47 @@
+import { store } from './store.js';
+import { currentLayoutScope } from './split-view-layout-scope.js';
+
+export function clearEmptySplit(host) {
+  var pane = host && host.querySelector(':scope > .split-session-empty-pane');
+  var menu = document.getElementById('split-view-create-menu');
+  if (pane && menu && pane.contains(menu)) {
+    menu.hidden = true;
+    if (menu.contains(document.activeElement)) document.activeElement.blur();
+    if (pane.contains(menu)) document.body.appendChild(menu);
+  }
+  if (pane) pane.remove();
+  var divider = host && host.querySelector(':scope > .split-session-reserved-divider');
+  if (divider) divider.remove();
+}
+
+export function reserveEmptySplit(host, geometry, inset) {
+  var state = store.get('splitSessionPicker');
+  var receipt = state && state.receipt;
+  var target = receipt && geometry.panes[receipt.origin];
+  if (!state || !state.side || !target || !currentLayoutScope(receipt.scope)) { clearEmptySplit(host); return false; }
+  var side = state.side, vertical = side === 'top' || side === 'bottom', before = side === 'left' || side === 'top';
+  var size = vertical ? 'height' : 'width', axis = vertical ? 'y' : 'x';
+  var half = Math.max(0, (target[size] - 7) / 2);
+  var original = Object.assign({}, target), empty = Object.assign({}, target), gap = Object.assign({}, target);
+  original[size] = half; empty[size] = half; gap[size] = 7;
+  gap[axis] += half;
+  if (before) original[axis] += half + 7; else empty[axis] += half + 7;
+  geometry.panes[receipt.origin] = original;
+  var pane = host.querySelector(':scope > .split-session-empty-pane');
+  if (!pane) {
+    pane = document.createElement('section'); pane.className = 'split-session-empty-pane';
+    pane.innerHTML = '<div class="split-session-empty-body"></div>';
+    host.appendChild(pane);
+  }
+  pane.dataset.side = side; pane.setAttribute('aria-label', 'Empty ' + side + ' split');
+  var menu = document.getElementById('split-view-create-menu');
+  var body = pane.querySelector('.split-session-empty-body');
+  if (menu && menu.parentNode !== body) body.appendChild(menu);
+  var divider = host.querySelector(':scope > .split-session-reserved-divider');
+  if (!divider) { divider = document.createElement('div'); divider.className = 'split-session-reserved-divider'; divider.setAttribute('aria-hidden', 'true'); host.appendChild(divider); }
+  [[pane, empty], [divider, gap]].forEach(function (entry) {
+    entry[0].style.left = inset.left + entry[1].x + 'px'; entry[0].style.top = inset.top + entry[1].y + 'px';
+    entry[0].style.width = entry[1].width + 'px'; entry[0].style.height = entry[1].height + 'px';
+  });
+  return true;
+}