@bismawy/pi-arnative 0.2.9 → 0.2.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.2.11] - 2026-10-01
+
+### Changed
+- The footer status area now reflows: 2 lines stay the default while everything fits, but on a narrow terminal the statuses and the metrics (tok/s, cache, context) move onto a 3rd line instead of being truncated. `extensions/footer.ts` `layoutStatusLines()` (`rows` = line budget of the whole footer, `maxRows` caps the growth); self-check covers the wide/narrow/cap cases.
+
+## [0.2.10] - 2026-10-01
+
+### Added
+- The working loader now shows elapsed turn time next to the label — `⠴ Working (50s)`, `⠴ Executing (1m 5s)`. One `setInterval(1s)` per turn (`extensions/footer.ts`), cleared on `turn_end`/`session_shutdown`; the suffix only appears from 1s (no `(0s)` flicker) and the timer keeps counting across tool switches inside a turn. With parallel tools the label follows the last started tool and only falls back to `Working` when every `toolCallId` has ended.
+
+### Fixed
+- Tool image previews (e.g. `read` on a PNG) no longer break the layout. pi renders a preview as an extra child below the tool box, padded with `result.rows - 1` blank rows, and the gap-stripping patch deleted exactly those rows — the terminal then painted the image over the rows underneath (chat text, editor, footer). Only the leading Spacer is dropped now; from the image sequence on, every line is kept.
+
 ## [0.2.9] - 2026-09-30
 
 ### Fixed

package/extensions/footer.ts

@@ -58,6 +58,23 @@ let assistantStartMs: number | null = null;
 let assistantChars = 0;
 let latestSpeed: number | null = null;
 
+// Live elapsed clock for the working loader: "⠴ Working (50s)".
+const WORK_TIMER_KEY = Symbol.for("pi-arnative.workTimer");
+const WORK_LABEL = "Working";
+let workVerb = WORK_LABEL;
+let workStartMs: number | null = null;
+let workUI: { setWorkingMessage?: (message?: string) => void } | null = null;
+// Verbs of tools still running (toolCallId -> verb): the label must not reset to
+// "Working" while a sibling tool is still going (pi executes tools in parallel).
+const activeToolVerbs = new Map<string, string>();
+
+/** Label while `active` tools remain: last started wins, empty -> default. */
+export function currentToolVerb(active: ReadonlyMap<string, string>): string {
+	let verb = WORK_LABEL;
+	for (const v of active.values()) verb = v;
+	return verb;
+}
+
 function run(cmd: string, args: string[], cwd: string): Promise<string> {
 	return new Promise((resolve) => {
 		execFile(cmd, args, { cwd, timeout: 2000 }, (err, stdout) => {
@@ -159,7 +176,64 @@ export function boxEditorLines(
 	return out;
 }
 
+/**
+ * Wraps the footer status lines: `groups` separated by `sep`, with the already-joined
+ * `metrics` right-aligned on the last group line when they fit, else on a line of
+ * their own.
+ *
+ * `rows` is the footer line budget (line 1 plus the status lines): 2 reproduces the
+ * classic layout as long as it fits, 3 lets the metrics take their own line instead
+ * of crowding the statuses. `maxRows` caps the growth — a group wider than the
+ * terminal is never split, the caller truncates it.
+ */
+export function layoutStatusLines(
+	groups: readonly string[],
+	metrics: string,
+	sep: string,
+	width: number,
+	rows: number,
+	maxRows = Number.MAX_SAFE_INTEGER,
+	vw: (s: string) => number = visibleWidth,
+): string[] {
+	if (rows > maxRows) rows = maxRows;
+	const budget = Math.max(1, rows - 1);
+	const out: string[] = [];
+	let line = "";
+
+	for (const group of groups) {
+		const candidate = line ? line + sep + group : group;
+		// An empty line is never flushed: an oversized group must not loop here.
+		if (line && vw(candidate) > width) {
+			out.push(line);
+			line = group;
+		} else {
+			line = candidate;
+		}
+	}
+
+	if (metrics) {
+		const pad = (before: string) => " ".repeat(Math.max(1, width - vw(before) - vw(metrics))) + metrics;
+		if (!line) {
+			line = pad("");
+		} else if (vw(line + sep + metrics) <= width) {
+			// Metrics share the last group line, right-aligned as before.
+			line = line + pad(line);
+		} else if (out.length < budget) {
+			// `budget` is the only thing `rows` controls: 2 lets the metrics take a
+			// line of their own instead of crowding the groups, 1 packs everything.
+			out.push(line);
+			line = pad("");
+		} else {
+			line = line + sep + metrics;
+		}
+	}
+
+	out.push(line);
+	return out;
+}
+
 function parseOptimizer(raw: string | undefined): string | null {
+
 	if (!raw) return null;
 	const m = raw.match(/([A-Za-z0-9_-]+)\s+cache\s+(\d+\/\d+)·[^\s]+\s+([\d.]+%)/);
 	return m ? `${m[1]} ${m[2]} (${m[3]})` : null;
@@ -233,9 +307,48 @@ function mcpStatusOf(sub: string): string {
 	return "Executing";
 }
 
+/** Loader label with the elapsed suffix; no suffix below 1s (avoids a "(0s)" flicker). */
+export function workingLabel(verb: string, elapsedMs: number): string {
+	return elapsedMs >= 1000 ? `${verb} (${formatDuration(elapsedMs)})` : verb;
+}
+
+function paintWorking(): void {
+	if (!workUI || workStartMs === null) return;
+	try {
+		workUI.setWorkingMessage?.(workingLabel(workVerb, Date.now() - workStartMs));
+	} catch {
+		// ignore
+	}
+}
+
+function stopWorkingClock(): void {
+	const t = (globalThis as Record<symbol, any>)[WORK_TIMER_KEY];
+	if (t) clearInterval(t);
+	(globalThis as Record<symbol, any>)[WORK_TIMER_KEY] = null;
+	workStartMs = null;
+	activeToolVerbs.clear();
+}
+
+/** Start (or restart) the 1s tick from a fresh turn. */
+function startWorkingClock(ctx: { ui?: any }): void {
+	stopWorkingClock();
+	workUI = ctx.ui ?? null;
+	workVerb = WORK_LABEL;
+	workStartMs = Date.now();
+	(globalThis as Record<symbol, any>)[WORK_TIMER_KEY] = setInterval(paintWorking, 1000);
+}
+
+/** Swap the verb (tool change) without resetting the turn clock. */
+function setWorkingVerb(ctx: { ui?: any }, verb: string): void {
+	workUI = ctx.ui ?? null;
+	workVerb = verb;
+	if (workStartMs === null) workStartMs = Date.now();
+	paintWorking();
+}
+
 export function getToolWorkingMessage(toolName: string, args?: any): string {
 	const n = (toolName ?? "").trim();
-	if (!n) return "Working";
+	if (!n) return WORK_LABEL;
 
 	// Standard / file tools
 	if (n === "edit") return "Editing";
@@ -263,7 +376,7 @@ export function getToolWorkingMessage(toolName: string, args?: any): string {
 		return mcpStatusOf(sub);
 	}
 
-	return "Working";
+	return WORK_LABEL;
 }
 
 export default function (pi: ExtensionAPI) {
@@ -278,6 +391,9 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	pi.on("session_start", async (event, ctx) => {
+		// A /reload re-imports this module while the old instance's interval (and its
+		// ctx.ui closures) may still be alive; clear it before starting a new one.
+		stopWorkingClock();
 		if (event.reason !== "reload") {
 			sessionStartMs = Date.now();
 			(globalThis as Record<symbol, number>)[SESSION_START_KEY] = sessionStartMs;
@@ -353,7 +469,6 @@ export default function (pi: ExtensionAPI) {
 							}
 						})();
 						const rawCache = statuses.get("pi-cache-stats");
-						const segs: string[] = [];
 						const cleanStatus = (s: string) => {
 							if (s.includes("MCP:")) {
 								let clean = stripAnsi(s);
@@ -391,12 +506,12 @@ export default function (pi: ExtensionAPI) {
 							return tint(clean.trim());
 						};
 
+						const groups: string[] = [];
 						const mcp = statuses.get("mcp");
-						if (mcp !== undefined) segs.push(cleanStatus(mcp));
+						if (mcp !== undefined) groups.push(cleanStatus(mcp));
 						for (const [k, s] of statuses) {
-							if (k !== "mcp" && k !== "pi-cache-stats") segs.push(cleanStatus(s));
+							if (k !== "mcp" && k !== "pi-cache-stats") groups.push(cleanStatus(s));
 						}
-						const left2 = segs.join(sep);
 
 						const opt = parseOptimizer(rawCache);
 						let usageStr = "";
@@ -406,13 +521,17 @@ export default function (pi: ExtensionAPI) {
 							// fallback
 						}
 						const speedStr = latestSpeed !== null && latestSpeed > 0 ? `${acc("\udb81\udcc5")} ${tint(`${latestSpeed.toFixed(1)} tok/s`)}` : "";
-						const right2 = [speedStr, opt ? `${acc("\udb80\udf5b")} ${tint(opt)}` : "", usageStr].filter(Boolean).join(` ${dim("·")} `);
-
-						if (!right2) {
-							lines.push(truncateToWidth(left2, width));
-						} else {
-							const pad2 = " ".repeat(Math.max(1, width - visibleWidth(left2) - visibleWidth(right2)));
-							lines.push(truncateToWidth(left2 + pad2 + right2, width));
+						const metrics = [speedStr, opt ? `${acc("\udb80\udf5b")} ${tint(opt)}` : "", usageStr].filter(Boolean).join(` ${dim("·")} `);
+
+						// 2 footer lines normally; grow to 3 rather than crowding the second one on
+						// a narrow terminal, then truncate (a single status can still overflow).
+						const MAX_ROWS = 3;
+						for (let rows = 2; ; rows++) {
+							const wrapped = layoutStatusLines(groups, metrics, sep, width, rows, MAX_ROWS);
+							if (rows >= MAX_ROWS || wrapped.every((l) => visibleWidth(l) <= width)) {
+								for (const l of wrapped) lines.push(truncateToWidth(l, width));
+								break;
+							}
 						}
 						return lines;
 					},
@@ -502,29 +621,19 @@ export default function (pi: ExtensionAPI) {
 		(globalThis as Record<symbol, any>)[MODEL_KEY] = currentModel;
 		(globalThis as Record<symbol, any>)[THINKING_KEY] = currentThinkingLevel;
 		(globalThis as Record<symbol, any>)[CWD_KEY] = ctx.cwd;
-		try {
-			ctx.ui?.setWorkingMessage?.();
-		} catch {
-			// ignore
-		}
+		startWorkingClock(ctx);
 		void refreshGit(ctx.cwd).then(() => poke());
 	});
 
 	pi.on("tool_execution_start", async (event, ctx) => {
-		try {
-			const msg = getToolWorkingMessage(event.toolName, event.args);
-			ctx.ui?.setWorkingMessage?.(msg);
-		} catch {
-			// ignore
-		}
+		const verb = getToolWorkingMessage(event.toolName, event.args);
+		activeToolVerbs.set(event.toolCallId, verb);
+		setWorkingVerb(ctx, verb);
 	});
 
-	pi.on("tool_execution_end", async (_event, ctx) => {
-		try {
-			ctx.ui?.setWorkingMessage?.();
-		} catch {
-			// ignore
-		}
+	pi.on("tool_execution_end", async (event, ctx) => {
+		activeToolVerbs.delete(event.toolCallId);
+		setWorkingVerb(ctx, currentToolVerb(activeToolVerbs));
 	});
 
 	pi.on("message_update", async (event) => {
@@ -566,6 +675,7 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	pi.on("turn_end", async (_event, ctx) => {
+		stopWorkingClock();
 		try {
 			ctx.ui?.setWorkingMessage?.();
 		} catch {
@@ -587,6 +697,7 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	pi.on("session_shutdown", async (_event, ctx) => {
+		stopWorkingClock();
 		rerender = null;
 		const cur = ((globalThis as Record<symbol, number>)[GEN_KEY] ?? 0);
 		if (cur !== runtimeGen) return;
@@ -613,6 +724,27 @@ if (isMain(import.meta.url)) {
 	assert(formatDuration(65_000) === "1m 5s", "minutes + seconds");
 	assert(formatDuration(3_700_000) === "1h 1m", "hours + minutes");
 
+	// Self-check: footer status wrapping (2 lines until it crowds, then 3).
+	const vw = (s: string) => s.length;
+	const g = (n: number) => "g".repeat(n);
+	// Wide terminal: everything on one status line, metrics right-aligned.
+	const wide = layoutStatusLines([g(4), g(4), g(4)], "Mmmmm", " | ", 40, 2, 3, vw);
+	assert(wide.length === 1, "wide: statuses share one line");
+	assert(wide[0]!.endsWith("Mmmmm") && vw(wide[0]!) === 40, "wide: metrics right-aligned on that line");
+	// Narrow: groups stop sharing a line and metrics moves to its own third line.
+	const narrow = layoutStatusLines([g(4), g(4), g(4)], g(8), " | ", 14, 3, 3, vw);
+	assert(narrow.length === 3, "narrow: grows to 3 lines");
+	assert(narrow.every((l) => vw(l) <= 14), "narrow: every line fits the terminal");
+	// The same width with a 2-line budget cannot fit -> the caller asks for row 3.
+	assert(
+		layoutStatusLines([g(4), g(4), g(4)], g(8), " | ", 14, 2, 3, vw).some((l) => vw(l) > 14),
+		"2-line budget overflows, so the caller grows to 3"
+	);
+	// Tight cap: never exceed maxRows, even though lines then overflow (caller truncates).
+	assert(layoutStatusLines([g(4), g(4), g(4)], "Mmmmm", " | ", 3, 3, 3, vw).length <= 3, "cap: 3 lines at most");
+	assert(layoutStatusLines([g(9)], "", " | ", 4, 2, 3, vw).length === 1, "oversized group is not split");
+	assert(layoutStatusLines([], "m", " | ", 8, 2, 3, vw).length === 1, "metrics only");
+
 	const plain = (s: string) => s;
 	const D = "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"; // 8 columns = content width in this test
 	const boxed = boxEditorLines([D, "  hi    ", "  lo    ", D, "  /mo "], 2, plain);
@@ -638,6 +770,19 @@ if (isMain(import.meta.url)) {
 	assert(getToolWorkingMessage("todo") === "Updating tasks", "todo -> Updating tasks");
 	assert(getToolWorkingMessage("unknown_tool") === "Working", "unknown -> Working");
 	assert(getToolWorkingMessage("mcp", { tool: "fetch_repo" }) === "Fetching", "mcp fetch -> Fetching");
+
+	// Self-check: working loader clock
+	assert(workingLabel("Working", 0) === "Working", "no elapsed suffix below 1s");
+	assert(workingLabel("Working", 999) === "Working", "no elapsed suffix at 999ms");
+	assert(workingLabel("Working", 50_000) === "Working (50s)", "elapsed seconds suffix");
+	assert(workingLabel("Executing", 65_000) === "Executing (1m 5s)", "elapsed minutes suffix");
+	assert(currentToolVerb(new Map()) === WORK_LABEL, "no active tool -> default label");
+	assert(currentToolVerb(new Map([["a", "Reading"], ["b", "Writing"]])) === "Writing", "parallel tools: last started wins");
+	assert(currentToolVerb(new Map([["a", "Reading"]])) === "Reading", "after one ends, the remaining tool's label shows");
+	startWorkingClock({ ui: { setWorkingMessage: () => {} } });
+	assert(Boolean((globalThis as Record<symbol, unknown>)[WORK_TIMER_KEY]), "clock starts: timer stored on globalThis");
+	stopWorkingClock();
+	assert((globalThis as Record<symbol, unknown>)[WORK_TIMER_KEY] == null, "clock stops: reload guard clears the timer");
 	assert(boxed.slice(0, 4).every((l) => visibleWidth(l) === visibleWidth(D) + 5), "uniform box width (sides + prompt)");
 	assert(boxEditorLines(["\u2500\u2500\u2500\u2500"], 1, plain).length === 1, "too narrow: left unchanged");
 

package/extensions/tools.ts

@@ -215,6 +215,23 @@ const OWN_BOX = new Set<string>();
 const hasOwnRendererDef = (self: { toolDefinition?: { renderCall?: unknown; renderResult?: unknown } }): boolean =>
 	Boolean(self?.toolDefinition?.renderCall || self?.toolDefinition?.renderResult);
 
+// Inline image line: kitty (\x1b_G) or iTerm2 (\x1b]1337;File=) graphics payload.
+// pi renders a tool's image preview as an extra child BELOW the box, padding it with
+// `result.rows - 1` blank rows; the last row carries a cursor-up prefix before the
+// sequence. Not exported by pi-tui, so match both prefixes.
+export const isImageLine = (line: string): boolean => line.includes("\x1b_G") || line.includes("\x1b]1337;File=");
+
+/** Drop the leading Spacer only when an image preview follows: its blank tail rows
+ *  are the image's vertical space, and deleting them made the terminal draw the
+ *  image over the rows below (chat text, editor, footer). */
+export function stripEdgesKeepingImages(lines: string[]): string[] {
+	const firstImage = lines.findIndex(isImageLine);
+	if (firstImage < 0) return stripBlankEdges(lines);
+	let s = 0;
+	while (s < firstImage && isBlankLine(lines[s])) s++;
+	return lines.slice(s);
+}
+
 const GAP_KEY = Symbol.for("pi-arnative.toolGapStripped");
 if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol, boolean>)[GAP_KEY]) {
 	(globalThis as Record<symbol, boolean>)[GAP_KEY] = true;
@@ -222,7 +239,7 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 	ToolExecutionComponent.prototype.render = function (width: number): string[] {
 		const lines = origRender.call(this, width);
 		const name = (this as { toolName?: string }).toolName ?? "";
-		return OWN_BOX.has(name) || !hasOwnRendererDef(this) ? stripBlankEdges(lines) : lines;
+		return OWN_BOX.has(name) || !hasOwnRendererDef(this) ? stripEdgesKeepingImages(lines) : lines;
 	};
 }
 
@@ -682,6 +699,23 @@ if (isMain(import.meta.url)) {
 	assert(stripBlankEdges(["", "\x1b[2m\x1b[22m", "x"]).join() === "x", "blank ANSI line counts as blank");
 	assert(stripBlankEdges(["a"]).join() === "a", "no blanks: kept intact");
 
+	// Image preview: pi pads the image with blank rows (`result.rows - 1`), and the last
+	// one carries a cursor-up prefix before the sequence. Those rows are the image's
+	// vertical space — deleting them made the terminal paint the image over whatever
+	// sits below (chat text, editor, footer). Regression: preview destroyed the layout.
+	const kittySeq = "\x1b[5A\x1b_Ga=T,f=100,i=7,q=2,C=1,m=0;AAAA\x1b\\";
+	const itermSeq = "\x1b]1337;File=inline=1:AAAA\x07";
+	const withImage = ["", "╭─╮", "│ ✓ read form_crop.png │", "╰─╯", "", kittySeq, "", ""];
+	const kept = stripEdgesKeepingImages(withImage);
+	assert(kept.length === 7, "image: only the leading gap dropped, blank tail kept");
+	assert(kept[0] === "╭─╮", "image: leading Spacer removed");
+	assert(kept.indexOf(kittySeq) === 4 && kept.length - 5 === 2, "image: rows after the sequence intact");
+	assert(
+		stripEdgesKeepingImages(["", "a", "", "b", "  ", ""]).join() === "a,,b",
+		"no image: falls back to plain edge stripping",
+	);
+	assert(isImageLine(itermSeq) && !isImageLine("│ plain text │"), "image line detection: kitty + iTerm2 only");
+
 	// tools without their own renderer -> same box (memory_write etc.)
 	const noRenderer = { toolName: "memory_write", toolDefinition: {} };
 	// tool with no definition (e.g. "Tool glob not found") -> still a box, not plain text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bismawy/pi-arnative",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Arnative look for Pi: warm-neutral themes, rounded tool boxes, tabbed header, compact footer, transcript clock, and a /usage dashboard.",
   "keywords": [
     "pi-package",