clay-server 5.2.0-beta.8 → 5.2.0

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')
+  };
+}

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

@@ -0,0 +1,104 @@
+// DOM rendering for the unified settings shell chrome: scope tabs, page
+// navigation (desktop list + narrow select) and the project selector.
+import { SETTINGS_SCOPES } from './settings-shell-registry.js';
+import { optionLabel } from './settings-project-target.js';
+import { enhanceSettingsSelects } from './settings-select.js';
+
+function el(id) { return document.getElementById(id); }
+
+export function setShellStatus(text, state) {
+  var status = el('settings-shell-status');
+  status.textContent = text || '';
+  status.hidden = !text;
+  if (state) status.dataset.state = state; else delete status.dataset.state;
+}
+
+export function renderScopeTabs(access, activeScope, onSelect) {
+  var tabs = el('settings-scope-tabs');
+  tabs.replaceChildren();
+  SETTINGS_SCOPES.forEach(function (scope) {
+    if (scope.id === 'server' && !access.server) return;
+    if (scope.id === 'project' && !access.project) return;
+    var button = document.createElement('button');
+    button.type = 'button'; button.className = 'settings-scope-tab'; button.dataset.scope = scope.id;
+    button.textContent = scope.label; button.title = scope.hint;
+    if (scope.id === activeScope) button.setAttribute('aria-current', 'page');
+    button.classList.toggle('active', scope.id === activeScope);
+    button.onclick = function () { onSelect(scope.id); };
+    tabs.appendChild(button);
+  });
+  var active = SETTINGS_SCOPES.filter(function (scope) { return scope.id === activeScope; })[0];
+  el('settings-scope-title').textContent = active ? active.label + ' settings' : 'Settings';
+  el('settings-scope-hint').textContent = active ? active.hint : '';
+  el('settings-server-name').hidden = activeScope !== 'server';
+}
+
+export function renderPageNav(pages, activePage, onSelect) {
+  var nav = el('settings-page-nav');
+  var select = el('settings-page-select');
+  nav.replaceChildren(); select.replaceChildren();
+  var category; var group = select;
+  pages.forEach(function (page) {
+    if (page.category && page.category !== category) {
+      category = page.category;
+      var heading = document.createElement('div'); heading.className = 'settings-nav-category'; heading.textContent = category; nav.appendChild(heading);
+      group = document.createElement('optgroup'); group.label = category; select.appendChild(group);
+    }
+    var button = document.createElement('button');
+    button.type = 'button'; button.className = 'settings-nav-item'; button.dataset.section = page.id; button.textContent = page.label;
+    button.onclick = function () { onSelect(page.id); };
+    nav.appendChild(button);
+    var option = document.createElement('option'); option.value = page.id; option.textContent = page.label; group.appendChild(option);
+  });
+  select.onchange = function () { onSelect(this.value); };
+  nav.onkeydown = function (event) {
+    if (['ArrowUp', 'ArrowDown', 'Home', 'End'].indexOf(event.key) < 0) return;
+    var items = Array.from(nav.querySelectorAll('button'));
+    var index = items.indexOf(document.activeElement);
+    if (index < 0) return;
+    event.preventDefault();
+    index = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : (index + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+    items[index].focus();
+  };
+  markActivePage(activePage);
+}
+
+export function markActivePage(activePage) {
+  Array.from(el('settings-page-nav').querySelectorAll('button')).forEach(function (button) {
+    var active = button.dataset.section === activePage;
+    button.classList.toggle('active', active);
+    if (active) button.setAttribute('aria-current', 'page'); else button.removeAttribute('aria-current');
+  });
+  var select = el('settings-page-select');
+  if (activePage && select.value !== activePage) select.value = activePage;
+}
+
+// The selector is a plain select; settings-select upgrades it to the shared
+// desktop picker and leaves the native control on narrow screens.
+export function renderProjectSelect(choices, selectedSlug, onChange, placeholder) {
+  var wrap = el('settings-project-picker');
+  var select = el('settings-project-select');
+  select.replaceChildren();
+  choices.forEach(function (choice) {
+    var option = document.createElement('option');
+    option.value = choice.slug; option.textContent = optionLabel(choice);
+    select.appendChild(option);
+  });
+  if (!choices.length) {
+    var none = document.createElement('option'); none.value = ''; none.textContent = placeholder || 'No projects available';
+    select.appendChild(none);
+  }
+  select.disabled = !choices.length;
+  select.value = selectedSlug || (choices[0] && choices[0].slug) || '';
+  select.onchange = function () { onChange(this.value); };
+  enhanceSettingsSelects(wrap);
+  select.dispatchEvent(new Event('settings-sync'));
+}
+
+export function showProjectPicker(visible) { el('settings-project-picker').hidden = !visible; }
+export function selectedProjectValue() { return el('settings-project-select').value; }
+export function syncProjectSelect(slug) {
+  var select = el('settings-project-select');
+  select.value = slug || '';
+  select.dispatchEvent(new Event('settings-sync'));
+}

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

@@ -0,0 +1,342 @@
+// Unified full-screen settings: one shell for Personal, Project and Server
+// settings. Scope modules register a controller; the shell owns routing,
+// access, project target binding, focus, close restoration and draft guards.
+import { store } from './store.js';
+import { refreshIcons } from './icons.js';
+import { closeFileViewer } from './filebrowser.js';
+import { holdNotesForSettings, releaseNotesForSettings } from './sticky-notes.js';
+import { openNotesBrowser, closeNotesBrowser, isNotesBrowserOpen } from './sticky-notes-browser.js';
+import { confirmSettingsAction, isolateSettingsDialog, trapSettingsFocus } from './server-settings-state.js';
+import { showToast } from './utils.js';
+import { enhanceSettingsSelects } from './settings-select.js';
+import { accessFromMe, defaultAccess, pagesForScope, resolveRoute, scopeAvailable } from './settings-shell-registry.js';
+import { listSettingsProjects, resolveTargetSlug, findChoice, createTargetBinding } from './settings-project-target.js';
+import { setShellStatus, renderScopeTabs, renderPageNav, markActivePage, renderProjectSelect, showProjectPicker, syncProjectSelect } from './settings-shell-view.js';
+
+var controllers = {};
+var binding = createTargetBinding();
+var root = null;
+var lastChoices = '';
+var OFFLINE = 'Offline. The project list and your project access may be out of date until the connection returns.';
+var shell = { verified: false, pending: null, waiting: null, offline: false, open: false, scope: null, pages: {}, slug: null, access: defaultAccess(), returnFocus: null, restoreInert: null, notesReopen: false, token: 0, pending: null };
+var OVERLAYS = '.admin-modal-overlay, #settings-confirm, .confirm-above-settings, .avatar-positioner-overlay, .email-setup-overlay, .settings-subview';
+
+export function registerSettingsScope(id, controller) { controllers[id] = controller; }
+export function isSettingsShellOpen() { return !!shell.open; }
+export function activeSettingsScope() { return shell.scope; }
+export function settingsTargetSlug() { return shell.slug; }
+// Async replies compare their captured token with the live target.
+export function settingsTargetToken() { return binding.generation(); }
+export function isSettingsTargetCurrent(token, slug) { return shell.open && binding.isCurrent(token, slug); }
+
+// Fail closed: until a fresh server answer is bound to this open, no
+// administrator scope is offered, whatever an earlier session learned.
+function provisionalAccess() {
+  var perms = store.get('permissions');
+  return Object.assign(defaultAccess(), { project: !perms || perms.projectSettings !== false });
+}
+
+// Reads only; the caller applies the answer after validating that it still
+// belongs to the current open and signed-in user.
+function fetchMe() {
+  return fetch('/api/me', { credentials: 'same-origin' }).then(function (response) {
+    if (!response.ok) throw new Error('Could not verify access.');
+    return response.json();
+  });
+}
+
+function setGears(open) {
+  ['server-settings-btn', 'user-settings-btn'].forEach(function (id) {
+    var button = document.getElementById(id);
+    if (!button) return;
+    button.classList.toggle('active', open);
+    button.setAttribute('aria-expanded', String(open));
+  });
+}
+
+function projectChoices() {
+  return listSettingsProjects(store.get('projectsHubList'), store.get('currentSlug'), store.get('permissions'));
+}
+
+function focusHeading(ctrl) {
+  var heading = ctrl && ctrl.pane.querySelector('.active h2');
+  if (heading) { heading.tabIndex = -1; heading.focus(); }
+}
+
+function setPaneVisibility(scope) {
+  Object.keys(controllers).forEach(function (id) { controllers[id].pane.classList.toggle('hidden', id !== scope); });
+}
+
+function controller() { return controllers[shell.scope]; }
+
+// Ask before leaving drafts behind. kind: page | scope | project | close.
+function guard(kind, proceed, pageId) {
+  var ctrl = controller();
+  var busy = ctrl && ctrl.busy && ctrl.busy(kind);
+  if (busy) { showToast(busy); return; }
+  var prompt = ctrl && ctrl.leavePrompt && ctrl.leavePrompt(kind, pageId);
+  if (!prompt) { proceed(); return; }
+  confirmSettingsAction(prompt.message, prompt.action, function () { if (prompt.apply) prompt.apply(); proceed(); });
+}
+
+function choicesSignature(choices, slug) {
+  return choices.map(function (choice) { return choice.slug + '|' + choice.label + '|' + choice.isCurrent; }).join('\n') + '#' + (slug || '');
+}
+
+function applyProject(ctrl, route, page) {
+  var requested = route.slug || shell.slug;
+  lastChoices = '';
+  // An unloaded list is never "no projects": wait for the authoritative list.
+  if (store.get('projectListLoaded') !== true) {
+    shell.waiting = { slug: requested };
+    binding.bind(null); shell.slug = null;
+    renderProjectSelect([], '', onProjectSelect, 'Loading projects…'); showProjectPicker(true);
+    renderPageNav(pagesForScope('project', shell.access), page, onPageSelect);
+    ctrl.setEmpty('Loading your projects…', 'loading');
+    var token = shell.token;
+    setTimeout(function () {
+      if (shell.open && token === shell.token && shell.waiting) {
+        ctrl.setEmpty('Your projects could not be loaded. Check the connection and reopen Settings to try again.', 'error');
+        setShellStatus('Your projects could not be loaded.', 'error');
+      }
+    }, 10000);
+    return;
+  }
+  shell.waiting = null;
+  var choices = projectChoices();
+  var slug = resolveTargetSlug(requested, choices);
+  var lost = !!requested && slug !== requested;
+  renderProjectSelect(choices, slug, onProjectSelect);
+  lastChoices = choicesSignature(choices, slug);
+  showProjectPicker(true);
+  binding.bind(slug);
+  shell.slug = slug;
+  if (!slug) {
+    ctrl.setEmpty('You do not have a project to configure yet. Open or create a project, then return here.', 'empty');
+    renderPageNav(pagesForScope('project', shell.access), page, onPageSelect);
+    return;
+  }
+  ctrl.setEmpty(null);
+  ctrl.retarget(slug, findChoice(choices, slug).project, binding.generation());
+  setShellStatus(lost ? 'That project is not available for your account. Showing ' + findChoice(choices, slug).label + '.' : '', lost ? 'error' : undefined);
+}
+
+function redirectNote(resolved) {
+  if (!resolved.redirected) return '';
+  return resolved.requestedScope === 'server' ? 'Server settings require an administrator. Your personal settings are shown.' : 'That settings area is not available for your account.';
+}
+
+function currentRoute() {
+  return { scope: shell.scope, page: shell.pages[shell.scope], slug: shell.slug || (shell.waiting && shell.waiting.slug) || null };
+}
+
+function applyRoute(route, focus) {
+  var resolved = resolveRoute(route, shell.access);
+  var ctrl = controllers[resolved.scope];
+  if (!ctrl) return;
+  if (shell.scope && shell.scope !== resolved.scope && controllers[shell.scope].leave) controllers[shell.scope].leave();
+  var entering = shell.scope !== resolved.scope;
+  shell.scope = resolved.scope;
+  binding.bind(null);
+  setPaneVisibility(resolved.scope);
+  renderScopeTabs(shell.access, resolved.scope, onScopeSelect);
+  setShellStatus(redirectNote(resolved), resolved.redirected ? 'error' : undefined);
+  var ctx = { access: shell.access, scope: resolved.scope };
+  if (entering && ctrl.enter) ctrl.enter(ctx);
+  if (resolved.scope === 'project') applyProject(ctrl, resolved, resolved.page);
+  else { showProjectPicker(false); shell.slug = null; shell.waiting = null; }
+  var page = resolved.page;
+  if (resolved.scope !== 'project' || shell.slug) renderPageNav(pagesForScope(resolved.scope, shell.access), page, onPageSelect);
+  shell.pages[resolved.scope] = page;
+  if (resolved.scope !== 'project' || shell.slug) ctrl.activate(page, ctx);
+  markActivePage(page);
+  store.set({ settingsLastRoute: { scope: resolved.scope, page: page, slug: shell.slug } });
+  enhanceSettingsSelects(root); refreshIcons(root);
+  if (focus) focusHeading(ctrl);
+}
+
+function onScopeSelect(scope) {
+  if (scope === shell.scope) return;
+  guard('scope', function () { applyRoute({ scope: scope, page: shell.pages[scope], slug: scope === 'project' ? currentRoute().slug : null }, true); });
+}
+function onPageSelect(page) {
+  if (page === shell.pages[shell.scope]) { focusHeading(controller()); return; }
+  guard('page', function () {
+    var ctrl = controller();
+    shell.pages[shell.scope] = page; ctrl.activate(page, { access: shell.access, scope: shell.scope });
+    markActivePage(page); store.set({ settingsLastRoute: { scope: shell.scope, page: page, slug: shell.slug } });
+    focusHeading(ctrl);
+  }, shell.pages[shell.scope]);
+}
+// A project switch retargets only the settings view, never the workspace.
+function onProjectSelect(slug) {
+  syncProjectSelect(shell.slug);
+  if (!slug || slug === shell.slug) return;
+  guard('project', function () { applyRoute({ scope: 'project', page: shell.pages.project, slug: slug }, false); });
+}
+
+export function navigateSettings(route) {
+  // Until access is verified, remember the latest request and apply it afterwards.
+  if (!shell.verified) { shell.pending = route; return; }
+  var resolved = resolveRoute(route, shell.access);
+  if (resolved.scope === shell.scope && resolved.page === shell.pages[shell.scope] && (resolved.scope !== 'project' || !route.slug || route.slug === shell.slug)) {
+    setShellStatus(redirectNote(resolved), resolved.redirected ? 'error' : undefined);
+    focusHeading(controller()); return;
+  }
+  guard(resolved.scope === shell.scope ? (route.slug && route.slug !== shell.slug ? 'project' : 'page') : 'scope', function () { applyRoute(route, true); }, shell.pages[shell.scope]);
+}
+
+// Entry for every legacy opener. Returns once the exact destination is shown.
+export function openSettings(route) {
+  if (!root) return Promise.resolve();
+  route = route || store.get('settingsLastRoute') || { scope: 'personal' };
+  if (shell.open) { navigateSettings(route); return Promise.resolve(); }
+  shell.open = true;
+  shell.token += 1;
+  var token = shell.token;
+  shell.returnFocus = document.activeElement;
+  shell.scope = null; shell.pages = {}; shell.slug = null;
+  closeFileViewer();
+  shell.notesReopen = isNotesBrowserOpen();
+  if (shell.notesReopen) closeNotesBrowser();
+  holdNotesForSettings();
+  root.classList.remove('hidden');
+  shell.restoreInert = isolateSettingsDialog(root);
+  setGears(true);
+  store.set({ settingsOpen: true });
+  var userAtOpen = store.get('myUserId');
+  shell.verified = false; shell.pending = null;
+  shell.access = provisionalAccess();
+  setShellStatus('');
+  if (route.scope !== 'server') applyRoute(route, true);
+  else { renderScopeTabs(shell.access, 'personal', onScopeSelect); setShellStatus('Checking administrator access…'); }
+  function current(me) {
+    // Stale after close/reopen, or a different signed-in user: ignore entirely.
+    return shell.open && token === shell.token && store.get('myUserId') === userAtOpen && (!me || !me.user || !userAtOpen || me.user.id === userAtOpen);
+  }
+  return fetchMe().then(function (me) {
+    if (!current(me)) return;
+    var access = accessFromMe(me, me.permissions || null);
+    store.set({ adminMe: me, permissions: me.permissions || null, projectsAccessLoaded: true });
+    var needsRoute = !shell.scope;
+    var changed = access.server !== shell.access.server || access.multiUser !== shell.access.multiUser || access.project !== shell.access.project;
+    shell.access = access;
+    shell.verified = true;
+    var pending = shell.pending; shell.pending = null;
+    if (pending) applyRoute(pending, true);
+    else if (needsRoute) applyRoute(route, true);
+    else if (changed) applyRoute(scopeAvailable(shell.scope, access) ? currentRoute() : { scope: 'personal' }, false);
+  }, function () {
+    if (!current()) return;
+    // Verification failed: Server stays unavailable and the view is rebuilt without it.
+    shell.access = Object.assign({}, shell.access, { server: false });
+    shell.verified = true;
+    var queued = shell.pending; shell.pending = null;
+    applyRoute(queued || (shell.scope && shell.scope !== 'server' ? currentRoute() : { scope: 'personal' }), false);
+    setShellStatus('Could not verify administrator access, so Server settings are unavailable. Close and reopen Settings to retry.', 'error');
+  });
+}
+
+function closePrompt() {
+  var withDrafts = Object.keys(controllers).filter(function (id) { return controllers[id].leavePrompt && controllers[id].leavePrompt('close'); });
+  if (!withDrafts.length) return null;
+  if (withDrafts.length === 1 && withDrafts[0] === shell.scope) return controllers[shell.scope].leavePrompt('close');
+  return { message: 'You have unsaved changes in another settings area. Closing keeps these drafts in this tab, but reloading the page will lose them.', action: 'Close with drafts' };
+}
+
+export function closeSettings(opts) {
+  opts = opts || {};
+  if (!shell.open) return;
+  if (opts.onlyScope && shell.scope !== opts.onlyScope) return;
+  function finish() {
+    shell.token += 1; binding.invalidate();
+    var ctrl = controller();
+    if (ctrl && ctrl.leave) ctrl.leave();
+    Object.keys(controllers).forEach(function (id) { if (controllers[id].close) controllers[id].close(); });
+    root.classList.add('hidden');
+    if (shell.restoreInert) { shell.restoreInert(); shell.restoreInert = null; }
+    setGears(false);
+    shell.open = false; shell.scope = null; shell.slug = null; shell.waiting = null; shell.offline = false; shell.verified = false; shell.pending = null;
+    store.set({ settingsOpen: false });
+    releaseNotesForSettings();
+    if (!opts.cleanup) {
+      if (shell.notesReopen) openNotesBrowser();
+      var focus = shell.returnFocus;
+      if (!focus || !focus.isConnected || focus === document.body) focus = document.getElementById('server-settings-btn');
+      if (focus) focus.focus();
+    }
+    shell.notesReopen = false; shell.returnFocus = null;
+  }
+  if (opts.cleanup || opts.force) { finish(); return; }
+  var ctrl = controller();
+  var busy = ctrl && ctrl.busy && ctrl.busy('close');
+  if (busy) { showToast(busy); return; }
+  var prompt = closePrompt();
+  if (!prompt) { finish(); return; }
+  confirmSettingsAction(prompt.message, prompt.action, function () { if (prompt.apply) prompt.apply(); finish(); });
+}
+
+// Authorisation, ordering and the open project can change while settings
+// are open; an unavailable target is cleared rather than silently replaced.
+function refreshLive() {
+  if (!shell.open || !shell.scope) return;
+  var perms = store.get('permissions');
+  var project = !perms || perms.projectSettings !== false;
+  if (project !== shell.access.project) {
+    shell.access = Object.assign({}, shell.access, { project: project });
+    if (shell.scope === 'project' && !project) { applyRoute({ scope: 'personal' }, false); setShellStatus('Project settings are no longer permitted for your account.', 'error'); return; }
+    renderScopeTabs(shell.access, shell.scope, onScopeSelect);
+  }
+  if (shell.scope !== 'project') return;
+  syncConnectivity();
+  if (shell.waiting && store.get('projectListLoaded') === true) {
+    var waiting = shell.waiting; shell.waiting = null;
+    applyRoute({ scope: 'project', page: shell.pages.project, slug: waiting.slug }, false);
+    return;
+  }
+  if (shell.waiting) return;
+  var choices = projectChoices();
+  var ctrl = controller();
+  var target = findChoice(choices, shell.slug);
+  var signature = choicesSignature(choices, target ? shell.slug : '');
+  if (signature !== lastChoices) { lastChoices = signature; renderProjectSelect(choices, target ? shell.slug : '', onProjectSelect); }
+  if (shell.slug && !target) {
+    var lostSlug = shell.slug;
+    binding.invalidate(); shell.slug = null;
+    ctrl.clearTarget(lostSlug);
+    ctrl.setEmpty('That project is no longer available for your account. Choose another project.', 'lost');
+    syncProjectSelect('');
+    setShellStatus('The selected project is no longer available. Unsaved edits for it were not applied.', 'error');
+  } else if (target) ctrl.refreshTarget(shell.slug, target.project);
+}
+
+function syncConnectivity() {
+  var offline = store.get('connected') === false;
+  if (offline && !shell.offline) { shell.offline = true; setShellStatus(OFFLINE, 'error'); }
+  else if (!offline && shell.offline) { shell.offline = false; setShellStatus(''); }
+}
+
+export function initSettingsShell() {
+  root = document.getElementById('settings-shell');
+  if (!root) return;
+  var content = document.getElementById('settings-shell-content');
+  ['user-settings', 'project-settings', 'server-settings'].forEach(function (id) {
+    var pane = document.getElementById(id);
+    if (pane) { pane.classList.add('settings-pane', 'hidden'); content.appendChild(pane); }
+  });
+  document.getElementById('settings-shell-close').onclick = function () { closeSettings(); };
+  var server = document.getElementById('server-settings-btn');
+  if (server) server.addEventListener('click', function () { if (shell.open) closeSettings(); else openSettings(); });
+  var personal = document.getElementById('user-settings-btn');
+  if (personal) personal.addEventListener('click', function () { openSettings({ scope: 'personal' }); });
+  document.addEventListener('keydown', function (event) {
+    if (shell.open && event.key === 'Tab' && !document.querySelector('#settings-confirm, .admin-modal-overlay')) trapSettingsFocus(event, root);
+    if (!shell.open || event.key !== 'Escape' || event.defaultPrevented) return;
+    if (store.get('speechPopup') || document.querySelector(OVERLAYS)) return;
+    event.preventDefault(); closeSettings();
+  });
+  store.subscribe(function (state, previous) {
+    if (state.myUserId !== previous.myUserId) { closeSettings({ cleanup: true }); return; }
+    if (state.projectsHubList !== previous.projectsHubList || state.currentSlug !== previous.currentSlug || state.permissions !== previous.permissions || state.projectListLoaded !== previous.projectListLoaded || state.connected !== previous.connected) refreshLive();
+  });
+}

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

@@ -10,7 +10,7 @@ import { iconHtml, refreshIcons } from './icons.js';
 import { parseEmojis } from './markdown.js';
 import { getCurrentTheme, getChatLayout, setChatLayout } from './theme.js';
 import { openCommandPalette } from './command-palette.js';
-import { openProjectSettings } from './project-settings.js';
+import { openSettings } from './settings-shell.js';
 import { getCachedSessions, openSessionContextMenu } from './sidebar-sessions.js';
 import { renderSessionPresence } from './session-presence-ui.js';
 import {
@@ -1033,6 +1033,7 @@ export function renderSheetTools(listEl) {
 
 function renderSheetSettings(listEl) {
   var items = [
+    { icon: "user-cog", label: "Personal Settings", action: "personal-settings" },
     { icon: "folder-cog", label: "Project Settings", action: "project-settings" },
     { icon: "settings", label: "Server Settings", action: "server-settings" }
   ];
@@ -1044,35 +1045,12 @@ function renderSheetSettings(listEl) {
       btn.innerHTML = '<i data-lucide="' + item.icon + '"></i><span class="mobile-more-item-label">' + item.label + '</span>';
       btn.addEventListener("click", function () {
         closeMobileSheet();
-        if (item.action === "project-settings") {
-          setTimeout(function () {
-            // Find current project data
-            var proj = null;
-            for (var pi = 0; pi < getCachedProjectList().length; pi++) {
-              if (getCachedProjectList()[pi].slug === getCachedCurrentSlug()) {
-                proj = getCachedProjectList()[pi];
-                break;
-              }
-            }
-            // For mate projects, use mate display name instead of slug
-            if (proj && proj.isMate && getCachedMates().length > 0) {
-              var mateId = getCachedCurrentSlug().replace("mate-", "");
-              var _mates = getCachedMates();
-              for (var mi = 0; mi < _mates.length; mi++) {
-                var mp = _mates[mi].profile || {};
-                if (_mates[mi].id === mateId) {
-                  proj = Object.assign({}, proj, { name: mp.displayName || _mates[mi].name || proj.name });
-                  break;
-                }
-              }
-            }
-            if (proj && store.get('ownerLocked')) proj = Object.assign({}, proj, { ownerLocked: true });
-            openProjectSettings(getCachedCurrentSlug(), proj);
-          }, 250);
-        } else if (item.action === "server-settings") {
-          var settingsBtn = document.getElementById("server-settings-btn");
-          if (settingsBtn) setTimeout(function () { settingsBtn.click(); }, 250);
-        }
+        // The shell resolves each scope to its exact page and falls back for
+        // accounts that may not use it. Project settings target the open
+        // workspace first.
+        var route = item.action === "project-settings" ? { scope: "project", slug: getCachedCurrentSlug() }
+          : item.action === "server-settings" ? { scope: "server" } : { scope: "personal" };
+        setTimeout(function () { openSettings(route); }, 250);
       });
       listEl.appendChild(btn);
     })(items[i]);