feat: Navigate prompt history in prompt field via arrow up/down (#4139) (#4450)

* feat: add prompt history navigation with arrow keys (#4139)

- Navigate through prompt history using arrow up/down keys
- Only triggers when cursor is at first line (up) or last line (down)
- Preserves current input when starting navigation
- Resets navigation state when typing or sending messages
- Follows VSCode's standard UX patterns for history navigation

* fix: correct prompt history order and add workspace filtering (#4139)

- Remove reverse() to maintain chronological order in history array
- Add workspace filtering to only show prompts from current workspace
- Ensure arrow up navigates to older prompts (as expected)
- Filter history items by workspace field matching current cwd

* test: Fix Windows unit test failures for prompt history navigation

- Add missing taskHistory and cwd properties to all useExtensionState mocks
- Add comprehensive test coverage for prompt history navigation feature
- Ensure all 25 tests pass including new prompt history functionality

Fixes failing Windows CI test in PR #4450

* refactor: Improve cursor positioning with useLayoutEffect

- Replace setTimeout(..., 0) with useLayoutEffect for more reliable cursor positioning
- Implement state-based cursor positioning pattern suggested by @mochiya98
- Add CursorPositionState interface for better type safety
- Maintain all existing functionality while improving timing reliability

This addresses the technical suggestion in PR #4450 comment about using
useLayoutEffect instead of setTimeout for DOM manipulation timing.

* feat: optimize prompt history with performance improvements and memory management

- Add useMemo for prompt history filtering to prevent unnecessary re-computations
- Implement MAX_PROMPT_HISTORY_SIZE = 100 limit for memory management
- Extract logic into usePromptHistory custom hook for better code organization
- Simplify ChatTextArea component by delegating history logic to custom hook

Addresses review feedback on PR #4450 for issue #4139

* refactor: clean up unused code and fix linting issues in prompt history

- Remove unused CursorPositionState interface from ChatTextArea
- Remove unused destructured variables from usePromptHistory hook
- Fix missing dependency in useEffect dependency array
- Rename unused parameter with underscore prefix

Related to #4139

* feat: implement hybrid prompt history with position reset

- In chat: Use conversation messages (user_feedback), newest first
- Out of chat: Use task history, oldest first
- Reset navigation position when switching between history sources
- Switch from taskHistory to clineMessages for active conversations
- Maintain backward compatibility with task history fallback
- Add comprehensive tests for hybrid behavior and position reset

This provides intuitive UX where:
- Users navigate recent conversation messages during tasks (newest first)
- Users access initial task prompts when starting fresh (oldest first)
- Navigation always starts fresh when switching contexts

* fix: correct task history slicing order for prompt navigation

Task history was using .slice(-100) which gets the newest 100 tasks,
but we want to show oldest tasks first when navigating. Changed to
.slice(0, 100) to get the oldest 100 tasks instead.

This ensures that when starting fresh (no conversation), up arrow
shows the oldest task prompts first, which is the intended behavior.

* refactor: remove comment on task history size limitation and clarify order preservation

* refactor: replace local ClineMessage and TaskHistoryItem interfaces with imported types

* fix: prevent prompt history fallback to task list during active conversation

When an active task has only an initial prompt with no follow-up user messages,
the prompt history should return empty instead of falling back to task history.
This fixes the "Starting Fresh" behavior appearing inappropriately.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

---------

Co-authored-by: Daniel Riccio <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

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

@@ -27,6 +27,7 @@ import ContextMenu from "./ContextMenu"
 import { VolumeX, Pin, Check } from "lucide-react"
 import { IconButton } from "./IconButton"
 import { cn } from "@/lib/utils"
+import { usePromptHistory } from "./hooks/usePromptHistory"
 
 interface ChatTextAreaProps {
 	inputValue: string
@@ -75,6 +76,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			cwd,
 			pinnedApiConfigs,
 			togglePinnedApiConfig,
+			taskHistory,
+			clineMessages,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration
@@ -153,6 +156,21 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false)
 		const [isFocused, setIsFocused] = useState(false)
 
+		// Use custom hook for prompt history navigation
+		const {
+			inputValueWithCursor,
+			setInputValueWithCursor,
+			handleHistoryNavigation,
+			resetHistoryNavigation,
+			resetOnInputChange,
+		} = usePromptHistory({
+			clineMessages,
+			taskHistory,
+			cwd,
+			inputValue,
+			setInputValue,
+		})
+
 		// Fetch git commits when Git is selected or when typing a hash.
 		useEffect(() => {
 			if (selectedType === ContextMenuOptionType.Git || /^[a-f0-9]+$/i.test(searchQuery)) {
@@ -360,10 +378,17 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 				const isComposing = event.nativeEvent?.isComposing ?? false
 
+				// Handle prompt history navigation using custom hook
+				if (handleHistoryNavigation(event, showContextMenu, isComposing)) {
+					return
+				}
+
 				if (event.key === "Enter" && !event.shiftKey && !isComposing) {
 					event.preventDefault()
 
 					if (!sendingDisabled) {
+						// Reset history navigation state when sending
+						resetHistoryNavigation()
 						onSend()
 					}
 				}
@@ -427,6 +452,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				queryItems,
 				customModes,
 				fileSearchResults,
+				handleHistoryNavigation,
+				resetHistoryNavigation,
 			],
 		)
 
@@ -437,6 +464,27 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 		}, [inputValue, intendedCursorPosition])
 
+		// Handle cursor positioning after history navigation
+		useLayoutEffect(() => {
+			if (!inputValueWithCursor.afterRender || !textAreaRef.current) return
+
+			if (inputValueWithCursor.afterRender === "SET_CURSOR_FIRST_LINE") {
+				const firstLineEnd =
+					inputValueWithCursor.value.indexOf("\n") === -1
+						? inputValueWithCursor.value.length
+						: inputValueWithCursor.value.indexOf("\n")
+				textAreaRef.current.setSelectionRange(firstLineEnd, firstLineEnd)
+			} else if (inputValueWithCursor.afterRender === "SET_CURSOR_LAST_LINE") {
+				const lines = inputValueWithCursor.value.split("\n")
+				const lastLineStart = inputValueWithCursor.value.length - lines[lines.length - 1].length
+				textAreaRef.current.setSelectionRange(lastLineStart, lastLineStart)
+			} else if (inputValueWithCursor.afterRender === "SET_CURSOR_START") {
+				textAreaRef.current.setSelectionRange(0, 0)
+			}
+
+			setInputValueWithCursor({ value: inputValueWithCursor.value })
+		}, [inputValueWithCursor, setInputValueWithCursor])
+
 		// Ref to store the search timeout.
 		const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -445,6 +493,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				const newValue = e.target.value
 				setInputValue(newValue)
 
+				// Reset history navigation when user types
+				resetOnInputChange()
+
 				const newCursorPosition = e.target.selectionStart
 				setCursorPosition(newCursorPosition)
 
@@ -499,7 +550,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					setFileSearchResults([]) // Clear file search results.
 				}
 			},
-			[setInputValue, setSearchRequestId, setFileSearchResults, setSearchLoading],
+			[setInputValue, setSearchRequestId, setFileSearchResults, setSearchLoading, resetOnInputChange],
 		)
 
 		useEffect(() => {