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

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);
+}

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

@@ -0,0 +1,48 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { getChatLayout, setChatLayout } from './theme.js';
+
+export function preferenceStatus(id, text, error) {
+  var control = document.getElementById(id); if (!control) return;
+  var status = document.getElementById(id + '-receipt');
+  if (!status) {status = document.createElement('p');status.id=id+'-receipt';status.className='settings-status';status.setAttribute('role','status');control.closest('.settings-card').appendChild(status);}
+  status.textContent=text;status.dataset.state=error?'error':'';
+}
+async function saveToggle(id, url, apply) {
+  var input=document.getElementById(id);var want=input.checked;
+  input.disabled=true;preferenceStatus(id,'Saving…');
+  try {
+    var response=await fetch(url,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({enabled:want})});var data=await response.json();
+    if(!response.ok || !data.ok)throw new Error(data.error || 'Could not save.');
+    if(apply)apply(want);preferenceStatus(id,'Saved.');
+  } catch(error) {input.checked=!want;preferenceStatus(id,error.message+' Try again.',true);}
+  finally {input.disabled=false;}
+}
+export function initPersonalPreferences() {
+  document.getElementById('us-auto-continue').onchange=function(){saveToggle(this.id,'/api/user/auto-continue');};
+
+  document.querySelectorAll('#us-layout-switcher button').forEach(function(button){button.onclick=async function(){
+    var layout=button.dataset.layout;var controls=button.parentElement.querySelectorAll('button');controls.forEach(function(el){el.disabled=true;});preferenceStatus('us-layout-switcher','Saving…');
+    try {var response=await fetch('/api/user/chat-layout',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({layout:layout})});if(!response.ok)throw new Error('Could not save layout.');setChatLayout(layout);controls.forEach(function(el){el.classList.toggle('selected',el.dataset.layout===layout);el.setAttribute('aria-pressed',el.dataset.layout===layout);});preferenceStatus('us-layout-switcher','Saved. Applied to conversations in this view.');}
+    catch(error){preferenceStatus('us-layout-switcher',error.message+' Try again.',true);}
+    finally{controls.forEach(function(el){el.disabled=false;});}
+  };});
+  var textarea=document.getElementById('us-claude-allow-list');textarea.oninput=function(){store.set({userAllowDirty:true});};
+  document.getElementById('us-claude-allow-save').onclick=function(){
+    var ws=getWs();if(!ws || ws.readyState!==1){preferenceStatus('us-claude-allow-list','Disconnected. Your draft is retained.',true);return;}
+    this.disabled=true;preferenceStatus('us-claude-allow-list','Saving…');ws.send(JSON.stringify({type:'set_claude_user_allow_list',patterns:textarea.value.split('\n').map(function(line){return line.trim();}).filter(Boolean)}));
+    setTimeout(function(){var save=document.getElementById('us-claude-allow-save');if(save.disabled){save.disabled=false;preferenceStatus('us-claude-allow-list','No acknowledgement. Your draft is retained; reconnect and retry.',true);}},12000);
+  };
+}
+export function handlePersonalSettingsMessage(msg) {
+  if(msg.type==='claude_allow_list') {
+    store.set({userAllowSaved:msg.user || []});
+    if(store.get('userAllowDirty'))return;
+  }
+  if(msg.type==='set_claude_user_allow_list_result') {
+    document.getElementById('us-claude-allow-save').disabled=false;
+    if(msg.ok)store.set({userAllowDirty:msg.effective===false,userAllowSaved:msg.patterns || []});
+    var message=msg.ok ? (msg.effective===false ? 'Saved to your account, but not installed in Claude. Check filesystem access, then Save to retry.' : 'Saved. Applies on the next Claude invocation.') : msg.error || 'Save failed. Your draft is retained.';
+    preferenceStatus('us-claude-allow-list',message,!msg.ok || msg.effective===false);
+  }
+}

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

@@ -0,0 +1,53 @@
+import { store } from './store.js';
+import { getProfile, saveProfileUpdates, uploadAvatarBlob, showAvatarPositioner } from './profile.js';
+import { populateAccount } from './user-settings-account.js';
+import { confirmSettingsAction } from './server-settings-state.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+export function initPersonalProfile() {
+  var hero = document.querySelector('#user-settings .us-account-hero');
+  var name = document.getElementById('us-account-name');
+  var edit = document.createElement('button'); edit.id = 'us-profile-edit'; edit.type = 'button'; edit.className = 'settings-btn-sm'; edit.textContent = 'Edit name'; hero.appendChild(edit);
+  var form = document.createElement('form'); form.hidden = true; form.className = 'us-profile-form';
+  form.innerHTML = '<label class="settings-label" for="us-profile-name">Display name</label><input id="us-profile-name" class="us-text-input" maxlength="100" required autocomplete="name"><div class="settings-form-actions"><button type="submit" class="settings-btn-sm">Save</button><button type="button" class="settings-btn-sm" data-cancel>Cancel</button></div><p role="status" class="settings-status"></p>';
+  name.after(form); var input = form.querySelector('input');
+  function close() { form.hidden = true; name.hidden = false; edit.hidden = false; edit.focus(); }
+  edit.onclick = function () {
+    if (!store.get('userProfileDirty')) input.value = getProfile().name || name.textContent;
+    form.hidden = false; name.hidden = true; edit.hidden = true; input.focus(); input.select();
+  };
+  input.oninput = function () { store.set({ userProfileDirty: true }); };
+  form.onsubmit = async function (event) {
+    event.preventDefault(); var save = form.querySelector('[type=submit]'); var status = form.querySelector('[role=status]');
+    if (!input.value.trim()) { status.textContent = 'Enter a display name.'; return; }
+    save.disabled = true; status.textContent = 'Saving…';
+    try { await saveProfileUpdates({ name: input.value.trim() }); store.set({ userProfileDirty: false }); close(); populateAccount(); }
+    catch (error) { status.textContent = error.message; status.dataset.state = 'error'; }
+    finally { save.disabled = false; }
+  };
+  form.querySelector('[data-cancel]').onclick = function () {
+    function discard() { store.set({ userProfileDirty: false }); close(); }
+    if (store.get('userProfileDirty')) confirmSettingsAction('Discard your unsaved name?', 'Discard', discard); else discard();
+  };
+  var visual = hero.querySelector('.us-account-avatar');
+  var avatar = document.createElement('button'); avatar.id = 'us-profile-avatar'; avatar.type = 'button'; avatar.className = 'us-avatar-edit'; avatar.setAttribute('aria-label', 'Change profile picture'); avatar.title = 'Change profile picture';
+  visual.before(avatar); avatar.appendChild(visual);
+  avatar.insertAdjacentHTML('beforeend', '<span class="us-avatar-edit-mark" aria-hidden="true">' + iconHtml('camera') + '</span>');
+  refreshIcons();
+  var file = document.createElement('input'); file.type = 'file'; file.accept = 'image/*'; file.hidden = true; hero.after(file);
+  var status = document.createElement('p'); status.className = 'settings-status'; status.setAttribute('role', 'status'); hero.after(status);
+  avatar.onclick = function () { file.click(); };
+  file.onchange = function () {
+    var selected = file.files[0]; if (!selected) return;
+    var url = URL.createObjectURL(selected); var image = new Image();
+    image.onload = function () {
+      showAvatarPositioner(image, url, function (blob) {
+        URL.revokeObjectURL(url); status.textContent = 'Uploading picture…';
+        uploadAvatarBlob(blob).then(function () { status.textContent = 'Picture updated.'; populateAccount(); avatar.focus(); })
+          .catch(function (error) { status.textContent = error.message; status.dataset.state = 'error'; });
+      });
+    };
+    image.onerror = function () { URL.revokeObjectURL(url); status.textContent = 'Could not read that image. Choose another file.'; };
+    image.src = url; file.value = '';
+  };
+}

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

@@ -0,0 +1,38 @@
+import { store } from './store.js';
+import { getThemes, retryAppearanceSave, getAppearanceChoices, selectAppearanceMode, selectAppearanceTheme, onThemeChange, importLegacyAppearance } from './theme.js';
+import { enhanceSettingsSelects } from './settings-select.js';
+
+export function initPersonalThemes(root) {
+  root.innerHTML = '<h3>Theme</h3><div class="us-preference-row"><label class="settings-label" for="us-theme-mode">Appearance</label><select id="us-theme-mode" class="settings-select"><option value="system">Follow system</option><option value="light">Light</option><option value="dark">Dark</option></select></div><p class="settings-hint">Choose a palette for each appearance. Switching light and dark keeps both choices.</p><div class="us-theme-pair"></div><p id="us-appearance-status" class="settings-status" role="status"></p>';
+  var mode = root.querySelector('select');
+  mode.onchange = function () { selectAppearanceMode(mode.value); };
+  ['light', 'dark'].forEach(function (variant) {
+    var group = document.createElement('div'); group.className = 'us-theme-choice';
+    group.innerHTML = '<label class="settings-label" for="us-theme-' + variant + '">' + (variant === 'light' ? 'Light palette' : 'Dark palette') + '</label><select class="settings-select" id="us-theme-' + variant + '"></select><div class="us-theme-preview" aria-hidden="true"><div class="us-theme-preview-nav"></div><div class="us-theme-preview-content"><strong>Aa</strong><div class="us-theme-swatches"></div></div></div>';
+    group.querySelector('select').onchange = function () { selectAppearanceTheme(variant, this.value); };
+    root.querySelector('.us-theme-pair').appendChild(group);
+  });
+  function sync() {
+    var themes = getThemes(); var choices = getAppearanceChoices(); mode.value = choices.mode; mode.dispatchEvent(new Event('settings-sync'));
+    ['light', 'dark'].forEach(function (variant) {
+      var select = root.querySelector('#us-theme-' + variant); select.replaceChildren();
+      Object.keys(themes).filter(function (id) { return themes[id].variant === variant; }).sort(function (a,b) { return themes[a].name.localeCompare(themes[b].name); }).forEach(function (id) {
+        var option = document.createElement('option'); option.value = id; option.textContent = themes[id].name; select.appendChild(option);
+      });
+      select.value = choices[variant + 'Theme']; select.dispatchEvent(new Event('settings-sync'));
+      var theme = themes[select.value]; if (!theme) return;
+      var preview = select.parentElement.querySelector('.us-theme-preview');
+      preview.style.background = '#' + theme.base00; preview.style.color = '#' + theme.base06;
+      preview.querySelector('.us-theme-preview-nav').style.background = '#' + theme.base01;
+      var swatches = preview.querySelector('.us-theme-swatches'); swatches.replaceChildren();
+      ['base08','base09','base0A','base0B','base0D','base0E'].forEach(function (key) { var dot = document.createElement('span'); dot.style.background = '#' + theme[key]; swatches.appendChild(dot); });
+    });
+  }
+  var retry = document.createElement('button'); retry.type = 'button'; retry.className = 'settings-btn-sm'; retry.textContent = 'Retry save'; retry.hidden = !store.get('appearanceSaveError'); retry.onclick = retryAppearanceSave; root.appendChild(retry);
+  var legacy = document.createElement('button'); legacy.type = 'button'; legacy.className = 'settings-btn-sm'; legacy.textContent = "Import this browser's previous theme"; legacy.onclick = importLegacyAppearance; root.appendChild(legacy);
+  store.subscribe(function (state, previous) {
+    legacy.hidden = !state.legacyAppearanceAvailable; retry.hidden = !state.appearanceSaveError;
+    if (state.appearanceDraft !== previous.appearanceDraft || state.appearancePreference !== previous.appearancePreference) sync();
+  });
+  legacy.hidden = !store.get('legacyAppearanceAvailable'); onThemeChange(sync); sync(); enhanceSettingsSelects(root);
+}

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

@@ -0,0 +1,75 @@
+import { store } from './store.js';
+import { saveSpeechSettings, loadSpeechSettings } from './stt-settings.js';
+import { confirmSettingsAction } from './server-settings-state.js';
+
+export function initPersonalVoice() {
+  var root = document.getElementById('us-voice-settings');
+  root.innerHTML = '<h3>Voice providers</h3><p class="settings-hint">Manage your personal API keys here. Choose the voice model, transcription mode and language from the microphone menu in the composer. Browser speech needs no API key.</p><div class="us-voice-providers" aria-label="Voice providers"></div><div id="us-voice-connection" hidden><form id="us-voice-key-form"><label class="settings-label" for="us-voice-key">API key</label><input id="us-voice-key" class="us-text-input" type="password" autocomplete="off" spellcheck="false" maxlength="4096" required><p id="us-voice-privacy" class="settings-hint"></p><div class="settings-form-actions"><button type="submit" class="settings-btn-sm">Save key</button><button type="button" id="us-voice-key-cancel" class="settings-btn-sm">Cancel</button><a id="us-voice-get-key" target="_blank" rel="noopener noreferrer">Get API key ↗</a></div></form><button type="button" id="us-voice-remove" class="settings-btn-sm">Remove saved key</button></div><p class="settings-status" role="status" id="us-voice-status"></p><button type="button" class="settings-btn-sm" id="us-voice-retry" hidden>Reload providers</button>';
+  var list = root.querySelector('.us-voice-providers'); var editor = root.querySelector('#us-voice-connection');
+  var form = root.querySelector('form'); var key = form.querySelector('input'); var status = root.querySelector('[role=status]');
+  var remove = root.querySelector('#us-voice-remove'); var retry = root.querySelector('#us-voice-retry');
+  function sync() {
+    var settings = store.get('speechSettings'); var busy = !!store.get('speechSettingsSaving');
+    if (settings) {
+      var signature = settings.providers.map(function (provider) { return provider.id; }).join(',');
+      if (list.dataset.catalog !== signature) {
+        root.appendChild(editor); list.replaceChildren(); list.dataset.catalog = signature;
+        settings.providers.forEach(function (provider) {
+          var row = document.createElement('div'); row.className = 'us-voice-row'; row.dataset.voiceProvider = provider.id;
+          var controls = document.createElement('div'); controls.className = 'us-voice-row-controls';
+          var image = document.createElement('img'); image.className = 'us-voice-provider-logo'; image.src = provider.icon; image.alt = '';
+          var copy = document.createElement('div'); copy.className = 'us-voice-provider-copy';
+          var name = document.createElement('strong'); name.textContent = provider.name;
+          var state = document.createElement('small'); state.className = 'us-voice-key-state'; copy.appendChild(name); copy.appendChild(state);
+          var button = document.createElement('button'); button.type = 'button'; button.className = 'settings-btn-sm us-voice-key-action'; button.dataset.voiceKey = provider.id;
+          button.setAttribute('aria-controls','us-voice-connection');
+          button.onclick = function () { discardThen(function () { store.set({userVoiceKeyProvider:provider.id}); status.textContent = ''; sync(); key.focus(); }); };
+          controls.appendChild(image); controls.appendChild(copy); controls.appendChild(button); row.appendChild(controls); list.appendChild(row);
+        });
+      }
+      list.querySelectorAll('[data-voice-provider]').forEach(function (row) {
+        var id = row.dataset.voiceProvider; var connected = settings.configured.indexOf(id) >= 0; var button = row.querySelector('[data-voice-key]');
+        row.querySelector('.us-voice-key-state').textContent = connected ? 'Key saved' : 'Not connected';
+        button.textContent = connected ? 'API key' : 'Connect'; button.disabled = busy;
+        button.setAttribute('aria-label', (connected ? 'Manage ' : 'Connect ') + row.querySelector('strong').textContent + ' API key');
+        button.setAttribute('aria-expanded',String(store.get('userVoiceKeyProvider') === id));
+      });
+      var provider = settings.providers.find(function (item) { return item.id === store.get('userVoiceKeyProvider'); });
+      editor.hidden = !provider;
+      if (provider) {
+        var connected = settings.configured.indexOf(provider.id) >= 0;
+        var row = Array.from(list.children).find(function (item) { return item.dataset.voiceProvider === provider.id; });
+        if (editor.parentElement !== row) row.appendChild(editor);
+        if (status.parentElement !== editor) editor.appendChild(status);
+        form.querySelector('label').textContent = provider.name + ' API key';
+        key.placeholder = connected ? 'Enter a replacement key' : 'Enter API key'; remove.hidden = !connected;
+        root.querySelector('#us-voice-privacy').textContent = 'Stored privately on your Clay server and shared by all ' + provider.name + ' voice models. Audio is sent to ' + provider.name + '; usage is billed to your account.';
+        root.querySelector('#us-voice-get-key').href = provider.url;
+      } else { if (editor.parentElement !== root) root.appendChild(editor); retry.before(status); }
+    } else list.textContent = 'Loading providers…';
+    editor.querySelectorAll('input,button').forEach(function (control) { control.disabled = busy || !settings; });
+    retry.hidden = !store.get('speechSettingsError'); retry.disabled = busy;
+    if (store.get('speechSettingsError')) { status.textContent = store.get('speechSettingsError'); status.dataset.state = 'error'; }
+  }
+  function discardThen(action) {
+    if (!key.value) { action(); return; }
+    confirmSettingsAction('Discard the unsaved voice API key?', 'Discard', function () { key.value = ''; store.set({userVoiceDirty:false}); action(); });
+  }
+  function closeEditor() {
+    var id = store.get('userVoiceKeyProvider'); key.value = ''; store.set({userVoiceKeyProvider:null,userVoiceDirty:false}); sync();
+    var button = root.querySelector('[data-voice-key="' + id + '"]'); if (button) button.focus();
+  }
+  async function save(value) {
+    var provider = store.get('userVoiceKeyProvider'); if (!provider) return;
+    status.textContent = 'Saving…'; status.dataset.state = '';
+    try { await saveSpeechSettings({provider:provider,key:value}); closeEditor(); status.textContent = value === null ? 'Key removed. Reconnect this provider before using its voice models.' : 'Key saved. Your voice model and language are unchanged.'; }
+    catch (error) { status.textContent = error.message; status.dataset.state = 'error'; sync(); }
+  }
+  key.oninput = function () { store.set({userVoiceDirty:!!key.value}); };
+  form.onsubmit = function (event) { event.preventDefault(); save(key.value); };
+  root.querySelector('#us-voice-key-cancel').onclick = function () { discardThen(function () { closeEditor(); status.textContent = ''; }); };
+  remove.onclick = function () { confirmSettingsAction('Remove this provider’s saved voice key? Models using it will require reconnection.', 'Remove key', function () { save(null); }); };
+  retry.onclick = loadSpeechSettings;
+  store.subscribe(function (state, previous) { if (state.speechSettings !== previous.speechSettings || state.speechSettingsSaving !== previous.speechSettingsSaving || state.speechSettingsError !== previous.speechSettingsError) sync(); });
+  sync();
+}