@oddessentials/agent-guild 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
   "license": "MIT",
   "repository": {

package/src/manager/main.mjs

@@ -7,6 +7,7 @@ import { fileURLToPath } from 'node:url';
 import { ProviderRegistry } from './providers.mjs';
 import { SessionManager } from './session-manager.mjs';
 import { UsageMonitor } from './usage.mjs';
+import { ModelStats } from './model-stats.mjs';
 import { createManagerServer } from './server.mjs';
 import { resolveBaseEnv, pathReader } from './shell-env.mjs';
 import { writeReportShims } from './report-shims.mjs';
@@ -52,6 +53,7 @@ export async function startManager({ port = resolvePort(), host = DEFAULT_HOST,
   let api;
   const manager = new SessionManager({ registry, baseEnv, getApiUrl: () => api.url, sessionDefaults, shimDir });
   const usage = new UsageMonitor({ registry, env: baseEnv });
+  const modelStats = new ModelStats({ registry });
   let closing = null;
 
   const versionTimer = setInterval(() => registry.refreshVersions().catch(() => {}), VERSION_REFRESH_MS);
@@ -79,6 +81,7 @@ export async function startManager({ port = resolvePort(), host = DEFAULT_HOST,
     manager,
     registry,
     usage,
+    modelStats,
     token,
     host,
     port,

package/src/manager/model-stats.mjs

@@ -0,0 +1,338 @@
+import { toNumber } from './usage.mjs';
+
+const CATALOG_URL = 'https://openrouter.ai/api/v1/models';
+const CATALOG_TTL_MS = 6 * 60 * 60 * 1000;
+const RETRY_MS = 10 * 60 * 1000;
+const FETCH_TIMEOUT_MS = 20000;
+const NEW_MS = 30 * 24 * 60 * 60 * 1000;
+const ID_RE = /^[a-z0-9][a-z0-9._-]*\/[a-z0-9][a-z0-9._-]*(?::[a-z0-9-]+)?$/;
+
+const AA = 'Artificial Analysis';
+const DA_MODELS = 'Design Arena · Models';
+const DA_AGENTS = 'Design Arena · Agents';
+
+const STATS = [
+  {
+    id: 'coding', label: 'Coding Index', short: 'Coding', group: AA, index: 'coding_index',
+    about: 'How well the model writes and fixes code, scored by Artificial Analysis on coding evaluations such as Terminal-Bench (real tasks in a terminal). When building: working code with fewer retries.',
+  },
+  {
+    id: 'intelligence', label: 'Intelligence Index', short: 'Intelligence', group: AA, index: 'intelligence_index',
+    about: 'Artificial Analysis\'s overall score across its evaluations of agentic work, coding, scientific reasoning and general knowledge. When building: understanding what you ask, planning changes, solving hard problems.',
+  },
+  {
+    id: 'agentic', label: 'Agentic Index', short: 'Agentic', group: AA, index: 'agentic_index',
+    about: 'How well the model completes multi-step tasks on its own, using tools until the job is done (Artificial Analysis). When building: longer agent runs that stay on track without your help.',
+  },
+  {
+    id: 'overall', label: 'Overall', group: DA_MODELS, arena: 'models', category: 'codecategories',
+    about: 'Design Arena\'s combined result for Website, UI Component, Game Dev, Data Visualization and 3D, judged by real users\' votes. When building: overall front-end quality.',
+  },
+  {
+    id: 'website', label: 'Website', group: DA_MODELS, arena: 'models', category: 'website',
+    about: 'Complete websites built as one HTML file from real users\' prompts; users vote for the better one. When building: landing pages and site layouts.',
+  },
+  {
+    id: 'uicomponent', label: 'UI Component', group: DA_MODELS, arena: 'models', category: 'uicomponent',
+    about: 'Focused interface components as one HTML file; users vote. When building: individual pieces of an interface.',
+  },
+  {
+    id: 'gamedev', label: 'Game Dev', group: DA_MODELS, arena: 'models', category: 'gamedev',
+    about: 'Playable browser games as one HTML file; users play them and vote. When building: interactive, game-like front ends.',
+  },
+  {
+    id: 'dataviz', label: 'Data Visualization', group: DA_MODELS, arena: 'models', category: 'dataviz',
+    about: 'Interactive visualizations of provided data as one HTML file; users vote. When building: charts and dashboards.',
+  },
+  {
+    id: '3d', label: '3D', group: DA_MODELS, arena: 'models', category: '3d',
+    about: 'Interactive 3D experiences in the browser as one HTML file; users try them and vote. When building: 3D scenes.',
+  },
+  {
+    id: 'svg', label: 'SVG', group: DA_MODELS, arena: 'models', category: 'svg',
+    about: 'Scalable vector graphics as SVG markup: icons, illustrations, diagrams. When building: graphics as code.',
+  },
+  {
+    id: 'webapps', label: 'Web Apps', group: DA_AGENTS, arena: 'agents', category: 'webapps',
+    about: 'Multi-file React front ends built by the model as an agent over many steps; users compare results. When building: the multi-file work a coding agent does.',
+  },
+  {
+    id: 'fullstack', label: 'Full Stack', group: DA_AGENTS, arena: 'agents', category: 'fullstack',
+    about: 'Complete React apps with sign-in, a database and a back end, built by the model as an agent. When building: whole applications, not just pages.',
+  },
+  {
+    id: 'mobileapps', label: 'Mobile Apps', group: DA_AGENTS, arena: 'agents', category: 'mobileapps',
+    about: 'Cross-platform React Native mobile apps built by the model as an agent; users compare them. When building: mobile apps.',
+  },
+];
+const INDEXES = STATS.filter((stat) => stat.index).map((stat) => stat.id);
+
+class CatalogError extends Error {}
+
+const compare = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
+const newestFirst = (a, b) => (b.created ?? 0) - (a.created ?? 0) || compare(a.id, b.id);
+const record = (value) => (value && typeof value === 'object' && !Array.isArray(value) ? value : {});
+const finite = (value) => (typeof value === 'number' && Number.isFinite(value) ? value : null);
+const isMeasured = (model) => Object.keys(model.values).length > 0;
+
+function text(value, max) {
+  return typeof value === 'string' && value.trim() ? value.trim().slice(0, max) : null;
+}
+
+function strings(value) {
+  return Array.isArray(value) ? value.filter((v) => typeof v === 'string' && v).map((v) => v.slice(0, 40)) : [];
+}
+
+function perMillion(value) {
+  const n = toNumber(value);
+  return n === null || n < 0 ? null : Math.round(n * 1e10) / 1e4;
+}
+
+function displayName(name, id) {
+  const full = text(name, 120) ?? id;
+  const colon = full.indexOf(': ');
+  return colon > 0 && colon <= 40 && full.length > colon + 2 ? full.slice(colon + 2) : full;
+}
+
+function readValues(benchmarks) {
+  const analysis = record(benchmarks.artificial_analysis);
+  const arena = Array.isArray(benchmarks.design_arena) ? benchmarks.design_arena.map(record) : [];
+  const values = {};
+  for (const stat of STATS) {
+    if (stat.index) {
+      const value = finite(analysis[stat.index]);
+      if (value !== null) values[stat.id] = { value, rank: null };
+      continue;
+    }
+    const rows = arena.filter((row) => row.arena === stat.arena && row.category === stat.category && finite(row.elo) !== null);
+    if (rows.length === 1) values[stat.id] = { value: rows[0].elo, rank: finite(rows[0].rank) };
+  }
+  return values;
+}
+
+export function parseCatalog(payload) {
+  const data = Array.isArray(payload?.data) ? payload.data : [];
+  const listings = [];
+  for (const raw of data) {
+    const entry = record(raw);
+    const id = typeof entry.id === 'string' ? entry.id : '';
+    if (!ID_RE.test(id)) continue;
+    const architecture = record(entry.architecture);
+    const pricing = record(entry.pricing);
+    listings.push({
+      id,
+      slug: id.slice(id.indexOf('/') + 1),
+      canonical: text(entry.canonical_slug, 200) ?? '',
+      name: displayName(entry.name, id),
+      created: finite(entry.created),
+      context: finite(entry.context_length),
+      maxOutput: finite(record(entry.top_provider).max_completion_tokens),
+      input: strings(architecture.input_modalities),
+      text: strings(architecture.output_modalities).includes('text'),
+      tools: strings(entry.supported_parameters).includes('tools'),
+      reasoning: strings(record(entry.reasoning).supported_efforts),
+      price: { input: perMillion(pricing.prompt), output: perMillion(pricing.completion) },
+      expires: text(entry.expiration_date, 40),
+      values: readValues(record(entry.benchmarks)),
+    });
+  }
+  return listings;
+}
+
+function signature(listing) {
+  return JSON.stringify(STATS.map((stat) => listing.values[stat.id] ?? null));
+}
+
+export function indexCatalog(listings) {
+  const byId = new Map();
+  for (const listing of listings) byId.set(listing.id, [...(byId.get(listing.id) ?? []), listing]);
+  const groups = new Map();
+  for (const copies of byId.values()) {
+    if (new Set(copies.map(signature)).size > 1) continue;
+    const key = copies[0].canonical || copies[0].id;
+    groups.set(key, [...(groups.get(key) ?? []), copies[0]]);
+  }
+  const models = new Map();
+  const aliasOf = new Map();
+  for (const group of groups.values()) {
+    const sets = new Set(group.map(signature)).size === 1 ? [group] : group.map((listing) => [listing]);
+    for (const set of sets) {
+      const [main] = [...set].sort((a, b) => a.id.includes(':') - b.id.includes(':') || compare(a.id, b.id));
+      models.set(main.id, main);
+      for (const listing of set) aliasOf.set(listing.id, main.id);
+    }
+  }
+  const bySlug = new Map();
+  for (const [id, main] of aliasOf) {
+    const slug = id.slice(id.indexOf('/') + 1);
+    bySlug.set(slug, bySlug.has(slug) && bySlug.get(slug) !== main ? null : main);
+  }
+  return { models, aliasOf, bySlug };
+}
+
+export function tierFor(level) {
+  if (level >= 90) return 'S';
+  if (level >= 75) return 'A';
+  if (level >= 50) return 'B';
+  if (level >= 25) return 'C';
+  return 'D';
+}
+
+export function standing(value, others) {
+  if (others.length === 0) return null;
+  let above = 0;
+  let tied = 0;
+  for (const other of others) {
+    if (other > value) above++;
+    else if (other === value) tied++;
+  }
+  const of = others.length + 1;
+  const level = Math.round((100 * (of - 1 - above - tied / 2)) / (of - 1));
+  return { level, tier: tierFor(level), place: 1 + above, tied: tied > 0, of };
+}
+
+function patternFor(provider) {
+  if (!provider.modelPattern) return null;
+  try {
+    return new RegExp(`^(?:${provider.modelPattern})$`, 'i');
+  } catch {
+    return null;
+  }
+}
+
+export function providerModels(index, provider) {
+  const pattern = patternFor(provider);
+  if (!pattern) return [];
+  return [...index.models.values()].filter((model) => model.text && model.tools && pattern.test(model.slug)).sort(newestFirst);
+}
+
+export function modelNames(raw) {
+  const exact = String(raw ?? '').trim().toLowerCase()
+    .replace(/\[[^\]]*\]$/, '')
+    .trim()
+    .replace(/\s+/g, '-');
+  if (!exact) return [];
+  const name = exact.replace(/:[a-z0-9-]+$/, '');
+  const undated = name.replace(/(?:-\d{8}|-\d{4}-\d{2}-\d{2}|@\d{8})$/, '');
+  const dotted = undated.replace(/(\d+)-(\d+)(?=$|-)/g, '$1.$2');
+  return [...new Set([exact, name, undated, dotted])];
+}
+
+export function resolveModel(index, related, model) {
+  for (const raw of [model?.name, model?.displayName]) {
+    const names = modelNames(raw);
+    for (const name of names) {
+      const id = name.includes('/') ? index.aliasOf.get(name) : index.bySlug.get(name);
+      if (id) return id;
+    }
+    const last = names.at(-1);
+    if (!last || !/[a-z]/.test(last)) continue;
+    const hits = related.filter((m) => m.slug.slice(m.slug.indexOf('-') + 1) === last);
+    if (hits.length === 1) return hits[0].id;
+  }
+  return null;
+}
+
+function cardFor(model, pool, retrievedAt) {
+  const stats = {};
+  for (const stat of STATS) {
+    const own = model.values[stat.id];
+    if (!own) continue;
+    const others = pool[stat.id].filter((entry) => entry.id !== model.id).map((entry) => entry.value);
+    const place = standing(own.value, others) ?? { level: null, tier: null, place: null, tied: false, of: null };
+    stats[stat.id] = { ...place, value: own.value, rank: own.rank };
+  }
+  const created = model.created === null ? null : model.created * 1000;
+  return {
+    id: model.id,
+    name: model.name,
+    created: created === null ? null : new Date(created).toISOString(),
+    new: created !== null && Date.parse(retrievedAt) - created < NEW_MS,
+    expires: model.expires,
+    context: model.context,
+    maxOutput: model.maxOutput,
+    input: model.input,
+    reasoning: model.reasoning,
+    price: model.price,
+    stats,
+  };
+}
+
+export function describeCatalog({ index, retrievedAt, stale, error }, providers, sessions = []) {
+  const stats = STATS.map((stat) => ({ id: stat.id, label: stat.label, short: stat.short ?? stat.label, group: stat.group, about: stat.about }));
+  const result = { retrievedAt, stale, error, stats, pool: null, providers: {}, models: {}, sessions: {} };
+  if (!index) return result;
+  const related = new Map(providers.map((provider) => [provider.id, providerModels(index, provider)]));
+  const listed = new Map([...related].map(([id, models]) => [id, models.filter(isMeasured)]));
+  const members = new Map();
+  for (const models of listed.values()) for (const model of models) members.set(model.id, model);
+  const pool = {};
+  for (const stat of STATS) {
+    pool[stat.id] = [...members.values()].filter((m) => m.values[stat.id]).map((m) => ({ id: m.id, value: m.values[stat.id].value }));
+  }
+  result.pool = { tools: providers.filter((p) => listed.get(p.id).length).map((p) => p.tool) };
+  const card = (id) => (result.models[id] ??= cardFor(index.models.get(id), pool, retrievedAt));
+  for (const provider of providers) {
+    const models = listed.get(provider.id);
+    if (models.length === 0) continue;
+    const featured = models.find((m) => INDEXES.every((stat) => m.values[stat])) ?? models[0];
+    result.providers[provider.id] = { featured: featured.id, models: models.map((m) => card(m.id).id) };
+  }
+  for (const session of sessions) {
+    if (!session.model) continue;
+    const id = resolveModel(index, related.get(session.provider?.id) ?? [], session.model);
+    result.sessions[session.id] = id;
+    if (id) card(id);
+  }
+  return result;
+}
+
+function failure(err) {
+  if (err instanceof CatalogError) return err.message;
+  if (err?.name === 'TimeoutError') return `OpenRouter did not answer within ${FETCH_TIMEOUT_MS / 1000} seconds`;
+  if (err instanceof SyntaxError) return 'OpenRouter sent a model list that could not be read';
+  return `OpenRouter could not be reached (${err?.cause?.code || err?.message || 'unknown error'})`;
+}
+
+export class ModelStats {
+  constructor({ registry, fetchImpl = fetch, ttlMs = CATALOG_TTL_MS, retryMs = RETRY_MS } = {}) {
+    this.registry = registry;
+    this.fetchImpl = fetchImpl;
+    this.ttlMs = ttlMs;
+    this.retryMs = retryMs;
+    this.current = null;
+    this.inflight = null;
+  }
+
+  async snapshot(sessions = []) {
+    return describeCatalog(await this.catalog(), this.registry.providers, sessions);
+  }
+
+  catalog() {
+    if (this.inflight) return this.inflight;
+    const entry = this.current;
+    if (entry && Date.now() - entry.at < (entry.catalog.error ? this.retryMs : this.ttlMs)) return Promise.resolve(entry.catalog);
+    this.inflight = this._fetch().then((catalog) => {
+      this.current = { catalog, at: Date.now() };
+      return catalog;
+    }).finally(() => { this.inflight = null; });
+    return this.inflight;
+  }
+
+  async _fetch() {
+    try {
+      const res = await this.fetchImpl(CATALOG_URL, {
+        headers: { Accept: 'application/json', 'User-Agent': 'agent-guild' },
+        signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+      });
+      if (!res.ok) throw new CatalogError(`OpenRouter answered HTTP ${res.status}`);
+      const listings = parseCatalog(await res.json());
+      if (listings.length === 0) throw new CatalogError('OpenRouter sent an empty model list');
+      return { index: indexCatalog(listings), retrievedAt: new Date().toISOString(), stale: false, error: null };
+    } catch (err) {
+      const last = this.current?.catalog;
+      if (last?.index) return { ...last, stale: true, error: failure(err) };
+      return { index: null, retrievedAt: null, stale: false, error: failure(err) };
+    }
+  }
+}

package/src/manager/server.mjs

@@ -100,6 +100,7 @@ export function createManagerServer({
   manager,
   registry,
   usage,
+  modelStats,
   token,
   host = '127.0.0.1',
   port = 0,
@@ -218,6 +219,9 @@ export function createManagerServer({
     if (route === '/usage' && method === 'GET') {
       return sendJson(res, 200, { usage: await usage.all() });
     }
+    if (route === '/model-stats' && method === 'GET') {
+      return sendJson(res, 200, await modelStats.snapshot(manager.list()));
+    }
     const installMatch = route.match(/^\/providers\/([a-z0-9][a-z0-9_-]{0,31})\/install$/);
     if (installMatch && method === 'POST') {
       const body = await readJsonBody(req);

package/web/app.js

@@ -10,6 +10,8 @@ const state = {
   token: null,
   providers: [],
   usage: new Map(),
+  stats: null,
+  statsFor: new Map(),
   sessions: new Map(),
   views: new Map(),
   activeId: null,
@@ -185,6 +187,7 @@ function renderProviders() {
     renderCopies(node.querySelector('.copies'), provider);
     renderConsoleLinks(node, provider);
     renderUsage(node, provider);
+    renderModelStats(node, provider);
     return node;
   }));
 }
@@ -317,6 +320,440 @@ async function loadUsage() {
   }
 }
 
+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 = {
   npm: 'npm', native: 'native', brew: 'Homebrew', winget: 'WinGet', legacy: 'legacy install', unknown: 'unknown install',
 };
@@ -433,6 +870,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;
 }
 
@@ -460,7 +898,8 @@ function updateCard(node, s) {
   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.
@@ -492,6 +931,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) {
@@ -749,6 +1189,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();
@@ -818,6 +1259,7 @@ function connectEvents() {
     } else if (msg.type === 'providers.updated') {
       state.providers = msg.providers;
       renderProviders();
+      scheduleStats();
     }
   };
   ws.onclose = () => {
@@ -854,8 +1296,10 @@ function readTokenFromHash() {
 }
 
 let usageTimer;
+let statsInterval;
 
 function showAuth(message = '') {
+  closeModels();
   $('app').hidden = true;
   $('terminal-panel').hidden = true;
   $('stopped').hidden = true;
@@ -885,6 +1329,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,6 +1342,44 @@ $('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());
 $('panel-stop').addEventListener('click', () => {
   const s = state.sessions.get(state.activeId);

package/web/art/art.css

@@ -109,6 +109,50 @@
   .meter.low .meter-fill { background: var(--warn); box-shadow: 0 0 8px rgba(224, 168, 74, 0.5); }
   .meter.empty .meter-fill { background: var(--danger); box-shadow: 0 0 8px rgba(239, 107, 102, 0.5); }
 
+  .model-stats-head { color: var(--gold); }
+  .info { color: #b89a5e; }
+  .info:hover, .info:focus-visible { color: var(--gold); }
+  .tip {
+    background: #12141a; color: #e9e2cf; border: 1px solid #4a3d25;
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 10px 28px rgba(0, 0, 0, 0.6);
+  }
+  .tip strong { color: var(--gold); font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
+  .stat-bar { height: 7px; background: #0c0e12; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.18); }
+  .stat-fill {
+    background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 55%, #000), var(--tier));
+    box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 50%, transparent);
+  }
+  .stat-tier {
+    border-radius: 3px; font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
+    background: linear-gradient(color-mix(in srgb, var(--tier) 34%, #1a1d26), #0d0f15);
+    border-color: color-mix(in srgb, var(--tier) 70%, #000);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 6px color-mix(in srgb, var(--tier) 30%, transparent);
+  }
+  .tier-s .stat-tier {
+    color: #2b1b06; border-color: #f6dea6;
+    background: linear-gradient(180deg, #fbe9bd 0%, #e2b867 55%, #a97b35 100%);
+    box-shadow: 0 0 10px rgba(232, 196, 124, 0.6);
+  }
+
+  .models {
+    border-radius: 6px; border-color: #4a3d25; background: #12141a;
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6);
+  }
+  .models::after {
+    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
+    border: 44px solid transparent; border-image: url("/art/ui/frame.png") 168;
+  }
+  .models::backdrop { background: rgba(5, 6, 9, 0.72); }
+  .models-bar { padding: 20px 24px 12px; }
+  .models-body { padding: 0 24px 14px; }
+  .models-source { padding: 10px 24px 20px; }
+  .models-bar, .models-source, .model-columns, .model { border-color: #2a2418; }
+  .model-columns { background: #12141a; }
+  .model-toggle:hover { background: rgba(232, 196, 124, 0.06); }
+  .model-group h4 { color: #c9ab72; }
+  .badge { background: rgba(0, 0, 0, 0.45); border-color: #4a3d25; }
+  .model-pill:hover { border-color: var(--gold-dim); }
+
   .session-card { padding-left: 152px; min-height: 196px; }
   .session-card::before {
     inset: 0 auto 0 0; width: 168px; background-size: 168px auto;

package/web/index.html

@@ -83,6 +83,26 @@
     <div id="terminal-host" class="terminal-host"></div>
   </div>
 
+  <dialog id="models" class="models" aria-labelledby="models-title">
+    <div class="models-bar">
+      <span id="models-icon" class="provider-icon small"></span>
+      <div class="models-heading">
+        <h2 id="models-title"></h2>
+        <p id="models-sub" class="sub"></p>
+      </div>
+      <button id="models-close" class="btn" type="button">Close</button>
+    </div>
+    <div class="models-body">
+      <div id="models-columns" class="model-columns" aria-hidden="true"></div>
+      <div id="models-list"></div>
+      <button id="models-more" class="btn models-more" type="button" hidden></button>
+      <p id="models-note" class="models-note"></p>
+    </div>
+    <p id="models-source" class="models-source"></p>
+  </dialog>
+
+  <div id="tip" class="tip" aria-hidden="true" hidden><strong id="tip-title"></strong><span id="tip-source"></span><p id="tip-text"></p></div>
+
   <div id="toast" class="toast" role="alert" hidden></div>
 
   <template id="provider-template">
@@ -94,6 +114,7 @@
         <span class="state"></span>
       </span>
       <div class="usage"></div>
+      <div class="model-stats"></div>
       <div class="provider-links">
         <a class="console-link usage-link" target="_blank" rel="noopener noreferrer">Usage ↗</a>
         <a class="console-link billing-link" target="_blank" rel="noopener noreferrer">Billing ↗</a>
@@ -120,6 +141,28 @@
     </div>
   </template>
 
+  <template id="stat-template">
+    <div class="stat">
+      <span class="stat-label"><span class="stat-name"></span><button class="info" type="button">i</button></span>
+      <span class="stat-reading" role="img">
+        <span class="stat-bar"><span class="stat-fill"></span></span>
+        <span class="stat-value"></span>
+        <span class="stat-note"></span>
+      </span>
+    </div>
+  </template>
+
+  <template id="model-template">
+    <section class="model">
+      <h3 class="model-head">
+        <button class="model-toggle" type="button" aria-expanded="false">
+          <span class="model-title"><span class="model-name"></span></span>
+        </button>
+      </h3>
+      <div class="model-detail" hidden></div>
+    </section>
+  </template>
+
   <template id="session-template">
     <article class="session-card" role="listitem" tabindex="0">
       <span class="level-badge" aria-hidden="true"></span>
@@ -129,7 +172,7 @@
           <div class="name"></div>
           <div class="meta"></div>
         </div>
-        <span class="model-pill"></span>
+        <button class="model-pill" type="button"></button>
         <span class="status-pill"></span>
       </div>
       <div class="cwd-line"></div>

package/web/styles.css

@@ -69,7 +69,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 
 .providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
 .provider {
-  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 14px;
+  display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; gap: 10px 12px; padding: 14px;
   border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
 }
 .provider.unavailable .provider-icon { filter: grayscale(1); opacity: 0.45; }
@@ -96,6 +96,69 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .meter.empty .meter-fill { background: var(--danger); }
 .meter-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
 .usage-note { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.provider .model-stats {
+  grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(24px, 1fr) auto; align-items: center; gap: 2px 8px;
+}
+.provider .model-stats:empty { display: none; }
+.provider .model-stats > .usage-note { grid-column: 1 / -1; contain: inline-size; }
+.model-stats-head {
+  grid-column: 1 / -1; justify-self: start; max-width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: var(--accent);
+  font: inherit; font-size: 0.78rem; text-align: left; cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.model-stats-head::after { content: " ›"; }
+.model-stats-head:hover { text-decoration: underline; }
+.model-stats-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+
+.stat {
+  --tier: var(--border);
+  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
+  min-height: 24px; font-size: 0.75rem; color: var(--muted);
+}
+.stat-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.stat-reading { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
+.info {
+  position: relative; flex: none; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; padding: 0;
+  border: 1px solid color-mix(in srgb, currentColor 50%, transparent); border-radius: 50%; background: none; color: var(--muted);
+  font: italic 700 0.68rem/1 Georgia, "Times New Roman", serif; cursor: help;
+}
+.info::after { content: ""; position: absolute; inset: -6px; }
+.info:hover, .info:focus-visible { color: var(--accent); border-color: currentColor; }
+.info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.tip {
+  position: fixed; z-index: 30; width: max-content; max-width: min(320px, calc(100vw - 16px)); margin: 0; padding: 9px 11px;
+  border-radius: 8px; background: var(--text); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  font-size: 0.78rem; line-height: 1.45; pointer-events: none;
+}
+.tip strong { font-weight: 600; }
+.tip span { margin-left: 6px; font-size: 0.72rem; opacity: 0.75; }
+.tip span::before { content: "· "; }
+.tip p { margin: 4px 0 0; }
+.stat-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
+.stat-fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--tier); }
+.stat-value, .model-index { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
+.stat-value { justify-content: flex-end; }
+.stat-value .level, .model-index .level { min-width: 3ch; text-align: right; }
+.stat.unmeasured .stat-value, .model-index.unmeasured { color: var(--muted); }
+.stat-note { display: none; }
+.stat-tier {
+  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 4px;
+  font-size: 0.68rem; font-weight: 700; line-height: 1;
+  color: var(--tier-ink); background: color-mix(in srgb, var(--tier) 16%, var(--surface));
+  border: 1px solid color-mix(in srgb, var(--tier) 50%, transparent);
+}
+.tier-s { --tier: #c99a2e; --tier-ink: #7a5200; }
+.tier-a { --tier: #8b5cf6; --tier-ink: #5b21b6; }
+.tier-b { --tier: #3b82f6; --tier-ink: #1d4ed8; }
+.tier-c { --tier: #22a35a; --tier-ink: #166534; }
+.tier-d { --tier: #94a3b8; --tier-ink: #475569; }
+@media (prefers-color-scheme: dark) {
+  .tier-s { --tier: #e0b45c; --tier-ink: #f6dea6; }
+  .tier-a { --tier: #a78bfa; --tier-ink: #ddd3ff; }
+  .tier-b { --tier: #60a5fa; --tier-ink: #cfe3ff; }
+  .tier-c { --tier: #4ade80; --tier-ink: #c6f6d5; }
+  .tier-d { --tier: #94a3b8; --tier-ink: #d4dbe4; }
+}
 .provider-links { grid-column: 1 / -1; display: flex; gap: 14px; font-size: 0.78rem; }
 .console-link { color: var(--accent); text-decoration: none; }
 .console-link:hover { text-decoration: underline; }
@@ -139,7 +202,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
   font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
   max-width: 11em; overflow: hidden; text-overflow: ellipsis;
   background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent);
+  border: 0; font-family: inherit; cursor: pointer;
 }
+.model-pill:hover { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
+.model-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .model-pill.screen { font-weight: 500; }
 .status-pill.active { color: var(--ok); }
 .status-pill.active::before { content: "● "; animation: pulse 1.2s ease-in-out infinite; }
@@ -203,6 +269,67 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
 .terminal-host > div { height: 100%; }
 
+.models {
+  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; overflow: hidden;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
+}
+.models[open] { display: flex; flex-direction: column; }
+.models::backdrop { background: rgba(15, 17, 21, 0.5); }
+.models-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
+.models-heading { flex: 1; min-width: 0; }
+.models-heading .sub { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; }
+.models-body { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 14px; }
+.model-columns, .model-toggle { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 6.5rem) 4.5rem; align-items: center; gap: 8px; }
+.model-columns {
+  position: sticky; top: 0; z-index: 1; padding: 10px 8px 6px; background: var(--surface);
+  border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.72rem; font-weight: 600;
+}
+.model-columns span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-columns span:last-child, .model-context { text-align: right; }
+.model { border-bottom: 1px solid var(--border); }
+.model-head { margin: 0; font: inherit; }
+.model-toggle {
+  width: 100%; padding: 9px 8px; border: 0; border-radius: 6px; background: none; color: var(--text);
+  font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
+}
+.model-toggle:hover { background: var(--surface-2); }
+.model-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.model-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
+.model-name { font-weight: 600; overflow-wrap: anywhere; }
+.model-name::before { content: "▸"; content: "▸" / ""; display: inline-block; width: 1em; color: var(--muted); transition: transform 0.15s; }
+.model-toggle[aria-expanded="true"] .model-name::before { transform: rotate(90deg); }
+.model-context { color: var(--muted); font-variant-numeric: tabular-nums; }
+.badge {
+  font-size: 0.66rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
+  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
+}
+.badge.in-use { --badge: var(--accent); color: color-mix(in srgb, var(--badge) 80%, #000); }
+.badge.new { --badge: var(--ok); color: color-mix(in srgb, var(--badge) 72%, #000); }
+.badge.expires { --badge: var(--warn); color: color-mix(in srgb, var(--badge) 62%, #000); }
+.badge.in-use, .badge.new, .badge.expires { border-color: color-mix(in srgb, var(--badge) 45%, transparent); }
+@media (prefers-color-scheme: dark) {
+  .badge.in-use, .badge.new, .badge.expires { color: var(--badge); }
+}
+.model-detail {
+  display: grid; grid-template-columns: max-content minmax(48px, 1fr) auto minmax(0, 19em); gap: 14px 10px;
+  padding: 4px 8px 16px calc(8px + 1em);
+}
+.model-group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 2px; }
+.model-group h4, .model-none { grid-column: 1 / -1; }
+.model-group h4 { margin: 0 0 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
+.model-detail .stat-note { display: block; font-size: 0.72rem; }
+.model-detail .stat-fill { transform-origin: left; animation: stat-fill 0.45s ease-out; }
+.model-none { margin: 0; font-size: 0.75rem; color: var(--muted); }
+.model-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; font-size: 0.78rem; }
+.model-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
+.model-facts div { display: flex; gap: 6px; }
+.model-facts dt { color: var(--muted); }
+.model-facts dd { margin: 0; }
+.models-more { margin-top: 12px; }
+.models-note { margin: 14px 0 0; color: var(--muted); }
+.models-source { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
+
 .toast {
   position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
   max-width: min(640px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 8px;
@@ -211,9 +338,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 
 @keyframes pulse { 50% { opacity: 0.35; } }
 @keyframes ring { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
+@keyframes stat-fill { from { transform: scaleX(0); } }
 
 @media (prefers-reduced-motion: reduce) {
-  .status-pill.active::before, .agent.working::after { animation: none; }
+  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill { animation: none; }
+  .model-name::before { transition: none; }
 }
 
 @media (max-width: 640px) {
@@ -223,4 +352,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
   .terminal-panel { inset: var(--topbar-h, 56px) 0 0; border-radius: 0; }
   .session-grid { grid-template-columns: 1fr; }
   .cwd { flex-basis: 100%; }
+  .models { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
+  .model-columns, .model-toggle { grid-template-columns: minmax(0, 1fr) repeat(3, 4.6rem); }
+  .model-columns span:last-child, .model-context { display: none; }
+  .model-detail { padding-left: 8px; grid-template-columns: max-content minmax(32px, 1fr) auto; }
+  .model-detail .stat { padding-bottom: 6px; }
+  .model-detail .stat-reading { row-gap: 1px; }
+  .model-detail .stat-note { grid-column: 1 / -1; }
 }