fix: serialize subagent confirmation focus to prevent concurrent input conflicts

When multiple subagents run in parallel and each triggers a confirmation
prompt, all prompts previously received keyboard focus simultaneously,
causing a single keypress to be dispatched to every active confirmation.

This change introduces a first-come-first-served focus lock mechanism:
- Track subagents with pending confirmations via a type guard
- Use a useRef-based lock so only one confirmation is focused at a time
- Automatically promote focus to the next pending subagent on resolution
- Show a waiting indicator on non-focused confirmations

Fixes #2929

Author: 思晗

packages/cli/src/ui/components/messages/ToolGroupMessage.tsx

@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { Box } from 'ink';
 import type { IndividualToolCallDisplay } from '../../types.js';
 import { ToolCallStatus } from '../../types.js';
@@ -14,6 +14,19 @@ import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
 import { theme } from '../../semantic-colors.js';
 import { SHELL_COMMAND_NAME, SHELL_NAME } from '../../constants.js';
 import { useConfig } from '../../contexts/ConfigContext.js';
+import type { AgentResultDisplay } from '@qwen-code/qwen-code-core';
+
+function isAgentWithPendingConfirmation(
+  rd: IndividualToolCallDisplay['resultDisplay'],
+): rd is AgentResultDisplay {
+  return (
+    typeof rd === 'object' &&
+    rd !== null &&
+    'type' in rd &&
+    (rd as AgentResultDisplay).type === 'task_execution' &&
+    (rd as AgentResultDisplay).pendingConfirmation !== undefined
+  );
+}
 
 interface ToolGroupMessageProps {
   groupId: number;
@@ -68,6 +81,31 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
     [toolCalls],
   );
 
+  // Determine which subagent tools currently have a pending confirmation.
+  const subagentsAwaitingApproval = useMemo(
+    () =>
+      toolCalls.filter((tc) =>
+        isAgentWithPendingConfirmation(tc.resultDisplay),
+      ),
+    [toolCalls],
+  );
+
+  // "First-come, first-served" focus lock: once a subagent's confirmation
+  // appears, it keeps keyboard focus until the user resolves it. Only then
+  // does focus move to the next pending subagent. This prevents the jarring
+  // experience of focus jumping away while the user is mid-selection.
+  const focusedSubagentRef = useRef<string | null>(null);
+
+  const stillPending = subagentsAwaitingApproval.some(
+    (tc) => tc.callId === focusedSubagentRef.current,
+  );
+  if (!stillPending) {
+    // Release stale lock and promote the next pending subagent (if any).
+    focusedSubagentRef.current = subagentsAwaitingApproval[0]?.callId ?? null;
+  }
+
+  const focusedSubagentCallId = focusedSubagentRef.current;
+
   let countToolCallsWithResults = 0;
   for (const tool of toolCalls) {
     if (tool.resultDisplay !== undefined && tool.resultDisplay !== '') {
@@ -104,6 +142,13 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
     >
       {toolCalls.map((tool) => {
         const isConfirming = toolAwaitingApproval?.callId === tool.callId;
+        // A subagent's inline confirmation should only receive keyboard focus
+        // when (1) there is no direct tool-level confirmation active, and
+        // (2) this tool currently holds the focus lock.
+        const isSubagentFocused =
+          isFocused &&
+          !toolAwaitingApproval &&
+          focusedSubagentCallId === tool.callId;
         return (
           <Box key={tool.callId} flexDirection="column" minHeight={1}>
             <Box flexDirection="row" alignItems="center">
@@ -121,6 +166,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
                 activeShellPtyId={activeShellPtyId}
                 embeddedShellFocused={embeddedShellFocused}
                 config={config}
+                isFocused={isSubagentFocused}
               />
             </Box>
             {tool.status === ToolCallStatus.Confirming &&

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -173,12 +173,14 @@ const SubagentExecutionRenderer: React.FC<{
   availableHeight?: number;
   childWidth: number;
   config: Config;
-}> = ({ data, availableHeight, childWidth, config }) => (
+  isFocused?: boolean;
+}> = ({ data, availableHeight, childWidth, config, isFocused }) => (
   <AgentExecutionDisplay
     data={data}
     availableHeight={availableHeight}
     childWidth={childWidth}
     config={config}
+    isFocused={isFocused}
   />
 );
 
@@ -248,6 +250,8 @@ export interface ToolMessageProps extends IndividualToolCallDisplay {
   activeShellPtyId?: number | null;
   embeddedShellFocused?: boolean;
   config?: Config;
+  /** Whether this tool's subagent confirmation prompt should respond to keyboard input. */
+  isFocused?: boolean;
 }
 
 export const ToolMessage: React.FC<ToolMessageProps> = ({
@@ -263,6 +267,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   embeddedShellFocused,
   ptyId,
   config,
+  isFocused,
 }) => {
   const settings = useSettings();
   const isThisShellFocused =
@@ -363,6 +368,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
                 availableHeight={availableHeight}
                 childWidth={innerWidth}
                 config={config}
+                isFocused={isFocused}
               />
             )}
             {displayRenderer.type === 'diff' && (

packages/cli/src/ui/components/subagents/runtime/AgentExecutionDisplay.tsx

@@ -24,6 +24,8 @@ export interface AgentExecutionDisplayProps {
   availableHeight?: number;
   childWidth: number;
   config: Config;
+  /** Whether this display's confirmation prompt should respond to keyboard input. */
+  isFocused?: boolean;
 }
 
 const getStatusColor = (
@@ -78,6 +80,7 @@ export const AgentExecutionDisplay: React.FC<AgentExecutionDisplayProps> = ({
   availableHeight,
   childWidth,
   config,
+  isFocused = true,
 }) => {
   const [displayMode, setDisplayMode] = React.useState<DisplayMode>('compact');
 
@@ -168,9 +171,16 @@ export const AgentExecutionDisplay: React.FC<AgentExecutionDisplayProps> = ({
             {/* Inline approval prompt when awaiting confirmation */}
             {data.pendingConfirmation && (
               <Box flexDirection="column" marginTop={1} paddingLeft={1}>
+                {!isFocused && (
+                  <Box marginBottom={0}>
+                    <Text color={theme.text.secondary} dimColor>
+                      ⏳ Waiting for other approval...
+                    </Text>
+                  </Box>
+                )}
                 <ToolConfirmationMessage
                   confirmationDetails={data.pendingConfirmation}
-                  isFocused={true}
+                  isFocused={isFocused}
                   availableTerminalHeight={availableHeight}
                   contentWidth={childWidth - 4}
                   compactMode={true}
@@ -237,10 +247,17 @@ export const AgentExecutionDisplay: React.FC<AgentExecutionDisplayProps> = ({
       {/* Inline approval prompt when awaiting confirmation */}
       {data.pendingConfirmation && (
         <Box flexDirection="column">
+          {!isFocused && (
+            <Box marginBottom={0}>
+              <Text color={theme.text.secondary} dimColor>
+                ⏳ Waiting for other approval...
+              </Text>
+            </Box>
+          )}
           <ToolConfirmationMessage
             confirmationDetails={data.pendingConfirmation}
             config={config}
-            isFocused={true}
+            isFocused={isFocused}
             availableTerminalHeight={availableHeight}
             contentWidth={childWidth - 4}
             compactMode={true}