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

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

@@ -1,24 +1,50 @@
-// Pane chrome uses the existing JS tooltip service, including lazy workbenches.
+// Pane chrome and Worker viewers share the existing delegated tooltip service.
 import { registerTooltip, pruneTooltip } from './tooltip.js';
 
-var HEADERS = '.split-pane-header, .tool-pane-header, .file-viewer-tabbar, .terminal-header, .shared-browser-header, .split-view-workers, #top-bar .top-bar-actions';
+var HEADERS = '.split-pane-header, .tool-pane-header, .file-viewer-tabbar, .terminal-header, .shared-browser-header, .split-view-workers, #top-bar .top-bar-actions, #split-view-worker-popover, body.worker-pane-locked #messages, body.worker-pane-locked #input-area';
+var labels = new WeakMap();
 function sync(header) {
-  header.querySelectorAll('[title], button, [role="button"], a[aria-label]').forEach(function (element) {
-    var label = element.getAttribute('title') || element.getAttribute('data-tip') || element.getAttribute('aria-label');
-    if (!label || !label.trim()) return;
-    if (element.matches('button, [role="button"], a') && (!element.hasAttribute('aria-label') || element.dataset.tooltipGeneratedLabel === 'true' && element.hasAttribute('title'))) {
+  if (header.id === 'split-view-worker-popover' || header.id === 'messages') header.querySelectorAll('.tool-header[role="button"], .tool-group-header[role="button"]').forEach(function (element) {
+    if (element.hasAttribute('aria-label') && element.dataset.tooltipDisclosure !== 'true') return;
+    var name = element.querySelector('.tool-name, .tool-group-label');
+    if (!name) return;
+    element.dataset.tooltipDisclosure = 'true';
+    var label = (element.getAttribute('aria-expanded') === 'true' ? 'Hide ' : 'Show ') + name.textContent + ' details';
+    if (element.getAttribute('aria-label') !== label) element.setAttribute('aria-label', label);
+  });
+  // Move icon-owned native hints to the operable control before removing them.
+  header.querySelectorAll('[title], svg title').forEach(function (element) {
+    var control = element.closest('button, [role="button"], a, [role="img"]');
+    if (!control && element.matches('svg title')) control = element.parentElement;
+    if (!control || control === element) return;
+    var label = element.getAttribute('title') || element.textContent;
+    if (label && !control.hasAttribute('title') && !control.hasAttribute('data-tip') && !control.hasAttribute('aria-label')) control.setAttribute('title', label);
+    if (element.matches('svg title')) element.remove(); else element.removeAttribute('title');
+  });
+  (header.matches('[title], [data-tip]') ? [header] : []).concat(Array.from(header.querySelectorAll('[title], button, [role="button"], a[aria-label], [data-tip]'))).forEach(function (element) {
+    var previous = labels.get(element), tip = element.getAttribute('data-tip'), title = element.getAttribute('title');
+    var explicit = tip && (!previous || previous.explicit || tip !== previous.tip);
+    var aria = element.getAttribute('aria-label');
+    if (previous && aria && previous.aria !== aria) delete element.dataset.tooltipGeneratedLabel;
+    var label = explicit ? tip : title || (previous && previous.source === 'title' ? tip : aria || tip);
+    if (!label || !label.trim()) { element.removeAttribute('title'); return; }
+    if (element.matches('button, [role="button"], a') && (!element.hasAttribute('aria-label') || element.dataset.tooltipGeneratedLabel === 'true' && title)) {
       element.dataset.tooltipGeneratedLabel = 'true';
       if (element.getAttribute('aria-label') !== label) element.setAttribute('aria-label', label);
     }
-    if (element.getAttribute('data-tip') !== label || element.hasAttribute('title')) registerTooltip(element, label);
+    if (tip !== label || element.hasAttribute('title')) registerTooltip(element, label);
+    labels.set(element, { tip: label, explicit: !!explicit, aria: element.getAttribute('aria-label'), source: title ? 'title' : previous && previous.source || 'aria' });
   });
 }
 export function initPaneHeaderTooltips() {
   document.querySelectorAll(HEADERS).forEach(sync);
   var observer = new MutationObserver(function (records) {
-    pruneTooltip();
     var headers = new Set();
     records.forEach(function (record) {
+      if (record.type === 'attributes' && (record.attributeName === 'class' || record.attributeName === 'hidden')) {
+        if (record.target === document.body) document.querySelectorAll('body.worker-pane-locked #messages, body.worker-pane-locked #input-area').forEach(function (root) { headers.add(root); });
+        return;
+      }
       var parent = record.target.nodeType === 1 && record.target.closest(HEADERS); if (parent) headers.add(parent);
       (record.addedNodes || []).forEach(function (node) {
         if (node.nodeType !== 1) return;
@@ -27,6 +53,7 @@ export function initPaneHeaderTooltips() {
       });
     });
     headers.forEach(function (header) { if (header.isConnected) sync(header); });
+    pruneTooltip();
   });
-  observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['title', 'aria-label'] });
+  observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['title', 'aria-label', 'data-tip', 'aria-expanded', 'hidden', 'class'] });
 }

package/lib/public/modules/personal-email-editor.js

@@ -0,0 +1,305 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showToast } from './utils.js';
+import { preparePersonalConnectionDialog, closePersonalEmailEditor } from './personal-settings-dialog.js';
+import { selectIntegrationEditor } from './personal-integration-editor.js';
+
+function settleEmailRequest() {
+  store.set({personalEmailSaving:false});
+  document.querySelectorAll('#email-setup-modal input, #email-setup-modal button').forEach(function (el) { el.disabled = false; });
+}
+
+export function showEmailSetupModal(provider, host) {
+  if (host) {
+    selectIntegrationEditor('email-add:' + provider, '#email-setup-modal', function () { openEmailSetup(provider, host); });
+    return;
+  }
+  openEmailSetup(provider, host);
+}
+function openEmailSetup(provider, host) {
+  var providerNames = { gmail: "Gmail", outlook: "Outlook Mail", yahoo: "Yahoo Mail", custom: "Custom email" };
+  if (!Object.hasOwn(providerNames, provider)) provider = null;
+  // Remove any existing modal
+  var existing = document.getElementById("email-setup-modal");
+  if (existing) {existing.querySelector("input:not([type=hidden]),button").focus();return;}
+
+  var overlay = document.createElement("div");
+  overlay.id = "email-setup-modal";
+  overlay.className = host ? "email-setup-inline" : "email-setup-overlay";
+
+  if (!provider) {
+    var picker = document.createElement('div'); picker.className = 'email-setup-dialog';
+    picker.innerHTML = '<h3>Choose an email provider</h3><div class="us-integration-tiles"></div><button id="email-setup-cancel" type="button" class="email-setup-btn">Cancel</button>';
+    Object.keys(providerNames).forEach(function (id) {
+      var button = document.createElement('button'); button.type = 'button'; button.className = 'email-setup-btn'; button.textContent = providerNames[id];
+      button.onclick = function () { closePicker(); showEmailSetupModal(id, host); };
+      picker.querySelector('.us-integration-tiles').appendChild(button);
+    });
+    overlay.appendChild(picker); (host || document.body).appendChild(overlay); var closePicker = preparePersonalConnectionDialog(overlay, !!host); return;
+  }
+  var modal = document.createElement("div");
+  modal.className = "email-setup-dialog";
+  modal.innerHTML =
+    '<h3 class="email-setup-title">Add ' + providerNames[provider] + ' account</h3>' +
+    '<input type="hidden" id="email-setup-provider" value="' + provider + '">' +
+    '<div class="email-setup-field">' +
+      '<label class="email-setup-label">Email Address</label>' +
+      '<input id="email-setup-address" type="email" placeholder="you@example.com" class="email-setup-input" />' +
+    '</div>' +
+    '<div class="email-setup-field">' +
+      '<label class="email-setup-label">App Password</label>' +
+      '<div class="email-setup-password-wrap">' +
+        '<input id="email-setup-password" type="password" placeholder="xxxx-xxxx-xxxx-xxxx" class="email-setup-input" />' +
+        '<button id="email-setup-password-toggle" type="button" class="email-setup-password-eye" title="Show password"><i data-lucide="eye"></i></button>' +
+      '</div>' +
+      '<a id="email-setup-help" href="https://support.google.com/accounts/answer/185833" target="_blank" rel="noopener" class="email-setup-help">How to create an App Password</a>' +
+    '</div>' +
+    '<div id="email-setup-custom-fields" style="display:none;">' +
+      '<div class="email-setup-field">' +
+        '<label class="email-setup-label">IMAP Host</label>' +
+        '<div class="email-setup-row">' +
+          '<input id="email-setup-imap-host" type="text" placeholder="imap.example.com" class="email-setup-input" style="flex:1;" />' +
+          '<input id="email-setup-imap-port" type="number" value="993" class="email-setup-input email-setup-port" />' +
+        '</div>' +
+      '</div>' +
+      '<div class="email-setup-field">' +
+        '<label class="email-setup-label">SMTP Host</label>' +
+        '<div class="email-setup-row">' +
+          '<input id="email-setup-smtp-host" type="text" placeholder="smtp.example.com" class="email-setup-input" style="flex:1;" />' +
+          '<input id="email-setup-smtp-port" type="number" value="587" class="email-setup-input email-setup-port" />' +
+        '</div>' +
+      '</div>' +
+    '</div>' +
+    '<div id="email-setup-status" class="email-setup-status"></div>' +
+    '<div class="email-setup-actions">' +
+      '<button id="email-setup-test" type="button" class="email-setup-btn email-setup-btn-secondary">Test Connection</button>' +
+      '<button id="email-setup-cancel" type="button" class="email-setup-btn email-setup-btn-ghost">Cancel</button>' +
+      '<button id="email-setup-save" type="button" class="email-setup-btn email-setup-btn-primary">Add Account</button>' +
+    '</div>';
+
+  overlay.appendChild(modal);
+  (host || document.body).appendChild(overlay);
+  preparePersonalConnectionDialog(overlay, !!host);
+
+  // Event: close on overlay click
+  overlay.addEventListener("click", function (e) {
+    if (!host && e.target === overlay) overlay.remove();
+  });
+
+  // Event: cancel button
+  document.getElementById("email-setup-cancel").addEventListener("click", function () {
+    overlay.remove();
+  });
+
+  // Event: password visibility toggle
+  var pwInput = document.getElementById("email-setup-password");
+  var pwToggle = document.getElementById("email-setup-password-toggle");
+  pwToggle.addEventListener("click", function () {
+    var isHidden = pwInput.type === "password";
+    pwInput.type = isHidden ? "text" : "password";
+    pwToggle.innerHTML = isHidden ? '<i data-lucide="eye-off"></i>' : '<i data-lucide="eye"></i>';
+    pwToggle.title = isHidden ? "Hide password" : "Show password";
+    if (typeof lucide !== "undefined") lucide.createIcons();
+  });
+
+  // Event: provider change
+  var providerSelect = document.getElementById("email-setup-provider");
+  var helpLink = document.getElementById("email-setup-help");
+  var customFields = document.getElementById("email-setup-custom-fields");
+
+  // Provider presets only configure IMAP/SMTP infra and the help link.
+  // The user always enters their full email address (e.g. user@company.com),
+  // so Google Workspace / Microsoft 365 accounts on custom domains work too.
+  var providerMeta = {
+    gmail: {
+      helpUrl: "https://support.google.com/accounts/answer/185833",
+    },
+    outlook: {
+      helpUrl: "https://support.microsoft.com/en-us/account-billing/using-app-passwords-with-apps-that-don-t-support-two-step-verification-5896ed9b-4263-e681-128a-a6f2979a7944",
+    },
+    yahoo: {
+      helpUrl: "https://help.yahoo.com/kb/generate-manage-third-party-passwords-sln15241.html",
+    },
+    custom: {
+      helpUrl: null,
+    },
+  };
+
+  var emailInput = document.getElementById("email-setup-address");
+
+  function applyProviderMeta(val) {
+    var meta = providerMeta[val] || providerMeta.custom;
+    customFields.style.display = val === "custom" ? "block" : "none";
+    if (meta.helpUrl) {
+      helpLink.href = meta.helpUrl;
+      helpLink.style.display = "";
+    } else {
+      helpLink.style.display = "none";
+    }
+  }
+
+  applyProviderMeta(provider);
+
+  // Reset test state
+  store.set({personalEmailTestPassed:false});
+  store.set({personalEmailPendingSave:false});
+
+  // Reset test status when inputs change
+  function onInputChange() {
+    store.set({personalEmailTestPassed:false});
+    store.set({personalEmailPendingSave:false});
+    var saveBtn = document.getElementById("email-setup-save");
+    if (saveBtn) saveBtn.textContent = "Add Account";
+  }
+  overlay.addEventListener('input', onInputChange);
+
+
+  function runTest() {
+    var statusEl = document.getElementById("email-setup-status");
+    var emailAddr = getFullEmail();
+    var appPass = document.getElementById("email-setup-password").value;
+
+    if (!emailAddr || emailAddr.indexOf("@") === -1 || !appPass) {
+      statusEl.style.display = "block";
+      statusEl.style.color = "var(--error, #e74c3c)";
+      statusEl.textContent = "Email and app password are required.";
+      store.set({personalEmailPendingSave:false});
+      return;
+    }
+
+    statusEl.style.display = "block";
+    statusEl.style.color = "var(--text-muted)";
+    statusEl.textContent = "Testing connection...";
+
+    var msgData = buildEmailSetupData();
+    msgData.type = "email_account_test";
+
+    var ws = getWs();
+    if (ws && ws.readyState === 1) {
+      store.set({personalEmailSaving:true,personalEmailRequestOwner:store.get('myUserId'),personalEmailRequestSocket:store.get('projectSplitViewSocketGeneration')});
+      document.querySelectorAll('#email-setup-modal input, #email-setup-modal button').forEach(function (el) { el.disabled = true; });
+      ws.send(JSON.stringify(msgData));
+    } else {
+      store.set({personalEmailPendingSave:false});
+      statusEl.textContent = 'Disconnected. Reconnect and retry.';
+    }
+  }
+
+  // Event: test connection
+  document.getElementById("email-setup-test").addEventListener("click", function () {
+    store.set({personalEmailPendingSave:false});
+    runTest();
+  });
+
+  // Event: save (requires test to pass first)
+  document.getElementById("email-setup-save").addEventListener("click", function () {
+    if (store.get('personalEmailTestPassed')) {
+      // Test already passed, proceed with save
+      doSave();
+      return;
+    }
+    // Run test first, then auto-save on success
+    store.set({personalEmailPendingSave:true});
+    var saveBtn = document.getElementById("email-setup-save");
+    if (saveBtn) saveBtn.textContent = "Testing...";
+    runTest();
+  });
+
+}
+
+function doSave() {
+    var statusEl = document.getElementById("email-setup-status");
+    statusEl.style.display = "block";
+    statusEl.style.color = "var(--text-muted)";
+    statusEl.textContent = "Adding account...";
+
+    var msgData = buildEmailSetupData();
+    msgData.type = "email_account_add";
+
+    var ws = getWs();
+    if (ws && ws.readyState === 1) {
+      store.set({personalEmailSaving:true,personalEmailRequestOwner:store.get('myUserId'),personalEmailRequestSocket:store.get('projectSplitViewSocketGeneration')});
+      document.querySelectorAll('#email-setup-modal input, #email-setup-modal button').forEach(function (el) { el.disabled = true; });
+      ws.send(JSON.stringify(msgData));
+    } else {
+      store.set({personalEmailPendingSave:false});
+      statusEl.textContent = 'Disconnected. Reconnect and retry.';
+    }
+}
+
+function getFullEmail() {
+  return document.getElementById("email-setup-address").value.trim();
+}
+
+function buildEmailSetupData() {
+  var provider = document.getElementById("email-setup-provider").value;
+  var email = getFullEmail();
+  var appPassword = document.getElementById("email-setup-password").value;
+  var data = { provider: provider, email: email, appPassword: appPassword };
+
+  if (provider === "custom") {
+    data.imap = {
+      host: document.getElementById("email-setup-imap-host").value.trim(),
+      port: parseInt(document.getElementById("email-setup-imap-port").value, 10) || 993,
+      tls: true,
+    };
+    data.smtp = {
+      host: document.getElementById("email-setup-smtp-host").value.trim(),
+      port: parseInt(document.getElementById("email-setup-smtp-port").value, 10) || 587,
+    };
+  }
+  return data;
+}
+
+// Handle email_account_test_result from server
+export function handleEmailTestResult(msg) {
+  var statusEl = document.getElementById("email-setup-status");
+  if (!statusEl || !store.get('personalEmailSaving') || store.get('personalEmailRequestOwner') !== store.get('myUserId') || store.get('personalEmailRequestSocket') !== store.get('projectSplitViewSocketGeneration')) return;
+  var saveBtn = document.getElementById("email-setup-save");
+  settleEmailRequest();
+
+  statusEl.style.display = "block";
+  if (msg.ok) {
+    store.set({personalEmailTestPassed:true});
+    if (store.get('personalEmailPendingSave')) {
+      // Test passed from Add Account click, proceed to save
+      store.set({personalEmailPendingSave:false});
+      doSave();
+      return;
+    }
+    statusEl.style.color = "var(--success, #2ecc71)";
+    statusEl.textContent = "Connection successful! IMAP and SMTP both working.";
+  } else {
+    store.set({personalEmailTestPassed:false});
+    store.set({personalEmailPendingSave:false});
+    if (saveBtn) saveBtn.textContent = "Add Account";
+    statusEl.style.color = "var(--error, #e74c3c)";
+    var parts = [];
+    if (msg.imap && !msg.imap.ok) parts.push("IMAP: " + (msg.imap.error || "failed"));
+    if (msg.smtp && !msg.smtp.ok) parts.push("SMTP: " + (msg.smtp.error || "failed"));
+    statusEl.textContent = parts.length > 0 ? parts.join("; ") : (msg.error || "Connection failed");
+  }
+}
+
+// Handle email_account_add_result from server
+export function handleEmailAddResult(msg) {
+  var statusEl = document.getElementById("email-setup-status");
+  if (!statusEl || !store.get('personalEmailSaving') || store.get('personalEmailRequestOwner') !== store.get('myUserId') || store.get('personalEmailRequestSocket') !== store.get('projectSplitViewSocketGeneration')) return;
+  settleEmailRequest();
+
+  statusEl.style.display = "block";
+  if (msg.ok) {
+    statusEl.style.color = "#2ecc71";
+    statusEl.textContent = "Account added successfully!";
+    closePersonalEmailEditor();
+  } else {
+    statusEl.style.color = "#e74c3c";
+    statusEl.textContent = msg.error || "Failed to add account.";
+  }
+}
+
+// Handle email_account_remove_result from server
+export function handleEmailRemoveResult(msg) {
+  showToast(msg.ok ? 'Personal mailbox disconnected.' : msg.error || 'Could not disconnect mailbox. Retry from Email settings.');
+  // The acknowledged list arrives separately through email_accounts_list.
+}

package/lib/public/modules/personal-integration-editor.js

@@ -0,0 +1,70 @@
+import { store } from './store.js';
+import { confirmSettingsAction } from './server-settings-state.js';
+import { showToast } from './utils.js';
+import { closePersonalLinearEditor } from './user-settings-integrations.js';
+import { closeGithubEditor, stopGithubEditorLogin } from './user-settings-github.js';
+import { closePersonalEmailEditor } from './personal-settings-dialog.js';
+
+export function integrationEditorBusy() {
+  return store.get('personalLinearSaving') || store.get('personalEmailSaving') || store.get('personalIntegrationSwitching') ||
+    store.get('githubSettingsPending') && store.get('githubSettingsAction') !== 'get' && store.get('githubSettingsAction') !== 'login';
+}
+function focusEditor(selector) {
+  var root = document.querySelector(selector);
+  if (!root) return;
+  var last = store.get('personalIntegrationFocus');
+  var target = last && root.contains(last) ? last : root.querySelector('input:not([type=hidden]),button') || root;
+  if (target.disabled) { root.tabIndex = -1; target = root; }
+  target.focus();
+}
+export function clearIntegrationEditor(key) {
+  var active = store.get('personalIntegrationEditor');
+  if (active && active.key === key) store.set({personalIntegrationEditor:null,personalIntegrationFocus:null});
+}
+function cleanup() {
+  var active = store.get('personalIntegrationEditor');
+  if (!active) return;
+  if (active.key === 'github') closeGithubEditor();
+  else if (active.key.indexOf('linear:') === 0) closePersonalLinearEditor();
+  else if (active.key.indexOf('email-add:') === 0) closePersonalEmailEditor();
+  else {
+    var panel = document.querySelector(active.selector);
+    if (panel) { panel.hidden = true; panel.parentElement.querySelector('[aria-expanded]').setAttribute('aria-expanded','false'); }
+  }
+  clearIntegrationEditor(active.key);
+}
+export function selectIntegrationEditor(key, selector, open) {
+  if (integrationEditorBusy()) {
+    var current = store.get('personalIntegrationEditor');
+    if (current) focusEditor(current.selector);
+    showToast('Wait for the current connection operation to finish.'); return;
+  }
+  var active = store.get('personalIntegrationEditor');
+  if (active && active.key === key) { focusEditor(selector); return; }
+  var actor = store.get('myUserId'), socket = store.get('projectSplitViewSocketGeneration');
+  async function proceed() {
+    if (actor !== store.get('myUserId') || socket !== store.get('projectSplitViewSocketGeneration') || integrationEditorBusy()) return;
+    store.set({personalIntegrationSwitching:true});
+    try {
+      if (active && active.key === 'github' && !await stopGithubEditorLogin()) return;
+      if (actor !== store.get('myUserId') || socket !== store.get('projectSplitViewSocketGeneration') || active !== store.get('personalIntegrationEditor')) return;
+      cleanup();
+      if (!key) { if (open) open(); return; }
+      store.set({personalIntegrationEditor:{key:key,selector:selector}});
+      open();
+    } finally { store.set({personalIntegrationSwitching:false}); }
+  }
+  if (active && (store.get('personalLinearDirty') || store.get('personalEmailDirty'))) {
+    focusEditor(active.selector);
+    confirmSettingsAction('Discard this unsaved connection draft?', 'Discard', proceed);
+  } else proceed();
+}
+export function bindIntegrationEditorFocus(root) {
+  root.addEventListener('focusin', function (event) {
+    var active = store.get('personalIntegrationEditor'), editor = active && document.querySelector(active.selector);
+    if (editor && editor.contains(event.target)) store.set({personalIntegrationFocus:event.target});
+  });
+  store.subscribe(function (state, previous) {
+    if (state.myUserId !== previous.myUserId) store.set({personalIntegrationEditor:null,personalIntegrationFocus:null});
+  });
+}

package/lib/public/modules/personal-settings-dialog.js

@@ -1,3 +1,4 @@
+import { selectIntegrationEditor, clearIntegrationEditor } from './personal-integration-editor.js';
 import { store } from './store.js';
 import { confirmSettingsAction, isolateSettingsDialog, trapSettingsFocus } from './server-settings-state.js';
 import { enhanceSettingsSelects } from './settings-select.js';
@@ -31,10 +32,18 @@ export function preparePersonalConnectionDialog(overlay, inline) {
   }) : function () {};
   function cleanup() { observer.disconnect(); unsubscribe(); restore(); if (inline) store.set({personalEmailDirty:false}); }
   function close() {
-    cleanup();overlay.remove();
+    cleanup();
+    overlay.querySelectorAll('input,textarea').forEach(function (field) { field.value = ''; });
+    store.set({personalEmailSaving:false,personalEmailPendingSave:false,personalEmailTestPassed:false});
+    var active = store.get('personalIntegrationEditor');
+    if (inline && active && active.key.indexOf('email-add:') === 0) clearIntegrationEditor(active.key);
+    overlay.remove();
     if (previous && previous.isConnected) previous.focus();
   }
+  overlay.addEventListener('connection-close', close);
   function leave() {
+    if (store.get('personalEmailSaving')) return;
+    if (inline) { selectIntegrationEditor(null, null); return; }
     if (dirty) confirmSettingsAction('Discard this unsaved mailbox connection?', 'Discard', close);
     else close();
   }
@@ -55,3 +64,8 @@ export function preparePersonalConnectionDialog(overlay, inline) {
   (overlay.querySelector('#email-setup-address') || overlay.querySelector('button')).focus();
   return close;
 }
+
+export function closePersonalEmailEditor() {
+  var overlay = document.getElementById('email-setup-modal');
+  if (overlay) overlay.dispatchEvent(new Event('connection-close'));
+}

package/lib/public/modules/session-list-material.js

@@ -0,0 +1,25 @@
+// Keep a clear sticky toolbar over the sidebar's one glass surface. Clip only
+// the scrolling content's paint, without changing its layout or scroll owner.
+export function bindSessionListMaterial(list) {
+  var scroller = list.parentElement;
+  function measure() {
+    var toolbar = list.querySelector(':scope > .session-list-sticky-top');
+    if (!toolbar) return;
+    var bottom = toolbar.getBoundingClientRect().bottom;
+    Array.from(list.children).forEach(function (content) {
+      if (content === toolbar) return;
+      var overlap = Math.max(0, bottom - content.getBoundingClientRect().top);
+      content.style.setProperty('--session-list-clip-top', overlap + 'px');
+    });
+  }
+  if (!scroller.dataset.sessionListMaterial) {
+    scroller.dataset.sessionListMaterial = 'true';
+    scroller.addEventListener('scroll', measure, { passive: true });
+    if (typeof ResizeObserver === 'function') {
+      var observer = new ResizeObserver(measure);
+      observer.observe(scroller); observer.observe(list);
+    }
+    else window.addEventListener('resize', measure);
+  }
+  measure();
+}

package/lib/public/modules/sidebar-collapse-focus.js

@@ -0,0 +1,22 @@
+// Keep desktop focus on the navigation controls when one side disappears.
+export function restoreSidebarCollapseFocus(collapsed, previous) {
+  if (!previous || document.body.classList.contains('pane-mode') || !window.matchMedia('(min-width: 769px)').matches) return;
+  var leaving = collapsed ? previous.closest('#sidebar-column, #mate-sidebar-column') :
+    previous.closest('#sidebar-shell-expand-btn, #sidebar-expand-btn, .split-pane-sidebar');
+  if (!leaving) return;
+  function restore(attempt) {
+    var layout = document.getElementById('layout');
+    if (!layout || layout.classList.contains('sidebar-collapsed') !== collapsed ||
+        !window.matchMedia('(min-width: 769px)').matches ||
+        document.activeElement !== previous && document.activeElement !== document.body) return;
+    var mate = document.getElementById('mate-sidebar-column');
+    var sidebar = mate && !mate.classList.contains('hidden') ? mate : document.getElementById('sidebar-column');
+    var target = collapsed ? document.getElementById('sidebar-shell-expand-btn') :
+      sidebar && sidebar.querySelector('.sidebar-collapse-btn');
+    var region = collapsed ? document.getElementById('navigation-island') : sidebar;
+    if (target && !target.hidden && region && region.getBoundingClientRect().width > 0 && target.getClientRects().length) {
+      target.focus({ preventScroll: true });
+    } else if (attempt < 3) requestAnimationFrame(function () { restore(attempt + 1); });
+  }
+  restore(0);
+}

package/lib/public/modules/sidebar-sessions.js

@@ -7,6 +7,7 @@ import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { openSearch as openSessionSearch } from './session-search.js';
 import { store } from './store.js';
+import { bindSessionListMaterial } from './session-list-material.js';
 import { getWs } from './ws-ref.js';
 import { getSessionListEl } from './dom-refs.js';
 import { dismissOverlayPanels, closeSidebar, updatePageTitle, spawnDustParticles } from './sidebar.js';
@@ -1134,6 +1135,7 @@ export function renderSessionList(sessions) {
   regularContainer.appendChild(renderFavoritesSection(layout, folderCtx));
   renderOrdinarySections(layout, folderCtx, regularContainer);
   getSessionListEl().appendChild(regularContainer);
+  bindSessionListMaterial(getSessionListEl());
   refreshIcons();
   reconcileSessionContextMenu();
   reconcileFolderMenu();

package/lib/public/modules/sidebar.js

@@ -14,6 +14,7 @@ import {
 } from './sidebar-mates.js';
 import { initSidebarMobile } from './sidebar-mobile.js';
 import { store } from './store.js';
+import { restoreSidebarCollapseFocus } from './sidebar-collapse-focus.js';
 
 var ctx;
 var _syncResizeHandles = null;
@@ -66,9 +67,11 @@ export function toggleSidebarCollapse() {
   var layout = document.getElementById("layout");
   if (!layout && ctx) layout = ctx.$("layout");
   if (!layout) return;
+  var previousFocus = document.activeElement;
   var collapsed = layout.classList.toggle("sidebar-collapsed");
   try { localStorage.setItem("sidebar-collapsed", collapsed ? "1" : ""); } catch (e) {}
   updateSidebarToggleState(collapsed);
+  restoreSidebarCollapseFocus(collapsed, previousFocus);
   if (ctx) setTimeout(function () { syncResizeHandles(); }, 210);
 }
 
@@ -78,10 +81,10 @@ function updateSidebarToggleState(collapsed) {
     buttons[i].setAttribute("aria-expanded", collapsed ? "false" : "true");
     buttons[i].title = collapsed ? "Open sidebar" : "Collapse sidebar";
     buttons[i].setAttribute("aria-label", collapsed ? "Open sidebar" : "Collapse sidebar");
+    buttons[i].setAttribute("aria-controls", "sidebar-column mate-sidebar-column");
     if (buttons[i].id === "sidebar-shell-expand-btn") {
-      var splitVisible = document.getElementById("split-host");
       var desktop = !window.matchMedia || window.matchMedia("(min-width: 769px)").matches;
-      buttons[i].hidden = !collapsed || !desktop || !splitVisible || !splitVisible.classList.contains("visible");
+      buttons[i].hidden = !collapsed || !desktop;
     }
   }
 }
@@ -275,7 +278,7 @@ export function initSidebar(_ctx) {
     if (!resizeHandle || !sidebarColumn) return;
     var rect = sidebarColumn.getBoundingClientRect();
     var parentRect = sidebarColumn.parentElement.getBoundingClientRect();
-    resizeHandle.style.left = (rect.right - parentRect.left) + "px";
+    resizeHandle.style.left = (rect.right - parentRect.left - sidebarColumn.parentElement.clientLeft) + "px";
   }
 
   if (resizeHandle && sidebarColumn) {
@@ -285,9 +288,7 @@ export function initSidebar(_ctx) {
       if (!dragging) return;
       e.preventDefault();
       var clientX = e.touches ? e.touches[0].clientX : e.clientX;
-      var iconStrip = document.getElementById("icon-strip");
-      var stripWidth = iconStrip ? iconStrip.offsetWidth : 72;
-      var newWidth = clientX - stripWidth;
+      var newWidth = clientX - sidebarColumn.getBoundingClientRect().left;
       if (newWidth < 192) newWidth = 192;
       if (newWidth > 320) newWidth = 320;
       sidebarColumn.style.width = newWidth + "px";
@@ -360,7 +361,7 @@ export function initSidebar(_ctx) {
     if (!mateResizeHandle || !mateSidebarCol) return;
     var rect = mateSidebarCol.getBoundingClientRect();
     var parentRect = mateSidebarCol.parentElement.getBoundingClientRect();
-    mateResizeHandle.style.left = (rect.right - parentRect.left) + "px";
+    mateResizeHandle.style.left = (rect.right - parentRect.left - mateSidebarCol.parentElement.clientLeft) + "px";
   }
 
   if (mateResizeHandle && mateSidebarCol) {
@@ -370,9 +371,7 @@ export function initSidebar(_ctx) {
       if (!mateDragging) return;
       e.preventDefault();
       var clientX = e.touches ? e.touches[0].clientX : e.clientX;
-      var iconStrip = document.getElementById("icon-strip");
-      var stripWidth = iconStrip ? iconStrip.offsetWidth : 72;
-      var newWidth = clientX - stripWidth;
+      var newWidth = clientX - mateSidebarCol.getBoundingClientRect().left;
       if (newWidth < 192) newWidth = 192;
       if (newWidth > 320) newWidth = 320;
       mateSidebarCol.style.width = newWidth + "px";