Skip to content

fix(cli): include bold and similar styles in SVG snapshots#20566

Closed
jacob314 wants to merge 2 commits intomainfrom
bold
Closed

fix(cli): include bold and similar styles in SVG snapshots#20566
jacob314 wants to merge 2 commits intomainfrom
bold

Conversation

@jacob314
Copy link
Copy Markdown
Contributor

Summary

SVG snapshots now include whether text is bold.

Unfortunately this does churn all snapshots so snapshots with no diff will still show up here. Hopefully once this is in snapshots will be stable. If we continue to have difficultly with them being stable we will need to add polish to ensure they are completely stable barring changes to actual colors of text. If that isn't easy we will need to switch the snapshots to use png and perform actual visual diffs.

@jacob314 jacob314 requested a review from a team as a code owner February 27, 2026 15:49
@gemini-cli
Copy link
Copy Markdown
Contributor

gemini-cli bot commented Feb 27, 2026

Hi there! Thank you for your contribution to Gemini CLI.

To improve our contribution process and better track changes, we now require all pull requests to be associated with an existing issue, as announced in our recent discussion and as detailed in our CONTRIBUTING.md.

This pull request is being closed because it is not currently linked to an issue. Once you have updated the description of this PR to link an issue (e.g., by adding Fixes #123 or Related to #123), it will be automatically reopened.

How to link an issue:
Add a keyword followed by the issue number (e.g., Fixes #123) in the description of your pull request. For more details on supported keywords and how linking works, please refer to the GitHub Documentation on linking pull requests to issues.

Thank you for your understanding and for being a part of our community!

@gemini-cli
Copy link
Copy Markdown
Contributor

gemini-cli bot commented Feb 27, 2026

Hi @jacob314, thank you so much for your contribution to Gemini CLI! We really appreciate the time and effort you've put into this.

We're making some updates to our contribution process to improve how we track and review changes. Please take a moment to review our recent discussion post: Improving Our Contribution Process & Introducing New Guidelines.

Key Update: Starting January 26, 2026, the Gemini CLI project will require all pull requests to be associated with an existing issue. Any pull requests not linked to an issue by that date will be automatically closed.

Thank you for your understanding and for being a part of our community!

@gemini-cli gemini-cli bot closed this Feb 27, 2026
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, 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 enhances the SVG snapshot generation process to include more detailed text styling from terminal output, specifically bold, italic, underline, and link rendering. This improvement ensures that visual tests more faithfully represent the intended display, addressing a previous limitation where these styles were not captured. While this change necessitates updating all existing SVG snapshots, it leads to more stable and accurate visual testing going forward.

Highlights

  • SVG Snapshot Fidelity: SVG snapshots now accurately capture and render text styling such as bold, italic, underline, and hyperlinks, improving visual representation of terminal output.
  • Snapshot Regeneration: The changes introduce a churn in all existing SVG snapshots due to the new styling capabilities, requiring their regeneration.
  • Styling Implementation: The SVG generation utility (svg.ts) was updated to detect and apply font-weight="bold", font-style="italic", text-decoration="underline", and <a> tags based on terminal cell properties.
Changelog
  • packages/cli/src/config/extensions/snapshots/consent-consent-maybeRequestConsentOrFail-consent-string-generation-should-generate-a-consent-string-with-all-fields.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/config/extensions/snapshots/consent-consent-maybeRequestConsentOrFail-consent-string-generation-should-include-warning-when-hooks-are-present.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/config/extensions/snapshots/consent-consent-maybeRequestConsentOrFail-consent-string-generation-should-request-consent-if-skills-change.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/config/extensions/snapshots/consent-consent-skillsConsentString-should-generate-a-consent-string-for-skills.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/test-utils/svg.ts
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Initialized new state variables for bold, italic, underline, and link URI.
    • Modified block finalization logic to apply font styles and link tags.
    • Updated block comparison logic to account for new styling properties.
    • Extracted link URI from terminal cell data for SVG rendering.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-settings-list-with-visual-indicators.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-accessibility-settings-enabled-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-all-boolean-settings-disabled-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-default-state-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-file-filtering-settings-configured-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-focused-on-scope-selector-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-mixed-boolean-and-number-settings-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-tools-and-security-settings-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-various-boolean-settings-enabled-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/Table-Table-should-render-headers-and-data-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/Table-Table-should-support-custom-cell-rendering.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/snapshots/Table-Table-should-support-inverse-text-rendering.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/components/shared/snapshots/ExpandableText-ExpandableText-creates-centered-window-around-match-when-collapsed.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/components/shared/snapshots/ExpandableText-ExpandableText-highlights-matched-substring-when-expanded-text-only-visible-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/components/shared/snapshots/ExpandableText-ExpandableText-renders-plain-label-when-no-match-short-label-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/components/shared/snapshots/ExpandableText-ExpandableText-respects-custom-maxWidth.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/components/shared/snapshots/ExpandableText-ExpandableText-shows-full-long-label-when-expanded-and-no-match.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/components/shared/snapshots/ExpandableText-ExpandableText-truncates-long-label-when-collapsed-and-no-match.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/components/shared/snapshots/ExpandableText-ExpandableText-truncates-match-itself-when-match-is-very-long.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-calculates-column-widths-based-on-ren-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-calculates-width-correctly-for-conten-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-does-not-parse-markdown-inside-code-s-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-handles-nested-markdown-styles-recurs-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold and italic styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-handles-non-ASCII-characters-emojis-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-handles-wrapped-bold-headers-without-showing-markers.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-a-3x3-table-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-a-complex-table-with-mixed-content-lengths-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-a-table-with-long-headers-and-4-columns-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-a-table-with-mixed-emojis-As-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-a-table-with-only-Asian-chara-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-a-table-with-only-emojis-and-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-complex-markdown-in-rows-and-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold, italic, and underline styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-correctly-when-headers-are-em-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-renders-correctly-when-there-are-more-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-strips-bold-markers-from-headers-and-renders-them-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-wraps-all-long-columns-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-wraps-columns-with-punctuation-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-wraps-long-cell-content-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/TableRenderer-TableRenderer-wraps-mixed-long-and-short-columns-correctly.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-pending-search-dialog-google_web_search-.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-shell-tool.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
  • packages/cli/src/ui/utils/snapshots/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-an-empty-slice-following-a-search-tool.snap.svg
    • Added CSS rule for 'a' tags to inherit text-decoration color.
    • Modified text elements to include bold styling.
Activity
  • The author has implemented changes to enhance SVG snapshot rendering.
  • The pull request description indicates that all existing snapshots will be regenerated due to these changes, suggesting the author has handled or is aware of the necessary update process for the snapshots.
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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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

  1. 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.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request enhances the SVG snapshot generation for tests to include bold, italic, underline, and link styles, which is a valuable improvement for visual regression testing. The changes are primarily in packages/cli/src/test-utils/svg.ts, with corresponding updates across numerous SVG snapshot files.

My review identifies a significant maintainability concern in svg.ts where private, internal properties of the xterm.js library are accessed to retrieve link information. This approach is brittle and risks breaking tests when dependencies are updated. I have provided a detailed comment suggesting an investigation into using public APIs to make the implementation more robust.

Comment on lines +190 to +199
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
const urlId = (cell as any).extended?._urlId;
let linkUri: string | null = null;
if (urlId !== undefined) {
/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-type-assertion, @typescript-eslint/no-explicit-any */
linkUri =
(terminal as any)._core?._oscLinkService?.getLinkData(urlId)?.uri ||
null;
/* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-type-assertion, @typescript-eslint/no-explicit-any */
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Accessing private properties of xterm.js objects, such as _urlId, _core, and _oscLinkService, makes this code fragile and likely to break with future updates to the xterm.js dependency. The multiple eslint-disable comments for unsafe type assertions highlight this maintainability risk.

To improve robustness, consider using a public API if one is available. For instance, could a custom link provider be used during tests to store and retrieve link information without accessing private properties?

If a public API is not a viable option, please add a comment explaining the necessity of this approach and acknowledging the associated risks.

@jacob314 jacob314 reopened this Feb 27, 2026
@github-actions
Copy link
Copy Markdown

Size Change: -2 B (0%)

Total Size: 25.7 MB

ℹ️ View Unchanged
Filename Size Change
./bundle/gemini.js 25.2 MB -2 B (0%)
./bundle/node_modules/@google/gemini-cli-devtools/dist/client/main.js 221 kB 0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/_client-assets.js 227 kB 0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/index.js 11.5 kB 0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/types.js 132 B 0 B
./bundle/sandbox-macos-permissive-open.sb 890 B 0 B
./bundle/sandbox-macos-permissive-proxied.sb 1.31 kB 0 B
./bundle/sandbox-macos-restrictive-open.sb 3.36 kB 0 B
./bundle/sandbox-macos-restrictive-proxied.sb 3.56 kB 0 B
./bundle/sandbox-macos-strict-open.sb 4.82 kB 0 B
./bundle/sandbox-macos-strict-proxied.sb 5.02 kB 0 B

compressed-size-action

@gemini-cli gemini-cli bot added the status/need-issue Pull requests that need to have an associated issue. label Feb 27, 2026
@jacob314 jacob314 enabled auto-merge February 27, 2026 21:24
@gemini-cli
Copy link
Copy Markdown
Contributor

gemini-cli bot commented Feb 28, 2026

Hi there! Thank you for your contribution to Gemini CLI.

To improve our contribution process and better track changes, we now require all pull requests to be associated with an existing issue, as announced in our recent discussion and as detailed in our CONTRIBUTING.md.

This pull request is being closed because it is not currently linked to an issue. Once you have updated the description of this PR to link an issue (e.g., by adding Fixes #123 or Related to #123), it will be automatically reopened.

How to link an issue:
Add a keyword followed by the issue number (e.g., Fixes #123) in the description of your pull request. For more details on supported keywords and how linking works, please refer to the GitHub Documentation on linking pull requests to issues.

Thank you for your understanding and for being a part of our community!

@gemini-cli gemini-cli bot closed this Feb 28, 2026
auto-merge was automatically disabled February 28, 2026 02:47

Pull request was closed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

status/need-issue Pull requests that need to have an associated issue.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant