@bismawy/pi-arnative 0.2.10 → 0.2.12

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.2.12] - 2026-10-02
+
+### Changed
+- The footer is a fixed 3-row grid: row 1 pairs the cwd line with the model, rows 2-3 pair the extension status (mcp first) with the metrics (tok/s · cache · token) — each side wraps inside its half of the terminal, the right cells stay right-aligned, and a row where both sides ran out is dropped. Replaces the adaptive 2→3 reflow; no click toggle (`extensions/footer.ts`, `layoutFooterGrid()` + `pairRow()`).
+
+## [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

package/README.md

@@ -15,7 +15,7 @@ pi-arnative replaces pi’s default terminal chrome with a unified, cohesive vis
 - Warm Themes: Cohesive, contrast-checked color palettes generated without drift.
 - Tabbed Header: Greeting, version line, and a compact box menu over Directory, Model, Context, Skills, Extensions, Themes, and Shortcut.
 - Rounded Tool Boxes: Clear status, spinner, and duration for every tool call.
-- Enhanced Footer: 2-line layout showing directory path, git branch, model, and token metrics.
+- Enhanced Footer: fixed 3-row grid — directory/git line, then extension status paired with token metrics.
 - Transcript Clock: Timestamps for messages with clean bubble backgrounds.
 - Usage Dashboard: /usage command to track tokens and session costs.
 
@@ -68,7 +68,7 @@ Add to `~/.pi/agent/keybindings.json` to bind `app.session.new`:
 | --- | --- |
 | `extensions/tools.ts` | Rounded tool boxes, spinners, and duration |
 | `extensions/section-headers.ts` | Tabbed header and resource box |
-| `extensions/footer.ts` | 2-line status footer and boxed editor |
+| `extensions/footer.ts` | 3-row status grid footer and boxed editor |
 | `extensions/timestamps.ts` | Message clock and bubble background fixes |
 | `extensions/ui-render-tweaks.ts` | Contrast tweaks, selection style, and UI polish |
 | `extensions/usage.ts` | `/usage` token dashboard |

package/extensions/footer.ts

@@ -1,7 +1,8 @@
 /**
- * Arnative footer (forced to 2 lines) + custom editor.
- * Line 1: cwd | duration | branch/tag/status ...... model + thinking level.
- * Line 2: other extension status (mcp first) ...... tok/s · cache · token.
+ * Arnative footer (fixed 3-row grid, no click toggle).
+ * Row 1: cwd | duration | branch/tag/status ...... model + thinking level.
+ * Rows 2-3: extension status (mcp first) ......... tok/s · cache · token,
+ * each side wrapped inside its half of the width and paired row by row.
  *
  * Transcript clock & bubble bg: extensions/timestamps.ts
  * /new header: extensions/section-headers.ts
@@ -176,7 +177,69 @@ export function boxEditorLines(
 	return out;
 }
 
+/**
+ * The footer as a fixed 3-row grid. Row 1 pairs the head cells (cwd line, model);
+ * rows 2-3 pair the wrapped left cells (extension status, mcp first) with the
+ * wrapped right cells (tok/s · cache · token), each side wrapping inside its half
+ * of the terminal so the columns never collide. Right cells stay right-aligned.
+ * A side that runs out of cells leaves its half blank, and a row where both sides
+ * ran out is dropped, so a quiet footer stays 1-3 rows tall.
+ */
+export function layoutFooterGrid(
+	headLeft: string,
+	headRight: string,
+	left: readonly string[],
+	right: readonly string[],
+	leftSep: string,
+	rightSep: string,
+	width: number,
+	vw: (s: string) => number = visibleWidth,
+): string[] {
+	const half = Math.max(1, Math.floor(width / 2) - 1);
+	// Wrap each side at half width; the first break happens at most once (rows 2-3),
+	// after that the rest stays on the last row and the pairing truncates it.
+	const wrap = (cells: readonly string[], sep: string): string[] => {
+		const rows: string[] = [];
+		let line = "";
+		for (const cell of cells) {
+			const candidate = line ? line + sep + cell : cell;
+			if (line && rows.length === 0 && vw(candidate) > half) {
+				rows.push(line);
+				line = cell;
+			} else {
+				line = candidate;
+			}
+		}
+		if (line) rows.push(line);
+		return rows;
+	};
+	const leftRows = wrap(left, leftSep);
+	const rightRows = wrap(right, rightSep);
+	const out = [pairRow(headLeft, headRight, width, vw)];
+	for (let i = 0; i < Math.max(leftRows.length, rightRows.length); i++) {
+		const l = leftRows[i];
+		const r = rightRows[i];
+		if (l === undefined && r === undefined) break;
+		out.push(pairRow(l ?? "", r ?? "", width, vw));
+	}
+	return out;
+}
+
+/** One grid row: `left` at the start, `right` flush to the right edge. */
+function pairRow(left: string, right: string, width: number, vw: (s: string) => number): string {
+	if (!right) return truncateToWidth(left, width);
+	const rightWidth = Math.min(vw(right), width);
+	if (!left) return " ".repeat(width - rightWidth) + truncateToWidth(right, width);
+	if (vw(left) + 1 + rightWidth <= width) {
+		return left + " ".repeat(width - vw(left) - rightWidth) + right;
+	}
+	// Too wide together: the right cell keeps its columns, the left one is cut.
+	const room = Math.max(1, width - rightWidth - 1);
+	return truncateToWidth(left, room) + " " + truncateToWidth(right, width - room - 1);
+}
+
 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;
@@ -401,8 +464,6 @@ export default function (pi: ExtensionAPI) {
 							left1 = `${acc("\uf07b")} ${dim(cwdShort)}${sep}${pDuration}${sep}${pBranch}${sep}${pTag}${sep}${pState}`;
 						}
 						const right1 = formatModelName(currentModel, currentThinkingLevel, acc, tint, dim);
-						const pad1 = " ".repeat(Math.max(1, width - visibleWidth(left1) - visibleWidth(right1)));
-						const lines = [truncateToWidth(left1 + pad1 + right1, width)];
 
 						const statuses: ReadonlyMap<string, string> = (() => {
 							try {
@@ -412,7 +473,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);
@@ -450,12 +510,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 = "";
@@ -465,15 +525,11 @@ 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("·")} `);
+						const metricCells = [speedStr, opt ? `${acc("\udb80\udf5b")} ${tint(opt)}` : "", usageStr].filter(Boolean);
 
-						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));
-						}
-						return lines;
+						// Fixed 3-row grid: head (cwd/model), then statuses and metrics each
+						// wrapped inside their half of the width — no click toggle.
+						return layoutFooterGrid(left1, right1, groups, metricCells, sep, ` ${dim("·")} `, width);
 					},
 				};
 			});
@@ -664,6 +720,29 @@ if (isMain(import.meta.url)) {
 	assert(formatDuration(65_000) === "1m 5s", "minutes + seconds");
 	assert(formatDuration(3_700_000) === "1h 1m", "hours + minutes");
 
+	// Self-check: the footer grid — head row, then statuses/metrics paired per row.
+	// truncateToWidth appends ANSI resets, so measure through stripAnsi (the real
+	// renderer measures with visibleWidth, which ignores them the same way).
+	const vw = (s: string) => stripAnsi(s).length;
+	const g = (n: number) => "g".repeat(n);
+	// Head row: cwd line left, model right-aligned; groups and metrics pair below.
+	const grid = layoutFooterGrid("H".repeat(10), "M".repeat(6), [g(10), g(10), g(10)], ["s".repeat(10), "u".repeat(10)], " | ", " · ", 40, vw);
+	assert(grid.length === 3, "grid: head + two paired rows");
+	assert(grid[0]!.startsWith("H".repeat(10)) && grid[0]!.endsWith("M".repeat(6)), "grid: head pairs cwd and model");
+	assert(grid[0]!.length === 40, "grid: head right-aligns the model");
+	assert(grid[1]!.includes("g") && grid[1]!.endsWith("s".repeat(10)), "grid: row 2 pairs statuses and metrics");
+	assert(grid.every((l) => vw(l) <= 40), "grid: every row fits the terminal");
+	// Each side wraps inside its half: 3 groups + 2 metrics at width 20 -> 3 rows.
+	const tight = layoutFooterGrid("h", "m", [g(6), g(6), g(6)], [g(6), g(6)], " | ", " · ", 20, vw);
+	assert(tight.length === 3, "grid: wraps inside the half width");
+	assert(tight.every((l) => vw(l) <= 20), "grid: wrapped rows still fit");
+	// The right cell survives an oversized left cell (the left one is truncated).
+	const cut = layoutFooterGrid("h", "m", [g(30)], ["R".repeat(4)], " | ", " · ", 12, vw);
+	assert(cut[1]!.endsWith("R".repeat(4)) && vw(cut[1]!) === 12, "grid: right cell survives a wide left cell");
+	// A side that runs out leaves its half blank; rows where both ran out drop.
+	const blank = layoutFooterGrid("h", "m", [], [], " | ", " · ", 20, vw);
+	assert(blank.length === 1, "grid: empty sides drop their rows");
+
 	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);

package/package.json

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