feat(settings): Add API cost limit to auto-approval settings

This commit introduces a new auto-approval setting that allows users to define a maximum API cost. The system will automatically approve requests up to this cost limit before prompting the user for approval to continue the task.

Key changes include:
- Added `allowedMaxCost` to `globalSettingsSchema` in `@packages/types`.
- Implemented cost tracking and limit enforcement in `Task.ts`.
- Integrated `allowedMaxCost` into `ClineProvider` and `webviewMessageHandler` for state management.
- Created new UI components `CostInput`, `FormattedTextField`, and `MaxLimitInputs` in `webview-ui` to handle cost input and formatting.
- Updated `AutoApproveMenu` and `AutoApproveSettings` to include the new cost limit input.
- Added new Storybook stories for `AutoApproveMenu` and `AutoApproveSettings`.
- Included new test files for `FormattedTextField` and `MaxCostInput`.
- Updated i18n localization files across all supported languages to include new strings for the API cost limit setting.

Author: Chris Hasson

apps/storybook/stories/AutoApproveMenu.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import AutoApproveMenu from "../../../webview-ui/src/components/chat/AutoApproveMenu"
+
+const meta: Meta<typeof AutoApproveMenu> = {
+	title: "Chat/AutoApproveMenu",
+	component: AutoApproveMenu,
+	parameters: {
+		layout: "padded",
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ maxWidth: "400px", margin: "0 auto" }}>
+				<Story />
+			</div>
+		),
+	],
+}
+
+export default meta
+type Story = StoryObj<typeof AutoApproveMenu>
+
+export const Collapsed: Story = {}
+
+export const Expanded: Story = {
+	args: {
+		initialExpanded: true,
+	},
+}

apps/storybook/stories/AutoApproveSettings.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AutoApproveSettings } from "../../../webview-ui/src/components/settings/AutoApproveSettings"
+
+const meta: Meta<typeof AutoApproveSettings> = {
+	title: "Settings/AutoApproveSettings",
+	component: AutoApproveSettings,
+	decorators: [
+		(Story) => (
+			<div style={{ maxWidth: "600px", margin: "0 auto" }}>
+				<Story />
+			</div>
+		),
+	],
+}
+
+export default meta
+type Story = StoryObj<typeof AutoApproveSettings>
+
+export const Default: Story = {
+	args: {},
+}

packages/types/src/global-settings.ts

@@ -51,6 +51,7 @@ export const globalSettingsSchema = z.object({
 	alwaysAllowUpdateTodoList: z.boolean().optional(),
 	allowedCommands: z.array(z.string()).optional(),
 	allowedMaxRequests: z.number().nullish(),
+	allowedMaxCost: z.number().nullish(),
 	autoCondenseContext: z.boolean().optional(),
 	autoCondenseContextPercent: z.number().optional(),
 	maxConcurrentFileReads: z.number().optional(),

src/core/task/Task.ts

@@ -162,6 +162,7 @@ export class Task extends EventEmitter<ClineEvents> {
 	api: ApiHandler
 	private static lastGlobalApiRequestTime?: number
 	private consecutiveAutoApprovedRequestsCount: number = 0
+	private consecutiveAutoApprovedCost: number = 0
 
 	/**
 	 * Reset the global API request timestamp. This should only be used for testing.
@@ -1894,6 +1895,22 @@ export class Task extends EventEmitter<ClineEvents> {
 			}
 		}
 
+		// Check if we've reached the maximum allowed cost
+		const maxCost = state?.allowedMaxCost || Infinity
+		const currentCost = getApiMetrics(this.combineMessages(this.clineMessages.slice(1))).totalCost
+		this.consecutiveAutoApprovedCost = currentCost
+
+		if (this.consecutiveAutoApprovedCost > maxCost) {
+			const { response } = await this.ask(
+				"auto_approval_max_req_reached",
+				JSON.stringify({ count: maxCost.toFixed(2) }),
+			)
+			// If we get past the promise, it means the user approved and did not start a new task
+			if (response === "yesButtonClicked") {
+				this.consecutiveAutoApprovedCost = 0
+			}
+		}
+
 		const metadata: ApiHandlerCreateMessageMetadata = {
 			mode: mode,
 			taskId: this.taskId,

src/core/webview/ClineProvider.ts

@@ -1410,6 +1410,7 @@ export class ClineProvider
 			alwaysAllowSubtasks,
 			alwaysAllowUpdateTodoList,
 			allowedMaxRequests,
+			allowedMaxCost,
 			autoCondenseContext,
 			autoCondenseContextPercent,
 			soundEnabled,
@@ -1505,6 +1506,7 @@ export class ClineProvider
 			alwaysAllowSubtasks: alwaysAllowSubtasks ?? true,
 			alwaysAllowUpdateTodoList: alwaysAllowUpdateTodoList ?? true,
 			allowedMaxRequests,
+			allowedMaxCost,
 			autoCondenseContext: autoCondenseContext ?? true,
 			autoCondenseContextPercent: autoCondenseContextPercent ?? 100,
 			uriScheme: vscode.env.uriScheme,
@@ -1682,6 +1684,7 @@ export class ClineProvider
 			alwaysAllowUpdateTodoList: stateValues.alwaysAllowUpdateTodoList ?? true, // kilocode_change
 			followupAutoApproveTimeoutMs: stateValues.followupAutoApproveTimeoutMs ?? 60000,
 			allowedMaxRequests: stateValues.allowedMaxRequests,
+			allowedMaxCost: stateValues.allowedMaxCost,
 			autoCondenseContext: stateValues.autoCondenseContext ?? true,
 			autoCondenseContextPercent: stateValues.autoCondenseContextPercent ?? 100,
 			taskHistory: stateValues.taskHistory,

src/core/webview/webviewMessageHandler.ts

@@ -391,6 +391,10 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("allowedMaxRequests", message.value)
 			await provider.postStateToWebview()
 			break
+		case "allowedMaxCost":
+			await updateGlobalState("allowedMaxCost", message.value)
+			await provider.postStateToWebview()
+			break
 		case "alwaysAllowSubtasks":
 			await updateGlobalState("alwaysAllowSubtasks", message.bool)
 			await provider.postStateToWebview()

src/shared/ExtensionMessage.ts

@@ -213,6 +213,7 @@ export type ExtensionState = Pick<
 	| "alwaysAllowUpdateTodoList"
 	| "allowedCommands"
 	| "allowedMaxRequests"
+	| "allowedMaxCost"
 	| "browserToolEnabled"
 	| "browserViewportSize"
 	| "showAutoApproveMenu" // kilocode_change

src/shared/WebviewMessage.ts

@@ -88,6 +88,7 @@ export interface WebviewMessage {
 		| "alwaysAllowMcp"
 		| "alwaysAllowModeSwitch"
 		| "allowedMaxRequests"
+		| "allowedMaxCost"
 		| "alwaysAllowSubtasks"
 		| "alwaysAllowUpdateTodoList"
 		| "autoCondenseContext"

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

@@ -6,14 +6,15 @@ import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { AutoApproveToggle, AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
-import { MaxRequestsInput } from "../settings/MaxRequestsInput"
+import { MaxLimitInputs } from "../settings/MaxLimitInputs"
 
 interface AutoApproveMenuProps {
 	style?: React.CSSProperties
+	initialExpanded?: boolean
 }
 
-const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
-	const [isExpanded, setIsExpanded] = useState(false)
+const AutoApproveMenu = ({ style, initialExpanded = false }: AutoApproveMenuProps) => {
+	const [isExpanded, setIsExpanded] = useState(initialExpanded)
 
 	const {
 		autoApprovalEnabled,
@@ -29,6 +30,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		alwaysAllowFollowupQuestions,
 		alwaysAllowUpdateTodoList,
 		allowedMaxRequests,
+		allowedMaxCost,
 		setAlwaysAllowReadOnly,
 		setAlwaysAllowWrite,
 		setAlwaysAllowExecute,
@@ -40,6 +42,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		setAlwaysAllowFollowupQuestions,
 		setAlwaysAllowUpdateTodoList,
 		setAllowedMaxRequests,
+		setAllowedMaxCost,
 	} = useExtensionState()
 
 	const { t } = useAppTranslation()
@@ -219,9 +222,11 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
 
 					{/* kilocode_change start */}
-					<MaxRequestsInput
+					<MaxLimitInputs
 						allowedMaxRequests={allowedMaxRequests ?? undefined}
-						onValueChange={(value) => setAllowedMaxRequests(value)}
+						allowedMaxCost={allowedMaxCost ?? undefined}
+						onMaxRequestsChange={(value) => setAllowedMaxRequests(value)}
+						onMaxCostChange={(value) => setAllowedMaxCost(value)}
 					/>
 					{/* kilocode_change end */}
 				</div>

webview-ui/src/components/common/CostInput.tsx

@@ -0,0 +1,74 @@
+// kilocode_change - new file
+import { useCallback } from "react"
+import { FormattedTextField, currencyFormatter } from "./FormattedTextField"
+
+interface CostInputProps {
+	value?: number | undefined
+	onValueChange: (value: number | undefined) => void
+	placeholder?: string
+	className?: string
+	style?: React.CSSProperties
+	"data-testid"?: string
+	label?: string
+	description?: string
+	icon?: string
+}
+
+export function CostInput({
+	value,
+	onValueChange,
+	placeholder,
+	className,
+	style,
+	"data-testid": dataTestId,
+	label,
+	description,
+	icon = "codicon-credit-card",
+}: CostInputProps) {
+	const handleValueChange = useCallback(
+		(newValue: number | undefined) => {
+			onValueChange(newValue)
+		},
+		[onValueChange],
+	)
+
+	if (label || description) {
+		return (
+			<div className={`flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background ${className || ""}`}>
+				{label && (
+					<div className="flex items-center gap-4 font-bold">
+						<span className={`codicon ${icon}`} />
+						<div>{label}</div>
+					</div>
+				)}
+				<div className="flex items-center gap-2">
+					<span className="text-vscode-descriptionForeground">$</span>
+					<FormattedTextField
+						value={value}
+						onValueChange={handleValueChange}
+						formatter={currencyFormatter}
+						placeholder={placeholder || "0.00"}
+						style={style || { flex: 1, maxWidth: "200px" }}
+						data-testid={dataTestId}
+					/>
+				</div>
+				{description && <div className="text-vscode-descriptionForeground text-sm">{description}</div>}
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex items-center gap-2">
+			<span className="text-vscode-descriptionForeground">$</span>
+			<FormattedTextField
+				value={value}
+				onValueChange={handleValueChange}
+				formatter={currencyFormatter}
+				placeholder={placeholder || "0.00"}
+				className={className}
+				style={style}
+				data-testid={dataTestId}
+			/>
+		</div>
+	)
+}