aimeat 2.4.0 → 2.6.0

package/dist/public/views/profile/openrouter-settings.js

@@ -1,35 +1,34 @@
 /**
  * @file openrouter-settings.js
- * @description AI provider configuration panel — OpenRouter / LM Studio / custom
- *   OpenAI-compatible provider, API key, model + vision model, sampling params, and the
- *   AI-apps daily-budget / per-app spend panel. Standalone; used by the profile AI tab and
- *   by any view that embeds AI-provider settings.
- * @structure
- *   - OpenRouterSettings: collapsible panel for AI provider, API key, model, auto-retry, budget
- * @usage
- *   import { OpenRouterSettings } from './openrouter-settings.js';
+ * @description AI provider configuration — OpenRouter / LM Studio / custom OpenAI-compatible
+ *   endpoint, the API key, the five model roles (default, reasoning, execution, vision,
+ *   speech-to-text), sampling parameters, and the AI spend panel.
+ *
+ *   Four sections, each saving its OWN fields where the user is looking. One Save at the bottom of a
+ *   single long form was the standing complaint: the key was typed at the top and the button that
+ *   stored it sat ten fields and an entire budget panel below, so "did that save?" had no answer
+ *   where it was asked. PUT /v1/openrouter/settings is a partial update, so per-section saving needs
+ *   no server change.
+ * @structure OpenRouterSettings (container + state) · SttTestPanel · ParamsSection ·
+ *   openrouter/model-picker.js · openrouter/pricing.js · openrouter/budget-panel.js
+ * @usage import { OpenRouterSettings } from './openrouter-settings.js';
  * @version-history
- *   v2.1.0 — 2026-08-01 — TARGET-058 Phase 9 step 0. "Test" now distinguishes a spent daily budget
- *     from a failed connection. Phase 8b routed the test through the completion chokepoint, which
- *     correctly made it refusable at 402 — but the panel headlined every failure "Connection failed",
- *     so a person verifying their setup was told to doubt a key that was working.
+ *   v3.0.0 — 2026-08-01 — Sectioned rework. Save-next-to-the-key; searchable model pickers showing
+ *     price, context and a link to the model's page (a flat <select> of 336 unlabelled options was
+ *     unusable); reasoning + execution pickers surfaced at last (the server has stored those two
+ *     since v1.x with no UI to set them); speech-to-text model + language + a MEASURED test
+ *     transcription, because an audio model's listed price carries no unit; the spend panel
+ *     translated and moved to openrouter/budget-panel.js (it was hardcoded English). The
+ *     onSettingsChange contract and the startOpen prop are unchanged for all three callers.
+ *   v2.1.0 — 2026-08-01 — TARGET-058 Phase 9 step 0. "Test" distinguishes a spent daily budget from
+ *     a failed connection; headlining a 402 as "Connection failed" sent people off to doubt a key
+ *     that was working. (Behaviour carried into v3.)
  *   v2.0.0 — 2026-07-18 — Split out of generator-settings.js (SettingsCollectionView removed with
- *     the deleted Generator feature); dropped the generator.js project-settings import. OpenRouterSettings unchanged.
- *   v1.5.0 — 2026-07-05 — Model dropdown now populates for custom OpenAI-compatible providers
- *     (e.g. NVIDIA NIM https://integrate.api.nvidia.com/v1): reload models after every save (not
- *     only when a new key is typed, so switching base URL refreshes the list), surface model-load
- *     failures inline, and add a "Refresh models" button with a live count. Pairs with the
- *     listModels() name→id fallback fix in services/openrouter.ts.
- *   v1.4.1 — 2026-07-05 — Per-app limits table also lists apps active in the last 30 days (from the
- *     history chart), not only apps that spent TODAY — so a cap can be set even when today's spend is $0.
- *   v1.4.0 — 2026-07-05 — AI apps budget panel: add a per-app stacked "usage over time" chart (30 days,
- *     cost⇄tokens toggle) fed by GET /v1/ai/usage/history, below the today bar + per-app table.
- *   v1.3.0 — 2026-07-05 — AI apps budget panel: per-app daily caps are now VISIBLE + EDITABLE inline
- *     (each app defaults to the whole daily budget; set a cap to throttle one app). Was API-only.
- *   v1.2.0 — 2026-06-24 — Add a Vision model selector (a vision-capable model, e.g. qwen-2.5-VL) used
- *     for image inputs — the Secretary's doc/image intake sends attached images to this model.
- *   v1.1.0 — 2026-04-01 — Add temperature, top_p, max_tokens model parameter fields
- *   v1.0.0 — 2026-03-22 — Extracted from generator-tab.js (was inline in v5.1.0+)
+ *     the deleted Generator feature); dropped the generator.js project-settings import.
+ *   v1.5.0 — 2026-07-05 — Model dropdown populates for custom OpenAI-compatible providers.
+ *   v1.4.0 — 2026-07-05 — AI apps budget panel: per-app stacked usage chart.
+ *   v1.2.0 — 2026-06-24 — Vision model selector.
+ *   v1.0.0 — 2026-03-22 — Extracted from generator-tab.js
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -37,43 +36,70 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { apiGet, apiPut, apiPost, apiDelete } from '/js/api.js';
-import { UsageChart, colorForIndex } from '/components/UsageChart.js';
 import { useConfirm } from '/components/Modal.js';
+import { VoiceRecorder } from '/components/VoiceRecorder.js';
 import { swallowed } from '/js/swallowed.js';
-
-/** Compact number (73306 → "73.3k") for token axis/labels. */
-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';
+import { ModelPicker } from './openrouter/model-picker.js';
+import { AiAppsBudgetPanel } from './openrouter/budget-panel.js';
+
+/** Language hints offered for transcription. Auto-detect is first and is the right answer for
+ *  mixed-language speech; a hint measurably helps when the language is known. */
+const STT_LANGS = ['', 'fi', 'en', 'sv', 'de', 'fr', 'es', 'et'];
+
+/** Read a File as bare base64 (no data: prefix) — the shape /v1/ai/transcribe takes inline. */
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onerror = () => reject(new Error('read failed'));
+    fr.onload = () => {
+      const s = String(fr.result || '');
+      const comma = s.indexOf(',');
+      resolve(comma >= 0 ? s.slice(comma + 1) : s);
+    };
+    fr.readAsDataURL(file);
+  });
 }
 
-/* ── OpenRouter / LM Studio / Custom Settings ────────── */
-
 export function OpenRouterSettings({ onSettingsChange, startOpen = false }) {
   const { confirm, ConfirmUI } = useConfirm();
   const [collapsed, setCollapsed] = useState(!startOpen);
+  const [loaded, setLoaded] = useState(false);
+
+  // connection
   const [hasApiKey, setHasApiKey] = useState(false);
   const [apiKey, setApiKey] = useState('');
+  const [provider, setProvider] = useState('openrouter');
+  const [baseUrl, setBaseUrl] = useState('');
+  const [savingKey, setSavingKey] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [connMsg, setConnMsg] = useState(null);
+
+  // models
   const [model, setModel] = useState('');
+  const [reasoningModel, setReasoningModel] = useState('');
+  const [executionModel, setExecutionModel] = useState('');
   const [visionModel, setVisionModel] = useState('');
+  const [sttModel, setSttModel] = useState('');
+  const [sttLanguage, setSttLanguage] = useState('');
   const [models, setModels] = useState([]);
+  const [sttModels, setSttModels] = useState([]);
   const [modelsLoading, setModelsLoading] = useState(false);
   const [modelsError, setModelsError] = useState(null);
+  const [savingModels, setSavingModels] = useState(false);
+  const [modelsMsg, setModelsMsg] = useState(null);
+
+  // params
   const [autoRetry, setAutoRetry] = useState(false);
   const [maxRetries, setMaxRetries] = useState(3);
-  const [provider, setProvider] = useState('openrouter');
-  const [baseUrl, setBaseUrl] = useState('');
   const [temperature, setTemperature] = useState('');
   const [topP, setTopP] = useState('');
   const [maxTokens, setMaxTokens] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [testing, setTesting] = useState(false);
-  const [message, setMessage] = useState(null); // { text, error }
-  const [loaded, setLoaded] = useState(false);
+  const [savingParams, setSavingParams] = useState(false);
+  const [paramsMsg, setParamsMsg] = useState(null);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- Mount-only settings load; loadSettings (and the loadModels it calls) use only stable setters/t.
+  const isOpenRouter = provider === 'openrouter';
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only load; the loaders use stable setters
   useEffect(() => { loadSettings(); }, []);
 
   async function loadSettings() {
@@ -82,7 +108,11 @@ export function OpenRouterSettings({ onSettingsChange, startOpen = false }) {
       if (resp.ok !== false && resp.data) {
         setHasApiKey(!!resp.data.hasApiKey);
         setModel(resp.data.model || '');
+        setReasoningModel(resp.data.reasoningModel || '');
+        setExecutionModel(resp.data.executionModel || '');
         setVisionModel(resp.data.visionModel || '');
+        setSttModel(resp.data.sttModel || '');
+        setSttLanguage(resp.data.sttLanguage || '');
         setAutoRetry(!!resp.data.autoRetry);
         setMaxRetries(resp.data.maxRetries || 3);
         setProvider(resp.data.provider || 'openrouter');
@@ -99,528 +129,435 @@ export function OpenRouterSettings({ onSettingsChange, startOpen = false }) {
   // Notify parent whenever key settings change
   useEffect(() => {
     if (loaded && onSettingsChange) {
-      onSettingsChange({ hasApiKey: hasApiKey, autoRetry, maxRetries, provider, baseUrl });
+      onSettingsChange({ hasApiKey, autoRetry, maxRetries, provider, baseUrl });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- Notify parent only when the listed settings change; onSettingsChange is a caller callback intentionally excluded to avoid re-firing on every parent re-render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- onSettingsChange is a caller callback, intentionally excluded so it does not re-fire on every parent render
   }, [loaded, hasApiKey, autoRetry, maxRetries, provider, baseUrl]);
 
+  /**
+   * Two catalogues, not one filtered twice: OpenRouter's default /models contains no transcription
+   * models at all, so the STT picker is empty unless its list is fetched with its own modality.
+   */
   async function loadModels() {
     setModelsLoading(true);
     setModelsError(null);
-    try {
-      const resp = await apiGet('/v1/openrouter/models');
-      if (resp.ok !== false && Array.isArray(resp.data?.models)) {
-        setModels(resp.data.models);
-        if (resp.data.models.length === 0) setModelsError(t('profile.generator.openrouter.modelsEmpty'));
-      } else {
-        setModels([]);
-        setModelsError(resp.error?.message || t('profile.generator.openrouter.modelsError'));
-      }
-    } catch (e) {
+    const [chat, stt] = await Promise.all([
+      apiGet('/v1/openrouter/models').catch(e => ({ ok: false, error: { message: e?.message } })),
+      apiGet('/v1/openrouter/models?modality=transcription').catch(e => {
+        // A provider with no transcription catalogue and a provider that failed to answer look the
+        // same from here, so the failure is logged rather than silently read as "none available".
+        swallowed('openrouter-settings: stt model list', e);
+        return { ok: false, data: null };
+      }),
+    ]);
+    if (chat && chat.ok !== false && Array.isArray(chat.data?.models)) {
+      setModels(chat.data.models);
+      if (chat.data.models.length === 0) setModelsError(t('profile.openrouter.modelsEmpty'));
+    } else {
       setModels([]);
-      setModelsError(e?.message || t('profile.generator.openrouter.modelsError'));
+      setModelsError(chat?.error?.message || t('profile.openrouter.modelsError'));
     }
+    // A provider with no transcription catalogue is not an error — it simply has none to offer, and
+    // the STT section says so instead of showing an empty picker with no explanation.
+    setSttModels((stt && stt.ok !== false && Array.isArray(stt.data?.models)) ? stt.data.models : []);
     setModelsLoading(false);
   }
 
-  function showMsg(text, error = false) {
-    setMessage({ text, error });
-    setTimeout(() => setMessage(null), 4000);
+  function flash(setter, text, error = false) {
+    setter({ text, error });
+    setTimeout(() => setter(null), 5000);
   }
 
-  async function handleSave() {
-    setSaving(true);
+  /** Save ONLY the connection fields, so the answer to "did my key save?" appears beside the key. */
+  async function saveKey() {
+    setSavingKey(true);
     try {
-      const body = { model, visionModel: visionModel || null, autoRetry, maxRetries: parseInt(maxRetries) || 3, provider, baseUrl };
-      body.temperature = temperature !== '' ? parseFloat(temperature) : null;
-      body.top_p = topP !== '' ? parseFloat(topP) : null;
-      body.max_tokens = maxTokens !== '' ? parseInt(maxTokens) : null;
+      const body = { provider, baseUrl };
       if (apiKey) body.apiKey = apiKey;
       const resp = await apiPut('/v1/openrouter/settings', body);
       if (resp.ok === false) {
-        showMsg(resp.error?.message || t('profile.generator.openrouter.testFail'), true);
+        flash(setConnMsg, resp.error?.message || t('profile.openrouter.saveFailed'), true);
       } else {
-        showMsg(t('profile.generator.openrouter.apiKeySaved'));
-        setHasApiKey(true);
+        flash(setConnMsg, apiKey ? t('profile.openrouter.keySaved') : t('profile.openrouter.providerSaved'));
+        if (apiKey) setHasApiKey(true);
         setApiKey('');
-        // Reload models after every save — the list is fetched from the provider's
-        // /v1/models using the just-saved base URL + key, so switching provider (e.g.
-        // to NVIDIA's integrate.api.nvidia.com/v1) refreshes it even with no new key.
+        // Refetch after every save: the list comes from the just-saved base URL + key, so switching
+        // provider refreshes it even when no new key was typed.
         loadModels();
       }
     } catch (e) {
-      showMsg(e.message, true);
+      flash(setConnMsg, e.message, true);
+    }
+    setSavingKey(false);
+  }
+
+  async function saveModels() {
+    setSavingModels(true);
+    try {
+      const resp = await apiPut('/v1/openrouter/settings', {
+        model,
+        reasoningModel,
+        executionModel,
+        visionModel: visionModel || null,
+        sttModel: sttModel || null,
+        sttLanguage: sttLanguage || null,
+        provider,
+        baseUrl,
+      });
+      if (resp.ok === false) flash(setModelsMsg, resp.error?.message || t('profile.openrouter.saveFailed'), true);
+      else flash(setModelsMsg, t('profile.openrouter.modelsSaved'));
+    } catch (e) {
+      flash(setModelsMsg, e.message, true);
     }
-    setSaving(false);
+    setSavingModels(false);
+  }
+
+  async function saveParams() {
+    setSavingParams(true);
+    try {
+      const resp = await apiPut('/v1/openrouter/settings', {
+        autoRetry,
+        maxRetries: parseInt(maxRetries) || 3,
+        temperature: temperature !== '' ? parseFloat(temperature) : null,
+        top_p: topP !== '' ? parseFloat(topP) : null,
+        max_tokens: maxTokens !== '' ? parseInt(maxTokens) : null,
+        provider,
+        baseUrl,
+      });
+      if (resp.ok === false) flash(setParamsMsg, resp.error?.message || t('profile.openrouter.saveFailed'), true);
+      else flash(setParamsMsg, t('profile.openrouter.paramsSaved'));
+    } catch (e) {
+      flash(setParamsMsg, e.message, true);
+    }
+    setSavingParams(false);
   }
 
   async function handleTest() {
     setTesting(true);
+    const started = Date.now();
     try {
       const resp = await apiPost('/v1/openrouter/test');
       if (resp.ok === false) {
-        // A connectivity test is a real, billable completion, so it is REFUSED once the day's budget
-        // is spent — and that refusal is not a connection failure. Headlining it "Connection failed"
-        // sends someone off to check a key that was never the problem, which is exactly the wrong
-        // conclusion to hand a person who is trying to verify their setup.
+        // A refused test is not necessarily a broken connection: the completion chokepoint also
+        // refuses when the daily budget is spent. Headlining that "Connection failed" sends someone
+        // off to check a key that was never the problem.
         const budgetSpent = resp.error?.code === 'QUOTA_EXHAUSTED' || resp.error?.code === 'APP_QUOTA_EXHAUSTED';
-        const head = budgetSpent
-          ? t('profile.generator.openrouter.testBudgetSpent')
-          : t('profile.generator.openrouter.testFail');
-        showMsg(head + (resp.error?.message ? ': ' + resp.error.message : ''), true);
+        const head = budgetSpent ? t('profile.openrouter.testBudgetSpent') : t('profile.openrouter.testFail');
+        // The provider's own sentence stays: it is the part that says what is actually wrong.
+        flash(setConnMsg, head + (resp.error?.message ? ': ' + resp.error.message : ''), true);
       } else {
-        showMsg(t('profile.generator.openrouter.testSuccess'));
+        flash(setConnMsg, t('profile.openrouter.testOk', {
+          model: resp.data?.model || '', ms: Date.now() - started,
+        }));
       }
     } catch (e) {
-      showMsg(t('profile.generator.openrouter.testFail') + ': ' + e.message, true);
+      flash(setConnMsg, `${t('profile.openrouter.testFail')}: ${e.message}`, true);
     }
     setTesting(false);
   }
 
   function handleDelete() {
-    confirm(t('profile.generator.openrouter.deleteConfirm'), async () => {
+    confirm(t('profile.openrouter.deleteConfirm'), async () => {
       try {
         await apiDelete('/v1/openrouter/settings');
-        setHasApiKey(false);
-        setApiKey('');
-        setModel('');
-        setVisionModel('');
-        setModels([]);
-        setModelsError(null);
-        setAutoRetry(false);
-        setMaxRetries(3);
-        setTemperature('');
-        setTopP('');
-        setMaxTokens('');
-        showMsg(t('profile.generator.openrouter.delete'));
+        setHasApiKey(false); setApiKey('');
+        setModel(''); setReasoningModel(''); setExecutionModel('');
+        setVisionModel(''); setSttModel(''); setSttLanguage('');
+        setModels([]); setSttModels([]); setModelsError(null);
+        setAutoRetry(false); setMaxRetries(3);
+        setTemperature(''); setTopP(''); setMaxTokens('');
+        flash(setConnMsg, t('profile.openrouter.deleted'));
       } catch (e) {
-        showMsg(e.message, true);
+        flash(setConnMsg, e.message, true);
       }
     }, { danger: true });
   }
 
   if (!loaded) return null;
 
+  const keyed = hasApiKey || !!apiKey;
+  const pickerProps = { models, isOpenRouter, disabled: !keyed };
+
   return html`
-    <div class="pf-gen-or-wrapper">
-      <button class="pf-gen-or-toggle" onClick=${() => setCollapsed(!collapsed)}>
-        <span class="pf-gen-or-toggle-icon">${collapsed ? '\u25B6' : '\u25BC'}</span>
-        <span>${t('profile.generator.openrouter.title')}</span>
-        ${hasApiKey && html`<span class="pf-gen-or-status-dot"></span>`}
+    <div class="pf-or-wrapper">
+      <button class="pf-or-toggle" onClick=${() => setCollapsed(!collapsed)}>
+        <span class="pf-or-toggle-icon">${collapsed ? '▶' : '▼'}</span>
+        <span>${t('profile.openrouter.title')}</span>
+        <span class=${hasApiKey ? 'pf-or-status pf-or-status--on' : 'pf-or-status'}>
+          ${hasApiKey ? t('profile.openrouter.statusReady') : t('profile.openrouter.statusNoKey')}
+        </span>
       </button>
+
       ${!collapsed && html`
-        <div class="pf-gen-or-panel">
-          <!-- Provider selector -->
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-label">${t('profile.generator.openrouter.provider')}</label>
-            <div class="pf-gen-or-radio-group">
-              ${['openrouter', 'lmstudio', 'custom'].map(p => html`
-                <label class="pf-gen-or-radio-label">
-                  <input type="radio" name="ai-provider" value=${p}
-                    checked=${provider === p}
-                    onChange=${() => {
-                      setProvider(p);
-                      if (p === 'lmstudio') setBaseUrl('http://localhost:1234/v1');
-                      else if (p === 'openrouter') setBaseUrl('');
-                    }} />
-                  ${t('profile.generator.openrouter.provider_' + p)}
-                </label>
-              `)}
+        <div class="pf-or-panel">
+
+          <!-- ── 1. Connection ───────────────────────────────── -->
+          <section class="pf-or-section">
+            <h4 class="pf-or-section-title">${t('profile.openrouter.section.connection')}</h4>
+
+            <div class="pf-or-field">
+              <label class="pf-or-label">${t('profile.openrouter.provider')}</label>
+              <div class="pf-or-radio-group">
+                ${['openrouter', 'lmstudio', 'custom'].map(p => html`
+                  <label class="pf-or-radio-label" key=${p}>
+                    <input type="radio" name="ai-provider" value=${p} checked=${provider === p}
+                      onChange=${() => {
+                        setProvider(p);
+                        if (p === 'lmstudio') setBaseUrl('http://localhost:1234/v1');
+                        else if (p === 'openrouter') setBaseUrl('');
+                      }} />
+                    ${t('profile.openrouter.provider_' + p)}
+                  </label>`)}
+              </div>
             </div>
-          </div>
 
-          <!-- Base URL (lmstudio / custom) -->
-          ${provider !== 'openrouter' && html`
-            <div class="pf-gen-or-field">
-              <label class="pf-gen-or-label">${t('profile.generator.openrouter.baseUrl')}</label>
-              <input
-                type="url"
-                class="pf-gen-or-input"
-                value=${baseUrl}
-                placeholder=${t('profile.generator.openrouter.baseUrl_hint')}
-                onInput=${e => setBaseUrl(e.target.value)}
-              />
+            ${!isOpenRouter && html`
+              <div class="pf-or-field">
+                <label class="pf-or-label">${t('profile.openrouter.baseUrl')}</label>
+                <input type="url" class="pf-or-input" value=${baseUrl}
+                  placeholder=${t('profile.openrouter.baseUrl_hint')}
+                  onInput=${e => setBaseUrl(e.target.value)} />
+              </div>`}
+
+            <div class="pf-or-field">
+              <label class="pf-or-label">${t('profile.openrouter.apiKey')}</label>
+              <div class="pf-or-key-row">
+                <input type="password" autocomplete="off" data-1p-ignore data-lpignore="true"
+                  class="pf-or-input pf-or-key-input"
+                  placeholder=${hasApiKey ? t('profile.openrouter.apiKeyMasked') : t('profile.openrouter.apiKeyPlaceholder')}
+                  value=${apiKey} onInput=${e => setApiKey(e.target.value)} />
+                <button class="btn-primary btn-sm" onClick=${saveKey} disabled=${savingKey}>
+                  ${savingKey ? '…' : t('profile.openrouter.saveKey')}
+                </button>
+                ${hasApiKey && html`
+                  <button class="btn-outline btn-sm" onClick=${handleTest} disabled=${testing}>
+                    ${testing ? html`<span class="spinner"></span>` : ''}${t('profile.openrouter.testConnection')}
+                  </button>
+                  <button class="btn-ghost btn-sm pf-or-delete" onClick=${handleDelete}>
+                    ${t('profile.openrouter.delete')}
+                  </button>`}
+              </div>
+              ${connMsg && html`<div class=${`pf-or-message ${connMsg.error ? 'pf-or-message-error' : 'pf-or-message-success'}`}>${connMsg.text}</div>`}
+              ${isOpenRouter && html`
+                <div class="pf-or-links">
+                  <a href="https://openrouter.ai/keys" target="_blank" rel="noopener">${t('profile.openrouter.getKeyLink')} ↗</a>
+                  <a href="https://openrouter.ai/credits" target="_blank" rel="noopener">${t('profile.openrouter.creditsLink')} ↗</a>
+                </div>`}
             </div>
-          `}
-
-          <!-- API Key -->
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-label">${t('profile.generator.openrouter.apiKey')}</label>
-            <input
-              type="password"
-              autocomplete="off" data-1p-ignore data-lpignore="true"
-              class="pf-gen-or-input"
-              placeholder=${hasApiKey ? t('profile.generator.openrouter.apiKeyMasked') : t('profile.generator.openrouter.apiKeyPlaceholder')}
-              value=${apiKey}
-              onInput=${e => setApiKey(e.target.value)}
-            />
-          </div>
-
-          <!-- Model -->
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-label">${t('profile.generator.openrouter.model')}</label>
-            ${modelsLoading
-              ? html`<span class="pf-gen-or-loading">${t('profile.loading')}</span>`
-              : html`
-                <select
-                  class="pf-gen-or-select"
-                  value=${model}
-                  onChange=${e => setModel(e.target.value)}
-                  disabled=${!hasApiKey && !apiKey}
-                >
-                  <option value="">${t('profile.generator.openrouter.modelSelect')}</option>
-                  ${models.map(m => html`
-                    <option value=${m.id}>${m.name || m.id}</option>
-                  `)}
-                </select>
-              `
-            }
-            <div class="pf-gen-or-param-row pf-gen-or-model-row">
-              <button type="button" class="btn-outline btn-sm"
-                onClick=${loadModels} disabled=${modelsLoading || !hasApiKey}>
-                ${t('profile.generator.openrouter.modelsRefresh')}${models.length ? ` (${models.length})` : ''}
+          </section>
+
+          <!-- ── 2. Models ───────────────────────────────────── -->
+          <section class="pf-or-section">
+            <h4 class="pf-or-section-title">${t('profile.openrouter.section.models')}</h4>
+            <div class="pf-or-models-head">
+              <button type="button" class="btn-outline btn-sm" onClick=${loadModels}
+                      disabled=${modelsLoading || !keyed}>
+                ${t('profile.openrouter.modelsRefresh')}${models.length ? ` (${models.length})` : ''}
               </button>
-              <span class=${modelsError ? 'pf-gen-or-param-hint pf-gen-or-model-error' : 'pf-gen-or-param-hint'}>
-                ${modelsError || t('profile.generator.openrouter.modelsHint')}
+              <span class=${modelsError ? 'pf-or-hint pf-or-hint--error' : 'pf-or-hint'}>
+                ${modelsError || t('profile.openrouter.modelsHint')}
               </span>
             </div>
-          </div>
-
-          <!-- Vision model (image inputs — Secretary doc/image intake) -->
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-label">${t('profile.generator.openrouter.visionModel')}</label>
-            ${modelsLoading
-              ? html`<span class="pf-gen-or-loading">${t('profile.loading')}</span>`
-              : html`
-                <select
-                  class="pf-gen-or-select"
-                  value=${visionModel}
-                  onChange=${e => setVisionModel(e.target.value)}
-                  disabled=${!hasApiKey && !apiKey}
-                >
-                  <option value="">${t('profile.generator.openrouter.visionModelNone')}</option>
-                  ${models.map(m => html`
-                    <option value=${m.id}>${m.name || m.id}</option>
-                  `)}
-                </select>
-              `
-            }
-            <span class="pf-gen-or-param-hint">${t('profile.generator.openrouter.visionModel_hint')}</span>
-          </div>
-
-          <!-- Auto-retry -->
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-checkbox">
-              <input
-                type="checkbox"
-                checked=${autoRetry}
-                onChange=${e => setAutoRetry(e.target.checked)}
-              />
-              ${t('profile.generator.openrouter.autoRetry')}
-            </label>
-          </div>
-
-          <!-- Max retries (conditional) -->
-          ${autoRetry && html`
-            <div class="pf-gen-or-field">
-              <label class="pf-gen-or-label">${t('profile.generator.openrouter.maxRetries')}</label>
-              <input
-                type="number"
-                class="pf-gen-or-input pf-gen-or-input-sm"
-                min="1"
-                max="10"
-                value=${maxRetries}
-                onInput=${e => setMaxRetries(Math.min(10, Math.max(1, parseInt(e.target.value) || 1)))}
-              />
-            </div>
-          `}
-
-          <!-- Model Parameters -->
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-label">${t('profile.generator.openrouter.temperature')}</label>
-            <div class="pf-gen-or-param-row">
-              <input
-                type="number"
-                class="pf-gen-or-input pf-gen-or-input-sm"
-                min="0"
-                max="2"
-                step="0.1"
-                placeholder="default"
-                value=${temperature}
-                onInput=${e => setTemperature(e.target.value)}
-              />
-              <span class="pf-gen-or-param-hint">${t('profile.generator.openrouter.temperature_hint')}</span>
-            </div>
-          </div>
-
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-label">${t('profile.generator.openrouter.topP')}</label>
-            <div class="pf-gen-or-param-row">
-              <input
-                type="number"
-                class="pf-gen-or-input pf-gen-or-input-sm"
-                min="0"
-                max="1"
-                step="0.05"
-                placeholder="default"
-                value=${topP}
-                onInput=${e => setTopP(e.target.value)}
-              />
-              <span class="pf-gen-or-param-hint">${t('profile.generator.openrouter.topP_hint')}</span>
-            </div>
-          </div>
 
-          <div class="pf-gen-or-field">
-            <label class="pf-gen-or-label">${t('profile.generator.openrouter.maxTokens')}</label>
-            <div class="pf-gen-or-param-row">
-              <input
-                type="number"
-                class="pf-gen-or-input pf-gen-or-input-sm"
-                min="256"
-                max="128000"
-                step="256"
-                placeholder="default"
-                value=${maxTokens}
-                onInput=${e => setMaxTokens(e.target.value)}
-              />
-              <span class="pf-gen-or-param-hint">${t('profile.generator.openrouter.maxTokens_hint')}</span>
-            </div>
-          </div>
+            ${modelsLoading ? html`<div class="pf-or-loading">${t('profile.loading')}</div>` : html`
+              <div class="pf-or-field">
+                <label class="pf-or-label">${t('profile.openrouter.model.default')}</label>
+                <${ModelPicker} ...${pickerProps} value=${model} onChange=${setModel} modality="chat"
+                  allowCustom=${!isOpenRouter} />
+              </div>
+
+              <details class="pf-or-roles">
+                <summary class="pf-or-roles-summary">${t('profile.openrouter.model.rolesSummary')}</summary>
+                <div class="pf-or-field">
+                  <label class="pf-or-label">${t('profile.openrouter.model.reasoning')}</label>
+                  <${ModelPicker} ...${pickerProps} value=${reasoningModel} onChange=${setReasoningModel}
+                    modality="chat" allowNone=${true} allowCustom=${!isOpenRouter} />
+                  <span class="pf-or-hint">${t('profile.openrouter.model.reasoning_hint')}</span>
+                </div>
+                <div class="pf-or-field">
+                  <label class="pf-or-label">${t('profile.openrouter.model.execution')}</label>
+                  <${ModelPicker} ...${pickerProps} value=${executionModel} onChange=${setExecutionModel}
+                    modality="chat" allowNone=${true} allowCustom=${!isOpenRouter} />
+                  <span class="pf-or-hint">${t('profile.openrouter.model.execution_hint')}</span>
+                </div>
+              </details>
+
+              <div class="pf-or-field">
+                <label class="pf-or-label">${t('profile.openrouter.model.vision')}</label>
+                <${ModelPicker} ...${pickerProps} value=${visionModel} onChange=${setVisionModel}
+                  modality="vision" allowNone=${true} allowCustom=${!isOpenRouter}
+                  noneLabel=${t('profile.openrouter.model.visionNone')} />
+                <span class="pf-or-hint">${t('profile.openrouter.model.vision_hint')}</span>
+              </div>
+
+              <div class="pf-or-field pf-or-stt">
+                <label class="pf-or-label">${t('profile.openrouter.model.stt')}</label>
+                ${sttModels.length === 0 && keyed
+                  ? html`<div class="pf-or-hint">${t('profile.openrouter.stt.listEmpty')}</div>` : null}
+                <${ModelPicker} models=${sttModels} isOpenRouter=${isOpenRouter} disabled=${!keyed}
+                  value=${sttModel} onChange=${setSttModel} modality="transcription" allowNone=${true}
+                  allowCustom=${!isOpenRouter} noneLabel=${t('profile.openrouter.model.sttNone')} />
+                <span class="pf-or-hint">${t('profile.openrouter.model.stt_hint')}</span>
+
+                <div class="pf-or-inline-field">
+                  <label class="pf-or-label pf-or-label--inline">${t('profile.openrouter.stt.language')}</label>
+                  <select class="pf-or-select pf-or-select--sm" value=${sttLanguage}
+                          onChange=${e => setSttLanguage(e.target.value)}>
+                    ${STT_LANGS.map(code => html`
+                      <option key=${code || 'auto'} value=${code}>
+                        ${code ? t('profile.openrouter.stt.lang_' + code) : t('profile.openrouter.stt.languageAuto')}
+                      </option>`)}
+                  </select>
+                  <span class="pf-or-hint">${t('profile.openrouter.stt.language_hint')}</span>
+                </div>
+
+                <${SttTestPanel} sttModel=${sttModel} sttLanguage=${sttLanguage} />
+              </div>
+            `}
 
-          <!-- Message -->
-          ${message && html`
-            <div class="pf-gen-or-message ${message.error ? 'pf-gen-or-message-error' : 'pf-gen-or-message-success'}">
-              ${message.text}
-            </div>
-          `}
-
-          <!-- Apps AI budget — apps reach this key via /v1/ai/complete -->
-          ${hasApiKey && html`<${AiAppsBudgetPanel} />`}
-
-          <!-- Actions -->
-          <div class="pf-gen-or-actions">
-            <button class="btn-primary" onClick=${handleSave} disabled=${saving}>
-              ${saving ? '...' : t('profile.generator.openrouter.save')}
-            </button>
-            ${hasApiKey && html`
-              <button class="btn-outline" onClick=${handleTest} disabled=${testing}>
-                ${testing ? html`<span class="spinner"></span>` : ''}
-                ${t('profile.generator.openrouter.testConnection')}
+            <div class="pf-or-actions">
+              <button class="btn-primary" onClick=${saveModels} disabled=${savingModels}>
+                ${savingModels ? '…' : t('profile.openrouter.saveModels')}
               </button>
-              <button class="btn-outline btn-sm pf-gen-or-delete" onClick=${handleDelete}>
-                ${t('profile.generator.openrouter.delete')}
-              </button>
-            `}
-          </div>
-        </div>
-      `}
+              ${modelsMsg && html`<span class=${`pf-or-message ${modelsMsg.error ? 'pf-or-message-error' : 'pf-or-message-success'}`}>${modelsMsg.text}</span>`}
+            </div>
+          </section>
+
+          <!-- ── 3. Parameters ───────────────────────────────── -->
+          <${ParamsSection}
+            autoRetry=${autoRetry} setAutoRetry=${setAutoRetry}
+            maxRetries=${maxRetries} setMaxRetries=${setMaxRetries}
+            temperature=${temperature} setTemperature=${setTemperature}
+            topP=${topP} setTopP=${setTopP}
+            maxTokens=${maxTokens} setMaxTokens=${setMaxTokens}
+            saving=${savingParams} onSave=${saveParams} message=${paramsMsg} />
+
+          <!-- ── 4. Budget ───────────────────────────────────── -->
+          ${hasApiKey && html`
+            <section class="pf-or-section">
+              <h4 class="pf-or-section-title">${t('profile.openrouter.section.budget')}</h4>
+              <${AiAppsBudgetPanel} />
+            </section>`}
+        </div>`}
       <${ConfirmUI} />
-    </div>
-  `;
+    </div>`;
 }
 
 /**
- * Budget + spend panel for app-level AI use (/v1/ai/complete). Shows today's
- * total spend and per-app breakdown, lets the user set the daily USD cap.
+ * Record a few seconds and transcribe them for real.
  *
- * Numbers come from the server's tracked usage (token counts always exact,
- * cost is OpenRouter-reported when available, rough estimate otherwise).
- * Each app may spend up to the daily budget; a per-app cap (edited inline here)
- * throttles a single app below it.
+ * This answers a question the catalogue cannot: what a transcription actually costs. An audio model's
+ * listed price carries no unit — the same Whisper Large V3 reports 0.0015 on one provider and 0.111
+ * on another, per minute against per hour — so one measured call beats any figure derived from the
+ * model list. It also proves the whole chain end to end: microphone, upload, key, model.
  */
-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');  // chart metric: 'cost' | 'tokens'
-
-  useEffect(() => { reload(); }, []);
-
-  async function reload() {
-    const [u, s, hist] = await Promise.all([
-      apiGet('/v1/ai/usage').catch(err => { swallowed('openrouter-settings: reload', err); return null; }),
-      apiGet('/v1/ai/settings').catch(err => { swallowed('openrouter-settings: reload', err); return null; }),
-      apiGet('/v1/ai/usage/history?days=30').catch(err => { swallowed('openrouter-settings: reload', 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: `Cap for "${app}" must be a number 0–1000.`, 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 || 'Save failed');
-      setCapsMsg({ text: 'Per-app limits saved.' });
-      await reload();
-    } catch (e) {
-      setCapsMsg({ text: e.message || 'Save failed', error: true });
-    }
-    setSavingCaps(false);
-  }
+function SttTestPanel({ sttModel, sttLanguage }) {
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
 
-  async function saveBudget() {
-    setSaving(true); setMessage(null);
-    const n = Number(budgetInput);
-    if (!Number.isFinite(n) || n < 0 || n > 1000) {
-      setMessage({ text: 'Budget must be a number between 0 and 1000.', error: true });
-      setSaving(false); return;
-    }
+  async function run(file) {
+    setBusy(true); setError(null); setResult(null);
     try {
-      const r = await apiPost('/v1/ai/settings', { daily_budget_usd: n });
-      if (r.ok === false) throw new Error(r.error?.message || 'Save failed');
-      setMessage({ text: 'Budget saved.' });
-      setEditing(false);
-      await reload();
+      const audio_base64 = await fileToBase64(file);
+      const resp = await apiPost('/v1/ai/transcribe', {
+        audio_base64, mime: file.type, filename: file.name,
+        model: sttModel || undefined, language: sttLanguage || undefined, app_id: 'settings-test',
+      });
+      if (resp.ok === false) throw new Error(resp.error?.message || t('profile.openrouter.stt.testFailed'));
+      setResult(resp.data);
     } catch (e) {
-      setMessage({ text: e.message || 'Save failed', error: true });
+      setError(e.message || t('profile.openrouter.stt.testFailed'));
     }
-    setSaving(false);
+    setBusy(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 per-app cap for: spent today, OR active in the last 30 days (from the history
-  // chart), OR already have a configured cap. Without the history apps the table is hidden 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-gen-or-field pf-gen-spend-section">
-      <label class="pf-gen-or-label">💸 AI apps daily budget</label>
-      <div class="pf-gen-spend-desc">
-        Apps that call <code>AIMEAT.ai.complete()</code> use this key. This is the TOTAL across all
-        apps for the day; each app may spend up to this much unless you set a per-app limit below.
-        When the budget is hit, further calls return <code>QUOTA_EXHAUSTED</code>.
+    <div class="pf-or-stt-test">
+      <div class="pf-or-stt-test-head">
+        <${VoiceRecorder} maxSeconds=${30} disabled=${busy || !sttModel}
+          label=${t('profile.openrouter.stt.test')} className="btn-outline btn-sm"
+          onRecorded=${(file) => run(file)} />
+        ${busy ? html`<span class="pf-or-hint">${t('profile.openrouter.stt.testing')}</span>` : null}
+        ${!sttModel ? html`<span class="pf-or-hint">${t('profile.openrouter.stt.testNeedsModel')}</span>` : null}
       </div>
-
-      <div class="pf-gen-spend-bar-row">
-        <div class="pf-gen-spend-bar">
-          <div class="pf-gen-spend-bar-fill ${pct >= 90 ? 'crit' : pct >= 60 ? 'warn' : ''}" style="width:${pct}%"></div>
-          <div class="pf-gen-spend-bar-label">
-            $${spent.toFixed(4)} / $${budget.toFixed(2)} (${pct}%)
+      ${error ? html`<div class="pf-or-message pf-or-message-error">${error}</div>` : null}
+      ${result ? html`
+        <div class="pf-or-stt-result">
+          <div class="pf-or-stt-text">${result.text || t('profile.openrouter.stt.testSilent')}</div>
+          <div class="pf-or-stt-meta">
+            ${t('profile.openrouter.stt.measured', {
+              seconds: (Number(result.seconds) || 0).toFixed(1),
+              cost: (Number(result.usage?.cost_usd) || 0).toFixed(6),
+            })}
+            ${result.usage?.cost_exact === false
+              ? html` <span class="pf-or-hint">${t('profile.openrouter.stt.costNotReported')}</span>` : null}
           </div>
+        </div>` : null}
+    </div>`;
+}
+
+/** Sampling parameters. Collapsed by default: most owners never touch them, and four rarely-used
+ *  numeric fields sitting open is part of what pushed the save button off the screen before. */
+function ParamsSection({
+  autoRetry, setAutoRetry, maxRetries, setMaxRetries, temperature, setTemperature,
+  topP, setTopP, maxTokens, setMaxTokens, saving, onSave, message,
+}) {
+  return html`
+    <section class="pf-or-section">
+      <details class="pf-or-params">
+        <summary class="pf-or-section-title pf-or-params-summary">${t('profile.openrouter.section.params')}</summary>
+
+        <div class="pf-or-field">
+          <label class="pf-or-checkbox">
+            <input type="checkbox" checked=${autoRetry} onChange=${e => setAutoRetry(e.target.checked)} />
+            ${t('profile.openrouter.autoRetry')}
+          </label>
         </div>
-        ${editing ? html`
-          <input type="number" min="0" max="1000" step="0.10" value=${budgetInput}
-                 onInput=${e => setBudgetInput(e.target.value)}
-                 class="pf-gen-spend-budget-input" />
-          <button class="btn-primary btn-sm" onClick=${saveBudget} disabled=${saving}>
-            ${saving ? '...' : 'Save'}
-          </button>
-          <button class="btn-outline btn-sm" onClick=${() => setEditing(false)}>Cancel</button>
-        ` : html`
-          <button class="btn-outline btn-sm" onClick=${() => setEditing(true)}>Change</button>
-        `}
-      </div>
 
-      ${message && html`<div class="pf-gen-or-message pf-gen-spend-msg ${message.error ? 'pf-gen-or-message-error' : 'pf-gen-or-message-success'}">${message.text}</div>`}
+        ${autoRetry && html`
+          <div class="pf-or-field">
+            <label class="pf-or-label">${t('profile.openrouter.maxRetries')}</label>
+            <input type="number" class="pf-or-input pf-or-input-sm" min="1" max="10" value=${maxRetries}
+              onInput=${e => setMaxRetries(Math.min(10, Math.max(1, parseInt(e.target.value) || 1)))} />
+          </div>`}
+
+        <div class="pf-or-field">
+          <label class="pf-or-label">${t('profile.openrouter.temperature')}</label>
+          <div class="pf-or-param-row">
+            <input type="number" class="pf-or-input pf-or-input-sm" min="0" max="2" step="0.1"
+              placeholder=${t('profile.openrouter.paramDefault')} value=${temperature}
+              onInput=${e => setTemperature(e.target.value)} />
+            <span class="pf-or-hint">${t('profile.openrouter.temperature_hint')}</span>
+          </div>
+        </div>
 
-      ${appNames.length > 0 && html`
-        <details class="pf-gen-spend-details" open>
-          <summary class="pf-gen-spend-summary">
-            Per-app limits & spend (${appNames.length} app${appNames.length === 1 ? '' : 's'})
-          </summary>
-          <div class="pf-gen-spend-hint">
-            Each app may spend up to the daily budget above. Set a cap to throttle one app below it;
-            leave blank to use the full budget.
+        <div class="pf-or-field">
+          <label class="pf-or-label">${t('profile.openrouter.topP')}</label>
+          <div class="pf-or-param-row">
+            <input type="number" class="pf-or-input pf-or-input-sm" min="0" max="1" step="0.05"
+              placeholder=${t('profile.openrouter.paramDefault')} value=${topP}
+              onInput=${e => setTopP(e.target.value)} />
+            <span class="pf-or-hint">${t('profile.openrouter.topP_hint')}</span>
           </div>
-          <table class="pf-gen-spend-table">
-            <thead>
-              <tr>
-                <th>App</th>
-                <th class="num">Spent today</th>
-                <th class="num">Daily cap ($)</th>
-                <th class="num">Calls</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-gen-spend-cap-input" />
-                  </td>
-                  <td class="num">${s.calls || 0}</td>
-                </tr>`;
-              })}
-            </tbody>
-          </table>
-          <div class="pf-gen-spend-actions">
-            <button class="btn-primary btn-sm" onClick=${saveCaps} disabled=${savingCaps}>
-              ${savingCaps ? '...' : 'Save per-app limits'}
-            </button>
-            ${capsMsg && html`<span class="pf-gen-or-message ${capsMsg.error ? 'pf-gen-or-message-error' : 'pf-gen-or-message-success'}">${capsMsg.text}</span>`}
+        </div>
+
+        <div class="pf-or-field">
+          <label class="pf-or-label">${t('profile.openrouter.maxTokens')}</label>
+          <div class="pf-or-param-row">
+            <input type="number" class="pf-or-input pf-or-input-sm" min="256" max="128000" step="256"
+              placeholder=${t('profile.openrouter.paramDefault')} value=${maxTokens}
+              onInput=${e => setMaxTokens(e.target.value)} />
+            <span class="pf-or-hint">${t('profile.openrouter.maxTokens_hint')}</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 isTokens = metric === 'tokens';
-        const datasets = chartApps.map((app, i) => ({
-          label: app,
-          data: history.days.map((d) => {
-            const m = (d.per_app && d.per_app[app]) || {};
-            return (isTokens ? m.tokens : m.cost_usd) || 0;
-          }),
-          backgroundColor: colorForIndex(i),
-        }));
-        const yFormat = isTokens ? (v) => fmtCompact(v) : (v) => '$' + (Number(v) < 1 ? Number(v).toFixed(3) : Number(v).toFixed(2));
-        return html`
-          <div class="pf-gen-spend-chart-wrap">
-            <div class="pf-gen-spend-chart-head">
-              <span class="pf-gen-spend-chart-title">${t('profile.generator.aiUsageOverTime') || 'Usage over time (30 days)'}</span>
-              <span class="pf-gen-spend-metric-toggle">
-                <button class=${!isTokens ? 'btn-primary btn-sm' : 'btn-outline btn-sm'} onClick=${() => setMetric('cost')}>${t('profile.generator.aiMetricCost') || 'Cost'}</button>
-                <button class=${isTokens ? 'btn-primary btn-sm' : 'btn-outline btn-sm'} onClick=${() => setMetric('tokens')}>${t('profile.generator.aiMetricTokens') || 'Tokens'}</button>
-              </span>
-            </div>
-            <${UsageChart} stacked labels=${labels} datasets=${datasets} height=${220} yFormat=${yFormat} />
-          </div>`;
-      })()}
+        </div>
 
-      <div class="pf-gen-spend-footnote">
-        Cost is estimated when the provider doesn't report it (LM Studio, custom). Your
-        OpenRouter dashboard has the authoritative bill.
-      </div>
-    </div>
-  `;
+        <div class="pf-or-actions">
+          <button class="btn-primary btn-sm" onClick=${onSave} disabled=${saving}>
+            ${saving ? '…' : t('profile.openrouter.saveParams')}
+          </button>
+          ${message && html`<span class=${`pf-or-message ${message.error ? 'pf-or-message-error' : 'pf-or-message-success'}`}>${message.text}</span>`}
+        </div>
+      </details>
+    </section>`;
 }
-