@adeildo/pi-look 5.9.2 → 5.10.0

package/src/ui/tool-frame.ts

@@ -1,6 +1,7 @@
 // Draws every tool call in a frame of its own: the mark and the name on the top rule, the call and
 // its result inside, and how it went on the bottom rule.
 import {
+	CUT,
 	type CallRuling,
 	type FeatureScope,
 	FRAMED,
@@ -8,6 +9,8 @@ import {
 	RULING_CHANGED,
 	type RulingTone,
 	rulingOf,
+	GLYPH,
+	LINE,
 } from "@adeildo/pi-kit";
 import type { Theme, ToolRenderers } from "@earendil-works/pi-coding-agent";
 import {
@@ -19,7 +22,9 @@ import {
 	visibleWidth,
 } from "@earendil-works/pi-tui";
 
-import { type IconSet, resolveIcons } from "../render/glyphs.ts";
+import { tabs } from "../render/format.ts";
+import { type IconSet, glyphsOf } from "../render/glyphs.ts";
+import { type Stream, STREAMERS } from "../render/streaming.ts";
 import { stateMark, toolIcon, toolLabel } from "../render/tools.ts";
 import { icons } from "../settings.ts";
 
@@ -40,6 +45,8 @@ const RESULT_PREVIEW_LINES = 10;
 
 export function registerToolFrames(scope: FeatureScope): void {
 	const redraws = new Map<string, () => void>();
+	// 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) => {
 		if (isObject(data)) data.framed = true;
 	});
@@ -50,7 +57,7 @@ export function registerToolFrames(scope: FeatureScope): void {
 	scope.registerToolRenderer((toolName, next) =>
 		framed(scope, next(), {
 			name: toolName,
-			set: () => resolveIcons(icons.get(scope)).set,
+			set: () => set().set,
 			redraws,
 		}),
 	);
@@ -73,10 +80,12 @@ function framed(
 	const result = base?.renderResult ?? genericResult;
 
 	// A renderer of pi's own mutates the component it returned last time, which sits inside the
-	// frame, so it gets that one back instead of the frame.
-	const inner = new WeakMap<Component, Component>();
+	// frame, so it gets that one back instead of the frame. A frame that showed the stream instead
+	// holds no component of pi's.
+	const inner = new WeakMap<Component, Component | undefined>();
 	const passed = (last: Component | undefined): Component | undefined =>
-		last === undefined ? undefined : (inner.get(last) ?? last);
+		last === undefined || !inner.has(last) ? last : inner.get(last);
+	const streamer = STREAMERS[frame.name];
 
 	return {
 		...base,
@@ -89,7 +98,17 @@ function framed(
 			clock.writingAt ??= now;
 			if (context.argsComplete) clock.writtenAt ??= now;
 			if (context.executionStarted) clock.startedAt ??= now;
-			const body = call(args, theme, { ...context, lastComponent: passed(context.lastComponent) });
+			const stream = streamer?.(args, theme, {
+				cwd: context.cwd,
+				expanded: context.expanded,
+				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
+				? undefined
+				: call(args, theme, { ...context, lastComponent: passed(context.lastComponent) });
+			const body = own === undefined ? drawnBody(stream?.lines ?? []) : orStream(own, stream);
 
 			const box = new CallFrame({
 				theme,
@@ -102,8 +121,12 @@ function framed(
 				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],
 			});
-			inner.set(box, body);
+			inner.set(box, own);
 			return box;
 		},
 		renderResult(shown, options, theme, context) {
@@ -113,6 +136,7 @@ function framed(
 			// Pi draws the pictures of a result right below the frame, so the frame counts them.
 			const images = shown.content.filter((block) => block.type === "image").length;
 			if (!options.isPartial) clock.endedAt ??= Date.now();
+			clock.resulted = true;
 			const body = result(shown, options, theme, {
 				...context,
 				lastComponent: passed(context.lastComponent),
@@ -123,7 +147,7 @@ function framed(
 				body,
 				quiet: blocked,
 				phase,
-				mark: stateMark(phase, frame.set()),
+				set: frame.set,
 				elapsed: ranFor(clock, phase === "running"),
 				wrote: wroteFor(clock),
 				images: images === 0 ? undefined : `${images} image${images === 1 ? "" : "s"}`,
@@ -144,6 +168,11 @@ const genericCall: NonNullable<ToolRenderers["renderCall"]> = (args, theme, cont
 const genericResult: NonNullable<ToolRenderers["renderResult"]> = (result, options, theme) =>
 	new Text(resultText(result, options.expanded, theme), 0, 0);
 
+/** What a running call is doing, for tools whose running means something else. */
+const RUNNING_WORDS: Readonly<Record<string, string>> = {
+	ask_questions: "waiting for your answer",
+};
+
 /**
  * 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.
@@ -168,7 +197,7 @@ function callText(args: unknown, theme: Theme, expanded: boolean): string {
 		const lines = entries.map(([key, value]) => {
 			const text =
 				typeof value === "string" ? value : (JSON.stringify(value, null, 2) ?? String(value));
-			return `  ${key}: ${replaceTabs(text).split("\n").join("\n    ")}`;
+			return `  ${key}: ${tabs(text).split("\n").join("\n    ")}`;
 		});
 		return theme.fg("muted", lines.join("\n"));
 	}
@@ -208,10 +237,6 @@ function expandHint(theme: Theme): string {
 	return `${theme.fg("dim", keys.join("/"))}${theme.fg("muted", " to expand")}`;
 }
 
-function replaceTabs(text: string): string {
-	return text.replace(/\t/g, "   ");
-}
-
 interface FrameParts {
 	theme: Theme;
 	body: Component;
@@ -229,9 +254,17 @@ class CallFrame implements Component {
 	}
 
 	render(width: number): string[] {
-		const { theme, icon, label, ruling, expanded, phase } = this.parts;
+		const { theme, icon, label, ruling, expanded, clock } = this.parts;
+		// A running call closes too until its result draws the rest of the frame, as a call that
+		// 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 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));
-		const drawn = { width, body, rest: [ruling, expanded, phase, this.parts.elapsed] };
+		const progress = this.parts.progress?.join("\u0000");
+		const drawn = { width, body, rest: [ruling, expanded, phase, time, progress, mark] };
 		if (unchanged(this.#drawn, drawn)) return this.#drawn.lines;
 
 		const title = `${theme.fg("toolTitle", icon)} ${theme.fg("toolTitle", theme.bold(label))}`;
@@ -240,12 +273,11 @@ class CallFrame implements Component {
 		if (ruling !== undefined)
 			lines.push(...inside([rulingText(ruling, theme, expanded)], width, theme));
 		// The call has nothing else to show yet, so the frame closes with what it is doing.
-		if (phase !== undefined) {
-			const mark = this.parts.mark(phase, this.parts.set());
-			const times = [this.parts.elapsed];
-			lines.push(
-				rule("bottom", phaseLabel(theme, mark, phase, times), width, theme, PHASE_COLORS[phase]),
-			);
+		if (phase !== undefined && mark !== undefined) {
+			const times = [time, ...(this.parts.progress ?? [])];
+			const word = phase === "running" ? this.parts.runningAs : undefined;
+			const closing = phaseLabel(theme, mark, phase, times, word);
+			lines.push(rule("bottom", closing, width, theme, PHASE_COLORS[phase]));
 		}
 		this.#drawn = { ...drawn, lines };
 		return lines;
@@ -261,6 +293,33 @@ interface CallParts {
 	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;
+	/** The call runs and its result is not final. */
+	executing?: boolean;
+	/** The word for running, when the tool's running means something else. */
+	runningAs?: string;
+}
+
+/** Lines that are already drawn. The frame cuts the ones too wide for it. */
+function drawnBody(drawn: readonly string[]): Component {
+	return { render: () => [...drawn], invalidate: () => {} };
+}
+
+/**
+ * Pi's own body, or the stream while pi's body is only its first line, as when an edit's diff is
+ * still being read from the file after the model finished writing.
+ */
+function orStream(own: Component, stream: Stream | undefined): Component {
+	if (stream === undefined) return own;
+	return {
+		render(width) {
+			const drawn = own.render(width);
+			return withoutBlanks(drawn).length > 1 ? drawn : [...stream.lines];
+		},
+		invalidate: () => own.invalidate(),
+	};
 }
 
 /** The result, behind a cut, and the bottom rule with how it went and how long it took. */
@@ -275,13 +334,15 @@ class ResultFrame implements Component {
 	}
 
 	render(width: number): string[] {
-		const { theme, phase, mark, wrote, quiet, images } = this.parts;
+		const { theme, phase, wrote, quiet, images } = this.parts;
 		const time = this.parts.elapsed;
+		const mark = stateMark(phase, this.parts.set());
 		const body = this.parts.body.render(room(width));
 		const drawn = { width, body, rest: [phase, mark, time, wrote, images, quiet] };
 		if (unchanged(this.#drawn, drawn)) return this.#drawn.lines;
 
-		const printed = quiet === true ? [] : withoutBlanks(dropTime(body));
+		const printed =
+			quiet === true ? [] : withoutBlanks(dropTime(body)).map((line) => hidden(line, theme));
 		const lines = [
 			// The cut opens what the call printed, and a call with nothing to print has no cut.
 			...(printed.length === 0 ? [] : [cut(width, theme), ...inside(printed, width, theme)]),
@@ -304,7 +365,7 @@ class ResultFrame implements Component {
 
 interface ResultParts {
 	phase: Phase;
-	mark: string;
+	set: () => IconSet;
 	elapsed?: string;
 	wrote?: string;
 	/** How many pictures follow the frame, which pi draws outside it. */
@@ -314,28 +375,31 @@ interface ResultParts {
 }
 
 /** One rule of the frame: two corners, and what sits on the left. */
-function rule(
+export function rule(
 	edge: "top" | "bottom",
 	left: string,
 	width: number,
 	theme: Theme,
 	color: "accent" | "success" | "error" | "muted" | "border" = "border",
 ): string {
-	const [start, end] = edge === "top" ? ["\u256d", "\u256e"] : ["\u2570", "\u256f"];
+	const [start, end] =
+		edge === "top" ? [LINE.topLeft, LINE.topRight] : [LINE.bottomLeft, LINE.bottomRight];
 	const paint = (text: string) => theme.fg(color, text);
 	const cell = left === "" ? "" : ` ${left} `;
 	const fill = Math.max(1, width - BODY_PAD - visibleWidth(cell));
 	const line =
-		paint(`${start}\u2500`) + cell + paint("\u2500".repeat(fill)) + paint(`\u2500${end}`);
-	return truncateToWidth(line, width, "");
+		paint(`${start}${LINE.h}`) + cell + paint(LINE.h.repeat(fill)) + paint(`${LINE.h}${end}`);
+	// A rule with room to fill is the width already; only a label that filled the row needs cutting.
+	return fill === 1 ? truncateToWidth(line, width, "") : line;
 }
 
 /** The line that ends the call and starts what it printed. */
 function cut(width: number, theme: Theme): string {
 	const paint = (text: string) => theme.fg("border", text);
 	const fill = Math.max(1, width - BODY_PAD);
-	const line = `${paint("\u251c")}${paint("\u2500".repeat(fill + 2))}${paint("\u2524")}`;
-	return truncateToWidth(line, width, "");
+	const line = `${paint(LINE.teeLeft)}${paint(LINE.h.repeat(fill + 2))}${paint(LINE.teeRight)}`;
+	// Room for the fill means the cut is the width already.
+	return fill === 1 ? truncateToWidth(line, width, "") : line;
 }
 
 /** The bottom rule: what the call is doing, how long it ran, and how long the model took to write it. */
@@ -344,13 +408,12 @@ function phaseLabel(
 	mark: string,
 	phase: Phase,
 	times: readonly (string | undefined)[],
+	word: string = phase,
 ): string {
 	const cells = times
 		.filter((time) => time !== undefined)
 		.map((time) => theme.fg("dim", time ?? ""));
-	return [`${theme.fg(PHASE_COLORS[phase], mark)} ${theme.fg("muted", phase)}`, ...cells].join(
-		"  ",
-	);
+	return [`${theme.fg(PHASE_COLORS[phase], mark)} ${theme.fg("muted", word)}`, ...cells].join("  ");
 }
 
 function inside(lines: readonly string[], width: number, theme: Theme): string[] {
@@ -358,9 +421,9 @@ function inside(lines: readonly string[], width: number, theme: Theme): string[]
 	const inner = room(width);
 	return trim(lines).map((line) => {
 		// Measuring is cheap, and cutting a line that already fits is not.
-		const text = visibleWidth(line) > inner ? truncateToWidth(line, inner, "...", true) : line;
+		const text = visibleWidth(line) > inner ? truncateToWidth(line, inner, CUT, true) : line;
 		const pad = " ".repeat(Math.max(0, inner - visibleWidth(text)));
-		return `${paint("\u2502")} ${text}${pad} ${paint("\u2502")}`;
+		return `${paint(LINE.v)} ${text}${pad} ${paint(LINE.v)}`;
 	});
 }
 
@@ -378,13 +441,27 @@ function unchanged(drawn: Drawn | undefined, next: Omit<Drawn, "lines">): drawn
 	if (drawn.body.length !== next.body.length || drawn.rest.length !== next.rest.length)
 		return false;
 	if (drawn.rest.some((part, index) => part !== next.rest[index])) return false;
-	return drawn.body.every((line, index) => line === next.body[index]);
+	// A renderer that kept its lines hands back the same array, which saves comparing a long output.
+	return drawn.body === next.body || drawn.body.every((line, index) => line === next.body[index]);
 }
 
 function room(width: number): number {
 	return Math.max(1, width - BODY_PAD);
 }
 
+/** Pi's note on the lines it cut from an output, as `... (240 earlier lines, ctrl+o to expand)`. */
+const HIDDEN = /^\.\.\. \((\d+) (earlier|more) lines, (.+?) to expand\)$/u;
+
+/** Pi's note on cut lines, in the frame's words: which way they are, how many, and the key. */
+export function hidden(line: string, theme: Theme): string {
+	const match = HIDDEN.exec(stripTerminalSequences(line).trim());
+	if (match === null) return line;
+	const [, count, side, key] = match;
+	const where = side === "earlier" ? "above" : "below";
+	const lines = theme.fg("muted", `${count} lines ${where}`);
+	return `${theme.fg("dim", GLYPH.ellipsisUp)} ${lines}  ${theme.fg("dim", key ?? "")}`;
+}
+
 /** Pi prints the time of a call itself, and the frame says it on the bottom rule instead. */
 function dropTime(lines: readonly string[]): string[] {
 	const at = lines.findLastIndex((line) => !isBlank(line));
@@ -401,6 +478,8 @@ interface Clock {
 	/** When the call started running, and when it answered. */
 	startedAt?: number;
 	endedAt?: number;
+	/** Pi drew the result half, which closes the frame from then on. */
+	resulted?: boolean;
 }
 
 /** Pi shares one state object between the two halves of a call. */
@@ -448,15 +527,15 @@ function withoutBlanks(lines: readonly string[]): string[] {
 	return lines.filter((line) => !isBlank(line));
 }
 
-function isBlank(line: string | undefined): boolean {
+export function isBlank(line: string | undefined): boolean {
 	// A line of nothing but colour codes reads as blank, and pi's renderers end their parts with one.
 	return stripTerminalSequences(line ?? "").trim() === "";
 }
 
 export function rulingText(ruling: CallRuling, theme: Theme, expanded: boolean): string {
 	const color = PHASE_COLORS[stateOf(ruling.tone)];
-	let line = `${theme.fg(color, "\u25c8")} ${theme.fg(color, ruling.head)}`;
-	if (ruling.note) line += ` ${theme.fg("accent", "\u203a")} ${ruling.note}`;
+	let line = `${theme.fg(color, GLYPH.judge)} ${theme.fg(color, ruling.head)}`;
+	if (ruling.note) line += ` ${theme.fg("accent", GLYPH.chevron)} ${ruling.note}`;
 	if (ruling.why) line += `  ${theme.fg("muted", ruling.why)}`;
 	if (expanded && ruling.detail) line += ` ${theme.fg("dim", `(${ruling.detail})`)}`;
 	return line;