@adeildo/pi-look 5.3.0 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-look",
-	"version": "5.3.0",
+	"version": "5.4.0",
 	"description": "Pi's start screen, a framed editor and the footer, redrawn around the data that matters and painted only with the theme's colours.",
 	"keywords": [
 		"pi",
@@ -38,7 +38,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@adeildo/pi-kit": "5.3.0"
+		"@adeildo/pi-kit": "5.4.0"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/index.ts

@@ -1,4 +1,12 @@
-import { accountStateOf, createApp, defineFeature, type FeatureScope } from "@adeildo/pi-kit";
+import {
+	accountStateOf,
+	createApp,
+	defineFeature,
+	drawSkillRefs,
+	type FeatureScope,
+	SKILL_REF,
+	skillNames,
+} from "@adeildo/pi-kit";
 import type {
 	ExtensionAPI,
 	ExtensionContext,
@@ -298,6 +306,14 @@ function createScreen(
 		slot: (name) => slots[name].get(scope),
 		frameStyle: () => frame.get(scope),
 		cursor: () => cursor.get(scope),
+		decorate: (line) => {
+			const theme = live.ctx?.ui.theme;
+			if (theme === undefined) return line;
+			return drawSkillRefs(line, skillNames(scope.events), (name) =>
+				theme.fg("customMessageLabel", `${SKILL_REF}${name}`),
+			);
+		},
+		skills: () => skillNames(scope.events).length > 0,
 	};
 }
 

package/src/ui/editor.ts

@@ -1,3 +1,4 @@
+import { skillQueryAt } from "@adeildo/pi-kit";
 import { CustomEditor, type KeybindingsManager } from "@earendil-works/pi-coding-agent";
 import {
 	type EditorTheme,
@@ -59,6 +60,14 @@ export class LookEditor extends CustomEditor {
 		this.tui.requestRender();
 	}
 
+	/** Pi opens its palette on `/` only at the start of a message. Further in, `/` lists the skills. */
+	override handleInput(data: string): void {
+		super.handleInput(data);
+		if (data !== "/" || this.isShowingAutocomplete() || !this.#screen.skills()) return;
+		const { line, col } = this.getCursor();
+		if (skillQueryAt(this.getLines(), line, col) !== undefined) openAutocomplete(this);
+	}
+
 	override handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
 		if (this.#inset === 0) return super.handleMouse(event);
 		return super.handleMouse({
@@ -146,7 +155,7 @@ export class LookEditor extends CustomEditor {
 				);
 				inside = false;
 			} else if (inside) {
-				const text = cursor === "block" ? line : withoutSoftwareCursor(line);
+				const text = this.#screen.decorate(cursor === "block" ? line : withoutSoftwareCursor(line));
 				result.push(`${left}${fill(text, inner)}${right}`);
 			} else {
 				result.push(`${" ".repeat(this.#inset)}${line}`);
@@ -165,6 +174,12 @@ export class LookEditor extends CustomEditor {
 	}
 }
 
+// The editor keeps the method that opens its list private. Nothing opens if a pi release renames it.
+function openAutocomplete(editor: CustomEditor): void {
+	const open: unknown = Reflect.get(editor, "tryTriggerAutocomplete");
+	if (typeof open === "function") open.call(editor);
+}
+
 /** With the terminal's cursor showing, pi's inverted cell would be a second cursor. */
 function withoutSoftwareCursor(line: string): string {
 	return line.replace(INVERTED_CELL, "$1");

package/src/ui/screen.ts

@@ -24,6 +24,10 @@ export interface Screen {
 	slot(name: SlotName): readonly SegmentId[];
 	frameStyle(): FrameStyle | "off";
 	cursor(): CursorStyle;
+	/** A line of what you type, with the skills it names colored. */
+	decorate(line: string): string;
+	/** True when a skills feature expands `/skill:` references. */
+	skills(): boolean;
 }
 
 export function slotPieces(