@oh-my-pi/pi-tui 13.15.3 → 13.16.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## [Unreleased]
 
+## [13.16.1] - 2026-03-27
+
+### Added
+
+- Support for optional SearchDb parameter in CombinedAutocompleteProvider constructor for improved fuzzy search performance
+- Fuzzy matching filter for autocomplete suggestions to improve relevance of results
+
+### Changed
+
+- Fuzzy discovery now applies fuzzy matching filter to results for improved relevance of autocomplete suggestions
+- Autocomplete fuzzy discovery now accepts optional SearchDb instance for faster searches
+
+## [13.16.0] - 2026-03-27
+### Changed
+
+- Updated tab replacement in editor text sanitization to respect configured tab width setting
+
 ## [13.15.0] - 2026-03-23
 
 ### Added

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "13.15.3",
+	"version": "13.16.1",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/can1357/oh-my-pi",
 	"author": "Can Boluk",
@@ -33,8 +33,8 @@
 		"test": "bun test test/*.test.ts"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "13.15.3",
-		"@oh-my-pi/pi-utils": "13.15.3",
+		"@oh-my-pi/pi-natives": "13.16.1",
+		"@oh-my-pi/pi-utils": "13.16.1",
 		"marked": "^17.0"
 	},
 	"devDependencies": {

package/src/autocomplete.ts

@@ -1,6 +1,7 @@
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
+import type { SearchDb } from "@oh-my-pi/pi-natives";
 import { fuzzyFind } from "@oh-my-pi/pi-natives";
 import { getProjectDir } from "@oh-my-pi/pi-utils";
 
@@ -203,11 +204,17 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 	// per-directory readdir fast-path for prefix completions. Global fuzzy
 	// discovery continues to use native fuzzyFind + shared scan cache.
 	#dirCache: Map<string, { entries: fs.Dirent[]; timestamp: number }> = new Map();
+	#searchDb?: SearchDb;
 	readonly #DIR_CACHE_TTL = 2000; // 2 seconds
 
-	constructor(commands: (SlashCommand | AutocompleteItem)[] = [], basePath: string = getProjectDir()) {
+	constructor(
+		commands: (SlashCommand | AutocompleteItem)[] = [],
+		basePath: string = getProjectDir(),
+		searchDb?: SearchDb,
+	) {
 		this.#commands = commands;
 		this.#basePath = basePath;
+		this.#searchDb = searchDb;
 	}
 
 	async getSuggestions(
@@ -675,11 +682,15 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 			const scopedQuery = await this.#resolveScopedFuzzyQuery(query);
 			const searchPath = scopedQuery?.baseDir ?? this.#basePath;
 			const fuzzyQuery = scopedQuery?.query ?? query;
-			const result = await fuzzyFind(buildAutocompleteFuzzyDiscoveryProfile(fuzzyQuery, searchPath));
+			const result = await fuzzyFind(buildAutocompleteFuzzyDiscoveryProfile(fuzzyQuery, searchPath), this.#searchDb);
+			const lowerQuery = fuzzyQuery.toLowerCase();
 			const filteredMatches = result.matches.filter(entry => {
 				const p = entry.path.endsWith("/") ? entry.path.slice(0, -1) : entry.path;
 				const normalized = p.replaceAll("\\", "/");
-				return !/(^|\/)\.git(\/|$)/.test(normalized);
+				if (/(^|\/)\.git(\/|$)/.test(normalized)) {
+					return false;
+				}
+				return lowerQuery.length === 0 || fuzzyMatch(lowerQuery, normalized.toLowerCase());
 			});
 			const topEntries = filteredMatches.slice(0, 20);
 			const suggestions: AutocompleteItem[] = [];

package/src/components/editor.ts

@@ -12,6 +12,8 @@ import {
 	moveWordLeft,
 	moveWordRight,
 	padding,
+	replaceTabs,
+	sliceByColumn,
 	truncateToWidth,
 	visibleWidth,
 } from "../utils";
@@ -22,6 +24,13 @@ const SLASH_COMMAND_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
 	maxPrimaryColumnWidth: 32,
 };
 
+function sanitizeLoadedText(text: string): string {
+	return replaceTabs(text.replace(/\r\n/g, "\n").replace(/\r/g, "\n"))
+		.split("")
+		.filter(char => char === "\n" || char.charCodeAt(0) >= 32)
+		.join("");
+}
+
 const segmenter = getSegmenter();
 
 /**
@@ -318,6 +327,7 @@ export class Editor implements Component, Focusable {
 	cursorOverride: string | undefined;
 	/** Display width of the cursorOverride glyph (needed because override may contain ANSI escapes). */
 	cursorOverrideWidth: number | undefined;
+	#promptGutter: string | undefined;
 
 	// Store last layout width for cursor navigation
 	#lastLayoutWidth: number = 80;
@@ -374,6 +384,7 @@ export class Editor implements Component, Focusable {
 
 	// Custom top border (for status line integration)
 	#topBorderContent?: EditorTopBorder;
+	#borderVisible = true;
 
 	constructor(theme: EditorTheme) {
 		this.#theme = theme;
@@ -392,13 +403,24 @@ export class Editor implements Component, Focusable {
 		this.#topBorderContent = content;
 	}
 
+	/**
+	 * Show or hide the editor border chrome.
+	 */
+	setBorderVisible(borderVisible: boolean): void {
+		this.#borderVisible = borderVisible;
+	}
+
+	setPromptGutter(promptGutter: string | undefined): void {
+		this.#promptGutter = promptGutter;
+	}
+
 	/**
 	 * Get the available width for top border content given a total terminal width.
-	 * Accounts for the border characters and horizontal padding.
+	 * Accounts for the border characters and horizontal padding when visible.
 	 */
 	getTopBorderAvailableWidth(terminalWidth: number): number {
 		const paddingX = this.#getEditorPaddingX();
-		const borderWidth = paddingX + 1;
+		const borderWidth = this.#getHorizontalChromeWidth(paddingX);
 		return Math.max(0, terminalWidth - borderWidth * 2);
 	}
 
@@ -492,7 +514,7 @@ export class Editor implements Component, Focusable {
 	/** Internal setText that doesn't reset history state - used by navigateHistory */
 	#setTextInternal(text: string, cursorAnchor: HistoryCursorAnchor = "end"): void {
 		this.#undoStack.length = 0;
-		const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+		const lines = sanitizeLoadedText(text).split("\n");
 		this.#state.lines = lines.length === 0 ? [""] : lines;
 		if (cursorAnchor === "start") {
 			this.#state.cursorLine = 0;
@@ -515,18 +537,113 @@ export class Editor implements Component, Focusable {
 		return Math.max(0, padding);
 	}
 
+	#getHorizontalChromeWidth(paddingX: number): number {
+		return this.#borderVisible ? paddingX + 1 : 0;
+	}
+
+	#getPromptGutterWidth(width: number, paddingX: number): number {
+		if (this.#borderVisible || !this.#promptGutter) return 0;
+		const chromeWidth = 2 * this.#getHorizontalChromeWidth(paddingX);
+		const availableWidth = Math.max(0, width - chromeWidth);
+		return Math.min(visibleWidth(this.#promptGutter), availableWidth);
+	}
+
+	#getPromptGutter(
+		width: number,
+		paddingX: number,
+	): { firstLine: string; continuation: string; width: number } | undefined {
+		if (this.#borderVisible || !this.#promptGutter) return undefined;
+		const gutterWidth = this.#getPromptGutterWidth(width, paddingX);
+		if (gutterWidth === 0) return undefined;
+		return {
+			firstLine: sliceByColumn(this.#promptGutter, 0, gutterWidth, true),
+			continuation: padding(gutterWidth),
+			width: gutterWidth,
+		};
+	}
+
 	#getContentWidth(width: number, paddingX: number): number {
-		return Math.max(0, width - 2 * (paddingX + 1));
+		const chromeWidth = 2 * this.#getHorizontalChromeWidth(paddingX);
+		return Math.max(0, width - chromeWidth - this.#getPromptGutterWidth(width, paddingX));
 	}
 
 	#getLayoutWidth(width: number, paddingX: number): number {
 		const contentWidth = this.#getContentWidth(width, paddingX);
-		return Math.max(1, contentWidth - (paddingX === 0 ? 1 : 0));
+		const cursorReserve = this.#borderVisible && paddingX === 0 ? 1 : 0;
+		// Keep cursor/scroll layout addressable even when a borderless prompt gutter consumes every visible column.
+		return Math.max(1, contentWidth - cursorReserve);
 	}
 
 	#getVisibleContentHeight(contentLines: number): number {
 		if (this.#maxHeight === undefined) return contentLines;
-		return Math.max(1, this.#maxHeight - 2);
+		const verticalChrome = this.#borderVisible ? 2 : 0;
+		return Math.max(1, this.#maxHeight - verticalChrome);
+	}
+
+	#getStyledInputCursor(): { text: string; width: number } {
+		const cursorChar = this.#theme.symbols.inputCursor;
+		return { text: `\x1b[5m${cursorChar}\x1b[0m`, width: visibleWidth(cursorChar) };
+	}
+
+	#renderEndOfLineCursorAtWidthLimit(
+		before: string,
+		marker: string,
+		maxWidth: number,
+		replacement?: { text: string; width: number },
+	): { text: string; width: number } {
+		const beforeGraphemes = [...segmenter.segment(before)];
+		const lastGrapheme = beforeGraphemes[beforeGraphemes.length - 1]?.segment;
+		const lastGraphemeWidth = lastGrapheme ? visibleWidth(lastGrapheme) : 0;
+		const builtInCursor = this.#getStyledInputCursor();
+		const fallbackReplacement = lastGrapheme
+			? { text: `\x1b[7m${lastGrapheme}\x1b[0m`, width: lastGraphemeWidth }
+			: builtInCursor;
+		const clampReplacement = (candidate: { text: string; width: number }): { text: string; width: number } => {
+			let text = sliceByColumn(candidate.text, 0, maxWidth, true);
+			let width = visibleWidth(text);
+			if (width > maxWidth) {
+				text = "";
+				width = 0;
+			}
+			return { text, width };
+		};
+
+		let clampedReplacement = clampReplacement(replacement ?? fallbackReplacement);
+		if (replacement && clampedReplacement.width === 0) {
+			// A custom override that cannot fit at all should first fall back to the highlighted tail.
+			clampedReplacement = clampReplacement(fallbackReplacement);
+		}
+		if (lastGrapheme && clampedReplacement.width === 0) {
+			// If even the highlighted trailing grapheme cannot fit, show the built-in single-column cursor.
+			clampedReplacement = clampReplacement(builtInCursor);
+		}
+
+		const replacedSpanWidth = Math.min(maxWidth, Math.max(lastGraphemeWidth, clampedReplacement.width));
+		const prefixWidth = Math.max(0, maxWidth - replacedSpanWidth);
+		const beforePrefix = sliceByColumn(before, 0, prefixWidth, true);
+		const replacementPad = padding(Math.max(0, replacedSpanWidth - clampedReplacement.width));
+		return {
+			text: `${beforePrefix}${replacementPad}${clampedReplacement.text}${marker}`,
+			width: visibleWidth(beforePrefix) + replacedSpanWidth,
+		};
+	}
+
+	#renderTerminalCursorMarker(text: string, marker: string, maxWidth: number): string {
+		if (!marker) return text;
+		if (visibleWidth(text) < maxWidth) {
+			return text + marker;
+		}
+
+		let insertAt = text.length;
+		let offset = 0;
+		for (const seg of segmenter.segment(text)) {
+			if (visibleWidth(seg.segment) > 0) {
+				insertAt = offset;
+			}
+			offset += seg.segment.length;
+		}
+
+		return `${text.slice(0, insertAt)}${marker}${text.slice(insertAt)}`;
 	}
 
 	#getPageScrollStep(totalVisualLines: number): number {
@@ -555,13 +672,15 @@ export class Editor implements Component, Focusable {
 
 	render(width: number): string[] {
 		const paddingX = this.#getEditorPaddingX();
+		const borderVisible = this.#borderVisible;
+		const promptGutter = this.#getPromptGutter(width, paddingX);
 		const contentAreaWidth = this.#getContentWidth(width, paddingX);
 		const layoutWidth = this.#getLayoutWidth(width, paddingX);
 		this.#lastLayoutWidth = layoutWidth;
 
 		// Box-drawing characters for rounded corners
 		const box = this.#theme.symbols.boxRound;
-		const borderWidth = paddingX + 1;
+		const borderWidth = this.#getHorizontalChromeWidth(paddingX);
 		const topLeft = this.borderColor(`${box.topLeft}${box.horizontal.repeat(paddingX)}`);
 		const topRight = this.borderColor(`${box.horizontal.repeat(paddingX)}${box.topRight}`);
 		const bottomLeft = this.borderColor(`${box.bottomLeft}${box.horizontal}${padding(Math.max(0, paddingX - 1))}`);
@@ -575,23 +694,25 @@ export class Editor implements Component, Focusable {
 
 		const result: string[] = [];
 
-		// Render top border: ╭─ [status content] ────────────────╮
-		const topFillWidth = width - borderWidth * 2;
-		if (this.#topBorderContent) {
-			const { content, width: statusWidth } = this.#topBorderContent;
-			if (statusWidth <= topFillWidth) {
-				// Status fits - add fill after it
-				const fillWidth = topFillWidth - statusWidth;
-				result.push(topLeft + content + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);
+		if (borderVisible) {
+			// Render top border: ╭─ [status content] ────────────────╮
+			const topFillWidth = Math.max(0, width - borderWidth * 2);
+			if (this.#topBorderContent) {
+				const { content, width: statusWidth } = this.#topBorderContent;
+				if (statusWidth <= topFillWidth) {
+					// Status fits - add fill after it
+					const fillWidth = topFillWidth - statusWidth;
+					result.push(topLeft + content + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);
+				} else {
+					// Status too long - truncate it
+					const truncated = truncateToWidth(content, Math.max(0, topFillWidth - 1));
+					const truncatedWidth = visibleWidth(truncated);
+					const fillWidth = Math.max(0, topFillWidth - truncatedWidth);
+					result.push(topLeft + truncated + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);
+				}
 			} else {
-				// Status too long - truncate it
-				const truncated = truncateToWidth(content, topFillWidth - 1);
-				const truncatedWidth = visibleWidth(truncated);
-				const fillWidth = Math.max(0, topFillWidth - truncatedWidth);
-				result.push(topLeft + truncated + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);
+				result.push(topLeft + horizontal.repeat(topFillWidth) + topRight);
 			}
-		} else {
-			result.push(topLeft + horizontal.repeat(topFillWidth) + topRight);
 		}
 
 		// Render each layout line
@@ -603,15 +724,63 @@ export class Editor implements Component, Focusable {
 		const inlineHint = this.#getInlineHint();
 		const hintStyle = this.#theme.hintStyle ?? ((t: string) => `\x1b[2m${t}\x1b[0m`);
 
-		for (const layoutLine of visibleLayoutLines) {
+		for (let visibleIndex = 0; visibleIndex < visibleLayoutLines.length; visibleIndex++) {
+			const layoutLine = visibleLayoutLines[visibleIndex]!;
 			let displayText = layoutLine.text;
 			let displayWidth = visibleWidth(layoutLine.text);
 			let cursorInPadding = false;
+			const showPromptGutter = promptGutter !== undefined && visibleIndex === 0;
+			const gutterText =
+				promptGutter === undefined ? "" : showPromptGutter ? promptGutter.firstLine : promptGutter.continuation;
 
 			// Add cursor if this line has it
 			const hasCursor = layoutLine.hasCursor && layoutLine.cursorPos !== undefined;
 			const marker = emitCursorMarker ? CURSOR_MARKER : "";
 
+			if (!borderVisible && displayWidth > lineContentWidth) {
+				displayText = sliceByColumn(displayText, 0, lineContentWidth, true);
+				displayWidth = visibleWidth(displayText);
+			}
+
+			if (!borderVisible && lineContentWidth === 0) {
+				if (hasCursor && !this.#useTerminalCursor) {
+					const zeroWidthCursorBudget = visibleWidth(gutterText);
+					const zeroWidthCursorReplacement = this.cursorOverride
+						? { text: this.cursorOverride, width: this.cursorOverrideWidth ?? 1 }
+						: this.#getStyledInputCursor();
+					if (showPromptGutter && zeroWidthCursorBudget > 0) {
+						// Keep the leading prompt glyph visible when the gutter consumes the whole row.
+						const promptGlyph = [...segmenter.segment(gutterText)][0]?.segment ?? "";
+						const promptGlyphWidth = visibleWidth(promptGlyph);
+						const remainingCursorWidth = Math.max(0, zeroWidthCursorBudget - promptGlyphWidth);
+						if (remainingCursorWidth === 0) {
+							result.push(`\x1b[7m${promptGlyph}\x1b[0m${marker}`);
+						} else {
+							const widthLimitedCursor = this.#renderEndOfLineCursorAtWidthLimit(
+								"",
+								marker,
+								remainingCursorWidth,
+								zeroWidthCursorReplacement,
+							);
+							result.push(`${promptGlyph}${widthLimitedCursor.text}`);
+						}
+					} else {
+						const widthLimitedCursor = this.#renderEndOfLineCursorAtWidthLimit(
+							gutterText,
+							marker,
+							zeroWidthCursorBudget,
+							zeroWidthCursorReplacement,
+						);
+						result.push(widthLimitedCursor.text);
+					}
+				} else if (hasCursor && this.#useTerminalCursor) {
+					result.push(this.#renderTerminalCursorMarker(gutterText, marker, visibleWidth(gutterText)));
+				} else {
+					result.push(gutterText + (hasCursor ? marker : ""));
+				}
+				continue;
+			}
+
 			if (hasCursor && this.#useTerminalCursor) {
 				if (marker) {
 					const before = displayText.slice(0, layoutLine.cursorPos);
@@ -620,6 +789,8 @@ export class Editor implements Component, Focusable {
 						const hintText = hintStyle(truncateToWidth(inlineHint, Math.max(0, lineContentWidth - displayWidth)));
 						displayText = before + marker + hintText;
 						displayWidth += visibleWidth(inlineHint);
+					} else if (after.length === 0 && !borderVisible && displayWidth >= lineContentWidth) {
+						displayText = this.#renderTerminalCursorMarker(before, marker, lineContentWidth);
 					} else {
 						displayText = before + marker + after;
 					}
@@ -640,7 +811,16 @@ export class Editor implements Component, Focusable {
 				} else if (this.cursorOverride) {
 					// Cursor override replaces the normal end-of-text cursor glyph
 					const overrideWidth = this.cursorOverrideWidth ?? 1;
-					if (inlineHint) {
+					if (!borderVisible && displayWidth + overrideWidth > lineContentWidth) {
+						// Borderless editors have no spare padding cell for an end-of-line cursor glyph.
+						// Preserve cursorOverride by replacing the tail of the line with it.
+						const widthLimitedCursor = this.#renderEndOfLineCursorAtWidthLimit(before, marker, lineContentWidth, {
+							text: this.cursorOverride,
+							width: overrideWidth,
+						});
+						displayText = widthLimitedCursor.text;
+						displayWidth = widthLimitedCursor.width;
+					} else if (inlineHint) {
 						const availWidth = Math.max(0, lineContentWidth - displayWidth - overrideWidth);
 						const hintText = hintStyle(truncateToWidth(inlineHint, availWidth));
 						displayText = before + marker + this.cursorOverride + hintText;
@@ -651,16 +831,21 @@ export class Editor implements Component, Focusable {
 					}
 				} else {
 					// Cursor is at the end - add thin cursor glyph
-					const cursorChar = this.#theme.symbols.inputCursor;
-					const cursor = `\x1b[5m${cursorChar}\x1b[0m`;
-					if (inlineHint) {
-						const availWidth = Math.max(0, lineContentWidth - displayWidth - visibleWidth(cursorChar));
+					const { text: cursor, width: cursorWidth } = this.#getStyledInputCursor();
+					if (!borderVisible && displayWidth + cursorWidth > lineContentWidth) {
+						// Borderless editors have no spare padding cell for an end-of-line cursor glyph.
+						// Highlight the last grapheme so the cursor stays visible without consuming width.
+						const widthLimitedCursor = this.#renderEndOfLineCursorAtWidthLimit(before, marker, lineContentWidth);
+						displayText = widthLimitedCursor.text;
+						displayWidth = widthLimitedCursor.width;
+					} else if (inlineHint) {
+						const availWidth = Math.max(0, lineContentWidth - displayWidth - cursorWidth);
 						const hintText = hintStyle(truncateToWidth(inlineHint, availWidth));
 						displayText = before + marker + cursor + hintText;
-						displayWidth += visibleWidth(cursorChar) + Math.min(visibleWidth(inlineHint), availWidth);
+						displayWidth += cursorWidth + Math.min(visibleWidth(inlineHint), availWidth);
 					} else {
 						displayText = before + marker + cursor;
-						displayWidth += visibleWidth(cursorChar);
+						displayWidth += cursorWidth;
 					}
 					if (displayWidth > lineContentWidth && paddingX > 0) {
 						cursorInPadding = true;
@@ -668,10 +853,15 @@ export class Editor implements Component, Focusable {
 				}
 			}
 
-			// All lines have consistent borders based on padding
-			const isLastLine = layoutLine === visibleLayoutLines[visibleLayoutLines.length - 1];
 			const linePad = padding(Math.max(0, lineContentWidth - displayWidth));
 
+			if (!borderVisible) {
+				result.push(gutterText + displayText + linePad);
+				continue;
+			}
+
+			// All lines have consistent borders based on padding
+			const isLastLine = visibleIndex === visibleLayoutLines.length - 1;
 			const rightPaddingWidth = Math.max(0, paddingX - (cursorInPadding ? 1 : 0));
 			if (isLastLine) {
 				const bottomRightPadding = Math.max(0, paddingX - 1 - (cursorInPadding ? 1 : 0));