fix(live-monitor): Fix layout collapse in narrow terminal width #328
Conversation
…ing their borders
… overflowing their borders
…erflowing borders
|
Caution Review failedThe pull request is closed. ## Walkthrough
The changes update the live dashboard rendering logic to use dynamic layout calculations and adaptive formatting based on available terminal width and content length. Progress bars, token counts, and session details now adjust their display format and line breaks responsively. The waiting logic after rendering an active block is also updated to react immediately to terminal resize events.
## Changes
| File(s) | Change Summary |
|-----------------------------|--------------------------------------------------------------------------------------------------------|
| src/_live-rendering.ts | Refactored live dashboard rendering: replaced fixed widths with dynamic calculations, added conditional formatting for token counts, and adapted layouts to fit content responsively. |
| src/commands/_blocks.live.ts | Modified waiting logic to race between delay, abort signal, and terminal resize event, enabling immediate refresh on resize. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Terminal
participant Renderer as renderLiveDisplay
participant BlockLoop
User->>BlockLoop: Start monitoring
loop Each refresh cycle
BlockLoop->>Renderer: Render dashboard
Renderer->>Terminal: Measure available width
Renderer->>Renderer: Format tokens and layout adaptively
Renderer->>Terminal: Output dashboard
BlockLoop->>Terminal: Wait for (delay OR abort OR resize)
alt Resize event
Terminal->>BlockLoop: Trigger immediate refresh
end
endEstimated code review effort2 (~20 minutes) Possibly related PRs
Poem
|
![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 @AsPulse, 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 enhances the live token usage monitor's responsiveness and readability, especially in narrow terminal environments. It introduces dynamic layout adjustments to prevent display issues and ensures the monitor re-renders automatically when the terminal window is resized.
Highlights
- Dynamic Layout Adjustments: The live monitor now intelligently adapts its display for narrow terminal widths by shortening progress bars, reducing margins, and abbreviating token counts (e.g., using 'k' for thousands) to prevent layout collapse.
- Multi-line Information Display: When terminal space is constrained, detailed information within the session, usage, and projection sections will now be displayed across two lines to maintain readability, rather than being truncated or breaking the display borders.
- Terminal Resize Responsiveness: The live monitor will automatically detect and re-render its display when the terminal window is resized, ensuring the layout always fits the current terminal dimensions without requiring a manual refresh.
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 pull request does a great job of fixing the layout collapse in the live monitor for narrow terminals by making the UI responsive. The introduction of dynamic width calculations and handling for terminal resizing are excellent improvements. My review focuses on a few areas to enhance code clarity, maintainability, and robustness. I've identified one high-severity issue regarding a potential event listener leak that should be addressed, and a couple of medium-severity suggestions to improve code readability. Overall, these changes significantly improve the user experience.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/_live-rendering.ts (1)
264-347: Complex but functional adaptive layout logic.The two-line layout fallback mechanism works correctly, though the implementation is quite complex with multiple conditional branches. The logic handles both token limit and no-limit scenarios appropriately.
Consider extracting the layout decision logic into a helper function to improve readability:
const determineUsageLayout = (totalWidth: number, availableWidth: number) => { return totalWidth > availableWidth; };However, I understand from previous feedback that you prefer to avoid refactoring unrelated to the PR's core objectives.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/_live-rendering.ts(6 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
**/*.ts
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
**/_*.ts
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🪛 ESLint
src/_live-rendering.ts
[error] 158-158: Unsafe argument of type error typed assigned to a parameter of type number.
(ts/no-unsafe-argument)
[error] 158-158: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 159-159: Unsafe argument of type error typed assigned to a parameter of type number.
(ts/no-unsafe-argument)
[error] 159-159: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 160-160: Unsafe argument of type error typed assigned to a parameter of type number.
(ts/no-unsafe-argument)
[error] 160-160: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 200-200: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 204-204: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 204-204: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 205-205: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 205-205: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 205-205: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 206-206: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 206-206: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 206-206: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 211-211: Unsafe assignment of an error typed value.
(ts/no-unsafe-assignment)
[error] 211-211: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 211-211: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 211-211: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 218-218: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 268-268: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 268-268: Unsafe member access .bold on an error typed value.
(ts/no-unsafe-member-access)
[error] 272-272: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 272-272: Unsafe member access .bold on an error typed value.
(ts/no-unsafe-member-access)
[error] 276-276: Unsafe assignment of an error typed value.
(ts/no-unsafe-assignment)
[error] 276-276: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 276-276: Unsafe member access .bold on an error typed value.
(ts/no-unsafe-member-access)
[error] 277-277: Unsafe assignment of an error typed value.
(ts/no-unsafe-assignment)
[error] 277-277: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 285-285: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 285-285: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 287-287: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 287-287: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 289-289: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 289-289: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 292-292: Unsafe assignment of an error typed value.
(ts/no-unsafe-assignment)
[error] 292-292: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 294-294: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 296-296: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 304-304: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 304-304: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 306-306: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 306-306: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 311-311: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 318-318: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 330-330: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 345-345: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 394-394: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 399-399: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 399-399: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 400-400: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 400-400: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 401-401: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 401-401: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 404-404: Unsafe assignment of an error typed value.
(ts/no-unsafe-assignment)
[error] 404-404: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 404-404: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 404-404: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 411-411: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 411-411: Unsafe member access .gray on an error typed value.
(ts/no-unsafe-member-access)
[error] 418-418: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
[error] 422-422: Unsafe call of a(n) error type typed value.
(ts/no-unsafe-call)
🔇 Additional comments (3)
src/_live-rendering.ts (3)
113-116: Well-designed helper function for adaptive token formatting.The
formatTokenDisplayfunction provides a clean abstraction for choosing between short and full token formatting based on space constraints. This approach improves code readability and reduces duplication.
204-217: Well-implemented adaptive layout for session details.The fallback logic that omits the "Elapsed" column when space is constrained is a smart approach to maintain readability in narrow terminals while preserving the most essential information.
392-430: Consistent adaptive layout implementation for projections.The projection section follows the same adaptive layout pattern as the usage section, providing consistency in the user experience. The two-line fallback logic correctly prioritizes the most important information when space is constrained.
|
This is lit |
commit: |
2 participants
The branch name is
fix-issue-172, but this does not fix issue #172.(It is a confusing branch name because I tried to create a PR out first that fixes another issue found while working on this issue. Sorry!)
Changes
In live monitor, to avoid breaking borders when the terminal is narrow, do the following:
k.In live monitor, re-render the terminal when it is resized.
Screenshots
Summary by CodeRabbit
New Features
Improvements