feat(plan): add exit_plan_mode ui and prompt (#18162)

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

@@ -34,6 +34,7 @@ import {
   REDIRECTION_WARNING_TIP_TEXT,
 } from '../../textConstants.js';
 import { AskUserDialog } from '../AskUserDialog.js';
+import { ExitPlanModeDialog } from '../ExitPlanModeDialog.js';
 
 export interface ToolConfirmationMessageProps {
   callId: string;
@@ -62,7 +63,9 @@ export const ToolConfirmationMessage: React.FC<
   const allowPermanentApproval =
     settings.merged.security.enablePermanentToolApproval;
 
-  const handlesOwnUI = confirmationDetails.type === 'ask_user';
+  const handlesOwnUI =
+    confirmationDetails.type === 'ask_user' ||
+    confirmationDetails.type === 'exit_plan_mode';
   const isTrustedFolder = config.isTrustedFolder();
 
   const handleConfirm = useCallback(
@@ -277,6 +280,32 @@ export const ToolConfirmationMessage: React.FC<
       return { question: '', bodyContent, options: [] };
     }
 
+    if (confirmationDetails.type === 'exit_plan_mode') {
+      bodyContent = (
+        <ExitPlanModeDialog
+          planPath={confirmationDetails.planPath}
+          onApprove={(approvalMode) => {
+            handleConfirm(ToolConfirmationOutcome.ProceedOnce, {
+              approved: true,
+              approvalMode,
+            });
+          }}
+          onFeedback={(feedback) => {
+            handleConfirm(ToolConfirmationOutcome.ProceedOnce, {
+              approved: false,
+              feedback,
+            });
+          }}
+          onCancel={() => {
+            handleConfirm(ToolConfirmationOutcome.Cancel);
+          }}
+          width={terminalWidth}
+          availableHeight={availableBodyContentHeight()}
+        />
+      );
+      return { question: '', bodyContent, options: [] };
+    }
+
     if (confirmationDetails.type === 'edit') {
       if (!confirmationDetails.isModifying) {
         question = `Apply this change?`;