@oddessentials/agent-guild 0.1.1 → 0.3.0

package/web/app.js

@@ -3,6 +3,8 @@
 
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
+const ACCOUNTS_KEY = 'agentGuild.accounts';
+const THEME_KEY = 'agentGuild.theme';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 
 const $ = (id) => document.getElementById(id);
@@ -10,11 +12,18 @@ const state = {
   token: null,
   providers: [],
   usage: new Map(),
+  accounts: {},
+  stats: null,
+  statsFor: new Map(),
   sessions: new Map(),
   views: new Map(),
   activeId: null,
   eventsSocket: null,
   eventsRetry: 0,
+  /** True while the events socket is open. */
+  connected: false,
+  /** The manager's own version check, from `hello` and `manager.upgrade`. */
+  upgrade: null,
   /** True from a shutdown request until the manager is reachable again. */
   stopping: false,
   /** After a stop: how many session processes did not confirm exiting, or null if the manager never said. */
@@ -41,8 +50,93 @@ function setConnection(kind, label) {
   const el = $('connection');
   el.className = `connection ${kind}`;
   el.querySelector('.label').textContent = label;
-  // The manager can only be stopped while the page can reach it.
-  $('stop-manager').hidden = kind !== 'ok';
+  // The manager can only be stopped or upgraded while the page can reach it.
+  state.connected = kind === 'ok';
+  $('stop-manager').hidden = !state.connected;
+  renderUpgrade();
+}
+
+// ---- theme ----------------------------------------------------------------
+
+/** theme.js applied the saved or system theme before the first paint; this keeps the button in step. */
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  const button = $('theme-toggle');
+  const other = theme === 'dark' ? 'light' : 'dark';
+  button.textContent = theme === 'dark' ? '☀ Light' : '☾ Dark';
+  button.title = `Switch to the ${other} theme`;
+  button.setAttribute('aria-label', `Switch to the ${other} theme`);
+}
+
+function currentTheme() {
+  return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
+}
+
+function toggleTheme() {
+  const theme = currentTheme() === 'dark' ? 'light' : 'dark';
+  save(THEME_KEY, theme);
+  applyTheme(theme);
+}
+
+// ---- upgrading the manager ------------------------------------------------
+
+function renderUpgrade() {
+  const u = state.upgrade;
+  const button = $('upgrade');
+  const note = $('upgrade-note');
+  const offer = Boolean(state.connected && u?.available && u.command);
+  button.hidden = !offer;
+  if (offer) {
+    button.textContent = `Upgrade to ${u.latestVersion}`;
+    button.title = `Run "${u.command}" in a session. Sessions keep running; the new version is used once the manager is restarted.`;
+  }
+  let text = '';
+  let title = '';
+  const last = u?.lastInstall;
+  if (u?.installing) {
+    text = `Upgrading${u.latestVersion ? ` to v${u.latestVersion}` : ''}…`;
+    title = 'npm is running in a session. Keep the manager running until it finishes.';
+  } else if (u?.pendingVersion) {
+    text = `v${u.pendingVersion} installed · restart to use it`;
+    title = `Agent Guild ${u.pendingVersion} is installed, but this manager is still ${u.version}. Stop the manager and run "agent-guild open" to use it.`;
+  } else if (last?.outcome === 'failed') {
+    text = last.exitCode === null ? 'Upgrade failed' : `Upgrade failed (exit ${last.exitCode})`;
+    title = 'See the upgrade session for npm\'s output, then run the upgrade again: the files on disk may be incomplete. On Windows, files in use cannot be replaced: stop the manager first and run the command yourself.';
+  } else if (last?.outcome === 'unchanged') {
+    text = 'Upgrade finished, but this copy was not replaced';
+    title = `npm did not replace the files this manager runs from. Run${u.command ? ` "${u.command}"` : ' the npm install'} where Agent Guild is installed.`;
+  } else if (u?.available && !u.command) {
+    text = `v${u.latestVersion} available`;
+    title = u.guidance || '';
+  }
+  note.hidden = !state.connected || !text;
+  note.textContent = text;
+  note.title = title;
+}
+
+function setUpgrade(upgrade) {
+  const before = state.upgrade;
+  state.upgrade = upgrade || null;
+  renderUpgrade();
+  const pending = state.upgrade?.pendingVersion;
+  if (pending && pending !== before?.pendingVersion) {
+    toast(`Agent Guild ${pending} is installed. Stop the manager and run "agent-guild open" to use it.`, 10000);
+  }
+}
+
+async function upgradeManager() {
+  const button = $('upgrade');
+  button.disabled = true;
+  try {
+    const { session } = await api('POST', '/upgrade');
+    upsertSession(session);
+    openPanel(session.id);
+  } catch (err) {
+    if (err instanceof AuthError) return showAuth(err.message);
+    toast(err.message, 8000);
+  } finally {
+    button.disabled = false;
+  }
 }
 
 function relativeTime(iso) {
@@ -146,6 +240,51 @@ function wsUrl(path) {
 
 // ---- providers ------------------------------------------------------------
 
+function selectedAccount(provider) {
+  const accounts = provider.accounts || [];
+  return accounts.find((a) => a.id === state.accounts[provider.id]) || accounts[0] || { id: 'default', label: 'Default' };
+}
+
+function selectAccount(provider, id) {
+  state.accounts[provider.id] = id;
+  save(ACCOUNTS_KEY, JSON.stringify(state.accounts));
+}
+
+function usageFor(provider, account = selectedAccount(provider)) {
+  return state.usage.get(`${provider.id}/${account.id}`);
+}
+
+function renderAccounts(card, provider) {
+  const host = card.querySelector('.accounts');
+  const accounts = provider.accounts || [];
+  host.hidden = accounts.length < 2;
+  if (host.hidden) return host.replaceChildren();
+  const selected = selectedAccount(provider).id;
+  const same = host.children.length === accounts.length && accounts.every((a, i) => host.children[i].dataset.account === a.id);
+  if (!same) {
+    host.replaceChildren(...accounts.map((account) => {
+      const chip = document.createElement('button');
+      chip.type = 'button';
+      chip.className = 'account-chip';
+      chip.setAttribute('role', 'tab');
+      chip.dataset.account = account.id;
+      chip.addEventListener('click', () => {
+        selectAccount(provider, account.id);
+        renderAccounts(card, provider);
+        renderUsage(card, provider);
+      });
+      return chip;
+    }));
+  }
+  accounts.forEach((account, i) => {
+    const chip = host.children[i];
+    chip.classList.toggle('unsigned', usageFor(provider, account)?.signedIn === false);
+    chip.setAttribute('aria-selected', String(account.id === selected));
+    chip.textContent = account.label;
+    chip.title = `Start new ${provider.tool} sessions as the ${account.label} account`;
+  });
+}
+
 function renderProviders() {
   const list = $('providers');
   const tpl = $('provider-template');
@@ -166,7 +305,6 @@ function renderProviders() {
     const existing = node.querySelector('.existing');
     const hint = node.querySelector('.hint');
     start.hidden = !provider.available;
-    start.title = `Start a new ${provider.tool} session`;
     start.addEventListener('click', () => startSession(provider, node));
     existing.hidden = !provider.available || !provider.resumable;
     existing.title = `Resume one of ${provider.tool}'s own sessions by its id`;
@@ -184,7 +322,9 @@ function renderProviders() {
     renderHint(hint, provider);
     renderCopies(node.querySelector('.copies'), provider);
     renderConsoleLinks(node, provider);
+    renderAccounts(node, provider);
     renderUsage(node, provider);
+    renderModelStats(node, provider);
     return node;
   }));
 }
@@ -281,14 +421,21 @@ function creditsNote(usage) {
 
 function renderUsage(card, provider) {
   const host = card.querySelector('.usage');
-  const usage = state.usage.get(provider.id);
+  const account = selectedAccount(provider);
+  const usage = usageFor(provider, account);
   renderTier(card, provider, provider.usageSource ? usage : null);
+  const start = card.querySelector('.new');
+  const unsigned = Boolean(provider.available && usage?.signedIn === false);
+  start.textContent = unsigned ? 'Sign in' : 'New';
+  start.title = unsigned
+    ? `Start a ${provider.tool} session and sign in as the ${account.label} account`
+    : `Start a new ${provider.tool} session${provider.accounts?.length > 1 ? ` as the ${account.label} account` : ''}`;
   if (!provider.available || !provider.usageSource || !usage) return host.replaceChildren();
   if (usage.error || usage.windows.length === 0) {
     const note = document.createElement('div');
     note.className = 'usage-note';
-    note.textContent = `Usage: ${usage.error || 'no limits reported'}`;
-    note.title = note.textContent;
+    note.textContent = unsigned ? 'Not signed in yet' : `Usage: ${usage.error || 'no limits reported'}`;
+    note.title = unsigned ? usage.error : note.textContent;
     return host.replaceChildren(note, ...creditsNote(usage));
   }
   host.replaceChildren(...usage.windows.map((w) => {
@@ -310,11 +457,447 @@ function renderUsage(card, provider) {
 async function loadUsage() {
   let usage;
   try { ({ usage } = await api('GET', '/usage')); } catch { return; }
-  state.usage = new Map(usage.map((u) => [u.providerId, u]));
+  state.usage = new Map(usage.map((u) => [`${u.providerId}/${u.accountId ?? 'default'}`, u]));
   for (const card of $('providers').children) {
     const provider = state.providers.find((p) => p.id === card.dataset.id);
-    if (provider) renderUsage(card, provider);
+    if (!provider) continue;
+    renderAccounts(card, provider);
+    renderUsage(card, provider);
+  }
+}
+
+const ARTIFICIAL_ANALYSIS = 'Artificial Analysis';
+const MODELS_SHOWN = 8;
+const modelsView = { providerId: null, sessionId: null, focus: null, all: false, expanded: new Set() };
+let modelsOpener = null;
+let statsLoading = null;
+let statsAgain = false;
+let statsTimer;
+
+function modelKey(s) {
+  return s.model ? `${s.model.name}\n${s.model.displayName ?? ''}` : '';
+}
+
+function sessionModelId(s) {
+  return state.statsFor.get(s.id) === modelKey(s) ? state.stats?.sessions[s.id] ?? null : null;
+}
+
+function loadStats() {
+  if (statsLoading) {
+    statsAgain = true;
+    return statsLoading;
+  }
+  const asked = new Map([...state.sessions.values()].map((s) => [s.id, modelKey(s)]));
+  statsLoading = api('GET', '/model-stats').then((stats) => {
+    state.stats = stats;
+    state.statsFor = asked;
+    for (const card of $('providers').children) {
+      const provider = state.providers.find((p) => p.id === card.dataset.id);
+      if (provider) renderModelStats(card, provider);
+    }
+    renderSessions();
+    if ($('models').open) {
+      const body = document.querySelector('.models-body');
+      const top = body.scrollTop;
+      const focus = modelsFocus();
+      const withTip = Boolean(tipFor?.closest('#models-list'));
+      renderModels();
+      body.scrollTop = top;
+      restoreModelsFocus(focus, withTip);
+    }
+    if (tipFor && !tipFor.isConnected) hideTip();
+  }, () => {}).finally(() => {
+    statsLoading = null;
+    if (statsAgain) {
+      statsAgain = false;
+      loadStats();
+    }
+  });
+  return statsLoading;
+}
+
+function scheduleStats() {
+  clearTimeout(statsTimer);
+  statsTimer = setTimeout(loadStats, 300);
+}
+
+function indexStats() {
+  return state.stats?.stats.filter((stat) => stat.group === ARTIFICIAL_ANALYSIS) ?? [];
+}
+
+function ordinal(n) {
+  const suffixes = ['th', 'st', 'nd', 'rd'];
+  const v = n % 100;
+  return `${n}${suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]}`;
+}
+
+function listJoin(items) {
+  return items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} and ${items.at(-1)}`;
+}
+
+function formatTokens(n) {
+  if (typeof n !== 'number' || !Number.isFinite(n) || n <= 0) return '—';
+  if (n >= 1e6) return `${Number((n / 1e6).toFixed(2))}M`;
+  if (n >= 1e3) return `${Math.round(n / 1e3)}K`;
+  return String(n);
+}
+
+function formatPrice(n) {
+  return `$${Number(n.toFixed(n < 1 ? 3 : 2))}`;
+}
+
+function formatDate(iso, options = { year: 'numeric', month: 'short', day: 'numeric' }) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? '' : date.toLocaleDateString(undefined, options);
+}
+
+function statValue(stat, entry) {
+  return stat.group === ARTIFICIAL_ANALYSIS ? String(entry.value) : `Elo ${entry.value}`;
+}
+
+function statPlace(entry) {
+  return `${entry.tied ? 'tied ' : ''}${ordinal(entry.place)} of ${entry.of}`;
+}
+
+function statSummary(stat, entry) {
+  if (!entry) return `${stat.label}: no published result`;
+  const value = `${stat.label} ${statValue(stat, entry)}`;
+  if (entry.level === null) return `${value}: no other model has this result to compare with`;
+  const rank = entry.rank === null ? '' : `, Design Arena rank ${entry.rank}`;
+  return `${value}: level ${entry.level}, tier ${entry.tier}, ${statPlace(entry)}${rank}`;
+}
+
+function levelValue(entry) {
+  if (!entry) return ['—'];
+  if (entry.level === null) return [String(entry.value)];
+  const tier = document.createElement('span');
+  tier.className = 'stat-tier';
+  tier.textContent = entry.tier;
+  const level = document.createElement('span');
+  level.className = 'level';
+  level.textContent = entry.level;
+  return [tier, level];
+}
+
+function tierClass(entry) {
+  return entry?.tier ? `tier-${entry.tier.toLowerCase()}` : '';
+}
+
+function statRow(stat, card, { detail = false } = {}) {
+  const node = $('stat-template').content.firstElementChild.cloneNode(true);
+  const entry = card.stats[stat.id];
+  node.querySelector('.stat-name').textContent = detail ? stat.label : stat.short;
+  const info = node.querySelector('.info');
+  info.dataset.stat = stat.id;
+  info.setAttribute('aria-label', `${stat.label}: ${stat.about}`);
+  const reading = node.querySelector('.stat-reading');
+  reading.querySelector('.stat-value').replaceChildren(...levelValue(entry));
+  node.classList.toggle('unmeasured', !entry);
+  if (entry?.tier) {
+    node.classList.add(tierClass(entry));
+    reading.querySelector('.stat-fill').style.width = `${entry.level}%`;
+  }
+  if (detail) {
+    const rank = entry?.rank == null ? '' : ` · Rank ${entry.rank}`;
+    reading.querySelector('.stat-note').textContent = !entry ? 'No published result'
+      : entry.level === null ? statValue(stat, entry) : `${statPlace(entry)} · ${statValue(stat, entry)}${rank}`;
+  }
+  reading.title = statSummary(stat, entry);
+  reading.setAttribute('aria-label', reading.title);
+  return node;
+}
+
+let tipFor = null;
+let quietFocus = false;
+
+function showTip(button) {
+  const stat = state.stats?.stats.find((s) => s.id === button.dataset.stat);
+  if (!stat) return;
+  const tip = $('tip');
+  $('tip-title').textContent = stat.label;
+  $('tip-source').textContent = stat.group;
+  $('tip-text').textContent = stat.about;
+  const host = $('models').open ? $('models') : document.body;
+  if (tip.parentElement !== host) host.append(tip);
+  tip.hidden = false;
+  const box = button.getBoundingClientRect();
+  const left = Math.min(Math.max(8, box.left + box.width / 2 - tip.offsetWidth / 2), innerWidth - tip.offsetWidth - 8);
+  const below = box.bottom + 8 + tip.offsetHeight <= innerHeight;
+  tip.style.left = `${Math.round(left)}px`;
+  tip.style.top = `${Math.round(below ? box.bottom + 8 : box.top - tip.offsetHeight - 8)}px`;
+  tipFor = button;
+}
+
+function hideTip() {
+  $('tip').hidden = true;
+  tipFor = null;
+}
+
+function renderModelStats(card, provider) {
+  const host = card.querySelector('.model-stats');
+  const stats = state.stats;
+  const entry = stats?.providers[provider.id];
+  if (!entry) {
+    if (!stats?.error || !provider.modelPattern) return host.replaceChildren();
+    const note = document.createElement('div');
+    note.className = 'usage-note';
+    note.textContent = `Benchmarks: ${stats.error}`;
+    note.title = note.textContent;
+    return host.replaceChildren(note);
+  }
+  const featured = stats.models[entry.featured];
+  const count = entry.models.length;
+  const complete = indexStats().every((stat) => featured.stats[stat.id]);
+  const head = document.createElement('button');
+  head.type = 'button';
+  head.className = 'model-stats-head';
+  head.textContent = `${featured.name} · ${count} model${count === 1 ? '' : 's'}`;
+  head.setAttribute('aria-label', head.textContent);
+  head.title = `${featured.name} is the newest ${provider.tool} model with ${complete ? 'all three Artificial Analysis indexes' : 'published benchmarks'}. Open to compare ${count === 1 ? 'it' : `all ${count}`}.`;
+  head.addEventListener('click', () => showModels({ providerId: provider.id, focus: featured.id }));
+  host.replaceChildren(head, ...indexStats().map((stat) => statRow(stat, featured)));
+}
+
+function modelStatsLine(s) {
+  const id = sessionModelId(s);
+  const card = id ? state.stats.models[id] : null;
+  if (!card) return '';
+  return indexStats().map((stat) => {
+    const entry = card.stats[stat.id];
+    return `${stat.short} ${entry?.tier ? `${entry.tier} ${entry.level}` : '—'}`;
+  }).join(' · ');
+}
+
+function modelsFocus() {
+  const active = document.activeElement;
+  const row = active?.closest?.('#models-list .model');
+  return row ? { id: row.dataset.id, stat: active.dataset.stat ?? null } : null;
+}
+
+function restoreModelsFocus(focus, withTip) {
+  const row = focus && [...$('models-list').children].find((el) => el.dataset.id === focus.id);
+  if (!row) return;
+  const info = focus.stat && row.querySelector(`.info[data-stat="${focus.stat}"]`);
+  quietFocus = true;
+  (info || row.querySelector('.model-toggle')).focus({ preventScroll: true });
+  quietFocus = false;
+  if (withTip && info) showTip(info);
+}
+
+function showModels({ providerId = null, sessionId = null, focus = null }) {
+  Object.assign(modelsView, { providerId, sessionId, focus, all: false, expanded: new Set(focus ? [focus] : []) });
+  const dialog = $('models');
+  renderModels();
+  if (!dialog.open) {
+    modelsOpener = document.activeElement;
+    dialog.showModal();
   }
+  const toggle = $('models-list').querySelector('[aria-expanded="true"]');
+  toggle?.focus();
+  toggle?.scrollIntoView({ block: 'nearest' });
+}
+
+function openSessionModel(id) {
+  const s = state.sessions.get(id);
+  if (!s?.model) return;
+  if (!state.stats || state.statsFor.get(id) !== modelKey(s)) scheduleStats();
+  showModels({ sessionId: id, focus: sessionModelId(s) });
+}
+
+function unmatchedText(s) {
+  const stats = state.stats;
+  if (!stats) return 'Loading benchmarks from OpenRouter…';
+  if (!stats.pool) return `Benchmarks are unavailable: ${stats.error}.`;
+  if (!(s.id in stats.sessions) || state.statsFor.get(s.id) !== modelKey(s)) return 'Looking this model up in OpenRouter’s catalog…';
+  const names = [s.model.name, s.model.displayName].filter((name, i, all) => name && all.indexOf(name) === i);
+  return `OpenRouter’s catalog has no model named ${names.map((name) => `“${name}”`).join(' or ')}.`;
+}
+
+function sourceText(stats, { levels = true } = {}) {
+  if (!stats?.retrievedAt) return '';
+  const parts = [`Benchmarks from Artificial Analysis and Design Arena via OpenRouter, fetched ${relativeTime(stats.retrievedAt)}.`];
+  if (stats.stale) parts.push(`The last refresh failed (${stats.error}), so these results may be out of date.`);
+  if (stats.pool && levels) {
+    parts.push('Artificial Analysis results are index scores. Design Arena results are Elo ratings from real users\' head-to-head votes, and Rank is the model\'s place on Design Arena\'s own leaderboard.');
+    parts.push(`Level 0–100 is a model's standing on each benchmark among the models ${listJoin(stats.pool.tools)} run; 100 is the best result.`);
+    parts.push('Tier: S 90+, A 75+, B 50+, C 25+, D below 25.');
+  }
+  return parts.join(' ');
+}
+
+function usedBy(id) {
+  return [...state.sessions.values()]
+    .filter((s) => s.status === 'running' && sessionModelId(s) === id)
+    .map((s) => s.name);
+}
+
+function badge(kind, label, title) {
+  const el = document.createElement('span');
+  el.className = `badge ${kind}`;
+  el.textContent = label;
+  el.title = title;
+  return el;
+}
+
+function modelFacts(card) {
+  const list = document.createElement('dl');
+  list.className = 'model-facts';
+  const fact = (term, value) => {
+    if (!value) return;
+    const row = document.createElement('div');
+    const dt = document.createElement('dt');
+    const dd = document.createElement('dd');
+    dt.textContent = term;
+    dd.textContent = value;
+    row.append(dt, dd);
+    list.append(row);
+  };
+  fact('Context', card.context ? `${formatTokens(card.context)} tokens` : '');
+  fact('Max output', card.maxOutput ? `${formatTokens(card.maxOutput)} tokens` : '');
+  fact('Input', card.input.join(', '));
+  fact('Reasoning effort', card.reasoning.join(', '));
+  if (card.price.input !== null && card.price.output !== null) {
+    fact('Price', `${formatPrice(card.price.input)} input · ${formatPrice(card.price.output)} output per 1M tokens`);
+  }
+  fact('Created', card.created ? formatDate(card.created) : '');
+  fact('Expires', card.expires ? formatDate(card.expires, { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' }) : '');
+  const link = document.createElement('a');
+  link.className = 'console-link';
+  link.href = httpsHref(`https://openrouter.ai/${card.id}`) ?? '';
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  link.textContent = 'OpenRouter ↗';
+  link.setAttribute('aria-label', `${card.name} on OpenRouter (opens in a new tab)`);
+  const facts = document.createElement('div');
+  facts.className = 'model-more';
+  facts.append(list, link);
+  return facts;
+}
+
+function modelDetail(card) {
+  const groups = [];
+  for (const stat of state.stats.stats) {
+    if (groups.at(-1)?.name !== stat.group) groups.push({ name: stat.group, stats: [] });
+    groups.at(-1).stats.push(stat);
+  }
+  const sections = groups.map(({ name, stats }) => {
+    const section = document.createElement('div');
+    section.className = 'model-group';
+    const heading = document.createElement('h4');
+    heading.textContent = name;
+    section.append(heading);
+    if (stats.some((stat) => card.stats[stat.id])) {
+      section.append(...stats.map((stat) => statRow(stat, card, { detail: true })));
+    } else {
+      const none = document.createElement('p');
+      none.className = 'model-none';
+      none.textContent = 'No published results';
+      section.append(none);
+    }
+    return section;
+  });
+  return [...sections, modelFacts(card)];
+}
+
+function modelRow(card) {
+  const node = $('model-template').content.firstElementChild.cloneNode(true);
+  node.dataset.id = card.id;
+  const toggle = node.querySelector('.model-toggle');
+  const detail = node.querySelector('.model-detail');
+  node.querySelector('.model-name').textContent = card.name;
+  const users = usedBy(card.id);
+  const badges = [];
+  if (users.length) badges.push(badge('in-use', 'In use', `Used by ${listJoin(users)}`));
+  if (card.new) badges.push(badge('new', 'New', `Created ${formatDate(card.created)}`));
+  if (card.expires) {
+    const day = formatDate(card.expires, { month: 'short', day: 'numeric', timeZone: 'UTC' });
+    badges.push(badge('expires', `Expires ${day}`, `OpenRouter lists this model as expiring on ${formatDate(card.expires, { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' })}`));
+  }
+  node.querySelector('.model-title').append(...badges);
+  for (const stat of indexStats()) {
+    const entry = card.stats[stat.id];
+    const cell = document.createElement('span');
+    cell.className = ['model-index', tierClass(entry), entry ? '' : 'unmeasured'].filter(Boolean).join(' ');
+    cell.replaceChildren(...levelValue(entry));
+    cell.title = statSummary(stat, entry);
+    toggle.append(cell);
+  }
+  const context = document.createElement('span');
+  context.className = 'model-context';
+  context.textContent = formatTokens(card.context);
+  context.title = card.context ? `Context: ${card.context.toLocaleString()} tokens` : 'Context: not listed';
+  toggle.append(context);
+  const summary = indexStats().map((stat) => statSummary(stat, card.stats[stat.id])).join('. ');
+  toggle.setAttribute('aria-description', summary);
+  const expand = (open) => {
+    toggle.setAttribute('aria-expanded', String(open));
+    if (open && !detail.childElementCount) detail.replaceChildren(...modelDetail(card));
+    detail.hidden = !open;
+  };
+  expand(modelsView.expanded.has(card.id));
+  toggle.addEventListener('click', () => {
+    const open = toggle.getAttribute('aria-expanded') !== 'true';
+    if (open) modelsView.expanded.add(card.id);
+    else modelsView.expanded.delete(card.id);
+    expand(open);
+  });
+  return node;
+}
+
+function renderModels() {
+  const stats = state.stats;
+  const session = modelsView.sessionId ? state.sessions.get(modelsView.sessionId) : null;
+  const provider = session?.provider ?? state.providers.find((p) => p.id === modelsView.providerId);
+  if (!provider || (modelsView.sessionId && !session?.model)) return $('models').close();
+  paintProviderIcon($('models-icon'), provider);
+  const list = stats?.providers[provider.id]?.models ?? [];
+  let ids = list;
+  let title = `${provider.tool} models`;
+  let note = '';
+  if (session) {
+    const id = sessionModelId(session);
+    if (id && !modelsView.focus) {
+      modelsView.focus = id;
+      modelsView.expanded.add(id);
+    }
+    if (!id) {
+      ids = [];
+      title = `${provider.tool} · ${modelText(session)}`;
+      note = unmatchedText(session);
+    } else if (!list.includes(id)) {
+      ids = [id];
+      title = `${provider.tool} · ${stats.models[id].name}`;
+    }
+  } else if (!stats) {
+    note = 'Loading benchmarks from OpenRouter…';
+  } else if (list.length === 0) {
+    note = stats.error ? `Benchmarks are unavailable: ${stats.error}.` : `OpenRouter lists no benchmarked ${provider.tool} models.`;
+  }
+  $('models-title').textContent = title;
+  $('models-sub').textContent = ids.length > 1
+    ? `${ids.length} models with published benchmarks, newest first`
+    : session ? `Reported by ${session.name} as “${session.model.name}”` : '';
+  const all = modelsView.all || ids.length <= MODELS_SHOWN || ids.indexOf(modelsView.focus) >= MODELS_SHOWN;
+  const shown = all ? ids : ids.slice(0, MODELS_SHOWN);
+  const columns = $('models-columns');
+  columns.hidden = shown.length === 0;
+  columns.replaceChildren(...['Model', ...indexStats().map((stat) => stat.short), 'Context'].map((label) => {
+    const span = document.createElement('span');
+    span.textContent = label;
+    return span;
+  }));
+  $('models-list').replaceChildren(...shown.map((id) => modelRow(stats.models[id])));
+  const more = $('models-more');
+  more.hidden = all;
+  more.textContent = `Show ${ids.length - shown.length} older models`;
+  $('models-note').textContent = note;
+  $('models-note').hidden = !note;
+  $('models-source').textContent = sourceText(stats, { levels: shown.length > 0 });
+  $('models-source').hidden = !$('models-source').textContent;
+}
+
+function closeModels() {
+  if ($('models').open) $('models').close();
 }
 
 const CHANNEL_LABELS = {
@@ -381,7 +964,7 @@ async function startSession(provider, card, { resume } = {}) {
   save(CWD_KEY, cwd);
   card.classList.add('busy');
   try {
-    const body = { providerId: provider.id, cwd: cwd || undefined, cols: 120, rows: 32, resume };
+    const body = { providerId: provider.id, account: selectedAccount(provider).id, cwd: cwd || undefined, cols: 120, rows: 32, resume };
     const { session } = await api('POST', '/sessions', body);
     upsertSession(session);
     openPanel(session.id);
@@ -415,6 +998,12 @@ function modelTitle(s) {
   return `Model ${modelText(s)}${id}, ${MODEL_SOURCES[s.model.source] || s.model.source}`;
 }
 
+function accountLabel(s) {
+  if (!s.account) return '';
+  const provider = state.providers.find((p) => p.id === s.provider.id);
+  return (provider?.accounts?.length ?? 0) > 1 || s.account.id !== 'default' ? s.account.label : '';
+}
+
 function statusText(s) {
   if (s.status === 'exited') {
     if (s.signal) return `Exited (${s.signal})`;
@@ -433,6 +1022,7 @@ function buildCard(session) {
   node.querySelector('.stop').addEventListener('click', () => stopSession(session.id));
   node.querySelector('.remove').addEventListener('click', () => removeSession(session.id));
   node.querySelector('.rename').addEventListener('click', () => renameSession(session.id));
+  node.querySelector('.model-pill').addEventListener('click', () => openSessionModel(session.id));
   return node;
 }
 
@@ -453,14 +1043,15 @@ function updateCard(node, s) {
   badge.title = `Level ${level}`;
   node.querySelector('.name').textContent = s.name;
   const resumed = s.resume ? ` · resumed ${s.resume}` : '';
-  node.querySelector('.meta').textContent = `${s.provider.vendor} · ${s.provider.tool} · started ${relativeTime(s.createdAt)}${resumed}`;
+  node.querySelector('.meta').textContent = [s.provider.vendor, s.provider.tool, accountLabel(s), `started ${relativeTime(s.createdAt)}${resumed}`].filter(Boolean).join(' · ');
   const pill = node.querySelector('.status-pill');
   pill.textContent = statusText(s);
   pill.className = `status-pill ${s.status === 'exited' ? 'exited' : s.activity}`;
   const model = node.querySelector('.model-pill');
   model.hidden = !s.model;
   model.textContent = modelText(s);
-  model.title = modelTitle(s);
+  model.title = [modelTitle(s), modelStatsLine(s)].filter(Boolean).join('\n');
+  model.setAttribute('aria-label', `Benchmarks for ${modelText(s)}`);
   model.className = `model-pill ${s.model?.source || ''}`;
   const cwd = node.querySelector('.cwd-line');
   // The LRM keeps a leading "/" in place under the right-to-left truncation style.
@@ -471,7 +1062,8 @@ function updateCard(node, s) {
   node.querySelector('.stop').hidden = s.status !== 'running';
   node.querySelector('.remove').hidden = s.status === 'running';
   const modelLabel = s.model ? `, model ${modelText(s)}` : '';
-  node.setAttribute('aria-label', `${s.name}, ${s.provider.vendor}${modelLabel}, ${statusText(s)}, ${s.agents.length} agents`);
+  const accountName = accountLabel(s) ? `, ${accountLabel(s)} account` : '';
+  node.setAttribute('aria-label', `${s.name}, ${s.provider.vendor}${accountName}${modelLabel}, ${statusText(s)}, ${s.agents.length} agents`);
 }
 
 function renderSessions() {
@@ -492,6 +1084,7 @@ function renderSessions() {
   $('session-count').textContent = sessions.length ? `· ${running} running` : '';
   $('empty').hidden = sessions.length > 0;
   if (state.activeId) updatePanel();
+  if (state.stats && sessions.some((s) => s.model && state.statsFor.get(s.id) !== modelKey(s))) scheduleStats();
 }
 
 function upsertSession(session) {
@@ -706,7 +1299,7 @@ function updatePanel() {
   if (!s) return;
   paintProviderIcon($('panel-icon'), s.provider);
   $('panel-title').textContent = s.name;
-  $('panel-sub').textContent = [s.provider.tool, modelText(s), statusText(s), s.cwd].filter(Boolean).join(' · ');
+  $('panel-sub').textContent = [s.provider.tool, accountLabel(s), modelText(s), statusText(s), s.cwd].filter(Boolean).join(' · ');
   $('panel-sub').title = modelTitle(s);
   renderAgents($('panel-agents'), s.agents);
   const stop = $('panel-stop');
@@ -749,6 +1342,7 @@ function enterStopping(running = 0) {
   state.stopping = true;
   state.stopRemaining = null;
   closePanel();
+  closeModels();
   for (const view of state.views.values()) view.dispose();
   state.views.clear();
   state.sessions.clear();
@@ -805,6 +1399,9 @@ function connectEvents() {
       state.sessions = new Map(msg.sessions.map((s) => [s.id, s]));
       for (const id of [...state.views.keys()]) if (!state.sessions.has(id)) dropSession(id);
       renderSessions();
+      setUpgrade(msg.upgrade);
+    } else if (msg.type === 'manager.upgrade') {
+      setUpgrade(msg.upgrade);
     } else if (msg.type === 'manager.stopping') {
       enterStopping(msg.running);
     } else if (msg.type === 'manager.stopped') {
@@ -818,6 +1415,7 @@ function connectEvents() {
     } else if (msg.type === 'providers.updated') {
       state.providers = msg.providers;
       renderProviders();
+      scheduleStats();
     }
   };
   ws.onclose = () => {
@@ -854,8 +1452,10 @@ function readTokenFromHash() {
 }
 
 let usageTimer;
+let statsInterval;
 
 function showAuth(message = '') {
+  closeModels();
   $('app').hidden = true;
   $('terminal-panel').hidden = true;
   $('stopped').hidden = true;
@@ -885,6 +1485,9 @@ async function boot() {
   loadUsage();
   clearInterval(usageTimer);
   usageTimer = setInterval(loadUsage, 60000);
+  loadStats();
+  clearInterval(statsInterval);
+  statsInterval = setInterval(loadStats, 60 * 60 * 1000);
 }
 
 $('auth-form').addEventListener('submit', (e) => {
@@ -895,7 +1498,52 @@ $('auth-form').addEventListener('submit', (e) => {
   boot();
 });
 $('panel-close').addEventListener('click', closePanel);
+$('models-close').addEventListener('click', closeModels);
+$('models').addEventListener('click', (e) => { if (e.target === $('models')) closeModels(); });
+$('models').addEventListener('close', () => {
+  hideTip();
+  const opener = modelsOpener?.isConnected ? modelsOpener
+    : modelsView.sessionId ? cards.get(modelsView.sessionId)?.querySelector('.model-pill')
+    : $('providers').querySelector(`.provider[data-id="${modelsView.providerId}"] .model-stats-head`);
+  opener?.focus();
+  modelsOpener = null;
+});
+document.addEventListener('pointerover', (e) => {
+  const info = e.target.closest?.('.info');
+  if (info && e.pointerType !== 'touch') showTip(info);
+});
+document.addEventListener('pointerout', (e) => {
+  if (tipFor && e.target === tipFor && document.activeElement !== tipFor) hideTip();
+});
+document.addEventListener('pointerdown', (e) => { if (tipFor && !e.target.closest?.('.info')) hideTip(); });
+document.addEventListener('click', (e) => {
+  const info = e.target.closest?.('.info');
+  if (info) showTip(info);
+});
+document.addEventListener('focusin', (e) => { if (!quietFocus && e.target.matches?.('.info')) showTip(e.target); });
+document.addEventListener('focusout', (e) => { if (e.target === tipFor) hideTip(); });
+document.addEventListener('keydown', (e) => {
+  if (e.key !== 'Escape' || !tipFor) return;
+  hideTip();
+  e.preventDefault();
+  e.stopPropagation();
+}, true);
+addEventListener('scroll', () => { if (tipFor) hideTip(); }, true);
+addEventListener('resize', () => { if (tipFor) hideTip(); });
+$('models-more').addEventListener('click', () => {
+  const before = $('models-list').childElementCount;
+  modelsView.all = true;
+  renderModels();
+  $('models-list').children[before]?.querySelector('.model-toggle')?.focus();
+});
 $('stop-manager').addEventListener('click', () => stopManager());
+$('upgrade').addEventListener('click', upgradeManager);
+$('theme-toggle').addEventListener('click', toggleTheme);
+applyTheme(currentTheme());
+// Follow the system setting until the user picks a theme.
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!load(THEME_KEY)) applyTheme(e.matches ? 'dark' : 'light');
+});
 $('panel-stop').addEventListener('click', () => {
   const s = state.sessions.get(state.activeId);
   if (!s) return;
@@ -903,6 +1551,8 @@ $('panel-stop').addEventListener('click', () => {
   else removeSession(s.id);
 });
 $('cwd').value = load(CWD_KEY) || '';
+try { state.accounts = JSON.parse(load(ACCOUNTS_KEY)) || {}; } catch { state.accounts = {}; }
+if (typeof state.accounts !== 'object' || Array.isArray(state.accounts)) state.accounts = {};
 setInterval(renderSessions, 30000);
 
 // The terminal panel sits below the top bar, which wraps onto two rows on