feat(cli): update approval modes UI (#18476)

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

@@ -11,10 +11,12 @@ import { ApprovalMode } from '@google/gemini-cli-core';
 
 interface ApprovalModeIndicatorProps {
   approvalMode: ApprovalMode;
+  isPlanEnabled?: boolean;
 }
 
 export const ApprovalModeIndicator: React.FC<ApprovalModeIndicatorProps> = ({
   approvalMode,
+  isPlanEnabled,
 }) => {
   let textColor = '';
   let textContent = '';
@@ -23,29 +25,39 @@ export const ApprovalModeIndicator: React.FC<ApprovalModeIndicatorProps> = ({
   switch (approvalMode) {
     case ApprovalMode.AUTO_EDIT:
       textColor = theme.status.warning;
-      textContent = 'accepting edits';
-      subText = ' (shift + tab to cycle)';
+      textContent = 'auto-edit';
+      subText = 'shift + tab to enter default mode';
       break;
     case ApprovalMode.PLAN:
       textColor = theme.status.success;
-      textContent = 'plan mode';
-      subText = ' (shift + tab to cycle)';
+      textContent = 'plan';
+      subText = 'shift + tab to enter auto-edit mode';
       break;
     case ApprovalMode.YOLO:
       textColor = theme.status.error;
-      textContent = 'YOLO mode';
-      subText = ' (ctrl + y to toggle)';
+      textContent = 'YOLO';
+      subText = 'shift + tab to enter auto-edit mode';
       break;
     case ApprovalMode.DEFAULT:
     default:
+      textColor = theme.text.accent;
+      textContent = '';
+      subText = isPlanEnabled
+        ? 'shift + tab to enter plan mode'
+        : 'shift + tab to enter auto-edit mode';
       break;
   }
 
   return (
     <Box>
       <Text color={textColor}>
-        {textContent}
-        {subText && <Text color={theme.text.secondary}>{subText}</Text>}
+        {textContent ? textContent : null}
+        {subText ? (
+          <Text color={theme.text.secondary}>
+            {textContent ? ' ' : ''}
+            {subText}
+          </Text>
+        ) : null}
       </Text>
     </Box>
   );