@adeildo/pi-look 5.10.1 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-look",
-	"version": "5.10.1",
+	"version": "5.11.1",
 	"description": "Pi's start screen, a framed editor and the footer, redrawn around the data that matters and painted only with the theme's colours.",
 	"keywords": [
 		"pi",
@@ -38,7 +38,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@adeildo/pi-kit": "5.10.1"
+		"@adeildo/pi-kit": "5.11.1"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/render/streaming.ts

@@ -7,6 +7,7 @@ import { resolve } from "node:path";
 // 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 { stripTerminalSequences } from "@earendil-works/pi-tui";
 
 import { tabs } from "./format.ts";
 
@@ -19,6 +20,8 @@ export interface Stream {
 export interface StreamContext {
 	cwd: string;
 	expanded: boolean;
+	/** The model is still writing the call, so the cursor shows and the last key may be cut short. */
+	writing: boolean;
 	/** Shared by every render of one call, which keeps what was read from disk. */
 	state: { streamTarget?: Target };
 }
@@ -50,26 +53,33 @@ export function writeStream(
 	theme: Theme,
 	context: StreamContext,
 ): Stream | undefined {
-	const path = pathOf(args);
+	// The model may write the content before the path, so the stream does not wait for the path.
 	const content = field(args, "content");
-	if (path === undefined || content === undefined) return undefined;
+	if (content === undefined) return undefined;
+	const path = pathOf(args);
 
-	const target = targetOf(path, context);
-	const header = `${pathLine("write", path, theme)}  ${theme.fg("muted", replaces(target))}`;
+	// A path still arriving is not read: it may name another file, or a folder, on the way.
+	const target =
+		path !== undefined && pathSettled(args, context) ? targetOf(path, context) : undefined;
+	const note = target === undefined ? "" : `  ${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 lang = path === undefined ? undefined : getLanguageFromPath(path);
 	const painted = lang
-		? highlightCode(tabs(shown.join("\n")), lang)
-		: shown.map((line) => theme.fg("toolOutput", tabs(line)));
+		? highlightCode(shown.map(printable).join("\n"), lang)
+		: shown.map((line) => theme.fg("toolOutput", printable(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)],
+		lines: [
+			pathLine("write", path, theme) + note,
+			...above(first, gutter, theme),
+			...withCursor(body, theme, context.writing),
+		],
 		progress: [`${lines.length} line${lines.length === 1 ? "" : "s"}`, size(content)],
 	};
 }
@@ -81,7 +91,7 @@ export function editStream(
 ): Stream | undefined {
 	const path = pathOf(args);
 	const edits = editsOf(args);
-	if (path === undefined || edits.length === 0) return undefined;
+	if (edits.length === 0) return undefined;
 
 	let removed = 0;
 	let added = 0;
@@ -89,18 +99,22 @@ export function editStream(
 	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)}`));
+		const lines = editLines(edit, !context.writing || index < edits.length - 1);
+		for (const line of lines.before) diff.push(theme.fg("toolDiffContext", ` ${printable(line)}`));
+		for (const line of lines.out) diff.push(theme.fg("toolDiffRemoved", `-${printable(line)}`));
+		for (const line of lines.in) diff.push(theme.fg("toolDiffAdded", `+${printable(line)}`));
+		for (const line of lines.after) diff.push(theme.fg("toolDiffContext", ` ${printable(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)],
+		lines: [
+			pathLine("edit", path, theme),
+			...above(hidden, 0, theme),
+			...withCursor(shown, theme, context.writing),
+		],
 		progress: [...(edits.length > 1 ? [`edit ${edits.length}`] : []), `-${removed} +${added}`],
 	};
 }
@@ -136,10 +150,29 @@ export function editLines(
 }
 
 /** The first line pi's own renderer draws, so nothing moves when it takes over. */
-function pathLine(tool: string, path: string, theme: Theme): string {
+function pathLine(tool: string, path: string | undefined, theme: Theme): string {
+	const title = theme.fg("toolTitle", theme.bold(tool));
+	// Pi's own stand-in for a path not written yet.
+	if (path === undefined) return `${title} ${theme.fg("toolOutput", "...")}`;
 	const home = homedir();
 	const shown = path.startsWith(home) ? `~${path.slice(home.length)}` : path;
-	return `${theme.fg("toolTitle", theme.bold(tool))} ${theme.fg("accent", shown)}`;
+	return `${title} ${theme.fg("accent", printable(shown))}`;
+}
+
+/**
+ * A line as the terminal can print it inside the frame: a carriage return would send the cursor
+ * back over the border, and a colour code or a bell in the file would reach the terminal.
+ */
+function printable(line: string): string {
+	// oxlint-disable-next-line no-control-regex -- control characters are what this removes
+	return tabs(stripTerminalSequences(line).replace(/[\u0000-\u0008\u000a-\u001f\u007f]/g, ""));
+}
+
+/** A key the model has moved past is complete, and so is every key once the call is written. */
+function pathSettled(args: unknown, context: StreamContext): boolean {
+	if (!context.writing || !isObject(args)) return true;
+	const last = Object.keys(args).at(-1);
+	return last !== "path" && last !== "file_path";
 }
 
 function above(hidden: number, gutter: number, theme: Theme): string[] {
@@ -150,8 +183,8 @@ function above(hidden: number, gutter: number, theme: Theme): string[] {
 	];
 }
 
-function withCursor(lines: readonly string[], theme: Theme): string[] {
-	if (lines.length === 0) return [];
+function withCursor(lines: readonly string[], theme: Theme, writing: boolean): string[] {
+	if (!writing || lines.length === 0) return [...lines];
 	return [...lines.slice(0, -1), `${lines.at(-1)}${theme.fg("accent", CURSOR)}`];
 }
 

package/src/ui/tool-frame.ts

@@ -45,6 +45,7 @@ const RESULT_PREVIEW_LINES = 10;
 
 export function registerToolFrames(scope: FeatureScope): void {
 	const redraws = new Map<string, () => void>();
+	const written = new Map<string, number>();
 	// The set is asked for on every drawing of every frame, and it changes only with the setting.
 	const set = glyphsOf(() => icons.get(scope));
 	scope.events.on(FRAMED, (data) => {
@@ -53,12 +54,20 @@ export function registerToolFrames(scope: FeatureScope): void {
 	scope.events.on(RULING_CHANGED, (data) => {
 		if (isObject(data) && typeof data.toolCallId === "string") redraws.get(data.toolCallId)?.();
 	});
+	// Pi completes every call of a message only when the message ends, so a call the model finished
+	// before writing the next one would go on writing. The provider says when each one ends. Pi tells
+	// the extensions first and hands every call its arguments right after, which draws the frame.
+	scope.on("message_update", (event) => {
+		const update = event.assistantMessageEvent;
+		if (update.type === "toolcall_end") written.set(update.toolCall.id, Date.now());
+	});
 
 	scope.registerToolRenderer((toolName, next) =>
 		framed(scope, next(), {
 			name: toolName,
 			set: () => set().set,
 			redraws,
+			written,
 		}),
 	);
 }
@@ -67,6 +76,8 @@ interface FrameContext {
 	name: string;
 	set: () => IconSet;
 	redraws: Map<string, () => void>;
+	/** When the model finished writing each call, until its frame reads it. */
+	written: Map<string, number>;
 }
 
 function framed(
@@ -95,37 +106,72 @@ function framed(
 			frame.redraws.set(context.toolCallId, context.invalidate);
 			const clock = clockOf(context);
 			const now = Date.now();
-			clock.writingAt ??= now;
-			if (context.argsComplete) clock.writtenAt ??= now;
+			const ended = frame.written.get(context.toolCallId);
+			frame.written.delete(context.toolCallId);
+			// A call replayed from the session, or one already running, was written long ago.
+			const done =
+				ended !== undefined ||
+				context.argsComplete ||
+				context.executionStarted ||
+				!context.isPartial;
+			// Only a call seen while the model wrote it has a time it took to write.
+			if (!done) clock.writingAt ??= now;
+			else clock.writtenAt ??= ended ?? now;
 			if (context.executionStarted) clock.startedAt ??= now;
+			const writing = clock.writtenAt === undefined;
+			const ruling = rulingOf(scope.events, context.toolCallId);
+
+			// Pi hands every call of a message its arguments again on each piece the model writes, so a
+			// call that did not change keeps the frame it has, and its renderer is not asked again.
+			const inputs = [
+				args,
+				theme,
+				ruling,
+				writing,
+				context.expanded,
+				context.isPartial,
+				context.executionStarted,
+			];
+			const last = context.lastComponent;
+			if (last instanceof CallFrame && last.drawnFrom(inputs)) return last;
+
 			const stream = streamer?.(args, theme, {
 				cwd: context.cwd,
 				expanded: context.expanded,
+				writing,
 				state: context.state as object,
 			});
-			const writing = stream !== undefined && !context.argsComplete;
-			// While the model writes, pi's renderer has nothing new to show, so it is not asked.
-			const own = writing
+			// While the model writes, pi's renderer has nothing new to show, so it is not asked. The
+			// frame pads its inside itself, so pi's renderer adds no padding of its own.
+			const streaming = writing && stream !== undefined;
+			const own = streaming
 				? undefined
-				: call(args, theme, { ...context, lastComponent: passed(context.lastComponent) });
+				: call(args, theme, {
+						...context,
+						argsComplete: !writing,
+						outputPad: 0,
+						lastComponent: passed(last),
+					});
 			const body = own === undefined ? drawnBody(stream?.lines ?? []) : orStream(own, stream);
 
-			const box = new CallFrame({
-				theme,
-				icon: toolIcon(frame.name, frame.set()),
-				label: toolLabel(frame.name),
-				body,
-				ruling: rulingOf(scope.events, context.toolCallId),
-				expanded: context.expanded,
-				phase: phaseOf(context),
-				mark: stateMark,
-				set: frame.set,
-				elapsed: elapsedOf(clock, context),
-				progress: writing ? stream.progress : undefined,
-				clock,
-				executing: context.isPartial && context.executionStarted,
-				runningAs: RUNNING_WORDS[frame.name],
-			});
+			const box = new CallFrame(
+				{
+					theme,
+					icon: toolIcon(frame.name, frame.set()),
+					label: toolLabel(frame.name),
+					body,
+					ruling,
+					expanded: context.expanded,
+					phase: phaseOf(context, writing),
+					mark: stateMark,
+					set: frame.set,
+					progress: writing ? stream?.progress : undefined,
+					clock,
+					executing: context.isPartial && context.executionStarted,
+					runningAs: RUNNING_WORDS[frame.name],
+				},
+				inputs,
+			);
 			inner.set(box, own);
 			return box;
 		},
@@ -139,6 +185,7 @@ function framed(
 			clock.resulted = true;
 			const body = result(shown, options, theme, {
 				...context,
+				outputPad: 0,
 				lastComponent: passed(context.lastComponent),
 			});
 			const phase: Phase = options.isPartial ? "running" : context.isError ? "failed" : "done";
@@ -177,13 +224,12 @@ const RUNNING_WORDS: Readonly<Record<string, string>> = {
  * The phase the call closes with while it still has no result: writing the arguments, then waiting
  * to run. A call with a result, live or replayed, stays open for the result half to close.
  */
-function phaseOf(context: {
-	isPartial: boolean;
-	executionStarted: boolean;
-	argsComplete: boolean;
-}): Phase | undefined {
+function phaseOf(
+	context: { isPartial: boolean; executionStarted: boolean },
+	writing: boolean,
+): Phase | undefined {
 	if (!context.isPartial || context.executionStarted) return undefined;
-	return context.argsComplete ? "waiting" : "writing";
+	return writing ? "writing" : "waiting";
 }
 
 function callText(args: unknown, theme: Theme, expanded: boolean): string {
@@ -245,11 +291,26 @@ interface FrameParts {
 /** The top rule, the call inside it, and the phase while the call has nothing to show yet. */
 class CallFrame implements Component {
 	#drawn?: Drawn;
-
-	constructor(private readonly parts: FrameParts & CallParts) {}
+	/** Set when pi or the terminal asks for a fresh drawing, which asks the renderers again. */
+	#stale = false;
+
+	constructor(
+		private readonly parts: FrameParts & CallParts,
+		private readonly inputs: readonly unknown[],
+	) {}
+
+	/** Whether this frame was made from these inputs and nothing asked for it to be made again. */
+	drawnFrom(inputs: readonly unknown[]): boolean {
+		return (
+			!this.#stale &&
+			inputs.length === this.inputs.length &&
+			inputs.every((input, index) => input === this.inputs[index])
+		);
+	}
 
 	invalidate(): void {
 		this.#drawn = undefined;
+		this.#stale = true;
 		this.parts.body.invalidate();
 	}
 
@@ -259,7 +320,8 @@ class CallFrame implements Component {
 		// waits for you does while its dialog is open.
 		const running = this.parts.executing === true && clock?.resulted !== true;
 		const phase = this.parts.phase ?? (running ? "running" : undefined);
-		const time = running && clock !== undefined ? ranFor(clock, true) : this.parts.elapsed;
+		// The time is read on every drawing, so it goes on while nothing new arrives.
+		const time = clock === undefined || phase === undefined ? undefined : timeOf(phase, clock);
 		// The mark of a phase that lasts moves, so it is picked on every drawing.
 		const mark = phase === undefined ? undefined : this.parts.mark(phase, this.parts.set());
 		const body = this.parts.body.render(room(width));
@@ -292,7 +354,6 @@ interface CallParts {
 	phase?: Phase;
 	mark: (phase: Phase, set: IconSet) => string;
 	set: () => IconSet;
-	elapsed?: string;
 	/** What the model has written so far, while it writes. */
 	progress?: readonly string[];
 	clock?: Clock;
@@ -499,11 +560,11 @@ function ranFor(clock: Clock, running: boolean): string | undefined {
 	return end === undefined ? undefined : elapsed(end - clock.startedAt);
 }
 
-/** How long the call has spent waiting to run, which only the call half of the frame asks for. */
-function elapsedOf(clock: Clock, context: { argsComplete: boolean }): string | undefined {
-	if (clock.writingAt === undefined) return undefined;
-	const from = context.argsComplete ? (clock.writtenAt ?? clock.writingAt) : clock.writingAt;
-	return elapsed(Date.now() - from);
+/** How long the call has been in the phase the call half of the frame closes with. */
+function timeOf(phase: Phase, clock: Clock): string | undefined {
+	if (phase === "running") return ranFor(clock, true);
+	const from = phase === "waiting" ? clock.writtenAt : clock.writingAt;
+	return from === undefined ? undefined : elapsed(Date.now() - from);
 }
 
 function elapsed(ms: number): string {