feat: integrate native browser undo stack for enhance prompt feature

- Replace custom undo state management with native browser methods
- Use document.execCommand("insertText") for text replacement to preserve undo history
- Add setRangeText fallback for browsers without execCommand support
- Remove originalPromptBeforeEnhancement state and custom Cmd+Z handling
- Add comprehensive tests for native browser method usage
- Fix React development mode in test environment for act() support

This provides users with the expected VSCode textarea undo experience
when using the enhance prompt feature, as requested in PR feedback.

Author: Roo

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

@@ -115,8 +115,28 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				const message = event.data
 
 				if (message.type === "enhancedPrompt") {
-					if (message.text) {
-						setInputValue(message.text)
+					if (message.text && textAreaRef.current) {
+						// Use native browser methods to preserve undo stack
+						const textarea = textAreaRef.current
+
+						// Focus the textarea to ensure it's the active element
+						textarea.focus()
+
+						// Select all text first
+						textarea.select()
+
+						// Use execCommand to replace text while preserving undo history
+						if (document.execCommand) {
+							document.execCommand("insertText", false, message.text)
+						} else {
+							// Fallback for browsers that don't support execCommand
+							// This approach also preserves undo history in modern browsers
+							textarea.setRangeText(message.text, 0, textarea.value.length, "select")
+
+							// Trigger input event to notify React of the change
+							const inputEvent = new Event("input", { bubbles: true })
+							textarea.dispatchEvent(inputEvent)
+						}
 					}
 
 					setIsEnhancingPrompt(false)
@@ -157,7 +177,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		const contextMenuContainerRef = useRef<HTMLDivElement>(null)
 		const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false)
 		const [isFocused, setIsFocused] = useState(false)
-		const [originalPromptBeforeEnhancement, setOriginalPromptBeforeEnhancement] = useState<string | null>(null)
 
 		// Use custom hook for prompt history navigation
 		const { handleHistoryNavigation, resetHistoryNavigation, resetOnInputChange } = usePromptHistory({
@@ -187,8 +206,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			const trimmedInput = inputValue.trim()
 
 			if (trimmedInput) {
-				// Store the original prompt before enhancement
-				setOriginalPromptBeforeEnhancement(inputValue)
 				setIsEnhancingPrompt(true)
 				vscode.postMessage({ type: "enhancePrompt" as const, text: trimmedInput })
 			} else {
@@ -379,19 +396,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 				const isComposing = event.nativeEvent?.isComposing ?? false
 
-				// Handle undo for enhanced prompt (Cmd+Z/Ctrl+Z)
-				if (
-					(event.metaKey || event.ctrlKey) &&
-					event.key === "z" &&
-					!event.shiftKey &&
-					originalPromptBeforeEnhancement
-				) {
-					event.preventDefault()
-					setInputValue(originalPromptBeforeEnhancement)
-					setOriginalPromptBeforeEnhancement(null)
-					return
-				}
-
 				// Handle prompt history navigation using custom hook
 				if (handleHistoryNavigation(event, showContextMenu, isComposing)) {
 					return
@@ -468,7 +472,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				fileSearchResults,
 				handleHistoryNavigation,
 				resetHistoryNavigation,
-				originalPromptBeforeEnhancement,
 			],
 		)
 
@@ -487,11 +490,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				const newValue = e.target.value
 				setInputValue(newValue)
 
-				// Clear original prompt when user manually changes input
-				if (originalPromptBeforeEnhancement) {
-					setOriginalPromptBeforeEnhancement(null)
-				}
-
 				// Reset history navigation when user types
 				resetOnInputChange()
 
@@ -549,14 +547,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					setFileSearchResults([]) // Clear file search results.
 				}
 			},
-			[
-				setInputValue,
-				setSearchRequestId,
-				setFileSearchResults,
-				setSearchLoading,
-				resetOnInputChange,
-				originalPromptBeforeEnhancement,
-			],
+			[setInputValue, setSearchRequestId, setFileSearchResults, setSearchLoading, resetOnInputChange],
 		)
 
 		useEffect(() => {

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

@@ -184,10 +184,70 @@ describe("ChatTextArea", () => {
 	})
 
 	describe("enhanced prompt response", () => {
-		it("should update input value when receiving enhanced prompt", () => {
+		it("should update input value using native browser methods when receiving enhanced prompt", () => {
 			const setInputValue = vi.fn()
 
-			render(<ChatTextArea {...defaultProps} setInputValue={setInputValue} />)
+			// Mock document.execCommand
+			const mockExecCommand = vi.fn().mockReturnValue(true)
+			Object.defineProperty(document, "execCommand", {
+				value: mockExecCommand,
+				writable: true,
+			})
+
+			const { container } = render(
+				<ChatTextArea {...defaultProps} setInputValue={setInputValue} inputValue="Original prompt" />,
+			)
+
+			const textarea = container.querySelector("textarea")!
+
+			// Mock textarea methods
+			const mockSelect = vi.fn()
+			const mockFocus = vi.fn()
+			textarea.select = mockSelect
+			textarea.focus = mockFocus
+
+			// Simulate receiving enhanced prompt message
+			window.dispatchEvent(
+				new MessageEvent("message", {
+					data: {
+						type: "enhancedPrompt",
+						text: "Enhanced test prompt",
+					},
+				}),
+			)
+
+			// Verify native browser methods were used
+			expect(mockFocus).toHaveBeenCalled()
+			expect(mockSelect).toHaveBeenCalled()
+			expect(mockExecCommand).toHaveBeenCalledWith("insertText", false, "Enhanced test prompt")
+		})
+
+		it("should fallback to setRangeText when execCommand is not available", () => {
+			const setInputValue = vi.fn()
+
+			// Mock document.execCommand to be undefined (not available)
+			Object.defineProperty(document, "execCommand", {
+				value: undefined,
+				writable: true,
+			})
+
+			const { container } = render(
+				<ChatTextArea {...defaultProps} setInputValue={setInputValue} inputValue="Original prompt" />,
+			)
+
+			const textarea = container.querySelector("textarea")!
+
+			// Mock textarea methods
+			const mockSelect = vi.fn()
+			const mockFocus = vi.fn()
+			const mockSetRangeText = vi.fn()
+			const mockDispatchEvent = vi.fn()
+
+			textarea.select = mockSelect
+			textarea.focus = mockFocus
+			textarea.setRangeText = mockSetRangeText
+			textarea.dispatchEvent = mockDispatchEvent
+			textarea.value = "Original prompt"
 
 			// Simulate receiving enhanced prompt message
 			window.dispatchEvent(
@@ -199,7 +259,28 @@ describe("ChatTextArea", () => {
 				}),
 			)
 
-			expect(setInputValue).toHaveBeenCalledWith("Enhanced test prompt")
+			// Verify fallback methods were used
+			expect(mockFocus).toHaveBeenCalled()
+			expect(mockSetRangeText).toHaveBeenCalledWith("Enhanced test prompt", 0, 15, "select") // 15 is length of "Original prompt"
+			expect(mockDispatchEvent).toHaveBeenCalledWith(expect.any(Event))
+		})
+
+		it("should not crash when textarea ref is not available", () => {
+			const setInputValue = vi.fn()
+
+			render(<ChatTextArea {...defaultProps} setInputValue={setInputValue} />)
+
+			// Simulate receiving enhanced prompt message when textarea ref might not be ready
+			expect(() => {
+				window.dispatchEvent(
+					new MessageEvent("message", {
+						data: {
+							type: "enhancedPrompt",
+							text: "Enhanced test prompt",
+						},
+					}),
+				)
+			}).not.toThrow()
 		})
 	})
 

webview-ui/vitest.setup.ts

@@ -1,6 +1,12 @@
 import "@testing-library/jest-dom"
 import "@testing-library/jest-dom/vitest"
 
+// Force React into development mode for tests
+// This is needed to enable act(...) function in React Testing Library
+globalThis.process = globalThis.process || {}
+globalThis.process.env = globalThis.process.env || {}
+globalThis.process.env.NODE_ENV = "development"
+
 class MockResizeObserver {
 	observe() {}
 	unobserve() {}