- Replace useEffect data loading with useQuery hook in Usage.tsx
- Provides better caching, error handling, and loading states
- Simplifies modal state management logic
- Addresses PR comment requesting React Query usage for data loading
Fixes: Use React Query instead of useEffect for data loading
- Replace bg-black/90 with bg-muted for better theme adaptation
- Replace text-foreground with text-muted-foreground for proper contrast
- Add border-border for better visual separation
- Ensures WCAG AAA compliance in both light and dark themes
Fixes contrast issue where command text was barely readable in light theme
(black text on nearly black background)
* Improve loading states with graceful transitions and enhanced UX
Co-authored-by: matt <matt@roocode.com>
* DRY it up
* Visual cleanup
* Cleanup
* More cleanup
* More cleanup
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Context
Currently, our analytics system provides data aggregation by developer. This PR extends this functionality to also provide analytics aggregated by repository name, allowing organizations to better understand which repositories are consuming the most resources.
Changes
Added a new getRepositoryUsage function in events.ts to aggregate data by repository
Created a new Repositories.tsx component to display repository analytics
Updated types.ts to add 'repositories' to viewModes and 'repositoryName' as a filter type
Enhanced Tasks.tsx to handle filtering by repository name
Updated Usage.tsx to render the Repositories component
Enhanced TaskCard.tsx to display repository information
Added translations for "repositories" in locale files
Added empty state handling for when no repository data is available
Testing
Navigate to Usage page and switch to "Repositories" tab
Click on repository names to filter tasks
Verify repository information appears in task cards
Test with accounts that have no repository data
