@adeildo/pi-look 5.3.0 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-look",
-	"version": "5.3.0",
+	"version": "5.5.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.5.0"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/data/snapshot.ts

@@ -1,6 +1,6 @@
 import { hostname } from "node:os";
 
-import type { AccountState } from "@adeildo/pi-kit";
+import type { AccountState, SessionGoal } from "@adeildo/pi-kit";
 import { VERSION, type ExtensionContext, type SessionEntry } from "@earendil-works/pi-coding-agent";
 
 import type { GitState } from "./git.ts";
@@ -49,6 +49,8 @@ export interface Snapshot {
 	run: RunView | undefined;
 	averages: Averages;
 	statuses: ReadonlyMap<string, string>;
+	/** What the session is after, when a goal feature keeps it. */
+	goal: SessionGoal | undefined;
 }
 
 export function emptySnapshot(): Snapshot {
@@ -74,6 +76,7 @@ export function emptySnapshot(): Snapshot {
 		run: undefined,
 		averages: { decode: undefined, prefill: undefined },
 		statuses: new Map(),
+		goal: undefined,
 	};
 }
 
@@ -85,6 +88,7 @@ export interface LiveInputs {
 	last: RequestView | undefined;
 	run: RunView | undefined;
 	statuses: ReadonlyMap<string, string>;
+	goal?: SessionGoal | undefined;
 }
 
 interface Derived {
@@ -134,6 +138,7 @@ export class SnapshotReader {
 					.map(([key, text]): [string, string] => [key, sanitize(text)])
 					.filter(([, text]) => text !== ""),
 			),
+			goal: live.goal,
 		};
 	}
 

package/src/data/totals.ts

@@ -1,3 +1,4 @@
+import { goalUsageOf } from "@adeildo/pi-kit";
 import type { SessionEntry } from "@earendil-works/pi-coding-agent";
 
 export interface Totals {
@@ -61,6 +62,7 @@ export function totalsOf(entries: readonly SessionEntry[]): Totals {
 			add(totals, entry.message.usage);
 		else if ((entry.type === "branch_summary" || entry.type === "compaction") && entry.usage)
 			add(totals, entry.usage);
+		else if (entry.type === "custom") addGoal(totals, goalUsageOf(entry));
 	}
 
 	return totals;
@@ -126,6 +128,14 @@ function isRecord(
 	);
 }
 
+// The goal package's model calls are not pi's, so pi does not count them. They count here.
+function addGoal(totals: Totals, usage: ReturnType<typeof goalUsageOf>): void {
+	if (usage === undefined) return;
+	totals.input += usage.input;
+	totals.output += usage.output;
+	totals.cost += usage.cost;
+}
+
 function add(totals: Totals, usage: UsageLike): void {
 	totals.input += usage.input;
 	totals.output += usage.output;

package/src/index.ts

@@ -1,4 +1,14 @@
-import { accountStateOf, createApp, defineFeature, type FeatureScope } from "@adeildo/pi-kit";
+import {
+	accountStateOf,
+	createApp,
+	currentGoal,
+	defineFeature,
+	drawSkillRefs,
+	type FeatureScope,
+	SKILL_REF,
+	type SessionGoal,
+	skillNames,
+} from "@adeildo/pi-kit";
 import type {
 	ExtensionAPI,
 	ExtensionContext,
@@ -32,6 +42,7 @@ import {
 	SECTIONS,
 	SEPARATORS,
 	strip,
+	stripRight,
 	topLeft,
 	topRight,
 } from "./settings.ts";
@@ -210,6 +221,7 @@ export const look = defineFeature({
 
 const SLOT_TITLES: Record<SlotName, string> = {
 	strip: "Above the editor, this answer",
+	stripRight: "Above the editor, on the right",
 	topLeft: "Frame, top left",
 	topRight: "Frame, top right",
 	bottomLeft: "Frame, bottom left",
@@ -258,6 +270,7 @@ function createScreen(
 ): Screen {
 	const slots: Record<SlotName, typeof strip> = {
 		strip,
+		stripRight,
 		topLeft,
 		topRight,
 		bottomLeft,
@@ -279,6 +292,7 @@ function createScreen(
 				last: telemetry.last(),
 				run: telemetry.run(),
 				statuses: live.footerData?.getExtensionStatuses() ?? new Map(),
+				...goalOf(scope),
 			});
 			live.frame = snapshot;
 			queueMicrotask(() => {
@@ -298,9 +312,21 @@ 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,
 	};
 }
 
+function goalOf(scope: FeatureScope): { goal?: SessionGoal } {
+	return { goal: currentGoal(scope.events)?.state };
+}
+
 function installEditor(
 	ctx: ExtensionContext,
 	screen: Screen,

package/src/render/glyphs.ts

@@ -7,6 +7,8 @@ export interface Glyphs {
 	branch: string;
 	host: string;
 	session: string;
+	goal: string;
+	later: string;
 	version: string;
 	model: string;
 	effort: string;
@@ -53,6 +55,8 @@ export const NERD: Glyphs = {
 	branch: "\u{e0a0}", // nf-pl-branch
 	host: "\u{f108}", // nf-fa-desktop
 	session: "\u{f02b}", // nf-fa-tag
+	goal: "\u{f04fe}", // nf-md-target
+	later: "\u{f051f}", // nf-md-timer_sand
 	version: "π",
 	model: "\u{f06a9}", // nf-md-robot
 	effort: "\u{f09d1}", // nf-md-brain
@@ -80,6 +84,8 @@ export const UNICODE: Glyphs = {
 	branch: "⎇",
 	host: "⌂",
 	session: "#",
+	goal: "▸",
+	later: "⧗",
 	version: "π",
 	model: "◆",
 	effort: "✦",
@@ -106,6 +112,8 @@ export const ASCII: Glyphs = {
 	branch: "",
 	host: "@",
 	session: "#",
+	goal: ">",
+	later: "",
 	version: "v",
 	model: "",
 	effort: "",

package/src/render/paint.ts

@@ -11,6 +11,8 @@ export type Role =
 	| "conflicted"
 	| "host"
 	| "session"
+	| "goal"
+	| "later"
 	| "version"
 	| "provider"
 	| "model"
@@ -36,6 +38,8 @@ export const ROLE_TOKENS: Record<Role, ThemeColor> = {
 	conflicted: "error",
 	host: "syntaxType",
 	session: "mdHeading",
+	goal: "accent",
+	later: "warning",
 	version: "muted",
 	provider: "syntaxKeyword",
 	model: "text",

package/src/render/segments.ts

@@ -1,4 +1,4 @@
-import type { AccountWindow } from "@adeildo/pi-kit";
+import { type AccountWindow, itemsWith, nowOf } from "@adeildo/pi-kit";
 
 import type { Snapshot } from "../data/snapshot.ts";
 import { promptOf, tokensOf, type Totals } from "../data/totals.ts";
@@ -26,6 +26,7 @@ export const SEGMENT_IDS = [
 	"branch",
 	"host",
 	"session",
+	"goal",
 	"version",
 	"clock",
 	"provider",
@@ -64,6 +65,7 @@ export function isSegmentId(value: string): value is SegmentId {
 /** Status keys a builtin segment already draws, so the statuses segment skips them. */
 const CLAIMED_BY_SEGMENT: Partial<Record<BuiltinSegment, string>> = {
 	model: "pi-providers:account",
+	goal: "pi-goal",
 };
 
 export function claimedStatuses(slots: readonly (readonly SegmentId[])[]): Set<string> {
@@ -152,6 +154,30 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 				? undefined
 				: { text: `${mark(glyphs.host, paint, "host")}${paint.role("host", snapshot.host)}` },
 	},
+	goal: {
+		priority: 30,
+		describe:
+			"the step the session is on, then ✓ how many are done and ⧗ how many wait for later, from the goal package",
+		// No cut of its own: the line cuts it only where the room really ends, and the counts go first.
+		render: ({ snapshot, glyphs, paint }) => {
+			const goal = snapshot.goal;
+			if (goal === undefined) return undefined;
+			// While the agent works, the step reads in its running form.
+			const current = nowOf(goal);
+			const running = snapshot.run?.running === true ? current?.activeForm : undefined;
+			const step = running ?? current?.text ?? goal.goal;
+			const counts = [
+				tally(itemsWith(goal, "done").length, glyphs.done, "done", paint),
+				tally(itemsWith(goal, "later").length, glyphs.later, "later", paint),
+			].filter((part) => part !== "");
+			if (step === undefined && counts.length === 0) return undefined;
+			// Between steps the line stays, so what was done and what waits do not vanish with them.
+			const words = step === undefined ? paint.dim("idle") : paint.text(step);
+			const head = `${mark(glyphs.goal, paint, "goal")}${words}`;
+			if (counts.length === 0) return { text: head };
+			return { text: `${head}  ${counts.join("  ")}`, compact: head };
+		},
+	},
 	session: {
 		priority: 45,
 		describe: "the session name, once it has one",
@@ -488,6 +514,12 @@ function mark(glyph: string, paint: Paint, role: Role): string {
 	return glyph === "" ? "" : `${paint.role(role, glyph)} `;
 }
 
+/** `✓2` in the color of what it counts, like the branch's marks. ASCII icons have no glyph, so the word goes. */
+function tally(count: number, glyph: string, role: "done" | "later", paint: Paint): string {
+	if (count === 0) return "";
+	return paint.role(role, glyph === "" ? `${count} ${role}` : `${glyph} ${count}`);
+}
+
 function counted(value: number, glyph: string, role: Role, paint: Paint): string {
 	return value > 0 ? paint.role(role, `${glyph}${value}`) : "";
 }

package/src/settings.ts

@@ -85,6 +85,12 @@ export const strip = slot(
 	"The line above the editor: how long the agent has worked, and the last call that finished.",
 	["elapsed", "last"],
 );
+export const stripRight = slot(
+	"stripRight",
+	"Answer strip, on the right",
+	"The other side of that line. When it does not fit beside the strip, it gets a line of its own under it.",
+	["goal"],
+);
 export const topLeft = slot("frame.topLeft", "Frame, top left", "After the working spinner.", [
 	"branch",
 	"session",
@@ -219,6 +225,7 @@ export const peek = setting({
 
 export const LOOK_SETTINGS = [
 	strip,
+	stripRight,
 	topLeft,
 	topRight,
 	bottomLeft,

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/footer.ts

@@ -6,6 +6,12 @@ import type { Paint } from "../render/paint.ts";
 import { type Screen, type SlotName, slotPieces } from "./screen.ts";
 
 const GAP = 3;
+/**
+ * Room kept for the strip when its right side sits beside it, about what a run shows: the time, the
+ * calls, the last call and the speed. The strip changes width every second, so whether the right
+ * side fits is measured against this, not against what the strip shows now.
+ */
+const STRIP_ROOM = 56;
 
 export function indentOf(screen: Screen): number {
 	const style = screen.frameStyle();
@@ -20,10 +26,19 @@ export class StripComponent implements Component {
 	}
 
 	render(width: number): string[] {
-		const indent = indentOf(this.#screen);
-		const line = renderSlot(this.#screen, "strip", width - indent * 2);
-		// Always one line, empty or not: a strip that appears with the first answer moves the editor.
-		return [line === "" ? "" : `${" ".repeat(indent)}${line}`];
+		const screen = this.#screen;
+		const indent = indentOf(screen);
+		const room = width - indent * 2;
+		const pad = (line: string) => (line === "" ? "" : `${" ".repeat(indent)}${line}`);
+		const right = slotPieces(screen, "stripRight", screen.snapshot(), screen.paint());
+		// Always one line for the strip, empty or not: one that appears with the first answer moves
+		// the editor.
+		if (right.length === 0 || room <= 0) return [pad(renderSlot(screen, "strip", room))];
+
+		const full = fitLine(right, Number.MAX_SAFE_INTEGER, fitOptions(screen, screen.paint()));
+		if (visibleWidth(full) + GAP + STRIP_ROOM <= room)
+			return [pad(spread(screen, "strip", "stripRight", room))];
+		return [pad(renderSlot(screen, "strip", room)), pad(renderSlot(screen, "stripRight", room))];
 	}
 
 	invalidate(): void {}

package/src/ui/screen.ts

@@ -8,6 +8,7 @@ import type { CursorStyle } from "../settings.ts";
 
 export type SlotName =
 	| "strip"
+	| "stripRight"
 	| "topLeft"
 	| "topRight"
 	| "bottomLeft"
@@ -24,6 +25,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(