feat(overlay): expose weekly cap utilization bar [GET-19]#52
Conversation
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 39 minutes and 16 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe PR extends the usage budget tracking system by restructuring the Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
entrypoints/claude-ai.content.ts (1)
61-75:⚠️ Potential issue | 🟡 MinorStale JSDoc after return type change.
The doc block still says "return the 5-hour session utilization percentage" and "The returned utilization value is used for delta tracking," but the signature at line 76 now returns
UsageBudgetResult | null. Callers obtain the delta input viabudget.sessionPct(see lines 296 and 468).Proposed update
/** * Fetch the Anthropic usage limits for this account, forward to background for - * storage, and return the 5-hour session utilization percentage. + * storage, and return the computed UsageBudgetResult (session + weekly + * utilization with reset metadata). * * The usage endpoint returns exact session and weekly utilization with reset * timestamps — the same data shown on claude.ai/settings/limits. * * Called on ORGANIZATION_DETECTED (page load) and after each STREAM_COMPLETE. - * The returned utilization value is used for delta tracking: the caller snapshots - * the before-value, calls this, and subtracts to get the exact session cost of - * the last message. + * Callers use `result.sessionPct` for delta tracking: snapshot the before-value, + * call this, and subtract to get the exact session cost of the last message. + * The `result.weeklyPct` drives the overlay weekly-cap bar and the side panel + * Usage Budget card. * * Returns null on any failure (network error, malformed response). The caller * treats null as "delta uncomputable" and records the turn without a delta. */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@entrypoints/claude-ai.content.ts` around lines 61 - 75, Update the stale JSDoc to reflect the new return type UsageBudgetResult | null: remove the phrasing that says the function returns "the 5-hour session utilization percentage" and instead document that it returns a UsageBudgetResult object (or null on failure) containing fields like sessionPct (the session utilization percentage used by callers for delta tracking) and any other returned timestamps/weekly/session fields; also note callers read the delta from budget.sessionPct. Ensure the description still covers when it is called (ORGANIZATION_DETECTED/after STREAM_COMPLETE) and that null means "delta uncomputable."
🧹 Nitpick comments (1)
ui/overlay-styles.ts (1)
362-365: Optional: consolidate duplicate zone/health color declarations.
lco-bar-fill--comfortableandlco-bar-fill--moderateshare identicalbackgroundandbox-shadowvalues withlco-bar-fill--healthy(line 358) andlco-bar-fill--degrading(line 359) respectively. If the intent is for zone and health colors to stay in lockstep, you can group selectors to avoid drift. If they are expected to diverge in the future, the current split is fine and this can be ignored.Proposed consolidation
-.lco-bar-fill--healthy { background: `#86efac`; box-shadow: 0 0 6px rgba(134, 239, 172, 0.3); } -.lco-bar-fill--degrading { background: `#f59e0b`; box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); } .lco-bar-fill--critical { background: `#ef4444`; box-shadow: 0 0 6px rgba(239, 68, 68, 0.3); } /* Budget zone fill colors — used by the weekly cap bar */ -.lco-bar-fill--comfortable { background: `#86efac`; box-shadow: 0 0 6px rgba(134, 239, 172, 0.3); } -.lco-bar-fill--moderate { background: `#f59e0b`; box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); } +.lco-bar-fill--healthy, +.lco-bar-fill--comfortable { background: `#86efac`; box-shadow: 0 0 6px rgba(134, 239, 172, 0.3); } +.lco-bar-fill--degrading, +.lco-bar-fill--moderate { background: `#f59e0b`; box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); } .lco-bar-fill--tight { background: `#fb923c`; box-shadow: 0 0 6px rgba(251, 146, 60, 0.3); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/overlay-styles.ts` around lines 362 - 365, The CSS repeats identical rules for zone and health states: merge selectors that share the same background and box-shadow to prevent drift—specifically group .lco-bar-fill--healthy with .lco-bar-fill--comfortable for the green styles, and .lco-bar-fill--degrading with .lco-bar-fill--moderate for the amber styles—so update the rule declarations for those selectors (referencing .lco-bar-fill--healthy, .lco-bar-fill--comfortable, .lco-bar-fill--degrading, .lco-bar-fill--moderate) to use grouped selectors instead of duplicate blocks.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@entrypoints/claude-ai.content.ts`:
- Around line 61-75: Update the stale JSDoc to reflect the new return type
UsageBudgetResult | null: remove the phrasing that says the function returns
"the 5-hour session utilization percentage" and instead document that it returns
a UsageBudgetResult object (or null on failure) containing fields like
sessionPct (the session utilization percentage used by callers for delta
tracking) and any other returned timestamps/weekly/session fields; also note
callers read the delta from budget.sessionPct. Ensure the description still
covers when it is called (ORGANIZATION_DETECTED/after STREAM_COMPLETE) and that
null means "delta uncomputable."
---
Nitpick comments:
In `@ui/overlay-styles.ts`:
- Around line 362-365: The CSS repeats identical rules for zone and health
states: merge selectors that share the same background and box-shadow to prevent
drift—specifically group .lco-bar-fill--healthy with .lco-bar-fill--comfortable
for the green styles, and .lco-bar-fill--degrading with .lco-bar-fill--moderate
for the amber styles—so update the rule declarations for those selectors
(referencing .lco-bar-fill--healthy, .lco-bar-fill--comfortable,
.lco-bar-fill--degrading, .lco-bar-fill--moderate) to use grouped selectors
instead of duplicate blocks.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f16fab02-b28c-42c7-89ba-408b2a49b752
📒 Files selected for processing (6)
entrypoints/claude-ai.content.tslib/overlay-state.tstests/unit/overlay-state.test.tstests/unit/overlay-weekly-cap.test.tsui/overlay-styles.tsui/overlay.ts
…electors [GET-19]
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1 participant
Summary
Adds a weekly cap utilization bar to the overlay widget. Before this PR, users whose weekly cap was at 71% but whose 5-hour session was at 3% would see the overlay show a nearly-empty bar and believe they were fine. They were not. The weekly bar closes that gap by surfacing the most actionable number — cap lockout risk — in the surface users always see.
The bar is derived from the same
computeUsageBudgetcall path the side panel already uses, so the two surfaces are guaranteed to agree to the percent point for the same snapshot.Type of change
What was changed
lib/overlay-state.ts— addedusageBudget: UsageBudgetResult | nullfield toOverlayState; addedapplyUsageBudgettransition functionentrypoints/claude-ai.content.ts— changedfetchAndStoreUsageLimitsreturn type fromnumber | nulltoUsageBudgetResult | null; computes the budget from the same parsed response before forwarding to background storage; both call sites (ORGANIZATION_DETECTED + post-STREAM_COMPLETE) now apply the budget to overlay state and re-renderui/overlay.ts— added.lco-weekly-rowbar below the session-limit bar; hidden whenusageBudgetis null, visible with correct zone class +scaleXfill +NN% weeklylabel when setui/overlay-styles.ts— added.lco-bar-fill--comfortable,--moderate,--tightzone fill variants (critical already existed); prefers-reduced-motion covered by existing.lco-bar-fill { transition: none }ruletests/unit/overlay-state.test.ts— addedapplyUsageBudgetunit tests (7 cases)tests/unit/overlay-weekly-cap.test.ts— new file: visibility, fill transform, zone class, label text, overlay/side-panel weeklyPct invariant (21 cases)How to test
NN% weeklybar below the session-limit barRelated issues
Closes GET-19
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes