@adeildo/pi-look 5.9.2 → 5.10.0

package/src/ui/editor.ts

@@ -162,7 +162,10 @@ export class LookEditor extends CustomEditor {
 			}
 		}
 
-		return result.map((line) => truncateToWidth(line, width, ""));
+		// Every line here is drawn to the width already, and measuring is cheaper than cutting.
+		return result.map((line) =>
+			visibleWidth(line) > width ? truncateToWidth(line, width, "") : line,
+		);
 	}
 
 	#lead(budget: number): string | undefined {
@@ -186,8 +189,11 @@ function withoutSoftwareCursor(line: string): string {
 }
 
 function fill(line: string, width: number): string {
+	const cells = visibleWidth(line);
+	// Measuring is cheap, and cutting a line that already fits is not.
+	if (cells <= width) return line + " ".repeat(width - cells);
 	const clipped = truncateToWidth(line, width, "");
-	return `${clipped}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}`;
+	return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
 }
 
 export function applyCursor(tui: TUI, style: CursorStyle): void {

package/src/ui/footer.ts

@@ -8,6 +8,45 @@ import { type Screen, type SlotName, slotPieces } from "./screen.ts";
 const GAP = 3;
 /** Room reserved for the strip, so its changing width never moves the right side between lines. */
 const STRIP_ROOM = 56;
+/**
+ * How long the footer and the strip are drawn again without a reason. What they show moves with the
+ * clock, the live tokens and the context, and none of that reads differently 100 ms later, while a
+ * keystroke always redraws both. Anything that asks for a redraw drops the drawing anyway.
+ */
+const REDRAW_MS = 100;
+
+/**
+ * A drawing kept per width and per revision of the screen for a moment. The transcript draws every
+ * entry on every keystroke, and the footer and the strip were built again each time.
+ */
+class KeptDrawing {
+	#drawn: { width: number; revision: number; at: number; lines: string[] } | undefined;
+
+	constructor(
+		private readonly screen: Screen,
+		private readonly draw: (width: number) => string[],
+	) {}
+
+	render(width: number): string[] {
+		const now = Date.now();
+		const revision = this.screen.revision();
+		const drawn = this.#drawn;
+		if (
+			drawn !== undefined &&
+			drawn.width === width &&
+			drawn.revision === revision &&
+			now - drawn.at < REDRAW_MS
+		)
+			return drawn.lines;
+		const lines = this.draw(width);
+		this.#drawn = { width, revision, at: now, lines };
+		return lines;
+	}
+
+	invalidate(): void {
+		this.#drawn = undefined;
+	}
+}
 
 export function indentOf(screen: Screen): number {
 	const style = screen.frameStyle();
@@ -16,12 +55,22 @@ export function indentOf(screen: Screen): number {
 
 export class StripComponent implements Component {
 	readonly #screen: Screen;
+	readonly #kept: KeptDrawing;
 
 	constructor(screen: Screen) {
 		this.#screen = screen;
+		this.#kept = new KeptDrawing(screen, (width) => this.#draw(width));
 	}
 
 	render(width: number): string[] {
+		return this.#kept.render(width);
+	}
+
+	invalidate(): void {
+		this.#kept.invalidate();
+	}
+
+	#draw(width: number): string[] {
 		const screen = this.#screen;
 		const indent = indentOf(screen);
 		const room = width - indent * 2;
@@ -40,8 +89,6 @@ export class StripComponent implements Component {
 		}
 		return [pad(renderSlot(screen, "strip", room)), pad(renderSlot(screen, "stripRight", room))];
 	}
-
-	invalidate(): void {}
 }
 
 export interface FooterHooks {
@@ -53,15 +100,29 @@ export class FooterComponent implements Component {
 	readonly #screen: Screen;
 	readonly #hooks: FooterHooks;
 	readonly #stopWatching: () => void;
+	readonly #kept: KeptDrawing;
 
 	constructor(tui: TUI, data: ReadonlyFooterDataProvider, screen: Screen, hooks: FooterHooks) {
 		this.#screen = screen;
 		this.#hooks = hooks;
+		this.#kept = new KeptDrawing(screen, (width) => this.#draw(width));
 		hooks.attach(data, () => tui.requestRender());
-		this.#stopWatching = data.onBranchChange(() => tui.requestRender());
+		this.#stopWatching = data.onBranchChange(() => {
+			// A new branch is drawn now, not on the next keystroke.
+			screen.bump();
+			tui.requestRender();
+		});
 	}
 
 	render(width: number): string[] {
+		return this.#kept.render(width);
+	}
+
+	invalidate(): void {
+		this.#kept.invalidate();
+	}
+
+	#draw(width: number): string[] {
 		const screen = this.#screen;
 		const indent = indentOf(screen);
 		const room = width - indent * 2;
@@ -78,8 +139,6 @@ export class FooterComponent implements Component {
 		return kept.length === 0 ? [""] : kept;
 	}
 
-	invalidate(): void {}
-
 	dispose(): void {
 		this.#stopWatching();
 		this.#hooks.detach();

package/src/ui/header.ts

@@ -1,6 +1,11 @@
+import { readFileSync } from "node:fs";
+
+import { CUT, GLYPH } from "@adeildo/pi-kit";
 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 { type LastVisit, since, type StartNote, startNotes } from "../data/start-notes.ts";
 import { BOXES, border } from "../render/frame.ts";
 import { EFFORT_LEVELS, type Paint } from "../render/paint.ts";
 import { renderSegments, type SegmentId } from "../render/segments.ts";
@@ -35,6 +40,10 @@ export interface LoadedCounts {
 export interface HeaderSource {
 	style(): HeaderStyle;
 	counts(): LoadedCounts;
+	/** The last session in this folder, undefined for the first one. */
+	lastVisit(): LastVisit | undefined;
+	/** What GitHub answered for this folder, undefined while it is still being asked. */
+	github?(): GithubState | undefined;
 }
 
 interface Hint {
@@ -42,80 +51,195 @@ interface Hint {
 	does: string;
 }
 
+/** The π rises from its feet once per launch, one row of the art every step. */
+const RISE_STEP_MS = 70;
+const NOTES = 6;
+/** How long a drawing of the card stands before it is drawn again. */
+const REDRAW_MS = 1000;
+/** The harness's version, read once from the package that ships it. */
+export const HARNESS_VERSION = harnessVersion();
+
+/**
+ * The start screen: the π, the folder and the model, and under them only what changed or waits on
+ * you since the last session here. See DESIGN.md.
+ */
 export class HeaderComponent implements Component {
 	readonly #screen: Screen;
 	readonly #source: HeaderSource;
+	/** When the π started rising. Without a terminal to redraw it, it stands from the start. */
+	readonly #born: number;
 
-	constructor(screen: Screen, source: HeaderSource) {
+	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?.();
 	}
 
+	/** The last drawing, kept for a moment: the card changes rarely and pi redraws on every keystroke. */
+	#drawn:
+		| { width: number; at: number; github: GithubState | undefined; lines: string[] }
+		| undefined;
+
 	render(width: number): string[] {
-		if (width < MIN_CARD || this.#source.style() === "compact") return this.#compact(width);
-		return this.#card(width);
+		const now = Date.now();
+		const github = this.#source.github?.();
+		const risen = now - this.#born > LOGO.length * RISE_STEP_MS;
+		const drawn = this.#drawn;
+		// GitHub answers after the card is up, and that answer must not wait for the next keystroke.
+		if (risen && drawn?.width === width && drawn.github === github && now - drawn.at < REDRAW_MS)
+			return drawn.lines;
+		const notes = startNotes(
+			this.#screen.snapshot(),
+			HARNESS_VERSION,
+			this.#source.lastVisit(),
+			github,
+		);
+		const lines =
+			width < MIN_CARD || this.#source.style() === "compact"
+				? this.#compact(width, notes)
+				: this.#card(width, notes);
+		this.#drawn = { width, at: now, github, lines };
+		return lines;
 	}
 
-	invalidate(): void {}
+	invalidate(): void {
+		this.#drawn = undefined;
+	}
 
-	#card(width: number): string[] {
+	#card(width: number, notes: readonly StartNote[]): 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 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 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)),
+			this.#segments(["model", "effort"], paint),
 			"",
-			paint.italic(paint.dim("ready when you are")),
+			...this.#notes(notes, paint, last, snapshot.now),
 		];
+		const left = ["", ...this.#logo(paint), ""];
 
 		const rows = Math.max(left.length, right.length);
 		const lines = [
-			border(width, [{ text: title, priority: 1 }], [], {
-				box,
-				edge: "top",
-				paint: frame,
-				separator: " ",
-			}),
+			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)} ${frame("│")} ${pad(right[row] ?? "", rightWidth)}`
+				? `${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, [], [], { box, edge: "bottom", paint: frame, separator: " " }));
+		lines.push(
+			border(
+				width,
+				[
+					{ text: this.#closing(notes, paint, last, snapshot.now), priority: 1 },
+					...this.#hintPieces(paint),
+				],
+				[],
+				{
+					box,
+					edge: "bottom",
+					paint: frame,
+					separator: "   ",
+				},
+			),
+		);
 		lines.push("");
-		return lines.map((line) => truncateToWidth(line, width, ""));
+		// 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,
+		);
+	}
+
+	/** The art, its rows lit from the feet up while it rises. */
+	#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;
 	}
 
-	#compact(width: number): string[] {
+	#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 }[] {
+		return HINTS()
+			.slice(0, 4)
+			.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.#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, "..."));
+		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", "π"));
-		return `${glyph} ${paint.bold("pi")} ${paint.dim(`v${this.#screen.snapshot().version}`)}`;
+		const glyph = paint.bold(paint.role("brand", GLYPH.pi));
+		return `${glyph}${paint.bold("-harness")} ${paint.dim(HARNESS_VERSION)}`;
 	}
 
 	#segments(ids: readonly SegmentId[], paint: Paint): string {
@@ -127,50 +251,24 @@ export class HeaderComponent implements Component {
 		});
 		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()));
-	}
-
-	#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;
+function harnessVersion(): string {
+	try {
+		const file = new URL("../../package.json", import.meta.url);
+		return (JSON.parse(readFileSync(file, "utf8")) as { version?: string }).version ?? "";
+	} catch {
+		return "";
 	}
 }
 
 function HINTS(): Hint[] {
 	return [
+		{ key: "/", does: "commands" },
 		{ key: keyText("app.model.select") || "/model", does: "model" },
 		{ key: keyText("app.thinking.cycle") || "/thinking", does: "effort" },
-		{ key: "/", does: "commands" },
+		{ key: "alt+s", does: "settings" },
 		{ key: "!", does: "shell" },
-		{ key: keyText("app.editor.external") || "/editor", does: "external editor" },
 		{ key: "/tree", does: "session history" },
 	];
 }
@@ -192,13 +290,19 @@ export function halfBlocks(pixels: readonly string[]): string[] {
 }
 
 function pad(text: string, width: number): string {
-	const clipped = truncateToWidth(text, Math.max(0, width), "...");
-	return `${clipped}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}`;
+	const cells = visibleWidth(text);
+	// Measuring is cheap, and cutting a line that already fits is not.
+	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 clipped = truncateToWidth(text, width, "");
-	const room = Math.max(0, width - visibleWidth(clipped));
+	const cells = visibleWidth(text);
+	const fits = cells <= width;
+	// Measuring is cheap, and cutting a line that already fits is not.
+	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/src/ui/outputs.ts

@@ -0,0 +1,173 @@
+// Alt+O: a tool call's whole output in a frame you scroll, newest call first. Pi only shows a long
+// output cut in the transcript, and Ctrl+O opens every call at once; here one call opens at a time,
+// and the arrows move between calls.
+import { callTarget, CUT, frame, frameInner, FRAME_Y, GLYPH, type KeyHint } from "@adeildo/pi-kit";
+import type { SessionEntry, Theme } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	Key,
+	matchesKey,
+	truncateToWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+
+/** One call and what it printed. */
+export interface Output {
+	tool: string;
+	/** What it pointed at: the path, the command, the query. */
+	target: string;
+	lines: string[];
+	failed: boolean;
+}
+
+/** Every tool call on the branch that printed something, oldest first. */
+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 text = message.content
+			.map((part) => (part.type === "text" ? part.text : "[image]"))
+			.join("\n")
+			.trimEnd();
+		if (text === "") continue;
+		outputs.push({
+			tool: call?.tool ?? message.toolName,
+			target: call?.target ?? "",
+			lines: text.split("\n"),
+			failed: message.isError,
+		});
+	}
+	return outputs;
+}
+
+export interface OutputViewOptions {
+	theme: Theme;
+	outputs: readonly Output[];
+	rows: () => number;
+	close: () => void;
+}
+
+/** The frame: one output at a time, newest first, scrolled with the arrows and the page keys. */
+export class OutputView implements Component {
+	readonly #options: OutputViewOptions;
+	/** Which output, counted from the newest. */
+	#index = 0;
+	#scroll = 0;
+	#width = 80;
+	/** The wrapped lines of what is on screen, wrapped again only when it or the width changes. */
+	#wrapped: { output: Output; inner: number; lines: string[] } | undefined;
+	/** The last drawing of the frame, 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;
+	}
+
+	/** The mark, the tool and what it pointed at, cut so the count beside it still fits. */
+	#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;
+	}
+}