feat(chat): add prompt history picker to the chat input

webview-ui/playwright/gallery/stories.tsx

@@ -155,6 +155,10 @@ export const stories: Record<string, Story> = {
 		const { ChatTextAreaStory } = await import("@/components/chat/__tests__/ChatTextArea.visual.fixture")
 		return <ChatTextAreaStory />
 	},
+	"chat-text-area-history": async () => {
+		const { ChatTextAreaHistoryStory } = await import("@/components/chat/__tests__/ChatTextArea.visual.fixture")
+		return <ChatTextAreaHistoryStory />
+	},
 	"history-empty": async () => {
 		const [{ AppProviders }, { default: HistoryView }] = await Promise.all([
 			import("../AppProviders"),

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

@@ -16,6 +16,7 @@
 	ContextMenuOptionType,
 	getContextMenuOptions,
 	insertMention,
+	isHistoryTrigger,
 	removeMention,
 	shouldShowContextMenu,
 	SearchResult,
@@ -251,14 +252,29 @@
 		const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false)
 		const [isFocused, setIsFocused] = useState(false)
 
+		// Text for which the user explicitly dismissed the prompt history picker.
+		// Without this, recalling (or typing) a message that starts with "!" would
+		// pop the picker back open on the very next keystroke.
+		const suppressedHistoryRef = useRef<string | null>(null)
+
+		// A controlled reset (for example sending the message) does not go through
+		// handleInputChange, so clear the dismissal once the input is empty again.
+		useEffect(() => {
+			if (!normalizedInputValue) {
+				suppressedHistoryRef.current = null
+			}
+		}, [normalizedInputValue])
+
 		// Use custom hook for prompt history navigation
-		const { handleHistoryNavigation, resetHistoryNavigation, resetOnInputChange } = usePromptHistory({
-			clineMessages,
-			taskHistory,
-			cwd,
-			inputValue: normalizedInputValue,
-			setInputValue,
-		})
+		const { handleHistoryNavigation, resetHistoryNavigation, resetOnInputChange, promptHistory } = usePromptHistory(
+			{
+				clineMessages,
+				taskHistory,
+				cwd,
+				inputValue: normalizedInputValue,
+				setInputValue,
+			},
+		)
 
 		// Fetch git commits when Git is selected or when typing a hash.
 		useEffect(() => {
@@ -346,6 +362,27 @@
 					return
 				}
 
+				if (type === ContextMenuOptionType.History && value) {
+					// Replace the whole input with the recalled prompt instead of
+					// inserting it as a mention: the "!" prefix is only a trigger
+					// and must not survive into the message. Deliberately does not
+					// send, so the user can edit the prompt before re-sending.
+					suppressedHistoryRef.current = value
+					setShowContextMenu(false)
+					setSelectedType(null)
+					setSelectedMenuIndex(-1)
+					setSearchQuery("")
+					setInputValue(value)
+					setCursorPosition(value.length)
+					setIntendedCursorPosition(value.length)
+					resetHistoryNavigation()
+
+					setTimeout(() => {
+						textAreaRef.current?.focus()
+					}, 0)
+					return
+				}
+
 				if (type === ContextMenuOptionType.Mode && value) {
 					// Handle mode selection.
 					setMode(value)
@@ -439,10 +476,20 @@
 
 		const handleKeyDown = useCallback(
 			(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+				const isComposing = event.nativeEvent?.isComposing ?? false
+
 				if (showContextMenu) {
-					if (event.key === "Escape") {
+					if (event.key === "Escape" && !isComposing) {
+						// Dismiss the menu outright. `!` is easy to type by
+						// accident, so Escape must actually close the picker
+						// rather than leave the arrow keys captured by it.
+						// While composing, Escape belongs to the IME candidate
+						// window and must not dismiss the picker.
+						suppressedHistoryRef.current = normalizedInputValue
+						setShowContextMenu(false)
+						setSearchQuery("")
 						setSelectedType(null)
-						setSelectedMenuIndex(3) // File by default
+						setSelectedMenuIndex(-1)
 						return
 					}
 
@@ -457,6 +504,7 @@
 								fileSearchResults,
 								allModes,
 								commands,
+								promptHistory,
 							)
 							const optionsLength = options.length
 
@@ -486,30 +534,47 @@
 						})
 						return
 					}
-					if ((event.key === "Enter" || event.key === "Tab") && selectedMenuIndex !== -1) {
-						event.preventDefault()
+					// Only a plain Enter/Tab commits a row. Shift+Enter, Ctrl/Cmd+Enter
+					// and an IME-composed Enter stay on their normal newline/send path.
+					const isRowSelectKey =
+						(event.key === "Enter" || event.key === "Tab") &&
+						!event.shiftKey &&
+						!event.ctrlKey &&
+						!event.metaKey &&
+						!event.altKey &&
+						!isComposing
+
+					if (isRowSelectKey && selectedMenuIndex !== -1) {
 						const selectedOption = getContextMenuOptions(
 							searchQuery,
 							selectedType,
 							queryItems,
 							fileSearchResults,
 							allModes,
 							commands,
+							promptHistory,
 						)[selectedMenuIndex]
 						if (
 							selectedOption &&
 							selectedOption.type !== ContextMenuOptionType.URL &&
 							selectedOption.type !== ContextMenuOptionType.NoResults &&
 							selectedOption.type !== ContextMenuOptionType.SectionHeader
 						) {
+							event.preventDefault()
 							handleMentionSelect(selectedOption.type, selectedOption.value)
+							return
+						}
+
+						// Nothing selectable (e.g. "No results"). A history query is the
+						// whole message, so let Enter send it. Other menus keep their
+						// previous behavior and absorb the key.
+						if (!isHistoryTrigger(searchQuery)) {
+							event.preventDefault()
+							return
 						}
-						return
 					}
 				}
 
-				const isComposing = event.nativeEvent?.isComposing ?? false
-
 				// Handle prompt history navigation using custom hook
 				if (handleHistoryNavigation(event, showContextMenu, isComposing)) {
 					return
@@ -596,6 +661,7 @@
 				handleHistoryNavigation,
 				resetHistoryNavigation,
 				commands,
+				promptHistory,
 				enterBehavior,
 			],
 		)
@@ -622,10 +688,31 @@
 				setCursorPosition(newCursorPosition)
 
 				const showMenu = shouldShowContextMenu(newValue, newCursorPosition)
+
+				if (isHistoryTrigger(newValue)) {
+					const suppressed = suppressedHistoryRef.current
+
+					// Keep the picker closed when the user dismissed it for this text,
+					// or when there is nothing to recall. Without the second guard an
+					// empty picker would swallow Enter for a message starting with "!".
+					if ((suppressed !== null && newValue.startsWith(suppressed)) || promptHistory.length === 0) {
+						setShowContextMenu(false)
+						setSearchQuery("")
+						setSelectedMenuIndex(-1)
+						return
+					}
+				} else {
+					suppressedHistoryRef.current = null
+				}
+
 				setShowContextMenu(showMenu)
 
 				if (showMenu) {
-					if (newValue.startsWith("/") && !newValue.includes(" ")) {
+					if (isHistoryTrigger(newValue)) {
+						// getContextMenuOptions dispatches on the leading "!" itself.
+						setSearchQuery(newValue)
+						setSelectedMenuIndex(0)
+					} else if (newValue.startsWith("/") && !newValue.includes(" ")) {
 						// Handle slash command - request fresh commands
 						const query = newValue
 						setSearchQuery(query)
@@ -675,7 +762,14 @@
 					setFileSearchResults([]) // Clear file search results.
 				}
 			},
-			[setInputValue, setSearchRequestId, setFileSearchResults, setSearchLoading, resetOnInputChange],
+			[
+				setInputValue,
+				setSearchRequestId,
+				setFileSearchResults,
+				setSearchLoading,
+				resetOnInputChange,
+				promptHistory,
+			],
 		)
 
 		useEffect(() => {
@@ -955,7 +1049,8 @@
 			}
 		})
 
-		const placeholderBottomText = `\n(${t("chat:addContext")}${shouldDisableImages ? `, ${t("chat:dragFiles")}` : `, ${t("chat:dragFilesImages")}`})`
+		const dragHint = shouldDisableImages ? t("chat:dragFiles") : t("chat:dragFilesImages")
+		const placeholderBottomText = `\n(${t("chat:addContext")}, ${t("chat:historyHint")}, ${dragHint})`
 
 		// Common mode selector handler
 		const handleModeChange = useCallback(
@@ -1039,6 +1134,7 @@
 									loading={searchLoading}
 									dynamicSearchResults={fileSearchResults}
 									commands={commands}
+									history={promptHistory}
 								/>
 							</div>
 						)}
@@ -1099,8 +1195,16 @@
 								}}
 								onFocus={() => setIsFocused(true)}
 								onKeyDown={(e) => {
-									// Handle ESC to cancel in edit mode
-									if (isEditMode && e.key === "Escape" && !e.nativeEvent?.isComposing) {
+									// Handle ESC to cancel in edit mode. The context menu
+									// takes precedence: while the history picker is open,
+									// ESC only closes it, so cancelling the edit (which
+									// discards the draft) needs a second press.
+									if (
+										isEditMode &&
+										e.key === "Escape" &&
+										!showContextMenu &&
+										!e.nativeEvent?.isComposing
+									) {
 										e.preventDefault()
 										onCancel?.()
 										return

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

@@ -30,6 +30,7 @@
 	loading?: boolean
 	dynamicSearchResults?: SearchResult[]
 	commands?: Command[]
+	history?: string[]
 }
 
 const ContextMenu: React.FC<ContextMenuProps> = ({
@@ -43,13 +44,22 @@
 	modes,
 	dynamicSearchResults = [],
 	commands = [],
+	history = [],
 }) => {
 	const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("")
 	const menuRef = useRef<HTMLDivElement>(null)
 
 	const filteredOptions = useMemo(() => {
-		return getContextMenuOptions(searchQuery, selectedType, queryItems, dynamicSearchResults, modes, commands)
-	}, [searchQuery, selectedType, queryItems, dynamicSearchResults, modes, commands])
+		return getContextMenuOptions(
+			searchQuery,
+			selectedType,
+			queryItems,
+			dynamicSearchResults,
+			modes,
+			commands,
+			history,
+		)
+	}, [searchQuery, selectedType, queryItems, dynamicSearchResults, modes, commands, history])
 
 	useEffect(() => {
 		if (menuRef.current) {
@@ -138,6 +148,17 @@
 						)}
 					</div>
 				)
+			case ContextMenuOptionType.History:
+				// Prompts can be long and multi-line; keep every row to one line so
+				// the picker stays scannable. The full text lands in the input on
+				// selection, and line breaks become visible there.
+				return (
+					<span
+						title={option.value}
+						className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap leading-[1.4]">
+						{option.value?.replace(/\s+/g, " ").trim()}
+					</span>
+				)
 			case ContextMenuOptionType.Problems:
 				return <span>{t("chat:contextMenu.problems")}</span>
 			case ContextMenuOptionType.Terminal:
@@ -230,6 +251,8 @@
 				return "link"
 			case ContextMenuOptionType.Git:
 				return "git-commit"
+			case ContextMenuOptionType.History:
+				return "history"
 			case ContextMenuOptionType.NoResults:
 				return "info"
 			default:
@@ -267,6 +290,7 @@
 
 	return (
 		<div
+			data-testid="context-menu"
 			style={{
 				position: "absolute",
 				bottom: "calc(100% - 10px)",