clay-server 5.2.0-beta.9 → 5.2.0

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

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

@@ -0,0 +1,215 @@
+// vendor-usage-model.js - Pure projection of the owner-scoped vendor usage
+// overview into what the top bar shows. No DOM, store or network access.
+//
+// Principle: a value is shown only if it was observed. A missing observation is
+// "Unknown", never 0%. Ages are measured from the server's own clock so a
+// skewed browser clock cannot make an old observation look fresh.
+
+import { formatMetric, pickHeadline } from "./vendor-usage-format.js";
+
+var STALE_AFTER_MS = 15 * 60 * 1000;
+var WARNING_PERCENT = 80;
+
+var TYPE_LABELS = {
+  five_hour: "5h",
+  seven_day: "7d",
+  seven_day_opus: "7d Opus",
+  seven_day_sonnet: "7d Sonnet",
+  overage: "Extra usage",
+  seven_day_overage_included: "7d included extra usage",
+};
+
+export function estimatedServerNow(overview, nowMs) {
+  if (!overview || !Number.isFinite(overview.serverNowMs) || !Number.isFinite(overview.receivedAtMs)) return nowMs;
+  return overview.serverNowMs + (nowMs - overview.receivedAtMs);
+}
+
+export function ageText(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "";
+  var minutes = Math.floor(ms / 60000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return minutes + "m ago";
+  var hours = Math.floor(minutes / 60);
+  if (hours < 48) return hours + "h ago";
+  return Math.floor(hours / 24) + "d ago";
+}
+
+export function durationText(ms) {
+  if (!Number.isFinite(ms) || ms <= 0) return "";
+  var totalMinutes = Math.floor(ms / 60000);
+  var days = Math.floor(totalMinutes / 1440);
+  var hours = Math.floor((totalMinutes % 1440) / 60);
+  var minutes = totalMinutes % 60;
+  if (days >= 2) return days + "d " + hours + "h";
+  if (totalMinutes >= 60) return Math.floor(totalMinutes / 60) + "h " + minutes + "m";
+  return Math.max(1, minutes) + "m";
+}
+
+export function windowLabel(entry, vendor) {
+  var label;
+  if (entry.kind === "reset") {
+    label = TYPE_LABELS[entry.rateLimitType] || entry.rateLimitType || "Usage";
+  } else {
+    var mins = entry.windowDurationMins;
+    if (!Number.isFinite(mins) || mins <= 0) label = "Usage";
+    else if (mins % 1440 === 0) label = (mins / 1440) + "d";
+    else if (mins % 60 === 0) label = (mins / 60) + "h";
+    else label = mins + "m";
+  }
+  // A separate limit bucket (for example a model-specific one) keeps its name.
+  if (entry.limitId && entry.limitId !== vendor) label += " (" + entry.limitId + ")";
+  return label;
+}
+
+function percentOf(entry) {
+  return Number.isFinite(entry.usedPercent) ? entry.usedPercent : null;
+}
+
+function windowView(entry, vendor, serverNow) {
+  var percent = percentOf(entry);
+  var resetText = entry.resetsAt ? durationText(entry.resetsAt - serverNow) : "";
+  var warn = (percent !== null && percent >= WARNING_PERCENT) || entry.status === "allowed_warning" || entry.status === "rejected";
+  var observed = Number.isFinite(entry.observedAtMs) ? serverNow - entry.observedAtMs : null;
+  return {
+    label: windowLabel(entry, vendor),
+    percent: percent,
+    percentText: percent === null ? "" : Math.round(percent) + "% used",
+    resetText: resetText,
+    resetsAt: entry.resetsAt || null,
+    warning: warn,
+    observedAgeMs: observed,
+    observedText: observed === null ? "observation time unknown" : "observed " + ageText(observed),
+    origin: entry.origin === "history" ? "history" : "live",
+  };
+}
+
+var MAX_CHIPS = 3;
+
+function capabilityOf(info, entry) {
+  if (entry && entry.capability) return entry.capability;
+  // An older server without capabilities: only the observed path exists.
+  return { mode: info && info.rateLimitTracking === true ? "event" : "unintegrated", observed: info && info.rateLimitTracking === true, units: [] };
+}
+
+function accountRows(account, serverNow) {
+  if (!account || !Array.isArray(account.metrics)) return [];
+  var age = Number.isFinite(account.fetchedAtMs) ? serverNow - account.fetchedAtMs : null;
+  var stale = account.stale === true || (age !== null && age >= STALE_AFTER_MS);
+  return account.metrics.map(function (metric) {
+    var row = formatMetric(metric);
+    row.resetText = row.resetsAtMs ? durationText(row.resetsAtMs - serverNow) : "";
+    row.expired = !!(row.resetsAtMs && row.resetsAtMs <= serverNow);
+    row.stale = stale;
+    row.source = "account";
+    row.observedAgeMs = age;
+    row.observedText = age === null ? "read time unknown" : "read " + ageText(age);
+    return row;
+  }).filter(function (row) { return !row.expired; });
+}
+
+// Why a vendor has no figures, in the vendor's own terms.
+function statusLine(cap, account, hasObserved) {
+  if (cap.mode === "unintegrated" || cap.mode === "unsupported") return cap.reason || "Not integrated: no verified usage source.";
+  var status = account && account.status;
+  if (account && account.fetching) return "Checking account usage\u2026";
+  if (status === "refused") return account.message || "Account usage is not available for you.";
+  if (status === "no_auth") return "Not signed in, so account usage cannot be read.";
+  if (status === "expired_auth") return "Sign-in has expired; run the vendor CLI once to refresh it.";
+  if (status === "error") return (account.message || "Account usage could not be read.") + (Number.isFinite(account.retryAtMs) ? " Will retry later." : "");
+  if (cap.mode === "query" && (!status || status === "idle")) return "Not checked yet.";
+  if (!hasObserved) return cap.mode === "event" ? "Waiting for a report from one of your sessions. Usage is unknown, not zero." : "No usage reported. Usage is unknown, not zero.";
+  return "";
+}
+
+// Returns the display model for one vendor, or null when it is not installed.
+// The headline value, its label and its age always describe the same row: a
+// stale high row is never presented with the freshness of a different one.
+export function describeVendor(vendor, info, entry, overview, nowMs) {
+  if (!info) return null;
+  if (entry && entry.installed === false) return null;
+  var cap = capabilityOf(info, entry);
+  var serverNow = estimatedServerNow(overview, nowMs);
+  var name = info.displayName || vendor;
+  var meta = info.usageDashboard || null;
+  var observed = [];
+  if (entry && Array.isArray(entry.windows)) {
+    entry.windows.forEach(function (raw) {
+      if (raw.resetsAt && raw.resetsAt <= serverNow) return;
+      var row = windowView(raw, vendor, serverNow);
+      row.source = "session";
+      observed.push(row);
+    });
+  }
+  var account = entry && entry.account ? entry.account : null;
+  var accounts = accountRows(account, serverNow);
+  var lastSeenAge = entry && Number.isFinite(entry.lastObservedAtMs) ? serverNow - entry.lastObservedAtMs : null;
+  var chosen = null;
+  var fromAccount = accounts.length > 0 && !(accounts[0].stale && observed.length > 0);
+  if (fromAccount) {
+    chosen = pickHeadline(accounts);
+    chosen.percentText = chosen.percent === null ? "" : Math.round(chosen.percent) + "% used";
+  } else {
+    observed.forEach(function (row) { if (row.percent !== null && (chosen === null || row.percent > chosen.percent)) chosen = row; });
+    if (!chosen) observed.forEach(function (row) { if (row.resetText && (chosen === null || row.resetsAt < chosen.resetsAt)) chosen = row; });
+    if (!chosen && observed.length) chosen = observed[0];
+    if (!chosen && accounts.length) { chosen = pickHeadline(accounts); fromAccount = true; }
+  }
+  var known = chosen !== null;
+  var rows = accounts.concat(observed);
+  var warning = rows.some(function (row) { return row.warning; });
+  var text = "Unknown";
+  var summary = name + " usage unknown";
+  var stale = false;
+  if (known) {
+    var chosenAge = chosen.observedAgeMs;
+    var headline = fromAccount ? chosen.headline : (chosen.percent !== null ? Math.round(chosen.percent) + "%" : chosen.resetText ? "resets " + chosen.resetText : "Observed");
+    text = headline;
+    stale = fromAccount ? chosen.stale === true : (chosenAge !== null && chosenAge >= STALE_AFTER_MS);
+    if (chosenAge === null) text += " \u00b7 age unknown";
+    else if (stale) text += " \u00b7 " + ageText(chosenAge);
+    var pieces = [name + " " + chosen.label + " usage"];
+    if (fromAccount) pieces.push(chosen.value);
+    else if (chosen.percent !== null) pieces.push(Math.round(chosen.percent) + "% used");
+    else if (chosen.resetText) pieces.push("resets in " + chosen.resetText);
+    pieces.push(fromAccount ? "account, " + chosen.observedText : chosen.observedText);
+    summary = pieces.join(", ");
+  }
+  var others = entry && Number.isFinite(entry.otherSourceCount) ? entry.otherSourceCount : 0;
+  return {
+    vendor: vendor, name: name, mode: cap.mode, capability: cap, known: known, warning: warning, stale: stale,
+    text: text, summary: summary, rows: rows, accountCount: accounts.length, observedCount: observed.length,
+    status: statusLine(cap, account, observed.length > 0 || accounts.length > 0),
+    accountSource: cap.source || "",
+    sourceSessionId: entry && entry.sourceSessionId !== undefined ? entry.sourceSessionId : null,
+    otherSourceCount: others,
+    lastObservedText: lastSeenAge === null ? "" : ageText(lastSeenAge),
+    href: meta && meta.href || "", linkTitle: meta && meta.title || "", icon: meta && meta.icon || info.avatar || "",
+  };
+}
+
+// Every installed vendor, in registry order. Nothing is shown until the server
+// has answered for this project and user.
+export function allVendors(vendorInfo, overview, nowMs) {
+  if (!overview) return [];
+  var infos = vendorInfo || {};
+  var byVendor = {};
+  (Array.isArray(overview.vendors) ? overview.vendors : []).forEach(function (entry) { byVendor[entry.vendor] = entry; });
+  var result = [];
+  Object.keys(infos).forEach(function (vendor) {
+    // Without a server entry only a tracked vendor is listed (older servers).
+    if (!byVendor[vendor] && infos[vendor].rateLimitTracking !== true) return;
+    var view = describeVendor(vendor, infos[vendor], byVendor[vendor], overview, nowMs);
+    if (view) result.push(view);
+  });
+  return result;
+}
+
+// Compact bar: chips only for vendors that have figures (warnings first, then
+// registry order, at most MAX_CHIPS); everything else lives in the list.
+export function overviewVendors(vendorInfo, overview, nowMs) {
+  var all = allVendors(vendorInfo, overview, nowMs);
+  var withData = all.filter(function (view) { return view.known; });
+  var ordered = withData.filter(function (v) { return v.warning; }).concat(withData.filter(function (v) { return !v.warning; }));
+  var shown = ordered.slice(0, MAX_CHIPS);
+  return all.filter(function (view) { return shown.indexOf(view) !== -1; });
+}