feat: Usage page -- plan info, resource bars, feature list (OPE-103)#276
Merged
Conversation
New page at /dashboard/usage showing: - Plan card with tier badge (free/pro/enterprise, color-coded) - Resource usage bars: repos (with progress bar), files/repo, functions/repo - Bar colors: green <70%, amber 70-90%, red >90% - Feature grid: Semantic Search, DNA, MCP Access, Priority Indexing - Locked features show Pro badge + lock icon - Loading skeleton while data fetches - Uses useUserUsage hook (GET /users/usage, React Query) Route: /dashboard/usage in Dashboard.tsx Sidebar: BarChart3 icon + Usage nav link 210 lines, 4 sub-components (PlanCard, UsageBar, FeatureItem, UsageSkeleton). All shadcn: Card, Badge, Separator, Skeleton. No custom UI.
|
@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
⌛ 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. 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a new Usage page component and integrates it into the dashboard by adding a route and a sidebar navigation item; the page fetches and renders user usage, plan, resource limits, and feature availability with loading and error states. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant UsagePage
participant Hook as useUserUsage
participant API
participant DB
User->>Router: navigate /dashboard/usage
Router->>UsagePage: render UsagePage
UsagePage->>Hook: call useUserUsage(sessionToken, userId)
Hook->>API: fetch /api/usage (auth)
API->>DB: query usage data
DB-->>API: return usage records
API-->>Hook: return usage payload
Hook-->>UsagePage: provide usage data
UsagePage->>User: render plan, usage bars, features, or skeleton/error
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 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 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.
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 `@frontend/src/pages/UsagePage.tsx`:
- Around line 38-41: Normalize usage.tier to a stable lowercase value and use
conservative defaults for features: when reading usage.tier (variable tier and
any checks like in render logic) convert toString().toLowerCase() and map known
synonyms ("free","pro","enterprise") to canonical keys before using as lookup
keys; for features (variable features / usage.features) set mcp_access default
to false and priority_indexing to false so missing fields don't grant access,
and keep repos and limits fallbacks as-is; update any conditional checks that
compare tier (e.g., badge color or free-plan messaging) to use the normalized
tier variable.
ℹ️ Review info
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/components/Dashboard.tsxfrontend/src/components/dashboard/Sidebar.tsxfrontend/src/pages/UsagePage.tsx
PlanCard: free users see a highlighted upgrade banner with 'Upgrade to Pro' button and Pro benefits summary. Pro/Enterprise users see 'Active' label instead. Cost placeholder: dashed-border card at bottom with TrendingUp icon. Shows 'Token usage, cost breakdown by model, monthly spend -- coming soon.' Sets user expectation for Phase 2 metering.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
frontend/src/pages/UsagePage.tsx (1)
39-42:⚠️ Potential issue | 🟠 MajorNormalize
tierand use conservative feature defaults.Line 39 uses
usage.tierdirectly for downstream comparisons/lookups, and Line 42 defaultsmcp_accesstotrue. This can mis-render plan state and accidentally grant feature access when fields are missing.Suggested fix
+const normalizeTier = (value?: string) => { + const t = (value ?? 'free').toLowerCase() + if (t === 'enterprise' || t === 'pro' || t === 'free') return t + return 'free' +} - -const tier = usage.tier || 'free' +const tier = normalizeTier(usage.tier) const repos = usage.repositories || { current: 0, limit: 3 } const limits = usage.limits || { max_files_per_repo: 500, max_functions_per_repo: 2000 } -const features = usage.features || { priority_indexing: false, mcp_access: true } +const features = { + priority_indexing: usage.features?.priority_indexing ?? tier !== 'free', + mcp_access: usage.features?.mcp_access ?? false, +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/UsagePage.tsx` around lines 39 - 42, Normalize the usage values: ensure tier is normalized (e.g., coerce to a string and toLowerCase() with fallback 'free') before any downstream comparisons/lookups, and make feature defaults conservative by changing the features fallback so mcp_access defaults to false (keep priority_indexing false). Update the initialization of tier, repos, limits, and features in UsagePage.tsx (the consts named tier, repos, limits, features) to coerce/normalize inputs and avoid granting mcp_access when the field is missing.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/pages/UsagePage.tsx`:
- Line 192: The progress bar forces a minimum width via style={{ width:
`${Math.max(pct, 2)}%` }}, causing 0 usage to render as non-zero; update the
expression to render 0% when pct is 0 (e.g. use `${pct > 0 ? Math.max(pct, 2) :
0}%`) so that in the UsagePage component the variable pct shows true zero usage
while still preserving a visible minimum for small non-zero values.
- Around line 149-152: The "Upgrade to Pro" Button in UsagePage renders without
an onClick/navigation, so users cannot start the upgrade flow; update the Button
(component named Button in UsagePage.tsx) to call the existing billing/upgrade
handler used elsewhere in this component (e.g., the upgrade or openBillingModal
function or the prop passed down for initiating billing) by adding an onClick
that invokes that handler (or navigates to the billing route) and ensure any
required props/state (like user plan or router) are imported/available in
UsagePage before wiring it up.
---
Duplicate comments:
In `@frontend/src/pages/UsagePage.tsx`:
- Around line 39-42: Normalize the usage values: ensure tier is normalized
(e.g., coerce to a string and toLowerCase() with fallback 'free') before any
downstream comparisons/lookups, and make feature defaults conservative by
changing the features fallback so mcp_access defaults to false (keep
priority_indexing false). Update the initialization of tier, repos, limits, and
features in UsagePage.tsx (the consts named tier, repos, limits, features) to
coerce/normalize inputs and avoid granting mcp_access when the field is missing.
Major layout improvements: - Tier badge moved to header row (saves a whole card) - Upgrade CTA is a slim banner, not a card-in-card - Two-column grid: Resource Limits left, Features right - Features as simple rows instead of bordered cards - Cost placeholder horizontal (icon + text), not centered block - Thinner progress bar (h-1.5 vs h-2) - Less padding everywhere, more information density - 215 lines, same data, half the vertical space
1. Progress bar: 0 repos now renders 0% width instead of 2% sliver 2. Upgrade button: opens pricing page in new tab instead of doing nothing
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
What
New Usage page at /dashboard/usage. Shows the user their current plan, resource limits, and feature availability.
Sections
Plan card -- tier badge (Free/Pro/Enterprise) with color coding
Resource usage -- three bars:
Features -- 2x2 grid:
Technical
Files
Partial progress on OPE-103
Summary by CodeRabbit