feat: add todo list enable checkbox to provider advanced settings

- Add todoListEnabled field to provider settings types
- Create TodoListSettingsControl component similar to DiffSettingsControl
- Integrate todo list control into ApiOptions advanced settings
- Add translation keys for the new setting
- Add comprehensive unit tests for the new component
- Update ApiOptions tests to include VSCodeCheckbox mock

Author: roomote

packages/types/src/provider-settings.ts

@@ -61,6 +61,7 @@ export const DEFAULT_CONSECUTIVE_MISTAKE_LIMIT = 3
 const baseProviderSettingsSchema = z.object({
 	includeMaxTokens: z.boolean().optional(),
 	diffEnabled: z.boolean().optional(),
+	todoListEnabled: z.boolean().optional(),
 	fuzzyMatchThreshold: z.number().optional(),
 	modelTemperature: z.number().nullish(),
 	rateLimitSeconds: z.number().optional(),

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

@@ -78,6 +78,7 @@ import { ModelInfoView } from "./ModelInfoView"
 import { ApiErrorMessage } from "./ApiErrorMessage"
 import { ThinkingBudget } from "./ThinkingBudget"
 import { DiffSettingsControl } from "./DiffSettingsControl"
+import { TodoListSettingsControl } from "./TodoListSettingsControl"
 import { TemperatureControl } from "./TemperatureControl"
 import { RateLimitSecondsControl } from "./RateLimitSecondsControl"
 import { ConsecutiveMistakeLimitControl } from "./ConsecutiveMistakeLimitControl"
@@ -564,6 +565,10 @@ const ApiOptions = ({
 						<span className="font-medium">{t("settings:advancedSettings.title")}</span>
 					</CollapsibleTrigger>
 					<CollapsibleContent className="space-y-3">
+						<TodoListSettingsControl
+							todoListEnabled={apiConfiguration.todoListEnabled}
+							onChange={(field, value) => setApiConfigurationField(field, value)}
+						/>
 						<DiffSettingsControl
 							diffEnabled={apiConfiguration.diffEnabled}
 							fuzzyMatchThreshold={apiConfiguration.fuzzyMatchThreshold}

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

@@ -0,0 +1,35 @@
+import React, { useCallback } from "react"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+
+interface TodoListSettingsControlProps {
+	todoListEnabled?: boolean
+	onChange: (field: "todoListEnabled", value: any) => void
+}
+
+export const TodoListSettingsControl: React.FC<TodoListSettingsControlProps> = ({
+	todoListEnabled = true,
+	onChange,
+}) => {
+	const { t } = useAppTranslation()
+
+	const handleTodoListEnabledChange = useCallback(
+		(e: any) => {
+			onChange("todoListEnabled", e.target.checked)
+		},
+		[onChange],
+	)
+
+	return (
+		<div className="flex flex-col gap-1">
+			<div>
+				<VSCodeCheckbox checked={todoListEnabled} onChange={handleTodoListEnabledChange}>
+					<span className="font-medium">{t("settings:advanced.todoList.label")}</span>
+				</VSCodeCheckbox>
+				<div className="text-vscode-descriptionForeground text-sm">
+					{t("settings:advanced.todoList.description")}
+				</div>
+			</div>
+		</div>
+	)
+}

webview-ui/src/components/settings/__tests__/ApiOptions.spec.tsx

@@ -21,6 +21,16 @@ vi.mock("@vscode/webview-ui-toolkit/react", () => ({
 	VSCodeRadio: ({ value, checked }: any) => <input type="radio" value={value} checked={checked} />,
 	VSCodeRadioGroup: ({ children }: any) => <div>{children}</div>,
 	VSCodeButton: ({ children }: any) => <div>{children}</div>,
+	VSCodeCheckbox: ({ children, checked, onChange }: any) => (
+		<label>
+			<input
+				type="checkbox"
+				checked={checked}
+				onChange={(e) => onChange && onChange({ target: { checked: e.target.checked } })}
+			/>
+			{children}
+		</label>
+	),
 }))
 
 // Mock other components
@@ -173,6 +183,22 @@ vi.mock("../DiffSettingsControl", () => ({
 	),
 }))
 
+// Mock TodoListSettingsControl for tests
+vi.mock("../TodoListSettingsControl", () => ({
+	TodoListSettingsControl: ({ todoListEnabled, onChange }: any) => (
+		<div data-testid="todo-list-settings-control">
+			<label>
+				Enable todo list tool
+				<input
+					type="checkbox"
+					checked={todoListEnabled}
+					onChange={(e) => onChange("todoListEnabled", e.target.checked)}
+				/>
+			</label>
+		</div>
+	),
+}))
+
 // Mock ThinkingBudget component
 vi.mock("../ThinkingBudget", () => ({
 	ThinkingBudget: ({ modelInfo }: any) => {

webview-ui/src/components/settings/__tests__/TodoListSettingsControl.spec.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { TodoListSettingsControl } from "../TodoListSettingsControl"
+
+// Mock the translation hook
+vi.mock("@/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) => {
+			const translations: Record<string, string> = {
+				"settings:advanced.todoList.label": "Enable todo list tool",
+				"settings:advanced.todoList.description":
+					"When enabled, Roo can create and manage todo lists to track task progress. This helps organize complex tasks into manageable steps.",
+			}
+			return translations[key] || key
+		},
+	}),
+}))
+
+// Mock VSCodeCheckbox
+vi.mock("@vscode/webview-ui-toolkit/react", () => ({
+	VSCodeCheckbox: ({ children, onChange, checked, ...props }: any) => (
+		<label>
+			<input
+				type="checkbox"
+				checked={checked}
+				onChange={(e) => onChange({ target: { checked: e.target.checked } })}
+				{...props}
+			/>
+			{children}
+		</label>
+	),
+}))
+
+describe("TodoListSettingsControl", () => {
+	it("renders with default props", () => {
+		const onChange = vi.fn()
+		render(<TodoListSettingsControl onChange={onChange} />)
+
+		const checkbox = screen.getByRole("checkbox")
+		const label = screen.getByText("Enable todo list tool")
+		const description = screen.getByText(/When enabled, Roo can create and manage todo lists/)
+
+		expect(checkbox).toBeInTheDocument()
+		expect(checkbox).toBeChecked() // Default is true
+		expect(label).toBeInTheDocument()
+		expect(description).toBeInTheDocument()
+	})
+
+	it("renders with todoListEnabled set to false", () => {
+		const onChange = vi.fn()
+		render(<TodoListSettingsControl todoListEnabled={false} onChange={onChange} />)
+
+		const checkbox = screen.getByRole("checkbox")
+		expect(checkbox).not.toBeChecked()
+	})
+
+	it("calls onChange when checkbox is clicked", () => {
+		const onChange = vi.fn()
+		render(<TodoListSettingsControl todoListEnabled={true} onChange={onChange} />)
+
+		const checkbox = screen.getByRole("checkbox")
+		fireEvent.click(checkbox)
+
+		expect(onChange).toHaveBeenCalledWith("todoListEnabled", false)
+	})
+
+	it("toggles from unchecked to checked", () => {
+		const onChange = vi.fn()
+		render(<TodoListSettingsControl todoListEnabled={false} onChange={onChange} />)
+
+		const checkbox = screen.getByRole("checkbox")
+		fireEvent.click(checkbox)
+
+		expect(onChange).toHaveBeenCalledWith("todoListEnabled", true)
+	})
+})

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

@@ -577,6 +577,10 @@
 				"label": "Match precision",
 				"description": "This slider controls how precisely code sections must match when applying diffs. Lower values allow more flexible matching but increase the risk of incorrect replacements. Use values below 100% with extreme caution."
 			}
+		},
+		"todoList": {
+			"label": "Enable todo list tool",
+			"description": "When enabled, Roo can create and manage todo lists to track task progress. This helps organize complex tasks into manageable steps."
 		}
 	},
 	"experimental": {