dsh-openrouter-spend 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-10-05
+
+### Added
+
+- Spend chip under the composer: today's cost with a 7/30-day popover, per-API-key filter, and per-model table.
+- Settings page: daily bar chart, per-key totals, per-model split, prepaid balance, management-key storage, and browser-local refresh interval.
+- `config` schema (`credentialRef`, `apiBase`, `refreshSeconds`, `historyDays`, `timeoutMs`) validated at activation.
+- English, Russian, and Chinese display metadata and UI copy.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ilya Ryabykin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+<p align="center">
+  <img src="icon.svg" width="88" alt="OpenRouter spend icon">
+</p>
+
+<h1 align="center">dsh-openrouter-spend</h1>
+
+<p align="center">
+  Real <a href="https://openrouter.ai">OpenRouter</a> spend inside
+  <a href="https://github.com/deepseek-ai/deepseek-harness">DeepSeek Harness</a> —
+  billed money from OpenRouter's own analytics, not a token estimate priced from a local table.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/dsh-openrouter-spend"><img src="https://img.shields.io/npm/v/dsh-openrouter-spend?style=flat-square" alt="npm version"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/dsh-openrouter-spend?style=flat-square" alt="MIT license"></a>
+  <img src="https://img.shields.io/badge/DeepSeek%20Harness-plugin-2f6feb?style=flat-square" alt="DeepSeek Harness plugin">
+</p>
+
+- A live spend chip under the composer: today's cost, with a popover for the last 7 and 30 days.
+- A Settings page with the daily bar chart, a per-model table, per-API-key totals, and the remaining prepaid balance.
+- One cached poll per refresh window: several open tabs cost one request to OpenRouter.
+
+## Requirements
+
+- DeepSeek Harness with the web GUI (the plugin is inactive in headless profiles: it needs the `credentials`, `webServer`, and `connection` services).
+- An OpenRouter **management API key** — Settings → API keys → Management in the OpenRouter dashboard. A regular inference key cannot read analytics.
+
+## Install
+
+From npm:
+
+```sh
+dsh plugin --profile demo add dsh-openrouter-spend
+```
+
+From GitHub (no build step, so no build-script permission is needed):
+
+```sh
+dsh plugin --profile demo add github:RyabykinIlya/dsh-openrouter-spend#v0.1.0
+```
+
+Then open Settings → OpenRouter spend in the GUI and store the management key. Done — the chip starts filling in.
+
+## Configuration
+
+Every field can be overridden in the profile's `cordis.patch.yml` row; the schema validates the row at activation and names the offending field.
+
+| Field | Default | Bounds | Meaning |
+| --- | --- | --- | --- |
+| `credentialRef` | `OPENROUTER_MGMT_API_KEY` | non-empty string | Credentials reference holding the management key |
+| `apiBase` | `https://openrouter.ai/api/v1` | `https://` URL | OpenRouter REST API root |
+| `refreshSeconds` | `60` | 10–3600, integer | Seconds between OpenRouter refreshes |
+| `historyDays` | `30` | 2–366, integer | Days of history the summary window covers, today included |
+| `timeoutMs` | `15000` | 1000–120000, integer | Per-request deadline against OpenRouter |
+
+Viewing preferences (per-key filter, refresh interval override) are browser-local and never leave your machine.
+
+## How it works
+
+The host half queries `POST /api/v1/analytics/query` (`total_usage` and `request_count`, split by API key and model, per UTC day) and `GET /api/v1/credits`, caches the summary for `refreshSeconds`, and serves it to the browser half. When a refresh fails, the last good figures stay on screen and the reason is shown instead of an empty panel.
+
+## Security
+
+- The management key is stored through the Harness credentials service (`credentials.set`), not in this package's files, and is never echoed back to the browser.
+- The summary and credential routes are fenced by the connection trust check. Anyone who can pass that check — by default, the browser session on your local Harness port — can read your spend figures. Do not expose the Harness web port publicly without its own authentication.
+
+## License
+
+[MIT](./LICENSE). Unofficial plugin; not affiliated with OpenRouter or DeepSeek.
+
+## По-русски
+
+Плагин для DeepSeek Harness: под полем ввода показывает реальные расходы аккаунта OpenRouter за сегодня (данные из официальной аналитики OpenRouter), а в настройках — график по дням, разбивку по моделям и API-ключам и остаток предоплаченных кредитов. Установка: `dsh plugin --profile demo add dsh-openrouter-spend`, затем Settings → OpenRouter spend → ввести управляющий ключ (Management API key из кабинета OpenRouter).

package/client.js

@@ -0,0 +1,480 @@
+window.__ModuleLoader__.load({
+  id: 'dsh-openrouter-spend',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+    const { useCallback, useEffect, useMemo, useRef, useState } = React;
+
+    /** Dictionary namespace declared on the registrations, so `t` reaches the components. */
+    const NS = 'openrouter-spend';
+
+    /** Preferences are viewing choices: a browser-local store, not host state. */
+    const PREF_KEY_ID = 'ors.keyId';
+    const PREF_INTERVAL = 'ors.intervalSeconds';
+    const PREFS_CHANGED = 'ors:prefs';
+
+    const CSS = `
+.ors-root { position: relative; display: inline-flex; }
+.ors-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 10px; border: 0; border-radius: 999px; cursor: pointer;
+  background: var(--dsw-alias-interactive-bg-hover, transparent);
+  color: var(--dsw-alias-label-secondary);
+  font: var(--dsw-font-xxs-12, 12px/1.4 system-ui);
+}
+.ors-chip:hover { background: var(--dsw-alias-interactive-bg-hover-solid, var(--dsw-alias-interactive-bg-hover)); }
+.ors-chip[aria-expanded="true"] { color: var(--dsw-alias-label-primary); }
+.ors-chip-amount { color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }
+.ors-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dsw-alias-state-business-primary); }
+.ors-chip-dot[data-state="stale"] { background: var(--dsw-alias-state-warn-primary, #c08b00); }
+.ors-chip-dot[data-state="loading"] { background: var(--dsw-alias-label-tertiary); }
+.ors-chip-dot[data-state="error"], .ors-chip-dot[data-state="no-credential"] { background: var(--dsw-alias-state-error-primary); }
+.ors-panel {
+  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40; width: 340px;
+  padding: 12px; border-radius: 12px; text-align: left;
+  background: var(--dsw-alias-bg-layer-1, var(--dsw-alias-bg-base));
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  color: var(--dsw-alias-label-primary);
+  font: var(--dsw-font-xs-13, 13px/1.45 system-ui);
+}
+.ors-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.ors-label { color: var(--dsw-alias-label-tertiary); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui); }
+.ors-figure { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ors-sub { margin-top: 2px; color: var(--dsw-alias-label-tertiary); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui); }
+.ors-range, .ors-keyrow { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 8px; }
+.ors-range button, .ors-key {
+  padding: 3px 8px; border-radius: 6px; cursor: pointer; border: 0;
+  background: var(--dsw-alias-interactive-bg-hover, transparent);
+  color: var(--dsw-alias-label-secondary);
+  font: var(--dsw-font-xxs-12, 12px/1.4 system-ui);
+}
+.ors-range button[aria-pressed="true"], .ors-key[aria-pressed="true"] {
+  background: var(--dsw-alias-interactive-bg-hover-solid, var(--dsw-alias-interactive-bg-hover));
+  color: var(--dsw-alias-label-primary);
+}
+.ors-table { width: 100%; border-collapse: collapse; }
+.ors-table th {
+  padding: 4px 0; text-align: left; color: var(--dsw-alias-label-tertiary);
+  font: var(--dsw-font-xxs-12, 12px/1.4 system-ui); font-weight: 400;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.ors-table th:last-child, .ors-table td:last-child { text-align: right; }
+.ors-table td { padding: 4px 0; border-bottom: 0.5px solid var(--dsw-alias-separator-primary); vertical-align: top; }
+.ors-table td:first-child { padding-right: 8px; word-break: break-word; }
+.ors-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ors-bars { display: flex; align-items: flex-end; gap: 1px; height: 34px; margin-top: 10px; }
+.ors-bar { flex: 1 1 0; min-height: 1px; border-radius: 1px; background: var(--dsw-alias-state-business-primary); opacity: 0.65; }
+.ors-bar[data-today="true"] { opacity: 1; }
+.ors-note { margin-top: 8px; color: var(--dsw-alias-state-warn-primary, #c08b00); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui); }
+.ors-settings { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
+.ors-field { display: flex; flex-direction: column; gap: 4px; }
+.ors-field input, .ors-field select {
+  padding: 6px 8px; border-radius: 8px;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary);
+  font: var(--dsw-font-xs-13, 13px/1.45 system-ui);
+}
+.ors-actions { display: flex; gap: 6px; align-items: center; }
+.ors-actions button {
+  padding: 5px 10px; border-radius: 8px; cursor: pointer; border: 0;
+  background: var(--dsw-alias-interactive-bg-hover, transparent);
+  color: var(--dsw-alias-label-primary); font: var(--dsw-font-xxs-12, 12px/1.4 system-ui);
+}
+`;
+
+    /** Money with the precision a sub-cent figure needs, and none it does not. */
+    function fmtUsd(value) {
+      const amount = Number(value) || 0;
+      if (amount === 0) return '$0.00';
+      if (amount < 0.01) return `$${amount.toFixed(4)}`;
+      if (amount < 1) return `$${amount.toFixed(3)}`;
+      return `$${amount.toFixed(2)}`;
+    }
+
+    const fmtInt = value => Number(value || 0).toLocaleString('en-US');
+
+    /** A stable color per API key, so one key keeps its hue across reloads. */
+    function keyTint(id) {
+      let hash = 0;
+      for (const char of String(id)) hash = (hash * 31 + char.codePointAt(0)) % 360;
+      return `hsl(${hash} 62% 55%)`;
+    }
+
+    /** Read one viewing preference; private mode reads as the default. */
+    function readPref(name, fallback) {
+      try {
+        const stored = window.localStorage.getItem(name);
+        return stored === null ? fallback : stored;
+      } catch {
+        return fallback;
+      }
+    }
+
+    /** Store one viewing preference and tell the other component about it. */
+    function writePref(name, value) {
+      try {
+        window.localStorage.setItem(name, value);
+      } catch {
+        // Private mode keeps the session usable; the choice simply does not persist.
+      }
+      window.dispatchEvent(new CustomEvent(PREFS_CHANGED));
+    }
+
+    /** One shared fetch of the host summary. */
+    function fetchSummary() {
+      return fetch('/openrouter-spend/summary', {
+        credentials: 'same-origin',
+        headers: { accept: 'application/json' },
+      }).then(response => (response.ok ? response.json() : undefined)).catch(() => undefined);
+    }
+
+    function Pill(props) {
+      const { t } = props;
+      const [data, setData] = useState(null);
+      const [open, setOpen] = useState(false);
+      const [range, setRange] = useState('today');
+      const [keyId, setKeyId] = useState(() => readPref(PREF_KEY_ID, ''));
+      const [intervalSeconds, setIntervalSeconds] = useState(() => Number(readPref(PREF_INTERVAL, '0')));
+      const rootRef = useRef(null);
+
+      useEffect(() => { void fetchSummary().then(reply => { if (reply !== undefined) setData(reply); }); }, []);
+
+      const seconds = intervalSeconds > 0 ? intervalSeconds : Number(data?.refreshSeconds) || 60;
+      useEffect(() => {
+        const timer = setInterval(() => {
+          void fetchSummary().then(reply => { if (reply !== undefined) setData(reply); });
+        }, seconds * 1000);
+        return () => clearInterval(timer);
+      }, [seconds]);
+
+      // The Settings section writes the same preferences; follow it live.
+      useEffect(() => {
+        const sync = () => {
+          setKeyId(readPref(PREF_KEY_ID, ''));
+          setIntervalSeconds(Number(readPref(PREF_INTERVAL, '0')));
+        };
+        window.addEventListener(PREFS_CHANGED, sync);
+        return () => window.removeEventListener(PREFS_CHANGED, sync);
+      }, []);
+
+      useEffect(() => {
+        if (!open) return undefined;
+        const onPointerDown = event => {
+          if (rootRef.current && !rootRef.current.contains(event.target)) setOpen(false);
+        };
+        const onKeyDown = event => { if (event.key === 'Escape') setOpen(false); };
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+          document.removeEventListener('mousedown', onPointerDown);
+          document.removeEventListener('keydown', onKeyDown);
+        };
+      }, [open]);
+
+      const chooseKey = useCallback(id => {
+        setKeyId(id);
+        writePref(PREF_KEY_ID, id);
+      }, []);
+
+      const keys = data?.byKey ?? [];
+      const selected = keys.find(entry => entry.id === keyId);
+
+      const view = useMemo(() => {
+        if (selected !== undefined) {
+          if (range === 'today') return { usd: selected.todayUsd, requests: selected.todayRequests };
+          if (range === 'last7') return selected.last7;
+          return selected.last30;
+        }
+        if (range === 'today') return data?.todaySpend ?? { usd: 0, requests: 0 };
+        if (range === 'last7') return data?.last7 ?? { usd: 0, requests: 0 };
+        return data?.last30 ?? { usd: 0, requests: 0 };
+      }, [data, selected, range]);
+
+      const rows = selected !== undefined ? selected.todayModels : (data?.byModel ?? []);
+      const bars = data?.byDay ?? [];
+      const peak = bars.reduce((max, entry) => Math.max(max, entry.usd), 0);
+      const balance = data?.credits ? data.credits.totalCredits - data.credits.totalUsage : undefined;
+      const rangeLabel = range === 'today' ? t('today') : range === 'last7' ? t('last7') : t('last30');
+
+      if (data !== null && data.status === 'no-credential') {
+        return h('span', { className: 'ors-root' },
+          h('style', null, CSS),
+          h('span', { className: 'ors-chip', title: t('noCredential') },
+            h('span', { className: 'ors-chip-dot', 'data-state': 'no-credential' }),
+            t('noCredential')));
+      }
+
+      return h('div', { className: 'ors-root', ref: rootRef },
+        h('style', null, CSS),
+        h('button', {
+          type: 'button',
+          className: 'ors-chip',
+          'aria-expanded': open,
+          'aria-label': t('open'),
+          title: t('open'),
+          onClick: () => setOpen(value => !value),
+        },
+        h('span', { className: 'ors-chip-dot', 'data-state': data?.status ?? 'loading' }),
+        h('span', { className: 'ors-chip-amount' }, data === null ? t('loading') : fmtUsd(view.usd))),
+        open && h('div', { className: 'ors-panel' },
+          h('div', { className: 'ors-head' },
+            h('span', { className: 'ors-label' }, rangeLabel),
+            h('span', { className: 'ors-figure' }, fmtUsd(view.usd))),
+          h('div', { className: 'ors-sub' },
+            `${fmtInt(view.requests)} ${t('requests')}`
+            + (data?.refreshedAt === undefined
+              ? ''
+              : ` · ${t('updated')} ${new Date(data.refreshedAt).toLocaleTimeString()}`)),
+          h('div', { className: 'ors-range' },
+            ['today', 'last7', 'last30'].map(id => h('button', {
+              key: id,
+              type: 'button',
+              'aria-pressed': range === id,
+              onClick: () => setRange(id),
+            }, id === 'today' ? t('today') : id === 'last7' ? t('last7') : t('last30')))),
+          balance === undefined ? null : h('div', { className: 'ors-sub' },
+            `${t('balance')}: ${fmtUsd(balance)} · ${t('lifetime')}: ${fmtUsd(data.credits.totalUsage)}`),
+          keys.length > 0 && h('div', null,
+            h('div', { className: 'ors-sub' }, t('byKey')),
+            h('div', { className: 'ors-keyrow' },
+              [null, ...keys.map(entry => entry.id)].map(id => h('button', {
+                key: id ?? '__all__',
+                type: 'button',
+                className: 'ors-key',
+                'aria-pressed': keyId === (id ?? ''),
+                style: id === null ? undefined : { color: keyTint(id) },
+                onClick: () => chooseKey(id ?? ''),
+              }, id === null ? t('allKeys') : id))),
+            h('div', { className: 'ors-sub' }, t('byModel'))),
+          h('table', { className: 'ors-table' },
+            h('thead', null, h('tr', null,
+              h('th', null, t('byModel')),
+              h('th', null, '$'),
+              h('th', null, t('requests')))),
+            h('tbody', null, rows.length === 0
+              ? h('tr', null, h('td', { colSpan: 3, className: 'ors-label' }, '—'))
+              : rows.map(entry => h('tr', { key: entry.id },
+                h('td', null, entry.id),
+                h('td', { className: 'ors-num' }, fmtUsd(entry.usd)),
+                h('td', { className: 'ors-num' }, fmtInt(entry.requests)))))),
+          bars.length > 0 && peak > 0 && h('div', { className: 'ors-bars' },
+            bars.map(entry => h('div', {
+              key: entry.date,
+              className: 'ors-bar',
+              'data-today': entry.date === data.today,
+              style: { height: `${Math.max(2, Math.round((entry.usd / peak) * 34))}px` },
+              title: `${entry.date} · ${fmtUsd(entry.usd)}`,
+            }))),
+          data?.error === undefined ? null : h('div', { className: 'ors-note' }, data.error)));
+    }
+
+    function Settings(props) {
+      const { t } = props;
+      const [data, setData] = useState(null);
+      const [keyId, setKeyId] = useState(() => readPref(PREF_KEY_ID, ''));
+      const [intervalSeconds, setIntervalSeconds] = useState(() => readPref(PREF_INTERVAL, '0'));
+      const [draft, setDraft] = useState('');
+      const [notice, setNotice] = useState(null);
+
+      const reload = useCallback(async () => {
+        const reply = await fetchSummary();
+        if (reply !== undefined) setData(reply);
+      }, []);
+
+      useEffect(() => { void reload(); }, [reload]);
+
+      const submit = useCallback(async body => {
+        setNotice(null);
+        try {
+          const response = await fetch('/openrouter-spend/credential', {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+          const reply = await response.json();
+          if (!response.ok) {
+            setNotice(reply?.error ?? `${response.status}`);
+            return;
+          }
+          setData(reply);
+          setDraft('');
+          setNotice(t('saved'));
+        } catch (error) {
+          setNotice(error instanceof Error ? error.message : String(error));
+        }
+      }, [t]);
+
+      const credential = data?.credential;
+      const keys = data?.byKey ?? [];
+      const selectKey = value => {
+        setKeyId(value);
+        writePref(PREF_KEY_ID, value);
+      };
+      const selectInterval = value => {
+        setIntervalSeconds(value);
+        writePref(PREF_INTERVAL, value);
+      };
+
+      return h('div', { className: 'ors-settings' },
+        h('style', null, CSS),
+        h('div', null,
+          h('div', { className: 'ors-head' },
+            h('span', { className: 'ors-label' }, t('today')),
+            h('span', { className: 'ors-figure' },
+              fmtUsd(data?.todaySpend?.usd ?? 0))),
+          h('div', { className: 'ors-sub' },
+            `${fmtInt(data?.todaySpend?.requests ?? 0)} ${t('requests')}`
+            + (data?.credits === undefined
+              ? ''
+              : ` · ${t('balance')}: ${fmtUsd(data.credits.totalCredits - data.credits.totalUsage)}`)),
+          data?.error === undefined ? null : h('div', { className: 'ors-note' }, data.error)),
+        h('div', { className: 'ors-field' },
+          h('label', { className: 'ors-sub' }, t('countByKey')),
+          h('select', { value: keyId, onChange: event => selectKey(event.target.value) },
+            h('option', { value: '' }, t('allKeys')),
+            keys.map(entry => h('option', { key: entry.id, value: entry.id },
+              `${entry.id} · ${fmtUsd(entry.todayUsd)} ${t('today')}`)),
+            keyId !== '' && keys.every(entry => entry.id !== keyId)
+              ? h('option', { value: keyId }, `${keyId} · ${t('unknownKey')}`)
+              : null)),
+        h('div', { className: 'ors-field' },
+          h('label', { className: 'ors-sub' }, t('refreshEvery')),
+          h('select', { value: intervalSeconds, onChange: event => selectInterval(event.target.value) },
+            h('option', { value: '0' }, `${t('serverDefault')} (${data?.refreshSeconds ?? 60}s)`),
+            ['30', '60', '300', '900'].map(value => h('option', { key: value, value }, `${value}s`)))),
+        h('div', { className: 'ors-field' },
+          h('label', { className: 'ors-sub' }, t('managementKey')),
+          h('input', {
+            type: 'password',
+            value: draft,
+            placeholder: credential?.configured === true ? '••••••••' : '',
+            autoComplete: 'off',
+            spellCheck: false,
+            onChange: event => setDraft(event.target.value),
+          }),
+          credential?.configured === true
+            ? h('div', { className: 'ors-sub' },
+              `${t('keyStored')} (${credential.ref}${credential.source === undefined ? '' : ` · ${credential.source}`})`)
+            : h('div', { className: 'ors-sub' }, t('keyHint')),
+          h('div', { className: 'ors-actions' },
+            h('button', {
+              type: 'button',
+              disabled: draft.length === 0,
+              onClick: () => { void submit({ value: draft }); },
+            }, t('save')),
+            credential?.configured === true && h('button', {
+              type: 'button',
+              onClick: () => { void submit({ clear: true }); },
+            }, t('clear')),
+            h('button', { type: 'button', onClick: () => { void reload(); } }, t('reload'))),
+          credential?.writable === false
+            ? h('div', { className: 'ors-note' }, t('keyReadOnly'))
+            : null,
+          notice === null ? null : h('div', { className: 'ors-sub' }, notice)));
+    }
+
+    return {
+      inject: ['slots', 'locale'],
+      apply(ctx) {
+        // The nav label is read through a thunk so it follows the active locale.
+        let tr = key => key;
+        ctx.effect(() => {
+          const dispose = ctx.locale.register(NS, {
+          en: {
+            today: 'Today',
+            last7: '7 days',
+            last30: '30 days',
+            requests: 'requests',
+            balance: 'Balance',
+            lifetime: 'Lifetime',
+            byModel: 'Model',
+            byKey: 'API key',
+            allKeys: 'All keys',
+            unknownKey: 'not seen today',
+            noCredential: 'No management key',
+            loading: 'Loading…',
+            updated: 'Updated',
+            open: 'OpenRouter spend',
+            countByKey: 'Count only this API key',
+            refreshEvery: 'Refresh every',
+            serverDefault: 'Plugin default',
+            managementKey: 'Management API key',
+            keyStored: 'Stored as',
+            keyHint: 'Needs an OpenRouter management key: Settings → API keys → Management.',
+            keyReadOnly: 'A read-only source shadows this reference, so Settings cannot store it.',
+            save: 'Save',
+            clear: 'Clear',
+            reload: 'Reload',
+            saved: 'Saved',
+          },
+          zh: {
+            today: '今天',
+            last7: '7 天',
+            last30: '30 天',
+            requests: '请求',
+            balance: '余额',
+            lifetime: '累计',
+            byModel: '模型',
+            byKey: 'API 密钥',
+            allKeys: '全部密钥',
+            unknownKey: '今天未出现',
+            noCredential: '未配置管理密钥',
+            loading: '读取中…',
+            updated: '更新于',
+            open: 'OpenRouter 花费',
+            countByKey: '只统计这个 API 密钥',
+            refreshEvery: '刷新间隔',
+            serverDefault: '插件默认',
+            managementKey: '管理密钥',
+            keyStored: '已保存为',
+            keyHint: '需要 OpenRouter 管理密钥：Settings → API keys → Management。',
+            keyReadOnly: '该引用被只读来源遮蔽，无法在设置中保存。',
+            save: '保存',
+            clear: '清除',
+            reload: '刷新',
+            saved: '已保存',
+          },
+          ru: {
+            today: 'Сегодня',
+            last7: '7 дней',
+            last30: '30 дней',
+            requests: 'запросов',
+            balance: 'Баланс',
+            lifetime: 'Всего',
+            byModel: 'Модель',
+            byKey: 'API-ключ',
+            allKeys: 'Все ключи',
+            unknownKey: 'сегодня не было',
+            noCredential: 'Ключ не настроен',
+            loading: 'Загрузка…',
+            updated: 'Обновлено',
+            open: 'Расходы OpenRouter',
+            countByKey: 'Учитывать только этот API-ключ',
+            refreshEvery: 'Обновлять каждые',
+            serverDefault: 'По умолчанию',
+            managementKey: 'Управляющий API-ключ',
+            keyStored: 'Сохранён как',
+            keyHint: 'Нужен управляющий ключ OpenRouter: Settings → API keys → Management.',
+            keyReadOnly: 'Эта ссылка перекрыта источником только для чтения, настройки не могут её сохранить.',
+            save: 'Сохранить',
+            clear: 'Очистить',
+            reload: 'Обновить',
+            saved: 'Сохранено',
+          },
+        });
+          tr = ctx.locale.bind(NS);
+          return dispose;
+        });
+        const section = { id: 'openrouter-spend', order: 30, label: () => tr('open'), locale: NS };
+        ctx.slots.inject('conversation.composer.dock', () => ctx.slots.register({
+          name: 'conversation.composer.dock', id: 'openrouter-spend', order: 2, label: section.label, locale: NS,
+        }, Pill));
+        ctx.slots.inject('settings.section', () => ctx.slots.register({
+          name: 'settings.section', ...section,
+        }, Settings));
+      },
+    };
+  },
+});

package/cordis.patch.yml

@@ -0,0 +1,7 @@
+- insert:
+    - id: openrouter-spend
+      name: 'dsh-openrouter-spend'
+      config:
+        credentialRef: OPENROUTER_MGMT_API_KEY
+        refreshSeconds: 60
+        historyDays: 30

package/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <circle cx="32" cy="32" r="26" fill="none" stroke="#2f6feb" stroke-width="5" stroke-dasharray="122 41" stroke-linecap="round" transform="rotate(-90 32 32)"/>
+  <path d="M32 15v34M38 23.5c0-3.3-2.7-5.5-6-5.5s-6 2-6 5c0 7.5 12 4.5 12 12 0 3.5-2.8 6-6 6s-6-2.2-6-5.5" fill="none" stroke="#2f6feb" stroke-width="4" stroke-linecap="round"/>
+</svg>

package/index.js

@@ -0,0 +1,419 @@
+/**
+ * Host half of the OpenRouter spend bundle.
+ *
+ * Reads what the OpenRouter account actually charged with a management key and
+ * serves it to the browser half as one cached summary. Every figure comes from
+ * OpenRouter's own analytics (`total_usage`), so it is billed money rather than
+ * a token estimate priced from a local table.
+ */
+
+import Schema from 'schemastery'
+
+/** Loader row id; matches the `insert` in cordis.patch.yml. */
+export const name = 'openrouter-spend'
+
+/** `credentials` resolves the management key, `webServer` carries the route. */
+export const inject = ['credentials', 'webServer', 'connection']
+
+/** One read-only summary route, fenced by the connection trust check. */
+const SUMMARY_PATH = '/openrouter-spend/summary'
+
+/** Route that stores or clears the management key. */
+const CREDENTIAL_PATH = '/openrouter-spend/credential'
+
+/** A credential body is one string; a larger one is hostile, not a real setting. */
+const MAX_BODY_BYTES = 64 * 1024
+
+/** A runaway guard: the window holds one row per day, key, and model. */
+const MAX_REPLY_BYTES = 4 * 1024 * 1024
+
+/** Rows beyond this are refused rather than truncated: a partial split misreports cost. */
+const MAX_ANALYTICS_ROWS = 500
+
+/**
+ * The row's `config` schema: validated by the Loader before `apply`, so a
+ * wrong value fails the row at activation instead of misreporting spend later.
+ * Every field is overridable from the patch row so a deployment can retarget
+ * the API, the credential, or the cadence without an edit to this file.
+ */
+export const Config = Schema.object({
+  credentialRef: Schema.string().default('OPENROUTER_MGMT_API_KEY')
+    .description('Credentials reference holding the OpenRouter management API key.'),
+  apiBase: Schema.string().pattern(/^https:\/\//).default('https://openrouter.ai/api/v1')
+    .description('OpenRouter REST API root; https only.'),
+  refreshSeconds: Schema.number().step(1).min(10).max(3600).default(60)
+    .description('Seconds between OpenRouter refreshes; one poll serves every open tab.'),
+  historyDays: Schema.number().step(1).min(2).max(366).default(30)
+    .description('Days of history the summary window covers, today included.'),
+  timeoutMs: Schema.number().step(1).min(1000).max(120_000).default(15_000)
+    .description('Per-request deadline against the OpenRouter API, in milliseconds.'),
+})
+
+/**
+ * Read one analytics row. `request_count` arrives as a decimal string and the
+ * dimensions are strings, so this is the wire boundary the narrowing belongs at.
+ * @returns the row, or `undefined` when it does not carry a usable day and cost.
+ */
+function readRow(row) {
+  if (row === null || typeof row !== 'object') return undefined
+  const day = row.date__day
+  const key = row.api_key_id
+  const model = row.model
+  const usd = Number(row.total_usage)
+  const requests = Number(row.request_count)
+  if (typeof day !== 'string' || typeof key !== 'string' || typeof model !== 'string') return undefined
+  if (!Number.isFinite(usd) || !Number.isFinite(requests)) return undefined
+  return { day, key, model, usd, requests }
+}
+
+/** Fetch the window split by API key and model; one query answers both views. */
+async function queryAnalytics(config, credential, start, end, signal) {
+  const url = `${config.apiBase.replace(/\/+$/, '')}/analytics/query`
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { authorization: `Bearer ${credential}`, 'content-type': 'application/json' },
+    body: JSON.stringify({
+      metrics: ['total_usage', 'request_count'],
+      dimensions: ['api_key_id', 'model'],
+      granularity: 'day',
+      time_range: { start, end },
+      limit: MAX_ANALYTICS_ROWS,
+    }),
+    signal,
+  })
+  if (!response.ok) {
+    const detail = (await response.text()).slice(0, 200)
+    throw new Error(`analytics/query answered ${response.status}: ${detail}`)
+  }
+  const length = Number(response.headers.get('content-length') ?? 0)
+  if (Number.isFinite(length) && length > MAX_REPLY_BYTES) {
+    throw new Error(`analytics/query reply exceeds ${MAX_REPLY_BYTES} bytes`)
+  }
+  const body = await response.json()
+  const rows = body?.data?.data
+  if (!Array.isArray(rows)) throw new Error('analytics/query returned no data rows')
+  if (rows.length >= MAX_ANALYTICS_ROWS) {
+    throw new Error(`analytics/query hit its ${MAX_ANALYTICS_ROWS}-row ceiling; narrow config.historyDays`)
+  }
+  return rows.flatMap(row => {
+    const read = readRow(row)
+    return read === undefined ? [] : [read]
+  })
+}
+
+/** Read the prepaid credits balance, which is the account's remaining budget. */
+async function queryCredits(config, credential, signal) {
+  const url = `${config.apiBase.replace(/\/+$/, '')}/credits`
+  const response = await fetch(url, { headers: { authorization: `Bearer ${credential}` }, signal })
+  if (!response.ok) throw new Error(`credits answered ${response.status}`)
+  const body = await response.json()
+  const data = body?.data
+  if (typeof data?.total_credits !== 'number' || typeof data?.total_usage !== 'number') {
+    throw new Error('credits returned no total_credits/total_usage')
+  }
+  return { totalCredits: data.total_credits, totalUsage: data.total_usage }
+}
+
+/** UTC calendar day of a timestamp, the bucket OpenRouter answers `date__day` with. */
+function utcDay(now) {
+  return now.toISOString().slice(0, 10)
+}
+
+/** UTC midnight opening the day that is `offset` days before `now`'s day. */
+function startOfUtcDay(now, offset) {
+  const day = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - offset))
+  return `${day.toISOString().slice(0, 10)}T00:00:00Z`
+}
+
+/** Add one row's figures into an accumulator, creating it when the first row lands. */
+function add(target, id, row) {
+  const entry = target.get(id) ?? { usd: 0, requests: 0 }
+  entry.usd += row.usd
+  entry.requests += row.requests
+  target.set(id, entry)
+}
+
+/** Zero-filled daily totals across the window, so a chart has no missing bars. */
+function dailySeries(rows, historyDays, now) {
+  const totals = new Map()
+  for (const row of rows) add(totals, row.day, row)
+  const series = []
+  for (let offset = historyDays - 1; offset >= 0; offset -= 1) {
+    const date = utcDay(new Date(now.getTime() - offset * 86_400_000))
+    const entry = totals.get(date) ?? { usd: 0, requests: 0 }
+    series.push({ date, usd: entry.usd, requests: entry.requests })
+  }
+  return series
+}
+
+/** Sum the trailing `days` entries of a daily series, today included. */
+function trailing(series, days) {
+  return series.slice(-days).reduce((sum, entry) => ({
+    usd: sum.usd + entry.usd,
+    requests: sum.requests + entry.requests,
+  }), { usd: 0, requests: 0 })
+}
+
+/**
+ * Per-key totals over the window plus today's per-key model split, so selecting
+ * a key in the UI answers both "how much" and "on what" without a second poll.
+ */
+function byKey(rows, today, series) {
+  const totals = new Map()
+  const todayModels = new Map()
+  const perDay = new Map()
+  for (const row of rows) {
+    add(totals, row.key, row)
+    const days = perDay.get(row.key) ?? new Map()
+    add(days, row.day, row)
+    perDay.set(row.key, days)
+    if (row.day !== today) continue
+    const models = todayModels.get(row.key) ?? new Map()
+    add(models, row.model, row)
+    todayModels.set(row.key, models)
+  }
+  const trailingFor = (key, days) => {
+    const window = series.slice(-days).map(entry => entry.date)
+    let usd = 0
+    let requests = 0
+    for (const day of window) {
+      const entry = perDay.get(key)?.get(day)
+      if (entry === undefined) continue
+      usd += entry.usd
+      requests += entry.requests
+    }
+    return { usd, requests }
+  }
+  return [...totals.entries()]
+    .map(([id, entry]) => {
+      const models = [...(todayModels.get(id) ?? new Map()).entries()]
+        .map(([model, modelEntry]) => ({ id: model, usd: modelEntry.usd, requests: modelEntry.requests }))
+        .sort((left, right) => right.usd - left.usd)
+      return {
+        id,
+        usd: entry.usd,
+        requests: entry.requests,
+        todayModels: models,
+        todayUsd: models.reduce((sum, model) => sum + model.usd, 0),
+        todayRequests: models.reduce((sum, model) => sum + model.requests, 0),
+        last7: trailingFor(id, 7),
+        last30: trailingFor(id, 30),
+      }
+    })
+    .sort((left, right) => right.usd - left.usd)
+}
+
+/** Today's spend split by model, in descending cost. */
+function byModel(rows, today) {
+  const totals = new Map()
+  for (const row of rows) {
+    if (row.day === today) add(totals, row.model, row)
+  }
+  return [...totals.entries()]
+    .map(([id, entry]) => ({ id, usd: entry.usd, requests: entry.requests }))
+    .sort((left, right) => right.usd - left.usd)
+}
+
+/**
+ * Build the one summary the browser half renders: today's spend, trailing
+ * windows, the daily series, per-model and per-key splits, and the balance.
+ */
+async function collect(config, credential, signal) {
+  const now = new Date()
+  const end = new Date(now.getTime() + 60_000).toISOString()
+  const start = startOfUtcDay(now, config.historyDays - 1)
+  const [rows, credits] = await Promise.all([
+    queryAnalytics(config, credential, start, end, signal),
+    queryCredits(config, credential, signal),
+  ])
+  const today = utcDay(now)
+  const series = dailySeries(rows, config.historyDays, now)
+  return {
+    status: 'ok',
+    today,
+    refreshedAt: now.toISOString(),
+    refreshSeconds: config.refreshSeconds,
+    historyDays: config.historyDays,
+    todaySpend: series[series.length - 1] ?? { date: today, usd: 0, requests: 0 },
+    last7: trailing(series, 7),
+    last30: trailing(series, 30),
+    byDay: series,
+    byModel: byModel(rows, today),
+    byKey: byKey(rows, today, series),
+    credits,
+  }
+}
+
+/** JSON reply carrying live facts; never cached by the browser. */
+function sendJson(res, status, payload) {
+  res.statusCode = status
+  res.setHeader('content-type', 'application/json; charset=utf-8')
+  res.setHeader('cache-control', 'no-store')
+  res.end(JSON.stringify(payload))
+}
+
+/** Collect a bounded request body as UTF-8; null past the ceiling (stream drained). */
+async function readBoundedBody(req) {
+  const chunks = []
+  let size = 0
+  for await (const chunk of req) {
+    size += chunk.length
+    if (size > MAX_BODY_BYTES) {
+      // Drain the rest so the refusal is a readable response, not a socket cut.
+      req.resume()
+      return null
+    }
+    chunks.push(chunk)
+  }
+  return Buffer.concat(chunks, size).toString('utf8')
+}
+
+/** Validate the credential body at the wire: an object with `value` or `clear`. */
+function parseCredentialBody(text) {
+  let body
+  try {
+    body = JSON.parse(text)
+  } catch {
+    // A non-JSON body is exactly the refusal case.
+    return undefined
+  }
+  if (body === null || typeof body !== 'object') return undefined
+  if (body.clear === true) return { clear: true }
+  return typeof body.value === 'string' && body.value.length > 0 ? { value: body.value } : undefined
+}
+
+/** The payload the browser shows before any query has answered. */
+function emptyPayload(config) {
+  return {
+    status: 'loading',
+    today: utcDay(new Date()),
+    refreshSeconds: config.refreshSeconds,
+    historyDays: config.historyDays,
+    todaySpend: { usd: 0, requests: 0 },
+    last7: { usd: 0, requests: 0 },
+    last30: { usd: 0, requests: 0 },
+    byDay: [],
+    byModel: [],
+    byKey: [],
+  }
+}
+
+/**
+ * Register the summary route. The reply is cached for `refreshSeconds` and one
+ * refresh serves every concurrent caller, so several open tabs cost one poll.
+ */
+export function apply(ctx, config) {
+  let cached = undefined
+  let inFlight = undefined
+
+  const summary = async () => {
+    const resolved = await ctx.credentials.resolve(config.credentialRef)
+    const info = await ctx.credentials.describe(config.credentialRef)
+    const credential = {
+      ref: config.credentialRef,
+      configured: info.configured,
+      writable: info.writable,
+      ...(info.source === undefined ? {} : { source: info.source }),
+    }
+    if (resolved === undefined) {
+      return { ...emptyPayload(config), status: 'no-credential', credential }
+    }
+    const signal = AbortSignal.timeout(config.timeoutMs)
+    try {
+      return { ...(await collect(config, resolved.value, signal)), credential }
+    } catch (error) {
+      // A stale reply beats an empty panel: keep the last good figures and say why.
+      const reason = error instanceof Error ? error.message : String(error)
+      ctx.logger.warn('openrouter-spend: refresh failed', reason)
+      return {
+        ...(cached ?? emptyPayload(config)),
+        status: 'stale',
+        error: reason,
+        credential,
+      }
+    }
+  }
+
+  const current = () => {
+    const fresh = cached !== undefined && Date.now() - cached.fetchedAt < config.refreshSeconds * 1000
+    if (fresh) return Promise.resolve(cached.payload)
+    if (inFlight !== undefined) return inFlight
+    inFlight = (async () => {
+      try {
+        const payload = await summary()
+        cached = { fetchedAt: Date.now(), payload }
+        return payload
+      } finally {
+        inFlight = undefined
+      }
+    })()
+    return inFlight
+  }
+
+  ctx.effect(() => ctx.webServer.register({
+    kind: 'exact',
+    path: SUMMARY_PATH,
+    handler: async (req, res) => {
+      const rejection = ctx.connection.requestRejection(req)
+      if (rejection !== undefined) {
+        res.statusCode = rejection
+        res.end()
+        return
+      }
+      if (req.method !== 'GET') {
+        res.statusCode = 405
+        res.setHeader('allow', 'GET')
+        res.end()
+        return
+      }
+      try {
+        sendJson(res, 200, await current())
+      } catch (error) {
+        ctx.logger.warn('openrouter-spend: summary failed', error)
+        sendJson(res, 502, { status: 'error', error: error instanceof Error ? error.message : String(error) })
+      }
+    },
+  }), `openrouter-spend: GET ${SUMMARY_PATH}`)
+
+  // Storing the key: the credentials service owns the write, and its refusal
+  // (a shadowing read-only source) is passed through so Settings can show it.
+  ctx.effect(() => ctx.webServer.register({
+    kind: 'exact',
+    path: CREDENTIAL_PATH,
+    handler: async (req, res) => {
+      const rejection = ctx.connection.requestRejection(req)
+      if (rejection !== undefined) {
+        res.statusCode = rejection
+        res.end()
+        return
+      }
+      if (req.method !== 'POST') {
+        res.statusCode = 405
+        res.setHeader('allow', 'POST')
+        res.end()
+        return
+      }
+      const body = readBoundedBody(req).then(parseCredentialBody)
+      const parsed = await body
+      if (parsed === undefined) {
+        sendJson(res, 400, { status: 'error', error: 'expected {"value": "..."} or {"clear": true}' })
+        return
+      }
+      try {
+        if (parsed.clear === true) await ctx.credentials.unset(config.credentialRef)
+        else await ctx.credentials.set(config.credentialRef, parsed.value)
+      } catch (error) {
+        sendJson(res, 409, { status: 'error', error: error instanceof Error ? error.message : String(error) })
+        return
+      }
+      cached = undefined
+      sendJson(res, 200, await current())
+    },
+  }), `openrouter-spend: POST ${CREDENTIAL_PATH}`)
+
+  // Prime the cache so the first browser poll is a reply rather than a stall.
+  ctx.effect(() => {
+    void current().catch(error => ctx.logger.warn('openrouter-spend: priming failed', error))
+    return () => undefined
+  })
+}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "OpenRouter Spend",
+    "description": "Shows what the OpenRouter account actually charged today, under the composer."
+  }
+}

package/locale/ru.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Расходы OpenRouter",
+    "description": "Показывает, сколько аккаунт OpenRouter реально потратил сегодня — под полем ввода."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "OpenRouter 花费",
+    "description": "在输入框下方显示 OpenRouter 账户今天实际花费的金额。"
+  }
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "dsh-openrouter-spend",
+  "version": "0.1.0",
+  "description": "DeepSeek Harness plugin: shows what the OpenRouter account actually charged today — under the composer and in Settings, split by model and API key.",
+  "keywords": ["dsh", "dsh-plugin", "cordis", "openrouter", "spend", "cost", "analytics"],
+  "license": "MIT",
+  "author": "Ilya Ryabykin",
+  "type": "module",
+  "engines": { "node": ">=22.19" },
+  "repository": { "type": "git", "url": "git+https://github.com/RyabykinIlya/dsh-openrouter-spend.git" },
+  "homepage": "https://github.com/RyabykinIlya/dsh-openrouter-spend#readme",
+  "bugs": { "url": "https://github.com/RyabykinIlya/dsh-openrouter-spend/issues" },
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./locale/*.json": "./locale/*.json",
+    "./icon": "./icon.svg",
+    "./package.json": "./package.json"
+  },
+  "files": ["index.js", "client.js", "cordis.patch.yml", "locale/*.json", "icon.svg", "README.md", "LICENSE", "CHANGELOG.md"],
+  "publishConfig": { "access": "public" },
+  "dependencies": { "schemastery": "^3.18.0" },
+  "dsh": {
+    "bundle": { "patch": "./cordis.patch.yml" },
+    "client": {
+      "platform": "web",
+      "inject": ["@deepseek-ai/dsh-client-ui-conversation", "@deepseek-ai/dsh-client-ui-settings"]
+    }
+  }
+}