@underactive/pi-topping-statusline 0.1.0

package/src/context-graph.ts

@@ -0,0 +1,48 @@
+/**
+ * Context usage bar graph, ported from pi-synthwave-statusline's generateDots
+ * with OMP's palette substituted: each filled cell is colored by the threshold
+ * band its own position falls into, so the graph's gradient matches the bar's
+ * context percentage color at every fill level.
+ */
+import { formatContextUsage, getContextUsageLevel, getContextUsageThemeColor } from "./context-thresholds.js";
+import { theme } from "./theme.js";
+
+const CELLS = 20;
+const FILLED = "\u258b";
+const TROUGH = "\u2591";
+
+const cellColor = (percent: number, contextWindow: number): string =>
+	theme.getFgAnsi(getContextUsageThemeColor(getContextUsageLevel(percent, contextWindow)));
+
+export function renderContextGraph(
+	percent: number,
+	contextWindow: number,
+	opts: { usedTokens?: number; labelColor?: string; showBar?: boolean; showStats?: boolean } = {},
+): string {
+	const parts: string[] = [];
+	if (opts.showBar !== false) {
+		const filled = Math.min(CELLS, Math.max(0, Math.round((percent * CELLS) / 100)));
+		let bar = "";
+		let prevColor = "";
+		for (let i = 0; i < filled; i++) {
+			const c = cellColor(((i + 1) / CELLS) * 100, contextWindow);
+			if (c !== prevColor) {
+				bar += c;
+				prevColor = c;
+			}
+			bar += FILLED;
+		}
+		// Resets stay fg/attribute-only (39/22, never 0) so a caller's background
+		// fill survives the whole run.
+		if (filled < CELLS) bar += `\x1b[39m\x1b[2m${TROUGH.repeat(CELLS - filled)}\x1b[22m`;
+		bar += "\x1b[39m";
+		parts.push(bar);
+	}
+	if (opts.showStats !== false) {
+		// Label wears pi's own footer-stats color so it reads as part of that run;
+		// the threshold gradient still lives in the cells.
+		const text = formatContextUsage(percent, contextWindow, opts.usedTokens);
+		parts.push(opts.labelColor ? `${opts.labelColor}${text}\x1b[39m` : theme.fg("muted", text));
+	}
+	return parts.join(" ");
+}

package/src/context-thresholds.ts

@@ -0,0 +1,84 @@
+/** Ported verbatim from oh-my-pi status-line/context-thresholds.ts. */
+import type { StatusColor } from "./theme.js";
+import { formatNumber } from "./utils.js";
+
+export type ContextUsageLevel = "normal" | "warning" | "elevated" | "error";
+
+const CONTEXT_WARNING_PERCENT_THRESHOLD = 50;
+const CONTEXT_WARNING_TOKEN_THRESHOLD = 150_000;
+const CONTEXT_ELEVATED_PERCENT_THRESHOLD = 70;
+const CONTEXT_ELEVATED_TOKEN_THRESHOLD = 270_000;
+const CONTEXT_ERROR_PERCENT_THRESHOLD = 90;
+const CONTEXT_ERROR_TOKEN_THRESHOLD = 500_000;
+
+function reachesThreshold(
+	contextPercent: number,
+	contextWindow: number,
+	percentThreshold: number,
+	tokenThreshold: number,
+): boolean {
+	if (!Number.isFinite(contextPercent) || contextPercent <= 0) {
+		return false;
+	}
+	if (!Number.isFinite(contextWindow) || contextWindow <= 0) {
+		return contextPercent >= percentThreshold;
+	}
+	const tokenPercentThreshold = (tokenThreshold / contextWindow) * 100;
+	return contextPercent >= Math.min(percentThreshold, tokenPercentThreshold);
+}
+
+export function getContextUsageLevel(contextPercent: number, contextWindow: number): ContextUsageLevel {
+	if (reachesThreshold(contextPercent, contextWindow, CONTEXT_ERROR_PERCENT_THRESHOLD, CONTEXT_ERROR_TOKEN_THRESHOLD)) {
+		return "error";
+	}
+	if (
+		reachesThreshold(
+			contextPercent,
+			contextWindow,
+			CONTEXT_ELEVATED_PERCENT_THRESHOLD,
+			CONTEXT_ELEVATED_TOKEN_THRESHOLD,
+		)
+	) {
+		return "elevated";
+	}
+	if (
+		reachesThreshold(
+			contextPercent,
+			contextWindow,
+			CONTEXT_WARNING_PERCENT_THRESHOLD,
+			CONTEXT_WARNING_TOKEN_THRESHOLD,
+		)
+	) {
+		return "warning";
+	}
+	return "normal";
+}
+
+/**
+ * Format context usage as `<pct>%/<window>` when the model window is known.
+ * Unknown windows render as `<tokens>/?`.
+ */
+export function formatContextUsage(
+	contextPercent: number | null | undefined,
+	contextWindow: number,
+	usedTokens?: number,
+): string {
+	if (!Number.isFinite(contextWindow) || contextWindow <= 0) {
+		return `${formatNumber(usedTokens ?? 0)}/?`;
+	}
+	const pct = contextPercent === null || contextPercent === undefined ? "?" : `${contextPercent.toFixed(1)}%`;
+	return `${pct}/${formatNumber(contextWindow)}`;
+}
+
+export function getContextUsageThemeColor(level: ContextUsageLevel): StatusColor {
+	switch (level) {
+		case "error":
+			return "error";
+		case "elevated":
+			return "statusLineContextElevated";
+		case "warning":
+			return "warning";
+		case "normal":
+			return "statusLineContext";
+	}
+}

package/src/context.ts

@@ -0,0 +1,387 @@
+/**
+ * SegmentContext builder — the pi-side replacement for the state plumbing in
+ * oh-my-pi's StatusLineComponent (git HEAD watcher, status/PR caches).
+ *
+ * All git/gh access shells out via pi.exec, mirroring the bundled
+ * border-status-editor example and pi-synthwave-statusline.
+ */
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { SegmentContext, SegmentIncludes, StatusLineSegmentOptions, TokenRateDisplay } from "./types.js";
+
+const GIT_STATUS_TTL_MS = 1_000;
+const BRANCH_POLL_TTL_MS = 5_000;
+const EXEC_TIMEOUT_MS = 2_000;
+
+/** getEntries() filters and copies the whole session, so rescans are rate-limited. */
+const FEED_TTL_MS = 2_000;
+
+interface GitStatusCounts {
+	staged: number;
+	unstaged: number;
+	untracked: number;
+}
+
+interface RepoInfo {
+	gitDir: string;
+	commonDir: string;
+	toplevel: string;
+}
+
+function deriveContextUsage(ctx: ExtensionContext | undefined): {
+	contextWindow: number;
+	tokens: number | undefined;
+	percent: number | null;
+} {
+	const usage = ctx?.getContextUsage();
+	const contextWindow = usage?.contextWindow ?? ctx?.model?.contextWindow ?? 0;
+	const tokens = usage?.tokens ?? undefined;
+	const percent = usage ? usage.percent : contextWindow > 0 && tokens != null ? (tokens / contextWindow) * 100 : null;
+	return { contextWindow, tokens, percent };
+}
+
+function parseGitStatus(porcelain: string): GitStatusCounts {
+	let staged = 0;
+	let unstaged = 0;
+	let untracked = 0;
+	for (const line of porcelain.split("\n")) {
+		if (line.length < 2) continue;
+		if (line.startsWith("??")) {
+			untracked++;
+			continue;
+		}
+		if (line[0] !== " ") staged++;
+		if (line[1] !== " ") unstaged++;
+	}
+	return { staged, unstaged, untracked };
+}
+
+export class SegmentContextBuilder {
+	#pi: ExtensionAPI;
+	#ctx: ExtensionContext | undefined;
+	#requestRender: () => void = () => {};
+	#piStatsProvider: ((width: number) => string | undefined) | undefined;
+	#tokenRateProvider: (() => TokenRateDisplay) | undefined;
+
+	#repo: RepoInfo | null | undefined = undefined;
+	#repoCwd: string | undefined;
+	#repoResolving = false;
+
+	#branch: string | null = null;
+	#branchFetchedAt = 0;
+	#branchInFlight = false;
+	#headWatcher: fs.FSWatcher | undefined;
+	#watcherOk = false;
+
+	#gitStatus: GitStatusCounts | null = null;
+	#gitStatusFetchedAt = 0;
+	#gitStatusInFlight = false;
+
+	#pr: { number: number; url: string } | null = null;
+	#prBranch: string | null | undefined = undefined;
+	#prInFlight = false;
+	#ghUnavailable = false;
+
+	#worktree: { projectName: string; worktreeName: string } | null = null;
+
+	#feedData: Record<string, unknown> = Object.create(null) as Record<string, unknown>;
+	#feedsScannedAt = 0;
+	#feedsScanned = "";
+	#runStartedAt = 0;
+
+	constructor(pi: ExtensionAPI) {
+		this.#pi = pi;
+	}
+
+	setRequestRender(fn: () => void): void {
+		this.#requestRender = fn;
+	}
+
+	setPiStatsProvider(provider: (width: number) => string | undefined): void {
+		this.#piStatsProvider = provider;
+	}
+
+	setTokenRateProvider(provider: () => TokenRateDisplay): void {
+		this.#tokenRateProvider = provider;
+	}
+
+	attach(ctx: ExtensionContext): void {
+		this.#ctx = ctx;
+		// A publisher's figure typically covers one process run — pi-prompt-cache
+		// restarts its savings at zero on every session start — while a resumed
+		// session still carries the previous run's entries. Anything predating this
+		// attach belongs to that stale run.
+		this.#runStartedAt = Date.now();
+		this.#feedData = Object.create(null) as Record<string, unknown>;
+		this.#feedsScannedAt = 0;
+		this.#feedsScanned = "";
+		if (this.#repoCwd !== ctx.cwd) {
+			this.#resetGitState();
+			this.#repoCwd = ctx.cwd;
+			void this.#resolveRepo(ctx.cwd);
+		}
+	}
+
+	dispose(): void {
+		this.#headWatcher?.close();
+		this.#headWatcher = undefined;
+		this.#watcherOk = false;
+		this.#ctx = undefined;
+	}
+
+	// ── git plumbing ─────────────────────────────────────────────────────────
+
+	#resetGitState(): void {
+		this.#headWatcher?.close();
+		this.#headWatcher = undefined;
+		this.#watcherOk = false;
+		this.#repo = undefined;
+		this.#branch = null;
+		this.#branchFetchedAt = 0;
+		this.#gitStatus = null;
+		this.#gitStatusFetchedAt = 0;
+		this.#pr = null;
+		this.#prBranch = undefined;
+		this.#worktree = null;
+	}
+
+	async #exec(cmd: string, args: string[], cwd: string): Promise<string | undefined> {
+		const result = await this.#pi.exec(cmd, args, { cwd, timeout: EXEC_TIMEOUT_MS }).catch(() => undefined);
+		if (!result || result.code !== 0) return undefined;
+		return result.stdout;
+	}
+
+	async #resolveRepo(cwd: string): Promise<void> {
+		if (this.#repoResolving) return;
+		this.#repoResolving = true;
+		try {
+			const out = await this.#exec(
+				"git",
+				["rev-parse", "--absolute-git-dir", "--git-common-dir", "--show-toplevel"],
+				cwd,
+			);
+			if (this.#repoCwd !== cwd) return;
+			if (!out) {
+				this.#repo = null;
+				return;
+			}
+			const [gitDir, commonDirRaw, toplevel] = out.trim().split("\n");
+			if (!gitDir || !toplevel) {
+				this.#repo = null;
+				return;
+			}
+			const commonDir = path.resolve(cwd, commonDirRaw || gitDir);
+			this.#repo = { gitDir, commonDir, toplevel };
+
+			// Linked worktree: git-dir diverges from the shared common dir.
+			if (path.resolve(gitDir) !== commonDir) {
+				const base = path.basename(path.dirname(commonDir));
+				const projectName = base.endsWith(".git") ? base.slice(0, -4) : base;
+				if (projectName) {
+					this.#worktree = { projectName, worktreeName: path.basename(toplevel) };
+				}
+			}
+
+			this.#setupHeadWatcher();
+			void this.#refreshBranch();
+			this.#requestRender();
+		} finally {
+			this.#repoResolving = false;
+		}
+	}
+
+	#setupHeadWatcher(): void {
+		this.#headWatcher?.close();
+		this.#headWatcher = undefined;
+		this.#watcherOk = false;
+		if (!this.#repo) return;
+		const headPath = path.join(this.#repo.gitDir, "HEAD");
+		try {
+			const watcher = fs.watch(headPath, () => {
+				if (this.#headWatcher !== watcher) return;
+				this.#branchFetchedAt = 0;
+				this.#gitStatusFetchedAt = 0;
+				void this.#refreshBranch();
+			});
+			watcher.on("error", () => {
+				if (this.#headWatcher !== watcher) return;
+				watcher.close();
+				this.#headWatcher = undefined;
+				this.#watcherOk = false;
+			});
+			this.#headWatcher = watcher;
+			this.#watcherOk = true;
+		} catch {
+			this.#watcherOk = false;
+		}
+	}
+
+	async #refreshBranch(): Promise<void> {
+		const cwd = this.#repoCwd;
+		if (!cwd || !this.#repo || this.#branchInFlight) return;
+		this.#branchInFlight = true;
+		try {
+			const out = await this.#exec("git", ["branch", "--show-current"], cwd);
+			if (this.#repoCwd !== cwd) return;
+			this.#branchFetchedAt = Date.now();
+			const next = out?.trim() || "detached";
+			const changed = next !== this.#branch;
+			this.#branch = next;
+			if (changed) {
+				this.#prBranch = undefined;
+				this.#requestRender();
+			}
+		} finally {
+			this.#branchInFlight = false;
+		}
+	}
+
+	async #refreshGitStatus(): Promise<void> {
+		const cwd = this.#repoCwd;
+		if (!cwd || !this.#repo || this.#gitStatusInFlight) return;
+		this.#gitStatusInFlight = true;
+		try {
+			const out = await this.#exec("git", ["status", "--porcelain"], cwd);
+			if (this.#repoCwd !== cwd) return;
+			this.#gitStatusFetchedAt = Date.now();
+			const next = out === undefined ? null : parseGitStatus(out);
+			const changed =
+				next?.staged !== this.#gitStatus?.staged ||
+				next?.unstaged !== this.#gitStatus?.unstaged ||
+				next?.untracked !== this.#gitStatus?.untracked;
+			this.#gitStatus = next;
+			if (changed) this.#requestRender();
+		} finally {
+			this.#gitStatusInFlight = false;
+		}
+	}
+
+	/**
+	 * Newest in-run payload for each subscribed customType, in one backwards
+	 * pass. Walks raw append order rather than the branch-filtered view: a
+	 * publisher's own tally does not rewind when /tree moves the leaf, so an
+	 * entry stranded on an abandoned branch still reflects what it published.
+	 */
+	#refreshFeeds(customTypes: readonly string[], now: number): void {
+		this.#feedsScannedAt = now;
+		this.#feedData = Object.create(null) as Record<string, unknown>;
+		const entries = this.#ctx?.sessionManager?.getEntries();
+		if (!entries) return;
+		const pending = new Set(customTypes);
+		for (let i = entries.length - 1; i >= 0 && pending.size > 0; i--) {
+			const entry = entries[i];
+			// custom_message entries carry a customType too, so the kind is checked
+			// first: matching on customType alone lets one shadow a real entry.
+			if (entry?.type !== "custom" || !pending.has(entry.customType)) continue;
+			const ts = Date.parse(entry.timestamp);
+			if (!Number.isFinite(ts) || ts < this.#runStartedAt) break;
+			pending.delete(entry.customType);
+			if (entry.data !== undefined) this.#feedData[entry.customType] = entry.data;
+		}
+	}
+
+	async #refreshPr(): Promise<void> {
+		const cwd = this.#repoCwd;
+		const branch = this.#branch;
+		if (!cwd || !this.#repo || !branch || branch === "detached") return;
+		if (this.#ghUnavailable || this.#prInFlight || this.#prBranch === branch) return;
+		this.#prInFlight = true;
+		try {
+			const result = await this.#pi
+				.exec("gh", ["pr", "view", "--json", "number,url"], { cwd, timeout: 5_000 })
+				.catch((error: unknown) => {
+					if ((error as NodeJS.ErrnoException)?.code === "ENOENT") this.#ghUnavailable = true;
+					return undefined;
+				});
+			if (this.#repoCwd !== cwd) return;
+			this.#prBranch = branch;
+			let pr: { number: number; url: string } | null = null;
+			if (result && result.code === 0) {
+				try {
+					const parsed = JSON.parse(result.stdout) as { number?: number; url?: string };
+					if (typeof parsed.number === "number" && typeof parsed.url === "string") {
+						const u = URL.parse(parsed.url);
+						if (
+							u &&
+							(u.protocol === "https:" || u.protocol === "http:") &&
+							u.hostname === "github.com" &&
+							!/[\u0000-\u001f\u007f]/.test(parsed.url)
+						) {
+							pr = { number: parsed.number, url: u.href };
+						}
+					}
+				} catch {
+					// non-JSON output — treat as no PR
+				}
+			}
+			const changed = pr?.number !== this.#pr?.number;
+			this.#pr = pr;
+			if (changed) this.#requestRender();
+		} finally {
+			this.#prInFlight = false;
+		}
+	}
+
+	// ── snapshot ─────────────────────────────────────────────────────────────
+
+	build(
+		width: number,
+		options: StatusLineSegmentOptions,
+		include: SegmentIncludes,
+		scrollHint: string | undefined,
+	): SegmentContext {
+		const ctx = this.#ctx;
+		const now = Date.now();
+
+		if (include.git || include.pr) {
+			const branchStale = now - this.#branchFetchedAt > BRANCH_POLL_TTL_MS;
+			if (this.#repo && (branchStale && !this.#watcherOk)) void this.#refreshBranch();
+			if (include.git && this.#repo && now - this.#gitStatusFetchedAt > GIT_STATUS_TTL_MS) {
+				void this.#refreshGitStatus();
+			}
+			if (include.pr) void this.#refreshPr();
+		}
+
+		if (include.feeds.length > 0) {
+			// Editing the subscription list mid-session must not wait out the TTL.
+			const key = include.feeds.join("\u0000");
+			if (key !== this.#feedsScanned || now - this.#feedsScannedAt > FEED_TTL_MS) {
+				this.#feedsScanned = key;
+				this.#refreshFeeds(include.feeds, now);
+			}
+		}
+
+		const model = ctx?.model
+			? {
+					name: ctx.model.name,
+					id: ctx.model.id,
+					provider: ctx.model.provider,
+					reasoning: ctx.model.reasoning === true,
+				}
+			: undefined;
+
+		const { contextWindow, tokens, percent: contextPercent } = deriveContextUsage(ctx);
+
+		return {
+			options,
+			model,
+			thinkingLevel: this.#pi.getThinkingLevel(),
+			cwd: ctx?.cwd ?? process.cwd(),
+			sessionName: ctx?.sessionManager?.getSessionName(),
+			contextPercent,
+			contextTokens: tokens ?? 0,
+			contextWindow,
+			git: {
+				branch: include.git || include.pr ? this.#branch : null,
+				status: include.git ? this.#gitStatus : null,
+				pr: include.pr ? this.#pr : null,
+			},
+			worktree: this.#worktree,
+			scrollHint,
+			piStats: include.piStats ? this.#piStatsProvider?.(width) : undefined,
+			tokenRate: include.tokenRate ? this.#tokenRateProvider?.() : undefined,
+			feedData: include.feeds.length > 0 ? { ...this.#feedData } : undefined,
+		};
+	}
+}

package/src/layout.ts

@@ -0,0 +1,164 @@
+/**
+ * The bar layout engine, ported from oh-my-pi component.ts #buildStatusLine.
+ *
+ * Overflow strategy (in order): drop right segments right-to-left, shrink the
+ * elastic `path` segment down to ~8 cells, drop left segments end-first while
+ * protecting `path`. The gap between the two groups is filled with the
+ * box-horizontal glyph colored like the editor border, so it tracks the
+ * thinking-level border color; the callback receives the gap's absolute
+ * column and row in the box, so a caller can paint it as part of a
+ * continuous border gradient (the rainbow effect).
+ */
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { renderSegment } from "./segments.js";
+import { getSeparator } from "./separators.js";
+import { theme } from "./theme.js";
+import type { EffectiveStatusLineSettings, SegmentContext, StatusLineSegmentId } from "./types.js";
+
+const TRANSPARENT_BG_ANSI = "\x1b[49m";
+
+export function buildStatusLine(
+	width: number,
+	ctx: SegmentContext,
+	settings: EffectiveStatusLineSettings,
+	gapBorderColor: (str: string, startCol: number, row: number) => string,
+	segmentGroups: { left: StatusLineSegmentId[]; right: StatusLineSegmentId[] },
+	barOrigin: { col: number; row: number } = { col: 0, row: 0 },
+): string {
+	const separatorDef = getSeparator(settings.separator);
+
+	const bgAnsi = settings.transparent ? TRANSPARENT_BG_ANSI : theme.getBgAnsi();
+	const transparentBg = bgAnsi === TRANSPARENT_BG_ANSI;
+	const fgAnsi = theme.getFgAnsi("text");
+	const sepAnsi = theme.getFgAnsi("statusLineSep");
+
+	const leftParts: string[] = [];
+	const leftSegIds: StatusLineSegmentId[] = [];
+	for (const segId of segmentGroups.left) {
+		const rendered = renderSegment(segId, ctx);
+		if (rendered.visible && rendered.content) {
+			leftParts.push(rendered.content);
+			leftSegIds.push(segId);
+		}
+	}
+
+	const rightParts: string[] = [];
+	for (const segId of segmentGroups.right) {
+		const rendered = renderSegment(segId, ctx);
+		if (rendered.visible && rendered.content) {
+			rightParts.push(rendered.content);
+		}
+	}
+
+	const left = [...leftParts];
+	const right = [...rightParts];
+
+	const leftSepWidth = visibleWidth(separatorDef.left);
+	const rightSepWidth = visibleWidth(separatorDef.right);
+	// Transparent mode drops the round caps (they need a bg fill to bridge);
+	// opaque groups wear a half-circle on both ends, drawn with the bar bg as
+	// fg so each group reads as a pill. Unicode/ascii presets define no
+	// half-circle glyphs, so caps vanish there.
+	const capLeft = transparentBg ? "" : theme.sep.halfCircleLeft;
+	const capRight = transparentBg ? "" : theme.sep.halfCircleRight;
+	const capWidth = visibleWidth(capLeft) + visibleWidth(capRight);
+
+	const groupWidth = (parts: string[], sepWidth: number): number => {
+		if (parts.length === 0) return 0;
+		const partsWidth = parts.reduce((sum, part) => sum + visibleWidth(part), 0);
+		const sepTotal = Math.max(0, parts.length - 1) * (sepWidth + 2);
+		return partsWidth + sepTotal + 2 + capWidth;
+	};
+
+	const leftGroupWidth = (parts: string[]): number => groupWidth(parts, leftSepWidth);
+	const rightGroupWidth = (parts: string[]): number => groupWidth(parts, rightSepWidth);
+	let leftWidth = leftGroupWidth(left);
+	let rightWidth = rightGroupWidth(right);
+	const totalWidth = () => leftWidth + rightWidth + (left.length > 0 || right.length > 0 ? 1 : 0);
+
+	if (width > 0) {
+		while (totalWidth() > width && right.length > 0) {
+			right.pop();
+			rightWidth = rightGroupWidth(right);
+		}
+		// 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 leftOverflowDropIndex = (): number => {
+			// Preserve the current working directory as long as possible.
+			for (let i = leftSegIds.length - 1; i >= 0; i--) {
+				if (leftSegIds[i] !== "path") return i;
+			}
+			return left.length - 1;
+		};
+
+		while (totalWidth() > width && left.length > 0) {
+			const dropIdx = leftOverflowDropIndex();
+			left.splice(dropIdx, 1);
+			leftSegIds.splice(dropIdx, 1);
+			leftWidth = leftGroupWidth(left);
+		}
+	}
+
+	const renderGroup = (parts: string[], direction: "left" | "right"): string => {
+		if (parts.length === 0) return "";
+		const sep = direction === "left" ? separatorDef.left : separatorDef.right;
+		const capPrefix = bgAnsi.replace("\x1b[48;", "\x1b[38;");
+
+		let content = bgAnsi + fgAnsi;
+		content += ` ${parts.join(` ${sepAnsi}${sep}${fgAnsi} `)} `;
+		content += "\x1b[0m";
+
+		if (capLeft) content = `${capPrefix}${capLeft}\x1b[0m${content}`;
+		if (capRight) content = `${content}${capPrefix}${capRight}\x1b[0m`;
+		return content;
+	};
+
+	const leftGroup = renderGroup(left, "left");
+	const rightGroup = renderGroup(right, "right");
+	if (!leftGroup && !rightGroup) return "";
+
+	if (width === 0) {
+		return leftGroup + (leftGroup && rightGroup ? " " : "") + rightGroup;
+	}
+
+	const gapWidth = Math.max(1, width - leftWidth - rightWidth);
+	const gapFill = gapBorderColor(
+		theme.getBox(settings.borderStyle).horizontal.repeat(gapWidth),
+		barOrigin.col + leftWidth,
+		barOrigin.row,
+	);
+	if (!leftGroup) return gapFill + rightGroup;
+	if (!rightGroup) return leftGroup + gapFill;
+	return leftGroup + gapFill + rightGroup;
+}