@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/apps/standalone-picker.ts

@@ -9,6 +9,8 @@
  */
 import type { SelectItem } from "../components/select-list";
 import { Form, SelectFormField, TextFormField, type FormFieldTheme } from "../components/form";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
+import { SelectListSheet, type SelectPickerOptions } from "../native/picker";
 import { ProcessTerminal } from "../terminal";
 import { TUI, type Component, type OverlayOptions } from "../tui";
 import { getSelectListTheme } from "../theme/tui-adapters";
@@ -64,6 +66,52 @@ export async function runStandaloneTui<T>(
 export interface StandaloneSelectOptions {
 	currentValue?: string;
 	maxVisible?: number;
+	/** How the native picker sheet names and marks its items (`noun`, `icon`). */
+	picker?: Pick<SelectPickerOptions, "noun" | "icon" | "subtitle" | "confirm">;
+}
+
+/**
+ * A standalone choice: the form's list in ANSI, and in Tern a `picker md`
+ * sheet (NATIVE_REDESIGN §10) over the pane, whatever the item count. Keys
+ * stay the form's; pointer events drive the same list.
+ */
+class StandaloneSelect implements Component {
+	readonly #form: Form;
+	readonly #sheet: SelectListSheet;
+
+	constructor(form: Form, field: SelectFormField, picker: SelectPickerOptions) {
+		this.#form = form;
+		this.#sheet = new SelectListSheet(field.selectList, picker);
+	}
+
+	get focused(): boolean {
+		return this.#form.focused;
+	}
+
+	set focused(value: boolean) {
+		this.#form.focused = value;
+	}
+
+	describe(cx: DescribeContext): NativeNode {
+		return cx.supports("picker") ? this.#sheet.describe() : this.#form.describe(cx);
+	}
+
+	handleNativeEvent(event: NativeUiEvent): void {
+		this.#sheet.handle(event);
+	}
+
+	handleInput(data: string): void {
+		this.#form.handleInput(data);
+	}
+
+	render(width: number): readonly string[] {
+		return this.#form.render(width);
+	}
+
+	invalidate(): void {
+		this.#sheet.invalidate();
+		this.#form.invalidate();
+	}
 }
 
 /**
@@ -88,7 +136,13 @@ export async function selectStandaloneItem(
 			onSubmit: value => finish(value),
 			onCancel: () => finish(null),
 		});
-		return new Form({ fields: [field], onCancel: () => finish(null) });
+		const form = new Form({ fields: [field], onCancel: () => finish(null) });
+		return new StandaloneSelect(form, field, {
+			title: title.replace(/:\s*$/, ""),
+			searchable: true,
+			...(options?.currentValue !== undefined ? { current: [options.currentValue] } : {}),
+			...options?.picker,
+		});
 	});
 }
 

package/src/autocomplete.ts

@@ -199,6 +199,12 @@ export interface AutocompleteItem {
 	description?: string;
 	/** Optional type-indicator glyph rendered in an aligned column before the label */
 	icon?: string;
+	/** Named icon for TSP terminals (`folder`, `file`, a slash-command icon name). */
+	iconName?: string;
+	/** Native detail when it differs from {@link description} (static text, parent dir). */
+	nativeDetail?: string;
+	/** Live state drawn right-aligned natively ("demo/demo", "off"). */
+	state?: string;
 	/** Dim hint text shown inline after cursor when this item is selected */
 	hint?: string;
 }
@@ -211,6 +217,8 @@ export interface SlashCommand {
 	description?: string;
 	/** Optional type-indicator glyph shown before the command name in autocomplete */
 	icon?: string;
+	/** Named icon for TSP terminals, drawn instead of the {@link icon} glyph. */
+	iconName?: string;
 	argumentHint?: string;
 	/** Whether the command consumes argument text after the command name. False means the full input stays normal prompt text once args are present. */
 	allowArgs?: boolean;
@@ -312,6 +320,23 @@ function getAutocompleteCommandDescription(cmd: CommandEntry): string {
 	return cmd.description ?? "";
 }
 
+/**
+ * Native split of a command's autocomplete text: a live description in
+ * `Label: state` form ("Model: demo/demo") becomes the static description as
+ * the detail and the state as the item's right-aligned value.
+ */
+function nativeCommandText(
+	liveDesc: string,
+	staticDesc: string,
+	hint: string | undefined,
+): Pick<AutocompleteItem, "nativeDetail" | "state"> {
+	if (!liveDesc || liveDesc === staticDesc) return {};
+	const colon = liveDesc.indexOf(": ");
+	if (colon <= 0) return {};
+	const detail = staticDesc || liveDesc.slice(0, colon);
+	return { nativeDetail: hint ? `${hint} - ${detail}` : detail, state: liveDesc.slice(colon + 2) };
+}
+
 function commandMatchesNameOrAlias(cmd: CommandEntry, commandName: string): boolean {
 	const name = getCommandName(cmd);
 	if (name === commandName) return true;
@@ -343,6 +368,7 @@ function buildSlashCommandCompletions(
 				const hint = "argumentHint" in cmd && cmd.argumentHint ? cmd.argumentHint : undefined;
 				const staticDesc = getStaticCommandDescription(cmd);
 				let fullDescMemo: string | undefined;
+				let nativeTextMemo: Pick<AutocompleteItem, "nativeDetail" | "state"> = {};
 				let fullDescComputed = false;
 				// Resolve the (possibly live) display description lazily, only once a
 				// candidate actually matches — getAutocompleteDescription reads live
@@ -351,6 +377,7 @@ function buildSlashCommandCompletions(
 					if (!fullDescComputed) {
 						const displayDesc = getAutocompleteCommandDescription(cmd);
 						fullDescMemo = hint ? (displayDesc ? `${hint} - ${displayDesc}` : hint) : displayDesc;
+						nativeTextMemo = nativeCommandText(displayDesc, staticDesc, hint);
 						fullDescComputed = true;
 					}
 					return fullDescMemo;
@@ -385,7 +412,9 @@ function buildSlashCommandCompletions(
 						score: primaryScore,
 						usage,
 						...(cmd.icon && { icon: cmd.icon }),
+						...(cmd.iconName && { iconName: cmd.iconName }),
 						...(fullDesc && { description: fullDesc }),
+						...nativeTextMemo,
 					};
 				}
 
@@ -401,7 +430,9 @@ function buildSlashCommandCompletions(
 							score: aliasScore,
 							usage,
 							...(cmd.icon && { icon: cmd.icon }),
+							...(cmd.iconName && { iconName: cmd.iconName }),
 							...(fullDesc && { description: fullDesc }),
+							...nativeTextMemo,
 						};
 					}
 				}
@@ -495,11 +526,13 @@ function collapseSkillNamespace(commands: CommandEntry[], lowerPrefix: string):
 	}
 	let skillCount = 0;
 	let skillIcon: string | undefined;
+	let skillIconName: string | undefined;
 	const rest = commands.filter(cmd => {
 		const name = getCommandName(cmd);
 		if (!name?.startsWith(SKILL_NAMESPACE)) return true;
 		skillCount += 1;
 		skillIcon ??= cmd.icon;
+		skillIconName ??= cmd.iconName;
 		return (
 			!approachesNamespace &&
 			skillBareNameBreakoutTier(lowerPrefix, name.slice(SKILL_NAMESPACE.length).toLowerCase()) > commandTier
@@ -511,6 +544,7 @@ function collapseSkillNamespace(commands: CommandEntry[], lowerPrefix: string):
 		name: SKILL_NAMESPACE,
 		description: `${skillCount} skill${skillCount === 1 ? "" : "s"}`,
 		...(skillIcon && { icon: skillIcon }),
+		...(skillIconName && { iconName: skillIconName }),
 	});
 	return rest;
 }
@@ -781,7 +815,10 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 		const isPathCompletionItem = item.value.startsWith("/") || item.value.startsWith('"');
 		if (findLeadingSlashCommandStart(prefix) !== null && leadingSlashStart !== null && !isPathCompletionItem) {
 			const slashPrefix = textBeforeCursor.slice(leadingSlashStart);
-			if (!slashPrefix.includes(" ") && !slashPrefix.slice(1).includes("/")) {
+			// A `/` past the leading one usually means an absolute path, but a
+			// namespaced skill (`skill:<ns>/<name>`) is a real command name too.
+			const isKnownCommand = this.#commands.some(cmd => commandMatchesNameOrAlias(cmd, item.value));
+			if (!slashPrefix.includes(" ") && (isKnownCommand || !slashPrefix.slice(1).includes("/"))) {
 				const beforeSlash = currentLine.slice(0, leadingSlashStart);
 				// The collapsed `/skill:` namespace row completes to the namespace
 				// itself: no trailing space, so completion continues with the
@@ -1117,9 +1154,12 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 					isQuotedPrefix,
 				});
 
+				const parentDir = path.posix.dirname(relativePath);
 				suggestions.push({
 					value,
 					label: name + (isDirectory ? "/" : ""),
+					iconName: isDirectory ? "folder" : "file",
+					...(parentDir !== "." && { nativeDetail: parentDir }),
 				});
 			}
 
@@ -1174,10 +1214,13 @@ export class CombinedAutocompleteProvider implements AutocompleteProvider {
 					isAtPrefix: true,
 					isQuotedPrefix: options.isQuotedPrefix,
 				});
+				const parentDir = path.posix.dirname(displayPath);
 				suggestions.push({
 					value,
 					label: entryName + (isDirectory ? "/" : ""),
 					description: displayPath,
+					iconName: isDirectory ? "folder" : "file",
+					nativeDetail: parentDir === "." ? "" : parentDir,
 				});
 			}
 			return suggestions;

package/src/chat/advisor-message.ts

@@ -4,7 +4,12 @@ import { visibleWidth } from "../utils";
 import type { AdvisorMessageDetails, AdvisorNote, AdvisorSeverity } from "./messages";
 import { formatBadge, replaceTabs, type ToolUIColor, wrapTextWithAnsi } from "../render/render-utils";
 import { Ellipsis, truncateToWidth } from "../render";
-import type { Theme } from "../theme";
+import { getThemeEpoch, type Theme } from "../theme";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
+import { card, span, text } from "../native/describe";
+import { type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import { plainText } from "../native/spans";
+import { Memo } from "../native/memo";
 
 const COLLAPSED_NOTES = 3;
 const NOTE_LINE_WIDTH = 110;
@@ -130,22 +135,74 @@ function renderAdvisorNote(entry: AdvisorNote, width: number, uiTheme: Theme): s
 	);
 }
 
+/** Native spans for one note: severity badge, advisor attribution, then the note text. */
+function advisorNoteSpans(entry: AdvisorNote): TspSpan[] {
+	const spans: TspSpan[] = [];
+	if (entry.severity)
+		spans.push(span(entry.severity.toUpperCase(), `${severityColor(entry.severity)} strong`), span(" "));
+	if (entry.advisor && entry.advisor !== "default") spans.push(span(`[${entry.advisor}] `, "dim"));
+	spans.push(span(plainText(entry.note), "customMessageText"));
+	return spans;
+}
+
+/** The advisor card: shared by the controlled expansion getter and native toggles. */
+export interface AdvisorMessageCard extends Component {
+	/** Transcript-wide expansion (`Ctrl+O`); clears a toggle made in the terminal. */
+	setExpanded(expanded: boolean): void;
+	handleNativeEvent(event: NativeUiEvent): void;
+}
+
 /**
  * Display-only transcript card for advisor notes injected into the primary
  * session. Styled as a distinct voice so notes never blend into thinking
  * output (whose `thinkingText` color equals `toolOutput` in most themes):
  * a bold `customMessageLabel` header tag (skill-card convention), a heavy
  * rail tinted per-note severity, and the note body on the default text color.
+ *
+ * `getExpanded` owns expansion; a native toggle overrides it for this card
+ * until the next transcript-wide change.
  */
 export function createAdvisorMessageCard(
 	details: AdvisorMessageDetails | undefined,
 	getExpanded: () => boolean,
 	uiTheme: Theme,
-): Component {
+): AdvisorMessageCard {
 	const notes = details?.notes ?? [];
 	const blockers = notes.filter(note => note.severity === "blocker").length;
 	const meta: string[] = [`${notes.length} ${notes.length === 1 ? "note" : "notes"}`];
 	if (blockers > 0) meta.push(uiTheme.fg("error", `${blockers} blocker${blockers === 1 ? "" : "s"}`));
+	let override: boolean | undefined;
+	let lastGlobal = getExpanded();
+	const expanded = (): boolean => {
+		const global = getExpanded();
+		if (global !== lastGlobal) {
+			lastGlobal = global;
+			override = undefined;
+		}
+		return override ?? global;
+	};
+	const nativeMemo = new Memo();
+	const describeCard = (isExpanded: boolean): NativeNode => {
+		const head: TspSpan[] = [
+			span(`${uiTheme.status.info} Advisor`, "customMessageLabel strong"),
+			span(` ${notes.length} ${notes.length === 1 ? "note" : "notes"}`, "dim"),
+		];
+		if (blockers > 0) head.push(span(`${uiTheme.sep.dot}${blockers} blocker${blockers === 1 ? "" : "s"}`, "error"));
+		const body = notes.map((entry, index) =>
+			text(advisorNoteSpans(entry), { wrap: "word", role: "omp.advisor.note", key: `n${index}` }),
+		);
+		return card(
+			{
+				role: "omp.advisor",
+				tone: blockers > 0 ? "error" : "info",
+				head,
+				collapsible: notes.length > COLLAPSED_NOTES,
+				collapsed: notes.length > COLLAPSED_NOTES ? !isExpanded : undefined,
+				preview: notes.length > COLLAPSED_NOTES ? "auto" : undefined,
+			},
+			body,
+		);
+	};
 
 	const shown = notes.slice(0, COLLAPSED_NOTES);
 	const disclosure = new Disclosure({
@@ -159,9 +216,21 @@ export function createAdvisorMessageCard(
 	// disclosure from the callback on every render.
 	return {
 		render(width: number): readonly string[] {
-			disclosure.setExpanded(getExpanded());
+			disclosure.setExpanded(expanded());
 			return disclosure.render(width);
 		},
+		describe(): NativeNode {
+			const isExpanded = expanded();
+			return nativeMemo.get([isExpanded, getThemeEpoch()], () => describeCard(isExpanded));
+		},
+		setExpanded(value: boolean): void {
+			lastGlobal = value;
+			override = undefined;
+		},
+		handleNativeEvent(event: NativeUiEvent): void {
+			const toggled = rootToggleExpanded(event);
+			if (toggled !== undefined) override = toggled;
+		},
 		invalidate(): void {
 			disclosure.invalidate();
 		},