style(cli) : Dialog pattern for /hooks Command (#17930)

packages/cli/src/ui/commands/hooksCommand.ts

@@ -4,9 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { SlashCommand, CommandContext } from './types.js';
+import { createElement } from 'react';
+import type {
+  SlashCommand,
+  CommandContext,
+  OpenCustomDialogActionReturn,
+} from './types.js';
 import { CommandKind } from './types.js';
-import { MessageType, type HistoryItemHooksList } from '../types.js';
 import type {
   HookRegistryEntry,
   MessageActionReturn,
@@ -15,13 +19,14 @@ import { getErrorMessage } from '@google/gemini-cli-core';
 import { SettingScope, isLoadableSettingScope } from '../../config/settings.js';
 import { enableHook, disableHook } from '../../utils/hookSettings.js';
 import { renderHookActionFeedback } from '../../utils/hookUtils.js';
+import { HooksDialog } from '../components/HooksDialog.js';
 
 /**
- * Display a formatted list of hooks with their status
+ * Display a formatted list of hooks with their status in a dialog
  */
-async function panelAction(
+function panelAction(
   context: CommandContext,
-): Promise<void | MessageActionReturn> {
+): MessageActionReturn | OpenCustomDialogActionReturn {
   const { config } = context.services;
   if (!config) {
     return {
@@ -34,12 +39,13 @@ async function panelAction(
   const hookSystem = config.getHookSystem();
   const allHooks = hookSystem?.getAllHooks() || [];
 
-  const hooksListItem: HistoryItemHooksList = {
-    type: MessageType.HOOKS_LIST,
-    hooks: allHooks,
+  return {
+    type: 'custom_dialog',
+    component: createElement(HooksDialog, {
+      hooks: allHooks,
+      onClose: () => context.ui.removeComponent(),
+    }),
   };
-
-  context.ui.addItem(hooksListItem);
 }
 
 /**
@@ -343,6 +349,7 @@ const panelCommand: SlashCommand = {
   altNames: ['list', 'show'],
   description: 'Display all registered hooks with their status',
   kind: CommandKind.BUILT_IN,
+  autoExecute: true,
   action: panelAction,
 };
 
@@ -393,5 +400,5 @@ export const hooksCommand: SlashCommand = {
     enableAllCommand,
     disableAllCommand,
   ],
-  action: async (context: CommandContext) => panelCommand.action!(context, ''),
+  action: (context: CommandContext) => panelCommand.action!(context, ''),
 };