@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/apps/cleanse-board.ts

@@ -17,6 +17,10 @@ import { renderProgressBar, type ProgressBarStyle } from "../components/progress
 import { fgOrPlain, theme } from "../theme/theme";
 import { createLiveBoard, type LiveBoardOutput } from "../chrome/live-board";
 import type { AgentProgress } from "../tools/task";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
+import { col, elapsed, keyed, node, row, span, stableKey, text } from "../native/describe";
+import type { DescribeContext, NativeNode } from "../native/node";
+import { Memo } from "../native/memo";
 
 /** Checker identity shown in live rows and verdicts. */
 export interface CleanseCheckerDescriptor {
@@ -100,19 +104,36 @@ export class CleanseBoardModel {
 	#repairTotal = 0;
 	#repairDone = 0;
 	#repairStartedAt = 0;
+	/** Bumped by every mutator that changes the live rows; keys the native memo. */
+	#version = 0;
+	readonly #native = new Memo();
+	#lastSettled: NativeNode | undefined;
 
 	phase(text: string | undefined): void {
 		this.#phaseText = text;
+		this.#version += 1;
 	}
 
 	checkerStarted(checker: CleanseCheckerDescriptor): void {
 		this.#checkers.set(checker.id, { label: checker.label, startedAt: Date.now() });
+		this.#version += 1;
 	}
 
 	/** Drop the checker's live row and build its permanent verdict line. */
 	checkerFinished(check: CleanseCheckResult, durationMs: number): string {
 		this.#checkers.delete(check.id);
+		this.#version += 1;
 		const count = check.diagnostics.length;
+		const tone = count === 0 ? "success" : "warning";
+		this.#lastSettled = text(
+			[
+				span(count === 0 ? "✓ " : "● ", tone),
+				span(`${check.label} `),
+				span(count === 0 ? "clean" : `${count} issue${count === 1 ? "" : "s"}`, tone),
+				span(` · ${formatDuration(durationMs)}`, "dim"),
+			],
+			{ wrap: "word", role: "omp.cleanse.verdict" },
+		);
 		const verdict =
 			count === 0 ? fgOrPlain("success", "clean") : fgOrPlain("warning", `${count} issue${count === 1 ? "" : "s"}`);
 		const glyph = count === 0 ? fgOrPlain("success", "✓") : fgOrPlain("warning", "●");
@@ -123,18 +144,21 @@ export class CleanseBoardModel {
 		this.#repairTotal = 0;
 		this.#repairDone = 0;
 		this.#agents.clear();
+		this.#version += 1;
 	}
 
 	agentStarted(name: string, assignment: CleanseAssignment): void {
 		if (this.#repairStartedAt === 0) this.#repairStartedAt = Date.now();
 		this.#repairTotal += 1;
 		this.#agents.set(name, { assignment, startedAt: Date.now() });
+		this.#version += 1;
 	}
 
 	agentProgress(name: string, progress: AgentProgress): void {
 		this.#totals.set(name, { tokens: progress.tokens, cost: progress.cost });
 		const agent = this.#agents.get(name);
 		if (agent) agent.progress = progress;
+		this.#version += 1;
 	}
 
 	/** Drop the agent's live row, advance the repair bar, and build its permanent outcome line. */
@@ -142,7 +166,98 @@ export class CleanseBoardModel {
 		const agent = this.#agents.get(outcome.name);
 		this.#agents.delete(outcome.name);
 		this.#repairDone = Math.min(this.#repairDone + 1, this.#repairTotal);
-		return renderOutcomeLine(outcome, assignment, agent, this.#totals.get(outcome.name));
+		this.#version += 1;
+		const total = this.#totals.get(outcome.name);
+		this.#lastSettled = describeOutcome(outcome, assignment, agent, total);
+		return renderOutcomeLine(outcome, assignment, agent, total);
+	}
+
+	/**
+	 * Semantic twin of the permanent line the most recent
+	 * {@link checkerFinished}/{@link agentFinished} call returned, for native
+	 * surfaces that log settled work as nodes.
+	 */
+	get lastSettled(): NativeNode | undefined {
+		return this.#lastSettled;
+	}
+
+	/**
+	 * Native live rows (NATIVE_REDESIGN §10): phase and checker spinners, the
+	 * repair head with a `meter` of fixed lanes, and the running repair agents
+	 * as a grid of lanes, one `agent` row each (status, current tool with its
+	 * intent, tools, tokens, cost, timer). Terminals without `agent`/`meter`
+	 * get the plain rows and a `progress` bar. Spinners and timers are
+	 * terminal-clocked, so the node only changes when the board state does.
+	 * `undefined` while nothing is live.
+	 */
+	describeLive(cx: DescribeContext): NativeNode | undefined {
+		if (!this.#phaseText && this.#checkers.size === 0 && this.#repairTotal === 0) return undefined;
+		const lanes = cx.supports("agent");
+		const meter = cx.supports("meter");
+		return this.#native.get([this.#version, lanes, meter], () => {
+			const rows: NativeNode[] = [];
+			if (this.#phaseText) {
+				rows.push(node("spinner", { label: this.#phaseText, tone: "warning" }, undefined, "phase"));
+			}
+			for (const [id, checker] of this.#checkers) {
+				const checkerRow = row(
+					[node("spinner", { label: checker.label, tone: "warning" }), elapsed(Date.now() - checker.startedAt)],
+					{ gap: "sm" },
+				);
+				rows.push(keyed(checkerRow, `checker-${stableKey(id)}`));
+			}
+			if (this.#repairTotal > 0) {
+				rows.push(this.#describeRepairHeader(meter));
+				const agents = [...this.#agents.entries()].sort(
+					(left, right) => left[1].assignment.index - right[1].assignment.index,
+				);
+				if (lanes) {
+					const now = Date.now();
+					rows.push(
+						node(
+							"col",
+							{ role: "omp.cleanse.lanes", gap: "sm" },
+							agents.map(([name, agent]) => describeAgentLane(name, agent, now)),
+							"lanes",
+						),
+					);
+				} else {
+					for (const [name, agent] of agents) rows.push(describeAgentRow(name, agent));
+				}
+			}
+			return col(rows, { role: "omp.cleanse.live", gap: lanes ? "sm" : "xs" });
+		});
+	}
+
+	#describeRepairHeader(meter: boolean): NativeNode {
+		let tokens = 0;
+		let cost = 0;
+		for (const entry of this.#totals.values()) {
+			tokens += entry.tokens;
+			cost += entry.cost;
+		}
+		const parts: string[] = [];
+		if (this.#agents.size > 0) parts.push(`${this.#agents.size} running`);
+		if (tokens > 0) parts.push(`${formatNumber(tokens)} tok`);
+		if (cost > 0) parts.push(formatCost(cost));
+		const value = this.#repairDone / this.#repairTotal;
+		const label = `${this.#repairDone}/${this.#repairTotal}`;
+		const children: NativeNode[] = [
+			node("spinner", { label: "Repairing", tone: "accent" }),
+			meter
+				? node("meter", {
+						value,
+						style: "bar",
+						size: "md",
+						label: `${label} lanes`,
+						title: `${this.#repairDone} of ${this.#repairTotal} repair lanes finished`,
+						role: "omp.cleanse.meter",
+					})
+				: node("progress", { value, label, tone: "accent" }),
+		];
+		if (parts.length > 0) children.push(text([span(parts.join(" · "), "muted")]));
+		children.push(elapsed(Date.now() - this.#repairStartedAt));
+		return keyed(row(children, { gap: "sm", align: "center", role: "omp.cleanse.head" }), "repair");
 	}
 
 	/** Render the transient live rows for the current spinner frame. */
@@ -277,6 +392,109 @@ function renderAgentRow(spinner: string, agentName: string, agent: RunningAgent)
 	);
 }
 
+function describeAgentRow(agentName: string, agent: RunningAgent): NativeNode {
+	const toolCount = agent.progress?.toolCount ?? 0;
+	const children: NativeNode[] = [
+		node("spinner", { label: [span(agentName.replace(/^Cleanse/, ""), "strong")], tone: "warning" }),
+		text([span(compactFiles(agent.assignment), "path")], { truncate: "middle" }),
+		text(describeActivity(agent.progress), { truncate: "end", grow: 1 }),
+	];
+	if (toolCount > 0) children.push(text([span(`${toolCount} tool${toolCount === 1 ? "" : "s"}`, "dim")]));
+	children.push(elapsed(Date.now() - agent.startedAt));
+	return keyed(row(children, { gap: "sm" }), `agent-${stableKey(agentName)}`);
+}
+
+/** A running repair lane as an `agent` row: its files as the task, the live tool and its intent, the run's stats. */
+function describeAgentLane(agentName: string, agent: RunningAgent, now: number): NativeNode {
+	const progress = agent.progress;
+	const intent = sanitizeDisplaySingleLine(progress?.lastIntent ?? progress?.currentToolArgs ?? "")
+		.replace(/\s+/g, " ")
+		.trim();
+	return node(
+		"agent",
+		{
+			name: agentName.replace(/^Cleanse/, "") || agentName,
+			task: [span(compactFiles(agent.assignment), "path")],
+			status: progress?.status === "pending" ? "pending" : "running",
+			model: progress?.resolvedModel,
+			tool: progress?.currentTool
+				? {
+						name: progress.currentTool,
+						intent: intent || undefined,
+						age: progress.currentToolStartMs ? Math.max(0, now - progress.currentToolStartMs) : undefined,
+					}
+				: null,
+			retry: progress?.retryState
+				? {
+						attempt: progress.retryState.attempt,
+						max: progress.retryState.maxAttempts,
+						age: Math.max(0, now - progress.retryState.startedAtMs),
+						delay: progress.retryState.delayMs,
+						error: progress.retryState.errorMessage,
+					}
+				: null,
+			stats: {
+				tools: progress?.toolCount || undefined,
+				tokens: progress?.tokens || undefined,
+				cost: progress && progress.cost > 0 ? progress.cost : undefined,
+				age: now - agent.startedAt,
+			},
+			role: "omp.cleanse.lane",
+		},
+		undefined,
+		`agent-${stableKey(agentName)}`,
+	);
+}
+
+/** Spans for a repair agent's latest activity, mirroring {@link agentActivity}. */
+function describeActivity(progress: AgentProgress | undefined): TspSpan[] {
+	if (!progress) return [span("starting", "dim")];
+	if (progress.retryState) {
+		return [
+			span(`rate-limited · retry ${progress.retryState.attempt}/${progress.retryState.maxAttempts}`, "warning"),
+		];
+	}
+	const intent = sanitizeDisplaySingleLine(progress.lastIntent ?? "")
+		.replace(/\s+/g, " ")
+		.trim();
+	if (progress.currentTool) {
+		const args = sanitizeDisplaySingleLine(progress.currentToolArgs ?? "")
+			.replace(/\s+/g, " ")
+			.trim();
+		const tool = span(args ? `${progress.currentTool} ${args}` : progress.currentTool, "dim");
+		return intent ? [span(`${intent} `), tool] : [tool];
+	}
+	return intent ? [span(intent)] : [span("thinking", "dim")];
+}
+
+/** Semantic twin of {@link renderOutcomeLine}. */
+function describeOutcome(
+	outcome: CleanseAgentOutcome,
+	assignment: CleanseAssignment,
+	agent: RunningAgent | undefined,
+	total: { tokens: number; cost: number } | undefined,
+): NativeNode {
+	const files = compactFiles(assignment);
+	if (!outcome.success) {
+		const message = sanitizeDisplaySingleLine(outcome.error ?? "subagent failed")
+			.replace(/\s+/g, " ")
+			.trim();
+		return text([span("✗ ", "error"), span(`${outcome.name} `), span(files, "path"), span(` ${message}`, "error")], {
+			wrap: "word",
+			role: "omp.cleanse.outcome",
+			tone: "error",
+		});
+	}
+	const meta: string[] = [];
+	const toolCount = agent?.progress?.toolCount ?? 0;
+	if (toolCount > 0) meta.push(`${toolCount} tool${toolCount === 1 ? "" : "s"}`);
+	if (total && total.tokens > 0) meta.push(`${formatNumber(total.tokens)} tok`);
+	if (agent) meta.push(formatDuration(Date.now() - agent.startedAt));
+	const spans = [span("✓ ", "success"), span(`${outcome.name} `), span(files, "path")];
+	if (meta.length > 0) spans.push(span(` · ${meta.join(" · ")}`, "dim"));
+	return text(spans, { wrap: "word", role: "omp.cleanse.outcome" });
+}
+
 function renderOutcomeLine(
 	outcome: CleanseAgentOutcome,
 	assignment: CleanseAssignment,

package/src/apps/cleanse-picker.ts

@@ -41,7 +41,15 @@ export async function pickCleanseTarget(checkers: readonly CleanseCheckerChoice[
 			description: "A discovery agent figures out the command to run",
 		},
 	];
-	const selection = await selectStandaloneItem("Select what to cleanse:", items, { maxVisible: 12 });
+	const selection = await selectStandaloneItem("Select what to cleanse:", items, {
+		maxVisible: 12,
+		picker: {
+			icon: "wand",
+			noun: "checkers",
+			subtitle: "Run the checkers, then repair what they find",
+			confirm: "Cleanse",
+		},
+	});
 	if (selection === null) return { kind: "cancel" };
 	if (selection === "all") return { kind: "all" };
 	if (selection === "request") {

package/src/apps/debug/log-viewer.ts

@@ -1,8 +1,9 @@
 import { formatKeyHint, formatKeyHints } from "../../app-keybindings";
 import type { Component } from "../../tui";
-import { extractPrintableText, matchesKey } from "../../keys";
+import { matchesKey } from "../../keys";
+import { Input } from "../../components/input";
 import { routeSgrMouseInput, type SgrMouseEvent } from "../../mouse";
-import { padding, replaceTabs, truncateToWidth, visibleWidth } from "../../utils";
+import { padding, truncateToWidth, visibleWidth } from "../../utils";
 import { sanitizeText } from "@oh-my-pi/pi-utils";
 import { theme } from "../../theme/theme";
 import { sanitizeDisplayText } from "../../overlays/extensions/display-text";
@@ -503,6 +504,8 @@ interface DebugLogViewerComponentOptions {
 /** Interactive log viewer with host-provided storage and clipboard capabilities. */
 export class DebugLogViewerComponent implements Component {
 	#model: DebugLogViewerModel;
+	/** Filter field; its value is pushed into the model whenever it changes. */
+	readonly #filter = new Input();
 	#terminalRows: number;
 	#onExit: () => void;
 	#onStatus?: (message: string) => void;
@@ -522,6 +525,7 @@ export class DebugLogViewerComponent implements Component {
 			hasOlderLogs: this.#deps.hasOlderLogs?.bind(this.#deps),
 			loadOlderLogs: this.#deps.loadOlderLogs?.bind(this.#deps),
 		});
+		this.#filter.prompt = "";
 		this.#terminalRows = options.terminalRows;
 		this.#onExit = options.onExit;
 		this.#onStatus = options.onStatus;
@@ -618,18 +622,13 @@ export class DebugLogViewerComponent implements Component {
 			return;
 		}
 
-		if (matchesKey(keyData, "backspace")) {
-			if (this.#model.filterQuery.length > 0) {
-				this.#statusMessage = undefined;
-				this.#model.setFilterQuery(this.#model.filterQuery.slice(0, -1));
-			}
-			return;
-		}
-
-		const printableText = extractPrintableText(keyData);
-		if (printableText) {
+		// Everything else edits the filter field; refilter only when the text changed.
+		const before = this.#filter.getValue();
+		this.#filter.handleInput(keyData);
+		const after = this.#filter.getValue();
+		if (after !== before) {
 			this.#statusMessage = undefined;
-			this.#model.setFilterQuery(this.#model.filterQuery + printableText);
+			this.#model.setFilterQuery(after);
 		}
 	}
 
@@ -720,8 +719,9 @@ export class DebugLogViewerComponent implements Component {
 	}
 
 	#filterText(): string {
-		const sanitized = replaceTabs(sanitizeText(this.#model.filterQuery));
-		const query = sanitized.length === 0 ? theme.fg("muted", "type to filter") : theme.fg("accent", sanitized);
+		const value = this.#filter.getValue();
+		const [field = ""] = this.#filter.render(visibleWidth(value) + 1);
+		const query = value.length === 0 ? field + theme.fg("muted", "type to filter") : theme.fg("accent", field);
 		const pidStatus = this.#model.isProcessFilterEnabled()
 			? theme.fg("success", "pid on")
 			: theme.fg("muted", "pid off");

package/src/apps/debug/protocol-probe.ts

@@ -13,6 +13,7 @@
  * so the graphics test needs no asset on disk and works across all three image
  * protocols, each of which decodes a standard PNG.
  */
+import { hsvToRgb } from "@oh-my-pi/pi-utils/color";
 import * as zlib from "node:zlib";
 import { type Component, Container } from "../../tui";
 import { encodeTextSized, type TextSizingScale } from "../../utils";
@@ -110,30 +111,11 @@ export function buildLargeTextLines(scales: readonly TextSizingScale[] = [2, 3])
 	return lines;
 }
 
-/** HSV (h in degrees, s/v in 0..1) to 8-bit RGB, for the truecolor demo bar. */
-function hsvToRgb(h: number, s: number, v: number): [number, number, number] {
-	const c = v * s;
-	const hp = (((h % 360) + 360) % 360) / 60;
-	const x = c * (1 - Math.abs((hp % 2) - 1));
-	let r = 0;
-	let g = 0;
-	let b = 0;
-	if (hp < 1) [r, g, b] = [c, x, 0];
-	else if (hp < 2) [r, g, b] = [x, c, 0];
-	else if (hp < 3) [r, g, b] = [0, c, x];
-	else if (hp < 4) [r, g, b] = [0, x, c];
-	else if (hp < 5) [r, g, b] = [x, 0, c];
-	else [r, g, b] = [c, 0, x];
-	const m = v - c;
-	const to8 = (n: number) => Math.round((n + m) * 255);
-	return [to8(r), to8(g), to8(b)];
-}
-
 /** A 24-bit-color hue sweep rendered as background-painted cells (one space each). */
 function truecolorBar(cells: number): string {
 	let out = "";
 	for (let i = 0; i < cells; i++) {
-		const [r, g, b] = hsvToRgb((i / cells) * 360, 0.85, 1);
+		const { r, g, b } = hsvToRgb({ h: (i / cells) * 360, s: 0.85, v: 1 });
 		out += `\x1b[48;2;${r};${g};${b}m `;
 	}
 	return `${out}\x1b[0m`;

package/src/apps/git/avatar.ts

@@ -1,3 +1,5 @@
+import { hslToHex } from "@oh-my-pi/pi-utils/color";
+
 /** Cached author photos supplied by the command host. */
 export interface AvatarSource {
 	get(email: string, cwd: string): string | null | undefined;
@@ -28,25 +30,3 @@ export function identiconLines(email: string, colorize: (hex: string, text: stri
 	}
 	return lines;
 }
-
-function hslToHex(hue: number, saturation: number, lightness: number): string {
-	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-	const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
-	const base = lightness - chroma / 2;
-	const sector = Math.floor(hue / 60) % 6;
-	const rgb = [
-		[chroma, second, 0],
-		[second, chroma, 0],
-		[0, chroma, second],
-		[0, second, chroma],
-		[second, 0, chroma],
-		[chroma, 0, second],
-	][sector];
-	return `#${rgb
-		.map(channel =>
-			Math.round((channel + base) * 255)
-				.toString(16)
-				.padStart(2, "0"),
-		)
-		.join("")}`;
-}