@adeildo/pi-harness 4.0.0

package/src/look/index.ts

@@ -0,0 +1,448 @@
+// The look: pi's start screen, editor, footer and working line, redrawn around the data I want in
+// front of me, in the colours of whatever theme is on. One feature, because the pieces share one clock
+// and one git probe; each piece has its own switch in the settings.
+import { createApp, defineFeature, type FeatureScope } from "@adeildo/pi-kit";
+import type {
+	ExtensionAPI,
+	ExtensionContext,
+	ReadonlyFooterDataProvider,
+} from "@earendil-works/pi-coding-agent";
+import type { TUI } from "@earendil-works/pi-tui";
+
+import { type GitState, readGit } from "./data/git.ts";
+import { emptySnapshot, type Snapshot, SnapshotReader } from "./data/snapshot.ts";
+import { Telemetry } from "./data/telemetry.ts";
+import { REQUEST_ENTRY, type RequestRecord } from "./data/totals.ts";
+import { DESKTOP_THEME } from "./desktop/palette.ts";
+import { syncDesktopTheme, watchDesktopPalette } from "./desktop/sync.ts";
+import { resolveIcons } from "./render/glyphs.ts";
+import { PLAIN, themePaint } from "./render/paint.ts";
+import { claimedStatuses, renderSegments, SEGMENTS } from "./render/segments.ts";
+import {
+	below,
+	bottomLeft,
+	bottomRight,
+	cursor,
+	desktop,
+	desktopSource,
+	frame,
+	gaugeCells,
+	header,
+	icons,
+	labels,
+	LOOK_SETTINGS,
+	pathLength,
+	peek,
+	separator,
+	SEPARATORS,
+	strip,
+	topLeft,
+	topRight,
+} from "./settings.ts";
+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 { type Activity, callingTool, describe, thinkingTail, toolDetail } from "./ui/working.ts";
+
+export { SEGMENT_IDS, SEGMENTS, type SegmentId } from "./render/segments.ts";
+export { ROLE_TOKENS } from "./render/paint.ts";
+export { desktopTheme, parseDesktopColors } from "./desktop/palette.ts";
+
+const STRIP_WIDGET = "pi-look:strip";
+const TICK_MS = 500;
+/** The thinking tail changes on every token; the spinner line does not need to. */
+const PEEK_MS = 120;
+
+interface Live {
+	ctx: ExtensionContext | undefined;
+	footerData: ReadonlyFooterDataProvider | undefined;
+	tui: TUI | undefined;
+	repaint: (() => void) | undefined;
+	git: GitState | undefined;
+	probing: boolean;
+	ticker: ReturnType<typeof setInterval> | undefined;
+	stopWatching: (() => void) | undefined;
+	/** The frame's snapshot, shared by every component drawn in the same frame. */
+	frame: Snapshot | undefined;
+	activity: string | undefined;
+	peekAt: number;
+}
+
+export const look = defineFeature({
+	id: "look",
+	description:
+		"The start screen, a framed editor, the footer and a working line that says what runs",
+	settings: LOOK_SETTINGS,
+	setup(scope) {
+		const telemetry = new Telemetry();
+		const reader = new SnapshotReader();
+		const live: Live = {
+			ctx: undefined,
+			footerData: undefined,
+			tui: undefined,
+			repaint: undefined,
+			git: undefined,
+			probing: false,
+			ticker: undefined,
+			stopWatching: undefined,
+			frame: undefined,
+			activity: undefined,
+			peekAt: 0,
+		};
+
+		const screen = createScreen(scope, live, reader, telemetry);
+		const repaint = () => live.repaint?.();
+
+		for (const entry of LOOK_SETTINGS) entry.listen(scope, repaint);
+		frame.listen(scope, () => live.ctx && installEditor(live.ctx, screen, live, scope));
+		header.listen(scope, () => live.ctx && installHeader(live.ctx, screen, scope));
+		cursor.listen(scope, (style) => live.tui && applyCursor(live.tui, style));
+		peek.listen(scope, (on) => !on && live.ctx?.ui.setWorkingMessage());
+
+		scope.onSessionStart(async (ctx) => {
+			live.ctx = ctx;
+			telemetry.reset();
+			void probeGit(live);
+			if (ctx.mode !== "tui") return;
+
+			ctx.ui.setFooter(
+				(tui, _theme, data) =>
+					new FooterComponent(tui, data, screen, {
+						attach: (footerData, paint) => {
+							live.footerData = footerData;
+							live.repaint = paint;
+						},
+						detach: () => {
+							live.footerData = undefined;
+							live.repaint = undefined;
+						},
+					}),
+			);
+			ctx.ui.setWidget(STRIP_WIDGET, () => new StripComponent(screen), {
+				placement: "aboveEditor",
+			});
+			installEditor(ctx, screen, live, scope);
+			installHeader(ctx, screen, scope);
+			if (desktop.get(scope)) await startDesktopSync(ctx, scope, live);
+		});
+
+		scope.onShutdown(() => {
+			stopTicking(live);
+			live.stopWatching?.();
+			live.stopWatching = undefined;
+			const ctx = live.ctx;
+			if (ctx?.mode === "tui") {
+				ctx.ui.setFooter(undefined);
+				ctx.ui.setWidget(STRIP_WIDGET, undefined);
+				ctx.ui.setHeader(undefined);
+				ctx.ui.setEditorComponent(undefined);
+				ctx.ui.setWorkingMessage();
+			}
+			if (live.tui !== undefined) applyCursor(live.tui, "block");
+			live.ctx = undefined;
+			live.tui = undefined;
+		});
+
+		scope.on("agent_start", () => {
+			telemetry.runStarted();
+			setActivity(live, scope, { kind: "waiting" });
+			startTicking(live);
+		});
+
+		scope.on("turn_start", () => {
+			telemetry.requestStarted();
+			setActivity(live, scope, { kind: "waiting" });
+		});
+
+		scope.on("message_start", (event) => {
+			if (event.message.role === "assistant") telemetry.answerStarted();
+		});
+
+		scope.on("message_update", (event) => {
+			const message = event.message;
+			if (message.role !== "assistant") return;
+			const update = event.assistantMessageEvent;
+			const delta = "delta" in update ? update.delta : "";
+			telemetry.answerGrew(delta, message.usage);
+
+			if (update.type === "thinking_delta") {
+				const now = Date.now();
+				if (now - live.peekAt < PEEK_MS) return;
+				live.peekAt = now;
+				setActivity(live, scope, { kind: "thinking", tail: thinkingTail(message.content) });
+			} else if (update.type === "text_delta" || update.type === "text_start") {
+				setActivity(live, scope, { kind: "writing" });
+			} else if (update.type === "toolcall_start" || update.type === "toolcall_delta") {
+				const tool = callingTool(message.content);
+				if (tool !== undefined) setActivity(live, scope, { kind: "calling", tool });
+			}
+		});
+
+		scope.on("message_end", (event) => {
+			if (event.message.role !== "assistant") return;
+			const record = telemetry.answerEnded(event.message.usage);
+			// Kept in the session, so the average speeds survive a resume, and the usage ledger gets a
+			// duration, which pi does not record.
+			if (record !== undefined) scope.appendEntry<RequestRecord>(REQUEST_ENTRY, record);
+			repaint();
+		});
+
+		scope.on("tool_execution_start", (event) => {
+			setActivity(live, scope, {
+				kind: "running",
+				tool: event.toolName,
+				detail: toolDetail(event.args),
+			});
+		});
+
+		// A command may have moved the branch or touched the tree.
+		scope.on("tool_execution_end", () => void probeGit(live));
+
+		scope.on("agent_end", () => {
+			telemetry.runEnded();
+			stopTicking(live);
+			live.activity = undefined;
+			live.ctx?.ui.setWorkingMessage();
+			repaint();
+		});
+
+		scope.on("agent_settled", () => void probeGit(live));
+		scope.on("model_select", repaint);
+		scope.on("thinking_level_select", repaint);
+		scope.on("session_compact", repaint);
+		scope.on("session_tree", repaint);
+
+		scope.registerCommand("look", {
+			description:
+				"Look: `explain` says what every piece on screen is, `theme` switches to the desktop theme",
+			getArgumentCompletions: (prefix) =>
+				["explain", "theme"]
+					.filter((name) => name.startsWith(prefix.trim()))
+					.map((name) => ({ value: name, label: name })),
+			handler: async (args, ctx) => {
+				const action = args.trim();
+				if (action === "" || action === "explain") {
+					ctx.ui.notify(explain(screen), "info");
+					return;
+				}
+				if (action !== "theme") {
+					ctx.ui.notify("usage: /look explain | /look theme", "info");
+					return;
+				}
+				const result = await syncDesktopTheme(desktopSource.get(scope));
+				if (result.kind === "missing" || result.kind === "invalid") {
+					const why = result.kind === "missing" ? "no palette file" : result.reason;
+					ctx.ui.notify(`look: cannot build the desktop theme: ${why}`, "warning");
+					return;
+				}
+				const switched = ctx.ui.setTheme(DESKTOP_THEME);
+				ctx.ui.notify(
+					switched.success
+						? `look: now on the ${DESKTOP_THEME} theme, from ${desktopSource.get(scope)}`
+						: `look: wrote ${result.path}, but pi did not load it: ${switched.error ?? "unknown"}`,
+					switched.success ? "info" : "warning",
+				);
+			},
+		});
+	},
+});
+
+const SLOT_TITLES: Record<SlotName, string> = {
+	strip: "Above the editor, this answer",
+	topLeft: "Frame, top left",
+	topRight: "Frame, top right",
+	bottomLeft: "Frame, bottom left",
+	bottomRight: "Frame, bottom right",
+	below: "Below the editor, the session",
+};
+
+/** Every piece on screen, where it is, what it shows now and what it means. */
+function explain(screen: Screen): string {
+	const snapshot = screen.snapshot();
+	const paint = screen.paint();
+	const lines: string[] = [paint.bold("What is on screen")];
+	for (const name of Object.keys(SLOT_TITLES) as SlotName[]) {
+		const ids = screen.slot(name);
+		if (ids.length === 0) continue;
+		lines.push("", paint.role("brand", SLOT_TITLES[name]));
+		for (const id of ids) {
+			const [piece] = renderSegments([id], {
+				snapshot,
+				glyphs: screen.glyphs(),
+				paint,
+				options: screen.options(),
+			});
+			const meaning = id.startsWith("status:")
+				? `what ${id.slice("status:".length)} reports`
+				: (SEGMENTS[id as keyof typeof SEGMENTS]?.describe ?? "");
+			const shown = piece === undefined ? paint.dim("(nothing yet)") : piece.text;
+			lines.push(`  ${shown}`, `    ${paint.dim(`${id}: ${meaning}`)}`);
+		}
+	}
+	lines.push(
+		"",
+		paint.dim("Arrows are from where you sit: ↑ in is sent to the model, ↓ out comes back."),
+		paint.dim(
+			"Slots and labels live under look. in ~/.pi/agent/extensions/pi-harness/settings.json.",
+		),
+	);
+	return lines.join("\n");
+}
+
+function createScreen(
+	scope: FeatureScope,
+	live: Live,
+	reader: SnapshotReader,
+	telemetry: Telemetry,
+): Screen {
+	const slots: Record<SlotName, typeof strip> = {
+		strip,
+		topLeft,
+		topRight,
+		bottomLeft,
+		bottomRight,
+		below,
+	};
+
+	return {
+		snapshot() {
+			const ctx = live.ctx;
+			if (ctx === undefined) return emptySnapshot();
+			// Every component of one frame renders in the same tick, so they share one read.
+			if (live.frame !== undefined) return live.frame;
+			const snapshot = reader.read(ctx, {
+				branch: live.footerData?.getGitBranch() ?? null,
+				git: live.git,
+				request: telemetry.request(),
+				last: telemetry.last(),
+				run: telemetry.run(),
+				statuses: live.footerData?.getExtensionStatuses() ?? new Map(),
+			});
+			live.frame = snapshot;
+			queueMicrotask(() => {
+				live.frame = undefined;
+			});
+			return snapshot;
+		},
+		glyphs: () => resolveIcons(icons.get(scope)),
+		paint: (border) => (live.ctx === undefined ? PLAIN : themePaint(live.ctx.ui.theme, border)),
+		separator: () => SEPARATORS[separator.get(scope)],
+		options: () => ({
+			pathLength: pathLength.get(scope),
+			gaugeCells: gaugeCells.get(scope),
+			labels: labels.get(scope),
+			claimed: claimedStatuses(Object.values(slots).map((entry) => entry.get(scope))),
+		}),
+		slot: (name) => slots[name].get(scope),
+		frameStyle: () => frame.get(scope),
+		cursor: () => cursor.get(scope),
+	};
+}
+
+function installEditor(
+	ctx: ExtensionContext,
+	screen: Screen,
+	live: Live,
+	scope: FeatureScope,
+): void {
+	if (ctx.mode !== "tui") return;
+	if (frame.get(scope) === "off") {
+		ctx.ui.setEditorComponent(undefined);
+		return;
+	}
+	ctx.ui.setEditorComponent((tui, theme, keybindings) => {
+		live.tui = tui;
+		applyCursor(tui, cursor.get(scope));
+		return new LookEditor(tui, theme, keybindings, screen);
+	});
+}
+
+function installHeader(ctx: ExtensionContext, screen: Screen, scope: FeatureScope): void {
+	if (ctx.mode !== "tui") return;
+	if (header.get(scope) === "off") {
+		ctx.ui.setHeader(undefined);
+		return;
+	}
+	ctx.ui.setHeader(
+		() =>
+			new HeaderComponent(screen, {
+				style: () => header.get(scope),
+				counts: () => loadedCounts(scope),
+			}),
+	);
+}
+
+/** What loaded, from pi's own lists: active tools, skill and prompt commands, extension files. */
+function loadedCounts(pi: ExtensionAPI): LoadedCounts {
+	const commands = pi.getCommands();
+	const extensions = new Set<string>();
+	for (const command of commands) {
+		if (command.source === "extension") extensions.add(command.sourceInfo.path);
+	}
+	for (const tool of pi.getAllTools()) {
+		const source = tool.sourceInfo.source;
+		if (source !== "builtin" && source !== "sdk") extensions.add(tool.sourceInfo.path);
+	}
+	return {
+		tools: pi.getActiveTools().length,
+		skills: commands.filter((command) => command.source === "skill").length,
+		prompts: commands.filter((command) => command.source === "prompt").length,
+		extensions: extensions.size,
+	};
+}
+
+async function startDesktopSync(ctx: ExtensionContext, scope: FeatureScope, live: Live) {
+	const source = desktopSource.get(scope);
+	const sync = async () => {
+		const result = await syncDesktopTheme(source);
+		if (result.kind === "invalid") scope.warn(`desktop theme: ${result.reason}`);
+		return result;
+	};
+
+	const first = await sync();
+	if (first.kind === "missing") return;
+	if (first.kind === "written" && ctx.ui.theme.name !== DESKTOP_THEME) {
+		ctx.ui.notify(`look: wrote the ${DESKTOP_THEME} theme. /look theme switches to it.`, "info");
+	}
+	live.stopWatching?.();
+	live.stopWatching = watchDesktopPalette(source, () => void sync());
+}
+
+function setActivity(live: Live, scope: FeatureScope, activity: Activity): void {
+	if (!peek.get(scope)) return;
+	const message = describe(activity);
+	if (message === live.activity) return;
+	live.activity = message;
+	live.ctx?.ui.setWorkingMessage(message);
+}
+
+/** Only one at a time, and never while a render is waiting on it. */
+async function probeGit(live: Live): Promise<void> {
+	const ctx = live.ctx;
+	if (ctx === undefined || live.probing) return;
+	live.probing = true;
+	try {
+		live.git = await readGit(ctx.cwd);
+		live.repaint?.();
+	} finally {
+		live.probing = false;
+	}
+}
+
+/** The clocks have to move on their own while the model thinks and nothing else happens. */
+function startTicking(live: Live): void {
+	stopTicking(live);
+	live.ticker = setInterval(() => live.repaint?.(), TICK_MS);
+	live.ticker.unref?.();
+}
+
+function stopTicking(live: Live): void {
+	if (live.ticker === undefined) return;
+	clearInterval(live.ticker);
+	live.ticker = undefined;
+}
+
+export default function piLook(pi: ExtensionAPI): void {
+	createApp(pi, { name: "pi-harness" }).use(look).build();
+}

package/src/look/render/fit.ts

@@ -0,0 +1,89 @@
+// Making pieces fit. Every piece has a priority and may have a shorter form. When a line is too wide,
+// the least important pieces shorten first, then leave, one at a time, until it fits. Regions that
+// share a line (the left and right of a border) compete for the same width, so an unimportant piece on
+// the right leaves before an important one on the left.
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export interface Piece {
+	text: string;
+	/** A shorter form, used before the piece is dropped. */
+	compact?: string | undefined;
+	/** Higher stays longer. */
+	priority: number;
+}
+
+export interface FitOptions {
+	separator: string;
+	/** Width a region costs on top of its pieces when it has any, like the padding around it. */
+	regionOverhead?: number;
+	ellipsis?: string;
+}
+
+interface Slot {
+	region: number;
+	order: number;
+	piece: Piece;
+	text: string;
+	dropped: boolean;
+}
+
+/** One string per region, each the kept pieces joined by the separator. */
+export function fitRegions(
+	regions: readonly (readonly Piece[])[],
+	width: number,
+	options: FitOptions,
+): string[] {
+	const slots: Slot[] = regions.flatMap((pieces, region) =>
+		pieces.map((piece, order) => ({ region, order, piece, text: piece.text, dropped: false })),
+	);
+	const byPriority = slots.toSorted((a, b) => a.piece.priority - b.piece.priority);
+	const measure = (): number => measureRegions(regions.length, slots, options);
+
+	for (const slot of byPriority) {
+		if (measure() <= width) break;
+		if (slot.piece.compact !== undefined) slot.text = slot.piece.compact;
+	}
+
+	for (const slot of byPriority) {
+		if (measure() <= width) break;
+		if (slots.filter((candidate) => !candidate.dropped).length <= 1) break;
+		slot.dropped = true;
+	}
+
+	const joined = join(regions.length, slots, options.separator);
+	if (measure() <= width) return joined;
+
+	// One piece left and still too wide: cut it, keeping the overhead of its region.
+	const overhead = options.regionOverhead ?? 0;
+	return joined.map((text) =>
+		text === ""
+			? ""
+			: truncateToWidth(text, Math.max(0, width - overhead), options.ellipsis ?? "…"),
+	);
+}
+
+/** A single run of pieces, as one string. */
+export function fitLine(pieces: readonly Piece[], width: number, options: FitOptions): string {
+	return fitRegions([pieces], width, options)[0] ?? "";
+}
+
+function join(count: number, slots: readonly Slot[], separator: string): string[] {
+	const regions: string[][] = Array.from({ length: count }, () => []);
+	for (const slot of slots.toSorted((a, b) => a.order - b.order)) {
+		if (!slot.dropped) regions[slot.region]?.push(slot.text);
+	}
+	return regions.map((texts) => texts.join(separator));
+}
+
+function measureRegions(count: number, slots: readonly Slot[], options: FitOptions): number {
+	const separatorWidth = visibleWidth(options.separator);
+	let total = 0;
+	for (let region = 0; region < count; region++) {
+		const kept = slots.filter((slot) => slot.region === region && !slot.dropped);
+		if (kept.length === 0) continue;
+		total += options.regionOverhead ?? 0;
+		total += kept.reduce((sum, slot) => sum + visibleWidth(slot.text), 0);
+		total += separatorWidth * (kept.length - 1);
+	}
+	return total;
+}

package/src/look/render/format.ts

@@ -0,0 +1,136 @@
+// Numbers as a person reads them at a glance. Pure, so every rule here has a test.
+import { isAbsolute, relative, resolve, sep } from "node:path";
+
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+/**
+ * The widest each kind of number gets in normal use. A value is padded to its cell, so a number that
+ * ticks from `9.8` to `114` to `2.8k` does not push the rest of the line around.
+ */
+export const CELL = {
+	count: 4,
+	rate: 4,
+	latency: 5,
+	/** `0:08` to `9:59`, then one more for `59:59`. */
+	clock: 4,
+	percent: 4,
+	money: 6,
+} as const;
+
+/** Right-aligned in a cell of `width` columns. Longer values keep their length. */
+export function cell(text: string, width: number): string {
+	return " ".repeat(Math.max(0, width - visibleWidth(text))) + text;
+}
+
+/** What a cell shows before its value is known, so the cell is there from the start. */
+export const UNKNOWN = "–";
+
+/** `1.2k`, `43k`, `1.2M`, `22M`, the way pi writes token counts. */
+export function count(value: number): string {
+	const n = Math.max(0, Math.round(value));
+	if (n < 1000) return String(n);
+	if (n < 10_000) return `${trim((n / 1000).toFixed(1))}k`;
+	if (n < 1_000_000) return `${Math.round(n / 1000)}k`;
+	if (n < 10_000_000) return `${trim((n / 1_000_000).toFixed(1))}M`;
+	return `${Math.round(n / 1_000_000)}M`;
+}
+
+/** A speed: `42`, `906`, `1.2k`, `48k` tokens per second. */
+export function rate(perSecond: number): string {
+	if (perSecond < 10) return trim(perSecond.toFixed(1));
+	return count(perSecond);
+}
+
+/** `2m 17s`, `1h 4m`, for how long something has been running. */
+export function duration(milliseconds: number): string {
+	const total = Math.max(0, Math.floor(milliseconds / 1000));
+	const secs = total % 60;
+	const minutes = Math.floor(total / 60) % 60;
+	const hours = Math.floor(total / 3600);
+	if (hours > 0) return `${hours}h ${minutes}m`;
+	if (minutes > 0) return `${minutes}m ${secs}s`;
+	return `${secs}s`;
+}
+
+/** `0:08`, `2:17`, `1:04:09`: a stopwatch, which keeps its shape as it counts. */
+export function stopwatch(milliseconds: number): string {
+	const total = Math.max(0, Math.floor(milliseconds / 1000));
+	const secs = String(total % 60).padStart(2, "0");
+	const minutes = Math.floor(total / 60) % 60;
+	const hours = Math.floor(total / 3600);
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${secs}` : `${minutes}:${secs}`;
+}
+
+/** `320ms`, `1.7s`, `12s`, for latencies, where the fraction matters under ten seconds. */
+export function latency(milliseconds: number): string {
+	if (milliseconds < 1000) return `${Math.round(milliseconds)}ms`;
+	if (milliseconds < 10_000) return `${(milliseconds / 1000).toFixed(1)}s`;
+	return duration(milliseconds);
+}
+
+/** Three decimals while it is cents, two once it is dollars. */
+export function money(amount: number): string {
+	return amount >= 10 ? `$${amount.toFixed(2)}` : `$${amount.toFixed(3)}`;
+}
+
+export function percent(value: number): string {
+	return value >= 10 || value === 0 ? `${Math.round(value)}%` : `${value.toFixed(1)}%`;
+}
+
+/** `~` for the home folder, and the tail kept when it is long, since the tail says where you are. */
+export function shortenPath(cwd: string, home: string | undefined, maxWidth: number): string {
+	const full = home === undefined ? cwd : underHome(cwd, home);
+	if (maxWidth <= 0 || visibleWidth(full) <= maxWidth) return full;
+
+	const parts = full.split(sep);
+	let kept = "";
+	for (let index = parts.length - 1; index > 0; index--) {
+		const candidate = `${sep}${parts[index] ?? ""}${kept}`;
+		if (visibleWidth(`…${candidate}`) > maxWidth) break;
+		kept = candidate;
+	}
+	if (kept === "") return truncateTail(parts.at(-1) ?? full, maxWidth);
+	return `…${kept}`;
+}
+
+export function basename(cwd: string): string {
+	return cwd.split(/[\\/]/).findLast(Boolean) ?? cwd;
+}
+
+/** A gauge of `cells`, filled to `value` out of 100. */
+export function gauge(value: number, cells: number): { filled: number; empty: number } {
+	const filled = Math.max(0, Math.min(cells, Math.round((value / 100) * cells)));
+	return { filled, empty: cells - filled };
+}
+
+/** Clip to the start, keeping the end: for the tail of a thought, which is the newest part. */
+export function truncateTail(text: string, maxWidth: number): string {
+	if (maxWidth <= 0) return "";
+	if (visibleWidth(text) <= maxWidth) return text;
+	const chars = [...text];
+	let width = 1;
+	let start = chars.length;
+	while (start > 0) {
+		const next = visibleWidth(chars[start - 1] ?? "");
+		if (width + next > maxWidth) break;
+		width += next;
+		start--;
+	}
+	return `…${chars.slice(start).join("")}`;
+}
+
+export function fitWidth(text: string, width: number, ellipsis = "…"): string {
+	return truncateToWidth(text, Math.max(0, width), ellipsis);
+}
+
+function underHome(cwd: string, home: string): string {
+	const rest = relative(resolve(home), resolve(cwd));
+	const inside =
+		rest === "" || (rest !== ".." && !rest.startsWith(`..${sep}`) && !isAbsolute(rest));
+	if (!inside) return cwd;
+	return rest === "" ? "~" : `~${sep}${rest}`;
+}
+
+function trim(fixed: string): string {
+	return fixed.endsWith(".0") ? fixed.slice(0, -2) : fixed;
+}