plan widget fixes (#312631)

* plan widget fixes

* Update extensions/copilot/src/extension/chatSessions/copilotcli/node/exitPlanModeHandler.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update plan review action label tests to match new labels

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: justschen

extensions/copilot/src/extension/chatSessions/copilotcli/node/exitPlanModeHandler.ts

@@ -17,10 +17,10 @@ import { IToolsService } from '../../../tools/common/toolsService';
 type ExitPlanModeActionType = Parameters<NonNullable<SessionOptions['onExitPlanMode']>>[0]['actions'][number];
 
 const actionDescriptions: Record<ExitPlanModeActionType, { label: string; description: string }> = {
-	'autopilot': { label: 'Autopilot', description: l10n.t('Auto-approve all tool calls and continue until the task is done') },
-	'interactive': { label: 'Approve and Implement', description: l10n.t('Let the agent continue in interactive mode, asking for input and approval for each action.') },
-	'exit_only': { label: 'Approve', description: l10n.t('Approve plan, but do not execute the plan. I will execute the plan myself.') },
-	'autopilot_fleet': { label: 'Autopilot Fleet', description: l10n.t('Auto-approve all tool calls, including fleet management actions, and continue until the task is done.') },
+	'autopilot': { label: l10n.t("Implement with Autopilot"), description: l10n.t('Auto-approve all tool calls and continue until the task is done.') },
+	'autopilot_fleet': { label: l10n.t("Implement with Autopilot Fleet"), description: l10n.t('Auto-approve all tool calls, including fleet management actions, and continue until the task is done.') },
+	'interactive': { label: l10n.t("Implement Plan"), description: l10n.t('Implement the plan, asking for input and approval for each action.') },
+	'exit_only': { label: l10n.t("Approve Plan Only"), description: l10n.t('Approve the plan without executing it. I will implement it myself.') },
 };
 
 /**

extensions/copilot/src/extension/chatSessions/copilotcli/node/test/exitPlanModeHandler.spec.ts

@@ -197,43 +197,43 @@ describe('handleExitPlanMode', () => {
 		});
 
 		it('returns approved with selected action mapped from label', async () => {
-			toolService.setResult({ rejected: false, action: 'Autopilot' });
+			toolService.setResult({ rejected: false, action: 'Implement with Autopilot' });
 			const event = makeEvent();
 			const result = await handleExitPlanMode(event, session as unknown as Session, 'interactive', FAKE_TOKEN, workspaceService, logService, toolService, CANCEL_TOKEN);
 			expect(result).toEqual<ExitPlanModeResponse>({ approved: true, selectedAction: 'autopilot', autoApproveEdits: undefined });
 		});
 
-		it('maps "Approve and exit" label to exit_only', async () => {
-			toolService.setResult({ rejected: false, action: 'Approve' });
+		it('maps "Approve Plan Only" label to exit_only', async () => {
+			toolService.setResult({ rejected: false, action: 'Approve Plan Only' });
 			const event = makeEvent();
 			const result = await handleExitPlanMode(event, session as unknown as Session, 'interactive', FAKE_TOKEN, workspaceService, logService, toolService, CANCEL_TOKEN);
 			expect(result.selectedAction).toBe('exit_only');
 		});
 
 		it('sets autoApproveEdits when permissionLevel is autoApprove', async () => {
-			toolService.setResult({ rejected: false, action: 'Interactive' });
+			toolService.setResult({ rejected: false, action: 'Implement Plan' });
 			const event = makeEvent();
 			const result = await handleExitPlanMode(event, session as unknown as Session, 'autoApprove', FAKE_TOKEN, workspaceService, logService, toolService, CANCEL_TOKEN);
 			expect(result.autoApproveEdits).toBe(true);
 		});
 
 		it('does not set autoApproveEdits when permissionLevel is interactive', async () => {
-			toolService.setResult({ rejected: false, action: 'Interactive' });
+			toolService.setResult({ rejected: false, action: 'Implement Plan' });
 			const event = makeEvent();
 			const result = await handleExitPlanMode(event, session as unknown as Session, 'interactive', FAKE_TOKEN, workspaceService, logService, toolService, CANCEL_TOKEN);
 			expect(result.autoApproveEdits).toBeUndefined();
 		});
 
 		it('passes actions with labels and recommended flag to tool', async () => {
-			toolService.setResult({ rejected: false, action: 'Interactive' });
+			toolService.setResult({ rejected: false, action: 'Implement Plan' });
 			const event = makeEvent({ actions: ['autopilot', 'exit_only'], recommendedAction: 'exit_only' });
 			await handleExitPlanMode(event, session as unknown as Session, 'interactive', FAKE_TOKEN, workspaceService, logService, toolService, CANCEL_TOKEN);
 			const call = toolService.invokeToolCalls[0];
 			expect(call.name).toBe('vscode_reviewPlan');
 			const input = call.input as any;
 			expect(input.actions).toHaveLength(2);
-			expect(input.actions[0]).toEqual(expect.objectContaining({ label: 'Autopilot', default: false }));
-			expect(input.actions[1]).toEqual(expect.objectContaining({ label: 'Approve', default: true }));
+			expect(input.actions[0]).toEqual(expect.objectContaining({ label: 'Implement with Autopilot', default: false }));
+			expect(input.actions[1]).toEqual(expect.objectContaining({ label: 'Approve Plan Only', default: true }));
 		});
 
 		it('includes plan path in tool input when plan path exists', async () => {

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatPlanReviewPart.ts

@@ -322,24 +322,28 @@ export class ChatPlanReviewPart extends Disposable implements IChatContentPart {
 		}
 		this._buttonStore.add(approveButton.onDidClick(() => this.submitApproval(primary)));
 
+		// Reject button (grey secondary) immediately after the approve button
+		// so the primary Approve / Reject pair stays grouped together —
+		// omitted in the collapsed title bar (parity with
+		// chatToolConfirmationCarouselPart which only surfaces the primary
+		// action when collapsed).
+		if (includeReject) {
+			const rejectButton = new Button(container, { ...defaultButtonStyles, secondary: true });
+			rejectButton.label = localize('chat.planReview.reject', 'Reject');
+			this._buttonStore.add(rejectButton);
+			this._buttonStore.add(rejectButton.onDidClick(() => this.submitRejection()));
+		}
+
 		// Provide Feedback button (grey secondary) — shown only when feedback
-		// is enabled and we are not in collapsed mode.
+		// is enabled and we are not in collapsed mode. Right-aligned via CSS
+		// so the primary Approve / Reject pair stays grouped on the left.
 		if (this.review.canProvideFeedback && includeReject) {
 			const feedbackButton = new Button(container, { ...defaultButtonStyles, secondary: true });
+			feedbackButton.element.classList.add('chat-plan-review-feedback-button');
 			feedbackButton.label = localize('chat.planReview.provideFeedback', 'Provide Feedback');
 			this._buttonStore.add(feedbackButton);
 			this._buttonStore.add(feedbackButton.onDidClick(() => this.enterFeedbackMode()));
 		}
-
-		// Reject button (grey secondary) after the approve button — omitted in
-		// the collapsed title bar (parity with chatToolConfirmationCarouselPart
-		// which only surfaces the primary action when collapsed).
-		if (includeReject) {
-			const rejectButton = new Button(container, { ...defaultButtonStyles, secondary: true });
-			rejectButton.label = localize('chat.planReview.reject', 'Reject');
-			this._buttonStore.add(rejectButton);
-			this._buttonStore.add(rejectButton.onDidClick(() => this.submitRejection()));
-		}
 	}
 
 	private toggleCollapsed(): void {

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatPlanReview.css

@@ -273,6 +273,10 @@
 	align-items: center;
 }
 
+.interactive-session .chat-plan-review-container > .chat-confirmation-widget2.chat-plan-review > .chat-confirmation-widget-buttons.chat-plan-review-footer .chat-buttons .monaco-button.chat-plan-review-feedback-button {
+	margin-left: auto;
+}
+
 /* ---------- Hidden helper ---------- */
 .interactive-session .chat-plan-review-container .monaco-button.chat-plan-review-hidden {
 	display: none;