feat: OpenUsage rate limits panel (from dpcode)#63
Open
aaditagrawal wants to merge 2 commits intomainfrom
Open
feat: OpenUsage rate limits panel (from dpcode)#63aaditagrawal wants to merge 2 commits intomainfrom
aaditagrawal wants to merge 2 commits intomainfrom
Conversation
📝 WalkthroughWalkthroughAdds client-side rate-limit parsing, normalization, and UI: new React components (panel, list, banner), core rate-limit utilities, OpenUsage snapshot normalization and React Query integration, a centralized icon module, and accompanying tests. Changes
Sequence Diagram(s)sequenceDiagram
participant UI as RateLimitsPanel
participant Threads as OrchestrationThreads
participant Derive as deriveAccountRateLimits()
participant Rows as deriveVisibleRateLimitRows()
participant Summary as RateLimitSummaryList
participant Query as openUsageProviderSnapshotQuery
participant OpenUsage as OpenUsage API
UI->>Derive: provide threads
Derive->>Threads: scan activities (account.rate-limits / rate-limited)
Derive-->>UI: ProviderRateLimit[] (normalized)
UI->>Rows: rateLimits
Rows-->>UI: VisibleRateLimitRow[] (deduped, remaining%)
UI->>Summary: render rows
Query->>OpenUsage: GET /v1/usage/{providerId}
OpenUsage-->>Query: snapshot JSON / 204/404/null
Query-->>UI: normalized snapshot (or null)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
github-actions
bot
added
vouch:trusted
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/lib/icons.tsx`:
- Around line 1-5: The imports (PiGitCommit, PiSquareSplitHorizontal,
PiSquareSplitVertical, RiApps2Line, TbArrowsRightLeft, TbPlug) in
apps/web/src/lib/icons.tsx reference packages that are not declared in any
package.json; add the missing dependencies (`@tabler/icons-react` and react-icons)
to the repository package manifest (e.g., run bun add or npm/yarn add) for the
web app so the imports resolve, then commit the updated package.json and
lockfile before merging.
- Around line 78-80: Several icon wrappers typed as LucideIcon (AppsIcon,
GitCommitIcon, PlugIcon, HandoffIcon, SquareSplitHorizontal,
SquareSplitVertical) drop props and thus violate the SVGProps contract; update
each component to forward all incoming props to the underlying react-icon
component (use {...props}) following the existing adaptIcon pattern so aria-*,
role, event handlers, sizing, className/style merge correctly and no props are
lost. Locate the functions AppsIcon, GitCommitIcon, PlugIcon, HandoffIcon,
SquareSplitHorizontal and SquareSplitVertical and change their JSX to pass
{...props} into the rendered icon element while keeping any existing
className/style handling consistent with other icons.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8c4b9b7a-36b5-4571-addd-53315829ab72
📒 Files selected for processing (9)
apps/web/src/components/RateLimitSummaryList.tsxapps/web/src/components/RateLimitsPanel.test.tsxapps/web/src/components/RateLimitsPanel.tsxapps/web/src/components/chat/RateLimitBanner.tsxapps/web/src/lib/icons.tsxapps/web/src/lib/openUsageRateLimits.test.tsapps/web/src/lib/openUsageRateLimits.tsapps/web/src/lib/openUsageReactQuery.tsapps/web/src/lib/rateLimits.ts
👮 Files not reviewed due to content moderation or server errors (8)
- apps/web/src/components/RateLimitSummaryList.tsx
- apps/web/src/components/RateLimitsPanel.tsx
- apps/web/src/lib/openUsageRateLimits.test.ts
- apps/web/src/components/RateLimitsPanel.test.tsx
- apps/web/src/lib/openUsageReactQuery.ts
- apps/web/src/components/chat/RateLimitBanner.tsx
- apps/web/src/lib/openUsageRateLimits.ts
- apps/web/src/lib/rateLimits.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/lib/icons.tsx`:
- Around line 133-134: SquareSplitHorizontal and SquareSplitVertical are both
assigned to SplitIcon so they render identical glyphs; update the export for
SquareSplitVertical to point to the correct vertical variant or create a
vertical variant instead of reusing SplitIcon. Locate the exports for
SquareSplitHorizontal, SquareSplitVertical and change SquareSplitVertical to
reference the proper component (e.g., SplitVerticalIcon or a newly created
VerticalSplitIcon), or adjust SplitIcon to accept an orientation prop and export
SquareSplitHorizontal = (props) => <SplitIcon orientation="horizontal"
{...props}> and SquareSplitVertical = (props) => <SplitIcon
orientation="vertical" {...props}> so the two exports render distinct oriented
glyphs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: abad348e-231d-45ae-9713-56305d27fba0
📒 Files selected for processing (4)
apps/web/src/components/RateLimitsPanel.test.tsxapps/web/src/components/RateLimitsPanel.tsxapps/web/src/components/chat/RateLimitBanner.tsxapps/web/src/lib/icons.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/web/src/components/chat/RateLimitBanner.tsx
- apps/web/src/components/RateLimitsPanel.tsx
- apps/web/src/components/RateLimitsPanel.test.tsx
Comment on lines
+133
to
+134
| export const SquareSplitHorizontal = SplitIcon; | ||
| export const SquareSplitVertical = SplitIcon; |
There was a problem hiding this comment.
SquareSplitHorizontal and SquareSplitVertical currently render the same glyph.
Line 133 and Line 134 both point to SplitIcon, so UI contexts that expect orientation-specific visuals won’t be distinguishable.
Suggested fix
export const SquareSplitHorizontal = SplitIcon;
-export const SquareSplitVertical = SplitIcon;
+export const SquareSplitVertical: LucideIcon = (props) => (
+ <SplitIcon
+ {...props}
+ style={{
+ ...(props.style ?? {}),
+ transform: "rotate(90deg)",
+ transformOrigin: "center",
+ }}
+ />
+);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const SquareSplitHorizontal = SplitIcon; | |
| export const SquareSplitVertical = SplitIcon; | |
| export const SquareSplitHorizontal = SplitIcon; | |
| export const SquareSplitVertical: LucideIcon = (props) => ( | |
| <SplitIcon | |
| {...props} | |
| style={{ | |
| ...(props.style ?? {}), | |
| transform: "rotate(90deg)", | |
| transformOrigin: "center", | |
| }} | |
| /> | |
| ); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/lib/icons.tsx` around lines 133 - 134, SquareSplitHorizontal and
SquareSplitVertical are both assigned to SplitIcon so they render identical
glyphs; update the export for SquareSplitVertical to point to the correct
vertical variant or create a vertical variant instead of reusing SplitIcon.
Locate the exports for SquareSplitHorizontal, SquareSplitVertical and change
SquareSplitVertical to reference the proper component (e.g., SplitVerticalIcon
or a newly created VerticalSplitIcon), or adjust SplitIcon to accept an
orientation prop and export SquareSplitHorizontal = (props) => <SplitIcon
orientation="horizontal" {...props}> and SquareSplitVertical = (props) =>
<SplitIcon orientation="vertical" {...props}> so the two exports render distinct
oriented glyphs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ports the OpenUsage rate limits feature from the dpcode fork. This adds:
lib/rateLimits.ts) — shared rate-limit parsing, normalization, formattinglib/openUsageRateLimits.ts) — normalizes snapshots from the local OpenUsage HTTP service (port 6736) into the shared rate-limit modellib/openUsageReactQuery.ts) — polls OpenUsage every 15s with graceful fallbackRateLimitsPanel.tsx) — collapsible panel showing per-provider rate limitsRateLimitSummaryList.tsx) — compact rate-limit row rendererchat/RateLimitBanner.tsx) — alert banner for rate-limit warningsExtended provider mappings to support all 8 providers (codex, claude, copilot, cursor, opencode, gemini, amp, kilo).
Test plan
Summary by CodeRabbit
New Features
Tests