From f5ee3df219c2be1ea827f9fcd70ec1f274f5cfb5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 26 Aug 2025 12:00:12 +0000
Subject: [PATCH] Fix CLI interactivity issue by eliminating multiple
 useKeypress hook conflicts

Co-authored-by: pomelo-nwu <10703060+pomelo-nwu@users.noreply.github.com>
---
 .../ui/components/ShellConfirmationDialog.tsx | 21 +++++++++----------
 .../messages/ToolConfirmationMessage.tsx      | 16 +++++---------
 .../components/shared/RadioButtonSelect.tsx   | 18 ++++++++++++++++
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/packages/cli/src/ui/components/ShellConfirmationDialog.tsx b/packages/cli/src/ui/components/ShellConfirmationDialog.tsx
index 3d994f0d..8b686218 100644
--- a/packages/cli/src/ui/components/ShellConfirmationDialog.tsx
+++ b/packages/cli/src/ui/components/ShellConfirmationDialog.tsx
@@ -8,7 +8,6 @@ import { ToolConfirmationOutcome } from '@qwen-code/qwen-code-core';
 import { Box, Text } from 'ink';
 import React from 'react';
 import { Colors } from '../colors.js';
-import { useKeypress } from '../hooks/useKeypress.js';
 import {
   RadioButtonSelect,
   RadioSelectItem,
@@ -31,15 +30,6 @@ export const ShellConfirmationDialog: React.FC<
 > = ({ request }) => {
   const { commands, onConfirm } = request;
 
-  useKeypress(
-    (key) => {
-      if (key.name === 'escape') {
-        onConfirm(ToolConfirmationOutcome.Cancel);
-      }
-    },
-    { isActive: true },
-  );
-
   const handleSelect = (item: ToolConfirmationOutcome) => {
     if (item === ToolConfirmationOutcome.Cancel) {
       onConfirm(item);
@@ -50,6 +40,10 @@ export const ShellConfirmationDialog: React.FC<
     }
   };
 
+  const handleEscape = () => {
+    onConfirm(ToolConfirmationOutcome.Cancel);
+  };
+
   const options: Array<RadioSelectItem<ToolConfirmationOutcome>> = [
     {
       label: 'Yes, allow once',
@@ -96,7 +90,12 @@ export const ShellConfirmationDialog: React.FC<
         <Text>Do you want to proceed?</Text>
       </Box>
 
-      <RadioButtonSelect items={options} onSelect={handleSelect} isFocused />
+      <RadioButtonSelect 
+        items={options} 
+        onSelect={handleSelect} 
+        onEscape={handleEscape}
+        isFocused 
+      />
     </Box>
   );
 };
diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
index 0f9c094f..951cb3ef 100644
--- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
@@ -20,7 +20,6 @@ import {
   RadioSelectItem,
 } from '../shared/RadioButtonSelect.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
-import { useKeypress } from '../../hooks/useKeypress.js';
 
 export interface ToolConfirmationMessageProps {
   confirmationDetails: ToolCallConfirmationDetails;
@@ -57,18 +56,11 @@ export const ToolConfirmationMessage: React.FC<
     onConfirm(outcome);
   };
 
-  useKeypress(
-    (key) => {
-      if (!isFocused) return;
-      if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
-        handleConfirm(ToolConfirmationOutcome.Cancel);
-      }
-    },
-    { isActive: isFocused },
-  );
-
   const handleSelect = (item: ToolConfirmationOutcome) => handleConfirm(item);
 
+  const handleEscape = () => handleConfirm(ToolConfirmationOutcome.Cancel);
+  const handleCancel = () => handleConfirm(ToolConfirmationOutcome.Cancel);
+
   let bodyContent: React.ReactNode | null = null; // Removed contextDisplay here
   let question: string;
 
@@ -283,6 +275,8 @@ export const ToolConfirmationMessage: React.FC<
         <RadioButtonSelect
           items={options}
           onSelect={handleSelect}
+          onEscape={handleEscape}
+          onCancel={handleCancel}
           isFocused={isFocused}
         />
       </Box>
diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
index 511d3847..dd2f976a 100644
--- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
@@ -34,6 +34,10 @@ export interface RadioButtonSelectProps<T> {
   onSelect: (value: T) => void;
   /** Function called when an item is highlighted. Receives the `value` of the selected item. */
   onHighlight?: (value: T) => void;
+  /** Function called when escape key is pressed. */
+  onEscape?: () => void;
+  /** Function called when Ctrl+C is pressed. */
+  onCancel?: () => void;
   /** Whether this select input is currently focused and should respond to input. */
   isFocused?: boolean;
   /** Whether to show the scroll arrows. */
@@ -55,6 +59,8 @@ export function RadioButtonSelect<T>({
   initialIndex = 0,
   onSelect,
   onHighlight,
+  onEscape,
+  onCancel,
   isFocused,
   showScrollArrows = false,
   maxItemsToShow = 10,
@@ -91,6 +97,18 @@ export function RadioButtonSelect<T>({
       const { sequence, name } = key;
       const isNumeric = showNumbers && /^[0-9]$/.test(sequence);
 
+      // Handle escape key
+      if (name === 'escape') {
+        onEscape?.();
+        return;
+      }
+
+      // Handle Ctrl+C
+      if (key.ctrl && name === 'c') {
+        onCancel?.();
+        return;
+      }
+
       // Any key press that is not a digit should clear the number input buffer.
       if (!isNumeric && numberInputTimer.current) {
         clearTimeout(numberInputTimer.current);