aimeat 2.4.0 → 2.6.0

package/dist/public/views/profile/inbox-tab/use-voice.js

@@ -0,0 +1,50 @@
+/**
+ * @file public/views/profile/inbox-tab/use-voice.js
+ * @description The Inbox tab's voice-message state: whether this owner can transcribe at all, how
+ *   long the node lets a recording run, and the call that turns one voice attachment into text.
+ *   Extracted from inbox-tab.js to keep it under the max-file-lines rule.
+ * @structure useVoiceMessages(loadThread, activeConvRef) → { canTranscribe, voiceMaxSeconds, transcribeVoice }
+ * @usage const { canTranscribe, voiceMaxSeconds, transcribeVoice } = useVoiceMessages(loadThread, activeConvRef);
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Extracted from inbox-tab.js (voice messages).
+ */
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import { t } from '/js/i18n.js';
+import { apiGet } from '/js/api.js';
+import * as messages from '/js/services/messages.js';
+import { swallowed } from '/js/swallowed.js';
+
+/**
+ * @param {(conv: any, markRead?: boolean) => Promise<void>} loadThread
+ * @param {{ current: any }} activeConvRef  the OPEN conversation, read at call time
+ */
+export function useVoiceMessages(loadThread, activeConvRef) {
+  // canTranscribe answers "has this owner chosen a transcription model", which decides whether a
+  // voice bubble offers a Transcribe button or explains why it cannot. Read once per mount: an owner
+  // does not change it mid-thread, and polling it would be a request per render for one boolean.
+  const [canTranscribe, setCanTranscribe] = useState(null);
+  // Served by the node so the recorder stops at the operator's number rather than one compiled in.
+  const [voiceMaxSeconds, setVoiceMaxSeconds] = useState(300);
+
+  useEffect(() => {
+    apiGet('/v1/openrouter/settings')
+      .then((r) => {
+        setCanTranscribe(!!(r?.data?.sttModel));
+        const n = Number(r?.data?.limits?.voice_msg_max_seconds);
+        if (n > 0) setVoiceMaxSeconds(n);
+      })
+      .catch((err) => { swallowed('inbox-tab: stt settings', err); setCanTranscribe(false); });
+  }, []);
+
+  /** Transcribe one voice attachment on the caller's OWN copy, then reload the thread so the text
+   *  appears where the audio is. Errors are rethrown so the bubble can show them in place. */
+  const transcribeVoice = useCallback(async (msgId, attId) => {
+    const r = await messages.transcribeAttachment(msgId, attId);
+    if (r?.ok === false) throw new Error(r?.error?.message || t('inbox.transcribeFailed'));
+    const conv = activeConvRef.current;
+    if (conv) await loadThread(conv);
+    return r?.data;
+  }, [loadThread, activeConvRef]);
+
+  return { canTranscribe, voiceMaxSeconds, transcribeVoice };
+}

package/dist/public/views/profile/inbox-tab/voice-parts.js

@@ -0,0 +1,111 @@
+/**
+ * @file public/views/profile/inbox-tab/voice-parts.js
+ * @description The voice-message pieces of a message bubble: the in-place audio player and the
+ *   transcript row under it. Extracted from components.js purely to keep that file under the
+ *   max-file-lines rule; behaviour is unchanged.
+ *
+ *   Two rules live here. Only one player runs at a time (and starting one silences the read-aloud
+ *   engine, so a synthetic voice never talks over a human one). And transcription is never automatic:
+ *   it spends the owner's own AI budget, so it is always a click, and the button says what it will do.
+ * @structure fmtClock · stopOtherAudio · AudioAttachment · TranscriptPanel
+ * @usage import { AudioAttachment } from './voice-parts.js';
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Extracted from components.js (voice messages).
+ */
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { stop as stopSpeech } from '/js/services/speech-reader.js';
+
+/** Seconds → "0:14". */
+export function fmtClock(seconds) {
+  const s = Math.max(0, Math.round(Number(seconds) || 0));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+
+/** One voice message at a time. Two playing at once is noise, and a screen reader talking over a
+ *  recording is worse — so starting one stops every other player AND the read-aloud engine. */
+export function stopOtherAudio(current) {
+  document.querySelectorAll('audio.inbox-audio').forEach((el) => {
+    const player = /** @type {HTMLAudioElement} */ (el);
+    if (player !== current && !player.paused) player.pause();
+  });
+  stopSpeech();
+}
+
+/**
+ * The text of a voice message, and the button that produces it.
+ *
+ * Three states, none of them hidden: a transcript that came WITH the message (the sender wrote it,
+ * so reading it costs nothing), a transcript this reader produced, or an offer to produce one. With
+ * no transcription model configured the row says so and points at the settings instead of quietly
+ * rendering nothing — an empty space reads as broken.
+ */
+export function TranscriptPanel({ att, msgId, onTranscribe, canTranscribe }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [open, setOpen] = useState(false);
+  const tr = att.transcript;
+
+  async function run() {
+    setBusy(true); setError(null);
+    try {
+      await onTranscribe(msgId, att.id);
+      setOpen(true);
+    } catch (e) {
+      // Shown in place, not as a toast: "no model configured" and "daily budget spent" are both
+      // things the reader can act on, and they belong next to the button that produced them.
+      setError(e?.message || t('inbox.transcribeFailed'));
+    }
+    setBusy(false);
+  }
+
+  if (tr?.text) {
+    return html`
+      <div class="inbox-transcript">
+        <button class="inbox-transcript-toggle" onClick=${() => setOpen((v) => !v)} aria-expanded=${open}>
+          ${open ? '▾' : '▸'} ${t('inbox.transcript')}
+          <span class="inbox-transcript-src">
+            ${tr.by === 'sender' ? t('inbox.transcriptBySender') : t('inbox.transcriptByYou', { model: tr.model || '' })}
+          </span>
+        </button>
+        ${open ? html`<div class="inbox-transcript-text">${escHtml(tr.text)}</div>` : null}
+      </div>`;
+  }
+
+  if (!onTranscribe) return null;
+
+  return html`
+    <div class="inbox-transcript">
+      ${canTranscribe === false
+        ? html`<span class="inbox-transcript-hint">${t('inbox.transcribeNoModel')}</span>`
+        : html`
+          <button class="inbox-transcript-btn" onClick=${run} disabled=${busy}>
+            ${busy ? t('inbox.transcribing') : t('inbox.transcribe')}
+          </button>`}
+      ${error ? html`<span class="inbox-transcript-err">${error}</span>` : null}
+    </div>`;
+}
+
+/**
+ * A voice message in a bubble: it plays here rather than opening in a browser tab, which is a
+ * download and not a conversation.
+ *
+ * preload="metadata" is deliberate — a thread with ten voice messages must not fetch all ten on
+ * open. The duration is all that is needed until someone presses play.
+ */
+export function AudioAttachment({ a, url, name, download, msgId, onTranscribe, canTranscribe }) {
+  return html`<div class="inbox-attach-audio">
+    <audio class="inbox-audio" controls preload="metadata" src=${url}
+           onPlay=${(e) => stopOtherAudio(e.currentTarget)}></audio>
+    <div class="inbox-attach-cap">
+      <span class="inbox-attach-name">${escHtml(name)}</span>
+      ${a.durationSeconds ? html`<span class="inbox-audio-dur">${fmtClock(a.durationSeconds)}</span>` : null}
+      ${download}
+    </div>
+    <${TranscriptPanel} att=${a} msgId=${msgId} onTranscribe=${onTranscribe} canTranscribe=${canTranscribe} />
+  </div>`;
+}

package/dist/public/views/profile/inbox-tab.js

@@ -14,6 +14,11 @@
  *   (./inbox-tab/use-thread-ux.js)
  * @usage Lazy-loaded profile tab; registered in profile.js TABS as id `messages`.
  * @version-history
+ *   v1.27.0 -- 2026-08-01 -- Voice messages: 🎤 in the composer records a clip that travels the normal
+ *     attachment path, an audio bubble plays in place, and a voice attachment can be turned into text
+ *     with the owner's own key (useVoiceMessages → POST /v1/messages/:id/attachments/:attId/transcribe).
+ *     Never automatic — transcription spends the owner's AI budget, so it is always a click. parkMessage
+ *     and openTrackedRecord moved to helpers.js to stay under max-file-lines.
  *   v1.26.0 -- 2026-07-27 -- Failed sends toast the thrown REASON (helpers.sendFailure); the flat generic line hid every actionable attachment error.
  *   v1.25.0 -- 2026-07-21 -- Thread history is no longer capped at the newest 50: threads open showing
  *     their FULL history by default (getConversation(all)); a header "Show last 50 / all" toggle
@@ -130,17 +135,16 @@ import { escHtml } from '/js/utils.js';
 import * as messages from '/js/services/messages.js';
 import * as tracked from '/js/services/tracked-responses.js';
 import * as agentsSvc from '/js/services/agents.js';
-import { parkMessageToNotebook } from '/js/services/notebook.js';
-import { firstLine } from './notebook-helpers.js';
 import { apiGet } from '/js/api.js';
 import { getSession } from '/js/services/auth.js';
 import { TrackResponseModal } from './track-response-modal.js';
 import { peerLabel } from '/js/services/messages-ai-prompts.js';
-import { peerName, ownerKeyOf, isAgentPeer, buildAnswerSummary, resolveThreadAttachmentUrls, sendFailure } from './inbox-tab/helpers.js';
+import { peerName, ownerKeyOf, isAgentPeer, buildAnswerSummary, resolveThreadAttachmentUrls, sendFailure, parkMessage, openTrackedRecord } from './inbox-tab/helpers.js';
 import { Composer, PollBuilder, MarkdownViewer, ReplyWithAiPopover, ConversationToNotebookPopover } from './inbox-tab/components.js';
 import { buildConversationReplyProps, buildMessageReplyProps, buildConversationNotebookProps } from './inbox-tab/ai-actions.js';
 import { ListPanel, ThreadPanel, TrackedPanel, ResultsPanel } from './inbox-tab/panels.js';
 import { useThreadAutoScroll, useMobileComposerKeyboard, useLinkPreviewToggle } from './inbox-tab/use-thread-ux.js';
+import { useVoiceMessages } from './inbox-tab/use-voice.js';
 import { ContactPicker } from '/components/ContactPicker.js';
 import { swallowed } from '/js/swallowed.js';
 
@@ -148,6 +152,9 @@ export default function InboxTab({ showToast }) {
   const [requests, setRequests] = useState([]);
   const [conversations, setConversations] = useState([]);
   const [activeConv, setActiveConv] = useState(null);     // { conversationId, peerGhii }
+  // Mirrored into a ref so []-memoized callbacks (transcribeVoice) can reload the OPEN thread
+  // without taking activeConv as a dependency and being rebuilt on every thread switch.
+  const activeConvRef = useRef(null); activeConvRef.current = activeConv;
   const [thread, setThread] = useState([]);
   const [urlMap, setUrlMap] = useState({});
   const { showLinkPreviews, toggleLinkPreviews } = useLinkPreviewToggle(); const [mdViewer, setMdViewer] = useState(null); // link-preview toggle (persisted) + markdown viewer state
@@ -266,12 +273,7 @@ export default function InboxTab({ showToast }) {
 
   // Clicking 📓: copy the message straight into the notebook for later processing (no AI step) — keeps the
   // source link + reply intent so it can be replied to or enriched/filed from the notebook later.
-  const onParkMsg = async (msg) => {
-    try {
-      await parkMessageToNotebook(msg, { title: firstLine(msg.body) });
-      showToast?.(t('inbox.parkedToNotebook'));
-    } catch (e) { showToast?.(e?.message || t('inbox.trackFailed'), true); }
-  };
+  const onParkMsg = (msg) => parkMessage(msg, showToast);
 
   const cancelTracked = async (tr) => {
     let resp;
@@ -299,20 +301,8 @@ export default function InboxTab({ showToast }) {
     setReplyingTrId(tr.id);
   };
 
-  // Open the workspace record this tracked response watches (so you can jump straight to the bug). Set
-  // BOTH the saved-tab (so the profile loads straight onto Organisms) and the workspace deep-link
-  // (so the Organisms tab opens that exact workspace), then hard-navigate.
-  const openRecord = (tr) => {
-    const r = tr.references || {};
-    if (!r.organismId || !r.workspaceId) { showToast?.(t('inbox.trackNoRecord'), true); return; }
-    try {
-      sessionStorage.setItem('aimeat-profile-tab', 'organisms');
-      sessionStorage.setItem('aimeat.ws.openId', r.organismId);
-      sessionStorage.setItem('aimeat.ws.openWs', r.workspaceId);
-    // eslint-disable-next-line aimeat/no-silent-catch -- noop
-    } catch { /* noop */ }
-    window.location.assign('/v1/profile?tab=organisms');
-  };
+  // Jump to the workspace record this tracked response watches (straight to the bug it is about).
+  const openRecord = (tr) => openTrackedRecord(tr, showToast);
 
   // Fetch the suggested-reply body for each awaiting contract in the open conversation (for the bubble).
   const awaitingIds = awaitingForConv.map(t => t.id).join(',');
@@ -356,6 +346,9 @@ export default function InboxTab({ showToast }) {
   }, []);
   const toggleThreadAll = () => setThreadAll(v => { const nv = !v; threadAllRef.current = nv; if (activeConv) loadThread(activeConv); return nv; });
 
+  // Voice messages: can this owner transcribe, how long may a recording run, and the call that does it.
+  const { canTranscribe, voiceMaxSeconds, transcribeVoice } = useVoiceMessages(loadThread, activeConvRef);
+
   // Mount: one composite call seeds all six sections (requests/conversations/important/tracked/agents/groups).
   useEffect(() => { loadOverview(); }, [loadOverview]);
 
@@ -774,7 +767,8 @@ export default function InboxTab({ showToast }) {
           onTrackMsg=${onTrackMsg} onParkMsg=${onParkMsg} openMessageAi=${openMessageAi} submitInteractiveAnswers=${submitInteractiveAnswers}
           setMdViewer=${setMdViewer} openConversationAi=${openConversationAi} openConversationNotebook=${openConversationNotebook} insertCommand=${insertCommand} setCmdFill=${setCmdFill}
           cancelTracked=${cancelTracked} openRecord=${openRecord} startSuggestedReply=${startSuggestedReply} doSend=${doSend} showLinkPreviews=${showLinkPreviews} toggleLinkPreviews=${toggleLinkPreviews}
-          threadAll=${threadAll} toggleThreadAll=${toggleThreadAll} />` : null}
+          threadAll=${threadAll} toggleThreadAll=${toggleThreadAll}
+          onTranscribe=${transcribeVoice} canTranscribe=${canTranscribe} voiceMaxSeconds=${voiceMaxSeconds} />` : null}
 
         ${mode === 'tracked' ? html`<${TrackedPanel} activeTracked=${activeTracked} doneCount=${doneCount}
           openRecord=${openRecord} openTracked=${openTracked} cancelTracked=${cancelTracked} />` : null}

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