feat: add spell check feature to Roo Chat

- Add experimental spell check feature flag
- Implement spell check utility with basic dictionary
- Integrate spell check highlighting in ChatTextArea component
- Add CSS styles for red wavy underlines on misspelled words
- Add comprehensive tests for spell check functionality
- Add i18n translations for the feature

This feature helps users identify misspelled words in the chat interface
by highlighting them with red wavy underlines, similar to standard text
editors.

Author: roomote

packages/types/src/experiment.ts

@@ -6,7 +6,7 @@ import type { Keys, Equals, AssertEqual } from "./type-fu.js"
  * ExperimentId
  */
 
-export const experimentIds = ["powerSteering", "multiFileApplyDiff"] as const
+export const experimentIds = ["powerSteering", "multiFileApplyDiff", "spellCheck"] as const
 
 export const experimentIdsSchema = z.enum(experimentIds)
 
@@ -19,6 +19,7 @@ export type ExperimentId = z.infer<typeof experimentIdsSchema>
 export const experimentsSchema = z.object({
 	powerSteering: z.boolean().optional(),
 	multiFileApplyDiff: z.boolean().optional(),
+	spellCheck: z.boolean().optional(),
 })
 
 export type Experiments = z.infer<typeof experimentsSchema>

src/shared/__tests__/experiments.spec.ts

@@ -23,11 +23,21 @@ describe("experiments", () => {
 		})
 	})
 
+	describe("SPELL_CHECK", () => {
+		it("is configured correctly", () => {
+			expect(EXPERIMENT_IDS.SPELL_CHECK).toBe("spellCheck")
+			expect(experimentConfigsMap.SPELL_CHECK).toMatchObject({
+				enabled: false,
+			})
+		})
+	})
+
 	describe("isEnabled", () => {
 		it("returns false when POWER_STEERING experiment is not enabled", () => {
 			const experiments: Record<ExperimentId, boolean> = {
 				powerSteering: false,
 				multiFileApplyDiff: false,
+				spellCheck: false,
 			}
 			expect(Experiments.isEnabled(experiments, EXPERIMENT_IDS.POWER_STEERING)).toBe(false)
 		})
@@ -36,6 +46,7 @@ describe("experiments", () => {
 			const experiments: Record<ExperimentId, boolean> = {
 				powerSteering: true,
 				multiFileApplyDiff: false,
+				spellCheck: false,
 			}
 			expect(Experiments.isEnabled(experiments, EXPERIMENT_IDS.POWER_STEERING)).toBe(true)
 		})
@@ -44,6 +55,7 @@ describe("experiments", () => {
 			const experiments: Record<ExperimentId, boolean> = {
 				powerSteering: false,
 				multiFileApplyDiff: false,
+				spellCheck: false,
 			}
 			expect(Experiments.isEnabled(experiments, EXPERIMENT_IDS.POWER_STEERING)).toBe(false)
 		})

src/shared/experiments.ts

@@ -3,6 +3,7 @@ import type { AssertEqual, Equals, Keys, Values, ExperimentId, Experiments } fro
 export const EXPERIMENT_IDS = {
 	MULTI_FILE_APPLY_DIFF: "multiFileApplyDiff",
 	POWER_STEERING: "powerSteering",
+	SPELL_CHECK: "spellCheck",
 } as const satisfies Record<string, ExperimentId>
 
 type _AssertExperimentIds = AssertEqual<Equals<ExperimentId, Values<typeof EXPERIMENT_IDS>>>
@@ -16,6 +17,7 @@ interface ExperimentConfig {
 export const experimentConfigsMap: Record<ExperimentKey, ExperimentConfig> = {
 	MULTI_FILE_APPLY_DIFF: { enabled: false },
 	POWER_STEERING: { enabled: false },
+	SPELL_CHECK: { enabled: false },
 }
 
 export const experimentDefault = Object.fromEntries(

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

@@ -6,10 +6,12 @@ import { mentionRegex, mentionRegexGlobal, unescapeSpaces } from "@roo/context-m
 import { WebviewMessage } from "@roo/WebviewMessage"
 import { Mode, getAllModes } from "@roo/modes"
 import { ExtensionMessage } from "@roo/ExtensionMessage"
+import { EXPERIMENT_IDS, experiments as experimentsLib } from "@roo/experiments"
 
 import { vscode } from "@/utils/vscode"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { useAppTranslation } from "@/i18n/TranslationContext"
+import { checkSpelling, debounce, SpellCheckResult } from "@/utils/spellCheck"
 import {
 	ContextMenuOptionType,
 	getContextMenuOptions,
@@ -86,6 +88,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			togglePinnedApiConfig,
 			taskHistory,
 			clineMessages,
+			experiments,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration
@@ -180,6 +183,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		const contextMenuContainerRef = useRef<HTMLDivElement>(null)
 		const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false)
 		const [isFocused, setIsFocused] = useState(false)
+		const [spellCheckResults, setSpellCheckResults] = useState<SpellCheckResult[]>([])
+		const spellCheckLayerRef = useRef<HTMLDivElement>(null)
 
 		// Use custom hook for prompt history navigation
 		const { handleHistoryNavigation, resetHistoryNavigation, resetOnInputChange } = usePromptHistory({
@@ -216,6 +221,36 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 		}, [inputValue, sendingDisabled, setInputValue, t])
 
+		// Check if spell check is enabled
+		const isSpellCheckEnabled = useMemo(() => {
+			return experiments && experimentsLib.isEnabled(experiments, EXPERIMENT_IDS.SPELL_CHECK)
+		}, [experiments])
+
+		// Debounced spell check function
+		const performSpellCheck = useMemo(
+			() =>
+				debounce(async (text: string) => {
+					if (!isSpellCheckEnabled || !text.trim()) {
+						setSpellCheckResults([])
+						return
+					}
+
+					try {
+						const results = await checkSpelling(text)
+						setSpellCheckResults(results)
+					} catch (error) {
+						console.error("Spell check error:", error)
+						setSpellCheckResults([])
+					}
+				}, 300),
+			[isSpellCheckEnabled],
+		)
+
+		// Perform spell check when input changes
+		useEffect(() => {
+			performSpellCheck(inputValue)
+		}, [inputValue, performSpellCheck])
+
 		const allModes = useMemo(() => getAllModes(customModes), [customModes])
 
 		const queryItems = useMemo(() => {
@@ -674,6 +709,52 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 		}, [])
 
+		const updateSpellCheckHighlights = useCallback(() => {
+			if (!spellCheckLayerRef.current || !isSpellCheckEnabled) return
+
+			const text = inputValue
+			let html = ""
+			let lastIndex = 0
+
+			// Sort spell check results by start index
+			const sortedResults = [...spellCheckResults].sort((a, b) => a.startIndex - b.startIndex)
+
+			sortedResults.forEach((result) => {
+				// Add text before the misspelled word
+				const beforeText = text.slice(lastIndex, result.startIndex)
+				html += beforeText
+					.replace(/\n$/, "\n\n")
+					.replace(/[<>&]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" })[c] || c)
+
+				// Add the misspelled word with highlighting
+				const misspelledWord = text.slice(result.startIndex, result.endIndex)
+				html += `<span class="spell-check-error">${misspelledWord.replace(
+					/[<>&]/g,
+					(c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" })[c] || c,
+				)}</span>`
+
+				lastIndex = result.endIndex
+			})
+
+			// Add remaining text
+			const remainingText = text.slice(lastIndex)
+			html += remainingText
+				.replace(/\n$/, "\n\n")
+				.replace(/[<>&]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" })[c] || c)
+
+			spellCheckLayerRef.current.innerHTML = html
+
+			// Sync scroll position
+			if (textAreaRef.current) {
+				spellCheckLayerRef.current.scrollTop = textAreaRef.current.scrollTop
+				spellCheckLayerRef.current.scrollLeft = textAreaRef.current.scrollLeft
+			}
+		}, [inputValue, spellCheckResults, isSpellCheckEnabled])
+
+		useLayoutEffect(() => {
+			updateSpellCheckHighlights()
+		}, [inputValue, spellCheckResults, updateSpellCheckHighlights])
+
 		const handleKeyUp = useCallback(
 			(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
 				if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
@@ -1044,6 +1125,30 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						color: "transparent",
 					}}
 				/>
+				{isSpellCheckEnabled && (
+					<div
+						ref={spellCheckLayerRef}
+						className={cn(
+							"absolute",
+							"inset-0",
+							"pointer-events-none",
+							"whitespace-pre-wrap",
+							"break-words",
+							"text-transparent",
+							"overflow-hidden",
+							"font-vscode-font-family",
+							"text-vscode-editor-font-size",
+							"leading-vscode-editor-line-height",
+							"py-2",
+							"px-[9px]",
+							"z-[5]",
+							"forced-color-adjust-none",
+						)}
+						style={{
+							color: "transparent",
+						}}
+					/>
+				)}
 				<DynamicTextArea
 					ref={(el) => {
 						if (typeof ref === "function") {
@@ -1106,7 +1211,10 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						"scrollbar-none",
 						"scrollbar-hide",
 					)}
-					onScroll={() => updateHighlights()}
+					onScroll={() => {
+						updateHighlights()
+						updateSpellCheckHighlights()
+					}}
 				/>
 
 				<div className="absolute top-1 right-1 z-30">

webview-ui/src/context/__tests__/ExtensionStateContext.spec.tsx

@@ -222,10 +222,8 @@ describe("mergeExtensionState", () => {
 			apiConfiguration: { modelMaxThinkingTokens: 456, modelTemperature: 0.3 },
 			experiments: {
 				powerSteering: true,
-				marketplace: false,
-				disableCompletionCommand: false,
-				concurrentFileReads: true,
 				multiFileApplyDiff: true,
+				spellCheck: false,
 			} as Record<ExperimentId, boolean>,
 		}
 
@@ -238,10 +236,8 @@ describe("mergeExtensionState", () => {
 
 		expect(result.experiments).toEqual({
 			powerSteering: true,
-			marketplace: false,
-			disableCompletionCommand: false,
-			concurrentFileReads: true,
 			multiFileApplyDiff: true,
+			spellCheck: false,
 		})
 	})
 })

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

@@ -648,6 +648,10 @@
 		"MULTI_FILE_APPLY_DIFF": {
 			"name": "Enable concurrent file edits",
 			"description": "When enabled, Roo can edit multiple files in a single request. When disabled, Roo must edit files one at a time. Disabling this can help when working with less capable models or when you want more control over file modifications."
+		},
+		"SPELL_CHECK": {
+			"name": "Enable spell check in chat",
+			"description": "When enabled, misspelled words in the chat input will be underlined in red. This helps catch typos before sending messages to Roo."
 		}
 	},
 	"promptCaching": {

webview-ui/src/index.css

@@ -386,6 +386,14 @@ vscode-dropdown::part(listbox) {
 	box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
 }
 
+/* Spell check styles */
+.spell-check-error {
+	text-decoration: underline;
+	text-decoration-color: #ff0000;
+	text-decoration-style: wavy;
+	text-underline-offset: 2px;
+}
+
 /**
  * vscrui Overrides / Hacks
  */