clay-server 5.2.0-beta.8 → 5.2.0

package/lib/public/modules/projects-hub-view.js

@@ -1,4 +1,3 @@
-import { escapeHtml } from './utils.js';
 import { iconHtml } from './icons.js';
 
 export function ordinaryProjects(projects) {
@@ -7,55 +6,44 @@ export function ordinaryProjects(projects) {
   });
 }
 
-function button(action, label, extra) {
-  return '<button type="button" class="projects-button ' + (extra || '') + '" data-projects-action="' + action + '">' + label + '</button>';
+// Zero ordinary projects (once the list is known): the welcome renders inside the normal app shell.
+export function isShellWelcome(state) {
+  return !!state.projectListLoaded && ordinaryProjects(state.projectsHubList).length === 0;
 }
 
-function setupAction(mode, icon, title, text, disabled) {
-  return '<button type="button" class="projects-setup-action" data-projects-mode="' + mode + '"' + (disabled ? ' disabled' : '') + '>' +
-    '<span class="projects-action-icon">' + iconHtml(icon) + '</span><span><strong>' + title + '</strong><span>' + text + '</span></span>' + iconHtml('arrow-up-right') + '</button>';
+function button(action, label, extra, disabled) {
+  return '<button type="button" class="projects-button ' + (extra || '') + '" data-projects-action="' + action + '"' + (disabled ? ' disabled' : '') + '>' + label + '</button>';
 }
 
+// Mate creation starts with the built-in Clay Mate, so the CTA waits until it is in the loaded Mate list.
+export function clayMateReady(state) {
+  var mates = Array.isArray(state.cachedMatesList) ? state.cachedMatesList : [];
+  for (var i = 0; i < mates.length; i++) if (mates[i] && mates[i].builtinKey === 'clay') return true;
+  return false;
+}
+
+function welcomeCard(label, title, text, action, artwork) {
+  return '<div class="projects-intro-card"><div class="projects-intro-art"><img src="/welcome-art/' + artwork + '.png" width="1536" height="1024" alt="" decoding="async"></div>' +
+    '<span class="projects-intro-label">' + label + '</span><h2>' + title + '</h2><p>' + text + '</p><div class="projects-intro-action">' + action + '</div></div>';
+}
+
+// The standalone project list no longer exists: the hub renders only the loading state
+// and the zero-project welcome. Once ordinary projects are known the app opens a workspace.
 export function projectsHubContent(state) {
   var projects = ordinaryProjects(state.projectsHubList);
-  var ready = state.projectListLoaded;
-  var welcome = ready && (state.projectsShowGuide || (!projects.length && (state.onboardingStep || 'welcome') === 'welcome'));
+  if (!state.projectListLoaded || projects.length) {
+    return '<main class="projects-main" aria-labelledby="projects-title"><div class="projects-loading" role="status"><h1 id="projects-title" tabindex="-1">Your workspace</h1><p>Loading your workspace…</p></div></main>';
+  }
   var allowed = state.projectsAccessLoaded && (!state.permissions || state.permissions.createProject === true);
   var available = allowed && state.connected && !state.pendingHomeProjectSlug;
-  var html = '<header class="projects-header"><a class="projects-brand" href="/projects"><img src="/clay-studio-symbol.png" alt="">Clay Studio</a>' +
-    '<nav aria-label="Workspace navigation">' + button('settings', 'Settings', 'projects-button-quiet') + '</nav></header>';
-  html += '<main class="projects-main" aria-labelledby="projects-title">';
-  if (!ready) return html + '<div class="projects-loading" role="status"><h1 id="projects-title" tabindex="-1">Your projects</h1><p>Loading your workspace…</p></div></main>';
-  if (welcome) {
-    return html + '<section class="projects-welcome"><div class="projects-eyebrow">WELCOME TO CLAY</div>' +
-      '<h1 id="projects-title" tabindex="-1">A place for<br>your next idea.</h1>' +
-      '<p class="projects-lead">Bring a project. Describe what you want to build.<br>Your AI Driver helps you take it from there.</p>' +
-      '<div class="projects-intro-grid"><div><span>01 / PROJECTS</span><h2>Work on something real.</h2><p>Open a folder, start fresh, or clone a repository. Your conversations and tools stay with the project.</p></div>' +
-      '<div><span>02 / MATES</span><h2>Bring in the right perspective.</h2><p>Your Mates live beside projects and open their conversations in the same focused workspace.</p></div></div>' +
-      '<div class="projects-welcome-actions">' + button('start', projects.length ? 'Explore your projects ' + iconHtml('arrow-right') : 'Set up your first project ' + iconHtml('arrow-right'), 'projects-button-primary') + '</div>' +
-      '<p class="projects-footnote">You can revisit this guide from Projects at any time.</p></section></main>';
-  }
-  html += '<div class="projects-heading"><div><div class="projects-eyebrow">YOUR WORKSPACE</div><h1 id="projects-title" tabindex="-1">' + (projects.length ? 'Projects' : 'Start with a project.') + '</h1>' +
-    '<p class="projects-lead">' + (projects.length ? 'Pick up where you left off, or begin something new.' : 'Choose where your work will live. You can add more projects later.') + '</p></div>' + button('guide', 'Getting started', 'projects-button-quiet') + '</div>';
-  if (state.pendingHomeProjectSlug) html += '<p class="projects-status" role="status">Opening your project…</p>';
-  if (projects.length) {
-    html += '<div class="projects-list" aria-label="Your projects">';
-    projects.forEach(function (project) {
-      html += '<button type="button" class="projects-list-item" data-project-slug="' + escapeHtml(project.slug) + '"' + (!state.connected || state.pendingHomeProjectSlug ? ' disabled' : '') + '>' +
-        '<span class="projects-action-icon">' + iconHtml(project.isWorktree ? 'git-branch' : 'folder') + '</span><span><strong>' + escapeHtml(project.title || project.project || project.slug) + '</strong>' +
-        '<span>' + escapeHtml(project.branch || project.path || project.slug) + '</span></span>' + iconHtml('arrow-right') + '</button>';
-    });
-    html += '</div><h2 class="projects-section-title">Add a project</h2>';
-  }
-  if (!state.projectsAccessLoaded) html += '<p class="projects-status" role="status">Checking project access…</p>';
-  else if (!allowed) html += '<p class="projects-status">Ask an administrator to create or share a project with you.</p>';
-  else {
-    html += '<div class="projects-setup-actions">' +
-      setupAction('existing', 'folder-open', 'Open a folder', 'Use a directory on the machine running Clay.', !available) +
-      setupAction('create', 'plus', 'Create a project', 'Start in a new, empty project directory.', !available) +
-      setupAction('clone', 'git-branch', 'Clone a repository', 'Bring an existing Git repository into Clay.', !available) + '</div>';
-    if (!projects.length) html += '<p class="projects-next-step"><span>UP NEXT</span> Choose your AI in the workspace, then tell your Driver what you want to build or fix.</p>';
-  }
-  if (!state.connected) html += '<p class="projects-status" role="status">Reconnecting… Project actions will be available when the connection returns.</p>';
-  return html + '</main><footer class="projects-footer">Your projects, conversations, and tools. One workspace.</footer>';
+  var mateReady = !!state.connected && clayMateReady(state);
+  return '<main class="projects-main" aria-labelledby="projects-title"><section class="projects-welcome"><div class="projects-eyebrow">WELCOME TO</div>' +
+    '<h1 id="projects-title" tabindex="-1"><span class="projects-wordmark" role="img" aria-label="Clay Studio"></span></h1>' +
+    '<p class="projects-lead">Where the minds work together</p>' +
+    '<div class="projects-intro-grid">' +
+    welcomeCard('01 / PROJECTS', 'Work together on a project.', 'Bring a codebase or a folder of files, and work through it together with Clay Studio.',
+      button('create-project', 'Start a project ' + iconHtml('arrow-right'), 'projects-button-primary', !available), 'project-clay') +
+    welcomeCard('02 / MATES', 'Create your own specialist.', 'Create a Mate with the expertise you need, and work together on your ideas and tasks.',
+      button('mate', 'Create a Mate ' + iconHtml('arrow-right'), 'projects-button-secondary', !mateReady), 'mate-clay') +
+    '</div></section></main>';
 }

package/lib/public/modules/projects-hub.js

@@ -1,9 +1,10 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { openAddProjectModal, switchProject } from './app-projects.js';
-import { openUserSettings } from './user-settings.js';
-import { rememberHomePrimarySurface, updateHomeSurfacePreference } from './home-surface.js';
-import { projectsHubContent } from './projects-hub-view.js';
+import { switchProject } from './app-projects.js';
+import { openAddProjectModal } from './project-start-dialog.js';
+import { startClayMateCreation } from './project-mate-creation-workspace.js';
+import { updateHomeSurfacePreference } from './home-surface.js';
+import { projectsHubContent, isShellWelcome, clayMateReady, ordinaryProjects } from './projects-hub-view.js';
 import { refreshIcons } from './icons.js';
 
 function root() { return document.getElementById('projects-hub'); }
@@ -11,17 +12,18 @@ function root() { return document.getElementById('projects-hub'); }
 function render() {
   var element = root();
   if (!element || !store.get('projectsHubVisible')) return;
+  document.body.classList.toggle('projects-shell', isShellWelcome(store.snap()));
   var html = projectsHubContent(store.snap());
   if (store.get('projectsHubMarkup') === html) return;
   store.set({ projectsHubMarkup: html });
   var active = element.contains(document.activeElement) ? document.activeElement : null;
-  var action = active && (active.dataset.projectsAction || active.dataset.projectsMode || active.dataset.projectSlug);
+  var action = active && (active.dataset.projectsAction);
   element.innerHTML = html;
   refreshIcons();
   if (action) {
     var buttons = element.querySelectorAll('button, a');
     for (var i = 0; i < buttons.length; i++) {
-      if ((buttons[i].dataset.projectsAction || buttons[i].dataset.projectsMode || buttons[i].dataset.projectSlug) === action && !buttons[i].disabled) {
+      if (buttons[i].dataset.projectsAction === action && !buttons[i].disabled) {
         buttons[i].focus({ preventScroll: true });
         break;
       }
@@ -35,23 +37,39 @@ function focusHeading() {
   if (title) title.focus({ preventScroll: true });
 }
 
+// The authorised project to open when no standalone list exists: the server-saved
+// last project, then the current one, then the first ordinary project. Only
+// projects present in the server-provided list qualify.
+function workspaceFallback() {
+  var known = ordinaryProjects(store.get('projectsHubList')).map(function (project) { return project.slug; });
+  var choices = [store.get('homeSurfaceProjectSlug'), store.get('currentSlug'), known[0]];
+  for (var i = 0; i < choices.length; i++) if (choices[i] && known.indexOf(choices[i]) !== -1) return choices[i];
+  return null;
+}
+
+// Shows the loading or zero-project welcome; with projects present it opens a workspace instead.
 export function showProjectsHub(fromHistory) {
+  if (store.get('projectListLoaded') && ordinaryProjects(store.get('projectsHubList')).length) {
+    var slug = workspaceFallback();
+    if (slug) {
+      hideProjectsHub();
+      if (fromHistory) history.replaceState(null, '', '/p/' + slug + '/');
+      switchProject(slug);
+      return;
+    }
+  }
   store.set({ projectsHubVisible: true, pendingHomeProjectSlug: null });
   document.body.classList.add('projects-active');
   root().classList.remove('hidden');
-  rememberHomePrimarySurface('projects');
-  if (!fromHistory && location.pathname !== '/projects') {
-    var method = document.documentElement.classList.contains('pwa-standalone') ? 'replaceState' : 'pushState';
-    history[method](null, '', '/projects');
-  }
+  if (location.pathname === '/projects' || location.pathname === '/projects/') history.replaceState(null, '', '/');
   render();
   focusHeading();
 }
 
 export function hideProjectsHub() {
   if (!store.get('projectsHubVisible')) return;
-  store.set({ projectsHubVisible: false, projectsShowGuide: false });
-  document.body.classList.remove('projects-active');
+  store.set({ projectsHubVisible: false });
+  document.body.classList.remove('projects-active', 'projects-shell');
   if (root()) root().classList.add('hidden');
 }
 
@@ -61,25 +79,17 @@ export function completeProjectsOnboarding() {
 }
 
 function handleClick(event) {
-  var button = event.target.closest('[data-projects-action], [data-projects-mode], [data-project-slug]');
+  var button = event.target.closest('[data-projects-action]');
   if (!button || button.disabled) return;
   event.preventDefault();
   var action = button.dataset.projectsAction;
-  if (action === 'settings') { openUserSettings(); return; }
-  if (action === 'guide') { store.set({ projectsShowGuide: true }); render(); focusHeading(); return; }
-  if (action === 'start') {
-    store.set({ projectsShowGuide: false });
-    updateHomeSurfacePreference({ onboardingStep: 'project' });
-    render(); focusHeading();
-    return;
-  }
   var ws = getWs();
   if (!ws || ws.readyState !== 1) return;
-  if (button.dataset.projectSlug) { switchProject(button.dataset.projectSlug); return; }
-  if (button.dataset.projectsMode) {
+  if (action === 'mate') { if (clayMateReady(store.snap())) startClayMateCreation(); return; }
+  if (action === 'create-project') {
     var permissions = store.get('permissions');
-    if (!store.get('projectsAccessLoaded') || (permissions && permissions.createProject !== true)) return;
-    openAddProjectModal(button.dataset.projectsMode);
+    if (!store.get('projectsAccessLoaded') || store.get('pendingHomeProjectSlug') || (permissions && permissions.createProject !== true)) return;
+    openAddProjectModal();
   }
 }
 
@@ -88,14 +98,15 @@ export function initProjectsHub() {
   store.subscribe(function (state, previous) {
     if (state.projectsHubRestoreRequested && !previous.projectsHubRestoreRequested) {
       showProjectsHub(true);
-      if (location.pathname === '/') history.replaceState(null, '', '/projects');
       store.set({ projectsHubRestoreRequested: false });
       return;
     }
     if (!state.projectsHubVisible) return;
+    // A project already being opened keeps its own activation; otherwise known projects replace the hub.
+    if (state.projectListLoaded && !state.pendingHomeProjectSlug && ordinaryProjects(state.projectsHubList).length) { showProjectsHub(true); return; }
     if (state.projectsHubList !== previous.projectsHubList || state.projectListLoaded !== previous.projectListLoaded ||
         state.homeSurfaceLoaded !== previous.homeSurfaceLoaded || state.onboardingStep !== previous.onboardingStep ||
         state.projectsAccessLoaded !== previous.projectsAccessLoaded || state.permissions !== previous.permissions ||
-        state.connected !== previous.connected || state.pendingHomeProjectSlug !== previous.pendingHomeProjectSlug) render();
+        state.connected !== previous.connected || state.cachedMatesList !== previous.cachedMatesList || state.pendingHomeProjectSlug !== previous.pendingHomeProjectSlug) render();
   });
 }

package/lib/public/modules/rewind.js

@@ -1,5 +1,7 @@
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
+import { store } from './store.js';
+import { captureSessionAction, sessionActionCurrent } from './pane-binding.js';
 
 var ctx;
 var rewindMode = false;
@@ -81,6 +83,7 @@ function initiateRewind(uuid) {
     return;
   }
   pendingRewindUuid = uuid;
+  store.set({ rewindAction: captureSessionAction() });
   rewindPreviewInFlight = true;
   if (ctx.ws && ctx.connected) {
     ctx.ws.send(JSON.stringify({ type: "rewind_preview", uuid: uuid }));
@@ -120,6 +123,7 @@ function updateSummaryForMode() {
 }
 
 export function showRewindModal(data) {
+  if (!sessionActionCurrent(store.get('rewindAction'))) return;
   rewindPreviewInFlight = false;
 
   // Ignore stale preview results that don't match current pending UUID
@@ -367,6 +371,7 @@ export function initRewind(_ctx) {
   });
 
   rewindConfirmBtn.addEventListener("click", function() {
+    if (!sessionActionCurrent(store.get('rewindAction'))) { hideRewindModal(); return; }
     if (rewindExecuting) return;
     if (pendingRewindUuid && ctx.ws && ctx.connected) {
       rewindExecuting = true;

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

@@ -1,46 +1,28 @@
 import { initStorageUsage, loadStorageUsage } from './server-storage-settings.js';
 import { initAccountAuthSettings, loadAccountAuthSettings } from './account-auth-settings.js';
-// Full-app server administration shell. Page state survives navigation and closing.
+// Server pane of the unified settings shell. Page state survives navigation and closing.
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { refreshIcons } from './icons.js';
 import { closeFileViewer } from './filebrowser.js';
-import { checkAdminAccess, loadAdminSection } from './admin.js';
-import { openUserSettings } from './user-settings.js';
+import { loadAdminSection } from './admin.js';
+import { registerSettingsScope, isSettingsShellOpen, activeSettingsScope } from './settings-shell.js';
 import { initNetworkSettings, loadNetworkSettings } from './server-network-settings.js';
 import { initServerControls, setServerPinAvailability } from './server-settings-controls.js';
 import { initServerEnvironment, loadSharedEnv } from './server-settings-environment.js';
-import { renderSettingsNavigation } from './server-settings-navigation.js';
-import { hasSettingsDrafts, confirmSettingsAction, trapSettingsFocus } from './server-settings-state.js';
+import { hasSettingsDrafts } from './server-settings-state.js';
 import { enhanceSettingsSelects } from './settings-select.js';
 export { updateDaemonConfig, handleSetPinResult, handleKeepAwakeChanged, handleAutoContinueChanged, handleRestartResult, handleShutdownResult, handleServerSettingResult } from './server-settings-controls.js';
 export { handleSharedEnv, handleSharedEnvSaved } from './server-settings-environment.js';
 
-function isolateSettings(active) {
-  if (active) {
-    var entries = Array.from(document.body.children).filter(function (el) { return el !== root() && el.id !== 'confirm-modal' && el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE'; }).map(function (el) { var entry = { el: el, inert: el.inert, hidden: el.getAttribute('aria-hidden') }; el.inert = true; el.setAttribute('aria-hidden', 'true'); return entry; });
-    store.set({ serverSettingsInert: entries });
-  } else {
-    (store.get('serverSettingsInert') || []).forEach(function (entry) { entry.el.inert = entry.inert; if (entry.hidden === null) entry.el.removeAttribute('aria-hidden'); else entry.el.setAttribute('aria-hidden', entry.hidden); });
-    store.set({ serverSettingsInert: [] });
-  }
-}
 function root() { return document.getElementById('server-settings'); }
-export function isSettingsOpen() { return root() && !root().classList.contains('hidden'); }
+export function isSettingsOpen() { return isSettingsShellOpen() && activeSettingsScope() === 'server'; }
 function send(type) { var ws = getWs(); if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: type })); }
 
-function selectPage(id, focus) {
+function selectPage(id) {
   if (!store.get('serverSettingsAuthorized')) return;
-  if (id === 'admin-invites') id = 'admin-users';
-  var nav = document.getElementById('settings-page-nav');
-  if (!nav.querySelector('[data-section="' + id + '"]')) id = 'overview';
   store.set({ serverSettingsPage: id });
   root().querySelectorAll('.server-settings-section').forEach(function (page) { page.classList.toggle('active', page.dataset.section === id); });
-  nav.querySelectorAll('button').forEach(function (button) {
-    button.classList.toggle('active', button.dataset.section === id);
-    if (button.dataset.section === id) button.setAttribute('aria-current', 'page'); else button.removeAttribute('aria-current');
-  });
-  document.getElementById('settings-nav-dropdown').value = id;
   if (id === 'network') loadNetworkSettings();
   if (id === 'security') loadAccountAuthSettings();
   if (id === 'storage') loadStorageUsage();
@@ -49,85 +31,48 @@ function selectPage(id, focus) {
     var body = document.getElementById(id + '-body');
     if (id !== 'admin-smtp' || !(store.get('serverSettingsDrafts') || {}).smtp) loadAdminSection(id, body);
   }
-  if (focus) {
-    var heading = root().querySelector('.server-settings-section.active h2');
-    heading.tabIndex = -1; heading.focus();
-  }
+  enhanceSettingsSelects(root()); refreshIcons(root());
 }
 
-async function openSettings() {
-  if (isSettingsOpen()) return;
+// The shell has already verified administrator (or solo-owner) access.
+function enterServerSettings(ctx) {
   closeFileViewer();
-  isolateSettings(true);
-  store.set({ serverSettingsReturnFocus: document.activeElement });
-  root().classList.remove('hidden');
-  document.getElementById('server-settings-btn').classList.add('active');
-  document.getElementById('server-settings-close').focus();
   var status = document.getElementById('settings-access-status');
-  status.textContent = 'Checking administrator access…';
-  store.set({ serverSettingsAuthorized: false });
-  var serverPinSection = document.getElementById('settings-server-pin');
-  if (serverPinSection) serverPinSection.hidden = true;
+  status.textContent = '';
+  store.set({ serverSettingsAuthorized: true });
+  setServerPinAvailability(!ctx.access.multiUser);
   root().querySelectorAll('.server-settings-section').forEach(function (page) { page.classList.remove('active'); });
-  try {
-    var response = await fetch('/api/me', { credentials: 'same-origin' });
-    if (!response.ok) throw new Error('Could not verify access. Close and reopen Settings to retry.');
-    var data = await response.json();
-    if (data.multiUser && (!data.user || data.user.role !== 'admin')) {
-      status.textContent = 'Server settings require an administrator. Your personal preferences are available below.';
-      document.getElementById('settings-page-nav').replaceChildren();
-      document.getElementById('settings-nav-dropdown').replaceChildren();
-      return;
-    }
-    await checkAdminAccess();
-    if (!isSettingsOpen()) return;
-    store.set({ serverSettingsAuthorized: true });
-    setServerPinAvailability(!data.multiUser);
-    status.textContent = '';
-    renderSettingsNavigation(!!data.multiUser, selectPage);
-    selectPage(store.get('serverSettingsPage') || 'overview', false);
-    if (!hasSettingsDrafts()) send('get_daemon_config');
-    setTimeout(function () {
-      if (isSettingsOpen() && !store.get('serverSettingsConfigLoaded')) status.textContent = 'Server configuration has not loaded. Reconnect, then reopen Settings to retry.';
-    }, 12000);
-    send('process_stats');
-    clearInterval(store.get('serverSettingsStatsTimer'));
-    store.set({ serverSettingsStatsTimer: setInterval(function () { send('process_stats'); }, 5000) });
-    document.getElementById('settings-project-slug').textContent = store.get('currentSlug') || '(none)';
-    document.getElementById('settings-ws-path').textContent = store.get('wsPath') || '/ws';
-    var pill = document.getElementById('skip-perms-pill');
-    document.getElementById('settings-skip-perms').textContent = pill && !pill.classList.contains('hidden') ? 'Skip' : 'Permission checks';
-    enhanceSettingsSelects(root()); refreshIcons(root());
-  } catch (error) { status.textContent = error.message; }
+  if (!hasSettingsDrafts()) send('get_daemon_config');
+  setTimeout(function () {
+    if (isSettingsOpen() && !store.get('serverSettingsConfigLoaded')) status.textContent = 'Server configuration has not loaded. Reconnect, then reopen Settings to retry.';
+  }, 12000);
+  send('process_stats');
+  clearInterval(store.get('serverSettingsStatsTimer'));
+  store.set({ serverSettingsStatsTimer: setInterval(function () { send('process_stats'); }, 5000) });
+  document.getElementById('settings-project-slug').textContent = store.get('currentSlug') || '(none)';
+  document.getElementById('settings-ws-path').textContent = store.get('wsPath') || '/ws';
+  var pill = document.getElementById('skip-perms-pill');
+  document.getElementById('settings-skip-perms').textContent = pill && !pill.classList.contains('hidden') ? 'Skip' : 'Permission checks';
 }
 
-function closeSettings() {
-  function close() {
-    isolateSettings(false);
-    root().classList.add('hidden');
-    document.getElementById('server-settings-btn').classList.remove('active');
-    clearInterval(store.get('serverSettingsStatsTimer'));
-    var previous = store.get('serverSettingsReturnFocus');
-    if (previous && previous.isConnected) previous.focus();
-  }
-  if (hasSettingsDrafts()) confirmSettingsAction('You have unsaved changes. Closing keeps these drafts in this tab, but reloading the page will lose them.', 'Close with drafts', close);
-  else close();
+function leaveServerSettings() {
+  clearInterval(store.get('serverSettingsStatsTimer'));
+  store.set({ serverSettingsAuthorized: false });
 }
 
 export function initServerSettings() {
   if (!root()) return;
   initNetworkSettings(); initServerControls(); initServerEnvironment(); initStorageUsage(); initAccountAuthSettings();
-  document.getElementById('server-settings-btn').addEventListener('click', openSettings);
-  document.getElementById('server-settings-close').onclick = closeSettings;
-  document.getElementById('settings-personal-link').onclick = function () {
-    function openPersonal() { isolateSettings(false); document.getElementById('server-settings-btn').classList.remove('active'); root().classList.add('hidden'); clearInterval(store.get('serverSettingsStatsTimer')); openUserSettings('us-notifications'); }
-    if (hasSettingsDrafts()) confirmSettingsAction('Your server settings drafts will remain in this tab while you visit Personal settings.', 'Open Personal settings', openPersonal);
-    else openPersonal();
-  };
-  document.addEventListener('keydown', function (event) {
-    if (!isSettingsOpen() || document.querySelector('.admin-modal-overlay, #settings-confirm, .confirm-above-settings')) return;
-    if (event.key === 'Escape') { event.preventDefault(); closeSettings(); }
-    trapSettingsFocus(event, root());
+  registerSettingsScope('server', {
+    pane: root(),
+    enter: enterServerSettings,
+    activate: selectPage,
+    leave: leaveServerSettings,
+    leavePrompt: function (kind) {
+      if (!hasSettingsDrafts() || kind === 'page' || kind === 'project') return null;
+      if (kind === 'close') return { message: 'You have unsaved changes. Closing keeps these drafts in this tab, but reloading the page will lose them.', action: 'Close with drafts' };
+      return { message: 'Your server settings drafts will remain in this tab while you visit another settings area.', action: 'Leave Server settings' };
+    }
   });
   new MutationObserver(function () { enhanceSettingsSelects(root()); }).observe(root(), { childList: true, subtree: true });
 }

package/lib/public/modules/session-actions.js

@@ -4,6 +4,7 @@ import { addSystemMessage, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.
 import { openPairDialog } from './split-pair-ui.js';
 import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAgentEffort } from './agent-config-selects.js';
 import { showToast } from './utils.js';
+import { sessionCallback, captureSessionAction, sessionActionCurrent } from './pane-binding.js';
 
 var addWorkerButton = null;
 var handoffButton = null;
@@ -33,6 +34,7 @@ function handoffField(labelText, control) {
 function requestHandoffDialog() {
   var ws = getWs();
   if (!ws || ws.readyState !== 1) return;
+  store.set({ handoffAction: captureSessionAction() });
   ws.send(JSON.stringify({ type: "handoff_session_options" }));
 }
 
@@ -47,6 +49,7 @@ function openWorkerDialog() {
 }
 
 function showHandoffDialog(options) {
+  if (!sessionActionCurrent(store.get('handoffAction'))) return;
   closeHandoffDialog();
   var installed = options.installedVendors || [];
   var vendorInfo = store.get('vendorInfo') || {};
@@ -147,7 +150,7 @@ function showHandoffDialog(options) {
     if (event.key === "Escape") closeHandoffDialog();
   };
   document.addEventListener("keydown", handoffEscapeHandler);
-  submit.addEventListener("click", function () {
+  submit.addEventListener("click", sessionCallback(function () {
     var ws = getWs();
     if (!ws || ws.readyState !== 1) return;
     ws.send(JSON.stringify({
@@ -158,7 +161,7 @@ function showHandoffDialog(options) {
     }));
     submit.disabled = true;
     submit.textContent = "Continuing…";
-  });
+  }));
   vendorSelect.focus();
 }
 

package/lib/public/modules/session-context-menu.js

@@ -109,6 +109,8 @@ function currentRenameCanSend(state) {
     String(store.get('activeSessionId')) === String(state.sessionId) :
     state && state.row && String(state.row.dataset.sessionId) === String(state.sessionId);
   return !!(state && state.row && state.row.isConnected && sameSession &&
+    (state.source !== 'header' || state.origin === store.get('sessionOriginId')) &&
+    state.epoch === (store.get('sessionActionEpoch') || 0) && !store.get('panePendingBinding') && !store.get('deferredSessionSwitch') &&
     store.get('connected') && state.ws === ws && ws && ws.readyState === 1 &&
     state.slug === store.get('currentSlug') &&
     (!permissions || permissions.sessionRename !== false));
@@ -158,6 +160,8 @@ function beginSessionInlineRename(row, title, control, session, source, inputCla
     input: input,
     originalNodes: originalNodes,
     sessionId: session.id,
+    origin: session.sessionOriginId,
+    epoch: store.get('sessionActionEpoch') || 0,
     currentTitle: session.title || "New Session",
     control: control || null,
     controlDisplay: controlDisplay,
@@ -202,6 +206,7 @@ export function startHeaderSessionInlineRename(title, control, session) {
 
 store.subscribe(function (state, previous) {
   if (state.currentSlug !== previous.currentSlug || state.dmMode !== previous.dmMode ||
+      state.sessionActionEpoch !== previous.sessionActionEpoch || state.panePendingBinding !== previous.panePendingBinding ||
       (previous.connected && !state.connected)) {
     closeSessionContextMenu(false);
     cancelSessionInlineRename(false);

package/lib/public/modules/session-rich-drafts.js

@@ -0,0 +1,21 @@
+import { store } from './store.js';
+import { takeComposerDraft, restoreComposerDraft } from './input.js';
+
+function key() { return [store.get('myUserId') || '', store.get('currentSlug') || '', store.get('sessionOriginId') || ''].join(':'); }
+export function checkComposerDeparture() {
+  var draft = takeComposerDraft();
+  restoreComposerDraft(draft);
+}
+export function saveSessionRichDraft() {
+  if (store.get('activeProjectMateId') || !store.get('sessionOriginId') || store.get('panePendingBinding')) return;
+  var drafts = Object.assign({}, store.get('sessionRichDrafts') || {});
+  var draft = takeComposerDraft();
+  drafts[key()] = draft;
+  restoreComposerDraft(draft);
+  store.set({ sessionRichDrafts: drafts });
+}
+export function restoreSessionRichDraft() {
+  if (store.get('activeProjectMateId') || store.get('panePendingBinding')) return;
+  var draft = (store.get('sessionRichDrafts') || {})[key()];
+  restoreComposerDraft(draft || { text: (store.get('sessionDrafts') || {})[store.get('activeSessionId')] || '', start: 0, end: 0 });
+}

package/lib/public/modules/session-switch-defer.js

@@ -0,0 +1,67 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { composerDepartureReason } from './input.js';
+import { processMessage } from './app-message-router.js';
+
+function notice(show, message) {
+  var element = document.getElementById('session-switch-wait');
+  if (!show) { if (element) element.remove(); return; }
+  if (element) { if (message) element.textContent = message; return; }
+  var area = document.getElementById('input-area');
+  if (!area) return;
+  element = document.createElement('div'); element.id = 'session-switch-wait';
+  element.className = 'session-switch-wait'; element.setAttribute('role', 'status');
+  element.textContent = 'Session change waiting. Finish or discard voice input, or wait for attachments. Your draft stays with this conversation.';
+  area.prepend(element);
+}
+
+// Keep the source composer and its async completions together. The destination
+// replay waits in order; it cannot change identity midway through an upload.
+export function deferSessionSwitch(message) {
+  var pending = store.get('deferredSessionSwitch');
+  if (pending && pending.draining) return false;
+  if (['account_auth_required', 'project_removed', 'project_access_revoked'].indexOf(message.type) >= 0) {
+    store.set({ deferredSessionSwitch: null }); notice(false); return false;
+  }
+  if (!pending && message.type === 'session_switched' && composerDepartureReason()) {
+    pending = { socket: getWs(), projectSlug: store.get('currentSlug'), ownerId: store.get('myUserId'),
+      sessionId: store.get('activeSessionId'), origin: store.get('sessionOriginId'), processing: store.get('processing'), messages: [] };
+    var speech = store.get('speechActive');
+    if (speech) speech.autoSend = false;
+    store.set({ deferredSessionSwitch: pending }); notice(true);
+  }
+  if (!pending) return false;
+  if (pending.projectSlug === store.get('currentSlug') && pending.ownerId === store.get('myUserId')) pending.socket = getWs();
+  if (store.get('connected') && pending.processing && !store.get('processing')) store.set({ processing: true });
+  pending.messages.push(message);
+  if (message.type === 'session_list' || message.type === 'session_switched') queueMicrotask(drain);
+  return true;
+}
+
+function drain() {
+  var pending = store.get('deferredSessionSwitch');
+  if (!pending || pending.draining || composerDepartureReason() || !store.get('connected')) return;
+  if (pending.socket !== getWs() || pending.projectSlug !== store.get('currentSlug') || pending.ownerId !== store.get('myUserId')) return;
+  var latestSwitch, latestList;
+  pending.messages.forEach(function (message) {
+    if (message.type === 'session_switched') latestSwitch = message;
+    if (message.type === 'session_list') latestList = message;
+  });
+  if (!latestSwitch || !latestList) return;
+  var target = (latestList.sessions || []).find(function (session) { return session.id === latestSwitch.id; });
+  if (!target || target.sessionOriginId !== latestSwitch.sessionOriginId) {
+    notice(true, 'The conversation changed while your draft was waiting. Your draft is preserved. Choose a conversation to continue.');
+    return;
+  }
+  // Restoring superseded snapshots must not trigger outbound session effects
+  // before the final authoritative target is installed.
+  pending.draining = true;
+  pending.finalSwitch = latestSwitch;
+  pending.messages.forEach(processMessage);
+  store.set({ deferredSessionSwitch: null }); notice(false);
+}
+
+store.subscribe(function (state, previous) {
+  if (state.deferredSessionSwitch && (state.composerUploadingCount !== previous.composerUploadingCount ||
+      state.speechActive !== previous.speechActive || state.speechRetry !== previous.speechRetry || state.connected !== previous.connected)) queueMicrotask(drain);
+});