feat(dashboard): add cyber dino usage mascot#637
Conversation
|
Warning Review limit reached
More reviews will be available in 41 minutes and 52 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough概览页新增 CyberDino 用量展示，补充了中英文文案、月度统计计算、偏好存储与页面挂载。 ChangesCyberDino 仪表板
Sequence Diagram(s)sequenceDiagram
participant OverviewPage
participant CyberDinoUsageBadge
participant CyberDinoUsageCard
participant useUsageStats
participant localStorage
OverviewPage->>CyberDinoUsageBadge: render PageHeader actions
OverviewPage->>CyberDinoUsageCard: render usage card in main content
CyberDinoUsageCard->>useUsageStats: query current month usage window
useUsageStats-->>CyberDinoUsageCard: daily usage stats
CyberDinoUsageCard->>localStorage: read and persist preferences
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
|
Implemented the cyber dino usage mascot for the dashboard. What changed:
Validation run:
Screenshot boundary:
@coderabbitai review |
|
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/src/pages/overview.tsx`:
- Around line 345-348: The top-of-page ordering in overview should keep the
cooldown alert banner above the main content instead of being pushed down by the
decorative CyberDino card. Update the render order in the overview page so the
active cooldowns banner is placed before CyberDinoUsageCard, and keep the banner
logic tied to activeCooldowns.length > 0 while preserving the existing section
structure.
In `@web/src/pages/overview/components/cyber-dino-usage-card.tsx`:
- Around line 63-69: The monthly usage query in useMonthlyUsageTotals is using a
time-based window that can differ by milliseconds between component instances,
causing duplicate useUsageStats requests and inconsistent totals between the
badge and the main card. Make the month window stable by deriving it once from a
shared source or moving the query to a parent and passing the result down, and
use the same start/end values consistently wherever useMonthlyUsageTotals or the
related overview components are rendered.
- Around line 49-60: The shared preference state is currently duplicated because
both CyberDinoUsageBadge and CyberDinoUsageCard call
useCyberDinoUsagePreferences independently, so updates only affect one component
until refresh. Refactor the preference source into a shared parent or Context,
or switch useCyberDinoUsagePreferences to a single subscribed store with
useSyncExternalStore so both consumers read and update the same state. Keep the
loadPreferences and STORAGE_KEY flow centralized so theme/material/motion
changes stay synchronized across the badge and card.
- Around line 30-31: The usage card still mixes browser locale output and
hardcoded English units, so localize both the reset date and token units
consistently. Update formatResetDate() in cyber-dino-usage-card.tsx to accept
and use i18n.language instead of the default browser locale, and replace the
hardcoded "tokens" text at the affected render sites with translation keys so
the card reads naturally in Chinese and other locales. Use the existing i18n
usage in the component to wire this through the date/label formatting paths.
In `@web/src/pages/overview/components/cyber-dino-usage.ts`:
- Around line 12-19: The MonthlyUsageTotals aggregation is collapsing the
upstream cache breakdown into a single cacheTokens field, which loses the
separate cacheRead and cacheWrite values needed by the overview cards. Update
the MonthlyUsageTotals type and the related aggregation logic in
cyber-dino-usage.ts to keep cacheRead and cacheWrite as distinct fields, and
compute totalTokens from all usage parts instead of from the merged cache value.
Make sure any consumers of MonthlyUsageTotals are updated to use the new fields
so the monthly UI can display both cache metrics separately.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fb03d27d-491c-4466-a01b-34b24706884d
📒 Files selected for processing (6)
web/src/locales/en.jsonweb/src/locales/zh.jsonweb/src/pages/overview.tsxweb/src/pages/overview/components/cyber-dino-usage-card.tsxweb/src/pages/overview/components/cyber-dino-usage.test.tsweb/src/pages/overview/components/cyber-dino-usage.ts
| function useMonthlyUsageTotals() { | ||
| const windowRange = useMemo(() => getCurrentMonthUsageWindow(), []); | ||
| const { data: stats, isLoading } = useUsageStats({ | ||
| granularity: 'day', | ||
| start: windowRange.start.toISOString(), | ||
| end: windowRange.end.toISOString(), | ||
| }); |
There was a problem hiding this comment.
🚀 Performance & Scalability | 🟠 Major | ⚡ Quick win
稳定并共享月度用量查询。
徽标和主卡都会调用 useMonthlyUsageTotals()，而这里每个实例都会用当前时间生成不同的 end。这会让 useUsageStats 的 query key 可能相差毫秒级，导致重复请求和徽标/卡片总量短暂不一致。建议用稳定的月份窗口，或在父级只查询一次后传给两个组件。
Also applies to: 215-250
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/src/pages/overview/components/cyber-dino-usage-card.tsx` around lines 63
- 69, The monthly usage query in useMonthlyUsageTotals is using a time-based
window that can differ by milliseconds between component instances, causing
duplicate useUsageStats requests and inconsistent totals between the badge and
the main card. Make the month window stable by deriving it once from a shared
source or moving the query to a parent and passing the result down, and use the
same start/end values consistently wherever useMonthlyUsageTotals or the related
overview components are rendered.
|
Updated the mascot visual after design feedback. What changed in the follow-up commit:
Validation rerun:
Screenshot boundary:
@coderabbitai review |
|
✅ Action performedReview finished.
|
|
Refined the mascot again after design feedback. What changed:
Validation rerun:
Screenshot boundary:
@coderabbitai review |
|
✅ Action performedReview finished.
|
|
Addressed the earlier review feedback while keeping the refined product-badge mascot direction. Fixes included:
Validation rerun:
Screenshot boundary:
@coderabbitai review |
|
If you found this review helpful, would you consider giving us a shout-out on X%E9%81%BF%E5%85%8D%E9%87%8D%E5%A4%8D%E6%9F%A5%E8%AF%A2%EF%BC%8C%E5%90%8C%E9%A1%B5%E5%81%8F%E5%A5%BD%E7%94%A8%E4%BA%8B%E4%BB%B6%E5%90%8C%E6%AD%A5%EF%BC%8CcacheRead%2FcacheWrite%E5%88%86%E5%BC%80%E7%BB%9F%E8%AE%A1%EF%BC%8Ci18n%E4%B9%9F%E6%9B%B4%E7%A8%B3%E3%80%82%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90%E8%AF%95%E8%AF%95%F0%9F%9A%80%E2%9C%A8&url=https%3A%2F%2Fgithub.com%2Fawsl-project%2Fmaxx%2Fpull%2F637)? Thank you for using CodeRabbit! ✅ Action performedReview finished.
|
|
Updated the preview branding assets to use the low-fi routing gremlin direction instead of the previous polished fantasy-style mascot. Changed assets:
Validation performed locally against the production build:
Remaining risk: GitHub PR checks and CodeRabbit are still re-running for commit @coderabbitai review |
|
✅ Action performedReview finished.
|
|
Follow-up fix: the previous asset update replaced Changed files:
Local validation performed:
Remote checks are re-running for @coderabbitai review |
|
✏️ Learnings added
✅ Action performedReview finished.
|
1 participant
Summary
Validation
pnpm --dir web test -- src/pages/overview/components/cyber-dino-usage.test.ts(ran 10 frontend test files, 53 tests)pnpm --dir web typecheckpnpm --dir web lintpnpm --dir web buildgit diff --checkScreenshot / observation boundary
127.0.0.1:9896and captured a screenshot using Playwright.Summary by CodeRabbit