dsh-usage-bars

Codex / Claude / Gemini CLI / Antigravity / CommandCode / DeepSeek ほか 22 サービスの残り使用量を、DSH のサイドバーにバーで表示するプラグインです（CodexBar 風）。

導入

dsh plugin --profile desktop add link:/Volumes/D/Project/dsh-usage-bars

共有カタログは lib/vendor/catalog に同梱しています（追加の依存パッケージはありません）。カタログを編集したら npm run sync-catalog で同期してください。 DSH を再起動し、設定の「使用量バー」を開いてください。DSH標準の内部通信で自動接続します。外部アプリ・専用ポート・接続トークンの入力は不要です。

旧版の接続トークンは使いません。ブラウザ側に保存された旧トークンはプラグイン起動時に削除します（旧版の auth-token ファイルは読み取りも生成もしません）。サービス自身のAPIキー・OAuth認証は引き続き必要です。

仕組み

• dsh-cost-meter-ja と同じ DSH Typert RPC（remote.usageBars）で画面とホストを接続します。DSH既存の認証・通信経路を利用し、独自HTTPサーバーは立てません。モバイル／リレーでの実画面検証は未実施です。
• 各サービスの取得処理は lib/sources.js と lib/providers/*.js。1サービス1関数で、SOURCES に登録すれば増やせます。
• キーや Cookie は、DSH の資格情報 → 環境変数 → ~/.dsh/storages/usage-bars/config.json の keys の順に探します。設定画面から保存した値は、DSH の資格情報サービスがある場合はそこへ保存し、dsh-model-routes の apiKeyEnv と同じ参照を共有します（無い環境では従来どおり config.json）。この画面で編集できるのは使用量取得に必要なキーや Cookie だけです。モデル接続用のAPIキーは、DSH設定の「モデル」で管理します。
• プロバイダの表示名・認証情報の名前・クォータ取得元は @kinocode/dsh-provider-catalog を参照します。モデル登録プラグイン @kinocode/dsh-model-routes と同じ定義を共有するため、キー名の二重管理がありません。
• 「使用量バー」設定の「サービス」タブの各行には、モデル登録の有効/無効を参考表示します。モデル登録側で枠を無効にすると、そのクォータは取得・表示しません。サービス行のスイッチは使用量の取得・表示だけを切り替え、モデル登録は変更しません。モデル登録の操作はDSH設定の「モデル」で行います。

表示の仕様

• ペース警告: 「このペースだと約14時間24分後に枠が尽きます」の文は行に出しません。該当するバーのモデル名の横に ⚠ を出し、ホバー・キーボードフォーカス・タップでツールチップに文を表示します。
• 閉じているとき: 「Co 12%」の頭文字の代わりに、サービスのアイコンと使用率を出します。アイコンにホバー(またはフォーカス)すると、名前・プラン・各枠の使用率とリセット・ペース警告・エラーをツールチップに出します。専用アイコンは Claude / Codex / Gemini / Antigravity / DeepSeek で、それ以外は頭文字を丸で囲んだ記号です。
• 閉じているときは全体を少し半透明にし、ホバーすると元に戻ります。
• 「使用量」の見出しの下線はありません。
• 入力欄の上の横バー: 「Co 5時間」の頭文字をやめ、アイコン + 枠名 + 使用率にしました(プログレスバーは出しません。警告・超過は使用率の文字色で示します)。ペース警告は、枠名の横の ⚠(ホバー・フォーカス・タップでツールチップ)です。アイコン・枠名・使用率にホバー(タップ)すると、その枠の名前・プラン・使用率・リセットをツールチップに出します。長くて収まらないときは折り返さず、横スクロールにします(バーの上で縦のホイールを回すと横に動き、端まで行ったら通常のスクロールに戻ります)。スクロールバーは動かしている間(マウスではホバー中も)だけ表示し、止まると消えます。右端のアイコンで折りたたむと、アイコンだけが残ります(もう一度押すと戻ります)。開閉状態はブラウザに保存し、分割表示や別のタブの横バーにもそろいます。このブラウザの「使用量バー」設定でいったんオフにしてオンに戻すと、開いた状態で出ます。入力欄の使用量の一覧は、キーボードで選んだときもスクロールバーを出します。新規セッションの中央寄せの画面でも高さが詰められないため、上下が切れません。
• 入力欄の使用量ドック: 初期状態は右寄せの1アイコンです。タップで横に展開し、再タップ（または Escape）で畳みます。サービスごとにアイコン + 100 | 90 のように全枠の使用率をまとめ、枠名・単位は省略します。詳細の枠名・%・リセット・警告はホバー/フォーカス/タップのツールチップに残ります。折り返さず横スクロールし、スクロールバーは操作中(マウスではホバー中も)だけ表示します。「使用量バー」設定 →「通知」→「入力欄に使用量アイコンを表示」をオフにすると非表示になります（既存の chips 設定を使用。サイドバーや上の横バーとは独立）。
• ツールチップは DSH 標準の Tooltip(@deepseek-ai/dsh-client-ui-primitives)を使います。取得できない環境では title 属性で代用します。

設定画面の見た目

DSH 設定の「一般」と同じ寸法に揃えています。本文 14px/22px、補足 12px/18px、行の余白 16px、区切り線 0.5px、選択・数値の操作部品は 36px(角丸12px・薄いグレー塗り・枠線なし)、表の中の小さい操作は 28px(角丸8px)、真偽値はチェックボックスではなく 36×20px のスイッチです。文字入力だけは DSH 標準の 32px・枠線付きの入力欄を使います。サービスの一覧は表ではなく縦並びで、狭い画面でも右側が切れません。「使用量バー」設定の「サービス」タブで入力するのは使用量の取得に使う認証情報だけです。モデル接続のキー(DEEPSEEK_API_KEY と dsh-model-routes のルートキー)は入力欄を出さず、名前と状態だけを示します。モデル登録のないサービス(OpenRouter など)のキーや Cookie は、使用量の取得でしか使わないため、ここで入力します。無効にしているサービスの入力欄は出さず、有効にしたときだけ表示します。サービス一覧はDSHの「モデル」に登録があるもの、使用量が有効なもの、キー設定済みのものだけを表示し、それ以外は「モデル未登録のサービスも表示」で出します。キーは「APIキー」「Cookie」「トークン」のような日本語の名前と「設定済み」「未設定」の状態で示し、環境変数名はツールチップにだけ出します。使用率の履歴だけは表なので、狭い画面では横スクロールにします。

機能

サイドバーカード（標準/2列/簡易/細い表示）、入力欄上の横バー、角のチップ、使用率の履歴、しきい値・リセット通知、ペース警告。「使用量バー」設定は「サービス」「表示」「通知」「履歴」の4つのタブです。サービスごとの表示スイッチ・並び順・使用量取得用のキーは「サービス」タブ(最初に開くタブ)に置きます。DSH設定の「モデル」画面にはモデル登録(dsh-model-routes のモデル登録・OAuth・モデル接続用APIキー)だけを置き、使用量の一覧は出しません。モデル画面にサービスの一覧が3つ並び、同じサービスが別の名前で出て見分けにくかったためです。

サービス行の状態は「取得できています」(取得に成功)・「未設定」・「エラー」・「確認中」・「使用量を表示しない」(スイッチがオフ)です。以前の「取得中」は、処理中ではなく取得に成功している状態を指していたため改めました。モデル登録がある場合は「モデル登録あり（3件）」、モデル側で枠が無効なら「モデル側で無効」を添えます。

既知の制限

• Claude / Gemini CLI は、保存済みトークンが期限切れだと取得できません（更新はそれぞれの CLI / DSH 任せ）。
• 実データで確認済みなのは Codex・CommandCode・DeepSeek。他は公式ドキュメントに基づく実装で、未確認です。
• Cookie 系サービスは手貼りです（ブラウザからの自動取得はしません）。

内部RPC

getConfig、updateConfig、getUsage、getHistory、clearHistory、setRoute を usageBars サービスとして公開します。キーの値は応答に含めません。従来の /config などの独自HTTPエンドポイントは廃止しました。

テスト

node test/composer-browser.mjs は実React 18 + Chromiumで入力欄ドックの開閉・キーボード操作・320/390/768/1280pxの配置・横スクロール・設定切替・アンマウントを検証します（既定では隣接するDSH checkoutの依存とmacOS Chromeを使用。DSH_TEST_DEPS / DSH_TEST_CHROME で変更可）。

npm test でホストAPI・取得処理・ブラウザ側通知の回帰テストを実行します。実DSHのTypert契約テストまで必須にする場合は npm run test:contract（DSH_RUNTIME_ROOT が必要）を使ってください。一時ディレクトリ、模擬プロバイダと模擬HTTP応答を使用し、本番のキー・履歴・外部APIは利用しません。