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

package/lib/public/modules/notifications.js

@@ -1,3 +1,4 @@
+import { initNotificationSettings, saveNotificationPreference, updatePushSettings } from './notification-settings.js';
 import { initExtensionSettings } from './extension-settings.js';
 import { copyToClipboard, showToast } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
@@ -193,9 +194,8 @@ export function initNotifications(_ctx) {
     if (settingsUpdateCheck) {
       settingsUpdateCheck.addEventListener("click", function (e) {
         e.stopPropagation();
-        if (ctx.ws && ctx.connected) {
-          ctx.ws.send(JSON.stringify({ type: "check_update" }));
-        }
+        if (!ctx.ws || ctx.ws.readyState !== 1) { showToast("Reconnect before checking for updates."); return; }
+        ctx.ws.send(JSON.stringify({ type: "check_update" }));
         setUpdateBtn("Checking…", true, true);
       });
     }
@@ -222,10 +222,14 @@ export function initNotifications(_ctx) {
   })();
   var isStandalone = window.matchMedia("(display-mode:standalone)").matches || navigator.standalone;
 
+  window.addEventListener('clay:notification-preferences', function (event) {
+    notifAlertEnabled = event.detail.alert;
+    notifSoundEnabled = event.detail.sound;
+  });
   // --- Browser notifications ---
   notifPermission = ("Notification" in window) ? Notification.permission : "denied";
-  notifAlertEnabled = localStorage.getItem("notif-alert") !== "0";
-  notifSoundEnabled = localStorage.getItem("notif-sound") !== "0";
+  notifAlertEnabled = true;
+  notifSoundEnabled = true;
 
   var notifBtn = $("notif-btn");
   var notifMenu = $("notif-menu");
@@ -234,7 +238,7 @@ export function initNotifications(_ctx) {
 
   if (notifAlertEnabled && "Notification" in window && Notification.permission === "denied") {
     notifAlertEnabled = false;
-    localStorage.setItem("notif-alert", "0");
+
   }
   notifToggleAlert.checked = notifAlertEnabled;
   notifToggleSound.checked = notifSoundEnabled;
@@ -256,23 +260,24 @@ export function initNotifications(_ctx) {
 
   notifToggleAlert.addEventListener("change", function () {
     notifAlertEnabled = notifToggleAlert.checked;
-    localStorage.setItem("notif-alert", notifAlertEnabled ? "1" : "0");
+    saveNotificationPreference("alert", notifAlertEnabled);
     notifBlockedHint.classList.add("hidden");
     if (notifAlertEnabled && notifPermission !== "granted") {
       if ("Notification" in window && Notification.permission === "denied") {
         notifAlertEnabled = false;
         notifToggleAlert.checked = false;
-        localStorage.setItem("notif-alert", "0");
+
         notifBlockedHint.classList.remove("hidden");
         refreshIcons();
         return;
       }
+      if (!("Notification" in window)) { notifToggleAlert.checked = false; return; }
       Notification.requestPermission().then(function (p) {
         notifPermission = p;
         if (p !== "granted") {
           notifAlertEnabled = false;
           notifToggleAlert.checked = false;
-          localStorage.setItem("notif-alert", "0");
+
           notifBlockedHint.classList.remove("hidden");
           refreshIcons();
         }
@@ -327,7 +332,7 @@ export function initNotifications(_ctx) {
 
   notifToggleSound.addEventListener("change", function () {
     notifSoundEnabled = notifToggleSound.checked;
-    localStorage.setItem("notif-sound", notifSoundEnabled ? "1" : "0");
+    saveNotificationPreference("sound", notifSoundEnabled);
   });
 
   // --- Push notifications toggle ---
@@ -376,14 +381,18 @@ export function initNotifications(_ctx) {
     if (prevEndpoint && prevEndpoint !== sub.endpoint) {
       payload.replaceEndpoint = prevEndpoint;
     }
-    if (ctx.ws && ctx.ws.readyState === 1) {
-      ctx.ws.send(JSON.stringify({ type: "push_subscribe", subscription: json, replaceEndpoint: payload.replaceEndpoint || null }));
-    } else {
-      fetch(basePath + "api/push-subscribe", {
-        method: "POST", headers: { "Content-Type": "application/json" },
-        credentials: "same-origin", body: JSON.stringify(payload),
-      });
-    }
+    updatePushSettings(true, 'Registering push on this device…', true);
+    return fetch('/api/push-subscribe', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin', body: JSON.stringify(payload)
+    }).then(function (response) {
+      if (!response.ok) throw new Error('Registration failed');
+      updatePushSettings(true, 'Push enabled on this device.', false);
+      return true;
+    }).catch(function () {
+      updatePushSettings(false, 'Could not register push with Clay. Enable it again to retry.', false);
+      return false;
+    });
   }
 
   function subscribePush() {
@@ -398,8 +407,9 @@ export function initNotifications(_ctx) {
           return reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: key });
         });
     }).then(function (sub) {
-      sendPushSubscription(sub);
-      localStorage.setItem("notif-push", "1");
+      return sendPushSubscription(sub);
+    }).then(function (registered) {
+      if (!registered) return;
       hideOnboarding();
       localStorage.setItem("onboarding-dismissed", "1");
       // Show a welcome notification so the user knows it works
@@ -411,18 +421,19 @@ export function initNotifications(_ctx) {
       }).catch(function () {});
     }).catch(function () {
       notifTogglePush.checked = false;
-      localStorage.setItem("notif-push", "0");
+      updatePushSettings(false, "Push is off on this device. Enable it here to retry.");
       notifBlockedHint.classList.remove("hidden");
       refreshIcons();
     });
   }
 
   function unsubscribePush() {
-    if (window._pushSubscription) {
-      window._pushSubscription.unsubscribe().catch(function () {});
+    var subscription = window._pushSubscription;
+    updatePushSettings(false, 'Disabling push on this device…', true);
+    Promise.resolve(subscription ? subscription.unsubscribe() : true).then(function () {
       window._pushSubscription = null;
-    }
-    localStorage.setItem("notif-push", "0");
+      updatePushSettings(false, 'Push is off on this device.', false);
+    }).catch(function () { notifTogglePush.checked = true; updatePushSettings(true, 'Could not disable push. Retry on this device.', false); });
   }
 
   notifTogglePush.addEventListener("change", function () {
@@ -434,6 +445,8 @@ export function initNotifications(_ctx) {
     }
   });
 
+  initNotificationSettings();
+
   // --- Service Worker registration & push state sync ---
   (function initServiceWorker() {
     if (!("serviceWorker" in navigator)) return;
@@ -464,6 +477,7 @@ export function initNotifications(_ctx) {
 
         return Promise.all([reg.pushManager.getSubscription(), vapidPromise]).then(function (results) {
           var sub = results[0];
+          var hadSubscription = !!sub;
           var serverKey = results[1];
 
           // If subscription exists but VAPID key changed, unsubscribe and re-subscribe
@@ -479,9 +493,10 @@ export function initNotifications(_ctx) {
           if (sub) {
             window._pushSubscription = sub;
             notifTogglePush.checked = true;
+            updatePushSettings(true);
             sendPushSubscription(sub);
             hideOnboarding();
-          } else if (serverKey && localStorage.getItem("notif-push") === "1") {
+          } else if (serverKey && hadSubscription) {
             // Had push enabled but subscription is gone (VAPID key change), re-subscribe
             var raw = atob(serverKey.replace(/-/g, "+").replace(/_/g, "/"));
             var key = new Uint8Array(raw.length);
@@ -490,13 +505,14 @@ export function initNotifications(_ctx) {
               .then(function (newSub) {
                 sendPushSubscription(newSub);
                 notifTogglePush.checked = true;
+            updatePushSettings(true);
               }).catch(function () {
                 notifTogglePush.checked = false;
-                localStorage.setItem("notif-push", "0");
+                updatePushSettings(false, "Push is off on this device. Enable it here to retry.");
               });
           } else {
             notifTogglePush.checked = false;
-            localStorage.setItem("notif-push", "0");
+            updatePushSettings(false, "Push is off on this device. Enable it here to retry.");
             // Standalone (PWA) without push: redirect to setup for push onboarding
             // Skip if setup was just completed (setup-done flag)
             var isStandalone = window.matchMedia("(display-mode:standalone)").matches || navigator.standalone;

package/lib/public/modules/personal-settings-dialog.js

@@ -0,0 +1,51 @@
+import { store } from './store.js';
+import { confirmSettingsAction, isolateSettingsDialog, trapSettingsFocus } from './server-settings-state.js';
+import { enhanceSettingsSelects } from './settings-select.js';
+
+// Keep contextual connection forms transactional when opened from settings.
+export function preparePersonalConnectionDialog(overlay, inline) {
+  var previous = document.activeElement;
+  var restore = inline ? function () {} : isolateSettingsDialog(overlay);
+  var dirty = false;
+  var dialog = overlay.querySelector('.email-setup-dialog');
+  dialog.setAttribute('role', inline ? 'region' : 'dialog');
+  if (!inline) dialog.setAttribute('aria-modal', 'true');
+  dialog.setAttribute('aria-label', 'Add personal mailbox');
+  overlay.querySelectorAll('.email-setup-field').forEach(function (field) {
+    var label = field.querySelector('label');
+    var input = field.querySelector('input,select');
+    if (label && input) label.htmlFor = input.id;
+  });
+  enhanceSettingsSelects(overlay);
+  function markDirty() { dirty = true; if (inline) store.set({personalEmailDirty:true}); }
+  overlay.addEventListener('input', markDirty);
+  overlay.addEventListener('change', markDirty);
+  var unsubscribe = inline ? store.subscribe(function (state, previousState) {
+    if (state.myUserId !== previousState.myUserId) close();
+  }) : function () {};
+  function cleanup() { observer.disconnect(); unsubscribe(); restore(); if (inline) store.set({personalEmailDirty:false}); }
+  function close() {
+    cleanup();overlay.remove();
+    if (previous && previous.isConnected) previous.focus();
+  }
+  function leave() {
+    if (dirty) confirmSettingsAction('Discard this unsaved mailbox connection?', 'Discard', close);
+    else close();
+  }
+  overlay.addEventListener('click', function (event) {
+    if (!inline && event.target === overlay || event.target.closest('#email-setup-cancel')) {
+      event.preventDefault();event.stopImmediatePropagation();leave();
+    }
+  }, true);
+  overlay.addEventListener('keydown', function (event) {
+    if (!inline || event.key === 'Escape') event.stopPropagation();
+    if (event.key === 'Escape' && !event.defaultPrevented) {event.preventDefault();leave();}
+    if (!inline) trapSettingsFocus(event, overlay);
+  });
+  var observer = new MutationObserver(function () {
+    if (!overlay.isConnected) {cleanup();if(previous && previous.isConnected)previous.focus();}
+  });
+  observer.observe(inline ? overlay.parentElement : document.body,{childList:true});
+  (overlay.querySelector('#email-setup-address') || overlay.querySelector('button')).focus();
+  return close;
+}

package/lib/public/modules/profile.js

@@ -1,3 +1,4 @@
+import { setChatLayout } from './theme.js';
 // User profile module — profile popovers for people and Mates
 // Stores profile server-side in ~/.clay/profile.json
 // Generated identities use deterministic local pixel identicons.
@@ -7,7 +8,6 @@ import { avatarUrl, mateAvatarUrl, mateMarkUrl, userAvatarSeed } from './avatar.
 import { store } from './store.js';
 import { applyTerminalFont } from './terminal-prefs.js';
 
-var ctx;
 var profile = { name: '', lang: 'en-US', avatarStyle: 'imprint', avatarSeed: '', avatarColor: '#5857fc', avatarCustom: '' };
 var profileUsername = '';
 var popoverEl = null;
@@ -87,6 +87,16 @@ export function applyToIsland() {
   document.dispatchEvent(new CustomEvent('clay:profile-updated'));
 }
 
+export async function saveProfileUpdates(updates) {
+  var next = Object.assign({}, profile, updates);
+  var response = await fetch('/api/profile', {method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(next)});
+  var result = await response.json();
+  if (!response.ok || result.error) throw new Error(result.error || 'Could not save your profile. Your draft is retained.');
+  profile = next;
+  applyToIsland();
+  return result;
+}
+
 export function updateProfileName(name) {
   profile.name = String(name || '').trim();
   applyToIsland();
@@ -528,8 +538,7 @@ function escapeAttr(str) {
 }
 
 // --- Init ---
-export function initProfile(_ctx) {
-  ctx = _ctx;
+export function initProfile() {
 
   var island = document.getElementById('user-island');
   if (!island) return;
@@ -556,13 +565,13 @@ export function initProfile(_ctx) {
     // when the user opened the Settings modal (user-settings.js's
     // populateAccount), so a hard refresh would drop persisted picks back
     // to defaults until the modal was visited.
+    if(data.chatLayout)setChatLayout(data.chatLayout);
     if (data.terminalFont && typeof data.terminalFont === "object") {
       applyTerminalFont(data.terminalFont.family, data.terminalFont.size);
     }
 
-    // Apply the project-only Mate DM shortcut preference at boot. Home and
-    // the rest of the Mate capability surface remain available.
-    var matesOn = data.matesEnabled === true;
+    // Keep project Mate DM shortcuts available for legacy profiles too.
+    var matesOn = true;
     store.set({ projectMateDmsEnabled: matesOn });
     if (document.body) document.body.classList.toggle('project-mate-dms-disabled', !matesOn);
   }).catch(function(err) {

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

@@ -0,0 +1,106 @@
+import { refreshIcons } from './icons.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { parseEnvString, serializeEnvValue, looksLikeEnv } from './settings-env-values.js';
+
+function state() { return store.get('projectEnvironmentEditor') || {}; }
+function update(values) { store.set({ projectEnvironmentEditor: Object.assign({}, state(), values) }); }
+function status(text) { document.getElementById('ps-env-save-status').textContent = text; }
+function send(message) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) { status('Disconnected. Your draft is kept. Reconnect and try again.'); return false; }
+  ws.send(JSON.stringify(message)); return true;
+}
+export function projectEnvironmentDirty() { return state().slug === store.get("projectSettingsSlug") && !!(state().dirty || state().saving); }
+export function openProjectEnvironment(slug) {
+  if (state().slug === slug && (state().loaded || state().loading || state().dirty)) return;
+  var cached = Object.assign({}, store.get('projectEnvironmentDrafts') || {});
+  if (state().slug && state().dirty) cached[state().slug] = state();
+  store.set({ projectEnvironmentDrafts: cached });
+  if (cached[slug]) { store.set({ projectEnvironmentEditor: cached[slug] }); render(); status('Unsaved changes'); return; }
+  update({ slug: slug, saved: '', rows: [], dirty: false, loaded: false, loading: false, editing: false, saving: false });
+  render(); status('Loading…');
+  var requestId = crypto.randomUUID();
+  update({ requestId: requestId });
+  if (send({ type: 'get_project_env', slug: slug, requestId: requestId })) update({ loading: true });
+}
+export function handleProjectEnv(msg) {
+  if (!state().loading || (msg.slug !== state().slug || msg.requestId !== state().requestId)) return;
+  update({ loading: false });
+  if (msg.error) { status(msg.error); return; }
+  update({ loaded: true, saved: msg.envrc || '', rows: parseEnvString(msg.envrc || '') });
+  render(); status('');
+}
+function changeRows(rows) { update({ rows: rows, dirty: true }); document.getElementById('ps-env-save').disabled = false; status('Unsaved changes'); }
+function render() {
+  var editor = state();
+  var list = document.getElementById('ps-env-list'); list.replaceChildren();
+  (editor.rows || []).forEach(function (entry, index) {
+    var row = document.createElement('div'); row.className = 'ps-env-row';
+    var key = document.createElement('input'); key.className = 'ps-env-key'; key.value = entry.key; key.placeholder = 'KEY'; key.setAttribute('aria-label', 'Variable name');
+    var value = document.createElement('input'); value.className = 'ps-env-val'; value.type = 'password'; value.value = entry.value; value.placeholder = 'Value'; value.setAttribute('aria-label', 'Variable value');
+    [key, value].forEach(function (input) { input.autocomplete = 'off'; input.spellcheck = false; input.disabled = !!editor.saving; });
+    function changed() {
+      var rows = state().rows.slice(); rows[index] = { key: key.value, value: value.value }; changeRows(rows);
+    }
+    key.addEventListener('input', changed); value.addEventListener('input', changed);
+    key.addEventListener('paste', function (event) {
+      var text = event.clipboardData.getData('text');
+      if (!looksLikeEnv(text)) return;
+      event.preventDefault(); var rows = state().rows.slice();
+      rows.splice.apply(rows, [index, 1].concat(parseEnvString(text))); changeRows(rows); render();
+    });
+    var remove = document.createElement('button'); remove.className = 'ps-env-del'; remove.textContent = '×'; remove.setAttribute('aria-label', 'Remove variable'); remove.disabled = !!editor.saving;
+    remove.onclick = function () { var rows = state().rows.slice(); rows.splice(index, 1); changeRows(rows); render(); };
+    remove.innerHTML = '<i data-lucide="x"></i>';
+    var reveal = document.createElement('button'); reveal.type = 'button'; reveal.className = 'settings-btn-sm'; reveal.textContent = 'Show';
+    reveal.setAttribute('aria-label', 'Show variable value'); reveal.setAttribute('aria-pressed', 'false');
+    reveal.onclick = function () { var visible = value.type === 'password'; value.type = visible ? 'text' : 'password'; reveal.textContent = visible ? 'Hide' : 'Show'; reveal.setAttribute('aria-pressed', String(visible)); };
+    row.append(key, value, reveal, remove); list.appendChild(row);
+  });
+  document.getElementById('ps-env-add-btn').disabled = !editor.loaded || !!editor.saving;
+  document.getElementById('ps-env-save').disabled = !editor.loaded || !editor.dirty || !!editor.saving;
+  refreshIcons();
+}
+function clearCachedDraft() {
+  var cached = Object.assign({}, store.get('projectEnvironmentDrafts') || {}); delete cached[state().slug]; store.set({ projectEnvironmentDrafts: cached });
+}
+export function discardProjectEnvironment() {
+  clearCachedDraft();
+  update({ rows: parseEnvString(state().saved || ''), editing: false, dirty: false }); render(); status(''); document.getElementById('ps-env-add-btn').focus();
+}
+export function handleProjectEnvSaved(msg) {
+  if (!state().saving || (msg.slug !== state().slug || msg.requestId !== state().requestId)) return;
+  update({ saving: false });
+  if (!msg.ok) { render(); status(msg.error || 'Save failed. Your draft is kept.'); return; }
+  clearCachedDraft();
+  update({ saved: state().submitted, dirty: false, editing: false });
+  render(); document.getElementById('ps-env-add-btn').focus(); status('Saved. ' + (msg.timing || 'Applies to newly created coding-agent processes.'));
+}
+function save() {
+  var names = {};
+  var rows = state().rows || [];
+  for (var i = 0; i < rows.length; i++) {
+    var key = rows[i].key.trim();
+    if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) { status('Enter a valid name for every variable.'); return; }
+    if (Object.prototype.hasOwnProperty.call(names, key)) { status('Each variable needs a unique name.'); return; }
+    names[key] = true;
+  }
+  var envrc = rows.map(function (row) { return 'export ' + row.key.trim() + '=' + serializeEnvValue(row.value); }).join('\n');
+  var requestId = crypto.randomUUID();
+  update({ requestId: requestId });
+  if (!send({ type: 'set_project_env', slug: state().slug, envrc: envrc, requestId: requestId })) return;
+  update({ submitted: envrc, saving: true }); render(); status('Saving…');
+}
+export function initProjectEnvironment() {
+  document.getElementById('ps-env-add-btn').onclick = function () { changeRows((state().rows || []).concat([{ key: '', value: '' }])); render(); document.querySelector('#ps-env-list .ps-env-row:last-child input').focus(); };
+  document.getElementById('ps-env-save').onclick = save;
+  store.subscribe(function (next, previous) {
+    if (next.myUserId !== previous.myUserId) {
+      store.set({ projectEnvironmentEditor: {}, projectEnvironmentDrafts: {} }); render(); status(''); return;
+    }
+    if (previous.connected && !next.connected && (state().saving || state().loading)) {
+      update({ saving: false, loading: false }); render(); status('Disconnected. Your draft is kept. Reconnect and try again.');
+    }
+  });
+}