clay-server 5.2.0-beta.10 → 5.2.0-beta.11

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

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