0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【v1.13.0リリース】Claude Codeの使用量ゲージはVS Code内にどこまで表示できるのか?

0
Posted at

はじめに

Input Assistant for Claude Code の v1.13.0 をリリースした。

今回の中心は AI 使用量表示 ── Claude の5時間セッション制限・週間制限・モデル別制限の使用率を、VS Code の入力パネル内にゲージ表示する機能だ。

以前から「Claude Code を使っていると、いつ制限に当たるのか分からないまま作業している」感覚がずっとあって、これをどうにかしたかった。

この記事では、なぜこの機能を後回しにしていたのか、どういうアプローチで実現したのか、UI 設計で何を考えたのかを記録として残しておく。

背景 ── 一度は「無理」と結論づけていた機能

Claude Code には /usage コマンドがあり、CLI 上で使用量を確認できる。ただ、これは「確認しに行く」操作であって、「常に視界に入っている」状態ではない。

自分の使い方だと、入力パネルからメッセージを組み立てて Claude Code に送る、というループを一日中回している。その途中で「そろそろセッション制限が近いかも」と思ったらターミナルに切り替えて /usage を打つ ── この往復が地味に面倒だった。制限に気づかず作業を続けて、いいところで止められるのが一番つらい。

以前この機能を検討したときは、「Anthropic が公式の使用量 API を公開しない限り、信頼できる方法はない」と結論づけて棚上げしていた。API キー経由のアクセスでは、Claude Pro / Max のサブスクリプション側の使用量は取れないからだ。

今回の突破口は、Claude Code 自身のログイン情報を再利用する という発想だった。


アプローチ ── Claude Code の認証情報を借りる

Claude Code はログイン時の認証情報を ~/.claude/.credentials.json に保存している(macOS では Keychain 保存の環境もある)。拡張機能側でこれを読み取り、そのトークンで api.anthropic.com から使用量を取得する。

この方式のポイントは3つ。

1. 追加設定が不要

ユーザーは Claude Code に既にログインしている。その資格情報をそのまま使うので、拡張機能側で API キーを入力させたり、別途認証フローを作ったりする必要がない。インストールして Claude Code を使っていれば、勝手にゲージが表示される。

2. 認証情報が「無い」ケースの扱い

  • 認証情報が見つからない環境では、機能ごと自動非表示にする。使えない機能の UI を出しても混乱するだけなので
  • macOS で .credentials.json が存在せず Keychain に保存されている環境向けに、Keychain から取得するフォールバックを実装した
  • トークンが期限切れの場合はゲージをグレーアウトして「古い情報かもしれない」ことを示す

3. トークンの扱いは慎重に

accessToken はログにもエラーメッセージにも一切出力しない。通信先も api.anthropic.com のみに限定している。他人の家の鍵を借りているようなものなので、扱いには気を使った。

なお、この方式は公式にサポートされた API ではないため、Claude Code 側の仕様変更で動かなくなる可能性は常にある。その前提で「壊れても本体機能に影響しない、外付けのゲージ」として設計している。


UI 設計 ── 「常に見える」と「邪魔しない」の両立

使用量表示は2段構えにした。

折り畳みサマリー

入力タブの上部に、1行のコンパクトなサマリーを表示する。

⚡ 使用量 S:87% W:53%

image.png

S はセッション(5時間)制限、W は週間制限。クリックすると Session / Weekly のミニゲージが展開される。入力パネルは本来「メッセージを書く場所」なので、使用量情報が主張しすぎないことを優先した。

専用「⚡ 使用量」タブ

詳細が見たいときのために専用タブを用意した。こちらには全部入れている。

  • モデル別制限を含む全ゲージ
  • リセット時刻(「あと2時間」のような相対表示と絶対時刻の併記)
  • 最終更新時刻と「今すぐ更新」ボタン

ゲージの色分け

使用率に応じて色を変える。

使用率 表示
〜69% 通常色
70〜89% 警告色
90%〜 エラー色

「数値を読む」のではなく「色で気づく」ことを狙っている。視界の端に赤いゲージがあれば、数字を読まなくても「そろそろだな」と分かる。

エラー時の挙動

ネットワークエラーで取得に失敗した場合は前回値を保持して表示し続ける。使用量は5分間隔のポーリング(設定で変更可能)なので、一時的な失敗で表示が消えるより、少し古い値でも出ている方が実用的だと判断した。

ここで一つバグを踏んだ。初回取得がいきなりネットワークエラーだった場合、前回値が存在しないのに「前回取得値を表示しています」という文言が出てしまう。リリース前の自分のテストでは「一度成功してから失敗する」パターンしか試しておらず、「最初から失敗する」パターンが抜けていた。修正済みだが、エラーハンドリングは初回とそれ以降で状態が違うという当たり前のことを改めて思い知った。


プロバイダー抽象化 ── Claude 専用にしなかった理由

使用量の取得部分は UsageProvider インターフェースに分離した。

現時点で実装しているのは Claude のみだが、この拡張機能は Claude Code / OpenAI Codex / Gemini Code Assist のマルチ AI 対応を掲げている。将来的に ChatGPT(Codex)や Gemini、GitHub Copilot の使用量も同じゲージ UI に載せられる構造にしておきたかった。

設定もプロバイダー単位で持たせている。

{
  "cc-input-jp.usage.enabled": true,        // 機能全体の有効/無効
  "cc-input-jp.usage.pollIntervalMinutes": 5, // ポーリング間隔
  "cc-input-jp.usage.providers": ["claude"]   // 表示するプロバイダー
}

正直に言うと、Claude 以外のプロバイダーで同様の使用量取得が実現できるかはまだ分からない。各サービスの認証情報の保存方式も API の有無も違う。ただ、取得ロジックと表示 UI が密結合していると後から分離するのは大変なので、最初から境界だけ引いておいた。実装は必要になったときに考える。

その他の細かい改善

エディタタブアイコン

入力パネルをエディタ領域に開いたとき、タブに拡張機能のアイコンが表示されるようになった。これまでは汎用のファイルアイコンで、タブが並ぶと見分けがつきにくかった。小さい変更だが、毎日目にする部分なので体感は意外と大きい。

Codex 送信のフォールバック統一

Codex へメッセージを送る際、サイドバーを開くコマンドが失敗するケースがあった。ただ、この時点でクリップボードへのコピーは完了しているので、「失敗」扱いにするのではなく「貼り付けてください」という案内付きの成功扱いに変更した。Gemini 側は既にこの挙動だったので、両者を揃えた形になる。

おわりに

「公式 API がないから無理」と一度結論づけた機能でも、視点を変えると別の道があった。今回の場合は「拡張機能が自前で認証する」のではなく「ユーザーが既に持っている認証を借りる」という切り替えがすべてだった。

一方で、この方式は公式サポートの外側にある。Anthropic が公式の使用量 API を提供してくれれば、もっと堅牢に、そしてクロスデバイスでの使用量表示のような発展的なこともできるようになる。それまでのつなぎとして、まずは自分が毎日使うローカル環境で「制限を気にせず、でも気づける」状態を作れたことに満足している。

いつも通り、まず自分が使い倒して、壊れたら直していく。

リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?