clay-server 5.2.0-beta.9 → 5.2.1-beta.1

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/topbar-workbench-controls.js

@@ -0,0 +1,102 @@
+// Placement of the Browser, Terminal and sticky-note visibility buttons.
+// Desktop keeps them in the top bar beside Notifications and Settings; where the
+// top bar is hidden (mobile) the very same nodes return to the title bar status
+// area. Nodes, IDs, handlers, state and permissions are never recreated.
+var MOBILE = '(max-width: 768px)';
+var IDS = ['sticky-notes-toggle-btn', 'shared-browser-toggle-btn', 'terminal-toggle-btn'];
+var DESKTOP_ORDER = ['shared-browser-toggle-btn', 'terminal-toggle-btn', 'sticky-notes-toggle-btn'];
+
+function place(mobile) {
+  var status = document.querySelector('#main-column > .title-bar-content .status');
+  var actions = document.querySelector('#top-bar .top-bar-actions');
+  var anchor = document.getElementById('notif-center-btn');
+  if (!status || !actions) return;
+  var order = mobile ? IDS : DESKTOP_ORDER;
+  for (var i = 0; i < order.length; i++) {
+    var node = document.getElementById(order[i]);
+    if (!node) continue;
+    if (mobile) status.appendChild(node);
+    else actions.insertBefore(node, anchor);
+  }
+}
+
+// The search trigger is centred in the bar. It keeps that place and width when
+// the free gap between the left group and the actions allows, otherwise it
+// collapses to an icon-only trigger (same node, ID, handler and label) inside
+// the gap. If even the icon cannot fit, the per-vendor usage chips fold into the
+// existing all-vendors chip, then the active-session usage link folds, before
+// anything else is touched. Action buttons are never hidden or clipped.
+var MIN_FULL = 150, ICON = 24, MARGIN = 12;
+
+// Sizes seen right after the last applied layout. Observer wake-ups that find the
+// same sizes (including the ones our own class changes cause) do no work at all.
+var applied = null;
+
+function sizes(bar, left, actions) {
+  return Math.round(bar.offsetWidth) + '|' + Math.round(left.offsetWidth) + '|' + Math.round(actions.offsetWidth);
+}
+
+function layoutTopbar(force) {
+  var bar = document.getElementById('top-bar');
+  var left = bar && bar.querySelector('.top-bar-left-pills');
+  var actions = bar && bar.querySelector('.top-bar-actions');
+  var search = document.getElementById('cmd-palette-btn');
+  if (!bar || !left || !actions || !search) return;
+  if (!bar.offsetWidth) return;
+  if (!force && applied === sizes(bar, left, actions)) return;
+  if (getComputedStyle(search).display === 'none') return;
+  var levels = [[], ['usage-compact'], ['usage-compact', 'usage-compact-link']];
+  var result = null;
+  for (var i = 0; i < levels.length && !result; i++) {
+    bar.classList.remove('usage-compact', 'usage-compact-link', 'search-icon');
+    levels[i].forEach(function (name) { bar.classList.add(name); });
+    bar.style.removeProperty('--top-bar-search-width'); bar.style.removeProperty('--top-bar-search-left');
+    var width = bar.getBoundingClientRect().width, center = width / 2;
+    var barLeft = bar.getBoundingClientRect().left;
+    var leftEdge = left.getBoundingClientRect().right - barLeft, actionsEdge = actions.getBoundingClientRect().left - barLeft;
+    var half = Math.min(center - leftEdge, actionsEdge - center) - MARGIN;
+    var target = Math.min(520, width * 0.4);
+    if (2 * half >= MIN_FULL) result = { mode: 'full', width: Math.min(target, 2 * half), left: null, level: i };
+    else if (actionsEdge - leftEdge >= ICON + 2 * MARGIN) {
+      // Stay centred in the bar when that is inside the gap.
+      var lo = leftEdge + MARGIN + ICON / 2, hi = actionsEdge - MARGIN - ICON / 2;
+      result = { mode: 'icon', width: ICON, left: Math.min(Math.max(center, lo), hi), level: i };
+    }
+  }
+  if (!result) result = { mode: 'icon', width: ICON, left: Math.max(left.getBoundingClientRect().right - bar.getBoundingClientRect().left + MARGIN + ICON / 2, 0), level: levels.length - 1 };
+  bar.classList.toggle('search-icon', result.mode === 'icon');
+  if (result.mode === 'full') bar.style.setProperty('--top-bar-search-width', Math.round(result.width) + 'px');
+  else bar.style.setProperty('--top-bar-search-left', Math.round(result.left) + 'px');
+  applied = sizes(bar, left, actions);
+}
+
+function observeTopbarLayout() {
+  var bar = document.getElementById('top-bar');
+  if (!bar || typeof ResizeObserver === 'undefined') return;
+  var queued = false;
+  var run = function (force) { if (queued) return; queued = true; requestAnimationFrame(function () { queued = false; layoutTopbar(force === true); }); };
+  var observer = new ResizeObserver(function () { run(false); });
+  observer.observe(bar);
+  ['.top-bar-left-pills', '.top-bar-actions'].forEach(function (selector) { var node = bar.querySelector(selector); if (node) observer.observe(node); });
+  // Content swaps that leave the applied size unchanged (a folded usage chip changing)
+  // still need a fresh decision; plain class toggles are caught by the size observers.
+  new MutationObserver(function () { run(true); }).observe(bar.querySelector('.top-bar-actions'), { childList: true, subtree: true, characterData: true });
+  layoutTopbar(true);
+}
+
+// Mirror "title bar replaced by another view" on the top bar so CSS needs no body-level :has().
+function mirrorTitleBarHidden() {
+  var title = document.querySelector('#main-column > .title-bar-content'), bar = document.getElementById('top-bar');
+  if (!title || !bar) return;
+  var sync = function () { bar.classList.toggle('title-bar-hidden', title.classList.contains('hidden')); };
+  sync();
+  new MutationObserver(sync).observe(title, { attributes: true, attributeFilter: ['class'] });
+}
+
+export function initTopbarWorkbenchControls() {
+  var query = window.matchMedia(MOBILE);
+  place(query.matches);
+  query.addEventListener('change', function () { place(query.matches); });
+  mirrorTitleBarHidden();
+  observeTopbarLayout();
+}

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