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 { 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(() => { React.useEffect(() => {
logEvent('tengu_bypass_permissions_mode_dialog_shown', {}); logEvent('tengu_bypass_permissions_mode_dialog_shown', {});
}, []); }, []);
@@ -27,16 +39,20 @@ export function BypassPermissionsModeDialog({ onAccept }: Props): React.ReactNod
break; break;
} }
case 'decline': { case 'decline': {
gracefulShutdownSync(1); setPendingExitCode(1);
break; break;
} }
} }
} }
const handleEscape = useCallback(() => { const handleEscape = useCallback(() => {
gracefulShutdownSync(0); setPendingExitCode(0);
}, []); }, []);
if (pendingExitCode !== null) {
return null;
}
return ( return (
<Dialog title="WARNING: Claude Code running in Bypass Permissions mode" color="error" onCancel={handleEscape}> <Dialog title="WARNING: Claude Code running in Bypass Permissions mode" color="error" onCancel={handleEscape}>
<Box flexDirection="column" gap={1}> <Box flexDirection="column" gap={1}>

View File

@@ -10,21 +10,37 @@ type Props = {
}; };
export function DevChannelsDialog({ channels, onAccept }: Props): React.ReactNode { 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') { function onChange(value: 'accept' | 'exit') {
switch (value) { switch (value) {
case 'accept': case 'accept':
onAccept(); onAccept();
break; break;
case 'exit': case 'exit':
gracefulShutdownSync(1); setPendingExitCode(1);
break; break;
} }
} }
const handleEscape = useCallback(() => { const handleEscape = useCallback(() => {
gracefulShutdownSync(0); setPendingExitCode(0);
}, []); }, []);
if (pendingExitCode !== null) {
return null;
}
return ( return (
<Dialog title="WARNING: Loading development channels" color="error" onCancel={handleEscape}> <Dialog title="WARNING: Loading development channels" color="error" onCancel={handleEscape}>
<Box flexDirection="column" gap={1}> <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 hasAnyBashExecution = bashSettingSources.length > 0 || hasSlashCommandBash || hasSkillsBash;
const hasTrustDialogAccepted = checkHasTrustDialogAccepted(); 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(() => { React.useEffect(() => {
const isHomeDir = homedir() === getCwd(); const isHomeDir = homedir() === getCwd();
@@ -107,7 +122,12 @@ export function TrustDialog({ onDone, commands }: Props): React.ReactNode {
function onChange(value: 'enable_all' | 'exit') { function onChange(value: 'enable_all' | 'exit') {
if (value === '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; return;
} }
@@ -151,17 +171,23 @@ export function TrustDialog({ onDone, commands }: Props): React.ReactNode {
// so the default would hang the await forever. With keybinding // so the default would hang the await forever. With keybinding
// customization enabled, the chokidar watcher (persistent: true) keeps the // customization enabled, the chokidar watcher (persistent: true) keeps the
// event loop alive and the process freezes. Explicitly exit 1 like "No". // 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 // Use configurable keybinding for ESC to cancel/exit
useKeybinding( useKeybinding(
'confirm:no', 'confirm:no',
() => { () => {
gracefulShutdownSync(0); setPendingExitCode(0);
}, },
{ context: 'Confirmation' }, { 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. // Automatically resolve the trust dialog if there is nothing to be shown.
if (hasTrustDialogAccepted) { if (hasTrustDialogAccepted) {
setTimeout(onDone); setTimeout(onDone);