@adeildo/pi-look 4.0.0

package/src/ui/header.ts

@@ -0,0 +1,212 @@
+// The start screen. A card with the π drawn in blocks, coloured along the theme's effort ramp, next to
+// what the session starts with: the model, the folder, the machine, what loaded, and the keys worth
+// knowing. Narrow terminals get two plain lines instead.
+import { keyText } from "@earendil-works/pi-coding-agent";
+import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+import { BOXES, border } from "../render/frame.ts";
+import { EFFORT_LEVELS, type Paint } from "../render/paint.ts";
+import { renderSegments, type SegmentId } from "../render/segments.ts";
+import type { HeaderStyle } from "../settings.ts";
+import type { Screen } from "./screen.ts";
+
+/** The π, one character per pixel, drawn two pixels per row with half blocks. */
+const PIXELS = [
+	"..............",
+	".############.",
+	"##############",
+	"...##....##...",
+	"...##....##...",
+	"...##....##...",
+	"...##....##...",
+	"...##....##...",
+	"..##.....###..",
+	".##.......####",
+];
+const LOGO = halfBlocks(PIXELS);
+/** One effort level per row, from cool at the top to hot at the bottom. */
+const LOGO_RAMP = EFFORT_LEVELS.slice(1);
+const LOGO_COLUMN = 20;
+/** Under this the right column is too cramped to share with the logo. */
+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;
+}
+
+interface Hint {
+	key: string;
+	does: string;
+}
+
+export class HeaderComponent implements Component {
+	readonly #screen: Screen;
+	readonly #source: HeaderSource;
+
+	constructor(screen: Screen, source: HeaderSource) {
+		this.#screen = screen;
+		this.#source = source;
+	}
+
+	render(width: number): string[] {
+		if (width < MIN_CARD || this.#source.style() === "compact") return this.#compact(width);
+		return this.#card(width);
+	}
+
+	invalidate(): void {}
+
+	#card(width: number): string[] {
+		const screen = this.#screen;
+		const paint = screen.paint();
+		const box = BOXES.rounded;
+		const frame = paint.frame;
+		const title = this.#title(paint);
+		const inner = width - 4;
+		const withLogo = inner - LOGO_COLUMN - 3 >= MIN_RIGHT;
+		const rightWidth = withLogo ? inner - LOGO_COLUMN - 3 : inner;
+
+		const right = [
+			this.#segments(["model", "effort"], paint),
+			this.#segments(["path", "branch"], paint),
+			this.#loaded(paint),
+			paint.dim("─".repeat(Math.max(0, rightWidth))),
+			...this.#hints(paint, rightWidth),
+		];
+		const left = [
+			...LOGO.map((row, index) => paint.effort(LOGO_RAMP[index] ?? "max", row)),
+			"",
+			paint.italic(paint.dim("ready when you are")),
+		];
+
+		const rows = Math.max(left.length, right.length);
+		const lines = [
+			border(width, [{ text: title, priority: 1 }], [], {
+				box,
+				edge: "top",
+				paint: frame,
+				separator: " ",
+			}),
+		];
+		for (let row = 0; row < rows; row++) {
+			const content = withLogo
+				? `${center(left[row] ?? "", LOGO_COLUMN)} ${frame("│")} ${pad(right[row] ?? "", rightWidth)}`
+				: pad(right[row] ?? "", rightWidth);
+			lines.push(`${frame(box.vertical)} ${content} ${frame(box.vertical)}`);
+		}
+		lines.push(border(width, [], [], { box, edge: "bottom", paint: frame, separator: " " }));
+		lines.push("");
+		return lines.map((line) => truncateToWidth(line, width, ""));
+	}
+
+	#compact(width: number): string[] {
+		const paint = this.#screen.paint();
+		const separator = paint.dim(this.#screen.separator());
+		const first = [this.#title(paint), this.#segments(["model", "effort", "path", "branch"], paint)]
+			.filter((part) => part !== "")
+			.join(separator);
+		const hints = HINTS()
+			.map((hint) => `${paint.role("brand", hint.key)} ${paint.dim(hint.does)}`)
+			.join(separator);
+		return [first, hints, ""].map((line) => truncateToWidth(` ${line}`, width, "…"));
+	}
+
+	#title(paint: Paint): string {
+		const glyph = paint.bold(paint.role("brand", "π"));
+		return `${glyph} ${paint.bold("pi")} ${paint.dim(`v${this.#screen.snapshot().version}`)}`;
+	}
+
+	#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()));
+	}
+
+	#loaded(paint: Paint): string {
+		const counts = this.#source.counts();
+		const parts = [
+			this.#segments(["host"], paint),
+			...[
+				[counts.tools, "tools"],
+				[counts.skills, "skills"],
+				[counts.prompts, "prompts"],
+				[counts.extensions, "extensions"],
+			]
+				.filter(([value]) => (value as number) > 0)
+				.map(([value, label]) => `${paint.text(String(value))} ${paint.dim(String(label))}`),
+		];
+		return parts.filter((part) => part !== "").join(paint.dim(this.#screen.separator()));
+	}
+
+	/** Three rows of two hints each, or one column when narrow. */
+	#hints(paint: Paint, width: number): string[] {
+		const hints = HINTS();
+		const keyWidth = Math.max(...hints.map((hint) => visibleWidth(hint.key)));
+		const cell = (hint: Hint) =>
+			`${paint.role("brand", hint.key.padEnd(keyWidth))} ${paint.dim(hint.does)}`;
+		const cellWidth = keyWidth + 1 + Math.max(...hints.map((hint) => visibleWidth(hint.does)));
+		if (width < cellWidth * 2 + 3) return hints.slice(0, 3).map(cell);
+		const rows: string[] = [];
+		for (let index = 0; index < hints.length; index += 2) {
+			const first = hints[index];
+			const second = hints[index + 1];
+			if (first === undefined) break;
+			rows.push(
+				second === undefined ? cell(first) : `${pad(cell(first), cellWidth)}   ${cell(second)}`,
+			);
+		}
+		return rows;
+	}
+}
+
+/** Read on every render, so a remapped key shows the new binding. */
+function HINTS(): Hint[] {
+	return [
+		{ key: keyText("app.model.select") || "/model", does: "model" },
+		{ key: keyText("app.thinking.cycle") || "/thinking", does: "effort" },
+		{ key: "/", does: "commands" },
+		{ key: "!", does: "shell" },
+		{ key: keyText("app.editor.external") || "/editor", does: "external editor" },
+		{ key: "/tree", does: "session history" },
+	];
+}
+
+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 clipped = truncateToWidth(text, Math.max(0, width), "…");
+	return `${clipped}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}`;
+}
+
+function center(text: string, width: number): string {
+	const clipped = truncateToWidth(text, width, "");
+	const room = Math.max(0, width - visibleWidth(clipped));
+	const before = Math.floor(room / 2);
+	return `${" ".repeat(before)}${clipped}${" ".repeat(room - before)}`;
+}

package/src/ui/screen.ts

@@ -0,0 +1,39 @@
+// What the components read. The feature implements it over the live session and the settings; tests
+// implement it over a fixed snapshot. Everything is read at render time, so a setting or theme change
+// shows on the next frame with nothing to invalidate.
+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" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "below";
+
+export interface Screen {
+	snapshot(): Snapshot;
+	glyphs(): Glyphs;
+	/** Paints with the active theme. `frame` overrides the border colour, which the editor owns. */
+	paint(frame?: (text: string) => string): Paint;
+	separator(): string;
+	options(): SegmentOptions;
+	slot(name: SlotName): readonly SegmentId[];
+	frameStyle(): FrameStyle | "off";
+	cursor(): CursorStyle;
+}
+
+/** The rendered pieces of one slot. The separator is painted here, once, for everyone. */
+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/src/ui/working.ts

@@ -0,0 +1,73 @@
+// What the spinner says. Pi's says "Working" for the whole run; this one says what is happening: the
+// newest line of the model's thinking, the tool call it is writing, the command running. It only
+// speaks through pi's public `setWorkingMessage`, so pi still owns the spinner and where it sits.
+
+export type Activity =
+	| { kind: "waiting" }
+	| { kind: "thinking"; tail: string }
+	| { kind: "writing" }
+	| { kind: "calling"; tool: string }
+	| { kind: "running"; tool: string; detail: string };
+
+/** One line, plain text: pi paints the message itself. */
+export function describe(activity: Activity): string {
+	switch (activity.kind) {
+		case "waiting":
+			return "Waiting";
+		case "thinking":
+			return activity.tail === "" ? "Thinking" : `Thinking · ${activity.tail}`;
+		case "writing":
+			return "Writing";
+		case "calling":
+			return `Calling ${activity.tool}`;
+		case "running":
+			return activity.detail === "" ? activity.tool : `${activity.tool} · ${activity.detail}`;
+	}
+}
+
+interface ContentPart {
+	type?: unknown;
+	thinking?: unknown;
+	name?: unknown;
+}
+
+/** The newest line of the thinking so far. Model output, so control characters go. */
+export function thinkingTail(content: unknown): string {
+	if (!Array.isArray(content)) return "";
+	for (let index = content.length - 1; index >= 0; index--) {
+		const part = content[index] as ContentPart | undefined;
+		if (part?.type !== "thinking" || typeof part.thinking !== "string") continue;
+		const lines = part.thinking.split("\n").map(clean).filter(Boolean);
+		return lines.at(-1) ?? "";
+	}
+	return "";
+}
+
+/** The name of the tool call being written, when the model is writing one. */
+export function callingTool(content: unknown): string | undefined {
+	if (!Array.isArray(content)) return undefined;
+	const part = content.at(-1) as ContentPart | undefined;
+	return part?.type === "toolCall" && typeof part.name === "string" ? part.name : undefined;
+}
+
+const DETAIL_KEYS = ["command", "path", "file_path", "pattern", "query", "url", "prompt"];
+
+/** The one argument that says what a tool is doing: the command, the file, the pattern. */
+export function toolDetail(args: unknown): string {
+	if (typeof args !== "object" || args === null) return "";
+	const record = args as Record<string, unknown>;
+	for (const key of DETAIL_KEYS) {
+		const value = record[key];
+		if (typeof value === "string" && value.trim() !== "") {
+			return clean(value.split("\n").find((line) => line.trim() !== "") ?? "");
+		}
+	}
+	return "";
+}
+
+// oxlint-disable-next-line no-control-regex -- escape sequences and control characters are the target
+const CONTROL = /\x1b\[[0-?]*[ -/]*[@-~]|[\x00-\x1f\x7f]/g;
+
+function clean(text: string): string {
+	return text.replace(CONTROL, " ").replace(/\s+/g, " ").trim();
+}