pi-bar 0.3.41 → 0.3.43

package/README.md

@@ -6,7 +6,7 @@
 **Never accidentally run Opus on a typo again.** pi-bar keeps your model, thinking level, context pressure, a live progress update, and any extension statuses visible in pi's footer.
 
 ```text
-claude-opus-4.7  ❯  think:med  ❯  2.6% / 1.0M  ❯  Reviewing package structure  ❯  plan:active ❯ queue:2
+claude-opus-4.7  ❯  think:med  ❯  2.6% / 1.0M  ❯  Reviewing package structure  ❯  Plan active  ❯  Queue: 2
 ```
 
 ![pi-bar with low context usage](https://cdn.jsdelivr.net/npm/pi-bar@0.3.38/assets/screenshot-green.png)
@@ -35,6 +35,19 @@ If pi is already running after install, reload resources:
 /reload
 ```
 
+## Automatic layout
+
+The footer adapts to terminal width without extra configuration:
+
+- **Model, thinking level, and context percentage take priority.**
+- Separators have two spaces on each side by default, for a roomier display.
+- Progress text shrinks first. If space is still tight, separator padding reduces to one space per side before compacting content. CWD then compacts from its preferred path to `parent/project`, then `project`; context window size is omitted when needed.
+- Extension badges stay in their published order. Badges that cannot fit are hidden whole, with `+N` showing how many are behind the overflow. Open `/bar status` to inspect their text and visibility by key.
+- On very narrow terminals, progress and CWD yield to core information. If even the core cannot fit, the model name is truncated first. At extreme widths, not every value or overflow count can remain visible.
+- Widening the terminal restores the full display. Thinking and context retain their semantic colors throughout.
+
+Existing segment visibility settings still apply; CWD remains opt-in.
+
 ## Customization
 
 pi-bar works out of the box. Run `/bar` inside pi to choose which footer segments and extension statuses are shown:
@@ -99,7 +112,9 @@ Or in pi settings: `bar.progressModel`. Otherwise pi-bar picks a fast model you
 
 ### Configure extension statuses
 
-Other pi extensions can publish small status badges. Pi-bar collects them into the `extensions` segment, strips embedded terminal colors, and separates each badge with the same `❯` divider used by other footer segments. Run `/bar` or `/bar status` inside pi to pick which ones to show:
+Other pi extensions can publish small status badges. Pi-bar displays their text as written, without prepending internal keys: `setStatus("mcp", "MCP: 2/2 servers")` appears as `MCP: 2/2 servers`, not `mcp:MCP: 2/2 servers`. Extensions should publish self-describing text; pi-bar does not guess labels for bare values.
+
+Pi-bar strips embedded terminal colors and control sequences, and separates each badge with the same `❯` divider used by other footer segments. Keys remain available for filtering and identification in `/bar`; selecting a status row shows its current sanitized text. Run `/bar` or `/bar status` inside pi to inspect statuses or pick which ones to show:
 
 ```text
 /bar status
@@ -130,7 +145,7 @@ npm test
 npm run check
 ```
 
-Tests cover path formatting, terminal safety, width limits, and segment visibility/persistence. Test configuration mirrors Pi's `pi-ai/compat` loader alias; runtime dependencies remain optional peers supplied by Pi.
+Tests cover path formatting, display-ready statuses, responsive layout, terminal safety, ANSI/Unicode width limits, resize behavior, and segment/status visibility persistence. Test configuration mirrors Pi's `pi-ai/compat` loader alias; runtime dependencies remain optional peers supplied by Pi.
 
 ## Security note
 

package/extensions/status-footer.ts

@@ -136,7 +136,6 @@ const DEFAULT_WARNING_THRESHOLD = 70;
 const DEFAULT_ERROR_THRESHOLD = 90;
 
 const SEGMENT_SEPARATOR = "❯";
-const EXTENSION_STATUS_SEPARATOR = SEGMENT_SEPARATOR;
 
 function formatTokens(n: number): string {
 	if (n >= 1_000_000) {
@@ -195,6 +194,111 @@ export function formatCwd(
 	return truncateToWidth(compact, maxWidth);
 }
 
+/** Preferred directory display, then parent/project, then project only. */
+export function cwdVariants(
+	cwd: string,
+	home = homedir(),
+	maxWidth = DEFAULT_CWD_MAX_WIDTH,
+	paths = process.platform === "win32" ? win32 : posix,
+): string[] {
+	const safeCwd = stripTerminalControls(cwd);
+	const leaf = paths.basename(safeCwd);
+	const parent = paths.basename(paths.dirname(safeCwd));
+	return [
+		formatCwd(cwd, home, maxWidth, paths),
+		...[parent && leaf ? `${parent}${paths.sep}${leaf}` : leaf, leaf]
+			.filter(Boolean)
+			.map((text) => truncateToWidth(stripTerminalControls(text), maxWidth, "…")),
+	].map(stripTerminalControls);
+}
+
+export type FooterSegment = {
+	name: SegmentName;
+	text: string;
+	/** Shorter, already styled representations, in preference order. */
+	alternatives?: readonly string[];
+};
+
+/** Pure, column-aware layout. The divider may be styled but has no padding. Never split a status badge. */
+export function layoutFooter(
+	segments: readonly FooterSegment[],
+	badges: readonly string[],
+	width: number,
+	divider = SEGMENT_SEPARATOR,
+): string {
+	if (!Number.isFinite(width) || width <= 0) return "";
+	width = Math.floor(width);
+	let separator = `  ${divider}  `;
+	const items = segments.map((segment) => ({ ...segment }));
+	const extensions = items.find((item) => item.name === "extensions");
+	let shownBadges = badges.length;
+	const updateBadges = () => {
+		if (!extensions) return;
+		const hidden = badges.length - shownBadges;
+		extensions.text = [...badges.slice(0, shownBadges), ...(hidden ? [`+${hidden}`] : [])].join(separator);
+	};
+	updateBadges();
+	const line = () => items.map((item) => item.text).filter(Boolean).join(separator);
+	const overflow = () => visibleWidth(line()) - width;
+	const progress = items.find((item) => item.name === "progress");
+	if (progress && overflow() > 0) {
+		const currentWidth = visibleWidth(progress.text);
+		// Keep a short activity fragment while trying the other compact forms.
+		const minimumWidth = Math.min(12, width);
+		const progressWidth = Math.min(currentWidth, Math.max(minimumWidth, currentWidth - overflow()));
+		progress.text = truncateToWidth(progress.text, progressWidth, "…");
+	}
+	// Keep the roomy default while progress alone can absorb width pressure.
+	// Tighten gaps before compacting paths/context or overflowing whole badges.
+	if (overflow() > 0) {
+		separator = ` ${divider} `;
+		updateBadges();
+	}
+	for (const name of ["cwd", "context", "thinking"] as const) {
+		const item = items.find((item) => item.name === name);
+		if (!item) continue;
+		for (const alternative of item.alternatives ?? []) {
+			if (overflow() <= 0) break;
+			if (visibleWidth(alternative) < visibleWidth(item.text)) item.text = alternative;
+		}
+	}
+	while (extensions && shownBadges > 0 && overflow() > 0) {
+		shownBadges--;
+		updateBadges();
+	}
+	// On very narrow terminals, remove optional content before clipping identity.
+	for (const name of ["progress", "cwd", "extensions"] as const) {
+		if (overflow() <= 0) break;
+		const item = items.find((item) => item.name === name);
+		if (item) {
+			item.text = name === "cwd"
+				? truncateToWidth(item.text, Math.max(0, visibleWidth(item.text) - overflow()), "…")
+				: "";
+		}
+	}
+	const model = items.find((item) => item.name === "model");
+	if (model && overflow() > 0) {
+		model.text = truncateToWidth(model.text, Math.max(0, visibleWidth(model.text) - overflow()), "…");
+	}
+	// Whole-badge overflow can free more space than needed. Use that space rather
+	// than leaving unnecessarily compact context, paths, or progress on screen.
+	for (const name of ["context", "thinking", "cwd", "progress"] as const) {
+		const item = items.find((item) => item.name === name);
+		const original = segments.find((segment) => segment.name === name);
+		if (!item?.text || !original) continue;
+		const budget = visibleWidth(item.text) - overflow();
+		if (name === "progress") {
+			item.text = truncateToWidth(original.text, Math.max(0, budget), "…");
+		} else {
+			const preferred = [original.text, ...(original.alternatives ?? [])]
+				.find((text) => visibleWidth(text) <= budget);
+			if (preferred !== undefined) item.text = preferred;
+		}
+	}
+	// A terminal narrower than thinking + context cannot show every core value.
+	return truncateToWidth(line(), width, "…");
+}
+
 function thinkingColor(level: string): ThemeColor {
 	switch (level) {
 		case "off":
@@ -1566,7 +1670,7 @@ function shouldShowStatus(key: string, filter: StatusFilter): boolean {
 	return !filter.hidden.has(key);
 }
 
-function formatExtensionStatuses(
+export function formatExtensionStatuses(
 	statuses: ReadonlyMap<string, string>,
 	filter: StatusFilter,
 	seenStatusKeys: Set<string>,
@@ -1577,9 +1681,7 @@ function formatExtensionStatuses(
 			seenStatusKeys.add(key);
 			return shouldShowStatus(key, filter);
 		})
-		.map(([key, text]) =>
-			`${stripTerminalControls(key)}:${stripTerminalControls(text)}`,
-		);
+		.map(([, text]) => stripTerminalControls(text));
 
 	return parts.length > 0 ? parts : null;
 }
@@ -1699,6 +1801,9 @@ export default function (pi: ExtensionAPI) {
 	let statusFilter: StatusFilter = { mode: "all", hidden: new Set() };
 	let visibleSegments: SegmentName[] = readGlobalSegments() ?? DEFAULT_SEGMENTS;
 	const seenStatusKeys = new Set<string>();
+	let currentStatuses: ReadonlyMap<string, string> = new Map();
+	const statusDescription = (key: string) =>
+		stripTerminalControls(currentStatuses.get(key) ?? "") || "No current status text";
 	const refresh = () => requestRender?.();
 	const progress = new FooterProgressEngine(refresh);
 	const restoreStatusFilter = (ctx: ExtensionContext) => {
@@ -1783,8 +1888,8 @@ export default function (pi: ExtensionAPI) {
 					},
 					...knownStatusKeys.map((key): SettingItem => ({
 						id: `status:${key}`,
-						label: `Status: ${key}`,
-						description: "Extension status visibility",
+						label: `Status: ${stripTerminalControls(key)}`,
+						description: statusDescription(key),
 						currentValue: statusVisibility.get(key) ? "shown" : "hidden",
 						values: ["shown", "hidden"],
 					})),
@@ -1899,8 +2004,8 @@ export default function (pi: ExtensionAPI) {
 				},
 				...knownStatusKeys.map((key): SettingItem => ({
 					id: key,
-					label: key,
-					description: "Extension status visibility",
+					label: stripTerminalControls(key),
+					description: statusDescription(key),
 					currentValue: statusVisibility.get(key) ? "shown" : "hidden",
 					values: ["shown", "hidden"],
 				})),
@@ -2134,8 +2239,9 @@ export default function (pi: ExtensionAPI) {
 				render(width: number): string[] {
 					const modelName = formatModelName(ctx.model?.id);
 					const thinkingLevel = String(pi.getThinkingLevel());
+					currentStatuses = footerData?.getExtensionStatuses?.() ?? new Map();
 					const extensionStatusParts = formatExtensionStatuses(
-						footerData?.getExtensionStatuses?.() ?? new Map(),
+						currentStatuses,
 						statusFilter,
 						seenStatusKeys,
 					);
@@ -2151,29 +2257,33 @@ export default function (pi: ExtensionAPI) {
 						: "—";
 					const progressText = progress.text();
 
-					const extensionStatuses = extensionStatusParts
-						? extensionStatusParts
-							.map((part) => theme.fg("text", part))
-							.join(` ${theme.fg("dim", EXTENSION_STATUS_SEPARATOR)} `)
-						: null;
-					const segmentRenderers: Record<SegmentName, string | null> = {
-						model: theme.fg("accent", modelName),
-						thinking: theme.fg(thinkingColor(thinkingLevel), `think:${thinkingLevel}`),
-						context: theme.fg(contextSegmentColor, contextText),
-						cwd: visibleSegments.includes("cwd")
-							? theme.fg("accent", formatCwd(ctx.cwd, homedir(), Math.min(cwdWidth, width)))
-							: null,
-						progress: progressText ? theme.fg("text", progressText) : null,
-						extensions: extensionStatuses,
+					const directories = visibleSegments.includes("cwd")
+						? cwdVariants(ctx.cwd, homedir(), cwdWidth).map((text) => theme.fg("accent", text))
+						: [];
+					const contextCompact = usage
+						? usage.percent !== null ? `${usage.percent.toFixed(1)}%` : "—%"
+						: "—";
+					const shortThinking = thinkingLevel === "medium" ? "med" : thinkingLevel === "minimal" ? "min" : thinkingLevel;
+					const renderers: Record<SegmentName, Omit<FooterSegment, "name">> = {
+						model: { text: theme.fg("accent", stripTerminalControls(modelName)) },
+						thinking: {
+							text: theme.fg(thinkingColor(thinkingLevel), `think:${thinkingLevel}`),
+							alternatives: [theme.fg(thinkingColor(thinkingLevel), `think:${shortThinking}`)],
+						},
+						context: {
+							text: theme.fg(contextSegmentColor, contextText),
+							alternatives: [theme.fg(contextSegmentColor, contextCompact)],
+						},
+						cwd: { text: directories[0] ?? "", alternatives: directories.slice(1) },
+						progress: { text: progressText ? theme.fg("text", progressText) : "" },
+						extensions: { text: "" },
 					};
-
-					const separator = `  ${theme.fg("dim", SEGMENT_SEPARATOR)}  `;
-					const line = visibleSegments
-						.map((segment) => segmentRenderers[segment])
-						.filter((segment): segment is string => segment !== null)
-						.join(separator);
-
-					return [truncateToWidth(line, width)];
+					return [layoutFooter(
+						visibleSegments.map((name) => ({ name, ...renderers[name] })),
+						(extensionStatusParts ?? []).map((part) => theme.fg("text", part)),
+						width,
+						theme.fg("dim", SEGMENT_SEPARATOR),
+					)];
 				},
 			};
 		});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-bar",
-  "version": "0.3.41",
+  "version": "0.3.43",
   "description": "Pi footer/statusline showing active model, thinking level, context pressure, live progress updates, and extension statuses.",
   "type": "module",
   "keywords": [