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:
claude-code-best
2026-05-22 22:25:51 +08:00
parent ed61932748
commit 6dd378bf15
3 changed files with 65 additions and 7 deletions

View File

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

View File

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

View File

@@ -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);