feat: Add auto-accept indicator and toggle

- This commit introduces a visual indicator in the CLI to show when auto-accept for tool confirmations is enabled. Users can now also toggle this setting on/off using Shift + Tab.
- This addresses user feedback for better visibility and control over the auto-accept feature, improving the overall user experience.
- This behavior is similar to Claude Code, providing a familiar experience for users transitioning from that environment.
- Added tests for the new auto indicator hook.

Fixes https://b.corp.google.com/issues/413740468

1 files changed, 20 insertions, 10 deletions

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index 707b8b9a..de1f0bf9 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -12,8 +12,10 @@ import { useGeminiStream } from './hooks/useGeminiStream.js';
 import { useLoadingIndicator } from './hooks/useLoadingIndicator.js';
 import { useThemeCommand } from './hooks/useThemeCommand.js';
 import { useSlashCommandProcessor } from './hooks/slashCommandProcessor.js';
+import { useAutoAcceptIndicator } from './hooks/useAutoAcceptIndicator.js';
 import { Header } from './components/Header.js';
 import { LoadingIndicator } from './components/LoadingIndicator.js';
+import { AutoAcceptIndicator } from './components/AutoAcceptIndicator.js';
 import { EditorState, InputPrompt } from './components/InputPrompt.js';
 import { Footer } from './components/Footer.js';
 import { ThemeDialog } from './components/ThemeDialog.js';
@@ -144,6 +146,7 @@ export const App = ({
     );
   const { elapsedTime, currentLoadingPhrase } =
     useLoadingIndicator(streamingState);
+  const showAutoAcceptIndicator = useAutoAcceptIndicator({ config });
 
   const handleFinalSubmit = useCallback(
     (submittedValue: string) => {
@@ -327,23 +330,30 @@ export const App = ({
               isLoading={streamingState === StreamingState.Responding}
               currentLoadingPhrase={currentLoadingPhrase}
               elapsedTime={elapsedTime}
+              rightContent={
+                showAutoAcceptIndicator ? <AutoAcceptIndicator /> : undefined
+              }
             />
             {isInputActive && (
-              <>
-                <Box
-                  marginTop={1}
-                  display="flex"
-                  justifyContent="space-between"
-                  width="100%"
-                >
-                  <Box>
+              <Box
+                marginTop={1}
+                display="flex"
+                justifyContent="space-between"
+                width="100%"
+              >
+                <Box>
+                  <>
                     <Text color={Colors.SubtleComment}>cwd: </Text>
                     <Text color={Colors.LightBlue}>
                       {shortenPath(config.getTargetDir(), 70)}
                     </Text>
-                  </Box>
+                  </>
                 </Box>
-
+                {showAutoAcceptIndicator && <AutoAcceptIndicator />}
+              </Box>
+            )}
+            {isInputActive && (
+              <>
                 <InputPrompt
                   query={query}
                   onChange={setQuery}