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

package/lib/public/modules/pane-appearance-bridge.js

@@ -0,0 +1,59 @@
+// Live appearance sync between the app shell and its pane iframes (split
+// Driver/Worker panes and the contextual Mate window). Each iframe runs its own
+// theme module and only reads the persisted preference at load, so the shell
+// pushes the applied appearance down on every change and when a frame loads.
+// Same-origin only, shell to child only; nothing is saved from either side.
+
+import { store } from './store.js';
+import { onThemeChange, getAppearanceSnapshot, applyExternalAppearance } from './theme.js';
+
+var ID = /^[a-zA-Z0-9_-]{1,120}$/;
+
+function paneFrames() {
+  return Array.prototype.filter.call(document.querySelectorAll('iframe'), function (frame) {
+    try { var url = new URL(frame.src, window.location.href); return url.origin === window.location.origin && url.searchParams.get('pane') === '1'; }
+    catch (error) { return false; }
+  });
+}
+
+function push(frame) {
+  var snapshot = getAppearanceSnapshot();
+  try { if (frame.contentWindow) frame.contentWindow.postMessage({ type: 'clay-appearance', snapshot: snapshot }, window.location.origin); } catch (error) {}
+}
+
+function isId(value) { return typeof value === 'string' && ID.test(value); }
+function isIdOrNull(value) { return value === null || isId(value); }
+
+// Exact shape only: strings or null, never coerced values.
+function validSnapshot(value) {
+  var pref = value && typeof value === 'object' ? value.preference : null;
+  if (!pref || typeof pref !== 'object' || !isId(value.themeId)) return false;
+  if (value.userId !== null && (typeof value.userId !== 'string' || !value.userId || value.userId.length > 200)) return false;
+  if (typeof pref.configured !== 'boolean') return false;
+  if (pref.mode !== null && pref.mode !== 'light' && pref.mode !== 'dark') return false;
+  return isIdOrNull(pref.theme) && isIdOrNull(pref.lightTheme) && isIdOrNull(pref.darkTheme);
+}
+
+export function initPaneAppearanceBridge() {
+  if (store.get('paneMode')) {
+    if (window.parent === window) return;
+    window.addEventListener('message', function (event) {
+      if (event.origin !== window.location.origin || event.source !== window.parent) return;
+      var msg = event.data;
+      if (!msg || msg.type !== 'clay-appearance' || !validSnapshot(msg.snapshot)) return;
+      // Once this frame knows its owner the snapshot must name exactly that owner (null is a mismatch).
+      // Before identity is known, or in solo mode without one, any well-formed snapshot applies.
+      var owner = store.get('myUserId') || null;
+      if (owner !== null && msg.snapshot.userId !== owner) return;
+      applyExternalAppearance(msg.snapshot);
+    });
+    return;
+  }
+  onThemeChange(function () { paneFrames().forEach(push); });
+  // Frames that rejected an early snapshot (identity not yet known here) get it again once it is.
+  store.subscribe(function (state, previous) { if (state.myUserId !== previous.myUserId) paneFrames().forEach(push); });
+  // A frame that finished loading may have been seeded before a pending save.
+  document.addEventListener('load', function (event) {
+    if (event.target && event.target.tagName === 'IFRAME' && paneFrames().indexOf(event.target) >= 0) push(event.target);
+  }, true);
+}

package/lib/public/modules/profile.js

@@ -135,9 +135,12 @@ export function uploadAvatarBlob(blob) {
 }
 
 // --- Avatar position picker ---
-export function showAvatarPositioner(img, objectUrl, onDone) {
+// With a host element the editor mounts inline as a settings subview instead
+// of a page-level overlay.
+export function showAvatarPositioner(img, objectUrl, onDone, host) {
   var outputSize = 256;
   var viewSize = 220;
+  var priorFocus = document.activeElement;
 
   // State
   var scale = 1;
@@ -169,7 +172,7 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
 
   // Build overlay
   var overlay = document.createElement('div');
-  overlay.className = 'avatar-positioner-overlay';
+  overlay.className = host ? 'avatar-positioner-inline settings-subview' : 'avatar-positioner-overlay';
 
   var container = document.createElement('div');
   container.className = 'avatar-positioner-container';
@@ -225,8 +228,10 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
   container.appendChild(btnRow);
 
   overlay.appendChild(container);
-  document.body.appendChild(overlay);
+  if (host) { host.classList.add('has-subview'); host.appendChild(overlay); overlay.setAttribute('role', 'region'); overlay.setAttribute('aria-label', 'Position your avatar'); }
+  else document.body.appendChild(overlay);
   updatePreview();
+  if (host) doneFocus();
 
   // Drag
   var dragging = false;
@@ -288,9 +293,12 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
     updatePreview();
   }, { passive: false });
 
+  function doneFocus() { closeBtn.focus(); }
+
   function cleanup(revoke) {
     document.removeEventListener('keydown', onOverlayKeydown);
     overlay.remove();
+    if (host) { host.classList.remove('has-subview'); if (priorFocus && priorFocus.isConnected) priorFocus.focus(); }
     if (revoke) URL.revokeObjectURL(objectUrl);
   }
 

package/lib/public/modules/project-mate-creation-workspace.js

@@ -81,6 +81,9 @@ function startMateCreation() {
   maybeStartPendingCreation();
 }
 
+// Entry for the zero-project welcome: the same Clay-guided flow the add button's Mate choice runs.
+export function startClayMateCreation() { startMateCreation(); }
+
 function maybeStartPendingCreation() {
   var state = store.snap();
   if (!state.projectMateCreationPendingStart || !state.connected || state.activeProjectSlug !== 'mate-' + state.projectMateCreationMateId) return;
@@ -89,11 +92,17 @@ function maybeStartPendingCreation() {
   store.set({ projectMateCreationPendingStart: false, projectMateCreationAwaitingHistory: true, projectMateCreationRequestId: requestId });
 }
 
-function choiceButton(icon, title, description) {
+function choiceButton(artwork, title, description) {
   var button = document.createElement('button');
   button.type = 'button';
   button.className = 'project-create-choice-option';
-  button.innerHTML = iconHtml(icon);
+  var image = document.createElement('img');
+  image.src = '/welcome-art/' + artwork + '.png';
+  image.alt = '';
+  image.width = 1536;
+  image.height = 1024;
+  image.decoding = 'async';
+  button.appendChild(image);
   var copy = document.createElement('span');
   var heading = document.createElement('strong');
   heading.textContent = title;
@@ -121,9 +130,9 @@ export function openProjectCreateChoice(opener, openProject) {
   var title = document.createElement('h2');
   title.id = 'project-create-choice-title';
   title.textContent = 'What would you like to add?';
-  var mate = choiceButton('users', 'Mate', 'Shape a new collaborator with Clay');
+  var mate = choiceButton('mate-clay', 'Create a Mate', 'A specialist to work alongside you.');
   mate.addEventListener('click', startMateCreation);
-  var project = choiceButton('folder-plus', 'Project', 'Add a local workspace');
+  var project = choiceButton('project-clay', 'Start a project', 'Work on code or files together.');
   project.addEventListener('click', function () {
     closeChoice(false);
     openProject();

package/lib/public/modules/project-session-visibility-settings.js

@@ -27,12 +27,10 @@ function setSelectState(select, value, disabled) {
   select.disabled = !!disabled;
 }
 
-function isCurrentProject(active) {
-  return !!(active && active.slug && active.slug === store.get('currentSlug'));
-}
-
+// Editable for any authorised selected project: the server re-authorises the
+// exact slug (owner, permission, access, worktree) and echoes it back.
 function isReadOnly(active) {
-  return !active || !active.authorized || active.isWorktree || !isCurrentProject(active);
+  return !active || !active.authorized || active.isWorktree;
 }
 
 function renderActiveState() {
@@ -40,23 +38,26 @@ function renderActiveState() {
   var pending = pendingState();
   var select = selectElement();
   var inheritedHint = document.getElementById("ps-session-visibility-default-inherited-hint");
-  var nonCurrentHint = document.getElementById("ps-session-visibility-default-non-current-hint");
   if (inheritedHint) inheritedHint.classList.toggle("hidden", !(active && active.isWorktree));
-  if (nonCurrentHint) nonCurrentHint.classList.toggle("hidden", !(active && active.authorized && !active.isWorktree && !isCurrentProject(active)));
   if (!select || !active) return;
-  setSelectState(select, active.effectiveValue, isReadOnly(active) || !!(pending && pending.slug === active.slug));
+  // One request at a time: a pending change for any project holds the control.
+  setSelectState(select, active.effectiveValue, isReadOnly(active) || !!pending);
 }
 
-function isAuthorized(project) {
+// The server requires the project owner plus the projectSettings permission.
+// An administrator who is not the owner may see the value but not change it.
+function visibilityAccess(project) {
   var users = store.get('cachedAllUsers') || [];
   var userId = store.get('myUserId');
   var currentUser = null;
   for (var i = 0; i < users.length; i++) {
     if (users[i].id === userId) { currentUser = users[i]; break; }
   }
-  return !!(store.get('isMultiUserMode') && project &&
-    ((project.projectOwnerId && project.projectOwnerId === userId) || (currentUser && currentUser.role === "admin")) &&
-    (!store.get('permissions') || store.get('permissions').projectSettings !== false));
+  var permitted = !store.get('permissions') || store.get('permissions').projectSettings !== false;
+  var owner = !!(project && project.projectOwnerId && project.projectOwnerId === userId);
+  var admin = !!(currentUser && currentUser.role === "admin");
+  var multi = !!(store.get('isMultiUserMode') && project && permitted);
+  return { visible: multi && (owner || admin), editable: multi && owner };
 }
 
 export function initProjectSessionVisibilitySettings() {
@@ -80,7 +81,6 @@ export function initProjectSessionVisibilitySettings() {
   });
 
   store.subscribe(function (state, previous) {
-    if (state.currentSlug !== previous.currentSlug) renderActiveState();
     if (state.connected || previous.connected !== true) return;
     var pending = pendingState();
     if (!pending) return;
@@ -95,10 +95,13 @@ export function initProjectSessionVisibilitySettings() {
 export function populateProjectSessionVisibilitySettings(slug, project) {
   var field = document.getElementById("ps-session-visibility-default-field");
   var select = selectElement();
-  if (field) field.style.display = isAuthorized(project) ? "" : "none";
+  var access = visibilityAccess(project);
+  if (field) field.style.display = access.visible ? "" : "none";
+  var ownerHint = document.getElementById("ps-session-visibility-default-owner-hint");
+  if (ownerHint) ownerHint.classList.toggle("hidden", !(access.visible && !access.editable));
   if (!select) return;
   var value = project && project.sessionVisibilityDefault === "shared" ? "shared" : "private";
-  var active = { slug: slug || "", effectiveValue: value, isWorktree: !!(project && project.isWorktree), authorized: isAuthorized(project) };
+  var active = { slug: slug || "", effectiveValue: value, isWorktree: !!(project && project.isWorktree), authorized: access.editable };
   var pending = pendingState();
   setVisibilityState(active, pending);
   renderActiveState();
@@ -124,7 +127,7 @@ export function handleProjectSessionVisibilityDefault(msg) {
   var active = activeState();
   setVisibilityState(active, null);
   var select = selectElement();
-  if (!select || !active || active.slug !== msg.slug) return;
+  if (!select || !active || active.slug !== msg.slug) { renderActiveState(); return; }
   if (!msg.ok) {
     active = Object.assign({}, active, { effectiveValue: pending.previous });
     setVisibilityState(active, null);

package/lib/public/modules/project-settings-environment.js

@@ -31,7 +31,18 @@ export function handleProjectEnv(msg) {
   update({ loaded: true, saved: msg.envrc || '', rows: parseEnvString(msg.envrc || '') });
   render(); status('');
 }
-function changeRows(rows) { update({ rows: rows, dirty: true }); document.getElementById('ps-env-save').disabled = false; status('Unsaved changes'); }
+// A draft exists only while the rows differ from the saved variables; blank rows and edits that are
+// reverted by hand leave nothing to save.
+function rowsSignature(rows) {
+  return (rows || []).filter(function (row) { return row.key.trim() || row.value; }).map(function (row) { return row.key.trim() + '\u0000' + row.value; }).join('\n');
+}
+function changeRows(rows) {
+  var dirty = rowsSignature(rows) !== rowsSignature(parseEnvString(state().saved || ''));
+  update({ rows: rows, dirty: dirty });
+  document.getElementById('ps-env-save').disabled = !dirty || !!state().saving;
+  if (!dirty) clearCachedDraft();
+  status(dirty ? 'Unsaved changes' : '');
+}
 function render() {
   var editor = state();
   var list = document.getElementById('ps-env-list'); list.replaceChildren();

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

@@ -1,76 +1,64 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { trapSettingsFocus, isolateSettingsDialog, confirmSettingsAction } from './server-settings-state.js';
 import { initProjectEnvironment, openProjectEnvironment, projectEnvironmentDirty, discardProjectEnvironment } from './project-settings-environment.js';
 import { enhanceSettingsSelects } from './settings-select.js';
-// Project identity and access in a focused settings dialog.
+// Project identity, access and environment: the Project pane of the unified
+// settings shell. The shell owns the selected target; this pane only renders
+// and edits the project it was last bound to.
 import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
 import { parseEmojis } from './markdown.js';
-import { holdNotesForSettings, releaseNotesForSettings } from './sticky-notes.js';
-import { openNotesBrowser, closeNotesBrowser, isNotesBrowserOpen } from './sticky-notes-browser.js';
+import { registerSettingsScope, openSettings, closeSettings, isSettingsShellOpen, activeSettingsScope } from './settings-shell.js';
 import { initProjectSessionVisibilitySettings, populateProjectSessionVisibilitySettings } from './project-session-visibility-settings.js';
 
 var panelEl = null;
-var navItems = null;
 var sections = null;
-var notesBrowserReopen = false;
-var restoreBackground = null;
-var returnFocus = null;
 function settingsSlug() { return store.get("projectSettingsSlug"); }
 function settingsProject() { return store.get("projectSettingsProject"); }
 
 // Emoji categories (reuse from sidebar)
 var EMOJI_CATEGORIES = null;
 
+function renameDirty() {
+  var rename = document.getElementById("ps-rename-form");
+  var project = settingsProject();
+  return !!(rename && project && !rename.classList.contains("hidden") && document.getElementById("ps-rename-input").value.trim() !== (project.name || ""));
+}
+
+function discardDrafts() {
+  discardProjectEnvironment();
+  cancelRename();
+}
+
+var controller = {
+  enter: function () {},
+  activate: function (page) { switchSection(page); },
+  leave: function () { closePsEmojiPicker(); },
+  busy: function (kind) { return kind !== "page" && (store.get("projectEnvironmentEditor") || {}).saving ? "Wait for the environment save to finish." : ""; },
+  leavePrompt: function (kind) {
+    var env = projectEnvironmentDirty();
+    var rename = renameDirty();
+    if (!env && !rename) return null;
+    if (kind === "close") return { message: "Your changes have not been saved. Discard them and close?", action: "Discard changes", apply: discardDrafts };
+    if (kind === "page") return null;
+    if (kind === "project" && rename) return { message: "Your unsaved project name change will be discarded when you switch projects. An unsaved environment draft stays in this tab.", action: "Discard name and switch", apply: cancelRename };
+    return { message: "Your unsaved project changes will remain in this tab. Leave this editor and keep the draft?", action: "Keep draft and leave" };
+  },
+  retarget: bindProjectSettings,
+  refreshTarget: refreshProjectSettings,
+  clearTarget: clearProjectSettings,
+  setEmpty: setPaneEmpty
+};
 
 export function initProjectSettings(emojiCategories) {
   EMOJI_CATEGORIES = emojiCategories;
   panelEl = document.getElementById("project-settings");
   if (!panelEl) return;
-
-  document.body.appendChild(panelEl);
-  var destinations = [{id: 'profile', label: 'General'}, {id: 'access', label: 'Access'}, {id: 'environment', label: 'Environment'}];
-  var nav = panelEl.querySelector('.server-settings-nav-items');
-  var dropdown = document.getElementById('ps-nav-dropdown');
-  destinations.forEach(function (page) {
-    var button = document.createElement('button');
-    button.className = 'settings-nav-item'; button.dataset.section = page.id; button.textContent = page.label;
-    nav.appendChild(button);
-    var option = document.createElement('option'); option.value = page.id; option.textContent = page.label; dropdown.appendChild(option);
-  });
+  controller.pane = panelEl;
+  registerSettingsScope("project", controller);
   initProjectEnvironment();
-  panelEl.addEventListener('click', function (event) { if (event.target === panelEl) closeProjectSettings(); });
-  panelEl.addEventListener('keydown', function (event) {
-    if (event.key === 'Escape' && !event.defaultPrevented) { event.preventDefault(); event.stopPropagation(); closeProjectSettings(); }
-    trapSettingsFocus(event, panelEl);
-  });
-  navItems = panelEl.querySelectorAll(".settings-nav-item");
   sections = panelEl.querySelectorAll(".ps-section");
 
-  // Nav clicks
-  for (var i = 0; i < navItems.length; i++) {
-    navItems[i].addEventListener("click", function () {
-      switchSection(this.dataset.section);
-    });
-  }
-
-  // Mobile dropdown nav
-  var psNavDropdown = document.getElementById("ps-nav-dropdown");
-  if (psNavDropdown) {
-    psNavDropdown.addEventListener("change", function () {
-      switchSection(psNavDropdown.value);
-    });
-  }
-
-  // Close button
-  var closeBtn = document.getElementById("project-settings-close");
-  if (closeBtn) {
-    closeBtn.addEventListener("click", function () {
-      closeProjectSettings();
-    });
-  }
-
   // Profile: rename
   var renameBtn = document.getElementById("ps-rename-btn");
   var renameForm = document.getElementById("ps-rename-form");
@@ -111,98 +99,105 @@ export function initProjectSettings(emojiCategories) {
   }
   if (iconRemoveBtn) {
     iconRemoveBtn.addEventListener("click", function () {
-      if (getWs() && store.get('connected')) {
-        getWs().send(JSON.stringify({ type: "set_project_icon", slug: settingsSlug(), icon: null }));
-      }
-      updateIconPreview(null);
+      var slug = settingsSlug();
+      var previous = { icon: settingsProject() ? settingsProject().icon || null : null };
+      if (slug && sendEdit("set_project_icon", { slug: slug, icon: null }, previous)) updateIconPreview(null);
     });
   }
 
   initProjectSessionVisibilitySettings();
-  store.subscribe(function (next, previous) { if (next.myUserId !== previous.myUserId) closeProjectSettings({ cleanup: true }); });
 }
 
-export function openProjectSettings(slug, project) {
-  if (!panelEl) return;
-  returnFocus = document.activeElement;
-  if (!returnFocus || returnFocus === document.body) returnFocus = document.getElementById("title-bar-project-dropdown");
-  store.set({ projectSettingsSlug: slug, projectSettingsProject: project });
+// Entry for the project context menu and mobile sheet: show this exact
+// project's settings without changing the open workspace.
+export function openProjectSettings(slug) {
+  return openSettings({ scope: "project", page: "profile", slug: slug });
+}
+
+// Bind the pane to one project. Called by the shell for every target change.
+function bindProjectSettings(slug, project) {
+  var same = settingsSlug() === slug;
+  store.set({ projectSettingsSlug: slug, projectSettingsProject: Object.assign({}, project, { name: project.title || project.project || project.name || slug }) });
   var env = store.get("projectEnvironmentEditor");
   if (env && !env.dirty && !env.saving) store.set({ projectEnvironmentEditor: Object.assign({}, env, { loaded: false, loading: false }) });
+  if (same) refreshProjectSettings(slug, project);
+  else { closePsEmojiPicker(); populateProfile(); }
+  var active = panelEl.querySelector(".ps-section.active");
+  if (active && active.dataset.section === "environment") openProjectEnvironment(slug);
+}
 
-  // Set nav title
-  var navTitle = document.getElementById("ps-nav-title");
-  if (navTitle) navTitle.textContent = project.name || slug;
-
-  // Reset to first section
-  switchSection("profile");
-
-  // Populate profile
-  populateProfile();
+function refreshProjectSettings(slug, project) {
+  if (settingsSlug() !== slug) return;
+  var name = project.title || project.project || project.name || slug;
+  store.set({ projectSettingsProject: Object.assign({}, project, { name: name }) });
+  var nameEl = document.getElementById("ps-project-name");
+  if (nameEl) nameEl.textContent = name || "-";
+  updateIconPreview(project.icon || null);
+  populateProjectSessionVisibilitySettings(slug, settingsProject());
+  document.getElementById('ps-project-path').textContent = project.path || (slug === store.get('currentSlug') ? store.get('cwd') : '') || 'Folder information unavailable';
+}
 
+// The selected project is gone or no longer authorised.
+function clearProjectSettings(slug) {
+  var env = store.get("projectEnvironmentEditor") || {};
+  var drafts = Object.assign({}, store.get("projectEnvironmentDrafts") || {});
+  delete drafts[slug];
+  store.set({ projectSettingsSlug: null, projectSettingsProject: null, projectEnvironmentDrafts: drafts });
+  if (env.slug === slug) { store.set({ projectEnvironmentEditor: {} }); }
+  closePsEmojiPicker();
+  cancelRename();
+}
 
-  // Sticky notes must not sit over settings; remember what to restore.
-  if (panelEl.classList.contains("hidden")) {
-    notesBrowserReopen = isNotesBrowserOpen();
-    if (notesBrowserReopen) closeNotesBrowser();
-    holdNotesForSettings();
+var EMPTY_HEADINGS = { loading: "Loading projects", empty: "No project selected", error: "Projects unavailable", lost: "Project unavailable" };
+function setPaneEmpty(text, kind) {
+  var empty = document.getElementById("ps-empty");
+  if (empty) {
+    empty.hidden = !text;
+    document.getElementById("ps-empty-text").textContent = text || "";
+    empty.querySelector("h2").textContent = EMPTY_HEADINGS[kind] || EMPTY_HEADINGS.empty;
   }
+  panelEl.classList.toggle("ps-no-target", !!text);
+}
 
-  // Show panel
-  panelEl.classList.remove("hidden");
-  if (!restoreBackground) restoreBackground = isolateSettingsDialog(panelEl);
-  document.getElementById("project-settings-close").focus();
-  enhanceSettingsSelects(panelEl);
-  refreshIcons();
+// Rename and icon edits are bound to the exact project, request and (for the
+// reply) the slug the server echoes; a reply for another project never
+// changes the view.
+var pendingEdits = {};
+var editSequence = 0;
+function sendEdit(type, fields, previous) {
+  var ws = getWs();
+  if (!ws || !store.get("connected")) return false;
+  editSequence += 1;
+  var requestId = "project-settings-" + Date.now() + "-" + editSequence;
+  pendingEdits[requestId] = { slug: fields.slug, type: type, previous: previous };
+  ws.send(JSON.stringify(Object.assign({ type: type, requestId: requestId }, fields)));
+  return true;
+}
+
+export function handleProjectSettingsEditResult(msg) {
+  var pending = msg && msg.requestId && pendingEdits[msg.requestId];
+  if (!pending) return;
+  delete pendingEdits[msg.requestId];
+  if (msg.slug !== pending.slug || msg.ok || settingsSlug() !== pending.slug) return;
+  if (pending.type === "set_project_title") updateProjectSettingsName(pending.previous.name);
+  else updateProjectSettingsIcon(pending.previous.icon);
 }
 
-// `cleanup` is for teardown while leaving the project: the notes workbench is
-// not reopened over whatever screen comes next.
 export function closeProjectSettings(opts) {
-  if (!panelEl) return;
-  if (!(opts && opts.cleanup) && (store.get("projectEnvironmentEditor") || {}).saving) { showToast("Wait for the environment save to finish."); return; }
-  var rename = document.getElementById("ps-rename-form");
-  var renameDirty = rename && !rename.classList.contains("hidden") && document.getElementById("ps-rename-input").value.trim() !== (settingsProject().name || "");
-  if (!(opts && (opts.cleanup || opts.confirmed)) && (projectEnvironmentDirty() || renameDirty)) {
-    confirmSettingsAction('Your changes have not been saved. Discard them and close?', 'Discard changes', function () {
-      discardProjectEnvironment(); closeProjectSettings({ confirmed: true });
-    });
-    return;
-  }
-  var wasOpen = !panelEl.classList.contains("hidden");
-  panelEl.classList.add("hidden");
-  closePsEmojiPicker();
-  if (restoreBackground) { restoreBackground(); restoreBackground = null; }
-  if (returnFocus && returnFocus.isConnected && !(opts && opts.cleanup)) returnFocus.focus();
-  if (wasOpen) {
-    releaseNotesForSettings();
-    if (notesBrowserReopen && !(opts && opts.cleanup)) openNotesBrowser();
-    notesBrowserReopen = false;
-  }
+  closeSettings({ cleanup: !!(opts && opts.cleanup), onlyScope: "project" });
 }
 
 export function isProjectSettingsOpen() {
-  return panelEl && !panelEl.classList.contains("hidden");
+  return isSettingsShellOpen() && activeSettingsScope() === "project";
 }
 
 function switchSection(name) {
-  for (var i = 0; i < navItems.length; i++) {
-    var active = navItems[i].dataset.section === name;
-    navItems[i].classList.toggle("active", active);
-    navItems[i].setAttribute("aria-current", active ? "page" : "false");
-  }
   for (var j = 0; j < sections.length; j++) {
-    var active2 = sections[j].dataset.section === name;
-    sections[j].classList.toggle("active", active2);
+    sections[j].classList.toggle("active", sections[j].dataset.section === name);
   }
-
-  // Sync mobile dropdown
-  var psNavDropdown = document.getElementById("ps-nav-dropdown");
-  if (psNavDropdown && psNavDropdown.value !== name) {
-    psNavDropdown.value = name;
-  }
-
-  if (name === "environment") openProjectEnvironment(settingsSlug());
+  if (name === "environment" && settingsSlug()) openProjectEnvironment(settingsSlug());
+  enhanceSettingsSelects(panelEl);
+  refreshIcons();
 }
 
 function populateProfile() {
@@ -229,15 +224,13 @@ function commitRename() {
   var renameInput = document.getElementById("ps-rename-input");
   var nameEl = document.getElementById("ps-project-name");
   var newName = renameInput ? renameInput.value.trim() : "";
-  if (newName && getWs() && store.get('connected')) {
-    getWs().send(JSON.stringify({ type: "set_project_title", slug: settingsSlug(), title: newName }));
+  var slug = settingsSlug();
+  var previous = { name: settingsProject() ? settingsProject().name : "" };
+  if (newName && slug && sendEdit("set_project_title", { slug: slug, title: newName }, previous)) {
     if (nameEl) nameEl.textContent = newName;
     if (settingsProject()) settingsProject().name = newName;
-    var navTitle = document.getElementById("ps-nav-title");
-    if (navTitle) navTitle.textContent = newName;
-  }
-  if (newName && getWs() && store.get("connected")) cancelRename();
-  else showToast("Enter a name and connect to the server before saving.");
+    cancelRename();
+  } else showToast("Enter a name and connect to the server before saving.");
 }
 
 function cancelRename() {
@@ -330,10 +323,9 @@ function showPsEmojiPicker() {
         btn.addEventListener("click", function (e) {
           e.stopPropagation();
           closePsEmojiPicker();
-          if (getWs() && store.get('connected')) {
-            getWs().send(JSON.stringify({ type: "set_project_icon", slug: settingsSlug(), icon: emoji }));
-          }
-          updateIconPreview(emoji);
+          var slug = settingsSlug();
+          var previous = { icon: settingsProject() ? settingsProject().icon || null : null };
+          if (slug && sendEdit("set_project_icon", { slug: slug, icon: emoji }, previous)) updateIconPreview(emoji);
         });
         grid.appendChild(btn);
       })(emojis[i]);
@@ -365,8 +357,6 @@ export function updateProjectSettingsName(name) {
   if (settingsProject()) settingsProject().name = name;
   var nameEl = document.getElementById("ps-project-name");
   if (nameEl) nameEl.textContent = name || "-";
-  var navTitle = document.getElementById("ps-nav-title");
-  if (navTitle) navTitle.textContent = name || "-";
 }
 
 export function handleProjectOwnerChanged(msg) {