@underactive/pi-topping-statusline 0.2.0 → 0.2.2

package/src/box.ts

@@ -2,16 +2,16 @@
  * 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
+ * Gradient 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
+ * and the border colorizer are injected because they differ per caller
  * (host borderColor vs menu theme; shared stepped animator vs phase-from-
  * elapsed instance).
  */
 import { stripVTControlCharacters } from "node:util";
 import { visibleWidth } from "@earendil-works/pi-tui";
-import { perimeterLength, perimeterPosition, type RainbowBorder } from "./rainbow.js";
+import { perimeterLength, perimeterPosition, type BorderColorizer } from "./rainbow.js";
 import type { BoxGlyphs } from "./theme.js";
 
 export interface BoxPainters {
@@ -22,28 +22,50 @@ export interface BoxPainters {
 }
 
 export function makeBoxPainters(opts: {
-	rainbowOn: boolean;
-	rainbow: RainbowBorder;
+	colorizerOn: boolean;
+	colorizer: BorderColorizer;
 	box: BoxGlyphs;
 	width: number;
 	bottomIdx: number;
 	flat: (str: string) => string;
 }): BoxPainters {
-	const { rainbowOn, rainbow, box, width, bottomIdx, flat } = opts;
+	const { colorizerOn, colorizer, 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);
+		colorizerOn ? colorizer.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));
+		if (!colorizerOn) return flat(box.horizontal.repeat(count));
 		let out = "";
-		for (let k = 0; k < count; k++) out += paint(row, startCol + k, box.horizontal);
+		let runPrefix: string | undefined;
+		let runChars = "";
+		for (let k = 0; k < count; k++) {
+			const prefix = colorizer.prefix(perimeterPosition(row, startCol + k, width, bottomIdx), perimeter);
+			if (runPrefix !== undefined && prefix !== runPrefix) {
+				out += `${runPrefix}${runChars}\x1b[39m`;
+				runChars = "";
+			}
+			runPrefix = prefix;
+			runChars += box.horizontal;
+		}
+		if (runPrefix !== undefined) out += `${runPrefix}${runChars}\x1b[39m`;
 		return out;
 	};
 	const gapColor = (str: string, startCol: number, row: number): string => {
-		if (!rainbowOn) return flat(str);
+		if (!colorizerOn) return flat(str);
 		let out = "";
+		let runPrefix: string | undefined;
+		let runChars = "";
 		let k = 0;
-		for (const ch of str) out += paint(row, startCol + k++, ch);
+		for (const ch of str) {
+			const prefix = colorizer.prefix(perimeterPosition(row, startCol + k++, width, bottomIdx), perimeter);
+			if (runPrefix !== undefined && prefix !== runPrefix) {
+				out += `${runPrefix}${runChars}\x1b[39m`;
+				runChars = "";
+			}
+			runPrefix = prefix;
+			runChars += ch;
+		}
+		if (runPrefix !== undefined) out += `${runPrefix}${runChars}\x1b[39m`;
 		return out;
 	};
 	return { paint, horizRun, gapColor };

package/src/compaction-embed.ts

@@ -0,0 +1,62 @@
+/**
+ * pi-topping-compact's compaction progress, hosted in the bottom bar.
+ *
+ * The two extensions talk over pi's extension event bus. This extension
+ * announces on COMPACTION_EMBED_CHANNEL whether its bottom bar has room for the
+ * progress; pi-topping-compact broadcasts snapshots on COMPACTION_PROGRESS_CHANNEL
+ * only while it does, and ends with `{ active: false }` so pi's stats and the
+ * context graph return the moment the compaction finishes. Its completion
+ * result still appears above the editor, in pi-topping-compact's own widget.
+ */
+import { COMPACTION_STAND_INS } from "./settings.js";
+import { hexToFgAnsi } from "./theme.js";
+import type { CompactionProgressView, EffectiveStatusLineSettings } from "./types.js";
+
+/** Announced as `{ embedded: boolean }`. Shared with pi-topping-compact. */
+export const COMPACTION_EMBED_CHANNEL = "pi-topping-statusline:compaction-progress-embedded";
+
+/** Carries a CompactionProgressView plus `active: true`, or `{ active: false }`. Shared with pi-topping-compact. */
+export const COMPACTION_PROGRESS_CHANNEL = "pi-topping-compact:compaction-progress";
+
+const isFiniteNumber = (value: unknown): value is number => typeof value === "number" && Number.isFinite(value);
+
+/** The view in a broadcast, or undefined when it reports no active compaction or is malformed. */
+export function parseCompactionProgress(data: unknown): CompactionProgressView | undefined {
+	if (typeof data !== "object" || data === null || Array.isArray(data)) return undefined;
+	const { active, bar, percent, tokensBefore, contextWindow, elapsedMs } = data as Record<string, unknown>;
+	if (active !== true || typeof bar !== "string") return undefined;
+	if (
+		!isFiniteNumber(percent) ||
+		!isFiniteNumber(tokensBefore) ||
+		!isFiniteNumber(contextWindow) ||
+		!isFiniteNumber(elapsedMs)
+	) {
+		return undefined;
+	}
+	return { bar, percent, tokensBefore, contextWindow, elapsedMs };
+}
+
+/** Whether the bottom bar has somewhere to put the progress: the setting is on and a segment it stands in for is shown. */
+export function hostsCompactionProgress(effective: EffectiveStatusLineSettings): boolean {
+	return (
+		effective.embedCompactionProgress &&
+		effective.bottomRightSegments.some((id) => COMPACTION_STAND_INS[id] !== undefined)
+	);
+}
+
+/** pi-topping-compact's phosphor bar as it looks with a third of the context left to compact. */
+const FIT_PROBE_BAR = `${hexToFgAnsi("#72f1b8")}${"\u258b".repeat(7)}\x1b[39m\x1b[2m${hexToFgAnsi("#266446")}${"\u2591".repeat(13)}\x1b[22m\x1b[39m`;
+
+/**
+ * A representative hosted compaction (66% usage, 35% still to go, so 47% summarized), used to
+ * measure whether the stand-in segments have room before any real progress has broadcast, and
+ * shown in the settings preview. Real figures vary in digit count, but this stands in for a
+ * typical session without committing to a worst case that would starve the rest of the bar.
+ */
+export const COMPACTION_FIT_PROBE: CompactionProgressView = {
+	bar: FIT_PROBE_BAR,
+	percent: 47,
+	tokensBefore: 86_000,
+	contextWindow: 131_072,
+	elapsedMs: 16_300,
+};

package/src/context-graph.ts

@@ -17,10 +17,10 @@ const cellColor = (percent: number, contextWindow: number): string =>
 export function renderContextGraph(
 	percent: number,
 	contextWindow: number,
-	opts: { usedTokens?: number; labelColor?: string; showBar?: boolean; showStats?: boolean } = {},
+	opts: { usedTokens: number; labelColor: string; showBar: boolean; showStats: boolean; estimated: boolean },
 ): string {
 	const parts: string[] = [];
-	if (opts.showBar !== false) {
+	if (opts.showBar) {
 		const filled = Math.min(CELLS, Math.max(0, Math.round((percent * CELLS) / 100)));
 		let bar = "";
 		let prevColor = "";
@@ -38,11 +38,11 @@ export function renderContextGraph(
 		bar += "\x1b[39m";
 		parts.push(bar);
 	}
-	if (opts.showStats !== false) {
+	if (opts.showStats) {
 		// 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));
+		const text = formatContextUsage(percent, contextWindow, opts.usedTokens, opts.estimated);
+		parts.push(`${opts.labelColor}${text}\x1b[39m`);
 	}
 	return parts.join(" ");
 }

package/src/context-thresholds.ts

@@ -1,4 +1,4 @@
-/** Ported verbatim from oh-my-pi status-line/context-thresholds.ts. */
+/** Ported from oh-my-pi status-line/context-thresholds.ts; formatContextUsage adds the `~` estimate marker. */
 import type { StatusColor } from "./theme.js";
 import { formatNumber } from "./utils.js";
 
@@ -62,11 +62,15 @@ export function formatContextUsage(
 	contextPercent: number | null | undefined,
 	contextWindow: number,
 	usedTokens?: number,
+	estimated = false,
 ): string {
+	// An estimate wears "~" so it reads as one until pi's own figure arrives.
+	const about = estimated ? "~" : "";
 	if (!Number.isFinite(contextWindow) || contextWindow <= 0) {
-		return `${formatNumber(usedTokens ?? 0)}/?`;
+		return `${about}${formatNumber(usedTokens ?? 0)}/?`;
 	}
-	const pct = contextPercent === null || contextPercent === undefined ? "?" : `${contextPercent.toFixed(1)}%`;
+	const pct =
+		contextPercent === null || contextPercent === undefined ? "?" : `${about}${contextPercent.toFixed(1)}%`;
 	return `${pct}/${formatNumber(contextWindow)}`;
 }
 

package/src/context.ts

@@ -8,7 +8,12 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { isDeepStrictEqual } from "node:util";
-import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import {
+	buildSessionContext,
+	estimateTokens,
+	type ExtensionAPI,
+	type ExtensionContext,
+} from "@earendil-works/pi-coding-agent";
 import { FADE_SHADE_COUNT } from "./theme.js";
 import type { FeedDisplayState, SegmentContext, SegmentIncludes, StatusLineSegmentOptions, TokenRateDisplay } from "./types.js";
 import { feedKey } from "./utils.js";
@@ -55,16 +60,32 @@ export function getFeedDisplayState(changedAt: number, now: number): FeedDisplay
 	};
 }
 
-function deriveContextUsage(ctx: ExtensionContext | undefined): {
+interface ContextUsageFigures {
 	contextWindow: number;
-	tokens: number | undefined;
+	tokens: number;
 	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 : null;
-	return { contextWindow, tokens, percent };
+	/** The figures are pi's estimate of a freshly compacted context, not a measurement. */
+	estimated: boolean;
+}
+
+/** One post-compaction estimate, keyed by session and leaf so it is rebuilt only when the branch grows. */
+interface ContextEstimate {
+	key: string;
+	tokens: number | undefined;
+}
+
+/**
+ * pi's own estimate of the context after a compaction: the summary plus the
+ * kept and later messages, sized by its per-message estimator. This is the
+ * figure pi hands compaction callers as estimatedTokensAfter, so it agrees with
+ * what pi-topping-compact reports in its result.
+ */
+export function estimateCompactedContextTokens(sessionManager: ExtensionContext["sessionManager"]): number {
+	let tokens = 0;
+	for (const message of buildSessionContext(sessionManager.getBranch(), sessionManager.getLeafId()).messages) {
+		tokens += estimateTokens(message);
+	}
+	return tokens;
 }
 
 function parseGitStatus(porcelain: string): GitStatusCounts {
@@ -119,6 +140,8 @@ export class SegmentContextBuilder {
 	#feedTimer: ReturnType<typeof setTimeout> | undefined;
 	#feedTimerAt: number | undefined;
 
+	#contextEstimate: ContextEstimate | undefined;
+
 	constructor(pi: ExtensionAPI) {
 		this.#pi = pi;
 	}
@@ -146,6 +169,7 @@ export class SegmentContextBuilder {
 		this.#feedsScannedAt = 0;
 		this.#feedsScannedRef = undefined;
 		this.#clearFeedLifecycle();
+		this.#contextEstimate = undefined;
 		if (this.#repoCwd !== ctx.cwd) {
 			this.#resetGitState();
 			this.#repoCwd = ctx.cwd;
@@ -307,7 +331,7 @@ export class SegmentContextBuilder {
 	#refreshFeeds(customTypes: readonly string[], now: number): void {
 		this.#feedsScannedAt = now;
 		this.#feedData = emptyFeedData();
-		const entries = this.#ctx?.sessionManager?.getEntries();
+		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--) {
@@ -414,6 +438,40 @@ export class SegmentContextBuilder {
 		}
 	}
 
+	// ── context usage ────────────────────────────────────────────────────────
+
+	/**
+	 * pi reports usage as unknown between a compaction and the next assistant
+	 * response. Rather than let the graph vanish for that stretch, this fills it
+	 * with pi's own estimate of the compacted context, flagged as such, until
+	 * pi's measured figure arrives.
+	 */
+	#deriveContextUsage(ctx: ExtensionContext | undefined): ContextUsageFigures {
+		const usage = ctx?.getContextUsage();
+		const contextWindow = usage?.contextWindow ?? ctx?.model?.contextWindow ?? 0;
+		if (!ctx || !usage || usage.tokens !== null || contextWindow <= 0) {
+			return { contextWindow, tokens: usage?.tokens ?? 0, percent: usage ? usage.percent : null, estimated: false };
+		}
+		const tokens = this.#estimateContextTokens(ctx);
+		if (tokens === undefined) return { contextWindow, tokens: 0, percent: null, estimated: false };
+		return { contextWindow, tokens, percent: (tokens / contextWindow) * 100, estimated: true };
+	}
+
+	#estimateContextTokens(ctx: ExtensionContext): number | undefined {
+		const sessionManager = ctx.sessionManager;
+		try {
+			const key = `${sessionManager.getSessionId()}\0${sessionManager.getLeafId() ?? ""}`;
+			if (this.#contextEstimate?.key !== key) {
+				this.#contextEstimate = { key, tokens: undefined };
+				this.#contextEstimate.tokens = estimateCompactedContextTokens(sessionManager);
+			}
+			return this.#contextEstimate.tokens;
+		} catch {
+			// The session plumbing is pi's; a surprise there costs the estimate, not the frame.
+			return undefined;
+		}
+	}
+
 	// ── snapshot ─────────────────────────────────────────────────────────────
 
 	build(
@@ -455,17 +513,18 @@ export class SegmentContextBuilder {
 				}
 			: undefined;
 
-		const { contextWindow, tokens, percent: contextPercent } = deriveContextUsage(ctx);
+		const { contextWindow, tokens, percent: contextPercent, estimated } = this.#deriveContextUsage(ctx);
 
 		return {
 			options,
 			model,
 			thinkingLevel: this.#pi.getThinkingLevel(),
 			cwd: ctx?.cwd ?? process.cwd(),
-			sessionName: ctx?.sessionManager?.getSessionName(),
+			sessionName: ctx?.sessionManager.getSessionName(),
 			contextPercent,
-			contextTokens: tokens ?? 0,
+			contextTokens: tokens,
 			contextWindow,
+			contextEstimated: estimated,
 			git: {
 				branch: include.git || include.pr ? this.#branch : null,
 				status: include.git ? this.#gitStatus : null,

package/src/footer.ts

@@ -27,8 +27,11 @@ function containsComponent(node: unknown, target: unknown, seen: Set<unknown>):
 }
 
 /**
- * Let Pi's fullscreen footer slot collapse when its component renders no rows.
- * Pi 0.84 gives that VStack entry minSize=1, independently of render output.
+ * Let pi's fullscreen footer slot collapse when its component renders no rows.
+ * Hosts before 0.86 give that VStack entry minSize=1 regardless of render
+ * output; 0.86 fixed it (#8919), where this writes 0 over 0. Delete this
+ * helper, its index.ts call/restore path, and its test once the minimum
+ * supported host is 0.86.
  */
 export function collapseFooterLayoutSlot(layoutRoot: unknown, footer: unknown): (() => void) | undefined {
 	const seen = new Set<unknown>();

package/src/layout.ts

@@ -2,21 +2,28 @@
  * The bar layout engine, ported from oh-my-pi component.ts #buildStatusLine.
  *
  * Overflow strategy (in order): drop right segments right-to-left, truncate
- * the embedded `working` status (no ellipsis, as pi's own border does), 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
+ * the embedded `working` status with the caller's chosen ellipsis policy,
+ * shrink the elastic `path` segment down to ~8 cells, drop left segments
+ * end-first while protecting `path`. Working indicators retain pi's bare cut;
+ * message-style indicators use an ellipsis so truncated prose is apparent.
+ * 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).
  *
- * `options.leftFade` (0..1) blends every left segment after a leading `pi`
- * symbol toward the bar background, which the working-indicator transition
- * uses to cross-fade the group without moving the symbol or its chevron.
+ * `options.leftFade` (0..1) blends transient left segments toward the bar
+ * background while keeping the Pi symbol and model details solid, which the
+ * working-indicator transition uses without hiding stable model information.
+ * `options.workingReveal` (0..1) slides the `working` status out from behind
+ * the segment before it, trailing separator first, pushing the segments after
+ * it right. Overflow is resolved for the fully revealed status, so no segment
+ * appears or drops mid-slide and the last frame matches the settled bar.
  */
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { sliceByColumn, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { renderSegment } from "./segments.js";
 import { getSeparator } from "./separators.js";
+import { STATUS_STABLE_SEGMENTS } from "./settings.js";
 import { theme } from "./theme.js";
 import type { EffectiveStatusLineSettings, SegmentContext, StatusLineSegmentId } from "./types.js";
 
@@ -63,7 +70,13 @@ export function buildStatusLine(
 	gapBorderColor: (str: string, startCol: number, row: number) => string,
 	segmentGroups: { left: StatusLineSegmentId[]; right: StatusLineSegmentId[] },
 	barOrigin: { col: number; row: number } = { col: 0, row: 0 },
-	options: { leftFade?: number } = {},
+	options: {
+		leftFade?: number;
+		workingReveal?: number;
+		workingEllipsis?: string;
+		/** Called once overflow trimming settles, with the segment ids that actually made it into each rendered group. */
+		onFit?: (fit: { left: readonly StatusLineSegmentId[]; right: readonly StatusLineSegmentId[] }) => void;
+	} = {},
 ): string {
 	const separatorDef = getSeparator(settings.separator);
 
@@ -71,6 +84,8 @@ export function buildStatusLine(
 	const transparentBg = bgAnsi === TRANSPARENT_BG_ANSI;
 	const fgAnsi = theme.getFgAnsi("text");
 	const sepAnsi = theme.getFgAnsi("statusLineSep");
+	const leftSepText = ` ${sepAnsi}${separatorDef.left}${fgAnsi} `;
+	const rightSepText = ` ${sepAnsi}${separatorDef.right}${fgAnsi} `;
 
 	const left: string[] = [];
 	const leftSegIds: StatusLineSegmentId[] = [];
@@ -83,10 +98,12 @@ export function buildStatusLine(
 	}
 
 	const right: string[] = [];
+	const rightSegIds: StatusLineSegmentId[] = [];
 	for (const segId of segmentGroups.right) {
 		const rendered = renderSegment(segId, ctx);
 		if (rendered.visible && rendered.content) {
 			right.push(rendered.content);
+			rightSegIds.push(segId);
 		}
 	}
 
@@ -103,7 +120,7 @@ export function buildStatusLine(
 	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);
+		const sepTotal = (parts.length - 1) * (sepWidth + 2);
 		return partsWidth + sepTotal + 2 + capWidth;
 	};
 
@@ -116,15 +133,27 @@ export function buildStatusLine(
 	if (width > 0) {
 		while (totalWidth() > width && right.length > 0) {
 			right.pop();
+			rightSegIds.pop();
 			rightWidth = rightGroupWidth(right);
 		}
 		// The working status absorbs overflow first so the Pi symbol beside it
-		// survives on narrow terminals.
+		// survives on narrow terminals. Segments trailing it are dropped first so
+		// a static segment (e.g. model) never outlives the live status indicator.
 		const workingIdx = leftSegIds.indexOf("working");
+		while (
+			workingIdx >= 0 &&
+			workingIdx < left.length - 1 &&
+			visibleWidth(left[workingIdx]) - (totalWidth() - width) < 1
+		) {
+			left.pop();
+			leftSegIds.pop();
+			leftWidth = leftGroupWidth(left);
+		}
 		if (workingIdx >= 0 && totalWidth() > width) {
 			const available = visibleWidth(left[workingIdx]) - (totalWidth() - width);
 			if (available >= 1) {
-				left[workingIdx] = truncateToWidth(left[workingIdx], available, "");
+				left[workingIdx] =
+					truncateToWidth(left[workingIdx], available, options.workingEllipsis ?? "") + bgAnsi + fgAnsi;
 			} else {
 				left.splice(workingIdx, 1);
 				leftSegIds.splice(workingIdx, 1);
@@ -156,25 +185,49 @@ export function buildStatusLine(
 		}
 	}
 
-	const renderGroup = (parts: string[], direction: "left" | "right", fadeFrom = parts.length): string => {
-		if (parts.length === 0) return "";
-		const sep = direction === "left" ? separatorDef.left : separatorDef.right;
-		const capPrefix = bgAnsi.replace("\x1b[48;", "\x1b[38;");
-		const sepText = ` ${sepAnsi}${sep}${fgAnsi} `;
-
-		let body: string;
-		const fade = options.leftFade;
-		if (fade !== undefined && fade < 1 && fadeFrom < parts.length) {
-			// The faded tail opens with an explicit default-fg reset so plain text
-			// inside it is recolored too, not just segments that set their own color.
-			const head = parts.slice(0, fadeFrom).join(sepText);
-			const tail = `\x1b[39m${parts.slice(fadeFrom).join(sepText)}`;
-			body = head + theme.fadeAnsi((head ? sepText : "") + tail, fade);
+	// Trimming above only drops or truncates segments, never adds them back, so
+	// the surviving ids are settled here regardless of width.
+	options.onFit?.({ left: leftSegIds, right: rightSegIds });
+
+	const fade = options.leftFade;
+	if (fade !== undefined && fade < 1) {
+		for (const [i, id] of leftSegIds.entries()) {
+			if (STATUS_STABLE_SEGMENTS.has(id)) continue;
+			// Reset first so plain text is recolored too, not just segments that
+			// set their own foreground color.
+			left[i] = theme.fadeAnsi(`\x1b[39m${left[i]}`, fade);
+		}
+	}
+
+	const reveal = options.workingReveal;
+	const slideIdx = leftSegIds.indexOf("working");
+	if (reveal !== undefined && reveal < 1 && slideIdx >= 0) {
+		// Only the status's tail has emerged. Ahead of another segment, the tail
+		// includes the separator between them and is joined onto that segment,
+		// which then moves right one cell per revealed cell.
+		const pushes = slideIdx < left.length - 1;
+		const unit = pushes ? left[slideIdx] + leftSepText : left[slideIdx];
+		const unitWidth = visibleWidth(unit);
+		const shown = Math.round(unitWidth * reveal);
+		if (shown <= 0) {
+			left.splice(slideIdx, 1);
+			leftSegIds.splice(slideIdx, 1);
+		} else if (pushes) {
+			left.splice(slideIdx, 2, sliceByColumn(unit, unitWidth - shown, shown) + left[slideIdx + 1]);
+			leftSegIds.splice(slideIdx, 1);
 		} else {
-			body = parts.join(sepText);
+			left[slideIdx] = sliceByColumn(unit, unitWidth - shown, shown);
 		}
+		leftWidth = leftGroupWidth(left);
+	}
+
+	const renderGroup = (parts: string[], direction: "left" | "right"): string => {
+		if (parts.length === 0) return "";
+		const capPrefix = bgAnsi.replace("\x1b[48;", "\x1b[38;");
+		const sepText = direction === "left" ? leftSepText : rightSepText;
+
 		let content = bgAnsi + fgAnsi;
-		content += ` ${body} `;
+		content += ` ${parts.join(sepText)} `;
 		content += "\x1b[0m";
 
 		if (capLeft) content = `${capPrefix}${capLeft}\x1b[0m${content}`;
@@ -182,7 +235,7 @@ export function buildStatusLine(
 		return content;
 	};
 
-	const leftGroup = renderGroup(left, "left", leftSegIds[0] === "pi" ? 1 : 0);
+	const leftGroup = renderGroup(left, "left");
 	const rightGroup = renderGroup(right, "right");
 	if (!leftGroup && !rightGroup) return "";
 
@@ -196,7 +249,5 @@ export function buildStatusLine(
 		barOrigin.col + leftWidth,
 		barOrigin.row,
 	);
-	if (!leftGroup) return gapFill + rightGroup;
-	if (!rightGroup) return leftGroup + gapFill;
 	return leftGroup + gapFill + rightGroup;
 }