clay-server 5.5.0-beta.3 → 5.5.0-beta.5

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

@@ -1,3 +1,5 @@
+import { selectIntegrationEditor, clearIntegrationEditor, bindIntegrationEditorFocus } from './personal-integration-editor.js';
+import { initGithubIntegration } from './user-settings-github.js';
 import { linearIconMarkup } from './session-github.js';
 import { iconHtml } from './icons.js';
 import { store } from './store.js';
@@ -5,11 +7,13 @@ 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>';
+  root.innerHTML = '<h2>Integrations</h2><p class="settings-hint">Connect accounts and services used by Clay Studio.</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>';
+  bindIntegrationEditorFocus(root);
+  initGithubIntegration(root);
   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');
+  var status = root.querySelector('#us-linear-collection-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 });
@@ -29,7 +33,7 @@ export function initPersonalIntegrations() {
       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); }); };
+      button.onclick = function () { selectIntegrationEditor('linear:' + connection.id, '#us-linear-editor', 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);
@@ -46,14 +50,10 @@ export function initPersonalIntegrations() {
   }
   function close() {
     var id = store.get('personalLinearEditing');
-    store.set({personalLinearEditing:null,personalLinearDirty:false}); form.reset(); form.hidden = true; render();
+    closePersonalLinearEditor(); 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);
-  }
   // Only an open editor holds a draft; autofill or restore into the hidden form is not an edit.
   form.oninput = function () { if (!store.get('personalLinearEditing')) return; store.set({personalLinearDirty: !!key.value || name.value !== store.get('personalLinearOriginalName')}); };
   async function save(disconnect) {
@@ -69,20 +69,20 @@ export function initPersonalIntegrations() {
       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.');
+      store.set({personalLinearConnections:entries, githubWorkRefresh:null}); busy(false); 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); };
+  add.onclick = function () { selectIntegrationEditor('linear:new', '#us-linear-editor', function () { edit(null); }); };
+  root.querySelector('#us-linear-cancel').onclick = function () { selectIntegrationEditor(null, null); };
   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();
+    } else if (state.personalLinearConnections !== previous.personalLinearConnections || state.personalLinearEditing !== previous.personalLinearEditing) render();
   });
 }
 
@@ -103,3 +103,14 @@ export async function loadPersonalIntegrations() {
     status.textContent = error.message; status.dataset.state = 'error'; retry.hidden = false;
   }
 }
+
+export function closePersonalLinearEditor() {
+  var id = store.get('personalLinearEditing');
+  var form = document.getElementById('us-linear-editor');
+  store.set({personalLinearEditing:null,personalLinearDirty:false,personalLinearNewId:null});
+  if (form) { form.reset(); form.hidden = true; }
+  clearIntegrationEditor('linear:' + id);
+  var row = Array.from(document.querySelectorAll('#us-linear-connections [data-connection-id]')).find(function (el) { return el.dataset.connectionId === id; });
+  var trigger = row ? row.querySelector('button') : document.getElementById('us-linear-add');
+  if (trigger) trigger.focus();
+}

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

@@ -1,3 +1,4 @@
+import { loadGithubIntegration, leaveGithubIntegration } from './user-settings-github.js';
 import { initPersonalProviders, loadPersonalProviders, leavePersonalProviders } from './user-settings-providers.js';
 import { initPersonalIntegrations, loadPersonalIntegrations } from './user-settings-integrations.js';
 import { getWs } from './ws-ref.js';
@@ -23,22 +24,19 @@ export function buildUserSettingsLayout() {
   var accountNotifications=document.createElement('h3');accountNotifications.textContent='Account preferences';notifications.querySelector('.settings-card').before(accountNotifications);
   var chat = section('us-chat');
   var providers = document.createElement('div'); providers.className = 'us-section'; providers.dataset.section = 'us-providers';
-  providers.innerHTML = '<h2>AI providers</h2><p class="settings-hint">Set up coding agents on the server and manage your personal audio transcription API keys.</p><div class="settings-section-heading"><h3 id="coding-agents" data-settings-section>Coding agents</h3><span id="us-provider-refresh"></span></div><div id="us-coding-agents"></div><h3 id="api-connections" data-settings-section>API connections</h3><div id="us-voice-settings"></div>';
+  providers.innerHTML = '<h2>AI providers</h2><p class="settings-hint">Set up coding agents, choose AI defaults and execution preferences, and manage your personal audio transcription API keys.</p><section class="settings-section-group"><div class="settings-section-heading"><h3 id="coding-agents" data-settings-section>Coding agents</h3><span id="us-provider-refresh"></span></div><div id="us-coding-agents"></div></section><section class="settings-section-group"><h3 id="ai-defaults" data-settings-section>AI defaults</h3><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></section><section class="settings-section-group" id="us-execution-settings"><h3 id="execution-behavior" data-settings-section>Execution &amp; permissions</h3></section><section class="settings-section-group"><h3 id="api-connections" data-settings-section>API connections</h3><div id="us-voice-settings"></div></section><section class="settings-section-group" id="us-experimental-settings"><h3 id="experimental-features" data-settings-section>Experimental features</h3></section>';
   root.querySelector('.us-modal-content').appendChild(providers);
-  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'); ai.lastElementChild.id = 'execution-behavior';
-  ['us-auto-continue'].forEach(function (id) {ai.appendChild(document.getElementById(id).closest('.settings-card'));});
+  var execution = document.getElementById('us-execution-settings');
+  execution.appendChild(document.getElementById('us-auto-continue').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'));
+  heading(execution, '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.');
+  execution.appendChild(document.getElementById('us-claude-allow-list').closest('.settings-card'));
   var agent = document.createElement('div'); agent.className = 'us-section'; agent.dataset.section = 'us-agent';
   agent.innerHTML = '<h2>Agent behavior</h2><p class="settings-hint">Choose how your Project Drivers use Clay memory, context, tools and connections. These choices apply to your own Driver conversations.</p><div id="us-agent-behavior"></div>';
   root.querySelector('.us-modal-content').appendChild(agent);
   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'));ai.appendChild(experiments);experiments.id = 'experimental-features';section('us-experimental').remove();chat.remove();
+  var experiments = document.createElement('details'); experiments.className = 'us-experiments'; experiments.innerHTML = '<summary>Capsules</summary><p class="settings-hint">Personal opt-ins for features that may change.</p>';
+  experiments.appendChild(document.getElementById('us-capsules-enabled').closest('.settings-card'));document.getElementById('us-experimental-settings').appendChild(experiments);section('us-experimental').remove();chat.remove();
   initPersonalProviders();
   section('us-email').remove();
   initPersonalIntegrations();
@@ -49,13 +47,19 @@ export function buildUserSettingsLayout() {
   root.querySelectorAll('.layout-option-icon').forEach(function (el) {el.remove();});
 }
 export function loadUserSettingsExtras(page) {
-  if (page === 'us-integrations') loadPersonalIntegrations();
-  if (page === 'us-providers') { loadSpeechSettings(); loadPersonalProviders(); } else leavePersonalProviders();
+  if (page === 'us-integrations') { loadPersonalIntegrations(); loadGithubIntegration(); }
+  else leaveGithubIntegration();
+  if (page === 'us-providers' && !store.get('personalAiSettingsMounted')) {
+    store.set({ personalAiSettingsMounted: true });
+    loadSpeechSettings(); loadPersonalProviders();
+    mountDefaultAi(document.getElementById('us-default-ai')); requestDefaultAi();
+    var ws = getWs(); if (ws && ws.readyState === 1) ws.send(JSON.stringify({type:'get_claude_allow_list'}));
+  } else if (page !== 'us-providers') leavePersonalAiPage();
   if (page === 'us-agent') mountAgentBehavior(document.getElementById('us-agent-behavior'));
-  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 leaveAgentBehaviorPage() {unmountAgentBehavior();resetAgentBehavior();}
-export function finishUserSettingsExtras() {leavePersonalProviders();leaveAgentBehaviorPage();closeSpeechPicker();unmountDefaultAi(document.getElementById('us-default-ai'));}
+function leavePersonalAiPage() {leavePersonalProviders();closeSpeechPicker();unmountDefaultAi(document.getElementById('us-default-ai'));store.set({personalAiSettingsMounted:false});}
+export function finishUserSettingsExtras() {leaveGithubIntegration();leavePersonalAiPage();leaveAgentBehaviorPage();}
 // Returns the draft prompt for leaving one personal page (or every page when
 // pageId is omitted); the shell shows it with the shared confirmation.
 export function personalLeavePrompt(pageId) {
@@ -67,11 +71,10 @@ export function personalLeavePrompt(pageId) {
   var key = document.getElementById('us-linear-key');
   var keyDraft = key && key.value && store.get('personalLinearEditing') && !(key.form && key.form.hidden);
   var dirty = leaving('us-integrations') && (store.get('personalEmailDirty') || store.get('personalLinearDirty') || keyDraft) ||
-    leaving('us-providers') && store.get('userVoiceDirty') ||
+    leaving('us-providers') && (store.get('userVoiceDirty') || store.get('defaultAiDraftDirty') || store.get('userAllowDirty')) ||
     leaving('us-notifications') && store.get('notificationDraft') ||
-    leaving('us-appearance') && (store.get('appearanceDraft') || store.get('userTerminalDirty')) ||
-    leaving('us-account') && (store.get('userProfileDirty') || pinDirty) ||
-    leaving('us-ai') && (store.get('defaultAiDraftDirty') || store.get('userAllowDirty'));
+    leaving('us-appearance') && (store.get('appearanceDraft') || store.get('appearanceColorEditor') || store.get('userTerminalDirty')) ||
+    leaving('us-account') && (store.get('userProfileDirty') || pinDirty);
   if (!dirty) return null;
   return { message: 'Your unsaved changes will remain in this tab. Leave this editor and keep the draft?', action: 'Keep draft and leave' };
 }

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

@@ -1,9 +1,12 @@
+import { createWorkspaceBackgroundGallery } from './workspace-background-gallery.js';
 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 syncBackground = createWorkspaceBackgroundGallery(root);
+  root.appendChild(root.querySelector('#us-appearance-status'));
   var mode = root.querySelector('select');
   mode.onchange = function () { selectAppearanceMode(mode.value); };
   ['light', 'dark'].forEach(function (variant) {
@@ -13,6 +16,7 @@ export function initPersonalThemes(root) {
     root.querySelector('.us-theme-pair').appendChild(group);
   });
   function sync() {
+    syncBackground();
     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();
@@ -31,8 +35,8 @@ export function initPersonalThemes(root) {
   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 = !state.legacyAppearanceAvailable; retry.hidden = !state.appearanceSaveError || !!state.appearanceColorEditor;
+    if (state.appearanceDraft !== previous.appearanceDraft || state.appearancePreference !== previous.appearancePreference || state.appearanceColorEditor !== previous.appearanceColorEditor || state.appearanceColorPreview !== previous.appearanceColorPreview || state.appearancePendingSaves !== previous.appearancePendingSaves) sync();
   });
   legacy.hidden = !store.get('legacyAppearanceAvailable'); onThemeChange(sync); sync(); enhanceSettingsSelects(root);
 }

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

@@ -1,3 +1,4 @@
+import { integrationEditorBusy } from './personal-integration-editor.js';
 import { initPersonalAppearance } from './user-settings-appearance.js';
 import { initAccountSessions, resetAccountSessions } from './user-settings-sessions.js';
 import { initPersonalVoice } from './user-settings-voice.js';
@@ -38,7 +39,7 @@ export function initUserSettings() {
     enter: function () { populateAccount(); },
     activate: function (page) { switchSection(page); },
     leave: function () { currentPage = null; resetAccountSessions(); finishUserSettingsExtras(); },
-    busy: function () { return store.get('speechPopup') ? 'Finish or close the open voice settings editor first.' : ''; },
+    busy: function () { if (integrationEditorBusy()) return 'Wait for the current connection operation to finish.'; return store.get('speechPopup') ? 'Finish or close the open voice settings editor first.' : ''; },
     leavePrompt: function (kind, pageId) { return personalLeavePrompt(kind === 'page' ? pageId : undefined); }
   });
   pinForm = document.getElementById('us-pin-form');

package/lib/public/modules/workspace-background-gallery.js

@@ -0,0 +1,92 @@
+import { store } from './store.js';
+import { workspaceBackgrounds, selectAppearanceBackground } from './appearance-preferences.js';
+import { createCustomColorEditor, openCustomColor, cancelCustomColor } from './workspace-custom-colors.js';
+import { registerTooltip } from './tooltip.js';
+
+function chevron(right) { return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="' + (right ? 'm8 5 5 5-5 5' : 'm12 5-5 5 5 5') + '" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>'; }
+export function createWorkspaceBackgroundGallery(root) {
+  var gallery = document.createElement('div');
+  gallery.id = 'us-workspace-background'; gallery.className = 'us-background-gallery';
+  gallery.setAttribute('role', 'radiogroup'); gallery.setAttribute('aria-label', 'Workspace background');
+  gallery.setAttribute('aria-describedby', 'us-background-help');
+  gallery.innerHTML = '<h3>Workspace background</h3><p id="us-background-help" class="settings-hint">Choose a color or picture. Both follow your light or dark appearance.</p><div class="us-background-palette"><button type="button" class="us-palette-arrow" data-step="-1" aria-label="Previous colors" hidden>' + chevron(false) + '</button><div class="us-background-colors"></div><button type="button" class="us-palette-arrow" data-step="1" aria-label="Next colors" hidden>' + chevron(true) + '</button><button type="button" id="us-add-color" class="us-palette-add" aria-label="Add custom color" aria-haspopup="dialog" aria-expanded="false" aria-controls="us-custom-color-editor"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></button></div><h4>Pictures</h4><div class="us-background-pictures"></div>';
+  var strip = gallery.querySelector('.us-background-colors');
+  var add = gallery.querySelector('#us-add-color'); registerTooltip(add, 'Add custom color');
+  add.dataset.tipSuppressWhenOpen = '#us-custom-color-editor';
+  function addChoice(color, container) {
+    var button = document.createElement('button'); button.type = 'button'; button.className = 'us-background-choice';
+    button.dataset.backgroundChoice = color ? color.id : 'workshop';
+    button.setAttribute('role', 'radio'); button.setAttribute('aria-label', color ? color.name : 'Workshop');
+    var preview = document.createElement('span'); preview.className = 'us-background-sample'; preview.setAttribute('aria-hidden', 'true');
+    if (color) { preview.style.setProperty('--swatch-light', color.light); preview.style.setProperty('--swatch-dark', color.dark); registerTooltip(button, color.name); }
+    else { preview.classList.add('us-background-workshop'); }
+    button.appendChild(preview);
+    if (!color) { var label = document.createElement('span'); label.textContent = 'Workshop'; button.appendChild(label); }
+    container.appendChild(button);
+    button.onclick = function () { selectAppearanceBackground(color ? 'plain' : 'workshop', color ? color.id : undefined); };
+  }
+  function overflow() {
+    var overflowing = strip.scrollWidth > strip.clientWidth + 1;
+    gallery.querySelectorAll('[data-step]').forEach(function (button) {
+      button.hidden = !overflowing;
+      button.disabled = button.dataset.step === '-1' ? strip.scrollLeft < 1 : strip.scrollLeft + strip.clientWidth >= strip.scrollWidth - 1;
+    });
+  }
+  gallery.querySelectorAll('[data-step]').forEach(function (button) {
+    registerTooltip(button, button.getAttribute('aria-label'));
+    button.onclick = function () { strip.scrollBy({ left: Number(button.dataset.step) * strip.clientWidth * 0.8 }); };
+  });
+  strip.onscroll = overflow;
+  function reveal(button) {
+    if (!button || !strip.contains(button) || !strip.clientWidth) return;
+    var box = button.getBoundingClientRect(), bounds = strip.getBoundingClientRect();
+    if (box.left < bounds.left) strip.scrollLeft -= bounds.left - box.left;
+    if (box.right > bounds.right) strip.scrollLeft += box.right - bounds.right;
+  }
+  function layout() {
+    overflow();
+    var visible = strip.clientWidth > 0;
+    if (visible && (strip.dataset.visible !== 'true' || strip.dataset.revealPending === 'true')) {
+      reveal(strip.querySelector('[aria-checked="true"]'));
+      delete strip.dataset.revealPending;
+    }
+    strip.dataset.visible = String(visible);
+  }
+  strip.addEventListener('focusin', function (event) { reveal(event.target); });
+  addChoice(null, gallery.querySelector('.us-background-pictures'));
+  add.onclick = function () { if (store.get('appearanceColorEditor')) cancelCustomColor(); else openCustomColor(); };
+  var syncEditor = createCustomColorEditor(gallery, add);
+  var buttons = [], renderedColors = null;
+  gallery.onkeydown = function (event) {
+    var index = buttons.indexOf(event.target); if (index < 0) return;
+    var target;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') target = (index + 1) % buttons.length;
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') target = (index + buttons.length - 1) % buttons.length;
+    if (event.key === 'Home') target = 0;
+    if (event.key === 'End') target = buttons.length - 1;
+    if (target === undefined) return;
+    event.preventDefault(); buttons[target].focus({ preventScroll: strip.contains(buttons[target]) }); buttons[target].click();
+  };
+  root.appendChild(gallery);
+  new ResizeObserver(layout).observe(strip);
+  return function () {
+    var current = store.get('appearanceDraft') || store.get('appearancePreference') || {};
+    var colors = workspaceBackgrounds.colors.concat(current.customBackgroundColors || []);
+    if (renderedColors !== JSON.stringify(colors)) {
+      var focused = document.activeElement && document.activeElement.dataset.backgroundChoice;
+      renderedColors = JSON.stringify(colors); strip.replaceChildren();
+      colors.forEach(function (color) { addChoice(color, strip); });
+      if (focused) { var restored = Array.from(strip.children).find(function (button) { return button.dataset.backgroundChoice === focused; }); if (restored) restored.focus({ preventScroll: true }); }
+    }
+    buttons = Array.from(gallery.querySelectorAll('[role="radio"]'));
+    var editor = store.get('appearanceColorEditor'); add.disabled = !!store.get('appearancePendingSaves');
+    add.setAttribute('aria-expanded', String(!!editor)); syncEditor();
+    var selected = current.background === 'workshop' ? 'workshop' : workspaceBackgrounds.getColor(current.backgroundColor, current.customBackgroundColors).id;
+    if (strip.dataset.selection !== selected) { strip.dataset.selection = selected; strip.dataset.revealPending = 'true'; }
+    buttons.forEach(function (button) {
+      var checked = button.dataset.backgroundChoice === selected;
+      button.setAttribute('aria-checked', String(checked)); button.tabIndex = checked ? 0 : -1; button.disabled = !!(editor && editor.saving);
+    });
+    layout();
+  };
+}

package/lib/public/modules/workspace-custom-colors.js

@@ -0,0 +1,132 @@
+import { store } from './store.js';
+import { workspaceBackgrounds, queueAppearanceSave, appearanceStatus } from './appearance-preferences.js';
+import { registerTooltip, dismissTooltip } from './tooltip.js';
+
+function preference() { return store.get('appearanceDraft') || store.get('appearancePreference') || {}; }
+function clamp(value, max) { return Math.max(0, Math.min(max, value)); }
+function hsv(hex) {
+  var rgb = hex.slice(1).match(/../g).map(function (part) { return parseInt(part, 16) / 255; });
+  var max = Math.max.apply(null, rgb), min = Math.min.apply(null, rgb), delta = max - min, hue = 0;
+  if (delta) {
+    if (max === rgb[0]) hue = ((rgb[1] - rgb[2]) / delta) % 6;
+    else if (max === rgb[1]) hue = (rgb[2] - rgb[0]) / delta + 2;
+    else hue = (rgb[0] - rgb[1]) / delta + 4;
+  }
+  return { hue: (hue * 60 + 360) % 360, saturation: max ? delta / max * 100 : 0, value: max * 100 };
+}
+function hex(color) {
+  var chroma = color.value / 100 * color.saturation / 100;
+  var x = chroma * (1 - Math.abs((color.hue / 60) % 2 - 1)), m = color.value / 100 - chroma;
+  var rgb = color.hue < 60 ? [chroma,x,0] : color.hue < 120 ? [x,chroma,0] : color.hue < 180 ? [0,chroma,x] : color.hue < 240 ? [0,x,chroma] : color.hue < 300 ? [x,0,chroma] : [chroma,0,x];
+  return '#' + rgb.map(function (value) { return Math.round((value + m) * 255).toString(16).padStart(2, '0'); }).join('').toUpperCase();
+}
+export function openCustomColor() {
+  if (store.get('appearancePendingSaves') || store.get('appearanceColorEditor')) return;
+  var current = preference(), source = workspaceBackgrounds.getColor(current.backgroundColor, current.customBackgroundColors);
+  var variant = document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
+  var draft = Object.assign({ id: 'custom-' + crypto.randomUUID(), light: source.light.toUpperCase(), dark: source.dark.toUpperCase(), variant: variant, saving: false, error: '', previousStatus: store.get('appearanceSaveStatus') || '', previousError: !!store.get('appearanceSaveError') }, hsv(source[variant]));
+  store.set({ appearanceColorEditor: draft }); dismissTooltip();
+  document.getElementById((current.customBackgroundColors || []).length >= workspaceBackgrounds.maxCustom ? 'us-color-cancel' : 'us-color-area').focus();
+}
+export function cancelCustomColor(restoreFocus) {
+  var editor = store.get('appearanceColorEditor'); if (!editor || editor.saving) return;
+  store.set({ appearanceColorEditor: null, appearanceColorPreview: null });
+  appearanceStatus(editor.previousStatus, editor.previousError);
+  if (restoreFocus !== false) document.getElementById('us-add-color').focus();
+}
+function updateEditor(change, visual) {
+  var editor = store.get('appearanceColorEditor'); if (!editor || editor.saving) return;
+  var next = Object.assign({}, editor, change, { error: '' });
+  if (visual) next[next.variant] = hex(next);
+  var custom = workspaceBackgrounds.normalizeCustom([{ id: next.id, name: next.light + ' / ' + next.dark, light: next.light, dark: next.dark }]);
+  store.set({ appearanceColorEditor: next, appearanceColorPreview: custom ? custom[0] : store.get('appearanceColorPreview') });
+}
+async function saveEditor() {
+  var editor = store.get('appearanceColorEditor'); if (!editor || editor.saving) return;
+  var custom = workspaceBackgrounds.normalizeCustom([{ id: editor.id, name: editor.light + ' / ' + editor.dark, light: editor.light, dark: editor.dark }]);
+  if (!custom) { store.set({ appearanceColorEditor: Object.assign({}, editor, { error: 'Use six-digit HEX colors, such as #E9CBD4.' }) }); document.getElementById('us-color-hex').focus(); return; }
+  var current = preference(), colors = (current.customBackgroundColors || []).concat(custom);
+  if (!workspaceBackgrounds.normalizeCustom(colors)) return;
+  var values = Object.assign({}, current, { customBackgroundColors: colors, background: 'plain', backgroundColor: editor.id });
+  store.set({ appearanceColorEditor: Object.assign({}, editor, { saving: true, error: '' }) });
+  var saved = await queueAppearanceSave(values), active = store.get('appearanceColorEditor');
+  if (!active || active.id !== editor.id) return;
+  if (saved) {
+    store.set({ appearanceColorEditor: null, appearanceColorPreview: null });
+    var button = Array.from(document.querySelectorAll('[data-background-choice]')).find(function (node) { return node.dataset.backgroundChoice === editor.id; });
+    if (button) button.focus({ preventScroll: true });
+  } else {
+    if (store.get('appearanceDraft') === values) {
+      var acknowledged = store.get('appearancePreference') || {};
+      var unchanged = ['theme','mode','lightTheme','darkTheme','background','backgroundColor','customBackgroundColors'].every(function (key) { return JSON.stringify(current[key] || null) === JSON.stringify(acknowledged[key] || null); });
+      store.set({ appearanceDraft: unchanged ? null : current });
+    }
+    store.set({ appearanceColorEditor: Object.assign({}, active, { saving: false, error: 'Could not save. Your preview remains. Try Add again.' }) });
+    document.getElementById('us-color-save').focus();
+  }
+}
+export function createCustomColorEditor(host, anchor) {
+  var form = document.createElement('form'); form.id = 'us-custom-color-editor'; form.className = 'us-color-popover'; form.hidden = true;
+  form.setAttribute('role', 'dialog'); form.setAttribute('aria-label', 'Add color');
+  form.innerHTML = '<div class="us-color-top"><div class="us-color-modes" role="group" aria-label="Color appearance"><button type="button" data-variant="light" aria-label="Light color"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="3"/><path d="M10 1v2m0 14v2M1 10h2m14 0h2M4 4l1.5 1.5m9 9L16 16M4 16l1.5-1.5m9-9L16 4"/></svg></button><button type="button" data-variant="dark" aria-label="Dark color"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M16.7 12A7 7 0 0 1 8 3.3 7 7 0 1 0 16.7 12Z"/></svg></button></div><span class="us-color-preview" aria-hidden="true"></span></div><div class="us-color-controls"><div id="us-color-area" class="us-color-area" role="slider" tabindex="0" aria-label="Saturation and brightness" aria-valuemin="0" aria-valuemax="100" aria-describedby="us-color-help"><span></span></div><span id="us-color-help" class="sr-only">Left and right adjust saturation. Up and down adjust brightness.</span><input id="us-color-hue" type="range" min="0" max="359" step="1" aria-label="Hue"><label for="us-color-hex" class="sr-only">HEX color</label><input id="us-color-hex" class="us-text-input" maxlength="7" spellcheck="false" autocomplete="off" aria-describedby="us-color-error"></div><p id="us-color-error" class="settings-status" role="status"></p><div class="settings-form-actions"><button id="us-color-save" class="us-btn" type="submit">Add</button><button id="us-color-cancel" class="settings-btn-sm" type="button">Cancel</button></div>';
+  var area = form.querySelector('#us-color-area'), hue = form.querySelector('#us-color-hue'), input = form.querySelector('#us-color-hex');
+  function position() {
+    if (form.hidden) return;
+    var box = anchor.getBoundingClientRect();
+    var left = clamp(box.right - form.offsetWidth, window.innerWidth - form.offsetWidth - 8);
+    var top = box.bottom + 6;
+    if (top + form.offsetHeight > window.innerHeight - 8) top = box.top - form.offsetHeight - 6;
+    form.style.left = Math.max(8, left) + 'px'; form.style.top = Math.max(8, top) + 'px';
+  }
+  form.querySelectorAll('[data-variant]').forEach(function (button) {
+    registerTooltip(button, button.getAttribute('aria-label'));
+    button.onclick = function () { var editor = store.get('appearanceColorEditor'); if (editor && !editor.saving) updateEditor(Object.assign({ variant: button.dataset.variant }, hsv(workspaceBackgrounds.normalizeHex(editor[button.dataset.variant]) || '#808080'))); };
+  });
+  input.oninput = function () {
+    var editor = store.get('appearanceColorEditor'), change = {}; if (!editor) return;
+    change[editor.variant] = input.value; var valid = workspaceBackgrounds.normalizeHex(input.value);
+    if (valid) Object.assign(change, hsv(valid)); updateEditor(change);
+  };
+  hue.oninput = function () { updateEditor({ hue: Number(hue.value) }, true); };
+  function point(event) {
+    var editor = store.get('appearanceColorEditor'); if (!editor || editor.saving) return;
+    var box = area.getBoundingClientRect();
+    updateEditor({ saturation: clamp((event.clientX - box.left) / box.width * 100, 100), value: clamp(100 - (event.clientY - box.top) / box.height * 100, 100) }, true);
+  }
+  area.onpointerdown = function (event) { if (event.button !== 0) return; event.preventDefault(); area.focus(); area.setPointerCapture(event.pointerId); point(event); };
+  area.onpointermove = function (event) { if (area.hasPointerCapture(event.pointerId)) point(event); };
+  area.onkeydown = function (event) {
+    var editor = store.get('appearanceColorEditor'); if (!editor) return;
+    var change = {}, amount = event.shiftKey ? 10 : 1;
+    if (event.key === 'ArrowLeft') change.saturation = clamp(editor.saturation - amount, 100);
+    if (event.key === 'ArrowRight') change.saturation = clamp(editor.saturation + amount, 100);
+    if (event.key === 'ArrowUp') change.value = clamp(editor.value + amount, 100);
+    if (event.key === 'ArrowDown') change.value = clamp(editor.value - amount, 100);
+    if (!Object.keys(change).length) return;
+    event.preventDefault(); updateEditor(change, true);
+  };
+  form.querySelector('#us-color-cancel').onclick = function () { cancelCustomColor(); };
+  form.onsubmit = function (event) { event.preventDefault(); saveEditor(); };
+  form.onkeydown = function (event) { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); cancelCustomColor(); } };
+  document.addEventListener('pointerdown', function (event) { if (!form.hidden && !form.contains(event.target) && !anchor.contains(event.target)) cancelCustomColor(false); }, true);
+  form.addEventListener('focusout', function () { setTimeout(function () { if (!form.hidden && !form.contains(document.activeElement) && document.activeElement !== anchor) cancelCustomColor(false); }, 0); });
+  window.addEventListener('resize', position); document.addEventListener('scroll', position, true);
+  host.appendChild(form);
+  return function () {
+    var editor = store.get('appearanceColorEditor'); form.hidden = !editor; if (!editor) return;
+    var limit = (preference().customBackgroundColors || []).length >= workspaceBackgrounds.maxCustom && !editor.saving;
+    form.querySelector('.us-color-controls').hidden = limit; form.querySelector('.us-color-top').hidden = limit;
+    form.querySelectorAll('[data-variant]').forEach(function (button) { button.setAttribute('aria-pressed', String(editor.variant === button.dataset.variant)); });
+    input.value = editor[editor.variant]; input.setAttribute('aria-label', (editor.variant === 'light' ? 'Light' : 'Dark') + ' HEX'); input.setAttribute('aria-invalid', String(!workspaceBackgrounds.normalizeHex(input.value)));
+    form.querySelector('.us-color-preview').style.backgroundColor = workspaceBackgrounds.normalizeHex(input.value) || 'transparent';
+    area.style.setProperty('--picker-hue', String(editor.hue));
+    area.querySelector('span').style.left = editor.saturation + '%'; area.querySelector('span').style.top = (100 - editor.value) + '%';
+    area.setAttribute('aria-valuenow', String(Math.round(editor.saturation)));
+    area.setAttribute('aria-valuetext', 'Saturation ' + Math.round(editor.saturation) + '%, brightness ' + Math.round(editor.value) + '%');
+    hue.value = Math.round(editor.hue); hue.setAttribute('aria-valuetext', hue.value + ' degrees');
+    form.querySelector('#us-color-error').textContent = limit ? '12 custom colors saved.' : editor.error || (editor.saving ? 'Saving…' : '');
+    form.querySelectorAll('input,button').forEach(function (control) { control.disabled = editor.saving; });
+    form.querySelector('#us-color-save').hidden = limit;
+    position();
+  };
+}

package/lib/public/modules/you-activity.js

@@ -2,6 +2,7 @@
 import { store } from './store.js';
 import { sendYou, openYou } from './you.js';
 import { relativeTime } from './project-logs-render.js';
+import { registerTooltip } from './tooltip.js';
 
 function state() { return store.get('youActivity') || {}; }
 function put(values) { store.set({ youActivity: Object.assign({}, state(), values) }); }
@@ -24,7 +25,7 @@ function announce(message) {
   put({ active: true });
   el('you-activity').classList.add('announcing');
   el('you-activity-toggle').setAttribute('aria-label', message);
-  el('you-activity-toggle').title = message;
+  registerTooltip(el('you-activity-toggle'), message);
   var characters = Array.from(message);
   var index = 0;
   var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -94,7 +95,8 @@ export function handleYouActivity(msg) {
 }
 export function initYouActivity() {
   var host = document.createElement('div'); host.id = 'you-activity';
-  host.innerHTML = '<button id="you-activity-toggle" type="button" aria-expanded="false" aria-controls="you-activity-history"><span id="you-activity-text" aria-hidden="true"></span></button>' +
+  host.innerHTML = '<button id="you-activity-toggle" type="button" aria-expanded="false" aria-controls="you-activity-history">' +
+    '<span id="you-activity-text" aria-hidden="true"></span><svg class="you-activity-chevron" viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg></button>' +
     '<section id="you-activity-history" class="hidden" aria-label="Clay’s memory activity"><header><strong>Clay’s memory</strong><button id="you-activity-close" type="button" aria-label="Close memory activity">Close</button></header>' +
     '<div id="you-activity-list"></div><button id="you-activity-more" class="hidden" type="button">Load earlier activity</button><button id="you-activity-open" type="button">Open Me</button></section>';
   document.querySelector('.top-bar-left-pills').prepend(host);