@bismawy/pi-arnative 0.2.8 → 0.2.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [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
+- The startup `[Context]`, `[Skills]`, `[Extensions]` and `[Themes]` lists stacked under the header again on pi ≥ 0.99: pi replaced `ExpandableText`'s `getCollapsedText`/`getExpandedText` fields with a `build` callback plus a `state` object, so the section detector matched nothing and the tabs stayed at `[0]`. Both shapes are read now (`sectionBodyOf`), and the same applies to the `[Extension issues]` box, which read the stale `child.text` snapshot instead of the theme-aware `build()` output.
+- Fixed NPM version badge in `README.md` to reference `@bismawy/pi-arnative` instead of placeholder `react`.
+
+---
+
 ## [0.2.8] - 2026-09-28
 
 ### Fixed

package/README.md

@@ -1,9 +1,9 @@
 # Arnative
 
-A visual layer and tool styling tailored to your vibe coding.
+Refined aesthetics. Cohesive tools. Built for Pi.
 
 [![Custom badge](https://shieldcn.dev/badge/pi-%20Packages.svg?variant=outline&size=xs&logo=ri%3APiPiBold)](https://pi.dev/packages/@bismawy/pi-arnative)
-[![badge](https://shieldcn.dev/npm/react.svg?variant=outline&size=xs)](https://www.npmjs.com/package/@bismawy/pi-arnative)
+[![badge](https://shieldcn.dev/npm/@bismawy/pi-arnative.svg?variant=outline&size=xs)](https://www.npmjs.com/package/@bismawy/pi-arnative)
 [![license](https://shieldcn.dev/github/bismawy/pi-arnative/license.svg?variant=outline&size=xs)](https://github.com/bismawy/pi-arnative)
 
 ![Arnative: tabbed header, rounded tool boxes, transcript clock and /usage dashboard](https://raw.githubusercontent.com/bismawy/pi-arnative/main/assets/pi-arnative.webp)
@@ -35,32 +35,23 @@ pi --extension ./extensions/footer.ts
 
 ## Shortcuts
 
-| Key / Action | Result |
+| Key (Linux / Win) | Action |
 | --- | --- |
+| `ctrl+alt+t` · `alt+t` | Cycle header tabs |
+| `ctrl+alt+r` · `alt+r` | Quick reload (`/reload`) |
+| `ctrl+alt+n` · `alt+n` | New session (`/new`) — requires keybinding below |
 | `/usage` | Show session usage & token metrics |
-| `ctrl+alt+t` (`alt+t` on Windows/WSL) | Cycle header tabs (Directory → Model → Context → Skills → Extensions → Themes → Shortcut) |
-| `ctrl+alt+n` (`alt+n` on Windows/WSL) | Start a new session (`/new`) — see [Keybindings](#keybindings) |
-| `ctrl+alt+r` (`alt+r` on Windows/WSL) | Quick reload runtime (`/reload`) |
 | Click tab | Open selected header tab |
 | Click tool / `ctrl+e` | Toggle tool output box |
 
-Same cheatsheet in the header's **Shortcut** tab — it shows the variant your platform actually uses (on macOS `alt` reads `option`); on narrow terminals the rightmost tabs drop off first.
+> **Notes:**
+> - **Windows / WSL:** Windows Terminal aliases `Ctrl+Alt` to AltGr; use `alt+…` (or set `"altGrAliasing": false` in WT profile).
+> - **macOS:** uses `ctrl+option+…` (plain Option composes special characters).
+> - **Herdr / tmux glitch:** if shortcuts feel delayed or type stray letters, set `PI_TUI_ESC_TIMEOUT=100` in your shell profile.
 
-### Platform notes
+### Keybindings
 
-- **Windows / WSL:** Windows Terminal ≥ 1.24 aliases every `Ctrl+Alt` combo to AltGr ([microsoft/terminal#20052](https://github.com/microsoft/terminal/pull/20052)), so the legacy `ESC` + control-byte encoding never leaves the terminal. Both variants are registered there; `alt+…` is what pi itself uses for the same reason (`alt+v` paste image, `alt+p` cycle model). Setting `"altGrAliasing": false` in your Windows Terminal profile brings `ctrl+alt+…` back.
-- **macOS:** only `ctrl+option+…` is registered — plain Option composes characters (`Option+r` = ®) unless “Use Option as Meta key” is on. Works in iTerm2 and Terminal.app as-is.
-- **Linux desktops:** `ctrl+alt+t` is “launch terminal” on Ubuntu/Fedora GNOME, which eats the key before pi sees it. Rebind it there if you want tab cycling.
-- **Multiplexers (Herdr/tmux) + slow PTYs:** every `ctrl+alt+…` / `alt+…` shortcut is sent as `ESC` followed by a byte. pi waits only ~10 ms for that second byte before treating a lone `ESC` as the Escape key — and an Escape mid-turn aborts it, leaving a stray `r`/`t`/`n` in the editor. That is why the shortcut can look “glitchy” and why it is intermittent. Raise the window with `PI_TUI_ESC_TIMEOUT=100` in the environment that launches pi (same knob pi auto-applies over SSH, at the cost of a ~100 ms delay before a real Escape registers):
-
-  ```powershell
-  $env:PI_TUI_ESC_TIMEOUT = 100; pi
-  ```
-
-## Keybindings
-
-`ctrl+alt+n` is a plain user keybinding, not a package shortcut — pi-arnative never registers it.
-Add it once to `~/.pi/agent/keybindings.json` (the list form keeps Linux and Windows working):
+Add to `~/.pi/agent/keybindings.json` to bind `app.session.new`:
 
 ```json
 {
@@ -68,8 +59,6 @@ Add it once to `~/.pi/agent/keybindings.json` (the list form keeps Linux and Win
 }
 ```
 
-Restart pi to pick it up.
-
 ## Architecture
 
 <details>

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) => {
@@ -233,9 +250,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 +319,7 @@ export function getToolWorkingMessage(toolName: string, args?: any): string {
 		return mcpStatusOf(sub);
 	}
 
-	return "Working";
+	return WORK_LABEL;
 }
 
 export default function (pi: ExtensionAPI) {
@@ -278,6 +334,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;
@@ -502,29 +561,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 +615,7 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	pi.on("turn_end", async (_event, ctx) => {
+		stopWorkingClock();
 		try {
 			ctx.ui?.setWorkingMessage?.();
 		} catch {
@@ -587,6 +637,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;
@@ -638,6 +689,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/section-headers.ts

@@ -72,6 +72,28 @@ export function fgFirst(th: Themeish, names: string[], text: string): string {
 	return text;
 }
 
+/**
+ * Collapsed body of a pi startup section ("[Skills]\n  a, b"). pi 0.99 dropped
+ * ExpandableText's own getCollapsedText/getExpandedText fields for a `build` callback
+ * plus a `state` object, so both shapes are read here and older pi keeps working.
+ * Returns null when the child is not an expandable section.
+ */
+export function sectionBodyOf(child: any): string | null {
+	if (typeof child?.getCollapsedText === "function") return String(child.getCollapsedText());
+	if (typeof child?.build === "function" && child?.state && typeof child.state === "object") {
+		return String(child.build());
+	}
+	return null;
+}
+
+/** Text of a themed text line, whichever pi version built it (pi 0.99 defers it to `build`). */
+export function themedTextOf(child: any): string {
+	if (typeof child?.build === "function") return String(child.build());
+	const direct = child?.text ?? child?.content;
+	if (typeof direct === "string" && direct !== "") return direct;
+	return typeof child?.getText === "function" ? String(child.getText()) : "";
+}
+
 export function sectionNameOf(text: string): "Context" | "Skills" | "Extensions" | "Themes" | null {
 	const nl = text.indexOf("\n");
 	const first = stripAnsi(nl === -1 ? text : text.slice(0, nl)).trim();
@@ -587,20 +609,19 @@ if (UserMessageComponent?.prototype && !(globalThis as Record<symbol, boolean>)[
 		const origAddChild = containerProto.addChild;
 		containerProto.addChild = function (child: any): unknown {
 			try {
-				const sectionName = sectionNameOf(String(child?.getCollapsedText?.() ?? ""));
+				const body = sectionBodyOf(child);
+				const sectionName = body === null ? null : sectionNameOf(body);
 				const isSection =
-					child &&
-					typeof child.getCollapsedText === "function" &&
-					typeof child.getExpandedText === "function" &&
+					body !== null &&
 					typeof child.setText === "function" &&
+					typeof child.render === "function" &&
 					(sectionName === null ? false : SECTION_ICONS[sectionName] !== undefined);
 
-				if (isSection && sectionName) {
+				if (isSection && sectionName && body !== null) {
 					// Mark this container as the loadedResourcesContainer
 					(this as Record<string, unknown>)._isLoadedResourcesContainer = true;
 
-					const origCollapsed = child.getCollapsedText.bind(child) as () => string;
-					const rawBody = origCollapsed().split("\n").slice(1).join("\n");
+					const rawBody = body.split("\n").slice(1).join("\n");
 					const items = extractItemsFromBody(rawBody, sectionName === "Extensions");
 					tabStore.set(sectionName, items);
 
@@ -613,7 +634,7 @@ if (UserMessageComponent?.prototype && !(globalThis as Record<symbol, boolean>)[
 					}
 				} else if ((this as Record<string, unknown>)._isLoadedResourcesContainer) {
 					// pi core's "[Extension issues]" -> wrap in an arnative box.
-					const text = String(child?.text ?? child?.content ?? (typeof child?.getText === "function" ? child.getText() : ""));
+					const text = themedTextOf(child);
 					if (text.includes("[Extension issues]") && typeof child.render === "function") {
 						const origRender = child.render.bind(child);
 						child.render = (w: number) => renderBoxLines(activeThemeProxy, w, origRender(w), undefined, "warning");
@@ -893,5 +914,22 @@ if (isMain(import.meta.url)) {
 	assert(fakeSection.render(80).length === 0, "child of loadedResourcesContainer suppressed (render = [])");
 	assert(tabStore.get("Skills")?.includes("new-skill-1") === true, "new data lands in tabStore");
 
+	// pi 0.99 ExpandableText shape: `build` callback + `state` object, no getters.
+	const modernSection = {
+		state: { expanded: false },
+		build: () => "[Themes]\n  arnative-sun, arnative-dusk",
+		setText: () => {},
+		render: (_w: number) => ["should be hidden"],
+	};
+	container.addChild(modernSection);
+	assert(modernSection.render(80).length === 0, "pi 0.99 section suppressed (build + state shape)");
+	assert(tabStore.get("Themes")?.includes("arnative-sun") === true, "pi 0.99 section data lands in tabStore");
+
+	// Startup help block is not a resource section and must survive untouched.
+	const helpBlock = { build: () => "\u2580\u2580\u2588  v0.99.1\n\u2588\u2580 \u2588 escape interrupt", state: { expanded: false }, render: () => ["help"] };
+	container.addChild(helpBlock);
+	assert(sectionBodyOf(helpBlock) === "\u2580\u2580\u2588  v0.99.1\n\u2588\u2580 \u2588 escape interrupt", "sectionBodyOf reads the build shape");
+	assert(sectionNameOf(sectionBodyOf(helpBlock)!) === null, "startup help block is not a resource section");
+
 	console.log("section-headers.ts self-check OK");
 }

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,7 +1,7 @@
 {
   "name": "@bismawy/pi-arnative",
-  "version": "0.2.8",
-  "description": "Arnative look for Pi: 11 warm-neutral themes, rounded tool boxes, branded header with tabs, 2-line footer with git/model/status, transcript clock, and a /usage dashboard.",
+  "version": "0.2.10",
+  "description": "Arnative look for Pi: warm-neutral themes, rounded tool boxes, tabbed header, compact footer, transcript clock, and a /usage dashboard.",
   "keywords": [
     "pi-package",
     "pi-theme",