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, 4 insertions, 2 deletions

diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx
index ca5fb5de..4f342c9d 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.tsx
+++ b/packages/cli/src/ui/components/LoadingIndicator.tsx
@@ -13,12 +13,14 @@ interface LoadingIndicatorProps {
   isLoading: boolean;
   currentLoadingPhrase: string;
   elapsedTime: number;
+  rightContent?: React.ReactNode;
 }
 
 export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
   isLoading,
   currentLoadingPhrase,
   elapsedTime,
+  rightContent,
 }) => {
   if (!isLoading) {
     return null; // Don't render anything if not loading
@@ -30,10 +32,10 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
         <Spinner type="dots" />
       </Box>
       <Text color={Colors.AccentPurple}>
-        {currentLoadingPhrase} ({elapsedTime}s)
+        {currentLoadingPhrase} (esc to cancel, {elapsedTime}s)
       </Text>
       <Box flexGrow={1}>{/* Spacer */}</Box>
-      <Text color={Colors.SubtleComment}>(ESC to cancel)</Text>
+      {rightContent && <Box>{rightContent}</Box>}
     </Box>
   );
 };