clay-server 5.2.0-beta.9 → 5.2.0

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]);

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

@@ -10,7 +10,8 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { closeSidebar } from './sidebar.js';
 import { showIconTooltip, hideIconTooltip, bindIconTooltip, closeUserCtxMenu, getCurrentDmUserId } from './sidebar-mates.js';
-import { switchProject, openAddProjectModal, getCachedProjects } from './app-projects.js';
+import { switchProject, getCachedProjects } from './app-projects.js';
+import { openAddProjectModal } from './project-start-dialog.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
 import { isExternalWorktree, externalWorktreeTooltip, appendExternalWorktreeBadge } from './worktree-location.js';

package/lib/public/modules/theme.js

@@ -222,6 +222,7 @@ var customSet = {};   // ids that came from ~/.clay/themes/
 var themesLoaded = false;
 var currentThemeId = DEFAULT_DARK_THEME_ID;
 var changeCallbacks = [];
+var externalThemeId = null;  // set by the parent shell for pane iframes
 var STORAGE_KEY = "clay-theme";
 var MODE_KEY = "clay-mode";        // "light" | "dark" | null (system)
 var SKIN_KEY = "clay-skin";        // theme id within current variant pair
@@ -274,6 +275,23 @@ export function onThemeChange(fn) {
   changeCallbacks.push(fn);
 }
 
+// The appearance this frame currently shows, for the parent shell to hand to
+// its pane iframes. Never persisted from here.
+export function getAppearanceSnapshot() {
+  var pref = store.get('appearanceDraft') || store.get('appearancePreference') || {};
+  return { themeId: currentThemeId, userId: store.get('myUserId') || null,
+    preference: { configured: !!pref.configured || !!pref.mode || !!pref.theme, theme: pref.theme || null, mode: pref.mode || null,
+      lightTheme: pref.lightTheme || null, darkTheme: pref.darkTheme || null } };
+}
+
+// A pane iframe mirrors the parent's live appearance. The server remains the
+// only persisted source, so this applies the view without saving anything.
+export function applyExternalAppearance(snapshot) {
+  externalThemeId = snapshot.themeId;
+  store.set({ appearancePreference: snapshot.preference, appearanceDraft: null });
+  applyTheme(snapshot.themeId);
+}
+
 export function getThemes() {
   // Return a copy
   var all = {};
@@ -367,7 +385,7 @@ function loadThemes() {
 
     // Always apply the current theme now that real data is loaded
     // (before this, only defaultExactVars was used as fallback)
-    applyTheme(currentThemeId);
+    applyTheme(externalThemeId && getTheme(externalThemeId) ? externalThemeId : currentThemeId);
   }).catch(function () {
     // API unavailable — keep the embedded Clay Studio pair.
     themes[DEFAULT_DARK_THEME_ID] = defaultDarkFallback;
@@ -482,8 +500,13 @@ function updateToggleIcon() {
   // User settings toggle
   var usToggle = document.getElementById("us-theme-toggle");
   if (usToggle) usToggle.checked = isLight;
-  // User island button is now a static "skins / themes" trigger; no
-  // icon swap on mode change.
+  var quickToggle = document.getElementById("appearance-mode-toggle");
+  if (quickToggle) {
+    var label = isLight ? "Switch to dark mode" : "Switch to light mode";
+    quickToggle.setAttribute("aria-label", label);
+    quickToggle.title = label;
+    quickToggle.innerHTML = '<i data-lucide="' + (isLight ? "moon" : "sun") + '" class="cursor-share-icon" aria-hidden="true"></i>';
+  }
   refreshIcons();
 }
 
@@ -649,6 +672,9 @@ export function initTheme() {
     }
   }
 
+  var quickToggle = document.getElementById("appearance-mode-toggle");
+  if (quickToggle) quickToggle.addEventListener("click", toggleDarkMode);
+
   // Set initial toggle icon
   updateToggleIcon();
 
@@ -711,6 +737,8 @@ async function loadAppearance() {
     if (!response.ok) throw new Error('Appearance preferences unavailable.');
     var data = await response.json();
     if(store.get('appearanceSaveRequest'))return;
+    // A pane that already mirrors its parent's live view is newer than this GET, which may predate a pending save.
+    if(externalThemeId)return;
     if (data.configured) {store.set({appearancePreference:data});applyTheme(themeIdForMode(data.mode || getSystemMode()));}
     else {
       var legacy = null;try {legacy = localStorage.getItem(STORAGE_KEY);}catch(error){}

package/lib/public/modules/user-settings-integrations.js

@@ -54,7 +54,8 @@ export function initPersonalIntegrations() {
     if (!store.get('personalLinearDirty')) { action(); return; }
     confirmSettingsAction('Discard this unsaved connection draft?', 'Discard', action);
   }
-  form.oninput = function () { store.set({personalLinearDirty: !!key.value || name.value !== store.get('personalLinearOriginalName')}); };
+  // Only an open editor holds a draft; autofill or restore into the hidden form is not an edit.
+  form.oninput = function () { if (!store.get('personalLinearEditing')) return; store.set({personalLinearDirty: !!key.value || name.value !== store.get('personalLinearOriginalName')}); };
   async function save(disconnect) {
     if (store.get('personalLinearSaving')) return;
     var actor = store.get('myUserId'), generation = store.get('personalLinearGeneration');