feat(cli): update approval modes UI

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

@@ -15,34 +15,34 @@ describe('ApprovalModeIndicator', () => {
       <ApprovalModeIndicator approvalMode={ApprovalMode.AUTO_EDIT} />,
     );
     const output = lastFrame();
-    expect(output).toContain('accepting edits');
-    expect(output).toContain('(shift + tab to cycle)');
+    expect(output).toContain('Auto');
+    expect(output).toContain('shift+tab');
   });
 
   it('renders correctly for PLAN mode', () => {
     const { lastFrame } = render(
       <ApprovalModeIndicator approvalMode={ApprovalMode.PLAN} />,
     );
     const output = lastFrame();
-    expect(output).toContain('plan mode');
-    expect(output).toContain('(shift + tab to cycle)');
+    expect(output).toContain('Plan');
+    expect(output).toContain('shift+tab');
   });
 
   it('renders correctly for YOLO mode', () => {
     const { lastFrame } = render(
       <ApprovalModeIndicator approvalMode={ApprovalMode.YOLO} />,
     );
     const output = lastFrame();
-    expect(output).toContain('YOLO mode');
-    expect(output).toContain('(ctrl + y to toggle)');
+    expect(output).toContain('YOLO');
+    expect(output).toContain('shift+tab');
   });
 
-  it('renders nothing for DEFAULT mode', () => {
+  it('renders correctly for DEFAULT mode', () => {
     const { lastFrame } = render(
       <ApprovalModeIndicator approvalMode={ApprovalMode.DEFAULT} />,
     );
     const output = lastFrame();
-    expect(output).not.toContain('accepting edits');
-    expect(output).not.toContain('YOLO mode');
+    expect(output).toContain('Build');
+    expect(output).toContain('shift+tab');
   });
 });

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

@@ -23,21 +23,24 @@ 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';
+      subText = ' shift+tab';
       break;
     case ApprovalMode.PLAN:
       textColor = theme.status.success;
-      textContent = 'plan mode';
-      subText = ' (shift + tab to cycle)';
+      textContent = 'Plan';
+      subText = ' shift+tab';
       break;
     case ApprovalMode.YOLO:
       textColor = theme.status.error;
-      textContent = 'YOLO mode';
-      subText = ' (ctrl + y to toggle)';
+      textContent = 'YOLO';
+      subText = ' shift+tab';
       break;
     case ApprovalMode.DEFAULT:
     default:
+      textColor = theme.text.accent;
+      textContent = 'Build';
+      subText = ' shift+tab';
       break;
   }
 

packages/cli/src/ui/components/Composer.test.tsx

@@ -485,16 +485,24 @@ describe('Composer', () => {
       expect(lastFrame()).not.toContain('InputPrompt');
     });
 
-    it('shows ApprovalModeIndicator when approval mode is not default and shell mode is inactive', () => {
-      const uiState = createMockUIState({
-        showApprovalModeIndicator: ApprovalMode.YOLO,
-        shellModeActive: false,
-      });
-
-      const { lastFrame } = renderComposer(uiState);
-
-      expect(lastFrame()).toMatch(/ApprovalModeIndic[\s\S]*ator/);
-    });
+    it.each([
+      [ApprovalMode.DEFAULT],
+      [ApprovalMode.AUTO_EDIT],
+      [ApprovalMode.PLAN],
+      [ApprovalMode.YOLO],
+    ])(
+      'shows ApprovalModeIndicator when approval mode is %s and shell mode is inactive',
+      (mode) => {
+        const uiState = createMockUIState({
+          showApprovalModeIndicator: mode,
+          shellModeActive: false,
+        });
+
+        const { lastFrame } = renderComposer(uiState);
+
+        expect(lastFrame()).toMatch(/ApprovalModeIndic[\s\S]*ator/);
+      },
+    );
 
     it('shows ShellModeIndicator when shell mode is active', () => {
       const uiState = createMockUIState({

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

@@ -27,7 +27,6 @@ import { useVimMode } from '../contexts/VimModeContext.js';
 import { useConfig } from '../contexts/ConfigContext.js';
 import { useSettings } from '../contexts/SettingsContext.js';
 import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
-import { ApprovalMode } from '@google/gemini-cli-core';
 import { StreamingState, ToolCallStatus } from '../types.js';
 import { ConfigInitDisplay } from '../components/ConfigInitDisplay.js';
 import { TodoTray } from './messages/Todo.js';
@@ -68,9 +67,7 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
     (!uiState.embeddedShellFocused || uiState.isBackgroundShellVisible) &&
     uiState.streamingState === StreamingState.Responding &&
     !hasPendingActionRequired;
-  const showApprovalIndicator =
-    showApprovalModeIndicator !== ApprovalMode.DEFAULT &&
-    !uiState.shellModeActive;
+  const showApprovalIndicator = !uiState.shellModeActive;
   const showRawMarkdownIndicator = !uiState.renderMarkdown;
   const showEscToCancelHint =
     showLoadingIndicator &&