aimeat 2.5.0 → 2.6.0

package/dist/public/views/profile/openrouter/budget-panel.js

@@ -0,0 +1,224 @@
+/**
+ * @file budget-panel.js
+ * @description The AI spend panel: today's total against the daily budget, per-app caps, and a
+ *   30-day stacked chart. Moved out of openrouter-settings.js during the settings rework and
+ *   translated — every string in it used to be hardcoded English, which made this the one part of
+ *   the profile that stayed English in a Finnish session.
+ *
+ *   Numbers come from the server's own ledger (tokens always exact; cost is provider-reported when
+ *   available and a rough estimate otherwise). Transcription spends the SAME budget as text, which is
+ *   why the chart has a seconds metric and the footnote says so — a budget eaten by voice messages
+ *   should not be a mystery.
+ * @structure AiAppsBudgetPanel (default export of the section) · fmtCompact
+ * @usage <${AiAppsBudgetPanel} />
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Extracted from openrouter-settings.js v2.0.0, translated, seconds metric added.
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { apiGet, apiPost } from '/js/api.js';
+import { UsageChart, colorForIndex } from '/components/UsageChart.js';
+import { swallowed } from '/js/swallowed.js';
+
+/** Compact number (73306 → "73.3k") for token axis/labels. */
+export function fmtCompact(n) {
+  const v = Number(n) || 0;
+  if (v < 1000) return String(Math.round(v));
+  if (v < 1_000_000) return (v / 1000).toFixed(v < 10_000 ? 1 : 0) + 'k';
+  return (v / 1_000_000).toFixed(1) + 'M';
+}
+
+/** Seconds → "1:23" / "12s", for the audio metric. */
+function fmtSeconds(n) {
+  const v = Math.round(Number(n) || 0);
+  if (v < 60) return `${v}s`;
+  return `${Math.floor(v / 60)}:${String(v % 60).padStart(2, '0')}`;
+}
+
+export function AiAppsBudgetPanel() {
+  const [usage, setUsage] = useState(null);
+  const [settings, setSettings] = useState(null);
+  const [editing, setEditing] = useState(false);
+  const [budgetInput, setBudgetInput] = useState('1');
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [caps, setCaps] = useState({});          // app → cap input string ('' = use the daily budget)
+  const [savingCaps, setSavingCaps] = useState(false);
+  const [capsMsg, setCapsMsg] = useState(null);
+  const [history, setHistory] = useState(null);  // GET /v1/ai/usage/history — per-day series + rollups
+  const [metric, setMetric] = useState('cost');  // 'cost' | 'tokens' | 'seconds'
+
+  useEffect(() => { reload(); }, []);
+
+  async function reload() {
+    const [u, s, hist] = await Promise.all([
+      apiGet('/v1/ai/usage').catch(err => { swallowed('budget-panel: usage', err); return null; }),
+      apiGet('/v1/ai/settings').catch(err => { swallowed('budget-panel: settings', err); return null; }),
+      apiGet('/v1/ai/usage/history?days=30').catch(err => { swallowed('budget-panel: history', err); return null; }),
+    ]);
+    if (hist && hist.ok !== false && hist.data) setHistory(hist.data);
+    if (u && u.ok !== false && u.data) setUsage(u.data);
+    if (s && s.ok !== false && s.data) {
+      setSettings(s.data);
+      setBudgetInput(String(s.data.daily_budget_usd ?? 1));
+      const q = s.data.app_quotas || {};
+      setCaps(Object.fromEntries(Object.entries(q).map(([app, v]) =>
+        [app, (v && v.daily_usd != null) ? String(v.daily_usd) : ''])));
+    }
+  }
+
+  async function saveCaps() {
+    setSavingCaps(true); setCapsMsg(null);
+    const app_quotas = {};
+    for (const [app, val] of Object.entries(caps)) {
+      const s = String(val).trim();
+      if (s === '') continue;                    // blank = no override → app uses the daily budget
+      const n = Number(s);
+      if (!Number.isFinite(n) || n < 0 || n > 1000) {
+        setCapsMsg({ text: t('profile.openrouter.budget.capRange', { app }), error: true });
+        setSavingCaps(false); return;
+      }
+      app_quotas[app] = { daily_usd: n };
+    }
+    try {
+      const r = await apiPost('/v1/ai/settings', { app_quotas });
+      if (r.ok === false) throw new Error(r.error?.message || t('profile.openrouter.budget.saveFailed'));
+      setCapsMsg({ text: t('profile.openrouter.budget.capsSaved') });
+      await reload();
+    } catch (e) {
+      setCapsMsg({ text: e.message || t('profile.openrouter.budget.saveFailed'), error: true });
+    }
+    setSavingCaps(false);
+  }
+
+  async function saveBudget() {
+    setSaving(true); setMessage(null);
+    const n = Number(budgetInput);
+    if (!Number.isFinite(n) || n < 0 || n > 1000) {
+      setMessage({ text: t('profile.openrouter.budget.budgetRange'), error: true });
+      setSaving(false); return;
+    }
+    try {
+      const r = await apiPost('/v1/ai/settings', { daily_budget_usd: n });
+      if (r.ok === false) throw new Error(r.error?.message || t('profile.openrouter.budget.saveFailed'));
+      setMessage({ text: t('profile.openrouter.budget.budgetSaved') });
+      setEditing(false);
+      await reload();
+    } catch (e) {
+      setMessage({ text: e.message || t('profile.openrouter.budget.saveFailed'), error: true });
+    }
+    setSaving(false);
+  }
+
+  if (!usage || !settings) return null;
+  const budget = usage.daily_budget_usd;
+  const spent = usage.spent_today_usd;
+  const pct = budget > 0 ? Math.min(100, Math.round((spent / budget) * 100)) : 0;
+  const perAppEntries = Object.entries(usage.per_app || {});
+  // Apps to offer a cap for: spent today, OR active in the last 30 days, OR already capped. Without
+  // the history apps the table hides itself whenever today's spend is $0, leaving nowhere to set a
+  // cap for an app that only ran on earlier days.
+  const historyApps = (history && Array.isArray(history.apps)) ? history.apps : [];
+  const appNames = Array.from(new Set([...perAppEntries.map(([a]) => a), ...historyApps, ...Object.keys(caps)]));
+
+  return html`
+    <div class="pf-or-field pf-or-spend-section">
+      <label class="pf-or-label">${t('profile.openrouter.budget.title')}</label>
+      <div class="pf-or-spend-desc">${t('profile.openrouter.budget.desc')}</div>
+
+      <div class="pf-or-spend-bar-row">
+        <div class="pf-or-spend-bar">
+          <div class="pf-or-spend-bar-fill ${pct >= 90 ? 'crit' : pct >= 60 ? 'warn' : ''}" style="width:${pct}%"></div>
+          <div class="pf-or-spend-bar-label">$${spent.toFixed(4)} / $${budget.toFixed(2)} (${pct}%)</div>
+        </div>
+        ${editing ? html`
+          <input type="number" min="0" max="1000" step="0.10" value=${budgetInput}
+                 onInput=${e => setBudgetInput(e.target.value)}
+                 class="pf-or-spend-budget-input" />
+          <button class="btn-primary btn-sm" onClick=${saveBudget} disabled=${saving}>
+            ${saving ? '…' : t('profile.openrouter.save')}
+          </button>
+          <button class="btn-outline btn-sm" onClick=${() => setEditing(false)}>${t('profile.openrouter.cancel')}</button>
+        ` : html`
+          <button class="btn-outline btn-sm" onClick=${() => setEditing(true)}>${t('profile.openrouter.budget.change')}</button>
+        `}
+      </div>
+
+      ${message && html`<div class="pf-or-message pf-or-spend-msg ${message.error ? 'pf-or-message-error' : 'pf-or-message-success'}">${message.text}</div>`}
+
+      ${appNames.length > 0 && html`
+        <details class="pf-or-spend-details" open>
+          <summary class="pf-or-spend-summary">${t('profile.openrouter.budget.perApp', { n: appNames.length })}</summary>
+          <div class="pf-or-spend-hint">${t('profile.openrouter.budget.perAppHint')}</div>
+          <table class="pf-or-spend-table">
+            <thead>
+              <tr>
+                <th>${t('profile.openrouter.budget.colApp')}</th>
+                <th class="num">${t('profile.openrouter.budget.colSpent')}</th>
+                <th class="num">${t('profile.openrouter.budget.colCap')}</th>
+                <th class="num">${t('profile.openrouter.budget.colCalls')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${appNames.map((app) => {
+                const s = usage.per_app[app] || { cost_usd: 0, calls: 0 };
+                return html`
+                <tr key=${app}>
+                  <td>${app}</td>
+                  <td class="num">$${(s.cost_usd || 0).toFixed(4)}</td>
+                  <td class="num">
+                    <input type="number" min="0" max="1000" step="0.10"
+                      value=${caps[app] ?? ''} placeholder=${budget.toFixed(2)}
+                      onInput=${e => setCaps(c => ({ ...c, [app]: e.target.value }))}
+                      class="pf-or-spend-cap-input" />
+                  </td>
+                  <td class="num">${s.calls || 0}</td>
+                </tr>`;
+              })}
+            </tbody>
+          </table>
+          <div class="pf-or-spend-actions">
+            <button class="btn-primary btn-sm" onClick=${saveCaps} disabled=${savingCaps}>
+              ${savingCaps ? '…' : t('profile.openrouter.budget.saveCaps')}
+            </button>
+            ${capsMsg && html`<span class="pf-or-message ${capsMsg.error ? 'pf-or-message-error' : 'pf-or-message-success'}">${capsMsg.text}</span>`}
+          </div>
+        </details>
+      `}
+
+      ${history && Array.isArray(history.days) && history.days.length > 0 && (() => {
+        const labels = history.days.map((d) => d.date.slice(5));
+        const chartApps = history.apps || [];
+        const pick = (m) => (metric === 'tokens' ? m.tokens : metric === 'seconds' ? m.audio_seconds : m.cost_usd) || 0;
+        const datasets = chartApps.map((app, i) => ({
+          label: app,
+          data: history.days.map((d) => pick((d.per_app && d.per_app[app]) || {})),
+          backgroundColor: colorForIndex(i),
+        }));
+        const yFormat = metric === 'tokens' ? ((v) => fmtCompact(v))
+          : metric === 'seconds' ? ((v) => fmtSeconds(v))
+          : ((v) => '$' + (Number(v) < 1 ? Number(v).toFixed(3) : Number(v).toFixed(2)));
+        const btn = (key, label) => html`
+          <button class=${metric === key ? 'btn-primary btn-sm' : 'btn-outline btn-sm'}
+                  onClick=${() => setMetric(key)}>${label}</button>`;
+        return html`
+          <div class="pf-or-spend-chart-wrap">
+            <div class="pf-or-spend-chart-head">
+              <span class="pf-or-spend-chart-title">${t('profile.openrouter.budget.chartTitle')}</span>
+              <span class="pf-or-spend-metric-toggle">
+                ${btn('cost', t('profile.openrouter.budget.metricCost'))}
+                ${btn('tokens', t('profile.openrouter.budget.metricTokens'))}
+                ${btn('seconds', t('profile.openrouter.budget.metricSeconds'))}
+              </span>
+            </div>
+            <${UsageChart} stacked labels=${labels} datasets=${datasets} height=${220} yFormat=${yFormat} />
+          </div>`;
+      })()}
+
+      <div class="pf-or-spend-footnote">${t('profile.openrouter.budget.footnote')}</div>
+    </div>
+  `;
+}

package/dist/public/views/profile/openrouter/model-picker.js

@@ -0,0 +1,150 @@
+/**
+ * @file model-picker.js
+ * @description One model selector, used for every model role (default, reasoning, execution, vision,
+ *   speech-to-text). Replaces a flat <select> that rendered the provider's whole catalogue — 336
+ *   options on OpenRouter, with no search, no prices and no way to find out what a model is.
+ *
+ *   Native <select> is kept for short lists (a self-hosted provider with a handful of models): it is
+ *   the better control when it fits on a screen. Above the threshold it becomes a searchable list with
+ *   a recommended group, the price, the context length, and a link to the model's own page.
+ * @structure ModelPicker (the control) · ModelRow (one option) · SELECT_THRESHOLD
+ * @usage <${ModelPicker} value=${model} onChange=${setModel} models=${models} modality="chat" />
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Initial version (OpenRouter settings rework).
+ */
+import { h } from 'preact';
+import { useState, useMemo, useRef, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import {
+  chatPriceLabel, audioPriceLabel, contextLabel, modelPageUrl, rankModels, matchesQuery, acceptsImages,
+} from './pricing.js';
+
+/** Below this many models a plain <select> is the better control, so we keep it. */
+const SELECT_THRESHOLD = 25;
+
+function priceLabelFor(model, modality) {
+  return (modality === 'transcription' || modality === 'speech')
+    ? audioPriceLabel(model, t)
+    : chatPriceLabel(model, t);
+}
+
+function ModelRow({ model, modality, selected, onPick, showLink }) {
+  const price = priceLabelFor(model, modality);
+  const ctx = contextLabel(model);
+  return html`
+    <li class=${`pf-or-mrow${selected ? ' pf-or-mrow--on' : ''}`}>
+      <button type="button" class="pf-or-mpick" onClick=${() => onPick(model.id)} title=${model.id}>
+        <span class="pf-or-mname">${model.name || model.id}</span>
+        <span class="pf-or-mid">${model.id}</span>
+        <span class="pf-or-mmeta">
+          ${price ? html`<span class="pf-or-mprice">${price}</span>` : null}
+          ${ctx ? html`<span class="pf-or-mctx">${t('profile.openrouter.price.context', { n: ctx })}</span>` : null}
+        </span>
+      </button>
+      ${showLink ? html`
+        <a class="pf-or-mlink" href=${modelPageUrl(model.id)} target="_blank" rel="noopener"
+           title=${t('profile.openrouter.model.openPage')} aria-label=${t('profile.openrouter.model.openPage')}>↗</a>` : null}
+    </li>`;
+}
+
+/**
+ * @param {object} props
+ * @param {string} props.value            currently selected model id ('' = none)
+ * @param {(id: string) => void} props.onChange
+ * @param {Array<object>} props.models    models already fetched for this modality
+ * @param {string} [props.modality]       'chat' | 'vision' | 'transcription' | 'speech'
+ * @param {boolean} [props.allowNone]     offer an explicit "not in use" option
+ * @param {boolean} [props.allowCustom]   let the user type a model id the catalogue does not list
+ * @param {boolean} [props.isOpenRouter]  show links to openrouter.ai
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.noneLabel]
+ */
+export function ModelPicker({
+  value, onChange, models, modality = 'chat', allowNone = false, allowCustom = false,
+  isOpenRouter = true, disabled = false, noneLabel,
+}) {
+  const [query, setQuery] = useState('');
+  const [showAll, setShowAll] = useState(false);
+  const [custom, setCustom] = useState('');
+  const listRef = useRef(null);
+
+  // Vision is not its own catalogue — it is the chat catalogue filtered by what each model declares
+  // it accepts, which is the only reliable signal (180 of 336 read images, with no naming pattern).
+  const pool = useMemo(() => {
+    const all = Array.isArray(models) ? models : [];
+    return modality === 'vision' ? all.filter(acceptsImages) : all;
+  }, [models, modality]);
+  const recommended = useMemo(() => rankModels(pool, modality).slice(0, 8), [pool, modality]);
+  const filtered = useMemo(() => pool.filter((m) => matchesQuery(m, query)), [pool, query]);
+
+  // A selected model that is not in the fetched list (a custom provider's id, or a model that left
+  // the catalogue) must still be visible as the current value rather than silently reading as unset.
+  const selectedKnown = pool.some((m) => m.id === value);
+
+  useEffect(() => { if (!query) setShowAll(false); }, [query]);
+
+  // A native <select> is the better control for a short list — but only for CHAT models, where the
+  // label alone is enough to choose by. An audio model's price is the thing a person needs to see
+  // (its unit is not knowable from the catalogue, so the reported figure and the link to the model's
+  // page carry the whole story), and a <select> can show neither. The transcription list is short by
+  // nature — 13 models — so this branch would otherwise swallow exactly the case the rich row exists for.
+  const richOnly = modality === 'transcription' || modality === 'speech';
+  if (!richOnly && pool.length > 0 && pool.length <= SELECT_THRESHOLD && !allowCustom) {
+    return html`
+      <select class="pf-or-select" value=${value} disabled=${disabled}
+              onChange=${(e) => onChange(e.target.value)}>
+        ${allowNone ? html`<option value="">${noneLabel || t('profile.openrouter.model.none')}</option>` : null}
+        ${pool.map((m) => html`<option key=${m.id} value=${m.id}>${m.name || m.id}</option>`)}
+      </select>`;
+  }
+
+  const visible = query ? filtered : (showAll ? filtered : recommended);
+
+  return html`
+    <div class=${`pf-or-picker${disabled ? ' pf-or-picker--off' : ''}`}>
+      <div class="pf-or-picker-head">
+        <span class="pf-or-picked">
+          ${value
+            ? html`<code class="pf-or-picked-id">${value}</code>`
+            : html`<span class="pf-or-picked-none">${noneLabel || t('profile.openrouter.model.none')}</span>`}
+          ${value && !selectedKnown ? html`<span class="pf-or-picked-warn">${t('profile.openrouter.model.notInList')}</span>` : null}
+        </span>
+        ${value && allowNone ? html`
+          <button type="button" class="btn-ghost btn-sm" disabled=${disabled}
+                  onClick=${() => onChange('')}>${t('profile.openrouter.model.clear')}</button>` : null}
+      </div>
+
+      <input type="search" class="pf-or-input pf-or-msearch" value=${query} disabled=${disabled}
+             placeholder=${t('profile.openrouter.model.searchPlaceholder', { n: pool.length })}
+             onInput=${(e) => setQuery(e.target.value)} />
+
+      ${visible.length === 0
+        ? html`<div class="pf-or-mempty">${t('profile.openrouter.model.noMatch')}</div>`
+        : html`
+          <ul class="pf-or-mlist" ref=${listRef}>
+            ${!query && !showAll ? html`<li class="pf-or-mgroup">${t('profile.openrouter.model.recommended')}</li>` : null}
+            ${visible.map((m) => html`
+              <${ModelRow} key=${m.id} model=${m} modality=${modality} selected=${m.id === value}
+                           onPick=${onChange} showLink=${isOpenRouter} />`)}
+          </ul>`}
+
+      ${!query && !showAll && filtered.length > recommended.length ? html`
+        <button type="button" class="btn-ghost btn-sm pf-or-mall" onClick=${() => setShowAll(true)}>
+          ${t('profile.openrouter.model.showAll', { n: filtered.length })}
+        </button>` : null}
+
+      ${allowCustom ? html`
+        <div class="pf-or-mcustom">
+          <input type="text" class="pf-or-input" value=${custom} disabled=${disabled}
+                 placeholder=${t('profile.openrouter.model.customIdPlaceholder')}
+                 onInput=${(e) => setCustom(e.target.value)} />
+          <button type="button" class="btn-outline btn-sm" disabled=${disabled || !custom.trim()}
+                  onClick=${() => { onChange(custom.trim()); setCustom(''); }}>
+            ${t('profile.openrouter.model.customIdUse')}
+          </button>
+        </div>
+        <span class="pf-or-hint">${t('profile.openrouter.model.customIdHint')}</span>` : null}
+    </div>`;
+}

package/dist/public/views/profile/openrouter/pricing.js

@@ -0,0 +1,139 @@
+/**
+ * @file pricing.js
+ * @description Pure pricing + ranking helpers for the AI provider model pickers. No Preact, no DOM,
+ *   no network — everything here is a function of the model list the provider returned, which is what
+ *   makes it the one place the pricing rules can be read and checked.
+ *
+ *   THE RULE THAT MATTERS: chat models are priced per token and can be shown as $/M. Audio models
+ *   cannot. Measured 2026-08-01, `openai/whisper-large-v3` reports pricing.prompt 0.0015 on Together
+ *   and 0.111 on Groq — per minute and per hour respectively, with nothing in the API distinguishing
+ *   them. So audioPriceLabel() shows the reported number WITHOUT inventing a unit, and the settings
+ *   page pairs it with a real measured cost from a test transcription. A derived "$/min" here would be
+ *   confidently wrong for whole providers.
+ * @structure perMillion / fmtUsdPerMillion / chatPriceLabel / audioPriceLabel / isFree /
+ *   acceptsImages / modelPageUrl / rankModels
+ * @usage import { chatPriceLabel, rankModels } from './pricing.js';
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Extracted from the settings panel as part of the OpenRouter settings rework.
+ */
+
+/** A per-token price as dollars per million tokens, or null when the provider gave no number. */
+export function perMillion(v) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n * 1e6 : null;
+}
+
+/** Format a per-million figure. Sub-dollar prices need three decimals to say anything at all. */
+export function fmtUsdPerMillion(n) {
+  if (n === null || !Number.isFinite(n)) return null;
+  if (n === 0) return '0';
+  return n < 1 ? `$${n.toFixed(3)}` : `$${n.toFixed(2)}`;
+}
+
+/** true when the model costs nothing to prompt (17 of the 336 catalogue models at time of writing). */
+export function isFree(model) {
+  return Number(model?.pricing?.prompt) === 0 && Number(model?.pricing?.completion || 0) === 0;
+}
+
+/** Whether the model reads images. Read from what it declares, never guessed from its name. */
+export function acceptsImages(model) {
+  return Array.isArray(model?.input_modalities) && model.input_modalities.includes('image');
+}
+
+/** Whether the model reads audio directly in a chat turn (a different thing from an STT model). */
+export function acceptsAudio(model) {
+  return Array.isArray(model?.input_modalities) && model.input_modalities.includes('audio');
+}
+
+/**
+ * "$5.00 / M in · $25.00 / M out" for a chat model, or null when the provider reported no pricing
+ * (LM Studio and self-hosted endpoints do not).
+ */
+export function chatPriceLabel(model, t) {
+  const inUsd = fmtUsdPerMillion(perMillion(model?.pricing?.prompt));
+  if (inUsd === null) return null;
+  if (isFree(model)) return t('profile.openrouter.price.free');
+  const outUsd = fmtUsdPerMillion(perMillion(model?.pricing?.completion));
+  const inPart = t('profile.openrouter.price.perMillionIn', { usd: inUsd });
+  return outUsd === null ? inPart : `${inPart} · ${t('profile.openrouter.price.perMillionOut', { usd: outUsd })}`;
+}
+
+/**
+ * The reported price of an audio model, stated as a bare number.
+ *
+ * Deliberately unitless: see the file header. The caller shows this next to a link to the model page,
+ * where the unit is written out, and next to the measured cost of a real transcription.
+ */
+export function audioPriceLabel(model, t) {
+  const raw = model?.pricing?.prompt;
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return null;
+  if (n === 0) return t('profile.openrouter.price.free');
+  // Trailing zeros stripped: 0.00150 reads as a different number from 0.0015 to a human eye.
+  return t('profile.openrouter.price.audioReported', { value: String(Number(n.toPrecision(6))) });
+}
+
+/** The model's page on OpenRouter. Only meaningful for OpenRouter itself. */
+export function modelPageUrl(modelId) {
+  return `https://openrouter.ai/${modelId}`;
+}
+
+/** Context length as "200 k", or null. */
+export function contextLabel(model) {
+  const n = Number(model?.context_length);
+  if (!Number.isFinite(n) || n <= 0) return null;
+  return n >= 1000 ? `${Math.round(n / 1000)} k` : String(n);
+}
+
+/**
+ * The short "recommended" group shown above the full list.
+ *
+ * Derived from the live catalogue by rule, never a hardcoded list of slugs: the catalogue changes
+ * weekly, and a pinned list would rot silently into recommending models that no longer exist.
+ *
+ *  - transcription: the whole list is small (13 models), so it is simply ordered by reported price.
+ *  - vision: image-capable models, cheapest input first.
+ *  - chat: the largest context in each of three price bands (free / under $1 per M / above), which
+ *    surfaces one sensible default per budget rather than 336 undifferentiated rows.
+ */
+export function rankModels(models, modality) {
+  const list = Array.isArray(models) ? models.slice() : [];
+  const priceOf = (m) => {
+    const n = Number(m?.pricing?.prompt);
+    return Number.isFinite(n) ? n : Number.POSITIVE_INFINITY;
+  };
+
+  if (modality === 'transcription' || modality === 'speech') {
+    return list.sort((a, b) => priceOf(a) - priceOf(b));
+  }
+
+  if (modality === 'vision') {
+    return list.filter(acceptsImages).sort((a, b) => priceOf(a) - priceOf(b));
+  }
+
+  const byContext = (a, b) => (Number(b.context_length) || 0) - (Number(a.context_length) || 0);
+  const bands = [
+    list.filter((m) => isFree(m)),
+    list.filter((m) => !isFree(m) && perMillion(m?.pricing?.prompt) !== null && perMillion(m.pricing.prompt) < 1),
+    list.filter((m) => perMillion(m?.pricing?.prompt) !== null && perMillion(m.pricing.prompt) >= 1),
+  ];
+  const picked = [];
+  const seen = new Set();
+  for (const band of bands) {
+    for (const m of band.sort(byContext).slice(0, 2)) {
+      if (!seen.has(m.id)) { seen.add(m.id); picked.push(m); }
+    }
+  }
+  // The free router is a genuine default (no vendor pinned) and is worth offering even when the
+  // banding above did not surface it.
+  const free = list.find((m) => m.id === 'openrouter/free');
+  if (free && !seen.has(free.id)) picked.unshift(free);
+  return picked;
+}
+
+/** Case-insensitive match over id and display name. */
+export function matchesQuery(model, query) {
+  const q = String(query || '').trim().toLowerCase();
+  if (!q) return true;
+  return String(model.id).toLowerCase().includes(q) || String(model.name || '').toLowerCase().includes(q);
+}