feat(ui): Improve responsiveness and model display in usage reports #118
Conversation
|
Warning Rate limit exceeded@ryoppippi has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 58 seconds before requesting another review. ⌛ 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. 📥 CommitsReviewing files that changed from the base of the PR and between 3c33f26ae7bdd41f04cf03d72a12808eee6bf8bf and e9b1961. 📒 Files selected for processing (6)
WalkthroughThe changes introduce a multiline model display formatter and enhance the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Command
participant ResponsiveTable
participant Utils
User->>Command: Run usage report command
Command->>Utils: formatModelsDisplayMultiline(models)
Utils-->>Command: Multiline formatted model string
Command->>ResponsiveTable: Instantiate with compact options
Command->>ResponsiveTable: Add rows with model info
Command->>ResponsiveTable: toString()
ResponsiveTable->>ResponsiveTable: Check terminal width for compact mode
ResponsiveTable-->>Command: Rendered table string
Command->>User: Display table and compact mode info (if needed)
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @adhishthite, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request significantly improves the user experience for viewing Claude Code usage reports by implementing responsive table layouts and enhancing the display of model names. The changes ensure that usage reports are accessible and readable across various terminal sizes, from wide displays to narrow mobile screens, while maintaining a professional and clean appearance.
Highlights
- Responsive Table Layout: The
ResponsiveTableclass has been enhanced to automatically adapt to terminal width. In compact mode (terminal width < 100 characters), less critical columns like 'Cache Create', 'Cache Read', and 'Total Tokens' are hidden, while essential data ('Date', 'Models', 'Input', 'Output', 'Cost (USD)') remains visible. This ensures readability on smaller screens. - Enhanced Model Display: A new
formatModelsDisplayMultilinefunction has been introduced to display model names as a bulleted list (e.g.,- model-name) instead of a comma-separated string. This significantly improves readability and reduces horizontal space usage, especially when multiple models are present. - Universal Application & User Guidance: These UI improvements are applied across all usage report commands (
daily,monthly,session, andblocks). Additionally, when the table is rendered in compact mode, a clear message is displayed to the user, informing them that they are in compact mode and how to view the full data. - Terminal Width Detection: The table's responsiveness now prioritizes the
COLUMNSenvironment variable for terminal width detection, falling back toprocess.stdout.columnsif the environment variable is not set.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This PR introduces valuable enhancements for responsive table layouts and improved model name formatting in usage reports. The implementation is largely solid, with new functionalities well-integrated across various commands. Key suggestions include improving the error handling for mismatched compact headers and expanding unit test coverage for the ResponsiveTable's compact mode logic to ensure long-term maintainability and correctness.
|
It looks really good. I'll review it later |
commit: |
- Add ResponsiveTable class with automatic terminal width detection - Implement compact mode for narrow terminals (< 100 characters) - Add smart column filtering for essential data in compact mode - Include comprehensive test coverage for compact mode behavior - Add formatModelsDisplayMultiline function for bulleted model lists The responsive table automatically adapts layout based on terminal width, showing essential columns in compact mode while maintaining full data in wide terminals. Includes proper error handling and fallback behavior. Co-authored-by: adhishthite <[email protected]>
…commands - Add compact mode configuration for daily, monthly, and session reports - Use multiline model display format for better readability - Include compact mode guidance messages for users - Configure essential columns for narrow terminal display Each command now automatically adapts to terminal width, showing Date, Models, Input, Output, and Cost columns in compact mode while preserving all data in wide terminals. Co-authored-by: adhishthite <[email protected]>
- Use consistent multiline model display across all commands - Remove unused compact parameter from formatModels function - Fix ESLint unused parameter warning This ensures all commands use the same bulleted list format for model names, improving consistency across the application. Co-authored-by: adhishthite <[email protected]>
- Document responsive table behavior and compact mode functionality - Add visual examples for both wide and narrow terminal displays - Update feature list with new responsive capabilities - Include guidance on terminal width requirements The documentation now clearly explains how the responsive tables work and provides visual examples of the output in different terminal sizes, helping users understand the feature benefits. Co-authored-by: adhishthite <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the responsiveness and model display of Claude Code usage reports by introducing compact mode support and multiline model formatting. Key changes include:
- Updating table initialization in session, monthly, daily, and blocks commands to support responsive compact mode.
- Replacing the old formatModelsDisplay with the new formatModelsDisplayMultiline function for improved model display.
- Updating the README documentation to reflect the enhanced responsive table behavior.
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/commands/session.ts | Updated table creation and model formatting for compact mode support. |
| src/commands/monthly.ts | Similar updates to support responsive layouts and multiline models. |
| src/commands/daily.ts | Added compact mode parameters and multiline model formatting. |
| src/commands/blocks.ts | Adjusted model formatting function to use multiline display consistently. |
| README.md | Revised documentation to include details on the new responsive display. |
Comments suppressed due to low confidence (1)
src/commands/blocks.ts:78
- [nitpick] Since the compact flag is no longer used and the function always applies the multiline format, consider renaming the function to something like 'formatModelsDisplayMultiline' for clarity and consistency.
*/
feat(ui): Improve responsiveness and model display in usage reports
2 participants
🖥️ Improve Table Responsiveness and Model Display
📋 Summary
This PR significantly improves the user experience for viewing Claude Code usage reports on smaller terminal sizes by implementing responsive table layouts and enhanced model formatting.
🎯 Key Features
1. Smart Responsive Tables
Cache Create,Cache Read,Total Tokens) in compact modeDate,Models,Input,Output, andCost (USD)2. Enhanced Model Display
• model-nameformat for better readability3. Universal Support
daily,monthly,session, andblockscommands🔧 Technical Implementation
New Components
ResponsiveTableclass with compact mode detectionformatModelsDisplayMultiline()function for bulleted model listsCOLUMNSenvironment variableEnhanced Features
📸 Visual Comparison
Before
After (Wide Terminal)
After (Compact Mode - 70 columns)
✅ Quality Assurance
🎉 User Benefits
This enhancement makes Claude Code usage reports accessible and readable regardless of terminal size, while maintaining a professional appearance and all existing functionality.
Summary by CodeRabbit
New Features
Enhancements