clay-server 5.2.0-beta.1 → 5.2.0-beta.11

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,27 +39,26 @@ 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) {
+// 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;});
   var key = document.getElementById('us-linear-key');
-  if(store.get('speechPopup'))return;
-  var dirty = store.get('personalEmailDirty') || store.get('personalLinearDirty') || store.get('userVoiceDirty') || store.get('notificationDraft') || store.get('appearanceSaveError') || store.get('userProfileDirty') || store.get('userTerminalDirty') || pinDirty || key && key.value || 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);
+  var dirty = leaving('us-integrations') && (store.get('personalEmailDirty') || store.get('personalLinearDirty') || key && key.value) ||
+    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) 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-preferences.js

@@ -27,7 +27,10 @@ export function initPersonalPreferences() {
     catch(error){preferenceStatus('us-layout-switcher',error.message+' Try again.',true);}
     finally{controls.forEach(function(el){el.disabled=false;});}
   };});
-  var textarea=document.getElementById('us-claude-allow-list');textarea.oninput=function(){store.set({userAllowDirty:true});};
+  var textarea=document.getElementById('us-claude-allow-list');textarea.oninput=function(){
+    var patterns=textarea.value.split('\n').map(function(line){return line.trim();}).filter(Boolean);
+    store.set({userAllowDirty:!!store.get('userAllowNeedsRetry') || JSON.stringify(patterns)!==JSON.stringify(store.get('userAllowSaved') || [])});
+  };
   document.getElementById('us-claude-allow-save').onclick=function(){
     var ws=getWs();if(!ws || ws.readyState!==1){preferenceStatus('us-claude-allow-list','Disconnected. Your draft is retained.',true);return;}
     this.disabled=true;preferenceStatus('us-claude-allow-list','Saving…');ws.send(JSON.stringify({type:'set_claude_user_allow_list',patterns:textarea.value.split('\n').map(function(line){return line.trim();}).filter(Boolean)}));
@@ -37,11 +40,12 @@ export function initPersonalPreferences() {
 export function handlePersonalSettingsMessage(msg) {
   if(msg.type==='claude_allow_list') {
     store.set({userAllowSaved:msg.user || []});
+    if(store.get('userAllowDirty'))document.getElementById('us-claude-allow-list').oninput();
     if(store.get('userAllowDirty'))return;
   }
   if(msg.type==='set_claude_user_allow_list_result') {
     document.getElementById('us-claude-allow-save').disabled=false;
-    if(msg.ok)store.set({userAllowDirty:msg.effective===false,userAllowSaved:msg.patterns || []});
+    if(msg.ok)store.set({userAllowDirty:msg.effective===false,userAllowNeedsRetry:msg.effective===false,userAllowSaved:msg.patterns || []});
     var message=msg.ok ? (msg.effective===false ? 'Saved to your account, but not installed in Claude. Check filesystem access, then Save to retry.' : 'Saved. Applies on the next Claude invocation.') : msg.error || 'Save failed. Your draft is retained.';
     preferenceStatus('us-claude-allow-list',message,!msg.ok || msg.effective===false);
   }

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

@@ -13,10 +13,20 @@ export function initPersonalProfile() {
   name.after(form); var input = form.querySelector('input');
   function close() { form.hidden = true; name.hidden = false; edit.hidden = false; edit.focus(); }
   edit.onclick = function () {
-    if (!store.get('userProfileDirty')) input.value = getProfile().name || name.textContent;
+    if (!store.get('userProfileDirty')) {
+      input.value = name.textContent || getProfile().name;
+      store.set({userProfileSavedName:input.value.trim()});
+    }
     form.hidden = false; name.hidden = true; edit.hidden = true; input.focus(); input.select();
   };
-  input.oninput = function () { store.set({ userProfileDirty: true }); };
+  input.oninput = function () { store.set({ userProfileDirty: input.value.trim() !== store.get('userProfileSavedName') }); };
+  store.subscribe(function (state, previous) {
+    if (state.userSettingsProfile === previous.userSettingsProfile || !state.userSettingsProfile) return;
+    var data = state.userSettingsProfile;
+    var saved = data.name || data.displayName || data.username || 'Clay User';
+    if (!state.userProfileDirty) input.value = saved;
+    store.set({userProfileSavedName:saved.trim(), userProfileDirty:input.value.trim() !== saved.trim()});
+  });
   form.onsubmit = async function (event) {
     event.preventDefault(); var save = form.querySelector('[type=submit]'); var status = form.querySelector('[role=status]');
     if (!input.value.trim()) { status.textContent = 'Enter a display name.'; return; }
@@ -45,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,60 +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); });
-    });
-  }
-
-  // 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);});
-    });
-  }
+  pinForm = document.getElementById('us-pin-form');
 
   // PIN save button
   var pinInput = document.getElementById('us-pin-input');
@@ -189,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-login-browser.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { iconHtml, refreshIcons } from './icons.js';
@@ -33,7 +34,8 @@ export function openLoginBrowser(msg) {
   }
   closeLoginBrowser();
   var isMcp = msg.kind === 'mcp';
-  var title = isMcp ? 'Sign in to ' + (msg.label || 'MCP server') : (msg.vendor === "codex" ? "Sign in to Codex" : "Sign in to Claude");
+  var provider = (store.get('vendorInfo') || {})[msg.vendor] || {};
+  var title = 'Sign in to ' + (isMcp ? msg.label || 'MCP server' : provider.displayName || msg.vendor || 'Provider');
   store.set({ vendorLoginBrowser: {
     browserId: msg.browserId, vendor: msg.vendor, kind: msg.kind, connectionId: msg.connectionId, slug: msg.slug || store.get('currentSlug'),
     previousFocus: document.activeElement, decoding: false, pointerY: null, pointerId: null, mouseDown: false, moveTimer: null, pendingMove: null, resizeObserver: null, requestedSize: null, phase: "loading",
@@ -43,7 +45,7 @@ export function openLoginBrowser(msg) {
   dialog.className = "login-browser";
   dialog.setAttribute("aria-labelledby", "login-browser-title");
   dialog.innerHTML = '<header class="login-browser-header">' +
-    '<img class="login-browser-vendor" src="/' + (msg.vendor === "codex" ? 'codex-avatar.png' : 'claude-code-avatar.png') + '" alt="">' +
+    '<img class="login-browser-vendor" src="' + escapeHtml(provider.avatar || '') + '" alt="">' +
     '<div class="login-browser-heading"><h2 id="login-browser-title"></h2>' +
     '<span class="login-browser-origin">Opening sign-in page…</span></div>' +
     '<div class="login-browser-actions">' +
@@ -56,7 +58,7 @@ export function openLoginBrowser(msg) {
     '<div class="login-browser-loading"><span class="login-browser-spinner" aria-hidden="true"></span><strong>Opening your sign-in page</strong><span>This may take a moment.</span></div>' +
     '<textarea class="login-browser-keyboard" aria-label="Type into the remote sign-in page" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea></div>' +
     '<footer class="login-browser-footer"><div class="login-browser-info"><div class="login-browser-status"><span class="login-browser-status-dot" aria-hidden="true"></span><p role="status">Preparing sign-in…</p></div>' +
-    '<p class="login-browser-privacy">Browser cookies are discarded when this session ends. You stay signed in to ' + (msg.vendor === "codex" ? 'Codex' : 'Claude') + ' after this browser closes.</p></div>' +
+    '<p class="login-browser-privacy">Browser cookies are discarded when this session ends. You stay signed in to ' + escapeHtml(provider.displayName || msg.vendor || 'the provider') + ' after this browser closes.</p></div>' +
     '<button type="button" data-action="terminal" class="login-browser-terminal">' + iconHtml("terminal") + '<span>Use terminal sign-in</span>' + iconHtml("arrow-up-right") + '</button></footer>';
   dialog.querySelector("h2").textContent = title;
   document.body.appendChild(dialog);

package/lib/public/modules/vendor-login.js

@@ -31,7 +31,7 @@ function vendorDisplayName(vendor) {
   var vendors = store.get('vendorInfo') || {};
   var info = vendors[vendor];
   if (info && info.displayName) return info.displayName;
-  return vendor === "codex" ? "Codex" : "Claude Code";
+  return vendor || "Provider";
 }
 
 function currentProjectSlug() {
@@ -170,7 +170,7 @@ export function requestVendorLogin(vendor, opts) {
     vendor: target,
     auto: !!options.auto,
     sessionId: options.sessionId || store.get('activeSessionId') || null,
-    mode: options.mode || ((target === "claude" || target === "codex") ? "browser" : "terminal"),
+    mode: options.mode || ((((store.get("vendorInfo") || {})[target] || {}).browserLoginSupported === true) ? "browser" : "terminal"),
   }));
   showLoginStartedBanner(target);
   return true;

package/lib/public/modules/vendor-priority.js

@@ -1,4 +1,18 @@
-export var VENDOR_ORDER = ["claude", "codex", "grok", "kimi", "copilot", "qwen", "junie", "antigravity", "opencode", "kiro"];
+export var VENDOR_ORDER = ["claude", "codex", "muse", "grok", "kimi", "copilot", "qwen", "junie", "antigravity", "opencode", "kiro"];
+
+// Availability comes from the caller's server catalog. Unknown providers keep
+// their catalog order within each availability group.
+export function sortVendorEntries(entries) {
+  return entries.map(function (entry, index) { return { entry: entry, index: index }; }).sort(function (a, b) {
+    var installed = Number(!!b.entry.installed) - Number(!!a.entry.installed);
+    if (installed) return installed;
+    var aRank = VENDOR_ORDER.indexOf(a.entry.id);
+    var bRank = VENDOR_ORDER.indexOf(b.entry.id);
+    if (aRank === -1) aRank = VENDOR_ORDER.length;
+    if (bRank === -1) bRank = VENDOR_ORDER.length;
+    return aRank - bRank || a.index - b.index;
+  }).map(function (item) { return item.entry; });
+}
 export var EXPERIMENTAL_VENDORS = ["grok", "kimi", "copilot", "qwen", "junie", "antigravity", "opencode"];
 
 export function isExperimentalVendor(vendor) {

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