✨ feat(autocomplete): improve text insertion handling

- integrate processTextInsertion to handle overlapping text
- enhance createInlineCompletionItem to use insertRange

✅ test(autocomplete): add tests for CompletionTextProcessor

- add unit tests for processTextInsertion function
- include MockTextEditor and MockTextDocument for testing
- test various completion and overlap scenarios

Author: Kilo Code

src/services/autocomplete/AutocompleteProvider.ts

@@ -10,6 +10,7 @@ import { AutocompleteDecorationAnimation } from "./AutocompleteDecorationAnimati
 import { isHumanEdit } from "./utils/EditDetectionUtils"
 import { ExperimentId } from "@roo-code/types"
 import { ClineProvider } from "../../core/webview/ClineProvider"
+import { processTextInsertion, InsertionContext } from "./utils/CompletionTextProcessor"
 
 export const UI_UPDATE_DEBOUNCE_MS = 250
 export const BAIL_OUT_TOO_MANY_LINES_LIMIT = 100
@@ -213,30 +214,31 @@ function setupAutocomplete(context: vscode.ExtensionContext): vscode.Disposable
 			const linePrefix = document
 				.getText(new vscode.Range(new vscode.Position(position.line, 0), position))
 				.trimStart()
-			console.log(`🚀🛑 Autocomplete for line with prefix: "${linePrefix}"!`)
-
 			const codeContext = await contextGatherer.gatherContext(document, position, true, true)
+			console.log(`🚀🛑 Autocomplete for line: '${codeContext.currentLine}'!`)
 
 			// Check if we have a cached completion for this context
 			const cacheKey = generateCacheKey(codeContext)
 			const cachedCompletions = completionsCache.get(cacheKey) ?? []
 			for (const completion of cachedCompletions) {
 				if (completion.startsWith(linePrefix)) {
-					// Only show the remaining part of the completion
-					const remainingSuffix = completion.substring(linePrefix.length)
-					if (remainingSuffix.length > 0) {
-						console.log(`🚀🎯 Using cached completions (${cachedCompletions.length} options)`)
+					// Process the completion text to avoid duplicating existing text in the document
+					const processedResult = processTextInsertion({ document, position, textToInsert: completion })
+					if (processedResult) {
+						console.log(
+							`🚀🎯 Using cached completion '${processedResult.processedText}' (${cachedCompletions.length} options)`,
+						)
 						animationManager.stopAnimation()
-						return [createInlineCompletionItem(remainingSuffix, position)]
+						return [createInlineCompletionItem(processedResult.processedText, processedResult.insertRange)]
 					}
 				}
 			}
 
-			const result = await debouncedGenerateCompletion({ document, codeContext, position })
-			if (!result || token.isCancellationRequested) {
+			const generationResult = await debouncedGenerateCompletion({ document, codeContext, position })
+			if (!generationResult || token.isCancellationRequested) {
 				return null
 			}
-			const { processedCompletion, cost } = result
+			const { processedCompletion, cost } = generationResult
 			console.log(`🚀🛑🚀🛑🚀🛑🚀🛑🚀🛑 \n`, {
 				processedCompletion,
 				cost: humanFormatCost(cost || 0),
@@ -260,7 +262,11 @@ function setupAutocomplete(context: vscode.ExtensionContext): vscode.Disposable
 				completionsCache.set(cacheKey, completions)
 			}
 
-			return [createInlineCompletionItem(processedCompletion, position)]
+			const processedResult = processTextInsertion({ document, position, textToInsert: processedCompletion })
+			if (processedResult) {
+				return [createInlineCompletionItem(processedResult.processedText, processedResult.insertRange)]
+			}
+			return null
 		},
 	}
 
@@ -377,18 +383,14 @@ Model: ${DEFAULT_MODEL}\
 /**
  * Creates an inline completion item with tracking command
  * @param completionText The text to be inserted as completion
- * @param insertRange The range where the completion should be inserted
- * @param position The position in the document
  * @returns A configured vscode.InlineCompletionItem
  */
-function createInlineCompletionItem(completionText: string, position: vscode.Position): vscode.InlineCompletionItem {
-	const insertRange = new vscode.Range(position, position)
-
+function createInlineCompletionItem(completionText: string, insertRange: vscode.Range): vscode.InlineCompletionItem {
 	return Object.assign(new vscode.InlineCompletionItem(completionText, insertRange), {
 		command: {
 			command: "kilo-code.trackAcceptedSuggestion",
 			title: "Track Accepted Suggestion",
-			arguments: [completionText, position],
+			arguments: [completionText],
 		},
 	})
 }

src/services/autocomplete/__tests__/CompletionTextProcessor.test.ts

@@ -0,0 +1,105 @@
+import "./autocompleteTestSetup"
+import * as vscode from "vscode"
+import { processTextInsertion, InsertionContext } from "../utils/CompletionTextProcessor"
+import { MockTextEditor } from "./MockTextEditor"
+
+describe("CompletionTextProcessor", () => {
+	test("should trim beginning when first line of completion starts with existing text", () => {
+		const completionText = "const x = 1 + 2;\nconsole.log(x);"
+		const { document, cursorPosition } = MockTextEditor.create("const x = ␣")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("1 + 2;\nconsole.log(x);")
+	})
+
+	test("should trim end when last line of completion matches existing text", () => {
+		const completionText = "function add(a, b) {\n  return a + b;\n}"
+		const { document, cursorPosition } = MockTextEditor.create("function add(a, b) {␣\n}")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("\n  return a + b;") // only the non-overlapping part
+	})
+
+	test("should trim both beginning and end when both match", () => {
+		const completionText = "if (condition) {\n  doSomething();\n}"
+		const { document, cursorPosition } = MockTextEditor.create("if (condition) {␣\n}")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("\n  doSomething();") // only the non-overlapping part
+	})
+
+	test("should return null when completion text is completely contained in existing text", () => {
+		const completionText = "const x = 1;"
+		const { document, cursorPosition } = MockTextEditor.create("const x = 1;␣")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result).toBeNull()
+	})
+
+	test("should return original completion when there's no overlap", () => {
+		const completionText = "const y = 2;"
+		const { document, cursorPosition } = MockTextEditor.create("const x = 1;␣")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("const y = 2;")
+	})
+
+	test("should handle the example case from the code", () => {
+		const completionText = "a + b\n}"
+		const { document, cursorPosition } = MockTextEditor.create("a + ␣")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("b\n}")
+	})
+
+	test("should handle auto-closing parenthesis", () => {
+		const completionText = "a, b) {\n  return a + b\n}"
+		const { document, cursorPosition } = MockTextEditor.create(`function sum(␣)`)
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("a, b) {\n  return a + b\n}")
+		expect(result?.insertRange).toEqual(new vscode.Range(cursorPosition, cursorPosition.translate(0, 1)))
+	})
+
+	test("should handle the case where closing brace already exists", () => {
+		const completionText = "a + b\n}"
+		const { document, cursorPosition } = MockTextEditor.create("a + ␣\n}")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("b")
+	})
+
+	test("should handle common prefix with different suffixes", () => {
+		const completionText = "export function calculateSum(a: number, b: number)\n  return a + b;"
+		const { document, cursorPosition } = MockTextEditor.create("export function calculate␣): number {")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		// Should find the common prefix "export function calculate" and only return the remaining part
+		expect(result?.processedText).toBe("Sum(a: number, b: number)\n  return a + b;")
+	})
+
+	test("should provide modification information", () => {
+		const completionText = "const x = 1 + 2;\nconsole.log(x);"
+		const { document, cursorPosition } = MockTextEditor.create("const x = ␣")
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.modifications).toEqual({
+			prefixTrimmed: 10, // "const x = " plus trailing space
+			suffixTrimmed: 0,
+			originalLength: completionText.length,
+		})
+	})
+
+	test("should handle whitespace before completion text", () => {
+		const completionText = "return a + b"
+		const { document, cursorPosition } = MockTextEditor.create(
+			`\
+function sum(a:number, b:number): number {
+  return ␣
+}`,
+		)
+
+		const result = processTextInsertion({ document, position: cursorPosition, textToInsert: completionText })
+		expect(result?.processedText).toBe("a + b")
+	})
+})

src/services/autocomplete/__tests__/MockTextDocument.ts

@@ -0,0 +1,66 @@
+import * as vscode from "vscode"
+
+/**
+ * Create a mock TextDocument for testing
+ * This implementation does not contain cursor position information
+ */
+export class MockTextDocument {
+	private contentLines: string[]
+
+	constructor(content: string) {
+		this.contentLines = content.split("\n")
+	}
+
+	getText(range?: vscode.Range): string {
+		if (!range) {
+			return this.contentLines.join("\n")
+		}
+
+		const startLine = range.start.line
+		const endLine = range.end.line
+
+		if (startLine === endLine) {
+			return this.contentLines[startLine].substring(range.start.character, range.end.character)
+		}
+
+		const lines: string[] = []
+		for (let i = startLine; i <= endLine && i < this.contentLines.length; i++) {
+			if (i === startLine) {
+				lines.push(this.contentLines[i].substring(range.start.character))
+			} else if (i === endLine) {
+				lines.push(this.contentLines[i].substring(0, range.end.character))
+			} else {
+				lines.push(this.contentLines[i])
+			}
+		}
+
+		return lines.join("\n")
+	}
+
+	get lineCount(): number {
+		return this.contentLines.length
+	}
+
+	/**
+	 * Returns information about a specific line in the document
+	 * @param lineNumber The zero-based line number
+	 * @returns A simplified TextLine object containing the text and position information
+	 */
+	lineAt(lineNumber: number): vscode.TextLine {
+		if (lineNumber < 0 || lineNumber >= this.contentLines.length) {
+			throw new Error(`Invalid line number: ${lineNumber}`)
+		}
+
+		const text = this.contentLines[lineNumber]
+		const range = new vscode.Range(new vscode.Position(lineNumber, 0), new vscode.Position(lineNumber, text.length))
+
+		return {
+			text,
+			range,
+			lineNumber,
+			rangeIncludingLineBreak: range,
+			firstNonWhitespaceCharacterIndex: text.search(/\S|$/),
+			isEmptyOrWhitespace: !/\S/.test(text),
+		} as vscode.TextLine
+	}
+}

src/services/autocomplete/__tests__/MockTextEditor.ts

@@ -0,0 +1,53 @@
+import * as vscode from "vscode"
+import { MockTextDocument } from "./MockTextDocument"
+
+/**
+ * Special character used to mark cursor position in test documents.
+ * Using "␣" (U+2423, OPEN BOX) as it's visually distinct and unlikely to be in normal code.
+ */
+export const CURSOR_MARKER = "␣"
+
+/**
+ * MockTextEditor encapsulates both a TextDocument and cursor position
+ * for simpler testing of editor-related functionality
+ */
+export class MockTextEditor {
+	private _document: vscode.TextDocument
+	private _cursorPosition: vscode.Position
+
+	/**
+	 * Creates a new MockTextEditor
+	 * @param content Text content with required cursor marker (CURSOR_MARKER)
+	 */
+	constructor(content: string) {
+		// Find cursor position and remove the marker
+		const cursorOffset = content.indexOf(CURSOR_MARKER)
+		if (cursorOffset === -1) {
+			throw new Error(`Cursor marker ${CURSOR_MARKER} not found in test content`)
+		}
+
+		// Remove the cursor marker
+		const cleanContent = content.substring(0, cursorOffset) + content.substring(cursorOffset + CURSOR_MARKER.length)
+
+		// Calculate line and character for cursor position
+		const beforeCursor = content.substring(0, cursorOffset)
+		const lines = beforeCursor.split("\n")
+		const line = lines.length - 1
+		const character = lines[line].length
+
+		this._cursorPosition = new vscode.Position(line, character)
+		this._document = new MockTextDocument(cleanContent) as unknown as vscode.TextDocument
+	}
+
+	get document(): vscode.TextDocument {
+		return this._document
+	}
+
+	get cursorPosition(): vscode.Position {
+		return this._cursorPosition
+	}
+
+	static create(content: string): MockTextEditor {
+		return new MockTextEditor(content)
+	}
+}

src/services/autocomplete/__tests__/autocompleteTestSetup.ts

@@ -0,0 +1,41 @@
+// This file should be imported at the top of test files
+// It sets up common mocks used in tests
+
+// Mock the vscode module
+jest.mock("vscode", () => ({
+	Position: class {
+		constructor(
+			public line: number,
+			public character: number,
+		) {
+			this.line = line
+			this.character = character
+		}
+
+		translate(lineDelta: number, characterDelta: number): any {
+			return new (jest.requireMock("vscode").Position)(this.line + lineDelta, this.character + characterDelta)
+		}
+	},
+	Range: class {
+		constructor(
+			public start: any,
+			public end: any,
+		) {
+			this.start = start
+			this.end = end
+		}
+	},
+	InlineCompletionItem: class {
+		constructor(
+			public text: string,
+			public range: any,
+		) {
+			this.text = text
+			this.range = range
+		}
+	},
+	EndOfLine: {
+		LF: 1,
+		CRLF: 2,
+	},
+}))