@adeildo/pi-look 4.1.0 → 5.1.0

package/src/render/segments.ts

@@ -1,6 +1,3 @@
-// What each piece says. A segment is a pure function of the snapshot: it returns a piece, with an
-// optional shorter form and a priority, or nothing when it has nothing to say. Where a segment goes is
-// the layout's business, so any segment can sit in any slot.
 import type { Snapshot } from "../data/snapshot.ts";
 import { promptOf, tokensOf, type Totals } from "../data/totals.ts";
 import type { Piece } from "./fit.ts";
@@ -35,6 +32,7 @@ export const SEGMENT_IDS = [
 	"context",
 	"speed",
 	"wait",
+	"server",
 	"elapsed",
 	"last",
 	"request",
@@ -47,12 +45,10 @@ export const SEGMENT_IDS = [
 ] as const;
 
 export type BuiltinSegment = (typeof SEGMENT_IDS)[number];
-/** One package's status on its own, by the key it passes to `setStatus`. */
 export type StatusSegment = `status:${string}`;
 export type SegmentId = BuiltinSegment | StatusSegment;
 
 const STATUS_PREFIX = "status:";
-/** A status placed on its own is something its package wants seen, like the permission mode. */
 const STATUS_PRIORITY = 95;
 
 export function isSegmentId(value: string): value is SegmentId {
@@ -62,7 +58,6 @@ export function isSegmentId(value: string): value is SegmentId {
 	);
 }
 
-/** The status keys a layout places on their own, which the `statuses` segment then leaves out. */
 export function claimedStatuses(slots: readonly (readonly SegmentId[])[]): Set<string> {
 	const claimed = new Set<string>();
 	for (const ids of slots) {
@@ -73,13 +68,9 @@ export function claimedStatuses(slots: readonly (readonly SegmentId[])[]): Set<s
 }
 
 export interface SegmentOptions {
-	/** Longest the folder may be before it is shortened from the left. 0 keeps all of it. */
 	pathLength: number;
-	/** Cells in the context gauge. 0 draws no gauge. */
 	gaugeCells: number;
-	/** Status keys placed on their own somewhere in the layout. */
 	claimed: ReadonlySet<string>;
-	/** A short word before each number, saying what it is. */
 	labels: boolean;
 }
 
@@ -93,9 +84,7 @@ export interface SegmentInput {
 type Rendered = Omit<Piece, "priority"> | undefined;
 
 interface Segment {
-	/** Higher stays longer when the line runs out of room. */
 	priority: number;
-	/** One line for the docs and the settings screen. */
 	describe: string;
 	render(input: SegmentInput): Rendered;
 }
@@ -201,7 +190,6 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 		},
 	},
 	effort: {
-		// The frame is already painted in the effort colour, so the meter can go before the context.
 		priority: 80,
 		describe: "how hard the model thinks, as a meter that warms with the level",
 		render: ({ snapshot, glyphs, paint }) => {
@@ -242,7 +230,6 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 		render: ({ snapshot, glyphs, paint, options }) => {
 			const request = snapshot.request;
 			if (request === undefined) return undefined;
-			// An estimate is drawn quieter until the provider says the real count; a `~` would change the width.
 			const out = speedCell(request.decode);
 			const value = request.estimated ? paint.muted(out) : paint.bold(paint.role("speed", out));
 			const down = `${flow("received", glyphs, paint, options)}${value}`;
@@ -254,11 +241,12 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 	},
 	wait: {
 		priority: 55,
-		describe: "time to first token (ttft): how long the model took to start answering",
+		describe:
+			"time to first token (ttft): from the request leaving to the model writing its first token",
 		render: ({ snapshot, glyphs, paint, options }) => {
 			const request = snapshot.request;
 			if (request === undefined) return undefined;
-			const ms = request.waiting ? request.elapsedMs : request.firstTokenMs;
+			const ms = request.waiting ? request.waitingMs : request.waitMs;
 			const icon = glyphs.wait === "" ? "" : `${paint.role("wait", glyphs.wait)} `;
 			const value = cell(ms === undefined ? UNKNOWN : latency(ms), CELL.latency);
 			return {
@@ -275,38 +263,53 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 			if (run === undefined) return undefined;
 			const role: Role = run.running ? "running" : "done";
 			const icon = mark(run.running ? glyphs.running : glyphs.done, paint, role);
-			// A stopwatch keeps its shape as it counts, so the line does not move while it ticks.
 			const time = paint.role(role, stopwatch(run.elapsedMs));
 			const calls =
 				run.requests <= 1
 					? ""
-					: paint.dim(options.labels ? ` · ${run.requests} calls` : ` ×${run.requests}`);
+					: paint.dim(options.labels ? `  ${run.requests} calls` : ` ×${run.requests}`);
 			return { text: `${icon}${time}${calls}`, compact: `${icon}${time}` };
 		},
 	},
 	last: {
 		priority: 55,
 		describe:
-			"the last call to the model that finished: its wait for the first token and its writing speed",
+			"the last call that finished: how long the model took to start, how long it thought, and how fast it wrote",
 		render: ({ snapshot, glyphs, paint, options }) => {
 			const last = snapshot.last;
 			if (last === undefined) return undefined;
 			const parts: string[] = [];
-			if (last.firstTokenMs !== undefined) {
-				const wait = paint.role("wait", latency(last.firstTokenMs));
+			if (last.waitMs !== undefined) {
+				const wait = paint.role("wait", latency(last.waitMs));
 				parts.push(
 					options.labels
 						? `${wait}${paint.dim(" wait")}`
 						: `${mark(glyphs.wait, paint, "wait")}${wait}`,
 				);
 			}
+			if (last.thoughtMs !== undefined) {
+				const thought = paint.role("wait", latency(last.thoughtMs));
+				parts.push(
+					options.labels ? `${thought}${paint.dim(" thought")}` : `${thought}${paint.dim(" th")}`,
+				);
+			}
 			if (last.decode !== undefined) {
 				const speed = `${paint.role("received", glyphs.received)}${paint.role("speed", rate(last.decode))}`;
 				parts.push(`${speed}${paint.dim(" tok/s")}`);
 			}
 			if (parts.length === 0) return undefined;
 			const label = options.labels ? paint.dim("last call ") : "";
-			return { text: `${label}${parts.join(paint.dim(" · "))}`, compact: parts[0] };
+			return { text: `${label}${parts.join("  ")}`, compact: parts[0] };
+		},
+	},
+	server: {
+		priority: 53,
+		describe:
+			"how long the provider took to answer the request, before the model wrote anything: send to headers",
+		render: ({ snapshot, paint }) => {
+			const ms = snapshot.last?.serverMs;
+			if (ms === undefined) return undefined;
+			return { text: `${paint.role("wait", latency(ms))}${paint.dim(" server")}` };
 		},
 	},
 	request: {
@@ -318,7 +321,6 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 			const sent = usage.input + usage.cacheRead + usage.cacheWrite;
 			const up = `${flow("sent", glyphs, paint, options)}${tokenCell(sent)}`;
 			const down = `${flow("received", glyphs, paint, options)}${tokenCell(usage.output)}`;
-			// Both cache cells are always there, so the breakdown never appears in the middle of the line.
 			const cache = cacheParts(usage, glyphs, paint, options, true);
 			return {
 				text: `${up} ${paint.dim("(")}${cache}${paint.dim(")")} ${down}`,
@@ -424,14 +426,13 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 			if (texts.length === 0) return undefined;
 			const icon = glyphs.plug === "" ? "" : `${paint.dim(glyphs.plug)} `;
 			return {
-				text: `${icon}${texts.join(paint.dim(" · "))}`,
+				text: `${icon}${texts.join("  ")}`,
 				compact: `${icon}${texts[0] ?? ""}`,
 			};
 		},
 	},
 };
 
-/** The pieces for one slot, in the order the slot lists them. */
 export function renderSegments(ids: readonly SegmentId[], input: SegmentInput): Piece[] {
 	return ids.flatMap((id): Piece[] => {
 		if (id.startsWith(STATUS_PREFIX)) {
@@ -452,10 +453,6 @@ function counted(value: number, glyph: string, role: Role, paint: Paint): string
 	return value > 0 ? paint.role(role, `${glyph}${value}`) : "";
 }
 
-/**
- * Read from the cache, and written to it. With labels: `cache read 80k · wrote 1.3k`. `fixed` keeps both
- * cells with a dash for zero, for a line that must not change shape.
- */
 function cacheParts(
 	usage: Totals,
 	glyphs: Glyphs,
@@ -471,7 +468,7 @@ function cacheParts(
 			read === "" ? "" : `${paint.dim("read ")}${paint.role("cache", read)}`,
 			write === "" ? "" : `${paint.dim("wrote ")}${paint.role("cache", write)}`,
 		].filter((part) => part !== "");
-		return parts.length === 0 ? "" : `${paint.dim("cache ")}${parts.join(paint.dim(" · "))}`;
+		return parts.length === 0 ? "" : `${paint.dim("cache ")}${parts.join("  ")}`;
 	}
 	return [
 		read === "" ? "" : `${paint.role("cache", glyphs.cacheRead)}${read}`,
@@ -481,10 +478,6 @@ function cacheParts(
 		.join(" ");
 }
 
-/**
- * The direction of a flow of tokens, from where you sit: ↑ in, what is sent to the model, and ↓ out,
- * what comes back. With labels the word follows the arrow.
- */
 function flow(
 	role: "sent" | "received",
 	glyphs: Glyphs,
@@ -496,7 +489,6 @@ function flow(
 	return paint.role(role, options.labels ? `${arrow}${name} ` : arrow);
 }
 
-/** A dim word in front of a value, when labels are on. `skip` when the glyph already is the word. */
 function word(options: SegmentOptions, text: string, paint: Paint, skip = false): string {
 	return options.labels && !skip && text !== "" ? paint.dim(`${text} `) : "";
 }

package/src/settings.ts

@@ -1,7 +1,6 @@
-// Every setting of the look, under `look.` in the shared settings file. The slots are plain lists of
-// segment ids, so moving a piece from the frame to the footer is editing one array.
 import {
 	boolean,
+	type Control,
 	type Decoder,
 	integer,
 	literal,
@@ -13,9 +12,24 @@ import {
 
 import type { FrameStyle } from "./render/frame.ts";
 import type { IconMode } from "./render/glyphs.ts";
-import { isSegmentId, type SegmentId } from "./render/segments.ts";
+import { isSegmentId, SEGMENT_IDS, SEGMENTS, type SegmentId } from "./render/segments.ts";
 
-const GROUP = "Look";
+const PERMISSION_STATUS: SegmentId = "status:pi-ask-permission:mode";
+const ACCOUNT_STATUS: SegmentId = "status:pi-providers:account";
+
+const STATUS_LABELS: Partial<Record<SegmentId, string>> = {
+	[PERMISSION_STATUS]: "permission mode",
+	[ACCOUNT_STATUS]: "account",
+};
+
+export const SECTIONS = [
+	"Editor",
+	"Slots",
+	"Footer",
+	"Start screen",
+	"Working line",
+	"Desktop theme",
+];
 
 export type HeaderStyle = "card" | "compact" | "off";
 export type SeparatorStyle = "dot" | "bar" | "slash" | "space";
@@ -28,7 +42,6 @@ export const SEPARATORS: Record<SeparatorStyle, string> = {
 	space: "  ",
 };
 
-/** A list of known segment ids. Unknown ones are dropped with a warning, not the whole list. */
 function segments(fallback: readonly SegmentId[]): Decoder<SegmentId[]> {
 	return {
 		decode(input, path) {
@@ -50,13 +63,33 @@ function segments(fallback: readonly SegmentId[]): Decoder<SegmentId[]> {
 	};
 }
 
+// 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,
+		ACCOUNT_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: { group: GROUP, label, description },
+		ui: { section: "Slots", label, description, control: slotControl(fallback) },
 	});
 }
 
@@ -74,14 +107,13 @@ export const topRight = slot("frame.topRight", "Frame, top right", "Where you ar
 	"path",
 	"host",
 ]);
-/** Where pi-ask-permission reports its mode. It says what happens to what you type, so it sits by the editor. */
-export const PERMISSION_MODE: SegmentId = "status:pi-ask-permission:mode";
+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"],
+	[PERMISSION_MODE, "model", ACCOUNT_STATUS, "effort"],
 );
 export const bottomRight = slot("frame.bottomRight", "Frame, bottom right", "How full it is.", [
 	"context",
@@ -99,7 +131,7 @@ export const frame = setting<FrameStyle | "off">({
 	decoder: literal("rounded", "square", "heavy", "line", "off"),
 	project: true,
 	ui: {
-		group: GROUP,
+		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.",
@@ -111,7 +143,7 @@ export const cursor = setting<CursorStyle>({
 	default: "bar",
 	decoder: literal("block", "bar", "underline"),
 	ui: {
-		group: GROUP,
+		section: "Editor",
 		label: "Cursor",
 		description: "Bar and underline use the terminal's own cursor, so it blinks the way it does.",
 	},
@@ -123,7 +155,7 @@ export const header = setting<HeaderStyle>({
 	decoder: literal("card", "compact", "off"),
 	project: true,
 	ui: {
-		group: GROUP,
+		section: "Start screen",
 		label: "Start screen",
 		description: "The card pi opens with. Off keeps pi's own.",
 	},
@@ -134,7 +166,7 @@ export const icons = setting<IconMode>({
 	default: "auto",
 	decoder: literal("auto", "nerd", "unicode", "ascii"),
 	ui: {
-		group: GROUP,
+		section: "Footer",
 		label: "Icons",
 		description: "Auto uses Nerd Font glyphs locally, plain Unicode over SSH.",
 	},
@@ -142,10 +174,10 @@ export const icons = setting<IconMode>({
 
 export const separator = setting<SeparatorStyle>({
 	id: "look.separator",
-	default: "dot",
+	default: "space",
 	decoder: literal("dot", "bar", "slash", "space"),
 	project: true,
-	ui: { group: GROUP, label: "Separator", description: "Between the pieces of a slot." },
+	ui: { section: "Footer", label: "Separator", description: "Between the pieces of a slot." },
 });
 
 export const pathLength = setting({
@@ -154,7 +186,7 @@ export const pathLength = setting({
 	decoder: integer(0, 500),
 	project: true,
 	ui: {
-		group: GROUP,
+		section: "Footer",
 		label: "Path length",
 		description: "Longest the folder may be before it is shortened from the left. 0 keeps it all.",
 	},
@@ -165,7 +197,7 @@ export const gaugeCells = setting({
 	default: 8,
 	decoder: integer(0, 40),
 	project: true,
-	ui: { group: GROUP, label: "Gauge", description: "Cells in the context gauge. 0 hides it." },
+	ui: { section: "Footer", label: "Gauge", description: "Cells in the context gauge. 0 hides it." },
 });
 
 export const labels = setting({
@@ -174,7 +206,7 @@ export const labels = setting({
 	decoder: boolean,
 	project: true,
 	ui: {
-		group: GROUP,
+		section: "Footer",
 		label: "Labels",
 		description:
 			"A short word before each number (out, in, ttft, took, ctx, cache). Off is denser.",
@@ -186,10 +218,10 @@ export const peek = setting({
 	default: true,
 	decoder: boolean,
 	ui: {
-		group: GROUP,
+		section: "Working line",
 		label: "Working line",
 		description:
-			"The spinner says what the model is doing: the tail of its thinking, the tool it calls.",
+			"The spinner names the state: waiting, thinking, writing, drafting a tool call, running it.",
 	},
 });
 
@@ -198,7 +230,7 @@ export const desktop = setting({
 	default: true,
 	decoder: boolean,
 	ui: {
-		group: GROUP,
+		section: "Desktop theme",
 		label: "Desktop theme",
 		description:
 			"Write the matugen palette from DankMaterialShell as the pi theme `desktop`, and keep it in sync.",
@@ -210,7 +242,7 @@ export const desktopSource = setting({
 	default: "~/.cache/DankMaterialShell/dms-colors.json",
 	decoder: string,
 	ui: {
-		group: GROUP,
+		section: "Desktop theme",
 		label: "Desktop palette",
 		description: "The DankMaterialShell colour file the desktop theme is made from.",
 	},

package/src/ui/editor.ts

@@ -1,6 +1,3 @@
-// The editor, framed. Pi's editor draws a rule above and below the text; this one draws a box, writes
-// four slots into its borders, and puts the working spinner in the top-left corner. Typing, history, autocomplete and every app key stay pi's: the class only
-// changes what the lines look like, and shifts mouse clicks by the width of the frame.
 import { CustomEditor, type KeybindingsManager } from "@earendil-works/pi-coding-agent";
 import {
 	type EditorTheme,
@@ -18,14 +15,12 @@ import { type Screen, type SlotName, slotPieces } from "./screen.ts";
 
 type WorkingIndicator = Parameters<CustomEditor["setWorkingStatusIndicator"]>[0];
 
-/** Pi calls the border hooks inside its render; these stand in for the lines this class draws. */
+/** Pi calls the border hooks inside its render; these mark where this class draws its own lines. */
 const TOP = "\u0000look:top\u0000";
 const BOTTOM = "\u0000look:bottom\u0000";
 // oxlint-disable-next-line no-control-regex -- pi's software cursor is an escape sequence
 const INVERTED_CELL = /\x1b\[7m([\s\S]*?)\x1b\[0m/;
-/** Below this the frame is noise, so pi's plain editor draws instead. */
 const MIN_WIDTH = 24;
-/** The spinner always gets this much of the top border, enough for "⠋ Thinking". */
 const LEAD_MIN = 10;
 
 const CURSOR_SEQUENCES: Record<CursorStyle, string> = {
@@ -40,7 +35,6 @@ export class LookEditor extends CustomEditor {
 	#framing = false;
 	#hiddenAbove = 0;
 	#hiddenBelow = 0;
-	/** Columns the frame takes on each side, for mouse clicks. */
 	#inset = 0;
 
 	constructor(
@@ -155,7 +149,6 @@ export class LookEditor extends CustomEditor {
 				const text = cursor === "block" ? line : withoutSoftwareCursor(line);
 				result.push(`${left}${fill(text, inner)}${right}`);
 			} else {
-				// The autocomplete list, lined up with the text so clicks land where they look.
 				result.push(`${" ".repeat(this.#inset)}${line}`);
 			}
 		}
@@ -163,7 +156,6 @@ export class LookEditor extends CustomEditor {
 		return result.map((line) => truncateToWidth(line, width, ""));
 	}
 
-	/** The spinner and its message, in the room the slots left. Just the spinner when it is tight. */
 	#lead(budget: number): string | undefined {
 		const indicator = this.#indicator;
 		if (indicator === undefined) return undefined;
@@ -173,21 +165,16 @@ export class LookEditor extends CustomEditor {
 	}
 }
 
-/**
- * Pi draws its cursor as an inverted cell. With the terminal's own cursor showing, that would be two
- * cursors, so the inversion goes and the character stays.
- */
+/** With the terminal's cursor showing, pi's inverted cell would be a second cursor. */
 function withoutSoftwareCursor(line: string): string {
 	return line.replace(INVERTED_CELL, "$1");
 }
 
-/** Pads a content line to the inner width, so the right rail stays straight. */
 function fill(line: string, width: number): string {
 	const clipped = truncateToWidth(line, width, "");
 	return `${clipped}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}`;
 }
 
-/** Sets the terminal cursor shape. Pi draws its own block cursor, so the others need the hardware one. */
 export function applyCursor(tui: TUI, style: CursorStyle): void {
 	if (style !== "block") tui.setShowHardwareCursor(true);
 	tui.terminal.write(CURSOR_SEQUENCES[style]);

package/src/ui/footer.ts

@@ -1,6 +1,3 @@
-// The lines around the editor that are not the frame. The strip above it is the answer being written;
-// the footer below it is the session. With the frame off, the footer also carries the four frame
-// slots, so turning the box off never hides data.
 import type { ReadonlyFooterDataProvider } from "@earendil-works/pi-coding-agent";
 import { type Component, type TUI, visibleWidth } from "@earendil-works/pi-tui";
 
@@ -8,16 +5,13 @@ import { fitLine, fitRegions, type Piece } from "../render/fit.ts";
 import type { Paint } from "../render/paint.ts";
 import { type Screen, type SlotName, slotPieces } from "./screen.ts";
 
-/** At least this much between a left and a right group sharing a line. */
 const GAP = 3;
 
-/** Where the text starts, so the strip and the footer line up with the text inside the frame. */
 export function indentOf(screen: Screen): number {
 	const style = screen.frameStyle();
 	return style === "off" || style === "line" ? 1 : 2;
 }
 
-/** The strip above the editor. Blank until the first answer, but its line is always there. */
 export class StripComponent implements Component {
 	readonly #screen: Screen;
 
@@ -36,7 +30,6 @@ export class StripComponent implements Component {
 }
 
 export interface FooterHooks {
-	/** The footer data is where the branch and other packages' statuses come from. */
 	attach(data: ReadonlyFooterDataProvider, repaint: () => void): void;
 	detach(): void;
 }
@@ -67,7 +60,6 @@ export class FooterComponent implements Component {
 		lines.push(renderSlot(screen, "below", room));
 
 		const kept = lines.filter((line) => line !== "").map((line) => `${pad}${line}`);
-		// At least one line, for the same reason as the strip: the editor must not jump when it fills.
 		return kept.length === 0 ? [""] : kept;
 	}
 
@@ -86,7 +78,6 @@ function renderSlot(screen: Screen, name: SlotName, width: number): string {
 	return fitLine(pieces, width, fitOptions(screen, paint));
 }
 
-/** A left group and a right group on one line, pushed apart. */
 function spread(screen: Screen, leftSlot: SlotName, rightSlot: SlotName, width: number): string {
 	if (width <= 0) return "";
 	const paint = screen.paint();

package/src/ui/header.ts

@@ -1,6 +1,3 @@
-// The start screen. A card with the π drawn in blocks, coloured along the theme's effort ramp, next to
-// what the session starts with: the model, the folder, the machine, what loaded, and the keys worth
-// knowing. Narrow terminals get two plain lines instead.
 import { keyText } from "@earendil-works/pi-coding-agent";
 import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 
@@ -10,7 +7,6 @@ import { renderSegments, type SegmentId } from "../render/segments.ts";
 import type { HeaderStyle } from "../settings.ts";
 import type { Screen } from "./screen.ts";
 
-/** The π, one character per pixel, drawn two pixels per row with half blocks. */
 const PIXELS = [
 	"..............",
 	".############.",
@@ -24,10 +20,8 @@ const PIXELS = [
 	".##.......####",
 ];
 const LOGO = halfBlocks(PIXELS);
-/** One effort level per row, from cool at the top to hot at the bottom. */
 const LOGO_RAMP = EFFORT_LEVELS.slice(1);
 const LOGO_COLUMN = 20;
-/** Under this the right column is too cramped to share with the logo. */
 const MIN_RIGHT = 34;
 const MIN_CARD = 48;
 
@@ -150,7 +144,6 @@ export class HeaderComponent implements Component {
 		return parts.filter((part) => part !== "").join(paint.dim(this.#screen.separator()));
 	}
 
-	/** Three rows of two hints each, or one column when narrow. */
 	#hints(paint: Paint, width: number): string[] {
 		const hints = HINTS();
 		const keyWidth = Math.max(...hints.map((hint) => visibleWidth(hint.key)));
@@ -171,7 +164,6 @@ export class HeaderComponent implements Component {
 	}
 }
 
-/** Read on every render, so a remapped key shows the new binding. */
 function HINTS(): Hint[] {
 	return [
 		{ key: keyText("app.model.select") || "/model", does: "model" },

package/src/ui/screen.ts

@@ -1,6 +1,3 @@
-// What the components read. The feature implements it over the live session and the settings; tests
-// implement it over a fixed snapshot. Everything is read at render time, so a setting or theme change
-// shows on the next frame with nothing to invalidate.
 import type { Snapshot } from "../data/snapshot.ts";
 import type { Piece } from "../render/fit.ts";
 import type { FrameStyle } from "../render/frame.ts";
@@ -14,7 +11,6 @@ export type SlotName = "strip" | "topLeft" | "topRight" | "bottomLeft" | "bottom
 export interface Screen {
 	snapshot(): Snapshot;
 	glyphs(): Glyphs;
-	/** Paints with the active theme. `frame` overrides the border colour, which the editor owns. */
 	paint(frame?: (text: string) => string): Paint;
 	separator(): string;
 	options(): SegmentOptions;
@@ -23,7 +19,6 @@ export interface Screen {
 	cursor(): CursorStyle;
 }
 
-/** The rendered pieces of one slot. The separator is painted here, once, for everyone. */
 export function slotPieces(
 	screen: Screen,
 	name: SlotName,

package/src/ui/working.ts

@@ -1,73 +1,25 @@
-// What the spinner says. Pi's says "Working" for the whole run; this one says what is happening: the
-// newest line of the model's thinking, the tool call it is writing, the command running. It only
-// speaks through pi's public `setWorkingMessage`, so pi still owns the spinner and where it sits.
-
 export type Activity =
 	| { kind: "waiting" }
-	| { kind: "thinking"; tail: string }
+	| { kind: "thinking" }
 	| { kind: "writing" }
-	| { kind: "calling"; tool: string }
-	| { kind: "running"; tool: string; detail: string };
+	| { kind: "drafting"; tool: string }
+	| { kind: "running"; tool: string };
 
-/** One line, plain text: pi paints the message itself. */
 export function describe(activity: Activity): string {
 	switch (activity.kind) {
 		case "waiting":
-			return "Waiting";
 		case "thinking":
-			return activity.tail === "" ? "Thinking" : `Thinking · ${activity.tail}`;
 		case "writing":
-			return "Writing";
-		case "calling":
-			return `Calling ${activity.tool}`;
+			return activity.kind;
+		case "drafting":
+			return `drafting ${activity.tool.toLowerCase()}`;
 		case "running":
-			return activity.detail === "" ? activity.tool : `${activity.tool} · ${activity.detail}`;
+			return `running ${activity.tool.toLowerCase()}`;
 	}
 }
 
-interface ContentPart {
-	type?: unknown;
-	thinking?: unknown;
-	name?: unknown;
-}
-
-/** The newest line of the thinking so far. Model output, so control characters go. */
-export function thinkingTail(content: unknown): string {
-	if (!Array.isArray(content)) return "";
-	for (let index = content.length - 1; index >= 0; index--) {
-		const part = content[index] as ContentPart | undefined;
-		if (part?.type !== "thinking" || typeof part.thinking !== "string") continue;
-		const lines = part.thinking.split("\n").map(clean).filter(Boolean);
-		return lines.at(-1) ?? "";
-	}
-	return "";
-}
-
-/** The name of the tool call being written, when the model is writing one. */
-export function callingTool(content: unknown): string | undefined {
+export function draftedTool(content: unknown): string | undefined {
 	if (!Array.isArray(content)) return undefined;
-	const part = content.at(-1) as ContentPart | undefined;
+	const part = content.at(-1) as { type?: unknown; name?: unknown } | undefined;
 	return part?.type === "toolCall" && typeof part.name === "string" ? part.name : undefined;
 }
-
-const DETAIL_KEYS = ["command", "path", "file_path", "pattern", "query", "url", "prompt"];
-
-/** The one argument that says what a tool is doing: the command, the file, the pattern. */
-export function toolDetail(args: unknown): string {
-	if (typeof args !== "object" || args === null) return "";
-	const record = args as Record<string, unknown>;
-	for (const key of DETAIL_KEYS) {
-		const value = record[key];
-		if (typeof value === "string" && value.trim() !== "") {
-			return clean(value.split("\n").find((line) => line.trim() !== "") ?? "");
-		}
-	}
-	return "";
-}
-
-// oxlint-disable-next-line no-control-regex -- escape sequences and control characters are the target
-const CONTROL = /\x1b\[[0-?]*[ -/]*[@-~]|[\x00-\x1f\x7f]/g;
-
-function clean(text: string): string {
-	return text.replace(CONTROL, " ").replace(/\s+/g, " ").trim();
-}