@oh-my-pi/pi-tui 8.1.0 → 8.2.0

package/package.json

@@ -1,12 +1,27 @@
 {
 	"name": "@oh-my-pi/pi-tui",
-	"version": "8.1.0",
+	"version": "8.2.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"type": "module",
-	"main": "src/index.ts",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"exports": {
+		".": {
+			"types": "./src/index.ts",
+			"import": "./src/index.ts"
+		},
+		"./components/*": {
+			"types": "./src/components/*.ts",
+			"import": "./src/components/*.ts"
+		},
+		"./*": {
+			"types": "./src/*.ts",
+			"import": "./src/*.ts"
+		}
+	},
 	"scripts": {
-		"test": "bun test test/*.test.ts",
-		"prepublishOnly": "cp tsconfig.publish.json tsconfig.json"
+		"check": "tsgo -p tsconfig.json",
+		"test": "bun test test/*.test.ts"
 	},
 	"files": [
 		"src/**/*",
@@ -31,16 +46,15 @@
 	"engines": {
 		"bun": ">=1.0.0"
 	},
-	"types": "./src/index.ts",
 	"dependencies": {
-		"@types/mime-types": "^2.1.4",
+		"@types/mime-types": "^3.0.1",
 		"chalk": "^5.5.0",
 		"get-east-asian-width": "^1.3.0",
-		"marked": "^15.0.12",
+		"marked": "^17.0.1",
 		"mime-types": "^3.0.1"
 	},
 	"devDependencies": {
-		"@xterm/headless": "^5.5.0",
-		"@xterm/xterm": "^5.5.0"
+		"@xterm/headless": "^6.0.0",
+		"@xterm/xterm": "^6.0.0"
 	}
 }

package/src/autocomplete.ts

@@ -1,36 +1,34 @@
-import { readdirSync, statSync } from "node:fs";
-import { homedir } from "node:os";
-import { basename, dirname, join } from "node:path";
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
 
-// Use fd to walk directory tree (fast, respects .gitignore)
-function walkDirectoryWithFd(
+async function walkDirectoryWithFd(
 	baseDir: string,
 	fdPath: string,
 	query: string,
 	maxResults: number,
-): Array<{ path: string; isDirectory: boolean }> {
+): Promise<Array<{ path: string; isDirectory: boolean }>> {
 	const args = ["--base-directory", baseDir, "--max-results", String(maxResults), "--type", "f", "--type", "d"];
 
-	// Add query as pattern if provided
 	if (query) {
 		args.push(query);
 	}
 
-	const result = Bun.spawnSync([fdPath, ...args], {
+	const proc = Bun.spawn([fdPath, ...args], {
 		stdout: "pipe",
 		stderr: "pipe",
 	});
 
-	if (!result.success || !result.stdout) {
+	const exitCode = await proc.exited;
+	if (exitCode !== 0 || !proc.stdout) {
 		return [];
 	}
 
-	const stdout = new TextDecoder().decode(result.stdout);
+	const stdout = await new Response(proc.stdout).text();
 	const lines = stdout.trim().split("\n").filter(Boolean);
 	const results: Array<{ path: string; isDirectory: boolean }> = [];
 
 	for (const line of lines) {
-		// fd outputs directories with trailing /
 		const isDirectory = line.endsWith("/");
 		results.push({
 			path: line,
@@ -62,10 +60,10 @@ export interface AutocompleteProvider {
 		lines: string[],
 		cursorLine: number,
 		cursorCol: number,
-	): {
+	): Promise<{
 		items: AutocompleteItem[];
 		prefix: string; // What we're matching against (e.g., "/" or "src/")
-	} | null;
+	} | null>;
 
 	// Apply the selected item
 	// Returns the new text and cursor position
@@ -87,6 +85,8 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 	private commands: (SlashCommand | AutocompleteItem)[];
 	private basePath: string;
 	private fdPath: string | null;
+	private dirCache: Map<string, { entries: fs.Dirent[]; timestamp: number }> = new Map();
+	private readonly DIR_CACHE_TTL = 2000; // 2 seconds
 
 	constructor(
 		commands: (SlashCommand | AutocompleteItem)[] = [],
@@ -98,11 +98,11 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		this.fdPath = fdPath ?? Bun.which("fd") ?? Bun.which("fdfind");
 	}
 
-	getSuggestions(
+	async getSuggestions(
 		lines: string[],
 		cursorLine: number,
 		cursorCol: number,
-	): { items: AutocompleteItem[]; prefix: string } | null {
+	): Promise<{ items: AutocompleteItem[]; prefix: string } | null> {
 		const currentLine = lines[cursorLine] || "";
 		const textBeforeCursor = currentLine.slice(0, cursorCol);
 
@@ -111,9 +111,10 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		if (atMatch) {
 			const prefix = atMatch[1] ?? "@"; // The @... part
 			const query = prefix.slice(1); // Remove the @
-			const suggestions = query.length > 0 ? this.getFuzzyFileSuggestions(query) : this.getFileSuggestions("@");
+			const suggestions =
+				query.length > 0 ? await this.getFuzzyFileSuggestions(query) : await this.getFileSuggestions("@");
 			if (suggestions.length === 0 && query.length > 0) {
-				const fallback = this.getFileSuggestions(prefix);
+				const fallback = await this.getFileSuggestions(prefix);
 				if (fallback.length === 0) return null;
 				return { items: fallback, prefix };
 			}
@@ -133,11 +134,11 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 				// No space yet - complete command names
 				const prefix = textBeforeCursor.slice(1); // Remove the "/"
 				const filtered = this.commands
-					.filter((cmd) => {
+					.filter(cmd => {
 						const name = "name" in cmd ? cmd.name : cmd.value; // Check if SlashCommand or AutocompleteItem
 						return name?.toLowerCase().startsWith(prefix.toLowerCase());
 					})
-					.map((cmd) => ({
+					.map(cmd => ({
 						value: "name" in cmd ? cmd.name : cmd.value,
 						label: "name" in cmd ? cmd.name : cmd.label,
 						...(cmd.description && { description: cmd.description }),
@@ -154,7 +155,7 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 				const commandName = textBeforeCursor.slice(1, spaceIndex); // Command without "/"
 				const argumentText = textBeforeCursor.slice(spaceIndex + 1); // Text after space
 
-				const command = this.commands.find((cmd) => {
+				const command = this.commands.find(cmd => {
 					const name = "name" in cmd ? cmd.name : cmd.value;
 					return name === commandName;
 				});
@@ -178,7 +179,7 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		const pathMatch = this.extractPathPrefix(textBeforeCursor, false);
 
 		if (pathMatch !== null) {
-			const suggestions = this.getFileSuggestions(pathMatch);
+			const suggestions = await this.getFileSuggestions(pathMatch);
 			if (suggestions.length === 0) return null;
 
 			// Check if we have an exact match that is a directory
@@ -311,19 +312,51 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 	}
 
 	// Expand home directory (~/) to actual home path
-	private expandHomePath(path: string): string {
-		if (path.startsWith("~/")) {
-			const expandedPath = join(homedir(), path.slice(2));
+	private expandHomePath(filePath: string): string {
+		if (filePath.startsWith("~/")) {
+			const expandedPath = path.join(os.homedir(), filePath.slice(2));
 			// Preserve trailing slash if original path had one
-			return path.endsWith("/") && !expandedPath.endsWith("/") ? `${expandedPath}/` : expandedPath;
-		} else if (path === "~") {
-			return homedir();
+			return filePath.endsWith("/") && !expandedPath.endsWith("/") ? `${expandedPath}/` : expandedPath;
+		} else if (filePath === "~") {
+			return os.homedir();
+		}
+		return filePath;
+	}
+
+	private async getCachedDirEntries(searchDir: string): Promise<fs.Dirent[]> {
+		const now = Date.now();
+		const cached = this.dirCache.get(searchDir);
+
+		if (cached && now - cached.timestamp < this.DIR_CACHE_TTL) {
+			return cached.entries;
+		}
+
+		const entries = await fs.promises.readdir(searchDir, { withFileTypes: true });
+		this.dirCache.set(searchDir, { entries, timestamp: now });
+
+		if (this.dirCache.size > 100) {
+			const sortedKeys = [...this.dirCache.entries()]
+				.sort((a, b) => a[1].timestamp - b[1].timestamp)
+				.slice(0, 50)
+				.map(([key]) => key);
+			for (const key of sortedKeys) {
+				this.dirCache.delete(key);
+			}
+		}
+
+		return entries;
+	}
+
+	public invalidateDirCache(dir?: string): void {
+		if (dir) {
+			this.dirCache.delete(dir);
+		} else {
+			this.dirCache.clear();
 		}
-		return path;
 	}
 
 	// Get file/directory suggestions for a given path prefix
-	private getFileSuggestions(prefix: string): AutocompleteItem[] {
+	private async getFileSuggestions(prefix: string): Promise<AutocompleteItem[]> {
 		try {
 			let searchDir: string;
 			let searchPrefix: string;
@@ -354,7 +387,7 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 				if (prefix.startsWith("~") || expandedPrefix === "/") {
 					searchDir = expandedPrefix;
 				} else {
-					searchDir = join(this.basePath, expandedPrefix);
+					searchDir = path.join(this.basePath, expandedPrefix);
 				}
 				searchPrefix = "";
 			} else if (expandedPrefix.endsWith("/")) {
@@ -362,22 +395,22 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 				if (prefix.startsWith("~") || expandedPrefix.startsWith("/")) {
 					searchDir = expandedPrefix;
 				} else {
-					searchDir = join(this.basePath, expandedPrefix);
+					searchDir = path.join(this.basePath, expandedPrefix);
 				}
 				searchPrefix = "";
 			} else {
 				// Split into directory and file prefix
-				const dir = dirname(expandedPrefix);
-				const file = basename(expandedPrefix);
+				const dir = path.dirname(expandedPrefix);
+				const file = path.basename(expandedPrefix);
 				if (prefix.startsWith("~") || expandedPrefix.startsWith("/")) {
 					searchDir = dir;
 				} else {
-					searchDir = join(this.basePath, dir);
+					searchDir = path.join(this.basePath, dir);
 				}
 				searchPrefix = file;
 			}
 
-			const entries = readdirSync(searchDir, { withFileTypes: true });
+			const entries = await this.getCachedDirEntries(searchDir);
 			const suggestions: AutocompleteItem[] = [];
 
 			for (const entry of entries) {
@@ -389,8 +422,8 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 				let isDirectory = entry.isDirectory();
 				if (!isDirectory && entry.isSymbolicLink()) {
 					try {
-						const fullPath = join(searchDir, entry.name);
-						isDirectory = statSync(fullPath).isDirectory();
+						const fullPath = path.join(searchDir, entry.name);
+						isDirectory = (await fs.promises.stat(fullPath)).isDirectory();
 					} catch {
 						// Broken symlink, file deleted between readdir and stat, or permission error
 						continue;
@@ -408,10 +441,10 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 					} else if (pathWithoutAt.includes("/")) {
 						if (pathWithoutAt.startsWith("~/")) {
 							const homeRelativeDir = pathWithoutAt.slice(2); // Remove ~/
-							const dir = dirname(homeRelativeDir);
-							relativePath = `@~/${dir === "." ? name : join(dir, name)}`;
+							const dir = path.dirname(homeRelativeDir);
+							relativePath = `@~/${dir === "." ? name : path.join(dir, name)}`;
 						} else {
-							relativePath = `@${join(dirname(pathWithoutAt), name)}`;
+							relativePath = `@${path.join(path.dirname(pathWithoutAt), name)}`;
 						}
 					} else {
 						if (pathWithoutAt.startsWith("~")) {
@@ -427,18 +460,18 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 					// Preserve ~/ format for home directory paths
 					if (prefix.startsWith("~/")) {
 						const homeRelativeDir = prefix.slice(2); // Remove ~/
-						const dir = dirname(homeRelativeDir);
-						relativePath = `~/${dir === "." ? name : join(dir, name)}`;
+						const dir = path.dirname(homeRelativeDir);
+						relativePath = `~/${dir === "." ? name : path.join(dir, name)}`;
 					} else if (prefix.startsWith("/")) {
 						// Absolute path - construct properly
-						const dir = dirname(prefix);
+						const dir = path.dirname(prefix);
 						if (dir === "/") {
 							relativePath = `/${name}`;
 						} else {
 							relativePath = `${dir}/${name}`;
 						}
 					} else {
-						relativePath = join(dirname(prefix), name);
+						relativePath = path.join(path.dirname(prefix), name);
 					}
 				} else {
 					// For standalone entries, preserve ~/ if original prefix was ~/
@@ -474,7 +507,7 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 	// Score an entry against the query (higher = better match)
 	// isDirectory adds bonus to prioritize folders
 	private scoreEntry(filePath: string, query: string, isDirectory: boolean): number {
-		const fileName = basename(filePath);
+		const fileName = path.basename(filePath);
 		const lowerFileName = fileName.toLowerCase();
 		const lowerQuery = query.toLowerCase();
 
@@ -495,34 +528,28 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		return score;
 	}
 
-	// Fuzzy file search using fd (fast, respects .gitignore)
-	private getFuzzyFileSuggestions(query: string): AutocompleteItem[] {
+	private async getFuzzyFileSuggestions(query: string): Promise<AutocompleteItem[]> {
 		if (!this.fdPath) {
-			// fd not available, return empty results
 			return [];
 		}
 
 		try {
-			const entries = walkDirectoryWithFd(this.basePath, this.fdPath, query, 100);
+			const entries = await walkDirectoryWithFd(this.basePath, this.fdPath, query, 100);
 
-			// Score entries
 			const scoredEntries = entries
-				.map((entry) => ({
+				.map(entry => ({
 					...entry,
 					score: query ? this.scoreEntry(entry.path, query, entry.isDirectory) : 1,
 				}))
-				.filter((entry) => entry.score > 0);
+				.filter(entry => entry.score > 0);
 
-			// Sort by score (descending) and take top 20
 			scoredEntries.sort((a, b) => b.score - a.score);
 			const topEntries = scoredEntries.slice(0, 20);
 
-			// Build suggestions
 			const suggestions: AutocompleteItem[] = [];
 			for (const { path: entryPath, isDirectory } of topEntries) {
-				// fd already includes trailing / for directories
 				const pathWithoutSlash = isDirectory ? entryPath.slice(0, -1) : entryPath;
-				const entryName = basename(pathWithoutSlash);
+				const entryName = path.basename(pathWithoutSlash);
 
 				suggestions.push({
 					value: `@${entryPath}`,
@@ -533,17 +560,16 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 
 			return suggestions;
 		} catch {
-			// Directory doesn't exist or not accessible
 			return [];
 		}
 	}
 
 	// Force file completion (called on Tab key) - always returns suggestions
-	getForceFileSuggestions(
+	async getForceFileSuggestions(
 		lines: string[],
 		cursorLine: number,
 		cursorCol: number,
-	): { items: AutocompleteItem[]; prefix: string } | null {
+	): Promise<{ items: AutocompleteItem[]; prefix: string } | null> {
 		const currentLine = lines[cursorLine] || "";
 		const textBeforeCursor = currentLine.slice(0, cursorCol);
 
@@ -555,7 +581,7 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		// Force extract path prefix - this will always return something
 		const pathMatch = this.extractPathPrefix(textBeforeCursor, true);
 		if (pathMatch !== null) {
-			const suggestions = this.getFileSuggestions(pathMatch);
+			const suggestions = await this.getFileSuggestions(pathMatch);
 			if (suggestions.length === 0) return null;
 
 			return {

package/src/components/box.ts

@@ -1,5 +1,5 @@
-import type { Component } from "@oh-my-pi/pi-tui/tui";
-import { applyBackgroundToLine, visibleWidth } from "@oh-my-pi/pi-tui/utils";
+import type { Component } from "../tui";
+import { applyBackgroundToLine, visibleWidth } from "../utils";
 
 /**
  * Box component - a container that applies padding and background to all children

package/src/components/cancellable-loader.ts

@@ -1,4 +1,4 @@
-import { matchesKey } from "@oh-my-pi/pi-tui/keys";
+import { matchesKey } from "../keys";
 import { Loader } from "./loader";
 
 /**

package/src/components/editor.ts

@@ -1,14 +1,8 @@
-import type { AutocompleteProvider, CombinedAutocompleteProvider } from "@oh-my-pi/pi-tui/autocomplete";
-import { matchesKey } from "@oh-my-pi/pi-tui/keys";
-import type { SymbolTheme } from "@oh-my-pi/pi-tui/symbols";
-import { type Component, CURSOR_MARKER, type Focusable } from "@oh-my-pi/pi-tui/tui";
-import {
-	getSegmenter,
-	isPunctuationChar,
-	isWhitespaceChar,
-	truncateToWidth,
-	visibleWidth,
-} from "@oh-my-pi/pi-tui/utils";
+import type { AutocompleteProvider, CombinedAutocompleteProvider } from "../autocomplete";
+import { matchesKey } from "../keys";
+import type { SymbolTheme } from "../symbols";
+import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
+import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils";
 import { SelectList, type SelectListTheme } from "./select-list";
 
 const segmenter = getSegmenter();
@@ -296,6 +290,7 @@ export class Editor implements Component, Focusable {
 	private autocompleteList?: SelectList;
 	private isAutocompleting: boolean = false;
 	private autocompletePrefix: string = "";
+	private autocompleteRequestId: number = 0;
 	public onAutocompleteUpdate?: () => void;
 
 	// Paste tracking for large pastes
@@ -316,6 +311,9 @@ export class Editor implements Component, Focusable {
 	private undoStack: EditorState[] = [];
 	private suspendUndo = false;
 
+	// Debounce timer for autocomplete updates
+	private autocompleteTimeout: ReturnType<typeof setTimeout> | null = null;
+
 	public onSubmit?: (text: string) => void;
 	public onAltEnter?: (text: string) => void;
 	public onChange?: (text: string) => void;
@@ -357,7 +355,7 @@ export class Editor implements Component, Focusable {
 	setHistoryStorage(storage: HistoryStorage): void {
 		this.historyStorage = storage;
 		const recent = storage.getRecent(100);
-		this.history = recent.map((entry) => entry.prompt);
+		this.history = recent.map(entry => entry.prompt);
 		this.historyIndex = -1;
 	}
 
@@ -549,7 +547,7 @@ export class Editor implements Component, Focusable {
 							// Rebuild 'before' without the last grapheme
 							const beforeWithoutLast = beforeGraphemes
 								.slice(0, -1)
-								.map((g) => g.segment)
+								.map(g => g.segment)
 								.join("");
 							displayText = beforeWithoutLast + marker + cursor;
 							displayWidth -= 1; // Back to original width (reverse video replaces, doesn't add)
@@ -1125,8 +1123,8 @@ export class Editor implements Component, Focusable {
 					this.tryTriggerAutocomplete();
 				}
 			}
-			// Also auto-trigger when typing letters in a slash command context
-			else if (/[a-zA-Z0-9.\-_]/.test(char)) {
+			// Also auto-trigger when typing letters/path chars in a slash command context
+			else if (/[a-zA-Z0-9.\-_/]/.test(char)) {
 				const currentLine = this.state.lines[this.state.cursorLine] || "";
 				const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
 				// Check if we're in a slash command (with or without space for arguments)
@@ -1139,7 +1137,7 @@ export class Editor implements Component, Focusable {
 				}
 			}
 		} else {
-			this.updateAutocomplete();
+			this.debouncedUpdateAutocomplete();
 		}
 	}
 
@@ -1158,7 +1156,7 @@ export class Editor implements Component, Focusable {
 			// Filter out non-printable characters except newlines
 			let filteredText = tabExpandedText
 				.split("")
-				.filter((char) => char === "\n" || char.charCodeAt(0) >= 32)
+				.filter(char => char === "\n" || char.charCodeAt(0) >= 32)
 				.join("");
 
 			// If pasting a file path (starts with /, ~, or .) and the character before
@@ -1302,7 +1300,7 @@ export class Editor implements Component, Focusable {
 
 		// Update or re-trigger autocomplete after backspace
 		if (this.isAutocompleting) {
-			this.updateAutocomplete();
+			this.debouncedUpdateAutocomplete();
 		} else {
 			// If autocomplete was cancelled (no matches), re-trigger if we're in a completable context
 			const currentLine = this.state.lines[this.state.cursorLine] || "";
@@ -1388,7 +1386,7 @@ export class Editor implements Component, Focusable {
 		}
 
 		if (this.isAutocompleting) {
-			this.updateAutocomplete();
+			this.debouncedUpdateAutocomplete();
 		} else {
 			const currentLine = this.state.lines[this.state.cursorLine] || "";
 			const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
@@ -1613,7 +1611,7 @@ export class Editor implements Component, Focusable {
 
 		// Update or re-trigger autocomplete after forward delete
 		if (this.isAutocompleting) {
-			this.updateAutocomplete();
+			this.debouncedUpdateAutocomplete();
 		} else {
 			const currentLine = this.state.lines[this.state.cursorLine] || "";
 			const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
@@ -1841,9 +1839,8 @@ export class Editor implements Component, Focusable {
 	}
 
 	// Autocomplete methods
-	private tryTriggerAutocomplete(explicitTab: boolean = false): void {
+	private async tryTriggerAutocomplete(explicitTab: boolean = false): Promise<void> {
 		if (!this.autocompleteProvider) return;
-
 		// Check if we should trigger file completion on Tab
 		if (explicitTab) {
 			const provider = this.autocompleteProvider as CombinedAutocompleteProvider;
@@ -1855,18 +1852,23 @@ export class Editor implements Component, Focusable {
 			}
 		}
 
-		const suggestions = this.autocompleteProvider.getSuggestions(
+		const requestId = ++this.autocompleteRequestId;
+
+		const suggestions = await this.autocompleteProvider.getSuggestions(
 			this.state.lines,
 			this.state.cursorLine,
 			this.state.cursorCol,
 		);
+		if (requestId !== this.autocompleteRequestId) return;
 
 		if (suggestions && suggestions.items.length > 0) {
 			this.autocompletePrefix = suggestions.prefix;
 			this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
 			this.isAutocompleting = true;
+			this.onAutocompleteUpdate?.();
 		} else {
 			this.cancelAutocomplete();
+			this.onAutocompleteUpdate?.();
 		}
 	}
 
@@ -1893,7 +1895,7 @@ https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19536643416/job/
 17 this job fails with https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19
 536643416/job/55932288317 havea  look at .gi
     */
-	private forceFileAutocomplete(): void {
+	private async forceFileAutocomplete(): Promise<void> {
 		if (!this.autocompleteProvider) return;
 
 		// Check if provider supports force file suggestions via runtime check
@@ -1901,27 +1903,33 @@ https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19536643416/job/
 			getForceFileSuggestions?: CombinedAutocompleteProvider["getForceFileSuggestions"];
 		};
 		if (typeof provider.getForceFileSuggestions !== "function") {
-			this.tryTriggerAutocomplete(true);
+			await this.tryTriggerAutocomplete(true);
 			return;
 		}
 
-		const suggestions = provider.getForceFileSuggestions(
+		const requestId = ++this.autocompleteRequestId;
+		const suggestions = await provider.getForceFileSuggestions(
 			this.state.lines,
 			this.state.cursorLine,
 			this.state.cursorCol,
 		);
+		if (requestId !== this.autocompleteRequestId) return;
 
 		if (suggestions && suggestions.items.length > 0) {
 			this.autocompletePrefix = suggestions.prefix;
 			this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
 			this.isAutocompleting = true;
+			this.onAutocompleteUpdate?.();
 		} else {
 			this.cancelAutocomplete();
+			this.onAutocompleteUpdate?.();
 		}
 	}
 
 	private cancelAutocomplete(notifyCancel: boolean = false): void {
 		const wasAutocompleting = this.isAutocompleting;
+		this.clearAutocompleteTimeout();
+		this.autocompleteRequestId += 1;
 		this.isAutocompleting = false;
 		this.autocompleteList = undefined;
 		this.autocompletePrefix = "";
@@ -1934,21 +1942,42 @@ https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19536643416/job/
 		return this.isAutocompleting;
 	}
 
-	private updateAutocomplete(): void {
+	private async updateAutocomplete(): Promise<void> {
 		if (!this.isAutocompleting || !this.autocompleteProvider) return;
+		const requestId = ++this.autocompleteRequestId;
 
-		const suggestions = this.autocompleteProvider.getSuggestions(
+		const suggestions = await this.autocompleteProvider.getSuggestions(
 			this.state.lines,
 			this.state.cursorLine,
 			this.state.cursorCol,
 		);
+		if (requestId !== this.autocompleteRequestId) return;
 
 		if (suggestions && suggestions.items.length > 0) {
 			this.autocompletePrefix = suggestions.prefix;
 			// Always create new SelectList to ensure update
 			this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
+			this.onAutocompleteUpdate?.();
 		} else {
 			this.cancelAutocomplete();
+			this.onAutocompleteUpdate?.();
+		}
+	}
+
+	private debouncedUpdateAutocomplete(): void {
+		if (this.autocompleteTimeout) {
+			clearTimeout(this.autocompleteTimeout);
+		}
+		this.autocompleteTimeout = setTimeout(() => {
+			this.updateAutocomplete();
+			this.autocompleteTimeout = null;
+		}, 100);
+	}
+
+	private clearAutocompleteTimeout(): void {
+		if (this.autocompleteTimeout) {
+			clearTimeout(this.autocompleteTimeout);
+			this.autocompleteTimeout = null;
 		}
 	}
 }

package/src/components/image.ts

@@ -4,8 +4,8 @@ import {
 	type ImageDimensions,
 	imageFallback,
 	renderImage,
-} from "@oh-my-pi/pi-tui/terminal-image";
-import type { Component } from "@oh-my-pi/pi-tui/tui";
+} from "../terminal-image";
+import type { Component } from "../tui";
 
 export interface ImageTheme {
 	fallbackColor: (str: string) => string;

package/src/components/input.ts

@@ -1,6 +1,6 @@
-import { getEditorKeybindings } from "@oh-my-pi/pi-tui/keybindings";
-import { type Component, CURSOR_MARKER, type Focusable } from "@oh-my-pi/pi-tui/tui";
-import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "@oh-my-pi/pi-tui/utils";
+import { getEditorKeybindings } from "../keybindings";
+import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
+import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "../utils";
 
 const segmenter = getSegmenter();
 
@@ -186,7 +186,7 @@ export class Input implements Component, Focusable {
 
 		// Regular character input - accept printable characters including Unicode,
 		// but reject control characters (C0: 0x00-0x1F, DEL: 0x7F, C1: 0x80-0x9F)
-		const hasControlChars = [...data].some((ch) => {
+		const hasControlChars = [...data].some(ch => {
 			const code = ch.charCodeAt(0);
 			return code < 32 || code === 0x7f || (code >= 0x80 && code <= 0x9f);
 		});

package/src/components/loader.ts

@@ -1,4 +1,4 @@
-import type { TUI } from "@oh-my-pi/pi-tui/tui";
+import type { TUI } from "../tui";
 import { Text } from "./text";
 
 /**

package/src/components/markdown.ts

@@ -1,9 +1,9 @@
-import type { MermaidImage } from "@oh-my-pi/pi-tui/mermaid";
-import type { SymbolTheme } from "@oh-my-pi/pi-tui/symbols";
-import { encodeITerm2, encodeKitty, getCapabilities, getCellDimensions } from "@oh-my-pi/pi-tui/terminal-image";
-import type { Component } from "@oh-my-pi/pi-tui/tui";
-import { applyBackgroundToLine, visibleWidth, wrapTextWithAnsi } from "@oh-my-pi/pi-tui/utils";
 import { marked, type Token } from "marked";
+import type { MermaidImage } from "../mermaid";
+import type { SymbolTheme } from "../symbols";
+import { encodeITerm2, encodeKitty, getCapabilities, getCellDimensions } from "../terminal-image";
+import type { Component } from "../tui";
+import { applyBackgroundToLine, visibleWidth, wrapTextWithAnsi } from "../utils";
 
 /**
  * Default text styling for markdown content.
@@ -628,7 +628,7 @@ export class Markdown implements Component {
 			} else {
 				// Distribute space proportionally based on natural widths
 				const totalNatural = naturalWidths.reduce((a, b) => a + b, 0);
-				columnWidths = naturalWidths.map((w) => {
+				columnWidths = naturalWidths.map(w => {
 					const proportion = w / totalNatural;
 					return Math.max(1, Math.floor(proportion * availableForCells));
 				});
@@ -648,7 +648,7 @@ export class Markdown implements Component {
 		const v = t.vertical;
 
 		// Render top border
-		const topBorderCells = columnWidths.map((w) => h.repeat(w));
+		const topBorderCells = columnWidths.map(w => h.repeat(w));
 		lines.push(`${t.topLeft}${h}${topBorderCells.join(`${h}${t.teeDown}${h}`)}${h}${t.topRight}`);
 
 		// Render header with wrapping
@@ -656,7 +656,7 @@ export class Markdown implements Component {
 			const text = this.renderInlineTokens(cell.tokens || []);
 			return this.wrapCellText(text, columnWidths[i]);
 		});
-		const headerLineCount = Math.max(...headerCellLines.map((c) => c.length));
+		const headerLineCount = Math.max(...headerCellLines.map(c => c.length));
 
 		for (let lineIdx = 0; lineIdx < headerLineCount; lineIdx++) {
 			const rowParts = headerCellLines.map((cellLines, colIdx) => {
@@ -668,7 +668,7 @@ export class Markdown implements Component {
 		}
 
 		// Render separator
-		const separatorCells = columnWidths.map((w) => h.repeat(w));
+		const separatorCells = columnWidths.map(w => h.repeat(w));
 		lines.push(`${t.teeRight}${h}${separatorCells.join(`${h}${t.cross}${h}`)}${h}${t.teeLeft}`);
 
 		// Render rows with wrapping
@@ -677,7 +677,7 @@ export class Markdown implements Component {
 				const text = this.renderInlineTokens(cell.tokens || []);
 				return this.wrapCellText(text, columnWidths[i]);
 			});
-			const rowLineCount = Math.max(...rowCellLines.map((c) => c.length));
+			const rowLineCount = Math.max(...rowCellLines.map(c => c.length));
 
 			for (let lineIdx = 0; lineIdx < rowLineCount; lineIdx++) {
 				const rowParts = rowCellLines.map((cellLines, colIdx) => {
@@ -689,7 +689,7 @@ export class Markdown implements Component {
 		}
 
 		// Render bottom border
-		const bottomBorderCells = columnWidths.map((w) => h.repeat(w));
+		const bottomBorderCells = columnWidths.map(w => h.repeat(w));
 		lines.push(`${t.bottomLeft}${h}${bottomBorderCells.join(`${h}${t.teeUp}${h}`)}${h}${t.bottomRight}`);
 
 		lines.push(""); // Add spacing after table

package/src/components/select-list.ts

@@ -1,7 +1,7 @@
-import { matchesKey } from "@oh-my-pi/pi-tui/keys";
-import type { SymbolTheme } from "@oh-my-pi/pi-tui/symbols";
-import type { Component } from "@oh-my-pi/pi-tui/tui";
-import { truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui/utils";
+import { matchesKey } from "../keys";
+import type { SymbolTheme } from "../symbols";
+import type { Component } from "../tui";
+import { truncateToWidth, visibleWidth } from "../utils";
 
 export interface SelectItem {
 	value: string;
@@ -37,7 +37,7 @@ export class SelectList implements Component {
 	}
 
 	setFilter(filter: string): void {
-		this.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));
+		this.filteredItems = this.items.filter(item => item.value.toLowerCase().startsWith(filter.toLowerCase()));
 		// Reset selection when filter changes
 		this.selectedIndex = 0;
 	}

package/src/components/settings-list.ts

@@ -1,6 +1,6 @@
-import { matchesKey } from "@oh-my-pi/pi-tui/keys";
-import type { Component } from "@oh-my-pi/pi-tui/tui";
-import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@oh-my-pi/pi-tui/utils";
+import { matchesKey } from "../keys";
+import type { Component } from "../tui";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
 
 export interface SettingItem {
 	/** Unique identifier for this setting */
@@ -53,7 +53,7 @@ export class SettingsList implements Component {
 
 	/** Update an item's currentValue */
 	updateValue(id: string, newValue: string): void {
-		const item = this.items.find((i) => i.id === id);
+		const item = this.items.find(i => i.id === id);
 		if (item) {
 			item.currentValue = newValue;
 		}
@@ -88,7 +88,7 @@ export class SettingsList implements Component {
 		const endIndex = Math.min(startIndex + this.maxVisible, this.items.length);
 
 		// Calculate max label width for alignment
-		const maxLabelWidth = Math.min(30, Math.max(...this.items.map((item) => visibleWidth(item.label))));
+		const maxLabelWidth = Math.min(30, Math.max(...this.items.map(item => visibleWidth(item.label))));
 
 		// Render visible items
 		for (let i = startIndex; i < endIndex; i++) {

package/src/components/spacer.ts

@@ -1,4 +1,4 @@
-import type { Component } from "@oh-my-pi/pi-tui/tui";
+import type { Component } from "../tui";
 
 /**
  * Spacer component that renders empty lines

package/src/components/tab-bar.ts

@@ -8,10 +8,9 @@
  * - Tab / Arrow Right: Next tab (wraps around)
  * - Shift+Tab / Arrow Left: Previous tab (wraps around)
  */
-
-import { matchesKey } from "@oh-my-pi/pi-tui/keys";
-import type { Component } from "@oh-my-pi/pi-tui/tui";
-import { wrapTextWithAnsi } from "@oh-my-pi/pi-tui/utils";
+import { matchesKey } from "../keys";
+import type { Component } from "../tui";
+import { wrapTextWithAnsi } from "../utils";
 
 /** Tab definition */
 export interface Tab {

package/src/components/text.ts

@@ -1,5 +1,5 @@
-import type { Component } from "@oh-my-pi/pi-tui/tui";
-import { applyBackgroundToLine, wrapTextWithAnsi } from "@oh-my-pi/pi-tui/utils";
+import type { Component } from "../tui";
+import { applyBackgroundToLine, wrapTextWithAnsi } from "../utils";
 
 /**
  * Text component - displays multi-line text with word wrapping

package/src/components/truncated-text.ts

@@ -1,5 +1,5 @@
-import type { Component } from "@oh-my-pi/pi-tui/tui";
-import { truncateToWidth } from "@oh-my-pi/pi-tui/utils";
+import type { Component } from "../tui";
+import { truncateToWidth } from "../utils";
 
 /**
  * Text component that truncates to fit viewport width

package/src/fuzzy.ts

@@ -110,7 +110,7 @@ export function fuzzyFilter<T>(items: T[], query: string, getText: (item: T) =>
 	const tokens = query
 		.trim()
 		.split(/\s+/)
-		.filter((t) => t.length > 0);
+		.filter(t => t.length > 0);
 
 	if (tokens.length === 0) {
 		return items;
@@ -139,5 +139,5 @@ export function fuzzyFilter<T>(items: T[], query: string, getText: (item: T) =>
 	}
 
 	results.sort((a, b) => a.totalScore - b.totalScore);
-	return results.map((r) => r.item);
+	return results.map(r => r.item);
 }

package/src/keybindings.ts

@@ -123,7 +123,7 @@ export class EditorKeybindingsManager {
 			const keyArray = Array.isArray(keys) ? keys : [keys];
 			this.actionToKeys.set(
 				action as EditorAction,
-				keyArray.map((key) => normalizeKeyId(key as KeyId)),
+				keyArray.map(key => normalizeKeyId(key as KeyId)),
 			);
 		}
 
@@ -133,7 +133,7 @@ export class EditorKeybindingsManager {
 			const keyArray = Array.isArray(keys) ? keys : [keys];
 			this.actionToKeys.set(
 				action as EditorAction,
-				keyArray.map((key) => normalizeKeyId(key as KeyId)),
+				keyArray.map(key => normalizeKeyId(key as KeyId)),
 			);
 		}
 	}

package/src/mermaid.ts

@@ -1,6 +1,6 @@
-import { mkdir, rm } from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
+import * as fs from "node:fs/promises";
+import * as os from "node:os";
+import * as path from "node:path";
 import { $ } from "bun";
 
 export interface MermaidImage {
@@ -31,12 +31,11 @@ export async function renderMermaidToPng(
 		return null;
 	}
 
-	const tmpDir = join(tmpdir(), `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`);
-	const inputPath = join(tmpDir, "input.mmd");
-	const outputPath = join(tmpDir, "output.png");
+	const tmpDir = path.join(os.tmpdir(), `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+	const inputPath = path.join(tmpDir, "input.mmd");
+	const outputPath = path.join(tmpDir, "output.png");
 
 	try {
-		await mkdir(tmpDir, { recursive: true });
 		await Bun.write(inputPath, source);
 
 		const args: string[] = ["-i", inputPath, "-o", outputPath, "-q"];
@@ -64,7 +63,7 @@ export async function renderMermaidToPng(
 			return null;
 		}
 
-		const buffer = Buffer.from(await outputFile.arrayBuffer());
+		const buffer = Buffer.from(await outputFile.bytes());
 		const base64 = buffer.toString("base64");
 
 		const dims = parsePngDimensions(buffer);
@@ -80,7 +79,7 @@ export async function renderMermaidToPng(
 	} catch {
 		return null;
 	} finally {
-		await rm(tmpDir, { recursive: true, force: true }).catch(() => {});
+		await fs.rm(tmpDir, { recursive: true, force: true }).catch(() => {});
 	}
 }
 

package/src/stdin-buffer.ts

@@ -16,7 +16,6 @@
  * Based on code from OpenTUI (https://github.com/anomalyco/opentui)
  * MIT License - Copyright (c) 2025 opentui
  */
-
 import { EventEmitter } from "events";
 
 const ESC = "\x1b";
@@ -111,7 +110,7 @@ function isCompleteCsiSequence(data: string): "complete" | "incomplete" {
 			if (lastChar === "M" || lastChar === "m") {
 				// Check if we have the right structure
 				const parts = payload.slice(1, -1).split(";");
-				if (parts.length === 3 && parts.every((p) => /^\d+$/.test(p))) {
+				if (parts.length === 3 && parts.every(p => /^\d+$/.test(p))) {
 					return "complete";
 				}
 			}

package/src/tui.ts

@@ -1,7 +1,6 @@
 /**
  * Minimal TUI implementation with differential rendering
  */
-
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
@@ -337,7 +336,7 @@ export class TUI extends Container {
 
 	/** Check if there are any visible overlays */
 	hasOverlay(): boolean {
-		return this.overlayStack.some((o) => this.isOverlayVisible(o));
+		return this.overlayStack.some(o => this.isOverlayVisible(o));
 	}
 
 	/** Check if an overlay entry is currently visible */
@@ -366,7 +365,7 @@ export class TUI extends Container {
 
 	start(): void {
 		this.terminal.start(
-			(data) => this.handleInput(data),
+			data => this.handleInput(data),
 			() => this.requestRender(),
 		);
 		this.terminal.hideCursor();
@@ -423,7 +422,7 @@ export class TUI extends Container {
 
 	async waitForRender(): Promise<void> {
 		if (!this.renderRequested && !this.rendering) return;
-		await new Promise<void>((resolve) => {
+		await new Promise<void>(resolve => {
 			const check = () => {
 				if (!this.renderRequested && !this.rendering) {
 					resolve();
@@ -467,7 +466,7 @@ export class TUI extends Container {
 
 		// If focused component is an overlay, verify it's still visible
 		// (visibility can change due to terminal resize or visible() callback)
-		const focusedOverlay = this.overlayStack.find((o) => o.component === this.focusedComponent);
+		const focusedOverlay = this.overlayStack.find(o => o.component === this.focusedComponent);
 		if (focusedOverlay && !this.isOverlayVisible(focusedOverlay)) {
 			// Focused overlay is no longer visible, redirect to topmost visible overlay
 			const topVisible = this.getTopmostVisibleOverlay();
@@ -752,7 +751,7 @@ export class TUI extends Container {
 
 	private applyLineResets(lines: string[]): string[] {
 		const reset = TUI.SEGMENT_RESET;
-		return lines.map((line) => (this.containsImage(line) ? line : line + reset));
+		return lines.map(line => (this.containsImage(line) ? line : line + reset));
 	}
 
 	/**

package/src/utils.ts

@@ -555,7 +555,7 @@ function wrapSingleLine(line: string, width: number): string[] {
 	}
 
 	// Trailing whitespace can cause lines to exceed the requested width
-	return wrapped.length > 0 ? wrapped.map((line) => line.trimEnd()) : [""];
+	return wrapped.length > 0 ? wrapped.map(line => line.trimEnd()) : [""];
 }
 
 const PUNCTUATION_REGEX = /[(){}[\]<>.,;:'"!?+\-=*/\\|&%^$#@~`]/;