style(cli) : Dialog pattern for /hooks Command

[AbdulTawabJuly]

Summary

Convert the /hooks command output into a modal HooksDialog (using the existing custom_dialog pattern) and align its UI and behavior with other dialogs such as /settings. This reduces chat-history noise, improves visual consistency, fixes a border alignment bug, and satisfies lint/style requirements.

Changes

• Use a modal custom_dialog for /hooks instead of writing to chat history (ephemeral, ESC to close).
• Remove in-dialog header and numeric count (previously: Hooks Panel (1-8 of X)) to match BaseSettingsDialog visual style.
• Simplify scroll indicators from ▲ more above / ▼ more below to ▲ / ▼ to match /settings.
• Align scroll indicators and hooks content by using paddingLeft={2} and prevent indicator boxes from expanding with minWidth={0} — fixes right-border misalignment.
• Flatten/group hooks by eventName into a display array (headers + hooks) so scrolling uses a simple slice of the flattened list.
• Type/style fixes: replace ReadonlyArray<HookEntry> with readonly HookEntry[] and Array<HookEntry> with HookEntry[] to satisfy project linting rules.
• Update unit tests to reflect the new UX and behaviors (remove header/count assertions; check for ▲/▼ indicators and scrolling behavior).

Related Issues

#15273

Testing

• Verified hooks list displays correctly with boxed styling
• Tested with empty hooks list (shows boxed empty state)
• Tested with multiple hooks across different event types
• Confirmed styling matches /about and /settings commands

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 @AbdulTawabJuly, 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 refactors the /hooks command to present its output in a dedicated, interactive modal dialog rather than directly in the chat history. This enhancement significantly improves the user experience by centralizing hook management in a consistent UI, making it easier to view and navigate configured hooks, and ensuring visual harmony with other command outputs.

Highlights

• Modal Dialog for /hooks Command: The /hooks command now displays its output in a modal HooksDialog using the custom_dialog pattern, similar to the /settings command. This change reduces chat history noise and improves UI consistency.
• UI/UX Alignment: The new HooksDialog aligns its UI and behavior with other dialogs like /settings, including simplified scroll indicators (▲ / ▼) and improved border alignment.
• Hook Grouping and Display: Hooks are now flattened and grouped by eventName within the dialog, making the display and scrolling more organized.
• Type and Style Fixes: Updated TypeScript array syntax (e.g., readonly HookEntry[] instead of ReadonlyArray<HookEntry>) to satisfy project linting rules.
• Comprehensive Unit Tests: New unit tests have been added for the HooksDialog component, covering rendering, empty states, security warnings, scrolling behavior, and various hook property displays.

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 is a nice UI improvement, refactoring the /hooks command to use a modal dialog, which aligns its behavior with other commands like /settings and reduces noise in the chat history. The implementation of the new HooksDialog component is well-done, including comprehensive tests for its functionality and scrolling behavior. I've identified a couple of areas for improvement: one is a minor bug in the new dialog related to React keys that could cause rendering issues, and the other is some leftover code from the old implementation that should be removed to keep the codebase clean. Overall, great work on improving the user experience.

[AbdulTawabJuly]

Hi @abhipatel12, I've created a fresh PR for the issue Hooks: Dialog pattern for /hooks Command and closed the old one due to excessive conflicts. I've addressed all the requirements from the ticket, plus a few extras. Could you please take a look soon to prevent new conflicts from arising?

[AbdulTawabJuly]

Hi @abhipatel12, It’s been some time since I opened this PR. Could you please take a look and review it when you get a chance?

[AbdulTawabJuly]

Hi @abhipatel12, I apologize for reaching out repeatedly. I just wanted to check if this PR is still relevant or not, especially since the issue is now marked as maintainers only. Just let me know so that I can close this PR.

I appreciate your time, and I’m sorry for any inconvenience. It’s been quite a while since I first opened this PR (and later reopened it), so I wanted to clarify before taking any action.

[abhipatel12]

Hey! This looks great and sorry for the delayed review. If you can take a look at the 3 comments i left, i can stamp and get this merged.

Thanks again!

[AbdulTawabJuly]

@abhipatel12 thank you for your response! I’ve implemented your suggested changes. Please let me know if you’d like any further improvements.

[abhipatel12]

@abhipatel12 thank you for your response! I’ve implemented your suggested changes. Please let me know if you’d like any further improvements.

Hey thanks for the quick response! I dont see the snapshots file. Did the snapshots actually get updated!

[abhipatel12]

Looks like the tests are failing, so you may need to run the command to update snapshots

[AbdulTawabJuly]

Looks like the tests are failing, so you may need to run the command to update snapshots

@abhipatel12 I ran the test again using

npm test -- HooksDialog --update => inside the package/cli. Is this what you were referring to ?

[AbdulTawabJuly]

I noticed that the CI pipeline is failing due to an issue with the Evals test. However, my changes are unrelated to the Evals functionality.

[AbdulTawabJuly]

A little update

The failure is due to Gemini API connectivity issues in the runner (HTTP 503 "high demand" errors and HeadersTimeoutError timeouts), not related to my changes.

[abhipatel12]

LGTM, thanks for your work on this!

I know the CI is having trouble, but no worries. We're figuring that out, but ill have this merged as soon as possible.

[AbdulTawabJuly]

LGTM, thanks for your work on this!

Thank you for your patience with this PR, it’s been a while since I opened it, and I truly appreciate you reviewing it. If there’s anything else you’d like me to work on, especially around the Hooks Post V1 features (like Interactive Hook Configuration GUI), I’d be happy to help. Those were some of my favorite issues to work on!