issue #685 - point 8 - Allow disabling the follow-up auto-select timer

webview-ui/eslint-suppressions.json

@@ -0,0 +1 @@
+{}

webview-ui/src/components/chat/FollowUpSuggest.tsx

@@ -36,14 +36,15 @@ export const FollowUpSuggest = ({
 	// Start countdown timer when auto-approval is enabled for follow-up questions
 	useEffect(() => {
 		// Only start countdown if auto-approval is enabled for follow-up questions and no suggestion has been selected
-		// Also stop countdown if the question has been answered or auto-approval is paused (user is typing)
+		// Also stop countdown if the question has been answered or auto-approval is paused (user is typing) or timer is disabled (set to 0)
 		if (
 			autoApprovalEnabled &&
 			alwaysAllowFollowupQuestions &&
 			suggestions.length > 0 &&
 			!suggestionSelected &&
 			!isAnswered &&
-			!isFollowUpAutoApprovalPaused
+			!isFollowUpAutoApprovalPaused &&
+			(followupAutoApproveTimeoutMs ?? DEFAULT_FOLLOWUP_TIMEOUT_MS) > 0
 		) {
 			// Start with the configured timeout in seconds
 			const timeoutMs =

webview-ui/src/components/chat/__tests__/FollowUpSuggest.spec.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from "react"
-import { render, screen, act } from "@testing-library/react"
+import { render, screen, act, fireEvent } from "@testing-library/react"
 import { TooltipProvider } from "@radix-ui/react-tooltip"
 
 import { FollowUpSuggest } from "../FollowUpSuggest"
@@ -28,7 +28,7 @@ vi.mock("@src/i18n/TranslationContext", () => ({
 interface TestExtensionState {
 	autoApprovalEnabled: boolean
 	alwaysAllowFollowupQuestions: boolean
-	followupAutoApproveTimeoutMs: number
+	followupAutoApproveTimeoutMs?: number
 }
 
 const TestExtensionStateContext = createContext<TestExtensionState | undefined>(undefined)
@@ -74,6 +74,13 @@ describe("FollowUpSuggest", () => {
 		followupAutoApproveTimeoutMs: 3000, // 3 seconds for testing
 	}
 
+	// Test state with timeout disabled (0)
+	const disabledTimeoutState: TestExtensionState = {
+		autoApprovalEnabled: true,
+		alwaysAllowFollowupQuestions: true,
+		followupAutoApproveTimeoutMs: 0, // Disabled
+	}
+
 	beforeEach(() => {
 		vi.clearAllMocks()
 		vi.useFakeTimers()
@@ -218,6 +225,41 @@ describe("FollowUpSuggest", () => {
 		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
 	})
 
+	// Should not show countdown when timeout is disabled (set to 0)
+	it("should not show countdown when timeout is disabled (set to 0)", () => {
+		renderWithTestProviders(
+			<FollowUpSuggest
+				suggestions={mockSuggestions}
+				onSuggestionClick={mockOnSuggestionClick}
+				ts={1}
+				onCancelAutoApproval={mockOnCancelAutoApproval}
+			/>,
+			disabledTimeoutState,
+		)
+
+		// Should not show countdown when timeout is disabled
+		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
+	})
+
+	it("should not show countdown when timeout is negative", () => {
+		const negativeTimeoutState: TestExtensionState = {
+			...defaultTestState,
+			followupAutoApproveTimeoutMs: -1000,
+		}
+
+		renderWithTestProviders(
+			<FollowUpSuggest
+				suggestions={mockSuggestions}
+				onSuggestionClick={mockOnSuggestionClick}
+				ts={1}
+				onCancelAutoApproval={mockOnCancelAutoApproval}
+			/>,
+			negativeTimeoutState,
+		)
+
+		expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument()
+	})
+
 	it("should not render when no suggestions are provided", () => {
 		const { container } = renderWithTestProviders(
 			<FollowUpSuggest
@@ -707,4 +749,94 @@ describe("FollowUpSuggest", () => {
 			expect(mockOnCancelAutoApproval).toHaveBeenCalled()
 		})
 	})
+
+	describe("suggestion interactions", () => {
+		it("cancels countdown and forwards click when user clicks a suggestion", () => {
+			renderWithTestProviders(
+				<FollowUpSuggest
+					suggestions={mockSuggestions}
+					onSuggestionClick={mockOnSuggestionClick}
+					ts={123}
+					onCancelAutoApproval={mockOnCancelAutoApproval}
+				/>,
+				defaultTestState,
+			)
+
+			fireEvent.click(screen.getByText("First suggestion"))
+
+			expect(mockOnSuggestionClick).toHaveBeenCalledWith(
+				expect.objectContaining({ answer: "First suggestion" }),
+				expect.objectContaining({ shiftKey: false }),
+			)
+			expect(mockOnCancelAutoApproval).toHaveBeenCalled()
+			expect(screen.queryByText(/Selecting in \d+s/)).not.toBeInTheDocument()
+		})
+
+		it("keeps countdown when shift-clicking a suggestion", () => {
+			renderWithTestProviders(
+				<FollowUpSuggest
+					suggestions={mockSuggestions}
+					onSuggestionClick={mockOnSuggestionClick}
+					ts={123}
+					onCancelAutoApproval={mockOnCancelAutoApproval}
+				/>,
+				defaultTestState,
+			)
+
+			mockOnCancelAutoApproval.mockClear()
+			fireEvent.click(screen.getByText("First suggestion"), { shiftKey: true })
+
+			expect(mockOnSuggestionClick).toHaveBeenCalledWith(
+				expect.objectContaining({ answer: "First suggestion" }),
+				expect.objectContaining({ shiftKey: true }),
+			)
+			expect(mockOnCancelAutoApproval).not.toHaveBeenCalled()
+			expect(screen.getByText(/Selecting in 3s/)).toBeInTheDocument()
+		})
+
+		it("copies suggestion into input when the copy affordance is clicked", () => {
+			const { container } = renderWithTestProviders(
+				<FollowUpSuggest
+					suggestions={mockSuggestions}
+					onSuggestionClick={mockOnSuggestionClick}
+					ts={123}
+					onCancelAutoApproval={mockOnCancelAutoApproval}
+				/>,
+				defaultTestState,
+			)
+
+			const copyAffordance = container.querySelector(
+				".absolute.cursor-pointer.top-1\\.5.right-1\\.5",
+			) as HTMLElement
+
+			expect(copyAffordance).toBeTruthy()
+			fireEvent.click(copyAffordance)
+
+			expect(mockOnSuggestionClick).toHaveBeenCalledWith(
+				expect.objectContaining({ answer: "First suggestion" }),
+				expect.objectContaining({ shiftKey: true }),
+			)
+			expect(mockOnCancelAutoApproval).toHaveBeenCalled()
+			expect(screen.queryByText(/Selecting in \d+s/)).not.toBeInTheDocument()
+		})
+
+		it("uses default timeout when extension state timeout is undefined", () => {
+			const stateWithUndefinedTimeout = {
+				...defaultTestState,
+				followupAutoApproveTimeoutMs: undefined,
+			}
+
+			renderWithTestProviders(
+				<FollowUpSuggest
+					suggestions={mockSuggestions}
+					onSuggestionClick={mockOnSuggestionClick}
+					ts={123}
+					onCancelAutoApproval={mockOnCancelAutoApproval}
+				/>,
+				stateWithUndefinedTimeout,
+			)
+
+			expect(screen.getByText(/Selecting in 60s/)).toBeInTheDocument()
+		})
+	})
 })

webview-ui/src/components/settings/AutoApproveSettings.tsx

@@ -254,7 +254,7 @@ export const AutoApproveSettings = ({
 							label={t("settings:autoApprove.followupQuestions.timeoutLabel")}>
 							<div className="flex items-center gap-2">
 								<Slider
-									min={1000}
+									min={0}
 									max={300000}
 									step={1000}
 									value={[followupAutoApproveTimeoutMs]}
@@ -263,7 +263,11 @@ export const AutoApproveSettings = ({
 									}
 									data-testid="followup-timeout-slider"
 								/>
-								<span className="w-20">{followupAutoApproveTimeoutMs / 1000}s</span>
+								<span className="w-20">
+									{followupAutoApproveTimeoutMs === 0
+										? t("settings:autoApprove.followupQuestions.timeoutDisabled")
+										: `${followupAutoApproveTimeoutMs / 1000}s`}
+								</span>
 							</div>
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:autoApprove.followupQuestions.timeoutLabel")}

webview-ui/src/components/settings/__tests__/AutoApproveSettings.spec.tsx

@@ -33,6 +33,24 @@ vi.mock("@/hooks/useAutoApprovalState", () => ({
 	useAutoApprovalState: () => ({ effectiveAutoApprovalEnabled: false, hasEnabledOptions: false }),
 }))
 
+vi.mock("@/components/ui", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("@/components/ui")>()
+
+	return {
+		...actual,
+		Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+		Input: (props: any) => <input {...props} />,
+		Slider: ({ value, onValueChange, ...props }: any) => (
+			<input
+				type="range"
+				value={value?.[0] ?? 0}
+				onChange={(event) => onValueChange?.([Number((event.target as HTMLInputElement).value)])}
+				{...props}
+			/>
+		),
+	}
+})
+
 const renderSettings = (overrides = {}) => {
 	const setCachedStateField = vi.fn()
 	const props = {
@@ -161,4 +179,71 @@ describe("AutoApproveSettings - Save/Discard contract", () => {
 		expect(screen.getByTestId("allowed-commands-heading")).toBeInTheDocument()
 		expect(screen.getByTestId("denied-commands-heading")).toBeInTheDocument()
 	})
+
+	it("renders disabled timeout label when follow-up auto-approve timeout is 0", () => {
+		const { setCachedStateField } = renderSettings({
+			alwaysAllowFollowupQuestions: true,
+			followupAutoApproveTimeoutMs: 0,
+		})
+
+		const slider = screen.getByTestId("followup-timeout-slider") as HTMLInputElement
+		expect(slider).toBeInTheDocument()
+		expect(slider.value).toBe("0")
+		expect(screen.getByText("settings:autoApprove.followupQuestions.timeoutDisabled")).toBeInTheDocument()
+
+		fireEvent.change(slider, { target: { value: "4000" } })
+
+		expect(setCachedStateField).toHaveBeenCalledWith("followupAutoApproveTimeoutMs", 4000)
+		expectNoImmediateUpdateSettings()
+	})
+
+	it("renders timeout in seconds when follow-up auto-approve timeout is non-zero", () => {
+		const { setCachedStateField } = renderSettings({
+			alwaysAllowFollowupQuestions: true,
+			followupAutoApproveTimeoutMs: 5000,
+		})
+
+		const slider = screen.getByTestId("followup-timeout-slider") as HTMLInputElement
+		expect(slider).toBeInTheDocument()
+		expect(slider.value).toBe("5000")
+		expect(screen.getByText("5s")).toBeInTheDocument()
+
+		fireEvent.change(slider, { target: { value: "0" } })
+
+		expect(setCachedStateField).toHaveBeenCalledWith("followupAutoApproveTimeoutMs", 0)
+		expectNoImmediateUpdateSettings()
+	})
+
+	it("uses the default timeout value when timeout is unset and follow-up auto-approve is enabled", () => {
+		renderSettings({ alwaysAllowFollowupQuestions: true })
+
+		const slider = screen.getByTestId("followup-timeout-slider") as HTMLInputElement
+		expect(slider.value).toBe("60000")
+		expect(screen.getByText("60s")).toBeInTheDocument()
+	})
+
+	it("does not render the follow-up timeout controls when follow-up auto-approve is disabled or unset", () => {
+		const { rerender } = render(
+			<AutoApproveSettings
+				alwaysAllowExecute
+				allowedCommands={[]}
+				deniedCommands={[]}
+				alwaysAllowFollowupQuestions={false}
+				setCachedStateField={vi.fn()}
+			/>,
+		)
+
+		expect(screen.queryByTestId("followup-timeout-slider")).not.toBeInTheDocument()
+
+		rerender(
+			<AutoApproveSettings
+				alwaysAllowExecute
+				allowedCommands={[]}
+				deniedCommands={[]}
+				setCachedStateField={vi.fn()}
+			/>,
+		)
+
+		expect(screen.queryByTestId("followup-timeout-slider")).not.toBeInTheDocument()
+	})
 })

webview-ui/src/components/settings/__tests__/AutoApproveSettings.visual.fixture.tsx

@@ -0,0 +1,26 @@
+/* v8 ignore file -- Playwright component fixture is covered by the visual test. */
+import React from "react"
+
+import { TranslationContext } from "@/i18n/TranslationContext"
+import i18next from "@/i18n/setup"
+import { ExtensionStateContextProvider } from "@/context/ExtensionStateContext"
+import { AutoApproveSettings } from "../AutoApproveSettings"
+
+export const AutoApproveSettingsFixture = () => (
+	<TranslationContext.Provider
+		value={{
+			t: (key) => (key === "settings:autoApprove.followupQuestions.timeoutDisabled" ? "Disabled" : key),
+			i18n: i18next,
+		}}>
+		<ExtensionStateContextProvider
+			initialState={{ autoApprovalEnabled: false, alwaysAllowFollowupQuestions: true }}>
+			<div className="w-[680px] bg-vscode-editor-background p-4 text-vscode-foreground">
+				<AutoApproveSettings
+					alwaysAllowFollowupQuestions
+					followupAutoApproveTimeoutMs={0}
+					setCachedStateField={() => {}}
+				/>
+			</div>
+		</ExtensionStateContextProvider>
+	</TranslationContext.Provider>
+)

webview-ui/src/components/settings/__tests__/AutoApproveSettings.visual.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AutoApproveSettingsFixture } from "./AutoApproveSettings.visual.fixture"
+
+test("renders follow-up timeout row with disabled state label in the VS Code dark theme", async ({ mount, page }) => {
+	// The full settings bundle can leave a bare Zod reference after CT tree-shaking.
+	await page.evaluate(() => Object.assign(globalThis, { z: undefined }))
+
+	const component = await mount(<AutoApproveSettingsFixture />)
+
+	await component.evaluate(async () => {
+		await document.fonts.ready
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+	})
+
+	await expect(component).toHaveScreenshot("auto-approve-followup-timeout-disabled-dark.png")
+})

webview-ui/src/i18n/locales/en/settings.json

@@ -401,7 +401,8 @@
 		"followupQuestions": {
 			"label": "Question",
 			"description": "Automatically select the first suggested answer for follow-up questions after the configured timeout",
-			"timeoutLabel": "Time to wait before auto-selecting the first answer"
+			"timeoutLabel": "Time to wait before auto-selecting the first answer",
+			"timeoutDisabled": "Disabled"
 		},
 		"execute": {
 			"label": "Execute",