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
This commit is contained in:
Taylor Mullen
2025-05-17 21:25:28 -07:00
committed by N. Taylor Mullen
parent 13a6a9a690
commit aca27709df
5 changed files with 314 additions and 12 deletions

View File

@@ -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}