fix: reduce screen flickering in live monitoring using alternate screen buffer #166
Conversation
- Add enterAlternateScreen() and exitAlternateScreen() methods to TerminalManager - Use ANSI escape sequences for alternate screen buffer control - Ensure alternate screen is exited during cleanup to restore terminal state
…ffer - Enter alternate screen buffer when starting live monitoring - Remove redundant clearScreen() call in render loop - Alternate screen buffer handles clearing automatically on updates - This significantly reduces flickering on slower terminals
WalkthroughThe changes introduce methods to manage the terminal's alternate screen buffer in the TerminalManager class, updating cleanup logic to restore the original screen. The live monitoring command now uses the alternate screen buffer for rendering, removing manual screen clearing and relying on the new buffer management for smoother updates. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TerminalManager
participant Terminal
User->>TerminalManager: start live monitoring
TerminalManager->>Terminal: enterAlternateScreen()
TerminalManager->>Terminal: hideCursor()
loop live updates
TerminalManager->>Terminal: render updates
end
User->>TerminalManager: stop monitoring/cleanup
TerminalManager->>Terminal: exitAlternateScreen()
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🧰 Additional context used🪛 ESLintsrc/_terminal-utils.ts[error] 46-46: Unexpected any value in conditional. An explicit comparison or type conversion is required. (ts/strict-boolean-expressions) [error] 46-46: Unsafe member access .isTTY on an (ts/no-unsafe-member-access) [error] 47-47: Unsafe call of a(n) (ts/no-unsafe-call) [error] 47-47: Unsafe member access .write on an (ts/no-unsafe-member-access) [error] 55-55: Unexpected any value in conditional. An explicit comparison or type conversion is required. (ts/strict-boolean-expressions) [error] 55-55: Unsafe member access .isTTY on an (ts/no-unsafe-member-access) [error] 56-56: Unsafe call of a(n) (ts/no-unsafe-call) [error] 56-56: Unsafe member access .write on an (ts/no-unsafe-member-access) ⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (5)
✨ 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 @ryoppippi, 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 addresses a significant user experience issue in live monitoring by implementing an alternate screen buffer. This change eliminates visible screen flickering caused by repeated screen clearing, making extended monitoring sessions much more pleasant. It also refines the terminal management by ensuring the original terminal state is always restored upon application exit.
Highlights
- User Experience Improvement: Introduced the use of an alternate screen buffer for live monitoring displays to significantly reduce screen flickering, providing a smoother user experience.
- Performance Optimization: Eliminated redundant
clearScreen()calls within the live monitoring render loop, as the alternate buffer handles screen updates more efficiently. - Robust Cleanup: Ensured proper restoration of the terminal's original state upon exiting the application by adding a call to exit the alternate screen buffer during cleanup.
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. ↩
commit: |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
ccusage-guide | 0f2ef94 | Jun 22 2025, 07:25 PM |
There was a problem hiding this comment.
Code Review
This pull request introduces an alternate screen buffer to reduce flickering in live monitoring. The changes include adding methods to enter and exit the alternate buffer in TerminalManager and using them in the live monitoring command. A potential issue with the clearScreen() call inside renderLiveDisplay has been identified, along with suggestions to use constants from the ansi-escapes library and adjust the order of calls in the cleanup function.
|
|
||
| // Clear screen and render | ||
| terminal.clearScreen(); | ||
| // Render display - alternate screen buffer reduces flicker |
There was a problem hiding this comment.
The renderLiveDisplay function still calls terminal.clearScreen() which may cause flickering. Consider removing this call to fully eliminate flickering.
| */ | ||
| enterAlternateScreen(): void { | ||
| if (this.stream.isTTY) { | ||
| this.stream.write('\u001B[?1049h'); |
There was a problem hiding this comment.
Consider using the ansiEscapes.alternateScreen constant from the already imported ansi-escapes library for consistency and readability.
| this.stream.write('\u001B[?1049h'); | |
| this.stream.write(ansiEscapes.alternateScreen); |
| */ | ||
| exitAlternateScreen(): void { | ||
| if (this.stream.isTTY) { | ||
| this.stream.write('\u001B[?1049l'); |
There was a problem hiding this comment.
Use the ansiEscapes.mainScreen constant from the ansi-escapes library for exiting the alternate screen for consistency.
| this.stream.write('\u001B[?1049l'); | |
| this.stream.write(ansiEscapes.mainScreen); |
| */ | ||
| cleanup(): void { | ||
| this.showCursor(); | ||
| this.exitAlternateScreen(); |
There was a problem hiding this comment.
Consider calling exitAlternateScreen() before showCursor() in cleanup() to ensure the cursor is visible in the main screen.
this.exitAlternateScreen();
this.showCursor();There was a problem hiding this comment.
Pull Request Overview
This PR reduces flickering in live monitoring by leveraging the terminal’s alternate screen buffer, removing redundant full-screen clears, and ensuring the original screen is restored on exit.
- Enter alternate screen and hide cursor at start
- Remove per-frame
clearScreen()call - Add
enterAlternateScreen/exitAlternateScreenmethods and updatecleanup()
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/commands/_blocks.live.ts | Switch to alternate buffer, update cursor handling, remove clearScreen |
| src/_terminal-utils.ts | Implement enterAlternateScreen/exitAlternateScreen, restore buffer in cleanup |
Comments suppressed due to low confidence (1)
src/_terminal-utils.ts:45
- Add unit tests to verify that
enterAlternateScreenandexitAlternateScreenwrite the correct escape sequences whenstream.isTTYis true, and thatcleanup()restores the screen.
enterAlternateScreen(): void {
| process.on('SIGTERM', cleanup); | ||
|
|
||
| // Hide cursor for cleaner display | ||
| // Setup terminal for live updates |
There was a problem hiding this comment.
[nitpick] Change 'Setup terminal for live updates' to 'Set up terminal for live updates' to use the correct verb form.
| // Setup terminal for live updates | |
| // Set up terminal for live updates |
| */ | ||
| enterAlternateScreen(): void { | ||
| if (this.stream.isTTY) { | ||
| this.stream.write('\u001B[?1049h'); |
There was a problem hiding this comment.
Extract the ANSI escape code '\u001B[?1049h' into a named constant (e.g., ALT_SCREEN_ON) to improve readability and avoid magic values.
| this.stream.write('\u001B[?1049h'); | |
| this.stream.write(ALT_SCREEN_ON); |
| */ | ||
| exitAlternateScreen(): void { | ||
| if (this.stream.isTTY) { | ||
| this.stream.write('\u001B[?1049l'); |
There was a problem hiding this comment.
Consider extracting '\u001B[?1049l' into a constant (e.g., ALT_SCREEN_OFF) for consistency with the enter sequence.
| this.stream.write('\u001B[?1049l'); | |
| this.stream.write(ALT_SCREEN_OFF); |
|
#167 |
Summary
Problem
The current implementation clears the entire screen on every refresh cycle, which causes visible flickering on slower terminals or when refresh rates are high. This creates a poor user experience, especially during extended monitoring sessions.
Solution
This PR introduces alternate screen buffer support (similar to how `vim` or `less` work):
Changes
TerminalManager enhancements:
Live monitoring improvements:
Test Plan
Impact
This change significantly improves the user experience for live monitoring features without affecting any other functionality. The alternate screen buffer is a standard terminal feature supported by all modern terminal emulators.
Summary by CodeRabbit
New Features
Improvements