put diff above confirmation details and create snapshot test

packages/cli/src/ui/components/AskUserDialog.tsx

@@ -191,6 +191,10 @@ interface AskUserDialogProps {
    * Custom keyboard shortcut hints (e.g., ["Ctrl+P to edit"])
    */
   extraParts?: React.ReactNode[];
+  /**
+   * Content to render before the options/input field.
+   */
+  preOptionsContent?: React.ReactNode;
 }
 
 interface ReviewViewProps {
@@ -199,6 +203,7 @@ interface ReviewViewProps {
   onSubmit: () => void;
   progressHeader?: React.ReactNode;
   extraParts?: React.ReactNode[];
+  preOptionsContent?: React.ReactNode;
 }
 
 const ReviewView: React.FC<ReviewViewProps> = ({
@@ -207,6 +212,7 @@ const ReviewView: React.FC<ReviewViewProps> = ({
   onSubmit,
   progressHeader,
   extraParts,
+  preOptionsContent,
 }) => {
   const keyMatchers = useKeyMatchers();
   const unansweredCount = questions.length - Object.keys(answers).length;
@@ -232,6 +238,7 @@ const ReviewView: React.FC<ReviewViewProps> = ({
           Review your answers:
         </Text>
       </Box>
+      {preOptionsContent}
 
       {hasUnanswered && (
         <Box marginBottom={1}>
@@ -276,6 +283,7 @@ interface TextQuestionViewProps {
   initialAnswer?: string;
   progressHeader?: React.ReactNode;
   keyboardHints?: React.ReactNode;
+  preOptionsContent?: React.ReactNode;
 }
 
 const TextQuestionView: React.FC<TextQuestionViewProps> = ({
@@ -288,6 +296,7 @@ const TextQuestionView: React.FC<TextQuestionViewProps> = ({
   initialAnswer,
   progressHeader,
   keyboardHints,
+  preOptionsContent,
 }) => {
   const keyMatchers = useKeyMatchers();
   const isAlternateBuffer = useAlternateBuffer();
@@ -367,11 +376,14 @@ const TextQuestionView: React.FC<TextQuestionViewProps> = ({
           maxWidth={availableWidth}
           overflowDirection="bottom"
         >
-          <MarkdownDisplay
-            text={autoBoldIfPlain(question.question)}
-            terminalWidth={availableWidth - DIALOG_PADDING}
-            isPending={false}
-          />
+          <Box flexDirection="column">
+            <MarkdownDisplay
+              text={autoBoldIfPlain(question.question)}
+              terminalWidth={availableWidth - DIALOG_PADDING}
+              isPending={false}
+            />
+            {preOptionsContent}
+          </Box>
         </MaxSizedBox>
       </Box>
 
@@ -496,6 +508,7 @@ interface ChoiceQuestionViewProps {
   initialAnswer?: string;
   progressHeader?: React.ReactNode;
   keyboardHints?: React.ReactNode;
+  preOptionsContent?: React.ReactNode;
 }
 
 const ChoiceQuestionView: React.FC<ChoiceQuestionViewProps> = ({
@@ -508,6 +521,7 @@ const ChoiceQuestionView: React.FC<ChoiceQuestionViewProps> = ({
   initialAnswer,
   progressHeader,
   keyboardHints,
+  preOptionsContent,
 }) => {
   const keyMatchers = useKeyMatchers();
   const isAlternateBuffer = useAlternateBuffer();
@@ -889,6 +903,7 @@ const ChoiceQuestionView: React.FC<ChoiceQuestionViewProps> = ({
                 (Select all that apply)
               </Text>
             )}
+            {preOptionsContent}
           </Box>
         </MaxSizedBox>
       </Box>
@@ -1009,6 +1024,7 @@ export const AskUserDialog: React.FC<AskUserDialogProps> = ({
   width,
   availableHeight: availableHeightProp,
   extraParts,
+  preOptionsContent,
 }) => {
   const keyMatchers = useKeyMatchers();
   const uiState = useContext(UIStateContext);
@@ -1206,6 +1222,7 @@ export const AskUserDialog: React.FC<AskUserDialogProps> = ({
           onSubmit={handleReviewSubmit}
           progressHeader={progressHeader}
           extraParts={extraParts}
+          preOptionsContent={preOptionsContent}
         />
       </Box>
     );
@@ -1246,6 +1263,7 @@ export const AskUserDialog: React.FC<AskUserDialogProps> = ({
         initialAnswer={answers[currentQuestionIndex]}
         progressHeader={progressHeader}
         keyboardHints={keyboardHints}
+        preOptionsContent={preOptionsContent}
       />
     ) : (
       <ChoiceQuestionView
@@ -1259,6 +1277,7 @@ export const AskUserDialog: React.FC<AskUserDialogProps> = ({
         initialAnswer={answers[currentQuestionIndex]}
         progressHeader={progressHeader}
         keyboardHints={keyboardHints}
+        preOptionsContent={preOptionsContent}
       />
     );
 

packages/cli/src/ui/components/ExitPlanModeDialog.test.tsx

@@ -225,6 +225,8 @@ Implement a comprehensive authentication system with multiple providers.
           expect(lastFrame()).toContain('old');
           expect(lastFrame()).toContain('new');
         });
+
+        expect(lastFrame()).toMatchSnapshot();
       });
 
       it('calls onApprove with AUTO_EDIT when first option is selected', async () => {

packages/cli/src/ui/components/ExitPlanModeDialog.tsx

@@ -230,16 +230,15 @@ export const ExitPlanModeDialog: React.FC<ExitPlanModeDialogProps> = ({
   const editHint = formatCommand(Command.OPEN_EXTERNAL_EDITOR);
 
   const extraParts: React.ReactNode[] = [];
-  if (diffContent) {
-    extraParts.push(
-      <Box key="diff" flexDirection="column" marginTop={1}>
-        <Text bold>Changes since previous version:</Text>
-        <DiffRenderer diffContent={diffContent} terminalWidth={width} />
-      </Box>,
-    );
-  }
   extraParts.push(`${editHint} to edit plan`);
 
+  const preOptionsContent = diffContent ? (
+    <Box key="diff" flexDirection="column" marginTop={1} marginBottom={1}>
+      <Text bold>Changes since previous version:</Text>
+      <DiffRenderer diffContent={diffContent} terminalWidth={width} />
+    </Box>
+  ) : undefined;
+
   return (
     <Box flexDirection="column" width={width}>
       <AskUserDialog
@@ -279,6 +278,7 @@ export const ExitPlanModeDialog: React.FC<ExitPlanModeDialogProps> = ({
         width={width}
         availableHeight={availableHeight}
         extraParts={extraParts}
+        preOptionsContent={preOptionsContent}
       />
     </Box>
   );

packages/cli/src/ui/components/__snapshots__/ExitPlanModeDialog.test.tsx.snap

@@ -103,6 +103,38 @@ Files to Modify
  - src/index.ts - Add auth middleware
  - src/config.ts - Add auth configuration options
 
+● 1.  Yes, automatically accept edits                                           
+      Approves plan and allows tools to run automatically                       
+  2.  Yes, manually accept edits
+      Approves plan but requires confirmation for each tool
+  3.  Type your feedback...
+
+Enter to select · ↑/↓ to navigate · Ctrl+X to edit plan · Esc to cancel
+"
+`;
+
+exports[`ExitPlanModeDialog > useAlternateBuffer: false > renders diffContent if provided 1`] = `
+"Overview
+
+Add user authentication to the CLI application.
+
+Implementation Steps
+
+ 1. Create src/auth/AuthService.ts with login/logout methods
+ 2. Add session storage in src/storage/SessionStore.ts
+ 3. Update src/commands/index.ts to check auth status
+ 4. Add tests in src/auth/__tests__/
+
+Files to Modify
+
+ - src/index.ts - Add auth middleware
+ - src/config.ts - Add auth configuration options
+
+Changes since previous version:
+1 - old
+1 + new
+
+
 ● 1.  Yes, automatically accept edits                                           
       Approves plan and allows tools to run automatically                       
   2.  Yes, manually accept edits
@@ -246,3 +278,35 @@ Files to Modify
 Enter to select · ↑/↓ to navigate · Ctrl+X to edit plan · Esc to cancel
 "
 `;
+
+exports[`ExitPlanModeDialog > useAlternateBuffer: true > renders diffContent if provided 1`] = `
+"Overview
+
+Add user authentication to the CLI application.
+
+Implementation Steps
+
+ 1. Create src/auth/AuthService.ts with login/logout methods
+ 2. Add session storage in src/storage/SessionStore.ts
+ 3. Update src/commands/index.ts to check auth status
+ 4. Add tests in src/auth/__tests__/
+
+Files to Modify
+
+ - src/index.ts - Add auth middleware
+ - src/config.ts - Add auth configuration options
+
+Changes since previous version:
+1 - old
+1 + new
+
+
+● 1.  Yes, automatically accept edits                                           
+      Approves plan and allows tools to run automatically                       
+  2.  Yes, manually accept edits
+      Approves plan but requires confirmation for each tool
+  3.  Type your feedback...
+
+Enter to select · ↑/↓ to navigate · Ctrl+X to edit plan · Esc to cancel
+"
+`;