feat(hooks): Hooks Commands Panel, Enable/Disable, and Migrate (#14225)

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

@@ -30,6 +30,7 @@ import { getMCPServerStatus } from '@google/gemini-cli-core';
 import { ToolsList } from './views/ToolsList.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';
 
 interface HistoryItemDisplayProps {
@@ -158,6 +159,9 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
       {itemForDisplay.type === 'chat_list' && (
         <ChatList chats={itemForDisplay.chats} />
       )}
+      {itemForDisplay.type === 'hooks_list' && (
+        <HooksList hooks={itemForDisplay.hooks} />
+      )}
     </Box>
   );
 };

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

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+
+interface HooksListProps {
+  hooks: ReadonlyArray<{
+    config: { command?: string; type: string; timeout?: number };
+    source: string;
+    eventName: string;
+    matcher?: string;
+    sequential?: boolean;
+    enabled: boolean;
+  }>;
+}
+
+export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
+  if (hooks.length === 0) {
+    return (
+      <Box marginTop={1} marginBottom={1}>
+        <Text>No hooks configured.</Text>
+      </Box>
+    );
+  }
+
+  // Group hooks by event name for better organization
+  const hooksByEvent = hooks.reduce(
+    (acc, hook) => {
+      if (!acc[hook.eventName]) {
+        acc[hook.eventName] = [];
+      }
+      acc[hook.eventName].push(hook);
+      return acc;
+    },
+    {} as Record<string, Array<(typeof hooks)[number]>>,
+  );
+
+  return (
+    <Box flexDirection="column" marginTop={1} marginBottom={1}>
+      <Text bold>Configured Hooks:</Text>
+      <Box flexDirection="column" paddingLeft={2} marginTop={1}>
+        {Object.entries(hooksByEvent).map(([eventName, eventHooks]) => (
+          <Box key={eventName} flexDirection="column" marginBottom={1}>
+            <Text color="cyan" bold>
+              {eventName}:
+            </Text>
+            <Box flexDirection="column" paddingLeft={2}>
+              {eventHooks.map((hook, index) => {
+                const hookName = hook.config.command || 'unknown';
+                const statusColor = hook.enabled ? 'green' : 'gray';
+                const statusText = hook.enabled ? 'enabled' : 'disabled';
+
+                return (
+                  <Box key={`${eventName}-${index}`} flexDirection="column">
+                    <Box>
+                      <Text>
+                        <Text color="yellow">{hookName}</Text>
+                        <Text color={statusColor}>{` [${statusText}]`}</Text>
+                      </Text>
+                    </Box>
+                    <Box paddingLeft={2} flexDirection="column">
+                      <Text dimColor>
+                        Source: {hook.source}
+                        {hook.matcher && ` | Matcher: ${hook.matcher}`}
+                        {hook.sequential && ` | Sequential`}
+                        {hook.config.timeout &&
+                          ` | Timeout: ${hook.config.timeout}s`}
+                      </Text>
+                    </Box>
+                  </Box>
+                );
+              })}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>
+          Tip: Use `/hooks enable {'<hook-name>'}` or `/hooks disable{' '}
+          {'<hook-name>'}` to toggle hooks
+        </Text>
+      </Box>
+    </Box>
+  );
+};