@underactive/pi-topping-statusline 0.2.1 → 0.2.2

package/src/layout.ts

@@ -12,13 +12,18 @@
  * 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";
 
@@ -65,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; workingEllipsis?: string } = {},
+	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);
 
@@ -73,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[] = [];
@@ -85,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);
 		}
 	}
 
@@ -105,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;
 	};
 
@@ -118,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, options.workingEllipsis ?? "");
+				left[workingIdx] =
+					truncateToWidth(left[workingIdx], available, options.workingEllipsis ?? "") + bgAnsi + fgAnsi;
 			} else {
 				left.splice(workingIdx, 1);
 				leftSegIds.splice(workingIdx, 1);
@@ -158,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}`;
@@ -184,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 "";
 
@@ -198,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;
 }

package/src/menu.ts

@@ -16,7 +16,7 @@
  *   ║ ╭── π ⬢ model ───────────────────── session ──╮  ║
  *   ║                                                  ║
  *   ╟─ Global ─────────────────────────────────────────╢
- *   ║  ▸ [■] Transparent Segments                ON    ║
+ *   ║  > [■] Transparent Segments                ON    ║
  *   ║    Separator                ‹ powerline-thin ›   ║
  *   ║                                                  ║
  *   ╟──────────────────────────────────────────────────╢
@@ -118,11 +118,6 @@ const PLAIN_ROW_PREFIX_LEN = 5;
 const CHECKBOX_ROW_PREFIX_LEN = 8;
 
 interface FlatItem {
-	id: string;
-	label: string;
-	cycleValues?: readonly string[];
-	cycleEnabledBy?: string;
-	cycleDisabledValue?: string;
 	item: MenuItem;
 	sectionIndex: number;
 }
@@ -131,15 +126,7 @@ function flattenSections(sections: MenuSection[]): FlatItem[] {
 	const flat: FlatItem[] = [];
 	for (const [sectionIndex, section] of sections.entries()) {
 		for (const item of section.items) {
-			flat.push({
-				id: item.id,
-				label: item.label,
-				cycleValues: item.cycleValues,
-				cycleEnabledBy: item.cycleEnabledBy,
-				cycleDisabledValue: item.cycleDisabledValue,
-				item,
-				sectionIndex,
-			});
+			flat.push({ item, sectionIndex });
 		}
 	}
 	return flat;
@@ -260,26 +247,26 @@ export class MenuComponent implements Component {
 			[Key.space]: () => {
 				const item = this.flat[this.cursor]!;
 				if (item.item.action) {
-					this.runAction(item.id);
+					this.runAction(item.item.id);
 					return;
 				}
 				if (item.item.text) {
 					this.beginEditing(item);
 					return;
 				}
-				if (item.cycleValues && item.cycleEnabledBy) {
-					this.values[item.cycleEnabledBy] = !this.values[item.cycleEnabledBy] as boolean;
-					if (!this.values[item.cycleEnabledBy] && item.cycleDisabledValue !== undefined) {
-						this.values[item.id] = item.cycleDisabledValue;
+				if (item.item.cycleValues && item.item.cycleEnabledBy) {
+					this.values[item.item.cycleEnabledBy] = !this.values[item.item.cycleEnabledBy] as boolean;
+					if (!this.values[item.item.cycleEnabledBy] && item.item.cycleDisabledValue !== undefined) {
+						this.values[item.item.id] = item.item.cycleDisabledValue;
 					}
-				} else if (!item.cycleValues) this.values[item.id] = !this.values[item.id] as boolean;
+				} else if (!item.item.cycleValues) this.values[item.item.id] = !this.values[item.item.id] as boolean;
 				this.invalidate();
 			},
 			// Enter opens an editor or fires an action on those rows, so applying
 			// the whole menu stays available from any other row.
 			[Key.enter]: () => {
 				const item = this.flat[this.cursor]!;
-				if (item.item.action) this.runAction(item.id);
+				if (item.item.action) this.runAction(item.item.id);
 				else if (item.item.text) this.beginEditing(item);
 				else this.done({ applied: true, values: { ...this.values } });
 			},
@@ -297,7 +284,7 @@ export class MenuComponent implements Component {
 	}
 
 	private beginEditing(item: FlatItem): void {
-		this.editing = { id: item.id, buffer: String(this.values[item.id] ?? "") };
+		this.editing = { id: item.item.id, buffer: String(this.values[item.item.id] ?? "") };
 		this.invalidate();
 	}
 
@@ -373,10 +360,10 @@ export class MenuComponent implements Component {
 
 	private cycleCurrentValue(delta: number): void {
 		const item = this.flat[this.cursor]!;
-		if (!item.cycleValues?.length || (item.cycleEnabledBy && !this.values[item.cycleEnabledBy])) return;
-		const current = item.cycleValues.indexOf(this.values[item.id] as string);
-		const index = (current + delta + item.cycleValues.length) % item.cycleValues.length;
-		this.values[item.id] = item.cycleValues[index]!;
+		if (!item.item.cycleValues?.length || (item.item.cycleEnabledBy && !this.values[item.item.cycleEnabledBy])) return;
+		const current = item.item.cycleValues.indexOf(this.values[item.item.id] as string);
+		const index = (current + delta + item.item.cycleValues.length) % item.item.cycleValues.length;
+		this.values[item.item.id] = item.item.cycleValues[index]!;
 		this.invalidate();
 	}
 
@@ -386,7 +373,7 @@ export class MenuComponent implements Component {
 		const result = this.previewFn(
 			this.values,
 			this.previewOrigin !== undefined ? Date.now() - this.previewOrigin : 0,
-			this.flat[this.cursor]?.id,
+			this.flat[this.cursor]?.item.id,
 			innerWidth,
 		);
 		if (Array.isArray(result)) {
@@ -500,8 +487,8 @@ export class MenuComponent implements Component {
 	}
 
 	private availableRows(): number | undefined {
-		const rows = (this.tui as (TUI & { terminal?: { rows?: number } }) | undefined)?.terminal?.rows;
-		return typeof rows === "number" && Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : undefined;
+		const rows = this.tui?.terminal.rows;
+		return rows !== undefined && rows > 0 ? rows : undefined;
 	}
 
 	private buildLines(maxWidth: number, maxRows?: number): string[] {
@@ -597,15 +584,17 @@ export class MenuComponent implements Component {
 	private renderItemRow(item: MenuItem, selected: boolean, innerWidth: number): string {
 		const th = this.theme;
 		const value = this.values[item.id]!;
-		const marker = selected ? "\u25b8" : " ";
+		const marker = selected ? ">" : " ";
 		const markerColored = selected ? th.fg("accent", marker) : marker;
+		const rowBackground = (content: string) =>
+			selected ? th.bg("selectedBg", content.replaceAll("\x1b[0m", `\x1b[0m${th.getBgAnsi("selectedBg")}`)) : content;
 
 		if (item.action) {
 			const label = truncateToWidth(item.label, Math.max(0, innerWidth - 5));
 			const leftPlain = `  ${marker} ${label}`;
 			const pad = Math.max(0, innerWidth - visibleWidth(leftPlain));
 			const content = `  ${markerColored} ${th.fg(selected ? "accent" : "muted", label)}${" ".repeat(pad)}`;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", rowBackground(content), "\u2551");
 		}
 
 		if (item.text) {
@@ -626,7 +615,7 @@ export class MenuComponent implements Component {
 			const leftPlain = `  ${marker} ${label} ${fieldText}${caret}`;
 			const pad = Math.max(0, innerWidth - visibleWidth(leftPlain) - 1);
 			const content = `  ${markerColored} ${th.fg("dim", label)} ${fieldStyled}${editing ? th.fg("accent", caret) : ""}${" ".repeat(pad)} `;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", rowBackground(content), "\u2551");
 		}
 
 		if (item.cycleValues) {
@@ -638,7 +627,7 @@ export class MenuComponent implements Component {
 				const leftPlain = `  ${marker} ${label}`;
 				const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
 				const content = `  ${markerColored} ${th.fg("text", label)}${" ".repeat(gap)}${th.fg("accent", stateWord)}  `;
-				return this.wrap("\u2551", content, "\u2551");
+				return this.wrap("\u2551", rowBackground(content), "\u2551");
 			}
 			const enabled = this.values[item.cycleEnabledBy] as boolean;
 			const maxLabelLen = Math.max(0, innerWidth - CHECKBOX_ROW_PREFIX_LEN - visibleWidth(stateWord) - 1);
@@ -646,7 +635,7 @@ export class MenuComponent implements Component {
 			const leftPlain = `  ${marker} [${enabled ? "■" : " "}] ${label}`;
 			const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
 			const content = `  ${markerColored} [${enabled ? th.fg("success", "■") : th.fg("muted", " ")}] ${th.fg("text", label)}${" ".repeat(gap)}${enabled ? th.fg("accent", stateWord) : th.fg("muted", stateWord)}  `;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", rowBackground(content), "\u2551");
 		}
 
 		const enabled = value as boolean;
@@ -658,7 +647,7 @@ export class MenuComponent implements Component {
 		const leftPlain = `  ${marker} [${box}] ${label}`;
 		const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(rightPlain));
 		const content = `  ${markerColored} [${enabled ? th.fg("success", box) : th.fg("muted", box)}] ${th.fg("text", label)}${" ".repeat(gap)}${enabled ? th.fg("success", stateWord) : th.fg("muted", stateWord)}  `;
-		return this.wrap("\u2551", content, "\u2551");
+		return this.wrap("\u2551", rowBackground(content), "\u2551");
 	}
 }
 

package/src/segments.ts

@@ -14,6 +14,7 @@ import { MAJOR_COLOR_HEXES, hexToFgAnsi, theme } from "./theme.js";
 import {
 	clampPathLength,
 	feedKey,
+	formatNumber,
 	getSessionAccentHex,
 	sanitizeLabel,
 	sanitizeStatusText,
@@ -21,6 +22,7 @@ import {
 	withIcon,
 } from "./utils.js";
 import type {
+	CompactionProgressView,
 	FeedFormat,
 	RenderedSegment,
 	SegmentContext,
@@ -344,12 +346,62 @@ const contextGraphSegment: StatusLineSegment = {
 				labelColor: theme.getFgAnsi("dim"),
 				showBar,
 				showStats,
+				estimated: ctx.contextEstimated === true,
 			}),
 			visible: true,
 		};
 	},
 };
 
+const clampPercent = (percent: number): number => Math.round(Math.min(100, Math.max(0, percent)));
+
+/** "57% summarized · 16.3s": how much of the context has been summarized so far, and the time taken. */
+export function formatCompactionInfo(view: CompactionProgressView): string {
+	const elapsed = `${(Math.max(0, view.elapsedMs) / 1000).toFixed(1)}s`;
+	return `${clampPercent(view.percent)}% summarized${theme.sep.dot}${elapsed}`;
+}
+
+/**
+ * "86K/131K (66%)": the tokens being compacted over the window, and as a share
+ * of it, in the context label's number style. The share is omitted when the
+ * window is unknown.
+ */
+export function formatCompactionTokens(view: CompactionProgressView): string {
+	const before = formatNumber(Math.max(0, view.tokensBefore));
+	if (view.contextWindow <= 0) return `${before}/?`;
+	const usage = clampPercent((view.tokensBefore / view.contextWindow) * 100);
+	return `${before}/${formatNumber(view.contextWindow)} (${usage}%)`;
+}
+
+/** pi-topping-compact's figures, standing in for pi's stats while its progress is hosted. */
+const compactionInfoSegment: StatusLineSegment = {
+	id: "compaction_info",
+	render(ctx) {
+		const view = ctx.compaction;
+		if (!view) return INVISIBLE;
+		return { content: theme.fg("dim", formatCompactionInfo(view)), visible: true };
+	},
+};
+
+/**
+ * pi-topping-compact's bar, standing in for the context graph while its progress
+ * is hosted, under the graph's own bar and stats toggles. The bar arrives
+ * pre-rendered with fg-only resets, so it is passed through verbatim.
+ */
+const compactionGraphSegment: StatusLineSegment = {
+	id: "compaction_graph",
+	render(ctx) {
+		const view = ctx.compaction;
+		if (!view) return INVISIBLE;
+		const { showBar, showStats } = ctx.options.context;
+		const parts: string[] = [];
+		if (showBar) parts.push(view.bar);
+		if (showStats) parts.push(theme.fg("dim", formatCompactionTokens(view)));
+		if (parts.length === 0) return INVISIBLE;
+		return { content: parts.join(" "), visible: true };
+	},
+};
+
 const accentAnsi = new Map<string, string>();
 
 const sessionNameSegment: StatusLineSegment = {
@@ -384,6 +436,8 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	context_graph: contextGraphSegment,
 	scroll_hint: scrollHintSegment,
 	working: workingSegment,
+	compaction_info: compactionInfoSegment,
+	compaction_graph: compactionGraphSegment,
 };
 
 export function renderSegment(id: StatusLineSegmentId, ctx: SegmentContext): RenderedSegment {

package/src/settings-menu.ts

@@ -5,6 +5,7 @@
  */
 import type { ExtensionAPI, ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
 import { makeBoxPainters, renderBoxRow } from "./box.js";
+import { COMPACTION_FIT_PROBE } from "./compaction-embed.js";
 import type { SegmentContextBuilder } from "./context.js";
 import { buildStatusLine } from "./layout.js";
 import { showMenu, type MenuSection, type MenuValue, type PreviewResult } from "./menu.js";
@@ -13,6 +14,7 @@ import { RAINBOW_CYCLE_MS, RAINBOW_FRAME_MS, RainbowBorder } from "./rainbow.js"
 import {
 	applySettings,
 	BORDER_STYLES,
+	bottomRightSegments,
 	DEFAULT_FEEDS,
 	DEFAULT_SEGMENTS,
 	FEED_FORMATS,
@@ -71,48 +73,64 @@ const SEGMENT_ROWS: readonly {
 	{ id: "tokenRateBottomLeft", label: "Token rate", section: "Bottom Left Segment Group" },
 ];
 
-// Feed rows are addressed by index so a rebuild can drop one cleanly.
+// Feed rows carry a stable key (independent of on-screen position) so
+// MenuComponent.rebuild's id-keyed value carry-over survives a removal.
 const FEED_PREFIX = "feed";
-const feedKey = (index: number, part: keyof StatusLineFeed) => `${FEED_PREFIX}.${index}.${part}`;
+const feedKey = (key: number, part: keyof StatusLineFeed) => `${FEED_PREFIX}.${key}.${part}`;
 const ADD_FEED_ID = `${FEED_PREFIX}.add`;
-const removeFeedId = (index: number) => `${FEED_PREFIX}.${index}.remove`;
+const removeFeedId = (key: number) => `${FEED_PREFIX}.${key}.remove`;
 const FEED_ROW_RE = new RegExp(`^${FEED_PREFIX}\\.(\\d+)\\.`);
+const REMOVE_FEED_RE = new RegExp(`^${FEED_PREFIX}\\.(\\d+)\\.remove$`);
 
-function feedSection(feeds: readonly StatusLineFeed[]): MenuSection {
+interface FeedPair {
+	key: number;
+	feed: StatusLineFeed;
+}
+
+const pairsFromFeeds = (feeds: readonly StatusLineFeed[]): FeedPair[] => feeds.map((feed, key) => ({ key, feed }));
+
+function feedSection(pairs: readonly FeedPair[]): MenuSection {
 	const items: MenuSection["items"] = [];
-	for (const [index, feed] of feeds.entries()) {
+	pairs.forEach(({ key, feed }, index) => {
 		const n = index + 1;
 		items.push(
-			{ id: feedKey(index, "customType"), label: `${n}. type`, value: feed.customType, text: true, placeholder: "ext/custom-type" },
-			{ id: feedKey(index, "field"), label: `${n}. field`, value: feed.field, text: true, placeholder: "fieldName" },
-			{ id: feedKey(index, "prefix"), label: `${n}. prefix`, value: feed.prefix, text: true, placeholder: "(none)" },
-			{ id: feedKey(index, "format"), label: `${n}. format`, value: feed.format, cycleValues: FEED_FORMATS },
-			{ id: removeFeedId(index), label: `${n}. remove this feed`, value: false, action: true },
+			{ id: feedKey(key, "customType"), label: `${n}. type`, value: feed.customType, text: true, placeholder: "ext/custom-type" },
+			{ id: feedKey(key, "field"), label: `${n}. field`, value: feed.field, text: true, placeholder: "fieldName" },
+			{ id: feedKey(key, "prefix"), label: `${n}. prefix`, value: feed.prefix, text: true, placeholder: "(none)" },
+			{ id: feedKey(key, "format"), label: `${n}. format`, value: feed.format, cycleValues: FEED_FORMATS },
+			{ id: removeFeedId(key), label: `${n}. remove this feed`, value: false, action: true },
 		);
-	}
+	});
 	items.push({ id: ADD_FEED_ID, label: "+ add feed", value: false, action: true });
 	return { title: "Feeds", items };
 }
 
-/** Read the feed rows back out of the menu's flat value map. */
-function feedsFromValues(values: Record<string, MenuValue>): StatusLineFeed[] {
-	const indices = new Set<number>();
-	for (const key of Object.keys(values)) {
-		const match = FEED_ROW_RE.exec(key);
-		if (match) indices.add(Number(match[1]));
+/** Read the feed rows back out of the menu's flat value map, keyed by their stable id. */
+function feedPairsFromValues(values: Record<string, MenuValue>): FeedPair[] {
+	const keys = new Set<number>();
+	for (const id of Object.keys(values)) {
+		const match = FEED_ROW_RE.exec(id);
+		if (match) keys.add(Number(match[1]));
 	}
-	return [...indices]
+	return [...keys]
 		.sort((a, b) => a - b)
-		.map((index): StatusLineFeed => {
-			const rawFormat = String(values[feedKey(index, "format")] ?? "text");
+		.map((key): FeedPair => {
+			const rawFormat = String(values[feedKey(key, "format")] ?? "text");
 			return {
-				customType: String(values[feedKey(index, "customType")] ?? ""),
-				field: String(values[feedKey(index, "field")] ?? ""),
-				prefix: String(values[feedKey(index, "prefix")] ?? ""),
-				format: FEED_FORMATS.includes(rawFormat as FeedFormat) ? (rawFormat as FeedFormat) : "text",
+				key,
+				feed: {
+					customType: String(values[feedKey(key, "customType")] ?? ""),
+					field: String(values[feedKey(key, "field")] ?? ""),
+					prefix: String(values[feedKey(key, "prefix")] ?? ""),
+					format: FEED_FORMATS.includes(rawFormat as FeedFormat) ? (rawFormat as FeedFormat) : "text",
+				},
 			};
 		})
-		.filter(feed => feed.customType.trim() || feed.field.trim() || feed.prefix.trim());
+		.filter(({ feed }) => feed.customType.trim() || feed.field.trim() || feed.prefix.trim());
+}
+
+function feedsFromValues(values: Record<string, MenuValue>): StatusLineFeed[] {
+	return feedPairsFromValues(values).map(({ feed }) => feed);
 }
 
 function buildSections(settings: StatusLineSettings): MenuSection[] {
@@ -159,6 +177,11 @@ function buildSections(settings: StatusLineSettings): MenuSection[] {
 				label: "Embed status spinners",
 				value: settings.embedWorkingStatus ?? false,
 			},
+			{
+				id: "embedCompactionProgress",
+				label: "Embed compaction progress",
+				value: settings.embedCompactionProgress ?? true,
+			},
 		],
 	};
 	return [
@@ -171,7 +194,7 @@ function buildSections(settings: StatusLineSettings): MenuSection[] {
 				value: seg[row.id],
 			})),
 		})),
-		feedSection(settings.feeds ? sanitizeFeeds(settings.feeds) : DEFAULT_FEEDS),
+		feedSection(pairsFromFeeds(settings.feeds ? sanitizeFeeds(settings.feeds) : DEFAULT_FEEDS)),
 	];
 }
 
@@ -192,6 +215,7 @@ function valuesToSettings(values: Record<string, MenuValue>): StatusLineSettings
 		nvidiaGreenBorder: values.nvidiaGreenBorder === true,
 		nvidiaGreenAnimation: values.nvidiaGreenAnimation === true,
 		embedWorkingStatus: values.embedWorkingStatus === true,
+		embedCompactionProgress: values.embedCompactionProgress === true,
 	};
 }
 
@@ -312,14 +336,17 @@ class StatusLinePreview {
 				{ col: 3, row: 0 },
 				{ workingEllipsis: compactionDemo ? "…" : "" },
 			);
+			// Focusing the compaction row demos the bottom bar hosting
+			// pi-topping-compact's progress, while the setting is on.
+			const progressDemo = activeItemId === "embedCompactionProgress" && effective.embedCompactionProgress;
 			const bottom = buildStatusLine(
 				barWidth,
-				ctx,
+				progressDemo ? { ...ctx, compaction: COMPACTION_FIT_PROBE } : ctx,
 				effective,
 				painters.gapColor,
 				{
 					left: effective.bottomLeftSegments,
-					right: effective.bottomRightSegments,
+					right: bottomRightSegments(effective, progressDemo),
 				},
 				{ col: 3, row: bottomIdx },
 			);
@@ -347,7 +374,7 @@ export function registerSettingsCommand(
 	onChange: () => void,
 ): void {
 	pi.registerCommand("topping-statusline-settings", {
-		description: "Configure transparent segments, statusline segments, separator, symbols, border style, feeds, rainbow border animation, the Switchyard NVIDIA-green border, and the embedded status spinners",
+		description: "Configure transparent segments, statusline segments, separator, symbols, border style, feeds, rainbow border animation, the Switchyard NVIDIA-green border, the embedded status spinners, and the embedded compaction progress",
 		handler: async (_args, ctx: ExtensionCommandContext) => {
 			if (ctx.mode !== "tui") {
 				ctx.ui.notify("/topping-statusline-settings requires TUI mode", "error");
@@ -360,17 +387,20 @@ export function registerSettingsCommand(
 				hints: ["↑↓ move", "←→ cycle", "␣ toggle", "⏎ apply/edit", "esc cancel"],
 				preview: preview.render.bind(preview),
 				onAction: (id, values) => {
-					const feeds = feedsFromValues(values);
+					const pairs = feedPairsFromValues(values);
+					let nextPairs: FeedPair[];
 					if (id === ADD_FEED_ID) {
-						feeds.push({ customType: "", field: "", prefix: "", format: "currency" });
+						const key = Math.max(-1, ...pairs.map(p => p.key)) + 1;
+						nextPairs = [...pairs, { key, feed: { customType: "", field: "", prefix: "", format: "currency" } }];
 					} else {
-						const match = new RegExp(`^${FEED_PREFIX}\\.(\\d+)\\.remove$`).exec(id);
+						const match = REMOVE_FEED_RE.exec(id);
 						if (!match) return undefined;
-						feeds.splice(Number(match[1]), 1);
+						const removedKey = Number(match[1]);
+						nextPairs = pairs.filter(p => p.key !== removedKey);
 					}
-					// Rows are index-addressed, so the whole menu is regenerated to
-					// keep ids contiguous after an insert or removal.
-					return [...buildSections(valuesToSettings(values)).slice(0, -1), feedSection(feeds)];
+					// The whole menu is regenerated so positional labels stay correct
+					// after an insert or removal; row ids are untouched by this.
+					return [...buildSections(valuesToSettings(values)).slice(0, -1), feedSection(nextPairs)];
 				},
 			});
 			if (!result.applied) return;