@adeildo/pi-look 5.9.2 → 5.10.0

package/src/render/streaming.ts

@@ -0,0 +1,217 @@
+import { readFileSync, statSync } from "node:fs";
+import { homedir } from "node:os";
+import { resolve } from "node:path";
+
+// While the model writes an edit or a write, pi shows the path, or the first lines of the file,
+// which stopped changing long ago. These show the end instead: the lines arriving, with a cursor
+// where the model is writing, and what it has written so far on the bottom rule.
+import { GLYPH, isObject } from "@adeildo/pi-kit";
+import { getLanguageFromPath, highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
+
+import { tabs } from "./format.ts";
+
+/** What the frame shows inside, and the counts it adds to the bottom rule. */
+export interface Stream {
+	lines: string[];
+	progress: string[];
+}
+
+export interface StreamContext {
+	cwd: string;
+	expanded: boolean;
+	/** Shared by every render of one call, which keeps what was read from disk. */
+	state: { streamTarget?: Target };
+}
+
+type Streamer = (args: unknown, theme: Theme, context: StreamContext) => Stream | undefined;
+
+/** How many of the last lines a write shows while it streams. */
+const WRITE_TAIL = 8;
+/** How many lines of the diff an edit shows while it streams. */
+const EDIT_TAIL = 10;
+const CURSOR = GLYPH.cursor;
+/** Larger files are not read to count their lines. */
+const COUNT_LIMIT = 4 * 1024 * 1024;
+
+export const STREAMERS: Readonly<Record<string, Streamer>> = {
+	write: writeStream,
+	edit: editStream,
+};
+
+/** What a write is about to replace. */
+interface Target {
+	path: string;
+	lines?: number;
+	exists: boolean;
+}
+
+export function writeStream(
+	args: unknown,
+	theme: Theme,
+	context: StreamContext,
+): Stream | undefined {
+	const path = pathOf(args);
+	const content = field(args, "content");
+	if (path === undefined || content === undefined) return undefined;
+
+	const target = targetOf(path, context);
+	const header = `${pathLine("write", path, theme)}  ${theme.fg("muted", replaces(target))}`;
+	const lines = content.split("\n");
+	const shown = context.expanded ? lines : lines.slice(-WRITE_TAIL);
+	const first = lines.length - shown.length;
+	const gutter = String(lines.length).length;
+	const lang = getLanguageFromPath(path);
+	const painted = lang
+		? highlightCode(tabs(shown.join("\n")), lang)
+		: shown.map((line) => theme.fg("toolOutput", tabs(line)));
+	const body = shown.map(
+		(_, index) =>
+			`${theme.fg("dim", String(first + index + 1).padStart(gutter))}  ${painted[index] ?? ""}`,
+	);
+	return {
+		lines: [header, ...above(first, gutter, theme), ...withCursor(body, theme)],
+		progress: [`${lines.length} line${lines.length === 1 ? "" : "s"}`, size(content)],
+	};
+}
+
+export function editStream(
+	args: unknown,
+	theme: Theme,
+	context: StreamContext,
+): Stream | undefined {
+	const path = pathOf(args);
+	const edits = editsOf(args);
+	if (path === undefined || edits.length === 0) return undefined;
+
+	let removed = 0;
+	let added = 0;
+	const diff: string[] = [];
+	for (const [index, edit] of edits.entries()) {
+		if (index > 0) diff.push(theme.fg("dim", GLYPH.ellipsisAcross));
+		// Only the last edit can still be arriving, so only the others have a known end.
+		const lines = editLines(edit, index < edits.length - 1);
+		for (const line of lines.before) diff.push(theme.fg("toolDiffContext", ` ${tabs(line)}`));
+		for (const line of lines.out) diff.push(theme.fg("toolDiffRemoved", `-${tabs(line)}`));
+		for (const line of lines.in) diff.push(theme.fg("toolDiffAdded", `+${tabs(line)}`));
+		for (const line of lines.after) diff.push(theme.fg("toolDiffContext", ` ${tabs(line)}`));
+		removed += lines.out.length;
+		added += lines.in.length;
+	}
+	const shown = context.expanded ? diff : diff.slice(-EDIT_TAIL);
+	const hidden = diff.length - shown.length;
+	return {
+		lines: [pathLine("edit", path, theme), ...above(hidden, 0, theme), ...withCursor(shown, theme)],
+		progress: [...(edits.length > 1 ? [`edit ${edits.length}`] : []), `-${removed} +${added}`],
+	};
+}
+
+/**
+ * The lines an edit takes out and puts in. The model repeats the lines around the change in both
+ * texts, so the lines both start with, and the lines both end with once the edit is complete, are
+ * context. A line the new text has not repeated yet counts as taken out until it does.
+ */
+export function editLines(
+	edit: PartialEdit,
+	complete: boolean,
+): { before: string[]; out: string[]; in: string[]; after: string[] } {
+	const old = edit.oldText?.split("\n") ?? [];
+	const next = edit.newText?.split("\n") ?? [];
+	// The last line of a text still arriving may be cut short.
+	const settled = complete ? next.length : next.length - 1;
+	let start = 0;
+	while (start < Math.min(old.length, settled) && old[start] === next[start]) start++;
+	let end = 0;
+	if (complete)
+		while (
+			end < Math.min(old.length, next.length) - start &&
+			old[old.length - 1 - end] === next[next.length - 1 - end]
+		)
+			end++;
+	return {
+		before: old.slice(0, start),
+		out: old.slice(start, old.length - end),
+		in: next.slice(start, next.length - end),
+		after: old.slice(old.length - end),
+	};
+}
+
+/** The first line pi's own renderer draws, so nothing moves when it takes over. */
+function pathLine(tool: string, path: string, theme: Theme): string {
+	const home = homedir();
+	const shown = path.startsWith(home) ? `~${path.slice(home.length)}` : path;
+	return `${theme.fg("toolTitle", theme.bold(tool))} ${theme.fg("accent", shown)}`;
+}
+
+function above(hidden: number, gutter: number, theme: Theme): string[] {
+	if (hidden <= 0) return [];
+	const lines = `${hidden} line${hidden === 1 ? "" : "s"} above`;
+	return [
+		`${" ".repeat(Math.max(0, gutter - 1))}${theme.fg("dim", GLYPH.ellipsisUp)}  ${theme.fg("muted", lines)}`,
+	];
+}
+
+function withCursor(lines: readonly string[], theme: Theme): string[] {
+	if (lines.length === 0) return [];
+	return [...lines.slice(0, -1), `${lines.at(-1)}${theme.fg("accent", CURSOR)}`];
+}
+
+function replaces(target: Target): string {
+	if (!target.exists) return "new file";
+	if (target.lines === undefined) return "replaces a file";
+	return `replaces ${target.lines} line${target.lines === 1 ? "" : "s"}`;
+}
+
+/** Reads the file once per call, when the path is complete. */
+function targetOf(path: string, context: StreamContext): Target {
+	const known = context.state.streamTarget;
+	if (known?.path === path) return known;
+	const full = resolve(context.cwd, path);
+	let target: Target = { path, exists: false };
+	try {
+		const info = statSync(full);
+		target = { path, exists: true };
+		if (info.isFile() && info.size <= COUNT_LIMIT) {
+			const text = readFileSync(full, "utf8");
+			target.lines = text === "" ? 0 : text.replace(/\n$/, "").split("\n").length;
+		}
+	} catch (error) {
+		// A path that is not there is a new file; one that cannot be read is still a file.
+		target = { path, exists: (error as NodeJS.ErrnoException).code !== "ENOENT" };
+	}
+	context.state.streamTarget = target;
+	return target;
+}
+
+function size(text: string): string {
+	const bytes = Buffer.byteLength(text);
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function pathOf(args: unknown): string | undefined {
+	const path = field(args, "path") ?? field(args, "file_path");
+	return path === "" ? undefined : path;
+}
+
+function field(args: unknown, key: string): string | undefined {
+	const value = isObject(args) ? args[key] : undefined;
+	return typeof value === "string" ? value : undefined;
+}
+
+export interface PartialEdit {
+	oldText?: string;
+	newText?: string;
+}
+
+/** The edits written so far. The last one may have its old text and nothing else yet. */
+function editsOf(args: unknown): PartialEdit[] {
+	if (!isObject(args)) return [];
+	const { edits } = args;
+	const list = Array.isArray(edits) ? edits : [args];
+	return list.flatMap((edit) => {
+		const oldText = field(edit, "oldText");
+		const newText = field(edit, "newText");
+		return oldText === undefined && newText === undefined ? [] : [{ oldText, newText }];
+	});
+}

package/src/render/tools.ts

@@ -1,8 +1,21 @@
 // The mark and the name a tool call is drawn with. The mark follows the icon set in the look's
 // settings, like every other glyph on the screen.
+import { GLYPH, SPIN } from "@adeildo/pi-kit";
+
 import type { IconSet } from "./glyphs.ts";
 
-type ToolKind = "shell" | "read" | "search" | "edit" | "web" | "agent" | "mcp" | "other";
+type ToolKind =
+	| "shell"
+	| "read"
+	| "search"
+	| "edit"
+	| "web"
+	| "agent"
+	| "ask"
+	| "peers"
+	| "memory"
+	| "mcp"
+	| "other";
 
 const ICONS: Record<IconSet, Record<ToolKind, string>> = {
 	nerd: {
@@ -12,26 +25,35 @@ const ICONS: Record<IconSet, Record<ToolKind, string>> = {
 		edit: "\u{f044}", // nf-fa-pencil
 		web: "\u{f0ac}", // nf-fa-globe
 		agent: "\u{f06a9}", // nf-md-robot
+		ask: "\u{f059}", // nf-fa-circle_question
+		peers: "\u{f0c0}", // nf-fa-users
+		memory: "\u{f09d1}", // nf-md-brain
 		mcp: "\u{f1e6}", // nf-fa-plug
 		other: "\u{f013}", // nf-fa-gear
 	},
 	unicode: {
-		shell: "\u276f",
+		shell: GLYPH.pointer,
 		read: "\u25a4",
-		search: "\u2315",
-		edit: "\u270e",
+		search: GLYPH.search,
+		edit: GLYPH.pencil,
 		web: "\u25cd",
-		agent: "\u25c6",
+		agent: GLYPH.diamond,
+		ask: "?",
+		peers: "\u2042",
+		memory: GLYPH.diamondEmpty,
 		mcp: "\u226b",
-		other: "\u25cb",
+		other: GLYPH.ring,
 	},
 	ascii: {
 		shell: "$",
 		read: "=",
-		search: "?",
+		search: "/",
 		edit: "+",
 		web: "@",
 		agent: "*",
+		ask: "?",
+		peers: "&",
+		memory: "#",
 		mcp: ">",
 		other: "-",
 	},
@@ -48,17 +70,48 @@ const MARKS: Record<IconSet, Record<CallPhase, string>> = {
 		failed: "\u{f00d}", // nf-fa-times
 	},
 	unicode: {
-		writing: "\u270e",
+		writing: GLYPH.pencil,
 		waiting: "\u29d6",
 		running: "\u25f7",
-		done: "\u2713",
-		failed: "\u2717",
+		done: GLYPH.check,
+		failed: GLYPH.cross,
 	},
 	ascii: { writing: "~", waiting: ":", running: "...", done: "ok", failed: "!" },
 };
 
-export function stateMark(phase: CallPhase, set: IconSet): string {
-	return MARKS[set][phase];
+/** A mark that moves while its phase lasts: frames, and how long each stays. */
+interface Motion {
+	frames: readonly string[];
+	stepMs: number;
+}
+
+/** A clock outline for every hour, from twelve round to eleven. */
+const CLOCK = [0xf1456, ...Array.from({ length: 11 }, (_, hour) => 0xf144b + hour)].map((code) =>
+	String.fromCodePoint(code),
+);
+
+const MOTIONS: Record<IconSet, Partial<Record<CallPhase, Motion>>> = {
+	nerd: {
+		// nf-md-pencil_outline and nf-md-pencil: the pencil fills with ink and empties again.
+		writing: { frames: ["\u{f0cb6}", "\u{f03eb}"], stepMs: 350 },
+		waiting: { frames: ["\u{f251}", "\u{f252}", "\u{f253}"], stepMs: 400 }, // nf-fa-hourglass_start..end
+		running: { frames: CLOCK, stepMs: 110 }, // nf-md-clock_time_*_outline
+	},
+	unicode: {
+		writing: { frames: SPIN.pencil, stepMs: 180 },
+		waiting: { frames: SPIN.hourglass, stepMs: 500 },
+		running: { frames: SPIN.quadrants, stepMs: 150 },
+	},
+	ascii: {
+		running: { frames: SPIN.ascii, stepMs: 150 },
+	},
+};
+
+/** The mark of a phase. A phase that lasts moves, so a call that is still going looks alive. */
+export function stateMark(phase: CallPhase, set: IconSet, now: number = Date.now()): string {
+	const motion = MOTIONS[set][phase];
+	if (motion === undefined) return MARKS[set][phase];
+	return motion.frames[Math.floor(now / motion.stepMs) % motion.frames.length] ?? MARKS[set][phase];
 }
 
 export function toolIcon(toolName: string, set: IconSet): string {
@@ -73,6 +126,7 @@ export function toolLabel(toolName: string): string {
 
 function toolKind(toolName: string): ToolKind {
 	if (toolName.startsWith("mcp__")) return "mcp";
+	if (toolName.startsWith("memory_")) return "memory";
 	switch (toolName) {
 		case "bash":
 		case "powershell":
@@ -94,11 +148,21 @@ function toolKind(toolName: string): ToolKind {
 		case "fetch":
 		case "webfetch":
 		case "web_fetch":
+		case "fetch_content":
+		case "get_search_content":
+		case "source_check":
 			return "web";
 		case "task":
 		case "agent":
 		case "subagent":
+		case "bg_wait":
 			return "agent";
+		case "ask_questions":
+			return "ask";
+		case "peers":
+			return "peers";
+		case "scratchpad":
+			return "memory";
 		default:
 			return "other";
 	}

package/src/settings.ts

@@ -1,244 +1,95 @@
-import {
-	boolean,
-	type Control,
-	type Decoder,
-	integer,
-	literal,
-	pass,
-	problem,
-	setting,
-} from "@adeildo/pi-kit";
+import { boolean, literal, setting } from "@adeildo/pi-kit";
 
 import type { FrameStyle } from "./render/frame.ts";
 import type { IconMode } from "./render/glyphs.ts";
-import { isSegmentId, SEGMENT_IDS, SEGMENTS, type SegmentId } from "./render/segments.ts";
+import type { SegmentId } from "./render/segments.ts";
+import { framePreview, iconsPreview, userFramePreview } from "./ui/previews.ts";
+import type { SlotName } from "./ui/screen.ts";
 
-const PERMISSION_STATUS: SegmentId = "status:pi-ask-permission:mode";
+// The look has opinions: where each piece of information sits, the separators, the cursor and the
+// start screen are fixed. Only what depends on your terminal or your taste in lines is a setting:
+// the icon set, the frame's line style, and whether your messages are framed. See DESIGN.md.
 
-const STATUS_LABELS: Partial<Record<SegmentId, string>> = {
-	[PERMISSION_STATUS]: "permission mode",
-};
-
-export const SECTIONS = ["Editor", "Slots", "Footer", "Start screen", "Working line"];
+export const SECTIONS = ["Appearance"];
 
-export type HeaderStyle = "card" | "compact" | "off";
-export type SeparatorStyle = "dot" | "bar" | "slash" | "space";
+export type HeaderStyle = "card" | "compact";
 export type CursorStyle = "block" | "bar" | "underline";
 
-export const SEPARATORS: Record<SeparatorStyle, string> = {
-	dot: " · ",
-	bar: " │ ",
-	slash: " / ",
-	space: "  ",
+export const PERMISSION_MODE: SegmentId = "status:pi-ask-permission:mode";
+
+/** The line above the editor: how long the agent has worked, and the last call that finished. */
+export const strip: readonly SegmentId[] = ["elapsed"];
+/** The other side of that line, or a line of its own under it when it does not fit. */
+export const stripRight: readonly SegmentId[] = ["tasks", "peers"];
+/** After the working spinner on the editor's top edge. */
+export const topLeft: readonly SegmentId[] = ["branch", "session"];
+/** Where you are. */
+export const topRight: readonly SegmentId[] = ["path", "host"];
+/** How what you type is handled, and who does the work. */
+export const bottomLeft: readonly SegmentId[] = [PERMISSION_MODE, "model", "effort"];
+/** How full the context is. */
+export const bottomRight: readonly SegmentId[] = ["context"];
+/** The session: cost, tokens, cache, speeds, and what other packages report. */
+export const below: readonly SegmentId[] = ["cost", "tokens", "cache", "average", "statuses"];
+/** The plan's quota: what each window spent, and when it resets. */
+export const belowRight: readonly SegmentId[] = ["quota"];
+
+/** Where each piece of the screen comes from. The docs fixture draws with the same map. */
+export const SLOTS: Record<SlotName, readonly SegmentId[]> = {
+	strip,
+	stripRight,
+	topLeft,
+	topRight,
+	bottomLeft,
+	bottomRight,
+	below,
+	belowRight,
 };
 
-function segments(fallback: readonly SegmentId[]): Decoder<SegmentId[]> {
-	return {
-		decode(input, path) {
-			if (input === undefined) return pass([...fallback]);
-			if (!Array.isArray(input))
-				return pass([...fallback], [problem(path, "expected an array of segment ids")]);
-			const value: SegmentId[] = [];
-			const unknown: string[] = [];
-			for (const entry of input) {
-				if (typeof entry === "string" && isSegmentId(entry)) value.push(entry);
-				else unknown.push(String(entry));
-			}
-			const problems =
-				unknown.length === 0
-					? []
-					: [problem(path, `ignored unknown segments: ${unknown.join(", ")}`)];
-			return pass(value, problems);
-		},
-	};
-}
-
-// Any other package's status can have a slot of its own, so the ones already placed are offered too.
-function slotControl(fallback: readonly SegmentId[]): Control {
-	const statuses = [PERMISSION_STATUS, ...fallback.filter((id) => id.startsWith("status:"))];
-	return {
-		type: "list",
-		options: [
-			...SEGMENT_IDS.map((id) => ({ value: id, description: SEGMENTS[id].describe })),
-			...[...new Set(statuses)].map((id) => ({
-				value: id,
-				label: STATUS_LABELS[id] ?? id.slice("status:".length),
-				description: `what ${id.slice("status:".length)} reports`,
-			})),
-		],
-	};
-}
-
-function slot(id: string, label: string, description: string, fallback: readonly SegmentId[]) {
-	return setting<SegmentId[]>({
-		id: `look.${id}`,
-		default: [...fallback],
-		decoder: segments(fallback),
-		project: true,
-		ui: { section: "Slots", label, description, control: slotControl(fallback) },
-	});
-}
-
-export const strip = slot(
-	"strip",
-	"Answer strip",
-	"The line above the editor: how long the agent has worked, and the last call that finished.",
-	["elapsed", "last"],
-);
-export const stripRight = slot(
-	"stripRight",
-	"Answer strip, on the right",
-	"The other side of that line. When it does not fit beside the strip, it gets a line of its own under it.",
-	["tasks", "peers"],
-);
-export const topLeft = slot("frame.topLeft", "Frame, top left", "After the working spinner.", [
-	"branch",
-	"session",
-]);
-export const topRight = slot("frame.topRight", "Frame, top right", "Where you are.", [
-	"path",
-	"host",
-]);
-export const PERMISSION_MODE: SegmentId = PERMISSION_STATUS;
-
-export const bottomLeft = slot(
-	"frame.bottomLeft",
-	"Frame, bottom left",
-	"How what you type is handled, and who does the work.",
-	[PERMISSION_MODE, "model", "effort"],
-);
-export const bottomRight = slot("frame.bottomRight", "Frame, bottom right", "How full it is.", [
-	"context",
-]);
-export const below = slot(
-	"below",
-	"Below the editor",
-	"The session: cost, tokens, cache, average speeds, and what other packages report, last because it changes the most.",
-	["cost", "tokens", "cache", "average", "statuses"],
-);
-export const belowRight = slot(
-	"belowRight",
-	"Below the editor, on the right",
-	"The plan's quota: what each window spent, and when it resets.",
-	["quota"],
-);
-
-export const frame = setting<FrameStyle | "off">({
-	id: "look.frame.style",
-	default: "rounded",
-	decoder: literal("rounded", "square", "heavy", "line", "off"),
-	project: true,
-	ui: {
-		section: "Editor",
-		label: "Frame",
-		description:
-			"The box around the editor. `line` keeps pi's two rules, `off` leaves the editor alone and moves the frame slots to the footer.",
-	},
-});
-
-export const cursor = setting<CursorStyle>({
-	id: "look.frame.cursor",
-	default: "bar",
-	decoder: literal("block", "bar", "underline"),
-	ui: {
-		section: "Editor",
-		label: "Cursor",
-		description: "Bar and underline use the terminal's own cursor, so it blinks the way it does.",
-	},
-});
-
-export const header = setting<HeaderStyle>({
-	id: "look.header",
-	default: "card",
-	decoder: literal("card", "compact", "off"),
-	project: true,
-	ui: {
-		section: "Start screen",
-		label: "Start screen",
-		description: "The card pi opens with. Off keeps pi's own.",
-	},
-});
+export const SEPARATOR = "  ";
+export const cursor: CursorStyle = "bar";
+export const header: HeaderStyle = "card";
+export const pathLength = 40;
+export const gaugeCells = 8;
+export const labels = true;
 
 export const icons = setting<IconMode>({
 	id: "look.icons",
 	default: "auto",
 	decoder: literal("auto", "nerd", "unicode", "ascii"),
 	ui: {
-		section: "Footer",
+		section: "Appearance",
 		label: "Icons",
 		description: "Auto uses Nerd Font glyphs locally, plain Unicode over SSH.",
+		preview: iconsPreview,
 	},
 });
 
-export const separator = setting<SeparatorStyle>({
-	id: "look.separator",
-	default: "space",
-	decoder: literal("dot", "bar", "slash", "space"),
-	project: true,
-	ui: { section: "Footer", label: "Separator", description: "Between the pieces of a slot." },
-});
-
-export const pathLength = setting({
-	id: "look.pathLength",
-	default: 40,
-	decoder: integer(0, 500),
-	project: true,
-	ui: {
-		section: "Footer",
-		label: "Path length",
-		description: "Longest the folder may be before it is shortened from the left. 0 keeps it all.",
-	},
-});
-
-export const gaugeCells = setting({
-	id: "look.gaugeCells",
-	default: 8,
-	decoder: integer(0, 40),
-	project: true,
-	ui: { section: "Footer", label: "Gauge", description: "Cells in the context gauge. 0 hides it." },
-});
-
-export const labels = setting({
-	id: "look.labels",
-	default: true,
-	decoder: boolean,
+export const frame = setting<FrameStyle | "off">({
+	id: "look.frame.style",
+	default: "rounded",
+	decoder: literal("rounded", "square", "heavy", "line", "off"),
 	project: true,
 	ui: {
-		section: "Footer",
-		label: "Labels",
+		section: "Appearance",
+		label: "Editor frame",
 		description:
-			"A short word before each number (out, in, ttft, took, ctx, cache). Off is denser.",
+			"The lines of the box around the editor. `line` keeps pi's two rules, `off` leaves the editor alone and moves what sits on its edges to the footer.",
+		preview: framePreview,
 	},
 });
 
-export const peek = setting({
-	id: "look.peek",
+export const userFrame = setting({
+	id: "look.userFrame",
 	default: true,
 	decoder: boolean,
 	ui: {
-		section: "Working line",
-		label: "Working line",
+		section: "Appearance",
+		label: "Your messages",
 		description:
-			"The spinner names the state: waiting, thinking, writing, drafting a tool call, running it.",
+			"Your messages in a frame like the tool calls', named you, with no blank row above and below the text. Off keeps pi's block.",
+		preview: userFramePreview,
 	},
 });
 
-export const LOOK_SETTINGS = [
-	strip,
-	stripRight,
-	topLeft,
-	topRight,
-	bottomLeft,
-	bottomRight,
-	below,
-	belowRight,
-	frame,
-	cursor,
-	header,
-	icons,
-	separator,
-	pathLength,
-	gaugeCells,
-	labels,
-	peek,
-];
+export const LOOK_SETTINGS = [icons, frame, userFrame];