ux: Smaller and more subtle auto-approve UI (#7894)

Co-authored-by: Roo Code <roomote@roocode.com>
Co-authored-by: Hannes Rudolph <hrudolph@gmail.com>
Co-authored-by: daniel-lxs <ricciodaniel98@gmail.com>
Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
Co-authored-by: Bruno Bergher <me@brunobergher.com>
Co-authored-by: Daniel <57051444+daniel-lxs@users.noreply.github.com>
Co-authored-by: ItsOnlyBinary <ItsOnlyBinary@users.noreply.github.com>
Co-authored-by: Matt Rubens <mrubens@users.noreply.github.com>
Co-authored-by: John Richmond <5629+jr@users.noreply.github.com>

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

@@ -149,7 +149,7 @@ export const ApiConfigSelector = ({
 					disabled={disabled}
 					data-testid="dropdown-trigger"
 					className={cn(
-						"w-full min-w-0 max-w-full inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
+						"min-w-0 inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
 						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
 						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
 						disabled

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

@@ -0,0 +1,305 @@
+import React from "react"
+import { ListChecks, LayoutList, Settings, CheckCheck } from "lucide-react"
+
+import { vscode } from "@/utils/vscode"
+import { cn } from "@/lib/utils"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
+import { Popover, PopoverContent, PopoverTrigger, StandardTooltip } from "@/components/ui"
+import { AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
+import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles"
+
+interface AutoApproveDropdownProps {
+	disabled?: boolean
+	triggerClassName?: string
+}
+
+export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }: AutoApproveDropdownProps) => {
+	const [open, setOpen] = React.useState(false)
+	const portalContainer = useRooPortal("roo-portal")
+	const { t } = useAppTranslation()
+
+	const {
+		autoApprovalEnabled,
+		setAutoApprovalEnabled,
+		alwaysApproveResubmit,
+		setAlwaysAllowReadOnly,
+		setAlwaysAllowWrite,
+		setAlwaysAllowExecute,
+		setAlwaysAllowBrowser,
+		setAlwaysAllowMcp,
+		setAlwaysAllowModeSwitch,
+		setAlwaysAllowSubtasks,
+		setAlwaysApproveResubmit,
+		setAlwaysAllowFollowupQuestions,
+		setAlwaysAllowUpdateTodoList,
+	} = useExtensionState()
+
+	const baseToggles = useAutoApprovalToggles()
+
+	// Include alwaysApproveResubmit in addition to the base toggles
+	const toggles = React.useMemo(
+		() => ({
+			...baseToggles,
+			alwaysApproveResubmit: alwaysApproveResubmit,
+		}),
+		[baseToggles, alwaysApproveResubmit],
+	)
+
+	const onAutoApproveToggle = React.useCallback(
+		(key: AutoApproveSetting, value: boolean) => {
+			vscode.postMessage({ type: key, bool: value })
+
+			// Update the specific toggle state
+			switch (key) {
+				case "alwaysAllowReadOnly":
+					setAlwaysAllowReadOnly(value)
+					break
+				case "alwaysAllowWrite":
+					setAlwaysAllowWrite(value)
+					break
+				case "alwaysAllowExecute":
+					setAlwaysAllowExecute(value)
+					break
+				case "alwaysAllowBrowser":
+					setAlwaysAllowBrowser(value)
+					break
+				case "alwaysAllowMcp":
+					setAlwaysAllowMcp(value)
+					break
+				case "alwaysAllowModeSwitch":
+					setAlwaysAllowModeSwitch(value)
+					break
+				case "alwaysAllowSubtasks":
+					setAlwaysAllowSubtasks(value)
+					break
+				case "alwaysApproveResubmit":
+					setAlwaysApproveResubmit(value)
+					break
+				case "alwaysAllowFollowupQuestions":
+					setAlwaysAllowFollowupQuestions(value)
+					break
+				case "alwaysAllowUpdateTodoList":
+					setAlwaysAllowUpdateTodoList(value)
+					break
+			}
+
+			// If enabling any option, ensure autoApprovalEnabled is true
+			if (value && !autoApprovalEnabled) {
+				setAutoApprovalEnabled(true)
+				vscode.postMessage({ type: "autoApprovalEnabled", bool: true })
+			}
+		},
+		[
+			autoApprovalEnabled,
+			setAlwaysAllowReadOnly,
+			setAlwaysAllowWrite,
+			setAlwaysAllowExecute,
+			setAlwaysAllowBrowser,
+			setAlwaysAllowMcp,
+			setAlwaysAllowModeSwitch,
+			setAlwaysAllowSubtasks,
+			setAlwaysApproveResubmit,
+			setAlwaysAllowFollowupQuestions,
+			setAlwaysAllowUpdateTodoList,
+			setAutoApprovalEnabled,
+		],
+	)
+
+	const handleSelectAll = React.useCallback(() => {
+		// Enable all options
+		Object.keys(autoApproveSettingsConfig).forEach((key) => {
+			onAutoApproveToggle(key as AutoApproveSetting, true)
+		})
+		// Enable master auto-approval
+		if (!autoApprovalEnabled) {
+			setAutoApprovalEnabled(true)
+			vscode.postMessage({ type: "autoApprovalEnabled", bool: true })
+		}
+	}, [onAutoApproveToggle, autoApprovalEnabled, setAutoApprovalEnabled])
+
+	const handleSelectNone = React.useCallback(() => {
+		// Disable all options
+		Object.keys(autoApproveSettingsConfig).forEach((key) => {
+			onAutoApproveToggle(key as AutoApproveSetting, false)
+		})
+		// Disable master auto-approval
+		if (autoApprovalEnabled) {
+			setAutoApprovalEnabled(false)
+			vscode.postMessage({ type: "autoApprovalEnabled", bool: false })
+		}
+	}, [onAutoApproveToggle, autoApprovalEnabled, setAutoApprovalEnabled])
+
+	const handleOpenSettings = React.useCallback(
+		() =>
+			window.postMessage({ type: "action", action: "settingsButtonClicked", values: { section: "autoApprove" } }),
+		[],
+	)
+
+	// Calculate enabled and total counts as separate properties
+	const enabledCount = React.useMemo(() => {
+		return Object.values(toggles).filter((value) => !!value).length
+	}, [toggles])
+
+	const totalCount = React.useMemo(() => {
+		return Object.keys(toggles).length
+	}, [toggles])
+
+	// Split settings into two columns
+	const settingsArray = Object.values(autoApproveSettingsConfig)
+	const halfLength = Math.ceil(settingsArray.length / 2)
+	const firstColumn = settingsArray.slice(0, halfLength)
+	const secondColumn = settingsArray.slice(halfLength)
+
+	return (
+		<Popover open={open} onOpenChange={setOpen} data-testid="auto-approve-dropdown-root">
+			<StandardTooltip content={t("chat:autoApprove.tooltip")}>
+				<PopoverTrigger
+					disabled={disabled}
+					data-testid="auto-approve-dropdown-trigger"
+					className={cn(
+						"inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
+						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
+						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
+						disabled
+							? "opacity-50 cursor-not-allowed"
+							: "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",
+						triggerClassName,
+					)}>
+					<CheckCheck className="size-3" />
+					<span className="truncate">
+						{enabledCount === totalCount
+							? t("chat:autoApprove.triggerLabelAll")
+							: t("chat:autoApprove.triggerLabel", { count: enabledCount })}
+					</span>
+				</PopoverTrigger>
+			</StandardTooltip>
+			<PopoverContent
+				align="start"
+				sideOffset={4}
+				container={portalContainer}
+				className="p-0 overflow-hidden min-w-96 max-w-9/10"
+				onOpenAutoFocus={(e) => e.preventDefault()}>
+				<div className="flex flex-col w-full">
+					{/* Header with description */}
+					<div className="p-3 border-b border-vscode-dropdown-border">
+						<div className="flex items-center justify-between gap-1 pr-1 pb-2">
+							<h4 className="m-0 font-bold text-base text-vscode-foreground">
+								{t("chat:autoApprove.title")}
+							</h4>
+							<Settings
+								className="inline mb-0.5 mr-1 size-4 cursor-pointer"
+								onClick={handleOpenSettings}
+							/>
+						</div>
+						<p className="m-0 text-xs text-vscode-descriptionForeground">
+							{t("chat:autoApprove.description")}
+						</p>
+					</div>
+
+					{/* Two-column layout for approval options */}
+					<div className="p-3">
+						<div className="grid grid-cols-2 gap-x-4 gap-y-2">
+							{/* First Column */}
+							<div className="space-y-2">
+								{firstColumn.map(({ key, labelKey, descriptionKey, icon }) => {
+									const isEnabled = toggles[key]
+									return (
+										<StandardTooltip key={key} content={t(descriptionKey)}>
+											<button
+												onClick={() => onAutoApproveToggle(key, !isEnabled)}
+												className={cn(
+													"w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs text-left",
+													"transition-all duration-150",
+													"hover:bg-vscode-list-hoverBackground",
+													isEnabled
+														? "bg-vscode-button-background text-vscode-button-foreground"
+														: "bg-transparent text-vscode-foreground opacity-70 hover:opacity-100",
+												)}
+												data-testid={`auto-approve-${key}`}>
+												<span className={`codicon codicon-${icon} text-sm flex-shrink-0`} />
+												<span className="flex-1 truncate">{t(labelKey)}</span>
+												{isEnabled && (
+													<span className="codicon codicon-check text-xs flex-shrink-0" />
+												)}
+											</button>
+										</StandardTooltip>
+									)
+								})}
+							</div>
+
+							{/* Second Column */}
+							<div className="space-y-2">
+								{secondColumn.map(({ key, labelKey, descriptionKey, icon }) => {
+									const isEnabled = toggles[key]
+									return (
+										<StandardTooltip key={key} content={t(descriptionKey)}>
+											<button
+												onClick={() => onAutoApproveToggle(key, !isEnabled)}
+												className={cn(
+													"w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs text-left",
+													"transition-all duration-150",
+													"hover:bg-vscode-list-hoverBackground",
+													isEnabled
+														? "bg-vscode-button-background text-vscode-button-foreground"
+														: "bg-transparent text-vscode-foreground opacity-70 hover:opacity-100",
+												)}
+												data-testid={`auto-approve-${key}`}>
+												<span className={`codicon codicon-${icon} text-sm flex-shrink-0`} />
+												<span className="flex-1 truncate">{t(labelKey)}</span>
+												{isEnabled && (
+													<span className="codicon codicon-check text-xs flex-shrink-0" />
+												)}
+											</button>
+										</StandardTooltip>
+									)
+								})}
+							</div>
+						</div>
+					</div>
+
+					{/* Bottom bar with Select All/None buttons */}
+					<div className="flex flex-row items-center justify-between px-2 py-2 border-t border-vscode-dropdown-border">
+						<div className="flex flex-row gap-1">
+							<button
+								aria-label={t("chat:autoApprove.selectAll")}
+								onClick={handleSelectAll}
+								className={cn(
+									"relative inline-flex items-center justify-center gap-1",
+									"bg-transparent border-none px-2 py-1",
+									"rounded-md text-base font-bold",
+									"text-vscode-foreground",
+									"transition-all duration-150",
+									"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
+									"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+									"active:bg-[rgba(255,255,255,0.1)]",
+									"cursor-pointer",
+								)}>
+								<ListChecks className="w-3.5 h-3.5" />
+								<span>{t("chat:autoApprove.all")}</span>
+							</button>
+							<button
+								aria-label={t("chat:autoApprove.selectNone")}
+								onClick={handleSelectNone}
+								className={cn(
+									"relative inline-flex items-center justify-center gap-1",
+									"bg-transparent border-none px-2 py-1",
+									"rounded-md text-base font-bold",
+									"text-vscode-foreground",
+									"transition-all duration-150",
+									"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
+									"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+									"active:bg-[rgba(255,255,255,0.1)]",
+									"cursor-pointer",
+								)}>
+								<LayoutList className="w-3.5 h-3.5" />
+								<span>{t("chat:autoApprove.none")}</span>
+							</button>
+						</div>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	)
+}

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

@@ -1,273 +0,0 @@
-import { memo, useCallback, useMemo, useState } from "react"
-import { Trans } from "react-i18next"
-import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-
-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 { StandardTooltip } from "@src/components/ui"
-import { useAutoApprovalState } from "@src/hooks/useAutoApprovalState"
-import { useAutoApprovalToggles } from "@src/hooks/useAutoApprovalToggles"
-import DismissibleUpsell from "@src/components/common/DismissibleUpsell"
-import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
-import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
-
-interface AutoApproveMenuProps {
-	style?: React.CSSProperties
-}
-
-const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
-	const [isExpanded, setIsExpanded] = useState(false)
-
-	const {
-		autoApprovalEnabled,
-		setAutoApprovalEnabled,
-		alwaysApproveResubmit,
-		setAlwaysAllowReadOnly,
-		setAlwaysAllowWrite,
-		setAlwaysAllowExecute,
-		setAlwaysAllowBrowser,
-		setAlwaysAllowMcp,
-		setAlwaysAllowModeSwitch,
-		setAlwaysAllowSubtasks,
-		setAlwaysApproveResubmit,
-		setAlwaysAllowFollowupQuestions,
-		setAlwaysAllowUpdateTodoList,
-	} = useExtensionState()
-
-	const { t } = useAppTranslation()
-
-	const { isOpen, openUpsell, closeUpsell, handleConnect } = useCloudUpsell({
-		autoOpenOnAuth: false,
-	})
-
-	const baseToggles = useAutoApprovalToggles()
-	const enabledCount = useMemo(() => Object.values(baseToggles).filter(Boolean).length, [baseToggles])
-
-	// AutoApproveMenu needs alwaysApproveResubmit in addition to the base toggles
-	const toggles = useMemo(
-		() => ({
-			...baseToggles,
-			alwaysApproveResubmit: alwaysApproveResubmit,
-		}),
-		[baseToggles, alwaysApproveResubmit],
-	)
-
-	const { hasEnabledOptions, effectiveAutoApprovalEnabled } = useAutoApprovalState(toggles, autoApprovalEnabled)
-
-	const onAutoApproveToggle = useCallback(
-		(key: AutoApproveSetting, value: boolean) => {
-			vscode.postMessage({ type: key, bool: value })
-
-			// Update the specific toggle state
-			switch (key) {
-				case "alwaysAllowReadOnly":
-					setAlwaysAllowReadOnly(value)
-					break
-				case "alwaysAllowWrite":
-					setAlwaysAllowWrite(value)
-					break
-				case "alwaysAllowExecute":
-					setAlwaysAllowExecute(value)
-					break
-				case "alwaysAllowBrowser":
-					setAlwaysAllowBrowser(value)
-					break
-				case "alwaysAllowMcp":
-					setAlwaysAllowMcp(value)
-					break
-				case "alwaysAllowModeSwitch":
-					setAlwaysAllowModeSwitch(value)
-					break
-				case "alwaysAllowSubtasks":
-					setAlwaysAllowSubtasks(value)
-					break
-				case "alwaysApproveResubmit":
-					setAlwaysApproveResubmit(value)
-					break
-				case "alwaysAllowFollowupQuestions":
-					setAlwaysAllowFollowupQuestions(value)
-					break
-				case "alwaysAllowUpdateTodoList":
-					setAlwaysAllowUpdateTodoList(value)
-					break
-			}
-
-			// Check if we need to update the master auto-approval state
-			// Create a new toggles state with the updated value
-			const updatedToggles = {
-				...toggles,
-				[key]: value,
-			}
-
-			const willHaveEnabledOptions = Object.values(updatedToggles).some((v) => !!v)
-
-			// If enabling the first option, enable master auto-approval
-			if (value && !hasEnabledOptions && willHaveEnabledOptions) {
-				setAutoApprovalEnabled(true)
-				vscode.postMessage({ type: "autoApprovalEnabled", bool: true })
-			}
-			// If disabling the last option, disable master auto-approval
-			else if (!value && hasEnabledOptions && !willHaveEnabledOptions) {
-				setAutoApprovalEnabled(false)
-				vscode.postMessage({ type: "autoApprovalEnabled", bool: false })
-			}
-		},
-		[
-			toggles,
-			hasEnabledOptions,
-			setAlwaysAllowReadOnly,
-			setAlwaysAllowWrite,
-			setAlwaysAllowExecute,
-			setAlwaysAllowBrowser,
-			setAlwaysAllowMcp,
-			setAlwaysAllowModeSwitch,
-			setAlwaysAllowSubtasks,
-			setAlwaysApproveResubmit,
-			setAlwaysAllowFollowupQuestions,
-			setAlwaysAllowUpdateTodoList,
-			setAutoApprovalEnabled,
-		],
-	)
-
-	const toggleExpanded = useCallback(() => {
-		setIsExpanded((prev) => !prev)
-	}, [])
-
-	const enabledActionsList = Object.entries(toggles)
-		.filter(([_key, value]) => !!value)
-		.map(([key]) => t(autoApproveSettingsConfig[key as AutoApproveSetting].labelKey))
-		.join(", ")
-
-	// Update displayed text logic
-	const displayText = useMemo(() => {
-		if (!effectiveAutoApprovalEnabled || !hasEnabledOptions) {
-			return t("chat:autoApprove.none")
-		}
-		return enabledActionsList || t("chat:autoApprove.none")
-	}, [effectiveAutoApprovalEnabled, hasEnabledOptions, enabledActionsList, t])
-
-	const handleOpenSettings = useCallback(
-		() =>
-			window.postMessage({ type: "action", action: "settingsButtonClicked", values: { section: "autoApprove" } }),
-		[],
-	)
-
-	return (
-		<div
-			style={{
-				padding: "0 15px",
-				userSelect: "none",
-				borderTop: isExpanded
-					? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
-					: "none",
-				overflowY: "auto",
-				...style,
-			}}>
-			{isExpanded && (
-				<div className="flex flex-col gap-2 py-4">
-					<div
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							fontSize: "12px",
-						}}>
-						<Trans
-							i18nKey="chat:autoApprove.description"
-							components={{
-								settingsLink: <VSCodeLink href="#" onClick={handleOpenSettings} />,
-							}}
-						/>
-					</div>
-
-					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
-
-					{enabledCount > 7 && (
-						<>
-							<DismissibleUpsell
-								upsellId="autoApprovePowerUserA"
-								onClick={() => openUpsell()}
-								dismissOnClick={false}
-								variant="banner">
-								<Trans
-									i18nKey="cloud:upsell.autoApprovePowerUser"
-									components={{
-										learnMoreLink: <VSCodeLink href="#" />,
-									}}
-								/>
-							</DismissibleUpsell>
-						</>
-					)}
-				</div>
-			)}
-
-			<div
-				style={{
-					display: "flex",
-					alignItems: "center",
-					gap: "8px",
-					padding: "2px 0 0 0",
-					cursor: "pointer",
-				}}
-				onClick={toggleExpanded}>
-				<div onClick={(e) => e.stopPropagation()}>
-					<StandardTooltip
-						content={!hasEnabledOptions ? t("chat:autoApprove.selectOptionsFirst") : undefined}>
-						<VSCodeCheckbox
-							checked={effectiveAutoApprovalEnabled}
-							disabled={!hasEnabledOptions}
-							aria-label={
-								hasEnabledOptions
-									? t("chat:autoApprove.toggleAriaLabel")
-									: t("chat:autoApprove.disabledAriaLabel")
-							}
-							onChange={() => {
-								if (hasEnabledOptions) {
-									const newValue = !(autoApprovalEnabled ?? false)
-									setAutoApprovalEnabled(newValue)
-									vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
-								}
-								// If no options enabled, do nothing
-							}}
-						/>
-					</StandardTooltip>
-				</div>
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						gap: "4px",
-						flex: 1,
-						minWidth: 0,
-					}}>
-					<span
-						style={{
-							color: "var(--vscode-foreground)",
-							flexShrink: 0,
-						}}>
-						{t("chat:autoApprove.title")}
-					</span>
-					<span
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							overflow: "hidden",
-							textOverflow: "ellipsis",
-							whiteSpace: "nowrap",
-							flex: 1,
-							minWidth: 0,
-						}}>
-						{displayText}
-					</span>
-					<span
-						className={`codicon codicon-chevron-right flex-shrink-0 transition-transform duration-200 ease-in-out ${
-							isExpanded ? "-rotate-90 ml-[2px]" : "rotate-0 -ml-[2px]"
-						}`}
-					/>
-				</div>
-			</div>
-			<CloudUpsellDialog open={isOpen} onOpenChange={closeUpsell} onConnect={handleConnect} />
-		</div>
-	)
-}
-
-export default memo(AutoApproveMenu)

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

@@ -26,6 +26,7 @@ import { StandardTooltip } from "@src/components/ui"
 import Thumbnails from "../common/Thumbnails"
 import { ModeSelector } from "./ModeSelector"
 import { ApiConfigSelector } from "./ApiConfigSelector"
+import { AutoApproveDropdown } from "./AutoApproveDropdown"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
 import { IndexingStatusBadge } from "./IndexingStatusBadge"
@@ -1173,34 +1174,31 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					/>
 				)}
 
-				<div className="flex justify-between items-center">
-					<div className="flex items-center gap-1">
-						<div className="max-w-32">
-							<ModeSelector
-								value={mode}
-								title={t("chat:selectMode")}
-								onChange={handleModeChange}
-								triggerClassName="w-full"
-								modeShortcutText={modeShortcutText}
-								customModes={customModes}
-								customModePrompts={customModePrompts}
-							/>
-						</div>
-						<div className="max-w-32">
-							<ApiConfigSelector
-								value={currentConfigId}
-								displayName={displayName}
-								disabled={selectApiConfigDisabled}
-								title={t("chat:selectApiConfig")}
-								onChange={handleApiConfigChange}
-								triggerClassName="w-full text-ellipsis overflow-hidden"
-								listApiConfigMeta={listApiConfigMeta || []}
-								pinnedApiConfigs={pinnedApiConfigs}
-								togglePinnedApiConfig={togglePinnedApiConfig}
-							/>
-						</div>
+				<div className="flex items-center gap-2">
+					<div className="flex items-center gap-2 min-w-40 overflow-clip flex-1">
+						<ModeSelector
+							value={mode}
+							title={t("chat:selectMode")}
+							onChange={handleModeChange}
+							triggerClassName="min-w-20 text-ellipsis overflow-hidden"
+							modeShortcutText={modeShortcutText}
+							customModes={customModes}
+							customModePrompts={customModePrompts}
+						/>
+						<ApiConfigSelector
+							value={currentConfigId}
+							displayName={displayName}
+							disabled={selectApiConfigDisabled}
+							title={t("chat:selectApiConfig")}
+							onChange={handleApiConfigChange}
+							triggerClassName="min-w-16 text-ellipsis overflow-hidden"
+							listApiConfigMeta={listApiConfigMeta || []}
+							pinnedApiConfigs={pinnedApiConfigs}
+							togglePinnedApiConfig={togglePinnedApiConfig}
+						/>
+						<AutoApproveDropdown triggerClassName="min-w-20 text-ellipsis overflow-hidden" />
 					</div>
-					<div className="flex items-center gap-0.5">
+					<div className="flex flex-shrink-0 items-center gap-0.5">
 						{isTtsPlaying && (
 							<StandardTooltip content={t("chat:stopTts")}>
 								<button

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

@@ -51,7 +51,6 @@ import BrowserSessionRow from "./BrowserSessionRow"
 import ChatRow from "./ChatRow"
 import { ChatTextArea } from "./ChatTextArea"
 import TaskHeader from "./TaskHeader"
-import AutoApproveMenu from "./AutoApproveMenu"
 import SystemPromptWarning from "./SystemPromptWarning"
 import ProfileViolationWarning from "./ProfileViolationWarning"
 import { CheckpointWarning } from "./CheckpointWarning"
@@ -1869,27 +1868,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				</div>
 			)}
 
-			{/* 
-			// Flex layout explanation:
-			// 1. Content div above uses flex: "1 1 0" to:
-			//    - Grow to fill available space (flex-grow: 1) 
-			//    - Shrink when AutoApproveMenu needs space (flex-shrink: 1)
-			//    - Start from zero size (flex-basis: 0) to ensure proper distribution
-			//    minHeight: 0 allows it to shrink below its content height
-			//
-			// 2. AutoApproveMenu uses flex: "0 1 auto" to:
-			//    - Not grow beyond its content (flex-grow: 0)
-			//    - Shrink when viewport is small (flex-shrink: 1) 
-			//    - Use its content size as basis (flex-basis: auto)
-			//    This ensures it takes its natural height when there's space
-			//    but becomes scrollable when the viewport is too small
-			*/}
-			{!task && (
-				<div className="mb-1 flex-initial min-h-0">
-					<AutoApproveMenu />
-				</div>
-			)}
-
 			{task && (
 				<>
 					<div className="grow flex" ref={scrollContainerRef}>
@@ -1911,9 +1889,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							initialTopMostItemIndex={groupedMessages.length - 1}
 						/>
 					</div>
-					<div className={`flex-initial min-h-0 ${!areButtonsVisible ? "mb-1" : ""}`}>
-						<AutoApproveMenu />
-					</div>
 					{areButtonsVisible && (
 						<div
 							className={`flex h-9 items-center mb-1 px-[15px] ${

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

@@ -1,307 +0,0 @@
-import { render, fireEvent, screen, waitFor } from "@/utils/test-utils"
-import { useExtensionState } from "@src/context/ExtensionStateContext"
-import { vscode } from "@src/utils/vscode"
-import AutoApproveMenu from "../AutoApproveMenu"
-
-// Mock vscode API
-vi.mock("@src/utils/vscode", () => ({
-	vscode: {
-		postMessage: vi.fn(),
-	},
-}))
-
-// Mock ExtensionStateContext
-vi.mock("@src/context/ExtensionStateContext")
-
-// Mock translation hook
-vi.mock("@src/i18n/TranslationContext", () => ({
-	useAppTranslation: () => ({
-		t: (key: string) => {
-			const translations: Record<string, string> = {
-				"chat:autoApprove.title": "Auto-approve",
-				"chat:autoApprove.none": "None selected",
-				"chat:autoApprove.selectOptionsFirst": "Select at least one option below to enable auto-approval",
-				"chat:autoApprove.description": "Configure auto-approval settings",
-				"settings:autoApprove.readOnly.label": "Read-only operations",
-				"settings:autoApprove.write.label": "Write operations",
-				"settings:autoApprove.execute.label": "Execute operations",
-				"settings:autoApprove.browser.label": "Browser operations",
-				"settings:autoApprove.modeSwitch.label": "Mode switches",
-				"settings:autoApprove.mcp.label": "MCP operations",
-				"settings:autoApprove.subtasks.label": "Subtasks",
-				"settings:autoApprove.resubmit.label": "Resubmit",
-				"settings:autoApprove.followupQuestions.label": "Follow-up questions",
-				"settings:autoApprove.updateTodoList.label": "Update todo list",
-				"settings:autoApprove.apiRequestLimit.title": "API request limit",
-				"settings:autoApprove.apiRequestLimit.unlimited": "Unlimited",
-				"settings:autoApprove.apiRequestLimit.description": "Limit the number of API requests",
-				"settings:autoApprove.readOnly.outsideWorkspace": "Also allow outside workspace",
-				"settings:autoApprove.write.outsideWorkspace": "Also allow outside workspace",
-				"settings:autoApprove.write.delay": "Delay",
-			}
-			return translations[key] || key
-		},
-	}),
-}))
-
-// Get the mocked postMessage function
-const mockPostMessage = vscode.postMessage as ReturnType<typeof vi.fn>
-
-describe("AutoApproveMenu", () => {
-	const defaultExtensionState = {
-		autoApprovalEnabled: true,
-		alwaysAllowReadOnly: false,
-		alwaysAllowReadOnlyOutsideWorkspace: false,
-		alwaysAllowWrite: false,
-		alwaysAllowWriteOutsideWorkspace: false,
-		alwaysAllowExecute: false,
-		alwaysAllowBrowser: false,
-		alwaysAllowMcp: false,
-		alwaysAllowModeSwitch: false,
-		alwaysAllowSubtasks: false,
-		alwaysApproveResubmit: false,
-		alwaysAllowFollowupQuestions: false,
-		alwaysAllowUpdateTodoList: false,
-		writeDelayMs: 3000,
-		allowedMaxRequests: undefined,
-		setAutoApprovalEnabled: vi.fn(),
-		setAlwaysAllowReadOnly: vi.fn(),
-		setAlwaysAllowWrite: vi.fn(),
-		setAlwaysAllowExecute: vi.fn(),
-		setAlwaysAllowBrowser: vi.fn(),
-		setAlwaysAllowMcp: vi.fn(),
-		setAlwaysAllowModeSwitch: vi.fn(),
-		setAlwaysAllowSubtasks: vi.fn(),
-		setAlwaysApproveResubmit: vi.fn(),
-		setAlwaysAllowFollowupQuestions: vi.fn(),
-		setAlwaysAllowUpdateTodoList: vi.fn(),
-		setAllowedMaxRequests: vi.fn(),
-	}
-
-	beforeEach(() => {
-		vi.clearAllMocks()
-		;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue(defaultExtensionState)
-	})
-
-	describe("Master checkbox behavior", () => {
-		it("should show 'None selected' when no sub-options are selected", () => {
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				autoApprovalEnabled: false,
-				alwaysAllowReadOnly: false,
-				alwaysAllowWrite: false,
-				alwaysAllowExecute: false,
-				alwaysAllowBrowser: false,
-				alwaysAllowModeSwitch: false,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Check that the text shows "None selected"
-			expect(screen.getByText("None selected")).toBeInTheDocument()
-		})
-
-		it("should show enabled options when sub-options are selected", () => {
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				autoApprovalEnabled: true,
-				alwaysAllowReadOnly: true,
-				alwaysAllowWrite: false,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Check that the text shows the enabled option
-			expect(screen.getByText("Read-only operations")).toBeInTheDocument()
-		})
-
-		it("should not allow toggling master checkbox when no options are selected", () => {
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				autoApprovalEnabled: false,
-				alwaysAllowReadOnly: false,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Click on the master checkbox
-			const masterCheckbox = screen.getByRole("checkbox")
-			fireEvent.click(masterCheckbox)
-
-			// Should not send any message since no options are selected
-			expect(mockPostMessage).not.toHaveBeenCalled()
-		})
-
-		it("should toggle master checkbox when options are selected", () => {
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				autoApprovalEnabled: true,
-				alwaysAllowReadOnly: true,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Click on the master checkbox
-			const masterCheckbox = screen.getByRole("checkbox")
-			fireEvent.click(masterCheckbox)
-
-			// Should toggle the master checkbox
-			expect(mockPostMessage).toHaveBeenCalledWith({
-				type: "autoApprovalEnabled",
-				bool: false,
-			})
-		})
-	})
-
-	describe("Sub-option toggles", () => {
-		it("should toggle read-only operations", async () => {
-			const mockSetAlwaysAllowReadOnly = vi.fn()
-
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				setAlwaysAllowReadOnly: mockSetAlwaysAllowReadOnly,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Expand the menu
-			const menuContainer = screen.getByText("Auto-approve").parentElement
-			fireEvent.click(menuContainer!)
-
-			// Wait for the menu to expand and find the read-only button
-			await waitFor(() => {
-				expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument()
-			})
-
-			const readOnlyButton = screen.getByTestId("always-allow-readonly-toggle")
-			fireEvent.click(readOnlyButton)
-
-			expect(mockPostMessage).toHaveBeenCalledWith({
-				type: "alwaysAllowReadOnly",
-				bool: true,
-			})
-		})
-
-		it("should toggle write operations", async () => {
-			const mockSetAlwaysAllowWrite = vi.fn()
-
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				setAlwaysAllowWrite: mockSetAlwaysAllowWrite,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Expand the menu
-			const menuContainer = screen.getByText("Auto-approve").parentElement
-			fireEvent.click(menuContainer!)
-
-			await waitFor(() => {
-				expect(screen.getByTestId("always-allow-write-toggle")).toBeInTheDocument()
-			})
-
-			const writeButton = screen.getByTestId("always-allow-write-toggle")
-			fireEvent.click(writeButton)
-
-			expect(mockPostMessage).toHaveBeenCalledWith({
-				type: "alwaysAllowWrite",
-				bool: true,
-			})
-		})
-	})
-
-	describe("Complex scenarios", () => {
-		it("should display multiple enabled options in summary text", () => {
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				autoApprovalEnabled: true,
-				alwaysAllowReadOnly: true,
-				alwaysAllowWrite: true,
-				alwaysAllowExecute: true,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Should show all enabled options in the summary
-			expect(screen.getByText("Read-only operations, Write operations, Execute operations")).toBeInTheDocument()
-		})
-
-		it("should handle enabling first option when none selected", async () => {
-			const mockSetAutoApprovalEnabled = vi.fn()
-			const mockSetAlwaysAllowReadOnly = vi.fn()
-
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				autoApprovalEnabled: false,
-				alwaysAllowReadOnly: false,
-				setAutoApprovalEnabled: mockSetAutoApprovalEnabled,
-				setAlwaysAllowReadOnly: mockSetAlwaysAllowReadOnly,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Expand the menu
-			const menuContainer = screen.getByText("Auto-approve").parentElement
-			fireEvent.click(menuContainer!)
-
-			await waitFor(() => {
-				expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument()
-			})
-
-			// Enable read-only
-			const readOnlyButton = screen.getByTestId("always-allow-readonly-toggle")
-			fireEvent.click(readOnlyButton)
-
-			// Should enable the sub-option
-			expect(mockPostMessage).toHaveBeenCalledWith({
-				type: "alwaysAllowReadOnly",
-				bool: true,
-			})
-
-			// Should also enable master auto-approval
-			expect(mockPostMessage).toHaveBeenCalledWith({
-				type: "autoApprovalEnabled",
-				bool: true,
-			})
-		})
-
-		it("should handle disabling last option", async () => {
-			const mockSetAutoApprovalEnabled = vi.fn()
-			const mockSetAlwaysAllowReadOnly = vi.fn()
-
-			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
-				...defaultExtensionState,
-				autoApprovalEnabled: true,
-				alwaysAllowReadOnly: true,
-				setAutoApprovalEnabled: mockSetAutoApprovalEnabled,
-				setAlwaysAllowReadOnly: mockSetAlwaysAllowReadOnly,
-			})
-
-			render(<AutoApproveMenu />)
-
-			// Expand the menu
-			const menuContainer = screen.getByText("Auto-approve").parentElement
-			fireEvent.click(menuContainer!)
-
-			await waitFor(() => {
-				expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument()
-			})
-
-			// Disable read-only (the last enabled option)
-			const readOnlyButton = screen.getByTestId("always-allow-readonly-toggle")
-			fireEvent.click(readOnlyButton)
-
-			// Should disable the sub-option
-			expect(mockPostMessage).toHaveBeenCalledWith({
-				type: "alwaysAllowReadOnly",
-				bool: false,
-			})
-
-			// Should also disable master auto-approval
-			expect(mockPostMessage).toHaveBeenCalledWith({
-				type: "autoApprovalEnabled",
-				bool: false,
-			})
-		})
-	})
-})

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

@@ -247,12 +247,18 @@
 		"issues": "Sembla que estàs tenint problemes amb Windows PowerShell, si us plau consulta aquesta documentació per a més informació."
 	},
 	"autoApprove": {
-		"title": "Aprovació automàtica:",
+		"tooltip": "Gestiona la configuració d'aprovació automàtica",
+		"title": "Aprovació automàtica",
+		"all": "Totes",
 		"none": "Cap",
-		"description": "L'aprovació automàtica permet a Roo Code realitzar accions sense demanar permís. Activa-la només per a accions en les que confies plenament. Configuració més detallada disponible a la <settingsLink>Configuració</settingsLink>.",
-		"selectOptionsFirst": "Selecciona almenys una opció a continuació per activar l'aprovació automàtica",
+		"description": "Executeu aquestes accions sense demanar permís. Activeu-ho només per a les accions en què confieu plenament.",
+		"selectOptionsFirst": "Seleccioneu almenys una opció a continuació per activar l'aprovació automàtica",
 		"toggleAriaLabel": "Commuta l'aprovació automàtica",
-		"disabledAriaLabel": "Aprovació automàtica desactivada: seleccioneu primer les opcions"
+		"disabledAriaLabel": "Aprovació automàtica desactivada: seleccioneu primer les opcions",
+		"triggerLabel_zero": "Sense aprovació automàtica",
+		"triggerLabel_one": "1 aprovació automàtica",
+		"triggerLabel_other": "{{count}} aprovacions automàtiques",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Pensant",

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

@@ -247,12 +247,18 @@
 		"issues": "Es scheint, dass du Probleme mit Windows PowerShell hast, bitte sieh dir dies an"
 	},
 	"autoApprove": {
-		"title": "Automatische Genehmigung:",
+		"tooltip": "Einstellungen für die automatische Genehmigung verwalten",
+		"title": "Automatische Genehmigung",
+		"all": "Alle",
 		"none": "Keine",
-		"description": "Automatische Genehmigung erlaubt Roo Code, Aktionen ohne Nachfrage auszuführen. Aktiviere dies nur für Aktionen, denen du vollständig vertraust. Detailliertere Konfiguration verfügbar in den <settingsLink>Einstellungen</settingsLink>.",
-		"selectOptionsFirst": "Wähle mindestens eine der folgenden Optionen aus, um die automatische Genehmigung zu aktivieren",
+		"description": "Führe diese Aktionen aus, ohne um Erlaubnis zu fragen. Aktiviere dies nur für Aktionen, denen du voll vertraust.",
+		"selectOptionsFirst": "Wähle zuerst mindestens eine Option unten aus, um die automatische Genehmigung zu aktivieren",
 		"toggleAriaLabel": "Automatische Genehmigung umschalten",
-		"disabledAriaLabel": "Automatische Genehmigung deaktiviert - zuerst Optionen auswählen"
+		"disabledAriaLabel": "Automatische Genehmigung deaktiviert - wähle zuerst Optionen aus",
+		"triggerLabel_zero": "Keine automatische Genehmigung",
+		"triggerLabel_one": "1 automatisch genehmigt",
+		"triggerLabel_other": "{{count}} automatisch genehmigt",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Denke nach",

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

@@ -271,12 +271,18 @@
 		"issues": "It seems like you're having Windows PowerShell issues, please see this"
 	},
 	"autoApprove": {
-		"title": "Auto-approve:",
+		"tooltip": "Manage auto-approval settings",
+		"title": "Auto-approve",
+		"all": "All",
 		"none": "None",
-		"description": "Auto-approve allows Roo Code to perform actions without asking for permission. Only enable for actions you fully trust. More detailed configuration available in <settingsLink>Settings</settingsLink>.",
+		"description": "Run these actions without asking for permission. Only enable for actions you fully trust.",
 		"selectOptionsFirst": "Select at least one option below to enable auto-approval",
 		"toggleAriaLabel": "Toggle auto-approval",
-		"disabledAriaLabel": "Auto-approval disabled - select options first"
+		"disabledAriaLabel": "Auto-approval disabled - select options first",
+		"triggerLabel_zero": "No auto-approve",
+		"triggerLabel_one": "1 auto-approved",
+		"triggerLabel_other": "{{count}} auto-approved",
+		"triggerLabelAll": "YOLO"
 	},
 	"announcement": {
 		"title": "🎉 Roo Code {{version}} Released",

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

@@ -247,12 +247,18 @@
 		"issues": "Parece que estás teniendo problemas con Windows PowerShell, por favor consulta esta"
 	},
 	"autoApprove": {
-		"title": "Auto-aprobar:",
+		"tooltip": "Gestionar la configuración de aprobación automática",
+		"title": "Aprobación automática",
+		"all": "Todo",
 		"none": "Ninguno",
-		"description": "Auto-aprobar permite a Roo Code realizar acciones sin pedir permiso. Habilita solo para acciones en las que confíes plenamente. Configuración más detallada disponible en <settingsLink>Configuración</settingsLink>.",
+		"description": "Ejecuta estas acciones sin pedir permiso. Habilita esto solo para acciones en las que confíes plenamente.",
 		"selectOptionsFirst": "Selecciona al menos una opción a continuación para habilitar la aprobación automática",
 		"toggleAriaLabel": "Alternar aprobación automática",
-		"disabledAriaLabel": "Aprobación automática desactivada: seleccione primero las opciones"
+		"disabledAriaLabel": "Aprobación automática deshabilitada - selecciona primero las opciones",
+		"triggerLabel_zero": "Sin aprobación automática",
+		"triggerLabel_one": "1 aprobado automáticamente",
+		"triggerLabel_other": "{{count}} aprobados automáticamente",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Pensando",

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

@@ -247,12 +247,18 @@
 		"issues": "Il semble que vous rencontriez des problèmes avec Windows PowerShell, veuillez consulter ce"
 	},
 	"autoApprove": {
-		"title": "Auto-approbation :",
-		"none": "Aucune",
-		"description": "L'auto-approbation permet à Roo Code d'effectuer des actions sans demander d'autorisation. Activez-la uniquement pour les actions auxquelles vous faites entièrement confiance. Configuration plus détaillée disponible dans les <settingsLink>Paramètres</settingsLink>.",
-		"selectOptionsFirst": "Sélectionnez au moins une option ci-dessous pour activer l'auto-approbation",
+		"tooltip": "Gérer les paramètres d'approbation automatique",
+		"title": "Approbation automatique",
+		"all": "Tout",
+		"none": "Aucun",
+		"description": "Exécutez ces actions sans demander la permission. N'activez cette option que pour les actions en lesquelles vous avez entièrement confiance.",
+		"selectOptionsFirst": "Sélectionnez au moins une option ci-dessous pour activer l'approbation automatique",
 		"toggleAriaLabel": "Activer/désactiver l'approbation automatique",
-		"disabledAriaLabel": "Approbation automatique désactivée - sélectionnez d'abord les options"
+		"disabledAriaLabel": "Approbation automatique désactivée - sélectionnez d'abord les options",
+		"triggerLabel_zero": "Pas d'approbation automatique",
+		"triggerLabel_one": "1 approuvé automatiquement",
+		"triggerLabel_other": "{{count}} approuvés automatiquement",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Réflexion",

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

@@ -247,12 +247,18 @@
 		"issues": "ऐसा लगता है कि आपको Windows PowerShell के साथ समस्याएँ हो रही हैं, कृपया इसे देखें"
 	},
 	"autoApprove": {
-		"title": "स्वत:-स्वीकृति:",
+		"tooltip": "स्वतः-अनुमोदन सेटिंग्स प्रबंधित करें",
+		"title": "स्वतः-अनुमोदन",
+		"all": "सभी",
 		"none": "कोई नहीं",
-		"description": "स्वत:-स्वीकृति Roo Code को अनुमति मांगे बिना क्रियाएँ करने की अनुमति देती है। केवल उन क्रियाओं के लिए सक्षम करें जिन पर आप पूरी तरह से विश्वास करते हैं। अधिक विस्तृत कॉन्फ़िगरेशन <settingsLink>सेटिंग्स</settingsLink> में उपलब्ध है।",
-		"selectOptionsFirst": "स्वतः-अनुमोदन सक्षम करने के लिए नीचे दिए گئے विकल्पों में से कम से कम एक का चयन करें",
+		"description": "अनुमति मांगे बिना इन क्रियाओं को चलाएं। इसे केवल उन क्रियाओं के लिए सक्षम करें जिन पर आप पूरी तरह भरोसा करते हैं।",
+		"selectOptionsFirst": "स्वतः-अनुमोदन सक्षम करने के लिए नीचे दिए गए कम से कम एक विकल्प का चयन करें",
 		"toggleAriaLabel": "स्वतः-अनुमोदन टॉगल करें",
-		"disabledAriaLabel": "स्वतः-अनुमोदन अक्षम - पहले विकल्प चुनें"
+		"disabledAriaLabel": "स्वतः-अनुमोदन अक्षम - पहले विकल्प चुनें",
+		"triggerLabel_zero": "कोई स्वतः-अनुमोदन नहीं",
+		"triggerLabel_one": "1 स्वतः-अनुमोदित",
+		"triggerLabel_other": "{{count}} स्वतः-अनुमोदित",
+		"triggerLabelAll": "योलो"
 	},
 	"reasoning": {
 		"thinking": "विचार कर रहा है",

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

@@ -274,12 +274,18 @@
 		"issues": "Sepertinya kamu mengalami masalah Windows PowerShell, silakan lihat ini"
 	},
 	"autoApprove": {
-		"title": "Auto-approve:",
+		"tooltip": "Kelola pengaturan persetujuan otomatis",
+		"title": "Persetujuan otomatis",
+		"all": "Semua",
 		"none": "Tidak Ada",
-		"description": "Auto-approve memungkinkan Roo Code melakukan aksi tanpa meminta izin. Hanya aktifkan untuk aksi yang benar-benar kamu percayai. Konfigurasi lebih detail tersedia di <settingsLink>Pengaturan</settingsLink>.",
+		"description": "Jalankan tindakan ini tanpa meminta izin. Aktifkan hanya untuk tindakan yang Anda percayai sepenuhnya.",
 		"selectOptionsFirst": "Pilih setidaknya satu opsi di bawah untuk mengaktifkan persetujuan otomatis",
 		"toggleAriaLabel": "Beralih persetujuan otomatis",
-		"disabledAriaLabel": "Persetujuan otomatis dinonaktifkan - pilih opsi terlebih dahulu"
+		"disabledAriaLabel": "Persetujuan otomatis dinonaktifkan - pilih opsi terlebih dahulu",
+		"triggerLabel_zero": "Tidak ada persetujuan otomatis",
+		"triggerLabel_one": "1 disetujui otomatis",
+		"triggerLabel_other": "{{count}} disetujui otomatis",
+		"triggerLabelAll": "YOLO"
 	},
 	"announcement": {
 		"title": "🎉 Roo Code {{version}} Dirilis",

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

@@ -247,12 +247,18 @@
 		"issues": "Sembra che tu stia avendo problemi con Windows PowerShell, consulta questa"
 	},
 	"autoApprove": {
-		"title": "Auto-approvazione:",
-		"none": "Nessuna",
-		"description": "L'auto-approvazione permette a Roo Code di eseguire azioni senza chiedere permesso. Abilita solo per azioni di cui ti fidi completamente. Configurazione più dettagliata disponibile nelle <settingsLink>Impostazioni</settingsLink>.",
-		"selectOptionsFirst": "Seleziona almeno un'opzione qui sotto per abilitare l'auto-approvazione",
-		"toggleAriaLabel": "Attiva/disattiva approvazione automatica",
-		"disabledAriaLabel": "Approvazione automatica disabilitata - seleziona prima le opzioni"
+		"tooltip": "Gestisci le impostazioni di approvazione automatica",
+		"title": "Approvazione automatica",
+		"all": "Tutti",
+		"none": "Nessuno",
+		"description": "Esegui queste azioni senza chiedere il permesso. Abilita questa opzione solo per le azioni di cui ti fidi completamente.",
+		"selectOptionsFirst": "Seleziona almeno un'opzione qui sotto per abilitare l'approvazione automatica",
+		"toggleAriaLabel": "Attiva/disattiva l'approvazione automatica",
+		"disabledAriaLabel": "Approvazione automatica disabilitata - seleziona prima le opzioni",
+		"triggerLabel_zero": "Nessuna approvazione automatica",
+		"triggerLabel_one": "1 approvato automaticamente",
+		"triggerLabel_other": "{{count}} approvati automaticamente",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Sto pensando",

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

@@ -247,12 +247,18 @@
 		"issues": "Windows PowerShellに問題があるようです。こちらを参照してください"
 	},
 	"autoApprove": {
-		"title": "自動承認:",
+		"tooltip": "自動承認設定を管理",
+		"title": "自動承認",
+		"all": "すべて",
 		"none": "なし",
-		"description": "自動承認はRoo Codeに許可を求めずに操作を実行する権限を与えます。完全に信頼できる操作のみ有効にしてください。より詳細な設定は<settingsLink>設定</settingsLink>で利用できます。",
+		"description": "許可を求めずにこれらのアクションを実行します。完全に信頼できるアクションに対してのみ有効にしてください。",
 		"selectOptionsFirst": "自動承認を有効にするには、以下のオプションを少なくとも1つ選択してください",
 		"toggleAriaLabel": "自動承認の切り替え",
-		"disabledAriaLabel": "自動承認が無効です - 最初にオプションを選択してください"
+		"disabledAriaLabel": "自動承認が無効です - 最初にオプションを選択してください",
+		"triggerLabel_zero": "自動承認なし",
+		"triggerLabel_one": "1件自動承認済み",
+		"triggerLabel_other": "{{count}}件自動承認済み",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "考え中",

webview-ui/src/i18n/locales/ja/cloud.json

@@ -15,7 +15,7 @@
 	"taskSyncDescription": "Roo Code Cloudでタスクを表示・共有するために同期",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Roo Code Cloudからタスクを制御できるようにする",
-	"remoteControlRequiresTaskSync": "Roomote Controlを使用するにはタ스크同期を有効にする必要があります",
+	"remoteControlRequiresTaskSync": "Roomote Controlを使用するにはタスク同期を有効にする必要があります",
 	"taskSyncManagedByOrganization": "タスク同期は組織によって管理されます",
 	"usageMetricsAlwaysReported": "ログイン時にはモデル使用情報が常に報告されます",
 	"authWaiting": "認証完了をお待ちください...",

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

@@ -247,12 +247,18 @@
 		"issues": "Windows PowerShell에 문제가 있는 것 같습니다. 다음을 참조하세요"
 	},
 	"autoApprove": {
-		"title": "자동 승인:",
+		"tooltip": "자동 승인 설정 관리",
+		"title": "자동 승인",
+		"all": "모두",
 		"none": "없음",
-		"description": "자동 승인을 사용하면 Roo Code가 권한을 요청하지 않고 작업을 수행할 수 있습니다. 완전히 신뢰할 수 있는 작업에만 활성화하세요. 더 자세한 구성은 <settingsLink>설정</settingsLink>에서 사용할 수 있습니다.",
-		"selectOptionsFirst": "자동 승인을 활성화하려면 아래 옵션 중 하나 이상을 선택하세요",
-		"toggleAriaLabel": "자동 승인 전환",
-		"disabledAriaLabel": "자동 승인 비활성화됨 - 먼저 옵션을 선택하세요"
+		"description": "권한을 묻지 않고 이러한 작업을 실행합니다. 완전히 신뢰하는 작업에 대해서만 활성화하십시오.",
+		"selectOptionsFirst": "자동 승인을 활성화하려면 아래 옵션 중 하나 이상을 선택하십시오",
+		"toggleAriaLabel": "자동 승인 토글",
+		"disabledAriaLabel": "자동 승인 비활성화됨 - 먼저 옵션을 선택하십시오",
+		"triggerLabel_zero": "자동 승인 없음",
+		"triggerLabel_one": "1개 자동 승인됨",
+		"triggerLabel_other": "{{count}}개 자동 승인됨",
+		"triggerLabelAll": "욜로"
 	},
 	"reasoning": {
 		"thinking": "생각 중",

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

@@ -247,12 +247,18 @@
 		"issues": "Het lijkt erop dat je problemen hebt met Windows PowerShell, zie deze"
 	},
 	"autoApprove": {
-		"title": "Automatisch goedkeuren:",
+		"tooltip": "Beheer instellingen voor automatische goedkeuring",
+		"title": "Automatisch goedkeuren",
+		"all": "Alles",
 		"none": "Geen",
-		"description": "Met automatisch goedkeuren kan Roo Code acties uitvoeren zonder om toestemming te vragen. Schakel dit alleen in voor acties die je volledig vertrouwt. Meer gedetailleerde configuratie beschikbaar in de <settingsLink>Instellingen</settingsLink>.",
-		"selectOptionsFirst": "Selecteer hieronder minstens één optie om automatische goedkeuring in te schakelen",
+		"description": "Voer deze acties uit zonder toestemming te vragen. Schakel dit alleen in voor acties die je volledig vertrouwt.",
+		"selectOptionsFirst": "Selecteer hieronder minstens één optie om automatisch goedkeuren in te schakelen",
 		"toggleAriaLabel": "Automatisch goedkeuren in-/uitschakelen",
-		"disabledAriaLabel": "Automatisch goedkeuren uitgeschakeld - selecteer eerst opties"
+		"disabledAriaLabel": "Automatisch goedkeuren uitgeschakeld - selecteer eerst opties",
+		"triggerLabel_zero": "Geen automatische goedkeuring",
+		"triggerLabel_one": "1 automatisch goedgekeurd",
+		"triggerLabel_other": "{{count}} automatisch goedgekeurd",
+		"triggerLabelAll": "YOLO"
 	},
 	"announcement": {
 		"title": "🎉 Roo Code {{version}} uitgebracht",

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

@@ -247,12 +247,20 @@
 		"issues": "Wygląda na to, że masz problemy z Windows PowerShell, proszę zapoznaj się z tym"
 	},
 	"autoApprove": {
-		"title": "Automatyczne zatwierdzanie:",
-		"none": "Brak",
-		"description": "Automatyczne zatwierdzanie pozwala Roo Code wykonywać działania bez pytania o pozwolenie. Włącz tylko dla działań, którym w pełni ufasz. Bardziej szczegółowa konfiguracja dostępna w <settingsLink>Ustawieniach</settingsLink>.",
+		"tooltip": "Zarządzaj ustawieniami automatycznego zatwierdzania",
+		"title": "Automatyczne zatwierdzanie",
+		"all": "Wszystkie",
+		"none": "Żadne",
+		"description": "Wykonuj te działania bez pytania o zgodę. Włącz tę opcję tylko dla działań, którym w pełni ufasz.",
 		"selectOptionsFirst": "Wybierz co najmniej jedną opcję poniżej, aby włączyć automatyczne zatwierdzanie",
 		"toggleAriaLabel": "Przełącz automatyczne zatwierdzanie",
-		"disabledAriaLabel": "Automatyczne zatwierdzanie wyłączone - najpierw wybierz opcje"
+		"disabledAriaLabel": "Automatyczne zatwierdzanie wyłączone - najpierw wybierz opcje",
+		"triggerLabel_zero": "Brak automatycznej akceptacji",
+		"triggerLabel_one": "1 automatycznie zaakceptowany",
+		"triggerLabel_few": "{{count}} automatycznie zaakceptowane",
+		"triggerLabel_many": "{{count}} automatycznie zaakceptowanych",
+		"triggerLabel_other": "{{count}} automatycznie zaakceptowanych",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Myślenie",

webview-ui/src/i18n/locales/pt-BR/chat.json

@@ -247,12 +247,18 @@
 		"issues": "Parece que você está tendo problemas com o Windows PowerShell, por favor veja este"
 	},
 	"autoApprove": {
-		"title": "Aprovação automática:",
-		"none": "Nenhuma",
-		"description": "A aprovação automática permite que o Roo Code execute ações sem pedir permissão. Ative apenas para ações nas quais você confia totalmente. Configuração mais detalhada disponível nas <settingsLink>Configurações</settingsLink>.",
+		"tooltip": "Gerenciar configurações de aprovação automática",
+		"title": "Aprovação automática",
+		"all": "Todos",
+		"none": "Nenhum",
+		"description": "Execute estas ações sem pedir permissão. Ative isso apenas para ações em que você confia totalmente.",
 		"selectOptionsFirst": "Selecione pelo menos uma opção abaixo para ativar a aprovação automática",
 		"toggleAriaLabel": "Alternar aprovação automática",
-		"disabledAriaLabel": "Aprovação automática desativada - selecione as opções primeiro"
+		"disabledAriaLabel": "Aprovação automática desativada - selecione as opções primeiro",
+		"triggerLabel_zero": "Nenhuma aprovação automática",
+		"triggerLabel_one": "1 aprovado automaticamente",
+		"triggerLabel_other": "{{count}} aprovados automaticamente",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Pensando",

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

@@ -247,12 +247,20 @@
 		"issues": "Похоже, у вас проблемы с Windows PowerShell, пожалуйста, ознакомьтесь с этим"
 	},
 	"autoApprove": {
-		"title": "Автоодобрение:",
-		"none": "Нет",
-		"description": "Автоодобрение позволяет Roo Code выполнять действия без запроса разрешения. Включайте только для полностью доверенных действий. Более подробная настройка доступна в <settingsLink>Настройках</settingsLink>.",
-		"selectOptionsFirst": "Выберите хотя бы один параметр ниже, чтобы включить автоодобрение",
-		"toggleAriaLabel": "Переключить автоодобрение",
-		"disabledAriaLabel": "Автоодобрение отключено - сначала выберите опции"
+		"tooltip": "Управление настройками автоматического одобрения",
+		"title": "Авто-утверждение",
+		"all": "Все",
+		"none": "Ни одного",
+		"description": "Выполняйте эти действия, не спрашивая разрешения. Включайте это только для действий, которым вы полностью доверяете.",
+		"selectOptionsFirst": "Выберите хотя бы один вариант ниже, чтобы включить авто-утверждение",
+		"toggleAriaLabel": "Переключить авто-утверждение",
+		"disabledAriaLabel": "Авто-утверждение отключено - сначала выберите опции",
+		"triggerLabel_zero": "Нет авто-утверждения",
+		"triggerLabel_one": "1 авто-утвержден",
+		"triggerLabel_few": "{{count}} авто-утверждено",
+		"triggerLabel_many": "{{count}} авто-утверждено",
+		"triggerLabel_other": "{{count}} авто-утверждено",
+		"triggerLabelAll": "YOLO"
 	},
 	"announcement": {
 		"title": "🎉 Выпущен Roo Code {{version}}",

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

@@ -247,12 +247,18 @@
 		"issues": "Windows PowerShell ile ilgili sorunlar yaşıyor gibi görünüyorsunuz, lütfen şu konuya bakın"
 	},
 	"autoApprove": {
-		"title": "Otomatik-onay:",
+		"tooltip": "Otomatik onay ayarlarını yönet",
+		"title": "Otomatik onayla",
+		"all": "Tümü",
 		"none": "Hiçbiri",
-		"description": "Otomatik onay, Roo Code'un izin istemeden işlemler gerçekleştirmesine olanak tanır. Yalnızca tamamen güvendiğiniz eylemler için etkinleştirin. Daha detaylı yapılandırma <settingsLink>Ayarlar</settingsLink>'da mevcuttur.",
-		"selectOptionsFirst": "Otomatik onayı etkinleştirmek için aşağıdan en az bir seçenek belirleyin",
-		"toggleAriaLabel": "Otomatik onayı değiştir",
-		"disabledAriaLabel": "Otomatik onay devre dışı - önce seçenekleri belirleyin"
+		"description": "İzin istemeden bu eylemleri gerçekleştirin. Bunu yalnızca tamamen güvendiğiniz eylemler için etkinleştirin.",
+		"selectOptionsFirst": "Otomatik onayı etkinleştirmek için aşağıdan en az bir seçenek seçin",
+		"toggleAriaLabel": "Otomatik onayı aç/kapat",
+		"disabledAriaLabel": "Otomatik onay devre dışı - önce seçenekleri seçin",
+		"triggerLabel_zero": "Otomatik onay yok",
+		"triggerLabel_one": "1 otomatik onaylandı",
+		"triggerLabel_other": "{{count}} otomatik onaylandı",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Düşünüyor",

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

@@ -247,12 +247,18 @@
 		"issues": "Có vẻ như bạn đang gặp vấn đề với Windows PowerShell, vui lòng xem"
 	},
 	"autoApprove": {
-		"title": "Tự động phê duyệt:",
-		"none": "Không",
-		"description": "Tự động phê duyệt cho phép Roo Code thực hiện hành động mà không cần xin phép. Chỉ bật cho các hành động bạn hoàn toàn tin tưởng. Cấu hình chi tiết hơn có sẵn trong <settingsLink>Cài đặt</settingsLink>.",
-		"selectOptionsFirst": "Chọn ít nhất một tùy chọn bên dưới để bật tự động phê duyệt",
-		"toggleAriaLabel": "Chuyển đổi tự động phê duyệt",
-		"disabledAriaLabel": "Tự động phê duyệt bị vô hiệu hóa - hãy chọn các tùy chọn trước"
+		"tooltip": "Quản lý cài đặt tự động phê duyệt",
+		"title": "Tự động phê duyệt",
+		"all": "Tất cả",
+		"none": "Không có",
+		"description": "Thực hiện các hành động này mà không cần xin phép. Chỉ bật tính năng này cho các hành động bạn hoàn toàn tin tưởng.",
+		"selectOptionsFirst": "Chọn ít nhất một tùy chọn bên dưới để bật tính năng tự động phê duyệt",
+		"toggleAriaLabel": "Bật/tắt tự động phê duyệt",
+		"disabledAriaLabel": "Tự động phê duyệt đã tắt - trước tiên hãy chọn các tùy chọn",
+		"triggerLabel_zero": "Không có tự động phê duyệt",
+		"triggerLabel_one": "1 được tự động phê duyệt",
+		"triggerLabel_other": "{{count}} được tự động phê duyệt",
+		"triggerLabelAll": "YOLO"
 	},
 	"reasoning": {
 		"thinking": "Đang suy nghĩ",

webview-ui/src/i18n/locales/zh-CN/chat.json

@@ -247,12 +247,18 @@
 		"issues": "看起来您遇到了Windows PowerShell问题，请参阅此"
 	},
 	"autoApprove": {
-		"title": "自动批准:",
+		"tooltip": "管理自动批准设置",
+		"title": "自动批准",
+		"all": "全部",
 		"none": "无",
-		"description": "允许直接执行操作无需确认，请谨慎启用。前往<settingsLink>设置</settingsLink>调整",
-		"selectOptionsFirst": "选择至少一个下面的选项以启用自动批准",
+		"description": "无需请求权限即可执行这些操作。仅对您完全信任的操作启用此功能。",
+		"selectOptionsFirst": "请至少选择以下一个选项以启用自动批准",
 		"toggleAriaLabel": "切换自动批准",
-		"disabledAriaLabel": "自动批准已禁用 - 请先选择选项"
+		"disabledAriaLabel": "自动批准已禁用 - 请先选择选项",
+		"triggerLabel_zero": "无自动批准",
+		"triggerLabel_one": "1 个自动批准",
+		"triggerLabel_other": "{{count}} 个自动批准",
+		"triggerLabelAll": "人生只有一次"
 	},
 	"reasoning": {
 		"thinking": "思考中",

webview-ui/src/i18n/locales/zh-TW/chat.json

@@ -271,12 +271,18 @@
 		"issues": "您似乎遇到了 Windows PowerShell 的問題，請參閱此說明文件"
 	},
 	"autoApprove": {
-		"title": "自動核准：",
+		"tooltip": "管理自動批准設定",
+		"title": "自動批准",
+		"all": "全部",
 		"none": "無",
-		"description": "自動核准讓 Roo Code 可以在無需徵求您同意的情況下執行操作。請僅對您完全信任的動作啟用此功能。您可以在<settingsLink>設定</settingsLink>中進行更詳細的調整。",
-		"selectOptionsFirst": "請至少選擇以下一個選項以啟用自動核准",
-		"toggleAriaLabel": "切換自動核准",
-		"disabledAriaLabel": "自動核准已停用 - 請先選取選項"
+		"description": "無需請求權限即可執行這些操作。僅對您完全信任的操作啟用此功能。",
+		"selectOptionsFirst": "請至少選擇以下一個選項以啟用自動批准",
+		"toggleAriaLabel": "切換自動批准",
+		"disabledAriaLabel": "自動批准已禁用 - 請先選擇選項",
+		"triggerLabel_zero": "無自動核准",
+		"triggerLabel_one": "1 個自動核准",
+		"triggerLabel_other": "{{count}} 個自動核准",
+		"triggerLabelAll": "人生只有一次"
 	},
 	"announcement": {
 		"title": "🎉 Roo Code {{version}} 已發布",