feat(cli): Moves tool confirmations to a queue UX (#17276)

Co-authored-by: Christian Gunderman <gundermanc@google.com>

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

@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { Box, Text } from 'ink';
 import { DiffRenderer } from './DiffRenderer.js';
 import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
@@ -58,14 +58,17 @@ export const ToolConfirmationMessage: React.FC<
   const allowPermanentApproval =
     settings.merged.security.enablePermanentToolApproval;
 
-  const handleConfirm = (outcome: ToolConfirmationOutcome) => {
-    void confirm(callId, outcome).catch((error) => {
-      debugLogger.error(
-        `Failed to handle tool confirmation for ${callId}:`,
-        error,
-      );
-    });
-  };
+  const handleConfirm = useCallback(
+    (outcome: ToolConfirmationOutcome) => {
+      void confirm(callId, outcome).catch((error) => {
+        debugLogger.error(
+          `Failed to handle tool confirmation for ${callId}:`,
+          error,
+        );
+      });
+    },
+    [confirm, callId],
+  );
 
   const isTrustedFolder = config.isTrustedFolder();
 
@@ -79,16 +82,16 @@ export const ToolConfirmationMessage: React.FC<
     { isActive: isFocused },
   );
 
-  const handleSelect = (item: ToolConfirmationOutcome) => handleConfirm(item);
+  const handleSelect = useCallback(
+    (item: ToolConfirmationOutcome) => handleConfirm(item),
+    [handleConfirm],
+  );
 
-  const { question, bodyContent, options } = useMemo(() => {
-    let bodyContent: React.ReactNode | null = null;
-    let question = '';
+  const getOptions = useCallback(() => {
     const options: Array<RadioSelectItem<ToolConfirmationOutcome>> = [];
 
     if (confirmationDetails.type === 'edit') {
       if (!confirmationDetails.isModifying) {
-        question = `Apply this change?`;
         options.push({
           label: 'Allow once',
           value: ToolConfirmationOutcome.ProceedOnce,
@@ -125,13 +128,6 @@ export const ToolConfirmationMessage: React.FC<
         });
       }
     } else if (confirmationDetails.type === 'exec') {
-      const executionProps = confirmationDetails;
-
-      if (executionProps.commands && executionProps.commands.length > 1) {
-        question = `Allow execution of ${executionProps.commands.length} commands?`;
-      } else {
-        question = `Allow execution of: '${executionProps.rootCommand}'?`;
-      }
       options.push({
         label: 'Allow once',
         value: ToolConfirmationOutcome.ProceedOnce,
@@ -157,7 +153,6 @@ export const ToolConfirmationMessage: React.FC<
         key: 'No, suggest changes (esc)',
       });
     } else if (confirmationDetails.type === 'info') {
-      question = `Do you want to proceed?`;
       options.push({
         label: 'Allow once',
         value: ToolConfirmationOutcome.ProceedOnce,
@@ -184,8 +179,6 @@ export const ToolConfirmationMessage: React.FC<
       });
     } else {
       // mcp tool confirmation
-      const mcpProps = confirmationDetails;
-      question = `Allow execution of MCP tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"?`;
       options.push({
         label: 'Allow once',
         value: ToolConfirmationOutcome.ProceedOnce,
@@ -216,33 +209,56 @@ export const ToolConfirmationMessage: React.FC<
         key: 'No, suggest changes (esc)',
       });
     }
+    return options;
+  }, [confirmationDetails, isTrustedFolder, allowPermanentApproval, config]);
 
-    function availableBodyContentHeight() {
-      if (options.length === 0) {
-        // Should not happen if we populated options correctly above for all types
-        // except when isModifying is true, but in that case we don't call this because we don't enter the if block for it.
-        return undefined;
+  const availableBodyContentHeight = useCallback(() => {
+    if (availableTerminalHeight === undefined) {
+      return undefined;
+    }
+
+    // Calculate the vertical space (in lines) consumed by UI elements
+    // surrounding the main body content.
+    const PADDING_OUTER_Y = 2; // Main container has `padding={1}` (top & bottom).
+    const MARGIN_BODY_BOTTOM = 1; // margin on the body container.
+    const HEIGHT_QUESTION = 1; // The question text is one line.
+    const MARGIN_QUESTION_BOTTOM = 1; // Margin on the question container.
+
+    const optionsCount = getOptions().length;
+
+    const surroundingElementsHeight =
+      PADDING_OUTER_Y +
+      MARGIN_BODY_BOTTOM +
+      HEIGHT_QUESTION +
+      MARGIN_QUESTION_BOTTOM +
+      optionsCount;
+
+    return Math.max(availableTerminalHeight - surroundingElementsHeight, 1);
+  }, [availableTerminalHeight, getOptions]);
+
+  const { question, bodyContent, options } = useMemo(() => {
+    let bodyContent: React.ReactNode | null = null;
+    let question = '';
+    const options = getOptions();
+
+    if (confirmationDetails.type === 'edit') {
+      if (!confirmationDetails.isModifying) {
+        question = `Apply this change?`;
       }
+    } else if (confirmationDetails.type === 'exec') {
+      const executionProps = confirmationDetails;
 
-      if (availableTerminalHeight === undefined) {
-        return undefined;
+      if (executionProps.commands && executionProps.commands.length > 1) {
+        question = `Allow execution of ${executionProps.commands.length} commands?`;
+      } else {
+        question = `Allow execution of: '${executionProps.rootCommand}'?`;
       }
-
-      // Calculate the vertical space (in lines) consumed by UI elements
-      // surrounding the main body content.
-      const PADDING_OUTER_Y = 2; // Main container has `padding={1}` (top & bottom).
-      const MARGIN_BODY_BOTTOM = 1; // margin on the body container.
-      const HEIGHT_QUESTION = 1; // The question text is one line.
-      const MARGIN_QUESTION_BOTTOM = 1; // Margin on the question container.
-      const HEIGHT_OPTIONS = options.length; // Each option in the radio select takes one line.
-
-      const surroundingElementsHeight =
-        PADDING_OUTER_Y +
-        MARGIN_BODY_BOTTOM +
-        HEIGHT_QUESTION +
-        MARGIN_QUESTION_BOTTOM +
-        HEIGHT_OPTIONS;
-      return Math.max(availableTerminalHeight - surroundingElementsHeight, 1);
+    } else if (confirmationDetails.type === 'info') {
+      question = `Do you want to proceed?`;
+    } else {
+      // mcp tool confirmation
+      const mcpProps = confirmationDetails;
+      question = `Allow execution of MCP tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"?`;
     }
 
     if (confirmationDetails.type === 'edit') {
@@ -376,11 +392,9 @@ export const ToolConfirmationMessage: React.FC<
     return { question, bodyContent, options };
   }, [
     confirmationDetails,
-    isTrustedFolder,
-    config,
-    availableTerminalHeight,
+    getOptions,
+    availableBodyContentHeight,
     terminalWidth,
-    allowPermanentApproval,
   ]);
 
   if (confirmationDetails.type === 'edit') {
@@ -409,7 +423,13 @@ export const ToolConfirmationMessage: React.FC<
       {/* Body Content (Diff Renderer or Command Info) */}
       {/* No separate context display here anymore for edits */}
       <Box flexGrow={1} flexShrink={1} overflow="hidden" marginBottom={1}>
-        {bodyContent}
+        <MaxSizedBox
+          maxHeight={availableBodyContentHeight()}
+          maxWidth={terminalWidth}
+          overflowDirection="top"
+        >
+          {bodyContent}
+        </MaxSizedBox>
       </Box>
 
       {/* Confirmation Question */}