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,
@@ -231,14 +232,21 @@
 		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)
+
 		// 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(() => {
@@ -326,6 +334,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)
@@ -421,8 +450,14 @@
 			(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
 				if (showContextMenu) {
 					if (event.key === "Escape") {
+						// 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.
+						suppressedHistoryRef.current = normalizedInputValue
+						setShowContextMenu(false)
+						setSearchQuery("")
 						setSelectedType(null)
-						setSelectedMenuIndex(3) // File by default
+						setSelectedMenuIndex(-1)
 						return
 					}
 
@@ -437,6 +472,7 @@
 								fileSearchResults,
 								allModes,
 								commands,
+								promptHistory,
 							)
 							const optionsLength = options.length
 
@@ -467,24 +503,29 @@
 						return
 					}
 					if ((event.key === "Enter" || event.key === "Tab") && selectedMenuIndex !== -1) {
-						event.preventDefault()
 						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
 						}
-						return
+
+						// Nothing selectable (e.g. "No results"). Do not swallow the
+						// key: fall through so Enter still sends the message instead
+						// of leaving the composer unresponsive.
 					}
 				}
 
@@ -576,6 +617,7 @@
 				handleHistoryNavigation,
 				resetHistoryNavigation,
 				commands,
+				promptHistory,
 				enterBehavior,
 			],
 		)
@@ -602,10 +644,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)
@@ -655,7 +718,14 @@
 					setFileSearchResults([]) // Clear file search results.
 				}
 			},
-			[setInputValue, setSearchRequestId, setFileSearchResults, setSearchLoading, resetOnInputChange],
+			[
+				setInputValue,
+				setSearchRequestId,
+				setFileSearchResults,
+				setSearchLoading,
+				resetOnInputChange,
+				promptHistory,
+			],
 		)
 
 		useEffect(() => {
@@ -935,7 +1005,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(
@@ -1016,6 +1087,7 @@
 									loading={searchLoading}
 									dynamicSearchResults={fileSearchResults}
 									commands={commands}
+									history={promptHistory}
 								/>
 							</div>
 						)}
@@ -1076,8 +1148,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,23 @@
 						)}
 					</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}
+						style={{
+							lineHeight: "1.4",
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							minWidth: 0,
+						}}>
+						{option.value?.replace(/\s+/g, " ").trim()}
+					</span>
+				)
 			case ContextMenuOptionType.Problems:
 				return <span>{t("chat:contextMenu.problems")}</span>
 			case ContextMenuOptionType.Terminal:
@@ -230,6 +257,8 @@
 				return "link"
 			case ContextMenuOptionType.Git:
 				return "git-commit"
+			case ContextMenuOptionType.History:
+				return "history"
 			case ContextMenuOptionType.NoResults:
 				return "info"
 			default:

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

@@ -634,6 +634,90 @@ describe("ChatTextArea", () => {
 				expect(setInputValue).toHaveBeenCalledWith("New input")
 			})
 
+			it("should open the prompt history picker when typing a leading !", () => {
+				const setInputValue = vi.fn()
+				const onSend = vi.fn()
+				const { container } = render(
+					<ChatTextArea {...defaultProps} onSend={onSend} setInputValue={setInputValue} inputValue="" />,
+				)
+
+				const textarea = container.querySelector("textarea")!
+
+				fireEvent.change(textarea, { target: { value: "!", selectionStart: 1 } })
+
+				// Newest prompt first.
+				expect(container.textContent).toContain("Third prompt")
+
+				fireEvent.keyDown(textarea, { key: "Enter" })
+
+				// Selecting only fills the input; it must not send the message.
+				expect(setInputValue).toHaveBeenCalledWith("Third prompt")
+				expect(onSend).not.toHaveBeenCalled()
+			})
+
+			it("should close the prompt history picker on Escape without sending", () => {
+				const onSend = vi.fn()
+				const { container } = render(<ChatTextArea {...defaultProps} onSend={onSend} inputValue="" />)
+
+				const textarea = container.querySelector("textarea")!
+
+				fireEvent.change(textarea, { target: { value: "!thi", selectionStart: 4 } })
+				expect(container.textContent).toContain("Third prompt")
+
+				fireEvent.keyDown(textarea, { key: "Escape" })
+
+				expect(container.textContent).not.toContain("Third prompt")
+				expect(onSend).not.toHaveBeenCalled()
+			})
+
+			it("should not open the prompt history picker for a mid-message exclamation mark", () => {
+				const { container } = render(<ChatTextArea {...defaultProps} inputValue="" />)
+
+				const textarea = container.querySelector("textarea")!
+
+				fireEvent.change(textarea, { target: { value: "Great!" } })
+
+				expect(container.textContent).not.toContain("Third prompt")
+			})
+
+			it("should close the picker before cancelling an edit on Escape", () => {
+				const onCancel = vi.fn()
+				const { container } = render(
+					<ChatTextArea {...defaultProps} isEditMode onCancel={onCancel} inputValue="" />,
+				)
+
+				const textarea = container.querySelector("textarea")!
+
+				fireEvent.change(textarea, { target: { value: "!", selectionStart: 1 } })
+				expect(container.textContent).toContain("Third prompt")
+
+				// First press closes the picker and keeps the edit (and its draft).
+				fireEvent.keyDown(textarea, { key: "Escape" })
+				expect(onCancel).not.toHaveBeenCalled()
+				expect(container.textContent).not.toContain("Third prompt")
+
+				// Second press, with no picker open, cancels the edit.
+				fireEvent.keyDown(textarea, { key: "Escape" })
+				expect(onCancel).toHaveBeenCalledTimes(1)
+			})
+
+			it("should still send on Enter when the history query matches nothing", () => {
+				const onSend = vi.fn()
+				const setInputValue = vi.fn()
+				const { container } = render(
+					<ChatTextArea {...defaultProps} onSend={onSend} setInputValue={setInputValue} inputValue="" />,
+				)
+
+				const textarea = container.querySelector("textarea")!
+
+				fireEvent.change(textarea, { target: { value: "!zzz", selectionStart: 4 } })
+				fireEvent.keyDown(textarea, { key: "Enter" })
+
+				// "No results" is not selectable, so Enter must not be swallowed.
+				expect(onSend).toHaveBeenCalledTimes(1)
+				expect(setInputValue).not.toHaveBeenCalledWith("Third prompt")
+			})
+
 			it("should reset history navigation when sending message", () => {
 				const onSend = vi.fn()
 				const setInputValue = vi.fn()