clay-server 5.2.0-beta.8 → 5.2.0

package/lib/public/modules/theme.js

@@ -222,6 +222,7 @@ var customSet = {};   // ids that came from ~/.clay/themes/
 var themesLoaded = false;
 var currentThemeId = DEFAULT_DARK_THEME_ID;
 var changeCallbacks = [];
+var externalThemeId = null;  // set by the parent shell for pane iframes
 var STORAGE_KEY = "clay-theme";
 var MODE_KEY = "clay-mode";        // "light" | "dark" | null (system)
 var SKIN_KEY = "clay-skin";        // theme id within current variant pair
@@ -274,6 +275,23 @@ export function onThemeChange(fn) {
   changeCallbacks.push(fn);
 }
 
+// The appearance this frame currently shows, for the parent shell to hand to
+// its pane iframes. Never persisted from here.
+export function getAppearanceSnapshot() {
+  var pref = store.get('appearanceDraft') || store.get('appearancePreference') || {};
+  return { themeId: currentThemeId, userId: store.get('myUserId') || null,
+    preference: { configured: !!pref.configured || !!pref.mode || !!pref.theme, theme: pref.theme || null, mode: pref.mode || null,
+      lightTheme: pref.lightTheme || null, darkTheme: pref.darkTheme || null } };
+}
+
+// A pane iframe mirrors the parent's live appearance. The server remains the
+// only persisted source, so this applies the view without saving anything.
+export function applyExternalAppearance(snapshot) {
+  externalThemeId = snapshot.themeId;
+  store.set({ appearancePreference: snapshot.preference, appearanceDraft: null });
+  applyTheme(snapshot.themeId);
+}
+
 export function getThemes() {
   // Return a copy
   var all = {};
@@ -367,7 +385,7 @@ function loadThemes() {
 
     // Always apply the current theme now that real data is loaded
     // (before this, only defaultExactVars was used as fallback)
-    applyTheme(currentThemeId);
+    applyTheme(externalThemeId && getTheme(externalThemeId) ? externalThemeId : currentThemeId);
   }).catch(function () {
     // API unavailable — keep the embedded Clay Studio pair.
     themes[DEFAULT_DARK_THEME_ID] = defaultDarkFallback;
@@ -482,8 +500,13 @@ function updateToggleIcon() {
   // User settings toggle
   var usToggle = document.getElementById("us-theme-toggle");
   if (usToggle) usToggle.checked = isLight;
-  // User island button is now a static "skins / themes" trigger; no
-  // icon swap on mode change.
+  var quickToggle = document.getElementById("appearance-mode-toggle");
+  if (quickToggle) {
+    var label = isLight ? "Switch to dark mode" : "Switch to light mode";
+    quickToggle.setAttribute("aria-label", label);
+    quickToggle.title = label;
+    quickToggle.innerHTML = '<i data-lucide="' + (isLight ? "moon" : "sun") + '" class="cursor-share-icon" aria-hidden="true"></i>';
+  }
   refreshIcons();
 }
 
@@ -649,6 +672,9 @@ export function initTheme() {
     }
   }
 
+  var quickToggle = document.getElementById("appearance-mode-toggle");
+  if (quickToggle) quickToggle.addEventListener("click", toggleDarkMode);
+
   // Set initial toggle icon
   updateToggleIcon();
 
@@ -711,6 +737,8 @@ async function loadAppearance() {
     if (!response.ok) throw new Error('Appearance preferences unavailable.');
     var data = await response.json();
     if(store.get('appearanceSaveRequest'))return;
+    // A pane that already mirrors its parent's live view is newer than this GET, which may predate a pending save.
+    if(externalThemeId)return;
     if (data.configured) {store.set({appearancePreference:data});applyTheme(themeIdForMode(data.mode || getSystemMode()));}
     else {
       var legacy = null;try {legacy = localStorage.getItem(STORAGE_KEY);}catch(error){}

package/lib/public/modules/tools.js

@@ -9,6 +9,7 @@ import { openFile } from './filebrowser.js';
 import { mateAvatarUrl } from './avatar.js';
 import { getChatLayout } from './theme.js';
 import { store } from './store.js';
+import { currentPaneReview } from './pane-binding.js';
 import { applyPermissionHints } from './permission-hints.js';
 import { VENDOR_NAMES } from './app-rendering.js';
 import { startThinkingSegment, appendThinkingText, stopThinkingSegment, resetThinkingTurn, clearThinkingState, saveThinkingState, restoreThinkingState, updateThinkingTokenEstimate } from './thinking-lifecycle.js';
@@ -394,12 +395,13 @@ export function renderAskUserQuestion(toolId, input) {
   skipBtn.className = "ask-user-skip";
   skipBtn.textContent = "Skip";
   skipBtn.addEventListener("click", function () {
+    if (!currentPaneReview(container)) return;
     if (container.classList.contains("answered")) return;
     container.classList.add("answered");
     markAskUserRequestAnswered(toolId);
     enableMainInput();
     if (ctx.ws && ctx.connected) {
-      ctx.ws.send(JSON.stringify({ type: "stop" }));
+      ctx.ws.send(JSON.stringify({ type: "stop", paneBinding: container.paneBinding || undefined }));
     }
   });
   actions.appendChild(skipBtn);
@@ -419,6 +421,7 @@ export function renderAskUserQuestion(toolId, input) {
     container.appendChild(mateContentWrap);
   }
 
+  container.paneBinding = store.get("panePendingBinding") || store.get("paneCommittedBinding") || null;
   ctx.addToMessages(container);
   disableMainInput();
   ctx.setActivity(null);
@@ -436,6 +439,7 @@ export function enableMainInput() {
 }
 
 function submitAskUserAnswer(container, toolId, questions, answers, multiSelections) {
+  if (!currentPaneReview(container)) return;
   if (container.classList.contains("answered") || container.dataset.askUserSubmitted === "true") return;
 
   var result = {};
@@ -461,6 +465,7 @@ function submitAskUserAnswer(container, toolId, questions, answers, multiSelecti
   if (ctx.ws && ctx.connected) {
     ctx.ws.send(JSON.stringify({
       type: "ask_user_response",
+      paneBinding: container.paneBinding || undefined,
       toolId: toolId,
       answers: result,
     }));
@@ -655,6 +660,7 @@ function renderFormalPermission(requestId, toolName, toolInput, decisionReason)
   container.appendChild(header);
   container.appendChild(body);
   container.appendChild(actions);
+  container.paneBinding = store.get("panePendingBinding") || store.get("paneCommittedBinding") || null;
   ctx.addToMessages(container);
 
   pendingPermissions[requestId] = container;
@@ -762,6 +768,7 @@ function renderPlanPermission(requestId) {
   container.appendChild(body);
   container.appendChild(actions);
   container.appendChild(feedbackRow);
+  container.paneBinding = store.get("panePendingBinding") || store.get("paneCommittedBinding") || null;
   ctx.addToMessages(container);
 
   pendingPermissions[requestId] = container;
@@ -769,10 +776,11 @@ function renderPlanPermission(requestId) {
   ctx.setActivity(null);
   maybeScrollToBottom();
   // Focus the feedback input after render
-  setTimeout(function () { feedbackInput.focus(); }, 50);
+  setTimeout(function () { if (currentPaneReview(container)) feedbackInput.focus(); }, 50);
 }
 
 function sendPlanResponse(container, requestId, decision, feedback) {
+  if (!currentPaneReview(container)) return;
   if (container.classList.contains("resolved")) return;
   container.classList.add("resolved");
   if (ctx.stopUrgentBlink) ctx.stopUrgentBlink();
@@ -800,6 +808,7 @@ function sendPlanResponse(container, requestId, decision, feedback) {
   if (ctx.ws && ctx.connected) {
     var payload = {
       type: "permission_response",
+      paneBinding: container.paneBinding || undefined,
       requestId: requestId,
       decision: decision,
     };
@@ -954,6 +963,7 @@ function renderConversationalPermission(requestId, toolName, toolInput, mateId,
 
   container.appendChild(content);
 
+  container.paneBinding = store.get("panePendingBinding") || store.get("paneCommittedBinding") || null;
   ctx.addToMessages(container);
   pendingPermissions[requestId] = container;
   refreshIcons();
@@ -962,6 +972,7 @@ function renderConversationalPermission(requestId, toolName, toolInput, mateId,
 }
 
 function sendPermissionResponse(container, requestId, decision) {
+  if (!currentPaneReview(container)) return;
   if (container.classList.contains("resolved")) return;
   container.classList.add("resolved");
   if (ctx.stopUrgentBlink) ctx.stopUrgentBlink();
@@ -979,6 +990,7 @@ function sendPermissionResponse(container, requestId, decision) {
   if (ctx.ws && ctx.connected) {
     ctx.ws.send(JSON.stringify({
       type: "permission_response",
+      paneBinding: container.paneBinding || undefined,
       requestId: requestId,
       decision: decision,
     }));
@@ -1053,6 +1065,7 @@ export function renderElicitationRequest(msg) {
   var container = buildElicitationCard(msg, function () {
     if (ctx.stopUrgentBlink) ctx.stopUrgentBlink();
   });
+  container.paneBinding = store.get("panePendingBinding") || store.get("paneCommittedBinding") || null;
   ctx.addToMessages(container);
   pendingElicitations[msg.requestId] = container;
   refreshIcons();
@@ -1079,6 +1092,7 @@ export function markElicitationError(requestId, error, expired) {
 var pendingUserDialogs = {};
 
 function sendUserDialogResponse(container, requestId, behavior, result) {
+  if (!currentPaneReview(container)) return;
   if (container.classList.contains("resolved")) return;
   container.classList.add("resolved");
   if (ctx.stopUrgentBlink) ctx.stopUrgentBlink();
@@ -1094,6 +1108,7 @@ function sendUserDialogResponse(container, requestId, behavior, result) {
   if (ctx.ws && ctx.connected) {
     var msg = {
       type: "user_dialog_response",
+      paneBinding: container.paneBinding || undefined,
       requestId: requestId,
       behavior: isCancel ? "cancelled" : "completed",
     };
@@ -1185,6 +1200,7 @@ export function renderUserDialogRequest(msg) {
   container.appendChild(header);
   container.appendChild(body);
   container.appendChild(actions);
+  container.paneBinding = store.get("panePendingBinding") || store.get("paneCommittedBinding") || null;
   ctx.addToMessages(container);
 
   pendingUserDialogs[msg.requestId] = container;

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

@@ -54,7 +54,8 @@ export function initPersonalIntegrations() {
     if (!store.get('personalLinearDirty')) { action(); return; }
     confirmSettingsAction('Discard this unsaved connection draft?', 'Discard', action);
   }
-  form.oninput = function () { store.set({personalLinearDirty: !!key.value || name.value !== store.get('personalLinearOriginalName')}); };
+  // 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) {
     if (store.get('personalLinearSaving')) return;
     var actor = store.get('myUserId'), generation = store.get('personalLinearGeneration');

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

@@ -4,15 +4,9 @@ import { store } from './store.js';
 import { closeSpeechPicker } from './stt-picker.js';
 import { loadSpeechSettings } from './stt-settings.js';
 import { mountDefaultAi, unmountDefaultAi, requestDefaultAi } from './default-ai.js';
-import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+import { resolvePage } from './settings-shell-registry.js';
 
-export var USER_SETTINGS_PAGES = [
-  ['us-account', 'Account'], ['us-appearance', 'Appearance'], ['us-chat', 'Conversation'],
-  ['us-notifications', 'Notifications'], ['us-ai', 'AI preferences'], ['us-integrations', 'Integrations']
-];
-export function resolveUserSettingsPage(id) {
-  return ({'us-mates':'us-chat','us-experimental':'us-chat','us-connections':'us-integrations','us-email':'us-integrations','us-logout':'us-account'})[id] || id;
-}
+export function resolveUserSettingsPage(id) { return resolvePage('personal', id); }
 function section(id) { return document.querySelector('#user-settings .us-section[data-section="' + id + '"]'); }
 function heading(target, text, copy) {
   var title = document.createElement('h3'); title.textContent = text; target.appendChild(title);
@@ -20,15 +14,6 @@ function heading(target, text, copy) {
 }
 export function buildUserSettingsLayout() {
   var root = document.getElementById('user-settings');
-  root.querySelector('.us-modal').setAttribute('role','dialog');root.querySelector('.us-modal').setAttribute('aria-modal','true');root.querySelector('.us-modal').setAttribute('aria-label','User settings');
-  var nav = root.querySelector('.us-modal-nav-items'); nav.replaceChildren();
-  var dropdown = document.getElementById('user-settings-nav-dropdown'); dropdown.replaceChildren();
-  USER_SETTINGS_PAGES.forEach(function (page) {
-    var button = document.createElement('button'); button.className = 'us-nav-item'; button.dataset.section = page[0]; button.textContent = page[1]; button.type = 'button'; nav.appendChild(button);
-    var option = document.createElement('option'); option.value = page[0]; option.textContent = page[1]; dropdown.appendChild(option);
-  });
-  dropdown.setAttribute('aria-label', 'Personal settings page');
-  root.querySelector('.us-modal-nav').setAttribute('aria-label', 'Personal settings pages');
   var notifications=section('us-notifications');
   var push=document.getElementById('settings-notif-push').closest('label');
   heading(notifications,'This device','Browser permission and push delivery are configured separately on each browser.');notifications.appendChild(push);
@@ -54,36 +39,29 @@ export function buildUserSettingsLayout() {
   document.getElementById('us-logout-btn').closest('.settings-card').classList.remove('settings-card-danger');
   document.getElementById('us-pin-set-btn').parentElement.querySelector('.settings-hint').textContent = 'Change your personal account PIN. Server sign-in policy is managed separately by an administrator.';
   root.querySelectorAll('.layout-option-icon').forEach(function (el) {el.remove();});
-  var back = document.createElement('button');back.type = 'button';back.className = 'settings-btn-sm us-back';back.textContent = '← Settings';root.querySelector('.us-modal-content').prepend(back);
-  back.onclick = function () {root.classList.add('us-show-navigation');nav.querySelector('.active').focus();};
-  nav.addEventListener('keydown', function (event) {
-    if (['ArrowDown','ArrowUp','Home','End'].indexOf(event.key) < 0) return;
-    var items = Array.from(nav.querySelectorAll('button'));var index = items.indexOf(document.activeElement);if(index < 0)return;
-    event.preventDefault();index = event.key === 'Home' ? 0 : event.key === 'End' ? items.length-1 : (index+(event.key === 'ArrowDown'?1:-1)+items.length)%items.length;items[index].focus();
-  });
 }
 export function loadUserSettingsExtras(page) {
-  document.getElementById('user-settings').classList.remove('us-show-navigation');
   if (page === 'us-integrations') loadPersonalIntegrations();
   if (page === 'us-chat') loadSpeechSettings();
   if (page === 'us-ai') { mountDefaultAi(document.getElementById('us-default-ai')); requestDefaultAi(); var ws=getWs();if(ws && ws.readyState===1)ws.send(JSON.stringify({type:'get_claude_allow_list'})); }
 }
 export function finishUserSettingsExtras() {closeSpeechPicker();unmountDefaultAi(document.getElementById('us-default-ai'));}
-export function guardUserSettingsLeave(done, destination) {
-  var active = document.querySelector('#user-settings .us-section.active');
-  var page = active && active.dataset.section;
-  if (destination && resolveUserSettingsPage(destination) === page) {done();return;}
-  function leaving(id) {return !destination || page === id;}
+// 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) {
+  function leaving(id) {return !pageId || pageId === id;}
   var pin = document.getElementById('us-pin-form');
   var pinDirty = pin && !pin.classList.contains('hidden') && Array.from(pin.querySelectorAll('input')).some(function (input) {return !!input.value;});
+  // A value left in the hidden key field (browser autofill or form restore) is
+  // not an edit; only an open connection editor can hold a draft key.
   var key = document.getElementById('us-linear-key');
-  if(store.get('speechPopup'))return;
-  var dirty = leaving('us-integrations') && (store.get('personalEmailDirty') || store.get('personalLinearDirty') || key && key.value) ||
+  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-chat') && store.get('userVoiceDirty') ||
     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'));
-  if (!dirty) {done();return;}
-  showConfirmDialog('Your unsaved changes will remain in this tab. Leave this editor and keep the draft?', 'Keep draft and leave', done);
+  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-profile.js

@@ -55,7 +55,7 @@ export function initPersonalProfile() {
         URL.revokeObjectURL(url); status.textContent = 'Uploading picture…';
         uploadAvatarBlob(blob).then(function () { status.textContent = 'Picture updated.'; populateAccount(); avatar.focus(); })
           .catch(function (error) { status.textContent = error.message; status.dataset.state = 'error'; });
-      });
+      }, document.querySelector('#user-settings .us-section[data-section="us-account"]'));
     };
     image.onerror = function () { URL.revokeObjectURL(url); status.textContent = 'Could not read that image. Choose another file.'; };
     image.src = url; file.value = '';

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

@@ -1,15 +1,15 @@
 import { initPersonalAppearance } from './user-settings-appearance.js';
 import { initAccountSessions, resetAccountSessions } from './user-settings-sessions.js';
 import { initPersonalVoice } from './user-settings-voice.js';
-import { isolateSettingsDialog } from './server-settings-state.js';
+import { registerSettingsScope, openSettings, closeSettings, isSettingsShellOpen, activeSettingsScope } from './settings-shell.js';
 import { initPersonalProfile } from './user-settings-profile.js';
 import { initPersonalEditors } from './user-settings-editors.js';
 import { initPersonalPreferences } from './user-settings-preferences.js';
 import { showPinForm, hidePinForm, populateAccount, savePin, renderEmailSettings } from './user-settings-account.js';
-import { buildUserSettingsLayout, resolveUserSettingsPage, loadUserSettingsExtras, finishUserSettingsExtras, guardUserSettingsLeave } from './user-settings-layout.js';
+import { buildUserSettingsLayout, resolveUserSettingsPage, loadUserSettingsExtras, finishUserSettingsExtras, personalLeavePrompt } from './user-settings-layout.js';
 import { enhanceSettingsSelects } from './settings-select.js';
 import { loadNotificationSettings } from './notification-settings.js';
-// user-settings.js — Modal dialog for user settings
+// user-settings.js — Personal settings pane of the unified settings shell
 // Account management and logout
 
 import { refreshIcons } from './icons.js';
@@ -18,10 +18,6 @@ import { store } from './store.js';
 import { initCapsulePreference } from './capsule-preference.js';
 
 var settingsEl = null;
-var openBtn = null;
-var closeBtn = null;
-var backdrop = null;
-var navItems = null;
 var sections = null;
 var pinForm = null;
 var pinSetBtn = null;
@@ -32,61 +28,20 @@ export function initUserSettings() {
   buildUserSettingsLayout();
   initAccountSessions();
   settingsEl = document.getElementById('user-settings');
-  openBtn = document.getElementById('user-settings-btn');
-  closeBtn = document.getElementById('user-settings-close');
-  backdrop = document.getElementById('user-settings-backdrop');
-
-  if (!settingsEl || !openBtn) return;
+  if (!settingsEl) return;
 
   initCapsulePreference();
 
-
-  navItems = settingsEl.querySelectorAll('.us-nav-item');
   sections = settingsEl.querySelectorAll('.us-section');
-  pinForm = document.getElementById('us-pin-form');
-
-  openBtn.addEventListener('click', function () {
-    openUserSettings();
+  registerSettingsScope('personal', {
+    pane: settingsEl,
+    enter: function () { populateAccount(); },
+    activate: function (page) { switchSection(page); },
+    leave: function () { resetAccountSessions(); finishUserSettingsExtras(); },
+    busy: function () { return store.get('speechPopup') ? 'Finish or close the open voice settings editor first.' : ''; },
+    leavePrompt: function (kind, pageId) { return personalLeavePrompt(kind === 'page' ? pageId : undefined); }
   });
-
-  if (closeBtn) {
-    closeBtn.addEventListener('click', function () {
-      closeUserSettings();
-    });
-  }
-
-  if (backdrop) {
-    backdrop.addEventListener('click', function () {
-      closeUserSettings();
-    });
-  }
-
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'Tab' && isUserSettingsOpen() && settingsEl.contains(document.activeElement)) {
-      var items = Array.from(settingsEl.querySelectorAll('button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),a[href]')).filter(function (el) {return el.getClientRects().length && el.tabIndex !== -1;});
-      var first=items[0],last=items[items.length-1];
-      if(e.shiftKey && document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey && document.activeElement===last){e.preventDefault();first.focus();}
-    }
-    if (e.key === 'Escape' && isUserSettingsOpen() && !e.defaultPrevented && !store.get('speechPopup') && !document.querySelector('.admin-modal-overlay, #settings-confirm, .avatar-positioner-overlay, #email-setup-modal')) {
-      e.preventDefault();closeUserSettings();
-    }
-  });
-
-  for (var i = 0; i < navItems.length; i++) {
-    navItems[i].addEventListener('click', function () {
-      var section = this.dataset.section;
-      guardUserSettingsLeave(function () { switchSection(section); }, section);
-    });
-  }
-
-  // Mobile nav dropdown
-  var navDropdown = document.getElementById('user-settings-nav-dropdown');
-  if (navDropdown) {
-    navDropdown.addEventListener('change', function () {
-      var value = this.value; guardUserSettingsLeave(function () {switchSection(value);}, value);
-      this.value = settingsEl.querySelector('.us-section.active').dataset.section;
-    });
-  }
+  pinForm = document.getElementById('us-pin-form');
 
   // PIN save button
   var pinInput = document.getElementById('us-pin-input');
@@ -190,51 +145,29 @@ export function initUserSettings() {
   });
 }
 
-// Optional `initialSection` lets callers deep-link directly into a specific
-// settings tab (e.g. the disabled-Mates picker button passing 'us-mates').
-// Falls back to Account so existing callers and the icon click are unchanged.
+// Optional `initialSection` deep-links into a personal page (e.g. the
+// disabled-Mates picker passes 'us-mates'). Defaults to Account.
 export function openUserSettings(initialSection) {
-  if(!isUserSettingsOpen())store.set({ userSettingsReturnFocus: document.activeElement, userSettingsRestore: isolateSettingsDialog(settingsEl) });
-
-  settingsEl.classList.remove('hidden');
-  openBtn.classList.add('active');
-  refreshIcons(settingsEl);
-  populateAccount();
-  switchSection(initialSection || 'us-account');
-  enhanceSettingsSelects(settingsEl);
-  var title=settingsEl.querySelector(".us-section.active h2"); if(title){title.tabIndex=-1;title.focus();}
+  return openSettings({ scope: 'personal', page: initialSection || 'us-account' });
 }
 
 export function closeUserSettings() {
-  guardUserSettingsLeave(function () {
-    resetAccountSessions();
-    finishUserSettingsExtras();
-    settingsEl.classList.add('hidden');
-    var restore=store.get('userSettingsRestore');if(restore)restore();store.set({userSettingsRestore:null});
-    openBtn.classList.remove('active');
-    var focus = store.get('userSettingsReturnFocus'); if (focus && focus.isConnected) focus.focus();
-  });
+  if (isUserSettingsOpen()) closeSettings();
 }
 
 export function isUserSettingsOpen() {
-  return settingsEl && !settingsEl.classList.contains('hidden');
+  return isSettingsShellOpen() && activeSettingsScope() === 'personal';
 }
 
 function switchSection(sectionName) {
   sectionName = resolveUserSettingsPage(sectionName);
   loadUserSettingsExtras(sectionName);
-  for (var i = 0; i < navItems.length; i++) {
-    navItems[i].classList.toggle('active', navItems[i].dataset.section === sectionName);
-    if(navItems[i].dataset.section===sectionName)navItems[i].setAttribute('aria-current','page');else navItems[i].removeAttribute('aria-current');
-  }
   for (var j = 0; j < sections.length; j++) {
     sections[j].classList.toggle('active', sections[j].dataset.section === sectionName);
   }
-  var navDropdown = document.getElementById('user-settings-nav-dropdown');
-  if (navDropdown) navDropdown.value = sectionName;
   if (sectionName === 'us-notifications') loadNotificationSettings();
   if (sectionName === 'us-integrations') renderEmailSettings();
-  var heading=settingsEl.querySelector('.us-section.active h2');if(heading){heading.tabIndex=-1;heading.focus();}
+  enhanceSettingsSelects(settingsEl); refreshIcons(settingsEl);
 }
 
 function stopProp(e) {

package/lib/public/modules/vendor-usage-format.js

@@ -0,0 +1,93 @@
+// vendor-usage-format.js - Pure formatting of account usage metrics.
+//
+// Each unit is shown in its own terms. Counts, credits, currency and unnamed
+// amounts are never turned into a percentage, and a missing field is omitted,
+// never shown as 0.
+
+var WARNING_PERCENT = 80;
+
+function finite(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function plain(value) {
+  if (!finite(value)) return "";
+  var rounded = Math.abs(value) >= 100 ? Math.round(value) : Math.round(value * 100) / 100;
+  return rounded.toLocaleString("en-US");
+}
+
+function money(value, code) {
+  if (!finite(value)) return "";
+  try {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency: code }).format(value);
+  } catch (e) {
+    return plain(value) + " " + code;
+  }
+}
+
+function windowText(mins) {
+  if (!finite(mins) || mins <= 0) return "";
+  if (mins % 1440 === 0) return (mins / 1440) + "d";
+  if (mins % 60 === 0) return (mins / 60) + "h";
+  return mins + "m";
+}
+
+// One metric -> { label, value, headline, percent, warning, unit }.
+// `value` is the full detail text; `headline` is the short chip text.
+export function formatMetric(metric) {
+  var label = metric.label || "Usage";
+  var win = windowText(metric.windowMins);
+  if (win && label.indexOf(win) === -1) label += " (" + win + ")";
+  var out = { id: metric.id, unit: metric.unit, label: label, value: "", headline: "", percent: null, warning: false, resetsAtMs: finite(metric.resetsAtMs) ? metric.resetsAtMs : null };
+  if (metric.unit === "percent") {
+    out.percent = metric.usedPercent;
+    out.value = Math.round(metric.usedPercent) + "% used";
+    out.headline = Math.round(metric.usedPercent) + "%";
+    out.warning = metric.usedPercent >= WARNING_PERCENT;
+  } else if (metric.unit === "count" || metric.unit === "amount") {
+    var unitWord = metric.unit === "count" ? "" : " (unit not stated)";
+    if (finite(metric.used) && finite(metric.limit)) {
+      out.value = plain(metric.used) + " of " + plain(metric.limit) + " used" + unitWord;
+      out.headline = plain(metric.used) + "/" + plain(metric.limit);
+      out.warning = metric.limit > 0 && metric.used / metric.limit * 100 >= WARNING_PERCENT;
+    } else if (finite(metric.used)) {
+      out.value = plain(metric.used) + " used" + unitWord;
+      out.headline = plain(metric.used);
+    } else {
+      out.value = plain(metric.remaining) + " left" + unitWord;
+      out.headline = plain(metric.remaining) + " left";
+    }
+    if (finite(metric.remaining) && finite(metric.used) && finite(metric.limit)) out.value += ", " + plain(metric.remaining) + " left";
+  } else if (metric.unit === "credits") {
+    if (metric.unlimited) { out.headline = "Unlimited"; out.value = "Unlimited credits"; }
+    else if (finite(metric.used) && finite(metric.limit)) {
+      out.headline = plain(metric.used) + "/" + plain(metric.limit);
+      out.value = plain(metric.used) + " of " + plain(metric.limit) + " credits used";
+      out.warning = metric.limit > 0 && metric.used / metric.limit * 100 >= WARNING_PERCENT;
+    } else if (finite(metric.used)) { out.headline = plain(metric.used); out.value = plain(metric.used) + " credits used"; }
+    else { out.headline = plain(metric.balance); out.value = plain(metric.balance) + " credits"; }
+  } else if (metric.unit === "currency") {
+    var code = metric.currencyCode;
+    if (finite(metric.used) && finite(metric.limit)) {
+      out.value = money(metric.used, code) + " of " + money(metric.limit, code) + " used";
+      out.headline = money(metric.used, code);
+    } else if (finite(metric.used)) {
+      out.value = money(metric.used, code) + " used";
+      out.headline = money(metric.used, code);
+    } else {
+      out.value = money(metric.balance, code) + " balance";
+      out.headline = money(metric.balance, code);
+    }
+  }
+  return out;
+}
+
+// The metric that best summarises a vendor: the highest percent when any
+// metric is a percent, otherwise the first reported.
+export function pickHeadline(formatted) {
+  var best = null;
+  formatted.forEach(function (item) {
+    if (item.percent !== null && (best === null || best.percent === null || item.percent > best.percent)) best = item;
+  });
+  return best || formatted[0] || null;
+}

package/lib/public/modules/vendor-usage-list.js

@@ -0,0 +1,45 @@
+// vendor-usage-list.js - Compact "all vendors" list for the top-bar usage
+// overview. One two-line row per installed vendor: name, where its figure
+// comes from, the figure, then either the metrics or the honest reason there
+// is none. Presentational only; views come from vendor-usage-model.js.
+
+var MAX_DETAIL_METRICS = 3;
+
+function sourceLabel(view) {
+  if (view.mode === "unintegrated" || view.mode === "unsupported") return "Not integrated";
+  if (view.accountCount > 0) return "Account";
+  if (view.observedCount > 0) return "Session";
+  return view.mode === "query" ? "Account" : "Session";
+}
+
+function detailText(view) {
+  if ((view.mode === "unintegrated" || view.mode === "unsupported") && view.capability && view.capability.reason) return view.capability.reason;
+  if (!view.known) return view.status || "Usage is unknown, not zero.";
+  var parts = view.rows.slice(0, MAX_DETAIL_METRICS).map(function (row) {
+    var value = row.source === "account" ? row.value : (row.percentText || (row.resetText ? "resets in " + row.resetText : ""));
+    return row.label + ": " + value;
+  });
+  if (view.rows.length > MAX_DETAIL_METRICS) parts.push("+" + (view.rows.length - MAX_DETAIL_METRICS) + " more");
+  return parts.join(" · ");
+}
+
+export function fillListPopover(container, views, el) {
+  container.textContent = "";
+  views.forEach(function (view) {
+    var row = el("div", "vendor-usage-list-row" + (view.warning ? " warning" : "") + (view.known ? "" : " unknown") + (view.stale ? " stale" : ""));
+    row.setAttribute("data-vendor", view.vendor);
+    var top = el("div", "vendor-usage-list-top");
+    if (view.icon) {
+      var icon = el("img", "usage-check-vendor-icon");
+      icon.alt = "";
+      icon.setAttribute("src", view.icon);
+      top.appendChild(icon);
+    }
+    top.appendChild(el("span", "vendor-usage-list-name", view.name));
+    top.appendChild(el("span", "vendor-usage-list-source", sourceLabel(view)));
+    top.appendChild(el("span", "vendor-usage-list-value", view.known ? view.text : (view.mode === "unintegrated" || view.mode === "unsupported" ? "—" : "Unknown")));
+    row.appendChild(top);
+    row.appendChild(el("div", "vendor-usage-list-detail", detailText(view)));
+    container.appendChild(row);
+  });
+}