feat: move max requests setting from auto-approve menu to settings tab

- Remove max requests input field from AutoApproveMenu.tsx
- Add max requests setting to AutoApproveSettings.tsx below execute setting
- Update component props and types to handle allowedMaxRequests
- Ensure setting persists via save button instead of auto-save
- Fix linting issues by removing unused imports

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

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
-import { VSCodeCheckbox, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
@@ -21,7 +21,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		autoApprovalEnabled,
 		setAutoApprovalEnabled,
 		alwaysApproveResubmit,
-		allowedMaxRequests,
 		setAlwaysAllowReadOnly,
 		setAlwaysAllowWrite,
 		setAlwaysAllowExecute,
@@ -32,7 +31,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		setAlwaysApproveResubmit,
 		setAlwaysAllowFollowupQuestions,
 		setAlwaysAllowUpdateTodoList,
-		setAllowedMaxRequests,
 	} = useExtensionState()
 
 	const { t } = useAppTranslation()
@@ -242,43 +240,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					</div>
 
 					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
-
-					{/* Auto-approve API request count limit input row inspired by Cline */}
-					<div
-						style={{
-							display: "flex",
-							alignItems: "center",
-							gap: "8px",
-							marginTop: "10px",
-							marginBottom: "8px",
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						<span style={{ flexShrink: 1, minWidth: 0 }}>
-							<Trans i18nKey="settings:autoApprove.apiRequestLimit.title" />:
-						</span>
-						<VSCodeTextField
-							placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
-							value={(allowedMaxRequests ?? Infinity) === Infinity ? "" : allowedMaxRequests?.toString()}
-							onInput={(e) => {
-								const input = e.target as HTMLInputElement
-								// Remove any non-numeric characters
-								input.value = input.value.replace(/[^0-9]/g, "")
-								const value = parseInt(input.value)
-								const parsedValue = !isNaN(value) && value > 0 ? value : undefined
-								setAllowedMaxRequests(parsedValue)
-								vscode.postMessage({ type: "allowedMaxRequests", value: parsedValue })
-							}}
-							style={{ flex: 1 }}
-						/>
-					</div>
-					<div
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							fontSize: "12px",
-							marginBottom: "10px",
-						}}>
-						<Trans i18nKey="settings:autoApprove.apiRequestLimit.description" />
-					</div>
 				</div>
 			)}
 		</div>

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

@@ -1,8 +1,9 @@
 import { HTMLAttributes, useState } from "react"
 import { X } from "lucide-react"
+import { Trans } from "react-i18next"
 
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { vscode } from "@/utils/vscode"
 import { Button, Input, Slider, StandardTooltip } from "@/components/ui"
 
@@ -32,6 +33,7 @@ type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	followupAutoApproveTimeoutMs?: number
 	allowedCommands?: string[]
 	deniedCommands?: string[]
+	allowedMaxRequests?: number | null
 	setCachedStateField: SetCachedStateField<
 		| "alwaysAllowReadOnly"
 		| "alwaysAllowReadOnlyOutsideWorkspace"
@@ -50,6 +52,7 @@ type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 		| "allowedCommands"
 		| "deniedCommands"
 		| "alwaysAllowUpdateTodoList"
+		| "allowedMaxRequests"
 	>
 }
 
@@ -71,6 +74,7 @@ export const AutoApproveSettings = ({
 	alwaysAllowUpdateTodoList,
 	allowedCommands,
 	deniedCommands,
+	allowedMaxRequests,
 	setCachedStateField,
 	...props
 }: AutoApproveSettingsProps) => {
@@ -374,6 +378,32 @@ export const AutoApproveSettings = ({
 						</div>
 					</div>
 				)}
+
+				{/* Max Requests Setting */}
+				<div className="flex flex-col gap-3 mt-6">
+					<div className="flex items-center gap-4 font-bold">
+						<span className="codicon codicon-number" />
+						<div>{t("settings:autoApprove.apiRequestLimit.title")}</div>
+					</div>
+					<div className="flex items-center gap-2">
+						<VSCodeTextField
+							placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
+							value={(allowedMaxRequests ?? Infinity) === Infinity ? "" : allowedMaxRequests?.toString()}
+							onInput={(e) => {
+								const input = e.target as HTMLInputElement
+								// Remove any non-numeric characters
+								input.value = input.value.replace(/[^0-9]/g, "")
+								const value = parseInt(input.value)
+								const parsedValue = !isNaN(value) && value > 0 ? value : undefined
+								setCachedStateField("allowedMaxRequests", parsedValue)
+							}}
+							style={{ flex: 1, maxWidth: "200px" }}
+						/>
+					</div>
+					<div className="text-vscode-descriptionForeground text-sm">
+						<Trans i18nKey="settings:autoApprove.apiRequestLimit.description" />
+					</div>
+				</div>
 			</Section>
 		</div>
 	)

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

@@ -628,6 +628,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 							followupAutoApproveTimeoutMs={followupAutoApproveTimeoutMs}
 							allowedCommands={allowedCommands}
 							deniedCommands={deniedCommands}
+							allowedMaxRequests={allowedMaxRequests}
 							setCachedStateField={setCachedStateField}
 						/>
 					)}