clay-server 5.5.0-beta.4 → 5.5.0-beta.6

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';
@@ -46,7 +47,8 @@ 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-integrations') { loadPersonalIntegrations(); loadGithubIntegration(); }
+  else leaveGithubIntegration();
   if (page === 'us-providers' && !store.get('personalAiSettingsMounted')) {
     store.set({ personalAiSettingsMounted: true });
     loadSpeechSettings(); loadPersonalProviders();
@@ -57,7 +59,7 @@ export function loadUserSettingsExtras(page) {
 }
 export function leaveAgentBehaviorPage() {unmountAgentBehavior();resetAgentBehavior();}
 function leavePersonalAiPage() {leavePersonalProviders();closeSpeechPicker();unmountDefaultAi(document.getElementById('us-default-ai'));store.set({personalAiSettingsMounted:false});}
-export function finishUserSettingsExtras() {leavePersonalAiPage();leaveAgentBehaviorPage();}
+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) {
@@ -71,7 +73,7 @@ export function personalLeavePrompt(pageId) {
   var dirty = leaving('us-integrations') && (store.get('personalEmailDirty') || store.get('personalLinearDirty') || keyDraft) ||
     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-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/view-presentation-state.js

@@ -21,6 +21,8 @@ export async function restoreViewPresentation(view, key) {
   var run = store.get('savedWorkspaceRuntime');
   if (run && run.key === key) run.presentationApplied = true;
   var state = presentation(view.workspace), pane = view.workspace.panes.find(function (p) { return p.instanceId === state.expandedPaneId && p.open; });
+  // An expanded tool that failed to restore must not stay fullscreen over the sessions.
+  if (pane && run && run.key === key && run.unavailable && run.unavailable[paneOwner(pane)]) pane = null;
   store.set({ savedWorkspaceApplying: true });
   try {
     store.set({ projectSplitViewFocusedOrigin: state.focusedSessionOriginId, savedViewExpandedOwner: pane ? paneOwner(pane) : null });

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