Merge pull request #3465 from Kilo-Org/replace-input-on-autocomplete

Replace input on autocomplete

Author: catrielmuller

.changeset/olive-ads-cover.md

@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+improves autocomplete behavior

cli/src/state/atoms/__tests__/keyboard.test.ts

@@ -354,12 +354,64 @@ describe("keypress atoms", () => {
 			}
 			store.set(keyboardHandlerAtom, tabKey)
 
-			// Should append only 'de' to complete '/mode'
+			// Should complete to '/mode'
 			const text = store.get(textBufferStringAtom)
 			expect(text).toBe("/mode")
 		})
 
-		it("should complete argument by appending only missing part", () => {
+		it("should complete command even when user types wrong letters", () => {
+			// Type '/modl' - typo, but 'model' should still be suggested
+			const chars = ["/", "m", "o", "d", "l"]
+			for (const char of chars) {
+				const key: Key = {
+					name: char,
+					sequence: char,
+					ctrl: false,
+					meta: false,
+					shift: false,
+					paste: false,
+				}
+				store.set(keyboardHandlerAtom, key)
+			}
+
+			// Autocomplete should now be visible
+			expect(store.get(showAutocompleteAtom)).toBe(true)
+
+			// Set up autocomplete suggestions
+			const mockCommand: Command = {
+				name: "model",
+				description: "Manage models",
+				aliases: [],
+				usage: "/model <subcommand>",
+				examples: ["/model info"],
+				category: "settings",
+				handler: vi.fn(),
+			}
+			const mockSuggestion: CommandSuggestion = {
+				command: mockCommand,
+				matchScore: 70,
+				highlightedName: "model",
+			}
+			store.set(suggestionsAtom, [mockSuggestion])
+			store.set(selectedIndexAtom, 0)
+
+			// Press Tab
+			const tabKey: Key = {
+				name: "tab",
+				sequence: "\t",
+				ctrl: false,
+				meta: false,
+				shift: false,
+				paste: false,
+			}
+			store.set(keyboardHandlerAtom, tabKey)
+
+			// Should replace '/modl' with '/model' (not '/modlmodel')
+			const text = store.get(textBufferStringAtom)
+			expect(text).toBe("/model")
+		})
+
+		it("should complete argument by replacing partial text", () => {
 			// Type '/mode tes' - this will automatically trigger autocomplete
 			const input = "/mode tes"
 			for (const char of input) {
@@ -398,11 +450,96 @@ describe("keypress atoms", () => {
 			}
 			store.set(keyboardHandlerAtom, tabKey)
 
-			// Should append only 't' to complete '/mode test'
+			// Should replace 'tes' with 'test' to complete '/mode test'
 			const text = store.get(textBufferStringAtom)
 			expect(text).toBe("/mode test")
 		})
 
+		it("should replace partial argument with full suggestion", () => {
+			// Bug fix: Type '/model info gpt' with suggestion 'openai/gpt-5'
+			// This test verifies the fix where Tab was incorrectly appending instead of replacing
+			const input = "/model info gpt"
+			for (const char of input) {
+				const key: Key = {
+					name: char,
+					sequence: char,
+					ctrl: false,
+					meta: false,
+					shift: false,
+					paste: false,
+				}
+				store.set(keyboardHandlerAtom, key)
+			}
+
+			// Set up argument suggestions
+			const mockArgumentSuggestion: ArgumentSuggestion = {
+				value: "openai/gpt-5",
+				description: "OpenAI GPT-5 model",
+				matchScore: 90,
+				highlightedValue: "openai/gpt-5",
+			}
+			store.set(argumentSuggestionsAtom, [mockArgumentSuggestion])
+			store.set(suggestionsAtom, []) // No command suggestions
+			store.set(selectedIndexAtom, 0)
+
+			// Press Tab
+			const tabKey: Key = {
+				name: "tab",
+				sequence: "\t",
+				ctrl: false,
+				meta: false,
+				shift: false,
+				paste: false,
+			}
+			store.set(keyboardHandlerAtom, tabKey)
+
+			// Should replace 'gpt' with 'openai/gpt-5' (not append to get 'gptopenai/gpt-5')
+			const text = store.get(textBufferStringAtom)
+			expect(text).toBe("/model info openai/gpt-5")
+		})
+
+		it("should complete argument from empty with trailing space", () => {
+			// Type '/model info ' (with trailing space)
+			const input = "/model info "
+			for (const char of input) {
+				const key: Key = {
+					name: char,
+					sequence: char,
+					ctrl: false,
+					meta: false,
+					shift: false,
+					paste: false,
+				}
+				store.set(keyboardHandlerAtom, key)
+			}
+
+			// Set up argument suggestions
+			const mockArgumentSuggestion: ArgumentSuggestion = {
+				value: "openai/gpt-4",
+				description: "OpenAI GPT-4 model",
+				matchScore: 100,
+				highlightedValue: "openai/gpt-4",
+			}
+			store.set(argumentSuggestionsAtom, [mockArgumentSuggestion])
+			store.set(suggestionsAtom, [])
+			store.set(selectedIndexAtom, 0)
+
+			// Press Tab
+			const tabKey: Key = {
+				name: "tab",
+				sequence: "\t",
+				ctrl: false,
+				meta: false,
+				shift: false,
+				paste: false,
+			}
+			store.set(keyboardHandlerAtom, tabKey)
+
+			// Should add the full suggestion value
+			const text = store.get(textBufferStringAtom)
+			expect(text).toBe("/model info openai/gpt-4")
+		})
+
 		it("should handle exact match completion", () => {
 			// Type '/help' - this will automatically trigger autocomplete
 			const input = "/help"

cli/src/state/atoms/keyboard.ts

@@ -307,38 +307,6 @@ export const submitInputAtom = atom(null, (get, set, text: string | Buffer) => {
 // Keyboard Handler System
 // ============================================================================
 
-/**
- * Helper function to get the completion text (only the missing part to append)
- */
-function getCompletionText(currentInput: string, suggestion: CommandSuggestion | ArgumentSuggestion): string {
-	if ("command" in suggestion) {
-		// CommandSuggestion - complete the command name
-		const commandName = suggestion.command.name
-		const currentText = currentInput.startsWith("/") ? currentInput.slice(1) : currentInput
-
-		// If the command name starts with what user typed, return only the missing part
-		if (commandName.toLowerCase().startsWith(currentText.toLowerCase())) {
-			return commandName.slice(currentText.length)
-		}
-
-		// Otherwise return the full command (shouldn't happen in normal flow)
-		return commandName
-	} else {
-		// ArgumentSuggestion - complete the last argument
-		const parts = currentInput.split(" ")
-		const lastPart = parts[parts.length - 1] || ""
-		const suggestionValue = suggestion.value
-
-		// If suggestion starts with what user typed, return only the missing part
-		if (suggestionValue.toLowerCase().startsWith(lastPart.toLowerCase())) {
-			return suggestionValue.slice(lastPart.length)
-		}
-
-		// Otherwise return the full value
-		return suggestionValue
-	}
-}
-
 /**
  * Helper function to format autocomplete suggestions for display/submission
  */
@@ -487,11 +455,10 @@ function handleAutocompleteKeys(get: any, set: any, key: Key): void {
 				const suggestion = allSuggestions[selectedIndex]
 				const currentText = get(textBufferStringAtom)
 
-				// Get only the missing part to append
-				const completionText = getCompletionText(currentText, suggestion)
-
-				// Insert the completion text
-				set(insertTextAtom, completionText)
+				// Always replace the entire input with formatted suggestion
+				// This handles both commands and arguments correctly
+				const newText = formatSuggestion(suggestion, currentText)
+				set(setTextAtom, newText)
 			}
 			return