@huseynsnmz/pi-suite 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,272 @@
+import { skillQueryAt } from "../kit/index.ts";
+import { CustomEditor, type KeybindingsManager } from "@earendil-works/pi-coding-agent";
+import {
+	matchesKey,
+	type EditorTheme,
+	type TUI,
+	type TuiMouseEvent,
+	type TuiMouseEventResult,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+
+import type { Piece } from "../render/fit.ts";
+import { BOXES, border } from "../render/frame.ts";
+import { paintLead, promptLead } from "../render/lead.ts";
+import { SETTINGS_KEY, SETTINGS_SHORTCUT_INPUT } from "../render/keys.ts";
+import type { CursorStyle } from "../settings.ts";
+import { findPrompt, type HistorySearch, shownText, startSearch } from "./history-search.ts";
+import { type Screen, type SlotName, slotPieces } from "./screen.ts";
+
+type WorkingIndicator = Parameters<CustomEditor["setWorkingStatusIndicator"]>[0];
+
+// Pi calls the border hooks inside its render; these mark where this class draws its own lines.
+const TOP = "\u0000look:top\u0000";
+const BOTTOM = "\u0000look:bottom\u0000";
+// oxlint-disable-next-line no-control-regex -- pi's software cursor is an escape sequence
+const INVERTED_CELL = /\x1b\[7m([\s\S]*?)\x1b\[0m/;
+const MIN_WIDTH = 24;
+const SEARCH_KEY = "ctrl+r";
+const LEAD_MIN = 10;
+
+const CURSOR_SEQUENCES: Record<CursorStyle, string> = {
+	block: "\x1b[0 q",
+	bar: "\x1b[6 q",
+	underline: "\x1b[4 q",
+};
+
+export class FrameEditor extends CustomEditor {
+	readonly #screen: Screen;
+	readonly #keybindings: KeybindingsManager;
+	#indicator: WorkingIndicator;
+	#framing = false;
+	#hiddenAbove = 0;
+	#hiddenBelow = 0;
+	#inset = 0;
+	#search: HistorySearch | undefined;
+
+	constructor(
+		tui: TUI,
+		theme: EditorTheme,
+		keybindings: KeybindingsManager,
+		screen: Screen,
+		options: { autocompleteMaxVisible?: number } = {},
+	) {
+		super(tui, theme, keybindings, { ...options, paddingX: 0, embedWorkingStatus: true });
+		this.#screen = screen;
+		this.#keybindings = keybindings;
+	}
+
+	/** The frame owns the horizontal inset, so pi's padding would double it. */
+	override setPaddingX(_padding: number): void {
+		super.setPaddingX(0);
+	}
+
+	override setWorkingStatusIndicator(indicator: WorkingIndicator): void {
+		super.setWorkingStatusIndicator(indicator);
+		this.#indicator = indicator;
+		this.tui.requestRender();
+	}
+
+	/**
+	 * Pi opens and reopens its palette only at the start of a message. Further in, any edit that
+	 * leaves the cursor in a `/name` (a typed slash, a deleted or retyped letter) lists the skills.
+	 */
+	override handleInput(data: string): void {
+		if (this.#search) {
+			this.#searchKey(this.#search, data);
+			return;
+		}
+		if (matchesKey(data, SEARCH_KEY) && !this.isShowingAutocomplete()) {
+			// What Up browses, then what was typed in this folder's other sessions.
+			const own: unknown = Reflect.get(this, "history");
+			this.#search = startSearch(this.getText(), [
+				...(Array.isArray(own) ? (own as string[]) : []),
+				...this.#screen.pastPrompts(),
+			]);
+			return;
+		}
+		if (this.#keybindings.matches(data, "app.clear") && !this.isShowingAutocomplete()) {
+			this.#screen.interrupt(() => this.setText(""));
+			return;
+		}
+		if (matchesKey(data, SETTINGS_KEY)) {
+			super.handleInput(SETTINGS_SHORTCUT_INPUT);
+			return;
+		}
+		const before = this.getText();
+		super.handleInput(data);
+		if (this.isShowingAutocomplete() || !this.#screen.skills() || this.getText() === before) return;
+		const { line, col } = this.getCursor();
+		if (skillQueryAt(this.getLines(), line, col) !== undefined) openAutocomplete(this);
+	}
+
+	/** Enter sends the match, Esc goes back, and any other key keeps the match to edit. */
+	#searchKey(search: HistorySearch, data: string): void {
+		if (matchesKey(data, SEARCH_KEY)) {
+			const next = findPrompt(search, search.at + 1);
+			if (next >= 0) search.at = next;
+		} else if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c") || matchesKey(data, "ctrl+g")) {
+			this.#search = undefined;
+			this.setText(search.draft);
+			return;
+		} else if (matchesKey(data, "backspace")) {
+			search.query = search.query.slice(0, -1);
+			search.at = search.query ? findPrompt(search, 0) : -1;
+		} else if (data.length > 0 && !data.startsWith("\x1b") && data >= " " && !matchesKey(data, "enter")) {
+			search.query += data;
+			search.at = findPrompt(search, 0);
+		} else {
+			this.#search = undefined;
+			this.handleInput(data);
+			return;
+		}
+		this.setText(shownText(search));
+	}
+
+	override handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+		if (this.#inset === 0) return super.handleMouse(event);
+		return super.handleMouse({
+			...event,
+			x: event.x - this.#inset,
+			width: Math.max(1, event.width - 2 * this.#inset),
+		});
+	}
+
+	protected override renderTopBorder(width: number, hiddenLineCount: number): string {
+		if (!this.#framing) return super.renderTopBorder(width, hiddenLineCount);
+		this.#hiddenAbove = hiddenLineCount;
+		return TOP;
+	}
+
+	protected override renderBottomBorder(width: number, hiddenLineCount: number): string {
+		if (!this.#framing) return super.renderBottomBorder(width, hiddenLineCount);
+		this.#hiddenBelow = hiddenLineCount;
+		return BOTTOM;
+	}
+
+	override render(width: number): string[] {
+		const style = this.#screen.frameStyle();
+		if (style === "off" || width < MIN_WIDTH) {
+			this.#inset = 0;
+			return super.render(width);
+		}
+
+		const box = BOXES[style];
+		const glyphs = this.#screen.glyphs();
+		this.#inset = box.vertical === "" ? 0 : 2;
+		const inner = Math.max(1, width - 2 * this.#inset);
+
+		const cursor = this.#screen.cursor();
+		// Pi restores its own cursor setting after a reload, which would hide a bar cursor.
+		if (cursor !== "block" && !this.tui.getShowHardwareCursor()) applyCursor(this.tui, cursor);
+
+		this.#framing = true;
+		let lines: string[];
+		try {
+			lines = super.render(inner);
+		} finally {
+			this.#framing = false;
+		}
+
+		const paint = this.#screen.paint(
+			this.#screen.frameColor() ?? ((text) => this.borderColor(text)),
+		);
+		const snapshot = this.#screen.snapshot();
+		const separator = paint.dim(this.#screen.separator());
+		const pieces = (name: SlotName): Piece[] => slotPieces(this.#screen, name, snapshot, paint);
+		const scroll = (arrow: string, hidden: number): Piece[] =>
+			hidden > 0 ? [{ text: paint.dim(`${arrow} ${hidden} more`), priority: 1000 }] : [];
+		const options = { box, paint: paint.frame, separator, ellipsis: glyphs.ellipsis };
+
+		const left = style === "line" ? "" : `${paint.frame(box.vertical)} `;
+		const right = style === "line" ? "" : ` ${paint.frame(box.vertical)}`;
+		const result: string[] = [];
+		let inside = false;
+		let first = this.#hiddenAbove === 0;
+		const text = this.getText();
+		const lead = promptLead(text);
+
+		for (const line of lines) {
+			if (line === TOP) {
+				const lead =
+					this.#indicator === undefined ? undefined : (budget: number) => this.#lead(budget);
+				result.push(
+					border(
+						width,
+						pieces("topLeft"),
+						[...scroll("↑", this.#hiddenAbove), ...pieces("topRight")],
+						{
+							...options,
+							edge: "top",
+							lead,
+							leadMin: LEAD_MIN,
+						},
+					),
+				);
+				inside = true;
+			} else if (line === BOTTOM) {
+				result.push(
+					border(
+						width,
+						pieces("bottomLeft"),
+						[...scroll("↓", this.#hiddenBelow), ...pieces("bottomRight")],
+						{ ...options, edge: "bottom" },
+					),
+				);
+				inside = false;
+			} else if (inside) {
+				let shown = this.#screen.decorate(cursor === "block" ? line : withoutSoftwareCursor(line));
+				if (first && lead) shown = paintLead(shown, lead.length, this.#screen.promptColor(lead.kind));
+				first = false;
+				result.push(`${left}${fill(shown, inner)}${right}`);
+			} else {
+				result.push(`${" ".repeat(this.#inset)}${line}`);
+			}
+		}
+
+		if (this.#search) {
+			const { query, at } = this.#search;
+			const state = query && at < 0 ? " (no match)" : "";
+			result.push(
+				` ${paint.dim(`search history: ${query}${state}   ctrl+r older · enter send · esc cancel`)}`,
+			);
+		}
+
+		// Every line 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 {
+		const indicator = this.#indicator;
+		if (indicator === undefined) return undefined;
+		const full = indicator.renderInBorder(budget);
+		if (visibleWidth(full) > 0 && visibleWidth(full) <= budget) return full;
+		return indicator.renderSpinnerInBorder(budget);
+	}
+}
+
+/** The method is private; nothing opens if a pi release renames it. */
+function openAutocomplete(editor: CustomEditor): void {
+	const open: unknown = Reflect.get(editor, "tryTriggerAutocomplete");
+	if (typeof open === "function") open.call(editor);
+}
+
+/** With the terminal's cursor showing, pi's inverted cell would be a second cursor. */
+function withoutSoftwareCursor(line: string): string {
+	return line.replace(INVERTED_CELL, "$1");
+}
+
+function fill(line: string, width: number): string {
+	const cells = visibleWidth(line);
+	if (cells <= width) return line + " ".repeat(width - cells);
+	const clipped = truncateToWidth(line, width, "");
+	return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+
+export function applyCursor(tui: TUI, style: CursorStyle): void {
+	if (style !== "block") tui.setShowHardwareCursor(true);
+	tui.terminal.write(CURSOR_SEQUENCES[style]);
+}

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

@@ -0,0 +1,36 @@
+// `/effort`: the thinking level by name, for when Shift+Tab belongs to another extension.
+import type { FeatureScope } from "../kit/index.ts";
+
+import { EFFORT_LEVELS } from "../render/paint.ts";
+
+const EFFORTS = ["off", ...EFFORT_LEVELS] as const;
+type Effort = (typeof EFFORTS)[number];
+
+function isEffort(value: string): value is Effort {
+	return (EFFORTS as readonly string[]).includes(value);
+}
+
+export function registerEffort(scope: FeatureScope): void {
+	scope.registerCommand("effort", {
+		description: "Change how hard the model thinks",
+		getArgumentCompletions: (prefix) => {
+			const found = EFFORTS.filter((level) => level.startsWith(prefix.trim().toLowerCase()));
+			return found.length === 0 ? null : found.map((level) => ({ value: level, label: level }));
+		},
+		handler: async (args, ctx) => {
+			const asked =
+				args.trim().toLowerCase() ||
+				(await ctx.ui.select(`Effort (now ${scope.getThinkingLevel()})`, [...EFFORTS]));
+			if (asked === undefined) return;
+			if (!isEffort(asked)) {
+				ctx.ui.notify(`Unknown effort "${asked}". Use one of: ${EFFORTS.join(", ")}`, "error");
+				return;
+			}
+			scope.setThinkingLevel(asked);
+			// Pi clamps it to what the model can do.
+			const level = scope.getThinkingLevel();
+			if (level === asked) ctx.ui.notify(`Effort: ${level}`, "info");
+			else ctx.ui.notify(`This model can't use ${asked}, so effort is ${level}`, "warning");
+		},
+	});
+}

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

@@ -0,0 +1,165 @@
+import type { ReadonlyFooterDataProvider } from "@earendil-works/pi-coding-agent";
+import { type Component, type TUI, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+import { fitLine, fitRegions, type Piece } from "../render/fit.ts";
+import type { Paint } from "../render/paint.ts";
+import { type Screen, type SlotName, slotPieces } from "./screen.ts";
+
+const GAP = 3;
+/** So the strip's changing width never moves the right side. */
+const STRIP_ROOM = 56;
+/** A keystroke always redraws; nothing shown here reads differently 100 ms later. */
+const REDRAW_MS = 100;
+
+/** Kept per width and screen revision, since the transcript redraws on every keystroke. */
+class KeptDrawing {
+	#drawn: { width: number; revision: number; at: number; statuses: string; 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;
+		// A status set as a dialog closes comes right after pi's own redraw.
+		const statuses = this.screen.statusesKey();
+		if (
+			drawn !== undefined &&
+			drawn.width === width &&
+			drawn.revision === revision &&
+			drawn.statuses === statuses &&
+			now - drawn.at < REDRAW_MS
+		)
+			return drawn.lines;
+		const lines = this.draw(width);
+		this.#drawn = { width, revision, at: now, statuses, lines };
+		return lines;
+	}
+
+	invalidate(): void {
+		this.#drawn = undefined;
+	}
+}
+
+function indentOf(screen: Screen): number {
+	const style = screen.frameStyle();
+	return style === "off" || style === "line" ? 1 : 2;
+}
+
+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;
+		const pad = (line: string) => (line === "" ? "" : `${" ".repeat(indent)}${line}`);
+		const right = slotPieces(screen, "stripRight", screen.snapshot(), screen.paint());
+		// Always one line, so the editor does not jump when the first answer arrives.
+		if (right.length === 0 || room <= 0) return [pad(renderSlot(screen, "strip", room))];
+
+		const full = fitLine(right, Number.MAX_SAFE_INTEGER, fitOptions(screen, screen.paint()));
+		const beside = room - visibleWidth(full) - GAP;
+		// Beside the strip, the right side stays whole and the strip gives way.
+		if (beside >= STRIP_ROOM) {
+			const left = renderSlot(screen, "strip", beside);
+			const gap = " ".repeat(Math.max(GAP, room - visibleWidth(left) - visibleWidth(full)));
+			return [pad(`${left}${gap}${full}`)];
+		}
+		return [pad(renderSlot(screen, "strip", room)), pad(renderSlot(screen, "stripRight", room))];
+	}
+}
+
+export interface FooterHooks {
+	attach(data: ReadonlyFooterDataProvider, repaint: () => void): void;
+	detach(): void;
+}
+
+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(() => {
+			// 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;
+		const pad = " ".repeat(indent);
+		const lines: string[] = [];
+
+		if (screen.frameStyle() === "off") {
+			lines.push(spread(screen, "topLeft", "topRight", room));
+			lines.push(spread(screen, "bottomLeft", "bottomRight", room));
+		}
+		const notice = screen.notice();
+		lines.push(notice === undefined ? spread(screen, "below", "belowRight", room) : truncateToWidth(notice, room));
+
+		const kept = lines.filter((line) => line !== "").map((line) => `${pad}${line}`);
+		return kept.length === 0 ? [""] : kept;
+	}
+
+	dispose(): void {
+		this.#stopWatching();
+		this.#hooks.detach();
+	}
+}
+
+function renderSlot(screen: Screen, name: SlotName, width: number): string {
+	if (width <= 0) return "";
+	const paint = screen.paint();
+	const pieces = slotPieces(screen, name, screen.snapshot(), paint);
+	return fitLine(pieces, width, fitOptions(screen, paint));
+}
+
+function spread(screen: Screen, leftSlot: SlotName, rightSlot: SlotName, width: number): string {
+	if (width <= 0) return "";
+	const paint = screen.paint();
+	const snapshot = screen.snapshot();
+	const left: Piece[] = slotPieces(screen, leftSlot, snapshot, paint);
+	const right: Piece[] = slotPieces(screen, rightSlot, snapshot, paint);
+	const [l = "", r = ""] = fitRegions([left, right], width - GAP, fitOptions(screen, paint));
+	if (r === "") return l;
+	return `${l}${" ".repeat(Math.max(GAP, width - visibleWidth(l) - visibleWidth(r)))}${r}`;
+}
+
+function fitOptions(screen: Screen, paint: Paint) {
+	return { separator: paint.dim(screen.separator()), ellipsis: screen.glyphs().ellipsis };
+}