feat(ui): Differentiate auto-approval warnings for requests and cost

This commit enhances the auto-approval warning system to distinguish between reaching the request limit and the cost limit.

- **`src/core/task/Task.ts`**: Modified to pass a `type` parameter (`"requests"` or `"cost"`) to the `ask` method when the auto-approval limit is reached.
- **`webview-ui/src/components/chat/AutoApprovedRequestLimitWarning.tsx`**: Updated to use the new `type` parameter to dynamically select appropriate i18n keys for title, description, and button text, providing clearer messages to the user.
- **`webview-ui/src/components/settings/MaxCostInput.tsx`**: Refactored to use a new `FormattedTextField` component, simplifying input handling and validation for the max cost setting. This change removes redundant state management and event handlers.
- **`webview-ui/src/components/settings/__tests__/MaxCostInput.spec.tsx`**: Updated tests to reflect the changes in `MaxCostInput`, specifically removing tests related to blur/enter events and focusing on direct value changes.
- **`webview-ui/src/i18n/locales/*/chat.json`**: Added new translation keys (`autoApprovedCostLimitReached.title`, `description`, `button`) across all supported languages to support the cost limit warning.

This change improves user clarity and experience by providing specific feedback when either the request count or the monetary cost limit for auto-approved actions is reached.

Author: Chris Hasson

src/core/task/Task.ts

@@ -2101,7 +2101,10 @@ export class Task extends EventEmitter<ClineEvents> {
 		this.consecutiveAutoApprovedRequestsCount++
 
 		if (this.consecutiveAutoApprovedRequestsCount > maxRequests) {
-			const { response } = await this.ask("auto_approval_max_req_reached", JSON.stringify({ count: maxRequests }))
+			const { response } = await this.ask(
+				"auto_approval_max_req_reached",
+				JSON.stringify({ count: maxRequests, type: "requests" }),
+			)
 			// If we get past the promise, it means the user approved and did not start a new task
 			if (response === "yesButtonClicked") {
 				this.consecutiveAutoApprovedRequestsCount = 0
@@ -2116,7 +2119,7 @@ export class Task extends EventEmitter<ClineEvents> {
 		if (this.consecutiveAutoApprovedCost > maxCost) {
 			const { response } = await this.ask(
 				"auto_approval_max_req_reached",
-				JSON.stringify({ count: maxCost.toFixed(2) }),
+				JSON.stringify({ count: maxCost.toFixed(2), type: "cost" }),
 			)
 			// If we get past the promise, it means the user approved and did not start a new task
 			if (response === "yesButtonClicked") {

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

@@ -12,18 +12,29 @@ type AutoApprovedRequestLimitWarningProps = {
 
 export const AutoApprovedRequestLimitWarning = memo(({ message }: AutoApprovedRequestLimitWarningProps) => {
 	const [buttonClicked, setButtonClicked] = useState(false)
-	const { count } = JSON.parse(message.text ?? "{}")
+	const { count, type = "requests" } = JSON.parse(message.text ?? "{}")
 
 	if (buttonClicked) {
 		return null
 	}
 
+	const isCostLimit = type === "cost"
+	const titleKey = isCostLimit
+		? "ask.autoApprovedCostLimitReached.title"
+		: "ask.autoApprovedRequestLimitReached.title"
+	const descriptionKey = isCostLimit
+		? "ask.autoApprovedCostLimitReached.description"
+		: "ask.autoApprovedRequestLimitReached.description"
+	const buttonKey = isCostLimit
+		? "ask.autoApprovedCostLimitReached.button"
+		: "ask.autoApprovedRequestLimitReached.button"
+
 	return (
 		<>
 			<div style={{ display: "flex", alignItems: "center", gap: "8px", color: "var(--vscode-foreground)" }}>
 				<span className="codicon codicon-warning" />
 				<span style={{ fontWeight: "bold" }}>
-					<Trans i18nKey="ask.autoApprovedRequestLimitReached.title" ns="chat" />
+					<Trans i18nKey={titleKey} ns="chat" />
 				</span>
 			</div>
 
@@ -37,7 +48,7 @@ export const AutoApprovedRequestLimitWarning = memo(({ message }: AutoApprovedRe
 					justifyContent: "center",
 				}}>
 				<div className="flex justify-between items-center">
-					<Trans i18nKey="ask.autoApprovedRequestLimitReached.description" ns="chat" values={{ count }} />
+					<Trans i18nKey={descriptionKey} ns="chat" values={{ count }} />
 				</div>
 				<VSCodeButton
 					style={{ width: "100%", padding: "6px", borderRadius: "4px" }}
@@ -46,7 +57,7 @@ export const AutoApprovedRequestLimitWarning = memo(({ message }: AutoApprovedRe
 						setButtonClicked(true)
 						vscode.postMessage({ type: "askResponse", askResponse: "yesButtonClicked" })
 					}}>
-					<Trans i18nKey="ask.autoApprovedRequestLimitReached.button" ns="chat" />
+					<Trans i18nKey={buttonKey} ns="chat" />
 				</VSCodeButton>
 			</div>
 		</>

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

@@ -1,7 +1,26 @@
 import { useTranslation } from "react-i18next"
 import { vscode } from "@/utils/vscode"
-import { useCallback, useState, useEffect } from "react"
-import { DecoratedVSCodeTextField } from "@/components/common/DecoratedVSCodeTextField"
+import { useCallback } from "react"
+import { FormattedTextField, InputFormatter } from "../common/FormattedTextField"
+
+const unlimitedDecimalFormatter: InputFormatter<number> = {
+	parse: (input: string) => {
+		if (input.trim() === "") return undefined
+		const value = parseFloat(input)
+		return !isNaN(value) && value >= 0 ? value : undefined
+	},
+	format: (value: number | undefined) => {
+		return value === undefined || value === Infinity ? "" : value.toString()
+	},
+	filter: (input: string) => {
+		let cleanValue = input.replace(/[^0-9.]/g, "")
+		const parts = cleanValue.split(".")
+		if (parts.length > 2) {
+			cleanValue = parts[0] + "." + parts.slice(1).join("")
+		}
+		return cleanValue
+	},
+}
 
 interface MaxCostInputProps {
 	allowedMaxCost?: number
@@ -11,63 +30,13 @@ interface MaxCostInputProps {
 
 export function MaxCostInput({ allowedMaxCost, onValueChange, className }: MaxCostInputProps) {
 	const { t } = useTranslation()
-	const [inputValue, setInputValue] = useState("")
-
-	// Update input value when allowedMaxCost prop changes
-	useEffect(() => {
-		const displayValue = (allowedMaxCost ?? Infinity) === Infinity ? "" : (allowedMaxCost?.toString() ?? "")
-		setInputValue(displayValue)
-	}, [allowedMaxCost])
-
-	const parseAndValidateInput = useCallback((value: string) => {
-		if (value.trim() === "") {
-			return undefined
-		}
-		const numericValue = parseFloat(value)
-		return !isNaN(numericValue) && numericValue >= 0 ? numericValue : undefined
-	}, [])
-
-	const handleInput = useCallback((e: any) => {
-		const input = e.target as HTMLInputElement
-		// Only allow numbers and decimal points
-		let cleanValue = input.value.replace(/[^0-9.]/g, "")
-
-		// Prevent multiple decimal points
-		const parts = cleanValue.split(".")
-		if (parts.length > 2) {
-			cleanValue = parts[0] + "." + parts.slice(1).join("")
-		}
-
-		// Update the input value immediately for user feedback
-		input.value = cleanValue
-		setInputValue(cleanValue)
-	}, [])
-
-	const handleBlurOrEnter = useCallback(
-		(value: string) => {
-			const parsedValue = parseAndValidateInput(value)
-			onValueChange(parsedValue)
-			vscode.postMessage({ type: "allowedMaxCost", value: parsedValue })
-		},
-		[parseAndValidateInput, onValueChange],
-	)
-
-	const handleBlur = useCallback(
-		(e: any) => {
-			const value = e.target.value
-			handleBlurOrEnter(value)
-		},
-		[handleBlurOrEnter],
-	)
 
-	const handleKeyDown = useCallback(
-		(e: any) => {
-			if (e.key === "Enter") {
-				const value = e.target.value
-				handleBlurOrEnter(value)
-			}
+	const handleValueChange = useCallback(
+		(value: number | undefined) => {
+			onValueChange(value)
+			vscode.postMessage({ type: "allowedMaxCost", value })
 		},
-		[handleBlurOrEnter],
+		[onValueChange],
 	)
 
 	return (
@@ -77,12 +46,11 @@ export function MaxCostInput({ allowedMaxCost, onValueChange, className }: MaxCo
 				<div>{t("settings:autoApprove.apiCostLimit.title")}</div>
 			</div>
 			<div className="flex items-center">
-				<DecoratedVSCodeTextField
+				<FormattedTextField
+					value={allowedMaxCost}
+					onValueChange={handleValueChange}
+					formatter={unlimitedDecimalFormatter}
 					placeholder={t("settings:autoApprove.apiCostLimit.unlimited")}
-					value={inputValue}
-					onInput={handleInput}
-					onBlur={handleBlur}
-					onKeyDown={handleKeyDown}
 					style={{ flex: 1, maxWidth: "200px" }}
 					data-testid="max-cost-input"
 					leftNodes={[<span key="dollar">$</span>]}

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

@@ -11,7 +11,6 @@ vi.mock("react-i18next", () => ({
 		const translations: Record<string, string> = {
 			"settings:autoApprove.apiCostLimit.title": "Max API Cost",
 			"settings:autoApprove.apiCostLimit.unlimited": "Unlimited",
-			"settings:autoApprove.apiCostLimit.description": "Limit the total API cost",
 		}
 		return { t: (key: string) => translations[key] || key }
 	},
@@ -38,63 +37,38 @@ describe("MaxCostInput", () => {
 		expect(input).toHaveValue("5.5")
 	})
 
-	it("calls onValueChange when input loses focus", () => {
+	it("calls onValueChange when input changes", () => {
 		render(<MaxCostInput allowedMaxCost={undefined} onValueChange={mockOnValueChange} />)
 
 		const input = screen.getByPlaceholderText("Unlimited")
 		fireEvent.input(input, { target: { value: "10.25" } })
-		fireEvent.blur(input)
 
 		expect(mockOnValueChange).toHaveBeenCalledWith(10.25)
 	})
 
-	it("calls onValueChange when Enter key is pressed", () => {
-		render(<MaxCostInput allowedMaxCost={undefined} onValueChange={mockOnValueChange} />)
-
-		const input = screen.getByPlaceholderText("Unlimited")
-		fireEvent.input(input, { target: { value: "5.50" } })
-		fireEvent.keyDown(input, { key: "Enter" })
-
-		expect(mockOnValueChange).toHaveBeenCalledWith(5.5)
-	})
-
-	it("calls onValueChange with undefined when input is cleared and blurred", () => {
+	it("calls onValueChange with undefined when input is cleared", () => {
 		render(<MaxCostInput allowedMaxCost={5.0} onValueChange={mockOnValueChange} />)
 
 		const input = screen.getByPlaceholderText("Unlimited")
 		fireEvent.input(input, { target: { value: "" } })
-		fireEvent.blur(input)
 
 		expect(mockOnValueChange).toHaveBeenCalledWith(undefined)
 	})
 
-	it("handles decimal input correctly on blur", () => {
+	it("handles decimal input correctly", () => {
 		render(<MaxCostInput allowedMaxCost={undefined} onValueChange={mockOnValueChange} />)
 
 		const input = screen.getByPlaceholderText("Unlimited")
 		fireEvent.input(input, { target: { value: "2.99" } })
-		fireEvent.blur(input)
 
 		expect(mockOnValueChange).toHaveBeenCalledWith(2.99)
 	})
 
-	it("allows typing zero without immediate parsing", () => {
-		render(<MaxCostInput allowedMaxCost={undefined} onValueChange={mockOnValueChange} />)
-
-		const input = screen.getByPlaceholderText("Unlimited")
-		fireEvent.input(input, { target: { value: "0" } })
-
-		// Should not call onValueChange during typing
-		expect(mockOnValueChange).not.toHaveBeenCalled()
-		expect(input).toHaveValue("0")
-	})
-
-	it("accepts zero as a valid value on blur", () => {
+	it("accepts zero as a valid value", () => {
 		render(<MaxCostInput allowedMaxCost={undefined} onValueChange={mockOnValueChange} />)
 
 		const input = screen.getByPlaceholderText("Unlimited")
 		fireEvent.input(input, { target: { value: "0" } })
-		fireEvent.blur(input)
 
 		expect(mockOnValueChange).toHaveBeenCalledWith(0)
 	})
@@ -104,7 +78,6 @@ describe("MaxCostInput", () => {
 
 		const input = screen.getByPlaceholderText("Unlimited")
 		fireEvent.input(input, { target: { value: "0.15" } })
-		fireEvent.blur(input)
 
 		expect(mockOnValueChange).toHaveBeenCalledWith(0.15)
 	})

webview-ui/src/i18n/locales/ar/chat.json

@@ -337,6 +337,11 @@
 			"title": "Auto-Approved Request Limit Reached",
 			"description": "Kilo Code has reached the auto-approved limit of {{count}} API request(s). Would you like to reset the count and proceed with the task?",
 			"button": "Reset and Continue"
+		},
+		"autoApprovedCostLimitReached": {
+			"title": "Auto-Approved Cost Limit Reached",
+			"description": "Kilo Code has reached the auto-approved cost limit of ${{count}}. Would you like to reset the cost and proceed with the task?",
+			"button": "Reset and Continue"
 		}
 	},
 	"indexingStatus": {