diff --git a/packages/cli/src/ui/components/AskUserDialog.tsx b/packages/cli/src/ui/components/AskUserDialog.tsx index b1af18040f..197101c346 100644 --- a/packages/cli/src/ui/components/AskUserDialog.tsx +++ b/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 = ({ @@ -207,6 +212,7 @@ const ReviewView: React.FC = ({ onSubmit, progressHeader, extraParts, + preOptionsContent, }) => { const keyMatchers = useKeyMatchers(); const unansweredCount = questions.length - Object.keys(answers).length; @@ -232,6 +238,7 @@ const ReviewView: React.FC = ({ Review your answers: + {preOptionsContent} {hasUnanswered && ( @@ -276,6 +283,7 @@ interface TextQuestionViewProps { initialAnswer?: string; progressHeader?: React.ReactNode; keyboardHints?: React.ReactNode; + preOptionsContent?: React.ReactNode; } const TextQuestionView: React.FC = ({ @@ -288,6 +296,7 @@ const TextQuestionView: React.FC = ({ initialAnswer, progressHeader, keyboardHints, + preOptionsContent, }) => { const keyMatchers = useKeyMatchers(); const isAlternateBuffer = useAlternateBuffer(); @@ -367,11 +376,14 @@ const TextQuestionView: React.FC = ({ maxWidth={availableWidth} overflowDirection="bottom" > - + + + {preOptionsContent} + @@ -496,6 +508,7 @@ interface ChoiceQuestionViewProps { initialAnswer?: string; progressHeader?: React.ReactNode; keyboardHints?: React.ReactNode; + preOptionsContent?: React.ReactNode; } const ChoiceQuestionView: React.FC = ({ @@ -508,6 +521,7 @@ const ChoiceQuestionView: React.FC = ({ initialAnswer, progressHeader, keyboardHints, + preOptionsContent, }) => { const keyMatchers = useKeyMatchers(); const isAlternateBuffer = useAlternateBuffer(); @@ -889,6 +903,7 @@ const ChoiceQuestionView: React.FC = ({ (Select all that apply) )} + {preOptionsContent} @@ -1009,6 +1024,7 @@ export const AskUserDialog: React.FC = ({ width, availableHeight: availableHeightProp, extraParts, + preOptionsContent, }) => { const keyMatchers = useKeyMatchers(); const uiState = useContext(UIStateContext); @@ -1206,6 +1222,7 @@ export const AskUserDialog: React.FC = ({ onSubmit={handleReviewSubmit} progressHeader={progressHeader} extraParts={extraParts} + preOptionsContent={preOptionsContent} /> ); @@ -1246,6 +1263,7 @@ export const AskUserDialog: React.FC = ({ initialAnswer={answers[currentQuestionIndex]} progressHeader={progressHeader} keyboardHints={keyboardHints} + preOptionsContent={preOptionsContent} /> ) : ( = ({ initialAnswer={answers[currentQuestionIndex]} progressHeader={progressHeader} keyboardHints={keyboardHints} + preOptionsContent={preOptionsContent} /> ); diff --git a/packages/cli/src/ui/components/ExitPlanModeDialog.test.tsx b/packages/cli/src/ui/components/ExitPlanModeDialog.test.tsx index f9734c4dad..a8cf5e1663 100644 --- a/packages/cli/src/ui/components/ExitPlanModeDialog.test.tsx +++ b/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 () => { diff --git a/packages/cli/src/ui/components/ExitPlanModeDialog.tsx b/packages/cli/src/ui/components/ExitPlanModeDialog.tsx index 470a6439c0..82dad6a826 100644 --- a/packages/cli/src/ui/components/ExitPlanModeDialog.tsx +++ b/packages/cli/src/ui/components/ExitPlanModeDialog.tsx @@ -230,16 +230,15 @@ export const ExitPlanModeDialog: React.FC = ({ const editHint = formatCommand(Command.OPEN_EXTERNAL_EDITOR); const extraParts: React.ReactNode[] = []; - if (diffContent) { - extraParts.push( - - Changes since previous version: - - , - ); - } extraParts.push(`${editHint} to edit plan`); + const preOptionsContent = diffContent ? ( + + Changes since previous version: + + + ) : undefined; + return ( = ({ width={width} availableHeight={availableHeight} extraParts={extraParts} + preOptionsContent={preOptionsContent} /> ); diff --git a/packages/cli/src/ui/components/__snapshots__/ExitPlanModeDialog.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/ExitPlanModeDialog.test.tsx.snap index 073c106ceb..0414ec044b 100644 --- a/packages/cli/src/ui/components/__snapshots__/ExitPlanModeDialog.test.tsx.snap +++ b/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 +" +`;