@underactive/pi-topping-statusline 0.1.0 → 0.1.1

package/index.ts

@@ -25,38 +25,15 @@ import {
 	type ExtensionContext,
 } from "@earendil-works/pi-coding-agent";
 import type { Component, TUI } from "@earendil-works/pi-tui";
-import { visibleWidth } from "@earendil-works/pi-tui";
+import { makeBoxPainters, renderBoxRow } from "./src/box.js";
 import { SegmentContextBuilder } from "./src/context.js";
+import { isBorderRow, stripAnsi, stripRedundantStats } from "./src/footer.js";
 import { buildStatusLine } from "./src/layout.js";
-import {
-	perimeterLength,
-	perimeterPosition,
-	RAINBOW_DEG_PER_FRAME,
-	RAINBOW_FRAME_MS,
-	RainbowBorder,
-} from "./src/rainbow.js";
+import { RAINBOW_DEG_PER_FRAME, RAINBOW_FRAME_MS, RainbowBorder } from "./src/rainbow.js";
 import { registerSettingsCommand } from "./src/settings-menu.js";
 import { createSettingsState } from "./src/settings.js";
 import { theme } from "./src/theme.js";
 import { TokenRateMonitor } from "./src/token-rate.js";
-import type { EffectiveStatusLineSettings, SegmentIncludes } from "./src/types.js";
-
-function segmentIncludes(effective: EffectiveStatusLineSettings): SegmentIncludes {
-	const allSegments = [
-		...effective.leftSegments,
-		...effective.rightSegments,
-		...effective.bottomLeftSegments,
-		...effective.bottomRightSegments,
-	];
-	return {
-		git: allSegments.includes("git"),
-		pr: allSegments.includes("pr"),
-		piStats: allSegments.includes("pi_stats"),
-		tokenRate: allSegments.includes("token_rate"),
-		feeds: allSegments.includes("feeds") ? effective.segmentOptions.feeds.map(feed => feed.customType) : [],
-	};
-}
-
 type EditorFactory = NonNullable<ReturnType<ExtensionContext["ui"]["getEditorComponent"]>>;
 
 export default function (pi: ExtensionAPI) {
@@ -109,11 +86,6 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	const MIN_BOXED_WIDTH = 12;
-	const ANSI_RE = /\x1b\[[0-9;]*m/g;
-	const isBorderRow = (row: string): boolean => {
-		const text = row.replace(ANSI_RE, "");
-		return /^─+$/.test(text) || /^─+ [↑↓] \d+ more\s*─*$/.test(text);
-	};
 
 	const renderBoxed = (
 		innerRender: (width: number) => string[],
@@ -138,77 +110,45 @@ export default function (pi: ExtensionAPI) {
 		}
 		if (lines.length < 3 || bottomIdx < 2) return innerRender(width);
 
-		const hint = (lines[bottomIdx] ?? "").replace(ANSI_RE, "").match(/[↑↓] \d+ more/)?.[0] ?? "";
+		const hint = stripAnsi(lines[bottomIdx] ?? "").match(/[↑↓] \d+ more/)?.[0] ?? "";
 		const effective = state.effective;
-		const include = segmentIncludes(effective);
+		const include = effective.includes;
 		const segCtx = builder.build(innerWidth, effective.segmentOptions, include, hint || undefined);
 		// borderColor is assigned by the host after the factory returns — read late.
 		const border = editor.borderColor ?? ((s: string) => s);
 		const rainbowOn = rainbowActive();
 		const box = theme.getBox(effective.borderStyle);
-		const perimeter = perimeterLength(width, bottomIdx);
-		// Per-glyph paint: rainbow mode colors each cell by its perimeter walk
-		// position; otherwise the host border color is applied per glyph, which
-		// renders identically to the old per-fragment wraps.
-		const paint = (row: number, col: number, ch: string): string =>
-			rainbowOn ? rainbow.colorChar(ch, perimeterPosition(row, col, width, bottomIdx), perimeter) : border(ch);
-		const horizRun = (row: number, startCol: number, count: number): string => {
-			if (!rainbowOn) return border(box.horizontal.repeat(count));
-			let out = "";
-			for (let k = 0; k < count; k++) out += paint(row, startCol + k, box.horizontal);
-			return out;
-		};
-		const gapColor = (str: string, startCol: number, row: number): string => {
-			if (!rainbowOn) return border(str);
-			let out = "";
-			for (let k = 0; k < str.length; k++) out += paint(row, startCol + k, str[k]!);
-			return out;
-		};
+		const painters = makeBoxPainters({ rainbowOn, rainbow, box, width, bottomIdx, flat: border });
 		const bar = buildStatusLine(
 			innerWidth,
 			segCtx,
 			effective,
-			gapColor,
+			painters.gapColor,
 			{
 				left: effective.leftSegments,
 				right: effective.rightSegments,
 			},
 			{ col: 3, row: 0 },
 		);
-		const barWidth = visibleWidth(bar);
-		const pad = Math.max(0, innerWidth - barWidth);
 		// Leading spacer row: keeps the transcript from sitting flush on the box.
-		const out: string[] = [
-			"",
-			paint(0, 0, box.topLeft) +
-				horizRun(0, 1, 2) +
-				bar +
-				horizRun(0, 3 + barWidth, pad + 2) +
-				paint(0, width - 1, box.topRight),
-		];
+		const out: string[] = ["", renderBoxRow(painters, bar, 0, width, box.topLeft, box.topRight)];
 		for (let i = 1; i < bottomIdx; i++) {
-			out.push(paint(i, 0, box.vertical) + " " + (lines[i] ?? "") + "   " + paint(i, width - 1, box.vertical));
+			out.push(
+				painters.paint(i, 0, box.vertical) + " " + (lines[i] ?? "") + "   " + painters.paint(i, width - 1, box.vertical),
+			);
 		}
 		const bottomBar = buildStatusLine(
 			innerWidth,
 			segCtx,
 			effective,
-			gapColor,
+			painters.gapColor,
 			{
 				left: effective.bottomLeftSegments,
 				right: effective.bottomRightSegments,
 			},
 			{ col: 3, row: bottomIdx },
 		);
-		const bottomBarWidth = visibleWidth(bottomBar);
-		const bottomPad = Math.max(0, innerWidth - bottomBarWidth);
-		out.push(
-			paint(bottomIdx, 0, box.bottomLeft) +
-				horizRun(bottomIdx, 1, 2) +
-				bottomBar +
-				horizRun(bottomIdx, 3 + bottomBarWidth, bottomPad + 2) +
-				paint(bottomIdx, width - 1, box.bottomRight),
-		);
+		out.push(renderBoxRow(painters, bottomBar, bottomIdx, width, box.bottomLeft, box.bottomRight));
 		for (let i = bottomIdx + 1; i < lines.length; i++) {
 			out.push(`  ${lines[i]}`);
 		}
@@ -237,25 +177,6 @@ export default function (pi: ExtensionAPI) {
 		ctx.ui.setEditorComponent(ourFactory);
 	};
 
-	// Redundant with the bar or the graph: the footer's first line (cwd + git
-	// branch + session name) entirely, and — within the stats line — the context
-	// chunk ("22.8%/1.0M (auto)", which the graph's own label repeats) and the
-	// right-aligned model side ("(provider) model • thinking"). The unique stats
-	// (↑↓ tokens, cache R/W, hit rate, cost) survive; when nothing unique remains
-	// the line collapses entirely.
-	const CONTEXT_CHUNK_RE = /(?:\?|\d+(?:\.\d+)?%)\/\S+(?: \(auto\))?/;
-	const stripRedundantStats = (statsLine: string | undefined): string | undefined => {
-		if (!statsLine) return undefined;
-		const plain = statsLine.replace(ANSI_RE, "");
-		// The model side is right-aligned with >=2 spaces of padding; stats parts
-		// are single-space separated, so the first 2+ space run is the boundary.
-		const left = (plain.split(/ {2,}/)[0] ?? "")
-			.replace(CONTEXT_CHUNK_RE, "")
-			.replace(/\s+/g, " ")
-			.trim();
-		return left || undefined;
-	};
-
 	const PI_STATS_CACHE_MS = 250;
 	let piStatsCache: { at: number; value: string | undefined } | undefined;
 	builder.setPiStatsProvider(width => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@underactive/pi-topping-statusline",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "oh-my-pi's powerline statusline as a pi extension with some customizations",
 	"keywords": [
 		"pi-package",

package/src/box.ts

@@ -0,0 +1,69 @@
+/**
+ * Shared box-chrome painting for the live editor box (index.ts) and the
+ * settings-menu preview, so the 3/2/+2 row geometry has one definition.
+ *
+ * Rainbow mode colors each glyph by its perimeter-walk position; otherwise
+ * the caller's flat painter wraps whole runs in one escape sequence, which
+ * renders identically to per-glyph wraps with fewer bytes. The flat painter
+ * and the RainbowBorder instance are injected because they differ per caller
+ * (host borderColor vs menu theme; shared stepped animator vs phase-from-
+ * elapsed instance).
+ */
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { perimeterLength, perimeterPosition, type RainbowBorder } from "./rainbow.js";
+import type { BoxGlyphs } from "./theme.js";
+
+export interface BoxPainters {
+	paint(row: number, col: number, ch: string): string;
+	horizRun(row: number, startCol: number, count: number): string;
+	/** Signature matches buildStatusLine's gapBorderColor callback. */
+	gapColor(str: string, startCol: number, row: number): string;
+}
+
+export function makeBoxPainters(opts: {
+	rainbowOn: boolean;
+	rainbow: RainbowBorder;
+	box: BoxGlyphs;
+	width: number;
+	bottomIdx: number;
+	flat: (str: string) => string;
+}): BoxPainters {
+	const { rainbowOn, rainbow, box, width, bottomIdx, flat } = opts;
+	const perimeter = perimeterLength(width, bottomIdx);
+	const paint = (row: number, col: number, ch: string): string =>
+		rainbowOn ? rainbow.colorChar(ch, perimeterPosition(row, col, width, bottomIdx), perimeter) : flat(ch);
+	const horizRun = (row: number, startCol: number, count: number): string => {
+		if (!rainbowOn) return flat(box.horizontal.repeat(count));
+		let out = "";
+		for (let k = 0; k < count; k++) out += paint(row, startCol + k, box.horizontal);
+		return out;
+	};
+	const gapColor = (str: string, startCol: number, row: number): string => {
+		if (!rainbowOn) return flat(str);
+		let out = "";
+		let k = 0;
+		for (const ch of str) out += paint(row, startCol + k++, ch);
+		return out;
+	};
+	return { paint, horizRun, gapColor };
+}
+
+/** A bar row: corner, 2-cell run, the bar, a pad+2 run, corner — 6 cells of chrome. */
+export function renderBoxRow(
+	painters: BoxPainters,
+	bar: string,
+	rowIdx: number,
+	boxWidth: number,
+	leftGlyph: string,
+	rightGlyph: string,
+): string {
+	const barWidth = visibleWidth(bar);
+	const pad = Math.max(0, boxWidth - 6 - barWidth);
+	return (
+		painters.paint(rowIdx, 0, leftGlyph) +
+		painters.horizRun(rowIdx, 1, 2) +
+		bar +
+		painters.horizRun(rowIdx, 3 + barWidth, pad + 2) +
+		painters.paint(rowIdx, boxWidth - 1, rightGlyph)
+	);
+}

package/src/footer.ts

@@ -0,0 +1,34 @@
+/**
+ * Pure helpers for parsing host-rendered rows: the editor's plain ─── border
+ * rows (with or without the scroll hint) and the default footer's stats line.
+ */
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+
+export function stripAnsi(str: string): string {
+	return str.replace(ANSI_RE, "");
+}
+
+export function isBorderRow(row: string): boolean {
+	const text = stripAnsi(row);
+	return /^─+$/.test(text) || /^─+ [↑↓] \d+ more\s*─*$/.test(text);
+}
+
+// Redundant with the bar or the graph: the footer's first line (cwd + git
+// branch + session name) entirely, and — within the stats line — the context
+// chunk ("22.8%/1.0M (auto)", which the graph's own label repeats) and the
+// right-aligned model side ("(provider) model • thinking"). The unique stats
+// (↑↓ tokens, cache R/W, hit rate, cost) survive; when nothing unique remains
+// the line collapses entirely.
+const CONTEXT_CHUNK_RE = /(?:\?|\d+(?:\.\d+)?%)\/\S+(?: \(auto\))?/;
+
+export function stripRedundantStats(statsLine: string | undefined): string | undefined {
+	if (!statsLine) return undefined;
+	const plain = stripAnsi(statsLine);
+	// The model side is right-aligned with >=2 spaces of padding; stats parts
+	// are single-space separated, so the first 2+ space run is the boundary.
+	const left = (plain.split(/ {2,}/)[0] ?? "")
+		.replace(CONTEXT_CHUNK_RE, "")
+		.replace(/\s+/g, " ")
+		.trim();
+	return left || undefined;
+}

package/src/layout.ts

@@ -17,6 +17,40 @@ import type { EffectiveStatusLineSettings, SegmentContext, StatusLineSegmentId }
 
 const TRANSPARENT_BG_ANSI = "\x1b[49m";
 
+const MIN_PATH_WIDTH = 8;
+const MAX_SHRINK_PASSES = 8;
+const MIN_PATH_MAX_LENGTH = 4;
+
+/** Re-render the path segment narrower to absorb `overflow` cells; undefined when it cannot shrink. */
+function shrinkPathSegment(ctx: SegmentContext, currentContent: string, overflow: number): string | undefined {
+	const currentPathVW = visibleWidth(currentContent);
+	const shrinkable = currentPathVW - MIN_PATH_WIDTH;
+	if (shrinkable <= 0) return undefined;
+
+	const shrinkBy = Math.min(shrinkable, overflow);
+	const currentMaxLen = ctx.options.path.maxLength;
+	let newMaxLen = Math.max(MIN_PATH_MAX_LENGTH, Math.min(currentMaxLen, currentPathVW) - shrinkBy);
+	const pathCtx = (maxLen: number): SegmentContext => ({
+		...ctx,
+		options: { ...ctx.options, path: { ...ctx.options.path, maxLength: maxLen } },
+	});
+	let reRendered = renderSegment("path", pathCtx(newMaxLen));
+	if (!reRendered.visible || !reRendered.content) return undefined;
+
+	// maxLength governs path text, not icon prefix; iterate to compensate
+	for (let i = 0; i < MAX_SHRINK_PASSES; i++) {
+		const saved = currentPathVW - visibleWidth(reRendered.content);
+		if (saved >= shrinkBy) break;
+		const nextMaxLen = Math.max(MIN_PATH_MAX_LENGTH, newMaxLen - (shrinkBy - saved));
+		if (nextMaxLen >= newMaxLen) break;
+		newMaxLen = nextMaxLen;
+		const adjusted = renderSegment("path", pathCtx(newMaxLen));
+		if (!adjusted.visible || !adjusted.content) break;
+		reRendered = adjusted;
+	}
+	return reRendered.content;
+}
+
 export function buildStatusLine(
 	width: number,
 	ctx: SegmentContext,
@@ -84,34 +118,10 @@ export function buildStatusLine(
 		// Shrink path before dropping left segments — path is the only elastic segment
 		const pathIdx = leftSegIds.indexOf("path");
 		if (pathIdx >= 0 && totalWidth() > width) {
-			const overflow = totalWidth() - width;
-			const currentPathVW = visibleWidth(left[pathIdx]);
-			const minPathVW = 8;
-			const shrinkable = currentPathVW - minPathVW;
-			if (shrinkable > 0) {
-				const shrinkBy = Math.min(shrinkable, overflow);
-				const currentMaxLen = ctx.options.path.maxLength;
-				let newMaxLen = Math.max(4, Math.min(currentMaxLen, currentPathVW) - shrinkBy);
-				const pathCtx = (maxLen: number): SegmentContext => ({
-					...ctx,
-					options: { ...ctx.options, path: { ...ctx.options.path, maxLength: maxLen } },
-				});
-				let reRendered = renderSegment("path", pathCtx(newMaxLen));
-				if (reRendered.visible && reRendered.content) {
-					// maxLength governs path text, not icon prefix; iterate to compensate
-					for (let i = 0; i < 8; i++) {
-						const saved = currentPathVW - visibleWidth(reRendered.content);
-						if (saved >= shrinkBy) break;
-						const nextMaxLen = Math.max(4, newMaxLen - (shrinkBy - saved));
-						if (nextMaxLen >= newMaxLen) break;
-						newMaxLen = nextMaxLen;
-						const adjusted = renderSegment("path", pathCtx(newMaxLen));
-						if (!adjusted.visible || !adjusted.content) break;
-						reRendered = adjusted;
-					}
-					left[pathIdx] = reRendered.content;
-					leftWidth = leftGroupWidth(left);
-				}
+			const replacement = shrinkPathSegment(ctx, left[pathIdx], totalWidth() - width);
+			if (replacement !== undefined) {
+				left[pathIdx] = replacement;
+				leftWidth = leftGroupWidth(left);
 			}
 		}
 		const leftOverflowDropIndex = (): number => {

package/src/settings-menu.ts

@@ -4,17 +4,11 @@
  * menu values, and the command registration.
  */
 import type { ExtensionAPI, ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
-import { visibleWidth } from "@earendil-works/pi-tui";
+import { makeBoxPainters, renderBoxRow } from "./box.js";
 import type { SegmentContextBuilder } from "./context.js";
 import { buildStatusLine } from "./layout.js";
 import { showMenu, type MenuSection, type MenuValue, type PreviewResult } from "./menu.js";
-import {
-	perimeterLength,
-	perimeterPosition,
-	RAINBOW_CYCLE_MS,
-	RAINBOW_FRAME_MS,
-	RainbowBorder,
-} from "./rainbow.js";
+import { RAINBOW_CYCLE_MS, RAINBOW_FRAME_MS, RainbowBorder } from "./rainbow.js";
 import {
 	applySettings,
 	BORDER_STYLES,
@@ -227,8 +221,7 @@ class StatusLinePreview {
 		// The theme singleton drives glyph lookups everywhere, so swap the
 		// symbol preset for this synchronous render only; the live bar behind
 		// the overlay keeps the applied preset.
-		const applied = this.#state.effective.symbols;
-		theme.setSymbolPreset(effective.symbols);
+		const applied = theme.setSymbolPreset(effective.symbols);
 		try {
 			const include: SegmentIncludes = {
 				git: true,
@@ -258,37 +251,21 @@ class StatusLinePreview {
 			};
 
 			const box = theme.getBox(effective.borderStyle);
-			const staticBorder = (s: string, _startCol: number, _row: number) => this.#uiTheme.fg("border", s);
 			// The preview box is three rows tall: top bar, side verticals, bottom bar.
 			const bottomIdx = 2;
-			const rainbow = new RainbowBorder((elapsedMs * 360) / RAINBOW_CYCLE_MS);
-			const perimeter = perimeterLength(boxWidth, bottomIdx);
-			const paint = (row: number, col: number, ch: string): string =>
-				rainbowOn
-					? rainbow.colorChar(ch, perimeterPosition(row, col, boxWidth, bottomIdx), perimeter)
-					: staticBorder(ch, col, row);
-			const horizRun = (row: number, startCol: number, count: number): string => {
-				let out = "";
-				for (let k = 0; k < count; k++) out += paint(row, startCol + k, box.horizontal);
-				return out;
-			};
-			const gapColor = (str: string, startCol: number, row: number): string =>
-				rainbowOn ? [...str].map((ch, k) => paint(row, startCol + k, ch)).join("") : staticBorder(str, startCol, row);
-			const row = (bar: string, rowIdx: number, left: string, right: string): string => {
-				const pad = Math.max(0, barWidth - visibleWidth(bar));
-				return (
-					paint(rowIdx, 0, left) +
-					horizRun(rowIdx, 1, 2) +
-					bar +
-					horizRun(rowIdx, 3 + visibleWidth(bar), pad + 2) +
-					paint(rowIdx, boxWidth - 1, right)
-				);
-			};
+			const painters = makeBoxPainters({
+				rainbowOn,
+				rainbow: new RainbowBorder((elapsedMs * 360) / RAINBOW_CYCLE_MS),
+				box,
+				width: boxWidth,
+				bottomIdx,
+				flat: s => this.#uiTheme.fg("border", s),
+			});
 			const top = buildStatusLine(
 				barWidth,
 				ctx,
 				effective,
-				gapColor,
+				painters.gapColor,
 				{
 					left: effective.leftSegments,
 					right: effective.rightSegments,
@@ -299,7 +276,7 @@ class StatusLinePreview {
 				barWidth,
 				ctx,
 				effective,
-				gapColor,
+				painters.gapColor,
 				{
 					left: effective.bottomLeftSegments,
 					right: effective.bottomRightSegments,
@@ -308,9 +285,11 @@ class StatusLinePreview {
 			);
 			return {
 				lines: [
-					row(top, 0, box.topLeft, box.topRight),
-					paint(1, 0, box.vertical) + " ".repeat(Math.max(0, boxWidth - 2)) + paint(1, boxWidth - 1, box.vertical),
-					row(bottom, bottomIdx, box.bottomLeft, box.bottomRight),
+					renderBoxRow(painters, top, 0, boxWidth, box.topLeft, box.topRight),
+					painters.paint(1, 0, box.vertical) +
+						" ".repeat(Math.max(0, boxWidth - 2)) +
+						painters.paint(1, boxWidth - 1, box.vertical),
+					renderBoxRow(painters, bottom, bottomIdx, boxWidth, box.bottomLeft, box.bottomRight),
 				],
 				// Keep the preview animated only while the rainbow is enabled;
 				// a static preview refreshes once and stops.

package/src/settings.ts

@@ -10,6 +10,7 @@ import { theme, type BorderStyle, type SymbolPreset } from "./theme.js";
 import type {
 	EffectiveStatusLineSettings,
 	FeedFormat,
+	SegmentIncludes,
 	StatusLineFeed,
 	StatusLineSegmentId,
 	StatusLineSegmentToggles,
@@ -131,6 +132,16 @@ export function resolveEffectiveSettings(settings: StatusLineSettings): Effectiv
 	if (seg.feedsBottomLeft) bottomLeftSegments.push("feeds");
 	if (seg.tokenRateBottomLeft) bottomLeftSegments.push("token_rate");
 
+	const feeds = settings.feeds ? sanitizeFeeds(settings.feeds) : [...DEFAULT_FEEDS];
+	const allSegments = [...leftSegments, ...rightSegments, ...bottomLeftSegments, ...bottomRightSegments];
+	const includes: SegmentIncludes = {
+		git: allSegments.includes("git"),
+		pr: allSegments.includes("pr"),
+		piStats: allSegments.includes("pi_stats"),
+		tokenRate: allSegments.includes("token_rate"),
+		feeds: allSegments.includes("feeds") ? feeds.map(feed => feed.customType) : [],
+	};
+
 	return {
 		transparent: settings.transparent ?? true,
 		separator: settings.separator ?? "powerline-thin",
@@ -141,11 +152,12 @@ export function resolveEffectiveSettings(settings: StatusLineSettings): Effectiv
 		bottomLeftSegments,
 		bottomRightSegments,
 		rainbowBorder: settings.rainbowBorder ?? true,
+		includes,
 		segmentOptions: {
 			model: { showModel: seg.model, showProvider: seg.provider, showThinking: seg.thinking },
 			path: { abbreviate: true, maxLength: 40, stripWorkPrefix: true },
 			context: { showBar: seg.contextBar, showStats: seg.contextStats },
-			feeds: settings.feeds ? sanitizeFeeds(settings.feeds) : [...DEFAULT_FEEDS],
+			feeds,
 		},
 	};
 }

package/src/tests/box.test.ts

@@ -0,0 +1,84 @@
+/**
+ * Geometry contracts for the shared box chrome: every bar row must total
+ * exactly boxWidth cells with the 3/2/+2 layout (corner, 2-cell run, bar,
+ * pad+2 run, corner), and the non-rainbow painters must wrap whole runs in a
+ * single flat call rather than per glyph — index.ts relies on that fast path
+ * to keep per-frame ANSI output small.
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import { stripVTControlCharacters } from "node:util";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { makeBoxPainters, renderBoxRow } from "../box.ts";
+import { RainbowBorder } from "../rainbow.ts";
+import type { BoxGlyphs } from "../theme.ts";
+
+const ROUNDED: BoxGlyphs = {
+	topLeft: "╭",
+	topRight: "╮",
+	bottomLeft: "╰",
+	bottomRight: "╯",
+	horizontal: "─",
+	vertical: "│",
+};
+
+const identityPainters = (boxWidth: number) =>
+	makeBoxPainters({
+		rainbowOn: false,
+		rainbow: new RainbowBorder(0),
+		box: ROUNDED,
+		width: boxWidth,
+		bottomIdx: 2,
+		flat: s => s,
+	});
+
+test("a bar row is corner + 2 run + bar + pad+2 run + corner", () => {
+	const out = renderBoxRow(identityPainters(20), "X", 0, 20, ROUNDED.topLeft, ROUNDED.topRight);
+	assert.equal(out, "╭──X" + "─".repeat(15) + "╮");
+	assert.equal(visibleWidth(out), 20);
+});
+
+test("an empty bar renders chrome only, still totalling boxWidth", () => {
+	const out = renderBoxRow(identityPainters(20), "", 2, 20, ROUNDED.bottomLeft, ROUNDED.bottomRight);
+	assert.equal(out, "╰──" + "─".repeat(16) + "╯");
+	assert.equal(visibleWidth(out), 20);
+});
+
+test("wide characters in the bar consume pad cells, keeping the total fixed", () => {
+	const out = renderBoxRow(identityPainters(20), "日本", 0, 20, ROUNDED.topLeft, ROUNDED.topRight);
+	assert.equal(out, "╭──日本" + "─".repeat(12) + "╮");
+	assert.equal(visibleWidth(out), 20);
+});
+
+test("a bar wider than the budget clamps pad to zero", () => {
+	const bar = "x".repeat(15);
+	const out = renderBoxRow(identityPainters(20), bar, 0, 20, ROUNDED.topLeft, ROUNDED.topRight);
+	assert.equal(out, `╭──${bar}──╮`);
+});
+
+test("non-rainbow painters wrap whole runs in one flat call", () => {
+	const painters = makeBoxPainters({
+		rainbowOn: false,
+		rainbow: new RainbowBorder(0),
+		box: ROUNDED,
+		width: 20,
+		bottomIdx: 2,
+		flat: s => `[${s}]`,
+	});
+	assert.equal(painters.horizRun(0, 1, 3), "[───]");
+	assert.equal(painters.gapColor("──", 5, 0), "[──]");
+	assert.equal(painters.paint(0, 0, ROUNDED.topLeft), "[╭]");
+});
+
+test("rainbow coloring never changes the geometry", () => {
+	const painters = makeBoxPainters({
+		rainbowOn: true,
+		rainbow: new RainbowBorder(0),
+		box: ROUNDED,
+		width: 20,
+		bottomIdx: 2,
+		flat: s => s,
+	});
+	const out = renderBoxRow(painters, "X", 0, 20, ROUNDED.topLeft, ROUNDED.topRight);
+	assert.equal(stripVTControlCharacters(out), "╭──X" + "─".repeat(15) + "╮");
+});

package/src/tests/footer.test.ts

@@ -0,0 +1,65 @@
+/**
+ * These helpers regex-parse rows the HOST renders (the editor's border rows
+ * and the default footer's stats line), so the fixtures mirror real pi output:
+ * border rows are ─ (U+2500) runs, the scroll hint is "↑/↓ N more", stats
+ * parts are single-space separated with the model side right-aligned behind a
+ * 2+ space gap, and the context chunk looks like "22.8%/1.0M (auto)".
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import { isBorderRow, stripAnsi, stripRedundantStats } from "../footer.ts";
+
+test("isBorderRow accepts a plain border run", () => {
+	assert.equal(isBorderRow("─────"), true);
+});
+
+test("isBorderRow accepts a scroll-hint row with a trailing run", () => {
+	assert.equal(isBorderRow("─── ↑ 3 more ───"), true);
+});
+
+test("isBorderRow accepts a scroll-hint row without a trailing run", () => {
+	assert.equal(isBorderRow("── ↓ 12 more"), true);
+});
+
+test("isBorderRow sees through ANSI color codes", () => {
+	assert.equal(isBorderRow("\x1b[38;5;244m────\x1b[0m"), true);
+});
+
+test("isBorderRow rejects text rows, empty rows, and ASCII dashes", () => {
+	assert.equal(isBorderRow("│ hello │"), false);
+	assert.equal(isBorderRow(""), false);
+	assert.equal(isBorderRow("--- ascii ---"), false);
+});
+
+test("stripAnsi removes SGR sequences only", () => {
+	assert.equal(stripAnsi("\x1b[32mgreen\x1b[0m plain"), "green plain");
+});
+
+test("stripRedundantStats passes undefined through", () => {
+	assert.equal(stripRedundantStats(undefined), undefined);
+});
+
+test("stripRedundantStats drops the context chunk but keeps unique stats", () => {
+	// "92.3%" must not false-match the chunk regex (no slash follows it).
+	assert.equal(
+		stripRedundantStats("↑ 12.4K ↓ 3.1K R 148K W 12K 92.3% $0.42 22.8%/1.0M (auto)"),
+		"↑ 12.4K ↓ 3.1K R 148K W 12K 92.3% $0.42",
+	);
+});
+
+test("stripRedundantStats drops the right-aligned model side", () => {
+	assert.equal(stripRedundantStats("↑ 1K ↓ 2K   (anthropic) claude-opus • max"), "↑ 1K ↓ 2K");
+});
+
+test("stripRedundantStats collapses to undefined when only redundant parts remain", () => {
+	assert.equal(stripRedundantStats("?/200K  (openai) gpt"), undefined);
+	assert.equal(stripRedundantStats("22.8%/1.0M (auto)  model"), undefined);
+});
+
+test("stripRedundantStats leaves a line of unique stats untouched", () => {
+	assert.equal(stripRedundantStats("↑ 1K ↓ 2K R 5K W 1K $0.10"), "↑ 1K ↓ 2K R 5K W 1K $0.10");
+});
+
+test("stripRedundantStats strips ANSI before parsing", () => {
+	assert.equal(stripRedundantStats("\x1b[32m↑ 1K\x1b[0m ↓ 2K"), "↑ 1K ↓ 2K");
+});

package/src/tests/utils.test.ts

@@ -0,0 +1,57 @@
+/**
+ * clampPathLength budgets display cells (visibleWidth), matching the cell
+ * budgets layout.ts compares its output against. ASCII behavior is unchanged
+ * from the .length-based implementation; CJK/emoji paths are where the two
+ * measures diverge (a CJK char is 1 UTF-16 unit but 2 cells).
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { clampPathLength } from "../utils.ts";
+
+test("returns the path unchanged when it fits the budget", () => {
+	assert.equal(clampPathLength("~/a/b", 20), "~/a/b");
+});
+
+test("elides middle components, keeping the first folder and basename", () => {
+	assert.equal(clampPathLength("~/projects/pi/topping/src", 20), "~/projects/…/src");
+});
+
+test("drops middle components farthest from the cwd first", () => {
+	assert.equal(clampPathLength("~/a/bb/cc/dd", 11), "~/a/…/cc/dd");
+});
+
+test("drops the first folder once even one middle component overflows", () => {
+	assert.equal(clampPathLength("~/aaaa/bb/cc", 8), "…/bb/cc");
+});
+
+test("falls back to tail truncation on a long basename", () => {
+	const result = clampPathLength("~/x/averylongbasename", 10);
+	assert.equal(result, "…gbasename");
+	assert.ok(visibleWidth(result) <= 10);
+});
+
+test("CJK components are measured in cells, not UTF-16 units", () => {
+	const pwd = "~/文档/项目/源代码";
+	// The .length-based implementation would have returned this un-clamped:
+	// 11 UTF-16 units fit a budget of 12, but the path spans 18 cells.
+	assert.ok(pwd.length <= 12 && visibleWidth(pwd) > 12);
+	const result = clampPathLength(pwd, 12);
+	assert.equal(result, "…/源代码");
+	assert.ok(visibleWidth(result) <= 12);
+});
+
+test("emoji tail truncation never splits a surrogate pair or exceeds the budget", () => {
+	const result = clampPathLength("~/x/📁📁📁name", 6);
+	assert.ok(result.startsWith("…"));
+	assert.ok(visibleWidth(result) <= 6);
+	assert.doesNotThrow(() => encodeURIComponent(result));
+});
+
+test("all-CJK fallback stays within the cell budget", () => {
+	const pwd = "/一二三四五六七";
+	assert.ok(pwd.length <= 8 && visibleWidth(pwd) > 8);
+	const result = clampPathLength(pwd, 8);
+	assert.equal(result, "…五六七");
+	assert.ok(visibleWidth(result) <= 8);
+});

package/src/theme.ts

@@ -44,24 +44,8 @@ export interface StatusSymbols {
 		folder: string;
 		scratchFolder: string;
 		worktree: string;
-		git: string;
 		branch: string;
 		pr: string;
-		tokens: string;
-		context: string;
-		cost: string;
-		time: string;
-		ghost: string;
-		agents: string;
-		job: string;
-		cache: string;
-		input: string;
-		output: string;
-		throughput: string;
-		host: string;
-		session: string;
-		auto: string;
-		fast: string;
 	};
 	thinking: {
 		minimal: string;
@@ -70,7 +54,6 @@ export interface StatusSymbols {
 		high: string;
 		xhigh: string;
 		max: string;
-		autoPending: string;
 	};
 }
 
@@ -96,24 +79,8 @@ const UNICODE_SYMBOLS: StatusSymbols = {
 		folder: "📁",
 		scratchFolder: "🗑",
 		worktree: "🌳",
-		git: "⎇",
 		branch: "⑂",
 		pr: "⤴",
-		tokens: "🪙",
-		context: "◫",
-		cost: "💲",
-		time: "⏱",
-		ghost: "👻",
-		agents: "👥",
-		job: "⚙",
-		cache: "💾",
-		input: "⤵",
-		output: "⤴",
-		throughput: "⚡",
-		host: "🖥",
-		session: "🆔",
-		auto: "⟲",
-		fast: "⚡",
 	},
 	thinking: {
 		minimal: "○ min",
@@ -122,7 +89,6 @@ const UNICODE_SYMBOLS: StatusSymbols = {
 		high: "◒ high",
 		xhigh: "◕ xhigh",
 		max: "◉ max",
-		autoPending: "⟳",
 	},
 };
 
@@ -148,24 +114,8 @@ const NERD_SYMBOLS: StatusSymbols = {
 		folder: "\uf115",
 		scratchFolder: "\uf014",
 		worktree: "\uf0e8",
-		git: "\uf1d3",
 		branch: "\uf126",
 		pr: "\uea64",
-		tokens: "\ue26b",
-		context: "\ue70f",
-		cost: "\uf155",
-		time: "\uf017",
-		ghost: "\u{f02a0}",
-		agents: "\uf0c0",
-		job: "\uf013",
-		cache: "\uf1c0",
-		input: "\uf090",
-		output: "\uf08b",
-		throughput: "⚡",
-		host: "\uf109",
-		session: "\u{f0051}",
-		auto: "\u{f0068}",
-		fast: "\uf0e7",
 	},
 	thinking: {
 		minimal: "\u{f0a9e} min",
@@ -174,7 +124,6 @@ const NERD_SYMBOLS: StatusSymbols = {
 		high: "\u{f0aa3} high",
 		xhigh: "\u{f0aa5} xhigh",
 		max: "\u{f06d} max",
-		autoPending: "\u{f074}",
 	},
 };
 
@@ -200,24 +149,8 @@ const ASCII_SYMBOLS: StatusSymbols = {
 		folder: "[D]",
 		scratchFolder: "[T]",
 		worktree: "[wt]",
-		git: "git:",
 		branch: "@",
 		pr: "PR",
-		tokens: "tok:",
-		context: "ctx:",
-		cost: "$",
-		time: "t:",
-		ghost: "@",
-		agents: "AG",
-		job: "bg",
-		cache: "cache",
-		input: "in:",
-		output: "out:",
-		throughput: "tok/s:",
-		host: "host",
-		session: "id",
-		auto: "[A]",
-		fast: ">>",
 	},
 	thinking: {
 		minimal: "[min]",
@@ -226,7 +159,6 @@ const ASCII_SYMBOLS: StatusSymbols = {
 		high: "[high]",
 		xhigh: "[xhigh]",
 		max: "[max]",
-		autoPending: "[~]",
 	},
 };
 
@@ -260,7 +192,6 @@ export type StatusColor =
 	| "muted"
 	| "dim"
 	| "text"
-	| "thinkingHigh"
 	| "statusLineSep"
 	| "statusLineModel"
 	| "statusLinePath"
@@ -268,13 +199,9 @@ export type StatusColor =
 	| "statusLineGitDirty"
 	| "statusLineContext"
 	| "statusLineContextElevated"
-	| "statusLineSpend"
 	| "statusLineStaged"
 	| "statusLineDirty"
-	| "statusLineUntracked"
-	| "statusLineOutput"
-	| "statusLineCost"
-	| "statusLineSubagents";
+	| "statusLineUntracked";
 
 const FG_COLORS: Record<StatusColor, ColorValue> = {
 	accent: "#febc38",
@@ -284,7 +211,6 @@ const FG_COLORS: Record<StatusColor, ColorValue> = {
 	muted: "#777d88",
 	dim: "#5f6673",
 	text: "",
-	thinkingHigh: "#b281d6",
 	statusLineSep: 244,
 	statusLineModel: "#d787af",
 	statusLinePath: "#00afaf",
@@ -292,13 +218,9 @@ const FG_COLORS: Record<StatusColor, ColorValue> = {
 	statusLineGitDirty: "#d7af5f",
 	statusLineContext: "#8787af",
 	statusLineContextElevated: "#e07a1f",
-	statusLineSpend: "#5fafaf",
 	statusLineStaged: 70,
 	statusLineDirty: 178,
 	statusLineUntracked: 39,
-	statusLineOutput: 205,
-	statusLineCost: 205,
-	statusLineSubagents: "#febc38",
 };
 
 const STATUS_LINE_BG: ColorValue = "#121212";
@@ -391,9 +313,11 @@ class StatusTheme {
 	#fgCache = new Map<StatusColor, string>();
 	#bgAnsi: string | undefined;
 
-	setSymbolPreset(preset: SymbolPreset): void {
+	setSymbolPreset(preset: SymbolPreset): SymbolPreset {
+		const previous = this.#preset;
 		this.#preset = preset;
 		this.#symbols = SYMBOL_PRESETS[preset];
+		return previous;
 	}
 
 	get sep(): StatusSymbols["sep"] {

package/src/types.ts

@@ -102,6 +102,7 @@ export interface EffectiveStatusLineSettings {
 	bottomRightSegments: StatusLineSegmentId[];
 	segmentOptions: StatusLineSegmentOptions;
 	rainbowBorder: boolean;
+	includes: SegmentIncludes;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════

package/src/utils.ts

@@ -5,6 +5,7 @@
  * replaced with local hex math so this runs under any pi runtime.
  */
 import { stripVTControlCharacters } from "node:util";
+import { sliceByColumn, visibleWidth } from "@earendil-works/pi-tui";
 import { parseHex } from "./theme.js";
 
 export function formatNumber(n: number): string {
@@ -27,13 +28,14 @@ export function shortenPath(filePath: string, homeDir?: string): string {
 }
 
 /**
- * Clamp a path/label to `maxLen` by eliding middle components with `…`.
- * The first folder (after `~` or the root) and the basename survive longest;
- * middle components drop farthest-from-cwd first. Falls back to plain
- * left-truncation once even `…/basename` overflows.
+ * Clamp a path/label to `maxLen` display cells by eliding middle components
+ * with `…`. The first folder (after `~` or the root) and the basename survive
+ * longest; middle components drop farthest-from-cwd first. Falls back to plain
+ * left-truncation once even `…/basename` overflows. Widths are terminal cells
+ * (matching layout.ts's visibleWidth budgets), not UTF-16 units.
  */
 export function clampPathLength(pwd: string, maxLen: number): string {
-	if (pwd.length <= maxLen) return pwd;
+	if (visibleWidth(pwd) <= maxLen) return pwd;
 
 	const parts = pwd.split("/");
 	const last = parts.length - 1;
@@ -41,16 +43,17 @@ export function clampPathLength(pwd: string, maxLen: number): string {
 
 	for (let dropped = 1; dropped <= last - firstIdx - 1; dropped++) {
 		const candidate = [...parts.slice(0, firstIdx + 1), "…", ...parts.slice(firstIdx + 1 + dropped)].join("/");
-		if (candidate.length <= maxLen) return candidate;
+		if (visibleWidth(candidate) <= maxLen) return candidate;
 	}
 
 	// The first folder no longer fits: keep whatever remains closest to the cwd.
 	for (let start = firstIdx + 1; start <= last; start++) {
 		const candidate = `…/${parts.slice(start).join("/")}`;
-		if (candidate.length <= maxLen) return candidate;
+		if (visibleWidth(candidate) <= maxLen) return candidate;
 	}
 
-	return `…${pwd.slice(-Math.max(0, maxLen - 1))}`;
+	const tailWidth = Math.max(0, maxLen - 1);
+	return `…${sliceByColumn(pwd, visibleWidth(pwd) - tailWidth, tailWidth)}`;
 }
 
 /** Strip ANSI/VT escapes, map control chars to spaces, collapse whitespace. */