feat: support custom ASCII art variants for header logo (TOML)

[jduncan-rva]

Summary

This PR enables users to customize the ASCII art logo displayed in the CLI header by providing a path to a TOML file containing logo variants. This allows for consistent branding across different terminal sizes and environments (standard vs. IDE) while maintaining the CLI's responsive design.

A helper extension has been created to assist users in generating these TOML files from images: gemini-logos.

Details

• New Setting: ui.customLogoVariantsFile (string). This setting accepts an absolute path to a TOML file.
• New Hook: useCustomLogo was added to asynchronously load and parse the TOML file specified in the settings using @iarna/toml.
• Updated Component: Header.tsx was updated to accept a customLogoVariants prop.
  • It attempts to use the variant from the custom object first (e.g., customLogoVariants.longAsciiLogo).
  • If a specific variant is missing in the custom object, it falls back to the hardcoded default for that variant.
• Refactor: AppContainer.tsx now lifts the logo loading state to ensure the logo is ready before MainContent (specifically the Static component) renders it, preventing stale initial renders.
• Schema Update: Updated settings.schema.json and settingsSchema.ts to include the new setting.
• Interface: The TOML file is expected to match the LogoVariants interface, supporting all 6 standard variants:

  interface LogoVariants {
    longAsciiLogo?: string;
    shortAsciiLogo?: string;
    tinyAsciiLogo?: string;
    longAsciiLogoIde?: string;
    shortAsciiLogoIde?: string;
    tinyAsciiLogoIde?: string;
  }

Related Issues

N/A

How to Validate

1. Install the Helper Extension:

   gemini extensions install https://github.com/jduncan-rva/gemini-logos

2. Generate a Logo:
   Run the following command with a path to an image file:

   /brand:logo /path/to/your/logo.png

   This will create a logo-variants.toml file in your current directory.
3. Update Settings: Add the following to your settings.json:

   "ui": {
     "customLogoVariantsFile": "/absolute/path/to/logo-variants.toml"
   }

   (Replace /absolute/path/to/... with the actual path to the generated file)
4. Run the CLI: Start the CLI using npm start.
5. Verify:
   • Resize your terminal window.
   • Verify that the custom logo appears and changes variants responsively (long, short, tiny).

Pre-Merge Checklist

• Updated relevant documentation and README (if needed)
• Added/updated tests (if needed)
• Noted breaking changes (if any)
• Validated on required platforms/methods:
  • MacOS
    • npm run
    • npx
    • Docker
    • Podman
    • Seatbelt
  • Windows
    • npm run
    • npx
    • Docker
  • Linux
    • npm run
    • npx
    • Docker

[gemini-code-assist]

Summary of Changes

Hello @jduncan-rva, I'm Gemini Code Assist¹! 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 introduces a significant customization feature for the CLI, allowing users to personalize the header's ASCII art logo. By providing a path to a TOML file, users can define multiple logo variants that adapt to different terminal sizes and environments, ensuring consistent branding and a responsive user experience. The implementation includes a new React hook for asynchronous loading, updates to core UI components for dynamic display, and schema modifications to integrate the new setting.

Highlights

• Custom Logo Support: Users can now specify a TOML file containing custom ASCII art variants for the CLI header logo via a new ui.customLogoVariantsFile setting.
• Dynamic Loading: A new useCustomLogo hook asynchronously loads and parses the specified TOML file, allowing for dynamic logo updates.
• Responsive Display: The Header component intelligently selects the appropriate logo variant (long, short, tiny, IDE-specific) from the custom variants, falling back to defaults if a specific variant is not provided.
• State Management Refinement: The AppContainer now lifts the logo loading state, ensuring the custom logo is fully loaded and ready before the main content renders, preventing visual glitches.
• Schema Integration: The settings.schema.json and settingsSchema.ts files have been updated to formally include the new ui.customLogoVariantsFile setting and its description.

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

[gemini-code-assist]

Code Review

This pull request introduces a feature for customizing the CLI header's ASCII art logo using variants from a TOML file. The implementation is well-structured, adding a new setting, a React hook for loading the logo file, and updating relevant UI components. My review identified two high-severity issues. The first is an unsafe type assertion when parsing the user-provided TOML file, which could lead to runtime errors if the file is malformed. The second is a logic flaw in the fallback for IDE-specific logos, which could result in unexpected behavior. I have provided code suggestions to address both of these points to improve the feature's robustness and user experience.

[gemini-code-assist]

There's a potential improvement in the fallback logic for IDE-specific logos. Currently, if a user provides a custom longAsciiLogo but not a longAsciiLogoIde, the header will fall back to the defaultLongAsciiLogoIde when in an IDE environment. This might be unexpected for the user, who might assume their custom non-IDE logo would be used as a fallback.

Consider a more intuitive fallback chain: custom IDE variant -> custom non-IDE variant -> default IDE variant. This would provide a better user experience and more consistent branding for users who don't want to create separate IDE variants.

  const longAsciiLogoIde =
    customLogoVariants?.longAsciiLogoIde ??
    customLogoVariants?.longAsciiLogo ??
    defaultLongAsciiLogoIde;
  const shortAsciiLogoIde =
    customLogoVariants?.shortAsciiLogoIde ??
    customLogoVariants?.shortAsciiLogo ??
    defaultShortAsciiLogoIde;
  const tinyAsciiLogoIde =
    customLogoVariants?.tinyAsciiLogoIde ??
    customLogoVariants?.tinyAsciiLogo ??
    defaultTinyAsciiLogoIde;

[gemini-code-assist]

The type assertion as unknown as LogoVariants is unsafe and can lead to runtime errors if the TOML file contains non-string values for the logo variants. This can happen if a user provides a malformed file. It's crucial to validate the structure and types of the parsed TOML content before using it. This will make the feature more robust against invalid user input.

        const parsed = toml.parse(content);

        if (typeof parsed !== 'object' || parsed === null) {
          throw new Error('TOML file content is not a valid object.');
        }

        // Ensure all logo variants are strings.
        for (const [key, value] of Object.entries(parsed)) {
          if (typeof value !== 'string') {
            throw new Error(`Invalid type for logo variant "${key}": expected string, got ${typeof value}.`);
          }
        }

        setVariants(parsed as LogoVariants);