feat(ui): Add FPS counter display and settings option #8052
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 @ali-aljufairi, 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 integrates an FPS counter into the Gemini CLI's user interface, providing a visual metric to evaluate rendering performance. It includes a new configuration option to enable or disable this display, allowing users to monitor the UI's responsiveness.
Highlights
- New UI Feature: Introduces an approximate Frames Per Second (FPS) counter to the CLI UI footer.
- User Configuration: Adds a new "showFPS" boolean setting under the 'UI' category, allowing users to toggle the FPS display.
- Performance Monitoring: The FPS display updates once per second and color-codes the FPS value (green for >=30, yellow for >=10, red for <10) to provide a quick visual indicator of rendering performance.
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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
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 introduces a new feature to display an FPS counter in the UI, along with a corresponding setting to enable it. The implementation is well-structured, adding a new FpsDisplay component and integrating it through the settings schema and existing UI components. My review found one issue in the new FpsDisplay component where a comment incorrectly describes the FPS calculation, which could lead to confusion. I've provided a suggestion to correct it.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
gemini-cli
bot
added
kind/enhancement
| requiresRestart: false, | ||
| default: false, | ||
| description: 'Display an approximate render FPS in the footer.', | ||
| showInDialog: true, |
There was a problem hiding this comment.
I would omit this from the dialog.
| const diff = total - lastCountRef.current; | ||
| lastCountRef.current = total; | ||
| // Subtract 1 to account for this update's render, but ensure minimum 0 | ||
| setFps(Math.max(0, diff - 1)); |
There was a problem hiding this comment.
not sure this is the right way to measure this but perhaps it is the idiomatic practice in React. Think tracking this correctly would probably be a function of looking at the internals of the ink renderer. this number will be bellow 60 just because the the UI isn't continually refreshing. think you would really want to know about what the latency is between ui refreshes being triggered and renders occurring.
|
If this FPS setting is part of the UI in settings.json, I’d recommend including it in the migration file. Otherwise, it might get lost whenever a setting changes. For example, the customWittyPhrases feature also belongs to the UI, and when I updated the theme, all my phrases were deleted because I hadn’t added them to the migration schema. |
|
Fyi @galz10 this FPS counter is only functioning correctly because there is a React state updating bug that Gal is tracking down fixing. |
TLDR
This PR to check is it worth it to 60fps to gemini cli and how will affect Render
Dive Deeper
This
Reviewer Test Plan
enable FPS counter from SettingDialogue and check if FPS logic is correct
Testing Matrix
Linked issues / bugs
Resolves #8050