clay-server 5.1.0-beta.2 → 5.1.0

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

@@ -0,0 +1,318 @@
+import { refreshIcons } from './icons.js';
+import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showToast } from './utils.js';
+import { getChatLayout, setChatLayout } from './theme.js';
+import { applyTerminalFont } from './terminal-prefs.js';
+import { userAvatarUrl } from './avatar.js';
+import { syncCapsulePreference } from './capsule-preference.js';
+import { getEmailAccountListCache } from './context-sources.js';
+function applyProjectMateDmsClass(enabled) { document.body.classList.toggle('project-mate-dms-disabled', !enabled); }
+export function showPinForm() {
+  var pinForm = document.getElementById('us-pin-form');
+  if (!pinForm) return;
+  if(!pinForm.classList.contains('hidden'))return;
+  pinForm.classList.remove('hidden');
+  var pinCurrentRow = document.getElementById('us-pin-current-row');
+  var pinInput = document.getElementById('us-pin-input');
+  var pinConfirmInput = document.getElementById('us-pin-confirm-input');
+  var pinCurrentInput = document.getElementById('us-pin-current-input');
+  var pinSave = document.getElementById('us-pin-save');
+  var pinMsg = document.getElementById('us-pin-msg');
+  var pinFormTitle = document.getElementById('us-pin-form-title');
+  if (pinFormTitle) {
+    pinFormTitle.textContent = store.get('userPinEnabled') ? 'Change PIN' : 'Set PIN';
+  }
+  if (pinCurrentRow) {
+    pinCurrentRow.classList.toggle('hidden', !store.get('userPinEnabled'));
+  }
+  if (pinInput) {
+    pinInput.value = '';
+  }
+  if (pinConfirmInput) pinConfirmInput.value = '';
+  if (pinCurrentInput) pinCurrentInput.value = '';
+  if (pinSave) pinSave.disabled = true;
+  if (pinSave) pinSave.textContent = 'Save';
+  if (pinMsg) {
+    pinMsg.textContent = '';
+    pinMsg.className = 'settings-hint settings-pin-error hidden';
+  }
+  if (store.get('userPinEnabled') && pinCurrentInput) {
+    pinCurrentInput.focus();
+  } else if (pinInput) {
+    pinInput.focus();
+  }
+}
+
+export function hidePinForm(force) {
+  var fields = document.querySelectorAll('#us-pin-form input');
+  if (!force && Array.from(fields).some(function (input) {return !!input.value;})) {
+    showConfirmDialog('Discard the unsaved PIN change?', 'Discard', function () {hidePinForm(true);});return;
+  }
+  var pinForm = document.getElementById('us-pin-form');
+  if (!pinForm) return;
+  pinForm.classList.add('hidden');
+  var pinCurrentRow = document.getElementById('us-pin-current-row');
+  var pinInput = document.getElementById('us-pin-input');
+  var pinConfirmInput = document.getElementById('us-pin-confirm-input');
+  var pinCurrentInput = document.getElementById('us-pin-current-input');
+  var pinSave = document.getElementById('us-pin-save');
+  var pinMsg = document.getElementById('us-pin-msg');
+  if (pinCurrentRow) {
+    pinCurrentRow.classList.remove('hidden');
+  }
+  if (pinInput) pinInput.value = '';
+  if (pinConfirmInput) pinConfirmInput.value = '';
+  if (pinCurrentInput) pinCurrentInput.value = '';
+  if (pinSave) pinSave.disabled = true;
+  if (pinSave) pinSave.textContent = 'Save';
+  if (pinMsg) {
+    pinMsg.textContent = '';
+    pinMsg.className = 'settings-hint settings-pin-error hidden';
+  }
+}
+
+// --- Account population ---
+
+export function populateAccount() {
+  fetch('/api/profile').then(function (r) {
+    if (!r.ok) return null;
+    return r.json();
+  }).then(function (data) {
+    if (!data) return;
+    var displayName = data.name || data.displayName || data.username || 'Clay User';
+    var avatarImg = document.getElementById('us-account-avatar-img');
+    var avatarFallback = document.getElementById('us-account-avatar-fallback');
+    var accountName = document.getElementById('us-account-name');
+    var accountSubline = document.getElementById('us-account-subline');
+    var langSelect = document.getElementById('us-lang-select');
+    var pinSetBtnEl = document.getElementById('us-pin-set-btn');
+    var pinFormTitle = document.getElementById('us-pin-form-title');
+    if (accountName) {
+      accountName.textContent = displayName;
+    }
+    if (accountSubline) {
+      var parts = [];
+      if (data.username) parts.push('@' + data.username);
+      if (data.role) parts.push(data.role.charAt(0).toUpperCase() + data.role.slice(1));
+      accountSubline.textContent = parts.length ? parts.join(' · ') : 'Local profile';
+    }
+    store.set({userPinEnabled:!!data.pinEnabled});
+    if (pinSetBtnEl) {
+      pinSetBtnEl.textContent = store.get('userPinEnabled') ? 'Change PIN' : 'Set PIN';
+    }
+    if (pinFormTitle) {
+      pinFormTitle.textContent = store.get('userPinEnabled') ? 'Change PIN' : 'Set PIN';
+    }
+    if (langSelect) {
+      langSelect.value = store.get('speechLang') || 'en-US';
+      langSelect.dispatchEvent(new Event('settings-sync'));
+    }
+    if (avatarImg && avatarFallback) {
+      var avatarUrl = getCurrentUserAvatarSrc(data);
+      avatarImg.alt = displayName;
+      avatarImg.classList.remove('hidden');
+      avatarFallback.classList.remove('hidden');
+      avatarFallback.textContent = avatarInitials(displayName);
+      avatarImg.onload = function () {
+        avatarFallback.classList.add('hidden');
+      };
+      avatarImg.onerror = function () {
+        avatarFallback.classList.remove('hidden');
+      };
+      avatarImg.src = avatarUrl;
+      if (avatarImg.complete && avatarImg.naturalWidth > 0) {
+        avatarFallback.classList.add('hidden');
+      }
+    }
+    // Hide account section in single-user mode (no username)
+    var accountNav = document.getElementById('user-settings').querySelector('[data-section="us-account"]');
+    if (accountNav) accountNav.style.display = '';
+    if (pinSetBtnEl) pinSetBtnEl.disabled = !data.username;
+    document.getElementById('us-claude-allow-save').disabled=!data.username;
+    if(!data.username)document.getElementById('us-claude-allow-status').textContent='Personal command rules require a signed-in account.';
+    // Terminal font: seed in-memory prefs from server. Header-mounted
+    // controls (header-tui-font.js) listen to applyTerminalFont and
+    // sync their UI - we don't touch any DOM here.
+    if (data.terminalFont && typeof data.terminalFont === "object") {
+      applyTerminalFont(data.terminalFont.family, data.terminalFont.size);
+    }
+    // Auto-continue toggle
+    var acToggle = document.getElementById('us-auto-continue');
+    if (acToggle) acToggle.checked = !!data.autoContinueOnRateLimit;
+    // Theme picker self-syncs active selection via theme.js's applyTheme
+    // change callbacks (updatePickerActive). Nothing to do here.
+    // Layout switcher: sync from server response
+    // Sync mate onboarding state from server
+    if (data.mateOnboardingShown) {
+      store.set({mateOnboardingShown:true});
+    }
+    // Keep project Mate DM shortcuts available for legacy profiles too.
+    var matesOn = true;
+    var matesToggle = document.getElementById('us-mates-enabled');
+    if (matesToggle) matesToggle.checked = matesOn;
+    store.set({ projectMateDmsEnabled: matesOn });
+    applyProjectMateDmsClass(matesOn);
+    syncCapsulePreference(data.capsulesEnabled === true);
+    if (data.chatLayout) {
+      setChatLayout(data.chatLayout); // update local cache + CSS
+    }
+    var lSwitcher = document.getElementById('us-layout-switcher');
+    if (lSwitcher) {
+      var currentLayout = getChatLayout();
+      var lBtns = lSwitcher.querySelectorAll('.layout-option');
+      for (var li = 0; li < lBtns.length; li++) {
+        lBtns[li].classList.toggle('selected', lBtns[li].dataset.layout === currentLayout);
+      }
+    }
+    store.set({userSettingsProfile:data});
+  }).catch(function () {showToast('Could not load your settings. Close and reopen to retry.');});
+}
+
+function avatarInitials(value) {
+  var text = (value || '').trim();
+  if (!text) return '?';
+  var parts = text.split(/\s+/);
+  var first = parts[0].charAt(0);
+  var second = parts.length > 1 ? parts[1].charAt(0) : parts[0].charAt(1);
+  var out = first + (second || '');
+  return out.toUpperCase();
+}
+
+function getCurrentUserAvatarSrc(data) {
+  var islandAvatar = document.querySelector('.user-island-avatar img');
+  if (islandAvatar && islandAvatar.src) return islandAvatar.src;
+  if (data && data.avatarCustom) return data.avatarCustom;
+  return userAvatarUrl(data, 96);
+}
+
+export function savePin(pin) {
+  var pinInput = document.getElementById('us-pin-input');
+  var pinConfirmInput = document.getElementById('us-pin-confirm-input');
+  var pinCurrentInput = document.getElementById('us-pin-current-input');
+  var pinSave = document.getElementById('us-pin-save');
+  var pinMsg = document.getElementById('us-pin-msg');
+  var currentPin = pinCurrentInput ? pinCurrentInput.value.trim() : '';
+  var confirmPin = pinConfirmInput ? pinConfirmInput.value.trim() : '';
+  var newPin = pinInput ? pinInput.value.trim() : '';
+
+  if (!/^\d{6}$/.test(newPin)) {
+    if (pinMsg) {
+      pinMsg.textContent = 'PIN must be exactly 6 digits.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+    return;
+  }
+  if (confirmPin !== newPin) {
+    if (pinMsg) {
+      pinMsg.textContent = 'PINs do not match.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+    return;
+  }
+  if (store.get('userPinEnabled') && !/^\d{6}$/.test(currentPin)) {
+    if (pinMsg) {
+      pinMsg.textContent = 'Current PIN is required.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+    return;
+  }
+
+  pinSave.disabled = true;
+  pinSave.textContent = 'Saving\u2026';
+
+  fetch('/api/user/pin', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ currentPin: currentPin, newPin: newPin }),
+  }).then(function (r) { return r.json(); }).then(function (data) {
+    if (data.ok) {
+      showToast('PIN changed');
+      hidePinForm(true);
+      store.set({userPinEnabled:true});
+    } else {
+      pinSave.disabled = false;
+      pinSave.textContent = 'Save';
+      if (pinMsg) {
+        pinMsg.textContent = data.error || 'Could not change your PIN. Please try again.';
+        pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+        pinMsg.classList.remove('hidden');
+      }
+    }
+  }).catch(function () {
+    pinSave.disabled = false;
+    pinSave.textContent = 'Save';
+    if (pinMsg) {
+      pinMsg.textContent = 'Connection lost. Check your network and try again.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+  });
+}
+
+// --- Email settings ---
+
+export function renderEmailSettings() {
+  var listEl = document.getElementById('us-email-list');
+  if (!listEl) return;
+  listEl.innerHTML = '';
+
+  var accounts = getEmailAccountListCache();
+  if (!accounts || accounts.length === 0) {
+    return;
+  }
+
+  for (var i = 0; i < accounts.length; i++) {
+    var acc = accounts[i];
+    var row = document.createElement('div');
+    row.className = 'us-integration-email-row';
+    row.innerHTML =
+      '<div class="us-voice-row-controls"><div class="us-integration-brand">' + providerIcon(acc.provider) + '</div>' +
+      '<div class="us-voice-provider-copy"><strong>' + escHtml(acc.email) + '</strong><small>Email · ' + escHtml(({gmail:'Gmail',outlook:'Outlook Mail',yahoo:'Yahoo Mail',custom:'Custom email'})[acc.provider] || 'Custom email') + (acc.label ? ' · ' + escHtml(acc.label) : '') + '</small></div>' +
+      '<span class="us-integration-state">Account saved</span><button type="button" class="settings-btn-sm" aria-expanded="false">Manage</button></div>' +
+      '<div class="us-email-manage" hidden><p class="settings-hint">This personal mailbox can be used to read, search and send email. Disconnecting keeps your mail at the provider.</p><button type="button" class="settings-btn-sm" data-account-id="' + escHtml(acc.id) + '">Disconnect</button></div>';
+    var manageBtn = row.querySelector('[aria-expanded]');
+    manageBtn.setAttribute('aria-label', 'Manage ' + acc.email);
+    manageBtn.addEventListener('click', function () {
+      var panel = this.closest('.us-integration-email-row').querySelector('.us-email-manage');
+      panel.hidden = !panel.hidden; this.setAttribute('aria-expanded', String(!panel.hidden));
+    });
+    var removeBtn = row.querySelector('[data-account-id]');
+    removeBtn.addEventListener('click', function () {
+      var accountId = this.getAttribute('data-account-id');
+      showConfirmDialog('Disconnect this personal mailbox from Clay? Existing mail at the provider is kept.', 'Disconnect', function () {
+        var ws=getWs();
+        if(ws && ws.readyState===1)ws.send(JSON.stringify({type:'email_account_remove',accountId:accountId}));
+        else showToast('Disconnected from Clay. Reconnect and retry.');
+      });
+    });
+
+    listEl.appendChild(row);
+  }
+  refreshIcons();
+}
+
+
+var PROVIDER_ICON_PATHS = {
+  gmail: '/icons/email/gmail.svg',
+  outlook: '/icons/email/outlook.svg',
+  yahoo: '/icons/email/yahoo.svg',
+};
+
+function providerIcon(provider) {
+  var src = PROVIDER_ICON_PATHS[provider];
+  if (src) {
+    return '<img src="' + src + '" class="us-email-provider-icon" alt="' + provider + '">';
+  }
+  return '<i data-lucide="mail" class="us-email-provider-icon-fallback"></i>';
+}
+
+function escHtml(str) {
+  var d = document.createElement('div');
+  d.textContent = str;
+  return d.innerHTML;
+}

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

@@ -0,0 +1,55 @@
+import { store } from './store.js';
+import { initPersonalThemes } from './user-settings-themes.js';
+import { TERMINAL_FONT_OPTIONS, getTerminalFontFamily, getTerminalFontSize, saveTerminalFont, onTerminalFontChange } from './terminal-prefs.js';
+import { enhanceSettingsSelects } from './settings-select.js';
+
+export function initPersonalAppearance() {
+  var theme = document.getElementById('us-theme-picker').closest('.settings-card');
+  initPersonalThemes(theme);
+
+  var layout = document.getElementById('us-layout-switcher');
+  layout.closest('.settings-card').classList.add('us-layout-group');
+  layout.setAttribute('role', 'group'); layout.setAttribute('aria-label', 'Conversation layout');
+  layout.querySelectorAll('button').forEach(function (button) {
+    var bubble = button.dataset.layout === 'bubble';
+    button.querySelector('.layout-option-desc').textContent = bubble ? 'Centered messages in separate bubbles.' : 'Full-width conversation with avatars.';
+    var preview = document.createElement('span'); preview.className = 'us-layout-preview us-layout-preview-' + button.dataset.layout; preview.setAttribute('aria-hidden', 'true');
+    preview.innerHTML = '<i></i><i></i><i></i>'; button.prepend(preview);
+  });
+  layout.querySelectorAll('button').forEach(function (button) { button.setAttribute('aria-pressed', button.classList.contains('selected')); });
+  addTerminalTypography(theme.closest('.us-section'));
+  enhanceSettingsSelects(theme);
+}
+
+function addTerminalTypography(section) {
+  var content = document.createElement('section'); content.className = 'us-typography settings-card';
+  content.innerHTML = '<h3>Terminal typography</h3><p class="settings-hint">Used by existing and new terminals. Also available from the terminal toolbar.</p><div class="us-font-controls"><div><label class="settings-label" for="us-terminal-family">Font</label><select id="us-terminal-family" class="settings-select"></select></div><div><label class="settings-label" for="us-terminal-size">Size</label><div class="us-font-size"><input id="us-terminal-size" class="us-text-input" type="number" min="9" max="32" step="1" aria-label="Terminal font size"><span>px</span></div></div></div><div class="us-font-preview" aria-hidden="true">Aa Bb 0123 · ~/projects/clay</div><p class="settings-status" role="status" id="us-terminal-status"></p><button type="button" class="settings-btn-sm" id="us-terminal-retry" hidden>Retry save</button>';
+  section.appendChild(content);
+  var family = content.querySelector('select'); var size = content.querySelector('input');
+  var preview = content.querySelector('.us-font-preview'); var status = content.querySelector('[role=status]'); var retry = content.querySelector('#us-terminal-retry');
+  TERMINAL_FONT_OPTIONS.forEach(function (font) {
+    var option = document.createElement('option'); option.value = font.family; option.textContent = font.label; family.appendChild(option);
+  });
+  function sync() {
+    if (store.get('userTerminalDirty')) return;
+    var value = getTerminalFontFamily();
+    if (!Array.from(family.options).some(function (option) { return option.value === value; })) {
+      var option = document.createElement('option'); option.value = value; option.textContent = 'Custom font'; family.appendChild(option);
+    }
+    family.value = value; size.value = getTerminalFontSize();
+    preview.style.fontFamily = value; preview.style.fontSize = size.value + 'px';
+    family.dispatchEvent(new Event('settings-sync'));
+  }
+  async function save() {
+    var value = Number(size.value); store.set({ userTerminalDirty: true });
+    if (!Number.isInteger(value) || value < 9 || value > 32) { status.textContent = 'Choose a whole size from 9 to 32.'; status.dataset.state = 'error'; return; }
+    family.disabled = true; size.disabled = true; retry.hidden = true; status.textContent = 'Saving…'; status.dataset.state = '';
+    try {
+      await saveTerminalFont(family.value, value); store.set({ userTerminalDirty: false }); sync(); status.textContent = 'Saved.';
+    } catch (error) { status.textContent = error.message; status.dataset.state = 'error'; retry.hidden = false; }
+    finally { family.disabled = false; size.disabled = false; family.dispatchEvent(new Event('settings-sync')); }
+  }
+  family.onchange = save; size.onchange = save; retry.onclick = save;
+  size.oninput = function () { store.set({ userTerminalDirty: true }); };
+  onTerminalFontChange(sync); sync(); enhanceSettingsSelects(content);
+}

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

@@ -0,0 +1,24 @@
+import { store } from './store.js';
+import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+
+function wrapEditor(content, title, summary) {
+  var group=document.createElement('section');group.className='us-config-group';
+  content.before(group);
+  var heading=document.createElement('div');heading.className='us-editor-heading';
+  var label=document.createElement('h3');label.textContent=title;
+  var edit=document.createElement('button');edit.type='button';edit.className='settings-btn-sm';edit.textContent='Edit';
+  var state=document.createElement('p');state.className='us-editor-summary';state.textContent=summary();
+  heading.append(label,edit);group.append(heading,state);
+  var help=content.querySelector('.settings-hint');var copy=null;if(help && title!=='Personal allow rules'){copy=help.cloneNode(true);group.appendChild(copy);}
+  group.appendChild(content);content.hidden=true;
+  store.subscribe(function(next,previous){if(next.userSettingsProfile!==previous.userSettingsProfile)state.textContent=summary();});
+  var done=document.createElement('button');done.type='button';done.className='settings-btn-sm';done.textContent='Done';content.appendChild(done);
+  edit.onclick=function(){if(copy)copy.hidden=true;content.hidden=false;state.hidden=true;edit.hidden=true;var first=content.querySelector('button,input,textarea,select');if(first)first.focus();};
+  done.onclick=function(){if(copy)copy.hidden=false;content.hidden=true;state.hidden=false;edit.hidden=false;state.textContent=summary();edit.focus();};
+  return {group:group,state:state,edit:edit,done:done,content:content};
+}
+export function initPersonalEditors() {
+  var allow=document.getElementById('us-claude-allow-list');var permission=wrapEditor(allow.closest('.settings-card'),'Personal allow rules',function(){var count=(store.get('userAllowSaved') || []).length;return count+' personal rules. Managed defaults apply separately.';});
+  permission.done.textContent='Cancel';permission.done.onclick=function(){function cancel(){allow.value=(store.get('userAllowSaved') || []).join('\n');store.set({userAllowDirty:false});permission.content.hidden=true;permission.state.hidden=false;permission.edit.hidden=false;permission.edit.focus();}if(store.get('userAllowDirty'))showConfirmDialog('Discard unsaved command rules?', 'Discard',cancel);else cancel();};
+  store.subscribe(function(state,previous){if(state.userAllowSaved!==previous.userAllowSaved){permission.state.textContent=(state.userAllowSaved || []).length+' personal rules. Managed defaults apply separately.';if(previous.userAllowDirty && !state.userAllowDirty){permission.content.hidden=true;permission.state.hidden=false;permission.edit.hidden=false;permission.edit.focus();}}});
+}

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

@@ -0,0 +1,104 @@
+import { linearIconMarkup } from './session-github.js';
+import { iconHtml } from './icons.js';
+import { store } from './store.js';
+import { confirmSettingsAction } from './server-settings-state.js';
+
+export function initPersonalIntegrations() {
+  var root = document.querySelector('[data-section="us-integrations"].us-section');
+  root.innerHTML = '<h2>Integrations</h2><p class="settings-hint">Your private accounts and API keys.</p><h3>Your connections</h3><div id="us-email-list"></div><div id="us-linear-connections"></div><p id="us-connections-empty" class="settings-hint">No connections yet. Choose a service below to get started.</p><p id="us-linear-collection-status" class="settings-status" role="status" aria-live="polite"></p><button id="us-linear-retry" type="button" class="settings-btn-sm" hidden>Retry Linear</button><section class="us-integration-catalog"><h3>Available integrations</h3><div class="us-integration-tiles"><button type="button" class="us-integration-tile" data-email-provider="gmail"><img src="/icons/email/gmail.svg" alt=""><span>Gmail</span></button><button type="button" class="us-integration-tile" data-email-provider="outlook"><img src="/icons/email/outlook.svg" alt=""><span>Outlook Mail</span></button><button type="button" class="us-integration-tile" data-email-provider="yahoo"><img src="/icons/email/yahoo.svg" alt=""><span>Yahoo Mail</span></button><button type="button" class="us-integration-tile" data-email-provider="custom">' + iconHtml('mail') + '<span>Custom email</span></button><button type="button" class="us-integration-tile" id="us-linear-add" aria-label="Add Linear connection">' + linearIconMarkup() + '<span>Linear</span></button></div></section><div id="us-integration-setup"></div><form id="us-linear-editor" class="settings-form" hidden><div class="settings-field"><label class="settings-label" for="us-linear-name">Connection name</label><input id="us-linear-name" class="us-text-input" maxlength="80" required placeholder="Work, personal, or client name"></div><div class="settings-field"><label class="settings-label" for="us-linear-key">Personal API key</label><input id="us-linear-key" class="us-text-input" type="password" autocomplete="off" spellcheck="false" maxlength="4096"><p id="us-linear-key-help" class="settings-hint">Existing keys stay masked.</p></div><div class="settings-form-actions"><button type="submit" class="settings-btn-sm">Save connection</button><button type="button" class="settings-btn-sm" id="us-linear-cancel">Cancel</button><button type="button" class="settings-btn-sm" id="us-linear-remove">Disconnect</button></div></form>';
+  var list = root.querySelector('#us-linear-connections'), form = root.querySelector('form');
+  var name = root.querySelector('#us-linear-name'), key = root.querySelector('#us-linear-key');
+  var add = root.querySelector('#us-linear-add'), remove = root.querySelector('#us-linear-remove');
+  var status = root.querySelector('[role=status]'), retry = root.querySelector('#us-linear-retry');
+  function message(text, error) { status.textContent = text; status.dataset.state = error ? 'error' : ''; }
+  function busy(value) {
+    store.set({ personalLinearSaving: value });
+    root.querySelectorAll('input,button').forEach(function (el) { el.disabled = value; });
+  }
+  function render() {
+    root.insertBefore(form, status); list.replaceChildren();
+    var connections = store.get('personalLinearConnections') || [];
+
+    connections.forEach(function (connection) {
+      var row = document.createElement('div'); row.className = 'us-voice-row'; row.dataset.connectionId = connection.id;
+      var controls = document.createElement('div'); controls.className = 'us-voice-row-controls';
+      var copy = document.createElement('div'); copy.className = 'us-voice-provider-copy';
+      var title = document.createElement('strong'); title.textContent = connection.name;
+      var detail = document.createElement('small'); detail.textContent = 'Linear · ' + (connection.workspace && connection.workspace.name || 'Linear') + (connection.legacy ? '' : ' · Not assigned');
+      copy.append(title, detail);
+      var button = document.createElement('button'); button.type = 'button'; button.className = 'settings-btn-sm'; button.textContent = 'Manage';
+      button.setAttribute('aria-label', 'Manage ' + connection.name); button.setAttribute('aria-controls', 'us-linear-editor');
+      button.setAttribute('aria-expanded', String(store.get('personalLinearEditing') === connection.id));
+      button.onclick = function () { discardThen(function () { edit(connection); }); };
+      var brand = document.createElement('span'); brand.className = 'us-integration-brand'; brand.innerHTML = linearIconMarkup();
+      var saved = document.createElement('span'); saved.className = 'us-integration-state'; saved.textContent = 'Key saved';
+      controls.append(brand, copy, saved, button); row.appendChild(controls); list.appendChild(row);
+      if (store.get('personalLinearEditing') === connection.id) row.appendChild(form);
+    });
+    if (store.get('personalLinearEditing') === 'new') root.querySelector('#us-integration-setup').appendChild(form);
+  }
+  function edit(connection) {
+    store.set({personalLinearGeneration:(store.get('personalLinearGeneration') || 0)+1, personalLinearEditing: connection ? connection.id : 'new', personalLinearDirty: false, personalLinearOriginalName: connection ? connection.name : '', personalLinearNewId: connection ? null : crypto.randomUUID()});
+    name.value = connection ? connection.name : ''; key.value = ''; key.required = !connection;
+    root.querySelector('#us-linear-key-help').textContent = connection ? 'Leave blank to keep the saved key.' : 'Enter your personal Linear API key. It stays private to your account.';
+    key.placeholder = connection ? 'Enter a replacement key' : 'Enter API key'; remove.hidden = !connection;
+    form.hidden = false; message(''); render(); name.focus();
+  }
+  function close() {
+    var id = store.get('personalLinearEditing');
+    store.set({personalLinearEditing:null,personalLinearDirty:false}); form.reset(); form.hidden = true; render();
+    var row = Array.from(list.children).find(function (el) { return el.dataset.connectionId === id; });
+    (row ? row.querySelector('button') : add).focus();
+  }
+  function discardThen(action) {
+    if (!store.get('personalLinearDirty')) { action(); return; }
+    confirmSettingsAction('Discard this unsaved connection draft?', 'Discard', action);
+  }
+  form.oninput = function () { store.set({personalLinearDirty: !!key.value || name.value !== store.get('personalLinearOriginalName')}); };
+  async function save(disconnect) {
+    if (store.get('personalLinearSaving')) return;
+    var actor = store.get('myUserId'), generation = store.get('personalLinearGeneration');
+    var id = store.get('personalLinearEditing'); if (!id) return;
+    if (id === 'new') id = store.get('personalLinearNewId');
+    busy(true); message(disconnect ? 'Disconnecting…' : 'Saving connection…');
+    try {
+      var response = await fetch('/api/linear/connections/' + id, {method:disconnect ? 'DELETE' : 'PUT', headers:{'Content-Type':'application/json'}, body:disconnect ? undefined : JSON.stringify({name:name.value,key:key.value})});
+      var data = await response.json();
+      if (actor !== store.get('myUserId') || generation !== store.get('personalLinearGeneration')) return;
+      if (!response.ok) throw new Error(data.error || 'Could not save connection.');
+      var entries = (store.get('personalLinearConnections') || []).filter(function (entry) { return entry.id !== id; });
+      if (!disconnect) entries.push(Object.assign({id:id,name:name.value.trim(),legacy:id === 'default'},data));
+      store.set({personalLinearConnections:entries, githubWorkRefresh:null}); close(); message(disconnect ? 'Connection removed.' : 'Connection saved.');
+    } catch (error) { if (actor === store.get('myUserId') && generation === store.get('personalLinearGeneration')) message(error.message,true); }
+    finally { if (generation === store.get('personalLinearGeneration')) busy(false); }
+  }
+  form.onsubmit = function (event) { event.preventDefault(); save(false); };
+  add.onclick = function () { discardThen(function () { edit(null); }); };
+  root.querySelector('#us-linear-cancel').onclick = function () { discardThen(close); };
+  remove.onclick = function () { confirmSettingsAction('Disconnect this Linear connection? Work using this key will need to be reconnected. Existing issue links are retained.', 'Disconnect', function () { save(true); }); };
+  retry.onclick = loadPersonalIntegrations;
+  store.subscribe(function (state, previous) {
+    if (state.myUserId !== previous.myUserId) {
+      store.set({personalLinearConnections:null,personalLinearEditing:null,personalLinearDirty:false,personalLinearSaving:false,personalLinearGeneration:(state.personalLinearGeneration || 0)+1});
+      root.dataset.connectionsLoaded = 'false'; form.reset(); form.hidden = true; busy(false); render(); message('');
+    } else if (state.personalLinearConnections !== previous.personalLinearConnections) render();
+  });
+}
+
+export async function loadPersonalIntegrations() {
+  if (store.get('personalLinearSaving') || store.get('personalLinearEditing')) return;
+  var actor = store.get('myUserId'), generation = (store.get('personalLinearGeneration') || 0) + 1;
+  store.set({personalLinearGeneration:generation});
+  var status = document.getElementById('us-linear-collection-status'), retry = document.getElementById('us-linear-retry');
+  status.textContent = 'Loading connections…'; retry.hidden = true;
+  try {
+    var response = await fetch('/api/linear/connections');
+    if (!response.ok) throw new Error('Could not load connections. Try again.');
+    var data = await response.json();
+    if (actor !== store.get('myUserId') || generation !== store.get('personalLinearGeneration')) return;
+    store.set({personalLinearConnections:data.connections}); document.querySelector('.us-section[data-section="us-integrations"]').dataset.connectionsLoaded = 'true'; status.textContent = ''; status.dataset.state = '';
+  } catch (error) {
+    if (actor !== store.get('myUserId') || generation !== store.get('personalLinearGeneration')) return;
+    status.textContent = error.message; status.dataset.state = 'error'; retry.hidden = false;
+  }
+}

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

@@ -0,0 +1,80 @@
+import { initPersonalIntegrations, loadPersonalIntegrations } from './user-settings-integrations.js';
+import { getWs } from './ws-ref.js';
+import { store } from './store.js';
+import { closeSpeechPicker } from './stt-picker.js';
+import { loadSpeechSettings } from './stt-settings.js';
+import { mountDefaultAi, unmountDefaultAi, requestDefaultAi } from './default-ai.js';
+import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+
+export var USER_SETTINGS_PAGES = [
+  ['us-account', 'Account'], ['us-appearance', 'Appearance'], ['us-chat', 'Conversation'],
+  ['us-notifications', 'Notifications'], ['us-ai', 'AI preferences'], ['us-integrations', 'Integrations']
+];
+export function resolveUserSettingsPage(id) {
+  return ({'us-mates':'us-chat','us-experimental':'us-chat','us-connections':'us-integrations','us-email':'us-integrations','us-logout':'us-account'})[id] || id;
+}
+function section(id) { return document.querySelector('#user-settings .us-section[data-section="' + id + '"]'); }
+function heading(target, text, copy) {
+  var title = document.createElement('h3'); title.textContent = text; target.appendChild(title);
+  if (copy) { var p = document.createElement('p'); p.className = 'settings-hint'; p.textContent = copy; target.appendChild(p); }
+}
+export function buildUserSettingsLayout() {
+  var root = document.getElementById('user-settings');
+  root.querySelector('.us-modal').setAttribute('role','dialog');root.querySelector('.us-modal').setAttribute('aria-modal','true');root.querySelector('.us-modal').setAttribute('aria-label','User settings');
+  var nav = root.querySelector('.us-modal-nav-items'); nav.replaceChildren();
+  var dropdown = document.getElementById('user-settings-nav-dropdown'); dropdown.replaceChildren();
+  USER_SETTINGS_PAGES.forEach(function (page) {
+    var button = document.createElement('button'); button.className = 'us-nav-item'; button.dataset.section = page[0]; button.textContent = page[1]; button.type = 'button'; nav.appendChild(button);
+    var option = document.createElement('option'); option.value = page[0]; option.textContent = page[1]; dropdown.appendChild(option);
+  });
+  dropdown.setAttribute('aria-label', 'Personal settings page');
+  root.querySelector('.us-modal-nav').setAttribute('aria-label', 'Personal settings pages');
+  var notifications=section('us-notifications');
+  var push=document.getElementById('settings-notif-push').closest('label');
+  heading(notifications,'This device','Browser permission and push delivery are configured separately on each browser.');notifications.appendChild(push);
+  var accountNotifications=document.createElement('h3');accountNotifications.textContent='Account preferences';notifications.querySelector('.settings-card').before(accountNotifications);
+  var chat = section('us-chat'); chat.querySelector('h2').textContent = 'Conversation';
+  var voice = document.getElementById('us-lang-select').closest('.settings-card');
+  voice.innerHTML = '<div id="us-voice-settings"></div>';
+  var ai = document.createElement('div'); ai.className = 'us-section'; ai.dataset.section = 'us-ai';
+  ai.innerHTML = '<h2>AI preferences</h2><p class="settings-hint">Defaults for new Clay interviews and built-in AI assistance. Project defaults, individual Mates and existing conversation runtimes stay separate.</p><div id="us-default-ai"></div>';
+  root.querySelector('.us-modal-content').appendChild(ai);
+  heading(ai, 'Execution behavior');
+  ['us-auto-continue'].forEach(function (id) {ai.appendChild(document.getElementById(id).closest('.settings-card'));});
+  document.getElementById('us-auto-continue').closest('label').querySelector('.settings-hint').textContent = 'When a rate-limited conversation becomes eligible to retry, Clay can send a continuation automatically. This may resume work and consume usage without another message from you.';
+  heading(ai, 'Command permissions', 'These are personal Claude CLI allow rules, separate from model selection and Clay session approval modes. Managed defaults are shown for reference. Server access restrictions still apply. On an OS-user server these install in your OS home; otherwise they install in the shared server process home and can affect other Claude CLI launches there.');
+  ai.appendChild(document.getElementById('us-claude-allow-list').closest('.settings-card'));
+  section('us-mates').remove();
+  var experiments = document.createElement('details'); experiments.className = 'us-experiments'; experiments.innerHTML = '<summary>Experimental features</summary><p class="settings-hint">Personal opt-ins for features that may change.</p>';
+  experiments.appendChild(document.getElementById('us-capsules-enabled').closest('.settings-card'));chat.appendChild(experiments);section('us-experimental').remove();
+  section('us-email').remove();
+  initPersonalIntegrations();
+  var account = section('us-account');heading(account, 'Sign out');account.appendChild(document.getElementById('us-logout-btn').closest('.settings-card'));section('us-logout').remove();
+  document.getElementById('us-logout-btn').textContent = 'Sign out';
+  document.getElementById('us-logout-btn').closest('.settings-card').classList.remove('settings-card-danger');
+  document.getElementById('us-pin-set-btn').parentElement.querySelector('.settings-hint').textContent = 'Change your personal account PIN. Server sign-in policy is managed separately by an administrator.';
+  root.querySelectorAll('.layout-option-icon').forEach(function (el) {el.remove();});
+  var back = document.createElement('button');back.type = 'button';back.className = 'settings-btn-sm us-back';back.textContent = '← Settings';root.querySelector('.us-modal-content').prepend(back);
+  back.onclick = function () {root.classList.add('us-show-navigation');nav.querySelector('.active').focus();};
+  nav.addEventListener('keydown', function (event) {
+    if (['ArrowDown','ArrowUp','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();
+  });
+}
+export function loadUserSettingsExtras(page) {
+  document.getElementById('user-settings').classList.remove('us-show-navigation');
+  if (page === 'us-integrations') loadPersonalIntegrations();
+  if (page === 'us-chat') loadSpeechSettings();
+  if (page === 'us-ai') { mountDefaultAi(document.getElementById('us-default-ai')); requestDefaultAi(); var ws=getWs();if(ws && ws.readyState===1)ws.send(JSON.stringify({type:'get_claude_allow_list'})); }
+}
+export function finishUserSettingsExtras() {closeSpeechPicker();unmountDefaultAi(document.getElementById('us-default-ai'));}
+export function guardUserSettingsLeave(done) {
+  var pin = document.getElementById('us-pin-form');
+  var pinDirty = pin && !pin.classList.contains('hidden') && Array.from(pin.querySelectorAll('input')).some(function (input) {return !!input.value;});
+  var key = document.getElementById('us-linear-key');
+  if(store.get('speechPopup'))return;
+  var dirty = store.get('personalEmailDirty') || store.get('personalLinearDirty') || store.get('userVoiceDirty') || store.get('notificationDraft') || store.get('appearanceSaveError') || store.get('userProfileDirty') || store.get('userTerminalDirty') || pinDirty || key && key.value || store.get('defaultAiDraftDirty') || store.get('userAllowDirty');
+  if (!dirty) {done();return;}
+  showConfirmDialog('Your unsaved changes will remain in this tab. Leave this editor and keep the draft?', 'Keep draft and leave', done);
+}