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

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