@oh-my-pi/pi-tui 16.1.6 → 16.1.8

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## [Unreleased]
 
+## [16.1.8] - 2026-06-20
+
+### Added
+
+- Added an optional synchronous dynamic description hook for slash-command autocomplete items.
+
+### Fixed
+
+- Fixed Markdown component to strip inline `<span>` and `<text>` tags while preserving their contents and unescaping nested HTML entities (`&lt;`, `&gt;`, `&quot;`, `&apos;`, `&amp;`), preventing raw LLM block/inline formatting residues from leaking into rendered TUI output.
+
+## [16.1.7] - 2026-06-20
+
+### Fixed
+
+- Fixed slash command autocomplete, inline hints, and Enter completion when the slash command is preceded by leading whitespace ([#3095](https://github.com/can1357/oh-my-pi/issues/3095)).
+- Fixed empty `/` autocomplete burying user skill commands below every built-in command, so installed skills appear in the initial slash popup ([#2875](https://github.com/can1357/oh-my-pi/issues/2875)).
+
 ## [16.1.0] - 2026-06-19
 
 ### Added

package/dist/types/autocomplete.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Locate the slash that opens a slash command on the line, allowing leading
+ * whitespace. Returns the index of the `/` or `null` when the line is not a
+ * slash command. Aligns with `trimStart` semantics so the editor and provider
+ * agree on which prefixes count.
+ */
+export declare function findLeadingSlashCommandStart(text: string): number | null;
 export interface AutocompleteItem {
     value: string;
     label: string;
@@ -11,6 +18,8 @@ export interface SlashCommand {
     aliases?: string[];
     description?: string;
     argumentHint?: string;
+    /** Dynamic display-only description for slash-command autocomplete. Must be synchronous and side-effect free. */
+    getAutocompleteDescription?: () => string | undefined;
     getArgumentCompletions?(argumentPrefix: string): Awaitable<AutocompleteItem[] | null>;
     /** Return inline hint text for the current argument state (shown as dim ghost text after cursor) */
     getInlineHint?(argumentText: string): string | null;

package/dist/types/components/editor.d.ts

@@ -1,4 +1,4 @@
-import type { AutocompleteProvider } from "../autocomplete";
+import { type AutocompleteProvider } from "../autocomplete";
 import type { SymbolTheme } from "../symbols";
 import { type Component, type Focusable } from "../tui";
 import { type SelectListTheme } from "./select-list";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "16.1.6",
+	"version": "16.1.8",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "16.1.6",
-		"@oh-my-pi/pi-utils": "16.1.6",
+		"@oh-my-pi/pi-natives": "16.1.8",
+		"@oh-my-pi/pi-utils": "16.1.8",
 		"lru-cache": "11.5.1",
 		"marked": "^18.0.5"
 	},

package/src/autocomplete.ts

@@ -56,6 +56,18 @@ function isTokenStart(text: string, index: number): boolean {
 	return index === 0 || PATH_DELIMITERS.has(text[index - 1] ?? "");
 }
 
+/**
+ * Locate the slash that opens a slash command on the line, allowing leading
+ * whitespace. Returns the index of the `/` or `null` when the line is not a
+ * slash command. Aligns with `trimStart` semantics so the editor and provider
+ * agree on which prefixes count.
+ */
+export function findLeadingSlashCommandStart(text: string): number | null {
+	const trimmed = text.trimStart();
+	if (!trimmed.startsWith("/")) return null;
+	return text.length - trimmed.length;
+}
+
 function extractQuotedPrefix(text: string): string | null {
 	const quoteStart = findUnclosedQuoteStart(text);
 	if (quoteStart === null) {
@@ -163,6 +175,8 @@ export interface SlashCommand {
 	aliases?: string[];
 	description?: string;
 	argumentHint?: string;
+	/** Dynamic display-only description for slash-command autocomplete. Must be synchronous and side-effect free. */
+	getAutocompleteDescription?: () => string | undefined;
 	// Function to get argument completions for this command
 	// Returns null if no argument completion is available
 	getArgumentCompletions?(argumentPrefix: string): Awaitable<AutocompleteItem[] | null>;
@@ -222,6 +236,17 @@ function getCommandAliases(cmd: CommandEntry): string[] {
 	return cmd.aliases.filter(alias => typeof alias === "string" && alias.length > 0);
 }
 
+function getStaticCommandDescription(cmd: CommandEntry): string {
+	return cmd.description ?? "";
+}
+
+function getAutocompleteCommandDescription(cmd: CommandEntry): string {
+	if ("getAutocompleteDescription" in cmd && typeof cmd.getAutocompleteDescription === "function") {
+		return cmd.getAutocompleteDescription() ?? cmd.description ?? "";
+	}
+	return cmd.description ?? "";
+}
+
 function commandMatchesNameOrAlias(cmd: CommandEntry, commandName: string): boolean {
 	const name = getCommandName(cmd);
 	if (name === commandName) return true;
@@ -245,16 +270,31 @@ function buildSlashCommandCompletions(commands: CommandEntry[], lowerPrefix: str
 			const name = getCommandName(cmd);
 			if (!name) return [];
 			const hint = "argumentHint" in cmd && cmd.argumentHint ? cmd.argumentHint : undefined;
-			const desc = cmd.description ?? "";
-			const fullDesc = hint ? (desc ? `${hint} — ${desc}` : hint) : desc;
+			const staticDesc = getStaticCommandDescription(cmd);
+			let fullDescMemo: string | undefined;
+			let fullDescComputed = false;
+			// Resolve the (possibly live) display description lazily, only once a
+			// candidate actually matches — getAutocompleteDescription reads live
+			// session state and must not run for every command on each keystroke.
+			const resolveFullDesc = (): string | undefined => {
+				if (!fullDescComputed) {
+					const displayDesc = getAutocompleteCommandDescription(cmd);
+					fullDescMemo = hint ? (displayDesc ? `${hint} - ${displayDesc}` : hint) : displayDesc;
+					fullDescComputed = true;
+				}
+				return fullDescMemo;
+			};
 			const candidates: Array<AutocompleteItem & { score: number }> = [];
 
-			const nameScore = scoreCommandTextMatch(lowerPrefix, name.toLowerCase());
-			const lowerDesc = desc.toLowerCase();
+			const isSkillCommand = name.startsWith("skill:");
+			const nameScore =
+				lowerPrefix.length === 0 && isSkillCommand ? 950 : scoreCommandTextMatch(lowerPrefix, name.toLowerCase());
+			const lowerDesc = staticDesc.toLowerCase();
 			const descScore =
 				lowerDesc && fuzzyMatch(lowerPrefix, lowerDesc) ? fuzzyScore(lowerPrefix, lowerDesc) * 0.5 : 0;
 			const primaryScore = Math.max(nameScore, descScore);
 			if (primaryScore > 0) {
+				const fullDesc = resolveFullDesc();
 				candidates.push({
 					value: name,
 					label: "name" in cmd ? cmd.name : cmd.label,
@@ -268,6 +308,7 @@ function buildSlashCommandCompletions(commands: CommandEntry[], lowerPrefix: str
 					if (alias === name) continue;
 					const aliasScore = scoreCommandTextMatch(lowerPrefix, alias.toLowerCase());
 					if (aliasScore === 0) continue;
+					const fullDesc = resolveFullDesc();
 					candidates.push({
 						value: alias,
 						label: alias,
@@ -338,13 +379,14 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 			};
 		}
 
-		// Check for slash commands
-		if (textBeforeCursor.startsWith("/")) {
-			const spaceIndex = textBeforeCursor.indexOf(" ");
+		const slashStart = findLeadingSlashCommandStart(textBeforeCursor);
+		if (slashStart !== null) {
+			const commandText = textBeforeCursor.slice(slashStart);
+			const spaceIndex = commandText.indexOf(" ");
 
 			if (spaceIndex === -1) {
 				// No space yet - complete command names
-				const prefix = textBeforeCursor.slice(1); // Remove the "/"
+				const prefix = commandText.slice(1); // Remove the "/"
 				const lowerPrefix = prefix.toLowerCase();
 
 				const matches = buildSlashCommandCompletions(this.#commands, lowerPrefix);
@@ -353,12 +395,16 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 
 				return {
 					items: matches,
+					// Preserve the full text-before-cursor (incl. leading
+					// whitespace) so the editor's Enter-staleness check
+					// (`autocompletePrefix !== currentTextBeforeCursor`)
+					// still applies the completion for `  /sk`.
 					prefix: textBeforeCursor,
 				};
 			} else {
 				// Space found - complete command arguments
-				const commandName = textBeforeCursor.slice(1, spaceIndex); // Command without "/"
-				const argumentText = textBeforeCursor.slice(spaceIndex + 1); // Text after space
+				const commandName = commandText.slice(1, spaceIndex); // Command without "/"
+				const argumentText = commandText.slice(spaceIndex + 1); // Text after space
 
 				const command = this.#commands.find(cmd => commandMatchesNameOrAlias(cmd, commandName));
 				if (!command || !("getArgumentCompletions" in command) || !command.getArgumentCompletions) {
@@ -416,13 +462,12 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		const textBeforeCursor = currentLine.slice(0, cursorCol);
 		const afterCursor = currentLine.slice(cursorCol);
 
-		const slashStart = textBeforeCursor.indexOf("/");
-		const hasOnlyWhitespaceBeforeSlash = slashStart >= 0 && textBeforeCursor.slice(0, slashStart).trim() === "";
+		const slashStart = findLeadingSlashCommandStart(textBeforeCursor);
 
 		// Slash command suggestions can be accepted before the debounced refresh
 		// catches up to newly typed characters. Replace the live command token,
 		// not only the prefix captured when the suggestion list was rendered.
-		if (prefix.startsWith("/") && hasOnlyWhitespaceBeforeSlash) {
+		if (findLeadingSlashCommandStart(prefix) !== null && slashStart !== null) {
 			const slashPrefix = textBeforeCursor.slice(slashStart);
 			if (!slashPrefix.includes(" ") && !slashPrefix.slice(1).includes("/")) {
 				const beforeSlash = currentLine.slice(0, slashStart);
@@ -854,13 +899,15 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		const currentLine = lines[cursorLine] || "";
 		const textBeforeCursor = currentLine.slice(0, cursorCol);
 
-		if (!textBeforeCursor.startsWith("/")) return null;
+		const slashStart = findLeadingSlashCommandStart(textBeforeCursor);
+		if (slashStart === null) return null;
 
-		const spaceIndex = textBeforeCursor.indexOf(" ");
+		const commandText = textBeforeCursor.slice(slashStart);
+		const spaceIndex = commandText.indexOf(" ");
 		if (spaceIndex === -1) return null;
 
-		const commandName = textBeforeCursor.slice(1, spaceIndex);
-		const argumentText = textBeforeCursor.slice(spaceIndex + 1);
+		const commandName = commandText.slice(1, spaceIndex);
+		const argumentText = commandText.slice(spaceIndex + 1);
 
 		const command = this.#commands.find(cmd => commandMatchesNameOrAlias(cmd, commandName));
 
@@ -871,16 +918,20 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		return command.getInlineHint(argumentText);
 	}
 	trySyncSlashCompletion(textBeforeCursor: string): { items: AutocompleteItem[]; prefix: string } | null {
-		if (!textBeforeCursor.startsWith("/")) return null;
-		if (textBeforeCursor.length <= 1) return null; // Bare "/" alone, don't auto-complete
-		if (textBeforeCursor.includes(" ")) return null; // Only complete command name, not args
+		const slashStart = findLeadingSlashCommandStart(textBeforeCursor);
+		if (slashStart === null) return null;
+		const commandText = textBeforeCursor.slice(slashStart);
+		if (commandText.length <= 1) return null; // Bare "/" alone, don't auto-complete
+		if (commandText.includes(" ")) return null; // Only complete command name, not args
 
-		const prefix = textBeforeCursor.slice(1);
+		const prefix = commandText.slice(1);
 		const lowerPrefix = prefix.toLowerCase();
 
 		const matches = buildSlashCommandCompletions(this.#commands, lowerPrefix);
 
 		if (matches.length === 0) return null;
+		// Mirror `getSuggestions`: preserve leading whitespace so the editor's
+		// sync apply path passes the full text-before-cursor through.
 		return { items: matches, prefix: textBeforeCursor };
 	}
 }

package/src/components/editor.ts

@@ -1,5 +1,9 @@
 import { getProjectDir, logger } from "@oh-my-pi/pi-utils";
-import type { AutocompleteProvider, CombinedAutocompleteProvider } from "../autocomplete";
+import {
+	type AutocompleteProvider,
+	type CombinedAutocompleteProvider,
+	findLeadingSlashCommandStart,
+} from "../autocomplete";
 import { BracketedPasteHandler, decodeReencodedPasteControls } from "../bracketed-paste";
 import { getKeybindings, type KeybindingsManager } from "../keybindings";
 import { extractPrintableText, matchesKey } from "../keys";
@@ -1116,7 +1120,10 @@ export class Editor implements Component, Focusable {
 				}
 
 				// If Enter was pressed on a slash command, apply completion and submit
-				if ((kb.matches(data, "tui.input.submit") || data === "\n") && this.#autocompletePrefix.startsWith("/")) {
+				if (
+					(kb.matches(data, "tui.input.submit") || data === "\n") &&
+					findLeadingSlashCommandStart(this.#autocompletePrefix) !== null
+				) {
 					// Check for stale autocomplete state due to debounce
 					const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
 					const currentTextBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
@@ -1263,7 +1270,7 @@ export class Editor implements Component, Focusable {
 				const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
 				const textBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
 				if (
-					textBeforeCursor.startsWith("/") &&
+					findLeadingSlashCommandStart(textBeforeCursor) !== null &&
 					this.#isInSubmittedSlashCommandContext() &&
 					this.#autocompleteProvider?.trySyncSlashCompletion
 				) {

package/src/components/markdown.ts

@@ -32,7 +32,43 @@ function isOsc66Line(line: string): boolean {
 }
 
 function normalizeHtmlEntitiesForTerminal(raw: string): string {
-	return raw.replace(/ /gi, " ");
+	const parseCodePoint = (value: number): string => {
+		if (Number.isFinite(value) && value >= 0 && value <= 0x10ffff) {
+			try {
+				return String.fromCodePoint(value);
+			} catch (_) {
+				// Fallback to empty string or original if invalid codepoint
+			}
+		}
+		return "";
+	};
+
+	return raw.replace(/&(amp|lt|gt|quot|apos|nbsp|#\d+|#x[0-9a-fA-F]+);/gi, (match, entity) => {
+		const lower = entity.toLowerCase();
+		switch (lower) {
+			case "nbsp":
+				return " ";
+			case "lt":
+				return "<";
+			case "gt":
+				return ">";
+			case "quot":
+				return '"';
+			case "apos":
+				return "'";
+			case "amp":
+				return "&";
+			default: {
+				if (lower.startsWith("#x")) {
+					return parseCodePoint(Number.parseInt(lower.slice(2), 16));
+				}
+				if (lower.startsWith("#")) {
+					return parseCodePoint(Number(lower.slice(1)));
+				}
+				return match;
+			}
+		}
+	});
 }
 
 interface HtmlListState {
@@ -50,7 +86,7 @@ function createHtmlNormalizationState(): HtmlNormalizationState {
 	return { lists: [], openItems: [], itemHasContent: [] };
 }
 
-const HTML_TAG_REGEX = /<\/?(?:br|p|ol|ul|li)\b(?:\s[^>]*)?\s*\/?>/gi;
+const HTML_TAG_REGEX = /<\/?(?:br|p|ol|ul|li|span|text)\b(?:\s[^>]*)?\s*\/?>/gi;
 
 function htmlTagName(tag: string): string {
 	const match = /^<\/?\s*([A-Za-z][A-Za-z0-9:-]*)/.exec(tag);
@@ -96,22 +132,28 @@ function normalizeHtmlForTerminal(raw: string, state: HtmlNormalizationState = c
 		const tag = match[0];
 		const index = match.index ?? 0;
 		const textBeforeTag = normalizeHtmlEntitiesForTerminal(raw.slice(lastIndex, index));
+		const name = htmlTagName(tag);
+		// Every tag handled here is block-level EXCEPT span and text. For block-level tags,
 		// HTML formatting whitespace between block/list tags (e.g. the newlines and
 		// indentation in pretty-printed `<ul>\n  <li>…`) is not rendered content;
 		// appending it literally would leak source indentation before bullets and
-		// blank rows between items. Every tag handled here is block-level, so a
-		// whitespace-only slice is always insignificant formatting and is dropped.
-		if (textBeforeTag.trim() !== "") {
+		// blank rows between items. A whitespace-only slice is always insignificant formatting
+		// and is dropped. But for inline tags like span and text, surrounding whitespace
+		// is significant and must NOT be dropped.
+		const isInlineTag = name === "span" || name === "text";
+		if (isInlineTag || textBeforeTag.trim() !== "") {
 			output += textBeforeTag;
 			markCurrentHtmlItemContent(state, textBeforeTag);
 		}
 		lastIndex = index + tag.length;
 
-		const name = htmlTagName(tag);
 		const isClosing = /^<\//.test(tag);
 		const isSelfClosing = /\/\s*>$/.test(tag);
 
 		switch (name) {
+			case "span":
+			case "text":
+				break;
 			case "br":
 				output = appendHtmlLineBreak(output, true);
 				break;