@huseynsnmz/pi-suite 0.0.0-stage → 0.2.0

package/packages/frame/src/ui/pi-entries.ts

@@ -0,0 +1,298 @@
+// Pi's own transcript entries in the harness frame instead of a background. Pi has no hook for
+// drawing them, so this wraps each component's render.
+import { CHANGES_CUT, CHANGES_X, entryFrame, type EntryFrame, GLYPH } from "../kit/index.ts";
+import {
+	BashExecutionComponent,
+	BranchSummaryMessageComponent,
+	CompactionSummaryMessageComponent,
+	CustomMessageComponent,
+	SkillInvocationMessageComponent,
+	type Theme,
+	UserMessageComponent,
+} from "@earendil-works/pi-coding-agent";
+import { Container, Spacer, stripTerminalSequences, Text } from "@earendil-works/pi-tui";
+
+import { type Mode, modeColor } from "../data/mode.ts";
+import type { IconSet } from "../render/glyphs.ts";
+import { isBlank } from "./tool-frame.ts";
+
+/** Undefined leaves pi's entries as they are. `from` names the client a prompt came from. */
+export type EntryPaint = () =>
+	| {
+			theme: Theme;
+			set: IconSet;
+			you: boolean;
+			from?: (text: string) => string | undefined;
+			/** The mode a message went out in. A live message has no id yet, so it goes by its text. */
+			sentIn?: (id: string | undefined, text: string) => Mode | undefined;
+	  }
+	| undefined;
+
+const YOU: Readonly<Record<IconSet, string>> = {
+	nerd: "\u{f007}", // nf-fa-user
+	unicode: GLYPH.triangle,
+	ascii: ">",
+};
+/** The shell integration markers pi puts on your message's first and last line. */
+// oxlint-disable-next-line no-control-regex -- the markers are escape sequences
+const MARKERS = /^(?:\u001b\]133;[^\u0007]*\u0007)*/;
+// 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)? ?/;
+
+const STARTUP_LOADED = new Set(["Context", "Skills", "Prompts", "Extensions"]);
+// oxlint-disable-next-line no-control-regex -- the name is wrapped in color codes
+const STARTUP_SECTION = /^(?:\u001b\[[\d;]*m)*\[(Context|Skills|Prompts|Extensions|Skill warnings|Prompt conflicts|Extension issues|Theme conflicts)\](?:\u001b\[[\d;]*m)*\n/;
+
+type Paint = NonNullable<ReturnType<EntryPaint>>;
+
+interface Framing extends EntryFrame {
+	/** As `[compaction]`. */
+	label?: boolean;
+	rules?: boolean;
+}
+type Render = (width: number) => string[];
+
+let installed = false;
+let paint: EntryPaint = () => undefined;
+
+/** 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, fromOf(self, look), sentInOf(self, 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) => {
+		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));
+	wrap(Text, (self, look) => startupFrame(self, look));
+	liftLoadedLists();
+}
+
+const CARD_MIN_WIDTH = 48;
+
+export interface StartupList {
+	name: string;
+	items: string[];
+}
+
+let startupLists: readonly StartupList[] = [];
+let startupChanged: () => void = () => {};
+
+/** What Pi loaded, in its order, read from the list the start card takes over. */
+export function loadedLists(): readonly StartupList[] {
+	return startupLists;
+}
+
+export function onLoadedListsChange(listener: () => void): void {
+	startupChanged = listener;
+}
+
+/** `@scope/pi-modes@0.2.1:src` and `pi-modes/src` are both `pi-modes`. */
+export function extensionName(label: string): string {
+	return label
+		.replace(/^@[^/]+\//, "")
+		.replace(/(?::|\/src\b).*$/, "");
+}
+
+/** A section Pi shows as one line of names, and not yet expanded with Ctrl+O. */
+function compactSection(child: unknown): StartupList | undefined {
+	if (!(child instanceof Text) || (child as { state?: { expanded?: boolean } }).state?.expanded === true)
+		return undefined;
+	const name = STARTUP_SECTION.exec((child as unknown as { text?: string }).text ?? "")?.[1];
+	if (name === undefined || !STARTUP_LOADED.has(name)) return undefined;
+	const [, body] = stripTerminalSequences((child as unknown as { text: string }).text).split("\n");
+	const items = (body ?? "").split(",").map((item) => item.trim()).filter(Boolean);
+	return {
+		name: name.toLowerCase(),
+		items: name === "Extensions" ? [...new Set(items.map(extensionName))] : items,
+	};
+}
+
+/**
+ * The start card shows these lists, so Pi's own section and the spacer after it draw nothing.
+ * Ctrl+O and problem sections still draw here. Pi has no hook for this, so it wraps the
+ * container's render and leaves anything it doesn't recognize alone.
+ */
+function liftLoadedLists(): void {
+	const prototype = Container.prototype as unknown as { render: Render };
+	const own = prototype.render;
+	prototype.render = function render(this: Container, width: number) {
+		const first = this.children.find((child) => !(child instanceof Spacer));
+		if (paint() === undefined || width < CARD_MIN_WIDTH || !(first instanceof Text)) return own.call(this, width);
+		// Pi fills in a section's text as it draws.
+		first.render(width);
+		if (compactSection(first) === undefined) return own.call(this, width);
+		const lists: StartupList[] = [];
+		const lines: string[] = [];
+		for (const child of this.children) {
+			if (child instanceof Spacer) continue;
+			const drawn = child.render(width);
+			const list = compactSection(child);
+			if (list === undefined) lines.push(...drawn, "");
+			else lists.push(list);
+		}
+		if (JSON.stringify(lists) !== JSON.stringify(startupLists)) {
+			startupLists = lists;
+			startupChanged();
+		}
+		return lines;
+	};
+}
+
+/** Pi lists what it loaded as `[Skills]` above a plain list, and says it with `Text`. */
+function startupFrame(self: object, look: Paint): Framing | undefined {
+	const name = STARTUP_SECTION.exec((self as { text?: string }).text ?? "")?.[1];
+	if (name === undefined) return undefined;
+	const problem = !STARTUP_LOADED.has(name);
+	return {
+		top: look.theme.fg(problem ? "warning" : "muted", name.toLowerCase()),
+		color: problem ? "warning" : "borderMuted",
+		label: true,
+	};
+}
+
+/** Asked once per message: the client is known before pi draws the prompt, and never changes. */
+const sentFrom = new WeakMap<object, string | undefined>();
+
+function fromOf(self: object, look: Paint): string | undefined {
+	if (!sentFrom.has(self)) sentFrom.set(self, look.from?.((self as { text?: string }).text ?? ""));
+	return sentFrom.get(self);
+}
+
+const sentModes = new WeakMap<object, Mode | undefined>();
+
+function sentInOf(self: object, look: Paint): Mode | undefined {
+	if (sentModes.has(self)) return sentModes.get(self);
+	const { messageId, text } = self as { messageId?: string; text?: string };
+	const mode = look.sentIn?.(messageId, text ?? "");
+	// A later message with the same text may go out in another mode, so a found mode sticks to this one.
+	if (mode !== undefined || messageId !== undefined) sentModes.set(self, mode);
+	return mode;
+}
+
+/** Plan is the same color as a plain message, so the name says it too. */
+function youFrame(look: Paint, from: string | undefined, mode: Mode | undefined): Framing {
+	const color = (mode && modeColor(mode)) ?? "accent";
+	const named = mode === undefined || mode === "normal" ? "" : ` ${look.theme.fg(color, mode)}`;
+	const you = `${look.theme.fg(color, YOU[look.set])} ${look.theme.fg("muted", "you")}${named}`;
+	const top = from === undefined ? you : `${you} ${look.theme.fg("dim", `from ${from}`)}`;
+	return { top, color };
+}
+
+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 < CHANGES_X * 2 ? undefined : frameOf(this, look);
+		if (look === undefined || frame === undefined) return own.call(this, width);
+		const source = own.call(this, width - 2);
+		// Pi caches its own lines, so the frame redraws only 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 {
+	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;
+}
+
+/** Two columns narrower, with a column of padding each side. */
+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()));
+		const gap = lines.findIndex((line, index) => index > 0 && isBlank(line));
+		if (gap > 0 && gap < lines.length - 1) lines[gap] = CHANGES_CUT;
+	}
+	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 only the label goes, 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/packages/frame/src/ui/previews.ts

@@ -0,0 +1,72 @@
+// What each look setting changes, drawn under the list in Alt+S.
+import { entryFrame, GLYPH, type Json } from "../kit/index.ts";
+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",
+];
+
+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("   ")];
+}
+
+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];
+	// Drawn 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%")),
+	];
+}
+
+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/packages/frame/src/ui/queue.ts

@@ -0,0 +1,75 @@
+// Messages sent while the agent works, in a dashed frame above the editor. Pi has no hook for
+// drawing them, so this wraps its method.
+import { CUT, drawnByWidth, CHANGES_X, entryFrame } from "../kit/index.ts";
+import { InteractiveMode, type Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+/** 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;
+	// Same guard as `peers/src/cleared.ts`: fail loudly if pi renames this method.
+	if (typeof own !== "function")
+		throw new Error("pi has no InteractiveMode.updatePendingMessagesDisplay: write to the pi");
+	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 - CHANGES_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,
+		});
+	});
+}
+
+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/packages/frame/src/ui/screen.ts

@@ -0,0 +1,59 @@
+import type { Snapshot } from "../data/snapshot.ts";
+import type { Piece } from "../render/fit.ts";
+import type { FrameStyle } from "../render/frame.ts";
+import type { Glyphs } from "../render/glyphs.ts";
+import type { Paint } from "../render/paint.ts";
+import { renderSegments, type SegmentId, type SegmentOptions } from "../render/segments.ts";
+import type { CursorStyle } from "../settings.ts";
+
+export type SlotName =
+	| "strip"
+	| "stripRight"
+	| "topLeft"
+	| "topRight"
+	| "bottomLeft"
+	| "bottomRight"
+	| "below"
+	| "belowRight";
+
+export interface Screen {
+	snapshot(): Snapshot;
+	glyphs(): Glyphs;
+	paint(frame?: (text: string) => string): Paint;
+	separator(): string;
+	options(): SegmentOptions;
+	slot(name: SlotName): readonly SegmentId[];
+	frameStyle(): FrameStyle | "off";
+	/** Undefined leaves the frame in pi's own color. */
+	frameColor(): ((text: string) => string) | undefined;
+	cursor(): CursorStyle;
+	decorate(line: string): string;
+	/** The color of a `/command` or `!command` at the start of the prompt. */
+	promptColor(kind: "command" | "bash"): (text: string) => string;
+	/** What was typed in this folder's sessions, newest first. */
+	pastPrompts(): string[];
+	skills(): boolean;
+	/** Changes when another package reports something new. */
+	statusesKey(): string;
+	/** A short message for the bottom line, in place of the session's numbers. */
+	notice(): string | undefined;
+	/** Ctrl+C with the editor focused, typed text included so it can be cleared. */
+	interrupt(clearEditor: () => void): void;
+	/** Compared by anything that keeps a drawing, so a change does not wait for the next keystroke. */
+	revision(): number;
+	bump(): void;
+}
+
+export function slotPieces(
+	screen: Screen,
+	name: SlotName,
+	snapshot: Snapshot,
+	paint: Paint,
+): Piece[] {
+	return renderSegments(screen.slot(name), {
+		snapshot,
+		glyphs: screen.glyphs(),
+		paint,
+		options: screen.options(),
+	});
+}

package/packages/frame/src/ui/timings.ts

@@ -0,0 +1,48 @@
+import { AssistantMessageComponent } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+
+import type { AnsweredMessage } from "../render/timing.ts";
+
+export type TimingSource = (message: AnsweredMessage, width: number) => string | undefined;
+
+const PAD = 1;
+
+let source: TimingSource = () => undefined;
+let installed = false;
+
+interface Drawn {
+	source: readonly string[];
+	line: string;
+	width: number;
+	lines: string[];
+}
+
+/** Every message in the session draws again on each keypress, so a long one must not redo this work. */
+const drawnBefore = new WeakMap<object, Drawn>();
+
+function sameLines(a: readonly string[], b: readonly string[]): boolean {
+	return a === b || (a.length === b.length && a.every((line, index) => line === b[index]));
+}
+
+/**
+ * Pi has no hook for what follows a response, so this adds a line to its drawing. It asks on each
+ * drawing, so the line keeps up while the response is written. Calling again changes the source.
+ */
+export function showTimings(next: TimingSource): void {
+	source = next;
+	if (installed) return;
+	installed = true;
+	const prototype = AssistantMessageComponent.prototype;
+	const render = prototype.render;
+	prototype.render = function (this: AssistantMessageComponent, width: number): string[] {
+		const lines = render.call(this, width);
+		const message = (this as unknown as { lastMessage?: AnsweredMessage }).lastMessage;
+		const line = message === undefined ? undefined : source(message, Math.max(1, width - PAD));
+		if (line === undefined) return lines;
+		const known = drawnBefore.get(this);
+		if (known?.line === line && known.width === width && sameLines(known.source, lines)) return known.lines;
+		const drawn = [...lines, truncateToWidth(`${" ".repeat(PAD)}${line}`, width)];
+		drawnBefore.set(this, { source: lines, line, width, lines: drawn });
+		return drawn;
+	};
+}