feat(ui): Improve responsiveness and model display in usage reports#118
Conversation
![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 <adhishthite@users.noreply.github.com>
…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 <adhishthite@users.noreply.github.com>
- 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 <adhishthite@users.noreply.github.com>
- 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 <adhishthite@users.noreply.github.com>
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
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
🖥️ 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