feat(ui): Add security warning and improve layout for Hooks list (#15440)

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

@@ -6,6 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
+import { theme } from '../../semantic-colors.js';
 
 interface HooksListProps {
   hooks: ReadonlyArray<{
@@ -24,17 +25,41 @@ interface HooksListProps {
   }>;
 }
 
-export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
-  if (hooks.length === 0) {
-    return (
-      <Box marginTop={1} marginBottom={1}>
-        <Text>No hooks configured.</Text>
-      </Box>
-    );
-  }
+export const HooksList: React.FC<HooksListProps> = ({ hooks }) => (
+  <Box flexDirection="column" marginTop={1} marginBottom={1}>
+    <Text>
+      Hooks are scripts or programs that Gemini CLI executes at specific points
+      in the agentic loop, allowing you to intercept and customize behavior.
+    </Text>
 
-  // Group hooks by event name for better organization
-  const hooksByEvent = hooks.reduce(
+    <Box marginTop={1} flexDirection="column">
+      <Text color={theme.status.warning} bold underline>
+        ⚠️ Security Warning:
+      </Text>
+      <Text color={theme.status.warning}>
+        Hooks can execute arbitrary commands on your system. Only use hooks from
+        sources you trust. Review hook scripts carefully.
+      </Text>
+    </Box>
+
+    <Box marginTop={1}>
+      <Text>
+        Learn more:{' '}
+        <Text color={theme.text.link}>https://geminicli.com/docs/hooks</Text>
+      </Text>
+    </Box>
+
+    <Box marginTop={1} flexDirection="column">
+      {hooks.length === 0 ? (
+        <Text>No hooks configured.</Text>
+      ) : (
+        <>
+          <Text bold underline>
+            Registered Hooks:
+          </Text>
+          <Box flexDirection="column" paddingLeft={2} marginTop={1}>
+            {Object.entries(
+              hooks.reduce(
                 (acc, hook) => {
                   if (!acc[hook.eventName]) {
                     acc[hook.eventName] = [];
@@ -43,13 +68,8 @@ export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
                   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]) => (
+              ),
+            ).map(([eventName, eventHooks]) => (
               <Box key={eventName} flexDirection="column" marginBottom={1}>
                 <Text color="cyan" bold>
                   {eventName}:
@@ -66,12 +86,16 @@ export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
                         <Box>
                           <Text>
                             <Text color="yellow">{hookName}</Text>
-                        <Text color={statusColor}>{` [${statusText}]`}</Text>
+                            <Text
+                              color={statusColor}
+                            >{` [${statusText}]`}</Text>
                           </Text>
                         </Box>
                         <Box paddingLeft={2} flexDirection="column">
                           {hook.config.description && (
-                        <Text italic>{hook.config.description}</Text>
+                            <Text italic color={theme.text.primary}>
+                              {hook.config.description}
+                            </Text>
                           )}
                           <Text dimColor>
                             Source: {hook.source}
@@ -91,6 +115,10 @@ export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
               </Box>
             ))}
           </Box>
+        </>
+      )}
+    </Box>
+
     <Box marginTop={1}>
       <Text dimColor>
         Tip: Use `/hooks enable {'<hook-name>'}` or `/hooks disable{' '}
@@ -99,4 +127,3 @@ export const HooksList: React.FC<HooksListProps> = ({ hooks }) => {
     </Box>
   </Box>
 );
-};