@huseynsnmz/pi-suite 0.1.0 → 0.2.0

package/packages/frame/src/kit/testing.ts

@@ -0,0 +1,260 @@
+// Fakes for testing features without pi. Two fakes on one bus act like two extensions in one process.
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+import {
+	createEventBus,
+	createSyntheticSourceInfo,
+	type EntryRenderer,
+	type MessageRenderer,
+	type EventBus,
+	type ExtensionAPI,
+	type ExtensionContext,
+	type RegisteredCommand,
+	type ToolDefinition,
+	type ToolInfo,
+	type ToolRendererResolver,
+} from "@earendil-works/pi-coding-agent";
+
+import type { FeatureScope, ScreenEntry, ScreenGroup } from "./app/feature.ts";
+import { darkTheme } from "./dark-theme.ts";
+import { SettingsStore } from "./settings/store.ts";
+
+export function toolInfo(name: string, extra: Partial<ToolInfo> = {}): ToolInfo {
+	return {
+		name,
+		description: "",
+		parameters: { type: "object" } as ToolInfo["parameters"],
+		exposure: "direct",
+		sourceInfo: createSyntheticSourceInfo(`<test:${name}>`, { source: "test" }),
+		...extra,
+	};
+}
+
+export type FakeHandler = (event: unknown, ctx: ExtensionContext) => unknown;
+type CommandOptions = Omit<RegisteredCommand, "name" | "sourceInfo">;
+
+export interface FakePi {
+	pi: ExtensionAPI;
+	handlers: Map<string, FakeHandler[]>;
+	commands: Map<string, CommandOptions>;
+	shortcuts: string[];
+	shortcutHandlers: Map<string, (ctx: ExtensionContext) => unknown>;
+	tools: ToolDefinition[];
+	allTools: ToolInfo[];
+	providers: { name: string; config: unknown }[];
+	renderers: Map<string, EntryRenderer>;
+	messageRenderers: Map<string, MessageRenderer>;
+	toolRenderers: ToolRendererResolver[];
+	entries: { customType: string; data: unknown }[];
+	messages: unknown[];
+	userMessages: unknown[];
+	sessionName: string | undefined;
+	thinkingLevel: "minimal" | "low" | "medium" | "high" | "xhigh" | "max" | undefined;
+	model: { provider: string; id: string } | undefined;
+	/** In order, returning what each handler returned. */
+	fire(name: string, event: unknown, ctx: ExtensionContext): Promise<unknown[]>;
+	count(name: string): number;
+}
+
+export function fakePi(bus: EventBus = createEventBus()): FakePi {
+	const handlers = new Map<string, FakeHandler[]>();
+	const commands = new Map<string, CommandOptions>();
+	const fake: FakePi = {
+		pi: undefined as unknown as ExtensionAPI,
+		handlers,
+		commands,
+		shortcuts: [],
+		shortcutHandlers: new Map(),
+		tools: [],
+		allTools: [],
+		providers: [],
+		renderers: new Map(),
+		messageRenderers: new Map(),
+		toolRenderers: [],
+		entries: [],
+		messages: [],
+		userMessages: [],
+		sessionName: undefined,
+		thinkingLevel: undefined,
+		model: undefined,
+		async fire(name, event, ctx) {
+			const results: unknown[] = [];
+			for (const handler of handlers.get(name) ?? []) {
+				// oxlint-disable-next-line no-await-in-loop -- pi runs handlers one at a time, in order
+				results.push(await handler(event, ctx));
+			}
+			return results;
+		},
+		count: (name) => handlers.get(name)?.length ?? 0,
+	};
+
+	fake.pi = {
+		on(name: string, handler: FakeHandler) {
+			handlers.set(name, [...(handlers.get(name) ?? []), handler]);
+			return () => {};
+		},
+		events: bus,
+		registerCommand: (name: string, options: CommandOptions) => void commands.set(name, options),
+		registerShortcut: (
+			shortcut: unknown,
+			options: { handler: (ctx: ExtensionContext) => unknown },
+		) => {
+			fake.shortcuts.push(String(shortcut));
+			fake.shortcutHandlers.set(String(shortcut), options.handler);
+		},
+		registerTool: (tool: ToolDefinition) => void fake.tools.push(tool),
+		getAllTools: () => fake.allTools,
+		getCommands: () => [],
+		registerProvider: (name: unknown, config?: unknown) =>
+			void fake.providers.push({ name: String(name), config }),
+		registerEntryRenderer: (customType: string, renderer: EntryRenderer) =>
+			void fake.renderers.set(customType, renderer),
+		registerMessageRenderer: (customType: string, renderer: MessageRenderer) =>
+			void fake.messageRenderers.set(customType, renderer),
+		registerToolRenderer: (resolver: ToolRendererResolver) =>
+			void fake.toolRenderers.push(resolver),
+		appendEntry: (customType: string, data?: unknown) =>
+			void fake.entries.push({ customType, data }),
+		sendMessage: (message: unknown) => void fake.messages.push(message),
+		sendUserMessage: (content: unknown) => void fake.userMessages.push(content),
+		setSessionName: (name: string) => void (fake.sessionName = name),
+		getSessionName: () => fake.sessionName,
+		setThinkingLevel: (level: string) =>
+			void (fake.thinkingLevel = level as typeof fake.thinkingLevel),
+		setModel: (model: { provider: string; id: string }) => {
+			fake.model = { provider: model.provider, id: model.id };
+			return Promise.resolve(true);
+		},
+	} as unknown as ExtensionAPI;
+
+	return fake;
+}
+
+export interface FakeScopeOptions {
+	id?: string;
+	pi?: FakePi;
+	notes?: string[];
+	settingsPath?: string;
+	screen?: ScreenEntry[];
+	screenGroups?: ScreenGroup[];
+}
+
+/** Session hooks run on `fire("session_start")` and `fire("session_shutdown")`. */
+export function fakeScope(options: FakeScopeOptions = {}): FeatureScope {
+	const fake = options.pi ?? fakePi();
+	const notes = options.notes ?? [];
+	const rows = options.screen ?? [];
+	const groups = options.screenGroups ?? [];
+	const settings = new SettingsStore(
+		options.settingsPath ?? join(tmpdir(), `pi-kit-scope-${process.pid}-${Math.random()}.json`),
+	);
+
+	return {
+		...fake.pi,
+		id: options.id ?? "test",
+		settings,
+		on: fake.pi.on,
+		registerCommand: (name, command) => fake.pi.registerCommand(name, command),
+		onSessionStart: (run) => void fake.pi.on("session_start", (_event, ctx) => run(ctx)),
+		onShutdown: (run) => void fake.pi.on("session_shutdown", () => run()),
+		defer: (run, ms = 0) => void setTimeout(run, ms),
+		warn: (message) => void notes.push(message),
+		has: () => false,
+		screen: {
+			value: (row) => void rows.push({ kind: "value", ...row }),
+			action: (row) => void rows.push({ kind: "action", ...row }),
+			info: (row) => void rows.push({ kind: "info", ...row }),
+			rows: (provider) => void groups.push(provider),
+		},
+	};
+}
+
+/** So a test can fire a key at the terminal. */
+export const keystrokes: ((data: string) => unknown)[] = [];
+
+export function fakeContext(
+	notes: string[] = [],
+	hasUI = true,
+	extra: Record<string, unknown> = {},
+): ExtensionContext {
+	return {
+		hasUI,
+		mode: hasUI ? "tui" : "print",
+		cwd: "/nonexistent",
+		isProjectTrusted: () => false,
+		...extra,
+		ui: {
+			notify: (message: string) => notes.push(message),
+			statuses: new Map<string, string | undefined>(),
+			setStatus(key: string, text: string | undefined) {
+				this.statuses.set(key, text);
+			},
+			onTerminalInput: (handler: (data: string) => unknown) => {
+				keystrokes.push(handler);
+				return () => {
+					const at = keystrokes.indexOf(handler);
+					if (at !== -1) keystrokes.splice(at, 1);
+				};
+			},
+			...(extra.ui as Record<string, unknown> | undefined),
+		},
+	} as unknown as ExtensionContext;
+}
+
+export interface FakeTerminal {
+	press(...keys: string[]): void;
+	draw(key: string, width?: number): string[] | undefined;
+	text: string;
+	/** So a test can tell one dialog from two. */
+	built: number;
+}
+
+export function fakeTerminal(ctx: ExtensionContext): FakeTerminal {
+	const ui = ctx.ui as unknown as Record<string, unknown>;
+	const listen = ui.onTerminalInput as (handler: (data: string) => unknown) => () => void;
+	const listeners: ((data: string) => unknown)[] = [];
+	const widgets = new Map<
+		string,
+		{ render(width: number): string[]; handleInput(data: string): void }
+	>();
+	const terminal: FakeTerminal = {
+		text: "",
+		built: 0,
+		press: (...keys) => {
+			for (const key of keys) {
+				for (const listener of listeners.slice()) {
+					const taken = listener(key) as { consume?: boolean } | undefined;
+					if (taken?.consume === true) break;
+				}
+			}
+		},
+		draw: (key, width = 100) => widgets.get(key)?.render(width),
+	};
+	ui.onTerminalInput = (handler: (data: string) => unknown) => {
+		listeners.push(handler);
+		const stop = listen(handler);
+		return () => {
+			stop();
+			const at = listeners.indexOf(handler);
+			if (at !== -1) listeners.splice(at, 1);
+		};
+	};
+	ui.setWidget = (key: string, content: unknown) => {
+		if (content === undefined) {
+			widgets.delete(key);
+			return;
+		}
+		const make = content as (
+			tui: unknown,
+			theme: unknown,
+		) => { render(width: number): string[]; handleInput(data: string): void };
+		terminal.built += 1;
+		widgets.set(key, make({ terminal: { rows: 40 }, requestRender: () => {} }, darkTheme()));
+	};
+	ui.getEditorText = () => terminal.text;
+	ui.setEditorText = (text: string) => {
+		terminal.text = text;
+	};
+	return terminal;
+}

package/packages/frame/src/kit/totals.ts

@@ -0,0 +1,72 @@
+// One sum for the terminal's footer and the phone's list, so the two cannot disagree.
+import type { SessionEntry } from "@earendil-works/pi-coding-agent";
+
+import { tasksUsageOf } from "./legacy-tasks.ts";
+
+export interface Totals {
+	input: number;
+	output: number;
+	cacheRead: number;
+	cacheWrite: number;
+	cost: number;
+}
+
+export interface UsageLike {
+	input: number;
+	output: number;
+	cacheRead: number;
+	cacheWrite: number;
+	cost: { total: number };
+}
+
+export function emptyTotals(): Totals {
+	return { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0 };
+}
+
+export function promptOf(totals: Totals): number {
+	return totals.input + totals.cacheRead + totals.cacheWrite;
+}
+
+export function tokensOf(totals: Totals): number {
+	return promptOf(totals) + totals.output;
+}
+
+export function usageTotals(usage: UsageLike): Totals {
+	const totals = emptyTotals();
+	add(totals, usage);
+	return totals;
+}
+
+/** Every message pi recorded, including what a compaction ate. */
+export function totalsOf(entries: readonly SessionEntry[]): Totals {
+	const totals = emptyTotals();
+
+	for (const entry of entries) {
+		if (entry.type === "usage") add(totals, entry.usage);
+		else if (entry.type === "message" && entry.message.role === "assistant")
+			add(totals, entry.message.usage);
+		else if (entry.type === "message" && entry.message.role === "toolResult" && entry.message.usage)
+			add(totals, entry.message.usage);
+		else if ((entry.type === "branch_summary" || entry.type === "compaction") && entry.usage)
+			add(totals, entry.usage);
+		else if (entry.type === "custom") addTasks(totals, tasksUsageOf(entry));
+	}
+
+	return totals;
+}
+
+function add(totals: Totals, usage: UsageLike): void {
+	totals.input += usage.input;
+	totals.output += usage.output;
+	totals.cacheRead += usage.cacheRead;
+	totals.cacheWrite += usage.cacheWrite;
+	totals.cost += usage.cost.total;
+}
+
+/** Pi does not count the removed tasks' model calls; they count here. */
+function addTasks(totals: Totals, usage: ReturnType<typeof tasksUsageOf>): void {
+	if (usage === undefined) return;
+	totals.input += usage.input;
+	totals.output += usage.output;
+	totals.cost += usage.cost;
+}

package/packages/frame/src/kit/ui/entry.ts

@@ -0,0 +1,75 @@
+// The frame a transcript entry wears. See DESIGN.md.
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+import { CUT, LINE } from "./glyphs.ts";
+
+/** Both sides and a space inside each. */
+export const CHANGES_X = 4;
+/** Drawn as a rule across, as between a call and what it printed. */
+export const CHANGES_CUT = "\u0000cut";
+
+export interface EntryFrame {
+	top?: string;
+	topRight?: string;
+	bottom?: string;
+	bottomRight?: string;
+	color?: ThemeColor;
+	/** Something that has not happened yet, such as a message waiting to be sent. */
+	dashed?: boolean;
+	/** Pi's own blocks bring their own column, so they take 0. */
+	pad?: 0 | 1;
+}
+
+const SOLID = { h: LINE.h, v: LINE.v };
+const DASHED = { h: LINE.hDashed, v: LINE.vDashed };
+
+/** `CHANGES_X` columns narrower than `width` (two with no pad). */
+export function entryFrame(
+	body: readonly string[],
+	width: number,
+	theme: Theme,
+	frame: EntryFrame = {},
+): string[] {
+	const lines = frame.dashed ? DASHED : SOLID;
+	const paint = (text: string) => theme.fg(frame.color ?? "border", text);
+	const pad = " ".repeat(frame.pad ?? 1);
+	const inner = Math.max(1, width - 2 - pad.length * 2);
+	const edge = (corners: [string, string], left?: string, right?: string) => {
+		const end = (right ? ` ${right} ` : "") + paint(lines.h + corners[1]);
+		// A long label is cut, never the corner.
+		const room = Math.max(0, width - 2 - visibleWidth(end) - 2);
+		const label = left ? ` ${truncateToWidth(left, room, CUT)} ` : "";
+		const start = paint(corners[0] + lines.h) + label;
+		const fill = Math.max(0, width - visibleWidth(start) - visibleWidth(end));
+		const rule = start + paint(lines.h.repeat(fill)) + end;
+		return fill === 0 ? truncateToWidth(rule, width, "") : rule;
+	};
+	const side = paint(lines.v);
+	return [
+		edge([LINE.topLeft, LINE.topRight], frame.top, frame.topRight),
+		...body.map((line) => {
+			if (line === CHANGES_CUT)
+				return paint(LINE.teeLeft + LINE.h.repeat(width - 2) + LINE.teeRight);
+			const cells = visibleWidth(line);
+			const cut = cells > inner ? truncateToWidth(line, inner, "") : line;
+			const shown = cells > inner ? visibleWidth(cut) : cells;
+			return `${side}${pad}${cut}${" ".repeat(Math.max(0, inner - shown))}${pad}${side}`;
+		}),
+		edge([LINE.bottomLeft, LINE.bottomRight], frame.bottom, frame.bottomRight),
+	];
+}
+
+/** The transcript redraws every entry on each keystroke, so an entry draws once per width. */
+export function drawnByWidth(draw: (width: number) => string[]): Component {
+	let drawn: { width: number; lines: string[] } | undefined;
+	return {
+		render(width) {
+			if (drawn?.width !== width) drawn = { width, lines: draw(width) };
+			return drawn.lines;
+		},
+		invalidate() {
+			drawn = undefined;
+		},
+	};
+}

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

@@ -0,0 +1,212 @@
+// The frame every harness dialog wears. No surface paints a background. See DESIGN.md.
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+import { CUT, GLYPH, LINE } from "./glyphs.ts";
+
+export const FRAME_PAD = 2;
+/** Both sides and their padding. */
+export const FRAME_X = 2 + FRAME_PAD * 2;
+export const FRAME_Y = 2;
+
+export const POINTER = GLYPH.pointer;
+
+export type KeyHint = readonly [key: string, action: string];
+
+/** The chosen row marks itself with `pointer`; the frame draws every row the same. */
+export type FrameLine = string;
+
+export interface FrameOptions extends BottomOptions {
+	title: string;
+	/** Counts, a step, how far along. */
+	status?: string;
+	tabs?: FrameTabs;
+}
+
+export interface FrameTabs {
+	titles: readonly string[];
+	current: number;
+}
+
+export interface BottomOptions {
+	/** Only the ones that do something right now. */
+	keys?: readonly KeyHint[];
+	/** What it cost, where you are. */
+	footnote?: string;
+	/** Columns into the text, meeting both edges. */
+	split?: number;
+	/** A full-screen view draws them quieter than a dialog. */
+	border?: ThemeColor;
+}
+
+export function frameInner(width: number): number {
+	return Math.max(1, width - FRAME_X);
+}
+
+export function frame(
+	theme: Theme,
+	width: number,
+	body: readonly FrameLine[],
+	options: FrameOptions,
+): string[] {
+	const title = options.title === "" ? "" : theme.bold(theme.fg("accent", options.title));
+	const column = junction(options.split, LINE.teeTop);
+	const { tabs } = options;
+	const border = options.border ?? "border";
+	const top = edge(
+		theme,
+		border,
+		width,
+		LINE.topLeft,
+		LINE.topRight,
+		title,
+		options.status ?? "",
+		tabs === undefined ? column : undefined,
+	);
+	const head =
+		tabs === undefined
+			? []
+			: [tabsRow(theme, border, width, tabs), divider(theme, border, width, column)];
+	const rows = body.map((line) => row(theme, border, width, line));
+	return [top, ...head, ...rows, frameBottom(theme, width, options)];
+}
+
+/** The tabs start one cell into the padding, so each tab's name lines up with the body under it. */
+function tabsRow(theme: Theme, border: ThemeColor, width: number, tabs: FrameTabs): string {
+	const inner = frameInner(width) + 2;
+	const line = truncateToWidth(tabsLine(theme, tabs, inner), inner, CUT);
+	const fill = " ".repeat(Math.max(0, inner - visibleWidth(line)));
+	const side = theme.fg(border, LINE.v);
+	const pad = " ".repeat(FRAME_PAD - 1);
+	return `${side}${pad}${line}${fill}${pad}${side}`;
+}
+
+/**
+ * The current tab sits on the selection color, so it reads as chosen in any theme. When they do not
+ * fit, the tabs before the current one give way first.
+ */
+function tabsLine(theme: Theme, tabs: FrameTabs, inner: number): string {
+	const gap = " ";
+	const drawn = tabs.titles.map((title, index) =>
+		index === tabs.current
+			? theme.bg("selectedBg", theme.bold(` ${theme.fg("accent", title)} `))
+			: theme.fg("muted", ` ${title} `),
+	);
+	const more = theme.fg("dim", GLYPH.ellipsisAcross);
+	let start = 0;
+	const line = () => [...(start > 0 ? [more] : []), ...drawn.slice(start)].join(gap);
+	while (start < tabs.current && visibleWidth(line()) > inner) start++;
+	return line();
+}
+
+function divider(
+	theme: Theme,
+	border: ThemeColor,
+	width: number,
+	column: Junction | undefined,
+): string {
+	const span = Math.max(0, width - 2);
+	const cells: string[] = Array.from({ length: span }, () => LINE.h);
+	if (column !== undefined && column.at - 1 < span) cells[column.at - 1] = column.char;
+	return theme.fg(border, `${LINE.teeLeft}${cells.join("")}${LINE.teeRight}`);
+}
+
+export function frameBottom(theme: Theme, width: number, options: BottomOptions = {}): string {
+	const keys = options.keys ?? [];
+	// The keys sit on whichever side of the column holds them; when neither does but the whole edge
+	// would, the column stops short of it.
+	const wanted = visibleWidth(keyHints(theme, keys));
+	const column = junction(options.split, LINE.teeBottom);
+	const before = column === undefined ? width - 6 : column.at - 4;
+	const after = column === undefined ? 0 : width - 6 - (column.at + 1);
+	const fits = wanted <= before || wanted <= after;
+	const cross = !fits && wanted <= width - 6 ? undefined : column;
+	const room = cross === undefined ? width - 6 : Math.max(before, after);
+	const hints = keyHints(theme, fitKeys(theme, keys, room));
+	const footnote = options.footnote ?? "";
+	const note = visibleWidth(hints) + visibleWidth(footnote) + 3 <= room ? footnote : "";
+	const border = options.border ?? "border";
+	return edge(theme, border, width, LINE.bottomLeft, LINE.bottomRight, hints, note, cross);
+}
+
+/** Whole keys only; the last one, the way out, always shows. */
+function fitKeys(theme: Theme, keys: readonly KeyHint[], room: number): KeyHint[] {
+	const kept = [...keys];
+	while (kept.length > 1 && visibleWidth(keyHints(theme, kept)) > room)
+		kept.splice(kept.length - 2, 1);
+	return kept;
+}
+
+function row(theme: Theme, border: ThemeColor, width: number, text: string): string {
+	const inner = frameInner(width);
+	const cells = visibleWidth(text);
+	const clipped = cells > inner ? truncateToWidth(text, inner, CUT) : text;
+	const shown = cells > inner ? visibleWidth(clipped) : cells;
+	const fill = " ".repeat(Math.max(0, inner - shown));
+	const side = theme.fg(border, LINE.v);
+	return `${side}${" ".repeat(FRAME_PAD)}${clipped}${fill}${" ".repeat(FRAME_PAD)}${side}`;
+}
+
+export function rule(theme: Theme, width: number, note = ""): string {
+	const line = (count: number) => theme.fg("borderMuted", LINE.h.repeat(Math.max(0, count)));
+	if (note === "") return line(width);
+	return `${line(width - visibleWidth(note) - 1)} ${note}`;
+}
+
+function keyHints(theme: Theme, keys: readonly KeyHint[]): string {
+	return keys
+		.map(([key, action]) => `${theme.fg("muted", key)} ${theme.fg("dim", action)}`)
+		.join("   ");
+}
+
+export function pointer(theme: Theme, selected: boolean, active = true): string {
+	if (!selected) return "  ";
+	return `${theme.fg(active ? "accent" : "dim", POINTER)} `;
+}
+
+interface Junction {
+	at: number;
+	char: string;
+}
+
+function junction(split: number | undefined, char: string): Junction | undefined {
+	return split === undefined ? undefined : { at: FRAME_PAD + split + 1, char };
+}
+
+function edge(
+	theme: Theme,
+	color: ThemeColor,
+	width: number,
+	left: string,
+	right: string,
+	label: string,
+	note: string,
+	cross?: Junction,
+): string {
+	const border = (text: string) => theme.fg(color, text);
+	const span = Math.max(0, width - 2);
+	const at = cross === undefined || cross.at - 1 >= span ? undefined : cross.at - 1;
+	const head = label === "" ? "" : ` ${label} `;
+	const before = at === undefined || visibleWidth(head) + 2 <= at;
+	const start = before ? 1 : (at ?? 0) + 2;
+	const end = before && at !== undefined && note === "" ? at : span - 1;
+	const fittedHead = truncateToWidth(head, Math.max(0, end - start), "... ");
+	const tail = note === "" ? "" : ` ${note} `;
+	const tailStart = span - 1 - visibleWidth(tail);
+	const tailFits =
+		tail !== "" &&
+		tailStart >= start + visibleWidth(fittedHead) &&
+		(at === undefined || tailStart > at);
+
+	const cells: string[] = Array.from({ length: span }, () => border(LINE.h));
+	if (at !== undefined) cells[at] = border(cross?.char ?? LINE.h);
+	const place = (text: string, from: number) => {
+		const size = visibleWidth(text);
+		if (size === 0) return;
+		cells[from] = text;
+		for (let index = from + 1; index < from + size; index++) cells[index] = "";
+	};
+	place(fittedHead, start);
+	if (tailFits) place(tail, tailStart);
+	return `${border(left)}${cells.join("")}${border(right)}`;
+}