dsh-ui-cost-meter 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 yuu1111
+
+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.ja.md

@@ -0,0 +1,124 @@
+# dsh-ui-cost-meter
+
+[English](README.md) | 日本語
+
+DeepSeek Harness の Web GUI に いまのセッションがいくら使ったかを出すピルを1つ足す
+プラグインです シェルが持つターン数とトークンのピルと同じ行に並びます
+
+```
+⏱ 1 turns 71 steps · 285 tok/s    🗄 7.3M tok · Cache hit 99%    $ 0.42
+```
+
+金額はセッション投影の上に載っているため ログ全体の集計になり ページングや圧縮で
+変わりません 再読み込みでも消えず 値付けはハーネスがすでに耐久ログへ記録している
+provider usage だけから行います ピルはシェルの統計ピルと同じ形で 押すと内訳の
+パネルが開きます（入力・出力・キャッシュ・合計と 値付けに使った route）
+
+## 導入
+
+```sh
+dsh plugin --profile web add dsh-ui-cost-meter
+```
+
+ソースから使う場合は `add link:<path>` でも同じです プラグインが自分の bundle patch を
+持っているため profile の `cordis.patch.yml` を書き換えなくても行が入ります
+
+## 設定
+
+設定はすべてプラグインの行に置きます 単価はすべて **100万トークンあたり** で 通貨は
+`symbol` が示すものに揃えてください 下の例は DeepSeek V4.1 Flash（`deepseek-flash`
+OpenCode Go 側の id は `deepseek-v4.1-flash`）と DeepSeek V4 Pro を DeepSeek の
+公示単価（オフピーク）で値付けします 公式 API と OpenCode Go は同じ数字を請求します
+実際に払う額に合わせて書き換えてください
+
+```yaml
+- id: cost-meter
+  name: dsh-ui-cost-meter
+  config:
+    symbol: '$'
+    rates:
+      opencode-go/deepseek-flash:
+        input: 0.15
+        output: 0.6
+        cacheRead: 0.003
+        cacheWrite: 0
+      opencode-go/deepseek-v4-pro:
+        input: 0.66
+        output: 1.98
+        cacheRead: 0.022
+        cacheWrite: 0
+      deepseek-official/deepseek-flash:
+        input: 0.15
+        output: 0.6
+        cacheRead: 0.003
+        cacheWrite: 0
+      deepseek-official/deepseek-v4-pro:
+        input: 0.66
+        output: 1.98
+        cacheRead: 0.022
+        cacheWrite: 0
+```
+
+route ごとに1つしか置けないためここではオフピークを示します ピークはどの欄もちょうど
+倍で 月曜から金曜の 01:00-04:00 UTC と 06:00-10:00 UTC にあたります DeepSeek は
+キャッシュ書きを課金しないため `cacheWrite` は `0` のままです 廃止された
+`deepseek-v4-flash` と `deepseek-v4-flash-vision-exp` の id は現在 V4.1 Flash へ
+回され Flash の単価で課金されます OpenCode Go は月10ドルの定額プランで この単価は
+トークンの請求額ではなく プランの使用上限に対する計量に使われます
+
+出典: [DeepSeek Models & Pricing](https://api-docs.deepseek.com/quick_start/pricing)
+[OpenCode Go](https://opencode.ai/docs/go/)
+
+| フィールド | 意味 |
+|---|---|
+| `symbol` | 金額の前に付ける記号 既定は `$` |
+| `rates` | 単価表 キーは `"<provider>/<model>"` 次に `"<model>"` で route のキーが優先 |
+| `fallback` | どのキーにも一致しない route の単価 省略すると既定では値付けしない |
+
+単価の無い route は推測せず **未設定** として数えます 合計には入らず ピルの金額に
+末尾の `+` が付きます 内訳のパネルには未設定のトークン数が出るため 単価の抜けが
+黙って間違った金額になることはありません
+
+## 数字の出どころ
+
+ホスト側は `costMeter` セッション投影を登録します `request/header` で route を決め
+確定した `assistant/message`（表面にメッセージを残さなかった課金済みの試行は
+`assistant/attempt`）が stream に埋め込んだ usage を畳みます 同じターンとステップの
+再報告は前の標本を差し替え `llm/retry-started` はその枠を閉じるため 再試行は
+足し込まれます 入力・出力・キャッシュ読み・キャッシュ書きのトークンを route の
+単価で値付けします
+
+ブラウザ側は `conversation.composer.dock` 枠へ1つ登録し React の portal で
+シェルの統計ピルの行（`[data-composer-stats]`）へ差し込みます そのため字・間隔・
+高さがその行のまま揃い 別の行を始めません 行がまだ無いセッション（ステップも
+トークンも無い状態）では自前の行として中央に描きます
+
+ピルとそのパネルはシェル側の宣言（`--dsw-*` のトークン・寸法・角丸・2列の行の
+組み方）をそのまま持ちます 外部のバンドルはシェルが配るプラットフォームモジュール
+だけを読め その CSS Modules には届かないためです
+
+## 注意
+
+- **請求書ではありません** ハーネスのトークン計数に設定の単価を掛けたものです
+  正しいのは provider の請求で 単価を間違えればピルも間違えます
+- **route ごとに1つの単価です** セッション途中で価格が変わる provider や
+  リクエストの大きさで単価が変わる route は 実際に払う額に合わせてください
+- **通貨の換算はしません** `symbol` が示す通貨でそのまま出します
+
+## 開発
+
+```sh
+bun install
+bun run build     # lib/index.js（ホスト側）と lib/client.js（ブラウザ側）
+bun test          # 値付け・整形・ビルド済みバンドルの検証
+bun run check     # 型チェック
+```
+
+`lib/` は生成物で git からは除外しています `build.ts` はホスト側を ESM として
+（`zod` と `@deepseek-ai/schemastery` は external） ブラウザ側を CJS へ束ねて
+client modules が配信する `window.__ModuleLoader__.load({ id, factory })` 形式へ
+包みます
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,137 @@
+# dsh-ui-cost-meter
+
+English | [日本語](README.ja.md)
+
+Real-time spend for the DeepSeek Harness Web GUI: one pill under the composer,
+beside the shipped turn/token pills, that says how much the session has cost so
+far.
+
+```
+⏱ 1 turns 71 steps · 285 tok/s    🗄 7.3M tok · Cache hit 99%    $ 0.42
+```
+
+The amount rides the session projection seam, so it is whole-log (paging and
+compaction cannot change it), it survives reloads, and it is priced from the
+durable provider usage the harness already logs. The pill is shaped like the
+shipped stats pills: clicking it opens a breakdown panel that repeats their
+dialog's title, rule, and label/value rows, naming each cache bucket, the
+unpriced tokens, and the route that priced them.
+
+## Install
+
+```sh
+dsh plugin --profile web add dsh-ui-cost-meter
+```
+
+Under a source checkout, `add link:<path>` works the same way. The plugin
+declares its own bundle patch, so the row appears in the profile without
+editing `cordis.patch.yml`.
+
+## Configure
+
+Every field lives on the plugin row, and every price is per **one million
+tokens** in whatever currency `symbol` names. The example below prices DeepSeek
+V4.1 Flash (`deepseek-flash`; OpenCode Go's own id is `deepseek-v4.1-flash`)
+and DeepSeek V4 Pro at DeepSeek's published off-peak rates, which the official
+API and OpenCode Go both charge. Replace them with the rates you actually pay.
+
+```yaml
+- id: cost-meter
+  name: dsh-ui-cost-meter
+  config:
+    symbol: '$'
+    rates:
+      opencode-go/deepseek-flash:
+        input: 0.15
+        output: 0.6
+        cacheRead: 0.003
+        cacheWrite: 0
+      opencode-go/deepseek-v4-pro:
+        input: 0.66
+        output: 1.98
+        cacheRead: 0.022
+        cacheWrite: 0
+      deepseek-official/deepseek-flash:
+        input: 0.15
+        output: 0.6
+        cacheRead: 0.003
+        cacheWrite: 0
+      deepseek-official/deepseek-v4-pro:
+        input: 0.66
+        output: 1.98
+        cacheRead: 0.022
+        cacheWrite: 0
+```
+
+One rate per route can only carry the off-peak number, so that is what the
+example shows: peak is exactly double in every field and covers 01:00-04:00 and
+06:00-10:00 UTC, Monday through Friday. DeepSeek bills no cache writes, so
+`cacheWrite` stays `0`, and the retired `deepseek-v4-flash` and
+`deepseek-v4-flash-vision-exp` ids now route to V4.1 Flash at the Flash price.
+OpenCode Go is a $10/month plan, so its rates meter usage against the plan's
+limits rather than pricing a per-token invoice.
+
+Sources: [DeepSeek Models & Pricing](https://api-docs.deepseek.com/quick_start/pricing),
+[OpenCode Go](https://opencode.ai/docs/go/).
+
+| Field | Meaning |
+|---|---|
+| `symbol` | Prefixed to every amount. Default `$`. |
+| `rates` | Unit prices keyed by `"<provider>/<model>"`, then `"<model>"`. The route key wins. |
+| `fallback` | Unit prices for every route no key matches. Omit it to price nothing by default. |
+
+A route with no matching rate is not guessed at: its tokens are counted as
+**unpriced**, contribute nothing to the total, and make the pill mark its amount
+with a trailing `+`. The panel then names how many tokens were left unpriced, so
+a missing rate is visible instead of silently wrong.
+
+## Where the numbers come from
+
+The host half registers the `costMeter` session projection. It folds the
+durable log: a `request/header` sets the route, and each settled
+`assistant/message` (or `assistant/attempt`, which preserves a billed attempt
+that left no surface message) contributes the provider usage embedded in its
+stream. A re-reported sample for the same turn and step replaces the earlier
+one; `llm/retry-started` closes that slot so a retried attempt adds instead.
+Input, output, cache-read, and cache-write tokens are then priced by the route's
+rates.
+
+The client half registers one entry on the `conversation.composer.dock` slot
+and renders it into the shipped stats row (`[data-composer-stats]`) with a React
+portal, so the cost pill shares that row's font, spacing, and vertical rhythm
+instead of starting a row of its own. Without a stats row to join (a session
+that has produced no steps or tokens yet) it falls back to drawing its own
+centered row.
+
+The pill and its panel carry the shell's own declarations — the same `--dsw-*`
+tokens, sizes, radius, and two-column row grid as the shipped pills and their
+dialog — because a third-party bundle can only reach the platform modules the
+shell seeds, not its CSS modules.
+
+## Caveats
+
+- **Not a billing record.** The figures are the harness's own token accounting
+  times the rates you configured. The provider's invoice is the authority; a
+  wrong rate in `rates` is a wrong pill.
+- **One rate per route.** A provider that changes its price mid-session, or a
+  route whose price depends on the request size, needs a rate that reflects what
+  you actually pay.
+- **Currency is yours to name.** Nothing here converts between currencies.
+
+## Development
+
+```sh
+bun install
+bun run build     # lib/index.js (host half) and lib/client.js (browser half)
+bun test          # pricing fold, formatting, and the built bundle
+bun run check     # type check
+```
+
+`lib/` is generated and ignored by git. `build.ts` bundles the host half as ESM
+(with `zod` and `@deepseek-ai/schemastery` left external) and the browser half
+as CJS wrapped in the `window.__ModuleLoader__.load({ id, factory })` loader
+format the client module system serves.
+
+## License
+
+MIT

package/cordis.patch.yml

@@ -0,0 +1,49 @@
+# dsh-ui-cost-meter layer.
+#
+# Adds one plugin row. The host half registers the `costMeter` session
+# projection (whole-log spend folded from durable provider usage) and the
+# browser half adds one pill to the composer's stats dock.
+#
+# Configuration (row `config`):
+#   symbol:   display symbol prefixed to every amount. Default '$'.
+#   rates:    per-1M-token unit prices, keyed by "<provider>/<model>" or by
+#             "<model>". The route key wins over the bare model, which wins
+#             over `fallback`. Tokens whose route matches nothing are counted
+#             as unpriced and the pill marks its total with a trailing '+'.
+#   fallback: unit prices for every route no key matches. Omit it to price
+#             nothing by default, which keeps a wrong rate from looking right.
+#
+# The values below are DeepSeek's published off-peak rates in USD per 1M
+# tokens, which the official API and OpenCode Go both charge. Off-peak is half
+# of peak, and peak runs 01:00-04:00 and 06:00-10:00 UTC, Monday through Friday.
+# Checked 2026-09-14 against:
+#   https://api-docs.deepseek.com/quick_start/pricing
+#   https://opencode.ai/docs/go/
+# OpenCode Go is a $10/month plan that meters these rates against usage limits
+# rather than billing per token. Replace them with the rates you actually pay.
+- insert:
+    - id: cost-meter
+      name: dsh-ui-cost-meter
+      config:
+        symbol: '$'
+        rates:
+          opencode-go/deepseek-flash:
+            input: 0.15
+            output: 0.6
+            cacheRead: 0.003
+            cacheWrite: 0
+          opencode-go/deepseek-v4-pro:
+            input: 0.66
+            output: 1.98
+            cacheRead: 0.022
+            cacheWrite: 0
+          deepseek-official/deepseek-flash:
+            input: 0.15
+            output: 0.6
+            cacheRead: 0.003
+            cacheWrite: 0
+          deepseek-official/deepseek-v4-pro:
+            input: 0.66
+            output: 1.98
+            cacheRead: 0.022
+            cacheWrite: 0

package/lib/client.js

@@ -0,0 +1,314 @@
+window.__ModuleLoader__.load({
+	id: "dsh-ui-cost-meter",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toCommonJS = (from) => {
+  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(entry, key))
+        __defProp(entry, key, {
+          get: __accessProp.bind(from, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+  }
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __moduleCache;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// src/client.tsx
+var exports_client = {};
+__export(exports_client, {
+  apply: () => apply,
+  inject: () => inject
+});
+module.exports = __toCommonJS(exports_client);
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+
+// src/shared.ts
+var PROJECTION_KEY = "costMeter";
+function amountDecimals(value) {
+  const safe = Number.isFinite(value) && value > 0 ? value : 0;
+  if (safe >= 1)
+    return 2;
+  if (safe >= 0.01)
+    return 3;
+  return 4;
+}
+function formatAmount(value) {
+  const safe = Number.isFinite(value) && value > 0 ? value : 0;
+  return safe.toFixed(amountDecimals(safe));
+}
+function formatTokens(value) {
+  if (!Number.isFinite(value) || value <= 0)
+    return "0";
+  if (value >= 1e6)
+    return `${trimZero(value / 1e6)}M`;
+  if (value >= 1000)
+    return `${trimZero(value / 1000)}k`;
+  return String(Math.round(value));
+}
+function trimZero(value) {
+  const fixed = value >= 100 ? value.toFixed(0) : value.toFixed(1);
+  return fixed.endsWith(".0") ? fixed.slice(0, -2) : fixed;
+}
+function breakdownRows(view) {
+  const decimals = amountDecimals(view.total);
+  const money = (value) => `${view.symbol}${(Number.isFinite(value) && value > 0 ? value : 0).toFixed(decimals)}`;
+  const rows = [
+    { label: "Uncached input", value: money(view.input) },
+    { label: "Cached input", value: money(view.cacheRead) }
+  ];
+  if (view.cacheWrite > 0)
+    rows.push({ label: "Cache write", value: money(view.cacheWrite) });
+  rows.push({ label: "Output", value: money(view.output) });
+  if (view.unpricedTokens > 0)
+    rows.push({
+      label: "Unpriced",
+      value: `${formatTokens(view.unpricedTokens)} tok`
+    });
+  const route = view.provider === null ? view.model : `${view.provider}/${view.model}`;
+  if (route !== null)
+    rows.push({ label: "Provider / model", value: route, route: true });
+  return rows;
+}
+
+// src/client.tsx
+var jsx_runtime = require("react/jsx-runtime");
+var DOCK = "conversation.composer.dock";
+var STATS_ROW_SELECTOR = "[data-composer-stats]";
+var PILL_ID = "cost";
+var PANEL_TITLE = "Cost";
+var PANEL_GAP = 8;
+var PANEL_MARGIN = 12;
+var MEASURE_STYLE = {
+  visibility: "hidden",
+  left: 0,
+  top: 0
+};
+var STYLE = `
+.dsh-ui-cost-meter{max-width:var(--dsh-chat-content-width);box-sizing:border-box;width:100%;padding:4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(20px + var(--dsh-content-font-delta-secondary,0px));justify-content:center;gap:12px;margin:0 auto;display:flex}
+.dsh-ui-cost-meter-anchor{min-width:0;display:inline-flex}
+.dsh-ui-cost-meter-pill{box-sizing:border-box;max-width:100%;color:var(--dsw-alias-label-tertiary);font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;white-space:nowrap;background:0 0;border:none;border-radius:24px;align-items:center;gap:6px;padding:1px 8px;display:inline-flex}
+.dsh-ui-cost-meter-symbol{flex:none;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
+button.dsh-ui-cost-meter-pill{cursor:pointer}
+button.dsh-ui-cost-meter-pill:hover,button.dsh-ui-cost-meter-pill[aria-expanded=true]{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}
+.dsh-ui-cost-meter-label{text-overflow:ellipsis;min-width:0;overflow:hidden}
+.dsh-ui-cost-meter-unpriced{margin-left:1px;font-size:11px}
+.dsh-ui-cost-meter-panel{z-index:1100;box-sizing:border-box;background:var(--dsw-specific-menu);--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);width:max-content;min-width:min(300px,100vw - 24px);max-width:min(440px,100vw - 24px);box-shadow:var(--dsw-elevation-prominent);color:var(--dsw-alias-label-secondary);cursor:default;border:0;border-radius:12px;padding:16px;font-size:12px;line-height:18px;position:fixed}
+.dsh-ui-cost-meter-title{color:var(--dsw-alias-label-primary);justify-content:space-between;gap:16px;margin-bottom:8px;font-weight:500;display:flex}
+.dsh-ui-cost-meter-titleRule{border-top:.5px solid var(--dsw-alias-border-l2);margin-bottom:10px}
+.dsh-ui-cost-meter-titleValue{font-variant-numeric:tabular-nums}
+.dsh-ui-cost-meter-titleLabel{align-items:center;gap:6px;min-width:0;display:inline-flex}
+.dsh-ui-cost-meter-details{color:var(--dsw-alias-label-tertiary);grid-template-columns:minmax(76px,auto) minmax(0,1fr);gap:6px 16px;margin:0;display:grid}
+.dsh-ui-cost-meter-details dt,.dsh-ui-cost-meter-details dd{min-width:0;margin:0}
+.dsh-ui-cost-meter-details dd{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;text-align:right}
+.dsh-ui-cost-meter-route{overflow-wrap:anywhere}
+`;
+var STYLE_TAG_ID = "dsh-ui-cost-meter/style.css";
+var inject = ["slots"];
+function useStatsRow() {
+  const anchorRef = import_react.useRef(null);
+  const [row, setRow] = import_react.useState(null);
+  import_react.useEffect(() => {
+    const container = anchorRef.current?.parentElement;
+    if (container === undefined || container === null)
+      return;
+    const sync = () => {
+      setRow((current) => {
+        const next = container.querySelector(STATS_ROW_SELECTOR);
+        return current === next ? current : next;
+      });
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(container, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return { anchorRef, row };
+}
+function useCostDialog() {
+  const [open, setOpen] = import_react.useState(false);
+  const rootRef = import_react.useRef(null);
+  const panelRef = import_react.useRef(null);
+  const pos = import_dsh_client_ui_primitives.useAnchoredPosition({
+    open,
+    anchorRef: rootRef,
+    panelRef,
+    side: "top",
+    gap: PANEL_GAP,
+    margin: PANEL_MARGIN
+  });
+  import_dsh_client_ui_primitives.useDismissOnOutsidePointer(rootRef, open, setOpen, panelRef);
+  import_react.useEffect(() => {
+    if (!open)
+      return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape")
+        setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  return { open, setOpen, rootRef, panelRef, pos };
+}
+function CostPillBody({ view }) {
+  const { open, setOpen, rootRef, panelRef, pos } = useCostDialog();
+  const amount = `${view.symbol}${formatAmount(view.total)}`;
+  return /* @__PURE__ */ jsx_runtime.jsxs("span", {
+    ref: rootRef,
+    className: "dsh-ui-cost-meter-anchor",
+    children: [
+      /* @__PURE__ */ jsx_runtime.jsxs("button", {
+        type: "button",
+        className: "dsh-ui-cost-meter-pill",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-label": `${PANEL_TITLE} ${amount}${view.unpricedTokens > 0 ? "+" : ""}`,
+        onClick: () => {
+          setOpen(!open);
+        },
+        children: [
+          /* @__PURE__ */ jsx_runtime.jsx("span", {
+            className: "dsh-ui-cost-meter-symbol",
+            "aria-hidden": true,
+            children: view.symbol
+          }),
+          /* @__PURE__ */ jsx_runtime.jsx("span", {
+            className: "dsh-ui-cost-meter-label",
+            children: formatAmount(view.total)
+          }),
+          view.unpricedTokens > 0 && /* @__PURE__ */ jsx_runtime.jsx("span", {
+            className: "dsh-ui-cost-meter-unpriced",
+            "aria-hidden": true,
+            children: "+"
+          })
+        ]
+      }),
+      open && import_react_dom.createPortal(/* @__PURE__ */ jsx_runtime.jsxs("div", {
+        ref: panelRef,
+        className: "dsh-ui-cost-meter-panel",
+        role: "dialog",
+        "aria-label": PANEL_TITLE,
+        style: pos ?? MEASURE_STYLE,
+        children: [
+          /* @__PURE__ */ jsx_runtime.jsxs("div", {
+            className: "dsh-ui-cost-meter-title",
+            children: [
+              /* @__PURE__ */ jsx_runtime.jsxs("span", {
+                className: "dsh-ui-cost-meter-titleLabel",
+                children: [
+                  /* @__PURE__ */ jsx_runtime.jsx("span", {
+                    className: "dsh-ui-cost-meter-symbol",
+                    "aria-hidden": true,
+                    children: view.symbol
+                  }),
+                  PANEL_TITLE
+                ]
+              }),
+              /* @__PURE__ */ jsx_runtime.jsx("span", {
+                className: "dsh-ui-cost-meter-titleValue",
+                children: amount
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx_runtime.jsx("div", {
+            className: "dsh-ui-cost-meter-titleRule",
+            "aria-hidden": true
+          }),
+          /* @__PURE__ */ jsx_runtime.jsx("dl", {
+            className: "dsh-ui-cost-meter-details",
+            "data-cost-meter-details": true,
+            children: breakdownRows(view).map((row) => /* @__PURE__ */ jsx_runtime.jsxs(import_react.Fragment, {
+              children: [
+                /* @__PURE__ */ jsx_runtime.jsx("dt", {
+                  children: row.label
+                }),
+                /* @__PURE__ */ jsx_runtime.jsx("dd", {
+                  className: row.route === true ? "dsh-ui-cost-meter-route" : undefined,
+                  children: row.value
+                })
+              ]
+            }, row.label))
+          })
+        ]
+      }), document.body)
+    ]
+  });
+}
+function CostPill({ useProjection }) {
+  const view = useProjection(PROJECTION_KEY);
+  const { anchorRef, row } = useStatsRow();
+  const body = view === undefined || view.tokens === 0 ? null : /* @__PURE__ */ jsx_runtime.jsx(CostPillBody, {
+    view
+  });
+  return /* @__PURE__ */ jsx_runtime.jsxs(jsx_runtime.Fragment, {
+    children: [
+      /* @__PURE__ */ jsx_runtime.jsx("span", {
+        ref: anchorRef,
+        hidden: true
+      }),
+      body !== null && (row === null ? /* @__PURE__ */ jsx_runtime.jsx("div", {
+        className: "dsh-ui-cost-meter",
+        children: body
+      }) : import_react_dom.createPortal(body, row))
+    ]
+  });
+}
+function installStyle() {
+  const existing = document.getElementById(STYLE_TAG_ID);
+  if (existing !== null)
+    return () => {
+      return;
+    };
+  const style = document.createElement("style");
+  style.id = STYLE_TAG_ID;
+  style.textContent = STYLE;
+  document.head.append(style);
+  return () => {
+    style.remove();
+  };
+}
+function apply(ctx) {
+  ctx.effect(installStyle, "cost-meter: pill style");
+  ctx.slots.inject(DOCK, () => ctx.slots.register({
+    name: DOCK,
+    id: PILL_ID,
+    order: 10
+  }, CostPill));
+}
+
+		return module.exports;
+	}
+});

package/lib/index.js

@@ -0,0 +1,274 @@
+// src/index.ts
+import z from "@deepseek-ai/schemastery";
+import { z as zod } from "zod";
+
+// src/shared.ts
+var PROJECTION_KEY = "costMeter";
+var ZERO_PARTS = {
+  input: 0,
+  output: 0,
+  cacheRead: 0,
+  cacheWrite: 0
+};
+function readCount(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0)
+    return;
+  return value;
+}
+function readField(value, key) {
+  for (const [name, field] of Object.entries(value)) {
+    if (name === key)
+      return field;
+  }
+  return;
+}
+function bucketsFromUsage(usage) {
+  if (typeof usage !== "object" || usage === null)
+    return;
+  const uncachedInput = readCount(readField(usage, "inputTokens"));
+  const output = readCount(readField(usage, "outputTokens"));
+  if (uncachedInput === undefined || output === undefined)
+    return;
+  return {
+    uncachedInput,
+    output,
+    cacheRead: readCount(readField(usage, "cacheReadTokens")) ?? 0,
+    cacheWrite: readCount(readField(usage, "cacheWriteTokens")) ?? 0
+  };
+}
+function bucketsEqual(left, right) {
+  return left.uncachedInput === right.uncachedInput && left.output === right.output && left.cacheRead === right.cacheRead && left.cacheWrite === right.cacheWrite;
+}
+function tokenTotal(buckets) {
+  return buckets.uncachedInput + buckets.output + buckets.cacheRead + buckets.cacheWrite;
+}
+function resolveRates(settings, provider, model) {
+  const rates = settings.rates;
+  if (model !== null) {
+    if (provider !== null) {
+      const routed = rates[`${provider}/${model}`];
+      if (routed !== undefined)
+        return routed;
+    }
+    const bare = rates[model];
+    if (bare !== undefined)
+      return bare;
+  }
+  return settings.fallback;
+}
+function priceBuckets(buckets, rates) {
+  if (rates === undefined)
+    return;
+  return {
+    input: perMillion(buckets.uncachedInput, rates.input),
+    output: perMillion(buckets.output, rates.output),
+    cacheRead: perMillion(buckets.cacheRead, rates.cacheRead),
+    cacheWrite: perMillion(buckets.cacheWrite, rates.cacheWrite)
+  };
+}
+function perMillion(tokens, rate) {
+  return tokens / 1e6 * rate;
+}
+function addParts(left, right) {
+  return {
+    input: left.input + right.input,
+    output: left.output + right.output,
+    cacheRead: left.cacheRead + right.cacheRead,
+    cacheWrite: left.cacheWrite + right.cacheWrite
+  };
+}
+function subtractParts(left, right) {
+  return {
+    input: left.input - right.input,
+    output: left.output - right.output,
+    cacheRead: left.cacheRead - right.cacheRead,
+    cacheWrite: left.cacheWrite - right.cacheWrite
+  };
+}
+function totalOf(parts) {
+  return parts.input + parts.output + parts.cacheRead + parts.cacheWrite;
+}
+
+// src/index.ts
+var name = "cost-meter";
+var inject = ["sessionProjections"];
+var RatesSchema = z.object({
+  input: z.number().min(0).default(0),
+  output: z.number().min(0).default(0),
+  cacheRead: z.number().min(0).default(0),
+  cacheWrite: z.number().min(0).default(0)
+});
+var Config = z.object({
+  symbol: z.string().default("$"),
+  rates: z.dict(RatesSchema).default({}),
+  fallback: RatesSchema
+});
+var partsSchema = zod.strictObject({
+  input: zod.number(),
+  output: zod.number(),
+  cacheRead: zod.number(),
+  cacheWrite: zod.number()
+});
+var bucketsSchema = zod.strictObject({
+  uncachedInput: zod.number(),
+  output: zod.number(),
+  cacheRead: zod.number(),
+  cacheWrite: zod.number()
+});
+var viewSchema = zod.strictObject({
+  symbol: zod.string(),
+  total: zod.number(),
+  input: zod.number(),
+  output: zod.number(),
+  cacheRead: zod.number(),
+  cacheWrite: zod.number(),
+  tokens: zod.number(),
+  unpricedTokens: zod.number(),
+  provider: zod.string().nullable(),
+  model: zod.string().nullable()
+});
+var stateSchema = zod.strictObject({
+  parts: partsSchema,
+  tokens: zod.number(),
+  unpricedTokens: zod.number(),
+  route: zod.strictObject({ provider: zod.string(), model: zod.string() }).nullable(),
+  last: zod.strictObject({
+    turn: zod.number(),
+    step: zod.number(),
+    buckets: bucketsSchema,
+    cost: partsSchema,
+    unpriced: zod.number()
+  }).nullable(),
+  wire: viewSchema
+});
+function usageOf(event) {
+  if (event.type === "assistant/message" && event.data.usage !== undefined)
+    return event.data.usage;
+  if (event.type !== "assistant/message" && event.type !== "assistant/attempt")
+    return;
+  return lastStreamUsage(event.data.stream);
+}
+function lastStreamUsage(stream) {
+  if (!Array.isArray(stream))
+    return;
+  for (let index = stream.length - 1;index >= 0; index -= 1) {
+    const record = stream[index];
+    if (record?.type === "chunk" && record.chunk?.type === "usage")
+      return record.chunk.usage;
+  }
+  return;
+}
+function buildView(parts, tokens, unpricedTokens, route, symbol) {
+  return {
+    symbol,
+    total: totalOf(parts),
+    input: parts.input,
+    output: parts.output,
+    cacheRead: parts.cacheRead,
+    cacheWrite: parts.cacheWrite,
+    tokens,
+    unpricedTokens,
+    provider: route?.provider ?? null,
+    model: route?.model ?? null
+  };
+}
+function withSample(state, previous, sample, route, symbol) {
+  const tokens = state.tokens - (previous === null ? 0 : tokenTotal(previous.buckets)) + tokenTotal(sample.buckets);
+  const unpricedTokens = state.unpricedTokens - (previous?.unpriced ?? 0) + sample.unpriced;
+  const parts = addParts(subtractParts(state.parts, previous?.cost ?? ZERO_PARTS), sample.cost);
+  return {
+    ...state,
+    parts,
+    tokens,
+    unpricedTokens,
+    last: sample,
+    wire: buildView(parts, tokens, unpricedTokens, route, symbol)
+  };
+}
+function withRoute(state, config, settings) {
+  if (state.route?.provider === config.provider && state.route.model === config.model)
+    return state;
+  const route = { provider: config.provider, model: config.model };
+  return {
+    ...state,
+    route,
+    wire: buildView(state.parts, state.tokens, state.unpricedTokens, route, settings.symbol)
+  };
+}
+function withoutRetriedSample(state, turn, step) {
+  return state.last !== null && state.last.turn === turn && state.last.step === step ? { ...state, last: null } : state;
+}
+function readSample(state, event, settings) {
+  if (event.type !== "assistant/message" && event.type !== "assistant/attempt")
+    return null;
+  const usage = usageOf(event);
+  if (usage === undefined)
+    return null;
+  const buckets = bucketsFromUsage(usage);
+  if (buckets === undefined)
+    return null;
+  const turn = event.data.turn;
+  const step = event.data.step;
+  const previous = state.last !== null && state.last.turn === turn && state.last.step === step ? state.last : null;
+  const rates = resolveRates(settings, state.route?.provider ?? null, state.route?.model ?? null);
+  const parts = priceBuckets(buckets, rates) ?? ZERO_PARTS;
+  return {
+    previous,
+    sample: {
+      turn,
+      step,
+      buckets,
+      cost: parts,
+      unpriced: rates === undefined ? tokenTotal(buckets) : 0
+    }
+  };
+}
+function costMeterProjection(settings) {
+  return {
+    key: PROJECTION_KEY,
+    stateVersion: 1,
+    stateSchema,
+    init: () => ({
+      parts: ZERO_PARTS,
+      tokens: 0,
+      unpricedTokens: 0,
+      route: null,
+      last: null,
+      wire: buildView(ZERO_PARTS, 0, 0, null, settings.symbol)
+    }),
+    apply: (state, event) => {
+      if (event.type === "request/header") {
+        return withRoute(state, event.data.header.config, settings);
+      }
+      if (event.type === "llm/retry-started") {
+        return withoutRetriedSample(state, event.data.turn, event.data.step);
+      }
+      const read = readSample(state, event, settings);
+      if (read === null)
+        return state;
+      if (read.previous !== null && bucketsEqual(read.previous.buckets, read.sample.buckets)) {
+        return state;
+      }
+      return withSample(state, read.previous, read.sample, state.route, settings.symbol);
+    },
+    wire: {
+      viewSchema,
+      view: (state) => state.wire
+    }
+  };
+}
+function apply(ctx, config) {
+  const settings = {
+    symbol: config?.symbol ?? "$",
+    rates: config?.rates ?? {},
+    ...config?.fallback === undefined ? {} : { fallback: config.fallback }
+  };
+  ctx.sessionProjections.register(costMeterProjection(settings));
+}
+export {
+  Config,
+  apply,
+  costMeterProjection,
+  inject,
+  name
+};

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "dsh-ui-cost-meter",
+  "version": "0.0.0",
+  "description": "DeepSeek Harness Web GUI plugin: real-time spend for the current session, priced from per-model token rates and shown as a pill under the composer",
+  "homepage": "https://github.com/yuu1111/dsh-ui-cost-meter#readme",
+  "bugs": {
+    "url": "https://github.com/yuu1111/dsh-ui-cost-meter/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuu1111/dsh-ui-cost-meter.git"
+  },
+  "keywords": [
+    "cordis",
+    "deepseek-harness",
+    "dsh",
+    "dsh-plugin",
+    "cost",
+    "spend",
+    "price",
+    "billing",
+    "token",
+    "web-ui"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": {
+    "name": "yuu1111"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js"
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md",
+    "README.ja.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "bun@1.4.2",
+  "scripts": {
+    "build": "bun build.ts",
+    "check": "tsc -p tsconfig.json",
+    "test": "bun run build && bun test",
+    "lint": "biome check .",
+    "format": "biome check --write --unsafe ."
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-session-projection": "^0.1.5-rc.2",
+    "@deepseek-ai/schemastery": "^3.18.2",
+    "zod": "^4.6.2"
+  },
+  "peerDependenciesMeta": {
+    "@deepseek-ai/dsh-client-ui-conversation": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-llm": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-session": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-session-projection": "^0.1.5-rc.2",
+    "@deepseek-ai/schemastery": "^3.18.2",
+    "@types/bun": "^1.4.2",
+    "@types/react": "~19.3.0",
+    "react": "^19.3.0",
+    "typescript": "^7.0.2",
+    "zod": "^4.6.2",
+    "@deepseek-ai/dsh-client-ui-session": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-llm-retry": "^0.1.5-rc.2",
+    "react-dom": "^19.3.0",
+    "@types/react-dom": "~19.3.0",
+    "@biomejs/biome": "^2.5.13",
+    "@yuu1111/biome-config": "^2.2.0",
+    "@yuu1111/tsconfig": "^1.0.7",
+    "@yuu1111/knip-config": "^1.0.7",
+    "knip": "^6.35.1"
+  }
+}