feat(hooks): display hook system messages in UI (#24616)

packages/cli/src/ui/AppContainer.tsx

@@ -36,9 +36,11 @@ import {
   type ConfirmationRequest,
   type PermissionConfirmationRequest,
   type QuotaStats,
+  MessageType,
+  StreamingState,
+  type HistoryItemInfo,
 } from './types.js';
 import { checkPermissions } from './hooks/atCommandProcessor.js';
-import { MessageType, StreamingState } from './types.js';
 import { ToolActionsProvider } from './contexts/ToolActionsContext.js';
 import { MouseProvider } from './contexts/MouseContext.js';
 import { ScrollProvider } from './contexts/ScrollProvider.js';
@@ -51,6 +53,7 @@ import {
   type UserTierId,
   type GeminiUserTier,
   type UserFeedbackPayload,
+  type HookSystemMessagePayload,
   type AgentDefinition,
   type ApprovalMode,
   IdeClient,
@@ -2111,7 +2114,19 @@ Logging in with Google... Restarting Gemini CLI to continue.
       }
     };
 
+    const handleHookSystemMessage = (payload: HookSystemMessagePayload) => {
+      historyManager.addItem(
+        {
+          type: MessageType.INFO,
+          text: payload.message,
+          source: payload.hookName,
+        } as HistoryItemInfo,
+        Date.now(),
+      );
+    };
+
     coreEvents.on(CoreEvent.UserFeedback, handleUserFeedback);
+    coreEvents.on(CoreEvent.HookSystemMessage, handleHookSystemMessage);
 
     // Flush any messages that happened during startup before this component
     // mounted.
@@ -2119,6 +2134,7 @@ Logging in with Google... Restarting Gemini CLI to continue.
 
     return () => {
       coreEvents.off(CoreEvent.UserFeedback, handleUserFeedback);
+      coreEvents.off(CoreEvent.HookSystemMessage, handleHookSystemMessage);
     };
   }, [historyManager]);
 

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

@@ -134,6 +134,7 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
         <InfoMessage
           text={itemForDisplay.text}
           secondaryText={itemForDisplay.secondaryText}
+          source={itemForDisplay.source}
           icon={itemForDisplay.icon}
           color={itemForDisplay.color}
           marginBottom={itemForDisplay.marginBottom}

packages/cli/src/ui/components/messages/InfoMessage.tsx

@@ -12,6 +12,7 @@ import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
 interface InfoMessageProps {
   text: string;
   secondaryText?: string;
+  source?: string;
   icon?: string;
   color?: string;
   marginBottom?: number;
@@ -20,6 +21,7 @@ interface InfoMessageProps {
 export const InfoMessage: React.FC<InfoMessageProps> = ({
   text,
   secondaryText,
+  source,
   icon,
   color,
   marginBottom,
@@ -40,6 +42,9 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({
             {index === text.split('\n').length - 1 && secondaryText && (
               <Text color={theme.text.secondary}> {secondaryText}</Text>
             )}
+            {index === text.split('\n').length - 1 && source && (
+              <Text color={theme.text.secondary}> [{source}]</Text>
+            )}
           </Text>
         ))}
       </Box>

packages/cli/src/ui/types.ts

@@ -174,6 +174,7 @@ export type HistoryItemInfo = HistoryItemBase & {
   type: 'info';
   text: string;
   secondaryText?: string;
+  source?: string;
   icon?: string;
   color?: string;
   marginBottom?: number;