mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-15 12:55:51 +00:00
fix: 退出启动对话框时终端残留一行内容
gracefulShutdownSync 启动异步 shutdown 后同步返回,React 立即 重新渲染组件,与 cleanupTerminalModes() 中的 Ink unmount 产生 竞态条件,导致退出后终端残留对话框内容。 修复方案:引入 pendingExitCode state,退出路径先清空画面 (渲染 null),在 useEffect 中延迟到下一个 tick 再调用 gracefulShutdownSync,确保 Ink 在终端清理前已完成空帧刷新。 影响三个启动对话框:TrustDialog、BypassPermissionsModeDialog、 DevChannelsDialog。 Co-Authored-By: glm-5.1 <zai-org@claude-code-best.win>
This commit is contained in:
@@ -11,6 +11,18 @@ type Props = {
|
||||
};
|
||||
|
||||
export function BypassPermissionsModeDialog({ onAccept }: Props): React.ReactNode {
|
||||
const [pendingExitCode, setPendingExitCode] = React.useState<number | null>(null);
|
||||
|
||||
// Clear screen before shutdown so residual dialog content doesn't leak
|
||||
// to the terminal. Deferred to next tick so Ink flushes the null render.
|
||||
React.useEffect(() => {
|
||||
if (pendingExitCode !== null) {
|
||||
const code = pendingExitCode;
|
||||
const timer = setTimeout(() => gracefulShutdownSync(code));
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [pendingExitCode]);
|
||||
|
||||
React.useEffect(() => {
|
||||
logEvent('tengu_bypass_permissions_mode_dialog_shown', {});
|
||||
}, []);
|
||||
@@ -27,16 +39,20 @@ export function BypassPermissionsModeDialog({ onAccept }: Props): React.ReactNod
|
||||
break;
|
||||
}
|
||||
case 'decline': {
|
||||
gracefulShutdownSync(1);
|
||||
setPendingExitCode(1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = useCallback(() => {
|
||||
gracefulShutdownSync(0);
|
||||
setPendingExitCode(0);
|
||||
}, []);
|
||||
|
||||
if (pendingExitCode !== null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog title="WARNING: Claude Code running in Bypass Permissions mode" color="error" onCancel={handleEscape}>
|
||||
<Box flexDirection="column" gap={1}>
|
||||
|
||||
@@ -10,21 +10,37 @@ type Props = {
|
||||
};
|
||||
|
||||
export function DevChannelsDialog({ channels, onAccept }: Props): React.ReactNode {
|
||||
const [pendingExitCode, setPendingExitCode] = React.useState<number | null>(null);
|
||||
|
||||
// Clear screen before shutdown so residual dialog content doesn't leak
|
||||
// to the terminal. Deferred to next tick so Ink flushes the null render.
|
||||
React.useEffect(() => {
|
||||
if (pendingExitCode !== null) {
|
||||
const code = pendingExitCode;
|
||||
const timer = setTimeout(() => gracefulShutdownSync(code));
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [pendingExitCode]);
|
||||
|
||||
function onChange(value: 'accept' | 'exit') {
|
||||
switch (value) {
|
||||
case 'accept':
|
||||
onAccept();
|
||||
break;
|
||||
case 'exit':
|
||||
gracefulShutdownSync(1);
|
||||
setPendingExitCode(1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = useCallback(() => {
|
||||
gracefulShutdownSync(0);
|
||||
setPendingExitCode(0);
|
||||
}, []);
|
||||
|
||||
if (pendingExitCode !== null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog title="WARNING: Loading development channels" color="error" onCancel={handleEscape}>
|
||||
<Box flexDirection="column" gap={1}>
|
||||
|
||||
@@ -80,6 +80,21 @@ export function TrustDialog({ onDone, commands }: Props): React.ReactNode {
|
||||
const hasAnyBashExecution = bashSettingSources.length > 0 || hasSlashCommandBash || hasSkillsBash;
|
||||
|
||||
const hasTrustDialogAccepted = checkHasTrustDialogAccepted();
|
||||
const [pendingExitCode, setPendingExitCode] = React.useState<number | null>(null);
|
||||
|
||||
// When a non-null exit code is set, render null (clear screen) first,
|
||||
// then trigger shutdown in the next tick so Ink has time to flush
|
||||
// the empty frame before cleanupTerminalModes() unmounts and exits
|
||||
// the alt screen. Without this deferral, gracefulShutdownSync starts
|
||||
// async cleanup immediately after React commit, racing the reconciler
|
||||
// and leaving residual TrustDialog output on the terminal.
|
||||
React.useEffect(() => {
|
||||
if (pendingExitCode !== null) {
|
||||
const code = pendingExitCode;
|
||||
const timer = setTimeout(() => gracefulShutdownSync(code));
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [pendingExitCode]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const isHomeDir = homedir() === getCwd();
|
||||
@@ -107,7 +122,12 @@ export function TrustDialog({ onDone, commands }: Props): React.ReactNode {
|
||||
|
||||
function onChange(value: 'enable_all' | 'exit') {
|
||||
if (value === 'exit') {
|
||||
gracefulShutdownSync(1);
|
||||
// Set pendingExitCode to clear the screen before triggering shutdown.
|
||||
// The useEffect above defers gracefulShutdownSync to the next tick
|
||||
// so Ink can flush the empty frame first — otherwise
|
||||
// cleanupTerminalModes races React's re-render and leaves
|
||||
// residual TrustDialog content on the terminal.
|
||||
setPendingExitCode(1);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -151,17 +171,23 @@ export function TrustDialog({ onDone, commands }: Props): React.ReactNode {
|
||||
// so the default would hang the await forever. With keybinding
|
||||
// customization enabled, the chokidar watcher (persistent: true) keeps the
|
||||
// event loop alive and the process freezes. Explicitly exit 1 like "No".
|
||||
const exitState = useExitOnCtrlCDWithKeybindings(() => gracefulShutdownSync(1));
|
||||
const exitState = useExitOnCtrlCDWithKeybindings(() => setPendingExitCode(1));
|
||||
|
||||
// Use configurable keybinding for ESC to cancel/exit
|
||||
useKeybinding(
|
||||
'confirm:no',
|
||||
() => {
|
||||
gracefulShutdownSync(0);
|
||||
setPendingExitCode(0);
|
||||
},
|
||||
{ context: 'Confirmation' },
|
||||
);
|
||||
|
||||
// When pendingExitCode is set, render nothing so the screen is cleared
|
||||
// before shutdown cleans up the alt screen. See the useEffect above.
|
||||
if (pendingExitCode !== null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Automatically resolve the trust dialog if there is nothing to be shown.
|
||||
if (hasTrustDialogAccepted) {
|
||||
setTimeout(onDone);
|
||||
|
||||
Reference in New Issue
Block a user