@oh-my-pi/pi-tui 11.8.3 → 11.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oh-my-pi/pi-tui",
-	"version": "11.8.3",
+	"version": "11.10.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"type": "module",
 	"main": "./src/index.ts",
@@ -47,8 +47,8 @@
 		"bun": ">=1.3.7"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "11.8.3",
-		"@oh-my-pi/pi-utils": "11.8.3",
+		"@oh-my-pi/pi-natives": "11.10.0",
+		"@oh-my-pi/pi-utils": "11.10.0",
 		"@types/mime-types": "^3.0.1",
 		"chalk": "^5.6.2",
 		"marked": "^17.0.1",

package/src/autocomplete.ts

@@ -130,6 +130,8 @@ export interface AutocompleteItem {
 	value: string;
 	label: string;
 	description?: string;
+	/** Dim hint text shown inline after cursor when this item is selected */
+	hint?: string;
 }
 
 export interface SlashCommand {
@@ -138,11 +140,12 @@ export interface SlashCommand {
 	// Function to get argument completions for this command
 	// Returns null if no argument completion is available
 	getArgumentCompletions?(argumentPrefix: string): AutocompleteItem[] | null;
+	/** Return inline hint text for the current argument state (shown as dim ghost text after cursor) */
+	getInlineHint?(argumentText: string): string | null;
 }
 
 export interface AutocompleteProvider {
-	// Get autocomplete suggestions for current text/cursor position
-	// Returns null if no suggestions available
+	/** Get autocomplete suggestions for current text/cursor position */
 	getSuggestions(
 		lines: string[],
 		cursorLine: number,
@@ -152,8 +155,7 @@ export interface AutocompleteProvider {
 		prefix: string; // What we're matching against (e.g., "/" or "src/")
 	} | null>;
 
-	// Apply the selected item
-	// Returns the new text and cursor position
+	/** Apply the selected item and return new text + cursor position */
 	applyCompletion(
 		lines: string[],
 		cursorLine: number,
@@ -165,6 +167,9 @@ export interface AutocompleteProvider {
 		cursorLine: number;
 		cursorCol: number;
 	};
+
+	/** Get inline hint text to show as dim ghost text after the cursor */
+	getInlineHint?(lines: string[], cursorLine: number, cursorCol: number): string | null;
 }
 
 // Combined provider that handles both slash commands and file paths
@@ -715,4 +720,29 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 
 		return true;
 	}
+
+	/** Get inline hint text for slash commands with subcommand hints */
+	getInlineHint(lines: string[], cursorLine: number, cursorCol: number): string | null {
+		const currentLine = lines[cursorLine] || "";
+		const textBeforeCursor = currentLine.slice(0, cursorCol);
+
+		if (!textBeforeCursor.startsWith("/")) return null;
+
+		const spaceIndex = textBeforeCursor.indexOf(" ");
+		if (spaceIndex === -1) return null;
+
+		const commandName = textBeforeCursor.slice(1, spaceIndex);
+		const argumentText = textBeforeCursor.slice(spaceIndex + 1);
+
+		const command = this.#commands.find(cmd => {
+			const name = "name" in cmd ? cmd.name : cmd.value;
+			return name === commandName;
+		});
+
+		if (!command || !("getInlineHint" in command) || !command.getInlineHint) {
+			return null;
+		}
+
+		return command.getInlineHint(argumentText);
+	}
 }

package/src/components/editor.ts

@@ -263,6 +263,8 @@ export interface EditorTheme {
 	selectList: SelectListTheme;
 	symbols: SymbolTheme;
 	editorPaddingX?: number;
+	/** Style function for inline hint/ghost text (dim text after cursor) */
+	hintStyle?: (text: string) => string;
 }
 
 export interface EditorTopBorder {
@@ -553,6 +555,10 @@ export class Editor implements Component, Focusable {
 		const emitCursorMarker = this.focused && !this.#autocompleteState;
 		const lineContentWidth = contentAreaWidth;
 
+		// Compute inline hint text (dim ghost text after cursor)
+		const inlineHint = this.#getInlineHint();
+		const hintStyle = this.#theme.hintStyle ?? ((t: string) => `\x1b[2m${t}\x1b[0m`);
+
 		for (const layoutLine of visibleLayoutLines) {
 			let displayText = layoutLine.text;
 			let displayWidth = visibleWidth(layoutLine.text);
@@ -566,7 +572,13 @@ export class Editor implements Component, Focusable {
 				if (marker) {
 					const before = displayText.slice(0, layoutLine.cursorPos);
 					const after = displayText.slice(layoutLine.cursorPos);
-					displayText = before + marker + after;
+					if (after.length === 0 && inlineHint) {
+						const hintText = hintStyle(truncateToWidth(inlineHint, Math.max(0, lineContentWidth - displayWidth)));
+						displayText = before + marker + hintText;
+						displayWidth += visibleWidth(inlineHint);
+					} else {
+						displayText = before + marker + after;
+					}
 				}
 			} else if (hasCursor && !this.#useTerminalCursor) {
 				const before = displayText.slice(0, layoutLine.cursorPos);
@@ -585,8 +597,15 @@ export class Editor implements Component, Focusable {
 					// Cursor is at the end - add thin cursor glyph
 					const cursorChar = this.#theme.symbols.inputCursor;
 					const cursor = `\x1b[5m${cursorChar}\x1b[0m`;
-					displayText = before + marker + cursor;
-					displayWidth += visibleWidth(cursorChar);
+					if (inlineHint) {
+						const availWidth = Math.max(0, lineContentWidth - displayWidth - visibleWidth(cursorChar));
+						const hintText = hintStyle(truncateToWidth(inlineHint, availWidth));
+						displayText = before + marker + cursor + hintText;
+						displayWidth += visibleWidth(cursorChar) + Math.min(visibleWidth(inlineHint), availWidth);
+					} else {
+						displayText = before + marker + cursor;
+						displayWidth += visibleWidth(cursorChar);
+					}
 					if (displayWidth > lineContentWidth && paddingX > 0) {
 						cursorInPadding = true;
 					}
@@ -2168,4 +2187,27 @@ https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19536643416/job/
 			this.#autocompleteTimeout = undefined;
 		}
 	}
+
+	/**
+	 * Get inline hint text to show as dim ghost text after the cursor.
+	 * Checks selected autocomplete item's hint first, then falls back to provider.
+	 */
+	#getInlineHint(): string | null {
+		// Check selected autocomplete item for a hint
+		if (this.#autocompleteState && this.#autocompleteList) {
+			const selected = this.#autocompleteList.getSelectedItem();
+			return selected?.hint ?? null;
+		}
+
+		// Fall back to provider's getInlineHint
+		if (this.#autocompleteProvider?.getInlineHint) {
+			return this.#autocompleteProvider.getInlineHint(
+				this.#state.lines,
+				this.#state.cursorLine,
+				this.#state.cursorCol,
+			);
+		}
+
+		return null;
+	}
 }

package/src/components/select-list.ts

@@ -7,6 +7,8 @@ export interface SelectItem {
 	value: string;
 	label: string;
 	description?: string;
+	/** Dim hint text shown inline after cursor when this item is selected */
+	hint?: string;
 }
 
 export interface SelectListTheme {