@adeildo/pi-look 5.1.0 → 5.2.0

package/README.md

@@ -1,64 +1,76 @@
-# @adeildo/pi-look
+<h1 align="center">@adeildo/pi-look</h1>
 
-[![npm](https://img.shields.io/npm/v/@adeildo/pi-look)](https://www.npmjs.com/package/@adeildo/pi-look)
+<p align="center">
+  <a href="https://www.npmjs.com/package/@adeildo/pi-look"><img src="https://img.shields.io/npm/v/@adeildo/pi-look" alt="npm"></a>
+  <a href="https://pi.dev"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffelipeadeildo%2Fpi-harness%2Fmain%2Fpackage.json&query=%24.devDependencies%5B%22%40earendil-works%2Fpi-coding-agent%22%5D&label=pi%20SDK&color=6E56CF" alt="pi SDK"></a>
+</p>
 
-[Pi](https://pi.dev)'s start screen, editor, footer and working line, redrawn around the numbers that matter while the agent works. It paints only with the colours of the theme you run, and the screen holds still while the numbers change.
+<p align="center">
+  <strong>Pi's screen, drawn around the numbers that matter while the agent works.</strong><br>
+  The start card, the editor framed with the branch and the model, a box around every command, and a footer with what the session costs.
+</p>
 
-```bash
-pi install npm:@adeildo/pi-look
-```
+<p align="center"><code>pi install npm:@adeildo/pi-look</code></p>
 
-It also comes in [`@adeildo/pi-harness`](../harness), with the rest of the pieces.
+<!-- docs:look/preview -->
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/felipeadeildo/pi-harness/main/packages/look/assets/preview.png" alt="The start card with the model, the folder, the branch and the keys, and below it the framed editor with the branch and folder in its top border and the model and context in its bottom border." width="860">
+  <img src="https://raw.githubusercontent.com/felipeadeildo/pi-harness/main/packages/look/assets/preview.png" alt="Pi with the look: the start card, then the strip with the stopwatch and the last call, the framed editor with the branch, the model and the context, and below it the cost, the tokens, the cache and the average speeds." width="860">
+  <br>
+  <em>The start card, then a prompt halfway through its answer.</em>
 </p>
 
-## What is on the screen
+<!-- /docs -->
 
-**The start card** says what the session starts with: the model and its effort, the folder and the state of the tree, the machine, how many tools, skills, prompts and extensions loaded, and the keys worth knowing, read from your keybindings.
+## The screen
 
-**The strip above the editor** is calm on purpose. Nothing in it moves while the model streams except the stopwatch.
+A finished answer takes a box of its own, so you can see what the model wants to run before it runs. The mark of the tool and its name sit on the top line, the command under them, and the reason it was allowed under that, when another model answered it. A line cuts the command off from what it printed, and the bottom line says how it went: a check, a cross, and how long it took. A command still running says `running` with the time so far. A tool from an MCP server shows its server and tool instead of `mcp__server__tool`.
 
-| Piece                                            | Means                                                                                                                                   |
-| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `0:12  3 calls`                                  | How long the agent has worked on this prompt, and how many calls to the model it made                                                   |
-| `last call 1.7s wait  900ms thought  ↓906 tok/s` | The last call that finished: how long the model took to start, how long it thought before writing, and how fast it wrote. Final numbers |
+<!-- docs:look/call -->
 
-**The frame** around the editor carries the branch with its distance and changes, the folder, the permission mode, the model with an effort meter, and the context. The border takes pi's own effort colour, so it warms up as the model thinks harder and turns to the bash colour in shell mode.
+<p align="center">
+  <img src="https://raw.githubusercontent.com/felipeadeildo/pi-harness/main/packages/look/assets/call.png" alt="Three commands, each in its own box: a bash command with the reason it was allowed and the time it took, a file read, and a command still running." width="860">
+  <br>
+  <em>One command that ran, one a rule let through, and one still going.</em>
+</p>
 
-**The spinner** names the state instead of saying "Working": `waiting` for the first token, `thinking`, `writing`, `drafting bash` while the model writes the call, `running bash` while it runs.
+<!-- /docs -->
 
-**The footer** is the session: the cost, tokens sent and received, the cache hit of the last prompt, the average speeds, and last what other packages report, because it changes the most.
+The strip above the editor is calm on purpose. Nothing moves while the model streams except the stopwatch.
 
-## It holds still
+| Piece                                            | Means                                                                                                   |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
+| `0:12  3 calls`                                  | How long the agent has worked on this prompt, and how many calls to the model it made                   |
+| `last call 1.7s wait  900ms thought  ↓906 tok/s` | The last call: how long the model took to start, how long it thought then wrote, and how fast it writes |
 
-Numbers change on every frame and the screen must not move with them.
+The border around the editor carries the branch with its distance and changes, the folder, the permission mode, the model with an effort meter, and the context. It takes pi's own effort colour, so it warms up as the model thinks harder and turns to the shell colour in bash mode.
 
-- Every number sits in a cell of fixed width, so `  17` and `2.8k` take the same room.
-- A value not known yet shows as `–` in its cell and does not appear later in the middle of the line.
-- The working time is a stopwatch, `0:59` then `1:00`, instead of `59s` then `1m 0s`.
-- An estimate is drawn quieter and does not gain a `~`.
-- The strip and the footer keep their line from the start, so the editor does not jump when the first answer arrives.
+The spinner names the state instead of saying "Working": `waiting` for the first token, `thinking`, `writing`, `drafting bash` while the model writes the call, `running bash` while it runs.
+
+The footer is the session: the cost, the tokens sent and received, the cache of the last prompt, the average speeds, and last what other packages report, because that changes the most.
 
-Every finished answer leaves a small entry in the session with its time to first token and writing time, because pi records usage without a duration. That keeps the averages right after a resume.
+## It holds still
 
-## Your theme, not ours
+Numbers change on every frame, and the screen must not move with them.
 
-The look never names a colour. Every piece names a **theme token**, so it follows whatever theme pi runs: `system`, `dark`, `light`, a JSON of yours, or the desktop theme below. Change the theme and every piece moves with it. The [reference](docs/reference.md#colours) maps each piece to its token.
+- Every number sits in a cell of fixed width, so `  17` and `2.8k` take the same room.
+- A value nobody knows yet shows as `–` and does not appear later in the middle of the line.
+- The working time counts as a stopwatch, `0:59` then `1:00`.
+- An estimate is drawn quieter, so you know it is one.
+- The strip and the footer hold their line from the start, so the editor does not jump when the first answer arrives.
 
-### The desktop theme
+Pi records usage without a duration, so every finished answer leaves one small entry in the session with its time to the first token and its writing time. That is what keeps the averages right after a resume.
 
-If you run [DankMaterialShell](https://github.com/AvengeMedia/DankMaterialShell), matugen already made a palette from your wallpaper. The look turns it into the pi theme `desktop`, writes it to `~/.pi/agent/themes/desktop.json` and rewrites it when the palette changes. Pi reloads the active theme from that folder by itself, so a new wallpaper recolours a running pi. `Switch to it now`, in the Desktop theme section of the settings (`Alt+S`), writes the theme and makes it pi's.
+## Your theme
 
-## Settings
+The look never names a colour. Every piece names a theme token, so it follows whatever theme pi runs, and it moves with it when you change themes. The [reference](docs/reference.md#colours) maps each piece to its token.
 
-`Alt+S` opens them, on the Look tab. You can reorder and move every piece of the strip, the frame and the footer, pick the frame style, the icons and the separator, and switch off what you do not want. The [reference](docs/reference.md#settings) lists every key and every segment.
+If you run [DankMaterialShell](https://github.com/AvengeMedia/DankMaterialShell), matugen already made a palette from your wallpaper. The look turns it into the pi theme `desktop` and rewrites that file when the palette changes, so a new wallpaper recolours a running pi. `Switch to it now`, in the settings, does that at once.
 
-## Credit
+## Settings
 
-The framed editor and the idea of writing into its borders come from [pi-open-tui](https://github.com/OldSuns/pi-open-tui), which this replaces. The segments with priorities, and the status line in the editor border, come from [oh-my-pi](https://github.com/can1357/oh-my-pi).
+`Alt+S` opens them on the Look tab. You can reorder every piece of the strip, the frame and the footer, pick the frame style, the icons and the separator, and switch off what you do not want. The [reference](docs/reference.md#settings) lists every key and every segment.
 
-## License
+The framed editor, and the idea of writing into its borders, come from [pi-open-tui](https://github.com/OldSuns/pi-open-tui), which this replaces. The segments with priorities come from [oh-my-pi](https://github.com/can1357/oh-my-pi).
 
-[MIT](LICENSE)
+Part of [pi-harness](https://github.com/felipeadeildo/pi-harness), which brings every piece in one install.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-look",
-	"version": "5.1.0",
+	"version": "5.2.0",
 	"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.1.0"
+		"@adeildo/pi-kit": "5.2.0"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/index.ts

@@ -42,6 +42,7 @@ import { applyCursor, LookEditor } from "./ui/editor.ts";
 import { FooterComponent, StripComponent } from "./ui/footer.ts";
 import { HeaderComponent, type LoadedCounts } from "./ui/header.ts";
 import type { Screen, SlotName } from "./ui/screen.ts";
+import { registerToolFrames } from "./ui/tool-frame.ts";
 import { type Activity, describe, draftedTool } from "./ui/working.ts";
 
 export { SEGMENT_IDS, SEGMENTS, type SegmentId } from "./render/segments.ts";
@@ -87,6 +88,7 @@ export const look = defineFeature({
 		};
 
 		const screen = createScreen(scope, live, reader, telemetry);
+		registerToolFrames(scope);
 		const repaint = () => live.repaint?.();
 
 		for (const entry of LOOK_SETTINGS) entry.listen(scope, repaint);

package/src/render/tools.ts

@@ -0,0 +1,105 @@
+// 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 type { IconSet } from "./glyphs.ts";
+
+type ToolKind = "shell" | "read" | "search" | "edit" | "web" | "agent" | "mcp" | "other";
+
+const ICONS: Record<IconSet, Record<ToolKind, string>> = {
+	nerd: {
+		shell: "\u{f120}", // nf-fa-terminal
+		read: "\u{f15c}", // nf-fa-file_lines
+		search: "\u{f002}", // nf-fa-search
+		edit: "\u{f044}", // nf-fa-pencil
+		web: "\u{f0ac}", // nf-fa-globe
+		agent: "\u{f06a9}", // nf-md-robot
+		mcp: "\u{f1e6}", // nf-fa-plug
+		other: "\u{f013}", // nf-fa-gear
+	},
+	unicode: {
+		shell: "\u276f",
+		read: "\u25a4",
+		search: "\u2315",
+		edit: "\u270e",
+		web: "\u25cd",
+		agent: "\u25c6",
+		mcp: "\u226b",
+		other: "\u25cb",
+	},
+	ascii: {
+		shell: "$",
+		read: "=",
+		search: "?",
+		edit: "+",
+		web: "@",
+		agent: "*",
+		mcp: ">",
+		other: "-",
+	},
+};
+
+export type CallPhase = "writing" | "waiting" | "running" | "done" | "failed";
+
+const MARKS: Record<IconSet, Record<CallPhase, string>> = {
+	nerd: {
+		writing: "\u{f044}", // nf-fa-pencil
+		waiting: "\u{f252}", // nf-fa-hourglass_half
+		running: "\u{f017}", // nf-fa-clock_o
+		done: "\u{f00c}", // nf-fa-check
+		failed: "\u{f00d}", // nf-fa-times
+	},
+	unicode: {
+		writing: "\u270e",
+		waiting: "\u29d6",
+		running: "\u25f7",
+		done: "\u2713",
+		failed: "\u2717",
+	},
+	ascii: { writing: "~", waiting: ":", running: "...", done: "ok", failed: "!" },
+};
+
+export function stateMark(phase: CallPhase, set: IconSet): string {
+	return MARKS[set][phase];
+}
+
+export function toolIcon(toolName: string, set: IconSet): string {
+	return ICONS[set][toolKind(toolName)];
+}
+
+/** The name as it reads on the frame: an MCP tool says its server rather than `mcp__server__tool`. */
+export function toolLabel(toolName: string): string {
+	const mcp = toolName.match(/^mcp__([^_]+)__(.+)$/u);
+	return mcp === null ? toolName : `${mcp[1]}:${mcp[2]}`;
+}
+
+function toolKind(toolName: string): ToolKind {
+	if (toolName.startsWith("mcp__")) return "mcp";
+	switch (toolName) {
+		case "bash":
+		case "powershell":
+		case "shell":
+			return "shell";
+		case "read":
+		case "ls":
+		case "find":
+			return "read";
+		case "grep":
+		case "glob":
+		case "tool_search":
+			return "search";
+		case "edit":
+		case "write":
+		case "apply_patch":
+			return "edit";
+		case "web_search":
+		case "fetch":
+		case "webfetch":
+		case "web_fetch":
+			return "web";
+		case "task":
+		case "agent":
+		case "subagent":
+			return "agent";
+		default:
+			return "other";
+	}
+}

package/src/ui/tool-frame.ts

@@ -0,0 +1,392 @@
+// 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 {
+	type CallRuling,
+	type FeatureScope,
+	FRAMED,
+	isObject,
+	RULING_CHANGED,
+	type RulingTone,
+	rulingOf,
+} from "@adeildo/pi-kit";
+import type { Theme, ToolRenderers } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	stripTerminalSequences,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+
+import { type IconSet, resolveIcons } from "../render/glyphs.ts";
+import { stateMark, toolIcon, toolLabel } from "../render/tools.ts";
+import { icons } from "../settings.ts";
+
+/** What the call is doing, which is what the bottom rule says while it has no result yet. */
+type Phase = "writing" | "waiting" | "running" | "done" | "failed";
+
+const PHASE_COLORS = {
+	writing: "muted",
+	waiting: "accent",
+	running: "accent",
+	done: "success",
+	failed: "error",
+} as const;
+const BODY_PAD = 4;
+
+export function registerToolFrames(scope: FeatureScope): void {
+	const redraws = new Map<string, () => void>();
+	scope.events.on(FRAMED, (data) => {
+		if (isObject(data)) data.framed = true;
+	});
+	scope.events.on(RULING_CHANGED, (data) => {
+		if (isObject(data) && typeof data.toolCallId === "string") redraws.get(data.toolCallId)?.();
+	});
+
+	scope.registerToolRenderer((toolName, next) =>
+		framed(scope, next(), {
+			name: toolName,
+			set: () => resolveIcons(icons.get(scope)).set,
+			redraws,
+		}),
+	);
+}
+
+interface FrameContext {
+	name: string;
+	set: () => IconSet;
+	redraws: Map<string, () => void>;
+}
+
+function framed(
+	scope: FeatureScope,
+	base: ToolRenderers | undefined,
+	frame: FrameContext,
+): ToolRenderers | undefined {
+	// Pi drops the whole chain when a resolver answers nothing, so a tool it cannot frame keeps
+	// whatever the next resolver drew.
+	const call = base?.renderCall;
+	const result = base?.renderResult;
+	if (base === undefined || call === undefined || result === undefined) return base;
+
+	// 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>();
+	const passed = (last: Component | undefined): Component | undefined =>
+		last === undefined ? undefined : (inner.get(last) ?? last);
+
+	return {
+		...base,
+		// The frame is the shell, so pi does not wrap it in a box of its own.
+		renderShell: "self",
+		renderCall(args, theme, context) {
+			frame.redraws.set(context.toolCallId, context.invalidate);
+			const clock = clockOf(context);
+			const now = Date.now();
+			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 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: context.executionStarted ? undefined : context.argsComplete ? "waiting" : "writing",
+				mark: stateMark,
+				set: frame.set,
+				elapsed: elapsedOf(clock, context),
+			});
+			inner.set(box, body);
+			return box;
+		},
+		renderResult(shown, options, theme, context) {
+			const clock = clockOf(context);
+			// A blocked call prints nothing but the reason the line above already gives.
+			const blocked = rulingOf(scope.events, context.toolCallId)?.blocked === true;
+			// 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();
+			const body = result(shown, options, theme, {
+				...context,
+				lastComponent: passed(context.lastComponent),
+			});
+			const phase: Phase = options.isPartial ? "running" : context.isError ? "failed" : "done";
+			const box = new ResultFrame({
+				theme,
+				body,
+				quiet: blocked,
+				phase,
+				mark: stateMark(phase, frame.set()),
+				elapsed: ranFor(clock, phase === "running"),
+				wrote: wroteFor(clock),
+				images: images === 0 ? undefined : `${images} image${images === 1 ? "" : "s"}`,
+			});
+			inner.set(box, body);
+			return box;
+		},
+	};
+}
+
+interface FrameParts {
+	theme: Theme;
+	body: Component;
+}
+
+/** 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) {}
+
+	invalidate(): void {
+		this.#drawn = undefined;
+		this.parts.body.invalidate();
+	}
+
+	render(width: number): string[] {
+		const { theme, icon, label, ruling, expanded, phase } = this.parts;
+		const body = this.parts.body.render(room(width));
+		const drawn = { width, body, rest: [ruling, expanded, phase, this.parts.elapsed] };
+		if (unchanged(this.#drawn, drawn)) return this.#drawn.lines;
+
+		const title = `${theme.fg("toolTitle", icon)} ${theme.fg("toolTitle", theme.bold(label))}`;
+		const lines = [rule("top", title, width, theme), ...inside(withoutBlanks(body), width, theme)];
+		// The decision is about the call, so it stays with the call.
+		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]),
+			);
+		}
+		this.#drawn = { ...drawn, lines };
+		return lines;
+	}
+}
+
+interface CallParts {
+	icon: string;
+	label: string;
+	ruling?: CallRuling;
+	expanded: boolean;
+	phase?: Phase;
+	mark: (phase: Phase, set: IconSet) => string;
+	set: () => IconSet;
+	elapsed?: string;
+}
+
+/** The result, behind a cut, and the bottom rule with how it went and how long it took. */
+class ResultFrame implements Component {
+	#drawn?: Drawn;
+
+	constructor(private readonly parts: FrameParts & ResultParts) {}
+
+	invalidate(): void {
+		this.#drawn = undefined;
+		this.parts.body.invalidate();
+	}
+
+	render(width: number): string[] {
+		const { theme, phase, mark, wrote, quiet, images } = this.parts;
+		const time = this.parts.elapsed;
+		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 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)]),
+			rule(
+				"bottom",
+				phaseLabel(theme, mark, phase, [
+					time,
+					wrote === undefined ? undefined : `wrote ${wrote}`,
+					images === undefined ? undefined : `with ${images}`,
+				]),
+				width,
+				theme,
+				PHASE_COLORS[phase],
+			),
+		];
+		this.#drawn = { ...drawn, lines };
+		return lines;
+	}
+}
+
+interface ResultParts {
+	phase: Phase;
+	mark: string;
+	elapsed?: string;
+	wrote?: string;
+	/** How many pictures follow the frame, which pi draws outside it. */
+	images?: string;
+	/** Nothing worth printing under the line, like a call the gate blocked. */
+	quiet?: boolean;
+}
+
+/** One rule of the frame: two corners, and what sits on the left. */
+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 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, "");
+}
+
+/** 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, "");
+}
+
+/** The bottom rule: what the call is doing, how long it ran, and how long the model took to write it. */
+function phaseLabel(
+	theme: Theme,
+	mark: string,
+	phase: Phase,
+	times: readonly (string | undefined)[],
+): 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(
+		"  ",
+	);
+}
+
+function inside(lines: readonly string[], width: number, theme: Theme): string[] {
+	const paint = (text: string) => theme.fg("border", text);
+	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, "\u2026", true) : line;
+		const pad = " ".repeat(Math.max(0, inner - visibleWidth(text)));
+		return `${paint("\u2502")} ${text}${pad} ${paint("\u2502")}`;
+	});
+}
+
+interface Drawn {
+	width: number;
+	body: readonly string[];
+	/** What the frame drew around the body: the ruling, the phase, the times. */
+	rest: readonly unknown[];
+	lines: string[];
+}
+
+/** Whether the frame was already drawn for this body and this state, which keeps typing cheap. */
+function unchanged(drawn: Drawn | undefined, next: Omit<Drawn, "lines">): drawn is Drawn {
+	if (drawn === undefined || drawn.width !== next.width) return false;
+	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]);
+}
+
+function room(width: number): number {
+	return Math.max(1, width - BODY_PAD);
+}
+
+/** 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));
+	if (at === -1) return [...lines];
+	if (!/^(Took|Elapsed) [\d.]/u.test(stripTerminalSequences(lines[at] ?? "").trim()))
+		return [...lines];
+	return lines.slice(0, at);
+}
+
+interface Clock {
+	/** When the model started writing the call, and when it finished. */
+	writingAt?: number;
+	writtenAt?: number;
+	/** When the call started running, and when it answered. */
+	startedAt?: number;
+	endedAt?: number;
+}
+
+/** Pi shares one state object between the two halves of a call. */
+function clockOf(context: { state: unknown }): Clock {
+	return context.state as Clock;
+}
+
+/** How long the model took to write the call. */
+function wroteFor(clock: Clock): string | undefined {
+	if (clock.writingAt === undefined || clock.writtenAt === undefined) return undefined;
+	return elapsed(clock.writtenAt - clock.writingAt);
+}
+
+function ranFor(clock: Clock, running: boolean): string | undefined {
+	if (clock.startedAt === undefined) return undefined;
+	const end = clock.endedAt ?? (running ? Date.now() : 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);
+}
+
+function elapsed(ms: number): string {
+	const seconds = ms / 1000;
+	if (seconds < 60) return `${seconds.toFixed(1)}s`;
+	const total = Math.floor(seconds);
+	if (total < 3600) return `${Math.floor(total / 60)}m ${total % 60}s`;
+	return `${Math.floor(total / 3600)}h ${Math.floor((total % 3600) / 60)}m`;
+}
+
+/** Pi's renderers pad their part with blank lines, which the frame does not need. */
+function trim(lines: readonly string[]): string[] {
+	let [from, to] = [0, lines.length];
+	while (from < to && isBlank(lines[from])) from++;
+	while (to > from && isBlank(lines[to - 1])) to--;
+	return lines.slice(from, to);
+}
+
+/** A renderer that separates its parts with a blank line leaves a gap the frame does not need. */
+function withoutBlanks(lines: readonly string[]): string[] {
+	return lines.filter((line) => !isBlank(line));
+}
+
+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}`;
+	if (ruling.why) line += `  ${theme.fg("muted", ruling.why)}`;
+	if (expanded && ruling.detail) line += ` ${theme.fg("dim", `(${ruling.detail})`)}`;
+	return line;
+}
+
+function stateOf(tone: RulingTone): Phase {
+	switch (tone) {
+		case "pending":
+			return "running";
+		case "success":
+			return "done";
+		default:
+			return "failed";
+	}
+}