@adeildo/pi-look 5.9.1 → 5.10.0

package/src/ui/pi-entries.ts

@@ -0,0 +1,185 @@
+// Pi's own entries in the transcript wear the harness's frame: your messages, compactions, branch
+// summaries, skills, `!` commands and the messages of extensions that bring no renderer. Pi sets them
+// apart with a background and blank rows; the frame does that job here, so the text keeps its colour,
+// loses the background, and sits against the edges. Pi has no hook for drawing these, so this wraps
+// the render of each component.
+import { ENTRY_CUT, ENTRY_X, entryFrame, type EntryFrame, GLYPH } from "@adeildo/pi-kit";
+import {
+	BashExecutionComponent,
+	BranchSummaryMessageComponent,
+	CompactionSummaryMessageComponent,
+	CustomMessageComponent,
+	SkillInvocationMessageComponent,
+	type Theme,
+	UserMessageComponent,
+} from "@earendil-works/pi-coding-agent";
+import { stripTerminalSequences } from "@earendil-works/pi-tui";
+
+import type { IconSet } from "../render/glyphs.ts";
+import { isBlank } from "./tool-frame.ts";
+
+/** What the frames need from the session. Undefined leaves pi's entries as they are. */
+export type EntryPaint = () => { theme: Theme; set: IconSet; you: boolean } | undefined;
+
+const YOU: Readonly<Record<IconSet, string>> = {
+	nerd: "\u{f007}", // nf-fa-user
+	unicode: GLYPH.triangle,
+	ascii: ">",
+};
+/** The shell integration markers pi puts on the first and last line of your message. */
+// oxlint-disable-next-line no-control-regex -- the markers are escape sequences
+const MARKERS = /^(?:\u001b\]133;[^\u0007]*\u0007)*/;
+/** Background colour codes, which pi paints its entries with. */
+// oxlint-disable-next-line no-control-regex -- colour codes are escape sequences
+const BACKGROUND = /\u001b\[(?:48;[25];[\d;]+|49|4[0-7]|10[0-7])m/g;
+/** Pi's bracketed label, as `[compaction]`, which the frame's top edge replaces. */
+// oxlint-disable-next-line no-control-regex -- the label is wrapped in bold codes
+const LABEL = /(\u001b\[1m)?\[[\w:.-]+\](\u001b\[22m)? ?/;
+
+type Paint = NonNullable<ReturnType<EntryPaint>>;
+
+/** A frame, and what of pi's own drawing it replaces. */
+interface Framing extends EntryFrame {
+	/** Pi's bracketed label on the first line, as `[compaction]`. */
+	label?: boolean;
+	/** The rules pi draws above and below a `!` command. */
+	rules?: boolean;
+}
+type Render = (width: number) => string[];
+
+let installed = false;
+let paint: EntryPaint = () => undefined;
+
+/** Frames pi's entries from now on. Calling it again only changes where the paint comes from. */
+export function framePiEntries(source: EntryPaint): void {
+	paint = source;
+	if (installed) return;
+	installed = true;
+	wrap(UserMessageComponent, (_self, look) => (look.you ? youFrame(look) : undefined));
+	wrap(CompactionSummaryMessageComponent, (_self, look) => pi(look, "compacted"));
+	wrap(BranchSummaryMessageComponent, (_self, look) => pi(look, "branch summary"));
+	wrap(SkillInvocationMessageComponent, (_self, look) => ({
+		top: look.theme.fg("muted", "skill"),
+		color: "borderMuted",
+		label: true,
+	}));
+	wrap(CustomMessageComponent, (self, look) => {
+		// A renderer of an extension draws its own message.
+		const own = self as unknown as { customComponent?: unknown; message: { customType: string } };
+		if (own.customComponent !== undefined) return undefined;
+		const top = look.theme.fg("muted", own.message.customType);
+		return { top, color: "borderMuted", label: true };
+	});
+	wrap(BashExecutionComponent, (self, look) => shellFrame(self, look));
+}
+
+function youFrame(look: Paint): Framing {
+	const top = `${look.theme.fg("accent", YOU[look.set])} ${look.theme.fg("muted", "you")}`;
+	return { top, color: "accent" };
+}
+
+function pi(look: Paint, what: string): Framing {
+	return { top: look.theme.fg("muted", `${GLYPH.pi} ${what}`), color: "borderMuted", label: true };
+}
+
+interface Shell {
+	status?: "running" | "complete" | "cancelled" | "error";
+	exitCode?: number;
+	colorKey?: "bashMode" | "dim";
+}
+
+function shellFrame(self: object, look: Paint): Framing {
+	const { status, exitCode, colorKey = "bashMode" } = self as Shell;
+	const { theme } = look;
+	const top = `${theme.fg(colorKey, "!")} ${theme.fg("muted", "shell")}`;
+	return { top, bottom: shellPhase(theme, status, exitCode), color: colorKey, rules: true };
+}
+
+function shellPhase(theme: Theme, status: Shell["status"], exitCode: number | undefined): string {
+	switch (status) {
+		case "running":
+			return theme.fg("muted", "running");
+		case "cancelled":
+			return theme.fg("warning", "cancelled");
+		case "error":
+			return theme.fg("error", `${GLYPH.cross} exit ${exitCode ?? "?"}`);
+		default:
+			return theme.fg("success", `${GLYPH.check} done`);
+	}
+}
+
+function wrap(
+	component: { prototype: object },
+	frameOf: (self: object, look: Paint) => Framing | undefined,
+): void {
+	const prototype = component.prototype as { render: Render };
+	const own = prototype.render;
+	prototype.render = function render(this: object, width: number) {
+		const look = paint();
+		const frame = look === undefined || width < ENTRY_X * 2 ? undefined : frameOf(this, look);
+		if (look === undefined || frame === undefined) return own.call(this, width);
+		const source = own.call(this, width - 2);
+		// The transcript draws every entry on every keystroke. Pi caches its own lines, so the frame
+		// is only drawn again when they, the width or the paint change.
+		const known = drawnBefore.get(this);
+		const key = `${width}\u0000${frame.top}\u0000${frame.bottom}\u0000${frame.color}`;
+		if (known?.key === key && known.theme === look.theme && sameLines(known.source, source))
+			return known.lines;
+		const lines = framed(source, width, look.theme, frame);
+		drawnBefore.set(this, { key, theme: look.theme, source, lines });
+		return lines;
+	};
+}
+
+interface Drawn {
+	/** The width and the frame's labels. */
+	key: string;
+	theme: Theme;
+	source: readonly string[];
+	lines: string[];
+}
+
+const drawnBefore = new WeakMap<object, Drawn>();
+
+function sameLines(a: readonly string[], b: readonly string[]): boolean {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+	for (let index = 0; index < a.length; index++) if (a[index] !== b[index]) return false;
+	return true;
+}
+
+/** Pi's lines, drawn two columns narrower with a column of padding each side, in the frame. */
+export function framed(
+	body: readonly string[],
+	width: number,
+	theme: Theme,
+	framing: Framing,
+): string[] {
+	const { label, rules, ...frame } = framing;
+	const first = body[0]?.match(MARKERS)?.[0] ?? "";
+	const last = body.at(-1)?.match(MARKERS)?.[0] ?? "";
+	let lines = body.map((line) => line.replace(MARKERS, "").replace(BACKGROUND, ""));
+	if (rules) {
+		lines = lines.filter((line) => !/^\u2500+$/.test(stripTerminalSequences(line).trim()));
+		// The blank line between a command and what it printed.
+		const gap = lines.findIndex((line, index) => index > 0 && isBlank(line));
+		if (gap > 0 && gap < lines.length - 1) lines[gap] = ENTRY_CUT;
+	}
+	// The blank rows pi pads its entries with.
+	const trim = () => {
+		while (lines.length > 1 && isBlank(lines[0] ?? "")) lines.shift();
+		while (lines.length > 1 && isBlank(lines.at(-1) ?? "")) lines.pop();
+	};
+	trim();
+	if (label && lines[0] !== undefined) {
+		// Alone on its line it goes with the line, otherwise it leaves the rest, as `[skill] name`.
+		const alone = /^\[[\w:.-]+\]$/.test(stripTerminalSequences(lines[0]).trim());
+		if (alone) lines.shift();
+		else lines[0] = lines[0].replace(LABEL, "$2");
+		trim();
+	}
+	const drawn = entryFrame(lines, width, theme, { ...frame, pad: 0 });
+	drawn[0] = first + drawn[0];
+	drawn[drawn.length - 1] = last + drawn.at(-1);
+	return drawn;
+}

package/src/ui/previews.ts

@@ -0,0 +1,76 @@
+// What each look setting changes, drawn under the list in Alt+S while it or one of its values is
+// selected: the marks of the icon set, the editor in the frame style, your message framed or not.
+import { entryFrame, GLYPH, type Json } from "@adeildo/pi-kit";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+import { BOXES, border, type FrameStyle } from "../render/frame.ts";
+import { type IconMode, resolveIcons } from "../render/glyphs.ts";
+import { stateMark, toolIcon } from "../render/tools.ts";
+
+const WIDTH = 56;
+const TOOLS = [
+	"bash",
+	"read",
+	"edit",
+	"grep",
+	"web_fetch",
+	"ask_questions",
+	"peers",
+	"memory_write",
+];
+
+/** The tool marks and the phase marks of an icon set. */
+export function iconsPreview(value: Json, theme: Theme): string[] {
+	const set = resolveIcons(value as IconMode).set;
+	const tools = TOOLS.map(
+		(tool) => `${theme.fg("toolTitle", toolIcon(tool, set))} ${theme.fg("muted", tool)}`,
+	);
+	const phases = (["writing", "waiting", "running", "done", "failed"] as const).map(
+		(phase) => `${theme.fg("accent", stateMark(phase, set, 0))} ${theme.fg("muted", phase)}`,
+	);
+	return [tools.slice(0, 4).join("   "), tools.slice(4).join("   "), "", phases.join("   ")];
+}
+
+/** The editor, in the frame's lines. */
+export function framePreview(value: Json, theme: Theme, width: number): string[] {
+	const style = value as FrameStyle | "off";
+	const room = Math.min(WIDTH, width);
+	const line = (color: "borderAccent", text: string) => theme.fg(color, text);
+	if (style === "off")
+		return [
+			theme.fg("dim", "pi's editor, as pi draws it, with the edges' information in the footer"),
+		];
+	const box = BOXES[style];
+	// The preview draws its edges with the frame's own border, so it cannot drift from the editor.
+	const edge = (which: "top" | "bottom", label: string, rest: string) =>
+		border(room, [{ text: label, priority: 1 }], [{ text: rest, priority: 2 }], {
+			box,
+			edge: which,
+			paint: (text) => line("borderAccent", text),
+			separator: " ",
+		});
+	const side = style === "line" ? " " : line("borderAccent", box.vertical);
+	return [
+		edge("top", theme.fg("warning", "main"), theme.fg("muted", "~/project")),
+		`${side} ${theme.fg("accent", GLYPH.cursor)}${" ".repeat(Math.max(0, room - 4))}${side}`,
+		edge("bottom", theme.fg("text", "Opus 5.5"), theme.fg("muted", "ctx 34%")),
+	];
+}
+
+/** Your message, framed or in pi's block. */
+export function userFramePreview(value: Json, theme: Theme, width: number): string[] {
+	const room = Math.min(WIDTH, width);
+	const text = theme.fg("text", "commit with a semantic message and push");
+	if (value === true)
+		return entryFrame([text], room, theme, {
+			top: `${theme.fg("accent", GLYPH.triangle)} ${theme.fg("muted", "you")}`,
+			color: "accent",
+		});
+	const blank = theme.bg("userMessageBg", " ".repeat(room));
+	const body = theme.bg(
+		"userMessageBg",
+		` ${text}${" ".repeat(Math.max(0, room - 1 - visibleWidth(text)))}`,
+	);
+	return [blank, body, blank];
+}

package/src/ui/queue.ts

@@ -0,0 +1,75 @@
+// The messages you send while the agent works wait in a dashed frame above the editor: dashed
+// because they have not happened yet. Each says when it goes in, `steer` between the agent's calls
+// and `next` after its run, and the bottom edge names the key that takes them back to the editor.
+// Pi lists them as plain grey lines and has no hook for drawing them, so this wraps its method.
+import { CUT, drawnByWidth, ENTRY_X, entryFrame } from "@adeildo/pi-kit";
+import { InteractiveMode, type Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+/** The theme to draw with. Undefined leaves pi's list as it is. */
+export type QueuePaint = () => Theme | undefined;
+
+interface Queued {
+	steering: readonly string[];
+	followUp: readonly string[];
+}
+
+interface Host {
+	pendingMessagesContainer: { clear(): void; addChild(component: Component): void };
+	getAllQueuedMessages(): Queued;
+	getAppKeyDisplay(action: string): string;
+}
+
+let installed = false;
+let paint: QueuePaint = () => undefined;
+
+export function frameQueue(source: QueuePaint): void {
+	paint = source;
+	if (installed) return;
+	installed = true;
+	const prototype = InteractiveMode.prototype as unknown as {
+		updatePendingMessagesDisplay(): void;
+	};
+	const own = prototype.updatePendingMessagesDisplay;
+	prototype.updatePendingMessagesDisplay = function update(this: Host) {
+		const theme = paint();
+		if (theme === undefined) return own.call(this);
+		const queued = this.getAllQueuedMessages();
+		this.pendingMessagesContainer.clear();
+		if (queued.steering.length + queued.followUp.length === 0) return;
+		const key = this.getAppKeyDisplay("app.message.dequeue");
+		this.pendingMessagesContainer.addChild(queueBlock(queued, key, theme));
+	};
+}
+
+const MODES = [
+	["steer", "steering"],
+	["next", "followUp"],
+] as const;
+const LABEL = Math.max(...MODES.map(([label]) => label.length));
+
+export function queueBlock(queued: Queued, key: string, theme: Theme): Component {
+	return drawnByWidth((width) => {
+		const room = Math.max(1, width - ENTRY_X - LABEL - 2);
+		const rows = MODES.flatMap(([label, mode]) =>
+			queued[mode].map((text) => {
+				const color = label === "steer" ? "accent" : "muted";
+				return `${theme.fg(color, label.padEnd(LABEL))}  ${theme.fg("text", oneLine(text, room))}`;
+			}),
+		);
+		return entryFrame(rows, width, theme, {
+			top: theme.fg("dim", "queued"),
+			bottom: `${theme.fg("muted", key)} ${theme.fg("dim", "to edit")}`,
+			color: "borderMuted",
+			dashed: true,
+		});
+	});
+}
+
+/** The first line, cut to the room, with a mark when there is more. */
+function oneLine(text: string, room: number): string {
+	const lines = text.trim().split("\n");
+	const first = lines[0] ?? "";
+	if (lines.length === 1 && visibleWidth(first) <= room) return first;
+	return `${truncateToWidth(first, Math.max(1, room - CUT.length), "")}${CUT}`;
+}

package/src/ui/screen.ts

@@ -29,6 +29,14 @@ export interface Screen {
 	decorate(line: string): string;
 	/** True when a skills feature expands `/skill:` references. */
 	skills(): boolean;
+	/**
+	 * How many times the screen was told that what it draws changed. Something that keeps a drawing
+	 * for a moment compares this: a branch, a model or a probe that answered must not wait for the
+	 * next keystroke to show up.
+	 */
+	revision(): number;
+	/** Records that something the screen draws changed, such as an event or a probe that answered. */
+	bump(): void;
 }
 
 export function slotPieces(