@huseynsnmz/pi-suite 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,362 @@
+import { readFileSync } from "node:fs";
+
+import { CUT, GLYPH } from "../kit/index.ts";
+import { keyText } from "@earendil-works/pi-coding-agent";
+import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+import type { GithubState } from "../data/github.ts";
+import { modeOf } from "../data/mode.ts";
+import { type LastVisit, since, type StartNote, startNotes } from "../data/start-notes.ts";
+import { BOXES, border } from "../render/frame.ts";
+import { keyLabel, SETTINGS_KEY } from "../render/keys.ts";
+import { EFFORT_LEVELS, type Paint } from "../render/paint.ts";
+import { styledText } from "../render/safe.ts";
+import { renderSegments, type SegmentId } from "../render/segments.ts";
+import type { HeaderStyle } from "../settings.ts";
+import type { StartupList } from "./pi-entries.ts";
+import type { Screen } from "./screen.ts";
+
+/** The π the start card draws, and the docs draw the project's icon from. */
+export const PIXELS = [
+	"..............",
+	".############.",
+	"##############",
+	"...##....##...",
+	"...##....##...",
+	"...##....##...",
+	"...##....##...",
+	"...##....##...",
+	"..##.....###..",
+	".##.......####",
+];
+const LOGO = halfBlocks(PIXELS);
+export const LOGO_RAMP = EFFORT_LEVELS.slice(1);
+const LOGO_COLUMN = 20;
+const MIN_RIGHT = 34;
+const MIN_CARD = 48;
+
+export interface LoadedCounts {
+	tools: number;
+	skills: number;
+	prompts: number;
+	extensions: number;
+}
+
+export interface HeaderSource {
+	style(): HeaderStyle;
+	counts(): LoadedCounts;
+	/** Undefined for the first session here. */
+	lastVisit(): LastVisit | undefined;
+	/** Undefined while it is still being asked. */
+	github?(): GithubState | undefined;
+	/** What Pi loaded, one row each. */
+	loaded?(): readonly StartupList[];
+}
+
+interface Hint {
+	key: string;
+	does: string;
+}
+
+/** Once per launch, one row of the art every step. */
+const RISE_STEP_MS = 70;
+const NOTES = 6;
+const REDRAW_MS = 1000;
+const MODE_KEY = "shift+tab";
+/** Read once from the package that ships it. */
+export const PACKAGE_VERSION = packageVersion();
+
+export class HeaderComponent implements Component {
+	readonly #screen: Screen;
+	readonly #source: HeaderSource;
+	/** Without a terminal to redraw it, it stands from the start. */
+	readonly #born: number;
+
+	constructor(screen: Screen, source: HeaderSource, tui?: { requestRender(): void }) {
+		this.#screen = screen;
+		this.#source = source;
+		this.#born = tui === undefined ? 0 : Date.now();
+		if (tui === undefined) return;
+		for (let row = 1; row <= LOGO.length; row++)
+			setTimeout(() => tui.requestRender(), row * RISE_STEP_MS).unref?.();
+	}
+
+	/** Kept for a moment: the card changes rarely and pi redraws on every keystroke. */
+	#drawn:
+		| {
+				width: number;
+				at: number;
+				github: GithubState | undefined;
+				loaded: readonly StartupList[] | undefined;
+				lines: string[];
+		  }
+		| undefined;
+
+	render(width: number): string[] {
+		const now = Date.now();
+		const github = this.#source.github?.();
+		const loaded = this.#source.loaded?.();
+		const risen = now - this.#born > LOGO.length * RISE_STEP_MS;
+		const drawn = this.#drawn;
+		// GitHub answers after the card is up, and that must not wait for the next keystroke.
+		if (
+			risen &&
+			drawn?.width === width &&
+			drawn.github === github &&
+			drawn.loaded === loaded &&
+			now - drawn.at < REDRAW_MS
+		)
+			return drawn.lines;
+		const notes = startNotes(
+			this.#screen.snapshot(),
+			PACKAGE_VERSION,
+			this.#source.lastVisit(),
+			github,
+		);
+		// A pull request's title, a workflow's name and the folder come from outside.
+		const lines = (
+			width < MIN_CARD || this.#source.style() === "compact"
+				? this.#compact(width, notes)
+				: this.#card(width, notes)
+		).map(styledText);
+		this.#drawn = { width, at: now, github, loaded, lines };
+		return lines;
+	}
+
+	invalidate(): void {
+		this.#drawn = undefined;
+	}
+
+	#card(width: number, notes: readonly StartNote[]): string[] {
+		const screen = this.#screen;
+		const paint = screen.paint();
+		const box = BOXES.rounded;
+		const frame = paint.frame;
+		const inner = width - 4;
+		const withLogo = inner - LOGO_COLUMN - 2 >= MIN_RIGHT;
+		const rightWidth = withLogo ? inner - LOGO_COLUMN - 2 : inner;
+		const snapshot = screen.snapshot();
+		const last = this.#source.lastVisit();
+
+		const name = this.#name(paint);
+		const right = [
+			"",
+			...(name === "" ? [] : [name]),
+			this.#segments(["path", "branch"], paint),
+			this.#segments(["model", "effort"], paint),
+			"",
+			...this.#notes(notes, paint, last, snapshot.now),
+			...this.#loaded(paint, rightWidth),
+		];
+		const left = ["", ...this.#logo(paint), ""];
+
+		const rows = Math.max(left.length, right.length);
+		const lines = [
+			border(
+				width,
+				[{ text: this.#title(paint), priority: 1 }],
+				[{ text: paint.dim(`pi ${snapshot.version}`), priority: 2 }],
+				{ box, edge: "top", paint: frame, separator: " " },
+			),
+		];
+		for (let row = 0; row < rows; row++) {
+			const content = withLogo
+				? `${center(left[row] ?? "", LOGO_COLUMN)}  ${pad(right[row] ?? "", rightWidth)}`
+				: pad(right[row] ?? "", rightWidth);
+			lines.push(`${frame(box.vertical)} ${content} ${frame(box.vertical)}`);
+		}
+		lines.push(
+			border(
+				width,
+				[
+					// What waits on you outlasts the key hints when the edge runs out of room.
+					{ text: this.#closing(notes, paint, last, snapshot.now), priority: 100 },
+					...this.#hintPieces(paint),
+				],
+				[],
+				{
+					box,
+					edge: "bottom",
+					paint: frame,
+					separator: "   ",
+				},
+			),
+		);
+		lines.push("");
+		// Every line is drawn to the width already, and measuring is cheaper than cutting.
+		return lines.map((line) =>
+			visibleWidth(line) > width ? truncateToWidth(line, width, "") : line,
+		);
+	}
+
+	#logo(paint: Paint): string[] {
+		const risen = Math.floor((Date.now() - this.#born) / RISE_STEP_MS) + 1;
+		return LOGO.map((row, index) =>
+			LOGO.length - index > risen
+				? " ".repeat(row.length)
+				: paint.effort(LOGO_RAMP[index] ?? "max", row),
+		);
+	}
+
+	#notes(
+		notes: readonly StartNote[],
+		paint: Paint,
+		last: LastVisit | undefined,
+		now: number,
+	): string[] {
+		if (notes.length === 0)
+			return [
+				paint.muted(
+					last === undefined
+						? "First session in this folder."
+						: `Nothing new since ${since(last.at, now)}.`,
+				),
+			];
+		const shown = notes.slice(0, NOTES).map((note) => {
+			const detail = note.detail === undefined ? "" : `  ${paint.dim(note.detail)}`;
+			return `${paint.raw(note.color, note.mark)} ${paint.text(note.text)}${detail}`;
+		});
+		if (notes.length > NOTES) shown.push(paint.dim(`and ${notes.length - NOTES} more`));
+		return shown;
+	}
+
+	#loaded(paint: Paint, width: number): string[] {
+		const lists = (this.#source.loaded?.() ?? []).filter((list) => list.items.length > 0);
+		if (lists.length === 0) return [];
+		const label = Math.max(...lists.map((list) => list.name.length)) + 2;
+		return [
+			"",
+			...lists.map(
+				({ name, items }) =>
+					`${paint.dim(name.padEnd(label))}${paint.muted(fitNames(items, width - label))}`,
+			),
+		];
+	}
+
+	#closing(
+		notes: readonly StartNote[],
+		paint: Paint,
+		last: LastVisit | undefined,
+		now: number,
+	): string {
+		if (notes.length === 0) return paint.italic(paint.dim("ready when you are"));
+		const things = `${notes.length} thing${notes.length === 1 ? "" : "s"}`;
+		return paint.raw(
+			"warning",
+			last === undefined ? things : `${things} since ${since(last.at, now)}`,
+		);
+	}
+
+	#hintPieces(paint: Paint): { text: string; priority: number }[] {
+		const snapshot = this.#screen.snapshot();
+		return hints(modeOf(snapshot.statuses) !== undefined)
+			.map((hint, index) => ({
+				text: `${paint.role("brand", hint.key)} ${paint.dim(hint.does)}`,
+				priority: 3 + index,
+			}));
+	}
+
+	#compact(width: number, notes: readonly StartNote[]): string[] {
+		const paint = this.#screen.paint();
+		const separator = paint.dim(this.#screen.separator());
+		const first = [
+			this.#title(paint),
+			this.#name(paint),
+			this.#segments(["model", "effort", "path", "branch"], paint),
+		]
+			.filter((part) => part !== "")
+			.join(separator);
+		const last = this.#source.lastVisit();
+		return [first, ...this.#notes(notes, paint, last, this.#screen.snapshot().now), ""].map(
+			(line) => {
+				const padded = ` ${line}`;
+				return visibleWidth(padded) > width ? truncateToWidth(padded, width, CUT) : padded;
+			},
+		);
+	}
+
+	#title(paint: Paint): string {
+		const glyph = paint.bold(paint.role("brand", GLYPH.pi));
+		return `${glyph}${paint.bold("-frame")} ${paint.dim(PACKAGE_VERSION)}`;
+	}
+
+	/** The name the rooms and the remote page use for this session, with pi's /name beside it. */
+	#name(paint: Paint): string {
+		const word = this.#segments(["me"], paint);
+		const { sessionName } = this.#screen.snapshot();
+		if (word === "" || sessionName === undefined || sessionName === "") return word;
+		return `${word}  ${paint.dim(sessionName)}`;
+	}
+
+	#segments(ids: readonly SegmentId[], paint: Paint): string {
+		const pieces = renderSegments(ids, {
+			snapshot: this.#screen.snapshot(),
+			glyphs: this.#screen.glyphs(),
+			paint,
+			options: this.#screen.options(),
+		});
+		return pieces.map((piece) => piece.text).join(paint.dim(this.#screen.separator()));
+	}
+}
+
+function packageVersion(): string {
+	try {
+		const file = new URL("../../package.json", import.meta.url);
+		return (JSON.parse(readFileSync(file, "utf8")) as { version?: string }).version ?? "";
+	} catch {
+		return "";
+	}
+}
+
+/** With pi-modes loaded, Shift+Tab changes the mode, whatever pi's own binding says. */
+export function hints(modes: boolean): Hint[] {
+	return [
+		{ key: "/", does: "commands" },
+		{ key: keyText("app.model.select") || "/model", does: "model" },
+		...(modes ? [{ key: MODE_KEY, does: "mode" }] : []),
+		{ key: keyLabel(SETTINGS_KEY), does: "settings" },
+	];
+}
+
+/** As many names as fit, then how many did not. */
+export function fitNames(names: readonly string[], width: number): string {
+	let fitted = names.join(", ");
+	if (visibleWidth(fitted) <= width) return fitted;
+	for (let shown = names.length - 1; shown > 0; shown--) {
+		fitted = `${names.slice(0, shown).join(", ")}, +${names.length - shown}`;
+		if (visibleWidth(fitted) <= width) return fitted;
+	}
+	return truncateToWidth(`${names[0] ?? ""}, +${names.length - 1}`, width, CUT);
+}
+
+export function halfBlocks(pixels: readonly string[]): string[] {
+	const rows: string[] = [];
+	for (let row = 0; row < pixels.length; row += 2) {
+		const top = pixels[row] ?? "";
+		const bottom = pixels[row + 1] ?? "";
+		let line = "";
+		for (let column = 0; column < Math.max(top.length, bottom.length); column++) {
+			const up = top[column] === "#";
+			const down = bottom[column] === "#";
+			line += up && down ? "█" : up ? "▀" : down ? "▄" : " ";
+		}
+		rows.push(line);
+	}
+	return rows;
+}
+
+function pad(text: string, width: number): string {
+	const cells = visibleWidth(text);
+	if (cells <= width) return text + " ".repeat(width - cells);
+	const clipped = truncateToWidth(text, width, CUT);
+	return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+
+function center(text: string, width: number): string {
+	const cells = visibleWidth(text);
+	const fits = cells <= width;
+	const clipped = fits ? text : truncateToWidth(text, width, "");
+	const room = Math.max(0, width - (fits ? cells : visibleWidth(clipped)));
+	const before = Math.floor(room / 2);
+	return `${" ".repeat(before)}${clipped}${" ".repeat(room - before)}`;
+}

package/packages/frame/src/ui/history-search.ts

@@ -0,0 +1,23 @@
+/** Ctrl+R over past prompts, newest first. It only knows the list; the editor does the keys. */
+export interface HistorySearch {
+	query: string;
+	/** What the prompt held before, for when it's cancelled. */
+	draft: string;
+	entries: readonly string[];
+	at: number;
+}
+
+export function startSearch(draft: string, entries: readonly string[]): HistorySearch {
+	return { query: "", draft, entries: [...new Set(entries)], at: -1 };
+}
+
+/** The next match from `from`, or -1. */
+export function findPrompt(search: HistorySearch, from: number): number {
+	const wanted = search.query.toLowerCase();
+	return search.entries.findIndex((entry, index) => index >= from && entry.toLowerCase().includes(wanted));
+}
+
+/** Empty query: the prompt goes back to the draft. No match: it keeps showing the last one. */
+export function shownText(search: HistorySearch): string {
+	return search.at < 0 ? search.draft : (search.entries[search.at] as string);
+}

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

@@ -0,0 +1,21 @@
+// Ctrl+C: stops the run if there is one, then asks once more before leaving.
+// Pi's own double press has half a second, too short to read a message about it.
+export const EXIT_WINDOW_MS = 2000;
+
+export interface InterruptState {
+	/** The second press before this time exits. */
+	armedUntil?: number;
+}
+
+export type InterruptAction = "abort" | "arm" | "exit";
+
+/** Stopping a run never arms the exit, so a double press to stop it cannot close Pi. */
+export function nextInterrupt(
+	state: InterruptState,
+	idle: boolean,
+	now: number,
+): { action: InterruptAction; state: InterruptState } {
+	if (!idle) return { action: "abort", state: {} };
+	if (state.armedUntil !== undefined && now < state.armedUntil) return { action: "exit", state: {} };
+	return { action: "arm", state: { armedUntil: now + EXIT_WINDOW_MS } };
+}

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

@@ -0,0 +1,170 @@
+// Alt+O: one tool call's whole output in a scrollable frame, newest first; the arrows move between calls.
+import { callTarget, CUT, frame, frameInner, FRAME_Y, GLYPH, type KeyHint } from "../kit/index.ts";
+import type { SessionEntry, Theme } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	Key,
+	matchesKey,
+	truncateToWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+
+import { tabs } from "../render/format.ts";
+import { plainText } from "../render/safe.ts";
+
+export interface Output {
+	tool: string;
+	/** The path, the command, the query. */
+	target: string;
+	lines: string[];
+	failed: boolean;
+}
+
+export function outputsOf(branch: readonly SessionEntry[]): Output[] {
+	const calls = new Map<string, { tool: string; target: string }>();
+	const outputs: Output[] = [];
+	for (const entry of branch) {
+		if (entry.type !== "message") continue;
+		const message = entry.message;
+		if (message.role === "assistant") {
+			for (const part of message.content)
+				if (part.type === "toolCall")
+					calls.set(part.id, { tool: part.name, target: callTarget(part.arguments) });
+		}
+		if (message.role !== "toolResult") continue;
+		const call = calls.get(message.toolCallId);
+		const printed = message.content
+			.map((part) => (part.type === "text" ? part.text : "[image]"))
+			.join("\n");
+		const text = tabs(plainText(printed)).trimEnd();
+		if (text === "") continue;
+		outputs.push({
+			tool: plainText(call?.tool ?? message.toolName),
+			target: plainText(call?.target ?? ""),
+			lines: text.split("\n"),
+			failed: message.isError,
+		});
+	}
+	return outputs;
+}
+
+export interface OutputViewOptions {
+	theme: Theme;
+	outputs: readonly Output[];
+	rows: () => number;
+	close: () => void;
+}
+
+export class OutputView implements Component {
+	readonly #options: OutputViewOptions;
+	/** Counted from the newest. */
+	#index = 0;
+	#scroll = 0;
+	#width = 80;
+	/** Wrapped again only when it or the width changes. */
+	#wrapped: { output: Output; inner: number; lines: string[] } | undefined;
+	/** Drawn again only when a key moved something. */
+	#drawn:
+		| { output: Output; width: number; scroll: number; page: number; lines: string[] }
+		| undefined;
+
+	constructor(options: OutputViewOptions) {
+		this.#options = options;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, Key.escape) || matchesKey(data, Key.alt("o")) || data === "q")
+			return this.#options.close();
+		if (matchesKey(data, Key.up)) return this.#scrollBy(-1);
+		if (matchesKey(data, Key.down)) return this.#scrollBy(1);
+		if (matchesKey(data, Key.pageUp)) return this.#scrollBy(-this.#page());
+		if (matchesKey(data, Key.pageDown)) return this.#scrollBy(this.#page());
+		if (matchesKey(data, Key.home)) return this.#scrollBy(-Number.MAX_SAFE_INTEGER);
+		if (matchesKey(data, Key.end)) return this.#scrollBy(Number.MAX_SAFE_INTEGER);
+		if (matchesKey(data, Key.left)) return this.#move(1);
+		if (matchesKey(data, Key.right)) return this.#move(-1);
+	}
+
+	render(width: number): string[] {
+		this.#width = width;
+		const { theme, outputs } = this.#options;
+		const output = this.#current();
+		if (output === undefined)
+			return frame(theme, width, [theme.fg("muted", "No tool output in this session yet.")], {
+				title: "Tool output",
+				keys: [["esc", "close"]],
+			});
+		const lines = this.#lines(output);
+		const page = this.#page();
+		this.#scroll = Math.min(this.#scroll, Math.max(0, lines.length - page));
+		const known = this.#drawn;
+		if (
+			known !== undefined &&
+			known.output === output &&
+			known.width === width &&
+			known.scroll === this.#scroll &&
+			known.page === page
+		)
+			return known.lines;
+
+		const shown = lines
+			.slice(this.#scroll, this.#scroll + page)
+			.map((line) => theme.fg("toolOutput", line));
+		const last = Math.min(lines.length, this.#scroll + page);
+		const keys: KeyHint[] = [
+			["↑↓", "scroll"],
+			["←→", "calls"],
+			["esc", "close"],
+		];
+		const drawn = frame(theme, width, shown, {
+			title: this.#title(output),
+			status: theme.fg("muted", `${this.#index + 1} of ${outputs.length}`),
+			keys,
+			footnote: theme.fg("muted", `lines ${this.#scroll + 1}-${last} of ${lines.length}`),
+		});
+		this.#drawn = { output, width, scroll: this.#scroll, page, lines: drawn };
+		return drawn;
+	}
+
+	invalidate(): void {
+		this.#wrapped = undefined;
+		this.#drawn = undefined;
+	}
+
+	#title(output: Output): string {
+		const { theme } = this.#options;
+		const mark = output.failed ? theme.fg("error", GLYPH.cross) : theme.fg("success", GLYPH.check);
+		const room = Math.max(8, Math.floor(this.#width / 2) - output.tool.length);
+		const target = truncateToWidth(output.target, room, CUT);
+		return `${mark} ${theme.fg("toolTitle", theme.bold(output.tool))} ${theme.fg("muted", target)}`;
+	}
+
+	#current(): Output | undefined {
+		const { outputs } = this.#options;
+		return outputs[outputs.length - 1 - this.#index];
+	}
+
+	#lines(output: Output): string[] {
+		const inner = frameInner(this.#width);
+		const known = this.#wrapped;
+		if (known !== undefined && known.output === output && known.inner === inner) return known.lines;
+		const lines = output.lines.flatMap((line) => wrapTextWithAnsi(line, inner));
+		this.#wrapped = { output, inner, lines };
+		return lines;
+	}
+
+	#page(): number {
+		return Math.max(1, this.#options.rows() - FRAME_Y);
+	}
+
+	#scrollBy(rows: number): void {
+		this.#scroll = Math.max(0, this.#scroll + rows);
+	}
+
+	#move(step: number): void {
+		const next = this.#index + step;
+		if (next < 0 || next >= this.#options.outputs.length) return;
+		this.#index = next;
+		this.#scroll = 0;
+	}
+}