Clean up the auto-approve UI

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

@@ -6,7 +6,6 @@ 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 { MaxLimitInputs } from "../settings/MaxLimitInputs"
 import { StandardTooltip } from "@src/components/ui"
 import { useAutoApprovalState } from "@src/hooks/useAutoApprovalState"
 import { useAutoApprovalToggles } from "@src/hooks/useAutoApprovalToggles"
@@ -22,8 +21,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		autoApprovalEnabled,
 		setAutoApprovalEnabled,
 		alwaysApproveResubmit,
-		allowedMaxRequests,
-		allowedMaxCost,
 		setAlwaysAllowReadOnly,
 		setAlwaysAllowWrite,
 		setAlwaysAllowExecute,
@@ -34,8 +31,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		setAlwaysApproveResubmit,
 		setAlwaysAllowFollowupQuestions,
 		setAlwaysAllowUpdateTodoList,
-		setAllowedMaxRequests,
-		setAllowedMaxCost,
 	} = useExtensionState()
 
 	const { t } = useAppTranslation()
@@ -245,13 +240,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					</div>
 
 					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
-
-					<MaxLimitInputs
-						allowedMaxRequests={allowedMaxRequests ?? undefined}
-						allowedMaxCost={allowedMaxCost ?? undefined}
-						onMaxRequestsChange={(value) => setAllowedMaxRequests(value)}
-						onMaxCostChange={(value) => setAllowedMaxCost(value)}
-					/>
 				</div>
 			)}
 		</div>

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, useState } from "react"
-import { X } from "lucide-react"
+import { X, CheckCheck } from "lucide-react"
 
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
@@ -114,57 +114,68 @@ export const AutoApproveSettings = ({
 
 	return (
 		<div {...props}>
-			<SectionHeader description={t("settings:autoApprove.description")}>
+			<SectionHeader>
 				<div className="flex items-center gap-2">
-					{!hasEnabledOptions ? (
-						<StandardTooltip content={t("settings:autoApprove.selectOptionsFirst")}>
-							<VSCodeCheckbox
-								checked={effectiveAutoApprovalEnabled}
-								disabled={!hasEnabledOptions}
-								aria-label={t("settings:autoApprove.disabledAriaLabel")}
-								onChange={() => {
-									// Do nothing when no options are enabled
-									return
-								}}
-							/>
-						</StandardTooltip>
-					) : (
-						<VSCodeCheckbox
-							checked={effectiveAutoApprovalEnabled}
-							disabled={!hasEnabledOptions}
-							aria-label={t("settings:autoApprove.toggleAriaLabel")}
-							onChange={() => {
-								const newValue = !(autoApprovalEnabled ?? false)
-								setAutoApprovalEnabled(newValue)
-								vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
-							}}
-						/>
-					)}
-					<span className="codicon codicon-check w-4" />
+					<CheckCheck className="w-4 h-4" />
 					<div>{t("settings:sections.autoApprove")}</div>
 				</div>
 			</SectionHeader>
 
 			<Section>
-				<AutoApproveToggle
-					alwaysAllowReadOnly={alwaysAllowReadOnly}
-					alwaysAllowWrite={alwaysAllowWrite}
-					alwaysAllowBrowser={alwaysAllowBrowser}
-					alwaysApproveResubmit={alwaysApproveResubmit}
-					alwaysAllowMcp={alwaysAllowMcp}
-					alwaysAllowModeSwitch={alwaysAllowModeSwitch}
-					alwaysAllowSubtasks={alwaysAllowSubtasks}
-					alwaysAllowExecute={alwaysAllowExecute}
-					alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
-					alwaysAllowUpdateTodoList={alwaysAllowUpdateTodoList}
-					onToggle={(key, value) => setCachedStateField(key, value)}
-				/>
-				<MaxLimitInputs
-					allowedMaxRequests={allowedMaxRequests}
-					allowedMaxCost={allowedMaxCost}
-					onMaxRequestsChange={(value) => setCachedStateField("allowedMaxRequests", value)}
-					onMaxCostChange={(value) => setCachedStateField("allowedMaxCost", value)}
-				/>
+				<div className="space-y-4">
+					<div>
+						{!hasEnabledOptions ? (
+							<StandardTooltip content={t("settings:autoApprove.selectOptionsFirst")}>
+								<VSCodeCheckbox
+									checked={effectiveAutoApprovalEnabled}
+									disabled={!hasEnabledOptions}
+									aria-label={t("settings:autoApprove.disabledAriaLabel")}
+									onChange={() => {
+										// Do nothing when no options are enabled
+										return
+									}}>
+									<span className="font-medium">Auto-Approve Enabled</span>
+								</VSCodeCheckbox>
+							</StandardTooltip>
+						) : (
+							<VSCodeCheckbox
+								checked={effectiveAutoApprovalEnabled}
+								disabled={!hasEnabledOptions}
+								aria-label={t("settings:autoApprove.toggleAriaLabel")}
+								onChange={() => {
+									const newValue = !(autoApprovalEnabled ?? false)
+									setAutoApprovalEnabled(newValue)
+									vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
+								}}>
+								<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
+							</VSCodeCheckbox>
+						)}
+						<div className="text-vscode-descriptionForeground text-sm mt-1">
+							{t("settings:autoApprove.description")}
+						</div>
+					</div>
+
+					<AutoApproveToggle
+						alwaysAllowReadOnly={alwaysAllowReadOnly}
+						alwaysAllowWrite={alwaysAllowWrite}
+						alwaysAllowBrowser={alwaysAllowBrowser}
+						alwaysApproveResubmit={alwaysApproveResubmit}
+						alwaysAllowMcp={alwaysAllowMcp}
+						alwaysAllowModeSwitch={alwaysAllowModeSwitch}
+						alwaysAllowSubtasks={alwaysAllowSubtasks}
+						alwaysAllowExecute={alwaysAllowExecute}
+						alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
+						alwaysAllowUpdateTodoList={alwaysAllowUpdateTodoList}
+						onToggle={(key, value) => setCachedStateField(key, value)}
+					/>
+
+					<MaxLimitInputs
+						allowedMaxRequests={allowedMaxRequests}
+						allowedMaxCost={allowedMaxCost}
+						onMaxRequestsChange={(value) => setCachedStateField("allowedMaxRequests", value)}
+						onMaxCostChange={(value) => setCachedStateField("allowedMaxCost", value)}
+					/>
+				</div>
 
 				{/* ADDITIONAL SETTINGS */}
 

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

@@ -109,13 +109,7 @@ export const AutoApproveToggle = ({ onToggle, ...props }: AutoApproveToggleProps
 	const { t } = useAppTranslation()
 
 	return (
-		<div
-			className={cn(
-				"flex flex-row flex-wrap justify-center gap-2 max-w-[600px] mx-auto my-2 ",
-				"[@media(min-width:600px)]:gap-4",
-				"[@media(min-width:800px)]:max-w-[900px]",
-				"[@media(min-width:1200px)]:max-w-[1800px]",
-			)}>
+		<div className={cn("flex flex-row flex-wrap gap-2 py-2")}>
 			{Object.values(autoApproveSettingsConfig).map(({ key, descriptionKey, labelKey, icon, testId }) => (
 				<StandardTooltip key={key} content={t(descriptionKey || "")}>
 					<Button
@@ -124,11 +118,12 @@ export const AutoApproveToggle = ({ onToggle, ...props }: AutoApproveToggleProps
 						aria-label={t(labelKey)}
 						aria-pressed={!!props[key]}
 						data-testid={testId}
-						className={cn(" aspect-square h-[80px]", !props[key] && "opacity-50")}>
-						<span className={cn("flex flex-col items-center gap-1")}>
-							<span className={`codicon codicon-${icon}`} />
-							<span className="text-sm text-center">{t(labelKey)}</span>
-						</span>
+						className={cn(
+							"h-7 px-2 rounded-md flex items-center gap-1.5 text-xs whitespace-nowrap",
+							!props[key] && "opacity-50",
+						)}>
+						<span className={`codicon codicon-${icon} text-sm`} />
+						<span>{t(labelKey)}</span>
 					</Button>
 				</StandardTooltip>
 			))}

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

@@ -20,22 +20,20 @@ export function MaxCostInput({ allowedMaxCost, onValueChange }: MaxCostInputProp
 	)
 
 	return (
-		<div className="flex flex-col gap-3 pl-3 flex-auto">
-			<div className="flex items-center gap-4 font-bold">
+		<>
+			<label className="flex items-center gap-2 text-sm font-medium whitespace-nowrap">
 				<span className="codicon codicon-credit-card" />
-				<div>{t("settings:autoApprove.apiCostLimit.title")}</div>
-			</div>
-			<div className="flex items-center">
-				<FormattedTextField
-					value={allowedMaxCost}
-					onValueChange={handleValueChange}
-					formatter={unlimitedDecimalFormatter}
-					placeholder={t("settings:autoApprove.apiCostLimit.unlimited")}
-					style={{ flex: 1, maxWidth: "200px" }}
-					data-testid="max-cost-input"
-					leftNodes={[<span key="dollar">$</span>]}
-				/>
-			</div>
-		</div>
+				{t("settings:autoApprove.apiCostLimit.title")}:
+			</label>
+			<FormattedTextField
+				value={allowedMaxCost}
+				onValueChange={handleValueChange}
+				formatter={unlimitedDecimalFormatter}
+				placeholder={t("settings:autoApprove.apiCostLimit.unlimited")}
+				style={{ maxWidth: "200px" }}
+				data-testid="max-cost-input"
+				leftNodes={[<span key="dollar">$</span>]}
+			/>
+		</>
 	)
 }

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

@@ -20,7 +20,7 @@ export const MaxLimitInputs: React.FC<MaxLimitInputsProps> = ({
 
 	return (
 		<div className="space-y-2">
-			<div className="flex justify-stretch">
+			<div className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-2 items-center">
 				<MaxRequestsInput allowedMaxRequests={allowedMaxRequests} onValueChange={onMaxRequestsChange} />
 				<MaxCostInput allowedMaxCost={allowedMaxCost} onValueChange={onMaxCostChange} />
 			</div>

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

@@ -20,21 +20,19 @@ export function MaxRequestsInput({ allowedMaxRequests, onValueChange }: MaxReque
 	)
 
 	return (
-		<div className="flex flex-col gap-3 pl-3 flex-auto">
-			<div className="flex items-center gap-4 font-bold">
+		<>
+			<label className="flex items-center gap-2 text-sm font-medium whitespace-nowrap">
 				<span className="codicon codicon-pulse" />
-				<div>{t("settings:autoApprove.apiRequestLimit.title")}</div>
-			</div>
-			<div className="flex items-center gap-2">
-				<FormattedTextField
-					value={allowedMaxRequests}
-					onValueChange={handleValueChange}
-					formatter={unlimitedIntegerFormatter}
-					placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
-					style={{ flex: 1, maxWidth: "200px" }}
-					data-testid="max-requests-input"
-				/>
-			</div>
-		</div>
+				{t("settings:autoApprove.apiRequestLimit.title")}:
+			</label>
+			<FormattedTextField
+				value={allowedMaxRequests}
+				onValueChange={handleValueChange}
+				formatter={unlimitedIntegerFormatter}
+				placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
+				style={{ maxWidth: "200px" }}
+				data-testid="max-requests-input"
+			/>
+		</>
 	)
 }

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

@@ -127,6 +127,7 @@
 	},
 	"autoApprove": {
 		"description": "Allow Roo to automatically perform operations without requiring approval. Enable these settings only if you fully trust the AI and understand the associated security risks.",
+		"enabled": "Auto-Approve Enabled",
 		"readOnly": {
 			"label": "Read",
 			"description": "When enabled, Roo will automatically view directory contents and read files without requiring you to click the Approve button.",