clay-server 5.2.0-beta.9 → 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/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/settings-project-target.js

@@ -0,0 +1,56 @@
+// Project selection for settings. The settings target is independent of the
+// open workspace: choosing a project here never changes currentSlug or the
+// workspace WebSocket. Pure helpers plus a generation guard for async replies.
+
+export function settingsProjectLabel(project) {
+  return (project && (project.title || project.project || project.name || project.slug)) || '';
+}
+
+// Mates and the Clay project have their own settings surfaces.
+export function isSettingsProject(project, permissions) {
+  if (!project || !project.slug || project.isMate || /^mate-/.test(project.slug)) return false;
+  return !permissions || permissions.projectSettings !== false;
+}
+
+// Authorised projects for the signed-in user (the server-filtered project
+// list), the open workspace first, the rest in their existing order.
+export function listSettingsProjects(projects, currentSlug, permissions) {
+  var eligible = (Array.isArray(projects) ? projects : []).filter(function (project) { return isSettingsProject(project, permissions); });
+  var current = eligible.filter(function (project) { return project.slug === currentSlug; });
+  var others = eligible.filter(function (project) { return project.slug !== currentSlug; });
+  return current.concat(others).map(function (project, index) {
+    return { slug: project.slug, label: settingsProjectLabel(project), isCurrent: project.slug === currentSlug, project: project, first: index === 0 };
+  });
+}
+
+// A requested slug must still be authorised; otherwise use the current
+// workspace, then the first choice, then nothing.
+export function resolveTargetSlug(requested, choices) {
+  var list = choices || [];
+  for (var i = 0; i < list.length; i++) if (list[i].slug === requested) return requested;
+  return list.length ? list[0].slug : null;
+}
+
+export function findChoice(choices, slug) {
+  var list = choices || [];
+  for (var i = 0; i < list.length; i++) if (list[i].slug === slug) return list[i];
+  return null;
+}
+
+export function optionLabel(choice) {
+  return choice.isCurrent ? choice.label + ' (open workspace)' : choice.label;
+}
+
+// Every settings open, scope change and project switch takes a new token.
+// Async work captures the token and ignores its result once it is stale.
+export function createTargetBinding() {
+  var generation = 0;
+  var slug = null;
+  return {
+    bind: function (next) { generation += 1; slug = next || null; return generation; },
+    invalidate: function () { generation += 1; slug = null; return generation; },
+    isCurrent: function (token, expectedSlug) { return token === generation && (expectedSlug === undefined || expectedSlug === slug); },
+    slug: function () { return slug; },
+    generation: function () { return generation; }
+  };
+}

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

@@ -72,7 +72,7 @@ export function enhanceSettingsSelects(root) {
       button.setAttribute('aria-expanded', 'true');
       document.addEventListener('pointerdown', outside);
       var bounds = button.getBoundingClientRect();
-      var boundary = wrap.closest('.server-settings-content, .us-modal-content, .us-content, .ps-content, .admin-modal');
+      var boundary = wrap.closest('.settings-shell-content, .server-settings-content, .us-modal-content, .us-content, .ps-content, .admin-modal');
       var bottom = Math.min(window.innerHeight - 8, boundary ? boundary.getBoundingClientRect().bottom - 8 : window.innerHeight - 8);
       var above = bounds.top - Math.max(8, boundary ? boundary.getBoundingClientRect().top + 8 : 8);
       var below = bottom - bounds.bottom - 4;

package/lib/public/modules/settings-shell-registry.js

@@ -0,0 +1,88 @@
+// Pure routing model for the unified settings shell: scopes, pages, legacy
+// aliases and access-based fallbacks. No DOM or store access, so every entry
+// point resolves to one exact { scope, page, slug } destination.
+
+export var SETTINGS_SCOPES = [
+  { id: 'personal', label: 'Personal', hint: 'Applies to your account on every device' },
+  { id: 'project', label: 'Project', hint: 'Applies to the selected project' },
+  { id: 'server', label: 'Server', hint: 'Applies to this Clay server for everyone' }
+];
+
+export var PERSONAL_PAGES = [
+  { id: 'us-account', label: 'Account' }, { id: 'us-appearance', label: 'Appearance' },
+  { id: 'us-chat', label: 'Conversation' }, { id: 'us-notifications', label: 'Notifications' },
+  { id: 'us-ai', label: 'AI preferences' }, { id: 'us-integrations', label: 'Integrations' }
+];
+
+export var PROJECT_PAGES = [
+  { id: 'profile', label: 'General' }, { id: 'access', label: 'Access' }, { id: 'environment', label: 'Environment' }
+];
+
+export var SERVER_PAGES = [
+  { id: 'overview', category: 'Service', label: 'Overview' },
+  { id: 'network', category: 'Service', label: 'Network' },
+  { id: 'storage', category: 'Service', label: 'Storage' },
+  { id: 'security', category: 'Administration', label: 'Access & security' },
+  { id: 'admin-users', category: 'Administration', label: 'Users', multiUser: true },
+  { id: 'admin-projects', category: 'Administration', label: 'Project access', multiUser: true },
+  { id: 'admin-smtp', category: 'Administration', label: 'Email delivery', multiUser: true },
+  { id: 'environment', category: 'Agent configuration', label: 'Environment' },
+  { id: 'operations', category: 'Maintenance', label: 'Operations' }
+];
+
+var PERSONAL_ALIASES = {
+  'us-mates': 'us-chat', 'us-experimental': 'us-chat', 'us-connections': 'us-integrations',
+  'us-email': 'us-integrations', 'us-logout': 'us-account'
+};
+var SERVER_ALIASES = { 'admin-invites': 'admin-users' };
+
+export var DEFAULT_PERSONAL_PAGE = 'us-account';
+
+// access: { server: boolean, multiUser: boolean, project: boolean }
+export function defaultAccess() { return { server: false, multiUser: false, project: true }; }
+
+// The authoritative role rule: a multi-user server needs an admin; a solo
+// (single-user) server's owner has server access.
+export function accessFromMe(me, permissions) {
+  var multiUser = !!(me && me.multiUser);
+  var admin = !!(me && me.user && me.user.role === 'admin');
+  return { server: !!me && (!multiUser || admin), multiUser: multiUser, project: !permissions || permissions.projectSettings !== false };
+}
+
+export function pagesForScope(scope, access) {
+  access = access || defaultAccess();
+  if (scope === 'personal') return PERSONAL_PAGES.slice();
+  if (scope === 'project') return PROJECT_PAGES.slice();
+  if (scope === 'server') return SERVER_PAGES.filter(function (page) { return !page.multiUser || access.multiUser; });
+  return [];
+}
+
+export function scopeAvailable(scope, access) {
+  access = access || defaultAccess();
+  if (scope === 'personal') return true;
+  if (scope === 'project') return !!access.project;
+  if (scope === 'server') return !!access.server;
+  return false;
+}
+
+export function resolvePage(scope, page, access) {
+  var alias = scope === 'personal' ? PERSONAL_ALIASES[page] : scope === 'server' ? SERVER_ALIASES[page] : null;
+  var id = alias || page;
+  var pages = pagesForScope(scope, access);
+  for (var i = 0; i < pages.length; i++) if (pages[i].id === id) return id;
+  return pages.length ? pages[0].id : null;
+}
+
+// Unknown or unavailable scopes fall back to Personal, which is always allowed.
+export function resolveRoute(route, access) {
+  route = route || {};
+  var scope = scopeAvailable(route.scope, access) ? route.scope : 'personal';
+  var requested = scope === route.scope ? route.page : null;
+  return {
+    scope: scope,
+    page: resolvePage(scope, requested, access),
+    slug: scope === 'project' ? (route.slug || null) : null,
+    requestedScope: route.scope || 'personal',
+    redirected: scope !== (route.scope || 'personal')
+  };
+}