@huseynsnmz/pi-suite 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,132 @@
+// Every character the harness draws with, by name. Nerd Font marks live in look's icon sets.
+
+/** Marks in running text. */
+export const GLYPH = {
+	/** π, pi's own entries and the harness's name. */
+	pi: "\u03c0",
+	/** ✓ done, picked, passed. */
+	check: "\u2713",
+	/** ✗ failed. */
+	cross: "\u2717",
+	/** × close, remove. */
+	times: "\u00d7",
+	/** ↑ */
+	up: "\u2191",
+	/** ↓ */
+	down: "\u2193",
+	/** ← */
+	left: "\u2190",
+	/** → to whom, from what to what. */
+	right: "\u2192",
+	/** ▰ ▱ how well an agent fits a request, in the peers tool's bids. */
+	barFull: "\u25b0",
+	barEmpty: "\u25b1",
+	/** ↵ enter. */
+	enter: "\u21b5",
+	/** ↻ again. */
+	again: "\u21bb",
+	/** ❯ the selected row. */
+	pointer: "\u276f",
+	/** › a note on an option, a continuation. */
+	chevron: "\u203a",
+	/** ▸ a small pointer. */
+	triangle: "\u25b8",
+	/** ◆ an agent, a task in progress. */
+	diamond: "\u25c6",
+	/** ◇ an empty diamond: a task not started, a quiet mark. */
+	diamondEmpty: "\u25c7",
+	/** ◈ the judge. */
+	judge: "\u25c8",
+	/** ● on. */
+	dot: "\u25cf",
+	/** ○ off, not answered. */
+	ring: "\u25cb",
+	/** ◐ half: hearing a room without taking part in it. */
+	half: "\u25d0",
+	/** ◌ hidden, as tool output pruned from the context. */
+	ringDotted: "\u25cc",
+	/** ✎ words you typed. */
+	pencil: "\u270e",
+	/** ⚑ flagged. */
+	flag: "\u2691",
+	/** ⏵ running. */
+	play: "\u23f5",
+	/** ⌕ search. */
+	search: "\u2315",
+	/** ▍ where words arrive. */
+	cursor: "\u258d",
+	/** ▌ the bar on a selected row. */
+	bar: "\u258c",
+	/** ⋮ lines hidden above. */
+	ellipsisUp: "\u22ee",
+	/** ⋯ a gap between parts, as between two edits. */
+	ellipsisAcross: "\u22ef",
+} as const;
+
+/** Frames of the marks that move while something lasts, in order. */
+export const SPIN = {
+	/** ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏ a dot going round in one cell: someone writing. */
+	braille: [
+		"\u280b",
+		"\u2819",
+		"\u2839",
+		"\u2838",
+		"\u283c",
+		"\u2834",
+		"\u2826",
+		"\u2827",
+		"\u2807",
+		"\u280f",
+	],
+	/** ◴ ◷ ◶ ◵ a quarter of a circle going round: a call running. */
+	quadrants: ["\u25f4", "\u25f7", "\u25f6", "\u25f5"],
+	/** ⧖ ⧗ an hourglass and the same one flowing: a call waiting on you. */
+	hourglass: ["\u29d6", "\u29d7"],
+	/** | / - \ the same, in ASCII. */
+	ascii: ["|", "/", "-", "\\"],
+	/** ✎ ✏ ✐ ✏ a pencil that tilts as it writes, in one cell: the model writing a call. */
+	pencil: ["\u270e", "\u270f", "\u2710", "\u270f"],
+} as const;
+
+/** Three dots rather than `…`, which is one column in every font. */
+export const CUT = "...";
+
+/** The lines frames, rules and scroll bars are drawn with. */
+export const LINE = {
+	/** ─ */
+	h: "\u2500",
+	/** │ */
+	v: "\u2502",
+	/** ┃ the thumb of a scroll bar, and the sides of what is chosen. */
+	vHeavy: "\u2503",
+	/** ━ */
+	hHeavy: "\u2501",
+	/** ┏ */
+	topLeftHeavy: "\u250f",
+	/** ┓ */
+	topRightHeavy: "\u2513",
+	/** ┗ */
+	bottomLeftHeavy: "\u2517",
+	/** ┛ */
+	bottomRightHeavy: "\u251b",
+	/** ┄ a frame around what has not happened yet. */
+	hDashed: "\u2504",
+	/** ┆ */
+	vDashed: "\u2506",
+	/** ╭ */
+	topLeft: "\u256d",
+	/** ╮ */
+	topRight: "\u256e",
+	/** ╰ */
+	bottomLeft: "\u2570",
+	/** ╯ */
+	bottomRight: "\u256f",
+	/** ├ a rule that meets the left side. */
+	teeLeft: "\u251c",
+	/** ┤ a rule that meets the right side. */
+	teeRight: "\u2524",
+	/** ┬ a column that meets the top edge. */
+	teeTop: "\u252c",
+	/** ┴ a column that meets the bottom edge. */
+	teeBottom: "\u2534",
+} as const;

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

@@ -0,0 +1,14 @@
+export interface ThumbRange {
+	/** From the top. */
+	start: number;
+	/** At least one. */
+	size: number;
+}
+
+/** Undefined when everything fits. */
+export function thumbRange(total: number, height: number, scroll: number): ThumbRange | undefined {
+	if (total <= height) return undefined;
+	const size = Math.max(1, Math.round((height * height) / total));
+	const start = Math.round((scroll / (total - height)) * (height - size));
+	return { start, size };
+}

package/packages/frame/src/render/diff.ts

@@ -0,0 +1,157 @@
+// An edit's diff inside the frame, without pi's colored box behind it: the line numbers in a gutter,
+// the sign and the text in the diff colors, and only the changed words on a tinted background.
+import { GLYPH, isObject } from "../kit/index.ts";
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { type Component, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+
+import { printable } from "./streaming.ts";
+
+interface DiffLine {
+	sign: "-" | "+" | " ";
+	number: string;
+	text: string;
+}
+
+const COLORS: Record<DiffLine["sign"], ThemeColor> = {
+	"-": "toolDiffRemoved",
+	"+": "toolDiffAdded",
+	" ": "toolDiffContext",
+};
+
+/** Pi's diff text, one line per row, with the number gutter and the wrapped text hanging under itself. */
+export function drawDiff(diff: string, theme: Theme, width: number): string[] {
+	const lines = diff.split("\n").map(parse);
+	const gutter = Math.max(...lines.map((line) => line?.number.length ?? 0), 1);
+	const texts = changedWords(lines, theme);
+	// The number, a space, the sign and a space; wrapped text hangs under its first character.
+	const hang = " ".repeat(gutter + 3);
+	return lines.flatMap((line, index) => {
+		if (line === undefined) return [];
+		if (line.number === "" && line.text === "...")
+			return [`${hang}${theme.fg("dim", GLYPH.ellipsisAcross)}`];
+		const lead = `${theme.fg("dim", line.number.padStart(gutter))} ${theme.fg(COLORS[line.sign], line.sign)} `;
+		const text = texts[index] ?? theme.fg(COLORS[line.sign], line.text);
+		return wrapTextWithAnsi(text, Math.max(1, width - hang.length)).map((part, at) =>
+			at === 0 ? `${lead}${part}` : `${hang}${part}`,
+		);
+	});
+}
+
+/**
+ * Pi's edit body while it holds the file's diff, drawn here; before that, pi's own drawing.
+ * Pi keeps the diff on the component it returns, as `preview`.
+ */
+export function editBody(own: Component, header: string, theme: Theme): Component {
+	// The screen redraws on every keystroke and every piece the model writes; the diff is drawn once.
+	let drawn: { error?: string; diff?: string; width: number; lines: string[] } | undefined;
+	return {
+		render(width) {
+			const preview = isObject(own) && "preview" in own ? own.preview : undefined;
+			if (!isObject(preview)) return own.render(width);
+			const error = typeof preview.error === "string" ? preview.error : undefined;
+			const diff = typeof preview.diff === "string" ? preview.diff : undefined;
+			if (error === undefined && diff === undefined) return own.render(width);
+			if (drawn?.width !== width || drawn.error !== error || drawn.diff !== diff) {
+				const body =
+					error === undefined
+						? drawDiff(diff ?? "", theme, width)
+						: wrapTextWithAnsi(theme.fg("error", error), width);
+				drawn = { error, diff, width, lines: [header, "", ...body] };
+			}
+			return drawn.lines;
+		},
+		invalidate() {
+			drawn = undefined;
+			own.invalidate();
+		},
+	};
+}
+
+function parse(line: string): DiffLine | undefined {
+	if (line === "") return undefined;
+	const match = /^([+\- ])( *\d*) (.*)$/.exec(line);
+	if (match === null) return { sign: " ", number: "", text: printable(line) };
+	const sign = match[1] as DiffLine["sign"];
+	return { sign, number: (match[2] ?? "").trim(), text: printable(match[3] ?? "") };
+}
+
+/** One line taken out and one put in is a changed line: its changed words get the tint. */
+function changedWords(
+	lines: readonly (DiffLine | undefined)[],
+	theme: Theme,
+): (string | undefined)[] {
+	const texts: (string | undefined)[] = [];
+	for (let index = 0; index + 1 < lines.length; index++) {
+		const out = lines[index];
+		const into = lines[index + 1];
+		if (out?.sign !== "-" || into?.sign !== "+") continue;
+		if (lines[index - 1]?.sign === "-" || lines[index + 2]?.sign === "+") continue;
+		let removed = "";
+		let added = "";
+		for (const part of diffWords(out.text, into.text)) {
+			if (part.removed) removed += theme.bg("toolErrorBg", part.value);
+			else if (part.added) added += theme.bg("toolSuccessBg", part.value);
+			else {
+				removed += part.value;
+				added += part.value;
+			}
+		}
+		texts[index] = theme.fg("toolDiffRemoved", removed);
+		texts[index + 1] = theme.fg("toolDiffAdded", added);
+	}
+	return texts;
+}
+
+const TOKENS = /\s+|[\p{L}\p{N}_]+|./gsu;
+/** A pair of very long lines costs this much to compare, and a minified file isn't worth it. */
+const MOST_CELLS = 4_000_000;
+
+export interface WordChange {
+	value: string;
+	added?: boolean;
+	removed?: boolean;
+}
+
+/** What changed between two lines, word by word: the longest run of words they share stays. */
+export function diffWords(before: string, after: string): WordChange[] {
+	const a = before.match(TOKENS) ?? [];
+	const b = after.match(TOKENS) ?? [];
+	if ((a.length + 1) * (b.length + 1) > MOST_CELLS) {
+		return [
+			...(before === "" ? [] : [{ value: before, removed: true }]),
+			...(after === "" ? [] : [{ value: after, added: true }]),
+		];
+	}
+	const width = b.length + 1;
+	const shared = new Uint32Array((a.length + 1) * width);
+	for (let i = a.length - 1; i >= 0; i--) {
+		for (let j = b.length - 1; j >= 0; j--) {
+			shared[i * width + j] =
+				a[i] === b[j]
+					? (shared[(i + 1) * width + j + 1] ?? 0) + 1
+					: Math.max(shared[(i + 1) * width + j] ?? 0, shared[i * width + j + 1] ?? 0);
+		}
+	}
+	const parts: WordChange[] = [];
+	const push = (value: string, change: { added?: boolean; removed?: boolean }) => {
+		const last = parts.at(-1);
+		if (last !== undefined && last.added === change.added && last.removed === change.removed) last.value += value;
+		else parts.push({ value, ...change });
+	};
+	let i = 0;
+	let j = 0;
+	while (i < a.length || j < b.length) {
+		if (i < a.length && j < b.length && a[i] === b[j]) {
+			push(a[i] as string, {});
+			i++;
+			j++;
+		} else if (j >= b.length || (i < a.length && (shared[(i + 1) * width + j] ?? 0) >= (shared[i * width + j + 1] ?? 0))) {
+			push(a[i] as string, { removed: true });
+			i++;
+		} else {
+			push(b[j] as string, { added: true });
+			j++;
+		}
+	}
+	return parts;
+}

package/packages/frame/src/render/fit.ts

@@ -0,0 +1,86 @@
+import { CUT } from "../kit/index.ts";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export interface Piece {
+	text: string;
+	compact?: string | undefined;
+	priority: number;
+	/** When it is alone on the line. */
+	shrink?: (width: number) => string;
+}
+
+export interface FitOptions {
+	separator: string;
+	regionOverhead?: number;
+	ellipsis?: string;
+}
+
+interface Slot {
+	region: number;
+	order: number;
+	piece: Piece;
+	text: string;
+	dropped: boolean;
+}
+
+export function fitRegions(
+	regions: readonly (readonly Piece[])[],
+	width: number,
+	options: FitOptions,
+): string[] {
+	const slots: Slot[] = regions.flatMap((pieces, region) =>
+		pieces.map((piece, order) => ({ region, order, piece, text: piece.text, dropped: false })),
+	);
+	const byPriority = slots.toSorted((a, b) => a.piece.priority - b.piece.priority);
+	const measure = (): number => measureRegions(regions.length, slots, options);
+
+	for (const slot of byPriority) {
+		if (measure() <= width) break;
+		if (slot.piece.compact !== undefined) slot.text = slot.piece.compact;
+	}
+
+	for (const slot of byPriority) {
+		if (measure() <= width) break;
+		if (slots.filter((candidate) => !candidate.dropped).length <= 1) break;
+		slot.dropped = true;
+	}
+
+	const joined = join(regions.length, slots, options.separator);
+	if (measure() <= width) return joined;
+
+	const kept = slots.filter((slot) => !slot.dropped);
+	const alone = regions.length === 1 ? kept[0]?.piece.shrink : undefined;
+	if (kept.length === 1 && alone !== undefined) return [alone(width)];
+
+	const overhead = options.regionOverhead ?? 0;
+	return joined.map((text) =>
+		text === ""
+			? ""
+			: truncateToWidth(text, Math.max(0, width - overhead), options.ellipsis ?? CUT),
+	);
+}
+
+export function fitLine(pieces: readonly Piece[], width: number, options: FitOptions): string {
+	return fitRegions([pieces], width, options)[0] ?? "";
+}
+
+function join(count: number, slots: readonly Slot[], separator: string): string[] {
+	const regions: string[][] = Array.from({ length: count }, () => []);
+	for (const slot of slots.toSorted((a, b) => a.order - b.order)) {
+		if (!slot.dropped) regions[slot.region]?.push(slot.text);
+	}
+	return regions.map((texts) => texts.join(separator));
+}
+
+function measureRegions(count: number, slots: readonly Slot[], options: FitOptions): number {
+	const separatorWidth = visibleWidth(options.separator);
+	let total = 0;
+	for (let region = 0; region < count; region++) {
+		const kept = slots.filter((slot) => slot.region === region && !slot.dropped);
+		if (kept.length === 0) continue;
+		total += options.regionOverhead ?? 0;
+		total += kept.reduce((sum, slot) => sum + visibleWidth(slot.text), 0);
+		total += separatorWidth * (kept.length - 1);
+	}
+	return total;
+}

package/packages/frame/src/render/format.ts

@@ -0,0 +1,108 @@
+import { sep } from "node:path";
+
+import { formatCost, formatTokens, tildify } from "../kit/index.ts";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export const CELL = {
+	count: 4,
+	rate: 4,
+	latency: 5,
+	clock: 4,
+	percent: 4,
+	money: 6,
+} as const;
+
+export function cell(text: string, width: number): string {
+	return " ".repeat(Math.max(0, width - visibleWidth(text))) + text;
+}
+
+export const UNKNOWN = "–";
+
+export const count = formatTokens;
+
+export function rate(perSecond: number): string {
+	if (perSecond < 10) return trim(perSecond.toFixed(1));
+	return count(perSecond);
+}
+
+export function duration(milliseconds: number): string {
+	const total = Math.max(0, Math.floor(milliseconds / 1000));
+	const secs = total % 60;
+	const minutes = Math.floor(total / 60) % 60;
+	const hours = Math.floor(total / 3600);
+	if (hours > 0) return `${hours}h ${minutes}m`;
+	if (minutes > 0) return `${minutes}m ${secs}s`;
+	return `${secs}s`;
+}
+
+export function stopwatch(milliseconds: number): string {
+	const total = Math.max(0, Math.floor(milliseconds / 1000));
+	const secs = String(total % 60).padStart(2, "0");
+	const minutes = Math.floor(total / 60) % 60;
+	const hours = Math.floor(total / 3600);
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${secs}` : `${minutes}:${secs}`;
+}
+
+export function latency(milliseconds: number): string {
+	if (milliseconds < 1000) return `${Math.round(milliseconds)}ms`;
+	if (milliseconds < 10_000) return `${(milliseconds / 1000).toFixed(1)}s`;
+	return duration(milliseconds);
+}
+
+export const money = formatCost;
+
+export function percent(value: number): string {
+	return value >= 10 || value === 0 ? `${Math.round(value)}%` : `${value.toFixed(1)}%`;
+}
+
+export function shortenPath(cwd: string, home: string | undefined, maxWidth: number): string {
+	const full = home === undefined ? cwd : tildify(cwd, home);
+	if (maxWidth <= 0 || visibleWidth(full) <= maxWidth) return full;
+
+	const parts = full.split(sep);
+	let kept = "";
+	for (let index = parts.length - 1; index > 0; index--) {
+		const candidate = `${sep}${parts[index] ?? ""}${kept}`;
+		if (visibleWidth(`...${candidate}`) > maxWidth) break;
+		kept = candidate;
+	}
+	if (kept === "") return truncateTail(parts.at(-1) ?? full, maxWidth);
+	return `...${kept}`;
+}
+
+export function basename(cwd: string): string {
+	return cwd.split(/[\\/]/).findLast(Boolean) ?? cwd;
+}
+
+export function gauge(value: number, cells: number): { filled: number; empty: number } {
+	const filled = Math.max(0, Math.min(cells, Math.round((value / 100) * cells)));
+	return { filled, empty: cells - filled };
+}
+
+export function truncateTail(text: string, maxWidth: number): string {
+	if (maxWidth <= 0) return "";
+	if (visibleWidth(text) <= maxWidth) return text;
+	const chars = [...text];
+	let width = 3;
+	let start = chars.length;
+	while (start > 0) {
+		const next = visibleWidth(chars[start - 1] ?? "");
+		if (width + next > maxWidth) break;
+		width += next;
+		start--;
+	}
+	return `...${chars.slice(start).join("")}`;
+}
+
+export function fitWidth(text: string, width: number, ellipsis = "..."): string {
+	return truncateToWidth(text, Math.max(0, width), ellipsis);
+}
+
+/** A tab is as wide as the terminal says, and these lines have a width. */
+export function tabs(text: string): string {
+	return text.replace(/\t/g, "   ");
+}
+
+function trim(fixed: string): string {
+	return fixed.endsWith(".0") ? fixed.slice(0, -2) : fixed;
+}

package/packages/frame/src/render/frame.ts

@@ -0,0 +1,106 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+import { type FitOptions, fitRegions, type Piece } from "./fit.ts";
+
+export type FrameStyle = "rounded" | "square" | "heavy" | "line";
+
+export interface BoxChars {
+	topLeft: string;
+	topRight: string;
+	bottomLeft: string;
+	bottomRight: string;
+	horizontal: string;
+	vertical: string;
+}
+
+export const BOXES: Record<FrameStyle, BoxChars> = {
+	rounded: {
+		topLeft: "╭",
+		topRight: "╮",
+		bottomLeft: "╰",
+		bottomRight: "╯",
+		horizontal: "─",
+		vertical: "│",
+	},
+	square: {
+		topLeft: "┌",
+		topRight: "┐",
+		bottomLeft: "└",
+		bottomRight: "┘",
+		horizontal: "─",
+		vertical: "│",
+	},
+	heavy: {
+		topLeft: "┏",
+		topRight: "┓",
+		bottomLeft: "┗",
+		bottomRight: "┛",
+		horizontal: "━",
+		vertical: "┃",
+	},
+	line: {
+		topLeft: "─",
+		topRight: "─",
+		bottomLeft: "─",
+		bottomRight: "─",
+		horizontal: "─",
+		vertical: "",
+	},
+};
+
+export interface BorderOptions extends Pick<FitOptions, "separator" | "ellipsis"> {
+	box: BoxChars;
+	edge: "top" | "bottom";
+	paint: (text: string) => string;
+	lead?: ((budget: number) => string | undefined) | undefined;
+	leadMin?: number;
+}
+
+const FIXED = 5;
+const PADDING = 2;
+
+export function border(
+	width: number,
+	left: readonly Piece[],
+	right: readonly Piece[],
+	options: BorderOptions,
+): string {
+	const { box, paint } = options;
+	const [start, end] =
+		options.edge === "top" ? [box.topLeft, box.topRight] : [box.bottomLeft, box.bottomRight];
+	if (width < FIXED) return paint(box.horizontal.repeat(Math.max(0, width)));
+
+	const separatorWidth = visibleWidth(options.separator);
+	const reserve =
+		options.lead === undefined ? 0 : (options.leadMin ?? 1) + separatorWidth + PADDING;
+	const budget = width - FIXED - reserve;
+
+	const [fittedLeft = "", fittedRight = ""] =
+		budget > 0
+			? fitRegions([left, right], budget, {
+					separator: options.separator,
+					regionOverhead: PADDING,
+					ellipsis: options.ellipsis,
+				})
+			: ["", ""];
+
+	const rightCell = fittedRight === "" ? "" : ` ${fittedRight} `;
+	let leftText = fittedLeft;
+	if (options.lead !== undefined) {
+		const used =
+			visibleWidth(rightCell) + (fittedLeft === "" ? 0 : visibleWidth(fittedLeft) + separatorWidth);
+		const lead = options.lead(Math.max(1, width - FIXED - PADDING - used));
+		if (lead !== undefined && lead !== "")
+			leftText = fittedLeft === "" ? lead : `${fittedLeft}${options.separator}${lead}`;
+	}
+	const leftCell = leftText === "" ? "" : ` ${leftText} `;
+	const fill = Math.max(1, width - 4 - visibleWidth(leftCell) - visibleWidth(rightCell));
+
+	return (
+		paint(`${start}${box.horizontal}`) +
+		leftCell +
+		paint(box.horizontal.repeat(fill)) +
+		rightCell +
+		paint(`${box.horizontal}${end}`)
+	);
+}