pi-zentui 0.13.0 → 0.14.0

package/README.md

@@ -157,6 +157,9 @@ Default config values — copy this and change any value you want:
 {
 	"projectRefreshIntervalMs": 30000,
 	"footerFormat": "",
+	"responsiveFooter": true,
+	"compactFooterFormat": "$cwd$wrap(in $session_name)$wrap(on $git_branch) $git_status$wrap$context$wrap_sep$tokens",
+	"compactFooterMaxLines": 2,
 	"editorMetadataFormat": "$model  $provider(  $thinking)",
 	"separator": "pipe",
 	"contextStyle": "text",
@@ -290,7 +293,10 @@ Default config values — copy this and change any value you want:
 - `colorSources`: `theme` maps styles through Pi theme tokens; `terminal` emits terminal colors. `/zentui` switches these sources; manual JSON controls specific style values.
 - `features`: `editor` enables Zentui's custom editor, selector borders, and previous-message chrome. `statusLine` enables Zentui's custom footer/status line. `copyFriendly` hides editor and previous-message rail glyphs so native terminal selection copies less chrome. All three can be changed from `/zentui` or direct slash-command arguments.
 - `footerSegments`: show or hide individual built-in footer segments (`cwd`, `sessionName`, `gitBranch`, `gitStatus`, `gitCounts`, `gitCommit`, `gitMetrics`, `runtime`, `packageVersion`, `sessionDuration`, `username`, `time`, `os`, `context`, `tokens`, `cost`). Toggle them from the `Built-in segments` tab in `/zentui`.
-- `footerFormat`: optional Starship-style template string that fully controls the footer layout. When set, it overrides `footerSegments`. See [Footer Format Template](#footer-format-template) below. The `/zentui` **Layout** tab configures context style, separator, path display mode/depth, branch length, and icon mode; set or clear custom formats with `/zentui format`.
+- `footerFormat`: optional Starship-style template string that fully controls the footer layout. When set, it overrides `footerSegments`. See [Footer Format Template](#footer-format-template) below. The `/zentui` **Layout** tab configures responsive behavior, compact rows, context style, separator, path display mode/depth, branch length, and icon mode; set or clear custom formats with `/zentui format`.
+- `responsiveFooter`: enabled by default. Zentui keeps the current aligned one-row footer while every settings-resolved left/middle/right zone fits without layout truncation. Otherwise it tries two complete left-aligned rows, preferring `left` / `middle right` and then `left middle` / `right`. Only when neither split fits does it use `compactFooterFormat`. Set `false` to restore the legacy one-row fitting behavior. Selection uses measured terminal-cell width, not fixed device breakpoints.
+- `compactFooterFormat`: JSON-only template used by the compact stage. The default keeps cwd, session name, git branch/status, context, and abbreviated token/cache metrics. A top-level `$wrap` is an automatic wrap opportunity: one space on the same row or no space at a row break. `$wrap_sep` is the same kind of boundary but renders the styled ` | ` divider only when its adjacent chunks share a row. Nested uses of either boundary remain empty variables. `$fill` is ignored. A standalone `$extensions` chunk inserts active non-`off` extension statuses in left/middle/right placement order; embedded uses render empty. Custom `footerFormat` values use this built-in compact fallback unless this key is also customized.
+- `compactFooterMaxLines`: `1`, `2`, `3`, or `"unlimited"` (default `2`). Finite limits crop remaining chunks with exactly one trailing `…`. Compact cwd always uses basename mode; cwd/session/branch chunks target half the available row width before final ANSI-aware clamping. `/zentui` exposes the responsive toggle and row limit, while compact format editing remains JSON-only. Pi supplies footer width but no supported viewport-height budget, so `"unlimited"` is explicit.
 - `gitCommit`: Starship [`git_commit`](https://starship.rs/config/#git-commit)-style options for the `gitCommit` footer segment. `hashLength` (default `7`, clamped to `4`–`40`) controls the short-hash display length. `onlyDetached` (default `true`) shows the hash mainly on detached HEAD. `showTag` (default `true`) appends an exact-match tag (`git describe --tags --exact-match HEAD`). The tag probe piggybacks on the existing git refresh — it only runs when both the segment and `showTag` are on, and misses/failures degrade silently.
 - `gitMetrics`: Starship [`git_metrics`](https://starship.rs/config/#git-metrics)-style options for the `gitMetrics` footer segment. Uses `git diff HEAD --numstat` (staged + unstaged combined — the Starship “total dirty” view) to show aggregate `+added −deleted` line counts. `onlyNonzero` (default `true`) omits each zero component independently and hides the segment entirely at `0/0`. `ignoreSubmodules` (default `false`) adds `--ignore-submodules=all`. The numstat diff piggybacks on the existing git refresh and uses a hard 2s timeout; a metrics-only failure degrades silently without discarding fresh branch/status data. On very large monorepos the diff may lag or be omitted on timeout.
 - `extensionStatuses`: controls third-party statuses published by other Pi extensions through `ctx.ui.setStatus()`. `defaultPlacement` and each `placements` value can be `off`, `left`, `middle`, or `right`. The `Extension segments` tab in `/zentui` lists only statuses that are currently active.

package/extensions/zentui/config.ts

@@ -33,6 +33,10 @@ export type { IconMode } from "./icons";
 export type ContextStyle = "text" | "gauge" | "text+gauge";
 export type SeparatorStyle = "pipe" | "dot" | "chevron" | "none";
 export type ModelLabelSource = "id" | "name";
+export type CompactFooterMaxLines = 1 | 2 | 3 | "unlimited";
+
+export const DEFAULT_COMPACT_FOOTER_FORMAT =
+	"$cwd$wrap(in $session_name)$wrap(on $git_branch) $git_status$wrap$context$wrap_sep$tokens";
 
 export type ContextThresholds = {
 	warning: number;
@@ -127,6 +131,9 @@ export const DEFAULT_EDITOR_METADATA_FORMAT = "$model  $provider(  $thinking)";
 export type PolishedTuiConfig = {
 	projectRefreshIntervalMs: number;
 	footerFormat: string;
+	responsiveFooter: boolean;
+	compactFooterFormat: string;
+	compactFooterMaxLines: CompactFooterMaxLines;
 	editorMetadataFormat: string;
 	separator: SeparatorStyle;
 	contextStyle: ContextStyle;
@@ -225,6 +232,9 @@ export const configPath = join(getAgentDir(), "zentui.json");
 export const defaultConfig: PolishedTuiConfig = {
 	projectRefreshIntervalMs: DEFAULT_PROJECT_REFRESH_INTERVAL_MS,
 	footerFormat: "",
+	responsiveFooter: true,
+	compactFooterFormat: DEFAULT_COMPACT_FOOTER_FORMAT,
+	compactFooterMaxLines: 2,
 	editorMetadataFormat: DEFAULT_EDITOR_METADATA_FORMAT,
 	separator: "pipe",
 	contextStyle: "text",
@@ -399,6 +409,10 @@ function stringValue(record: Record<string, unknown>, key: string): string | und
 	return typeof value === "string" ? value : undefined;
 }
 
+function parseCompactFooterMaxLines(value: unknown): CompactFooterMaxLines {
+	return value === 1 || value === 2 || value === 3 || value === "unlimited" ? value : 2;
+}
+
 function colorValue(record: Record<string, unknown>, key: string): string | undefined {
 	const value = stringValue(record, key);
 	return value !== undefined && isSupportedColorSpec(value) ? value : undefined;
@@ -773,9 +787,19 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 		? normalizeFixedEditorConfig(config.fixedEditor as Record<string, unknown>)
 		: defaultConfig.fixedEditor;
 	const editorMetadataFormat = stringValue(config, "editorMetadataFormat");
+	const compactFooterFormat = stringValue(config, "compactFooterFormat");
 	return {
 		projectRefreshIntervalMs: parseProjectRefreshIntervalMs(config.projectRefreshIntervalMs),
 		footerFormat: stringValue(config, "footerFormat") ?? "",
+		responsiveFooter:
+			typeof config.responsiveFooter === "boolean"
+				? config.responsiveFooter
+				: defaultConfig.responsiveFooter,
+		compactFooterFormat:
+			compactFooterFormat && compactFooterFormat.length > 0
+				? compactFooterFormat
+				: DEFAULT_COMPACT_FOOTER_FORMAT,
+		compactFooterMaxLines: parseCompactFooterMaxLines(config.compactFooterMaxLines),
 		editorMetadataFormat:
 			editorMetadataFormat && editorMetadataFormat.length > 0
 				? editorMetadataFormat
@@ -879,6 +903,25 @@ export function saveFooterFormatPatch(value: string, path = configPath): Polishe
 	});
 }
 
+export function saveResponsiveFooterPatch(
+	patch: Partial<
+		Pick<PolishedTuiConfig, "responsiveFooter" | "compactFooterFormat" | "compactFooterMaxLines">
+	>,
+	path = configPath,
+): PolishedTuiConfig {
+	return mutateConfig(path, (record) => {
+		if (typeof patch.responsiveFooter === "boolean") {
+			record.responsiveFooter = patch.responsiveFooter;
+		}
+		if (typeof patch.compactFooterFormat === "string") {
+			record.compactFooterFormat = patch.compactFooterFormat;
+		}
+		if (patch.compactFooterMaxLines !== undefined) {
+			record.compactFooterMaxLines = parseCompactFooterMaxLines(patch.compactFooterMaxLines);
+		}
+	});
+}
+
 export function saveIconsModePatch(mode: IconMode, path = configPath): PolishedTuiConfig {
 	return mutateConfig(path, (record) => {
 		const existing = isRecord(record.icons) ? { ...(record.icons as Record<string, unknown>) } : {};

package/extensions/zentui/footer-format.ts

@@ -13,6 +13,12 @@ export type FormatToken =
 	| { kind: "fill" }
 	| { kind: "group"; tokens: FormatToken[] };
 
+export type CompactBoundaryKind = "space" | "separator";
+
+export type CompactFormatChunk =
+	| { kind: "tokens"; tokens: FormatToken[]; boundary: CompactBoundaryKind }
+	| { kind: "extensions"; boundary: CompactBoundaryKind };
+
 const TOKEN_REGEX = /\$\{([a-zA-Z_][a-zA-Z0-9_]*)\}|\$([a-zA-Z_][a-zA-Z0-9_]*)/g;
 
 /**
@@ -151,6 +157,85 @@ export function renderFormatSplit(
 	};
 }
 
+export function compileCompactFormat(tokens: FormatToken[]): CompactFormatChunk[] {
+	const chunks: CompactFormatChunk[] = [];
+	let current: FormatToken[] = [];
+	let incomingBoundary: CompactBoundaryKind = "space";
+
+	const flush = () => {
+		const normalized = trimBoundaryWhitespace(current);
+		current = [];
+		if (normalized.length === 0) return;
+		if (
+			normalized.length === 1 &&
+			normalized[0]?.kind === "var" &&
+			normalized[0].name === "extensions"
+		) {
+			chunks.push({ kind: "extensions", boundary: incomingBoundary });
+			return;
+		}
+		chunks.push({ kind: "tokens", tokens: normalized, boundary: incomingBoundary });
+	};
+
+	for (const token of tokens) {
+		if (token.kind === "var" && (token.name === "wrap" || token.name === "wrap_sep")) {
+			flush();
+			incomingBoundary = token.name === "wrap_sep" ? "separator" : "space";
+			continue;
+		}
+		if (token.kind === "fill") continue;
+		current.push(token);
+	}
+	flush();
+	return chunks;
+}
+
+function trimBoundaryWhitespace(tokens: FormatToken[]): FormatToken[] {
+	const result = tokens.map((token) => (token.kind === "text" ? { ...token } : token));
+	while (result[0]?.kind === "text") {
+		result[0].value = result[0].value.replace(/^\s+/, "");
+		if (result[0].value) break;
+		result.shift();
+	}
+	while (result.at(-1)?.kind === "text") {
+		const last = result.at(-1);
+		if (last?.kind !== "text") break;
+		last.value = last.value.replace(/\s+$/, "");
+		if (last.value) break;
+		result.pop();
+	}
+	return result;
+}
+
+export function renderFormatTokens(
+	tokens: FormatToken[],
+	renderVariable: (name: string) => string,
+): string {
+	return renderTokenSlice(tokens, 0, tokens.length, renderVariable);
+}
+
+export function collectFooterFormatReferences(
+	tokens: FormatToken[],
+	aliases: Record<string, string> = {},
+): Set<string> {
+	const references = new Set<string>();
+	const visit = (items: FormatToken[]) => {
+		for (const token of items) {
+			if (token.kind === "group") {
+				visit(token.tokens);
+				continue;
+			}
+			if (token.kind !== "var") continue;
+			const canonical = aliases[token.name] ?? token.name;
+			if (canonical !== "wrap" && canonical !== "wrap_sep" && canonical !== "extensions") {
+				references.add(canonical);
+			}
+		}
+	};
+	visit(tokens);
+	return references;
+}
+
 function findTopLevelFillIndices(tokens: FormatToken[]): number[] {
 	const fillIndices: number[] = [];
 	for (let index = 0; index < tokens.length; index++) {

package/extensions/zentui/footer-layout.ts

@@ -0,0 +1,122 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { CompactFooterMaxLines } from "./config";
+import type { CompactBoundaryKind } from "./footer-format";
+
+export type FooterZones = {
+	left: string;
+	middle: string;
+	right: string;
+};
+
+export function fullFooterFitsAligned(zones: FooterZones, innerWidth: number): boolean {
+	const leftWidth = visibleWidth(zones.left);
+	const middleWidth = visibleWidth(zones.middle);
+	const rightWidth = visibleWidth(zones.right);
+	if (middleWidth === 0) {
+		return leftWidth + rightWidth + (leftWidth > 0 && rightWidth > 0 ? 1 : 0) <= innerWidth;
+	}
+
+	const gapWidth = innerWidth - leftWidth - rightWidth;
+	if (gapWidth < middleWidth) return false;
+	const leftPadding = Math.floor((gapWidth - middleWidth) / 2);
+	const rightPadding = gapWidth - middleWidth - leftPadding;
+	return (leftWidth === 0 || leftPadding >= 1) && (rightWidth === 0 || rightPadding >= 1);
+}
+
+function joinZones(parts: string[]): string {
+	return parts.filter(Boolean).join(" ");
+}
+
+function validRows(rows: string[], innerWidth: number): string[] | undefined {
+	const nonEmpty = rows.filter(Boolean);
+	if (nonEmpty.length === 0 || nonEmpty.length > 2) return undefined;
+	return nonEmpty.every((row) => visibleWidth(row) <= innerWidth) ? nonEmpty : undefined;
+}
+
+/** Prefer project identity alone, with middle/right status on the second row. */
+export function reflowFullFooter(zones: FooterZones, innerWidth: number): string[] | undefined {
+	const preferred = validRows([zones.left, joinZones([zones.middle, zones.right])], innerWidth);
+	if (preferred) return preferred;
+	return validRows([joinZones([zones.left, zones.middle]), zones.right], innerWidth);
+}
+
+export function compactChunkBudget(innerWidth: number): number {
+	return Math.max(8, Math.floor((innerWidth - 1) / 2));
+}
+
+export type CompactLayoutChunk = {
+	text: string;
+	boundary: CompactBoundaryKind;
+};
+
+type PackedRow = {
+	text: string;
+	endsWithRendererEllipsis: boolean;
+};
+
+function fitChunk(chunk: string, innerWidth: number): PackedRow {
+	if (visibleWidth(chunk) <= innerWidth) {
+		return { text: chunk, endsWithRendererEllipsis: false };
+	}
+	return {
+		text: truncateToWidth(chunk, innerWidth, "…"),
+		endsWithRendererEllipsis: true,
+	};
+}
+
+function appendOmissionMarker(row: PackedRow, innerWidth: number): PackedRow {
+	if (row.endsWithRendererEllipsis) return row;
+	if (innerWidth <= 1) return { text: "…", endsWithRendererEllipsis: true };
+	return {
+		text: `${truncateToWidth(row.text, innerWidth - 1, "")}…`,
+		endsWithRendererEllipsis: true,
+	};
+}
+
+export function packCompactChunks(
+	chunks: CompactLayoutChunk[],
+	innerWidth: number,
+	maxLines: CompactFooterMaxLines,
+	separator: string,
+): string[] {
+	if (innerWidth <= 0) return [""];
+	const content = chunks
+		.map((chunk) => ({ ...chunk, text: chunk.text.trim() }))
+		.filter((chunk) => chunk.text.length > 0);
+	if (content.length === 0) return [""];
+
+	const finiteLimit = maxLines === "unlimited" ? Number.POSITIVE_INFINITY : maxLines;
+	const rows: PackedRow[] = [];
+	let current: PackedRow | undefined;
+	let omitted = false;
+
+	for (const chunk of content) {
+		const fitted = fitChunk(chunk.text, innerWidth);
+		if (!current) {
+			current = fitted;
+			continue;
+		}
+
+		const join = chunk.boundary === "separator" ? separator : " ";
+		const candidate = `${current.text}${join}${fitted.text}`;
+		if (visibleWidth(candidate) <= innerWidth) {
+			current = {
+				text: candidate,
+				endsWithRendererEllipsis: fitted.endsWithRendererEllipsis,
+			};
+			continue;
+		}
+
+		if (rows.length + 1 < finiteLimit) {
+			rows.push(current);
+			current = fitted;
+			continue;
+		}
+
+		omitted = true;
+		break;
+	}
+
+	if (current) rows.push(omitted ? appendOmissionMarker(current, innerWidth) : current);
+	return rows.map((row) => truncateToWidth(row.text, innerWidth, ""));
+}

package/extensions/zentui/footer.ts

@@ -7,7 +7,20 @@ import {
 	type ExtensionStatusSegment,
 	sanitizeExtensionStatusText,
 } from "./extension-status";
-import { parseFooterFormat, renderFormatSplit, stripOrphanSeparators } from "./footer-format";
+import {
+	collectFooterFormatReferences,
+	compileCompactFormat,
+	parseFooterFormat,
+	renderFormatSplit,
+	renderFormatTokens,
+	stripOrphanSeparators,
+} from "./footer-format";
+import {
+	compactChunkBudget,
+	fullFooterFitsAligned,
+	packCompactChunks,
+	reflowFullFooter,
+} from "./footer-layout";
 import {
 	buildContextDisplayLabel,
 	buildSessionDurationLabel,
@@ -181,6 +194,18 @@ export function installFooter(
 			render(width: number): string[] {
 				if (width <= 0) return [""];
 				const config = getConfig();
+				const wideFormatTokens = config.footerFormat ? parseFooterFormat(config.footerFormat) : [];
+				const compactFormatTokens = config.responsiveFooter
+					? parseFooterFormat(config.compactFooterFormat)
+					: [];
+				const wideReferences = collectFooterFormatReferences(
+					wideFormatTokens,
+					FOOTER_FORMAT_ALIASES,
+				);
+				const compactReferences = collectFooterFormatReferences(
+					compactFormatTokens,
+					FOOTER_FORMAT_ALIASES,
+				);
 				const colorSource = config.colorSources.starship;
 				const iconMode = config.icons.mode;
 				const separator = renderStyleForSource(
@@ -199,9 +224,10 @@ export function installFooter(
 						depth: config.pathDisplay.depth,
 					}),
 				);
-				const needsSessionName = config.footerFormat
-					? /(?:\$session_name\b|\$\{session_name\})/.test(config.footerFormat)
-					: config.footerSegments.sessionName;
+				const needsSessionName =
+					(config.footerFormat
+						? wideReferences.has("session_name")
+						: config.footerSegments.sessionName) || compactReferences.has("session_name");
 				const sessionName = needsSessionName
 					? sanitizeExtensionStatusText(ctx.sessionManager.getSessionName() ?? "")
 					: "";
@@ -549,7 +575,7 @@ export function installFooter(
 						left: fmtLeft,
 						middle: fmtMiddle,
 						right: fmtRight,
-					} = renderFormatSplit(parseFooterFormat(config.footerFormat), renderVariable);
+					} = renderFormatSplit(wideFormatTokens, renderVariable);
 					contentLeft = stripOrphanSeparators(fmtLeft);
 					contentMiddle = stripOrphanSeparators(fmtMiddle);
 					contentRight = stripOrphanSeparators(fmtRight);
@@ -563,21 +589,128 @@ export function installFooter(
 					segment.colorMode === "original"
 						? segment.text
 						: renderStyleForSource(theme, colorSource, config.colors.extensionStatus, segment.text);
+				const extensionLeftSegments = extensionStatuses.left.map(renderExtensionStatus);
 				const extensionMiddleSegments = extensionStatuses.middle.map(renderExtensionStatus);
+				const extensionRightSegments = extensionStatuses.right.map(renderExtensionStatus);
 				const middleSegments = contentMiddle
 					? [contentMiddle, ...extensionMiddleSegments]
 					: extensionMiddleSegments;
-				const content = composeFooterContent(
-					contentLeft,
-					contentRight,
-					extensionStatuses.left.map(renderExtensionStatus),
-					middleSegments,
-					extensionStatuses.right.map(renderExtensionStatus),
-					separator,
-					innerWidth,
+				const renderLegacyContent = () =>
+					composeFooterContent(
+						contentLeft,
+						contentRight,
+						extensionLeftSegments,
+						middleSegments,
+						extensionRightSegments,
+						separator,
+						innerWidth,
+					);
+				const frameRows = (rows: string[]) =>
+					rows.map((row) => {
+						const framed = width > 2 ? ` ${truncateToWidth(row, width - 2, "")} ` : row;
+						return truncateToWidth(framed, width, "");
+					});
+
+				if (!config.responsiveFooter) return frameRows([renderLegacyContent()]);
+
+				const fullZones = {
+					left: appendStatusArea(
+						contentLeft,
+						joinStatusTexts(extensionLeftSegments, separator),
+						separator,
+					),
+					middle: appendStatusArea(
+						contentMiddle,
+						joinStatusTexts(extensionMiddleSegments, separator),
+						separator,
+					),
+					right: prependStatusArea(
+						contentRight,
+						joinStatusTexts(extensionRightSegments, separator),
+						separator,
+					),
+				};
+				if (fullFooterFitsAligned(fullZones, innerWidth)) {
+					return frameRows([renderLegacyContent()]);
+				}
+
+				const reflowed = reflowFullFooter(fullZones, innerWidth);
+				if (reflowed) return frameRows(reflowed);
+
+				const chunkBudget = compactChunkBudget(innerWidth);
+				const compactCwdLabel = truncateToWidth(
+					renderStyleForSource(
+						theme,
+						colorSource,
+						config.colors.cwd,
+						formatCwdLabel(ctx.cwd, config.icons.cwd, { mode: "basename", depth: 0 }),
+					),
+					chunkBudget,
+					"…",
+				);
+				const compactSessionNameLabel = truncateToWidth(
+					sessionNameLabel,
+					Math.max(1, chunkBudget - visibleWidth("in ")),
+					"…",
+				);
+				const compactBranchBudget = Math.max(
+					1,
+					chunkBudget - visibleWidth("on ") - (statusBlock ? visibleWidth(statusBlock) + 1 : 0),
+				);
+				const compactBranchLabel = truncateToWidth(
+					renderVariable("git_branch"),
+					compactBranchBudget,
+					"…",
+				);
+				const renderCompactVariable = (name: string): string => {
+					const canonical = FOOTER_FORMAT_ALIASES[name] ?? name;
+					switch (canonical) {
+						case "cwd":
+							return compactCwdLabel;
+						case "session_name":
+							return compactSessionNameLabel;
+						case "git_branch":
+							return compactBranchLabel;
+						default:
+							return renderVariable(name);
+					}
+				};
+				const compactChunks: Array<{
+					text: string;
+					boundary: "space" | "separator";
+				}> = [];
+				for (const chunk of compileCompactFormat(compactFormatTokens)) {
+					if (chunk.kind === "extensions") {
+						const statuses = [
+							...extensionLeftSegments,
+							...extensionMiddleSegments,
+							...extensionRightSegments,
+						];
+						for (const [index, text] of statuses.entries()) {
+							compactChunks.push({
+								text,
+								boundary: index === 0 ? chunk.boundary : "space",
+							});
+						}
+						continue;
+					}
+					let rendered = stripOrphanSeparators(
+						renderFormatTokens(chunk.tokens, renderCompactVariable),
+					);
+					const references = collectFooterFormatReferences(chunk.tokens, FOOTER_FORMAT_ALIASES);
+					if (["cwd", "session_name", "git_branch"].some((name) => references.has(name))) {
+						rendered = truncateToWidth(rendered, chunkBudget, "…");
+					}
+					if (rendered) compactChunks.push({ text: rendered, boundary: chunk.boundary });
+				}
+				return frameRows(
+					packCompactChunks(
+						compactChunks,
+						innerWidth,
+						config.compactFooterMaxLines,
+						renderVariable("sep"),
+					),
 				);
-				const framed = width > 2 ? ` ${truncateToWidth(content, width - 2, "")} ` : content;
-				return [truncateToWidth(framed, width, "")];
 			},
 		};
 	});

package/extensions/zentui/index.ts

@@ -12,6 +12,7 @@ import {
 	type ExtensionStatusPlacement,
 	ensureConfigExists,
 	type FixedEditorConfig,
+	FOOTER_FORMAT_ALIASES,
 	type FooterSegmentsConfig,
 	type GitBranchConfig,
 	type IconMode,
@@ -29,6 +30,7 @@ import {
 	saveGitBranchPatch,
 	saveIconsModePatch,
 	savePathDisplayPatch,
+	saveResponsiveFooterPatch,
 	saveSeparatorPatch,
 	saveUiFeaturesPatch,
 	type UiFeaturesConfig,
@@ -39,6 +41,7 @@ import {
 	removeFixedEditorProbe,
 } from "./fixed-editor";
 import { installFooter } from "./footer";
+import { collectFooterFormatReferences, parseFooterFormat } from "./footer-format";
 import { buildSessionDurationLabel, invalidateUsageTotalsCache } from "./format";
 import { emptyGitStatus, readGitStatus } from "./git";
 import { LiveContextController } from "./live-context";
@@ -82,6 +85,28 @@ function getZentuiEditorBaseFactory(factory: EditorFactory | undefined): EditorF
 	return (factory as ZentuiEditorFactory | undefined)?.[ZENTUI_EDITOR_BASE_FACTORY];
 }
 
+export function activeFooterReferences(config: PolishedTuiConfig): Set<string> {
+	const references = config.footerFormat
+		? collectFooterFormatReferences(parseFooterFormat(config.footerFormat), FOOTER_FORMAT_ALIASES)
+		: new Set<string>([
+				...(config.footerSegments.sessionName ? ["session_name"] : []),
+				...(config.footerSegments.gitCommit ? ["git_commit"] : []),
+				...(config.footerSegments.gitMetrics ? ["git_metrics"] : []),
+				...(config.footerSegments.packageVersion ? ["package"] : []),
+				...(config.footerSegments.sessionDuration ? ["session_duration"] : []),
+				...(config.footerSegments.time ? ["time"] : []),
+			]);
+	if (config.responsiveFooter) {
+		for (const name of collectFooterFormatReferences(
+			parseFooterFormat(config.compactFooterFormat),
+			FOOTER_FORMAT_ALIASES,
+		)) {
+			references.add(name);
+		}
+	}
+	return references;
+}
+
 function isTuiContext(ctx: ExtensionContext): boolean {
 	try {
 		const mode = (ctx as ExtensionContext & { mode?: string }).mode;
@@ -108,6 +133,7 @@ export default function (pi: ExtensionAPI) {
 	let wrappedEditorFactory: EditorFactory | undefined;
 	let prototypePatchesInstalled = false;
 	let stopSessionTimer: () => void = () => {};
+	let sessionTimerRequirements = "";
 	let lastDurationLabel = "";
 	let lastProjectCwd: string | undefined;
 
@@ -127,19 +153,12 @@ export default function (pi: ExtensionAPI) {
 		if (!sessionLifecycle.isCurrent(generation)) return;
 		const gitCommitConfig = currentConfig.gitCommit;
 		const gitMetricsConfig = currentConfig.gitMetrics;
-		const segments = currentConfig.footerSegments;
-		const fmt = currentConfig.footerFormat;
-		// Enable optional probes when the segment is on OR a custom footerFormat
-		// references the relevant variable. Mirrors the session-duration timer
-		// pattern so format-only users still get data.
-		const formatNeedsTag = /\$\{?(?:git_tag|tag)\b/.test(fmt);
-		const formatNeedsCommit = /\$\{?(?:git_commit|commit)\b/.test(fmt);
-		const formatNeedsMetrics = /\$\{?(?:git_metrics|git_added|git_deleted)\b/.test(fmt);
-		const formatNeedsPackage = /\$\{?(?:package|package_version)\b/.test(fmt);
+		const references = activeFooterReferences(currentConfig);
 		const wantExactTag =
-			((segments.gitCommit || formatNeedsCommit) && gitCommitConfig.showTag) || formatNeedsTag;
-		const wantMetrics = segments.gitMetrics || formatNeedsMetrics;
-		const wantPackage = segments.packageVersion || formatNeedsPackage;
+			(references.has("git_commit") && gitCommitConfig.showTag) || references.has("git_tag");
+		const wantMetrics =
+			references.has("git_metrics") || references.has("git_added") || references.has("git_deleted");
+		const wantPackage = references.has("package") || references.has("package_version");
 		const [git, runtime, packageVersion] = await Promise.all([
 			readGitStatus(cwd, {
 				readExactTag: wantExactTag,
@@ -183,23 +202,30 @@ export default function (pi: ExtensionAPI) {
 		projectRefreshScheduler.stop();
 	};
 
-	const startSessionTimer = () => {
+	const reconcileSessionTimer = () => {
+		const references = activeFooterReferences(currentConfig);
+		const needsTime = references.has("time");
+		const needsDuration = references.has("session_duration");
+		const nextRequirements = needsTime || needsDuration ? `${needsTime}:${needsDuration}` : "";
+		if (
+			!sessionLifecycle.isCurrent() ||
+			!footerInstalled ||
+			!currentConfig.features.statusLine ||
+			!nextRequirements
+		) {
+			stopSessionTimer();
+			sessionTimerRequirements = "";
+			lastDurationLabel = "";
+			return;
+		}
+		if (sessionTimerRequirements === nextRequirements) return;
+
 		stopSessionTimer();
+		sessionTimerRequirements = nextRequirements;
 		lastDurationLabel = "";
 		const timer = setInterval(() => {
 			if (!sessionLifecycle.isCurrent()) return;
-			const segments = currentConfig.footerSegments;
-			const formatNeedsTimer =
-				currentConfig.footerFormat &&
-				/\$\{?(?:time|session_duration|duration)\b/.test(currentConfig.footerFormat);
-			if (
-				!(
-					currentConfig.features.statusLine &&
-					(segments.sessionDuration || segments.time || formatNeedsTimer)
-				)
-			)
-				return;
-			if (segments.time || formatNeedsTimer) {
+			if (needsTime) {
 				refresh();
 				return;
 			}
@@ -212,10 +238,27 @@ export default function (pi: ExtensionAPI) {
 		}, 1000);
 		stopSessionTimer = () => {
 			clearInterval(timer);
+			sessionTimerRequirements = "";
 			stopSessionTimer = () => {};
 		};
 	};
 
+	const sameReferences = (left: Set<string>, right: Set<string>) =>
+		left.size === right.size && [...left].every((name) => right.has(name));
+
+	const applyFooterDependencyConfigChange = (
+		ctx: ExtensionContext,
+		save: () => PolishedTuiConfig,
+	) => {
+		const before = activeFooterReferences(currentConfig);
+		const nextConfig = save();
+		const after = activeFooterReferences(nextConfig);
+		currentConfig = nextConfig;
+		if (sameReferences(before, after)) return;
+		reconcileSessionTimer();
+		if (footerInstalled) scheduleProjectRefresh(ctx, { force: true });
+	};
+
 	const installPrototypePatches = () => {
 		if (prototypePatchesInstalled) return;
 		const cleanupSelectorBorderStyle = installSelectorBorderStyle(getActiveTheme, getCurrentConfig);
@@ -347,7 +390,7 @@ export default function (pi: ExtensionAPI) {
 		);
 		scheduleProjectRefresh(ctx, { force: true });
 		refresh();
-		startSessionTimer();
+		reconcileSessionTimer();
 	};
 
 	const uninstallStatusLine = (ctx: ExtensionContext) => {
@@ -475,11 +518,17 @@ export default function (pi: ExtensionAPI) {
 					: undefined,
 			};
 		},
-		setFooterSegments(patch: Partial<FooterSegmentsConfig>) {
-			currentConfig = saveFooterSegmentsPatch(patch);
+		setFooterSegments(patch: Partial<FooterSegmentsConfig>, ctx: ExtensionContext) {
+			applyFooterDependencyConfigChange(ctx, () => saveFooterSegmentsPatch(patch));
 		},
-		setFooterFormat(value: string) {
-			currentConfig = saveFooterFormatPatch(value);
+		setFooterFormat(value: string, ctx: ExtensionContext) {
+			applyFooterDependencyConfigChange(ctx, () => saveFooterFormatPatch(value));
+		},
+		setResponsiveFooter(
+			patch: Partial<Pick<PolishedTuiConfig, "responsiveFooter" | "compactFooterMaxLines">>,
+			ctx: ExtensionContext,
+		) {
+			applyFooterDependencyConfigChange(ctx, () => saveResponsiveFooterPatch(patch));
 		},
 		setIconMode(mode: IconMode) {
 			currentConfig = saveIconsModePatch(mode);

package/extensions/zentui/project-refresh.ts

@@ -30,6 +30,7 @@ export function createProjectRefreshScheduler<T>(
 ): ProjectRefreshScheduler<T> {
 	let refreshInFlight = false;
 	let refreshPending = false;
+	let pendingForce = false;
 	let pendingTarget: T | undefined;
 	let delayedRefresh: ReturnType<typeof setTimeout> | undefined;
 	let lastRefreshStartedAt: number | undefined;
@@ -41,10 +42,11 @@ export function createProjectRefreshScheduler<T>(
 		delayedRefresh = undefined;
 	};
 
-	const runRefresh = (target: T) => {
+	const runRefresh = (target: T, options: ScheduleProjectRefreshOptions = {}) => {
 		clearDelayedRefresh();
 		if (refreshInFlight) {
 			refreshPending = true;
+			pendingForce ||= options.force === true;
 			pendingTarget = target;
 			return;
 		}
@@ -60,16 +62,18 @@ export function createProjectRefreshScheduler<T>(
 				afterRefresh();
 				if (refreshPending) {
 					refreshPending = false;
+					const nextForce = pendingForce;
+					pendingForce = false;
 					const nextTarget = pendingTarget ?? target;
 					pendingTarget = undefined;
-					schedule(nextTarget);
+					schedule(nextTarget, { force: nextForce });
 				}
 			});
 	};
 
 	const schedule = (target: T, options: ScheduleProjectRefreshOptions = {}) => {
 		if (options.force || throttleMs <= 0 || lastRefreshStartedAt === undefined) {
-			runRefresh(target);
+			runRefresh(target, options);
 			return;
 		}
 
@@ -97,6 +101,7 @@ export function createProjectRefreshScheduler<T>(
 			clearDelayedRefresh();
 			refreshInFlight = false;
 			refreshPending = false;
+			pendingForce = false;
 			pendingTarget = undefined;
 			lastRefreshStartedAt = undefined;
 		},

package/extensions/zentui/settings-command.ts

@@ -12,6 +12,7 @@ import {
 import {
 	type ColorSource,
 	type ColorSourcesConfig,
+	type CompactFooterMaxLines,
 	type ContextStyle,
 	type ExtensionStatusColorMode,
 	type ExtensionStatusPlacement,
@@ -50,6 +51,7 @@ const pathDisplayModeValues: PathDisplayMode[] = ["basename", "full"];
 const pathDepthValues = ["0", "1", "2", "3", "4", "5"] as const;
 const branchLengthPresetValues = ["full", "10", "20", "30", "40", "50"] as const;
 const iconModeValues: IconMode[] = ["auto", "nerd", "ascii"];
+const compactFooterMaxLineValues = ["1", "2", "3", "unlimited"] as const;
 type FeatureState = "enabled" | "disabled";
 
 const featureStateValues: FeatureState[] = ["enabled", "disabled"];
@@ -66,6 +68,8 @@ type FeatureSettingId = keyof UiFeaturesConfig;
 type FooterSegmentSettingId = keyof FooterSegmentsConfig;
 type SettingsSection = (typeof settingsSections)[number];
 type LayoutSettingId =
+	| "responsiveFooter"
+	| "compactFooterMaxLines"
 	| "contextStyle"
 	| "separator"
 	| "pathDisplay"
@@ -81,8 +85,12 @@ type SettingsCommandDeps = {
 		patch: Partial<UiFeaturesConfig>,
 		ctx: ExtensionContext,
 	) => { applied: boolean; reason?: string };
-	setFooterSegments: (patch: Partial<FooterSegmentsConfig>) => void;
-	setFooterFormat: (value: string) => void;
+	setFooterSegments: (patch: Partial<FooterSegmentsConfig>, ctx: ExtensionContext) => void;
+	setFooterFormat: (value: string, ctx: ExtensionContext) => void;
+	setResponsiveFooter?: (
+		patch: Partial<Pick<PolishedTuiConfig, "responsiveFooter" | "compactFooterMaxLines">>,
+		ctx: ExtensionContext,
+	) => void;
 	setIconMode: (mode: IconMode) => void;
 	setContextStyle: (style: ContextStyle) => void;
 	setSeparator: (separator: SeparatorStyle) => void;
@@ -256,8 +264,19 @@ function branchLengthValues(maxLength: GitBranchMaxLength): string[] {
 		: [current, ...branchLengthPresetValues];
 }
 
+function isCompactFooterMaxLines(value: string): value is `${CompactFooterMaxLines}` {
+	return (compactFooterMaxLineValues as readonly string[]).includes(value);
+}
+
+function parseCompactFooterMaxLines(value: string): CompactFooterMaxLines | undefined {
+	if (!isCompactFooterMaxLines(value)) return undefined;
+	return value === "unlimited" ? value : (Number(value) as 1 | 2 | 3);
+}
+
 function isLayoutSettingId(value: string): value is LayoutSettingId {
 	return (
+		value === "responsiveFooter" ||
+		value === "compactFooterMaxLines" ||
 		value === "contextStyle" ||
 		value === "separator" ||
 		value === "pathDisplay" ||
@@ -464,6 +483,21 @@ function buildItems(
 
 	if (section === "layout") {
 		return [
+			{
+				id: "responsiveFooter",
+				label: "Responsive footer",
+				description: "Reflow complete content, then use the compact template when space is tight.",
+				currentValue: featureValue(config.responsiveFooter),
+				values: featureStateValues,
+			},
+			{
+				id: "compactFooterMaxLines",
+				label: "Compact footer rows",
+				description:
+					"Maximum compact rows before remaining template content is cropped with an ellipsis.",
+				currentValue: String(config.compactFooterMaxLines),
+				values: [...compactFooterMaxLineValues],
+			},
 			{
 				id: "contextStyle",
 				label: "Context style",
@@ -605,7 +639,7 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 			const formatCommand = parseFormatCommand(args);
 			if (formatCommand) {
 				try {
-					deps.setFooterFormat(formatCommand.value ?? "");
+					deps.setFooterFormat(formatCommand.value ?? "", ctx);
 					deps.requestRender();
 					if (ctx.hasUI) {
 						if (formatCommand.value === undefined) {
@@ -719,6 +753,26 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 								}
 
 								if (isLayoutSettingId(id)) {
+									if (id === "responsiveFooter" && isFeatureState(newValue)) {
+										deps.setResponsiveFooter?.({ responsiveFooter: newValue === "enabled" }, ctx);
+										settingsList.updateValue(id, newValue);
+										deps.requestRender();
+										ctx.ui.notify(`Responsive footer: ${newValue}`, "info");
+										tui.requestRender();
+										return;
+									}
+
+									if (id === "compactFooterMaxLines") {
+										const maxLines = parseCompactFooterMaxLines(newValue);
+										if (maxLines === undefined) return;
+										deps.setResponsiveFooter?.({ compactFooterMaxLines: maxLines }, ctx);
+										settingsList.updateValue(id, newValue);
+										deps.requestRender();
+										ctx.ui.notify(`Compact footer rows: ${newValue}`, "info");
+										tui.requestRender();
+										return;
+									}
+
 									if (id === "contextStyle" && isContextStyle(newValue)) {
 										deps.setContextStyle(newValue);
 										settingsList.updateValue(id, newValue);
@@ -778,7 +832,7 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 
 								const footerSegmentSetting = footerSegmentSettingFromId(id);
 								if (footerSegmentSetting && isFeatureState(newValue)) {
-									deps.setFooterSegments(footerSegmentPatch(footerSegmentSetting, newValue));
+									deps.setFooterSegments(footerSegmentPatch(footerSegmentSetting, newValue), ctx);
 									settingsList.updateValue(id, newValue);
 									deps.requestRender();
 									ctx.ui.notify(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-zentui",
-	"version": "0.13.0",
+	"version": "0.14.0",
 	"description": "A Starship-inspired statusline and Opencode-style TUI for Pi.",
 	"type": "module",
 	"license": "MIT",