Skip to content

feat: バナーに claude.ai サブスクリプションの使用リミットを表示 - #44

Merged
takecchi merged 1 commit into
mainfrom
codiva/codiva-claude-subscription-web-4-45-5-pr
Jul 21, 2026
Merged

takecchi merged 1 commit into
mainfrom
codiva/codiva-claude-subscription-web-4-45-5-pr

Conversation

@takecchi

Copy link
Copy Markdown
Owner

概要

CodivaのバナーにClaude Subscription(claude.ai)の使用リミットを表示できるようにしました。Claude Code / claude.ai の Web で見られる「現在のセッション / N% 使用 / X時間後にリセット」相当の情報が、一覧画面のバナーに出ます。

使用状況
  現在のセッション  5% 使用 · 4時間45分後にリセット
  今週              40% 使用 · 6日3時間後にリセット

(英語では Current session 5% used · resets in 4h 45m

実現方法

Claude Agent SDK は claude.ai サブスクリプション利用時に rate_limit_eventrate_limit_info)を配信します。ここに rateLimitTypefive_hour / seven_day など)・utilization(使用率%)・resetsAt(リセット時刻)が入っており、これを集約して表示します。

  • 実データの形はリポジトリ内の実測フィクスチャ(src/core/__fixtures__/session-basic.jsonl)で確認: resetsAtUnix秒utilization0-100のパーセント。パーサで秒→msに正規化。
  • アカウント横断の情報(セッション状態ではない)なので、各セッションの SDK ストリームから onRateLimit(DI) で SessionManager に集約し、ウィンドウ種別ごとに最新値を保持。
  • API キー利用時は rate_limit_event が来ないため、使用状況セクションは自動的に非表示

変更点

レイヤ 変更
core/rate-limit.ts(新規・純粋) rate_limit_info の正規化・リセット残り時間算出・表示順ソート+同一ラベルの重複除去・等価判定
core/session.ts onRateLimit(DI) で rate_limit_event を転送(既存の rejected → rate_limited 遷移はそのまま)
core/session-manager.ts ウィンドウ種別ごとに集約、安定参照の getRateLimits()(無変更イベントでは再描画しない)
ui/banner.tsx + ui/hooks.tsuseRateLimit 使用状況セクションを描画
core/i18n.ts 文言を ja/en 両方に追加
docs/ARCHITECTURE.md 集約フローを追記

設計上のポイント

  • 純粋ロジックと I/O の分離: パース・算出はすべて core/rate-limit.ts(純関数)に閉じ込め、UI は計算しない。
  • 安定参照: getRateLimits() は無変更イベントで同一参照を返すため useSyncExternalStore が無限ループしない。
  • 重複ラベル防止: seven_dayseven_day_overage_included は同じ「今週」ラベルに畳まれるため、優先度の高い種別のみ残す。

テスト計画

  • npm test — 690 tests passed(core/utils カバレッジ 80%+ 維持)
  • npm run lint(Biome)clean
  • npm run typecheck clean
  • npm run build 成功
  • rate-limit.ts の単体テスト(実フィクスチャの形で秒→ms・パーセント・重複除去・クランプを検証)
  • Session / SessionManager の集約・安定参照テスト
  • Banner の ja/en 描画テスト
  • 実際の Max/Pro サブスクリプションアカウントでの目視確認(five_hour / seven_day の実値表示)

SDK の rate_limit_event(rate_limit_info)から、claude.ai サブスクリプションの
使用状況(5時間枠=現在のセッション・週次枠など)をバナーに表示する。
「現在のセッション 5% 使用 ・ 4時間45分後にリセット」のように、使用率と
リセットまでの残り時間を出す。API キー利用時は枠が来ないため非表示。

- core/rate-limit.ts(純粋): rate_limit_info の正規化(resetsAt 秒→ms、
  utilization 0-100%)、リセット残り時間の算出、表示順ソート+同一ラベルの
  重複除去、churn 回避用の等価判定。
- Session: onRateLimit(DI) で rate_limit_event を manager へ転送。既存の
  rejected→rate_limited のセッション状態遷移はそのまま維持(追加のみ)。
- SessionManager: ウィンドウ種別ごとに最新値を集約し、安定参照の
  getRateLimits() を公開(無変更イベントでは再描画しない)。
- Banner + useRateLimit: アカウント横断の使用状況セクションを描画。
  文言は i18n(ja/en)に追加。
- docs/ARCHITECTURE.md に集約フローを追記。
@takecchi
takecchi merged commit c8b1691 into main Jul 21, 2026
1 check passed
@takecchi
takecchi deleted the codiva/codiva-claude-subscription-web-4-45-5-pr branch July 21, 2026 02:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant