fix(settings): move FCO toggle to Experimental, adopt debounced action hook, clean up UISettings and SettingsView imports/tests; fix lint unused args in FilesChangedOverview

Author: hannesrudolph

webview-ui/src/components/file-changes/FilesChangedOverview.tsx

@@ -3,9 +3,7 @@ import { FileChangeset, FileChange } from "@roo-code/types"
 import { useTranslation } from "react-i18next"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { vscode } from "@/utils/vscode"
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-interface FilesChangedOverviewProps {}
+import { useDebouncedAction } from "@/components/ui/hooks/useDebouncedAction"
 
 interface _CheckpointEventData {
 	type: "checkpoint_created" | "checkpoint_restored"
@@ -18,7 +16,7 @@ interface _CheckpointEventData {
  * and displays file changes. It manages its own state and communicates with the backend
  * through VS Code message passing.
  */
-const FilesChangedOverview: React.FC<FilesChangedOverviewProps> = () => {
+const FilesChangedOverview: React.FC = () => {
 	const { t } = useTranslation()
 	const { filesChangedEnabled } = useExtensionState()
 
@@ -52,24 +50,13 @@ const FilesChangedOverview: React.FC<FilesChangedOverviewProps> = () => {
 	const totalHeight = shouldVirtualize ? files.length * ITEM_HEIGHT : "auto"
 	const offsetY = shouldVirtualize ? Math.floor(scrollTop / ITEM_HEIGHT) * ITEM_HEIGHT : 0
 
-	// Simple double-click prevention
-	const [isProcessing, setIsProcessing] = React.useState(false)
-	const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
-
-	// Cleanup timeout on unmount
-	React.useEffect(() => {
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current)
-			}
-		}
-	}, [])
+	// Debounced click handling for double-click prevention
+	const { isProcessing, handleWithDebounce } = useDebouncedAction(300)
 
 	// FCO initialization logic
 	const checkInit = React.useCallback(
-		(baseCheckpoint: string) => {
+		(_baseCheckpoint: string) => {
 			if (!isInitialized) {
-				console.log("[FCO] Initializing with base checkpoint:", baseCheckpoint)
 				setIsInitialized(true)
 			}
 		},
@@ -94,9 +81,7 @@ const FilesChangedOverview: React.FC<FilesChangedOverviewProps> = () => {
 	)
 
 	// Handle checkpoint restoration with the 4 examples logic
-	const handleCheckpointRestored = React.useCallback((restoredCheckpoint: string) => {
-		console.log("[FCO] Handling checkpoint restore to:", restoredCheckpoint)
-
+	const handleCheckpointRestored = React.useCallback((_restoredCheckpoint: string) => {
 		// Request file changes after checkpoint restore
 		// Backend should calculate changes from initial baseline to restored checkpoint
 		vscode.postMessage({ type: "filesChangedRequest" })
@@ -128,25 +113,6 @@ const FilesChangedOverview: React.FC<FilesChangedOverviewProps> = () => {
 		// Backend will send updated filesChanged message with filtered results
 	}, [files])
 
-	const handleWithDebounce = React.useCallback(
-		async (operation: () => void) => {
-			if (isProcessing) return
-			setIsProcessing(true)
-			try {
-				operation()
-			} catch (_error) {
-				// Silently handle any errors to prevent crashing
-				// Debug logging removed for production
-			}
-			// Brief delay to prevent double-clicks
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current)
-			}
-			timeoutRef.current = setTimeout(() => setIsProcessing(false), 300)
-		},
-		[isProcessing],
-	)
-
 	/**
 	 * Handles scroll events for virtualization
 	 * Updates scrollTop state to calculate visible items
@@ -167,14 +133,12 @@ const FilesChangedOverview: React.FC<FilesChangedOverviewProps> = () => {
 
 			// Guard against null/undefined/malformed messages
 			if (!message || typeof message !== "object" || !message.type) {
-				console.debug("[FCO] Ignoring malformed message:", message)
 				return
 			}
 
 			switch (message.type) {
 				case "filesChanged":
 					if (message.filesChanged) {
-						console.log("[FCO] Received filesChanged message:", message.filesChanged)
 						checkInit(message.filesChanged.baseCheckpoint)
 						updateChangeset(message.filesChanged)
 					} else {
@@ -183,11 +147,9 @@ const FilesChangedOverview: React.FC<FilesChangedOverviewProps> = () => {
 					}
 					break
 				case "checkpoint_created":
-					console.log("[FCO] Checkpoint created:", message.checkpoint)
 					handleCheckpointCreated(message.checkpoint, message.previousCheckpoint)
 					break
 				case "checkpoint_restored":
-					console.log("[FCO] Checkpoint restored:", message.checkpoint)
 					handleCheckpointRestored(message.checkpoint)
 					break
 			}

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

@@ -8,19 +8,25 @@ import { EXPERIMENT_IDS, experimentConfigsMap } from "@roo/experiments"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { cn } from "@src/lib/utils"
 
-import { SetExperimentEnabled } from "./types"
+import { SetExperimentEnabled, SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
 import { ExperimentalFeature } from "./ExperimentalFeature"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 
 type ExperimentalSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	experiments: Experiments
 	setExperimentEnabled: SetExperimentEnabled
+	// Include Files Changed Overview toggle in Experimental section per review feedback
+	filesChangedEnabled?: boolean
+	setCachedStateField?: SetCachedStateField<"filesChangedEnabled">
 }
 
 export const ExperimentalSettings = ({
 	experiments,
 	setExperimentEnabled,
+	filesChangedEnabled,
+	setCachedStateField,
 	className,
 	...props
 }: ExperimentalSettingsProps) => {
@@ -35,6 +41,24 @@ export const ExperimentalSettings = ({
 				</div>
 			</SectionHeader>
 
+			{/* Files Changed Overview (moved from UI section to Experimental) */}
+			{typeof filesChangedEnabled !== "undefined" && setCachedStateField && (
+				<Section>
+					<div>
+						<VSCodeCheckbox
+							checked={filesChangedEnabled}
+							onChange={(e: any) => setCachedStateField("filesChangedEnabled", e.target.checked)}
+							data-testid="files-changed-enabled-checkbox">
+							{/* Reuse existing translation keys to avoid i18n churn */}
+							<label className="block font-medium mb-1">{t("settings:ui.filesChanged.label")}</label>
+						</VSCodeCheckbox>
+						<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+							{t("settings:ui.filesChanged.description")}
+						</div>
+					</div>
+				</Section>
+			)}
+
 			<Section>
 				{Object.entries(experimentConfigsMap)
 					.filter(([key]) => key in EXPERIMENT_IDS)

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

@@ -50,8 +50,9 @@ import {
 } from "@src/components/ui"
 
 import { Tab, TabContent, TabHeader, TabList, TabTrigger } from "../common/Tab"
-import { SetCachedStateField, SetExperimentEnabled } from "./types"
+import { SetExperimentEnabled } from "./types"
 import { SectionHeader } from "./SectionHeader"
+import type { SetCachedStateField } from "./types"
 import ApiConfigManager from "./ApiConfigManager"
 import ApiOptions from "./ApiOptions"
 import { AutoApproveSettings } from "./AutoApproveSettings"
@@ -693,12 +694,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					)}
 
 					{/* UI Section */}
-					{activeTab === "ui" && (
-						<UISettings
-							filesChangedEnabled={filesChangedEnabled}
-							setCachedStateField={setCachedStateField}
-						/>
-					)}
+					{activeTab === "ui" && <UISettings />}
 
 					{/* Terminal Section */}
 					{activeTab === "terminal" && (
@@ -732,7 +728,12 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 
 					{/* Experimental Section */}
 					{activeTab === "experimental" && (
-						<ExperimentalSettings setExperimentEnabled={setExperimentEnabled} experiments={experiments} />
+						<ExperimentalSettings
+							setExperimentEnabled={setExperimentEnabled}
+							experiments={experiments}
+							filesChangedEnabled={filesChangedEnabled}
+							setCachedStateField={setCachedStateField as SetCachedStateField<"filesChangedEnabled">}
+						/>
 					)}
 
 					{/* Language Section */}

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

@@ -1,21 +1,15 @@
 import { HTMLAttributes } from "react"
 import React from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import { Monitor } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
-import { Section } from "./Section"
 
-type UISettingsProps = HTMLAttributes<HTMLDivElement> & {
-	filesChangedEnabled?: boolean
-	setCachedStateField: SetCachedStateField<"filesChangedEnabled">
-}
+type UISettingsProps = HTMLAttributes<HTMLDivElement>
 
-export const UISettings = ({ filesChangedEnabled, setCachedStateField, className, ...props }: UISettingsProps) => {
+export const UISettings = ({ className, ...props }: UISettingsProps) => {
 	const { t } = useAppTranslation()
 
 	return (
@@ -26,20 +20,6 @@ export const UISettings = ({ filesChangedEnabled, setCachedStateField, className
 					<div>{t("settings:sections.ui")}</div>
 				</div>
 			</SectionHeader>
-
-			<Section>
-				<div>
-					<VSCodeCheckbox
-						checked={filesChangedEnabled}
-						onChange={(e: any) => setCachedStateField("filesChangedEnabled", e.target.checked)}
-						data-testid="files-changed-enabled-checkbox">
-						<label className="block font-medium mb-1">{t("settings:ui.filesChanged.label")}</label>
-					</VSCodeCheckbox>
-					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
-						{t("settings:ui.filesChanged.description")}
-					</div>
-				</div>
-			</Section>
 		</div>
 	)
 }