feat: improve retention UX with confirmation dialog and friendly messaging

- Add confirmation dialog before changing retention settings to prevent accidental changes
- Move task count display from About tab to History View settings popover
- Combine redundant description/warning into single, clear warning message
- Update task count display to be more human-friendly ('X tasks in history')
- Update all 18 locale files with consistent messaging
- Revert About.tsx to original state (no retention UI there)

Author: hannesrudolph

webview-ui/src/components/history/HistoryView.tsx

@@ -1,5 +1,5 @@
-import React, { memo, useState, useMemo } from "react"
-import { ArrowLeft, Settings } from "lucide-react"
+import React, { memo, useState, useMemo, useCallback, useEffect } from "react"
+import { ArrowLeft, Settings, FolderOpen, RefreshCw, Loader2 } from "lucide-react"
 import { DeleteTaskDialog } from "./DeleteTaskDialog"
 import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
 import { Virtuoso } from "react-virtuoso"
@@ -11,6 +11,14 @@ import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { vscode } from "@/utils/vscode"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
 	Button,
 	Checkbox,
 	Popover,
@@ -48,7 +56,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 		showAllWorkspaces,
 		setShowAllWorkspaces,
 	} = useTaskSearch()
-	const { taskHistoryRetention } = useExtensionState()
+	const { taskHistoryRetention, taskHistorySize } = useExtensionState()
 	const { t } = useAppTranslation()
 
 	// Use grouped tasks hook
@@ -60,6 +68,39 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 	const [selectedTaskIds, setSelectedTaskIds] = useState<string[]>([])
 	const [showBatchDeleteDialog, setShowBatchDeleteDialog] = useState<boolean>(false)
 	const [isRetentionPopoverOpen, setIsRetentionPopoverOpen] = useState(false)
+	const [pendingRetention, setPendingRetention] = useState<TaskHistoryRetentionSetting | null>(null)
+	const [showRetentionConfirmDialog, setShowRetentionConfirmDialog] = useState(false)
+	const [isRefreshingTaskCount, setIsRefreshingTaskCount] = useState(false)
+	const [cachedTaskCount, setCachedTaskCount] = useState<number | undefined>(taskHistorySize?.taskCount)
+
+	// Update cached task count when taskHistorySize changes
+	useEffect(() => {
+		if (taskHistorySize) {
+			setCachedTaskCount(taskHistorySize.taskCount)
+			setIsRefreshingTaskCount(false)
+		}
+	}, [taskHistorySize])
+
+	// Handle refresh task count
+	const handleRefreshTaskCount = useCallback(() => {
+		setIsRefreshingTaskCount(true)
+		vscode.postMessage({ type: "refreshTaskHistorySize" })
+	}, [])
+
+	// Get task count display text
+	const getTaskCountDisplayText = (): string => {
+		const count = taskHistorySize?.taskCount ?? cachedTaskCount
+		if (count === undefined) {
+			return t("settings:taskHistoryStorage.clickToCount")
+		}
+		if (count === 0) {
+			return t("settings:taskHistoryStorage.empty")
+		}
+		if (count === 1) {
+			return t("settings:taskHistoryStorage.countSingular")
+		}
+		return t("settings:taskHistoryStorage.count", { count })
+	}
 
 	// Normalize retention setting to ensure it's valid
 	const normalizedRetention: TaskHistoryRetentionSetting = TASK_HISTORY_RETENTION_OPTIONS.includes(
@@ -68,9 +109,31 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 		? (taskHistoryRetention as TaskHistoryRetentionSetting)
 		: "never"
 
-	// Handle retention setting change
+	// Handle retention setting change - show confirmation dialog first
 	const handleRetentionChange = (value: TaskHistoryRetentionSetting) => {
-		vscode.postMessage({ type: "updateSettings", updatedSettings: { taskHistoryRetention: value } })
+		// If selecting the same value, do nothing
+		if (value === normalizedRetention) {
+			return
+		}
+		// Show confirmation dialog for any change
+		setPendingRetention(value)
+		setShowRetentionConfirmDialog(true)
+	}
+
+	// Confirm retention change
+	const confirmRetentionChange = () => {
+		if (pendingRetention !== null) {
+			vscode.postMessage({ type: "updateSettings", updatedSettings: { taskHistoryRetention: pendingRetention } })
+		}
+		setShowRetentionConfirmDialog(false)
+		setPendingRetention(null)
+		setIsRetentionPopoverOpen(false)
+	}
+
+	// Cancel retention change
+	const cancelRetentionChange = () => {
+		setShowRetentionConfirmDialog(false)
+		setPendingRetention(null)
 	}
 
 	// Get subtask count for a task
@@ -148,7 +211,28 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 							</StandardTooltip>
 							<PopoverContent className="w-72" align="end">
 								<div className="space-y-3">
-									<h4 className="font-medium text-sm">{t("settings:aboutRetention.label")}</h4>
+									{/* Task count display */}
+									<div className="flex items-center gap-2">
+										<FolderOpen className="size-4 text-vscode-descriptionForeground shrink-0" />
+										<span className="text-sm">{getTaskCountDisplayText()}</span>
+										<Button
+											variant="ghost"
+											size="sm"
+											onClick={handleRefreshTaskCount}
+											disabled={isRefreshingTaskCount}
+											className="h-6 w-6 p-0 ml-auto"
+											title={t("settings:taskHistoryStorage.refresh")}>
+											{isRefreshingTaskCount ? (
+												<Loader2 className="size-3.5 animate-spin" />
+											) : (
+												<RefreshCw className="size-3.5" />
+											)}
+										</Button>
+									</div>
+
+									<div className="border-t border-vscode-settings-headerBorder pt-3">
+										<h4 className="font-medium text-sm">{t("settings:aboutRetention.label")}</h4>
+									</div>
 									<Select
 										value={normalizedRetention}
 										onValueChange={(value: TaskHistoryRetentionSetting) => {
@@ -175,9 +259,8 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 										</SelectContent>
 									</Select>
 									<p className="text-vscode-descriptionForeground text-xs">
-										{t("settings:aboutRetention.description")}
+										{t("settings:aboutRetention.warning")}
 									</p>
-									<p className="text-red-500 text-xs">{t("settings:aboutRetention.warning")}</p>
 								</div>
 							</PopoverContent>
 						</Popover>
@@ -421,6 +504,32 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					}}
 				/>
 			)}
+
+			{/* Retention change confirmation dialog */}
+			<AlertDialog open={showRetentionConfirmDialog} onOpenChange={setShowRetentionConfirmDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>{t("settings:aboutRetention.confirmDialog.title")}</AlertDialogTitle>
+						<AlertDialogDescription>
+							{pendingRetention === "never"
+								? t("settings:aboutRetention.confirmDialog.descriptionNever")
+								: t("settings:aboutRetention.confirmDialog.description", {
+										period: pendingRetention,
+									})}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel onClick={cancelRetentionChange}>
+							{t("settings:aboutRetention.confirmDialog.cancel")}
+						</AlertDialogCancel>
+						<AlertDialogAction onClick={confirmRetentionChange}>
+							{pendingRetention === "never"
+								? t("settings:aboutRetention.confirmDialog.confirmNever")
+								: t("settings:aboutRetention.confirmDialog.confirm")}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</Tab>
 	)
 }

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

@@ -1,19 +1,7 @@
-import { HTMLAttributes, useState, useCallback, useEffect } from "react"
+import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Trans } from "react-i18next"
-import {
-	Download,
-	Upload,
-	TriangleAlert,
-	Bug,
-	Lightbulb,
-	Shield,
-	MessageCircle,
-	MessagesSquare,
-	RefreshCw,
-	FolderOpen,
-	Loader2,
-} from "lucide-react"
+import { Download, Upload, TriangleAlert, Bug, Lightbulb, Shield, MessageCircle, MessagesSquare } from "lucide-react"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 import type { TelemetrySetting } from "@roo-code/types"
@@ -28,63 +16,15 @@ import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
 import { SearchableSetting } from "./SearchableSetting"
 
-type TaskHistorySize = {
-	taskCount: number
-}
-
 type AboutProps = HTMLAttributes<HTMLDivElement> & {
 	telemetrySetting: TelemetrySetting
 	setTelemetrySetting: (setting: TelemetrySetting) => void
 	debug?: boolean
 	setDebug?: (debug: boolean) => void
-	taskHistorySize?: TaskHistorySize
 }
 
-export const About = ({
-	telemetrySetting,
-	setTelemetrySetting,
-	debug,
-	setDebug,
-	taskHistorySize,
-	className,
-	...props
-}: AboutProps) => {
+export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug, className, ...props }: AboutProps) => {
 	const { t } = useAppTranslation()
-	const [isRefreshing, setIsRefreshing] = useState(false)
-	const [cachedSize, setCachedSize] = useState<TaskHistorySize | undefined>(taskHistorySize)
-
-	// Update cached size when taskHistorySize changes and reset refreshing state
-	useEffect(() => {
-		if (taskHistorySize) {
-			setCachedSize(taskHistorySize)
-			setIsRefreshing(false)
-		}
-	}, [taskHistorySize])
-
-	// NOTE: No auto-trigger on mount - user must click refresh button
-	// This is intentional for performance with large task counts (e.g., 9000+ tasks)
-
-	const handleRefreshTaskCount = useCallback(() => {
-		setIsRefreshing(true)
-		vscode.postMessage({ type: "refreshTaskHistorySize" })
-	}, [])
-
-	const getTaskCountDisplayText = (): string => {
-		// Use cached size if available, otherwise prompt user to click refresh
-		const displaySize = taskHistorySize || cachedSize
-		if (!displaySize) {
-			return t("settings:taskHistoryStorage.clickToCount")
-		}
-		if (displaySize.taskCount === 0) {
-			return t("settings:taskHistoryStorage.empty")
-		}
-		if (displaySize.taskCount === 1) {
-			return t("settings:taskHistoryStorage.countSingular")
-		}
-		return t("settings:taskHistoryStorage.count", {
-			count: displaySize.taskCount,
-		})
-	}
 
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
@@ -191,37 +131,10 @@ export const About = ({
 			</Section>
 
 			<Section className="space-y-0">
-				<SearchableSetting
-					settingId="about-task-history-count"
-					section="about"
-					label={t("settings:taskHistoryStorage.label")}
-					className="mt-4">
-					<div className="flex items-center gap-2">
-						<FolderOpen className="size-4 text-vscode-descriptionForeground shrink-0" />
-						<span className="text-sm">
-							{t("settings:taskHistoryStorage.label")}: {getTaskCountDisplayText()}
-						</span>
-						<Button
-							variant="ghost"
-							size="sm"
-							onClick={handleRefreshTaskCount}
-							disabled={isRefreshing}
-							className="h-6 w-6 p-0"
-							title={t("settings:taskHistoryStorage.refresh")}>
-							{isRefreshing ? (
-								<Loader2 className="size-3.5 animate-spin" />
-							) : (
-								<RefreshCw className="size-3.5" />
-							)}
-						</Button>
-					</div>
-				</SearchableSetting>
-
 				<SearchableSetting
 					settingId="about-manage-settings"
 					section="about"
-					label={t("settings:about.manageSettings")}
-					className="mt-4 pt-4 border-t border-vscode-settings-headerBorder">
+					label={t("settings:about.manageSettings")}>
 					<h3>{t("settings:about.manageSettings")}</h3>
 					<div className="flex flex-wrap items-center gap-2">
 						<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">

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

@@ -218,9 +218,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		taskHistoryRetention,
 	} = cachedState
 
-	// taskHistorySize is read-only (not a saveable setting) so we use extensionState directly
-	const taskHistorySize = extensionState.taskHistorySize
-
 	const apiConfiguration = useMemo(() => cachedState.apiConfiguration ?? {}, [cachedState.apiConfiguration])
 
 	useEffect(() => {
@@ -974,7 +971,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 								setTelemetrySetting={setTelemetrySetting}
 								debug={cachedState.debug}
 								setDebug={setDebug}
-								taskHistorySize={taskHistorySize}
 							/>
 						)}
 					</SearchIndexProvider>