qwen-code/packages/cli/src/ui/App.tsx
Daniel Lee daceb9963f
feat(cli): support ctrl+d to exit (#878)
Similar to ctrl+c, ctrl+d can now be used to exit the program. To avoid accidental exit, ctrl+d must be pressed twice in relatively quick succession (same as ctrl+c).

Following common UX pattern, ctrl+d will be ignored when the input prompt is non-empty. This behavior is similar to how most shell (bash/zsh) behaves. To support this, I had to refactor so that text buffer is initialized outside of the InputPrompt component and instead do it on the main App component to allow input controller to have access to check the content of the text buffer.
2025-06-13 16:59:09 +00:00

645 lines
21 KiB
TypeScript

/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import {
Box,
DOMElement,
measureElement,
Static,
Text,
useStdin,
useInput,
type Key as InkKeyType,
} from 'ink';
import { StreamingState, type HistoryItem, MessageType } from './types.js';
import { useTerminalSize } from './hooks/useTerminalSize.js';
import { useGeminiStream } from './hooks/useGeminiStream.js';
import { useLoadingIndicator } from './hooks/useLoadingIndicator.js';
import { useThemeCommand } from './hooks/useThemeCommand.js';
import { useEditorSettings } from './hooks/useEditorSettings.js';
import { useSlashCommandProcessor } from './hooks/slashCommandProcessor.js';
import { useAutoAcceptIndicator } from './hooks/useAutoAcceptIndicator.js';
import { useConsoleMessages } from './hooks/useConsoleMessages.js';
import { Header } from './components/Header.js';
import { LoadingIndicator } from './components/LoadingIndicator.js';
import { AutoAcceptIndicator } from './components/AutoAcceptIndicator.js';
import { ShellModeIndicator } from './components/ShellModeIndicator.js';
import { InputPrompt } from './components/InputPrompt.js';
import { Footer } from './components/Footer.js';
import { ThemeDialog } from './components/ThemeDialog.js';
import { EditorSettingsDialog } from './components/EditorSettingsDialog.js';
import { Colors } from './colors.js';
import { Help } from './components/Help.js';
import { loadHierarchicalGeminiMemory } from '../config/config.js';
import { LoadedSettings } from '../config/settings.js';
import { Tips } from './components/Tips.js';
import { useConsolePatcher } from './components/ConsolePatcher.js';
import { DetailedMessagesDisplay } from './components/DetailedMessagesDisplay.js';
import { HistoryItemDisplay } from './components/HistoryItemDisplay.js';
import { ContextSummaryDisplay } from './components/ContextSummaryDisplay.js';
import { useHistory } from './hooks/useHistoryManager.js';
import process from 'node:process';
import {
getErrorMessage,
type Config,
getAllGeminiMdFilenames,
ApprovalMode,
isEditorAvailable,
EditorType,
} from '@gemini-cli/core';
import { useLogger } from './hooks/useLogger.js';
import { StreamingContext } from './contexts/StreamingContext.js';
import { SessionStatsProvider } from './contexts/SessionContext.js';
import { useGitBranchName } from './hooks/useGitBranchName.js';
import { useTextBuffer } from './components/shared/text-buffer.js';
import * as fs from 'fs';
const CTRL_EXIT_PROMPT_DURATION_MS = 1000;
interface AppProps {
config: Config;
settings: LoadedSettings;
startupWarnings?: string[];
}
export const AppWrapper = (props: AppProps) => (
<SessionStatsProvider>
<App {...props} />
</SessionStatsProvider>
);
const App = ({ config, settings, startupWarnings = [] }: AppProps) => {
const { history, addItem, clearItems, loadHistory } = useHistory();
const {
consoleMessages,
handleNewMessage,
clearConsoleMessages: clearConsoleMessagesState,
} = useConsoleMessages();
const [staticNeedsRefresh, setStaticNeedsRefresh] = useState(false);
const [staticKey, setStaticKey] = useState(0);
const refreshStatic = useCallback(() => {
setStaticKey((prev) => prev + 1);
}, [setStaticKey]);
const [geminiMdFileCount, setGeminiMdFileCount] = useState<number>(0);
const [debugMessage, setDebugMessage] = useState<string>('');
const [showHelp, setShowHelp] = useState<boolean>(false);
const [themeError, setThemeError] = useState<string | null>(null);
const [editorError, setEditorError] = useState<string | null>(null);
const [footerHeight, setFooterHeight] = useState<number>(0);
const [corgiMode, setCorgiMode] = useState(false);
const [shellModeActive, setShellModeActive] = useState(false);
const [showErrorDetails, setShowErrorDetails] = useState<boolean>(false);
const [showToolDescriptions, setShowToolDescriptions] =
useState<boolean>(false);
const [ctrlCPressedOnce, setCtrlCPressedOnce] = useState(false);
const [quittingMessages, setQuittingMessages] = useState<
HistoryItem[] | null
>(null);
const ctrlCTimerRef = useRef<NodeJS.Timeout | null>(null);
const [ctrlDPressedOnce, setCtrlDPressedOnce] = useState(false);
const ctrlDTimerRef = useRef<NodeJS.Timeout | null>(null);
const errorCount = useMemo(
() => consoleMessages.filter((msg) => msg.type === 'error').length,
[consoleMessages],
);
const {
isThemeDialogOpen,
openThemeDialog,
handleThemeSelect,
handleThemeHighlight,
} = useThemeCommand(settings, setThemeError, addItem);
const {
isEditorDialogOpen,
openEditorDialog,
handleEditorSelect,
exitEditorDialog,
} = useEditorSettings(settings, setEditorError, addItem);
const toggleCorgiMode = useCallback(() => {
setCorgiMode((prev) => !prev);
}, []);
const performMemoryRefresh = useCallback(async () => {
addItem(
{
type: MessageType.INFO,
text: 'Refreshing hierarchical memory (GEMINI.md files)...',
},
Date.now(),
);
try {
const { memoryContent, fileCount } = await loadHierarchicalGeminiMemory(
process.cwd(),
config.getDebugMode(),
);
config.setUserMemory(memoryContent);
config.setGeminiMdFileCount(fileCount);
setGeminiMdFileCount(fileCount);
addItem(
{
type: MessageType.INFO,
text: `Memory refreshed successfully. ${memoryContent.length > 0 ? `Loaded ${memoryContent.length} characters from ${fileCount} file(s).` : 'No memory content found.'}`,
},
Date.now(),
);
if (config.getDebugMode()) {
console.log(
`[DEBUG] Refreshed memory content in config: ${memoryContent.substring(0, 200)}...`,
);
}
} catch (error) {
const errorMessage = getErrorMessage(error);
addItem(
{
type: MessageType.ERROR,
text: `Error refreshing memory: ${errorMessage}`,
},
Date.now(),
);
console.error('Error refreshing memory:', error);
}
}, [config, addItem]);
const { handleSlashCommand, slashCommands } = useSlashCommandProcessor(
config,
history,
addItem,
clearItems,
loadHistory,
refreshStatic,
setShowHelp,
setDebugMessage,
openThemeDialog,
openEditorDialog,
performMemoryRefresh,
toggleCorgiMode,
showToolDescriptions,
setQuittingMessages,
);
const { rows: terminalHeight, columns: terminalWidth } = useTerminalSize();
const { stdin, setRawMode } = useStdin();
const isValidPath = useCallback((filePath: string): boolean => {
try {
return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
} catch (_e) {
return false;
}
}, []);
const widthFraction = 0.9;
const inputWidth = Math.max(
20,
Math.round(terminalWidth * widthFraction) - 3,
);
const suggestionsWidth = Math.max(60, Math.floor(terminalWidth * 0.8));
const buffer = useTextBuffer({
initialText: '',
viewport: { height: 10, width: inputWidth },
stdin,
setRawMode,
isValidPath,
});
const handleExit = useCallback(
(
pressedOnce: boolean,
setPressedOnce: (value: boolean) => void,
timerRef: React.MutableRefObject<NodeJS.Timeout | null>,
) => {
if (pressedOnce) {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
const quitCommand = slashCommands.find(
(cmd) => cmd.name === 'quit' || cmd.altName === 'exit',
);
if (quitCommand) {
quitCommand.action('quit', '', '');
} else {
process.exit(0);
}
} else {
setPressedOnce(true);
timerRef.current = setTimeout(() => {
setPressedOnce(false);
timerRef.current = null;
}, CTRL_EXIT_PROMPT_DURATION_MS);
}
},
[slashCommands],
);
useInput((input: string, key: InkKeyType) => {
if (key.ctrl && input === 'o') {
setShowErrorDetails((prev) => !prev);
refreshStatic();
} else if (key.ctrl && input === 't') {
const newValue = !showToolDescriptions;
setShowToolDescriptions(newValue);
refreshStatic();
const mcpServers = config.getMcpServers();
if (Object.keys(mcpServers || {}).length > 0) {
handleSlashCommand(newValue ? '/mcp desc' : '/mcp nodesc');
}
} else if (key.ctrl && (input === 'c' || input === 'C')) {
handleExit(ctrlCPressedOnce, setCtrlCPressedOnce, ctrlCTimerRef);
} else if (key.ctrl && (input === 'd' || input === 'D')) {
if (buffer.text.length > 0) {
// Do nothing if there is text in the input.
return;
}
handleExit(ctrlDPressedOnce, setCtrlDPressedOnce, ctrlDTimerRef);
}
});
useConsolePatcher({
onNewMessage: handleNewMessage,
debugMode: config.getDebugMode(),
});
useEffect(() => {
if (config) {
setGeminiMdFileCount(config.getGeminiMdFileCount());
}
}, [config]);
const getPreferredEditor = useCallback(() => {
const editorType = settings.merged.preferredEditor;
const isValidEditor = isEditorAvailable(editorType);
if (!isValidEditor) {
openEditorDialog();
return;
}
return editorType as EditorType;
}, [settings, openEditorDialog]);
const { streamingState, submitQuery, initError, pendingHistoryItems } =
useGeminiStream(
config.getGeminiClient(),
history,
addItem,
setShowHelp,
config,
setDebugMessage,
handleSlashCommand,
shellModeActive,
getPreferredEditor,
);
const { elapsedTime, currentLoadingPhrase } =
useLoadingIndicator(streamingState);
const showAutoAcceptIndicator = useAutoAcceptIndicator({ config });
const handleFinalSubmit = useCallback(
(submittedValue: string) => {
const trimmedValue = submittedValue.trim();
if (trimmedValue.length > 0) {
submitQuery(trimmedValue);
}
},
[submitQuery],
);
const logger = useLogger();
const [userMessages, setUserMessages] = useState<string[]>([]);
useEffect(() => {
const fetchUserMessages = async () => {
const pastMessagesRaw = (await logger?.getPreviousUserMessages()) || []; // Newest first
const currentSessionUserMessages = history
.filter(
(item): item is HistoryItem & { type: 'user'; text: string } =>
item.type === 'user' &&
typeof item.text === 'string' &&
item.text.trim() !== '',
)
.map((item) => item.text)
.reverse(); // Newest first, to match pastMessagesRaw sorting
// Combine, with current session messages being more recent
const combinedMessages = [
...currentSessionUserMessages,
...pastMessagesRaw,
];
// Deduplicate consecutive identical messages from the combined list (still newest first)
const deduplicatedMessages: string[] = [];
if (combinedMessages.length > 0) {
deduplicatedMessages.push(combinedMessages[0]); // Add the newest one unconditionally
for (let i = 1; i < combinedMessages.length; i++) {
if (combinedMessages[i] !== combinedMessages[i - 1]) {
deduplicatedMessages.push(combinedMessages[i]);
}
}
}
// Reverse to oldest first for useInputHistory
setUserMessages(deduplicatedMessages.reverse());
};
fetchUserMessages();
}, [history, logger]);
const isInputActive = streamingState === StreamingState.Idle && !initError;
const handleClearScreen = useCallback(() => {
clearItems();
clearConsoleMessagesState();
console.clear();
refreshStatic();
}, [clearItems, clearConsoleMessagesState, refreshStatic]);
const mainControlsRef = useRef<DOMElement>(null);
const pendingHistoryItemRef = useRef<DOMElement>(null);
useEffect(() => {
if (mainControlsRef.current) {
const fullFooterMeasurement = measureElement(mainControlsRef.current);
setFooterHeight(fullFooterMeasurement.height);
}
}, [terminalHeight, consoleMessages, showErrorDetails]);
const availableTerminalHeight = useMemo(() => {
const staticExtraHeight = /* margins and padding */ 3;
return terminalHeight - footerHeight - staticExtraHeight;
}, [terminalHeight, footerHeight]);
useEffect(() => {
if (!pendingHistoryItems.length) {
return;
}
const pendingItemDimensions = measureElement(
pendingHistoryItemRef.current!,
);
// If our pending history item happens to exceed the terminal height we will most likely need to refresh
// our static collection to ensure no duplication or tearing. This is currently working around a core bug
// in Ink which we have a PR out to fix: https://github.com/vadimdemedes/ink/pull/717
if (pendingItemDimensions.height > availableTerminalHeight) {
setStaticNeedsRefresh(true);
}
}, [pendingHistoryItems.length, availableTerminalHeight, streamingState]);
useEffect(() => {
if (streamingState === StreamingState.Idle && staticNeedsRefresh) {
setStaticNeedsRefresh(false);
refreshStatic();
}
}, [streamingState, refreshStatic, staticNeedsRefresh]);
const filteredConsoleMessages = useMemo(() => {
if (config.getDebugMode()) {
return consoleMessages;
}
return consoleMessages.filter((msg) => msg.type !== 'debug');
}, [consoleMessages, config]);
const branchName = useGitBranchName(config.getTargetDir());
const contextFileNames = useMemo(() => {
const fromSettings = settings.merged.contextFileName;
if (fromSettings) {
return Array.isArray(fromSettings) ? fromSettings : [fromSettings];
}
return getAllGeminiMdFilenames();
}, [settings.merged.contextFileName]);
if (quittingMessages) {
return (
<Box flexDirection="column" marginBottom={1}>
{quittingMessages.map((item) => (
<HistoryItemDisplay
key={item.id}
availableTerminalHeight={availableTerminalHeight}
item={item}
isPending={false}
config={config}
/>
))}
</Box>
);
}
return (
<StreamingContext.Provider value={streamingState}>
<Box flexDirection="column" marginBottom={1} width="90%">
{/*
* The Static component is an Ink intrinsic in which there can only be 1 per application.
* Because of this restriction we're hacking it slightly by having a 'header' item here to
* ensure that it's statically rendered.
*
* Background on the Static Item: Anything in the Static component is written a single time
* to the console. Think of it like doing a console.log and then never using ANSI codes to
* clear that content ever again. Effectively it has a moving frame that every time new static
* content is set it'll flush content to the terminal and move the area which it's "clearing"
* down a notch. Without Static the area which gets erased and redrawn continuously grows.
*/}
<Static
key={staticKey}
items={[
<Box flexDirection="column" key="header">
<Header terminalWidth={terminalWidth} />
<Tips config={config} />
</Box>,
...history.map((h) => (
<HistoryItemDisplay
availableTerminalHeight={availableTerminalHeight}
key={h.id}
item={h}
isPending={false}
config={config}
/>
)),
]}
>
{(item) => item}
</Static>
<Box ref={pendingHistoryItemRef}>
{pendingHistoryItems.map((item, i) => (
<HistoryItemDisplay
key={i}
availableTerminalHeight={availableTerminalHeight}
// TODO(taehykim): It seems like references to ids aren't necessary in
// HistoryItemDisplay. Refactor later. Use a fake id for now.
item={{ ...item, id: 0 }}
isPending={true}
config={config}
isFocused={!isEditorDialogOpen}
/>
))}
</Box>
{showHelp && <Help commands={slashCommands} />}
<Box flexDirection="column" ref={mainControlsRef}>
{startupWarnings.length > 0 && (
<Box
borderStyle="round"
borderColor={Colors.AccentYellow}
paddingX={1}
marginY={1}
flexDirection="column"
>
{startupWarnings.map((warning, index) => (
<Text key={index} color={Colors.AccentYellow}>
{warning}
</Text>
))}
</Box>
)}
{isThemeDialogOpen ? (
<Box flexDirection="column">
{themeError && (
<Box marginBottom={1}>
<Text color={Colors.AccentRed}>{themeError}</Text>
</Box>
)}
<ThemeDialog
onSelect={handleThemeSelect}
onHighlight={handleThemeHighlight}
settings={settings}
/>
</Box>
) : isEditorDialogOpen ? (
<Box flexDirection="column">
{editorError && (
<Box marginBottom={1}>
<Text color={Colors.AccentRed}>{editorError}</Text>
</Box>
)}
<EditorSettingsDialog
onSelect={handleEditorSelect}
settings={settings}
onExit={exitEditorDialog}
/>
</Box>
) : (
<>
<LoadingIndicator
currentLoadingPhrase={
config.getAccessibility()?.disableLoadingPhrases
? undefined
: currentLoadingPhrase
}
elapsedTime={elapsedTime}
/>
<Box
marginTop={1}
display="flex"
justifyContent="space-between"
width="100%"
>
<Box>
{process.env.GEMINI_SYSTEM_MD && (
<Text color={Colors.AccentRed}>|_| </Text>
)}
{ctrlCPressedOnce ? (
<Text color={Colors.AccentYellow}>
Press Ctrl+C again to exit.
</Text>
) : ctrlDPressedOnce ? (
<Text color={Colors.AccentYellow}>
Press Ctrl+D again to exit.
</Text>
) : (
<ContextSummaryDisplay
geminiMdFileCount={geminiMdFileCount}
contextFileNames={contextFileNames}
mcpServers={config.getMcpServers()}
showToolDescriptions={showToolDescriptions}
/>
)}
</Box>
<Box>
{showAutoAcceptIndicator !== ApprovalMode.DEFAULT &&
!shellModeActive && (
<AutoAcceptIndicator
approvalMode={showAutoAcceptIndicator}
/>
)}
{shellModeActive && <ShellModeIndicator />}
</Box>
</Box>
{showErrorDetails && (
<DetailedMessagesDisplay messages={filteredConsoleMessages} />
)}
{isInputActive && (
<InputPrompt
buffer={buffer}
inputWidth={inputWidth}
suggestionsWidth={suggestionsWidth}
onSubmit={handleFinalSubmit}
userMessages={userMessages}
onClearScreen={handleClearScreen}
config={config}
slashCommands={slashCommands}
shellModeActive={shellModeActive}
setShellModeActive={setShellModeActive}
/>
)}
</>
)}
{initError && streamingState !== StreamingState.Responding && (
<Box
borderStyle="round"
borderColor={Colors.AccentRed}
paddingX={1}
marginBottom={1}
>
{history.find(
(item) =>
item.type === 'error' && item.text?.includes(initError),
)?.text ? (
<Text color={Colors.AccentRed}>
{
history.find(
(item) =>
item.type === 'error' && item.text?.includes(initError),
)?.text
}
</Text>
) : (
<>
<Text color={Colors.AccentRed}>
Initialization Error: {initError}
</Text>
<Text color={Colors.AccentRed}>
{' '}
Please check API key and configuration.
</Text>
</>
)}
</Box>
)}
<Footer
model={config.getModel()}
targetDir={config.getTargetDir()}
debugMode={config.getDebugMode()}
branchName={branchName}
debugMessage={debugMessage}
corgiMode={corgiMode}
errorCount={errorCount}
showErrorDetails={showErrorDetails}
showMemoryUsage={
config.getDebugMode() || config.getShowMemoryUsage()
}
/>
</Box>
</Box>
</StreamingContext.Provider>
);
};