feat(hooks): add support for friendly names and descriptions (#15174)

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

@@ -309,6 +309,24 @@ describe('hooksCommand', () => {
         content: 'Failed to enable hook: Failed to save settings',
       });
     });
+
+    it('should complete hook names using friendly names', () => {
+      const enableCmd = hooksCommand.subCommands!.find(
+        (cmd) => cmd.name === 'enable',
+      )!;
+
+      const hookEntry = createMockHook(
+        './hooks/test.sh',
+        HookEventName.BeforeTool,
+        true,
+      );
+      hookEntry.config.name = 'friendly-name';
+
+      mockHookSystem.getAllHooks.mockReturnValue([hookEntry]);
+
+      const completions = enableCmd.completion!(mockContext, 'frie');
+      expect(completions).toContain('friendly-name');
+    });
   });
 
   describe('disable subcommand', () => {

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

@@ -213,7 +213,7 @@ function completeHookNames(
  * Get a display name for a hook
  */
 function getHookDisplayName(hook: HookRegistryEntry): string {
-  return hook.config.command || 'unknown-hook';
+  return hook.config.name || hook.config.command || 'unknown-hook';
 }
 
 const panelCommand: SlashCommand = {

packages/cli/src/ui/components/views/HooksList.tsx

@@ -9,7 +9,13 @@ import { Box, Text } from 'ink';
 
 interface HooksListProps {
   hooks: ReadonlyArray<{
-    config: { command?: string; type: string; timeout?: number };
+    config: {
+      command?: string;
+      type: string;
+      name?: string;
+      description?: string;
+      timeout?: number;
+    };
     source: string;
     eventName: string;
     matcher?: string;
@@ -50,7 +56,8 @@ export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
             </Text>
             <Box flexDirection="column" paddingLeft={2}>
               {eventHooks.map((hook, index) => {
-                const hookName = hook.config.command || 'unknown';
+                const hookName =
+                  hook.config.name || hook.config.command || 'unknown';
                 const statusColor = hook.enabled ? 'green' : 'gray';
                 const statusText = hook.enabled ? 'enabled' : 'disabled';
 
@@ -63,8 +70,14 @@ export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
                       </Text>
                     </Box>
                     <Box paddingLeft={2} flexDirection="column">
+                      {hook.config.description && (
+                        <Text italic>{hook.config.description}</Text>
+                      )}
                       <Text dimColor>
                         Source: {hook.source}
+                        {hook.config.name &&
+                          hook.config.command &&
+                          ` | Command: ${hook.config.command}`}
                         {hook.matcher && ` | Matcher: ${hook.matcher}`}
                         {hook.sequential && ` | Sequential`}
                         {hook.config.timeout &&