@gajae-code/tui 0.8.1 → 0.9.0

package/src/components/editor.ts

@@ -1,5 +1,9 @@
-import { getProjectDir, logger } from "@gajae-code/utils";
-import type { AutocompleteProvider, CombinedAutocompleteProvider } from "../autocomplete";
+import { getProjectDir, logger, onDefaultTabWidthChange } from "@gajae-code/utils";
+import {
+	type AutocompleteProvider,
+	type CombinedAutocompleteProvider,
+	extractSlashCommandTokenPrefix,
+} from "../autocomplete";
 import { BracketedPasteHandler } from "../bracketed-paste";
 import { getKeybindings, type KeybindingsManager } from "../keybindings";
 import { extractPrintableText, matchesKey } from "../keys";
@@ -340,10 +344,27 @@ interface EditorState {
 
 interface LayoutLine {
 	text: string;
+	visibleWidth: number;
+	logicalLine: number;
 	hasCursor: boolean;
 	cursorPos?: number;
 }
 
+interface LayoutCacheKey {
+	docVersion: number;
+	contentWidth: number;
+	optionsKey: string;
+}
+
+interface LayoutCache {
+	key: LayoutCacheKey;
+	cursorLine: number;
+	cursorCol: number;
+	lines: LayoutLine[];
+	lineStarts: number[];
+	lineCounts: number[];
+}
+
 export interface EditorTheme {
 	borderColor: (str: string) => string;
 	selectList: SelectListTheme;
@@ -373,6 +394,18 @@ interface HistoryStorage {
 
 type HistoryCursorAnchor = "start" | "end";
 
+/** Test-only performance counters for advisory baseline tests. */
+export const __editorPerfCounters = {
+	layoutTextInvocations: 0,
+	layoutLogicalLinesProcessed: 0,
+	visibleWidthMeasurements: 0,
+	reset(): void {
+		this.layoutTextInvocations = 0;
+		this.layoutLogicalLinesProcessed = 0;
+		this.visibleWidthMeasurements = 0;
+	},
+};
+
 export class Editor implements Component, Focusable {
 	#state: EditorState = {
 		lines: [""],
@@ -400,9 +433,12 @@ export class Editor implements Component, Focusable {
 	// Store last layout width for cursor navigation
 	#lastLayoutWidth: number = 80;
 	#paddingXOverride: number | undefined;
+	#rightGutterWidth = 0;
 	#maxHeight?: number;
 	#scrollOffset: number = 0;
 	#wrappedLineCache: CachedWrappedLine[] = [];
+	#docVersion = 0;
+	#layoutCache: LayoutCache | undefined;
 
 	// Emacs-style kill ring
 	#killRing = new KillRing();
@@ -463,9 +499,25 @@ export class Editor implements Component, Focusable {
 	#borderStyle: EditorBorderStyle = "round";
 	#closedBorderBox = false;
 
+	#disposeTabWidthListener?: () => void;
+
 	constructor(theme: EditorTheme) {
 		this.#theme = theme;
 		this.borderColor = theme.borderColor;
+		// Raw tabs can reach editor state via insertText()/autocomplete results
+		// (setText expands tabs by contract). visibleWidth + wrapping depend on the
+		// default tab width, so a runtime tab-width change must drop both caches.
+		this.#disposeTabWidthListener = onDefaultTabWidthChange(() => {
+			this.invalidate();
+			if (this.#inputPrefix !== undefined) {
+				this.#inputPrefixWidth = visibleWidth(this.#inputPrefix);
+			}
+		});
+	}
+
+	dispose(): void {
+		this.#disposeTabWidthListener?.();
+		this.#disposeTabWidthListener = undefined;
 	}
 
 	setAutocompleteProvider(provider: AutocompleteProvider): void {
@@ -487,6 +539,7 @@ export class Editor implements Component, Focusable {
 	 */
 	setTopBorder(content: EditorTopBorder | undefined): void {
 		this.#topBorderContent = content;
+		this.#invalidateLayoutCache();
 	}
 
 	/**
@@ -494,38 +547,46 @@ export class Editor implements Component, Focusable {
 	 */
 	setBorderVisible(borderVisible: boolean): void {
 		this.#borderVisible = borderVisible;
+		this.#invalidateLayoutCache();
 	}
 
 	setBorderStyle(borderStyle: EditorBorderStyle): void {
 		this.#borderStyle = borderStyle;
+		this.#invalidateLayoutCache();
 	}
 
 	setClosedBorderBox(closedBorderBox: boolean): void {
 		this.#closedBorderBox = closedBorderBox;
+		this.#invalidateLayoutCache();
 	}
 
 	setPromptGutter(promptGutter: string | undefined): void {
 		this.#promptGutter = promptGutter;
+		this.#invalidateLayoutCache();
 	}
 
 	setInputPrefix(inputPrefix: string | undefined): void {
 		this.#inputPrefix = inputPrefix;
 		this.#inputPrefixWidth = inputPrefix ? visibleWidth(inputPrefix) : 0;
+		this.#invalidateLayoutCache();
 	}
 
 	setPlaceholder(placeholder: string | undefined): void {
 		const trimmed = placeholder?.trim();
 		this.#placeholder = trimmed ? trimmed : undefined;
+		this.#invalidateLayoutCache();
 	}
 
 	/**
 	 * Get the available width for top border content given a total terminal width.
-	 * Accounts for the border characters and horizontal padding when visible.
+	 * Accounts for right gutter, border characters, and horizontal padding when visible.
 	 */
 	getTopBorderAvailableWidth(terminalWidth: number): number {
+		const rightGutterWidth = Math.min(this.#rightGutterWidth, Math.max(0, terminalWidth - 1));
+		const renderWidth = Math.max(1, terminalWidth - rightGutterWidth);
 		const paddingX = this.#getEditorPaddingX();
 		const borderWidth = this.#getHorizontalChromeWidth(paddingX);
-		return Math.max(0, terminalWidth - borderWidth * 2);
+		return Math.max(0, renderWidth - borderWidth * 2);
 	}
 
 	/**
@@ -533,6 +594,7 @@ export class Editor implements Component, Focusable {
 	 */
 	setUseTerminalCursor(useTerminalCursor: boolean): void {
 		this.#useTerminalCursor = useTerminalCursor;
+		this.#invalidateLayoutCache();
 	}
 
 	getUseTerminalCursor(): boolean {
@@ -547,6 +609,11 @@ export class Editor implements Component, Focusable {
 
 	setPaddingX(paddingX: number): void {
 		this.#paddingXOverride = Math.max(0, paddingX);
+		this.#invalidateLayoutCache();
+	}
+
+	setRightGutterWidth(width: number): void {
+		this.#rightGutterWidth = Number.isFinite(width) ? Math.max(0, Math.floor(width)) : 0;
 	}
 
 	getAutocompleteMaxVisible(): number {
@@ -636,10 +703,21 @@ export class Editor implements Component, Focusable {
 			this.onChange(this.getText());
 		}
 		this.#wrappedLineCache.length = 0;
+		this.#bumpDocumentVersion();
 	}
 
 	invalidate(): void {
 		this.#wrappedLineCache.length = 0;
+		this.#layoutCache = undefined;
+	}
+
+	#bumpDocumentVersion(): void {
+		this.#docVersion += 1;
+		this.#layoutCache = undefined;
+	}
+
+	#invalidateLayoutCache(): void {
+		this.#layoutCache = undefined;
 	}
 
 	#getEditorPaddingX(): number {
@@ -785,12 +863,14 @@ export class Editor implements Component, Focusable {
 	}
 
 	render(width: number): string[] {
+		const rightGutterWidth = Math.min(this.#rightGutterWidth, Math.max(0, width - 1));
+		const renderWidth = Math.max(1, width - rightGutterWidth);
 		const paddingX = this.#getEditorPaddingX();
 		const borderVisible = this.#borderVisible;
-		const promptGutter = this.#getPromptGutter(width, paddingX);
-		const contentAreaWidth = this.#getContentWidth(width, paddingX);
+		const promptGutter = this.#getPromptGutter(renderWidth, paddingX);
+		const contentAreaWidth = this.#getContentWidth(renderWidth, paddingX);
 		const inputPrefixWidth = this.#inputPrefixWidth;
-		const layoutWidth = Math.max(1, this.#getLayoutWidth(width, paddingX) - inputPrefixWidth);
+		const layoutWidth = Math.max(1, this.#getLayoutWidth(renderWidth, paddingX) - inputPrefixWidth);
 		this.#lastLayoutWidth = layoutWidth;
 
 		// Box-drawing characters for the configured input box shape.
@@ -811,7 +891,7 @@ export class Editor implements Component, Focusable {
 
 		if (borderVisible) {
 			// Render top border: ╭─ [status content] ────────────────╮
-			const topFillWidth = Math.max(0, width - borderWidth * 2);
+			const topFillWidth = Math.max(0, renderWidth - borderWidth * 2);
 			if (this.#topBorderContent) {
 				const { content, width: statusWidth } = this.#topBorderContent;
 				if (statusWidth <= topFillWidth) {
@@ -843,7 +923,7 @@ export class Editor implements Component, Focusable {
 		for (let visibleIndex = 0; visibleIndex < visibleLayoutLines.length; visibleIndex++) {
 			const layoutLine = visibleLayoutLines[visibleIndex]!;
 			let displayText = layoutLine.text;
-			let displayWidth = visibleWidth(layoutLine.text);
+			let displayWidth = layoutLine.visibleWidth;
 			let cursorInPadding = false;
 			const absoluteVisibleIndex = this.#scrollOffset + visibleIndex;
 			const showPromptGutter = promptGutter !== undefined && visibleIndex === 0;
@@ -1016,7 +1096,7 @@ export class Editor implements Component, Focusable {
 		}
 
 		if (borderVisible && this.#closedBorderBox) {
-			const bottomFillWidth = Math.max(0, width - borderWidth * 2);
+			const bottomFillWidth = Math.max(0, renderWidth - borderWidth * 2);
 			const bottomLeftClosed = this.borderColor(`${box.bottomLeft}${box.horizontal.repeat(paddingX)}`);
 			const bottomRightClosed = this.borderColor(`${box.horizontal.repeat(paddingX)}${box.bottomRight}`);
 			result.push(bottomLeftClosed + horizontal.repeat(bottomFillWidth) + bottomRightClosed);
@@ -1024,10 +1104,15 @@ export class Editor implements Component, Focusable {
 
 		// Add autocomplete list if active
 		if (this.#autocompleteState && this.#autocompleteList) {
-			const autocompleteResult = this.#autocompleteList.render(width);
+			const autocompleteResult = this.#autocompleteList.render(renderWidth);
 			result.push(...autocompleteResult);
 		}
 
+		if (rightGutterWidth > 0) {
+			const rightGutter = padding(rightGutterWidth);
+			return result.map(line => line + rightGutter);
+		}
+
 		return result;
 	}
 
@@ -1128,6 +1213,7 @@ export class Editor implements Component, Focusable {
 						);
 
 						this.#state.lines = result.lines;
+						this.#bumpDocumentVersion();
 						this.#state.cursorLine = result.cursorLine;
 						this.#setCursorCol(result.cursorCol);
 
@@ -1167,6 +1253,7 @@ export class Editor implements Component, Focusable {
 							);
 
 							this.#state.lines = result.lines;
+							this.#bumpDocumentVersion();
 							this.#state.cursorLine = result.cursorLine;
 							this.#setCursorCol(result.cursorCol);
 							result.onApplied?.();
@@ -1188,6 +1275,7 @@ export class Editor implements Component, Focusable {
 						);
 
 						this.#state.lines = result.lines;
+						this.#bumpDocumentVersion();
 						this.#state.cursorLine = result.cursorLine;
 						this.#setCursorCol(result.cursorCol);
 
@@ -1308,6 +1396,7 @@ export class Editor implements Component, Focusable {
 							syncResult.prefix,
 						);
 						this.#state.lines = result.lines;
+						this.#bumpDocumentVersion();
 						this.#state.cursorLine = result.cursorLine;
 						this.#setCursorCol(result.cursorCol);
 						result.onApplied?.();
@@ -1441,119 +1530,175 @@ export class Editor implements Component, Focusable {
 		return this.#wrappedLineCache.length;
 	}
 
-	#layoutText(contentWidth: number): LayoutLine[] {
+	#makeLayoutCacheKey(contentWidth: number): LayoutCacheKey {
+		return {
+			docVersion: this.#docVersion,
+			contentWidth,
+			optionsKey: JSON.stringify({
+				borderVisible: this.#borderVisible,
+				borderStyle: this.#borderStyle,
+				closedBorderBox: this.#closedBorderBox,
+				inputPrefix: this.#inputPrefix,
+				inputPrefixWidth: this.#inputPrefixWidth,
+				placeholder: this.#placeholder,
+				promptGutter: this.#promptGutter,
+				useTerminalCursor: this.#useTerminalCursor,
+				cursorOverride: this.cursorOverride,
+				cursorOverrideWidth: this.cursorOverrideWidth,
+				autocompleteState: this.#autocompleteState,
+				autocompletePrefix: this.#autocompletePrefix,
+				autocompleteHint: this.#autocompleteList?.getSelectedItem()?.hint,
+			}),
+		};
+	}
+
+	#layoutLine(text: string, logicalLine: number, hasCursor: boolean, cursorPos?: number): LayoutLine {
+		__editorPerfCounters.visibleWidthMeasurements += 1;
+		return {
+			text,
+			visibleWidth: visibleWidth(text),
+			logicalLine,
+			hasCursor,
+			cursorPos,
+		};
+	}
+
+	#layoutLogicalLine(lineIndex: number, contentWidth: number): LayoutLine[] {
+		__editorPerfCounters.layoutLogicalLinesProcessed += 1;
+		const line = this.#state.lines[lineIndex] || "";
+		const isCurrentLine = lineIndex === this.#state.cursorLine;
+		const wrappedLine = this.#getWrappedLine(lineIndex, contentWidth);
 		const layoutLines: LayoutLine[] = [];
 
-		if (this.#state.lines.length === 0 || (this.#state.lines.length === 1 && this.#state.lines[0] === "")) {
-			// Empty editor — keep the wrap cache bounded by document size like
-			// the non-empty path below (stale entries from a previously large
-			// buffer must not be retained).
-			this.#wrappedLineCache.length = this.#state.lines.length;
-			layoutLines.push({
-				text: "",
-				hasCursor: true,
-				cursorPos: 0,
-			});
+		if (wrappedLine.width <= contentWidth) {
+			layoutLines.push(
+				this.#layoutLine(line, lineIndex, isCurrentLine, isCurrentLine ? this.#state.cursorCol : undefined),
+			);
 			return layoutLines;
 		}
 
-		// Process each logical line
-		for (let i = 0; i < this.#state.lines.length; i++) {
-			const line = this.#state.lines[i] || "";
-			const isCurrentLine = i === this.#state.cursorLine;
-			const wrappedLine = this.#getWrappedLine(i, contentWidth);
-
-			if (wrappedLine.width <= contentWidth) {
-				// Line fits in one layout line
-				if (isCurrentLine) {
-					layoutLines.push({
-						text: line,
-						hasCursor: true,
-						cursorPos: this.#state.cursorCol,
-					});
-				} else {
-					layoutLines.push({
-						text: line,
-						hasCursor: false,
-					});
-				}
-			} else {
-				// Line needs wrapping - use word-aware wrapping
-				const chunks = wrappedLine.chunks;
+		const chunks = wrappedLine.chunks;
+		for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
+			const chunk = chunks[chunkIndex];
+			if (!chunk) continue;
 
-				for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
-					const chunk = chunks[chunkIndex];
-					if (!chunk) continue;
+			const cursorPos = this.#state.cursorCol;
+			const isLastChunk = chunkIndex === chunks.length - 1;
+			let hasCursorInChunk = false;
+			let adjustedCursorPos = 0;
 
-					const cursorPos = this.#state.cursorCol;
-					const isLastChunk = chunkIndex === chunks.length - 1;
-
-					// Determine if cursor is in this chunk
-					// For word-wrapped chunks, we need to handle the case where
-					// cursor might be in trimmed whitespace at end of chunk
-					let hasCursorInChunk = false;
-					let adjustedCursorPos = 0;
-
-					if (isCurrentLine) {
-						if (isLastChunk) {
-							// Last chunk: cursor belongs here if >= startIndex
-							hasCursorInChunk = cursorPos >= chunk.startIndex;
-							adjustedCursorPos = cursorPos - chunk.startIndex;
-						} else {
-							// Non-last chunk: cursor belongs here if in range [startIndex, endIndex)
-							// But we need to handle the visual position in the trimmed text
-							hasCursorInChunk = cursorPos >= chunk.startIndex && cursorPos < chunk.endIndex;
-							if (hasCursorInChunk) {
-								adjustedCursorPos = cursorPos - chunk.startIndex;
-								// Clamp to text length (in case cursor was in trimmed whitespace)
-								if (adjustedCursorPos > chunk.text.length) {
-									adjustedCursorPos = chunk.text.length;
-								}
-							}
+			if (isCurrentLine) {
+				if (isLastChunk) {
+					hasCursorInChunk = cursorPos >= chunk.startIndex;
+					adjustedCursorPos = cursorPos - chunk.startIndex;
+				} else {
+					hasCursorInChunk = cursorPos >= chunk.startIndex && cursorPos < chunk.endIndex;
+					if (hasCursorInChunk) {
+						adjustedCursorPos = cursorPos - chunk.startIndex;
+						if (adjustedCursorPos > chunk.text.length) {
+							adjustedCursorPos = chunk.text.length;
 						}
 					}
+				}
+			}
 
-					if (hasCursorInChunk) {
-						let displayChunkText = chunk.text;
-						let displayCursorPos = adjustedCursorPos;
-						if (displayCursorPos > displayChunkText.length) {
-							let hiddenWhitespaceWidth = displayCursorPos - displayChunkText.length;
-							const displayChunkWidth = visibleWidth(displayChunkText);
-							if (displayChunkWidth + hiddenWhitespaceWidth <= contentWidth) {
-								displayChunkText += padding(hiddenWhitespaceWidth);
-							} else {
-								layoutLines.push({
-									text: displayChunkText,
-									hasCursor: false,
-								});
-								hiddenWhitespaceWidth -= Math.max(0, contentWidth - displayChunkWidth);
-								while (hiddenWhitespaceWidth > contentWidth) {
-									layoutLines.push({
-										text: padding(contentWidth),
-										hasCursor: false,
-									});
-									hiddenWhitespaceWidth -= contentWidth;
-								}
-								displayChunkText = padding(hiddenWhitespaceWidth);
-								displayCursorPos = hiddenWhitespaceWidth;
-							}
-						}
-						layoutLines.push({
-							text: displayChunkText,
-							hasCursor: true,
-							cursorPos: displayCursorPos,
-						});
+			if (hasCursorInChunk) {
+				let displayChunkText = chunk.text;
+				let displayCursorPos = adjustedCursorPos;
+				if (displayCursorPos > displayChunkText.length) {
+					let hiddenWhitespaceWidth = displayCursorPos - displayChunkText.length;
+					const displayChunkWidth = visibleWidth(displayChunkText);
+					__editorPerfCounters.visibleWidthMeasurements += 1;
+					if (displayChunkWidth + hiddenWhitespaceWidth <= contentWidth) {
+						displayChunkText += padding(hiddenWhitespaceWidth);
 					} else {
-						layoutLines.push({
-							text: chunk.text,
-							hasCursor: false,
-						});
+						layoutLines.push(this.#layoutLine(displayChunkText, lineIndex, false));
+						hiddenWhitespaceWidth -= Math.max(0, contentWidth - displayChunkWidth);
+						while (hiddenWhitespaceWidth > contentWidth) {
+							layoutLines.push(this.#layoutLine(padding(contentWidth), lineIndex, false));
+							hiddenWhitespaceWidth -= contentWidth;
+						}
+						displayChunkText = padding(hiddenWhitespaceWidth);
+						displayCursorPos = hiddenWhitespaceWidth;
 					}
 				}
+				layoutLines.push(this.#layoutLine(displayChunkText, lineIndex, true, displayCursorPos));
+			} else {
+				layoutLines.push(this.#layoutLine(chunk.text, lineIndex, false));
+			}
+		}
+
+		return layoutLines;
+	}
+
+	#sameLayoutCacheKey(a: LayoutCacheKey, b: LayoutCacheKey): boolean {
+		return a.docVersion === b.docVersion && a.contentWidth === b.contentWidth && a.optionsKey === b.optionsKey;
+	}
+
+	#replaceCachedLogicalLine(cache: LayoutCache, lineIndex: number, contentWidth: number): void {
+		const start = cache.lineStarts[lineIndex] ?? cache.lines.length;
+		const oldCount = cache.lineCounts[lineIndex] ?? 0;
+		const replacement = this.#layoutLogicalLine(lineIndex, contentWidth);
+		cache.lines.splice(start, oldCount, ...replacement);
+		cache.lineCounts[lineIndex] = replacement.length;
+		const delta = replacement.length - oldCount;
+		if (delta !== 0) {
+			for (let i = lineIndex + 1; i < cache.lineStarts.length; i++) {
+				cache.lineStarts[i] = (cache.lineStarts[i] ?? 0) + delta;
+			}
+		}
+	}
+
+	#patchCursorInCachedLayout(cache: LayoutCache, contentWidth: number): LayoutLine[] {
+		const previousLine = cache.cursorLine;
+		const currentLine = this.#state.cursorLine;
+		this.#replaceCachedLogicalLine(cache, previousLine, contentWidth);
+		if (currentLine !== previousLine) {
+			this.#replaceCachedLogicalLine(cache, currentLine, contentWidth);
+		}
+		cache.cursorLine = currentLine;
+		cache.cursorCol = this.#state.cursorCol;
+		return cache.lines;
+	}
+
+	#layoutText(contentWidth: number): LayoutLine[] {
+		__editorPerfCounters.layoutTextInvocations += 1;
+		const key = this.#makeLayoutCacheKey(contentWidth);
+		const cached = this.#layoutCache;
+		if (cached && this.#sameLayoutCacheKey(cached.key, key)) {
+			if (cached.cursorLine === this.#state.cursorLine && cached.cursorCol === this.#state.cursorCol) {
+				return cached.lines;
+			}
+			return this.#patchCursorInCachedLayout(cached, contentWidth);
+		}
+
+		const layoutLines: LayoutLine[] = [];
+		const lineStarts: number[] = [];
+		const lineCounts: number[] = [];
+
+		if (this.#state.lines.length === 0 || (this.#state.lines.length === 1 && this.#state.lines[0] === "")) {
+			this.#wrappedLineCache.length = this.#state.lines.length;
+			lineStarts[0] = 0;
+			lineCounts[0] = 1;
+			layoutLines.push(this.#layoutLine("", 0, true, 0));
+		} else {
+			for (let i = 0; i < this.#state.lines.length; i++) {
+				lineStarts[i] = layoutLines.length;
+				const logicalLayout = this.#layoutLogicalLine(i, contentWidth);
+				lineCounts[i] = logicalLayout.length;
+				layoutLines.push(...logicalLayout);
 			}
 		}
 
 		this.#wrappedLineCache.length = this.#state.lines.length;
+		this.#layoutCache = {
+			key,
+			cursorLine: this.#state.cursorLine,
+			cursorCol: this.#state.cursorCol,
+			lines: layoutLines,
+			lineStarts,
+			lineCounts,
+		};
 		return layoutLines;
 	}
 
@@ -1625,6 +1770,7 @@ export class Editor implements Component, Focusable {
 		this.#resetKillSequence();
 		this.#preferredVisualCol = null;
 		this.#state.lines[this.#state.cursorLine] = beforeTransient + afterTransient;
+		this.#bumpDocumentVersion();
 		this.#setCursorCol(transientStartCol);
 
 		while (true) {
@@ -1673,18 +1819,7 @@ export class Editor implements Component, Focusable {
 	/** Insert text at the current cursor position */
 	insertText(text: string): void {
 		this.#exitHistoryForEditing();
-		this.#resetKillSequence();
-		this.#recordUndoState();
-
-		const line = this.#state.lines[this.#state.cursorLine] || "";
-		const inserted = insertTextNfcAt(line, this.#state.cursorCol, text);
-
-		this.#state.lines[this.#state.cursorLine] = inserted.line;
-		this.#setCursorCol(inserted.cursorCol);
-
-		if (this.onChange) {
-			this.onChange(this.getText());
-		}
+		this.#insertTextAtCursor(text);
 	}
 
 	// All the editor methods from before...
@@ -1728,9 +1863,8 @@ export class Editor implements Component, Focusable {
 
 		// Check if we should trigger or update autocomplete
 		if (!this.#autocompleteState) {
-			// Auto-trigger for "/" at the start of a submitted command.
-			// Inline skill autocomplete starts after the token becomes "/skill...".
-			if (char === "/" && this.#isAtStartOfSubmittedMessage()) {
+			// Auto-trigger for slash command tokens.
+			if (char === "/" && (this.#isAtStartOfSubmittedMessage() || this.#isInSlashTokenContext())) {
 				this.#tryTriggerAutocomplete();
 			}
 			// Auto-trigger for "@" file reference (fuzzy search)
@@ -1777,6 +1911,11 @@ export class Editor implements Component, Focusable {
 		this.#historyIndex = -1; // Exit history browsing mode
 		this.#resetKillSequence();
 		this.#recordUndoState();
+		const hadAutocomplete = this.#autocompleteState !== null;
+		this.#cancelAutocomplete();
+		if (hadAutocomplete) {
+			this.onAutocompleteUpdate?.();
+		}
 
 		this.#withUndoSuspended(() => {
 			// Some terminals (e.g. tmux popups with extended-keys-format=csi-u) re-encode
@@ -1804,21 +1943,12 @@ export class Editor implements Component, Focusable {
 			const tabExpandedText = cleanText.replace(/\t/g, "    ");
 
 			// Filter out non-printable characters except newlines
-			let filteredText = tabExpandedText
+			const filteredText = tabExpandedText
 				.split("")
 				.filter(char => char === "\n" || char.charCodeAt(0) >= 32)
 				.join("");
 
-			// If pasting a file path (starts with /, ~, or .) and the character before
-			// the cursor is a word character, prepend a space for better readability
-			if (/^[/~.]/.test(filteredText)) {
-				const currentLine = this.#state.lines[this.#state.cursorLine] || "";
-				const charBeforeCursor = this.#state.cursorCol > 0 ? currentLine[this.#state.cursorCol - 1] : "";
-				if (charBeforeCursor && /\w/.test(charBeforeCursor)) {
-					filteredText = ` ${filteredText}`;
-				}
-			}
-
+			if (filteredText.length === 0) return;
 			// Split into lines
 			const pastedLines = filteredText.split("\n");
 
@@ -1840,15 +1970,10 @@ export class Editor implements Component, Focusable {
 				return;
 			}
 
-			if (pastedLines.length === 1) {
-				// Single line - insert character by character to trigger autocomplete
-				for (const char of filteredText) {
-					this.#insertCharacter(char);
-				}
-				return;
-			}
-
-			// Multi-line paste - use insertTextAtCursor for proper handling
+			// Paste is literal input, not typed input. Insert atomically so leading
+			// trigger characters such as "/", "#", "@", ":", or path-like text do
+			// not open or update autocomplete lists while preserving normal typed
+			// trigger behavior.
 			this.#insertTextAtCursor(filteredText);
 		});
 	}
@@ -1893,6 +2018,7 @@ export class Editor implements Component, Focusable {
 		const result = this.#expandPasteMarkers(this.#state.lines.join("\n")).trim();
 
 		this.#state = { lines: [""], cursorLine: 0, cursorCol: 0 };
+		this.#bumpDocumentVersion();
 		this.#pastes.clear();
 		this.#pasteCounter = 0;
 		this.#historyIndex = -1;
@@ -2084,6 +2210,7 @@ export class Editor implements Component, Focusable {
 	#recordUndoState(): void {
 		if (this.#suspendUndo) return;
 		this.#undoStack.push(structuredClone(this.#state));
+		this.#bumpDocumentVersion();
 	}
 
 	#applyUndo(): void {
@@ -2094,6 +2221,7 @@ export class Editor implements Component, Focusable {
 		this.#resetKillSequence();
 		this.#preferredVisualCol = null;
 		Object.assign(this.#state, snapshot);
+		this.#bumpDocumentVersion();
 
 		if (this.onChange) {
 			this.onChange(this.getText());
@@ -2599,6 +2727,12 @@ export class Editor implements Component, Focusable {
 					: this.#state.cursorCol - 1
 				: undefined;
 
+			// Backward from column 0: lastIndexOf clamps a negative position to 0,
+			// which would match the character under the cursor instead of skipping it
+			if (!isForward && searchFrom !== undefined && searchFrom < 0) {
+				continue;
+			}
+
 			const idx = isForward ? line.indexOf(char, searchFrom) : line.lastIndexOf(char, searchFrom);
 
 			if (idx !== -1) {
@@ -2651,12 +2785,11 @@ export class Editor implements Component, Focusable {
 	#getSlashTokenBeforeCursor(): string | null {
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
 		const beforeCursor = currentLine.slice(0, this.#state.cursorCol);
-		const match = beforeCursor.match(/(?:^|\s)(\/[^\s]*)$/);
-		return match?.[1] ?? null;
+		return extractSlashCommandTokenPrefix(beforeCursor);
 	}
 
 	#isInSlashTokenContext(): boolean {
-		return this.#getSlashTokenBeforeCursor()?.startsWith("/skill") === true;
+		return this.#getSlashTokenBeforeCursor() !== null;
 	}
 
 	#isSlashCommandNameAutocompleteSelection(): boolean {
@@ -2740,7 +2873,10 @@ export class Editor implements Component, Focusable {
 		const beforeCursor = currentLine.slice(0, this.#state.cursorCol);
 
 		// Check if we're in a slash command context
-		if (this.#isInSubmittedSlashCommandContext() && !beforeCursor.trimStart().includes(" ")) {
+		if (
+			(this.#isInSubmittedSlashCommandContext() && !beforeCursor.trimStart().includes(" ")) ||
+			this.#isInSlashTokenContext()
+		) {
 			this.#handleSlashCommandCompletion();
 		} else {
 			this.#forceFileAutocomplete(true);
@@ -2789,6 +2925,7 @@ https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19536643416/job/
 				);
 
 				this.#state.lines = result.lines;
+				this.#bumpDocumentVersion();
 				this.#state.cursorLine = result.cursorLine;
 				this.#setCursorCol(result.cursorCol);