clay-server 5.1.0-beta.2 → 6.0.0-beta.1

package/lib/public/modules/server-settings-controls.js

@@ -0,0 +1,316 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showToast } from './utils.js';
+import { confirmSettingsAction, clearSettingsDraft, setSettingsDraft } from './server-settings-state.js';
+import { enhanceSettingsSelects } from './settings-select.js';
+
+function status(id, text) {
+  var el = document.getElementById(id);
+  if (el) { el.textContent = text; el.classList.remove('hidden'); }
+}
+
+function sendSetting(type, values, buttonId, statusId) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) { status(statusId, 'Disconnected. Your change has not been saved.'); return; }
+  var button = document.getElementById(buttonId);
+  if (button) button.disabled = true;
+  var input = buttonId === 'settings-pin-save-btn' ? document.getElementById('settings-pin-input') : buttonId.endsWith('-save') ? document.getElementById(buttonId.slice(0, -5)) : null;
+  if (input) { input.disabled = true; input.dispatchEvent(new Event('settings-sync')); }
+  status(statusId, 'Saving…');
+  var pending = Object.assign({}, store.get('serverSettingsPending') || {});
+  pending[type] = { buttonId: buttonId, statusId: statusId };
+  store.set({ serverSettingsPending: pending });
+  ws.send(JSON.stringify(Object.assign({ type: type }, values)));
+  setTimeout(function () {
+    if ((store.get('serverSettingsPending') || {})[type] !== pending[type]) return;
+    if (button) button.disabled = false;
+    if (input) { input.disabled = false; input.dispatchEvent(new Event('settings-sync')); }
+    status(statusId, 'No acknowledgement received. Reconnect and retry; the server may have saved this value.');
+  }, 12000);
+}
+
+export function handleServerSettingResult(msg) {
+  var type = msg.type.replace(/_result$/, '');
+  var pending = Object.assign({}, store.get('serverSettingsPending') || {});
+  var request = pending[type];
+  if (!request) return;
+  delete pending[type];
+  store.set({ serverSettingsPending: pending });
+  var button = document.getElementById(request.buttonId);
+  if (button) { button.disabled = false; if (msg.ok && request.buttonId.endsWith('-save')) button.hidden = true; }
+  var input = request.buttonId === 'settings-pin-save-btn' ? document.getElementById('settings-pin-input') : request.buttonId.endsWith('-save') ? document.getElementById(request.buttonId.slice(0, -5)) : null;
+  if (input) { input.disabled = false; input.dispatchEvent(new Event('settings-sync')); }
+  status(request.statusId, msg.ok ? 'Saved. ' + (msg.timing || '') : (msg.error || 'Could not save. Retry your change.'));
+  if (msg.ok) clearSettingsDraft(type);
+}
+
+function finishSetting(msg, id, field) {
+  handleServerSettingResult(msg);
+  var el = document.getElementById(id);
+  var key = 'set_keep_awake';
+  if (!msg.type.endsWith('_result') && (store.get('serverSettingsDrafts') || {})[key]) return;
+  if (el && msg.ok !== false && msg[field] !== undefined) el.checked = !!msg[field];
+}
+
+function updatePlatformControls(config) {
+  store.set({ serverSettingsConfig: config });
+  document.getElementById('settings-keep-awake').disabled = config.platform !== 'darwin';
+  status('settings-awake-support', config.platform === 'darwin' ? 'Applies while Clay is running on this Mac.' : 'Unavailable on this platform. Keep awake requires macOS.');
+  var channel = document.getElementById('settings-update-channel');
+  if (channel && !(store.get('serverSettingsDrafts') || {}).set_update_channel) channel.checked = config.updateChannel === 'beta';
+  enhanceSettingsSelects(document.getElementById('server-settings'));
+  document.getElementById('settings-image-retention').dispatchEvent(new Event('settings-sync'));
+}
+
+export function initServerControls() {
+  ['settings-keep-awake', 'settings-image-retention', 'settings-update-channel', 'settings-pin-set-btn', 'settings-pin-remove-btn'].forEach(function (id) { document.getElementById(id).disabled = true; });
+  var check = document.getElementById('settings-update-check');
+  var update = document.createElement('button'); update.type = 'button'; update.className = 'settings-btn-sm'; update.id = 'settings-install-update'; update.hidden = true; update.textContent = 'Update and restart…';
+  check.insertAdjacentElement('afterend', update);
+  var receipt = document.createElement('p'); receipt.id = 'settings-update-status'; receipt.className = 'settings-hint'; receipt.setAttribute('role', 'status'); update.insertAdjacentElement('afterend', receipt);
+  update.onclick = function () {
+    confirmSettingsAction('Install the available release and restart Clay? Active work will be interrupted for everyone. Unsaved settings remain drafts in this tab.', 'Update and restart', function () {
+      var ws = getWs();
+      if (!ws || ws.readyState !== 1) { status('settings-update-status', 'Disconnected. Reconnect before updating.'); return; }
+      update.disabled = true; status('settings-update-status', 'Update requested. Waiting for the daemon…');
+      ws.send(JSON.stringify({ type: 'update_now' }));
+    });
+  };
+
+  document.getElementById('settings-pin-set-btn').onclick = showPinForm;
+  document.getElementById('settings-pin-cancel-btn').onclick = hidePinForm;
+  document.getElementById('settings-pin-save-btn').onclick = submitPin;
+  document.getElementById('settings-pin-input').oninput = function () { setSettingsDraft('pin', !!this.value); };
+  document.getElementById('settings-pin-remove-btn').onclick = function () {
+    confirmSettingsAction('Remove the server PIN? This changes sign-in protection for new connections.', 'Remove PIN', function () {
+      sendSetting('set_pin', { pin: null }, 'settings-pin-remove-btn', 'settings-pin-error');
+    });
+  };
+  [
+    ['settings-keep-awake', 'set_keep_awake', 'value', 'Saved changes apply now.'],
+    ['settings-image-retention', 'set_image_retention', 'days', 'Review retention. The next cleanup permanently deletes expired images.'],
+    ['settings-update-channel', 'set_update_channel', 'channel', 'Choose whether future update checks include prereleases.']
+  ].forEach(function (entry) {
+    var input = document.getElementById(entry[0]);
+    var receipt = document.createElement('p');
+    receipt.id = entry[0] + '-status'; receipt.className = 'settings-hint'; receipt.setAttribute('role', 'status');
+    input.closest('.settings-toggle-row').insertAdjacentElement('afterend', receipt);
+    var save = document.createElement('button'); save.type = 'button'; save.className = 'settings-btn-sm'; save.textContent = 'Save changes';
+    save.id = entry[0] + '-save'; save.hidden = true; receipt.insertAdjacentElement('beforebegin', save);
+    input.onchange = function () {
+      setSettingsDraft(entry[1], true); save.hidden = false; receipt.textContent = entry[3];
+    };
+    save.onclick = function () {
+      var values = {}; values[entry[2]] = entry[2] === 'days' ? Number(input.value) : entry[2] === 'channel' ? (input.checked ? 'beta' : 'stable') : input.checked;
+      sendSetting(entry[1], values, save.id, receipt.id);
+    };
+  });
+  document.getElementById('settings-restart-btn').onclick = function () {
+    confirmSettingsAction('Restart Clay for everyone? Active agent work will be interrupted. Clients will reconnect. Unsaved settings are not applied.', 'Restart server', function () {
+      sendSetting('restart_server', {}, 'settings-restart-btn', 'settings-restart-error');
+    });
+  };
+  var shutdown = document.getElementById('settings-shutdown-input');
+  var shutdownButton = document.getElementById('settings-shutdown-btn');
+  var reviewShutdown = document.getElementById('settings-shutdown-review');
+  var shutdownFlow = document.getElementById('settings-shutdown-flow');
+  reviewShutdown.onclick = function () {
+    store.set({ serverShutdownReview: true });
+    reviewShutdown.hidden = true;
+    reviewShutdown.setAttribute('aria-expanded', 'true');
+    shutdownFlow.hidden = false;
+    shutdown.focus();
+  };
+  document.getElementById('settings-shutdown-back').onclick = function () {
+    store.set({ serverShutdownReview: false });
+    shutdownFlow.hidden = true;
+    reviewShutdown.hidden = false;
+    reviewShutdown.setAttribute('aria-expanded', 'false');
+    shutdown.value = '';
+    shutdownButton.disabled = true;
+    reviewShutdown.focus();
+  };
+  shutdown.oninput = function () { shutdownButton.disabled = this.value.trim().toLowerCase() !== 'shutdown'; };
+  shutdownButton.onclick = function () {
+    if (!store.get('serverShutdownReview') || shutdown.value.trim().toLowerCase() !== 'shutdown') return;
+    confirmSettingsAction('Stop Clay for everyone? Active work stops and all clients disconnect. Start the service again from the host to recover.', 'Shut down server', function () {
+      sendSetting('shutdown_server', {}, shutdownButton.id, 'settings-shutdown-error');
+    });
+  };
+}
+
+export function updateDaemonConfig(config) {
+  if (config.error) { status('settings-access-status', config.error); return; }
+  store.set({ serverSettingsConfigLoaded: true });
+  ['settings-image-retention', 'settings-update-channel', 'settings-pin-set-btn', 'settings-pin-remove-btn'].forEach(function (id) { document.getElementById(id).disabled = false; });
+  // Nav header: show hostname (strip .local suffix, lowercase)
+  var nameEl = document.getElementById("settings-server-name");
+  if (nameEl && config.hostname) {
+    var displayHost = config.hostname.replace(/\.local$/i, "").toLowerCase();
+    nameEl.textContent = displayHost;
+    nameEl.title = config.hostname;
+  }
+
+  // Host
+  var hostnameEl = document.getElementById("settings-hostname");
+  var lanIpEl = document.getElementById("settings-lan-ip");
+  if (hostnameEl) hostnameEl.textContent = config.hostname || "-";
+  if (lanIpEl) lanIpEl.textContent = config.lanIp || "";
+
+  // Port
+  var portEl = document.getElementById("settings-port");
+  if (portEl) portEl.textContent = String(config.port || "-");
+
+  // TLS
+  var tlsEl = document.getElementById("settings-tls");
+  if (tlsEl) {
+    tlsEl.textContent = config.tls ? "Enabled" : "Disabled";
+    tlsEl.classList.toggle("settings-badge-green", !!config.tls);
+  }
+
+  // Debug
+  var debugEl = document.getElementById("settings-debug");
+  if (debugEl) {
+    debugEl.textContent = config.debug ? "Enabled" : "Disabled";
+    debugEl.classList.toggle("settings-badge-on", !!config.debug);
+  }
+
+  // PIN status
+  updatePinStatus(!!config.pinEnabled);
+
+  // Auto-continue on rate limit
+  // Auto-continue is now per-user (User Settings > Behavior)
+
+  // Keep awake
+  var keepAwakeToggle = document.getElementById("settings-keep-awake");
+  if (keepAwakeToggle && !(store.get('serverSettingsDrafts') || {}).set_keep_awake) keepAwakeToggle.checked = !!config.keepAwake;
+
+  // Image retention
+  var imageRetentionSelect = document.getElementById("settings-image-retention");
+  if (imageRetentionSelect && !(store.get('serverSettingsDrafts') || {}).set_image_retention && config.imageRetentionDays !== undefined) {
+    imageRetentionSelect.value = String(config.imageRetentionDays);
+  }
+
+  updatePlatformControls(config);
+
+}
+
+export function handleSetPinResult(msg) {
+  if (msg.ok) {
+    updatePinStatus(!!msg.pinEnabled);
+    hidePinForm();
+    showToast(msg.pinEnabled ? "PIN saved" : "PIN removed");
+    clearSettingsDraft("pin");
+  } else { status("settings-pin-error", msg.error || "Could not save PIN. Your draft is retained."); }
+  document.getElementById("settings-pin-save-btn").disabled = false;
+}
+
+export function handleKeepAwakeChanged(msg) {
+  finishSetting(msg, "settings-keep-awake", "keepAwake");
+}
+
+export function handleAutoContinueChanged(msg) {
+  // Auto-continue is now per-user; server broadcast no longer updates UI
+}
+
+export function handleRestartResult(msg) {
+  var restartBtn = document.getElementById("settings-restart-btn");
+  var errorEl = document.getElementById("settings-restart-error");
+
+  if (msg.ok) {
+    if (restartBtn) { restartBtn.textContent = "Server restarting..."; restartBtn.disabled = true; }
+    showToast("Server is restarting...");
+  } else {
+    if (restartBtn) {
+      restartBtn.textContent = "Restart";
+      restartBtn.disabled = false;
+    }
+    if (errorEl) {
+      errorEl.textContent = msg.error || "Restart failed";
+      errorEl.classList.remove("hidden");
+    }
+  }
+}
+
+export function handleShutdownResult(msg) {
+  var shutdownInput = document.getElementById("settings-shutdown-input");
+  var shutdownBtn = document.getElementById("settings-shutdown-btn");
+  var errorEl = document.getElementById("settings-shutdown-error");
+
+  if (msg.ok) {
+    if (shutdownBtn) { shutdownBtn.textContent = "Server stopping..."; shutdownBtn.disabled = true; }
+    showToast("Server is shutting down...");
+  } else {
+    if (shutdownBtn) {
+      shutdownBtn.textContent = "Shut down…";
+      shutdownBtn.disabled = false;
+    }
+    if (shutdownInput) shutdownInput.disabled = false;
+    if (errorEl) {
+      errorEl.textContent = msg.error || "Shutdown failed";
+      errorEl.classList.remove("hidden");
+    }
+  }
+}
+
+// --- PIN form management ---
+function showPinForm() {
+  var form = document.getElementById("settings-pin-form");
+  var input = document.getElementById("settings-pin-input");
+  var errorEl = document.getElementById("settings-pin-error");
+  if (form) form.classList.remove("hidden");
+  if (errorEl) errorEl.classList.add("hidden");
+  if (input) input.focus();
+}
+
+function hidePinForm() {
+  var form = document.getElementById("settings-pin-form");
+  var input = document.getElementById("settings-pin-input");
+  var errorEl = document.getElementById("settings-pin-error");
+  clearSettingsDraft("pin");
+  if (form) form.classList.add("hidden");
+  if (input) input.value = "";
+  if (errorEl) errorEl.classList.add("hidden");
+}
+
+function submitPin() {
+  var input = document.getElementById("settings-pin-input");
+  var errorEl = document.getElementById("settings-pin-error");
+  if (!input) return;
+  var pin = input.value.trim();
+  if (!/^\d{6}$/.test(pin)) {
+    if (errorEl) { errorEl.textContent = "Enter exactly six digits."; errorEl.classList.remove("hidden"); }
+    input.focus();
+    return;
+  }
+  if (errorEl) errorEl.classList.add("hidden");
+  var ws = getWs();
+  if (ws && ws.readyState === 1) {
+    sendSetting("set_pin", { pin: pin }, "settings-pin-save-btn", "settings-pin-error");
+  } else { status("settings-pin-error", "Disconnected. Reconnect and save again."); }
+}
+
+function updatePinStatus(enabled) {
+  var statusEl = document.getElementById("settings-pin-status");
+  var setBtn = document.getElementById("settings-pin-set-btn");
+  var removeBtn = document.getElementById("settings-pin-remove-btn");
+  var actionLabel = document.getElementById("settings-pin-action-label");
+
+  if (statusEl) {
+    statusEl.textContent = enabled ? "Enabled" : "Disabled";
+    statusEl.classList.toggle("settings-badge-green", enabled);
+  }
+  if (setBtn) setBtn.textContent = enabled ? "Change PIN" : "Set PIN";
+  if (removeBtn) removeBtn.classList.toggle("hidden", !enabled);
+  if (actionLabel) actionLabel.textContent = enabled ? "Change PIN" : "Set PIN";
+}
+
+
+export function handleServerUpdate(msg) {
+  var button = document.getElementById('settings-install-update');
+  if (!button) return;
+  if (msg.type === 'update_available') { button.hidden = false; button.disabled = false; status('settings-update-status', 'Version ' + msg.version + ' is available. Review and restart when ready.'); }
+  if (msg.type === 'up_to_date') { button.hidden = true; status('settings-update-status', 'No newer release is available on this channel.'); }
+  if (msg.type === 'update_started') { button.disabled = true; status('settings-update-status', 'Updating. The connection will recover after the daemon restarts.'); }
+  if (msg.type === 'update_check_failed') { document.getElementById('settings-update-check').disabled = false; status('settings-update-status', msg.error || 'Update check failed. Retry when connected.'); }
+}

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

@@ -0,0 +1,194 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { refreshIcons } from './icons.js';
+import { parseEnvString, looksLikeEnv, serializeEnvValue } from './settings-env-values.js';
+import { setSettingsDraft } from './server-settings-state.js';
+// ===== Shared Environment Variables =====
+
+
+
+function showSharedEnvSaveStatus(text) {
+  var el = document.getElementById('ss-env-save-status');
+  if (el) el.textContent = text;
+}
+
+export function loadSharedEnv() {
+  if (store.get("serverEnvLoaded") || store.get("serverEnvBusy")) return;
+  showSharedEnvSaveStatus("Loading…");
+
+  var ws = getWs();
+  if (ws && ws.readyState === 1) {
+    store.set({ serverEnvBusy: true });
+    ws.send(JSON.stringify({ type: "get_shared_env" }));
+    setTimeout(function () {
+      if (!store.get('serverEnvLoaded') && store.get('serverEnvBusy')) {
+        store.set({ serverEnvBusy: false });
+        showSharedEnvSaveStatus('No response received. Reopen Environment to retry.');
+      }
+    }, 12000);
+  } else showSharedEnvSaveStatus("Disconnected. Reopen this page after reconnecting.");
+}
+
+export function handleSharedEnv(msg) {
+  store.set({ serverEnvBusy: false });
+  if (store.get('serverEnvLoaded')) return;
+  if (msg.error) { showSharedEnvSaveStatus(msg.error); return; }
+  var list = document.getElementById("ss-env-list");
+  if (!list) return;
+  list.innerHTML = "";
+
+  var pairs = parseEnvString(msg.envrc || "");
+  for (var i = 0; i < pairs.length; i++) {
+    addSharedEnvRow(pairs[i].key, pairs[i].value, false);
+  }
+  store.set({ serverEnvLoaded: true, serverEnvSaved: buildSharedEnvString() });
+  document.getElementById('ss-env-add-btn').disabled = false;
+  showSharedEnvSaveStatus('Changes apply to new coding-agent processes after saving.');
+  refreshIcons();
+}
+
+export function handleSharedEnvSaved(msg) {
+  store.set({ serverEnvBusy: false });
+  document.getElementById('ss-env-save').disabled = false;
+  if (msg.ok) {
+    store.set({ serverEnvSaved: store.get('serverEnvSubmitted') });
+    markEnvironmentDraft();
+    showSharedEnvSaveStatus(buildSharedEnvString() !== store.get('serverEnvSaved') ? 'Submitted values saved. Newer edits remain unsaved.' : (msg.timing || 'Saved.'));
+  } else {
+    showSharedEnvSaveStatus("Error: " + (msg.error || "Failed to save"), 5000);
+  }
+}
+
+function buildSharedEnvString() {
+  var list = document.getElementById("ss-env-list");
+  if (!list) return "";
+  var rows = list.querySelectorAll(".ps-env-row");
+  var lines = [];
+  for (var i = 0; i < rows.length; i++) {
+    var keyInput = rows[i].querySelector(".ps-env-key");
+    var valInput = rows[i].querySelector(".ps-env-val");
+    var key = keyInput ? keyInput.value.trim() : "";
+    var val = valInput ? valInput.value : "";
+    if (key) lines.push("export " + key + "=" + serializeEnvValue(val));
+  }
+  return lines.join("\n");
+}
+
+function addSharedEnvRow(key, value, focus) {
+  var list = document.getElementById("ss-env-list");
+  if (!list) return;
+
+  var row = document.createElement("div");
+  row.className = "ps-env-row";
+
+  var keyInput = document.createElement("input");
+  keyInput.type = "text";
+  keyInput.className = "ps-env-key";
+  keyInput.placeholder = "KEY";
+  keyInput.value = key;
+  keyInput.spellcheck = false;
+  keyInput.autocomplete = "off";
+
+  var valInput = document.createElement("input");
+  valInput.type = "password";
+  valInput.className = "ps-env-val";
+  valInput.placeholder = "value";
+  valInput.value = value;
+  valInput.spellcheck = false;
+  valInput.autocomplete = "off";
+  keyInput.setAttribute('aria-label', 'Variable name');
+  valInput.setAttribute('aria-label', 'Variable value');
+  var reveal = document.createElement('button'); reveal.type = 'button'; reveal.className = 'settings-btn-sm'; reveal.textContent = 'Show';
+  reveal.setAttribute('aria-label', 'Show variable value'); reveal.setAttribute('aria-pressed', 'false');
+  reveal.onclick = function () { var visible = valInput.type === 'password'; valInput.type = visible ? 'text' : 'password'; reveal.textContent = visible ? 'Hide' : 'Show'; reveal.setAttribute('aria-pressed', String(visible)); };
+
+
+  var delBtn = document.createElement("button");
+  delBtn.className = "ps-env-del";
+  delBtn.title = "Remove variable";
+  delBtn.setAttribute("aria-label", "Remove variable");
+  delBtn.innerHTML = '<i data-lucide="x"></i>';
+
+  delBtn.addEventListener("click", function () {
+    row.remove();
+    markEnvironmentDraft();
+  });
+
+  keyInput.addEventListener("input", function () { markEnvironmentDraft(); });
+  valInput.addEventListener("input", function () { markEnvironmentDraft(); });
+
+  // Paste detection
+  keyInput.addEventListener("paste", function (e) {
+    var text = (e.clipboardData || window.clipboardData).getData("text");
+    if (text && looksLikeEnv(text)) {
+      e.preventDefault();
+      var pairs = parseEnvString(text);
+      if (pairs.length > 0) {
+        keyInput.value = pairs[0].key;
+        valInput.value = pairs[0].value;
+        for (var p = 1; p < pairs.length; p++) {
+          addSharedEnvRow(pairs[p].key, pairs[p].value, false);
+        }
+        markEnvironmentDraft();
+      }
+    }
+  });
+
+  valInput.addEventListener("paste", function (e) {
+    var text = (e.clipboardData || window.clipboardData).getData("text");
+    if (text && text.indexOf("\n") !== -1 && text.indexOf("=") !== -1) {
+      e.preventDefault();
+      var pairs = parseEnvString(text);
+      if (pairs.length > 0) {
+        keyInput.value = pairs[0].key;
+        valInput.value = pairs[0].value;
+        for (var p = 1; p < pairs.length; p++) {
+          addSharedEnvRow(pairs[p].key, pairs[p].value, false);
+        }
+        markEnvironmentDraft();
+      }
+    }
+  });
+
+  row.appendChild(keyInput);
+  row.appendChild(valInput);
+  row.appendChild(reveal);
+  row.appendChild(delBtn);
+  list.appendChild(row);
+  refreshIcons();
+
+  if (focus) keyInput.focus();
+}
+
+function markEnvironmentDraft() {
+  var draft = buildSharedEnvString();
+  store.set({ serverEnvDraft: draft });
+  var dirty = draft !== store.get('serverEnvSaved') || Array.from(document.querySelectorAll('#ss-env-list .ps-env-key')).some(function (input) { return !input.value.trim(); });
+  setSettingsDraft('environment', dirty);
+  document.getElementById('ss-env-save').disabled = !dirty || store.get('serverEnvBusy');
+  showSharedEnvSaveStatus(dirty ? 'Unsaved changes' : 'No unsaved changes');
+}
+
+export function initServerEnvironment() {
+  document.getElementById('ss-env-add-btn').disabled = true;
+  document.getElementById('ss-env-add-btn').onclick = function () { addSharedEnvRow('', '', true); markEnvironmentDraft(); };
+  document.getElementById('ss-env-save').onclick = function () {
+    var ws = getWs();
+    if (!ws || ws.readyState !== 1) { showSharedEnvSaveStatus('Disconnected. Your draft is retained.'); return; }
+    var invalid = Array.from(document.querySelectorAll('#ss-env-list .ps-env-key')).some(function (input) {
+      return !/^[A-Za-z_][A-Za-z0-9_]*$/.test(input.value.trim());
+    });
+    if (invalid) { showSharedEnvSaveStatus('Each variable needs a valid name using letters, digits and underscores, starting with a letter or underscore.'); return; }
+    var draft = buildSharedEnvString();
+    store.set({ serverEnvBusy: true, serverEnvSubmitted: draft });
+    this.disabled = true;
+    ws.send(JSON.stringify({ type: 'set_shared_env', envrc: draft }));
+    showSharedEnvSaveStatus('Saving…');
+    setTimeout(function () {
+      if (!store.get('serverEnvBusy')) return;
+      store.set({ serverEnvBusy: false });
+      document.getElementById('ss-env-save').disabled = false;
+      showSharedEnvSaveStatus('No acknowledgement received. Your draft is retained; reconnect and retry.');
+    }, 12000);
+  };
+}

package/lib/public/modules/server-settings-navigation.js

@@ -0,0 +1,39 @@
+export var SERVER_SETTINGS_PAGES = [
+  { id: 'overview', category: 'Service', label: 'Overview' },
+  { id: 'network', category: 'Service', label: 'Network' },
+  { id: 'storage', category: 'Service', label: 'Storage' },
+  { id: 'security', category: 'Administration', label: 'Access & security' },
+  { id: 'admin-users', category: 'Administration', label: 'Users', multiUser: true },
+  { id: 'admin-projects', category: 'Administration', label: 'Project access', multiUser: true },
+  { id: 'admin-smtp', category: 'Administration', label: 'Email delivery', multiUser: true },
+  { id: 'environment', category: 'Agent configuration', label: 'Environment' },
+  { id: 'operations', category: 'Maintenance', label: 'Operations' }
+];
+
+export function renderSettingsNavigation(multiUser, selectPage) {
+  var nav = document.getElementById('settings-page-nav');
+  var mobile = document.getElementById('settings-nav-dropdown');
+  nav.replaceChildren(); mobile.replaceChildren();
+  var category; var group;
+  SERVER_SETTINGS_PAGES.forEach(function (page) {
+    if (page.multiUser && !multiUser) return;
+    if (category !== page.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; mobile.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 () { selectPage(page.id, true); }; nav.appendChild(button);
+    var option = document.createElement('option'); option.value = page.id; option.textContent = page.label; group.appendChild(option);
+  });
+  mobile.onchange = function () { selectPage(this.value, true); };
+  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();
+  };
+}

package/lib/public/modules/server-settings-state.js

@@ -0,0 +1,54 @@
+import { store } from './store.js';
+
+export function setSettingsDraft(key, dirty) {
+  var drafts = Object.assign({}, store.get('serverSettingsDrafts') || {});
+  drafts[key] = !!dirty;
+  store.set({ serverSettingsDrafts: drafts });
+}
+export function clearSettingsDraft(key) { setSettingsDraft(key, false); }
+export function hasSettingsDrafts() {
+  var network = store.get('networkSettings');
+  var drafts = store.get('serverSettingsDrafts') || {};
+  return Object.keys(drafts).some(function (key) { return drafts[key]; }) ||
+    !!(network && network.loaded && network.draft !== network.saved);
+}
+
+export function trapSettingsFocus(event, root) {
+  if (event.key !== 'Tab') return;
+  var items = Array.from(root.querySelectorAll('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), a[href], [tabindex="0"]')).filter(function (el) { return el.getClientRects().length; });
+  if (!items.length) return;
+  var first = items[0]; var last = items[items.length - 1];
+  if (event.shiftKey && (document.activeElement === first || !root.contains(document.activeElement))) { event.preventDefault(); last.focus(); }
+  else if (!event.shiftKey && (document.activeElement === last || !root.contains(document.activeElement))) { event.preventDefault(); first.focus(); }
+}
+
+export function isolateSettingsDialog(overlay) {
+  var entries = Array.from(document.body.children).filter(function (el) { return el !== overlay && el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE'; }).map(function (el) {
+    var entry = { el: el, inert: el.inert, hidden: el.getAttribute('aria-hidden') };
+    el.inert = true; el.setAttribute('aria-hidden', 'true'); return entry;
+  });
+  return function () { entries.forEach(function (entry) { entry.el.inert = entry.inert; if (entry.hidden === null) entry.el.removeAttribute('aria-hidden'); else entry.el.setAttribute('aria-hidden', entry.hidden); }); };
+}
+
+export function confirmSettingsAction(message, action, onConfirm) {
+  if (document.getElementById('settings-confirm')) return;
+  var previous = document.activeElement;
+  var overlay = document.createElement('div');
+  overlay.id = 'settings-confirm'; overlay.className = 'settings-confirm';
+  overlay.innerHTML = '<div role="dialog" aria-modal="true" aria-labelledby="settings-confirm-title"><h3 id="settings-confirm-title"></h3><p></p><div class="settings-confirm-actions"><button class="settings-btn-sm" data-cancel>Keep editing</button><button class="settings-btn-sm" data-confirm></button></div></div>';
+  overlay.querySelector('h3').textContent = action;
+  overlay.querySelector('p').textContent = message;
+  overlay.querySelector('[data-confirm]').textContent = action;
+  function close() { restore(); overlay.remove(); if (previous && previous.isConnected) previous.focus(); }
+  overlay.querySelector('[data-cancel]').onclick = close;
+  overlay.querySelector('[data-confirm]').onclick = function () { close(); onConfirm(); };
+  overlay.addEventListener('keydown', function (event) {
+    event.stopPropagation();
+    if (event.key === 'Escape') { event.preventDefault(); close(); }
+    trapSettingsFocus(event, overlay);
+  });
+  overlay.addEventListener('click', function (event) { if (event.target === overlay) close(); });
+  document.body.appendChild(overlay);
+  var restore = isolateSettingsDialog(overlay);
+  overlay.querySelector('[data-cancel]').focus();
+}