clay-server 5.1.0-beta.2 → 5.1.0-beta.3

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

@@ -0,0 +1,84 @@
+import { store } from './store.js';
+
+function size(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  var units = ['KiB', 'MiB', 'GiB', 'TiB'];
+  var index = -1;
+  do { bytes /= 1024; index++; } while (bytes >= 1024 && index < units.length - 1);
+  return bytes.toFixed(1) + ' ' + units[index];
+}
+function cell(row, text, header) {
+  var el = document.createElement(header ? 'th' : 'td');
+  el.textContent = text;
+  if (header) el.scope = 'row';
+  row.appendChild(el);
+}
+function render(data) {
+  var projectMode = data.attribution === 'project';
+  document.getElementById('settings-storage-description').textContent = projectMode ? 'Project disk usage grouped by project owner, alongside shared Clay data.' : 'Disk usage across Clay data, registered projects and mapped Linux home directories.';
+  document.getElementById('settings-storage-owner-heading').textContent = projectMode ? 'Projects' : 'Linux account';
+  document.querySelector('.settings-storage-table').setAttribute('aria-label', projectMode ? 'Allocated disk usage by project owner' : 'Allocated disk usage by filesystem owner');
+  document.getElementById('settings-storage-explanation').textContent = (projectMode ? 'Project files are attributed to their registered project owner. Nested projects use their own owner; conflicting shared paths or hard links are unattributed. ' : 'Allocated space is attributed by Linux file owner, including directory metadata. ') + 'Shared paths count once. Symlinks and nested mounts are skipped. Results may be cached for 5 minutes. Refresh usage requests a new measurement.';
+  document.getElementById('settings-storage-attribution-note').textContent = projectMode ? 'System / unattributed includes Clay data outside projects, unowned projects and conflicting shared files. Home directories are included only if registered as projects.' : 'System / unattributed includes unmapped or shared Linux identities. Unavailable means the account cannot be uniquely mapped; it does not mean zero usage.';
+  var body = document.getElementById('settings-storage-users');
+  body.replaceChildren();
+  data.users.slice().sort(function (a, b) { return b.bytes - a.bytes; }).forEach(function (user) {
+    var row = document.createElement('tr');
+    cell(row, user.name, true);
+    cell(row, projectMode ? String(user.projects || 0) : user.linuxUser || 'No Linux account');
+    cell(row, user.mapped ? (data.scanning || data.partial ? 'At least ' : '') + size(user.bytes) : 'Unavailable');
+    cell(row, user.mapped ? user.files.toLocaleString() : '—');
+    body.appendChild(row);
+  });
+  var shared = document.createElement('tr');
+  cell(shared, 'System / unattributed', true); cell(shared, projectMode ? 'Shared / unowned' : 'Other filesystem owners');
+  cell(shared, size(data.unattributedBytes)); cell(shared, data.unattributedFiles.toLocaleString());
+  body.appendChild(shared);
+  document.getElementById('settings-storage-total').textContent = (data.partial || data.scanning ? 'At least ' : '') + size(data.totalBytes);
+  var status = document.getElementById('settings-storage-status');
+  status.textContent = (data.scanning ? 'Scan in progress; these totals are not final. ' : '') + (data.partial ? 'Partial scan: some paths were unreadable, on another filesystem, or exceeded the scan limit. ' : '') +
+    'Checked ' + new Date(data.checkedAt).toLocaleTimeString() + '. ' + data.roots + ' storage roots scanned.';
+  status.dataset.state = data.scanning ? 'pending' : data.partial ? 'error' : 'saved';
+  document.getElementById('settings-storage-results').hidden = false;
+}
+export async function loadStorageUsage(refresh) {
+  if (store.get('serverStorageLoading')) return;
+  clearTimeout(store.get('serverStorageTimer'));
+  var button = document.getElementById('settings-storage-refresh');
+  var status = document.getElementById('settings-storage-status');
+  store.set({ serverStorageLoading: true });
+  button.disabled = true;
+  button.textContent = 'Measuring…';
+  if (!store.get('serverStorageScanning')) status.textContent = 'Measuring disk usage. Large directories can take several seconds.';
+  status.dataset.state = 'pending';
+  try {
+    var response = await fetch('/api/server/storage' + (refresh === true ? '?refresh=1' : ''), { credentials: 'same-origin' });
+    var data = await response.json();
+    if (!response.ok) {
+      if (response.status === 401 || response.status === 403) {
+        store.set({ serverStorageUsage: null });
+        document.getElementById('settings-storage-results').hidden = true;
+      }
+      throw new Error(data.error || 'Disk usage is unavailable. Try refreshing.');
+    }
+    store.set({ serverStorageUsage: data, serverStorageScanning: !!data.scanning });
+    if (data.users) render(data);
+    if (data.scanning) {
+      status.textContent = 'Scan in progress. Project files, including node_modules, are being measured; totals are not final.';
+      store.set({ serverStorageTimer: setTimeout(function () {
+        if (store.get('serverSettingsPage') === 'storage' && !document.getElementById('server-settings').classList.contains('hidden')) loadStorageUsage();
+      }, 1500) });
+    }
+  } catch (error) {
+    store.set({ serverStorageScanning: false });
+    status.textContent = error.message + (store.get('serverStorageUsage') ? ' Previous measurements remain below.' : '');
+    status.dataset.state = 'error';
+  } finally {
+    store.set({ serverStorageLoading: false });
+    button.disabled = !!store.get('serverStorageScanning');
+    button.textContent = button.disabled ? 'Measuring…' : 'Refresh usage';
+  }
+}
+export function initStorageUsage() {
+  document.getElementById('settings-storage-refresh').addEventListener('click', function () { loadStorageUsage(true); });
+}

package/lib/public/modules/session-github.js

@@ -76,10 +76,11 @@ export function appendGithubWork(row, session, title) {
   row.insertBefore(column, title);
   column.appendChild(title);
   var links = document.createElement('span');
+  links.className = 'session-work-links-slot';
   links.innerHTML = html;
   links.addEventListener('click', function (event) { if (event.target.closest('a')) event.stopPropagation(); });
   links.addEventListener('contextmenu', function (event) { event.stopPropagation(); });
-  column.appendChild(links);
+  row.appendChild(links);
 }
 export function syncGithubSessions(sessions) {
   bindGithubWorkPopover();

package/lib/public/modules/session-presence-ui.js

@@ -38,7 +38,7 @@ export function renderSessionPresence(row, sessionId) {
     container.appendChild(more);
   }
 
-  var anchor = row.querySelector(".session-item-age, .mobile-worker-generation, .mobile-session-unread, .session-row-actions, .mobile-session-star");
+  var anchor = row.querySelector(".session-row-trailing, .session-item-age, .mobile-worker-generation, .mobile-session-unread, .session-row-actions, .mobile-session-star");
   // Desktop age/actions now live inside one trailing slot. insertBefore only
   // accepts a direct child, so promote a nested match to its row-level owner.
   while (anchor && anchor.parentNode !== row) anchor = anchor.parentNode;

package/lib/public/modules/settings-env-values.js

@@ -0,0 +1,34 @@
+// Check if text looks like env format: first line starts with a valid VAR_NAME=
+export function looksLikeEnv(text) {
+  var first = text.split("\n")[0].trim();
+  if (first.indexOf("export ") === 0) first = first.substring(7);
+  return /^[A-Za-z_][A-Za-z0-9_]*=/.test(first);
+}
+
+export function parseEnvString(str) {
+  var pairs = [];
+  if (!str) return pairs;
+  var lines = str.split("\n");
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i].trim();
+    if (!line || line.charAt(0) === "#") continue;
+    // Strip leading "export "
+    if (line.indexOf("export ") === 0) line = line.substring(7);
+    var eq = line.indexOf("=");
+    if (eq === -1) continue;
+    var key = line.substring(0, eq).trim();
+    var val = line.substring(eq + 1).trim();
+    // Saved values are JSON-quoted so shell metacharacters remain data.
+    if (val.charAt(0) === '"' && val.charAt(val.length - 1) === '"') {
+      try { val = JSON.parse(val); } catch (e) { val = val.substring(1, val.length - 1); }
+    } else if (val.charAt(0) === "'" && val.charAt(val.length - 1) === "'") {
+      val = val.substring(1, val.length - 1);
+    }
+    if (key) pairs.push({ key: key, value: val });
+  }
+  return pairs;
+}
+
+export function serializeEnvValue(value) {
+  return JSON.stringify(value == null ? "" : String(value));
+}

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

@@ -0,0 +1,121 @@
+// Native selects own values and change events; this view adds desktop navigation.
+export function enhanceSettingsSelects(root) {
+  if (!root) return;
+  root.querySelectorAll('select:not(.settings-nav-dropdown)').forEach(function (select) {
+    if (select.dataset.settingsPicker) return;
+    select.dataset.settingsPicker = 'true';
+    select.classList.add('settings-native-select');
+    var wrap = document.createElement('span');
+    wrap.className = 'settings-picker';
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'settings-picker-trigger';
+    button.setAttribute('aria-haspopup', 'listbox');
+    button.setAttribute('aria-expanded', 'false');
+    var label = document.createElement('span');
+    label.className = 'settings-picker-value';
+    button.appendChild(label);
+    button.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>');
+    var menu = document.createElement('span');
+    menu.className = 'settings-picker-menu';
+    menu.id = (select.id || 'settings-select-' + document.querySelectorAll('.settings-picker').length) + '-menu';
+    menu.setAttribute('role', 'listbox');
+    menu.hidden = true;
+    button.setAttribute('aria-controls', menu.id);
+    var enclosingLabel = select.closest('label');
+    var associatedLabel = select.labels && select.labels[0];
+    var name = select.getAttribute('aria-label') || (enclosingLabel && enclosingLabel.querySelector('.settings-label') || {}).textContent || (associatedLabel && associatedLabel.textContent) || 'Choose a value';
+    name = name.trim();
+    menu.setAttribute('aria-label', name);
+    select.insertAdjacentElement('afterend', wrap);
+    wrap.append(button, menu);
+    var search = '';
+    var searchAt = 0;
+    function outside(event) { if (!wrap.contains(event.target)) close(false); }
+    function close(focus) {
+      document.removeEventListener('pointerdown', outside);
+      menu.hidden = true;
+      button.setAttribute('aria-expanded', 'false');
+      if (focus) button.focus();
+    }
+    function sync() {
+      label.textContent = (select.selectedOptions[0] || {}).textContent || 'Choose…';
+      button.setAttribute('aria-label', name + ': ' + label.textContent);
+      button.disabled = select.disabled;
+      if (button.disabled) close(false);
+      menu.replaceChildren();
+      Array.from(select.options).forEach(function (option) {
+        var item = document.createElement('button');
+        item.type = 'button';
+        item.tabIndex = -1;
+        item.setAttribute('role', 'option');
+        item.textContent = option.textContent;
+        item.setAttribute('aria-selected', String(option.selected));
+        item.disabled = option.disabled || (option.parentElement.tagName === 'OPTGROUP' && option.parentElement.disabled);
+        item.hidden = option.hidden;
+        item.onclick = function (event) {
+          event.preventDefault();
+          select.value = option.value;
+          select.dispatchEvent(new Event('change', { bubbles: true }));
+          sync();
+          close(true);
+        };
+        menu.appendChild(item);
+      });
+    }
+    function items() { return Array.from(menu.querySelectorAll('button:not(:disabled):not([hidden])')); }
+    function open() {
+      sync();
+      var choices = items();
+      if (!choices.length || button.disabled) return;
+      menu.hidden = false;
+      button.setAttribute('aria-expanded', 'true');
+      document.addEventListener('pointerdown', outside);
+      var bounds = button.getBoundingClientRect();
+      var boundary = wrap.closest('.server-settings-content, .us-modal-content, .us-content, .ps-content, .admin-modal');
+      var bottom = Math.min(window.innerHeight - 8, boundary ? boundary.getBoundingClientRect().bottom - 8 : window.innerHeight - 8);
+      var above = bounds.top - Math.max(8, boundary ? boundary.getBoundingClientRect().top + 8 : 8);
+      var below = bottom - bounds.bottom - 4;
+      var flip = below < 180 && above > below;
+      menu.classList.toggle('settings-picker-menu-above', flip);
+      menu.style.maxHeight = Math.max(64, Math.min(240, flip ? above : below)) + 'px';
+      var selected = menu.querySelector('[aria-selected="true"]:not(:disabled):not([hidden])');
+      (selected || choices[0]).focus();
+    }
+    button.onclick = function (event) {
+      event.preventDefault();
+      if (menu.hidden) open(); else close(false);
+    };
+    wrap.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape' && !menu.hidden) {
+        event.preventDefault(); event.stopPropagation(); close(true); return;
+      }
+      // Return to the trigger before native Tab traversal leaves this control.
+      if (event.key === 'Tab' && !menu.hidden) { close(true); return; }
+      var navigation = ['ArrowDown', 'ArrowUp', 'Home', 'End'].indexOf(event.key) >= 0;
+      var typing = event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey && !event.altKey;
+      if (!navigation && !typing) return;
+      event.preventDefault();
+      var wasClosed = menu.hidden;
+      if (wasClosed) open();
+      var choices = items();
+      if (!choices.length) return;
+      var index = choices.indexOf(document.activeElement);
+      if (typing) {
+        search = Date.now() - searchAt > 700 ? event.key : search + event.key;
+        searchAt = Date.now();
+        var match = choices.find(function (item) { return item.textContent.trim().toLowerCase().indexOf(search.toLowerCase()) === 0; });
+        if (match) match.focus();
+      } else if (!wasClosed || event.key === 'Home' || event.key === 'End') {
+        index = event.key === 'Home' ? 0 : event.key === 'End' ? choices.length - 1 : (index + (event.key === 'ArrowDown' ? 1 : -1) + choices.length) % choices.length;
+        choices[index].focus();
+      }
+    });
+    wrap.addEventListener('focusout', function (event) { if (!wrap.contains(event.relatedTarget)) close(false); });
+    select.addEventListener('change', sync);
+    select.addEventListener('settings-sync', sync);
+    // Async option loading and pending/failed saves retain native control behavior.
+    new MutationObserver(sync).observe(select, { attributes: true, attributeFilter: ['disabled'], childList: true, subtree: true, characterData: true });
+    sync();
+  });
+}

package/lib/public/modules/shared-browser.js

@@ -8,10 +8,11 @@ import { activityHtml, renderBrowserActivity } from './shared-browser-activity.j
 import { viewportMenuHtml, bindViewportMenu, renderViewportMenu, closeViewportMenu } from './shared-browser-viewport-menu.js';
 
 function desktop() { return window.matchMedia('(min-width: 1024px)').matches; }
-function eligible() {
+function visibleEntry() {
   var permissions = store.get('permissions');
-  return desktop() && !!store.get('currentSlug') && !!store.get('activeSessionId') && !store.get('dmMode') && (!permissions || permissions.terminal !== false);
+  return desktop() && !!store.get('currentSlug') && !store.get('dmMode') && (!permissions || permissions.terminal !== false);
 }
+function eligible() { return visibleEntry() && !!store.get('activeSessionId'); }
 function panel() { return document.getElementById('shared-browser-panel'); }
 function ui(patch) { store.set({ sharedBrowserUi: Object.assign({}, store.get('sharedBrowserUi'), patch) }); }
 function send(type, fields) {
@@ -76,14 +77,19 @@ function ensurePanel() {
   refreshIcons();
 }
 function renderEntry() {
-  var button = document.getElementById('shared-browser-btn');
-  if (!button) return;
-  button.classList.toggle('hidden', !eligible());
   var browser = store.get('sharedBrowser');
-  button.title = browser ? 'View browser · ' + (store.get('connected') ? browser.phase : 'Disconnected') : 'Open browser';
-  button.setAttribute('aria-label', browser ? 'View browser' : 'Open browser');
-  button.setAttribute('aria-expanded', String(!!store.get('sharedBrowserOpen')));
-  button.disabled = !store.get('connected');
+  var ready = !!store.get('connected') && !!store.get('activeSessionId');
+  var label = !store.get('connected') ? 'Browser · Connecting…' : !store.get('activeSessionId') ? 'Browser · Loading session…' : browser ? 'View browser' : 'Open browser';
+  ['shared-browser-btn', 'shared-browser-toggle-btn'].forEach(function (id) {
+    var button = document.getElementById(id);
+    if (!button) return;
+    var title = id === 'shared-browser-toggle-btn' && ready && store.get('sharedBrowserOpen') ? 'Hide browser' : label;
+    button.classList.toggle('hidden', !visibleEntry());
+    button.title = ready && browser ? title + ' · ' + browser.phase : title;
+    button.setAttribute('aria-label', title);
+    button.setAttribute('aria-expanded', String(!!store.get('sharedBrowserOpen')));
+    button.disabled = !ready;
+  });
 }
 function controlText(browser, live, connected) {
   if (!connected) return 'Disconnected. Status returns on reconnect.';
@@ -158,7 +164,7 @@ function selectBrowserTab(id) {
   send('view', { visible: desktop() && !document.hidden }); render();
 }
 export function openSharedBrowser() {
-  if (!eligible()) return;
+  if (!eligible() || !store.get('connected')) return;
   ensurePanel();
   claimRightWorkbench('browser');
   store.set({ sharedBrowserOpen: true });
@@ -212,8 +218,12 @@ export function handleSharedBrowserMessage(msg) {
 }
 export function initSharedBrowser() {
   var button = document.getElementById('shared-browser-btn');
-  if (!button) return;
-  button.onclick = openSharedBrowser;
+  if (button) button.onclick = openSharedBrowser;
+  var toggle = document.getElementById('shared-browser-toggle-btn');
+  if (toggle) toggle.onclick = function () {
+    if (store.get('sharedBrowserOpen')) hideSharedBrowser();
+    else openSharedBrowser();
+  };
   window.matchMedia('(min-width: 1024px)').addEventListener('change', function () { if (!desktop()) hideSharedBrowser(); renderEntry(); });
   document.addEventListener('visibilitychange', function () { if (store.get('sharedBrowserOpen')) send('view', { visible: !document.hidden && desktop() }); });
   refreshIcons(); renderEntry();

package/lib/public/modules/stt-picker.js

@@ -1,3 +1,5 @@
+import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+import { enhanceSettingsSelects } from './settings-select.js';
 import { store } from './store.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
@@ -5,7 +7,10 @@ import { speechLanguages, voiceModel, loadSpeechSettings, saveSpeechSettings, sa
 import { stopSTT } from './stt-controller.js';
 import { browserSpeechInfo, compareSpeechModels } from './stt-browser.js';
 
-export function closeSpeechPicker() {
+export function closeSpeechPicker(force) {
+  if(document.querySelector('.admin-modal-overlay, #settings-confirm') && !force)return;
+  var input = document.querySelector("#speech-api-key");
+  if (!force && input && input.value) {showConfirmDialog("Discard the unsaved voice API key?", "Discard", function () {closeSpeechPicker(true);});return;}
   var state = store.get('speechPopup');
   store.set({ speechPopup: null });
   if (state && state.anchor.isConnected) { state.anchor.setAttribute('aria-expanded', 'false'); state.anchor.focus(); }
@@ -59,8 +64,10 @@ function render() {
   popup.style.left = Math.max(8, Math.min(bounds.right - 324, window.innerWidth - 332)) + 'px';
   popup.style.bottom = Math.max(8, window.innerHeight - bounds.top + 8) + 'px';
   popup.style.maxHeight = Math.max(150, bounds.top - 16) + 'px';
+  if (state.anchor.closest('#user-settings')) {popup.style.bottom = 'auto';popup.style.top = 'max(16px, calc(50dvh - 260px))';popup.style.maxHeight = 'calc(100dvh - 48px)';}
   popup.addEventListener('click', function (event) {
     var button = event.target.closest('button'); if (!button || button.disabled) return;
+    if (popup.querySelector("#speech-api-key") && popup.querySelector("#speech-api-key").value && (button.dataset.mode || button.dataset.provider || button.dataset.model)) {showConfirmDialog('Discard the unsaved voice API key?', 'Discard', function () {form.elements.key.value = '';button.click();});return;}
     if (button.dataset.mode) patch({ mode: button.dataset.mode, provider: null, keyModel: null });
     else if (button.dataset.provider) {
       var keyModel = button.parentElement.querySelector('[data-model]').dataset.model;
@@ -80,7 +87,7 @@ function render() {
   var form = popup.querySelector('form');
   if (form && previousProvider === state.provider) form.elements.key.value = unsavedKey;
   if (form) form.addEventListener('submit', function (event) {
-    event.preventDefault(); var key = form.elements.key.value; form.elements.key.value = '';
+    event.preventDefault(); var key = form.elements.key.value;
     save({ provider: state.provider, key: key }, false);
   });
   var select = popup.querySelector('select');
@@ -89,6 +96,7 @@ function render() {
     try { await saveSpeechLanguage(code); if (store.get('speechPopup')) patch({ busy: false, error: '' }); }
     catch (error) { if (store.get('speechPopup')) patch({ busy: false, error: error.message }); }
   });
+  enhanceSettingsSelects(popup);
   var focus = Array.from(popup.querySelectorAll('[data-focus]')).find(function (el) { return el.dataset.focus === focusKey && !el.disabled; });
   (form && previousProvider !== state.provider ? form.elements.key : (focus || popup.querySelector('input,button'))).focus();
 }
@@ -108,14 +116,15 @@ export function initSpeechPicker() {
   });
   document.addEventListener('pointerdown', function (event) {
     var state = store.get('speechPopup'); var popup = document.getElementById('speech-picker');
+    if(event.target.closest('.admin-modal-overlay, #settings-confirm'))return;
     if (state && popup && !popup.contains(event.target) && !state.anchor.contains(event.target)) closeSpeechPicker();
   });
   document.addEventListener('keydown', function (event) {
-    if (!store.get('speechPopup')) return;
-    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeSpeechPicker(); }
+    if (!store.get('speechPopup') || document.querySelector('.admin-modal-overlay, #settings-confirm')) return;
+    if (event.key === 'Escape') { if(document.activeElement.closest('.settings-picker') && document.activeElement.closest('.settings-picker').querySelector('[aria-expanded=true]'))return; event.preventDefault(); event.stopPropagation(); closeSpeechPicker(); }
     if (event.key === 'Tab') {
       var popup = document.getElementById('speech-picker');
-      var items = popup.querySelectorAll('button:not(:disabled),input:not(:disabled),select:not(:disabled),a[href]');
+      var items = Array.from(popup.querySelectorAll('button:not(:disabled),input:not(:disabled),select:not(:disabled),a[href]')).filter(function(el){return el.getClientRects().length && el.tabIndex!==-1;});
       var first = items[0]; var last = items[items.length - 1];
       if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
       else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }

package/lib/public/modules/terminal-prefs.js

@@ -1,3 +1,15 @@
+export var TERMINAL_FONT_OPTIONS = [
+  { label: "SF Mono",         family: "'SF Mono', Menlo, Monaco, 'Courier New', monospace" },
+  { label: "JetBrains Mono",  family: "'JetBrains Mono', 'SF Mono', Menlo, monospace" },
+  { label: "Fira Code",       family: "'Fira Code', 'SF Mono', Menlo, monospace" },
+  { label: "Cascadia Code",   family: "'Cascadia Code', 'SF Mono', Menlo, monospace" },
+  { label: "IBM Plex Mono",   family: "'IBM Plex Mono', 'SF Mono', Menlo, monospace" },
+  { label: "Source Code Pro", family: "'Source Code Pro', 'SF Mono', Menlo, monospace" },
+  { label: "Roboto Mono",     family: "'Roboto Mono', 'SF Mono', Menlo, monospace" },
+  { label: "D2 Coding",       family: "'D2 coding', 'D2Coding', 'SF Mono', Menlo, monospace" },
+  { label: "System mono",     family: "ui-monospace, monospace" },
+];
+
 // terminal-prefs.js
 //
 // Single source of truth for terminal font preferences (family + size).
@@ -98,3 +110,13 @@ export function applyTerminalFont(family, size) {
 export function onTerminalFontChange(fn) {
   if (typeof fn === "function") listeners.push(fn);
 }
+
+// Publish only acknowledged values, shared by settings and the terminal toolbar.
+export async function saveTerminalFont(family, size) {
+  var response = await fetch('/api/user/terminal-font', {
+    method: 'PUT', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({family: family, size: size})
+  });
+  if (!response.ok) throw new Error('Could not save terminal typography. Try again.');
+  applyTerminalFont(family, size);
+}

package/lib/public/modules/theme.js

@@ -1,3 +1,4 @@
+import { store } from './store.js';
 import { refreshIcons } from './icons.js';
 import { setTerminalTheme } from './terminal.js';
 import { setTuiSessionTheme } from './session-tui-view.js';
@@ -315,19 +316,7 @@ export function applyTheme(themeId, fromPicker) {
   var mermaidVars = computeMermaidVars(theme);
   try { updateMermaidTheme(mermaidVars); } catch (e) {}
 
-  try {
-    localStorage.setItem(STORAGE_KEY, themeId);
-    localStorage.setItem(STORAGE_KEY + "-vars", JSON.stringify(vars));
-    localStorage.setItem(STORAGE_KEY + "-variant", theme.variant || "dark");
-  } catch (e) {}
-
-  // When picked from skin selector, save as skin preference and sync mode
-  if (fromPicker) {
-    try {
-      localStorage.setItem(SKIN_KEY, themeId);
-      localStorage.setItem(MODE_KEY, isLight ? "light" : "dark");
-    } catch (e) {}
-  }
+  if (fromPicker) saveAppearance(themeId, isLight ? 'light' : 'dark');
 
   updateToggleIcon();
 
@@ -417,7 +406,7 @@ function getSystemMode() {
 // Returns the effective mode: user override or system
 function getEffectiveMode() {
   var saved = null;
-  try { saved = localStorage.getItem(MODE_KEY); } catch (e) {}
+  saved = (store.get('appearanceDraft') || store.get('appearancePreference') || {}).mode;
   if (saved === "light" || saved === "dark") return saved;
   return getSystemMode();
 }
@@ -426,7 +415,10 @@ function getEffectiveMode() {
 // If user has a custom skin selected, find its dark/light counterpart
 function themeIdForMode(mode) {
   var skin = null;
-  try { skin = localStorage.getItem(SKIN_KEY); } catch (e) {}
+  var preference = store.get('appearanceDraft') || store.get('appearancePreference') || {};
+  var paired = preference[mode + 'Theme'];
+  if (paired && getTheme(paired) && getTheme(paired).variant === mode) return paired;
+  skin = preference.theme;
 
   // Default Clay Studio skin pair.
   if (!skin) {
@@ -457,24 +449,12 @@ function themeIdForMode(mode) {
 
 // --- Wide view ---
 
-export function isWideView() {
-  try {
-    var v = localStorage.getItem(WIDE_KEY);
-    return v === null ? true : v !== "bubble"; // default: Channel (wide)
-  } catch (e) { return true; }
-}
-
-export function getChatLayout() {
-  try {
-    var v = localStorage.getItem(WIDE_KEY);
-    return v === "bubble" ? "bubble" : "channel";
-  } catch (e) { return "channel"; }
-}
-
+export function isWideView() { return getChatLayout() === 'channel'; }
+export function getChatLayout() { return store.get('personalChatLayout') || 'channel'; }
 export function setChatLayout(layout) {
-  var val = (layout === "bubble") ? "bubble" : "channel";
-  try { localStorage.setItem(WIDE_KEY, val); } catch (e) {}
-  document.body.classList.toggle("wide-view", val === "channel");
+  var val = layout === 'bubble' ? 'bubble' : 'channel';
+  store.set({ personalChatLayout: val });
+  document.body.classList.toggle('wide-view', val === 'channel');
 }
 
 export function setWideView(enabled) {
@@ -485,9 +465,10 @@ export function setWideView(enabled) {
 export function toggleDarkMode() {
   var current = getEffectiveMode();
   var next = current === "dark" ? "light" : "dark";
-  try { localStorage.setItem(MODE_KEY, next); } catch (e) {}
+
   var tid = themeIdForMode(next);
   applyTheme(tid);
+  saveAppearance(tid, next);
   updateToggleIcon();
 }
 
@@ -633,26 +614,11 @@ function rebuildPicker() {
 
 // --- Init ---
 export function initTheme() {
-  // Preserve an explicitly selected skin. Previously auto-applied Ayu Light
-  // and Dracula values have no SKIN_KEY, so they migrate to the Clay pair.
-  var saved = null;
-  var savedSkin = null;
-  try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}
-  try { savedSkin = localStorage.getItem(SKIN_KEY); } catch (e) {}
-
-  if (saved && savedSkin) {
-    currentThemeId = saved;
-  } else {
-    // No explicit skin — use the Clay Studio pair in the system mode.
-    var mode = getSystemMode();
-    currentThemeId = mode === "light" ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
-  }
-
-  // Apply wide view state from localStorage
-  document.body.classList.toggle("wide-view", isWideView());
+  currentThemeId = getSystemMode() === 'light' ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
+  document.body.classList.toggle('wide-view', isWideView());
 
   // Load all themes from server, then apply properly
-  loadThemes();
+  loadThemes().then(loadAppearance);
 
   // The theme picker is mounted in User Settings by user-settings.js.
 
@@ -661,7 +627,7 @@ export function initTheme() {
     var mq = window.matchMedia("(prefers-color-scheme: dark)");
     var handler = function () {
       var userMode = null;
-      try { userMode = localStorage.getItem(MODE_KEY); } catch (e) {}
+      userMode = (store.get('appearanceDraft') || store.get('appearancePreference') || {}).mode;
       if (!userMode) {
         // No manual override — follow system
         var sysMode = getSystemMode();
@@ -680,3 +646,73 @@ export function initTheme() {
   updateToggleIcon();
 
 }
+
+function appearanceStatus(text, error) {
+  store.set({ appearanceSaveStatus: text, appearanceSaveError: !!error });
+  var status = document.getElementById('us-appearance-status');
+  if (status) { status.textContent = text; status.dataset.state = error ? 'error' : ''; }
+}
+export function getAppearanceChoices() {
+  return { mode: (store.get('appearanceDraft') || store.get('appearancePreference') || {}).mode || 'system', lightTheme: themeIdForMode('light'), darkTheme: themeIdForMode('dark') };
+}
+export function retryAppearanceSave() {
+  var draft = store.get('appearanceDraft');
+  if (draft) saveAppearance(draft.theme, draft.mode, draft);
+}
+export function selectAppearanceMode(mode) {
+  var effective = mode === 'system' ? getSystemMode() : mode;
+  var id = themeIdForMode(effective);
+  saveAppearance(id, mode === 'system' ? null : mode);
+  applyTheme(id);
+}
+export function selectAppearanceTheme(mode, id) {
+  if (!getTheme(id) || getTheme(id).variant !== mode) return;
+  var effective = getEffectiveMode();
+  var current = store.get('appearanceDraft') || store.get('appearancePreference') || {};
+  var change = {}; change[mode + 'Theme'] = id;
+  saveAppearance(mode === effective ? id : currentThemeId, current.mode || null, change);
+  if (mode === effective) applyTheme(id);
+}
+function saveAppearance(theme, mode, overrides) {
+  var values = Object.assign({}, store.get('appearanceDraft') || store.get('appearancePreference') || {}, {theme:theme, mode:mode}, overrides || {});
+  delete values.configured;
+  var selected = getTheme(theme);
+  if (selected) values[selected.variant + 'Theme'] = theme;
+  store.set({appearanceDraft:values});
+  var queue = store.get('appearanceSaveQueue') || Promise.resolve();
+  var next = queue.catch(function () {}).then(function () {return persistAppearance(values);});
+  store.set({appearanceSaveQueue:next});
+  return next;
+}
+async function persistAppearance(values) {
+  var request = (store.get('appearanceSaveRequest') || 0) + 1;
+  store.set({ appearanceSaveRequest: request });
+  appearanceStatus('Saving appearance…');
+  try {
+    var response = await fetch('/api/user/appearance', {method:'PUT',headers:{'Content-Type':'application/json','X-Clay-Settings':'1'},body:JSON.stringify(values)});
+    if (!response.ok) throw new Error('Could not save appearance. Your preview remains. Retry to save it.');
+    if (store.get('appearanceSaveRequest') !== request) return;
+    var saved = await response.json();
+    store.set({ appearancePreference: saved, appearanceDraft: store.get('appearanceDraft') === values ? null : store.get('appearanceDraft') });
+    [STORAGE_KEY,SKIN_KEY,MODE_KEY,STORAGE_KEY+'-vars',STORAGE_KEY+'-variant'].forEach(function (key) {try {localStorage.removeItem(key);}catch(error){}});
+    appearanceStatus('Saved. Applied to this view; other devices use it when they reload.');
+  } catch(error) {if(store.get('appearanceSaveRequest') === request) appearanceStatus(error.message,true);}
+}
+async function loadAppearance() {
+  try {
+    var response = await fetch('/api/user/appearance');
+    if (!response.ok) throw new Error('Appearance preferences unavailable.');
+    var data = await response.json();
+    if(store.get('appearanceSaveRequest'))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){}
+      if(legacy && getTheme(legacy))store.set({legacyAppearanceAvailable:legacy});
+    }
+  } catch(error) {appearanceStatus(error.message,true);}
+}
+
+export function importLegacyAppearance() {
+  var legacy=store.get('legacyAppearanceAvailable');
+  if(legacy) {applyTheme(legacy,true);store.set({legacyAppearanceAvailable:null});}
+}