style(cli) : Dialog pattern for /hooks Command

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

@@ -7,7 +7,6 @@
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { hooksCommand } from './hooksCommand.js';
 import { createMockCommandContext } from '../../test-utils/mockCommandContext.js';
-import { MessageType } from '../types.js';
 import type { HookRegistryEntry } from '@google/gemini-cli-core';
 import { HookType, HookEventName, ConfigSource } from '@google/gemini-cli-core';
 import type { CommandContext } from './types.js';
@@ -127,13 +126,10 @@ describe('hooksCommand', () => {
         createMockHook('test-hook', HookEventName.BeforeTool, true),
       ]);
 
-      await hooksCommand.action(mockContext, '');
+      const result = await hooksCommand.action(mockContext, '');
 
-      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: MessageType.HOOKS_LIST,
-        }),
-      );
+      expect(result).toHaveProperty('type', 'custom_dialog');
+      expect(result).toHaveProperty('component');
     });
   });
 
@@ -161,7 +157,7 @@ describe('hooksCommand', () => {
       });
     });
 
-    it('should display panel even when hook system is not enabled', async () => {
+    it('should return custom_dialog even when hook system is not enabled', async () => {
       mockConfig.getHookSystem.mockReturnValue(null);
 
       const panelCmd = hooksCommand.subCommands!.find(
@@ -171,17 +167,13 @@ describe('hooksCommand', () => {
         throw new Error('panel command must have an action');
       }
 
-      await panelCmd.action(mockContext, '');
+      const result = await panelCmd.action(mockContext, '');
 
-      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: MessageType.HOOKS_LIST,
-          hooks: [],
-        }),
-      );
+      expect(result).toHaveProperty('type', 'custom_dialog');
+      expect(result).toHaveProperty('component');
     });
 
-    it('should display panel when no hooks are configured', async () => {
+    it('should return custom_dialog when no hooks are configured', async () => {
       mockHookSystem.getAllHooks.mockReturnValue([]);
       (mockContext.services.settings.merged as Record<string, unknown>)[
         'hooksConfig'
@@ -194,17 +186,13 @@ describe('hooksCommand', () => {
         throw new Error('panel command must have an action');
       }
 
-      await panelCmd.action(mockContext, '');
+      const result = await panelCmd.action(mockContext, '');
 
-      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: MessageType.HOOKS_LIST,
-          hooks: [],
-        }),
-      );
+      expect(result).toHaveProperty('type', 'custom_dialog');
+      expect(result).toHaveProperty('component');
     });
 
-    it('should display hooks list when hooks are configured', async () => {
+    it('should return custom_dialog when hooks are configured', async () => {
       const mockHooks: HookRegistryEntry[] = [
         createMockHook('echo-test', HookEventName.BeforeTool, true),
         createMockHook('notify', HookEventName.AfterAgent, false),
@@ -222,14 +210,10 @@ describe('hooksCommand', () => {
         throw new Error('panel command must have an action');
       }
 
-      await panelCmd.action(mockContext, '');
+      const result = await panelCmd.action(mockContext, '');
 
-      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: MessageType.HOOKS_LIST,
-          hooks: mockHooks,
-        }),
-      );
+      expect(result).toHaveProperty('type', 'custom_dialog');
+      expect(result).toHaveProperty('component');
     });
   });
 

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, ''),
 };

packages/cli/src/ui/components/HistoryItemDisplay.tsx

@@ -32,7 +32,6 @@ import { SkillsList } from './views/SkillsList.js';
 import { AgentsStatus } from './views/AgentsStatus.js';
 import { McpStatus } from './views/McpStatus.js';
 import { ChatList } from './views/ChatList.js';
-import { HooksList } from './views/HooksList.js';
 import { ModelMessage } from './messages/ModelMessage.js';
 import { ThinkingMessage } from './messages/ThinkingMessage.js';
 import { HintMessage } from './messages/HintMessage.js';
@@ -217,9 +216,6 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
       {itemForDisplay.type === 'chat_list' && (
         <ChatList chats={itemForDisplay.chats} />
       )}
-      {itemForDisplay.type === 'hooks_list' && (
-        <HooksList hooks={itemForDisplay.hooks} />
-      )}
     </Box>
   );
 };