MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-04-09 04:41:19 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(auth): improve API key authentication flow (#11760)

Browse Source 
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
This commit is contained in:
Gal Zahavi
2025-10-29 18:58:08 -07:00
committed by GitHub
parent 6c8a48db13
commit 06035d5d43
25 changed files with 1216 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/cli/src/config/auth.test.ts
View File

@@ -44,11 +44,7 @@ describe('validateAuthMethod', () => {
it('should return an error message if GEMINI_API_KEY is not set', () => {
vi.stubEnv('GEMINI_API_KEY', undefined);
expect(validateAuthMethod(AuthType.USE_GEMINI)).toBe(
'GEMINI_API_KEY not found. Find your existing key or generate a new one at: https://aistudio.google.com/apikey\n' +
'\n' +
'To continue, please set the GEMINI_API_KEY environment variable or add it to a .env file.',
);
expect(validateAuthMethod(AuthType.USE_GEMINI)).toBeNull();
});
});

7
packages/cli/src/config/auth.ts
View File

@@ -17,13 +17,6 @@ export function validateAuthMethod(authMethod: string): string | null {
}
if (authMethod === AuthType.USE_GEMINI) {
if (!process.env['GEMINI_API_KEY']) {
return (
'GEMINI_API_KEY not found. Find your existing key or generate a new one at: https://aistudio.google.com/apikey\n' +
'\n' +
'To continue, please set the GEMINI_API_KEY environment variable or add it to a .env file.'
);
}
return null;
}

53
packages/cli/src/ui/AppContainer.tsx
View File

@@ -44,6 +44,7 @@ import {
clearCachedCredentialFile,
recordExitFail,
ShellExecutionService,
saveApiKey,
debugLogger,
coreEvents,
CoreEvent,
@@ -356,10 +357,14 @@ export const AppContainer = (props: AppContainerProps) => {
initializationResult.themeError,
);
const { authState, setAuthState, authError, onAuthError } = useAuthCommand(
settings,
config,
);
const {
authState,
setAuthState,
authError,
onAuthError,
apiKeyDefaultValue,
reloadApiKey,
} = useAuthCommand(settings, config);
const { proQuotaRequest, handleProQuotaChoice } = useQuotaAndFallback({
config,
@@ -408,6 +413,34 @@ Logging in with Google... Please restart Gemini CLI to continue.
[settings, config, setAuthState, onAuthError],
);
const handleApiKeySubmit = useCallback(
async (apiKey: string) => {
try {
if (!apiKey.trim() && apiKey.length > 1) {
onAuthError(
'API key cannot be empty string with length greater than 1.',
);
return;
}
await saveApiKey(apiKey);
await reloadApiKey();
await config.refreshAuth(AuthType.USE_GEMINI);
setAuthState(AuthState.Authenticated);
} catch (e) {
onAuthError(
`Failed to save API key: ${e instanceof Error ? e.message : String(e)}`,
);
}
},
[setAuthState, onAuthError, reloadApiKey, config],
);
const handleApiKeyCancel = useCallback(() => {
// Go back to auth method selection
setAuthState(AuthState.Updating);
}, [setAuthState]);
// Sync user tier from config when authentication changes
useEffect(() => {
// Only sync when not currently authenticating
@@ -1163,7 +1196,9 @@ Logging in with Google... Please restart Gemini CLI to continue.
isEditorDialogOpen ||
showPrivacyNotice ||
showIdeRestartPrompt ||
!!proQuotaRequest;
!!proQuotaRequest ||
isAuthDialogOpen ||
authState === AuthState.AwaitingApiKeyInput;
const pendingHistoryItems = useMemo(
() => [...pendingSlashCommandHistoryItems, ...pendingGeminiHistoryItems],
@@ -1180,6 +1215,8 @@ Logging in with Google... Please restart Gemini CLI to continue.
isConfigInitialized,
authError,
isAuthDialogOpen,
isAwaitingApiKeyInput: authState === AuthState.AwaitingApiKeyInput,
apiKeyDefaultValue,
editorError,
isEditorDialogOpen,
showPrivacyNotice,
@@ -1335,6 +1372,8 @@ Logging in with Google... Please restart Gemini CLI to continue.
historyManager,
embeddedShellFocused,
showDebugProfiler,
apiKeyDefaultValue,
authState,
],
);
@@ -1369,6 +1408,8 @@ Logging in with Google... Please restart Gemini CLI to continue.
handleProQuotaChoice,
setQueueErrorMessage,
popAllMessages,
handleApiKeySubmit,
handleApiKeyCancel,
}),
[
handleThemeSelect,
@@ -1395,6 +1436,8 @@ Logging in with Google... Please restart Gemini CLI to continue.
handleProQuotaChoice,
setQueueErrorMessage,
popAllMessages,
handleApiKeySubmit,
handleApiKeyCancel,
],
);

125
packages/cli/src/ui/auth/ApiAuthDialog.test.tsx Normal file
View File

@@ -0,0 +1,125 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { render } from 'ink-testing-library';
import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
import { ApiAuthDialog } from './ApiAuthDialog.js';
import { useKeypress } from '../hooks/useKeypress.js';
import {
useTextBuffer,
type TextBuffer,
} from '../components/shared/text-buffer.js';
// Mocks
vi.mock('../hooks/useKeypress.js', () => ({
useKeypress: vi.fn(),
}));
vi.mock('../components/shared/text-buffer.js', () => ({
useTextBuffer: vi.fn(),
}));
vi.mock('../contexts/UIStateContext.js', () => ({
useUIState: vi.fn(() => ({
mainAreaWidth: 80,
})),
}));
const mockedUseKeypress = useKeypress as Mock;
const mockedUseTextBuffer = useTextBuffer as Mock;
describe('ApiAuthDialog', () => {
const onSubmit = vi.fn();
const onCancel = vi.fn();
let mockBuffer: TextBuffer;
beforeEach(() => {
vi.resetAllMocks();
mockBuffer = {
text: '',
lines: [''],
cursor: [0, 0],
visualCursor: [0, 0],
viewportVisualLines: [''],
handleInput: vi.fn(),
setText: vi.fn((newText) => {
mockBuffer.text = newText;
mockBuffer.viewportVisualLines = [newText];
}),
} as unknown as TextBuffer;
mockedUseTextBuffer.mockReturnValue(mockBuffer);
});
it('renders correctly', () => {
const { lastFrame } = render(
<ApiAuthDialog onSubmit={onSubmit} onCancel={onCancel} />,
);
expect(lastFrame()).toMatchSnapshot();
});
it('renders with a defaultValue', () => {
render(
<ApiAuthDialog
onSubmit={onSubmit}
onCancel={onCancel}
defaultValue="test-key"
/>,
);
expect(mockedUseTextBuffer).toHaveBeenCalledWith(
expect.objectContaining({
initialText: 'test-key',
viewport: expect.objectContaining({
height: 4,
}),
}),
);
});
it('calls onSubmit when the text input is submitted', () => {
mockBuffer.text = 'submitted-key';
render(<ApiAuthDialog onSubmit={onSubmit} onCancel={onCancel} />);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'return',
sequence: '\r',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(onSubmit).toHaveBeenCalledWith('submitted-key');
});
it('calls onCancel when the text input is cancelled', () => {
render(<ApiAuthDialog onSubmit={onSubmit} onCancel={onCancel} />);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'escape',
sequence: '\u001b',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(onCancel).toHaveBeenCalled();
});
it('displays an error message', () => {
const { lastFrame } = render(
<ApiAuthDialog
onSubmit={onSubmit}
onCancel={onCancel}
error="Invalid API Key"
/>,
);
expect(lastFrame()).toContain('Invalid API Key');
});
});

97
packages/cli/src/ui/auth/ApiAuthDialog.tsx Normal file
View File

@@ -0,0 +1,97 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { Box, Text } from 'ink';
import { theme } from '../semantic-colors.js';
import { TextInput } from '../components/shared/TextInput.js';
import { useTextBuffer } from '../components/shared/text-buffer.js';
import { useUIState } from '../contexts/UIStateContext.js';
interface ApiAuthDialogProps {
onSubmit: (apiKey: string) => void;
onCancel: () => void;
error?: string | null;
defaultValue?: string;
}
export function ApiAuthDialog({
onSubmit,
onCancel,
error,
defaultValue = '',
}: ApiAuthDialogProps): React.JSX.Element {
const { mainAreaWidth } = useUIState();
const viewportWidth = mainAreaWidth - 8;
const buffer = useTextBuffer({
initialText: defaultValue || '',
initialCursorOffset: defaultValue?.length || 0,
viewport: {
width: viewportWidth,
height: 4,
},
isValidPath: () => false, // No path validation needed for API key
inputFilter: (text) =>
text.replace(/[^a-zA-Z0-9_-]/g, '').replace(/[\r\n]/g, ''),
singleLine: true,
});
const handleSubmit = (value: string) => {
onSubmit(value);
};
return (
<Box
borderStyle="round"
borderColor={theme.border.focused}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold color={theme.text.primary}>
Enter Gemini API Key
</Text>
<Box marginTop={1} flexDirection="column">
<Text color={theme.text.primary}>
Please enter your Gemini API key. It will be securely stored in your
system keychain.
</Text>
<Text color={theme.text.secondary}>
You can get an API key from{' '}
<Text color={theme.text.link}>
https://aistudio.google.com/app/apikey
</Text>
</Text>
</Box>
<Box marginTop={1} flexDirection="row">
<Box
borderStyle="round"
borderColor={theme.border.default}
paddingX={1}
flexGrow={1}
>
<TextInput
buffer={buffer}
onSubmit={handleSubmit}
onCancel={onCancel}
placeholder="Paste your API key here"
/>
</Box>
</Box>
{error && (
<Box marginTop={1}>
<Text color={theme.status.error}>{error}</Text>
</Box>
)}
<Box marginTop={1}>
<Text color={theme.text.secondary}>
(Press Enter to submit, Esc to cancel)
</Text>
</Box>
</Box>
);
}

2
packages/cli/src/ui/auth/AuthDialog.test.tsx
View File

@@ -191,7 +191,7 @@ describe('AuthDialog', () => {
AuthType.USE_GEMINI,
);
expect(props.setAuthState).toHaveBeenCalledWith(
AuthState.Unauthenticated,
AuthState.AwaitingApiKeyInput,
);
});

82
packages/cli/src/ui/auth/AuthDialog.tsx
View File

@@ -119,6 +119,10 @@ Logging in with Google... Please restart Gemini CLI to continue.
process.exit(0);
}
}
if (authType === AuthType.USE_GEMINI) {
setAuthState(AuthState.AwaitingApiKeyInput);
return;
}
setAuthState(AuthState.Unauthenticated);
},
[settings, config, setAuthState],
@@ -157,50 +161,52 @@ Logging in with Google... Please restart Gemini CLI to continue.
return (
<Box
borderStyle="round"
borderColor={theme.border.default}
flexDirection="column"
borderColor={theme.border.focused}
flexDirection="row"
padding={1}
width="100%"
alignItems="flex-start"
>
<Text bold color={theme.text.primary}>
Get started
</Text>
<Box marginTop={1}>
<Text color={theme.text.primary}>
How would you like to authenticate for this project?
<Text color={theme.text.accent}>? </Text>
<Box flexDirection="column" flexGrow={1}>
<Text bold color={theme.text.primary}>
Get started
</Text>
</Box>
<Box marginTop={1}>
<RadioButtonSelect
items={items}
initialIndex={initialAuthIndex}
onSelect={handleAuthSelect}
onHighlight={() => {
onAuthError(null);
}}
/>
</Box>
{authError && (
<Box marginTop={1}>
<Text color={theme.status.error}>{authError}</Text>
<Text color={theme.text.primary}>
How would you like to authenticate for this project?
</Text>
</Box>
<Box marginTop={1}>
<RadioButtonSelect
items={items}
initialIndex={initialAuthIndex}
onSelect={handleAuthSelect}
onHighlight={() => {
onAuthError(null);
}}
/>
</Box>
{authError && (
<Box marginTop={1}>
<Text color={theme.status.error}>{authError}</Text>
</Box>
)}
<Box marginTop={1}>
<Text color={theme.text.secondary}>(Use Enter to select)</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.primary}>
Terms of Services and Privacy Notice for Gemini CLI
</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.link}>
{
'https://github.com/google-gemini/gemini-cli/blob/main/docs/tos-privacy.md'
}
</Text>
</Box>
)}
<Box marginTop={1}>
<Text color={theme.text.secondary}>
(Use Enter to select, Esc to close)
</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.primary}>
Terms of Services and Privacy Notice for Gemini CLI
</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.link}>
{
'https://github.com/google-gemini/gemini-cli/blob/main/docs/tos-privacy.md'
}
</Text>
</Box>
</Box>
);

18
packages/cli/src/ui/auth/__snapshots__/ApiAuthDialog.test.tsx.snap Normal file
View File

@@ -0,0 +1,18 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`ApiAuthDialog > renders correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Enter Gemini API Key │
│ │
│ Please enter your Gemini API key. It will be securely stored in your system keychain. │
│ You can get an API key from https://aistudio.google.com/app/apikey │
│ │
│ ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │
│ │ Paste your API key here │ │
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
│ (Press Enter to submit, Esc to cancel) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;

43
packages/cli/src/ui/auth/useAuth.ts
View File

@@ -6,7 +6,12 @@
import { useState, useEffect, useCallback } from 'react';
import type { LoadedSettings } from '../../config/settings.js';
import { AuthType, debugLogger, type Config } from '@google/gemini-cli-core';
import {
AuthType,
type Config,
loadApiKey,
debugLogger,
} from '@google/gemini-cli-core';
import { getErrorMessage } from '@google/gemini-cli-core';
import { AuthState } from '../types.js';
import { validateAuthMethod } from '../../config/auth.js';
@@ -22,6 +27,10 @@ export function validateAuthMethodWithSettings(
if (settings.merged.security?.auth?.useExternal) {
return null;
}
// If using Gemini API key, we don't validate it here as we might need to prompt for it.
if (authType === AuthType.USE_GEMINI) {
return null;
}
return validateAuthMethod(authType);
}
@@ -31,6 +40,9 @@ export const useAuthCommand = (settings: LoadedSettings, config: Config) => {
);
const [authError, setAuthError] = useState<string | null>(null);
const [apiKeyDefaultValue, setApiKeyDefaultValue] = useState<
string | undefined
>(undefined);
const onAuthError = useCallback(
(error: string | null) => {
@@ -42,6 +54,14 @@ export const useAuthCommand = (settings: LoadedSettings, config: Config) => {
[setAuthError, setAuthState],
);
const reloadApiKey = useCallback(async () => {
const storedKey = (await loadApiKey()) ?? '';
const envKey = process.env['GEMINI_API_KEY'] ?? '';
const key = storedKey || envKey;
setApiKeyDefaultValue(key);
return key; // Return the key for immediate use
}, []);
useEffect(() => {
(async () => {
if (authState !== AuthState.Unauthenticated) {
@@ -59,6 +79,15 @@ export const useAuthCommand = (settings: LoadedSettings, config: Config) => {
}
return;
}
if (authType === AuthType.USE_GEMINI) {
const key = await reloadApiKey(); // Use the unified function
if (!key) {
setAuthState(AuthState.AwaitingApiKeyInput);
return;
}
}
const error = validateAuthMethodWithSettings(authType, settings);
if (error) {
onAuthError(error);
@@ -87,12 +116,22 @@ export const useAuthCommand = (settings: LoadedSettings, config: Config) => {
onAuthError(`Failed to login. Message: ${getErrorMessage(e)}`);
}
})();
}, [settings, config, authState, setAuthState, setAuthError, onAuthError]);
}, [
settings,
config,
authState,
setAuthState,
setAuthError,
onAuthError,
reloadApiKey,
]);
return {
authState,
setAuthState,
authError,
onAuthError,
apiKeyDefaultValue,
reloadApiKey,
};
};

13
packages/cli/src/ui/components/DialogManager.tsx
View File

@@ -14,6 +14,7 @@ import { ThemeDialog } from './ThemeDialog.js';
import { SettingsDialog } from './SettingsDialog.js';
import { AuthInProgress } from '../auth/AuthInProgress.js';
import { AuthDialog } from '../auth/AuthDialog.js';
import { ApiAuthDialog } from '../auth/ApiAuthDialog.js';
import { EditorSettingsDialog } from './EditorSettingsDialog.js';
import { PrivacyNotice } from '../privacy/PrivacyNotice.js';
import { ProQuotaDialog } from './ProQuotaDialog.js';
@@ -150,6 +151,18 @@ export const DialogManager = ({
/>
);
}
if (uiState.isAwaitingApiKeyInput) {
return (
<Box flexDirection="column">
<ApiAuthDialog
onSubmit={uiActions.handleApiKeySubmit}
onCancel={uiActions.handleApiKeyCancel}
error={uiState.authError}
defaultValue={uiState.apiKeyDefaultValue}
/>
</Box>
);
}
if (uiState.isAuthDialogOpen) {
return (
<Box flexDirection="column">

311
packages/cli/src/ui/components/shared/TextInput.test.tsx Normal file
View File

@@ -0,0 +1,311 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { render } from 'ink-testing-library';
import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
import { TextInput } from './TextInput.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { useTextBuffer, type TextBuffer } from './text-buffer.js';
// Mocks
vi.mock('../../hooks/useKeypress.js', () => ({
useKeypress: vi.fn(),
}));
vi.mock('./text-buffer.js', () => {
const mockTextBuffer = {
text: '',
lines: [''],
cursor: [0, 0],
visualCursor: [0, 0],
viewportVisualLines: [''],
handleInput: vi.fn((key) => {
// Simulate basic input for testing
if (key.sequence) {
mockTextBuffer.text += key.sequence;
mockTextBuffer.viewportVisualLines = [mockTextBuffer.text];
mockTextBuffer.visualCursor[1] = mockTextBuffer.text.length;
} else if (key.name === 'backspace') {
mockTextBuffer.text = mockTextBuffer.text.slice(0, -1);
mockTextBuffer.viewportVisualLines = [mockTextBuffer.text];
mockTextBuffer.visualCursor[1] = mockTextBuffer.text.length;
} else if (key.name === 'left') {
mockTextBuffer.visualCursor[1] = Math.max(
0,
mockTextBuffer.visualCursor[1] - 1,
);
} else if (key.name === 'right') {
mockTextBuffer.visualCursor[1] = Math.min(
mockTextBuffer.text.length,
mockTextBuffer.visualCursor[1] + 1,
);
}
}),
setText: vi.fn((newText) => {
mockTextBuffer.text = newText;
mockTextBuffer.viewportVisualLines = [newText];
mockTextBuffer.visualCursor[1] = newText.length;
}),
};
return {
useTextBuffer: vi.fn(() => mockTextBuffer as unknown as TextBuffer),
TextBuffer: vi.fn(() => mockTextBuffer as unknown as TextBuffer),
};
});
const mockedUseKeypress = useKeypress as Mock;
const mockedUseTextBuffer = useTextBuffer as Mock;
describe('TextInput', () => {
const onCancel = vi.fn();
const onSubmit = vi.fn();
let mockBuffer: TextBuffer;
beforeEach(() => {
vi.resetAllMocks();
// Reset the internal state of the mock buffer for each test
const buffer = {
text: '',
lines: [''],
cursor: [0, 0],
visualCursor: [0, 0],
viewportVisualLines: [''],
handleInput: vi.fn((key) => {
if (key.sequence) {
buffer.text += key.sequence;
buffer.viewportVisualLines = [buffer.text];
buffer.visualCursor[1] = buffer.text.length;
} else if (key.name === 'backspace') {
buffer.text = buffer.text.slice(0, -1);
buffer.viewportVisualLines = [buffer.text];
buffer.visualCursor[1] = buffer.text.length;
} else if (key.name === 'left') {
buffer.visualCursor[1] = Math.max(0, buffer.visualCursor[1] - 1);
} else if (key.name === 'right') {
buffer.visualCursor[1] = Math.min(
buffer.text.length,
buffer.visualCursor[1] + 1,
);
}
}),
setText: vi.fn((newText) => {
buffer.text = newText;
buffer.viewportVisualLines = [newText];
buffer.visualCursor[1] = newText.length;
}),
};
mockBuffer = buffer as unknown as TextBuffer;
mockedUseTextBuffer.mockReturnValue(mockBuffer);
});
it('renders with an initial value', () => {
const buffer = {
text: 'test',
lines: ['test'],
cursor: [0, 4],
visualCursor: [0, 4],
viewportVisualLines: ['test'],
handleInput: vi.fn(),
setText: vi.fn(),
};
const { lastFrame } = render(
<TextInput
buffer={buffer as unknown as TextBuffer}
onSubmit={onSubmit}
onCancel={onCancel}
/>,
);
expect(lastFrame()).toContain('test');
});
it('renders a placeholder', () => {
const buffer = {
text: '',
lines: [''],
cursor: [0, 0],
visualCursor: [0, 0],
viewportVisualLines: [''],
handleInput: vi.fn(),
setText: vi.fn(),
};
const { lastFrame } = render(
<TextInput
buffer={buffer as unknown as TextBuffer}
placeholder="testing"
onSubmit={onSubmit}
onCancel={onCancel}
/>,
);
expect(lastFrame()).toContain('testing');
});
it('handles character input', () => {
render(
<TextInput buffer={mockBuffer} onSubmit={onSubmit} onCancel={onCancel} />,
);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'a',
sequence: 'a',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(mockBuffer.handleInput).toHaveBeenCalledWith({
name: 'a',
sequence: 'a',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(mockBuffer.text).toBe('a');
});
it('handles backspace', () => {
mockBuffer.setText('test');
render(
<TextInput buffer={mockBuffer} onSubmit={onSubmit} onCancel={onCancel} />,
);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'backspace',
sequence: '',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(mockBuffer.handleInput).toHaveBeenCalledWith({
name: 'backspace',
sequence: '',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(mockBuffer.text).toBe('tes');
});
it('handles left arrow', () => {
mockBuffer.setText('test');
render(
<TextInput buffer={mockBuffer} onSubmit={onSubmit} onCancel={onCancel} />,
);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'left',
sequence: '',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
// Cursor moves from end to before 't'
expect(mockBuffer.visualCursor[1]).toBe(3);
});
it('handles right arrow', () => {
mockBuffer.setText('test');
mockBuffer.visualCursor[1] = 2; // Set initial cursor for right arrow test
render(
<TextInput buffer={mockBuffer} onSubmit={onSubmit} onCancel={onCancel} />,
);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'right',
sequence: '',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(mockBuffer.visualCursor[1]).toBe(3);
});
it('calls onSubmit on return', () => {
mockBuffer.setText('test');
render(
<TextInput buffer={mockBuffer} onSubmit={onSubmit} onCancel={onCancel} />,
);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'return',
sequence: '',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
expect(onSubmit).toHaveBeenCalledWith('test');
});
it('calls onCancel on escape', async () => {
vi.useFakeTimers();
render(
<TextInput buffer={mockBuffer} onCancel={onCancel} onSubmit={onSubmit} />,
);
const keypressHandler = mockedUseKeypress.mock.calls[0][0];
keypressHandler({
name: 'escape',
sequence: '',
ctrl: false,
meta: false,
shift: false,
paste: false,
});
await vi.runAllTimersAsync();
expect(onCancel).toHaveBeenCalled();
vi.useRealTimers();
});
it('renders the input value', () => {
mockBuffer.setText('secret');
const { lastFrame } = render(
<TextInput buffer={mockBuffer} onSubmit={onSubmit} onCancel={onCancel} />,
);
expect(lastFrame()).toContain('secret');
});
it('does not show cursor when not focused', () => {
mockBuffer.setText('test');
const { lastFrame } = render(
<TextInput
buffer={mockBuffer}
focus={false}
onSubmit={onSubmit}
onCancel={onCancel}
/>,
);
expect(lastFrame()).not.toContain('\u001b[7m'); // Inverse video chalk
});
it('renders multiple lines when text wraps', () => {
mockBuffer.text = 'line1\nline2';
mockBuffer.viewportVisualLines = ['line1', 'line2'];
const { lastFrame } = render(
<TextInput buffer={mockBuffer} onSubmit={onSubmit} onCancel={onCancel} />,
);
expect(lastFrame()).toContain('line1');
expect(lastFrame()).toContain('line2');
});
});

104
packages/cli/src/ui/components/shared/TextInput.tsx Normal file
View File

@@ -0,0 +1,104 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { useCallback } from 'react';
import type { Key } from '../../hooks/useKeypress.js';
import { Text, Box } from 'ink';
import { useKeypress } from '../../hooks/useKeypress.js';
import chalk from 'chalk';
import { theme } from '../../semantic-colors.js';
import type { TextBuffer } from './text-buffer.js';
import { cpSlice } from '../../utils/textUtils.js';
export interface TextInputProps {
buffer: TextBuffer;
placeholder?: string;
onSubmit?: (value: string) => void;
onCancel?: () => void;
focus?: boolean;
}
export function TextInput({
buffer,
placeholder = '',
onSubmit,
onCancel,
focus = true,
}: TextInputProps): React.JSX.Element {
const {
text,
handleInput,
visualCursor,
viewportVisualLines,
visualScrollRow,
} = buffer;
const [cursorVisualRowAbsolute, cursorVisualColAbsolute] = visualCursor;
const handleKeyPress = useCallback(
(key: Key) => {
if (key.name === 'escape') {
onCancel?.();
return;
}
if (key.name === 'return') {
onSubmit?.(text);
return;
}
handleInput(key);
},
[handleInput, onCancel, onSubmit, text],
);
useKeypress(handleKeyPress, { isActive: focus });
const showPlaceholder = text.length === 0 && placeholder;
if (showPlaceholder) {
return (
<Box>
{focus ? (
<Text>
{chalk.inverse(placeholder[0] || ' ')}
<Text color={theme.text.secondary}>{placeholder.slice(1)}</Text>
</Text>
) : (
<Text color={theme.text.secondary}>{placeholder}</Text>
)}
</Box>
);
}
return (
<Box flexDirection="column">
{viewportVisualLines.map((lineText, idx) => {
const currentVisualRow = visualScrollRow + idx;
const isCursorLine =
focus && currentVisualRow === cursorVisualRowAbsolute;
const lineDisplay = isCursorLine
? cpSlice(lineText, 0, cursorVisualColAbsolute) +
chalk.inverse(
cpSlice(
lineText,
cursorVisualColAbsolute,
cursorVisualColAbsolute + 1,
) || ' ',
) +
cpSlice(lineText, cursorVisualColAbsolute + 1)
: lineText;
return (
<Box key={idx} height={1}>
<Text>{lineDisplay}</Text>
</Box>
);
})}
</Box>
);
}

175
packages/cli/src/ui/components/shared/text-buffer.test.ts
View File

@@ -14,6 +14,7 @@ import type {
TextBufferState,
TextBufferAction,
VisualLayout,
TextBufferOptions,
} from './text-buffer.js';
import {
useTextBuffer,
@@ -101,6 +102,43 @@ describe('textBufferReducer', () => {
});
});
describe('insert action with options', () => {
it('should filter input using inputFilter option', () => {
const action: TextBufferAction = { type: 'insert', payload: 'a1b2c3' };
const options: TextBufferOptions = {
inputFilter: (text) => text.replace(/[0-9]/g, ''),
};
const state = textBufferReducer(initialState, action, options);
expect(state.lines).toEqual(['abc']);
expect(state.cursorCol).toBe(3);
});
it('should strip newlines when singleLine option is true', () => {
const action: TextBufferAction = {
type: 'insert',
payload: 'hello\nworld',
};
const options: TextBufferOptions = { singleLine: true };
const state = textBufferReducer(initialState, action, options);
expect(state.lines).toEqual(['helloworld']);
expect(state.cursorCol).toBe(10);
});
it('should apply both inputFilter and singleLine options', () => {
const action: TextBufferAction = {
type: 'insert',
payload: 'h\ne\nl\nl\no\n1\n2\n3',
};
const options: TextBufferOptions = {
singleLine: true,
inputFilter: (text) => text.replace(/[0-9]/g, ''),
};
const state = textBufferReducer(initialState, action, options);
expect(state.lines).toEqual(['hello']);
expect(state.cursorCol).toBe(5);
});
});
describe('backspace action', () => {
it('should remove a character', () => {
const stateWithText: TextBufferState = {
@@ -1520,6 +1558,75 @@ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
});
});
describe('inputFilter', () => {
it('should filter input based on the provided filter function', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
inputFilter: (text) => text.replace(/[^0-9]/g, ''),
}),
);
act(() => result.current.insert('a1b2c3'));
expect(getBufferState(result).text).toBe('123');
});
it('should handle empty result from filter', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
inputFilter: (text) => text.replace(/[^0-9]/g, ''),
}),
);
act(() => result.current.insert('abc'));
expect(getBufferState(result).text).toBe('');
});
it('should filter pasted text', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
inputFilter: (text) => text.toUpperCase(),
}),
);
act(() => result.current.insert('hello', { paste: true }));
expect(getBufferState(result).text).toBe('HELLO');
});
it('should not filter newlines if they are allowed by the filter', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
inputFilter: (text) => text, // Allow everything including newlines
}),
);
act(() => result.current.insert('a\nb'));
// The insert function splits by newline and inserts separately if it detects them.
// If the filter allows them, they should be handled correctly by the subsequent logic in insert.
expect(getBufferState(result).text).toBe('a\nb');
});
it('should filter before newline check in insert', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
inputFilter: (text) => text.replace(/\n/g, ''), // Filter out newlines
}),
);
act(() => result.current.insert('a\nb'));
expect(getBufferState(result).text).toBe('ab');
});
});
describe('stripAnsi', () => {
it('should correctly strip ANSI escape codes', () => {
const textWithAnsi = '\x1B[31mHello\x1B[0m World';
@@ -1587,6 +1694,74 @@ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
expect(getBufferState(result).text).toBe('hello world');
});
});
describe('singleLine mode', () => {
it('should not insert a newline character when singleLine is true', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
singleLine: true,
}),
);
act(() => result.current.insert('\n'));
const state = getBufferState(result);
expect(state.text).toBe('');
expect(state.lines).toEqual(['']);
});
it('should not create a new line when newline() is called and singleLine is true', () => {
const { result } = renderHook(() =>
useTextBuffer({
initialText: 'ab',
viewport,
isValidPath: () => false,
singleLine: true,
}),
);
act(() => result.current.move('end')); // cursor at [0,2]
act(() => result.current.newline());
const state = getBufferState(result);
expect(state.text).toBe('ab');
expect(state.lines).toEqual(['ab']);
expect(state.cursor).toEqual([0, 2]);
});
it('should not handle "Enter" key as newline when singleLine is true', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
singleLine: true,
}),
);
act(() =>
result.current.handleInput({
name: 'return',
ctrl: false,
meta: false,
shift: false,
paste: false,
sequence: '\r',
}),
);
expect(getBufferState(result).lines).toEqual(['']);
});
it('should strip newlines from pasted text when singleLine is true', () => {
const { result } = renderHook(() =>
useTextBuffer({
viewport,
isValidPath: () => false,
singleLine: true,
}),
);
act(() => result.current.insert('hello\nworld', { paste: true }));
const state = getBufferState(result);
expect(state.text).toBe('helloworld');
expect(state.lines).toEqual(['helloworld']);
});
});
});
describe('offsetToLogicalPos', () => {

52
packages/cli/src/ui/components/shared/text-buffer.ts
View File

@@ -518,6 +518,8 @@ interface UseTextBufferProps {
onChange?: (text: string) => void; // Callback for when text changes
isValidPath: (path: string) => boolean;
shellModeActive?: boolean; // Whether the text buffer is in shell mode
inputFilter?: (text: string) => string; // Optional filter for input text
singleLine?: boolean;
}
interface UndoHistoryEntry {
@@ -949,9 +951,15 @@ export type TextBufferAction =
| { type: 'vim_move_to_line'; payload: { lineNumber: number } }
| { type: 'vim_escape_insert_mode' };
export interface TextBufferOptions {
inputFilter?: (text: string) => string;
singleLine?: boolean;
}
function textBufferReducerLogic(
state: TextBufferState,
action: TextBufferAction,
options: TextBufferOptions = {},
): TextBufferState {
const pushUndoLocal = pushUndo;
@@ -986,8 +994,20 @@ function textBufferReducerLogic(
const currentLine = (r: number) => newLines[r] ?? '';
let payload = action.payload;
if (options.singleLine) {
payload = payload.replace(/[\r\n]/g, '');
}
if (options.inputFilter) {
payload = options.inputFilter(payload);
}
if (payload.length === 0) {
return state;
}
const str = stripUnsafeCharacters(
action.payload.replace(/\r\n/g, '\n').replace(/\r/g, '\n'),
payload.replace(/\r\n/g, '\n').replace(/\r/g, '\n'),
);
const parts = str.split('\n');
const lineContent = currentLine(newCursorRow);
@@ -1498,8 +1518,9 @@ function textBufferReducerLogic(
export function textBufferReducer(
state: TextBufferState,
action: TextBufferAction,
options: TextBufferOptions = {},
): TextBufferState {
const newState = textBufferReducerLogic(state, action);
const newState = textBufferReducerLogic(state, action, options);
if (
newState.lines !== state.lines ||
@@ -1525,6 +1546,8 @@ export function useTextBuffer({
onChange,
isValidPath,
shellModeActive = false,
inputFilter,
singleLine = false,
}: UseTextBufferProps): TextBuffer {
const initialState = useMemo((): TextBufferState => {
const lines = initialText.split('\n');
@@ -1551,7 +1574,11 @@ export function useTextBuffer({
};
}, [initialText, initialCursorOffset, viewport.width, viewport.height]);
const [state, dispatch] = useReducer(textBufferReducer, initialState);
const [state, dispatch] = useReducer(
(s: TextBufferState, a: TextBufferAction) =>
textBufferReducer(s, a, { inputFilter, singleLine }),
initialState,
);
const {
lines,
cursorRow,
@@ -1609,7 +1636,7 @@ export function useTextBuffer({
const insert = useCallback(
(ch: string, { paste = false }: { paste?: boolean } = {}): void => {
if (/[\n\r]/.test(ch)) {
if (!singleLine && /[\n\r]/.test(ch)) {
dispatch({ type: 'insert', payload: ch });
return;
}
@@ -1648,12 +1675,15 @@ export function useTextBuffer({
dispatch({ type: 'insert', payload: currentText });
}
},
[isValidPath, shellModeActive],
[isValidPath, shellModeActive, singleLine],
);
const newline = useCallback((): void => {
if (singleLine) {
return;
}
dispatch({ type: 'insert', payload: '\n' });
}, []);
}, [singleLine]);
const backspace = useCallback((): void => {
dispatch({ type: 'backspace' });
@@ -1895,10 +1925,11 @@ export function useTextBuffer({
}
if (
key.name === 'return' ||
input === '\r' ||
input === '\n' ||
input === '\\\r' // VSCode terminal represents shift + enter this way
!singleLine &&
(key.name === 'return' ||
input === '\r' ||
input === '\n' ||
input === '\\r') // VSCode terminal represents shift + enter this way
)
newline();
else if (key.name === 'left' && !key.meta && !key.ctrl) move('left');
@@ -1947,6 +1978,7 @@ export function useTextBuffer({
insert,
undo,
redo,
singleLine,
],
);

2
packages/cli/src/ui/contexts/UIActionsContext.tsx
View File

@@ -43,6 +43,8 @@ export interface UIActions {
handleProQuotaChoice: (choice: 'auth' | 'continue') => void;
setQueueErrorMessage: (message: string | null) => void;
popAllMessages: (onPop: (messages: string | undefined) => void) => void;
handleApiKeySubmit: (apiKey: string) => Promise<void>;
handleApiKeyCancel: () => void;
}
export const UIActionsContext = createContext<UIActions | null>(null);

2
packages/cli/src/ui/contexts/UIStateContext.tsx
View File

@@ -47,6 +47,8 @@ export interface UIState {
isConfigInitialized: boolean;
authError: string | null;
isAuthDialogOpen: boolean;
isAwaitingApiKeyInput: boolean;
apiKeyDefaultValue?: string;
editorError: string | null;
isEditorDialogOpen: boolean;
showPrivacyNotice: boolean;

2
packages/cli/src/ui/types.ts
View File

@@ -23,6 +23,8 @@ export enum AuthState {
Unauthenticated = 'unauthenticated',
// Auth dialog is open for user to select auth method
Updating = 'updating',
// Waiting for user to input API key
AwaitingApiKeyInput = 'awaiting_api_key_input',
// Successfully authenticated
Authenticated = 'authenticated',
}